personal memory agent
Add parameter pills to search event cards in chat UI
Display filter parameters (facet, day, topic) as compact pills on search
event cards, matching the existing tool placard pill styling. Consolidates
duplicate CSS and JS into shared rules and a createParamPills() helper.
- Search cards now show facet/day/topic filters visually
- Removed inline date detection from query text (use args instead)
- Shared pill styles with parent-specific color overrides
- Single createParamPills() helper used by both card types
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+47
-39
+47
-39
apps/chat/workspace.html
+47
-39
apps/chat/workspace.html
···
88
88
#messages .event-card a { text-decoration: none; color: #007bff; }
89
89
#messages .event-card a:hover { text-decoration: underline; }
90
90
91
+
/* Shared pill styles for tool params */
92
+
#messages .tool-params { margin-left: 0.5em; display: inline; }
93
+
#messages .tool-param {
94
+
display: inline-block;
95
+
background: rgba(0,0,0,0.08);
96
+
border-radius: 3px;
97
+
padding: 0.1em 0.4em;
98
+
margin-left: 0.3em;
99
+
font-size: 0.9em;
100
+
}
101
+
/* Event card pill colors */
102
+
#messages .event-card .tool-param { color: #805500; }
103
+
#messages .event-card .tool-param .param-label { color: #a06000; }
104
+
/* Tool placard pill colors */
105
+
#messages .tool-placard .tool-param { color: #555; }
106
+
#messages .tool-placard .tool-param .param-label { color: #888; }
107
+
#messages .tool-placard.completed .tool-param { background: rgba(0,0,0,0.06); }
108
+
91
109
#messages .tool-placard {
92
110
background: #e3f2fd;
93
111
border: 1px solid #2196f3;
···
107
125
}
108
126
#messages .tool-placard .tool-name { font-weight: bold; color: #1976d2; }
109
127
#messages .tool-placard .tool-status { font-size: 0.9em; color: #666; margin-left: 0.5em; }
110
-
#messages .tool-placard .tool-params { margin-left: 0.5em; display: inline; }
111
-
#messages .tool-placard .tool-param {
112
-
display: inline-block;
113
-
background: rgba(0,0,0,0.08);
114
-
border-radius: 3px;
115
-
padding: 0.1em 0.4em;
116
-
margin-left: 0.3em;
117
-
font-size: 0.9em;
118
-
color: #555;
119
-
}
120
-
#messages .tool-placard .tool-param .param-label { color: #888; }
121
128
#messages .tool-placard.completed { background: #e8f5e9; border-color: #4caf50; }
122
129
#messages .tool-placard.completed:hover { background: #d4f0d7; }
123
130
#messages .tool-placard.completed .tool-name { color: #2e7d32; }
124
-
#messages .tool-placard.completed .tool-param { background: rgba(0,0,0,0.06); }
125
131
126
132
#messages .agent-update {
127
133
background: #fff3e0;
···
931
937
}
932
938
}
933
939
934
-
function addEventCard(text, url, event){
940
+
function addEventCard(text, url, event, params){
935
941
const div=document.createElement('div');
936
942
div.className='event-card';
937
943
const a=document.createElement('a');
938
944
a.href=url;
939
945
a.textContent=text;
940
946
div.appendChild(a);
947
+
948
+
// Add parameter pills if provided
949
+
const pills = createParamPills(params);
950
+
if (pills) div.appendChild(pills);
941
951
942
952
// Add browser's built-in title attribute with formatted JSON
943
953
if(event){
···
994
1004
return params;
995
1005
}
996
1006
1007
+
// Create a span containing parameter pills from params array
1008
+
function createParamPills(params) {
1009
+
if (!params || params.length === 0) return null;
1010
+
const paramsSpan = document.createElement('span');
1011
+
paramsSpan.className = 'tool-params';
1012
+
params.forEach(p => {
1013
+
const pill = document.createElement('span');
1014
+
pill.className = 'tool-param';
1015
+
const label = document.createElement('span');
1016
+
label.className = 'param-label';
1017
+
label.textContent = p.label + ': ';
1018
+
pill.appendChild(label);
1019
+
pill.appendChild(document.createTextNode(p.value));
1020
+
paramsSpan.appendChild(pill);
1021
+
});
1022
+
return paramsSpan;
1023
+
}
1024
+
997
1025
function addToolPlacard(toolName, event, callId){
998
1026
const div=document.createElement('div');
999
1027
div.className='tool-placard';
···
1005
1033
1006
1034
// Add parameter pills if args present
1007
1035
const args = event && event.args;
1008
-
const params = formatToolParams(args);
1009
-
if (params.length > 0) {
1010
-
const paramsSpan = document.createElement('span');
1011
-
paramsSpan.className = 'tool-params';
1012
-
params.forEach(p => {
1013
-
const pill = document.createElement('span');
1014
-
pill.className = 'tool-param';
1015
-
const label = document.createElement('span');
1016
-
label.className = 'param-label';
1017
-
label.textContent = p.label + ': ';
1018
-
pill.appendChild(label);
1019
-
pill.appendChild(document.createTextNode(p.value));
1020
-
paramsSpan.appendChild(pill);
1021
-
});
1022
-
div.appendChild(paramsSpan);
1023
-
}
1036
+
const pills = createParamPills(formatToolParams(args));
1037
+
if (pills) div.appendChild(pills);
1024
1038
1025
1039
const statusSpan=document.createElement('span');
1026
1040
statusSpan.className='tool-status';
···
1320
1334
1321
1335
// Handle search tools with special event cards
1322
1336
if(args && args.query) {
1323
-
// Extract date from query if present (format: YYYYMMDD or YYYY-MM-DD)
1324
-
let dateStr = '';
1325
-
const dateMatch = args.query.match(/\b(\d{8}|\d{4}-\d{2}-\d{2})\b/);
1326
-
if(dateMatch) {
1327
-
const dateRaw = dateMatch[1].replace(/-/g, '');
1328
-
dateStr = ` on ${formatDay(dateRaw)}`;
1329
-
}
1330
-
1331
1337
const url = searchBase + '#q=' + encodeURIComponent(args.query);
1332
-
const searchText = `Searching for "${args.query}"${dateStr}`;
1333
-
addEventCard(searchText, url, event);
1338
+
const searchText = `Searching for "${args.query}"`;
1339
+
// Get filter params (excluding query since it's already in the text)
1340
+
const params = formatToolParams(args).filter(p => p.label !== 'query');
1341
+
addEventCard(searchText, url, event, params);
1334
1342
return;
1335
1343
}
1336
1344