# 07. Post-Diagnosis Feedback Component (Accuracy / Unsure / Store Consent)

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

objective:

- Create a feedback panel that appears after the diagnosis results, asking the user to rate accuracy (✓ / ✗ / ?) and optionally consent to storing their images for model retraining.

deliverables:

- `src/components/PostDiagnosisFeedback.tsx` — new feedback component
- `src/components/ResultsDashboard.tsx` — updated to include feedback panel

steps:

1. Create `src/components/PostDiagnosisFeedback.tsx`:

   Component structure (vertically stacked in a card):

   ```
   ┌─────────────────────────────────────────────┐
   │  💬 How accurate was this diagnosis?         │
   │                                              │
   │  [ ✅ Correct ] [ ❌ Incorrect ] [ ❓ Unsure ] │
   │                                              │
   │  ── (if Incorrect or Unsure selected) ──     │
   │  What did you expect? (optional)              │
   │  [_____________________________] text input  │
   │                                              │
   │  ──────────────────────────────────────────── │
   │                                              │
   │  ☐ Allow us to store these images to         │
   │    improve future diagnoses?                  │
   │  (Your privacy matters — images stored         │
   │   securely and never shared)                  │
   │                                              │
   │  [ Submit Feedback ] → sent to /api/feedback  │
   │                                              │
   │  ───── (after submission) ─────              │
   │  ✓ Thank you! Your feedback helps us improve. │
   └─────────────────────────────────────────────┘
   ```

   Props: `{ sessionId: string, imageIds: string[], predictedDiseaseId: string, userSpecies?: string, modelVersion: string, onSubmit?: () => void }`

   States:
   - **Pending**: not yet rated, three large buttons (✓/✗/?)
   - **Rated**: accuracy selected, showing optional text input + consent checkbox
   - **Submitting**: loading spinner on submit button
   - **Submitted**: success message with thank-you text
   - **Error**: submission failed, retry button

   Implementation details:
   - Accuracy buttons are large and touch-friendly (min 48px tap target)
   - Selected button fills with its color: green (✓), red (✗), amber (?)
   - Text input is an optional free-text field for user comments
   - Consent checkbox has a brief privacy notice below it
   - Submit button disabled until accuracy is rated
   - On submit, POST to `/api/feedback` with `DiagnosisFeedback` body
   - Animated transitions between states

2. Update `src/components/ResultsDashboard.tsx`:
   - Import and render `PostDiagnosisFeedback` at the bottom of the results area
   - Pass sessionId (generated from first imageId), imageIds, predictedDiseaseId, userSpecies
   - Show feedback panel after all prediction cards
   - If no predictions at all, still show feedback (they may want to tell us the model was wrong)

3. Handle edge cases:
   - Feedback submission fails → show inline error with retry
   - User refreshes page → already-submitted state persists if submission completed (could use sessionStorage)
   - Consent unchecked → still submit feedback (just with consent=false)
   - No predictions returned → show feedback anyway with "No disease identified" context

tests:

- Unit: all four states render correctly (pending/rated/submitting/submitted)
- Unit: accuracy selection toggles correctly (only one selected at a time)
- Unit: submit button disabled until accuracy is rated
- Unit: consent checkbox unchecked by default
- Unit: text input only shown when accuracy is "incorrect" or "unsure"
- Unit: submission calls /api/feedback with correct payload shape
- Integration: feedback flow from rating to submission to success

acceptance_criteria:

- Three accuracy rating buttons are always visible after results
- Rating is required before submission
- Optional text input appears for "Incorrect" or "Unsure" ratings
- Consent checkbox allows opting in to image storage
- Submit sends correct payload to /api/feedback
- Success message shown after submission
- Error state with retry if submission fails

validation:

- `npx tsc --noEmit` passes
- Manual test: rate accuracy, type notes, toggle consent, submit
- Manual test: verify API receives correct data
- A11y: verify all interactive elements have accessible labels

notes:

- The `sessionId` ties together upload → identify → feedback for the same session
- Privacy notice text should be reviewed for legal compliance
- Consider adding a "Share with the community" option in a future iteration
- Debounce the submit button to prevent double-submission