personal memory agent
feat(chat): replace custom tooltips with browser title attribute for tool events
Remove custom CSS hover effects and use browser's built-in title= attribute to show raw formatted JSON for all tool call and event cards. This provides a consistent, simpler UX without custom tooltip styling.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
+26
-26
+26
-26
dream/templates/chat.html
+26
-26
dream/templates/chat.html
···
14
14
.from-bot:hover .copy-markdown-btn {opacity:1;}
15
15
.copy-markdown-btn.copied {background:#4caf50; color:white; border-color:#4caf50;}
16
16
@keyframes fadeInUp {from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
17
-
#messages .event-card{background:#fff4e5;border:1px solid #f0ad4e;border-radius:6px;padding:0.5em 0.75em;margin-bottom:0.75em;font-size:0.85em;max-width:80%;align-self:flex-start;}
17
+
#messages .event-card{background:#fff4e5;border:1px solid #f0ad4e;border-radius:6px;padding:0.5em 0.75em;margin-bottom:0.75em;font-size:0.85em;max-width:80%;align-self:flex-start;cursor:help;}
18
18
#messages .event-card a{text-decoration:none;color:#007bff;}
19
19
#messages .event-card a:hover{text-decoration:underline;}
20
-
#messages .tool-placard{background:#e3f2fd;border:1px solid #2196f3;border-radius:6px;padding:0.4em 0.6em;margin-bottom:0.5em;font-size:0.8em;max-width:60%;align-self:flex-start;cursor:help;position:relative;}
21
-
#messages .tool-placard:hover{background:#bbdefb;}
20
+
#messages .tool-placard{background:#e3f2fd;border:1px solid #2196f3;border-radius:6px;padding:0.4em 0.6em;margin-bottom:0.5em;font-size:0.8em;max-width:60%;align-self:flex-start;cursor:help;}
22
21
#messages .tool-placard .tool-name{font-weight:bold;color:#1976d2;}
23
22
#messages .tool-placard .tool-status{font-size:0.9em;color:#666;margin-left:0.5em;}
24
23
#messages .tool-placard.completed{background:#e8f5e9;border-color:#4caf50;}
25
24
#messages .tool-placard.completed .tool-name{color:#2e7d32;}
26
-
#messages .tool-placard .tool-tooltip{visibility:hidden;background:#333;color:#fff;text-align:left;border-radius:4px;padding:0.5em;position:absolute;z-index:1000;bottom:125%;left:0;min-width:300px;max-width:500px;font-size:0.75em;font-family:monospace;white-space:pre-wrap;opacity:0;transition:opacity 0.3s;}
27
-
#messages .tool-placard:hover .tool-tooltip{visibility:visible;opacity:1;}
28
25
#messages .agent-update{background:#fff3e0;border:1px solid #ff9800;border-radius:6px;padding:0.4em 0.6em;margin-bottom:0.5em;font-size:0.8em;max-width:60%;align-self:flex-start;color:#e65100;font-style:italic;}
29
26
#messages .thinking-card{background:#f8f4ff;border:1px solid #9c27b0;border-radius:6px;padding:0.5em 0.75em;margin-bottom:0.75em;font-size:0.85em;max-width:80%;align-self:flex-start;cursor:pointer;}
30
27
#messages .thinking-card:hover{background:#f3e5f5;}
···
202
199
}
203
200
}
204
201
205
-
function addEventCard(text, url){
202
+
function addEventCard(text, url, event){
206
203
const div=document.createElement('div');
207
204
div.className='event-card';
208
205
const a=document.createElement('a');
209
206
a.href=url;
210
207
a.textContent=text;
211
208
div.appendChild(a); // This line was missing!
209
+
210
+
// Add browser's built-in title attribute with formatted JSON
211
+
if(event){
212
+
div.title = JSON.stringify(event, null, 2);
213
+
}
214
+
212
215
messagesDiv.insertBefore(div, activityIndicator);
213
216
ensureActivityIndicatorAtBottom();
214
217
messagesDiv.scrollTop=messagesDiv.scrollHeight;
···
232
235
}
233
236
}
234
237
235
-
function addToolPlacard(toolName, args, callId){
238
+
function addToolPlacard(toolName, event, callId){
236
239
const div=document.createElement('div');
237
240
div.className='tool-placard';
238
-
241
+
239
242
const nameSpan=document.createElement('span');
240
243
nameSpan.className='tool-name';
241
244
nameSpan.textContent='🔧 ' + toolName;
242
245
div.appendChild(nameSpan);
243
-
246
+
244
247
const statusSpan=document.createElement('span');
245
248
statusSpan.className='tool-status';
246
249
statusSpan.textContent='(running...)';
247
250
div.appendChild(statusSpan);
248
-
249
-
if(args){
250
-
const tooltip=document.createElement('div');
251
-
tooltip.className='tool-tooltip';
252
-
tooltip.textContent=JSON.stringify(args, null, 2);
253
-
div.appendChild(tooltip);
251
+
252
+
// Add browser's built-in title attribute with formatted JSON
253
+
if(event){
254
+
div.title = JSON.stringify(event, null, 2);
254
255
}
255
-
256
+
256
257
messagesDiv.insertBefore(div, activityIndicator);
257
258
ensureActivityIndicatorAtBottom();
258
259
messagesDiv.scrollTop=messagesDiv.scrollHeight;
259
-
260
+
260
261
// Store reference to update later
261
262
if(callId){
262
263
toolPlacards[callId] = {div, statusSpan};
···
270
271
const {div, statusSpan} = toolPlacards[callId];
271
272
div.classList.add('completed');
272
273
statusSpan.textContent = '✓';
273
-
274
-
// Add result to tooltip if exists
275
-
const tooltip = div.querySelector('.tool-tooltip');
276
-
if(tooltip && result){
274
+
275
+
// Update title attribute with result
276
+
if(result && div.title){
277
277
const resultText = typeof result === 'string' ? result : JSON.stringify(result, null, 2);
278
-
tooltip.textContent += '\n\n=== Result ===\n' + resultText;
278
+
div.title += '\n\n=== Result ===\n' + resultText;
279
279
}
280
-
280
+
281
281
delete toolPlacards[callId];
282
282
}
283
283
}
···
633
633
634
634
// Create descriptive text
635
635
const searchText = `Searching ${indexName} for "${args.query}"${dateStr}`;
636
-
addEventCard(searchText, url);
636
+
addEventCard(searchText, url, event);
637
637
return;
638
638
}
639
639
···
641
641
if(tool === 'get_resource' && args && args.uri) {
642
642
const resourceCard = createResourceCard(args.uri);
643
643
if(resourceCard) {
644
-
addEventCard(resourceCard.text, resourceCard.url);
644
+
addEventCard(resourceCard.text, resourceCard.url, event);
645
645
return;
646
646
}
647
647
}
648
648
649
649
// Default: show tool placard
650
-
addToolPlacard(tool, args, call_id);
650
+
addToolPlacard(tool, event, call_id);
651
651
}
652
652
653
653
// Create resource card for get_resource tool