claude-memory-layer 1.0.18 → 1.0.19

package/src/ui/app.js

@@ -12,6 +12,8 @@ const state = {
   mostAccessed: null,
   helpfulness: null,
   retrievalTraces: null,
+  adherenceSummary: null,
+  adherenceWindow: '24h',
   currentLevel: 'L0',
   currentSort: 'recent',
   currentView: 'overview',
@@ -20,6 +22,9 @@ const state = {
   events: [],
   isLoading: false,
   chartInstance: null,
+  kpiChartInstance: null,
+  kpiWindow: '7d',
+  kpi: null,
   chatMessages: [],
   isChatOpen: false,
   isChatStreaming: false,
@@ -102,13 +107,42 @@ function setupEventListeners() {
   });
 
   // Sort buttons
-  document.querySelectorAll('.sort-btn').forEach(btn => {
+  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) {
@@ -125,6 +159,10 @@ function setupEventListeners() {
         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') {
@@ -231,17 +269,24 @@ function setupEventListeners() {
 
 // --- 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] = await Promise.all([
+    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)
+      fetch(apiUrl(`${API_BASE}/stats/retrieval-traces`, { limit: 20 })).then(r => r.json()).catch(() => null),
+      fetchAdherenceSummary().catch(() => null)
     ]);
 
     state.stats = stats;
@@ -249,10 +294,15 @@ async function refreshData() {
     state.mostAccessed = mostAccessed;
     state.helpfulness = helpfulness;
     state.retrievalTraces = retrievalTraces;
+    state.adherenceSummary = adherenceSummary;
+
+    await loadKpiData();
 
     updateStatsUI();
     updateSharedUI();
     updateMemoryUsageUI();
+    updateKpiCardsUI();
+    renderKpiTrendChart();
     await loadLevelEvents(state.currentLevel);
 
     checkEndlessStatus();
@@ -327,6 +377,98 @@ function updateSharedUI() {
   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;
 
@@ -347,6 +489,23 @@ function selectSort(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 = '';
@@ -374,13 +533,17 @@ function updateEventsListUI() {
     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">
-        <span class="event-type-badge ${typeClass}">${eventType}</span>
+        <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}
@@ -400,9 +563,72 @@ function updateMemoryUsageUI() {
   updateGraduationBars();
   updateHelpfulnessUI();
   updateMostHelpfulList();
+  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;
@@ -691,6 +917,7 @@ async function openDetailModal(eventId) {
     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) {
@@ -716,6 +943,7 @@ async function openDetailModal(eventId) {
           <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}
@@ -763,11 +991,13 @@ async function showEventsListModal() {
 
     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>
@@ -847,11 +1077,13 @@ async function showSessionDetailInModal(sessionId) {
       <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>

package/src/ui/index.html

@@ -120,6 +120,45 @@
           </div>
         </div>
 
+        <!-- KPI Cards -->
+        <div class="stats-grid kpi-grid" style="margin-top:-4px;">
+          <div class="stat-card kpi-card">
+            <div class="stat-value" id="kpi-useful-recall">-</div>
+            <div class="kpi-delta" id="kpi-useful-recall-delta">-</div>
+            <div class="stat-label"><i class="ri-thumb-up-line"></i> Useful Recall Rate</div>
+          </div>
+          <div class="stat-card kpi-card">
+            <div class="stat-value" id="kpi-completion-turns">-</div>
+            <div class="kpi-delta" id="kpi-completion-turns-delta">-</div>
+            <div class="stat-label"><i class="ri-repeat-line"></i> Avg Completion Turns</div>
+          </div>
+          <div class="stat-card kpi-card">
+            <div class="stat-value" id="kpi-rework-rate">-</div>
+            <div class="kpi-delta" id="kpi-rework-rate-delta">-</div>
+            <div class="stat-label"><i class="ri-hammer-line"></i> Rework Rate</div>
+          </div>
+          <div class="stat-card kpi-card">
+            <div class="stat-value" id="kpi-failure-rate">-</div>
+            <div class="kpi-delta" id="kpi-failure-rate-delta">-</div>
+            <div class="stat-label"><i class="ri-error-warning-line"></i> Post-change Failure</div>
+          </div>
+        </div>
+
+        <div class="card" style="margin-bottom:24px;">
+          <div class="card-header">
+            <div class="card-title">
+              <i class="ri-line-chart-line"></i>
+              <span>KPI Trend</span>
+            </div>
+            <div style="display:flex; gap:8px;">
+              <button class="sort-btn active" data-kpi-window="7d">7d</button>
+              <button class="sort-btn" data-kpi-window="30d">30d</button>
+            </div>
+          </div>
+          <div id="kpi-alerts" style="font-size:12px; color:var(--text-muted); margin-bottom:10px;">Loading...</div>
+          <div id="kpi-trend-chart" style="height:240px;"></div>
+        </div>
+
         <!-- Main Grid -->
         <div class="dashboard-grid">
 
@@ -272,6 +311,18 @@
                 </div>
               </div>
 
+              <div style="margin-top:20px;">
+                <div class="section-label" style="display:flex; justify-content:space-between; align-items:center;">
+                  <span>Adherence Reasons</span>
+                  <span id="adherence-window-controls" style="display:flex; gap:6px;">
+                    <button class="sort-btn active" data-adh-window="24h">24h</button>
+                    <button class="sort-btn" data-adh-window="7d">7d</button>
+                    <button class="sort-btn" data-adh-window="30d">30d</button>
+                  </span>
+                </div>
+                <div id="adherence-summary" style="padding:8px 0; font-size:13px; color:var(--text-muted);">Loading...</div>
+              </div>
+
               <div style="margin-top:20px;">
                 <div class="section-label">Retrieval Trace (1:1)</div>
                 <div id="retrieval-trace-summary" style="padding:8px 0; font-size:13px; color:var(--text-muted);">Loading...</div>

package/src/ui/style.css

@@ -329,6 +329,23 @@ body {
   opacity: 0.5;
 }
 
+.kpi-grid .stat-card .stat-value {
+  font-size: 28px;
+}
+.kpi-grid .stat-card .stat-label {
+  font-size: 12px;
+}
+.kpi-delta {
+  font-size: 11px;
+  margin-top: -4px;
+  margin-bottom: 8px;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+.kpi-delta.good { color: var(--success); }
+.kpi-delta.bad { color: var(--error); }
+.kpi-delta.neutral { color: var(--text-muted); }
+
 .stat-value {
   font-size: 36px;
   font-weight: 700;
@@ -594,6 +611,23 @@ body {
   font-weight: 600;
 }
 
+.adherence-badge {
+  font-size: 10px;
+  padding: 3px 7px;
+  border-radius: 6px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.2px;
+}
+.adherence-checked {
+  background: rgba(52, 211, 153, 0.14);
+  color: #34D399;
+}
+.adherence-skipped {
+  background: rgba(148, 163, 184, 0.14);
+  color: #94A3B8;
+}
+
 /* Section Label */
 .section-label {
   font-size: 12px;