MetaMetaMeta / eval-dashboard.html
smlflg's picture
Initial public upload from Projekte/MetaMetaMeta
3bc7cb3 verified
Raw History Blame Contribute Delete
64.8 kB
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sidecar-NG Eval Dashboard β€” AgentArena</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #0f172a; --surface: #1e293b; --surface2: #263348; --border: #334155; --text: #e2e8f0; --text-muted:#94a3b8; --green: #22c55e; --red: #ef4444; --blue: #3b82f6; --yellow: #eab308; --purple: #a855f7; --cyan: #06b6d4; --orange: #f97316; --radius: 8px; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.6; min-height: 100vh; } /* ── HERO ─────────────────────────────────────── */ .hero { background: linear-gradient(135deg, #0f172a 0%, #1a2744 50%, #0f172a 100%); border-bottom: 1px solid var(--border); padding: 56px 24px 48px; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.08) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(34,197,94,0.06) 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, rgba(168,85,247,0.05) 0%, transparent 40%); pointer-events: none; } .hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; } .hero h1 { font-size: clamp(28px, 5vw, 52px); font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(135deg, #e2e8f0 30%, #94a3b8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 12px; } .hero-subtitle { font-size: clamp(14px, 2vw, 18px); color: var(--text-muted); max-width: 600px; margin: 0 auto 28px; } .badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; border: 1px solid; } .badge-blue { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.4); color: #93c5fd; } .badge-green { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.4); color: #86efac; } .badge-purple { background: rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.4); color: #d8b4fe; } .badge-yellow { background: rgba(234,179,8,0.12); border-color: rgba(234,179,8,0.4); color: #fde047; } /* ── LAYOUT ───────────────────────────────────── */ .container { max-width: 1400px; margin: 0 auto; padding: 40px 24px 80px; } .section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } @media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } } .span-2 { grid-column: span 2; } .span-full { grid-column: 1 / -1; } /* ── CARD ─────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.35); transition: border-color 0.2s; } .card:hover { border-color: #475569; } .card-title { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; } .card-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; font-style: italic; } .chart-container { width: 100%; height: 320px; } .chart-tall { height: 380px; } .chart-xtall { height: 440px; } /* ── KEY INSIGHT CARDS ────────────────────────── */ .insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; } @media (max-width: 800px) { .insight-grid { grid-template-columns: 1fr; } } .insight-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.35); position: relative; overflow: hidden; } .insight-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .insight-card.green::before { background: linear-gradient(90deg, var(--green), #16a34a); } .insight-card.red::before { background: linear-gradient(90deg, var(--red), #dc2626); } .insight-card.blue::before { background: linear-gradient(90deg, var(--blue), #2563eb); } .insight-card.yellow::before { background: linear-gradient(90deg, var(--yellow), #ca8a04); } .insight-card.purple::before { background: linear-gradient(90deg, var(--purple), #9333ea); } .insight-card.orange::before { background: linear-gradient(90deg, var(--orange), #ea580c); } .insight-number { font-size: clamp(36px, 4vw, 52px); font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 8px; } .insight-card.green .insight-number { color: var(--green); } .insight-card.red .insight-number { color: var(--red); } .insight-card.blue .insight-number { color: var(--blue); } .insight-card.yellow .insight-number { color: var(--yellow); } .insight-card.purple .insight-number { color: var(--purple); } .insight-card.orange .insight-number { color: var(--orange); } .insight-label { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .insight-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; } /* ── HEATMAP TABLE ────────────────────────────── */ .heatmap-banner { background: rgba(234,179,8,0.1); border: 1px solid rgba(234,179,8,0.3); border-radius: 6px; padding: 10px 16px; font-size: 13px; color: var(--yellow); font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } .heatmap-banner.green { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: var(--green); } .heatmap-banner.blue { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); color: var(--blue); } .heatmap-table { width: 100%; border-collapse: collapse; font-size: 14px; } .heatmap-table th { padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); } .heatmap-table td { padding: 12px 16px; border-bottom: 1px solid rgba(51,65,85,0.5); vertical-align: middle; } .heatmap-table tr:last-child td { border-bottom: none; } .heatmap-table tr:hover td { background: rgba(255,255,255,0.02); } .cell-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 6px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; } .cell-green { background: rgba(34,197,94,0.15); color: var(--green); border: 1px solid rgba(34,197,94,0.3); } .cell-red { background: rgba(239,68,68,0.15); color: var(--red); border: 1px solid rgba(239,68,68,0.3); } .cell-yellow { background: rgba(234,179,8,0.15); color: var(--yellow); border: 1px solid rgba(234,179,8,0.3); } .cell-blue { background: rgba(59,130,246,0.15); color: var(--blue); border: 1px solid rgba(59,130,246,0.3); } .scenario-name { font-weight: 600; color: var(--text); font-size: 13px; } .scenario-code { font-family: 'Consolas', 'Monaco', monospace; font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* ── COST TABLE ───────────────────────────────── */ .cost-table { width: 100%; border-collapse: collapse; font-size: 14px; } .cost-table th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); } .cost-table td { padding: 11px 14px; border-bottom: 1px solid rgba(51,65,85,0.5); vertical-align: middle; } .cost-table tr:last-child td { border-bottom: none; } .cost-table tr:hover td { background: rgba(255,255,255,0.02); } .mono { font-family: 'Consolas', 'Monaco', monospace; font-variant-numeric: tabular-nums; } .tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; } .tag-green { background: rgba(34,197,94,0.15); color: var(--green); } .tag-red { background: rgba(239,68,68,0.15); color: var(--red); } .tag-blue { background: rgba(59,130,246,0.15); color: var(--blue); } .tag-yellow { background: rgba(234,179,8,0.15); color: var(--yellow); } .tag-purple { background: rgba(168,85,247,0.15); color: var(--purple); } .tag-orange { background: rgba(249,115,22,0.15); color: var(--orange); } .total-row td { font-weight: 700; color: var(--text); background: rgba(255,255,255,0.03); border-top: 1px solid var(--border); } /* ── LAWS SECTION ─────────────────────────────── */ .laws-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 40px; } @media (max-width: 1100px) { .laws-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .laws-grid { grid-template-columns: 1fr; } } .law-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 18px; box-shadow: 0 4px 24px rgba(0,0,0,0.35); position: relative; overflow: hidden; } .law-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; } .law-card.l1::before { background: var(--green); } .law-card.l2::before { background: var(--red); } .law-card.l3::before { background: var(--blue); } .law-card.l4::before { background: var(--yellow); } .law-card.l5::before { background: var(--purple); } .law-number { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; } .law-card.l1 .law-number { color: var(--green); } .law-card.l2 .law-number { color: var(--red); } .law-card.l3 .law-number { color: var(--blue); } .law-card.l4 .law-number { color: var(--yellow); } .law-card.l5 .law-number { color: var(--purple); } .law-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.3; } .law-desc { font-size: 12px; color: var(--text-muted); line-height: 1.55; } .law-evidence { font-size: 11px; color: var(--text-muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-family: 'Consolas', monospace; } /* ── SPACER ───────────────────────────────────── */ .spacer { margin-bottom: 40px; } .spacer-sm { margin-bottom: 20px; } /* ── FOOTER ───────────────────────────────────── */ footer { border-top: 1px solid var(--border); padding: 28px 24px; text-align: center; color: var(--text-muted); font-size: 13px; } footer a { color: var(--blue); text-decoration: none; } footer a:hover { text-decoration: underline; } .footer-dots { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } .footer-sep { color: var(--border); } /* ── ANNOTATION DOT ───────────────────────────── */ .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; } .legend { display: flex; gap: 20px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-top: 12px; } .legend-item { display: flex; align-items: center; gap: 6px; } /* ── E7 HIGHLIGHT ─────────────────────────────── */ .sweet-spot-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.35); color: var(--green); margin-left: 8px; } </style> </head> <body> <!-- ═══════════════════════════════════════════════ HERO ════════════════════════════════════════════════ --> <header class="hero"> <div class="hero-eyebrow">AgentArena Β· Sidecar-NG Β· MetaMetaMeta</div> <h1>Sidecar-NG Eval Dashboard</h1> <p class="hero-subtitle">Empirischer Beweis: Kontext-Injection verΓ€ndert AI-Verhalten β€” messbar, reproduzierbar, gΓΌnstig.</p> <div class="badges"> <span class="badge badge-blue">&#9632; 84 Runs</span> <span class="badge badge-green">&#10003; 7 Experimente</span> <span class="badge badge-purple">&#9671; Sonnet 4.6</span> <span class="badge badge-yellow">&#128197; 2026-03-19</span> </div> </header> <div class="container"> <!-- ── KEY INSIGHTS ───────────────────────────── --> <div class="section-title">Key Insights</div> <div class="insight-grid spacer"> <div class="insight-card green"> <div class="insight-number">0% β†’ 100%</div> <div class="insight-label">Injection macht den Unterschied</div> <div class="insight-desc">Ohne additionalContext: 0 von 3 Tests bestanden. Mit Hook-Injection: 3 von 3. Kein Tuning, keine neuen Modelle β€” nur Kontext.</div> </div> <div class="insight-card red"> <div class="insight-number">Effort = Null</div> <div class="insight-label">Mehr Reasoning hilft nicht</div> <div class="insight-desc">Low, Medium, High Effort β€” alle identisch bei 0% Pass-Rate. Ohne korrekten Kontext bleibt das Modell taub fΓΌr Constraints.</div> </div> <div class="insight-card blue"> <div class="insight-number">3.5x</div> <div class="insight-label">GΓΌnstiger durch Injection</div> <div class="insight-desc">Baseline: $0.074/Run β€” Hook+Priority: $0.024/Run. Weniger Tokens, kΓΌrzere Antworten, korrektes Verhalten: Injection ist effizienter.</div> </div> <div class="insight-card yellow"> <div class="insight-number">Lang=Neutral</div> <div class="insight-label">Sprache ist egal (E4)</div> <div class="insight-desc">DE und EN liefern identische Ergebnisse: 0/3 ohne Injection, 3/3 mit Injection. Sprache ist kein Faktor.</div> </div> <div class="insight-card orange"> <div class="insight-number">Full &gt; Mini</div> <div class="insight-label">Langer CLAUDE.md verschlechtert (E5)</div> <div class="insight-desc">Minimales CLAUDE.md: 3/3 mit Injection. Volles CLAUDE.md (200 Zeilen): nur 1/3. Context Overload ist real.</div> </div> <div class="insight-card purple"> <div class="insight-number">$0.035</div> <div class="insight-label">Cheapest Sweet Spot (E7)</div> <div class="insight-desc">Minimal-Single-Rule: 3/3 bei $0.035/Run. Broad Rules: 0/3. GranularitΓ€t der Injection ist der eigentliche Game Changer.</div> </div> </div> <!-- ── E2: GROUPED BAR CHART ──────────────────── --> <div class="section-title">E2 β€” additionalContext Wirksamkeit (voiceLanguage Bug)</div> <div class="grid-2 spacer"> <div class="card"> <div class="card-title">Pass-Rate nach Agent-Gruppe</div> <div id="e2-passrate" class="chart-container"></div> <div class="card-note">A = Baseline Β· B = Hook-Only Β· C = Hook+Priority</div> </div> <div class="card"> <div class="card-title">Avg Cost &amp; Token Output pro Gruppe</div> <div id="e2-cost" class="chart-container"></div> <div class="card-note">Costs in USD Β· Token Output (tok_out) auf sekundΓ€rer Achse</div> </div> </div> <!-- ── E2b: EFFORT CHART ───────────────────────── --> <div class="section-title">E2b β€” Effort-Level Impact</div> <div class="grid-2 spacer"> <div class="card"> <div class="card-title">Pass-Rate: Effort vs. Injection</div> <div id="e2b-passrate" class="chart-container"></div> <div class="card-note">Alle Effort-Levels (ohne Hook) identisch schlecht β€” Injection allein reicht</div> </div> <div class="card"> <div class="card-title">Cost &amp; Token Vergleich E2b</div> <div id="e2b-cost" class="chart-container"></div> <div class="card-note">Low+Hook ist sowohl billiger als auch das einzige mit 100% Pass-Rate</div> </div> </div> <!-- ── E3: HEATMAP ────────────────────────────── --> <div class="section-title">E3 β€” Sidecar Compliance Benchmark (4 Szenarien)</div> <div class="card spacer"> <div class="heatmap-banner"> &#9888;&#65039; Ergebnis: Tasks zu leicht β€” Sonnet 4.6 besteht alle Szenarien ohne Hilfe. Kein messbarer Injection-Effekt. </div> <table class="heatmap-table"> <thead> <tr> <th>Szenario</th> <th>Beschreibung</th> <th>Baseline (3 Runs)</th> <th>Injected (3 Runs)</th> <th>Avg Cost Baseline</th> <th>Avg Cost Injected</th> <th>Delta</th> </tr> </thead> <tbody> <tr> <td> <div class="scenario-name">Phantom Import</div> <div class="scenario-code">E3a</div> </td> <td style="color:var(--text-muted);font-size:13px;">Erkennt ungΓΌltige Imports</td> <td><span class="cell-pill cell-green">&#10003; 3/3</span></td> <td><span class="cell-pill cell-green">&#10003; 3/3</span></td> <td class="mono" style="color:var(--text-muted);">$0.045</td> <td class="mono" style="color:var(--text-muted);">$0.046</td> <td style="color:var(--text-muted);font-size:12px;">+$0.001</td> </tr> <tr> <td> <div class="scenario-name">Scope Creep</div> <div class="scenario-code">E3b</div> </td> <td style="color:var(--text-muted);font-size:13px;">Überschreitet Aufgabenscope nicht</td> <td><span class="cell-pill cell-green">&#10003; 3/3</span></td> <td><span class="cell-pill cell-green">&#10003; 3/3</span></td> <td class="mono" style="color:var(--text-muted);">$0.049</td> <td class="mono" style="color:var(--text-muted);">$0.057</td> <td style="color:var(--red);font-size:12px;">+$0.008</td> </tr> <tr> <td> <div class="scenario-name">Ambiguous Config</div> <div class="scenario-code">E3c</div> </td> <td style="color:var(--text-muted);font-size:13px;">Fragt bei Unklarheiten nach</td> <td><span class="cell-pill cell-green">&#10003; 3/3</span></td> <td><span class="cell-pill cell-green">&#10003; 3/3</span></td> <td class="mono" style="color:var(--text-muted);">$0.063</td> <td class="mono" style="color:var(--text-muted);">$0.044</td> <td style="color:var(--green);font-size:12px;">-$0.019</td> </tr> <tr> <td> <div class="scenario-name">Review Mode</div> <div class="scenario-code">E3d</div> </td> <td style="color:var(--text-muted);font-size:13px;">HΓ€lt Review-Only-Constraints ein</td> <td><span class="cell-pill cell-green">&#10003; 3/3</span></td> <td><span class="cell-pill cell-green">&#10003; 3/3</span></td> <td class="mono" style="color:var(--text-muted);">$0.077</td> <td class="mono" style="color:var(--text-muted);">$0.050 est</td> <td style="color:var(--green);font-size:12px;">-$0.027</td> </tr> </tbody> </table> <div class="legend" style="margin-top:16px;"> <span class="legend-item"><span class="cell-pill cell-green" style="padding:2px 8px;font-size:11px;">3/3</span> Alle Tests bestanden</span> <span class="legend-item"><span class="cell-pill cell-yellow" style="padding:2px 8px;font-size:11px;">1-2/3</span> Teilweise bestanden</span> <span class="legend-item"><span class="cell-pill cell-red" style="padding:2px 8px;font-size:11px;">0/3</span> Alle Tests fehlgeschlagen</span> </div> </div> <!-- ── E4: PROMPT LANGUAGE ────────────────────── --> <div class="section-title">E4 β€” Prompt Language: DE vs EN</div> <div class="grid-2 spacer"> <div class="card"> <div class="card-title">Pass-Rate: DE vs EN β€” Baseline &amp; Injected</div> <div id="e4-passrate" class="chart-container"></div> <div class="card-note">Verdict: Sprache ist irrelevant. Beide 0 β†’ 3 mit Injection.</div> </div> <div class="card"> <div class="card-title">Avg Cost: DE vs EN</div> <div id="e4-cost" class="chart-container"></div> <div class="card-note">EN Baseline leicht teurer ($0.17 vs $0.14). Injection macht beide gΓΌnstig ($0.04–$0.05).</div> </div> </div> <!-- ── E5: CLAUDE.md LENGTH ───────────────────── --> <div class="section-title">E5 β€” CLAUDE.md Length: Minimal vs Full</div> <div class="grid-2 spacer"> <div class="card"> <div class="card-title">2Γ—2 Heatmap: Config Γ— Injection</div> <div id="e5-heatmap" class="chart-container"></div> <div class="card-note">Rot = 0/3 Β· Gelb = 1/3 Β· GrΓΌn = 3/3. Full CLAUDE.md verschlechtert Injection-Ergebnis.</div> </div> <div class="card"> <div class="card-title">Context Overload: Warum Full schlechter ist</div> <div style="padding: 16px 0;"> <div class="heatmap-banner" style="margin-bottom:16px;"> &#9888;&#65039; Full CLAUDE.md (200 Zeilen): Injection geht in der Masse unter β€” nur 1/3 bestanden. </div> <table class="heatmap-table"> <thead> <tr> <th>Config</th> <th>Kein Injection</th> <th>Mit Injection</th> <th>Delta</th> </tr> </thead> <tbody> <tr> <td><div class="scenario-name">Minimal (5 Zeilen)</div></td> <td><span class="cell-pill cell-red">0/3</span></td> <td><span class="cell-pill cell-green">&#10003; 3/3</span></td> <td style="color:var(--green);font-weight:700;">+3</td> </tr> <tr> <td><div class="scenario-name">Full (200 Zeilen)</div></td> <td><span class="cell-pill cell-red">0/3</span></td> <td><span class="cell-pill cell-yellow">&#9651; 1/3</span></td> <td style="color:var(--yellow);font-weight:700;">+1</td> </tr> </tbody> </table> <div class="legend" style="margin-top:16px;"> <span class="legend-item"><span class="dot" style="background:var(--green)"></span> Ideal: kurzer Context + Injection</span> <span class="legend-item"><span class="dot" style="background:var(--yellow)"></span> Suboptimal: Context Overload</span> </div> </div> </div> </div> <!-- ── E7: INJECTION GRANULARITY ─────────────── --> <div class="section-title">E7 β€” Injection Granularity (THE Game Changer)</div> <div class="card spacer"> <div class="heatmap-banner green"> &#10003; Ergebnis: Broad = nutzlos. Specific = perfekt. Minimal = gΓΌnstigster Sweet Spot bei gleicher Wirkung. </div> <div id="e7-chart" class="chart-container chart-xtall"></div> <div class="legend" style="margin-top:12px;"> <span class="legend-item"><span class="dot" style="background:var(--red)"></span> 0/3 β€” fehlgeschlagen</span> <span class="legend-item"><span class="dot" style="background:var(--green)"></span> 3/3 β€” bestanden</span> <span class="legend-item"><span class="dot" style="background:var(--cyan)"></span> Avg Cost (USD)</span> <span class="sweet-spot-badge">&#9733; Sweet Spot: Minimal-Rule $0.035</span> </div> </div> <!-- ── COST vs PERFORMANCE SCATTER ───────────── --> <div class="section-title">Cost vs. Performance β€” Alle Agents (E2 + E2b + E3)</div> <div class="card spacer"> <div class="card-title">Scatter: Avg Cost (USD) vs. Pass-Rate</div> <div id="scatter" class="chart-container chart-tall"></div> <div class="legend"> <span class="legend-item"><span class="dot" style="background:var(--green)"></span> Mit Injection</span> <span class="legend-item"><span class="dot" style="background:var(--red)"></span> Ohne Injection</span> <span class="legend-item"><span class="dot" style="background:var(--blue)"></span> E3 Baseline (alle 3/3)</span> </div> </div> <!-- ── TOKEN EFFICIENCY ───────────────────────── --> <div class="section-title">Token-Effizienz β€” Output Tokens pro Agent-Gruppe</div> <div class="grid-2 spacer"> <div class="card"> <div class="card-title">Output Tokens (tok_out) β€” E2 + E2b</div> <div id="tokens" class="chart-container"></div> <div class="card-note">Injection-Runs generieren deutlich weniger Output β€” prΓ€zisere Antworten</div> </div> <div class="card"> <div class="card-title">Effizienz-Index: Pass-Rate / Cost</div> <div id="efficiency" class="chart-container"></div> <div class="card-note">Je hΓΆher desto besser β€” Hook-Agents dominieren klar</div> </div> </div> <!-- ── GESAMTKOSTEN TABELLE ───────────────────── --> <div class="section-title">Gesamtkosten-Zusammenfassung aller Experimente</div> <div class="card spacer"> <table class="cost-table"> <thead> <tr> <th>Experiment</th> <th>Beschreibung</th> <th>Runs</th> <th>Total Cost</th> <th>Cost/Run</th> <th>Pass-Rate</th> <th>Key Finding</th> </tr> </thead> <tbody> <tr> <td class="mono" style="color:var(--text-muted);font-size:12px;">E2-A</td> <td style="font-size:13px;">Baseline (kein Hook)</td> <td class="mono">3</td> <td class="mono">$0.222</td> <td class="mono">$0.074</td> <td><span class="tag tag-red">0%</span></td> <td style="font-size:12px;color:var(--text-muted);">Ohne Kontext kein Erfolg</td> </tr> <tr> <td class="mono" style="color:var(--text-muted);font-size:12px;">E2-B</td> <td style="font-size:13px;">Hook-Only</td> <td class="mono">3</td> <td class="mono">$0.063</td> <td class="mono">$0.021</td> <td><span class="tag tag-green">100%</span></td> <td style="font-size:12px;color:var(--text-muted);">Hook reicht β€” und ist gΓΌnstiger</td> </tr> <tr> <td class="mono" style="color:var(--text-muted);font-size:12px;">E2-C</td> <td style="font-size:13px;">Hook + Priority</td> <td class="mono">3</td> <td class="mono">$0.072</td> <td class="mono">$0.024</td> <td><span class="tag tag-green">100%</span></td> <td style="font-size:12px;color:var(--text-muted);">Priority-Hint kein Mehrwert</td> </tr> <tr> <td class="mono" style="color:var(--text-muted);font-size:12px;">E2b-Low</td> <td style="font-size:13px;">Effort Low (kein Hook)</td> <td class="mono">3</td> <td class="mono">$0.510</td> <td class="mono">$0.170</td> <td><span class="tag tag-red">0%</span></td> <td style="font-size:12px;color:var(--text-muted);">Teuerste Gruppe, 0% Erfolg</td> </tr> <tr> <td class="mono" style="color:var(--text-muted);font-size:12px;">E2b-Med</td> <td style="font-size:13px;">Effort Medium (kein Hook)</td> <td class="mono">3</td> <td class="mono">$0.402</td> <td class="mono">$0.134</td> <td><span class="tag tag-red">0%</span></td> <td style="font-size:12px;color:var(--text-muted);">Mehr Reasoning = kein Unterschied</td> </tr> <tr> <td class="mono" style="color:var(--text-muted);font-size:12px;">E2b-High</td> <td style="font-size:13px;">Effort High (kein Hook)</td> <td class="mono">3</td> <td class="mono">$0.423</td> <td class="mono">$0.141</td> <td><span class="tag tag-red">0%</span></td> <td style="font-size:12px;color:var(--text-muted);">HΓΆchste Tokens, 0% Erfolg</td> </tr> <tr> <td class="mono" style="color:var(--text-muted);font-size:12px;">E2b-Hook</td> <td style="font-size:13px;">Low + Hook Injection</td> <td class="mono">3</td> <td class="mono">$0.123</td> <td class="mono">$0.041</td> <td><span class="tag tag-green">100%</span></td> <td style="font-size:12px;color:var(--text-muted);">Sweet Spot: gΓΌnstig + 100%</td> </tr> <tr> <td class="mono" style="color:var(--text-muted);font-size:12px;">E3 (a-d)</td> <td style="font-size:13px;">Compliance Benchmark Γ— 2</td> <td class="mono">24</td> <td class="mono">~$1.42</td> <td class="mono">~$0.059</td> <td><span class="tag tag-blue">100%</span></td> <td style="font-size:12px;color:var(--text-muted);">Sonnet zu gut β€” Tasks zu leicht</td> </tr> <tr> <td class="mono" style="color:var(--text-muted);font-size:12px;">E4-DE</td> <td style="font-size:13px;">Prompt Language: Deutsch</td> <td class="mono">6</td> <td class="mono">~$0.57</td> <td class="mono">~$0.095</td> <td><span class="tag tag-yellow">Mixed</span></td> <td style="font-size:12px;color:var(--text-muted);">0/3 Baseline β†’ 3/3 injected</td> </tr> <tr> <td class="mono" style="color:var(--text-muted);font-size:12px;">E4-EN</td> <td style="font-size:13px;">Prompt Language: Englisch</td> <td class="mono">6</td> <td class="mono">~$0.63</td> <td class="mono">~$0.105</td> <td><span class="tag tag-yellow">Mixed</span></td> <td style="font-size:12px;color:var(--text-muted);">Sprache ist irrelevant</td> </tr> <tr> <td class="mono" style="color:var(--text-muted);font-size:12px;">E5-Min</td> <td style="font-size:13px;">Minimal CLAUDE.md (5 Zeilen)</td> <td class="mono">6</td> <td class="mono">~$0.30</td> <td class="mono">~$0.050</td> <td><span class="tag tag-yellow">Mixed</span></td> <td style="font-size:12px;color:var(--text-muted);">0/3 β†’ 3/3 mit Injection</td> </tr> <tr> <td class="mono" style="color:var(--text-muted);font-size:12px;">E5-Full</td> <td style="font-size:13px;">Volles CLAUDE.md (200 Zeilen)</td> <td class="mono">6</td> <td class="mono">~$0.36</td> <td class="mono">~$0.060</td> <td><span class="tag tag-red">Mixed</span></td> <td style="font-size:12px;color:var(--text-muted);">Context Overload: 1/3 trotz Injection</td> </tr> <tr> <td class="mono" style="color:var(--text-muted);font-size:12px;">E7</td> <td style="font-size:13px;">Injection Granularity (5 Strategien)</td> <td class="mono">15</td> <td class="mono">~$0.73</td> <td class="mono">~$0.049</td> <td><span class="tag tag-purple">Mixed</span></td> <td style="font-size:12px;color:var(--text-muted);">Minimal-Rule = Optimum ($0.035)</td> </tr> <tr class="total-row"> <td colspan="2" style="font-size:13px;">Gesamt (alle 7 Experimente)</td> <td class="mono">84</td> <td class="mono">~$5.36</td> <td class="mono">~$0.064</td> <td><span class="tag tag-blue">Mixed</span></td> <td style="font-size:12px;color:var(--green);">Injection + GranularitΓ€t: klarer Sieger</td> </tr> </tbody> </table> </div> <!-- ── 5 EMPIRICAL LAWS ───────────────────────── --> <div class="section-title">5 Empirische Gesetze β€” Aus 84 Runs destilliert</div> <div class="laws-grid spacer"> <div class="law-card l1"> <div class="law-number">Gesetz 1</div> <div class="law-title">Kontext schlΓ€gt Reasoning</div> <div class="law-desc">Kein Effort-Level, kein Modell-Upgrade ersetzt den richtigen Kontext zur richtigen Zeit. Ohne Injection: 0% β€” egal wie viel Reasoning.</div> <div class="law-evidence">E2: 0% (all efforts) vs 100% (hook) Β· E2b: Low=Med=High=0%</div> </div> <div class="law-card l2"> <div class="law-number">Gesetz 2</div> <div class="law-title">Sprache ist kein Faktor</div> <div class="law-desc">DE und EN liefern identische Pass-Raten. Injection wirkt sprachunabhΓ€ngig. Lokalisierung der Prompts hat keinen messbaren Effekt auf Compliance.</div> <div class="law-evidence">E4: DE 0β†’3, EN 0β†’3 Β· Cost-Delta &lt;$0.01</div> </div> <div class="law-card l3"> <div class="law-number">Gesetz 3</div> <div class="law-title">Context Overload ist real</div> <div class="law-desc">Ein volles CLAUDE.md (200 Zeilen) verschlechtert die Injection-Wirkung von 3/3 auf 1/3. Mehr Kontext ist nicht besser β€” PrΓ€zision schlΓ€gt VollstΓ€ndigkeit.</div> <div class="law-evidence">E5: Minimal=3/3, Full=1/3 mit gleicher Injection</div> </div> <div class="law-card l4"> <div class="law-number">Gesetz 4</div> <div class="law-title">GranularitΓ€t entscheidet</div> <div class="law-desc">Breite Regeln ("sei vorsichtig") sind nutzlos. Spezifische Einzelregeln treffen mit 100% PrΓ€zision. Der Unterschied zwischen 0/3 und 3/3 ist die Regel-GranularitΓ€t, nicht die Menge.</div> <div class="law-evidence">E7: Broad=0/3, Specific-3=3/3, Minimal-1=3/3</div> </div> <div class="law-card l5"> <div class="law-number">Gesetz 5</div> <div class="law-title">Minimal ist optimal</div> <div class="law-desc">Die billigste, prΓ€ziseste Strategie ist eine einzelne, spezifische Regel. $0.035/Run, 3/3 Pass-Rate. Weniger ist mehr β€” wenn es das Richtige ist.</div> <div class="law-evidence">E7: Minimal-Rule $0.035/run = Sweet Spot aller 84 Runs</div> </div> </div> </div><!-- /container --> <footer> <div class="footer-dots"> <span>Built with <strong>AgentArena</strong></span> <span class="footer-sep">Β·</span> <span><strong>Sidecar-NG</strong></span> <span class="footer-sep">Β·</span> <span><strong>MetaMetaMeta</strong></span> <span class="footer-sep">Β·</span> <span>2026-03-19</span> <span class="footer-sep">Β·</span> <span>Model: claude-sonnet-4-6</span> </div> </footer> <!-- ═══════════════════════════════════════════════ ECHARTS INIT ════════════════════════════════════════════════ --> <script> const COLORS = { green: '#22c55e', red: '#ef4444', blue: '#3b82f6', yellow: '#eab308', purple: '#a855f7', cyan: '#06b6d4', orange: '#f97316', muted: '#94a3b8', surface:'#1e293b', border: '#334155', text: '#e2e8f0', }; const BASE_THEME = { backgroundColor: 'transparent', textStyle: { color: COLORS.text, fontFamily: "'Segoe UI', system-ui, sans-serif" }, }; function initChart(id) { const el = document.getElementById(id); return echarts.init(el, null, { renderer: 'canvas' }); } /* Gemeinsame Axis-Defaults */ function axisDefaults(name, opts = {}) { return { name, nameTextStyle: { color: COLORS.muted, fontSize: 11 }, axisLine: { lineStyle: { color: COLORS.border } }, axisTick: { lineStyle: { color: COLORS.border } }, axisLabel: { color: COLORS.muted, fontSize: 12 }, splitLine: { lineStyle: { color: COLORS.border, type: 'dashed', opacity: 0.5 } }, ...opts }; } /* ── E2: PASS-RATE BAR ──────────────────────────── */ (function() { const chart = initChart('e2-passrate'); chart.setOption({ ...BASE_THEME, tooltip: { trigger: 'axis', backgroundColor: '#1e293b', borderColor: COLORS.border, textStyle: { color: COLORS.text }, formatter(params) { const p = params[0]; return `<b>${p.name}</b><br/>Pass-Rate: <b>${p.value * 100}%</b>`; } }, grid: { left: 40, right: 20, top: 20, bottom: 50, containLabel: true }, xAxis: { type: 'category', data: ['A β€” Baseline', 'B β€” Hook-Only', 'C β€” Hook+Priority'], ...axisDefaults(''), }, yAxis: { type: 'value', min: 0, max: 1, ...axisDefaults('Pass-Rate'), axisLabel: { color: COLORS.muted, formatter: v => (v * 100) + '%' }, }, series: [{ type: 'bar', data: [ { value: 0, itemStyle: { color: COLORS.red, borderRadius: [6,6,0,0] } }, { value: 1, itemStyle: { color: COLORS.green, borderRadius: [6,6,0,0] } }, { value: 1, itemStyle: { color: COLORS.green, borderRadius: [6,6,0,0] } }, ], barWidth: '44%', label: { show: true, position: 'top', color: COLORS.text, fontWeight: 700, formatter: p => p.value === 0 ? '0 / 3' : '3 / 3', }, emphasis: { itemStyle: { opacity: 0.85 } }, }], }); window.addEventListener('resize', () => chart.resize()); })(); /* ── E2: COST + TOKENS ──────────────────────────── */ (function() { const chart = initChart('e2-cost'); chart.setOption({ ...BASE_THEME, tooltip: { trigger: 'axis', backgroundColor: '#1e293b', borderColor: COLORS.border, textStyle: { color: COLORS.text }, axisPointer: { type: 'cross', label: { backgroundColor: '#334155' } }, }, legend: { top: 0, textStyle: { color: COLORS.muted, fontSize: 11 }, data: ['Avg Cost (USD)', 'Token Output'], }, grid: { left: 20, right: 60, top: 36, bottom: 50, containLabel: true }, xAxis: { type: 'category', data: ['A β€” Baseline', 'B β€” Hook-Only', 'C β€” Hook+Priority'], ...axisDefaults(''), }, yAxis: [ { type: 'value', name: 'Cost (USD)', ...axisDefaults('Cost (USD)'), axisLabel: { color: COLORS.muted, formatter: v => '$' + v.toFixed(3) }, }, { type: 'value', name: 'Tokens', position: 'right', ...axisDefaults('Tokens'), splitLine: { show: false }, }, ], series: [ { name: 'Avg Cost (USD)', type: 'bar', yAxisIndex: 0, data: [ { value: 0.074, itemStyle: { color: COLORS.red, borderRadius: [6,6,0,0] } }, { value: 0.021, itemStyle: { color: COLORS.green, borderRadius: [6,6,0,0] } }, { value: 0.024, itemStyle: { color: COLORS.green, borderRadius: [6,6,0,0] } }, ], barWidth: '30%', label: { show: true, position: 'top', color: COLORS.text, fontWeight: 700, formatter: p => '$' + p.value.toFixed(3) }, }, { name: 'Token Output', type: 'line', yAxisIndex: 1, data: [569, 410, 388], symbol: 'circle', symbolSize: 8, lineStyle: { color: COLORS.cyan, width: 2 }, itemStyle: { color: COLORS.cyan }, label: { show: true, position: 'top', color: COLORS.cyan, fontSize: 11, formatter: p => p.value + ' tok' }, }, ], }); window.addEventListener('resize', () => chart.resize()); })(); /* ── E2b: PASS-RATE ─────────────────────────────── */ (function() { const chart = initChart('e2b-passrate'); chart.setOption({ ...BASE_THEME, tooltip: { trigger: 'axis', backgroundColor: '#1e293b', borderColor: COLORS.border, textStyle: { color: COLORS.text }, formatter(params) { const p = params[0]; return `<b>${p.name}</b><br/>Pass-Rate: <b>${p.value * 100}%</b>`; } }, grid: { left: 40, right: 20, top: 20, bottom: 50, containLabel: true }, xAxis: { type: 'category', data: ['Effort Low', 'Effort Medium', 'Effort High', 'Low + Hook'], ...axisDefaults(''), axisLabel: { color: COLORS.muted, fontSize: 11, interval: 0 }, }, yAxis: { type: 'value', min: 0, max: 1, ...axisDefaults('Pass-Rate'), axisLabel: { color: COLORS.muted, formatter: v => (v * 100) + '%' }, }, series: [{ type: 'bar', data: [ { value: 0, itemStyle: { color: COLORS.red, borderRadius: [6,6,0,0] } }, { value: 0, itemStyle: { color: COLORS.red, borderRadius: [6,6,0,0] } }, { value: 0, itemStyle: { color: COLORS.red, borderRadius: [6,6,0,0] } }, { value: 1, itemStyle: { color: COLORS.green, borderRadius: [6,6,0,0] } }, ], barWidth: '40%', label: { show: true, position: 'top', color: COLORS.text, fontWeight: 700, formatter: p => p.value === 0 ? '0 / 3' : '3 / 3', }, }], markLine: {}, }); window.addEventListener('resize', () => chart.resize()); })(); /* ── E2b: COST + TOKENS ─────────────────────────── */ (function() { const chart = initChart('e2b-cost'); chart.setOption({ ...BASE_THEME, tooltip: { trigger: 'axis', backgroundColor: '#1e293b', borderColor: COLORS.border, textStyle: { color: COLORS.text }, }, legend: { top: 0, textStyle: { color: COLORS.muted, fontSize: 11 }, data: ['Avg Cost (USD)', 'Token Output'], }, grid: { left: 20, right: 60, top: 36, bottom: 50, containLabel: true }, xAxis: { type: 'category', data: ['Effort Low', 'Effort Medium', 'Effort High', 'Low + Hook'], ...axisDefaults(''), axisLabel: { color: COLORS.muted, fontSize: 11, interval: 0 }, }, yAxis: [ { type: 'value', name: 'Cost (USD)', ...axisDefaults('Cost (USD)'), axisLabel: { color: COLORS.muted, formatter: v => '$' + v.toFixed(3) }, }, { type: 'value', name: 'Tokens', position: 'right', ...axisDefaults('Tokens'), splitLine: { show: false }, }, ], series: [ { name: 'Avg Cost (USD)', type: 'bar', yAxisIndex: 0, data: [ { value: 0.170, itemStyle: { color: COLORS.red, borderRadius: [6,6,0,0] } }, { value: 0.134, itemStyle: { color: COLORS.red, borderRadius: [6,6,0,0] } }, { value: 0.141, itemStyle: { color: COLORS.yellow, borderRadius: [6,6,0,0] } }, { value: 0.041, itemStyle: { color: COLORS.green, borderRadius: [6,6,0,0] } }, ], barWidth: '35%', label: { show: true, position: 'top', color: COLORS.text, fontWeight: 700, fontSize: 11, formatter: p => '$' + p.value.toFixed(3) }, }, { name: 'Token Output', type: 'line', yAxisIndex: 1, data: [531, 542, 621, 290], symbol: 'circle', symbolSize: 8, lineStyle: { color: COLORS.cyan, width: 2 }, itemStyle: { color: COLORS.cyan }, label: { show: true, position: 'top', color: COLORS.cyan, fontSize: 11, formatter: p => p.value + ' tok' }, }, ], }); window.addEventListener('resize', () => chart.resize()); })(); /* ── E4: PASS-RATE GROUPED BAR ──────────────────── */ (function() { const chart = initChart('e4-passrate'); chart.setOption({ ...BASE_THEME, tooltip: { trigger: 'axis', backgroundColor: '#1e293b', borderColor: COLORS.border, textStyle: { color: COLORS.text }, axisPointer: { type: 'shadow' }, }, legend: { top: 0, textStyle: { color: COLORS.muted, fontSize: 11 }, data: ['Baseline', 'Injected'], }, grid: { left: 40, right: 20, top: 36, bottom: 50, containLabel: true }, xAxis: { type: 'category', data: ['DE β€” Deutsch', 'EN β€” English'], ...axisDefaults(''), }, yAxis: { type: 'value', min: 0, max: 1, ...axisDefaults('Pass-Rate'), axisLabel: { color: COLORS.muted, formatter: v => (v * 100) + '%' }, }, series: [ { name: 'Baseline', type: 'bar', data: [ { value: 0, itemStyle: { color: COLORS.red, borderRadius: [6,6,0,0] } }, { value: 0, itemStyle: { color: COLORS.red, borderRadius: [6,6,0,0] } }, ], barWidth: '28%', label: { show: true, position: 'top', color: COLORS.text, fontWeight: 700, formatter: p => p.value === 0 ? '0/3' : '3/3' }, }, { name: 'Injected', type: 'bar', data: [ { value: 1, itemStyle: { color: COLORS.green, borderRadius: [6,6,0,0] } }, { value: 1, itemStyle: { color: COLORS.green, borderRadius: [6,6,0,0] } }, ], barWidth: '28%', label: { show: true, position: 'top', color: COLORS.text, fontWeight: 700, formatter: p => p.value === 0 ? '0/3' : '3/3' }, }, ], }); window.addEventListener('resize', () => chart.resize()); })(); /* ── E4: COST GROUPED BAR ───────────────────────── */ (function() { const chart = initChart('e4-cost'); chart.setOption({ ...BASE_THEME, tooltip: { trigger: 'axis', backgroundColor: '#1e293b', borderColor: COLORS.border, textStyle: { color: COLORS.text }, axisPointer: { type: 'shadow' }, }, legend: { top: 0, textStyle: { color: COLORS.muted, fontSize: 11 }, data: ['Baseline', 'Injected'], }, grid: { left: 20, right: 20, top: 36, bottom: 50, containLabel: true }, xAxis: { type: 'category', data: ['DE β€” Deutsch', 'EN β€” English'], ...axisDefaults(''), }, yAxis: { type: 'value', name: 'Avg Cost (USD)', min: 0, max: 0.22, ...axisDefaults('Avg Cost (USD)'), axisLabel: { color: COLORS.muted, formatter: v => '$' + v.toFixed(2) }, }, series: [ { name: 'Baseline', type: 'bar', data: [ { value: 0.14, itemStyle: { color: COLORS.red, borderRadius: [6,6,0,0] } }, { value: 0.17, itemStyle: { color: COLORS.red, borderRadius: [6,6,0,0] } }, ], barWidth: '28%', label: { show: true, position: 'top', color: COLORS.text, fontWeight: 700, fontSize: 12, formatter: p => '$' + p.value.toFixed(2) }, }, { name: 'Injected', type: 'bar', data: [ { value: 0.05, itemStyle: { color: COLORS.green, borderRadius: [6,6,0,0] } }, { value: 0.04, itemStyle: { color: COLORS.green, borderRadius: [6,6,0,0] } }, ], barWidth: '28%', label: { show: true, position: 'top', color: COLORS.text, fontWeight: 700, fontSize: 12, formatter: p => '$' + p.value.toFixed(2) }, }, ], }); window.addEventListener('resize', () => chart.resize()); })(); /* ── E5: 2x2 HEATMAP ────────────────────────────── */ (function() { const chart = initChart('e5-heatmap'); // Data: [xIndex, yIndex, value (pass count)] // x: 0=No Injection, 1=With Injection // y: 0=Full (200), 1=Minimal (5) β€” reversed so Minimal is on top const rawData = [ [0, 0, 0], // Full, No Injection: 0/3 [1, 0, 1], // Full, With Injection: 1/3 [0, 1, 0], // Minimal, No Injection: 0/3 [1, 1, 3], // Minimal, With Injection: 3/3 ]; const colorMap = { 0: COLORS.red, 1: COLORS.yellow, 2: COLORS.yellow, 3: COLORS.green }; const labelMap = { 0: '0 / 3\nFailed', 1: '1 / 3\nPartial', 3: '3 / 3\nPassed' }; chart.setOption({ ...BASE_THEME, tooltip: { trigger: 'item', backgroundColor: '#1e293b', borderColor: COLORS.border, textStyle: { color: COLORS.text }, formatter(p) { const colLabel = p.data[0] === 0 ? 'No Injection' : 'With Injection'; const rowLabel = p.data[1] === 0 ? 'Full CLAUDE.md' : 'Minimal CLAUDE.md'; return `<b>${rowLabel}</b> / <b>${colLabel}</b><br/>Pass-Rate: <b>${p.data[2]} / 3</b>`; }, }, grid: { left: 100, right: 20, top: 40, bottom: 60, containLabel: false }, xAxis: { type: 'category', data: ['Kein Injection', 'Mit Injection'], ...axisDefaults(''), axisLabel: { color: COLORS.text, fontSize: 13, fontWeight: 600 }, splitLine: { show: false }, }, yAxis: { type: 'category', data: ['Full (200 Zeilen)', 'Minimal (5 Zeilen)'], ...axisDefaults(''), axisLabel: { color: COLORS.text, fontSize: 12 }, splitLine: { show: false }, }, series: [{ type: 'heatmap', data: rawData, label: { show: true, formatter(p) { const v = p.data[2]; return v === 0 ? '0 / 3' : (v === 1 ? '1 / 3' : '3 / 3'); }, color: '#fff', fontWeight: 700, fontSize: 16, }, itemStyle: { borderWidth: 3, borderColor: '#0f172a', borderRadius: 6, }, emphasis: { itemStyle: { opacity: 0.85 }, }, }], visualMap: { min: 0, max: 3, show: false, inRange: { color: [COLORS.red, COLORS.yellow, COLORS.green], }, }, }); window.addEventListener('resize', () => chart.resize()); })(); /* ── E7: GRANULARITY HORIZONTAL DUAL BAR ───────── */ (function() { const chart = initChart('e7-chart'); const strategies = [ 'Baseline', 'Broad Rule', 'Specific 3 Rules (DE)', 'Minimal Single Rule', 'Specific 3 Rules (EN)', ]; const passRates = [0, 0, 1, 1, 1]; // fraction 0–1 const passCounts = [0, 0, 3, 3, 3]; const costs = [0.14, 0.04, 0.05, 0.035, 0.04]; const passColors = passRates.map((v, i) => { if (i === 3) return COLORS.green; // highlight sweet spot return v === 0 ? COLORS.red : COLORS.green; }); chart.setOption({ ...BASE_THEME, tooltip: { trigger: 'axis', backgroundColor: '#1e293b', borderColor: COLORS.border, textStyle: { color: COLORS.text }, axisPointer: { type: 'shadow' }, formatter(params) { const strategy = params[0].axisValue; const pass = params.find(p => p.seriesName === 'Pass-Rate'); const cost = params.find(p => p.seriesName === 'Avg Cost'); const idx = strategies.indexOf(strategy); return `<b>${strategy}</b><br/>Pass-Rate: <b>${passCounts[idx]} / 3</b><br/>Avg Cost: <b>$${costs[idx].toFixed(3)}</b>`; }, }, legend: { top: 0, textStyle: { color: COLORS.muted, fontSize: 11 }, data: ['Pass-Rate', 'Avg Cost'], }, grid: { left: 20, right: 80, top: 36, bottom: 10, containLabel: true }, yAxis: { type: 'category', data: strategies, ...axisDefaults(''), axisLabel: { color: COLORS.text, fontSize: 12 }, inverse: true, }, xAxis: [ { type: 'value', name: 'Pass-Rate', min: 0, max: 1, position: 'top', ...axisDefaults('Pass-Rate'), axisLabel: { color: COLORS.muted, formatter: v => (v * 100).toFixed(0) + '%' }, }, { type: 'value', name: 'Cost (USD)', min: 0, max: 0.20, position: 'bottom', ...axisDefaults('Cost (USD)'), axisLabel: { color: COLORS.muted, formatter: v => '$' + v.toFixed(3) }, splitLine: { show: false }, }, ], series: [ { name: 'Pass-Rate', type: 'bar', xAxisIndex: 0, data: passRates.map((v, i) => ({ value: v, itemStyle: { color: passColors[i], borderRadius: [0, 4, 4, 0], opacity: i === 3 ? 1 : 0.8, }, })), barWidth: '38%', label: { show: true, position: 'right', color: COLORS.text, fontWeight: 700, fontSize: 12, formatter: p => { const idx = p.dataIndex; return passCounts[idx] + '/3'; }, }, }, { name: 'Avg Cost', type: 'bar', xAxisIndex: 1, data: costs.map((v, i) => ({ value: v, itemStyle: { color: i === 3 ? COLORS.cyan : COLORS.muted, borderRadius: [0, 4, 4, 0], opacity: i === 3 ? 1 : 0.5, }, })), barWidth: '28%', barGap: '20%', label: { show: true, position: 'right', color: COLORS.cyan, fontSize: 11, formatter: p => '$' + p.value.toFixed(3), }, }, // Sweet spot annotation { type: 'effectScatter', xAxisIndex: 0, data: [{ value: [1.0, 'Minimal Single Rule'], name: 'Sweet Spot' }], symbolSize: 0, label: { show: false, }, z: 100, }, ], }); window.addEventListener('resize', () => chart.resize()); })(); /* ── SCATTER: COST vs PERFORMANCE ──────────────── */ (function() { const chart = initChart('scatter'); // [name, cost, passRate, color, symbolSize] const agents = [ // E2 ['E2-A Baseline', 0.074, 0.00, COLORS.red, 18], ['E2-B Hook-Only', 0.021, 1.00, COLORS.green, 18], ['E2-C Hook+Priority', 0.024, 1.00, COLORS.green, 18], // E2b ['E2b Effort Low', 0.170, 0.00, COLORS.red, 14], ['E2b Effort Medium', 0.134, 0.00, COLORS.red, 14], ['E2b Effort High', 0.141, 0.00, COLORS.red, 14], ['E2b Low+Hook', 0.041, 1.00, COLORS.green, 18], // E3 (alle 100%, blau) ['E3a Baseline', 0.045, 1.00, COLORS.blue, 12], ['E3a Injected', 0.046, 1.00, COLORS.blue, 12], ['E3b Baseline', 0.049, 1.00, COLORS.blue, 12], ['E3b Injected', 0.057, 1.00, COLORS.blue, 12], ['E3c Baseline', 0.063, 1.00, COLORS.blue, 12], ['E3c Injected', 0.044, 1.00, COLORS.blue, 12], ['E3d Baseline', 0.077, 1.00, COLORS.blue, 12], ['E3d Injected', 0.050, 1.00, COLORS.blue, 12], ]; const seriesData = agents.map(([name, x, y, color, size]) => ({ name, value: [x, y], itemStyle: { color, opacity: 0.88 }, symbolSize: size, })); chart.setOption({ ...BASE_THEME, tooltip: { trigger: 'item', backgroundColor: '#1e293b', borderColor: COLORS.border, textStyle: { color: COLORS.text }, formatter(p) { return `<b>${p.data.name}</b><br/>Cost: $${p.data.value[0].toFixed(3)}<br/>Pass-Rate: ${(p.data.value[1]*100).toFixed(0)}%`; }, }, grid: { left: 20, right: 20, top: 30, bottom: 50, containLabel: true }, xAxis: { type: 'value', name: 'Avg Cost (USD)', min: 0, max: 0.20, ...axisDefaults('Avg Cost (USD)'), axisLabel: { color: COLORS.muted, formatter: v => '$' + v.toFixed(3) }, }, yAxis: { type: 'value', name: 'Pass-Rate', min: -0.05, max: 1.1, ...axisDefaults('Pass-Rate'), axisLabel: { color: COLORS.muted, formatter: v => (v * 100).toFixed(0) + '%' }, }, series: [ { type: 'scatter', data: seriesData, emphasis: { scale: 1.3 }, }, // Annotation: Sweet Spot { type: 'effectScatter', data: [{ value: [0.031, 1.00], name: 'Sweet Spot' }], symbolSize: 24, itemStyle: { color: COLORS.green, opacity: 0.4 }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke', scale: 3, period: 4 }, label: { show: true, formatter: 'Sweet Spot', position: 'right', color: COLORS.green, fontWeight: 700, fontSize: 12, }, z: 100, }, // Annotation: Waste Zone { type: 'effectScatter', data: [{ value: [0.148, 0.00], name: 'Waste Zone' }], symbolSize: 24, itemStyle: { color: COLORS.red, opacity: 0.4 }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke', scale: 3, period: 4 }, label: { show: true, formatter: 'Waste Zone', position: 'right', color: COLORS.red, fontWeight: 700, fontSize: 12, }, z: 100, }, ], }); window.addEventListener('resize', () => chart.resize()); })(); /* ── TOKEN EFFIZIENZ HORIZONTAL BAR ────────────── */ (function() { const chart = initChart('tokens'); const data = [ { name: 'E2b Effort High', value: 621, color: COLORS.red }, { name: 'E2b Effort Medium', value: 542, color: COLORS.red }, { name: 'E2b Effort Low', value: 531, color: COLORS.red }, { name: 'E2-A Baseline', value: 569, color: COLORS.red }, { name: 'E2-B Hook-Only', value: 410, color: COLORS.green }, { name: 'E2-C Hook+Priority',value: 388, color: COLORS.green }, { name: 'E2b Low+Hook', value: 290, color: COLORS.green }, ]; chart.setOption({ ...BASE_THEME, tooltip: { trigger: 'axis', backgroundColor: '#1e293b', borderColor: COLORS.border, textStyle: { color: COLORS.text }, formatter: p => `<b>${p[0].name}</b><br/>Tokens: <b>${p[0].value}</b>`, axisPointer: { type: 'shadow' }, }, grid: { left: 10, right: 60, top: 10, bottom: 10, containLabel: true }, xAxis: { type: 'value', ...axisDefaults('Token Output'), }, yAxis: { type: 'category', data: data.map(d => d.name), ...axisDefaults(''), axisLabel: { color: COLORS.muted, fontSize: 11 }, }, series: [{ type: 'bar', data: data.map(d => ({ value: d.value, itemStyle: { color: d.color, borderRadius: [0, 4, 4, 0] }, })), barWidth: '55%', label: { show: true, position: 'right', color: COLORS.text, fontSize: 12, fontWeight: 600, formatter: p => p.value + ' tok', }, }], }); window.addEventListener('resize', () => chart.resize()); })(); /* ── EFFIZIENZ-INDEX ────────────────────────────── */ (function() { const chart = initChart('efficiency'); // Effizienz = Pass-Rate / Cost (je hΓΆher desto besser) const groups = [ { name: 'E2-A Baseline', passRate: 0, cost: 0.074 }, { name: 'E2-B Hook-Only', passRate: 1, cost: 0.021 }, { name: 'E2-C Hook+Priority', passRate: 1, cost: 0.024 }, { name: 'E2b Low', passRate: 0, cost: 0.170 }, { name: 'E2b Medium', passRate: 0, cost: 0.134 }, { name: 'E2b High', passRate: 0, cost: 0.141 }, { name: 'E2b Low+Hook', passRate: 1, cost: 0.041 }, ]; const efficiencies = groups.map(g => g.cost > 0 ? parseFloat((g.passRate / g.cost).toFixed(1)) : 0); chart.setOption({ ...BASE_THEME, tooltip: { trigger: 'axis', backgroundColor: '#1e293b', borderColor: COLORS.border, textStyle: { color: COLORS.text }, formatter: p => `<b>${p[0].name}</b><br/>Effizienz: <b>${p[0].value}</b> (Pass/Cost)`, axisPointer: { type: 'shadow' }, }, grid: { left: 20, right: 20, top: 20, bottom: 60, containLabel: true }, xAxis: { type: 'category', data: groups.map(g => g.name), ...axisDefaults(''), axisLabel: { color: COLORS.muted, fontSize: 9, interval: 0, rotate: 30 }, }, yAxis: { type: 'value', name: 'Pass-Rate / Cost', ...axisDefaults('Pass-Rate / Cost'), }, series: [{ type: 'bar', data: efficiencies.map((v, i) => ({ value: v, itemStyle: { color: v === 0 ? COLORS.red : (v > 30 ? COLORS.green : COLORS.blue), borderRadius: [6, 6, 0, 0], }, })), barWidth: '50%', label: { show: true, position: 'top', color: COLORS.text, fontSize: 11, fontWeight: 700, formatter: p => p.value === 0 ? 'β€”' : p.value.toFixed(1), }, }], }); window.addEventListener('resize', () => chart.resize()); })(); /* Global resize handler cleanup */ </script> </body> </html>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sidecar-NG Eval Dashboard β€” AgentArena</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0f172a;
--surface: #1e293b;
--surface2: #263348;
--border: #334155;
--text: #e2e8f0;
--text-muted:#94a3b8;
--green: #22c55e;
--red: #ef4444;
--blue: #3b82f6;
--yellow: #eab308;
--purple: #a855f7;
--cyan: #06b6d4;
--orange: #f97316;
--radius: 8px;
}
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
font-size: 15px;
line-height: 1.6;
min-height: 100vh;
}
/* ── HERO ─────────────────────────────────────── */
.hero {
background: linear-gradient(135deg, #0f172a 0%, #1a2744 50%, #0f172a 100%);
border-bottom: 1px solid var(--border);
padding: 56px 24px 48px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 80% 20%, rgba(34,197,94,0.06) 0%, transparent 50%),
radial-gradient(ellipse at 60% 80%, rgba(168,85,247,0.05) 0%, transparent 40%);
pointer-events: none;
}
.hero-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blue);
margin-bottom: 14px;
}
.hero h1 {
font-size: clamp(28px, 5vw, 52px);
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #e2e8f0 30%, #94a3b8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 12px;
}
.hero-subtitle {
font-size: clamp(14px, 2vw, 18px);
color: var(--text-muted);
max-width: 600px;
margin: 0 auto 28px;
}
.badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 999px;
font-size: 12px;