{# Pane 2 — Active agent sessions. #}
<a href="/admin/machines" class="card p-4 block">
  <div class="flex items-center justify-between mb-3">
    <div class="flex items-center gap-2">
      <i data-lucide="activity" class="w-4 h-4 text-cmdop-400"></i>
      <h2 class="text-[13px] font-semibold text-ink-100 tracking-tight">Active sessions</h2>
    </div>
  </div>
  <template x-if="data.sessions === null">
    <div class="text-[13px] text-ink-500">Loading…</div>
  </template>
  <template x-if="data.sessions">
    <div class="space-y-2">
      <div class="flex items-baseline gap-3">
        <span class="text-[28px] font-mono font-semibold tracking-tight text-ink-100" x-text="data.sessions.connected"></span>
        <span class="text-[12px] text-ink-400">connected</span>
      </div>
      <div class="text-[11px] text-ink-500 font-mono"
           x-show="data.sessions.background > 0">
        <span x-text="data.sessions.background"></span> in background
      </div>
      <template x-if="data.sessions.connected === 0 && data.sessions.background === 0">
        <p class="text-[11px] text-ink-500 pt-2 border-t border-white/[0.06]">No agents talking to the relay right now.</p>
      </template>
    </div>
  </template>
</a>