opencode-mem 2.1.1 → 2.3.0

package/dist/web/app.js

@@ -1,18 +1,19 @@
 const API_BASE = "";
 
 const state = {
-  tags: { user: [], project: [] },
+  tags: { project: [] },
   memories: [],
   currentPage: 1,
   pageSize: 20,
   totalPages: 1,
   totalItems: 0,
   selectedTag: "",
-  currentScope: "project",
+  currentView: "project",
   searchQuery: "",
   isSearching: false,
   selectedMemories: new Set(),
   autoRefreshInterval: null,
+  userProfile: null,
 };
 
 marked.setOptions({
@@ -53,7 +54,7 @@ function populateTagDropdowns() {
   tagFilter.innerHTML = '<option value="">All Tags</option>';
   addTag.innerHTML = '<option value="">Select tag</option>';
 
-  const scopeTags = state.currentScope === "user" ? state.tags.user : state.tags.project;
+  const scopeTags = state.tags.project;
 
   scopeTags.forEach((tagInfo) => {
     const displayText = tagInfo.displayName || tagInfo.tag;
@@ -75,7 +76,7 @@ function populateTagDropdowns() {
 async function loadMemories() {
   showRefreshIndicator(true);
 
-  let endpoint = `/api/memories?page=${state.currentPage}&pageSize=${state.pageSize}&scope=${state.currentScope}&includePrompts=true`;
+  let endpoint = `/api/memories?page=${state.currentPage}&pageSize=${state.pageSize}&includePrompts=true`;
 
   if (state.isSearching && state.searchQuery) {
     endpoint = `/api/search?q=${encodeURIComponent(state.searchQuery)}&page=${state.currentPage}&pageSize=${state.pageSize}`;
@@ -143,7 +144,7 @@ function renderPromptCard(prompt) {
           <input type="checkbox" class="memory-checkbox" data-id="${prompt.id}" ${isSelected ? "checked" : ""} />
           <i data-lucide="message-circle" class="icon"></i>
           <span class="badge badge-prompt">USER PROMPT</span>
-          ${isLinked ? '<span class="badge badge-linked">🔗 LINKED</span>' : ""}
+          ${isLinked ? '<span class="badge badge-linked"><i data-lucide="link" class="icon-sm"></i> LINKED</span>' : ""}
           <span class="prompt-date">${promptDate}</span>
         </div>
         <div class="prompt-actions">
@@ -156,7 +157,7 @@ function renderPromptCard(prompt) {
       <div class="prompt-content">
         ${escapeHtml(prompt.content)}
       </div>
-      ${isLinked ? '<div class="link-indicator">↓ Generated memory above ↑</div>' : ""}
+      ${isLinked ? '<div class="link-indicator"><i data-lucide="arrow-down" class="icon-sm"></i> Generated memory above <i data-lucide="arrow-up" class="icon-sm"></i></div>' : ""}
     </div>
   `;
 }
@@ -171,15 +172,13 @@ function renderMemoryCard(memory) {
       : "";
 
   let displayInfo = memory.displayName || memory.id;
-  if (memory.scope === "project" && memory.projectPath) {
+  if (memory.projectPath) {
     const pathParts = memory.projectPath.split("/");
     displayInfo = pathParts[pathParts.length - 1] || memory.projectPath;
   }
 
   let subtitle = "";
-  if (memory.scope === "user" && memory.userEmail) {
-    subtitle = `<span class="memory-subtitle">${escapeHtml(memory.userEmail)}</span>`;
-  } else if (memory.scope === "project" && memory.projectPath) {
+  if (memory.projectPath) {
     subtitle = `<span class="memory-subtitle">${escapeHtml(memory.projectPath)}</span>`;
   }
 
@@ -200,9 +199,8 @@ function renderMemoryCard(memory) {
       <div class="memory-header">
         <div class="meta">
           <input type="checkbox" class="memory-checkbox" data-id="${memory.id}" ${isSelected ? "checked" : ""} />
-          <span class="badge badge-${memory.scope}">${memory.scope}</span>
           ${memory.memoryType ? `<span class="badge badge-type">${memory.memoryType}</span>` : ""}
-          ${isLinked ? '<span class="badge badge-linked">🔗 LINKED</span>' : ""}
+          ${isLinked ? '<span class="badge badge-linked"><i data-lucide="link" class="icon-sm"></i> LINKED</span>' : ""}
           ${similarityHtml}
           ${isPinned ? '<span class="badge badge-pinned">PINNED</span>' : ""}
           <span class="memory-display-name">${escapeHtml(displayInfo)}</span>
@@ -218,7 +216,7 @@ function renderMemoryCard(memory) {
         </div>
       </div>
       <div class="memory-content markdown-content">${renderMarkdown(memory.content)}</div>
-      ${isLinked ? '<div class="link-indicator">↑ From prompt below ↓</div>' : ""}
+      ${isLinked ? '<div class="link-indicator"><i data-lucide="arrow-up" class="icon-sm"></i> From prompt below <i data-lucide="arrow-down" class="icon-sm"></i></div>' : ""}
       <div class="memory-footer">
         ${dateInfo}
         <span>ID: ${memory.id}</span>
@@ -278,10 +276,9 @@ function updatePagination() {
 }
 
 function updateSectionTitle() {
-  const scopeName = state.currentScope.toUpperCase();
   const title = state.isSearching
     ? `└─ SEARCH RESULTS (${state.totalItems}) ──`
-    : `└─ ${scopeName} MEMORIES (${state.totalItems}) ──`;
+    : `└─ PROJECT MEMORIES (${state.totalItems}) ──`;
   document.getElementById("section-title").textContent = title;
 }
 
@@ -289,26 +286,9 @@ async function loadStats() {
   const result = await fetchAPI("/api/stats");
   if (result.success) {
     document.getElementById("stats-total").textContent = `Total: ${result.data.total}`;
-    document.getElementById("stats-user").textContent = `User: ${result.data.byScope.user}`;
-    document.getElementById("stats-project").textContent =
-      `Project: ${result.data.byScope.project}`;
   }
 }
 
-function switchScope(scope) {
-  state.currentScope = scope;
-  state.currentPage = 1;
-  state.selectedTag = "";
-
-  document.querySelectorAll(".tab-btn").forEach((btn) => {
-    btn.classList.remove("active");
-  });
-  document.getElementById(`tab-${scope}`).classList.add("active");
-
-  populateTagDropdowns();
-  loadMemories();
-}
-
 async function addMemory(e) {
   e.preventDefault();
 
@@ -507,21 +487,18 @@ function changePage(delta) {
 }
 
 function handleAddScopeChange() {
-  const scope = document.getElementById("add-scope").value;
   const tagDropdown = document.getElementById("add-tag");
 
   tagDropdown.innerHTML = '<option value="">Select tag</option>';
 
-  if (!scope) return;
-
-  const tags = scope === "user" ? state.tags.user : state.tags.project;
+  const tags = state.tags.project;
   tags.forEach((tagInfo) => {
     const displayText = tagInfo.displayName || tagInfo.tag;
     const shortDisplay =
       displayText.length > 50 ? displayText.substring(0, 50) + "..." : displayText;
     const option = document.createElement("option");
     option.value = tagInfo.tag;
-    option.textContent = `[${scope}] ${shortDisplay}`;
+    option.textContent = shortDisplay;
     tagDropdown.appendChild(option);
   });
 }
@@ -551,12 +528,6 @@ function showRefreshIndicator(show) {
   }
 }
 
-function escapeHtml(text) {
-  const div = document.createElement("div");
-  div.textContent = text;
-  return div.innerHTML;
-}
-
 function formatDate(isoString) {
   const date = new Date(isoString);
   return date.toLocaleString("en-US", {
@@ -722,9 +693,247 @@ async function runMigration(strategy) {
   }
 }
 
+async function loadUserProfile() {
+  const result = await fetchAPI("/api/user-profile");
+  if (result.success) {
+    state.userProfile = result.data;
+    renderUserProfile();
+  } else {
+    showError(result.error || "Failed to load profile");
+  }
+}
+
+function renderUserProfile() {
+  const container = document.getElementById("profile-content");
+  const profile = state.userProfile;
+
+  if (!profile.exists) {
+    container.innerHTML = `
+      <div class="empty-state">
+        <i data-lucide="user-x" class="icon-large"></i>
+        <p>${profile.message}</p>
+      </div>
+    `;
+    lucide.createIcons();
+    return;
+  }
+
+  const data = profile.profileData;
+  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>
+      <button id="view-changelog-btn" class="btn-secondary">
+        <i data-lucide="history" class="icon"></i> Version 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>
+              <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>
+
+    <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>
+            </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>
+            </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>
+          </div>
+        `
+          )
+          .join("")}
+      </div>
+    </div>
+  `;
+
+  document.getElementById("view-changelog-btn")?.addEventListener("click", showChangelog);
+  lucide.createIcons();
+}
+
+async function showChangelog() {
+  const modal = document.getElementById("changelog-modal");
+  const list = document.getElementById("changelog-list");
+
+  modal.classList.remove("hidden");
+  list.innerHTML = '<div class="loading">Loading changelog...</div>';
+
+  const result = await fetchAPI(
+    `/api/user-profile/changelog?profileId=${state.userProfile.id}&limit=10`
+  );
+
+  if (result.success && result.data.length > 0) {
+    list.innerHTML = result.data
+      .map(
+        (c) => `
+      <div class="changelog-item">
+        <div class="changelog-header">
+          <span class="changelog-version">v${c.version}</span>
+          <span class="changelog-type">${c.changeType}</span>
+          <span class="changelog-date">${formatDate(c.createdAt)}</span>
+        </div>
+        <p class="changelog-summary">${escapeHtml(c.changeSummary)}</p>
+      </div>
+    `
+      )
+      .join("");
+  } else {
+    list.innerHTML = '<div class="empty-state">No changelog available</div>';
+  }
+}
+
+async function refreshProfile() {
+  showToast("Refreshing profile...", "info");
+  const result = await fetchAPI("/api/user-profile/refresh", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({}),
+  });
+
+  if (result.success) {
+    showToast(result.data.message, "success");
+    await loadUserProfile();
+  } else {
+    showToast(result.error || "Failed to refresh profile", "error");
+  }
+}
+
+function switchView(view) {
+  state.currentView = view;
+
+  document.querySelectorAll(".tab-btn").forEach((btn) => btn.classList.remove("active"));
+
+  if (view === "project") {
+    document.getElementById("tab-project").classList.add("active");
+    document.getElementById("project-section").classList.remove("hidden");
+    document.getElementById("profile-section").classList.add("hidden");
+    document.querySelector(".controls").classList.remove("hidden");
+    document.querySelector(".add-section").classList.remove("hidden");
+  } else if (view === "profile") {
+    document.getElementById("tab-profile").classList.add("active");
+    document.getElementById("project-section").classList.add("hidden");
+    document.getElementById("profile-section").classList.remove("hidden");
+    document.querySelector(".controls").classList.add("hidden");
+    document.querySelector(".add-section").classList.add("hidden");
+    loadUserProfile();
+  }
+}
+
+function escapeHtml(text) {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}
+
 document.addEventListener("DOMContentLoaded", async () => {
-  document.getElementById("tab-project").addEventListener("click", () => switchScope("project"));
-  document.getElementById("tab-user").addEventListener("click", () => switchScope("user"));
+  document.getElementById("tab-project").addEventListener("click", () => switchView("project"));
+  document.getElementById("tab-profile").addEventListener("click", () => switchView("profile"));
+  document.getElementById("refresh-profile-btn")?.addEventListener("click", refreshProfile);
+  document.getElementById("changelog-close")?.addEventListener("click", () => {
+    document.getElementById("changelog-modal").classList.add("hidden");
+  });
 
   document.getElementById("tag-filter").addEventListener("change", () => {
     state.selectedTag = document.getElementById("tag-filter").value;
@@ -732,8 +941,6 @@ document.addEventListener("DOMContentLoaded", async () => {
     loadMemories();
   });
 
-  document.getElementById("add-scope").addEventListener("change", handleAddScopeChange);
-
   document.getElementById("search-btn").addEventListener("click", performSearch);
   document.getElementById("clear-search-btn").addEventListener("click", clearSearch);
   document.getElementById("search-input").addEventListener("keypress", (e) => {

package/dist/web/index.html

@@ -27,8 +27,6 @@
         </div>
         <div class="stats-bar">
           <span id="stats-total">Total: 0</span>
-          <span id="stats-user">User: 0</span>
-          <span id="stats-project">Project: 0</span>
           <span id="refresh-indicator" class="hidden"
             ><i data-lucide="rotate-cw" class="icon icon-spin"></i
           ></span>
@@ -38,11 +36,11 @@
       <div class="scope-tabs">
         <button id="tab-project" class="tab-btn active">
           <i data-lucide="folder" class="icon"></i>
-          PROJECT TIMELINE
+          PROJECT MEMORIES
         </button>
-        <button id="tab-user" class="tab-btn">
+        <button id="tab-profile" class="tab-btn">
           <i data-lucide="user" class="icon"></i>
-          USER TIMELINE
+          USER PROFILE
         </button>
       </div>
 
@@ -99,7 +97,7 @@
         </div>
       </div>
 
-      <div class="memories-section">
+      <div class="memories-section" id="project-section">
         <div class="section-header">
           <h2 id="section-title">└─ PROJECT MEMORIES (0) ──</h2>
           <div class="pagination" id="pagination-top">
@@ -128,19 +126,23 @@
         </div>
       </div>
 
+      <div class="profile-section hidden" id="profile-section">
+        <div class="section-header">
+          <h2>└─ USER PROFILE ──</h2>
+          <button id="refresh-profile-btn" class="btn-secondary">
+            <i data-lucide="refresh-cw" class="icon"></i> Refresh
+          </button>
+        </div>
+
+        <div id="profile-content" class="profile-content">
+          <div class="loading">Loading profile...</div>
+        </div>
+      </div>
+
       <div class="add-section">
         <h2>└─ ADD NEW MEMORY ──</h2>
         <form id="add-form">
           <div class="form-row">
-            <div class="form-group">
-              <label>Scope:</label>
-              <select id="add-scope" required>
-                <option value="">Select scope</option>
-                <option value="user">User</option>
-                <option value="project">Project</option>
-              </select>
-            </div>
-
             <div class="form-group">
               <label>Tag:</label>
               <select id="add-tag" required>
@@ -201,6 +203,20 @@
 
     <div id="toast" class="toast hidden"></div>
 
+    <div id="changelog-modal" class="modal hidden">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3>Profile Version History</h3>
+          <button class="modal-close" id="changelog-close">
+            <i data-lucide="x" class="icon"></i>
+          </button>
+        </div>
+        <div id="changelog-list" class="changelog-list">
+          <div class="loading">Loading changelog...</div>
+        </div>
+      </div>
+    </div>
+
     <script src="/app.js"></script>
   </body>
 </html>