{% comment %}
Shared activity-timeline content. Included by timeline.html, which extends the
SDK adapter (scitex_sdk/app/app_shell.html) and fills scitex_app_content,
so the surface works at any mount.

The timeline is a PROJECTION of signals SAC already published. Nothing here
invents activity: an agent the control plane cannot be asked about renders as
`unreachable` (an outage), never as quiet.

The initial render is SERVER-side so the page is useful with JS off and before
the first poll. The poll then refreshes it in place, bounded and deduped.
{% endcomment %}
<div class="agents-app" data-page="timeline"
     data-refresh-seconds="{{ refresh_seconds }}"
     data-timeline-url="{{ url_base }}/api/timeline">

  <header class="agents-head">
    <div class="agents-title">
      <a class="back" href="{{ url_base }}/"><i class="fas fa-arrow-left"></i> Fleet</a>
      <h1><i class="fas fa-wave-square"></i> Activity timeline</h1>
      <span class="agents-sub">
        Published signals from the SAC control plane — {{ listener }}
        {% if identity %} · acting as <strong>{{ identity }}</strong>{% endif %}
      </span>
    </div>
    <div class="agents-summary">
      <div class="sum-card"><span class="sum-num" data-count="total">{{ summary.total }}</span><span class="sum-label">entries</span></div>
      <div class="sum-card good"><span class="sum-num" data-count="observed">{{ summary.observed }}</span><span class="sum-label">observed</span></div>
      <div class="sum-card warn"><span class="sum-num" data-count="stale">{{ summary.stale }}</span><span class="sum-label">stale</span></div>
      <div class="sum-card"><span class="sum-num" data-count="unreachable">{{ summary.unreachable }}</span><span class="sum-label">unreachable</span></div>
    </div>
  </header>

  {% comment %}
  Filters are real form controls so they work without JS (they are query
  params the SERVER applies). The JS poll reads the same values, so the two
  paths cannot diverge.
  {% endcomment %}
  <form class="timeline-filters" method="get" action="{{ url_base }}/timeline">
    <label class="visually-hidden" for="tl-agent">Agent</label>
    <select id="tl-agent" name="agent">
      <option value="">All agents</option>
      {% for name in agent_names %}
      <option value="{{ name }}"{% if name == selected_agent %} selected{% endif %}>{{ name }}</option>
      {% endfor %}
    </select>
    <label class="visually-hidden" for="tl-kind">Signal</label>
    <select id="tl-kind" name="kind">
      <option value="">All signals</option>
      {% for kind, label in kinds %}
      <option value="{{ kind }}"{% if kind == selected_kind %} selected{% endif %}>{{ label }}</option>
      {% endfor %}
    </select>
    <button type="submit" class="btn">Apply</button>
    <span class="tl-live" data-role="poller-state" aria-live="polite">
      <i class="fas fa-circle"></i> auto-refresh every {{ refresh_seconds }}s
    </span>
  </form>

  {% if not entries %}
  <div class="agents-notice empty" role="status">
    <i class="fas fa-inbox"></i>
    <h2>No timeline entries</h2>
    <p>{% if selected_agent or selected_kind %}No published signal matches this
    filter.{% else %}The control plane has published no runtime activity for the
    agents in your scope.{% endif %}</p>
  </div>
  {% else %}
  <ol class="timeline" data-role="timeline">
    {% for e in entries %}
    <li class="tl-entry tl-{{ e.state }}" data-key="{{ e.key }}"{% if e.event_key %} data-event-key="{{ e.event_key }}" data-observed-at="{{ e.at }}" data-age-seconds="{{ e.age_seconds }}"{% endif %}{% if e.snapshot %} data-snapshot-key="{{ e.snapshot_key }}" data-native-agent="{{ e.agent }}" data-native-session="{{ e.native_session }}"{% if e.native_session_at is not None %} data-native-session-at="{{ e.native_session_at }}"{% endif %}{% if e.at is not None %} data-observed-at="{{ e.at }}"{% endif %}{% endif %}>
      <span class="tl-dot {{ e.state }}" aria-hidden="true"></span>
      {% if e.iso %}<time class="tl-when" datetime="{{ e.iso }}">{{ e.relative }}</time>{% else %}<span class="tl-when">{{ e.relative }}</span>{% endif %}
      <span class="tl-agent"><a href="{{ url_base }}/{{ e.agent }}/">{{ e.agent }}</a></span>
      <span class="tl-kind">{{ e.kind_label }}</span>
      <span class="tl-value">{% if e.display_value is not None %}{{ e.display_value }}{% else %}<span class="dim">—</span>{% endif %}{% if e.reason %}<small class="tl-reason dim">{{ e.reason }}</small>{% endif %}{% if e.note %}<small class="tl-reason dim">{{ e.note }}</small>{% endif %}</span>
      <span class="tl-state tl-state-{{ e.state }}">{{ e.state_label }}</span>
      {% if e.source %}<span class="tl-source dim">{{ e.source }}</span>{% endif %}
    </li>
    {% endfor %}
  </ol>
  <p class="dim timeline-note">
    Only runner-published state is shown. <strong>Unknown</strong> means SAC
    published no signal or its age is unknown; <strong>stale</strong> means the last real observation
    has aged past {{ stale_after_seconds|floatformat:0 }}s;
    <strong>unreachable</strong> means the listener could not be asked, which is
    an outage rather than silence. Entries are deduped, so a refresh does not
    replay a row that has not changed.
    Counts describe the displayed rows for these filters, including retained
    history. Unknown rows are included in entries.
    Native counters are static snapshots. Completed tool lifecycles do not
    establish tool success or count nested tools. Capacity is shown only as
    Unknown until an authoritative measurement contract is available.
  </p>
  {% endif %}

  <div class="agents-bannor err timeline-error" data-role="timeline-error" role="alert" hidden>
    <i class="fas fa-triangle-exclamation"></i>
    <span>Refresh failed.</span>
    <small data-role="timeline-error-text"></small>
  </div>
</div>