{# Plan 57 — activity charts (Row 3).
   Two wide cards: LLM volume 24h (chat/vision/embed) + bot volume 24h
   (success/failure). Both render 24 inline SVG bars — no charting lib.

   Decluttered: the whole row is hidden when there's no traffic at all in
   24h (two empty charts add noise, not signal). It reappears automatically
   the moment any LLM request or bot message lands. Still loading → shown
   so the skeleton doesn't flash away. #}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-3"
     x-show="!data.llmVolume || !data.botVolume || (data.llmVolume.total + data.botVolume.total) > 0"
     x-cloak>

  {# LLM activity #}
  <a href="/admin/llm/spend" class="card p-4 block">
    <div class="flex items-center justify-between mb-3">
      <div class="flex items-center gap-2">
        <i data-lucide="cpu" class="w-4 h-4 text-cmdop-400"></i>
        <h2 class="text-[13px] font-semibold text-ink-100 tracking-tight">LLM 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.llmVolume"
            x-text="data.llmVolume && (data.llmVolume.total + ' requests')"></span>
    </div>
    <template x-if="data.llmVolume === null">
      <div class="text-[13px] text-ink-500">Loading…</div>
    </template>
    <template x-if="data.llmVolume">
      <div class="space-y-3">
        <div class="rounded-md chart-surface border border-white/[0.04] p-2"
             x-html="stackedBars(data.llmVolume.chat, data.llmVolume.vision, data.llmVolume.embeddings, ['#3b82f6','#a78bfa','#10b981'])"></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-cmdop-500"></span>
            <span class="text-ink-400">chat</span>
            <span class="text-ink-200" x-text="sum(data.llmVolume.chat)"></span>
          </span>
          <span class="flex items-center gap-1.5">
            <span class="w-2 h-2 rounded-sm bg-purple-400"></span>
            <span class="text-ink-400">vision</span>
            <span class="text-ink-200" x-text="sum(data.llmVolume.vision)"></span>
          </span>
          <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">embed</span>
            <span class="text-ink-200" x-text="sum(data.llmVolume.embeddings)"></span>
          </span>
        </div>
        <template x-if="data.llmVolume.total === 0">
          <p class="text-[11px] text-ink-500 pt-2 border-t border-white/[0.06]">No LLM gateway traffic in 24h.</p>
        </template>
      </div>
    </template>
  </a>

  {# Bot activity #}
  <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>