opencode-mem 2.3.6 → 2.4.0

package/dist/web/app.js

@@ -115,12 +115,14 @@ function renderMemories() {
     return;
   }
 
-  container.innerHTML = state.memories
-    .map((item) => {
-      if (item.type === "prompt") {
-        return renderPromptCard(item);
+  container.innerHTML = groupMemories(state.memories)
+    .map((group) => {
+      if (group.isPair) {
+        return renderCombinedCard(group);
+      } else if (group.type === "prompt") {
+        return renderPromptCard(group.item);
       } else {
-        return renderMemoryCard(item);
+        return renderMemoryCard(group.item);
       }
     })
     .join("");
@@ -132,6 +134,82 @@ function renderMemories() {
   lucide.createIcons();
 }
 
+function groupMemories(items) {
+  const map = new Map();
+  const pairs = [];
+  const processed = new Set();
+
+  items.forEach((item) => map.set(item.id, item));
+
+  items.forEach((item) => {
+    if (processed.has(item.id)) return;
+
+    if (item.type === "memory" && item.linkedPromptId && map.has(item.linkedPromptId)) {
+      const prompt = map.get(item.linkedPromptId);
+      pairs.push({ isPair: true, memory: item, prompt: prompt });
+      processed.add(item.id);
+      processed.add(prompt.id);
+    } else if (item.type === "prompt" && item.linkedMemoryId && map.has(item.linkedMemoryId)) {
+      const memory = map.get(item.linkedMemoryId);
+      pairs.push({ isPair: true, memory: memory, prompt: item });
+      processed.add(item.id);
+      processed.add(memory.id);
+    } else {
+      pairs.push({ isPair: false, type: item.type, item: item });
+      processed.add(item.id);
+    }
+  });
+
+  return pairs.sort((a, b) => {
+    const timeA = a.isPair ? a.memory.createdAt : a.item.createdAt;
+    const timeB = b.isPair ? b.memory.createdAt : b.item.createdAt;
+    return new Date(timeB) - new Date(timeA);
+  });
+}
+
+function renderCombinedCard(pair) {
+  const { memory, prompt } = pair;
+  const isSelected = state.selectedMemories.has(memory.id);
+  const similarityHtml =
+    memory.similarity !== undefined
+      ? `<span class="similarity-score">${Math.round(memory.similarity * 100)}%</span>`
+      : "";
+
+  return `
+    <div class="combined-card ${isSelected ? "selected" : ""}" data-id="${memory.id}">
+      <div class="combined-prompt-section">
+        <div class="combined-header">
+          <span class="badge badge-prompt">USER PROMPT</span>
+          <span class="prompt-date">${formatDate(prompt.createdAt)}</span>
+        </div>
+        <div class="prompt-content">${escapeHtml(prompt.content)}</div>
+      </div>
+      
+      <div class="combined-divider">
+        <i data-lucide="arrow-down" class="divider-icon"></i>
+      </div>
+
+      <div class="combined-memory-section">
+        <div class="memory-header">
+          <div class="meta">
+            <input type="checkbox" class="memory-checkbox" data-id="${memory.id}" ${isSelected ? "checked" : ""} />
+            <span class="badge badge-memory">MEMORY</span>
+            ${memory.memoryType ? `<span class="badge badge-type">${memory.memoryType}</span>` : ""}
+            ${similarityHtml}
+            <span class="memory-display-name">${escapeHtml(memory.displayName || memory.id)}</span>
+          </div>
+          <div class="memory-actions">
+            <button class="btn-delete" onclick="deleteMemoryWithLink('${memory.id}', true)">
+              <i data-lucide="trash-2" class="icon"></i> Delete Pair
+            </button>
+          </div>
+        </div>
+        <div class="memory-content markdown-content">${renderMarkdown(memory.content)}</div>
+      </div>
+    </div>
+  `;
+}
+
 function renderPromptCard(prompt) {
   const isLinked = !!prompt.linkedMemoryId;
   const isSelected = state.selectedMemories.has(prompt.id);
@@ -166,14 +244,17 @@ function renderMemoryCard(memory) {
   const isSelected = state.selectedMemories.has(memory.id);
   const isPinned = memory.isPinned || false;
   const isLinked = !!memory.linkedPromptId;
-const similarityHtml =
+  const similarityHtml =
     memory.similarity !== undefined
       ? `<span class="similarity-score">${memory.similarity}%</span>`
       : "";
 
   let displayInfo = memory.displayName || memory.id;
   if (memory.projectPath) {
-    const pathParts = memory.projectPath.replace(/\\/g, "/").split("/").filter((p) => p);
+    const pathParts = memory.projectPath
+      .replace(/\\/g, "/")
+      .split("/")
+      .filter((p) => p);
     displayInfo = pathParts[pathParts.length - 1] || memory.projectPath;
   }
 
@@ -720,129 +801,130 @@ function renderUserProfile() {
   const preferences = data.preferences || [];
   const patterns = data.patterns || [];
   const workflows = data.workflows || [];
-  const skillLevel = data.skillLevel || {};
 
   container.innerHTML = `
     <div class="profile-header">
       <div class="profile-info">
         <h3>${profile.displayName || profile.userId}</h3>
-        <p class="profile-meta">
-          <span>Version: ${profile.version}</span>
-          <span class="separator">|</span>
-          <span>Analyzed: ${profile.totalPromptsAnalyzed} prompts</span>
-          <span class="separator">|</span>
-          <span>Updated: ${formatDate(profile.lastAnalyzedAt)}</span>
-        </p>
+        <div class="profile-stats">
+          <div class="stat-pill">
+            <span class="label">VERSION</span>
+            <span class="value">${profile.version}</span>
+          </div>
+          <div class="stat-pill">
+            <span class="label">PROMPTS</span>
+            <span class="value">${profile.totalPromptsAnalyzed}</span>
+          </div>
+          <div class="stat-pill">
+            <span class="label">LAST UPDATED</span>
+            <span class="value">${formatDate(profile.lastAnalyzedAt)}</span>
+          </div>
+        </div>
       </div>
-      <button id="view-changelog-btn" class="btn-secondary">
-        <i data-lucide="history" class="icon"></i> Version History
+      <button id="view-changelog-btn" class="btn-secondary compact">
+        <i data-lucide="history" class="icon"></i> History
       </button>
     </div>
 
-    <div class="profile-section">
-      <h4><i data-lucide="heart" class="icon"></i> Preferences (${preferences.length})</h4>
-      ${
-        preferences.length === 0
-          ? '<p class="empty-text">No preferences learned yet</p>'
-          : `
-        <div class="preferences-list">
-          ${preferences
-            .map(
-              (p) => `
-            <div class="preference-item">
-              <div class="preference-header">
-                <span class="preference-name">${escapeHtml(p.description)}</span>
-                <span class="confidence-badge">${Math.round(p.confidence * 100)}%</span>
-              </div>
-              <div class="confidence-bar">
-                <div class="confidence-fill" style="width: ${p.confidence * 100}%"></div>
+    <div class="dashboard-grid">
+      <div class="dashboard-section preferences-section">
+        <h4><i data-lucide="heart" class="icon"></i> PREFERENCES <span class="count">${preferences.length}</span></h4>
+        ${
+          preferences.length === 0
+            ? '<p class="empty-text">No preferences learned yet</p>'
+            : `
+          <div class="cards-grid">
+            ${preferences
+              .sort((a, b) => b.confidence - a.confidence)
+              .map(
+                (p) => `
+              <div class="compact-card preference-card">
+                <div class="card-top">
+                  <span class="category-tag">${escapeHtml(p.category)}</span>
+                  <div class="confidence-ring" style="--p:${Math.round(p.confidence * 100)}">
+                    <span>${Math.round(p.confidence * 100)}%</span>
+                  </div>
+                </div>
+                <div class="card-body">
+                  <p class="card-text">${escapeHtml(p.description)}</p>
+                </div>
+                ${
+                  p.evidence && p.evidence.length > 0
+                    ? `
+                <div class="card-footer">
+                  <span class="evidence-toggle" title="${escapeHtml(Array.isArray(p.evidence) ? p.evidence.join("\n") : p.evidence)}">
+                    <i data-lucide="info" class="icon-xs"></i> ${Array.isArray(p.evidence) ? p.evidence.length : 1} evidence
+                  </span>
+                </div>`
+                    : ""
+                }
               </div>
-              <p class="preference-evidence">${escapeHtml(Array.isArray(p.evidence) ? p.evidence.join(", ") : p.evidence)}</p>
-              <p class="preference-meta">Category: ${escapeHtml(p.category)}</p>
-            </div>
-          `
-            )
-            .join("")}
-        </div>
-      `
-      }
-    </div>
+            `
+              )
+              .join("")}
+          </div>
+        `
+        }
+      </div>
 
-    <div class="profile-section">
-      <h4><i data-lucide="activity" class="icon"></i> Patterns (${patterns.length})</h4>
-      ${
-        patterns.length === 0
-          ? '<p class="empty-text">No patterns detected yet</p>'
-          : `
-        <div class="patterns-list">
-          ${patterns
-            .map(
-              (p) => `
-            <div class="pattern-item">
-              <div class="pattern-header">
-                <span class="pattern-name">${escapeHtml(p.description)}</span>
-                <span class="category-badge">${escapeHtml(p.category)}</span>
+      <div class="dashboard-section patterns-section">
+        <h4><i data-lucide="activity" class="icon"></i> PATTERNS <span class="count">${patterns.length}</span></h4>
+        ${
+          patterns.length === 0
+            ? '<p class="empty-text">No patterns detected yet</p>'
+            : `
+          <div class="cards-grid">
+            ${patterns
+              .map(
+                (p) => `
+              <div class="compact-card pattern-card">
+                <div class="card-top">
+                  <span class="category-tag">${escapeHtml(p.category)}</span>
+                </div>
+                <div class="card-body">
+                  <p class="card-text">${escapeHtml(p.description)}</p>
+                </div>
               </div>
-            </div>
-          `
-            )
-            .join("")}
-        </div>
-      `
-      }
-    </div>
+            `
+              )
+              .join("")}
+          </div>
+        `
+        }
+      </div>
 
-    <div class="profile-section">
-      <h4><i data-lucide="workflow" class="icon"></i> Workflows (${workflows.length})</h4>
-      ${
-        workflows.length === 0
-          ? '<p class="empty-text">No workflows identified yet</p>'
-          : `
-        <div class="workflows-list">
-          ${workflows
-            .map(
-              (w) => `
-            <div class="workflow-item">
-              <div class="workflow-header">
-                <span class="workflow-name">${escapeHtml(w.description)}</span>
-              </div>
-              <div class="workflow-steps">
-                ${w.steps
-                  .map(
-                    (step) => `
-                  <div class="workflow-step">
-                    <span class="step-text">${escapeHtml(step)}</span>
-                  </div>
-                `
-                  )
-                  .join("")}
+      <div class="dashboard-section workflows-section full-width">
+        <h4><i data-lucide="workflow" class="icon"></i> WORKFLOWS <span class="count">${workflows.length}</span></h4>
+        ${
+          workflows.length === 0
+            ? '<p class="empty-text">No workflows identified yet</p>'
+            : `
+          <div class="workflows-grid">
+            ${workflows
+              .map(
+                (w) => `
+              <div class="workflow-row">
+                <div class="workflow-title">${escapeHtml(w.description)}</div>
+                <div class="workflow-steps-horizontal">
+                  ${w.steps
+                    .map(
+                      (step, i) => `
+                    <div class="step-node">
+                      <span class="step-idx">${i + 1}</span>
+                      <span class="step-content">${escapeHtml(step)}</span>
+                    </div>
+                    ${i < w.steps.length - 1 ? '<i data-lucide="arrow-right" class="step-arrow"></i>' : ""}
+                  `
+                    )
+                    .join("")}
+                </div>
               </div>
-            </div>
-          `
-            )
-            .join("")}
-        </div>
-      `
-      }
-    </div>
-
-    <div class="profile-section">
-      <h4><i data-lucide="award" class="icon"></i> Skill Level</h4>
-      <div class="skill-level">
-        <div class="skill-item">
-          <span class="skill-label">Overall</span>
-          <span class="skill-value">${escapeHtml(skillLevel.overall || "unknown")}</span>
-        </div>
-        ${Object.entries(skillLevel.domains || {})
-          .map(
-            ([domain, level]) => `
-          <div class="skill-item">
-            <span class="skill-label">${escapeHtml(domain)}</span>
-            <span class="skill-value">${escapeHtml(level)}</span>
+            `
+              )
+              .join("")}
           </div>
         `
-          )
-          .join("")}
+        }
       </div>
     </div>
   `;