@199-bio/engram 0.8.0 → 0.10.0

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.
@@ -3,144 +3,352 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="theme-color" content="#0071e3">
7
+ <meta name="color-scheme" content="light dark">
6
8
  <title>Engram</title>
7
9
  <link rel="stylesheet" href="style.css">
8
10
  </head>
9
11
  <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
- <button class="nav-btn" data-view="consolidation">Consolidation</button>
17
- <button class="nav-btn" data-view="settings">Settings</button>
18
- </nav>
19
- <div class="stats" id="stats"></div>
20
- <div class="api-status" id="api-status" title="Anthropic API Status">
21
- <span class="api-dot"></span>
22
- <span class="api-label">API</span>
23
- </div>
24
- <button id="chat-toggle" class="chat-toggle" title="Open Chat Assistant">Chat</button>
25
- </header>
26
-
27
- <main>
28
- <!-- Memories View -->
29
- <section id="memories-view" class="view active">
30
- <div class="search-bar">
31
- <input type="text" id="search-input" placeholder="Search memories...">
32
- <button id="search-btn">Search</button>
33
- </div>
12
+ <div class="app-container">
13
+ <!-- Sidebar Navigation -->
14
+ <aside class="sidebar" id="sidebar">
15
+ <button class="sidebar-toggle" id="sidebar-toggle" aria-label="Toggle sidebar">
16
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
17
+ <path d="M15 18l-6-6 6-6"/>
18
+ </svg>
19
+ </button>
34
20
 
35
- <div class="toolbar">
36
- <button id="add-memory-btn">+ Add Memory</button>
21
+ <div class="sidebar-brand">
22
+ <div class="logo">
23
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
24
+ <circle cx="12" cy="12" r="3"/>
25
+ <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
26
+ </svg>
27
+ </div>
28
+ <span>Engram</span>
37
29
  </div>
38
30
 
39
- <div id="memories-list" class="list"></div>
40
- </section>
41
-
42
- <!-- Entities View -->
43
- <section id="entities-view" class="view">
44
- <div class="filter-bar">
45
- <select id="entity-type-filter">
46
- <option value="">All Types</option>
47
- <option value="person">Person</option>
48
- <option value="organization">Organization</option>
49
- <option value="place">Place</option>
50
- <option value="concept">Concept</option>
51
- <option value="event">Event</option>
52
- </select>
31
+ <nav class="sidebar-nav">
32
+ <div class="nav-section">
33
+ <div class="nav-section-title">Data</div>
34
+ <button class="nav-item active" data-view="memories">
35
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
36
+ <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/>
37
+ <path d="M3.29 7L12 12l8.71-5M12 22V12"/>
38
+ </svg>
39
+ <span class="nav-label">Memories</span>
40
+ </button>
41
+ <button class="nav-item" data-view="entities">
42
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
43
+ <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
44
+ <circle cx="9" cy="7" r="4"/>
45
+ <path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
46
+ </svg>
47
+ <span class="nav-label">Entities</span>
48
+ </button>
49
+ <button class="nav-item" data-view="graph">
50
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
51
+ <circle cx="18" cy="5" r="3"/>
52
+ <circle cx="6" cy="12" r="3"/>
53
+ <circle cx="18" cy="19" r="3"/>
54
+ <path d="M8.59 13.51l6.82 3.98M15.41 6.51l-6.82 3.98"/>
55
+ </svg>
56
+ <span class="nav-label">Graph</span>
57
+ </button>
58
+ </div>
59
+
60
+ <div class="nav-section">
61
+ <div class="nav-section-title">Intelligence</div>
62
+ <button class="nav-item" data-view="consolidation">
63
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
64
+ <path d="M12 2L2 7l10 5 10-5-10-5z"/>
65
+ <path d="M2 17l10 5 10-5"/>
66
+ <path d="M2 12l10 5 10-5"/>
67
+ </svg>
68
+ <span class="nav-label">Consolidation</span>
69
+ <span class="nav-badge" id="consolidation-badge" style="display: none;">0</span>
70
+ </button>
71
+ </div>
72
+
73
+ <div class="nav-section">
74
+ <div class="nav-section-title">System</div>
75
+ <button class="nav-item" data-view="settings">
76
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
77
+ <circle cx="12" cy="12" r="3"/>
78
+ <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
79
+ </svg>
80
+ <span class="nav-label">Settings</span>
81
+ </button>
82
+ </div>
83
+ </nav>
84
+
85
+ <div class="sidebar-footer">
86
+ <div class="sidebar-stats" id="sidebar-stats">
87
+ <div class="stat-row">
88
+ <span>Memories</span>
89
+ <span id="stat-memories">-</span>
90
+ </div>
91
+ <div class="stat-row">
92
+ <span>Entities</span>
93
+ <span id="stat-entities">-</span>
94
+ </div>
95
+ <div class="stat-row">
96
+ <span>Relations</span>
97
+ <span id="stat-relations">-</span>
98
+ </div>
99
+ </div>
53
100
  </div>
101
+ </aside>
102
+
103
+ <!-- Main Content Area -->
104
+ <div class="main-wrapper">
105
+ <!-- Header -->
106
+ <header class="header">
107
+ <h1 class="header-title" id="view-title">Memories</h1>
108
+
109
+ <div class="header-search" id="header-search">
110
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
111
+ <circle cx="11" cy="11" r="8"/>
112
+ <path d="M21 21l-4.35-4.35"/>
113
+ </svg>
114
+ <input type="text" id="search-input" placeholder="Search memories..." autocomplete="off">
115
+ </div>
116
+
117
+ <div class="header-actions">
118
+ <!-- API Status -->
119
+ <div class="status-indicator" id="api-status" title="API Status">
120
+ <span class="status-dot"></span>
121
+ <span class="status-label">API</span>
122
+ </div>
54
123
 
55
- <div id="entities-list" class="list"></div>
56
- </section>
124
+ <!-- Theme Toggle -->
125
+ <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
126
+ <span class="toggle-icon sun">
127
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
128
+ <circle cx="12" cy="12" r="5"/>
129
+ <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
130
+ </svg>
131
+ </span>
132
+ <span class="toggle-icon moon">
133
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
134
+ <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
135
+ </svg>
136
+ </span>
137
+ <span class="toggle-slider"></span>
138
+ </button>
57
139
 
58
- <!-- Graph View -->
59
- <section id="graph-view" class="view">
60
- <div id="graph-container"></div>
61
- </section>
140
+ <!-- Chat Toggle -->
141
+ <button class="icon-btn" id="chat-toggle" title="Open Chat Assistant">
142
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
143
+ <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
144
+ </svg>
145
+ </button>
146
+ </div>
147
+ </header>
62
148
 
63
- <!-- Settings View -->
64
- <section id="settings-view" class="view">
65
- <div class="settings-container">
66
- <h2>Settings</h2>
149
+ <!-- Main Content -->
150
+ <main>
151
+ <!-- Memories View -->
152
+ <section id="memories-view" class="view active">
153
+ <div class="toolbar">
154
+ <button class="btn btn-primary" id="add-memory-btn">
155
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
156
+ <path d="M12 5v14M5 12h14"/>
157
+ </svg>
158
+ Add Memory
159
+ </button>
160
+ <div class="toolbar-divider"></div>
161
+ <select class="form-input form-select" id="memory-sort" style="width: auto; min-width: 150px;">
162
+ <option value="recent">Most Recent</option>
163
+ <option value="importance">Importance</option>
164
+ </select>
165
+ </div>
67
166
 
68
- <div class="settings-section">
69
- <h3>API Configuration</h3>
70
- <p class="section-desc">Configure your Anthropic API key to enable Chat and Consolidation features.</p>
167
+ <div id="memories-list" class="list"></div>
168
+ </section>
71
169
 
72
- <div class="settings-row" id="api-key-status">
73
- <label>Status:</label>
74
- <span class="status-badge" id="api-status-badge">Checking...</span>
170
+ <!-- Entities View -->
171
+ <section id="entities-view" class="view">
172
+ <div class="toolbar">
173
+ <select class="form-input form-select" id="entity-type-filter" style="width: auto; min-width: 180px;">
174
+ <option value="">All Types</option>
175
+ <option value="person">Person</option>
176
+ <option value="organization">Organization</option>
177
+ <option value="place">Place</option>
178
+ <option value="concept">Concept</option>
179
+ <option value="event">Event</option>
180
+ </select>
75
181
  </div>
76
182
 
77
- <div class="settings-row">
78
- <label for="api-key-input">API Key:</label>
79
- <div class="input-group">
80
- <input type="password" id="api-key-input" placeholder="sk-ant-api03-..." autocomplete="off">
81
- <button type="button" id="toggle-key-visibility" title="Show/hide">👁</button>
183
+ <div id="entities-list" class="list"></div>
184
+ </section>
185
+
186
+ <!-- Graph View -->
187
+ <section id="graph-view" class="view">
188
+ <div id="graph-container"></div>
189
+ </section>
190
+
191
+ <!-- Consolidation View -->
192
+ <section id="consolidation-view" class="view">
193
+ <div class="consolidation-header">
194
+ <div class="consolidation-stats">
195
+ <div class="stat-block">
196
+ <div class="stat-value" id="unconsolidated-count">-</div>
197
+ <div class="stat-label">Unconsolidated</div>
198
+ </div>
199
+ <div class="stat-block">
200
+ <div class="stat-value" id="digests-count">-</div>
201
+ <div class="stat-label">Digests</div>
202
+ </div>
203
+ <div class="stat-block">
204
+ <div class="stat-value" id="contradictions-count">-</div>
205
+ <div class="stat-label">Contradictions</div>
206
+ </div>
82
207
  </div>
208
+ <button class="btn btn-primary btn-lg" id="run-consolidation-btn">
209
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
210
+ <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/>
211
+ </svg>
212
+ Run Consolidation
213
+ </button>
83
214
  </div>
84
215
 
85
- <div class="settings-row">
86
- <button id="save-api-key" class="primary-btn">Save API Key</button>
87
- <button id="clear-api-key" class="danger-btn">Clear</button>
216
+ <div class="consolidation-sections">
217
+ <div class="section">
218
+ <div class="section-header">
219
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 24px; height: 24px; color: var(--danger);">
220
+ <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
221
+ <path d="M12 9v4M12 17h.01"/>
222
+ </svg>
223
+ <div>
224
+ <h2>Contradictions</h2>
225
+ <p class="section-desc">Conflicting information detected during consolidation. Review and resolve.</p>
226
+ </div>
227
+ </div>
228
+ <div id="contradictions-list" class="list"></div>
229
+ </div>
230
+
231
+ <div class="section">
232
+ <div class="section-header">
233
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 24px; height: 24px; color: var(--success);">
234
+ <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
235
+ <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/>
236
+ </svg>
237
+ <div>
238
+ <h2>Digests</h2>
239
+ <p class="section-desc">Consolidated summaries of your memories.</p>
240
+ </div>
241
+ </div>
242
+ <div id="digests-list" class="list"></div>
243
+ </div>
88
244
  </div>
245
+ </section>
89
246
 
90
- <p class="help-text">
91
- Get your API key from <a href="https://console.anthropic.com/settings/keys" target="_blank">console.anthropic.com</a>
92
- </p>
93
- </div>
94
- </div>
95
- </section>
96
-
97
- <!-- Consolidation View -->
98
- <section id="consolidation-view" class="view">
99
- <div class="consolidation-header">
100
- <div class="consolidation-status" id="consolidation-status">
101
- <span class="status-item"><strong>Unconsolidated:</strong> <span id="unconsolidated-count">-</span></span>
102
- <span class="status-item"><strong>Digests:</strong> <span id="digests-count">-</span></span>
103
- <span class="status-item"><strong>Contradictions:</strong> <span id="contradictions-count">-</span></span>
104
- </div>
105
- <button id="run-consolidation-btn">Run Consolidation</button>
106
- </div>
247
+ <!-- Settings View -->
248
+ <section id="settings-view" class="view">
249
+ <div class="settings-container">
250
+ <div class="settings-section">
251
+ <div class="settings-section-header">
252
+ <h3>
253
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
254
+ <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
255
+ <path d="M7 11V7a5 5 0 0110 0v4"/>
256
+ </svg>
257
+ API Configuration
258
+ </h3>
259
+ <span class="status-badge" id="api-status-badge">Checking...</span>
260
+ </div>
261
+ <p class="help-text" style="margin-top: 0; margin-bottom: 20px;">
262
+ Configure your Anthropic API key to enable Chat and Consolidation features.
263
+ </p>
107
264
 
108
- <div class="consolidation-sections">
109
- <div class="section">
110
- <h2>Contradictions</h2>
111
- <p class="section-desc">Conflicting information detected during consolidation. Review and resolve.</p>
112
- <div id="contradictions-list" class="list"></div>
113
- </div>
265
+ <div class="form-group">
266
+ <label class="form-label">API Key</label>
267
+ <div class="input-group">
268
+ <input type="password" class="form-input" id="api-key-input" placeholder="sk-ant-api03-..." autocomplete="off">
269
+ <button class="btn btn-secondary" type="button" id="toggle-key-visibility" title="Show/hide">
270
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="eye-icon">
271
+ <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
272
+ <circle cx="12" cy="12" r="3"/>
273
+ </svg>
274
+ </button>
275
+ </div>
276
+ </div>
114
277
 
115
- <div class="section">
116
- <h2>Digests</h2>
117
- <p class="section-desc">Consolidated summaries of your memories.</p>
118
- <div id="digests-list" class="list"></div>
119
- </div>
120
- </div>
121
- </section>
122
- </main>
278
+ <div class="settings-actions">
279
+ <button class="btn btn-primary" id="save-api-key">Save API Key</button>
280
+ <button class="btn btn-danger" id="clear-api-key">Clear</button>
281
+ </div>
282
+
283
+ <p class="help-text">
284
+ Get your API key from <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener">console.anthropic.com</a>
285
+ </p>
286
+ </div>
287
+
288
+ <div class="settings-section">
289
+ <div class="settings-section-header">
290
+ <h3>
291
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
292
+ <circle cx="12" cy="12" r="5"/>
293
+ <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
294
+ </svg>
295
+ Appearance
296
+ </h3>
297
+ </div>
298
+ <p class="help-text" style="margin-top: 0; margin-bottom: 20px;">
299
+ Choose your preferred color scheme.
300
+ </p>
123
301
 
124
- <!-- Modal for adding/editing -->
302
+ <div class="settings-row">
303
+ <label class="form-label" style="margin-bottom: 0;">Theme</label>
304
+ <select class="form-input form-select" id="theme-select" style="width: auto; min-width: 160px;">
305
+ <option value="system">System Default</option>
306
+ <option value="light">Light</option>
307
+ <option value="dark">Dark</option>
308
+ </select>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </section>
313
+ </main>
314
+ </div>
315
+ </div>
316
+
317
+ <!-- Add/Edit Memory Modal -->
125
318
  <div id="modal" class="modal hidden">
126
319
  <div class="modal-content">
127
- <h2 id="modal-title">Add Memory</h2>
320
+ <div class="modal-header">
321
+ <h2 id="modal-title">Add Memory</h2>
322
+ <button class="modal-close" id="modal-cancel" aria-label="Close">
323
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
324
+ <path d="M18 6L6 18M6 6l12 12"/>
325
+ </svg>
326
+ </button>
327
+ </div>
128
328
  <form id="modal-form">
129
- <textarea id="modal-content-input" placeholder="Memory content..." rows="6"></textarea>
130
- <div class="form-row">
131
- <label>
132
- Source:
133
- <input type="text" id="modal-source" value="web">
134
- </label>
135
- <label>
136
- Importance:
137
- <input type="range" id="modal-importance" min="0" max="1" step="0.1" value="0.5">
138
- <span id="importance-value">0.5</span>
139
- </label>
329
+ <div class="modal-body">
330
+ <div class="form-group">
331
+ <label class="form-label">Content</label>
332
+ <textarea class="form-input" id="modal-content-input" placeholder="What do you want to remember?" rows="6"></textarea>
333
+ </div>
334
+ <div class="form-group">
335
+ <label class="form-label">Source</label>
336
+ <input type="text" class="form-input" id="modal-source" value="web">
337
+ </div>
338
+ <div class="form-group">
339
+ <label class="form-label">Importance: <span id="importance-value">0.5</span></label>
340
+ <input type="range" class="form-range" id="modal-importance" min="0" max="1" step="0.1" value="0.5">
341
+ </div>
140
342
  </div>
141
- <div class="modal-actions">
142
- <button type="button" id="modal-cancel">Cancel</button>
143
- <button type="submit">Save</button>
343
+ <div class="modal-footer">
344
+ <button type="button" class="btn btn-secondary" id="modal-cancel-btn">Cancel</button>
345
+ <button type="submit" class="btn btn-primary">
346
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
347
+ <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/>
348
+ <path d="M17 21v-8H7v8M7 3v5h8"/>
349
+ </svg>
350
+ Save
351
+ </button>
144
352
  </div>
145
353
  </form>
146
354
  </div>
@@ -149,10 +357,17 @@
149
357
  <!-- Entity Detail Modal -->
150
358
  <div id="entity-modal" class="modal hidden">
151
359
  <div class="modal-content">
152
- <h2 id="entity-modal-title"></h2>
153
- <div id="entity-modal-body"></div>
154
- <div class="modal-actions">
155
- <button type="button" id="entity-modal-close">Close</button>
360
+ <div class="modal-header">
361
+ <h2 id="entity-modal-title"></h2>
362
+ <button class="modal-close" id="entity-modal-close" aria-label="Close">
363
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
364
+ <path d="M18 6L6 18M6 6l12 12"/>
365
+ </svg>
366
+ </button>
367
+ </div>
368
+ <div class="modal-body" id="entity-modal-body"></div>
369
+ <div class="modal-footer">
370
+ <button type="button" class="btn btn-secondary" id="entity-modal-close-btn">Close</button>
156
371
  </div>
157
372
  </div>
158
373
  </div>
@@ -160,17 +375,29 @@
160
375
  <!-- Contradiction Resolution Modal -->
161
376
  <div id="contradiction-modal" class="modal hidden">
162
377
  <div class="modal-content modal-wide">
163
- <h2>Resolve Contradiction</h2>
164
- <div id="contradiction-modal-body"></div>
378
+ <div class="modal-header">
379
+ <h2>Resolve Contradiction</h2>
380
+ <button class="modal-close" id="contradiction-close" aria-label="Close">
381
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
382
+ <path d="M18 6L6 18M6 6l12 12"/>
383
+ </svg>
384
+ </button>
385
+ </div>
386
+ <div class="modal-body" id="contradiction-modal-body"></div>
165
387
  <form id="contradiction-form">
166
- <label>
167
- Resolution:
168
- <textarea id="contradiction-resolution" placeholder="Explain how you resolved this contradiction..." rows="3"></textarea>
169
- </label>
170
- <div class="modal-actions">
171
- <button type="button" id="contradiction-dismiss">Dismiss</button>
172
- <button type="button" id="contradiction-cancel">Cancel</button>
173
- <button type="submit">Resolve</button>
388
+ <div class="form-group">
389
+ <label class="form-label">Resolution</label>
390
+ <textarea class="form-input" id="contradiction-resolution" placeholder="Explain how you resolved this contradiction..." rows="3"></textarea>
391
+ </div>
392
+ <div class="modal-footer">
393
+ <button type="button" class="btn btn-ghost" id="contradiction-dismiss">Dismiss</button>
394
+ <button type="button" class="btn btn-secondary" id="contradiction-cancel">Cancel</button>
395
+ <button type="submit" class="btn btn-primary">
396
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
397
+ <path d="M20 6L9 17l-5-5"/>
398
+ </svg>
399
+ Resolve
400
+ </button>
174
401
  </div>
175
402
  </form>
176
403
  </div>
@@ -179,10 +406,26 @@
179
406
  <!-- Chat Panel -->
180
407
  <aside id="chat-panel" class="chat-panel hidden">
181
408
  <div class="chat-header">
182
- <h3>Chat Assistant</h3>
409
+ <h3>
410
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
411
+ <path d="M12 2a10 10 0 00-9.95 9h5.42a4.72 4.72 0 019.06 0h5.42A10 10 0 0012 2z"/>
412
+ <path d="M12 2a10 10 0 019.95 9h-5.42a4.72 4.72 0 00-9.06 0H2.05A10 10 0 0112 2z"/>
413
+ <circle cx="12" cy="12" r="3"/>
414
+ <path d="M12 15v7"/>
415
+ </svg>
416
+ Assistant
417
+ </h3>
183
418
  <div class="chat-actions">
184
- <button id="chat-clear" title="Clear history">Clear</button>
185
- <button id="chat-close" title="Close">&times;</button>
419
+ <button class="icon-btn" id="chat-clear" title="Clear history">
420
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
421
+ <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
422
+ </svg>
423
+ </button>
424
+ <button class="icon-btn" id="chat-close" title="Close">
425
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
426
+ <path d="M18 6L6 18M6 6l12 12"/>
427
+ </svg>
428
+ </button>
186
429
  </div>
187
430
  </div>
188
431
  <div id="chat-messages" class="chat-messages">
@@ -195,13 +438,17 @@
195
438
  <li>"Merge Boris into Boris Djordjevic"</li>
196
439
  <li>"Delete the entity 'crashed'"</li>
197
440
  </ul>
198
- <p style="font-size: 0.8em; color: var(--text-muted); margin-top: 0.5rem;">Requires ANTHROPIC_API_KEY environment variable.</p>
441
+ <p style="font-size: 0.8em; color: var(--text-tertiary); margin-top: 0.5rem;">Requires ANTHROPIC_API_KEY to be configured.</p>
199
442
  </div>
200
443
  </div>
201
444
  <div id="chat-status" class="chat-status"></div>
202
445
  <form id="chat-form" class="chat-input-form">
203
446
  <input type="text" id="chat-input" placeholder="Ask me to manage entities..." autocomplete="off">
204
- <button type="submit">Send</button>
447
+ <button type="submit">
448
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
449
+ <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
450
+ </svg>
451
+ </button>
205
452
  </form>
206
453
  </aside>
207
454