{# Plan 59 — owner/admin Row 3 (top): bot volume chart, fleet-scoped.
   The Plan 57 row paired this with the LLM volume chart; for fleet
   owners we drop LLM volume (server-admin signal) and let the bot
   chart hold the full width. #}
<div class="grid grid-cols-1 gap-3">
  <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 activity</h2>
        <span class="text-[10px] uppercase tracking-wider text-ink-500">24h</span>
      </div>
      <span class="text-[11px] text-ink-500 font-mono"
            x-show="data.botVolume"
            x-text="data.botVolume && (data.botVolume.total + ' messages')"></span>
    </div>
    <template x-if="data.botVolume === null">
      <div class="text-[13px] text-ink-500">Loading…</div>
    </template>
    <template x-if="data.botVolume">
      <div class="space-y-3">
        <div class="rounded-md chart-surface border border-white/[0.04] p-2"
             x-html="stackedBars(data.botVolume.success, data.botVolume.failure, null, ['#10b981','#f87171'])"></div>
        <div class="flex items-center gap-4 text-[11px] font-mono">
          <span class="flex items-center gap-1.5">
            <span class="w-2 h-2 rounded-sm bg-emerald-400"></span>
            <span class="text-ink-400">success</span>
            <span class="text-ink-200" x-text="sum(data.botVolume.success)"></span>
          </span>
          <span class="flex items-center gap-1.5">
            <span class="w-2 h-2 rounded-sm bg-red-400"></span>
            <span class="text-ink-400">failure</span>
            <span class="text-ink-200" x-text="sum(data.botVolume.failure)"></span>
          </span>
          <span class="ml-auto text-ink-500"
                x-show="data.botVolume.total > 0"
                x-text="((sum(data.botVolume.success) / data.botVolume.total) * 100).toFixed(1) + '% ok'"></span>
        </div>
        <template x-if="data.botVolume.total === 0">
          <p class="text-[11px] text-ink-500 pt-2 border-t border-white/[0.06]">Nobody chatted with bots in 24h.</p>
        </template>
      </div>
    </template>
  </a>
</div>