v0.3.0 — Beautiful Diagrams

Render Mermaid diagrams as beautiful SVGs. Ultra-fast, fully themeable, zero DOM dependencies. Built for the AI era.

✨ Native Mermaid Rendering

Craft Agent now renders diagrams natively using beautiful-mermaid — our new open-source Mermaid rendering engine. No external dependencies, no browser DOM, just pure TypeScript.

Why This Matters

Diagrams are essential for AI-assisted programming. Claude generates Mermaid diagrams constantly — architecture overviews, data flows, state machines, entity relationships. Previously these were just code blocks. Now they're beautiful, professional visualizations.

What's New

Inline Rendering
Mermaid code blocks in responses render as native SVG diagrams automatically. No configuration needed.

Full-Screen Preview
Click any diagram to open it in a Figma-style viewer:

• Mousewheel zoom toward cursor (adapts to mouse vs trackpad)
• Trackpad pinch for smooth proportional zoom
• Click-drag to pan
• Double-click to reset to 100%
• Keyboard shortcuts: Cmd/Ctrl +/- zoom, Cmd/Ctrl 0 reset
• Preset dropdown: 25%, 50%, 75%, 100%, 150%, 200%, 400%, and "Zoom to Fit"

Diagram Types

• Flowcharts (graph LR/TD)
• State diagrams (stateDiagram-v2)
• Sequence diagrams (sequenceDiagram)
• Class diagrams (classDiagram)
• ER diagrams (erDiagram)

Theming
Uses elegant two-color foundation — background and foreground colors derive all visual elements via CSS color-mix(). Diagrams automatically match your Craft Agent theme.

Performance
100+ diagrams render in under 500ms. Pure TypeScript, zero DOM dependencies.

In-App Preview System

Beyond diagrams, this release introduces a unified preview system for rich content.

PDF Preview

In-app PDF viewing using Mozilla's pdf.js:

• Canvas-based rendering with text selection
• Page navigation controls
• Background thread decoding

Image Preview

Native viewing for common formats:

• PNG, JPG, GIF, WebP, SVG, BMP, ICO, AVIF
• HEIC/HEIF and TIFF fall back to system open

Smart File Detection

Clicking file paths now opens the right preview automatically:

Improvements

Markdown Rendering

• JSON code blocks render as interactive, collapsible trees
• Mermaid code blocks render as native SVG diagrams
• Better URL detection in linkify with comprehensive test coverage

Tool Matching (Internal)

Rewritten to use stateless, order-independent matching via SDK's direct IDs. More reliable subagent context tracking.

CLI Tool Icons

New resolver maps common CLI tools (git, npm, bun, cargo, docker, python, node...) to appropriate icons.

Bug Fixes

• Windows build: Fixed doc assets not being copied correctly

Removed

• Gmail source: Removed in favor of Google OAuth sources

Stats

• 334 files changed
• ~38,000 lines added

Full Changelog: v0.2.34...v0.3.0