Skip to content

feat: annotatable diff view with block-level hover#309

Merged
backnotprop merged 7 commits intomainfrom
feat/plan-diff-annotations
Mar 16, 2026
Merged

feat: annotatable diff view with block-level hover#309
backnotprop merged 7 commits intomainfrom
feat/plan-diff-annotations

Conversation

@backnotprop
Copy link
Copy Markdown
Owner

Summary

Adds annotation support to the plan diff view using block-level hover. Users hover over added/removed/modified diff sections and annotate entire blocks — same interaction pattern as code block hover in the normal Viewer.

  • Hover a changed section → toolbar appears → Comment/Redline/Quick Label
  • Annotations carry diffContext field, show diff badge in panel
  • View isolation: diff annotations don't highlight in normal view, normal annotations don't highlight in diff
  • Annotated blocks show a persistent highlight ring when re-entering diff mode
  • Export includes [In diff content] labels for agent context
  • Share/draft persistence includes diffContext

Architecture

Commit 1: Hook extraction (pure refactor). Moved annotation plumbing from Viewer.tsx into useAnnotationHighlighter hook. Same code, same behavior, just encapsulated. Viewer consumes the hook and keeps its own code block, global comment, and pinpoint logic.

Commit 2: Diff annotation feature. Block-level hover in PlanCleanDiffView — no web-highlighter, no DOM marks, no findTextInDOM restoration. Annotations live purely in React state. Unchanged sections are not annotatable.

Why block-level instead of text-selection

A previous attempt (PR #300) used text-selection with web-highlighter in diff mode. That approach was fragile — findTextInDOM broke across diff boundaries, an auto-apply effect regressed normal annotation highlights on diff toggle, and cross-section selections picked wrong contexts. Block-level hover eliminates all these issues by not using DOM marks at all.

Test plan

  • Normal annotations work as before (create, delete, highlight persists through diff toggle)
  • Enter diff mode → hover added/removed/modified → toolbar at top-right
  • Comment, Redline, Quick Label modes all work in diff view
  • diff badge in panel for diff annotations
  • Toggle diff off → diff annotations in panel, no highlights in normal view
  • Toggle diff on → annotated blocks show highlight ring
  • Delete diff annotation → removed from panel, no stale marks
  • Deny with diff annotations → [In diff content] in feedback
  • Raw diff mode → no crash, no hover toolbars, annotations in panel

🤖 Generated with Claude Code

backnotprop and others added 5 commits March 15, 2026 21:28
Move annotation plumbing (web-highlighter lifecycle, toolbar/popover
state, text-selection handlers, findTextInDOM, applyAnnotations) out
of Viewer.tsx into a dedicated hook. Pure refactor — zero behavior
change. Viewer consumes the hook and keeps its own code block, global
comment, and pinpoint-specific logic.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add annotation support to plan diff view using block-level hover.
Hovering added/removed/modified sections shows the annotation toolbar.
No web-highlighter in diff mode — annotations live in React state only.

- diffContext field on Annotation type (added/removed/modified)
- PlanCleanDiffView: hover handlers, toolbar, comment/quicklabel flows
- Annotated blocks show persistent highlight ring via content matching
- View isolation: diff annotations filtered to diff view, normal to normal
- Share/draft restore filters diff annotations from Viewer DOM
- AnnotationPanel: neutral "diff" badge for diff annotations
- Export: [In diff content] label in feedback
- Toolstrip visible during diff mode for mode switching
- CLAUDE.md updated

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add scroll-to-selected when clicking a diff annotation in the panel —
scrolls to the block and briefly glows (same focused effect as Viewer).
Replace invisible ring-1 ring-primary/20 with ring-2 ring-accent for
annotated blocks so they're visually distinct.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
… highlight rings

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace ternary rendering with display:none so the Viewer
stays mounted and web-highlighter DOM marks survive the toggle.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@backnotprop backnotprop force-pushed the feat/plan-diff-annotations branch from a5bf6a3 to 12c4eb1 Compare March 16, 2026 06:16
backnotprop and others added 2 commits March 15, 2026 23:38
…ng to 500 chars

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…sibility)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@backnotprop backnotprop merged commit 93c0f03 into main Mar 16, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant