Initial commit: Plant Disease Identification app

- Next.js 16 App Router project with Tailwind CSS
- Plant disease knowledge base (93 diseases, 25 plants)
- Image upload with client+server preprocessing
- ML inference pipeline with mock/demo fallback
- Responsive results page with disease cards and treatment
- Full test suite (285 passing tests)

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

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