{# Executive — Findings tab panel (QA-048 / QA-051 / QA-052 / QA-053).

   SSE Phase 2, Step 2.4 — LIVE-APPEND contract.
   ------------------------------------------------
   This tab is NO LONGER snapshot-only. The server-rendered ``<tbody>``
   contents are the initial paint; ``static/live-append.js`` subscribes
   to ``/scan/<id>/events`` and APPENDS a freshly built ``<tr>`` into the
   matching severity ``<tbody>`` on every ``finding`` event arrival. The
   per-tab ``<template data-row-template data-kind="finding">`` block
   below is the canonical row shape — the JS clones it, fills text +
   data-attrs from the event payload, applies any active dropdown-filter
   gate, and appends. The "Showing N of M findings" counter ticks. The
   operator NEVER presses F5 to see a new finding. Hover-freeze: while
   the cursor is over ``.exec-findings-table-wrap`` new arrivals queue
   and flush on ``mouseleave`` so rows don't jump under the cursor
   mid-triage. Acceptance: new finding visible in this tab within 200ms
   of the producer emit (design doc: "Phase 2 decisions (resolved
   2026-06-03)" — Findings/Probes/Logs live-append).

   QA-048 (semantic table) — single ``<table class="exec-findings-table">``
   with ONE ``<thead>`` and per-severity ``<tbody>`` buckets. Rows are
   pre-sorted server-side (severity DESC then ASI ASC; see
   ``_findings_page``). Severity is its OWN column (a pill badge), not
   a per-bucket section divider — operators can scan top-down instead of
   context-switching between four sub-tables. Summary uses a hard pixel
   ``max-width`` + ``text-overflow: ellipsis`` and carries
   ``title="..."`` so the operator gets the full text on hover.

   QA-051 (column rename + real AGENT) — the three identity columns are
   now distinct: ASI (mono ``ASI01`` code) · CATEGORY (sans-serif
   ``goal-instruction-manipulation`` label) · AGENT (real runtime agent
   name, e.g. ``goal-hijack-agent``, sourced from the matched probe's
   ``agent`` field via ``_attach_evidence_to_findings``). Findings with
   no correlated probe render an em-dash in the AGENT column.

   QA-052 (drop TIMESTAMP) — the Timestamp column was redundant against
   the Turn column (both derive from the same first-correlated evidence
   row) and against the row-click slide-over which surfaces the exact
   timestamp inline. Removed.

   QA-053 (dropdown filter toolbar) — a row of native ``<select>``
   dropdowns sits above the table: Severity / Agent / Probe / ASI. Each
   dropdown is single-select (an explicit "All …" option clears it);
   the four dimensions compose with AND. Filters operate purely
   client-side on rendered ``<tr>`` rows (no server round-trip;
   pagination is preserved). A counter ``Showing N of M findings``
   updates as the operator changes a dropdown. Wired by
   ``executive_findings.js`` (BOOT step 7 — search marker
   ``ag.dashboard.executive.findings.filters``).

   Row click opens the existing finding slide-over drawer (QA-031). Each
   ``<tr>`` carries ``data-source="finding"``, ``data-finding-id``,
   ``tabindex="0"``, and ``role="button"`` so ``executive_findings.js``
   wires click + Enter/Space handlers automatically.
#}
<section id="tabpanel-findings"
         role="tabpanel"
         aria-labelledby="tab-findings"
         tabindex="0"
         hidden>
  <h2 class="exec-section-title">All findings so far.</h2>
  <p class="exec-section-lede">
    <span data-live="findings-total">{{ findings_total }}</span> findings &middot; sorted by criticality, then ASI.
    Click any row to inspect the full finding, metadata, and evidence drawer.
  </p>

  {% if findings_total == 0 %}
    <p class="exec-empty">Nothing flagged yet.</p>
  {% else %}
    {# QA-053 — Dropdown filter toolbar.

       Four native ``<select>`` controls — Severity / Agent / Probe /
       ASI. The option lists are derived in Jinja from the current
       page's findings (so a dropdown only lists values that at least
       one visible row carries — no dead options). Each ``<select>``
       carries:

         * ``data-filter-group`` — one of ``severity`` / ``agent`` /
           ``probe`` / ``asi``. The JS reads this to decide which row
           attribute to test the selected value against.

       Each ``<option>`` value is the literal to match against the
       ``<tr>``'s ``data-{group}`` attribute (e.g. ``data-severity`` or
       ``data-asi``); the leading empty-value option is the "All …"
       no-op. Dropdowns AND together: a row must pass every dropdown
       that has a non-empty value selected.

       The "Showing N of M findings" counter is updated by the same JS
       module on every change. The base counts come from the count of
       rendered rows in this page (N defaults to M because every
       dropdown is on its "All …" option at initial render).
    #}
    {% set _agent_values = [] %}
    {% set _asi_values = [] %}
    {% set _probe_values = [] %}
    {% set _sev_values = [] %}
    {% for f in findings_page %}
      {% if f.severity_class and f.severity_class not in _sev_values %}{% set _ = _sev_values.append(f.severity_class) %}{% endif %}
      {% if f.agent_name and f.agent_name not in _agent_values %}{% set _ = _agent_values.append(f.agent_name) %}{% endif %}
      {% if f.asi_code and f.asi_code not in _asi_values %}{% set _ = _asi_values.append(f.asi_code) %}{% endif %}
      {% if f.probe_id and f.probe_id not in _probe_values %}{% set _ = _probe_values.append(f.probe_id) %}{% endif %}
    {% endfor %}
    <div class="exec-findings-filter"
         id="exec-findings-filter"
         role="group"
         aria-label="Findings filters"
         data-component="findings-filters">
      {% if _sev_values %}
        <div class="exec-findings-filter__field">
          <label class="exec-findings-filter__label" for="exec-findings-filter-severity">Severity</label>
          <select class="exec-findings-filter__select"
                  id="exec-findings-filter-severity"
                  data-filter-group="severity">
            <option value="">All severities</option>
            {% for _sev in ['critical', 'high', 'medium', 'low'] %}
              {% if _sev in _sev_values %}
                <option value="{{ _sev }}">{{ _sev | upper }}</option>
              {% endif %}
            {% endfor %}
          </select>
        </div>
      {% endif %}
      {% if _agent_values %}
        <div class="exec-findings-filter__field">
          <label class="exec-findings-filter__label" for="exec-findings-filter-agent">Agent</label>
          <select class="exec-findings-filter__select"
                  id="exec-findings-filter-agent"
                  data-filter-group="agent">
            <option value="">All agents</option>
            {% for _agent in _agent_values | sort %}
              <option value="{{ _agent }}">{{ _agent }}</option>
            {% endfor %}
          </select>
        </div>
      {% endif %}
      {% if _probe_values %}
        <div class="exec-findings-filter__field">
          <label class="exec-findings-filter__label" for="exec-findings-filter-probe">Probe</label>
          <select class="exec-findings-filter__select"
                  id="exec-findings-filter-probe"
                  data-filter-group="probe">
            <option value="">All probes</option>
            {% for _probe in _probe_values | sort %}
              <option value="{{ _probe }}">{{ _probe }}</option>
            {% endfor %}
          </select>
        </div>
      {% endif %}
      {% if _asi_values %}
        <div class="exec-findings-filter__field">
          <label class="exec-findings-filter__label" for="exec-findings-filter-asi">ASI</label>
          <select class="exec-findings-filter__select"
                  id="exec-findings-filter-asi"
                  data-filter-group="asi">
            <option value="">All ASI</option>
            {% for _asi in _asi_values | sort %}
              <option value="{{ _asi }}">{{ _asi }}</option>
            {% endfor %}
          </select>
        </div>
      {% endif %}
      <div class="exec-findings-filter__counter" id="exec-findings-filter-counter"
           data-counter-total="{{ findings_page | length }}"
           aria-live="polite">
        Showing <span data-counter-visible>{{ findings_page | length }}</span>
        of <span data-counter-total>{{ findings_page | length }}</span> findings
      </div>
    </div>
    <div class="exec-findings-table-wrap">
      <table class="exec-findings-table"
             id="exec-findings-table"
             role="table"
             aria-label="Findings — sorted by severity then ASI">
        <thead class="exec-findings-table__head">
          <tr>
            <th scope="col" class="exec-findings-table__col--sev">Severity</th>
            <th scope="col" class="exec-findings-table__col--asi">ASI</th>
            <th scope="col" class="exec-findings-table__col--category">Category</th>
            <th scope="col" class="exec-findings-table__col--agent">Agent</th>
            <th scope="col" class="exec-findings-table__col--probe">Probe</th>
            <th scope="col" class="exec-findings-table__col--summary">Summary</th>
            <th scope="col" class="exec-findings-table__col--turn">Turn</th>
          </tr>
        </thead>
        {# Rows are pre-sorted by (severity DESC, ASI ASC) in
           ``_findings_page``. We bucket into one ``<tbody>`` per
           severity so the existing severity-bar chart (Overview tab)
           keeps working — its onClick handler scrolls to
           ``#exec-sev-{critical|high|medium|low}``. Multiple
           ``<tbody>`` per table is valid HTML5 and keeps the table
           semantically singular for screen readers / sort handlers. #}
        {% set _sev_groups = {'critical': [], 'high': [], 'medium': [], 'low': []} %}
        {% for f in findings_page %}
          {% set _grp = _sev_groups.get(f.severity_class) %}
          {% if _grp is not none %}{% set _ = _grp.append(f) %}{% endif %}
        {% endfor %}
        {% for _sev_key, _sev_items in [('critical', _sev_groups.critical),
                                         ('high', _sev_groups.high),
                                         ('medium', _sev_groups.medium),
                                         ('low', _sev_groups.low)] %}
          {% if _sev_items %}
            <tbody id="exec-sev-{{ _sev_key }}" class="exec-findings-table__group" data-severity="{{ _sev_key }}">
              {% for f in _sev_items %}
                {# Turn derives from the first correlated evidence row
                   attached in ``_attach_evidence_to_findings`` so the
                   operator sees the canonical (earliest) attempt.
                   Fall back to em-dash when no probe correlation exists
                   (e.g. static findings). QA-052 dropped the Timestamp
                   column — the slide-over surfaces the exact time
                   inline when an operator clicks through.

                   One clean row per finding — per-turn detail (the full
                   multi-turn chat view) lives only in the row-click
                   detail drawer, not as inline child rows in the table. #}
                {% set _ev_first = (f.evidence | first) if f.evidence else None %}
                {% set _turn_label = (_ev_first.turn if _ev_first and _ev_first.turn else None) %}
                <tr class="exec-findings-table__row"
                    data-source="finding"
                    data-finding-id="{{ f.id }}"
                    data-finding-href="/scan/{{ scan_id }}/finding/{{ f.id }}"
                    data-severity="{{ f.severity_class }}"
                    data-asi="{{ f.asi_code }}"
                    data-agent="{{ f.agent_name or '' }}"
                    data-probe="{{ f.probe_id or '' }}"
                    tabindex="0"
                    role="button"
                    aria-controls="exec-finding-slideover"
                    aria-label="Open finding {{ f.id }} ({{ f.severity_label }} severity)">
                  <td class="exec-findings-table__cell exec-findings-table__cell--sev">
                    <span class="exec-sev-pill exec-sev-pill--{{ f.severity_class }}"
                          aria-label="{{ f.severity_label }} severity">
                      <span class="exec-sev-pill__dot" aria-hidden="true"></span>
                      {{ f.severity_label }}
                    </span>
                  </td>
                  <td class="exec-findings-table__cell exec-findings-table__cell--asi">
                    <code class="exec-findings-table__asi-code">{{ f.asi_code }}</code>
                  </td>
                  <td class="exec-findings-table__cell exec-findings-table__cell--category">
                    <span class="exec-findings-table__category-name">{{ f.csa_code }}</span>
                  </td>
                  <td class="exec-findings-table__cell exec-findings-table__cell--agent">
                    {% if f.agent_name %}
                      <code class="exec-findings-table__agent-name">{{ f.agent_name }}</code>
                    {% else %}
                      <span class="exec-findings-table__muted">&mdash;</span>
                    {% endif %}
                  </td>
                  <td class="exec-findings-table__cell exec-findings-table__cell--probe">
                    <code>{{ f.probe_id or '—' }}</code>
                  </td>
                  <td class="exec-findings-table__cell exec-findings-table__cell--summary"
                      title="{{ f.summary }}">
                    <span class="exec-findings-table__summary-text">{{ f.summary }}</span>
                  </td>
                  <td class="exec-findings-table__cell exec-findings-table__cell--turn">
                    {% if _turn_label %}
                      <code>{{ _turn_label }}</code>
                    {% else %}
                      <span class="exec-findings-table__muted">&mdash;</span>
                    {% endif %}
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          {% endif %}
        {% endfor %}
      </table>
    </div>
    {% if pagination.total_pages > 1 %}
      <nav class="exec-pager" aria-label="Findings pagination">
        <span class="exec-pager__range">
          Showing {{ pagination.start }}&ndash;{{ pagination.end }} of {{ pagination.total }}
        </span>
        <div class="exec-pager__buttons">
          {% for p in pagination.pages %}
            <a class="exec-pager__btn{% if p == pagination.current %} exec-pager__btn--active{% endif %}"
               href="?page={{ p }}#tab=findings">{{ p }}</a>
          {% endfor %}
        </div>
      </nav>
    {% endif %}
  {% endif %}

  {# SSE Phase 2, Step 2.4 — live-append row template. ``live-append.js``
     clones this ``<tr>`` skeleton for every ``finding`` event arrival.
     Element shape mirrors the server-side single-turn row above
     (multi-turn aggregation is server-only — the live-append path always
     produces a single ``data-source="finding"`` row).

     The template MUST live inside ``#tabpanel-findings`` so the JS can
     scope lookup with ``document.querySelector("#tabpanel-findings
     template[data-row-template][data-kind='finding']")``. Browsers
     don't render ``<template>`` content, so a server-rendered empty
     scaffolding has no visual effect on the initial paint. #}
  <template data-row-template data-kind="finding">
    <tr class="exec-findings-table__row"
        data-source="finding"
        data-finding-id=""
        data-finding-href=""
        data-severity=""
        data-asi=""
        data-agent=""
        data-probe=""
        tabindex="0"
        role="button"
        aria-controls="exec-finding-slideover">
      <td class="exec-findings-table__cell exec-findings-table__cell--sev">
        <span class="exec-sev-pill" data-slot="sev-pill">
          <span class="exec-sev-pill__dot" aria-hidden="true"></span>
          <span data-slot="sev-label"></span>
        </span>
      </td>
      <td class="exec-findings-table__cell exec-findings-table__cell--asi">
        <code class="exec-findings-table__asi-code" data-slot="asi"></code>
      </td>
      <td class="exec-findings-table__cell exec-findings-table__cell--category">
        <span class="exec-findings-table__category-name" data-slot="category"></span>
      </td>
      <td class="exec-findings-table__cell exec-findings-table__cell--agent">
        <code class="exec-findings-table__agent-name" data-slot="agent"></code>
      </td>
      <td class="exec-findings-table__cell exec-findings-table__cell--probe">
        <code data-slot="probe"></code>
      </td>
      <td class="exec-findings-table__cell exec-findings-table__cell--summary">
        <span class="exec-findings-table__summary-text" data-slot="summary"></span>
      </td>
      <td class="exec-findings-table__cell exec-findings-table__cell--turn">
        <code data-slot="turn"></code>
      </td>
    </tr>
  </template>

  {# Hidden JSON island — finding payloads for the slide-over. The
     slide-over JS reads ``data-finding-id`` off the clicked row and
     looks up the matching payload here. Keeps the table markup tiny
     while preserving all evidence + metadata for the deep-dive. #}
  <script type="application/json" id="exec-findings-payload">
    {{ findings_payload_json | safe }}
  </script>

  {% include "dashboard/executive/_finding_slideover.html" %}
</section>