nexo-brain 5.3.20 → 5.3.21

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

@@ -0,0 +1,249 @@
+{% extends "base.html" %}
+
+{% block title %}Activity Feed{% endblock %}
+{% block page_title %}Activity Feed{% endblock %}
+{% block page_subtitle %}
+<span class="text-xs text-slate-500 font-mono ml-2" id="feed-count">-- events</span>
+{% endblock %}
+
+{% block header_actions %}
+<button onclick="loadFeed()" class="text-xs text-slate-400 hover:text-slate-200 bg-slate-800/50 border border-slate-700/50 rounded-lg px-3 py-1.5 transition-colors flex items-center gap-1.5">
+  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+  Refresh
+</button>
+{% endblock %}
+
+{% block content %}
+<!-- Type filter pills -->
+<div class="flex items-center gap-2 mb-5 flex-wrap">
+  <button onclick="setFilter('all')" data-filter="all" class="filter-pill active px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200">
+    All
+    <span class="ml-1 font-mono text-[10px] opacity-70" id="count-all">0</span>
+  </button>
+  <button onclick="setFilter('diary')" data-filter="diary" class="filter-pill px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200">
+    <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
+    Diary
+    <span class="ml-1 font-mono text-[10px] opacity-70" id="count-diary">0</span>
+  </button>
+  <button onclick="setFilter('change')" data-filter="change" class="filter-pill px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200">
+    <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
+    Changes
+    <span class="ml-1 font-mono text-[10px] opacity-70" id="count-change">0</span>
+  </button>
+  <button onclick="setFilter('cortex')" data-filter="cortex" class="filter-pill px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200">
+    <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
+    Cortex
+    <span class="ml-1 font-mono text-[10px] opacity-70" id="count-cortex">0</span>
+  </button>
+  <button onclick="setFilter('cron')" data-filter="cron" class="filter-pill px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200">
+    <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+    Crons
+    <span class="ml-1 font-mono text-[10px] opacity-70" id="count-cron">0</span>
+  </button>
+  <button onclick="setFilter('decision')" data-filter="decision" class="filter-pill px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200">
+    <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/></svg>
+    Decisions
+    <span class="ml-1 font-mono text-[10px] opacity-70" id="count-decision">0</span>
+  </button>
+
+  <!-- Live indicator -->
+  <div class="ml-auto flex items-center gap-2">
+    <div class="w-1.5 h-1.5 rounded-full bg-emerald-400 glow-dot" style="color: #34d399;"></div>
+    <span class="text-[10px] text-slate-500 uppercase tracking-wider">Live</span>
+  </div>
+</div>
+
+<!-- Feed container -->
+<div id="feed-list" class="space-y-2">
+  <!-- Loading skeleton -->
+  <div id="feed-skeleton" class="space-y-2">
+    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 animate-pulse"><div class="h-4 bg-slate-800 rounded w-3/4"></div><div class="h-3 bg-slate-800/50 rounded w-1/2 mt-3"></div></div>
+    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 animate-pulse"><div class="h-4 bg-slate-800 rounded w-2/3"></div><div class="h-3 bg-slate-800/50 rounded w-1/3 mt-3"></div></div>
+    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 animate-pulse"><div class="h-4 bg-slate-800 rounded w-1/2"></div><div class="h-3 bg-slate-800/50 rounded w-2/5 mt-3"></div></div>
+  </div>
+</div>
+
+<!-- Empty state -->
+<div id="feed-empty" class="hidden text-center py-20">
+  <svg class="w-12 h-12 mx-auto text-slate-700 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+  <p class="text-sm text-slate-500">No activity events yet</p>
+  <p class="text-xs text-slate-600 mt-1">Events will appear here as NEXO operates</p>
+</div>
+
+<style>
+  .filter-pill {
+    background: rgba(30, 41, 59, 0.5);
+    border: 1px solid rgba(51, 65, 85, 0.5);
+    color: #94a3b8;
+  }
+  .filter-pill:hover {
+    background: rgba(51, 65, 85, 0.5);
+    color: #e2e8f0;
+  }
+  .filter-pill.active {
+    background: rgba(124, 58, 237, 0.15);
+    border-color: rgba(124, 58, 237, 0.4);
+    color: #a78bfa;
+  }
+
+  .event-card {
+    transition: all 0.2s ease;
+  }
+  .event-card:hover {
+    border-color: rgba(124, 58, 237, 0.3);
+    box-shadow: 0 0 20px rgba(124, 58, 237, 0.06);
+  }
+
+  @keyframes slideInFeed {
+    0% { opacity: 0; transform: translateY(-12px) scale(0.98); }
+    100% { opacity: 1; transform: translateY(0) scale(1); }
+  }
+  .event-new {
+    animation: slideInFeed 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .event-details {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    opacity: 0;
+  }
+  .event-details.open {
+    max-height: 600px;
+    opacity: 1;
+  }
+
+  .icon-diary { color: #a78bfa; background: rgba(167, 139, 250, 0.1); }
+  .icon-change { color: #34d399; background: rgba(52, 211, 153, 0.1); }
+  .icon-cortex { color: #f472b6; background: rgba(244, 114, 182, 0.1); }
+  .icon-cron { color: #fbbf24; background: rgba(251, 191, 36, 0.1); }
+  .icon-decision { color: #60a5fa; background: rgba(96, 165, 250, 0.1); }
+
+  .type-badge-diary { color: #a78bfa; background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.2); }
+  .type-badge-change { color: #34d399; background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.2); }
+  .type-badge-cortex { color: #f472b6; background: rgba(244, 114, 182, 0.1); border: 1px solid rgba(244, 114, 182, 0.2); }
+  .type-badge-cron { color: #fbbf24; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.2); }
+  .type-badge-decision { color: #60a5fa; background: rgba(96, 165, 250, 0.1); border: 1px solid rgba(96, 165, 250, 0.2); }
+</style>
+{% endblock %}
+
+{% block scripts %}
+<script>
+const ICONS = {
+  diary: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>`,
+  change: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>`,
+  cortex: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>`,
+  cron: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>`,
+  decision: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/></svg>`
+};
+
+const TYPE_LABELS = { diary: 'Diary', change: 'Change', cortex: 'Cortex', cron: 'Cron', decision: 'Decision' };
+
+let allEvents = [];
+let currentFilter = 'all';
+let knownIds = new Set();
+
+function setFilter(type) {
+  currentFilter = type;
+  document.querySelectorAll('.filter-pill').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.filter === type);
+  });
+  renderEvents();
+}
+
+function renderEvents() {
+  const list = document.getElementById('feed-list');
+  const skeleton = document.getElementById('feed-skeleton');
+  const empty = document.getElementById('feed-empty');
+  if (skeleton) skeleton.remove();
+
+  const filtered = currentFilter === 'all'
+    ? allEvents
+    : allEvents.filter(e => e.type === currentFilter);
+
+  if (filtered.length === 0) {
+    list.innerHTML = '';
+    empty.classList.remove('hidden');
+    return;
+  }
+  empty.classList.add('hidden');
+
+  list.innerHTML = filtered.map((ev, i) => {
+    const icon = ICONS[ev.type] || ICONS.change;
+    const snippet = escapeHtml((ev.content || '').substring(0, 200));
+    const full = escapeHtml(ev.content || '');
+    const isNew = !knownIds.has(ev.id || i);
+    return `
+      <div class="event-card bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 cursor-pointer ${isNew ? 'event-new' : ''}"
+           onclick="toggleDetails(this)" data-event-id="${ev.id || i}">
+        <div class="flex items-start gap-3">
+          <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 icon-${ev.type}">
+            ${icon}
+          </div>
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2 mb-1">
+              <span class="type-badge-${ev.type} text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded">
+                ${TYPE_LABELS[ev.type] || ev.type}
+              </span>
+              ${ev.source ? `<span class="text-[10px] text-slate-600">${escapeHtml(ev.source)}</span>` : ''}
+              <span class="ml-auto text-[10px] text-slate-500 font-mono flex-shrink-0">${relativeTime(ev.created_at)}</span>
+            </div>
+            <p class="text-sm text-slate-300 leading-relaxed line-clamp-2">${snippet}${(ev.content || '').length > 200 ? '...' : ''}</p>
+          </div>
+          <svg class="w-4 h-4 text-slate-600 flex-shrink-0 mt-1 transition-transform duration-200 expand-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+        </div>
+        <div class="event-details mt-3 pl-11">
+          <div class="border-t border-slate-800/50 pt-3">
+            <pre class="text-xs text-slate-400 font-mono whitespace-pre-wrap leading-relaxed">${full}</pre>
+            <div class="flex items-center gap-4 mt-3 text-[10px] text-slate-600">
+              <span>ID: ${escapeHtml(String(ev.id || '--'))}</span>
+              <span>${ev.created_at ? new Date(ev.created_at).toLocaleString('en-GB') : '--'}</span>
+              ${ev.session_id ? `<span>Session: ${escapeHtml(ev.session_id)}</span>` : ''}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }).join('');
+}
+
+function toggleDetails(card) {
+  const details = card.querySelector('.event-details');
+  const chevron = card.querySelector('.expand-chevron');
+  details.classList.toggle('open');
+  chevron.style.transform = details.classList.contains('open') ? 'rotate(180deg)' : '';
+}
+
+function updateCounts() {
+  const counts = { all: allEvents.length, diary: 0, change: 0, cortex: 0, cron: 0, decision: 0 };
+  allEvents.forEach(e => { if (counts[e.type] !== undefined) counts[e.type]++; });
+  Object.keys(counts).forEach(k => {
+    const el = document.getElementById('count-' + k);
+    if (el) el.textContent = counts[k];
+  });
+  document.getElementById('feed-count').textContent = `${allEvents.length} events`;
+}
+
+async function loadFeed() {
+  const data = await fetchJSON('/api/feed');
+  if (!data || !data.events) return;
+
+  const oldIds = new Set(allEvents.map(e => e.id));
+  allEvents = data.events;
+  knownIds = oldIds;
+  updateCounts();
+  renderEvents();
+
+  // Mark all as known after render
+  setTimeout(() => {
+    allEvents.forEach(e => knownIds.add(e.id));
+  }, 500);
+}
+
+// Initial load
+loadFeed();
+
+// Auto-refresh every 30s
+setInterval(loadFeed, 30000);
+</script>
+{% endblock %}

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

@@ -0,0 +1,170 @@
+{% extends "base.html" %}
+
+{% block title %}Followup Health{% endblock %}
+{% block page_title %}Followup Health{% endblock %}
+
+{% block content %}
+<div class="space-y-5">
+  <!-- Stat cards -->
+  <div class="grid grid-cols-5 gap-4">
+    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
+      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-2">Total</div>
+      <div class="text-xl font-mono font-semibold text-slate-200" id="fh-total">--</div>
+    </div>
+    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
+      <div class="text-xs uppercase tracking-wider text-amber-400/70 font-medium mb-2">Pending</div>
+      <div class="text-xl font-mono font-semibold text-amber-400" id="fh-pending">--</div>
+    </div>
+    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
+      <div class="text-xs uppercase tracking-wider text-emerald-400/70 font-medium mb-2">Completed</div>
+      <div class="text-xl font-mono font-semibold text-emerald-400" id="fh-completed">--</div>
+    </div>
+    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
+      <div class="text-xs uppercase tracking-wider text-red-400/70 font-medium mb-2">Overdue</div>
+      <div class="text-xl font-mono font-semibold text-red-400" id="fh-overdue">--</div>
+    </div>
+    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
+      <div class="text-xs uppercase tracking-wider text-violet-400/70 font-medium mb-2">Completion Rate</div>
+      <div class="text-xl font-mono font-semibold text-violet-400" id="fh-rate">--%</div>
+    </div>
+  </div>
+
+  <!-- Charts row -->
+  <div class="grid grid-cols-2 gap-5">
+    <!-- Donut chart -->
+    <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-4">Completion Rate</div>
+      <div class="flex items-center justify-center" style="min-height: 260px;">
+        <svg id="donut-svg" viewBox="0 0 200 200" class="w-52 h-52"></svg>
+      </div>
+    </div>
+
+    <!-- Age distribution bar chart -->
+    <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-4">Age Distribution</div>
+      <div class="space-y-3" id="age-bars" style="min-height: 260px;">
+        <div class="text-xs text-slate-600 py-12 text-center">loading...</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Overdue items table -->
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <div class="flex items-center justify-between mb-4">
+      <div class="text-xs uppercase tracking-wider text-red-400/70 font-medium">Overdue Items</div>
+      <span class="text-xs font-mono text-slate-500" id="overdue-label">--</span>
+    </div>
+    <div class="space-y-2" id="overdue-list">
+      <div class="text-xs text-slate-600 py-4 text-center">loading...</div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function drawDonut(completed, total) {
+  const svg = document.getElementById('donut-svg');
+  const cx = 100, cy = 100, r = 70, strokeW = 16;
+  const pct = total > 0 ? completed / total : 0;
+  const circumference = 2 * Math.PI * r;
+  const completedArc = circumference * pct;
+  const remainingArc = circumference - completedArc;
+
+  // Determine color based on rate
+  let color = '#EF4444'; // red
+  if (pct >= 0.8) color = '#10B981'; // emerald
+  else if (pct >= 0.5) color = '#F59E0B'; // amber
+
+  svg.innerHTML = `
+    <!-- Background ring -->
+    <circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="rgba(51,65,85,0.4)" stroke-width="${strokeW}"/>
+    <!-- Completed arc -->
+    <circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${color}" stroke-width="${strokeW}"
+      stroke-dasharray="${completedArc} ${remainingArc}"
+      stroke-dashoffset="${circumference / 4}"
+      stroke-linecap="round"
+      style="transition: stroke-dasharray 0.8s ease-out;"/>
+    <!-- Center text -->
+    <text x="${cx}" y="${cy - 8}" text-anchor="middle" fill="${color}" class="text-2xl font-mono font-bold" style="font-size:28px;font-weight:700">${Math.round(pct * 100)}%</text>
+    <text x="${cx}" y="${cy + 14}" text-anchor="middle" fill="#64748b" style="font-size:11px">completion</text>
+    <text x="${cx}" y="${cy + 30}" text-anchor="middle" fill="#475569" style="font-size:10px">${completed}/${total}</text>
+  `;
+}
+
+function renderAgeBars(buckets) {
+  const container = document.getElementById('age-bars');
+  if (!buckets || !Object.keys(buckets).length) {
+    container.innerHTML = '<div class="text-xs text-slate-600 py-12 text-center">No age data</div>';
+    return;
+  }
+
+  const entries = Object.entries(buckets);
+  const maxVal = Math.max(...entries.map(([, v]) => v), 1);
+  const barColors = ['bg-emerald-500', 'bg-emerald-400', 'bg-amber-400', 'bg-amber-500', 'bg-red-400', 'bg-red-500'];
+
+  container.innerHTML = entries.map(([label, count], i) => {
+    const pct = (count / maxVal) * 100;
+    const color = barColors[Math.min(i, barColors.length - 1)];
+    return `<div class="flex items-center gap-3">
+      <span class="w-20 text-xs text-slate-400 text-right">${escapeHtml(label)}</span>
+      <div class="flex-1 bg-slate-800/50 rounded-full h-5 overflow-hidden">
+        <div class="${color}/70 h-full rounded-full transition-all duration-500 flex items-center" style="width:${Math.max(2, pct)}%">
+          ${pct > 15 ? `<span class="text-[10px] font-mono text-white/80 ml-2">${count}</span>` : ''}
+        </div>
+      </div>
+      ${pct <= 15 ? `<span class="text-[10px] font-mono text-slate-500">${count}</span>` : ''}
+    </div>`;
+  }).join('');
+}
+
+function renderOverdue(items) {
+  const container = document.getElementById('overdue-list');
+  document.getElementById('overdue-label').textContent = (items || []).length + ' items';
+
+  if (!items || !items.length) {
+    container.innerHTML = '<div class="flex items-center justify-center gap-2 py-8 text-emerald-400"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span class="text-xs">No overdue items</span></div>';
+    return;
+  }
+
+  container.innerHTML = items.map(item => {
+    const daysOverdue = item.days_overdue || 0;
+    const urgency = daysOverdue > 7 ? 'text-red-400' : daysOverdue > 3 ? 'text-amber-400' : 'text-slate-300';
+    return `<div class="flex items-start gap-3 py-2.5 px-3 rounded-lg hover:bg-slate-800/20 transition-colors border border-transparent hover:border-red-500/10">
+      <svg class="w-3.5 h-3.5 text-red-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+      <div class="flex-1 min-w-0">
+        <div class="text-xs text-slate-300 leading-relaxed">${escapeHtml(item.description || item.text || '--')}</div>
+        <div class="flex items-center gap-2 mt-1">
+          ${item.date ? `<span class="text-[10px] text-slate-500">${escapeHtml(item.date)}</span>` : ''}
+          <span class="text-[10px] ${urgency} font-mono">${daysOverdue}d overdue</span>
+        </div>
+      </div>
+    </div>`;
+  }).join('');
+}
+
+async function loadHealth() {
+  const data = await fetchJSON('/api/followup-health');
+  if (!data) return;
+
+  const total = data.total || 0;
+  const completed = data.completed || 0;
+  const pending = data.pending || 0;
+  const overdue = data.overdue || 0;
+  const rate = data.completion_rate != null ? data.completion_rate : (total > 0 ? Math.round((completed / total) * 100) : 0);
+
+  document.getElementById('fh-total').textContent = total;
+  document.getElementById('fh-pending').textContent = pending;
+  document.getElementById('fh-completed').textContent = completed;
+  document.getElementById('fh-overdue').textContent = overdue;
+  document.getElementById('fh-rate').textContent = rate + '%';
+
+  drawDonut(completed, total);
+  renderAgeBars(data.age_buckets || {});
+  renderOverdue(data.overdue_items || []);
+}
+
+loadHealth();
+setInterval(loadHealth, 60000);
+</script>
+{% endblock %}

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

@@ -0,0 +1,201 @@
+{% extends "base.html" %}
+
+{% block title %}Knowledge Graph{% endblock %}
+{% block page_title %}Knowledge Graph{% endblock %}
+
+{% block head %}
+<style>
+    .node circle { transition: filter 0.15s ease; }
+    .node:hover circle { filter: drop-shadow(0 0 10px currentColor); }
+    .link-label { fill: #64748b; font-size: 10px; pointer-events: none; opacity: 0.6; }
+</style>
+{% endblock %}
+
+{% block header_actions %}
+<input type="number" id="center" placeholder="Node ID"
+    class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1 text-xs w-24 text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500">
+<select id="depth" class="bg-slate-800 border border-slate-700 rounded-lg px-2 py-1 text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500">
+    <option>1</option><option selected>2</option><option>3</option>
+</select>
+<button onclick="loadGraph()" class="px-3 py-1 text-xs bg-violet-600 text-white rounded-lg hover:bg-violet-500 transition-colors">Load</button>
+<span id="info" class="text-xs text-slate-500 font-mono"></span>
+<div class="flex items-center gap-3 ml-2 text-xs text-slate-400">
+    <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-violet-500 inline-block"></span>area</span>
+    <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-emerald-500 inline-block"></span>file</span>
+    <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-blue-500 inline-block"></span>learning</span>
+    <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-amber-500 inline-block"></span>decision</span>
+    <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-pink-500 inline-block"></span>entity</span>
+    <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-slate-500 inline-block"></span>change</span>
+    <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-cyan-500 inline-block"></span>memory</span>
+</div>
+{% endblock %}
+
+{% block content %}
+<div class="flex overflow-hidden" style="height: calc(100vh - 8.5rem);">
+    <!-- Graph canvas -->
+    <div id="graph-container" class="flex-1 overflow-hidden">
+        <svg id="svg" class="w-full h-full"></svg>
+    </div>
+
+    <!-- Node detail sidebar -->
+    <div id="sidebar" class="overflow-hidden bg-slate-900 border-l border-slate-800 transition-all duration-300 flex-shrink-0" style="width:0">
+        <div class="p-5 w-80">
+            <div class="flex items-center justify-between mb-3">
+                <h3 id="sb-label" class="text-sm font-display font-semibold text-violet-400 pr-4 leading-tight"></h3>
+                <button onclick="closeSidebar()" class="text-slate-400 hover:text-white text-lg leading-none flex-shrink-0">&times;</button>
+            </div>
+            <div id="sb-meta" class="text-xs text-slate-500 mb-3 font-mono space-y-0.5"></div>
+            <div class="text-xs font-display font-semibold text-slate-400 uppercase tracking-wide mb-2">Connections</div>
+            <div id="sb-neighbors" class="space-y-1"></div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script>
+    const typeColors = {
+        area: '#8B5CF6',
+        file: '#10B981',
+        learning: '#3B82F6',
+        decision: '#F59E0B',
+        entity: '#EC4899',
+        change: '#64748B',
+        memory: '#06B6D4'
+    };
+
+    function nodeColor(type) { return typeColors[type] || '#64748B'; }
+    function nodeRadius(d) { return d.depth === 0 ? 16 : d.depth === 1 ? 10 : 7; }
+
+    let currentSim = null;
+
+    async function loadGraph() {
+        const center = document.getElementById('center').value;
+        const depth = document.getElementById('depth').value;
+        const url = center ? `/api/graph?center=${center}&depth=${depth}` : '/api/graph';
+        const data = await fetch(url).then(r => r.json());
+
+        if (!data.nodes || data.nodes.length === 0) {
+            const hints = (data.hints || []).map(h => `${h.label} (id:${h.id})`).join(', ');
+            document.getElementById('info').textContent = hints ? `No subgraph found. Top: ${hints}` : 'No graph data found';
+            if (data.hints && data.hints.length > 0) {
+                document.getElementById('center').value = data.hints[0].id;
+                loadGraph();
+            }
+            return;
+        }
+
+        document.getElementById('info').textContent = `${data.nodes.length} nodes · ${data.edges.length} edges`;
+        renderGraph(data);
+    }
+
+    function renderGraph(data) {
+        const svg = d3.select('#svg');
+        svg.selectAll('*').remove();
+        const width = svg.node().clientWidth;
+        const height = svg.node().clientHeight;
+        const g = svg.append('g');
+
+        svg.call(d3.zoom().scaleExtent([0.1, 8]).on('zoom', e => g.attr('transform', e.transform)));
+
+        if (currentSim) currentSim.stop();
+        currentSim = d3.forceSimulation(data.nodes)
+            .force('link', d3.forceLink(data.edges).id(d => d.id).distance(80))
+            .force('charge', d3.forceManyBody().strength(-300))
+            .force('center', d3.forceCenter(width / 2, height / 2))
+            .force('collision', d3.forceCollide().radius(d => nodeRadius(d) + 20));
+
+        const link = g.selectAll('.link').data(data.edges).join('line')
+            .attr('class', 'link')
+            .attr('stroke', '#334155')
+            .attr('stroke-width', d => Math.max(1, (d.weight || 0.5) * 2.5))
+            .attr('stroke-opacity', d => Math.min(0.6, 0.2 + (d.weight || 0.3) * 0.4));
+
+        const linkLabel = g.selectAll('.link-label').data(data.edges).join('text')
+            .attr('class', 'link-label')
+            .text(d => d.relation);
+
+        const node = g.selectAll('.node').data(data.nodes).join('g')
+            .attr('class', 'node')
+            .style('cursor', 'pointer')
+            .on('click', (e, d) => showNodeDetail(d))
+            .call(d3.drag()
+                .on('start', (e, d) => { if (!e.active) currentSim.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; })
+                .on('drag', (e, d) => { d.fx = e.x; d.fy = e.y; })
+                .on('end', (e, d) => { if (!e.active) currentSim.alphaTarget(0); d.fx = null; d.fy = null; }));
+
+        node.append('circle')
+            .attr('r', d => nodeRadius(d))
+            .attr('fill', d => nodeColor(d.type))
+            .attr('stroke', d => d.depth === 0 ? '#fff' : nodeColor(d.type))
+            .attr('stroke-width', d => d.depth === 0 ? 2.5 : 1)
+            .attr('stroke-opacity', d => d.depth === 0 ? 0.8 : 0.3)
+            .style('color', d => nodeColor(d.type));
+
+        node.filter(d => d.depth <= 1).append('text')
+            .attr('dx', d => nodeRadius(d) + 5)
+            .attr('dy', 4)
+            .attr('fill', '#94a3b8')
+            .attr('font-size', d => d.depth === 0 ? '13px' : '11px')
+            .attr('font-weight', d => d.depth === 0 ? '600' : '400')
+            .attr('font-family', 'Space Grotesk, system-ui, sans-serif')
+            .text(d => d.label.length > 40 ? d.label.slice(0, 37) + '...' : d.label);
+
+        node.filter(d => d.depth > 1).append('title')
+            .text(d => `[${d.type}] ${d.label}`);
+
+        currentSim.on('tick', () => {
+            link.attr('x1', d => d.source.x).attr('y1', d => d.source.y)
+                .attr('x2', d => d.target.x).attr('y2', d => d.target.y);
+            linkLabel.attr('x', d => (d.source.x + d.target.x) / 2)
+                .attr('y', d => (d.source.y + d.target.y) / 2);
+            node.attr('transform', d => `translate(${d.x},${d.y})`);
+        });
+    }
+
+    async function showNodeDetail(d) {
+        document.getElementById('sb-label').textContent = d.label;
+        document.getElementById('sb-meta').innerHTML =
+            `<div>Type: <span style="color:${nodeColor(d.type)}">${d.type}</span></div>` +
+            `<div>ID: ${d.id}</div>` +
+            `<div>Depth: ${d.depth}</div>`;
+
+        document.getElementById('sidebar').style.width = '320px';
+
+        const resp = await fetch(`/api/graph?center=${d.id}&depth=1`);
+        const data = await resp.json();
+        const nbDiv = document.getElementById('sb-neighbors');
+
+        if (!data.edges || data.edges.length === 0) {
+            nbDiv.innerHTML = '<p class="text-sm text-slate-500">No connections found</p>';
+            return;
+        }
+
+        const neighbors = data.nodes.filter(n => n.id !== d.id).slice(0, 20);
+        nbDiv.innerHTML = `<p class="text-xs text-slate-500 mb-2">${data.edges.length} connections</p>` +
+            neighbors.map(n => {
+                const label = n.label.length > 45 ? n.label.slice(0, 42) + '...' : n.label;
+                return `<div class="neighbor-item px-2 py-1.5 rounded-md hover:bg-slate-800 cursor-pointer transition-colors" data-id="${n.id}">
+                    <span class="text-xs font-semibold" style="color:${nodeColor(n.type)}">[${n.type}]</span>
+                    <span class="text-sm text-slate-300 ml-1">${label.replace(/</g, '&lt;')}</span>
+                    <div class="text-xs text-slate-600 mt-0.5">Click to center</div>
+                </div>`;
+            }).join('');
+
+        nbDiv.querySelectorAll('.neighbor-item').forEach(el => {
+            el.addEventListener('click', () => {
+                document.getElementById('center').value = el.dataset.id;
+                loadGraph();
+            });
+        });
+    }
+
+    function closeSidebar() {
+        document.getElementById('sidebar').style.width = '0';
+    }
+
+    // Auto-load on page open
+    loadGraph();
+</script>
+{% endblock %}