Add "Rendering"

Virgil 2026-02-19 16:54:14 +00:00
parent 063dc86889
commit d1f15cce3e

104
Rendering.md Normal file

@ -0,0 +1,104 @@
# 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
### 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]]