Integrate Annotated Callouts UI with Parakeet Implementation

[Coldaine]

PROJECT: ColdVox + ColdTrace — “Annotated Callouts” UI (Span highlights + callout bubbles + leader lines + inspector)

GOAL

Implement an “annotation callouts” UI that behaves like the screenshots:

• Natural language text is segmented into semantic spans (chips/highlights).
• Callout bubbles attach to specific spans with leader lines.
• Clicking a span (or callout) opens an Inspector showing “how the enhancement worked” (structured explanation, evidence, and the derived effect).
  This must be subtle and premium — the annotations are an explainability layer, not a sci-fi dashboard.

TECHNICAL CONTEXT (The "Complexity Upgrade")

• Frontend Migration: The frontend has migrated from QML to a React 19 + TypeScript + Vite stack (Tauri v2). The original QML prototype (commit b3939ab) is now obsolete and serves only as a UX/logic reference.
• Parakeet Implementation: Both CPU and GPU Parakeet paths are now implemented in the tauri-base branch via the http-remote plugin and windows-parakeet.toml. The infrastructure is ready for the explainability layer.

DELIVERABLES (Port to React/ColdTrace)

1. React Component: src/components/AnnotatedCalloutsText.tsx
   • Props: text, annotations, onSelect, selectedId
   • Render text with spans as <span> wrappers (background highlight).
   • Compute DOM geometry using Range.getClientRects() for selected span.
   • Render callout bubble using @floating-ui/react OR absolute positioning.
   • Render leader line as an overlay SVG <path> from rect center to bubble.
2. Types: src/types/annotations.ts (Annotation, DerivedEffect, Evidence).
3. Demo: Story / demo page route with the sample sentence: “Change the primary call-to-action button on the login screen to be larger and use the brand’s primary blue color.”

ACCEPTANCE CRITERIA

• Visual parity with the screenshots (segmented soft highlights, pill bubbles, curved leader lines).
• Subtle, low-alpha aesthetics.
• Responsive: Works with word wrap and resizing.
• Inspector: Clearly explains mapping (e.g., Target: ui.login.cta.primary, Change: size -> large).

[Coldaine]

⚠️ Update: The frontend stack has migrated away from QML since this prototype was built. The original QML implementation (\AnnotatedCalloutsView.qml, \AnnotationInspector.qml) cannot simply be cherry-picked. This issue will require a rewrite/port of the UI logic to the current frontend framework (React/TypeScript per ColdTrace's original plan, or whatever the current ColdVox GUI stack is now). The original commits can serve as a reference for the interaction model and data structures, but the implementation is a from-scratch effort.