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)

apps/web/src/components/DiseaseCard.tsx

@@ -0,0 +1,343 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import type { PredictionResult, CausalAgentType } from "@/lib/types";
+import ConfidenceBadge, { getConfidenceColors } from "@/components/ConfidenceBadge";
+import SymptomChecker from "@/components/SymptomChecker";
+import TreatmentTimeline, { treatmentStepsWithUrgency } from "@/components/TreatmentTimeline";
+import LookalikeWarning from "@/components/LookalikeWarning";
+import { getLookalikeDiseases } from "@/lib/api/diseases";
+
+/**
+ * Individual disease result card with expandable sections.
+ *
+ * Collapsed state: disease name, confidence badge, causal agent type icon, one-sentence summary.
+ * Expanded state: full description, symptom list, cause list, treatment timeline, prevention tips.
+ * Smooth expand/collapse animation.
+ * "Was this helpful?" feedback buttons at the bottom.
+ */
+export default function DiseaseCard({
+  prediction,
+  rank,
+  isPrimary,
+  onDismiss,
+}: {
+  prediction: PredictionResult;
+  rank: number;
+  isPrimary: boolean;
+  onDismiss?: () => void;
+}) {
+  const [expanded, setExpanded] = useState(isPrimary);
+  const [feedback, setFeedback] = useState<"yes" | "no" | null>(null);
+
+  const { disease, confidence } = prediction;
+  const colors = getConfidenceColors(confidence.label);
+  const lookalikes = getLookalikeDiseases(disease.id);
+
+  const toggleExpand = useCallback(() => {
+    setExpanded((e) => !e);
+  }, []);
+
+  // One-sentence summary (first sentence of description)
+  const summary = disease.description.split(".")[0] + ".";
+
+  return (
+    <article
+      className={`
+        group/card relative rounded-xl border-2 overflow-hidden transition-all duration-200
+        ${isPrimary
+          ? `${colors.border} ${colors.bg} shadow-md`
+          : "border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md"
+        }
+      `}
+    >
+      {/* Primary diagnosis ribbon */}
+      {isPrimary && (
+        <div className={`${colors.accent} text-white text-xs font-bold uppercase tracking-wider px-4 py-1.5 flex items-center gap-2`}>
+          <svg className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+          </svg>
+          Primary Diagnosis
+        </div>
+      )}
+
+      {/* Card header — clickable to expand/collapse */}
+      <button
+        type="button"
+        onClick={toggleExpand}
+        className="w-full px-4 pt-4 pb-2 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-leaf-green-500 focus-visible:ring-offset-2 rounded-t-xl"
+        aria-expanded={expanded}
+        aria-controls={`disease-card-body-${disease.id}`}
+      >
+        <div className="flex items-start gap-3">
+          {/* Rank / causal agent icon */}
+          <div className={`
+            flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-sm font-bold
+            ${isPrimary
+              ? `${colors.accent} text-white`
+              : "bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400"
+            }
+          `}>
+            {rank}
+          </div>
+
+          {/* Disease info */}
+          <div className="flex-1 min-w-0">
+            <div className="flex flex-wrap items-center gap-2">
+              <h3 className="text-base font-semibold text-zinc-900 dark:text-zinc-100">
+                {disease.name}
+              </h3>
+              <CausalAgentIcon type={disease.causalAgentType} />
+              <ConfidenceBadge confidence={confidence} />
+            </div>
+            <p className="mt-0.5 text-xs italic text-zinc-500 dark:text-zinc-400">
+              {disease.scientificName}
+            </p>
+            <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2">
+              {summary}
+            </p>
+          </div>
+
+          {/* Expand/collapse chevron */}
+          <svg
+            className={`h-5 w-5 shrink-0 text-zinc-400 transition-transform duration-200 ${expanded ? "rotate-180" : ""}`}
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path fillRule="evenodd" d="M5.22 7.22a.75.75 0 011.06 0L10 10.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 8.28a.75.75 0 010-1.06z" clipRule="evenodd" />
+          </svg>
+        </div>
+      </button>
+
+      {/* Card body — expandable content */}
+      <div
+        id={`disease-card-body-${disease.id}`}
+        className={`
+          overflow-hidden transition-all duration-300 ease-in-out
+          ${expanded ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0"}
+        `}
+      >
+        <div className="px-4 pb-4 space-y-5">
+          <hr className="border-zinc-200 dark:border-zinc-700" />
+
+          {/* Full description */}
+          <div>
+            <h4 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-1">
+              Description
+            </h4>
+            <p className="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
+              {disease.description}
+            </p>
+          </div>
+
+          {/* Symptom checker */}
+          <div>
+            <SymptomChecker symptoms={disease.symptoms} />
+          </div>
+
+          {/* Causes */}
+          <div>
+            <h4 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-2 flex items-center gap-2">
+              <svg className="h-4 w-4 text-zinc-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
+              </svg>
+              Causes & Contributing Factors
+            </h4>
+            <ul className="space-y-1.5" role="list">
+              {disease.causes.map((cause, i) => (
+                <li key={i} className="flex items-start gap-2">
+                  <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-zinc-400 dark:bg-zinc-500" />
+                  <span className="text-sm text-zinc-600 dark:text-zinc-400">{cause}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Treatment timeline */}
+          <div>
+            <h4 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-2 flex items-center gap-2">
+              <svg className="h-4 w-4 text-leaf-green-600 dark:text-leaf-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clipRule="evenodd" />
+              </svg>
+              Treatment Plan
+            </h4>
+            <TreatmentTimeline
+              steps={treatmentStepsWithUrgency(disease.treatment)}
+              severity={disease.severity}
+            />
+          </div>
+
+          {/* Prevention tips */}
+          <div>
+            <h4 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-2 flex items-center gap-2">
+              <svg className="h-4 w-4 text-leaf-green-600 dark:text-leaf-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fillRule="evenodd" d="M6.32 2.577a49.255 49.255 0 0111.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 01-1.085.67L10 18.089l-9.165 3.583A.75.75 0 010 21V5.507c0-1.47 1.073-2.756 2.57-2.93a49.254 49.254 0 0111.36 0zM12 9a2 2 0 11-4 0 2 2 0 014 0zm-2 3a1 1 0 00-1 1v1a1 1 0 001 1h0a1 1 0 001-1v-1a1 1 0 00-1-1z" clipRule="evenodd" />
+              </svg>
+              Prevention Tips
+            </h4>
+            <ul className="space-y-1.5" role="list">
+              {disease.prevention.map((tip, i) => (
+                <li key={i} className="flex items-start gap-2">
+                  <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-leaf-green-500" />
+                  <span className="text-sm text-zinc-600 dark:text-zinc-400">{tip}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Lookalike warnings */}
+          {lookalikes.length > 0 && (
+            <LookalikeWarning disease={disease} lookalikes={lookalikes} />
+          )}
+
+          {/* Feedback buttons */}
+          <div className="pt-2 border-t border-zinc-200 dark:border-zinc-700">
+            <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-2">
+              Was this diagnosis helpful?
+            </p>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => setFeedback("yes")}
+                className={`
+                  inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium
+                  transition-colors
+                  ${feedback === "yes"
+                    ? "bg-leaf-green-100 dark:bg-leaf-green-900/50 text-leaf-green-700 dark:text-leaf-green-300 ring-1 ring-leaf-green-300 dark:ring-leaf-green-700"
+                    : "bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700"
+                  }
+                `}
+                aria-pressed={feedback === "yes"}
+              >
+                <svg className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
+                </svg>
+                Yes
+              </button>
+              <button
+                type="button"
+                onClick={() => setFeedback("no")}
+                className={`
+                  inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium
+                  transition-colors
+                  ${feedback === "no"
+                    ? "bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300 ring-1 ring-red-300 dark:ring-red-700"
+                    : "bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700"
+                  }
+                `}
+                aria-pressed={feedback === "no"}
+              >
+                <svg className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path d="M18 10.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 10.667V5.236a2 2 0 00-1.105-1.795l-.05-.025A4 4 0 0011.057 2H5.641a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z" />
+                </svg>
+                No
+              </button>
+              {feedback && (
+                <span className="text-xs text-zinc-400 dark:text-zinc-500 ml-2">
+                  Thanks for your feedback!
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Dismiss button (top-right corner, visible on hover) */}
+      {onDismiss && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="absolute top-3 right-3 z-10 rounded-lg p-1 text-zinc-400 opacity-0 transition-opacity hover:text-zinc-600 dark:hover:text-zinc-300 group-hover/card:opacity-100"
+          aria-label="Dismiss this result"
+        >
+          <svg className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+          </svg>
+        </button>
+      )}
+    </article>
+  );
+}
+
+/**
+ * Causal agent type icon — shows a small icon based on disease type.
+ */
+function CausalAgentIcon({ type }: { type: CausalAgentType }) {
+  const config = getCausalAgentConfig(type);
+
+  return (
+    <span
+      className={`
+        inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium
+        ${config.bg} ${config.text}
+      `}
+      title={`${config.label} disease`}
+    >
+      {config.icon}
+      <span className="hidden sm:inline">{config.label}</span>
+    </span>
+  );
+}
+
+interface CausalAgentConfig {
+  label: string;
+  bg: string;
+  text: string;
+  icon: React.ReactNode;
+}
+
+function getCausalAgentConfig(type: CausalAgentType): CausalAgentConfig {
+  switch (type) {
+    case "fungal":
+      return {
+        label: "Fungal",
+        bg: "bg-purple-100 dark:bg-purple-900/50",
+        text: "text-purple-700 dark:text-purple-300",
+        icon: (
+          <svg className="h-3 w-3" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <circle cx="8" cy="6" r="3" />
+            <circle cx="5" cy="10" r="2" />
+            <circle cx="11" cy="10" r="2" />
+          </svg>
+        ),
+      };
+    case "bacterial":
+      return {
+        label: "Bacterial",
+        bg: "bg-blue-100 dark:bg-blue-900/50",
+        text: "text-blue-700 dark:text-blue-300",
+        icon: (
+          <svg className="h-3 w-3" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <ellipse cx="8" cy="8" rx="5" ry="2.5" />
+          </svg>
+        ),
+      };
+    case "viral":
+      return {
+        label: "Viral",
+        bg: "bg-pink-100 dark:bg-pink-900/50",
+        text: "text-pink-700 dark:text-pink-300",
+        icon: (
+          <svg className="h-3 w-3" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <circle cx="8" cy="8" r="2.5" />
+            <line x1="8" y1="1" x2="8" y2="4" stroke="currentColor" strokeWidth="1" />
+            <line x1="8" y1="12" x2="8" y2="15" stroke="currentColor" strokeWidth="1" />
+            <line x1="1" y1="8" x2="4" y2="8" stroke="currentColor" strokeWidth="1" />
+            <line x1="12" y1="8" x2="15" y2="8" stroke="currentColor" strokeWidth="1" />
+          </svg>
+        ),
+      };
+    case "environmental":
+      return {
+        label: "Environmental",
+        bg: "bg-orange-100 dark:bg-orange-900/50",
+        text: "text-orange-700 dark:text-orange-300",
+        icon: (
+          <svg className="h-3 w-3" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <path d="M8 1a7 7 0 100 14A7 7 0 008 1zm0 2a1 1 0 011 1v2a1 1 0 01-2 0V4a1 1 0 011-1z" />
+          </svg>
+        ),
+      };
+  }
+}