[V0_FILE]typescriptreact:file="components/vitals-dashboard.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" interface VitalsDashboardProps { isStreaming: boolean } export function VitalsDashboard({ isStreaming }: VitalsDashboardProps) { const [heartRateData, setHeartRateData] = useState([]) const [spo2Data, setSpo2Data] = useState([]) const [tempData, setTempData] = useState([]) useEffect(() => { if (!isStreaming) { setHeartRateData(generateBaselineData(72, 78, 0.5)) setSpo2Data(generateBaselineData(98, 99.5, 0.2)) setTempData(generateBaselineData(36.8, 37.0, 0.1)) return } const interval = setInterval(() => { setHeartRateData((prev) => { const newData = [ ...prev, { time: new Date().toLocaleTimeString("en-US", { hour12: false }).slice(3, 8), value: Math.floor(Math.random() * (85 - 65) + 65), }, ] return newData.slice(-20) }) setSpo2Data((prev) => { const newData = [ ...prev, { time: new Date().toLocaleTimeString("en-US", { hour12: false }).slice(3, 8), value: (Math.random() * (99.5 - 97.5) + 97.5).toFixed(1), }, ] return newData.slice(-20) }) setTempData((prev) => { const newData = [ ...prev, { time: new Date().toLocaleTimeString("en-US", { hour12: false }).slice(3, 8), value: (Math.random() * (37.5 - 36.5) + 36.5).toFixed(1), }, ] return newData.slice(-20) }) }, 1500) return () => clearInterval(interval) }, [isStreaming]) return (

{/* Heart Rate */} Heart Rate BPM

72bpm

0 ? heartRateData : generateBaselineData(72, 78, 0.5)}>

{/* SpO2 */} Blood Oxygen SpO₂ %

98.5%

0 ? spo2Data : generateBaselineData(98, 99.5, 0.2)}>

{/* Temperature */} Temperature °C

36.9°

0 ? tempData : generateBaselineData(36.8, 37.0, 0.1)}>

) } function generateBaselineData(min: number, max: number, variance: number) { return Array.from({ length: 15 }, (_, i) => ({ time: `${String(i).padStart(2, "0")}:00`, value: (Math.random() * (max - min) + min + (Math.random() - 0.5) * variance).toFixed(1), })) } [V0_FILE]typescriptreact:file="components/patient-card.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Activity, Cloud } from "lucide-react" interface PatientCardProps { isStreaming: boolean } export function PatientCard({ isStreaming }: PatientCardProps) { return (

Patient Information {isStreaming ? "Connected" : "Idle"} {/* Avatar */}

{/* Patient Details */}

Name John Davis

Age 58 years

ID PAT-2024-0847

Risk Level Medium

Last Sync: {isStreaming ? "Now" : "2m ago"}

Data Points: {isStreaming ? "Real-time" : "1,847"}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "VitalSync - IoT Health Monitoring", description: "Real-time vital sign monitoring with AI anomaly detection", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/event-log.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { AlertCircle, Wifi, TrendingUp } from "lucide-react" interface Event { id: string type: string message: string time: string } interface EventLogProps { events: Event[] } export function EventLog({ events }: EventLogProps) { const getEventIcon = (type: string) => { switch (type) { case "anomaly": return case "connection": return case "sync": return default: return } } return ( Event Log Real-time activity stream

{events.length === 0 ? (

No events yet

) : ( events .slice() .reverse() .map((event) => (

{getEventIcon(event.type)}

{event.message}

{event.time}

)) )}

) } [V0_FILE]typescriptreact:file="components/ai-alert-modal.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Card } from "@/components/ui/card" import { AlertTriangle, MapPin, Phone } from "lucide-react" interface AIAlertModalProps { isOpen: boolean onClose: () => void } export function AIAlertModal({ isOpen, onClose }: AIAlertModalProps) { const [displayConfidence, setDisplayConfidence] = useState(0) useEffect(() => { if (isOpen) { let current = 0 const interval = setInterval(() => { current += 2 if (current <= 94) { setDisplayConfidence(current) } else { clearInterval(interval) setDisplayConfidence(94) } }, 30) return () => clearInterval(interval) } }, [isOpen]) if (!isOpen) return null return (

{/* Header with pulsing icon */}

Critical Alert

Pre-stroke Pattern Detected

{/* Confidence Score */}

AI Confidence Score {displayConfidence.toFixed(0)}%

{/* Alert Details */}

Abnormal Patterns: Elevated heart rate (125 BPM), fluctuating SpO₂ (95%), slight temperature elevation

{/* Action Buttons */}

{/* GPS Info */}

📍 Patient Location: 40.7128°N, 74.0060°W

🏥 Nearest Hospital: 1.2 km (5 min)

) } [V0_FILE]typescriptreact:file="components/map-view.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { MapPin } from "lucide-react" interface MapViewProps { isActive: boolean } export function MapView({ isActive }: MapViewProps) { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas size canvas.width = canvas.offsetWidth canvas.height = canvas.offsetHeight // Draw map background with gradient const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height) gradient.addColorStop(0, "rgba(20, 30, 60, 0.8)") gradient.addColorStop(1, "rgba(30, 20, 60, 0.8)") ctx.fillStyle = gradient ctx.fillRect(0, 0, canvas.width, canvas.height) // Draw grid ctx.strokeStyle = "rgba(100, 150, 255, 0.1)" ctx.lineWidth = 1 const gridSize = 40 for (let x = 0; x < canvas.width; x += gridSize) { ctx.beginPath() ctx.moveTo(x, 0) ctx.lineTo(x, canvas.height) ctx.stroke() } for (let y = 0; y < canvas.height; y += gridSize) { ctx.beginPath() ctx.moveTo(0, y) ctx.lineTo(canvas.width, y) ctx.stroke() } // Draw patient location (center with pulsing marker) const centerX = canvas.width / 2 const centerY = canvas.height / 2 const time = Date.now() / 1000 const pulse = Math.sin(time * 2) * 0.5 + 0.5 // Outer glow ctx.fillStyle = `rgba(100, 150, 255, ${0.3 * pulse})` ctx.beginPath() ctx.arc(centerX, centerY, 20 + pulse * 10, 0, Math.PI * 2) ctx.fill() // Main marker ctx.fillStyle = "rgb(100, 200, 255)" ctx.beginPath() ctx.arc(centerX, centerY, 12, 0, Math.PI * 2) ctx.fill() // Marker border ctx.strokeStyle = "rgb(200, 230, 255)" ctx.lineWidth = 2 ctx.beginPath() ctx.arc(centerX, centerY, 12, 0, Math.PI * 2) ctx.stroke() // Draw hospitals const hospitals = [ { x: centerX - 80, y: centerY - 60, distance: 1.2 }, { x: centerX + 100, y: centerY + 40, distance: 2.1 }, { x: centerX - 40, y: centerY + 80, distance: 2.8 }, ] hospitals.forEach((hospital, idx) => { // Hospital marker ctx.fillStyle = "rgba(255, 100, 100, 0.8)" ctx.fillRect(hospital.x - 8, hospital.y - 8, 16, 16) // Hospital symbol (cross) ctx.strokeStyle = "white" ctx.lineWidth = 2 ctx.beginPath() ctx.moveTo(hospital.x, hospital.y - 4) ctx.lineTo(hospital.x, hospital.y + 4) ctx.moveTo(hospital.x - 4, hospital.y) ctx.lineTo(hospital.x + 4, hospital.y) ctx.stroke() // Distance line ctx.strokeStyle = "rgba(100, 150, 255, 0.3)" ctx.lineWidth = 1 ctx.setLineDash([5, 5]) ctx.beginPath() ctx.moveTo(centerX, centerY) ctx.lineTo(hospital.x, hospital.y) ctx.stroke() ctx.setLineDash([]) }) const animationFrame = requestAnimationFrame(() => {}) }, []) return ( Location & Hospitals Patient position and nearby facilities

) } [V0_FILE]typescriptreact:file="components/wearable-graphic.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import { Card } from "@/components/ui/card" interface WearableGraphicProps { isAlert: boolean isStreaming: boolean } export function WearableGraphic({ isAlert, isStreaming }: WearableGraphicProps) { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return let animationId: number const animate = () => { canvas.width = canvas.offsetWidth canvas.height = canvas.offsetHeight const centerX = canvas.width / 2 const centerY = canvas.height / 2 const time = Date.now() / 1000 // Background gradient const bgGradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 100) bgGradient.addColorStop(0, "rgba(100, 150, 255, 0.1)") bgGradient.addColorStop(1, "rgba(50, 80, 150, 0.05)") ctx.fillStyle = bgGradient ctx.fillRect(0, 0, canvas.width, canvas.height) // Draw smartwatch body ctx.fillStyle = isAlert ? "rgba(255, 100, 100, 0.2)" : "rgba(100, 150, 255, 0.15)" ctx.beginPath() ctx.roundRect(centerX - 40, centerY - 50, 80, 100, [15, 15, 15, 15]) ctx.fill() // Watch border ctx.strokeStyle = isAlert ? "rgba(255, 100, 100, 0.6)" : "rgba(100, 200, 255, 0.6)" ctx.lineWidth = 2 ctx.beginPath() ctx.roundRect(centerX - 40, centerY - 50, 80, 100, [15, 15, 15, 15]) ctx.stroke() // Watch display ctx.fillStyle = isAlert ? "rgba(20, 10, 10, 0.8)" : "rgba(10, 20, 40, 0.8)" ctx.beginPath() ctx.roundRect(centerX - 32, centerY - 40, 64, 70, [8, 8, 8, 8]) ctx.fill() // Pulsing heart animation const heartbeat = Math.sin(time * 2) * 0.5 + 1 const pulseSize = 15 * heartbeat // Heart glow ctx.fillStyle = isAlert ? `rgba(255, 100, 100, ${0.3 * heartbeat})` : `rgba(100, 200, 255, ${0.3 * heartbeat})` ctx.beginPath() ctx.arc(centerX, centerY, pulseSize, 0, Math.PI * 2) ctx.fill() // Heart beat pulse lines for (let i = 0; i < 3; i++) { ctx.strokeStyle = isAlert ? `rgba(255, 100, 100, ${0.4 - i * 0.15})` : `rgba(100, 200, 255, ${0.4 - i * 0.15})` ctx.lineWidth = 1 ctx.beginPath() ctx.arc(centerX, centerY, pulseSize + i * 5, 0, Math.PI * 2) ctx.stroke() } // Heart symbol ctx.fillStyle = isAlert ? "rgb(255, 100, 100)" : "rgb(100, 200, 255)" const heartX = centerX const heartY = centerY const size = 5 // Simple heart shape ctx.beginPath() ctx.moveTo(heartX, heartY + size) ctx.bezierCurveTo( heartX - size, heartY - size / 2, heartX - size * 1.5, heartY - size / 2, heartX - size * 1.5, heartY - size, ) ctx.bezierCurveTo(heartX - size * 1.5, heartY - size * 1.5, heartX, heartY, heartX, heartY + size * 2) ctx.bezierCurveTo(heartX, heartY, heartX + size * 1.5, heartY - size * 1.5, heartX + size * 1.5, heartY - size) ctx.bezierCurveTo(heartX + size * 1.5, heartY - size / 2, heartX + size, heartY - size / 2, heartX, heartY + size) ctx.fill() // BPM text ctx.fillStyle = isAlert ? "rgb(255, 100, 100)" : "rgb(100, 200, 255)" ctx.font = "bold 14px sans-serif" ctx.textAlign = "center" ctx.fillText(isStreaming ? "125" : "72", centerX, centerY + 35) ctx.font = "10px sans-serif" ctx.fillText("BPM", centerX, centerY + 50) animationId = requestAnimationFrame(animate) } animate() return () => cancelAnimationFrame(animationId) }, [isAlert, isStreaming]) return (

Wearable Device

Real-time Monitoring

) } [V0_FILE]typescriptreact:file="components/doctor-character.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import { Card } from "@/components/ui/card" interface DoctorCharacterProps { isAlert: boolean } export function DoctorCharacter({ isAlert }: DoctorCharacterProps) { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return let animationId: number const animate = () => { canvas.width = canvas.offsetWidth canvas.height = canvas.offsetHeight const centerX = canvas.width / 2 const centerY = canvas.height / 2 const time = Date.now() / 1000 // Background const bgGradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height) bgGradient.addColorStop(0, "rgba(50, 80, 150, 0.1)") bgGradient.addColorStop(1, "rgba(100, 80, 150, 0.05)") ctx.fillStyle = bgGradient ctx.fillRect(0, 0, canvas.width, canvas.height) // Doctor figure const headY = centerY - 30 const bodyY = centerY + 10 // Head ctx.fillStyle = "rgb(200, 150, 100)" ctx.beginPath() ctx.arc(centerX, headY, 15, 0, Math.PI * 2) ctx.fill() // Hat/stethoscope holder ctx.fillStyle = isAlert ? "rgb(255, 100, 100)" : "rgb(100, 150, 255)" ctx.fillRect(centerX - 20, headY - 18, 40, 6) // Eyes ctx.fillStyle = "rgb(40, 40, 40)" ctx.beginPath() ctx.arc(centerX - 5, headY - 2, 2, 0, Math.PI * 2) ctx.fill() ctx.beginPath() ctx.arc(centerX + 5, headY - 2, 2, 0, Math.PI * 2) ctx.fill() // Smile ctx.strokeStyle = "rgb(40, 40, 40)" ctx.lineWidth = 1.5 ctx.beginPath() ctx.arc(centerX, headY + 2, 4, 0, Math.PI, false) ctx.stroke() // Body (white coat) ctx.fillStyle = "rgb(240, 240, 240)" ctx.fillRect(centerX - 18, bodyY - 5, 36, 40) // Stethoscope ctx.strokeStyle = isAlert ? "rgb(255, 100, 100)" : "rgb(100, 150, 255)" ctx.lineWidth = 2 const stethoscopeX = centerX + 15 + Math.sin(time * 1.5) * 3 ctx.beginPath() ctx.arc(stethoscopeX, bodyY + 15, 8, 0, Math.PI * 2) ctx.stroke() // Arms with gesture const armOffset = Math.sin(time * 1.2) * 5 // Left arm ctx.strokeStyle = "rgb(200, 150, 100)" ctx.lineWidth = 3 ctx.beginPath() ctx.moveTo(centerX - 18, bodyY) ctx.lineTo(centerX - 35 + armOffset, bodyY + 15) ctx.stroke() // Right arm ctx.beginPath() ctx.moveTo(centerX + 18, bodyY) ctx.lineTo(centerX + 35 - armOffset, bodyY + 15) ctx.stroke() // Alert indicator if (isAlert) { const alertSize = 5 + Math.sin(time * 3) * 2 ctx.fillStyle = `rgba(255, 100, 100, ${0.5 + Math.sin(time * 3) * 0.3})` ctx.beginPath() ctx.arc(centerX - 25, headY - 25, alertSize, 0, Math.PI * 2) ctx.fill() } animationId = requestAnimationFrame(animate) } animate() return () => cancelAnimationFrame(animationId) }, [isAlert]) return (

Medical AI

{isAlert ? "Alert Active" : "Monitoring"}

) } [V0_FILE]typescriptreact:file="components/control-panel.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Play, Square, Zap, Download } from "lucide-react" interface ControlPanelProps { isStreaming: boolean onStartStream: () => void onStopStream: () => void onSimulateAnomaly: () => void showAlert: boolean } export function ControlPanel({ isStreaming, onStartStream, onStopStream, onSimulateAnomaly, showAlert, }: ControlPanelProps) { return ( Control Panel {/* Stream Controls */}

Stream Controls

{/* Demo Controls */}

Demo Controls

{/* Export */}

Export

{/* Status Info */}

Stream Status {isStreaming ? "ACTIVE" : "IDLE"}

Alert Status {showAlert ? "TRIGGERED" : "CLEAR"}

) } [V0_FILE]typescriptreact:file="components/demo-simulator.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Card } from "@/components/ui/card" interface DemoSimulatorProps { onComplete: () => void onStartStream: () => void onStopStream: () => void onSimulateAnomaly: () => void } export function DemoSimulator({ onComplete, onStartStream, onStopStream, onSimulateAnomaly }: DemoSimulatorProps) { const [progress, setProgress] = useState(0) const [stage, setStage] = useState(0) const demoStages = [ { duration: 3, label: "Starting Data Stream...", action: () => onStartStream() }, { duration: 10, label: "Streaming Vital Signs", action: null }, { duration: 5, label: "Analyzing Data Patterns...", action: null }, { duration: 3, label: "Triggering Anomaly Detection", action: () => onSimulateAnomaly() }, { duration: 8, label: "AI Alert Processing", action: null }, { duration: 5, label: "Routing to Nearest Hospital", action: null }, { duration: 3, label: "Emergency Protocol Activated", action: null }, { duration: 4, label: "Finalizing Demo...", action: () => onStopStream() }, ] const totalDuration = demoStages.reduce((acc, stage) => acc + stage.duration, 0) useEffect(() => { let elapsedTime = 0 let currentStageIndex = 0 const interval = setInterval(() => { elapsedTime += 0.05 const newProgress = (elapsedTime / totalDuration) * 100 if (elapsedTime >= totalDuration) { clearInterval(interval) onComplete() return } // Find current stage let stageTime = 0 for (let i = 0; i < demoStages.length; i++) { stageTime += demoStages[i].duration if (elapsedTime <= stageTime) { if (i !== currentStageIndex) { currentStageIndex = i setStage(i) if (demoStages[i].action) { demoStages[i].action?.() } } break } } setProgress(newProgress) }, 50) return () => clearInterval(interval) }, []) return (

VitalSync Demo

Automated Demonstration Sequence

{/* Current Stage */}

{demoStages[stage]?.label}

Stage {stage + 1} of {demoStages.length}

{/* Progress Bar */}

Overall Progress {Math.round(progress)}%

{/* Stage Timeline */}

{demoStages.map((s, idx) => (

{s.label}

))}

{/* Info Box */}

Watch as VitalSync demonstrates real-time vital monitoring, AI anomaly detection, and emergency response capabilities.

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* VitalSync Healthcare Theme - Deep Blue & Violet Accents */ --background: oklch(0.08 0 0); --foreground: oklch(0.97 0 0); --card: oklch(0.12 0.02 270); --card-foreground: oklch(0.97 0 0); --popover: oklch(0.12 0.02 270); --popover-foreground: oklch(0.97 0 0); --primary: oklch(0.45 0.3 270); --primary-foreground: oklch(0.97 0 0); --secondary: oklch(0.35 0.25 280); --secondary-foreground: oklch(0.97 0 0); --muted: oklch(0.25 0.02 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.6 0.35 280); --accent-foreground: oklch(0.08 0 0); --destructive: oklch(0.6 0.3 20); --destructive-foreground: oklch(0.97 0 0); --border: oklch(0.2 0.02 270); --input: oklch(0.15 0.02 270); --ring: oklch(0.5 0.3 270); --chart-1: oklch(0.65 0.25 220); --chart-2: oklch(0.55 0.28 290); --chart-3: oklch(0.5 0.25 10); --chart-4: oklch(0.6 0.3 280); --chart-5: oklch(0.45 0.2 270); --radius: 0.75rem; --sidebar: oklch(0.1 0.02 270); --sidebar-foreground: oklch(0.97 0 0); --sidebar-primary: oklch(0.5 0.3 270); --sidebar-primary-foreground: oklch(0.97 0 0); --sidebar-accent: oklch(0.6 0.35 280); --sidebar-accent-foreground: oklch(0.08 0 0); --sidebar-border: oklch(0.2 0.02 270); --sidebar-ring: oklch(0.5 0.3 270); } .dark { --background: oklch(0.08 0 0); --foreground: oklch(0.97 0 0); --card: oklch(0.12 0.02 270); --card-foreground: oklch(0.97 0 0); --popover: oklch(0.12 0.02 270); --popover-foreground: oklch(0.97 0 0); --primary: oklch(0.45 0.3 270); --primary-foreground: oklch(0.97 0 0); --secondary: oklch(0.35 0.25 280); --secondary-foreground: oklch(0.97 0 0); --muted: oklch(0.25 0.02 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.6 0.35 280); --accent-foreground: oklch(0.08 0 0); --destructive: oklch(0.6 0.3 20); --destructive-foreground: oklch(0.97 0 0); --border: oklch(0.2 0.02 270); --input: oklch(0.15 0.02 270); --ring: oklch(0.5 0.3 270); --chart-1: oklch(0.65 0.25 220); --chart-2: oklch(0.55 0.28 290); --chart-3: oklch(0.5 0.25 10); --chart-4: oklch(0.6 0.3 280); --chart-5: oklch(0.45 0.2 270); --sidebar: oklch(0.1 0.02 270); --sidebar-foreground: oklch(0.97 0 0); --sidebar-primary: oklch(0.5 0.3 270); --sidebar-primary-foreground: oklch(0.97 0 0); --sidebar-accent: oklch(0.6 0.35 280); --sidebar-accent-foreground: oklch(0.08 0 0); --sidebar-border: oklch(0.2 0.02 270); --sidebar-ring: oklch(0.5 0.3 270); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Enhanced animation keyframes for video demo */ @keyframes pulse-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes slide-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes heart-beat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.1); } 50% { transform: scale(1); } } @keyframes alert-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* New animations for video timeline effects */ @keyframes zoom-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-left { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes slide-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(153, 102, 255, 0.7); } 70% { box-shadow: 0 0 0 20px rgba(153, 102, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(153, 102, 255, 0); } } @keyframes glow-pulse { 0%, 100% { filter: drop-shadow(0 0 10px rgba(153, 102, 255, 0.3)); } 50% { filter: drop-shadow(0 0 25px rgba(153, 102, 255, 0.8)); } } .animate-pulse-glow { animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .animate-slide-in { animation: slide-in 0.5s ease-out; } .animate-float { animation: float 3s ease-in-out infinite; } .animate-heart-beat { animation: heart-beat 1s ease-in-out infinite; } .animate-alert-shake { animation: alert-shake 0.5s ease-in-out; } .animate-zoom-in { animation: zoom-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .animate-fade-in { animation: fade-in 0.8s ease-out; } .animate-slide-left { animation: slide-left 0.7s ease-out; } .animate-slide-up { animation: slide-up 0.7s ease-out; } .animate-pulse-ring { animation: pulse-ring 2s infinite; } .animate-glow-pulse { animation: glow-pulse 2s ease-in-out infinite; } [V0_FILE]typescript:file="lib/vitals-simulator.ts" isMerged="true" // Vitals data simulator for demo purposes export interface VitalReading { heartRate: number spO2: number temperature: number timestamp: string } export interface PatientLocation { latitude: number longitude: number accuracy: number } export interface AIAlert { id: string type: string confidence: number message: string timestamp: string location: PatientLocation } // Baseline vitals configuration const BASELINE = { heartRate: { min: 60, max: 80 }, spO2: { min: 95, max: 100 }, temperature: { min: 36.5, max: 37.5 }, } // Anomaly patterns for pre-stroke detection const ANOMALY_PATTERNS = { heartRate: { min: 110, max: 140 }, // Rapid spike spO2: { min: 88, max: 93 }, // Drop temperature: { min: 38.5, max: 39.5 }, // Fever } export class VitalsSimulator { private isAnomalousMode = false private anomalyStartTime = 0 generateReading(): VitalReading { const now = new Date().toISOString() if (this.isAnomalousMode && Date.now() - this.anomalyStartTime < 15000) { // 15 second anomaly window return { heartRate: this.randomInt(ANOMALY_PATTERNS.heartRate.min, ANOMALY_PATTERNS.heartRate.max), spO2: this.randomInt(ANOMALY_PATTERNS.spO2.min, ANOMALY_PATTERNS.spO2.max), temperature: this.randomFloat(ANOMALY_PATTERNS.temperature.min, ANOMALY_PATTERNS.temperature.max, 1), timestamp: now, } } // Reset anomaly mode if window expired if (this.isAnomalousMode && Date.now() - this.anomalyStartTime >= 15000) { this.isAnomalousMode = false } // Normal baseline vitals return { heartRate: this.randomInt(BASELINE.heartRate.min, BASELINE.heartRate.max), spO2: this.randomInt(BASELINE.spO2.min, BASELINE.spO2.max), temperature: this.randomFloat(BASELINE.temperature.min, BASELINE.temperature.max, 1), timestamp: now, } } triggerAnomaly(): void { this.isAnomalousMode = true this.anomalyStartTime = Date.now() } isCurrentlyAnomalous(): boolean { return this.isAnomalousMode && Date.now() - this.anomalyStartTime < 15000 } private randomInt(min: number, max: number): number { return Math.floor(Math.random() * (max - min + 1)) + min } private randomFloat(min: number, max: number, decimals: number): number { return Number.parseFloat((Math.random() * (max - min) + min).toFixed(decimals)) } } // AI Anomaly Detection Logic export class AIAnomalyDetector { private readonly PRE_STROKE_THRESHOLDS = { hrSpike: 110, // Heart rate > 110 BPM spO2Drop: 93, // SpO2 < 93% feverThreshold: 38.5, // Temperature > 38.5°C } detectAnomaly(reading: VitalReading): AIAlert | null { const hrSpike = reading.heartRate > this.PRE_STROKE_THRESHOLDS.hrSpike const spO2Drop = reading.spO2 < this.PRE_STROKE_THRESHOLDS.spO2Drop const fever = reading.temperature > this.PRE_STROKE_THRESHOLDS.feverThreshold // Pre-stroke pattern: combination of elevated HR, low SpO2, and elevated temp const preStrokePattern = hrSpike && spO2Drop && fever if (preStrokePattern) { const confidence = this.calculateConfidence(reading) return { id: `alert-${Date.now()}`, type: "pre-stroke-detected", confidence, message: `Pre-stroke pattern detected - HR: ${reading.heartRate} BPM, SpO₂: ${reading.spO2}%, Temp: ${reading.temperature}°C`, timestamp: reading.timestamp, location: this.getPatientLocation(), } } return null } private calculateConfidence(reading: VitalReading): number { let score = 50 // Base confidence // HR component (up to +20%) if (reading.heartRate > 120) score += 15 else if (reading.heartRate > 110) score += 10 // SpO2 component (up to +20%) if (reading.spO2 < 90) score += 15 else if (reading.spO2 < 93) score += 10 // Temperature component (up to +15%) if (reading.temperature > 39) score += 12 else if (reading.temperature > 38.5) score += 8 // Add variance for realism score += Math.floor(Math.random() * 8 - 4) return Math.min(Math.max(Math.round(score), 60), 99) } private getPatientLocation(): PatientLocation { // Simulated patient location (San Francisco, CA) return { latitude: 37.7749 + (Math.random() - 0.5) * 0.05, longitude: -122.4194 + (Math.random() - 0.5) * 0.05, accuracy: 10, } } } // Demo patient database export const DEMO_PATIENTS = [ { id: "patient-001", name: "James Thompson", age: 58, gender: "M", condition: "Hypertension monitoring", lastSync: new Date(Date.now() - 2000).toISOString(), photo: "https://api.dicebear.com/7.x/avataaars/svg?seed=James", }, ] // Nearest hospitals for emergency response export const NEARBY_HOSPITALS = [ { id: "hosp-001", name: "UCSF Medical Center", distance: 2.3, latitude: 37.7614, longitude: -122.458, emergency: true, }, { id: "hosp-002", name: "SF General Hospital", distance: 3.1, latitude: 37.7698, longitude: -122.4119, emergency: true, }, { id: "hosp-003", name: "California Pacific Medical Center", distance: 4.8, latitude: 37.7926, longitude: -122.4245, emergency: true, }, ] [V0_FILE]typescript:file="app/api/vitals/start-stream/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { return NextResponse.json( { status: "streaming", message: "Vitals stream started", timestamp: new Date().toISOString(), }, { status: 200 }, ) } catch (error) { return NextResponse.json({ error: "Failed to start stream" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/vitals/stop-stream/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { return NextResponse.json( { status: "stopped", message: "Vitals stream stopped", timestamp: new Date().toISOString(), }, { status: 200 }, ) } catch (error) { return NextResponse.json({ error: "Failed to stop stream" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/patients/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { DEMO_PATIENTS } from "@/lib/vitals-simulator" export async function GET(request: NextRequest) { try { return NextResponse.json({ patients: DEMO_PATIENTS, count: DEMO_PATIENTS.length, timestamp: new Date().toISOString(), }) } catch (error) { return NextResponse.json({ error: "Failed to fetch patients" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/alerts/history/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" // In-memory alert storage for demo let alertHistory: any[] = [] export async function GET(request: NextRequest) { try { return NextResponse.json({ alerts: alertHistory, count: alertHistory.length, timestamp: new Date().toISOString(), }) } catch (error) { return NextResponse.json({ error: "Failed to fetch alert history" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const alert = await request.json() // Store alert with timestamp const storedAlert = { ...alert, storedAt: new Date().toISOString(), } alertHistory.push(storedAlert) // Keep only last 50 alerts if (alertHistory.length > 50) { alertHistory = alertHistory.slice(-50) } return NextResponse.json({ message: "Alert logged", alert: storedAlert, }) } catch (error) { return NextResponse.json({ error: "Failed to log alert" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/simulate/anomaly/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { VitalsSimulator, AIAnomalyDetector } from "@/lib/vitals-simulator" // Global simulator instance let simulator: VitalsSimulator | null = null let detector: AIAnomalyDetector | null = null export async function POST(request: NextRequest) { try { if (!simulator) { simulator = new VitalsSimulator() detector = new AIAnomalyDetector() } // Trigger anomaly in simulator simulator.triggerAnomaly() // Generate anomalous reading const reading = simulator.generateReading() // Detect anomaly const alert = detector!.detectAnomaly(reading) return NextResponse.json( { message: "Anomaly simulation triggered", reading, alert, timestamp: new Date().toISOString(), }, { status: 200 }, ) } catch (error) { console.error("[v0] Anomaly simulation error:", error) return NextResponse.json({ error: "Failed to simulate anomaly" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/readings/latest/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { VitalsSimulator, AIAnomalyDetector } from "@/lib/vitals-simulator" // Global simulator instance let simulator: VitalsSimulator | null = null let detector: AIAnomalyDetector | null = null export async function GET(request: NextRequest) { try { if (!simulator) { simulator = new VitalsSimulator() detector = new AIAnomalyDetector() } const reading = simulator.generateReading() const alert = detector!.detectAnomaly(reading) return NextResponse.json({ reading, alert, isAnomalous: simulator.isCurrentlyAnomalous(), timestamp: new Date().toISOString(), }) } catch (error) { console.error("[v0] Failed to fetch latest reading:", error) return NextResponse.json({ error: "Failed to fetch readings" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/emergency/respond/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { NEARBY_HOSPITALS } from "@/lib/vitals-simulator" export async function POST(request: NextRequest) { try { const { alert, patientId } = await request.json() // Simulate emergency response workflow const response = { status: "emergency-dispatched", message: "Emergency response initiated", actions: [ "Ambulance dispatched to patient location", "Nearest hospital notified", "Family emergency contacts alerted", ], nearestHospital: NEARBY_HOSPITALS[0], dispatchTime: new Date().toISOString(), estimatedArrival: new Date(Date.now() + 8 * 60000).toISOString(), // 8 min ETA alert, } console.log("[v0] Emergency response:", response) return NextResponse.json(response) } catch (error) { console.error("[v0] Emergency response error:", error) return NextResponse.json({ error: "Failed to initiate emergency response" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/real-time-vitals.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" interface VitalReading { heartRate: number spO2: number temperature: number timestamp: string } interface AIAlert { id: string type: string confidence: number message: string timestamp: string } export function RealTimeVitals({ isStreaming }: { isStreaming: boolean }) { const [reading, setReading] = useState(null) const [alert, setAlert] = useState(null) const [loading, setLoading] = useState(false) useEffect(() => { if (!isStreaming) return // Fetch readings every 1 second when streaming const interval = setInterval(async () => { try { setLoading(true) const response = await fetch("/api/readings/latest") const data = await response.json() setReading(data.reading) // Update alert if detected if (data.alert) { setAlert(data.alert) console.log("[v0] Alert detected:", data.alert) } } catch (error) { console.error("[v0] Failed to fetch reading:", error) } finally { setLoading(false) } }, 1000) return () => clearInterval(interval) }, [isStreaming]) return (

{/* This component feeds real-time data to the dashboard */} {reading &&

}

) } [V0_FILE]typescriptreact:file="components/video-demo.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef, useState, useCallback } from "react" import { Card } from "@/components/ui/card" import { AlertTriangle, MapPin, Zap } from "lucide-react" interface VideoDemoProps { onComplete: () => void onStartStream: () => void onStopStream: () => void onSimulateAnomaly: () => void } export function VideoDemo({ onComplete, onStartStream, onStopStream, onSimulateAnomaly }: VideoDemoProps) { const [currentScene, setCurrentScene] = useState(0) const [sceneProgress, setSceneProgress] = useState(0) const [elapsed, setElapsed] = useState(0) const executedActionsRef = useRef>(new Set()) const scenes = [ { name: "Intro", startTime: 0, endTime: 6, action: null, content: "intro", }, { name: "Wearable Close-Up", startTime: 6, endTime: 16, action: null, content: "wearable", }, { name: "Live Dashboard Stream", startTime: 16, endTime: 46, action: onStartStream, content: "dashboard", }, { name: "AI Prediction Moment", startTime: 46, endTime: 60, action: onSimulateAnomaly, content: "alert", }, { name: "Emergency Response Animation", startTime: 60, endTime: 80, action: null, content: "emergency", }, { name: "Closing Summary", startTime: 80, endTime: 100, action: onStopStream, content: "closing", }, ] const executeSceneAction = useCallback( (sceneIndex: number) => { if (sceneIndex >= 0 && sceneIndex < scenes.length && scenes[sceneIndex].action) { if (!executedActionsRef.current.has(sceneIndex)) { executedActionsRef.current.add(sceneIndex) // Defer action to next microtask to avoid render-phase updates Promise.resolve().then(() => { scenes[sceneIndex].action?.() }) } } }, [], // Removed scenes from dependencies ) useEffect(() => { const interval = setInterval(() => { setElapsed((prev) => { const newElapsed = prev + 0.05 // Find current scene let newScene = 0 for (let i = 0; i < scenes.length; i++) { if (newElapsed >= scenes[i].startTime && newElapsed < scenes[i].endTime) { newScene = i break } } setCurrentScene(newScene) // Calculate scene progress const scene = scenes[newScene] const sceneDuration = scene.endTime - scene.startTime const sceneElapsed = newElapsed - scene.startTime const progress = (sceneElapsed / sceneDuration) * 100 setSceneProgress(Math.min(progress, 100)) executeSceneAction(newScene) // Demo complete if (newElapsed >= scenes[scenes.length - 1].endTime) { clearInterval(interval) // Defer completion callback to next microtask Promise.resolve().then(() => { onComplete() }) } return newElapsed }) }, 50) return () => clearInterval(interval) }, [executeSceneAction, onComplete]) const renderScene = () => { const scene = scenes[currentScene] const progress = sceneProgress / 100 switch (scene?.content) { case "intro": return (

VitalSync

Real-Time Wearable Health Monitoring

with Predictive AI

) case "wearable": return (

{/* Wearable Device SVG */}

{/* Floating vital labels */}

{[ { label: "Heart Rate", value: "72 BPM", color: "rgb(255, 102, 102)" }, { label: "SpO₂", value: "98.5%", color: "rgb(102, 195, 255)" }, { label: "Temperature", value: "36.9°C", color: "rgb(255, 153, 102)" }, ].map((vital, i) => (

{vital.label}

{vital.value}

))}

) case "dashboard": return (

Live Dashboard Stream

{/* Charts Grid */}

{[ { label: "Heart Rate", color: "rgb(153, 102, 255)", value: 72 }, { label: "Blood Oxygen", color: "rgb(102, 195, 255)", value: 98.5 }, { label: "Temperature", color: "rgb(255, 102, 102)", value: 36.9 }, ].map((chart, i) => (

{chart.label}

{Math.floor(chart.value)} {chart.label.includes("Temperature") ? "°C" : chart.label.includes("Oxygen") ? "%" : "BPM"}

{/* Mini chart animation */} ))}

{/* Event log scrolling */}

Event Log

{[ "14:32:05 - Device connected", "14:32:08 - Data stream synchronized", "14:32:12 - Vitals baseline established", "14:32:18 - Real-time monitoring active", "14:32:24 - All systems nominal", ].map((event, i) => (

{event}

))}

) case "alert": return (

{/* Alert glow background */}

{/* Alert header */}

Critical Alert

Pre-stroke Pattern Detected

{/* Confidence score counter */}

AI Confidence Score {Math.floor(progress * 94)}%

{/* Countdown timer */}

Estimated Time to Critical:{" "} {Math.max(2 - Math.floor(progress * 2), 0)} min

{/* Alert details */}

• Elevated heart rate: 125 BPM

• Fluctuating SpO₂: 95%

• Temperature elevation: 37.8°C

) case "emergency": return (

Emergency Response Protocol

{/* Map visualization */}

{/* Patient location marker */}

Patient Location

{/* Hospital markers */}

Hospital

{/* GPS coordinates */}

📍 40.7128°N, 74.0060°W

{/* Action status */}

{[ { icon: Zap, label: "Alert Sent", color: "text-accent" }, { icon: MapPin, label: "Hospital Located", color: "text-destructive" }, ].map((action, i) => { const Icon = action.icon return (

{action.label}

) })}

) case "closing": return (

VitalSync Capabilities

{/* Key features animating in */}

{[ "Real-Time Vital Monitoring", "AI Anomaly Detection & Prediction", "Automated Emergency Response", "GPS Location Tracking", "Hospital Network Integration", ].map((feature, i) => (

✓ {feature}

))}

{/* Closing tagline */}

Bridging Patients and Doctors

Saving time. Saving lives.

) default: return null } } return (

{renderScene()}

{/* Bottom info bar */}

Scene {currentScene + 1} of {scenes.length}: {scenes[currentScene]?.name}

{Math.floor(elapsed)}s / {Math.floor(scenes[scenes.length - 1].endTime)}s

{/* Overall progress */}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useCallback } from "react" import { VitalsDashboard } from "@/components/vitals-dashboard" import { PatientCard } from "@/components/patient-card" import { EventLog } from "@/components/event-log" import { AIAlertModal } from "@/components/ai-alert-modal" import { MapView } from "@/components/map-view" import { WearableGraphic } from "@/components/wearable-graphic" import { DoctorCharacter } from "@/components/doctor-character" import { ControlPanel } from "@/components/control-panel" import { DemoSimulator } from "@/components/demo-simulator" import { Play } from "lucide-react" import { VideoDemo } from "@/components/video-demo" export default function Home() { const [isStreaming, setIsStreaming] = useState(false) const [showAlert, setShowAlert] = useState(false) const [events, setEvents] = useState>([ { id: "1", type: "connection", message: "Wearable device connected", time: "14:32:05" }, { id: "2", type: "sync", message: "Data stream synchronized", time: "14:32:08" }, ]) const [demoRunning, setDemoRunning] = useState(false) const [showVideoDemo, setShowVideoDemo] = useState(false) const handleStartStream = useCallback(() => { setIsStreaming(true) setEvents((prev) => [ ...prev, { id: Date.now().toString(), type: "connection", message: "Stream started - Real-time monitoring active", time: new Date().toLocaleTimeString("en-US", { hour12: false }).slice(0, 8), }, ]) }, []) const handleStopStream = useCallback(() => { setIsStreaming(false) setShowAlert(false) setEvents((prev) => [ ...prev, { id: Date.now().toString(), type: "connection", message: "Stream stopped", time: new Date().toLocaleTimeString("en-US", { hour12: false }).slice(0, 8), }, ]) }, []) const handleSimulateAnomaly = useCallback(() => { setShowAlert(true) setEvents((prev) => [ ...prev, { id: Date.now().toString(), type: "anomaly", message: "⚠️ Pre-stroke pattern detected - Confidence: 94.2%", time: new Date().toLocaleTimeString("en-US", { hour12: false }).slice(0, 8), }, ]) }, []) const handleClearAlert = useCallback(() => { setShowAlert(false) }, []) return (

{/* Header */}

VitalSync

Real-time IoT Health Monitoring System

Status:{" "} {isStreaming ? "● Active" : "○ Idle"}

{/* Main Grid */}

{/* Left Column */}

{/* Right Column */}

{/* Map and Controls */}

{/* AI Alert Modal */} {showVideoDemo && ( setShowVideoDemo(false)} onStartStream={handleStartStream} onStopStream={handleStopStream} onSimulateAnomaly={handleSimulateAnomaly} /> )} {/* Demo Simulator - kept for backward compatibility */} {demoRunning && ( setDemoRunning(false)} onStartStream={handleStartStream} onStopStream={handleStopStream} onSimulateAnomaly={handleSimulateAnomaly} /> )}

) }