{% set s = report.sections %}
{% set open_capacity = ["W03", "C02", "R01"] %}
<div class="report">
<aside class="toc no-print">
  <div class="eyebrow">On this page</div>
  <nav>
    {% if report.setup %}<a href="#setup">{{ s.setup }}</a>{% endif %}
    <a href="#verdict">{{ s.verdict }}</a>
    <a href="#scorecard">{{ s.scorecard }}</a>
    {% if report.problems %}<a href="#problems">{{ s.problems }} <span class="count">{{ report.problems | length }}</span></a>{% endif %}
    {% if report.next_steps %}<a href="#next">{{ s.next }}</a>{% endif %}
    {% if report.capacity %}<a href="#capacity">{{ s.capacity }}</a>{% endif %}
    {% if report.shapes %}<a href="#shapes">{{ s.shapes }}</a>{% endif %}
    {% if report.reuse %}<a href="#reuse">{{ s.reuse }}</a>{% endif %}
    {% if report.context %}<a href="#context">{{ s.context }}</a>{% endif %}
    {% if report.passed %}<a href="#passed">{{ s.passed }} <span class="count">{{ report.passed | length }}</span></a>{% endif %}
    {% if report.skipped %}<a href="#skipped">{{ s.skipped }}</a>{% endif %}
    <a href="#caveats">{{ s.caveats }}</a>
    {% if report.glossary %}<a href="#glossary">{{ s.glossary }}</a>{% endif %}
    <a href="#appendix">{{ s.appendix }}</a>
  </nav>
  <div class="toc-actions">
    <button type="button" class="secondary small-btn" onclick="kbSetAll(true)">Expand all</button>
    <button type="button" class="secondary small-btn" onclick="kbSetAll(false)">Collapse all</button>
  </div>
</aside>

<div class="report-main">
<div class="eyebrow">kneebench report · run #{{ report.run_id }}</div>
<h1>{{ report.summary.model }}</h1>
<p class="meta">{{ report.summary.gpu }} (as entered) · vLLM {{ report.summary.vllm_version }} ·
  {{ report.summary.product }} workload · {{ report.summary.run_started[:16].replace("T", " ") }} ·
  {{ report.summary.run_status }}</p>

{% if report.summary.run_error %}<div class="notice bad">This run {{ report.summary.run_status }}: {{ report.summary.run_error }}
  The report below uses the points measured before it stopped.</div>{% endif %}

{% if report.what_if %}<div class="notice warn">{{ report.what_if | safe }}</div>{% endif %}
{% if report.setup %}
<h2 id="setup">{{ s.setup }}</h2>
<div class="card setup"><ul>{% for label, value in report.setup %}<li><b>{{ label }}</b> {{ value }}</li>{% endfor %}</ul></div>
{% endif %}
<h2 id="verdict">{{ s.verdict }}</h2>
<div class="card verdict"><ul>{% for sentence in report.verdict %}<li>{{ sentence | safe }}</li>{% endfor %}</ul></div>

<h2 id="scorecard">{{ s.scorecard }}</h2>
<div class="grid">
  {% for t in report.scorecard %}
  <div class="tile {{ t.status }}"><div class="label">{{ t.label }}</div><div class="text">{{ t.text | safe }}</div></div>
  {% endfor %}
</div>

{% if report.problems %}
<h2 id="problems">{{ s.problems }}</h2>
{% for f in report.problems %}{% with open = true %}{% include "_finding.html" %}{% endwith %}{% endfor %}
{% endif %}

{% if report.next_steps %}
<h2 id="next">{{ s.next }}</h2>
{% for kind in ["server", "test"] %}
{% set group = report.next_steps | selectattr("action.kind", "equalto", kind) | list %}
{% if group %}
<h3 class="steps-group">{{ s["next_" ~ kind] }}</h3>
<p class="muted small">{{ s["next_" ~ kind ~ "_intro"] }}</p>
<ol class="steps">
  {% for step in group %}
  <li class="card action">
    <b>{{ step.action.title | safe }}</b><span class="rule">{{ step.rule_id }}</span>
    {% if step.action.flag %}<pre><button class="copy" onclick="navigator.clipboard.writeText(this.nextSibling.textContent)">Copy</button><code>{{ step.action.flag | safe }}</code></pre>{% endif %}
    <div class="small"><b>Why</b> {{ step.reason | safe }}</div>
    {% if step.action.expected %}<div class="small"><b>Expected</b> {{ step.action.expected | safe }}</div>{% endif %}
    {% if step.action.risk %}<div class="small"><b>Risk</b> {{ step.action.risk | safe }}</div>{% endif %}
    {% if kind == "server" and not inline_assets and not is_demo %}
    <form method="post" action="/runs/{{ report.run_id }}/experiments" class="no-print" style="margin-top:10px">
      <input type="hidden" name="step" value="{{ loop.index0 }}">
      <button type="submit" class="secondary">Try this change</button>
      <span class="muted small">kneebench shows how to apply it, checks it landed, and measures what it did.</span>
    </form>
    {% endif %}
  </li>
  {% endfor %}
</ol>
{% endif %}
{% endfor %}
{% endif %}

{% if report.capacity %}
<h2 id="capacity">{{ s.capacity }}</h2>
{% for f in report.capacity %}{% with open = f.rule_id in open_capacity %}{% include "_finding.html" %}{% endwith %}{% endfor %}
{% endif %}
{% if report.shapes %}
<h2 id="shapes">{{ s.shapes }}</h2>
{% for f in report.shapes %}{% with open = f.rule_id == "S06" %}{% include "_finding.html" %}{% endwith %}{% endfor %}
{% endif %}
{% if report.reuse %}
<h2 id="reuse">{{ s.reuse }}</h2>
{% for f in report.reuse %}{% with open = f.rule_id == "P01" %}{% include "_finding.html" %}{% endwith %}{% endfor %}
{% endif %}

{% if report.context %}
<h2 id="context">{{ s.context }}</h2>
<p class="muted small">Background on what this hardware can do. Open a card for the explanation.</p>
{% for f in report.context %}{% with open = false %}{% include "_finding.html" %}{% endwith %}{% endfor %}
{% endif %}

{% if report.passed %}
<h2 id="passed">{{ s.passed }}</h2>
<details class="card section">
  <summary><b>{{ report.passed | length }} checks passed</b> <span class="muted small">show them</span><span class="chev" aria-hidden="true"></span></summary>
  <ul class="plain">
  {% for f in report.passed %}<li><span class="badge ok">good</span> <b>{{ f.title }}</b><span class="rule">{{ f.rule_id }}</span>
    <div class="reading muted">{{ f.status_line | safe }}</div></li>{% endfor %}
  </ul>
</details>
{% endif %}

{% if report.skipped %}
<h2 id="skipped">{{ s.skipped }}</h2>
<div class="card" style="padding:4px 22px"><ul class="plain">
  {% for f in report.skipped %}<li><span class="badge">not checked</span> <b>{{ f.title }}</b><span class="rule">{{ f.rule_id }}</span>
    <div class="reading muted">{{ f.status_line | safe }}</div></li>{% endfor %}
</ul></div>
{% endif %}

<h2 id="caveats">{{ s.caveats }}</h2>
<div class="card" style="padding:4px 22px"><ul class="plain caveats">{% for c in report.caveats %}<li>{{ c | safe }}</li>{% endfor %}</ul></div>

{% if report.glossary %}
<h2 id="glossary">{{ s.glossary }}</h2>
<details class="card section">
  <summary><b>{{ report.glossary | length }} terms</b> <span class="muted small">used in this report</span><span class="chev" aria-hidden="true"></span></summary>
  <ul class="plain">{% for term, definition in report.glossary %}<li><b>{{ term }}</b> <span class="reading muted">{{ definition }}</span></li>{% endfor %}</ul>
</details>
{% endif %}

<h2 id="appendix">{{ s.appendix }}</h2>
<details class="card section">
  <summary><b>Every number behind this report</b> <span class="muted small">as plain tables; the JSON and Markdown exports carry the same data</span><span class="chev" aria-hidden="true"></span></summary>
  {% for t in report.appendix %}
  <div class="eyebrow" style="margin-top:18px">{{ t.title }}</div>
  <div class="table-scroll"><table class="raw">
    <thead><tr>{% for c in t.columns %}<th>{{ c }}</th>{% endfor %}</tr></thead>
    <tbody>{% for row in t.rows %}<tr>{% for cell in row %}<td>{{ cell }}</td>{% endfor %}</tr>{% endfor %}</tbody>
  </table></div>
  {% endfor %}
</details>
<p class="meta">kneebench {{ report.summary.kneebench_version }} · AIPerf
  {{ report.summary.aiperf_version }} · rules {{ report.summary.rules_version }} · generated
  {{ report.generated_at }}</p>
</div>
</div>

<script type="application/json" id="kb-figures">{{ figures_json | safe }}</script>
<script>
  window.kneebenchReady = false;
  const KB_FIGURES = JSON.parse(document.getElementById("kb-figures").textContent);

  // Charts draw the first time they become visible; collapsed ones would get zero width.
  function kbDraw(root) {
    const jobs = [];
    if (!window.Plotly) return Promise.resolve();
    root.querySelectorAll(".chart").forEach((el) => {
      if (el.offsetParent === null) return;
      if (el.dataset.drawn) { Plotly.Plots.resize(el); return; }
      const [rule, i] = el.dataset.chart.split(/-(?=\d+$)/);
      const fig = (KB_FIGURES[rule] || [])[Number(i)];
      if (!fig) return;
      el.dataset.drawn = "1";
      jobs.push(Plotly.newPlot(el, fig.data, fig.layout, {displaylogo: false, responsive: true,
        modeBarButtonsToRemove: ["lasso2d", "select2d"]}));
    });
    return Promise.all(jobs);
  }
  function kbSetAll(open) {
    document.querySelectorAll(".report details").forEach((d) => { d.open = open; });
    return kbDraw(document);
  }
  // Used for printing and PDF export: everything open, every chart drawn.
  window.kneebenchExpandAll = () => kbSetAll(true);
  window.addEventListener("load", () => {
    document.querySelectorAll(".report details").forEach((d) => {
      d.addEventListener("toggle", () => { if (d.open) kbDraw(d); });
    });
    kbDraw(document).then(() => { window.kneebenchReady = true; });
  });
  window.addEventListener("beforeprint", () => { kbSetAll(true); });
</script>