Alex Newman 79ff1849f0 feat: Add web-based viewer UI for real-time memory stream (#58)
* Add viewer HTML for claude-mem with live stream and settings interface

- Implemented a responsive layout with left and right columns for observations and settings.
- Added status indicators for connection state.
- Integrated server-sent events (SSE) for real-time updates on observations and summaries.
- Created dynamic project filter dropdown based on available observations.
- Developed settings section for environment variables and worker stats.
- Included functionality to save settings and load current stats from the server.
- Enhanced UI with custom styles for better user experience.

* Remove draft implementation plan for v5.1 web UI

* feat: Implement viewer UI with sidebar, feed, and settings management

- Add main viewer template (HTML) with styling for dark mode.
- Create App component to manage state and render Header, Feed, and Sidebar.
- Implement Feed component to display observations and summaries with filtering.
- Develop Header component for project selection and connection status.
- Create ObservationCard and SummaryCard components for displaying individual items.
- Implement Sidebar for settings management and displaying worker/database stats.
- Add hooks for managing SSE connections, settings, and stats fetching.
- Define types for observations, summaries, settings, and stats.

* Enhance UI components and improve layout

- Updated padding and layout for the feed and card components in viewer.html, viewer-template.html, and viewer.html to improve visual spacing and alignment.
- Increased card margins and padding for better readability and aesthetics.
- Adjusted font sizes, weights, and line heights for card titles and subtitles to enhance text clarity and hierarchy.
- Added a new feed-content class to center the feed items and limit their maximum width.
- Modified the Header component to improve the settings icon's SVG structure for better rendering.
- Enhanced the Sidebar component by adding a close button with an SVG icon, improving user experience for closing settings.
- Updated the Sidebar component's props to include an onClose function for handling sidebar closure.

* feat: Add user prompts feature with UI integration

- Implemented a new method in SessionStore to retrieve recent user prompts.
- Updated WorkerService to fetch and broadcast user prompts to clients.
- Enhanced the Feed component to display user prompts alongside observations and summaries.
- Created a new PromptCard component for rendering individual user prompts.
- Modified useSSE hook to handle new prompt events and processing status.
- Updated viewer templates and styles to accommodate the new prompts feature.

* feat: Add project filtering and pagination for observations

- Implemented `getAllProjects` method in `SessionStore` to retrieve unique projects from the database.
- Added `/api/observations` endpoint in `WorkerService` for paginated observations fetching.
- Enhanced `App` component to manage paginated observations and integrate with the new API.
- Updated `Feed` component to support infinite scrolling and loading more observations.
- Modified `Header` to display processing status.
- Refactored `PromptCard` to remove unnecessary processing indicator.
- Introduced `usePagination` hook to handle pagination logic for observations.
- Updated `useSSE` hook to include projects in the state.
- Adjusted types to accommodate new project data.

* Refactor viewer build process and remove deprecated HTML template

- Updated build-viewer.js to copy HTML template to build output with improved logging.
- Removed src/ui/viewer.html as it is no longer needed.
- Enhanced App component to merge observations while removing duplicates using useMemo.
- Improved Feed component to utilize a ref for onLoadMore callback and adjusted infinite scroll logic.
- Updated Sidebar component to use default settings from constants and removed redundant formatting functions.
- Refactored usePagination hook to streamline loading logic and prevent concurrent requests.
- Updated useSSE hook to use centralized API endpoints and improved reconnection logic.
- Refactored useSettings and useStats hooks to utilize constants for API endpoints and timing.
- Introduced ErrorBoundary component for better error handling in the viewer.
- Centralized API endpoint paths, default settings, timing constants, and UI-related constants into dedicated files.
- Added utility functions for formatting uptime and bytes for consistent display across components.

* feat: Enhance session management and pagination for user prompts, summaries, and observations

- Added project field to user prompts in the database and API responses.
- Implemented new API endpoints for fetching summaries and prompts with pagination.
- Updated WorkerService to handle new endpoints and filter results by project.
- Modified App component to manage paginated data for prompts and summaries.
- Refactored Feed component to remove unnecessary filtering and handle combined data.
- Improved usePagination hook to support multiple data types and project filtering.
- Adjusted useSSE hook to only load projects initially, with data fetched via pagination.
- Updated types to include project information for user prompts.

* feat: add SummarySkeleton component and data utility for merging items

- Introduced SummarySkeleton component for displaying loading state in the UI.
- Implemented mergeAndDeduplicateByProject utility function to merge real-time and paginated data while removing duplicates based on project filtering.

* Enhance UI and functionality of the viewer component

- Updated sidebar transition effects to use translate3d for improved performance.
- Added a sidebar header with title and connection status indicators.
- Modified the PromptCard to display project name instead of prompt number.
- Introduced a GitHub and X (Twitter) link in the header for easy access.
- Improved styling for setting descriptions and card hover effects.
- Enhanced Sidebar component to include connection status and updated layout.

* fix: reduce timeout for worker health checks and ensure proper responsiveness
2025-11-05 22:54:38 -05:00
2025-10-03 18:20:47 -04:00
2025-11-02 20:57:24 -05:00


Claude-Mem

Persistent memory compression system built for Claude Code.

License Version Node Mentioned in Awesome Claude Code

Quick StartHow It WorksSearch ToolsDocumentationConfigurationTroubleshootingLicense

Claude-Mem seamlessly preserves context across sessions by automatically capturing tool usage observations, generating semantic summaries, and making them available to future sessions. This enables Claude to maintain continuity of knowledge about projects even after sessions end or reconnect.


Quick Start

Start a new Claude Code session in the terminal and enter the following commands:

> /plugin marketplace add thedotmack/claude-mem

> /plugin install claude-mem

Restart Claude Code. Context from previous sessions will automatically appear in new sessions.

Key Features:

  • 🧠 Persistent Memory - Context survives across sessions
  • 📊 Progressive Disclosure - Layered memory retrieval with token cost visibility
  • 🔍 7 Search Tools - Query your project history via MCP
  • 🤖 Automatic Operation - No manual intervention required
  • 🔗 Citations - Reference past decisions with claude-mem:// URIs

Documentation

📚 View Full Documentation - Browse markdown docs on GitHub

💻 Local Preview: Run Mintlify docs locally:

cd docs
npx mintlify dev

Getting Started

Best Practices

Architecture

Configuration & Development


How It Works

┌─────────────────────────────────────────────────────────────┐
│ Session Start → Inject context from last 10 sessions       │
└─────────────────────────────────────────────────────────────┘
                            ↓
┌─────────────────────────────────────────────────────────────┐
│ User Prompts → Create session, save user prompts           │
└─────────────────────────────────────────────────────────────┘
                            ↓
┌─────────────────────────────────────────────────────────────┐
│ Tool Executions → Capture observations (Read, Write, etc.)  │
└─────────────────────────────────────────────────────────────┘
                            ↓
┌─────────────────────────────────────────────────────────────┐
│ Worker Processes → Extract learnings via Claude Agent SDK   │
└─────────────────────────────────────────────────────────────┘
                            ↓
┌─────────────────────────────────────────────────────────────┐
│ Session Ends → Generate summary, ready for next session     │
└─────────────────────────────────────────────────────────────┘

Core Components:

  1. 5 Lifecycle Hooks - SessionStart, UserPromptSubmit, PostToolUse, Stop, SessionEnd
  2. Worker Service - HTTP API on port 37777 managed by PM2
  3. SQLite Database - Stores sessions, observations, summaries with FTS5 search
  4. 7 MCP Search Tools - Query historical context with citations

See Architecture Overview for details.


MCP Search Tools

Claude-Mem provides 7 specialized search tools:

  1. search_observations - Full-text search across observations
  2. search_sessions - Full-text search across session summaries
  3. search_user_prompts - Search raw user requests
  4. find_by_concept - Find by concept tags
  5. find_by_file - Find by file references
  6. find_by_type - Find by type (decision, bugfix, feature, etc.)
  7. get_recent_context - Get recent session context

Example Queries:

search_observations with query="authentication" and type="decision"
find_by_file with filePath="worker-service.ts"
search_user_prompts with query="add dark mode"
get_recent_context with limit=5

See MCP Search Tools Guide for detailed examples.


What's New in v4.3.1

Critical Fix:

  • SessionStart hook context injection: Fixed context not being injected into new sessions
    • npm install output was polluting hook JSON responses
    • Changed npm loglevel to --loglevel=silent for clean output
    • Context injection now works reliably across all sessions

Code Quality:

  • Consolidated hooks architecture by removing wrapper layer
  • Fixed double shebang issues in hook executables
  • Simplified codebase maintenance

See CHANGELOG.md for complete version history.


System Requirements

  • Node.js: 18.0.0 or higher
  • Claude Code: Latest version with plugin support
  • PM2: Process manager (bundled - no global install required)
  • SQLite 3: For persistent storage (bundled)

Key Benefits

Progressive Disclosure Context

  • Layered memory retrieval mirrors human memory patterns
  • Layer 1 (Index): See what observations exist with token costs at session start
  • Layer 2 (Details): Fetch full narratives on-demand via MCP search
  • Layer 3 (Perfect Recall): Access source code and original transcripts
  • Smart decision-making: Token counts help Claude choose between fetching details or reading code
  • Type indicators: Visual cues (🔴 critical, 🟤 decision, 🔵 informational) highlight observation importance

Automatic Memory

  • Context automatically injected when Claude starts
  • No manual commands or configuration needed
  • Works transparently in the background
  • Search across all sessions and observations
  • FTS5 full-text search for fast queries
  • Citations link back to specific observations

Structured Observations

  • AI-powered extraction of learnings
  • Categorized by type (decision, bugfix, feature, etc.)
  • Tagged with concepts and file references

Multi-Prompt Sessions

  • Sessions span multiple user prompts
  • Context preserved across /clear commands
  • Track entire conversation threads

Configuration

Model Selection:

./claude-mem-settings.sh

Environment Variables:

  • CLAUDE_MEM_MODEL - AI model for processing (default: claude-sonnet-4-5)
  • CLAUDE_MEM_WORKER_PORT - Worker port (default: 37777)
  • CLAUDE_MEM_DATA_DIR - Data directory override (dev only)

See Configuration Guide for details.


Development

# Clone and build
git clone https://github.com/thedotmack/claude-mem.git
cd claude-mem
npm install
npm run build

# Run tests
npm test

# Start worker
npm run worker:start

# View logs
npm run worker:logs

See Development Guide for detailed instructions.


Troubleshooting

Common Issues:

  • Worker not starting → npm run worker:restart
  • No context appearing → npm run test:context
  • Database issues → sqlite3 ~/.claude-mem/claude-mem.db "PRAGMA integrity_check;"
  • Search not working → Check FTS5 tables exist

See Troubleshooting Guide for complete solutions.


Contributing

Contributions are welcome! Please:

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes with tests
  4. Update documentation
  5. Submit a Pull Request

See Development Guide for contribution workflow.


License

This project is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0).

Copyright (C) 2025 Alex Newman (@thedotmack). All rights reserved.

See the LICENSE file for full details.

What This Means:

  • You can use, modify, and distribute this software freely
  • If you modify and deploy on a network server, you must make your source code available
  • Derivative works must also be licensed under AGPL-3.0
  • There is NO WARRANTY for this software

Support


Built with Claude Agent SDK | Powered by Claude Code | Made with TypeScript

S
Description
claude-mem plugin mirror
Readme 112 MiB
Languages
TypeScript 47.2%
JavaScript 46.5%
Shell 3.1%
HTML 2.4%
Python 0.7%