| {% extends "base.html" %} |
| {% block title %}Harness x Model Matrix — AgentArena{% endblock %} |
|
|
| {% block content %} |
| <div class="hero" style="padding-bottom:16px;"> |
| <h1>Harness x Model Matrix</h1> |
| <p>Same LLM, different harnesses — who works cleaner, faster, cheaper?</p> |
| </div> |
|
|
| {% if harnesses and models %} |
| <div class="table-wrapper mb-24"> |
| <table> |
| <thead> |
| <tr> |
| <th>Harness</th> |
| {% for model in models %} |
| <th style="text-align:center;">{{ model }}</th> |
| {% endfor %} |
| </tr> |
| </thead> |
| <tbody> |
| {% for harness in harnesses %} |
| <tr> |
| <td> |
| <a href="/harness/{{ harness }}"><strong>{{ harness }}</strong></a> |
| </td> |
| {% for model in models %} |
| {% set key = harness ~ "|" ~ model %} |
| {% set cell = cells.get(key) %} |
| <td style="text-align:center; padding:8px 12px;"> |
| {% if cell %} |
| <div style="margin-bottom:4px;"> |
| <div class="score-bar" style="justify-content:center;"> |
| <span style="min-width:40px; font-weight:700; {% if cell.pass_at_1 >= 0.7 %}color:var(--success){% elif cell.pass_at_1 >= 0.4 %}color:var(--warning){% else %}color:var(--error){% endif %}"> |
| {{ "%.0f"|format(cell.pass_at_1 * 100) }}% |
| </span> |
| </div> |
| <div style="font-size:10px; color:var(--muted);">pass@1</div> |
| </div> |
| {% if cell.avg_composite is not none %} |
| <div style="margin-bottom:2px;"> |
| <span class="mono" style="font-size:12px; {% if cell.avg_composite >= 0.7 %}color:var(--success){% elif cell.avg_composite >= 0.4 %}color:var(--warning){% else %}color:var(--error){% endif %}"> |
| {{ "%.0f"|format(cell.avg_composite * 100) }}% |
| </span> |
| <span style="font-size:10px; color:var(--muted);">comp</span> |
| </div> |
| {% endif %} |
| <div style="font-size:11px; color:var(--muted);"> |
| ${{ "%.4f"|format(cell.avg_cost) }} |
| <span style="margin-left:4px;">{{ "%.0f"|format(cell.avg_duration) }}s</span> |
| <span style="margin-left:4px;">{{ cell.total_runs }}r</span> |
| </div> |
| {% else %} |
| <span class="text-muted" style="font-size:18px;">—</span> |
| {% endif %} |
| </td> |
| {% endfor %} |
| </tr> |
| {% endfor %} |
| </tbody> |
| </table> |
| </div> |
|
|
| |
| <div class="card" style="padding:16px 20px;"> |
| <div style="font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px;"> |
| Legend |
| </div> |
| <div style="display:flex; gap:24px; flex-wrap:wrap; font-size:13px; color:var(--muted);"> |
| <span><strong style="color:var(--success);">70%+</strong> = strong</span> |
| <span><strong style="color:var(--warning);">40-69%</strong> = moderate</span> |
| <span><strong style="color:var(--error);"><40%</strong> = weak</span> |
| <span><strong>pass@1</strong> = reliability</span> |
| <span><strong>comp</strong> = composite score</span> |
| <span><strong>r</strong> = total runs</span> |
| </div> |
| </div> |
|
|
| {% else %} |
| <div class="card"> |
| <div class="empty"> |
| <h3>No data yet</h3> |
| <p>Run benchmarks with different harness/model combinations to populate the matrix.</p> |
| <a href="/" class="btn btn-primary">Go to Leaderboard</a> |
| </div> |
| </div> |
| {% endif %} |
|
|
| |
| {% if harnesses %} |
| <h2 style="margin-top:32px;">Harness Reports</h2> |
| <div style="display:flex; gap:12px; flex-wrap:wrap;"> |
| {% for harness in harnesses %} |
| <a href="/harness/{{ harness }}" class="btn btn-secondary">{{ harness }}</a> |
| {% endfor %} |
| </div> |
| {% endif %} |
| {% endblock %} |
|
|
