{% extends "base.html" %}
{% block title %}Memory health{% endblock %}
{% block content %}
  <h1 class="text-2xl font-semibold">Memory health</h1>
  <p class="mt-1 text-sm text-slate-600">Top-line metrics for the current agent scope.</p>

  <section class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
    <div class="rounded-lg border border-slate-200 bg-white p-4">
      <h2 class="text-sm font-medium text-slate-600">Total memories</h2>
      <p class="mt-2 text-3xl font-semibold text-slate-900">{{ metrics.total }}</p>
      <a class="mt-3 inline-block text-xs text-slate-500 hover:text-slate-900" href="/audit?operation=remember">see remembers →</a>
    </div>

    <div class="rounded-lg border border-slate-200 bg-white p-4">
      <h2 class="text-sm font-medium text-slate-600">Staleness</h2>
      <p class="mt-2 text-3xl font-semibold text-slate-900">{{ "%.1f"|format(metrics.stale_pct) }}%</p>
      <p class="text-xs text-slate-500">{{ metrics.stale_count }} not recalled in &gt;30 days</p>
      <a class="mt-3 inline-block text-xs text-slate-500 hover:text-slate-900" href="/audit?operation=recall">see recalls →</a>
    </div>

    <div class="rounded-lg border border-slate-200 bg-white p-4">
      <h2 class="text-sm font-medium text-slate-600">Drift pairs</h2>
      <p class="mt-2 text-3xl font-semibold text-slate-900">{{ metrics.drift_pairs }}</p>
      <p class="text-xs text-slate-500">contradiction candidates (same user, &gt;0.7 token overlap)</p>
      <a class="mt-3 inline-block text-xs text-slate-500 hover:text-slate-900" href="/co-memorize">review merges →</a>
    </div>

    <div class="rounded-lg border border-slate-200 bg-white p-4">
      <h2 class="text-sm font-medium text-slate-600">Type coverage</h2>
      {% if coverage %}
        <ul class="mt-2 space-y-2">
          {% for row in coverage %}
            <li>
              <div class="flex justify-between text-xs">
                <span class="font-medium">{{ row.type }}</span>
                <span class="text-slate-500">{{ row.count }}</span>
              </div>
              <div class="h-2 w-full rounded bg-slate-100">
                <div class="h-2 rounded bg-slate-500" style="width: {{ row.width_pct }}%"></div>
              </div>
            </li>
          {% endfor %}
        </ul>
      {% else %}
        <p class="mt-2 text-xs text-slate-500">No memories yet.</p>
      {% endif %}
      <a class="mt-3 inline-block text-xs text-slate-500 hover:text-slate-900" href="/audit">see audit →</a>
    </div>
  </section>
{% endblock %}