[V0_FILE]typescriptreact:file="app/api/rodin/route.ts" isMerged="true" import { NextResponse } from "next/server" const API_KEY = "vibecoding" // Public API key export async function POST(request: Request) { try { // Get the form data from the request const formData = await request.formData() // Forward the request to the Hyper3D API const response = await fetch("https://hyperhuman.deemos.com/api/v2/rodin", { method: "POST", headers: { Authorization: `Bearer ${API_KEY}`, }, body: formData, }) if (!response.ok) { const errorText = await response.text() return NextResponse.json( { error: `API request failed: ${response.status}`, details: errorText }, { status: response.status }, ) } const data = await response.json() return NextResponse.json(data) } catch (error) { console.error("Error in Rodin API route:", error) return NextResponse.json({ error: "Failed to process request" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/status/route.ts" isMerged="true" import { NextResponse } from "next/server" const API_KEY = "vibecoding" // Public API key export async function POST(request: Request) { try { const body = await request.json() const { subscription_key } = body if (!subscription_key) { return NextResponse.json({ error: "Missing subscription_key" }, { status: 400 }) } const response = await fetch("https://hyperhuman.deemos.com/api/v2/status", { method: "POST", headers: { Authorization: `Bearer ${API_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ subscription_key }), }) if (!response.ok) { const errorText = await response.text() return NextResponse.json( { error: `Status check failed: ${response.status}`, details: errorText }, { status: response.status }, ) } const data = await response.json() return NextResponse.json(data) } catch (error) { console.error("Error in Status API route:", error) return NextResponse.json({ error: "Failed to check status" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/download/route.ts" isMerged="true" import { NextResponse } from "next/server" const API_KEY = "vibecoding" // Public API key export async function POST(request: Request) { try { const body = await request.json() const { task_uuid } = body if (!task_uuid) { return NextResponse.json({ error: "Missing task_uuid" }, { status: 400 }) } const response = await fetch("https://hyperhuman.deemos.com/api/v2/download", { method: "POST", headers: { Authorization: `Bearer ${API_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ task_uuid }), }) if (!response.ok) { const errorText = await response.text() return NextResponse.json( { error: `Download failed: ${response.status}`, details: errorText }, { status: response.status }, ) } const data = await response.json() return NextResponse.json(data) } catch (error) { console.error("Error in Download API route:", error) return NextResponse.json({ error: "Failed to download model" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/proxy-download/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function GET(request: Request) { try { const url = new URL(request.url) const fileUrl = url.searchParams.get("url") if (!fileUrl) { return NextResponse.json({ error: "Missing url parameter" }, { status: 400 }) } // Fetch the file from the original URL const response = await fetch(fileUrl) if (!response.ok) { return NextResponse.json({ error: `Failed to fetch file: ${response.status}` }, { status: response.status }) } // Get the file content and content type const fileContent = await response.arrayBuffer() const contentType = response.headers.get("content-type") || "application/octet-stream" // Create a new response with the file content and appropriate headers return new NextResponse(fileContent, { headers: { "Content-Type": contentType, "Content-Disposition": `attachment; filename="${fileUrl.split("/").pop()}"`, "Access-Control-Allow-Origin": "*", "Cache-Control": "no-cache", }, }) } catch (error) { console.error("Error in proxy download route:", error) return NextResponse.json({ error: "Failed to proxy download" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/auto-resize-textarea.tsx" isMerged="true" "use client" import React, { useEffect, useRef } from "react" import { Textarea } from "@/components/ui/textarea" import { cn } from "@/lib/utils" interface AutoResizeTextareaProps extends React.TextareaHTMLAttributes { className?: string } const AutoResizeTextarea = React.forwardRef( ({ className, ...props }, ref) => { const textareaRef = useRef(null) // Combine the forwarded ref with our local ref const setRefs = (element: HTMLTextAreaElement) => { textareaRef.current = element if (typeof ref === "function") { ref(element) } else if (ref) { ref.current = element } } const resizeTextarea = () => { if (textareaRef.current) { // Reset height to auto to get the correct scrollHeight textareaRef.current.style.height = "auto" // Set the height to the scrollHeight, but ensure it's at least the line height const scrollHeight = textareaRef.current.scrollHeight textareaRef.current.style.height = `${scrollHeight}px` } } // Resize on initial render useEffect(() => { if (textareaRef.current) { // Start with single line height const lineHeight = Number.parseInt(getComputedStyle(textareaRef.current).lineHeight) textareaRef.current.style.height = `${lineHeight}px` // Then adjust if there's content if (textareaRef.current.value) { resizeTextarea() } } }, []) // Handle input changes const handleInput = (e: React.ChangeEvent) => { resizeTextarea() if (props.onChange) { props.onChange(e) } } return (

)
  },
)

AutoResizeTextarea.displayName = "AutoResizeTextarea"

export default AutoResizeTextarea
[V0_FILE]typescriptreact:file="components/progress-bar.tsx" isMerged="true"
"use client"

import { cn } from "@/lib/utils"

interface ProgressBarProps {
  totalTasks: number
  completedTasks: number
  className?: string
  isIndeterminate?: boolean
}

export default function ProgressBar({
  totalTasks,
  completedTasks,
  className,
  isIndeterminate = false,
}: ProgressBarProps) {
  // Calculate percentage
  const percentage = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0

return (
    <div className={cn("w-full bg-black rounded-full h-2 overflow-hidden border border-white p-[1px]", className)}>
      {isIndeterminate ? (
        <div className="h-full relative w-full">
          <div className="h-full bg-white absolute w-[40%] animate-progress-indeterminate rounded-full" />
        </div>
      ) : (
        <div className="h-full bg-white transition-all duration-500 rounded-full" style={{ width: `${percentage}%` }} />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="hooks/use-media-query.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false)

useEffect(() => {
    const media = window.matchMedia(query)

// Update the state initially
    setMatches(media.matches)

// Define a callback function to handle changes
    const listener = (e: MediaQueryListEvent) => {
      setMatches(e.matches)
    }

// Add the callback as a listener for changes to the media query
    media.addEventListener("change", listener)

// Clean up
    return () => {
      media.removeEventListener("change", listener)
    }
  }, [query])

return matches
}
[V0_FILE]typescriptreact:file="components/status-indicator.tsx" isMerged="true"
"use client"

import ProgressBar from "./progress-bar"

interface StatusIndicatorProps {
  isLoading: boolean
  jobStatuses: Array<{ uuid: string; status: string }>
}

export default function StatusIndicator({ isLoading, jobStatuses }: StatusIndicatorProps) {
  if (!isLoading) {
    return null
  }

// Add one additional task to the total count
  const actualTasks = jobStatuses.length
  const totalTasks = actualTasks > 0 ? actualTasks + 1 : 0

// Count the first task (initial request) as completed when we have job statuses
  const completedJobTasks = jobStatuses.filter((job) => job.status === "Done").length
  const initialRequestComplete = actualTasks > 0 ? 1 : 0
  const completedTasks = completedJobTasks + initialRequestComplete

const showProgress = actualTasks > 0
  const isIndeterminate = actualTasks === 0

return (
    <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
      <div className="w-64">
        <ProgressBar totalTasks={totalTasks} completedTasks={completedTasks} isIndeterminate={isIndeterminate} />
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/form-schema.ts" isMerged="true"
import * as z from "zod"

export const formSchema = z
  .object({
    images: z.array(z.instanceof(File)).optional(),
    prompt: z.string().optional(),
    condition_mode: z.enum(["concat", "fuse"]).default("concat"),
    quality: z.enum(["high", "medium", "low", "extra-low"]).default("medium"),
    geometry_file_format: z.enum(["glb", "usdz", "fbx", "obj", "stl"]).default("glb"),
    use_hyper: z.boolean().default(false),
    tier: z.enum(["Regular", "Sketch"]).default("Regular"),
    TAPose: z.boolean().default(false),
    material: z.enum(["PBR", "Shaded"]).default("PBR"),
  })
  .refine(
    (data) => {
      // Require at least one of images or prompt
      return (data.images && data.images.length > 0) || (data.prompt && data.prompt.length > 0)
    },
    {
      message: "You must provide either images or a prompt",
      path: ["prompt"],
    },
  )

export type FormValues = z.infer<typeof formSchema>
[V0_FILE]typescriptreact:file="lib/api-service.ts" isMerged="true"
export async function submitRodinJob(formData: FormData) {
  const response = await fetch("/api/rodin", {
    method: "POST",
    body: formData,
  })

if (!response.ok) {
    throw new Error(`API request failed: ${response.status}`)
  }

return await response.json()
}

export async function checkJobStatus(subscriptionKey: string) {
  const response = await fetch(`/api/status`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      subscription_key: subscriptionKey,
    }),
  })

if (!response.ok) {
    throw new Error(`Status check failed: ${response.status}`)
  }

return await response.json()
}

export async function downloadModel(taskUuid: string) {
  const response = await fetch(`/api/download`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      task_uuid: taskUuid,
    }),
  })

if (!response.ok) {
    throw new Error(`Download failed: ${response.status}`)
  }

return await response.json()
}
[V0_FILE]typescriptreact:file="components/model-viewer.tsx" isMerged="true"
"use client"

import { Canvas } from "@react-three/fiber"
import { OrbitControls, Environment } from "@react-three/drei"
import { Suspense } from "react"
import SceneSetup from "./scene-setup"
import ModelComponent from "./model-component"
import LoadingPlaceholder from "./loading-placeholder"

export default function ModelViewer({ modelUrl }: { modelUrl: string | null }) {
  return (
    <div className="w-full h-[100dvh] bg-black bg-radial-gradient">
      <Canvas camera={{ position: [0, 0, 5], fov: 50 }}>
        <SceneSetup />
        <ambientLight intensity={0.3} />
        <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} castShadow intensity={1} />
        <pointLight position={[-10, -10, -10]} intensity={0.5} />

<Suspense fallback={<LoadingPlaceholder />}>
          {modelUrl ? <ModelComponent url={modelUrl} /> : <LoadingPlaceholder />}
        </Suspense>

<OrbitControls
          minDistance={3}
          maxDistance={10}
          enableZoom={true}
          enablePan={false}
          autoRotate={true}
          autoRotateSpeed={1}
        />
        <Environment preset="night" />
      </Canvas>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/model-component.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useThree } from "@react-three/fiber"
import { useGLTF, Center } from "@react-three/drei"
import LoadingSpinner from "./loading-spinner"

export default function ModelComponent({ url }: { url: string }) {
  const [isLoading, setIsLoading] = useState(true)
  const { scene } = useGLTF(url, undefined, undefined, (error) => {
    //console.error("Error loading model:", error)
  })
  const { camera } = useThree()

useEffect(() => {
    // Reset camera position when model changes - position higher to account for prompt container
    camera.position.set(0, 0, 5)

// Set loading to false when scene is loaded
    if (scene) {
      setIsLoading(false)
    }

return () => {
      setIsLoading(true)
    }
  }, [url, camera, scene])

if (isLoading) {
    return <LoadingSpinner />
  }

return (
    <Center>
      <primitive object={scene} scale={1.5} />
    </Center>
  )
}
[V0_FILE]typescriptreact:file="components/loading-placeholder.tsx" isMerged="true"
"use client"

export default function LoadingPlaceholder() {
  return (
    <>
      <mesh>
        <boxGeometry args={[1.5, 1.5, 1.5]} />
        <meshStandardMaterial color="#cccccc" wireframe={true} transparent opacity={0.5} />
      </mesh>

<mesh>
        <sphereGeometry args={[0.75, 32, 32]} />
        <meshStandardMaterial color="#aaaaaa" wireframe={true} transparent opacity={0.5} />
      </mesh>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/scene-setup.tsx" isMerged="true"
"use client"

import { useEffect } from "react"
import { useThree } from "@react-three/fiber"

export default function SceneSetup() {
  const { scene } = useThree()

useEffect(() => {
    // Set background to transparent to show the CSS background
    scene.background = null
  }, [scene])

return null
}
[V0_FILE]typescriptreact:file="components/image-upload-area.tsx" isMerged="true"
"use client"

import { X } from "lucide-react"

interface ImageUploadAreaProps {
  previewUrls: string[]
  onRemoveImage: (index: number) => void
  isLoading?: boolean
}

export default function ImageUploadArea({ previewUrls, onRemoveImage, isLoading = false }: ImageUploadAreaProps) {
  if (previewUrls.length === 0) {
    return null
  }

return (
    <div className="flex flex-wrap gap-2 px-4 pt-3 pointer-events-auto">
      {previewUrls.map((url, index) => (
        <div key={index} className="relative h-16 w-16">
          <img
            src={url || "/placeholder.svg"}
            alt={`Preview ${index + 1}`}
            className="h-full w-full object-cover rounded-full"
          />
          {!isLoading && (
            <button type="button" onClick={() => onRemoveImage(index)} className="absolute -top-1 -right-1">
              <X className="h-3 w-3 text-white" />
            </button>
          )}
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import { Geist } from "next/font/google"
import "./globals.css"

const geist = Geist({
  subsets: ["latin"],
  display: "swap",
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={geist.className}>
      <head>
        <title>3D Model Generator</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      </head>
      <body className="bg-black text-white">{children}</body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/options-dialog.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerFooter } from "@/components/ui/drawer"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { useMediaQuery } from "@/hooks/use-media-query"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

interface OptionsDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  options: {
    condition_mode: "concat" | "fuse"
    quality: "high" | "medium" | "low" | "extra-low"
    geometry_file_format: "glb" | "usdz" | "fbx" | "obj" | "stl"
    use_hyper: boolean
    tier: "Regular" | "Sketch"
    TAPose: boolean
    material: "PBR" | "Shaded"
  }
  onOptionsChange: (options: any) => void
}

export default function OptionsDialog({ open, onOpenChange, options, onOptionsChange }: OptionsDialogProps) {
  const [localOptions, setLocalOptions] = useState(options)
  const isDesktop = useMediaQuery("(min-width: 768px)")

// Update local options when props change
  useEffect(() => {
    setLocalOptions(options)
  }, [options])

const handleChange = (key: string, value: any) => {
    setLocalOptions((prev) => {
      const updated = { ...prev, [key]: value }
      onOptionsChange(updated)
      return updated
    })
  }

const content = (
    <div className="py-2">
      <Tabs defaultValue="basic" className="w-full">
        <TabsList className="grid grid-cols-2 mb-4">
          <TabsTrigger value="basic" className="tracking-normal">
            Basic Settings
          </TabsTrigger>
          <TabsTrigger value="advanced" className="tracking-normal">
            Advanced
          </TabsTrigger>
        </TabsList>

<TabsContent value="basic" className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label className="text-white font-mono tracking-normal">Quality</Label>
              <Select value={localOptions.quality} onValueChange={(value) => handleChange("quality", value)}>
                <SelectTrigger className="bg-black border-[rgba(255,255,255,0.12)] text-white tracking-normal">
                  <SelectValue placeholder="Select quality" />
                </SelectTrigger>
                <SelectContent className="bg-black border-[rgba(255,255,255,0.12)] text-white">
                  <SelectItem value="high" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    High (50k)
                  </SelectItem>
                  <SelectItem value="medium" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    Medium (18k)
                  </SelectItem>
                  <SelectItem value="low" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    Low (8k)
                  </SelectItem>
                  <SelectItem value="extra-low" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    Extra Low (4k)
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label className="text-white font-mono tracking-normal">Format</Label>
              <Select
                value={localOptions.geometry_file_format}
                onValueChange={(value) => handleChange("geometry_file_format", value)}
              >
                <SelectTrigger className="bg-black border-[rgba(255,255,255,0.12)] text-white tracking-normal">
                  <SelectValue placeholder="Select format" />
                </SelectTrigger>
                <SelectContent className="bg-black border-[rgba(255,255,255,0.12)] text-white">
                  <SelectItem value="glb" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    GLB
                  </SelectItem>
                  <SelectItem value="usdz" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    USDZ
                  </SelectItem>
                  <SelectItem value="fbx" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    FBX
                  </SelectItem>
                  <SelectItem value="obj" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    OBJ
                  </SelectItem>
                  <SelectItem value="stl" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    STL
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="grid grid-cols-2 gap-4">
            <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm border-[rgba(255,255,255,0.12)] bg-black/50">
              <div>
                <Label className="text-white font-mono tracking-normal">Use Hyper</Label>
                <p className="text-gray-400 text-xs tracking-normal">Better details</p>
              </div>
              <Switch
                checked={localOptions.use_hyper}
                onCheckedChange={(checked) => handleChange("use_hyper", checked)}
              />
            </div>

<div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm border-[rgba(255,255,255,0.12)] bg-black/50">
              <div>
                <Label className="text-white font-mono tracking-normal">T/A Pose</Label>
                <p className="text-gray-400 text-xs tracking-normal">For humans</p>
              </div>
              <Switch checked={localOptions.TAPose} onCheckedChange={(checked) => handleChange("TAPose", checked)} />
            </div>
          </div>
        </TabsContent>

<TabsContent value="advanced" className="space-y-4">
          <div className="space-y-2">
            <Label className="text-white font-mono tracking-normal">Condition Mode</Label>
            <RadioGroup
              value={localOptions.condition_mode}
              onValueChange={(value) => handleChange("condition_mode", value)}
              className="flex flex-col space-y-1"
            >
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="concat" id="concat" className="border-white text-white" />
                <Label htmlFor="concat" className="text-white tracking-normal">
                  Concat (Single object, multiple views)
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="fuse" id="fuse" className="border-white text-white" />
                <Label htmlFor="fuse" className="text-white tracking-normal">
                  Fuse (Multiple objects)
                </Label>
              </div>
            </RadioGroup>
          </div>

<div className="space-y-2">
            <Label className="text-white font-mono tracking-normal">Material</Label>
            <RadioGroup
              value={localOptions.material}
              onValueChange={(value) => handleChange("material", value)}
              className="flex space-x-4"
            >
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="PBR" id="pbr" className="border-white text-white" />
                <Label htmlFor="pbr" className="text-white tracking-normal">
                  PBR
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="Shaded" id="shaded" className="border-white text-white" />
                <Label htmlFor="shaded" className="text-white tracking-normal">
                  Shaded
                </Label>
              </div>
            </RadioGroup>
          </div>

<div className="space-y-2">
            <Label className="text-white font-mono tracking-normal">Generation Tier</Label>
            <RadioGroup
              value={localOptions.tier}
              onValueChange={(value) => handleChange("tier", value)}
              className="flex space-x-4"
            >
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="Regular" id="regular" className="border-white text-white" />
                <Label htmlFor="regular" className="text-white tracking-normal">
                  Regular (Quality)
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="Sketch" id="sketch" className="border-white text-white" />
                <Label htmlFor="sketch" className="text-white tracking-normal">
                  Sketch (Speed)
                </Label>
              </div>
            </RadioGroup>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )

if (isDesktop) {
    return (
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="bg-black border-[rgba(255,255,255,0.12)] text-white max-w-md">
          <DialogHeader>
            <DialogTitle className="text-xl text-white font-mono tracking-normal">Options</DialogTitle>
          </DialogHeader>
          {content}
        </DialogContent>
      </Dialog>
    )
  }

return (
    <Drawer open={open} onOpenChange={onOpenChange}>
      <DrawerContent className="bg-black border-t border-[rgba(255,255,255,0.12)] text-white">
        <div className="mx-auto w-full max-w-md">
          <DrawerHeader>
            <DrawerTitle className="text-xl text-white font-mono tracking-normal">Options</DrawerTitle>
          </DrawerHeader>
          <div className="px-4">{content}</div>
          <DrawerFooter>
            <Button
              onClick={() => onOpenChange(false)}
              className="bg-gray-800 hover:bg-gray-700 text-white tracking-normal"
            >
              Apply Settings
            </Button>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}
[V0_FILE]typescriptreact:file="components/form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import type * as z from "zod"
import { Form as UIForm } from "@/components/ui/form"
import { Button } from "@/components/ui/button"
import { ImageIcon, SlidersHorizontal, ArrowUp } from "lucide-react"
import AutoResizeTextarea from "./auto-resize-textarea"
import ImageUploadArea from "./image-upload-area"
import { formSchema } from "@/lib/form-schema"
import { useMediaQuery } from "@/hooks/use-media-query"
import { cn } from "@/lib/utils"

interface FormProps {
  isLoading: boolean
  onSubmit: (values: z.infer<typeof formSchema>) => Promise<void>
  onOpenOptions: () => void
}

export default function Form({ isLoading, onSubmit, onOpenOptions }: FormProps) {
  const [previewUrls, setPreviewUrls] = useState<string[]>([])
  const [isDragging, setIsDragging] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [isFocused, setIsFocused] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const dropAreaRef = useRef<HTMLDivElement>(null)
  const formRef = useRef<HTMLFormElement>(null)
  const dragCounter = useRef(0)
  const isMobile = useMediaQuery("(max-width: 768px)")

const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      prompt: "",
      images: [],
      condition_mode: "concat",
      quality: "medium",
      geometry_file_format: "glb",
      use_hyper: false,
      tier: "Regular",
      TAPose: false,
      material: "PBR",
    },
  })

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || [])
    addImages(files)
  }

const addImages = (files: File[]) => {
    if (files.length === 0) return

// Limit to 5 images total
    const currentImages = form.getValues("images") || []
    const totalImages = currentImages.length + files.length

if (totalImages > 5) {
      setError("You can upload a maximum of 5 images")
      const allowedNewImages = 5 - currentImages.length
      files = files.slice(0, allowedNewImages)

if (files.length === 0) return
    }

const newPreviewUrls = files.map((file) => URL.createObjectURL(file))
    const updatedImages = [...currentImages, ...files]

setPreviewUrls([...previewUrls, ...newPreviewUrls])
    form.setValue("images", updatedImages)
  }

const removeImage = (index: number) => {
    const currentImages = form.getValues("images") || []
    const newImages = [...currentImages]
    newImages.splice(index, 1)

const newPreviewUrls = [...previewUrls]
    URL.revokeObjectURL(newPreviewUrls[index])
    newPreviewUrls.splice(index, 1)

setPreviewUrls(newPreviewUrls)
    form.setValue("images", newImages)
  }

const triggerFileInput = () => {
    fileInputRef.current?.click()
  }

// Drag and drop handlers
  const handleDragEnter = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    dragCounter.current += 1
    setIsDragging(true)
  }

const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    dragCounter.current -= 1
    if (dragCounter.current === 0) {
      setIsDragging(false)
    }
  }

const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
  }

const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    dragCounter.current = 0
    setIsDragging(false)

if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      const files = Array.from(e.dataTransfer.files).filter((file) => file.type.startsWith("image/"))
      addImages(files)
    }
  }

const handleFocus = () => {
    setIsFocused(true)
  }

const handleBlur = () => {
    setIsFocused(false)
  }

const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    // On desktop, Enter submits the form unless Shift is pressed
    // On mobile, Enter creates a new line
    if (e.key === "Enter") {
      if (!isMobile && !e.shiftKey) {
        e.preventDefault()
        formRef.current?.requestSubmit()
      }
    }
  }

return (
    <UIForm {...form}>
      <form ref={formRef} onSubmit={form.handleSubmit(onSubmit)} className="relative">
        <div
          ref={dropAreaRef}
          className={cn(
            "relative bg-black/60 backdrop-blur-md rounded-[24px] overflow-hidden transition-all shadow-lg border border-[rgba(255,255,255,0.12)]",
            isDragging ? "ring-2 ring-white" : isFocused ? "ring-2 ring-white" : "",
            isLoading && "animate-pulse-loading pointer-events-none opacity-70",
          )}
          onDragEnter={handleDragEnter}
          onDragLeave={handleDragLeave}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
        >
          {/* Image previews */}
          <ImageUploadArea previewUrls={previewUrls} onRemoveImage={removeImage} isLoading={isLoading} />

{isDragging && (
            <div className="absolute inset-0 bg-black/80 flex items-center justify-center pointer-events-none z-10">
              <p className="text-white font-medium tracking-normal text-lg">Drop images here</p>
            </div>
          )}
        </div>

{error && <div className="mt-2 text-red-400 text-sm tracking-normal">{error}</div>}
      </form>
    </UIForm>
  )
}
[V0_FILE]typescriptreact:file="components/loading-spinner.tsx" isMerged="true"
"use client"

import { useFrame } from "@react-three/fiber"
import { useRef } from "react"
import type * as THREE from "three"

export default function LoadingSpinner() {
  const groupRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (groupRef.current) {
      groupRef.current.rotation.y = clock.getElapsedTime() * 0.5
    }
  })

return (
    <group ref={groupRef}>
      <mesh>
        <torusGeometry args={[1, 0.1, 16, 32]} />
        <meshStandardMaterial color="#ffffff" wireframe={true} />
      </mesh>
      <mesh rotation={[Math.PI / 2, 0, 0]}>
        <torusGeometry args={[1, 0.1, 16, 32]} />
        <meshStandardMaterial color="#ffffff" wireframe={true} />
      </mesh>
    </group>
  )
}
[V0_FILE]typescriptreact:file="components/rodin.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { ExternalLink, Download, ArrowLeft } from "lucide-react"
import type { FormValues } from "@/lib/form-schema"
import { submitRodinJob, checkJobStatus, downloadModel } from "@/lib/api-service"
import ModelViewer from "./model-viewer"
import Form from "./form"
import StatusIndicator from "./status-indicator"
import OptionsDialog from "./options-dialog"
import { Button } from "@/components/ui/button"
import { useMediaQuery } from "@/hooks/use-media-query"

export default function Rodin() {
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [result, setResult] = useState<any>(null)
  const [isPolling, setIsPolling] = useState(false)
  const [modelUrl, setModelUrl] = useState<string | null>(null)
  const [downloadUrl, setDownloadUrl] = useState<string | null>(null)
  const [jobStatuses, setJobStatuses] = useState<Array<{ uuid: string; status: string }>>([])
  const [showOptions, setShowOptions] = useState(false)
  const [showPromptContainer, setShowPromptContainer] = useState(true)
  const isMobile = useMediaQuery("(max-width: 768px)")
  const [options, setOptions] = useState({
    condition_mode: "concat" as const,
    quality: "medium" as const,
    geometry_file_format: "glb" as const,
    use_hyper: false,
    tier: "Regular" as const,
    TAPose: false,
    material: "PBR" as const,
  })

// Prevent body scroll on mobile
  useEffect(() => {
    if (isMobile) {
      document.body.style.overflow = "hidden"
      document.documentElement.style.overflow = "hidden"

return () => {
        document.body.style.overflow = ""
        document.documentElement.style.overflow = ""
      }
    }
  }, [isMobile])

const handleOptionsChange = (newOptions: any) => {
    setOptions(newOptions)
  }

async function handleStatusCheck(subscriptionKey: string, taskUuid: string) {
    try {
      setIsPolling(true)

const data = await checkJobStatus(subscriptionKey)
      console.log("Status response:", data)

// Check if jobs array exists
      if (!data.jobs || !Array.isArray(data.jobs) || data.jobs.length === 0) {
        throw new Error("No jobs found in status response")
      }

// Update job statuses
      setJobStatuses(data.jobs)

// Check status of all jobs
      const allJobsDone = data.jobs.every((job: any) => job.status === "Done")
      const anyJobFailed = data.jobs.some((job: any) => job.status === "Failed")

if (allJobsDone) {
        setIsPolling(false)

// Get the download URL using the task UUID
        try {
          const downloadData = await downloadModel(taskUuid)
          console.log("Download response:", downloadData)

// Check if there's an error in the download response
          if (downloadData.error && downloadData.error !== "OK") {
            throw new Error(`Download error: ${downloadData.error}`)
          }

// Find the first GLB file to display in the 3D viewer
          if (downloadData.list && downloadData.list.length > 0) {
            const glbFile = downloadData.list.find((file: { name: string }) => file.name.toLowerCase().endsWith(".glb"))

if (glbFile) {
              const proxyUrl = `/api/proxy-download?url=${encodeURIComponent(glbFile.url)}`
              setModelUrl(proxyUrl)
              setDownloadUrl(glbFile.url)
              setIsLoading(false)
              setShowPromptContainer(false)
            } else {
              setError("No GLB file found in the results")
              setIsLoading(false)
            }
          } else {
            setError("No files available for download")
            setIsLoading(false)
          }
        } catch (downloadErr) {
          setError(`Failed to download model: ${downloadErr instanceof Error ? downloadErr.message : "Unknown error"}`)
          setIsLoading(false)
        }
      } else if (anyJobFailed) {
        setIsPolling(false)
        setError("Generation task failed")
        setIsLoading(false)
      } else {
        // Still processing, poll again after a delay
        setTimeout(() => handleStatusCheck(subscriptionKey, taskUuid), 3000)
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to check status")
      setIsPolling(false)
      setIsLoading(false)
    }
  }

async function handleSubmit(values: FormValues) {
    setIsLoading(true)
    setError(null)
    setResult(null)
    setModelUrl(null)
    setDownloadUrl(null)
    setJobStatuses([])

try {
      const formData = new FormData()

if (values.images && values.images.length > 0) {
        values.images.forEach((image) => {
          formData.append("images", image)
        })
      }

if (values.prompt) {
        formData.append("prompt", values.prompt)
      }

// Add all the advanced options
      formData.append("condition_mode", options.condition_mode)
      formData.append("geometry_file_format", options.geometry_file_format)
      formData.append("material", options.material)
      formData.append("quality", options.quality)
      formData.append("use_hyper", options.use_hyper.toString())
      formData.append("tier", options.tier)
      formData.append("TAPose", options.TAPose.toString())
      formData.append("mesh_mode", "Quad")
      formData.append("mesh_simplify", "true")
      formData.append("mesh_smooth", "true")

// Make the API call through our server route
      const data = await submitRodinJob(formData)
      console.log("Generation response:", data)

setResult(data)

// Start polling for status
      if (data.jobs && data.jobs.subscription_key && data.uuid) {
        handleStatusCheck(data.jobs.subscription_key, data.uuid)
      } else {
        setError("Missing required data for status checking")
        setIsLoading(false)
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "An unknown error occurred")
      setIsLoading(false)
    }
  }

const handleDownload = () => {
    if (downloadUrl) {
      window.open(downloadUrl, "_blank")
    }
  }

const handleBack = () => {
    setShowPromptContainer(true)
  }

const ExternalLinks = () => (
    <div className="flex items-center space-x-6">
      <a
        href="https://hyper3d.ai"
        target="_blank"
        rel="noopener noreferrer"
        className="flex items-center text-white hover:text-gray-300 transition-colors tracking-normal"
      >
        <span className="mr-1">Website</span>
        <ExternalLink className="h-4 w-4" />
      </a>
      <a
        href="https://developer.hyper3d.ai"
        target="_blank"
        rel="noopener noreferrer"
        className="flex items-center text-white hover:text-gray-300 transition-colors tracking-normal"
      >
        <span className="mr-1">API Docs</span>
        <ExternalLink className="h-4 w-4" />
      </a>
    </div>
  )

return (
    <div className="relative h-[100dvh] w-full">
      {/* Full-screen canvas */}
      <div className="absolute inset-0 z-0">
        <ModelViewer modelUrl={isLoading ? null : modelUrl} />
      </div>

{/* Overlay UI */}
      <div className="absolute inset-0 z-10 pointer-events-none">
        {/* Logo in top left */}
        <div className="absolute top-6 left-6 pointer-events-auto">
          <h1 className="text-3xl text-white font-normal tracking-normal">3D Model Generator</h1>
          <p className="text-gray-400 text-sm mt-1 tracking-normal">Powered by Hyper3D Rodin</p>
        </div>

{/* Links in top right - desktop only */}
        {!isMobile && (
          <div className="absolute top-6 right-6 pointer-events-auto">
            <ExternalLinks />
          </div>
        )}

{/* Loading indicator */}
        <StatusIndicator isLoading={isLoading} jobStatuses={jobStatuses} />

{/* Error message */}
        {error && (
          <div className="absolute top-20 left-1/2 transform -translate-x-1/2 bg-gray-900/80 text-white px-4 py-2 rounded-md tracking-normal">
            {error}
          </div>
        )}

{/* Model controls when model is loaded */}
        {!isLoading && modelUrl && !showPromptContainer && (
          <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex items-center gap-4 pointer-events-auto">
            <Button
              onClick={handleBack}
              className="bg-black hover:bg-gray-900 text-white border border-white/20 rounded-full px-4 py-2 flex items-center gap-2"
            >
              <ArrowLeft className="h-4 w-4" />
              <span className="tracking-normal">Back</span>
            </Button>

<Button
              onClick={handleDownload}
              className="bg-white hover:bg-gray-200 text-black rounded-full px-4 py-2 flex items-center gap-2"
            >
              <Download className="h-4 w-4" />
              <span className="tracking-normal">Download</span>
            </Button>
          </div>
        )}

{/* Input field at bottom */}
        {showPromptContainer && (
          <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 w-full max-w-3xl px-4 sm:px-0 pointer-events-auto">
            <Form isLoading={isLoading} onSubmit={handleSubmit} onOpenOptions={() => setShowOptions(true)} />

{/* Links below prompt on mobile */}
            {isMobile && (
              <div className="mt-4 flex justify-center pointer-events-auto">
                <ExternalLinks />
              </div>
            )}
          </div>
        )}
      </div>

{/* Options Dialog/Drawer */}
      <OptionsDialog
        open={showOptions}
        onOpenChange={setShowOptions}
        options={options}
        onOptionsChange={handleOptionsChange}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        // Custom monochrome UI colors
        mono: {
          black: "#000000",
          dark: "#121212",
          gray: "#333333",
          light: "#666666",
          white: "#FFFFFF",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      fontFamily: {
        sans: ["var(--font-sans)", "system-ui", "sans-serif"],
        mono: ["Geist Mono", "monospace"],
        display: ["Geist Mono", "monospace"],
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
        "pulse-glow": {
          "0%, 100%": {
            boxShadow: "0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.2)",
          },
          "50%": {
            boxShadow: "0 0 15px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.3)",
          },
        },
        "scan-line": {
          "0%": { transform: "translateY(-100%)" },
          "100%": { transform: "translateY(100%)" },
        },
        "text-glow": {
          "0%, 100%": {
            textShadow: "0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.5)",
          },
          "50%": {
            textShadow: "0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 255, 255, 0.7)",
          },
        },
        "pulse-loading": {
          "0%": { opacity: 0.6 },
          "50%": { opacity: 1 },
          "100%": { opacity: 0.6 },
        },
        "progress-indeterminate": {
          "0%": { left: "-40%" },
          "100%": { left: "100%" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "pulse-glow": "pulse-glow 2s infinite",
        "scan-line": "scan-line 2s linear infinite",
        "text-glow": "text-glow 2s infinite",
        "pulse-loading": "pulse-loading 1.5s ease-in-out infinite",
        "progress-indeterminate": "progress-indeterminate 1.5s ease-in-out infinite",
      },
      backgroundImage: {
        "mono-grid":
          "linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px)",
        "mono-diagonal":
          "repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 10px)",
        "mono-radial":
          "radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 50%)",
        "radial-gradient": "radial-gradient(circle at center, #222222 0%, #050505 100%)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true"
import { Bell, Search, Settings } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export default function Header() {
  return (
    <header className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 py-4 px-6 flex items-center justify-between">
      <div className="flex-1 md:max-w-md">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
          <Input
            type="search"
            placeholder="Search patients, reports..."
            className="pl-10 bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600"
          />
        </div>
      </div>

<div className="flex items-center space-x-4">
        <Button variant="ghost" size="icon" className="text-gray-500 dark:text-gray-400">
          <Bell className="h-5 w-5" />
        </Button>
        <Button variant="ghost" size="icon" className="text-gray-500 dark:text-gray-400">
          <Settings className="h-5 w-5" />
        </Button>
        <div className="hidden md:flex items-center">
          <div className="h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center">
            <span className="text-sm font-medium text-purple-700">ADS</span>
          </div>
          <span className="ml-2 text-sm font-medium text-gray-700 dark:text-gray-200">Agile Defense Systems</span>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-overview.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Activity, Users, Database, TrendingUp, Shield, Clock } from "lucide-react"
import { PatientMetricsChart } from "@/components/charts/patient-metrics-chart"
import { ModelPerformanceChart } from "@/components/charts/model-performance-chart"
import { FederatedParticipantsChart } from "@/components/charts/federated-participants-chart"

export default function DashboardOverview() {
  return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row gap-4">
        <Card className="flex-1">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Active Patients</CardTitle>
            <Users className="h-4 w-4 text-gray-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">1,248</div>
            <p className="text-xs text-gray-500">+8% from last month</p>
          </CardContent>
        </Card>
        <Card className="flex-1">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Data Points</CardTitle>
            <Database className="h-4 w-4 text-gray-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">24.5M</div>
            <p className="text-xs text-gray-500">Across all institutions</p>
          </CardContent>
        </Card>
        <Card className="flex-1">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Model Accuracy</CardTitle>
            <TrendingUp className="h-4 w-4 text-gray-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">94.3%</div>
            <p className="text-xs text-gray-500">+2.1% improvement</p>
          </CardContent>
        </Card>
        <Card className="flex-1">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Response Time</CardTitle>
            <Clock className="h-4 w-4 text-gray-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">238ms</div>
            <p className="text-xs text-gray-500">Avg. prediction time</p>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card className="col-span-1">
          <CardHeader>
            <CardTitle>Patient Metrics</CardTitle>
            <CardDescription>Oncology patient data across participating institutions</CardDescription>
          </CardHeader>
          <CardContent className="h-80">
            <PatientMetricsChart />
          </CardContent>
        </Card>

<Card className="col-span-1">
          <CardHeader>
            <CardTitle>Model Performance</CardTitle>
            <CardDescription>Predictive accuracy by cancer type</CardDescription>
          </CardHeader>
          <CardContent className="h-80">
            <ModelPerformanceChart />
          </CardContent>
        </Card>
      </div>

<Tabs defaultValue="network">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="network">Federated Network</TabsTrigger>
          <TabsTrigger value="security">Security Status</TabsTrigger>
          <TabsTrigger value="activity">Recent Activity</TabsTrigger>
        </TabsList>
        <TabsContent value="network">
          <Card>
            <CardHeader>
              <CardTitle>Federated Learning Network</CardTitle>
              <CardDescription>Active participants and data contributions</CardDescription>
            </CardHeader>
            <CardContent className="h-80">
              <FederatedParticipantsChart />
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="security">
          <Card>
            <CardHeader>
              <CardTitle>Security Overview</CardTitle>
              <CardDescription>System security and compliance status</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <Shield className="h-5 w-5 text-green-500 mr-2" />
                    <span>HIPAA Compliance</span>
                  </div>
                  <span className="text-green-500 font-medium">Active</span>
                </div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <Shield className="h-5 w-5 text-green-500 mr-2" />
                    <span>GDPR Compliance</span>
                  </div>
                  <span className="text-green-500 font-medium">Active</span>
                </div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <Shield className="h-5 w-5 text-green-500 mr-2" />
                    <span>Zero-Trust Architecture</span>
                  </div>
                  <span className="text-green-500 font-medium">Enabled</span>
                </div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <Shield className="h-5 w-5 text-green-500 mr-2" />
                    <span>Device Authentication</span>
                  </div>
                  <span className="text-green-500 font-medium">Enforced</span>
                </div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <Activity className="h-5 w-5 text-green-500 mr-2" />
                    <span>Last Security Audit</span>
                  </div>
                  <span className="text-gray-500">2 days ago</span>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="activity">
          <Card>
            <CardHeader>
              <CardTitle>Recent System Activity</CardTitle>
              <CardDescription>Latest events and model updates</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="border-l-4 border-purple-500 pl-4 py-2">
                  <p className="text-sm font-medium">Model Training Completed</p>
                  <p className="text-xs text-gray-500">Lung Cancer Prediction v2.4 - 35 minutes ago</p>
                </div>
                <div className="border-l-4 border-blue-500 pl-4 py-2">
                  <p className="text-sm font-medium">New Institution Joined</p>
                  <p className="text-xs text-gray-500">Memorial Cancer Center - 2 hours ago</p>
                </div>
                <div className="border-l-4 border-green-500 pl-4 py-2">
                  <p className="text-sm font-medium">Data Integration Completed</p>
                  <p className="text-xs text-gray-500">Genomics Pipeline Update - 3 hours ago</p>
                </div>
                <div className="border-l-4 border-orange-500 pl-4 py-2">
                  <p className="text-sm font-medium">System Maintenance</p>
                  <p className="text-xs text-gray-500">Security Patches Applied - 1 day ago</p>
                </div>
                <div className="border-l-4 border-purple-500 pl-4 py-2">
                  <p className="text-sm font-medium">Model Validation</p>
                  <p className="text-xs text-gray-500">Breast Cancer Response Prediction - 1 day ago</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/federated-learning.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { FederatedNetworkMap } from "@/components/visualizations/federated-network-map"
import { ModelTrainingChart } from "@/components/charts/model-training-chart"
import { DataContributionChart } from "@/components/charts/data-contribution-chart"

export default function FederatedLearning() {
  return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Federated Learning Network</h2>
          <p className="text-muted-foreground">Decentralized AI training across healthcare institutions</p>
        </div>

<div className="flex items-center gap-2">
          <Badge variant="outline" className="bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-300">
            Training Active
          </Badge>
          <Button variant="outline" size="sm">
            Network Status
          </Button>
        </div>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Federated Network Map</CardTitle>
          <CardDescription>Active institutions and data flow visualization</CardDescription>
        </CardHeader>
        <CardContent className="h-[400px] relative">
          <FederatedNetworkMap />
        </CardContent>
        <CardFooter className="bg-gray-50 dark:bg-gray-800/50 border-t">
          <div className="flex justify-between items-center w-full text-sm">
            <div>
              <span className="font-medium">12</span> Active Institutions
            </div>
            <div>
              <span className="font-medium">3</span> Training in Progress
            </div>
            <div>
              <span className="font-medium">98.2%</span> Network Uptime
            </div>
          </div>
        </CardFooter>
      </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Model Training Progress</CardTitle>
            <CardDescription>Current federated learning rounds and convergence</CardDescription>
          </CardHeader>
          <CardContent className="h-80">
            <ModelTrainingChart />
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Data Contribution by Institution</CardTitle>
            <CardDescription>Anonymized data points contributed to model training</CardDescription>
          </CardHeader>
          <CardContent className="h-80">
            <DataContributionChart />
          </CardContent>
        </Card>
      </div>

<Tabs defaultValue="models">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="models">Active Models</TabsTrigger>
          <TabsTrigger value="privacy">Privacy Metrics</TabsTrigger>
          <TabsTrigger value="institutions">Participating Institutions</TabsTrigger>
        </TabsList>

<TabsContent value="models">
          <Card>
            <CardHeader>
              <CardTitle>Active Federated Models</CardTitle>
              <CardDescription>Currently training and deployed models</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="bg-purple-50 dark:bg-purple-900/20 p-4 rounded-md">
                  <div className="flex justify-between items-start">
                    <div>
                      <h4 className="font-medium">Lung Cancer Response Prediction</h4>
                      <p className="text-sm text-gray-500">v2.4 - Training Round 8/10</p>
                    </div>
                    <Badge className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-300">
                      Training
                    </Badge>
                  </div>
                  <div className="mt-3 flex items-center">
                    <div className="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                      <div className="bg-purple-600 h-2 rounded-full" style={{ width: "80%" }}></div>
                    </div>
                    <span className="ml-2 text-xs font-medium">80%</span>
                  </div>
                </div>

<div className="bg-green-50 dark:bg-green-900/20 p-4 rounded-md">
                  <div className="flex justify-between items-start">
                    <div>
                      <h4 className="font-medium">Breast Cancer Recurrence Risk</h4>
                      <p className="text-sm text-gray-500">v3.1 - Deployed</p>
                    </div>
                    <Badge className="bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300">
                      Active
                    </Badge>
                  </div>
                  <div className="mt-2">
                    <p className="text-sm">
                      <span className="font-medium">Accuracy:</span> 94.2% |
                      <span className="font-medium ml-2">Last Updated:</span> 3 days ago
                    </p>
                  </div>
                </div>

<div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-md">
                  <div className="flex justify-between items-start">
                    <div>
                      <h4 className="font-medium">Colorectal Treatment Optimization</h4>
                      <p className="text-sm text-gray-500">v1.8 - Validation</p>
                    </div>
                    <Badge className="bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-300">
                      Validating
                    </Badge>
                  </div>
                  <div className="mt-2">
                    <p className="text-sm">
                      <span className="font-medium">Validation Progress:</span> 68% |
                      <span className="font-medium ml-2">ETA:</span> 2 days
                    </p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="privacy">
          <Card>
            <CardHeader>
              <CardTitle>Privacy & Security Metrics</CardTitle>
              <CardDescription>Federated learning privacy guarantees</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between p-3 border-b">
                  <div>
                    <h4 className="font-medium">Differential Privacy</h4>
                    <p className="text-sm text-gray-500">Epsilon value across network</p>
                  </div>
                  <div className="text-right">
                    <p className="font-medium">ε = 2.4</p>
                    <p className="text-xs text-green-600 dark:text-green-400">Strong Privacy Guarantee</p>
                  </div>
                </div>

<div className="flex items-center justify-between p-3 border-b">
                  <div>
                    <h4 className="font-medium">Secure Aggregation</h4>
                    <p className="text-sm text-gray-500">Encrypted model updates</p>
                  </div>
                  <div className="text-right">
                    <p className="font-medium">Enabled</p>
                    <p className="text-xs text-green-600 dark:text-green-400">256-bit encryption</p>
                  </div>
                </div>

<div className="flex items-center justify-between p-3 border-b">
                  <div>
                    <h4 className="font-medium">Model Inversion Protection</h4>
                    <p className="text-sm text-gray-500">Anti-reconstruction measures</p>
                  </div>
                  <div className="text-right">
                    <p className="font-medium">Active</p>
                    <p className="text-xs text-green-600 dark:text-green-400">Gradient clipping applied</p>
                  </div>
                </div>

<div className="flex items-center justify-between p-3 border-b">
                  <div>
                    <h4 className="font-medium">Membership Inference Protection</h4>
                    <p className="text-sm text-gray-500">Training data privacy</p>
                  </div>
                  <div className="text-right">
                    <p className="font-medium">Active</p>
                    <p className="text-xs text-green-600 dark:text-green-400">L2 regularization</p>
                  </div>
                </div>

<div className="flex items-center justify-between p-3">
                  <div>
                    <h4 className="font-medium">Last Privacy Audit</h4>
                    <p className="text-sm text-gray-500">Independent verification</p>
                  </div>
                  <div className="text-right">
                    <p className="font-medium">14 days ago</p>
                    <p className="text-xs text-green-600 dark:text-green-400">All tests passed</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="institutions">
          <Card>
            <CardHeader>
              <CardTitle>Participating Institutions</CardTitle>
              <CardDescription>Healthcare systems in the federated network</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div className="flex items-center justify-between p-3 bg-green-50 dark:bg-green-900/10 rounded-md">
                  <div className="flex items-center">
                    <div className="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center text-green-700">
                      MC
                    </div>
                    <div className="ml-3">
                      <h4 className="font-medium">Memorial Cancer Center</h4>
                      <p className="text-xs text-gray-500">New York, NY</p>
                    </div>
                  </div>
                  <Badge className="bg-green-100 text-green-800">Active</Badge>
                </div>

<div className="flex items-center justify-between p-3 bg-green-50 dark:bg-green-900/10 rounded-md">
                  <div className="flex items-center">
                    <div className="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center text-green-700">
                      UH
                    </div>
                    <div className="ml-3">
                      <h4 className="font-medium">University Hospital</h4>
                      <p className="text-xs text-gray-500">Boston, MA</p>
                    </div>
                  </div>
                  <Badge className="bg-green-100 text-green-800">Active</Badge>
                </div>

<div className="flex items-center justify-between p-3 bg-green-50 dark:bg-green-900/10 rounded-md">
                  <div className="flex items-center">
                    <div className="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center text-green-700">
                      WC
                    </div>
                    <div className="ml-3">
                      <h4 className="font-medium">Western Cancer Institute</h4>
                      <p className="text-xs text-gray-500">San Francisco, CA</p>
                    </div>
                  </div>
                  <Badge className="bg-green-100 text-green-800">Active</Badge>
                </div>

<div className="flex items-center justify-between p-3 bg-yellow-50 dark:bg-yellow-900/10 rounded-md">
                  <div className="flex items-center">
                    <div className="h-8 w-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-700">
                      MH
                    </div>
                    <div className="ml-3">
                      <h4 className="font-medium">Midwest Health System</h4>
                      <p className="text-xs text-gray-500">Chicago, IL</p>
                    </div>
                  </div>
                  <Badge className="bg-yellow-100 text-yellow-800">Syncing</Badge>
                </div>

<div className="flex items-center justify-between p-3 bg-green-50 dark:bg-green-900/10 rounded-md">
                  <div className="flex items-center">
                    <div className="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center text-green-700">
                      SC
                    </div>
                    <div className="ml-3">
                      <h4 className="font-medium">Southern Cancer Network</h4>
                      <p className="text-xs text-gray-500">Atlanta, GA</p>
                    </div>
                  </div>
                  <Badge className="bg-green-100 text-green-800">Active</Badge>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/clinical-decision-support.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { TreatmentComparisonChart } from "@/components/charts/treatment-comparison-chart"
import { SurvivalPredictionChart } from "@/components/charts/survival-prediction-chart"

export default function ClinicalDecisionSupport() {
  const [selectedPatient, setSelectedPatient] = useState("patient-1")
  const [selectedCancer, setSelectedCancer] = useState("lung")

return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Clinical Decision Support</h2>
          <p className="text-muted-foreground">AI-driven treatment recommendations and outcome predictions</p>
        </div>

<div className="flex items-center gap-4">
          <Select value={selectedCancer} onValueChange={setSelectedCancer}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Select cancer type" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="lung">Lung Cancer</SelectItem>
              <SelectItem value="breast">Breast Cancer</SelectItem>
              <SelectItem value="colorectal">Colorectal Cancer</SelectItem>
              <SelectItem value="prostate">Prostate Cancer</SelectItem>
            </SelectContent>
          </Select>

<Button>New Analysis</Button>
        </div>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Treatment Comparison</CardTitle>
          <CardDescription>Predicted outcomes for available treatment options</CardDescription>
        </CardHeader>
        <CardContent className="h-[400px]">
          <TreatmentComparisonChart cancerType={selectedCancer} />
        </CardContent>
        <CardFooter className="bg-gray-50 dark:bg-gray-800/50 border-t">
          <p className="text-sm text-gray-500">
            Analysis based on 24,382 similar patient cases across the federated network
          </p>
        </CardFooter>
      </Card>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="md:col-span-2">
          <CardHeader>
            <CardTitle>Survival Prediction</CardTitle>
            <CardDescription>Estimated survival probability by treatment approach</CardDescription>
          </CardHeader>
          <CardContent className="h-80">
            <SurvivalPredictionChart cancerType={selectedCancer} />
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Recommended Approach</CardTitle>
            <CardDescription>AI-generated treatment recommendation</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="bg-purple-50 dark:bg-purple-900/20 p-4 rounded-md">
                <h4 className="font-medium text-purple-900 dark:text-purple-300">Primary Recommendation</h4>
                <div className="mt-2">
                  <p className="font-medium">Osimertinib + Pembrolizumab</p>
                  <div className="flex items-center mt-1">
                    <div className="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                      <div className="bg-purple-600 h-2 rounded-full" style={{ width: "92%" }}></div>
                    </div>
                    <span className="ml-2 text-xs font-medium">92%</span>
                  </div>
                  <p className="text-xs text-gray-500 mt-1">
                    Confidence score based on genomic profile and clinical data
                  </p>
                </div>
              </div>

<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md">
                <h4 className="font-medium">Alternative Options</h4>
                <div className="mt-2 space-y-3">
                  <div>
                    <p className="text-sm font-medium">Durvalumab + Chemotherapy</p>
                    <div className="flex items-center mt-1">
                      <div className="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                        <div className="bg-blue-500 h-2 rounded-full" style={{ width: "78%" }}></div>
                      </div>
                      <span className="ml-2 text-xs font-medium">78%</span>
                    </div>
                  </div>

<div>
                    <p className="text-sm font-medium">Targeted Therapy (EGFR) Only</p>
                    <div className="flex items-center mt-1">
                      <div className="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                        <div className="bg-blue-500 h-2 rounded-full" style={{ width: "65%" }}></div>
                      </div>
                      <span className="ml-2 text-xs font-medium">65%</span>
                    </div>
                  </div>
                </div>
              </div>

<div>
                <h4 className="text-sm font-medium text-gray-500">Clinical Trial Matches</h4>
                <p className="text-sm mt-1">3 potential matches found</p>
                <Button variant="outline" size="sm" className="mt-2 w-full">
                  View Trial Matches
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<Tabs defaultValue="evidence">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="evidence">Supporting Evidence</TabsTrigger>
          <TabsTrigger value="biomarkers">Key Biomarkers</TabsTrigger>
          <TabsTrigger value="similar">Similar Cases</TabsTrigger>
        </TabsList>

<TabsContent value="evidence">
          <Card>
            <CardHeader>
              <CardTitle>Supporting Evidence</CardTitle>
              <CardDescription>Clinical evidence supporting the recommended approach</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="border-l-4 border-purple-500 pl-4 py-2">
                  <h4 className="font-medium">Genomic Evidence</h4>
                  <p className="text-sm mt-1">
                    EGFR mutation (exon 19 deletion) shows 72% response rate to Osimertinib in similar patients. High
                    PD-L1 expression (60%) indicates potential benefit from immune checkpoint inhibition.
                  </p>
                </div>

<div className="border-l-4 border-blue-500 pl-4 py-2">
                  <h4 className="font-medium">Clinical Trial Data</h4>
                  <p className="text-sm mt-1">
                    FLAURA2 trial demonstrated 24-month PFS of 38% for Osimertinib + Pembrolizumab vs. 20% for
                    Osimertinib alone in EGFR-mutated NSCLC with high PD-L1 expression.
                  </p>
                </div>

<div className="border-l-4 border-green-500 pl-4 py-2">
                  <h4 className="font-medium">Real-World Evidence</h4>
                  <p className="text-sm mt-1">
                    Analysis of 842 similar patients in the federated network shows 18.4 months median PFS with the
                    recommended combination vs. 13.2 months with standard of care.
                  </p>
                </div>

<div className="border-l-4 border-orange-500 pl-4 py-2">
                  <h4 className="font-medium">Treatment Guidelines</h4>
                  <p className="text-sm mt-1">
                    NCCN Guidelines (v3.2023) list Osimertinib as Category 1 for EGFR-mutated NSCLC. Combination with
                    immunotherapy is Category 2A for high PD-L1 expressors.
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="biomarkers">
          <Card>
            <CardHeader>
              <CardTitle>Key Biomarkers</CardTitle>
              <CardDescription>Biomarkers influencing treatment decisions</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="bg-purple-50 dark:bg-purple-900/20 p-4 rounded-md">
                  <h4 className="font-medium">EGFR Mutation</h4>
                  <Badge className="mt-1 bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
                    Exon 19 Deletion
                  </Badge>
                  <p className="text-sm mt-2">
                    <span className="font-medium">Significance:</span> Strong predictor of response to EGFR TKIs
                  </p>
                  <p className="text-sm">
                    <span className="font-medium">Recommended Drugs:</span> Osimertinib (1st line)
                  </p>
                </div>

<div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-md">
                  <h4 className="font-medium">PD-L1 Expression</h4>
                  <Badge className="mt-1 bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                    60% (High)
                  </Badge>
                  <p className="text-sm mt-2">
                    <span className="font-medium">Significance:</span> Predictor of immunotherapy response
                  </p>
                  <p className="text-sm">
                    <span className="font-medium">Recommended Drugs:</span> Pembrolizumab, Nivolumab
                  </p>
                </div>

<div className="bg-green-50 dark:bg-green-900/20 p-4 rounded-md">
                  <h4 className="font-medium">Tumor Mutational Burden</h4>
                  <Badge className="mt-1 bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                    15 mut/Mb (High)
                  </Badge>
                  <p className="text-sm mt-2">
                    <span className="font-medium">Significance:</span> Associated with immunotherapy benefit
                  </p>
                  <p className="text-sm">
                    <span className="font-medium">Impact:</span> Supports addition of immunotherapy
                  </p>
                </div>

<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md">
                  <h4 className="font-medium">Other Biomarkers</h4>
                  <div className="mt-2 space-y-2">
                    <div className="flex justify-between">
                      <span className="text-sm">ALK</span>
                      <span className="text-sm font-medium">Negative</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm">ROS1</span>
                      <span className="text-sm font-medium">Negative</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm">BRAF</span>
                      <span className="text-sm font-medium">Negative</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm">KRAS</span>
                      <span className="text-sm font-medium">Negative</span>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="similar">
          <Card>
            <CardHeader>
              <CardTitle>Similar Patient Cases</CardTitle>
              <CardDescription>De-identified similar cases from the federated network</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md">
                  <div className="flex justify-between items-start">
                    <div>
                      <h4 className="font-medium">Patient #38291</h4>
                      <p className="text-sm text-gray-500">56y, Male, Stage IIIB NSCLC</p>
                    </div>
                    <Badge className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                      Response
                    </Badge>
                  </div>
                  <div className="mt-2">
                    <p className="text-sm">
                      <span className="font-medium">Biomarkers:</span> EGFR+ (exon 19), PD-L1 55%, TMB High
                    </p>
                    <p className="text-sm">
                      <span className="font-medium">Treatment:</span> Osimertinib + Pembrolizumab
                    </p>
                    <p className="text-sm">
                      <span className="font-medium">Outcome:</span> PR at 3 months, maintained for 22 months
                    </p>
                  </div>
                </div>

<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md">
                  <div className="flex justify-between items-start">
                    <div>
                      <h4 className="font-medium">Patient #42156</h4>
                      <p className="text-sm text-gray-500">61y, Female, Stage IV NSCLC</p>
                    </div>
                    <Badge className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                      Response
                    </Badge>
                  </div>
                  <div className="mt-2">
                    <p className="text-sm">
                      <span className="font-medium">Biomarkers:</span> EGFR+ (exon 19), PD-L1 70%, TMB Intermediate
                    </p>
                    <p className="text-sm">
                      <span className="font-medium">Treatment:</span> Osimertinib + Pembrolizumab
                    </p>
                    <p className="text-sm">
                      <span className="font-medium">Outcome:</span> PR at 2 months, maintained for 18 months
                    </p>
                  </div>
                </div>

<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md">
                  <div className="flex justify-between items-start">
                    <div>
                      <h4 className="font-medium">Patient #29847</h4>
                      <p className="text-sm text-gray-500">52y, Male, Stage IIIA NSCLC</p>
                    </div>
                    <Badge className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
                      Stable
                    </Badge>
                  </div>
                  <div className="mt-2">
                    <p className="text-sm">
                      <span className="font-medium">Biomarkers:</span> EGFR+ (exon 19), PD-L1 40%, TMB Intermediate
                    </p>
                    <p className="text-sm">
                      <span className="font-medium">Treatment:</span> Osimertinib + Pembrolizumab
                    </p>
                    <p className="text-sm">
                      <span className="font-medium">Outcome:</span> SD at 3 months, maintained for 12 months
                    </p>
                  </div>
                </div>

<Button variant="outline" className="w-full">
                  View More Similar Cases (24)
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/security-compliance.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Shield, Lock, CheckCircle, Clock, FileText } from "lucide-react"
import { SecurityAuditChart } from "@/components/charts/security-audit-chart"

export default function SecurityCompliance() {
  return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Security & Compliance</h2>
          <p className="text-muted-foreground">Advanced security measures and regulatory compliance</p>
        </div>

<div className="flex items-center gap-2">
          <Badge variant="outline" className="bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-300">
            All Systems Secure
          </Badge>
          <Button variant="outline" size="sm">
            Run Security Scan
          </Button>
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium flex items-center">
              <Shield className="h-4 w-4 mr-2 text-green-600 dark:text-green-400" />
              HIPAA Compliance
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-700 dark:text-green-400">100%</div>
            <p className="text-xs text-green-600 dark:text-green-400">All requirements met</p>
          </CardContent>
        </Card>

<Card className="bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium flex items-center">
              <Shield className="h-4 w-4 mr-2 text-green-600 dark:text-green-400" />
              GDPR Compliance
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-700 dark:text-green-400">100%</div>
            <p className="text-xs text-green-600 dark:text-green-400">All requirements met</p>
          </CardContent>
        </Card>

<Card className="bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium flex items-center">
              <Lock className="h-4 w-4 mr-2 text-green-600 dark:text-green-400" />
              Data Encryption
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-700 dark:text-green-400">256-bit</div>
            <p className="text-xs text-green-600 dark:text-green-400">End-to-end encryption</p>
          </CardContent>
        </Card>

<Card className="bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium flex items-center">
              <Clock className="h-4 w-4 mr-2 text-green-600 dark:text-green-400" />
              Last Audit
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-700 dark:text-green-400">3 days</div>
            <p className="text-xs text-green-600 dark:text-green-400">All tests passed</p>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Security Audit History</CardTitle>
          <CardDescription>System security audits and compliance checks</CardDescription>
        </CardHeader>
        <CardContent className="h-[400px]">
          <SecurityAuditChart />
        </CardContent>
      </Card>

<Tabs defaultValue="zero-trust">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="zero-trust">Zero-Trust Architecture</TabsTrigger>
          <TabsTrigger value="data-privacy">Data Privacy</TabsTrigger>
          <TabsTrigger value="compliance">Compliance Reports</TabsTrigger>
        </TabsList>

<TabsContent value="zero-trust">
          <Card>
            <CardHeader>
              <CardTitle>Zero-Trust Security Model</CardTitle>
              <CardDescription>Device-level identification and authentication</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md">
                  <h4 className="font-medium flex items-center">
                    <CheckCircle className="h-4 w-4 mr-2 text-green-600 dark:text-green-400" />
                    Device Authentication
                  </h4>
                  <p className="text-sm mt-1">
                    All devices require hardware-rooted authentication before accessing the network. Currently 248
                    authorized devices across 12 institutions.
                  </p>
                </div>

<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md">
                  <h4 className="font-medium flex items-center">
                    <CheckCircle className="h-4 w-4 mr-2 text-green-600 dark:text-green-400" />
                    Continuous Verification
                  </h4>
                  <p className="text-sm mt-1">
                    All access requests are continuously verified, with no persistent trust relationships. Average of
                    24,500 verifications per day.
                  </p>
                </div>

<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md">
                  <h4 className="font-medium flex items-center">
                    <CheckCircle className="h-4 w-4 mr-2 text-green-600 dark:text-green-400" />
                    Least Privilege Access
                  </h4>
                  <p className="text-sm mt-1">
                    All users and devices have minimal access rights required for their role. 42 distinct access levels
                    defined across the system.
                  </p>
                </div>

<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md">
                  <h4 className="font-medium flex items-center">
                    <CheckCircle className="h-4 w-4 mr-2 text-green-600 dark:text-green-400" />
                    Micro-Segmentation
                  </h4>
                  <p className="text-sm mt-1">
                    Network is divided into secure zones with separate authentication requirements. 18 security zones
                    implemented across the federated network.
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="data-privacy">
          <Card>
            <CardHeader>
              <CardTitle>Data Privacy Controls</CardTitle>
              <CardDescription>Privacy-enhancing technologies and data protection</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between p-3 border-b">
                  <div>
                    <h4 className="font-medium">Differential Privacy</h4>
                    <p className="text-sm text-gray-500">Noise addition to protect individual data</p>
                  </div>
                  <div className="text-right">
                    <Badge className="bg-green-100 text-green-800">Enabled</Badge>
                    <p className="text-xs text-gray-500 mt-1">ε = 2.4 (Strong)</p>
                  </div>
                </div>

<div className="flex items-center justify-between p-3 border-b">
                  <div>
                    <h4 className="font-medium">Federated Computation</h4>
                    <p className="text-sm text-gray-500">No raw PHI leaves local systems</p>
                  </div>
                  <div className="text-right">
                    <Badge className="bg-green-100 text-green-800">Enforced</Badge>
                    <p className="text-xs text-gray-500 mt-1">All institutions</p>
                  </div>
                </div>

<div className="flex items-center justify-between p-3 border-b">
                  <div>
                    <h4 className="font-medium">Homomorphic Encryption</h4>
                    <p className="text-sm text-gray-500">Computation on encrypted data</p>
                  </div>
                  <div className="text-right">
                    <Badge className="bg-green-100 text-green-800">Active</Badge>
                    <p className="text-xs text-gray-500 mt-1">For sensitive data</p>
                  </div>
                </div>

<div className="flex items-center justify-between p-3 border-b">
                  <div>
                    <h4 className="font-medium">Secure Multi-party Computation</h4>
                    <p className="text-sm text-gray-500">Joint computation without data sharing</p>
                  </div>
                  <div className="text-right">
                    <Badge className="bg-green-100 text-green-800">Enabled</Badge>
                    <p className="text-xs text-gray-500 mt-1">For model aggregation</p>
                  </div>
                </div>

<div className="flex items-center justify-between p-3">
                  <div>
                    <h4 className="font-medium">Data Retention Policies</h4>
                    <p className="text-sm text-gray-500">Automatic data lifecycle management</p>
                  </div>
                  <div className="text-right">
                    <Badge className="bg-green-100 text-green-800">Enforced</Badge>
                    <p className="text-xs text-gray-500 mt-1">30-day ephemeral data</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="compliance">
          <Card>
            <CardHeader>
              <CardTitle>Compliance Reports</CardTitle>
              <CardDescription>Regulatory compliance documentation</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-md">
                  <div className="flex items-center">
                    <FileText className="h-5 w-5 text-blue-500 mr-3" />
                    <div>
                      <h4 className="font-medium">HIPAA Compliance Audit</h4>
                      <p className="text-xs text-gray-500">Complete assessment of HIPAA safeguards</p>
                    </div>
                  </div>
                  <Button variant="outline" size="sm">
                    View Report
                  </Button>
                </div>

<div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-md">
                  <div className="flex items-center">
                    <FileText className="h-5 w-5 text-blue-500 mr-3" />
                    <div>
                      <h4 className="font-medium">GDPR Data Protection Impact Assessment</h4>
                      <p className="text-xs text-gray-500">Analysis of data processing activities</p>
                    </div>
                  </div>
                  <Button variant="outline" size="sm">
                    View Report
                  </Button>
                </div>

<div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-md">
                  <div className="flex items-center">
                    <FileText className="h-5 w-5 text-blue-500 mr-3" />
                    <div>
                      <h4 className="font-medium">SOC 2 Type II Report</h4>
                      <p className="text-xs text-gray-500">Security, availability, and confidentiality</p>
                    </div>
                  </div>
                  <Button variant="outline" size="sm">
                    View Report
                  </Button>
                </div>

<div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-md">
                  <div className="flex items-center">
                    <FileText className="h-5 w-5 text-blue-500 mr-3" />
                    <div>
                      <h4 className="font-medium">Penetration Test Results</h4>
                      <p className="text-xs text-gray-500">External security assessment</p>
                    </div>
                  </div>
                  <Button variant="outline" size="sm">
                    View Report
                  </Button>
                </div>

<div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-md">
                  <div className="flex items-center">
                    <FileText className="h-5 w-5 text-blue-500 mr-3" />
                    <div>
                      <h4 className="font-medium">Risk Assessment</h4>
                      <p className="text-xs text-gray-500">Comprehensive security risk analysis</p>
                    </div>
                  </div>
                  <Button variant="outline" size="sm">
                    View Report
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/oncology-workflow.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Calendar, Clock, Users, MessageSquare, FileText, Video } from "lucide-react"

export default function OncologyWorkflow() {
  const [activeTab, setActiveTab] = useState("tumor-board")

return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Oncology Workflow</h2>
          <p className="text-muted-foreground">Collaborative tools for oncology care teams</p>
        </div>

<div className="flex items-center gap-2">
          <Button variant="outline" size="sm">
            <Calendar className="h-4 w-4 mr-2" />
            Schedule Meeting
          </Button>
          <Button>
            <Users className="h-4 w-4 mr-2" />
            New Tumor Board
          </Button>
        </div>
      </div>

<Tabs defaultValue="tumor-board" value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="tumor-board">Tumor Board</TabsTrigger>
          <TabsTrigger value="telehealth">Telehealth</TabsTrigger>
          <TabsTrigger value="care-coordination">Care Coordination</TabsTrigger>
        </TabsList>

<TabsContent value="tumor-board">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <Card className="md:col-span-2">
              <CardHeader>
                <CardTitle>Upcoming Tumor Board Sessions</CardTitle>
                <CardDescription>Scheduled multidisciplinary team meetings</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="bg-purple-50 dark:bg-purple-900/20 p-4 rounded-md">
                    <div className="flex justify-between items-start">
                      <div>
                        <h4 className="font-medium">Thoracic Oncology Tumor Board</h4>
                        <div className="flex items-center mt-1 text-sm text-gray-500">
                          <Calendar className="h-4 w-4 mr-1" />
                          <span>Tomorrow, 10:00 AM - 11:30 AM</span>
                        </div>
                      </div>
                      <Badge className="bg-green-100 text-green-800">Upcoming</Badge>
                    </div>
                    <div className="mt-3">
                      <p className="text-sm">
                        <span className="font-medium">Cases:</span> 6 patients scheduled for review
                      </p>
                      <p className="text-sm">
                        <span className="font-medium">Focus:</span> EGFR+ NSCLC treatment strategies
                      </p>
                    </div>
                    <div className="mt-3 flex items-center">
                      <Button variant="outline" size="sm" className="mr-2">
                        <FileText className="h-4 w-4 mr-1" />
                        View Cases
                      </Button>
                      <Button size="sm">
                        <Video className="h-4 w-4 mr-1" />
                        Join Meeting
                      </Button>
                    </div>
                  </div>

<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md">
                    <div className="flex justify-between items-start">
                      <div>
                        <h4 className="font-medium">Molecular Tumor Board</h4>
                        <div className="flex items-center mt-1 text-sm text-gray-500">
                          <Calendar className="h-4 w-4 mr-1" />
                          <span>Friday, 2:00 PM - 3:30 PM</span>
                        </div>
                      </div>
                      <Badge className="bg-gray-200 text-gray-800">Scheduled</Badge>
                    </div>
                    <div className="mt-3">
                      <p className="text-sm">
                        <span className="font-medium">Cases:</span> 4 patients with complex genomic profiles
                      </p>
                      <p className="text-sm">
                        <span className="font-medium">Focus:</span> Novel targeted therapy approaches
                      </p>
                    </div>
                    <div className="mt-3">
                      <Button variant="outline" size="sm">
                        <FileText className="h-4 w-4 mr-1" />
                        View Cases
                      </Button>
                    </div>
                  </div>

<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md">
                    <div className="flex justify-between items-start">
                      <div>
                        <h4 className="font-medium">Breast Cancer Tumor Board</h4>
                        <div className="flex items-center mt-1 text-sm text-gray-500">
                          <Calendar className="h-4 w-4 mr-1" />
                          <span>Next Tuesday, 9:00 AM - 10:30 AM</span>
                        </div>
                      </div>
                      <Badge className="bg-gray-200 text-gray-800">Scheduled</Badge>
                    </div>
                    <div className="mt-3">
                      <p className="text-sm">
                        <span className="font-medium">Cases:</span> 5 patients scheduled
                      </p>
                      <p className="text-sm">
                        <span className="font-medium">Focus:</span> Neoadjuvant therapy selection
                      </p>
                    </div>
                    <div className="mt-3">
                      <Button variant="outline" size="sm">
                        <FileText className="h-4 w-4 mr-1" />
                        View Cases
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Team Members</CardTitle>
                <CardDescription>Multidisciplinary team participants</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center">
                    <Avatar className="h-10 w-10 mr-3">
                      <AvatarFallback>JD</AvatarFallback>
                    </Avatar>
                    <div>
                      <p className="font-medium">Dr. James Davis</p>
                      <p className="text-xs text-gray-500">Medical Oncology</p>
                    </div>
                  </div>

<div className="flex items-center">
                    <Avatar className="h-10 w-10 mr-3">
                      <AvatarFallback>SL</AvatarFallback>
                    </Avatar>
                    <div>
                      <p className="font-medium">Dr. Sarah Lee</p>
                      <p className="text-xs text-gray-500">Radiation Oncology</p>
                    </div>
                  </div>

<div className="flex items-center">
                    <Avatar className="h-10 w-10 mr-3">
                      <AvatarFallback>RK</AvatarFallback>
                    </Avatar>
                    <div>
                      <p className="font-medium">Dr. Robert Kim</p>
                      <p className="text-xs text-gray-500">Thoracic Surgery</p>
                    </div>
                  </div>

<div className="flex items-center">
                    <Avatar className="h-10 w-10 mr-3">
                      <AvatarFallback>MP</AvatarFallback>
                    </Avatar>
                    <div>
                      <p className="font-medium">Dr. Maria Patel</p>
                      <p className="text-xs text-gray-500">Pathology</p>
                    </div>
                  </div>

<div className="flex items-center">
                    <Avatar className="h-10 w-10 mr-3">
                      <AvatarFallback>DT</AvatarFallback>
                    </Avatar>
                    <div>
                      <p className="font-medium">Dr. David Thompson</p>
                      <p className="text-xs text-gray-500">Radiology</p>
                    </div>
                  </div>

<div className="flex items-center">
                    <Avatar className="h-10 w-10 mr-3">
                      <AvatarFallback>JW</AvatarFallback>
                    </Avatar>
                    <div>
                      <p className="font-medium">Jennifer Wilson</p>
                      <p className="text-xs text-gray-500">Nurse Navigator</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

<Card className="mt-6">
            <CardHeader>
              <CardTitle>Case Discussion</CardTitle>
              <CardDescription>Collaborative case review and documentation</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md">
                  <div className="flex items-start">
                    <Avatar className="h-8 w-8 mr-3">
                      <AvatarFallback>JD</AvatarFallback>
                    </Avatar>
                    <div>
                      <div className="flex items-center">
                        <p className="font-medium">Dr. James Davis</p>
                        <span className="text-xs text-gray-500 ml-2">Yesterday, 3:42 PM</span>
                      </div>
                      <p className="text-sm mt-1">
                        Patient JD-58 presents with stage IIIB NSCLC with EGFR exon 19 deletion and high PD-L1
                        expression. The AI model suggests Osimertinib + Pembrolizumab with a 92% confidence score. I'm
                        concerned about the potential for increased toxicity with this combination. Thoughts?
                      </p>
                    </div>
                  </div>
                </div>

<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md">
                  <div className="flex items-start">
                    <Avatar className="h-8 w-8 mr-3">
                      <AvatarFallback>SL</AvatarFallback>
                    </Avatar>
                    <div>
                      <div className="flex items-center">
                        <p className="font-medium">Dr. Sarah Lee</p>
                        <span className="text-xs text-gray-500 ml-2">Yesterday, 4:15 PM</span>
                      </div>
                      <p className="text-sm mt-1">
                        The FLAURA2 data does show improved PFS with the combination, but you're right about toxicity
                        concerns. The digital twin model predicts a low risk of severe immune-related adverse events for
                        this patient. I'd support trying the combination with close monitoring.
                      </p>
                    </div>
                  </div>
                </div>

<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md">
                  <div className="flex items-start">
                    <Avatar className="h-8 w-8 mr-3">
                      <AvatarFallback>MP</AvatarFallback>
                    </Avatar>
                    <div>
                      <div className="flex items-center">
                        <p className="font-medium">Dr. Maria Patel</p>
                        <span className="text-xs text-gray-500 ml-2">Yesterday, 4:32 PM</span>
                      </div>
                      <p className="text-sm mt-1">
                        The pathology review confirms high PD-L1 expression (60%) and the EGFR mutation. TMB is also
                        high at 15 mut/Mb, which further supports the addition of immunotherapy. I've uploaded the
                        complete molecular profile to the patient's digital twin.
                      </p>
                    </div>
                  </div>
                </div>
              </div>

Telehealth Sessions Virtual consultations and remote patient monitoring

Patient Consultation - John D.

Today, 2:00 PM - 2:30 PM

Upcoming

Purpose: Treatment plan discussion

AI Support: Digital twin visualization, treatment comparison

Patient Follow-up - Sarah M.

Tomorrow, 10:30 AM - 11:00 AM

Scheduled

Purpose: Treatment response assessment

AI Support: Biomarker trend analysis, response prediction

Multidisciplinary Consultation - Robert K.

Friday, 1:00 PM - 1:45 PM

Scheduled

Purpose: Treatment planning for complex case

AI Support: Multi-omics analysis, clinical trial matching

Telehealth Analytics

Sessions This Week

92%

Patient Satisfaction

18 min

Avg. Session Duration

Care Coordination Dashboard Patient care workflow and team coordination

Active Care Plans

94%

On-Time Interventions

Pending Approvals

Active Care Plans

John D. - Lung Cancer

Stage IIIB NSCLC, EGFR+

On Track

Current Treatment

Osimertinib + Pembrolizumab

Next Appointment

Today, 2:00 PM

Last Imaging

5 days ago

Response Status

Partial Response

Sarah M. - Breast Cancer

Stage II, HR+/HER2-

Attention Needed

Current Treatment

Neoadjuvant Chemotherapy

Next Appointment

Tomorrow, 10:30 AM

Last Imaging

12 days ago

Response Status

Stable Disease

Robert K. - Colorectal Cancer

Stage IV, KRAS Mutated

On Track

Current Treatment

FOLFOXIRI + Bevacizumab

Next Appointment

Friday, 1:00 PM

Last Imaging

7 days ago

Response Status

Partial Response

) } [V0_FILE]typescriptreact:file="components/charts/patient-metrics-chart.tsx" isMerged="true" "use client" import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = [ { name: "Lung", active: 428, new: 52, remission: 186, }, { name: "Breast", active: 512, new: 64, remission: 231, }, { name: "Colorectal", active: 346, new: 41, remission: 154, }, { name: "Prostate", active: 289, new: 37, remission: 132, }, { name: "Melanoma", active: 176, new: 24, remission: 87, }, ] export function PatientMetricsChart() { return ( ) } [V0_FILE]typescriptreact:file="components/charts/model-performance-chart.tsx" isMerged="true" "use client" import { Line, LineChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = [ { name: "Lung", accuracy: 94.2, precision: 92.8, recall: 91.5, }, { name: "Breast", accuracy: 95.6, precision: 94.3, recall: 93.1, }, { name: "Colorectal", accuracy: 93.8, precision: 91.7, recall: 90.9, }, { name: "Prostate", accuracy: 92.5, precision: 90.8, recall: 89.6, }, { name: "Melanoma", accuracy: 91.7, precision: 89.5, recall: 88.2, }, ] export function ModelPerformanceChart() { return ( ) } [V0_FILE]typescriptreact:file="components/charts/federated-participants-chart.tsx" isMerged="true" "use client" import { Pie, PieChart, Cell, ResponsiveContainer, Tooltip, Legend } from "recharts" const data = [ { name: "Academic Medical Centers", value: 5 }, { name: "Community Hospitals", value: 4 }, { name: "Cancer Centers", value: 3 }, { name: "Research Institutions", value: 2 }, ] const COLORS = ["#8884d8", "#82ca9d", "#ffc658", "#ff8042"] export function FederatedParticipantsChart() { return ( `${name} ${(percent * 100).toFixed(0)}%`} > {data.map((entry, index) => ( ))} [`${value} institutions`, "Count"]} /> ) } [V0_FILE]typescriptreact:file="components/charts/treatment-response-chart.tsx" isMerged="true" "use client" import { Line, LineChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = { "patient-1": [ { week: 0, tumorSize: 100, predicted: 100 }, { week: 4, tumorSize: 92, predicted: 90 }, { week: 8, tumorSize: 78, predicted: 76 }, { week: 12, tumorSize: 65, predicted: 62 }, { week: 16, tumorSize: 52, predicted: 50 }, { week: 20, tumorSize: 42, predicted: 40 }, { week: 24, tumorSize: 35, predicted: 32 }, { week: 28, tumorSize: null, predicted: 26 }, { week: 32, tumorSize: null, predicted: 22 }, { week: 36, tumorSize: null, predicted: 18 }, ], "patient-2": [ { week: 0, tumorSize: 100, predicted: 100 }, { week: 4, tumorSize: 95, predicted: 94 }, { week: 8, tumorSize: 85, predicted: 84 }, { week: 12, tumorSize: 72, predicted: 70 }, { week: 16, tumorSize: 60, predicted: 58 }, { week: 20, tumorSize: 52, predicted: 48 }, { week: 24, tumorSize: null, predicted: 40 }, { week: 28, tumorSize: null, predicted: 34 }, { week: 32, tumorSize: null, predicted: 30 }, { week: 36, tumorSize: null, predicted: 26 }, ], "patient-3": [ { week: 0, tumorSize: 100, predicted: 100 }, { week: 4, tumorSize: 88, predicted: 86 }, { week: 8, tumorSize: 70, predicted: 68 }, { week: 12, tumorSize: 58, predicted: 54 }, { week: 16, tumorSize: 45, predicted: 42 }, { week: 20, tumorSize: null, predicted: 32 }, { week: 24, tumorSize: null, predicted: 24 }, { week: 28, tumorSize: null, predicted: 18 }, { week: 32, tumorSize: null, predicted: 14 }, { week: 36, tumorSize: null, predicted: 10 }, ], } export function TreatmentResponseChart({ patientId = "patient-1" }) { const patientData = data[patientId] || data["patient-1"] return ( ) } [V0_FILE]typescriptreact:file="components/charts/biomarker-trends-chart.tsx" isMerged="true" "use client" import { Line, LineChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = { "patient-1": [ { week: 0, ctDNA: 8.4, CEA: 12.6, LDH: 320 }, { week: 4, ctDNA: 7.2, CEA: 10.8, LDH: 290 }, { week: 8, ctDNA: 5.6, CEA: 8.4, LDH: 260 }, { week: 12, ctDNA: 3.8, CEA: 6.2, LDH: 240 }, { week: 16, ctDNA: 2.4, CEA: 4.8, LDH: 220 }, { week: 20, ctDNA: 1.6, CEA: 3.5, LDH: 210 }, ], "patient-2": [ { week: 0, ctDNA: 6.8, CEA: 9.2, LDH: 280 }, { week: 4, ctDNA: 6.2, CEA: 8.6, LDH: 270 }, { week: 8, ctDNA: 5.4, CEA: 7.8, LDH: 250 }, { week: 12, ctDNA: 4.2, CEA: 6.4, LDH: 230 }, { week: 16, ctDNA: 3.6, CEA: 5.2, LDH: 220 }, { week: 20, ctDNA: 2.8, CEA: 4.6, LDH: 210 }, ], "patient-3": [ { week: 0, ctDNA: 9.6, CEA: 14.2, LDH: 340 }, { week: 4, ctDNA: 7.8, CEA: 11.6, LDH: 300 }, { week: 8, ctDNA: 5.2, CEA: 8.4, LDH: 260 }, { week: 12, ctDNA: 3.4, CEA: 5.8, LDH: 230 }, { week: 16, ctDNA: 2.2, CEA: 4.2, LDH: 210 }, { week: 20, ctDNA: 1.4, CEA: 3.2, LDH: 200 }, ], } export function BiomarkerTrendsChart({ patientId = "patient-1" }) { const patientData = data[patientId] || data["patient-1"] return ( ) } [V0_FILE]typescriptreact:file="components/charts/model-training-chart.tsx" isMerged="true" "use client" import { Line, LineChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = [ { round: 1, accuracy: 82.4, loss: 0.42 }, { round: 2, accuracy: 86.8, loss: 0.36 }, { round: 3, accuracy: 89.2, loss: 0.31 }, { round: 4, accuracy: 91.5, loss: 0.26 }, { round: 5, accuracy: 92.8, loss: 0.22 }, { round: 6, accuracy: 93.6, loss: 0.19 }, { round: 7, accuracy: 94.2, loss: 0.17 }, { round: 8, accuracy: 94.6, loss: 0.15 }, ] export function ModelTrainingChart() { return ( ) } [V0_FILE]typescriptreact:file="components/charts/data-contribution-chart.tsx" isMerged="true" "use client" import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = [ { name: "Memorial", patients: 428, dataPoints: 3.2, }, { name: "University", patients: 356, dataPoints: 2.8, }, { name: "Western", patients: 312, dataPoints: 2.4, }, { name: "Midwest", patients: 284, dataPoints: 2.1, }, { name: "Southern", patients: 246, dataPoints: 1.9, }, ] export function DataContributionChart() { return ( ) } [V0_FILE]typescriptreact:file="components/charts/treatment-comparison-chart.tsx" isMerged="true" "use client" import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = { lung: [ { name: "Osimertinib + Pembrolizumab", pfs: 18.4, os: 28.6, response: 76, }, { name: "Osimertinib Monotherapy", pfs: 13.2, os: 24.8, response: 62, }, { name: "Durvalumab + Chemotherapy", pfs: 12.6, os: 22.4, response: 58, }, { name: "Standard Chemotherapy", pfs: 8.4, os: 16.8, response: 42, }, ], breast: [ { name: "CDK4/6 + Endocrine", pfs: 24.8, os: 42.6, response: 82, }, { name: "Endocrine Monotherapy", pfs: 14.6, os: 36.4, response: 64, }, { name: "Chemotherapy", pfs: 12.2, os: 32.8, response: 58, }, { name: "Targeted + Chemotherapy", pfs: 18.6, os: 38.2, response: 72, }, ], colorectal: [ { name: "FOLFOXIRI + Bevacizumab", pfs: 12.4, os: 24.8, response: 68, }, { name: "FOLFOX + Bevacizumab", pfs: 10.6, os: 22.4, response: 58, }, { name: "FOLFIRI + Cetuximab", pfs: 9.8, os: 20.6, response: 54, }, { name: "Standard Chemotherapy", pfs: 7.2, os: 16.4, response: 42, }, ], prostate: [ { name: "ADT + Abiraterone + Docetaxel", pfs: 22.6, os: 48.4, response: 78, }, { name: "ADT + Abiraterone", pfs: 16.8, os: 42.6, response: 68, }, { name: "ADT + Docetaxel", pfs: 14.2, os: 38.4, response: 62, }, { name: "ADT Monotherapy", pfs: 8.6, os: 32.8, response: 48, }, ], } export function TreatmentComparisonChart({ cancerType = "lung" }) { const chartData = data[cancerType] || data["lung"] return ( ) } [V0_FILE]typescriptreact:file="components/charts/survival-prediction-chart.tsx" isMerged="true" "use client" import { Line, LineChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = { lung: [ { month: 0, recommended: 100, standard: 100 }, { month: 3, recommended: 98, standard: 96 }, { month: 6, recommended: 94, standard: 88 }, { month: 9, recommended: 88, standard: 78 }, { month: 12, recommended: 82, standard: 68 }, { month: 15, recommended: 76, standard: 58 }, { month: 18, recommended: 70, standard: 48 }, { month: 21, recommended: 64, standard: 42 }, { month: 24, recommended: 58, standard: 36 }, { month: 27, recommended: 52, standard: 32 }, { month: 30, recommended: 48, standard: 28 }, { month: 33, recommended: 44, standard: 24 }, { month: 36, recommended: 40, standard: 22 }, ], breast: [ { month: 0, recommended: 100, standard: 100 }, { month: 3, recommended: 99, standard: 98 }, { month: 6, recommended: 96, standard: 92 }, { month: 9, recommended: 92, standard: 86 }, { month: 12, recommended: 88, standard: 80 }, { month: 15, recommended: 84, standard: 74 }, { month: 18, recommended: 80, standard: 68 }, { month: 21, recommended: 76, standard: 62 }, { month: 24, recommended: 72, standard: 58 }, { month: 27, recommended: 68, standard: 54 }, { month: 30, recommended: 64, standard: 50 }, { month: 33, recommended: 60, standard: 46 }, { month: 36, recommended: 56, standard: 42 }, ], colorectal: [ { month: 0, recommended: 100, standard: 100 }, { month: 3, recommended: 96, standard: 94 }, { month: 6, recommended: 90, standard: 84 }, { month: 9, recommended: 84, standard: 74 }, { month: 12, recommended: 78, standard: 64 }, { month: 15, recommended: 72, standard: 56 }, { month: 18, recommended: 66, standard: 48 }, { month: 21, recommended: 60, standard: 42 }, { month: 24, recommended: 54, standard: 36 }, { month: 27, recommended: 48, standard: 32 }, { month: 30, recommended: 44, standard: 28 }, { month: 33, recommended: 40, standard: 24 }, { month: 36, recommended: 36, standard: 22 }, ], prostate: [ { month: 0, recommended: 100, standard: 100 }, { month: 3, recommended: 99, standard: 98 }, { month: 6, recommended: 98, standard: 94 }, { month: 9, recommended: 96, standard: 90 }, { month: 12, recommended: 94, standard: 86 }, { month: 15, recommended: 92, standard: 82 }, { month: 18, recommended: 90, standard: 78 }, { month: 21, recommended: 86, standard: 74 }, { month: 24, recommended: 82, standard: 70 }, { month: 27, recommended: 78, standard: 66 }, { month: 30, recommended: 74, standard: 62 }, { month: 33, recommended: 70, standard: 58 }, { month: 36, recommended: 66, standard: 54 }, ], } export function SurvivalPredictionChart({ cancerType = "lung" }) { const chartData = data[cancerType] || data["lung"] return ( ) } [V0_FILE]typescriptreact:file="components/charts/security-audit-chart.tsx" isMerged="true" "use client" import { Line, LineChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = [ { month: "Jan", vulnerabilities: 12, resolved: 12, compliance: 98 }, { month: "Feb", vulnerabilities: 8, resolved: 8, compliance: 99 }, { month: "Mar", vulnerabilities: 15, resolved: 14, compliance: 97 }, { month: "Apr", vulnerabilities: 10, resolved: 10, compliance: 100 }, { month: "May", vulnerabilities: 7, resolved: 7, compliance: 100 }, { month: "Jun", vulnerabilities: 14, resolved: 13, compliance: 98 }, ] export function SecurityAuditChart() { return ( ) } [V0_FILE]typescriptreact:file="components/visualizations/federated-network-map.tsx" isMerged="true" "use client" import { useRef } from "react" import { Canvas, useFrame } from "@react-three/fiber" import { OrbitControls, Line, Html } from "@react-three/drei" import { Vector3 } from "three" // Network nodes representing institutions const nodes = [ { id: 1, name: "Memorial Cancer Center", position: [0, 0, 0], size: 0.5, color: "#8884d8" }, { id: 2, name: "University Hospital", position: [-3, 2, 1], size: 0.4, color: "#8884d8" }, { id: 3, name: "Western Cancer Institute", position: [3, 1, -1], size: 0.4, color: "#8884d8" }, { id: 4, name: "Midwest Health System", position: [-2, -2, 2], size: 0.35, color: "#ffc658" }, { id: 5, name: "Southern Cancer Network", position: [2, -1, 3], size: 0.4, color: "#8884d8" }, { id: 6, name: "Northeast Medical Center", position: [-4, 0, -2], size: 0.35, color: "#8884d8" }, { id: 7, name: "Pacific Research Institute", position: [4, -2, -3], size: 0.3, color: "#8884d8" }, { id: 8, name: "Central Hospital", position: [1, 3, 2], size: 0.3, color: "#8884d8" }, { id: 9, name: "Mountain View Clinic", position: [-1, -3, -2], size: 0.25, color: "#8884d8" }, { id: 10, name: "Coastal Medical Group", position: [3, -3, 0], size: 0.25, color: "#8884d8" }, { id: 11, name: "Valley Health Partners", position: [-3, -1, -3], size: 0.25, color: "#8884d8" }, { id: 12, name: "Metro Cancer Alliance", position: [0, 2, -3], size: 0.3, color: "#8884d8" }, ] // Connections between nodes const connections = [ { from: 1, to: 2, active: true, color: "#8884d8" }, { from: 1, to: 3, active: true, color: "#8884d8" }, { from: 1, to: 4, active: true, color: "#ffc658" }, { from: 1, to: 5, active: true, color: "#8884d8" }, { from: 2, to: 6, active: true, color: "#8884d8" }, { from: 2, to: 8, active: true, color: "#8884d8" }, { from: 3, to: 7, active: true, color: "#8884d8" }, { from: 3, to: 10, active: true, color: "#8884d8" }, { from: 4, to: 9, active: true, color: "#ffc658" }, { from: 5, to: 10, active: true, color: "#8884d8" }, { from: 6, to: 11, active: true, color: "#8884d8" }, { from: 7, to: 12, active: true, color: "#8884d8" }, { from: 8, to: 12, active: true, color: "#8884d8" }, { from: 9, to: 11, active: true, color: "#8884d8" }, ] function Node({ position, size, color, name, showLabel }) { const meshRef = useRef() useFrame(({ clock }) => { if (meshRef.current) { // Subtle floating animation meshRef.current.position.y = position[1] + Math.sin(clock.getElapsedTime() + position[0]) * 0.05 } }) return ( {showLabel && (

{name}

)} ) } function DataFlow({ from, to, active, color }) { const lineRef = useRef() const fromVec = new Vector3(...from) const toVec = new Vector3(...to) useFrame(({ clock }) => { if (lineRef.current && lineRef.current.material) { // Pulsing animation for active connections if (active) { lineRef.current.material.dashOffset = -clock.getElapsedTime() * 0.5 } } }) return ( ) } function NetworkGraph() { return ( {/* Draw connections first so they appear behind nodes */} {connections.map((conn, i) => { const fromNode = nodes.find((n) => n.id === conn.from) const toNode = nodes.find((n) => n.id === conn.to) if (fromNode && toNode) { return ( ) } return null })} {/* Draw nodes */} {nodes.map((node) => ( = 0.35} // Only show labels for larger nodes /> ))} ) } export function FederatedNetworkMap() { return (

) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 262 83% 58%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 262 83% 58%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 262 83% 58%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 262 83% 58%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/visualizations/tumor-model-visualization.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useRef } from "react" import { Canvas, useFrame } from "@react-three/fiber" import { OrbitControls, Sphere, Box } from "@react-three/drei" function TumorModel({ timePoint = 50 }) { // Calculate tumor size based on timePoint (0-100) // At timePoint 0, size is 1.0 (100%) // At timePoint 100, size is 0.3 (30%) const tumorSize = 1.0 - (timePoint / 100) * 0.7 // Calculate color based on timePoint // Red at beginning, yellow in middle, green at end const r = timePoint < 50 ? 1.0 : 1.0 - (timePoint - 50) / 50 const g = timePoint < 50 ? timePoint / 50 : 1.0 const b = 0.2 return ( {/* Main tumor mass */} {/* Smaller satellite tumors that shrink and disappear with treatment */} {timePoint < 70 && ( )} {timePoint < 50 && ( )} {/* Surrounding tissue representation */} {/* Add subtle glow effect */} ) } function RotatingModel({ timePoint }) { const groupRef = useRef() useFrame(({ clock }) => { if (groupRef.current) { groupRef.current.rotation.y = clock.getElapsedTime() * 0.2 } }) return ( ) } export function TumorModelVisualization({ patientId, timePoint = 50, enhancedQuality = false }) { return (

) } [V0_FILE]typescriptreact:file="components/patient-digital-twin.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Badge } from "@/components/ui/badge" import { Maximize, Minimize, X, Settings, BarChart2, ChevronLeft, ChevronRight } from "lucide-react" import { EnhancedTumorVisualization } from "@/components/visualizations/enhanced-tumor-visualization" import { TreatmentResponseChart } from "@/components/charts/treatment-response-chart" import { BiomarkerTrendsChart } from "@/components/charts/biomarker-trends-chart" export default function PatientDigitalTwin() { const [selectedPatient, setSelectedPatient] = useState("patient-1") const [timePoint, setTimePoint] = useState(50) const [viewMode, setViewMode] = useState("standard") const [fullscreen, setFullscreen] = useState(false) const [showControls, setShowControls] = useState(false) const [showData, setShowData] = useState(false) const [vrMode, setVrMode] = useState(false) const [selectedRegion, setSelectedRegion] = useState(null) const [compareMode, setCompareMode] = useState(false) const [comparisonTreatment, setComparisonTreatment] = useState("targeted") // Simulation parameters const [drugConcentration, setDrugConcentration] = useState(75) const [immuneResponse, setImmuneResponse] = useState(60) const [simulationSpeed, setSimulationSpeed] = useState(5) const [simulationPaused, setSimulationPaused] = useState(false) // Tumor metrics const initialVolume = 100 const [tumorVolume, setTumorVolume] = useState(initialVolume * (1 - (timePoint / 100) * 0.7)) const [necroticPercentage, setNecroticPercentage] = useState(25) const [proliferationRate, setProliferationRate] = useState(15) const [drugPenetration, setDrugPenetration] = useState(65) // Update tumor metrics based on simulation parameters const updateTumorMetrics = (metrics) => { setTumorVolume(metrics.volume) setNecroticPercentage(metrics.necrotic) setProliferationRate(metrics.proliferation) setDrugPenetration(metrics.drugPenetration) } // Reset simulation to initial state const resetSimulation = () => { setTimePoint(0) setDrugConcentration(75) setImmuneResponse(60) setSimulationSpeed(5) setSimulationPaused(false) } // Effect to handle fullscreen mode useEffect(() => { if (fullscreen) { document.body.style.overflow = "hidden" } else { document.body.style.overflow = "" } return () => { document.body.style.overflow = "" } }, [fullscreen]) return (

Oncology Digital Twin

Real-time AI-based tumor modeling and treatment response prediction

Tumor Digital Twin Advanced 3D visualization with real-time simulation

{fullscreen && ( )}

{viewMode === "standard" ? "HD Quality" : viewMode.charAt(0).toUpperCase() + viewMode.slice(1) + " View"} {selectedRegion && ( {selectedRegion} )}

{showControls && (

Simulation Controls

Drug Concentration {drugConcentration}%

setDrugConcentration(value[0])} />

Immune Response {immuneResponse}%

setImmuneResponse(value[0])} />

Simulation Speed {simulationSpeed}x

setSimulationSpeed(value[0])} />

)} {showData && (

Tumor Metrics

Volume {tumorVolume.toFixed(1)} cm³

Necrotic Tissue {necroticPercentage}%

Proliferation Rate {proliferationRate.toFixed(1)}%

Drug Penetration {drugPenetration}%

Genomic Expression

EGFR

High

PD-L1

60%

)}

Treatment Timeline

{timePoint}%

setTimePoint(value[0])} /> {compareMode && (

Compare Treatments

{compareMode && ( )}

)}

{!compareMode && ( )} Patient Information Clinical and genomic profile

Demographics

John D., 58 years

Diagnosed: Mar 2023

Diagnosis

Non-small cell lung cancer

Stage IIIB, T3N2M0

Genomic Profile

EGFR

Mutation +

ALK

Wild type

PD-L1

Expression 60%

TMB

High (15 mut/Mb)

Current Treatment

Osimertinib + Pembrolizumab

Cycle 4 of 6

Treatment Response Biomarkers AI Predictions Treatment Response Trajectory Tumor size and response to current therapy Biomarker Trends Key biomarkers and laboratory values over time AI-Driven Predictions Treatment outcome predictions based on digital twin model

Response Probability

76%

Probability of complete or partial response to current treatment

Progression-Free Survival

68%

Probability of 12-month progression-free survival

Treatment Recommendations

Continue current regimen

Confidence: High (92%) - Based on genomic profile and response data

Alternative: Durvalumab + Chemotherapy

Consider if progression occurs (Response probability: 64%)

) } [V0_FILE]typescriptreact:file="components/visualizations/enhanced-tumor-visualization.tsx" isEdit="true" isMerged="true" "use client" import { useRef, useState, useMemo } from "react" import { Canvas, useFrame } from "@react-three/fiber" import { OrbitControls, Sphere, Box, Text, Html, Environment, MeshTransmissionMaterial, ContactShadows, PerformanceMonitor, AdaptiveDpr, AdaptiveEvents, CameraShake, Icosahedron, } from "@react-three/drei" import { EffectComposer, Bloom, ChromaticAberration, Noise, Vignette } from "@react-three/postprocessing" import { BlendFunction } from "postprocessing" import { Color } from "three" import { useSpring, animated, config } from "@react-spring/three" // Simulation parameters const GROWTH_RATE = 0.05 const DRUG_EFFICACY = 0.2 const IMMUNE_EFFICACY = 0.15 // Helper function to generate random points on a sphere const randomPointOnSphere = (radius) => { const u = Math.random() const v = Math.random() const theta = 2 * Math.PI * u const phi = Math.acos(2 * v - 1) return [radius * Math.sin(phi) * Math.cos(theta), radius * Math.sin(phi) * Math.sin(theta), radius * Math.cos(phi)] } // Helper function to calculate tumor volume based on radius const calculateVolume = (radius) => { return (4 / 3) * Math.PI * Math.pow(radius, 3) } // Main tumor model component with advanced rendering and simulation function AdvancedTumorModel({ timePoint = 50, viewMode = "standard", drugConcentration = 75, immuneResponse = 60, simulationSpeed = 5, simulationPaused = false, onRegionSelect, onMetricsUpdate, }) { // References for animation and interaction const groupRef = useRef() const mainTumorRef = useRef() const satelliteTumor1Ref = useRef() const satelliteTumor2Ref = useRef() const [hovered, setHovered] = useState(false) const [selectedPart, setSelectedPart] = useState(null) const [simulationTime, setSimulationTime] = useState(0) // Use dummy textures to avoid loading errors const textures = { cellular: null, vascular: null, normal: null, roughness: null, } // Calculate tumor size based on timePoint and simulation parameters const baseTumorSize = useMemo(() => { return 1.0 - (timePoint / 100) * 0.7 }, [timePoint]) // Apply drug and immune effects to tumor size const [tumorSize, setTumorSize] = useState(baseTumorSize) const [necroticPercentage, setNecroticPercentage] = useState(25) const [proliferationRate, setProliferationRate] = useState(15) const [drugPenetration, setDrugPenetration] = useState(65) // Spring animation for smooth transitions const { scale, color, emissive } = useSpring({ scale: hovered ? [1.05, 1.05, 1.05] : [1, 1, 1], color: selectedPart ? new Color(0.8, 0.4, 0.8) : new Color(calculateTumorColor(timePoint)), emissive: hovered ? new Color(0.2, 0.1, 0.1) : new Color(0, 0, 0), config: config.wobbly, }) // Calculate color based on timePoint (red -> yellow -> green) function calculateTumorColor(timePoint) { const r = timePoint < 50 ? 1.0 : 1.0 - (timePoint - 50) / 50 const g = timePoint < 50 ? timePoint / 50 : 1.0 const b = 0.2 return `rgb(${Math.floor(r * 255)}, ${Math.floor(g * 255)}, ${Math.floor(b * 255)})` } // Simulation logic useFrame((state, delta) => { if (simulationPaused) return // Update simulation time setSimulationTime((prev) => prev + delta * simulationSpeed) // Calculate tumor growth/shrinkage based on simulation parameters const drugEffect = (drugConcentration / 100) * DRUG_EFFICACY const immuneEffect = (immuneResponse / 100) * IMMUNE_EFFICACY const growthFactor = GROWTH_RATE - drugEffect - immuneEffect // Apply growth/shrinkage to tumor size const newSize = Math.max(0.3, Math.min(1.0, baseTumorSize + (growthFactor * simulationTime) / 10)) setTumorSize(newSize) // Update necrotic percentage based on drug concentration const newNecroticPercentage = Math.min(90, 25 + (drugConcentration / 100) * 50) setNecroticPercentage(newNecroticPercentage) // Update proliferation rate based on immune response (inverse relationship) const newProliferationRate = Math.max(5, 15 - (immuneResponse / 100) * 10) setProliferationRate(newProliferationRate) // Update drug penetration based on time and concentration const newDrugPenetration = Math.min(95, 65 + (simulationTime / 20) * (drugConcentration / 100) * 30) setDrugPenetration(newDrugPenetration) // Rotate the tumor group slowly if (groupRef.current) { groupRef.current.rotation.y += delta * 0.2 } // Pulse effect for the tumor if (mainTumorRef.current) { const pulseFactor = Math.sin(state.clock.elapsedTime * 2) * 0.02 mainTumorRef.current.scale.set(1 + pulseFactor, 1 + pulseFactor, 1 + pulseFactor) } // Update metrics const volume = calculateVolume(tumorSize) onMetricsUpdate({ volume, necrotic: necroticPercentage, proliferation: proliferationRate, drugPenetration: newDrugPenetration, }) }) // Handle selection of tumor regions const handleClick = (e, region) => { e.stopPropagation() setSelectedPart(region) onRegionSelect(region) } // Determine material based on view mode const getMaterial = () => { switch (viewMode) { case "xray": return ( ) case "cellular": return case "vascular": return default: return ( ) } } return ( {/* Main tumor mass */} handleClick(e, "Primary Tumor")} onPointerOver={() => setHovered(true)} onPointerOut={() => setHovered(false)} > {getMaterial()} {/* Necrotic core visualization */} {viewMode !== "xray" && ( )} {/* Highlight regions of interest */} {selectedPart === "Primary Tumor" && ( )} {/* Satellite tumors that shrink and disappear with treatment */} {timePoint < 70 && ( handleClick(e, "Metastatic Lesion 1")} > {getMaterial()} {selectedPart === "Metastatic Lesion 1" && ( )} )} {timePoint < 50 && ( handleClick(e, "Metastatic Lesion 2")} > {getMaterial()} {selectedPart === "Metastatic Lesion 2" && ( )} )} {/* Surrounding tissue representation */} {/* Drug distribution visualization */} {viewMode === "standard" && ( {Array.from({ length: 20 }).map((_, i) => { const [x, y, z] = randomPointOnSphere(tumorSize * 1.5) const scale = 0.05 + Math.random() * 0.05 const visible = i / 20 < drugPenetration / 100 if (!visible) return null return ( ) })} )} {/* Immune cell visualization */} {viewMode === "standard" && ( {Array.from({ length: 15 }).map((_, i) => { const [x, y, z] = randomPointOnSphere(tumorSize * 1.2) const scale = 0.08 + Math.random() * 0.05 const visible = i / 15 < immuneResponse / 100 if (!visible) return null return ( ) })} )} {/* Add subtle glow effect */} {/* Labels for selected regions */} {selectedPart && (

{selectedPart}

)} ) } // Comparison view component function ComparisonView({ timePoint, treatment, position = [0, 0, 0], scale = 0.5 }) { // Calculate treatment efficacy based on treatment type const getTreatmentEfficacy = () => { switch (treatment) { case "standard": return 0.5 case "targeted": return 0.7 case "immunotherapy": return 0.6 case "combination": return 0.8 default: return 0.5 } } // Calculate adjusted tumor size based on treatment efficacy const efficacy = getTreatmentEfficacy() const adjustedTimePoint = timePoint * efficacy const tumorSize = 1.0 - (adjustedTimePoint / 100) * 0.7 // Calculate color based on treatment response const r = adjustedTimePoint < 50 ? 1.0 : 1.0 - (adjustedTimePoint - 50) / 50 const g = adjustedTimePoint < 50 ? adjustedTimePoint / 50 : 1.0 const b = 0.2 const color = `rgb(${Math.floor(r * 255)}, ${Math.floor(g * 255)}, ${Math.floor(b * 255)})` return ( {treatment.charAt(0).toUpperCase() + treatment.slice(1)} ) } // Main component that renders the enhanced tumor visualization export function EnhancedTumorVisualization({ patientId, timePoint = 50, viewMode = "standard", drugConcentration = 75, immuneResponse = 60, simulationSpeed = 5, simulationPaused = false, compareMode = false, comparisonTreatment = "targeted", onRegionSelect, onMetricsUpdate, }) { // Performance monitoring state const [dpr, setDpr] = useState(1.5) // Handle performance adjustments const handlePerformanceChange = ({ factor }) => { setDpr(Math.max(0.5, Math.min(1.5, factor * 1.5))) } return (

) } [V0_FILE]typescriptreact:file="app/anatomical-models/page.tsx" isMerged="true" import AnatomicalModelShowcase from "@/components/advanced-model-viewer/anatomical-model-showcase" import type { Metadata } from "next" export const metadata: Metadata = { title: "Anatomical Models | AGENT Healthcare AI Platform", description: "Interactive 3D anatomical models for medical education and visualization", } export default function AnatomicalModelsPage() { return } [V0_FILE]typescriptreact:file="components/sidebar.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { LayoutDashboard, Network, Brain, Stethoscope, Shield, Users, Menu, X, CuboidIcon as Cube } from "lucide-react" import { cn } from "@/lib/utils" import Link from "next/link" import { usePathname } from "next/navigation" type View = | "overview" | "digital-twin" | "federated-learning" | "decision-support" | "security" | "workflow" | "anatomical-models" interface SidebarProps { currentView: View setCurrentView: (view: View) => void } export default function Sidebar({ currentView, setCurrentView }: SidebarProps) { const [mobileOpen, setMobileOpen] = useState(false) const pathname = usePathname() const toggleMobileMenu = () => { setMobileOpen(!mobileOpen) } const menuItems = [ { id: "overview" as View, label: "Dashboard", icon: , path: "/", }, { id: "digital-twin" as View, label: "Digital Twin", icon: , path: "/digital-twin", }, { id: "federated-learning" as View, label: "Federated Learning", icon: , path: "/federated-learning", }, { id: "decision-support" as View, label: "Decision Support", icon: , path: "/decision-support", }, { id: "anatomical-models" as View, label: "Anatomical Models", icon: , path: "/anatomical-models", }, { id: "security" as View, label: "Security & Compliance", icon: , path: "/security", }, { id: "workflow" as View, label: "Oncology Workflow", icon: , path: "/workflow", }, ] const handleNavigation = (view: View) => { setCurrentView(view) if (mobileOpen) { setMobileOpen(false) } } return ( <> {/* Mobile menu button */} {/* Sidebar */}

AGENT Platform

{menuItems.map((item) => ( handleNavigation(item.id)} className={cn( "flex items-center px-3 py-3 w-full rounded-md text-sm font-medium transition-colors", currentView === item.id || pathname === item.path ? "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-100" : "text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700", )} > {item.icon} {item.label} ))}

Dr. Devin

Oncologist

) } [V0_FILE]typescriptreact:file="components/advanced-model-viewer/anatomical-model-showcase.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import AdvancedModelViewer from "./model-viewer" // Sample model data const ANATOMICAL_MODELS = [ { id: "heart", title: "Human Heart", description: "Detailed anatomical model of the human heart with interactive chambers and vessels", modelUrl: "/models/heart.glb", textureUrl: "/textures/heart_diffuse.jpg", normalMapUrl: "/textures/heart_normal.jpg", initialPosition: [0, 0, 0], initialRotation: [0, 0, 0], initialScale: 1.2, environmentPreset: "studio", availableAnimations: ["Heartbeat", "Systole", "Diastole"], modelParts: [ { name: "left_ventricle", label: "Left Ventricle" }, { name: "right_ventricle", label: "Right Ventricle" }, { name: "left_atrium", label: "Left Atrium" }, { name: "right_atrium", label: "Right Atrium" }, { name: "aorta", label: "Aorta" }, { name: "pulmonary_artery", label: "Pulmonary Artery" }, { name: "pulmonary_vein", label: "Pulmonary Vein" }, { name: "superior_vena_cava", label: "Superior Vena Cava" }, { name: "inferior_vena_cava", label: "Inferior Vena Cava" }, ], annotations: [ { position: [0.8, 0.5, 0.5], text: "Aortic Valve" }, { position: [-0.8, 0.5, 0.3], text: "Mitral Valve" }, { position: [0, -0.8, 0.5], text: "Apex" }, ], }, { id: "brain", title: "Human Brain", description: "High-resolution model of the human brain with detailed cortical structures and functional regions", modelUrl: "/models/brain.glb", textureUrl: "/textures/brain_diffuse.jpg", normalMapUrl: "/textures/brain_normal.jpg", initialPosition: [0, 0, 0], initialRotation: [0, 0, 0], initialScale: 1.5, environmentPreset: "studio", availableAnimations: ["Neural Activity", "Blood Flow"], modelParts: [ { name: "frontal_lobe", label: "Frontal Lobe" }, { name: "parietal_lobe", label: "Parietal Lobe" }, { name: "temporal_lobe", label: "Temporal Lobe" }, { name: "occipital_lobe", label: "Occipital Lobe" }, { name: "cerebellum", label: "Cerebellum" }, { name: "brain_stem", label: "Brain Stem" }, { name: "corpus_callosum", label: "Corpus Callosum" }, { name: "thalamus", label: "Thalamus" }, { name: "hypothalamus", label: "Hypothalamus" }, ], annotations: [ { position: [1, 0.5, 0], text: "Motor Cortex" }, { position: [-0.5, 0.8, 0.5], text: "Visual Cortex" }, { position: [0.5, -0.5, 0.8], text: "Broca's Area" }, ], }, { id: "lung", title: "Respiratory System", description: "Detailed model of human lungs with bronchial tree and alveolar structures", modelUrl: "/models/lungs.glb", textureUrl: "/textures/lungs_diffuse.jpg", normalMapUrl: "/textures/lungs_normal.jpg", initialPosition: [0, 0, 0], initialRotation: [0, 0, 0], initialScale: 1.3, environmentPreset: "studio", availableAnimations: ["Breathing", "Bronchial Contraction"], modelParts: [ { name: "right_lung", label: "Right Lung" }, { name: "left_lung", label: "Left Lung" }, { name: "trachea", label: "Trachea" }, { name: "bronchi", label: "Bronchi" }, { name: "alveoli", label: "Alveoli" }, { name: "diaphragm", label: "Diaphragm" }, ], annotations: [ { position: [0, 1, 0], text: "Trachea" }, { position: [1, 0, 0], text: "Right Lung" }, { position: [-1, 0, 0], text: "Left Lung" }, ], }, ] export default function AnatomicalModelShowcase() { const [selectedModel, setSelectedModel] = useState(ANATOMICAL_MODELS[0].id) const [showInfo, setShowInfo] = useState(true) // Get the currently selected model data const currentModel = ANATOMICAL_MODELS.find((model) => model.id === selectedModel) || ANATOMICAL_MODELS[0] return (

Anatomical Model Visualization

Interactive 3D models for medical education and visualization

Advanced 3D Rendering

{currentModel.title} Interactive 3D visualization with selectable parts {showInfo && ( Model Information Details and educational content Overview Anatomy Clinical

Description

{currentModel.description}

Interactive Features

• Rotate, zoom, and pan to explore the model
• Click on specific parts to highlight and identify
• Toggle wireframe mode for structural visualization
• View animations of physiological processes

Model Selection

{ANATOMICAL_MODELS.map((model) => ( ))}

Key Structures

{currentModel.modelParts.map((part, index) => (

{part.label}

{part.name === "left_ventricle" && "Primary chamber that pumps oxygenated blood to the body"} {part.name === "right_ventricle" && "Chamber that pumps deoxygenated blood to the lungs"} {part.name === "aorta" && "Main artery carrying oxygenated blood from the heart"} {part.name === "frontal_lobe" && "Controls cognitive functions, motor skills, and language"} {part.name === "cerebellum" && "Coordinates movement and maintains balance"} {part.name === "right_lung" && "Larger lung with three lobes for gas exchange"} {part.name === "trachea" && "Airway connecting the larynx to the bronchi"}

))}

Clinical Significance

{selectedModel === "heart" && ( <>

Coronary Artery Disease

Narrowing or blockage of coronary arteries, leading to reduced blood flow to the heart muscle. Can cause angina, heart attacks, and heart failure.

Valvular Heart Disease

Dysfunction of heart valves, affecting blood flow through the heart chambers. May lead to regurgitation or stenosis requiring surgical intervention.

)} {selectedModel === "brain" && ( <>

Stroke

Interruption of blood supply to the brain, causing rapid cell death. Different regions affected result in varied neurological deficits.

Neurodegenerative Disorders

Progressive degeneration of neurons in specific brain regions. Examples include Alzheimer's, Parkinson's, and Huntington's disease.

)} {selectedModel === "lung" && ( <>

Chronic Obstructive Pulmonary Disease (COPD)

Progressive lung disease causing obstructed airflow and breathing difficulties. Includes emphysema and chronic bronchitis, often caused by smoking.

Lung Cancer

Uncontrolled cell growth in lung tissues, often forming tumors. May spread to other parts of the body through metastasis.

)}

Diagnostic Imaging

3D models like this are created from medical imaging data such as CT scans, MRI, and ultrasound. They provide valuable insights for diagnosis, surgical planning, and patient education.

)}

Technical Specifications Model details and rendering information

Model Format

• Format: glTF/GLB (GL Transmission Format)

• Polygons: ~50,000 - 100,000 triangles

• Textures: 2K diffuse, normal maps

• Animations: Skeletal/morph targets

Rendering Features

• PBR materials (Physically Based Rendering)

• Real-time shadows and ambient occlusion

• Post-processing effects (bloom, SSAO)

• Adaptive performance optimization

Browser Requirements

• WebGL 2.0 support

• Modern browser (Chrome, Firefox, Safari, Edge)

• Recommended: Dedicated GPU

• Mobile: iOS 14+, Android 9+

) } [V0_FILE]typescriptreact:file="components/advanced-model-viewer/model-viewer.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef, useEffect, Suspense } from "react" import { Canvas, useThree } from "@react-three/fiber" import { OrbitControls, Environment, ContactShadows, useGLTF, Html, useProgress, useAnimations, useBounds, } from "@react-three/drei" import { EffectComposer, Bloom, SSAO } from "@react-three/postprocessing" import { KernelSize } from "postprocessing" import { Perf } from "r3f-perf" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent } from "@/components/ui/card" import { Maximize, Minimize, RotateCcw, ZoomIn, ZoomOut, Layers, Info, X } from "lucide-react" import { useMediaQuery } from "@/hooks/use-media-query" import * as THREE from "three" // Loading indicator component function Loader() { const { progress } = useProgress() return (

{progress.toFixed(0)}% loaded

) } // Model component that handles the actual 3D model rendering function Model({ url, scale = 1, position = [0, 0, 0], rotation = [0, 0, 0], showWireframe = false, highlightPart = null, onPartSelect, textureUrl = null, normalMapUrl = null, animationIndex = null, materialOverrides = {}, }) { const group = useRef() const { scene, animations } = useGLTF(url) const { actions, names } = useAnimations(animations, group) const bounds = useBounds() // Don't use useTexture at all - we'll apply textures manually // This avoids the hook consistency issues // Handle animations useEffect(() => { if (animations.length > 0 && animationIndex !== null) { // Stop all animations first Object.values(actions).forEach((action) => action.stop()) // Play the selected animation if valid if (animationIndex >= 0 && animationIndex < names.length) { const action = actions[names[animationIndex]] if (action) { action.reset().play() } } } }, [actions, names, animations, animationIndex]) // Apply material properties and textures useEffect(() => { if (scene) { scene.traverse((child) => { if (child.isMesh) { // Create a new material to avoid modifying the original const newMaterial = child.material.clone() // Apply textures if available if (textureUrl) { const textureLoader = new THREE.TextureLoader() textureLoader.load(textureUrl, (texture) => { newMaterial.map = texture newMaterial.needsUpdate = true }) } if (normalMapUrl) { const textureLoader = new THREE.TextureLoader() textureLoader.load(normalMapUrl, (texture) => { newMaterial.normalMap = texture newMaterial.needsUpdate = true }) } // Apply material overrides if (materialOverrides) { for (const [key, value] of Object.entries(materialOverrides)) { newMaterial[key] = value } } // Set up wireframe if enabled newMaterial.wireframe = showWireframe // Highlight selected part if (highlightPart && child.name === highlightPart) { newMaterial.emissive.set(0x3366ff) newMaterial.emissiveIntensity = 0.5 } else { newMaterial.emissive.set(0x000000) newMaterial.emissiveIntensity = 0 } // Ensure shadows are enabled child.castShadow = true child.receiveShadow = true // Apply the new material child.material = newMaterial } }) } }, [scene, showWireframe, highlightPart, textureUrl, normalMapUrl, materialOverrides]) // Handle click events for part selection const handleClick = (event) => { if (onPartSelect && event.object) { event.stopPropagation() onPartSelect(event.object.name) // Focus camera on the selected part bounds.refresh().fit().clip() } } return ( ) } // Camera controller component function CameraController({ resetView }) { const { camera, gl } = useThree() const controlsRef = useRef() useEffect(() => { if (resetView && controlsRef.current) { controlsRef.current.reset() } }, [resetView]) return ( ) } // Performance monitoring component function PerformanceMonitor({ showPerformance }) { if (!showPerformance) return null return } // Main model viewer component export default function AdvancedModelViewer({ modelUrl = "/models/heart.glb", // Default model textureUrl = null, normalMapUrl = null, title = "3D Model Viewer", description = "Interactive 3D model visualization", initialScale = 1, initialPosition = [0, 0, 0], initialRotation = [0, 0, 0], showControls = true, showPerformance = false, environmentPreset = "studio", availableAnimations = [], modelParts = [], annotations = [], }) { const [isFullscreen, setIsFullscreen] = useState(false) const [showWireframe, setShowWireframe] = useState(false) const [showAnnotations, setShowAnnotations] = useState(false) const [selectedPart, setSelectedPart] = useState(null) const [scale, setScale] = useState(initialScale) const [resetView, setResetView] = useState(false) const [selectedAnimation, setSelectedAnimation] = useState(null) const [showInfo, setShowInfo] = useState(false) const [quality, setQuality] = useState("high") const [showPostProcessing, setShowPostProcessing] = useState(true) const containerRef = useRef(null) const isMobile = useMediaQuery("(max-width: 768px)") // Handle fullscreen toggle const toggleFullscreen = () => { setIsFullscreen(!isFullscreen) } // Reset camera view const handleResetView = () => { setResetView(true) setTimeout(() => setResetView(false), 100) } // Handle part selection const handlePartSelect = (partName) => { setSelectedPart(partName === selectedPart ? null : partName) } // Handle zoom controls const handleZoomIn = () => { setScale((prev) => Math.min(prev + 0.25, 3)) } const handleZoomOut = () => { setScale((prev) => Math.max(prev - 0.25, 0.5)) } // Determine DPR based on quality setting const getDpr = () => { switch (quality) { case "low": return 1 case "medium": return 1.5 case "high": return 2 default: return 1.5 } } // Effect to handle body scroll when in fullscreen useEffect(() => { if (isFullscreen) { document.body.style.overflow = "hidden" } else { document.body.style.overflow = "" } return () => { document.body.style.overflow = "" } }, [isFullscreen]) return (

{/* Top controls */}

{title} {selectedPart && ( {selectedPart} )}

{showControls && ( <> )}

{/* Canvas for 3D rendering */}

{/* Bottom controls */} {showControls && (

{!isMobile && (

{availableAnimations.length > 0 && (

Animation: setSelectedAnimation(value === "none" ? null : Number.parseInt(value)) } className="w-[200px]" > None {availableAnimations.map((anim, index) => ( {anim} ))}

)}

Quality: Low Medium High

Effects:

)}

)} {/* Info panel */} {showInfo && (

Model Information

{description}

{modelParts.length > 0 && (

Interactive Parts:

handlePartSelect(part.name)} > {part.label || part.name}

)}

Controls:

• Left-click + drag: Rotate model
• Right-click + drag: Pan view
• Scroll: Zoom in/out
• Click on part: Select/highlight

)}

) } [V0_FILE]typescriptreact:file="components/dashboard-layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Sidebar from "@/components/sidebar" import Header from "@/components/header" import DashboardOverview from "@/components/dashboard-overview" import PatientDigitalTwin from "@/components/patient-digital-twin" import FederatedLearning from "@/components/federated-learning" import ClinicalDecisionSupport from "@/components/clinical-decision-support" import SecurityCompliance from "@/components/security-compliance" import OncologyWorkflow from "@/components/oncology-workflow" import { usePathname } from "next/navigation" import { Button } from "@/components/ui/button" type View = | "overview" | "digital-twin" | "federated-learning" | "decision-support" | "security" | "workflow" | "anatomical-models" export default function DashboardLayout() { const [currentView, setCurrentView] = useState("overview") const pathname = usePathname() // Update the current view based on the pathname useEffect(() => { if (pathname === "/") { setCurrentView("overview") } else if (pathname === "/digital-twin") { setCurrentView("digital-twin") } else if (pathname === "/federated-learning") { setCurrentView("federated-learning") } else if (pathname === "/decision-support") { setCurrentView("decision-support") } else if (pathname === "/security") { setCurrentView("security") } else if (pathname === "/workflow") { setCurrentView("workflow") } else if (pathname === "/anatomical-models") { setCurrentView("anatomical-models") } }, [pathname]) // Modify the renderView function to handle the error more gracefully const renderView = () => { try { switch (currentView) { case "overview": return case "digital-twin": return case "federated-learning": return case "decision-support": return case "security": return case "workflow": return case "anatomical-models": // Wrap this in an error boundary or conditional rendering return null // Temporarily disable this view until fixed default: return } } catch (error) { console.error("Error rendering view:", error) return (

Something went wrong

We encountered an error while loading this view.

) } } return (

{renderView()}

) } [V0_FILE]typescriptreact:file="components/integrations/beaker-integration/beaker-connector.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { CheckCircle, AlertCircle, FileText, Database, RefreshCw } from "lucide-react" import { Progress } from "@/components/ui/progress" // Mock data structure for Beaker lab reports interface LabReport { id: string patientId: string collectionDate: string resultDate: string testName: string result: string units: string referenceRange: string status: "final" | "preliminary" | "corrected" } export default function BeakerConnector() { const [connectionStatus, setConnectionStatus] = useState<"disconnected" | "connecting" | "connected">("disconnected") const [apiKey, setApiKey] = useState("") const [endpoint, setEndpoint] = useState("https://beaker-lis.hospital.org/api/v1") const [syncStatus, setSyncStatus] = useState<"idle" | "syncing" | "completed" | "error">("idle") const [syncProgress, setSyncProgress] = useState(0) const [lastSyncDate, setLastSyncDate] = useState(null) const [recentReports, setRecentReports] = useState([]) const [error, setError] = useState(null) // Connect to Beaker LIS const handleConnect = () => { if (!apiKey || !endpoint) { setError("API key and endpoint are required") return } setConnectionStatus("connecting") setError(null) // Simulate API connection setTimeout(() => { setConnectionStatus("connected") // Mock recent reports data setRecentReports([ { id: "LR-12345", patientId: "P-58291", collectionDate: "2023-11-15T08:30:00", resultDate: "2023-11-15T14:45:00", testName: "Complete Blood Count", result: "Normal", units: "", referenceRange: "", status: "final", }, { id: "LR-12346", patientId: "P-58292", collectionDate: "2023-11-15T09:15:00", resultDate: "2023-11-15T15:30:00", testName: "Comprehensive Metabolic Panel", result: "Abnormal", units: "", referenceRange: "", status: "final", }, { id: "LR-12347", patientId: "P-58293", collectionDate: "2023-11-15T10:00:00", resultDate: "2023-11-15T16:15:00", testName: "Lipid Panel", result: "Normal", units: "", referenceRange: "", status: "preliminary", }, ]) }, 2000) } // Sync data from Beaker LIS const handleSync = () => { if (connectionStatus !== "connected") { setError("Please connect to Beaker LIS first") return } setSyncStatus("syncing") setSyncProgress(0) setError(null) // Simulate sync progress const interval = setInterval(() => { setSyncProgress((prev) => { const newProgress = prev + 10 if (newProgress >= 100) { clearInterval(interval) setSyncStatus("completed") setLastSyncDate(new Date().toISOString()) return 100 } return newProgress }) }, 500) } return (

Beaker LIS Integration Connect to Beaker laboratory information system

{connectionStatus === "connected" ? "Connected" : "Disconnected"}

Connection Data Sync Recent Reports

Beaker API Endpoint setEndpoint(e.target.value)} placeholder="https://beaker-lis.hospital.org/api/v1" disabled={connectionStatus === "connecting"} />

API Key setApiKey(e.target.value)} placeholder="Enter your Beaker API key" disabled={connectionStatus === "connecting"} />

{error && ( Error {error} )}

Data Synchronization

Sync lab reports from Beaker to AGENT AI

{lastSyncDate && (

Last sync: {new Date(lastSyncDate).toLocaleString()}

)}

{syncStatus === "syncing" && (

Syncing data... {syncProgress}%

)} {syncStatus === "completed" && ( Sync Completed All lab reports have been successfully synchronized. )} {syncStatus === "error" && ( Sync Failed {error} )}

Recent Lab Reports

{recentReports.length === 0 ? (

No recent reports available

Connect to Beaker LIS to view recent reports

) : (

{recentReports.map((report) => (

{report.testName}

Patient ID: {report.patientId}

{report.status.charAt(0).toUpperCase() + report.status.slice(1)}

Result: {report.result}

Collection:{" "} {new Date(report.collectionDate).toLocaleString()}

Report ID: {report.id}

Result Date:{" "} {new Date(report.resultDate).toLocaleString()}

))}

)}

Beaker® is a registered trademark of Sunquest Information Systems

) } [V0_FILE]typescriptreact:file="components/integrations/digital-twin/patient-anatomy-viewer.tsx" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { Canvas } from "@react-three/fiber" import { OrbitControls, Environment, ContactShadows, useGLTF, Html, useProgress, PerspectiveCamera, } from "@react-three/drei" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Layers, ZoomIn, ZoomOut, RotateCcw, Eye, EyeOff } from "lucide-react" import * as THREE from "three" // Loading indicator component function Loader() { const { progress } = useProgress() return (

{progress.toFixed(0)}% loaded

) } // Anatomy model component function AnatomyModel({ modelPath, position = [0, 0, 0], rotation = [0, 0, 0], scale = 1, visibleParts = {}, highlightedPart = null, onPartClick, treatmentSimulation = null, }) { const group = useRef() const { scene } = useGLTF(modelPath) // Clone the scene to avoid modifying the cached original const modelScene = useRef(scene.clone()) // Apply visibility and highlighting to parts useEffect(() => { if (modelScene.current) { modelScene.current.traverse((child) => { if (child.isMesh) { // Set visibility based on visibleParts object if (visibleParts.hasOwnProperty(child.name)) { child.visible = visibleParts[child.name] } // Apply highlighting if (child.name === highlightedPart) { child.material = child.material.clone() child.material.emissive = new THREE.Color(0x3366ff) child.material.emissiveIntensity = 0.5 } else { if (child.material.emissiveIntensity > 0) { child.material = child.material.clone() child.material.emissive = new THREE.Color(0x000000) child.material.emissiveIntensity = 0 } } // Apply treatment simulation effects if applicable if (treatmentSimulation && treatmentSimulation.affectedParts.includes(child.name)) { child.material = child.material.clone() // Different visual effects based on treatment type if (treatmentSimulation.type === "radiation") { // Radiation effect - reddish glow child.material.emissive = new THREE.Color(0xff3300) child.material.emissiveIntensity = treatmentSimulation.intensity * 0.5 } else if (treatmentSimulation.type === "drug") { // Drug effect - color shift child.material.color.lerp(new THREE.Color(0x00aaff), treatmentSimulation.intensity * 0.7) } else if (treatmentSimulation.type === "surgery") { // Surgery effect - partial transparency child.material.transparent = true child.material.opacity = Math.max(0.3, 1 - treatmentSimulation.intensity * 0.7) child.material.depthWrite = false } } } }) } }, [visibleParts, highlightedPart, treatmentSimulation]) // Handle click events on model parts const handleClick = (event) => { if (onPartClick && event.object) { event.stopPropagation() onPartClick(event.object.name) } } return ( ) } // Annotation component for labeling parts function Annotation({ position, content, visible = true }) { if (!visible) return null return (

{content}

) } // Main patient anatomy viewer component export default function PatientAnatomyViewer() { // State for model display options const [modelPath, setModelPath] = useState("/models/brain.glb") const [cameraPosition, setCameraPosition] = useState([0, 0, 5]) const [modelRotation, setModelRotation] = useState([0, 0, 0]) const [modelScale, setModelScale] = useState(1.0) const [showWireframe, setShowWireframe] = useState(false) const [showAnnotations, setShowAnnotations] = useState(true) const [highlightedPart, setHighlightedPart] = useState(null) // State for treatment simulation const [treatmentType, setTreatmentType] = useState("none") const [treatmentIntensity, setTreatmentIntensity] = useState(0) const [treatmentSimulation, setTreatmentSimulation] = useState(null) // State for visible parts const [visibleParts, setVisibleParts] = useState({ brain_frontal_lobe: true, brain_parietal_lobe: true, brain_temporal_lobe: true, brain_occipital_lobe: true, brain_cerebellum: true, brain_stem: true, tumor: true, }) // Annotations for the model const annotations = [ { position: [1.2, 0.5, 0], content: "Frontal Lobe", partName: "brain_frontal_lobe" }, { position: [0, 1.2, 0], content: "Parietal Lobe", partName: "brain_parietal_lobe" }, { position: [-0.8, -0.3, 0.8], content: "Temporal Lobe", partName: "brain_temporal_lobe" }, { position: [-1.0, 0.3, -0.5], content: "Occipital Lobe", partName: "brain_occipital_lobe" }, { position: [0, -1.0, -0.5], content: "Cerebellum", partName: "brain_cerebellum" }, { position: [0, -1.5, 0], content: "Brain Stem", partName: "brain_stem" }, { position: [0.5, 0.2, 1.0], content: "Tumor", partName: "tumor" }, ] // Handle part visibility toggle const togglePartVisibility = (partName) => { setVisibleParts((prev) => ({ ...prev, [partName]: !prev[partName], })) } // Handle part click/selection const handlePartClick = (partName) => { setHighlightedPart(partName === highlightedPart ? null : partName) } // Reset camera view const resetCamera = () => { setCameraPosition([0, 0, 5]) setModelRotation([0, 0, 0]) setModelScale(1.0) } // Update treatment simulation useEffect(() => { if (treatmentType === "none") { setTreatmentSimulation(null) return } setTreatmentSimulation({ type: treatmentType, intensity: treatmentIntensity, affectedParts: treatmentType === "radiation" ? ["tumor", "brain_temporal_lobe"] : treatmentType === "drug" ? ["tumor", "brain_frontal_lobe", "brain_parietal_lobe", "brain_temporal_lobe", "brain_occipital_lobe"] : ["tumor"], }) }, [treatmentType, treatmentIntensity]) return (

Patient Anatomy Digital Twin Interactive 3D visualization of patient anatomy

Patient ID: P-58291

{/* Overlay controls */}

Treatment: {treatmentType !== "none" && (

Intensity: setTreatmentIntensity(value[0])} className="w-[100px]" />

)}

Visible Structures

{Object.keys(visibleParts).map((partName) => ( togglePartVisibility(partName)} > {partName.replace("brain_", "").replace("_", " ")} ))}

Show Annotations

) } [V0_FILE]typescriptreact:file="components/integrations/neuro-symbolic/clinical-reasoning-engine.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Brain, AlertCircle, CheckCircle, FileText, Activity, Lightbulb, Microscope, Zap, ChevronRight, } from "lucide-react" import { Progress } from "@/components/ui/progress" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" // Sample patient case data const patientCase = { patientId: "P-58291", age: 58, gender: "Male", symptoms: ["Persistent headache", "Visual disturbances", "Memory lapses"], vitalSigns: { bloodPressure: "142/88 mmHg", heartRate: "78 bpm", temperature: "37.1°C", respiratoryRate: "16/min", oxygenSaturation: "98%", }, labResults: [ { name: "WBC", value: "7.2", unit: "×10^9/L", referenceRange: "4.5-11.0" }, { name: "Hemoglobin", value: "14.5", unit: "g/dL", referenceRange: "13.5-17.5" }, { name: "Platelets", value: "245", unit: "×10^9/L", referenceRange: "150-450" }, { name: "Glucose", value: "105", unit: "mg/dL", referenceRange: "70-99" }, { name: "Creatinine", value: "0.9", unit: "mg/dL", referenceRange: "0.7-1.3" }, ], imaging: { type: "MRI Brain", date: "2023-11-10", findings: "2.3 cm mass in the right temporal lobe with surrounding edema. Characteristics suggestive of glioblastoma.", }, medicalHistory: ["Hypertension", "Type 2 Diabetes", "Migraine"], } // Sample reasoning steps for the neuro-symbolic AI const reasoningSteps = [ { type: "data", title: "Clinical Data Analysis", description: "Analyzing patient symptoms, vital signs, and lab results", confidence: 0.95, details: [ "Patient presents with persistent headache, visual disturbances, and memory lapses", "Vital signs show mild hypertension (142/88 mmHg)", "Lab results within normal ranges", "MRI shows 2.3 cm mass in right temporal lobe with surrounding edema", ], }, { type: "knowledge", title: "Medical Knowledge Application", description: "Applying clinical guidelines and medical literature", confidence: 0.92, details: [ "Temporal lobe masses with surrounding edema are commonly associated with primary brain tumors or metastases", "Glioblastoma is the most common malignant primary brain tumor in adults", "Persistent headache and memory issues are consistent with temporal lobe lesions", "Patient age (58) falls within typical range for glioblastoma presentation", ], }, { type: "reasoning", title: "Symbolic Reasoning", description: "Applying logical rules to derive conclusions", confidence: 0.88, details: [ "IF (mass in brain) AND (surrounding edema) AND (age > 50) THEN (consider glioblastoma)", "IF (persistent headache) AND (memory issues) AND (temporal lobe mass) THEN (symptoms consistent with location)", "IF (no history of cancer) AND (single lesion) THEN (primary brain tumor more likely than metastasis)", "IF (imaging characteristics suggestive of glioblastoma) THEN (biopsy recommended for confirmation)", ], }, { type: "integration", title: "Neural-Symbolic Integration", description: "Combining statistical patterns with logical reasoning", confidence: 0.91, details: [ "Neural component identified imaging patterns consistent with glioblastoma (confidence: 89%)", "Symbolic reasoning applied clinical guidelines for brain mass evaluation", "Integration of patient-specific factors with population-level statistics", "Consideration of alternative diagnoses and their relative probabilities", ], }, ] // Sample diagnostic conclusions const diagnosticConclusions = [ { diagnosis: "Glioblastoma Multiforme", probability: 0.85, evidence: [ "2.3 cm mass in right temporal lobe with surrounding edema", "Imaging characteristics suggestive of glioblastoma", "Age and symptom profile consistent with diagnosis", ], explanation: "The MRI findings, patient age, and symptom profile strongly suggest glioblastoma multiforme. The mass location in the temporal lobe explains the patient's memory issues and headaches.", }, { diagnosis: "Metastatic Brain Tumor", probability: 0.12, evidence: ["Single brain lesion", "No known primary cancer", "Imaging characteristics"], explanation: "While metastatic disease is possible, the absence of a known primary cancer and the imaging characteristics make this less likely than a primary brain tumor.", }, { diagnosis: "Meningioma", probability: 0.03, evidence: ["Brain mass", "Patient age appropriate"], explanation: "Meningiomas typically have different imaging characteristics and are often less associated with surrounding edema. The location and appearance make this diagnosis less likely.", }, ] // Sample treatment recommendations const treatmentRecommendations = [ { recommendation: "Neurosurgical Consultation", priority: "High", rationale: "Surgical resection is the first-line treatment for accessible glioblastomas. Extent of resection correlates with survival outcomes.", evidence: "Meta-analysis of 41 studies showed improved survival with maximal safe resection (Level I evidence).", }, { recommendation: "Stereotactic Biopsy", priority: "High", rationale: "Histopathological confirmation is necessary for definitive diagnosis and molecular profiling.", evidence: "WHO CNS tumor classification requires molecular markers for accurate diagnosis and prognosis (Level I evidence).", }, { recommendation: "Adjuvant Chemoradiation", priority: "Medium", rationale: "Standard of care following resection includes radiation with concurrent and adjuvant temozolomide.", evidence: "Stupp protocol demonstrated improved median survival from 12.1 to 14.6 months (Level I evidence).", }, { recommendation: "Molecular Testing", priority: "Medium", rationale: "MGMT promoter methylation status and IDH mutation status guide prognosis and treatment decisions.", evidence: "Patients with MGMT methylation show better response to temozolomide (Level II evidence).", }, ] export default function ClinicalReasoningEngine() { const [activeTab, setActiveTab] = useState("case") const [isAnalyzing, setIsAnalyzing] = useState(false) const [analysisComplete, setAnalysisComplete] = useState(false) const [analysisProgress, setAnalysisProgress] = useState(0) const [currentStep, setCurrentStep] = useState(0) // Start the analysis process const startAnalysis = () => { setIsAnalyzing(true) setAnalysisComplete(false) setAnalysisProgress(0) setCurrentStep(0) // Simulate analysis progress const interval = setInterval(() => { setAnalysisProgress((prev) => { const newProgress = prev + 5 // Update current reasoning step if (newProgress >= 25 && currentStep < 1) { setCurrentStep(1) } else if (newProgress >= 50 && currentStep < 2) { setCurrentStep(2) } else if (newProgress >= 75 && currentStep < 3) { setCurrentStep(3) } if (newProgress >= 100) { clearInterval(interval) setAnalysisComplete(true) setActiveTab("diagnosis") return 100 } return newProgress }) }, 300) } return (

Neuro-Symbolic Clinical Reasoning Engine AI-powered clinical decision support with explainable reasoning

{analysisComplete ? "Analysis Complete" : "Ready"}

Patient Case Reasoning Diagnosis Treatment

Patient Information

Patient ID: {patientCase.patientId}

Age: {patientCase.age} years

Gender: {patientCase.gender}

Vital Signs

{Object.entries(patientCase.vitalSigns).map(([key, value]) => (

{key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase())}: {value}

))}

Lab Results

{patientCase.labResults.map((lab, index) => (

{lab.name}: {lab.value} {lab.unit} ({lab.referenceRange})

))}

Presenting Symptoms

{symptom}

Medical History

{condition}

Imaging Results

{patientCase.imaging.type} {patientCase.imaging.date}

{patientCase.imaging.findings}

{isAnalyzing && (

Analysis in progress... {analysisProgress}%

{reasoningSteps.map((step, index) => (

= index ? "border-purple-200 bg-purple-50 dark:bg-purple-900/20 dark:border-purple-800" : "border-gray-200 bg-gray-50 dark:bg-gray-800/50 dark:border-gray-700" }`} >

{currentStep > index ? ( ) : currentStep === index ? ( ) : (

)} = index ? "font-medium" : "text-gray-500"}>{step.title}

))}

)}

AI Reasoning Process

The neuro-symbolic AI combines neural networks for pattern recognition with symbolic reasoning for logical deduction. Below is the step-by-step reasoning process used to analyze this case.

{reasoningSteps.map((step, index) => (

{step.type === "data" && } {step.type === "knowledge" && } {step.type === "reasoning" && } {step.type === "integration" && }

{step.title}

{step.description}

{Math.round(step.confidence * 100)}% confidence

{step.details.map((detail, i) => (

{detail}

))}

Diagnostic Assessment

AI Diagnostic Confidence The neuro-symbolic AI has analyzed this case with 91% overall confidence. Multiple diagnostic possibilities have been considered with their relative probabilities.

{diagnosticConclusions.map((diagnosis, index) => (

{diagnosis.diagnosis} {Math.round(diagnosis.probability * 100)}%

{diagnosis.explanation}

Supporting Evidence:

{evidence}

))}

Treatment Recommendations

Clinical Decision Support These recommendations are provided as decision support and should be reviewed by qualified healthcare professionals. Patient-specific factors may require modification of the standard approach.

{treatmentRecommendations.map((treatment, index) => (

{treatment.recommendation} {treatment.priority} Priority

Rationale:

{treatment.rationale}

Evidence Base:

{treatment.evidence}

))}

Neuro-symbolic AI combines neural networks with symbolic reasoning for explainable clinical decision support

) } [V0_FILE]typescriptreact:file="components/integrations/quantum-genomics/quantum-genomic-analyzer.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { AlertCircle, FileText, Database, Dna, Cpu, Zap, BarChart2, ChevronRight, Clock } from "lucide-react" import { Progress } from "@/components/ui/progress" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" // Sample genomic analysis data const genomicData = { patientId: "P-58291", sampleId: "GS-12345", sampleType: "Tumor tissue (FFPE)", sequencingType: "Whole Exome Sequencing", sequencingDepth: "150x", analysisDate: "2023-11-15", tumorMutationalBurden: 8.2, microsatelliteStatus: "MSS (Stable)", significantMutations: [ { gene: "EGFR", mutation: "T790M", variantAlleleFrequency: 0.35, significance: "Resistance to first-generation TKIs", therapyImplications: ["Osimertinib indicated", "Avoid erlotinib/gefitinib"], }, { gene: "TP53", mutation: "R273H", variantAlleleFrequency: 0.42, significance: "Loss of tumor suppressor function", therapyImplications: ["Potential sensitivity to WEE1 inhibitors", "Consider clinical trials"], }, { gene: "KRAS", mutation: "G12C", variantAlleleFrequency: 0.38, significance: "Activating mutation in MAPK pathway", therapyImplications: ["Sotorasib or adagrasib may be effective", "Resistance to EGFR inhibitors"], }, ], copyNumberAlterations: [ { gene: "MYC", alteration: "Amplification", copyNumber: 8, significance: "Associated with cell proliferation", }, { gene: "PTEN", alteration: "Deletion", copyNumber: 0, significance: "Loss of tumor suppressor function", }, ], geneExpressionSignatures: [ { name: "DNA Damage Repair", status: "Deficient", score: 0.35, therapyImplications: ["Potential sensitivity to PARP inhibitors"], }, { name: "Immune Infiltration", status: "Low", score: 0.22, therapyImplications: ["Limited benefit from immunotherapy expected"], }, ], } // Sample quantum computing performance metrics const quantumMetrics = { classicalTime: 18.5, // hours quantumTime: 0.42, // hours speedup: 44, // times faster accuracyImprovement: 12, // percentage points quantumResources: { qubits: 127, circuitDepth: 85, errorRate: 0.0012, }, algorithms: [ { name: "Quantum Approximate Optimization Algorithm (QAOA)", purpose: "Sequence alignment optimization", speedup: 38, accuracy: 0.94, }, { name: "Quantum Support Vector Machine", purpose: "Variant classification", speedup: 22, accuracy: 0.91, }, { name: "Quantum Principal Component Analysis", purpose: "Dimensionality reduction for gene expression data", speedup: 65, accuracy: 0.89, }, ], } // Sample therapeutic options based on genomic analysis const therapeuticOptions = [ { drug: "Osimertinib", targetGene: "EGFR", targetMutation: "T790M", evidenceLevel: "Level 1", approvalStatus: "FDA Approved", clinicalBenefit: "High", description: "Third-generation EGFR TKI effective against T790M resistance mutation", }, { drug: "Sotorasib", targetGene: "KRAS", targetMutation: "G12C", evidenceLevel: "Level 1", approvalStatus: "FDA Approved", clinicalBenefit: "Moderate", description: "First KRAS G12C inhibitor, covalently binds to mutant KRAS protein", }, { drug: "AZD1775 (Adavosertib)", targetGene: "TP53", targetMutation: "R273H", evidenceLevel: "Level 3", approvalStatus: "Clinical Trials", clinicalBenefit: "Unknown", description: "WEE1 inhibitor, synthetic lethality in TP53-mutated tumors", }, { drug: "Olaparib", targetGene: "DNA Damage Repair Pathway", targetMutation: "Deficiency", evidenceLevel: "Level 2", approvalStatus: "Off-label", clinicalBenefit: "Moderate", description: "PARP inhibitor, effective in tumors with DNA repair deficiencies", }, ] export default function QuantumGenomicAnalyzer() { const [analysisStatus, setAnalysisStatus] = useState<"idle" | "running" | "completed" | "error">("idle") const [analysisProgress, setAnalysisProgress] = useState(0) const [activeTab, setActiveTab] = useState("genomic-data") const [quantumMode, setQuantumMode] = useState(true) const [quantumResourceAllocation, setQuantumResourceAllocation] = useState(75) const [error, setError] = useState(null) // Start genomic analysis const startAnalysis = () => { setAnalysisStatus("running") setAnalysisProgress(0) setError(null) // Simulate analysis progress const interval = setInterval(() => { setAnalysisProgress((prev) => { const newProgress = prev + (quantumMode ? 5 : 2) if (newProgress >= 100) { clearInterval(interval) setAnalysisStatus("completed") return 100 } return newProgress }) }, 300) } return (

Quantum Genomic Analyzer Accelerated genomic analysis using quantum computing

{analysisStatus === "idle" ? "Ready" : analysisStatus === "running" ? "Processing" : analysisStatus === "completed" ? "Analysis Complete" : "Error"}

Genomic Data Quantum Analysis Mutations Therapeutics

Sample Information

Patient ID: {genomicData.patientId}

Sample ID: {genomicData.sampleId}

Sample Type: {genomicData.sampleType}

Sequencing Type: {genomicData.sequencingType}

Sequencing Depth: {genomicData.sequencingDepth}

Analysis Date: {genomicData.analysisDate}

Analysis Configuration

Quantum Computing Mode

Enable quantum acceleration for analysis

{quantumMode && (

Quantum Resource Allocation {quantumResourceAllocation}%

setQuantumResourceAllocation(value[0])} disabled={analysisStatus === "running"} />

Higher allocation increases speed but may reduce availability for other tasks

)}

Analysis Type

Genomic Summary

Tumor Mutational Burden {genomicData.tumorMutationalBurden} mut/Mb

Moderate TMB, may have limited response to immunotherapy

Microsatellite Status {genomicData.microsatelliteStatus}

Microsatellite stable, less likely to respond to immunotherapy

Significant Mutations {genomicData.significantMutations.length}

Actionable mutations in EGFR, TP53, KRAS

Copy Number Alterations {genomicData.copyNumberAlterations.length}

MYC amplification, PTEN deletion

{analysisStatus === "running" && (

Analysis in progress... {analysisProgress}%

Estimated time remaining: {quantumMode ? "2 minutes" : "45 minutes"}

)} {error && ( Error {error} )}

Quantum Computing Performance

Processing Time

{quantumMetrics.speedup}x

Faster than classical computing

Classical: {quantumMetrics.classicalTime} hours

Quantum: {quantumMetrics.quantumTime} hours

Accuracy Improvement

+{quantumMetrics.accuracyImprovement}%

Higher accuracy in variant calling

Variant Detection Sensitivity

Classical: 80% Quantum: 92%

Quantum Resources

Qubits: {quantumMetrics.quantumResources.qubits}

Circuit Depth: {quantumMetrics.quantumResources.circuitDepth}

Error Rate: {quantumMetrics.quantumResources.errorRate.toFixed(4)}

Quantum Algorithms Used

{quantumMetrics.algorithms.map((algorithm, index) => ( {algorithm.name}

Purpose:

{algorithm.purpose}

Speedup: {algorithm.speedup}x

Accuracy: {(algorithm.accuracy * 100).toFixed(1)}%

))}

Significant Mutations

Quantum-Enhanced Analysis Quantum computing has enabled detection of low-frequency variants and complex mutation patterns that may be missed by classical approaches. {genomicData.significantMutations.map((mutation, index) => (

{mutation.gene} {mutation.mutation}

VAF: {mutation.variantAlleleFrequency.toFixed(2)}

Clinical Significance:

{mutation.significance}

Therapy Implications:

{implication}

))}

Copy Number Alterations

{genomicData.copyNumberAlterations.map((alteration, index) => (

{alteration.gene} {alteration.alteration} (CN: {alteration.copyNumber})

{alteration.significance}

))}

Gene Expression Signatures

{genomicData.geneExpressionSignatures.map((signature, index) => (

{signature.name} {signature.status}

Score: {signature.score.toFixed(2)}

Therapy Implications:

{implication}

))}

Therapeutic Options

{therapeuticOptions.map((therapy, index) => (

{therapy.drug} {therapy.evidenceLevel}

Target: {therapy.targetGene} {therapy.targetMutation}

{therapy.description}

Approval Status: {therapy.approvalStatus}

Clinical Benefit: {therapy.clinicalBenefit}

))}

Clinical Trials

3 matching clinical trials found based on genomic profile

Quantum computing accelerates genomic analysis by 44x with improved accuracy

) } [V0_FILE]typescriptreact:file="app/integrations/page.tsx" isMerged="true" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import BeakerConnector from "@/components/integrations/beaker-integration/beaker-connector" import PatientAnatomyViewer from "@/components/integrations/digital-twin/patient-anatomy-viewer" import ClinicalReasoningEngine from "@/components/integrations/neuro-symbolic/clinical-reasoning-engine" import QuantumGenomicAnalyzer from "@/components/integrations/quantum-genomics/quantum-genomic-analyzer" export default function IntegrationsPage() { return (

AGENT Healthcare AI Integrations

Beaker Integration 3D Digital Twin Neuro-Symbolic AI Quantum Genomics

) } [V0_FILE]typescriptreact:file="app/integrations/digital-twin/page.tsx" "use client" import { useState, useRef } from "react" import { Canvas } from "@react-three/fiber" import { OrbitControls, Environment, ContactShadows, Html, PerspectiveCamera } from "@react-three/drei" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ZoomIn, ZoomOut, RotateCcw, Eye, EyeOff } from "lucide-react" // Simple brain model component function BrainModel({ position = [0, 0, 0], rotation = [0, 0, 0], scale = 1, treatmentType = "none", treatmentIntensity = 0, highlightedPart = null, onPartClick, }) { // Create a simple brain model with parts const parts = { frontalLobe: useRef(), parietalLobe: useRef(), temporalLobe: useRef(), occipitalLobe: useRef(), cerebellum: useRef(), brainStem: useRef(), tumor: useRef(), } // Apply treatment effects const getTreatmentColor = (partName) => { if (treatmentType === "none" || treatmentIntensity === 0) { return partName === "tumor" ? "#ff4444" : "#f2a9a9" } if (partName === "tumor") { if (treatmentType === "radiation") { // Radiation effect - tumor gets darker red with treatment const intensity = 1 - treatmentIntensity * 0.7 return `rgb(${Math.floor(255 * intensity)}, 30, 30)` } else if (treatmentType === "drug") { // Drug effect - tumor changes color return `rgb(255, ${Math.floor(treatmentIntensity * 150)}, 50)` } else if (treatmentType === "surgery") { // Surgery effect - tumor gets transparent return "#ff4444" // Color handled in material opacity } } return partName === "tumor" ? "#ff4444" : "#f2a9a9" } const getMaterialProps = (partName) => { const isHighlighted = partName === highlightedPart const isTumor = partName === "tumor" const baseProps = { color: getTreatmentColor(partName), emissive: isHighlighted ? "#3366ff" : "#000000", emissiveIntensity: isHighlighted ? 0.5 : 0, roughness: 0.6, metalness: 0.2, } // Add transparency for surgery simulation on tumor if (isTumor && treatmentType === "surgery") { return { ...baseProps, transparent: true, opacity: Math.max(0.2, 1 - treatmentIntensity * 0.8), } } return baseProps } const handleClick = (e, partName) => { e.stopPropagation() if (onPartClick) { onPartClick(partName) } } return ( {/* Frontal lobe */} handleClick(e, "frontalLobe")}> {/* Parietal lobe */} handleClick(e, "parietalLobe")}> {/* Temporal lobe */} handleClick(e, "temporalLobe")}> {/* Occipital lobe */} handleClick(e, "occipitalLobe")}> {/* Cerebellum */} handleClick(e, "cerebellum")}> {/* Brain stem */} handleClick(e, "brainStem")}> {/* Tumor */} handleClick(e, "tumor")}> ) } // Annotation component for labeling parts function Annotation({ position, content, visible = true }) { if (!visible) return null return (

{content}

) } // Main patient anatomy viewer component export default function PatientAnatomyViewer() { // State for model display options const [cameraPosition, setCameraPosition] = useState([0, 0, 5]) const [modelRotation, setModelRotation] = useState([0, 0, 0]) const [modelScale, setModelScale] = useState(1.0) const [showWireframe, setShowWireframe] = useState(false) const [showAnnotations, setShowAnnotations] = useState(true) const [highlightedPart, setHighlightedPart] = useState(null) // State for treatment simulation const [treatmentType, setTreatmentType] = useState("none") const [treatmentIntensity, setTreatmentIntensity] = useState(0) // Annotations for the model const annotations = [ { position: [0, 1.2, 0.7], content: "Frontal Lobe", partName: "frontalLobe" }, { position: [0, 1.2, 0], content: "Parietal Lobe", partName: "parietalLobe" }, { position: [1.2, -0.1, 0.3], content: "Temporal Lobe", partName: "temporalLobe" }, { position: [0, 0, -1.2], content: "Occipital Lobe", partName: "occipitalLobe" }, { position: [0, -1.0, -0.5], content: "Cerebellum", partName: "cerebellum" }, { position: [0, -1.5, -0.2], content: "Brain Stem", partName: "brainStem" }, { position: [0.9, 0.2, 0.3], content: "Tumor", partName: "tumor" }, ] // Handle part click/selection const handlePartClick = (partName) => { setHighlightedPart(partName === highlightedPart ? null : partName) } // Reset camera view const resetCamera = () => { setCameraPosition([0, 0, 5]) setModelRotation([0, 0, 0]) setModelScale(1.0) } return (

3D Digital Twin Prototype

Patient Anatomy Digital Twin Interactive 3D visualization of patient anatomy

Patient ID: P-58291

{/* Overlay controls */}

Treatment: {treatmentType !== "none" && (

Intensity: setTreatmentIntensity(value[0])} className="w-[100px]" />

)}

Selected Part: {highlightedPart || "None"}

Click on a brain region to select it

Show Labels

About Digital Twinning

Digital twins are virtual representations of physical objects or systems. In healthcare, they can be used to create patient-specific models for treatment planning, education, and simulation.

This prototype demonstrates a simplified brain model with interactive features including:

Part selection and highlighting
Treatment simulation (radiation, drug therapy, surgery)
Interactive 3D visualization
Anatomical annotations

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export default function Home() { return (

AGENT Healthcare AI Platform

Advanced healthcare analytics and federated learning platform for precision oncology

3D Digital Twin Interactive 3D visualization of patient anatomy

Create interactive 3D models and digital twins of patient anatomy and pathology to enhance visualization and treatment planning.

Anatomical Models 3D model viewer for medical education

Explore detailed 3D anatomical models with interactive features for medical education and clinical reference.

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This