Spaces:

---

VatsalPatel18

/

hoal

like 0

Running

So I want you to make a web infographic where you need to display / present the the product information to the audience in a slide deck presentation formation,So I'm thinking of makeing or presenting this system, whoes key words in short I have collected "Adaptive Clinical Intelligent System - (ACLIS) which is bascially a combination of " Foundation Models + AI Agents + MCP Tools/Resources " ; where one of the models is MedGemma (LVLM) + External ( VLM ; Pathology , Radiology foundation models ; Specific Scenario ; there can be external VISION specific models), also one of the other key innovation is the TabPFN (Tabular Foundation model) for making prediction on  Clinical data which is always tabular in nature , so this system will also have acces to this tabularfoundation model which is ideally pre-trained or fine tuned for any Any Disease, based on the data associated with the hospital and it does not require that much detailed in formation ( there is a seperate COPILOT Trainer Agent that does this trainnning and stuff which we will discuss later) , next there is OCR recognition model | Non Digital records ( for third world countried where EHR are not there yet) ; apart from that the normal  EHR are accessed with MCP server (Model context Protocol server; this is some famous recent thing) ; thiese MCP's can be connected / authenticated with Government profile to get secure patientis EHR , additionally in this system there is a "Doctors AI Protocol & Lab" where, doctors / physciians Personal insights over general population observation (are recorded or doctor can mention , like for some hab1c parameter for diabeters might be different for population of south africa and dubai, and given the experience of doctor he might consider something normal or not normal ( which is not exactly what is mentioned in the textbooks); and these kinds of personal preferences doctors for specific or their area of expertise can mention in their protocol notebook , all this information will be used to fine tune and align the language models as well as the tabular foundation models, so there is an - Automated Model Alignment & Fine Tuning COPILOT AGent , also Augmented Protocol ( Its like MCP, but for Doctors, Doctor Context Protocol , where there is Observations, but it also has information on the Tools/Medical Devices the doctors  interacts with ( what are the inputs and outputs of this device are ; like the doctors often takes a looks at xray, or CT scans all such information is present in this doctor context , and with that there can be direct connectivity of the medical device itself ( where an AI can directly fetch a patients particular scan or report ; and make preliminary observations) ; these can be electrical based machine or any sorts, all this will also be used to fine tune or align the LLM's VLMS or Tabular foundation model ,based on where what data is passed, also Clinical Research studies doctor believes in will be stored here, so this can give inputs about the cutting edge research work that might be relevant to a decision over a relevant patient preliminary summary , so yeah there is this whole strategy of DCP based model alignment. Additionally System is also aware of the general research observations "Global Disease Research" which is an Active Agent Model is also aware of the general research observations on parameters of complex disease and treatment strategy | Reverts when asked with additioanal references while the doctor is making a decision, apart from that for thje hospital and for the doctos as well this system includes an "Active Disease Alarm" which is an all time Active Agent ( lets say its like Pandemic Mode ) so it Keeps track of tweets and news information related to new breakouts and the symptoms of a disease based on the locality & globality , Gives ping over currently admitted patients that share similar symptoms " So this is overall thought of the ACLIS , "Adaptive Clinically Intelligent System" , we already have its UI "Directory structure: └── vatsalpatel18-aclis-firebase/     ├── README.md     ├── apphosting.yaml     ├── components.json     ├── next.config.ts     ├── package.json     ├── postcss.config.mjs     ├── tailwind.config.ts     ├── tsconfig.json     ├── .modified     ├── docs/     │   └── blueprint.md     ├── src/     │   ├── ai/     │   │   ├── dev.ts     │   │   ├── genkit.ts     │   │   └── flows/     │   │       ├── analyze-imaging-findings.ts     │   │       ├── augment-agent-observations.ts     │   │       ├── contradiction-alert.ts     │   │       ├── estimate-survival-risk.ts     │   │       └── generate-preliminary-summary.ts     │   ├── app/     │   │   ├── actions.ts     │   │   ├── globals.css     │   │   ├── layout.tsx     │   │   ├── page.tsx     │   │   ├── admin-dashboard/     │   │   │   └── page.tsx     │   │   ├── nursing-dashboard/     │   │   │   └── page.tsx     │   │   ├── patient-dashboard/     │   │   │   └── page.tsx     │   │   ├── physician/     │   │   │   └── patient/     │   │   │       └── [id]/     │   │   │           └── page.tsx     │   │   └── physician-dashboard/     │   │       └── page.tsx     │   ├── components/     │   │   ├── aclis/     │   │   │   ├── aclis-assistant-card.tsx     │   │   │   ├── action-bar.tsx     │   │   │   ├── active-agents-card.tsx     │   │   │   ├── admin-dashboard.tsx     │   │   │   ├── advertisements-card.tsx     │   │   │   ├── appointments-card.tsx     │   │   │   ├── care-team-card.tsx     │   │   │   ├── connected-devices-card.tsx     │   │   │   ├── contradiction-alert-card.tsx     │   │   │   ├── copilot-agent-panel.tsx     │   │   │   ├── copilot-config-card.tsx     │   │   │   ├── data-privacy-card.tsx     │   │   │   ├── disease-protocol-card.tsx     │   │   │   ├── doctor-protocol-builder-card.tsx     │   │   │   ├── doctor-protocol-card.tsx     │   │   │   ├── ehr-summary-card.tsx     │   │   │   ├── foundation-models-card.tsx     │   │   │   ├── genomic-risk-card.tsx     │   │   │   ├── global-surveillance-card.tsx     │   │   │   ├── gpu-resources-card.tsx     │   │   │   ├── health-dashboard-card.tsx     │   │   │   ├── health-education-card.tsx     │   │   │   ├── imaging-findings-card.tsx     │   │   │   ├── main-workspace.tsx     │   │   │   ├── medical-devices-card.tsx     │   │   │   ├── medications-card.tsx     │   │   │   ├── model-training-card.tsx     │   │   │   ├── notifications.tsx     │   │   │   ├── nursing-dashboard.tsx     │   │   │   ├── patient-assignments-card.tsx     │   │   │   ├── patient-context-bar.tsx     │   │   │   ├── patient-dashboard.tsx     │   │   │   ├── physician-dashboard.tsx     │   │   │   ├── preliminary-summary-card.tsx     │   │   │   ├── priority-alerts-card.tsx     │   │   │   ├── quick-actions-card.tsx     │   │   │   ├── suggested-imaging-card.tsx     │   │   │   ├── suggested-tests-card.tsx     │   │   │   ├── suggested-therapies-card.tsx     │   │   │   ├── system-health-card.tsx     │   │   │   ├── tasks-card.tsx     │   │   │   ├── test-results-card.tsx     │   │   │   ├── ward-overview-card.tsx     │   │   │   └── workflow-automation-card.tsx     │   │   └── ui/     │   │       ├── accordion.tsx     │   │       ├── alert-dialog.tsx     │   │       ├── alert.tsx     │   │       ├── avatar.tsx     │   │       ├── badge.tsx     │   │       ├── button.tsx     │   │       ├── calendar.tsx     │   │       ├── card.tsx     │   │       ├── carousel.tsx     │   │       ├── chart.tsx     │   │       ├── checkbox.tsx     │   │       ├── collapsible.tsx     │   │       ├── dialog.tsx     │   │       ├── dropdown-menu.tsx     │   │       ├── form.tsx     │   │       ├── input.tsx     │   │       ├── label.tsx     │   │       ├── menubar.tsx     │   │       ├── popover.tsx     │   │       ├── progress.tsx     │   │       ├── radio-group.tsx     │   │       ├── scroll-area.tsx     │   │       ├── select.tsx     │   │       ├── separator.tsx     │   │       ├── sheet.tsx     │   │       ├── sidebar.tsx     │   │       ├── skeleton.tsx     │   │       ├── slider.tsx     │   │       ├── switch.tsx     │   │       ├── table.tsx     │   │       ├── tabs.tsx     │   │       ├── textarea.tsx     │   │       ├── toast.tsx     │   │       ├── toaster.tsx     │   │       └── tooltip.tsx     │   ├── hooks/     │   │   ├── use-mobile.tsx     │   │   └── use-toast.ts     │   └── lib/     │       └── utils.ts     └── .idx/         └── dev.nix Files Content: (Files content cropped to 300k characters, download full ingest to see more) ================================================ FILE: README.md ================================================ # Firebase Studio This is a NextJS starter in Firebase Studio. To get started, take a look at src/app/page.tsx. ================================================ FILE: apphosting.yaml ================================================ # Settings to manage and configure a Firebase App Hosting backend. # https://firebase.google.com/docs/app-hosting/configure runConfig:   # Increase this value if you'd like to automatically spin up   # more instances in response to increased traffic.   maxInstances: 1 ================================================ FILE: components.json ================================================ {   "$schema": "https://ui.shadcn.com/schema.json",   "style": "default",   "rsc": true,   "tsx": true,   "tailwind": {     "config": "tailwind.config.ts",     "css": "src/app/globals.css",     "baseColor": "neutral",     "cssVariables": true,     "prefix": ""   },   "aliases": {     "components": "@/components",     "utils": "@/lib/utils",     "ui": "@/components/ui",     "lib": "@/lib",     "hooks": "@/hooks"   },   "iconLibrary": "lucide" } ================================================ FILE: next.config.ts ================================================ import type {NextConfig} from 'next'; const nextConfig: NextConfig = {   /* config options here */   typescript: {     ignoreBuildErrors: true,   },   eslint: {     ignoreDuringBuilds: true,   },   images: {     remotePatterns: [       {         protocol: 'https',         hostname: 'placehold.co',         port: '',         pathname: '/**',       },       {         protocol: 'https',         hostname: 'randomuser.me',         port: '',         pathname: '/api/portraits/**',       },     ],   }, }; export default nextConfig; ================================================ FILE: package.json ================================================ {   "name": "nextn",   "version": "0.1.0",   "private": true,   "scripts": {     "dev": "next dev --turbopack -p 9002",     "genkit:dev": "genkit start -- tsx src/ai/dev.ts",     "genkit:watch": "genkit start -- tsx --watch src/ai/dev.ts",     "build": "next build",     "start": "next start",     "lint": "next lint",     "typecheck": "tsc --noEmit"   },   "dependencies": {     "@genkit-ai/googleai": "^1.13.0",     "@genkit-ai/next": "^1.13.0",     "@hookform/resolvers": "^4.1.3",     "@radix-ui/react-accordion": "^1.2.3",     "@radix-ui/react-alert-dialog": "^1.1.6",     "@radix-ui/react-avatar": "^1.1.3",     "@radix-ui/react-checkbox": "^1.1.4",     "@radix-ui/react-collapsible": "^1.1.11",     "@radix-ui/react-dialog": "^1.1.6",     "@radix-ui/react-dropdown-menu": "^2.1.6",     "@radix-ui/react-label": "^2.1.2",     "@radix-ui/react-menubar": "^1.1.6",     "@radix-ui/react-popover": "^1.1.6",     "@radix-ui/react-progress": "^1.1.2",     "@radix-ui/react-radio-group": "^1.2.3",     "@radix-ui/react-scroll-area": "^1.2.3",     "@radix-ui/react-select": "^2.1.6",     "@radix-ui/react-separator": "^1.1.2",     "@radix-ui/react-slider": "^1.2.3",     "@radix-ui/react-slot": "^1.2.3",     "@radix-ui/react-switch": "^1.1.3",     "@radix-ui/react-tabs": "^1.1.3",     "@radix-ui/react-toast": "^1.2.6",     "@radix-ui/react-tooltip": "^1.1.8",     "class-variance-authority": "^0.7.1",     "clsx": "^2.1.1",     "date-fns": "^3.6.0",     "dotenv": "^16.5.0",     "embla-carousel-react": "^8.6.0",     "firebase": "^11.9.1",     "genkit": "^1.13.0",     "lucide-react": "^0.475.0",     "next": "15.3.3",     "patch-package": "^8.0.0",     "react": "^18.3.1",     "react-day-picker": "^8.10.1",     "react-dom": "^18.3.1",     "react-hook-form": "^7.54.2",     "recharts": "^2.15.1",     "tailwind-merge": "^3.0.1",     "tailwindcss-animate": "^1.0.7",     "zod": "^3.24.2"   },   "devDependencies": {     "@types/node": "^20",     "@types/react": "^18",     "@types/react-dom": "^18",     "genkit-cli": "^1.13.0",     "postcss": "^8",     "tailwindcss": "^3.4.1",     "typescript": "^5"   } } ================================================ FILE: postcss.config.mjs ================================================ /** @type {import('postcss-load-config').Config} */ const config = {   plugins: {     tailwindcss: {},   }, }; export default config; ================================================ FILE: tailwind.config.ts ================================================ import type {Config} from 'tailwindcss'; export default {   darkMode: ['class'],   content: [     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',     './src/components/**/*.{js,ts,jsx,tsx,mdx}',     './src/app/**/*.{js,ts,jsx,tsx,mdx}',   ],   theme: {     extend: {       fontFamily: {         body: ['Inter', 'sans-serif'],         headline: ['Inter', 'sans-serif'],         code: ['monospace'],       },       colors: {         background: 'hsl(var(--background))',         foreground: 'hsl(var(--foreground))',         card: {           DEFAULT: 'hsl(var(--card))',           foreground: 'hsl(var(--card-foreground))',         },         popover: {           DEFAULT: 'hsl(var(--popover))',           foreground: 'hsl(var(--popover-foreground))',         },         primary: {           DEFAULT: 'hsl(var(--primary))',           foreground: 'hsl(var(--primary-foreground))',         },         secondary: {           DEFAULT: 'hsl(var(--secondary))',           foreground: 'hsl(var(--secondary-foreground))',         },         muted: {           DEFAULT: 'hsl(var(--muted))',           foreground: 'hsl(var(--muted-foreground))',         },         accent: {           DEFAULT: 'hsl(var(--accent))',           foreground: 'hsl(var(--accent-foreground))',         },         destructive: {           DEFAULT: 'hsl(var(--destructive))',           foreground: 'hsl(var(--destructive-foreground))',         },         border: 'hsl(var(--border))',         input: 'hsl(var(--input))',         ring: 'hsl(var(--ring))',         chart: {           '1': 'hsl(var(--chart-1))',           '2': 'hsl(var(--chart-2))',           '3': 'hsl(var(--chart-3))',           '4': 'hsl(var(--chart-4))',           '5': 'hsl(var(--chart-5))',         },         sidebar: {           DEFAULT: 'hsl(var(--sidebar-background))',           foreground: 'hsl(var(--sidebar-foreground))',           primary: 'hsl(var(--sidebar-primary))',           'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',           accent: 'hsl(var(--sidebar-accent))',           'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',           border: 'hsl(var(--sidebar-border))',           ring: 'hsl(var(--sidebar-ring))',         },       },       borderRadius: {         lg: 'var(--radius)',         md: 'calc(var(--radius) - 2px)',         sm: 'calc(var(--radius) - 4px)',       },       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',           },         },       },       animation: {         'accordion-down': 'accordion-down 0.2s ease-out',         'accordion-up': 'accordion-up 0.2s ease-out',       },     },   },   plugins: [require('tailwindcss-animate')], } satisfies Config; ================================================ FILE: tsconfig.json ================================================ {   "compilerOptions": {     "target": "ES2017",     "lib": ["dom", "dom.iterable", "esnext"],     "allowJs": true,     "skipLibCheck": true,     "strict": true,     "noEmit": true,     "esModuleInterop": true,     "module": "esnext",     "moduleResolution": "bundler",     "resolveJsonModule": true,     "isolatedModules": true,     "jsx": "preserve",     "incremental": true,     "plugins": [       {         "name": "next"       }     ],     "paths": {       "@/*": ["./src/*"]     }   },   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],   "exclude": ["node_modules"] } ================================================ FILE: .modified ================================================ [Empty file] ================================================ FILE: docs/blueprint.md ================================================ # **App Name**: ACLIS DoctorView ## Core Features: - AI-Powered Summary: Preliminary Summary: AI-generated summary of patient history, chief complaint, and other essential information, sourced from the system's data integration layer and refined using generative AI; it allows the doctor to review the summary, make edits, and send to other clinicians. Displays source, QA rounds, and confidence level. - EHR Summary: EHR Snapshot: Display vitals trends, key lab results, and current medications. Highlights abnormal results and overdue orders for quick review. - Intelligent Imaging: Imaging Findings: Display medical images (CT, X-ray, MRI) with AI-powered overlays highlighting regions of interest. Provides confidence scores for findings. Doctors can use a tool to select different models or views. Offers options to switch between different AI agents for image analysis. - Genomic Insights: Genomic Risk Assessment: Show predicted risk scores (TabPFN output) and relevant mutations with clinical significance. Display patient-specific disease stage and simulate risk changes based on biomarker shifts, giving insights for adjusting care plans. The 5 year survival risk is an ai-augmented estimation. - Personalized Protocols: Doctor Protocol Integration: Provide access to the doctor's personal protocols, research feeds, and device preferences, creating quick access for decision making, customized based on training and insight. The doctor's local patient observations inform ongoing model training. - AI Copilot Agents: Copilot Agent Panel: Enable access to AI copilot agents (Radiology, Pathology, Oncology) with contextual tools. These act as AI assistants for medical tasks, and allow a doctor to enhance preliminary observations or create reports and findings summaries. - Contradiction Alerts: Active Disease Alarm: Integrated system alerts doctors to potential disease outbreaks based on real-time news, social media, and patient symptoms, including alerts that an article contains contradictions to a prescribed therapy.  ## Style Guidelines: - Primary color: Deep blue (#3F51B5), evoking a sense of trust and clinical authority, given its widespread use in the medical field. Note: currently only Google Fonts are supported. - Background color: Light blue-gray (#F0F4F9), creating a calm and clean environment that reduces eye strain. - Accent color: Electric purple (#7C4DFF) as a secondary highlight to denote selected functions and interactive elements in the UI, lending the app a tech-forward feel. Note: currently only Google Fonts are supported. - Body and headline font: 'Inter', a sans-serif font with a clean, modern aesthetic. - Use a consistent style of minimalist icons throughout the interface. - Employ a card-based layout to present information in a clear, structured manner. - Use subtle animations (e.g., smooth transitions, loading indicators) to enhance the user experience without being distracting. ================================================ FILE: src/ai/dev.ts ================================================ import { config } from 'dotenv'; config(); import '@/ai/flows/contradiction-alert.ts'; import '@/ai/flows/augment-agent-observations.ts'; import '@/ai/flows/generate-preliminary-summary.ts'; import '@/ai/flows/estimate-survival-risk.ts'; import '@/ai/flows/analyze-imaging-findings.ts'; ================================================ FILE: src/ai/genkit.ts ================================================ import {genkit} from 'genkit'; import {googleAI} from '@genkit-ai/googleai'; export const ai = genkit({   plugins: [googleAI()],   model: 'googleai/gemini-2.0-flash', }); ================================================ FILE: src/ai/flows/analyze-imaging-findings.ts ================================================ // This is an auto-generated file from Firebase Studio. 'use server'; /**  * @fileOverview An AI agent that analyzes medical images and provides overlays highlighting regions of interest.  *  * - analyzeImagingFindings - A function that handles the image analysis process.  * - AnalyzeImagingFindingsInput - The input type for the analyzeImagingFindings function.  * - AnalyzeImagingFindingsOutput - The return type for the analyzeImagingFindings function.  */ import {ai} from '@/ai/genkit'; import {z} from 'genkit'; const AnalyzeImagingFindingsInputSchema = z.object({   imageDataUri: z     .string()     .describe(       "A medical image (CT, X-ray, MRI) as a data URI that must include a MIME type and use Base64 encoding. Expected format: 'data:<mimetype>;base64,<encoded_data>'."     ),   agentType: z     .enum(['MedGemma', 'RadiologyCopilot'])     .describe('The AI agent to use for image analysis (MedGemma or RadiologyCopilot).'), }); export type AnalyzeImagingFindingsInput = z.infer<typeof AnalyzeImagingFindingsInputSchema>; const AnalyzeImagingFindingsOutputSchema = z.object({   report: z.string().describe('A report summarizing the findings of the image analysis.'),   overlayImage: z     .string()     .describe(       'An image with AI-powered overlays highlighting regions of interest, as a data URI that must include a MIME type and use Base64 encoding. Expected format: \'data:<mimetype>;base64,<encoded_data>\'.' // keep the backslashes. Needed for valid JSON.     ),   confidenceScore: z.number().describe('The confidence score of the AI agent in its findings.'), }); export type AnalyzeImagingFindingsOutput = z.infer<typeof AnalyzeImagingFindingsOutputSchema>; export async function analyzeImagingFindings(input: AnalyzeImagingFindingsInput): Promise<AnalyzeImagingFindingsOutput> {   return analyzeImagingFindingsFlow(input); } const analyzeImagingFindingsPrompt = ai.definePrompt({   name: 'analyzeImagingFindingsPrompt',   input: {schema: AnalyzeImagingFindingsInputSchema},   output: {schema: AnalyzeImagingFindingsOutputSchema},   prompt: `You are an AI agent specializing in analyzing medical images. You will receive a medical image and your task is to identify potential abnormalities and highlight regions of interest. Based on the image, generate a report summarizing your findings, and create an image with AI-powered overlays highlighting the regions of interest. Include a confidence score indicating your certainty in the findings. Agent Type: {{{agentType}}} Image: {{media url=imageDataUri}} \nReport: \nOverlay Image: {{media url=overlayImage}} Confidence Score: {{{confidenceScore}}}`, // keep the backslashes. Needed for valid JSON. }); const analyzeImagingFindingsFlow = ai.defineFlow(   {     name: 'analyzeImagingFindingsFlow',     inputSchema: AnalyzeImagingFindingsInputSchema,     outputSchema: AnalyzeImagingFindingsOutputSchema,   },   async input => {     // IMPORTANT: ONLY the googleai/gemini-2.0-flash-preview-image-generation model is able to generate images. You MUST use exactly this model to generate images.     const {media} = await ai.generate({       model: 'googleai/gemini-2.0-flash-preview-image-generation',       prompt: [         {media: {url: input.imageDataUri}},         {           text:             `Analyze this image and highlight any regions of interest.  Summarize any findings in a short report.`,         },       ],       config: {responseModalities: ['TEXT', 'IMAGE']},     });     const promptResult = await analyzeImagingFindingsPrompt({       ...input,       overlayImage: media?.url ?? '',       report: 'This is a sample report', // Replace with actual report generation logic       confidenceScore: 0.85, // Replace with actual confidence score calculation     });     return {       ...promptResult.output,       overlayImage: media?.url ?? '', // Ensure the generated image is returned     };   } ); ================================================ FILE: src/ai/flows/augment-agent-observations.ts ================================================ 'use server'; /**  * @fileOverview A flow that leverages AI copilot agents to enhance preliminary observations or create reports and findings summaries.  *  * - augmentAgentObservations - A function that handles the augmentation of agent observations.  * - AugmentAgentObservationsInput - The input type for the augmentAgentObservations function.  * - AugmentAgentObservationsOutput - The return type for the augmentAgentObservations function.  */ import {ai} from '@/ai/genkit'; import {z} from 'genkit'; const AugmentAgentObservationsInputSchema = z.object({   agentType: z     .string()     .describe(       'The type of AI copilot agent to use (e.g., Radiology, Pathology, Oncology).'     ),   preliminaryObservations: z     .string()     .describe('The preliminary observations made by the doctor.'),   patientContext: z.string().describe('Relevant patient context information.'), }); export type AugmentAgentObservationsInput = z.infer<   typeof AugmentAgentObservationsInputSchema >; const AugmentAgentObservationsOutputSchema = z.object({   enhancedObservations: z     .string()     .describe('The AI-enhanced observations and findings summary.'), }); export type AugmentAgentObservationsOutput = z.infer<   typeof AugmentAgentObservationsOutputSchema >; export async function augmentAgentObservations(   input: AugmentAgentObservationsInput ): Promise<AugmentAgentObservationsOutput> {   return augmentAgentObservationsFlow(input); } const prompt = ai.definePrompt({   name: 'augmentAgentObservationsPrompt',   input: {schema: AugmentAgentObservationsInputSchema},   output: {schema: AugmentAgentObservationsOutputSchema},   prompt: `You are an AI copilot agent specializing in {{{agentType}}}.   Based on the preliminary observations and patient context provided, enhance the observations and generate a comprehensive findings summary.   Preliminary Observations: {{{preliminaryObservations}}}   Patient Context: {{{patientContext}}}   Enhanced Observations and Findings Summary:`, }); const augmentAgentObservationsFlow = ai.defineFlow(   {     name: 'augmentAgentObservationsFlow',     inputSchema: AugmentAgentObservationsInputSchema,     outputSchema: AugmentAgentObservationsOutputSchema,   },   async input => {     const {output} = await prompt(input);     return output!;   } ); ================================================ FILE: src/ai/flows/contradiction-alert.ts ================================================ // contradiction-alert.ts 'use server'; /**  * @fileOverview This file defines a Genkit flow for identifying contradictions between prescribed therapies and recent literature.  *  * - contradictionAlert - A function that takes patient information and prescribed therapies and returns any contradictions found in recent literature.  * - ContradictionAlertInput - The input type for the contradictionAlert function.  * - ContradictionAlertOutput - The return type for the contradictionAlert function.  */ import {ai} from '@/ai/genkit'; import {z} from 'genkit'; const ContradictionAlertInputSchema = z.object({   patientSummary: z     .string()     .describe('A summary of the patient health record, including current conditions, medications, and history.'),   prescribedTherapies: z     .string()     .describe('A list of the therapies currently prescribed to the patient.'), }); export type ContradictionAlertInput = z.infer<typeof ContradictionAlertInputSchema>; const ContradictionAlertOutputSchema = z.object({   contradictions: z     .array(z.string())     .describe('A list of potential contradictions found between the prescribed therapies and recent medical literature.'), }); export type ContradictionAlertOutput = z.infer<typeof ContradictionAlertOutputSchema>; export async function contradictionAlert(input: ContradictionAlertInput): Promise<ContradictionAlertOutput> {   return contradictionAlertFlow(input); } const prompt = ai.definePrompt({   name: 'contradictionAlertPrompt',   input: {schema: ContradictionAlertInputSchema},   output: {schema: ContradictionAlertOutputSchema},   prompt: `You are a medical expert responsible for identifying potential contradictions between a patient's prescribed therapies and the latest medical literature.   Patient Summary: {{{patientSummary}}}   Prescribed Therapies: {{{prescribedTherapies}}}   Analyze the patient's current situation and prescribed therapies. Compare this information against recent medical findings to identify any contradictions.   If contradictions are found, list them clearly and concisely, providing a brief explanation of why each contradiction is relevant.   If no contradictions are found, return an empty list.   `, }); const contradictionAlertFlow = ai.defineFlow(   {     name: 'contradictionAlertFlow',     inputSchema: ContradictionAlertInputSchema,     outputSchema: ContradictionAlertOutputSchema,   },   async input => {     const {output} = await prompt(input);     return output!;   } ); ================================================ FILE: src/ai/flows/estimate-survival-risk.ts ================================================ 'use server'; /**  * @fileOverview An AI agent that estimates the 5-year survival risk of a patient.  *  * - estimateSurvivalRisk - A function that estimates the 5-year survival risk.  * - EstimateSurvivalRiskInput - The input type for the estimateSurvivalRisk function.  * - EstimateSurvivalRiskOutput - The return type for the estimateSurvivalRisk function.  */ import {ai} from '@/ai/genkit'; import {z} from 'genkit'; const EstimateSurvivalRiskInputSchema = z.object({   patientData: z.record(z.any()).describe('Patient data including demographics, lab results, and genomic information.'),   disease: z.string().describe('The disease for which to estimate survival risk.'), }); export type EstimateSurvivalRiskInput = z.infer<typeof EstimateSurvivalRiskInputSchema>; const EstimateSurvivalRiskOutputSchema = z.object({   fiveYearSurvivalRisk: z.number().describe('The estimated 5-year survival risk as a percentage (0-100).'),   rationale: z.string().describe('The rationale for the survival risk estimate, including key factors.'), }); export type EstimateSurvivalRiskOutput = z.infer<typeof EstimateSurvivalRiskOutputSchema>; export async function estimateSurvivalRisk(input: EstimateSurvivalRiskInput): Promise<EstimateSurvivalRiskOutput> {   return estimateSurvivalRiskFlow(input); } const prompt = ai.definePrompt({   name: 'estimateSurvivalRiskPrompt',   input: {schema: EstimateSurvivalRiskInputSchema},   output: {schema: EstimateSurvivalRiskOutputSchema},   prompt: `You are an expert medical AI specializing in estimating 5-year survival risks for patients with various diseases.   Given the following patient data and the specified disease, estimate the patient's 5-year survival risk as a percentage.   Provide a rationale for your estimate, highlighting the key factors that influence the risk.   Patient Data:   {{JSONstringify patientData}}   Disease: {{disease}}   `, }); const estimateSurvivalRiskFlow = ai.defineFlow(   {     name: 'estimateSurvivalRiskFlow',     inputSchema: EstimateSurvivalRiskInputSchema,     outputSchema: EstimateSurvivalRiskOutputSchema,   },   async input => {     const {output} = await prompt(input);     return output!;   } ); ================================================ FILE: src/ai/flows/generate-preliminary-summary.ts ================================================ // src/ai/flows/generate-preliminary-summary.ts 'use server'; /**  * @fileOverview Generates a preliminary patient summary for doctors.  *  * - generatePreliminarySummary - A function that generates the preliminary patient summary.  * - GeneratePreliminarySummaryInput - The input type for the generatePreliminarySummary function.  * - GeneratePreliminarySummaryOutput - The return type for the generatePreliminarySummary function.  */ import {ai} from '@/ai/genkit'; import {z} from 'genkit'; const GeneratePreliminarySummaryInputSchema = z.object({   patientHistory: z     .string()     .describe('The patient\'s medical history.'),   chiefComplaint: z.string().describe('The patient\'s chief complaint.'), }); export type GeneratePreliminarySummaryInput = z.infer<   typeof GeneratePreliminarySummaryInputSchema >; const GeneratePreliminarySummaryOutputSchema = z.object({   summary: z.string().describe('A concise summary of the patient information.'),   source: z.string().describe('The source of the information used to generate the summary.'),   qaRounds: z.number().describe('The number of quality assurance rounds performed.'),   confidence: z.number().describe('The confidence level of the generated summary (0-100).'), }); export type GeneratePreliminarySummaryOutput = z.infer<   typeof GeneratePreliminarySummaryOutputSchema >; export async function generatePreliminarySummary(   input: GeneratePreliminarySummaryInput ): Promise<GeneratePreliminarySummaryOutput> {   return generatePreliminarySummaryFlow(input); } const prompt = ai.definePrompt({   name: 'generatePreliminarySummaryPrompt',   input: {schema: GeneratePreliminarySummaryInputSchema},   output: {schema: GeneratePreliminarySummaryOutputSchema},   prompt: `You are an AI assistant that generates preliminary summaries for doctors.   Based on the patient's medical history and chief complaint, create a concise summary that will help the doctor quickly understand the patient's background and presenting problem.   Patient History: {{{patientHistory}}}   Chief Complaint: {{{chiefComplaint}}}   Make sure to include the source of the information, the number of quality assurance rounds performed, and the confidence level of the generated summary.   The confidence level should be a number between 0 and 100.   `, }); const generatePreliminarySummaryFlow = ai.defineFlow(   {     name: 'generatePreliminarySummaryFlow',     inputSchema: GeneratePreliminarySummaryInputSchema,     outputSchema: GeneratePreliminarySummaryOutputSchema,   },   async input => {     const {output} = await prompt(input);     return output!;   } ); ================================================ FILE: src/app/actions.ts ================================================ "use server"; import { augmentAgentObservations, type AugmentAgentObservationsInput, type AugmentAgentObservationsOutput } from "@/ai/flows/augment-agent-observations"; import { contradictionAlert, type ContradictionAlertInput, type ContradictionAlertOutput } from "@/ai/flows/contradiction-alert"; import { generatePreliminarySummary, type GeneratePreliminarySummaryInput } from "@/ai/flows/generate-preliminary-summary"; import { analyzeImagingFindings, type AnalyzeImagingFindingsInput, type AnalyzeImagingFindingsOutput } from "@/ai/flows/analyze-imaging-findings"; import { estimateSurvivalRisk, type EstimateSurvivalRiskInput, type EstimateSurvivalRiskOutput } from "@/ai/flows/estimate-survival-risk"; // This is a simplified mock return as the AI flow is complex. // In a real scenario, this would call the actual flow. export async function generateSummaryAction(input: GeneratePreliminarySummaryInput) {   const patientHistory = "Patient has a history of Type 2 Diabetes and Hypertension. Previous MI in 2020.";   const chiefComplaint = "Patient presents with chest pain and shortness of breath for the last 3 hours.";      const result = await generatePreliminarySummary({ patientHistory, chiefComplaint });   return {       ...result,       summary: `Chief Complaint: Patient reports acute chest pain and dyspnea.\n\nHistory: The patient is a 68-year-old male with a significant past medical history of hypertension and type 2 diabetes, managed with Metformin. He suffered a myocardial infarction in 2020.`   }; } export async function analyzeImageAction(input: AnalyzeImagingFindingsInput): Promise<AnalyzeImagingFindingsOutput> {   const result = await analyzeImagingFindings(input);   return result; } export async function estimateRiskAction(): Promise<EstimateSurvivalRiskOutput> {   // In a real app, patientData would be fetched from an EHR   const mockPatientData = {     age: 65,     biomarkers: { "KRAS": "G12C", "TP53": "mutated" },     stage: "IIIB"   };   const result = await estimateSurvivalRisk({ patientData: mockPatientData, disease: "Non-small cell lung cancer" });   return result; } export async function augmentObservationsAction(input: AugmentAgentObservationsInput): Promise<AugmentAgentObservationsOutput> {   const result = await augmentAgentObservations(input);   return result; } export async function checkContradictionsAction(input: ContradictionAlertInput): Promise<ContradictionAlertOutput> {   const result = await contradictionAlert(input);   return result; } ================================================ FILE: src/app/globals.css ================================================ @tailwind base; @tailwind components; @tailwind utilities; @layer base {   :root {     --background: 220 20% 97%;     --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: 231 77% 60%;     --primary-foreground: 0 0% 100%;     --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: 262 83% 58%;     --accent-foreground: 0 0% 100%;     --destructive: 0 84.2% 60.2%;     --destructive-foreground: 0 0% 98%;     --border: 214.3 31.8% 91.4%;     --input: 214.3 31.8% 91.4%;     --ring: 231 77% 60%;     --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: 231 77% 68%;     --primary-foreground: 0 0% 100%;     --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: 262 83% 68%;     --accent-foreground: 222.2 47.4% 11.2%;     --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: 231 77% 68%;   } } @layer base {   * {     @apply border-border;   }   body {     @apply bg-background text-foreground;   } } @layer components {     .hero-gradient {         background: linear-gradient(135deg, hsl(var(--primary)) 0%, #10B981 100%);     } } ================================================ FILE: src/app/layout.tsx ================================================ import type {Metadata} from 'next'; import './globals.css'; import { Toaster } from "@/components/ui/toaster"; export const metadata: Metadata = {   title: 'ACLIS DoctorView',   description: 'Adaptive Clinical Intelligent System', }; export default function RootLayout({   children, }: Readonly<{   children: React.ReactNode; }>) {   return (     <html lang="en" suppressHydrationWarning>       <head>         <link rel="preconnect" href="https://fonts.googleapis.com" />         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />       </head>       <body className="font-body antialiased">         {children}         <Toaster />       </body>     </html>   ); } ================================================ FILE: src/app/page.tsx ================================================ import Link from 'next/link'; import { Stethoscope, User, Shield, Activity, BrainCircuit } from 'lucide-react'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; export default function Home() {   return (     <div className="min-h-screen bg-background font-sans text-foreground">       <header className="hero-gradient text-white">         <div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 text-center">           <div className="flex justify-center mb-6">             <div className="bg-white bg-opacity-20 p-6 rounded-2xl shadow-lg">               <BrainCircuit className="h-12 w-12" />             </div>           </div>           <h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">             Adaptive Clinical Intelligent System           </h1>           <p className="mt-6 max-w-2xl mx-auto text-xl">             The future of personalized, context-aware clinical decision-making.           </p>         </div>       </header>       <main id="platforms" className="py-12">         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">           <div className="lg:text-center">             <h2 className="text-base text-primary font-semibold tracking-wide uppercase">Platform Access</h2>             <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl">               Experience ACLIS Across Roles             </p>             <p className="mt-4 max-w-2xl text-xl text-muted-foreground lg:mx-auto">               One system, multiple interfaces tailored to each user's needs.             </p>           </div>           <div className="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">             <Link href="/physician-dashboard">               <Card className="text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer h-full flex flex-col">                 <CardHeader>                   <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-2xl bg-primary/10 mb-4">                     <Stethoscope className="h-10 w-10 text-primary" />                   </div>                   <CardTitle>Physician View</CardTitle>                 </CardHeader>                 <CardContent className="flex-grow">                   <p className="text-sm text-muted-foreground">                     Unified patient summary with integrated EHR, imaging, genomics, and AI copilots.                   </p>                 </CardContent>               </Card>             </Link>             <Link href="/nursing-dashboard">               <Card className="text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer h-full flex flex-col">                 <CardHeader>                   <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-2xl bg-green-500/10 mb-4">                     <Activity className="h-10 w-10 text-green-500" />                   </div>                   <CardTitle>Nursing View</CardTitle>                 </CardHeader>                 <CardContent className="flex-grow">                   <p className="text-sm text-muted-foreground">                     Patient assignments, vital monitoring, medication administration, and workflow automation.                   </p>                 </CardContent>               </Card>             </Link>             <Link href="/patient-dashboard">                <Card className="text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer h-full flex flex-col">                 <CardHeader>                    <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-2xl bg-accent/10 mb-4">                     <User className="h-10 w-10 text-accent" />                   </div>                   <CardTitle>Patient View</CardTitle>                 </CardHeader>                 <CardContent className="flex-grow">                   <p className="text-sm text-muted-foreground">                     Health dashboard, test results, medication tracking, and conversational health assistant.                   </p>                 </CardContent>               </Card>             </Link>             <Link href="/admin-dashboard">               <Card className="text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer h-full flex flex-col">                 <CardHeader>                    <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-2xl bg-muted-foreground/10 mb-4">                     <Shield className="h-10 w-10 text-muted-foreground" />                   </div>                   <CardTitle>Admin View</CardTitle>                 </CardHeader>                 <CardContent className="flex-grow">                   <p className="text-sm text-muted-foreground">                     System health monitoring, device management, protocol configuration, and model training.                   </p>                 </CardContent>               </Card>             </Link>           </div>         </div>       </main>     </div>   ); } ================================================ FILE: src/app/admin-dashboard/page.tsx ================================================ import { AdminDashboard } from '@/components/aclis/admin-dashboard'; export default function AdminDashboardPage() {   return <AdminDashboard />; } ================================================ FILE: src/app/nursing-dashboard/page.tsx ================================================ import { NursingDashboard } from '@/components/aclis/nursing-dashboard'; export default function NursingDashboardPage() {   return <NursingDashboard />; } ================================================ FILE: src/app/patient-dashboard/page.tsx ================================================ import { PatientDashboard } from '@/components/aclis/patient-dashboard'; export default function PatientDashboardPage() {   return <PatientDashboard />; } ================================================ FILE: src/app/physician/patient/[id]/page.tsx ================================================ import { PatientContextBar } from '@/components/aclis/patient-context-bar'; import { MainWorkspace } from '@/components/aclis/main-workspace'; import { ActionBar } from '@/components/aclis/action-bar'; export default function PatientDetailPage({ params }: { params: { id: string } }) {   // In a real app, you'd use params.id to fetch patient data   return (     <div className="flex flex-col h-screen bg-background text-foreground font-body">       <PatientContextBar patientId={params.id} />       <main className="flex-1 overflow-y-auto p-4 md:p-6 lg:p-8">         <MainWorkspace />       </main>       <ActionBar />     </div>   ); } ================================================ FILE: src/app/physician-dashboard/page.tsx ================================================ import { PhysicianDashboard } from '@/components/aclis/physician-dashboard'; export default function PhysicianDashboardPage() {     return <PhysicianDashboard />; } ================================================ FILE: src/components/aclis/aclis-assistant-card.tsx ================================================ "use client"; import { useState } from 'react'; import { Mic, Paperclip, Send } from 'lucide-react'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { ScrollArea } from '@/components/ui/scroll-area'; export function AclisAssistantCard() {   const [messages, setMessages] = useState([     { from: 'system', text: "Hello John! I'm your ACLIS Health Assistant. How can I help you today?", suggestions: ["Medication Questions", "Test Results", "Call for Help"] },     { from: 'patient', text: "Can you explain my chest X-ray results?" },     { from: 'system', text: "Of course, John. Your chest X-ray from today shows a small nodule in your right upper lung. The radiologist noted it's about 8mm in size. This finding is being monitored closely.", suggestions: ["Show the image", "Explain treatment", "Schedule follow-up"] }   ]);      return (     <Card className="flex flex-col">       <CardHeader className="bg-primary text-primary-foreground">         <CardTitle>ACLIS Health Assistant</CardTitle>         <CardDescription className="text-primary-foreground/80">Always available to help with your health questions</CardDescription>       </CardHeader>       <CardContent className="flex-1 flex flex-col p-0">         <ScrollArea className="flex-1 p-4 h-96">           <div className="space-y-4">             {messages.map((msg, index) => (               <div key={index} className={`flex flex-col gap-2 ${msg.from === 'patient' ? 'items-end' : 'items-start'}`}>                 <div className={`max-w-[80%] p-3 rounded-2xl text-sm ${msg.from === 'patient' ? 'bg-primary text-primary-foreground rounded-br-none' : 'bg-muted rounded-bl-none'}`}>                   {msg.text}                 </div>                 {msg.suggestions && (                   <div className="flex flex-wrap gap-2">                     {msg.suggestions.map(s => <Button key={s} size="sm" variant="outline">{s}</Button>)}                   </div>                 )}               </div>             ))}           </div>         </ScrollArea>         <div className="p-4 border-t">           <div className="flex items-center space-x-2">             <Button variant="ghost" size="icon"><Paperclip /></Button>             <Input placeholder="Type your message..." />             <Button><Send /></Button>             <Button variant="ghost" size="icon"><Mic /></Button>           </div>         </div>       </CardContent>     </Card>   ); } ================================================ FILE: src/components/aclis/action-bar.tsx ================================================ import { FlaskConical, FileText, Bot, UserPlus, Send } from 'lucide-react'; import { Button } from '@/components/ui/button'; export function ActionBar() {   return (     <footer className="flex-shrink-0 bg-card border-t p-2 md:px-6 flex items-center justify-between shadow-sm z-10">         <div className="flex items-center gap-2">             <Button variant="outline">                 <FlaskConical />                 Order Labs             </Button>             <Button variant="outline">                 <FileText />                 Add Note             </Button>              <Button variant="outline">                 <Bot />                 Run Model             </Button>              <Button variant="outline">                 <UserPlus />                 Consult Specialist             </Button>         </div>          <div className="flex items-center gap-2">             <p className="text-sm text-muted-foreground hidden lg:block">Context: Imaging</p>             <Button>                 <Send />                 Request Radiologist Review             </Button>         </div>     </footer>   ); } ================================================ FILE: src/components/aclis/active-agents-card.tsx ================================================ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Bot, Globe, AlignEndVertical, ShieldCheck, BookCheck, Plus } from "lucide-react"; const agents = [     { icon: Globe, name: 'Disease Surveillance', description: 'Global risk monitoring', status: 'Active', variant: 'success' },     { icon: AlignEndVertical, name: 'Dashboard Aligner', description: 'UI customization', status: 'Active', variant: 'success' },     { icon: ShieldCheck, name: 'Security Monitor', description: 'HIPAA compliance', status: 'Active', variant: 'success' },     { icon: BookCheck, name: 'Protocol Builder', description: 'DCP generator', status: 'Updating', variant: 'warning' }, ]; export function ActiveAgentsCard() {     return (         <Card>             <CardHeader>                 <CardTitle>Active AI Agents</CardTitle>                 <CardDescription>12 currently running</CardDescription>             </CardHeader>             <CardContent className="space-y-3">                 {agents.map(agent => (                     <div key={agent.name} className="flex items-center justify-between p-2 bg-muted/50 rounded-md">                         <div className="flex items-center space-x-3">                             <div className="p-2 bg-primary/10 rounded-full">                                 <agent.icon className="h-5 w-5 text-primary" />                             </div>                             <div>                                 <div className="text-sm font-medium">{agent.name}</div>                                 <div className="text-xs text-muted-foreground">{agent.description}</div>                             </div>                         </div>                         <Badge variant={agent.variant as any}>{agent.status}</Badge>                     </div>                 ))}                 <Button variant="outline" className="w-full !mt-4"><Plus /> Deploy New Agent</Button>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/admin-dashboard.tsx ================================================ import { Search, Bell, ChevronDown, Server, Cpu, Bot, Waypoints, BrainCircuit, BookCheck, ShieldCheck, Globe, FlaskConical, FileLock2 } from 'lucide-react'; import Image from 'next/image'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { SystemHealthCard } from './system-health-card'; import { GpuResourcesCard } from './gpu-resources-card'; import { ActiveAgentsCard } from './active-agents-card'; import { MedicalDevicesCard } from './medical-devices-card'; import { FoundationModelsCard } from './foundation-models-card'; import { CopilotConfigCard } from './copilot-config-card'; import { DoctorProtocolBuilderCard } from './doctor-protocol-builder-card'; import { DiseaseProtocolCard } from './disease-protocol-card'; import { GlobalSurveillanceCard } from './global-surveillance-card'; import { ModelTrainingCard } from './model-training-card'; import { DataPrivacyCard } from './data-privacy-card'; export function AdminDashboard() {   return (     <div className="min-h-screen bg-muted/30 font-sans">       <header className="bg-card shadow-sm sticky top-0 z-20">         <div className="flex items-center justify-between p-4 border-b">           <div className="flex items-center space-x-4">             <h1 className="text-xl font-bold text-primary">ACLIS</h1>             <div className="text-sm text-muted-foreground">Admin Control Center</div>           </div>           <div className="flex items-center space-x-4">             <div className="relative">               <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />               <Input type="text" placeholder="Search devices, protocols..." className="pl-10 pr-4 py-2 text-sm w-64" />             </div>             <Button variant="ghost" size="icon" className="relative">                 <Bell className="h-5 w-5" />                 <span className="absolute top-1 right-1 h-2 w-2 rounded-full bg-red-500"></span>             </Button>             <div className="flex items-center space-x-2">               <Image src="https://randomuser.me/api/portraits/men/75.jpg" data-ai-hint="man person" alt="Admin User" width={32} height={32} className="rounded-full" />               <div>                 <div className="text-sm font-medium">Admin User</div>                 <div className="text-xs text-muted-foreground">System Administrator</div>               </div>               <ChevronDown className="h-4 w-4 text-muted-foreground" />             </div>           </div>         </div>       </header>              <main className="grid grid-cols-1 lg:grid-cols-4 gap-4 p-4">         <div className="space-y-4 lg:col-span-1">           <SystemHealthCard />           <GpuResourcesCard />           <ActiveAgentsCard />         </div>         <div className="space-y-4 lg:col-span-1">           <MedicalDevicesCard />           <FoundationModelsCard />           <CopilotConfigCard />         </div>          <div className="space-y-4 lg:col-span-1">             <DoctorProtocolBuilderCard />             <DiseaseProtocolCard />         </div>         <div className="space-y-4 lg:col-span-1">             <GlobalSurveillanceCard />             <ModelTrainingCard />             <DataPrivacyCard />         </div>       </main>     </div>   ); } ================================================ FILE: src/components/aclis/advertisements-card.tsx ================================================ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import Image from "next/image"; export function AdvertisementsCard() {   return (     <Card>       <CardHeader>         <CardTitle>Suggested Medical Devices & Diagnostics</CardTitle>         <CardDescription>Latest medical devices and diagnostics.</CardDescription>       </CardHeader>       <CardContent className="space-y-4">         <div className="flex items-center gap-4 p-3 bg-muted/50 rounded-lg">           <Image src="https://placehold.co/80x80.png" data-ai-hint="medical device" alt="Medical Device" width={80} height={80} className="rounded-md" />           <div>             <h4 className="font-semibold">New! AccuCheck Pro</h4>             <p className="text-sm text-muted-foreground">Real-time glucose monitoring with AI-powered insulin suggestions. <a href="#" className="text-primary">Learn more</a>.</p>           </div>         </div>         <div className="flex items-center gap-4 p-3 bg-muted/50 rounded-lg">           <Image src="https://placehold.co/80x80.png" data-ai-hint="medical scanner" alt="Medical Scanner" width={80} height={80} className="rounded-md" />           <div>             <h4 className="font-semibold">Siemens Somatom X.cite</h4>             <p className="text-sm text-muted-foreground">High-resolution CT with up to 40% less radiation. <a href="#" className="text-primary">Request a demo</a>.</p>           </div>         </div>       </CardContent>     </Card>   ); } ================================================ FILE: src/components/aclis/appointments-card.tsx ================================================ import { Calendar, ScanLine } from 'lucide-react'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; const appointments = [   { icon: Calendar, title: "Follow-up Consultation", with: "With Dr. Johnson", time: "Tomorrow, July 19 at 10:30 AM" },   { icon: ScanLine, title: "CT Scan", with: "Radiology Department", time: "Friday, July 21 at 2:15 PM" }, ]; export function AppointmentsCard() {   return (     <Card>       <CardHeader>         <CardTitle>Upcoming Appointments</CardTitle>         <CardDescription>Next: Tomorrow at 10:30 AM</CardDescription>       </CardHeader>       <CardContent className="space-y-3">         {appointments.map(appt => (           <div key={appt.title} className="flex items-start space-x-3">             <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">               <appt.icon className="h-5 w-5 text-primary" />             </div>             <div>               <h3 className="font-medium">{appt.title}</h3>               <p className="text-sm text-muted-foreground">{appt.with}</p>               <p className="text-xs text-muted-foreground mt-1">{appt.time}</p>             </div>           </div>         ))}         <Button variant="outline" className="w-full">View All Appointments</Button>       </CardContent>     </Card>   ); } ================================================ FILE: src/components/aclis/care-team-card.tsx ================================================ import { Phone, Mail } from 'lucide-react'; import Image from 'next/image'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; const team = [   { name: 'Dr. Sarah Johnson', role: 'Oncologist', avatar: 'women/68.jpg' },   { name: 'Nurse Alex Chen', role: 'Primary Nurse', avatar: 'women/75.jpg' },   { name: 'Dr. Michael Brown', role: 'Pulmonologist', avatar: 'men/60.jpg' }, ]; export function CareTeamCard() {   return (     <Card>       <CardHeader>         <CardTitle>My Care Team</CardTitle>         <CardDescription>Primary contacts for your care</CardDescription>       </CardHeader>       <CardContent className="space-y-4">         {team.map(member => (           <div key={member.name} className="flex items-center space-x-3">             <Image               src={`https://randomuser.me/api/portraits/${member.avatar}`}               data-ai-hint="person portrait"               alt={member.name}               width={48}               height={48}               className="rounded-full"             />             <div className="flex-1">               <h3 className="font-medium">{member.name}</h3>               <p className="text-sm text-muted-foreground">{member.role}</p>             </div>             <div className="flex space-x-1">               <Button variant="ghost" size="icon"><Phone /></Button>               <Button variant="ghost" size="icon"><Mail /></Button>             </div>           </div>         ))}         <Button variant="outline" className="w-full">View Full Care Team</Button>       </CardContent>     </Card>   ); } ================================================ FILE: src/components/aclis/connected-devices-card.tsx ================================================ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { HeartPulse, Wind, Syringe } from "lucide-react"; import { Button } from "../ui/button"; const devices = [     {         icon: HeartPulse,         name: "Philips IntelliVue MX750",         location: "Room 205 | Bed 1",         status: "Alert",         statusVariant: "destructive",         details: [             { label: "HR", value: 112, unit: "", color: "text-destructive" },             { label: "SpO₂", value: 89, unit: "%", color: "text-destructive" },             { label: "NIBP", value: "142/88", unit: "" },             { label: "Temp", value: 100.2, unit: "°F", color: "text-destructive" },         ]     },     {         icon: Syringe,         name: "Alaris IV Pump #457",         location: "Room 203 | Bed 1",         status: "Warning",         statusVariant: "warning",         details: [             { label: "Infusing", value: "Heparin", unit: "" },             { label: "Rate", value: 12, unit: " mL/hr" },             { label: "Volume", value: 78, unit: " mL left" },         ],         alert: "Occlusion detected. Last cleared 22 min ago."     },     {         icon: Wind,         name: "ResMed AirSense 10",         location: "Room 201 | Bed 1",         status: "Normal",         statusVariant: "success",         details: [             { label: "Mode", value: "CPAP", unit: "" },             { label: "Pressure", value: 8, unit: " cmH₂O" },             { label: "Usage", value: 4.2, unit: " hrs" },         ]     } ]; export function ConnectedDevicesCard() {     return (         <Card>             <CardHeader>                 <CardTitle>Connected Medical Devices (6)</CardTitle>                 <CardDescription>Real-time monitoring</CardDescription>             </CardHeader>             <CardContent className="p-0">                 <div className="divide-y">                     {devices.map((device, i) => (                         <div key={i} className="p-4 space-y-3">                             <div className="flex justify-between items-center">                                 <div className="flex items-center space-x-3">                                     <div className="bg-primary/10 p-2 rounded-full">                                         <device.icon className="h-5 w-5 text-primary" />                                     </div>                                     <div>                                         <h3 className="text-sm font-semibold">{device.name}</h3>                                         <p className="text-xs text-muted-foreground">{device.location}</p>                                     </div>                                 </div>                                 <Badge variant={device.statusVariant as any}>{device.status}</Badge>                             </div>                             <div className="grid grid-cols-4 gap-2 text-xs">                                 {device.details.map(d => (                                     <div key={d.label} className="text-center bg-muted/50 p-1 rounded">                                         <div className="font-medium text-muted-foreground">{d.label}</div>                                         <div className={`font-semibold ${d.color || ''}`}>{d.value}{d.unit}</div>                                     </div>                                 ))}                             </div>                             {device.alert && (                                 <div className="p-2 bg-yellow-500/10 border-l-4 border-yellow-500 text-yellow-700 text-xs rounded">                                     {device.alert}                                 </div>                             )}                         </div>                     ))}                 </div>                  <div className="p-4 border-t">                     <Button variant="outline" className="w-full">View All 6 Devices</Button>                  </div>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/contradiction-alert-card.tsx ================================================ "use client"; import { useState } from 'react'; import { AlertTriangle, Bot, CheckCircle, Search } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'; import { useToast } from '@/hooks/use-toast'; import { Skeleton } from '../ui/skeleton'; import { checkContradictionsAction } from '@/app/actions'; import { Textarea } from '../ui/textarea'; import { Label } from '../ui/label'; import type { ContradictionAlertOutput } from '@/ai/flows/contradiction-alert'; export function ContradictionAlertCard() {   const [result, setResult] = useState<ContradictionAlertOutput | null>(null);   const [isLoading, setIsLoading] = useState(false);   const [patientSummary, setPatientSummary] = useState("68-year-old male with hypertension, type 2 diabetes, and a history of MI. Currently presenting with chest pain.");   const [therapies, setTherapies] = useState("Prescribed new beta-blocker alongside existing calcium channel blocker.");   const { toast } = useToast();   const handleCheck = async () => {     setIsLoading(true);     setResult(null);     try {       const res = await checkContradictionsAction({         patientSummary,         prescribedTherapies: therapies,       });       setResult(res);     } catch (error) {       console.error("Failed to check contradictions:", error);       toast({         variant: "destructive",         title: "Error",         description: "Could not perform contradiction check.",       });     } finally {       setIsLoading(false);     }   };   return (     <Card>       <CardHeader>         <CardTitle>Contradiction Agent</CardTitle>         <CardDescription>Scans global literature against prescribed therapies for potential conflicts.</CardDescription>       </CardHeader>       <CardContent className="space-y-4">         <div className="grid w-full gap-1.5">           <Label htmlFor="patient-summary">Patient Summary</Label>           <Textarea id="patient-summary" value={patientSummary} onChange={(e) => setPatientSummary(e.target.value)} rows={4} />         </div>         <div className="grid w-full gap-1.5">           <Label htmlFor="therapies">Prescribed Therapies</Label>           <Textarea id="therapies" value={therapies} onChange={(e) => setTherapies(e.target.value)} rows={2} />         </div>         <Button onClick={handleCheck} disabled={isLoading} className="w-full">           <Search className={`mr-2 h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />           Check for Contradictions         </Button>         <div className="pt-4">           <h3 className="font-semibold mb-2">Results</h3>           <div className="border rounded-lg p-4 min-h-[150px] bg-muted/30">             {isLoading ? (               <div className="space-y-2">                 <Skeleton className="h-4 w-full" />                 <Skeleton className="h-4 w-5/6" />               </div>             ) : result ? (               result.contradictions.length > 0 ? (                 <ul className="space-y-2">                   {result.contradictions.map((c, i) => (                     <li key={i} className="flex items-start gap-2 text-sm text-destructive">                       <AlertTriangle className="h-4 w-4 mt-0.5 flex-shrink-0" />                       <span>{c}</span>                     </li>                   ))}                 </ul>               ) : (                 <div className="text-center text-muted-foreground py-8">                     <CheckCircle className="mx-auto h-10 w-10 text-green-500" />                     <p className="mt-2">No contradictions found.</p>                 </div>               )             ) : (                 <div className="text-center text-muted-foreground py-8">                     <Bot className="mx-auto h-10 w-10" />                     <p className="mt-2">Results will appear here.</p>                 </div>             )}           </div>         </div>       </CardContent>     </Card>   ); } ================================================ FILE: src/components/aclis/copilot-agent-panel.tsx ================================================ "use client"; import { useState } from 'react'; import { Bot, Wand2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { useToast } from '@/hooks/use-toast'; import { Skeleton } from '../ui/skeleton'; import { augmentObservationsAction } from '@/app/actions'; import { Textarea } from '../ui/textarea'; import { Label } from '../ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'; import type { AugmentAgentObservationsOutput } from '@/ai/flows/augment-agent-observations'; export function CopilotAgentPanel() {   const [result, setResult] = useState<AugmentAgentObservationsOutput | null>(null);   const [isLoading, setIsLoading] = useState(false);   const [agentType, setAgentType] = useState('Radiology');   const [observations, setObservations] = useState("Small, irregular opacity noted in the upper left lung lobe on the chest X-ray.");   const [context, setContext] = useState("Patient is a 68-year-old long-term smoker with a persistent cough.");   const { toast } = useToast();   const handleAugment = async () => {     setIsLoading(true);     setResult(null);     try {       const res = await augmentObservationsAction({         agentType: agentType,         preliminaryObservations: observations,         patientContext: context,       });       setResult(res);     } catch (error) {       console.error("Failed to augment observations:", error);       toast({         variant: "destructive",         title: "Error",         description: "Could not get augmentation from agent.",       });     } finally {       setIsLoading(false);     }   };   return (     <Card>       <CardHeader>         <CardTitle>AI Copilot Agents</CardTitle>         <CardDescription>Enhance observations or create summaries with specialized agents.</CardDescription>       </CardHeader>       <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-6">         <div className="space-y-4">           <div className="grid w-full gap-1.5">             <Label htmlFor="agent-type">Select Agent</Label>             <Select value={agentType} onValueChange={setAgentType}>               <SelectTrigger id="agent-type">                 <SelectValue placeholder="Select an agent" />               </SelectTrigger>               <SelectContent>                 <SelectItem value="Radiology">Radiology Copilot</SelectItem>                 <SelectItem value="Pathology">Pathology Copilot</SelectItem>                 <SelectItem value="Oncology">Oncology Copilot</SelectItem>               </SelectContent>             </Select>           </div>           <div className="grid w-full gap-1.5">             <Label htmlFor="observations">Preliminary Observations</Label>             <Textarea id="observations" value={observations} onChange={(e) => setObservations(e.target.value)} rows={5} />           </div>           <div className="grid w-full gap-1.5">             <Label htmlFor="context">Patient Context</Label>             <Textarea id="context" value={context} onChange={(e) => setContext(e.target.value)} rows={3} />           </div>           <Button onClick={handleAugment} disabled={isLoading} className="w-full">             <Wand2 className={`mr-2 h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />             Augment with AI           </Button>         </div>         <div>           <Label>Enhanced Findings Summary</Label>           <div className="border rounded-lg p-4 mt-1.5 min-h-[300px] bg-muted/30">             {isLoading ? (               <div className="space-y-2">                 <Skeleton className="h-4 w-full" />                 <Skeleton className="h-4 w-full" />                 <Skeleton className="h-4 w-5/6" />                 <Skeleton className="h-4 w-full mt-4" />                 <Skeleton className="h-4 w-3/4" />               </div>             ) : result ? (               <p className="text-sm whitespace-pre-wrap">{result.enhancedObservations}</p>             ) : (                 <div className="text-center text-muted-foreground pt-20">                     <Bot className="mx-auto h-12 w-12" />                     <p className="mt-2">Augmented report will appear here.</p>                 </div>             )}           </div>         </div>       </CardContent>     </Card>   ); } ================================================ FILE: src/components/aclis/copilot-config-card.tsx ================================================ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Settings, History } from "lucide-react"; const protocols = [     'Daily UI Update Protocol',     'New Device Integration',     'Global Disease Surveillance' ]; const updates = [     { title: 'Added Qure.ai qXR to Radiology dashboards', time: 'Completed: Today, 09:15 AM' },     { title: "Updated Oncology protocols for Dr. Johnson", time: 'Completed: Yesterday, 4:30 PM' }, ]; export function CopilotConfigCard() {     return (         <Card>             <CardHeader>                 <CardTitle>AI Copilot Configuration</CardTitle>                 <CardDescription>Dashboard aligner and protocol assistant</CardDescription>             </CardHeader>             <CardContent className="space-y-4">                 <div>                     <h3 className="font-semibold text-sm mb-2">Active Protocols</h3>                     <div className="space-y-2">                         {protocols.map(p => (                             <div key={p} className="flex items-center justify-between p-2 bg-muted/50 rounded-md">                                 <div className="text-sm">{p}</div>                                 <Badge variant="success">Running</Badge>                             </div>                         ))}                     </div>                 </div>                  <div>                     <h3 className="font-semibold text-sm mb-2">Recent UI Updates</h3>                     <div className="space-y-2">                         {updates.map(u => (                             <div key={u.title} className="p-3 bg-primary/10 rounded-md">                                 <p className="text-sm text-primary/90">{u.title}</p>                                 <p className="text-xs text-muted-foreground mt-1">{u.time}</p>                             </div>                         ))}                     </div>                 </div>                 <div className="grid grid-cols-2 gap-2 pt-2">                     <Button><Settings /> Configure</Button>                     <Button variant="outline"><History /> Logs</Button>                 </div>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/data-privacy-card.tsx ================================================ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { FileLock2, Lock } from "lucide-react"; const accessLogs = [     { user: 'Dr. Johnson', patient: 'John Doe', time: 'Today, 10:15 AM' },     { user: 'Nurse Chen', patient: 'Jane Smith', time: 'Today, 09:30 AM' },     { user: 'Admin', patient: 'dept. report export', time: 'Yesterday, 4:45 PM' }, ]; export function DataPrivacyCard() {     return (         <Card>             <CardHeader>                 <CardTitle>Data & Privacy Management</CardTitle>                 <CardDescription>Patient data oversight and compliance</CardDescription>             </CardHeader>             <CardContent className="space-y-4">                  <div className="grid grid-cols-2 gap-4">                     <div className="bg-primary/10 p-3 rounded-lg text-center">                         <div className="text-xs text-primary/80">Active Patient Records</div>                         <div className="text-2xl font-bold text-primary">24,892</div>                     </div>                     <div className="bg-green-500/10 p-3 rounded-lg text-center">                         <div className="text-xs text-green-700">HIPAA Compliant</div>                         <div className="text-2xl font-bold text-green-600">100%</div>                     </div>                 </div>                 <div>                     <h3 className="font-semibold text-sm mb-2">Recent Data Access</h3>                     <div className="space-y-1 text-xs text-muted-foreground">                         {accessLogs.map(log => (                             <div key={log.time} className="flex justify-between items-center p-1.5 bg-muted/50 rounded">                                 <span><span className="font-medium">{log.user}</span> accessed {log.patient}</span>                                 <span>{log.time}</span>                             </div>                         ))}                     </div>                 </div>                  <div className="grid grid-cols-2 gap-2 pt-2">                     <Button><FileLock2 /> Audit Logs</Button>                     <Button variant="outline"><Lock /> Permissions</Button>                 </div>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/disease-protocol-card.tsx ================================================ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Badge } from "@/components/ui/badge"; import { Textarea } from "@/components/ui/textarea"; import { Plus } from "lucide-react"; const elements = [     { title: 'EGFR Mutation Testing', detail: 'All newly diagnosed NSCLC patients should undergo EGFR mutation testing before first-line treatment decisions.' },     { title: 'Immunotherapy Consideration', detail: 'PD-L1 testing required for patients being considered for first-line pembrolizumab monotherapy (TPS ≥50%).' },     { title: 'Brain MRI Baseline', detail: 'Recommended for all Stage IIIB-IV patients even without neurological symptoms due to high CNS metastasis risk.' }, ]; export function DiseaseProtocolCard() {     return (         <Card>             <CardHeader>                 <CardTitle>Disease Context Protocols</CardTitle>                 <CardDescription>Specialized protocols by condition</CardDescription>             </CardHeader>             <CardContent className="space-y-4">                 <div className="flex items-center gap-2">                     <Select defaultValue="nsclc">                         <SelectTrigger>                             <SelectValue placeholder="Select Disease" />                         </SelectTrigger>                         <SelectContent>                             <SelectItem value="nsclc">Non-Small Cell Lung Cancer</SelectItem>                             <SelectItem value="diabetes">Type 2 Diabetes</SelectItem>                         </SelectContent>                     </Select>                     <Button>Load</Button>                 </div>                  <div className="border rounded-lg p-3 space-y-3">                     <div className="flex justify-between items-center">                         <h3 className="text-sm font-semibold">NSCLC Protocol</h3>                         <Badge variant="secondary">Oncology</Badge>                     </div>                      <div className="space-y-2 max-h-40 overflow-y-auto pr-2">                         {elements.map(el => (                             <div key={el.title} className="p-2 bg-accent/10 rounded-md">                                 <p className="text-sm font-semibold text-accent-foreground/90">{el.title}</p>                                 <p className="text-xs text-muted-foreground mt-1">{el.detail}</p>                             </div>                         ))}                     </div>                      <div>                         <Textarea placeholder="Add new protocol element..." rows={3}/>                         <div className="flex justify-end mt-2">                              <Button size="sm">Save to Protocol</Button>                         </div>                     </div>                 </div>                 <Button variant="outline" className="w-full"><Plus /> Create New Disease Protocol</Button>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/doctor-protocol-builder-card.tsx ================================================ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Badge } from "@/components/ui/badge"; import { Textarea } from "@/components/ui/textarea"; import { Share, History } from "lucide-react"; const observations = [     { title: 'HbA1c Threshold Adjustment', detail: 'For South Asian patients, consider intervention at 6.5% rather than 7.0% due to higher CVD risk.' },     { title: 'EGFR Mutation Response', detail: 'Patients with EGFR L858R mutation show better response to Osimertinib when started early.' },     { title: 'Chemotherapy Tolerance', detail: 'Patients over 70 with BMI <22 require 15% dose reduction for standard regimens.' }, ]; export function DoctorProtocolBuilderCard() {     return (         <Card>             <CardHeader>                 <CardTitle>Doctor Context Protocol Builder</CardTitle>                 <CardDescription>Create and manage DCPs</CardDescription>             </CardHeader>             <CardContent className="space-y-4">                 <div className="flex items-center gap-2">                     <Select defaultValue="johnson">                         <SelectTrigger>                             <SelectValue placeholder="Select Doctor" />                         </SelectTrigger>                         <SelectContent>                             <SelectItem value="johnson">Dr. Sarah Johnson (Oncology)</SelectItem>                             <SelectItem value="brown">Dr. Michael Brown (Pulmonology)</SelectItem>                         </SelectContent>                     </Select>                     <Button>Load</Button>                 </div>                 <div className="border rounded-lg p-3 space-y-3">                     <div className="flex justify-between items-center">                         <h3 className="text-sm font-semibold">Dr. Sarah Johnson's Protocol</h3>                         <Badge variant="secondary">Oncology</Badge>                     </div>                      <div className="space-y-2 max-h-40 overflow-y-auto pr-2">                         {observations.map(obs => (                             <div key={obs.title} className="p-2 bg-primary/10 rounded-md">                                 <p className="text-sm font-semibold text-primary/90">{obs.title}</p>                                 <p className="text-xs text-muted-foreground mt-1">{obs.detail}</p>                             </div>                         ))}                     </div>                     <div>                         <Textarea placeholder="Add new observation..." rows={3}/>                         <div className="flex justify-end mt-2">                              <Button size="sm">Save to DCP</Button>                         </div>                     </div>                 </div>                 <div className="grid grid-cols-2 gap-2">                     <Button><Share /> Deploy to All</Button>                     <Button variant="outline"><History /> Version History</Button>                 </div>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/doctor-protocol-card.tsx ================================================ import { BookMarked, Rss, Save } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Textarea } from "../ui/textarea"; import { Separator } from "../ui/separator"; const researchFeed = [     {         title: "A Randomized Trial of Pembrolizumab plus Chemotherapy in Metastatic NSCLC",         source: "N Engl J Med, 2024",         match: "Matches patient's biomarker profile."     },     {         title: "New Guidelines for Hypertension Management in Patients with Diabetes",         source: "JAMA, 2024",         match: "Relevant to patient's comorbidities."     } ]; export function DoctorProtocolCard() {   return (     <Card>       <CardHeader>         <CardTitle>Doctor Protocol & Research</CardTitle>         <CardDescription>Personal protocols, device preferences, and curated research.</CardDescription>       </CardHeader>       <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-6">         <div className="space-y-4">             <h3 className="font-semibold flex items-center gap-2"><BookMarked className="h-5 w-5 text-primary" /> Personal Protocol Notes</h3>             <Textarea                  defaultValue="For patients in this demographic, I maintain a stricter HbA1c target of < 6.5%. Default to GE ultrasound for initial cardiac workup."                 rows={6}                 className="text-sm"             />             <Button>                 <Save className="mr-2 h-4 w-4"/>                 Save & Sync to DCP             </Button>         </div>         <div className="space-y-4">              <h3 className="font-semibold flex items-center gap-2"><Rss className="h-5 w-5 text-primary" /> Research Feed</h3>              <div className="space-y-3">                 {researchFeed.map((item, index) => (                     <div key={index} className="p-3 bg-muted/50 rounded-lg">                         <p className="font-medium text-sm">{item.title}</p>                         <p className="text-xs text-muted-foreground">{item.source}</p>                         <p className="text-xs text-accent-foreground/80 bg-accent/20 px-2 py-1 rounded-full mt-1 inline-block">{item.match}</p>                     </div>                 ))}              </div>         </div>       </CardContent>     </Card>   ); } ================================================ FILE: src/components/aclis/ehr-summary-card.tsx ================================================ "use client"; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { Badge } from "@/components/ui/badge"; import { ArrowUp, Minus } from "lucide-react"; import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"; import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"; import type { ChartConfig } from "@/components/ui/chart"; const vitals = [   { name: 'HR', value: '88 bpm', trend: 'up' },   { name: 'BP', value: '142/88 mmHg', trend: 'up' },   { name: 'Temp', value: '37.1°C', trend: 'stable' },   { name: 'SpO₂', value: '96%', trend: 'stable' }, ]; const labs = [   { name: 'HbA1c', value: '7.8%', status: 'high' },   { name: 'Creatinine', value: '1.2 mg/dL', status: 'high' },   { name: 'Potassium', value: '4.1 mEq/L', status: 'normal' },   { name: 'WBC', value: '9.5 x10³/μL', status: 'normal' }, ]; const meds = [     { name: 'Metformin', dosage: '1000mg BID', startDate: '2022-01-15' },     { name: 'Lisinopril', dosage: '20mg Daily', startDate: '2021-06-20' },     { name: 'Atorvastatin', dosage: '40mg Daily', startDate: '2020-03-10' }, ]; const chartData = [   { day: 'Mon', value: 80 },   { day: 'Tue', value: 82 },   { day: 'Wed', value: 85 },   { day: 'Thu', value: 84 },   { day: 'Fri', value: 88 }, ]; const chartConfig = {   value: {     label: "Value",     color: "hsl(var(--primary))",   }, } satisfies ChartConfig; const TrendIcon = ({ trend }: { trend: string }) => {     if (trend === 'up') return <ArrowUp className="h-4 w-4 text-destructive" />;     return <Minus className="h-4 w-4 text-muted-foreground" />; }; export function EhrSummaryCard() {   return (     <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">         <Card className="lg:col-span-1">             <CardHeader>                 <CardTitle>Vitals Snapshot</CardTitle>                 <CardDescription>Last 48 hours</CardDescription>             </CardHeader>             <CardContent>                 <div className="grid grid-cols-2 gap-4">                     {vitals.map(vital => (                         <div key={vital.name} className="bg-muted/50 p-3 rounded-lg">                             <div className="flex items-center justify-between">                                 <p className="text-sm text-muted-foreground">{vital.name}</p>                                 <TrendIcon trend={vital.trend} />                             </div>                              <p className="text-lg font-bold">{vital.value}</p>                              <div className="h-10 w-full">                                 <ChartContainer config={chartConfig} className="w-full h-full p-0 [&>div]:p-0">                                     <AreaChart                                     accessibilityLayer                                     data={chartData}                                     margin={{                                         left: 0,                                         right: 0,                                         top: 5,                                         bottom: 0,                                     }}                                     >                                     <defs>                                         <linearGradient id="fillValue" x1="0" y1="0" x2="0" y2="1">                                             <stop                                             offset="5%"                                             stopColor="var(--color-value)"                                             stopOpacity={0.8}                                             />                                             <stop                                             offset="95%"                                             stopColor="var(--color-value)"                                             stopOpacity={0.1}                                             />                                         </linearGradient>                                     </defs>                                     <Area                                         dataKey="value"                                         type="natural"                                         fill="url(#fillValue)"                                         stroke="var(--color-value)"                                         stackId="a"                                     />                                     </AreaChart>                                 </ChartContainer>                              </div>                         </div>                     ))}                 </div>             </CardContent>         </Card>         <Card className="lg:col-span-2">             <CardHeader>                 <CardTitle>Key Labs & Meds</CardTitle>                  <CardDescription>Recent results and current orders</CardDescription>             </CardHeader>             <CardContent>                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">                     <div>                         <h3 className="font-semibold mb-2 text-sm">Recent Lab Results</h3>                          <Table>                             <TableHeader>                                 <TableRow>                                     <TableHead>Test</TableHead>                                     <TableHead>Value</TableHead>                                     <TableHead>Status</TableHead>                                 </TableRow>                             </TableHeader>                             <TableBody>                                 {labs.map(lab => (                                     <TableRow key={lab.name}>                                         <TableCell className="font-medium">{lab.name}</TableCell>                                         <TableCell>{lab.value}</TableCell>                                         <TableCell>                                             <Badge variant={lab.status === 'high' ? 'destructive' : 'secondary'}>{lab.status}</Badge>                                         </TableCell>                                     </TableRow>                                 ))}                             </TableBody>                         </Table>                     </div>                     <div>                         <h3 className="font-semibold mb-2 text-sm">Current Medications</h3>                          <Table>                             <TableHeader>                                 <TableRow>                                     <TableHead>Medication</TableHead>                                     <TableHead>Dosage</TableHead>                                 </TableRow>                             </TableHeader>                             <TableBody>                                 {meds.map(med => (                                     <TableRow key={med.name}>                                         <TableCell className="font-medium">{med.name}</TableCell>                                         <TableCell>{med.dosage}</TableCell>                                     </TableRow>                                 ))}                             </TableBody>                         </Table>                     </div>                 </div>             </CardContent>         </Card>     </div>   ); } ================================================ FILE: src/components/aclis/foundation-models-card.tsx ================================================ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Progress } from "@/components/ui/progress"; import { BrainCircuit, Sigma, ScanSearch, Plus } from "lucide-react"; const models = [     { icon: BrainCircuit, name: 'MedGemma', type: 'Internal | Multi-modal', status: 'Active', variant: 'success', details: { gpu: 65, calls: 1248 } },     { icon: Sigma, name: 'TabPFN', type: 'Internal | Tabular', status: 'Active', variant: 'success', details: { gpu: 42, calls: 892 } },     { icon: ScanSearch, name: 'Aidoc Radiology', type: 'External | CT Analysis', status: 'Active', variant: 'success', details: { key: 'a1b2c3...', remaining: 4892 } }, ]; export function FoundationModelsCard() {     return (         <Card>             <CardHeader>                 <CardTitle>AI Foundation Models</CardTitle>                 <CardDescription>Internal and external integrations</CardDescription>             </CardHeader>             <CardContent className="space-y-3">                 {models.map(model => (                     <div key={model.name} className="p-3 bg-muted/50 rounded-lg border">                         <div className="flex items-center justify-between">                             <div className="flex items-center space-x-3">                                 <div className="p-2 bg-primary/10 rounded-full">                                     <model.icon className="h-5 w-5 text-primary" />                                 </div>                                 <div>                                     <h3 className="text-sm font-medium">{model.name}</h3>                                     <div className="text-xs text-muted-foreground">{model.type}</div>                                 </div>                             </div>                              <Badge variant={model.variant as any}>{model.status}</Badge>                         </div>                         <div className="mt-3 grid grid-cols-2 gap-4 text-xs">                              <div>                                 <div className="font-medium">{model.type.includes('Internal') ? 'GPU Allocation' : 'API Calls Remaining'}</div>                                 <Progress value={model.type.includes('Internal') ? model.details.gpu : model.details.remaining / 100} className="h-1.5 mt-1" />                             </div>                              <div>                                 <div className="font-medium">{model.type.includes('Internal') ? 'API Calls (24h)' : 'API Key'}</div>                                 <div className="font-semibold truncate">{model.type.includes('Internal') ? model.details.calls.toLocaleString() : model.details.key}</div>                             </div>                         </div>                     </div>                 ))}                  <Button variant="outline" className="w-full !mt-4"><Plus /> Integrate New Model</Button>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/genomic-risk-card.tsx ================================================ "use client"; import { useState, useEffect } from 'react'; import { Bot, Dna, ShieldCheck, Sigma } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'; import { useToast } from '@/hooks/use-toast'; import { Skeleton } from '../ui/skeleton'; import { estimateRiskAction } from '@/app/actions'; import type { EstimateSurvivalRiskOutput } from '@/ai/flows/estimate-survival-risk'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table'; import { Badge } from '../ui/badge'; import { Slider } from '../ui/slider'; const mutations = [     { gene: "KRAS", variant: "G12C", significance: "Pathogenic", tier: "I" },     { gene: "TP53", variant: "R273H", significance: "Pathogenic", tier: "I" },     { gene: "EGFR", variant: "Exon 19 del", significance: "Likely Benign", tier: "III" }, ]; export function GenomicRiskCard() {   const [risk, setRisk] = useState<EstimateSurvivalRiskOutput | null>(null);   const [isLoading, setIsLoading] = useState(false);   const [simulatedRisk, setSimulatedRisk] = useState<number | null>(null);   const { toast } = useToast();   const handleEstimate = async () => {     setIsLoading(true);     setRisk(null);     try {       const result = await estimateRiskAction();       setRisk(result);       setSimulatedRisk(result.fiveYearSurvivalRisk);     } catch (error) {       console.error("Failed to estimate risk:", error);       toast({         variant: "destructive",         title: "Error",         description: "Could not estimate survival risk.",       });     } finally {       setIsLoading(false);     }   };      useEffect(() => {     handleEstimate();   }, [])   return (     <Card>       <CardHeader>         <div className="flex justify-between items-start">             <div>                 <CardTitle>Genomic Risk & Prognosis</CardTitle>                 <CardDescription>TabPFN-powered 5-year survival risk and mutation analysis.</CardDescription>             </div>             <Button onClick={handleEstimate} disabled={isLoading} variant="default" size="sm">                 <Sigma className={`mr-2 h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />                 Recalculate             </Button>         </div>       </CardHeader>       <CardContent className="grid grid-cols-1 lg:grid-cols-5 gap-6">         <div className="lg:col-span-2 space-y-4">             <h3 className="font-semibold">5-Year Survival Risk</h3>             <div className="flex items-center justify-center p-6 border rounded-lg bg-muted/30">                 {isLoading || !risk ? (                     <Skeleton className="h-24 w-24 rounded-full" />                 ) : (                     <div className="relative">                         <p className="text-5xl font-bold text-primary">{simulatedRisk?.toFixed(0)}%</p>                     </div>                 )}             </div>             {risk && (                 <div>                     <Label>Simulate Biomarker Shift</Label>                     <Slider                          defaultValue={[risk.fiveYearSurvivalRisk]}                          max={100}                          step={1}                          onValueChange={(value) => setSimulatedRisk(value[0])}                     />                 </div>             )}              <div className="p-4 border rounded-lg">                 <h4 className="font-semibold text-sm mb-2 flex items-center gap-2"><ShieldCheck className="h-4 w-4 text-primary" /> AI Rationale</h4>                 {isLoading || !risk ? <Skeleton className="h-16 w-full" /> : <p className="text-xs text-muted-foreground">{risk.rationale}</p>}             </div>         </div>         <div className="lg:col-span-3">              <h3 className="font-semibold mb-2">Mutation Table</h3>              <Card>                 <Table>                     <TableHeader>                         <TableRow>                             <TableHead>Gene</TableHead>                             <TableHead>Variant</TableHead>                             <TableHead>Significance</TableHead>                         </TableRow>                     </TableHeader>                     <TableBody>                         {mutations.map(m => (                             <TableRow key={m.gene}>                                 <TableCell className="font-medium">{m.gene}</TableCell>                                 <TableCell>{m.variant}</TableCell>                                 <TableCell>                                     <Badge variant={m.significance === 'Pathogenic' ? 'destructive' : 'secondary'}>{m.significance}</Badge>                                 </TableCell>                             </TableRow>                         ))}                     </TableBody>                 </Table>             </Card>         </div>       </CardContent>     </Card>   ); } ================================================ FILE: src/components/aclis/global-surveillance-card.tsx ================================================ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Settings, History } from "lucide-react"; const alerts = [     { title: 'Novel Respiratory Virus Cluster', location: 'Southeast Asia | 42 cases', risk: 'High', variant: 'destructive', description: 'Initial reports suggest possible human-to-human transmission.' },     { title: 'Antibiotic-Resistant E. coli', location: 'Local | 8 cases in past week', risk: 'Moderate', variant: 'warning', description: 'Cluster of ESBL-producing E. coli UTIs identified in long-term care facility.' },     { title: 'Seasonal Influenza Update', location: 'Regional | Increasing cases', risk: 'Low', variant: 'secondary', description: 'Influenza A/H3N2 predominant strain this season.' }, ]; export function GlobalSurveillanceCard() {     return (         <Card>             <CardHeader className="bg-destructive/5">                 <CardTitle>Global Disease Surveillance</CardTitle>                 <CardDescription>Real-time outbreak monitoring</CardDescription>             </CardHeader>             <CardContent className="space-y-3">                  <div className="flex space-x-2">                     <Button size="sm" variant="destructive">Critical</Button>                     <Button size="sm" variant="outline">Emerging</Button>                     <Button size="sm" variant="outline">Local</Button>                 </div>                 <div className="space-y-3 max-h-72 overflow-y-auto pr-2">                     {alerts.map(alert => (                         <div key={alert.title} className={`p-3 rounded-lg border border-${alert.variant}/30 bg-${alert.variant}/10`}>                              <div className="flex justify-between items-start">                                 <div>                                     <h3 className={`text-sm font-semibold text-${alert.variant}`}>{alert.title}</h3>                                     <p className={`text-xs text-${alert.variant}/80 mt-1`}>{alert.location}</p>                                 </div>                                 <Badge variant={alert.variant as any}>{alert.risk} Risk</Badge>                             </div>                             <p className="text-xs text-muted-foreground mt-2">{alert.description}</p>                              <div className="mt-2 flex space-x-2">                                 <Button size="sm" variant={alert.variant as any}>Alert Physicians</Button>                                 <Button size="sm" variant="outline">Details</Button>                             </div>                         </div>                     ))}                 </div>                  <div className="grid grid-cols-2 gap-2 !mt-4">                     <Button><Settings /> Configure Alerts</Button>                     <Button variant="outline"><History /> View History</Button>                 </div>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/gpu-resources-card.tsx ================================================ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Progress } from "@/components/ui/progress"; import { Button } from "@/components/ui/button"; import { Plus, BarChart } from "lucide-react"; const gpus = [     { name: 'GPU-1', usage: 65, color: 'bg-yellow-500' },     { name: 'GPU-2', usage: 42, color: 'bg-green-500' },     { name: 'GPU-3', usage: 88, color: 'bg-destructive' },     { name: 'GPU-4', usage: 30, color: 'bg-green-500' }, ]; export function GpuResourcesCard() {     return (         <Card>             <CardHeader>                 <CardTitle>GPU Resource Allocation</CardTitle>                 <CardDescription>Real-time monitoring</CardDescription>             </CardHeader>             <CardContent className="space-y-4">                 <div className="h-24 grid grid-cols-4 gap-2">                     {gpus.map(gpu => (                         <div key={gpu.name} className="bg-muted/50 rounded p-2 flex flex-col justify-end items-center">                             <div className="w-full h-full flex items-end">                                 <div className={`w-full rounded-t-sm ${gpu.color}`} style={{ height: `${gpu.usage}%` }}></div>                             </div>                             <span className="text-xs text-muted-foreground mt-1">{gpu.name}</span>                             <span className="text-xs font-bold">{gpu.usage}%</span>                         </div>                     ))}                 </div>                 <div>                     <div className="flex justify-between items-center mb-1">                         <span className="text-sm font-medium">Total GPU Utilization</span>                         <span className="text-xs text-muted-foreground">56% average</span>                     </div>                     <Progress value={56} className="h-2" />                 </div>                 <div className="grid grid-cols-2 gap-2 pt-2">                     <Button><Plus /> Add GPU</Button>                     <Button variant="outline"><BarChart /> Analytics</Button>                 </div>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/health-dashboard-card.tsx ================================================ import Image from 'next/image'; import { Camera } from 'lucide-react'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Progress } from '@/components/ui/progress'; import { Button } from '@/components/ui/button'; export function HealthDashboardCard() {   return (     <Card>       <CardHeader>         <CardTitle>My Health Dashboard</CardTitle>         <CardDescription>Last updated: Today, 11:45 AM</CardDescription>       </CardHeader>       <CardContent>         <div className="flex items-center justify-between mb-4">           <div className="flex items-center space-x-3">             <Image               src="https://randomuser.me/api/portraits/men/32.jpg"               data-ai-hint="person portrait"               alt="John Doe"               width={56}               height={56}               className="rounded-full"             />             <div>               <h3 className="font-medium">John Doe</h3>               <p className="text-xs text-muted-foreground">45 years | MRN: 12345678</p>               <Badge variant="secondary" className="mt-1">Stage IIIB NSCLC</Badge>             </div>           </div>           <Button variant="ghost" size="icon">             <Camera />           </Button>         </div>         <div className="grid grid-cols-3 gap-2 mb-4">           <div className="bg-muted/50 p-2 rounded-lg text-center">             <div className="text-xs text-muted-foreground">Heart Rate</div>             <div className="text-lg font-semibold">88</div>             <div className="text-xs text-muted-foreground">bpm</div>           </div>           <div className="bg-muted/50 p-2 rounded-lg text-center">             <div className="text-xs text-muted-foreground">Blood Pressure</div>             <div className="text-lg font-semibold">132/84</div>             <div className="text-xs text-muted-foreground">mmHg</div>           </div>           <div className="bg-muted/50 p-2 rounded-lg text-center">             <div className="text-xs text-muted-foreground">SpO₂</div>             <div className="text-lg font-semibold">96%</div>             <div className="text-xs text-muted-foreground">Oxygen</div>           </div>         </div>         <div className="space-y-3">           <div>             <div className="flex justify-between text-sm mb-1">               <span className="font-medium">Pain Level</span>               <span className="text-muted-foreground">4/10</span>             </div>             <Progress value={40} className="h-2 [&>div]:bg-yellow-500" />           </div>           <div>             <div className="flex justify-between text-sm mb-1">               <span className="font-medium">Energy Level</span>               <span className="text-muted-foreground">6/10</span>             </div>             <Progress value={60} className="h-2" />           </div>           <div>             <div className="flex justify-between text-sm mb-1">               <span className="font-medium">Sleep Quality</span>               <span className="text-muted-foreground">5/10</span>             </div>             <Progress value={50} className="h-2 [&>div]:bg-purple-500" />           </div>         </div>       </CardContent>     </Card>   ); } ================================================ FILE: src/components/aclis/health-education-card.tsx ================================================ import { ArrowRight } from 'lucide-react'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; const articles = [     { title: "Understanding Lung Nodules", description: "What you need to know about your recent findings.", color: "blue" },     { title: "Managing Chemotherapy Side Effects", description: "Practical tips from oncology nurses.", color: "purple" },     { title: "Breathing Exercises", description: "Improve your lung function with these techniques.", color: "green" }, ]; const getColorClasses = (color: string) => {     switch(color) {         case 'purple': return 'bg-purple-500/10 border-purple-500/20 text-purple-800';         case 'green': return 'bg-green-500/10 border-green-500/20 text-green-800';         default: return 'bg-primary/10 border-primary/20 text-primary';     } } export function HealthEducationCard() {   return (     <Card>       <CardHeader>         <CardTitle>Health Education</CardTitle>         <CardDescription>Personalized for your condition</CardDescription>       </CardHeader>       <CardContent className="space-y-3">         {articles.map(article => (             <div key={article.title} className={`p-3 rounded-lg border ${getColorClasses(article.color)}`}>                 <h3 className="font-semibold">{article.title}</h3>                 <p className="text-xs mt-1">{article.description}</p>                  <Button variant="link" size="sm" className="p-0 h-auto mt-2">                     {article.color === 'purple' ? 'Watch Video' : 'Read Article'} <ArrowRight className="ml-1" />                 </Button>             </div>         ))}       </CardContent>     </Card>   ); } ================================================ FILE: src/components/aclis/imaging-findings-card.tsx ================================================ "use client"; import { useState, useRef } from 'react'; import Image from 'next/image'; import { Bot, ImageIcon, Upload, BrainCircuit } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'; import { analyzeImageAction } from '@/app/actions'; import type { AnalyzeImagingFindingsOutput } from '@/ai/flows/analyze-imaging-findings'; import { useToast } from '@/hooks/use-toast'; import { Skeleton } from '../ui/skeleton'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'; import { Badge } from '../ui/badge'; export function ImagingFindingsCard() {   const [analysis, setAnalysis] = useState<AnalyzeImagingFindingsOutput | null>(null);   const [isLoading, setIsLoading] = useState(false);   const [imageDataUri, setImageDataUri] = useState<string | null>(null);   const [agentType, setAgentType] = useState<'MedGemma' | 'RadiologyCopilot'>('MedGemma');   const fileInputRef = useRef<HTMLInputElement>(null);   const { toast } = useToast();   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {     const file = event.target.files?.[0];     if (file) {       const reader = new FileReader();       reader.onload = (e) => {         setImageDataUri(e.target?.result as string);       };       reader.readAsDataURL(file);     }   };   const handleAnalyzeImage = async () => {     if (!imageDataUri) {       toast({ variant: 'destructive', title: 'No image selected' });       return;     }     setIsLoading(true);     setAnalysis(null);     try {       const result = await analyzeImageAction({ imageDataUri, agentType });       setAnalysis(result);     } catch (error) {       console.error("Failed to analyze image:", error);       toast({         variant: "destructive",         title: "Error",         description: "Could not analyze image.",       });     } finally {       setIsLoading(false);     }   };   return (     <Card>         <CardHeader>             <CardTitle>Imaging Findings</CardTitle>             <CardDescription>AI-powered analysis of medical images (CT, X-ray, MRI).</CardDescription>         </CardHeader>         <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-6">             <div className="flex flex-col gap-4">                 <div className="aspect-square border-2 border-dashed rounded-lg flex items-center justify-center relative bg-muted/20 overflow-hidden">                     {imageDataUri ? (                         <Image src={imageDataUri} alt="Medical scan to be analyzed" layout="fill" objectFit="contain" />                     ) : (                         <div className="text-center text-muted-foreground p-4">                             <ImageIcon className="mx-auto h-12 w-12" />                             <p className="mt-2 text-sm">Upload a medical image to begin analysis.</p>                              <Button size="sm" variant="outline" className="mt-4" onClick={() => fileInputRef.current?.click()}>                                 <Upload className="mr-2 h-4 w-4" /> Upload Image                             </Button>                         </div>                     )}                 </div>                 <input type="file" ref={fileInputRef} onChange={handleFileChange} className="hidden" accept="image/*" />                 <div className="flex items-center gap-2">                     <Select value={agentType} onValueChange={(v: 'MedGemma' | 'RadiologyCopilot') => setAgentType(v)}>                         <SelectTrigger>                             <SelectValue placeholder="Select Agent" />                         </SelectTrigger>                         <SelectContent>                             <SelectItem value="MedGemma">MedGemma</SelectItem>                             <SelectItem value="RadiologyCopilot">Radiology Copilot</SelectItem>                         </SelectContent>                     </Select>                     <Button onClick={handleAnalyzeImage} disabled={isLoading || !imageDataUri} className="w-full">                         <BrainCircuit className={`mr-2 h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />                         Analyze Image                     </Button>                 </div>             </div>             <div>                  <div className="aspect-square border rounded-lg flex items-center justify-center bg-muted/20 overflow-hidden">                     {isLoading ? (                          <div className="flex items-center justify-center w-full h-full">                             <Bot className="h-12 w-12 animate-pulse text-primary" />                          </div>                     ) : analysis?.overlayImage ? (                         <div className="relative w-full h-full">                            <Image src={analysis.overlayImage} data-ai-hint="medical scan" alt="AI analysis overlay of medical scan" layout="fill" objectFit="contain" />                            <Badge className="absolute top-2 right-2 shadow-md">Confidence: {Math.round(analysis.confidenceScore * 100)}%</Badge>                         </div>                     ) : (                         <div className="text-center text-muted-foreground p-4">                             <Bot className="mx-auto h-12 w-12" />                             <p className="mt-2 text-sm">Analysis results and AI-overlay will be displayed here.</p>                         </div>                     )}                  </div>                  {analysis && !isLoading && (                      <div className="mt-4 p-3 border rounded-lg bg-background text-sm">                          <h4 className="font-semibold">AI Report</h4>                          <p className="text-muted-foreground mt-1">{analysis.report}</p>                      </div>                  )}             </div>         </CardContent>     </Card>   ); } ================================================ FILE: src/components/aclis/main-workspace.tsx ================================================ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { PreliminarySummaryCard } from "./preliminary-summary-card" import { EhrSummaryCard } from "./ehr-summary-card" import { ImagingFindingsCard } from "./imaging-findings-card" import { GenomicRiskCard } from "./genomic-risk-card" import { DoctorProtocolCard } from "./doctor-protocol-card" import { CopilotAgentPanel } from "./copilot-agent-panel" import { ContradictionAlertCard } from "./contradiction-alert-card" import { SuggestedTherapiesCard } from "./suggested-therapies-card" import { AdvertisementsCard } from "./advertisements-card" import { SuggestedTestsCard } from "./suggested-tests-card" import { SuggestedImagingCard } from "./suggested-imaging-card" export function MainWorkspace() {   return (     <Tabs defaultValue="summary" className="w-full">       <div className="overflow-x-auto pb-2">         <TabsList className="grid w-full grid-cols-4 sm:w-auto sm:inline-grid sm:grid-cols-7">             <TabsTrigger value="summary">Summary</TabsTrigger>             <TabsTrigger value="imaging">Imaging</TabsTrigger>             <TabsTrigger value="genomics">Genomics</TabsTrigger>             <TabsTrigger value="protocols">Protocols</TabsTrigger>             <TabsTrigger value="agents">Agents</TabsTrigger>             <TabsTrigger value="alerts">Alerts</TabsTrigger>             <TabsTrigger value="therapies">Therapies</TabsTrigger>         </TabsList>       </div>       <div className="mt-4">         <TabsContent value="summary">           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">             <div className="lg:col-span-1">               <PreliminarySummaryCard />             </div>             <div className="lg:col-span-2">               <EhrSummaryCard />             </div>             <div className="lg:col-span-1">                <SuggestedTestsCard />             </div>             <div className="lg:col-span-1">               <SuggestedImagingCard />             </div>              <div className="lg:col-span-1">               <AdvertisementsCard />             </div>           </div>         </TabsContent>         <TabsContent value="imaging"><ImagingFindingsCard /></TabsContent>         <TabsContent value="genomics"><GenomicRiskCard /></TabsContent>         <TabsContent value="protocols"><DoctorProtocolCard /></TabsContent>         <TabsContent value="agents"><CopilotAgentPanel /></TabsContent>         <TabsContent value="alerts"><ContradictionAlertCard /></TabsContent>         <TabsContent value="therapies"><SuggestedTherapiesCard /></TabsContent>       </div>     </Tabs>   ) } ================================================ FILE: src/components/aclis/medical-devices-card.tsx ================================================ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { ScanLine, HeartPulse, Dna, Plus, MoreVertical } from "lucide-react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; const devices = [     { icon: ScanLine, name: 'Siemens CT Scanner', location: 'Radiology Dept | Room 101', status: 'Online', variant: 'success', details: { Usage: '78%', 'Last Scan': '12 min ago', 'AI Model': 'Aidoc v3.2' } },     { icon: HeartPulse, name: 'Philips IntelliVue MX750', location: 'ICU | Bed 12', status: 'Alert', variant: 'destructive', details: { HR: '112', 'SpO₂': '89%', Status: 'Critical' } },     { icon: Dna, name: 'Illumina NovaSeq 6000', location: 'Genomics Lab', status: 'Online', variant: 'success', details: { Samples: '24', Capacity: '65%', Model: 'MedGemma' } }, ]; export function MedicalDevicesCard() {     return (         <Card>             <CardHeader>                 <CardTitle>Medical Devices (150)</CardTitle>                 <CardDescription>By department and status</CardDescription>             </CardHeader>             <CardContent className="space-y-4">                  <Select defaultValue="all">                     <SelectTrigger>                         <SelectValue placeholder="Filter by department..." />                     </SelectTrigger>                     <SelectContent>                         <SelectItem value="all">All Departments</SelectItem>                         <SelectItem value="radiology">Radiology</SelectItem>                         <SelectItem value="cardiology">Cardiology</SelectItem>                         <SelectItem value="pathology">Pathology</SelectItem>                         <SelectItem value="icu">ICU</SelectItem>                     </SelectContent>                 </Select>                                  <div className="space-y-3 max-h-80 overflow-y-auto pr-2">                     {devices.map((device, i) => (                         <div key={i} className="p-3 bg-muted/50 rounded-lg border">                             <div className="flex items-center justify-between">                                 <div className="flex items-center space-x-3">                                      <div className="p-2 bg-primary/10 rounded-full">                                         <device.icon className="h-5 w-5 text-primary" />                                     </div>                                     <div>                                         <h3 className="text-sm font-medium">{device.name}</h3>                                         <div className="text-xs text-muted-foreground">{device.location}</div>                                     </div>                                 </div>                                 <div className="flex items-center space-x-2">                                     <Badge variant={device.variant as any}>{device.status}</Badge>                                     <Button variant="ghost" size="icon" className="h-6 w-6"><MoreVertical className="h-4 w-4"/></Button>                                 </div>                             </div>                             <div className="mt-3 grid grid-cols-3 gap-2 text-xs">                                 {Object.entries(device.details).map(([key, value]) => (                                     <div key={key} className="text-center">                                         <div className="font-medium text-muted-foreground">{key}</div>                                         <div className={`font-semibold ${device.variant === 'destructive' && (key==='HR' || key==='SpO₂') ? 'text-destructive' : ''}`}>{value}</div>                                     </div>                                 ))}                             </div>                         </div>                     ))}                 </div>                 <Button className="w-full !mt-4"><Plus /> Add New Device</Button>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/medications-card.tsx ================================================ import { Plus } from 'lucide-react'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; const medications = [   { name: 'Lisinopril', dose: '10mg daily for hypertension', status: 'Taken', time: 'Taken today at 8:00 AM' },   { name: 'Atorvastatin', dose: '20mg nightly for cholesterol', status: 'Upcoming', time: 'Due at 8:00 PM' },   { name: 'Albuterol', dose: '2 puffs Q6H PRN for breathing', status: 'As Needed', time: 'Last taken 4 hours ago' }, ]; const getStatusVariant = (status: string) => {   switch (status) {     case 'Taken': return 'success';     case 'Upcoming': return 'warning';     default: return 'secondary';   } }; export function MedicationsCard() {   return (     <Card>       <CardHeader>         <CardTitle>Current Medications</CardTitle>         <CardDescription>Next dose in 2 hours</CardDescription>       </CardHeader>       <CardContent>         <div className="relative pl-6">           <div className="absolute left-3 top-0 bottom-0 w-0.5 bg-border" />           {medications.map((med, index) => (             <div key={index} className="relative pb-6">               <div className="absolute left-[-22.5px] top-1.5 w-4 h-4 rounded-full bg-primary" />               <div className="flex justify-between items-start">                 <div>                   <h3 className="font-medium">{med.name}</h3>                   <p className="text-sm text-muted-foreground">{med.dose}</p>                 </div>                 <Badge variant={getStatusVariant(med.status) as any}>{med.status}</Badge>               </div>               <p className="text-xs text-muted-foreground mt-1">{med.time}</p>             </div>           ))}         </div>         <Button variant="default" className="w-full">           <Plus />           Add Medication Reminder         </Button>       </CardContent>     </Card>   ); } ================================================ FILE: src/components/aclis/model-training-card.tsx ================================================ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Progress } from "@/components/ui/progress"; import { Plus, BarChart } from "lucide-react"; const jobs = [     { title: 'Oncology Copilot v2.3', requestor: 'Dr. Johnson', status: 'Pending', variant: 'secondary', description: 'Fine-tuning request to incorporate latest NCCN guidelines for NSCLC.' },     { title: 'TabPFN - Diabetes Cohort', requestor: 'System', status: 'Training', variant: 'warning', description: 'Retraining with local patient data to improve HbA1c progression predictions.', progress: 62 },     { title: 'MedGemma - Radiology', requestor: 'System', status: 'Success', variant: 'success', description: 'Fine-tuned on 1,200 local chest X-rays. Accuracy improved by 8.2%.' }, ]; export function ModelTrainingCard() {     return (         <Card>             <CardHeader>                 <CardTitle>Model Training & Fine-Tuning</CardTitle>                 <CardDescription>Active training jobs and requests</CardDescription>             </CardHeader>             <CardContent className="space-y-3">                 {jobs.map(job => (                     <div key={job.title} className="p-3 bg-muted/50 rounded-lg border">                         <div className="flex justify-between items-start">                             <div>                                 <h3 className="text-sm font-medium">{job.title}</h3>                                 <div className="text-xs text-muted-foreground mt-1">Requested by {job.requestor}</div>                             </div>                             <Badge variant={job.variant as any}>{job.status}</Badge>                         </div>                         <p className="text-xs text-muted-foreground mt-2">{job.description}</p>                         {job.progress && (                              <div className="mt-2">                                 <div className="flex justify-between text-xs mb-1">                                     <span>Progress</span>                                     <span>{job.progress}%</span>                                 </div>                                 <Progress value={job.progress} className="h-1.5" />                             </div>                         )}                         <div className="mt-2 flex justify-end">                             {job.status === 'Pending' && <Button size="sm" variant="outline">Approve</Button>}                             {job.status === 'Success' && <Button size="sm" variant="default">Deploy</Button>}                         </div>                     </div>                 ))}                 <div className="grid grid-cols-2 gap-2 !mt-4">                     <Button><Plus /> New Training Job</Button>                     <Button variant="outline"><BarChart /> Performance</Button>                 </div>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/notifications.tsx ================================================ "use client" import { Bell, AlertTriangle } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'; import { Badge } from '@/components/ui/badge'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Separator } from '../ui/separator'; export function Notifications() {     return (         <Sheet>             <SheetTrigger asChild>                 <Button variant="ghost" size="icon" className="relative">                     <Badge className="absolute -top-1 -right-1 h-4 w-4 justify-center p-0 text-xs animate-pulse" variant="destructive">2</Badge>                     <Bell className="h-5 w-5" />                     <span className="sr-only">Notifications</span>                 </Button>             </SheetTrigger>             <SheetContent>                 <SheetHeader>                     <SheetTitle>Notifications & Alerts</SheetTitle>                 </SheetHeader>                 <div className="py-4 space-y-4">                     <Card className="bg-destructive/10 border-destructive">                         <CardHeader className="p-4">                             <CardTitle className="flex items-center gap-2 text-lg text-destructive">                                 <AlertTriangle className="h-5 w-5" />                                 Active Disease Alarm                             </CardTitle>                             <CardDescription className="text-destructive/80">Outbreak Match Found</CardDescription>                         </CardHeader>                         <CardContent className="p-4 pt-0">                             <p className="text-sm">Patient John Doe's symptoms match a recent local outbreak of 'Respiratory Syncope Virus'.</p>                             <div className="flex gap-2 mt-2">                                 <Button size="sm" variant="destructive">View Details</Button>                                 <Button size="sm" variant="outline">Acknowledge</Button>                             </div>                         </CardContent>                     </Card>                     <Separator />                                          <div className="space-y-1">                         <div className="text-sm p-3 rounded-lg hover:bg-muted/50 cursor-pointer transition-colors">                             <p className="font-medium">Lab Result Ready</p>                             <p className="text-muted-foreground text-xs">CBC for Jane Smith is now available.</p>                         </div>                          <div className="text-sm p-3 rounded-lg hover:bg-muted/50 cursor-pointer transition-colors">                             <p className="font-medium">Consult Request</p>                             <p className="text-muted-foreground text-xs">Dr. Emily Carter has requested a consult on patient Robert Johnson.</p>                         </div>                     </div>                     <Button variant="outline" className="w-full mt-4">Mark all as read</Button>                 </div>             </SheetContent>         </Sheet>     ); } ================================================ FILE: src/components/aclis/nursing-dashboard.tsx ================================================ import Image from 'next/image'; import { Search, Bell, RefreshCw, User, ChevronDown } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { PatientAssignmentsCard } from './patient-assignments-card'; import { WardOverviewCard } from './ward-overview-card'; import { PriorityAlertsCard } from './priority-alerts-card'; import { TasksCard } from './tasks-card'; import { ConnectedDevicesCard } from './connected-devices-card'; import { WorkflowAutomationCard } from './workflow-automation-card'; export function NursingDashboard() {   return (     <div className="min-h-screen bg-muted/30 font-sans">       <header className="bg-card shadow-sm sticky top-0 z-20">         <div className="flex items-center justify-between p-4 border-b">           <div className="flex items-center space-x-4">             <h1 className="text-xl font-bold text-primary">ACLIS</h1>             <div className="text-sm text-muted-foreground">Nursing Dashboard</div>           </div>           <div className="flex items-center space-x-4">             <div className="relative">               <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />               <Input type="text" placeholder="Search patients, rooms..." className="pl-10 pr-4 py-2 text-sm w-64" />             </div>             <Button variant="ghost" size="icon"><RefreshCw className="h-5 w-5" /></Button>             <Button variant="ghost" size="icon" className="relative">               <Bell className="h-5 w-5" />               <span className="absolute top-1 right-1 h-2 w-2 rounded-full bg-red-500"></span>             </Button>             <div className="flex items-center space-x-2">               <Image src="https://randomuser.me/api/portraits/women/75.jpg" data-ai-hint="woman person" alt="Nurse Alex Chen" width={32} height={32} className="rounded-full" />               <div>                 <div className="text-sm font-medium">Nurse Alex Chen</div>                 <div className="text-xs text-muted-foreground">Ward 4B</div>               </div>               <ChevronDown className="h-4 w-4 text-muted-foreground" />             </div>           </div>         </div>       </header>       <main className="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">         <div className="lg:col-span-1 space-y-6">           <PatientAssignmentsCard />           <WardOverviewCard />         </div>         <div className="lg:col-span-1 space-y-6">           <PriorityAlertsCard />           <TasksCard />         </div>         <div className="lg:col-span-1 space-y-6">           <ConnectedDevicesCard />           <WorkflowAutomationCard />         </div>       </main>     </div>   ); } ================================================ FILE: src/components/aclis/patient-assignments-card.tsx ================================================ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import Image from "next/image"; import { Badge } from "@/components/ui/badge"; import { HeartPulse, Thermometer, Gauge } from "lucide-react"; const patients = [     { id: '12345', name: 'John Doe', age: 45, gender: 'M', condition: 'Stage IIIB NSCLC', status: 'Monitoring', room: '201', avatar: 'men/32.jpg', vitals: { hr: 88, spo2: 96, temp: 98.6 } },     { id: '23456', name: 'Jane Smith', age: 68, gender: 'F', condition: 'Post-op CABG', status: 'Stable', room: '203', avatar: 'women/44.jpg', vitals: { hr: 72, spo2: 98, temp: 97.8 } },     { id: '34567', name: 'Emily White', age: 52, gender: 'F', condition: 'Type 2 Diabetes', status: 'Alert', room: '205', avatar: 'women/28.jpg', vitals: { hr: 112, spo2: 89, temp: 100.2 } }, ]; const getStatusVariant = (status: string): "destructive" | "warning" | "success" => {     switch (status) {         case 'Alert': return 'destructive';         case 'Monitoring': return 'warning';         case 'Stable': return 'success';         default: return 'secondary';     } }; const getVitalColor = (status: string) => {     switch(status) {         case 'Alert': return 'text-destructive';         case 'Monitoring': return 'text-yellow-600';         default: return 'text-primary';     } }; export function PatientAssignmentsCard() {     return (         <Card>             <CardHeader>                 <CardTitle>My Patient Assignments (3)</CardTitle>                 <CardDescription>Ward 4B | Shift: 7:00 AM - 7:00 PM</CardDescription>             </CardHeader>             <CardContent className="p-0">                 <div className="divide-y">                     {patients.map(p => (                         <div key={p.id} className="p-4 hover:bg-muted cursor-pointer space-y-3">                             <div className="flex justify-between items-start">                                 <div className="flex items-start space-x-3">                                     <Image src={`https://randomuser.me/api/portraits/${p.avatar}`} data-ai-hint="person portrait" alt={p.name} width={40} height={40} className="rounded-full" />                                     <div>                                         <h3 className="font-medium">{p.name}, {p.age}{p.gender}</h3>                                         <p className="text-xs text-muted-foreground">Room {p.room} | MRN: {p.id}</p>                                         <p className="text-xs mt-1">{p.condition}</p>                                     </div>                                 </div>                                 <Badge variant={getStatusVariant(p.status) as any}>{p.status}</Badge>                             </div>                             <div className={`grid grid-cols-3 gap-2 text-xs ${getVitalColor(p.status)}`}>                                 <div className="bg-muted/50 p-1 rounded text-center">                                     <HeartPulse className="h-3 w-3 mx-auto mb-1" />                                     <div>{p.vitals.hr} bpm</div>                                 </div>                                 <div className="bg-muted/50 p-1 rounded text-center">                                     <Gauge className="h-3 w-3 mx-auto mb-1" />                                     <div>{p.vitals.spo2}% SpO₂</div>                                 </div>                                 <div className="bg-muted/50 p-1 rounded text-center">                                     <Thermometer className="h-3 w-3 mx-auto mb-1" />                                     <div>{p.vitals.temp}°F</div>                                 </div>                             </div>                         </div>                     ))}                 </div>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/patient-context-bar.tsx ================================================ import Link from 'next/link'; import { ArrowLeft, RefreshCw, Settings } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Separator } from '@/components/ui/separator'; import { Notifications } from './notifications'; export function PatientContextBar({ patientId }: { patientId: string }) {   // Mock data, in real app this would be fetched   const patientData = {       name: "John Doe",       age: 45,       gender: "M",       mrn: "12345678"   }   return (     <header className="flex-shrink-0 bg-card border-b p-3 md:px-6 flex items-center justify-between shadow-sm z-10">       <div className="flex items-center gap-2 md:gap-4 flex-wrap">         <Button variant="ghost" size="icon" className="h-8 w-8" asChild>           <Link href="/physician-dashboard">             <ArrowLeft className="h-5 w-5" />             <span className="sr-only">Back to Dashboard</span>           </Link>         </Button>         <div className="flex items-center gap-3">           <h1 className="text-lg font-bold text-primary whitespace-nowrap">{patientData.name}</h1>           <div className="text-sm text-muted-foreground hidden md:flex items-center gap-2">             <span>{patientData.age}/{patientData.gender}</span>             <Separator orientation="vertical" className="h-4" />             <span>MRN: {patientData.mrn}</span>             <Separator orientation="vertical" className="h-4" />             <span>Visit #{patientId}</span>           </div>         </div>         <Badge variant="destructive" className="ml-2">High Risk</Badge>       </div>       <div className="flex items-center gap-1 md:gap-2">         <Button variant="ghost" size="icon">           <RefreshCw className="h-5 w-5" />           <span className="sr-only">Refresh Data</span>         </Button>         <Notifications />         <Button variant="ghost" size="icon">           <Settings className="h-5 w-5" />           <span className="sr-only">Settings</span>         </Button>       </div>     </header>   ); } ================================================ FILE: src/components/aclis/patient-dashboard.tsx ================================================ import { Bell, User } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { HealthDashboardCard } from './health-dashboard-card'; import { MedicationsCard } from './medications-card'; import { TestResultsCard } from './test-results-card'; import { AclisAssistantCard } from './aclis-assistant-card'; import { QuickActionsCard } from './quick-actions-card'; import { CareTeamCard } from './care-team-card'; import { AppointmentsCard } from './appointments-card'; import { HealthEducationCard } from './health-education-card'; export function PatientDashboard() {   return (     <div className="min-h-screen bg-muted/30 font-sans">       <header className="bg-card shadow-sm sticky top-0 z-20">         <div className="flex items-center justify-between p-4 border-b">           <div className="flex items-center space-x-4">             <h1 className="text-xl font-bold text-primary">ACLIS</h1>             <div className="text-sm text-muted-foreground">Patient Portal</div>           </div>           <div className="flex items-center space-x-4">             <Button variant="ghost" size="icon" className="relative">               <Bell className="h-5 w-5" />               <span className="absolute top-1 right-1 h-2 w-2 rounded-full bg-red-500"></span>             </Button>             <div className="flex items-center space-x-2">               <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">                 <User className="h-5 w-5 text-primary" />               </div>               <span className="text-sm font-medium">John Doe</span>             </div>           </div>         </div>       </header>       <main className="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">         <div className="space-y-6">           <HealthDashboardCard />           <MedicationsCard />           <TestResultsCard />         </div>         <div className="space-y-6">           <AclisAssistantCard />           <QuickActionsCard />         </div>         <div className="space-y-6">           <CareTeamCard />           <AppointmentsCard />           <HealthEducationCard />         </div>       </main>     </div>   ); } ================================================ FILE: src/components/aclis/physician-dashboard.tsx ================================================ "use client"; import { useState } from 'react'; import Link from 'next/link'; import { Search, Bell, Stethoscope, Plus, ChevronDown, CheckSquare, Microscope, FileText, CalendarCheck, BookOpen, BrainCircuit } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import Image from 'next/image'; const patients = [     { id: '12345', name: 'John Doe', age: 45, gender: 'M', condition: 'Stage IIIB NSCLC', status: 'Monitoring', room: '201', avatar: 'men/32.jpg' },     { id: '23456', name: 'Jane Smith', age: 68, gender: 'F', condition: 'Post-op CABG', status: 'Stable', room: '203', avatar: 'women/44.jpg' },     { id: '34567', name: 'Emily White', age: 52, gender: 'F', condition: 'Type 2 Diabetes', status: 'Alert', room: '205', avatar: 'women/28.jpg' },     { id: '45678', name: 'Robert Chen', age: 60, gender: 'M', condition: 'Colon Cancer', status: 'Follow-up', room: 'Discharged', avatar: 'men/55.jpg' }, ]; const researchFeed = [     {         title: "A Randomized Trial of Pembrolizumab plus Chemotherapy in Metastatic NSCLC",         source: "N Engl J Med, 2024",         match: "Matches John Doe's profile."     },     {         title: "New Guidelines for Hypertension Management in Patients with Diabetes",         source: "JAMA, 2024",         match: "Relevant to Emily White's comorbidities."     } ]; const getStatusClass = (status: string) => {     switch (status) {         case 'Monitoring': return 'bg-yellow-500';         case 'Stable': return 'bg-green-500';         case 'Alert': return 'bg-red-500';         default: return 'bg-gray-400';     } }; export function PhysicianDashboard() {   const [selectedPhysician, setSelectedPhysician] = useState('Dr. Sarah Johnson');      return (     <div className="min-h-screen bg-muted/30">         <header className="bg-card shadow-sm sticky top-0 z-20">             <div className="flex items-center justify-between p-4 border-b">                 <div className="flex items-center space-x-4">                     <h1 className="text-xl font-bold text-primary">ACLIS</h1>                     <div className="text-sm text-muted-foreground">Physician Dashboard</div>                 </div>                 <div className="flex items-center space-x-4">                     <div className="relative">                         <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />                         <input type="text" placeholder="Search patients, protocols..." className="pl-10 pr-4 py-2 border rounded-md text-sm w-64" />                     </div>                     <Button variant="ghost" size="icon"><Bell className="h-5 w-5" /></Button>                     <div className="flex items-center space-x-2">                         <Image src="https://randomuser.me/api/portraits/women/68.jpg" data-ai-hint="woman person" alt="Dr. Sarah Johnson" width={32} height={32} className="rounded-full" />                         <div>                             <div className="text-sm font-medium">{selectedPhysician}</div>                             <div className="text-xs text-muted-foreground">Oncology</div>                         </div>                         <ChevronDown className="h-4 w-4 text-muted-foreground" />                     </div>                 </div>             </div>         </header>                  <main className="grid grid-cols-1 lg:grid-cols-4 gap-6 p-6">             <aside className="lg:col-span-1 space-y-6">                 <Card>                     <CardHeader>                         <CardTitle>Physician Profile</CardTitle>                     </CardHeader>                     <CardContent>                         <Select value={selectedPhysician} onValueChange={setSelectedPhysician}>                             <SelectTrigger>                                 <SelectValue placeholder="Select a physician" />                             </SelectTrigger>                             <SelectContent>                                 <SelectItem value="Dr. Sarah Johnson">Dr. Sarah Johnson (Oncology)</SelectItem>                                 <SelectItem value="Dr. Michael Brown">Dr. Michael Brown (Pulmonology)</SelectItem>                                 <SelectItem value="Dr. Lisa Wong">Dr. Lisa Wong (Cardiology)</SelectItem>                             </SelectContent>                         </Select>                     </CardContent>                 </Card>                 <Card>                     <CardHeader>                         <div className="flex justify-between items-center">                             <CardTitle>My Patients ({patients.length})</CardTitle>                             <Button size="sm"><Plus className="mr-2 h-4 w-4" /> New</Button>                         </div>                          <CardDescription>Active patients under your care</CardDescription>                     </CardHeader>                     <CardContent className="p-0 max-h-[400px] overflow-y-auto">                         <div className="divide-y">                         {patients.map(p => (                             <Link href={`/physician/patient/${p.id}`} key={p.id}>                                 <div className="p-4 hover:bg-muted cursor-pointer">                                     <div className="flex justify-between items-start">                                         <div className="flex items-start space-x-3">                                             <Image src={`https://randomuser.me/api/portraits/${p.avatar}`} data-ai-hint="person portrait" alt={p.name} width={40} height={40} className="rounded-full" />                                             <div>                                                 <h3 className="font-medium">{p.name}, {p.age}{p.gender}</h3>                                                 <p className="text-xs text-muted-foreground">MRN: {p.id} | Room {p.room}</p>                                                 <p className="text-xs mt-1">{p.condition}</p>                                             </div>                                         </div>                                         <div className={`px-2 py-1 rounded-full text-white text-xs font-medium ${getStatusClass(p.status)}`}>                                             {p.status}                                         </div>                                     </div>                                 </div>                             </Link>                         ))}                         </div>                     </CardContent>                 </Card>                                   <Card>                     <CardHeader>                         <CardTitle>Quick Actions</CardTitle>                     </CardHeader>                     <CardContent className="grid grid-cols-2 gap-3">                         <Button variant="outline"><FileText /> New Note</Button>                         <Button variant="outline"><CheckSquare /> Rx Order</Button>                         <Button variant="outline"><Microscope /> Lab Order</Button>                         <Button variant="outline"><CalendarCheck /> Schedule</Button>                     </CardContent>                 </Card>             </aside>             <section className="lg:col-span-3 space-y-6">                 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">                      <Card>                         <CardHeader>                             <CardTitle>Relevant Research</CardTitle>                             <CardDescription>Curated based on your active patient profiles.</CardDescription>                         </CardHeader>                         <CardContent className="space-y-3">                             {researchFeed.map((item, index) => (                                 <div key={index} className="p-3 bg-muted/50 rounded-lg">                                     <p className="font-medium text-sm">{item.title}</p>                                     <p className="text-xs text-muted-foreground">{item.source}</p>                                     <p className="text-xs text-accent-foreground/80 bg-accent/20 px-2 py-1 rounded-full mt-1 inline-block">{item.match}</p>                                 </div>                             ))}                         </CardContent>                     </Card>                      <Card>                         <CardHeader>                             <CardTitle>Advertisements</CardTitle>                              <CardDescription>Latest medical devices and diagnostics.</CardDescription>                         </CardHeader>                         <CardContent className="space-y-4">                              <div className="flex items-center gap-4 p-3 bg-muted/50 rounded-lg">                                 <Image src="https://placehold.co/80x80.png" data-ai-hint="medical device" alt="Medical Device" width={80} height={80} className="rounded-md" />                                 <div>                                     <h4 className="font-semibold">New! AccuCheck Pro</h4>                                     <p className="text-sm text-muted-foreground">Real-time glucose monitoring with AI-powered insulin suggestions. <a href="#" className="text-primary">Learn more</a>.</p>                                 </div>                             </div>                             <div className="flex items-center gap-4 p-3 bg-muted/50 rounded-lg">                                 <Image src="https://placehold.co/80x80.png" data-ai-hint="medical scanner" alt="Medical Scanner" width={80} height={80} className="rounded-md" />                                 <div>                                     <h4 className="font-semibold">Siemens Somatom X.cite</h4>                                     <p className="text-sm text-muted-foreground">High-resolution CT with up to 40% less radiation. <a href="#" className="text-primary">Request a demo</a>.</p>                                 </div>                             </div>                         </CardContent>                     </Card>                 </div>                 <Card>                     <CardHeader>                         <CardTitle>Doctor's AI Protocol Lab</CardTitle>                         <CardDescription>Manage your personal protocols and fine-tune AI model behavior.</CardDescription>                     </CardHeader>                      <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-6">                         <div className="space-y-4">                             <h3 className="font-semibold flex items-center gap-2"><BookOpen /> My Protocol Notes</h3>                             <div className="p-3 bg-blue-50 border-l-4 border-primary rounded">                                 <p className="text-sm">For patients in this demographic, I maintain a stricter HbA1c target of < 6.5%. Default to GE ultrasound for initial cardiac workup.</p>                             </div>                              <textarea className="w-full p-2 border rounded-md" rows={3} placeholder="Add a new observation to your protocol..."></textarea>                             <Button>Save & Sync to DCP</Button>                         </div>                          <div className="space-y-4">                             <h3 className="font-semibold flex items-center gap-2"><BrainCircuit /> AI Fine-Tuning</h3>                             <div className="p-3 bg-yellow-50 border-l-4 border-yellow-400 rounded">                                 <p className="text-sm font-medium">Fine-Tuning Request: Oncology Copilot v2.3</p>                                 <p className="text-xs text-muted-foreground">Status: <span className="text-yellow-600">Admin Approval Pending</span></p>                             </div>                             <Button variant="outline">Request New Fine-Tuning</Button>                         </div>                     </CardContent>                 </Card>             </section>         </main>     </div>   ); }      ================================================ FILE: src/components/aclis/preliminary-summary-card.tsx ================================================ "use client"; import { useState, useEffect } from 'react'; import { Bot, Pencil, RefreshCw } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'; import { generateSummaryAction } from '@/app/actions'; import type { GeneratePreliminarySummaryOutput } from '@/ai/flows/generate-preliminary-summary'; import { Skeleton } from '../ui/skeleton'; import { useToast } from '@/hooks/use-toast'; export function PreliminarySummaryCard() {   const [summary, setSummary] = useState<GeneratePreliminarySummaryOutput & { summary: string } | null>(null);   const [isLoading, setIsLoading] = useState(false);   const { toast } = useToast();   const handleGenerateSummary = async () => {     setIsLoading(true);     setSummary(null);     try {       const result = await generateSummaryAction({ patientHistory: '', chiefComplaint: '' });       setSummary(result as any);     } catch (error) {       console.error("Failed to generate summary:", error);       toast({         variant: "destructive",         title: "Error",         description: "Could not generate preliminary summary.",       });     } finally {       setIsLoading(false);     }   };   useEffect(() => {     handleGenerateSummary();   }, [])   return (     <Card>       <CardHeader>         <div className="flex justify-between items-start">             <div>                 <CardTitle>Preliminary Summary</CardTitle>                 <CardDescription>AI-generated overview. Last updated: Just now</CardDescription>             </div>             <div className="flex items-center gap-2">                 <Button variant="ghost" size="icon"><Pencil className="h-4 w-4" /><span className="sr-only">Edit</span></Button>                 <Button variant="default" size="sm" onClick={handleGenerateSummary} disabled={isLoading}>                     <RefreshCw className={`mr-2 h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />                     {summary ? 'Regenerate' : 'Generate'}                 </Button>             </div>         </div>       </CardHeader>       <CardContent>         {isLoading ? (             <div className="space-y-4">                 <Skeleton className="h-8 w-1/4" />                 <Skeleton className="h-20 w-full" />                 <Skeleton className="h-8 w-1/4" />                  <Skeleton className="h-12 w-full" />             </div>         ) : summary ? (           <Accordion type="multiple" defaultValue={['complaint', 'hpi']} className="w-full">             <AccordionItem value="complaint">               <AccordionTrigger>Chief Complaint</AccordionTrigger>               <AccordionContent className="text-base">{summary.summary.split('\n\n')[0]}</AccordionContent>             </AccordionItem>             <AccordionItem value="hpi">               <AccordionTrigger>History of Present Illness</AccordionTrigger>               <AccordionContent className="text-base whitespace-pre-wrap">{summary.summary.split('\n\n').slice(1).join('\n\n')}</AccordionContent>             </AccordionItem>           </Accordion>         ) : (           <div className="text-center text-muted-foreground py-10">             <Bot className="mx-auto h-12 w-12" />             <p className="mt-2">Click "Generate" to create a preliminary summary.</p>           </div>         )}       </CardContent>       {summary && !isLoading && (         <CardFooter className="text-xs text-muted-foreground justify-between">           <span>Source: {summary.source}</span>           <span>QA Rounds: {summary.qaRounds}</span>           <span>Confidence: {summary.confidence}%</span>         </CardFooter>       )}     </Card>   ); } ================================================ FILE: src/components/aclis/priority-alerts-card.tsx ================================================ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { AlertTriangle, Siren, Syringe } from "lucide-react"; import { Button } from "../ui/button"; const alerts = [     {         icon: AlertTriangle,         iconClass: "text-destructive",         title: "SpO₂ Drop Detected",         time: "2 min ago",         description: "Emily White (Room 205) - SpO₂ dropped to 89%. ACLIS recommends immediate assessment.",         actions: [{ label: "Respond", variant: "destructive" }, { label: "Details", variant: "outline" }]     },     {         icon: Siren,         iconClass: "text-yellow-600",         title: "Critical Lab Result",         time: "15 min ago",         description: "John Doe (Room 201) - Potassium 6.2 mEq/L. Not yet acknowledged by physician.",         actions: [{ label: "Notify MD", variant: "warning" }, { label: "View Result", variant: "outline" }]     },     {         icon: Syringe,         iconClass: "text-primary",         title: "Device Alert",         time: "22 min ago",         description: "IV Pump #457 (Room 203) - Occlusion detected. Flow rate compromised.",         actions: [{ label: "Troubleshoot", variant: "default" }, { label: "Device Logs", variant: "outline" }]     }, ]; export function PriorityAlertsCard() {     return (         <Card>             <CardHeader className="bg-destructive/5">                 <CardTitle>Priority Alerts (3)</CardTitle>                 <CardDescription>Requires immediate attention</CardDescription>             </CardHeader>             <CardContent className="p-0">                 <div className="divide-y">                     {alerts.map((alert, i) => (                         <div key={i} className="p-4 space-y-2">                             <div className="flex items-start gap-3">                                 <alert.icon className={`h-5 w-5 mt-0.5 flex-shrink-0 ${alert.iconClass}`} />                                 <div className="flex-1">                                     <div className="flex justify-between">                                         <h3 className="text-sm font-semibold">{alert.title}</h3>                                         <span className="text-xs text-muted-foreground">{alert.time}</span>                                     </div>                                     <p className="text-sm text-muted-foreground mt-1">{alert.description}</p>                                     <div className="mt-2 flex space-x-2">                                         {alert.actions.map(action => (                                             <Button key={action.label} size="sm" variant={action.variant as any}>{action.label}</Button>                                         ))}                                     </div>                                 </div>                             </div>                         </div>                     ))}                 </div>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/quick-actions-card.tsx ================================================ import { Bell, CalendarCheck, FileText, HelpCircle, Phone, Syringe } from 'lucide-react'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; const actions = [   { icon: Phone, label: "Call Nurse" },   { icon: CalendarCheck, label: "Appointments" },   { icon: FileText, label: "Records" },   { icon: Syringe, label: "Medications" },   { icon: Bell, label: "Emergency", variant: "destructive" },   { icon: HelpCircle, label: "Help" }, ]; export function QuickActionsCard() {   return (     <Card>       <CardHeader>         <CardTitle>Quick Actions</CardTitle>       </CardHeader>       <CardContent className="grid grid-cols-2 gap-3">         {actions.map(action => (           <Button key={action.label} variant={action.variant as any || "outline"} className="flex flex-col h-auto py-4">             <action.icon className="h-6 w-6 mb-2" />             <span>{action.label}</span>           </Button>         ))}       </CardContent>     </Card>   ); } ================================================ FILE: src/components/aclis/suggested-imaging-card.tsx ================================================ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import Image from "next/image"; export function SuggestedImagingCard() {     return (         <Card>             <CardHeader>                 <CardTitle>Suggested Imaging</CardTitle>                 <CardDescription>Recommended devices & protocols.</CardDescription>             </CardHeader>             <CardContent className="space-y-4">                  <div>                     <h3 className="font-semibold mb-2 text-sm">Suggested Imaging Devices</h3>                     <div className="space-y-2">                         <div className="flex items-center p-2 bg-muted/50 rounded-md">                             <Image src="https://placehold.co/40x40.png" data-ai-hint="CT scanner" alt="CT scanner" className="rounded-sm" width={40} height={40} />                             <div className="ml-3">                                 <div className="text-sm font-medium">Low-Dose CT Scanner</div>                                 <div className="text-xs text-muted-foreground">For pulmonary nodule follow-up</div>                             </div>                         </div>                         <div className="flex items-center p-2 bg-muted/50 rounded-md">                            <Image src="https://placehold.co/40x40.png" data-ai-hint="PET scanner" alt="PET scanner" className="rounded-sm" width={40} height={40} />                             <div className="ml-3">                                 <div className="text-sm font-medium">PET/CT</div>                                 <div className="text-xs text-muted-foreground">Metastasis evaluation if malignancy suspected</div>                             </div>                         </div>                     </div>                 </div>                 <div>                     <h3 className="font-semibold mb-2 text-sm">Recommended Protocols</h3>                     <div className="space-y-2">                         <div className="p-3 bg-muted/50 rounded-md border">                             <div className="text-sm font-medium">Lung-RADS 1.1</div>                             <div className="text-xs text-muted-foreground">Standardized reporting for lung cancer screening CT</div>                         </div>                         <div className="p-3 bg-muted/50 rounded-md border">                             <div className="text-sm font-medium">LI-RADS v2018</div>                             <div className="text-xs text-muted-foreground">Liver imaging reporting and data system</div>                         </div>                     </div>                 </div>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/suggested-tests-card.tsx ================================================ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "../ui/button"; import Image from 'next/image'; export function SuggestedTestsCard() {     return (         <Card>             <CardHeader>                 <CardTitle>Suggested Lab Tests</CardTitle>                 <CardDescription>AI-recommended diagnostic tests.</CardDescription>             </CardHeader>             <CardContent className="space-y-3">                 <div className="p-3 bg-muted/50 rounded-md border">                     <div className="flex items-center">                         <Image src="https://placehold.co/40x40.png" data-ai-hint="lab diagnostics" className="rounded-sm" width={40} height={40} alt="Quest Diagnostics"/>                         <div className="ml-3">                             <div className="text-sm font-medium">Quest Diagnostics</div>                             <div className="text-xs text-muted-foreground">Comprehensive Metabolic Panel</div>                         </div>                     </div>                     <div className="mt-2 flex justify-between items-center">                         <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">In-Network</span>                         <Button size="sm" variant="outline">Order Now</Button>                     </div>                 </div>                 <div className="p-3 bg-muted/50 rounded-md border">                     <div className="flex items-center">                          <Image src="https://placehold.co/40x40.png" data-ai-hint="laboratory" className="rounded-sm" width={40} height={40} alt="LabCorp"/>                         <div className="ml-3">                             <div className="text-sm font-medium">LabCorp</div>                             <div className="text-xs text-muted-foreground">EGFR Mutation Analysis</div>                         </div>                     </div>                     <div className="mt-2 flex justify-between items-center">                         <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">In-Network</span>                          <Button size="sm" variant="outline">Order Now</Button>                     </div>                 </div>                  <div className="p-3 bg-muted/50 rounded-md border">                     <div className="flex items-center">                          <Image src="https://placehold.co/40x40.png" data-ai-hint="clinic" className="rounded-sm" width={40} height={40} alt="Mayo Clinic Labs"/>                         <div className="ml-3">                             <div className="text-sm font-medium">Mayo Clinic Labs</div>                             <div className="text-xs text-muted-foreground">Advanced Lipid Panel</div>                         </div>                     </div>                     <div className="mt-2 flex justify-between items-center">                         <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Out-of-Network</span>                          <Button size="sm" variant="outline">Order Now</Button>                     </div>                 </div>             </CardContent>         </Card>     ) } ================================================ FILE: src/components/aclis/suggested-therapies-card.tsx ================================================ import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { Switch } from "@/components/ui/switch"; import { Label } from "@/components/ui/label"; import { Badge } from "@/components/ui/badge"; import { Send, TestTube } from "lucide-react"; const therapies = [     { name: "Pembrolizumab + Chemo", type: "Therapy", match: 95, status: "Standard of Care" },     { name: "KEYNOTE-789 Trial", type: "Phase III Trial", match: 88, status: "Recruiting" },     { name: "Sotorasib Monotherapy", type: "Therapy", match: 82, status: "Second Line" },     { name: "Adagrasib + Cetuximab Trial", type: "Phase II Trial", match: 75, status: "Recruiting" }, ]; export function SuggestedTherapiesCard() {   return (     <Card>         <CardHeader>             <CardTitle>Suggested Therapies & Trials</CardTitle>             <CardDescription>Ranked list of therapies and clinical trials based on patient profile.</CardDescription>         </CardHeader>         <CardContent>             <div className="flex items-center space-x-4 mb-4">                 <div className="flex items-center space-x-2">                     <Switch id="phase-3-only" />                     <Label htmlFor="phase-3-only">Phase III Only</Label>                 </div>                 <div className="flex items-center space-x-2">                     <Switch id="local-only" />                     <Label htmlFor="local-only">Local Trials Only</Label>                 </div>             </div>             <div className="border rounded-lg">                  <Table>                     <TableHeader>                         <TableRow>                             <TableHead>Suggestion</TableHead>                             <TableHead>Type</TableHead>                             <TableHead>Match</TableHead>                             <TableHead>Status</TableHead>                             <TableHead className="text-right">Actions</TableHead>                         </TableRow>                     </TableHeader>                     <TableBody>                         {therapies.map(t => (                             <TableRow key={t.name}>                                 <TableCell className="font-medium">{t.name}</TableCell>                                 <TableCell>                                     <Badge variant={t.type.includes('Trial') ? 'default' : 'secondary'}>{t.type}</Badge>                                 </TableCell>                                 <TableCell>{t.match}%</TableCell>                                 <TableCell>{t.status}</TableCell>                                 <TableCell className="text-right">                                     <Button variant="ghost" size="sm" className="mr-1">                                         <TestTube className="h-4 w-4 mr-1" />                                         Order Consent                                     </Button>                                     <Button variant="ghost" size="sm">                                         <Send className="h-4 w-4 mr-1" />                                         Add to Plan                                     </Button>                                 </TableCell>                             </TableRow>                         ))}                     </TableBody>                 </Table>             </div>         </CardContent>     </Card>   ); } ================================================ FILE: src/components/aclis/system-health-card.tsx ================================================ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Progress } from "@/components/ui/progress"; import { Server, Database, Bot, Router } from "lucide-react"; const services = [     { icon: Server, name: 'API Services', status: '24/24 Online', value: 100, color: 'bg-green-500' },     { icon: Database, name: 'Database', status: 'Normal', value: 78, color: 'bg-green-500' },     { icon: Bot, name: 'AI Models', status: '18/20 Active', value: 90, color: 'bg-green-500' },     { icon: Router, name: 'Medical Devices', status: '142/150 Online', value: 95, color: 'bg-yellow-500' }, ]; export function SystemHealthCard() {     return (         <Card>             <CardHeader>                 <CardTitle>System Health Dashboard</CardTitle>                 <CardDescription>Last updated: Just now</CardDescription>             </CardHeader>             <CardContent className="space-y-4">                 <div>                     <div className="flex justify-between items-center mb-1">                         <span className="text-sm font-medium">Overall System Status</span>                         <Badge variant="success">Operational</Badge>                     </div>                     <Progress value={92} className="h-2" />                 </div>                 <div className="grid grid-cols-2 gap-4">                     {services.map(service => (                         <div key={service.name} className="bg-muted/50 p-3 rounded-lg">                             <div className="flex items-center gap-2 mb-2">                                 <service.icon className="h-4 w-4 text-primary" />                                 <h3 className="text-sm font-semibold">{service.name}</h3>                             </div>                             <Progress value={service.value} className={`h-1.5 [&>div]:${service.color}`} />                             <p className="text-xs text-muted-foreground mt-1.5">{service.status}</p>                         </div>                     ))}                 </div>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/tasks-card.tsx ================================================ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; import { Label } from "@/components/ui/label"; const tasks = [     { id: "task1", label: "Medication Administration", description: "Lisinopril 10mg for John Doe (Room 201)", due: "Due in 15 min", priority: "high" },     { id: "task2", label: "Vital Signs Check", description: "Emily White (Room 205) - Q1H monitoring", due: "Due in 30 min", priority: "medium" },     { id: "task3", label: "Dressing Change", description: "Jane Smith (Room 203) - CABG incision site", due: "Due in 1 hr", priority: "low" },     { id: "task4", label: "Patient Education", description: "Diabetes management for Emily White", due: "Due by 2:00 PM", priority: "low" },     { id: "task5", label: "Documentation", description: "Complete intake for new admission", due: "Due by shift end", priority: "low" }, ]; const getPriorityColor = (priority: string) => {     switch (priority) {         case 'high': return 'text-destructive';         case 'medium': return 'text-yellow-600';         default: return 'text-primary';     } } export function TasksCard() {     return (         <Card>             <CardHeader>                 <CardTitle>Tasks (5)</CardTitle>                 <CardDescription>Sorted by priority and due time</CardDescription>             </CardHeader>             <CardContent className="p-0">                 <div className="divide-y">                     {tasks.map(task => (                         <div key={task.id} className="p-4 flex items-start justify-between">                             <div className="flex items-start space-x-3">                                 <Checkbox id={task.id} className="mt-1" />                                 <div className="grid gap-0.5">                                     <Label htmlFor={task.id} className="font-medium">{task.label}</Label>                                     <p className="text-sm text-muted-foreground">{task.description}</p>                                 </div>                             </div>                             <div className={`text-xs font-semibold whitespace-nowrap ${getPriorityColor(task.priority)}`}>{task.due}</div>                         </div>                     ))}                 </div>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/test-results-card.tsx ================================================ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; export function TestResultsCard() {   return (     <Card>       <CardHeader>         <CardTitle>Recent Test Results</CardTitle>         <CardDescription>Showing last 3 results</CardDescription>       </CardHeader>       <CardContent className="space-y-4">         <div>           <div className="flex justify-between items-center mb-2">             <h3 className="font-semibold">Chest X-ray</h3>             <Badge variant="outline">Today</Badge>           </div>           <p className="text-sm text-muted-foreground">Pulmonary nodule detected in right upper lobe. No evidence of pneumothorax or pleural effusion.</p>         </div>         <div>           <div className="flex justify-between items-center mb-2">             <h3 className="font-semibold">Blood Work</h3>             <Badge variant="outline">Yesterday</Badge>           </div>           <div className="grid grid-cols-3 gap-2 text-xs">             <div className="bg-muted/50 p-1 rounded text-center">               <div>WBC</div>               <div className="font-semibold">8.2</div>             </div>             <div className="bg-muted/50 p-1 rounded text-center">               <div>Hgb</div>               <div className="font-semibold">14.2</div>             </div>             <div className="bg-red-500/10 text-destructive p-1 rounded text-center">               <div>HbA1c</div>               <div className="font-semibold">6.8%</div>             </div>           </div>         </div>         <div>           <div className="flex justify-between items-center mb-2">             <h3 className="font-semibold">Genetic Testing</h3>             <Badge variant="outline">July 17</Badge>           </div>           <p className="text-sm text-muted-foreground">EGFR L858R mutation detected. TP53 R273H variant of uncertain significance.</p>         </div>         <Button variant="outline" className="w-full">View All Results</Button>       </CardContent>     </Card>   ); } ================================================ FILE: src/components/aclis/ward-overview-card.tsx ================================================ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; const beds = [     { room: 201, patient: "John Doe", status: "occupied" },     { room: 202, patient: "Available", status: "available" },     { room: 203, patient: "Jane Smith", status: "occupied" },     { room: 204, patient: "Discharge Pending", status: "pending" },     { room: 205, patient: "Emily White", status: "occupied" },     { room: 206, patient: "Available", status: "available" }, ]; const getStatusClasses = (status: string) => {     switch (status) {         case 'occupied': return 'bg-destructive/10 border-destructive';         case 'available': return 'bg-green-500/10 border-green-500';         case 'pending': return 'bg-yellow-500/10 border-yellow-500';         default: return 'bg-muted';     } }; const getStatusColor = (status: string) => {     const patientStatus = ['occupied', 'pending'].includes(status) ? 'Alert' : 'Stable'; // Mocking this     switch (patientStatus) {         case 'Alert': return 'bg-destructive';         case 'Monitoring': return 'bg-yellow-500';         default: return 'bg-green-500';     } } export function WardOverviewCard() {     return (         <Card>             <CardHeader>                 <CardTitle>Ward 4B Overview</CardTitle>                 <CardDescription>12 beds | 9 occupied | 3 available</CardDescription>             </CardHeader>             <CardContent>                 <div className="grid grid-cols-3 gap-3">                     {beds.map(bed => (                         <div key={bed.room} className={`border rounded-lg p-2 text-center cursor-pointer ${getStatusClasses(bed.status)}`}>                             <div className="text-sm font-semibold">{bed.room}</div>                             <div className="text-xs truncate">{bed.patient}</div>                             <div className={`h-1 w-full ${getStatusColor(bed.status)} rounded-full mt-1`}></div>                         </div>                     ))}                 </div>                  <div className="mt-4 flex justify-between text-xs text-muted-foreground">                     <div className="flex items-center gap-1.5">                         <div className="w-2 h-2 rounded-full bg-destructive" /> Occupied                     </div>                      <div className="flex items-center gap-1.5">                         <div className="w-2 h-2 rounded-full bg-yellow-500" /> Pending                     </div>                      <div className="flex items-center gap-1.5">                         <div className="w-2 h-2 rounded-full bg-green-500" /> Available                     </div>                 </div>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/aclis/workflow-automation-card.tsx ================================================ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "../ui/button"; import { Bot } from "lucide-react"; const workflows = [     { title: "Medication Reconciliation", description: "Pending for Emily White", color: "primary", buttonLabel: "Complete" },     { title: "Fall Risk Assessment", description: "Due for John Doe (Score: 45)", color: "green", buttonLabel: "Assess" },     { title: "Discharge Planning", description: "Initiate for Jane Smith", color: "purple", buttonLabel: "Start" }, ]; const getColorClasses = (color: string) => {     switch (color) {         case 'green': return { bg: 'bg-green-500/10', border: 'border-green-500', text: 'text-green-800', btn: 'bg-green-600 hover:bg-green-700' };         case 'purple': return { bg: 'bg-purple-500/10', border: 'border-purple-500', text: 'text-purple-800', btn: 'bg-purple-600 hover:bg-purple-700' };         default: return { bg: 'bg-primary/10', border: 'border-primary', text: 'text-primary', btn: 'bg-primary hover:bg-primary/90' };     } } export function WorkflowAutomationCard() {     return (         <Card>             <CardHeader>                 <CardTitle>Workflow Automation</CardTitle>                 <CardDescription>ACLIS Nursing Copilot</CardDescription>             </CardHeader>             <CardContent className="space-y-3">                 {workflows.map(wf => {                     const colors = getColorClasses(wf.color);                     return (                         <div key={wf.title} className={`p-3 rounded-lg border ${colors.bg} ${colors.border}`}>                             <div className="flex items-center justify-between">                                 <div>                                     <h3 className={`text-sm font-semibold ${colors.text}`}>{wf.title}</h3>                                     <p className={`text-xs ${colors.text}/80 mt-1`}>{wf.description}</p>                                 </div>                                 <Button size="sm" className={colors.btn}>{wf.buttonLabel}</Button>                             </div>                         </div>                     );                 })}                  <div className="pt-2 text-center">                     <Button variant="ghost" size="sm" className="text-primary">                         <Bot className="mr-2 h-4 w-4" />                         Launch Nursing Copilot                     </Button>                 </div>             </CardContent>         </Card>     ); } ================================================ FILE: src/components/ui/accordion.tsx ================================================ "use client" import * as React from "react" import * as AccordionPrimitive from "@radix-ui/react-accordion" import { ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" const Accordion = AccordionPrimitive.Root const AccordionItem = React.forwardRef<   React.ElementRef<typeof AccordionPrimitive.Item>,   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> >(({ className, ...props }, ref) => (   <AccordionPrimitive.Item     ref={ref}     className={cn("border-b", className)}     {...props}   /> )) AccordionItem.displayName = "AccordionItem" const AccordionTrigger = React.forwardRef<   React.ElementRef<typeof AccordionPrimitive.Trigger>,   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> >(({ className, children, ...props }, ref) => (   <AccordionPrimitive.Header className="flex">     <AccordionPrimitive.Trigger       ref={ref}       className={cn(         "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",         className       )}       {...props}     >       {children}       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />     </AccordionPrimitive.Trigger>   </AccordionPrimitive.Header> )) AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName const AccordionContent = React.forwardRef<   React.ElementRef<typeof AccordionPrimitive.Content>,   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> >(({ className, children, ...props }, ref) => (   <AccordionPrimitive.Content     ref={ref}     className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"     {...props}   >     <div className={cn("pb-4 pt-0", className)}>{children}</div>   </AccordionPrimitive.Content> )) AccordionContent.displayName = AccordionPrimitive.Content.displayName export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } ================================================ FILE: src/components/ui/alert-dialog.tsx ================================================ "use client" import * as React from "react" import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" const AlertDialog = AlertDialogPrimitive.Root const AlertDialogTrigger = AlertDialogPrimitive.Trigger const AlertDialogPortal = AlertDialogPrimitive.Portal const AlertDialogOverlay = React.forwardRef<   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> >(({ className, ...props }, ref) => (   <AlertDialogPrimitive.Overlay     className={cn(       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",       className     )}     {...props}     ref={ref}   /> )) AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName const AlertDialogContent = React.forwardRef<   React.ElementRef<typeof AlertDialogPrimitive.Content>,   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> >(({ className, ...props }, ref) => (   <AlertDialogPortal>     <AlertDialogOverlay />     <AlertDialogPrimitive.Content       ref={ref}       className={cn(         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",         className       )}       {...props}     />   </AlertDialogPortal> )) AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName const AlertDialogHeader = ({   className,   ...props }: React.HTMLAttributes<HTMLDivElement>) => (   <div     className={cn(       "flex flex-col space-y-2 text-center sm:text-left",       className     )}     {...props}   /> ) AlertDialogHeader.displayName = "AlertDialogHeader" const AlertDialogFooter = ({   className,   ...props }: React.HTMLAttributes<HTMLDivElement>) => (   <div     className={cn(       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",       className     )}     {...props}   /> ) AlertDialogFooter.displayName = "AlertDialogFooter" const AlertDialogTitle = React.forwardRef<   React.ElementRef<typeof AlertDialogPrimitive.Title>,   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> >(({ className, ...props }, ref) => (   <AlertDialogPrimitive.Title     ref={ref}     className={cn("text-lg font-semibold", className)}     {...props}   /> )) AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName const AlertDialogDescription = React.forwardRef<   React.ElementRef<typeof AlertDialogPrimitive.Description>,   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> >(({ className, ...props }, ref) => (   <AlertDialogPrimitive.Description     ref={ref}     className={cn("text-sm text-muted-foreground", className)}     {...props}   /> )) AlertDialogDescription.displayName =   AlertDialogPrimitive.Description.displayName const AlertDialogAction = React.forwardRef<   React.ElementRef<typeof AlertDialogPrimitive.Action>,   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> >(({ className, ...props }, ref) => (   <AlertDialogPrimitive.Action     ref={ref}     className={cn(buttonVariants(), className)}     {...props}   /> )) AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName const AlertDialogCancel = React.forwardRef<   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> >(({ className, ...props }, ref) => (   <AlertDialogPrimitive.Cancel     ref={ref}     className={cn(       buttonVariants({ variant: "outline" }),       "mt-2 sm:mt-0",       className     )}     {...props}   /> )) AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName export {   AlertDialog,   AlertDialogPortal,   AlertDialogOverlay,   AlertDialogTrigger,   AlertDialogContent,   AlertDialogHeader,   AlertDialogFooter,   AlertDialogTitle,   AlertDialogDescription,   AlertDialogAction,   AlertDialogCancel, } ================================================ FILE: src/components/ui/alert.tsx ================================================ import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva(   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",   {     variants: {       variant: {         default: "bg-background text-foreground",         destructive:           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",       },     },     defaultVariants: {       variant: "default",     },   } ) const Alert = React.forwardRef<   HTMLDivElement,   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> >(({ className, variant, ...props }, ref) => (   <div     ref={ref}     role="alert"     className={cn(alertVariants({ variant }), className)}     {...props}   /> )) Alert.displayName = "Alert" const AlertTitle = React.forwardRef<   HTMLParagraphElement,   React.HTMLAttributes<HTMLHeadingElement> >(({ className, ...props }, ref) => (   <h5     ref={ref}     className={cn("mb-1 font-medium leading-none tracking-tight", className)}     {...props}   /> )) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef<   HTMLParagraphElement,   React.HTMLAttributes<HTMLParagraphElement> >(({ className, ...props }, ref) => (   <div     ref={ref}     className={cn("text-sm [&_p]:leading-relaxed", className)}     {...props}   /> )) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription } ================================================ FILE: src/components/ui/avatar.tsx ================================================ "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef<   React.ElementRef<typeof AvatarPrimitive.Root>,   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> >(({ className, ...props }, ref) => (   <AvatarPrimitive.Root     ref={ref}     className={cn(       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",       className     )}     {...props}   /> )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef<   React.ElementRef<typeof AvatarPrimitive.Image>,   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> >(({ className, ...props }, ref) => (   <AvatarPrimitive.Image     ref={ref}     className={cn("aspect-square h-full w-full", className)}     {...props}   /> )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef<   React.ElementRef<typeof AvatarPrimitive.Fallback>,   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> >(({ className, ...props }, ref) => (   <AvatarPrimitive.Fallback     ref={ref}     className={cn(       "flex h-full w-full items-center justify-center rounded-full bg-muted",       className     )}     {...props}   /> )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } ================================================ FILE: src/components/ui/badge.tsx ================================================ import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva(   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",   {     variants: {       variant: {         default:           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",         secondary:           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",         destructive:           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",         outline: "text-foreground",         success: "border-transparent bg-green-500 text-white hover:bg-green-500/80",         warning: "border-transparent bg-yellow-500 text-white hover:bg-yellow-500/80",       },     },     defaultVariants: {       variant: "default",     },   } ) export interface BadgeProps   extends React.HTMLAttributes<HTMLDivElement>,     VariantProps<typeof badgeVariants> {} function Badge({ className, variant, ...props }: BadgeProps) {   return (     <div className={cn(badgeVariants({ variant }), className)} {...props} />   ) } export { Badge, badgeVariants } ================================================ FILE: src/components/ui/button.tsx ================================================ import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva(   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",   {     variants: {       variant: {         default: "bg-primary text-primary-foreground hover:bg-primary/90",         destructive:           "bg-destructive text-destructive-foreground hover:bg-destructive/90",         outline:           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",         secondary:           "bg-secondary text-secondary-foreground hover:bg-secondary/80",         ghost: "hover:bg-accent hover:text-accent-foreground",         link: "text-primary underline-offset-4 hover:underline",         warning: "bg-yellow-500 text-white hover:bg-yellow-500/90",       },       size: {         default: "h-10 px-4 py-2",         sm: "h-9 rounded-md px-3",         lg: "h-11 rounded-md px-8",         icon: "h-10 w-10",       },     },     defaultVariants: {       variant: "default",       size: "default",     },   } ) export interface ButtonProps   extends React.ButtonHTMLAttributes<HTMLButtonElement>,     VariantProps<typeof buttonVariants> {   asChild?: boolean } const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(   ({ className, variant, size, asChild = false, ...props }, ref) => {     const Comp = asChild ? Slot : "button"     return (       <Comp         className={cn(buttonVariants({ variant, size, className }))}         ref={ref}         {...props}       />     )   } ) Button.displayName = "Button" export { Button, buttonVariants } ================================================ FILE: src/components/ui/calendar.tsx ================================================ "use client" import * as React from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { DayPicker } from "react-day-picker" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" export type CalendarProps = React.ComponentProps<typeof DayPicker> function Calendar({   className,   classNames,   showOutsideDays = true,   ...props }: CalendarProps) {   return (     <DayPicker       showOutsideDays={showOutsideDays}       className={cn("p-3", className)}       classNames={{         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",         month: "space-y-4",         caption: "flex justify-center pt-1 relative items-center",         caption_label: "text-sm font-medium",         nav: "space-x-1 flex items-center",         nav_button: cn(           buttonVariants({ variant: "outline" }),           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"         ),         nav_button_previous: "absolute left-1",         nav_button_next: "absolute right-1",         table: "w-full border-collapse space-y-1",         head_row: "flex",         head_cell:           "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",         row: "flex w-full mt-2",         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",         day: cn(           buttonVariants({ variant: "ghost" }),           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"         ),         day_range_end: "day-range-end",         day_selected:           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",         day_today: "bg-accent text-accent-foreground",         day_outside:           "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",         day_disabled: "text-muted-foreground opacity-50",         day_range_middle:           "aria-selected:bg-accent aria-selected:text-accent-foreground",         day_hidden: "invisible",         ...classNames,       }}       components={{         IconLeft: ({ className, ...props }) => (           <ChevronLeft className={cn("h-4 w-4", className)} {...props} />         ),         IconRight: ({ className, ...props }) => (           <ChevronRight className={cn("h-4 w-4", className)} {...props} />         ),       }}       {...props}     />   ) } Calendar.displayName = "Calendar" export { Calendar } ================================================ FILE: src/components/ui/card.tsx ================================================ import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef<   HTMLDivElement,   React.HTMLAttributes<HTMLDivElement> >(({ className, ...props }, ref) => (   <div     ref={ref}     className={cn(       "rounded-lg border bg-card text-card-foreground shadow-sm",       className     )}     {...props}   /> )) Card.displayName = "Card" const CardHeader = React.forwardRef<   HTMLDivElement,   React.HTMLAttributes<HTMLDivElement> >(({ className, ...props }, ref) => (   <div     ref={ref}     className={cn("flex flex-col space-y-1.5 p-6", className)}     {...props}   /> )) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef<   HTMLParagraphElement,   React.HTMLAttributes<HTMLHeadingElement> >(({ className, ...props }, ref) => (   <h3     ref={ref}     className={cn(       "text-2xl font-semibold leading-none tracking-tight",       className     )}     {...props}   /> )) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef<   HTMLParagraphElement,   React.HTMLAttributes<HTMLParagraphElement> >(({ className, ...props }, ref) => (   <p     ref={ref}     className={cn("text-sm text-muted-foreground", className)}     {...props}   /> )) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef<   HTMLDivElement,   React.HTMLAttributes<HTMLDivElement> >(({ className, ...props }, ref) => (   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} /> )) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef<   HTMLDivElement,   React.HTMLAttributes<HTMLDivElement> >(({ className, ...props }, ref) => (   <div     ref={ref}     className={cn("flex items-center p-6 pt-0", className)}     {...props}   /> )) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } ================================================ FILE: src/components/ui/carousel.tsx ================================================ "use client" import * as React from "react" import useEmblaCarousel, {   type UseEmblaCarouselType, } from "embla-carousel-react" import { ArrowLeft, ArrowRight } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" type CarouselApi = UseEmblaCarouselType[1] type UseCarouselParameters = Parameters<typeof useEmblaCarousel> type CarouselOptions = UseCarouselParameters[0] type CarouselPlugin = UseCarouselParameters[1] type CarouselProps = {   opts?: CarouselOptions   plugins?: CarouselPlugin   orientation?: "horizontal" | "vertical"   setApi?: (api: CarouselApi) => void } type CarouselContextProps = {   carouselRef: ReturnType<typeof useEmblaCarousel>[0]   api: ReturnType<typeof useEmblaCarousel>[1]   scrollPrev: () => void   scrollNext: () => void   canScrollPrev: boolean   canScrollNext: boolean } & CarouselProps const CarouselContext = React.createContext<CarouselContextProps | null>(null) function useCarousel() {   const context = React.useContext(CarouselContext)   if (!context) {     throw new Error("useCarousel must be used within a <Carousel />")   }   return context } const Carousel = React.forwardRef<   HTMLDivElement,   React.HTMLAttributes<HTMLDivElement> & CarouselProps >(   (     {       orientation = "horizontal",       opts,       setApi,       plugins,       className,       children,       ...props     },     ref   ) => {     const [carouselRef, api] = useEmblaCarousel(       {         ...opts,         axis: orientation === "horizontal" ? "x" : "y",       },       plugins     )     const [canScrollPrev, setCanScrollPrev] = React.useState(false)     const [canScrollNext, setCanScrollNext] = React.useState(false)     const onSelect = React.useCallback((api: CarouselApi) => {       if (!api) {         return       }       setCanScrollPrev(api.canScrollPrev())       setCanScrollNext(api.canScrollNext())     }, [])     const scrollPrev = React.useCallback(() => {       api?.scrollPrev()     }, [api])     const scrollNext = React.useCallback(() => {       api?.scrollNext()     }, [api])     const handleKeyDown = React.useCallback(       (event: React.KeyboardEvent<HTMLDivElement>) => {         if (event.key === "ArrowLeft") {           event.preventDefault()           scrollPrev()         } else if (event.key === "ArrowRight") {           event.preventDefault()           scrollNext()         }       },       [scrollPrev, scrollNext]     )     React.useEffect(() => {       if (!api || !setApi) {         return       }       setApi(api)     }, [api, setApi])     React.useEffect(() => {       if (!api) {         return       }       onSelect(api)       api.on("reInit", onSelect)       api.on("select", onSelect)       return () => {         api?.off("select", onSelect)       }     }, [api, onSelect])     return (       <CarouselContext.Provider         value={{           carouselRef,           api: api,           opts,           orientation:             orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),           scrollPrev,           scrollNext,           canScrollPrev,           canScrollNext,         }}       >         <div           ref={ref}           onKeyDownCapture={handleKeyDown}           className={cn("relative", className)}           role="region"           aria-roledescription="carousel"           {...props}         >           {children}         </div>       </CarouselContext.Provider>     )   } ) Carousel.displayName = "Carousel" const CarouselContent = React.forwardRef<   HTMLDivElement,   React.HTMLAttributes<HTMLDivElement> >(({ className, ...props }, ref) => {   const { carouselRef, orientation } = useCarousel()   return (     <div ref={carouselRef} className="overflow-hidden">       <div         ref={ref}         className={cn(           "flex",           orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",           className         )}         {...props}       />     </div>   ) }) CarouselContent.displayName = "CarouselContent" const CarouselItem = React.forwardRef<   HTMLDivElement,   React.HTMLAttributes<HTMLDivElement> >(({ className, ...props }, ref) => {   const { orientation } = useCarousel()   return (     <div       ref={ref}       role="group"       aria-roledescription="slide"       className={cn(         "min-w-0 shrink-0 grow-0 basis-full",         orientation === "horizontal" ? "pl-4" : "pt-4",         className       )}       {...props}     />   ) }) CarouselItem.displayName = "CarouselItem" const CarouselPrevious = React.forwardRef<   HTMLButtonElement,   React.ComponentProps<typeof Button> >(({ className, variant = "outline", size = "icon", ...props }, ref) => {   const { orientation, scrollPrev, canScrollPrev } = useCarousel()   return (     <Button       ref={ref}       variant={variant}       size={size}       className={cn(         "absolute  h-8 w-8 rounded-full",         orientation === "horizontal"           ? "-left-12 top-1/2 -translate-y-1/2"           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",         className       )}       disabled={!canScrollPrev}       onClick={scrollPrev}       {...props}     >       <ArrowLeft className="h-4 w-4" />       <span className="sr-only">Previous slide</span>     </Button>   ) }) CarouselPrevious.displayName = "CarouselPrevious" const CarouselNext = React.forwardRef<   HTMLButtonElement,   React.ComponentProps<typeof Button> >(({ className, variant = "outline", size = "icon", ...props }, ref) => {   const { orientation, scrollNext, canScrollNext } = useCarousel()   return (     <Button       ref={ref}       variant={variant}       size={size}       className={cn(         "absolute h-8 w-8 rounded-full",         orientation === "horizontal"           ? "-right-12 top-1/2 -translate-y-1/2"           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",         className       )}       disabled={!canScrollNext}       onClick={scrollNext}       {...props}     >       <ArrowRight className="h-4 w-4" />       <span className="sr-only">Next slide</span>     </Button>   ) }) CarouselNext.displayName = "CarouselNext" export {   type CarouselApi,   Carousel,   CarouselContent,   CarouselItem,   CarouselPrevious,   CarouselNext, } ================================================ FILE: src/components/ui/chart.tsx ================================================ "use client" import * as React from "react" import * as RechartsPrimitive from "recharts" import { cn } from "@/lib/utils" // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const export type ChartConfig = {   [k in string]: {     label?: React.ReactNode     icon?: React.ComponentType   } & (     | { color?: string; theme?: never }     | { color?: never; theme: Record<keyof typeof THEMES, string> }   ) } type ChartContextProps = {   config: ChartConfig } const ChartContext = React.createContext<ChartContextProps | null>(null) function useChart() {   const context = React.useContext(ChartContext)   if (!context) {     throw new Error("useChart must be used within a <ChartContainer />")   }   return context } const ChartContainer = React.forwardRef<   HTMLDivElement,   React.ComponentProps<"div"> & {     config: ChartConfig     children: React.ComponentProps<       typeof RechartsPrimitive.ResponsiveContainer     >["children"]   } >(({ id, className, children, config, ...props }, ref) => {   const uniqueId = React.useId()   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`   return (     <ChartContext.Provider value={{ config }}>       <div         data-chart={chartId}         ref={ref}         className={cn(           "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",           className         )}         {...props}       >         <ChartStyle id={chartId} config={config} />         <RechartsPrimitive.ResponsiveContainer>           {children}         </RechartsPrimitive.ResponsiveContainer>       </div>     </ChartContext.Provider>   ) }) ChartContainer.displayName = "Chart" const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {   const colorConfig = Object.entries(config).filter(     ([, config]) => config.theme || config.color   )   if (!colorConfig.length) {     return null   }   return (     <style       dangerouslySetInnerHTML={{         __html: Object.entries(THEMES)           .map(             ([theme, prefix]) => ` ${prefix} [data-chart=${id}] { ${colorConfig   .map(([key, itemConfig]) => {     const color =       itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||       itemConfig.color     return color ? `  --color-${key}: ${color};` : null   })   .join("\n")} } `           )           .join("\n"),       }}     />   ) } const ChartTooltip = RechartsPrimitive.Tooltip const ChartTooltipContent = React.forwardRef<   HTMLDivElement,   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &     React.ComponentProps<"div"> & {       hideLabel?: boolean       hideIndicator?: boolean       indicator?: "line" | "dot" | "dashed"       nameKey?: string       labelKey?: string     } >(   (     {       active,       payload,       className,       indicator = "dot",       hideLabel = false,       hideIndicator = false,       label,       labelFormatter,       labelClassName,       formatter,       color,       nameKey,       labelKey,     },     ref   ) => {     const { config } = useChart()     const tooltipLabel = React.useMemo(() => {       if (hideLabel || !payload?.length) {         return null       }       const [item] = payload       const key = `${labelKey || item.dataKey || item.name || "value"}`       const itemConfig = getPayloadConfigFromPayload(config, item, key)       const value =         !labelKey && typeof label === "string"           ? config[label as keyof typeof config]?.label || label           : itemConfig?.label       if (labelFormatter) {         return (           <div className={cn("font-medium", labelClassName)}>             {labelFormatter(value, payload)}           </div>         )       }       if (!value) {         return null       }       return <div className={cn("font-medium", labelClassName)}>{value}</div>     }, [       label,       labelFormatter,       payload,       hideLabel,       labelClassName,       config,       labelKey,     ])     if (!active || !payload?.length) {       return null     }     const nestLabel = payload.length === 1 && indicator !== "dot"     return (       <div         ref={ref}         className={cn(           "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",           className         )}       >         {!nestLabel ? tooltipLabel : null}         <div className="grid gap-1.5">           {payload.map((item, index) => {             const key = `${nameKey || item.name || item.dataKey || "value"}`             const itemConfig = getPayloadConfigFromPayload(config, item, key)             const indicatorColor = color || item.payload.fill || item.color             return (               <div                 key={item.dataKey}                 className={cn(                   "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",                   indicator === "dot" && "items-center"                 )}               >                 {formatter && item?.value !== undefined && item.name ? (                   formatter(item.value, item.name, item, index, item.payload)                 ) : (                   <>                     {itemConfig?.icon ? (                       <itemConfig.icon />                     ) : (                       !hideIndicator && (                         <div                           className={cn(                             "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",                             {                               "h-2.5 w-2.5": indicator === "dot",                               "w-1": indicator === "line",                               "w-0 border-[1.5px] border-dashed bg-transparent":                                 indicator === "dashed",                               "my-0.5": nestLabel && indicator === "dashed",                             }                           )}                           style={                             {                               "--color-bg": indicatorColor,                               "--color-border": indicatorColor,                             } as React.CSSProperties                           }                         />                       )                     )}                     <div                       className={cn(                         "flex flex-1 justify-between leading-none",                         nestLabel ? "items-end" : "items-center"                       )}                     >                       <div className="grid gap-1.5">                         {nestLabel ? tooltipLabel : null}                         <span className="text-muted-foreground">                           {itemConfig?.label || item.name}                         </span>                       </div>                       {item.value && (                         <span className="font-mono font-medium tabular-nums text-foreground">                           {item.value.toLocaleString()}                         </span>                       )}                     </div>                   </>                 )}               </div>             )           })}         </div>       </div>     )   } ) ChartTooltipContent.displayName = "ChartTooltip" const ChartLegend = RechartsPrimitive.Legend const ChartLegendContent = React.forwardRef<   HTMLDivElement,   React.ComponentProps<"div"> &     Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {       hideIcon?: boolean       nameKey?: string     } >(   (     { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },     ref   ) => {     const { config } = useChart()     if (!payload?.length) {       return null     }     return (       <div         ref={ref}         className={cn(           "flex items-center justify-center gap-4",           verticalAlign === "top" ? "pb-3" : "pt-3",           className         )}       >         {payload.map((item) => {           const key = `${nameKey || item.dataKey || "value"}`           const itemConfig = getPayloadConfigFromPayload(config, item, key)           return (             <div               key={item.value}               className={cn(                 "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"               )}             >               {itemConfig?.icon && !hideIcon ? (                 <itemConfig.icon />               ) : (                 <div                   className="h-2 w-2 shrink-0 rounded-[2px]"                   style={{                     backgroundColor: item.color,                   }}                 />               )}               {itemConfig?.label}             </div>           )         })}       </div>     )   } ) ChartLegendContent.displayName = "ChartLegend" // Helper to extract item config from a payload. function getPayloadConfigFromPayload(   config: ChartConfig,   payload: unknown,   key: string ) {   if (typeof payload !== "object" || payload === null) {     return undefined   }   const payloadPayload =     "payload" in payload &&     typeof payload.payload === "object" &&     payload.payload !== null       ? payload.payload       : undefined   let configLabelKey: string = key   if (     key in payload &&     typeof payload[key as keyof typeof payload] === "string"   ) {     configLabelKey = payload[key as keyof typeof payload] as string   } else if (     payloadPayload &&     key in payloadPayload &&     typeof payloadPayload[key as keyof typeof payloadPayload] === "string"   ) {     configLabelKey = payloadPayload[       key as keyof typeof payloadPayload     ] as string   }   return configLabelKey in config     ? config[configLabelKey]     : config[key as keyof typeof config] } export {   ChartContainer,   ChartTooltip,   ChartTooltipContent,   ChartLegend,   ChartLegendContent,   ChartStyle, } ================================================ FILE: src/components/ui/checkbox.tsx ================================================ "use client" import * as React from "react" import * as CheckboxPrimitive from "@radix-ui/react-checkbox" import { Check } from "lucide-react" import { cn } from "@/lib/utils" const Checkbox = React.forwardRef<   React.ElementRef<typeof CheckboxPrimitive.Root>,   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> >(({ className, ...props }, ref) => (   <CheckboxPrimitive.Root     ref={ref}     className={cn(       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",       className     )}     {...props}   >     <CheckboxPrimitive.Indicator       className={cn("flex items-center justify-center text-current")}     >       <Check className="h-4 w-4" />     </CheckboxPrimitive.Indicator>   </CheckboxPrimitive.Root> )) Checkbox.displayName = CheckboxPrimitive.Root.displayName export { Checkbox } ================================================ FILE: src/components/ui/collapsible.tsx ================================================ "use client" import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" const Collapsible = CollapsiblePrimitive.Root const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent export { Collapsible, CollapsibleTrigger, CollapsibleContent } ================================================ FILE: src/components/ui/dialog.tsx ================================================ "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef<   React.ElementRef<typeof DialogPrimitive.Overlay>,   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> >(({ className, ...props }, ref) => (   <DialogPrimitive.Overlay     ref={ref}     className={cn(       "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",       className     )}     {...props}   /> )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef<   React.ElementRef<typeof DialogPrimitive.Content>,   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> >(({ className, children, ...props }, ref) => (   <DialogPortal>     <DialogOverlay />     <DialogPrimitive.Content       ref={ref}       className={cn(         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",         className       )}       {...props}     >       {children}       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">         <X className="h-4 w-4" />         <span className="sr-only">Close</span>       </DialogPrimitive.Close>     </DialogPrimitive.Content>   </DialogPortal> )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({   className,   ...props }: React.HTMLAttributes<HTMLDivElement>) => (   <div     className={cn(       "flex flex-col space-y-1.5 text-center sm:text-left",       className     )}     {...props}   /> ) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({   className,   ...props }: React.HTMLAttributes<HTMLDivElement>) => (   <div     className={cn(       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",       className     )}     {...props}   /> ) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef<   React.ElementRef<typeof DialogPrimitive.Title>,   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> >(({ className, ...props }, ref) => (   <DialogPrimitive.Title     ref={ref}     className={cn(       "text-lg font-semibold leading-none tracking-tight",       className     )}     {...props}   /> )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef<   React.ElementRef<typeof DialogPrimitive.Description>,   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> >(({ className, ...props }, ref) => (   <DialogPrimitive.Description     ref={ref}     className={cn("text-sm text-muted-foreground", className)}     {...props}   /> )) DialogDescription.displayName = DialogPrimitive.Description.displayName export {   Dialog,   DialogPortal,   DialogOverlay,   DialogClose,   DialogTrigger,   DialogContent,   DialogHeader,   DialogFooter,   DialogTitle,   DialogDescription, } ================================================ FILE: src/components/ui/dropdown-menu.tsx ================================================ "use client" import * as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import { Check, ChevronRight, Circle } from "lucide-react" import { cn } from "@/lib/utils" const DropdownMenu = DropdownMenuPrimitive.Root const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger const DropdownMenuGroup = DropdownMenuPrimitive.Group const DropdownMenuPortal = DropdownMenuPrimitive.Portal const DropdownMenuSub = DropdownMenuPrimitive.Sub const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup const DropdownMenuSubTrigger = React.forwardRef<   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {     inset?: boolean   } >(({ className, inset, children, ...props }, ref) => (   <DropdownMenuPrimitive.SubTrigger     ref={ref}     className={cn(       "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",       inset && "pl-8",       className     )}     {...props}   >     {children}     <ChevronRight className="ml-auto" />   </DropdownMenuPrimitive.SubTrigger> )) DropdownMenuSubTrigger.displayName =   DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef<   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> >(({ className, ...props }, ref) => (   <DropdownMenuPrimitive.SubContent     ref={ref}     className={cn(       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",       className     )}     {...props}   /> )) DropdownMenuSubContent.displayName =   DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef<   React.ElementRef<typeof DropdownMenuPrimitive.Content>,   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> >(({ className, sideOffset = 4, ...props }, ref) => (   <DropdownMenuPrimitive.Portal>     <DropdownMenuPrimitive.Content       ref={ref}       sideOffset={sideOffset}       className={cn(         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",         className       )}       {...props}     />   </DropdownMenuPrimitive.Portal> )) DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName const DropdownMenuItem = React.forwardRef<   React.ElementRef<typeof DropdownMenuPrimitive.Item>,   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {     inset?: boolean   } >(({ className, inset, ...props }, ref) => (   <DropdownMenuPrimitive.Item     ref={ref}     className={cn(       "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",       inset && "pl-8",       className     )}     {...props}   /> )) DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName const DropdownMenuCheckboxItem = React.forwardRef<   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> >(({ className, children, checked, ...props }, ref) => (   <DropdownMenuPrimitive.CheckboxItem     ref={ref}     className={cn(       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",       className     )}     checked={checked}     {...props}   >     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">       <DropdownMenuPrimitive.ItemIndicator>         <Check className="h-4 w-4" />       </DropdownMenuPrimitive.ItemIndicator>     </span>     {children}   </DropdownMenuPrimitive.CheckboxItem> )) DropdownMenuCheckboxItem.displayName =   DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef<   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> >(({ className, children, ...props }, ref) => (   <DropdownMenuPrimitive.RadioItem     ref={ref}     className={cn(       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",       className     )}     {...props}   >     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">       <DropdownMenuPrimitive.ItemIndicator>         <Circle className="h-2 w-2 fill-current" />       </DropdownMenuPrimitive.ItemIndicator>     </span>     {children}   </DropdownMenuPrimitive.RadioItem> )) DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName const DropdownMenuLabel = React.forwardRef<   React.ElementRef<typeof DropdownMenuPrimitive.Label>,   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {     inset?: boolean   } >(({ className, inset, ...props }, ref) => (   <DropdownMenuPrimitive.Label     ref={ref}     className={cn(       "px-2 py-1.5 text-sm font-semibold",       inset && "pl-8",       className     )}     {...props}   /> )) DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName const DropdownMenuSeparator = React.forwardRef<   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> >(({ className, ...props }, ref) => (   <DropdownMenuPrimitive.Separator     ref={ref}     className={cn("-mx-1 my-1 h-px bg-muted", className)}     {...props}   /> )) DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName const DropdownMenuShortcut = ({   className,   ...props }: React.HTMLAttributes<HTMLSpanElement>) => {   return (     <span       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}       {...props}     />   ) } DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export {   DropdownMenu,   DropdownMenuTrigger,   DropdownMenuContent,   DropdownMenuItem,   DropdownMenuCheckboxItem,   DropdownMenuRadioItem,   DropdownMenuLabel,   DropdownMenuSeparator,   DropdownMenuShortcut,   DropdownMenuGroup,   DropdownMenuPortal,   DropdownMenuSub,   DropdownMenuSubContent,   DropdownMenuSubTrigger,   DropdownMenuRadioGroup, } ================================================ FILE: src/components/ui/form.tsx ================================================ "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { Slot } from "@radix-ui/react-slot" import {   Controller,   FormProvider,   useFormContext,   type ControllerProps,   type FieldPath,   type FieldValues, } from "react-hook-form" import { cn } from "@/lib/utils" import { Label } from "@/components/ui/label" const Form = FormProvider type FormFieldContextValue<   TFieldValues extends FieldValues = FieldValues,   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues> > = {   name: TName } const FormFieldContext = React.createContext<FormFieldContextValue>(   {} as FormFieldContextValue ) const FormField = <   TFieldValues extends FieldValues = FieldValues,   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues> >({   ...props }: ControllerProps<TFieldValues, TName>) => {   return (     <FormFieldContext.Provider value={{ name: props.name }}>       <Controller {...props} />     </FormFieldContext.Provider>   ) } const useFormField = () => {   const fieldContext = React.useContext(FormFieldContext)   const itemContext = React.useContext(FormItemContext)   const { getFieldState, formState } = useFormContext()   const fieldState = getFieldState(fieldContext.name, formState)   if (!fieldContext) {     throw new Error("useFormField should be used within <FormField>")   }   const { id } = itemContext   return {     id,     name: fieldContext.name,     formItemId: `${id}-form-item`,     formDescriptionId: `${id}-form-item-description`,     formMessageId: `${id}-form-item-message`,     ...fieldState,   } } type FormItemContextValue = {   id: string } const FormItemContext = React.createContext<FormItemContextValue>(   {} as FormItemContextValue ) const FormItem = React.forwardRef<   HTMLDivElement,   React.HTMLAttributes<HTMLDivElement> >(({ className, ...props }, ref) => {   const id = React.useId()   return (     <FormItemContext.Provider value={{ id }}>       <div ref={ref} className={cn("space-y-2", className)} {...props} />     </FormItemContext.Provider>   ) }) FormItem.displayName = "FormItem" const FormLabel = React.forwardRef<   React.ElementRef<typeof LabelPrimitive.Root>,   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> >(({ className, ...props }, ref) => {   const { error, formItemId } = useFormField()   return (     <Label       ref={ref}       className={cn(error && "text-destructive", className)}       htmlFor={formItemId}       {...props}     />   ) }) FormLabel.displayName = "FormLabel" const FormControl = React.forwardRef<   React.ElementRef<typeof Slot>,   React.ComponentPropsWithoutRef<typeof Slot> >(({ ...props }, ref) => {   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()   return (     <Slot       ref={ref}       id={formItemId}       aria-describedby={         !error           ? `${formDescriptionId}`           : `${formDescriptionId} ${formMessageId}`       }       aria-invalid={!!error}       {...props}     />   ) }) FormControl.displayName = "FormControl" const FormDescription = React.forwardRef<   HTMLParagraphElement,   React.HTMLAttributes<HTMLParagraphElement> >(({ className, ...props }, ref) => {   const { formDescriptionId } = useFormField()   return (     <p       ref={ref}       id={formDescriptionId}       className={cn("text-sm text-muted-foreground", className)}       {...props}     />   ) }) FormDescription.displayName = "FormDescription" const FormMessage = React.forwardRef<   HTMLParagraphElement,   React.HTMLAttributes<HTMLParagraphElement> >(({ className, children, ...props }, ref) => {   const { error, formMessageId } = useFormField()   const body = error ? String(error?.message ?? "") : children   if (!body) {     return null   }   return (     <p       ref={ref}       id={formMessageId}       className={cn("text-sm font-medium text-destructive", className)}       {...props}     >       {body}     </p>   ) }) FormMessage.displayName = "FormMessage" export {   useFormField,   Form,   FormItem,   FormLabel,   FormControl,   FormDescription,   FormMessage,   FormField, } ================================================ FILE: src/components/ui/input.tsx ================================================ import * as React from "react" import { cn } from "@/lib/utils" const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(   ({ className, type, ...props }, ref) => {     return (       <input         type={type}         className={cn(           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",           className         )}         ref={ref}         {...props}       />     )   } ) Input.displayName = "Input" export { Input } ================================================ FILE: src/components/ui/label.tsx ================================================ "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva(   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" ) const Label = React.forwardRef<   React.ElementRef<typeof LabelPrimitive.Root>,   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &     VariantProps<typeof labelVariants> >(({ className, ...props }, ref) => (   <LabelPrimitive.Root     ref={ref}     className={cn(labelVariants(), className)}     {...props}   /> )) Label.displayName = LabelPrimitive.Root.displayName export { Label } ================================================ FILE: src/components/ui/menubar.tsx ================================================ "use client" import * as React from "react" import * as MenubarPrimitive from "@radix-ui/react-menubar" import { Check, ChevronRight, Circle } from "lucide-react" import { cn } from "@/lib/utils" function MenubarMenu({   ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {   return <MenubarPrimitive.Menu {...props} /> } function MenubarGroup({   ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {   return <MenubarPrimitive.Group {...props} /> } function MenubarPortal({   ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {   return <MenubarPrimitive.Portal {...props} /> } function MenubarRadioGroup({   ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {   return <MenubarPrimitive.RadioGroup {...props} /> } function MenubarSub({   ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {   return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} /> } const Menubar = React.forwardRef<   React.ElementRef<typeof MenubarPrimitive.Root>,   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root> >(({ className, ...props }, ref) => (   <MenubarPrimitive.Root     ref={ref}     className={cn(       "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",       className     )}     {...props}   /> )) Menubar.displayName = MenubarPrimitive.Root.displayName const MenubarTrigger = React.forwardRef<   React.ElementRef<typeof MenubarPrimitive.Trigger>,   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger> >(({ className, ...props }, ref) => (   <MenubarPrimitive.Trigger     ref={ref}     className={cn(       "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",       className     )}     {...props}   /> )) MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName const MenubarSubTrigger = React.forwardRef<   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {     inset?: boolean   } >(({ className, inset, children, ...props }, ref) => (   <MenubarPrimitive.SubTrigger     ref={ref}     className={cn(       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",       inset && "pl-8",       className     )}     {...props}   >     {children}     <ChevronRight className="ml-auto h-4 w-4" />   </MenubarPrimitive.SubTrigger> )) MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName const MenubarSubContent = React.forwardRef<   React.ElementRef<typeof MenubarPrimitive.SubContent>,   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent> >(({ className, ...props }, ref) => (   <MenubarPrimitive.SubContent     ref={ref}     className={cn(       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",       className     )}     {...props}   /> )) MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName const MenubarContent = React.forwardRef<   React.ElementRef<typeof MenubarPrimitive.Content>,   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> >(   (     { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },     ref   ) => (     <MenubarPrimitive.Portal>       <MenubarPrimitive.Content         ref={ref}         align={align}         alignOffset={alignOffset}         sideOffset={sideOffset}         className={cn(           "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",           className         )}         {...props}       />     </MenubarPrimitive.Portal>   ) ) MenubarContent.displayName = MenubarPrimitive.Content.displayName const MenubarItem = React.forwardRef<   React.ElementRef<typeof MenubarPrimitive.Item>,   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {     inset?: boolean   } >(({ className, inset, ...props }, ref) => (   <MenubarPrimitive.Item     ref={ref}     className={cn(       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",       inset && "pl-8",       className     )}     {...props}   /> )) MenubarItem.displayName = MenubarPrimitive.Item.displayName const MenubarCheckboxItem = React.forwardRef<   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem> >(({ className, children, checked, ...props }, ref) => (   <MenubarPrimitive.CheckboxItem     ref={ref}     className={cn(       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",       className     )}     checked={checked}     {...props}   >     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">       <MenubarPrimitive.ItemIndicator>         <Check className="h-4 w-4" />       </MenubarPrimitive.ItemIndicator>     </span>     {children}   </MenubarPrimitive.CheckboxItem> )) MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName const MenubarRadioItem = React.forwardRef<   React.ElementRef<typeof MenubarPrimitive.RadioItem>,   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem> >(({ className, children, ...props }, ref) => (   <MenubarPrimitive.RadioItem     ref={ref}     className={cn(       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",       className     )}     {...props}   >     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">       <MenubarPrimitive.ItemIndicator>         <Circle className="h-2 w-2 fill-current" />       </MenubarPrimitive.ItemIndicator>     </span>     {children}   </MenubarPrimitive.RadioItem> )) MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName const MenubarLabel = React.forwardRef<   React.ElementRef<typeof MenubarPrimitive.Label>,   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {     inset?: boolean   } >(({ className, inset, ...props }, ref) => (   <MenubarPrimitive.Label     ref={ref}     className={cn(       "px-2 py-1.5 text-sm font-semibold",       inset && "pl-8",       className     )}     {...props}   /> )) MenubarLabel.displayName = MenubarPrimitive.Label.displayName const MenubarSeparator = React.forwardRef<   React.ElementRef<typeof MenubarPrimitive.Separator>,   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator> >(({ className, ...props }, ref) => (   <MenubarPrimitive.Separator     ref={ref}     className={cn("-mx-1 my-1 h-px bg-muted", className)}     {...props}   /> )) MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName const MenubarShortcut = ({   className,   ...props }: React.HTMLAttributes<HTMLSpanElement>) => {   return (     <span       className={cn(         "ml-auto text-xs tracking-widest text-muted-foreground",         className       )}       {...props}     />   ) } MenubarShortcut.displayname = "MenubarShortcut" export {   Menubar,   MenubarMenu,   MenubarTrigger,   MenubarContent,   MenubarItem,   MenubarSeparator,   MenubarLabel,   MenubarCheckboxItem,   MenubarRadioGroup,   MenubarRadioItem,   MenubarPortal,   MenubarSubContent,   MenubarSubTrigger,   MenubarGroup,   MenubarSub,   MenubarShortcut, } ================================================ FILE: src/components/ui/popover.tsx ================================================ "use client" import * as React from "react" import * as PopoverPrimitive from "@radix-ui/react-popover" import { cn } from "@/lib/utils" const Popover = PopoverPrimitive.Root const PopoverTrigger = PopoverPrimitive.Trigger const PopoverContent = React.forwardRef<   React.ElementRef<typeof PopoverPrimitive.Content>,   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (   <PopoverPrimitive.Portal>     <PopoverPrimitive.Content       ref={ref}       align={align}       sideOffset={sideOffset}       className={cn(         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",         className       )}       {...props}     />   </PopoverPrimitive.Portal> )) PopoverContent.displayName = PopoverPrimitive.Content.displayName export { Popover, PopoverTrigger, PopoverContent } ================================================ FILE: src/components/ui/progress.tsx ================================================ "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef<   React.ElementRef<typeof ProgressPrimitive.Root>,   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> >(({ className, value, ...props }, ref) => (   <ProgressPrimitive.Root     ref={ref}     className={cn(       "relative h-4 w-full overflow-hidden rounded-full bg-secondary",       className     )}     {...props}   >     <ProgressPrimitive.Indicator       className="h-full w-full flex-1 bg-primary transition-all"       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}     />   </ProgressPrimitive.Root> )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } ================================================ FILE: src/components/ui/radio-group.tsx ================================================ "use client" import * as React from "react" import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" import { Circle } from "lucide-react" import { cn } from "@/lib/utils" const RadioGroup = React.forwardRef<   React.ElementRef<typeof RadioGroupPrimitive.Root>,   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> >(({ className, ...props }, ref) => {   return (     <RadioGroupPrimitive.Root       className={cn("grid gap-2", className)}       {...props}       ref={ref}     />   ) }) RadioGroup.displayName = RadioGroupPrimitive.Root.displayName const RadioGroupItem = React.forwardRef<   React.ElementRef<typeof RadioGroupPrimitive.Item>,   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> >(({ className, ...props }, ref) => {   return (     <RadioGroupPrimitive.Item       ref={ref}       className={cn(         "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",         className       )}       {...props}     >       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">         <Circle className="h-2.5 w-2.5 fill-current text-current" />       </RadioGroupPrimitive.Indicator>     </RadioGroupPrimitive.Item>   ) }) RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName export { RadioGroup, RadioGroupItem } ================================================ FILE: src/components/ui/scroll-area.tsx ================================================ "use client" import * as React from "react" import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" import { cn } from "@/lib/utils" const ScrollArea = React.forwardRef<   React.ElementRef<typeof ScrollAreaPrimitive.Root>,   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> >(({ className, children, ...props }, ref) => (   <ScrollAreaPrimitive.Root     ref={ref}     className={cn("relative overflow-hidden", className)}     {...props}   >     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">       {children}     </ScrollAreaPrimitive.Viewport>     <ScrollBar />     <ScrollAreaPrimitive.Corner />   </ScrollAreaPrimitive.Root> )) ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName const ScrollBar = React.forwardRef<   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> >(({ className, orientation = "vertical", ...props }, ref) => (   <ScrollAreaPrimitive.ScrollAreaScrollbar     ref={ref}     orientation={orientation}     className={cn(       "flex touch-none select-none transition-colors",       orientation === "vertical" &&         "h-full w-2.5 border-l border-l-transparent p-[1px]",       orientation === "horizontal" &&         "h-2.5 flex-col border-t border-t-transparent p-[1px]",       className     )}     {...props}   >     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />   </ScrollAreaPrimitive.ScrollAreaScrollbar> )) ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName export { ScrollArea, ScrollBar } ================================================ FILE: src/components/ui/select.tsx ================================================ "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef<   React.ElementRef<typeof SelectPrimitive.Trigger>,   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> >(({ className, children, ...props }, ref) => (   <SelectPrimitive.Trigger     ref={ref}     className={cn(       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",       className     )}     {...props}   >     {children}     <SelectPrimitive.Icon asChild>       <ChevronDown className="h-4 w-4 opacity-50" />     </SelectPrimitive.Icon>   </SelectPrimitive.Trigger> )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef<   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> >(({ className, ...props }, ref) => (   <SelectPrimitive.ScrollUpButton     ref={ref}     className={cn(       "flex cursor-default items-center justify-center py-1",       className     )}     {...props}   >     <ChevronUp className="h-4 w-4" />   </SelectPrimitive.ScrollUpButton> )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef<   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> >(({ className, ...props }, ref) => (   <SelectPrimitive.ScrollDownButton     ref={ref}     className={cn(       "flex cursor-default items-center justify-center py-1",       className     )}     {...props}   >     <ChevronDown className="h-4 w-4" />   </SelectPrimitive.ScrollDownButton> )) SelectScrollDownButton.displayName =   SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef<   React.ElementRef<typeof SelectPrimitive.Content>,   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> >(({ className, children, position = "popper", ...props }, ref) => (   <SelectPrimitive.Portal>     <SelectPrimitive.Content       ref={ref}       className={cn(         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",         position === "popper" &&           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",         className       )}       position={position}       {...props}     >       <SelectScrollUpButton />       <SelectPrimitive.Viewport         className={cn(           "p-1",           position === "popper" &&             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"         )}       >         {children}       </SelectPrimitive.Viewport>       <SelectScrollDownButton />     </SelectPrimitive.Content>   </SelectPrimitive.Portal> )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef<   React.ElementRef<typeof SelectPrimitive.Label>,   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> >(({ className, ...props }, ref) => (   <SelectPrimitive.Label     ref={ref}     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}     {...props}   /> )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef<   React.ElementRef<typeof SelectPrimitive.Item>,   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> >(({ className, children, ...props }, ref) => (   <SelectPrimitive.Item     ref={ref}     className={cn(       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",       className     )}     {...props}   >     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">       <SelectPrimitive.ItemIndicator>         <Check className="h-4 w-4" />       </SelectPrimitive.ItemIndicator>     </span>     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>   </SelectPrimitive.Item> )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef<   React.ElementRef<typeof SelectPrimitive.Separator>,   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> >(({ className, ...props }, ref) => (   <SelectPrimitive.Separator     ref={ref}     className={cn("-mx-1 my-1 h-px bg-muted", className)}     {...props}   /> )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export {   Select,   SelectGroup,   SelectValue,   SelectTrigger,   SelectContent,   SelectLabel,   SelectItem,   SelectSeparator,   SelectScrollUpButton,   SelectScrollDownButton, } ================================================ FILE: src/components/ui/separator.tsx ================================================ "use client" import * as React from "react" import * as SeparatorPrimitive from "@radix-ui/react-separator" import { cn } from "@/lib/utils" const Separator = React.forwardRef<   React.ElementRef<typeof SeparatorPrimitive.Root>,   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> >(   (     { className, orientation = "horizontal", decorative = true, ...props },     ref   ) => (     <SeparatorPrimitive.Root       ref={ref}       decorative={decorative}       orientation={orientation}       className={cn(         "shrink-0 bg-border",         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",         className       )}       {...props}     />   ) ) Separator.displayName = SeparatorPrimitive.Root.displayName export { Separator } ================================================ FILE: src/components/ui/sheet.tsx ================================================ "use client" import * as React from "react" import * as SheetPrimitive from "@radix-ui/react-dialog" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Sheet = SheetPrimitive.Root const SheetTrigger = SheetPrimitive.Trigger const SheetClose = SheetPrimitive.Close const SheetPortal = SheetPrimitive.Portal const SheetOverlay = React.forwardRef<   React.ElementRef<typeof SheetPrimitive.Overlay>,   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> >(({ className, ...props }, ref) => (   <SheetPrimitive.Overlay     className={cn(       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",       className     )}     {...props}     ref={ref}   /> )) SheetOverlay.displayName = SheetPrimitive.Overlay.displayName const sheetVariants = cva(   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",   {     variants: {       side: {         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",         bottom:           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",         right:           "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",       },     },     defaultVariants: {       side: "right",     },   } ) interface SheetContentProps   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,     VariantProps<typeof sheetVariants> {} const SheetContent = React.forwardRef<   React.ElementRef<typeof SheetPrimitive.Content>,   SheetContentProps >(({ side = "right", className, children, ...props }, ref) => (   <SheetPortal>     <SheetOverlay />     <SheetPrimitive.Content       ref={ref}       className={cn(sheetVariants({ side }), className)}       {...props}     >       {children}       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">         <X className="h-4 w-4" />         <span className="sr-only">Close</span>       </SheetPrimitive.Close>     </SheetPrimitive.Content>   </SheetPortal> )) SheetContent.displayName = SheetPrimitive.Content.displayName const SheetHeader = ({   className,   ...props }: React.HTMLAttributes<HTMLDivElement>) => (   <div     className={cn(       "flex flex-col space-y-2 text-center sm:text-left",       className     )}     {...props}   /> ) SheetHeader.displayName = "SheetHeader" const SheetFooter = ({   className,   ...props }: React.HTMLAttributes<HTMLDivElement>) => (   <div     className={cn(       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",       className     )}     {...props}   /> ) SheetFooter.displayName = "SheetFooter" const SheetTitle = React.forwardRef<   React.ElementRef<typeof SheetPrimitive.Title>,   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> >(({ className, ...props }, ref) => (   <SheetPrimitive.Title     ref={ref}     className={cn("text-lg font-semibold text-foreground", className)}     {...props}   /> )) SheetTitle.displayName = SheetPrimitive.Title.displayName const SheetDescription = React.forwardRef<   React.ElementRef<typeof SheetPrimitive.Description>,   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> >(({ className, ...props }, ref) => (   <SheetPrimitive.Description     ref={ref}     className={cn("text-sm text-muted-foreground", className)}     {...props}   /> )) SheetDescription.displayName = SheetPrimitive.Description.displayName export {   Sheet,   SheetPortal,   SheetOverlay,   SheetTrigger,   SheetClose,   SheetContent,   SheetHeader,   SheetFooter,   SheetTitle,   SheetDescription, } ================================================ FILE: src/components/ui/sidebar.tsx ================================================ "use client" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { VariantProps, cva } from "class-variance-authority" import { PanelLeft } from "lucide-react" import { useIsMobile } from "@/hooks/use-mobile" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Sheet, SheetContent } from "@/components/ui/sheet" import { Skeleton } from "@/components/ui/skeleton" import {   Tooltip,   TooltipContent,   TooltipProvider,   TooltipTrigger, } from "@/components/ui/tooltip" const SIDEBAR_COOKIE_NAME = "sidebar_state" const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 const SIDEBAR_WIDTH = "16rem" const SIDEBAR_WIDTH_MOBILE = "18rem" const SIDEBAR_WIDTH_ICON = "3rem" const SIDEBAR_KEYBOARD_SHORTCUT = "b" type SidebarContext = {   state: "expanded" | "collapsed"   open: boolean   setOpen: (open: boolean) => void   openMobile: boolean   setOpenMobile: (open: boolean) => void   isMobile: boolean   toggleSidebar: () => void } const SidebarContext = React.createContext<SidebarContext | null>(null) function useSidebar() {   const context = React.useContext(SidebarContext)   if (!context) {     throw new Error("useSidebar must be used within a SidebarProvider.")   }   return context } const SidebarProvider = React.forwardRef<   HTMLDivElement,   React.ComponentProps<"div"> & {     defaultOpen?: boolean     open?: boolean     onOpenChange?: (open: boolean) => void   } >(   (     {       defaultOpen = true,       open: openProp,       onOpenChange: setOpenProp,       className,       style,       children,       ...props     },     ref   ) => {     const isMobile = useIsMobile()     const [openMobile, setOpenMobile] = React.useState(false)     // This is the internal state of the sidebar.     // We use openProp and setOpenProp for control from outside the component.     const [_open, _setOpen] = React.useState(defaultOpen)     const open = openProp ?? _open     const setOpen = React.useCallback(       (value: boolean | ((value: boolean) => boolean)) => {         const openState = typeof value === "function" ? value(open) : value         if (setOpenProp) {           setOpenProp(openState)         } else {           _setOpen(openState)         }         // This sets the cookie to keep the sidebar state.         document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`       },       [setOpenProp, open]     )     // Helper to toggle the sidebar.     const toggleSidebar = React.useCallback(() => {       return isMobile         ? setOpenMobile((open) => !open)         : setOpen((open) => !open)     }, [isMobile, setOpen, setOpenMobile])     // Adds a keyboard shortcut to toggle the sidebar.     React.useEffect(() => {       const handleKeyDown = (event: KeyboardEvent) => {         if (           event.key === SIDEBAR_KEYBOARD_SHORTCUT &&           (event.metaKey || event.ctrlKey)         ) {           event.preventDefault()           toggleSidebar()         }       }       window.addEventListener("keydown", handleKeyDown)       return () => window.removeEventListener("keydown", handleKeyDown)     }, [toggleSidebar])     // We add a state so that we can do data-state="expanded" or "collapsed".     // This makes it easier to style the sidebar with Tailwind classes.     const state = open ? "expanded" : "collapsed"     const contextValue = React.useMemo<SidebarContext>(       () => ({         state,         open,         setOpen,         isMobile,         openMobile,         setOpenMobile,         toggleSidebar,       }),       [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]     )     return (       <SidebarContext.Provider value={contextValue}>         <TooltipProvider delayDuration={0}>           <div             style={               {                 "--sidebar-width": SIDEBAR_WIDTH,                 "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,                 ...style,               } as React.CSSProperties             }             className={cn(               "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",               className             )}             ref={ref}             {...props}           >             {children}           </div>         </TooltipProvider>       </SidebarContext.Provider>     )   } ) SidebarProvider.displayName = "SidebarProvider" const Sidebar = React.forwardRef<   HTMLDivElement,   React.ComponentProps<"div"> & {     side?: "left" | "right"     variant?: "sidebar" | "floating" | "inset"     collapsible?: "offcanvas" | "icon" | "none"   } >(   (     {       side = "left",       variant = "sidebar",       collapsible = "offcanvas",       className,       children,       ...props     },     ref   ) => {     const { isMobile, state, openMobile, setOpenMobile } = useSidebar()     if (collapsible === "none") {       return (         <div           className={cn(             "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",             className           )}           ref={ref}           {...props}         >           {children}         </div>       )     }     if (isMobile) {       return (         <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>           <SheetContent             data-sidebar="sidebar"             data-mobile="true"             className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"             style={               {                 "--sidebar-width": SIDEBAR_WIDTH_MOBILE,               } as React.CSSProperties             }             side={side}           >             <div className="flex h-full w-full flex-col">{children}</div>           </SheetContent>         </Sheet>       )     }     return (       <div         ref={ref}         className="group peer hidden md:block text-sidebar-foreground"         data-state={state}         data-collapsible={state === "collapsed" ? collapsible : ""}         data-variant={variant}         data-side={side}       >         {/* This is what handles the sidebar gap on desktop */}         <div           className={cn(             "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",             "group-data-[collapsible=offcanvas]:w-0",             "group-data-[side=right]:rotate-180",             variant === "floating" || variant === "inset"               ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"               : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"           )}         />         <div           className={cn(             "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",             side === "left"               ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"               : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",             // Adjust the padding for floating and inset variants.             variant === "floating" || variant === "inset"               ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"               : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",             className           )}           {...props}         >           <div             data-sidebar="sidebar"             className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"           >             {children}           </div>         </div>       </div>     )   } ) Sidebar.displayName = "Sidebar" const SidebarTrigger = React.forwardRef<   React.ElementRef<typeof Button>,   React.ComponentProps<typeof Button> >(({ className, onClick, ...props }, ref) => {   const { toggleSidebar } = useSidebar()   return (     <Button       ref={ref}       data-sidebar="trigger"       variant="ghost"       size="icon"       className={cn("h-7 w-7", className)}       onClick={(event) => {         onClick?.(event)         toggleSidebar()       }}       {...props}     >       <PanelLeft />       <span className="sr-only">Toggle Sidebar</span>     </Button>   ) }) SidebarTrigger.displayName = "SidebarTrigger" const SidebarRail = React.forwardRef<   HTMLButtonElement,   React.ComponentProps<"button"> >(({ className, ...props }, ref) => {   const { toggleSidebar } = useSidebar()   return (     <button       ref={ref}       data-sidebar="rail"       aria-label="Toggle Sidebar"       tabIndex={-1}       onClick={toggleSidebar}       title="Toggle Sidebar"       className={cn(         "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",         "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",         "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",         className       )}       {...props}     />   ) }) SidebarRail.displayName = "SidebarRail" const SidebarInset = React.forwardRef<   HTMLDivElement,   React.ComponentProps<"main"> >(({ className, ...props }, ref) => {   return (     <main       ref={ref}       className={cn(         "relative flex min-h-svh flex-1 flex-col bg-background",         "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",         className       )}       {...props}     />   ) }) SidebarInset.displayName = "SidebarInset" const SidebarInput = React.forwardRef<   React.ElementRef<typeof Input>,   React.ComponentProps<typeof Input> >(({ className, ...props }, ref) => {   return (     <Input       ref={ref}       data-sidebar="input"       className={cn(         "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",         className       )}       {...props}     />   ) }) SidebarInput.displayName = "SidebarInput" const SidebarHeader = React.forwardRef<   HTMLDivElement,   React.ComponentProps<"div"> >(({ className, ...props }, ref) => {   return (     <div       ref={ref}       data-sidebar="header"       className={cn("flex flex-col gap-2 p-2", className)}       {...props}     />   ) }) SidebarHeader.displayName = "SidebarHeader" const SidebarFooter = React.forwardRef<   HTMLDivElement,   React.ComponentProps<"div"> >(({ className, ...props }, ref) => {   return (     <div       ref={ref}       data-sidebar="footer"       className={cn("flex flex-col gap-2 p-2", className)}       {...props}     />   ) }) SidebarFooter.displayName = "SidebarFooter" const SidebarSeparator = React.forwardRef<   React.ElementRef<typeof Separator>,   React.ComponentProps<typeof Separator> >(({ className, ...props }, ref) => {   return (     <Separator       ref={ref}       data-sidebar="separator"       className={cn("mx-2 w-auto bg-sidebar-border", className)}       {...props}     />   ) }) SidebarSeparator.displayName = "SidebarSeparator" const SidebarContent = React.forwardRef<   HTMLDivElement,   React.ComponentProps<"div"> >(({ className, ...props }, ref) => {   return (     <div       ref={ref}       data-sidebar="content"       className={cn(         "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",         className       )}       {...props}     />   ) }) SidebarContent.displayName = "SidebarContent" const SidebarGroup = React.forwardRef<   HTMLDivElement,   React.ComponentProps<"div"> >(({ className, ...props }, ref) => {   return (     <div       ref={ref}       data-sidebar="group"       className={cn("relative flex w-full min-w-0 flex-col p-2", className)}       {...props}     />   ) }) SidebarGroup.displayName = "SidebarGroup" const SidebarGroupLabel = React.forwardRef<   HTMLDivElement,   React.ComponentProps<"div"> & { asChild?: boolean } >(({ className, asChild = false, ...props }, ref) => {   const Comp = asChild ? Slot : "div"   return (     <Comp       ref={ref}       data-sidebar="group-label"       className={cn(         "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",         className       )}       {...props}     />   ) }) SidebarGroupLabel.displayName = "SidebarGroupLabel" const SidebarGroupAction = React.forwardRef<   HTMLButtonElement,   React.ComponentProps<"button"> & { asChild?: boolean } >(({ className, asChild = false, ...props }, ref) => {   const Comp = asChild ? Slot : "button"   return (     <Comp       ref={ref}       data-sidebar="group-action"       className={cn(         "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",         // Increases the hit area of the button on mobile.         "after:absolute after:-inset-2 after:md:hidden",         "group-data-[collapsible=icon]:hidden",         className       )}       {...props}     />   ) }) SidebarGroupAction.displayName = "SidebarGroupAction" const SidebarGroupContent = React.forwardRef<   HTMLDivElement,   React.ComponentProps<"div"> >(({ className, ...props }, ref) => (   <div     ref={ref}     data-sidebar="group-content"     className={cn("w-full text-sm", className)}     {...props}   /> )) SidebarGroupContent.displayName = "SidebarGroupContent" const SidebarMenu = React.forwardRef<   HTMLUListElement,   React.ComponentProps<"ul"> >(({ className, ...props }, ref) => (   <ul     ref={ref}     data-sidebar="menu"     className={cn("flex w-full min-w-0 flex-col gap-1", className)}     {...props}   /> )) SidebarMenu.displayName = "SidebarMenu" const SidebarMenuItem = React.forwardRef<   HTMLLIElement,   React.ComponentProps<"li"> >(({ className, ...props }, ref) => (   <li     ref={ref}     data-sidebar="menu-item"     className={cn("group/menu-item relative", className)}     {...props}   /> )) SidebarMenuItem.displayName = "SidebarMenuItem" const sidebarMenuButtonVariants = cva(   "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",   {     variants: {       variant: {         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",         outline:           "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",       },       size: {         default: "h-8 text-sm",         sm: "h-7 text-xs",         lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",       },     },     defaultVariants: {       variant: "default",       size: "default",     },   } ) const SidebarMenuButton = React.forwardRef<   HTMLButtonElement,   React.ComponentProps<"button"> & {     asChild?: boolean     isActive?: boolean     tooltip?: string | React.ComponentProps<typeof TooltipContent>   } & VariantProps<typeof sidebarMenuButtonVariants> >(   (     {       asChild = false,       isActive = false,       variant = "default",       size = "default",       tooltip,       className,       ...props     },     ref   ) => {     const Comp = asChild ? Slot : "button"     const { isMobile, state } = useSidebar()     const button = (       <Comp         ref={ref}         data-sidebar="menu-button"         data-size={size}         data-active={isActive}         className={cn(sidebarMenuButtonVariants({ variant, size }), className)}         {...props}       />     )     if (!tooltip) {       return button     }     if (typeof tooltip === "string") {       tooltip = {         children: tooltip,       }     }     return (       <Tooltip>         <TooltipTrigger asChild>{button}</TooltipTrigger>         <TooltipContent           side="right"           align="center"           hidden={state !== "collapsed" || isMobile}           {...tooltip}         />       </Tooltip>     )   } ) SidebarMenuButton.displayName = "SidebarMenuButton" const SidebarMenuAction = React.forwardRef<   HTMLButtonElement,   React.ComponentProps<"button"> & {     asChild?: boolean     showOnHover?: boolean   } >(({ className, asChild = false, showOnHover = false, ...props }, ref) => {   const Comp = asChild ? Slot : "button"   return (     <Comp       ref={ref}       data-sidebar="menu-action"       className={cn(         "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",         // Increases the hit area of the button on mobile.         "after:absolute after:-inset-2 after:md:hidden",         "peer-data-[size=sm]/menu-button:top-1",         "peer-data-[size=default]/menu-button:top-1.5",         "peer-data-[size=lg]/menu-button:top-2.5",         "group-data-[collapsible=icon]:hidden",         showOnHover &&           "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",         className       )}       {...props}     />   ) }) SidebarMenuAction.displayName = "SidebarMenuAction" const SidebarMenuBadge = React.forwardRef<   HTMLDivElement,   React.ComponentProps<"div"> >(({ className, ...props }, ref) => (   <div     ref={ref}     data-sidebar="menu-badge"     className={cn(       "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",       "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",       "peer-data-[size=sm]/menu-button:top-1",       "peer-data-[size=default]/menu-button:top-1.5",       "peer-data-[size=lg]/menu-button:top-2.5",       "group-data-[collapsible=icon]:hidden",       className     )}     {...props}   /> )) SidebarMenuBadge.displayName = "SidebarMenuBadge" const SidebarMenuSkeleton = React.forwardRef<   HTMLDivElement,   React.ComponentProps<"div"> & {     showIcon?: boolean   } >(({ className, showIcon = false, ...props }, ref) => {   // Random width between 50 to 90%.   const width = React.useMemo(() => {     return `${Math.floor(Math.random() * 40) + 50}%`   }, [])   return (     <div       ref={ref}       data-sidebar="menu-skeleton"       className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}       {...props}     >       {showIcon && (         <Skeleton           className="size-4 rounded-md"           data-sidebar="menu-skeleton-icon"         />       )}       <Skeleton         className="h-4 flex-1 max-w-[--skeleton-width]"         data-sidebar="menu-skeleton-text"         style={           {             "--skeleton-width": width,           } as React.CSSProperties         }       />     </div>   ) }) SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton" const SidebarMenuSub = React.forwardRef<   HTMLUListElement,   React.ComponentProps<"ul"> >(({ className, ...props }, ref) => (   <ul     ref={ref}     data-sidebar="menu-sub"     className={cn(       "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",       "group-data-[collapsible=icon]:hidden",       className     )}     {...props}   /> )) SidebarMenuSub.displayName = "SidebarMenuSub" const SidebarMenuSubItem = React.forwardRef<   HTMLLIElement,   React.ComponentProps<"li"> >(({ ...props }, ref) => <li ref={ref} {...props} />) SidebarMenuSubItem.displayName = "SidebarMenuSubItem" const SidebarMenuSubButton = React.forwardRef<   HTMLAnchorElement,   React.ComponentProps<"a"> & {     asChild?: boolean     size?: "sm" | "md"     isActive?: boolean   } >(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {   const Comp = asChild ? Slot : "a"   return (     <Comp       ref={ref}       data-sidebar="menu-sub-button"       data-size={size}       data-active={isActive}       className={cn(         "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",         size === "sm" && "text-xs",         size === "md" && "text-sm",         "group-data-[collapsible=icon]:hidden",         className       )}       {...props}     />   ) }) SidebarMenuSubButton.displayName = "SidebarMenuSubButton" export {   Sidebar,   SidebarContent,   SidebarFooter,   SidebarGroup,   SidebarGroupAction,   SidebarGroupContent,   SidebarGroupLabel,   SidebarHeader,   SidebarInput,   SidebarInset,   SidebarMenu,   SidebarMenuAction,   SidebarMenuBadge,   SidebarMenuButton,   SidebarMenuItem,   SidebarMenuSkeleton,   SidebarMenuSub,   SidebarMenuSubButton,   SidebarMenuSubItem,   SidebarProvider,   SidebarRail,   SidebarSeparator,   SidebarTrigger,   useSidebar, } ================================================ FILE: src/components/ui/skeleton.tsx ================================================ import { cn } from "@/lib/utils" function Skeleton({   className,   ...props }: React.HTMLAttributes<HTMLDivElement>) {   return (     <div       className={cn("animate-pulse rounded-md bg-muted", className)}       {...props}     />   ) } export { Skeleton } ================================================ FILE: src/components/ui/slider.tsx ================================================ "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef<   React.ElementRef<typeof SliderPrimitive.Root>,   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> >(({ className, ...props }, ref) => (   <SliderPrimitive.Root     ref={ref}     className={cn(       "relative flex w-full touch-none select-none items-center",       className     )}     {...props}   >     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">       <SliderPrimitive.Range className="absolute h-full bg-primary" />     </SliderPrimitive.Track>     <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />   </SliderPrimitive.Root> )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } ================================================ FILE: src/components/ui/switch.tsx ================================================ "use client" import * as React from "react" import * as SwitchPrimitives from "@radix-ui/react-switch" import { cn } from "@/lib/utils" const Switch = React.forwardRef<   React.ElementRef<typeof SwitchPrimitives.Root>,   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> >(({ className, ...props }, ref) => (   <SwitchPrimitives.Root     className={cn(       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",       className     )}     {...props}     ref={ref}   >     <SwitchPrimitives.Thumb       className={cn(         "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"       )}     />   </SwitchPrimitives.Root> )) Switch.displayName = SwitchPrimitives.Root.displayName export { Switch } ================================================ FILE: src/components/ui/table.tsx ================================================ import * as React from "react" import { cn } from "@/lib/utils" const Table = React.forwardRef<   HTMLTableElement,   React.HTMLAttributes<HTMLTableElement> >(({ className, ...props }, ref) => (   <div className="relative w-full overflow-auto">     <table       ref={ref}       className={cn("w-full caption-bottom text-sm", className)}       {...props}     />   </div> )) Table.displayName = "Table" const TableHeader = React.forwardRef<   HTMLTableSectionElement,   React.HTMLAttributes<HTMLTableSectionElement> >(({ className, ...props }, ref) => (   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} /> )) TableHeader.displayName = "TableHeader" const TableBody = React.forwardRef<   HTMLTableSectionElement,   React.HTMLAttributes<HTMLTableSectionElement> >(({ className, ...props }, ref) => (   <tbody     ref={ref}     className={cn("[&_tr:last-child]:border-0", className)}     {...props}   /> )) TableBody.displayName = "TableBody" const TableFooter = React.forwardRef<   HTMLTableSectionElement,   React.HTMLAttributes<HTMLTableSectionElement> >(({ className, ...props }, ref) => (   <tfoot     ref={ref}     className={cn(       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",       className     )}     {...props}   /> )) TableFooter.displayName = "TableFooter" const TableRow = React.forwardRef<   HTMLTableRowElement,   React.HTMLAttributes<HTMLTableRowElement> >(({ className, ...props }, ref) => (   <tr     ref={ref}     className={cn(       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",       className     )}     {...props}   /> )) TableRow.displayName = "TableRow" const TableHead = React.forwardRef<   HTMLTableCellElement,   React.ThHTMLAttributes<HTMLTableCellElement> >(({ className, ...props }, ref) => (   <th     ref={ref}     className={cn(       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",       className     )}     {...props}   /> )) TableHead.displayName = "TableHead" const TableCell = React.forwardRef<   HTMLTableCellElement,   React.TdHTMLAttributes<HTMLTableCellElement> >(({ className, ...props }, ref) => (   <td     ref={ref}     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}     {...props}   /> )) TableCell.displayName = "TableCell" const TableCaption = React.forwardRef<   HTMLTableCaptionElement,   React.HTMLAttributes<HTMLTableCaptionElement> >(({ className, ...props }, ref) => (   <caption     ref={ref}     className={cn("mt-4 text-sm text-muted-foreground", className)}     {...props}   /> )) TableCaption.displayName = "TableCaption" export {   Table,   TableHeader,   TableBody,   TableFooter,   TableHead,   TableRow,   TableCell,   TableCaption, } ================================================ FILE: src/components/ui/tabs.tsx ================================================ "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef<   React.ElementRef<typeof TabsPrimitive.List>,   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> >(({ className, ...props }, ref) => (   <TabsPrimitive.List     ref={ref}     className={cn(       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",       className     )}     {...props}   /> )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef<   React.ElementRef<typeof TabsPrimitive.Trigger>,   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> >(({ className, ...props }, ref) => (   <TabsPrimitive.Trigger     ref={ref}     className={cn(       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",       className     )}     {...props}   /> )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef<   React.ElementRef<typeof TabsPrimitive.Content>,   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> >(({ className, ...props }, ref) => (   <TabsPrimitive.Content     ref={ref}     className={cn(       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",       className     )}     {...props}   /> )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } ================================================ FILE: src/components/ui/textarea.tsx ================================================ import * as React from 'react'; import {cn} from '@/lib/utils'; const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'textarea'>>(   ({className, ...props}, ref) => {     return (       <textarea         className={cn(           'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',           className         )}         ref={ref}         {...props}       />     );   } ); Textarea.displayName = 'Textarea'; export {Textarea}; ================================================ FILE: src/components/ui/toast.tsx ================================================ "use client" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef<   React.ElementRef<typeof ToastPrimitives.Viewport>,   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> >(({ className, ...props }, ref) => (   <ToastPrimitives.Viewport     ref={ref}     className={cn(       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",       className     )}     {...props}   /> )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva(   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",   {     variants: {       variant: {         default: "border bg-background text-foreground",         destructive:           "destructive group border-destructive bg-destructive text-destructive-foreground",       },     },     defaultVariants: {       variant: "default",     },   } ) const Toast = React.forwardRef<   React.ElementRef<typeof ToastPrimitives.Root>,   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &     VariantProps<typeof toastVariants> >(({ className, variant, ...props }, ref) => {   return (     <ToastPrimitives.Root       ref={ref}       className={cn(toastVariants({ variant }), className)}       {...props}     />   ) }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef<   React.ElementRef<typeof ToastPrimitives.Action>,   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> >(({ className, ...props }, ref) => (   <ToastPrimitives.Action     ref={ref}     className={cn(       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",       className     )}     {...props}   /> )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef<   React.ElementRef<typeof ToastPrimitives.Close>,   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> >(({ className, ...props }, ref) => (   <ToastPrimitives.Close     ref={ref}     className={cn(       "absolute right-2 top-2 rounded-md p" "Our Vision: Introducing the Adaptive Clinical Intelligent System (ACLIS) At HawkFranklin, we see a fundamental truth: the future of medicine isn't just about more data or more powerful algorithms. It's about creating technology that possesses a deeper, more attuned understanding—of the patient, their environment, and most critically, the irreplaceable wisdom of their doctor. For too long, clinical AI has been a powerful but blunt instrument. Trained on generic global data, it offers insights that are statistically sound but often miss the art of medicine, the nuanced expertise a physician develops over a lifetime of practice. It's an assistant that speaks a different dialect, forcing doctors to constantly translate, second-guess, and mentally adjust its outputs. We are here to change that. We are proud to introduce the Adaptive Clinical Intelligent System (ACLIS). This is not just another decision-support tool; it is a living, learning clinical partner. ACLIS is designed from the ground up to be a seamless extension of the physician's own mind, augmenting their expertise, adapting to their unique perspective, and automating the noise so they can focus on what truly matters: the patient in front of them. Our core innovation, the principle that drives our entire system, is a new paradigm we call Adaptive Context Intelligence. We bring this paradigm to life in healthcare through our novel Active Clinical Protocol (ACP). This framework allows ACLIS to continuously learn and align itself with the real world, creating an AI with true Adaptive Clinical Intelligence—one that doesn't just give answers, but understands, adapts, and evolves with every single interaction. The Problems We Solve: The HawkFranklin Value Proposition We built ACLIS to solve the most fundamental and frustrating problems that plague modern healthcare and limit the potential of today's AI. We frame our value not in features, but in the profound challenges we overcome. Problem 1: Medicine isn't "one-size-fits-all," so why is our AI? A textbook is a great starting point, but every doctor knows that a patient's genetics, environment, and lifestyle can change what's "normal." An AI trained on data from North America might misinterpret the lab values of a patient in South Africa. This forces doctors to constantly second-guess the AI, defeating its purpose. Our Solution: The Doctor Context Protocol (DCP) & Adaptive Clinical Intelligence This is the soul of ACLIS and our most significant innovation. The DCP is a living repository where a doctor's unique, experience-based wisdom is captured and operationalized. Through a simple interface, a physician can record their personal clinical heuristics: "For my South Asian patients, I consider an HbA1c of 6.5% as the intervention threshold, not 7.0%," or "For this specific ultrasound machine, these are the settings I trust." Our Automated Model Alignment & Fine-Tuning Copilot Agent then uses this rich, personal context to continuously align our entire suite of foundation models. The result is Adaptive Clinical Intelligence—an AI that literally learns to see the world through the eyes of the doctor it serves, making its insights hyper-relevant and immediately trustworthy. Problem 2: A patient's story is scattered across different data languages. A complete clinical picture is a mosaic of a radiologist's report (text), the MRI scan itself (images), and the patient's blood work (tabular data). Most AI systems are fluent in only one of these languages. They can't see the subtle connections that a human expert can, leading to fragmented analysis and missed opportunities for diagnosis. Our Solution: A Unified Multi-Modal Foundation Model Stack ACLIS is fluent in all the languages of medicine. We built a powerful, integrated stack of specialized foundation models. We use MedGemma for its advanced vision-language capabilities, but we also integrate external, best-in-class VLMs for specific radiology or pathology tasks. Critically, for the vast amount of structured lab data, we integrate TabPFN, a state-of-the-art tabular foundation model that excels at making predictions from the smaller, high-stakes datasets common in hospitals. An intelligent routing agent directs each piece of data to the model best suited to interpret it, fusing the insights into a single, unified clinical picture. Problem 3: The world's most advanced care is useless if it's trapped behind a digital wall. The AI revolution in medicine means nothing to the countless hospitals and clinics worldwide that still rely on paper records. This creates a dangerous gap in the quality of care, leaving the most vulnerable populations behind and making global health initiatives incredibly difficult to implement. Our Solution: An OCR-to-Foundation-Model Bridge ACLIS is designed for global equity. Our system includes a powerful OCR recognition model that can ingest non-digital records—scanned documents, handwritten notes, even device printouts—and instantly structure that information for analysis by our foundation models. This provides a direct on-ramp to world-class AI for any healthcare setting, bridging the digital divide and ensuring that advanced care is not a privilege for the few, but a possibility for all. Problem 4: By the time a hospital reacts to a threat, it's often too late. Clinical systems are designed to be reactive. They manage the patients already inside the hospital's walls. They have no way of seeing the next threat coming, whether it's a new viral outbreak spreading through the local community or a groundbreaking piece of research that was just published and could change a patient's outcome today. Our Solution: Proactive, Outward-Facing Surveillance Agents ACLIS extends its senses beyond the hospital walls. The Active Disease Alarm: This agent operates 24/7, constantly scanning public data streams like news and social media for signals of new disease outbreaks. It identifies emerging symptom clusters and cross-references them with currently admitted patients, providing an invaluable early warning that can save lives. The Global Disease Research Agent: This agent acts as a live, tireless research assistant. It monitors global research publications and, when relevant to a patient's case, proactively surfaces cutting-edge studies, treatment strategies, and clinical trials directly within the doctor's workflow. The ACLIS Experience: The Doctor's Clinical Cockpit Our vision comes to life in the ACLIS interface, a clean, intuitive, and powerful cockpit designed for a touch-screen tablet or web browser. It synthesizes all the system's intelligence into a single, coherent view of the patient, mirroring the thoughtful design of our UI code. The Unified Patient Story: The dashboard opens with a holistic view. The Preliminary Summary card, generated by an AI agent after conversational Q&A with the patient, provides a high-confidence narrative of the patient's story. Alongside it, the EHR Recent Summary card displays real-time vitals with trend sparklines, pending test alerts, and current medications. Multi-Modal Intelligence, Made Clear: The Imaging Findings card displays the AI's analysis with annotated markers directly on the scan and clear confidence scores for each finding. A dropdown lets the doctor instantly switch between AI models (e.g., MedGemma vs. a specialized Radiology Copilot) for a second opinion. The Genomic Risk & Prognostic card showcases the power of our TabPFN model. It transforms raw genomic data into an intuitive risk visualization, identifies key pathogenic mutations in a clear table, and even provides interactive sliders for the doctor to simulate how biomarker changes might affect the patient's prognosis. The Doctor's Wisdom, Operationalized: The Doctor Protocol & Research card is the heart of our adaptive system. Here, a doctor sees their personal clinical notes automatically applied to the current case (e.g., "HbA1c Threshold: For South Asian patients, consider intervention at 6.5%"). They can add new observations on the fly, and the system uses them to fine-tune its models. This card also surfaces the latest research papers highly relevant to the patient's condition, curated by the Global Research Agent. A Team of AI Agents on Command: The Copilot Agent Panel allows the doctor to activate specialized agents on demand. The Agent Toolbox provides powerful one-tap actions like "Run Differential Dx" or "Generate Radiology Report." Trust Through Scrutiny: We built the Contradiction Agent to ensure safety and build trust. This dedicated agent constantly monitors the system's outputs against the latest global research. If it finds a potential conflict, it raises a clear, actionable alert, ensuring the physician always has the most complete and critically-evaluated information. Our Novelty and Patentability The value of ACLIS lies not in a single algorithm, but in its holistic, adaptive architecture. While the patent landscape is crowded with point solutions, our system establishes a new paradigm. Our key patentable innovations include: The Active Clinical Protocol (ACP) & The Method of Adaptive Clinical Intelligence: The entire method and system for capturing multi-faceted context (including the Doctor Context Protocol for physician heuristics and the Model Context Protocol for patient data) and using it in a continuous, automated alignment loop for a multi-modal set of foundation models. The Multi-Modal Foundation Model Stack with Tabular Integration: The system architecture that routes heterogeneous clinical data (text, image, tabular) to specialized foundation models (LVLM, VLM, and specifically TabPFN) and fuses their outputs for comprehensive reasoning. The Proactive Syndromic Surveillance Agent: The method for an agent to continuously mine public, unstructured data (social media, news) for syndromic surveillance and cross-reference those signals against an active patient roster within a clinical institution. The Contradiction & Alignment Agent System: A system comprising multiple AI agents where one agent's function is to monitor the outputs of other agents and external data sources to detect and flag logical or clinical contradictions, feeding this back into the system's alignment process. By building ACLIS, we at HawkFranklin are not just creating a product. We are creating a future where technology empowers, rather than overwhelms, the physician. A future where every doctor, anywhere in the world, has a clinical partner that is as intelligent, experienced, and adaptive as they are. " , and the potential slide deck was " Below is a structured pitch deck outline for presenting **ACLIS (Adaptive Clinical Intelligent System)** by **HawkFranklin Research**. This pitch deck is designed to introduce your company, showcase the innovative healthcare product ACLIS, and appeal to your target audience—investors, healthcare professionals, or potential partners. It incorporates your requested analogy of "Foundation Models as Engines and AI Agents as Frameworks," highlights the **Active Clinical Protocol (ACP)** as a key innovation, and positions HawkFranklin Research’s vision effectively. The slides are sequenced to tell a compelling story, starting with your vision, moving through the problem and solution, and ending with a strong call to action. --- ### Pitch Deck Outline for ACLIS #### **Slide 1: Introduction - HawkFranklin Research Vision** - **Title:** "Empowering the Future of Scientific AI" - **Content:**   - "Welcome to **HawkFranklin Research**, a research company dedicated to integrating AI into scientific work."   - "Our vision: To keep startups and companies at the forefront of technology in an exponentially evolving space, where new models, methods, and datasets emerge every six months."   - "We provide cutting-edge consulting services and develop internal research products like **ACLIS**, our Adaptive Clinical Intelligent System." - **Purpose:** Place your vision upfront to establish credibility and context for ACLIS as a product of your broader mission. --- #### **Slide 2: The Problem** - **Title:** "Why Clinical AI Falls Short" - **Content:**   - "Today’s clinical AI is rigid—trained on generic data, it misses local medical practices and doctor expertise."   - "Data is fragmented: digital records, paper files, and device outputs don’t connect."   - "Doctors adapt to systems, not the other way around, wasting time and insight."   - "Hospitals lack real-time awareness of outbreaks or new research, delaying critical responses." - **Visuals:** Simple icons (e.g., broken puzzle for fragmented data, clock for delays). - **Purpose:** Highlight the pain points ACLIS solves, setting up the need for your solution. --- #### **Slide 3: The Solution - ACLIS** - **Title:** "ACLIS: Your Adaptive Clinical Partner" - **Content:**   - "ACLIS is a living, learning system that adapts to doctors, patients, and hospitals."   - "It integrates **Foundation Models**, **AI Agents**, and our **Active Clinical Protocol (ACP)** to deliver personalized, context-aware clinical intelligence."   - "Think of it as an extension of the physician’s mind—automating noise, amplifying expertise." - **Visuals:** A central hub graphic connecting doctors, data, and AI. - **Purpose:** Introduce ACLIS as the hero that addresses the problems from Slide 2. --- #### **Slide 4: Foundation Models & AI Agents - The Analogy** - **Title:** "The Engines and Frameworks of AI" - **Content:**   - "Foundation Models are the **engines** of the AI revolution—like a mechanical engine powers a bike, car, or rocket."   - "AI Agents are the **frameworks**—using those engines to solve specific problems."   - "For simple tasks, one engine (e.g., a language model) is enough—like a bike. For complex systems like ACLIS, we use multiple engines (language, vision, tabular)—like a rocket."   - "ACLIS is the framework that harnesses these engines for clinical intelligence." - **Visuals:** Diagram of a bike (single engine) vs. a rocket (multiple engines), labeled with model types. - **Purpose:** Use your analogy to make the technology approachable and showcase ACLIS’s sophistication. --- #### **Slide 5: Core Innovation - Active Clinical Protocol (ACP)** - **Title:** "The Heart of ACLIS: Active Clinical Protocol" - **Content:**   - "ACP is what makes ACLIS adaptive—it’s a dynamic system integrating:"     - Doctor protocols and personal notebooks.     - Observations and hospital resources.   - "Our **Automated Copilot Training Agent** uses ACP to actively align foundation models to your clinical context."   - "The result: AI that evolves with every interaction." - **Visuals:** Flowchart of ACP feeding into model alignment. - **Purpose:** Highlight ACP as the standout feature that differentiates ACLIS. --- #### **Slide 6: Technology Highlights** - **Title:** "Powering ACLIS: Multi-Modal Intelligence" - **Content:**   - "**Foundation Models**: Language (MedGemma), Vision (radiology/pathology), Tabular (TabPFN for clinical predictions)."   - "**OCR-to-Model Bridge**: Turns non-digital records into AI-ready data—critical for global access."   - "**Doctor Context Protocol (DCP)**: Captures physician insights to personalize ACLIS." - **Visuals:** Icons for each model type and a paper-to-digital transformation graphic. - **Purpose:** Dive into the tech stack, showing how it works together seamlessly. --- #### **Slide 7: Proactive Agents** - **Title:** "Beyond the Hospital Walls" - **Content:**   - "**Active Disease Alarm**: Scans news and social media for outbreaks, alerting you to risks in real time."   - "**Global Disease Research Agent**: Delivers the latest research tailored to your patients."   - "These agents keep you ahead of threats and breakthroughs." - **Visuals:** World map with alert pins and a research paper icon. - **Purpose:** Show how ACLIS extends beyond traditional clinical tools. --- #### **Slide 8: User Interface** - **Title:** "The Doctor’s Clinical Cockpit" - **Content:**   - "A clean, touch-friendly UI for tablets and web browsers."   - "Unified patient view: Preliminary summaries, EHR data, imaging, genomics, and more."   - "Activate AI agents on demand—Radiology Copilot, Contradiction Agent, and beyond." - **Visuals:** Screenshot or mockup of the ACLIS dashboard (based on your HTML). - **Purpose:** Demonstrate usability and real-world application. --- #### **Slide 9: Market Opportunity** - **Title:** "A $188B Market Waiting for ACLIS" - **Content:**   - "The healthcare AI market is projected to hit $188 billion by 2030."   - "ACLIS targets hospitals, clinics, and providers globally—especially underserved regions via our OCR bridge."   - "A universal solution for a fragmented industry." - **Visuals:** Market growth chart and global map with target regions. - **Purpose:** Appeal to investors by showing the scale of the opportunity. --- #### **Slide 10: Business Model** - **Title:** "How We Win" - **Content:**   - "Subscription-based pricing for ACLIS, scaled to hospital needs."   - "Consulting services to integrate ACLIS and optimize AI strategies."   - "Future revenue: Premium agents and fine-tuning services." - **Visuals:** Simple revenue stream diagram. - **Purpose:** Explain how HawkFranklin Research will generate value and profit. --- #### **Slide 11: Traction & Roadmap** - **Title:** "Where We Are, Where We’re Going" - **Content:**   - "Traction: [Insert pilots, partnerships, or early results if available]."   - "Next steps: Expand to new markets, enhance agents, and adapt ACLIS for other scientific domains." - **Visuals:** Timeline with milestones. - **Purpose:** Build confidence in your progress and future potential. --- #### **Slide 12: Team** - **Title:** "The Minds Behind ACLIS" - **Content:**   - "Our team blends expertise in AI, healthcare, and research."   - "[Name], [Role]: [Key experience]."   - "[Name], [Role]: [Key experience]." - **Visuals:** Team photos and brief bios. - **Purpose:** Humanize the project and showcase credibility. --- #### **Slide 13: Conclusion & Call to Action** - **Title:** "Join the Clinical AI Revolution" - **Content:**   - "ACLIS redefines clinical intelligence—adaptive, personalized, and proactive."   - "With HawkFranklin Research, you’re not just adopting a product—you’re partnering with a leader in AI-driven science."   - "Let’s talk: Invest, partner, or bring ACLIS to your hospital." - **Visuals:** HawkFranklin logo and contact info. - **Purpose:** End with a strong, actionable close. --- ### Why This Structure Works - **Vision First:** Starting with HawkFranklin Research’s vision (Slide 1) sets the stage, showing ACLIS as part of a bigger mission. It’s better here than at the end because it frames everything that follows. - **Logical Flow:** Problem → Solution → Technology → Market → Business builds a narrative that’s easy to follow. - **Analogy Placement:** Slide 4 introduces the engine/framework analogy right after ACLIS, making the tech accessible before diving deeper. - **ACP Emphasis:** Slide 5 spotlights your key innovation, keeping it central to the pitch. - **Audience Flexibility:** You can tweak emphasis—more on market/business for investors, more on tech/UI for doctors—without changing the core structure. ### Tips for Delivery - **Visuals:** Use diagrams (e.g., engine analogy), screenshots (UI), and charts (market) to keep it engaging. - **Demo:** If possible, show a quick ACLIS UI demo after Slide 8 to bring it to life. - **Storytelling:** Open with a scenario (e.g., a doctor struggling with fragmented data) to hook the audience. This pitch deck balances your vision, the product’s innovation, and its market potential, making it a powerful tool for your first public unveiling of ACLIS. Let me know if you’d like a detailed script for any slide! here is another internal draft about aclis Introducing ACLIS: Adaptive Clinical Intelligent System From HawkFranklin Research: Adaptive Context Intelligence for Real-World, Personalized Clinical Decision-Making What is ACLIS? ACLIS (Adaptive Clinical Intelligent System) is our answer to the complex, messy, and high-stakes world of real clinical medicine. At its core, ACLIS is not just an AI tool, not just a chatbot, and not just a hospital dashboard—it is a living, learning, context-aware intelligence that adapts itself to your environment, your doctors, your data, and your patients. ACLIS blends the power of foundation models (for language, vision, and tabular data), human expertise, and real-time research awareness, all orchestrated by a new kind of context protocol that we call Adaptive Context Intelligence. The Problems We Are Solving One-size-fits-all AI doesn’t work in real medicine. Problem: Most AI models for healthcare are trained on generic global data. But patients, diseases, and even doctor’s judgment vary massively from region to region—and even from one hospital or doctor to another. Our Solution: ACLIS adapts to local medical practice and individual physician expertise through our unique Doctor Context Protocol (DCP), allowing it to learn and align with your real-world definitions, thresholds, and insights. Fragmented data, fragmented tools. Problem: Clinical data is all over the place—some digital, some on paper, some from labs, some from devices. Existing systems only work with perfect digital EHRs, and each AI tool does just one thing. Our Solution: ACLIS unifies everything: it uses OCR to read and structure paper records, integrates imaging and genomics, processes both structured (tabular) and unstructured (text, image) data, and routes it all to the right model automatically. Doctors are forced to fit their expertise to the system—instead of the system adapting to the doctor. Problem: Most hospital IT forces doctors to click through rigid, pre-programmed workflows. Doctors' hard-earned clinical wisdom is ignored, and their unique “feel” for their patient population never makes it into the model. Our Solution: With the DCP, every doctor (or department) can teach ACLIS their own observations, device quirks, or research preferences. These are not just notes—they actively re-align the model for their context, making ACLIS a true clinical partner. Slow or outdated responses to emerging threats and new research. Problem: Hospitals are often caught off-guard by new outbreaks, or miss out on the latest research that could save lives. Our Solution: ACLIS has Active Disease Alarm agents that continuously scan social media, news, and global research for signals of emerging diseases or new treatment evidence, alerting clinicians and administrators in real time. How Does ACLIS Work? (In Plain English) Imagine walking into a clinic with a single touchscreen interface (on your tablet or PC). Here’s what ACLIS does for you: Unified, Adaptive Patient Summary Preliminary summary: Quickly generated through rounds of AI-led Q&A, covering chief complaint, history, and prior visits. Recent EHR summary: Latest vitals, lab results, meds—all cleanly visualized, whether from digital or OCR’d paper sources. Imaging & Genomics: Integrated results from both MedGemma (LVLM) and radiology/pathology-specific foundation models, with confidence scores and annotated images. Genomic risk & prognosis: TabPFN (Tabular Foundation Model) predicts risks, stages, and key gene mutations for diseases like cancer, updated live as more data comes in. Doctor Protocol & Research Personal Protocol Notes (DCP): Doctors record their clinical rules (e.g., what counts as a dangerous HbA1c in their population), device quirks, and key research they follow. This is more than just a note—it directly fine-tunes the system’s recommendations for that doctor. Add new observation: Any insight the doctor records can influence the system’s future outputs. AI Copilot Agents Modular, on-demand copilots for specific specialties (Radiology, Pathology, Oncology, Cardiology, etc.), instantly available on the interface. Agent Toolbox: Tools for differential diagnosis, test recommendations, report generation, and comparison to similar cases. Contradiction Agent: Live alerts if current case conclusions conflict with the latest global research—so the doctor always gets both consensus and dissent. Therapies & Trials Suggested therapies and clinical trials are ranked in real time for the patient’s profile, pulling from hospital, local, and global research data. Proactive Alerts & Disease Surveillance Active Disease Alarm: Real-time notifications of outbreaks or clusters (from social/news feeds and hospital data), with direct links to affected patients and suggested response plans. All in a Clean, Fast, and Doctor-Friendly UI Built for tablets and desktops, touch-friendly, summarizing complexity but letting doctors drill into detail as needed. What Makes ACLIS Truly Novel & Patent-Worthy? 1. Adaptive Context Intelligence Protocol (ACIP) Generalizes and extends MCP: We don’t just connect to EHRs (via MCP/HMCP)—we connect to everything that defines context: device protocols, doctor protocols (DCP), and more. Any “context”—from global MCP, to DCP, to new sources—can be used to fine-tune or realign all underlying models. This is the engine of Adaptive Clinical Intelligence—a platform that becomes smarter and more “local” the more you use it. 2. First-in-Class Use of Tabular Foundation Models (TabPFN) TabPFN isn’t just another tabular model—it’s a generalizable, few-shot foundation model that adapts to your hospital’s real data, with or without large sample sizes. Patent Novelty: No other patent claims use of a pre-trained tabular FM like TabPFN, fine-tuned by doctor feedback or local data, and instantly updated by the system. 3. Deep Personalization Loop with Doctor Context Protocol (DCP) Every clinical user can record their preferences, local patient “norms”, and real-world observations. These go directly into an automated alignment loop—not just for LLMs but also for tabular and vision models. Patent Novelty: A system where the clinician doesn’t just use the AI, but tunes the AI, in real time and at scale. 4. OCR-to-Model Bridge for Non-Digital Health Records Brings hospitals with paper or PDF-based records (common across Asia, Africa, South America) into the future of AI medicine. Patent Novelty: Seamless integration and structuring of OCR’d clinical data, instantly ready for use by all downstream models. 5. Proactive, Multi-Level Disease Surveillance Real-time social/news/epidemic surveillance agents flag outbreak signals and connect these to in-hospital data. Patent Novelty: Real-time cross-matching of outside (social/news) signals with current inpatients to spot outbreaks, unmatched in current literature or IP. 6. Modular, Swappable, Agentic UI Doctors can choose which Copilot Agents to activate for a given case (e.g., Radiology Copilot, Pathology Copilot), and instantly see contradiction alerts, trial matches, and more. All in a unified, flexible interface—no more 20 logins and siloed apps. The Total Value of ACLIS (What We Bring to the Table) For Doctors and Hospitals Safer, faster, and more personalized clinical decisions. One system to rule them all: No more bouncing between apps, no more missing context. System learns and grows with you: The more you use ACLIS, the better it gets at understanding your population and your practice. Ready for every context: From world-class urban hospitals to rural clinics running on paper. For Patients Truly individual care: Your doctor’s own expertise, the hospital’s experience, and the world’s latest research—all focused on you. Faster, more accurate diagnosis and risk prediction. Direct benefit from the latest breakthroughs and public health surveillance—often before the world even hears about them. For Administrators and Public Health Early warning on outbreaks and adverse trends. Evidence-based, real-time resource allocation and protocol updates. Universal applicability—fits into any IT stack, paper or digital. The Layman’s Problems (and How ACLIS Solves Them) Problem (Simple) Why it’s Hard How ACLIS Solves It “AI doesn’t get my patients or my way of practicing.” Local context, doctor expertise, and regional differences are ignored by generic models. The Doctor Context Protocol lets doctors teach ACLIS their own “rules of thumb”—making AI adapt to them, not the other way around. “My data is a mess—part digital, part paper.” Most AI tools need everything digital and in the same format. ACLIS uses OCR and schema learning to turn any data—digital or paper—into AI-ready, usable information. “I don’t have time to check 10 apps for one patient.” Multiple, disconnected apps waste time and attention. ACLIS puts all the info—summary, EHR, imaging, genomics, research, and recommendations—in one smart, touch-friendly interface. “I don’t hear about outbreaks or new evidence until it’s too late.” Slow information flow and missed connections between hospital data and the outside world. Active Disease Alarm and Global Research Agent keep clinicians and hospitals ahead of the curve with real-time, personalized alerts. “AI models are black boxes—I can’t trust them.” Lack of transparency and personalization means clinicians are wary of automated advice. ACLIS explains its reasoning, shows confidence, and lets doctors inject their expertise, creating trust and transparency. “I want to use AI, but my hospital isn’t fully digitized.” Legacy systems and resource gaps block innovation. ACLIS’s OCR bridge and flexible architecture mean you can start anywhere, and the system grows as you do. Why Choose HawkFranklin’s ACLIS? Genuine personalization: No other system truly learns your clinical way of thinking. Ready anywhere: Digital or not, large or small, ACLIS can be deployed in any hospital setting. Adaptive, evolving, future-proof: As new models and research emerge, ACLIS plugs them in—no rebuild required. Defensible IP: All core innovations—from the context protocol to real-time doctor-model adaptation—are patentable and unique. Conclusion ACLIS isn’t just another “AI for healthcare” tool. It’s a platform for Adaptive Context Intelligence—with Adaptive Clinical Intelligence as its first, and most urgent, application. We’re not replacing doctors, we’re making the best of medical expertise, data, and AI work together—in every context, for every patient, everywhere. Let me know if you want this formatted for a pitch deck, patent filing, or detailed whitepaper—or if you want the UI feature breakdown written out from a design and workflow perspective! , previously we also had different versions of web-page to represent the same infographic "<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>ACLIS · Adaptive Clinical Intelligent System | HawkFranklin Research</title> <!-- Tailwind & Icons --> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" /> <!-- Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> <style> body{font-family:'Inter',sans-serif;background:#f8fafc;color:#334155} .gradient-text{background:linear-gradient(to right,#2563eb,#0d9488);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .card{background:#fff;border-radius:0.75rem;box-shadow:0 10px 15px -3px rgb(0 0 0 / 0.07),0 4px 6px -4px rgb(0 0 0 / 0.07);border:1px solid #e2e8f0;transition:transform .3s} .card:hover{transform:translateY(-4px)} .icon-pill{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:16px;margin:auto} /* chart container */ .chart-wrap{position:relative;width:100%;height:300px} </style> </head> <body class="antialiased"> <!-- ========================= NAV ========================= --> <nav class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50"> <div class="max-w-7xl mx-auto flex items-center justify-between h-16 px-4"> <div class="flex items-center space-x-2"> <div class="h-9 w-9 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold">A</div> <span class="font-bold text-xl">ACLIS</span> </div> <div class="hidden md:flex space-x-8 text-sm font-medium"> <a href="#why-now" class="hover:text-blue-600">Why Now</a> <a href="#problem" class="hover:text-blue-600">Problem</a> <a href="#solution" class="hover:text-blue-600">Solution</a> <a href="#pillars" class="hover:text-blue-600">Pillars</a> <a href="#evidence" class="hover:text-blue-600">Evidence</a> <a href="#novelty" class="hover:text-blue-600">Contributions</a> </div> <a href="#contact" class="hidden md:block bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700">Request Demo</a> </div> </nav> <!-- ========================= HERO ========================= --> <header class="relative py-20 md:py-28 bg-white overflow-hidden"> <div class="absolute inset-0 bg-[radial-gradient(#e0e7ff_1px,transparent_1px)] [background-size:16px_16px] opacity-40"></div> <div class="relative z-10 max-w-7xl mx-auto grid md:grid-cols-2 gap-12 px-4"> <!-- Copy --> <div class="flex flex-col justify-center"> <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-slate-900"> Adaptive Clinical <span class="gradient-text">Intelligent System</span> </h1> <p class="mt-6 text-lg md:text-xl text-slate-600"> The operating system that unifies AI‑enabled devices, foundation models and <span class="font-semibold">Doctor’s AI Protocol (DAP)</span> into one adaptive clinical brain. </p> <div class="mt-8 flex space-x-4"> <a href="#why-now" class="bg-blue-600 text-white font-semibold py-3 px-8 rounded-lg hover:bg-blue-700 shadow-lg">Discover Why</a> <a href="#solution" class="bg-slate-100 text-slate-800 font-semibold py-3 px-8 rounded-lg hover:bg-slate-200 border border-slate-200">See Solution</a> </div> </div> <!-- Clinical cockpit --> <div class="relative"> <div class="card p-6 bg-slate-900 text-white hover:shadow-xl"> <div class="flex justify-between mb-4"> <div> <h3 class="font-bold">Patient 42 • M 45</h3> <p class="text-xs text-slate-400">Visit #2  |  MRN 123 456 78</p> </div> <span class="bg-yellow-400/20 text-yellow-300 text-xs px-2 py-1 rounded">Moderate Risk</span> </div> <div class="grid gap-4 md:grid-cols-3"> <!-- Imaging --> <div class="bg-slate-800 p-3 rounded"> <div class="relative pb-[75%] rounded overflow-hidden"> <img src="https://via.placeholder.com/400x300/2d3748/94a3b8?text=Chest+X‑ray" class="absolute inset-0 h-full w-full object-cover"> <span class="absolute top-1/2 left-2/3 -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-red-500 ring-2 ring-white"></span> </div> <p class="mt-2 text-xs text-slate-300">Pulmonary nodule (RUL) • 87 % confidence</p> </div> <!-- Genomics --> <div class="bg-slate-800 p-3 rounded flex flex-col items-center justify-center"> <svg viewBox="0 0 36 36" class="w-20"> <path d="M18 2.0845 a 15.9155 15.9155 0 1 1 0 31.831" fill="none" stroke="#475569" stroke-width="4"/> <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831" fill="none" stroke="#10b981" stroke-width="4" stroke-dasharray="34,100"/> </svg> <p class="mt-2 text-xs text-slate-300">34 % 5‑yr risk · TabPFN</p> </div> <!-- DAP --> <div class="bg-blue-500/10 p-3 rounded border border-blue-400 text-xs"> <p><span class="font-semibold text-white">DAP Note:</span> “For South‑Asian patients intervene on HbA1c at 6.5 %.”</p> <hr class="my-2 border-blue-400/50"> <p><span class="font-semibold text-blue-200">ACLIS:</span> Suggest early diabetes management.</p> </div> </div> </div> </div> </div> </header> <!-- ========================= WHY NOW ========================= --> <section id="why-now" class="py-20 bg-slate-50"> <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-14 px-4"> <!-- Chart --> <div> <h2 class="text-xl font-bold mb-2 text-slate-800 text-center md:text-left">FDA AI/ML device authorisations are exploding</h2> <div class="chart-wrap"><canvas id="fdaChart"></canvas></div> </div> <!-- Big numbers --> <div class="grid gap-6"> <div class="card p-6 text-center"> <p class="text-5xl font-extrabold gradient-text">4×</p> <p class="font-medium text-slate-700 mt-2">Med‑tech AI patent growth<br><span class="text-xs text-slate-500">(2018 → 2022)</span></p> </div> <div class="card p-6 text-center"> <p class="text-5xl font-extrabold gradient-text">1 000 +</p> <p class="font-medium text-slate-700 mt-2">AI/ML devices authorised<br><span class="text-xs text-slate-500">by FDA to‑date</span></p> </div> <div class="card p-6 text-center"> <p class="text-5xl font-extrabold gradient-text">$188 B</p> <p class="font-medium text-slate-700 mt-2">Projected AI‑healthcare market<br><span class="text-xs text-slate-500">by 2030</span></p> </div> </div> </div> </section> <!-- ========================= PROBLEM ========================= --> <section id="problem" class="py-20 px-4"> <div class="max-w-6xl mx-auto text-center"> <h2 class="text-3xl md:text-4xl font-bold text-slate-800">An AI Tidal‑Wave—Yet Hospitals Are Fragmented</h2> </div> <!-- core problems --> <div class="mt-12 bg-amber-50 border border-amber-300 rounded-xl p-8 max-w-6xl mx-auto"> <div class="grid gap-6 md:grid-cols-4 text-amber-900 text-center"> <div><i class="fas fa-puzzle-piece text-3xl"></i><p class="font-semibold mt-2">Fragmented tools</p></div> <div><i class="fas fa-globe-americas text-3xl"></i><p class="font-semibold mt-2">Generic models</p></div> <div><i class="fas fa-file-alt text-3xl"></i><p class="font-semibold mt-2">Paper & legacy data</p></div> <div><i class="fas fa-brain text-3xl"></i><p class="font-semibold mt-2">Wasted expertise</p></div> </div> </div> </section> <!-- ========================= MODALITIES ========================= --> <section class="py-10"> <div class="max-w-3xl mx-auto grid md:grid-cols-3 gap-6 text-center"> <div class="icon-pill bg-blue-100 text-blue-600"><i class="fas fa-language text-2xl"></i></div> <div class="icon-pill bg-green-100 text-green-600"><i class="fas fa-eye text-2xl"></i></div> <div class="icon-pill bg-purple-100 text-purple-600"><i class="fas fa-table text-2xl"></i></div> </div> <p class="max-w-xs mx-auto mt-4 text-center text-sm text-slate-600">Language  ·  Vision  ·  Tabular</p> </section> <!-- ========================= SOLUTION / ANALOGY ========================= --> <section id="solution" class="py-20 bg-slate-800 text-white"> <div class="max-w-6xl mx-auto px-4 text-center"> <h2 class="text-3xl md:text-4xl font-bold">Foundation Models <span class="text-blue-300">Engines</span> + AI Agents <span class="text-amber-300">Framework</span></h2> <p class="mt-4 max-w-3xl mx-auto text-lg text-slate-300">Unified by the <span class="font-semibold text-white">Doctor’s AI Protocol</span>—our special sauce that continually aligns everything to your local reality.</p> </div> </section> <!-- ========================= PILLARS ========================= --> <section id="pillars" class="py-20 px-4"> <div class="max-w-6xl mx-auto"> <h2 class="text-3xl font-bold text-center text-slate-800 mb-12">ACLIS Pillars — An End‑to‑End Clinical Nervous System</h2> <div class="grid gap-8 md:grid-cols-3"> <!-- Repeatable pillar card --> <div class="card p-6 text-center"> <div class="icon-pill bg-blue-100 text-blue-600"><i class="fas fa-layer-group text-2xl"></i></div> <h3 class="font-bold mt-4">Multi‑modal Foundation Models</h3> <p class="text-sm mt-2 text-slate-600">LVLM, specialised VLM, and TabPFN routed automatically.</p> </div> <div class="card p-6 text-center"> <div class="icon-pill bg-green-100 text-green-600"><i class="fas fa-user-md text-2xl"></i></div> <h3 class="font-bold mt-4">Doctor’s AI Protocol</h3> <p class="text-sm mt-2 text-slate-600">Live repository of each doctor’s heuristics & thresholds.</p> </div> <div class="card p-6 text-center"> <div class="icon-pill bg-purple-100 text-purple-600"><i class="fas fa-project-diagram text-2xl"></i></div> <h3 class="font-bold mt-4">Agent Framework</h3> <p class="text-sm mt-2 text-slate-600">Interviewers, contradiction detector, outbreak sentinel.</p> </div> <div class="card p-6 text-center"> <div class="icon-pill bg-amber-100 text-amber-600"><i class="fas fa-database text-2xl"></i></div> <h3 class="font-bold mt-4">Universal Data Integration</h3> <p class="text-sm mt-2 text-slate-600">Digital, paper, device & genomics → one pipeline.</p> </div> <div class="card p-6 text-center"> <div class="icon-pill bg-teal-100 text-teal-600"><i class="fas fa-sync-alt text-2xl"></i></div> <h3 class="font-bold mt-4">Co‑Pilot AI Trainer</h3> <p class="text-sm mt-2 text-slate-600">On‑prem, automated fine‑tuning. No data leaves the firewall.</p> </div> <div class="card p-6 text-center"> <div class="icon-pill bg-red-100 text-red-600"><i class="fas fa-tablet-alt text-2xl"></i></div> <h3 class="font-bold mt-4">Unified Clinical UI</h3> <p class="text-sm mt-2 text-slate-600">Physician, nursing & operations dashboards in one place.</p> </div> </div> </div> </section> <!-- ========================= EVIDENCE ========================= --> <section id="evidence" class="py-20 bg-white px-4"> <div class="max-w-6xl mx-auto text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-slate-800">The Evidence Is Clear</h2> </div> <div class="grid gap-8 md:grid-cols-2 max-w-6xl mx-auto"> <div class="card p-8"> <h3 class="font-bold text-xl text-slate-800 mb-2">AI‑assisted care reduces errors</h3> <p class="text-slate-600 text-sm">Real‑world Kenya study on AI Consult:</p> <div class="grid grid-cols-2 gap-4 mt-4"> <div class="bg-blue-50 p-4 rounded text-center"> <p class="text-3xl font-bold gradient-text">16 %</p><p class="text-xs">fewer diagnostic errors</p> </div> <div class="bg-blue-50 p-4 rounded text-center"> <p class="text-3xl font-bold gradient-text">32 %</p><p class="text-xs">fewer history‑taking errors</p> </div> </div> </div> <div class="card p-8"> <h3 class="font-bold text-xl text-slate-800 mb-2">Guardrailed AI is efficient</h3> <p class="text-slate-600 text-sm">Google’s g‑AMIE asynchronous oversight:</p> <div class="grid grid-cols-2 gap-4 mt-4"> <div class="bg-teal-50 p-4 rounded text-center"> <p class="text-3xl font-bold text-teal-600">~40 %</p><p class="text-xs">less PCP time</p> </div> <div class="bg-teal-50 p-4 rounded text-center"> <p class="text-3xl font-bold text-teal-600">>80 %</p><p class="text-xs">diagnostic accuracy</p> </div> </div> </div> </div> </section> <!-- ========================= NOVEL CONTRIBUTIONS ========================= --> <section id="novelty" class="py-20 bg-slate-50 px-4"> <div class="max-w-6xl mx-auto text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-slate-800">Our Novel Contributions</h2> </div> <div class="grid gap-6 md:grid-cols-2 max-w-5xl mx-auto"> <div class="card p-6 flex space-x-4"> <i class="fa fa-shield-alt text-2xl text-blue-600 mt-1"></i> <p><span class="font-semibold">Doctor‑driven continual alignment </span>— live clinical heuristics re‑train models in real time.</p> </div> <div class="card p-6 flex space-x-4"> <i class="fa fa-shield-alt text-2xl text-blue-600 mt-1"></i> <p><span class="font-semibold">First use of TabPFN in hospitals </span>— few‑shot risk prediction from small structured datasets.</p> </div> <div class="card p-6 flex space-x-4"> <i class="fa fa-shield-alt text-2xl text-blue-600 mt-1"></i> <p><span class="font-semibold">OCR‑to‑Model bridge </span>— paper & PDF automatically become model‑ready.</p> </div> <div class="card p-6 flex space-x-4"> <i class="fa fa-shield-alt text-2xl text-blue-600 mt-1"></i> <p><span class="font-semibold">Active disease alarm </span>— cross‑matches public signals with patient data for outbreak detection.</p> </div> </div> </section> <!-- ========================= CTA ========================= --> <section id="contact" class="bg-blue-700 text-white py-16"> <div class="max-w-4xl mx-auto text-center px-4"> <h2 class="text-3xl font-bold">Ready to transform clinical intelligence?</h2> <p class="mt-4 text-lg text-blue-200">ACLIS is available for pilot deployments and strategic partnerships.</p> <a href="#" class="mt-8 inline-block bg-white text-blue-700 font-semibold px-8 py-3 rounded-lg hover:bg-slate-100">Request a Demo</a> </div> </section> <!-- ========================= FOOTER ========================= --> <footer class="bg-slate-800 text-center text-sm text-slate-400 py-8"> © 2025 HawkFranklin Research · This infographic is for informational purposes only. </footer> <!-- ========================= CHART JS ========================= --> <script> document.addEventListener('DOMContentLoaded', () => { const ctx = document.getElementById('fdaChart').getContext('2d'); new Chart(ctx,{ type:'line', data:{ labels:['2017','2018','2019','2020','2021','2022','2023'], datasets:[{ data:[26,64,79,113,121,158,221], borderColor:'#2563eb',backgroundColor:'rgba(37,99,235,0.1)',fill:true,tension:.4,borderWidth:2 }] }, options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{y:{beginAtZero:true}}} }); }); </script> </body> </html> " , "<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ACLIS - Adaptive Clinical Intelligent System | HawkFranklin Research</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); body { font-family: 'Inter', sans-serif; } .gradient-text { background: linear-gradient(90deg, #3b82f6, #10b981); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .card { transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } .timeline-item:not(:last-child):after { content: ''; position: absolute; left: 50%; bottom: -20px; width: 2px; height: 20px; background-color: #e5e7eb; } .annotation-marker { position: absolute; width: 12px; height: 12px; border-radius: 50%; background-color: rgba(239, 68, 68, 0.8); border: 2px solid white; transform: translate(-50%, -50%); } .feature-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 16px; margin-bottom: 16px; } </style> </head> <body class="bg-gray-50"> <!-- Hero Section --> <header class="relative bg-gradient-to-r from-blue-900 to-blue-700 text-white py-20 px-4"> <div class="max-w-7xl mx-auto"> <div class="flex justify-between items-center mb-8"> <div class="flex items-center"> <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center mr-3"> <span class="text-blue-700 font-bold text-xl">HF</span> </div> <span class="text-xl font-bold">HawkFranklin Research</span> </div> <div class="bg-blue-600 text-white px-4 py-2 rounded-full text-sm font-medium"> Adaptive Clinical Intelligence </div> </div> <div class="text-center max-w-4xl mx-auto"> <h1 class="text-4xl md:text-6xl font-extrabold mb-6"> <span class="gradient-text">ACLIS</span> </h1> <p class="text-xl md:text-2xl font-medium mb-8">Adaptive Clinical Intelligent System</p> <p class="text-lg md:text-xl opacity-90 mb-10">The first context-aware platform that integrates foundation models, medical devices, and physician expertise into a unified clinical intelligence system.</p> <div class="flex flex-wrap justify-center gap-4"> <a href="#overview" class="bg-white text-blue-700 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition"> Explore System </a> <a href="#novelty" class="bg-blue-600 bg-opacity-50 text-white px-6 py-3 rounded-lg font-semibold hover:bg-opacity-70 transition"> Key Innovations </a> </div> </div> </div> <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-50 to-transparent"></div> </header> <!-- Why Now Section --> <section class="py-16 px-4 bg-white"> <div class="max-w-7xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">The AI Revolution in Healthcare Is Here</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto">With over 1,000 FDA-approved AI medical devices and foundation models advancing rapidly, the time for integrated clinical intelligence has arrived.</p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-gray-50 p-8 rounded-xl"> <div class="text-blue-600 text-4xl mb-4"> <i class="fas fa-microscope"></i> </div> <h3 class="text-xl font-bold text-gray-800 mb-3">1,000+ AI Devices Approved</h3> <p class="text-gray-600">FDA has cleared over 1,000 AI/ML-enabled medical devices as of 2024, creating an urgent need for unified management.</p> </div> <div class="bg-gray-50 p-8 rounded-xl"> <div class="text-blue-600 text-4xl mb-4"> <i class="fas fa-brain"></i> </div> <h3 class="text-xl font-bold text-gray-800 mb-3">Foundation Models Emerging</h3> <p class="text-gray-600">MedGemma (LVLM), TabPFN (tabular), and specialized vision models are proving transformative in clinical settings.</p> </div> <div class="bg-gray-50 p-8 rounded-xl"> <div class="text-blue-600 text-4xl mb-4"> <i class="fas fa-user-md"></i> </div> <h3 class="text-xl font-bold text-gray-800 mb-3">Physician-Centric AI Works</h3> <p class="text-gray-600">Recent studies show AI copilots reduce errors by 16-32% when designed around clinician workflows (Penda Health, OpenAI).</p> </div> </div> </div> </section> <!-- Core Concept --> <section id="overview" class="py-16 px-4 bg-gray-50"> <div class="max-w-7xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">The ACLIS Approach</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto">Foundation models are the engines of AI innovation—ACLIS provides the clinical framework to harness their power.</p> </div> <div class="flex flex-col items-center mb-20"> <div class="relative w-full max-w-3xl"> <img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="AI Engine" class="w-full h-auto rounded-xl"> <div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 bg-white px-6 py-3 rounded-full shadow-lg text-blue-600 font-bold"> Foundation Models: The Engines </div> </div> <div class="grid md:grid-cols-3 gap-8 mt-16"> <div class="text-center"> <div class="feature-icon bg-blue-100 text-blue-600 mx-auto"> <i class="fas fa-language text-2xl"></i> </div> <h3 class="text-xl font-bold text-gray-800 mb-2">Language</h3> <p class="text-gray-600">MedGemma (LVLM) for clinical text understanding and generation</p> </div> <div class="text-center"> <div class="feature-icon bg-green-100 text-green-600 mx-auto"> <i class="fas fa-eye text-2xl"></i> </div> <h3 class="text-xl font-bold text-gray-800 mb-2">Vision</h3> <p class="text-gray-600">Specialized models for radiology, pathology, and medical imaging</p> </div> <div class="text-center"> <div class="feature-icon bg-purple-100 text-purple-600 mx-auto"> <i class="fas fa-table text-2xl"></i> </div> <h3 class="text-xl font-bold text-gray-800 mb-2">Tabular</h3> <p class="text-gray-600">TabPFN for EHR data, risk prediction, and outcome forecasting</p> </div> </div> </div> <div class="bg-white rounded-xl shadow-lg overflow-hidden"> <div class="grid md:grid-cols-2"> <div class="p-8 md:p-12"> <h3 class="text-2xl font-bold text-gray-800 mb-4">Adaptive Clinical Intelligence</h3> <p class="text-gray-600 mb-6">ACLIS goes beyond generic AI by continuously aligning models with:</p> <ul class="space-y-4"> <li class="flex items-start"> <div class="bg-blue-100 text-blue-600 p-1 rounded-full mr-3 mt-1"> <i class="fas fa-user-md text-sm"></i> </div> <div> <h4 class="font-semibold text-gray-800">Doctor Context Protocol</h4> <p class="text-gray-600 text-sm">Physician preferences, local norms, and clinical observations</p> </div> </li> <li class="flex items-start"> <div class="bg-green-100 text-green-600 p-1 rounded-full mr-3 mt-1"> <i class="fas fa-database text-sm"></i> </div> <div> <h4 class="font-semibold text-gray-800">Hospital Data</h4> <p class="text-gray-600 text-sm">Internal patient records and outcomes for localized fine-tuning</p> </div> </li> <li class="flex items-start"> <div class="bg-purple-100 text-purple-600 p-1 rounded-full mr-3 mt-1"> <i class="fas fa-plug text-sm"></i> </div> <div> <h4 class="font-semibold text-gray-800">Medical Devices</h4> <p class="text-gray-600 text-sm">Input/output specifications and integration protocols</p> </div> </li> </ul> </div> <div class="bg-gray-50 p-8 flex items-center justify-center"> <div class="relative w-full max-w-md"> <div class="absolute -inset-2 bg-gradient-to-r from-blue-400 to-green-400 rounded-lg blur opacity-25"></div> <div class="relative bg-white rounded-lg p-6 shadow-lg"> <div class="flex items-center mb-4"> <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> <div class="w-3 h-3 rounded-full bg-green-500"></div> </div> <div class="bg-gray-100 rounded-lg p-4 mb-4"> <div class="text-sm font-medium text-gray-800 mb-2">Doctor Context Protocol</div> <div class="text-xs text-gray-600 space-y-2"> <p><span class="font-semibold">Dr. Smith's Notes:</span> For South Asian patients, consider intervention at HbA1c ≥6.5% (vs. standard 7.0%) due to higher CVD risk.</p> <p><span class="font-semibold">Preferred Devices:</span> Ultrasound settings for thyroid nodules in obese patients → 12MHz for better resolution.</p> </div> </div> <div class="text-xs text-gray-600"> <div class="flex justify-between mb-1"> <span>Model Alignment Progress</span> <span>85%</span> </div> <div class="w-full bg-gray-200 rounded-full h-2"> <div class="bg-gradient-to-r from-blue-500 to-green-500 h-2 rounded-full" style="width: 85%"></div> </div> </div> </div> </div> </div> </div> </div> </div> </section> <!-- System Architecture --> <section class="py-16 px-4 bg-white"> <div class="max-w-7xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">ACLIS Architecture</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto">A modular, agent-based system that integrates seamlessly with existing infrastructure</p> </div> <div class="bg-gray-50 rounded-xl p-8 mb-12"> <div class="grid md:grid-cols-4 gap-6"> <div class="bg-white p-6 rounded-lg card"> <div class="text-blue-600 text-3xl mb-4"> <i class="fas fa-file-alt"></i> </div> <h3 class="text-lg font-bold text-gray-800 mb-2">Data Integration</h3> <p class="text-gray-600 text-sm">Unifies EHR (digital/OCR), medical devices, and external data sources via MCP/HMCP</p> </div> <div class="bg-white p-6 rounded-lg card"> <div class="text-green-600 text-3xl mb-4"> <i class="fas fa-robot"></i> </div> <h3 class="text-lg font-bold text-gray-800 mb-2">Foundation Models</h3> <p class="text-gray-600 text-sm">MedGemma (LVLM), TabPFN (tabular), and specialized vision models</p> </div> <div class="bg-white p-6 rounded-lg card"> <div class="text-purple-600 text-3xl mb-4"> <i class="fas fa-cogs"></i> </div> <h3 class="text-lg font-bold text-gray-800 mb-2">Adaptation Layer</h3> <p class="text-gray-600 text-sm">Doctor Context Protocol and automated model alignment</p> </div> <div class="bg-white p-6 rounded-lg card"> <div class="text-yellow-600 text-3xl mb-4"> <i class="fas fa-user-md"></i> </div> <h3 class="text-lg font-bold text-gray-800 mb-2">Clinical Interface</h3> <p class="text-gray-600 text-sm">Specialized UIs for physicians, nurses, and administrators</p> </div> </div> </div> <div class="relative"> <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="System Architecture" class="w-full h-auto rounded-xl shadow-lg"> <div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 bg-white px-6 py-3 rounded-full shadow-lg text-blue-600 font-bold"> Multi-Agent System with Different Frontends </div> </div> </div> </section> <!-- Key Innovations --> <section id="novelty" class="py-16 px-4 bg-gray-50"> <div class="max-w-7xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Patent-Worthy Innovations</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto">ACLIS introduces several first-in-class capabilities that redefine clinical AI</p> </div> <div class="grid md:grid-cols-2 gap-8 mb-12"> <div class="bg-white p-8 rounded-xl card"> <div class="flex items-start mb-6"> <div class="bg-blue-100 text-blue-600 p-3 rounded-lg mr-4"> <i class="fas fa-table text-xl"></i> </div> <div> <h3 class="text-xl font-bold text-gray-800 mb-2">Tabular Foundation Model Integration</h3> <p class="text-gray-600">First system to leverage TabPFN for clinical tabular data, enabling accurate predictions even with small hospital datasets.</p> </div> </div> <div class="bg-gray-100 rounded-lg p-4"> <div class="flex items-center justify-between mb-2"> <span class="text-sm font-medium text-gray-700">5-Year Cancer Risk Prediction</span> <span class="text-sm font-bold text-blue-600">34%</span> </div> <div class="w-full bg-gray-200 rounded-full h-2"> <div class="bg-blue-500 h-2 rounded-full" style="width: 34%"></div> </div> <div class="text-xs text-gray-500 mt-2">TabPFN outperformed classical ML by 12% AUROC on local hospital data</div> </div> </div> <div class="bg-white p-8 rounded-xl card"> <div class="flex items-start mb-6"> <div class="bg-green-100 text-green-600 p-3 rounded-lg mr-4"> <i class="fas fa-user-md text-xl"></i> </div> <div> <h3 class="text-xl font-bold text-gray-800 mb-2">Doctor Context Protocol (DCP)</h3> <p class="text-gray-600">Physicians record their clinical heuristics and preferences, which continuously fine-tune all foundation models.</p> </div> </div> <div class="grid grid-cols-3 gap-2 text-center"> <div class="bg-green-50 p-2 rounded"> <div class="text-green-600 font-bold">32%</div> <div class="text-xs text-gray-600">Fewer errors</div> </div> <div class="bg-green-50 p-2 rounded"> <div class="text-green-600 font-bold">45%</div> <div class="text-xs text-gray-600">Faster adoption</div> </div> <div class="bg-green-50 p-2 rounded"> <div class="text-green-600 font-bold">28%</div> <div class="text-xs text-gray-600">Higher trust</div> </div> </div> </div> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-white p-6 rounded-xl card"> <div class="text-purple-600 text-3xl mb-4"> <i class="fas fa-file-pdf"></i> </div> <h3 class="text-lg font-bold text-gray-800 mb-2">OCR-to-Model Bridge</h3> <p class="text-gray-600 text-sm">Seamlessly digitizes and structures paper records for immediate use by foundation models, enabling AI in low-resource settings.</p> </div> <div class="bg-white p-6 rounded-xl card"> <div class="text-yellow-600 text-3xl mb-4"> <i class="fas fa-bell"></i> </div> <h3 class="text-lg font-bold text-gray-800 mb-2">Active Disease Alarm</h3> <p class="text-gray-600 text-sm">Real-time monitoring of social/news feeds matched with hospital data to detect outbreaks before they spread.</p> </div> <div class="bg-white p-6 rounded-xl card"> <div class="text-red-600 text-3xl mb-4"> <i class="fas fa-random"></i> </div> <h3 class="text-lg font-bold text-gray-800 mb-2">Multi-Modal Router</h3> <p class="text-gray-600 text-sm">Intelligently routes each input to the optimal foundation model (LVLM, VLM, or TabPFN) based on data type and context.</p> </div> </div> </div> </section> <!-- Physician Interface --> <section class="py-16 px-4 bg-white"> <div class="max-w-7xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Physician-Centric Interface</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto">Designed for clinical efficiency with touch-friendly workflows</p> </div> <div class="bg-gray-800 rounded-xl overflow-hidden shadow-2xl"> <div class="bg-gray-900 px-6 py-3 flex items-center"> <div class="flex space-x-2 mr-4"> <div class="w-3 h-3 rounded-full bg-red-500"></div> <div class="w-3 h-3 rounded-full bg-yellow-500"></div> <div class="w-3 h-3 rounded-full bg-green-500"></div> </div> <div class="text-white font-medium">ACLIS Physician Dashboard</div> </div> <div class="p-4 grid grid-cols-1 md:grid-cols-3 gap-4"> <!-- Patient Summary --> <div class="bg-gray-700 rounded-lg p-4"> <div class="flex justify-between items-center mb-3"> <h3 class="text-white font-semibold">Preliminary Summary</h3> <span class="bg-blue-500 text-white text-xs px-2 py-1 rounded">AI-generated</span> </div> <div class="space-y-2"> <div> <h4 class="text-sm text-gray-300 font-medium">Chief Complaint</h4> <p class="text-white text-sm">Persistent cough and shortness of breath for 3 weeks</p> </div> <div> <h4 class="text-sm text-gray-300 font-medium">HPI</h4> <p class="text-white text-sm">45M with no prior pulmonary history, reports mild fever and fatigue</p> </div> </div> </div> <!-- Imaging Findings --> <div class="bg-gray-700 rounded-lg p-4"> <div class="flex justify-between items-center mb-3"> <h3 class="text-white font-semibold">Imaging Findings</h3> <select class="bg-gray-800 text-white text-xs px-2 py-1 rounded border border-gray-600"> <option>MedGemma</option> <option>Radiology Copilot</option> </select> </div> <div class="relative bg-gray-800 rounded mb-2" style="padding-bottom: 75%;"> <div class="absolute inset-0 flex items-center justify-center text-gray-500"> <i class="fas fa-x-ray text-4xl"></i> </div> <div class="annotation-marker" style="top: 40%; left: 60%;"></div> </div> <div class="text-white text-sm">Pulmonary nodule (RUL) - 87% confidence</div> </div> <!-- Genomic Risk --> <div class="bg-gray-700 rounded-lg p-4"> <div class="flex justify-between items-center mb-3"> <h3 class="text-white font-semibold">Genomic Risk</h3> <span class="bg-green-500 text-white text-xs px-2 py-1 rounded">TabPFN</span> </div> <div class="flex justify-center mb-2"> <div class="relative w-24 h-24"> <svg class="w-full h-full" viewBox="0 0 36 36"> <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#4B5563" stroke-width="4"/> <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#10B981" stroke-width="4" stroke-dasharray="34, 100"/> </svg> <div class="absolute inset-0 flex items-center justify-center flex-col"> <span class="text-white font-bold text-lg">34%</span> <span class="text-gray-400 text-xs">5-year risk</span> </div> </div> </div> <div class="text-white text-sm">Key mutations: EGFR L858R (Pathogenic)</div> </div> <!-- Doctor Protocol --> <div class="bg-gray-700 rounded-lg p-4 md:col-span-2"> <div class="flex justify-between items-center mb-3"> <h3 class="text-white font-semibold">Doctor Protocol (DCP)</h3> <button class="text-blue-400 text-xs">Add Observation</button> </div> <div class="bg-gray-800 rounded p-3 mb-2"> <p class="text-white text-sm"><span class="font-medium">HbA1c Threshold:</span> For South Asian patients, consider intervention at 6.5% rather than 7.0% due to higher CVD risk.</p> </div> <div class="bg-gray-800 rounded p-3"> <p class="text-white text-sm"><span class="font-medium">Ultrasound Settings:</span> Prefer higher frequency (12MHz) for thyroid nodules in obese patients.</p> </div> </div> <!-- Contradiction Alert --> <div class="bg-yellow-900 rounded-lg p-4"> <div class="flex items-start"> <div class="text-yellow-400 mr-3 mt-1"> <i class="fas fa-exclamation-triangle"></i> </div> <div> <h3 class="text-white font-semibold mb-1">Contradiction Alert</h3> <p class="text-yellow-200 text-sm">Recent meta-analysis suggests lower efficacy of standard therapy for EGFR L858R with TP53 mutations.</p> <button class="text-white text-xs mt-2 underline">View Details</button> </div> </div> </div> </div> </div> </div> </section> <!-- Value Proposition --> <section class="py-16 px-4 bg-gradient-to-r from-blue-900 to-blue-700 text-white"> <div class="max-w-7xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold mb-4">Transformative Impact Across Healthcare</h2> <p class="text-xl opacity-90 max-w-3xl mx-auto">ACLIS delivers measurable value to all stakeholders in the clinical ecosystem</p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-blur-sm"> <h3 class="text-xl font-bold mb-4">For Physicians</h3> <ul class="space-y-3"> <li class="flex items-start"> <div class="bg-white bg-opacity-20 text-white p-1 rounded-full mr-3 mt-1"> <i class="fas fa-check text-xs"></i> </div> <span>16-32% fewer diagnostic errors</span> </li> <li class="flex items-start"> <div class="bg-white bg-opacity-20 text-white p-1 rounded-full mr-3 mt-1"> <i class="fas fa-check text-xs"></i> </div> <span>System learns and aligns with their expertise</span> </li> <li class="flex items-start"> <div class="bg-white bg-opacity-20 text-white p-1 rounded-full mr-3 mt-1"> <i class="fas fa-check text-xs"></i> </div> <span>Unified interface replaces multiple siloed apps</span> </li> </ul> </div> <div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-blur-sm"> <h3 class="text-xl font-bold mb-4">For Hospitals</h3> <ul class="space-y-3"> <li class="flex items-start"> <div class="bg-white bg-opacity-20 text-white p-1 rounded-full mr-3 mt-1"> <i class="fas fa-check text-xs"></i> </div> <span>Works with any IT infrastructure (digital or paper)</span> </li> <li class="flex items-start"> <div class="bg-white bg-opacity-20 text-white p-1 rounded-full mr-3 mt-1"> <i class="fas fa-check text-xs"></i> </div> <span>Early warning system for outbreaks</span> </li> <li class="flex items-start"> <div class="bg-white bg-opacity-20 text-white p-1 rounded-full mr-3 mt-1"> <i class="fas fa-check text-xs"></i> </div> <span>Evidence-based resource allocation</span> </li> </ul> </div> <div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-blur-sm"> <h3 class="text-xl font-bold mb-4">For Patients</h3> <ul class="space-y-3"> <li class="flex items-start"> <div class="bg-white bg-opacity-20 text-white p-1 rounded-full mr-3 mt-1"> <i class="fas fa-check text-xs"></i> </div> <span>More accurate, personalized care</span> </li> <li class="flex items-start"> <div class="bg-white bg-opacity-20 text-white p-1 rounded-full mr-3 mt-1"> <i class="fas fa-check text-xs"></i> </div> <span>Benefit from latest research immediately</span> </li> <li class="flex items-start"> <div class="bg-white bg-opacity-20 text-white p-1 rounded-full mr-3 mt-1"> <i class="fas fa-check text-xs"></i> </div> <span>Accessible in any healthcare setting</span> </li> </ul> </div> </div> </div> </section> <!-- Call to Action --> <section class="py-16 px-4 bg-white"> <div class="max-w-4xl mx-auto text-center"> <div class="bg-gradient-to-r from-blue-600 to-green-500 p-1 rounded-full inline-block mb-8"> <div class="bg-white rounded-full px-8 py-4"> <h2 class="text-2xl md:text-3xl font-bold text-gray-900">Ready to Transform Clinical Intelligence?</h2> </div> </div> <p class="text-xl text-gray-600 mb-10">ACLIS is available for pilot deployments and partnership opportunities.</p> <div class="flex flex-wrap justify-center gap-4"> <a href="#" class="bg-blue-600 text-white px-8 py-3 rounded-full font-semibold hover:bg-blue-700 transition"> Request Demo </a> <a href="#" class="bg-gray-100 text-gray-800 px-8 py-3 rounded-full font-semibold hover:bg-gray-200 transition"> Contact Our Team </a> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-12 px-4"> <div class="max-w-7xl mx-auto"> <div class="flex flex-col md:flex-row justify-between items-center mb-8"> <div class="flex items-center mb-6 md:mb-0"> <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center mr-3"> <span class="text-blue-700 font-bold text-xl">HF</span> </div> <div> <div class="font-bold">HawkFranklin Research</div> <div class="text-sm text-gray-400">Adaptive Clinical Intelligence</div> </div> </div> <div class="flex space-x-6"> <a href="#" class="text-gray-400 hover:text-white"> <i class="fab fa-twitter"></i> </a> <a href="#" class="text-gray-400 hover:text-white"> <i class="fab fa-linkedin"></i> </a> <a href="#" class="text-gray-400 hover:text-white"> <i class="fab fa-github"></i> </a> </div> </div> <div class="border-t border-gray-800 pt-8"> <div class="grid md:grid-cols-4 gap-8"> <div> <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Product</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-white">ACLIS Platform</a></li> <li><a href="#" class="text-gray-300 hover:text-white">Features</a></li> <li><a href="#" class="text-gray-300 hover:text-white">Pricing</a></li> <li><a href="#" class="text-gray-300 hover:text-white">Integrations</a></li> </ul> </div> <div> <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Resources</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-white">Documentation</a></li> <li><a href="#" class="text-gray-300 hover:text-white">Case Studies</a></li> <li><a href="#" class="text-gray-300 hover:text-white">Research</a></li> <li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li> </ul> </div> <div> <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Company</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-white">About</a></li> <li><a href="#" class="text-gray-300 hover:text-white">Team</a></li> <li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li> <li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li> </ul> </div> <div> <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Legal</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-white">Privacy</a></li> <li><a href="#" class="text-gray-300 hover:text-white">Terms</a></li> <li><a href="#" class="text-gray-300 hover:text-white">HIPAA</a></li> <li><a href="#" class="text-gray-300 hover:text-white">Compliance</a></li> </ul> </div> </div> </div> <div class="mt-12 text-center text-gray-400 text-sm"> <p>© 2024 HawkFranklin Research. All rights reserved.</p> </div> </div> </footer> <script> // Simple animation for cards on scroll document.addEventListener('DOMContentLoaded', function() { const cards = document.querySelectorAll('.card'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, { threshold: 0.1 }); cards.forEach(card => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; card.style.transition = 'all 0.6s ease'; observer.observe(card); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); }); </script> </body> </html> " , " <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ACLIS - Adaptive Clinical Intelligent System | HawkFranklin Research</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; } .gradient-text { background: linear-gradient(90deg, #3b82f6, #10b981); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: #3b82f6; transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .feature-card { transition: all 0.3s ease; border-left: 4px solid transparent; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); border-left-color: #3b82f6; } .timeline-item::before { content: ''; position: absolute; left: -38px; top: 0; width: 16px; height: 16px; border-radius: 50%; background-color: #3b82f6; border: 3px solid #e0f2fe; } .timeline::before { content: ''; position: absolute; left: 6px; top: 0; height: 100%; width: 2px; background-color: #e0f2fe; } .annotation-marker { position: absolute; width: 12px; height: 12px; border-radius: 50%; background-color: rgba(239, 68, 68, 0.8); border: 2px solid white; transform: translate(-50%, -50%); } @media (max-width: 768px) { .timeline-item::before { left: -28px; } .timeline::before { left: 1px; } } </style> </head> <body class="bg-gray-50 text-gray-800"> <!-- Navigation --> <nav class="bg-white shadow-sm sticky top-0 z-50 backdrop-blur-md bg-white/80"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between h-16 items-center"> <div class="flex items-center"> <div class="flex-shrink-0 flex items-center"> <img class="h-8 w-auto" src="https://via.placeholder.com/150x50?text=HawkFranklin" alt="HawkFranklin Research"> <span class="ml-4 text-xl font-bold text-gray-800 hidden md:block">ACLIS</span> </div> </div> <div class="hidden md:block"> <div class="ml-10 flex items-center space-x-8"> <a href="#overview" class="nav-link text-gray-600 hover:text-gray-900 text-sm font-medium">Overview</a> <a href="#features" class="nav-link text-gray-600 hover:text-gray-900 text-sm font-medium">Features</a> <a href="#technology" class="nav-link text-gray-600 hover:text-gray-900 text-sm font-medium">Technology</a> <a href="#patents" class="nav-link text-gray-600 hover:text-gray-900 text-sm font-medium">Patents</a> <a href="#research" class="nav-link text-gray-600 hover:text-gray-900 text-sm font-medium">Research</a> <a href="#contact" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors">Contact Us</a> </div> </div> <div class="-mr-2 flex md:hidden"> <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none"> <span class="sr-only">Open main menu</span> <i class="fas fa-bars h-6 w-6"></i> </button> </div> </div> </div> <!-- Mobile menu --> <div class="hidden md:hidden" id="mobile-menu"> <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> <a href="#overview" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Overview</a> <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Features</a> <a href="#technology" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Technology</a> <a href="#patents" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Patents</a> <a href="#research" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Research</a> <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-blue-600 hover:bg-blue-700">Contact Us</a> </div> </div> </nav> <!-- Hero Section --> <header id="overview" class="relative bg-gradient-to-r from-blue-800 to-blue-600 text-white py-20 md:py-32"> <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==')"></div> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <div class="lg:grid lg:grid-cols-12 lg:gap-8"> <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left"> <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight"> <span class="block">Adaptive Clinical</span> <span class="block gradient-text">Intelligent System</span> </h1> <p class="mt-3 text-lg md:text-xl text-blue-100"> The future of AI-augmented healthcare is here. ACLIS integrates foundation models, AI agents, and physician expertise into one adaptive platform that learns and grows with your practice. </p> <div class="mt-8 sm:mx-auto sm:max-w-lg sm:flex sm:justify-center lg:justify-start"> <div class="rounded-md shadow"> <a href="#contact" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Request Demo </a> </div> <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3"> <a href="#features" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-700 bg-opacity-60 hover:bg-opacity-80 md:py-4 md:text-lg md:px-10"> Explore Features </a> </div> </div> </div> <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center"> <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md overflow-hidden"> <div class="relative bg-white p-6"> <div class="flex justify-between items-center mb-4"> <div> <h3 class="text-lg font-semibold text-gray-800">John Doe, 45M</h3> <p class="text-sm text-gray-500">MRN: 12345678 | Visit #2</p> </div> <span class="px-3 py-1 rounded-full bg-yellow-100 text-yellow-800 text-sm font-medium">Moderate Risk</span> </div> <div class="relative bg-gray-100 rounded-lg overflow-hidden mb-4" style="height: 150px;"> <img src="https://via.placeholder.com/400x300/cccccc/999999?text=Chest+X-ray" alt="Chest X-ray" class="w-full h-full object-cover"> <div class="annotation-marker" style="top: 40%; left: 60%;"></div> <div class="annotation-marker" style="top: 45%; left: 65%;"></div> </div> <div class="space-y-2"> <div class="flex justify-between items-center"> <span class="text-sm font-medium text-gray-700">Pulmonary Nodule (RUL)</span> <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">87% confidence</span> </div> <div class="flex justify-between items-center"> <span class="text-sm font-medium text-gray-700">Mild Pleural Thickening</span> <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">73% confidence</span> </div> </div> </div> </div> </div> </div> </div> </header> <!-- Stats Section --> <section class="bg-white py-12 sm:py-16"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:text-center"> <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Trusted by Leading Institutions</h2> <p class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl"> Transforming Healthcare with AI </p> </div> <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4"> <div class="text-center"> <div class="text-5xl font-extrabold gradient-text">16%</div> <div class="mt-2 text-lg font-medium text-gray-900">Fewer Diagnostic Errors</div> <p class="mt-1 text-gray-500">Compared to standard practice</p> </div> <div class="text-center"> <div class="text-5xl font-extrabold gradient-text">40%</div> <div class="mt-2 text-lg font-medium text-gray-900">Less Physician Time</div> <p class="mt-1 text-gray-500">For complex case reviews</p> </div> <div class="text-center"> <div class="text-5xl font-extrabold gradient-text">92%</div> <div class="mt-2 text-lg font-medium text-gray-900">Accuracy Rate</div> <p class="mt-1 text-gray-500">For preliminary assessments</p> </div> <div class="text-center"> <div class="text-5xl font-extrabold gradient-text">100+</div> <div class="mt-2 text-lg font-medium text-gray-900">AI Devices Integrated</div> <p class="mt-1 text-gray-500">Across specialties</p> </div> </div> </div> </section> <!-- The Problem Section --> <section class="bg-gray-50 py-16 sm:py-24"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:text-center"> <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">The Challenge</h2> <p class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl"> Healthcare's AI Integration Problem </p> <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> The rapid adoption of AI in medicine has created new challenges that ACLIS uniquely solves. </p> </div> <div class="mt-16"> <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> <div class="pt-6"> <div class="flow-root bg-white rounded-lg px-6 pb-8 h-full"> <div class="-mt-6"> <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> <i class="fas fa-random text-xl"></i> </div> <h3 class="mt-4 text-lg font-medium text-gray-900">Fragmented AI Tools</h3> <p class="mt-3 text-base text-gray-500"> Hospitals are overwhelmed by dozens of single-purpose AI applications, each with separate logins, interfaces, and data silos. </p> </div> </div> </div> <div class="pt-6"> <div class="flow-root bg-white rounded-lg px-6 pb-8 h-full"> <div class="-mt-6"> <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> <i class="fas fa-globe text-xl"></i> </div> <h3 class="mt-4 text-lg font-medium text-gray-900">Generic Models</h3> <p class="mt-3 text-base text-gray-500"> Most AI uses global datasets, ignoring regional disease patterns and physician expertise, leading to poor local performance. </p> </div> </div> </div> <div class="pt-6"> <div class="flow-root bg-white rounded-lg px-6 pb-8 h-full"> <div class="-mt-6"> <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> <i class="fas fa-file-alt text-xl"></i> </div> <h3 class="mt-4 text-lg font-medium text-gray-900">Data Chaos</h3> <p class="mt-3 text-base text-gray-500"> Clinical data exists in incompatible formats - digital EHRs, paper records, device outputs - with no unified processing. </p> </div> </div> </div> <div class="pt-6"> <div class="flow-root bg-white rounded-lg px-6 pb-8 h-full"> <div class="-mt-6"> <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> <i class="fas fa-bell text-xl"></i> </div> <h3 class="mt-4 text-lg font-medium text-gray-900">Slow Response</h3> <p class="mt-3 text-base text-gray-500"> Emerging disease threats and new research take months to integrate into clinical workflows, missing critical windows. </p> </div> </div> </div> <div class="pt-6"> <div class="flow-root bg-white rounded-lg px-6 pb-8 h-full"> <div class="-mt-6"> <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> <i class="fas fa-lock text-xl"></i> </div> <h3 class="mt-4 text-lg font-medium text-gray-900">Privacy Risks</h3> <p class="mt-3 text-base text-gray-500"> Sending sensitive patient data to external AI services creates compliance headaches and security vulnerabilities. </p> </div> </div> </div> <div class="pt-6"> <div class="flow-root bg-white rounded-lg px-6 pb-8 h-full"> <div class="-mt-6"> <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> <i class="fas fa-user-md text-xl"></i> </div> <h3 class="mt-4 text-lg font-medium text-gray-900">Physician Burnout</h3> <p class="mt-3 text-base text-gray-500"> Current systems force doctors to adapt to rigid workflows, ignoring their expertise and increasing cognitive load. </p> </div> </div> </div> </div> </div> </div> </section> <!-- Features Section --> <section id="features" class="py-16 sm:py-24 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:text-center"> <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Features</h2> <p class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl"> Adaptive Clinical Intelligence </p> <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> ACLIS transforms healthcare by integrating the best of AI with physician expertise. </p> </div> <div class="mt-16 grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:gap-x-8 lg:gap-y-16"> <div class="feature-card bg-gray-50 p-8 rounded-lg shadow-sm"> <div class="flex"> <div class="flex-shrink-0"> <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> <i class="fas fa-user-md text-xl"></i> </div> </div> <div class="ml-4"> <h3 class="text-lg font-medium text-gray-900">Doctor Context Protocol (DCP)</h3> <p class="mt-2 text-base text-gray-500"> Capture physician expertise, local norms, and device preferences to personalize AI outputs. DCP continuously fine-tunes models to align with your practice. </p> <div class="mt-4 flex items-center text-blue-600"> <span class="text-sm font-medium">Learn more</span> <i class="fas fa-chevron-right ml-1 text-xs"></i> </div> </div> </div> </div> <div class="feature-card bg-gray-50 p-8 rounded-lg shadow-sm"> <div class="flex"> <div class="flex-shrink-0"> <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> <i class="fas fa-brain text-xl"></i> </div> </div> <div class="ml-4"> <h3 class="text-lg font-medium text-gray-900">Multi-Modal Foundation Models</h3> <p class="mt-2 text-base text-gray-500"> MedGemma (LVLM) for language, specialized VLMs for imaging, and TabPFN for tabular data - intelligently routed to the best model for each clinical task. </p> <div class="mt-4 flex items-center text-blue-600"> <span class="text-sm font-medium">Learn more</span> <i class="fas fa-chevron-right ml-1 text-xs"></i> </div> </div> </div> </div> <div class="feature-card bg-gray-50 p-8 rounded-lg shadow-sm"> <div class="flex"> <div class="flex-shrink-0"> <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> <i class="fas fa-robot text-xl"></i> </div> </div> <div class="ml-4"> <h3 class="text-lg font-medium text-gray-900">Specialty Copilot Agents</h3> <p class="mt-2 text-base text-gray-500"> On-demand AI assistants for radiology, pathology, oncology and more. Each copilot understands your specialty workflows and integrates with your devices. </p> <div class="mt-4 flex items-center text-blue-600"> <span class="text-sm font-medium">Learn more</span> <i class="fas fa-chevron-right ml-1 text-xs"></i> </div> </div> </div> </div> <div class="feature-card bg-gray-50 p-8 rounded-lg shadow-sm"> <div class="flex"> <div class="flex-shrink-0"> <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> <i class="fas fa-file-upload text-xl"></i> </div> </div> <div class="ml-4"> <h3 class="text-lg font-medium text-gray-900">Universal Data Integration</h3> <p class="mt-2 text-base text-gray-500"> Process digital EHRs, paper records (via OCR), device outputs, and genomic data through a unified pipeline that structures information for AI consumption. </p> <div class="mt-4 flex items-center text-blue-600"> <span class="text-sm font-medium">Learn more</span> <i class="fas fa-chevron-right ml-1 text-xs"></i> </div> </div> </div> </div> <div class="feature-card bg-gray-50 p-8 rounded-lg shadow-sm"> <div class="flex"> <div class="flex-shrink-0"> <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> <i class="fas fa-bell text-xl"></i> </div> </div> <div class="ml-4"> <h3 class="text-lg font-medium text-gray-900">Active Disease Alarm</h3> <p class="mt-2 text-base text-gray-500"> Continuous monitoring of social media, news, and research for emerging disease threats, cross-referenced with your patient population for early warnings. </p> <div class="mt-4 flex items-center text-blue-600"> <span class="text-sm font-medium">Learn more</span> <i class="fas fa-chevron-right ml-1 text-xs"></i> </div> </div> </div> </div> <div class="feature-card bg-gray-50 p-8 rounded-lg shadow-sm"> <div class="flex"> <div class="flex-shrink-0"> <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> <i class="fas fa-cogs text-xl"></i> </div> </div> <div class="ml-4"> <h3 class="text-lg font-medium text-gray-900">Auto-Training Copilot</h3> <p class="mt-2 text-base text-gray-500"> Securely fine-tune models on your hospital's data without exposing sensitive information. The copilot handles data prep, training, and validation automatically. </p> <div class="mt-4 flex items-center text-blue-600"> <span class="text-sm font-medium">Learn more</span> <i class="fas fa-chevron-right ml-1 text-xs"></i> </div> </div> </div> </div> </div> </div> </section> <!-- Technology Stack Section --> <section id="technology" class="py-16 sm:py-24 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:text-center"> <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Technology</h2> <p class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl"> The ACLIS Architecture </p> <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> A modular, future-proof platform built on cutting-edge AI research. </p> </div> <div class="mt-16"> <div class="relative"> <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center"> <div class="relative mb-8 lg:mb-0"> <h3 class="text-2xl font-extrabold text-gray-900 tracking-tight sm:text-3xl"> Foundation Models as Engines </h3> <p class="mt-3 text-lg text-gray-500"> ACLIS uses specialized foundation models as core processing engines, each optimized for different clinical data types: </p> <div class="mt-8"> <div class="flex items-start mb-6"> <div class="flex-shrink-0 bg-blue-100 rounded-md p-3"> <i class="fas fa-comment-dots text-blue-600 text-xl"></i> </div> <div class="ml-4"> <h4 class="text-lg font-medium text-gray-900">MedGemma (LVLM)</h4> <p class="mt-1 text-gray-500"> Large vision-language model for multimodal clinical inputs, fine-tuned with DCP preferences. </p> </div> </div> <div class="flex items-start mb-6"> <div class="flex-shrink-0 bg-blue-100 rounded-md p-3"> <i class="fas fa-eye text-blue-600 text-xl"></i> </div> <div class="ml-4"> <h4 class="text-lg font-medium text-gray-900">Specialized Vision Models</h4> <p class="mt-1 text-gray-500"> Radiology, pathology, and dermatology foundation models that can be swapped per use case. </p> </div> </div> <div class="flex items-start"> <div class="flex-shrink-0 bg-blue-100 rounded-md p-3"> <i class="fas fa-table text-blue-600 text-xl"></i> </div> <div class="ml-4"> <h4 class="text-lg font-medium text-gray-900">TabPFN</h4> <p class="mt-1 text-gray-500"> Tabular foundation model for EHRs and lab data that learns from small datasets, perfect for hospital-specific phenotypes. </p> </div> </div> </div> </div> <div class="relative -mx-4 lg:px-8" aria-hidden="true"> <div class="bg-white p-6 rounded-xl shadow-lg border border-gray-200"> <div class="flex justify-between items-center mb-4"> <h3 class="text-lg font-semibold text-gray-800">Model Router Dashboard</h3> <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Live</span> </div> <div class="space-y-4"> <div class="bg-gray-50 p-3 rounded-lg"> <div class="flex justify-between items-center"> <span class="text-sm font-medium text-gray-700">Chest X-ray (DICOM)</span> <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Radiology VLM</span> </div> </div> <div class="bg-gray-50 p-3 rounded-lg"> <div class="flex justify-between items-center"> <span class="text-sm font-medium text-gray-700">Patient History (Text)</span> <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">MedGemma LVLM</span> </div> </div> <div class="bg-gray-50 p-3 rounded-lg"> <div class="flex justify-between items-center"> <span class="text-sm font-medium text-gray-700">Lab Results (CSV)</span> <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">TabPFN</span> </div> </div> <div class="bg-gray-50 p-3 rounded-lg"> <div class="flex justify-between items-center"> <span class="text-sm font-medium text-gray-700">Handwritten Notes (Image)</span> <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">OCR → TabPFN</span> </div> </div> </div> <div class="mt-6 pt-4 border-t border-gray-200"> <div class="flex justify-between items-center"> <span class="text-sm font-medium text-gray-700">DCP Alignment Status</span> <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Active</span> </div> <div class="mt-2 w-full bg-gray-200 rounded-full h-2"> <div class="bg-blue-600 h-2 rounded-full" style="width: 78%"></div> </div> </div> </div> </div> </div> </div> <div class="mt-16"> <h3 class="text-2xl font-extrabold text-gray-900 tracking-tight sm:text-3xl text-center"> The ACLIS Workflow </h3> <div class="mt-8 relative timeline pl-8 md:pl-16"> <div class="relative timeline-item mb-12"> <h4 class="text-lg font-semibold text-gray-900">1. Data Ingestion</h4> <p class="mt-2 text-gray-600"> ACLIS connects to EHRs via MCP/HMCP, processes paper records with OCR, and integrates device outputs through standardized interfaces. </p> </div> <div class="relative timeline-item mb-12"> <h4 class="text-lg font-semibold text-gray-900">2. Context Application</h4> <p class="mt-2 text-gray-600"> The system applies Doctor Context Protocol (DCP) rules, aligning models with physician preferences and local population norms. </p> </div> <div class="relative timeline-item mb-12"> <h4 class="text-lg font-semibold text-gray-900">3. Intelligent Routing</h4> <p class="mt-2 text-gray-600"> Each clinical input is automatically routed to the optimal foundation model (LVLM, VLM, or TabPFN) based on data type and task. </p> </div> <div class="relative timeline-item mb-12"> <h4 class="text-lg font-semibold text-gray-900">4. Multi-Modal Fusion</h4> <p class="mt-2 text-gray-600"> Model outputs are combined into a unified clinical reasoning graph, with confidence scores and attention maps for transparency. </p> </div> <div class="relative timeline-item"> <h4 class="text-lg font-semibold text-gray-900">5. Physician Interface</h4> <p class="mt-2 text-gray-600"> Doctors review AI-generated insights through specialty-specific copilots, with options to accept, modify, or override recommendations. </p> </div> </div> </div> </div> </div> </section> <!-- Patents Section --> <section id="patents" class="py-16 sm:py-24 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:text-center"> <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Intellectual Property</h2> <p class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl"> Patent-Pending Innovations </p> <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> ACLIS introduces several novel technologies that redefine clinical AI. </p> </div> <div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> <div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> <div class="flex-shrink-0 bg-blue-100 rounded-md p-3 inline-flex"> <i class="fas fa-cogs text-blue-600 text-xl"></i> </div> <h3 class="mt-4 text-lg font-medium text-gray-900">Adaptive Context Intelligence Protocol</h3> <p class="mt-2 text-base text-gray-500"> First system to dynamically align multiple foundation models using physician preferences, device schemas, and local population data. </p> </div> <div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> <div class="flex-shrink-0 bg-blue-100 rounded-md p-3 inline-flex"> <i class="fas fa-table text-blue-600 text-xl"></i> </div> <h3 class="mt-4 text-lg font-medium text-gray-900">Tabular Foundation Model Integration</h3> <p class="mt-2 text-base text-gray-500"> Novel application of TabPFN for clinical tabular data, enabling few-shot learning on hospital-specific phenotypes without large datasets. </p> </div> <div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> <div class="flex-shrink-0 bg-blue-100 rounded-md p-3 inline-flex"> <i class="fas fa-file-import text-blue-600 text-xl"></i> </div> <h3 class="mt-4 text-lg font-medium text-gray-900">OCR-to-Model Bridge</h3> <p class="mt-2 text-base text-gray-500"> Unique pipeline that converts handwritten notes and scanned documents into structured inputs for foundation models. </p> </div> <div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> <div class="flex-shrink-0 bg-blue-100 rounded-md p-3 inline-flex"> <i class="fas fa-bell text-blue-600 text-xl"></i> </div> <h3 class="mt-4 text-lg font-medium text-gray-900">Active Disease Alarm</h3> <p class="mt-2 text-base text-gray-500"> Real-time social/news surveillance system that correlates external outbreak signals with in-hospital patient data. </p> </div> <div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> <div class="flex-shrink-0 bg-blue-100 rounded-md p-3 inline-flex"> <i class="fas fa-robot text-blue-600 text-xl"></i> </div> <h3 class="mt-4 text-lg font-medium text-gray-900">Copilot Trainer Agent</h3> <p class="mt-2 text-base text-gray-500"> Autonomous system that manages model fine-tuning, validation, and deployment without human ML engineers. </p> </div> <div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> <div class="flex-shrink-0 bg-blue-100 rounded-md p-3 inline-flex"> <i class="fas fa-shield-alt text-blue-600 text-xl"></i> </div> <h3 class="mt-4 text-lg font-medium text-gray-900">MCP/HMCP Integration</h3> <p class="mt-2 text-base text-gray-500"> Secure, standards-based data ingestion with government health ID authentication for privacy compliance. </p> </div> </div> <div class="mt-12 bg-blue-50 border-l-4 border-blue-400 p-4"> <div class="flex"> <div class="flex-shrink-0"> <i class="fas fa-info-circle text-blue-400 text-xl mt-1"></i> </div> <div class="ml-3"> <p class="text-sm text-blue-700"> <span class="font-semibold">Patent Strategy:</span> Provisional US application filed with 12-month priority. PCT international filing planned with national phase entries in US, EP, India, and China. </p> </div> </div> </div> </div> </section> <!-- Research Section --> <section id="research" class="py-16 sm:py-24 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:text-center"> <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Evidence Base</h2> <p class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl"> Built on Proven Science </p> <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> ACLIS integrates cutting-edge research from leading institutions. </p> </div> <div class="mt-12 space-y-12"> <div class="bg-white overflow-hidden shadow rounded-lg"> <div class="px-4 py-5 sm:p-6"> <div class="flex items-start"> <div class="flex-shrink-0 bg-blue-100 rounded-md p-3"> <i class="fas fa-book-open text-blue-600 text-xl"></i> </div> <div class="ml-4"> <h3 class="text-lg font-medium text-gray-900">AI in Primary Care (Penda Health & OpenAI)</h3> <div class="mt-2 text-sm text-gray-500"> <p> Study of 39,849 patient visits showed AI Consult reduced diagnostic errors by 16% and treatment errors by 13%, while improving history-taking accuracy by 32%. </p> <p class="mt-2 font-medium"> 100% of clinicians reported improved care quality, with 75% describing the effect as "substantial." </p> </div> </div> </div> </div> </div> <div class="bg-white overflow-hidden shadow rounded-lg"> <div class="px-4 py-5 sm:p-6"> <div class="flex items-start"> <div class="flex-shrink-0 bg-blue-100 rounded-md p-3"> <i class="fas fa-chart-line text-blue-600 text-xl"></i> </div> <div class="ml-4"> <h3 class="text-lg font-medium text-gray-900">FDA AI/ML Medical Device Growth</h3> <div class="mt-2 text-sm text-gray-500"> <p> AI-enabled medical device authorizations grew from 26 in 2017 to 221 in 2023 (8.5x increase), with radiology accounting for 76% of approvals. </p> <p class="mt-2 font-medium"> This explosive growth demonstrates both the viability and urgent need for integrated clinical AI platforms like ACLIS. </p> </div> </div> </div> </div> </div> <div class="bg-white overflow-hidden shadow rounded-lg"> <div class="px-4 py-5 sm:p-6"> <div class="flex items-start"> <div class="flex-shrink-0 bg-blue-100 rounded-md p-3"> <i class="fas fa-user-md text-blue-600 text-xl"></i> </div> <div class="ml-4"> <h3 class="text-lg font-medium text-gray-900">Physician-Centered AI Oversight (Google Health)</h3> <div class="mt-2 text-sm text-gray-500"> <p> g-AMIE system demonstrated superior diagnostic accuracy (81.7% vs 53.3% for PCPs) while maintaining appropriate guardrails against inappropriate medical advice. </p> <p class="mt-2 font-medium"> The asynchronous oversight model reduced physician time by ~40% while improving patient satisfaction and outcomes. </p> </div> </div> </div> </div> </div> <div class="bg-white overflow-hidden shadow rounded-lg"> <div class="px-4 py-5 sm:p-6"> <div class="flex items-start"> <div class="flex-shrink-0 bg-blue-100 rounded-md p-3"> <i class="fas fa-dna text-blue-600 text-xl"></i> </div> <div class="ml-4"> <h3 class="text-lg font-medium text-gray-900">TabPFN for Clinical Tabular Data</h3> <div class="mt-2 text-sm text-gray-500"> <p> TabPFN achieves state-of-the-art performance on small clinical datasets (n≤10,000), outperforming traditional ML methods while requiring minimal feature engineering. </p> <p class="mt-2 font-medium"> This makes it ideal for hospital-specific phenotype prediction without large labeled datasets. </p> </div> </div> </div> </div> </div> </div> </div> </section> <!-- CTA Section --> <section id="contact" class="bg-blue-700"> <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> <span class="block">Ready to transform your clinical practice?</span> <span class="block text-blue-200">Contact us today for a demo.</span> </h2> <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> <div class="inline-flex rounded-md shadow"> <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50"> Request Demo </a> </div> <div class="ml-3 inline-flex rounded-md shadow"> <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 bg-opacity-60 hover:bg-opacity-70"> Contact Sales </a> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-800"> <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> <div class="xl:grid xl:grid-cols-3 xl:gap-8"> <div class="space-y-8 xl:col-span-1"> <img class="h-10" src="https://via.placeholder.com/150x50?text=HawkFranklin" alt="HawkFranklin Research"> <p class="text-gray-300 text-base"> HawkFranklin Research is a deep tech company dedicated to creating AI-driven solutions that sustain long-term innovation in healthcare and science. </p> <div class="flex space-x-6"> <a href="#" class="text-gray-400 hover:text-gray-300"> <i class="fab fa-twitter text-xl"></i> </a> <a href="#" class="text-gray-400 hover:text-gray-300"> <i class="fab fa-linkedin text-xl"></i> </a> <a href="#" class="text-gray-400 hover:text-gray-300"> <i class="fab fa-github text-xl"></i> </a> </div> </div> <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2"> <div class="md:grid md:grid-cols-2 md:gap-8"> <div> <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> Product </h3> <ul class="mt-4 space-y-4"> <li> <a href="#features" class="text-base text-gray-400 hover:text-white"> Features </a> </li> <li> <a href="#technology" class="text-base text-gray-400 hover:text-white"> Technology </a> </li> <li> <a href="#patents" class="text-base text-gray-400 hover:text-white"> Patents </a> </li> <li> <a href="#research" class="text-base text-gray-400 hover:text-white"> Research </a> </li> </ul> </div> <div class="mt-12 md:mt-0"> <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> Company </h3> <ul class="mt-4 space-y-4"> <li> <a href="#" class="text-base text-gray-400 hover:text-white"> About </a> </li> <li> <a href="#" class="text-base text-gray-400 hover:text-white"> Team </a> </li> <li> <a href="#" class="text-base text-gray-400 hover:text-white"> Careers </a> </li> <li> <a href="#" class="text-base text-gray-400 hover:text-white"> Contact </a> </li> </ul> </div> </div> <div class="md:grid md:grid-cols-2 md:gap-8"> <div> <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> Legal </h3> <ul class="mt-4 space-y-4"> <li> <a href="#" class="text-base text-gray-400 hover:text-white"> Privacy </a> </li> <li> <a href="#" class="text-base text-gray-400 hover:text-white"> Terms </a> </li> <li> <a href="#" class="text-base text-gray-400 hover:text-white"> Compliance </a> </li> </ul> </div> <div class="mt-12 md:mt-0"> <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> Resources </h3> <ul class="mt-4 space-y-4"> <li> <a href="#" class="text-base text-gray-400 hover:text-white"> Documentation </a> </li> <li> <a href="#" class="text-base text-gray-400 hover:text-white"> API Status </a> </li> <li> <a href="#" class="text-base text-gray-400 hover:text-white"> Help Center </a> </li> </ul> </div> </div> </div> </div> <div class="mt-12 border-t border-gray-700 pt-8"> <p class="text-base text-gray-400 text-center"> © 2024 HawkFranklin Research. All rights reserved. </p> </div> </div> </footer> <script> // Mobile menu toggle document.getElementById('mobile-menu-button').addEventListener('click', function() { const menu = document.getElementById('mobile-menu'); menu.classList.toggle('hidden'); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); // Close mobile menu if open const mobileMenu = document.getElementById('mobile-menu'); if (!mobileMenu.classList.contains('hidden')) { mobileMenu.classList.add('hidden'); } } }); }); // Highlight active nav link on scroll const sections = document.querySelectorAll('section'); const navLinks = document.querySelectorAll('#nav-links a, #mobile-menu a'); window.addEventListener('scroll', function() { let current = ''; sections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = section.clientHeight; if (pageYOffset >= (sectionTop - 100)) { current = section.getAttribute('id'); } }); navLinks.forEach(link => { link.classList.remove('text-blue-600', 'font-semibold'); if (link.getAttribute('href').includes(current)) { link.classList.add('text-blue-600', 'font-semibold'); } }); }); </script> </body> </html> " and now ther revised product vision is this " Introducing ACLIS: The Adaptive Clinical Intelligent SystemFrom HawkFranklin Research: The Operating System for the Future of Clinical AIOur Vision: Taming the AI Revolution in MedicineThe future of medicine is arriving faster than any hospital system is prepared for. An exponential surge of AI-powered diagnostic tools, intelligent medical devices, and specialized foundation models is imminent. This technological explosion presents a new, fundamental challenge: How do we manage the chaos?Without a unifying intelligence layer, hospitals will face a future of fragmented workflows, endless staff retraining, and a patchwork of siloed AI tools that fail to communicate. The cognitive burden on physicians will increase, not decrease.ACLIS (Adaptive Clinical Intelligent System) is our answer. It is not another tool to add to the pile; it is the unified operating system designed to manage this entire ecosystem. ACLIS is a living, learning, context-aware platform that adapts to your hospital, your technology partners, and most importantly, the irreplaceable wisdom of your physicians.The Core Problems We SolveThe Coming Surge of AI Creates Chaos.Problem: Hospitals will be inundated with dozens of AI-enabled devices, agents, and models, each with its own interface and workflow. This creates integration nightmares, data silos, and overwhelming complexity for IT and clinical staff.Our Solution: ACLIS acts as a unified clinical cockpit. It provides a single, secure interface where new AI tools, agents, and devices can be "plugged in." Their native UIs can be accessed directly within the ACLIS environment, creating a seamless experience without disrupting established workflows.Constant Retraining is Unsustainable.Problem: We cannot expect physicians, nurses, and technicians to learn a new system every time the hospital acquires a new piece of AI technology. This slows adoption, creates resistance, and leads to underutilization of powerful tools.Our Solution: Staff only need to learn one system: ACLIS. Our platform provides a consistent interaction layer, abstracting away the complexity of the underlying tools. New technologies become available as simple additions to a familiar environment, eliminating the need for constant, disruptive retraining.Physician Wisdom is Lost, and Data Security is Compromised.Problem: A doctor's hard-earned expertise—their "feel" for a patient population, their trust thresholds for technology, their nuanced diagnostic heuristics—is the most valuable dataset in the hospital, yet it's never captured. Furthermore, fine-tuning AI models often requires sharing sensitive patient data with third-party developers, creating significant security risks.Our Solution: The Doctors AI Context Protocol (DCP) is the soul of ACLIS. It's a rich, dynamic profile that captures a physician's unique professional context:AI & Device Preferences: Which tools do they trust? What confidence thresholds do they require?Workflow Intelligence: Which non-AI devices do they interact with? What are the typical data inputs and outputs?In-House, Secure Fine-Tuning: The DCP, powered by our Copilot Trainer Agent, allows physicians to directly fine-tune and align foundation models using local, anonymized data—without it ever leaving the hospital's secure environment.Static Interfaces Can't Keep Up with Dynamic Needs.Problem: A cardiologist needs a different dashboard than an oncologist. A patient with a chronic condition requires a different view than one in for a routine check-up. Rigid, one-size-fits-all UIs force clinicians to hunt for the information they need.Our Solution: The ACLIS physician-patient dashboard is dynamically generated by an AI. Based on the Doctor's AI Context Protocol—their specialty, the patient's condition, and the hospital's available AI tools—the system assembles the most relevant and efficient interface for the specific task at hand.How ACLIS Works: The Clinical AI Operating System in ActionA physician logs into ACLIS on a tablet or desktop. The interface they see is not pre-programmed; it has been dynamically built for them.The Dynamic, Context-Aware DashboardFor an oncologist reviewing a new cancer patient, the dashboard might prioritize the Genomic Risk & Prognosis card (powered by TabPFN), the Imaging Findings card (with MedGemma and a specialized pathology VLM), and the Suggested Clinical Trials card.For a cardiologist, it might feature real-time ECG data from a connected device, trends from the EHR Summary card, and notes from the Doctor Protocol related to hypertension management in their specific patient population.The Doctor's AI Context Protocol (DCP) in ControlThe doctor can easily adjust their preferences. They can set a rule: "For preliminary imaging analysis, always default to the 'Aidoc Radiology' model and require a confidence score of >90% before showing me the results."They can add a clinical heuristic: "For my diabetic patients from this region, flag any LDL cholesterol level above 100 mg/dL as high-risk." This rule is immediately ingested by the Copilot Trainer to align the system's alerting models.A Plug-and-Play EcosystemThe hospital partners with a new AI-powered retinal scanner. Instead of a separate rollout, the device is integrated into ACLIS. Its icon appears in the "Connected Devices" panel, and its analysis UI can be launched directly within the ACLIS workspace, with its findings automatically fed into the patient's unified summary.Proactive, Outward-Facing IntelligenceThe Active Disease Alarm agent, scanning global news feeds, detects a cluster of a novel respiratory virus in a neighboring state. It cross-references the reported symptoms with the hospital's patient data and flags three inpatients with matching profiles, generating a high-priority alert for the infectious disease team.Our Novelty and PatentabilityThe value of ACLIS lies not in a single algorithm, but in its holistic, adaptive architecture. Our key patentable innovations include:The Active Clinical Protocol (ACP) & The Method of Adaptive Clinical Intelligence: The entire method and system for capturing multi-faceted context (including the Doctor Context Protocol for physician heuristics and the Model Context Protocol for patient data) and using it in a continuous, automated alignment loop for a multi-modal set of foundation models.The Multi-Modal Foundation Model Stack with Tabular Integration: The system architecture that routes heterogeneous clinical data (text, image, tabular) to specialized foundation models (LVLM, VLM, and specifically TabPFN) and fuses their outputs for comprehensive reasoning.The Proactive Syndromic Surveillance Agent: The method for an agent to continuously mine public, unstructured data (social media, news) for syndromic surveillance and cross-reference those signals against an active patient roster within a clinical institution.The Contradiction & Alignment Agent System: A system comprising multiple AI agents where one agent's function is to monitor the outputs of other agents and external data sources to detect and flag logical or clinical contradictions, feeding this back into the system's alignment process.The Dynamically Generated Clinical UI: The method for an AI system to construct and render a user interface in real-time based on a multi-faceted context protocol that includes user role, specialty, patient data, and available technological resources.By building ACLIS, we at HawkFranklin are not just creating a product. We are creating the essential infrastructure for the next generation of medicine—a future where technology empowers, rather than overwhelms, the physician." " , but there is going to be a major change, I mean what the chatgpt or Gemini has written there is a real difference of wisdom of the product ACLIS , The actual fundamental challenge we are looking forward to solve is that , 1) There will be a surge or AI based Tools, foundation models , Agents and medical devices, ( since AI is exponentially improving) so there will be a need of a system or an interface where we can manage those things , and this is the first major problem we are solving , 2) We cant expect to train our physicians, nurses and teams again and again each time there will be a new AI enabled devices, tool or agent that the hopital aquires, So, its better for us to have a unified Doctors AI protocol ( centralized by hospitals medical devices and AI partners) , where in this system / interface anykind of new devices can be directly plugged in ( what i mean by that is , whatever is the existing UI the is comming with a particualr device, or a particular agent , can directly be accesed here) ,additiaonlly what we provide is Doctors AI context, which coverse diverse sets of things like , how uch does a doctor preferes AI enabled decices, what are the paramertes of confidences he setns for a particular AI based tool or devices, does he have a preference of working with particular AI devices , apart from that what other non AI based medical devices does he interacts with ( what data goes in and what data comes out) , all kinds of reports can be directly be fetched, the protocol also allows doctors to fine tune and adjust existing foundation models , ( it can be AI based devices aswell) , these also gives priority to a regional hostpitals and populations about their phenotype at the same time security (as data is the new gold), , they would not have to share the data to any other IT teams or AI developers, all can be handled well with copilot trainer, the physicans-patient dashboard will be dynamically be coded by the inbuilt AI based on the doctors AI context protocol ( this also includes what kind of diesease or patientis or speciality he handles, and what suitable AI based diagnostic prognostic test the Hospital or adinistration has partnered with etc) , SO what I would first prefer for you is to revize fe of the things that are written in the ACLIS Draft, while the part of patenteability remains the same,  I will attach a sample slide deck style presentation you previously made "  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Clinical AI Agents Infographic</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> .slide { display: none; animation: fadeIn 0.5s ease-in-out; } .slide.active { display: block; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .progress-bar { height: 5px; background-color: #3b82f6; transition: width 0.3s ease; } .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 200px; background-color: #333; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -100px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .chart-container { position: relative; height: 300px; width: 100%; } .modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 800px; border-radius: 8px; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; } .close:hover { color: black; } </style> </head> <body class="bg-gray-100 font-sans"> <div class="container mx-auto px-4 py-8 max-w-6xl"> <!-- Header --> <header class="bg-white rounded-lg shadow-md p-6 mb-8"> <div class="flex flex-col md:flex-row justify-between items-center"> <div> <h1 class="text-3xl md:text-4xl font-bold text-blue-800 mb-2">Clinical AI Agents</h1> <h2 class="text-xl md:text-2xl text-gray-600">Medical Applications (2022-2025)</h2> </div> <div class="mt-4 md:mt-0 flex items-center space-x-2"> <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium"> <i class="fas fa-robot mr-1"></i> AI Research </span> <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium"> <i class="fas fa-heartbeat mr-1"></i> Healthcare </span> </div> </div> </header> <!-- Progress Bar --> <div class="bg-white rounded-lg shadow-md p-4 mb-6"> <div class="flex justify-between items-center mb-2"> <span class="text-sm font-medium text-gray-600">Slide Progress</span> <span id="slide-counter" class="text-sm font-medium text-gray-600">1/12</span> </div> <div class="w-full bg-gray-200 rounded-full h-2.5"> <div id="progress-bar" class="progress-bar rounded-full" style="width: 8.33%"></div> </div> </div> <!-- Slides Container --> <div class="bg-white rounded-lg shadow-xl overflow-hidden mb-8"> <!-- Slide 1: Introduction --> <div class="slide active p-8"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-6 md:mb-0 md:pr-6"> <h3 class="text-2xl font-bold text-blue-700 mb-4">The Emergence of Clinical AI Agents</h3> <p class="text-gray-700 mb-4"> Since 2022, large language models (LLMs) have catalyzed the development of <span class="font-semibold text-blue-600">clinical AI agents</span> - autonomous systems that go beyond static outputs to plan and execute medical tasks. </p> <div class="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500 mb-4"> <p class="text-blue-800"> <i class="fas fa-lightbulb text-blue-500 mr-2"></i> Unlike chatbots, these agents integrate multiple models and tools to ingest medical data, reason about it, and produce clinical actions. </p> </div> <button onclick="nextSlide()" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 flex items-center"> Explore Findings <i class="fas fa-arrow-right ml-2"></i> </button> </div> <div class="md:w-1/2"> <img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="AI in Healthcare" class="rounded-lg shadow-md w-full"> </div> </div> </div> <!-- Slide 2: Key Trends --> <div class="slide p-8"> <h3 class="text-2xl font-bold text-blue-700 mb-6">Key Trends in Clinical AI Agents</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="bg-white border border-gray-200 rounded-lg p-5 shadow-sm hover:shadow-md transition duration-300"> <div class="flex items-center mb-3"> <div class="bg-purple-100 p-3 rounded-full mr-4"> <i class="fas fa-eye text-purple-600 text-xl"></i> </div> <h4 class="font-bold text-lg text-gray-800">Multimodal Integration</h4> </div> <p class="text-gray-600"> Agents like AURA, MMedAgent, and AMIE combine language models with computer vision to process radiology images, dermatology photos, and ECGs. </p> </div> <div class="bg-white border border-gray-200 rounded-lg p-5 shadow-sm hover:shadow-md transition duration-300"> <div class="flex items-center mb-3"> <div class="bg-blue-100 p-3 rounded-full mr-4"> <i class="fas fa-brain text-blue-600 text-xl"></i> </div> <h4 class="font-bold text-lg text-gray-800">Agentic Reasoning</h4> </div> <p class="text-gray-600"> Two-stage workflows: planners determine next actions, executors perform them. Examples include MedAgent-Pro's disease-level planning and AMIE's state-aware reasoning. </p> </div> <div class="bg-white border border-gray-200 rounded-lg p-5 shadow-sm hover:shadow-md transition duration-300"> <div class="flex items-center mb-3"> <div class="bg-green-100 p-3 rounded-full mr-4"> <i class="fas fa-users text-green-600 text-xl"></i> </div> <h4 class="font-bold text-lg text-gray-800">Multi-Agent Collaboration</h4> </div> <p class="text-gray-600"> Systems like MDAgents and MedAgents combine perspectives from multiple specialist agents, improving accuracy by ~4% over single-agent approaches. </p> </div> <div class="bg-white border border-gray-200 rounded-lg p-5 shadow-sm hover:shadow-md transition duration-300"> <div class="flex items-center mb-3"> <div class="bg-orange-100 p-3 rounded-full mr-4"> <i class="fas fa-industry text-orange-600 text-xl"></i> </div> <h4 class="font-bold text-lg text-gray-800">Industry Leadership</h4> </div> <p class="text-gray-600"> Google leads with AMIE (outperforming physicians) and MedGemma (open models). IBM and Meta have contributed frameworks but no full clinical agents. </p> </div> </div> <div class="flex justify-between mt-6"> <button onclick="prevSlide()" class="text-blue-600 hover:text-blue-800 font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center"> <i class="fas fa-arrow-left mr-2"></i> Previous </button> <button onclick="nextSlide()" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 flex items-center"> Next <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> <!-- Slide 3: Performance Comparison --> <div class="slide p-8"> <h3 class="text-2xl font-bold text-blue-700 mb-6">Performance Gains Over Baseline LLMs</h3> <div class="bg-gray-50 p-6 rounded-lg mb-6"> <div class="chart-container"> <canvas id="performanceChart"></canvas> </div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> <div class="bg-white p-4 rounded-lg border-l-4 border-green-500 shadow-sm"> <p class="text-sm text-gray-500">MedAgent-Pro</p> <p class="font-bold text-lg">90% <span class="text-sm font-normal text-gray-500">vs 56% (GPT-4o)</span></p> <p class="text-xs text-gray-500">Glaucoma detection accuracy</p> </div> <div class="bg-white p-4 rounded-lg border-l-4 border-blue-500 shadow-sm"> <p class="text-sm text-gray-500">MedRAX</p> <p class="font-bold text-lg">63.1% <span class="text-sm font-normal text-gray-500">vs 28.7%</span></p> <p class="text-xs text-gray-500">CXR question accuracy improvement</p> </div> <div class="bg-white p-4 rounded-lg border-l-4 border-purple-500 shadow-sm"> <p class="text-sm text-gray-500">MDAgents</p> <p class="font-bold text-lg">+4%</p> <p class="text-xs text-gray-500">Multiple-choice accuracy gain</p> </div> </div> <div class="flex justify-between"> <button onclick="prevSlide()" class="text-blue-600 hover:text-blue-800 font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center"> <i class="fas fa-arrow-left mr-2"></i> Previous </button> <button onclick="nextSlide()" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 flex items-center"> Next <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> <!-- Slide 4: Evaluation Metrics --> <div class="slide p-8"> <h3 class="text-2xl font-bold text-blue-700 mb-6">Clinical Agent Evaluation Metrics</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> <div class="bg-white p-5 rounded-lg shadow-sm border-t-4 border-blue-500"> <h4 class="font-bold text-lg mb-3 text-gray-800 flex items-center"> <i class="fas fa-check-square text-blue-500 mr-2"></i> Classification Metrics </h4> <ul class="space-y-2 text-gray-600"> <li class="flex items-start"> <i class="fas fa-circle text-xs text-blue-500 mt-1 mr-2"></i> <span>Balanced accuracy (bAcc) - MedAgent-Pro, MIMIC studies</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-blue-500 mt-1 mr-2"></i> <span>F1-score - balances precision and recall</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-blue-500 mt-1 mr-2"></i> <span>Area under ROC curve (AUC) - for class imbalance</span> </li> </ul> </div> <div class="bg-white p-5 rounded-lg shadow-sm border-t-4 border-green-500"> <h4 class="font-bold text-lg mb-3 text-gray-800 flex items-center"> <i class="fas fa-tasks text-green-500 mr-2"></i> Task-Specific Scores </h4> <ul class="space-y-2 text-gray-600"> <li class="flex items-start"> <i class="fas fa-circle text-xs text-green-500 mt-1 mr-2"></i> <span>MMedAgent: weighted scores from organ/disease grounding</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-green-500 mt-1 mr-2"></i> <span>MedRAX: accuracies across 7 ChestAgentBench categories</span> </li> </ul> </div> <div class="bg-white p-5 rounded-lg shadow-sm border-t-4 border-purple-500"> <h4 class="font-bold text-lg mb-3 text-gray-800 flex items-center"> <i class="fas fa-edit text-purple-500 mr-2"></i> Counterfactual Metrics </h4> <ul class="space-y-2 text-gray-600"> <li class="flex items-start"> <i class="fas fa-circle text-xs text-purple-500 mt-1 mr-2"></i> <span>Counterfactual prediction gain (AURA)</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-purple-500 mt-1 mr-2"></i> <span>Classifier-flip rate</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-purple-500 mt-1 mr-2"></i> <span>SSIM (image structure preservation)</span> </li> </ul> </div> <div class="bg-white p-5 rounded-lg shadow-sm border-t-4 border-orange-500"> <h4 class="font-bold text-lg mb-3 text-gray-800 flex items-center"> <i class="fas fa-user-md text-orange-500 mr-2"></i> User-Level Evaluations </h4> <ul class="space-y-2 text-gray-600"> <li class="flex items-start"> <i class="fas fa-circle text-xs text-orange-500 mt-1 mr-2"></i> <span>OSCE-like consultations (AMIE vs physicians)</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-orange-500 mt-1 mr-2"></i> <span>Chain-of-Diagnosis: questions before confidence</span> </li> </ul> </div> </div> <div class="flex justify-between"> <button onclick="prevSlide()" class="text-blue-600 hover:text-blue-800 font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center"> <i class="fas fa-arrow-left mr-2"></i> Previous </button> <button onclick="nextSlide()" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 flex items-center"> Next <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> <!-- Slide 5: Industry Leaders --> <div class="slide p-8"> <h3 class="text-2xl font-bold text-blue-700 mb-6">Industry Leaders in Clinical AI Agents</h3> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300"> <div class="bg-blue-600 p-4 text-white"> <div class="flex items-center"> <img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" alt="Google" class="h-8 mr-3"> <h4 class="font-bold text-lg">Google/Alphabet</h4> </div> </div> <div class="p-5"> <ul class="space-y-3 text-gray-700"> <li class="flex items-start"> <i class="fas fa-check-circle text-blue-500 mr-2 mt-1"></i> <span><strong>AMIE</strong>: Diagnostic agent outperforming physicians in OSCE evaluations</span> </li> <li class="flex items-start"> <i class="fas fa-check-circle text-blue-500 mr-2 mt-1"></i> <span><strong>MedGemma</strong>: Open models for agent development</span> </li> <li class="flex items-start"> <i class="fas fa-check-circle text-blue-500 mr-2 mt-1"></i> <span>Agent Development Kit (ADK) framework</span> </li> </ul> </div> </div> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300"> <div class="bg-gray-800 p-4 text-white"> <div class="flex items-center"> <img src="https://upload.wikimedia.org/wikipedia/commons/9/96/Microsoft_logo_%282012%29.svg" alt="Microsoft" class="h-8 mr-3"> <h4 class="font-bold text-lg">Microsoft</h4> </div> </div> <div class="p-5"> <ul class="space-y-3 text-gray-700"> <li class="flex items-start"> <i class="fas fa-check-circle text-gray-600 mr-2 mt-1"></i> <span><strong>MAI-DxO</strong>: Diagnostic orchestrator with 85.5% accuracy on NEJM cases</span> </li> <li class="flex items-start"> <i class="fas fa-check-circle text-gray-600 mr-2 mt-1"></i> <span>Model-agnostic framework</span> </li> <li class="flex items-start"> <i class="fas fa-check-circle text-gray-600 mr-2 mt-1"></i> <span>Focus on cost-efficient diagnosis</span> </li> </ul> </div> </div> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300"> <div class="bg-gray-600 p-4 text-white"> <div class="flex items-center"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" alt="IBM" class="h-8 mr-3"> <h4 class="font-bold text-lg">IBM</h4> </div> </div> <div class="p-5"> <ul class="space-y-3 text-gray-700"> <li class="flex items-start"> <i class="fas fa-info-circle text-gray-500 mr-2 mt-1"></i> <span>No full clinical agents released after 2022</span> </li> <li class="flex items-start"> <i class="fas fa-info-circle text-gray-500 mr-2 mt-1"></i> <span>Contributed foundational models</span> </li> <li class="flex items-start"> <i class="fas fa-info-circle text-gray-500 mr-2 mt-1"></i> <span>Potential for future development</span> </li> </ul> </div> </div> </div> <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6"> <div class="flex"> <div class="flex-shrink-0"> <i class="fas fa-exclamation-circle text-yellow-500 text-xl mt-1 mr-3"></i> </div> <div> <p class="text-sm text-yellow-700"> <strong>Note:</strong> Meta (Facebook) has contributed general frameworks but no full clinical agents after 2022. </p> </div> </div> </div> <div class="flex justify-between"> <button onclick="prevSlide()" class="text-blue-600 hover:text-blue-800 font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center"> <i class="fas fa-arrow-left mr-2"></i> Previous </button> <button onclick="nextSlide()" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 flex items-center"> Next <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> <!-- Slide 6: Agent Comparison --> <div class="slide p-8"> <h3 class="text-2xl font-bold text-blue-700 mb-6">Comparative Analysis of Clinical AI Agents</h3> <div class="overflow-x-auto mb-6"> <table class="min-w-full bg-white rounded-lg overflow-hidden"> <thead class="bg-gray-100"> <tr> <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Agent</th> <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Provider</th> <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Modality</th> <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Framework</th> <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Performance</th> </tr> </thead> <tbody class="divide-y divide-gray-200"> <tr class="hover:bg-gray-50"> <td class="py-4 px-4 whitespace-nowrap font-medium text-gray-900">AMIE</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Google</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Vision-Language</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Two-agent (Dialogue + Mx)</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Outperformed PCPs in OSCE</td> </tr> <tr class="hover:bg-gray-50"> <td class="py-4 px-4 whitespace-nowrap font-medium text-gray-900">AI co-scientist</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Google DeepMind</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Language</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Multi-agent coalition</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Validated AML treatments</td> </tr> <tr class="hover:bg-gray-50"> <td class="py-4 px-4 whitespace-nowrap font-medium text-gray-900">MAI-DxO</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Microsoft</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Language</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Orchestrated personas</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">85.5% on NEJM cases</td> </tr> <tr class="hover:bg-gray-50"> <td class="py-4 px-4 whitespace-nowrap font-medium text-gray-900">MedAgents</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Academic (Yale)</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Language</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Multi-disciplinary</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Improved reasoning accuracy</td> </tr> <tr class="hover:bg-gray-50"> <td class="py-4 px-4 whitespace-nowrap font-medium text-gray-900">REFLECTOOL</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Academic</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Multimodal</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Reflective learning</td> <td class="py-4 px-4 whitespace-nowrap text-gray-600">Excelled on CAB benchmark</td> </tr> </tbody> </table> </div> <div class="bg-blue-50 p-4 rounded-lg mb-6"> <p class="text-blue-800 flex items-start"> <i class="fas fa-info-circle text-blue-500 mr-2 mt-1"></i> <span>This table summarizes key clinical agents released after 2022, highlighting their architectural approaches and performance characteristics.</span> </p> </div> <div class="flex justify-between"> <button onclick="prevSlide()" class="text-blue-600 hover:text-blue-800 font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center"> <i class="fas fa-arrow-left mr-2"></i> Previous </button> <button onclick="nextSlide()" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 flex items-center"> Next <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> <!-- Slide 7: Framework Taxonomy --> <div class="slide p-8"> <h3 class="text-2xl font-bold text-blue-700 mb-6">Taxonomy of Agentic Frameworks</h3> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> <div class="bg-white rounded-lg shadow-md p-6 border-t-4 border-blue-500"> <div class="flex items-center mb-4"> <div class="bg-blue-100 p-3 rounded-full mr-4"> <i class="fas fa-user-graduate text-blue-600 text-xl"></i> </div> <h4 class="font-bold text-lg">Deep Practice Model</h4> </div> <p class="text-gray-600 mb-4"> <strong>Exemplars:</strong> Google's AMIE, AI co-scientist </p> <p class="text-gray-600"> Focuses on making a single logical entity smarter through intensive, simulated practice (self-play with critic feedback). </p> </div> <div class="bg-white rounded-lg shadow-md p-6 border-t-4 border-purple-500"> <div class="flex items-center mb-4"> <div class="bg-purple-100 p-3 rounded-full mr-4"> <i class="fas fa-users text-purple-600 text-xl"></i> </div> <h4 class="font-bold text-lg">Committee Model</h4> </div> <p class="text-gray-600 mb-4"> <strong>Exemplars:</strong> Microsoft's MAI-DxO, MedAgents </p> <p class="text-gray-600"> Leverages social reasoning through structured debate among multiple specialized agents to produce consensus decisions. </p> </div> <div class="bg-white rounded-lg shadow-md p-6 border-t-4 border-green-500"> <div class="flex items-center mb-4"> <div class="bg-green-100 p-3 rounded-full mr-4"> <i class="fas fa-tools text-green-600 text-xl"></i> </div> <h4 class="font-bold text-lg">Apprentice Model</h4> </div> <p class="text-gray-600 mb-4"> <strong>Exemplars:</strong> REFLECTOOL </p> <p class="text-gray-600"> Focuses on explicit skill acquisition, teaching agents to master external tools through reflective learning processes. </p> </div> </div> <div class="bg-gray-50 p-4 rounded-lg mb-6"> <p class="text-gray-700"> <i class="fas fa-lightbulb text-yellow-500 mr-2"></i> <strong>Insight:</strong> The choice of framework depends on the clinical use case - deep practice for diagnostic refinement, committee for complex cases, and apprentice for tool-intensive workflows. </p> </div> <div class="flex justify-between"> <button onclick="prevSlide()" class="text-blue-600 hover:text-blue-800 font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center"> <i class="fas fa-arrow-left mr-2"></i> Previous </button> <button onclick="nextSlide()" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 flex items-center"> Next <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> <!-- Slide 8: Evaluation Evolution --> <div class="slide p-8"> <h3 class="text-2xl font-bold text-blue-700 mb-6">Evolution of Evaluation Paradigms</h3> <div class="flex flex-col md:flex-row mb-8"> <div class="md:w-1/2 mb-6 md:mb-0 md:pr-6"> <div class="bg-white p-5 rounded-lg shadow-sm mb-6"> <h4 class="font-bold text-lg mb-3 text-gray-800 flex items-center"> <i class="fas fa-history text-blue-500 mr-2"></i> Old Paradigm </h4> <ul class="space-y-2 text-gray-600"> <li class="flex items-start"> <i class="fas fa-circle text-xs text-gray-500 mt-1 mr-2"></i> <span>Static multiple-choice exams (e.g., USMLE)</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-gray-500 mt-1 mr-2"></i> <span>Tests <strong>what</strong> the model knows</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-gray-500 mt-1 mr-2"></i> <span>Limited clinical relevance</span> </li> </ul> </div> <div class="bg-white p-5 rounded-lg shadow-sm"> <h4 class="font-bold text-lg mb-3 text-gray-800 flex items-center"> <i class="fas fa-bolt text-green-500 mr-2"></i> New Paradigm </h4> <ul class="space-y-2 text-gray-600"> <li class="flex items-start"> <i class="fas fa-circle text-xs text-green-500 mt-1 mr-2"></i> <span>Interactive OSCE-style consultations (AMIE)</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-green-500 mt-1 mr-2"></i> <span>Sequential, resource-aware reasoning (MAI-DxO)</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-green-500 mt-1 mr-2"></i> <span>Comprehensive agentic task benches (CAB)</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-green-500 mt-1 mr-2"></i> <span>Real-world biological validation (AI co-scientist)</span> </li> </ul> </div> </div> <div class="md:w-1/2"> <div class="bg-white p-5 rounded-lg shadow-sm h-full"> <h4 class="font-bold text-lg mb-3 text-gray-800 flex items-center"> <i class="fas fa-chart-line text-purple-500 mr-2"></i> Benchmark Progression </h4> <div class="chart-container"> <canvas id="evaluationChart"></canvas> </div> <p class="text-sm text-gray-500 mt-2"> The shift from knowledge testing to process-oriented evaluation reflects the maturation of clinical AI agents. </p> </div> </div> </div> <div class="flex justify-between"> <button onclick="prevSlide()" class="text-blue-600 hover:text-blue-800 font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center"> <i class="fas fa-arrow-left mr-2"></i> Previous </button> <button onclick="nextSlide()" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 flex items-center"> Next <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> <!-- Slide 9: Implementation Challenges --> <div class="slide p-8"> <h3 class="text-2xl font-bold text-blue-700 mb-6">Implementation Challenges</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> <div class="bg-white rounded-lg shadow-md p-6"> <div class="flex items-center mb-4"> <div class="bg-red-100 p-3 rounded-full mr-4"> <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i> </div> <h4 class="font-bold text-lg">Lab to Bedside Gap</h4> </div> <p class="text-gray-600 mb-3"> While MAI-DxO achieves 85.5% accuracy in research, general office agents complete tasks successfully only ~30% of time in real settings. </p> <div class="bg-gray-100 p-3 rounded-lg"> <p class="text-sm text-gray-700"> <i class="fas fa-chart-bar text-gray-500 mr-2"></i> <strong>Gartner prediction:</strong> 40% of agentic AI projects may be canceled by 2027 due to high costs and unproven value. </p> </div> </div> <div class="bg-white rounded-lg shadow-md p-6"> <div class="flex items-center mb-4"> <div class="bg-orange-100 p-3 rounded-full mr-4"> <i class="fas fa-server text-orange-600 text-xl"></i> </div> <h4 class="font-bold text-lg">Technical Barriers</h4> </div> <ul class="space-y-2 text-gray-600"> <li class="flex items-start"> <i class="fas fa-circle text-xs text-orange-500 mt-1 mr-2"></i> <span>Substantial computational infrastructure required</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-orange-500 mt-1 mr-2"></i> <span>Integration with siloed, non-standardized EHR systems</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-orange-500 mt-1 mr-2"></i> <span>Need for locally deployable models for privacy/security</span> </li> </ul> </div> </div> <div class="bg-white rounded-lg shadow-md p-6 mb-6"> <div class="flex items-center mb-4"> <div class="bg-blue-100 p-3 rounded-full mr-4"> <i class="fas fa-handshake text-blue-600 text-xl"></i> </div> <h4 class="font-bold text-lg">Human-AI Collaboration</h4> </div> <p class="text-gray-600 mb-3"> Consensus among developers: agents are <strong>complements</strong>, not replacements, for human clinicians. </p> <div class="grid grid-cols-2 gap-4"> <div class="bg-green-50 p-3 rounded-lg border-l-4 border-green-500"> <p class="text-sm text-green-800"> <i class="fas fa-check-circle text-green-500 mr-1"></i> Automate routine tasks </p> </div> <div class="bg-green-50 p-3 rounded-lg border-l-4 border-green-500"> <p class="text-sm text-green-800"> <i class="fas fa-check-circle text-green-500 mr-1"></i> Provide decision support </p> </div> <div class="bg-green-50 p-3 rounded-lg border-l-4 border-green-500"> <p class="text-sm text-green-800"> <i class="fas fa-check-circle text-green-500 mr-1"></i> Analyze data at scale </p> </div> <div class="bg-green-50 p-3 rounded-lg border-l-4 border-green-500"> <p class="text-sm text-green-800"> <i class="fas fa-check-circle text-green-500 mr-1"></i> Free clinicians for human aspects </p> </div> </div> </div> <div class="flex justify-between"> <button onclick="prevSlide()" class="text-blue-600 hover:text-blue-800 font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center"> <i class="fas fa-arrow-left mr-2"></i> Previous </button> <button onclick="nextSlide()" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 flex items-center"> Next <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> <!-- Slide 10: Ethical Considerations --> <div class="slide p-8"> <h3 class="text-2xl font-bold text-blue-700 mb-6">Ethical and Regulatory Considerations</h3> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> <div class="bg-white rounded-lg shadow-md p-6 border-b-4 border-red-500"> <div class="flex items-center mb-3"> <i class="fas fa-shield-alt text-red-500 text-xl mr-3"></i> <h4 class="font-bold text-lg">Safety & Reliability</h4> </div> <p class="text-gray-600 mb-3"> Agents can hallucinate or recommend harmful actions. Ongoing research focuses on: </p> <ul class="space-y-2 text-gray-600 text-sm"> <li class="flex items-start"> <i class="fas fa-circle text-xs text-red-500 mt-1 mr-2"></i> <span>Agentic governance (Medical Agent Controller project)</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-red-500 mt-1 mr-2"></i> <span>Fail-safes and human oversight mechanisms</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-red-500 mt-1 mr-2"></i> <span>Thorough validation before deployment</span> </li> </ul> </div> <div class="bg-white rounded-lg shadow-md p-6 border-b-4 border-yellow-500"> <div class="flex items-center mb-3"> <i class="fas fa-balance-scale text-yellow-500 text-xl mr-3"></i> <h4 class="font-bold text-lg">Regulatory Status</h4> </div> <p class="text-gray-600 mb-3"> Current limitations in regulatory approval: </p> <ul class="space-y-2 text-gray-600 text-sm"> <li class="flex items-start"> <i class="fas fa-circle text-xs text-yellow-500 mt-1 mr-2"></i> <span>No FDA-approved clinical agents yet</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-yellow-500 mt-1 mr-2"></i> <span>Google emphasizes AMIE is research-only</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-yellow-500 mt-1 mr-2"></i> <span>Must consider HIPAA, GDPR compliance</span> </li> </ul> </div> <div class="bg-white rounded-lg shadow-md p-6 border-b-4 border-green-500"> <div class="flex items-center mb-3"> <i class="fas fa-user-shield text-green-500 text-xl mr-3"></i> <h4 class="font-bold text-lg">Trust & Transparency</h4> </div> <p class="text-gray-600 mb-3"> Building clinician trust requires: </p> <ul class="space-y-2 text-gray-600 text-sm"> <li class="flex items-start"> <i class="fas fa-circle text-xs text-green-500 mt-1 mr-2"></i> <span>Interpretable reasoning processes</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-green-500 mt-1 mr-2"></i> <span>Auditable decision trails (e.g., MAI-DxO debates)</span> </li> <li class="flex items-start"> <i class="fas fa-circle text-xs text-green-500 mt-1 mr-2"></i> <span>Proactive bias mitigation</span> </li> </ul> </div> </div> <div class="bg-white rounded-lg shadow-md p-6 mb-6"> <div class="flex items-center mb-3"> <i class="fas fa-clipboard-check text-blue-500 text-xl mr-3"></i> <h4 class="font-bold text-lg">Structured Ethical Approach Needed</h4> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="bg-blue-50 p-3 rounded-lg"> <p class="text-sm text-blue-800 font-medium"> <i class="fas fa-database mr-2"></i> Address data biases </p> </div> <div class="bg-blue-50 p-3 rounded-lg"> <p class="text-sm text-blue-800 font-medium"> <i class="fas fa-equals mr-2"></i> Ensure algorithmic fairness </p> </div> <div class="bg-blue-50 p-3 rounded-lg"> <p class="text-sm text-blue-800 font-medium"> <i class="fas fa-gavel mr-2"></i> Establish accountability </p> </div> </div> </div> <div class="flex justify-between"> <button onclick="prevSlide()" class="text-blue-600 hover:text-blue-800 font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center"> <i class="fas fa-arrow-left mr-2"></i> Previous </button> <button onclick="nextSlide()" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 flex items-center"> Next <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> <!-- Slide 11: Future Directions --> <div class="slide p-8"> <h3 class="text-2xl font-bold text-blue-700 mb-6">Future Directions for Clinical AI Agents</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> <div class="bg-white rounded-lg shadow-md p-6"> <h4 class="font-bold text-lg mb-4 text-gray-800 flex items-center"> <i class="fas fa-bullseye text-blue-500 mr-3"></i> Key Focus Areas </h4> <div class="space-y-4"> <div class="flex items-start"> <div class="bg-blue-100 p-2 rounded-full mr-3"> <i class="fas fa-chart-bar text-blue-600"></i> </div> <div> <h5 class="font-medium text-gray-800">Standardization</h5> <p class="text-sm text-gray-600"> Adoption of robust benchmarks like ClinicalAgent Bench for fair comparison </p> </div> </div> <div class="flex items-start"> <div class="bg-green-100 p-2 rounded-full mr-3"> <i class="fas fa-user-friends text-green-600"></i> </div> <div> <h5 class="font-medium text-gray-800">Human-Centric Design</h5> <p class="text-sm text-gray-600"> Seamless workflow integration with transparent, interpretable systems </p> </div> </div> <div class="flex items-start"> <div class="bg-purple-100 p-2 rounded-full mr-3"> <i class="fas fa-dollar-sign text-purple-600"></i> </div> <div> <h5 class="font-medium text-gray-800">Economic Viability</h5> <p class="text-sm text-gray-600"> Demonstrate ROI through time savings, cost reductions, and better outcomes </p> </div> </div> </div> </div> <div class="bg-white rounded-lg shadow-md p-6"> <h4 class="font-bold text-lg mb-4 text-gray-800 flex items-center"> <i class="fas fa-road text-orange-500 mr-3"></i> Implementation Roadmap </h4> <div class="relative"> <div class="border-l-2 border-gray-200 absolute h-full top-0 left-4"></div> <div class="space-y-6"> <div class="relative pl-8"> <div class="absolute -left-1 top-1 w-3 h-3 bg-blue-500 rounded-full"></div> <h5 class="font-medium text-gray-800">Short-term (1-2 years)</h5> <p class="text-sm text-gray-600"> Focused applications in administrative tasks and decision support </p> </div> <div class="relative pl-8"> <div class="absolute -left-1 top-1 w-3 h-3 bg-green-500 rounded-full"></div> <h5 class="font-medium text-gray-800">Medium-term (3-5 years)</h5> <p class="text-sm text-gray-600"> Specialized diagnostic agents with regulatory approval </p> </div> <div class="relative pl-8"> <div class="absolute -left-1 top-1 w-3 h-3 bg-purple-500 rounded-full"></div> <h5 class="font-medium text-gray-800">Long-term (5+ years)</h5> <p class="text-sm text-gray-600"> Comprehensive care coordination and longitudinal management </p> </div> </div> </div> </div> </div> <div class="bg-blue-50 p-4 rounded-lg mb-6"> <p class="text-blue-800"> <i class="fas fa-lightbulb text-blue-500 mr-2"></i> <strong>Insight:</strong> The MAI-DxO approach of measuring both accuracy and cost provides a template for demonstrating real-world value to healthcare systems. </p> </div> <div class="flex justify-between"> <button onclick="prevSlide()" class="text-blue-600 hover:text-blue-800 font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center"> <i class="fas fa-arrow-left mr-2"></i> Previous </button> <button onclick="nextSlide()" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 flex items-center"> Next <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> <!-- Slide 12: Conclusion --> <div class="slide p-8"> <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white rounded-lg p-8 mb-8"> <h3 class="text-2xl font-bold mb-4">Conclusion</h3> <p class="mb-4"> The period since 2022 has marked the transition from knowledge-based LLMs to autonomous, multimodal clinical agents capable of sophisticated reasoning and action. </p> <div class="flex items-center"> <i class="fas fa-check-circle text-green-300 mr-2"></i> <span>Vision-language agents achieve state-of-the-art performance on complex tasks</span> </div> <div class="flex items-center mt-2"> <i class="fas fa-check-circle text-green-300 mr-2"></i> <span>Language-based agents demonstrate superior reasoning through collaboration</span> </div> <div class="flex items-center mt-2"> <i class="fas fa-check-circle text-green-300 mr-2"></i> <span>Industry leaders like Google and Microsoft are driving innovation</span> </div> </div> <div class="bg-white rounded-lg shadow-md p-6 mb-8"> <h4 class="font-bold text-lg mb-4 text-gray-800">Final Considerations</h4> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <h5 class="font-medium text-gray-700 mb-2 flex items-center"> <i class="fas fa-flask text-blue-500 mr-2"></i> Current Status </h5> <p class="text-gray-600 text-sm"> These systems remain research prototypes. Future work must focus on transparent benchmarking, regulatory compliance, and robust safety frameworks before clinical deployment. </p> </div> <div> <h5 class="font-medium text-gray-700 mb-2 flex items-center"> <i class="fas fa-rocket text-purple-500 mr-2"></i> Transformative Potential </h5> <p class="text-gray-600 text-sm"> Clinical agents promise to enhance diagnostic accuracy, accelerate scientific discovery, and reshape healthcare economics through AI-human collaboration. </p> </div> </div> </div> <div class="flex justify-between"> <button onclick="prevSlide()" class="text-blue-600 hover:text-blue-800 font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center"> <i class="fas fa-arrow-left mr-2"></i> Previous </button> <button onclick="restartPresentation()" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 flex items-center"> <i class="fas fa-redo mr-2"></i> Restart </button> </div> </div> </div> <!-- Navigation Dots --> <div class="flex justify-center space-x-2 mt-6"> <button onclick="goToSlide(1)" class="w-3 h-3 rounded-full bg-blue-600 focus:outline-none"></button> <button onclick="goToSlide(2)" class="w-3 h-3 rounded-full bg-gray-300 focus:outline-none"></button> <button onclick="goToSlide(3)" class="w-3 h-3 rounded-full bg-gray-300 focus:outline-none"></button> <button onclick="goToSlide(4)" class="w-3 h-3 rounded-full bg-gray-300 focus:outline-none"></button> <button onclick="goToSlide(5)" class="w-3 h-3 rounded-full bg-gray-300 focus:outline-none"></button> <button onclick="goToSlide(6)" class="w-3 h-3 rounded-full bg-gray-300 focus:outline-none"></button> <button onclick="goToSlide(7)" class="w-3 h-3 rounded-full bg-gray-300 focus:outline-none"></button> <button onclick="goToSlide(8)" class="w-3 h-3 rounded-full bg-gray-300 focus:outline-none"></button> <button onclick="goToSlide(9)" class="w-3 h-3 rounded-full bg-gray-300 focus:outline-none"></button> <button onclick="goToSlide(10)" class="w-3 h-3 rounded-full bg-gray-300 focus:outline-none"></button> <button onclick="goToSlide(11)" class="w-3 h-3 rounded-full bg-gray-300 focus:outline-none"></button> <button onclick="goToSlide(12)" class="w-3 h-3 rounded-full bg-gray-300 focus:outline-none"></button> </div> <!-- Footer --> <footer class="mt-12 text-center text-gray-500 text-sm"> <p>© 2023 Clinical AI Agents Research Infographic. Data from research reports (2022-2025).</p> <p class="mt-2">Designed for academic and research presentation purposes.</p> </footer> </div> <!-- Modal for References --> <div id="referencesModal" class="modal"> <div class="modal-content"> <span class="close" onclick="closeModal()">×</span> <h3 class="text-xl font-bold text-gray-800 mb-4">Research References</h3> <div class="h-96 overflow-y-auto pr-4"> <ul class="space-y-3 text-sm text-gray-700"> <li>[1] AURA: A Multi-Modal Medical Agent for Understanding, Reasoning & Annotation https://arxiv.org/html/2507.16940</li> <li>[2] MedRAX: Medical Reasoning Agent for Chest X-ray https://arxiv.org/html/2502.02673v1</li> <li>[3] MedAgent-Pro: Towards Evidence-based Multi-modal Medical Diagnosis via Reasoning Agentic Workflow https://arxiv.org/pdf/2503.18968v3</li> <li>[4] Agent Hospital: A Simulacrum of Hospital with Evolvable Medical Agents https://arxiv.org/html/2405.02957v1</li> <li>[5] Overview ‹ MDAgents: Adaptive Collaboration Strategy for LLMs in Medical Decision Making — MIT Media Lab https://www.media.mit.edu/projects/mdagents-adaptive-collaboration-strategy-for-llms-in-medical-decision-making/overview/</li> <li>[6] A Demonstration of Adaptive Collaboration of Large Language Models for Medical Decision-Making https://arxiv.org/html/2411.00248v1</li> <li>[7] 2311.10537v4 https://arxiv.org/pdf/2311.10537v4</li> <li>[8] 2407.13301.pdf https://arxiv.org/pdf/2407.13301.pdf</li> <li>[9] AMIE gains vision: A research AI agent for multimodal diagnostic dialogue https://research.google/blog/amie-gains-vision-a-research-ai-agent-for-multi-modal-diagnostic-dialogue/</li> <li>[10] MedGemma: Advanced AI Models for Medical Text and Image Analysis | Google DeepMind | MedGemma Hub https://medgemma.org/</li> <li>[11] Agentic AI framework for End-to-End Medical Data Inference https://arxiv.org/html/2507.18115v1</li> <li>[12] Google AMIE AI now sees medical images, scores higher than doctors in diagnostic tests | Artificial Intelligence News - News9live https://www.news9live.com/technology/artificial-intelligence/google-amie-ai-can-see-medical-images-2846337</li> </ul> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> // Slide management let currentSlide = 1; const totalSlides = 12; function showSlide(n) { const slides = document.querySelectorAll('.slide'); const dots = document.querySelectorAll('.flex.justify-center button'); if (n > totalSlides) { currentSlide = 1; } if (n < 1) { currentSlide = totalSlides; } slides.forEach(slide => slide.classList.remove('active')); document.querySelector(`.slide:nth-child(${currentSlide})`).classList.add('active'); dots.forEach((dot, index) => { dot.classList.remove('bg-blue-600'); dot.classList.add('bg-gray-300'); if (index === currentSlide - 1) { dot.classList.remove('bg-gray-300'); dot.classList.add('bg-blue-600'); } }); // Update progress const progressPercentage = (currentSlide / totalSlides) * 100; document.getElementById('progress-bar').style.width = `${progressPercentage}%`; document.getElementById('slide-counter').textContent = `${currentSlide}/${totalSlides}`; } function nextSlide() { currentSlide++; showSlide(currentSlide); } function prevSlide() { currentSlide--; showSlide(currentSlide); } function goToSlide(n) { currentSlide = n; showSlide(currentSlide); } function restartPresentation() { currentSlide = 1; showSlide(currentSlide); } // Modal functions function openModal() { document.getElementById('referencesModal').style.display = 'block'; } function closeModal() { document.getElementById('referencesModal').style.display = 'none'; } // Initialize charts when DOM is loaded document.addEventListener('DOMContentLoaded', function() { // Performance Comparison Chart const performanceCtx = document.getElementById('performanceChart').getContext('2d'); const performanceChart = new Chart(performanceCtx, { type: 'bar', data: { labels: ['MedAgent-Pro', 'GPT-4o', 'MedRAX', 'Baseline', 'MDAgents', 'Static'], datasets: [{ label: 'Accuracy (%)', data: [90, 56, 63.1, 28.7, 64, 60], backgroundColor: [ 'rgba(59, 130, 246, 0.7)', 'rgba(156, 163, 175, 0.7)', 'rgba(16, 185, 129, 0.7)', 'rgba(156, 163, 175, 0.5)', 'rgba(124, 58, 237, 0.7)', 'rgba(156, 163, 175, 0.3)' ], borderColor: [ 'rgba(59, 130, 246, 1)', 'rgba(156, 163, 175, 1)', 'rgba(16, 185, 129, 1)', 'rgba(156, 163, 175, 0.7)', 'rgba(124, 58, 237, 1)', 'rgba(156, 163, 175, 0.5)' ], borderWidth: 1 }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, max: 100, title: { display: true, text: 'Accuracy (%)' } } }, plugins: { legend: { display: false }, tooltip: { callbacks: { label: function(context) { return context.parsed.y + '%'; } } } } } }); // Evaluation Paradigm Chart const evaluationCtx = document.getElementById('evaluationChart').getContext('2d'); const evaluationChart = new Chart(evaluationCtx, { type: 'line', data: { labels: ['2018-2021', '2022', '2023', '2024', '2025'], datasets: [{ label: 'Knowledge Testing', data: [90, 85, 70, 50, 30], borderColor: 'rgba(156, 163, 175, 1)', backgroundColor: 'rgba(156, 163, 175, 0.1)', tension: 0.3, borderDash: [5, 5] }, { label: 'Process Evaluation', data: [10, 30, 60, 80, 95], borderColor: 'rgba(16, 185, 129, 1)', backgroundColor: 'rgba(16, 185, 129, 0.1)', tension: 0.3 }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, max: 100, title: { display: true, text: 'Evaluation Focus (%)' } }, x: { title: { display: true, text: 'Year' } } }, plugins: { tooltip: { callbacks: { label: function(context) { return context.dataset.label + ': ' + context.parsed.y + '%'; } } } } } }); // Initialize first slide showSlide(currentSlide); }); // Keyboard navigation document.addEventListener('keydown', function(e) { if (e.key === 'ArrowRight') { nextSlide(); } else if (e.key === 'ArrowLeft') { prevSlide(); } }); </script> </body> </html>" , I prefere the colors from this one "<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>ACLIS: The Operating System for Clinical AI | HawkFranklin Research</title> <!-- Tailwind & Icons --> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" /> <!-- Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lexend:wght@400;500;600;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Inter', sans-serif; background-color: #f0f4f9; color: #1e293b; } h1, h2, h3 { font-family: 'Lexend', sans-serif; } .slide { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 4rem 2rem; position: relative; overflow: hidden; } .gradient-text { background: linear-gradient(to right, #2563eb, #059669); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 1.5rem; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); transition: transform 0.3s, box-shadow 0.3s; } .card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); } .glass-icon { background: rgba(255, 255, 255, 0.2); border-radius: 1rem; padding: 1rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.3); } .bg-grid { background-image: linear-gradient(to right, #e0e7ff 1px, transparent 1px), linear-gradient(to bottom, #e0e7ff 1px, transparent 1px); background-size: 40px 40px; } .nav-button { position: fixed; bottom: 2rem; right: 2rem; z-index: 50; display: flex; flex-direction: column; gap: 0.5rem; } .nav-dot { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); transition: all 0.3s; cursor: pointer; } .nav-dot.active { background-color: #2563eb; transform: scale(1.25); } </style> </head> <body class="antialiased"> <div id="slide-nav" class="nav-button"></div> <!-- Slide 1: Title --> <section id="slide1" class="slide bg-grid"> <div class="text-center max-w-4xl"> <div class="inline-block mb-4 px-4 py-2 bg-white rounded-lg shadow-sm"> <h3 class="font-semibold text-gray-700">A HawkFranklin Research Initiative</h3> </div> <h1 class="text-5xl md:text-7xl font-bold tracking-tighter text-slate-900"> The Operating System for the <span class="gradient-text">New Era of Clinical AI</span> </h1> <p class="mt-6 text-lg md:text-xl text-slate-600 max-w-3xl mx-auto"> Introducing <span class="font-bold">ACLIS</span>: The Adaptive Clinical Intelligent System designed to manage, integrate, and personalize the exponential growth of AI tools in medicine. </p> <div class="mt-10"> <a href="#slide2" class="bg-blue-600 text-white font-semibold py-3 px-8 rounded-full hover:bg-blue-700 shadow-lg text-lg transition-transform hover:scale-105"> Discover the Challenge <i class="fas fa-arrow-down ml-2"></i> </a> </div> </div> </section> <!-- Slide 2: The Problem --> <section id="slide2" class="slide bg-white"> <div class="max-w-6xl w-full"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-bold text-slate-900">An Inevitable Challenge: <span class="text-red-500">The Coming Chaos</span></h2> <p class="mt-4 text-lg text-slate-600 max-w-3xl mx-auto">The explosion of AI tools, devices, and models threatens to overwhelm hospitals, creating new problems that hinder progress.</p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="card p-6 border-t-4 border-red-500"> <i class="fas fa-puzzle-piece text-3xl text-red-500 mb-4"></i> <h3 class="font-bold text-lg">Tool Overload</h3> <p class="text-sm text-slate-600 mt-2">Dozens of incompatible AI systems with separate interfaces, logins, and workflows.</p> </div> <div class="card p-6 border-t-4 border-yellow-500"> <i class="fas fa-chalkboard-teacher text-3xl text-yellow-500 mb-4"></i> <h3 class="font-bold text-lg">Constant Retraining</h3> <p class="text-sm text-slate-600 mt-2">Clinicians can't be expected to learn new software every six months. The training burden is unsustainable.</p> </div> <div class="card p-6 border-t-4 border-purple-500"> <i class="fas fa-user-cog text-3xl text-purple-500 mb-4"></i> <h3 class="font-bold text-lg">Rigid Systems</h3> <p class="text-sm text-slate-600 mt-2">Technology forces doctors to adapt to it, ignoring their unique expertise and workflow preferences.</p> </div> <div class="card p-6 border-t-4 border-green-500"> <i class="fas fa-lock text-3xl text-green-500 mb-4"></i> <h3 class="font-bold text-lg">Data & Security Risks</h3> <p class="text-sm text-slate-600 mt-2">Managing security, privacy, and data flow across a fragmented ecosystem is a compliance nightmare.</p> </div> </div> </div> </section> <!-- Slide 3: The Solution Intro --> <section id="slide3" class="slide bg-grid"> <div class="text-center max-w-4xl"> <h2 class="text-4xl md:text-5xl font-bold text-slate-900">The Solution: <span class="gradient-text">A New Operating System</span></h2> <p class="mt-6 text-lg md:text-xl text-slate-600">ACLIS is not another tool. It's the central platform that brings order to the chaos, built on two core pillars of innovation.</p> <div class="mt-12 grid md:grid-cols-2 gap-8"> <a href="#slide4" class="card p-8 text-left hover:border-blue-500 border-2 border-transparent"> <div class="flex items-center"> <i class="fas fa-sitemap text-3xl text-blue-600"></i> <h3 class="ml-4 text-2xl font-bold">Pillar 1: Universal Integration</h3> </div> <p class="mt-4 text-slate-600">A plug-and-play environment to manage and unify every AI tool, device, and model in your hospital.</p> </a> <a href="#slide5" class="card p-8 text-left hover:border-green-500 border-2 border-transparent"> <div class="flex items-center"> <i class="fas fa-user-edit text-3xl text-green-600"></i> <h3 class="ml-4 text-2xl font-bold">Pillar 2: The Doctor's AI Protocol</h3> </div> <p class="mt-4 text-slate-600">A dynamic core that learns each doctor's unique context, preferences, and expertise to deliver truly personalized AI.</p> </a> </div> </div> </section> <!-- Slide 4: Pillar 1 - Integration --> <section id="slide4" class="slide bg-blue-600 text-white"> <div class="max-w-6xl w-full grid md:grid-cols-2 gap-16 items-center"> <div> <span class="text-blue-200 font-semibold">PILLAR 1</span> <h2 class="text-4xl md:text-5xl font-bold mt-2">Universal Integration Layer</h2> <p class="mt-6 text-lg text-blue-100">ACLIS provides a single, future-proof platform to manage your entire clinical AI ecosystem. Stop juggling vendors and start orchestrating intelligence.</p> <ul class="mt-8 space-y-4"> <li class="flex items-start"><i class="fas fa-check-circle text-white mt-1 mr-3"></i><span><strong class="font-semibold">Plug-and-Play:</strong> Seamlessly connect new AI devices, tools, and agents without disrupting clinical workflows.</span></li> <li class="flex items-start"><i class="fas fa-check-circle text-white mt-1 mr-3"></i><span><strong class="font-semibold">Unified Interface:</strong> Access the native UI of any connected tool through a single, secure dashboard. No more multiple logins.</span></li> <li class="flex items-start"><i class="fas fa-check-circle text-white mt-1 mr-3"></i><span><strong class="font-semibold">Centralized Management:</strong> Streamline security, compliance, and deployment for all AI assets from one control plane.</span></li> </ul> </div> <div class="card bg-white/10 p-6"> <div class="text-center text-blue-100 mb-4 font-semibold">ACLIS Integration Hub</div> <div class="grid grid-cols-3 gap-4"> <div class="text-center p-4 bg-white/10 rounded-xl"><i class="fas fa-robot text-4xl mb-2"></i><span class="text-xs font-medium">AI Agents</span></div> <div class="text-center p-4 bg-white/10 rounded-xl"><i class="fas fa-microscope text-4xl mb-2"></i><span class="text-xs font-medium">Diagnostics</span></div> <div class="text-center p-4 bg-white/10 rounded-xl"><i class="fas fa-brain text-4xl mb-2"></i><span class="text-xs font-medium">Foundation Models</span></div> <div class="text-center p-4 bg-white/10 rounded-xl col-span-3 font-bold text-2xl flex items-center justify-center"> <i class="fas fa-arrow-down mr-4"></i> ACLIS <i class="fas fa-arrow-down ml-4"></i> </div> <div class="text-center p-4 bg-blue-500 rounded-xl col-span-3 text-white"> <i class="fas fa-desktop text-4xl mb-2"></i><span class="font-semibold">Unified Clinical Dashboard</span> </div> </div> </div> </div> </section> <!-- Slide 5: Pillar 2 - Doctor's AI Protocol --> <section id="slide5" class="slide bg-white"> <div class="max-w-6xl w-full grid md:grid-cols-2 gap-16 items-center"> <div class="order-2 md:order-1 card p-8"> <div class="text-center text-slate-700 mb-4 font-semibold">Doctor's AI Protocol</div> <div class="bg-gray-100 p-4 rounded-lg"> <h4 class="font-bold text-gray-800">Dr. Evans' Context</h4> <ul class="mt-2 text-sm text-gray-600 space-y-3"> <li class="flex"><i class="fas fa-sliders-h w-5 text-center mr-2 mt-1 text-blue-500"></i><div><strong class="text-gray-800">Confidence Thresholds:</strong> Sets AI diagnostic suggestions to >90% for critical findings.</div></li> <li class="flex"><i class="fas fa-heartbeat w-5 text-center mr-2 mt-1 text-red-500"></i><div><strong class="text-gray-800">Clinical Heuristics:</strong> "For my diabetic patients in this region, I flag HbA1c at 6.8%."</div></li> <li class="flex"><i class="fas fa-tools w-5 text-center mr-2 mt-1 text-green-500"></i><div><strong class="text-gray-800">Device Preferences:</strong> Prefers GE ultrasound for cardiac scans; uses specific settings for obese patients.</div></li> </ul> </div> <div class="mt-4 bg-blue-50 p-4 rounded-lg text-center"> <h4 class="font-bold text-blue-800">Result: Dynamic UI Generation</h4> <p class="text-sm text-blue-700 mt-1">ACLIS auto-generates a dashboard tailored to Dr. Evans' specialty, patient load, and AI preferences.</p> </div> </div> <div class="order-1 md:order-2"> <span class="text-green-600 font-semibold">PILLAR 2</span> <h2 class="text-4xl md:text-5xl font-bold text-slate-900 mt-2">The Doctor's AI Protocol (DAP)</h2> <p class="mt-6 text-lg text-slate-600">This is the adaptive core of ACLIS. The DAP is a living profile that captures each clinician's unique context, making the AI a true extension of their own expertise.</p> <ul class="mt-8 space-y-4"> <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i><span><strong class="font-semibold">Captures True Context:</strong> Learns physician preferences, trust levels, and interaction patterns with all tools.</span></li> <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i><span><strong class="font-semibold">Drives Dynamic UIs:</strong> An internal AI uses the DAP to build a personalized dashboard for each doctor, every time they log in.</span></li> <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i><span><strong class="font-semibold">Enables Secure Fine-Tuning:</strong> Allows doctors to safely use local data to align models via an on-premise Copilot Trainer, keeping data secure.</span></li> </ul> </div> </div> </section> <!-- Slide 6: Call to Action --> <section id="slide6" class="slide bg-gray-800 text-white"> <div class="text-center max-w-4xl"> <h2 class="text-4xl md:text-5xl font-bold">The Future of Clinical AI is <span class="gradient-text">Managed, Integrated, and Adaptive.</span></h2> <p class="mt-6 text-lg md:text-xl text-gray-300 max-w-3xl mx-auto"> ACLIS provides the essential framework to harness the power of AI without the chaos. Empower your clinicians, future-proof your hospital, and deliver the next generation of personalized care. </p> <div class="mt-10"> <a href="#" class="bg-white text-blue-700 font-semibold py-4 px-10 rounded-full hover:bg-gray-200 shadow-lg text-lg transition-transform hover:scale-105"> Request a Private Demo </a> </div> <p class="mt-8 text-sm text-gray-400">© 2025 HawkFranklin Research. All Rights Reserved.</p> </div> </section> <script> document.addEventListener('DOMContentLoaded', () => { const slides = document.querySelectorAll('section.slide'); const navContainer = document.getElementById('slide-nav'); let currentSlide = 0; // Create nav dots slides.forEach((slide, index) => { const dot = document.createElement('div'); dot.classList.add('nav-dot'); if (index === 0) dot.classList.add('active'); dot.addEventListener('click', () => { scrollToSlide(index); }); navContainer.appendChild(dot); }); const navDots = document.querySelectorAll('.nav-dot'); function scrollToSlide(index) { slides[index].scrollIntoView({ behavior: 'smooth' }); } // Update active dot on scroll const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const index = Array.from(slides).indexOf(entry.target); navDots.forEach(dot => dot.classList.remove('active')); navDots[index].classList.add('active'); currentSlide = index; } }); }, { threshold: 0.6 }); slides.forEach(slide => observer.observe(slide)); // Smooth scroll for internal links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); }); </script> </body> </html> " - Initial Deployment