feat: bidirectional scroll navigation between annotations and highlights

[grubmanItay]

Summary

• Clicking an annotation card in the right panel scrolls the plan content to the corresponding highlighted text and applies a distinctive "focused" highlight color (cyan glow)
• Clicking highlighted text in the plan scrolls the annotation panel to bring the corresponding card into view
• New .annotation-highlight.focused CSS class with dark and light mode support
• Scroll targets are centered in the viewport for easy visibility
• Creating a new annotation does not trigger scroll/focus (user is already looking at it)

Motivation

When reviewing a long, detailed plan with many annotations — especially after importing a teammate's review — it's easy to lose track of which annotation card corresponds to which highlighted line in the content. The existing behavior only applies a subtle selected border to the card when a highlight is clicked, but doesn't scroll either panel, forcing the user to manually hunt for the matching element.

How it works

1. Card → Highlight: Viewer.tsx watches selectedAnnotationId and uses highlighter.getDoms() (for web-highlighter annotations) or querySelector('[data-bind-id]') (for shared/imported annotations) to find the
   corresponding <mark> elements. It applies a .focused class (bright cyan glow) and calls scrollIntoView({ behavior: 'smooth', block: 'center' }).
2. Highlight → Card: AnnotationPanel.tsx watches selectedId and scrolls the matching [data-annotation-id] card into view within the panel's scroll container using block: 'center'.
3. Skip on creation: A justCreatedIdRef tracks newly created annotation IDs so the scroll+focus effect is skipped when the user just added an annotation (they're already looking at it).
4. Edge cases: Global comments (no highlight in content) gracefully no-op. Multi-node selections focus all marks and scroll to the first. Already-visible elements scroll smoothly to the center.

Test plan

• Add several annotations spread across a long plan
• Click an annotation card → content scrolls to highlight with cyan glow, centered in viewport
• Click highlighted text → panel scrolls to show the corresponding card with selected border, centered
• Add a new annotation → no cyan focus or scroll triggered (user stays in place)
• Click a global comment card → no scroll in content (expected)
• Import a teammate's shared review → verify bidirectional navigation works with imported annotations
• Verify focused highlight color in both dark and light mode
• Test across Chrome, Firefox, Safari, and Edge

🤖 Generated with Claude Code

[backnotprop]

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.

🤖 Generated with Claude Code

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}

[backnotprop]

This is live in v0.11.4. Thanks @grubmanItay!