claude-memory-layer 1.0.27 → 1.0.28

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

@@ -0,0 +1,232 @@
+
+// --- Progressive Disclosure Dashboard ---
+
+function setupDisclosureSearchListeners() {
+  const input = document.getElementById('disclosure-search-input');
+  const button = document.getElementById('disclosure-search-btn');
+  if (button) button.addEventListener('click', handleDisclosureSearch);
+  if (input) {
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        handleDisclosureSearch();
+      }
+    });
+  }
+}
+
+function renderDisclosureStatus(message, isError = false) {
+  const status = document.getElementById('disclosure-status');
+  if (!status) return;
+  status.textContent = message || '';
+  status.style.color = isError ? 'var(--error)' : 'var(--text-muted)';
+}
+
+async function handleDisclosureSearch() {
+  const input = document.getElementById('disclosure-search-input');
+  const query = (input?.value || '').trim();
+  if (!query || state.isDisclosureLoading) return;
+
+  const button = document.getElementById('disclosure-search-btn');
+  const includeShared = document.getElementById('disclosure-include-shared')?.checked || false;
+  const strategy = document.getElementById('disclosure-strategy')?.value || 'auto';
+  const topK = parseInt(document.getElementById('disclosure-topk')?.value || '8', 10);
+
+  state.isDisclosureLoading = true;
+  state.disclosureResults = [];
+  state.disclosureMeta = null;
+  state.disclosureSelectedId = null;
+  state.disclosureExpansion = null;
+  state.disclosureSource = null;
+  if (button) button.disabled = true;
+  renderDisclosureStatus('Searching compact retrieval envelopes...');
+  renderDisclosureResults();
+  renderDisclosureDrilldown();
+
+  try {
+    const res = await fetch(apiUrl(`${API_BASE}/search/disclosure`), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        query,
+        options: {
+          topK: Number.isFinite(topK) ? topK : 8,
+          includeShared,
+          strategy
+        }
+      })
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || 'Disclosure search failed');
+
+    state.disclosureResults = data.results || [];
+    state.disclosureMeta = data.meta || null;
+    renderDisclosureStatus(`Search layer returned ${state.disclosureResults.length} result(s). Click a result to expand/source.`);
+    renderDisclosureResults();
+  } catch (error) {
+    state.disclosureResults = [];
+    renderDisclosureStatus(error.message || 'Disclosure search failed', true);
+    renderDisclosureResults();
+  } finally {
+    state.isDisclosureLoading = false;
+    if (button) button.disabled = false;
+  }
+}
+
+function renderDisclosureResults() {
+  const container = document.getElementById('disclosure-results');
+  if (!container) return;
+
+  if (state.isDisclosureLoading) {
+    container.innerHTML = '<div class="disclosure-empty">Searching...</div>';
+    return;
+  }
+
+  if (!state.disclosureResults.length) {
+    container.innerHTML = '<div class="disclosure-empty">Search memory to inspect compact envelopes, expansion context, and raw sources.</div>';
+    return;
+  }
+
+  const meta = state.disclosureMeta || {};
+  const metaHtml = `
+    <div class="disclosure-meta">
+      total=${escapeHtml(String(meta.total ?? state.disclosureResults.length))}
+      · vector=${meta.usedVector ? 'yes' : 'no'}
+      · keyword=${meta.usedKeyword ? 'yes' : 'no'}
+      · fallback=${meta.fallbackApplied ? 'yes' : 'no'}
+    </div>`;
+
+  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']);
+    return `
+      <button class="disclosure-result${active}" data-result-id="${escapeHtml(r.id)}">
+        <div class="disclosure-result-head">
+          <span class="event-type-badge">#${idx + 1} ${escapeHtml(r.resultType || 'result')}</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>
+        ${provenance}
+        <div class="disclosure-reasons">${reasons || '<span class="disclosure-chip">no_reason</span>'}</div>
+      </button>`;
+  }).join('');
+
+  container.innerHTML = metaHtml + resultHtml;
+  container.querySelectorAll('.disclosure-result').forEach(btn => {
+    btn.addEventListener('click', () => loadDisclosureDrilldown(btn.dataset.resultId));
+  });
+}
+
+async function loadDisclosureDrilldown(resultId) {
+  if (!resultId) return;
+  state.disclosureSelectedId = resultId;
+  state.disclosureExpansion = null;
+  state.disclosureSource = null;
+  renderDisclosureResults();
+  renderDisclosureDrilldown(true);
+
+  try {
+    const encodedId = encodeURIComponent(resultId);
+    const [expandRes, sourceRes] = await Promise.all([
+      fetch(apiUrl(`${API_BASE}/search/disclosure/${encodedId}/expand`, { windowSize: 3 })),
+      fetch(apiUrl(`${API_BASE}/search/disclosure/${encodedId}/source`))
+    ]);
+    const expansion = await expandRes.json();
+    const source = await sourceRes.json();
+    if (!expandRes.ok) throw new Error(expansion.error || 'Expand failed');
+    state.disclosureExpansion = expansion;
+    state.disclosureSource = sourceRes.ok ? source : null;
+    renderDisclosureDrilldown(false, sourceRes.ok ? null : (source.error || 'Source not found'));
+  } catch (error) {
+    renderDisclosureDrilldown(false, error.message || 'Failed to load drilldown', true);
+  }
+}
+
+function renderDisclosureDrilldown(isLoading = false, message = null, isError = false) {
+  const container = document.getElementById('disclosure-drilldown');
+  if (!container) return;
+  if (isLoading) {
+    container.innerHTML = '<div class="disclosure-empty">Loading expand/source layers...</div>';
+    return;
+  }
+  if (message && isError) {
+    container.innerHTML = `<div class="disclosure-empty" style="color:var(--error);">${escapeHtml(message)}</div>`;
+    return;
+  }
+  if (!state.disclosureSelectedId) {
+    container.innerHTML = '<div class="disclosure-empty">No result selected.</div>';
+    return;
+  }
+
+  const expansion = state.disclosureExpansion;
+  const source = state.disclosureSource;
+  if (!expansion) {
+    container.innerHTML = '<div class="disclosure-empty">Expansion not loaded yet.</div>';
+    return;
+  }
+
+  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>
+    </div>`).join('') || '<div class="disclosure-empty compact">No surrounding facts.</div>';
+
+  const related = (expansion.relatedSources || []).map(s => `
+    <div class="disclosure-source-ref">
+      <span class="disclosure-chip">${escapeHtml(s.sourceRef)} · ${escapeHtml(s.sourceType || 'source')}</span>
+      ${renderDisclosureProvenance(s.metadata, ['sourceProjectHash', 'sourceEntryId', 'topics'])}
+    </div>`).join('') || '<span class="disclosure-chip">no source refs</span>';
+
+  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 || ''}`
+    : isSharedSource
+      ? 'No local raw events for this shared source.'
+      : (source ? JSON.stringify(source, null, 2) : (message || 'Source layer returned no raw event.'));
+  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}`
+    : '';
+
+  container.innerHTML = `
+    <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">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-content-block">${escapeHtml(sourcePreview)}</div>
+      ${sourceProvenanceBlock}
+    </div>`;
+}
+
+function renderDisclosureProvenance(metadata, allowedKeys = null) {
+  if (!metadata) return '';
+  const entries = Object.entries(metadata)
+    .filter(([key, value]) => value !== undefined && value !== null && (!allowedKeys || allowedKeys.includes(key)));
+  if (!entries.length) return '';
+  return `
+    <div class="disclosure-provenance">
+      ${entries.map(([key, value]) => `
+        <div class="disclosure-provenance-row">
+          <span class="disclosure-provenance-key">${escapeHtml(key)}</span>
+          <span class="disclosure-provenance-value">${escapeHtml(formatDisclosureMetadataValue(value))}</span>
+        </div>`).join('')}
+    </div>`;
+}
+
+function formatDisclosureMetadataValue(value) {
+  if (Array.isArray(value)) return value.join(', ');
+  if (value && typeof value === 'object') return JSON.stringify(value);
+  return String(value);
+}

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

@@ -0,0 +1,298 @@
+function openModal(modalId) {
+  const modal = document.getElementById(modalId);
+  if (modal) {
+    modal.style.display = 'flex';
+    document.body.style.overflow = 'hidden';
+  }
+}
+
+function closeModal(modalId) {
+  const modal = document.getElementById(modalId);
+  if (modal) {
+    modal.style.display = 'none';
+    document.body.style.overflow = '';
+  }
+}
+
+function closeAllModals() {
+  document.querySelectorAll('.modal-overlay').forEach(m => {
+    m.style.display = 'none';
+  });
+  document.body.style.overflow = '';
+}
+
+// --- Detail Modal ---
+
+async function openDetailModal(eventId) {
+  const body = document.getElementById('detail-modal-body');
+  body.innerHTML = '<div style="text-align:center; padding:40px; color:var(--text-muted);"><i class="ri-loader-4-line" style="font-size:24px; animation: spin 1s linear infinite;"></i><br>Loading event details...</div>';
+  openModal('detail-modal');
+
+  try {
+    const res = await fetch(apiUrl(`${API_BASE}/events/${eventId}`));
+    if (!res.ok) throw new Error('Event not found');
+    const data = await res.json();
+    const evt = data.event;
+    const ctx = data.context || [];
+
+    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) {
+      contextHtml = `
+        <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 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>
+              </div>
+            </div>
+          `).join('')}
+        </div>
+      `;
+    }
+
+    body.innerHTML = `
+      <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>
+        </div>
+        ${adherenceBadge ? `<div class="modal-meta-item">${adherenceBadge}</div>` : ''}
+        <div class="modal-meta-item">
+          <i class="ri-time-line"></i>
+          ${time}
+        </div>
+        <div class="modal-meta-item">
+          <i class="ri-chat-1-line"></i>
+          Session: ${evt.sessionId ? evt.sessionId.slice(0, 12) + '...' : 'N/A'}
+        </div>
+      </div>
+      <div class="modal-section-title">Content</div>
+      <div class="modal-content-block">${escapeHtml(evt.content || '(empty)')}</div>
+      ${contextHtml}
+    `;
+  } catch (error) {
+    body.innerHTML = `<div style="text-align:center; padding:40px; color:var(--error);">Failed to load event: ${escapeHtml(error.message)}</div>`;
+  }
+}
+
+// --- Stat Card Click Handlers ---
+
+function handleStatClick(statType) {
+  switch (statType) {
+    case 'events': showEventsListModal(); break;
+    case 'sessions': showSessionsModal(); break;
+    case 'shared': showSharedModal(); break;
+    case 'vectors': showVectorsModal(); break;
+  }
+}
+
+async function showEventsListModal() {
+  document.getElementById('list-modal-title').textContent = 'Total Events';
+  const body = document.getElementById('list-modal-body');
+  body.innerHTML = '<div style="text-align:center; padding:40px; color:var(--text-muted);">Loading events...</div>';
+  openModal('list-modal');
+
+  try {
+    const res = await fetch(apiUrl(`${API_BASE}/events`, { limit: 50 }));
+    const data = await res.json();
+    const events = data.events || [];
+
+    if (events.length === 0) {
+      body.innerHTML = '<div class="modal-list-empty">No events found</div>';
+      return;
+    }
+
+    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>
+          </div>
+          ${e.accessCount > 0 ? `<div class="modal-list-badge"><i class="ri-eye-line"></i> ${e.accessCount}</div>` : ''}
+        </div>
+      `;
+    }).join('');
+  } catch (error) {
+    body.innerHTML = `<div class="modal-list-empty">Failed to load events</div>`;
+  }
+}
+
+async function showSessionsModal() {
+  document.getElementById('list-modal-title').textContent = 'Active Sessions';
+  const body = document.getElementById('list-modal-body');
+  body.innerHTML = '<div style="text-align:center; padding:40px; color:var(--text-muted);">Loading sessions...</div>';
+  openModal('list-modal');
+
+  try {
+    const res = await fetch(apiUrl(`${API_BASE}/sessions`, { pageSize: 50 }));
+    const data = await res.json();
+    const sessions = data.sessions || [];
+
+    if (sessions.length === 0) {
+      body.innerHTML = '<div class="modal-list-empty">No sessions found</div>';
+      return;
+    }
+
+    body.innerHTML = sessions.map(s => {
+      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-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="subtitle">Started: ${started} | Last: ${lastEvent}</div>
+          </div>
+          <div class="modal-list-badge">${s.eventCount} events</div>
+        </div>
+      `;
+    }).join('');
+  } catch (error) {
+    body.innerHTML = `<div class="modal-list-empty">Failed to load sessions</div>`;
+  }
+}
+
+async function showSessionDetailInModal(sessionId) {
+  document.getElementById('list-modal-title').textContent = 'Session Detail';
+  const body = document.getElementById('list-modal-body');
+  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 data = await res.json();
+    const session = data.session;
+    const events = data.events || [];
+    const stats = data.stats || {};
+
+    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-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>
+      <div style="display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap;">
+        <div style="padding:10px 16px; background:rgba(59,130,246,0.1); border-radius:8px; font-size:13px;">
+          <span style="color:#60A5FA; font-weight:600;">${stats.user_prompt || 0}</span> <span style="color:var(--text-muted);">prompts</span>
+        </div>
+        <div style="padding:10px 16px; background:rgba(16,185,129,0.1); border-radius:8px; font-size:13px;">
+          <span style="color:#34D399; font-weight:600;">${stats.agent_response || 0}</span> <span style="color:var(--text-muted);">responses</span>
+        </div>
+        <div style="padding:10px 16px; background:rgba(245,158,11,0.1); border-radius:8px; font-size:13px;">
+          <span style="color:#FBBF24; font-weight:600;">${stats.tool_observation || 0}</span> <span style="color:var(--text-muted);">tools</span>
+        </div>
+      </div>
+      <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>
+            </div>
+          </div>
+        `;
+      }).join('')}
+    `;
+  } catch (error) {
+    body.innerHTML = `<div class="modal-list-empty">Failed to load session</div>`;
+  }
+}
+
+function showSharedModal() {
+  document.getElementById('list-modal-title').textContent = 'Shared Items';
+  const body = document.getElementById('list-modal-body');
+  const s = state.sharedStats || {};
+
+  const items = [
+    { icon: '🔧', label: 'Troubleshooting', count: s.troubleshooting || 0, color: '#60A5FA' },
+    { icon: '✨', label: 'Best Practices', count: s.bestPractices || 0, color: '#34D399' },
+    { icon: '⚠️', label: 'Common Errors', count: s.commonErrors || 0, color: '#FBBF24' }
+  ];
+
+  const total = items.reduce((a, b) => a + b.count, 0);
+  const lastUpdated = s.lastUpdated ? new Date(s.lastUpdated).toLocaleString() : 'N/A';
+
+  body.innerHTML = `
+    <div style="text-align:center; margin-bottom:24px;">
+      <div style="font-size:48px; font-weight:700; background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent;">${formatNumber(total)}</div>
+      <div style="font-size:13px; color:var(--text-muted); margin-top:4px;">Total shared items</div>
+    </div>
+    ${items.map(item => `
+      <div class="modal-list-item" style="cursor:default;">
+        <div class="modal-list-info">
+          <div class="title">${item.icon} ${item.label}</div>
+          <div class="subtitle">Cross-project knowledge items</div>
+        </div>
+        <div class="modal-list-badge" style="background:${item.color}22; color:${item.color};">${formatNumber(item.count)}</div>
+      </div>
+    `).join('')}
+    <div style="text-align:center; margin-top:20px; font-size:12px; color:var(--text-muted);">
+      Total usage: ${formatNumber(s.totalUsageCount || 0)} | Last updated: ${lastUpdated}
+    </div>
+  `;
+
+  openModal('list-modal');
+}
+
+function showVectorsModal() {
+  document.getElementById('list-modal-title').textContent = 'Vector Nodes';
+  const body = document.getElementById('list-modal-body');
+  const stats = state.stats || {};
+  const vectorCount = stats.storage?.vectorCount || 0;
+  const memory = stats.memory || {};
+
+  body.innerHTML = `
+    <div style="text-align:center; margin-bottom:24px;">
+      <div style="font-size:48px; font-weight:700; background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent;">${formatNumber(vectorCount)}</div>
+      <div style="font-size:13px; color:var(--text-muted); margin-top:4px;">Total vector nodes</div>
+    </div>
+    <div class="modal-list-item" style="cursor:default;">
+      <div class="modal-list-info">
+        <div class="title"><i class="ri-node-tree" style="color:var(--accent-primary); margin-right:6px;"></i>Embedded Vectors</div>
+        <div class="subtitle">Semantic search index entries</div>
+      </div>
+      <div class="modal-list-badge">${formatNumber(vectorCount)}</div>
+    </div>
+    <div class="modal-list-item" style="cursor:default;">
+      <div class="modal-list-info">
+        <div class="title"><i class="ri-cpu-line" style="color:var(--accent-secondary); margin-right:6px;"></i>Heap Used</div>
+        <div class="subtitle">Current memory usage</div>
+      </div>
+      <div class="modal-list-badge" style="background:rgba(0,240,255,0.1); color:var(--accent-secondary);">${memory.heapUsed || 0} MB</div>
+    </div>
+    <div class="modal-list-item" style="cursor:default;">
+      <div class="modal-list-info">
+        <div class="title"><i class="ri-hard-drive-2-line" style="color:var(--warning); margin-right:6px;"></i>Heap Total</div>
+        <div class="subtitle">Allocated memory</div>
+      </div>
+      <div class="modal-list-badge" style="background:rgba(254,176,25,0.1); color:var(--warning);">${memory.heapTotal || 0} MB</div>
+    </div>
+  `;
+
+  openModal('list-modal');
+}
+
+// =============================================
+// Sidebar Navigation
+// =============================================
+