+
+ {/* Header */}
+
+
+ Memory Viewer
+
+ {total} episode{total !== 1 ? 's' : ''}
+
+
+
+ {/* Search bar */}
+
+
+ {/* Episode list */}
+
+ {loading &&
Loading…
}
+ {error &&
{error}
}
+ {!loading && episodes.length === 0 && (
+
No memories found.
+ )}
+
+ {episodes.map(ep => (
+
setExpanded(expanded === ep.id ? null : ep.id)}
+ onDelete={() => handleDelete(ep.id)}
+ />
+ ))}
+
+
+ {/* Pagination */}
+ {totalPages > 1 && (
+
+
+ {currentPage} / {totalPages}
+
+
+ )}
+
+ );
+}
+
+function EpisodeCard({ episode, expanded, onToggle, onDelete }) {
+ const date = new Date(episode.created_at * 1000).toLocaleString();
+ const preview = episode.user_message.slice(0, 80) + (episode.user_message.length > 80 ? '…' : '');
+
+ return (
+
+ {/* Card header — always visible */}
+
+ {preview}
+ {date}
+ #{episode.id}
+
+ {expanded ? '▲' : '▼'}
+
+
+ {/* Expanded content */}
+ {expanded && (
+
+
+
+ {episode.token_count > 0 && (
+
+ Tokens: {episode.token_count}
+
+ )}
+
+ )}
+
+ );
+}
+
+function MessageBlock({ label, content, color }) {
+ return (
+