{# Quality tab (formerly "Evals"). Redesigned 2026-08-14 per founder feedback:
   the old 12-tile grid + hash-list table read as vaporbox. Reshaped around
   the single question "is my agent doing good work?" — one graded letter
   card, ranked failure patterns, plain-English rough runs. Inline eval
   builder ("Prevent this →") lives on each rough run so a real trace can
   become a persistent check without leaving the tab.

   DOM ids here are what clawmetry/static/js/app.js::loadEvalsTab reads
   after the redesign. The tab is still selected via data-tab="evals" from
   the sidebar so the URL / muscle-memory stays stable; only the surface
   inside changed. See clawmetry/quality.py + routes/quality.py. #}
<div class="page" id="page-evals" data-quality-tab="1">

  <div class="q-topbar">
    <div class="q-brand">
      <span data-i18n="quality.title">Quality</span>
      <em data-i18n="quality.subtitle_period">this week</em>
    </div>
    <div class="q-status">
      <span class="q-dot" aria-hidden="true"></span>
      <span id="q-status-line" data-i18n="quality.status_loading">Loading…</span>
      <button class="q-picker" type="button" onclick="loadEvalsTab()" title="Refresh" data-i18n-title="common.refresh">↻</button>
    </div>
  </div>

  {# ── The report card: giant stamped letter + one sentence + week dots ── #}
  <section class="q-card" id="q-card" aria-label="This week's grade">
    <div class="q-grade" id="q-grade" aria-hidden="true">—</div>
    <div class="q-verdict">
      <h2 id="q-headline"><span data-i18n="quality.headline_loading">Loading grade…</span></h2>
      <p id="q-subline"><span data-i18n="quality.subline_loading">Reading your agent's recent work.</span></p>
      <div class="q-week" id="q-week" aria-label="Grade by day"></div>
    </div>
  </section>

  {# ── Two panels: patterns + rough runs. Both read from the same fetch. ── #}
  <div class="q-below">

    <section class="q-panel" aria-label="What went wrong">
      <h3 data-i18n="quality.patterns_title">What went wrong</h3>
      <p class="q-sub" data-i18n="quality.patterns_sub">Ranked by what it cost you.</p>
      <ul class="q-patterns" id="q-patterns"></ul>
    </section>

    <section class="q-panel" aria-label="The rough runs">
      <h3 id="q-rough-title" data-i18n="quality.rough_title">The rough runs</h3>
      <p class="q-sub" data-i18n="quality.rough_sub">Click any to see the trace, or turn one into a check.</p>
      <ul class="q-runs" id="q-runs"></ul>
    </section>

  </div>

  {# ── Footer strip: judge upgrade path. Hidden once a key is set. ── #}
  <footer class="q-footer" id="q-footer" hidden>
    <div>
      <span data-i18n="quality.footer_lead">Grading uses signals we already track</span>
      <span data-i18n="quality.footer_signals"> — cleanliness, tool errors, wasted context, budget breaches.</span>
      <br>
      <span data-i18n="quality.footer_upgrade">Add a judge key to also grade the writing quality of the answer.</span>
    </div>
    <a href="#" onclick="openEvalRubricModal();return false;" data-i18n="quality.footer_cta">Grade the writing too →</a>
  </footer>

</div>{# end page-evals #}