{% comment %}
Shared Agents detail content. Included by detail.html, which extends the SDK
adapter (scitex_sdk/app/app_shell.html) and fills scitex_app_content.
`url_base` is the app mount prefix so the
back link and the lifecycle form action are correct at any mount.
{% endcomment %}
<div class="agents-app agents-app--fragment" data-page="detail">
  {# Fragment render (?partial=1 into the fleet Details pane): no app #}
  {# header - the fleet page already owns the one header row. The full #}
  {# detail.html page includes the header through its own block. #}
  {% if not fragment %}
  {% include "scitex_agent_container/_app_header.html" %}
  {% endif %}

  {% if not agent %}
  <div class="agents-bannor err" role="alert">
    <i class="fas fa-lock"></i>
    <span>This agent is not visible to <strong>{{ identity|default:"(unidentified)" }}</strong>.</span>
    <small>Cross-host agents are hidden unless the acting identity is explicitly
    authorized for the fleet.</small>
    {% if list_error %}<br><small>Listener: {{ list_error }}</small>{% endif %}
  </div>
  {% else %}
  {% comment %}
  Last delivery outcome: lifecycle/message POSTs redirect back here with
  ?operation=&state=&message=, and this banner is where that delivery status
  lands — next to the forms that caused it. Only server-minted operation
  names render (see _delivery_notice), so the query string cannot inject
  banner copy.
  {% endcomment %}
  {% if notice %}
  <div class="agents-bannor {% if notice.state == 'completed' or notice.state == 'delivered' %}ok{% elif notice.state == 'replay' %}{% else %}err{% endif %}" role="status">
    <i class="fas fa-circle-info"></i>
    <span>{{ notice.operation }}: {{ notice.state }}</span>
    {% if notice.message %}<small class="mono">{{ notice.message }}</small>{% endif %}
    {% if notice.dispatch_id %}<small class="dim mono">dispatch {{ notice.dispatch_id }}</small>{% endif %}
  </div>
  {% endif %}
  {% if not fragment %}
  <h2 class="detail-name">{{ agent.name }}</h2>
  {% endif %}
  {# Operator 2026-10-22: 5 tabs (Identity, Runtime Activity, Control, #}
  {# Resources, Recent Session Log) — the standalone Message thread card is #}
  {# gone (its thread renders in the center DM pane). No-JS fallback: every #}
  {# panel is visible until fleet-details.js activates the first tab. POST #}
  {# forms/endpoints inside are byte-identical to the old <details> cards. #}
  <div class="detail-tabs" data-detail-tabs>
    <div class="detail-tablist" role="tablist" aria-label="Agent details">
      <button type="button" class="detail-tab detail-tab--active" role="tab" id="dt-{{ agent.name }}-identity" aria-controls="dp-{{ agent.name }}-identity" aria-selected="true" data-detail-tab="identity">Identity</button>
      <button type="button" class="detail-tab" role="tab" id="dt-{{ agent.name }}-activity" aria-controls="dp-{{ agent.name }}-activity" aria-selected="false" data-detail-tab="activity" tabindex="-1">Runtime Activity</button>
      <button type="button" class="detail-tab" role="tab" id="dt-{{ agent.name }}-control" aria-controls="dp-{{ agent.name }}-control" aria-selected="false" data-detail-tab="control" tabindex="-1">Control</button>
      <button type="button" class="detail-tab" role="tab" id="dt-{{ agent.name }}-resources" aria-controls="dp-{{ agent.name }}-resources" aria-selected="false" data-detail-tab="resources" tabindex="-1">Resources</button>
      <button type="button" class="detail-tab" role="tab" id="dt-{{ agent.name }}-session" aria-controls="dp-{{ agent.name }}-session" aria-selected="false" data-detail-tab="session" tabindex="-1">Recent Session Log</button>
    </div>
    <section class="detail-card detail-tabpanel" role="tabpanel" id="dp-{{ agent.name }}-identity" aria-labelledby="dt-{{ agent.name }}-identity" data-detail-panel="identity" tabindex="0">
      <div class="detail-state">
        <span class="dot {{ agent.state_tone }}"></span>
        <span class="detail-state-label {{ agent.state_tone }}">{{ agent.state_label }}</span>
        {% if cross_host %}<span class="pill cross">cross-host</span>{% endif %}
      </div>
      <dl class="kv">
        <dt>Runtime</dt><dd>{{ agent.runtime }}</dd>
        <dt>Billing</dt><dd>{{ agent.billing_mode }}</dd>
        <dt>Auth identity</dt><dd>{{ agent.auth_identity }}</dd>
        <dt>Identity source</dt><dd>{{ agent.runtime_identity_source }}</dd>
        <dt>Harness</dt><dd>{{ agent.harness }}</dd>
        <dt>Role</dt><dd>{{ agent.role }}</dd>
        <dt>Engine</dt><dd>{{ agent.engine }}</dd>
        <dt>Model</dt><dd>{{ agent.model }}</dd>
        <dt>Project</dt><dd>{{ agent.project }}</dd>
        <dt>Host</dt><dd>{{ agent.host }}</dd>
        <dt>PID</dt><dd>{{ agent.pid|default:"—" }}</dd>
        <dt>a2a port</dt><dd>{{ agent.a2a_port|default:"—" }}</dd>
        <dt>Turn URL</dt><dd class="mono">{{ agent.turn_url|default:"—" }}</dd>
        <dt>Session</dt><dd class="mono">{{ agent.session|default:"—" }}</dd>
        {% if agent.detail.started_at %}<dt>Started</dt><dd>{{ agent.detail.started_at }}</dd>{% endif %}
      </dl>
    </section>

    <section class="detail-card detail-tabpanel" role="tabpanel" id="dp-{{ agent.name }}-activity" aria-labelledby="dt-{{ agent.name }}-activity" data-detail-panel="activity" tabindex="0">
      <dl class="kv activity-kv">
        <dt>Phase</dt><dd>{% if agent.activity.phase.state == "observed" %}{{ agent.activity.phase.value }}{% else %}<span class="unknown" title="{{ agent.activity.phase.reason }}">Unknown</span>{% endif %}</dd>
        <dt>Operation</dt><dd>{% if agent.activity.operation.state == "observed" %}{{ agent.activity.operation.value }}{% else %}<span class="unknown" title="{{ agent.activity.operation.reason }}">Unknown</span>{% endif %}</dd>
        <dt>Turn elapsed</dt><dd>{% if agent.activity.turn_elapsed.state == "observed" %}{{ agent.activity.turn_elapsed.value }} s{% else %}<span class="unknown" title="{{ agent.activity.turn_elapsed.reason }}">Unknown</span>{% endif %}</dd>
        <dt>Last progress</dt><dd>{% if agent.activity.last_progress.state == "observed" %}{{ agent.activity.last_progress.value }}{% else %}<span class="unknown" title="{{ agent.activity.last_progress.reason }}">Unknown</span>{% endif %}</dd>
        <dt>Queue</dt><dd>{% if agent.activity.queue.state == "observed" %}{{ agent.activity.queue.value }}{% else %}<span class="unknown" title="{{ agent.activity.queue.reason }}">Unknown</span>{% endif %}</dd>
        <dt>Inference</dt><dd>{% if agent.activity.inference.state == "observed" %}{{ agent.activity.inference.value }}{% else %}<span class="unknown" title="{{ agent.activity.inference.reason }}">Unknown</span>{% endif %}</dd>
        <dt>Tool</dt><dd>{% if agent.activity.tool.state == "observed" %}{{ agent.activity.tool.value }}{% else %}<span class="unknown" title="{{ agent.activity.tool.reason }}">Unknown</span>{% endif %}</dd>
        <dt>Wait</dt><dd>{% if agent.activity.wait.state == "observed" %}{{ agent.activity.wait.value }}{% else %}<span class="unknown" title="{{ agent.activity.wait.reason }}">Unknown</span>{% endif %}</dd>
      </dl>
      <p class="dim activity-note">Only runner-published state is shown. Unknown means SAC has no authoritative signal; session logs are not guessed into activity.</p>
    </section>

    <section class="detail-card detail-tabpanel" role="tabpanel" id="dp-{{ agent.name }}-control" aria-labelledby="dt-{{ agent.name }}-control" data-detail-panel="control" tabindex="0">
      {% if agent.state_detail %}
      <p class="dim">Status: <span class="mono">{{ agent.state_detail }}</span></p>
      {% endif %}
      {% if agent.detail_error %}
      <p class="dim">Status endpoint unavailable: <span class="mono">{{ agent.detail_error }}</span></p>
      {% endif %}
      {% if can_operate %}
      <p class="dim">
        {% if cross_host %}
        Cross-host control — this action is recorded in the operator audit trail.
        {% else %}
        You are an authorized lifecycle operator for this node's agents.
        {% endif %}
      </p>
      <form method="post" action="{{ url_base }}/{{ agent.name }}/action" class="lifecycle-form">
        {% if csrf_token %}<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">{% endif %}
        <div class="lifecycle-btns">
          <button type="submit" name="action" value="start" class="btn good"><i class="fas fa-play"></i> Start</button>
          <button type="submit" name="action" value="restart" class="btn"><i class="fas fa-rotate"></i> Restart</button>
          <button type="submit" name="action" value="stop" class="btn bad"><i class="fas fa-stop"></i> Stop</button>
        </div>
      </form>

      {% comment %}
      Message / steer and the three SAC UI-control keys. Both POST to the
      agent's OWN bridge endpoint (its published turn_url) — the GUI never
      constructs a host/port and never drives tmux. Each submit carries a
      dispatch id so a double-click cannot inject the text twice.
      {% endcomment %}
      {# Message thread (operator 2026-10-23): chat-style, Cards DM idiom #}
      {# ported leaf-side (no cross-app dependency, different ports). Same #}
      {# POST endpoint + gate; operator sends render right, session lines #}
      {# render left. The console still keeps no operator transcript — the #}
      {# last-send banner below is the delivery receipt. #}
      <h3 class="control-sub" id="message">Messages</h3>
      <div class="chat-thread" data-role="chat-thread">
      {% if notice and notice.operation == "message" or notice and notice.operation == "control" %}
      <div class="chat-row chat-row--out">
        <div class="chat-bubble chat-bubble--out">
          <span class="mono">{{ notice.message|default:notice.operation }}</span>
        </div>
        <div class="chat-meta">{{ notice.operation }} · {{ notice.state }}</div>
      </div>
      {% endif %}
      {% if agent.session_lines %}
      {% for line in agent.session_lines|slice:"-8:" %}
      <div class="chat-row chat-row--in">
        <div class="chat-bubble chat-bubble--in mono">{{ line }}</div>
      </div>
      {% endfor %}
      {% elif not notice %}
      <p class="dim session-note">No messages yet. Send the first one below.</p>
      {% endif %}
      </div>
      <form method="post" action="{{ url_base }}/{{ agent.name }}/message" class="message-form chat-composer" data-composer="dm">
        {% if csrf_token %}<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">{% endif %}
        <input type="hidden" name="dispatch_id" value="{{ dispatch_id }}">
        <label class="visually-hidden" for="msg-{{ agent.name }}">Message</label>
        <textarea id="msg-{{ agent.name }}" name="message" rows="3" maxlength="4000"
                  placeholder="Message {{ agent.name }}… (Enter to send, Shift+Enter for a new line)"></textarea>
        <span class="composer-actions">
          <button type="button" class="btn emoji-btn" data-emoji-button title="Insert emoji" aria-label="Insert emoji">😀</button>
          <button type="submit" class="btn" title="Send"><i class="fas fa-paper-plane"></i></button>
        </span>
      </form>

      <h3 class="control-sub">UI control</h3>
      <p class="dim">Positional input to the agent's live terminal — Enter submits,
      Escape dismisses, C-c interrupts. Nothing else is available.</p>
      <form method="post" action="{{ url_base }}/{{ agent.name }}/message" class="control-form">
        {% if csrf_token %}<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">{% endif %}
        <input type="hidden" name="dispatch_id" value="{{ dispatch_id }}">
        <div class="lifecycle-btns">
          {% for key in control_keys %}
          <button type="submit" name="control_key" value="{{ key }}" class="btn">{{ key }}</button>
          {% endfor %}
        </div>
      </form>
      {% else %}
      <p class="dim"><i class="fas fa-lock"></i> Read-only. Control requires an
      identity listed in the lifecycle-operator allowlist{% if cross_host %} — or, for
      cross-host agents, the cross-host operator allowlist{% endif %}.</p>
      {% endif %}
    </section>

    {# Message thread card removed (operator 2026-10-22): its thread already #}
    {# renders in the fleet center DM pane (moved out of Control above). #}

    <section class="detail-card detail-tabpanel" role="tabpanel" id="dp-{{ agent.name }}-resources" aria-labelledby="dt-{{ agent.name }}-resources" data-detail-panel="resources" tabindex="0">
      {% with r=agent.resources %}
      {% if r.state == "ok" %}
      <dl class="kv">
        <dt>PID</dt><dd class="mono">{{ r.pid }}</dd>
        <dt>RSS</dt><dd class="mono">{{ r.rss|default:"—" }}</dd>
        <dt>VSZ</dt><dd class="mono">{{ r.vsz|default:"—" }}</dd>
        <dt>CPU ticks</dt><dd class="mono">{{ r.cpu_ticks|default:"—" }}</dd>
        <dt>Process tree</dt><dd>{{ r.tree_size }} process(es)</dd>
      </dl>
      {% elif r.state == "namespace" %}
      <p class="dim"><i class="fas fa-boxes"></i> PID {{ r.pid }} is reported by the listener but runs in a
      separate pid namespace (apptainer isolation) — live CPU/memory cannot be
      read from the web process, so no value is shown rather than a guessed one.</p>
      {% else %}
      <p class="dim"><i class="fas fa-power-off"></i> No process to read (agent not started or stopped).</p>
      {% endif %}
      {% endwith %}
    </section>

    <section class="detail-card detail-tabpanel" role="tabpanel" id="dp-{{ agent.name }}-session" aria-labelledby="dt-{{ agent.name }}-session" data-detail-panel="session" tabindex="0">
      {% if agent.session_error %}
      <p class="dim">Log unavailable: <span class="mono">{{ agent.session_error }}</span></p>
      {% elif agent.session_lines %}
      <ul class="session-log mono">
        {% for line in agent.session_lines %}
        <li>{{ line }}</li>
        {% endfor %}
      </ul>
      <p class="dim session-note">Tail (last {{ agent.session_lines|length }} lines), secrets redacted.</p>
      {% else %}
      <p class="dim">No session log recorded yet.</p>
      {% endif %}
    </section>
  </div>
  {% endif %}
</div>