personal memory agent
fix(agents): improve table layout with emoji status indicators and prevent overflow
Replace status column text badges with emoji icons (▶️✅❌⚠️❓) and reduce column width from 100px to 40px. Add fixed table layout to prevent horizontal overflow by enforcing column widths. Optimize all column sizes and add text-overflow ellipsis to handle long content gracefully.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
+38
-52
+14
-5
dream/templates/agents/_scripts.html
+14
-5
dream/templates/agents/_scripts.html
···
741
741
const short = a.prompt.length > 80 ? a.prompt.slice(0, 80) + '…' : a.prompt;
742
742
const chatLink = `{{ url_for('chat.chat_page') }}?agent=${a.id}`;
743
743
744
-
// Status badge
744
+
// Status emoji
745
+
const statusEmojis = {
746
+
'running': '▶️',
747
+
'completed': '✅',
748
+
'finished': '✅',
749
+
'error': '❌',
750
+
'interrupted': '⚠️',
751
+
'unknown': '❓'
752
+
};
745
753
const statusClass = `status-${a.status || 'unknown'}`;
746
-
const statusBadge = `<span class="status-badge ${statusClass}">${a.status || 'unknown'}</span>`;
754
+
const statusEmoji = statusEmojis[a.status] || statusEmojis['unknown'];
755
+
const statusBadge = `<span class="status-badge ${statusClass}" title="${a.status || 'unknown'}">${statusEmoji}</span>`;
747
756
748
757
// PID indicator for running agents
749
758
const pidIndicator = a.pid ? ` (PID: ${a.pid})` : '';
···
840
849
const liveEmpty = document.getElementById('liveEmpty');
841
850
842
851
if (liveAgents.length > 0) {
843
-
liveTable.innerHTML = '<tr><th>Status</th><th>Started</th><th>Runtime</th><th>Model</th><th>Agent</th><th>Prompt</th></tr>';
852
+
liveTable.innerHTML = '<tr><th></th><th>Started</th><th>Runtime</th><th>Model</th><th>Agent</th><th>Prompt</th></tr>';
844
853
liveAgents.forEach(a => liveTable.appendChild(buildRow(a, false)));
845
854
liveTable.style.display = 'table';
846
855
liveEmpty.style.display = 'none';
···
854
863
const histEmpty = document.getElementById('historicalEmpty');
855
864
856
865
if (historicalAgents.length > 0) {
857
-
histTable.innerHTML = '<tr><th>Status</th><th>Started</th><th>Runtime</th><th>Model</th><th>Agent</th><th>Prompt</th><th style="width: 40px;">Actions</th></tr>';
866
+
histTable.innerHTML = '<tr><th></th><th>Started</th><th>Runtime</th><th>Model</th><th>Agent</th><th>Prompt</th><th>⚙️</th></tr>';
858
867
historicalAgents.forEach(a => histTable.appendChild(buildRow(a, true)));
859
868
histTable.style.display = 'table';
860
869
histEmpty.style.display = 'none';
···
898
907
const histEmpty = document.getElementById('historicalEmpty');
899
908
900
909
if (historicalAgents.length > 0) {
901
-
histTable.innerHTML = '<tr><th>Status</th><th>Started</th><th>Runtime</th><th>Model</th><th>Agent</th><th>Prompt</th><th style="width: 40px;">Actions</th></tr>';
910
+
histTable.innerHTML = '<tr><th></th><th>Started</th><th>Runtime</th><th>Model</th><th>Agent</th><th>Prompt</th><th>⚙️</th></tr>';
902
911
historicalAgents.forEach(a => histTable.appendChild(buildRow(a, true)));
903
912
histTable.style.display = 'table';
904
913
histEmpty.style.display = 'none';
+24
-47
dream/templates/agents/_styles.html
+24
-47
dream/templates/agents/_styles.html
···
275
275
}
276
276
277
277
/* Session History Table */
278
-
table {
279
-
border-collapse: collapse;
280
-
width: 100%;
278
+
table {
279
+
border-collapse: collapse;
280
+
width: 100%;
281
281
margin-top: 2rem;
282
+
table-layout: fixed;
282
283
}
283
-
th, td {
284
-
padding: 4px 8px;
285
-
border-bottom: 1px solid #ddd;
286
-
white-space: nowrap;
284
+
th, td {
285
+
padding: 4px 8px;
286
+
border-bottom: 1px solid #ddd;
287
+
white-space: nowrap;
287
288
text-align: left;
289
+
overflow: hidden;
290
+
text-overflow: ellipsis;
288
291
}
289
292
th {
290
293
font-weight: 600;
···
292
295
}
293
296
/* Adjust column widths */
294
297
td:nth-child(1), th:nth-child(1) { /* Status */
295
-
width: 100px;
298
+
width: 40px;
299
+
text-align: center;
296
300
}
297
301
td:nth-child(2), th:nth-child(2) { /* Started */
298
-
width: 120px;
302
+
width: 100px;
299
303
}
300
304
td:nth-child(3), th:nth-child(3) { /* Runtime */
301
-
width: 80px;
305
+
width: 60px;
302
306
text-align: right;
303
307
}
304
308
td:nth-child(4), th:nth-child(4) { /* Model */
305
-
width: 150px;
309
+
width: 120px;
306
310
}
307
311
td:nth-child(5), th:nth-child(5) { /* Agent */
308
-
width: 180px;
312
+
width: 150px;
309
313
}
310
-
td:last-child { /* Prompt */
311
-
overflow: hidden;
312
-
text-overflow: ellipsis;
313
-
max-width: 0;
314
+
td:nth-child(6), th:nth-child(6) { /* Prompt */
315
+
width: auto;
316
+
}
317
+
td:nth-child(7), th:nth-child(7) { /* Actions (for historical table) */
318
+
width: 40px;
314
319
}
315
320
tr:hover {
316
321
background-color: #f8f9fa;
···
326
331
/* Status indicators */
327
332
.status-badge {
328
333
display: inline-block;
329
-
padding: 2px 6px;
330
-
border-radius: 3px;
331
-
font-size: 0.75rem;
332
-
font-weight: 500;
333
-
text-transform: uppercase;
334
-
margin-right: 0.5rem;
335
-
}
336
-
337
-
.status-running {
338
-
background-color: #d4edda;
339
-
color: #155724;
340
-
}
341
-
342
-
.status-finished {
343
-
background-color: #d1ecf1;
344
-
color: #0c5460;
345
-
}
346
-
347
-
.status-error {
348
-
background-color: #f8d7da;
349
-
color: #721c24;
350
-
}
351
-
352
-
.status-interrupted {
353
-
background-color: #fff3cd;
354
-
color: #856404;
355
-
}
356
-
357
-
.status-unknown {
358
-
background-color: #e2e3e5;
359
-
color: #383d41;
334
+
font-size: 1.2rem;
335
+
line-height: 1;
336
+
cursor: help;
360
337
}
361
338
362
339
/* Section headers for agent log */