# Transcript Loader - Claude Code DevTools

## Load Transcript File

Drag and drop a .jsonl transcript file here, or click to browse

Loading...
File Name:
File Size:
Status: Ready

## Transcript Messages

Total Messages
0
User Messages
0
Assistant Messages
0

## About This Tool

### Purpose

The Transcript Loader enables Claude Code developers to load, parse, and view conversation transcripts stored in JSONL format. It provides a clean, readable interface for inspecting message history, understanding conversation flow, and debugging AI interactions.

### Features

- Drag-and-Drop Loading: Simply drag your .jsonl transcript file onto the upload area
- Progress Tracking: Real-time progress bar for large file uploads
- JSONL Parsing: Line-by-line JSON parsing for efficient memory usage
- Message Display: Clean, color-coded display of user and assistant messages
- Metadata Visibility: Shows timestamps, session IDs, working directory, and git branch
- Error Handling: Graceful error messages for invalid files or parsing issues
- Statistics Dashboard: Quick overview of message counts by role
- Syntax Highlighting: Code-friendly monospace fonts and color schemes
- Dark Theme: Developer-friendly dark UI for long viewing sessions

### Web Research Integration

Source: MDN Web Docs - FileReader API

Techniques Applied:

- readAsText() Method: Using FileReader.readAsText() to read the entire JSONL file as text, then parsing line-by-line for efficient memory usage
- onload Event Handling: Implementing the onload event handler to process file contents after reading completes, with validation before parsing
- Progress Tracking: Using the onprogress event to display a real-time progress bar (percentage loaded) for large transcript files
- Error Handling Pattern: Implementing onerror handler with user-friendly error messages and visual feedback
- File Validation: Checking file type and size before reading to prevent issues with invalid files

### Usage

1. Locate Your Transcript: Find a Claude Code transcript file (typically .jsonl format)
2. Load the File: Either drag-and-drop the file onto the upload area, or click "Select File" to browse
3. Monitor Progress: Watch the progress bar as the file loads (especially useful for large files)
4. View Messages: Once loaded, scroll through the message list to inspect conversation history
5. Examine Metadata: Check timestamps, session IDs, working directories, and other metadata for each message
6. Review Statistics: See the total message count and breakdown by role at the top of the results

### Technical Notes

This tool parses JSONL (JSON Lines) format where each line is a separate JSON object. The parser handles:

- Line-by-line parsing to avoid loading entire file into memory at once
- Malformed JSON lines (skips and continues)
- Missing or optional fields with graceful defaults
- Different content formats (string vs. array of content blocks)
- Timestamp formatting and display

### Browser Compatibility

This tool requires modern browser support for FileReader API. Compatible with:

- Chrome/Edge 88+
- Firefox 78+
- Safari 14+