claude-memory-layer 1.0.26 → 1.0.28

package/src/apps/dashboard/assets/js/chat.js

@@ -0,0 +1,373 @@
+function loadChatHistory() {
+  try {
+    const raw = localStorage.getItem(CHAT_STORAGE_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch { return []; }
+}
+
+function saveChatHistory(conversations) {
+  try {
+    // Keep last 50 conversations max
+    const trimmed = conversations.slice(-50);
+    localStorage.setItem(CHAT_STORAGE_KEY, JSON.stringify(trimmed));
+  } catch { /* storage full or unavailable */ }
+}
+
+function saveCurrentConversation() {
+  if (state.chatMessages.length === 0) return;
+  const conversations = loadChatHistory();
+  const firstUserMsg = state.chatMessages.find(m => m.role === 'user');
+  const title = firstUserMsg ? firstUserMsg.content.slice(0, 80) : 'Untitled';
+
+  if (state.chatConversationId) {
+    // Update existing
+    const idx = conversations.findIndex(c => c.id === state.chatConversationId);
+    if (idx >= 0) {
+      conversations[idx].messages = [...state.chatMessages];
+      conversations[idx].updatedAt = new Date().toISOString();
+      conversations[idx].title = title;
+    }
+  } else {
+    // Create new
+    state.chatConversationId = 'chat-' + Date.now();
+    conversations.push({
+      id: state.chatConversationId,
+      title,
+      messages: [...state.chatMessages],
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      project: state.currentProject || 'global'
+    });
+  }
+  saveChatHistory(conversations);
+}
+
+function startNewConversation() {
+  saveCurrentConversation();
+  state.chatMessages = [];
+  state.chatConversationId = null;
+
+  const container = document.getElementById('chat-messages');
+  container.innerHTML = `
+    <div class="chat-welcome">
+      <div class="chat-welcome-icon">🧠</div>
+      <div class="chat-welcome-title">Ask about your memories</div>
+      <div class="chat-welcome-text">
+        I can search through your coding sessions, tool usage, and stored knowledge to answer questions.
+      </div>
+    </div>
+  `;
+  switchChatTab('chat');
+}
+
+function loadConversation(id) {
+  const conversations = loadChatHistory();
+  const conv = conversations.find(c => c.id === id);
+  if (!conv) return;
+
+  // Save current first
+  if (state.chatMessages.length > 0 && state.chatConversationId !== id) {
+    saveCurrentConversation();
+  }
+
+  state.chatConversationId = conv.id;
+  state.chatMessages = [...conv.messages];
+
+  // Render messages
+  const container = document.getElementById('chat-messages');
+  container.innerHTML = '';
+  for (const msg of conv.messages) {
+    appendChatMessage(msg.role, msg.content);
+  }
+
+  switchChatTab('chat');
+}
+
+function deleteConversation(id, evt) {
+  evt.stopPropagation();
+  const conversations = loadChatHistory().filter(c => c.id !== id);
+  saveChatHistory(conversations);
+  if (state.chatConversationId === id) {
+    state.chatMessages = [];
+    state.chatConversationId = null;
+    const container = document.getElementById('chat-messages');
+    container.innerHTML = `
+      <div class="chat-welcome">
+        <div class="chat-welcome-icon">🧠</div>
+        <div class="chat-welcome-title">Ask about your memories</div>
+        <div class="chat-welcome-text">
+          I can search through your coding sessions, tool usage, and stored knowledge to answer questions.
+        </div>
+      </div>
+    `;
+  }
+  renderHistoryList();
+}
+
+function renderHistoryList() {
+  const container = document.getElementById('chat-history-view');
+  const conversations = loadChatHistory().reverse(); // newest first
+
+  if (conversations.length === 0) {
+    container.innerHTML = '<div class="chat-history-empty">No conversation history yet.</div>';
+    return;
+  }
+
+  container.innerHTML = conversations.map(conv => {
+    const date = new Date(conv.updatedAt || conv.createdAt);
+    const dateStr = date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    const msgCount = conv.messages.length;
+    const isActive = conv.id === state.chatConversationId;
+    return `
+      <div class="chat-history-item${isActive ? ' active' : ''}" onclick="loadConversation('${conv.id}')"
+           style="${isActive ? 'border-color:var(--accent-primary);background:rgba(123,97,255,0.08);' : ''}">
+        <div class="chat-history-item-title">${escapeHtml(conv.title)}</div>
+        <div class="chat-history-item-meta">
+          <span>${dateStr} &middot; ${msgCount} messages</span>
+          <button class="chat-history-item-delete" onclick="deleteConversation('${conv.id}', event)" title="Delete">
+            <i class="ri-delete-bin-line"></i>
+          </button>
+        </div>
+      </div>
+    `;
+  }).join('');
+}
+
+function switchChatTab(tab) {
+  const msgContainer = document.getElementById('chat-messages');
+  const historyContainer = document.getElementById('chat-history-view');
+  const inputArea = document.querySelector('.chat-input-area');
+
+  document.querySelectorAll('.chat-header-tab').forEach(t => {
+    t.classList.toggle('active', t.dataset.chatTab === tab);
+  });
+
+  if (tab === 'chat') {
+    msgContainer.classList.remove('hidden');
+    historyContainer.classList.remove('active');
+    if (inputArea) inputArea.style.display = '';
+  } else {
+    msgContainer.classList.add('hidden');
+    historyContainer.classList.add('active');
+    if (inputArea) inputArea.style.display = 'none';
+    renderHistoryList();
+  }
+
+  state.chatCurrentTab = tab;
+}
+
+function toggleChatPanel() {
+  if (state.isChatOpen) {
+    closeChatPanel();
+  } else {
+    openChatPanel();
+  }
+}
+
+function openChatPanel() {
+  const panel = document.getElementById('chat-panel');
+  if (panel) {
+    panel.classList.add('open');
+    state.isChatOpen = true;
+    updateChatProjectScope();
+    setTimeout(() => {
+      document.getElementById('chat-input')?.focus();
+    }, 300);
+  }
+}
+
+function closeChatPanel() {
+  const panel = document.getElementById('chat-panel');
+  if (panel) {
+    panel.classList.remove('open');
+    state.isChatOpen = false;
+  }
+  if (state.chatAbortController) {
+    state.chatAbortController.abort();
+    state.chatAbortController = null;
+    state.isChatStreaming = false;
+  }
+  // Auto-save on close
+  saveCurrentConversation();
+}
+
+function updateChatProjectScope() {
+  const el = document.getElementById('chat-project-scope');
+  if (!el) return;
+  if (state.currentProject) {
+    const proj = state.projects.find(p => p.hash === state.currentProject);
+    el.textContent = `Scope: ${proj?.projectName || state.currentProject}`;
+  } else {
+    el.textContent = 'Scope: All (Global)';
+  }
+}
+
+async function sendChatMessage() {
+  const input = document.getElementById('chat-input');
+  const message = input.value.trim();
+  if (!message) return;
+
+  input.value = '';
+  input.style.height = 'auto';
+  document.getElementById('chat-send-btn').disabled = true;
+
+  // Add user message
+  state.chatMessages.push({ role: 'user', content: message });
+  appendChatMessage('user', message);
+
+  // Remove welcome
+  const welcome = document.querySelector('.chat-welcome');
+  if (welcome) welcome.remove();
+
+  // Show loading
+  const loadingEl = appendChatLoading();
+
+  state.isChatStreaming = true;
+  state.chatAbortController = new AbortController();
+
+  try {
+    const response = await fetch(apiUrl(`${API_BASE}/chat`), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        message,
+        history: state.chatMessages.slice(-10)
+      }),
+      signal: state.chatAbortController.signal
+    });
+
+    if (!response.ok) {
+      const err = await response.json().catch(() => ({ error: `HTTP ${response.status}` }));
+      throw new Error(err.error || `Request failed: ${response.status}`);
+    }
+
+    loadingEl.remove();
+    const msgEl = appendChatMessage('assistant', '', true);
+    let fullContent = '';
+
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let sseBuffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      sseBuffer += decoder.decode(value, { stream: true });
+      const lines = sseBuffer.split('\n');
+      sseBuffer = lines.pop() || '';
+
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          const dataStr = line.slice(6);
+          try {
+            const data = JSON.parse(dataStr);
+            if (data.content) {
+              fullContent += data.content;
+              updateChatMessageContent(msgEl, fullContent);
+              scrollChatToBottom();
+            }
+            if (data.error) {
+              fullContent += `\n\n**Error:** ${data.error}`;
+              updateChatMessageContent(msgEl, fullContent);
+            }
+          } catch { /* skip */ }
+        }
+      }
+    }
+
+    msgEl.classList.remove('streaming');
+    if (fullContent) {
+      state.chatMessages.push({ role: 'assistant', content: fullContent });
+    }
+
+    // Auto-save after each response
+    saveCurrentConversation();
+
+  } catch (err) {
+    if (loadingEl.parentNode) loadingEl.remove();
+    if (err.name !== 'AbortError') {
+      appendChatMessage('assistant',
+        `**Error:** ${err.message}\n\nMake sure the Claude CLI is installed and authenticated.`
+      );
+    }
+  } finally {
+    state.isChatStreaming = false;
+    state.chatAbortController = null;
+    const sendBtn = document.getElementById('chat-send-btn');
+    const chatInput = document.getElementById('chat-input');
+    if (sendBtn && chatInput) {
+      sendBtn.disabled = !chatInput.value.trim();
+    }
+  }
+}
+
+function appendChatMessage(role, content, streaming = false) {
+  const container = document.getElementById('chat-messages');
+  const el = document.createElement('div');
+  el.className = `chat-msg ${role}${streaming ? ' streaming' : ''}`;
+
+  if (role === 'assistant') {
+    el.innerHTML = renderMarkdown(content);
+  } else {
+    el.textContent = content;
+  }
+
+  container.appendChild(el);
+  scrollChatToBottom();
+  return el;
+}
+
+function appendChatLoading() {
+  const container = document.getElementById('chat-messages');
+  const el = document.createElement('div');
+  el.className = 'chat-loading';
+  el.innerHTML = `
+    <div class="chat-loading-dot"></div>
+    <div class="chat-loading-dot"></div>
+    <div class="chat-loading-dot"></div>
+  `;
+  container.appendChild(el);
+  scrollChatToBottom();
+  return el;
+}
+
+function updateChatMessageContent(el, content) {
+  el.innerHTML = renderMarkdown(content);
+}
+
+function scrollChatToBottom() {
+  const container = document.getElementById('chat-messages');
+  if (container) container.scrollTop = container.scrollHeight;
+}
+
+function renderMarkdown(text) {
+  if (!text) return '';
+
+  let html = escapeHtml(text);
+
+  // Code blocks
+  html = html.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre><code>$2</code></pre>');
+
+  // Inline code
+  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+  // Bold
+  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+
+  // Italic
+  html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+
+  // Headers
+  html = html.replace(/^### (.+)$/gm, '<div style="font-weight:600;color:var(--text-primary);margin:12px 0 4px;">$1</div>');
+  html = html.replace(/^## (.+)$/gm, '<div style="font-size:15px;font-weight:600;color:var(--text-primary);margin:12px 0 4px;">$1</div>');
+
+  // Lists
+  html = html.replace(/^- (.+)$/gm, '<div style="padding-left:16px;">&#8226; $1</div>');
+
+  // Line breaks
+  html = html.replace(/\n/g, '<br>');
+
+  return html;
+}
+

package/src/apps/dashboard/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);
+}