claude-memory-layer 1.0.18 → 1.0.20

package/src/ui/app.js

@@ -12,6 +12,12 @@ const state = {
   mostAccessed: null,
   helpfulness: null,
   retrievalTraces: null,
+  adherenceSummary: null,
+  adherenceWindow: '24h',
+  userPromptSearchQuery: '',
+  userPromptItems: [],
+  userPromptPage: 1,
+  userPromptPageSize: 30,
   currentLevel: 'L0',
   currentSort: 'recent',
   currentView: 'overview',
@@ -20,6 +26,9 @@ const state = {
   events: [],
   isLoading: false,
   chartInstance: null,
+  kpiChartInstance: null,
+  kpiWindow: '7d',
+  kpi: null,
   chatMessages: [],
   isChatOpen: false,
   isChatStreaming: false,
@@ -102,19 +111,81 @@ 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) {
     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) {
@@ -125,6 +196,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 +306,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 +331,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 +414,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 +526,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 +570,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 +600,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 +954,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 +980,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 +1028,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 +1114,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>
@@ -965,6 +1234,7 @@ function switchView(viewName) {
   switch (viewName) {
     case 'knowledge-graph': loadKnowledgeGraphView(); break;
     case 'memory-banks': loadMemoryBanksView(); break;
+    case 'user-prompts': loadUserPromptsView(); break;
     case 'configuration': loadConfigurationView(); break;
   }
 }
@@ -1198,6 +1468,94 @@ async function loadMemoryBankLevel(level) {
   }
 }
 
+// --- 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() {

package/src/ui/index.html

@@ -51,6 +51,10 @@
             <i class="ri-brain-line"></i>
             <span>Memory Banks</span>
           </li>
+          <li class="nav-item" data-nav="user-prompts">
+            <i class="ri-message-2-line"></i>
+            <span>User Prompts</span>
+          </li>
           <li class="nav-item" data-nav="configuration">
             <i class="ri-settings-4-line"></i>
             <span>Configuration</span>
@@ -120,6 +124,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 +315,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>
@@ -312,6 +367,41 @@
         </div>
       </div>
 
+      <!-- ========== VIEW: User Prompts ========== -->
+      <div id="view-user-prompts" class="page-view">
+        <header class="top-header">
+          <div class="page-title">
+            <h1>User Prompts</h1>
+            <p>Search and browse recent user prompts</p>
+          </div>
+        </header>
+        <div class="card" style="margin-bottom:16px;">
+          <div style="display:flex; gap:10px; align-items:center;">
+            <div class="search-wrapper" style="width:420px; max-width:100%;">
+              <i class="ri-search-line"></i>
+              <input type="text" id="user-prompt-search" class="search-input" placeholder="Search user prompts...">
+            </div>
+            <button id="user-prompt-refresh" class="btn btn-secondary"><i class="ri-refresh-line"></i><span>Refresh</span></button>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-header" style="align-items:flex-end;">
+            <div>
+              <div class="card-title"><i class="ri-history-line"></i><span>Latest User Prompt History</span></div>
+              <div id="user-prompt-meta" style="font-size:12px; color:var(--text-muted); margin-top:6px;"></div>
+            </div>
+            <div style="display:flex; gap:8px; align-items:center;">
+              <button id="user-prompt-prev" class="sort-btn">Prev</button>
+              <span id="user-prompt-page" style="font-size:12px; color:var(--text-muted);">1 / 1</span>
+              <button id="user-prompt-next" class="sort-btn">Next</button>
+            </div>
+          </div>
+          <div id="user-prompt-list" class="event-list">
+            <div style="padding:20px; text-align:center; color:var(--text-muted);">Loading...</div>
+          </div>
+        </div>
+      </div>
+
       <!-- ========== VIEW: Configuration ========== -->
       <div id="view-configuration" class="page-view">
         <header class="top-header">