agentpng

Turn coding agent sessions into shareable PNG images

Website | FAQ | Feedback

Note: This project is just getting started. Parsing logic for some agents may need adjustments as formats evolve. Contributions and bug reports are welcome.

Supported Agents

Agent	Format	Source
Claude Code	.jsonl	~/.claude/projects/<project>/<session>.jsonl
Kiro	.md	Right-click chat tab > Export Conversation
Kiro Spec	.md	.kiro/specs/<feature>/tasks.md
Cursor	.md	Chat > ... > Export Chat
Codex	.jsonl	~/.codex/sessions/
Gemini CLI *	.json / text	~/.gemini/tmp/<project>/checkpoints/
Copilot CLI *	text	Terminal output with User:/Copilot: prefixes
ChatGPT *	.json	Settings > Data Controls > Export

* Needs validation — parsing may require adjustments.

Features

• Multiple syntax highlighting themes (dark + light)
• Customizable card width and platform presets (Twitter, LinkedIn, Instagram, etc.)
• Toggle tool calls, timestamps, reasoning blocks, plans, and sources
• Select specific messages to include
• Split export: by message, mid-message content split, or manual click-to-split
• Export as PNG or multi-part ZIP for split segments
• Dark / light mode
• Mobile-responsive with bottom drawer for settings

Settings

Setting	Description
theme	Syntax highlighting theme for the card. Multiple dark and light themes available (e.g. Vitesse Dark, GitHub Light, Nord). Persisted across sessions.
tool calls	Show or hide tool/function call blocks and their outputs in assistant messages.
timestamps	Display timestamps next to each message.
reasoning	Show or hide thinking/reasoning blocks from the assistant.
plans / tasks	Display plan steps or task checklists extracted from messages.
sources	Show file paths and URLs referenced in messages.
window buttons	Toggle the macOS-style traffic light buttons at the top of the card.
split into parts	Enable multi-part export. Splits the card into segments for platforms with size limits.
split mode	How to split: by message (one segment per message), mid-message (split at content boundaries within a fixed height), or click to split (manually click where to split).
size preset	Platform presets that set width and height: Custom, Twitter/X (600px), Threads (540px), LinkedIn (700px), Instagram (540px), TikTok (450px).
width	Card width in pixels (400–900).
max messages	Limit how many messages to render. Set to "all" to show everything.

Getting Started

npm install
npm run dev

Open localhost:4321.

Build

npm run build
npm run preview

Production output goes to ./dist/.

Project Structure

src/
├── components/
│   ├── App.tsx              # Main app shell + landing page
│   ├── SessionCard.tsx      # Card renderer + export logic
│   ├── ConfigPanel.tsx      # Theme, toggles, split settings
│   ├── MessageSelector.tsx  # Per-message include/exclude
│   ├── AgentHoverCard.tsx   # Hover cards for agent format info
│   └── ThemeSwitch.tsx      # Dark/light toggle
├── lib/
│   ├── parsers/
│   │   ├── index.ts         # Auto-detect + route to parser
│   │   ├── chatgpt.ts
│   │   ├── claude-code.ts
│   │   ├── codex.ts
│   │   ├── copilot-cli.ts
│   │   ├── cursor.ts
│   │   ├── gemini-cli.ts
│   │   ├── kiro.ts
│   │   ├── kiro-spec.ts
│   │   ├── generic.ts       # Fallback parser
│   │   └── extract.ts       # Shared extraction helpers
│   ├── themes.ts            # IDE theme definitions
│   ├── highlight.ts         # Shiki syntax highlighting (lazy)
│   ├── split-code.ts        # Code block splitting (no deps)
│   ├── hero-demos.ts        # Landing page demo sessions
│   ├── types.ts
│   ├── utils.ts
│   └── useTheme.ts
├── pages/
│   ├── index.astro          # Homepage
│   └── faq.astro            # FAQ page
└── styles/
    └── global.css
public/
├── robots.txt
├── llms.txt
├── favicon.svg
└── favicon.ico

Tech Stack

• Astro - static site framework
• React - UI components (client:load)
• Shiki - syntax highlighting (dynamically imported)
• html-to-image - PNG export (dynamically imported)
• JSZip - multi-part ZIP export (dynamically imported)
• Framer Motion - hero carousel animation
• Tailwind CSS v4

License

MIT

---

Built with Kiro. Created by @siegerts.