superlocalmemory 2.3.2 → 2.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/ui/index.html ADDED
@@ -0,0 +1,525 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-bs-theme="light">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SuperLocalMemory V2 - Knowledge Graph Explorer</title>
7
+
8
+ <!-- Bootstrap CSS -->
9
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
10
+ <!-- Bootstrap Icons -->
11
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
12
+
13
+ <style>
14
+ :root {
15
+ --slm-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
16
+ --slm-gradient-success: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
17
+ --slm-gradient-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
18
+ --slm-gradient-warning: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
19
+ }
20
+
21
+ body {
22
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
23
+ }
24
+
25
+ [data-bs-theme="light"] body,
26
+ [data-bs-theme="light"] {
27
+ background: #f8f9fa;
28
+ }
29
+
30
+ .navbar {
31
+ background: var(--slm-gradient);
32
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
33
+ }
34
+
35
+ /* Stat cards with gradient backgrounds */
36
+ .stat-card {
37
+ border: none;
38
+ border-radius: 12px;
39
+ box-shadow: 0 4px 15px rgba(0,0,0,0.08);
40
+ transition: transform 0.2s, box-shadow 0.2s;
41
+ overflow: hidden;
42
+ position: relative;
43
+ }
44
+
45
+ .stat-card:hover {
46
+ transform: translateY(-5px);
47
+ box-shadow: 0 8px 25px rgba(0,0,0,0.12);
48
+ }
49
+
50
+ .stat-card .stat-bg {
51
+ position: absolute;
52
+ top: 0; left: 0; right: 0; bottom: 0;
53
+ opacity: 0.08;
54
+ border-radius: 12px;
55
+ }
56
+
57
+ .stat-card-memories .stat-bg { background: var(--slm-gradient); }
58
+ .stat-card-clusters .stat-bg { background: var(--slm-gradient-success); }
59
+ .stat-card-nodes .stat-bg { background: var(--slm-gradient-info); }
60
+ .stat-card-edges .stat-bg { background: var(--slm-gradient-warning); }
61
+
62
+ .stat-icon {
63
+ font-size: 2rem;
64
+ opacity: 0.8;
65
+ }
66
+
67
+ .stat-value {
68
+ font-size: 1.75rem;
69
+ font-weight: 700;
70
+ margin: 0;
71
+ }
72
+
73
+ #graph-container {
74
+ background: var(--bs-body-bg);
75
+ border-radius: 10px;
76
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
77
+ min-height: 600px;
78
+ position: relative;
79
+ }
80
+
81
+ .node {
82
+ cursor: pointer;
83
+ stroke: #fff;
84
+ stroke-width: 2px;
85
+ }
86
+
87
+ .link {
88
+ stroke: #999;
89
+ stroke-opacity: 0.6;
90
+ }
91
+
92
+ .node-label {
93
+ font-size: 10px;
94
+ pointer-events: none;
95
+ fill: #333;
96
+ }
97
+
98
+ /* Memory table styling */
99
+ .memory-table {
100
+ font-size: 0.9rem;
101
+ }
102
+
103
+ .memory-table tbody tr {
104
+ cursor: pointer;
105
+ transition: background-color 0.15s;
106
+ }
107
+
108
+ .memory-table tbody tr:hover {
109
+ background-color: rgba(102, 126, 234, 0.08) !important;
110
+ }
111
+
112
+ .memory-content {
113
+ max-width: 350px;
114
+ overflow: hidden;
115
+ text-overflow: ellipsis;
116
+ white-space: nowrap;
117
+ }
118
+
119
+ .badge-importance {
120
+ min-width: 30px;
121
+ }
122
+
123
+ .search-box {
124
+ border-radius: 20px;
125
+ }
126
+
127
+ .cluster-card {
128
+ border-left: 4px solid;
129
+ margin-bottom: 1rem;
130
+ }
131
+
132
+ .entity-badge {
133
+ margin: 2px;
134
+ font-size: 0.8rem;
135
+ }
136
+
137
+ /* Loading spinner */
138
+ .loading {
139
+ text-align: center;
140
+ padding: 60px 40px;
141
+ color: #888;
142
+ }
143
+
144
+ .loading .spinner-border {
145
+ width: 2rem;
146
+ height: 2rem;
147
+ margin-bottom: 12px;
148
+ }
149
+
150
+ /* Empty state */
151
+ .empty-state {
152
+ text-align: center;
153
+ padding: 60px 40px;
154
+ color: #888;
155
+ }
156
+
157
+ .empty-state i {
158
+ font-size: 3rem;
159
+ opacity: 0.3;
160
+ margin-bottom: 12px;
161
+ }
162
+
163
+ .tooltip-custom {
164
+ position: absolute;
165
+ padding: 10px;
166
+ background: rgba(0,0,0,0.8);
167
+ color: white;
168
+ border-radius: 5px;
169
+ pointer-events: none;
170
+ font-size: 12px;
171
+ z-index: 1000;
172
+ max-width: 300px;
173
+ }
174
+
175
+ .timeline-chart {
176
+ min-height: 300px;
177
+ }
178
+
179
+ /* Score bar for search results */
180
+ .score-bar-container {
181
+ width: 80px;
182
+ display: inline-block;
183
+ vertical-align: middle;
184
+ }
185
+
186
+ .score-bar {
187
+ height: 8px;
188
+ border-radius: 4px;
189
+ background: #e9ecef;
190
+ overflow: hidden;
191
+ }
192
+
193
+ .score-bar-fill {
194
+ height: 100%;
195
+ border-radius: 4px;
196
+ transition: width 0.4s ease;
197
+ }
198
+
199
+ .score-label {
200
+ font-size: 0.75rem;
201
+ font-weight: 600;
202
+ min-width: 36px;
203
+ display: inline-block;
204
+ text-align: right;
205
+ margin-right: 6px;
206
+ vertical-align: middle;
207
+ }
208
+
209
+ /* Dark mode toggle button */
210
+ .theme-toggle {
211
+ background: none;
212
+ border: 1px solid rgba(255,255,255,0.3);
213
+ color: white;
214
+ border-radius: 20px;
215
+ padding: 4px 12px;
216
+ font-size: 0.9rem;
217
+ cursor: pointer;
218
+ transition: background 0.2s;
219
+ }
220
+
221
+ .theme-toggle:hover {
222
+ background: rgba(255,255,255,0.15);
223
+ }
224
+
225
+ /* Modal content formatting */
226
+ .memory-detail-content {
227
+ white-space: pre-wrap;
228
+ word-break: break-word;
229
+ font-size: 0.95rem;
230
+ line-height: 1.6;
231
+ max-height: 400px;
232
+ overflow-y: auto;
233
+ padding: 16px;
234
+ background: var(--bs-tertiary-bg);
235
+ border-radius: 8px;
236
+ }
237
+
238
+ .memory-detail-meta dt {
239
+ font-weight: 600;
240
+ color: var(--bs-secondary-color);
241
+ font-size: 0.8rem;
242
+ text-transform: uppercase;
243
+ letter-spacing: 0.5px;
244
+ }
245
+
246
+ .memory-detail-meta dd {
247
+ margin-bottom: 12px;
248
+ }
249
+
250
+ /* Export dropdown */
251
+ .export-dropdown .dropdown-menu {
252
+ min-width: 200px;
253
+ }
254
+
255
+ /* Tab badge */
256
+ .tab-count {
257
+ font-size: 0.7rem;
258
+ vertical-align: super;
259
+ margin-left: 2px;
260
+ }
261
+
262
+ /* Footer */
263
+ footer {
264
+ text-align: center;
265
+ padding: 20px;
266
+ margin-top: 40px;
267
+ border-top: 1px solid var(--bs-border-color);
268
+ color: var(--bs-secondary-color);
269
+ }
270
+
271
+ footer a {
272
+ color: #667eea;
273
+ }
274
+
275
+ [data-bs-theme="dark"] footer a {
276
+ color: #8fa4ff;
277
+ }
278
+ </style>
279
+ </head>
280
+ <body>
281
+ <!-- Navbar -->
282
+ <nav class="navbar navbar-dark mb-4">
283
+ <div class="container-fluid">
284
+ <span class="navbar-brand mb-0 h1">
285
+ <i class="bi bi-diagram-3"></i> SuperLocalMemory V2
286
+ </span>
287
+ <div class="d-flex align-items-center gap-3">
288
+ <span class="text-white-50 d-none d-md-inline">Knowledge Graph Explorer</span>
289
+ <button class="theme-toggle" id="theme-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
290
+ <i class="bi bi-sun-fill" id="theme-icon"></i>
291
+ </button>
292
+ </div>
293
+ </div>
294
+ </nav>
295
+
296
+ <div class="container-fluid">
297
+ <!-- Stats Overview -->
298
+ <div class="row mb-4" id="stats-container">
299
+ <div class="col-md-3 col-6 mb-3">
300
+ <div class="card stat-card stat-card-memories text-center p-3">
301
+ <div class="stat-bg"></div>
302
+ <i class="bi bi-journal-text stat-icon text-primary"></i>
303
+ <h3 class="mt-2 mb-0 stat-value" id="stat-memories">-</h3>
304
+ <small class="text-muted">Total Memories</small>
305
+ </div>
306
+ </div>
307
+ <div class="col-md-3 col-6 mb-3">
308
+ <div class="card stat-card stat-card-clusters text-center p-3">
309
+ <div class="stat-bg"></div>
310
+ <i class="bi bi-collection stat-icon text-success"></i>
311
+ <h3 class="mt-2 mb-0 stat-value" id="stat-clusters">-</h3>
312
+ <small class="text-muted">Clusters</small>
313
+ </div>
314
+ </div>
315
+ <div class="col-md-3 col-6 mb-3">
316
+ <div class="card stat-card stat-card-nodes text-center p-3">
317
+ <div class="stat-bg"></div>
318
+ <i class="bi bi-diagram-2 stat-icon text-info"></i>
319
+ <h3 class="mt-2 mb-0 stat-value" id="stat-nodes">-</h3>
320
+ <small class="text-muted">Graph Nodes</small>
321
+ </div>
322
+ </div>
323
+ <div class="col-md-3 col-6 mb-3">
324
+ <div class="card stat-card stat-card-edges text-center p-3">
325
+ <div class="stat-bg"></div>
326
+ <i class="bi bi-arrows-angle-expand stat-icon text-warning"></i>
327
+ <h3 class="mt-2 mb-0 stat-value" id="stat-edges">-</h3>
328
+ <small class="text-muted">Connections</small>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <!-- Main Content Tabs -->
334
+ <ul class="nav nav-tabs mb-3" id="mainTabs" role="tablist">
335
+ <li class="nav-item">
336
+ <button class="nav-link active" id="graph-tab" data-bs-toggle="tab" data-bs-target="#graph-pane">
337
+ <i class="bi bi-diagram-3"></i> Knowledge Graph
338
+ </button>
339
+ </li>
340
+ <li class="nav-item">
341
+ <button class="nav-link" id="memories-tab" data-bs-toggle="tab" data-bs-target="#memories-pane">
342
+ <i class="bi bi-list-ul"></i> Memories
343
+ </button>
344
+ </li>
345
+ <li class="nav-item">
346
+ <button class="nav-link" id="clusters-tab" data-bs-toggle="tab" data-bs-target="#clusters-pane">
347
+ <i class="bi bi-collection"></i> Clusters
348
+ </button>
349
+ </li>
350
+ <li class="nav-item">
351
+ <button class="nav-link" id="patterns-tab" data-bs-toggle="tab" data-bs-target="#patterns-pane">
352
+ <i class="bi bi-puzzle"></i> Patterns
353
+ </button>
354
+ </li>
355
+ <li class="nav-item">
356
+ <button class="nav-link" id="timeline-tab" data-bs-toggle="tab" data-bs-target="#timeline-pane">
357
+ <i class="bi bi-clock-history"></i> Timeline
358
+ </button>
359
+ </li>
360
+ </ul>
361
+
362
+ <div class="tab-content">
363
+ <!-- Graph Visualization -->
364
+ <div class="tab-pane fade show active" id="graph-pane">
365
+ <div class="card p-3 mb-3">
366
+ <div class="row align-items-center">
367
+ <div class="col-md-8">
368
+ <h5 class="mb-0">Force-Directed Knowledge Graph</h5>
369
+ <small class="text-muted">Nodes = Memories | Links = Semantic Similarity</small>
370
+ </div>
371
+ <div class="col-md-4 text-end">
372
+ <button class="btn btn-sm btn-outline-primary" onclick="loadGraph()">
373
+ <i class="bi bi-arrow-clockwise"></i> Refresh
374
+ </button>
375
+ <select class="form-select form-select-sm d-inline-block w-auto" id="graph-max-nodes" onchange="loadGraph()">
376
+ <option value="50">50 nodes</option>
377
+ <option value="100" selected>100 nodes</option>
378
+ <option value="200">200 nodes</option>
379
+ </select>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ <div id="graph-container"></div>
384
+ </div>
385
+
386
+ <!-- Memories List -->
387
+ <div class="tab-pane fade" id="memories-pane">
388
+ <div class="card p-3 mb-3">
389
+ <div class="row g-2">
390
+ <div class="col-md-5">
391
+ <input type="text" class="form-control search-box" id="search-query" placeholder="Search memories...">
392
+ </div>
393
+ <div class="col-md-2">
394
+ <select class="form-select" id="filter-category">
395
+ <option value="">All Categories</option>
396
+ </select>
397
+ </div>
398
+ <div class="col-md-2">
399
+ <select class="form-select" id="filter-project">
400
+ <option value="">All Projects</option>
401
+ </select>
402
+ </div>
403
+ <div class="col-md-1">
404
+ <button class="btn btn-primary w-100" onclick="searchMemories()" title="Search">
405
+ <i class="bi bi-search"></i>
406
+ </button>
407
+ </div>
408
+ <div class="col-md-2">
409
+ <div class="dropdown export-dropdown">
410
+ <button class="btn btn-outline-secondary w-100 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
411
+ <i class="bi bi-download"></i> Export
412
+ </button>
413
+ <ul class="dropdown-menu">
414
+ <li><a class="dropdown-item" href="#" onclick="exportAll('json'); return false;">
415
+ <i class="bi bi-filetype-json"></i> Export All (JSON)
416
+ </a></li>
417
+ <li><a class="dropdown-item" href="#" onclick="exportAll('jsonl'); return false;">
418
+ <i class="bi bi-file-text"></i> Export All (JSONL)
419
+ </a></li>
420
+ <li><hr class="dropdown-divider"></li>
421
+ <li><a class="dropdown-item" href="#" id="export-search-btn" onclick="exportSearchResults(); return false;" style="display:none;">
422
+ <i class="bi bi-funnel"></i> Export Search Results
423
+ </a></li>
424
+ </ul>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ <div class="card p-3">
430
+ <div id="memories-list" class="table-responsive">
431
+ <div class="loading">
432
+ <div class="spinner-border text-primary" role="status"></div>
433
+ <div>Loading memories...</div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+
439
+ <!-- Clusters -->
440
+ <div class="tab-pane fade" id="clusters-pane">
441
+ <div class="card p-3">
442
+ <h5 class="mb-3">Knowledge Clusters</h5>
443
+ <div id="clusters-list">
444
+ <div class="loading">
445
+ <div class="spinner-border text-primary" role="status"></div>
446
+ <div>Loading clusters...</div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+
452
+ <!-- Patterns -->
453
+ <div class="tab-pane fade" id="patterns-pane">
454
+ <div class="card p-3">
455
+ <h5 class="mb-3">Learned Patterns</h5>
456
+ <div id="patterns-list">
457
+ <div class="loading">
458
+ <div class="spinner-border text-primary" role="status"></div>
459
+ <div>Loading patterns...</div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+
465
+ <!-- Timeline -->
466
+ <div class="tab-pane fade" id="timeline-pane">
467
+ <div class="card p-3">
468
+ <h5 class="mb-3">Memory Creation Timeline</h5>
469
+ <div id="timeline-chart" class="timeline-chart">
470
+ <div class="loading">
471
+ <div class="spinner-border text-primary" role="status"></div>
472
+ <div>Loading timeline...</div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+
480
+ <!-- Memory Detail Modal -->
481
+ <div class="modal fade" id="memoryDetailModal" tabindex="-1" aria-labelledby="memoryDetailModalLabel" aria-hidden="true">
482
+ <div class="modal-dialog modal-lg modal-dialog-scrollable">
483
+ <div class="modal-content">
484
+ <div class="modal-header">
485
+ <h5 class="modal-title" id="memoryDetailModalLabel">
486
+ <i class="bi bi-journal-text"></i> Memory Detail
487
+ </h5>
488
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
489
+ </div>
490
+ <div class="modal-body">
491
+ <div id="memory-detail-body">
492
+ <div class="loading">
493
+ <div class="spinner-border text-primary" role="status"></div>
494
+ <div>Loading...</div>
495
+ </div>
496
+ </div>
497
+ </div>
498
+ <div class="modal-footer justify-content-between">
499
+ <div>
500
+ <button class="btn btn-sm btn-outline-secondary" onclick="copyMemoryToClipboard()" title="Copy to clipboard">
501
+ <i class="bi bi-clipboard"></i> Copy
502
+ </button>
503
+ <button class="btn btn-sm btn-outline-secondary" onclick="exportMemoryAsMarkdown()" title="Download as Markdown">
504
+ <i class="bi bi-markdown"></i> Export .md
505
+ </button>
506
+ </div>
507
+ <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </div>
512
+
513
+ <!-- Bootstrap JS -->
514
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
515
+ <!-- D3.js -->
516
+ <script src="https://d3js.org/d3.v7.min.js"></script>
517
+
518
+ <script src="static/app.js"></script>
519
+
520
+ <footer>
521
+ <p>SuperLocalMemory V2 by <a href="https://github.com/varun369">Varun Pratap Bhardwaj</a></p>
522
+ <p><a href="https://github.com/varun369/SuperLocalMemoryV2">GitHub Repository</a> | MIT License</p>
523
+ </footer>
524
+ </body>
525
+ </html>