{# Plan 59 — KPI row for the owner/admin overview (3 cards).
   Re-uses the Plan 57 machines + sessions cards, drops LLM spend
   (server-admin concern), adds Bots-24h. Bots is fleet-scoped — the
   `/api/admin/overview/bots` route already filters by caller fleet. #}
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
  {% include 'admin/components/overview/_machines_card.html' %}
  {% include 'admin/components/overview/_sessions_card.html' %}

  {# Bots 24h — single number + success-rate chip #}
  <a href="/admin/bots" class="card p-4 block">
    <div class="flex items-center justify-between mb-3">
      <div class="flex items-center gap-2">
        <i data-lucide="bot" class="w-4 h-4 text-cmdop-400"></i>
        <h2 class="text-[13px] font-semibold text-ink-100 tracking-tight">Bot messages</h2>
        <span class="text-[10px] uppercase tracking-wider text-ink-500">24h</span>
      </div>
    </div>
    <template x-if="data.bots === null">
      <div class="text-[13px] text-ink-500">Loading…</div>
    </template>
    <template x-if="data.bots">
      <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.bots.messages_24h"></span>
          <span class="text-[12px] text-ink-400">messages</span>
        </div>
        <div class="text-[11px] text-ink-500 font-mono"
             x-show="data.bots.messages_24h > 0">
          <span class="text-emerald-300"
                x-text="(data.bots.success_rate * 100).toFixed(1) + '%'"></span>
          ok ·
          <span x-text="data.bots.failures_24h"></span> failed
        </div>
        <template x-if="data.bots.messages_24h === 0">
          <p class="text-[11px] text-ink-500 pt-2 border-t border-white/[0.06]">No bot chat traffic in last 24h.</p>
        </template>
      </div>
    </template>
  </a>
</div>