Transcript Loader

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+