{# Global progress bar fragment. Polled by base.html via HTMX. #}
{# When no runs are active, returns an empty fragment — base.html wraps us in a
   <div hx-get=... hx-trigger="every 2s" hx-swap="outerHTML"> so the empty
   fragment just collapses the bar. #}
{% if runs %}
<div class="global-progress" id="global-progress"
     hx-get="/api/agents/active"
     hx-trigger="every 2s"
     hx-swap="outerHTML">
  <div class="global-progress-inner">
    <span class="global-progress-pulse"></span>
    <span class="global-progress-label">
      <strong>{{ runs | length }}</strong> 个 agent 正在跑
    </span>
    <ul class="global-progress-runs">
      {% for r in runs %}
        <li class="global-progress-run global-progress-run--{{ r.status }}">
          <a href="/agents/run/{{ r.id }}" class="global-progress-run-link">
            <span class="global-progress-run-kind">{{ r.agent_kind }}</span>
            <code class="global-progress-run-id">{{ r.agent_id }}</code>
            {% if r.current_node %}
              <span class="global-progress-run-node global-progress-run-node--{{ r.current_node_state or 'pending' }}">
                {%- if r.current_node_state == 'active' %}⟳{% elif r.current_node_state == 'done' %}✓{% elif r.current_node_state == 'failed' %}✗{% else %}○{% endif -%}
                {{ r.current_node }}
              </span>
            {% else %}
              <span class="global-progress-run-node global-progress-run-node--pending">○ 启动中</span>
            {% endif %}
          </a>
        </li>
      {% endfor %}
    </ul>
  </div>
</div>
{% else %}
{# Empty fragment — bar is hidden. The outer wrapper in base.html still
   polls every 2s so the bar reappears as soon as a run starts. #}
<div id="global-progress-empty" hidden
     hx-get="/api/agents/active"
     hx-trigger="every 2s"
     hx-swap="outerHTML"></div>
{% endif %}