reviewable-html-workbench

Reviewable HTML Workbench

A Claude Code / Codex CLI plugin that lets you review agent-generated HTML documents with inline comments — and have the agent read those comments, reply, and improve the document in the next iteration.

Overview

Agent workflows produce reports, design documents, and comparison tables — but turning those outputs into something you actually trust requires back-and-forth review. Chat-based feedback loses context: "fix the table in section 3" works once, but doesn't scale when you have dozens of comments across a long document.

Reviewable HTML Workbench solves this by putting the review conversation inside the document itself:

1. Generate — The agent produces an HTML bundle with structured sections, diagrams, and images.
2. Review — You open the preview, select any text or image, and leave a comment right where the issue is.
3. Ingest — The agent reads your comments, classifies each one, and writes replies explaining what it will change.
4. Improve — The agent updates the document, re-renders, and you see the changes in context.
5. Repeat — Keep commenting and refining until the document is ready.

Comments are attached to exact document ranges and persisted as structured JSON, so nothing is lost between iterations. When you're satisfied, export the final document as a single self-contained HTML file.

The plugin includes three skills. visual-html-renderer creates reviewable visual HTML documents. reviewable-design-doc builds review-ready design documents and feeds browser comments back into the agent workflow. plan-preview gives Plan Mode proposals a temporary HTML preview URL before implementation starts.

Features

• Inline Review Comments: select any text or image in the preview to leave a comment. Comments are highlighted in the document with margin cards showing status, replies, and threading.
• Automatic Agent Replies: when you add a comment in the browser, the agent can read the selected text and surrounding document context, then write its reply back into the same thread.
• Resolution-Gated Updates: clarification threads stay in the document until you resolve them. Once the thread is resolved, the agent can apply the agreed document changes and notify the browser.
• Plan Preview URLs: when a plan needs visual review, the agent can include a temporary Reviewable HTML Workbench preview URL directly in the plan text.
• Review Ingestion: comments are classified as actionable, clarification, already addressed, and related states so the review conversation stays structured across iterations.
• Publish & Download: switch to a clean reading view with no review UI, then download a single self-contained HTML file with all CSS and images embedded. The exported file auto-detects OS light/dark theme.
• Document Model: schema-driven document input for predictable HTML generation.
• HTML Rendering: produces index.html, copied assets, and renderer-manifest.json.
• Preview Server with Tailscale: starts a session-scoped preview server, preferring Tailscale IPv4 and falling back to 127.0.0.1; 0.0.0.0 bind is rejected.
• Dark/Light Theme: UI support for theme switching in rendered review documents.
• Diagram + Image Support: stores Mermaid sources, renders fallback diagrams, and attaches generated image assets to document model blocks.

Installation

Claude Code

Add the GitHub repository as a plugin marketplace and install:

claude plugin marketplace add u-ichi/reviewable-html-workbench
claude plugin install reviewable-html-workbench

Alternatively, clone the repository and install locally:

git clone https://github.com/u-ichi/reviewable-html-workbench.git
cd reviewable-html-workbench
claude plugins install .

For local development, run Claude Code with this plugin directory:

claude --plugin-dir /path/to/reviewable-html-workbench

Codex CLI

Add the GitHub repository as a plugin marketplace, then add the plugin. This repository's marketplace name is reviewable-html-workbench-local:

codex plugin marketplace add u-ichi/reviewable-html-workbench
codex plugin add reviewable-html-workbench@reviewable-html-workbench-local

To verify the configured marketplace name, check the left column:

codex plugin marketplace list

Or clone and register locally:

git clone https://github.com/u-ichi/reviewable-html-workbench.git
codex plugin marketplace add ./reviewable-html-workbench
codex plugin add reviewable-html-workbench@reviewable-html-workbench-local