pre torch.compile -chkpoint made

tasks/multi-image-user-feedback/06-dynamic-results-dashboard.md

@@ -0,0 +1,94 @@
+# 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