{% extends "base.html" %}

{% block title %}Cognitive Pulse{% endblock %}
{% block page_title %}Cognitive Pulse{% endblock %}

{% block header_actions %}
<button onclick="openQuickCreate('reminder')" class="text-xs px-2.5 py-1 rounded-md bg-slate-800 text-slate-300 hover:bg-slate-700 transition-colors">+ Reminder</button>
<button onclick="openQuickCreate('followup')" class="text-xs px-2.5 py-1 rounded-md bg-slate-800 text-slate-300 hover:bg-slate-700 transition-colors">+ Followup</button>
<button onclick="openQuickCreate('note')" class="text-xs px-2.5 py-1 rounded-md bg-slate-800 text-slate-300 hover:bg-slate-700 transition-colors">+ Note</button>
{% endblock %}

{% block content %}
<div class="space-y-4">
  <!-- Row 1: 4 stat cards -->
  <div class="grid grid-cols-4 gap-4">
    <!-- Trust Score -->
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">Trust Score</div>
      <div class="flex items-center gap-4">
        <div class="relative">
          <svg id="trust-gauge" viewBox="0 0 80 80" class="w-16 h-16">
            <circle cx="40" cy="40" r="32" fill="none" stroke="rgba(51,65,85,0.4)" stroke-width="6"/>
            <circle id="trust-arc" cx="40" cy="40" r="32" fill="none" stroke="#7C3AED" stroke-width="6"
              stroke-dasharray="0 201" stroke-dashoffset="50.3" stroke-linecap="round"
              style="transition: stroke-dasharray 1s ease-out, stroke 0.5s;"/>
            <text id="trust-center" x="40" y="44" text-anchor="middle" fill="#7C3AED" class="font-mono font-bold" style="font-size:16px">--</text>
          </svg>
        </div>
        <div>
          <div class="text-xs text-slate-500" id="trust-label">loading...</div>
          <div class="mt-1 h-1 w-20 bg-slate-800 rounded-full overflow-hidden">
            <div id="trust-bar" class="h-full bg-gradient-to-r from-violet-500 to-pink-500 rounded-full transition-all duration-700" style="width:0%"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Active Sessions -->
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">Sessions</div>
      <div class="flex items-center gap-2">
        <span class="relative flex h-2.5 w-2.5">
          <span id="session-pulse" class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
          <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
        </span>
        <span class="text-2xl font-mono font-semibold text-slate-200" id="session-count">0</span>
      </div>
      <div class="mt-2 text-xs text-slate-500" id="session-label">active terminals</div>
      <div class="mt-1 text-xs text-slate-600 font-mono" id="session-detail">--</div>
    </div>

    <!-- Overdue Items -->
    <a href="/ops" class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card block hover:border-slate-700/50 transition-colors">
      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">Overdue</div>
      <div class="flex items-end gap-2">
        <span class="text-2xl font-mono font-semibold" id="overdue-count">0</span>
      </div>
      <div class="mt-2 text-xs text-slate-500" id="overdue-detail">reminders &amp; followups</div>
      <div class="mt-1 text-xs text-violet-500 font-medium">view in ops &rarr;</div>
    </a>

    <!-- Watchdog -->
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">Watchdog</div>
      <div class="flex items-center gap-2 mb-3">
        <span id="watchdog-badge" class="inline-flex items-center px-2 py-0.5 rounded text-xs font-mono font-medium bg-slate-700 text-slate-300">--</span>
      </div>
      <div id="watchdog-services" class="space-y-1.5">
        <div class="text-xs text-slate-500">loading...</div>
      </div>
    </div>
  </div>

  <!-- Row 2: 3 detail cards -->
  <div class="grid grid-cols-3 gap-4">
    <!-- Today's Agenda -->
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">Today's Agenda</div>
      <ul id="agenda-list" class="space-y-1.5">
        <li class="text-xs text-slate-600 py-1">No items due today</li>
      </ul>
    </div>

    <!-- Cognitive Memory -->
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">Cognitive Memory</div>
      <div class="space-y-3">
        <div>
          <div class="flex items-center justify-between mb-1">
            <span class="text-xs text-slate-400 uppercase tracking-wide">STM</span>
            <span class="text-xs font-mono text-slate-300" id="cog-stm">--</span>
          </div>
          <div class="h-1 bg-slate-800 rounded-full overflow-hidden">
            <div id="cog-stm-bar" class="h-full bg-violet-500/60 rounded-full transition-all duration-500" style="width:0%"></div>
          </div>
        </div>
        <div>
          <div class="flex items-center justify-between mb-1">
            <span class="text-xs text-slate-400 uppercase tracking-wide">LTM</span>
            <span class="text-xs font-mono text-slate-300" id="cog-ltm">--</span>
          </div>
          <div class="h-1 bg-slate-800 rounded-full overflow-hidden">
            <div id="cog-ltm-bar" class="h-full bg-pink-500/60 rounded-full transition-all duration-500" style="width:0%"></div>
          </div>
        </div>
        <div class="flex items-center justify-between pt-1 border-t border-slate-800">
          <span class="text-xs text-slate-500">Avg strength</span>
          <span class="text-xs font-mono text-slate-400" id="cog-strength">--</span>
        </div>
        <div class="pt-1 border-t border-slate-800">
          <div class="text-xs text-slate-400 uppercase tracking-wide mb-2">Knowledge Graph</div>
          <div class="grid grid-cols-3 gap-2 text-center">
            <div>
              <div class="text-sm font-mono font-medium text-slate-200" id="kg-nodes">--</div>
              <div class="text-xs text-slate-500 mt-0.5">nodes</div>
            </div>
            <div>
              <div class="text-sm font-mono font-medium text-slate-200" id="kg-edges">--</div>
              <div class="text-xs text-slate-500 mt-0.5">edges</div>
            </div>
            <div>
              <div class="text-sm font-mono font-medium text-slate-200" id="kg-historical">--</div>
              <div class="text-xs text-slate-500 mt-0.5">hist.</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Recent Sessions -->
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
      <div class="flex items-center justify-between mb-3">
        <div class="text-xs uppercase tracking-wider text-slate-400 font-medium">Recent Sessions</div>
        <a href="/sessions" class="text-xs text-violet-400 hover:text-violet-300 transition-colors">view all &rarr;</a>
      </div>
      <div id="recent-sessions" class="space-y-3">
        <div class="text-xs text-slate-600">loading...</div>
      </div>
    </div>
  </div>

  <!-- Row 3: engineering loop narrative -->
  <div class="grid grid-cols-3 gap-4">
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">What Matters Now</div>
      <ul id="matters-now-list" class="space-y-2">
        <li class="text-xs text-slate-600 py-1">loading...</li>
      </ul>
    </div>

    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">What Is Drifting</div>
      <ul id="drifting-list" class="space-y-2">
        <li class="text-xs text-slate-600 py-1">loading...</li>
      </ul>
    </div>

    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">What Is Improving</div>
      <ul id="improving-list" class="space-y-2">
        <li class="text-xs text-slate-600 py-1">loading...</li>
      </ul>
    </div>
  </div>
</div>

<!-- Quick Create Modal -->
<div id="modal-overlay" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-[60] flex items-center justify-center" onclick="if(event.target===this)closeModal()">
  <div class="bg-slate-900 border border-slate-700 rounded-xl p-6 w-full max-w-md shadow-2xl animate-slide-in">
    <div class="flex items-center justify-between mb-4">
      <h2 id="modal-title" class="text-sm font-display font-semibold text-slate-100">New Item</h2>
      <button onclick="closeModal()" class="text-slate-400 hover:text-white text-lg leading-none">&times;</button>
    </div>
    <form id="modal-form" onsubmit="submitQuickCreate(event)" class="space-y-3">
      <div>
        <label class="block text-xs text-slate-400 mb-1">Description</label>
        <textarea name="description" rows="3" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500 resize-none placeholder-slate-600"></textarea>
      </div>
      <div>
        <label class="block text-xs text-slate-400 mb-1">Date <span class="text-slate-600">(optional)</span></label>
        <input type="date" name="date" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500">
      </div>
      <div id="category-group" class="hidden">
        <label class="block text-xs text-slate-400 mb-1">Category</label>
        <select name="category" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500">
          <option value="general">General</option>
          <option value="ideas">Ideas</option>
          <option value="my-project">My Project</option>
          <option value="project-a">Project A</option>
          <option value="server">Server</option>
        </select>
      </div>
      <div id="note-direction-group" class="hidden">
        <label class="block text-xs text-slate-400 mb-1">Direction</label>
        <select name="direction" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500">
          <option value="to_nexo">To NEXO</option>
          <option value="to_user">To User</option>
        </select>
      </div>
      <input type="hidden" name="type" id="modal-type">
      <div class="flex justify-end gap-2 pt-2">
        <button type="button" onclick="closeModal()" class="px-3 py-1.5 text-xs rounded-lg text-slate-400 hover:text-slate-200 transition-colors">Cancel</button>
        <button type="submit" class="px-3 py-1.5 text-xs rounded-lg bg-violet-600 text-white hover:bg-violet-500 transition-colors font-medium">Create</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function getToday() { return new Date().toISOString().split('T')[0]; }

function isInactiveItemStatus(status) {
  const normalized = String(status || '').trim().toUpperCase();
  return normalized.startsWith('COMPLETED') || ['ARCHIVED', 'DELETED', 'BLOCKED', 'WAITING', 'CANCELLED'].includes(normalized);
}

// -----------------------------------------------------------------------
// Modal
// -----------------------------------------------------------------------
function openQuickCreate(type) {
  const overlay = document.getElementById('modal-overlay');
  const title = document.getElementById('modal-title');
  const typeInput = document.getElementById('modal-type');
  document.getElementById('modal-form').reset();

  typeInput.value = type;
  document.getElementById('category-group').classList.toggle('hidden', type !== 'reminder');
  document.getElementById('note-direction-group').classList.toggle('hidden', type !== 'note');

  if (type === 'reminder') title.textContent = 'New Reminder';
  else if (type === 'followup') title.textContent = 'New Followup';
  else title.textContent = 'New Note';

  overlay.classList.remove('hidden');
}

function closeModal() {
  document.getElementById('modal-overlay').classList.add('hidden');
}

document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });

async function submitQuickCreate(e) {
  e.preventDefault();
  const fd = new FormData(document.getElementById('modal-form'));
  const type = fd.get('type');
  let url, body;

  if (type === 'reminder') {
    url = '/api/reminders';
    body = { description: fd.get('description'), date: fd.get('date') || null, category: fd.get('category') || 'general' };
  } else if (type === 'followup') {
    url = '/api/followups';
    body = { description: fd.get('description'), date: fd.get('date') || null };
  } else {
    url = '/api/inbox';
    body = { direction: fd.get('direction') || 'to_nexo', content: fd.get('description') };
  }

  try {
    const res = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
    const data = await res.json();
    if (data.success) { showToast('Created successfully'); closeModal(); loadDashboardData(); }
    else showToast(data.error || data.detail || 'Create failed');
  } catch (err) { showToast('Error: ' + err.message); }
}

// -----------------------------------------------------------------------
// Dashboard data
// -----------------------------------------------------------------------
async function loadDashboardData() {
  const today = getToday();

  const [trustData, statsData, remindersData, followupsData, sessionsData, watchdogData, inboxData, engineeringData] =
    await Promise.all([
      fetchJSON('/api/trust'),
      fetchJSON('/api/stats'),
      fetchJSON('/api/reminders'),
      fetchJSON('/api/followups'),
      fetchJSON('/api/sessions?limit=3'),
      fetchJSON('/api/watchdog'),
      fetchJSON('/api/inbox/unread'),
      fetchJSON('/api/engineering-loop'),
    ]);

  // --- Trust Score (animated gauge) ---
  if (trustData) {
    const score = trustData.current_score ?? 0;
    const pct = Math.max(0, Math.min(100, score));
    const circumference = 2 * Math.PI * 32;
    const arc = (pct / 100) * circumference;

    const trustArc = document.getElementById('trust-arc');
    const trustCenter = document.getElementById('trust-center');
    trustArc.setAttribute('stroke-dasharray', `${arc} ${circumference - arc}`);
    trustCenter.textContent = Math.round(score);

    // Color by score
    const color = pct >= 75 ? '#7C3AED' : pct >= 50 ? '#F59E0B' : '#EF4444';
    trustArc.setAttribute('stroke', color);
    trustCenter.setAttribute('fill', color);

    document.getElementById('trust-bar').style.width = pct + '%';
    document.getElementById('sidebar-trust-value').textContent = score.toFixed(1);

    const label = pct >= 75 ? 'high alignment' : pct >= 50 ? 'moderate' : pct >= 25 ? 'low -- more caution' : 'critical';
    document.getElementById('trust-label').textContent = label;
  }

  // --- Active Sessions ---
  if (sessionsData && sessionsData.sessions) {
    const cutoff = Date.now() - 15 * 60 * 1000;
    const active = sessionsData.sessions.filter(s => {
      const ts = new Date(s.last_heartbeat || s.created_at || 0).getTime();
      return ts > cutoff;
    });
    document.getElementById('session-count').textContent = active.length;
    document.getElementById('session-label').textContent = active.length === 1 ? 'active terminal' : 'active terminals';
    if (active.length > 0) {
      const names = active.slice(0, 2).map(s => s.session_id ? s.session_id.substring(0, 8) : '??').join(', ');
      document.getElementById('session-detail').textContent = names + (active.length > 2 ? ' +' + (active.length - 2) : '');
    } else {
      document.getElementById('session-detail').textContent = 'none active';
      document.getElementById('session-pulse').classList.remove('animate-ping');
    }
  }

  // --- Overdue Items ---
  if (remindersData || followupsData) {
    const reminders = (remindersData?.reminders || []).filter(r =>
      !isInactiveItemStatus(r.status) && r.date && r.date <= today);
    const followups = (followupsData?.followups || []).filter(f =>
      !isInactiveItemStatus(f.status) && f.date && f.date <= today);
    const total = reminders.length + followups.length;
    const el = document.getElementById('overdue-count');
    el.textContent = total;
    el.className = 'text-2xl font-mono font-semibold ' + (total > 0 ? 'text-red-400' : 'text-slate-200');
    document.getElementById('overdue-detail').textContent = reminders.length + ' reminders, ' + followups.length + ' followups';
  }

  // --- Watchdog ---
  const watchdogBadge = document.getElementById('watchdog-badge');
  const watchdogServices = document.getElementById('watchdog-services');
  if (watchdogData && !watchdogData.error) {
    const overall = watchdogData.summary?.overall || 'UNKNOWN';
    const isPass = overall === 'PASS' || overall === 'ok';
    watchdogBadge.textContent = overall;
    watchdogBadge.className = 'inline-flex items-center px-2 py-0.5 rounded text-xs font-mono font-medium ' +
      (isPass ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400');

    const services = watchdogData.services || watchdogData.checks || [];
    if (Array.isArray(services) && services.length > 0) {
      watchdogServices.innerHTML = services.map(svc => {
        const ok = svc.status === 'ok' || svc.status === 'PASS' || svc.pass === true;
        const dot = ok ? 'bg-emerald-500' : 'bg-red-500';
        const name = svc.name || svc.service || 'unknown';
        return `<div class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full ${dot} flex-shrink-0"></span><span class="text-xs text-slate-400 truncate">${escapeHtml(name)}</span></div>`;
      }).join('');
    } else {
      const entries = Object.entries(watchdogData).filter(([k]) => k !== 'summary' && k !== 'timestamp');
      if (entries.length > 0) {
        watchdogServices.innerHTML = entries.map(([key, val]) => {
          if (typeof val !== 'object' || val === null) return '';
          const ok = val.status === 'PASS' || val.status === 'ok' || val.pass === true;
          const dot = ok ? 'bg-emerald-500' : 'bg-red-500';
          return `<div class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full ${dot} flex-shrink-0"></span><span class="text-xs text-slate-400 truncate">${escapeHtml(key)}</span></div>`;
        }).filter(Boolean).join('');
      }
    }
  } else {
    watchdogBadge.textContent = 'N/A';
    watchdogBadge.className = 'inline-flex items-center px-2 py-0.5 rounded text-xs font-mono font-medium bg-slate-700 text-slate-400';
    watchdogServices.innerHTML = '<div class="text-xs text-slate-600">no watchdog data</div>';
  }

  // --- Agenda ---
  const agendaList = document.getElementById('agenda-list');
  const agendaItems = [];
  if (remindersData?.reminders) {
    remindersData.reminders.filter(r => !isInactiveItemStatus(r.status) && r.date && r.date <= today)
      .forEach(r => agendaItems.push({ text: r.description, type: 'reminder', date: r.date }));
  }
  if (followupsData?.followups) {
    followupsData.followups.filter(f => !isInactiveItemStatus(f.status) && f.date && f.date <= today)
      .forEach(f => agendaItems.push({ text: f.description, type: 'followup', date: f.date }));
  }
  if (agendaItems.length > 0) {
    agendaList.innerHTML = agendaItems.slice(0, 8).map(item => {
      const color = item.type === 'reminder' ? 'text-amber-400' : 'text-violet-400';
      const badge = item.type === 'reminder' ? 'bg-amber-500/10 text-amber-400' : 'bg-violet-500/10 text-violet-400';
      return `<li class="flex items-start gap-2 py-1">
        <span class="px-1.5 py-0.5 rounded text-[9px] font-medium ${badge} mt-0.5">${item.type}</span>
        <span class="text-xs text-slate-300 leading-relaxed">${escapeHtml(item.text || '--')}</span>
      </li>`;
    }).join('');
  } else {
    agendaList.innerHTML = '<li class="text-xs text-slate-600 py-1">No items due today</li>';
  }

  // --- Cognitive Memory ---
  if (statsData) {
    const cog = statsData.cognitive || statsData;
    const stm = cog.stm_total ?? cog.stm_active ?? cog.stm_count ?? cog.stm ?? 0;
    const ltm = cog.ltm_active ?? cog.ltm_count ?? cog.ltm ?? 0;
    const strength = cog.avg_stm_strength ?? cog.avg_strength ?? 0;
    const stmCap = cog.stm_capacity || 500;

    document.getElementById('cog-stm').textContent = stm;
    document.getElementById('cog-ltm').textContent = ltm;
    document.getElementById('cog-strength').textContent = typeof strength === 'number' ? strength.toFixed(2) : strength;
    document.getElementById('cog-stm-bar').style.width = Math.min(100, (stm / stmCap) * 100) + '%';
    document.getElementById('cog-ltm-bar').style.width = Math.min(100, ltm > 0 ? 60 : 0) + '%';

    // KG stats
    const kg = statsData.knowledge_graph || statsData.kg || {};
    if (kg.nodes !== undefined || kg.entities !== undefined || kg.total_nodes !== undefined) {
      document.getElementById('kg-nodes').textContent = formatNumber(kg.nodes ?? kg.total_nodes ?? kg.entities ?? 0);
      document.getElementById('kg-edges').textContent = formatNumber(kg.edges ?? kg.edges_active ?? kg.relations ?? 0);
      document.getElementById('kg-historical').textContent = formatNumber(kg.historical ?? kg.edges_historical ?? 0);
    }
  }

  // --- Recent Sessions ---
  if (sessionsData) {
    const diaries = sessionsData.diaries || sessionsData.sessions || [];
    const container = document.getElementById('recent-sessions');
    if (diaries.length > 0) {
      container.innerHTML = diaries.slice(0, 3).map(d => {
        return `<div class="border-b border-slate-800/30 pb-2.5 last:border-0 last:pb-0">
          <div class="flex items-center gap-2 mb-1">
            <span class="text-[10px] font-mono text-violet-400">${escapeHtml(String(d.session_id || d.id || '').substring(0, 8))}</span>
            <span class="text-[10px] text-slate-600">${relativeTime(d.created_at)}</span>
            ${d.domain ? `<span class="text-[10px] px-1 py-0.5 rounded bg-slate-800 text-slate-400">${escapeHtml(d.domain)}</span>` : ''}
          </div>
          ${d.summary ? `<p class="text-xs text-slate-400 leading-relaxed line-clamp-2">${escapeHtml(d.summary)}</p>` : ''}
          ${d.mental_state ? `<div class="text-[10px] text-violet-400/60 mt-1 italic">${escapeHtml(d.mental_state)}</div>` : ''}
        </div>`;
      }).join('');
    } else {
      container.innerHTML = '<div class="text-xs text-slate-600">No recent sessions</div>';
    }
  }

  // --- Inbox badge ---
  if (inboxData) {
    const count = inboxData.count ?? inboxData.unread ?? (Array.isArray(inboxData) ? inboxData.length : 0);
    const badge = document.getElementById('inbox-badge');
    if (badge && count > 0) {
      badge.textContent = count;
      badge.classList.remove('hidden');
      badge.classList.add('flex');
    }
  }

  // --- Engineering loop narrative ---
  const toneClass = tone => {
    if (tone === 'critical') return 'text-red-400';
    if (tone === 'elevated' || tone === 'watch') return 'text-amber-400';
    return 'text-emerald-400';
  };
  const renderNarrativeList = (id, items, emptyText) => {
    const node = document.getElementById(id);
    if (!node) return;
    if (!items || items.length === 0) {
      node.innerHTML = `<li class="text-xs text-slate-600 py-1">${escapeHtml(emptyText)}</li>`;
      return;
    }
    node.innerHTML = items.map(item => `
      <li class="border-b border-slate-800/30 pb-2 last:border-0 last:pb-0">
        <div class="flex items-center justify-between gap-2">
          <span class="text-xs text-slate-300">${escapeHtml(item.title || '--')}</span>
          <span class="text-[10px] font-mono ${toneClass(item.tone)}">${escapeHtml(item.detail || '')}</span>
        </div>
        ${item.meta ? `<div class="text-[10px] text-slate-600 mt-1">${escapeHtml(item.meta)}</div>` : ''}
      </li>
    `).join('');
  };
  if (engineeringData && !engineeringData.error) {
    renderNarrativeList('matters-now-list', engineeringData.matters_now, 'No active pressure detected');
    renderNarrativeList('drifting-list', engineeringData.drifting, 'No major drift detected');
    renderNarrativeList('improving-list', engineeringData.improving, 'No improvement deltas yet');
  } else {
    renderNarrativeList('matters-now-list', [], 'No periodic summary available');
    renderNarrativeList('drifting-list', [], 'No periodic summary available');
    renderNarrativeList('improving-list', [], 'No periodic summary available');
  }
}

loadDashboardData();
setInterval(loadDashboardData, 60000);
</script>
{% endblock %}