105 lines
2.8 KiB
Markdown
105 lines
2.8 KiB
Markdown
# Rendering
|
|
|
|
go-session provides two output formats for visualising parsed sessions: a self-contained HTML timeline and an MP4 video rendered via Charmbracelet VHS.
|
|
|
|
## HTML Timeline
|
|
|
|
`RenderHTML` generates a single HTML file with no external dependencies. The output includes:
|
|
|
|
- **Sticky header** with session ID, start time, duration, tool call count, and error count
|
|
- **Search bar** with real-time filtering (press `/` to focus)
|
|
- **Type filter** dropdown: All events, Tool calls only, Errors only, Bash only, User messages
|
|
- **Collapsible event cards** colour-coded by tool type:
|
|
- Green: Bash commands
|
|
- Blue (accent): Other tools (Read, Edit, Write, Grep, Glob)
|
|
- Yellow: User messages
|
|
- Grey: Assistant responses
|
|
- Red border: Failed tool calls
|
|
- **Permalinks** on each event card for direct `#evt-N` links
|
|
|
|
### Usage
|
|
|
|
```go
|
|
sess, err := session.ParseTranscript("session.jsonl")
|
|
if err != nil {
|
|
log.Fatal(err)
|
|
}
|
|
|
|
if err := session.RenderHTML(sess, "output/timeline.html"); err != nil {
|
|
log.Fatal(err)
|
|
}
|
|
// Open output/timeline.html in any browser
|
|
```
|
|
|
|
### Event Card Layout
|
|
|
|
Each card displays:
|
|
|
|
| Element | Description |
|
|
|---------|-------------|
|
|
| Timestamp | `HH:MM:SS` of the event |
|
|
| Tool badge | Colour-coded tool name |
|
|
| Input summary | Truncated to 120 characters |
|
|
| Duration | Formatted as ms/s/min/hr |
|
|
| Status icon | Green tick or red cross for tool calls |
|
|
|
|
Clicking a card expands it to show the full input (labelled contextually as Command, Message, File, or Target) and the complete output.
|
|
|
|
### Labels
|
|
|
|
The input label adapts to the tool type:
|
|
|
|
- **Bash**: "Command"
|
|
- **Read, Glob, Grep**: "Target"
|
|
- **Edit, Write**: "File"
|
|
- **User messages**: "Message"
|
|
- **Assistant**: "Response"
|
|
|
|
## MP4 Video
|
|
|
|
`RenderMP4` generates a terminal recording using [VHS](https://github.com/charmbracelet/vhs). VHS must be installed separately.
|
|
|
|
### Prerequisites
|
|
|
|
```bash
|
|
go install github.com/charmbracelet/vhs@latest
|
|
```
|
|
|
|
### Usage
|
|
|
|
```go
|
|
sess, err := session.ParseTranscript("session.jsonl")
|
|
if err != nil {
|
|
log.Fatal(err)
|
|
}
|
|
|
|
if err := session.RenderMP4(sess, "output/session.mp4"); err != nil {
|
|
log.Fatal(err)
|
|
}
|
|
```
|
|
|
|
### How It Works
|
|
|
|
1. A VHS `.tape` script is generated from the session events
|
|
2. The tape uses the Catppuccin Mocha theme at 1400x800 resolution
|
|
3. Only `tool_use` events are rendered:
|
|
- **Bash**: Shows the command being typed, abbreviated output, and a status indicator
|
|
- **Read/Edit/Write**: Shows a comment line with the file path
|
|
- **Task**: Shows an "Agent:" comment with the task description
|
|
4. Each event includes a brief pause for readability
|
|
5. VHS renders the tape to the specified MP4 path
|
|
|
|
### Tape Configuration
|
|
|
|
The generated tape uses these defaults:
|
|
|
|
```
|
|
FontSize 16
|
|
Width 1400
|
|
Height 800
|
|
TypingSpeed 30ms
|
|
Theme "Catppuccin Mocha"
|
|
Shell bash
|
|
```
|
|
|
|
See also: [[Home]] | [[Session-Format]]
|