claude-memory-layer 1.0.49 → 1.0.50

package/dist/ui/assets/js/bootstrap.js

@@ -30,9 +30,41 @@ async function loadProjects() {
       option.textContent = `${p.projectName} (${p.dbSizeHuman})`;
       select.appendChild(option);
     });
+
+    const savedProject = window.localStorage?.getItem('cml.dashboard.project') || '';
+    if (!state.currentProject && savedProject && state.projects.some(p => p.hash === savedProject)) {
+      state.currentProject = savedProject;
+      select.value = savedProject;
+    }
+    updateProjectScopeUI();
   } catch (error) {
     console.error('Failed to load projects:', error);
+    updateProjectScopeUI();
+  }
+}
+
+function updateProjectScopeUI() {
+  const label = document.getElementById('scope-context-label');
+  const detail = document.getElementById('scope-context-detail');
+  const disclosureBadge = document.getElementById('disclosure-scope-badge');
+  const empty = document.getElementById('global-empty-state');
+  const project = state.currentProject ? state.projects.find(p => p.hash === state.currentProject) : null;
+  const eventCount = state.stats?.storage?.eventCount || 0;
+  const sessionCount = state.stats?.sessions?.total || 0;
+  const vectorCount = state.stats?.storage?.vectorCount || 0;
+
+  if (project) {
+    if (label) label.textContent = `Scope: ${project.projectName}`;
+    if (detail) detail.textContent = `Project-local memory · ${project.dbSizeHuman || project.hash}`;
+    if (disclosureBadge) disclosureBadge.textContent = `Search → Expand → Source · Project-local: ${project.projectName}`;
+    if (empty) empty.hidden = true;
+    return;
   }
+
+  if (label) label.textContent = 'Scope: All projects';
+  if (detail) detail.textContent = 'Global aggregate view. Select a project for live project-local sessions and retrieval evidence.';
+  if (disclosureBadge) disclosureBadge.textContent = 'Search → Expand → Source · Global scope unless a project is selected';
+  if (empty) empty.hidden = !(eventCount === 0 && sessionCount === 0 && vectorCount === 0);
 }
 
 function setupEventListeners() {
@@ -108,6 +140,19 @@ function setupEventListeners() {
       await loadUserPromptsView();
     });
   }
+
+  const sessionRefresh = document.getElementById('session-refresh');
+  if (sessionRefresh) {
+    sessionRefresh.addEventListener('click', async () => {
+      await loadSessionInspectorView();
+    });
+  }
+  document.querySelectorAll('#session-snapshot-tabs .sort-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      setSessionSnapshotTab(btn.dataset.sessionSnapshotTab || 'overview');
+    });
+  });
+
   const userPromptPrev = document.getElementById('user-prompt-prev');
   if (userPromptPrev) {
     userPromptPrev.addEventListener('click', async () => {
@@ -131,6 +176,8 @@ function setupEventListeners() {
   if (projectSelect) {
     projectSelect.addEventListener('change', async (e) => {
       state.currentProject = e.target.value;
+      if (window.localStorage) window.localStorage.setItem('cml.dashboard.project', state.currentProject || '');
+      updateProjectScopeUI();
       await refreshData();
       if (state.chartInstance) {
         state.chartInstance.destroy();
@@ -143,9 +190,10 @@ function setupEventListeners() {
       await initActivityChart();
       // Reload current view if not overview
       if (state.currentView !== 'overview') {
-        switchView(state.currentView);
+        await switchView(state.currentView, { forceReload: true });
       }
       updateChatProjectScope();
+      updateProjectScopeUI();
     });
   }
 
@@ -160,6 +208,20 @@ function setupEventListeners() {
     vectorHealthRecoverBtn.addEventListener('click', recoverVectorHealth);
   }
 
+  const playgroundRunBtn = document.getElementById('playground-run-btn');
+  if (playgroundRunBtn) {
+    playgroundRunBtn.addEventListener('click', runPlaygroundDryRun);
+  }
+  const playgroundQuery = document.getElementById('playground-query');
+  if (playgroundQuery) {
+    playgroundQuery.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        runPlaygroundDryRun();
+      }
+    });
+  }
+
   // Stat cards
   document.querySelectorAll('.stat-card[data-stat]').forEach(card => {
     card.addEventListener('click', () => {

package/dist/ui/assets/js/disclosure.js

@@ -22,6 +22,65 @@ function renderDisclosureStatus(message, isError = false) {
   status.style.color = isError ? 'var(--error)' : 'var(--text-muted)';
 }
 
+function disclosureString(value) {
+  if (value === undefined || value === null || value === '') return null;
+  return String(value);
+}
+
+function normalizeDisclosureEventId(value) {
+  const raw = disclosureString(value);
+  if (!raw) return null;
+  return raw.startsWith('event:') ? raw.slice('event:'.length) : raw;
+}
+
+function getDisclosureJumpTarget(...candidates) {
+  for (const candidate of candidates) {
+    const target = getDisclosureJumpTargetFromCandidate(candidate);
+    if (target) return target;
+  }
+  return null;
+}
+
+function getDisclosureJumpTargetFromCandidate(candidate) {
+  if (!candidate || typeof candidate !== 'object') return null;
+
+  const nestedCandidates = [];
+  if (candidate.primaryEvent) nestedCandidates.push(candidate.primaryEvent);
+  if (candidate.rawEvent) nestedCandidates.push(candidate.rawEvent);
+  if (candidate.event) nestedCandidates.push(candidate.event);
+  if (Array.isArray(candidate.rawEvents)) nestedCandidates.push(...candidate.rawEvents);
+  for (const nested of nestedCandidates) {
+    const target = getDisclosureJumpTargetFromCandidate(nested);
+    if (target) return target;
+  }
+
+  const metadata = candidate.metadata && typeof candidate.metadata === 'object' ? candidate.metadata : {};
+  const sessionId = disclosureString(candidate.sessionId || metadata.sessionId);
+  if (!sessionId) return null;
+
+  const eventId = normalizeDisclosureEventId(
+    candidate.eventId ||
+    metadata.eventId ||
+    candidate.id ||
+    candidate.sourceRef ||
+    (Array.isArray(candidate.eventIds) ? candidate.eventIds[0] : null)
+  );
+  return { sessionId, eventId };
+}
+
+function disclosureAttrArg(value) {
+  if (typeof jsAttrArg === 'function') return jsAttrArg(value);
+  return escapeHtml(JSON.stringify(String(value ?? '')));
+}
+
+function renderDisclosureJumpButton(target, label = 'Open in Sessions') {
+  if (!target?.sessionId) return '';
+  return `
+    <button type="button" class="inline-action-btn disclosure-session-jump" onclick="event.stopPropagation(); jumpToSession(${disclosureAttrArg(target.sessionId)}, ${disclosureAttrArg(target.eventId || '')})">
+      <i class="ri-corner-right-up-line"></i> ${escapeHtml(label)}
+    </button>`;
+}
+
 async function handleDisclosureSearch() {
   const input = document.getElementById('disclosure-search-input');
   const query = (input?.value || '').trim();
@@ -35,6 +94,7 @@ async function handleDisclosureSearch() {
   state.isDisclosureLoading = true;
   state.disclosureResults = [];
   state.disclosureMeta = null;
+  state.disclosureQuery = query;
   state.disclosureSelectedId = null;
   state.disclosureExpansion = null;
   state.disclosureSource = null;
@@ -61,10 +121,14 @@ async function handleDisclosureSearch() {
 
     state.disclosureResults = data.results || [];
     state.disclosureMeta = data.meta || null;
+    state.isDisclosureLoading = false;
+    if (button) button.disabled = false;
     renderDisclosureStatus(`Search layer returned ${state.disclosureResults.length} result(s). Click a result to expand/source.`);
     renderDisclosureResults();
   } catch (error) {
     state.disclosureResults = [];
+    state.isDisclosureLoading = false;
+    if (button) button.disabled = false;
     renderDisclosureStatus(error.message || 'Disclosure search failed', true);
     renderDisclosureResults();
   } finally {
@@ -96,27 +160,39 @@ function renderDisclosureResults() {
       · fallback=${meta.fallbackApplied ? 'yes' : 'no'}
     </div>`;
 
+  const query = state.disclosureQuery || document.getElementById('disclosure-search-input')?.value || '';
   const resultHtml = state.disclosureResults.map((r, idx) => {
     const active = r.id === state.disclosureSelectedId ? ' active' : '';
     const score = Number(r.score || 0).toFixed(3);
     const reasons = (r.reasons || []).map(reason => `<span class="disclosure-chip">${escapeHtml(reason)}</span>`).join('');
     const provenance = renderDisclosureProvenance(r.metadata, ['sourceProjectHash', 'sourceEntryId', 'topics']);
+    const scope = getDisclosureScopeLabel(r);
+    const jumpTarget = getDisclosureJumpTarget(r);
+    const jumpButton = renderDisclosureJumpButton(jumpTarget);
     return `
-      <button class="disclosure-result${active}" data-result-id="${escapeHtml(r.id)}">
+      <div class="disclosure-result${active}" data-result-id="${escapeHtml(r.id)}" role="button" tabindex="0">
         <div class="disclosure-result-head">
           <span class="event-type-badge">#${idx + 1} ${escapeHtml(r.resultType || 'result')}</span>
+          <span class="disclosure-scope-pill">${escapeHtml(scope)}</span>
           <span class="disclosure-score">score ${score}</span>
         </div>
         <div class="disclosure-title">${escapeHtml(r.title || r.sourceRef || r.id)}</div>
-        <div class="disclosure-snippet">${escapeHtml(r.snippet || '(no snippet)')}</div>
+        <div class="disclosure-snippet" title="${escapeHtml(r.snippet || '(no snippet)')}">${highlightDisclosureText(r.snippet || '(no snippet)', query)}</div>
         ${provenance}
-        <div class="disclosure-reasons">${reasons || '<span class="disclosure-chip">no_reason</span>'}</div>
-      </button>`;
+        <div class="disclosure-rank-explain"><strong>Why this ranked</strong>${reasons || '<span class="disclosure-chip">no_reason</span>'}</div>
+        <div class="disclosure-result-cta"><span>Inspect evidence <i class="ri-arrow-right-line"></i></span>${jumpButton}</div>
+      </div>`;
   }).join('');
 
   container.innerHTML = metaHtml + resultHtml;
   container.querySelectorAll('.disclosure-result').forEach(btn => {
-    btn.addEventListener('click', () => loadDisclosureDrilldown(btn.dataset.resultId));
+    const openResult = () => loadDisclosureDrilldown(btn.dataset.resultId);
+    btn.addEventListener('click', openResult);
+    btn.addEventListener('keydown', (event) => {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      event.preventDefault();
+      openResult();
+    });
   });
 }
 
@@ -171,7 +247,7 @@ function renderDisclosureDrilldown(isLoading = false, message = null, isError =
   const surrounding = (expansion.surroundingFacts || []).map(f => `
     <div class="disclosure-context-item">
       <span class="event-type-badge">${escapeHtml(f.resultType || 'fact')}</span>
-      <span>${escapeHtml(f.snippet || f.title || f.id || '')}</span>
+      <span>${escapeHtml(buildSafeDisclosurePreview(f.snippet || f.title || f.id || ''))}</span>
     </div>`).join('') || '<div class="disclosure-empty compact">No surrounding facts.</div>';
 
   const related = (expansion.relatedSources || []).map(s => `
@@ -183,33 +259,105 @@ function renderDisclosureDrilldown(isLoading = false, message = null, isError =
   const rawEvent = source?.primaryEvent || source?.rawEvents?.[0] || source?.rawEvent || source?.event || null;
   const isSharedSource = source?.sourceType === 'shared_troubleshooting';
   const sourcePreview = rawEvent
-    ? `${rawEvent.eventType || rawEvent.type || 'event'} · ${rawEvent.timestamp || ''}\n${rawEvent.content || rawEvent.preview || ''}`
+    ? buildSafeSourcePreview(rawEvent)
     : isSharedSource
       ? 'No local raw events for this shared source.'
       : (source ? JSON.stringify(source, null, 2) : (message || 'Source layer returned no raw event.'));
+  const sourceSafetyNote = rawEvent && hasCompactionBoilerplate(rawEvent.content || rawEvent.preview || '')
+    ? '<div class="snapshot-note">Context compaction boilerplate hidden from the default evidence preview.</div>'
+    : '';
   const sourceProvenance = source?.metadata
     ? renderDisclosureProvenance(source.metadata, ['sourceProjectHash', 'sourceEntryId', 'topics', 'rootCause', 'solution', 'symptoms', 'confidence', 'usageCount'])
     : '';
   const sourceProvenanceBlock = sourceProvenance
     ? `<div class="modal-section-title">${isSharedSource ? 'Shared source provenance' : 'Source metadata'}</div>${sourceProvenance}`
     : '';
+  const sourceJumpButton = renderDisclosureJumpButton(
+    getDisclosureJumpTarget(source, rawEvent, expansion.target),
+    'Open in Sessions'
+  );
 
   container.innerHTML = `
+    <div class="disclosure-stepper" aria-label="Search → Expand → Source">
+      <span class="active">1 Search result</span>
+      <span class="active">2 Expanded context</span>
+      <span class="active">3 Source evidence</span>
+    </div>
     <div class="disclosure-layer">
-      <div class="modal-section-title">Expand layer</div>
-      <div class="modal-content-block">${escapeHtml(expansion.expandedContext || expansion.target?.snippet || '')}</div>
+      <div class="modal-section-title">Search result</div>
+      <div class="modal-content-block">${escapeHtml(expansion.target?.title || expansion.target?.snippet || state.disclosureSelectedId || '')}</div>
+      <div class="modal-section-title">Expanded context</div>
+      <div class="modal-content-block">${escapeHtml(buildSafeDisclosurePreview(expansion.expandedContext || expansion.target?.snippet || ''))}</div>
       <div class="modal-section-title">Surrounding context</div>
       <div class="disclosure-context-list">${surrounding}</div>
       <div class="modal-section-title">Related sources</div>
       <div class="disclosure-reasons">${related}</div>
     </div>
     <div class="disclosure-layer">
-      <div class="modal-section-title">Source layer</div>
+      <div class="modal-section-title">Source evidence</div>
+      <div class="disclosure-safe-label">Safe preview</div>
       <div class="modal-content-block">${escapeHtml(sourcePreview)}</div>
+      ${sourceJumpButton}
+      ${sourceSafetyNote}
+      ${rawEvent ? '<button class="sort-btn" type="button" disabled title="Raw transcript and metadata are intentionally hidden in this dashboard panel.">Show raw/meta text</button>' : ''}
       ${sourceProvenanceBlock}
     </div>`;
 }
 
+function getDisclosureScopeLabel(result) {
+  const id = String(result?.id || result?.sourceRef || '');
+  if (id.startsWith('shared:') || String(result?.sourceRef || '').startsWith('shared:')) return 'Shared';
+  if (result?.metadata?.sourceProjectHash) return 'Project-local';
+  return state.currentProject ? 'Project-local' : 'Global';
+}
+
+function escapeRegExp(value) {
+  return String(value).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function highlightDisclosureText(value, query) {
+  let html = escapeHtml(String(value || ''));
+  const terms = String(query || '')
+    .split(/\s+/)
+    .map(term => term.trim())
+    .filter(term => term.length >= 2)
+    .slice(0, 5);
+  for (const term of terms) {
+    const escapedTerm = escapeRegExp(escapeHtml(term));
+    html = html.replace(new RegExp(`(${escapedTerm})`, 'ig'), '<mark>$1</mark>');
+  }
+  return html;
+}
+
+function hasCompactionBoilerplate(value) {
+  return /CONTEXT COMPACTION|REFERENCE ONLY/i.test(String(value || ''));
+}
+
+function buildSafeDisclosurePreview(value) {
+  const text = String(value || '');
+  if (!hasCompactionBoilerplate(text)) return text;
+  const lines = text.split(/\r?\n/);
+  const safeLines = [];
+  for (const line of lines) {
+    if (hasCompactionBoilerplate(line)) break;
+    safeLines.push(line);
+  }
+  const safeText = safeLines.join('\n').trim();
+  const note = '[context compaction handoff hidden from preview]';
+  return safeText ? `${safeText}\n${note}` : note;
+}
+
+function buildSafeSourcePreview(rawEvent) {
+  const rawContent = String(rawEvent.content || rawEvent.preview || '');
+  const safeLines = rawContent
+    .split(/\r?\n/)
+    .filter(line => !hasCompactionBoilerplate(line))
+    .slice(0, 8);
+  const header = `${rawEvent.eventType || rawEvent.type || 'event'} · ${rawEvent.timestamp || ''}`;
+  const body = safeLines.join('\n').slice(0, 1200);
+  return `${header}\n${body || '(safe preview empty)'}`;
+}
+
 function renderDisclosureProvenance(metadata, allowedKeys = null) {
   if (!metadata) return '';
   const entries = Object.entries(metadata)

package/dist/ui/assets/js/modals.js

@@ -36,7 +36,7 @@ async function openDetailModal(eventId) {
     const ctx = data.context || [];
 
     const eventType = evt.eventType || 'unknown';
-    const typeClass = `type-${eventType.toLowerCase().replace('_', '-')}`;
+    const typeClass = eventTypeBadgeClass(eventType);
     const time = new Date(evt.timestamp).toLocaleString();
     const adherenceBadge = renderAdherenceBadge(evt);
 
@@ -46,8 +46,8 @@ async function openDetailModal(eventId) {
         <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 class="modal-context-item" ${c.id ? `onclick="openDetailModal(${jsAttrArg(c.id)})"` : ''}>
+              <span class="event-type-badge ${eventTypeBadgeClass(c.eventType)}" style="flex-shrink:0;">${escapeHtml(c.eventType || 'event')}</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>
@@ -62,7 +62,7 @@ async function openDetailModal(eventId) {
       <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>
+          <span class="event-type-badge ${typeClass}">${escapeHtml(eventType)}</span>
         </div>
         ${adherenceBadge ? `<div class="modal-meta-item">${adherenceBadge}</div>` : ''}
         <div class="modal-meta-item">
@@ -71,8 +71,13 @@ async function openDetailModal(eventId) {
         </div>
         <div class="modal-meta-item">
           <i class="ri-chat-1-line"></i>
-          Session: ${evt.sessionId ? evt.sessionId.slice(0, 12) + '...' : 'N/A'}
+          Session: ${evt.sessionId ? escapeHtml(evt.sessionId.slice(0, 12)) + '...' : 'N/A'}
         </div>
+        ${evt.sessionId ? `
+          <button type="button" class="inline-action-btn" onclick="jumpToSession(${jsAttrArg(evt.sessionId)}, ${jsAttrArg(evt.id || eventId)})">
+            <i class="ri-corner-right-up-line"></i> Open in Sessions
+          </button>
+        ` : ''}
       </div>
       <div class="modal-section-title">Content</div>
       <div class="modal-content-block">${escapeHtml(evt.content || '(empty)')}</div>
@@ -111,19 +116,28 @@ async function showEventsListModal() {
     }
 
     body.innerHTML = events.map(e => {
-      const typeClass = `type-${(e.eventType || '').toLowerCase().replace('_', '-')}`;
+      const typeClass = eventTypeBadgeClass(e.eventType);
       const adherenceBadge = renderAdherenceBadge(e);
+      const eventArg = jsAttrArg(e.id || '');
+      const sessionArg = jsAttrArg(e.sessionId || '');
       return `
-        <div class="modal-list-item" onclick="openDetailModal('${e.id}')">
+        <div class="modal-list-item" ${e.id ? `onclick="openDetailModal(${eventArg})"` : ''}>
           <div class="modal-list-info">
             <div class="title">
-              <span class="event-type-badge ${typeClass}" style="margin-right:8px;">${e.eventType}</span>
+              <span class="event-type-badge ${typeClass}" style="margin-right:8px;">${escapeHtml(e.eventType || 'event')}</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 class="subtitle">${new Date(e.timestamp).toLocaleString()} | Session: ${escapeHtml((e.sessionId || '').slice(0, 12))}...</div>
+            ${e.sessionId ? `
+              <div class="event-actions">
+                <button type="button" class="inline-action-btn" onclick="event.stopPropagation(); jumpToSession(${sessionArg}, ${eventArg})">
+                  <i class="ri-corner-right-up-line"></i> Open in Sessions
+                </button>
+              </div>
+            ` : ''}
           </div>
-          ${e.accessCount > 0 ? `<div class="modal-list-badge"><i class="ri-eye-line"></i> ${e.accessCount}</div>` : ''}
+          ${e.accessCount > 0 ? `<div class="modal-list-badge"><i class="ri-eye-line"></i> ${formatNumber(e.accessCount)}</div>` : ''}
         </div>
       `;
     }).join('');
@@ -152,12 +166,12 @@ async function showSessionsModal() {
       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-item" onclick="showSessionDetailInModal(${jsAttrArg(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="title"><i class="ri-chat-1-line" style="color:var(--accent-primary); margin-right:6px;"></i>${escapeHtml(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 class="modal-list-badge">${formatNumber(s.eventCount)} events</div>
         </div>
       `;
     }).join('');
@@ -172,7 +186,7 @@ async function showSessionDetailInModal(sessionId) {
   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 res = await fetch(apiUrl(`${API_BASE}/sessions/${encodeURIComponent(sessionId)}`));
     const data = await res.json();
     const session = data.session;
     const events = data.events || [];
@@ -180,7 +194,7 @@ async function showSessionDetailInModal(sessionId) {
 
     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-fingerprint-line"></i>${escapeHtml(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>
@@ -197,17 +211,24 @@ async function showSessionDetailInModal(sessionId) {
       </div>
       <div class="modal-section-title">Events</div>
       ${events.map(e => {
-        const typeClass = `type-${(e.eventType || '').toLowerCase().replace('_', '-')}`;
+        const typeClass = eventTypeBadgeClass(e.eventType);
         const adherenceBadge = renderAdherenceBadge(e);
+        const eventArg = jsAttrArg(e.id || '');
+        const sessionArg = jsAttrArg(e.sessionId || sessionId);
         return `
-          <div class="modal-list-item" onclick="closeAllModals(); openDetailModal('${e.id}')">
+          <div class="modal-list-item" ${e.id ? `onclick="closeAllModals(); openDetailModal(${eventArg})"` : ''}>
             <div class="modal-list-info">
               <div class="title">
-                <span class="event-type-badge ${typeClass}" style="margin-right:8px;">${e.eventType}</span>
+                <span class="event-type-badge ${typeClass}" style="margin-right:8px;">${escapeHtml(e.eventType || 'event')}</span>
                 ${adherenceBadge}
                 ${escapeHtml((e.preview || '').slice(0, 80))}
               </div>
               <div class="subtitle">${new Date(e.timestamp).toLocaleString()}</div>
+              <div class="event-actions">
+                <button type="button" class="inline-action-btn" onclick="event.stopPropagation(); jumpToSession(${sessionArg}, ${eventArg})">
+                  <i class="ri-corner-right-up-line"></i> Open in Sessions
+                </button>
+              </div>
             </div>
           </div>
         `;