Spaces:
Running
Running
| :root { | |
| --bg: #fdfaf5; | |
| --panel: #ffffff; | |
| --panel-alt: #faf4ea; | |
| --border: #e7ddc9; | |
| --border-strong: #cfbf9a; | |
| --ink: #1f1b14; | |
| --ink-soft: #4a4435; | |
| --ink-mute: #7d745f; | |
| --accent: #b15a16; | |
| --accent-soft: #e8c79b; | |
| --hard: #2f8f4a; | |
| --hard-soft: #d6efdc; | |
| --pos: #1f6fb5; | |
| --pos-soft: #d4e6f5; | |
| --neg: #b53a2e; | |
| --neg-soft: #f3d8d3; | |
| --code-bg: #2b2520; | |
| --code-ink: #f3ebd7; | |
| --shadow: 0 1px 2px rgba(80, 60, 20, 0.07), 0 6px 18px rgba(80, 60, 20, 0.07); | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { height: 100%; margin: 0; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| color: var(--ink); | |
| background: var(--bg); | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| /* Browsers default [hidden] to display:none, but our .filter-row / | |
| .e2e-meta rules use display:flex/block which override it. Restore | |
| the expected behavior so data-show-in toggling actually hides the | |
| element. */ | |
| [hidden] { display: none ; } | |
| /* ── Topbar ──────────────────────────────────────────────────────── */ | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 10px 20px; | |
| background: var(--panel); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .topbar h1 { | |
| margin: 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| letter-spacing: 0.1px; | |
| } | |
| .topbar-sub { | |
| margin-left: 8px; | |
| font-size: 12px; | |
| font-weight: 400; | |
| color: var(--ink-mute); | |
| } | |
| .topbar-right { display: flex; gap: 14px; } | |
| .topbar-link { | |
| font-size: 13px; | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| .topbar-link:hover { text-decoration: underline; } | |
| /* ── Layout ──────────────────────────────────────────────────────── */ | |
| .layout { | |
| display: flex; | |
| height: calc(100vh - 44px); | |
| } | |
| .sidebar { | |
| width: 340px; | |
| flex-shrink: 0; | |
| border-right: 1px solid var(--border); | |
| background: var(--panel); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .sidebar-controls { | |
| padding: 12px 12px 8px; | |
| border-bottom: 1px solid var(--border); | |
| background: var(--panel-alt); | |
| } | |
| #searchBox { | |
| width: 100%; | |
| padding: 6px 9px; | |
| border: 1px solid var(--border-strong); | |
| border-radius: 5px; | |
| background: #fff; | |
| font-size: 13px; | |
| } | |
| #searchBox:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 2px var(--accent-soft); | |
| } | |
| .filter-row { | |
| display: flex; | |
| gap: 6px; | |
| margin-top: 8px; | |
| } | |
| .filter-pill { | |
| flex: 1; | |
| padding: 4px 8px; | |
| border: 1px solid var(--border-strong); | |
| border-radius: 999px; | |
| background: #fff; | |
| color: var(--ink-soft); | |
| font-size: 12px; | |
| cursor: pointer; | |
| } | |
| .filter-pill:hover { background: var(--accent-soft); } | |
| .filter-pill.active { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| color: #fff; | |
| font-weight: 600; | |
| } | |
| .nav-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 6px; | |
| margin-top: 8px; | |
| } | |
| .nav-row button { | |
| flex-shrink: 0; | |
| padding: 4px 10px; | |
| border: 1px solid var(--border-strong); | |
| border-radius: 5px; | |
| background: #fff; | |
| color: var(--ink-soft); | |
| font-size: 12px; | |
| cursor: pointer; | |
| } | |
| .nav-row button:hover:not(:disabled) { background: var(--accent-soft); } | |
| .nav-row button:disabled { opacity: 0.4; cursor: not-allowed; } | |
| .counter { | |
| font-size: 12px; | |
| font-variant-numeric: tabular-nums; | |
| color: var(--ink-mute); | |
| white-space: nowrap; | |
| } | |
| .qid-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| overflow-y: auto; | |
| flex: 1; | |
| } | |
| .qid-list li { | |
| padding: 7px 12px; | |
| border-bottom: 1px solid var(--border); | |
| cursor: pointer; | |
| font-size: 12.5px; | |
| } | |
| .qid-list li:hover { background: var(--panel-alt); } | |
| .qid-list li.selected { | |
| background: var(--accent-soft); | |
| border-left: 3px solid var(--accent); | |
| padding-left: 9px; | |
| } | |
| .qid-list .qid-id { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| font-size: 11px; | |
| color: var(--ink-mute); | |
| display: block; | |
| } | |
| .qid-list .qid-question { | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| color: var(--ink); | |
| } | |
| .qid-list .qid-tag { | |
| display: inline-block; | |
| padding: 0px 5px; | |
| margin-right: 4px; | |
| border-radius: 3px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| color: #fff; | |
| vertical-align: middle; | |
| } | |
| .qid-tag.WikiSQL { background: #4078b8; } | |
| .qid-tag.WikiTQ { background: #8b6cb0; } | |
| /* ── Main pane ───────────────────────────────────────────────────── */ | |
| .main-pane { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 22px 28px; | |
| max-width: 1500px; | |
| } | |
| .placeholder { | |
| padding: 60px 20px; | |
| text-align: center; | |
| color: var(--ink-mute); | |
| font-size: 15px; | |
| } | |
| /* sticky header */ | |
| .record-header { | |
| position: sticky; | |
| top: -22px; /* cancel main-pane top padding so it pins flush */ | |
| background: var(--bg); | |
| padding: 8px 0 10px; | |
| border-bottom: 1px solid var(--border); | |
| margin-bottom: 16px; | |
| z-index: 4; | |
| } | |
| .record-pills { | |
| display: flex; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| margin-bottom: 6px; | |
| } | |
| .pill { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 2px 8px; | |
| font-size: 11.5px; | |
| border-radius: 999px; | |
| background: var(--panel-alt); | |
| color: var(--ink-soft); | |
| border: 1px solid var(--border); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .pill.dataset { font-weight: 600; } | |
| .pill.dataset.WikiSQL { background: #e1ecf7; color: #1f4f87; border-color: #b8d2ec; } | |
| .pill.dataset.WikiTQ { background: #ebe1f5; color: #563a83; border-color: #cbb8e3; } | |
| .pill.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } | |
| .copy-btn { | |
| border: 1px solid var(--border); | |
| background: #fff; | |
| cursor: pointer; | |
| padding: 2px 8px; | |
| font-size: 11.5px; | |
| border-radius: 999px; | |
| color: var(--ink-mute); | |
| } | |
| .copy-btn:hover { background: var(--accent-soft); color: var(--ink); } | |
| .copy-btn.copied { background: var(--hard-soft); color: var(--hard); border-color: var(--hard); } | |
| .question-text { | |
| font-size: 17px; | |
| font-weight: 500; | |
| margin: 4px 0 10px; | |
| color: var(--ink); | |
| } | |
| /* gold-answer pills: single horizontal row, scroll if many */ | |
| .answer-row { | |
| display: flex; | |
| flex-wrap: nowrap; | |
| gap: 6px; | |
| overflow-x: auto; | |
| padding-bottom: 4px; | |
| } | |
| .answer-pill { | |
| flex: 0 0 auto; | |
| padding: 3px 10px; | |
| background: #fff7e6; | |
| border: 1px solid #e8c97b; | |
| color: #8a5d09; | |
| border-radius: 5px; | |
| font-size: 12.5px; | |
| font-weight: 500; | |
| white-space: nowrap; | |
| } | |
| .answer-label { | |
| flex: 0 0 auto; | |
| padding: 3px 0 3px 0; | |
| font-size: 11.5px; | |
| color: var(--ink-mute); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-right: 4px; | |
| font-weight: 600; | |
| } | |
| /* ── SQL block ───────────────────────────────────────────────────── */ | |
| .section { margin: 22px 0; } | |
| .section-title { | |
| margin: 0 0 8px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| letter-spacing: 0.8px; | |
| text-transform: uppercase; | |
| color: var(--ink-mute); | |
| } | |
| .sql-block { | |
| background: var(--code-bg); | |
| color: var(--code-ink); | |
| padding: 12px 14px; | |
| border-radius: 6px; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, "Courier New", monospace; | |
| font-size: 13px; | |
| line-height: 1.55; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| overflow-x: auto; | |
| box-shadow: var(--shadow); | |
| } | |
| .sql-kw { color: #f0a878; font-weight: 600; } | |
| .sql-str { color: #b5d97a; } | |
| .sql-num { color: #91c8e4; } | |
| .sql-fn { color: #e0b3ff; } | |
| /* ── Tables panel ────────────────────────────────────────────────── */ | |
| .tables-tabs { | |
| display: flex; | |
| gap: 6px; | |
| margin-bottom: 12px; | |
| border-bottom: 2px solid var(--border); | |
| padding-bottom: 0; | |
| } | |
| .tables-tab { | |
| padding: 7px 14px; | |
| border: 1px solid var(--border); | |
| border-bottom: none; | |
| background: var(--panel-alt); | |
| color: var(--ink-soft); | |
| font-size: 13px; | |
| cursor: pointer; | |
| border-radius: 6px 6px 0 0; | |
| font-weight: 500; | |
| position: relative; | |
| top: 2px; | |
| } | |
| .tables-tab .count { | |
| display: inline-block; | |
| margin-left: 6px; | |
| padding: 1px 7px; | |
| border-radius: 999px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| background: #fff; | |
| color: var(--ink-mute); | |
| border: 1px solid var(--border); | |
| } | |
| .tables-tab:hover:not(:disabled):not(.active) { background: #fff; } | |
| .tables-tab:disabled { opacity: 0.35; cursor: not-allowed; } | |
| .tables-tab.active { | |
| background: #fff; | |
| color: var(--ink); | |
| border-bottom: 2px solid #fff; | |
| } | |
| .tables-tab[data-bucket="hard_positive"] .count { background: var(--hard-soft); color: var(--hard); border-color: var(--hard); } | |
| .tables-tab[data-bucket="positive"] .count { background: var(--pos-soft); color: var(--pos); border-color: var(--pos); } | |
| .tables-tab[data-bucket="negative"] .count { background: var(--neg-soft); color: var(--neg); border-color: var(--neg); } | |
| .tables-tab.active[data-bucket="hard_positive"] { border-top: 3px solid var(--hard); } | |
| .tables-tab.active[data-bucket="positive"] { border-top: 3px solid var(--pos); } | |
| .tables-tab.active[data-bucket="negative"] { border-top: 3px solid var(--neg); } | |
| .chunk-card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| margin-bottom: 16px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| } | |
| .chunk-card.hard_positive { border-left: 4px solid var(--hard); } | |
| .chunk-card.positive { border-left: 4px solid var(--pos); } | |
| .chunk-card.negative { border-left: 4px solid var(--neg); } | |
| .chunk-head { | |
| padding: 10px 14px; | |
| background: var(--panel-alt); | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| gap: 12px; | |
| } | |
| .chunk-bread { | |
| font-size: 13px; | |
| color: var(--ink); | |
| line-height: 1.4; | |
| } | |
| .chunk-bread .crumb-sep { | |
| color: var(--ink-mute); | |
| margin: 0 6px; | |
| } | |
| .chunk-bread .crumb-page { font-weight: 600; } | |
| .chunk-bread .crumb-section { color: var(--ink-soft); } | |
| .chunk-bread .crumb-caption { | |
| display: block; | |
| font-size: 11.5px; | |
| color: var(--ink-mute); | |
| font-style: italic; | |
| margin-top: 2px; | |
| } | |
| .chunk-meta { | |
| flex-shrink: 0; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| font-size: 11px; | |
| color: var(--ink-mute); | |
| text-align: right; | |
| } | |
| .chunk-meta .chunk-id-label { display: block; } | |
| .chunk-table-wrap { | |
| overflow-x: auto; | |
| max-height: 480px; | |
| overflow-y: auto; | |
| } | |
| .chunk-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 12.5px; | |
| } | |
| .chunk-table thead { | |
| position: sticky; | |
| top: 0; | |
| background: #fff; | |
| z-index: 1; | |
| } | |
| .chunk-table th { | |
| text-align: left; | |
| padding: 7px 10px; | |
| border-bottom: 2px solid var(--border-strong); | |
| background: var(--panel-alt); | |
| font-weight: 600; | |
| color: var(--ink); | |
| white-space: nowrap; | |
| font-size: 11.5px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.4px; | |
| } | |
| .chunk-table td { | |
| padding: 6px 10px; | |
| border-bottom: 1px solid var(--border); | |
| vertical-align: top; | |
| color: var(--ink-soft); | |
| } | |
| .chunk-table tbody tr:nth-child(even) { background: var(--panel-alt); } | |
| .chunk-table tbody tr:hover { background: var(--accent-soft); } | |
| .empty-bucket { | |
| padding: 40px 20px; | |
| text-align: center; | |
| color: var(--ink-mute); | |
| background: var(--panel); | |
| border: 1px dashed var(--border-strong); | |
| border-radius: 8px; | |
| font-size: 13px; | |
| } | |
| /* small-screen squish (rare on HF; mainly for sanity) */ | |
| @media (max-width: 900px) { | |
| .layout { flex-direction: column; height: auto; } | |
| .sidebar { width: 100%; max-height: 240px; border-right: none; border-bottom: 1px solid var(--border); } | |
| .main-pane { padding: 16px; } | |
| } | |
| /* ── View-mode toggle (topbar) ───────────────────────────────────── */ | |
| .view-mode-row { | |
| display: inline-flex; | |
| border: 1px solid var(--border-strong); | |
| border-radius: 7px; | |
| overflow: hidden; | |
| background: var(--panel-alt); | |
| margin-right: 12px; | |
| } | |
| .view-mode-btn { | |
| padding: 5px 11px; | |
| background: transparent; | |
| border: none; | |
| border-right: 1px solid var(--border); | |
| color: var(--ink-soft); | |
| font-size: 13px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: background 0.12s ease, color 0.12s ease; | |
| } | |
| .view-mode-btn:last-child { border-right: none; } | |
| .view-mode-btn:hover { background: var(--accent-soft); color: var(--ink); } | |
| .view-mode-btn.active { | |
| background: var(--accent); | |
| color: #fff; | |
| } | |
| /* ── E2E filter pills (stop_reason, score buckets) ────────────────── */ | |
| .filter-row.e2e-filter { gap: 4px; flex-wrap: wrap; } | |
| .filter-row.e2e-filter .filter-pill { font-size: 11px; padding: 3px 7px; } | |
| /* ── E2E meta summary (sidebar) ───────────────────────────────────── */ | |
| .e2e-meta { | |
| background: var(--panel-alt); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| padding: 7px 9px; | |
| font-size: 11px; | |
| color: var(--ink-soft); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .e2e-meta-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px 10px; | |
| align-items: center; | |
| } | |
| .e2e-meta .meta-label { color: var(--ink-mute); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; } | |
| .e2e-meta .meta-value { color: var(--ink); font-size: 11px; word-break: break-all; } | |
| .e2e-meta .meta-value.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } | |
| .e2e-meta .meta-stat { color: var(--ink-soft); } | |
| .e2e-meta .meta-stat strong { color: var(--ink); font-weight: 600; } | |
| /* ── Sidebar row enhancements for E2E mode ────────────────────────── */ | |
| .qid-row .qid-monoid { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| color: var(--ink-soft); | |
| font-size: 11px; | |
| } | |
| .qid-row .qid-row-meta { | |
| display: flex; | |
| gap: 5px; | |
| margin-top: 4px; | |
| flex-wrap: wrap; | |
| font-size: 10px; | |
| color: var(--ink-mute); | |
| } | |
| .qid-row .meta-mini { | |
| background: var(--panel-alt); | |
| border: 1px solid var(--border); | |
| border-radius: 3px; | |
| padding: 1px 5px; | |
| } | |
| /* ── Metric pills (in sidebar rows) ───────────────────────────────── */ | |
| .metric-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1px 6px; | |
| border-radius: 3px; | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 0.02em; | |
| min-width: 22px; | |
| } | |
| .metric-pill.f1.good { background: #d6efdc; color: #1f6b32; } | |
| .metric-pill.f1.mid { background: #fff1c4; color: #8a5d10; } | |
| .metric-pill.f1.low { background: #f5e0d3; color: #a55020; } | |
| .metric-pill.f1.zero { background: #f3d8d3; color: #8c2a1f; } | |
| .metric-pill.em { background: #2f8f4a; color: #fff; } | |
| .metric-pill.err { background: #b53a2e; color: #fff; } | |
| /* ── Stop-reason pills (sidebar) ──────────────────────────────────── */ | |
| .stop-pill { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| font-size: 10px; | |
| padding: 1px 5px; | |
| border-radius: 3px; | |
| border: 1px solid var(--border-strong); | |
| color: var(--ink-soft); | |
| background: var(--panel); | |
| } | |
| .stop-end_turn { background: #ecf6ef; color: #1f6b32; border-color: #c5e0cb; } | |
| .stop-error { background: #fbe6e2; color: #8c2a1f; border-color: #ecc5be; } | |
| .stop-max_turns{ background: #fff1c4; color: #8a5d10; border-color: #e9d488; } | |
| /* ── E2E record header ───────────────────────────────────────────── */ | |
| .record-header.e2e .question-text { | |
| color: var(--ink); | |
| } | |
| .record-header.e2e .pill { | |
| background: var(--panel-alt); | |
| border: 1px solid var(--border); | |
| padding: 2px 7px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| } | |
| .record-header.e2e .pill.mono { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| } | |
| .record-header.e2e .pill.dataset { | |
| background: var(--accent-soft); | |
| border-color: var(--border-strong); | |
| color: var(--ink); | |
| } | |
| /* ── Metric badges (record header) ────────────────────────────────── */ | |
| .metrics-row { | |
| display: flex; | |
| gap: 7px; | |
| flex-wrap: wrap; | |
| margin-top: 10px; | |
| } | |
| .metric-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 3px 8px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--ink); | |
| background: var(--panel-alt); | |
| border: 1px solid var(--border-strong); | |
| } | |
| .metric-badge.f1.good { background: #d6efdc; color: #1f6b32; border-color: #a8d9b3; } | |
| .metric-badge.f1.mid { background: #fff1c4; color: #8a5d10; border-color: #e9d488; } | |
| .metric-badge.f1.low { background: #f5e0d3; color: #a55020; border-color: #e0bda1; } | |
| .metric-badge.f1.zero { background: #f3d8d3; color: #8c2a1f; border-color: #e0a99e; } | |
| .metric-badge.good { background: #2f8f4a; color: #fff; border-color: #1f6b32; } | |
| .metric-badge.zero { background: #b53a2e; color: #fff; border-color: #8c2a1f; } | |
| .metric-badge.mid { background: #f0e7d2; color: var(--ink-soft); } | |
| .metric-badge.sep { background: transparent; border: none; color: var(--ink-mute); font-weight: 500; } | |
| /* ── Meta-row pills (model, turns, latency) ──────────────────────── */ | |
| .meta-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| margin-top: 10px; | |
| } | |
| .meta-row .pill { | |
| background: var(--panel-alt); | |
| border: 1px solid var(--border); | |
| padding: 2px 7px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| color: var(--ink-soft); | |
| } | |
| .meta-row .pill.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } | |
| /* ── Answer-pill variants ─────────────────────────────────────────── */ | |
| .answer-pill.pred { | |
| background: #d4e6f5; | |
| color: #18497d; | |
| border-color: #abc7e1; | |
| } | |
| .answer-pill.empty { | |
| background: #f3eedb; | |
| color: var(--ink-mute); | |
| font-style: italic; | |
| } | |
| /* ── Error banner ─────────────────────────────────────────────────── */ | |
| .error-banner { | |
| margin-top: 12px; | |
| padding: 10px 12px; | |
| background: #fbe6e2; | |
| border: 1px solid #ecc5be; | |
| border-radius: 6px; | |
| color: #8c2a1f; | |
| font-size: 12px; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| /* ── Section subtitle ─────────────────────────────────────────────── */ | |
| .section-sub { | |
| font-size: 11px; | |
| font-weight: 400; | |
| color: var(--ink-mute); | |
| margin-left: 6px; | |
| } | |
| /* ── Raw model-answer block ───────────────────────────────────────── */ | |
| .raw-block { | |
| background: var(--code-bg); | |
| color: var(--code-ink); | |
| padding: 12px 14px; | |
| border-radius: 6px; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| font-size: 12px; | |
| line-height: 1.55; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| max-height: 360px; | |
| overflow: auto; | |
| } | |
| /* ── Trajectory ───────────────────────────────────────────────────── */ | |
| .trajectory { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .ev { | |
| border: 1px solid var(--border); | |
| border-left: 4px solid var(--border-strong); | |
| border-radius: 5px; | |
| background: var(--panel); | |
| overflow: hidden; | |
| } | |
| .ev-tool { border-left-color: #1f6fb5; } | |
| .ev-text { border-left-color: #2f8f4a; background: #f5fbf6; } | |
| .ev-error { border-left-color: #b53a2e; background: #fbe6e2; } | |
| .ev-done { border-left-color: var(--ink-mute); background: var(--panel-alt); } | |
| .ev-head { | |
| padding: 6px 12px; | |
| background: var(--panel-alt); | |
| border-bottom: 1px solid var(--border); | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--ink-soft); | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .ev-done .ev-head { border-bottom: none; } | |
| .ev-cols { | |
| display: grid; | |
| grid-template-columns: minmax(180px, 1fr) 2fr; | |
| gap: 0; | |
| } | |
| .ev-col { | |
| border-right: 1px solid var(--border); | |
| } | |
| .ev-col:last-child { border-right: none; } | |
| .ev-col-label { | |
| padding: 4px 10px; | |
| background: var(--panel-alt); | |
| font-size: 10px; | |
| color: var(--ink-mute); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .ev-body { | |
| margin: 0; | |
| padding: 10px 12px; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| font-size: 11.5px; | |
| line-height: 1.55; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| max-height: 320px; | |
| overflow: auto; | |
| background: var(--panel); | |
| color: var(--ink); | |
| } | |
| .ev-body.call { background: #f3f8fc; } | |
| .ev-body.result { background: var(--panel); } | |
| .ev-body.empty { color: var(--ink-mute); font-style: italic; } | |
| .trunc-tag { | |
| margin-left: auto; | |
| font-size: 10px; | |
| background: #fff1c4; | |
| color: #8a5d10; | |
| padding: 1px 6px; | |
| border-radius: 3px; | |
| border: 1px solid #e9d488; | |
| text-transform: lowercase; | |
| letter-spacing: 0.04em; | |
| } | |
| @media (max-width: 900px) { | |
| .ev-cols { grid-template-columns: 1fr; } | |
| .ev-col { border-right: none; border-bottom: 1px solid var(--border); } | |
| } | |
| /* ── Markdown body (shared by Unified + Eval Structures tabs) ─────── */ | |
| .md-body { | |
| font-size: 13px; | |
| line-height: 1.55; | |
| color: var(--ink); | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| padding: 10px 14px; | |
| overflow-x: auto; | |
| max-height: 540px; | |
| overflow-y: auto; | |
| } | |
| .md-body h1, .md-body h2, .md-body h3, .md-body h4 { | |
| margin: 8px 0 6px; | |
| color: var(--ink); | |
| font-weight: 600; | |
| } | |
| .md-body h1 { font-size: 16px; } | |
| .md-body h2 { font-size: 14px; } | |
| .md-body h3 { font-size: 13px; } | |
| .md-body h4 { font-size: 12px; color: var(--ink-soft); } | |
| .md-body p { margin: 4px 0; } | |
| .md-body code { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| background: var(--panel-alt); | |
| padding: 1px 4px; | |
| border-radius: 3px; | |
| font-size: 12px; | |
| } | |
| .md-body pre { | |
| background: var(--code-bg); | |
| color: var(--code-ink); | |
| padding: 8px 12px; | |
| border-radius: 4px; | |
| font-size: 11.5px; | |
| overflow-x: auto; | |
| } | |
| .md-body pre code { background: transparent; color: inherit; padding: 0; } | |
| .md-body ul, .md-body ol { margin: 4px 0 4px 22px; padding: 0; } | |
| .md-body li { margin: 1px 0; } | |
| .md-body table { | |
| border-collapse: collapse; | |
| margin: 6px 0; | |
| font-size: 12px; | |
| width: 100%; | |
| } | |
| .md-body th, .md-body td { | |
| border: 1px solid var(--border); | |
| padding: 4px 8px; | |
| text-align: left; | |
| vertical-align: top; | |
| } | |
| .md-body th { | |
| background: var(--panel-alt); | |
| font-weight: 600; | |
| color: var(--ink); | |
| } | |
| .md-body tr:nth-child(even) td { background: var(--panel-alt); } | |
| .md-fallback { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| padding: 10px 12px; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| font-size: 11.5px; | |
| white-space: pre-wrap; | |
| max-height: 480px; | |
| overflow: auto; | |
| } | |
| /* ── Unified eval mode (Unified tab) ─────────────────────────────── */ | |
| .unified-doc { | |
| margin-bottom: 14px; | |
| padding: 10px 12px; | |
| background: var(--panel-alt); | |
| border: 1px solid var(--border); | |
| border-left: 3px solid var(--pos); | |
| border-radius: 6px; | |
| } | |
| .unified-doc-head { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 6px; | |
| } | |
| .unified-doc-num { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--pos); | |
| } | |
| /* ── Eval Structures tab ─────────────────────────────────────────── */ | |
| .struct-group { | |
| margin-bottom: 16px; | |
| padding: 8px 10px 10px; | |
| background: var(--panel-alt); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| } | |
| .struct-group-title { | |
| margin: 0 0 8px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| } | |
| .struct-subtype { | |
| display: inline-block; | |
| padding: 2px 9px; | |
| border-radius: 999px; | |
| font-size: 11px; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| background: var(--accent-soft); | |
| color: var(--ink); | |
| border: 1px solid var(--border-strong); | |
| } | |
| /* per-subtype accent colour (best-effort, monaco-style). Unknown subtypes | |
| fall back to the default accent-soft above. */ | |
| .struct-subtype-entity { background: #d6efdc; color: #1f6b32; border-color: #a8d9b3; } | |
| .struct-subtype-_raw { background: #e1ecf7; color: #18497d; border-color: #abc7e1; } | |
| .struct-subtype-claim { background: #ebe1f5; color: #563a83; border-color: #cbb8e3; } | |
| .struct-subtype-event { background: #f5e0d3; color: #a55020; border-color: #e0bda1; } | |
| .struct-subtype-relation { background: #fff1c4; color: #8a5d10; border-color: #e9d488; } | |
| .struct-subtype-taxonomy { background: #d4e6f5; color: #18497d; border-color: #abc7e1; } | |
| .struct-group-count { | |
| font-size: 11px; | |
| color: var(--ink-mute); | |
| font-weight: 400; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .struct-doc { | |
| margin-top: 8px; | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 5px; | |
| padding: 8px 10px; | |
| } | |
| .struct-doc-head { margin-bottom: 6px; } | |
| /* ── E2E Structures tab ────────────────────────────────────────────── | |
| For each test qid: the supporting doc + the (up to) 5 structures the | |
| e2e pipeline extracted from it (entity_fact_records, | |
| chronology_and_timeline_indexes, claim_and_theme_summaries, | |
| qa_shortcuts_and_templates, relation_graphs_and_mappings). Each | |
| structure is a <details> card so users can collapse/expand. CSV | |
| payloads render as compact tables; JSON/JSONL render as keyed mini-cards. */ | |
| .e2estruct-doc { | |
| margin-top: 12px; | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| padding: 10px 12px; | |
| } | |
| .e2estruct-doc-head { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| margin-bottom: 8px; | |
| } | |
| .e2estruct-doc-source { | |
| margin: 8px 0 10px; | |
| padding: 6px 8px; | |
| background: var(--panel-alt); | |
| border: 1px dashed var(--border-strong); | |
| border-radius: 5px; | |
| } | |
| .e2estruct-doc-source[open] { padding-bottom: 8px; } | |
| .e2estruct-doc-body { | |
| margin-top: 6px; | |
| padding: 6px 8px; | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| font-size: 12px; | |
| } | |
| .e2estruct-structs { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 8px; | |
| margin-top: 4px; | |
| } | |
| .e2estruct-card { | |
| background: var(--panel-alt); | |
| border: 1px solid var(--border); | |
| border-left: 3px solid var(--border-strong); | |
| border-radius: 5px; | |
| padding: 6px 10px 8px; | |
| font-size: 12px; | |
| } | |
| .e2estruct-card[open] { padding-bottom: 10px; } | |
| /* Per-shape accent colour on the left border + summary chip. */ | |
| .e2estruct-entity_fact_records { border-left-color: #1f6b32; } | |
| .e2estruct-tabular_records { border-left-color: #1f6b32; } | |
| .e2estruct-chronology_and_timeline_indexes { border-left-color: #18497d; } | |
| .e2estruct-claim_and_theme_summaries { border-left-color: #563a83; } | |
| .e2estruct-qa_shortcuts_and_templates { border-left-color: #a55020; } | |
| .e2estruct-relation_graphs_and_mappings { border-left-color: #8a5d10; } | |
| .e2estruct-summary { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| cursor: pointer; | |
| user-select: none; | |
| font-weight: 600; | |
| } | |
| .e2estruct-summary::-webkit-details-marker { color: var(--ink-mute); } | |
| .e2estruct-summary .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; } | |
| .e2estruct-desc { | |
| margin: 6px 0 8px; | |
| color: var(--ink-mute); | |
| font-size: 11px; | |
| font-style: italic; | |
| line-height: 1.4; | |
| } | |
| .e2estruct-body { margin-top: 4px; } | |
| .e2estruct-pre { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| padding: 6px 8px; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| font-size: 11px; | |
| line-height: 1.45; | |
| overflow-x: auto; | |
| max-height: 360px; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| /* CSV-as-table */ | |
| .e2estruct-table-wrap { | |
| overflow-x: auto; | |
| max-height: 420px; | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| } | |
| .e2estruct-table { | |
| border-collapse: collapse; | |
| width: 100%; | |
| font-size: 11px; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| background: var(--panel); | |
| } | |
| .e2estruct-table th, .e2estruct-table td { | |
| border: 1px solid var(--border); | |
| padding: 4px 6px; | |
| text-align: left; | |
| vertical-align: top; | |
| white-space: pre-wrap; | |
| } | |
| .e2estruct-table th { | |
| background: var(--panel-alt); | |
| font-weight: 600; | |
| position: sticky; | |
| top: 0; | |
| z-index: 1; | |
| } | |
| .e2estruct-table tr:nth-child(even) td { background: var(--panel-alt); } | |
| /* JSONL mini-cards */ | |
| .jsonl-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| max-height: 420px; | |
| overflow-y: auto; | |
| padding-right: 2px; | |
| } | |
| .jsonl-card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| padding: 4px 8px; | |
| display: grid; | |
| grid-template-columns: minmax(110px, max-content) 1fr; | |
| gap: 2px 10px; | |
| font-size: 11px; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| } | |
| .jsonl-row { | |
| display: contents; | |
| } | |
| .jsonl-key { | |
| color: var(--ink-mute); | |
| font-weight: 600; | |
| text-align: right; | |
| } | |
| .jsonl-val { | |
| color: var(--ink); | |
| word-break: break-word; | |
| white-space: pre-wrap; | |
| } | |
| /* ── Sidebar dataset_origin tag (unified + eval_structures rows) ─── */ | |
| /* Reuse .qid-tag rules (already defined for WikiSQL / WikiTQ). */ | |
| /* ── Standalone trajectory modes share the e2e header look — no extra rules needed. */ | |
| /* ── Compare tab ────────────────────────────────────────────────────── | |
| Side-by-side grid of per-config cards (one per cell in | |
| outputs/agentic_wiki_opentable/). Set-based F1/EM only — no LLM judge | |
| exists for wiki_opentable, so this is the source-of-truth metric. | |
| */ | |
| /* Sparkline-style mini bars in sidebar showing per-cell F1 at a glance. */ | |
| .compare-spark-row { | |
| display: inline-flex; | |
| gap: 2px; | |
| margin-right: 6px; | |
| vertical-align: middle; | |
| } | |
| .compare-spark { | |
| display: inline-block; | |
| width: 9px; | |
| height: 12px; | |
| border-radius: 2px; | |
| border: 1px solid rgba(0,0,0,0.08); | |
| } | |
| .compare-spark.good { background: #59a675; } /* EM=1 */ | |
| .compare-spark.mid { background: #d6c14a; } /* 0.5 ≤ F1 < 1 */ | |
| .compare-spark.low { background: #d18b5a; } /* 0 < F1 < 0.5 */ | |
| .compare-spark.zero { background: #d2c4ad; } /* F1=0 */ | |
| /* Main pane grid + per-config card. */ | |
| .compare-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); | |
| gap: 12px; | |
| margin-top: 8px; | |
| } | |
| @media (max-width: 900px) { | |
| .compare-grid { grid-template-columns: 1fr; } | |
| } | |
| .compare-card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| padding: 10px 12px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| min-width: 0; /* let <pre> shrink in grid */ | |
| overflow: hidden; | |
| } | |
| .compare-card.is-winner { | |
| border-color: #59a675; | |
| box-shadow: 0 0 0 1px rgba(89, 166, 117, 0.35); | |
| background: linear-gradient(180deg, rgba(89, 166, 117, 0.06), var(--panel)); | |
| } | |
| .compare-card-hdr { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| padding-bottom: 6px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .compare-card-label { | |
| font-family: var(--mono, ui-monospace, SFMono-Regular, monospace); | |
| font-size: 12.5px; | |
| font-weight: 600; | |
| color: var(--ink); | |
| } | |
| .compare-card-metrics { | |
| display: inline-flex; | |
| gap: 4px; | |
| flex-wrap: wrap; | |
| } | |
| .compare-winner-pill { | |
| font-size: 13px; | |
| margin-left: 4px; | |
| } | |
| .compare-card-preds { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 3px 5px; | |
| align-items: center; | |
| font-size: 12px; | |
| } | |
| .compare-card-sublabel { | |
| color: var(--ink-mute); | |
| font-size: 11px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| margin-right: 4px; | |
| } | |
| .answer-pill-pred { | |
| background: #eaf3fa; | |
| color: #1f4d70; | |
| border: 1px solid #c6dcec; | |
| } | |
| .compare-card-answer { | |
| margin: 0; | |
| padding: 8px 10px; | |
| background: rgba(0,0,0,0.025); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| font-family: var(--mono, ui-monospace, SFMono-Regular, monospace); | |
| font-size: 11.5px; | |
| line-height: 1.45; | |
| max-height: 220px; | |
| overflow: auto; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .compare-card-body.empty { | |
| font-style: italic; | |
| color: var(--ink-mute); | |
| padding: 8px 0; | |
| } | |
| .compare-card-footer { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 4px; | |
| padding-top: 4px; | |
| border-top: 1px dashed var(--border); | |
| } | |
| .compare-sql-details { | |
| margin-top: 8px; | |
| } | |
| .compare-sql-details summary { | |
| cursor: pointer; | |
| color: var(--ink-mute); | |
| font-size: 12px; | |
| padding: 4px 0; | |
| } | |
| .compare-sql-details[open] summary { | |
| margin-bottom: 6px; | |
| } | |