squish-memory 1.0.0 → 1.0.1
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/.env.mcp.example +14 -11
- package/README.md +24 -7
- package/bin/squish-add.mjs +32 -0
- package/bin/squish-rm.mjs +21 -0
- package/config/settings.json +51 -0
- package/dist/api/web/web.d.ts.map +1 -1
- package/dist/api/web/web.js +452 -451
- package/dist/api/web/web.js.map +1 -1
- package/dist/commands/mcp-server.js +7 -3
- package/dist/commands/mcp-server.js.map +1 -1
- package/dist/config.d.ts +10 -10
- package/dist/config.d.ts.map +1 -1
- package/dist/config.js +78 -23
- package/dist/config.js.map +1 -1
- package/dist/core/embeddings.d.ts +1 -1
- package/dist/core/embeddings.d.ts.map +1 -1
- package/dist/core/embeddings.js +10 -67
- package/dist/core/embeddings.js.map +1 -1
- package/dist/core/local-embeddings.d.ts +3 -11
- package/dist/core/local-embeddings.d.ts.map +1 -1
- package/dist/core/local-embeddings.js +2 -76
- package/dist/core/local-embeddings.js.map +1 -1
- package/dist/core/memory/context-collector.d.ts.map +1 -1
- package/dist/core/memory/context-collector.js +3 -2
- package/dist/core/memory/context-collector.js.map +1 -1
- package/dist/core/memory/feedback-tracker.d.ts.map +1 -1
- package/dist/core/memory/feedback-tracker.js +10 -6
- package/dist/core/memory/feedback-tracker.js.map +1 -1
- package/dist/core/memory/hybrid-search.js +32 -32
- package/dist/core/memory/memories.js +46 -46
- package/dist/core/memory/query-rewriter.js +9 -9
- package/dist/core/memory/stats.js +5 -5
- package/dist/core/namespaces/index.d.ts.map +1 -1
- package/dist/core/namespaces/index.js +20 -11
- package/dist/core/namespaces/index.js.map +1 -1
- package/dist/core/scheduler/cron-scheduler.d.ts.map +1 -1
- package/dist/core/scheduler/cron-scheduler.js +12 -7
- package/dist/core/scheduler/cron-scheduler.js.map +1 -1
- package/dist/core/scheduler/job-runner.js +8 -5
- package/dist/core/scheduler/job-runner.js.map +1 -1
- package/dist/core/search/conversations.js +33 -33
- package/dist/core/session-hooks/self-iteration-job.d.ts.map +1 -1
- package/dist/core/session-hooks/self-iteration-job.js +43 -39
- package/dist/core/session-hooks/self-iteration-job.js.map +1 -1
- package/dist/core/session-hooks/session-hooks.d.ts.map +1 -1
- package/dist/core/session-hooks/session-hooks.js +6 -3
- package/dist/core/session-hooks/session-hooks.js.map +1 -1
- package/dist/core/tracing/collector.d.ts.map +1 -1
- package/dist/core/tracing/collector.js +25 -13
- package/dist/core/tracing/collector.js.map +1 -1
- package/dist/db/adapter.d.ts +6 -1
- package/dist/db/adapter.d.ts.map +1 -1
- package/dist/db/adapter.js +54 -126
- package/dist/db/adapter.js.map +1 -1
- package/dist/db/bootstrap.js +477 -477
- package/dist/db/index.d.ts +5 -1
- package/dist/db/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +46 -45
package/dist/api/web/web.js
CHANGED
|
@@ -16,8 +16,9 @@ app.get('/api/health', async (req, res) => {
|
|
|
16
16
|
let allProjects = [];
|
|
17
17
|
try {
|
|
18
18
|
const db = await getDb();
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
const sqliteDb = db;
|
|
20
|
+
if (sqliteDb && typeof sqliteDb.prepare === 'function') {
|
|
21
|
+
sqliteDb.prepare('SELECT 1').get();
|
|
21
22
|
}
|
|
22
23
|
// Get all projects from database
|
|
23
24
|
allProjects = await getAllProjects();
|
|
@@ -149,456 +150,456 @@ app.get('/api/projects', async (req, res) => {
|
|
|
149
150
|
});
|
|
150
151
|
// Web UI
|
|
151
152
|
app.get('/', (req, res) => {
|
|
152
|
-
const html = `<!DOCTYPE html>
|
|
153
|
-
<html class="dark" lang="en"><head>
|
|
154
|
-
<meta charset="utf-8"/>
|
|
155
|
-
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
156
|
-
<title>Squish Memory Viewer - Playful Dashboard</title>
|
|
157
|
-
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
158
|
-
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
159
|
-
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
|
|
160
|
-
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
161
|
-
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
162
|
-
<script id="tailwind-config">
|
|
163
|
-
tailwind.config = {
|
|
164
|
-
darkMode: "class",
|
|
165
|
-
theme: {
|
|
166
|
-
extend: {
|
|
167
|
-
colors: {
|
|
168
|
-
"primary": "#00ffbf",
|
|
169
|
-
"secondary": "#ff6392",
|
|
170
|
-
"accent": "#ffcd26",
|
|
171
|
-
"background-dark": "#0f172a",
|
|
172
|
-
"card-bg": "#1e293b",
|
|
173
|
-
"text-main": "#f8fafc",
|
|
174
|
-
"text-muted": "#94a3b8",
|
|
175
|
-
"alert-orange": "rgba(251, 146, 60, 0.1)"
|
|
176
|
-
},
|
|
177
|
-
fontFamily: {
|
|
178
|
-
"display": ["Spline Sans", "sans-serif"]
|
|
179
|
-
},
|
|
180
|
-
borderRadius: {
|
|
181
|
-
"pill": "2.5rem",
|
|
182
|
-
"blob": "30% 70% 70% 30% / 30% 30% 70% 70%"
|
|
183
|
-
}
|
|
184
|
-
},
|
|
185
|
-
},
|
|
186
|
-
}
|
|
187
|
-
</script>
|
|
188
|
-
<style type="text/tailwindcss">
|
|
189
|
-
@layer base {
|
|
190
|
-
body { @apply font-display text-text-main bg-background-dark antialiased; }
|
|
191
|
-
}
|
|
192
|
-
.squish-pill {
|
|
193
|
-
border-radius: 3rem;
|
|
194
|
-
}
|
|
195
|
-
.blob-alert {
|
|
196
|
-
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
|
|
197
|
-
}
|
|
198
|
-
.squishy-hover {
|
|
199
|
-
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
200
|
-
}
|
|
201
|
-
.squishy-hover:hover {
|
|
202
|
-
transform: scale(1.02) translateY(-4px);
|
|
203
|
-
}
|
|
204
|
-
.pulse-red {
|
|
205
|
-
animation: pulse 2s infinite;
|
|
206
|
-
}
|
|
207
|
-
@keyframes pulse {
|
|
208
|
-
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
|
|
209
|
-
70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
|
|
210
|
-
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
|
|
211
|
-
}
|
|
212
|
-
</style>
|
|
213
|
-
</head>
|
|
214
|
-
<body class="min-h-screen selection:bg-primary/30 pb-20">
|
|
215
|
-
<header class="w-full px-6 py-8">
|
|
216
|
-
<div class="max-w-6xl mx-auto flex items-center justify-between">
|
|
217
|
-
<div class="flex items-center gap-4">
|
|
218
|
-
<div class="relative size-12 flex items-center justify-center">
|
|
219
|
-
<div class="absolute inset-0 bg-secondary/20 blur-xl rounded-full"></div>
|
|
220
|
-
<span class="material-symbols-outlined text-secondary text-5xl relative z-10">psychology</span>
|
|
221
|
-
</div>
|
|
222
|
-
<h1 class="text-3xl font-black tracking-tight flex items-center gap-2">
|
|
223
|
-
Squish <span class="text-primary italic">Memory Viewer</span>
|
|
224
|
-
</h1>
|
|
225
|
-
</div>
|
|
226
|
-
<div class="flex items-center gap-4">
|
|
227
|
-
<select id="project-select" onchange="changeProject(this.value)" class="bg-card-bg px-4 py-2 rounded-full border-2 border-slate-700/50 text-text-main text-sm font-medium focus:outline-none focus:border-primary">
|
|
228
|
-
<option value="">Loading projects...</option>
|
|
229
|
-
</select>
|
|
230
|
-
<div class="bg-card-bg px-4 py-2 rounded-full border-2 border-slate-700/50 flex items-center gap-2">
|
|
231
|
-
<div class="size-2 rounded-full bg-primary animate-pulse"></div>
|
|
232
|
-
<span class="text-xs font-bold uppercase tracking-widest text-text-muted">Local Server: Online</span>
|
|
233
|
-
</div>
|
|
234
|
-
</div>
|
|
235
|
-
</div>
|
|
236
|
-
</header>
|
|
237
|
-
<main class="max-w-6xl mx-auto px-6 space-y-12">
|
|
238
|
-
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
239
|
-
<div class="bg-card-bg p-8 squish-pill border-2 border-slate-700/30 text-center squishy-hover shadow-xl">
|
|
240
|
-
<p class="text-4xl font-black mb-1" id="memories-count">-</p>
|
|
241
|
-
<p class="text-sm font-bold uppercase tracking-widest text-text-muted italic">Memories</p>
|
|
242
|
-
</div>
|
|
243
|
-
<div class="bg-card-bg p-8 squish-pill border-2 border-slate-700/30 text-center squishy-hover shadow-xl">
|
|
244
|
-
<p class="text-4xl font-black mb-1" id="observations-count">-</p>
|
|
245
|
-
<p class="text-sm font-bold uppercase tracking-widest text-text-muted italic">Observations</p>
|
|
246
|
-
</div>
|
|
247
|
-
<div class="bg-card-bg p-8 squish-pill border-2 border-slate-700/30 text-center squishy-hover shadow-xl">
|
|
248
|
-
<p class="text-4xl font-black mb-1" id="total-count">-</p>
|
|
249
|
-
<p class="text-sm font-bold uppercase tracking-widest text-text-muted italic">Total Items</p>
|
|
250
|
-
</div>
|
|
251
|
-
<div class="bg-card-bg p-8 squish-pill border-2 border-slate-700/30 flex flex-col items-center justify-center squishy-hover shadow-xl">
|
|
252
|
-
<div class="flex items-center gap-3">
|
|
253
|
-
<div class="size-4 bg-red-500 rounded-full pulse-red"></div>
|
|
254
|
-
<p class="text-2xl font-black text-red-400 italic">Error</p>
|
|
255
|
-
</div>
|
|
256
|
-
<p class="text-sm font-bold uppercase tracking-widest text-text-muted italic mt-1">Status</p>
|
|
257
|
-
</div>
|
|
258
|
-
</div>
|
|
259
|
-
<div class="relative py-6 px-10 bg-orange-500/10 border-2 border-orange-500/20 blob-alert flex items-center gap-6 overflow-hidden">
|
|
260
|
-
<div class="absolute top-0 left-0 w-full h-full bg-orange-500/5 -z-10"></div>
|
|
261
|
-
<span class="material-symbols-outlined text-orange-400 text-3xl">warning</span>
|
|
262
|
-
<div>
|
|
263
|
-
<h4 class="font-black text-orange-400 italic uppercase text-sm tracking-wider">Communication Breakdown</h4>
|
|
264
|
-
<p class="text-orange-200/80 font-medium">Failed to load data: Unknown error. Is the blob server running?</p>
|
|
265
|
-
</div>
|
|
266
|
-
</div>
|
|
267
|
-
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
268
|
-
<section class="space-y-6">
|
|
269
|
-
<div class="flex items-center gap-4 border-b-4 border-primary/20 pb-4">
|
|
270
|
-
<div class="size-10 bg-primary/20 rounded-full flex items-center justify-center border-2 border-primary">
|
|
271
|
-
<span class="material-symbols-outlined text-primary font-bold">neurology</span>
|
|
272
|
-
</div>
|
|
273
|
-
<h2 class="text-2xl font-black italic text-primary uppercase">Recent Memories</h2>
|
|
274
|
-
</div>
|
|
275
|
-
<div class="space-y-4" id="memories">
|
|
276
|
-
<div class="bg-card-bg/50 p-6 rounded-3xl border-2 border-slate-700/20 flex flex-col items-center justify-center py-16 opacity-60">
|
|
277
|
-
<div class="size-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4"></div>
|
|
278
|
-
<p class="font-black italic text-text-muted">Loading memories...</p>
|
|
279
|
-
</div>
|
|
280
|
-
</div>
|
|
281
|
-
</section>
|
|
282
|
-
<section class="space-y-6">
|
|
283
|
-
<div class="flex items-center gap-4 border-b-4 border-primary/20 pb-4">
|
|
284
|
-
<div class="size-10 bg-primary/20 rounded-full flex items-center justify-center border-2 border-primary">
|
|
285
|
-
<span class="material-symbols-outlined text-primary font-bold">visibility</span>
|
|
286
|
-
</div>
|
|
287
|
-
<h2 class="text-2xl font-black italic text-primary uppercase">Recent Observations</h2>
|
|
288
|
-
</div>
|
|
289
|
-
<div class="space-y-4" id="observations">
|
|
290
|
-
<div class="bg-card-bg/50 p-6 rounded-3xl border-2 border-slate-700/20 flex flex-col items-center justify-center py-16 opacity-60">
|
|
291
|
-
<div class="size-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4"></div>
|
|
292
|
-
<p class="font-black italic text-text-muted">Loading observations...</p>
|
|
293
|
-
</div>
|
|
294
|
-
</div>
|
|
295
|
-
</section>
|
|
296
|
-
</div>
|
|
297
|
-
<div class="pt-12 flex justify-center">
|
|
298
|
-
<div class="bg-card-bg border-4 border-slate-700/50 p-2 rounded-full flex gap-2">
|
|
299
|
-
<button class="bg-primary text-black px-8 py-3 rounded-full font-black text-sm uppercase hover:scale-105 transition-transform flex items-center gap-2">
|
|
300
|
-
<span class="material-symbols-outlined text-sm">refresh</span>
|
|
301
|
-
Reconnect
|
|
302
|
-
</button>
|
|
303
|
-
<button class="text-text-main px-8 py-3 rounded-full font-black text-sm uppercase hover:bg-slate-700/50 transition-colors" onclick="openDocs()">
|
|
304
|
-
Docs
|
|
305
|
-
</button>
|
|
306
|
-
<button class="text-text-main px-8 py-3 rounded-full font-black text-sm uppercase hover:bg-slate-700/50 transition-colors" onclick="openSettings()">
|
|
307
|
-
Settings
|
|
308
|
-
</button>
|
|
309
|
-
</div>
|
|
310
|
-
</div>
|
|
311
|
-
</main>
|
|
312
|
-
<footer class="mt-20 px-6 opacity-30">
|
|
313
|
-
<div class="max-w-6xl mx-auto flex justify-between items-center py-8 border-t border-slate-700">
|
|
314
|
-
<p class="text-xs font-black uppercase">© 2026 Squish-Memory Dashboard</p>
|
|
315
|
-
<div class="flex gap-4">
|
|
316
|
-
<span class="material-symbols-outlined text-sm">database</span>
|
|
317
|
-
<span class="text-xs font-black uppercase italic">Local-First Engine v1.0</span>
|
|
318
|
-
</div>
|
|
319
|
-
</div>
|
|
320
|
-
</footer>
|
|
321
|
-
<script>
|
|
322
|
-
let currentProjectPath = null;
|
|
323
|
-
|
|
324
|
-
async function loadProjects() {
|
|
325
|
-
try {
|
|
326
|
-
const response = await fetch('/api/projects');
|
|
327
|
-
const data = await response.json();
|
|
328
|
-
|
|
329
|
-
if (data.status === 'ok' && data.data && data.data.length > 0) {
|
|
330
|
-
const select = document.getElementById('project-select');
|
|
331
|
-
if (select) {
|
|
332
|
-
select.innerHTML = data.data.map(function(p) {
|
|
333
|
-
return '<option value="' + escapeHtml(p.path) + '">' + escapeHtml(p.name || p.path) + '</option>';
|
|
334
|
-
}).join('');
|
|
335
|
-
|
|
336
|
-
// Try to select current directory
|
|
337
|
-
const cwd = window.location.pathname === '/' ? '' : window.location.pathname;
|
|
338
|
-
const defaultProject = data.data.find(function(p) { return p.path === cwd; }) || data.data[0];
|
|
339
|
-
if (defaultProject) {
|
|
340
|
-
currentProjectPath = defaultProject.path;
|
|
341
|
-
select.value = defaultProject.path;
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
} else {
|
|
345
|
-
// No projects yet, use current directory
|
|
346
|
-
currentProjectPath = window.location.pathname === '/' ? '' : window.location.pathname;
|
|
347
|
-
}
|
|
348
|
-
} catch (error) {
|
|
349
|
-
console.error('Failed to load projects:', error);
|
|
350
|
-
currentProjectPath = '';
|
|
351
|
-
}
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
async function loadData() {
|
|
355
|
-
try {
|
|
356
|
-
const url = currentProjectPath ? '/api/context?projectPath=' + encodeURIComponent(currentProjectPath) : '/api/context';
|
|
357
|
-
const response = await fetch(url);
|
|
358
|
-
const data = await response.json();
|
|
359
|
-
|
|
360
|
-
if (data.status === 'ok') {
|
|
361
|
-
document.getElementById('memories-count').textContent = data.memories ? data.memories.length : 0;
|
|
362
|
-
document.getElementById('observations-count').textContent = data.observations ? data.observations.length : 0;
|
|
363
|
-
document.getElementById('total-count').textContent = data.totalCount || 0;
|
|
364
|
-
updateStatus(data.memories && data.observations ? 'ok' : 'error');
|
|
365
|
-
|
|
366
|
-
renderMemories(data.memories || []);
|
|
367
|
-
renderObservations(data.observations || []);
|
|
368
|
-
|
|
369
|
-
// Update project info
|
|
370
|
-
if (data.project) {
|
|
371
|
-
const projectInfo = document.getElementById('project-info');
|
|
372
|
-
if (projectInfo) {
|
|
373
|
-
projectInfo.textContent = data.project.name || data.project.path || 'Unknown';
|
|
374
|
-
}
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
// Hide error alert if data loaded
|
|
378
|
-
const errorAlert = document.querySelector('.blob-alert');
|
|
379
|
-
if (errorAlert && (data.memories && data.memories.length > 0 || data.observations && data.observations.length > 0)) {
|
|
380
|
-
errorAlert.style.display = 'none';
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
// Show error alert if message present
|
|
384
|
-
if (data.message) {
|
|
385
|
-
const errorAlert = document.querySelector('.blob-alert');
|
|
386
|
-
if (errorAlert) {
|
|
387
|
-
errorAlert.querySelector('p').textContent = data.message;
|
|
388
|
-
errorAlert.style.display = 'flex';
|
|
389
|
-
}
|
|
390
|
-
}
|
|
391
|
-
} else {
|
|
392
|
-
throw new Error('API returned error status');
|
|
393
|
-
}
|
|
394
|
-
} catch (error) {
|
|
395
|
-
updateStatus('error');
|
|
396
|
-
|
|
397
|
-
// Show error alert
|
|
398
|
-
const errorAlert = document.querySelector('.blob-alert');
|
|
399
|
-
if (errorAlert) errorAlert.style.display = 'flex';
|
|
400
|
-
}
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
function renderMemories(memories) {
|
|
404
|
-
const container = document.getElementById('memories');
|
|
405
|
-
if (!memories || memories.length === 0) {
|
|
406
|
-
container.innerHTML = '<div class="bg-card-bg/50 p-6 rounded-3xl border-2 border-slate-700/20 flex flex-col items-center justify-center py-16 opacity-60"><p class="font-black italic text-text-muted">No memories found</p></div>';
|
|
407
|
-
return;
|
|
408
|
-
}
|
|
409
|
-
|
|
410
|
-
container.innerHTML = memories.map(function(memory) {
|
|
411
|
-
return '<div class="bg-card-bg p-6 rounded-3xl border-2 border-slate-700/20 squishy-hover">' +
|
|
412
|
-
'<div class="flex items-start justify-between mb-4">' +
|
|
413
|
-
'<span class="bg-primary text-black px-3 py-1 rounded-full text-xs font-bold uppercase">' + (memory.type || 'memory') + '</span>' +
|
|
414
|
-
'<span class="text-text-muted text-sm">' + formatTime(memory.createdAt) + '</span>' +
|
|
415
|
-
'</div>' +
|
|
416
|
-
'<div class="text-text-main mb-4">' + escapeHtml(memory.content || memory.text || '') + '</div>' +
|
|
417
|
-
'<div class="text-text-muted text-sm">' +
|
|
418
|
-
'Tags: ' + (memory.tags ? memory.tags.join(', ') : 'none') +
|
|
419
|
-
'</div>' +
|
|
420
|
-
'</div>';
|
|
421
|
-
}).join('');
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
function renderObservations(observations) {
|
|
425
|
-
const container = document.getElementById('observations');
|
|
426
|
-
if (!observations || observations.length === 0) {
|
|
427
|
-
container.innerHTML = '<div class="bg-card-bg/50 p-6 rounded-3xl border-2 border-slate-700/20 flex flex-col items-center justify-center py-16 opacity-60"><p class="font-black italic text-text-muted">No observations found</p></div>';
|
|
428
|
-
return;
|
|
429
|
-
}
|
|
430
|
-
|
|
431
|
-
container.innerHTML = observations.map(function(obs) {
|
|
432
|
-
return '<div class="bg-card-bg p-6 rounded-3xl border-2 border-slate-700/20 squishy-hover">' +
|
|
433
|
-
'<div class="flex items-start justify-between mb-4">' +
|
|
434
|
-
'<span class="bg-secondary text-black px-3 py-1 rounded-full text-xs font-bold uppercase">' + (obs.type || 'observation') + '</span>' +
|
|
435
|
-
'<span class="text-text-muted text-sm">' + formatTime(obs.createdAt) + '</span>' +
|
|
436
|
-
'</div>' +
|
|
437
|
-
'<div class="text-text-main mb-4">' + escapeHtml(obs.summary || obs.content || '') + '</div>' +
|
|
438
|
-
'<div class="text-text-muted text-sm">' +
|
|
439
|
-
'Action: ' + (obs.action || 'none') + ' | ' +
|
|
440
|
-
'Target: ' + (obs.target || 'none') +
|
|
441
|
-
'</div>' +
|
|
442
|
-
'</div>';
|
|
443
|
-
}).join('');
|
|
444
|
-
}
|
|
445
|
-
|
|
153
|
+
const html = `<!DOCTYPE html>
|
|
154
|
+
<html class="dark" lang="en"><head>
|
|
155
|
+
<meta charset="utf-8"/>
|
|
156
|
+
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
157
|
+
<title>Squish Memory Viewer - Playful Dashboard</title>
|
|
158
|
+
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
159
|
+
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
160
|
+
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
|
|
161
|
+
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
162
|
+
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
163
|
+
<script id="tailwind-config">
|
|
164
|
+
tailwind.config = {
|
|
165
|
+
darkMode: "class",
|
|
166
|
+
theme: {
|
|
167
|
+
extend: {
|
|
168
|
+
colors: {
|
|
169
|
+
"primary": "#00ffbf",
|
|
170
|
+
"secondary": "#ff6392",
|
|
171
|
+
"accent": "#ffcd26",
|
|
172
|
+
"background-dark": "#0f172a",
|
|
173
|
+
"card-bg": "#1e293b",
|
|
174
|
+
"text-main": "#f8fafc",
|
|
175
|
+
"text-muted": "#94a3b8",
|
|
176
|
+
"alert-orange": "rgba(251, 146, 60, 0.1)"
|
|
177
|
+
},
|
|
178
|
+
fontFamily: {
|
|
179
|
+
"display": ["Spline Sans", "sans-serif"]
|
|
180
|
+
},
|
|
181
|
+
borderRadius: {
|
|
182
|
+
"pill": "2.5rem",
|
|
183
|
+
"blob": "30% 70% 70% 30% / 30% 30% 70% 70%"
|
|
184
|
+
}
|
|
185
|
+
},
|
|
186
|
+
},
|
|
187
|
+
}
|
|
188
|
+
</script>
|
|
189
|
+
<style type="text/tailwindcss">
|
|
190
|
+
@layer base {
|
|
191
|
+
body { @apply font-display text-text-main bg-background-dark antialiased; }
|
|
192
|
+
}
|
|
193
|
+
.squish-pill {
|
|
194
|
+
border-radius: 3rem;
|
|
195
|
+
}
|
|
196
|
+
.blob-alert {
|
|
197
|
+
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
|
|
198
|
+
}
|
|
199
|
+
.squishy-hover {
|
|
200
|
+
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
201
|
+
}
|
|
202
|
+
.squishy-hover:hover {
|
|
203
|
+
transform: scale(1.02) translateY(-4px);
|
|
204
|
+
}
|
|
205
|
+
.pulse-red {
|
|
206
|
+
animation: pulse 2s infinite;
|
|
207
|
+
}
|
|
208
|
+
@keyframes pulse {
|
|
209
|
+
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
|
|
210
|
+
70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
|
|
211
|
+
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
|
|
212
|
+
}
|
|
213
|
+
</style>
|
|
214
|
+
</head>
|
|
215
|
+
<body class="min-h-screen selection:bg-primary/30 pb-20">
|
|
216
|
+
<header class="w-full px-6 py-8">
|
|
217
|
+
<div class="max-w-6xl mx-auto flex items-center justify-between">
|
|
218
|
+
<div class="flex items-center gap-4">
|
|
219
|
+
<div class="relative size-12 flex items-center justify-center">
|
|
220
|
+
<div class="absolute inset-0 bg-secondary/20 blur-xl rounded-full"></div>
|
|
221
|
+
<span class="material-symbols-outlined text-secondary text-5xl relative z-10">psychology</span>
|
|
222
|
+
</div>
|
|
223
|
+
<h1 class="text-3xl font-black tracking-tight flex items-center gap-2">
|
|
224
|
+
Squish <span class="text-primary italic">Memory Viewer</span>
|
|
225
|
+
</h1>
|
|
226
|
+
</div>
|
|
227
|
+
<div class="flex items-center gap-4">
|
|
228
|
+
<select id="project-select" onchange="changeProject(this.value)" class="bg-card-bg px-4 py-2 rounded-full border-2 border-slate-700/50 text-text-main text-sm font-medium focus:outline-none focus:border-primary">
|
|
229
|
+
<option value="">Loading projects...</option>
|
|
230
|
+
</select>
|
|
231
|
+
<div class="bg-card-bg px-4 py-2 rounded-full border-2 border-slate-700/50 flex items-center gap-2">
|
|
232
|
+
<div class="size-2 rounded-full bg-primary animate-pulse"></div>
|
|
233
|
+
<span class="text-xs font-bold uppercase tracking-widest text-text-muted">Local Server: Online</span>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
</div>
|
|
237
|
+
</header>
|
|
238
|
+
<main class="max-w-6xl mx-auto px-6 space-y-12">
|
|
239
|
+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
240
|
+
<div class="bg-card-bg p-8 squish-pill border-2 border-slate-700/30 text-center squishy-hover shadow-xl">
|
|
241
|
+
<p class="text-4xl font-black mb-1" id="memories-count">-</p>
|
|
242
|
+
<p class="text-sm font-bold uppercase tracking-widest text-text-muted italic">Memories</p>
|
|
243
|
+
</div>
|
|
244
|
+
<div class="bg-card-bg p-8 squish-pill border-2 border-slate-700/30 text-center squishy-hover shadow-xl">
|
|
245
|
+
<p class="text-4xl font-black mb-1" id="observations-count">-</p>
|
|
246
|
+
<p class="text-sm font-bold uppercase tracking-widest text-text-muted italic">Observations</p>
|
|
247
|
+
</div>
|
|
248
|
+
<div class="bg-card-bg p-8 squish-pill border-2 border-slate-700/30 text-center squishy-hover shadow-xl">
|
|
249
|
+
<p class="text-4xl font-black mb-1" id="total-count">-</p>
|
|
250
|
+
<p class="text-sm font-bold uppercase tracking-widest text-text-muted italic">Total Items</p>
|
|
251
|
+
</div>
|
|
252
|
+
<div class="bg-card-bg p-8 squish-pill border-2 border-slate-700/30 flex flex-col items-center justify-center squishy-hover shadow-xl">
|
|
253
|
+
<div class="flex items-center gap-3">
|
|
254
|
+
<div class="size-4 bg-red-500 rounded-full pulse-red"></div>
|
|
255
|
+
<p class="text-2xl font-black text-red-400 italic">Error</p>
|
|
256
|
+
</div>
|
|
257
|
+
<p class="text-sm font-bold uppercase tracking-widest text-text-muted italic mt-1">Status</p>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
<div class="relative py-6 px-10 bg-orange-500/10 border-2 border-orange-500/20 blob-alert flex items-center gap-6 overflow-hidden">
|
|
261
|
+
<div class="absolute top-0 left-0 w-full h-full bg-orange-500/5 -z-10"></div>
|
|
262
|
+
<span class="material-symbols-outlined text-orange-400 text-3xl">warning</span>
|
|
263
|
+
<div>
|
|
264
|
+
<h4 class="font-black text-orange-400 italic uppercase text-sm tracking-wider">Communication Breakdown</h4>
|
|
265
|
+
<p class="text-orange-200/80 font-medium">Failed to load data: Unknown error. Is the blob server running?</p>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
269
|
+
<section class="space-y-6">
|
|
270
|
+
<div class="flex items-center gap-4 border-b-4 border-primary/20 pb-4">
|
|
271
|
+
<div class="size-10 bg-primary/20 rounded-full flex items-center justify-center border-2 border-primary">
|
|
272
|
+
<span class="material-symbols-outlined text-primary font-bold">neurology</span>
|
|
273
|
+
</div>
|
|
274
|
+
<h2 class="text-2xl font-black italic text-primary uppercase">Recent Memories</h2>
|
|
275
|
+
</div>
|
|
276
|
+
<div class="space-y-4" id="memories">
|
|
277
|
+
<div class="bg-card-bg/50 p-6 rounded-3xl border-2 border-slate-700/20 flex flex-col items-center justify-center py-16 opacity-60">
|
|
278
|
+
<div class="size-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4"></div>
|
|
279
|
+
<p class="font-black italic text-text-muted">Loading memories...</p>
|
|
280
|
+
</div>
|
|
281
|
+
</div>
|
|
282
|
+
</section>
|
|
283
|
+
<section class="space-y-6">
|
|
284
|
+
<div class="flex items-center gap-4 border-b-4 border-primary/20 pb-4">
|
|
285
|
+
<div class="size-10 bg-primary/20 rounded-full flex items-center justify-center border-2 border-primary">
|
|
286
|
+
<span class="material-symbols-outlined text-primary font-bold">visibility</span>
|
|
287
|
+
</div>
|
|
288
|
+
<h2 class="text-2xl font-black italic text-primary uppercase">Recent Observations</h2>
|
|
289
|
+
</div>
|
|
290
|
+
<div class="space-y-4" id="observations">
|
|
291
|
+
<div class="bg-card-bg/50 p-6 rounded-3xl border-2 border-slate-700/20 flex flex-col items-center justify-center py-16 opacity-60">
|
|
292
|
+
<div class="size-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4"></div>
|
|
293
|
+
<p class="font-black italic text-text-muted">Loading observations...</p>
|
|
294
|
+
</div>
|
|
295
|
+
</div>
|
|
296
|
+
</section>
|
|
297
|
+
</div>
|
|
298
|
+
<div class="pt-12 flex justify-center">
|
|
299
|
+
<div class="bg-card-bg border-4 border-slate-700/50 p-2 rounded-full flex gap-2">
|
|
300
|
+
<button class="bg-primary text-black px-8 py-3 rounded-full font-black text-sm uppercase hover:scale-105 transition-transform flex items-center gap-2">
|
|
301
|
+
<span class="material-symbols-outlined text-sm">refresh</span>
|
|
302
|
+
Reconnect
|
|
303
|
+
</button>
|
|
304
|
+
<button class="text-text-main px-8 py-3 rounded-full font-black text-sm uppercase hover:bg-slate-700/50 transition-colors" onclick="openDocs()">
|
|
305
|
+
Docs
|
|
306
|
+
</button>
|
|
307
|
+
<button class="text-text-main px-8 py-3 rounded-full font-black text-sm uppercase hover:bg-slate-700/50 transition-colors" onclick="openSettings()">
|
|
308
|
+
Settings
|
|
309
|
+
</button>
|
|
310
|
+
</div>
|
|
311
|
+
</div>
|
|
312
|
+
</main>
|
|
313
|
+
<footer class="mt-20 px-6 opacity-30">
|
|
314
|
+
<div class="max-w-6xl mx-auto flex justify-between items-center py-8 border-t border-slate-700">
|
|
315
|
+
<p class="text-xs font-black uppercase">© 2026 Squish-Memory Dashboard</p>
|
|
316
|
+
<div class="flex gap-4">
|
|
317
|
+
<span class="material-symbols-outlined text-sm">database</span>
|
|
318
|
+
<span class="text-xs font-black uppercase italic">Local-First Engine v1.0</span>
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
</footer>
|
|
322
|
+
<script>
|
|
323
|
+
let currentProjectPath = null;
|
|
324
|
+
|
|
325
|
+
async function loadProjects() {
|
|
326
|
+
try {
|
|
327
|
+
const response = await fetch('/api/projects');
|
|
328
|
+
const data = await response.json();
|
|
329
|
+
|
|
330
|
+
if (data.status === 'ok' && data.data && data.data.length > 0) {
|
|
331
|
+
const select = document.getElementById('project-select');
|
|
332
|
+
if (select) {
|
|
333
|
+
select.innerHTML = data.data.map(function(p) {
|
|
334
|
+
return '<option value="' + escapeHtml(p.path) + '">' + escapeHtml(p.name || p.path) + '</option>';
|
|
335
|
+
}).join('');
|
|
336
|
+
|
|
337
|
+
// Try to select current directory
|
|
338
|
+
const cwd = window.location.pathname === '/' ? '' : window.location.pathname;
|
|
339
|
+
const defaultProject = data.data.find(function(p) { return p.path === cwd; }) || data.data[0];
|
|
340
|
+
if (defaultProject) {
|
|
341
|
+
currentProjectPath = defaultProject.path;
|
|
342
|
+
select.value = defaultProject.path;
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
} else {
|
|
346
|
+
// No projects yet, use current directory
|
|
347
|
+
currentProjectPath = window.location.pathname === '/' ? '' : window.location.pathname;
|
|
348
|
+
}
|
|
349
|
+
} catch (error) {
|
|
350
|
+
console.error('Failed to load projects:', error);
|
|
351
|
+
currentProjectPath = '';
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
async function loadData() {
|
|
356
|
+
try {
|
|
357
|
+
const url = currentProjectPath ? '/api/context?projectPath=' + encodeURIComponent(currentProjectPath) : '/api/context';
|
|
358
|
+
const response = await fetch(url);
|
|
359
|
+
const data = await response.json();
|
|
360
|
+
|
|
361
|
+
if (data.status === 'ok') {
|
|
362
|
+
document.getElementById('memories-count').textContent = data.memories ? data.memories.length : 0;
|
|
363
|
+
document.getElementById('observations-count').textContent = data.observations ? data.observations.length : 0;
|
|
364
|
+
document.getElementById('total-count').textContent = data.totalCount || 0;
|
|
365
|
+
updateStatus(data.memories && data.observations ? 'ok' : 'error');
|
|
366
|
+
|
|
367
|
+
renderMemories(data.memories || []);
|
|
368
|
+
renderObservations(data.observations || []);
|
|
369
|
+
|
|
370
|
+
// Update project info
|
|
371
|
+
if (data.project) {
|
|
372
|
+
const projectInfo = document.getElementById('project-info');
|
|
373
|
+
if (projectInfo) {
|
|
374
|
+
projectInfo.textContent = data.project.name || data.project.path || 'Unknown';
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
// Hide error alert if data loaded
|
|
379
|
+
const errorAlert = document.querySelector('.blob-alert');
|
|
380
|
+
if (errorAlert && (data.memories && data.memories.length > 0 || data.observations && data.observations.length > 0)) {
|
|
381
|
+
errorAlert.style.display = 'none';
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
// Show error alert if message present
|
|
385
|
+
if (data.message) {
|
|
386
|
+
const errorAlert = document.querySelector('.blob-alert');
|
|
387
|
+
if (errorAlert) {
|
|
388
|
+
errorAlert.querySelector('p').textContent = data.message;
|
|
389
|
+
errorAlert.style.display = 'flex';
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
} else {
|
|
393
|
+
throw new Error('API returned error status');
|
|
394
|
+
}
|
|
395
|
+
} catch (error) {
|
|
396
|
+
updateStatus('error');
|
|
397
|
+
|
|
398
|
+
// Show error alert
|
|
399
|
+
const errorAlert = document.querySelector('.blob-alert');
|
|
400
|
+
if (errorAlert) errorAlert.style.display = 'flex';
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
function renderMemories(memories) {
|
|
405
|
+
const container = document.getElementById('memories');
|
|
406
|
+
if (!memories || memories.length === 0) {
|
|
407
|
+
container.innerHTML = '<div class="bg-card-bg/50 p-6 rounded-3xl border-2 border-slate-700/20 flex flex-col items-center justify-center py-16 opacity-60"><p class="font-black italic text-text-muted">No memories found</p></div>';
|
|
408
|
+
return;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
container.innerHTML = memories.map(function(memory) {
|
|
412
|
+
return '<div class="bg-card-bg p-6 rounded-3xl border-2 border-slate-700/20 squishy-hover">' +
|
|
413
|
+
'<div class="flex items-start justify-between mb-4">' +
|
|
414
|
+
'<span class="bg-primary text-black px-3 py-1 rounded-full text-xs font-bold uppercase">' + (memory.type || 'memory') + '</span>' +
|
|
415
|
+
'<span class="text-text-muted text-sm">' + formatTime(memory.createdAt) + '</span>' +
|
|
416
|
+
'</div>' +
|
|
417
|
+
'<div class="text-text-main mb-4">' + escapeHtml(memory.content || memory.text || '') + '</div>' +
|
|
418
|
+
'<div class="text-text-muted text-sm">' +
|
|
419
|
+
'Tags: ' + (memory.tags ? memory.tags.join(', ') : 'none') +
|
|
420
|
+
'</div>' +
|
|
421
|
+
'</div>';
|
|
422
|
+
}).join('');
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
function renderObservations(observations) {
|
|
426
|
+
const container = document.getElementById('observations');
|
|
427
|
+
if (!observations || observations.length === 0) {
|
|
428
|
+
container.innerHTML = '<div class="bg-card-bg/50 p-6 rounded-3xl border-2 border-slate-700/20 flex flex-col items-center justify-center py-16 opacity-60"><p class="font-black italic text-text-muted">No observations found</p></div>';
|
|
429
|
+
return;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
container.innerHTML = observations.map(function(obs) {
|
|
433
|
+
return '<div class="bg-card-bg p-6 rounded-3xl border-2 border-slate-700/20 squishy-hover">' +
|
|
434
|
+
'<div class="flex items-start justify-between mb-4">' +
|
|
435
|
+
'<span class="bg-secondary text-black px-3 py-1 rounded-full text-xs font-bold uppercase">' + (obs.type || 'observation') + '</span>' +
|
|
436
|
+
'<span class="text-text-muted text-sm">' + formatTime(obs.createdAt) + '</span>' +
|
|
437
|
+
'</div>' +
|
|
438
|
+
'<div class="text-text-main mb-4">' + escapeHtml(obs.summary || obs.content || '') + '</div>' +
|
|
439
|
+
'<div class="text-text-muted text-sm">' +
|
|
440
|
+
'Action: ' + (obs.action || 'none') + ' | ' +
|
|
441
|
+
'Target: ' + (obs.target || 'none') +
|
|
442
|
+
'</div>' +
|
|
443
|
+
'</div>';
|
|
444
|
+
}).join('');
|
|
445
|
+
}
|
|
446
|
+
|
|
446
447
|
function updateStatus(status) {
|
|
447
|
-
const statusCard = document.querySelector('.squishy-hover.flex-col');
|
|
448
|
-
if (!statusCard) return;
|
|
449
|
-
|
|
450
|
-
if (status === 'ok') {
|
|
451
|
-
statusCard.innerHTML = '<div class="flex items-center gap-3">' +
|
|
452
|
-
'<div class="size-4 bg-primary rounded-full animate-pulse"></div>' +
|
|
453
|
-
'<p class="text-2xl font-black text-primary italic">OK</p>' +
|
|
454
|
-
'</div>' +
|
|
455
|
-
'<p class="text-sm font-bold uppercase tracking-widest text-text-muted italic mt-1">Status</p>';
|
|
456
|
-
} else {
|
|
457
|
-
statusCard.innerHTML = '<div class="flex items-center gap-3">' +
|
|
458
|
-
'<div class="size-4 bg-red-500 rounded-full pulse-red"></div>' +
|
|
459
|
-
'<p class="text-2xl font-black text-red-400 italic">Error</p>' +
|
|
460
|
-
'</div>' +
|
|
461
|
-
'<p class="text-sm font-bold uppercase tracking-widest text-text-muted italic mt-1">Status</p>';
|
|
462
|
-
}
|
|
463
|
-
}
|
|
464
|
-
|
|
465
|
-
function formatTime(timestamp) {
|
|
466
|
-
if (!timestamp) return 'Unknown';
|
|
467
|
-
const date = new Date(timestamp);
|
|
468
|
-
return date.toLocaleString();
|
|
469
|
-
}
|
|
470
|
-
|
|
471
|
-
function escapeHtml(text) {
|
|
472
|
-
const div = document.createElement('div');
|
|
473
|
-
div.textContent = text;
|
|
474
|
-
return div.innerHTML;
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
function openDocs() {
|
|
478
|
-
// Create and show documentation modal
|
|
479
|
-
const modal = document.createElement('div');
|
|
480
|
-
modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
|
|
481
|
-
modal.innerHTML = '<div class="bg-card-bg p-8 rounded-3xl border-2 border-slate-700/50 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto">' +
|
|
482
|
-
'<div class="flex justify-between items-center mb-6">' +
|
|
483
|
-
'<h2 class="text-2xl font-black text-primary italic">Documentation</h2>' +
|
|
484
|
-
'<button onclick="closeModal(this)" class="text-text-muted hover:text-text-main text-2xl">×</button>' +
|
|
485
|
-
'</div>' +
|
|
486
|
-
'<div class="space-y-4 text-text-main">' +
|
|
487
|
-
'<div class="bg-card-bg/50 p-4 rounded-xl border border-slate-700/30">' +
|
|
488
|
-
'<h3 class="font-bold text-primary mb-2">🧠 Memory System</h3>' +
|
|
489
|
-
'<p class="text-sm">The Squish Memory Plugin captures and stores conversations, tool usage, and project insights across sessions.</p>' +
|
|
490
|
-
'</div>' +
|
|
491
|
-
'<div class="bg-card-bg/50 p-4 rounded-xl border border-slate-700/30">' +
|
|
492
|
-
'<h3 class="font-bold text-primary mb-2">📊 API Endpoints</h3>' +
|
|
493
|
-
'<ul class="text-sm space-y-1">' +
|
|
494
|
-
'<li><code class="bg-slate-700/50 px-2 py-1 rounded">GET /api/health</code> - Service health status</li>' +
|
|
495
|
-
'<li><code class="bg-slate-700/50 px-2 py-1 rounded">GET /api/memories</code> - Recent memories</li>' +
|
|
496
|
-
'<li><code class="bg-slate-700/50 px-2 py-1 rounded">GET /api/observations</code> - Tool usage observations</li>' +
|
|
497
|
-
'<li><code class="bg-slate-700/50 px-2 py-1 rounded">GET /api/context</code> - Combined data</li>' +
|
|
498
|
-
'</ul>' +
|
|
499
|
-
'</div>' +
|
|
500
|
-
'<div class="bg-card-bg/50 p-4 rounded-xl border border-slate-700/30">' +
|
|
501
|
-
'<h3 class="font-bold text-primary mb-2">⚙️ Configuration</h3>' +
|
|
502
|
-
'<p class="text-sm">Configure via environment variables: <code class="bg-slate-700/50 px-2 py-1 rounded">SQUISH_WEB_PORT</code>, <code class="bg-slate-700/50 px-2 py-1 rounded">DATABASE_URL</code>, etc.</p>' +
|
|
503
|
-
'</div>' +
|
|
504
|
-
'<div class="bg-card-bg/50 p-4 rounded-xl border border-slate-700/30">' +
|
|
505
|
-
'<h3 class="font-bold text-primary mb-2">🚀 Getting Started</h3>' +
|
|
506
|
-
'<p class="text-sm">1. Install the plugin<br>2. Configure your database<br>3. Start the web UI<br>4. Access at http://localhost:37777</p>' +
|
|
507
|
-
'</div>' +
|
|
508
|
-
'</div>' +
|
|
509
|
-
'</div>';
|
|
510
|
-
document.body.appendChild(modal);
|
|
511
|
-
}
|
|
512
|
-
|
|
513
|
-
function openSettings() {
|
|
514
|
-
// Create and show settings modal
|
|
515
|
-
const modal = document.createElement('div');
|
|
516
|
-
modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
|
|
517
|
-
modal.innerHTML = '<div class="bg-card-bg p-8 rounded-3xl border-2 border-slate-700/50 max-w-md w-full mx-4">' +
|
|
518
|
-
'<div class="flex justify-between items-center mb-6">' +
|
|
519
|
-
'<h2 class="text-2xl font-black text-primary italic">Settings</h2>' +
|
|
520
|
-
'<button onclick="closeModal(this)" class="text-text-muted hover:text-text-main text-2xl">×</button>' +
|
|
521
|
-
'</div>' +
|
|
522
|
-
'<div class="space-y-4">' +
|
|
523
|
-
'<div class="bg-card-bg/50 p-4 rounded-xl border border-slate-700/30">' +
|
|
524
|
-
'<label class="block text-sm font-bold text-text-main mb-2">Refresh Interval</label>' +
|
|
525
|
-
'<select class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-text-main" onchange="changeRefreshInterval(this.value)">' +
|
|
526
|
-
'<option value="10000">10 seconds</option>' +
|
|
527
|
-
'<option value="30000" selected>30 seconds</option>' +
|
|
528
|
-
'<option value="60000">1 minute</option>' +
|
|
529
|
-
'<option value="300000">5 minutes</option>' +
|
|
530
|
-
'</select>' +
|
|
531
|
-
'</div>' +
|
|
532
|
-
'<div class="bg-card-bg/50 p-4 rounded-xl border border-slate-700/30">' +
|
|
533
|
-
'<label class="block text-sm font-bold text-text-main mb-2">Theme</label>' +
|
|
534
|
-
'<select class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-text-main" onchange="changeTheme(this.value)">' +
|
|
535
|
-
'<option value="dark" selected>Dark</option>' +
|
|
536
|
-
'<option value="light">Light</option>' +
|
|
537
|
-
'</select>' +
|
|
538
|
-
'</div>' +
|
|
539
|
-
'<div class="bg-card-bg/50 p-4 rounded-xl border border-slate-700/30">' +
|
|
540
|
-
'<label class="block text-sm font-bold text-text-main mb-2">Items per Page</label>' +
|
|
541
|
-
'<select class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-text-main" onchange="changeItemsPerPage(this.value)">' +
|
|
542
|
-
'<option value="10">10</option>' +
|
|
543
|
-
'<option value="25" selected>25</option>' +
|
|
544
|
-
'<option value="50">50</option>' +
|
|
545
|
-
'<option value="100">100</option>' +
|
|
546
|
-
'</select>' +
|
|
547
|
-
'</div>' +
|
|
548
|
-
'<div class="flex justify-end space-x-3 mt-6">' +
|
|
549
|
-
'<button onclick="closeModal(this)" class="px-4 py-2 bg-slate-700/50 hover:bg-slate-600/50 rounded-lg text-text-main transition-colors">Cancel</button>' +
|
|
550
|
-
'<button onclick="saveSettings()" class="px-4 py-2 bg-primary text-black rounded-lg hover:bg-primary/80 transition-colors">Save</button>' +
|
|
551
|
-
'</div>' +
|
|
552
|
-
'</div>' +
|
|
553
|
-
'</div>';
|
|
554
|
-
document.body.appendChild(modal);
|
|
555
|
-
}
|
|
556
|
-
|
|
557
|
-
function closeModal(button) {
|
|
558
|
-
const modal = button.closest('.fixed');
|
|
559
|
-
if (modal) {
|
|
560
|
-
modal.remove();
|
|
561
|
-
}
|
|
562
|
-
}
|
|
563
|
-
|
|
564
|
-
function changeRefreshInterval(interval) {
|
|
565
|
-
clearInterval(window.refreshInterval);
|
|
566
|
-
window.refreshInterval = setInterval(loadData, parseInt(interval));
|
|
567
|
-
}
|
|
568
|
-
|
|
569
|
-
function changeTheme(theme) {
|
|
570
|
-
if (theme === 'light') {
|
|
571
|
-
document.documentElement.classList.remove('dark');
|
|
572
|
-
} else {
|
|
573
|
-
document.documentElement.classList.add('dark');
|
|
574
|
-
}
|
|
575
|
-
}
|
|
576
|
-
|
|
577
|
-
function changeItemsPerPage(count) {
|
|
578
|
-
// This would require updating the API calls, for now just store in localStorage
|
|
579
|
-
localStorage.setItem('itemsPerPage', count);
|
|
580
|
-
}
|
|
581
|
-
|
|
582
|
-
function saveSettings() {
|
|
583
|
-
// Close the modal and show success message
|
|
584
|
-
const modal = document.querySelector('.fixed');
|
|
585
|
-
if (modal) {
|
|
586
|
-
// Could show a toast notification here
|
|
587
|
-
modal.remove();
|
|
588
|
-
}
|
|
589
|
-
}
|
|
590
|
-
|
|
591
|
-
function changeProject(path) {
|
|
592
|
-
currentProjectPath = path;
|
|
593
|
-
loadData();
|
|
594
|
-
}
|
|
595
|
-
|
|
596
|
-
// Initialize: load projects first, then data
|
|
597
|
-
loadProjects().then(function() {
|
|
598
|
-
loadData();
|
|
599
|
-
window.refreshInterval = setInterval(loadData, 30000);
|
|
600
|
-
});
|
|
601
|
-
</script>
|
|
448
|
+
const statusCard = document.querySelector('.squishy-hover.flex-col');
|
|
449
|
+
if (!statusCard) return;
|
|
450
|
+
|
|
451
|
+
if (status === 'ok') {
|
|
452
|
+
statusCard.innerHTML = '<div class="flex items-center gap-3">' +
|
|
453
|
+
'<div class="size-4 bg-primary rounded-full animate-pulse"></div>' +
|
|
454
|
+
'<p class="text-2xl font-black text-primary italic">OK</p>' +
|
|
455
|
+
'</div>' +
|
|
456
|
+
'<p class="text-sm font-bold uppercase tracking-widest text-text-muted italic mt-1">Status</p>';
|
|
457
|
+
} else {
|
|
458
|
+
statusCard.innerHTML = '<div class="flex items-center gap-3">' +
|
|
459
|
+
'<div class="size-4 bg-red-500 rounded-full pulse-red"></div>' +
|
|
460
|
+
'<p class="text-2xl font-black text-red-400 italic">Error</p>' +
|
|
461
|
+
'</div>' +
|
|
462
|
+
'<p class="text-sm font-bold uppercase tracking-widest text-text-muted italic mt-1">Status</p>';
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
function formatTime(timestamp) {
|
|
467
|
+
if (!timestamp) return 'Unknown';
|
|
468
|
+
const date = new Date(timestamp);
|
|
469
|
+
return date.toLocaleString();
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
function escapeHtml(text) {
|
|
473
|
+
const div = document.createElement('div');
|
|
474
|
+
div.textContent = text;
|
|
475
|
+
return div.innerHTML;
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
function openDocs() {
|
|
479
|
+
// Create and show documentation modal
|
|
480
|
+
const modal = document.createElement('div');
|
|
481
|
+
modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
|
|
482
|
+
modal.innerHTML = '<div class="bg-card-bg p-8 rounded-3xl border-2 border-slate-700/50 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto">' +
|
|
483
|
+
'<div class="flex justify-between items-center mb-6">' +
|
|
484
|
+
'<h2 class="text-2xl font-black text-primary italic">Documentation</h2>' +
|
|
485
|
+
'<button onclick="closeModal(this)" class="text-text-muted hover:text-text-main text-2xl">×</button>' +
|
|
486
|
+
'</div>' +
|
|
487
|
+
'<div class="space-y-4 text-text-main">' +
|
|
488
|
+
'<div class="bg-card-bg/50 p-4 rounded-xl border border-slate-700/30">' +
|
|
489
|
+
'<h3 class="font-bold text-primary mb-2">🧠 Memory System</h3>' +
|
|
490
|
+
'<p class="text-sm">The Squish Memory Plugin captures and stores conversations, tool usage, and project insights across sessions.</p>' +
|
|
491
|
+
'</div>' +
|
|
492
|
+
'<div class="bg-card-bg/50 p-4 rounded-xl border border-slate-700/30">' +
|
|
493
|
+
'<h3 class="font-bold text-primary mb-2">📊 API Endpoints</h3>' +
|
|
494
|
+
'<ul class="text-sm space-y-1">' +
|
|
495
|
+
'<li><code class="bg-slate-700/50 px-2 py-1 rounded">GET /api/health</code> - Service health status</li>' +
|
|
496
|
+
'<li><code class="bg-slate-700/50 px-2 py-1 rounded">GET /api/memories</code> - Recent memories</li>' +
|
|
497
|
+
'<li><code class="bg-slate-700/50 px-2 py-1 rounded">GET /api/observations</code> - Tool usage observations</li>' +
|
|
498
|
+
'<li><code class="bg-slate-700/50 px-2 py-1 rounded">GET /api/context</code> - Combined data</li>' +
|
|
499
|
+
'</ul>' +
|
|
500
|
+
'</div>' +
|
|
501
|
+
'<div class="bg-card-bg/50 p-4 rounded-xl border border-slate-700/30">' +
|
|
502
|
+
'<h3 class="font-bold text-primary mb-2">⚙️ Configuration</h3>' +
|
|
503
|
+
'<p class="text-sm">Configure via environment variables: <code class="bg-slate-700/50 px-2 py-1 rounded">SQUISH_WEB_PORT</code>, <code class="bg-slate-700/50 px-2 py-1 rounded">DATABASE_URL</code>, etc.</p>' +
|
|
504
|
+
'</div>' +
|
|
505
|
+
'<div class="bg-card-bg/50 p-4 rounded-xl border border-slate-700/30">' +
|
|
506
|
+
'<h3 class="font-bold text-primary mb-2">🚀 Getting Started</h3>' +
|
|
507
|
+
'<p class="text-sm">1. Install the plugin<br>2. Configure your database<br>3. Start the web UI<br>4. Access at http://localhost:37777</p>' +
|
|
508
|
+
'</div>' +
|
|
509
|
+
'</div>' +
|
|
510
|
+
'</div>';
|
|
511
|
+
document.body.appendChild(modal);
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
function openSettings() {
|
|
515
|
+
// Create and show settings modal
|
|
516
|
+
const modal = document.createElement('div');
|
|
517
|
+
modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
|
|
518
|
+
modal.innerHTML = '<div class="bg-card-bg p-8 rounded-3xl border-2 border-slate-700/50 max-w-md w-full mx-4">' +
|
|
519
|
+
'<div class="flex justify-between items-center mb-6">' +
|
|
520
|
+
'<h2 class="text-2xl font-black text-primary italic">Settings</h2>' +
|
|
521
|
+
'<button onclick="closeModal(this)" class="text-text-muted hover:text-text-main text-2xl">×</button>' +
|
|
522
|
+
'</div>' +
|
|
523
|
+
'<div class="space-y-4">' +
|
|
524
|
+
'<div class="bg-card-bg/50 p-4 rounded-xl border border-slate-700/30">' +
|
|
525
|
+
'<label class="block text-sm font-bold text-text-main mb-2">Refresh Interval</label>' +
|
|
526
|
+
'<select class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-text-main" onchange="changeRefreshInterval(this.value)">' +
|
|
527
|
+
'<option value="10000">10 seconds</option>' +
|
|
528
|
+
'<option value="30000" selected>30 seconds</option>' +
|
|
529
|
+
'<option value="60000">1 minute</option>' +
|
|
530
|
+
'<option value="300000">5 minutes</option>' +
|
|
531
|
+
'</select>' +
|
|
532
|
+
'</div>' +
|
|
533
|
+
'<div class="bg-card-bg/50 p-4 rounded-xl border border-slate-700/30">' +
|
|
534
|
+
'<label class="block text-sm font-bold text-text-main mb-2">Theme</label>' +
|
|
535
|
+
'<select class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-text-main" onchange="changeTheme(this.value)">' +
|
|
536
|
+
'<option value="dark" selected>Dark</option>' +
|
|
537
|
+
'<option value="light">Light</option>' +
|
|
538
|
+
'</select>' +
|
|
539
|
+
'</div>' +
|
|
540
|
+
'<div class="bg-card-bg/50 p-4 rounded-xl border border-slate-700/30">' +
|
|
541
|
+
'<label class="block text-sm font-bold text-text-main mb-2">Items per Page</label>' +
|
|
542
|
+
'<select class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-text-main" onchange="changeItemsPerPage(this.value)">' +
|
|
543
|
+
'<option value="10">10</option>' +
|
|
544
|
+
'<option value="25" selected>25</option>' +
|
|
545
|
+
'<option value="50">50</option>' +
|
|
546
|
+
'<option value="100">100</option>' +
|
|
547
|
+
'</select>' +
|
|
548
|
+
'</div>' +
|
|
549
|
+
'<div class="flex justify-end space-x-3 mt-6">' +
|
|
550
|
+
'<button onclick="closeModal(this)" class="px-4 py-2 bg-slate-700/50 hover:bg-slate-600/50 rounded-lg text-text-main transition-colors">Cancel</button>' +
|
|
551
|
+
'<button onclick="saveSettings()" class="px-4 py-2 bg-primary text-black rounded-lg hover:bg-primary/80 transition-colors">Save</button>' +
|
|
552
|
+
'</div>' +
|
|
553
|
+
'</div>' +
|
|
554
|
+
'</div>';
|
|
555
|
+
document.body.appendChild(modal);
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
function closeModal(button) {
|
|
559
|
+
const modal = button.closest('.fixed');
|
|
560
|
+
if (modal) {
|
|
561
|
+
modal.remove();
|
|
562
|
+
}
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
function changeRefreshInterval(interval) {
|
|
566
|
+
clearInterval(window.refreshInterval);
|
|
567
|
+
window.refreshInterval = setInterval(loadData, parseInt(interval));
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
function changeTheme(theme) {
|
|
571
|
+
if (theme === 'light') {
|
|
572
|
+
document.documentElement.classList.remove('dark');
|
|
573
|
+
} else {
|
|
574
|
+
document.documentElement.classList.add('dark');
|
|
575
|
+
}
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
function changeItemsPerPage(count) {
|
|
579
|
+
// This would require updating the API calls, for now just store in localStorage
|
|
580
|
+
localStorage.setItem('itemsPerPage', count);
|
|
581
|
+
}
|
|
582
|
+
|
|
583
|
+
function saveSettings() {
|
|
584
|
+
// Close the modal and show success message
|
|
585
|
+
const modal = document.querySelector('.fixed');
|
|
586
|
+
if (modal) {
|
|
587
|
+
// Could show a toast notification here
|
|
588
|
+
modal.remove();
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
function changeProject(path) {
|
|
593
|
+
currentProjectPath = path;
|
|
594
|
+
loadData();
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
// Initialize: load projects first, then data
|
|
598
|
+
loadProjects().then(function() {
|
|
599
|
+
loadData();
|
|
600
|
+
window.refreshInterval = setInterval(loadData, 30000);
|
|
601
|
+
});
|
|
602
|
+
</script>
|
|
602
603
|
</body></html>`;
|
|
603
604
|
res.send(html);
|
|
604
605
|
});
|