A self-contained, zero-dependency HTML renderer for interactive plan pages. It parses a source HTML file containing custom `<ve-plan>`, `<ve-claim>`, `<ve-ask>`, `<ve-code>`, `<ve-calls>`, `<ve-mock>`, `<ve-flow>`, and other tags, validates the plan structure (claim hierarchy, evidence types, decision options, file references), reads cited code from disk with security checks (path traversal prevention, secret detection), highlights code with a custom tokenizer, and generates a complete self-contained HTML page with inline CSS and JavaScript. The renderer checks file paths against a repository root, rejects symlinks and secret files, and produces detailed error and warning messages. It can be extracted and used in any project that needs to generate structured, interactive HTML documents from a declarative source format.

A zero-dependency renderer that validates a compact JSON spec against a JSON Schema (`quick/schema.json`) and produces a complete self-contained HTML page. The spec supports sections with cards, tables, risks, files, steps, flow diagrams, callouts, and evidence items. The renderer performs thorough validation: checks for unknown properties, invalid enum values, bad flow references, and table row/column mismatches. All agent text is HTML-escaped. The output uses a clean, responsive CSS with light/dark theme support. This component is reusable for any project that needs to convert structured JSON data into styled HTML pages without external dependencies.

A local stdio MCP server that exposes three tools (`visual_explainer_prepare`, `visual_explainer_render_html`, `visual_explainer_render_quick`), bundled command templates as MCP prompts, and read-only skill resources. The server follows the Model Context Protocol strictly: it does not start an HTTP listener, handle credentials, call an LLM, or write outside its configured output directory. It implements security measures including symlink rejection, atomic file writes, output jail enforcement, and basename-only filename validation. The server uses Zod for input validation and provides structured output schemas. This component demonstrates a clean, secure MCP server implementation that can serve as a reference for building MCP tools.

Client-side JavaScript for interactive plan pages. It implements linked highlighting (hovering or focusing a term lights up matching parts in diagrams), flow dots (animated particles moving along SVG paths at real traffic ratios), entrance animations with count-up effects, a decision tree with saved state (localStorage), keyboard navigation (j/k for claims, 1-9 for options, n for next decision, c for comment, a for approve, r for respond), a response builder that generates structured markdown, and a dialog for reviewing and sending answers. The script handles edge cases like file:// URLs (try/catch around replaceState), reduced motion preferences, and print layouts. It is self-contained and can be reused in any interactive HTML document that needs a decision/comment system.

A comprehensive CSS design system for interactive plan pages. It defines a complete token system (colors, spacing, typography, radii, motion) with full light and dark theme support via `prefers-color-scheme`. The layout uses CSS Grid with a sticky hero sidebar on wide screens and a stacked layout on narrow screens. It includes styles for claim trees (nested `<details>` elements), decision fieldsets, code blocks with line numbers and highlighting, call trees with tree guides, UI mocks in shadow roots, hand-drawn SVG figures, chips, progress bars, and a response dialog. Print styles switch to light scheme, hide interactive elements, and prevent page breaks inside figures and cards. The CSS is modular and could be extracted as a reusable design system for technical documentation or review tools.

A video renderer that uses Playwright to drive a browser on a virtual clock, ensuring frame-perfect timing for narrated explainer videos. It injects a driver script that virtualizes time (timers, requestAnimationFrame, performance.now, Date, CSS/Web Animations) so that slow frames never drop or skew timing. The renderer supports voice clips from multiple providers (ElevenLabs, Seed Audio, OpenAI, xAI), caption burning, stills generation for review, and configurable frame rates. It handles edge cases like missing browsers (falls back to Google Chrome or installs Playwright's headless shell), missing ffmpeg, and partial renders (atomic rename on success). The audio track is assembled from per-line clips using ffmpeg. This component demonstrates a robust approach to browser-based video generation that could be adapted for other recording or animation tasks.

A best-effort static PPTX exporter that converts HTML slide decks (with `<section class="slide">` elements) to PowerPoint files. It uses node-html-parser for HTML parsing and pptxgenjs for PPTX generation. The exporter extracts slide titles, text, bullets, simple tables, code blocks, and Mermaid source placeholders, and lays them out on slides with a consistent dark theme. It handles edge cases like missing slides, empty content, and long text truncation. The exporter is intentionally best-effort and documents its limitations (no animations, no custom fonts, no live rendering). This component demonstrates a clean pattern for static export from HTML to a binary format and could be reused for other HTML-to-PPTX conversion tasks.