# Session Cache Manager - Claude Code DevTools

## Cache Statistics

0
Cached Sessions
0
Total Messages
0 KB
Storage Used
Never
Oldest Session
Storage Quota Usage (Estimated 5-10MB limit)

## Cache New Session

Session ID (auto-generated if empty)
Session Name/Description
Session Data (JSONL format - paste transcript lines)

## Search Cached Sessions

Search Query (searches session names, IDs, and content)

## Cached Sessions

## Session Details

Select a session from the list above to view details

## About This Tool

### Purpose

Session Cache Manager provides persistent browser-based storage for Claude Code conversation transcripts. Store sessions locally, search across cached conversations, and manage your development session history without external dependencies.

### Features

- LocalStorage Persistence - All data stored in browser using Web Storage API
- Session Metadata - Track session IDs, names, timestamps, message counts, and sizes
- Real-time Search - Search across session names, IDs, and message content
- Storage Analytics - Monitor cache size, quota usage, and storage health
- Export/Import - Backup and restore cache data as JSON
- Quota Management - Warning system for approaching storage limits
- JSON Serialization - Efficient storage of complex session objects

### Web Research Integration

Source: MDN Web Storage API Documentation

Techniques Applied:

- setItem/getItem Pattern - Using proper `localStorage.setItem()` and `localStorage.getItem()` methods instead of direct property access for reliable storage operations
- JSON Serialization - Implementing `JSON.stringify()` for storing complex session objects and `JSON.parse()` for retrieval, enabling storage of nested data structures
- Feature Detection - Using try/catch pattern to detect localStorage availability before usage, with graceful degradation if unavailable
- Storage Events - Leveraging storage event listeners for cross-tab synchronization (planned for multi-instance coordination)
- Quota Management - Calculating storage usage and implementing warning system based on estimated 5-10MB localStorage limits

### Usage

1. Cache a Session - Paste JSONL transcript data, add optional session ID/name, click "Cache Session"
2. Load from File - Click "Load from File" to import a JSONL transcript file directly
3. Search Sessions - Type in search box to filter sessions by name, ID, or content
4. View Details - Click any session in the list to view full message details
5. Export/Import - Backup entire cache with "Export All" or restore with "Import Cache"
6. Monitor Storage - Check statistics dashboard for cache health and quota usage
7. Clear Cache - Use "Clear All Cache" to remove all stored sessions (with confirmation)

### Technical Implementation

- Storage Key Pattern - Uses `claude_cache_session_` prefix for all session keys
- Metadata Index - Maintains `claude_cache_index` for efficient session listing
- Data Structure - Each session stores: id, name, timestamp, messages array, metadata
- Search Algorithm - Case-insensitive search across session metadata and message content
- Size Calculation - Estimates storage using `JSON.stringify(value).length * 2` (UTF-16 encoding)

### Storage Format

Session data is stored as JSON with this structure:

- `id` - Unique session identifier
- `name` - User-provided session description
- `timestamp` - Cache creation timestamp (ISO 8601)
- `messages` - Array of parsed JSONL message objects
- `messageCount` - Total number of messages
- `firstMessage` - Timestamp of first message
- `lastMessage` - Timestamp of last message