🗄️ IndexedDB Event Store

About This Tool

Purpose

Production-grade persistent storage system for Claude Code hook events using IndexedDB. Store, query, and analyze thousands of events with advanced filtering, compound indexes, and real-time updates from the observability server.

Features

• IndexedDB Storage: Persistent local database with compound indexes for efficient queries
• Real-time Updates: Connect to WebSocket server (ws://localhost:4000/stream) for live event streaming
• Multi-Field Indexing: Compound indexes on (source_app, timestamp) and (session_id, event_type)
• Advanced Queries: Filter by app, session, event type, and time range with cursor-based pagination
• Event Aggregation: Statistics by app, session, event type, and time period
• Import/Export: Load events from JSON/JSONL files and export filtered results
• Database Management: Size monitoring, cleanup, and sample data generation
• Cursor-based Pagination: Efficiently iterate over large result sets without loading all data

Web Research Integration

Source: MDN - IndexedDB API

IndexedDB Techniques Applied:

• Database Versioning & Migrations: Used indexedDB.open() with version management and onupgradeneeded event to create object stores and indexes dynamically
• Compound Indexes: Created multi-field indexes like [source_app, timestamp] and [session_id, event_type] for efficient filtering on multiple criteria simultaneously
• IDBKeyRange for Filtering: Leveraged IDBKeyRange.bound() and IDBKeyRange.only() for precise time-based and value-based filtering
• Cursor-based Iteration: Implemented IDBCursor with openCursor() for memory-efficient pagination over large datasets without loading all records
• Transaction Management: Used read/write transactions with proper scope limiting to ensure data integrity and performance

Usage

1. Connect to WebSocket: Click "Connect to Stream" to receive real-time events from ws://localhost:4000/stream
2. Import Events: Upload JSON/JSONL files containing hook events from the observability system
3. Query Events: Use filters to search by app, session, event type, or time range
4. View Statistics: Analyze event distribution across apps, sessions, and event types
5. Export Results: Download filtered events as JSON for backup or analysis
6. Pagination: Navigate through large result sets using Previous/Next buttons

Event Structure

Events from the multi-agent observability system have this structure:

• id: Auto-incrementing unique identifier
• source_app: Application that generated the event (e.g., "demo-agent")
• session_id: Unique session identifier
• hook_event_type: Type of hook event (PreToolUse, PostToolUse, etc.)
• payload: Event-specific data (tool name, inputs, outputs)
• timestamp: ISO 8601 timestamp
• summary: AI-generated summary of the event

IndexedDB Schema

Database: HookEventsDB, Version: 1

Object Store: events

• Key Path: id (auto-increment)
• Index 1: source_app
• Index 2: session_id
• Index 3: hook_event_type
• Index 4: timestamp
• Index 5: app_time (compound: [source_app, timestamp])
• Index 6: session_type (compound: [session_id, hook_event_type])