feat: Sprint 3 - SVG Lifecycle Timeline

- LifecycleTimeline.tsx: Full SVG-animated component
  - 6 stage nodes with connecting lines
  - Current stage pulsing animation w/ glow
  - Completed stages show checkmarks
  - Day tracking and harvest estimation
- LifecycleTimelineMini: Compact version for lists
- Updated PlantDataCard to use new component

frontend/src/components/facility3d/LifecycleTimeline.tsx

@@ -0,0 +1,239 @@
+import { useMemo } from 'react';
+
+// Growth stages in order
+export const LIFECYCLE_STAGES = [
+    { key: 'CLONE_IN', label: 'Clone', color: '#3b82f6', icon: '🌱' },
+    { key: 'VEGETATIVE', label: 'Veg', color: '#22c55e', icon: '🌿' },
+    { key: 'FLOWERING', label: 'Flower', color: '#a855f7', icon: '🌸' },
+    { key: 'DRYING', label: 'Dry', color: '#f97316', icon: '🍂' },
+    { key: 'CURING', label: 'Cure', color: '#92400e', icon: '🫙' },
+    { key: 'FINISHED', label: 'Done', color: '#6b7280', icon: '✓' },
+] as const;
+
+interface LifecycleTimelineProps {
+    currentStage?: string;
+    startDate?: Date;
+    stageHistory?: Array<{
+        stage: string;
+        enteredAt: Date;
+        exitedAt?: Date;
+    }>;
+    compact?: boolean;
+}
+
+export function LifecycleTimeline({
+    currentStage = 'VEGETATIVE',
+    startDate,
+    stageHistory,
+    compact = false
+}: LifecycleTimelineProps) {
+
+    // Find current stage index
+    const currentIndex = useMemo(() => {
+        const normalized = currentStage?.toUpperCase().replace(/ /g, '_');
+        const idx = LIFECYCLE_STAGES.findIndex(s => s.key === normalized);
+        return idx >= 0 ? idx : 1; // Default to VEG if not found
+    }, [currentStage]);
+
+    // Calculate days in current stage
+    const daysInStage = useMemo(() => {
+        if (!startDate) return Math.floor(Math.random() * 21) + 7; // Mock 7-28 days
+        return Math.floor((Date.now() - startDate.getTime()) / (1000 * 60 * 60 * 24));
+    }, [startDate]);
+
+    // Estimate total grow days and remaining
+    const totalDays = useMemo(() => {
+        // Typical grow times per stage
+        const typicalDays: Record<string, number> = {
+            CLONE_IN: 14,
+            VEGETATIVE: 28,
+            FLOWERING: 56,
+            DRYING: 10,
+            CURING: 21,
+            FINISHED: 0,
+        };
+
+        let total = 0;
+        for (let i = 0; i <= currentIndex; i++) {
+            total += typicalDays[LIFECYCLE_STAGES[i].key] || 14;
+        }
+        return total - typicalDays[LIFECYCLE_STAGES[currentIndex].key] + daysInStage;
+    }, [currentIndex, daysInStage]);
+
+    const estimatedHarvest = useMemo(() => {
+        // Estimate remaining days
+        const typicalDays: Record<string, number> = {
+            CLONE_IN: 14,
+            VEGETATIVE: 28,
+            FLOWERING: 56,
+            DRYING: 10,
+            CURING: 21,
+            FINISHED: 0,
+        };
+
+        let remaining = 0;
+        for (let i = currentIndex; i < LIFECYCLE_STAGES.length - 1; i++) {
+            const stageDays = typicalDays[LIFECYCLE_STAGES[i].key] || 14;
+            if (i === currentIndex) {
+                remaining += Math.max(0, stageDays - daysInStage);
+            } else {
+                remaining += stageDays;
+            }
+        }
+
+        const date = new Date(Date.now() + remaining * 24 * 60 * 60 * 1000);
+        return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+    }, [currentIndex, daysInStage]);
+
+    // SVG dimensions
+    const width = compact ? 200 : 260;
+    const height = compact ? 40 : 50;
+    const nodeRadius = compact ? 6 : 8;
+    const padding = 20;
+    const nodeSpacing = (width - padding * 2) / (LIFECYCLE_STAGES.length - 1);
+
+    return (
+        <div className="w-full">
+            {/* SVG Timeline */}
+            <svg
+                viewBox={`0 0 ${width} ${height}`}
+                className="w-full"
+                style={{ maxHeight: height }}
+            >
+                {/* Connecting lines */}
+                {LIFECYCLE_STAGES.map((stage, i) => {
+                    if (i === LIFECYCLE_STAGES.length - 1) return null;
+
+                    const x1 = padding + i * nodeSpacing;
+                    const x2 = padding + (i + 1) * nodeSpacing;
+                    const y = height / 2;
+
+                    const isCompleted = i < currentIndex;
+                    const isCurrent = i === currentIndex;
+
+                    return (
+                        <line
+                            key={`line-${i}`}
+                            x1={x1 + nodeRadius}
+                            y1={y}
+                            x2={x2 - nodeRadius}
+                            y2={y}
+                            stroke={isCompleted ? '#22c55e' : '#334155'}
+                            strokeWidth={2}
+                            strokeDasharray={isCompleted ? 'none' : '3,3'}
+                            className={isCurrent ? 'animate-pulse' : ''}
+                        />
+                    );
+                })}
+
+                {/* Stage nodes */}
+                {LIFECYCLE_STAGES.map((stage, i) => {
+                    const x = padding + i * nodeSpacing;
+                    const y = height / 2;
+
+                    const isCompleted = i < currentIndex;
+                    const isCurrent = i === currentIndex;
+                    const isFuture = i > currentIndex;
+
+                    return (
+                        <g key={stage.key}>
+                            {/* Outer ring for current stage */}
+                            {isCurrent && (
+                                <circle
+                                    cx={x}
+                                    cy={y}
+                                    r={nodeRadius + 4}
+                                    fill="none"
+                                    stroke="#22d3ee"
+                                    strokeWidth={2}
+                                    className="animate-ping"
+                                    style={{
+                                        animationDuration: '1.5s',
+                                        transformOrigin: `${x}px ${y}px`
+                                    }}
+                                />
+                            )}
+
+                            {/* Main node */}
+                            <circle
+                                cx={x}
+                                cy={y}
+                                r={nodeRadius}
+                                fill={isCompleted || isCurrent ? stage.color : 'transparent'}
+                                stroke={isFuture ? '#475569' : stage.color}
+                                strokeWidth={2}
+                                className={`transition-all duration-300 ${isCurrent ? 'drop-shadow-lg' : ''}`}
+                                style={isCurrent ? { filter: 'drop-shadow(0 0 6px rgba(34, 211, 238, 0.5))' } : {}}
+                            />
+
+                            {/* Check mark for completed */}
+                            {isCompleted && (
+                                <text
+                                    x={x}
+                                    y={y + 1}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                    fill="white"
+                                    fontSize={compact ? 8 : 10}
+                                    fontWeight="bold"
+                                >
+                                    ✓
+                                </text>
+                            )}
+
+                            {/* Stage label (below) */}
+                            {!compact && (
+                                <text
+                                    x={x}
+                                    y={y + nodeRadius + 12}
+                                    textAnchor="middle"
+                                    fill={isCurrent ? '#22d3ee' : isFuture ? '#64748b' : '#94a3b8'}
+                                    fontSize={8}
+                                    fontWeight={isCurrent ? 'bold' : 'normal'}
+                                >
+                                    {stage.label}
+                                </text>
+                            )}
+                        </g>
+                    );
+                })}
+            </svg>
+
+            {/* Day info */}
+            <div className={`flex justify-between items-center ${compact ? 'text-[9px]' : 'text-[10px]'} text-slate-400 mt-1`}>
+                <span>
+                    Day <span className="text-cyan-400 font-bold">{totalDays}</span>
+                    {' • '}
+                    <span className="text-slate-500">{daysInStage}d in {LIFECYCLE_STAGES[currentIndex]?.label}</span>
+                </span>
+                <span className="text-slate-500">
+                    Est. harvest: <span className="text-green-400">{estimatedHarvest}</span>
+                </span>
+            </div>
+        </div>
+    );
+}
+
+// Mini version for list views
+export function LifecycleTimelineMini({ currentStage }: { currentStage?: string }) {
+    const currentIndex = useMemo(() => {
+        const normalized = currentStage?.toUpperCase().replace(/ /g, '_');
+        const idx = LIFECYCLE_STAGES.findIndex(s => s.key === normalized);
+        return idx >= 0 ? idx : 1;
+    }, [currentStage]);
+
+    return (
+        <div className="flex items-center gap-0.5">
+            {LIFECYCLE_STAGES.map((stage, i) => (
+                <div
+                    key={stage.key}
+                    className={`w-2 h-2 rounded-full transition-all ${i < currentIndex ? 'bg-green-500' :
+                            i === currentIndex ? 'bg-cyan-400 ring-2 ring-cyan-400/30' :
+                                'bg-slate-700'
+                        }`}
+                    title={stage.label}
+                />
+            ))}
+        </div>
+    );
+}

frontend/src/components/facility3d/PlantDataCard.tsx

@@ -1,28 +1,12 @@
 import { X, MapPin, Leaf, Activity, Calendar } from 'lucide-react';
 import type { PlantPosition } from './types';
+import { LifecycleTimeline } from './LifecycleTimeline';
 
 interface PlantDataCardProps {
     plant: PlantPosition | null;
     onClose: () => void;
 }
 
-// Mock lifecycle data for demo
-const getMockLifecycle = (stage?: string) => {
-    const stages = ['CLONE_IN', 'VEGETATIVE', 'FLOWERING', 'DRYING', 'CURING', 'FINISHED'];
-    const currentIndex = stages.indexOf(stage || 'VEGETATIVE');
-
-    return {
-        stages: stages.map((s, i) => ({
-            name: s.replace('_', ' '),
-            completed: i < currentIndex,
-            current: i === currentIndex,
-            dayCount: i * 14 + Math.floor(Math.random() * 7),
-        })),
-        startDate: new Date(Date.now() - 45 * 24 * 60 * 60 * 1000), // 45 days ago
-        estimatedHarvest: new Date(Date.now() + 45 * 24 * 60 * 60 * 1000), // 45 days from now
-    };
-};
-
 // Mock vitals for demo
 const getMockVitals = () => ({
     health: 75 + Math.floor(Math.random() * 20),
@@ -34,7 +18,6 @@ const getMockVitals = () => ({
 export function PlantDataCard({ plant, onClose }: PlantDataCardProps) {
     if (!plant?.plant) return null;
 
-    const lifecycle = getMockLifecycle(plant.plant.stage ?? undefined);
     const vitals = getMockVitals();
 
     // Format position breadcrumb
@@ -76,45 +59,13 @@ export function PlantDataCard({ plant, onClose }: PlantDataCardProps) {
                 </div>
             </div>
 
-            {/* Lifecycle Timeline */}
+            {/* Lifecycle Timeline - Using new SVG component */}
             <div className="px-4 py-3 border-b border-slate-700/30">
                 <div className="text-xs text-slate-400 mb-2 flex items-center gap-1">
                     <Calendar className="w-3 h-3" />
                     LIFECYCLE
                 </div>
-                <div className="flex items-center justify-between mb-1">
+                <LifecycleTimeline currentStage={plant.plant.stage ?? undefined} />
-                    {lifecycle.stages.map((stage, i) => (
-                        <div
-                            key={stage.name}
-                            className="flex flex-col items-center"
-                        >
-                            <div
-                                className={`w-3 h-3 rounded-full border-2 transition-all ${stage.completed
-                                        ? 'bg-green-500 border-green-500'
-                                        : stage.current
-                                            ? 'bg-cyan-500 border-cyan-400 animate-pulse'
-                                            : 'bg-transparent border-slate-600'
-                                    }`}
-                            />
-                            {i < lifecycle.stages.length - 1 && (
-                                <div className={`absolute w-8 h-0.5 -right-4 top-1.5 ${stage.completed ? 'bg-green-500/50' : 'bg-slate-700'
-                                    }`} style={{ display: 'none' }} />
-                            )}
-                        </div>
-                    ))}
-                </div>
-                <div className="flex justify-between text-[8px] text-slate-500 uppercase">
-                    <span>Clone</span>
-                    <span>Veg</span>
-                    <span>Flower</span>
-                    <span>Dry</span>
-                    <span>Cure</span>
-                    <span>Done</span>
-                </div>
-                <div className="mt-2 text-[10px] text-slate-400">
-                    Day {lifecycle.stages.find(s => s.current)?.dayCount || 0} •
-                    Est. harvest: {lifecycle.estimatedHarvest.toLocaleDateString()}
-                </div>
             </div>
 
             {/* Vitals Grid */}