fix: eview refinements for memory dashboard

Adressed:

1) When selecting memories using checkbox, it unchecks one second later automatically (Brave+Firefox)
2) Area filter does not work. When All is selecter, it shows me memories from fragments, solutions, etc., but when I select an area, no memories are shown.
3) Modal does not have a title, it shows a path
4) In light mode, buttons and some labels are almost invisible - we should not use custom colors anywhere, we should always use one of the color vars in the screenshot, those are automatically adjusted based on current theme. Also in light mode there's a lot of gray areas that blend, again, we should use our color vars.
5) The loading spinner is stretched into an oval
6) We should merge the first div (title and memory counts) with the third one (pagination) to save space. + we should also show the total number of memories in the DB (unfiltered, just the total count of docs)
7) Action buttons should stack vertically, we can remove the title to make it more narrow
8) We should not use emojis for icons, they break the design, it's used in the source badge (knowledge, conversation...)

python/api/memory_dashboard.py

@@ -253,10 +253,11 @@ class MemoryDashboard(ApiHandler):
                 threshold = 0.6  # Lower threshold for broader search in dashboard
                 comparator = Memory._get_comparator(f"area == '{area_filter}'") if area_filter else None
 
+                # Get ALL matching results, don't limit in query
                 docs = await myFaiss_db.asearch(
                     search_query,
                     search_type="similarity_score_threshold",
-                    k=limit,
+                    k=10000,  # Get all matches up to reasonable max
                     score_threshold=threshold,
                     filter=comparator,
                 )
@@ -272,10 +273,6 @@ class MemoryDashboard(ApiHandler):
 
                     memories.append(doc)
 
-                    # Apply limit
-                    if len(memories) >= limit:
-                        break
-
             # Format memories for the dashboard
             formatted_memories: list[dict] = []
             for memory in memories:
@@ -298,7 +295,7 @@ class MemoryDashboard(ApiHandler):
 
                 formatted_memories.append(memory_data)
 
-            # Sort by timestamp (newest first) - handle "unknown" timestamps
+            # Sort ALL results by timestamp (newest first) - handle "unknown" timestamps
             def get_sort_key(memory):
                 timestamp = memory["timestamp"]
                 if timestamp == "unknown" or not timestamp:
@@ -307,11 +304,19 @@ class MemoryDashboard(ApiHandler):
 
             formatted_memories.sort(key=get_sort_key, reverse=True)
 
+            # Apply limit AFTER sorting to get the newest entries
+            if limit and len(formatted_memories) > limit:
+                formatted_memories = formatted_memories[:limit]
+
             # Get summary statistics
             total_memories = len(formatted_memories)
             knowledge_count = sum(1 for m in formatted_memories if m["knowledge_source"])
             conversation_count = total_memories - knowledge_count
 
+            # Get total count of all memories in database (unfiltered)
+            all_docs = myFaiss_db.get_all_docs()
+            total_db_count = len(all_docs)
+
             areas_count: dict[str, int] = {}
             for memory_dict in formatted_memories:
                 area = memory_dict["area"]
@@ -321,6 +326,7 @@ class MemoryDashboard(ApiHandler):
                 "success": True,
                 "memories": formatted_memories,
                 "total_count": total_memories,
+                "total_db_count": total_db_count,
                 "knowledge_count": knowledge_count,
                 "conversation_count": conversation_count,
                 "areas_count": areas_count,

webui/components/settings/memory/memory-dashboard-store.js

@@ -2,6 +2,12 @@ import { createStore } from "/js/AlpineStore.js";
 import { getContext } from "/index.js";
 import * as API from "/js/api.js";
 import { openModal, closeModal } from "/js/modals.js";
+import { store as notificationStore } from "/components/notifications/notification-store.js";
+
+// Helper function for toasts
+function justToast(text, type = "info", timeout = 5000) {
+  notificationStore.addFrontendToastOnly(type, text, "", timeout / 1000);
+}
 
 // Memory Dashboard Store
 const memoryDashboardStore = {
@@ -29,6 +35,7 @@ const memoryDashboardStore = {
 
   // Stats
   totalCount: 0,
+  totalDbCount: 0,
   knowledgeCount: 0,
   conversationCount: 0,
   areasCount: {},
@@ -147,13 +154,25 @@ const memoryDashboardStore = {
         limit: this.limit
       });
 
-            if (response.success) {
+        if (response.success) {
+        // Preserve existing selections when updating memories during polling
+        const existingSelections = {};
+        if (silent && this.memories) {
+          // Build a map of existing selections by memory ID
+          this.memories.forEach(memory => {
+            if (memory.selected) {
+              existingSelections[memory.id] = true;
+            }
+          });
+        }
+
         // Add selected property to each memory item for mass selection
         this.memories = (response.memories || []).map(memory => ({
           ...memory,
-          selected: memory.selected || false
+          selected: existingSelections[memory.id] || false
         }));
         this.totalCount = response.total_count || 0;
+        this.totalDbCount = response.total_db_count || 0;
         this.knowledgeCount = response.knowledge_count || 0;
         this.conversationCount = response.conversation_count || 0;
         this.areasCount = response.areas_count || {};
@@ -290,16 +309,16 @@ const memoryDashboardStore = {
       });
 
       if (response.success) {
-        this.showToast(`Successfully deleted ${selectedMemories.length} memories`, "success");
+        justToast(`Successfully deleted ${selectedMemories.length} memories`, "success");
 
         // Let polling refresh the data instead of manual manipulation
         // Trigger an immediate refresh to get updated state from backend
         await this.searchMemories(true); // silent refresh
       } else {
-        this.showToast(response.error || "Failed to delete selected memories", "error");
+        justToast(response.error || "Failed to delete selected memories", "error");
       }
     } catch (error) {
-      this.showToast(error.message || "Failed to delete selected memories", "error");
+      justToast(error.message || "Failed to delete selected memories", "error");
     } finally {
       this.loading = false;
     }
@@ -337,7 +356,7 @@ ${memory.content_full}
     const content = selectedMemories.map(memory => this.formatMemoryForCopy(memory)).join('\n');
 
     this.copyToClipboard(content);
-    this.showToast(`Copied ${selectedMemories.length} memories with metadata to clipboard`, "success");
+    justToast(`Copied ${selectedMemories.length} memories with metadata to clipboard`, "success");
   },
 
   bulkExportMemories() {
@@ -375,7 +394,7 @@ ${memory.content_full}
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
 
-    this.showToast(`Exported ${selectedMemories.length} selected memories to ${filename}`, "success");
+    justToast(`Exported ${selectedMemories.length} selected memories to ${filename}`, "success");
   },
 
   // Memory detail modal (standard approach)
@@ -431,18 +450,18 @@ ${memory.content_full}
 
   getAreaColor(area) {
     const colors = {
-      "MAIN": "#3b82f6",        // blue
-      "FRAGMENTS": "#10b981",   // emerald
-      "SOLUTIONS": "#8b5cf6",   // violet
-      "INSTRUMENTS": "#f59e0b"  // amber
+      "main": "#3b82f6",
+      "fragments": "#10b981",
+      "solutions": "#8b5cf6",
+      "instruments": "#f59e0b"
     };
-    return colors[area] || "#6b7280"; // gray for unknown
+    return colors[area] || "#6c757d";
   },
 
   copyToClipboard(text) {
     if (navigator.clipboard && window.isSecureContext) {
       navigator.clipboard.writeText(text).then(() => {
-        this.showToast("Copied to clipboard!", "success");
+        justToast("Copied to clipboard!", "success");
       }).catch(err => {
         console.error("Clipboard copy failed:", err);
         this.fallbackCopyToClipboard(text);
@@ -463,10 +482,10 @@ ${memory.content_full}
     textArea.select();
     try {
       document.execCommand('copy');
-      this.showToast("Copied to clipboard!", "success");
+      justToast("Copied to clipboard!", "success");
     } catch (err) {
       console.error("Fallback clipboard copy failed:", err);
-      this.showToast("Failed to copy to clipboard", "error");
+      justToast("Failed to copy to clipboard", "error");
     }
     document.body.removeChild(textArea);
   },
@@ -487,7 +506,7 @@ ${memory.content_full}
       });
 
       if (response.success) {
-        this.showToast("Memory deleted successfully", "success");
+        justToast("Memory deleted successfully", "success");
 
         // If we were viewing this memory in detail modal, close it
         if (isViewingThisMemory) {
@@ -499,17 +518,17 @@ ${memory.content_full}
         // Trigger an immediate refresh to get updated state from backend
         await this.searchMemories(true); // silent refresh
       } else {
-        this.showToast(`Failed to delete memory: ${response.error}`, "error");
+        justToast(`Failed to delete memory: ${response.error}`, "error");
       }
     } catch (error) {
       console.error("Memory deletion error:", error);
-      this.showToast("Failed to delete memory", "error");
+      justToast("Failed to delete memory", "error");
     }
   },
 
   exportMemories() {
     if (this.memories.length === 0) {
-      this.showToast("No memories to export", "warning");
+      justToast("No memories to export", "warning");
       return;
     }
 
@@ -541,10 +560,10 @@ ${memory.content_full}
       document.body.removeChild(a);
       URL.revokeObjectURL(url);
 
-      this.showToast("Memory export completed", "success");
+      justToast("Memory export completed", "success");
     } catch (error) {
       console.error("Memory export error:", error);
-      this.showToast("Failed to export memories", "error");
+      justToast("Failed to export memories", "error");
     }
   },
 
@@ -574,6 +593,7 @@ ${memory.content_full}
     this.searchQuery = "";
     this.memories = [];
     this.totalCount = 0;
+    this.totalDbCount = 0;
     this.knowledgeCount = 0;
     this.conversationCount = 0;
     this.areasCount = {};
@@ -581,14 +601,7 @@ ${memory.content_full}
     this.currentPage = 1;
   },
 
-  showToast(message, type = "info") {
-    // Use global toast function if available
-    if (typeof toast === 'function') {
-      toast(message, type);
-    } else {
-      console.log(`[${type.toUpperCase()}] ${message}`);
-    }
-  }
+
 };
 
 const store = createStore("memoryDashboardStore", memoryDashboardStore);

webui/components/settings/memory/memory-dashboard.html

@@ -1,29 +1,39 @@
-<script type="module">
-    import { store } from "/components/settings/memory/memory-dashboard-store.js";
-</script>
-
+<html>
+<head>
+    <title>Memory Dashboard</title>
+    <script type="module">
+        import { store } from "/components/settings/memory/memory-dashboard-store.js";
+    </script>
+</head>
+<body>
 <div x-data>
     <template x-if="$store.memoryDashboardStore">
-        <div x-init="$store.memoryDashboardStore.initialize()" class="memory-dashboard">
-
-                <!-- Header with title and statistics -->
-                <div class="dashboard-header">
-                    <h3>Memory Dashboard</h3>
-                    <div class="memory-stats" x-show="!$store.memoryDashboardStore.loading">
-                        <div class="stat-item">
-                            <span class="stat-label">Total:</span>
-                            <span class="stat-value" x-text="$store.memoryDashboardStore.totalCount"></span>
-                        </div>
-                        <div class="stat-item">
-                            <span class="stat-label">Knowledge:</span>
-                            <span class="stat-value" x-text="$store.memoryDashboardStore.knowledgeCount"></span>
-                        </div>
-                        <div class="stat-item">
-                            <span class="stat-label">Conversation:</span>
-                            <span class="stat-value" x-text="$store.memoryDashboardStore.conversationCount"></span>
-                        </div>
-                    </div>
-                </div>
+        <div x-init="
+            $store.memoryDashboardStore.initialize();
+
+            // Setup cleanup when component is removed from DOM
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    if (mutation.type === 'childList') {
+                        mutation.removedNodes.forEach((node) => {
+                            if (node.contains && node.contains($el)) {
+                                // Dashboard is being removed, cleanup polling
+                                $store.memoryDashboardStore.cleanup();
+                                observer.disconnect();
+                            }
+                        });
+                    }
+                });
+            });
+
+            // Watch for DOM changes
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+        " class="memory-dashboard">
+
+
 
                 <!-- Search and Filters -->
                 <div class="filters-section">
@@ -45,10 +55,10 @@
                             <label for="area-filter">Area:</label>
                             <select id="area-filter" x-model="$store.memoryDashboardStore.areaFilter">
                                 <option value="">All Areas</option>
-                                <option value="MAIN">Main</option>
-                                <option value="FRAGMENTS">Fragments</option>
-                                <option value="SOLUTIONS">Solutions</option>
-                                <option value="INSTRUMENTS">Instruments</option>
+                                <option value="main">Main</option>
+                                <option value="fragments">Fragments</option>
+                                <option value="solutions">Solutions</option>
+                                <option value="instruments">Instruments</option>
                             </select>
                         </div>
 
@@ -95,33 +105,55 @@
                     <div x-show="!$store.memoryDashboardStore.loading && !$store.memoryDashboardStore.error"
                          class="memory-table-container">
 
-                        <!-- Pagination controls at top -->
-                        <div class="pagination-controls-top" x-show="$store.memoryDashboardStore.totalPages > 1">
-                            <div class="pagination-info-inline">
-                                <span>Page <span x-text="$store.memoryDashboardStore.currentPage"></span>
-                                      of <span x-text="$store.memoryDashboardStore.totalPages"></span>
-                                      (<span x-text="$store.memoryDashboardStore.memories.length"></span> total memories)
-                                </span>
+                        <!-- Combined stats and pagination header -->
+                        <div class="stats-pagination-header" x-show="!$store.memoryDashboardStore.loading">
+                            <!-- Statistics -->
+                            <div class="memory-stats-compact">
+                                <div class="stat-item">
+                                    <span class="stat-label">DB Total:</span>
+                                    <span class="stat-value" x-text="$store.memoryDashboardStore.totalDbCount"></span>
+                                </div>
+                                <div class="stat-item">
+                                    <span class="stat-label">Filtered:</span>
+                                    <span class="stat-value" x-text="$store.memoryDashboardStore.totalCount"></span>
+                                </div>
+                                <div class="stat-item">
+                                    <span class="stat-label">Knowledge:</span>
+                                    <span class="stat-value" x-text="$store.memoryDashboardStore.knowledgeCount"></span>
+                                </div>
+                                <div class="stat-item">
+                                    <span class="stat-label">Conversation:</span>
+                                    <span class="stat-value" x-text="$store.memoryDashboardStore.conversationCount"></span>
+                                </div>
                             </div>
 
-                            <div class="pagination-controls">
-                                <button class="btn slim" @click="$store.memoryDashboardStore.prevPage()"
-                                        :disabled="$store.memoryDashboardStore.currentPage === 1">
-                                    Previous
-                                </button>
-
-                                <select class="page-select"
-                                        x-model.number="$store.memoryDashboardStore.currentPage"
-                                        @change="$store.memoryDashboardStore.goToPage($store.memoryDashboardStore.currentPage)">
-                                    <template x-for="page in Array.from({length: $store.memoryDashboardStore.totalPages}, (_, i) => i + 1)" :key="page">
-                                        <option :value="page" x-text="'Page ' + page"></option>
-                                    </template>
-                                </select>
-
-                                <button class="btn slim" @click="$store.memoryDashboardStore.nextPage()"
-                                        :disabled="$store.memoryDashboardStore.currentPage === $store.memoryDashboardStore.totalPages">
-                                    Next
-                                </button>
+                            <!-- Pagination controls -->
+                            <div class="pagination-controls-compact" x-show="$store.memoryDashboardStore.totalPages > 1">
+                                <div class="pagination-info-inline">
+                                    <span>Page <span x-text="$store.memoryDashboardStore.currentPage"></span>
+                                          of <span x-text="$store.memoryDashboardStore.totalPages"></span>
+                                    </span>
+                                </div>
+
+                                <div class="pagination-controls">
+                                    <button class="btn slim" @click="$store.memoryDashboardStore.prevPage()"
+                                            :disabled="$store.memoryDashboardStore.currentPage === 1">
+                                        Previous
+                                    </button>
+
+                                    <select class="page-select"
+                                            x-model.number="$store.memoryDashboardStore.currentPage"
+                                            @change="$store.memoryDashboardStore.goToPage($store.memoryDashboardStore.currentPage)">
+                                        <template x-for="page in Array.from({length: $store.memoryDashboardStore.totalPages}, (_, i) => i + 1)" :key="page">
+                                            <option :value="page" x-text="'Page ' + page"></option>
+                                        </template>
+                                    </select>
+
+                                    <button class="btn slim" @click="$store.memoryDashboardStore.nextPage()"
+                                            :disabled="$store.memoryDashboardStore.currentPage === $store.memoryDashboardStore.totalPages">
+                                        Next
+                                    </button>
+                                </div>
                             </div>
                         </div>
 
@@ -186,7 +218,7 @@
                                         </th>
                                         <th class="col-metadata">Metadata</th>
                                         <th class="col-preview">Preview</th>
-                                        <th class="col-actions">Actions</th>
+                                        <th class="col-actions"></th>
                                     </tr>
                                 </thead>
                         <tbody>
@@ -204,9 +236,9 @@
                                     <td class="metadata-cell">
                                         <div class="metadata-info">
                                             <div class="metadata-row">
-                                                <span class="area-badge"
-                                                      :style="`background-color: ${$store.memoryDashboardStore.getAreaColor(memory.area)}`"
-                                                      x-text="memory.area"></span>
+                                                                                                 <span class="area-badge"
+                                                       :style="`background-color: ${$store.memoryDashboardStore.getAreaColor(memory.area)}`"
+                                                       x-text="(memory.area || 'UNKNOWN').toUpperCase()"></span>
                                             </div>
                                             <div class="metadata-row metadata-timestamp">
                                                 <span x-text="$store.memoryDashboardStore.formatTimestamp(memory.timestamp, true)"
@@ -214,10 +246,10 @@
                                             </div>
                                             <div class="metadata-row">
                                                 <template x-if="memory.knowledge_source">
-                                                    <span class="source-type knowledge">📚 Knowledge</span>
+                                                    <span class="source-type knowledge">Knowledge</span>
                                                 </template>
                                                 <template x-if="!memory.knowledge_source">
-                                                    <span class="source-type conversation">💬 Conversation</span>
+                                                    <span class="source-type conversation">Conversation</span>
                                                 </template>
                                             </div>
                                         </div>
@@ -235,58 +267,32 @@
 
                                                                         <!-- Actions -->
                                     <td class="actions-cell" @click.stop>
-                                        <button class="btn-action copy" @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.formatMemoryForCopy(memory))"
-                                                title="Copy Memory">
-                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-                                            </svg>
-                                        </button>
-
-                                        <button class="btn-action delete" @click="$store.memoryDashboardStore.deleteMemory(memory)"
-                                                title="Delete Memory">
-                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                                <polyline points="3,6 5,6 21,6"></polyline>
-                                                <path d="M19,6V20a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6M8,6V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
-                                                <line x1="10" y1="11" x2="10" y2="17"></line>
-                                                <line x1="14" y1="11" x2="14" y2="17"></line>
-                                            </svg>
-                                        </button>
+                                        <div class="actions-wrapper">
+                                            <button class="btn-action copy" @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.formatMemoryForCopy(memory))"
+                                                    title="Copy Memory">
+                                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                                                </svg>
+                                            </button>
+
+                                            <button class="btn-action delete" @click="$store.memoryDashboardStore.deleteMemory(memory)"
+                                                    title="Delete Memory">
+                                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <polyline points="3,6 5,6 21,6"></polyline>
+                                                    <path d="M19,6V20a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6M8,6V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
+                                                    <line x1="10" y1="11" x2="10" y2="17"></line>
+                                                    <line x1="14" y1="11" x2="14" y2="17"></line>
+                                                </svg>
+                                            </button>
+                                        </div>
                                     </td>
                                 </tr>
                             </template>
                         </tbody>
                     </table>
 
-                        <!-- Pagination controls at bottom -->
-                        <div class="pagination-controls-bottom" x-show="$store.memoryDashboardStore.totalPages > 1">
-                            <div class="pagination-info-inline">
-                                <span>Page <span x-text="$store.memoryDashboardStore.currentPage"></span>
-                                      of <span x-text="$store.memoryDashboardStore.totalPages"></span>
-                                      (<span x-text="$store.memoryDashboardStore.memories.length"></span> total memories)
-                                </span>
-                            </div>
 
-                            <div class="pagination-controls">
-                                <button class="btn slim" @click="$store.memoryDashboardStore.prevPage()"
-                                        :disabled="$store.memoryDashboardStore.currentPage === 1">
-                                    Previous
-                                </button>
-
-                                <select class="page-select"
-                                        x-model.number="$store.memoryDashboardStore.currentPage"
-                                        @change="$store.memoryDashboardStore.goToPage($store.memoryDashboardStore.currentPage)">
-                                    <template x-for="page in Array.from({length: $store.memoryDashboardStore.totalPages}, (_, i) => i + 1)" :key="page">
-                                        <option :value="page" x-text="'Page ' + page"></option>
-                                    </template>
-                                </select>
-
-                                <button class="btn slim" @click="$store.memoryDashboardStore.nextPage()"
-                                        :disabled="$store.memoryDashboardStore.currentPage === $store.memoryDashboardStore.totalPages">
-                                    Next
-                                </button>
-                            </div>
-                        </div>
 
                     </div>
 
@@ -328,18 +334,38 @@
             color: var(--color-text);
         }
 
-        .dashboard-header {
+        .memory-dashboard h3 {
+            color: var(--color-text);
+            margin: 0;
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+
+
+        .stats-pagination-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 1.5rem;
-            padding-bottom: 1rem;
-            border-bottom: 1px solid var(--color-border);
+            padding: 1rem;
+            background: var(--color-panel);
+            border: 1px solid var(--color-border);
+            border-radius: 8px;
+            border-bottom: none;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
         }
 
-        .memory-stats {
+        .memory-stats-compact {
             display: flex;
             gap: 1rem;
+            flex-wrap: wrap;
+        }
+
+        .pagination-controls-compact {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
         }
 
         .stat-item {
@@ -355,10 +381,15 @@
 
         .stat-label {
             font-size: 0.8rem;
-            color: var(--color-secondary);
+            color: var(--color-text);
+            opacity: 0.7;
             margin-bottom: 0.25rem;
         }
 
+        .light-mode .stat-label {
+            opacity: 0.8;
+        }
+
         .stat-value {
             font-size: 1.1rem;
             font-weight: bold;
@@ -407,7 +438,13 @@
         .filter-group input:focus, .filter-group select:focus {
             outline: none;
             border-color: var(--color-primary);
-            box-shadow: 0 0 0 2px rgba(115, 122, 129, 0.1);
+            box-shadow: 0 0 0 2px rgba(115, 122, 129, 0.2);
+            background: var(--color-input-focus);
+        }
+
+        .light-mode .filter-group input:focus,
+        .light-mode .filter-group select:focus {
+            box-shadow: 0 0 0 2px rgba(56, 70, 83, 0.1);
         }
 
         .filter-actions {
@@ -425,14 +462,16 @@
 
         .loading-text {
             font-size: 0.85rem;
-            color: var(--color-secondary);
+            color: var(--color-text);
+            opacity: 0.7;
             font-style: italic;
         }
 
         .loading-state, .error-state, .no-memories, .init-message {
             text-align: center;
             padding: 2rem;
-            color: var(--color-secondary);
+            color: var(--color-text);
+            opacity: 0.8;
             background: var(--color-panel);
             border: 1px solid var(--color-border);
             border-radius: 8px;
@@ -441,24 +480,41 @@
 
         .init-message {
             color: var(--color-primary);
-            background: rgba(115, 122, 129, 0.1);
+            background: rgba(115, 122, 129, 0.2);
             border-color: var(--color-primary);
         }
 
+        .light-mode .init-message {
+            background: rgba(56, 70, 83, 0.1);
+        }
+
         .error-state {
             color: var(--color-accent);
-            background: rgba(207, 102, 121, 0.1);
+            background: rgba(207, 102, 121, 0.2);
             border-color: var(--color-accent);
         }
 
+        .light-mode .error-state {
+            background: rgba(176, 0, 32, 0.1);
+        }
+
         .loading-spinner {
-            width: 20px;
-            height: 20px;
-            border: 2px solid var(--color-border);
-            border-left-color: var(--color-primary);
+            width: 24px;
+            height: 24px;
+            min-width: 24px;
+            min-height: 24px;
+            max-width: 24px;
+            max-height: 24px;
+            border: 3px solid var(--color-border);
+            border-top-color: var(--color-primary);
             border-radius: 50%;
             animation: spin 1s linear infinite;
             margin: 0 auto 0.5rem;
+            flex-shrink: 0;
+            flex-grow: 0;
+            display: inline-block;
+            position: relative;
+            box-sizing: border-box;
         }
 
         @keyframes spin {
@@ -487,8 +543,8 @@
         /* Fixed column widths for proper fit */
         .col-select { width: 5%; }
         .col-metadata { width: 25%; }
-        .col-preview { width: 55%; }
-        .col-actions { width: 15%; }
+        .col-preview { width: 60%; }
+        .col-actions { width: 10%; }
 
         .memory-table th,
         .memory-table td {
@@ -544,12 +600,12 @@
 
         /* Selected row styling */
         .memory-row.selected {
-            background: rgba(115, 122, 129, 0.1);
+            background: rgba(115, 122, 129, 0.2);
             border-left: 3px solid var(--color-primary);
         }
 
         .light-mode .memory-row.selected {
-            background: rgba(115, 122, 129, 0.05);
+            background: rgba(56, 70, 83, 0.1);
         }
 
         /* Mass action toolbar */
@@ -558,7 +614,7 @@
             justify-content: space-between;
             align-items: center;
             padding: 1rem;
-            background: rgba(115, 122, 129, 0.1);
+            background: rgba(115, 122, 129, 0.2);
             border: 1px solid var(--color-primary);
             border-radius: 8px;
             margin: 1rem 0;
@@ -566,7 +622,7 @@
         }
 
         .light-mode .mass-action-toolbar {
-            background: rgba(115, 122, 129, 0.05);
+            background: rgba(56, 70, 83, 0.1);
         }
 
         .selection-info {
@@ -596,27 +652,27 @@
 
         .btn-mass:hover {
             border-color: var(--color-primary);
-            background: rgba(115, 122, 129, 0.1);
+            background: var(--color-panel);
         }
 
         .btn-mass.copy:hover {
-            border-color: #4caf50;
-            color: #4caf50;
+            border-color: var(--color-primary);
+            color: var(--color-primary);
         }
 
         .btn-mass.export:hover {
-            border-color: #2196f3;
-            color: #2196f3;
+            border-color: var(--color-primary);
+            color: var(--color-primary);
         }
 
         .btn-mass.delete:hover {
-            border-color: #f44336;
-            color: #f44336;
+            border-color: var(--color-accent);
+            color: var(--color-accent);
         }
 
         .btn-mass.clear:hover {
-            border-color: #ff9800;
-            color: #ff9800;
+            border-color: var(--color-primary);
+            color: var(--color-primary);
         }
 
         @keyframes slideDown {
@@ -650,7 +706,7 @@
         }
 
         .memory-table tbody tr:hover {
-            background: rgba(255, 255, 255, 0.1);
+            background: var(--color-panel);
         }
 
         .memory-table tbody tr:last-child {
@@ -663,12 +719,19 @@
             color: white;
             font-size: 0.75rem;
             font-weight: bold;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .light-mode .area-badge {
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+            border: 1px solid rgba(0, 0, 0, 0.1);
         }
 
         .timestamp-cell {
             font-size: 0.85rem;
-            color: var(--color-secondary);
+            color: var(--color-text);
+            opacity: 0.7;
             white-space: normal;
             word-break: break-word;
             font-family: monospace;
@@ -694,20 +757,33 @@
         }
 
         .source-type.knowledge {
-            background: rgba(115, 122, 129, 0.1);
+            background: rgba(115, 122, 129, 0.2);
             color: var(--color-primary);
             border-color: var(--color-primary);
         }
 
+        .light-mode .source-type.knowledge {
+            background: rgba(56, 70, 83, 0.1);
+            color: var(--color-primary);
+        }
+
         .source-type.conversation {
-            background: rgba(101, 101, 101, 0.1);
-            color: var(--color-secondary);
-            border-color: var(--color-secondary);
+            background: rgba(101, 101, 101, 0.2);
+            color: var(--color-text);
+            opacity: 0.8;
+            border-color: var(--color-border);
+        }
+
+        .light-mode .source-type.conversation {
+            background: rgba(232, 234, 246, 0.5);
+            color: var(--color-text);
+            opacity: 0.9;
         }
 
         .source-file {
             font-size: 0.7rem;
-            color: var(--color-secondary);
+            color: var(--color-text);
+            opacity: 0.7;
             font-family: monospace;
             background: var(--color-panel);
             padding: 0.2rem 0.4rem;
@@ -743,14 +819,35 @@
             padding: 0.2rem 0.4rem;
             border-radius: 6px;
             font-size: 0.7rem;
-            color: var(--color-secondary);
+            color: var(--color-text);
+            opacity: 0.8;
         }
 
         .actions-cell {
-            white-space: nowrap;
-            text-align: center;
-            min-width: 140px;
-            padding: 0.5rem 0.25rem !important;
+            min-width: 60px;
+            width: 60px;
+            padding: 0 !important;
+            height: 60px;
+            position: relative;
+        }
+
+        .actions-wrapper {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .actions-cell .btn-action {
+            display: block;
+            margin: 0.1rem 0;
+            width: 28px;
+            height: 28px;
         }
 
         .btn-action {
@@ -760,7 +857,8 @@
             margin: 0 0.1rem;
             cursor: pointer;
             border-radius: 6px;
-            color: var(--color-secondary);
+            color: var(--color-text);
+            opacity: 0.7;
             transition: all 0.2s ease;
             display: inline-flex;
             align-items: center;
@@ -770,56 +868,43 @@
         }
 
         .btn-action:hover {
-            background: rgba(0, 0, 0, 0.05);
-            border-color: rgba(0, 0, 0, 0.2);
-            color: var(--color-text);
+            opacity: 1;
+            background: var(--color-panel);
+            border-color: var(--color-primary);
+            color: var(--color-primary);
             transform: translateY(-1px);
         }
 
         .btn-action.view:hover {
-            background: rgba(33, 150, 243, 0.1);
-            border-color: #2196F3;
-            color: #2196F3;
+            background: var(--color-panel);
+            border-color: var(--color-primary);
+            color: var(--color-primary);
         }
 
         .btn-action.copy:hover {
-            background: rgba(76, 175, 80, 0.1);
-            border-color: #4CAF50;
-            color: #4CAF50;
+            background: var(--color-panel);
+            border-color: var(--color-primary);
+            color: var(--color-primary);
         }
 
         .btn-action.delete:hover {
-            background: rgba(244, 67, 54, 0.1);
-            border-color: #f44336;
-            color: #f44336;
-        }
-
-        .pagination-controls-top {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 1rem;
-            padding: 1rem;
             background: var(--color-panel);
-            border: 1px solid var(--color-border);
-            border-radius: 8px;
+            border-color: var(--color-accent);
+            color: var(--color-accent);
         }
 
+
+
         .pagination-info-inline {
-            color: var(--color-secondary);
+            color: var(--color-text);
+            opacity: 0.7;
             font-size: 0.9rem;
         }
 
         .pagination-controls {
             display: flex;
-            justify-content: center;
             align-items: center;
             gap: 0.5rem;
-            margin: 1rem 0;
-            padding: 1rem;
-            background: var(--color-panel);
-            border: 1px solid var(--color-border);
-            border-radius: 8px;
         }
 
         .page-select {
@@ -836,22 +921,15 @@
         .page-select:focus {
             outline: none;
             border-color: var(--color-primary);
-            box-shadow: 0 0 0 2px rgba(115, 122, 129, 0.1);
+            box-shadow: 0 0 0 2px rgba(115, 122, 129, 0.2);
+            background: var(--color-input-focus);
         }
 
-        .pagination-controls-top, .pagination-controls-bottom {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 1rem;
-            background: var(--color-panel);
-            border-bottom: 1px solid var(--color-border);
+        .light-mode .page-select:focus {
+            box-shadow: 0 0 0 2px rgba(56, 70, 83, 0.1);
         }
 
-        .pagination-controls-bottom {
-            border-top: 1px solid var(--color-border);
-            border-bottom: none;
-        }
+
 
         .export-section {
             text-align: center;
@@ -979,7 +1057,8 @@
         .timestamp-badge {
             background: var(--color-panel);
             border: 1px solid var(--color-border);
-            color: var(--color-secondary);
+            color: var(--color-text);
+            opacity: 0.8;
             padding: 0.25rem 0.75rem;
             border-radius: 12px;
             font-size: 0.8rem;
@@ -1002,8 +1081,9 @@
 
         .source-badge.conversation {
             background: rgba(101, 101, 101, 0.1);
-            color: var(--color-secondary);
-            border-color: var(--color-secondary);
+            color: var(--color-text);
+            opacity: 0.8;
+            border-color: var(--color-border);
         }
 
         .header-actions {
@@ -1189,17 +1269,22 @@
                 padding: 0.5rem;
             }
 
-            .dashboard-header {
+            .stats-pagination-header {
                 flex-direction: column;
                 align-items: flex-start;
                 gap: 1rem;
             }
 
-            .memory-stats {
+            .memory-stats-compact {
                 width: 100%;
                 justify-content: space-between;
             }
 
+            .pagination-controls-compact {
+                align-self: stretch;
+                justify-content: center;
+            }
+
             .filter-row {
                 flex-direction: column;
                 align-items: stretch;
@@ -1217,14 +1302,14 @@
             }
 
             .actions-cell {
-                min-width: 120px;
+                min-width: 60px;
+                width: 60px;
             }
 
-            .col-area { width: 15%; }
-            .col-timestamp { width: 15%; }
-            .col-source { width: 25%; }
-            .col-preview { width: 25%; }
-            .col-actions { width: 20%; }
+            .col-select { width: 8%; }
+            .col-metadata { width: 27%; }
+            .col-preview { width: 55%; }
+            .col-actions { width: 10%; }
 
             .memory-detail-modal {
                 width: 98%;
@@ -1258,20 +1343,10 @@
                 padding: 1rem;
             }
 
-            .pagination-controls-top {
-                flex-direction: column;
-                gap: 1rem;
-                align-items: stretch;
-            }
 
-            .pagination-controls {
-                flex-wrap: wrap;
-                justify-content: center;
-            }
 
-            .page-numbers {
+            .pagination-controls {
                 flex-wrap: wrap;
-                justify-content: center;
             }
         }
 
@@ -1324,8 +1399,9 @@
 
         .source-badge.conversation {
             background: rgba(101, 101, 101, 0.1);
-            color: var(--color-secondary);
-            border-color: var(--color-secondary);
+            color: var(--color-text);
+            opacity: 0.8;
+            border-color: var(--color-border);
         }
 
         .header-actions {
@@ -1423,7 +1499,8 @@
 
         .metadata-group h5 {
             margin: 0 0 0.75rem 0;
-            color: var(--color-secondary);
+            color: var(--color-text);
+            opacity: 0.7;
             font-size: 0.9rem;
             font-weight: 600;
             text-transform: uppercase;
@@ -1444,7 +1521,8 @@
         .metadata-label {
             font-size: 0.8rem;
             font-weight: 600;
-            color: var(--color-secondary);
+            color: var(--color-text);
+            opacity: 0.7;
             text-transform: uppercase;
             letter-spacing: 0.3px;
         }
@@ -1528,4 +1606,5 @@
 
         </template>
     </div>
-</div>
+</body>
+</html>

webui/components/settings/memory/memory-detail-modal.html

@@ -1,14 +1,261 @@
-<div x-data>
-    <template x-if="$store.memoryDashboardStore && $store.memoryDashboardStore.detailMemory">
-        <div>
+<html>
+
+<head>
+    <title>Memory Details</title>
+</head>
+
+<style>
+    /* Memory Detail Modal Styles */
+    .modal-header-enhanced {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        padding: 1.5rem;
+        border-bottom: 2px solid var(--color-border);
+        background: var(--color-panel);
+    }
+
+    .memory-title {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .area-badge-large {
+        color: white;
+        padding: 0.5rem 1rem;
+        border-radius: 20px;
+        font-size: 0.8rem;
+        font-weight: bold;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    }
+
+    .memory-meta-quick {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+    }
+
+    .timestamp-badge, .source-badge {
+        padding: 0.25rem 0.75rem;
+        border-radius: 12px;
+        font-size: 0.75rem;
+        font-weight: 500;
+        background: var(--color-panel);
+        border: 1px solid var(--color-border);
+        color: var(--color-text);
+        opacity: 0.8;
+    }
+
+    .source-badge.knowledge {
+        background: rgba(115, 122, 129, 0.1);
+        color: var(--color-primary);
+        border-color: var(--color-primary);
+        opacity: 1;
+    }
+
+    .source-badge.conversation {
+        background: rgba(101, 101, 101, 0.1);
+        color: var(--color-text);
+        opacity: 0.8;
+        border-color: var(--color-border);
+    }
+
+    .header-actions {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .btn-action-header {
+        background: var(--color-background);
+        border: 1px solid var(--color-border);
+        color: var(--color-text);
+        padding: 0.5rem;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .btn-action-header:hover {
+        border-color: var(--color-primary);
+        background: var(--color-panel);
+    }
+
+    .modal-body-enhanced {
+        display: flex;
+        min-height: 60vh;
+        max-height: 70vh;
+    }
+
+    .content-section-main {
+        flex: 1;
+        padding: 1.5rem;
+        overflow-y: auto;
+    }
+
+    .content-block {
+        margin-bottom: 2rem;
+    }
+
+    .content-block h4 {
+        margin: 0 0 1rem 0;
+        color: var(--color-text);
+        font-size: 1.1rem;
+        font-weight: 600;
+        border-bottom: 1px solid var(--color-border);
+        padding-bottom: 0.5rem;
+    }
+
+    .memory-content-display {
+        background: var(--color-panel);
+        border: 1px solid var(--color-border);
+        border-radius: 8px;
+        padding: 1.5rem;
+        line-height: 1.6;
+        color: var(--color-text);
+        white-space: pre-wrap;
+        word-break: break-word;
+        max-height: 300px;
+        overflow-y: auto;
+    }
+
+    .tags-display {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .tag-display {
+        background: var(--color-primary);
+        color: white;
+        padding: 0.25rem 0.75rem;
+        border-radius: 12px;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    .metadata-sidebar {
+        min-width: 300px;
+        max-width: 350px;
+        background: var(--color-panel);
+        border-left: 1px solid var(--color-border);
+        padding: 1.5rem;
+        overflow-y: auto;
+    }
+
+    .metadata-sidebar h4 {
+        margin: 0 0 1rem 0;
+        color: var(--color-text);
+        font-size: 1.1rem;
+        font-weight: 600;
+    }
+
+    .metadata-group {
+        margin-bottom: 1.5rem;
+    }
+
+    .metadata-group h5 {
+        margin: 0 0 0.75rem 0;
+        color: var(--color-text);
+        opacity: 0.7;
+        font-size: 0.9rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    .metadata-item {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        margin-bottom: 0.75rem;
+        padding: 0.5rem;
+        background: var(--color-background);
+        border: 1px solid var(--color-border);
+        border-radius: 6px;
+    }
+
+    .metadata-label {
+        font-size: 0.8rem;
+        font-weight: 600;
+        color: var(--color-text);
+        opacity: 0.7;
+        text-transform: uppercase;
+        letter-spacing: 0.3px;
+    }
+
+    .metadata-value {
+        font-size: 0.9rem;
+        color: var(--color-text);
+        word-break: break-all;
+        line-height: 1.4;
+    }
+
+    .source-file-display {
+        font-family: monospace;
+        background: var(--color-panel);
+        padding: 0.5rem;
+        border-radius: 4px;
+        border: 1px solid var(--color-border);
+    }
+
+    .metadata-actions {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .metadata-actions .btn {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        justify-content: flex-start;
+        font-size: 0.9rem;
+    }
+
+    /* Responsive design for modal */
+    @media (max-width: 768px) {
+        .modal-body-enhanced {
+            flex-direction: column;
+            max-height: 80vh;
+        }
+
+        .metadata-sidebar {
+            min-width: unset;
+            max-width: unset;
+            border-left: none;
+            border-top: 1px solid var(--color-border);
+        }
+
+        .modal-header-enhanced {
+            padding: 1rem;
+        }
+
+        .memory-title {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 0.5rem;
+        }
+
+        .content-section-main,
+        .metadata-sidebar {
+            padding: 1rem;
+        }
+    }
+</style>
+
+<body>
+    <div x-data>
+        <template x-if="$store.memoryDashboardStore && $store.memoryDashboardStore.detailMemory">
+            <div>
                 <!-- Modal Header with Memory Info -->
                 <div class="modal-header-enhanced">
                     <div class="header-left">
                         <div class="memory-title">
                             <span class="area-badge-large"
-                                  :style="`background: linear-gradient(135deg, ${$store.memoryDashboardStore.getAreaColor($store.memoryDashboardStore.detailMemory?.area)} 0%, ${$store.memoryDashboardStore.getAreaColor($store.memoryDashboardStore.detailMemory?.area)}cc 100%)`"
+                                  :style="`background-color: ${$store.memoryDashboardStore.getAreaColor($store.memoryDashboardStore.detailMemory?.area)}`"
                                   x-text="$store.memoryDashboardStore.detailMemory?.area?.toUpperCase() || 'UNKNOWN'"></span>
-                            <h3>Memory Details</h3>
                         </div>
                         <div class="memory-meta-quick">
                             <span class="timestamp-badge" x-text="$store.memoryDashboardStore.formatTimestamp($store.memoryDashboardStore.detailMemory?.timestamp, true)"></span>
@@ -34,7 +281,7 @@
                     <div class="content-section-main">
                         <div class="content-block">
                             <h4>Memory Content</h4>
-                            <div class="memory-content-display" x-html="$store.memoryDashboardStore.detailMemory?.content_full?.replace(/\n/g, '<br>')"></div>
+                            <div class="memory-content-display" x-text="$store.memoryDashboardStore.detailMemory?.content_full"></div>
                         </div>
 
                         <!-- Tags Section -->
@@ -133,5 +380,6 @@
             </div>
         </template>
     </div>
-</template>
-</div>
+</body>
+
+</html>

webui/index.html

@@ -1606,7 +1606,7 @@
     <script>
       if ('serviceWorker' in navigator) {
         window.addEventListener('load', () => {
-          navigator.service-worker.register('js/sw.js').then(registration => {
+          navigator.serviceWorker.register('js/sw.js').then(registration => {
             console.log('SW registered: ', registration);
           }).catch(registrationError => {
             console.log('SW registration failed: ', registrationError);