plant-disease-id/tasks/hyper-specific-plant-disease-id/05-identification-results-page.md

05. Results Page with Disease Cards, Symptom Comparison, and Treatment Steps

meta: id: hyper-specific-plant-disease-id-05 feature: hyper-specific-plant-disease-id priority: P1 depends_on: [hyper-specific-plant-disease-id-04] tags: [frontend, results-page, ui]

objective:

• Build the main identification results page that displays ranked disease predictions as rich, actionable cards — each showing confidence, symptoms, cause, treatment steps, and lookalike comparisons.

deliverables:

• app/results/[imageId]/page.tsx — results page route (takes imageId from URL param)
• components/ResultsDashboard.tsx — top-level results layout: uploaded image preview + ranked prediction cards
• components/DiseaseCard.tsx — individual disease result card with expandable sections
• components/ConfidenceBadge.tsx — color-coded confidence indicator (green=high, amber=medium, red=low)
• components/SymptomChecker.tsx — visual symptom checklist with severity indicators
• components/TreatmentTimeline.tsx — ordered treatment steps with urgency tags
• components/LookalikeWarning.tsx — warning banner when lookalike diseases exist, with side-by-side comparison toggle
• lib/api/identify.ts — (already created in task 04, extend if needed)

steps:

1. Create app/results/[imageId]/page.tsx:
   • Server Component that fetches identification results via API (or accepts them as passed data from the upload flow).
   • Layout: side-by-side on desktop (image left, results right), stacked on mobile.
   • Loading skeleton state while results are computed.
   • Error state if identification fails.
   • Empty/unexpected state.
2. Build components/ResultsDashboard.tsx:
   • Top section: uploaded image thumbnail with metadata (imageId, upload time).
   • Sortable/dismissible list of DiseaseCard components.
   • Primary diagnosis highlighted with a prominent blue/green border.
   • Secondary alternatives shown with equal weight below.
3. Build components/DiseaseCard.tsx:
   • Collapsed state: disease name, confidence badge, causal agent type icon, one-sentence summary.
   • Expanded state: full description, symptom list (from SymptomChecker), cause list, treatment timeline, prevention tips.
   • Smooth expand/collapse animation.
   • "Was this helpful?" feedback buttons at the bottom (UI only, no backend).
4. Build components/ConfidenceBadge.tsx:
   • Pill-shaped badge: green background + checkmark for ≥0.8, amber + warning for ≥0.5, red + exclamation for <0.5.
   • Shows percentage (e.g., "87% confidence").
   • Hover tooltip explains confidence interpretation.
5. Build components/SymptomChecker.tsx:
   • For the predicted disease, show a list of common symptoms with checkboxes.
   • User can check which symptoms they observe on their plant.
   • A match counter shows "3 of 5 symptoms match".
   • Helps user confirm/reject the diagnosis.
6. Build components/TreatmentTimeline.tsx:
   • Ordered card showing immediate, short-term, and long-term treatment steps.
   • Each step has: action text, urgency badge (immediate/within week/ongoing), optional photo reference link.
   • "Treatments may vary" disclaimer at bottom.
7. Build components/LookalikeWarning.tsx:
   • Yellow banner: "This disease is easily confused with [lookalike name]."
   • Click to expand side-by-side symptom comparison table.
   • Comparison table columns: symptom, this disease, lookalike disease.
   • Links to lookalike disease detail.
8. Add app/results/page.tsx redirect — if someone navigates directly without an imageId, redirect to homepage.

tests:

• Unit: ConfidenceBadge renders correct color for high/medium/low thresholds.
• Unit: DiseaseCard expands and collapses on click.
• Unit: SymptomChecker counter updates when toggling checkboxes.
• Integration: Navigate to /results/{valid-imageId} → page renders with ≥1 disease card.
• Integration: Navigate to /results/invalid-id → shows error state.
• Integration: LookalikeWarning appears when prediction includes lookalike field.
• Visual: All components render correctly at 375px, 768px, and 1280px widths.

acceptance_criteria:

• Results page renders within 1 second after identification API responds.
• Primary diagnosis is visually distinguished from alternatives.
• Each disease card expands to show full symptoms, causes, and treatment.
• Symptom checker lets user confirm/reject diagnosis interactively.
• Lookalike warnings appear when applicable with side-by-side comparison.
• Confidence badges use correct colors and labels.
• Page works on mobile (stacked layout) and desktop (side-by-side).
• Loading skeleton and error states are handled.

validation:

• Upload a plant photo → results page loads with disease cards.
• Click "expand" on a disease card → symptoms, causes, treatment sections appear.
• Toggle symptom checkboxes → match counter updates.
• Lookalike warning shows for easily confused diseases.
• Resize browser to mobile width → layout stacks vertically.
• Navigate to /results/unknown → error message with "Try again" button.

notes:

• The results page receives the identification payload either via router params (server-rendered) or client-side fetch after upload.
• For Vercel deployment, prefer client-side fetch to avoid serverless function timeouts on long inference.
• All text content is server-rendered where possible for SEO on disease information pages.