nexo-brain 5.3.20 → 5.3.21

package/src/dashboard/templates/dashboard 2.html

@@ -0,0 +1,494 @@
+{% 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 %}