| <!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 { |
| 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; } |
| |
| |
| .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 { |
| 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; } |
| |
| |
| .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-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 { |
| 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-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 { margin-bottom: 40px; } |
| .spacer-sm { margin-bottom: 20px; } |
| |
| |
| 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); } |
| |
| |
| .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; |
| } |
| |
| |
| .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> |
|
|
| |
| |
| |
| <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">■ 84 Runs</span> |
| <span class="badge badge-green">✓ 7 Experimente</span> |
| <span class="badge badge-purple">◇ Sonnet 4.6</span> |
| <span class="badge badge-yellow">📅 2026-03-19</span> |
| </div> |
| </header> |
|
|
| <div class="container"> |
|
|
| |
| <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 > 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> |
|
|
| |
| <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 & 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> |
|
|
| |
| <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 & 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> |
|
|
| |
| <div class="section-title">E3 — Sidecar Compliance Benchmark (4 Szenarien)</div> |
| <div class="card spacer"> |
| <div class="heatmap-banner"> |
| ⚠️ 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">✓ 3/3</span></td> |
| <td><span class="cell-pill cell-green">✓ 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">✓ 3/3</span></td> |
| <td><span class="cell-pill cell-green">✓ 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">✓ 3/3</span></td> |
| <td><span class="cell-pill cell-green">✓ 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">✓ 3/3</span></td> |
| <td><span class="cell-pill cell-green">✓ 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> |
|
|
| |
| <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 & 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> |
|
|
| |
| <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;"> |
| ⚠️ 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">✓ 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">△ 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> |
|
|
| |
| <div class="section-title">E7 — Injection Granularity (THE Game Changer)</div> |
| <div class="card spacer"> |
| <div class="heatmap-banner green"> |
| ✓ 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">★ Sweet Spot: Minimal-Rule $0.035</span> |
| </div> |
| </div> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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 <$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> |
|
|
| <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> |
|
|
| |
| |
| |
| <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' }); |
| } |
| |
| |
| 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 |
| }; |
| } |
| |
| |
| (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()); |
| })(); |
| |
| |
| (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()); |
| })(); |
| |
| |
| (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()); |
| })(); |
| |
| |
| (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()); |
| })(); |
| |
| |
| (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()); |
| })(); |
| |
| |
| (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()); |
| })(); |
| |
| |
| (function() { |
| const chart = initChart('e5-heatmap'); |
| |
| |
| |
| |
| const rawData = [ |
| [0, 0, 0], |
| [1, 0, 1], |
| [0, 1, 0], |
| [1, 1, 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()); |
| })(); |
| |
| |
| (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]; |
| 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; |
| 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), |
| }, |
| }, |
| |
| { |
| 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()); |
| })(); |
| |
| |
| (function() { |
| const chart = initChart('scatter'); |
| |
| |
| const agents = [ |
| |
| ['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 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], |
| |
| ['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 }, |
| }, |
| |
| { |
| 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, |
| }, |
| |
| { |
| 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()); |
| })(); |
| |
| |
| (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()); |
| })(); |
| |
| |
| (function() { |
| const chart = initChart('efficiency'); |
| |
| |
| 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()); |
| })(); |
| |
| |
| </script> |
| </body> |
| </html> |
|
|
