{% comment %}
Shared Agents fleet content. Included by:
  * fleet.html        (standalone: inside scitex_ui/standalone_shell.html)
  * fleet_hub.html    (Hub: inside global_base.html — no second header)
`url_base` is the app's mount prefix ("" at root, "/apps/agents" when
mounted) so the per-row links are correct in both modes.
{% endcomment %}
<div class="agents-app" data-page="fleet" data-fleet-state="{{ fleet_state|default:'loading' }}">
  <header class="agents-head">
    <div class="agents-title">
      <h1><i class="fas fa-robot"></i> Agents</h1>
      <span class="agents-sub">{% if observed_age is not None %}Last known {{ observed_age|floatformat:0 }}s ago{% else %}Fleet{% endif %}</span>
    </div>
    <div class="agents-summary">
      <div class="sum-card"><span class="sum-num">{{ summary.total }}</span><span class="sum-label">visible</span></div>
      <div class="sum-card good"><span class="sum-num">{{ summary.alive }}</span><span class="sum-label">alive</span></div>
      <div class="sum-card warn"><span class="sum-num">{{ summary.attention }}</span><span class="sum-label">need attention</span></div>
      {% if summary.cross_host %}
      <div class="sum-card cross"><span class="sum-num">{{ summary.cross_host }}</span><span class="sum-label">cross-host</span></div>
      {% endif %}
    </div>
  </header>

  {% comment %}
  P0: this banner used to print the raw listener URL, the env-var names and a
  bearer-token instruction into the BROWSER. A browser must never receive an
  internal endpoint, a config key name, or deployment prose - that is operator
  information, and on a shared host it is an information leak. The user-facing
  copy is now state + Retry only; the diagnostic detail stays server-side.
  {% endcomment %}
  {% if fleet_state == "loading" %}
  <div class="agents-loading" role="status" aria-live="polite">
    <span class="agents-sr-only">Loading the agent fleet</span>
    <div class="skel-row"></div><div class="skel-row"></div><div class="skel-row"></div>
    <p class="dim timeline-note">Reading the fleet…</p>
  </div>
  {% endif %}

  {% if fleet_state == "unavailable" %}
  <div class="agents-bannor err" role="alert">
    <i class="fas fa-triangle-exclamation"></i>
    <span>The fleet is not available right now.</span>
    <small>Your agents are unaffected — this is the console failing to reach its
    data source, not your fleet going away.</small>
    <small class="diag">
      <button type="button" class="btn btn-retry" data-action="retry"
              onclick="window.location.reload()"><i class="fas fa-rotate"></i> Retry</button>
    </small>
  </div>
  {% endif %}

  {% if fleet_state == "cached" %}
  <div class="agents-bannor" role="status">
    <i class="fas fa-clock-rotate-left"></i>
    <span>Showing the last known inventory{% if observed_age is not None %} from {{ observed_age|floatformat:0 }}s ago{% endif %}.</span>
    <small>This may be out of date; it refreshes automatically.</small>
  </div>
  {% endif %}

  <div class="agents-scope-note">
    <span><i class="fas fa-user"></i> acting as <strong>{{ identity|default:"(unidentified)" }}</strong></span>
    {% if crosshost_authorized %}
    <span class="pill cross"><i class="fas fa-globe"></i> cross-host fleet authorized</span>
    {% else %}
    <span class="pill own"><i class="fas fa-lock"></i> own-scope only</span>
    {% endif %}
    {% if can_launch %}
    <a class="btn good" href="{{ url_base }}/launch/"><i class="fas fa-rocket"></i> Launch agent</a>
    {% endif %}
    <a class="btn" href="{{ url_base }}/a2a/"><i class="fas fa-share-nodes"></i> A2A</a>
    <a class="btn" href="{{ url_base }}/timeline/"><i class="fas fa-timeline"></i> Activity</a>
  </div>

  {% if agents %}
  <div class="agents-table-wrap">
  <table class="agents-table">
    <thead>
      <tr>
        <th>Agent</th><th>State</th><th>Runtime</th><th>Billing</th>
        <th>Auth identity</th><th>Harness</th><th>Engine / Model</th>
        <th>Activity</th><th>Host</th><th>a2a port</th>
        <th class="row-actions">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for a in agents %}
      <tr class="row {{ a.state_tone }}{% if a.cross_host %} cross{% endif %}">
        <td class="c-name"><a href="{{ url_base }}/{{ a.name }}/" title="{{ a.name }}">{{ a.name }}</a>
          {% if a.cross_host %}<span class="pill cross-mini">remote</span>{% endif %}</td>
        <td title="{{ a.state_detail }}"><span class="dot {{ a.state_tone }}"></span>{{ a.state_label }}</td>
        <td>{{ a.runtime }}</td>
        <td>{{ a.billing_mode }}</td>
        <td title="identity source: {{ a.runtime_identity_source }}">{{ a.auth_identity }}</td>
        <td>{{ a.harness }}</td>
        <td class="c-em">{{ a.engine }}<span class="dim"> / {{ a.model }}</span><span class="identity-source">{{ a.runtime_identity_source }}</span></td>
        <td class="c-activity">
          {% if a.activity.operation.state == "observed" %}{{ a.activity.operation.value }}{% else %}<span class="dim" title="{{ a.activity.operation.reason }}">unknown</span>{% endif %}
          {% if a.activity.phase.state == "observed" %}<span class="dim"> · {{ a.activity.phase.value }}</span>{% endif %}
        </td>
        <td class="c-host">{{ a.host }}</td>
        <td class="c-port">{% if a.a2a_port %}{{ a.a2a_port }}{% else %}<span class="dim">—</span>{% endif %}</td>
        <td class="row-actions">
          <a class="btn btn-detail" href="{{ url_base }}/{{ a.name }}/">inspect</a>
          {% comment %}
          Per-row quick actions: the same Start/Restart/Stop POSTs the detail
          page offers (same <name>/action route, same operator gate), plus a
          one-line message POST to <name>/message. Gate mirrors the POST
          handlers exactly: own-scope rows need the lifecycle-operator list
          (`can_launch`), cross-host rows need the cross-host list
          (`can_control_crosshost`, decided once per render, not per row).
          {% endcomment %}
          {% if a.cross_host and can_control_crosshost or not a.cross_host and can_launch %}
          <span class="quick-actions">
            <form method="post" action="{{ url_base }}/{{ a.name }}/action" class="qa-form">
              {% if csrf_token %}<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">{% endif %}
              <button type="submit" name="action" value="start" class="btn qa good" title="Start {{ a.name }}">Start</button>
              <button type="submit" name="action" value="restart" class="btn qa" title="Restart {{ a.name }}">Restart</button>
              <button type="submit" name="action" value="stop" class="btn qa bad" title="Stop {{ a.name }}">Stop</button>
            </form>
            <form method="post" action="{{ url_base }}/{{ a.name }}/message" class="qa-form qa-msg">
              {% if csrf_token %}<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">{% endif %}
              <label class="visually-hidden" for="qa-msg-{{ a.name }}">Message {{ a.name }}</label>
              <input id="qa-msg-{{ a.name }}" type="text" name="message" maxlength="4000" required
                     placeholder="Message…" autocomplete="off">
              <button type="submit" class="btn qa" title="Send a message to {{ a.name }}">Send</button>
            </form>
          </span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
  {% else %}
  {% if fleet_state == "empty" %}
  <div class="agents-empty"><i class="fas fa-inbox"></i> No agents visible to
    <strong>{{ identity|default:"(unidentified)" }}</strong> in this scope.</div>
  {% endif %}
  {% endif %}

  {% comment %}
  B1: a cold shell renders as `loading`. This READ-ONLY poll warms the server's
  last-known snapshot via /api/fleet, then a single reload shows the true state
  (the inventory, or unavailable + Retry). It only fires while loading, stops
  after the one authoritative response, and issues only a GET - it never blocks
  first paint and never loops. (The Retry button above does the same reload.)
  {% endcomment %}
  {% if fleet_state == "loading" %}
  <script>
  (function () {
    var base = "{{ url_base }}";
    fetch(base + "/api/fleet", { method: "GET", credentials: "same-origin" })
      .then(function () { window.location.reload(); })
      .catch(function () { /* console itself unreachable: stay in loading, do not loop */ });
  })();
  </script>
  {% endif %}
</div>