backnotprop/plannotator v0.19.12

on GitHub

Follow @plannotator on X for updates

What's New in v0.19.12

v0.19.12 adds Plannotator Flavored Markdown with code-file hover previews and Graphviz diagrams, a visual explainer skill for generating themed HTML plans and PR walkthroughs, configurable diff appearance controls, and a hooks visibility system. Eight PRs in this release, three from a first-time external contributor.

Code Line Range References and Hover Previews

Plans can now reference specific lines in your codebase using file.ts:42 (single line) or file.ts:10-20 (range) syntax inside backtick code spans. These render as interactive badges in the plan viewer. Hovering a badge with line info shows a syntax-highlighted code snippet in a popover, fetched from disk with a 150ms delay. Clicking opens the full file in the code file viewer, scrolled to the referenced line.

The path validation system from v0.19.8 now handles line suffixes correctly, stripping :42 before filesystem resolution and passing the line metadata through to the hover preview.

• #692

Sketch-Style Graphviz Diagrams

DOT code blocks (graphviz` or dot`) in plans now render as SVG diagrams using Viz.js. The renderer produces a hand-drawn sketch aesthetic that fits naturally alongside plan text. The WASM runtime loads lazily on first use, so plans without diagrams pay no cost. Invalid DOT syntax displays a clear error card with the raw source for debugging.

• #692

PFM Reminder and Improvement Hooks

Two opt-in mechanisms let you shape how your planning agent writes plans.

The PFM Reminder (pfmReminder: true in ~/.plannotator/config.json) injects a static description of the renderer's capabilities into the planning prompt. It tells the agent about code-file links, callouts, tables, diagrams, task lists, and hex swatches, so plans arrive pre-formatted for the viewer's features.

The Improvement Hook reads corrective instructions from ~/.plannotator/hooks/compound/enterplanmode-improve-hook.txt. If the file exists (up to 50KB), its content is appended to the planning prompt alongside the PFM reminder. This lets you provide persistent feedback that applies to every plan, without re-typing it each session.

Both hooks work across all three runtimes: Claude Code (PreToolUse on EnterPlanMode), OpenCode (experimental.chat.system.transform), and Pi (before_agent_start). When neither is configured, the hook exits silently with no overhead.

• #689

Hooks Visibility Tab in Settings

A new "Hooks" tab in the plan review Settings dialog shows the current state of the improve-context system. You can toggle the PFM reminder on or off, see whether an improvement hook file is detected and how large it is, and preview the composed context that gets injected. This replaces the previous workflow of editing config.json by hand.

The tab only appears in plan review mode since the hooks only affect the planning prompt.

• #695

Diff Tab Size

The diff viewer previously hard-coded tab indentation at 2 spaces, which made Go files, Makefiles, and deeply nested code difficult to read. A new "Tab size" stepper in the diff options popover lets reviewers pick a width from 1 to 8. The choice persists across sessions via cookie and applies immediately.

• Authored by @skripalschikov in #685

Diff Line Background Intensity

On light themes especially, the default green/red line backgrounds in the diff viewer can be too subtle to scan quickly. A new intensity toggle in the diff options popover offers three levels: subtle (the existing default), normal, and strong. Higher intensity reduces the color-mix ratio so added/removed lines stand out more clearly.

• Authored by @skripalschikov in #691

Visual Explainer Skill and HTML Render-Annotate Mode

PR #687 ships two things that work together: new skills and a new rendering mode.

plannotator-visual-explainer is a new skill that generates self-contained HTML visualizations themed with Plannotator's design system. It wraps @nicobailon's visual-explainer skill with Plannotator CSS custom properties, so output uses the same color tokens and typography as the plan viewer. Use it for architecture diagrams, implementation plans with SVG mockups, PR walkthroughs with inline diffs and risk maps, data tables, slide decks, or any visual explanation of technical concepts.

Install it with:

npx skills add backnotprop/plannotator@plannotator-visual-explainer

--render-html on plannotator annotate renders HTML files natively inside a sandboxed iframe instead of converting them to markdown via Turndown. This preserves the original layout, styling, and interactive elements while still supporting annotations through a postMessage bridge. Theme tokens are injected into the iframe, so content styled with Plannotator CSS properties adapts to light/dark mode automatically.

Together, these form a complete workflow: the skill generates themed HTML, and plannotator annotate output.html --render-html lets you review and annotate it with full visual fidelity. The skills directory also moved to the repo root for npx skills add compatibility.

• #687

Additional Changes

• Plan editor rendering optimization: Replaced useState + useEffect block derivations with useMemo, cutting render cycles from 5-7 to 3 per markdown change. Migrated all 13 toast sites to Sonner's imperative API, removing timer state and simplifying the component tree. — #696
• jj default target fix: The jj compare target now resolves dynamically from trunk() via jj log instead of iterating a hardcoded list of bookmark names. — Authored by @graemefolk in #686
• Ask AI in all-files view: The "Ask AI" button now appears in the comment popover when using the all-files diff view. Previously it only showed in single-file tab mode.

Install / Update

macOS / Linux:

curl -fsSL https://plannotator.ai/install.sh | bash

Windows:

irm https://plannotator.ai/install.ps1 | iex

Claude Code Plugin: Run /plugin in Claude Code, find plannotator, and click "Update now".

OpenCode: Clear cache and restart:

rm -rf ~/.bun/install/cache/@plannotator

Then in opencode.json:

{
  "plugin": ["@plannotator/opencode@latest"]
}

Pi: Install or update the extension:

pi install npm:@plannotator/pi-extension

What's Changed

• Add diff tab size option by @skripalschikov in #685
• fix(review): resolve jj default target from trunk by @graemefolk in #686
• feat: standalone skills package + HTML render-annotate mode by @backnotprop in #687
• feat(hook): PFM reminder & improvement hook support across all runtimes by @backnotprop in #689
• Add diff line background intensity option by @skripalschikov in #691
• feat(pfm): code line range references, hover preview, sketch Graphviz by @backnotprop in #692
• feat(ui): add Hooks visibility tab to Settings dialog by @backnotprop in #695
• Optimize plan editor rendering by @backnotprop in #696

New Contributors

• @skripalschikov made their first contribution in #685

Community

@skripalschikov contributed two PRs that directly improve the code review experience. The tab size option fixes a long-standing readability issue for anyone reviewing Go, Makefiles, or other tab-heavy code. The line background intensity control addresses a common complaint about pale diff colors on light themes. Both changes are small, focused, and immediately useful.

@graemefolk continued their jj work from v0.19.11 with a fix that resolves the default compare target dynamically instead of guessing from a hardcoded list.

Full Changelog: v0.19.11...v0.19.12