claude-memory-layer 1.0.19 → 1.0.21

package/src/ui/app.js

@@ -14,6 +14,10 @@ const state = {
   retrievalTraces: null,
   adherenceSummary: null,
   adherenceWindow: '24h',
+  userPromptSearchQuery: '',
+  userPromptItems: [],
+  userPromptPage: 1,
+  userPromptPageSize: 30,
   currentLevel: 'L0',
   currentSort: 'recent',
   currentView: 'overview',
@@ -149,6 +153,39 @@ function setupEventListeners() {
     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) {
@@ -1197,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;
   }
 }
@@ -1430,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>
@@ -363,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">

package/src/ui/style.css

@@ -502,8 +502,11 @@ body {
 }
 
 .type-user { background: rgba(59, 130, 246, 0.2); color: #60A5FA; }
+.type-user-prompt { background: rgba(59, 130, 246, 0.2); color: #60A5FA; }
 .type-agent { background: rgba(16, 185, 129, 0.2); color: #34D399; }
+.type-agent-response { background: rgba(16, 185, 129, 0.2); color: #34D399; }
 .type-tool { background: rgba(245, 158, 11, 0.2); color: #FBBF24; }
+.type-tool-observation { background: rgba(245, 158, 11, 0.2); color: #FBBF24; }
 .type-system { background: rgba(139, 92, 246, 0.2); color: #A78BFA; }
 
 .event-time {
@@ -597,6 +600,10 @@ body {
   color: var(--accent-primary);
   font-weight: 600;
 }
+.sort-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
 
 /* Access Badge */
 .access-badge {