-
Notifications
You must be signed in to change notification settings - Fork 207
feat: Session export button (Markdown, JSON, Plain Text) #52
Description
Problem
claude-devtools is a read-only session viewer — it visualizes Claude Code sessions from JSONL files, but there's no way to export or share session data. Users who want to save a session transcript, share it with teammates, or process it programmatically have to work directly with raw JSONL files.
Solution
Added an export button to the TabBar header that lets users export the currently viewed session in three formats:
- Markdown (.md) — structured document with metadata tables, conversation headings, code blocks for tool calls, and blockquotes for thinking blocks
- JSON (.json) — full SessionDetail object (messages, chunks, metrics, processes) for programmatic use
- Plain Text (.txt) — flat transcript with labeled sections (USER, ASSISTANT, TOOL, THINKING) readable in any editor
How it works
The export runs entirely in the renderer process using the SessionDetail already loaded in the Zustand store — no new IPC channels needed. Three formatter functions convert the session data to the target format, then a Blob URL triggers a browser download.
UI placement
A download icon (↓) appears in the TabBar right-side actions, between the Search and Notifications buttons. It's only visible when the active tab is a session tab with loaded data. Clicking it opens a dropdown with the three format choices.
Files added/changed
| File | Description |
|---|---|
src/renderer/utils/sessionExporter.ts |
Formatters + download trigger |
src/renderer/components/common/ExportDropdown.tsx |
Dropdown UI component |
src/renderer/components/layout/TabBar.tsx |
Integration into header |
test/renderer/utils/sessionExporter.test.ts |
51 tests |
PR
Implementation is ready: #51
All quality gates pass (typecheck, lint, 583/583 tests, build).