---
estimated_steps: 1
estimated_files: 5
skills_used: []
---

# T01: Implement v2 format-aware rendering, TOC, and citation links

Update frontend TypeScript types to include body_sections_format and source_videos from S03. Build format-aware renderer in TechniquePage.tsx that detects v2 (list-of-objects) vs v1 (dict) body_sections and renders accordingly. V2 renderer: iterate BodySection[] → H2 with id slug + content paragraph + subsections (H3 + content). Per D024, sections with subsections have empty-string content — skip empty <p> tags. Create TableOfContents component that takes v2 sections and renders nested anchor list. Parse [N] and [N,M] citation markers in content strings and replace with <a> links to #km-{momentId}. Add all CSS (TOC styles, subsection styles, citation link superscript). Update snapshotToOverlay to pass through list-format body_sections.

## Inputs

- ``frontend/src/api/public-client.ts` — current TechniquePageDetail interface missing body_sections_format and source_videos`
- ``frontend/src/pages/TechniquePage.tsx` — current v1-only body_sections renderer and snapshotToOverlay function`
- ``frontend/src/App.css` — existing technique-prose styles to extend`

## Expected Output

- ``frontend/src/api/public-client.ts` — updated with BodySectionV2, BodySubSectionV2 interfaces, widened body_sections type, body_sections_format field, source_videos field`
- ``frontend/src/pages/TechniquePage.tsx` — format-aware renderer (v1 dict vs v2 list), citation rendering in prose, TOC integration, updated snapshotToOverlay`
- ``frontend/src/components/TableOfContents.tsx` — new TOC component with nested anchor links and slug-based IDs`
- ``frontend/src/utils/citations.tsx` — parseCitations function that converts [N] and [N,M] markers to React elements with anchor links`
- ``frontend/src/App.css` — new styles for .technique-toc, .technique-prose__subsection, .citation-link, section scroll-margin-top`

## Verification

cd frontend && npm run build
