# 06. Results Dashboard with Dynamic Confidence and Top-5 Display

meta:
id: multi-image-user-feedback-06
feature: multi-image-user-feedback
priority: P1
depends_on: [multi-image-user-feedback-01, multi-image-user-feedback-04, multi-image-user-feedback-05]
tags: [ui, frontend, results]

objective:

- Enhance the results dashboard to display an info panel showing what data the user provided (1/2 images, species) and how it affected confidence.
- Show top-5 species/disease combination predictions as a compact card stack.
- Animate confidence transitions when the user lands on results.

deliverables:

- `src/components/ResultsDashboard.tsx` — updated dashboard
- `src/components/InfoProvidedBanner.tsx` — new component showing what info was used
- `src/components/TopCombinationsCard.tsx` — new component for top-5 species/disease combo list

steps:

1. Create `src/components/InfoProvidedBanner.tsx`:
   - Display a banner/panel at the top of results showing:
     - Number of images analyzed (1 or 2)
     - Whether user identified the plant species (yes/no, with species name if yes)
     - Icons/checkmarks for each piece of info
   - Show a compact breakdown: "You provided: 📸 2 images · 🌿 Species: Tomato"
   - Props: `{ numImages: number, userSpecies?: string | null }`
   - Style: subtle background, small text, positioned between page header and results
   - Animate in with a fade-slide effect

2. Create `src/components/TopCombinationsCard.tsx`:
   - Display the top-5 species/disease combination predictions from the API response
   - Each row: rank badge, disease name, plant name, confidence bar
   - Clicking a row expands it to show full disease info (reuses DiseaseCard internals)
   - Props: `{ predictions: TopPrediction[], onSelect: (diseaseId: string) => void }`
   - States:
     - Loading: skeleton rows
     - Empty: no combinations available
     - Error: graceful message
     - Populated: ranked list with horizontal confidence bars
   - Confidence bar: colored (green/amber/red) horizontal bar with percentage label
   - The top-5 is filterable: user can toggle between "All diseases" and "Constrained to your species" (when species was provided)

3. Update `src/components/ResultsDashboard.tsx`:
   - Accept new props: `numImages: number`, `infoProvided: string[]`, `userSpecies?: string`, `topCombinations?: TopPrediction[]`
   - Add `InfoProvidedBanner` at the top of the results area
   - Add `TopCombinationsCard` in the right sidebar (below image preview on desktop)
   - When `infoProvided` includes species, show a tag/badge: "Species identified: Tomato" with a lock icon (implying the results are constrained to that species)
   - When the response contains a species confidence, show a "How confidence changes with more info" mini-accordion:
     - "With 1 image: 65% confidence"
     - "With 2 images: 72% confidence"
     - "With 2 images + species: 88% confidence"
     - This educates the user on the value of providing more info

4. Animate confidence transitions:
   - When results load, confidence badges count up from 0 to their final percentage
   - Use CSS `@keyframes` for the count-up animation
   - Duration: ~600ms with ease-out curve
   - Only animate on initial load, not on re-renders

5. Handle edge cases:
   - No top combinations (no species match) → show message: "No common patterns found"
   - Single image, no species → hide the "how confidence changes" section (nothing to compare)
   - Single image with species → show comparison vs without species (estimate)
   - Demo mode → show realistic mock combos

tests:

- Unit: InfoProvidedBanner renders correct icons for 1/2 images and species presence
- Unit: TopCombinationsCard renders ranked list and toggles between constrained/all
- Unit: confidence count-up animation triggers on mount
- Integration: full results page with all new sections renders correctly

acceptance_criteria:

- InfoProvidedBanner shows how many images and whether species was identified
- TopCombinationsCard shows top-5 predictions with confidence bars
- Confidence values count up on page load
- When species info is available, a "how confidence changes" section is visible
- All existing results functionality (DiseaseCard, SymptomChecker, etc.) still works

validation:

- `npx tsc --noEmit` passes
- Manual test: navigate to results with 2 images + species → verify all UI sections
- Manual test: navigate with 1 image no species → verify simplified UI

notes:

- The top-5 combos come from the identify API response's `topSpeciesDisease` field
- Confidence comparison values are estimated when the model hasn't been run with/without the constraint — the API provides both constrained and unconstrained confidence