thedotmack/claude-mem v5.1.0

v5.1.0 - Web-Based Viewer UI

on GitHub

v5.1.0 (2025-11-05)

🎉 Major Feature: Web-Based Viewer UI

This release introduces a production-ready web interface for visualizing your memory stream in real-time!

Access the viewer: http://localhost:37777 (auto-starts with the worker)

✨ Key Features

Real-Time Visualization

• Server-Sent Events (SSE) for instant updates as observations are captured
• See user prompts, observations, and session summaries as they happen
• No polling - efficient push-based updates

Infinite Scroll & Pagination

• Load more content seamlessly as you scroll
• Automatic deduplication prevents duplicates
• Smooth loading states with skeleton components

Project Filtering

• Filter memory stream by project/codebase
• Quick project switcher in sidebar
• View stats for all projects or focus on one

Persistent Settings

• Sidebar state (open/closed) saved to localStorage
• Selected project filter persists across sessions
• Smooth GPU-accelerated animations

Auto-Reconnection

• Exponential backoff retry logic
• Graceful handling of worker restarts
• Connection status indicator

🔧 Technical Improvements

New Worker Endpoints (+500 lines)

• /api/prompts - Paginated user prompts with project filtering
• /api/observations - Paginated observations with project filtering
• /api/summaries - Paginated session summaries with project filtering
• /api/stats - Database statistics (total counts by project)
• /api/projects - List of unique project names
• /stream - Server-Sent Events for real-time updates
• / - Serves viewer HTML
• /health - Health check endpoint

Database Enhancements (+98 lines in SessionStore)

• getRecentPrompts() - Paginated prompts with OFFSET/LIMIT
• getRecentObservations() - Paginated observations with OFFSET/LIMIT
• getRecentSummaries() - Paginated summaries with OFFSET/LIMIT
• getStats() - Aggregated statistics by project
• getUniqueProjects() - Distinct project names

Complete React UI (17 new files, 1,500+ lines)

• Components: Header, Sidebar, Feed, Cards (Observation, Prompt, Summary, Skeleton)
• Hooks: useSSE, usePagination, useSettings, useStats
• Utils: Data merging, formatters, constants
• Assets: Monaspace Radon font, logos (dark mode + logomark)
• Build: esbuild pipeline for self-contained HTML bundle

📚 Documentation

Updated CLAUDE.md with:

• Viewer UI architecture and components
• Build process for viewer changes
• Configuration and usage instructions
• Design rationale for SSE and self-contained bundle approach

🎨 Design Highlights

• Monaspace Radon variable font for beautiful monospace rendering
• Claude branding with official logos and dark mode support
• Responsive layout with collapsible sidebar
• Smooth animations using GPU acceleration (transform/opacity)
• Error boundaries for graceful failure handling

🚀 Getting Started

1. Update claude-mem to v5.1.0
2. Start a Claude Code session (worker auto-starts)
3. Open http://localhost:37777 in your browser
4. Watch your memory stream in real-time!

📦 Files Changed

New Files:

• src/ui/viewer/ - Complete React application (17 files)
• src/ui/viewer-template.html - HTML template for bundle
• scripts/build-viewer.js - esbuild configuration
• plugin/ui/viewer.html - Built self-contained bundle
• plugin/ui/viewer-bundle.js - Compiled React code
• plugin/ui/assets/fonts/ - Monaspace Radon font files
• src/ui/*.webp - Claude logos and branding

Modified Files:

• src/services/worker-service.ts - Added 8 new HTTP/SSE endpoints
• src/services/sqlite/SessionStore.ts - Added pagination methods
• scripts/build-hooks.js - Integrated viewer build process
• CLAUDE.md - Comprehensive documentation update

🙏 Acknowledgments

Built with:

• React 19 + TypeScript
• esbuild for ultra-fast bundling
• Monaspace Radon font by GitHub Next
• Server-Sent Events for real-time updates

Breaking Changes: None (backward compatible MINOR version)

Full Changelog: v5.0.3...v5.1.0