# Web Worker Event Processor - Claude Code DevTools

## 📥 Load Hook Events

Select Events File (JSON/JSONL)
Analysis Type

## 🔄 Worker Status

No worker initialized
0%
Initializing...

## 📊 Analysis Results

Load event data and run analysis to see results

## About This Tool

### Purpose

Process large volumes of Claude Code hook events in the background using Web Workers. Analyze patterns, detect errors, compare agent behavior, and identify anomalies without blocking the UI.

### Features

- Background Processing: Uses Web Workers to analyze thousands of events without freezing the UI
- Pattern Detection: Identifies common tool usage sequences and workflows
- Error Correlation: Finds tools that frequently fail together
- Session Analysis: Calculates productivity metrics and session duration
- Agent Comparison: Compares behavior across multiple agents/sessions
- Anomaly Detection: Identifies unusual patterns and outliers
- Real-time Progress: Shows analysis progress with percentage updates
- Sample Data Included: Test with realistic hook event scenarios

### Web Research Integration

Source: MDN Web Workers API Documentation

Techniques Applied:

- Worker Communication via postMessage: Main thread sends event data and receives analysis results through structured message passing
- Background Processing Pattern: Web Worker performs heavy computation (pattern matching, statistics) without blocking the UI thread
- Worker Lifecycle Management: Proper worker initialization, termination, and error handling for robust processing

### Usage

1. Click "Load Sample Data" to test with example hook events, or upload your own JSON/JSONL file
2. Select an analysis type (Pattern Detection, Error Correlation, etc.)
3. Click "Start Analysis" to spawn a Web Worker and begin background processing
4. Watch the progress bar update in real-time as the worker processes events
5. Review results displayed in organized cards when analysis completes
6. Try different analysis types to explore various insights

### Hook Event Structure

Events follow this structure:

    {
      "source_app": "demo-agent",
      "session_id": "abc123",
      "hook_event_type": "PreToolUse|PostToolUse|UserPromptSubmit|Notification|Stop|SubagentStop",
      "payload": {
        "tool_name": "Bash",
        "tool_input": {...},
        "tool_output": {...}
      },
      "timestamp": 1696867200000
    }

### Analysis Types

- Pattern Detection: Finds common tool sequences (e.g., "Read → Edit → Bash")
- Error Correlation: Identifies tools that fail together frequently
- Session Analysis: Calculates duration, tool counts, and productivity metrics
- Agent Comparison: Compares tool usage across different source apps/sessions
- Anomaly Detection: Finds outliers in timing, error rates, or usage patterns
- Complete Analysis: Runs all analyses in parallel for comprehensive insights