@samitouri / QOSami_Agents_Zero-2 / commits / a4ef8392

fix: review refinements

fixed / adjusted: 1) After restart, it says that I need to use the agent first and also the memory subdirectory is selected based on current chat context. Instead there should be a selector of memory subdir before Area filter and the memory should be instantiated with first search. Meaning adding a Search button (just rename apply filters) and showing some loading indicator if memory is being instantiated. 2) Limit set to 500 cannot be changed in UI, it seems like there is exactly 500 memories in the DB. It should be a field in filter. 3) Pagination overflows when there's over 12 pages. The easiest way would be to replace enumerated buttons it with a html Select containing all the pages and leave Previous and Next on the sides for easy clicking. Also pagination should repeat below the table, that should be easy as alpine can bind multiple elements to the same model property. 4) The layout of memory rows is very inefficient, I would recommend merging Area, Timestamp, Source into one column called Metadata. Also the text is barely visible, it should be primary text color. Actions should be limited to minimum required as it is static. 5) There should be a selection column for mass delete, copy and export. You can add property "selected" to each memory item, then a checkbox on the left bound to that property. When at least one memory is selected, we would show a new toolbar at the top below pagination that would show the number of selected memories (this would automatically work across pages thanks to the binding to alpine data), copy contents button, delete button, export to file button. There should also be a check/uncheck all checkbox in the header row so users can quickly select and delete all. 6) The detail modal should be opened by clicking anywhere on the memory row. 7) We should use standard modal functionality, not this custom one, it creates problems, for example clicking outside the detail modal now closes even the dashboard. You can use the same data store, just fill a property like "detailMemory" there and open a modal that uses it. It will also be cleaner to have the modal HTML in another file. 8) The detail modal itself looks good. It should show all metadata in the memory (i don't know if currently there are only selected few or if it shows all, maybe it does). 9) Pressing enter in search field does not trigger the search. 10) Buttons on the right of filter are different height than inputs.

Rafael Uzarowski committed Aug 24, 2025 at 19:36 UTC a4ef83928f4bdc32f3bde4ccd8aca448b6e66fdc
4 files changed +1443 -394
python/api/memory_dashboard.py
+245 -35
@@ -1,60 +1,269 @@
1 from python.helpers.api import ApiHandler, Request, Response
2 from python.helpers.memory import Memory
3 +from python.helpers import files
4 +from models import ModelConfig, ModelType
5
6
7 class MemoryDashboard(ApiHandler):
8
9 async def process(self, input: dict, request: Request) -> dict | Response:
10 try:
9 - # Get filter parameters
10 - area_filter = input.get("area", "") # Filter by memory area (MAIN, FRAGMENTS, SOLUTIONS, INSTRUMENTS)
11 - search_query = input.get("search", "") # Full-text search query
12 - limit = input.get("limit", 100) # Number of results to return
11 + action = input.get("action", "search")
12 + if action == "get_memory_subdirs":
13 + return await self._get_memory_subdirs()
14 + elif action == "get_current_memory_subdir":
15 + return await self._get_current_memory_subdir(request)
16 + elif action == "search":
17 + return await self._search_memories(input)
18 + elif action == "delete":
19 + return await self._delete_memory(input)
20 + elif action == "bulk_delete":
21 + return await self._bulk_delete_memories(input)
22 + else:
23 + return {
24 + "success": False,
25 + "error": f"Unknown action: {action}",
26 + "memories": [],
27 + "total_count": 0
28 + }
29 +
30 + except Exception as e:
31 + return {
32 + "success": False,
33 + "error": str(e),
34 + "memories": [],
35 + "total_count": 0
36 + }
37
14 - # Get context and agent
15 - ctxid = input.get("context", "")
16 - context = self.get_context(ctxid)
38 + async def _delete_memory(self, input: dict) -> dict:
39 + """Delete a memory by ID from the specified subdirectory."""
40 + try:
41 + memory_subdir = input.get("memory_subdir", "default")
42 + memory_id = input.get("memory_id")
43
18 - # Check if memory is already initialized to avoid triggering preload
19 - memory_subdir = context.agent0.config.memory_subdir or "default"
44 + if not memory_id:
45 + return {
46 + "success": False,
47 + "error": "Memory ID is required for deletion"
48 + }
49 +
50 + # Check if memory database exists
51 if Memory.index.get(memory_subdir) is None:
21 - # Memory not initialized yet, return empty results
52 + return {
53 + "success": False,
54 + "error": f"Memory database '{memory_subdir}' not initialized"
55 + }
56 +
57 + # Get the MyFaiss database directly
58 + myFaiss_db = Memory.index[memory_subdir]
59 +
60 + # Delete the memory by ID (replicate logic from Memory.delete_documents_by_ids)
61 + rem_docs = await myFaiss_db.aget_by_ids([memory_id])
62 + if rem_docs:
63 + rem_ids = [doc.metadata["id"] for doc in rem_docs]
64 + await myFaiss_db.adelete(ids=rem_ids)
65 + # Persist changes to disk
66 + Memory._save_db_file(myFaiss_db, memory_subdir)
67 + else:
68 + return {
69 + "success": False,
70 + "error": f"Memory with ID '{memory_id}' not found"
71 + }
72 +
73 + return {
74 + "success": True,
75 + "message": f"Memory {memory_id} deleted successfully"
76 + }
77 +
78 + except Exception as e:
79 + return {
80 + "success": False,
81 + "error": f"Failed to delete memory: {str(e)}"
82 + }
83 +
84 + async def _bulk_delete_memories(self, input: dict) -> dict:
85 + """Delete multiple memories by IDs from the specified subdirectory."""
86 + try:
87 + memory_subdir = input.get("memory_subdir", "default")
88 + memory_ids = input.get("memory_ids", [])
89 +
90 + if not memory_ids:
91 + return {
92 + "success": False,
93 + "error": "No memory IDs provided for bulk deletion"
94 + }
95 +
96 + if not isinstance(memory_ids, list):
97 + return {
98 + "success": False,
99 + "error": "Memory IDs must be provided as a list"
100 + }
101 +
102 + # Check if memory database exists
103 + if Memory.index.get(memory_subdir) is None:
104 + return {
105 + "success": False,
106 + "error": f"Memory database '{memory_subdir}' not initialized"
107 + }
108 +
109 + # Get the MyFaiss database directly
110 + myFaiss_db = Memory.index[memory_subdir]
111 +
112 + # Delete memories in batch
113 + deleted_count = 0
114 + failed_ids = []
115 +
116 + for memory_id in memory_ids:
117 + try:
118 + # Get memory to check if it exists
119 + rem_docs = await myFaiss_db.aget_by_ids([memory_id])
120 + if rem_docs:
121 + rem_ids = [doc.metadata["id"] for doc in rem_docs]
122 + await myFaiss_db.adelete(ids=rem_ids)
123 + deleted_count += 1
124 + else:
125 + failed_ids.append(memory_id)
126 + except Exception:
127 + failed_ids.append(memory_id)
128 +
129 + # Persist changes to disk if any deletions were successful
130 + if deleted_count > 0:
131 + Memory._save_db_file(myFaiss_db, memory_subdir)
132 +
133 + if deleted_count == len(memory_ids):
134 return {
135 "success": True,
24 - "memories": [],
25 - "total_count": 0,
26 - "knowledge_count": 0,
27 - "conversation_count": 0,
28 - "areas_count": {},
29 - "search_query": search_query,
30 - "area_filter": area_filter,
31 - "message": "Memory database not yet initialized. Use the agent first to initialize memory."
136 + "message": f"Successfully deleted {deleted_count} memories"
137 + }
138 + elif deleted_count > 0:
139 + return {
140 + "success": True,
141 + "message": f"Successfully deleted {deleted_count} memories. {len(failed_ids)} failed: {failed_ids[:5]}"
142 + }
143 + else:
144 + return {
145 + "success": False,
146 + "error": f"Failed to delete any memories. Not found: {failed_ids[:10]}"
147 + }
148 +
149 + except Exception as e:
150 + return {
151 + "success": False,
152 + "error": f"Failed to bulk delete memories: {str(e)}"
153 + }
154 +
155 + async def _get_current_memory_subdir(self, request: Request) -> dict:
156 + """Get the current memory subdirectory from the active context."""
157 + try:
158 + # Try to get the context from the request
159 + context_id = getattr(request, 'context_id', None)
160 + if not context_id:
161 + # Fallback to default if no context available
162 + return {
163 + "success": True,
164 + "memory_subdir": "default"
165 + }
166 +
167 + # Import AgentContext here to avoid circular imports
168 + from agent import AgentContext
169 +
170 + # Get the context and extract memory subdirectory
171 + context = AgentContext.get(context_id)
172 + if context and hasattr(context, 'config') and hasattr(context.config, 'memory_subdir'):
173 + memory_subdir = context.config.memory_subdir or "default"
174 + return {
175 + "success": True,
176 + "memory_subdir": memory_subdir
177 + }
178 + else:
179 + return {
180 + "success": True,
181 + "memory_subdir": "default"
182 }
183
34 - # Get already initialized memory instance (no initialization triggered)
35 - db = Memory(
36 - agent=context.agent0,
37 - db=Memory.index[memory_subdir],
38 - memory_subdir=memory_subdir,
39 - )
184 + except Exception:
185 + return {
186 + "success": True, # Still success, just fallback to default
187 + "memory_subdir": "default"
188 + }
189 +
190 + async def _get_memory_subdirs(self) -> dict:
191 + """Get available memory subdirectories."""
192 + try:
193 + # Get subdirectories from memory folder
194 + subdirs = files.get_subdirectories("memory")
195 +
196 + # Ensure 'default' is always available
197 + if "default" not in subdirs:
198 + subdirs.insert(0, "default")
199 +
200 + return {
201 + "success": True,
202 + "subdirs": subdirs
203 + }
204 + except Exception as e:
205 + return {
206 + "success": False,
207 + "error": f"Failed to get memory subdirectories: {str(e)}",
208 + "subdirs": ["default"]
209 + }
210 +
211 + async def _search_memories(self, input: dict) -> dict:
212 + """Search memories in the specified subdirectory."""
213 + try:
214 + # Get search parameters
215 + memory_subdir = input.get("memory_subdir", "default")
216 + area_filter = input.get("area", "") # Filter by memory area
217 + search_query = input.get("search", "") # Full-text search query
218 + limit = input.get("limit", 100) # Number of results to return
219 +
220 + # Initialize memory if not already done
221 + if Memory.index.get(memory_subdir) is None:
222 + # Create default embeddings model config
223 + embeddings_config = ModelConfig(
224 + type=ModelType.EMBEDDING,
225 + provider="huggingface",
226 + name="sentence-transformers/all-MiniLM-L6-v2",
227 + ctx_length=512,
228 + limit_requests=0,
229 + limit_input=0,
230 + limit_output=0,
231 + vision=False,
232 + kwargs={}
233 + )
234 +
235 + # Initialize memory database (with log_item=None to prevent status blinking)
236 + db, created = Memory.initialize(
237 + log_item=None,
238 + model_config=embeddings_config,
239 + memory_subdir=memory_subdir,
240 + in_memory=False
241 + )
242 +
243 + # Store in the Memory index
244 + Memory.index[memory_subdir] = db
245 +
246 + # Get the MyFaiss database directly
247 + myFaiss_db = Memory.index[memory_subdir]
248
249 memories = []
250
251 if search_query:
252 # If search query provided, use similarity search
253 threshold = 0.6 # Lower threshold for broader search in dashboard
46 - filter_expr = f"area == '{area_filter}'" if area_filter else ""
254 + comparator = Memory._get_comparator(f"area == '{area_filter}'") if area_filter else None
255
48 - docs = await db.search_similarity_threshold(
49 - query=search_query,
50 - limit=limit,
51 - threshold=threshold,
52 - filter=filter_expr
256 + docs = await myFaiss_db.asearch(
257 + search_query,
258 + search_type="similarity_score_threshold",
259 + k=limit,
260 + score_threshold=threshold,
261 + filter=comparator,
262 )
263 memories = docs
264 else:
265 # If no search query, get all memories from specified area(s)
57 - all_docs = db.db.get_all_docs()
266 + all_docs = myFaiss_db.get_all_docs()
267
268 for doc_id, doc in all_docs.items():
269 # Apply area filter if specified
@@ -68,7 +277,7 @@ class MemoryDashboard(ApiHandler):
277 break
278
279 # Format memories for the dashboard
71 - formatted_memories = []
280 + formatted_memories: list[dict] = []
281 for memory in memories:
282 metadata = memory.metadata
283
@@ -104,8 +313,8 @@ class MemoryDashboard(ApiHandler):
313 conversation_count = total_memories - knowledge_count
314
315 areas_count: dict[str, int] = {}
107 - for memory in formatted_memories:
108 - area = memory["area"]
316 + for memory_dict in formatted_memories:
317 + area = memory_dict["area"]
318 areas_count[area] = areas_count.get(area, 0) + 1
319
320 return {
@@ -116,7 +325,8 @@ class MemoryDashboard(ApiHandler):
325 "conversation_count": conversation_count,
326 "areas_count": areas_count,
327 "search_query": search_query,
119 - "area_filter": area_filter
328 + "area_filter": area_filter,
329 + "memory_subdir": memory_subdir
330 }
331
332 except Exception as e:
webui/components/settings/memory/memory-dashboard-store.js
+480 -138
@@ -1,77 +1,215 @@
1 import { createStore } from "/js/AlpineStore.js";
2 import { getContext } from "/index.js";
3 import * as API from "/js/api.js";
4 +import { openModal, closeModal } from "/js/modals.js";
5
5 -const model = {
6 +// Memory Dashboard Store
7 +const memoryDashboardStore = {
8 + // Data
9 memories: [],
7 - loading: true,
10 + currentPage: 1,
11 + itemsPerPage: 10,
12 +
13 + // State
14 + loading: false,
15 + loadingSubdirs: false,
16 + initializingMemory: false,
17 error: null,
18 + message: null,
19
10 - // Filter states
11 - areaFilter: "",
20 + // Memory subdirectories
21 + memorySubdirs: [],
22 + selectedMemorySubdir: "default",
23 + memoryInitialized: {}, // Track which subdirs have been initialized
24 +
25 + // Search and filters
26 searchQuery: "",
13 - currentPage: 1,
14 - itemsPerPage: 10,
27 + areaFilter: "",
28 + limit: parseInt(localStorage.getItem('memoryDashboard_limit') || '100'),
29
16 - // Statistics
30 + // Stats
31 totalCount: 0,
32 knowledgeCount: 0,
33 conversationCount: 0,
34 areasCount: {},
35
22 - // UI state
23 - selectedMemory: null,
24 - showDetailModal: false,
25 - message: null, // For displaying initialization messages
36 + // Memory detail modal (standard modal approach)
37 + detailMemory: null,
38 +
39 + // Polling
40 + pollingInterval: null,
41 + pollingEnabled: true,
42
43 async initialize() {
28 - await this.loadMemories();
44 + // Reset state when opening (but keep directory from context)
45 + this.currentPage = 1;
46 + this.searchQuery = "";
47 + this.areaFilter = "";
48 +
49 + // Get current memory subdirectory from application context
50 + await this.getCurrentMemorySubdir();
51 +
52 + await this.loadMemorySubdirs();
53 +
54 + // Automatically search with selected subdirectory
55 + if (this.selectedMemorySubdir) {
56 + await this.searchMemories();
57 + }
58 +
59 + // Start polling for live updates as soon as dashboard is open
60 + this.startPolling();
61 },
62
31 - async loadMemories() {
32 - this.loading = true;
63 + async getCurrentMemorySubdir() {
64 + try {
65 + // Try to get current memory subdirectory from the backend
66 + const response = await API.callJsonApi("memory_dashboard", {
67 + action: "get_current_memory_subdir"
68 + });
69 +
70 + if (response.success && response.memory_subdir) {
71 + this.selectedMemorySubdir = response.memory_subdir;
72 + } else {
73 + // Fallback to default
74 + this.selectedMemorySubdir = "default";
75 + }
76 + } catch (error) {
77 + console.error("Failed to get current memory subdirectory:", error);
78 + this.selectedMemorySubdir = "default";
79 + }
80 + },
81 +
82 + async loadMemorySubdirs() {
83 + this.loadingSubdirs = true;
84 this.error = null;
34 - this.message = null;
85
86 try {
87 const response = await API.callJsonApi("memory_dashboard", {
38 - context: getContext(),
88 + action: "get_memory_subdirs"
89 + });
90 +
91 + if (response.success) {
92 + let subdirs = response.subdirs || ["default"];
93 +
94 + // Sort alphabetically but ensure "default" is always first
95 + subdirs = subdirs.filter(dir => dir !== "default").sort();
96 + if (response.subdirs && response.subdirs.includes("default")) {
97 + subdirs.unshift("default");
98 + } else {
99 + subdirs.unshift("default");
100 + }
101 +
102 + this.memorySubdirs = subdirs;
103 +
104 + // Ensure the currently selected subdirectory exists in the list
105 + if (!this.memorySubdirs.includes(this.selectedMemorySubdir)) {
106 + this.selectedMemorySubdir = "default";
107 + }
108 + } else {
109 + this.error = response.error || "Failed to load memory subdirectories";
110 + this.memorySubdirs = ["default"];
111 + this.selectedMemorySubdir = "default";
112 + }
113 + } catch (error) {
114 + this.error = error.message || "Failed to load memory subdirectories";
115 + this.memorySubdirs = ["default"];
116 + // Only fallback to default if current selection is not available
117 + if (!this.memorySubdirs.includes(this.selectedMemorySubdir)) {
118 + this.selectedMemorySubdir = "default";
119 + }
120 + console.error("Memory subdirectory loading error:", error);
121 + } finally {
122 + this.loadingSubdirs = false;
123 + }
124 + },
125 +
126 + async searchMemories(silent = false) {
127 + // Save limit to localStorage for persistence
128 + localStorage.setItem('memoryDashboard_limit', this.limit.toString());
129 +
130 + if (!silent) {
131 + this.loading = true;
132 + this.error = null;
133 + this.message = null;
134 +
135 + // Check if this memory subdirectory needs initialization
136 + if (!this.memoryInitialized[this.selectedMemorySubdir]) {
137 + this.initializingMemory = true;
138 + }
139 + }
140 +
141 + try {
142 + const response = await API.callJsonApi("memory_dashboard", {
143 + action: "search",
144 + memory_subdir: this.selectedMemorySubdir,
145 area: this.areaFilter,
146 search: this.searchQuery,
41 - limit: 500 // Get more for client-side pagination
147 + limit: this.limit
148 });
149
44 - if (response.success) {
45 - this.memories = response.memories || []; // Already sorted by API
150 + if (response.success) {
151 + // Add selected property to each memory item for mass selection
152 + this.memories = (response.memories || []).map(memory => ({
153 + ...memory,
154 + selected: memory.selected || false
155 + }));
156 this.totalCount = response.total_count || 0;
157 this.knowledgeCount = response.knowledge_count || 0;
158 this.conversationCount = response.conversation_count || 0;
159 this.areasCount = response.areas_count || {};
50 - this.message = response.message || null; // Handle initialization messages
51 - this.currentPage = 1; // Reset to first page when loading new data
160 +
161 + if (!silent) {
162 + this.message = response.message || null;
163 + this.currentPage = 1; // Reset to first page when loading new data
164 + } else {
165 + // For silent updates, adjust current page if it exceeds available pages
166 + if (this.currentPage > this.totalPages && this.totalPages > 0) {
167 + this.currentPage = this.totalPages;
168 + }
169 + }
170 +
171 + // Mark this subdirectory as initialized
172 + this.memoryInitialized[this.selectedMemorySubdir] = true;
173 } else {
53 - this.error = response.error || "Failed to load memories";
174 + if (!silent) {
175 + this.error = response.error || "Failed to search memories";
176 + this.memories = [];
177 + this.message = null;
178 + } else {
179 + // For silent updates, just log the error but don't break the UI
180 + console.warn("Memory dashboard polling failed:", response.error);
181 + }
182 + }
183 + } catch (error) {
184 + if (!silent) {
185 + this.error = error.message || "Failed to search memories";
186 this.memories = [];
187 this.message = null;
188 + console.error("Memory search error:", error);
189 + } else {
190 + // For silent updates, just log the error but don't break the UI
191 + console.warn("Memory dashboard polling error:", error);
192 }
57 - } catch (error) {
58 - this.error = error.message || "Failed to load memories";
59 - this.memories = [];
60 - this.message = null;
61 - console.error("Memory dashboard error:", error);
193 } finally {
63 - this.loading = false;
194 + if (!silent) {
195 + this.loading = false;
196 + this.initializingMemory = false;
197 + }
198 }
199 },
200
67 - async applyFilters() {
68 - await this.loadMemories();
69 - },
70 -
71 - clearFilters() {
201 + async clearSearch() {
202 this.areaFilter = "";
203 this.searchQuery = "";
74 - this.applyFilters();
204 + this.currentPage = 1;
205 +
206 + // Immediately trigger a new search with cleared filters
207 + await this.searchMemories();
208 + },
209 +
210 + async onMemorySubdirChange() {
211 + // Clear current results when subdirectory changes
212 + await this.clearSearch(); // Polling continues with new subdirectory
213 },
214
215 // Pagination
@@ -80,9 +218,9 @@ const model = {
218 },
219
220 get paginatedMemories() {
83 - const startIndex = (this.currentPage - 1) * this.itemsPerPage;
84 - const endIndex = startIndex + this.itemsPerPage;
85 - return this.memories.slice(startIndex, endIndex);
221 + const start = (this.currentPage - 1) * this.itemsPerPage;
222 + const end = start + this.itemsPerPage;
223 + return this.memories.slice(start, end);
224 },
225
226 goToPage(page) {
@@ -103,152 +241,356 @@ const model = {
241 }
242 },
243
106 - // Memory details
107 - showMemoryDetails(memory) {
108 - this.selectedMemory = memory;
109 - this.showDetailModal = true;
244 + // Mass selection
245 + get selectedMemories() {
246 + return this.memories.filter(memory => memory.selected);
247 },
248
112 - closeDetailModal() {
113 - this.showDetailModal = false;
114 - this.selectedMemory = null;
249 + get selectedCount() {
250 + return this.selectedMemories.length;
251 + },
252 +
253 + get allSelected() {
254 + return this.memories.length > 0 && this.memories.every(memory => memory.selected);
255 + },
256 +
257 + get someSelected() {
258 + return this.memories.some(memory => memory.selected);
259 + },
260 +
261 + toggleSelectAll() {
262 + const shouldSelectAll = !this.allSelected;
263 + this.memories.forEach(memory => {
264 + memory.selected = shouldSelectAll;
265 + });
266 + },
267 +
268 +
269 +
270 + clearSelection() {
271 + this.memories.forEach(memory => {
272 + memory.selected = false;
273 + });
274 },
275
276 + // Bulk operations
277 + async bulkDeleteMemories() {
278 + const selectedMemories = this.selectedMemories;
279 + if (selectedMemories.length === 0) return;
280
281 + const confirmMessage = `Are you sure you want to delete ${selectedMemories.length} selected memories? This cannot be undone.`;
282 + if (!confirm(confirmMessage)) return;
283
119 - // Utility methods
120 - formatTimestamp(timestamp, compact = false) {
121 - if (!timestamp || timestamp === "unknown") return "Unknown";
284 try {
123 - // Parse timestamp - assume UTC if no timezone specified
124 - let date;
125 - if (timestamp.includes('T') || timestamp.includes('Z') || timestamp.includes('+')) {
126 - // ISO format with timezone info
127 - date = new Date(timestamp);
285 + this.loading = true;
286 + const response = await API.callJsonApi("memory_dashboard", {
287 + action: "bulk_delete",
288 + memory_subdir: this.selectedMemorySubdir,
289 + memory_ids: selectedMemories.map(memory => memory.id)
290 + });
291 +
292 + if (response.success) {
293 + this.showToast(`Successfully deleted ${selectedMemories.length} memories`, "success");
294 +
295 + // Let polling refresh the data instead of manual manipulation
296 + // Trigger an immediate refresh to get updated state from backend
297 + await this.searchMemories(true); // silent refresh
298 } else {
129 - // Assume UTC for plain format "YYYY-MM-DD HH:MM:SS"
130 - date = new Date(timestamp + ' UTC');
299 + this.showToast(response.error || "Failed to delete selected memories", "error");
300 }
301 + } catch (error) {
302 + this.showToast(error.message || "Failed to delete selected memories", "error");
303 + } finally {
304 + this.loading = false;
305 + }
306 + },
307
133 - // Convert to local time and format
134 - if (compact) {
135 - // Compact format for table view
136 - return date.toLocaleString(undefined, {
137 - month: '2-digit',
138 - day: '2-digit',
139 - hour: '2-digit',
140 - minute: '2-digit',
141 - hour12: false
142 - });
143 - } else {
144 - // Full format for detail view
145 - return date.toLocaleString(undefined, {
146 - year: 'numeric',
147 - month: '2-digit',
148 - day: '2-digit',
149 - hour: '2-digit',
150 - minute: '2-digit',
151 - second: '2-digit',
152 - hour12: false
153 - });
308 + // Helper method to format a complete memory with all metadata
309 + formatMemoryForCopy(memory) {
310 + let formatted = `=== Memory ID: ${memory.id} ===
311 +Area: ${memory.area}
312 +Timestamp: ${this.formatTimestamp(memory.timestamp)}
313 +Source: ${memory.knowledge_source ? 'Knowledge' : 'Conversation'}
314 +${memory.source_file ? `File: ${memory.source_file}` : ''}
315 +${memory.tags && memory.tags.length > 0 ? `Tags: ${memory.tags.join(', ')}` : ''}`;
316 +
317 + // Add custom metadata if present
318 + if (memory.metadata && typeof memory.metadata === 'object' && Object.keys(memory.metadata).length > 0) {
319 + formatted += '\n\nMetadata:';
320 + for (const [key, value] of Object.entries(memory.metadata)) {
321 + const displayValue = typeof value === 'object' ? JSON.stringify(value, null, 2) : value;
322 + formatted += `\n${key}: ${displayValue}`;
323 }
155 - } catch {
156 - return timestamp;
324 + }
325 +
326 + formatted += `\n\nContent:
327 +${memory.content_full}
328 +
329 +`;
330 + return formatted;
331 + },
332 +
333 + bulkCopyMemories() {
334 + const selectedMemories = this.selectedMemories;
335 + if (selectedMemories.length === 0) return;
336 +
337 + const content = selectedMemories.map(memory => this.formatMemoryForCopy(memory)).join('\n');
338 +
339 + this.copyToClipboard(content);
340 + this.showToast(`Copied ${selectedMemories.length} memories with metadata to clipboard`, "success");
341 + },
342 +
343 + bulkExportMemories() {
344 + const selectedMemories = this.selectedMemories;
345 + if (selectedMemories.length === 0) return;
346 +
347 + const exportData = {
348 + export_timestamp: new Date().toISOString(),
349 + memory_subdir: this.selectedMemorySubdir,
350 + total_memories: selectedMemories.length,
351 + memories: selectedMemories.map(memory => ({
352 + id: memory.id,
353 + area: memory.area,
354 + timestamp: memory.timestamp,
355 + content: memory.content_full,
356 + tags: memory.tags || [],
357 + knowledge_source: memory.knowledge_source,
358 + source_file: memory.source_file || null,
359 + metadata: memory.metadata || {}
360 + }))
361 + };
362 +
363 + const jsonString = JSON.stringify(exportData, null, 2);
364 + const blob = new Blob([jsonString], { type: 'application/json' });
365 + const url = URL.createObjectURL(blob);
366 +
367 + const timestamp = new Date().toISOString().split('T')[0];
368 + const filename = `memories_${this.selectedMemorySubdir}_selected_${selectedMemories.length}_${timestamp}.json`;
369 +
370 + const a = document.createElement('a');
371 + a.href = url;
372 + a.download = filename;
373 + document.body.appendChild(a);
374 + a.click();
375 + document.body.removeChild(a);
376 + URL.revokeObjectURL(url);
377 +
378 + this.showToast(`Exported ${selectedMemories.length} selected memories to ${filename}`, "success");
379 + },
380 +
381 + // Memory detail modal (standard approach)
382 + showMemoryDetails(memory) {
383 + this.detailMemory = memory;
384 + // Use global modal system
385 + openModal("settings/memory/memory-detail-modal.html");
386 + },
387 +
388 + closeMemoryDetails() {
389 + this.detailMemory = null;
390 + },
391 +
392 + // Utilities
393 + formatTimestamp(timestamp, compact = false) {
394 + if (!timestamp || timestamp === "unknown") {
395 + return "Unknown";
396 + }
397 +
398 + const date = new Date(timestamp);
399 + if (isNaN(date.getTime())) {
400 + return "Invalid Date";
401 + }
402 +
403 + if (compact) {
404 + // For table display: MM/DD HH:mm
405 + return date.toLocaleDateString("en-US", {
406 + month: "2-digit",
407 + day: "2-digit",
408 + }) + " " + date.toLocaleTimeString("en-US", {
409 + hour12: false,
410 + hour: "2-digit",
411 + minute: "2-digit"
412 + });
413 + } else {
414 + // For details: Full format
415 + return date.toLocaleDateString("en-US", {
416 + year: "numeric",
417 + month: "long",
418 + day: "numeric",
419 + }) + " at " + date.toLocaleTimeString("en-US", {
420 + hour12: true,
421 + hour: "numeric",
422 + minute: "2-digit"
423 + });
424 }
425 },
426
427 formatTags(tags) {
161 - if (!Array.isArray(tags) || tags.length === 0) return "";
428 + if (!Array.isArray(tags) || tags.length === 0) return "None";
429 return tags.join(", ");
430 },
431
165 - getAreaColor(area) {
166 - if (!area) return '#757575'; // Default color for undefined/null area
167 -
432 + getAreaColor(area) {
433 const colors = {
169 - 'main': '#2196F3',
170 - 'fragments': '#4CAF50',
171 - 'solutions': '#FF9800',
172 - 'instruments': '#9C27B0'
434 + "MAIN": "#3b82f6", // blue
435 + "FRAGMENTS": "#10b981", // emerald
436 + "SOLUTIONS": "#8b5cf6", // violet
437 + "INSTRUMENTS": "#f59e0b" // amber
438 };
174 - return colors[area.toLowerCase()] || '#757575';
439 + return colors[area] || "#6b7280"; // gray for unknown
440 },
441
442 copyToClipboard(text) {
178 - navigator.clipboard.writeText(text).then(() => {
179 - // Could show a toast notification here
180 - console.log("Copied to clipboard");
181 - }).catch(err => {
182 - console.error("Failed to copy: ", err);
183 - });
443 + if (navigator.clipboard && window.isSecureContext) {
444 + navigator.clipboard.writeText(text).then(() => {
445 + this.showToast("Copied to clipboard!", "success");
446 + }).catch(err => {
447 + console.error("Clipboard copy failed:", err);
448 + this.fallbackCopyToClipboard(text);
449 + });
450 + } else {
451 + this.fallbackCopyToClipboard(text);
452 + }
453 },
454
186 - async deleteMemory(memory) {
187 - // Confirm deletion
188 - const confirmMessage = `Are you sure you want to delete this memory?\n\nArea: ${memory.area}\nContent: ${memory.content_preview}`;
189 - if (!confirm(confirmMessage)) {
455 + fallbackCopyToClipboard(text) {
456 + const textArea = document.createElement("textarea");
457 + textArea.value = text;
458 + textArea.style.position = "fixed";
459 + textArea.style.left = "-999999px";
460 + textArea.style.top = "-999999px";
461 + document.body.appendChild(textArea);
462 + textArea.focus();
463 + textArea.select();
464 + try {
465 + document.execCommand('copy');
466 + this.showToast("Copied to clipboard!", "success");
467 + } catch (err) {
468 + console.error("Fallback clipboard copy failed:", err);
469 + this.showToast("Failed to copy to clipboard", "error");
470 + }
471 + document.body.removeChild(textArea);
472 + },
473 +
474 + async deleteMemory(memory) {
475 + if (!confirm(`Are you sure you want to delete this memory from ${memory.area}?`)) {
476 return;
477 }
478
479 try {
194 - const response = await API.callJsonApi("memory_delete", {
195 - context: getContext(),
480 + // Check if this is the memory currently being viewed in detail modal
481 + const isViewingThisMemory = this.detailMemory && this.detailMemory.id === memory.id;
482 +
483 + const response = await API.callJsonApi("memory_dashboard", {
484 + action: "delete",
485 + memory_subdir: this.selectedMemorySubdir,
486 memory_id: memory.id
487 });
488
489 if (response.success) {
200 - // Close detail modal if the deleted memory is currently shown
201 - if (this.selectedMemory && this.selectedMemory.id === memory.id) {
202 - this.closeDetailModal();
203 - }
490 + this.showToast("Memory deleted successfully", "success");
491
205 - // Remove memory from local array
206 - this.memories = this.memories.filter(m => m.id !== memory.id);
207 - this.totalCount = this.memories.length;
208 -
209 - // Update statistics
210 - if (memory.knowledge_source) {
211 - this.knowledgeCount = Math.max(0, this.knowledgeCount - 1);
212 - } else {
213 - this.conversationCount = Math.max(0, this.conversationCount - 1);
214 - }
215 -
216 - // Update areas count
217 - if (this.areasCount[memory.area]) {
218 - this.areasCount[memory.area] = Math.max(0, this.areasCount[memory.area] - 1);
219 - if (this.areasCount[memory.area] === 0) {
220 - delete this.areasCount[memory.area];
221 - }
492 + // If we were viewing this memory in detail modal, close it
493 + if (isViewingThisMemory) {
494 + this.detailMemory = null;
495 + closeModal(); // Close the detail modal
496 }
497
224 - // Adjust current page if needed
225 - if (this.paginatedMemories.length === 0 && this.currentPage > 1) {
226 - this.currentPage--;
227 - }
228 -
229 - console.log("Memory deleted successfully");
498 + // Let polling refresh the data instead of manual manipulation
499 + // Trigger an immediate refresh to get updated state from backend
500 + await this.searchMemories(true); // silent refresh
501 } else {
231 - alert("Failed to delete memory: " + (response.error || "Unknown error"));
502 + this.showToast(`Failed to delete memory: ${response.error}`, "error");
503 }
504 } catch (error) {
234 - console.error("Delete memory error:", error);
235 - alert("Failed to delete memory: " + error.message);
505 + console.error("Memory deletion error:", error);
506 + this.showToast("Failed to delete memory", "error");
507 }
508 },
509
239 - // Export functionality (optional)
510 exportMemories() {
241 - const dataStr = JSON.stringify(this.memories, null, 2);
242 - const dataBlob = new Blob([dataStr], {type: 'application/json'});
243 - const url = URL.createObjectURL(dataBlob);
244 - const link = document.createElement('a');
245 - link.href = url;
246 - link.download = `memory-export-${new Date().toISOString().split('T')[0]}.json`;
247 - link.click();
248 - URL.revokeObjectURL(url);
511 + if (this.memories.length === 0) {
512 + this.showToast("No memories to export", "warning");
513 + return;
514 + }
515 +
516 + try {
517 + const exportData = {
518 + memory_subdir: this.selectedMemorySubdir,
519 + export_timestamp: new Date().toISOString(),
520 + total_memories: this.memories.length,
521 + search_query: this.searchQuery,
522 + area_filter: this.areaFilter,
523 + memories: this.memories.map(memory => ({
524 + id: memory.id,
525 + area: memory.area,
526 + timestamp: memory.timestamp,
527 + content: memory.content_full,
528 + metadata: memory.metadata
529 + }))
530 + };
531 +
532 + const blob = new Blob([JSON.stringify(exportData, null, 2)], {
533 + type: 'application/json'
534 + });
535 + const url = URL.createObjectURL(blob);
536 + const a = document.createElement('a');
537 + a.href = url;
538 + a.download = `memory-export-${this.selectedMemorySubdir}-${new Date().toISOString().split('T')[0]}.json`;
539 + document.body.appendChild(a);
540 + a.click();
541 + document.body.removeChild(a);
542 + URL.revokeObjectURL(url);
543 +
544 + this.showToast("Memory export completed", "success");
545 + } catch (error) {
546 + console.error("Memory export error:", error);
547 + this.showToast("Failed to export memories", "error");
548 + }
549 + },
550 +
551 + startPolling() {
552 + if (!this.pollingEnabled || this.pollingInterval) {
553 + return; // Already polling or disabled
554 + }
555 +
556 + this.pollingInterval = setInterval(async () => {
557 + // Silently refresh using existing search logic
558 + await this.searchMemories(true); // silent = true
559 + }, 2000); // Poll every 3 seconds - reasonable for active user interactions
560 + },
561 +
562 + stopPolling() {
563 + if (this.pollingInterval) {
564 + clearInterval(this.pollingInterval);
565 + this.pollingInterval = null;
566 + }
567 + },
568 +
569 + // Call this when the dialog/component is closed or destroyed
570 + cleanup() {
571 + this.stopPolling();
572 + // Clear data without triggering a new search (component is being destroyed)
573 + this.areaFilter = "";
574 + this.searchQuery = "";
575 + this.memories = [];
576 + this.totalCount = 0;
577 + this.knowledgeCount = 0;
578 + this.conversationCount = 0;
579 + this.areasCount = {};
580 + this.message = null;
581 + this.currentPage = 1;
582 + },
583 +
584 + showToast(message, type = "info") {
585 + // Use global toast function if available
586 + if (typeof toast === 'function') {
587 + toast(message, type);
588 + } else {
589 + console.log(`[${type.toUpperCase()}] ${message}`);
590 + }
591 }
592 };
593
252 -const store = createStore("memoryDashboardStore", model);
594 +const store = createStore("memoryDashboardStore", memoryDashboardStore);
595
596 export { store };
webui/components/settings/memory/memory-dashboard.html
+581 -221
@@ -1,16 +1,10 @@
1 -<html>
1 +<script type="module">
2 + import { store } from "/components/settings/memory/memory-dashboard-store.js";
3 +</script>
4
3 -<head>
4 - <title>Memory Dashboard</title>
5 - <script type="module">
6 - import { store } from "/components/settings/memory/memory-dashboard-store.js";
7 - </script>
8 -</head>
9 -
10 -<body>
11 - <div x-data>
12 - <template x-if="$store.memoryDashboardStore">
13 - <div x-init="$store.memoryDashboardStore.initialize()" class="memory-dashboard">
5 +<div x-data>
6 + <template x-if="$store.memoryDashboardStore">
7 + <div x-init="$store.memoryDashboardStore.initialize()" class="memory-dashboard">
8
9 <!-- Header with title and statistics -->
10 <div class="dashboard-header">
@@ -31,32 +25,54 @@
25 </div>
26 </div>
27
34 - <!-- Filters -->
28 + <!-- Search and Filters -->
29 <div class="filters-section">
30 <div class="filter-row">
31 + <div class="filter-group">
32 + <label for="memory-subdir-select">Memory Directory:</label>
33 + <select id="memory-subdir-select"
34 + x-model="$store.memoryDashboardStore.selectedMemorySubdir"
35 + @change="$store.memoryDashboardStore.onMemorySubdirChange()"
36 + :disabled="$store.memoryDashboardStore.loadingSubdirs">
37 + <template x-for="subdir in $store.memoryDashboardStore.memorySubdirs" :key="subdir">
38 + <option :value="subdir" x-text="subdir"></option>
39 + </template>
40 + </select>
41 + <span x-show="$store.memoryDashboardStore.loadingSubdirs" class="loading-text">Loading...</span>
42 + </div>
43 +
44 <div class="filter-group">
45 <label for="area-filter">Area:</label>
46 <select id="area-filter" x-model="$store.memoryDashboardStore.areaFilter">
47 <option value="">All Areas</option>
41 - <option value="main">Main</option>
42 - <option value="fragments">Fragments</option>
43 - <option value="solutions">Solutions</option>
44 - <option value="instruments">Instruments</option>
48 + <option value="MAIN">Main</option>
49 + <option value="FRAGMENTS">Fragments</option>
50 + <option value="SOLUTIONS">Solutions</option>
51 + <option value="INSTRUMENTS">Instruments</option>
52 </select>
53 </div>
54
55 <div class="filter-group">
56 <label for="search-input">Search:</label>
57 <input type="text" id="search-input" x-model="$store.memoryDashboardStore.searchQuery"
51 - placeholder="Search memory content..." />
58 + placeholder="Search memory content..."
59 + @keyup.enter="$store.memoryDashboardStore.searchMemories()" />
60 + </div>
61 +
62 + <div class="filter-group">
63 + <label for="limit-input">Limit:</label>
64 + <input type="number" id="limit-input" x-model.number="$store.memoryDashboardStore.limit"
65 + min="10" max="1000" step="10"
66 + style="min-width: 100px;" />
67 </div>
68
69 <div class="filter-actions">
55 - <button class="btn primary slim" @click="$store.memoryDashboardStore.applyFilters()"
56 - :disabled="$store.memoryDashboardStore.loading">
57 - Apply Filters
70 + <button class="btn primary slim" @click="$store.memoryDashboardStore.searchMemories()"
71 + :disabled="$store.memoryDashboardStore.loading || $store.memoryDashboardStore.loadingSubdirs">
72 + <span x-show="!$store.memoryDashboardStore.initializingMemory">Search</span>
73 + <span x-show="$store.memoryDashboardStore.initializingMemory">Initializing Memory...</span>
74 </button>
59 - <button class="btn slim" @click="$store.memoryDashboardStore.clearFilters()">
75 + <button class="btn slim" @click="$store.memoryDashboardStore.clearSearch()">
76 Clear
77 </button>
78 </div>
@@ -66,7 +82,8 @@
82 <!-- Loading state -->
83 <div x-show="$store.memoryDashboardStore.loading" class="loading-state">
84 <div class="loading-spinner"></div>
69 - <span>Loading memories...</span>
85 + <span x-show="!$store.memoryDashboardStore.initializingMemory">Searching memories...</span>
86 + <span x-show="$store.memoryDashboardStore.initializingMemory">Initializing memory database...</span>
87 </div>
88
89 <!-- Error state -->
@@ -93,15 +110,13 @@
110 Previous
111 </button>
112
96 - <span class="page-numbers">
113 + <select class="page-select"
114 + x-model.number="$store.memoryDashboardStore.currentPage"
115 + @change="$store.memoryDashboardStore.goToPage($store.memoryDashboardStore.currentPage)">
116 <template x-for="page in Array.from({length: $store.memoryDashboardStore.totalPages}, (_, i) => i + 1)" :key="page">
98 - <button class="page-btn"
99 - @click="$store.memoryDashboardStore.goToPage(page)"
100 - :class="{'active': page === $store.memoryDashboardStore.currentPage}"
101 - x-text="page">
102 - </button>
117 + <option :value="page" x-text="'Page ' + page"></option>
118 </template>
104 - </span>
119 + </select>
120
121 <button class="btn slim" @click="$store.memoryDashboardStore.nextPage()"
122 :disabled="$store.memoryDashboardStore.currentPage === $store.memoryDashboardStore.totalPages">
@@ -110,44 +125,102 @@
125 </div>
126 </div>
127
128 + <!-- Mass action toolbar -->
129 + <div x-show="$store.memoryDashboardStore.selectedCount > 0" class="mass-action-toolbar">
130 + <div class="selection-info">
131 + <span x-text="$store.memoryDashboardStore.selectedCount"></span> memories selected
132 + </div>
133 +
134 + <div class="mass-actions">
135 + <button class="btn-mass copy" @click="$store.memoryDashboardStore.bulkCopyMemories()"
136 + title="Copy Selected Content">
137 + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
138 + <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
139 + <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
140 + </svg>
141 + Copy
142 + </button>
143 +
144 + <button class="btn-mass export" @click="$store.memoryDashboardStore.bulkExportMemories()"
145 + title="Export Selected Memories">
146 + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
147 + <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
148 + <polyline points="7,10 12,15 17,10"></polyline>
149 + <line x1="12" y1="15" x2="12" y2="3"></line>
150 + </svg>
151 + Export
152 + </button>
153 +
154 + <button class="btn-mass delete" @click="$store.memoryDashboardStore.bulkDeleteMemories()"
155 + title="Delete Selected Memories">
156 + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
157 + <polyline points="3,6 5,6 21,6"></polyline>
158 + <path d="M19,6V20a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
159 + <line x1="10" y1="11" x2="10" y2="17"></line>
160 + <line x1="14" y1="11" x2="14" y2="17"></line>
161 + </svg>
162 + Delete
163 + </button>
164 +
165 + <button class="btn-mass clear" @click="$store.memoryDashboardStore.clearSelection()"
166 + title="Clear Selection">
167 + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
168 + <line x1="18" y1="6" x2="6" y2="18"></line>
169 + <line x1="6" y1="6" x2="18" y2="18"></line>
170 + </svg>
171 + Clear
172 + </button>
173 + </div>
174 + </div>
175 +
176 <div class="table-wrapper">
177 <table class="memory-table">
178 <thead>
179 <tr>
117 - <th class="col-area">Area</th>
118 - <th class="col-timestamp">Timestamp</th>
119 - <th class="col-source">Source</th>
180 + <th class="col-select">
181 + <input type="checkbox"
182 + :checked="$store.memoryDashboardStore.allSelected"
183 + :indeterminate="$store.memoryDashboardStore.someSelected && !$store.memoryDashboardStore.allSelected"
184 + @change="$store.memoryDashboardStore.toggleSelectAll()"
185 + title="Select/Deselect All" />
186 + </th>
187 + <th class="col-metadata">Metadata</th>
188 <th class="col-preview">Preview</th>
189 <th class="col-actions">Actions</th>
190 </tr>
191 </thead>
192 <tbody>
193 <template x-for="memory in $store.memoryDashboardStore.paginatedMemories" :key="memory.id">
126 - <tr class="memory-row">
127 - <!-- Area with color indicator -->
128 - <td class="area-cell">
129 - <span class="area-badge"
130 - :style="`background-color: ${$store.memoryDashboardStore.getAreaColor(memory.area)}`"
131 - x-text="memory.area.toUpperCase()"></span>
194 + <tr class="memory-row" :class="{'selected': memory.selected}"
195 + @click="$store.memoryDashboardStore.showMemoryDetails(memory)"
196 + style="cursor: pointer;">
197 + <!-- Selection checkbox -->
198 + <td class="select-cell" @click.stop>
199 + <input type="checkbox"
200 + x-model="memory.selected" />
201 </td>
202
134 - <!-- Timestamp -->
135 - <td class="timestamp-cell">
136 - <span x-text="$store.memoryDashboardStore.formatTimestamp(memory.timestamp, true)"
137 - :title="$store.memoryDashboardStore.formatTimestamp(memory.timestamp, false)"></span>
138 - </td>
139 -
140 - <!-- Source -->
141 - <td class="source-cell">
142 - <template x-if="memory.knowledge_source">
143 - <div class="source-info">
144 - <span class="source-type knowledge">Knowledge</span>
145 - <span class="source-file" x-text="memory.source_file" x-show="memory.source_file"></span>
203 + <!-- Metadata (merged Area, Timestamp, Source) -->
204 + <td class="metadata-cell">
205 + <div class="metadata-info">
206 + <div class="metadata-row">
207 + <span class="area-badge"
208 + :style="`background-color: ${$store.memoryDashboardStore.getAreaColor(memory.area)}`"
209 + x-text="memory.area"></span>
210 + </div>
211 + <div class="metadata-row metadata-timestamp">
212 + <span x-text="$store.memoryDashboardStore.formatTimestamp(memory.timestamp, true)"
213 + :title="$store.memoryDashboardStore.formatTimestamp(memory.timestamp, false)"></span>
214 </div>
147 - </template>
148 - <template x-if="!memory.knowledge_source">
149 - <span class="source-type conversation">Conversation</span>
150 - </template>
215 + <div class="metadata-row">
216 + <template x-if="memory.knowledge_source">
217 + <span class="source-type knowledge">📚 Knowledge</span>
218 + </template>
219 + <template x-if="!memory.knowledge_source">
220 + <span class="source-type conversation">💬 Conversation</span>
221 + </template>
222 + </div>
223 + </div>
224 </td>
225
226 <!-- Content preview -->
@@ -161,21 +234,15 @@
234 </td>
235
236 <!-- Actions -->
164 - <td class="actions-cell">
165 - <button class="btn-action view" @click="$store.memoryDashboardStore.showMemoryDetails(memory)"
166 - title="View Details">
167 - <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
168 - <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
169 - <circle cx="12" cy="12" r="3"></circle>
170 - </svg>
171 - </button>
172 - <button class="btn-action copy" @click="$store.memoryDashboardStore.copyToClipboard(memory.content_full)"
173 - title="Copy Content">
237 + <td class="actions-cell" @click.stop>
238 + <button class="btn-action copy" @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.formatMemoryForCopy(memory))"
239 + title="Copy Memory">
240 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
241 <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
242 <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
243 </svg>
244 </button>
245 +
246 <button class="btn-action delete" @click="$store.memoryDashboardStore.deleteMemory(memory)"
247 title="Delete Memory">
248 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -190,6 +257,37 @@
257 </template>
258 </tbody>
259 </table>
260 +
261 + <!-- Pagination controls at bottom -->
262 + <div class="pagination-controls-bottom" x-show="$store.memoryDashboardStore.totalPages > 1">
263 + <div class="pagination-info-inline">
264 + <span>Page <span x-text="$store.memoryDashboardStore.currentPage"></span>
265 + of <span x-text="$store.memoryDashboardStore.totalPages"></span>
266 + (<span x-text="$store.memoryDashboardStore.memories.length"></span> total memories)
267 + </span>
268 + </div>
269 +
270 + <div class="pagination-controls">
271 + <button class="btn slim" @click="$store.memoryDashboardStore.prevPage()"
272 + :disabled="$store.memoryDashboardStore.currentPage === 1">
273 + Previous
274 + </button>
275 +
276 + <select class="page-select"
277 + x-model.number="$store.memoryDashboardStore.currentPage"
278 + @change="$store.memoryDashboardStore.goToPage($store.memoryDashboardStore.currentPage)">
279 + <template x-for="page in Array.from({length: $store.memoryDashboardStore.totalPages}, (_, i) => i + 1)" :key="page">
280 + <option :value="page" x-text="'Page ' + page"></option>
281 + </template>
282 + </select>
283 +
284 + <button class="btn slim" @click="$store.memoryDashboardStore.nextPage()"
285 + :disabled="$store.memoryDashboardStore.currentPage === $store.memoryDashboardStore.totalPages">
286 + Next
287 + </button>
288 + </div>
289 + </div>
290 +
291 </div>
292
293 <!-- No memories message -->
@@ -212,138 +310,7 @@
310 </div>
311 </div>
312
215 - <!-- Enhanced Detail Modal -->
216 - <div x-show="$store.memoryDashboardStore.showDetailModal"
217 - x-transition:enter="modal-enter"
218 - x-transition:enter-start="modal-enter-start"
219 - x-transition:enter-end="modal-enter-end"
220 - x-transition:leave="modal-leave"
221 - x-transition:leave-start="modal-leave-start"
222 - x-transition:leave-end="modal-leave-end"
223 - class="modal-overlay"
224 - @click.self="$store.memoryDashboardStore.closeDetailModal()">
225 - <div class="modal-content memory-detail-modal" x-show="$store.memoryDashboardStore.selectedMemory" x-cloak>
226 -
227 - <!-- Modal Header with Memory Info -->
228 - <div class="modal-header-enhanced">
229 - <div class="header-left">
230 - <div class="memory-title">
231 - <span class="area-badge-large"
232 - :style="`background: linear-gradient(135deg, ${$store.memoryDashboardStore.getAreaColor($store.memoryDashboardStore.selectedMemory?.area)} 0%, ${$store.memoryDashboardStore.getAreaColor($store.memoryDashboardStore.selectedMemory?.area)}cc 100%)`"
233 - x-text="$store.memoryDashboardStore.selectedMemory?.area?.toUpperCase() || 'UNKNOWN'"></span>
234 - <h3>Memory Details</h3>
235 - </div>
236 - <div class="memory-meta-quick">
237 - <span class="timestamp-badge" x-text="$store.memoryDashboardStore.formatTimestamp($store.memoryDashboardStore.selectedMemory?.timestamp, true)"></span>
238 - <span class="source-badge"
239 - :class="$store.memoryDashboardStore.selectedMemory?.knowledge_source ? 'knowledge' : 'conversation'"
240 - x-text="$store.memoryDashboardStore.selectedMemory?.knowledge_source ? 'Knowledge' : 'Conversation'"></span>
241 - </div>
242 - </div>
243 - <div class="header-actions">
244 - <button class="btn-action-header copy" @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.selectedMemory?.content_full)"
245 - title="Copy Full Content">
246 - <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
247 - <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
248 - <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
249 - </svg>
250 - </button>
251 - <button class="btn-action-header delete" @click="$store.memoryDashboardStore.deleteMemory($store.memoryDashboardStore.selectedMemory)"
252 - title="Delete Memory">
253 - <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
254 - <polyline points="3,6 5,6 21,6"></polyline>
255 - <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>
256 - <line x1="10" y1="11" x2="10" y2="17"></line>
257 - <line x1="14" y1="11" x2="14" y2="17"></line>
258 - </svg>
259 - </button>
260 - <button class="btn-close-enhanced" @click="$store.memoryDashboardStore.closeDetailModal()">
261 - <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
262 - <line x1="18" y1="6" x2="6" y2="18"></line>
263 - <line x1="6" y1="6" x2="18" y2="18"></line>
264 - </svg>
265 - </button>
266 - </div>
267 - </div>
313
269 - <!-- Modal Body with Enhanced Layout -->
270 - <div class="modal-body-enhanced">
271 -
272 - <!-- Content Section -->
273 - <div class="content-section-main">
274 - <div class="section-header">
275 - <h4>
276 - <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
277 - <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
278 - <polyline points="14,2 14,8 20,8"></polyline>
279 - </svg>
280 - Content
281 - </h4>
282 - </div>
283 - <div class="content-display" x-text="$store.memoryDashboardStore.selectedMemory?.content_full"></div>
284 - </div>
285 -
286 - <!-- Metadata Sidebar -->
287 - <div class="metadata-sidebar">
288 - <div class="section-header">
289 - <h4>
290 - <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
291 - <circle cx="12" cy="12" r="3"></circle>
292 - <path d="M12 1v6m0 6v6m11-7h-6m-6 0H1"></path>
293 - </svg>
294 - Metadata
295 - </h4>
296 - </div>
297 -
298 - <div class="metadata-grid">
299 - <div class="metadata-item">
300 - <label>Memory ID</label>
301 - <value class="monospace" x-text="$store.memoryDashboardStore.selectedMemory?.id"></value>
302 - </div>
303 -
304 - <div class="metadata-item">
305 - <label>Area</label>
306 - <value x-text="$store.memoryDashboardStore.selectedMemory?.area"></value>
307 - </div>
308 -
309 - <div class="metadata-item">
310 - <label>Created</label>
311 - <value x-text="$store.memoryDashboardStore.formatTimestamp($store.memoryDashboardStore.selectedMemory?.timestamp)"></value>
312 - </div>
313 -
314 - <div class="metadata-item">
315 - <label>Source Type</label>
316 - <value x-text="$store.memoryDashboardStore.selectedMemory?.knowledge_source ? 'Knowledge File' : 'Conversation'"></value>
317 - </div>
318 -
319 - <div class="metadata-item" x-show="$store.memoryDashboardStore.selectedMemory?.source_file">
320 - <label>Source File</label>
321 - <value class="monospace" x-text="$store.memoryDashboardStore.selectedMemory?.source_file"></value>
322 - </div>
323 -
324 - <div class="metadata-item" x-show="$store.memoryDashboardStore.selectedMemory?.file_type">
325 - <label>File Type</label>
326 - <value x-text="$store.memoryDashboardStore.selectedMemory?.file_type"></value>
327 - </div>
328 -
329 - <div class="metadata-item" x-show="$store.memoryDashboardStore.selectedMemory?.consolidation_action">
330 - <label>Consolidation</label>
331 - <value class="consolidation-badge" x-text="$store.memoryDashboardStore.selectedMemory?.consolidation_action"></value>
332 - </div>
333 -
334 - <div class="metadata-item" x-show="$store.memoryDashboardStore.selectedMemory?.tags && $store.memoryDashboardStore.selectedMemory?.tags.length > 0">
335 - <label>Tags</label>
336 - <div class="tags-display">
337 - <template x-for="tag in $store.memoryDashboardStore.selectedMemory?.tags" :key="tag">
338 - <span class="tag-pill" x-text="tag"></span>
339 - </template>
340 - </div>
341 - </div>
342 - </div>
343 - </div>
344 - </div>
345 - </div>
346 - </div>
314
315 </div>
316 </template>
@@ -433,6 +400,8 @@
400 border-radius: 6px;
401 font-size: 0.9rem;
402 min-width: 200px;
403 + height: 40px;
404 + box-sizing: border-box;
405 }
406
407 .filter-group input:focus, .filter-group select:focus {
@@ -444,6 +413,20 @@
413 .filter-actions {
414 display: flex;
415 gap: 0.5rem;
416 + align-items: stretch;
417 + }
418 +
419 + .filter-actions .btn {
420 + height: 40px;
421 + display: flex;
422 + align-items: center;
423 + justify-content: center;
424 + }
425 +
426 + .loading-text {
427 + font-size: 0.85rem;
428 + color: var(--color-secondary);
429 + font-style: italic;
430 }
431
432 .loading-state, .error-state, .no-memories, .init-message {
@@ -502,11 +485,10 @@
485 }
486
487 /* Fixed column widths for proper fit */
505 - .col-area { width: 15%; }
506 - .col-timestamp { width: 18%; }
507 - .col-source { width: 15%; }
508 - .col-preview { width: 30%; }
509 - .col-actions { width: 22%; }
488 + .col-select { width: 5%; }
489 + .col-metadata { width: 25%; }
490 + .col-preview { width: 55%; }
491 + .col-actions { width: 15%; }
492
493 .memory-table th,
494 .memory-table td {
@@ -517,13 +499,137 @@
499 overflow: hidden;
500 }
501
520 - /* Allow source column to wrap properly */
521 - .source-cell {
502 + /* Metadata cell styling */
503 + .metadata-cell {
504 overflow: visible;
505 white-space: normal;
506 word-wrap: break-word;
507 }
508
509 + .metadata-info {
510 + display: flex;
511 + flex-direction: column;
512 + gap: 0.5rem;
513 + }
514 +
515 + .metadata-row {
516 + display: flex;
517 + align-items: center;
518 + gap: 0.5rem;
519 + }
520 +
521 + .metadata-timestamp {
522 + font-size: 0.85rem;
523 + color: var(--color-text);
524 + font-family: monospace;
525 + }
526 +
527 + .source-type {
528 + font-size: 0.8rem;
529 + color: var(--color-text);
530 + font-weight: 500;
531 + }
532 +
533 + /* Selection column styling */
534 + .select-cell, .col-select {
535 + text-align: center;
536 + padding: 0.5rem !important;
537 + }
538 +
539 + .select-cell input[type="checkbox"],
540 + .col-select input[type="checkbox"] {
541 + cursor: pointer;
542 + transform: scale(1.2);
543 + }
544 +
545 + /* Selected row styling */
546 + .memory-row.selected {
547 + background: rgba(115, 122, 129, 0.1);
548 + border-left: 3px solid var(--color-primary);
549 + }
550 +
551 + .light-mode .memory-row.selected {
552 + background: rgba(115, 122, 129, 0.05);
553 + }
554 +
555 + /* Mass action toolbar */
556 + .mass-action-toolbar {
557 + display: flex;
558 + justify-content: space-between;
559 + align-items: center;
560 + padding: 1rem;
561 + background: rgba(115, 122, 129, 0.1);
562 + border: 1px solid var(--color-primary);
563 + border-radius: 8px;
564 + margin: 1rem 0;
565 + animation: slideDown 0.3s ease;
566 + }
567 +
568 + .light-mode .mass-action-toolbar {
569 + background: rgba(115, 122, 129, 0.05);
570 + }
571 +
572 + .selection-info {
573 + font-weight: 600;
574 + color: var(--color-primary);
575 + }
576 +
577 + .mass-actions {
578 + display: flex;
579 + gap: 0.5rem;
580 + }
581 +
582 + .btn-mass {
583 + display: flex;
584 + align-items: center;
585 + gap: 0.5rem;
586 + padding: 0.5rem 1rem;
587 + border: 1px solid var(--color-border);
588 + background: var(--color-background);
589 + color: var(--color-text);
590 + border-radius: 6px;
591 + cursor: pointer;
592 + font-size: 0.9rem;
593 + font-weight: 500;
594 + transition: all 0.2s ease;
595 + }
596 +
597 + .btn-mass:hover {
598 + border-color: var(--color-primary);
599 + background: rgba(115, 122, 129, 0.1);
600 + }
601 +
602 + .btn-mass.copy:hover {
603 + border-color: #4caf50;
604 + color: #4caf50;
605 + }
606 +
607 + .btn-mass.export:hover {
608 + border-color: #2196f3;
609 + color: #2196f3;
610 + }
611 +
612 + .btn-mass.delete:hover {
613 + border-color: #f44336;
614 + color: #f44336;
615 + }
616 +
617 + .btn-mass.clear:hover {
618 + border-color: #ff9800;
619 + color: #ff9800;
620 + }
621 +
622 + @keyframes slideDown {
623 + from {
624 + opacity: 0;
625 + transform: translateY(-10px);
626 + }
627 + to {
628 + opacity: 1;
629 + transform: translateY(0);
630 + }
631 + }
632 +
633 .memory-table th {
634 background: var(--color-panel);
635 font-weight: 600;
@@ -557,7 +663,6 @@
663 color: white;
664 font-size: 0.75rem;
665 font-weight: bold;
560 - text-transform: uppercase;
666 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
667 }
668
@@ -617,6 +722,7 @@
722 .content-preview {
723 line-height: 1.4;
724 font-size: 0.9rem;
725 + color: var(--color-text);
726 word-wrap: break-word;
727 overflow-wrap: break-word;
728 max-width: 100%;
@@ -716,31 +822,35 @@
822 border-radius: 8px;
823 }
824
719 - .page-numbers {
720 - display: flex;
721 - gap: 0.25rem;
722 - }
723 -
724 - .page-btn {
825 + .page-select {
826 background: var(--color-background);
827 border: 1px solid var(--color-border);
828 color: var(--color-text);
829 padding: 0.5rem 0.75rem;
729 - cursor: pointer;
830 border-radius: 6px;
831 font-size: 0.9rem;
732 - transition: all 0.2s ease;
832 + cursor: pointer;
833 + min-width: 120px;
834 }
835
735 - .page-btn:hover {
736 - background: rgba(255, 255, 255, 0.1);
836 + .page-select:focus {
837 + outline: none;
838 border-color: var(--color-primary);
839 + box-shadow: 0 0 0 2px rgba(115, 122, 129, 0.1);
840 }
841
740 - .page-btn.active {
741 - background: var(--color-primary);
742 - color: white;
743 - border-color: var(--color-primary);
842 + .pagination-controls-top, .pagination-controls-bottom {
843 + display: flex;
844 + justify-content: space-between;
845 + align-items: center;
846 + padding: 1rem;
847 + background: var(--color-panel);
848 + border-bottom: 1px solid var(--color-border);
849 + }
850 +
851 + .pagination-controls-bottom {
852 + border-top: 1px solid var(--color-border);
853 + border-bottom: none;
854 }
855
856 .export-section {
@@ -1164,8 +1274,258 @@
1274 justify-content: center;
1275 }
1276 }
1167 - </style>
1277
1169 -</body>
1278 + /* Memory Detail Modal Styles */
1279 + .modal-header-enhanced {
1280 + display: flex;
1281 + justify-content: space-between;
1282 + align-items: flex-start;
1283 + padding: 1.5rem;
1284 + border-bottom: 2px solid var(--color-border);
1285 + background: linear-gradient(135deg, var(--color-panel) 0%, var(--color-background) 100%);
1286 + }
1287 +
1288 + .memory-title {
1289 + display: flex;
1290 + align-items: center;
1291 + gap: 1rem;
1292 + margin-bottom: 0.5rem;
1293 + }
1294 +
1295 + .area-badge-large {
1296 + color: white;
1297 + padding: 0.5rem 1rem;
1298 + border-radius: 20px;
1299 + font-size: 0.8rem;
1300 + font-weight: bold;
1301 + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
1302 + }
1303 +
1304 + .memory-meta-quick {
1305 + display: flex;
1306 + gap: 1rem;
1307 + align-items: center;
1308 + }
1309 +
1310 + .timestamp-badge, .source-badge {
1311 + padding: 0.25rem 0.75rem;
1312 + border-radius: 12px;
1313 + font-size: 0.75rem;
1314 + font-weight: 500;
1315 + background: var(--color-panel);
1316 + border: 1px solid var(--color-border);
1317 + }
1318 +
1319 + .source-badge.knowledge {
1320 + background: rgba(115, 122, 129, 0.1);
1321 + color: var(--color-primary);
1322 + border-color: var(--color-primary);
1323 + }
1324 +
1325 + .source-badge.conversation {
1326 + background: rgba(101, 101, 101, 0.1);
1327 + color: var(--color-secondary);
1328 + border-color: var(--color-secondary);
1329 + }
1330 +
1331 + .header-actions {
1332 + display: flex;
1333 + gap: 0.5rem;
1334 + }
1335 +
1336 + .btn-action-header {
1337 + background: var(--color-background);
1338 + border: 1px solid var(--color-border);
1339 + color: var(--color-text);
1340 + padding: 0.5rem;
1341 + border-radius: 8px;
1342 + cursor: pointer;
1343 + transition: all 0.2s ease;
1344 + }
1345 +
1346 + .btn-action-header:hover {
1347 + border-color: var(--color-primary);
1348 + background: rgba(115, 122, 129, 0.1);
1349 + }
1350 +
1351 + .modal-body-enhanced {
1352 + display: flex;
1353 + min-height: 60vh;
1354 + max-height: 70vh;
1355 + }
1356 +
1357 + .content-section-main {
1358 + flex: 1;
1359 + padding: 1.5rem;
1360 + overflow-y: auto;
1361 + }
1362 +
1363 + .content-block {
1364 + margin-bottom: 2rem;
1365 + }
1366 +
1367 + .content-block h4 {
1368 + margin: 0 0 1rem 0;
1369 + color: var(--color-primary);
1370 + font-size: 1.1rem;
1371 + font-weight: 600;
1372 + border-bottom: 1px solid var(--color-border);
1373 + padding-bottom: 0.5rem;
1374 + }
1375 +
1376 + .memory-content-display {
1377 + background: var(--color-panel);
1378 + border: 1px solid var(--color-border);
1379 + border-radius: 8px;
1380 + padding: 1.5rem;
1381 + line-height: 1.6;
1382 + color: var(--color-text);
1383 + white-space: pre-wrap;
1384 + word-break: break-word;
1385 + max-height: 300px;
1386 + overflow-y: auto;
1387 + }
1388 +
1389 + .tags-display {
1390 + display: flex;
1391 + flex-wrap: wrap;
1392 + gap: 0.5rem;
1393 + }
1394 +
1395 + .tag-display {
1396 + background: var(--color-primary);
1397 + color: white;
1398 + padding: 0.25rem 0.75rem;
1399 + border-radius: 12px;
1400 + font-size: 0.75rem;
1401 + font-weight: 500;
1402 + }
1403 +
1404 + .metadata-sidebar {
1405 + min-width: 300px;
1406 + max-width: 350px;
1407 + background: var(--color-panel);
1408 + border-left: 1px solid var(--color-border);
1409 + padding: 1.5rem;
1410 + overflow-y: auto;
1411 + }
1412 +
1413 + .metadata-sidebar h4 {
1414 + margin: 0 0 1rem 0;
1415 + color: var(--color-primary);
1416 + font-size: 1.1rem;
1417 + font-weight: 600;
1418 + }
1419 +
1420 + .metadata-group {
1421 + margin-bottom: 1.5rem;
1422 + }
1423 +
1424 + .metadata-group h5 {
1425 + margin: 0 0 0.75rem 0;
1426 + color: var(--color-secondary);
1427 + font-size: 0.9rem;
1428 + font-weight: 600;
1429 + text-transform: uppercase;
1430 + letter-spacing: 0.5px;
1431 + }
1432 +
1433 + .metadata-item {
1434 + display: flex;
1435 + flex-direction: column;
1436 + gap: 0.25rem;
1437 + margin-bottom: 0.75rem;
1438 + padding: 0.5rem;
1439 + background: var(--color-background);
1440 + border: 1px solid var(--color-border);
1441 + border-radius: 6px;
1442 + }
1443 +
1444 + .metadata-label {
1445 + font-size: 0.8rem;
1446 + font-weight: 600;
1447 + color: var(--color-secondary);
1448 + text-transform: uppercase;
1449 + letter-spacing: 0.3px;
1450 + }
1451 +
1452 + .metadata-value {
1453 + font-size: 0.9rem;
1454 + color: var(--color-text);
1455 + word-break: break-all;
1456 + line-height: 1.4;
1457 + }
1458 +
1459 + .source-file-display {
1460 + font-family: monospace;
1461 + background: var(--color-panel);
1462 + padding: 0.5rem;
1463 + border-radius: 4px;
1464 + border: 1px solid var(--color-border);
1465 + }
1466 +
1467 + .metadata-actions {
1468 + display: flex;
1469 + flex-direction: column;
1470 + gap: 0.5rem;
1471 + }
1472 +
1473 + .metadata-actions .btn {
1474 + display: flex;
1475 + align-items: center;
1476 + gap: 0.5rem;
1477 + justify-content: flex-start;
1478 + font-size: 0.9rem;
1479 + }
1480 +
1481 + /* Light mode adjustments for modal */
1482 + .light-mode .modal-header-enhanced {
1483 + background: linear-gradient(135deg, rgba(240, 240, 240, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%);
1484 + }
1485 +
1486 + .light-mode .memory-content-display {
1487 + background: rgba(248, 248, 248, 0.8);
1488 + }
1489 +
1490 + .light-mode .metadata-sidebar {
1491 + background: rgba(248, 248, 248, 0.8);
1492 + }
1493 +
1494 + .light-mode .metadata-item {
1495 + background: rgba(255, 255, 255, 0.9);
1496 + }
1497 +
1498 + /* Responsive design for modal */
1499 + @media (max-width: 768px) {
1500 + .modal-body-enhanced {
1501 + flex-direction: column;
1502 + max-height: 80vh;
1503 + }
1504
1171 -</html>
1505 + .metadata-sidebar {
1506 + min-width: unset;
1507 + max-width: unset;
1508 + border-left: none;
1509 + border-top: 1px solid var(--color-border);
1510 + }
1511 +
1512 + .modal-header-enhanced {
1513 + padding: 1rem;
1514 + }
1515 +
1516 + .memory-title {
1517 + flex-direction: column;
1518 + align-items: flex-start;
1519 + gap: 0.5rem;
1520 + }
1521 +
1522 + .content-section-main,
1523 + .metadata-sidebar {
1524 + padding: 1rem;
1525 + }
1526 + }
1527 + </style>
1528 +
1529 + </template>
1530 + </div>
1531 +</div>
webui/components/settings/memory/memory-detail-modal.html new
+137
@@ -0,0 +1,137 @@
1 +<div x-data>
2 + <template x-if="$store.memoryDashboardStore && $store.memoryDashboardStore.detailMemory">
3 + <div>
4 + <!-- Modal Header with Memory Info -->
5 + <div class="modal-header-enhanced">
6 + <div class="header-left">
7 + <div class="memory-title">
8 + <span class="area-badge-large"
9 + :style="`background: linear-gradient(135deg, ${$store.memoryDashboardStore.getAreaColor($store.memoryDashboardStore.detailMemory?.area)} 0%, ${$store.memoryDashboardStore.getAreaColor($store.memoryDashboardStore.detailMemory?.area)}cc 100%)`"
10 + x-text="$store.memoryDashboardStore.detailMemory?.area?.toUpperCase() || 'UNKNOWN'"></span>
11 + <h3>Memory Details</h3>
12 + </div>
13 + <div class="memory-meta-quick">
14 + <span class="timestamp-badge" x-text="$store.memoryDashboardStore.formatTimestamp($store.memoryDashboardStore.detailMemory?.timestamp, true)"></span>
15 + <span class="source-badge"
16 + :class="$store.memoryDashboardStore.detailMemory?.knowledge_source ? 'knowledge' : 'conversation'"
17 + x-text="$store.memoryDashboardStore.detailMemory?.knowledge_source ? 'Knowledge' : 'Conversation'"></span>
18 + </div>
19 + </div>
20 + <div class="header-actions">
21 + <button class="btn-action-header copy" @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.formatMemoryForCopy($store.memoryDashboardStore.detailMemory))"
22 + title="Copy Complete Memory with Metadata">
23 + <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
24 + <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
25 + <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
26 + </svg>
27 + </button>
28 + </div>
29 + </div>
30 +
31 + <!-- Modal Body -->
32 + <div class="modal-body-enhanced">
33 + <!-- Main Content Section -->
34 + <div class="content-section-main">
35 + <div class="content-block">
36 + <h4>Memory Content</h4>
37 + <div class="memory-content-display" x-html="$store.memoryDashboardStore.detailMemory?.content_full?.replace(/\n/g, '<br>')"></div>
38 + </div>
39 +
40 + <!-- Tags Section -->
41 + <div class="content-block" x-show="$store.memoryDashboardStore.detailMemory?.tags && $store.memoryDashboardStore.detailMemory.tags.length > 0">
42 + <h4>Tags</h4>
43 + <div class="tags-display">
44 + <template x-for="tag in $store.memoryDashboardStore.detailMemory?.tags || []" :key="tag">
45 + <span class="tag-display" x-text="tag"></span>
46 + </template>
47 + </div>
48 + </div>
49 + </div>
50 +
51 + <!-- Metadata Sidebar -->
52 + <div class="metadata-sidebar">
53 + <h4>Metadata</h4>
54 +
55 + <!-- Basic Info -->
56 + <div class="metadata-group">
57 + <div class="metadata-item">
58 + <span class="metadata-label">ID:</span>
59 + <span class="metadata-value" x-text="$store.memoryDashboardStore.detailMemory?.id || 'N/A'"></span>
60 + </div>
61 + <div class="metadata-item">
62 + <span class="metadata-label">Area:</span>
63 + <span class="metadata-value" x-text="$store.memoryDashboardStore.detailMemory?.area || 'N/A'"></span>
64 + </div>
65 + <div class="metadata-item">
66 + <span class="metadata-label">Source:</span>
67 + <span class="metadata-value" x-text="$store.memoryDashboardStore.detailMemory?.knowledge_source ? 'Knowledge' : 'Conversation'"></span>
68 + </div>
69 + </div>
70 +
71 + <!-- Timestamps -->
72 + <div class="metadata-group">
73 + <h5>Timestamps</h5>
74 + <div class="metadata-item">
75 + <span class="metadata-label">Created:</span>
76 + <span class="metadata-value" x-text="$store.memoryDashboardStore.formatTimestamp($store.memoryDashboardStore.detailMemory?.timestamp, false)"></span>
77 + </div>
78 + </div>
79 +
80 + <!-- Source Information -->
81 + <div class="metadata-group" x-show="$store.memoryDashboardStore.detailMemory?.source_file">
82 + <h5>Source File</h5>
83 + <div class="metadata-item">
84 + <span class="metadata-value source-file-display" x-text="$store.memoryDashboardStore.detailMemory?.source_file"></span>
85 + </div>
86 + </div>
87 +
88 + <!-- All Custom Metadata -->
89 + <div class="metadata-group" x-show="$store.memoryDashboardStore.detailMemory?.metadata && Object.keys($store.memoryDashboardStore.detailMemory.metadata).length > 0">
90 + <h5>Additional Metadata</h5>
91 + <template x-for="[key, value] in Object.entries($store.memoryDashboardStore.detailMemory?.metadata || {})" :key="key">
92 + <div class="metadata-item">
93 + <span class="metadata-label" x-text="key + ':'"></span>
94 + <span class="metadata-value" x-text="typeof value === 'object' ? JSON.stringify(value) : value"></span>
95 + </div>
96 + </template>
97 + </div>
98 +
99 + <!-- Actions -->
100 + <div class="metadata-group">
101 + <h5>Actions</h5>
102 + <div class="metadata-actions">
103 + <button class="btn slim" @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.formatMemoryForCopy($store.memoryDashboardStore.detailMemory))"
104 + title="Copy Complete Memory with Metadata">
105 + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
106 + <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
107 + <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
108 + </svg>
109 + Copy All
110 + </button>
111 + <button class="btn slim" @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.detailMemory?.content_full)"
112 + title="Copy Content Only">
113 + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
114 + <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
115 + <polyline points="14,2 14,8 20,8"></polyline>
116 + </svg>
117 + Copy Content
118 + </button>
119 + <button class="btn slim danger" @click="$store.memoryDashboardStore.deleteMemory($store.memoryDashboardStore.detailMemory)"
120 + title="Delete Memory">
121 + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
122 + <polyline points="3,6 5,6 21,6"></polyline>
123 + <path d="M19,6V20a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
124 + <line x1="10" y1="11" x2="10" y2="17"></line>
125 + <line x1="14" y1="11" x2="14" y2="17"></line>
126 + </svg>
127 + Delete
128 + </button>
129 + </div>
130 + </div>
131 + </div>
132 + </div>
133 + </div>
134 + </template>
135 + </div>
136 +</template>
137 +</div>