Issue 10: Build diagnostic card UI component

[SriMed]

Description

The DiagnosticCard component renders after the user clicks Analyze. Two sections: Baseline Metrics (retrieval relevance, answer faithfulness) and Forensics (retrieval distribution, hedging mismatch, chunk attribution, confidence calibration).

The chunk attribution section is the most visually distinctive element: the generated answer rendered as sentence-by-sentence annotated text, each sentence color-coded by source chunk or flagged red if unattributed.

Implementation details

• components/DiagnosticCard.tsx
• Props: full AnalyzeResponse
• Show question and generated_answer at top before sections
• Two labeled sections with visual separation
• Each dimension: human-readable label, color-coded verdict badge (green/amber/red), explanation, evidence as styled blockquotes
• Chunk attribution: render attribution_map as annotated answer — consistent color per chunk_id, red highlight for unattributed, hover tooltip showing chunk_id + similarity score
• Overall summary banner reflecting worst verdict
• Tailwind only, no external component library

Acceptance criteria

• Question and generated answer display above sections
• Both section headers render
• pass → green badge, warn → amber, fail → red
• Attribution renders one element per sentence
• Unattributed sentences have red highlight
• Attributed sentences have consistent color per chunk_id
• Overall summary reflects worst verdict across all six
• Empty evidence array does not crash
• Readable at 320px minimum width

TDD

frontend/__tests__/DiagnosticCard.test.tsx:

1. Renders question and generated answer text
2. Both section headers present
3. pass → green badge class, warn → amber, fail → red
4. Attribution renders one element per sentence
5. Unattributed sentences have red highlight class
6. Summary says 'Issues detected' when any dimension is fail
7. Renders without crash when evidence is empty