nexo-brain 5.3.13 → 5.3.15

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

@@ -0,0 +1,252 @@
+{% extends "base.html" %}
+
+{% block title %}Dream Journal{% endblock %}
+{% block page_title %}Dream Journal{% endblock %}
+
+{% block head %}
+<style>
+  .dream-bg {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    pointer-events: none;
+    z-index: 0;
+    overflow: hidden;
+  }
+  .star {
+    position: absolute;
+    width: 2px; height: 2px;
+    background: white;
+    border-radius: 50%;
+    opacity: 0;
+    animation: twinkle var(--duration) ease-in-out var(--delay) infinite;
+  }
+  @keyframes twinkle {
+    0%, 100% { opacity: 0; }
+    50% { opacity: var(--max-opacity); }
+  }
+  @keyframes floatUp {
+    0% { opacity: 0; transform: translateY(20px) scale(0.95); }
+    100% { opacity: 1; transform: translateY(0) scale(1); }
+  }
+  .dream-card {
+    animation: floatUp 0.6s ease-out forwards;
+    opacity: 0;
+    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
+  }
+  .dream-card:hover {
+    border-color: rgba(139, 92, 246, 0.4);
+    box-shadow: 0 0 30px rgba(139, 92, 246, 0.12);
+    transform: translateY(-2px);
+  }
+  .insight-glow {
+    text-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
+  }
+  .connection-line {
+    background: linear-gradient(90deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.6), rgba(99, 102, 241, 0.3));
+    height: 1px;
+    position: relative;
+  }
+  .connection-line::after {
+    content: '';
+    position: absolute;
+    top: -1px; left: 0; right: 0; height: 3px;
+    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent);
+    animation: shimmer 3s ease-in-out infinite;
+  }
+  @keyframes shimmer {
+    0%, 100% { opacity: 0.3; }
+    50% { opacity: 1; }
+  }
+  .night-divider {
+    position: relative;
+    text-align: center;
+    margin: 2rem 0 1.5rem;
+  }
+  .night-divider::before {
+    content: '';
+    position: absolute;
+    left: 0; right: 0; top: 50%;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
+  }
+  .night-divider span {
+    position: relative;
+    background: #030712;
+    padding: 0 1rem;
+  }
+</style>
+{% endblock %}
+
+{% block content %}
+<!-- Star background -->
+<div class="dream-bg" id="star-field"></div>
+
+<!-- Stats header -->
+<div class="relative z-10 grid grid-cols-2 sm:grid-cols-3 gap-4 mb-6">
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 text-center">
+    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-2">Total Dreams</div>
+    <div class="text-3xl font-display font-bold text-indigo-300" id="stat-total">--</div>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 text-center">
+    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-2">Insights Generated</div>
+    <div class="text-3xl font-display font-bold text-violet-300" id="stat-insights">--</div>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 text-center sm:col-span-1 col-span-2">
+    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-2">Sleep Entries</div>
+    <div class="text-3xl font-display font-bold text-slate-300" id="stat-sleep">--</div>
+  </div>
+</div>
+
+<!-- Dream Timeline -->
+<div class="relative z-10 mb-8" id="dream-timeline">
+  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-4 flex items-center gap-2">
+    <svg class="w-4 h-4 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
+    Dream Timeline
+  </h2>
+  <div id="dreams-container" class="space-y-1">
+    <div class="text-xs text-slate-600 text-center py-12">Loading dream data...</div>
+  </div>
+</div>
+
+<!-- Sleep Diary -->
+<div class="relative z-10" id="sleep-section">
+  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-4 flex items-center gap-2">
+    <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+    Sleep Diary
+  </h2>
+  <div id="sleep-container" class="space-y-3">
+    <div class="text-xs text-slate-600 text-center py-8">Loading sleep entries...</div>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  const REFRESH_MS = 60000;
+
+  // Generate star field
+  function createStars() {
+    const field = document.getElementById('star-field');
+    for (let i = 0; i < 80; i++) {
+      const star = document.createElement('div');
+      star.className = 'star';
+      star.style.left = Math.random() * 100 + '%';
+      star.style.top = Math.random() * 100 + '%';
+      star.style.setProperty('--duration', (2 + Math.random() * 4) + 's');
+      star.style.setProperty('--delay', (Math.random() * 3) + 's');
+      star.style.setProperty('--max-opacity', (0.2 + Math.random() * 0.5).toString());
+      const size = 1 + Math.random() * 2;
+      star.style.width = size + 'px';
+      star.style.height = size + 'px';
+      field.appendChild(star);
+    }
+  }
+
+  function groupByNight(dreams) {
+    const groups = {};
+    for (const d of dreams) {
+      const date = (d.created_at || '').split(/[T ]/)[0] || 'Unknown';
+      if (!groups[date]) groups[date] = [];
+      groups[date].push(d);
+    }
+    return groups;
+  }
+
+  function renderDreamCard(d, idx) {
+    const insight = d.insight_content || d.insight || 'No insight recorded';
+    const memA = d.memory_a_content || `Memory #${d.memory_a_id || '?'}`;
+    const memB = d.memory_b_content || `Memory #${d.memory_b_id || '?'}`;
+    const created = d.created_at ? relativeTime(d.created_at) : '';
+    const delay = idx * 0.1;
+
+    return `<div class="dream-card bg-slate-900/50 border border-indigo-500/20 rounded-xl p-5 mb-3" style="animation-delay:${delay}s">
+      <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center gap-2">
+          <svg class="w-4 h-4 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
+          <span class="text-xs text-indigo-400 font-medium">Dream Connection</span>
+        </div>
+        <span class="text-[10px] text-slate-600 font-mono">${escapeHtml(created)}</span>
+      </div>
+
+      <!-- Two memories connected -->
+      <div class="flex items-stretch gap-0 mb-4">
+        <div class="flex-1 bg-slate-800/50 border border-slate-700/50 rounded-lg p-3">
+          <div class="text-[10px] uppercase tracking-wider text-slate-500 mb-1">Memory A</div>
+          <p class="text-xs text-slate-300 leading-relaxed">${escapeHtml(typeof memA === 'string' ? (memA.length > 120 ? memA.substring(0, 120) + '...' : memA) : String(memA))}</p>
+        </div>
+        <div class="flex flex-col items-center justify-center px-3">
+          <div class="w-8 connection-line"></div>
+          <svg class="w-4 h-4 text-violet-400 my-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+          <div class="w-8 connection-line"></div>
+        </div>
+        <div class="flex-1 bg-slate-800/50 border border-slate-700/50 rounded-lg p-3">
+          <div class="text-[10px] uppercase tracking-wider text-slate-500 mb-1">Memory B</div>
+          <p class="text-xs text-slate-300 leading-relaxed">${escapeHtml(typeof memB === 'string' ? (memB.length > 120 ? memB.substring(0, 120) + '...' : memB) : String(memB))}</p>
+        </div>
+      </div>
+
+      <!-- Insight -->
+      <div class="bg-violet-500/5 border border-violet-500/20 rounded-lg p-3">
+        <div class="text-[10px] uppercase tracking-wider text-violet-400 font-semibold mb-1">Insight</div>
+        <p class="text-sm text-violet-200 leading-relaxed insight-glow">${escapeHtml(insight)}</p>
+      </div>
+    </div>`;
+  }
+
+  function renderSleepEntry(entry) {
+    const content = entry.content || entry.summary || 'Sleep cycle completed';
+    const created = entry.created_at ? relativeTime(entry.created_at) : '';
+    return `<div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 transition-all hover:border-slate-700/50">
+      <div class="flex items-center justify-between mb-2">
+        <span class="text-[10px] px-1.5 py-0.5 rounded bg-slate-700 text-slate-400 font-medium">sleep</span>
+        <span class="text-[10px] text-slate-600 font-mono">${escapeHtml(created)}</span>
+      </div>
+      <p class="text-sm text-slate-300 leading-relaxed">${escapeHtml(content)}</p>
+    </div>`;
+  }
+
+  async function loadDreams() {
+    const data = await fetchJSON('/api/dreams');
+    if (!data) return;
+
+    const dreams = data.dreams || [];
+    const sleepEntries = data.sleep_entries || [];
+
+    // Stats
+    document.getElementById('stat-total').textContent = formatNumber(dreams.length);
+    document.getElementById('stat-insights').textContent = formatNumber(dreams.filter(d => d.insight_content || d.insight_id).length);
+    document.getElementById('stat-sleep').textContent = formatNumber(sleepEntries.length);
+
+    // Timeline grouped by night
+    const container = document.getElementById('dreams-container');
+    if (dreams.length === 0) {
+      container.innerHTML = '<div class="text-center py-12"><div class="text-2xl mb-2">&#127769;</div><div class="text-sm text-slate-500">No dreams recorded yet. Dreams are generated during deep sleep cycles.</div></div>';
+      return;
+    }
+
+    const groups = groupByNight(dreams);
+    let html = '';
+    let cardIdx = 0;
+    for (const [night, nightDreams] of Object.entries(groups).sort((a, b) => b[0].localeCompare(a[0]))) {
+      const d = new Date(night + 'T00:00:00');
+      const label = isNaN(d.getTime()) ? night : d.toLocaleDateString('en', { weekday: 'long', month: 'short', day: 'numeric' });
+      html += `<div class="night-divider"><span class="text-xs text-indigo-400/60 font-mono">${escapeHtml(label)} &mdash; ${nightDreams.length} dream${nightDreams.length > 1 ? 's' : ''}</span></div>`;
+      for (const dream of nightDreams) {
+        html += renderDreamCard(dream, cardIdx++);
+      }
+    }
+    container.innerHTML = html;
+
+    // Sleep entries
+    const sleepContainer = document.getElementById('sleep-container');
+    sleepContainer.innerHTML = sleepEntries.length === 0
+      ? '<div class="text-xs text-slate-600 text-center py-6">No sleep diary entries</div>'
+      : sleepEntries.map(renderSleepEntry).join('');
+  }
+
+  // Init
+  createStars();
+  loadDreams();
+  setInterval(loadDreams, REFRESH_MS);
+</script>
+{% endblock %}

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

@@ -0,0 +1,160 @@
+{% extends "base.html" %}
+
+{% block title %}Email Monitor{% endblock %}
+{% block page_title %}Email Monitor{% endblock %}
+
+{% block content %}
+<div class="space-y-5">
+  <!-- Stats cards -->
+  <div class="grid grid-cols-4 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 Emails</div>
+      <div class="text-xl font-mono font-semibold text-slate-200" id="email-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-emerald-400/70 font-medium mb-2">Processed</div>
+      <div class="text-xl font-mono font-semibold text-emerald-400" id="email-processed">--</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="email-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-slate-400 font-medium mb-2">Processing Rate</div>
+      <div class="text-xl font-mono font-semibold text-violet-400" id="email-rate">--%</div>
+    </div>
+  </div>
+
+  <!-- Processing funnel -->
+  <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">Processing Funnel</div>
+    <div class="flex items-end gap-1 justify-center" id="funnel" style="height: 80px;">
+      <!-- JS fills -->
+    </div>
+  </div>
+
+  <!-- Recent emails table -->
+  <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">Recent Emails</div>
+    <div class="overflow-x-auto">
+      <table class="w-full text-left">
+        <thead>
+          <tr class="border-b border-slate-800/50">
+            <th class="text-[10px] uppercase tracking-wider text-slate-500 font-medium pb-2 pr-4">Status</th>
+            <th class="text-[10px] uppercase tracking-wider text-slate-500 font-medium pb-2 pr-4">From</th>
+            <th class="text-[10px] uppercase tracking-wider text-slate-500 font-medium pb-2 pr-4">Subject</th>
+            <th class="text-[10px] uppercase tracking-wider text-slate-500 font-medium pb-2 text-right">Received</th>
+          </tr>
+        </thead>
+        <tbody id="email-table" class="divide-y divide-slate-800/30">
+          <tr><td colspan="4" class="text-xs text-slate-600 py-8 text-center">loading...</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- Thread grouping -->
+  <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">Thread Groups</div>
+    <div class="space-y-2" id="thread-groups">
+      <div class="text-xs text-slate-600 py-4 text-center">loading...</div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+const EMAIL_STATUS = {
+  processed: { bg: 'bg-emerald-500/10', text: 'text-emerald-400', dot: 'bg-emerald-500' },
+  pending: { bg: 'bg-amber-500/10', text: 'text-amber-400', dot: 'bg-amber-500' },
+  failed: { bg: 'bg-red-500/10', text: 'text-red-400', dot: 'bg-red-500' },
+  skipped: { bg: 'bg-slate-500/10', text: 'text-slate-400', dot: 'bg-slate-600' },
+};
+
+function renderFunnel(stats) {
+  const container = document.getElementById('funnel');
+  const total = stats.total || 1;
+  const processed = stats.processed || 0;
+  const pending = stats.pending || 0;
+  const failed = total - processed - pending;
+
+  const stages = [
+    { label: 'Received', value: total, color: 'bg-violet-500' },
+    { label: 'Processed', value: processed, color: 'bg-emerald-500' },
+    { label: 'Pending', value: pending, color: 'bg-amber-500' },
+  ];
+  if (failed > 0) stages.push({ label: 'Failed', value: failed, color: 'bg-red-500' });
+
+  const maxVal = Math.max(...stages.map(s => s.value), 1);
+
+  container.innerHTML = stages.map(s => {
+    const pct = Math.max(8, (s.value / maxVal) * 100);
+    return `<div class="flex-1 flex flex-col items-center gap-1">
+      <span class="text-xs font-mono text-slate-300">${s.value}</span>
+      <div class="w-full rounded-t-md ${s.color} transition-all duration-500" style="height:${pct}%"></div>
+      <span class="text-[10px] text-slate-500">${s.label}</span>
+    </div>`;
+  }).join('');
+}
+
+function renderTable(emails) {
+  const tbody = document.getElementById('email-table');
+  if (!emails || !emails.length) {
+    tbody.innerHTML = '<tr><td colspan="4" class="text-xs text-slate-600 py-8 text-center">No emails found</td></tr>';
+    return;
+  }
+
+  tbody.innerHTML = emails.map(e => {
+    const status = e.status || 'pending';
+    const sc = EMAIL_STATUS[status] || EMAIL_STATUS.pending;
+    return `<tr class="hover:bg-slate-800/20 transition-colors">
+      <td class="py-2.5 pr-4"><span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-[10px] font-medium ${sc.bg} ${sc.text}"><span class="w-1.5 h-1.5 rounded-full ${sc.dot}"></span>${escapeHtml(status)}</span></td>
+      <td class="py-2.5 pr-4 text-xs text-slate-300 truncate max-w-[200px]">${escapeHtml(e.from_addr || '--')}</td>
+      <td class="py-2.5 pr-4 text-xs text-slate-400 truncate max-w-[300px]">${escapeHtml(e.subject || '(no subject)')}</td>
+      <td class="py-2.5 text-xs text-slate-500 text-right whitespace-nowrap">${relativeTime(e.received_at)}</td>
+    </tr>`;
+  }).join('');
+}
+
+function renderThreads(threads) {
+  const container = document.getElementById('thread-groups');
+  if (!threads || !threads.length) {
+    container.innerHTML = '<div class="text-xs text-slate-600 py-4 text-center">No thread data</div>';
+    return;
+  }
+
+  container.innerHTML = threads.map(t => {
+    const count = t.count || t.messages || 1;
+    return `<div class="flex items-center gap-3 py-2 px-3 rounded-lg hover:bg-slate-800/20 transition-colors">
+      <svg class="w-4 h-4 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
+      <div class="flex-1 min-w-0">
+        <div class="text-xs text-slate-300 truncate">${escapeHtml(t.subject || t.thread_id || '--')}</div>
+        <div class="text-[10px] text-slate-500">${count} message${count !== 1 ? 's' : ''}</div>
+      </div>
+      <span class="text-[10px] text-slate-600">${relativeTime(t.last_at || t.updated_at)}</span>
+    </div>`;
+  }).join('');
+}
+
+async function loadEmail() {
+  const data = await fetchJSON('/api/email');
+  if (!data) return;
+
+  const stats = data.stats || {};
+  document.getElementById('email-total').textContent = formatNumber(stats.total || 0);
+  document.getElementById('email-processed').textContent = formatNumber(stats.processed || 0);
+  document.getElementById('email-pending').textContent = formatNumber(stats.pending || 0);
+
+  const rate = stats.total ? Math.round((stats.processed / stats.total) * 100) : 0;
+  document.getElementById('email-rate').textContent = rate + '%';
+
+  renderFunnel(stats);
+  renderTable(data.recent || []);
+  renderThreads(data.threads || []);
+}
+
+loadEmail();
+setInterval(loadEmail, 60000);
+</script>
+{% endblock %}

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

@@ -0,0 +1,189 @@
+{% extends "base.html" %}
+
+{% block title %}Evolution Cockpit{% endblock %}
+{% block page_title %}Evolution Cockpit{% endblock %}
+
+{% block content %}
+<div class="space-y-5">
+  <!-- Top stats -->
+  <div class="grid grid-cols-5 gap-4" id="dim-cards">
+    <!-- Populated by JS -->
+  </div>
+
+  <!-- Main row: Radar + History -->
+  <div class="grid grid-cols-2 gap-5">
+    <!-- Radar 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">Dimension Radar</div>
+      <div class="flex items-center justify-center" style="min-height: 320px;">
+        <svg id="radar-svg" viewBox="0 0 400 400" class="w-full max-w-sm"></svg>
+      </div>
+    </div>
+
+    <!-- Score History -->
+    <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">Score History</div>
+      <div class="space-y-3" id="score-history">
+        <div class="text-xs text-slate-600 py-8 text-center">loading...</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Evolution Log Timeline -->
+  <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">Evolution Log</div>
+    <div class="space-y-3" id="evo-log">
+      <div class="text-xs text-slate-600 py-4 text-center">loading...</div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+const DIMS = ['autonomy', 'reasoning', 'memory', 'trust', 'creativity'];
+const DIM_COLORS = {
+  autonomy: '#7C3AED', reasoning: '#3B82F6', memory: '#EC4899',
+  trust: '#10B981', creativity: '#F59E0B'
+};
+
+function drawRadar(dimensions) {
+  const svg = document.getElementById('radar-svg');
+  const cx = 200, cy = 200, maxR = 150;
+  const n = DIMS.length;
+  const angleStep = (2 * Math.PI) / n;
+
+  let html = '';
+  // Grid rings
+  for (let ring = 1; ring <= 5; ring++) {
+    const r = (ring / 5) * maxR;
+    let points = '';
+    for (let i = 0; i < n; i++) {
+      const a = -Math.PI / 2 + i * angleStep;
+      points += `${cx + r * Math.cos(a)},${cy + r * Math.sin(a)} `;
+    }
+    html += `<polygon points="${points}" fill="none" stroke="rgba(51,65,85,0.4)" stroke-width="1"/>`;
+    if (ring === 5) {
+      html += `<text x="${cx + 4}" y="${cy - r - 4}" class="text-[10px]" fill="#64748b">100</text>`;
+    }
+  }
+
+  // Axes
+  for (let i = 0; i < n; i++) {
+    const a = -Math.PI / 2 + i * angleStep;
+    const ex = cx + maxR * Math.cos(a);
+    const ey = cy + maxR * Math.sin(a);
+    html += `<line x1="${cx}" y1="${cy}" x2="${ex}" y2="${ey}" stroke="rgba(51,65,85,0.3)" stroke-width="1"/>`;
+    const lx = cx + (maxR + 20) * Math.cos(a);
+    const ly = cy + (maxR + 20) * Math.sin(a);
+    html += `<text x="${lx}" y="${ly}" text-anchor="middle" dominant-baseline="middle" fill="${DIM_COLORS[DIMS[i]]}" class="text-xs font-display font-semibold" style="font-size:11px">${DIMS[i]}</text>`;
+  }
+
+  // Data polygon
+  if (dimensions) {
+    let points = '';
+    for (let i = 0; i < n; i++) {
+      const score = dimensions[DIMS[i]]?.score ?? 0;
+      const r = (score / 100) * maxR;
+      const a = -Math.PI / 2 + i * angleStep;
+      points += `${cx + r * Math.cos(a)},${cy + r * Math.sin(a)} `;
+    }
+    html += `<polygon points="${points}" fill="rgba(124,58,237,0.15)" stroke="#7C3AED" stroke-width="2"/>`;
+
+    // Data points
+    for (let i = 0; i < n; i++) {
+      const score = dimensions[DIMS[i]]?.score ?? 0;
+      const r = (score / 100) * maxR;
+      const a = -Math.PI / 2 + i * angleStep;
+      const px = cx + r * Math.cos(a);
+      const py = cy + r * Math.sin(a);
+      html += `<circle cx="${px}" cy="${py}" r="4" fill="${DIM_COLORS[DIMS[i]]}" stroke="#0f172a" stroke-width="2"/>`;
+    }
+  }
+
+  svg.innerHTML = html;
+}
+
+function renderDimCards(dimensions) {
+  const container = document.getElementById('dim-cards');
+  if (!dimensions) { container.innerHTML = '<div class="col-span-5 text-xs text-slate-600 text-center py-4">No dimension data</div>'; return; }
+
+  container.innerHTML = DIMS.map(dim => {
+    const d = dimensions[dim] || {};
+    const score = d.score ?? 0;
+    const delta = d.delta ?? 0;
+    const deltaSign = delta > 0 ? '+' : '';
+    const deltaColor = delta > 0 ? 'text-emerald-400' : delta < 0 ? 'text-red-400' : 'text-slate-500';
+    const color = DIM_COLORS[dim];
+    return `<div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
+      <div class="flex items-center gap-2 mb-2">
+        <span class="w-2 h-2 rounded-full" style="background:${color}"></span>
+        <span class="text-xs uppercase tracking-wider text-slate-400 font-medium">${dim}</span>
+      </div>
+      <div class="flex items-end gap-2">
+        <span class="text-xl font-mono font-semibold text-slate-200">${score.toFixed(1)}</span>
+        <span class="text-xs font-mono ${deltaColor} mb-0.5">${deltaSign}${delta.toFixed(1)}</span>
+      </div>
+      <div class="mt-2 h-1 bg-slate-800 rounded-full overflow-hidden">
+        <div class="h-full rounded-full transition-all duration-700" style="width:${Math.min(100, score)}%;background:${color}"></div>
+      </div>
+      <div class="mt-1 text-[10px] text-slate-600">${d.measured_at ? relativeTime(d.measured_at) : '--'}</div>
+    </div>`;
+  }).join('');
+}
+
+function renderHistory(metrics) {
+  const container = document.getElementById('score-history');
+  if (!metrics || !metrics.length) { container.innerHTML = '<div class="text-xs text-slate-600 py-8 text-center">No history data</div>'; return; }
+
+  const maxEntries = 20;
+  const items = metrics.slice(0, maxEntries);
+  container.innerHTML = items.map(m => {
+    const dim = m.dimension || m.name || '--';
+    const score = m.score ?? m.value ?? 0;
+    const color = DIM_COLORS[dim] || '#64748b';
+    return `<div class="flex items-center gap-3">
+      <span class="w-16 text-[10px] text-slate-500 font-mono">${relativeTime(m.measured_at || m.created_at)}</span>
+      <span class="w-2 h-2 rounded-full flex-shrink-0" style="background:${color}"></span>
+      <span class="text-xs text-slate-400 flex-1">${escapeHtml(dim)}</span>
+      <span class="text-xs font-mono text-slate-300">${score.toFixed(1)}</span>
+    </div>`;
+  }).join('');
+}
+
+function renderLog(logs) {
+  const container = document.getElementById('evo-log');
+  if (!logs || !logs.length) { container.innerHTML = '<div class="text-xs text-slate-600 py-4 text-center">No evolution logs</div>'; return; }
+
+  container.innerHTML = logs.map(log => {
+    const status = log.status || 'proposed';
+    const statusColors = { approved: 'bg-emerald-500/10 text-emerald-400', rejected: 'bg-red-500/10 text-red-400', proposed: 'bg-amber-500/10 text-amber-400' };
+    const sc = statusColors[status] || statusColors.proposed;
+    return `<div class="flex items-start gap-3 py-2 border-b border-slate-800/30 last:border-0">
+      <div class="w-1 h-1 rounded-full bg-slate-600 mt-1.5 flex-shrink-0"></div>
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center gap-2 flex-wrap">
+          <span class="text-xs text-slate-300">${escapeHtml(log.proposal || log.description || log.text || '--')}</span>
+          <span class="px-1.5 py-0.5 rounded text-[10px] font-medium ${sc}">${escapeHtml(status)}</span>
+        </div>
+        <div class="text-[10px] text-slate-600 mt-0.5">${escapeHtml(log.dimension || '')} ${log.created_at ? '-- ' + relativeTime(log.created_at) : ''}</div>
+      </div>
+    </div>`;
+  }).join('');
+}
+
+async function loadEvolution() {
+  const data = await fetchJSON('/api/evolution');
+  if (!data) return;
+
+  const dimensions = data.dimensions || {};
+  drawRadar(dimensions);
+  renderDimCards(dimensions);
+  renderHistory(data.metrics || []);
+  renderLog(data.logs || []);
+}
+
+loadEvolution();
+setInterval(loadEvolution, 60000);
+</script>
+{% endblock %}