feat: standalone skills package + HTML render-annotate mode#687
Open
backnotprop wants to merge 6 commits intomainfrom
Open
feat: standalone skills package + HTML render-annotate mode#687backnotprop wants to merge 6 commits intomainfrom
backnotprop wants to merge 6 commits intomainfrom
Conversation
Move skills from apps/skills/ to skills/ at repo root so they're discoverable by `npx skills add backnotprop/plannotator@<skill-name>`. Update all install scripts (sh, ps1, cmd) and tests. Add two new visual HTML skills: - plannotator-plan: generates rich implementation plans with SVG diagrams, mockups, and code snippets using Plannotator theme tokens - plannotator-pr-explainer: generates PR walkthroughs with inline diffs, risk maps, file tours, and architecture diagrams Add --render-html flag to `plannotator annotate` that renders HTML files as-is in an iframe instead of converting to markdown via Turndown. Enables annotating the visual HTML plans with full highlight/comment/deletion support. Implementation: - Shared flag parser (annotate-args.ts) + all three servers (Bun, Pi, OpenCode) - iframe srcdoc rendering with injected theme tokens and annotation bridge script - postMessage protocol between iframe and parent for selection, marks, scroll, resize - HtmlViewer component with same ViewerHandle interface as Viewer - Theme propagation via MutationObserver on document.documentElement
- Fix AnnotationToolbar prop names (element/positionMode, not anchorEl/mode) - Add isGlobal prop to both CommentPopover usages - Move action bar above iframe to avoid overflow:hidden clipping - Accept maxWidth prop so Wide/Focus toggle controls HtmlViewer width - Global Comment button now opens CommentPopover (not instant-fire) - Add AttachmentsButton to action bar for image attachments
Remove allow-same-origin from iframe sandbox so scripts in user HTML files cannot access the parent app or local API endpoints. The bridge only needs postMessage which works without same-origin. Use rawHtml as the draft key source in render-html mode so each HTML file gets its own autosave slot (both Bun and Pi servers).
Gate renderAs on rawHtml existence so the server response is honest when --render-html is passed with a non-HTML file (both Bun and Pi). Remove unused sourceInfo prop from HtmlViewer. Remove dead COMMENT branch from handleAnnotate — comments route through onRequestComment.
Extend SharePayload with h (rawHtml) and r (renderAs) fields. HTML shares always go through the paste service (encrypted short links) — hash-based sharing returns null for HTML mode. Fix generateShortUrl guard to allow rawHtml when markdown is empty. Fix refreshShareUrl to handle null return from generateShareUrl. Fix restore logic in both paste and hash paths to detect HTML payloads and set rawHtml/renderAs state via optional chaining (graceful for old callers). Fix importFromShareUrl title extraction to check payload.h. Fix ExportModal to show "Create short link" button when hash URL is unavailable (HTML mode), and hide the empty hash textarea. Fix callback bot gates, button disabled states, annotation panel share button, and handleCopyShareLink to use shortShareUrl as fallback.
Owner
Author
|
Before merge integrate https://github.com/nicobailon/visual-explainer |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
apps/skills/→skills/) fornpx skills addcompatibility. All install scripts (sh, ps1, cmd), tests, and CI updated.plannotator-plan— generates rich standalone HTML implementation plans with SVG architecture diagrams, UI mockups, and syntax-highlighted code snippets. Uses Plannotator theme tokens for theme-aware rendering.plannotator-pr-explainer— generates visual HTML PR walkthroughs with inline diffs, risk maps, file-by-file commentary, before/after comparisons, and "where to focus" guidance.--render-htmlonplannotator annotate— renders HTML files as-is in an iframe (instead of converting to markdown via Turndown), with full annotation support via a postMessage bridge. Supported across all three servers (Bun, Pi/Node, OpenCode).HtmlViewer— iframe-based renderer with injected theme tokens, annotation bridge script, and sameViewerHandleinterface as the existingViewer. Includes theme change propagation via MutationObserver.Skills install
Test plan
bun test packages/shared/annotate-args.test.ts— 28/28 pass (includes new--render-htmltests)bun test scripts/install.test.ts— 60/60 pass (updated paths)plannotator annotate test.html— existing behavior unchanged (converts to markdown)plannotator annotate test.html --render-html— HTML renders in iframe with theme tokens--render-html --gate→ Approve button works