{# Plan 57 — system health strip (Row 1).
   Six service pills side-by-side, horizontally scrollable on narrow
   viewports. Data: /api/admin/overview/system (cached 10s). #}
<div class="card p-3">
  <div class="flex items-center justify-between mb-2">
    <div class="flex items-center gap-2">
      <i data-lucide="activity" class="w-3.5 h-3.5 text-cmdop-400"></i>
      <h2 class="text-[12px] font-semibold text-ink-100 tracking-tight">System health</h2>
      <span x-show="data.system && data.system.cached"
            class="text-[10px] uppercase tracking-wider text-ink-500"
            title="served from 10s cache">cached</span>
    </div>
    <span class="text-[11px] text-ink-500 font-mono"
          x-show="data.system"
          x-text="'uptime ' + formatDuration(data.system?.process_uptime_s)"></span>
  </div>

  <template x-if="data.system === null">
    <div class="text-[13px] text-ink-500">Loading system probes…</div>
  </template>

  <template x-if="data.system">
    <div class="flex gap-2 overflow-x-auto pb-1 -mx-0.5 px-0.5">
      <template x-for="svc in data.system.services" :key="svc.name">
        <div class="flex-shrink-0 min-w-[150px] flex items-center gap-2 px-3 py-2 rounded-md border"
             :class="svc.status === 'healthy' ? 'border-emerald-500/20 bg-emerald-500/[0.03]'
                   : svc.status === 'degraded' ? 'border-amber-500/30 bg-amber-500/[0.04]'
                   : 'border-red-500/30 bg-red-500/[0.04]'"
             :title="svc.hint || svc.details || ''">
          <span class="w-2 h-2 rounded-full flex-shrink-0"
                :class="svc.status === 'healthy' ? 'bg-emerald-400'
                      : svc.status === 'degraded' ? 'bg-amber-300 animate-pulse'
                      : 'bg-red-400 animate-pulse'"></span>
          <div class="min-w-0 flex-1">
            <div class="text-[12px] font-semibold text-ink-100 truncate" x-text="svc.name"></div>
            <div class="text-[10px] font-mono text-ink-500 flex items-center gap-1.5">
              <span x-text="svc.status"></span>
              <span x-show="svc.latency_ms !== null && svc.latency_ms !== undefined"
                    class="text-ink-400" x-text="'· ' + svc.latency_ms + 'ms'"></span>
            </div>
          </div>
        </div>
      </template>
    </div>
  </template>
</div>