How it works

The report is driven entirely by a ReportData JSON object. The server (or an AI agent) returns this JSON, and the component renders it — no hardcoded sections. As new data arrives (new evidence, new risks, new citations), the lists grow and the report updates.

Floating left nav

A sticky sidebar on the left tracks which section is in view usingIntersectionObserver. Clicking a nav item smooth-scrolls to that section. The nav is auto-generated from the sections[] array — add a section to the JSON and it appears in the nav.

On mobile (lg: breakpoint), the nav is hidden and sections stack vertically.

Collapsible sections

Any section can be made collapsible by settingcollapsible: true in the JSON. Set defaultCollapsed: true to start collapsed. This is useful for detailed sections (safety data, resistance mechanisms) that most readers skip on first pass.

{
  id: "safety-assessment",
  title: "Safety Assessment",
  type: "text",
  collapsible: true,
  defaultCollapsed: true,
  content: "Preclinical safety evaluation..."
}

Superscript citation links

Text containing [1] or[2,3] markers is parsed into superscript links. The pattern works in two ways:

1. Inline markers — write [1] directly in the text string. The parser extracts them and creates superscript links.
2. Citations array — add citation keys to thecitations field of a list item. They are appended to the text automatically.

Hover a superscript to see the full citation in a tooltip. Click it to smooth-scroll to the bibliography entry, which highlights briefly with a blue background.

// Inline marker in text
{ text: "KRAS G12C is present in ~13% of NSCLC [1]" }

// Citations array (appended automatically)
{ text: "Strong GWAS signal across ancestries", citations: ["1", "6"] }

// Both produce superscript links that:
//   hover → tooltip with title, authors, year, DOI
//   click → smooth-scroll to bibliography entry