LLM grounding + citation design

Problem

Users trust answers more when they can verify origin. Raw LLM output lacks a native citation layer. Injecting bracketed numbers clutters prose. The challenge is making provenance discoverable without punishing skimmers.

Pattern

1. Anchor tokens — wrap claim boundaries in superscript pill markers [1]
2. Hover card — on hover, show source title, excerpt, and retrieval score in a floating panel. Dismiss on mouse leave.
3. Source index — collapsible footer listing every cited document with a relevance bar and clickable link.
4. Highlight sync — clicking a pill scrolls to the index entry and pulses its background for 1.2s.

States

Data contract

{
  "text": "The model was trained on...",
  "spans": [
    {
      "start": 24,
      "end": 41,
      "source_id": "arxiv-2307.09288",
      "score": 0.94
    }
  ],
  "sources": [
    {
      "id": "arxiv-2307.09288",
      "title": "Llama 2 Technical Report",
      "url": "https://arxiv.org/abs/2307.09288",
      "excerpt": "We introduce Llama 2..."
    }
  ]
}