@199-bio/engram 0.2.0 → 0.3.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/dist/index.js +57 -13
- package/dist/storage/database.d.ts.map +1 -1
- package/dist/web/server.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/index.ts +61 -13
- package/src/storage/database.ts +130 -2
- package/src/web/server.ts +280 -0
- package/src/web/static/app.js +362 -0
- package/src/web/static/index.html +95 -0
- package/src/web/static/style.css +457 -0
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Engram</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<header>
|
|
11
|
+
<h1>Engram</h1>
|
|
12
|
+
<nav>
|
|
13
|
+
<button class="nav-btn active" data-view="memories">Memories</button>
|
|
14
|
+
<button class="nav-btn" data-view="entities">Entities</button>
|
|
15
|
+
<button class="nav-btn" data-view="graph">Graph</button>
|
|
16
|
+
</nav>
|
|
17
|
+
<div class="stats" id="stats"></div>
|
|
18
|
+
</header>
|
|
19
|
+
|
|
20
|
+
<main>
|
|
21
|
+
<!-- Memories View -->
|
|
22
|
+
<section id="memories-view" class="view active">
|
|
23
|
+
<div class="search-bar">
|
|
24
|
+
<input type="text" id="search-input" placeholder="Search memories...">
|
|
25
|
+
<button id="search-btn">Search</button>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<div class="toolbar">
|
|
29
|
+
<button id="add-memory-btn">+ Add Memory</button>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<div id="memories-list" class="list"></div>
|
|
33
|
+
</section>
|
|
34
|
+
|
|
35
|
+
<!-- Entities View -->
|
|
36
|
+
<section id="entities-view" class="view">
|
|
37
|
+
<div class="filter-bar">
|
|
38
|
+
<select id="entity-type-filter">
|
|
39
|
+
<option value="">All Types</option>
|
|
40
|
+
<option value="person">Person</option>
|
|
41
|
+
<option value="organization">Organization</option>
|
|
42
|
+
<option value="place">Place</option>
|
|
43
|
+
<option value="concept">Concept</option>
|
|
44
|
+
<option value="event">Event</option>
|
|
45
|
+
</select>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div id="entities-list" class="list"></div>
|
|
49
|
+
</section>
|
|
50
|
+
|
|
51
|
+
<!-- Graph View -->
|
|
52
|
+
<section id="graph-view" class="view">
|
|
53
|
+
<div id="graph-container"></div>
|
|
54
|
+
</section>
|
|
55
|
+
</main>
|
|
56
|
+
|
|
57
|
+
<!-- Modal for adding/editing -->
|
|
58
|
+
<div id="modal" class="modal hidden">
|
|
59
|
+
<div class="modal-content">
|
|
60
|
+
<h2 id="modal-title">Add Memory</h2>
|
|
61
|
+
<form id="modal-form">
|
|
62
|
+
<textarea id="modal-content-input" placeholder="Memory content..." rows="6"></textarea>
|
|
63
|
+
<div class="form-row">
|
|
64
|
+
<label>
|
|
65
|
+
Source:
|
|
66
|
+
<input type="text" id="modal-source" value="web">
|
|
67
|
+
</label>
|
|
68
|
+
<label>
|
|
69
|
+
Importance:
|
|
70
|
+
<input type="range" id="modal-importance" min="0" max="1" step="0.1" value="0.5">
|
|
71
|
+
<span id="importance-value">0.5</span>
|
|
72
|
+
</label>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="modal-actions">
|
|
75
|
+
<button type="button" id="modal-cancel">Cancel</button>
|
|
76
|
+
<button type="submit">Save</button>
|
|
77
|
+
</div>
|
|
78
|
+
</form>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<!-- Entity Detail Modal -->
|
|
83
|
+
<div id="entity-modal" class="modal hidden">
|
|
84
|
+
<div class="modal-content">
|
|
85
|
+
<h2 id="entity-modal-title"></h2>
|
|
86
|
+
<div id="entity-modal-body"></div>
|
|
87
|
+
<div class="modal-actions">
|
|
88
|
+
<button type="button" id="entity-modal-close">Close</button>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<script src="app.js"></script>
|
|
94
|
+
</body>
|
|
95
|
+
</html>
|
|
@@ -0,0 +1,457 @@
|
|
|
1
|
+
/* Engram Web Interface
|
|
2
|
+
* Claude Desktop aesthetic: serif, cream, sharp corners, generous spacing
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
/* Cream color scheme */
|
|
7
|
+
--bg-primary: #faf8f5;
|
|
8
|
+
--bg-secondary: #f5f2ed;
|
|
9
|
+
--bg-tertiary: #ebe7e0;
|
|
10
|
+
--text-primary: #1a1a1a;
|
|
11
|
+
--text-secondary: #5c5c5c;
|
|
12
|
+
--text-muted: #8c8c8c;
|
|
13
|
+
--border: #d4d0c8;
|
|
14
|
+
--accent: #d97706;
|
|
15
|
+
--accent-hover: #b45309;
|
|
16
|
+
--success: #059669;
|
|
17
|
+
--danger: #dc2626;
|
|
18
|
+
--shadow: rgba(0, 0, 0, 0.06);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
* {
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
margin: 0;
|
|
24
|
+
padding: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
html {
|
|
28
|
+
font-size: 16px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
body {
|
|
32
|
+
font-family: "Tiempos Text", "Times New Roman", Georgia, serif;
|
|
33
|
+
background: var(--bg-primary);
|
|
34
|
+
color: var(--text-primary);
|
|
35
|
+
line-height: 1.6;
|
|
36
|
+
min-height: 100vh;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Typography */
|
|
40
|
+
h1, h2, h3, h4 {
|
|
41
|
+
font-weight: 500;
|
|
42
|
+
letter-spacing: -0.02em;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
h1 {
|
|
46
|
+
font-size: 1.75rem;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
h2 {
|
|
50
|
+
font-size: 1.25rem;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* Header */
|
|
54
|
+
header {
|
|
55
|
+
display: flex;
|
|
56
|
+
align-items: center;
|
|
57
|
+
gap: 2rem;
|
|
58
|
+
padding: 1.5rem 2rem;
|
|
59
|
+
background: var(--bg-secondary);
|
|
60
|
+
border-bottom: 1px solid var(--border);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
header h1 {
|
|
64
|
+
color: var(--text-primary);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
nav {
|
|
68
|
+
display: flex;
|
|
69
|
+
gap: 0.5rem;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.nav-btn {
|
|
73
|
+
font-family: inherit;
|
|
74
|
+
font-size: 0.875rem;
|
|
75
|
+
padding: 0.5rem 1rem;
|
|
76
|
+
background: transparent;
|
|
77
|
+
border: 1px solid transparent;
|
|
78
|
+
color: var(--text-secondary);
|
|
79
|
+
cursor: pointer;
|
|
80
|
+
transition: all 0.15s ease;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.nav-btn:hover {
|
|
84
|
+
color: var(--text-primary);
|
|
85
|
+
background: var(--bg-tertiary);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.nav-btn.active {
|
|
89
|
+
color: var(--text-primary);
|
|
90
|
+
border-color: var(--border);
|
|
91
|
+
background: var(--bg-primary);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.stats {
|
|
95
|
+
margin-left: auto;
|
|
96
|
+
font-size: 0.8125rem;
|
|
97
|
+
color: var(--text-muted);
|
|
98
|
+
font-variant-numeric: tabular-nums;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* Main content */
|
|
102
|
+
main {
|
|
103
|
+
max-width: 960px;
|
|
104
|
+
margin: 0 auto;
|
|
105
|
+
padding: 2rem;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.view {
|
|
109
|
+
display: none;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.view.active {
|
|
113
|
+
display: block;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* Search bar */
|
|
117
|
+
.search-bar {
|
|
118
|
+
display: flex;
|
|
119
|
+
gap: 0.75rem;
|
|
120
|
+
margin-bottom: 1.5rem;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.search-bar input {
|
|
124
|
+
flex: 1;
|
|
125
|
+
font-family: inherit;
|
|
126
|
+
font-size: 1rem;
|
|
127
|
+
padding: 0.75rem 1rem;
|
|
128
|
+
border: 1px solid var(--border);
|
|
129
|
+
background: var(--bg-secondary);
|
|
130
|
+
color: var(--text-primary);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.search-bar input:focus {
|
|
134
|
+
outline: none;
|
|
135
|
+
border-color: var(--accent);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.search-bar input::placeholder {
|
|
139
|
+
color: var(--text-muted);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* Buttons */
|
|
143
|
+
button {
|
|
144
|
+
font-family: inherit;
|
|
145
|
+
font-size: 0.875rem;
|
|
146
|
+
padding: 0.625rem 1.25rem;
|
|
147
|
+
background: var(--text-primary);
|
|
148
|
+
color: var(--bg-primary);
|
|
149
|
+
border: none;
|
|
150
|
+
cursor: pointer;
|
|
151
|
+
transition: background 0.15s ease;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
button:hover {
|
|
155
|
+
background: var(--text-secondary);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
button:disabled {
|
|
159
|
+
opacity: 0.5;
|
|
160
|
+
cursor: not-allowed;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.toolbar {
|
|
164
|
+
display: flex;
|
|
165
|
+
gap: 0.75rem;
|
|
166
|
+
margin-bottom: 1.5rem;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
#add-memory-btn {
|
|
170
|
+
background: var(--accent);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
#add-memory-btn:hover {
|
|
174
|
+
background: var(--accent-hover);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/* Filter bar */
|
|
178
|
+
.filter-bar {
|
|
179
|
+
margin-bottom: 1.5rem;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.filter-bar select {
|
|
183
|
+
font-family: inherit;
|
|
184
|
+
font-size: 0.875rem;
|
|
185
|
+
padding: 0.625rem 1rem;
|
|
186
|
+
border: 1px solid var(--border);
|
|
187
|
+
background: var(--bg-secondary);
|
|
188
|
+
color: var(--text-primary);
|
|
189
|
+
cursor: pointer;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.filter-bar select:focus {
|
|
193
|
+
outline: none;
|
|
194
|
+
border-color: var(--accent);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* List items */
|
|
198
|
+
.list {
|
|
199
|
+
display: flex;
|
|
200
|
+
flex-direction: column;
|
|
201
|
+
gap: 1rem;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.list-item {
|
|
205
|
+
background: var(--bg-secondary);
|
|
206
|
+
border: 1px solid var(--border);
|
|
207
|
+
padding: 1.25rem 1.5rem;
|
|
208
|
+
transition: border-color 0.15s ease;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.list-item:hover {
|
|
212
|
+
border-color: var(--text-muted);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.memory-item .content {
|
|
216
|
+
font-size: 1rem;
|
|
217
|
+
line-height: 1.7;
|
|
218
|
+
margin-bottom: 1rem;
|
|
219
|
+
white-space: pre-wrap;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.memory-item .meta {
|
|
223
|
+
display: flex;
|
|
224
|
+
gap: 1.5rem;
|
|
225
|
+
font-size: 0.8125rem;
|
|
226
|
+
color: var(--text-muted);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.memory-item .meta span {
|
|
230
|
+
display: flex;
|
|
231
|
+
align-items: center;
|
|
232
|
+
gap: 0.375rem;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.memory-item .actions {
|
|
236
|
+
display: flex;
|
|
237
|
+
gap: 0.5rem;
|
|
238
|
+
margin-top: 1rem;
|
|
239
|
+
padding-top: 1rem;
|
|
240
|
+
border-top: 1px solid var(--border);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.memory-item .actions button {
|
|
244
|
+
font-size: 0.75rem;
|
|
245
|
+
padding: 0.375rem 0.75rem;
|
|
246
|
+
background: var(--bg-tertiary);
|
|
247
|
+
color: var(--text-secondary);
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.memory-item .actions button:hover {
|
|
251
|
+
background: var(--border);
|
|
252
|
+
color: var(--text-primary);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.memory-item .actions .delete-btn:hover {
|
|
256
|
+
background: var(--danger);
|
|
257
|
+
color: white;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
/* Entity items */
|
|
261
|
+
.entity-item {
|
|
262
|
+
cursor: pointer;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.entity-item .name {
|
|
266
|
+
font-size: 1rem;
|
|
267
|
+
font-weight: 500;
|
|
268
|
+
margin-bottom: 0.375rem;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.entity-item .type {
|
|
272
|
+
font-size: 0.8125rem;
|
|
273
|
+
color: var(--text-muted);
|
|
274
|
+
text-transform: capitalize;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
/* Graph container */
|
|
278
|
+
#graph-container {
|
|
279
|
+
width: 100%;
|
|
280
|
+
height: 600px;
|
|
281
|
+
background: var(--bg-secondary);
|
|
282
|
+
border: 1px solid var(--border);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
/* Modal */
|
|
286
|
+
.modal {
|
|
287
|
+
position: fixed;
|
|
288
|
+
inset: 0;
|
|
289
|
+
background: rgba(0, 0, 0, 0.4);
|
|
290
|
+
display: flex;
|
|
291
|
+
align-items: center;
|
|
292
|
+
justify-content: center;
|
|
293
|
+
padding: 2rem;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.modal.hidden {
|
|
297
|
+
display: none;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.modal-content {
|
|
301
|
+
background: var(--bg-primary);
|
|
302
|
+
border: 1px solid var(--border);
|
|
303
|
+
padding: 2rem;
|
|
304
|
+
width: 100%;
|
|
305
|
+
max-width: 600px;
|
|
306
|
+
max-height: 90vh;
|
|
307
|
+
overflow-y: auto;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.modal-content h2 {
|
|
311
|
+
margin-bottom: 1.5rem;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.modal-content textarea,
|
|
315
|
+
.modal-content input[type="text"] {
|
|
316
|
+
width: 100%;
|
|
317
|
+
font-family: inherit;
|
|
318
|
+
font-size: 1rem;
|
|
319
|
+
padding: 0.75rem 1rem;
|
|
320
|
+
border: 1px solid var(--border);
|
|
321
|
+
background: var(--bg-secondary);
|
|
322
|
+
color: var(--text-primary);
|
|
323
|
+
resize: vertical;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.modal-content textarea:focus,
|
|
327
|
+
.modal-content input:focus {
|
|
328
|
+
outline: none;
|
|
329
|
+
border-color: var(--accent);
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.form-row {
|
|
333
|
+
display: flex;
|
|
334
|
+
gap: 1.5rem;
|
|
335
|
+
margin-top: 1rem;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.form-row label {
|
|
339
|
+
display: flex;
|
|
340
|
+
align-items: center;
|
|
341
|
+
gap: 0.5rem;
|
|
342
|
+
font-size: 0.875rem;
|
|
343
|
+
color: var(--text-secondary);
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.form-row input[type="text"] {
|
|
347
|
+
width: 120px;
|
|
348
|
+
padding: 0.5rem;
|
|
349
|
+
font-size: 0.875rem;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.form-row input[type="range"] {
|
|
353
|
+
width: 100px;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
#importance-value {
|
|
357
|
+
font-variant-numeric: tabular-nums;
|
|
358
|
+
min-width: 2rem;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
.modal-actions {
|
|
362
|
+
display: flex;
|
|
363
|
+
justify-content: flex-end;
|
|
364
|
+
gap: 0.75rem;
|
|
365
|
+
margin-top: 1.5rem;
|
|
366
|
+
padding-top: 1.5rem;
|
|
367
|
+
border-top: 1px solid var(--border);
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
#modal-cancel,
|
|
371
|
+
#entity-modal-close {
|
|
372
|
+
background: var(--bg-tertiary);
|
|
373
|
+
color: var(--text-secondary);
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
#modal-cancel:hover,
|
|
377
|
+
#entity-modal-close:hover {
|
|
378
|
+
background: var(--border);
|
|
379
|
+
color: var(--text-primary);
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
/* Entity detail modal */
|
|
383
|
+
#entity-modal-body {
|
|
384
|
+
font-size: 0.9375rem;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
#entity-modal-body h3 {
|
|
388
|
+
font-size: 0.875rem;
|
|
389
|
+
color: var(--text-muted);
|
|
390
|
+
text-transform: uppercase;
|
|
391
|
+
letter-spacing: 0.05em;
|
|
392
|
+
margin: 1.5rem 0 0.75rem;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
#entity-modal-body h3:first-child {
|
|
396
|
+
margin-top: 0;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
#entity-modal-body ul {
|
|
400
|
+
list-style: none;
|
|
401
|
+
padding: 0;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
#entity-modal-body li {
|
|
405
|
+
padding: 0.5rem 0;
|
|
406
|
+
border-bottom: 1px solid var(--border);
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
#entity-modal-body li:last-child {
|
|
410
|
+
border-bottom: none;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
/* Empty states */
|
|
414
|
+
.empty-state {
|
|
415
|
+
text-align: center;
|
|
416
|
+
padding: 3rem 2rem;
|
|
417
|
+
color: var(--text-muted);
|
|
418
|
+
font-style: italic;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
/* Score badge */
|
|
422
|
+
.score {
|
|
423
|
+
display: inline-block;
|
|
424
|
+
font-size: 0.6875rem;
|
|
425
|
+
padding: 0.125rem 0.375rem;
|
|
426
|
+
background: var(--bg-tertiary);
|
|
427
|
+
color: var(--text-muted);
|
|
428
|
+
font-variant-numeric: tabular-nums;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
/* Responsive */
|
|
432
|
+
@media (max-width: 640px) {
|
|
433
|
+
header {
|
|
434
|
+
flex-wrap: wrap;
|
|
435
|
+
gap: 1rem;
|
|
436
|
+
padding: 1rem;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
nav {
|
|
440
|
+
width: 100%;
|
|
441
|
+
order: 3;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.stats {
|
|
445
|
+
margin-left: 0;
|
|
446
|
+
width: 100%;
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
main {
|
|
450
|
+
padding: 1rem;
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
.form-row {
|
|
454
|
+
flex-direction: column;
|
|
455
|
+
gap: 1rem;
|
|
456
|
+
}
|
|
457
|
+
}
|