Summary

Extend the inline diff preview (added in #63 / #74) to support element annotations, so reviewers can see what changed when an agent addresses an element-level annotation (e.g. CSS changes, layout tweaks, image attributes).

Problem

The diff toggle currently only works for text annotations, which have selectedText and replacedText fields. Element annotations have elementSelector.outerHtmlPreview (a snapshot of the element's HTML at annotation time) but no mechanism to capture or diff the "after" state. Reviewers addressing element annotations still have to manually inspect the page to verify changes.

Proposal

• Capture the current outerHTML of the target element when the agent marks it as addressed (or when the reviewer views the diff)
• Diff outerHtmlPreview (original) vs current outerHTML (live) and render a compact HTML-aware diff
• Consider a line-level or attribute-level diff rather than word-level, since HTML structure matters more than prose flow
• Reuse the existing diff toggle UI pattern from feat: inline diff preview for addressed annotations #74

Key Constraints

• The "after" state needs to be captured somehow — either stored in the annotation (like replacedText for text) or computed live by querying the DOM element via its selector
• Live DOM comparison is simpler (no schema changes) but only works when the dev server is running and the page is open
• HTML diffing may need a different algorithm than the word-level LCS used for text — attribute changes, tag modifications, and whitespace differences all matter

Related

• feat: inline diff preview for addressed annotations #63 — original inline diff feature (text annotations only)
• feature roadmap — brainstormed and debated by agent panel #62 — feature roadmap (Tier 1)
• Flagged as a stretch goal in feat: inline diff preview for addressed annotations #63