{# Plan 57 — KPI cards (Row 2).
   4 wide cards: machines / sessions / LLM spend 24h / errors 24h.
   The machines + sessions tiles are imported as-is from the v1
   overview; the spend + errors cards are NEW and embed a 24-bar
   SVG sparkline. #}
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3">
  {% include 'admin/components/overview/_machines_card.html' %}
  {% include 'admin/components/overview/_sessions_card.html' %}

  {# Spend 24h #}
  <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="dollar-sign" class="w-4 h-4 text-cmdop-400"></i>
        <h2 class="text-[13px] font-semibold text-ink-100 tracking-tight">LLM spend</h2>
        <span class="text-[10px] uppercase tracking-wider text-ink-500">24h</span>
      </div>
    </div>
    <template x-if="data.spend === null">
      <div class="text-[13px] text-ink-500">Loading…</div>
    </template>
    <template x-if="data.spend">
      <div class="space-y-2">
        <div class="flex items-baseline justify-between gap-2">
          <span class="text-[28px] font-mono font-semibold tracking-tight text-ink-100"
                x-text="'$' + data.spend.total_usd.toFixed(2)"></span>
          <span class="text-ink-500" x-html="sparkline(data.spend.hourly, 80, 28, '#3b82f6')"></span>
        </div>
        <div class="text-[11px] text-ink-500 font-mono">
          peak <span x-text="'$' + Math.max(...data.spend.hourly).toFixed(2)"></span>/h
        </div>
        <template x-if="data.spend.total_usd === 0">
          <p class="text-[11px] text-ink-500 pt-2 border-t border-white/[0.06]">No LLM gateway calls in last 24h.</p>
        </template>
      </div>
    </template>
  </a>

  {# Errors 24h — replaces the old errors LIST card; that one moves into the activity feed. #}
  <a href="/admin/logs" class="card p-4 block">
    <div class="flex items-center justify-between mb-3">
      <div class="flex items-center gap-2">
        <i data-lucide="alert-triangle" class="w-4 h-4 text-cmdop-400"></i>
        <h2 class="text-[13px] font-semibold text-ink-100 tracking-tight">Errors</h2>
        <span class="text-[10px] uppercase tracking-wider text-ink-500">24h, sev ≥ med</span>
      </div>
    </div>
    <template x-if="data.errors24h === null">
      <div class="text-[13px] text-ink-500">Loading…</div>
    </template>
    <template x-if="data.errors24h">
      <div class="space-y-2">
        <div class="flex items-baseline justify-between gap-2">
          <span class="text-[28px] font-mono font-semibold tracking-tight"
                :class="data.errors24h.total > 50 ? 'text-red-300'
                      : data.errors24h.total > 10 ? 'text-amber-300'
                      : 'text-ink-100'"
                x-text="data.errors24h.total"></span>
          <span class="text-ink-500"
                x-html="sparkline(data.errors24h.hourly, 80, 28, data.errors24h.total > 50 ? '#f87171' : '#fbbf24')"></span>
        </div>
        <div class="text-[11px] text-ink-500 font-mono">
          peak <span x-text="Math.max(...data.errors24h.hourly)"></span>/h
        </div>
        <template x-if="data.errors24h.total === 0">
          <p class="text-[11px] text-ink-500 pt-2 border-t border-white/[0.06]">No medium-or-high events in last 24h.</p>
        </template>
      </div>
    </template>
  </a>
</div>