{# 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>

  {# ── The marks line: did it finish the job, and what did that cost.
     Reads /api/outcomes/trend, which needs no judge key and no API spend,
     so it works on every plan — the grade above is the opinion, this is
     the record. Set in the card's own serif so the two read as one
     document rather than a stat row bolted underneath. ── #}
  <section class="q-outcomes" id="q-outcomes" aria-label="Outcomes this week" hidden>
    <div class="q-oc-cells" id="q-oc-cells"></div>
    <p class="q-oc-note" id="q-oc-note"></p>
  </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"> — tool failures, repeated calls, and edits that were never checked. Every flag shows its evidence.</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>

  {# ── Export. Deliberately not a pitch: if you already run an evaluation
     platform, sending these runs there beats a second opinion here. Always
     visible — unlike the judge nudge above, this doesn't go away once a key
     is set. ── #}
  <p class="q-export">
    <span data-i18n="quality.export_lead">Already using an evaluation platform?</span>
    <span data-i18n="quality.export_body">Point it at this endpoint to pull every run with its outcome, cost and tokens:</span>
    <code id="q-export-url">/api/otel/export?shape=sessions&amp;window=7d</code>
    <button type="button" class="q-copy" onclick="qCopyExportUrl(this)"
            data-i18n="quality.export_copy">Copy</button>
  </p>

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