nexo-brain 2.4.0 → 2.5.1

package/src/dashboard/templates/skills.html

@@ -0,0 +1,329 @@
+{% extends "base.html" %}
+
+{% block title %}Skills Lab{% endblock %}
+{% block page_title %}Skills Lab{% endblock %}
+
+{% block head %}
+<style>
+  .kanban-col {
+    min-height: 300px;
+    transition: background 0.2s;
+  }
+  .kanban-col:hover {
+    background: rgba(30, 41, 59, 0.3);
+  }
+  .skill-card {
+    transition: all 0.25s ease;
+    cursor: pointer;
+    animation: slideIn 0.3s ease-out forwards;
+  }
+  .skill-card:hover {
+    border-color: rgba(124, 58, 237, 0.4);
+    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.1);
+    transform: translateY(-1px);
+  }
+  .skill-card .detail-panel {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s ease, opacity 0.3s ease;
+    opacity: 0;
+  }
+  .skill-card.expanded .detail-panel {
+    max-height: 600px;
+    opacity: 1;
+  }
+  .tag-pill {
+    transition: transform 0.15s;
+  }
+  .tag-pill:hover {
+    transform: scale(1.05);
+  }
+  .trust-bar-fill {
+    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .level-badge-trace { background: rgba(148, 163, 184, 0.1); color: #94a3b8; border-color: rgba(148, 163, 184, 0.2); }
+  .level-badge-draft { background: rgba(251, 191, 36, 0.1); color: #fbbf24; border-color: rgba(251, 191, 36, 0.2); }
+  .level-badge-candidate { background: rgba(96, 165, 250, 0.1); color: #60a5fa; border-color: rgba(96, 165, 250, 0.2); }
+  .level-badge-published { background: rgba(52, 211, 153, 0.1); color: #34d399; border-color: rgba(52, 211, 153, 0.2); }
+  .level-badge-archived { background: rgba(107, 114, 128, 0.1); color: #6b7280; border-color: rgba(107, 114, 128, 0.2); }
+  .drag-hint {
+    cursor: grab;
+    opacity: 0.3;
+    transition: opacity 0.2s;
+  }
+  .skill-card:hover .drag-hint {
+    opacity: 0.6;
+  }
+  @keyframes slideIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+</style>
+{% endblock %}
+
+{% block header_actions %}
+<div class="flex items-center gap-2">
+  <input type="text" id="skill-search" placeholder="Filter skills..."
+    class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-xs text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-violet-500 w-52"
+    oninput="filterSkills()">
+</div>
+{% endblock %}
+
+{% block content %}
+<!-- Stats Header -->
+<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-3 mb-6" id="stats-row">
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
+    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Total Skills</div>
+    <div class="text-2xl font-display font-bold text-slate-200" id="stat-total">--</div>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
+    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Trace</div>
+    <div class="text-2xl font-display font-bold text-slate-400" id="stat-trace">--</div>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
+    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Draft</div>
+    <div class="text-2xl font-display font-bold text-amber-400" id="stat-draft">--</div>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
+    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Candidate</div>
+    <div class="text-2xl font-display font-bold text-blue-400" id="stat-candidate">--</div>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
+    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Published</div>
+    <div class="text-2xl font-display font-bold text-emerald-400" id="stat-published">--</div>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
+    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Archived</div>
+    <div class="text-2xl font-display font-bold text-gray-500" id="stat-archived">--</div>
+  </div>
+</div>
+
+<!-- Top Skills by Usage -->
+<div class="mb-6">
+  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-3">Top Skills by Usage</h2>
+  <div class="flex gap-3 overflow-x-auto pb-2" id="top-skills">
+    <div class="text-xs text-slate-600 py-3">Loading...</div>
+  </div>
+</div>
+
+<!-- Kanban Board -->
+<div class="mb-6">
+  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-3">Skill Lifecycle</h2>
+  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3" id="kanban-board">
+    <!-- Columns generated by JS -->
+  </div>
+</div>
+
+<!-- Recent Usage Timeline -->
+<div>
+  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-3">Recent Usage</h2>
+  <div class="space-y-2" id="usage-timeline">
+    <div class="text-xs text-slate-600 text-center py-6">Loading usage data...</div>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  const REFRESH_MS = 60000;
+  const LEVELS = ['trace', 'draft', 'candidate', 'published', 'archived'];
+  const LEVEL_COLORS = {
+    trace: { bg: 'bg-slate-500/10', border: 'border-slate-500/20', text: 'text-slate-400', dot: 'bg-slate-400' },
+    draft: { bg: 'bg-amber-500/10', border: 'border-amber-500/20', text: 'text-amber-400', dot: 'bg-amber-400' },
+    candidate: { bg: 'bg-blue-500/10', border: 'border-blue-500/20', text: 'text-blue-400', dot: 'bg-blue-400' },
+    published: { bg: 'bg-emerald-500/10', border: 'border-emerald-500/20', text: 'text-emerald-400', dot: 'bg-emerald-400' },
+    archived: { bg: 'bg-gray-500/10', border: 'border-gray-500/20', text: 'text-gray-500', dot: 'bg-gray-500' },
+  };
+
+  let allSkills = [];
+
+  const TAG_COLORS = [
+    'bg-violet-500/15 text-violet-300', 'bg-cyan-500/15 text-cyan-300',
+    'bg-pink-500/15 text-pink-300', 'bg-emerald-500/15 text-emerald-300',
+    'bg-amber-500/15 text-amber-300', 'bg-blue-500/15 text-blue-300',
+    'bg-rose-500/15 text-rose-300', 'bg-indigo-500/15 text-indigo-300',
+  ];
+
+  function tagColor(tag) {
+    let hash = 0;
+    for (let i = 0; i < tag.length; i++) hash = tag.charCodeAt(i) + ((hash << 5) - hash);
+    return TAG_COLORS[Math.abs(hash) % TAG_COLORS.length];
+  }
+
+  function trustColor(score) {
+    if (score >= 0.8) return 'bg-emerald-500';
+    if (score >= 0.5) return 'bg-violet-500';
+    if (score >= 0.3) return 'bg-amber-500';
+    return 'bg-red-500';
+  }
+
+  function renderSkillCard(skill) {
+    const level = (skill.level || 'trace').toLowerCase();
+    const colors = LEVEL_COLORS[level] || LEVEL_COLORS.trace;
+    const trust = skill.trust_score != null ? skill.trust_score : 0;
+    const tags = skill.tags || [];
+    const useCount = skill.use_count || 0;
+    const steps = skill.steps || [];
+    const gotchas = skill.gotchas || [];
+    const desc = skill.description || '';
+
+    const tagsHtml = tags.slice(0, 5).map(t =>
+      `<span class="tag-pill text-[10px] px-1.5 py-0.5 rounded-full ${tagColor(t)}">${escapeHtml(t)}</span>`
+    ).join('');
+
+    const stepsHtml = steps.length > 0
+      ? `<div class="mt-3"><div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Steps</div><ol class="list-decimal list-inside space-y-0.5">${steps.map(s => `<li class="text-xs text-slate-400">${escapeHtml(typeof s === 'string' ? s : s.description || JSON.stringify(s))}</li>`).join('')}</ol></div>`
+      : '';
+
+    const gotchasHtml = gotchas.length > 0
+      ? `<div class="mt-3"><div class="text-[10px] uppercase tracking-wider text-amber-500/60 font-semibold mb-1">Gotchas</div><ul class="space-y-0.5">${gotchas.map(g => `<li class="text-xs text-amber-300/70">&#x26A0; ${escapeHtml(typeof g === 'string' ? g : JSON.stringify(g))}</li>`).join('')}</ul></div>`
+      : '';
+
+    return `<div class="skill-card bg-slate-900/50 border border-slate-800/50 rounded-xl p-3 mb-2" data-name="${escapeHtml(skill.name || '')}" data-level="${level}" onclick="this.classList.toggle('expanded')">
+      <div class="flex items-start justify-between mb-1.5">
+        <div class="flex items-center gap-1.5 min-w-0">
+          <svg class="w-3 h-3 drag-hint text-slate-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><circle cx="6" cy="5" r="1.5"/><circle cx="14" cy="5" r="1.5"/><circle cx="6" cy="10" r="1.5"/><circle cx="14" cy="10" r="1.5"/><circle cx="6" cy="15" r="1.5"/><circle cx="14" cy="15" r="1.5"/></svg>
+          <span class="text-sm font-medium text-slate-200 truncate">${escapeHtml(skill.name || 'Unnamed')}</span>
+        </div>
+        <span class="text-[10px] font-mono text-slate-600 flex-shrink-0 ml-2">#${skill.id || '?'}</span>
+      </div>
+
+      <!-- Trust score bar -->
+      <div class="flex items-center gap-2 mb-2">
+        <div class="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden">
+          <div class="trust-bar-fill h-full rounded-full ${trustColor(trust)}" style="width:${(trust * 100).toFixed(0)}%"></div>
+        </div>
+        <span class="text-[10px] font-mono text-slate-500">${trust.toFixed(2)}</span>
+      </div>
+
+      <div class="flex items-center gap-2 flex-wrap">
+        <span class="text-[10px] font-mono text-slate-500">${useCount} uses</span>
+        ${tagsHtml}
+      </div>
+
+      <!-- Expandable detail -->
+      <div class="detail-panel">
+        <div class="mt-3 pt-3 border-t border-slate-800/50">
+          ${desc ? `<p class="text-xs text-slate-400 leading-relaxed mb-2">${escapeHtml(desc)}</p>` : ''}
+          ${stepsHtml}
+          ${gotchasHtml}
+        </div>
+      </div>
+    </div>`;
+  }
+
+  function renderKanban(skills) {
+    const board = document.getElementById('kanban-board');
+    const grouped = {};
+    LEVELS.forEach(l => grouped[l] = []);
+    skills.forEach(s => {
+      const level = (s.level || 'trace').toLowerCase();
+      if (grouped[level]) grouped[level].push(s);
+      else grouped.trace.push(s);
+    });
+
+    board.innerHTML = LEVELS.map(level => {
+      const colors = LEVEL_COLORS[level];
+      const items = grouped[level];
+      return `<div class="kanban-col ${colors.bg} border ${colors.border} rounded-xl p-3">
+        <div class="flex items-center gap-2 mb-3 pb-2 border-b ${colors.border}">
+          <span class="w-2 h-2 rounded-full ${colors.dot}"></span>
+          <span class="text-xs uppercase tracking-wider ${colors.text} font-semibold">${level}</span>
+          <span class="text-[10px] font-mono text-slate-600 ml-auto">${items.length}</span>
+        </div>
+        <div class="space-y-0">
+          ${items.length === 0
+            ? `<div class="text-[10px] text-slate-600 text-center py-4">No skills</div>`
+            : items.map(renderSkillCard).join('')}
+        </div>
+      </div>`;
+    }).join('');
+  }
+
+  function renderTopSkills(skills) {
+    const container = document.getElementById('top-skills');
+    const sorted = [...skills].sort((a, b) => (b.use_count || 0) - (a.use_count || 0)).slice(0, 8);
+    if (sorted.length === 0) {
+      container.innerHTML = '<div class="text-xs text-slate-600 py-3">No skill usage data</div>';
+      return;
+    }
+    const maxUse = sorted[0].use_count || 1;
+    container.innerHTML = sorted.map(s => {
+      const pct = ((s.use_count || 0) / maxUse * 100).toFixed(0);
+      const level = (s.level || 'trace').toLowerCase();
+      const colors = LEVEL_COLORS[level] || LEVEL_COLORS.trace;
+      return `<div class="flex-shrink-0 bg-slate-900/50 border border-slate-800/50 rounded-xl p-3 w-44">
+        <div class="text-sm font-medium text-slate-200 truncate mb-1">${escapeHtml(s.name || 'Unnamed')}</div>
+        <div class="flex items-center gap-2 mb-1">
+          <div class="flex-1 h-1 bg-slate-800 rounded-full overflow-hidden">
+            <div class="h-full rounded-full bg-violet-500" style="width:${pct}%"></div>
+          </div>
+        </div>
+        <div class="flex items-center justify-between">
+          <span class="text-[10px] font-mono text-slate-500">${s.use_count || 0} uses</span>
+          <span class="text-[10px] px-1 py-0.5 rounded level-badge-${level}">${level}</span>
+        </div>
+      </div>`;
+    }).join('');
+  }
+
+  function renderUsageTimeline(usage) {
+    const container = document.getElementById('usage-timeline');
+    if (!usage || usage.length === 0) {
+      container.innerHTML = '<div class="text-xs text-slate-600 text-center py-6">No recent usage</div>';
+      return;
+    }
+    container.innerHTML = usage.slice(0, 20).map(u => {
+      const skillName = u.skill_name || u.name || `Skill #${u.skill_id || '?'}`;
+      const when = u.created_at ? relativeTime(u.created_at) : '';
+      const result = u.result || u.outcome || '';
+      return `<div class="flex items-center gap-3 bg-slate-900/30 border border-slate-800/30 rounded-lg px-3 py-2">
+        <div class="w-1.5 h-1.5 rounded-full bg-violet-500 flex-shrink-0"></div>
+        <span class="text-xs text-slate-300 font-medium">${escapeHtml(skillName)}</span>
+        ${result ? `<span class="text-[10px] px-1.5 py-0.5 rounded ${result === 'success' ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400'}">${escapeHtml(result)}</span>` : ''}
+        <span class="text-[10px] text-slate-600 font-mono ml-auto">${escapeHtml(when)}</span>
+      </div>`;
+    }).join('');
+  }
+
+  function filterSkills() {
+    const q = document.getElementById('skill-search').value.trim().toLowerCase();
+    const filtered = q ? allSkills.filter(s =>
+      (s.name || '').toLowerCase().includes(q) ||
+      (s.description || '').toLowerCase().includes(q) ||
+      (s.tags || []).some(t => t.toLowerCase().includes(q))
+    ) : allSkills;
+    renderKanban(filtered);
+  }
+
+  async function loadSkills() {
+    const data = await fetchJSON('/api/skills');
+    if (!data) return;
+
+    allSkills = data.skills || [];
+    const usage = data.usage || [];
+    const levels = data.levels || {};
+
+    // Stats
+    document.getElementById('stat-total').textContent = formatNumber(allSkills.length);
+    const countByLevel = {};
+    LEVELS.forEach(l => countByLevel[l] = 0);
+    allSkills.forEach(s => {
+      const l = (s.level || 'trace').toLowerCase();
+      if (countByLevel[l] !== undefined) countByLevel[l]++;
+    });
+    LEVELS.forEach(l => {
+      const el = document.getElementById(`stat-${l}`);
+      if (el) el.textContent = formatNumber(levels[l] != null ? levels[l] : countByLevel[l]);
+    });
+
+    renderKanban(allSkills);
+    renderTopSkills(allSkills);
+    renderUsageTimeline(usage);
+  }
+
+  // Init
+  loadSkills();
+  setInterval(loadSkills, REFRESH_MS);
+</script>
+{% endblock %}

package/src/dashboard/templates/somatic.html

@@ -1,177 +1,73 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>NEXO Brain — Somatic Markers</title>
-  <link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>tailwind.config={theme:{extend:{fontFamily:{display:['Space Grotesk','system-ui','sans-serif'],mono:['JetBrains Mono','monospace']}}}}</script>
-  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-</head>
-<body class="bg-gray-950 text-slate-200">
-
-  <!-- Sidebar -->
-  <aside class="fixed left-0 top-0 bottom-0 w-14 bg-slate-900 border-r border-slate-800 flex flex-col items-center py-4 z-50">
-    <!-- Logo -->
-    <a href="/" class="mb-6 flex items-center justify-center w-8 h-8">
-      <img src="/static/nexo-logo.png" alt="NEXO" class="w-7 h-7" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
-      <div class="w-7 h-7 rounded-lg bg-violet-600 items-center justify-center hidden">
-        <span class="text-white text-xs font-bold font-display">N</span>
-      </div>
-    </a>
-
-    <!-- Nav icons -->
-    <nav class="flex flex-col items-center gap-1 flex-1">
-      <!-- Dashboard -->
-      <a href="/" title="Dashboard" class="w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-200 hover:bg-slate-800 transition-colors">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
-        </svg>
-      </a>
-      <!-- Operations -->
-      <a href="/ops" title="Operations" class="w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-200 hover:bg-slate-800 transition-colors">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
-        </svg>
-      </a>
-      <!-- Calendar -->
-      <a href="/calendar" title="Calendar" class="w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-200 hover:bg-slate-800 transition-colors">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
-        </svg>
-      </a>
-      <!-- Inbox -->
-      <a href="/inbox" title="Inbox" class="w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-200 hover:bg-slate-800 transition-colors relative">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.981l7.5-4.039a2.25 2.25 0 012.134 0l7.5 4.039a2.25 2.25 0 011.183 1.98V19.5z" />
-        </svg>
-        <span id="inbox-badge" class="absolute top-1 right-1 w-2 h-2 bg-violet-500 rounded-full hidden"></span>
-      </a>
-
-      <div class="w-6 border-t border-slate-800 my-1"></div>
-
-      <!-- Memory -->
-      <a href="/memory" title="Memory" class="w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-200 hover:bg-slate-800 transition-colors">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776" />
-        </svg>
-      </a>
-      <!-- Graph -->
-      <a href="/graph" title="Graph" class="w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-200 hover:bg-slate-800 transition-colors">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
-        </svg>
-      </a>
-      <!-- Sessions -->
-      <a href="/sessions" title="Sessions" class="w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-200 hover:bg-slate-800 transition-colors">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-      </a>
-      <!-- Somatic (ACTIVE) -->
-      <a href="/somatic" title="Somatic" class="w-9 h-9 flex items-center justify-center rounded-lg bg-slate-800 text-slate-200 transition-colors">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
-        </svg>
-      </a>
-      <!-- Adaptive -->
-      <a href="/adaptive" title="Adaptive" class="w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-200 hover:bg-slate-800 transition-colors">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
-        </svg>
-      </a>
-    </nav>
-
-    <!-- Trust score -->
-    <div class="mt-auto flex flex-col items-center gap-0.5">
-      <span class="text-xs uppercase tracking-wider text-slate-600">Trust</span>
-      <span id="sidebar-trust" class="text-xs font-mono font-medium text-slate-400">--</span>
-    </div>
-  </aside>
-
-  <!-- Main -->
-  <main class="ml-14 min-h-screen bg-gray-950 text-slate-200">
-    <header class="h-12 border-b border-slate-800/50 flex items-center px-6">
-      <h1 class="text-sm font-display font-semibold">Somatic Markers</h1>
-    </header>
-    <div class="p-6 max-w-3xl">
-      <p class="text-sm text-slate-400 mb-6">Risk associations from past errors. Higher scores indicate areas needing extra caution.</p>
-      <div id="risks" class="space-y-2"></div>
-      <div id="empty" class="p-12 text-center text-slate-500 text-sm hidden">No somatic markers recorded</div>
-    </div>
-  </main>
-
-  <script>
-    function barColor(score) {
-      if (score > 5) return 'bg-red-500';
-      if (score > 2) return 'bg-amber-500';
-      return 'bg-emerald-500';
-    }
-
-    function scoreColor(score) {
-      if (score > 5) return 'text-red-400';
-      if (score > 2) return 'text-amber-400';
-      return 'text-emerald-400';
-    }
-
-    function loadData() {
-      fetch('/api/somatic')
-        .then(r => r.json())
-        .then(data => {
-          const risks = (data.risks || []).slice().sort((a, b) => {
-            const sa = Math.abs(a.cumulative_score || a.score || 0);
-            const sb = Math.abs(b.cumulative_score || b.score || 0);
-            return sb - sa;
-          });
-
-          const container = document.getElementById('risks');
-          const empty = document.getElementById('empty');
-
-          if (!risks.length) {
-            empty.classList.remove('hidden');
-            return;
-          }
+{% extends "base.html" %}
+
+{% block title %}Somatic Markers{% endblock %}
+{% block page_title %}Somatic Markers{% endblock %}
+
+{% block content %}
+<div class="max-w-3xl">
+  <p class="text-sm text-slate-400 mb-6">Risk associations from past errors. Higher scores indicate areas needing extra caution.</p>
+  <div id="risks" class="space-y-2"></div>
+  <div id="empty" class="p-12 text-center text-slate-500 text-sm hidden">No somatic markers recorded</div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  function barColor(score) {
+    if (score > 5) return 'bg-red-500';
+    if (score > 2) return 'bg-amber-500';
+    return 'bg-emerald-500';
+  }
+
+  function scoreColor(score) {
+    if (score > 5) return 'text-red-400';
+    if (score > 2) return 'text-amber-400';
+    return 'text-emerald-400';
+  }
+
+  function loadData() {
+    fetch('/api/somatic')
+      .then(r => r.json())
+      .then(data => {
+        const risks = (data.risks || []).slice().sort((a, b) => {
+          const sa = Math.abs(a.cumulative_score || a.score || 0);
+          const sb = Math.abs(b.cumulative_score || b.score || 0);
+          return sb - sa;
+        });
 
-          const max = Math.max(...risks.map(r => Math.abs(r.cumulative_score || r.score || 0)), 1);
+        const container = document.getElementById('risks');
+        const empty = document.getElementById('empty');
 
-          container.innerHTML = risks.map(r => {
-            const score = Math.abs(r.cumulative_score || r.score || 0);
-            const pct = Math.min((score / max) * 100, 100);
-            const target_type = r.target_type || r.type || '';
-            const target = (r.target || r.name || '').replace(/</g, '&lt;');
-            const bc = barColor(score);
-            const sc = scoreColor(score);
+        if (!risks.length) {
+          empty.classList.remove('hidden');
+          return;
+        }
 
-            return `<div class="flex items-center gap-3 py-1">
-  <span class="text-xs w-20 text-right text-slate-400 flex-shrink-0 font-medium">${target_type}</span>
-  <span class="text-sm w-56 truncate text-slate-200 flex-shrink-0">${target}</span>
-  <div class="flex-1 h-2.5 bg-slate-800 rounded-full overflow-hidden">
-    <div class="h-full rounded-full ${bc}" style="width:${pct.toFixed(1)}%"></div>
-  </div>
-  <span class="text-sm font-mono ${sc} w-12 text-right font-medium">${score.toFixed(1)}</span>
+        const max = Math.max(...risks.map(r => Math.abs(r.cumulative_score || r.score || 0)), 1);
+
+        container.innerHTML = risks.map(r => {
+          const score = Math.abs(r.cumulative_score || r.score || 0);
+          const pct = Math.min((score / max) * 100, 100);
+          const target_type = r.target_type || r.type || '';
+          const target = (r.target || r.name || '').replace(/</g, '&lt;');
+          const bc = barColor(score);
+          const sc = scoreColor(score);
+
+          return `<div class="flex items-center gap-3 py-1">
+<span class="text-xs w-20 text-right text-slate-400 flex-shrink-0 font-medium">${target_type}</span>
+<span class="text-sm w-56 truncate text-slate-200 flex-shrink-0">${target}</span>
+<div class="flex-1 h-2.5 bg-slate-800 rounded-full overflow-hidden">
+  <div class="h-full rounded-full ${bc}" style="width:${pct.toFixed(1)}%"></div>
+</div>
+<span class="text-sm font-mono ${sc} w-12 text-right font-medium">${score.toFixed(1)}</span>
 </div>`;
-          }).join('');
-        })
-        .catch(err => {
-          document.getElementById('risks').innerHTML = `<p class="text-xs text-red-400">Failed to load: ${err.message}</p>`;
-        });
-    }
-
-    // Trust score
-    fetch('/api/stats')
-      .then(r => r.json())
-      .then(data => {
-        if (data.trust_score != null) {
-          document.getElementById('sidebar-trust').textContent = Number(data.trust_score).toFixed(0);
-        }
+        }).join('');
       })
-      .catch(() => {});
-
-    loadData();
-  </script>
-
-</body>
-</html>
+      .catch(err => {
+        document.getElementById('risks').innerHTML = `<p class="text-xs text-red-400">Failed to load: ${err.message}</p>`;
+      });
+  }
+
+  loadData();
+</script>
+{% endblock %}