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/TreatmentTimeline.test.tsx

@@ -0,0 +1,120 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import TreatmentTimeline, { treatmentStepsWithUrgency, type TreatmentStep } from "@/components/TreatmentTimeline";
+
+describe("TreatmentTimeline", () => {
+  const mockSteps: TreatmentStep[] = [
+    { action: "Remove and destroy all severely infected leaves immediately", urgency: "immediate" },
+    { action: "Apply copper-based fungicide spray every 7-10 days", urgency: "within-week" },
+    { action: "Improve air circulation by pruning lower leaves", urgency: "ongoing" },
+    { action: "Mulch around base with 2-3 inches of straw", urgency: "ongoing" },
+    { action: "Switch to drip irrigation to keep foliage dry", urgency: "ongoing" },
+  ];
+
+  function renderTimeline(steps: TreatmentStep[]) {
+    return render(<TreatmentTimeline steps={steps} />);
+  }
+
+  describe("renders all treatment steps", () => {
+    it("shows all step actions", () => {
+      renderTimeline(mockSteps);
+      mockSteps.forEach((step) => {
+        expect(screen.getByText(step.action)).toBeInTheDocument();
+      });
+    });
+
+    it("shows numbered step indicators", () => {
+      renderTimeline(mockSteps);
+      for (let i = 1; i <= mockSteps.length; i++) {
+        expect(screen.getByText(i.toString())).toBeInTheDocument();
+      }
+    });
+
+    it("shows urgency badges for each step", () => {
+      renderTimeline(mockSteps);
+      expect(screen.getByText("Immediate")).toBeInTheDocument();
+      expect(screen.getByText("Within a week")).toBeInTheDocument();
+      expect(screen.getAllByText("Ongoing").length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("urgency levels", () => {
+    it("renders immediate urgency with red styling", () => {
+      renderTimeline(mockSteps);
+      const immediateBadge = screen.getByText("Immediate");
+      expect(immediateBadge.closest("span")).toHaveClass("bg-red-100");
+    });
+
+    it("renders within-week urgency with amber styling", () => {
+      renderTimeline(mockSteps);
+      const weekBadge = screen.getByText("Within a week");
+      expect(weekBadge.closest("span")).toHaveClass("bg-warning-amber-100");
+    });
+
+    it("renders ongoing urgency with green styling", () => {
+      renderTimeline(mockSteps);
+      const ongoingBadges = screen.getAllByText("Ongoing");
+      expect(ongoingBadges.length).toBeGreaterThan(0);
+      expect(ongoingBadges[0].closest("span")).toHaveClass("bg-leaf-green-100");
+    });
+  });
+
+  describe("disclaimer", () => {
+    it("shows treatment disclaimer at bottom", () => {
+      renderTimeline(mockSteps);
+      expect(screen.getByText(/Treatments may vary depending on plant species/)).toBeInTheDocument();
+    });
+  });
+
+  describe("empty state", () => {
+    it("shows message when no steps provided", () => {
+      renderTimeline([]);
+      expect(screen.getByText("No treatment steps available.")).toBeInTheDocument();
+    });
+  });
+
+  describe("timeline connectors", () => {
+    it("shows connector lines between steps", () => {
+      renderTimeline(mockSteps);
+      // There should be N-1 connector lines
+      const connectors = document.querySelectorAll('.bg-zinc-200.dark\\:bg-zinc-700');
+      // At least some connectors should exist for multi-step timelines
+      expect(connectors.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("treatmentStepsWithUrgency helper", () => {
+    it("maps first step to immediate", () => {
+      const steps = treatmentStepsWithUrgency(["Step 1", "Step 2", "Step 3"]);
+      expect(steps[0].urgency).toBe("immediate");
+    });
+
+    it("maps second step to within-week", () => {
+      const steps = treatmentStepsWithUrgency(["Step 1", "Step 2", "Step 3"]);
+      expect(steps[1].urgency).toBe("within-week");
+    });
+
+    it("maps remaining steps to ongoing", () => {
+      const steps = treatmentStepsWithUrgency(["Step 1", "Step 2", "Step 3", "Step 4"]);
+      expect(steps[2].urgency).toBe("ongoing");
+      expect(steps[3].urgency).toBe("ongoing");
+    });
+
+    it("preserves action text", () => {
+      const actions = ["Remove leaves", "Apply fungicide", "Improve circulation"];
+      const steps = treatmentStepsWithUrgency(actions);
+      expect(steps.map((s) => s.action)).toEqual(actions);
+    });
+
+    it("handles single step", () => {
+      const steps = treatmentStepsWithUrgency(["Only step"]);
+      expect(steps).toHaveLength(1);
+      expect(steps[0].urgency).toBe("immediate");
+    });
+
+    it("handles empty array", () => {
+      const steps = treatmentStepsWithUrgency([]);
+      expect(steps).toHaveLength(0);
+    });
+  });
+});