personal memory agent
Add month section headers, calendar links, and item meta to content tab
Adds month group headers (e.g., "January 2026 — 42 items"), per-item
"View in calendar →" links, and metadata display (message count,
highlight count, duration, author) to the import content review UI.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+29
-3
+29
-3
apps/import/_detail.html
+29
-3
apps/import/_detail.html
···
75
75
.import-content-pagination button:hover { background: #f5f5f5; }
76
76
.import-content-pagination button.active { background: #007bff; color: #fff; border-color: #007bff; }
77
77
.import-content-pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
78
+
.import-content-month-header { font-weight: 600; color: #555; padding: 0.75em 0 0.25em; border-bottom: 1px solid #e5e5e5; margin-bottom: 0.5em; margin-top: 0.75em; font-size: 0.9em; }
79
+
.import-content-month-header:first-child { margin-top: 0; }
80
+
.import-content-item-meta { padding: 0 1em 0.25em; font-size: 0.8em; color: #888; }
81
+
.import-content-cal-link { color: #007bff; text-decoration: none; }
82
+
.import-content-cal-link:hover { text-decoration: underline; }
78
83
79
84
</style>
80
85
···
220
225
el.innerHTML = '<div class="no-data">No items found</div>';
221
226
return;
222
227
}
223
-
el.innerHTML = items.map(item => {
228
+
const monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'];
229
+
let currentMonth = '';
230
+
let html = '';
231
+
items.forEach(item => {
232
+
const itemMonth = item.date ? item.date.slice(0, 6) : '';
233
+
if (itemMonth && itemMonth !== currentMonth) {
234
+
currentMonth = itemMonth;
235
+
const year = itemMonth.slice(0, 4);
236
+
const monthIdx = parseInt(itemMonth.slice(4, 6), 10) - 1;
237
+
const monthLabel = monthNames[monthIdx] || '';
238
+
const monthCount = items.filter(i => (i.date || '').startsWith(itemMonth)).length;
239
+
html += `<div class="import-content-month-header">${monthLabel} ${year} — ${monthCount} items</div>`;
240
+
}
224
241
const typeLabel = {
225
242
conversation: 'Chat',
226
243
event: 'Event',
···
228
245
note: 'Note',
229
246
}[item.type] || item.type;
230
247
const date = item.date ? `${item.date.slice(0, 4)}-${item.date.slice(4, 6)}-${item.date.slice(6, 8)}` : '';
231
-
return `
248
+
const calLink = item.date ? `/app/calendar/${item.date}` : '';
249
+
html += `
232
250
<div class="import-content-item" data-item-id="${item.id}">
233
251
<div class="import-content-item-header" onclick="toggleContentItem(this.parentElement)">
234
252
<span class="import-content-item-type">${typeLabel}</span>
235
253
<span class="import-content-item-title">${escapeContentHtml(item.title)}</span>
236
254
<span class="import-content-item-date">${date}</span>
237
255
</div>
256
+
<div class="import-content-item-meta">
257
+
${item.meta?.message_count ? `${item.meta.message_count} messages` : ''}
258
+
${item.meta?.highlight_count ? `${item.meta.highlight_count} highlights` : ''}
259
+
${item.meta?.duration_minutes ? `${item.meta.duration_minutes} min` : ''}
260
+
${item.meta?.author ? `· ${escapeContentHtml(item.meta.author)}` : ''}
261
+
${calLink ? ` · <a href="${calLink}" class="import-content-cal-link" onclick="event.stopPropagation();">View in calendar →</a>` : ''}
262
+
</div>
238
263
${item.preview ? `<div class="import-content-item-preview">${escapeContentHtml(item.preview)}</div>` : ''}
239
264
<div class="import-content-item-body"><div class="no-data">Loading...</div></div>
240
265
</div>`;
241
-
}).join('');
266
+
});
267
+
el.innerHTML = html;
242
268
}
243
269
244
270
function toggleContentItem(el) {