claude-memory-layer 1.0.48 → 1.0.50

package/dist/ui/assets/js/overview.js

@@ -32,6 +32,88 @@ async function loadVectorHealthData() {
     .catch(() => null);
 }
 
+async function loadProjectDetailData() {
+  if (!state.currentProject) {
+    state.projectDetail = null;
+    state.projectDetailProject = null;
+    return;
+  }
+  const projectHash = state.currentProject;
+  state.projectDetail = await fetch(apiUrl(`${API_BASE}/projects/${encodeURIComponent(projectHash)}/detail`))
+    .then(r => r.ok !== false ? r.json() : null)
+    .catch(() => null);
+  state.projectDetailProject = projectHash;
+}
+
+function topEntries(record, limit = 3) {
+  return Object.entries(record || {})
+    .sort((a, b) => Number(b[1] || 0) - Number(a[1] || 0))
+    .slice(0, limit);
+}
+
+function updateProjectDetailUI() {
+  const el = document.getElementById('project-detail-card');
+  if (!el) return;
+
+  if (!state.currentProject) {
+    el.hidden = true;
+    el.innerHTML = '';
+    return;
+  }
+
+  el.hidden = false;
+  const detail = state.projectDetailProject === state.currentProject ? state.projectDetail : null;
+  if (!detail) {
+    el.innerHTML = `
+      <div class="card-header">
+        <div class="card-title"><i class="ri-folder-chart-line"></i><span>Project Detail</span></div>
+      </div>
+      <div class="disclosure-empty">Project detail is unavailable for the selected scope.</div>
+    `;
+    return;
+  }
+
+  const project = detail.project || {};
+  const storage = detail.storage || {};
+  const sessions = detail.sessions || {};
+  const retrieval = detail.retrieval || {};
+  const outbox = detail.outbox || {};
+  const eventTypeChips = topEntries(detail.eventTypes, 4)
+    .map(([label, count]) => `<span class="event-type-badge ${eventTypeBadgeClass(label)}">${escapeHtml(label)} · ${formatNumber(count)}</span>`)
+    .join('') || '<span class="session-muted">No event types</span>';
+  const sourceChips = topEntries(detail.sources, 3)
+    .map(([label, count]) => `<span class="disclosure-scope-pill">${escapeHtml(label)} · ${formatNumber(count)}</span>`)
+    .join('') || '<span class="session-muted">No source metadata</span>';
+  const selectionRate = `${((retrieval.selectionRate || 0) * 100).toFixed(1)}% selection`;
+
+  el.innerHTML = `
+    <div class="card-header" style="align-items:flex-start;">
+      <div>
+        <div class="card-title"><i class="ri-folder-chart-line"></i><span>Project Detail</span></div>
+        <div class="session-muted">${escapeHtml(project.projectName || state.currentProject)} · ${escapeHtml(project.registered ? 'registered' : 'unregistered')}</div>
+      </div>
+      <span class="disclosure-scope-pill">${escapeHtml(project.hash || state.currentProject)}</span>
+    </div>
+    <div class="stats-grid kpi-grid" style="margin-top:0; margin-bottom:14px;">
+      <div class="stat-card kpi-card"><div class="stat-value">${formatNumber(storage.eventCount || 0)} events</div><div class="stat-label"><i class="ri-file-list-3-line"></i> total</div></div>
+      <div class="stat-card kpi-card"><div class="stat-value">${formatNumber(sessions.total || 0)} sessions</div><div class="stat-label"><i class="ri-discuss-line"></i> active</div></div>
+      <div class="stat-card kpi-card"><div class="stat-value">${formatNumber(storage.vectorCount || 0)} vectors</div><div class="stat-label"><i class="ri-node-tree"></i> indexed</div></div>
+      <div class="stat-card kpi-card"><div class="stat-value">${formatNumber(retrieval.totalQueries || 0)}</div><div class="stat-label"><i class="ri-search-eye-line"></i> ${selectionRate}</div></div>
+    </div>
+    <div class="cfg-grid">
+      <div class="cfg-section">
+        <div class="cfg-section-title"><i class="ri-price-tag-3-line"></i>Event types</div>
+        <div style="display:flex; gap:6px; flex-wrap:wrap;">${eventTypeChips}</div>
+      </div>
+      <div class="cfg-section">
+        <div class="cfg-section-title"><i class="ri-router-line"></i>Sources & outbox</div>
+        <div style="display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px;">${sourceChips}</div>
+        <div class="session-muted">${formatNumber(outbox.pending || 0)} pending · ${formatNumber(outbox.processing || 0)} processing · ${formatNumber(outbox.failed || 0)} failed · ${formatNumber(outbox.stuckProcessing || 0)} stuck</div>
+      </div>
+    </div>
+  `;
+}
+
 async function refreshData() {
   const btn = document.getElementById('refresh-btn');
   if(btn) btn.classList.add('loading');
@@ -41,7 +123,7 @@ async function refreshData() {
   const kpiWindowAtStart = state.kpiWindow;
 
   try {
-    const [stats, shared, mostAccessed, helpfulness, memoryUsefulness, retrievalTraces, retrievalReviewQueue, operationsStats, perspectiveStats, adherenceSummary, vectorHealth] = await Promise.all([
+    const [stats, shared, mostAccessed, helpfulness, memoryUsefulness, retrievalTraces, retrievalReviewQueue, operationsStats, perspectiveStats, adherenceSummary, vectorHealth, projectDetail] = 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),
@@ -52,7 +134,10 @@ async function refreshData() {
       fetch(apiUrl(`${API_BASE}/stats/operations`, { windowDays: operationStatsWindowDays() })).then(r => r.ok ? r.json() : null).catch(() => null),
       fetch(apiUrl(`${API_BASE}/stats/perspective`, { windowDays: operationStatsWindowDays() })).then(r => r.ok ? r.json() : null).catch(() => null),
       fetchAdherenceSummary().catch(() => null),
-      fetch(apiUrl(`${API_BASE}/health`)).then(r => r.ok ? r.json() : null).catch(() => null)
+      fetch(apiUrl(`${API_BASE}/health`)).then(r => r.ok ? r.json() : null).catch(() => null),
+      state.currentProject
+        ? fetch(apiUrl(`${API_BASE}/projects/${encodeURIComponent(state.currentProject)}/detail`)).then(r => r.ok ? r.json() : null).catch(() => null)
+        : Promise.resolve(null)
     ]);
 
     if (
@@ -74,11 +159,14 @@ async function refreshData() {
     state.perspectiveStats = perspectiveStats;
     state.adherenceSummary = adherenceSummary;
     state.vectorHealth = vectorHealth;
+    state.projectDetail = projectDetail;
+    state.projectDetailProject = state.currentProject || null;
 
     await loadKpiData();
     if (refreshRequestId !== state.refreshRequestId) return;
 
     updateStatsUI();
+    updateProjectDetailUI();
     updateSharedUI();
     updateMemoryUsageUI();
     updateKpiCardsUI();
@@ -120,6 +208,7 @@ async function loadLevelEvents(level, sort) {
 
 function updateStatsUI() {
   if (!state.stats) return;
+  if (typeof updateProjectScopeUI === 'function') updateProjectScopeUI();
 
   const eventCount = state.stats.storage?.eventCount || 0;
   const sessionCount = state.stats.sessions?.total || 0;
@@ -319,7 +408,7 @@ function updateEventsListUI() {
 
     const time = new Date(event.timestamp).toLocaleString();
     const eventType = event.eventType || event.type || 'unknown';
-    const typeClass = `type-${eventType.toLowerCase().replace('_', '-')}`;
+    const typeClass = eventTypeBadgeClass(eventType);
     const preview = event.preview || event.content || '';
     const accessBadge = event.accessCount > 0
       ? `<span class="access-badge"><i class="ri-eye-line"></i> ${event.accessCount}</span>`
@@ -332,7 +421,7 @@ function updateEventsListUI() {
     el.innerHTML = `
       <div class="event-header">
         <div style="display:flex; gap:8px; align-items:center;">
-          <span class="event-type-badge ${typeClass}">${eventType}</span>
+          <span class="event-type-badge ${typeClass}">${escapeHtml(eventType)}</span>
           ${adherenceBadge}
         </div>
         <div style="display:flex; gap:8px; align-items:center;">
@@ -367,11 +456,12 @@ function updateTopAccessedEventsUI() {
     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 || '';
+    const typeClass = eventTypeBadgeClass(type);
     return `
-      <div class="shared-item" style="cursor:pointer;" ${id ? `onclick="openDetailModal('${id}')"` : ''}>
+      <div class="shared-item" style="cursor:pointer;" ${id ? `onclick="openDetailModal(${jsAttrArg(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 class="event-type-badge ${typeClass}">${escapeHtml(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>
@@ -1233,9 +1323,9 @@ function updateRetrievalTraceUI() {
     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>`;
+          return `<span class="event-type-badge" style="cursor:pointer;" onclick="openDetailModal(${jsAttrArg(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(' ') || '-');
+      : ((t.selectedEventIds || []).slice(0, 2).map((id) => `<span class="event-type-badge" style="cursor:pointer;" onclick="openDetailModal(${jsAttrArg(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('')
@@ -1247,7 +1337,7 @@ function updateRetrievalTraceUI() {
           <span style="font-size:12px; color:var(--text-secondary);"><strong>Trace:</strong> ${escapeHtml((t.traceId || '').slice(0, 12)) || '-'}</span>
           <span style="font-size:11px; color:var(--text-muted);">${ts} · strategy=${escapeHtml(t.strategy || 'auto')} · conf=${escapeHtml(confidence)} ${rewriteBadge}</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>
+          <span style="font-size:11px; color:var(--text-muted);">candidates: ${candidateDetails.map((d) => `<span class=\"event-type-badge\" style=\"cursor:pointer;\" onclick=\"openDetailModal(${jsAttrArg(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;">

package/dist/ui/assets/js/state.js

@@ -17,6 +17,8 @@ const state = {
   operationsStats: null,
   perspectiveStats: null,
   vectorHealth: null,
+  projectDetail: null,
+  projectDetailProject: null,
   vectorHealthRecovery: null,
   vectorHealthRecoveryProject: null,
   isVectorRecoveryRunning: false,
@@ -26,6 +28,19 @@ const state = {
   userPromptItems: [],
   userPromptPage: 1,
   userPromptPageSize: 30,
+  sessionInspectorSessions: [],
+  sessionInspectorPage: 1,
+  sessionInspectorPageSize: 50,
+  selectedSession: null,
+  selectedSessionTurns: [],
+  selectedSessionEvents: [],
+  sessionSnapshotTab: 'overview',
+  sessionJumpEventId: null,
+  pendingSessionJump: null,
+  sessionInspectorRequestId: 0,
+  sessionDetailRequestId: 0,
+  isSessionInspectorLoading: false,
+  isSessionDetailLoading: false,
   currentLevel: 'L0',
   currentSort: 'recent',
   currentView: 'overview',
@@ -46,15 +61,27 @@ const state = {
   chatCurrentTab: 'chat',
   disclosureResults: [],
   disclosureMeta: null,
+  disclosureQuery: '',
   disclosureSelectedId: null,
   disclosureExpansion: null,
   disclosureSource: null,
-  isDisclosureLoading: false
+  isDisclosureLoading: false,
+  playgroundLastRun: null,
+  isPlaygroundLoading: false
 };
 
 // Utils
 const formatNumber = (num) => new Intl.NumberFormat().format(num || 0);
 
+function eventTypeBadgeClass(type) {
+  const token = String(type || 'unknown')
+    .toLowerCase()
+    .replace(/_/g, '-')
+    .replace(/[^a-z0-9-]+/g, '-')
+    .replace(/^-+|-+$/g, '') || 'unknown';
+  return `type-${token}`;
+}
+
 // Colors for Chart
 const CHART_COLORS = {
   L0: '#7B61FF',