nexo-brain 5.3.26 → 5.3.28

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

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

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

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