claude-memory-layer 1.0.27 → 1.0.28

package/dist/ui/app.js

@@ -1,2101 +0,0 @@
-/**
- * Code Memory Dashboard Logic
- * Handles state management, API calls, UI updates, modals, and navigation.
- */
-
-const API_BASE = '/api';
-
-// State
-const state = {
-  stats: null,
-  sharedStats: null,
-  mostAccessed: null,
-  helpfulness: null,
-  retrievalTraces: null,
-  adherenceSummary: null,
-  adherenceWindow: '24h',
-  userPromptSearchQuery: '',
-  userPromptItems: [],
-  userPromptPage: 1,
-  userPromptPageSize: 30,
-  currentLevel: 'L0',
-  currentSort: 'recent',
-  currentView: 'overview',
-  currentProject: '', // empty = global
-  projects: [],
-  events: [],
-  isLoading: false,
-  chartInstance: null,
-  kpiChartInstance: null,
-  kpiWindow: '7d',
-  kpi: null,
-  chatMessages: [],
-  isChatOpen: false,
-  isChatStreaming: false,
-  chatAbortController: null,
-  chatConversationId: null,
-  chatCurrentTab: 'chat'
-};
-
-// Utils
-const formatNumber = (num) => new Intl.NumberFormat().format(num || 0);
-
-// Colors for Chart
-const CHART_COLORS = {
-  L0: '#7B61FF',
-  L1: '#00F0FF',
-  L2: '#00E396',
-  L3: '#FEB019',
-  L4: '#FF4560'
-};
-
-// --- API URL Helper ---
-
-function apiUrl(path, params = {}) {
-  const url = new URL(path, window.location.origin);
-  if (state.currentProject) {
-    url.searchParams.set('project', state.currentProject);
-  }
-  for (const [key, value] of Object.entries(params)) {
-    if (value !== undefined && value !== null) {
-      url.searchParams.set(key, String(value));
-    }
-  }
-  return url.toString();
-}
-
-// --- Initialization ---
-
-document.addEventListener('DOMContentLoaded', () => {
-  initDashboard();
-});
-
-async function initDashboard() {
-  await loadProjects();
-  await refreshData();
-  setupEventListeners();
-  await initActivityChart();
-}
-
-async function loadProjects() {
-  try {
-    const res = await fetch(`${API_BASE}/projects`);
-    const data = await res.json();
-    state.projects = data.projects || [];
-
-    const select = document.getElementById('project-select');
-    if (!select) return;
-
-    // Clear existing options except first
-    while (select.options.length > 1) select.remove(1);
-
-    // Add project options
-    state.projects.forEach(p => {
-      const option = document.createElement('option');
-      option.value = p.hash;
-      option.textContent = `${p.projectName} (${p.dbSizeHuman})`;
-      select.appendChild(option);
-    });
-  } catch (error) {
-    console.error('Failed to load projects:', error);
-  }
-}
-
-function setupEventListeners() {
-  // Pipeline steps
-  document.querySelectorAll('.p-step').forEach(step => {
-    step.addEventListener('click', (e) => {
-      const level = e.currentTarget.dataset.level;
-      if (level) selectLevel(level);
-    });
-  });
-
-  // Sort buttons
-  document.querySelectorAll('.sort-btn[data-sort]').forEach(btn => {
-    btn.addEventListener('click', (e) => {
-      const sort = e.currentTarget.dataset.sort;
-      if (sort) selectSort(sort);
-    });
-  });
-
-  // Adherence window controls
-  document.querySelectorAll('#adherence-window-controls .sort-btn').forEach(btn => {
-    btn.addEventListener('click', async (e) => {
-      const window = e.currentTarget.dataset.adhWindow;
-      if (!window || state.adherenceWindow === window) return;
-      state.adherenceWindow = window;
-      document.querySelectorAll('#adherence-window-controls .sort-btn').forEach(b => {
-        b.classList.toggle('active', b.dataset.adhWindow === window);
-      });
-      state.adherenceSummary = await fetchAdherenceSummary().catch(() => null);
-      updateAdherenceSummaryUI();
-    });
-  });
-
-  // KPI window controls
-  document.querySelectorAll('.sort-btn[data-kpi-window]').forEach(btn => {
-    btn.addEventListener('click', async (e) => {
-      const window = e.currentTarget.dataset.kpiWindow;
-      if (!window || state.kpiWindow === window) return;
-      state.kpiWindow = window;
-      document.querySelectorAll('.sort-btn[data-kpi-window]').forEach(b => {
-        b.classList.toggle('active', b.dataset.kpiWindow === window);
-      });
-      await loadKpiData();
-      updateKpiCardsUI();
-      renderKpiTrendChart();
-    });
-  });
-
-  // Search
-  const searchInput = document.getElementById('search-input');
-  if (searchInput) {
-    searchInput.addEventListener('input', debounce((e) => handleSearch(e.target.value), 300));
-  }
-
-  // User prompt search
-  const userPromptSearch = document.getElementById('user-prompt-search');
-  if (userPromptSearch) {
-    userPromptSearch.addEventListener('input', debounce(async (e) => {
-      state.userPromptSearchQuery = e.target.value || '';
-      state.userPromptPage = 1;
-      await loadUserPromptsView();
-    }, 250));
-  }
-  const userPromptRefresh = document.getElementById('user-prompt-refresh');
-  if (userPromptRefresh) {
-    userPromptRefresh.addEventListener('click', async () => {
-      await loadUserPromptsView();
-    });
-  }
-  const userPromptPrev = document.getElementById('user-prompt-prev');
-  if (userPromptPrev) {
-    userPromptPrev.addEventListener('click', async () => {
-      if (state.userPromptPage <= 1) return;
-      state.userPromptPage -= 1;
-      await renderUserPromptList();
-    });
-  }
-  const userPromptNext = document.getElementById('user-prompt-next');
-  if (userPromptNext) {
-    userPromptNext.addEventListener('click', async () => {
-      const totalPages = Math.max(1, Math.ceil((state.userPromptItems?.length || 0) / state.userPromptPageSize));
-      if (state.userPromptPage >= totalPages) return;
-      state.userPromptPage += 1;
-      await renderUserPromptList();
-    });
-  }
-
-  // Project selector
-  const projectSelect = document.getElementById('project-select');
-  if (projectSelect) {
-    projectSelect.addEventListener('change', async (e) => {
-      state.currentProject = e.target.value;
-      await refreshData();
-      if (state.chartInstance) {
-        state.chartInstance.destroy();
-        state.chartInstance = null;
-      }
-      if (state.kpiChartInstance) {
-        state.kpiChartInstance.destroy();
-        state.kpiChartInstance = null;
-      }
-      await initActivityChart();
-      // Reload current view if not overview
-      if (state.currentView !== 'overview') {
-        switchView(state.currentView);
-      }
-      updateChatProjectScope();
-    });
-  }
-
-  // Refresh
-  const refreshBtn = document.getElementById('refresh-btn');
-  if (refreshBtn) {
-    refreshBtn.addEventListener('click', refreshData);
-  }
-
-  // Stat cards
-  document.querySelectorAll('.stat-card[data-stat]').forEach(card => {
-    card.addEventListener('click', () => {
-      handleStatClick(card.dataset.stat);
-    });
-  });
-
-  // Sidebar navigation
-  document.querySelectorAll('.nav-item[data-nav]').forEach(item => {
-    item.addEventListener('click', () => {
-      switchView(item.dataset.nav);
-    });
-  });
-
-  // Modal close buttons
-  document.querySelectorAll('.modal-close-btn').forEach(btn => {
-    btn.addEventListener('click', () => {
-      const modalId = btn.dataset.modal;
-      closeModal(modalId);
-    });
-  });
-
-  // Modal overlay click to close
-  document.querySelectorAll('.modal-overlay').forEach(overlay => {
-    overlay.addEventListener('click', (e) => {
-      if (e.target === overlay) {
-        closeModal(overlay.id);
-      }
-    });
-  });
-
-  // ESC key to close modals
-  document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') {
-      if (state.isChatOpen) {
-        closeChatPanel();
-      } else {
-        closeAllModals();
-      }
-    }
-  });
-
-  // Chat panel
-  const chatToggle = document.getElementById('chat-toggle-btn');
-  if (chatToggle) {
-    chatToggle.addEventListener('click', toggleChatPanel);
-  }
-  const chatClose = document.getElementById('chat-close-btn');
-  if (chatClose) {
-    chatClose.addEventListener('click', () => closeChatPanel());
-  }
-
-  const chatInput = document.getElementById('chat-input');
-  const chatSendBtn = document.getElementById('chat-send-btn');
-  if (chatInput) {
-    chatInput.addEventListener('input', () => {
-      chatInput.style.height = 'auto';
-      chatInput.style.height = Math.min(chatInput.scrollHeight, 120) + 'px';
-      chatSendBtn.disabled = !chatInput.value.trim() || state.isChatStreaming;
-    });
-    chatInput.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        if (chatInput.value.trim() && !state.isChatStreaming) {
-          sendChatMessage();
-        }
-      }
-    });
-  }
-  if (chatSendBtn) {
-    chatSendBtn.addEventListener('click', () => {
-      if (!state.isChatStreaming) sendChatMessage();
-    });
-  }
-
-  // Chat tabs
-  document.querySelectorAll('.chat-header-tab').forEach(tab => {
-    tab.addEventListener('click', () => {
-      switchChatTab(tab.dataset.chatTab);
-    });
-  });
-
-  // New conversation button
-  const chatNewBtn = document.getElementById('chat-new-btn');
-  if (chatNewBtn) {
-    chatNewBtn.addEventListener('click', startNewConversation);
-  }
-}
-
-// --- Data Fetching ---
-
-async function loadKpiData() {
-  state.kpi = await fetch(apiUrl(`${API_BASE}/stats/kpi`, { window: state.kpiWindow }))
-    .then(r => r.json())
-    .catch(() => null);
-}
-
-async function refreshData() {
-  const btn = document.getElementById('refresh-btn');
-  if(btn) btn.classList.add('loading');
-
-  try {
-    const [stats, shared, mostAccessed, helpfulness, retrievalTraces, adherenceSummary] = await Promise.all([
-      fetch(apiUrl(`${API_BASE}/stats`)).then(r => r.json()).catch(() => null),
-      fetch(apiUrl(`${API_BASE}/stats/shared`)).then(r => r.json()).catch(() => null),
-      fetch(apiUrl(`${API_BASE}/stats/most-accessed`, { limit: 10 })).then(r => r.json()).catch(() => null),
-      fetch(apiUrl(`${API_BASE}/stats/helpfulness`, { limit: 5 })).then(r => r.json()).catch(() => null),
-      fetch(apiUrl(`${API_BASE}/stats/retrieval-traces`, { limit: 20 })).then(r => r.json()).catch(() => null),
-      fetchAdherenceSummary().catch(() => null)
-    ]);
-
-    state.stats = stats;
-    state.sharedStats = shared;
-    state.mostAccessed = mostAccessed;
-    state.helpfulness = helpfulness;
-    state.retrievalTraces = retrievalTraces;
-    state.adherenceSummary = adherenceSummary;
-
-    await loadKpiData();
-
-    updateStatsUI();
-    updateSharedUI();
-    updateMemoryUsageUI();
-    updateKpiCardsUI();
-    renderKpiTrendChart();
-    await loadLevelEvents(state.currentLevel);
-
-    checkEndlessStatus();
-
-  } catch (error) {
-    console.error('Failed to refresh data:', error);
-  } finally {
-    if(btn) btn.classList.remove('loading');
-  }
-}
-
-async function loadLevelEvents(level, sort) {
-  if (sort) state.currentSort = sort;
-  state.isLoading = true;
-  updateEventsListUI();
-
-  try {
-    const response = await fetch(apiUrl(`${API_BASE}/events`, { level, limit: 20, sort: state.currentSort }));
-    if (response.ok) {
-      const data = await response.json();
-      state.events = data.events || [];
-    } else {
-      state.events = [];
-    }
-  } catch (error) {
-    console.error(`Failed to load events for ${level}:`, error);
-    state.events = [];
-  } finally {
-    state.isLoading = false;
-    updateEventsListUI();
-  }
-}
-
-// --- UI Updates ---
-
-function updateStatsUI() {
-  if (!state.stats) return;
-
-  const eventCount = state.stats.storage?.eventCount || 0;
-  const sessionCount = state.stats.sessions?.total || 0;
-  const vectorCount = state.stats.storage?.vectorCount || 0;
-
-  document.getElementById('stat-events').textContent = formatNumber(eventCount);
-  document.getElementById('stat-sessions').textContent = formatNumber(sessionCount);
-
-  const sharedCount = state.sharedStats ?
-    ((state.sharedStats.troubleshooting || 0) + (state.sharedStats.bestPractices || 0) + (state.sharedStats.commonErrors || 0)) : 0;
-
-  document.getElementById('stat-vectors').textContent = formatNumber(vectorCount);
-
-  // Retrieval quality stat card
-  const rtStats = state.retrievalTraces?.stats;
-  const totalQueries = rtStats?.totalQueries || 0;
-  const selRate = rtStats ? ((rtStats.selectionRate || 0) * 100).toFixed(0) : null;
-  document.getElementById('stat-retrieval-queries').textContent = formatNumber(totalQueries);
-  const rateEl = document.getElementById('stat-retrieval-rate');
-  if (rateEl) {
-    rateEl.textContent = totalQueries > 0 && selRate !== null
-      ? `${selRate}% selection rate`
-      : totalQueries > 0 ? '' : 'no queries yet';
-  }
-
-  const levelCounts = {};
-  if (state.stats.levelStats) {
-    state.stats.levelStats.forEach(item => { levelCounts[item.level] = item.count; });
-  }
-  updatePipelineCounts(levelCounts);
-}
-
-function updatePipelineCounts(counts) {
-  document.querySelectorAll('.p-step').forEach(step => {
-    const level = step.dataset.level;
-    const countEl = step.querySelector('.p-step-count');
-    countEl.textContent = formatNumber(counts[level] || 0);
-  });
-}
-
-function updateSharedUI() {
-  if (!state.sharedStats) return;
-
-  document.getElementById('shared-troubleshooting').textContent = formatNumber(state.sharedStats.troubleshooting || 0);
-  document.getElementById('shared-best-practices').textContent = formatNumber(state.sharedStats.bestPractices || 0);
-  document.getElementById('shared-errors').textContent = formatNumber(state.sharedStats.commonErrors || 0);
-}
-
-function percentText(v) {
-  return `${((v || 0) * 100).toFixed(1)}%`;
-}
-
-function renderDelta(id, value, lowerIsBetter = false, asPercent = true) {
-  const el = document.getElementById(id);
-  if (!el) return;
-  const v = Number(value || 0);
-  const sign = v > 0 ? '+' : '';
-  const text = asPercent ? `${sign}${(v * 100).toFixed(1)}%` : `${sign}${v.toFixed(2)}`;
-
-  let positive = v > 0;
-  if (lowerIsBetter) positive = v < 0;
-  const cls = v === 0 ? 'neutral' : (positive ? 'good' : 'bad');
-  const arrow = v === 0 ? '→' : (positive ? '▲' : '▼');
-
-  el.className = `kpi-delta ${cls}`;
-  el.textContent = `${arrow} ${text} vs prev`;
-}
-
-function updateKpiCardsUI() {
-  const m = state.kpi?.metrics;
-  const d = state.kpi?.deltas;
-  if (!m) return;
-  const set = (id, value) => {
-    const el = document.getElementById(id);
-    if (el) el.textContent = value;
-  };
-  set('kpi-useful-recall', percentText(m.usefulRecallRate));
-  set('kpi-completion-turns', Number(m.avgCompletionTurns || 0).toFixed(2));
-  set('kpi-rework-rate', percentText(m.reworkRate));
-  set('kpi-failure-rate', percentText(m.postChangeFailureRate));
-
-  if (d) {
-    renderDelta('kpi-useful-recall-delta', d.usefulRecallRate, false, true);
-    renderDelta('kpi-completion-turns-delta', d.avgCompletionTurns, true, false);
-    renderDelta('kpi-rework-rate-delta', d.reworkRate, true, true);
-    renderDelta('kpi-failure-rate-delta', d.postChangeFailureRate, true, true);
-  }
-
-  const alertsEl = document.getElementById('kpi-alerts');
-  if (alertsEl) {
-    const alerts = state.kpi?.alerts || [];
-    if (alerts.length === 0) {
-      alertsEl.innerHTML = '<span style="color:var(--success);">No KPI alerts in current window.</span>';
-    } else {
-      alertsEl.innerHTML = alerts.slice(0, 3).map(a => `⚠️ ${escapeHtml(a.message)} (${a.metric})`).join(' · ');
-    }
-  }
-}
-
-function renderKpiTrendChart() {
-  const chartEl = document.querySelector('#kpi-trend-chart');
-  if (!chartEl) return;
-
-  const daily = state.kpi?.trend?.daily || [];
-  const categories = daily.map(d => d.date);
-  const useful = daily.map(d => Number(d.usefulRecallRate || 0) * 100);
-  const rework = daily.map(d => Number(d.reworkRate || 0) * 100);
-  const fail = daily.map(d => Number(d.postChangeFailureRate || 0) * 100);
-
-  if (state.kpiChartInstance) {
-    state.kpiChartInstance.destroy();
-    state.kpiChartInstance = null;
-  }
-
-  const options = {
-    series: [
-      { name: 'Useful Recall %', data: useful },
-      { name: 'Rework %', data: rework },
-      { name: 'Failure %', data: fail }
-    ],
-    chart: {
-      type: 'line',
-      height: 240,
-      background: 'transparent',
-      toolbar: { show: false },
-      fontFamily: 'Outfit, sans-serif'
-    },
-    stroke: { curve: 'smooth', width: 2 },
-    dataLabels: { enabled: false },
-    xaxis: { categories, labels: { style: { colors: '#8B9BB4' } } },
-    yaxis: { labels: { formatter: (v) => `${v.toFixed(0)}%`, style: { colors: '#8B9BB4' } } },
-    theme: { mode: 'dark' },
-    grid: { borderColor: 'rgba(255,255,255,0.05)', strokeDashArray: 4 },
-    colors: ['#34D399', '#FEB019', '#FF4560']
-  };
-
-  state.kpiChartInstance = new ApexCharts(chartEl, options);
-  state.kpiChartInstance.render();
-}
-
-function selectLevel(level) {
-  state.currentLevel = level;
-
-  document.querySelectorAll('.p-step').forEach(step => {
-    step.classList.toggle('active', step.dataset.level === level);
-  });
-
-  loadLevelEvents(level);
-}
-
-function selectSort(sort) {
-  state.currentSort = sort;
-
-  document.querySelectorAll('.sort-btn').forEach(btn => {
-    btn.classList.toggle('active', btn.dataset.sort === sort);
-  });
-
-  loadLevelEvents(state.currentLevel, sort);
-}
-
-function getAdherenceInfo(event) {
-  const adherence = event?.metadata?.adherence || event?.meta?.adherence || null;
-  if (!adherence || typeof adherence !== 'object') return null;
-  const reason = adherence.reason || 'unknown';
-  const checked = Boolean(adherence.checked);
-  const turn = adherence.turn;
-  return { reason, checked, turn };
-}
-
-function renderAdherenceBadge(event) {
-  const info = getAdherenceInfo(event);
-  if (!info) return '';
-  const modeClass = info.checked ? 'adherence-checked' : 'adherence-skipped';
-  const turnText = Number.isFinite(info.turn) ? ` · T${info.turn}` : '';
-  return `<span class="adherence-badge ${modeClass}" title="adherence ${info.checked ? 'checked' : 'skipped'}${turnText}">adh:${escapeHtml(info.reason)}</span>`;
-}
-
-function updateEventsListUI() {
-  const container = document.getElementById('event-list-container');
-  container.innerHTML = '';
-
-  if (state.isLoading) {
-    container.innerHTML = '<div style="padding: 20px; text-align: center; color: var(--text-muted);">Loading events...</div>';
-    return;
-  }
-
-  if (state.events.length === 0) {
-    container.innerHTML = '<div style="padding: 20px; text-align: center; color: var(--text-muted);">No events found for this level.</div>';
-    return;
-  }
-
-  state.events.forEach(event => {
-    const el = document.createElement('div');
-    el.className = 'event-item';
-    el.style.cursor = 'pointer';
-    el.addEventListener('click', () => openDetailModal(event.id));
-
-    const time = new Date(event.timestamp).toLocaleString();
-    const eventType = event.eventType || event.type || 'unknown';
-    const typeClass = `type-${eventType.toLowerCase().replace('_', '-')}`;
-    const preview = event.preview || event.content || '';
-    const accessBadge = event.accessCount > 0
-      ? `<span class="access-badge"><i class="ri-eye-line"></i> ${event.accessCount}</span>`
-      : '';
-    const adherenceBadge = renderAdherenceBadge(event);
-    const lastUsed = (state.currentSort === 'accessed' || state.currentSort === 'most-accessed') && event.lastAccessedAt
-      ? `<span class="event-time" style="color:var(--accent-secondary);">used ${new Date(event.lastAccessedAt).toLocaleString()}</span>`
-      : '';
-
-    el.innerHTML = `
-      <div class="event-header">
-        <div style="display:flex; gap:8px; align-items:center;">
-          <span class="event-type-badge ${typeClass}">${eventType}</span>
-          ${adherenceBadge}
-        </div>
-        <div style="display:flex; gap:8px; align-items:center;">
-          ${accessBadge}
-          ${lastUsed}
-          <span class="event-time">${time}</span>
-        </div>
-      </div>
-      <div class="event-content">${escapeHtml(preview)}</div>
-    `;
-
-    container.appendChild(el);
-  });
-}
-
-// --- Memory Usage ---
-
-function updateTopAccessedEventsUI() {
-  const container = document.getElementById('top-accessed-events-list');
-  if (!container) return;
-
-  const events = (state.mostAccessed?.events || state.mostAccessed?.memories || []);
-  const filtered = events.filter(e => (e.accessCount || 0) > 0).slice(0, 5);
-
-  if (filtered.length === 0) {
-    container.innerHTML = '<div style="padding:12px; text-align:center; color:var(--text-muted); font-size:13px;">No accessed memories yet</div>';
-    return;
-  }
-
-  container.innerHTML = filtered.map((m, i) => {
-    const type = m.eventType || m.type || 'memory';
-    const preview = (m.summary || m.preview || m.content || '').replace(/<[^>]*>/g, '').slice(0, 80);
-    const lastAccessed = m.lastAccessedAt ? new Date(m.lastAccessedAt).toLocaleDateString() : (m.lastAccessed ? new Date(m.lastAccessed).toLocaleDateString() : '-');
-    const id = m.id || m.memoryId || '';
-    return `
-      <div class="shared-item" style="cursor:pointer;" ${id ? `onclick="openDetailModal('${id}')"` : ''}>
-        <div class="shared-info" style="flex-direction:column; align-items:flex-start; gap:2px;">
-          <div style="display:flex; gap:6px; align-items:center;">
-            <span class="event-type-badge type-${type.replace('_','-')}">${type}</span>
-            <span style="font-size:10px; color:var(--text-muted);">last: ${lastAccessed}</span>
-          </div>
-          <span style="font-size:12px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px;" title="${escapeHtml(preview)}">${escapeHtml(preview) || '(no preview)'}</span>
-        </div>
-        <div style="display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:40px;">
-          <span style="font-size:15px; font-weight:700; color:var(--accent-primary);">${m.accessCount}</span>
-          <span style="font-size:10px; color:var(--text-muted);">hits</span>
-        </div>
-      </div>
-    `;
-  }).join('');
-}
-
-function updateMemoryUsageUI() {
-  updateGraduationBars();
-  updateHelpfulnessUI();
-  updateMostHelpfulList();
-  updateTopAccessedEventsUI();
-  updateAdherenceSummaryUI();
-  updateRetrievalTraceUI();
-}
-
-function adherenceWindowToMs(window) {
-  if (window === '24h') return 24 * 60 * 60 * 1000;
-  if (window === '7d') return 7 * 24 * 60 * 60 * 1000;
-  if (window === '30d') return 30 * 24 * 60 * 60 * 1000;
-  return 24 * 60 * 60 * 1000;
-}
-
-async function fetchAdherenceSummary() {
-  const res = await fetch(apiUrl(`${API_BASE}/events`, { level: 'L0', limit: 500, sort: 'recent' }));
-  if (!res.ok) return null;
-  const data = await res.json();
-  const events = data.events || [];
-
-  const counts = {};
-  let checked = 0;
-  let skipped = 0;
-  let total = 0;
-
-  const now = Date.now();
-  const windowMs = adherenceWindowToMs(state.adherenceWindow);
-
-  for (const e of events) {
-    const ts = e?.timestamp ? new Date(e.timestamp).getTime() : 0;
-    if (!ts || now - ts > windowMs) continue;
-
-    const adherence = e?.metadata?.adherence || e?.meta?.adherence;
-    if (!adherence) continue;
-    total++;
-    const reason = adherence.reason || 'unknown';
-    counts[reason] = (counts[reason] || 0) + 1;
-    if (adherence.checked) checked++; else skipped++;
-  }
-
-  return { total, checked, skipped, counts, window: state.adherenceWindow };
-}
-
-function updateAdherenceSummaryUI() {
-  const el = document.getElementById('adherence-summary');
-  if (!el) return;
-
-  const s = state.adherenceSummary;
-  if (!s || !s.total) {
-    el.innerHTML = '<span style="color:var(--text-muted);">No adherence metadata yet.</span>';
-    return;
-  }
-
-  const top = Object.entries(s.counts || {})
-    .sort((a, b) => b[1] - a[1])
-    .slice(0, 5)
-    .map(([reason, count]) => `<span class="adherence-badge adherence-checked" style="margin-right:6px;">${escapeHtml(reason)}: ${count}</span>`)
-    .join('');
-
-  el.innerHTML = `
-    <div style="display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px;">
-      <span><strong>${s.total}</strong> tagged prompts (${escapeHtml(s.window || state.adherenceWindow)})</span>
-      <span style="color:var(--success);"><strong>${s.checked}</strong> checked</span>
-      <span style="color:var(--text-muted);"><strong>${s.skipped}</strong> skipped</span>
-    </div>
-    <div>${top}</div>
-  `;
-}
-
-function updateGraduationBars() {
-  const container = document.getElementById('graduation-bars');
-  if (!container || !state.stats?.levelStats) return;
-
-  const levels = ['L0', 'L1', 'L2', 'L3', 'L4'];
-  const colors = [CHART_COLORS.L0, CHART_COLORS.L1, CHART_COLORS.L2, CHART_COLORS.L3, CHART_COLORS.L4];
-
-  const counts = {};
-  state.stats.levelStats.forEach(s => { counts[s.level] = s.count; });
-  const total = Object.values(counts).reduce((a, b) => a + b, 0) || 1;
-
-  container.innerHTML = levels.map((level, i) => {
-    const count = counts[level] || 0;
-    const pct = ((count / total) * 100).toFixed(1);
-    return `
-      <div class="grad-bar-row">
-        <span class="grad-bar-label" style="color:${colors[i]}">${level}</span>
-        <div class="grad-bar-track">
-          <div class="grad-bar-fill" style="width:${pct}%; background:${colors[i]};"></div>
-        </div>
-        <span class="grad-bar-value">${count} (${pct}%)</span>
-      </div>
-    `;
-  }).join('');
-}
-
-function updateHelpfulnessUI() {
-  const container = document.getElementById('helpfulness-summary');
-  if (!container) return;
-
-  const h = state.helpfulness;
-  if (!h || h.totalEvaluated === 0) {
-    container.innerHTML = '<span style="color:var(--text-muted);">No evaluations yet. Helpfulness is measured automatically at session end.</span>';
-    return;
-  }
-
-  const scoreColor = h.avgScore >= 0.7 ? 'var(--success, #00E396)' : h.avgScore >= 0.4 ? 'var(--warning, #FEB019)' : 'var(--danger, #FF4560)';
-
-  container.innerHTML = `
-    <div style="display:flex; gap:16px; align-items:center; flex-wrap:wrap;">
-      <div style="display:flex; align-items:baseline; gap:4px;">
-        <span style="font-size:20px; font-weight:700; color:${scoreColor};">${h.avgScore}</span>
-        <span style="font-size:11px; color:var(--text-muted);">avg</span>
-      </div>
-      <div style="display:flex; gap:10px; font-size:12px;">
-        <span style="color:var(--success, #00E396);">${h.helpful} helpful</span>
-        <span style="color:var(--warning, #FEB019);">${h.neutral} neutral</span>
-        <span style="color:var(--danger, #FF4560);">${h.unhelpful} unhelpful</span>
-      </div>
-      <span style="font-size:11px; color:var(--text-muted);">${h.totalEvaluated} evaluated / ${h.totalRetrievals} retrieved</span>
-    </div>
-  `;
-}
-
-function updateMostHelpfulList() {
-  const container = document.getElementById('most-helpful-list');
-  if (!container) return;
-
-  const memories = state.helpfulness?.topMemories || [];
-
-  if (memories.length === 0) {
-    container.innerHTML = '<div style="padding:12px; text-align:center; color:var(--text-muted); font-size:13px;">No helpful memories yet</div>';
-    return;
-  }
-
-  container.innerHTML = memories.slice(0, 5).map((m, i) => {
-    const scoreColor = m.helpfulnessScore >= 0.7 ? 'var(--success, #00E396)' : m.helpfulnessScore >= 0.4 ? 'var(--warning, #FEB019)' : 'var(--danger, #FF4560)';
-    return `
-      <div class="shared-item">
-        <div class="shared-info">
-          <div class="shared-icon" style="font-size:14px; font-weight:700; color:var(--accent-primary);">#${i + 1}</div>
-          <span style="font-size:13px; color:var(--text-secondary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">
-            ${escapeHtml(m.summary || '(no summary)')}
-          </span>
-        </div>
-        <div style="display:flex; flex-direction:column; align-items:flex-end; gap:2px;">
-          <span style="font-size:14px; font-weight:600; color:${scoreColor};">${m.helpfulnessScore}</span>
-          <span style="font-size:10px; color:var(--text-muted);">${m.accessCount}x accessed</span>
-        </div>
-      </div>
-    `;
-  }).join('');
-}
-
-
-function updateRetrievalTraceUI() {
-  const summaryEl = document.getElementById('retrieval-trace-summary');
-  const listEl = document.getElementById('retrieval-trace-list');
-  if (!summaryEl || !listEl) return;
-
-  const payload = state.retrievalTraces;
-  const stats = payload?.stats;
-  const traces = payload?.traces || [];
-
-  if (!stats || !Number.isFinite(stats.totalQueries) || stats.totalQueries === 0) {
-    summaryEl.innerHTML = '<span style="color:var(--text-muted);">No retrieval traces yet.</span>';
-    listEl.innerHTML = '<div style="padding:12px; text-align:center; color:var(--text-muted); font-size:13px;">No query/context trace data</div>';
-    return;
-  }
-
-  const selectionRate = ((stats.selectionRate || 0) * 100).toFixed(1);
-  summaryEl.innerHTML = `
-    <div style="display:flex; gap:14px; flex-wrap:wrap; font-size:12px;">
-      <span><strong>${formatNumber(stats.totalQueries)}</strong> queries</span>
-      <span><strong>${Number(stats.avgCandidateCount || 0).toFixed(1)}</strong> avg candidates</span>
-      <span><strong>${Number(stats.avgSelectedCount || 0).toFixed(1)}</strong> avg selected</span>
-      <span><strong>${selectionRate}%</strong> selection rate</span>
-    </div>
-  `;
-
-  listEl.innerHTML = traces.slice(0, 8).map((t) => {
-    const ts = t.createdAt ? new Date(t.createdAt).toLocaleString() : '-';
-    const confidence = t.confidence || 'n/a';
-    const selected = Number(t.selectedCount || 0);
-    const candidates = Number(t.candidateCount || 0);
-    const selectedDetails = (t.selectedDetails || []).slice(0, 2);
-    const candidateDetails = (t.candidateDetails || []).slice(0, 3);
-    const selectedIdsHtml = selectedDetails.length > 0
-      ? selectedDetails.map((d) => {
-          const breakdown = `score=${Number(d.score || 0).toFixed(3)} · s=${Number(d.semanticScore || 0).toFixed(3)} · l=${Number(d.lexicalScore || 0).toFixed(3)} · r=${Number(d.recencyScore || 0).toFixed(3)}`;
-          return `<span class="event-type-badge" style="cursor:pointer;" onclick="openDetailModal('${d.eventId}')" title="${escapeHtml(breakdown)}">${escapeHtml((d.eventId || '').slice(0, 8))}...</span>`;
-        }).join(' ')
-      : ((t.selectedEventIds || []).slice(0, 2).map((id) => `<span class="event-type-badge" style="cursor:pointer;" onclick="openDetailModal('${id}')">${escapeHtml((id || '').slice(0, 8))}...</span>`).join(' ') || '-');
-
-    const scoreBreakdownHtml = selectedDetails.length > 0
-      ? selectedDetails.map((d) => `<div style="font-size:10px; color:var(--text-muted);">${escapeHtml((d.eventId || '').slice(0, 8))}... → score ${Number(d.score || 0).toFixed(3)} (s ${Number(d.semanticScore || 0).toFixed(3)}, l ${Number(d.lexicalScore || 0).toFixed(3)}, r ${Number(d.recencyScore || 0).toFixed(3)})</div>`).join('')
-      : '';
-
-    return `
-      <div class="shared-item" style="align-items:flex-start;">
-        <div class="shared-info" style="align-items:flex-start; flex-direction:column; gap:4px;">
-          <span style="font-size:12px; color:var(--text-secondary);"><strong>Q:</strong> ${escapeHtml((t.queryText || '').slice(0, 120))}</span>
-          <span style="font-size:11px; color:var(--text-muted);">${ts} · strategy=${escapeHtml(t.strategy || 'auto')} · conf=${escapeHtml(confidence)}</span>
-          <span style="font-size:11px; color:var(--text-muted);">selected IDs: ${selectedIdsHtml}</span>
-          <span style="font-size:11px; color:var(--text-muted);">candidates: ${candidateDetails.map((d) => `<span class=\"event-type-badge\" style=\"cursor:pointer;\" onclick=\"openDetailModal('${d.eventId}')\">${escapeHtml((d.eventId || '').slice(0, 8))}...</span>`).join(' ') || '-'}</span>
-          ${scoreBreakdownHtml}
-        </div>
-        <div style="display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:68px;">
-          <span style="font-size:13px; font-weight:600; color:var(--accent-primary);">${selected}/${candidates}</span>
-          <span style="font-size:10px; color:var(--text-muted);">sel/cand</span>
-        </div>
-      </div>
-    `;
-  }).join('');
-}
-
-
-// --- Charts ---
-
-async function initActivityChart() {
-  const chartEl = document.querySelector("#activity-chart");
-  if (!chartEl) return;
-
-  let categories = [];
-  let seriesData = [];
-  try {
-    const res = await fetch(apiUrl(`${API_BASE}/stats/timeline`, { days: 14 }));
-    const data = await res.json();
-    if (data.daily && data.daily.length > 0) {
-      categories = data.daily.map(d => d.date);
-      seriesData = data.daily.map(d => d.total);
-    }
-  } catch (e) {
-    console.error('Failed to load timeline:', e);
-  }
-
-  if (seriesData.length === 0) {
-    categories = ['No data'];
-    seriesData = [0];
-  }
-
-  const options = {
-    series: [{
-      name: 'Events',
-      data: seriesData
-    }],
-    chart: {
-      type: 'area',
-      height: 300,
-      background: 'transparent',
-      toolbar: { show: false },
-      fontFamily: 'Outfit, sans-serif'
-    },
-    theme: { mode: 'dark' },
-    stroke: {
-      curve: 'smooth',
-      width: 3,
-      colors: [CHART_COLORS.L0]
-    },
-    fill: {
-      type: 'gradient',
-      gradient: {
-        shadeIntensity: 1,
-        opacityFrom: 0.7,
-        opacityTo: 0.1,
-        stops: [0, 90, 100]
-      }
-    },
-    dataLabels: { enabled: false },
-    grid: {
-      borderColor: 'rgba(255,255,255,0.05)',
-      strokeDashArray: 4,
-    },
-    xaxis: {
-      categories: categories,
-      labels: {
-        style: { colors: '#8B9BB4' },
-        rotate: -45,
-        rotateAlways: categories.length > 7
-      },
-      axisBorder: { show: false },
-      axisTicks: { show: false }
-    },
-    yaxis: {
-      labels: { style: { colors: '#8B9BB4' } }
-    },
-    colors: [CHART_COLORS.L0]
-  };
-
-  state.chartInstance = new ApexCharts(chartEl, options);
-  state.chartInstance.render();
-}
-
-// --- Endless Mode ---
-
-async function checkEndlessStatus() {
-  const statusEl = document.getElementById('status-dot');
-  const textEl = document.getElementById('status-text');
-
-  const isRunning = false;
-
-  if (statusEl && textEl) {
-    if (isRunning) {
-      statusEl.classList.add('active');
-      textEl.textContent = 'Active Background Processing';
-      textEl.style.color = 'var(--success)';
-    } else {
-      statusEl.classList.remove('active');
-      textEl.textContent = 'Idle';
-      textEl.style.color = 'var(--text-muted)';
-    }
-  }
-}
-
-// =============================================
-// Modal System
-// =============================================
-
-function openModal(modalId) {
-  const modal = document.getElementById(modalId);
-  if (modal) {
-    modal.style.display = 'flex';
-    document.body.style.overflow = 'hidden';
-  }
-}
-
-function closeModal(modalId) {
-  const modal = document.getElementById(modalId);
-  if (modal) {
-    modal.style.display = 'none';
-    document.body.style.overflow = '';
-  }
-}
-
-function closeAllModals() {
-  document.querySelectorAll('.modal-overlay').forEach(m => {
-    m.style.display = 'none';
-  });
-  document.body.style.overflow = '';
-}
-
-// --- Detail Modal ---
-
-async function openDetailModal(eventId) {
-  const body = document.getElementById('detail-modal-body');
-  body.innerHTML = '<div style="text-align:center; padding:40px; color:var(--text-muted);"><i class="ri-loader-4-line" style="font-size:24px; animation: spin 1s linear infinite;"></i><br>Loading event details...</div>';
-  openModal('detail-modal');
-
-  try {
-    const res = await fetch(apiUrl(`${API_BASE}/events/${eventId}`));
-    if (!res.ok) throw new Error('Event not found');
-    const data = await res.json();
-    const evt = data.event;
-    const ctx = data.context || [];
-
-    const eventType = evt.eventType || 'unknown';
-    const typeClass = `type-${eventType.toLowerCase().replace('_', '-')}`;
-    const time = new Date(evt.timestamp).toLocaleString();
-    const adherenceBadge = renderAdherenceBadge(evt);
-
-    let contextHtml = '';
-    if (ctx.length > 0) {
-      contextHtml = `
-        <div class="modal-section-title">Context (Surrounding Events)</div>
-        <div class="modal-context-list">
-          ${ctx.map(c => `
-            <div class="modal-context-item" onclick="openDetailModal('${c.id}')">
-              <span class="event-type-badge ${`type-${(c.eventType || '').toLowerCase().replace('_', '-')}`}" style="flex-shrink:0;">${c.eventType}</span>
-              <div style="flex:1; min-width:0;">
-                <div style="font-size:12px; color:var(--text-muted); margin-bottom:4px;">${new Date(c.timestamp).toLocaleString()}</div>
-                <div style="font-size:13px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">${escapeHtml(c.preview || '')}</div>
-              </div>
-            </div>
-          `).join('')}
-        </div>
-      `;
-    }
-
-    body.innerHTML = `
-      <div class="modal-meta">
-        <div class="modal-meta-item">
-          <i class="ri-price-tag-3-line"></i>
-          <span class="event-type-badge ${typeClass}">${eventType}</span>
-        </div>
-        ${adherenceBadge ? `<div class="modal-meta-item">${adherenceBadge}</div>` : ''}
-        <div class="modal-meta-item">
-          <i class="ri-time-line"></i>
-          ${time}
-        </div>
-        <div class="modal-meta-item">
-          <i class="ri-chat-1-line"></i>
-          Session: ${evt.sessionId ? evt.sessionId.slice(0, 12) + '...' : 'N/A'}
-        </div>
-      </div>
-      <div class="modal-section-title">Content</div>
-      <div class="modal-content-block">${escapeHtml(evt.content || '(empty)')}</div>
-      ${contextHtml}
-    `;
-  } catch (error) {
-    body.innerHTML = `<div style="text-align:center; padding:40px; color:var(--error);">Failed to load event: ${escapeHtml(error.message)}</div>`;
-  }
-}
-
-// --- Stat Card Click Handlers ---
-
-function handleStatClick(statType) {
-  switch (statType) {
-    case 'events': showEventsListModal(); break;
-    case 'sessions': showSessionsModal(); break;
-    case 'shared': showSharedModal(); break;
-    case 'vectors': showVectorsModal(); break;
-  }
-}
-
-async function showEventsListModal() {
-  document.getElementById('list-modal-title').textContent = 'Total Events';
-  const body = document.getElementById('list-modal-body');
-  body.innerHTML = '<div style="text-align:center; padding:40px; color:var(--text-muted);">Loading events...</div>';
-  openModal('list-modal');
-
-  try {
-    const res = await fetch(apiUrl(`${API_BASE}/events`, { limit: 50 }));
-    const data = await res.json();
-    const events = data.events || [];
-
-    if (events.length === 0) {
-      body.innerHTML = '<div class="modal-list-empty">No events found</div>';
-      return;
-    }
-
-    body.innerHTML = events.map(e => {
-      const typeClass = `type-${(e.eventType || '').toLowerCase().replace('_', '-')}`;
-      const adherenceBadge = renderAdherenceBadge(e);
-      return `
-        <div class="modal-list-item" onclick="openDetailModal('${e.id}')">
-          <div class="modal-list-info">
-            <div class="title">
-              <span class="event-type-badge ${typeClass}" style="margin-right:8px;">${e.eventType}</span>
-              ${adherenceBadge}
-              ${escapeHtml((e.preview || '').slice(0, 80))}
-            </div>
-            <div class="subtitle">${new Date(e.timestamp).toLocaleString()} | Session: ${(e.sessionId || '').slice(0, 12)}...</div>
-          </div>
-          ${e.accessCount > 0 ? `<div class="modal-list-badge"><i class="ri-eye-line"></i> ${e.accessCount}</div>` : ''}
-        </div>
-      `;
-    }).join('');
-  } catch (error) {
-    body.innerHTML = `<div class="modal-list-empty">Failed to load events</div>`;
-  }
-}
-
-async function showSessionsModal() {
-  document.getElementById('list-modal-title').textContent = 'Active Sessions';
-  const body = document.getElementById('list-modal-body');
-  body.innerHTML = '<div style="text-align:center; padding:40px; color:var(--text-muted);">Loading sessions...</div>';
-  openModal('list-modal');
-
-  try {
-    const res = await fetch(apiUrl(`${API_BASE}/sessions`, { pageSize: 50 }));
-    const data = await res.json();
-    const sessions = data.sessions || [];
-
-    if (sessions.length === 0) {
-      body.innerHTML = '<div class="modal-list-empty">No sessions found</div>';
-      return;
-    }
-
-    body.innerHTML = sessions.map(s => {
-      const started = new Date(s.startedAt).toLocaleString();
-      const lastEvent = new Date(s.lastEventAt).toLocaleString();
-      return `
-        <div class="modal-list-item" onclick="showSessionDetailInModal('${s.id}')">
-          <div class="modal-list-info">
-            <div class="title"><i class="ri-chat-1-line" style="color:var(--accent-primary); margin-right:6px;"></i>${s.id.slice(0, 20)}...</div>
-            <div class="subtitle">Started: ${started} | Last: ${lastEvent}</div>
-          </div>
-          <div class="modal-list-badge">${s.eventCount} events</div>
-        </div>
-      `;
-    }).join('');
-  } catch (error) {
-    body.innerHTML = `<div class="modal-list-empty">Failed to load sessions</div>`;
-  }
-}
-
-async function showSessionDetailInModal(sessionId) {
-  document.getElementById('list-modal-title').textContent = 'Session Detail';
-  const body = document.getElementById('list-modal-body');
-  body.innerHTML = '<div style="text-align:center; padding:40px; color:var(--text-muted);">Loading session...</div>';
-
-  try {
-    const res = await fetch(apiUrl(`${API_BASE}/sessions/${sessionId}`));
-    const data = await res.json();
-    const session = data.session;
-    const events = data.events || [];
-    const stats = data.stats || {};
-
-    body.innerHTML = `
-      <div class="modal-meta">
-        <div class="modal-meta-item"><i class="ri-fingerprint-line"></i>${sessionId.slice(0, 20)}...</div>
-        <div class="modal-meta-item"><i class="ri-time-line"></i>${new Date(session.startedAt).toLocaleString()}</div>
-        <div class="modal-meta-item"><i class="ri-file-list-3-line"></i>${session.eventCount} events</div>
-      </div>
-      <div style="display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap;">
-        <div style="padding:10px 16px; background:rgba(59,130,246,0.1); border-radius:8px; font-size:13px;">
-          <span style="color:#60A5FA; font-weight:600;">${stats.user_prompt || 0}</span> <span style="color:var(--text-muted);">prompts</span>
-        </div>
-        <div style="padding:10px 16px; background:rgba(16,185,129,0.1); border-radius:8px; font-size:13px;">
-          <span style="color:#34D399; font-weight:600;">${stats.agent_response || 0}</span> <span style="color:var(--text-muted);">responses</span>
-        </div>
-        <div style="padding:10px 16px; background:rgba(245,158,11,0.1); border-radius:8px; font-size:13px;">
-          <span style="color:#FBBF24; font-weight:600;">${stats.tool_observation || 0}</span> <span style="color:var(--text-muted);">tools</span>
-        </div>
-      </div>
-      <div class="modal-section-title">Events</div>
-      ${events.map(e => {
-        const typeClass = `type-${(e.eventType || '').toLowerCase().replace('_', '-')}`;
-        const adherenceBadge = renderAdherenceBadge(e);
-        return `
-          <div class="modal-list-item" onclick="closeAllModals(); openDetailModal('${e.id}')">
-            <div class="modal-list-info">
-              <div class="title">
-                <span class="event-type-badge ${typeClass}" style="margin-right:8px;">${e.eventType}</span>
-                ${adherenceBadge}
-                ${escapeHtml((e.preview || '').slice(0, 80))}
-              </div>
-              <div class="subtitle">${new Date(e.timestamp).toLocaleString()}</div>
-            </div>
-          </div>
-        `;
-      }).join('')}
-    `;
-  } catch (error) {
-    body.innerHTML = `<div class="modal-list-empty">Failed to load session</div>`;
-  }
-}
-
-function showSharedModal() {
-  document.getElementById('list-modal-title').textContent = 'Shared Items';
-  const body = document.getElementById('list-modal-body');
-  const s = state.sharedStats || {};
-
-  const items = [
-    { icon: '🔧', label: 'Troubleshooting', count: s.troubleshooting || 0, color: '#60A5FA' },
-    { icon: '✨', label: 'Best Practices', count: s.bestPractices || 0, color: '#34D399' },
-    { icon: '⚠️', label: 'Common Errors', count: s.commonErrors || 0, color: '#FBBF24' }
-  ];
-
-  const total = items.reduce((a, b) => a + b.count, 0);
-  const lastUpdated = s.lastUpdated ? new Date(s.lastUpdated).toLocaleString() : 'N/A';
-
-  body.innerHTML = `
-    <div style="text-align:center; margin-bottom:24px;">
-      <div style="font-size:48px; font-weight:700; background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent;">${formatNumber(total)}</div>
-      <div style="font-size:13px; color:var(--text-muted); margin-top:4px;">Total shared items</div>
-    </div>
-    ${items.map(item => `
-      <div class="modal-list-item" style="cursor:default;">
-        <div class="modal-list-info">
-          <div class="title">${item.icon} ${item.label}</div>
-          <div class="subtitle">Cross-project knowledge items</div>
-        </div>
-        <div class="modal-list-badge" style="background:${item.color}22; color:${item.color};">${formatNumber(item.count)}</div>
-      </div>
-    `).join('')}
-    <div style="text-align:center; margin-top:20px; font-size:12px; color:var(--text-muted);">
-      Total usage: ${formatNumber(s.totalUsageCount || 0)} | Last updated: ${lastUpdated}
-    </div>
-  `;
-
-  openModal('list-modal');
-}
-
-function showVectorsModal() {
-  document.getElementById('list-modal-title').textContent = 'Vector Nodes';
-  const body = document.getElementById('list-modal-body');
-  const stats = state.stats || {};
-  const vectorCount = stats.storage?.vectorCount || 0;
-  const memory = stats.memory || {};
-
-  body.innerHTML = `
-    <div style="text-align:center; margin-bottom:24px;">
-      <div style="font-size:48px; font-weight:700; background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent;">${formatNumber(vectorCount)}</div>
-      <div style="font-size:13px; color:var(--text-muted); margin-top:4px;">Total vector nodes</div>
-    </div>
-    <div class="modal-list-item" style="cursor:default;">
-      <div class="modal-list-info">
-        <div class="title"><i class="ri-node-tree" style="color:var(--accent-primary); margin-right:6px;"></i>Embedded Vectors</div>
-        <div class="subtitle">Semantic search index entries</div>
-      </div>
-      <div class="modal-list-badge">${formatNumber(vectorCount)}</div>
-    </div>
-    <div class="modal-list-item" style="cursor:default;">
-      <div class="modal-list-info">
-        <div class="title"><i class="ri-cpu-line" style="color:var(--accent-secondary); margin-right:6px;"></i>Heap Used</div>
-        <div class="subtitle">Current memory usage</div>
-      </div>
-      <div class="modal-list-badge" style="background:rgba(0,240,255,0.1); color:var(--accent-secondary);">${memory.heapUsed || 0} MB</div>
-    </div>
-    <div class="modal-list-item" style="cursor:default;">
-      <div class="modal-list-info">
-        <div class="title"><i class="ri-hard-drive-2-line" style="color:var(--warning); margin-right:6px;"></i>Heap Total</div>
-        <div class="subtitle">Allocated memory</div>
-      </div>
-      <div class="modal-list-badge" style="background:rgba(254,176,25,0.1); color:var(--warning);">${memory.heapTotal || 0} MB</div>
-    </div>
-  `;
-
-  openModal('list-modal');
-}
-
-// =============================================
-// Sidebar Navigation
-// =============================================
-
-function switchView(viewName) {
-  if (state.currentView === viewName) return;
-  state.currentView = viewName;
-
-  // Update nav active state
-  document.querySelectorAll('.nav-item[data-nav]').forEach(item => {
-    item.classList.toggle('active', item.dataset.nav === viewName);
-  });
-
-  // Switch page views
-  document.querySelectorAll('.page-view').forEach(view => {
-    view.classList.remove('active');
-  });
-  const targetView = document.getElementById(`view-${viewName}`);
-  if (targetView) {
-    targetView.classList.add('active');
-  }
-
-  // Load view content
-  switch (viewName) {
-    case 'knowledge-graph': loadKnowledgeGraphView(); break;
-    case 'memory-banks': loadMemoryBanksView(); break;
-    case 'user-prompts': loadUserPromptsView(); break;
-    case 'configuration': loadConfigurationView(); break;
-  }
-}
-
-// --- Knowledge Graph View ---
-
-async function loadKnowledgeGraphView() {
-  const container = document.getElementById('kg-content');
-  container.innerHTML = '<div style="text-align:center; padding:60px; color:var(--text-muted);">Loading knowledge graph...</div>';
-
-  try {
-    const [mostAccessedRes, helpfulnessRes] = await Promise.all([
-      fetch(apiUrl(`${API_BASE}/stats/most-accessed`, { limit: 20 })).then(r => r.json()).catch(() => ({ memories: [] })),
-      fetch(apiUrl(`${API_BASE}/stats/helpfulness`, { limit: 10 })).then(r => r.json()).catch(() => ({ topMemories: [] }))
-    ]);
-
-    const memories = mostAccessedRes.memories || [];
-    const helpful = helpfulnessRes.topMemories || [];
-
-    if (memories.length === 0 && helpful.length === 0) {
-      container.innerHTML = '<div style="text-align:center; padding:60px; color:var(--text-muted);">No knowledge data available yet. Start using memories to build your knowledge graph.</div>';
-      return;
-    }
-
-    // Collect all topics
-    const topicMap = {};
-    memories.forEach(m => {
-      (m.topics || []).forEach(t => {
-        topicMap[t] = (topicMap[t] || 0) + 1;
-      });
-    });
-    const topTopics = Object.entries(topicMap).sort((a, b) => b[1] - a[1]).slice(0, 15);
-
-    let topicsHtml = '';
-    if (topTopics.length > 0) {
-      topicsHtml = `
-        <div class="card" style="margin-bottom:24px;">
-          <div class="card-header">
-            <div class="card-title"><i class="ri-hashtag"></i><span>Top Topics</span></div>
-          </div>
-          <div class="kg-topic-list">
-            ${topTopics.map(([topic, count]) => `
-              <span class="kg-topic-tag">${escapeHtml(topic)} (${count})</span>
-            `).join('')}
-          </div>
-        </div>
-      `;
-    }
-
-    const memoriesHtml = memories.length > 0 ? `
-      <div class="card" style="margin-bottom:24px;">
-        <div class="card-header">
-          <div class="card-title"><i class="ri-star-line"></i><span>Most Accessed Memories</span></div>
-        </div>
-        <div class="kg-grid">
-          ${memories.map((m, i) => `
-            <div class="kg-memory-card" onclick="openDetailModalByMemory('${m.memoryId || ''}')">
-              <div class="kg-memory-rank">#${i + 1}</div>
-              <div class="kg-memory-summary">${escapeHtml(m.summary || '(no summary)')}</div>
-              ${(m.topics || []).length > 0 ? `
-                <div class="kg-topic-list">
-                  ${m.topics.slice(0, 3).map(t => `<span class="kg-topic-tag">${escapeHtml(t)}</span>`).join('')}
-                </div>
-              ` : ''}
-              <div class="kg-memory-meta">
-                <span><i class="ri-eye-line"></i> ${m.accessCount || 0}x accessed</span>
-                <span><i class="ri-shield-check-line"></i> ${((m.confidence || 0) * 100).toFixed(0)}% confidence</span>
-              </div>
-            </div>
-          `).join('')}
-        </div>
-      </div>
-    ` : '';
-
-    const helpfulHtml = helpful.length > 0 ? `
-      <div class="card">
-        <div class="card-header">
-          <div class="card-title"><i class="ri-thumb-up-line"></i><span>Most Helpful Memories</span></div>
-        </div>
-        ${helpful.map((m, i) => {
-          const scoreColor = m.helpfulnessScore >= 0.7 ? 'var(--success)' : m.helpfulnessScore >= 0.4 ? 'var(--warning)' : 'var(--error)';
-          return `
-            <div class="modal-list-item" onclick="openDetailModalByEvent('${m.eventId || ''}')">
-              <div class="modal-list-info">
-                <div class="title">#${i + 1} ${escapeHtml(m.summary || '(no summary)')}</div>
-                <div class="subtitle">${m.accessCount || 0}x accessed | ${m.evaluationCount || 0} evaluations</div>
-              </div>
-              <div class="modal-list-badge" style="color:${scoreColor}; background:${scoreColor}22;">${m.helpfulnessScore}</div>
-            </div>
-          `;
-        }).join('')}
-      </div>
-    ` : '';
-
-    container.innerHTML = topicsHtml + memoriesHtml + helpfulHtml;
-
-  } catch (error) {
-    container.innerHTML = `<div style="text-align:center; padding:60px; color:var(--error);">Failed to load knowledge graph: ${escapeHtml(error.message)}</div>`;
-  }
-}
-
-function openDetailModalByMemory(memoryId) {
-  // memoryId might be an event ID - try to open it
-  if (memoryId) openDetailModal(memoryId);
-}
-
-function openDetailModalByEvent(eventId) {
-  if (eventId) openDetailModal(eventId);
-}
-
-// --- Memory Banks View ---
-
-async function loadMemoryBanksView() {
-  const container = document.getElementById('mb-content');
-  container.innerHTML = '<div style="text-align:center; padding:60px; color:var(--text-muted);">Loading memory banks...</div>';
-
-  try {
-    const [statsRes, graduationRes] = await Promise.all([
-      fetch(apiUrl(`${API_BASE}/stats`)).then(r => r.json()).catch(() => null),
-      fetch(apiUrl(`${API_BASE}/stats/graduation`)).then(r => r.json()).catch(() => null)
-    ]);
-
-    const levelStats = statsRes?.levelStats || [];
-    const levels = ['L0', 'L1', 'L2', 'L3', 'L4'];
-    const levelNames = { L0: 'Raw Events', L1: 'Structured', L2: 'Validated', L3: 'Verified', L4: 'Active' };
-    const levelCounts = {};
-    levelStats.forEach(s => { levelCounts[s.level] = s.count; });
-
-    const criteria = graduationRes?.criteria || {};
-
-    container.innerHTML = `
-      <div class="mb-level-tabs" id="mb-tabs">
-        ${levels.map(level => `
-          <button class="mb-level-tab ${level === 'L0' ? 'active' : ''}" data-level="${level}" style="border-left:3px solid ${CHART_COLORS[level]};">
-            ${levelNames[level]} <span class="tab-count">(${levelCounts[level] || 0})</span>
-          </button>
-        `).join('')}
-      </div>
-      <div class="card" style="margin-bottom:24px;">
-        <div class="card-header">
-          <div class="card-title"><i class="ri-stack-line"></i><span>Level Events</span></div>
-        </div>
-        <div id="mb-events-list">
-          <div style="text-align:center; padding:20px; color:var(--text-muted);">Select a level to view events</div>
-        </div>
-      </div>
-      <div class="card">
-        <div class="card-header">
-          <div class="card-title"><i class="ri-graduation-cap-line"></i><span>Graduation Criteria</span></div>
-        </div>
-        ${Object.entries(criteria).map(([key, c]) => `
-          <div style="margin-bottom:16px;">
-            <div style="font-size:14px; font-weight:600; color:var(--accent-primary); margin-bottom:8px;">${key}</div>
-            <div style="display:grid; grid-template-columns:repeat(2, 1fr); gap:8px;">
-              <div class="cfg-row" style="padding:8px 12px; background:rgba(255,255,255,0.02); border-radius:8px; border:none;">
-                <span class="cfg-row-label">Min Access</span>
-                <span class="cfg-row-value">${c.minAccessCount}</span>
-              </div>
-              <div class="cfg-row" style="padding:8px 12px; background:rgba(255,255,255,0.02); border-radius:8px; border:none;">
-                <span class="cfg-row-label">Min Confidence</span>
-                <span class="cfg-row-value">${c.minConfidence}</span>
-              </div>
-              <div class="cfg-row" style="padding:8px 12px; background:rgba(255,255,255,0.02); border-radius:8px; border:none;">
-                <span class="cfg-row-label">Cross-Session Refs</span>
-                <span class="cfg-row-value">${c.minCrossSessionRefs}</span>
-              </div>
-              <div class="cfg-row" style="padding:8px 12px; background:rgba(255,255,255,0.02); border-radius:8px; border:none;">
-                <span class="cfg-row-label">Max Age (days)</span>
-                <span class="cfg-row-value">${c.maxAgeDays}</span>
-              </div>
-            </div>
-          </div>
-        `).join('')}
-      </div>
-    `;
-
-    // Setup level tab click handlers
-    document.querySelectorAll('#mb-tabs .mb-level-tab').forEach(tab => {
-      tab.addEventListener('click', () => {
-        document.querySelectorAll('#mb-tabs .mb-level-tab').forEach(t => t.classList.remove('active'));
-        tab.classList.add('active');
-        loadMemoryBankLevel(tab.dataset.level);
-      });
-    });
-
-    // Load L0 by default
-    await loadMemoryBankLevel('L0');
-
-  } catch (error) {
-    container.innerHTML = `<div style="text-align:center; padding:60px; color:var(--error);">Failed to load memory banks: ${escapeHtml(error.message)}</div>`;
-  }
-}
-
-async function loadMemoryBankLevel(level) {
-  const container = document.getElementById('mb-events-list');
-  if (!container) return;
-  container.innerHTML = '<div style="text-align:center; padding:20px; color:var(--text-muted);">Loading...</div>';
-
-  try {
-    const res = await fetch(apiUrl(`${API_BASE}/stats/levels/${level}`, { limit: 30 }));
-    const data = await res.json();
-    const events = data.events || [];
-
-    if (events.length === 0) {
-      container.innerHTML = `<div style="text-align:center; padding:20px; color:var(--text-muted);">No events at level ${level}</div>`;
-      return;
-    }
-
-    container.innerHTML = `
-      <div class="mb-event-list">
-        ${events.map(e => {
-          const typeClass = `type-${(e.eventType || '').toLowerCase().replace('_', '-')}`;
-          return `
-            <div class="mb-event-card" onclick="openDetailModal('${e.id}')">
-              <div class="mb-event-header">
-                <span class="event-type-badge ${typeClass}">${e.eventType}</span>
-                <div style="display:flex; gap:8px; align-items:center;">
-                  ${e.accessCount > 0 ? `<span class="access-badge"><i class="ri-eye-line"></i> ${e.accessCount}</span>` : ''}
-                  <span class="event-time">${new Date(e.timestamp).toLocaleString()}</span>
-                </div>
-              </div>
-              <div class="mb-event-content">${escapeHtml((e.content || '').slice(0, 200))}</div>
-            </div>
-          `;
-        }).join('')}
-      </div>
-      ${data.hasMore ? `<div style="text-align:center; padding:16px; color:var(--text-muted); font-size:13px;">Showing ${events.length} of ${data.total} events</div>` : ''}
-    `;
-  } catch (error) {
-    container.innerHTML = `<div style="text-align:center; padding:20px; color:var(--error);">Failed to load level ${level}</div>`;
-  }
-}
-
-// --- User Prompts View ---
-
-async function renderUserPromptList() {
-  const listEl = document.getElementById('user-prompt-list');
-  const pageEl = document.getElementById('user-prompt-page');
-  const prevBtn = document.getElementById('user-prompt-prev');
-  const nextBtn = document.getElementById('user-prompt-next');
-  const metaEl = document.getElementById('user-prompt-meta');
-  if (!listEl) return;
-
-  const items = state.userPromptItems || [];
-  const pageSize = state.userPromptPageSize;
-  const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
-  if (state.userPromptPage > totalPages) state.userPromptPage = totalPages;
-
-  const start = (state.userPromptPage - 1) * pageSize;
-  const paged = items.slice(start, start + pageSize);
-
-  if (pageEl) pageEl.textContent = `${state.userPromptPage} / ${totalPages}`;
-  if (prevBtn) prevBtn.disabled = state.userPromptPage <= 1;
-  if (nextBtn) nextBtn.disabled = state.userPromptPage >= totalPages;
-
-  if (metaEl) {
-    const sessionCount = new Set(items.map(i => i.sessionId)).size;
-    metaEl.textContent = `${items.length} prompts · ${sessionCount} sessions${state.userPromptSearchQuery ? ` · query: "${state.userPromptSearchQuery}"` : ''}`;
-  }
-
-  if (paged.length === 0) {
-    listEl.innerHTML = '<div style="padding:20px; text-align:center; color:var(--text-muted);">No user prompts found.</div>';
-    return;
-  }
-
-  // Group current page by session
-  const groups = new Map();
-  for (const e of paged) {
-    const key = e.sessionId || 'unknown';
-    const arr = groups.get(key) || [];
-    arr.push(e);
-    groups.set(key, arr);
-  }
-
-  const html = Array.from(groups.entries()).map(([sessionId, sessionItems]) => {
-    const heading = `
-      <div style="margin:10px 0 6px; font-size:12px; color:var(--text-muted); font-weight:600;">
-        <i class="ri-chat-1-line"></i> Session ${escapeHtml((sessionId || '').slice(0, 16))}... · ${sessionItems.length} prompts
-      </div>
-    `;
-
-    const cards = sessionItems.map((e) => `
-      <div class="event-item" style="cursor:pointer;" onclick="openDetailModal('${e.id}')">
-        <div class="event-header">
-          <span class="event-type-badge type-user-prompt">user_prompt</span>
-          <span class="event-time">${new Date(e.timestamp).toLocaleString()}</span>
-        </div>
-        <div class="event-content" style="-webkit-line-clamp:4;">${escapeHtml(e.preview || '')}</div>
-      </div>
-    `).join('');
-
-    return heading + cards;
-  }).join('');
-
-  listEl.innerHTML = html;
-}
-
-async function loadUserPromptsView() {
-  const listEl = document.getElementById('user-prompt-list');
-  if (!listEl) return;
-
-  listEl.innerHTML = '<div style="padding:20px; text-align:center; color:var(--text-muted);">Loading user prompts...</div>';
-
-  try {
-    const params = {
-      type: 'user_prompt',
-      sort: 'recent',
-      limit: 500,
-      q: state.userPromptSearchQuery || undefined
-    };
-    const res = await fetch(apiUrl(`${API_BASE}/events`, params));
-    const data = await res.json();
-    const items = data.events || [];
-    state.userPromptItems = items;
-
-    await renderUserPromptList();
-  } catch (error) {
-    listEl.innerHTML = `<div style="padding:20px; text-align:center; color:var(--error);">Failed to load user prompts: ${escapeHtml(error.message)}</div>`;
-  }
-}
-
-// --- Configuration View ---
-
-async function loadConfigurationView() {
-  const container = document.getElementById('cfg-content');
-  container.innerHTML = '<div style="text-align:center; padding:60px; color:var(--text-muted);">Loading configuration...</div>';
-
-  try {
-    const [statsRes, graduationRes, endlessRes] = await Promise.all([
-      fetch(apiUrl(`${API_BASE}/stats`)).then(r => r.json()).catch(() => null),
-      fetch(apiUrl(`${API_BASE}/stats/graduation`)).then(r => r.json()).catch(() => null),
-      fetch(apiUrl(`${API_BASE}/stats/endless`)).then(r => r.json()).catch(() => null)
-    ]);
-
-    const memory = statsRes?.memory || {};
-    const storage = statsRes?.storage || {};
-    const criteria = graduationRes?.criteria || {};
-    const descriptions = graduationRes?.description || {};
-    const endless = endlessRes || {};
-
-    container.innerHTML = `
-      <div class="cfg-grid">
-        <div class="cfg-section">
-          <div class="cfg-section-title"><i class="ri-database-2-line"></i>Storage</div>
-          <div class="cfg-row">
-            <span class="cfg-row-label">Total Events</span>
-            <span class="cfg-row-value">${formatNumber(storage.eventCount || 0)}</span>
-          </div>
-          <div class="cfg-row">
-            <span class="cfg-row-label">Vector Nodes</span>
-            <span class="cfg-row-value">${formatNumber(storage.vectorCount || 0)}</span>
-          </div>
-          <div class="cfg-row">
-            <span class="cfg-row-label">Heap Used</span>
-            <span class="cfg-row-value">${memory.heapUsed || 0} MB</span>
-          </div>
-          <div class="cfg-row">
-            <span class="cfg-row-label">Heap Total</span>
-            <span class="cfg-row-value">${memory.heapTotal || 0} MB</span>
-          </div>
-        </div>
-
-        <div class="cfg-section">
-          <div class="cfg-section-title"><i class="ri-infinite-loop-line"></i>Endless Mode</div>
-          <div class="cfg-row">
-            <span class="cfg-row-label">Mode</span>
-            <span class="cfg-row-value">${endless.mode || 'session'}</span>
-          </div>
-          <div class="cfg-row">
-            <span class="cfg-row-label">Continuity Score</span>
-            <span class="cfg-row-value">${endless.continuityScore || 0}</span>
-          </div>
-          <div class="cfg-row">
-            <span class="cfg-row-label">Working Set Size</span>
-            <span class="cfg-row-value">${endless.workingSetSize || 0}</span>
-          </div>
-          <div class="cfg-row">
-            <span class="cfg-row-label">Consolidated</span>
-            <span class="cfg-row-value">${endless.consolidatedCount || 0}</span>
-          </div>
-          <div class="cfg-row">
-            <span class="cfg-row-label">Last Consolidation</span>
-            <span class="cfg-row-value">${endless.lastConsolidation ? new Date(endless.lastConsolidation).toLocaleDateString() : 'Never'}</span>
-          </div>
-        </div>
-      </div>
-
-      <div class="card" style="margin-top:24px;">
-        <div class="card-header">
-          <div class="card-title"><i class="ri-graduation-cap-line"></i><span>Graduation Criteria</span></div>
-        </div>
-        <div style="margin-bottom:16px; font-size:13px; color:var(--text-muted);">
-          ${Object.entries(descriptions).map(([key, desc]) => `
-            <div style="margin-bottom:4px;"><strong style="color:var(--text-secondary);">${key}</strong>: ${desc}</div>
-          `).join('')}
-        </div>
-        <div style="display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;">
-          ${Object.entries(criteria).map(([key, c]) => `
-            <div style="background:var(--bg-panel); border-radius:12px; padding:16px;">
-              <div style="font-size:14px; font-weight:600; color:var(--accent-primary); margin-bottom:12px;">${key}</div>
-              <div class="cfg-row"><span class="cfg-row-label">Min Access Count</span><span class="cfg-row-value">${c.minAccessCount}</span></div>
-              <div class="cfg-row"><span class="cfg-row-label">Min Confidence</span><span class="cfg-row-value">${c.minConfidence}</span></div>
-              <div class="cfg-row"><span class="cfg-row-label">Cross-Session Refs</span><span class="cfg-row-value">${c.minCrossSessionRefs}</span></div>
-              <div class="cfg-row"><span class="cfg-row-label">Max Age (days)</span><span class="cfg-row-value">${c.maxAgeDays}</span></div>
-            </div>
-          `).join('')}
-        </div>
-      </div>
-    `;
-  } catch (error) {
-    container.innerHTML = `<div style="text-align:center; padding:60px; color:var(--error);">Failed to load configuration: ${escapeHtml(error.message)}</div>`;
-  }
-}
-
-// --- Helpers ---
-
-function debounce(func, wait) {
-  let timeout;
-  return function executedFunction(...args) {
-    const later = () => {
-      clearTimeout(timeout);
-      func(...args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-
-function handleSearch(query) {
-  console.log('Searching for:', query);
-}
-
-function escapeHtml(unsafe) {
-  return String(unsafe)
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#039;");
-}
-
-// --- Chat Panel ---
-
-const CHAT_STORAGE_KEY = 'code-memory-chat-history';
-
-function loadChatHistory() {
-  try {
-    const raw = localStorage.getItem(CHAT_STORAGE_KEY);
-    return raw ? JSON.parse(raw) : [];
-  } catch { return []; }
-}
-
-function saveChatHistory(conversations) {
-  try {
-    // Keep last 50 conversations max
-    const trimmed = conversations.slice(-50);
-    localStorage.setItem(CHAT_STORAGE_KEY, JSON.stringify(trimmed));
-  } catch { /* storage full or unavailable */ }
-}
-
-function saveCurrentConversation() {
-  if (state.chatMessages.length === 0) return;
-  const conversations = loadChatHistory();
-  const firstUserMsg = state.chatMessages.find(m => m.role === 'user');
-  const title = firstUserMsg ? firstUserMsg.content.slice(0, 80) : 'Untitled';
-
-  if (state.chatConversationId) {
-    // Update existing
-    const idx = conversations.findIndex(c => c.id === state.chatConversationId);
-    if (idx >= 0) {
-      conversations[idx].messages = [...state.chatMessages];
-      conversations[idx].updatedAt = new Date().toISOString();
-      conversations[idx].title = title;
-    }
-  } else {
-    // Create new
-    state.chatConversationId = 'chat-' + Date.now();
-    conversations.push({
-      id: state.chatConversationId,
-      title,
-      messages: [...state.chatMessages],
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString(),
-      project: state.currentProject || 'global'
-    });
-  }
-  saveChatHistory(conversations);
-}
-
-function startNewConversation() {
-  saveCurrentConversation();
-  state.chatMessages = [];
-  state.chatConversationId = null;
-
-  const container = document.getElementById('chat-messages');
-  container.innerHTML = `
-    <div class="chat-welcome">
-      <div class="chat-welcome-icon">🧠</div>
-      <div class="chat-welcome-title">Ask about your memories</div>
-      <div class="chat-welcome-text">
-        I can search through your coding sessions, tool usage, and stored knowledge to answer questions.
-      </div>
-    </div>
-  `;
-  switchChatTab('chat');
-}
-
-function loadConversation(id) {
-  const conversations = loadChatHistory();
-  const conv = conversations.find(c => c.id === id);
-  if (!conv) return;
-
-  // Save current first
-  if (state.chatMessages.length > 0 && state.chatConversationId !== id) {
-    saveCurrentConversation();
-  }
-
-  state.chatConversationId = conv.id;
-  state.chatMessages = [...conv.messages];
-
-  // Render messages
-  const container = document.getElementById('chat-messages');
-  container.innerHTML = '';
-  for (const msg of conv.messages) {
-    appendChatMessage(msg.role, msg.content);
-  }
-
-  switchChatTab('chat');
-}
-
-function deleteConversation(id, evt) {
-  evt.stopPropagation();
-  const conversations = loadChatHistory().filter(c => c.id !== id);
-  saveChatHistory(conversations);
-  if (state.chatConversationId === id) {
-    state.chatMessages = [];
-    state.chatConversationId = null;
-    const container = document.getElementById('chat-messages');
-    container.innerHTML = `
-      <div class="chat-welcome">
-        <div class="chat-welcome-icon">🧠</div>
-        <div class="chat-welcome-title">Ask about your memories</div>
-        <div class="chat-welcome-text">
-          I can search through your coding sessions, tool usage, and stored knowledge to answer questions.
-        </div>
-      </div>
-    `;
-  }
-  renderHistoryList();
-}
-
-function renderHistoryList() {
-  const container = document.getElementById('chat-history-view');
-  const conversations = loadChatHistory().reverse(); // newest first
-
-  if (conversations.length === 0) {
-    container.innerHTML = '<div class="chat-history-empty">No conversation history yet.</div>';
-    return;
-  }
-
-  container.innerHTML = conversations.map(conv => {
-    const date = new Date(conv.updatedAt || conv.createdAt);
-    const dateStr = date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    const msgCount = conv.messages.length;
-    const isActive = conv.id === state.chatConversationId;
-    return `
-      <div class="chat-history-item${isActive ? ' active' : ''}" onclick="loadConversation('${conv.id}')"
-           style="${isActive ? 'border-color:var(--accent-primary);background:rgba(123,97,255,0.08);' : ''}">
-        <div class="chat-history-item-title">${escapeHtml(conv.title)}</div>
-        <div class="chat-history-item-meta">
-          <span>${dateStr} &middot; ${msgCount} messages</span>
-          <button class="chat-history-item-delete" onclick="deleteConversation('${conv.id}', event)" title="Delete">
-            <i class="ri-delete-bin-line"></i>
-          </button>
-        </div>
-      </div>
-    `;
-  }).join('');
-}
-
-function switchChatTab(tab) {
-  const msgContainer = document.getElementById('chat-messages');
-  const historyContainer = document.getElementById('chat-history-view');
-  const inputArea = document.querySelector('.chat-input-area');
-
-  document.querySelectorAll('.chat-header-tab').forEach(t => {
-    t.classList.toggle('active', t.dataset.chatTab === tab);
-  });
-
-  if (tab === 'chat') {
-    msgContainer.classList.remove('hidden');
-    historyContainer.classList.remove('active');
-    if (inputArea) inputArea.style.display = '';
-  } else {
-    msgContainer.classList.add('hidden');
-    historyContainer.classList.add('active');
-    if (inputArea) inputArea.style.display = 'none';
-    renderHistoryList();
-  }
-
-  state.chatCurrentTab = tab;
-}
-
-function toggleChatPanel() {
-  if (state.isChatOpen) {
-    closeChatPanel();
-  } else {
-    openChatPanel();
-  }
-}
-
-function openChatPanel() {
-  const panel = document.getElementById('chat-panel');
-  if (panel) {
-    panel.classList.add('open');
-    state.isChatOpen = true;
-    updateChatProjectScope();
-    setTimeout(() => {
-      document.getElementById('chat-input')?.focus();
-    }, 300);
-  }
-}
-
-function closeChatPanel() {
-  const panel = document.getElementById('chat-panel');
-  if (panel) {
-    panel.classList.remove('open');
-    state.isChatOpen = false;
-  }
-  if (state.chatAbortController) {
-    state.chatAbortController.abort();
-    state.chatAbortController = null;
-    state.isChatStreaming = false;
-  }
-  // Auto-save on close
-  saveCurrentConversation();
-}
-
-function updateChatProjectScope() {
-  const el = document.getElementById('chat-project-scope');
-  if (!el) return;
-  if (state.currentProject) {
-    const proj = state.projects.find(p => p.hash === state.currentProject);
-    el.textContent = `Scope: ${proj?.projectName || state.currentProject}`;
-  } else {
-    el.textContent = 'Scope: All (Global)';
-  }
-}
-
-async function sendChatMessage() {
-  const input = document.getElementById('chat-input');
-  const message = input.value.trim();
-  if (!message) return;
-
-  input.value = '';
-  input.style.height = 'auto';
-  document.getElementById('chat-send-btn').disabled = true;
-
-  // Add user message
-  state.chatMessages.push({ role: 'user', content: message });
-  appendChatMessage('user', message);
-
-  // Remove welcome
-  const welcome = document.querySelector('.chat-welcome');
-  if (welcome) welcome.remove();
-
-  // Show loading
-  const loadingEl = appendChatLoading();
-
-  state.isChatStreaming = true;
-  state.chatAbortController = new AbortController();
-
-  try {
-    const response = await fetch(apiUrl(`${API_BASE}/chat`), {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        message,
-        history: state.chatMessages.slice(-10)
-      }),
-      signal: state.chatAbortController.signal
-    });
-
-    if (!response.ok) {
-      const err = await response.json().catch(() => ({ error: `HTTP ${response.status}` }));
-      throw new Error(err.error || `Request failed: ${response.status}`);
-    }
-
-    loadingEl.remove();
-    const msgEl = appendChatMessage('assistant', '', true);
-    let fullContent = '';
-
-    const reader = response.body.getReader();
-    const decoder = new TextDecoder();
-    let sseBuffer = '';
-
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) break;
-
-      sseBuffer += decoder.decode(value, { stream: true });
-      const lines = sseBuffer.split('\n');
-      sseBuffer = lines.pop() || '';
-
-      for (const line of lines) {
-        if (line.startsWith('data: ')) {
-          const dataStr = line.slice(6);
-          try {
-            const data = JSON.parse(dataStr);
-            if (data.content) {
-              fullContent += data.content;
-              updateChatMessageContent(msgEl, fullContent);
-              scrollChatToBottom();
-            }
-            if (data.error) {
-              fullContent += `\n\n**Error:** ${data.error}`;
-              updateChatMessageContent(msgEl, fullContent);
-            }
-          } catch { /* skip */ }
-        }
-      }
-    }
-
-    msgEl.classList.remove('streaming');
-    if (fullContent) {
-      state.chatMessages.push({ role: 'assistant', content: fullContent });
-    }
-
-    // Auto-save after each response
-    saveCurrentConversation();
-
-  } catch (err) {
-    if (loadingEl.parentNode) loadingEl.remove();
-    if (err.name !== 'AbortError') {
-      appendChatMessage('assistant',
-        `**Error:** ${err.message}\n\nMake sure the Claude CLI is installed and authenticated.`
-      );
-    }
-  } finally {
-    state.isChatStreaming = false;
-    state.chatAbortController = null;
-    const sendBtn = document.getElementById('chat-send-btn');
-    const chatInput = document.getElementById('chat-input');
-    if (sendBtn && chatInput) {
-      sendBtn.disabled = !chatInput.value.trim();
-    }
-  }
-}
-
-function appendChatMessage(role, content, streaming = false) {
-  const container = document.getElementById('chat-messages');
-  const el = document.createElement('div');
-  el.className = `chat-msg ${role}${streaming ? ' streaming' : ''}`;
-
-  if (role === 'assistant') {
-    el.innerHTML = renderMarkdown(content);
-  } else {
-    el.textContent = content;
-  }
-
-  container.appendChild(el);
-  scrollChatToBottom();
-  return el;
-}
-
-function appendChatLoading() {
-  const container = document.getElementById('chat-messages');
-  const el = document.createElement('div');
-  el.className = 'chat-loading';
-  el.innerHTML = `
-    <div class="chat-loading-dot"></div>
-    <div class="chat-loading-dot"></div>
-    <div class="chat-loading-dot"></div>
-  `;
-  container.appendChild(el);
-  scrollChatToBottom();
-  return el;
-}
-
-function updateChatMessageContent(el, content) {
-  el.innerHTML = renderMarkdown(content);
-}
-
-function scrollChatToBottom() {
-  const container = document.getElementById('chat-messages');
-  if (container) container.scrollTop = container.scrollHeight;
-}
-
-function renderMarkdown(text) {
-  if (!text) return '';
-
-  let html = escapeHtml(text);
-
-  // Code blocks
-  html = html.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre><code>$2</code></pre>');
-
-  // Inline code
-  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
-
-  // Bold
-  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
-
-  // Italic
-  html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
-
-  // Headers
-  html = html.replace(/^### (.+)$/gm, '<div style="font-weight:600;color:var(--text-primary);margin:12px 0 4px;">$1</div>');
-  html = html.replace(/^## (.+)$/gm, '<div style="font-size:15px;font-weight:600;color:var(--text-primary);margin:12px 0 4px;">$1</div>');
-
-  // Lists
-  html = html.replace(/^- (.+)$/gm, '<div style="padding-left:16px;">&#8226; $1</div>');
-
-  // Line breaks
-  html = html.replace(/\n/g, '<br>');
-
-  return html;
-}