diff --git a/src/static/index.html b/src/static/index.html
new file mode 100644
index 0000000..49b1244
--- /dev/null
+++ b/src/static/index.html
@@ -0,0 +1,1708 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>RAG Benchmarker</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg-base: #0F1419;
+    --bg-card: #1A2332;
+    --bg-input: #243044;
+    --bg-hover: #2D3A4A;
+    --border: #2D3A4A;
+    --border-focus: #3B82F6;
+    --text-heading: #E8EDF2;
+    --text-body: #E8EDF2;
+    --text-muted: #7A8BA0;
+    --accent: #F59E0B;
+    --accent-hover: #D97706;
+    --success: #10B981;
+    --danger: #F43F5E;
+    --warning: #F59E0B;
+    --teal: #14B8A6;
+    --violet: #8B5CF6;
+    --radius: 6px;
+    --radius-lg: 10px;
+    --shadow: 0 1px 3px rgba(0,0,0,0.4);
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: var(--bg-base);
+    color: var(--text-body);
+    font-size: 14px;
+    line-height: 1.5;
+  }
+  code, pre, .mono {
+    font-family: 'SF Mono', Consolas, 'Liberation Mono', monospace;
+  }
+  /* -- Tab bar ---------------------------------------------- */
+  .tab-bar {
+    display: flex;
+    align-items: center;
+    background: var(--bg-card);
+    border-bottom: 1px solid var(--border);
+    padding: 0 16px;
+    height: 48px;
+    gap: 0;
+  }
+  .tab-bar .logo {
+    font-weight: 700;
+    font-size: 15px;
+    color: var(--accent);
+    margin-right: 24px;
+    white-space: nowrap;
+    letter-spacing: -0.3px;
+  }
+  .tab-bar .logo span { color: var(--text-muted); font-weight: 400; }
+  .tab-btn {
+    background: none; border: none; color: var(--text-muted);
+    font-family: inherit; font-size: 13px; font-weight: 500;
+    padding: 12px 16px; cursor: pointer; position: relative;
+    transition: color 0.15s;
+  }
+  .tab-btn:hover { color: var(--text-body); }
+  .tab-btn.active { color: var(--text-heading); }
+  .tab-btn.active::after {
+    content: ''; position: absolute; bottom: -1px; left: 12px; right: 12px;
+    height: 2px; background: var(--accent); border-radius: 1px;
+  }
+  /* -- Main content ----------------------------------------- */
+  .main { padding: 24px; max-width: 1200px; margin: 0 auto; }
+  /* -- Cards ------------------------------------------------ */
+  .card {
+    background: var(--bg-card); border: 1px solid var(--border);
+    border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px;
+    box-shadow: var(--shadow);
+  }
+  .card-title {
+    font-size: 16px; font-weight: 600; color: var(--text-heading);
+    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
+  }
+  /* -- Status cards grid ------------------------------------ */
+  .status-grid {
+    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px; margin-bottom: 20px;
+  }
+  .status-card {
+    background: var(--bg-card); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 16px; text-align: center;
+  }
+  .status-card .label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
+  .status-card .value { font-size: 28px; font-weight: 700; color: var(--text-heading); }
+  .status-card .value.accent { color: var(--accent); }
+  .status-card .value.green { color: var(--success); }
+  /* -- Buttons ----------------------------------------------- */
+  .btn {
+    font-family: inherit; font-size: 13px; font-weight: 500;
+    padding: 6px 14px; border-radius: var(--radius); border: 1px solid transparent;
+    cursor: pointer; transition: all 0.15s; display: inline-flex;
+    align-items: center; gap: 6px;
+  }
+  .btn-primary {
+    background: var(--accent); color: #000; border-color: var(--accent);
+  }
+  .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
+  .btn-secondary {
+    background: var(--bg-input); color: var(--text-body); border-color: var(--border);
+  }
+  .btn-secondary:hover { background: var(--bg-hover); border-color: var(--text-muted); }
+  .btn-danger {
+    background: transparent; color: var(--danger); border-color: var(--danger);
+  }
+  .btn-danger:hover { background: var(--danger); color: #fff; }
+  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+  .btn-sm { font-size: 12px; padding: 4px 10px; }
+  /* -- Inputs ------------------------------------------------ */
+  input[type="text"], input[type="number"], select, textarea {
+    font-family: inherit; font-size: 13px; color: var(--text-body);
+    background: var(--bg-input); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 8px 12px; width: 100%;
+    outline: none; transition: border-color 0.15s;
+  }
+  input:focus, select:focus, textarea:focus { border-color: var(--border-focus); }
+  input::placeholder, textarea::placeholder { color: var(--text-muted); }
+  textarea { resize: vertical; min-height: 80px; }
+  select { cursor: pointer; }
+  label { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
+  .form-group { margin-bottom: 14px; }
+  /* -- Table ------------------------------------------------- */
+  table { width: 100%; border-collapse: collapse; }
+  th {
+    text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 600;
+    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px;
+    border-bottom: 1px solid var(--border);
+  }
+  td {
+    padding: 10px 12px; border-bottom: 1px solid var(--border);
+    font-size: 13px; vertical-align: top;
+  }
+  tr:hover td { background: var(--bg-hover); }
+  .empty-state {
+    text-align: center; padding: 40px 20px; color: var(--text-muted);
+  }
+  .empty-state .icon { font-size: 36px; margin-bottom: 8px; }
+  /* -- Badges ------------------------------------------------ */
+  .badge {
+    display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px;
+    border-radius: 10px; text-transform: uppercase; letter-spacing: 0.3px;
+  }
+  .badge-success { background: rgba(16,185,129,0.15); color: var(--success); }
+  .badge-warning { background: rgba(245,158,11,0.15); color: var(--warning); }
+  .badge-danger  { background: rgba(244,63,94,0.15); color: var(--danger); }
+  .badge-accent  { background: rgba(245,158,11,0.15); color: var(--accent); }
+  /* -- Loading / Toast -------------------------------------- */
+  .spinner {
+    display: inline-block; width: 16px; height: 16px;
+    border: 2px solid var(--border); border-top-color: var(--accent);
+    border-radius: 50%; animation: spin 0.6s linear infinite;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 999; }
+  .toast {
+    padding: 10px 16px; border-radius: var(--radius); margin-top: 8px;
+    font-size: 13px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+    animation: fadeIn 0.2s;
+  }
+  .toast-success { background: #065f46; color: #a7f3d0; }
+  .toast-error { background: #7f1d1d; color: #fecaca; }
+  @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } }
+  /* -- File upload drop zone -------------------------------- */
+  .drop-zone {
+    border: 2px dashed var(--border); border-radius: var(--radius-lg);
+    padding: 40px; text-align: center; cursor: pointer; transition: all 0.2s;
+  }
+  .drop-zone:hover, .drop-zone.drag-over {
+    border-color: var(--accent); background: rgba(245,158,11,0.05);
+  }
+  .drop-zone .icon { font-size: 32px; margin-bottom: 8px; }
+  .drop-zone .text { color: var(--text-muted); font-size: 13px; }
+  .drop-zone .text strong { color: var(--accent); }
+  /* -- Grid helpers ------------------------------------------ */
+  .row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
+  .col { flex: 1; min-width: 160px; }
+  .mb-0 { margin-bottom: 0; }
+  .mb-2 { margin-bottom: 8px; }
+  .mb-4 { margin-bottom: 16px; }
+  .mt-4 { margin-top: 16px; }
+  .text-muted { color: var(--text-muted); }
+  .text-sm { font-size: 12px; }
+  .flex-between { display: flex; justify-content: space-between; align-items: center; }
+  .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
+  /* -- Collapsible sections -------------------------------- */
+  .collapse-header {
+    display: flex; align-items: center; justify-content: space-between;
+    cursor: pointer; padding: 14px 16px; background: var(--bg-card);
+    border: 1px solid var(--border); border-radius: var(--radius-lg);
+    margin-bottom: 8px; transition: background 0.15s;
+    user-select: none;
+  }
+  .collapse-header:hover { background: var(--bg-hover); }
+  .collapse-header.open { border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-bottom: 0; }
+  .collapse-header .chevron {
+    transition: transform 0.2s; font-size: 12px; color: var(--text-muted);
+  }
+  .collapse-header.open .chevron { transform: rotate(90deg); }
+  .collapse-body {
+    border: 1px solid var(--border); border-top: none;
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+    padding: 16px; margin-bottom: 16px; background: var(--bg-card);
+  }
+  /* -- Chunk preview expandable rows ----------------------- */
+  .chunk-row { cursor: pointer; }
+  .chunk-row:hover td { background: var(--bg-hover); }
+  .chunk-detail {
+    background: var(--bg-base); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 12px; margin: 4px 0 4px 0;
+    font-size: 12px; line-height: 1.7; color: var(--text-body);
+    white-space: pre-wrap; word-break: break-word; max-height: 300px;
+    overflow-y: auto;
+  }
+  .chunk-detail .meta { color: var(--text-muted); margin-top: 6px; }
+  /* -- Cost estimator cards -------------------------------- */
+  .cost-result { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
+  .cost-card {
+    background: var(--bg-base); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 14px 18px; flex: 1; min-width: 140px;
+  }
+  .cost-card .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
+  .cost-card .value { font-size: 20px; font-weight: 700; color: var(--text-heading); }
+  .cost-card .value.amber { color: var(--accent); }
+  .cost-card .sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
+  /* ── Comparison table ───────────────────────────────────── */
+  .cmp-table th { position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
+  .cmp-table td.best { color: var(--accent); font-weight: 700; }
+  .cmp-table td.worst { color: var(--text-muted); opacity: 0.6; }
+  .cmp-highlight { background: rgba(245,158,11,0.08); }
+  .cmp-exp-label { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px; display: inline-block; margin-bottom: 4px; }
+  .cmp-exp-0 { background: rgba(245,158,11,0.15); color: var(--accent); }
+  .cmp-exp-1 { background: rgba(16,185,129,0.15); color: var(--success); }
+  .cmp-exp-2 { background: rgba(99,102,241,0.15); color: #818cf8; }
+  .cmp-exp-3 { background: rgba(244,63,94,0.15); color: #fb7185; }
+  .cmp-divider { height: 1px; background: var(--border); margin: 20px 0; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+<script type="text/babel">
+const { useState, useEffect, useRef, useCallback } = React;
+
+const API = '';  // same origin
+
+// -- API helpers --------------------------------------------
+async function api(path, opts = {}) {
+  const { method = 'GET', body, isForm } = opts;
+  const headers = {};
+  const fetchOpts = { method };
+  if (body && !isForm) {
+    headers['Content-Type'] = 'application/json';
+    fetchOpts.body = JSON.stringify(body);
+  }
+  if (isForm && body) {
+    fetchOpts.body = body;
+  }
+  fetchOpts.headers = headers;
+  const res = await fetch(API + path, fetchOpts);
+  if (!res.ok) {
+    const text = await res.text().catch(() => '');
+    throw new Error(`${res.status}: ${text}`);
+  }
+  return res.json();
+}
+
+// -- Toast system -------------------------------------------
+let _toastId = 0;
+function ToastContainer({ toasts, removeToast }) {
+  return React.createElement('div', { className: 'toast-container' },
+    toasts.map(t =>
+      React.createElement('div', {
+        key: t.id,
+        className: `toast toast-${t.type}`,
+        onClick: () => removeToast(t.id),
+      }, t.message)
+    )
+  );
+}
+
+// -- Tab: Home ----------------------------------------------
+function HomeTab() {
+  const [stats, setStats] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    Promise.all([
+      api('/documents').catch(() => ({ total: 0 })),
+      api('/experiments').catch(() => []),
+    ]).then(([docs, exps]) => {
+      setStats({ docs: docs.total || 0, experiments: (exps?.items || []).length });
+      setLoading(false);
+    });
+  }, []);
+
+  return React.createElement('div', null,
+    React.createElement('h1', { style: { color: 'var(--text-heading)', marginBottom: '16px', fontSize: '22px' } },
+      'RAG Chunking Benchmarker'),
+    React.createElement('p', { className: 'text-muted mb-4', style: { maxWidth: '600px' } },
+      'Compare five chunking strategies on your documents. Upload, chunk, query, benchmark, and evaluate.'),
+    React.createElement('div', { className: 'status-grid' },
+      React.createElement('div', { className: 'status-card' },
+        React.createElement('div', { className: 'label' }, 'Documents'),
+        React.createElement('div', { className: 'value accent' },
+          loading ? React.createElement('span', { className: 'spinner' }) : stats?.docs || 0)),
+      React.createElement('div', { className: 'status-card' },
+        React.createElement('div', { className: 'label' }, 'Experiments'),
+        React.createElement('div', { className: 'value green' },
+          loading ? React.createElement('span', { className: 'spinner' }) : stats?.experiments || 0)),
+      React.createElement('div', { className: 'status-card' },
+        React.createElement('div', { className: 'label' }, 'Strategies'),
+        React.createElement('div', { className: 'value' }, '5')),
+      React.createElement('div', { className: 'status-card' },
+        React.createElement('div', { className: 'label' }, 'Server'),
+        React.createElement('div', { className: 'value green' }, '●'))
+    ),
+    React.createElement('div', { className: 'card mt-4' },
+      React.createElement('div', { className: 'card-title' }, '⚡ Quick Start'),
+      React.createElement('ol', { style: { paddingLeft: '20px', lineHeight: '2' } },
+        React.createElement('li', null, 'Upload a document in the ', React.createElement('b', null, 'Documents'), ' tab'),
+        React.createElement('li', null, 'Process it with chunking strategies'),
+        React.createElement('li', null, 'Ask a question in the ', React.createElement('b', null, 'Query'), ' tab'),
+        React.createElement('li', null, 'Run a full benchmark in the ', React.createElement('b', null, 'Benchmarks'), ' tab'),
+        React.createElement('li', null, 'Check system health in the ', React.createElement('b', null, 'Admin'), ' tab')
+      )
+    )
+  );
+}
+
+// -- Tab: Documents -----------------------------------------
+function DocumentsTab({ documents, setDocuments, strategies, addToast }) {
+  const [uploading, setUploading] = useState(false);
+  const [processing, setProcessing] = useState({});
+  const [selectedStrategies, setSelectedStrategies] = useState({});
+  const [dragOver, setDragOver] = useState(false);
+  const fileRef = useRef(null);
+
+  const fetchDocs = useCallback(() => {
+    api('/documents').then(d => setDocuments(d.items || [])).catch(() => {});
+  }, [setDocuments]);
+
+  useEffect(() => { fetchDocs(); }, [fetchDocs]);
+
+  const handleUpload = async (file) => {
+    if (!file) return;
+    setUploading(true);
+    try {
+      const form = new FormData();
+      form.append('file', file);
+      await api('/documents', { method: 'POST', body: form, isForm: true });
+      addToast('Document uploaded successfully', 'success');
+      fetchDocs();
+    } catch (e) {
+      addToast(`Upload failed: ${e.message}`, 'error');
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleFileDrop = (e) => {
+    e.preventDefault(); setDragOver(false);
+    const file = e.dataTransfer.files[0];
+    if (file) handleUpload(file);
+  };
+
+  const handleProcess = async (docId) => {
+    const strats = selectedStrategies[docId];
+    if (!strats || strats.length === 0) {
+      addToast('Select at least one strategy', 'error');
+      return;
+    }
+    setProcessing(p => ({ ...p, [docId]: true }));
+    try {
+      await api(`/documents/${docId}/process`, {
+        method: 'POST',
+        body: { strategies: strats }
+      });
+      addToast(`Processed with ${strats.length} strategy(ies)`, 'success');
+      fetchDocs();
+    } catch (e) {
+      addToast(`Process failed: ${e.message}`, 'error');
+    } finally {
+      setProcessing(p => ({ ...p, [docId]: false }));
+    }
+  };
+
+  const handleDelete = async (docId) => {
+    if (!confirm('Delete this document and all its vectors?')) return;
+    try {
+      await api(`/documents/${docId}`, { method: 'DELETE' });
+      addToast('Document deleted', 'success');
+      fetchDocs();
+    } catch (e) {
+      addToast(`Delete failed: ${e.message}`, 'error');
+    }
+  };
+
+  const toggleStrategy = (docId, stratName) => {
+    setSelectedStrategies(prev => {
+      const current = prev[docId] || [];
+      const next = current.includes(stratName)
+        ? current.filter(s => s !== stratName)
+        : [...current, stratName];
+      return { ...prev, [docId]: next };
+    });
+  };
+
+  const selectAllStrategies = (docId) => {
+    setSelectedStrategies(prev => ({
+      ...prev,
+      [docId]: strategies.map(s => s.name)
+    }));
+  };
+
+  return React.createElement('div', null,
+    React.createElement('h1', { style: { color: 'var(--text-heading)', marginBottom: '16px', fontSize: '22px' } }, 'Documents'),
+
+    // Upload zone
+    React.createElement('div', {
+      className: `drop-zone ${dragOver ? 'drag-over' : ''}`,
+      onDragOver: (e) => { e.preventDefault(); setDragOver(true); },
+      onDragLeave: () => setDragOver(false),
+      onDrop: handleFileDrop,
+      onClick: () => fileRef.current?.click(),
+    },
+      React.createElement('div', { className: 'icon' }, uploading ? '⏳' : '📄'),
+      React.createElement('div', { className: 'text' },
+        uploading
+          ? 'Uploading...'
+          : React.createElement('span', null, 'Drag & drop a ', React.createElement('strong', null, '.doc or .docx'), ' file, or click to browse')),
+      React.createElement('input', {
+        ref: fileRef, type: 'file', accept: '.doc,.docx', style: { display: 'none' },
+        onChange: (e) => handleUpload(e.target.files[0])
+      })
+    ),
+
+    // Documents table
+    React.createElement('div', { className: 'card mt-4' },
+      React.createElement('div', { className: 'flex-between mb-2' },
+        React.createElement('div', { className: 'card-title mb-0' }, `Uploaded Documents (${documents.length})`),
+        React.createElement('button', { className: 'btn btn-secondary btn-sm', onClick: fetchDocs }, '↻ Refresh')
+      ),
+      documents.length === 0
+        ? React.createElement('div', { className: 'empty-state' },
+            React.createElement('div', { className: 'icon' }, '📭'),
+            React.createElement('div', null, 'No documents uploaded yet'))
+        : React.createElement('table', null,
+            React.createElement('thead', null,
+              React.createElement('tr', null,
+                React.createElement('th', null, 'Filename'),
+                React.createElement('th', null, 'Paragraphs'),
+                React.createElement('th', null, 'Chunks'),
+                React.createElement('th', null, 'Strategies'),
+                React.createElement('th', null, 'Created'),
+                React.createElement('th', null, 'Actions')
+              )
+            ),
+            React.createElement('tbody', null,
+              documents.map(doc =>
+                React.createElement('tr', { key: doc.id },
+                  React.createElement('td', null,
+                    React.createElement('span', { className: 'truncate', style: { display: 'inline-block' } }, doc.filename)),
+                  React.createElement('td', null, doc.paragraph_count),
+                  React.createElement('td', null,
+                    Object.keys(doc.chunk_counts || {}).length > 0
+                      ? Object.entries(doc.chunk_counts).map(([k, v]) =>
+                          React.createElement('span', { key: k, className: 'badge badge-accent', style: { marginRight: '4px' } }, `${k}: ${v}`))
+                      : React.createElement('span', { className: 'text-muted text-sm' }, 'Not processed')
+                  ),
+                  React.createElement('td', { style: { maxWidth: '260px' } },
+                    React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', gap: '4px' } },
+                      strategies.map(s =>
+                        React.createElement('label', {
+                          key: s.name,
+                          style: {
+                            display: 'inline-flex', alignItems: 'center', gap: '4px',
+                            fontSize: '11px', padding: '2px 8px', borderRadius: '4px',
+                            cursor: 'pointer', border: '1px solid var(--border)',
+                            background: (selectedStrategies[doc.id] || []).includes(s.name) ? 'rgba(245,158,11,0.15)' : 'transparent',
+                            color: (selectedStrategies[doc.id] || []).includes(s.name) ? 'var(--accent)' : 'var(--text-muted)',
+                          }
+                        },
+                          React.createElement('input', {
+                            type: 'checkbox', style: { display: 'none' },
+                            checked: (selectedStrategies[doc.id] || []).includes(s.name),
+                            onChange: () => toggleStrategy(doc.id, s.name),
+                          }),
+                          s.name
+                        )
+                      )
+                    ),
+                    React.createElement('button', {
+                      className: 'btn btn-secondary btn-sm', style: { marginTop: '4px', fontSize: '11px' },
+                      onClick: () => selectAllStrategies(doc.id)
+                    }, 'Select All')
+                  ),
+                  React.createElement('td', { className: 'text-sm text-muted' },
+                    new Date(doc.created_at).toLocaleDateString()),
+                  React.createElement('td', null,
+                    React.createElement('div', { style: { display: 'flex', gap: '4px', flexWrap: 'wrap' } },
+                      React.createElement('button', {
+                        className: 'btn btn-primary btn-sm',
+                        disabled: processing[doc.id] || !selectedStrategies[doc.id]?.length,
+                        onClick: () => handleProcess(doc.id),
+                      },
+                        processing[doc.id]
+                          ? React.createElement('span', { className: 'spinner' })
+                          : 'Process'
+                      ),
+                      React.createElement('button', {
+                        className: 'btn btn-danger btn-sm',
+                        onClick: () => handleDelete(doc.id),
+                      }, '✕')
+                    )
+                  )
+                )
+              )
+            )
+          )
+    )
+  );
+}
+
+// -- Tab: Query ---------------------------------------------
+function QueryTab({ documents, strategies, addToast }) {
+  const [form, setForm] = useState({ document_id: '', strategy: '', question: '', top_k: 5 });
+  const [result, setResult] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleQuery = async () => {
+    if (!form.document_id || !form.strategy || !form.question.trim()) {
+      addToast('Fill in all fields', 'error');
+      return;
+    }
+    setLoading(true);
+    try {
+      const data = await api('/queries', { method: 'POST', body: form });
+      setResult(data);
+      addToast('Query complete', 'success');
+    } catch (e) {
+      addToast(`Query failed: ${e.message}`, 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return React.createElement('div', null,
+    React.createElement('h1', { style: { color: 'var(--text-heading)', marginBottom: '16px', fontSize: '22px' } }, 'Query'),
+
+    React.createElement('div', { className: 'card' },
+      React.createElement('div', { className: 'row' },
+        React.createElement('div', { className: 'col' },
+          React.createElement('label', null, 'Document'),
+          React.createElement('select', {
+            value: form.document_id,
+            onChange: e => setForm({ ...form, document_id: e.target.value })
+          },
+            React.createElement('option', { value: '' }, 'Select document...'),
+            documents.map(d => React.createElement('option', { key: d.id, value: d.id }, d.filename))
+          )
+        ),
+        React.createElement('div', { className: 'col' },
+          React.createElement('label', null, 'Strategy'),
+          React.createElement('select', {
+            value: form.strategy,
+            onChange: e => setForm({ ...form, strategy: e.target.value })
+          },
+            React.createElement('option', { value: '' }, 'Select strategy...'),
+            strategies.map(s => React.createElement('option', { key: s.name, value: s.name }, s.name))
+          )
+        ),
+        React.createElement('div', { className: 'col', style: { maxWidth: '100px' } },
+          React.createElement('label', null, 'Top K'),
+          React.createElement('input', {
+            type: 'number', min: 1, max: 20, value: form.top_k,
+            onChange: e => setForm({ ...form, top_k: parseInt(e.target.value) || 5 })
+          })
+        )
+      ),
+      React.createElement('div', { className: 'form-group mt-4' },
+        React.createElement('label', null, 'Question'),
+        React.createElement('textarea', {
+          placeholder: 'Type your question here...',
+          value: form.question,
+          onChange: e => setForm({ ...form, question: e.target.value })
+        })
+      ),
+      React.createElement('button', {
+        className: 'btn btn-primary',
+        onClick: handleQuery,
+        disabled: loading,
+      }, loading ? React.createElement('span', { className: 'spinner' }) : '⚡ Ask Question')
+    ),
+
+    result && React.createElement('div', { className: 'card mt-4' },
+      React.createElement('div', { className: 'card-title' }, '💡 Answer'),
+      React.createElement('div', { style: { marginBottom: '16px', lineHeight: '1.8', color: 'var(--text-body)' } }, result.answer),
+      React.createElement('div', { className: 'flex-between mb-2' },
+        React.createElement('div', { className: 'text-sm text-muted' },
+          `Latency: ${result.latency_breakdown?.total?.toFixed(1) || 'N/A'}s | ` +
+          `Tokens: ${Object.values(result.token_usage || {}).reduce((a, b) => a + b, 0)}`),
+        React.createElement('span', { className: 'badge badge-accent' }, result.strategy)
+      ),
+      React.createElement('h3', { style: { fontSize: '14px', fontWeight: 600, color: 'var(--text-heading)', marginBottom: '8px' } }, 'Retrieved Chunks'),
+      React.createElement('table', null,
+        React.createElement('thead', null,
+          React.createElement('tr', null, React.createElement('th', null, '#'), React.createElement('th', null, 'Score'), React.createElement('th', null, 'Text'))
+        ),
+        React.createElement('tbody', null,
+          (result.retrieved_chunks || []).map((c, i) =>
+            React.createElement('tr', { key: i },
+              React.createElement('td', { className: 'text-muted' }, i + 1),
+              React.createElement('td', null,
+                React.createElement('span', { className: 'badge badge-success' }, c.score?.toFixed(3) || 'N/A')),
+              React.createElement('td', { className: 'text-sm' }, (c.text || '').substring(0, 300) + '...')
+            )
+          )
+        )
+      )
+    )
+  );
+}
+
+// -- Comparison View Component ------------------------------
+function ComparisonView({ experiments, addToast, onBack }) {
+  if (!experiments || experiments.length < 2) return null;
+
+  const allStrategies = [...new Set(experiments.flatMap(e => e.strategies_used || []))];
+  const metrics = ['avg_context_relevance', 'avg_answer_similarity', 'avg_faithfulness', 'hallucination_rate'];
+  const metricLabels = { avg_context_relevance: 'Context Relevance', avg_answer_similarity: 'Answer Similarity', avg_faithfulness: 'Faithfulness', hallucination_rate: 'Hallucination Rate' };
+
+  const allQIds = [...new Set(experiments.flatMap(e => (e.questions || []).map(q => q.id || q.question?.substring(0, 30))))];
+  const expPerQ = experiments.map(e => {
+    const map = {};
+    (e.per_question || []).forEach(pq => { map[pq.question_id || pq.question?.substring(0, 30)] = pq; });
+    return map;
+  });
+
+  const fmt = (v) => typeof v === 'number' ? v.toFixed(2) : (v ?? 'N/A');
+  const pct = (v) => typeof v === 'number' ? (v * 100).toFixed(0) + '%' : 'N/A';
+  const expName = (e) => e.document_filename || e.document_id?.substring(0, 8) || e.id?.substring(0, 8);
+
+  const rank = (vals, lowerIsBetter) => {
+    const nums = vals.map(v => typeof v === 'number' ? v : null);
+    const valid = nums.filter(v => v !== null);
+    if (valid.length === 0) return vals.map(() => '');
+    const max = Math.max(...valid);
+    const min = Math.min(...valid);
+    if (lowerIsBetter) return nums.map(v => v === min ? 'best' : (v === max && valid.length > 1 ? 'worst' : ''));
+    return nums.map(v => v === max ? 'best' : (v === min && valid.length > 1 ? 'worst' : ''));
+  };
+
+  // Overall score for a strategy in a single experiment
+  const strategyScore = (aggMetrics, strat) => {
+    const m = aggMetrics[strat];
+    if (!m) return null;
+    return ((m.avg_context_relevance || 0) * 0.3 + (m.avg_answer_similarity || 0) * 0.4 + (m.avg_faithfulness || 0) * 0.3) * (1 - (m.hallucination_rate || 0));
+  };
+
+  // Average score for a strategy across all experiments
+  const strategyAvgScore = (strat) => {
+    const scores = experiments.map(e => strategyScore(e.aggregate_metrics || {}, strat)).filter(v => v !== null);
+    return scores.length > 0 ? scores.reduce((a, b) => a + b, 0) / scores.length : null;
+  };
+
+  // Find overall best strategy
+  let overallBest = 'N/A', overallBestScore = -1;
+  allStrategies.forEach(s => {
+    const avg = strategyAvgScore(s);
+    if (avg !== null && avg > overallBestScore) { overallBestScore = avg; overallBest = s; }
+  });
+
+  // Strategy comparison rows: for each strategy, show score per experiment
+  const stratRows = allStrategies.map(s => {
+    const vals = experiments.map(e => strategyScore(e.aggregate_metrics || {}, s));
+    return { strat: s, vals, avg: strategyAvgScore(s) };
+  });
+  // Sort by average score descending
+  stratRows.sort((a, b) => (b.avg || 0) - (a.avg || 0));
+
+  // Column ranks: for each experiment, which strategy is best/worst
+  const colRanks = experiments.map((e, ei) => {
+    const colVals = stratRows.map(r => r.vals[ei]);
+    return rank(colVals, false);
+  });
+
+  // Per-metric averages per strategy across experiments
+  const stratMetricAvg = (strat, metric) => {
+    const vals = experiments.map(e => (e.aggregate_metrics || {})[strat]?.[metric]).filter(v => v != null);
+    return vals.length > 0 ? vals.reduce((a, b) => a + b, 0) / vals.length : null;
+  };
+
+  // Best strategy per experiment
+  const calcBest = (e) => {
+    const aggs = e.aggregate_metrics || {};
+    let best = 'N/A', bestScore = -1;
+    Object.entries(aggs).forEach(([strat, m]) => {
+      const score = ((m.avg_context_relevance || 0) * 0.3 + (m.avg_answer_similarity || 0) * 0.4 + (m.avg_faithfulness || 0) * 0.3) * (1 - (m.hallucination_rate || 0));
+      if (score > bestScore) { bestScore = score; best = strat; }
+    });
+    return best;
+  };
+
+  return React.createElement('div', { className: 'card mt-4' },
+    // Header
+    React.createElement('div', { className: 'flex-between mb-4' },
+      React.createElement('div', null,
+        React.createElement('div', { className: 'card-title mb-2' }, '📊 Strategy Comparison'),
+        React.createElement('div', { className: 'text-sm text-muted' },
+          `Comparing ${allStrategies.length} strategies across ${experiments.length} documents`)
+      ),
+      React.createElement('button', { className: 'btn btn-secondary btn-sm', onClick: onBack }, '← Back to List')
+    ),
+
+    // Overall Winner Banner
+    React.createElement('div', {
+      style: { background: 'rgba(16,185,129,0.1)', border: '1px solid rgba(16,185,129,0.3)', borderRadius: 'var(--radius)', padding: '16px 20px', marginBottom: '20px', display: 'flex', alignItems: 'center', gap: '12px' }
+    },
+      React.createElement('span', { style: { fontSize: '28px' } }, '🏆'),
+      React.createElement('div', null,
+        React.createElement('div', { style: { fontSize: '13px', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '2px' } }, 'Best Strategy Overall'),
+        React.createElement('div', { style: { fontSize: '20px', fontWeight: 700, color: 'var(--success)' } }, overallBest),
+        React.createElement('div', { className: 'text-sm text-muted' }, `Average score: ${fmt(overallBestScore)} across ${experiments.length} documents`)
+      )
+    ),
+
+    // Strategy Comparison Table (rows = strategies, cols = experiments)
+    React.createElement('h3', { style: { fontSize: '14px', fontWeight: 600, color: 'var(--text-heading)', marginBottom: '8px' } }, 'Per-Strategy Scores'),
+    React.createElement('table', { className: 'cmp-table', style: { marginBottom: '20px' } },
+      React.createElement('thead', null,
+        React.createElement('tr', null,
+          React.createElement('th', null, 'Strategy'),
+          experiments.map((e, i) =>
+            React.createElement('th', { key: e.id }, React.createElement('span', { className: `cmp-exp-label cmp-exp-${i}` }, expName(e)))
+          ),
+          React.createElement('th', { style: { background: 'rgba(234,179,8,0.1)' } }, 'Avg')
+        )
+      ),
+      React.createElement('tbody', null,
+        stratRows.map(({ strat, vals, avg }, si) => {
+          const avgRank = rank(stratRows.map(r => r.avg), false);
+          return React.createElement('tr', {
+            key: strat,
+            style: strat === overallBest ? { background: 'rgba(16,185,129,0.08)' } : {}
+          },
+            React.createElement('td', null, React.createElement('span', { className: 'badge badge-accent' }, strat)),
+            experiments.map((e, ei) =>
+              React.createElement('td', { key: e.id, className: colRanks[ei]?.[si] || '' },
+                vals[ei] != null ? fmt(vals[ei]) : React.createElement('span', { className: 'text-muted' }, '—'))
+            ),
+            React.createElement('td', { className: avgRank[si], style: { fontWeight: 700, background: 'rgba(245,158,11,0.05)' } },
+              avg != null ? fmt(avg) : '—')
+          );
+        })
+      )
+    ),
+
+    React.createElement('div', { className: 'cmp-divider' }),
+
+    // Metrics Breakdown (rows = strategies, showing per-metric averages)
+    React.createElement('h3', { style: { fontSize: '14px', fontWeight: 600, color: 'var(--text-heading)', marginBottom: '8px' } }, 'Metrics Breakdown'),
+    React.createElement('table', { className: 'cmp-table', style: { marginBottom: '20px' } },
+      React.createElement('thead', null,
+        React.createElement('tr', null,
+          React.createElement('th', null, 'Strategy'),
+          React.createElement('th', null, 'Context Relevance'),
+          React.createElement('th', null, 'Answer Similarity'),
+          React.createElement('th', null, 'Faithfulness'),
+          React.createElement('th', null, 'Hallucination'),
+          React.createElement('th', null, 'Best In')
+        )
+      ),
+      React.createElement('tbody', null,
+        allStrategies.map(strat => {
+          const vals = metrics.map(m => stratMetricAvg(strat, m));
+          const ranks = metrics.map((m, mi) => {
+            const allVals = allStrategies.map(s => stratMetricAvg(s, m)).filter(v => v != null);
+            const isLower = m === 'hallucination_rate';
+            const best = isLower ? Math.min(...allVals) : Math.max(...allVals);
+            return vals[mi] === best && allVals.length > 1 ? 'best' : '';
+          });
+          // Count how many metrics this strategy is best in
+          const bestCount = ranks.filter(r => r === 'best').length;
+          return React.createElement('tr', { key: strat, style: strat === overallBest ? { background: 'rgba(16,185,129,0.08)' } : {} },
+            React.createElement('td', null, React.createElement('span', { className: 'badge badge-accent' }, strat)),
+            metrics.map((m, mi) =>
+              React.createElement('td', { key: m, className: ranks[mi] },
+                m === 'hallucination_rate' ? pct(vals[mi]) : fmt(vals[mi]))
+            ),
+            React.createElement('td', { style: { textAlign: 'center' } },
+              bestCount > 0 ? React.createElement('span', { className: 'badge badge-success' }, `${bestCount}/${metrics.length}`) :
+              React.createElement('span', { className: 'text-muted text-sm' }, '—'))
+          );
+        })
+      )
+    ),
+
+    React.createElement('div', { className: 'cmp-divider' }),
+
+    // Per-Experiment Best Strategy
+    React.createElement('h3', { style: { fontSize: '14px', fontWeight: 600, color: 'var(--text-heading)', marginBottom: '8px' } }, 'Best Strategy Per Document'),
+    React.createElement('div', { style: { display: 'flex', gap: '12px', flexWrap: 'wrap', marginBottom: '20px' } },
+      experiments.map((e, i) => {
+        const best = calcBest(e);
+        return React.createElement('div', { key: e.id, style: { background: 'var(--bg-base)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: '12px 16px', flex: '1', minWidth: '180px' } },
+          React.createElement('div', { className: `cmp-exp-label cmp-exp-${i}`, style: { marginBottom: '6px' } }, expName(e)),
+          React.createElement('div', { style: { fontSize: '16px', fontWeight: 600, color: 'var(--text-heading)' } }, best),
+          React.createElement('div', { className: 'text-sm text-muted' }, `${e.questions_count || '?'} questions`)
+        );
+      })
+    ),
+
+    React.createElement('div', { className: 'cmp-divider' }),
+
+    // Per-Question Comparison (strategies as columns)
+    React.createElement('h3', { style: { fontSize: '14px', fontWeight: 600, color: 'var(--text-heading)', marginBottom: '8px' } }, 'Per-Question Breakdown'),
+    React.createElement('div', { className: 'text-sm text-muted mb-2' }, `Showing ${Math.min(allQIds.length, 10)} of ${allQIds.length} questions — score = answer_similarity`),
+    React.createElement('table', { className: 'cmp-table' },
+      React.createElement('thead', null,
+        React.createElement('tr', null,
+          React.createElement('th', { style: { maxWidth: '200px' } }, 'Question'),
+          allStrategies.map(s =>
+            React.createElement('th', { key: s, style: { textAlign: 'center' } }, s)
+          )
+        )
+      ),
+      React.createElement('tbody', null,
+        allQIds.slice(0, 10).map(qId => {
+          const qText = experiments[0]?.questions?.find(q => (q.id || q.question?.substring(0, 30)) === qId)?.question || qId;
+          const stratScores = allStrategies.map(s => {
+            const scores = experiments.map((e, i) => {
+              const pq = expPerQ[i]?.[qId];
+              return pq?.strategies?.[s]?.scores?.answer_similarity;
+            }).filter(v => v != null);
+            return scores.length > 0 ? scores.reduce((a, b) => a + b, 0) / scores.length : null;
+          });
+          const sRanks = rank(stratScores, false);
+          return React.createElement('tr', { key: qId },
+            React.createElement('td', { className: 'text-sm', style: { maxWidth: '200px' } }, qText?.substring(0, 60) + (qText?.length > 60 ? '...' : '')),
+            allStrategies.map((s, si) =>
+              React.createElement('td', { key: s, className: sRanks[si], style: { textAlign: 'center', padding: '4px' } },
+                stratScores[si] != null ? React.createElement('span', {
+                  className: 'badge',
+                  style: {
+                    background: stratScores[si] >= 7 ? 'rgba(16,185,129,0.15)' : stratScores[si] >= 4 ? 'rgba(245,158,11,0.15)' : 'rgba(244,63,94,0.15)',
+                    color: stratScores[si] >= 7 ? 'var(--success)' : stratScores[si] >= 4 ? 'var(--warning)' : 'var(--danger)',
+                  }
+                }, stratScores[si].toFixed(1)) : React.createElement('span', { className: 'text-muted' }, '—')
+              )
+            )
+          );
+        })
+      )
+    )
+  );
+}
+
+// -- Tab: Benchmarks ----------------------------------------
+function BenchmarksTab({ documents, strategies, addToast, questionsFile }) {
+  const [experiments, setExperiments] = useState([]);
+  const [form, setForm] = useState({
+    document_id: '', strategies: strategies.map(s => s.name),
+    questions_file: questionsFile, top_k: 5, dry_run: false
+  });
+  const [running, setRunning] = useState(false);
+
+  // Comparison state
+  const [selectedExps, setSelectedExps] = useState(new Set());
+  const [compareMode, setCompareMode] = useState(false);
+  const [compareData, setCompareData] = useState([]);
+  const [compareLoading, setCompareLoading] = useState(false);
+  const [expandedExp, setExpandedExp] = useState(null);
+  const [expandedData, setExpandedData] = useState(null);
+  const [expandedLoading, setExpandedLoading] = useState(false);
+
+  const fetchExperiments = useCallback(() => {
+    api('/experiments').then(d => setExperiments(d?.items || (Array.isArray(d) ? d : []))).catch(() => {});
+  }, []);
+
+  useEffect(() => { fetchExperiments(); }, [fetchExperiments]);
+
+  // Sync questionsFile prop from Admin tab's "Use This File"
+  useEffect(() => {
+    setForm(prev => ({ ...prev, questions_file: questionsFile }));
+  }, [questionsFile]);
+
+  const toggleStrat = (name) => {
+    setForm(prev => ({
+      ...prev,
+      strategies: prev.strategies.includes(name)
+        ? prev.strategies.filter(s => s !== name)
+        : [...prev.strategies, name]
+    }));
+  };
+
+  const toggleExpSelect = (id) => {
+    setSelectedExps(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id); else next.add(id);
+      return next;
+    });
+  };
+
+  const selectAllExps = () => {
+    if (selectedExps.size === experiments.length) {
+      setSelectedExps(new Set());
+    } else {
+      setSelectedExps(new Set(experiments.map(e => e.id)));
+    }
+  };
+
+  const handleCompare = async () => {
+    if (selectedExps.size < 2) {
+      addToast('Select at least 2 experiments to compare', 'error');
+      return;
+    }
+    setCompareLoading(true);
+    try {
+      const details = await Promise.all(
+        [...selectedExps].map(id => api(`/benchmarks/${id}`))
+      );
+      setCompareData(details);
+      setCompareMode(true);
+    } catch (e) {
+      addToast(`Failed to load experiment details: ${e.message}`, 'error');
+    } finally {
+      setCompareLoading(false);
+    }
+  };
+
+  const handleExpand = async (expId) => {
+    if (expandedExp === expId) {
+      setExpandedExp(null); setExpandedData(null); return;
+    }
+    setExpandedExp(expId); setExpandedLoading(true);
+    try {
+      const data = await api(`/benchmarks/${expId}`);
+      setExpandedData(data);
+    } catch (e) {
+      addToast(`Failed to load details: ${e.message}`, 'error');
+    } finally {
+      setExpandedLoading(false);
+    }
+  };
+
+  const handleDelete = async (expId) => {
+    if (!confirm('Delete this experiment?')) return;
+    try {
+      await api(`/experiments/${expId}`, { method: 'DELETE' });
+      addToast('Experiment deleted', 'success');
+      fetchExperiments();
+      if (expandedExp === expId) { setExpandedExp(null); setExpandedData(null); }
+      setSelectedExps(prev => { const n = new Set(prev); n.delete(expId); return n; });
+    } catch (e) {
+      addToast(`Delete failed: ${e.message}`, 'error');
+    }
+  };
+
+  const handleRunBenchmark = async () => {
+    if (!form.document_id || form.strategies.length === 0) {
+      addToast('Select document and at least one strategy', 'error');
+      return;
+    }
+    setRunning(true);
+    try {
+      const result = await api('/benchmarks', { method: 'POST', body: form });
+      addToast(`Benchmark ${form.dry_run ? 'estimate' : 'complete'}`, 'success');
+      if (!form.dry_run) fetchExperiments();
+    } catch (e) {
+      addToast(`Benchmark failed: ${e.message}`, 'error');
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  // If in comparison mode, show comparison view
+  if (compareMode) {
+    return React.createElement(ComparisonView, {
+      experiments: compareData,
+      addToast,
+      onBack: () => { setCompareMode(false); setCompareData([]); setSelectedExps(new Set()); }
+    });
+  }
+
+  return React.createElement('div', null,
+    React.createElement('h1', { style: { color: 'var(--text-heading)', marginBottom: '16px', fontSize: '22px' } }, 'Benchmarks'),
+
+    // Run benchmark form
+    React.createElement('div', { className: 'card' },
+      React.createElement('div', { className: 'card-title' }, '🚀 Run Benchmark'),
+      React.createElement('div', { className: 'row' },
+        React.createElement('div', { className: 'col' },
+          React.createElement('label', null, 'Document'),
+          React.createElement('select', {
+            value: form.document_id,
+            onChange: e => setForm({ ...form, document_id: e.target.value })
+          },
+            React.createElement('option', { value: '' }, 'Select document...'),
+            documents.map(d => React.createElement('option', { key: d.id, value: d.id }, d.filename))
+          )
+        ),
+        React.createElement('div', { className: 'col', style: { maxWidth: '120px' } },
+          React.createElement('label', null, 'Top K'),
+          React.createElement('input', {
+            type: 'number', min: 1, max: 20, value: form.top_k,
+            onChange: e => setForm({ ...form, top_k: parseInt(e.target.value) || 5 })
+          })
+        )
+      ),
+      React.createElement('div', { className: 'form-group mt-4' },
+        React.createElement('label', null, 'Strategies'),
+        React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', gap: '6px', marginTop: '4px' } },
+          strategies.map(s =>
+            React.createElement('label', {
+              key: s.name, style: {
+                display: 'inline-flex', alignItems: 'center', gap: '6px',
+                padding: '6px 12px', borderRadius: 'var(--radius)', cursor: 'pointer',
+                border: '1px solid var(--border)',
+                background: form.strategies.includes(s.name) ? 'rgba(245,158,11,0.15)' : 'transparent',
+                color: form.strategies.includes(s.name) ? 'var(--accent)' : 'var(--text-muted)',
+                fontSize: '13px',
+              }
+            },
+              React.createElement('input', {
+                type: 'checkbox', style: { display: 'none' },
+                checked: form.strategies.includes(s.name),
+                onChange: () => toggleStrat(s.name),
+              }),
+              s.name
+            )
+          )
+        )
+      ),
+      React.createElement('div', { className: 'form-group' },
+        React.createElement('label', null, 'Questions File (path)'),
+        React.createElement('input', {
+          type: 'text', value: form.questions_file,
+          onChange: e => setForm({ ...form, questions_file: e.target.value }),
+          placeholder: 'e.g. files/questions.json'
+        })
+      ),
+      React.createElement('div', { className: 'row mb-0' },
+        React.createElement('div', { style: { flex: 'none' } },
+          React.createElement('button', {
+            className: 'btn btn-primary', onClick: handleRunBenchmark, disabled: running,
+          }, running ? React.createElement('span', { className: 'spinner' }) : '⚡ Run Benchmark')
+        ),
+        React.createElement('div', { style: { flex: 'none' } },
+          React.createElement('button', {
+            className: 'btn btn-secondary',
+            onClick: () => { setForm(prev => ({ ...prev, dry_run: true })); handleRunBenchmark(); },
+            disabled: running,
+          }, 'Cost Estimate')
+        )
+      )
+    ),
+
+    // Experiments list
+    React.createElement('div', { className: 'card mt-4' },
+      React.createElement('div', { className: 'flex-between mb-2' },
+        React.createElement('div', { className: 'card-title mb-0' }, `Experiments (${experiments.length})`),
+        React.createElement('div', { style: { display: 'flex', gap: '6px', alignItems: 'center' } },
+          selectedExps.size >= 2 ? React.createElement('button', {
+            className: 'btn btn-primary btn-sm',
+            onClick: handleCompare,
+            disabled: compareLoading,
+          }, compareLoading ? React.createElement('span', { className: 'spinner' }) : `Compare (${selectedExps.size})`) : null,
+          React.createElement('button', { className: 'btn btn-secondary btn-sm', onClick: fetchExperiments }, '↻ Refresh')
+        )
+      ),
+      experiments.length === 0
+        ? React.createElement('div', { className: 'empty-state' },
+            React.createElement('div', { className: 'icon' }, '📊'),
+            React.createElement('div', null, 'No experiments yet'))
+        : React.createElement('table', null,
+            React.createElement('thead', null,
+              React.createElement('tr', null,
+                React.createElement('th', { style: { width: '36px' } },
+                  React.createElement('input', {
+                    type: 'checkbox',
+                    checked: experiments.length > 0 && selectedExps.size === experiments.length,
+                    onChange: selectAllExps,
+                    style: { cursor: 'pointer' }
+                  })
+                ),
+                React.createElement('th', null, 'Document'),
+                React.createElement('th', null, 'Strategies'),
+                React.createElement('th', null, 'Questions'),
+                React.createElement('th', null, 'Best'),
+                React.createElement('th', null, 'Created'),
+                React.createElement('th', { style: { width: '100px' } }, '')
+              )
+            ),
+            React.createElement('tbody', null,
+              experiments.map(exp => React.createElement(React.Fragment, { key: exp.id },
+                React.createElement('tr', {
+                  className: selectedExps.has(exp.id) ? 'cmp-highlight' : '',
+                  style: { cursor: 'pointer' },
+                  onClick: () => handleExpand(exp.id),
+                },
+                  React.createElement('td', { onClick: e => e.stopPropagation() },
+                    React.createElement('input', {
+                      type: 'checkbox',
+                      checked: selectedExps.has(exp.id),
+                      onChange: () => toggleExpSelect(exp.id),
+                      style: { cursor: 'pointer' }
+                    })
+                  ),
+                  React.createElement('td', { style: { fontWeight: 500 } },
+                    exp.document_filename || exp.document_id?.substring(0, 12)),
+                  React.createElement('td', null,
+                    (exp.strategies_used || []).map(s =>
+                      React.createElement('span', { key: s, className: 'badge badge-accent', style: { marginRight: '4px' } }, s))),
+                  React.createElement('td', null, exp.questions_count),
+                  React.createElement('td', null,
+                    React.createElement('span', { className: 'badge badge-success' }, exp.best_strategy || 'N/A')),
+                  React.createElement('td', { className: 'text-sm text-muted' }, new Date(exp.created_at).toLocaleDateString()),
+                  React.createElement('td', { onClick: e => e.stopPropagation(), style: { display: 'flex', gap: '4px' } },
+                    React.createElement('a', {
+                      href: `/benchmarks/${exp.id}/report`, target: '_blank',
+                      style: { color: 'var(--accent)', textDecoration: 'none', fontSize: '12px' }
+                    }, 'Report'),
+                    React.createElement('button', {
+                      className: 'btn btn-danger btn-sm',
+                      onClick: (e) => { e.stopPropagation(); handleDelete(exp.id); },
+                      style: { padding: '2px 8px', fontSize: '11px' }
+                    }, '✕')
+                  )
+                ),
+                // Expanded details
+                expandedExp === exp.id && React.createElement('tr', null,
+                  React.createElement('td', { colSpan: 7, style: { padding: '0' } },
+                    expandedLoading
+                      ? React.createElement('div', { style: { padding: '16px', textAlign: 'center' } }, React.createElement('span', { className: 'spinner' }))
+                      : expandedData ? React.createElement('div', { style: { padding: '12px 16px', background: 'var(--bg-base)', borderBottom: '1px solid var(--border)' } },
+                          React.createElement('div', { className: 'flex-between mb-2' },
+                            React.createElement('div', { className: 'text-sm', style: { color: 'var(--text-heading)', fontWeight: 600 } },
+                              expandedData.document_filename || expandedData.document_id)
+                          ),
+                          // Questions list
+                          expandedData.questions && expandedData.questions.length > 0 && React.createElement('div', { className: 'mb-2' },
+                            React.createElement('div', { className: 'text-sm', style: { fontWeight: 500, marginBottom: '4px', color: 'var(--text-heading)' } },
+                              `Questions (${expandedData.questions.length})`),
+                            React.createElement('div', { style: { maxHeight: '200px', overflowY: 'auto', border: '1px solid var(--border)', borderRadius: 'var(--radius)' } },
+                              expandedData.questions.map((q, i) =>
+                                React.createElement('div', {
+                                  key: q.id || i,
+                                  style: { padding: '6px 10px', borderBottom: '1px solid var(--border)', fontSize: '12px' }
+                                },
+                                  React.createElement('span', { className: 'badge badge-accent', style: { marginRight: '6px' } }, q.id || `q${i+1}`),
+                                  React.createElement('span', null, q.question?.substring(0, 100) + (q.question?.length > 100 ? '...' : ''))
+                                )
+                              )
+                            )
+                          ),
+                          // Per-question scores
+                          expandedData.per_question && expandedData.per_question.length > 0 && React.createElement('div', null,
+                            React.createElement('div', { className: 'text-sm', style: { fontWeight: 500, marginBottom: '4px', color: 'var(--text-heading)' } }, 'Per-Question Scores'),
+                            React.createElement('div', { style: { maxHeight: '200px', overflowY: 'auto', border: '1px solid var(--border)', borderRadius: 'var(--radius)' } },
+                              React.createElement('table', { style: { width: '100%', fontSize: '11px' } },
+                                React.createElement('thead', null,
+                                  React.createElement('tr', null,
+                                    React.createElement('th', { style: { padding: '4px 6px' } }, 'Q'),
+                                    (expandedData.strategies_used || []).map(s =>
+                                      React.createElement('th', { key: s, style: { padding: '4px 6px' } }, s))
+                                  )
+                                ),
+                                React.createElement('tbody', null,
+                                  expandedData.per_question.map((pq, i) =>
+                                    React.createElement('tr', { key: i },
+                                      React.createElement('td', { style: { padding: '4px 6px', maxWidth: '150px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } },
+                                        pq.question?.substring(0, 40) + (pq.question?.length > 40 ? '...' : '')),
+                                      (expandedData.strategies_used || []).map(s => {
+                                        const score = pq.strategies?.[s]?.scores?.answer_similarity;
+                                        return React.createElement('td', { key: s, style: { padding: '4px 6px', textAlign: 'center' } },
+                                          score != null ? React.createElement('span', {
+                                            className: 'badge',
+                                            style: {
+                                              background: score >= 7 ? 'rgba(16,185,129,0.15)' : score >= 4 ? 'rgba(245,158,11,0.15)' : 'rgba(244,63,94,0.15)',
+                                              color: score >= 7 ? 'var(--success)' : score >= 4 ? 'var(--warning)' : 'var(--danger)',
+                                            }
+                                          }, score.toFixed(1)) : '—'
+                                        );
+                                      })
+                                    )
+                                  )
+                                )
+                              )
+                            )
+                          )
+                        ) : null
+                  )
+                )
+              ))
+            )
+          )
+    )
+  );
+}
+
+// -- Collapsible Section Helper ------------------------------
+function CollapseSection({ title, icon, open, onToggle, badge, children }) {
+  return React.createElement(React.Fragment, null,
+    React.createElement('div', {
+      className: `collapse-header ${open ? 'open' : ''}`,
+      onClick: onToggle,
+    },
+      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+        React.createElement('span', null, icon),
+        React.createElement('span', { style: { fontWeight: 600, fontSize: '14px', color: 'var(--text-heading)' } }, title),
+        badge != null ? React.createElement('span', { className: 'badge badge-accent' }, badge) : null
+      ),
+      React.createElement('span', { className: 'chevron' }, '▶')
+    ),
+    open ? React.createElement('div', { className: 'collapse-body' }, children) : null
+  );
+}
+
+// -- Tab: Admin ---------------------------------------------
+function AdminTab({ addToast, documents, strategies, setActiveTab, setQuestionsFile }) {
+  // Collapse state for each section
+  const [openSections, setOpenSections] = useState({ health: true, qdrant: false, chunks: false, questions: false, cost: false });
+  const toggle = (key) => setOpenSections(prev => ({ ...prev, [key]: !prev[key] }));
+
+  // -- Health state --
+  const [health, setHealth] = useState(null);
+  const [healthLoading, setHealthLoading] = useState(true);
+  const fetchHealth = useCallback(() => {
+    setHealthLoading(true);
+    Promise.all([
+      api('/admin/health').catch(() => null),
+      api('/admin/qdrant/collections').catch(() => ({ collections: [] })),
+    ]).then(([h, c]) => {
+      setHealth(h);
+      setCollectionsData(c?.collections || []);
+      setHealthLoading(false);
+    });
+  }, []);
+  useEffect(() => { fetchHealth(); }, [fetchHealth]);
+
+  // -- Qdrant state --
+  const [collectionsData, setCollectionsData] = useState([]);
+
+  // -- Chunk Preview state --
+  const [chunkDocId, setChunkDocId] = useState('');
+  const [chunkStrategy, setChunkStrategy] = useState('');
+  const [chunkData, setChunkData] = useState(null);
+  const [chunkLoading, setChunkLoading] = useState(false);
+  const [expandedChunks, setExpandedChunks] = useState({});
+
+  const loadChunks = async () => {
+    if (!chunkDocId) { addToast('Select a document', 'error'); return; }
+    setChunkLoading(true);
+    setChunkData(null);
+    setExpandedChunks({});
+    try {
+      let url = `/admin/chunks/${chunkDocId}`;
+      if (chunkStrategy) url += `?strategy=${chunkStrategy}`;
+      const data = await api(url);
+      setChunkData(data);
+    } catch (e) { addToast(`Chunk load failed: ${e.message}`, 'error'); }
+    finally { setChunkLoading(false); }
+  };
+
+  // -- Questions state --
+  const [qFiles, setQFiles] = useState([]);
+  const [qLoading, setQLoading] = useState(false);
+  const [expandedQFile, setExpandedQFile] = useState(null);
+  const [qFileDetail, setQFileDetail] = useState(null);
+  const [qUploading, setQUploading] = useState(false);
+  const qFileRef = React.useRef(null);
+
+  const fetchQFiles = useCallback(async () => {
+    setQLoading(true);
+    try {
+      const data = await api('/admin/questions');
+      setQFiles(data.files || []);
+    } catch (e) { addToast(`Failed to load questions: ${e.message}`, 'error'); }
+    finally { setQLoading(false); }
+  }, [addToast]);
+  useEffect(() => { fetchQFiles(); }, [fetchQFiles]);
+
+  const toggleQFile = async (fileId) => {
+    if (expandedQFile === fileId) { setExpandedQFile(null); setQFileDetail(null); return; }
+    setExpandedQFile(fileId);
+    try {
+      const data = await api(`/admin/questions/${fileId}`);
+      setQFileDetail(data.data || data);
+    } catch (e) { addToast(`Failed to load ${fileId}: ${e.message}`, 'error'); }
+  };
+
+  const uploadQFile = async (file) => {
+    if (!file) return;
+    setQUploading(true);
+    try {
+      const form = new FormData();
+      form.append('file', file);
+      await api('/admin/questions/upload', { method: 'POST', body: form, isForm: true });
+      addToast('Questions file uploaded', 'success');
+      fetchQFiles();
+    } catch (e) { addToast(`Upload failed: ${e.message}`, 'error'); }
+    finally { setQUploading(false); }
+  };
+
+  const deleteQFile = async (fileId) => {
+    if (!confirm(`Delete "${fileId}"?`)) return;
+    try {
+      await api(`/admin/questions/${fileId}`, { method: 'DELETE' });
+      addToast(`Deleted ${fileId}`, 'success');
+      fetchQFiles();
+    } catch (e) { addToast(`Delete failed: ${e.message}`, 'error'); }
+  };
+
+  const useQFile = (fileId) => {
+    const path = `files/${fileId}`;
+    if (setQuestionsFile) setQuestionsFile(path);
+    addToast(`Set questions file: ${path}`, 'success');
+    setActiveTab('benchmarks');
+  };
+
+  // -- Cost Estimator state --
+  const [costQ, setCostQ] = useState(21);
+  const [costS, setCostS] = useState(5);
+  const [costResult, setCostResult] = useState(null);
+  const [costLoading, setCostLoading] = useState(false);
+
+  const estimateCost = async () => {
+    setCostLoading(true);
+    try {
+      const data = await api(`/admin/cost-estimate?num_questions=${costQ}&num_strategies=${costS}`, { method: 'POST' });
+      setCostResult(data);
+    } catch (e) { addToast(`Cost estimate failed: ${e.message}`, 'error'); }
+    finally { setCostLoading(false); }
+  };
+
+  return React.createElement('div', null,
+    React.createElement('h1', { style: { color: 'var(--text-heading)', marginBottom: '16px', fontSize: '22px' } }, 'Admin'),
+
+    // -- 1. Health --
+    React.createElement(CollapseSection, {
+      title: '🏥 Health', icon: '', open: openSections.health,
+      onToggle: () => toggle('health'),
+      badge: health?.status === 'ok' ? '● OK' : (healthLoading ? '...' : '● Down'),
+    },
+      healthLoading
+        ? React.createElement('div', { style: { padding: '20px', textAlign: 'center' } }, React.createElement('span', { className: 'spinner' }))
+        : React.createElement(React.Fragment, null,
+            React.createElement('div', { className: 'flex-between mb-2' },
+              React.createElement('div', null),
+              React.createElement('button', { className: 'btn btn-secondary btn-sm', onClick: fetchHealth }, '↻ Refresh')
+            ),
+            React.createElement('div', { className: 'status-grid' },
+              React.createElement('div', { className: 'status-card' },
+                React.createElement('div', { className: 'label' }, 'Server'),
+                React.createElement('div', { className: `value ${health?.status === 'ok' ? 'green' : ''}` },
+                  health?.status === 'ok' ? '● OK' : '● Down')),
+              React.createElement('div', { className: 'status-card' },
+                React.createElement('div', { className: 'label' }, 'Qdrant'),
+                React.createElement('div', { className: `value ${health?.qdrant_connected ? 'green' : ''}` },
+                  health?.qdrant_connected ? '● Connected' : '● Disconnected')),
+              React.createElement('div', { className: 'status-card' },
+                React.createElement('div', { className: 'label' }, 'SQLite'),
+                React.createElement('div', { className: `value ${health?.sqlite_ok ? 'green' : ''}` },
+                  health?.sqlite_ok ? '● OK' : '● Down')),
+              React.createElement('div', { className: 'status-card' },
+                React.createElement('div', { className: 'label' }, 'OpenAI'),
+                React.createElement('div', { className: `value ${health?.openai_configured ? 'green' : ''}` },
+                  health?.openai_configured ? '● Configured' : '● Missing'))
+            )
+          )
+    ),
+
+    // -- 2. Qdrant Collections --
+    React.createElement(CollapseSection, {
+      title: '🗄️ Qdrant Collections', icon: '', open: openSections.qdrant,
+      onToggle: () => toggle('qdrant'),
+      badge: collectionsData.length ? `${collectionsData.length} collections` : '0',
+    },
+      collectionsData.length === 0
+        ? React.createElement('div', { className: 'empty-state' }, 'No collections found')
+        : React.createElement('table', null,
+            React.createElement('thead', null,
+              React.createElement('tr', null,
+                React.createElement('th', null, 'Collection'),
+                React.createElement('th', null, 'Points'),
+                React.createElement('th', null, '')
+              )
+            ),
+            React.createElement('tbody', null,
+              collectionsData.map(c =>
+                React.createElement('tr', { key: c.name },
+                  React.createElement('td', { className: 'mono' }, c.name),
+                  React.createElement('td', null, c.points_count ?? 'N/A'),
+                  React.createElement('td', null,
+                    React.createElement('button', {
+                      className: 'btn btn-danger btn-sm',
+                      onClick: async () => {
+                        if (!confirm(`Delete collection "${c.name}"?`)) return;
+                        try {
+                          await api(`/admin/qdrant/collections/${c.name}`, { method: 'DELETE' });
+                          addToast(`Deleted ${c.name}`, 'success');
+                          fetchHealth();
+                        } catch (e) { addToast(`Delete failed: ${e.message}`, 'error'); }
+                      }
+                    }, 'Delete'))
+                )
+              )
+            )
+          )
+    ),
+
+    // -- 3. Chunk Preview --
+    React.createElement(CollapseSection, {
+      title: '📦 Chunk Preview', icon: '', open: openSections.chunks,
+      onToggle: () => toggle('chunks'),
+      badge: chunkData ? `${chunkData.strategies ? Object.values(chunkData.strategies).reduce((a, s) => a + (s.count || 0), 0) : 0} chunks` : null,
+    },
+      React.createElement('div', { className: 'row mb-4' },
+        React.createElement('div', { className: 'col' },
+          React.createElement('label', null, 'Document'),
+          React.createElement('select', {
+            value: chunkDocId,
+            onChange: e => { setChunkDocId(e.target.value); setChunkData(null); }
+          },
+            React.createElement('option', { value: '' }, 'Select document...'),
+            documents.map(d => React.createElement('option', { key: d.id, value: d.id }, d.filename))
+          )
+        ),
+        React.createElement('div', { className: 'col' },
+          React.createElement('label', null, 'Strategy (optional)'),
+          React.createElement('select', {
+            value: chunkStrategy,
+            onChange: e => { setChunkStrategy(e.target.value); setChunkData(null); }
+          },
+            React.createElement('option', { value: '' }, 'All strategies'),
+            strategies.map(s => React.createElement('option', { key: s.name, value: s.name }, s.name))
+          )
+        ),
+        React.createElement('div', { style: { flex: 'none' } },
+          React.createElement('button', {
+            className: 'btn btn-primary', onClick: loadChunks, disabled: chunkLoading || !chunkDocId,
+          }, chunkLoading ? React.createElement('span', { className: 'spinner' }) : 'Load Chunks')
+        )
+      ),
+      chunkData && Object.entries(chunkData.strategies || {}).map(([stratName, stratData]) =>
+        React.createElement('div', { key: stratName, style: { marginBottom: '16px' } },
+          React.createElement('div', { className: 'flex-between mb-2' },
+            React.createElement('h3', { style: { fontSize: '14px', fontWeight: 600, color: 'var(--text-heading)' } },
+              `${stratName} `,
+              React.createElement('span', { className: 'badge badge-accent' }, `${stratData.count} chunks`)),
+            stratData.error ? React.createElement('span', { className: 'badge badge-danger' }, stratData.error) : null
+          ),
+          stratData.count === 0
+            ? React.createElement('div', { className: 'text-sm text-muted', style: { padding: '8px 0' } }, 'No chunks for this strategy')
+            : React.createElement('table', null,
+                React.createElement('thead', null,
+                  React.createElement('tr', null,
+                    React.createElement('th', { style: { width: '40px' } }, '#'),
+                    React.createElement('th', null, 'Text'),
+                    React.createElement('th', { style: { width: '60px' } }, 'Tokens'),
+                    React.createElement('th', { style: { width: '60px' } }, 'Chars'),
+                  )
+                ),
+                React.createElement('tbody', null,
+                  (stratData.chunks || []).map((chunk, i) => {
+                    const key = `${stratName}-${chunk.chunk_index ?? i}`;
+                    const isExpanded = expandedChunks[key];
+                    return React.createElement(React.Fragment, { key },
+                      React.createElement('tr', {
+                        className: 'chunk-row',
+                        onClick: () => setExpandedChunks(prev => ({ ...prev, [key]: !prev[key] })),
+                      },
+                        React.createElement('td', { className: 'text-muted text-sm' }, chunk.chunk_index ?? i + 1),
+                        React.createElement('td', { className: 'text-sm' },
+                          React.createElement('span', { style: { display: '-webkit-box', WebkitLineClamp: isExpanded ? 'unset' : 1, WebkitBoxOrient: 'vertical', overflow: isExpanded ? 'visible' : 'hidden' } },
+                            chunk.text || '')),
+                        React.createElement('td', { className: 'text-sm text-muted' }, chunk.token_count),
+                        React.createElement('td', { className: 'text-sm text-muted' }, chunk.character_count),
+                      ),
+                      isExpanded ? React.createElement('tr', null,
+                        React.createElement('td', { colSpan: 4 },
+                          React.createElement('div', { className: 'chunk-detail' },
+                            React.createElement('div', null, chunk.text || '(empty)'),
+                            React.createElement('div', { className: 'meta' },
+                              `chunk_id: ${chunk.chunk_id} | parent: ${chunk.parent_id || 'none'}`)
+                          )
+                        )
+                      ) : null
+                    );
+                  })
+                )
+              )
+        )
+      )
+    ),
+
+    // -- 4. Questions Management --
+    React.createElement(CollapseSection, {
+      title: '❓ Questions Dataset', icon: '', open: openSections.questions,
+      onToggle: () => toggle('questions'),
+      badge: qFiles.length ? `${qFiles.length} files` : '0',
+    },
+      React.createElement('div', { className: 'flex-between mb-4' },
+        React.createElement('button', {
+          className: 'btn btn-primary btn-sm',
+          onClick: () => qFileRef.current?.click(),
+        }, qUploading ? React.createElement('span', { className: 'spinner' }) : '↑ Upload .json'),
+        React.createElement('input', {
+          ref: qFileRef, type: 'file', accept: '.json', style: { display: 'none' },
+          onChange: e => uploadQFile(e.target.files[0]),
+        }),
+        React.createElement('button', { className: 'btn btn-secondary btn-sm', onClick: fetchQFiles }, '↻ Refresh')
+      ),
+      qLoading
+        ? React.createElement('div', { style: { padding: '20px', textAlign: 'center' } }, React.createElement('span', { className: 'spinner' }))
+        : qFiles.length === 0
+          ? React.createElement('div', { className: 'empty-state' }, 'No question files found in files/')
+          : React.createElement('table', null,
+              React.createElement('thead', null,
+                React.createElement('tr', null,
+                  React.createElement('th', null, 'File'),
+                  React.createElement('th', { style: { width: '60px' } }, 'Questions'),
+                  React.createElement('th', { style: { width: '80px' } }, 'Size'),
+                  React.createElement('th', { style: { width: '120px' } }, 'Actions'),
+                )
+              ),
+              React.createElement('tbody', null,
+                qFiles.map(f => React.createElement(React.Fragment, { key: f.id },
+                  React.createElement('tr', {
+                    style: { cursor: 'pointer' },
+                    onClick: () => toggleQFile(f.id),
+                  },
+                    React.createElement('td', { className: 'mono text-sm' }, f.id),
+                    React.createElement('td', null,
+                      React.createElement('span', { className: 'badge badge-accent' }, f.questions_count >= 0 ? f.questions_count : '?')),
+                    React.createElement('td', { className: 'text-sm text-muted' },
+                      f.size_bytes > 1024 ? `${(f.size_bytes / 1024).toFixed(1)} KB` : `${f.size_bytes} B`),
+                    React.createElement('td', null,
+                      React.createElement('div', { style: { display: 'flex', gap: '4px' }, onClick: e => e.stopPropagation() },
+                        React.createElement('button', {
+                          className: 'btn btn-primary btn-sm',
+                          onClick: () => useQFile(f.id),
+                        }, 'Use'),
+                        React.createElement('button', {
+                          className: 'btn btn-danger btn-sm',
+                          onClick: () => deleteQFile(f.id),
+                        }, '✕')
+                      )
+                  ),
+                  expandedQFile === f.id && React.createElement('tr', null,
+                    React.createElement('td', { colSpan: 4 },
+                      qFileDetail
+                        ? React.createElement('div', { className: 'chunk-detail', style: { maxHeight: '400px' } },
+                            (qFileDetail.questions || []).map((q, i) =>
+                              React.createElement('div', { key: q.id || i, style: { marginBottom: '12px', paddingBottom: '12px', borderBottom: '1px solid var(--border)' } },
+                                React.createElement('div', { style: { display: 'flex', gap: '6px', marginBottom: '4px', alignItems: 'center' } },
+                                  React.createElement('span', { className: 'badge badge-accent' }, q.id || `q${i + 1}`),
+                                  q.category ? React.createElement('span', { className: 'badge badge-warning' }, q.category) : null,
+                                  q.difficulty ? React.createElement('span', { className: `badge ${q.difficulty === 'hard' ? 'badge-danger' : q.difficulty === 'medium' ? 'badge-warning' : 'badge-success'}` }, q.difficulty) : null,
+                                ),
+                                React.createElement('div', { style: { fontWeight: 500, marginBottom: '4px' } }, q.question),
+                                q.expected_answer ? React.createElement('div', { className: 'text-sm text-muted', style: { lineHeight: '1.6' } },
+                                  React.createElement('strong', { style: { color: 'var(--text-body)' } }, 'Expected: '), q.expected_answer) : null,
+                              )
+                            )
+                          )
+                        : React.createElement('div', { style: { padding: '10px', textAlign: 'center' } }, React.createElement('span', { className: 'spinner' }))
+                    ))
+                  )
+                ))
+              )
+            )
+    ),
+
+    // -- 5. Cost Estimator --
+    React.createElement(CollapseSection, {
+      title: '💰 Cost Estimator', icon: '', open: openSections.cost,
+      onToggle: () => toggle('cost'),
+    },
+      React.createElement('div', { className: 'row mb-0' },
+        React.createElement('div', { className: 'col', style: { maxWidth: '160px' } },
+          React.createElement('label', null, 'Questions'),
+          React.createElement('input', {
+            type: 'number', min: 1, max: 500, value: costQ,
+            onChange: e => setCostQ(parseInt(e.target.value) || 1),
+          })
+        ),
+        React.createElement('div', { className: 'col', style: { maxWidth: '160px' } },
+          React.createElement('label', null, 'Strategies'),
+          React.createElement('input', {
+            type: 'number', min: 1, max: 5, value: costS,
+            onChange: e => setCostS(parseInt(e.target.value) || 1),
+          })
+        ),
+        React.createElement('div', { style: { flex: 'none' } },
+          React.createElement('button', {
+            className: 'btn btn-primary', onClick: estimateCost, disabled: costLoading,
+          }, costLoading ? React.createElement('span', { className: 'spinner' }) : 'Estimate')
+        )
+      ),
+      costResult && React.createElement('div', { className: 'cost-result' },
+        React.createElement('div', { className: 'cost-card' },
+          React.createElement('div', { className: 'label' }, 'Total Cost'),
+          React.createElement('div', { className: 'value amber' }, `$${costResult.estimated_cost_usd?.toFixed(4) || '0'}`),
+          React.createElement('div', { className: 'sub' }, `${costResult.total_queries} queries × ${costResult.total_evaluations} evals`)
+        ),
+        React.createElement('div', { className: 'cost-card' },
+          React.createElement('div', { className: 'label' }, 'Input Tokens'),
+          React.createElement('div', { className: 'value' }, (costResult.estimated_tokens?.input || 0).toLocaleString()),
+        ),
+        React.createElement('div', { className: 'cost-card' },
+          React.createElement('div', { className: 'label' }, 'Output Tokens'),
+          React.createElement('div', { className: 'value' }, (costResult.estimated_tokens?.output || 0).toLocaleString()),
+        ),
+        React.createElement('div', { className: 'cost-card' },
+          React.createElement('div', { className: 'label' }, 'Embedding'),
+          React.createElement('div', { className: 'value' }, `$${costResult.cost_breakdown?.embedding?.toFixed(4) || '0'}`),
+        ),
+        React.createElement('div', { className: 'cost-card' },
+          React.createElement('div', { className: 'label' }, 'Queries'),
+          React.createElement('div', { className: 'value' }, `$${costResult.cost_breakdown?.queries?.toFixed(4) || '0'}`),
+        ),
+        React.createElement('div', { className: 'cost-card' },
+          React.createElement('div', { className: 'label' }, 'Evaluation'),
+          React.createElement('div', { className: 'value' }, `$${costResult.cost_breakdown?.evaluation?.toFixed(4) || '0'}`),
+        )
+      )
+    )
+  );
+}
+
+// -- Main App -----------------------------------------------
+function App() {
+  const [activeTab, setActiveTab] = useState('home');
+  const [documents, setDocuments] = useState([]);
+  const [strategies, setStrategies] = useState([]);
+  const [toasts, setToasts] = useState([]);
+  const [questionsFile, setQuestionsFile] = useState('files/questions.json');
+
+  useEffect(() => {
+    api('/strategies').then(d => setStrategies(d.strategies || [])).catch(() => {});
+  }, []);
+
+  const addToast = useCallback((message, type = 'success') => {
+    const id = ++_toastId;
+    setToasts(prev => [...prev, { id, message, type }]);
+    setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 3000);
+  }, []);
+
+  const removeToast = useCallback((id) => {
+    setToasts(prev => prev.filter(t => t.id !== id));
+  }, []);
+
+  const tabs = [
+    { id: 'home', label: 'Home' },
+    { id: 'documents', label: 'Documents' },
+    { id: 'query', label: 'Query' },
+    { id: 'benchmarks', label: 'Benchmarks' },
+    { id: 'admin', label: 'Admin' },
+  ];
+
+  const renderTab = () => {
+    switch (activeTab) {
+      case 'home': return React.createElement(HomeTab);
+      case 'documents': return React.createElement(DocumentsTab, {
+        documents, setDocuments, strategies, addToast });
+      case 'query': return React.createElement(QueryTab, {
+        documents, strategies, addToast });
+      case 'benchmarks': return React.createElement(BenchmarksTab, {
+        documents, strategies, addToast, questionsFile });
+      case 'admin': return React.createElement(AdminTab, {
+        addToast, documents, strategies, setActiveTab, setQuestionsFile });
+      default: return null;
+    }
+  };
+
+  return React.createElement(React.Fragment, null,
+    React.createElement('div', { className: 'tab-bar' },
+      React.createElement('div', { className: 'logo' }, 'RAG ', React.createElement('span', null, 'Benchmarker')),
+      tabs.map(t =>
+        React.createElement('button', {
+          key: t.id,
+          className: `tab-btn ${activeTab === t.id ? 'active' : ''}`,
+          onClick: () => setActiveTab(t.id),
+        }, t.label)
+      )
+    ),
+    React.createElement('div', { className: 'main' }, renderTab()),
+    React.createElement(ToastContainer, { toasts, removeToast })
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));
+</script>
+</body>
+</html>
