Database: Initializing...
WebSocket: Disconnected
Events Stored: 0
DB Size: 0 KB

### 🔌 WebSocket Connection

### 📂 Import/Export

### 🧹 Maintenance

### 🔍 Advanced Query Interface

Source App:
Session ID:
Event Type:
Time Range:

### 📊 Query Results

No events to display. Connect to WebSocket or import events to get started.
Page 1 of 1

### 📈 Event Statistics

## 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])