claude-memory-layer 1.0.31 → 1.0.33

package/src/apps/dashboard/assets/js/overview.js

@@ -1,655 +0,0 @@
-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
-// =============================================
-