personal memory agent
feat: move entities input to app bar
- Create app_bar.html with pill-shaped input following todos pattern
- Remove Entity Assistant gradient box from workspace (~70 lines)
- Remove Add Entity button from Facet Entities header
- Input auto-disables when no facet selected with helpful placeholder
- Pencil edit icons now only visible on hover for cleaner UI
- Uses facet CSS variables for theming consistency
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
+94
-106
+80
apps/entities/app_bar.html
+80
apps/entities/app_bar.html
···
1
+
<style>
2
+
.entity-add-input {
3
+
flex: 1;
4
+
min-width: 0;
5
+
padding: 0.75em 1em;
6
+
border: 1px solid #d1d5db;
7
+
border-radius: 20px;
8
+
font-family: inherit;
9
+
font-size: 14px;
10
+
line-height: 1.5;
11
+
transition: border-color 0.15s, box-shadow 0.15s;
12
+
}
13
+
14
+
.entity-add-input:focus {
15
+
outline: none;
16
+
border-color: var(--facet-color, #667eea);
17
+
box-shadow: 0 0 0 3px var(--facet-bg, rgba(102, 126, 234, 0.1));
18
+
}
19
+
20
+
.entity-add-input::placeholder {
21
+
color: #9ca3af;
22
+
}
23
+
24
+
.entity-add-input:disabled {
25
+
background: #f3f4f6;
26
+
color: #9ca3af;
27
+
cursor: not-allowed;
28
+
opacity: 0.7;
29
+
}
30
+
31
+
.entity-add-input:disabled::placeholder {
32
+
color: #d1d5db;
33
+
}
34
+
</style>
35
+
36
+
<form id="entity-add-form" style="display: contents;">
37
+
<input
38
+
type="text"
39
+
id="entity-assist-input"
40
+
class="entity-add-input"
41
+
placeholder="Add entity with AI (e.g., 'OpenAI', 'Claude')..."
42
+
autocomplete="off"
43
+
>
44
+
</form>
45
+
46
+
<script>
47
+
(function() {
48
+
const input = document.getElementById('entity-assist-input');
49
+
if (!input) return;
50
+
51
+
// Check if facet is selected and update input state
52
+
function updateInputState() {
53
+
const facet = window.selectedFacet;
54
+
if (!facet) {
55
+
input.disabled = true;
56
+
input.placeholder = 'Select a facet to add entities';
57
+
} else {
58
+
input.disabled = false;
59
+
input.placeholder = "Add entity with AI (e.g., 'OpenAI', 'Claude')...";
60
+
}
61
+
}
62
+
63
+
// Initial state - wait for DOM to ensure window.selectedFacet is set
64
+
if (document.readyState === 'loading') {
65
+
document.addEventListener('DOMContentLoaded', updateInputState);
66
+
} else {
67
+
updateInputState();
68
+
}
69
+
70
+
// Listen for facet changes
71
+
window.addEventListener('facet.switch', updateInputState);
72
+
73
+
// Focus input if nothing else is focused
74
+
setTimeout(() => {
75
+
if (document.activeElement === document.body && !input.disabled) {
76
+
input.focus();
77
+
}
78
+
}, 100);
79
+
})();
80
+
</script>
+14
-106
apps/entities/workspace.html
+14
-106
apps/entities/workspace.html
···
130
130
background: #c82333;
131
131
}
132
132
133
-
.add-entity-btn {
134
-
display: inline-flex;
135
-
align-items: center;
136
-
gap: 6px;
137
-
}
138
-
139
133
/* Description modal styling */
140
134
.description-modal {
141
135
display: none;
···
290
284
margin-left: 8px;
291
285
}
292
286
293
-
.entity-edit-btn:hover {
294
-
opacity: 1 !important;
295
-
}
296
-
297
-
.has-entity-desc .entity-edit-btn {
298
-
opacity: 0.4;
287
+
.entity-desc:hover .entity-edit-btn {
288
+
opacity: 0.6;
299
289
}
300
290
301
-
.has-entity-desc:hover .entity-edit-btn {
302
-
opacity: 1;
291
+
.entity-edit-btn:hover {
292
+
opacity: 1 !important;
303
293
}
304
294
305
295
.no-entity-desc {
···
311
301
.no-entity-desc:hover {
312
302
color: #667eea;
313
303
text-decoration: underline;
314
-
}
315
-
316
-
.no-entity-desc-cell .entity-edit-btn {
317
-
opacity: 0.3;
318
-
}
319
-
320
-
.no-entity-desc-cell:hover .entity-edit-btn {
321
-
opacity: 1;
322
304
}
323
305
324
306
/* Delete modal styling */
···
517
499
margin-bottom: 0.5em;
518
500
}
519
501
520
-
/* Entity assistant styling */
521
-
.entity-assistant {
522
-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
523
-
color: white;
524
-
padding: 1.5em;
525
-
border-radius: 12px;
526
-
margin-bottom: 2em;
527
-
}
528
-
529
-
.entity-assistant h4 {
530
-
margin: 0 0 0.5em 0;
531
-
display: flex;
532
-
align-items: center;
533
-
gap: 8px;
534
-
}
535
-
536
-
.entity-assistant-input {
537
-
display: flex;
538
-
gap: 8px;
539
-
margin-top: 1em;
540
-
}
541
-
542
-
.entity-assistant-input input {
543
-
flex: 1;
544
-
padding: 10px 14px;
545
-
border: none;
546
-
border-radius: 6px;
547
-
font-size: 14px;
548
-
}
549
-
550
-
.entity-assistant-input button {
551
-
padding: 10px 20px;
552
-
background: white;
553
-
color: #667eea;
554
-
border: none;
555
-
border-radius: 6px;
556
-
font-weight: 600;
557
-
cursor: pointer;
558
-
transition: all 0.2s;
559
-
}
560
-
561
-
.entity-assistant-input button:hover {
562
-
transform: translateY(-1px);
563
-
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
564
-
}
565
-
566
-
.entity-assistant-input button:disabled {
567
-
opacity: 0.6;
568
-
cursor: not-allowed;
569
-
}
570
-
571
502
.entities-loading {
572
503
text-align: center;
573
504
padding: 4em;
···
602
533
</div>
603
534
604
535
<div id="entities-content" style="display: none;">
605
-
<!-- Entity Assistant -->
606
-
<div class="entity-assistant">
607
-
<h4>
608
-
<span>🤖</span>
609
-
<span>Entity Assistant</span>
610
-
</h4>
611
-
<p style="margin: 0; opacity: 0.9;">Quickly add an entity with AI-generated type and description.</p>
612
-
<div class="entity-assistant-input">
613
-
<input type="text" id="entity-assist-input" placeholder="Enter entity name (e.g., 'OpenAI', 'Claude', 'GPT-4')..." />
614
-
<button id="entity-assist-submit" onclick="submitEntityAssist()">Add</button>
615
-
</div>
616
-
</div>
617
-
618
536
<!-- Facet Entities Section -->
619
537
<div class="entities-section">
620
538
<div class="entities-container" id="facet-entities-section">
621
539
<h3>
622
540
<span>Facet Entities</span>
623
-
<button class="btn btn-primary add-entity-btn" onclick="openEntityAssistInput()">
624
-
<span>+</span>
625
-
<span>Add Entity</span>
626
-
</button>
627
541
</h3>
628
542
<table class="entities-table">
629
543
<thead>
···
792
706
});
793
707
}
794
708
795
-
// Entity assistant input Enter key
709
+
// Entity assistant input Enter key (input is now in app bar)
796
710
const assistInput = document.getElementById('entity-assist-input');
797
711
if (assistInput) {
798
712
assistInput.addEventListener('keypress', function(e) {
799
713
if (e.key === 'Enter') {
714
+
e.preventDefault();
800
715
submitEntityAssist();
801
716
}
802
717
});
···
1213
1128
});
1214
1129
}
1215
1130
1216
-
function openEntityAssistInput() {
1217
-
const input = document.getElementById('entity-assist-input');
1218
-
if (input) {
1219
-
input.focus();
1220
-
}
1221
-
}
1222
-
1223
1131
function submitEntityAssist() {
1224
1132
const input = document.getElementById('entity-assist-input');
1225
-
const button = document.getElementById('entity-assist-submit');
1226
1133
const name = input.value.trim();
1227
1134
1228
1135
if (!name) {
1229
-
alert('Please enter an entity name');
1230
1136
return;
1231
1137
}
1232
1138
1233
-
button.disabled = true;
1234
-
button.textContent = 'Processing...';
1139
+
// Disable input during processing
1140
+
input.disabled = true;
1141
+
const originalPlaceholder = input.placeholder;
1142
+
input.placeholder = 'Processing...';
1235
1143
1236
1144
fetch(`api/${encodeURIComponent(currentFacet)}/assist`, {
1237
1145
method: 'POST',
···
1249
1157
// Reload entities to show the newly added entity
1250
1158
loadEntities();
1251
1159
}
1252
-
button.disabled = false;
1253
-
button.textContent = 'Add';
1160
+
input.disabled = false;
1161
+
input.placeholder = originalPlaceholder;
1254
1162
});
1255
1163
} else {
1256
1164
throw new Error(data.error || 'Failed to start assistant');
···
1259
1167
.catch(error => {
1260
1168
console.error('Error with entity assistant:', error);
1261
1169
alert('Error: ' + error.message);
1262
-
button.disabled = false;
1263
-
button.textContent = 'Add';
1170
+
input.disabled = false;
1171
+
input.placeholder = originalPlaceholder;
1264
1172
});
1265
1173
}
1266
1174