{# Executive — Logs tab panel.

   SSE Phase 2, Step 2.4 — LIVE-APPEND contract.
   ------------------------------------------------
   This tab is NO LONGER snapshot-only. The initial server-side render
   from ``logs_tail`` is the first paint; ``static/live-append.js``
   subscribes to ``/scan/<id>/events`` and APPENDS a new ``<li>`` to the
   ``<ol class="exec-logs">`` on every ``reflection`` event. The
   ``<template data-row-template data-kind="log">`` block below is the
   canonical row shape — JS clones, fills, applies level-chip + search
   filters, and appends. Hover-freeze applies: while the cursor is over
   ``.exec-logs`` arrivals queue and flush on ``mouseleave``. Operator
   no longer needs F5 (acceptance: new log row visible within 200ms of
   producer emit — design doc "Phase 2 decisions (resolved 2026-06-03)").
   The Logs tail cap ``_LOGS_TAIL_CAP`` still gates the SERVER-RENDERED
   snapshot only — live-append rows accumulate beyond that cap for the
   tab's lifetime.

   Each row carries timestamp / level / kind / agent / asi / summary
   from ``events.jsonl`` via the shared view-model (``logs_tail``).
   Empty-state copy preserves the ``clean_control`` sentry.
#}
<section id="tabpanel-logs"
         role="tabpanel"
         aria-labelledby="tab-logs"
         tabindex="0"
         hidden>
  <h2 class="exec-section-title">Scan log tail.</h2>
  <p class="exec-section-lede">
    <span data-live="logs-count">{{ logs_tail | length }}</span> events &middot; updating live.
  </p>
  {% if logs_tail | length > 0 %}
    {# Filter toolbar — level chips (multi-select, default all on) + free-form
       search (substring, case-insensitive, 100ms debounce) + showing-X-of-Y
       counter. State is persisted in the URL hash as ``#logs?level=info,warn
       &q=httpx`` so a browser refresh preserves filter state and tab switches
       restore on the next visit. All filter logic is client-side. #}
    <div class="exec-logs-filter" role="toolbar" aria-label="Filter scan log events">
      <div class="exec-logs-filter__chips">
        {# DEBUG chip is rendered first and defaults to OFF (aria-pressed="false")
           so the page is lightweight by default. The operator clicks DEBUG to
           drill in when AGENT_GUARDIAN_LOG_LEVEL=DEBUG was set at scan time
           and events.jsonl actually contains DEBUG rows. The renderer always
           emits every persisted DEBUG row — only the chip controls visibility. #}
        <button type="button"
                class="exec-logs-filter__chip exec-logs-filter__chip--debug"
                data-filter-level="debug"
                aria-pressed="false">DEBUG</button>
        <button type="button"
                class="exec-logs-filter__chip exec-logs-filter__chip--info"
                data-filter-level="info"
                aria-pressed="true">INFO</button>
        <button type="button"
                class="exec-logs-filter__chip exec-logs-filter__chip--warn"
                data-filter-level="warn"
                aria-pressed="true">WARNING</button>
        <button type="button"
                class="exec-logs-filter__chip exec-logs-filter__chip--error"
                data-filter-level="error"
                aria-pressed="true">ERROR</button>
      </div>
      <input type="search"
             class="exec-logs-filter__input"
             placeholder="Search logs… (substring, case-insensitive)"
             aria-label="Search scan log events" />
      <span class="exec-logs-filter__count" data-logs-filter-count></span>
    </div>
    <p class="exec-empty exec-logs-filter__no-match" hidden>
      No log events match the current filter — clear chips or the search box to see all events.
    </p>
  {% endif %}
  {% if logs_tail | length == 0 %}
    <p class="exec-empty">No log events recorded yet.</p>
  {% else %}
    <ol class="exec-logs">
      {% for ev in logs_tail %}
        <li class="exec-log exec-log--{{ ev.level }}{% if ev.kind == 'log' %} exec-log--cli{% endif %}" data-level="{{ ev.level }}" data-agent="{{ ev.agent }}" data-kind="{{ ev.kind }}">
          <time class="exec-log__time">{{ ev.timestamp_label }}</time>
          <span class="exec-log__level">{{ ev.level | upper }}</span>
          {# Metadata tags share one auto-width grid cell — when there are
             no tags (kind=log + no asi), the cell collapses to zero and the
             message column claims the full remaining width. #}
          <span class="exec-log__meta">
            {% if ev.kind != 'log' %}<span class="exec-log__kind">{{ ev.kind }}</span>{% endif %}
            {% if ev.agent and ev.kind != 'log' %}<span class="exec-log__agent">{{ ev.agent }}</span>{% endif %}
            {% if ev.asi %}<span class="exec-log__asi">{{ ev.asi }}</span>{% endif %}
          </span>
          <span class="exec-log__msg{% if ev.kind == 'log' %} exec-log__msg--mono{% endif %}">{{ ev.summary }}</span>
        </li>
      {% endfor %}
    </ol>
  {% endif %}
  {% if logs_tail | length > 0 %}
    <script>
    /* Logs filter — client-side level chips + free-form search.
       State persisted in the URL hash as #logs?level=info,warn,error&q=<query>.
       100 ms debounce on input. Filter logic iterates DOM rows by data-level
       and the row's textContent; both are already escaped by Jinja autoescape. */
    (function () {
      var root = document.getElementById("tabpanel-logs");
      if (!root) { return; }
      var toolbar = root.querySelector(".exec-logs-filter");
      if (!toolbar) { return; }
      var chips = Array.prototype.slice.call(toolbar.querySelectorAll("[data-filter-level]"));
      var input = toolbar.querySelector(".exec-logs-filter__input");
      var countEl = toolbar.querySelector("[data-logs-filter-count]");
      var noMatchEl = root.querySelector(".exec-logs-filter__no-match");
      var rows = Array.prototype.slice.call(root.querySelectorAll(".exec-log"));

      function readHash() {
        var hash = window.location.hash || "";
        var match = hash.match(/^#logs\?(.*)$/);
        if (!match) { return null; }
        try {
          var params = new URLSearchParams(match[1]);
          var levelsRaw = params.get("level") || "";
          var levels = levelsRaw.split(",").filter(Boolean);
          var q = params.get("q") || "";
          return { levels: levels, q: q };
        } catch (e) { return null; }
      }

      function writeHash() {
        var enabled = chips
          .filter(function (c) { return c.getAttribute("aria-pressed") === "true"; })
          .map(function (c) { return c.getAttribute("data-filter-level"); });
        var q = (input.value || "").trim();
        var parts = ["level=" + enabled.join(",")];
        if (q) { parts.push("q=" + encodeURIComponent(q)); }
        var newHash = "#logs?" + parts.join("&");
        try {
          history.replaceState(null, "", window.location.pathname + window.location.search + newHash);
        } catch (e) {
          window.location.hash = newHash;
        }
      }

      function applyFilter() {
        var enabledSet = {};
        chips.forEach(function (c) {
          if (c.getAttribute("aria-pressed") === "true") {
            enabledSet[c.getAttribute("data-filter-level")] = true;
          }
        });
        var q = (input.value || "").trim().toLowerCase();
        var visible = 0;
        for (var i = 0; i < rows.length; i++) {
          var row = rows[i];
          var lvl = row.getAttribute("data-level") || "info";
          var levelOk = !!enabledSet[lvl];
          var queryOk = !q || (row.textContent || "").toLowerCase().indexOf(q) !== -1;
          var ok = levelOk && queryOk;
          row.hidden = !ok;
          if (ok) { visible++; }
        }
        if (countEl) {
          countEl.textContent = "Showing " + visible + " of " + rows.length + " events";
        }
        if (noMatchEl) {
          noMatchEl.hidden = visible !== 0;
        }
      }

      // Restore from hash, if any.
      var state = readHash();
      if (state) {
        var enabledLevels = state.levels.length ? state.levels : ["info", "warn", "error"];
        var enabledLookup = {};
        enabledLevels.forEach(function (l) { enabledLookup[l] = true; });
        chips.forEach(function (c) {
          c.setAttribute("aria-pressed", enabledLookup[c.getAttribute("data-filter-level")] ? "true" : "false");
        });
        if (state.q) { input.value = state.q; }
      }

      chips.forEach(function (c) {
        c.addEventListener("click", function () {
          var was = c.getAttribute("aria-pressed") === "true";
          c.setAttribute("aria-pressed", was ? "false" : "true");
          applyFilter();
          writeHash();
        });
      });

      var debounceT = null;
      input.addEventListener("input", function () {
        if (debounceT) { clearTimeout(debounceT); }
        debounceT = setTimeout(function () {
          applyFilter();
          writeHash();
        }, 100);
      });

      applyFilter();
    })();
    </script>
  {% endif %}

  {# SSE Phase 2, Step 2.4 — live-append row template. ``live-append.js``
     clones this ``<li>`` skeleton for every ``reflection`` event
     arrival. Element shape mirrors the server-side row exactly so a
     live row is visually indistinguishable from a snapshot row. Always
     present (including when ``logs_tail`` is empty) so the first
     arriving event has a clone target. #}
  <template data-row-template data-kind="log">
    <li class="exec-log" data-level="" data-agent="" data-kind="">
      <time class="exec-log__time" data-slot="timestamp"></time>
      <span class="exec-log__level" data-slot="level"></span>
      <span class="exec-log__meta">
        <span class="exec-log__kind" data-slot="kind"></span>
        <span class="exec-log__agent" data-slot="agent"></span>
        <span class="exec-log__asi" data-slot="asi"></span>
      </span>
      <span class="exec-log__msg" data-slot="summary"></span>
    </li>
  </template>
</section>