opencode-session-visualizer

OpenCode Session Visualization

Export OpenCode sessions from the local database and generate a single-file HTML that replicates the style of the official share page.

Core Value

OpenCode's context compaction is irreversible—when resuming a session, only the content after the checkpoint can be seen. But in the database,all messages are fully preserved. This skill extracts the complete data directly from the database and generates a shareable HTML webpage.

Cross-Platform Notes

The script supports macOS, Linux, and Windows. No additional configuration is required.

• Python Command: On macOS/Linux use python3, on Windows use python(the examples below uniformly use python3; Windows users should replace it themselves)
• Script Path: The script uses __file__ to automatically locate its own directory, so there is no need to worry about which path the skill is installed in. In the commands below, SKILL_DIR refers to the installation directory of this skill (which varies by AI Agent tool, such as ~/.claude/skills/opencode-session-visualizer/、~/.config/opencode/skills/opencode-session-visualizer/ , etc.)
• Database Path(the script searches automatically; no manual specification is needed):
  • Linux: ~/.local/share/opencode/opencode.db
  • macOS: ~/.local/share/opencode/opencode.db or ~/Library/Application Support/opencode/opencode.db
  • Windows: %LOCALAPPDATA%\opencode\opencode.db or %APPDATA%\opencode\opencode.db

Workflow

Quick Path (Recommended)

Generate HTML directly from the database with a single command (SKILL_DIR = this skill's directory):

python3 SKILL_DIR/scripts/generate_html.py --session <session_id> [output.html]

If the user has not provided a session_id, first list the recent sessions:

python3 SKILL_DIR/scripts/export_session.py --list -n 15

Step-by-Step Path

1. Export JSON：python3 SKILL_DIR/scripts/export_session.py <session_id> session.json
2. Generate HTML：python3 SKILL_DIR/scripts/generate_html.py session.json [output.html]

After generation, prompt the user to open it in a browser (macOS: open <path>，Windows: start <path>，Linux: xdg-open <path>）。

HTML Features

The generated HTML is a fully self-contained single file with the following interactive features:

Rendering

• Markdown Rendering: Assistant messages support full Markdown (tables, code blocks, lists, headings), using marked.js
• Code Highlighting: highlight.js syntax highlighting, dark theme
• Dark Theme: background #131315, code blocks #0b0b0c, links #89b4fa, system font 13px

Interaction

• Left Navigation Sidebar: Lists summaries of all user messages; clicking smoothly scrolls to them, and the current message is automatically highlighted while scrolling
• Tool Call Cards: Collapsed by default, showing the tool name + summary (e.g. read · format.ts); clicking expands to show the complete Input and Output (code block style, scrollable)
• Thinking Process Collapse: reasoning content is collapsed by default; click to expand and view
• Compaction Event Marker: compaction checkpoints are displayed as amber cards
• Back to Top Button: Floating button at the bottom right of long pages

Editing (In-Browser Operations)

• Delete Message 🗑: Hovering over a user message shows a delete button, which deletes that message and its subsequent consecutive assistant replies
• Truncate Conversation ✂️: Hovering over a user message shows a truncate button, deleting all content after that message (bulk delete trailing conversation)
• Export cleaned HTML: After performing a delete/truncate operation, an export button appears in the navigation bar; click to download the cleaned single-file HTML

Data Structure

Exported JSON structure:

{
  "session": {
    "id": "ses_xxx",
    "title": "会话标题",
    "stats": { "total_messages": 222, "user_messages": 59, ... }
  },
  "messages": [
    {
      "id": "msg_xxx",
      "role": "user|assistant",
      "timestamp": "2026-07-23 16:18:45",
      "agent": "Orchestrator",
      "model": "glm-5.1",
      "parts": [
        {"type": "text", "data": {"text": "markdown内容"}},
        {"type": "tool", "data": {"type": "tool", "tool": "bash", "callID": "...", "state": {"status": "completed", "input": {"command": "..."}, "output": "...", "title": "...", "time": {"start": 123, "end": 456}}}},
        {"type": "reasoning", "data": {"text": "思考内容"}},
        {"type": "step-start", "data": {...}},
        {"type": "step-finish", "data": {...}},
        {"type": "compaction", "data": {...}},
        {"type": "patch", "data": {...}}
      ]
    }
  ]
}

Part type handling:

• text: Rendered as Markdown (body of user messages and assistant messages)
• tool: Collapsible card, showing tool name + summary; expanded shows Input parameters and Output result
• reasoning: Collapsible card; click to expand and view the thinking process
• step-start / step-finish: Step separator marker (not displayed on the page)
• compaction: Amber compression event card
• patch: Code patch card
• agent: agent switch marker

The Tool's input field varies by tool:

• read/edit/write：{filePath: "/path/to/file"}
• bash：{command: "ls -la"}
• grep：{pattern: "...", include: "*.ts"}
• glob：{pattern: "**/*.py"}
• task：{description: "...", prompt: "..."}

File Structure

opencode-session-visualizer/
├── SKILL.md                      # 本文件
├── scripts/
│   ├── export_session.py         # 数据库导出脚本（session_id → JSON）
│   └── generate_html.py          # HTML 生成脚本（JSON/DB → HTML）
└── assets/
    └── template.html             # HTML 模板（含 __SESSION_DATA__ 占位符）

Script Description

export_session.py — Export complete session data from opencode.db

• python3 export_session.py <session_id> [output.json] — Export a specified session
• python3 export_session.py --list -n 15 — List the 15 most recent sessions
• session_id supports partial matching

generate_html.py — Inject session data into the template to generate HTML

• python3 generate_html.py --session <session_id> [output.html] — Generate directly from the database (recommended)
• python3 generate_html.py <session.json> [output.html] — Generate from exported JSON
• The template path is automatically resolved to assets/template.html

template.html — HTML template

• Placeholder __SESSION_DATA__ is located in <script id="conv-data"> inside
• generate_html.py injects JSON data into the placeholder position
• Includes complete CSS/JS (dark theme, Markdown rendering, interactive features, delete/truncate/export)
• CDN dependencies: marked.js, highlight.js, JetBrains Mono font

Notes

• The database path is automatically detected by the script (see "Cross-platform Notes" above); it is usually 5GB+, so queries must include WHERE session_id
• session_id supports partial matching (the script will automatically complete it)
• The HTML generated for large sessions (200+ messages) may be 5MB+; browsers can handle it normally
• The delete/truncate feature operates on the browser side and does not affect the original database data
• When exporting the cleaned HTML, it only includes messages that have not been deleted

---

Author: nigo WeChat Official Account: 逆行的狗