fix: remove /dashboard prefix, fix theme toggle position, fix 3D viewer, remove langflow

langflow/bioflow_dti_pipeline.json

@@ -1,171 +0,0 @@
-{
-  "name": "BioFlow DTI Pipeline",
-  "description": "Drug-Target Interaction prediction pipeline using DeepPurpose model and Qdrant vector search. This flow represents the BioFlow Orchestrator hackathon project.",
-  "data": {
-    "nodes": [
-      {
-        "id": "TextInput-SMILES",
-        "type": "genericNode",
-        "position": {"x": 100, "y": 200},
-        "data": {
-          "type": "TextInput",
-          "node": {
-            "template": {
-              "input_value": {
-                "value": "CC(=O)Nc1ccc(O)cc1",
-                "display_name": "Drug SMILES",
-                "info": "Enter a SMILES string representing the drug molecule (e.g., Acetaminophen: CC(=O)Nc1ccc(O)cc1)"
-              }
-            },
-            "display_name": "Drug Input (SMILES)",
-            "description": "Input drug molecule in SMILES format"
-          }
-        }
-      },
-      {
-        "id": "TextInput-Protein",
-        "type": "genericNode",
-        "position": {"x": 100, "y": 400},
-        "data": {
-          "type": "TextInput",
-          "node": {
-            "template": {
-              "input_value": {
-                "value": "MKKFFDSRREQGGSGLGSGSSGGGGSTSGLGSGYIGRVFGIGRQQVTVDEVLAEGGFAIVFLVRTSNGMKCALKRMFVNNEHDLQVCKREIQIMRDLSGHKNIVGYIDSSINNVSSGDVWEVLILMDFCRGGQVVNLMNQRLQTGFTENEVLQIFCDTCEAVARLHQCKTPIIHRDLKVENILLHDRGHYVLCDFGSATNKFQNPQTEGVNAVEDEIKKYTTLSYRAPEMVNLYSGKIITTKADIWALGCLLYKLCYFTLPFGESQVAICDGNFTIPDNSRYSQDMHCLIRYMLEPDPDKRPDIYQVSYFSFKLLKKECPIPNVQNSPIPAKLPEPVKASEAAAKKTQPKARLTDPIPTTETSIAPRQRPKAGQTQPNPGILPIQPALTPRKRATVQPPPQAAGSSNQPGLLASVPQPKPQAPPSQPLPQTQAKQPQAPPTPQQTPSTQAQGLPAQAQATPQHQQQLFLKQQQQQQQPPPAQQQPAGTFYQQQQAQTQQFQAVHPATQKPAIAQFPVVSQGGSQQQLMQNFYQQQQQQQQQQQQQQLATALHQQQLMTQQAALQQKPTMAAGQQPQPQPAAAPQPAPAQEPAIQAPVRQQPKVQTTPPPAVQGQKVGSLTPPSSPKTQRAGHRRILSDVTHSAVFGVPASKSTQLLQAAAAEASLNKSKSATTTPSGSPRTSQQNVYNPSEGSTWNPFDDDNFSKLTAEELLNKDFAKLGEGKHPEKLGGSAESLIPGFQSTQGDAFATTSFSAGTAEKRKGGQTVDSGLPLLSVSDPFIPLQVPDAPEKLIEGLKSPDTSLLLPDLLPMTDPFGSTSDAVIEKADVAVESLIPGLEPPVPQRLPSQTESVTSNRTDSLTGEDSLLDCSLLSNPTTDLLEEFAPTAISAPVHKAAEDSNLISGFDVPEGSDKVAEDEFDPIPVLITKNPQGGHSRNSSGSSESSLPNLARSLLLVDQLIDL",
-                "display_name": "Target Sequence",
-                "info": "Enter a protein target amino acid sequence (e.g., AAK1 kinase)"
-              }
-            },
-            "display_name": "Target Input (Protein)",
-            "description": "Input target protein amino acid sequence"
-          }
-        }
-      },
-      {
-        "id": "APIRequest-Encode",
-        "type": "genericNode",
-        "position": {"x": 400, "y": 300},
-        "data": {
-          "type": "APIRequest",
-          "node": {
-            "template": {
-              "url": {
-                "value": "http://localhost:8001/api/search",
-                "display_name": "BioFlow API URL"
-              },
-              "method": {
-                "value": "POST",
-                "display_name": "HTTP Method"
-              },
-              "body": {
-                "value": "{\"query\": \"{smiles}\", \"type\": \"drug\", \"limit\": 20}",
-                "display_name": "Request Body",
-                "info": "DeepPurpose encoding + Qdrant vector search"
-              }
-            },
-            "display_name": "DeepPurpose Encoder",
-            "description": "Morgan fingerprint + CNN encoding via BioFlow API"
-          }
-        }
-      },
-      {
-        "id": "APIRequest-Qdrant",
-        "type": "genericNode",
-        "position": {"x": 700, "y": 200},
-        "data": {
-          "type": "APIRequest",
-          "node": {
-            "template": {
-              "url": {
-                "value": "http://localhost:8001/api/points?limit=500&view=combined",
-                "display_name": "Qdrant Visualization API"
-              },
-              "method": {
-                "value": "GET",
-                "display_name": "HTTP Method"
-              }
-            },
-            "display_name": "Qdrant Vector Store",
-            "description": "23,531 drug-target pairs from KIBA dataset"
-          }
-        }
-      },
-      {
-        "id": "ConditionalRouter-Affinity",
-        "type": "genericNode",
-        "position": {"x": 700, "y": 400},
-        "data": {
-          "type": "ConditionalRouter",
-          "node": {
-            "template": {
-              "condition": {
-                "value": "score > 0.8",
-                "display_name": "High Affinity Threshold"
-              }
-            },
-            "display_name": "Affinity Filter",
-            "description": "Filter results by binding affinity score"
-          }
-        }
-      },
-      {
-        "id": "TextOutput-Results",
-        "type": "genericNode",
-        "position": {"x": 1000, "y": 300},
-        "data": {
-          "type": "TextOutput",
-          "node": {
-            "template": {
-              "input_value": {
-                "display_name": "DTI Predictions",
-                "info": "Top candidate drug-target interactions"
-              }
-            },
-            "display_name": "Pipeline Output",
-            "description": "Ranked drug-target interaction predictions"
-          }
-        }
-      }
-    ],
-    "edges": [
-      {
-        "id": "e1",
-        "source": "TextInput-SMILES",
-        "target": "APIRequest-Encode",
-        "sourceHandle": "output",
-        "targetHandle": "input"
-      },
-      {
-        "id": "e2",
-        "source": "TextInput-Protein",
-        "target": "APIRequest-Encode",
-        "sourceHandle": "output",
-        "targetHandle": "input"
-      },
-      {
-        "id": "e3",
-        "source": "APIRequest-Encode",
-        "target": "APIRequest-Qdrant",
-        "sourceHandle": "output",
-        "targetHandle": "input"
-      },
-      {
-        "id": "e4",
-        "source": "APIRequest-Qdrant",
-        "target": "ConditionalRouter-Affinity",
-        "sourceHandle": "output",
-        "targetHandle": "input"
-      },
-      {
-        "id": "e5",
-        "source": "ConditionalRouter-Affinity",
-        "target": "TextOutput-Results",
-        "sourceHandle": "true_output",
-        "targetHandle": "input"
-      }
-    ]
-  },
-  "is_component": false,
-  "folder": null,
-  "endpoint_name": "bioflow-dti"
-}

run_langflow.py

@@ -1,21 +0,0 @@
-#!/usr/bin/env python
-"""Run BioFlow Orchestrator (Langflow) server."""
-
-import subprocess
-import os
-
-def main():
-    print("Starting BioFlow Orchestrator (Langflow)...")
-    
-    # Get the directory where this script is located
-    script_dir = os.path.dirname(os.path.abspath(__file__))
-    os.chdir(script_dir)
-    
-    # Path to langflow executable in .venv
-    langflow_exe = os.path.join(script_dir, ".venv", "Scripts", "langflow.exe")
-    
-    # Run langflow
-    subprocess.run([langflow_exe, "run", "--host", "0.0.0.0", "--port", "7860"])
-
-if __name__ == "__main__":
-    main()

ui/app/api/molecules/[id]/sdf/route.ts

@@ -1,31 +1,54 @@
 import { NextResponse } from 'next/server';
 import { API_CONFIG } from '@/config/api.config';
 
+// Mock PubChem CIDs for common molecules when backend is unavailable
+const MOCK_PUBCHEM_CIDS: Record<string, number> = {
+  caffeine: 2519,
+  aspirin: 2244,
+  ibuprofen: 3672,
+  acetaminophen: 1983,
+  morphine: 5288826,
+  penicillin: 5904,
+  insulin: 16129672,
+  glucose: 5793,
+  ethanol: 702,
+  water: 962,
+};
+
 export async function GET(
   _request: Request,
   { params }: { params: Promise<{ id: string }> }
 ) {
   const { id } = await params;
+  const moleculeId = id.toLowerCase();
+
+  let pubchemCid: number | null = null;
 
   try {
-    // Get molecule info from backend
+    // Try to get molecule info from backend
     const moleculeRes = await fetch(`${API_CONFIG.baseUrl}/api/molecules/${id}`);
     
-    if (!moleculeRes.ok) {
-      if (moleculeRes.status === 404) {
-        return NextResponse.json({ error: 'Molecule not found' }, { status: 404 });
-      }
-      throw new Error(`Backend returned ${moleculeRes.status}`);
-    }
-    
-    const molecule = await moleculeRes.json();
-    
-    if (!molecule.pubchemCid) {
-      return NextResponse.json({ error: 'No PubChem CID available for this molecule' }, { status: 400 });
+    if (moleculeRes.ok) {
+      const molecule = await moleculeRes.json();
+      pubchemCid = molecule.pubchemCid;
     }
+  } catch (error) {
+    console.error('Error fetching SDF:', error);
+    // Backend unavailable, use mock data
+  }
+
+  // Fallback to mock CID if backend didn't provide one
+  if (!pubchemCid) {
+    pubchemCid = MOCK_PUBCHEM_CIDS[moleculeId] || null;
+  }
 
+  if (!pubchemCid) {
+    return NextResponse.json({ error: 'No PubChem CID available for this molecule' }, { status: 400 });
+  }
+
+  try {
     // Fetch 3D SDF from PubChem
-    const pubchemUrl = `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/${molecule.pubchemCid}/record/SDF?record_type=3d`;
+    const pubchemUrl = `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/${pubchemCid}/record/SDF?record_type=3d`;
 
     const response = await fetch(pubchemUrl, {
       next: { revalidate: 3600 },
@@ -33,7 +56,7 @@ export async function GET(
 
     if (!response.ok) {
       // Try 2D SDF if 3D is not available
-      const pubchemUrl2D = `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/${molecule.pubchemCid}/record/SDF`;
+      const pubchemUrl2D = `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/${pubchemCid}/record/SDF`;
       const response2D = await fetch(pubchemUrl2D, {
         next: { revalidate: 3600 },
       });
@@ -63,7 +86,7 @@ export async function GET(
       },
     });
   } catch (error) {
-    console.error('Error fetching SDF:', error);
+    console.error('Error fetching SDF from PubChem:', error);
     return NextResponse.json(
       { error: `Failed to fetch SDF: ${error instanceof Error ? error.message : 'Unknown error'}` },
       { status: 500 }

ui/app/dashboard/data/data-view.tsx

@@ -1,118 +0,0 @@
-"use client"
-
-import { CloudUpload, Database, Download, Eye, FileText, Folder, HardDrive, Trash2,Upload } from "lucide-react"
-
-import { SectionHeader } from "@/components/page-header"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { Tabs, TabsContent,TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Dataset, Statistics } from "@/types/data"
-
-interface DataViewProps {
-    datasets: Dataset[];
-    stats: Statistics | null;
-}
-
-export function DataView({ datasets, stats }: DataViewProps) {
-    const statCards = [
-        { label: "Datasets", value: stats?.datasets?.toString() ?? "—", icon: Folder, color: "text-blue-500" },
-        { label: "Molecules", value: stats?.molecules ?? "—", icon: FileText, color: "text-cyan-500" },
-        { label: "Proteins", value: stats?.proteins ?? "—", icon: Database, color: "text-emerald-500" },
-        { label: "Storage Used", value: stats?.storage ?? "—", icon: HardDrive, color: "text-amber-500" },
-    ]
-
-    return (
-        <div className="space-y-8">
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-                {statCards.map((stat, i) => (
-                    <Card key={i}>
-                        <CardContent className="p-6">
-                            <div className="flex justify-between items-start mb-2">
-                                <div className="text-sm font-medium text-muted-foreground">{stat.label}</div>
-                                <div className={`text-lg ${stat.color}`}><stat.icon className="h-5 w-5" /></div>
-                            </div>
-                            <div className="text-2xl font-bold">{stat.value}</div>
-                        </CardContent>
-                    </Card>
-                ))}
-            </div>
-
-            <Tabs defaultValue="datasets">
-                <TabsList>
-                    <TabsTrigger value="datasets">Datasets</TabsTrigger>
-                    <TabsTrigger value="upload">Upload</TabsTrigger>
-                    <TabsTrigger value="processing">Processing</TabsTrigger>
-                </TabsList>
-                <TabsContent value="datasets" className="space-y-4">
-                    <SectionHeader title="Your Datasets" icon={<Folder className="h-5 w-5 text-primary" />} />
-                    <Card>
-                        <Table>
-                            <TableHeader>
-                                <TableRow>
-                                    <TableHead>Name</TableHead>
-                                    <TableHead>Type</TableHead>
-                                    <TableHead>Items</TableHead>
-                                    <TableHead>Size</TableHead>
-                                    <TableHead>Updated</TableHead>
-                                    <TableHead className="text-right">Actions</TableHead>
-                                </TableRow>
-                            </TableHeader>
-                            <TableBody>
-                                {datasets.length === 0 && (
-                                     <TableRow>
-                                        <TableCell colSpan={6} className="text-center text-muted-foreground text-sm">No datasets found.</TableCell>
-                                    </TableRow>
-                                )}
-                                {datasets.map((ds, i) => (
-                                    <TableRow key={i}>
-                                        <TableCell className="font-medium">{ds.name}</TableCell>
-                                        <TableCell>
-                                            <div className="flex items-center gap-2">
-                                                <Badge variant={ds.type === 'Molecules' ? 'default' : 'secondary'}>{ds.type}</Badge>
-                                            </div>
-                                        </TableCell>
-                                        <TableCell>{ds.count}</TableCell>
-                                        <TableCell>{ds.size}</TableCell>
-                                        <TableCell>{ds.updated}</TableCell>
-                                        <TableCell className="text-right">
-                                            <div className="flex justify-end gap-2">
-                                                <Button size="icon" variant="ghost" className="h-8 w-8"><Eye className="h-4 w-4" /></Button>
-                                                <Button size="icon" variant="ghost" className="h-8 w-8"><Download className="h-4 w-4" /></Button>
-                                                <Button size="icon" variant="ghost" className="h-8 w-8 text-destructive hover:text-destructive"><Trash2 className="h-4 w-4" /></Button>
-                                            </div>
-                                        </TableCell>
-                                    </TableRow>
-                                ))}
-                            </TableBody>
-                        </Table>
-                    </Card>
-                </TabsContent>
-                <TabsContent value="upload">
-                    <SectionHeader title="Upload New Data" icon={<Upload className="h-5 w-5 text-primary" />} />
-                    <Card>
-                        <CardContent className="p-12">
-                            <div className="border-2 border-dashed rounded-lg p-12 flex flex-col items-center justify-center text-center space-y-4 hover:bg-accent/50 transition-colors cursor-pointer">
-                                <div className="h-16 w-16 rounded-full bg-primary/10 flex items-center justify-center text-primary">
-                                    <CloudUpload className="h-8 w-8" />
-                                </div>
-                                <div>
-                                    <div className="text-lg font-semibold">Click to upload or drag and drop</div>
-                                    <div className="text-sm text-muted-foreground">CSV, SDF, FASTA, or JSON (max 50MB)</div>
-                                </div>
-                            </div>
-                        </CardContent>
-                    </Card>
-                </TabsContent>
-                <TabsContent value="processing">
-                    <Card>
-                        <CardContent className="p-12 text-center text-muted-foreground">
-                            No active processing tasks.
-                        </CardContent>
-                    </Card>
-                </TabsContent>
-            </Tabs>
-        </div>
-    )
-}

ui/app/dashboard/data/page.tsx

@@ -1,29 +0,0 @@
-import { Database, Loader2 } from "lucide-react"
-import { Suspense } from 'react'
-
-import { PageHeader } from "@/components/page-header"
-import { getData } from "@/lib/data-service"
-
-import { DataView } from "./data-view"
-
-export default async function DataPage() {
-    const { datasets, stats } = await getData()
-
-    return (
-        <div className="space-y-8 animate-in fade-in duration-500">
-             <PageHeader
-                title="Data Management"
-                subtitle="Upload, manage, and organize your datasets"
-                icon={<Database className="h-8 w-8" />} 
-            />
-
-            <Suspense fallback={
-                <div className="flex h-[400px] w-full items-center justify-center">
-                    <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-                </div>
-            }>
-                <DataView datasets={datasets} stats={stats} />
-            </Suspense>
-        </div>
-    )
-}

ui/app/dashboard/discovery/page.tsx

@@ -1,281 +0,0 @@
-"use client"
-
-import { ArrowRight,CheckCircle2, Circle, Loader2, Microscope, Search } from "lucide-react"
-import * as React from "react"
-
-import { PageHeader, SectionHeader } from "@/components/page-header"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
-import { Label } from "@/components/ui/label"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Tabs, TabsContent,TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Textarea } from "@/components/ui/textarea"
-
-interface Candidate {
-  name?: string;
-  smiles?: string;
-  content?: string;
-  score: number;
-  mw?: number | string;
-  logp?: number | string;
-}
-
-interface DiscoveryResult {
-  candidates: Candidate[];
-  query: string;
-  search_type: string;
-}
-
-export default function DiscoveryPage() {
-  const [query, setQuery] = React.useState("")
-  const [searchType, setSearchType] = React.useState("similarity")
-  const [database, setDatabase] = React.useState("all")
-  const [isSearching, setIsSearching] = React.useState(false)
-  const [step, setStep] = React.useState(0)
-  const [jobId, setJobId] = React.useState<string | null>(null)
-  const [results, setResults] = React.useState<DiscoveryResult | null>(null)
-  const [error, setError] = React.useState<string | null>(null)
-
-  const handleSearch = async () => {
-    setIsSearching(true)
-    setStep(1)
-    setError(null)
-    setResults(null)
-    
-    try {
-      // Start discovery pipeline
-      const response = await fetch('/api/discovery', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          query,
-          searchType,
-          database,
-          limit: 10,
-        }),
-      })
-      
-      const data = await response.json()
-      
-      if (data.job_id) {
-        setJobId(data.job_id)
-        setStep(2)
-        
-        // Poll for results
-        pollForResults(data.job_id)
-      } else if (data.candidates) {
-        // Direct result (sync mode)
-        setResults({ candidates: data.candidates, query, search_type: searchType })
-        setStep(4)
-        setIsSearching(false)
-      }
-    } catch (err) {
-      console.error("Discovery error:", err)
-      setError(`Discovery failed: ${err instanceof Error ? err.message : 'Unknown error'}. Ensure the backend is running.`)
-      setIsSearching(false)
-      setStep(0)
-    }
-  }
-  
-  const pollForResults = async (id: string) => {
-    const maxAttempts = 30
-    let attempts = 0
-    
-    const poll = async () => {
-      try {
-        const response = await fetch(`/api/discovery?jobId=${id}`)
-        const data = await response.json()
-        
-        // Update step based on current_step
-        if (data.current_step === "encode") setStep(2)
-        else if (data.current_step === "search") setStep(3)
-        else if (data.current_step === "predict") setStep(3)
-        
-        if (data.status === "completed") {
-          setResults(data.result)
-          setStep(4)
-          setIsSearching(false)
-          return
-        } else if (data.status === "failed") {
-          setError(data.error || "Pipeline failed")
-          setIsSearching(false)
-          return
-        }
-        
-        attempts++
-        if (attempts < maxAttempts) {
-          setTimeout(poll, 1000)
-        } else {
-          setError("Pipeline timeout")
-          setIsSearching(false)
-        }
-      } catch (err) {
-        setError("Failed to get status")
-        setIsSearching(false)
-      }
-    }
-    
-    poll()
-  }
-
-  const steps = [
-    { name: "Input", status: step > 0 ? "done" : "active" },
-    { name: "Encode", status: step > 1 ? "done" : (step === 1 ? "active" : "pending") },
-    { name: "Search", status: step > 2 ? "done" : (step === 2 ? "active" : "pending") },
-    { name: "Predict", status: step > 3 ? "done" : (step === 3 ? "active" : "pending") },
-    { name: "Results", status: step === 4 ? "active" : "pending" },
-  ]
-
-  const candidates = results?.candidates || []
-
-  return (
-    <div className="space-y-8 animate-in fade-in duration-500">
-      <PageHeader 
-        title="Drug Discovery" 
-        subtitle="Search for drug candidates with AI-powered analysis" 
-        icon={<Microscope className="h-8 w-8" />}
-      />
-
-      <Card>
-        <div className="p-4 border-b font-semibold">Search Query</div>
-        <CardContent className="p-6">
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-                <div className="md:col-span-3">
-                    <Textarea 
-                        placeholder="Enter a natural language query, SMILES string, or FASTA sequence..."
-                        className="min-h-[120px] font-mono"
-                        value={query}
-                        onChange={(e) => setQuery(e.target.value)}
-                    />
-                </div>
-                <div className="space-y-4">
-                    <div className="space-y-2">
-                        <Label>Search Type</Label>
-                        <Select value={searchType} onValueChange={setSearchType}>
-                            <SelectTrigger>
-                                <SelectValue placeholder="Select type" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="similarity">Similarity</SelectItem>
-                                <SelectItem value="binding">Binding Affinity</SelectItem>
-                                <SelectItem value="properties">Properties</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
-                     <div className="space-y-2">
-                        <Label>Database</Label>
-                        <Select value={database} onValueChange={setDatabase}>
-                            <SelectTrigger>
-                                <SelectValue placeholder="Select database" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="all">All</SelectItem>
-                                <SelectItem value="drugbank">DrugBank</SelectItem>
-                                <SelectItem value="chembl">ChEMBL</SelectItem>
-                                <SelectItem value="zinc">ZINC</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
-                    <Button 
-                        className="w-full" 
-                        onClick={handleSearch}
-                        disabled={isSearching || !query}
-                    >
-                        {isSearching ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Search className="mr-2 h-4 w-4" />}
-                        {isSearching ? "Running..." : "Search"}
-                    </Button>
-                </div>
-            </div>
-        </CardContent>
-      </Card>
-
-      <div className="space-y-4">
-         <SectionHeader title="Pipeline Status" icon={<ArrowRight className="h-5 w-5 text-muted-foreground" />} />
-         
-         <div className="relative">
-            <div className="absolute left-0 top-1/2 w-full h-0.5 bg-muted -z-10 transform -translate-y-1/2"></div>
-            <div className="flex justify-between items-center w-full px-4">
-                {steps.map((s, i) => (
-                    <div key={i} className="flex flex-col items-center gap-2 bg-background px-2">
-                        <div className={`h-8 w-8 rounded-full flex items-center justify-center border-2 transition-colors ${
-                            s.status === 'done' ? 'bg-primary border-primary text-primary-foreground' : 
-                            s.status === 'active' ? 'border-primary text-primary animate-pulse' : 'border-muted text-muted-foreground bg-background'
-                        }`}>
-                            {s.status === 'done' ? <CheckCircle2 className="h-5 w-5" /> : <Circle className="h-5 w-5" />}
-                        </div>
-                        <span className={`text-sm font-medium ${s.status === 'pending' ? 'text-muted-foreground' : 'text-foreground'}`}>
-                            {s.name}
-                        </span>
-                    </div>
-                ))}
-            </div>
-         </div>
-      </div>
-
-      {error && (
-        <Card className="border-amber-500 bg-amber-50 dark:bg-amber-950">
-          <CardContent className="p-4 text-amber-700 dark:text-amber-300">
-            ⚠️ {error}
-          </CardContent>
-        </Card>
-      )}
-
-      {step === 4 && candidates.length > 0 && (
-        <div className="space-y-4 animate-in slide-in-from-bottom-4 duration-500">
-             <SectionHeader title="Results" icon={<CheckCircle2 className="h-5 w-5 text-green-500" />} />
-             
-             <Tabs defaultValue="candidates">
-                <TabsList>
-                    <TabsTrigger value="candidates">Top Candidates ({candidates.length})</TabsTrigger>
-                    <TabsTrigger value="analysis">Property Analysis</TabsTrigger>
-                    <TabsTrigger value="evidence">Evidence</TabsTrigger>
-                </TabsList>
-                <TabsContent value="candidates" className="space-y-4">
-                    {candidates.map((candidate, i) => (
-                        <Card key={i}>
-                            <CardContent className="p-4 flex items-center justify-between">
-                                <div>
-                                    <div className="font-bold text-lg">
-                                      {candidate.name || `Candidate ${i + 1}`}
-                                    </div>
-                                    <div className="text-sm text-muted-foreground font-mono mb-1">
-                                      {candidate.smiles || candidate.content || "N/A"}
-                                    </div>
-                                    <div className="flex gap-4 text-sm text-muted-foreground">
-                                        <span>MW: {candidate.mw ?? "N/A"}</span>
-                                        <span>LogP: {candidate.logp ?? "N/A"}</span>
-                                    </div>
-                                </div>
-                                <div className="text-right">
-                                    <div className="text-sm text-muted-foreground">Score</div>
-                                    <div className={`text-xl font-bold ${
-                                        candidate.score >= 0.9 ? 'text-green-600' : 
-                                        candidate.score >= 0.8 ? 'text-green-500' : 'text-amber-500'
-                                    }`}>
-                                        {typeof candidate.score === 'number' ? candidate.score.toFixed(2) : candidate.score}
-                                    </div>
-                                </div>
-                            </CardContent>
-                        </Card>
-                    ))}
-                </TabsContent>
-                <TabsContent value="analysis">
-                    <Card>
-                        <CardContent className="p-12 text-center text-muted-foreground">
-                            Chart visualization would go here (using Recharts).
-                        </CardContent>
-                    </Card>
-                </TabsContent>
-                <TabsContent value="evidence">
-                     <Card>
-                        <CardContent className="p-12 text-center text-muted-foreground">
-                            Evidence graph visualization would go here.
-                        </CardContent>
-                    </Card>
-                </TabsContent>
-             </Tabs>
-        </div>
-      )}
-    </div>
-  )
-}

ui/app/dashboard/error.tsx

@@ -1,79 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import Link from "next/link";
-
-import { RefreshCcw, Home, AlertCircle } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyTitle,
-} from "@/components/ui/empty";
-
-export default function Error({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
-  useEffect(() => {
-    console.error(error);
-  }, [error]);
-
-  return (
-    <div className="flex w-full items-center justify-center p-4">
-      <div className="flex min-h-screen items-center border-x">
-        <div className="relative">
-          <div className="absolute inset-x-0 top-0 h-px bg-border" />
-          <Empty>
-            <EmptyHeader>
-              <div className="flex justify-center mb-4">
-                <div className="p-4 rounded-full bg-destructive/10">
-                  <AlertCircle className="h-12 w-12 text-destructive" />
-                </div>
-              </div>
-              <EmptyTitle className="font-black font-mono text-5xl md:text-7xl">
-                ERREUR
-              </EmptyTitle>
-              <EmptyDescription className="text-lg max-w-md mx-auto">
-                Désolé, une erreur inattendue est survenue lors de la navigation.
-                {error.digest && (
-                  <span className="block mt-2 text-xs font-mono text-muted-foreground">
-                    ID digest: {error.digest}
-                  </span>
-                )}
-              </EmptyDescription>
-            </EmptyHeader>
-            <EmptyContent>
-              <div className="flex flex-wrap items-center justify-center gap-4">
-                <Button
-                  onClick={() => reset()}
-                  size="lg"
-                  className="rounded-full px-8"
-                >
-                  <RefreshCcw className="mr-2 h-4 w-4" /> Réessayer
-                </Button>
-                <Button
-                  asChild
-                  variant="outline"
-                  size="lg"
-                  className="rounded-full px-8"
-                >
-                  <Link href="/">
-                    <Home className="mr-2 h-4 w-4" /> Accueil
-                  </Link>
-                </Button>
-              </div>
-            </EmptyContent>
-          </Empty>
-          <div className="absolute inset-x-0 bottom-0 h-px bg-border" />
-        </div>
-      </div>
-    </div>
-  );
-}

ui/app/dashboard/explorer/chart.tsx

@@ -1,56 +0,0 @@
-"use client"
-
-import { AlertCircle } from "lucide-react"
-import { Cell,ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis, ZAxis } from "recharts"
-
-import { Card, CardContent } from "@/components/ui/card"
-import { DataPoint } from "@/types/explorer"
-
-export function ExplorerChart({ data }: { data: DataPoint[] }) {
-    if (!data || data.length === 0) {
-        return (
-            <div className="flex h-full items-center justify-center text-muted-foreground">
-                <AlertCircle className="mr-2 h-4 w-4" />
-                No data available for this configuration.
-            </div>
-        )
-    }
-
-    return (
-        <Card className="h-[500px] overflow-hidden bg-gradient-to-br from-card to-secondary/30">
-            <CardContent className="p-4 h-full relative">
-                <ResponsiveContainer width="100%" height="100%">
-                    <ScatterChart margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
-                        <XAxis type="number" dataKey="x" name="PC1" stroke="currentColor" fontSize={12} tickLine={false} axisLine={{ strokeOpacity: 0.2 }} />
-                        <YAxis type="number" dataKey="y" name="PC2" stroke="currentColor" fontSize={12} tickLine={false} axisLine={{ strokeOpacity: 0.2 }} />
-                        <ZAxis type="number" dataKey="z" range={[50, 400]} />
-                        <Tooltip 
-                            cursor={{ strokeDasharray: '3 3' }} 
-                            content={({ active, payload }) => {
-                                if (active && payload && payload.length) {
-                                    const point = payload[0].payload as DataPoint;
-                                    return (
-                                        <div className="bg-popover border border-border p-3 rounded-lg shadow-xl text-sm z-50">
-                                            <p className="font-bold mb-1 text-primary">{point.name}</p>
-                                            <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-muted-foreground">
-                                                <span>X:</span> <span className="text-foreground">{Number(point.x).toFixed(2)}</span>
-                                                <span>Y:</span> <span className="text-foreground">{Number(point.y).toFixed(2)}</span>
-                                                <span>Affinity:</span> <span className="text-foreground">{Number(point.affinity).toFixed(2)}</span>
-                                            </div>
-                                        </div>
-                                    )
-                                }
-                                return null;
-                            }} 
-                        />
-                        <Scatter name="Molecules" data={data} fill="#8884d8" animationDuration={1000}>
-                            {data.map((entry, index) => (
-                                <Cell key={`cell-${index}`} fill={entry.color} fillOpacity={0.7} className="hover:opacity-100 transition-opacity duration-200" />
-                            ))}
-                        </Scatter>
-                    </ScatterChart>
-                </ResponsiveContainer>
-            </CardContent>
-        </Card>
-    )
-}

ui/app/dashboard/explorer/components.tsx

@@ -1,100 +0,0 @@
-"use client"
-
-import { RefreshCw, SlidersHorizontal } from "lucide-react"
-import { useRouter, useSearchParams } from "next/navigation"
-import * as React from "react"
-
-import { Button } from "@/components/ui/button"
-import { Card, CardContent,CardHeader, CardTitle } from "@/components/ui/card"
-import { Label } from "@/components/ui/label"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-
-export function ExplorerControls() {
-  const router = useRouter()
-  const searchParams = useSearchParams()
-  const [isPending, startTransition] = React.useTransition()
-
-  const dataset = searchParams.get("dataset") || "DrugBank"
-  const visualization = searchParams.get("view") || "UMAP" 
-  const colorBy = searchParams.get("colorBy") || "Activity"
-
-  const createQueryString = React.useCallback(
-    (name: string, value: string) => {
-      const params = new URLSearchParams(searchParams.toString())
-      params.set(name, value)
-      return params.toString()
-    },
-    [searchParams]
-  )
-
-  const handleUpdate = (name: string, value: string) => {
-    startTransition(() => {
-        router.push(`?${createQueryString(name, value)}`, { scroll: false })
-    })
-  }
-
-  return (
-    <Card className="h-full border-l-4 border-l-primary/50">
-        <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-lg">
-                <SlidersHorizontal className="h-5 w-5" />
-                Controls
-            </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-6">
-            <div className="space-y-2">
-                <Label htmlFor="dataset">Dataset</Label>
-                <Select value={dataset} onValueChange={(v) => handleUpdate("dataset", v)}>
-                    <SelectTrigger id="dataset">
-                        <SelectValue placeholder="Select dataset" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectItem value="DrugBank">DrugBank</SelectItem>
-                        <SelectItem value="ChEMBL">ChEMBL</SelectItem>
-                        <SelectItem value="ZINC">ZINC</SelectItem>
-                    </SelectContent>
-                </Select>
-            </div>
-            <div className="space-y-2">
-                <Label htmlFor="visualization">Algorithm</Label>
-                <Select value={visualization} onValueChange={(v) => handleUpdate("view", v)}>
-                    <SelectTrigger id="visualization">
-                        <SelectValue placeholder="Select algorithm" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectItem value="UMAP">UMAP</SelectItem>
-                        <SelectItem value="t-SNE">t-SNE</SelectItem>
-                        <SelectItem value="PCA">PCA</SelectItem>
-                    </SelectContent>
-                </Select>
-            </div>
-            <div className="space-y-2">
-                <Label htmlFor="colorBy">Color Mapping</Label>
-                <Select value={colorBy} onValueChange={(v) => handleUpdate("colorBy", v)}>
-                    <SelectTrigger id="colorBy">
-                        <SelectValue placeholder="Select color metric" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectItem value="Activity">Binding Affinity</SelectItem>
-                        <SelectItem value="MW">Molecular Weight</SelectItem>
-                        <SelectItem value="LogP">LogP</SelectItem>
-                        <SelectItem value="Cluster">Cluster ID</SelectItem>
-                    </SelectContent>
-                </Select>
-            </div>
-            
-            <div className="pt-4">
-                <Button 
-                    variant="secondary" 
-                    className="w-full" 
-                    disabled={isPending}
-                    onClick={() => handleUpdate("refresh", Date.now().toString())}
-                >
-                    <RefreshCw className={`mr-2 h-4 w-4 ${isPending ? "animate-spin" : ""}`} />
-                    {isPending ? "Updating..." : "Regenerate View"}
-                </Button>
-            </div>
-        </CardContent>
-    </Card>
-  )
-}

ui/app/dashboard/explorer/page.tsx

@@ -1,59 +0,0 @@
-import { Loader2 } from "lucide-react"
-import { Suspense } from "react"
-
-import { getExplorerPoints } from "@/lib/explorer-service"
-
-import { ExplorerChart } from "./chart"
-import { ExplorerControls } from "./components"
-
-interface ExplorerPageProps {
-  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
-}
-
-function pickParam(v: string | string[] | undefined): string | undefined {
-  if (Array.isArray(v)) return v[0]
-  return v
-}
-
-export default async function ExplorerPage({ searchParams }: ExplorerPageProps) {
-  // Await searchParams as required by Next.js 16/15
-  const params = await searchParams
-  
-  const dataset = pickParam(params.dataset) || "DrugBank"
-  const view = pickParam(params.view) || "UMAP"
-  const colorBy = pickParam(params.colorBy) || "Activity"
-
-  const { points: data } = await getExplorerPoints(dataset, view, colorBy)
-
-  return (
-    <div className="container mx-auto p-6 space-y-6">
-      <div className="flex flex-col space-y-2">
-        <h1 className="text-3xl font-bold tracking-tight">Data Explorer</h1>
-        <p className="text-muted-foreground">
-          Visualize binding affinity landscapes and model predictions in 3D space using dimensionality reduction.
-        </p>
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
-        <div className="lg:col-span-1">
-          <Suspense fallback={<div>Loading controls...</div>}>
-            <ExplorerControls />
-          </Suspense>
-        </div>
-
-        <div className="lg:col-span-3">
-          <Suspense
-            key={`${dataset}-${view}-${colorBy}`}
-            fallback={
-              <div className="h-[500px] flex items-center justify-center border rounded-lg bg-muted/10">
-                <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-              </div>
-            }
-          >
-            <ExplorerChart data={data} />
-          </Suspense>
-        </div>
-      </div>
-    </div>
-  )
-}

ui/app/dashboard/layout.tsx

@@ -1,21 +0,0 @@
-import type { ReactNode } from 'react';
-import {
-  SidebarInset,
-  SidebarProvider,
-} from "@/components/animate-ui/components/radix/sidebar";
-import { AppSidebar } from "@/components/sidebar";
-
-export default function DashboardLayout({ children }: { children: ReactNode }) {
-  return (
-    <SidebarProvider>
-      <AppSidebar />
-      <SidebarInset>
-        <main className="flex-1 overflow-y-auto bg-background p-8">
-          <div className="mx-auto max-w-7xl">
-            {children}
-          </div>
-        </main>
-      </SidebarInset>
-    </SidebarProvider>
-  );
-}

ui/app/dashboard/molecules-2d/_components/Smiles2DViewer.tsx

@@ -1,119 +0,0 @@
-'use client';
-
-import { AlertCircle } from 'lucide-react';
-import { useCallback, useEffect, useId, useRef, useState } from 'react';
-import SmilesDrawer from 'smiles-drawer';
-
-import { Card, CardContent } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
-
-interface Smiles2DViewerProps {
-  smiles: string;
-  width?: number;
-  height?: number;
-  className?: string;
-}
-
-export function Smiles2DViewer({
-  smiles,
-  width = 400,
-  height = 300,
-  className,
-}: Smiles2DViewerProps) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const canvasId = useId();
-  const [error, setError] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  const drawMolecule = useCallback(async () => {
-    if (!canvasRef.current || !smiles) {
-      setIsLoading(false);
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const drawer = new SmilesDrawer.SmiDrawer({
-        width,
-        height,
-        bondThickness: 1.5,
-        bondLength: 15,
-        shortBondLength: 0.85,
-        bondSpacing: 4,
-        atomVisualization: 'default',
-        isomeric: true,
-        debug: false,
-        terminalCarbons: false,
-        explicitHydrogens: false,
-        compactDrawing: true,
-        fontSizeLarge: 11,
-        fontSizeSmall: 8,
-        padding: 20,
-      });
-
-      try {
-        await new Promise<void>((resolve, reject) => {
-          (drawer as any).draw(
-            smiles,
-            `[id="${canvasId}"]`,
-            'light',
-            () => resolve(),
-            (drawError: Error) => reject(drawError)
-          );
-        });
-      } catch (drawError) {
-        throw drawError;
-      }
-
-      setIsLoading(false);
-    } catch (err) {
-      console.error('SMILES drawing error:', err);
-      setError(
-        err instanceof Error
-          ? `Invalid SMILES: ${err.message}`
-          : 'Failed to render molecule structure'
-      );
-      setIsLoading(false);
-    }
-  }, [smiles, width, height]);
-
-  useEffect(() => {
-    drawMolecule();
-  }, [drawMolecule]);
-
-  if (error) {
-    return (
-      <Card className={`border-destructive bg-destructive/10 ${className}`}>
-        <CardContent className="flex items-center gap-3 p-4">
-          <AlertCircle className="size-5 text-destructive" />
-          <div className="flex flex-col">
-            <span className="text-sm font-medium text-destructive">
-              Visualization Error
-            </span>
-            <span className="text-xs text-muted-foreground">{error}</span>
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <div className={`relative ${className}`}>
-      {isLoading && (
-        <Skeleton
-          className="absolute inset-0"
-          style={{ width, height }}
-        />
-      )}
-      <canvas
-        ref={canvasRef}
-        id={canvasId}
-        width={width}
-        height={height}
-        className={`bg-background rounded-lg ${isLoading ? 'opacity-0' : 'opacity-100'} transition-opacity duration-200`}
-      />
-    </div>
-  );
-}

ui/app/dashboard/molecules-2d/page.tsx

@@ -1,223 +0,0 @@
-'use client';
-
-import { Check, Copy, Search } from 'lucide-react';
-import dynamic from 'next/dynamic';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Separator } from '@/components/ui/separator';
-import { Skeleton } from '@/components/ui/skeleton';
-import { getMolecules } from '@/lib/visualization-api';
-import type { Molecule } from '@/lib/visualization-types';
-
-// Dynamic import of the 2D viewer to prevent SSR issues
-const Smiles2DViewer = dynamic(
-  () =>
-    import('./_components/Smiles2DViewer').then((mod) => mod.Smiles2DViewer),
-  {
-    ssr: false,
-    loading: () => <Skeleton className="size-[400px]" />,
-  }
-);
-
-export default function Molecules2DPage() {
-  const [molecules, setMolecules] = useState<Molecule[]>([]);
-  const [selectedMolecule, setSelectedMolecule] = useState<Molecule | null>(null);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [copied, setCopied] = useState(false);
-
-  useEffect(() => {
-    const loadMolecules = async () => {
-      try {
-        setIsLoading(true);
-        const data = await getMolecules();
-        setMolecules(data);
-        if (data.length > 0) {
-          setSelectedMolecule(data[0]);
-        }
-      } catch (err) {
-        setError(
-          err instanceof Error ? err.message : 'Failed to load molecules'
-        );
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    loadMolecules();
-  }, []);
-
-  const filteredMolecules = useMemo(() => {
-    if (!searchQuery.trim()) return molecules;
-    const query = searchQuery.toLowerCase();
-    return molecules.filter(
-      (m) =>
-        m.name.toLowerCase().includes(query) ||
-        m.smiles.toLowerCase().includes(query)
-    );
-  }, [molecules, searchQuery]);
-
-  const handleCopySmiles = useCallback(async () => {
-    if (!selectedMolecule) return;
-    try {
-      await navigator.clipboard.writeText(selectedMolecule.smiles);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Fallback for older browsers
-      const textArea = document.createElement('textarea');
-      textArea.value = selectedMolecule.smiles;
-      document.body.appendChild(textArea);
-      textArea.select();
-      document.execCommand('copy');
-      document.body.removeChild(textArea);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  }, [selectedMolecule]);
-
-  if (error) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <Card className="max-w-md">
-          <CardHeader>
-            <CardTitle className="text-destructive">Error</CardTitle>
-            <CardDescription>{error}</CardDescription>
-          </CardHeader>
-        </Card>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex h-full gap-6 p-6">
-      {/* Left Panel - Molecule List */}
-      <Card className="w-80 shrink-0">
-        <CardHeader className="pb-3">
-          <CardTitle className="text-lg">Molecules</CardTitle>
-          <CardDescription>Select a molecule to visualize</CardDescription>
-        </CardHeader>
-        <CardContent className="pb-3">
-          <div className="relative">
-            <Search className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
-            <Input
-              placeholder="Search molecules..."
-              className="pl-8"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-            />
-          </div>
-        </CardContent>
-        <Separator />
-        <ScrollArea className="h-[calc(100vh-280px)]">
-          <div className="p-2">
-            {isLoading ? (
-              <div className="space-y-2">
-                {[1, 2, 3].map((i) => (
-                  <Skeleton key={i} className="h-16 w-full" />
-                ))}
-              </div>
-            ) : filteredMolecules.length === 0 ? (
-              <p className="p-4 text-center text-sm text-muted-foreground">
-                No molecules found
-              </p>
-            ) : (
-              <div className="space-y-1">
-                {filteredMolecules.map((molecule) => (
-                  <button
-                    key={molecule.id}
-                    onClick={() => setSelectedMolecule(molecule)}
-                    className={`w-full rounded-lg p-3 text-left transition-colors hover:bg-accent ${
-                      selectedMolecule?.id === molecule.id
-                        ? 'bg-accent'
-                        : 'bg-transparent'
-                    }`}
-                  >
-                    <div className="font-medium">{molecule.name}</div>
-                    <div className="truncate text-xs text-muted-foreground">
-                      {molecule.smiles}
-                    </div>
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-        </ScrollArea>
-      </Card>
-
-      {/* Right Panel - Visualization */}
-      <div className="flex flex-1 flex-col gap-6">
-        {selectedMolecule ? (
-          <>
-            {/* Molecule Info Card */}
-            <Card>
-              <CardHeader className="pb-3">
-                <div className="flex items-start justify-between">
-                  <div>
-                    <CardTitle>{selectedMolecule.name}</CardTitle>
-                    <CardDescription>
-                      {selectedMolecule.description}
-                    </CardDescription>
-                  </div>
-                  <Badge variant="outline">
-                    PubChem: {selectedMolecule.pubchemCid}
-                  </Badge>
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="flex items-center gap-2">
-                  <code className="flex-1 truncate rounded bg-muted px-2 py-1 text-sm">
-                    {selectedMolecule.smiles}
-                  </code>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={handleCopySmiles}
-                    className="shrink-0"
-                  >
-                    {copied ? (
-                      <>
-                        <Check className="mr-1 size-4" />
-                        Copied
-                      </>
-                    ) : (
-                      <>
-                        <Copy className="mr-1 size-4" />
-                        Copy SMILES
-                      </>
-                    )}
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* 2D Structure Card */}
-            <Card className="flex-1">
-              <CardHeader>
-                <CardTitle className="text-lg">2D Structure</CardTitle>
-              </CardHeader>
-              <CardContent className="flex items-center justify-center">
-                <Smiles2DViewer
-                  smiles={selectedMolecule.smiles}
-                  width={500}
-                  height={400}
-                />
-              </CardContent>
-            </Card>
-          </>
-        ) : (
-          <div className="flex flex-1 items-center justify-center">
-            <p className="text-muted-foreground">
-              Select a molecule to view its structure
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

ui/app/dashboard/molecules-3d/_components/Molecule3DViewer.tsx

@@ -1,191 +0,0 @@
-'use client';
-
-import { AlertCircle, RotateCcw } from 'lucide-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Skeleton } from '@/components/ui/skeleton';
-import type { MoleculeRepresentation } from '@/lib/visualization-types';
-
-interface Molecule3DViewerProps {
-  sdfData: string;
-  width?: number;
-  height?: number;
-  className?: string;
-  initialRepresentation?: MoleculeRepresentation;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type $3Dmol = any;
-
-export function Molecule3DViewer({
-  sdfData,
-  width = 400,
-  height = 400,
-  className,
-  initialRepresentation = 'stick',
-}: Molecule3DViewerProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const viewerRef = useRef<any>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [representation, setRepresentation] =
-    useState<MoleculeRepresentation>(initialRepresentation);
-  const [$3Dmol, set$3Dmol] = useState<$3Dmol | null>(null);
-
-  // Load 3Dmol.js dynamically
-  useEffect(() => {
-    const load3Dmol = async () => {
-      try {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const module = await import('3dmol') as any;
-        set$3Dmol(module);
-      } catch (err) {
-        console.error('Failed to load 3Dmol:', err);
-        setError('Failed to load 3D visualization library');
-        setIsLoading(false);
-      }
-    };
-    load3Dmol();
-  }, []);
-
-  const getStyleForRepresentation = useCallback(
-    (rep: MoleculeRepresentation) => {
-      switch (rep) {
-        case 'stick':
-          return { stick: { radius: 0.15 } };
-        case 'sphere':
-          return { sphere: { scale: 0.3 } };
-        case 'line':
-          return { line: { linewidth: 2 } };
-        case 'cartoon':
-          return { cartoon: {} };
-        default:
-          return { stick: { radius: 0.15 } };
-      }
-    },
-    []
-  );
-
-  const initViewer = useCallback(() => {
-    if (!containerRef.current || !$3Dmol || !sdfData) return;
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      // Clean up existing viewer
-      if (viewerRef.current) {
-        viewerRef.current.removeAllModels();
-      }
-
-      // Create viewer - use 'white' to avoid crash on some systems
-      const viewer = $3Dmol.createViewer(containerRef.current, {
-        backgroundColor: 'white',
-      });
-      viewerRef.current = viewer;
-
-      // Add molecule
-      viewer.addModel(sdfData, 'sdf');
-      viewer.setStyle({}, getStyleForRepresentation(representation));
-      viewer.zoomTo();
-      viewer.render();
-
-      setIsLoading(false);
-    } catch (err) {
-      console.error('3D viewer error:', err);
-      setError(
-        err instanceof Error
-          ? `Visualization error: ${err.message}`
-          : 'Failed to render 3D structure'
-      );
-      setIsLoading(false);
-    }
-  }, [$3Dmol, sdfData, representation, getStyleForRepresentation]);
-
-  useEffect(() => {
-    initViewer();
-  }, [$3Dmol, sdfData, initViewer]);
-
-  // Update representation
-  useEffect(() => {
-    if (!viewerRef.current) return;
-    try {
-      viewerRef.current.setStyle({}, getStyleForRepresentation(representation));
-      viewerRef.current.render();
-    } catch (err) {
-      console.error('Style update error:', err);
-    }
-  }, [representation, getStyleForRepresentation]);
-
-  const handleResetCamera = useCallback(() => {
-    if (!viewerRef.current) return;
-    viewerRef.current.zoomTo();
-    viewerRef.current.render();
-  }, []);
-
-  if (error) {
-    return (
-      <Card className={`border-destructive bg-destructive/10 ${className}`}>
-        <CardContent className="flex items-center gap-3 p-4">
-          <AlertCircle className="size-5 text-destructive" />
-          <div className="flex flex-col">
-            <span className="text-sm font-medium text-destructive">
-              3D Visualization Error
-            </span>
-            <span className="text-xs text-muted-foreground">{error}</span>
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <div className={`flex flex-col gap-3 ${className}`}>
-      <div className="flex items-center gap-2">
-        <Select
-          value={representation}
-          onValueChange={(value) =>
-            setRepresentation(value as MoleculeRepresentation)
-          }
-        >
-          <SelectTrigger className="w-32">
-            <SelectValue placeholder="Style" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="stick">Stick</SelectItem>
-            <SelectItem value="sphere">Sphere</SelectItem>
-            <SelectItem value="line">Line</SelectItem>
-          </SelectContent>
-        </Select>
-        <Button variant="outline" size="sm" onClick={handleResetCamera}>
-          <RotateCcw className="mr-1 size-4" />
-          Reset
-        </Button>
-      </div>
-
-      <div className="relative">
-        {isLoading && (
-          <Skeleton
-            className="absolute inset-0 z-10"
-            style={{ width, height }}
-          />
-        )}
-        <div
-          ref={containerRef}
-          style={{ width, height }}
-          className={`rounded-lg border bg-background ${isLoading ? 'opacity-0' : 'opacity-100'} transition-opacity duration-200`}
-        />
-      </div>
-    </div>
-  );
-}

ui/app/dashboard/molecules-3d/page.tsx

@@ -1,264 +0,0 @@
-'use client';
-
-import { Check, Copy, Search } from 'lucide-react';
-import dynamic from 'next/dynamic';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Separator } from '@/components/ui/separator';
-import { Skeleton } from '@/components/ui/skeleton';
-import { getMolecules, getMoleculeSDF } from '@/lib/visualization-api';
-import type { Molecule } from '@/lib/visualization-types';
-
-// Dynamic import of the 3D viewer to prevent SSR issues
-const Molecule3DViewer = dynamic(
-  () =>
-    import('./_components/Molecule3DViewer').then((mod) => mod.Molecule3DViewer),
-  {
-    ssr: false,
-    loading: () => <Skeleton className="size-[400px]" />,
-  }
-);
-
-export default function Molecules3DPage() {
-  const [molecules, setMolecules] = useState<Molecule[]>([]);
-  const [selectedMolecule, setSelectedMolecule] = useState<Molecule | null>(null);
-  const [sdfData, setSdfData] = useState<string | null>(null);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSdfLoading, setIsSdfLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [sdfError, setSdfError] = useState<string | null>(null);
-  const [copied, setCopied] = useState(false);
-
-  // Load molecules list
-  useEffect(() => {
-    const loadMolecules = async () => {
-      try {
-        setIsLoading(true);
-        const data = await getMolecules();
-        setMolecules(data);
-        if (data.length > 0) {
-          setSelectedMolecule(data[0]);
-        }
-      } catch (err) {
-        setError(
-          err instanceof Error ? err.message : 'Failed to load molecules'
-        );
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    loadMolecules();
-  }, []);
-
-  // Load SDF when molecule changes
-  useEffect(() => {
-    if (!selectedMolecule) {
-      setSdfData(null);
-      return;
-    }
-
-    const loadSdf = async () => {
-      try {
-        setIsSdfLoading(true);
-        setSdfError(null);
-        const data = await getMoleculeSDF(selectedMolecule.id);
-        setSdfData(data);
-      } catch (err) {
-        setSdfError(
-          err instanceof Error ? err.message : 'Failed to load 3D structure'
-        );
-        setSdfData(null);
-      } finally {
-        setIsSdfLoading(false);
-      }
-    };
-    loadSdf();
-  }, [selectedMolecule]);
-
-  const filteredMolecules = useMemo(() => {
-    if (!searchQuery.trim()) return molecules;
-    const query = searchQuery.toLowerCase();
-    return molecules.filter(
-      (m) =>
-        m.name.toLowerCase().includes(query) ||
-        m.smiles.toLowerCase().includes(query)
-    );
-  }, [molecules, searchQuery]);
-
-  const handleCopySmiles = useCallback(async () => {
-    if (!selectedMolecule) return;
-    try {
-      await navigator.clipboard.writeText(selectedMolecule.smiles);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      const textArea = document.createElement('textarea');
-      textArea.value = selectedMolecule.smiles;
-      document.body.appendChild(textArea);
-      textArea.select();
-      document.execCommand('copy');
-      document.body.removeChild(textArea);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  }, [selectedMolecule]);
-
-  if (error) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <Card className="max-w-md">
-          <CardHeader>
-            <CardTitle className="text-destructive">Error</CardTitle>
-            <CardDescription>{error}</CardDescription>
-          </CardHeader>
-        </Card>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex h-full gap-6 p-6">
-      {/* Left Panel - Molecule List */}
-      <Card className="w-80 shrink-0">
-        <CardHeader className="pb-3">
-          <CardTitle className="text-lg">Molecules</CardTitle>
-          <CardDescription>Select a molecule for 3D view</CardDescription>
-        </CardHeader>
-        <CardContent className="pb-3">
-          <div className="relative">
-            <Search className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
-            <Input
-              placeholder="Search molecules..."
-              className="pl-8"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-            />
-          </div>
-        </CardContent>
-        <Separator />
-        <ScrollArea className="h-[calc(100vh-280px)]">
-          <div className="p-2">
-            {isLoading ? (
-              <div className="space-y-2">
-                {[1, 2, 3].map((i) => (
-                  <Skeleton key={i} className="h-16 w-full" />
-                ))}
-              </div>
-            ) : filteredMolecules.length === 0 ? (
-              <p className="p-4 text-center text-sm text-muted-foreground">
-                No molecules found
-              </p>
-            ) : (
-              <div className="space-y-1">
-                {filteredMolecules.map((molecule) => (
-                  <button
-                    key={molecule.id}
-                    onClick={() => setSelectedMolecule(molecule)}
-                    className={`w-full rounded-lg p-3 text-left transition-colors hover:bg-accent ${
-                      selectedMolecule?.id === molecule.id
-                        ? 'bg-accent'
-                        : 'bg-transparent'
-                    }`}
-                  >
-                    <div className="font-medium">{molecule.name}</div>
-                    <div className="truncate text-xs text-muted-foreground">
-                      {molecule.smiles}
-                    </div>
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-        </ScrollArea>
-      </Card>
-
-      {/* Right Panel - 3D Visualization */}
-      <div className="flex flex-1 flex-col gap-6">
-        {selectedMolecule ? (
-          <>
-            {/* Molecule Info Card */}
-            <Card>
-              <CardHeader className="pb-3">
-                <div className="flex items-start justify-between">
-                  <div>
-                    <CardTitle>{selectedMolecule.name}</CardTitle>
-                    <CardDescription>
-                      {selectedMolecule.description}
-                    </CardDescription>
-                  </div>
-                  <Badge variant="outline">
-                    PubChem: {selectedMolecule.pubchemCid}
-                  </Badge>
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="flex items-center gap-2">
-                  <code className="flex-1 truncate rounded bg-muted px-2 py-1 text-sm">
-                    {selectedMolecule.smiles}
-                  </code>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={handleCopySmiles}
-                    className="shrink-0"
-                  >
-                    {copied ? (
-                      <>
-                        <Check className="mr-1 size-4" />
-                        Copied
-                      </>
-                    ) : (
-                      <>
-                        <Copy className="mr-1 size-4" />
-                        Copy SMILES
-                      </>
-                    )}
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* 3D Structure Card */}
-            <Card className="flex-1">
-              <CardHeader>
-                <CardTitle className="text-lg">3D Structure</CardTitle>
-                <CardDescription>
-                  Rotate: click + drag • Zoom: scroll • Pan: right-click + drag
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="flex items-center justify-center">
-                {isSdfLoading ? (
-                  <Skeleton className="size-[400px]" />
-                ) : sdfError ? (
-                  <Alert variant="destructive" className="max-w-md">
-                    <AlertTitle>Failed to load 3D structure</AlertTitle>
-                    <AlertDescription>{sdfError}</AlertDescription>
-                  </Alert>
-                ) : sdfData ? (
-                  <Molecule3DViewer sdfData={sdfData} width={500} height={400} />
-                ) : (
-                  <p className="text-muted-foreground">
-                    No 3D structure available
-                  </p>
-                )}
-              </CardContent>
-            </Card>
-          </>
-        ) : (
-          <div className="flex flex-1 items-center justify-center">
-            <p className="text-muted-foreground">
-              Select a molecule to view its 3D structure
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

ui/app/dashboard/page.tsx

@@ -1,170 +0,0 @@
-"use client"
-
-import { ArrowUp, Database, FileText, Search, Sparkles, Zap } from "lucide-react"
-import Link from "next/link"
-
-import { SectionHeader } from "@/components/page-header"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
-import { Separator } from "@/components/ui/separator"
-
-export default function DashboardHome() {
-  return (
-    <div className="space-y-8 animate-in fade-in duration-500">
-      {/* Hero Section */}
-      <div className="flex flex-col lg:flex-row gap-6">
-        <div className="flex-1 rounded-2xl bg-gradient-to-br from-primary/10 via-background to-background p-8 border">
-          <Badge variant="secondary" className="mb-4">New • BioFlow 2.0</Badge>
-          <h1 className="text-4xl font-bold tracking-tight mb-4">AI-Powered Drug Discovery</h1>
-          <p className="text-lg text-muted-foreground mb-6 max-w-xl">
-            Run discovery pipelines, predict binding, and surface evidence in one streamlined workspace.
-          </p>
-          <div className="flex gap-2 mb-6">
-            <Badge variant="outline" className="bg-primary/5 border-primary/20 text-primary">Model-aware search</Badge>
-            <Badge variant="outline" className="bg-green-500/10 border-green-500/20 text-green-700 dark:text-green-400">Evidence-linked</Badge>
-            <Badge variant="outline" className="bg-amber-500/10 border-amber-500/20 text-amber-700 dark:text-amber-400">Fast iteration</Badge>
-          </div>
-          
-          <div className="flex gap-4">
-            <Link href="/dashboard/discovery">
-                <Button size="lg" className="font-semibold">
-                    Start Discovery
-                </Button>
-            </Link>
-            <Link href="/dashboard/explorer">
-                <Button size="lg" variant="outline">
-                    Explore Data
-                </Button>
-            </Link>
-          </div>
-        </div>
-
-        <div className="lg:w-[350px]">
-          <Card className="h-full">
-            <CardContent className="p-6 flex flex-col justify-between h-full">
-                <div>
-                   <div className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">Today</div>
-                   <div className="text-4xl font-bold mb-2">156 Discoveries</div>
-                   <div className="text-sm text-green-600 font-medium flex items-center gap-1">
-                     <ArrowUp className="h-4 w-4" />
-                     +12% vs last week
-                   </div>
-                </div>
-                
-                <Separator className="my-4" />
-
-                <div className="space-y-2">
-                    <div className="flex items-center justify-between text-sm">
-                        <span className="flex items-center gap-2">
-                             <span className="h-2 w-2 rounded-full bg-primary"></span>
-                             Discovery
-                        </span>
-                        <span className="font-mono font-medium">64</span>
-                    </div>
-                    <div className="flex items-center justify-between text-sm">
-                         <span className="flex items-center gap-2">
-                             <span className="h-2 w-2 rounded-full bg-green-500"></span>
-                             Prediction
-                        </span>
-                        <span className="font-mono font-medium">42</span>
-                    </div>
-                    <div className="flex items-center justify-between text-sm">
-                         <span className="flex items-center gap-2">
-                             <span className="h-2 w-2 rounded-full bg-amber-500"></span>
-                             Evidence
-                        </span>
-                        <span className="font-mono font-medium">50</span>
-                    </div>
-                </div>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-
-      {/* Metrics Row */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        {[
-            { label: "Molecules", value: "12.5M", icon: "🧪", change: "+2.3%", color: "text-blue-500" },
-            { label: "Proteins", value: "847K", icon: "🧬", change: "+1.8%", color: "text-cyan-500" },
-            { label: "Papers", value: "1.2M", icon: "📚", change: "+5.2%", color: "text-emerald-500" },
-            { label: "Discoveries", value: "156", icon: "✨", change: "+12%", color: "text-amber-500" }
-        ].map((metric, i) => (
-            <Card key={i}>
-                <CardContent className="p-6">
-                    <div className="flex justify-between items-start mb-2">
-                        <div className="text-sm font-medium text-muted-foreground">{metric.label}</div>
-                        <div className="text-lg">{metric.icon}</div>
-                    </div>
-                    <div className="text-2xl font-bold mb-1">{metric.value}</div>
-                    <div className="text-xs font-medium flex items-center gap-1 text-green-500">
-                        <ArrowUp className="h-3 w-3" />
-                        {metric.change}
-                    </div>
-                </CardContent>
-            </Card>
-        ))}
-      </div>
-
-      {/* Quick Actions */}
-      <div className="pt-4">
-        <SectionHeader title="Quick Actions" icon={<Zap className="h-5 w-5 text-amber-500" />} />
-        
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-            <Link href="/dashboard/discovery" className="block">
-                <Card className="hover:bg-accent/50 transition-colors cursor-pointer h-full">
-                    <CardContent className="p-6 flex flex-col items-center text-center gap-3">
-                        <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
-                            <Search className="h-5 w-5" />
-                        </div>
-                        <div>
-                            <div className="font-semibold">New Discovery</div>
-                            <div className="text-sm text-muted-foreground">Start a pipeline</div>
-                        </div>
-                    </CardContent>
-                </Card>
-            </Link>
-             <Link href="/dashboard/explorer" className="block">
-                <Card className="hover:bg-accent/50 transition-colors cursor-pointer h-full">
-                    <CardContent className="p-6 flex flex-col items-center text-center gap-3">
-                        <div className="h-10 w-10 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500">
-                            <Database className="h-5 w-5" />
-                        </div>
-                        <div>
-                            <div className="font-semibold">Browse Data</div>
-                            <div className="text-sm text-muted-foreground">Explore datasets</div>
-                        </div>
-                    </CardContent>
-                </Card>
-            </Link>
-             <Link href="/dashboard/data" className="block">
-                <Card className="hover:bg-accent/50 transition-colors cursor-pointer h-full">
-                    <CardContent className="p-6 flex flex-col items-center text-center gap-3">
-                        <div className="h-10 w-10 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-500">
-                            <FileText className="h-5 w-5" />
-                        </div>
-                        <div>
-                            <div className="font-semibold">Training</div>
-                            <div className="text-sm text-muted-foreground">Train new models</div>
-                        </div>
-                    </CardContent>
-                </Card>
-            </Link>
-             <Link href="/dashboard/settings" className="block">
-                <Card className="hover:bg-accent/50 transition-colors cursor-pointer h-full">
-                    <CardContent className="p-6 flex flex-col items-center text-center gap-3">
-                        <div className="h-10 w-10 rounded-full bg-slate-500/10 flex items-center justify-center text-slate-500">
-                            <Sparkles className="h-5 w-5" />
-                        </div>
-                        <div>
-                            <div className="font-semibold">View Insights</div>
-                            <div className="text-sm text-muted-foreground">Check predictions</div>
-                        </div>
-                    </CardContent>
-                </Card>
-            </Link>
-        </div>
-      </div>
-    </div>
-  )
-}

ui/app/dashboard/proteins-3d/_components/ProteinViewer.tsx

@@ -1,243 +0,0 @@
-'use client';
-
-import { AlertCircle, RotateCcw } from 'lucide-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Skeleton } from '@/components/ui/skeleton';
-import { getProteinPdbUrl } from '@/lib/visualization-api';
-import type { ProteinRepresentation } from '@/lib/visualization-types';
-
-interface ProteinViewerProps {
-  pdbId: string;
-  width?: number;
-  height?: number;
-  className?: string;
-  initialRepresentation?: ProteinRepresentation;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type $3Dmol = any;
-
-export function ProteinViewer({
-  pdbId,
-  width = 500,
-  height = 500,
-  className,
-  initialRepresentation = 'cartoon',
-}: ProteinViewerProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const viewerRef = useRef<any>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [representation, setRepresentation] =
-    useState<ProteinRepresentation>(initialRepresentation);
-  const [$3Dmol, set$3Dmol] = useState<$3Dmol | null>(null);
-  const [pdbData, setPdbData] = useState<string | null>(null);
-
-  // Load 3Dmol.js dynamically
-  useEffect(() => {
-    const load3Dmol = async () => {
-      try {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const module = await import('3dmol') as any;
-        set$3Dmol(module);
-      } catch (err) {
-        console.error('Failed to load 3Dmol:', err);
-        setError('Failed to load 3D visualization library');
-        setIsLoading(false);
-      }
-    };
-    load3Dmol();
-  }, []);
-
-  // Fetch PDB data when pdbId changes
-  useEffect(() => {
-    if (!pdbId) return;
-
-    const fetchPdb = async () => {
-      try {
-        setIsLoading(true);
-        setError(null);
-        const pdbUrl = getProteinPdbUrl(pdbId);
-        const response = await fetch(pdbUrl);
-
-        if (!response.ok) {
-          throw new Error(`Failed to fetch PDB: ${response.statusText}`);
-        }
-
-        const data = await response.text();
-        setPdbData(data);
-      } catch (err) {
-        console.error('Failed to fetch PDB:', err);
-        setError(
-          err instanceof Error ? err.message : 'Failed to load PDB data'
-        );
-        setIsLoading(false);
-      }
-    };
-    fetchPdb();
-  }, [pdbId]);
-
-  const getStyleForRepresentation = useCallback(
-    (rep: ProteinRepresentation) => {
-      switch (rep) {
-        case 'cartoon':
-          return { cartoon: { color: 'spectrum' } };
-        case 'ball-and-stick':
-          return { stick: { radius: 0.15 }, sphere: { scale: 0.25 } };
-        case 'surface':
-          return { surface: {} }; // Surface handled via addSurface
-        case 'ribbon':
-          return { cartoon: { style: 'trace', color: 'spectrum' } };
-        default:
-          return { cartoon: { color: 'spectrum' } };
-      }
-    },
-    []
-  );
-
-  const initViewer = useCallback(() => {
-    if (!containerRef.current || !$3Dmol || !pdbData) return;
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      // Clean up existing viewer
-      if (viewerRef.current) {
-        viewerRef.current.removeAllModels();
-      }
-
-      // Create viewer
-      const viewer = $3Dmol.createViewer(containerRef.current, {
-        backgroundColor: '#0a0a0a',
-      });
-      viewerRef.current = viewer;
-
-      // Add protein structure
-      viewer.addModel(pdbData, 'pdb');
-
-      if (representation === 'surface') {
-        viewer.setStyle({}, { cartoon: { color: 'spectrum' } }); // Base style
-        viewer.addSurface($3Dmol.SurfaceType.VDW, {
-          opacity: 0.85,
-          color: 'spectrum',
-        }, {}, {});
-      } else {
-        viewer.setStyle({}, getStyleForRepresentation(representation));
-      }
-
-      viewer.zoomTo();
-      viewer.render();
-
-      setIsLoading(false);
-    } catch (err) {
-      console.error('3D viewer error:', err);
-      setError(
-        err instanceof Error
-          ? `Visualization error: ${err.message}`
-          : 'Failed to render 3D structure'
-      );
-      setIsLoading(false);
-    }
-  }, [$3Dmol, pdbData, representation, getStyleForRepresentation]);
-
-  useEffect(() => {
-    initViewer();
-  }, [$3Dmol, pdbData, initViewer]);
-
-  // Update representation
-  useEffect(() => {
-    if (!viewerRef.current || !pdbData || !$3Dmol) return;
-    try {
-      viewerRef.current.removeAllSurfaces();
-
-      if (representation === 'surface') {
-        viewerRef.current.setStyle({}, { cartoon: { color: 'spectrum', opacity: 0.5 } });
-        viewerRef.current.addSurface($3Dmol.SurfaceType.VDW, {
-          opacity: 0.85,
-          color: 'spectrum',
-        }, {}, {});
-      } else {
-        viewerRef.current.setStyle({}, getStyleForRepresentation(representation));
-      }
-
-      viewerRef.current.render();
-    } catch (err) {
-      console.error('Style update error:', err);
-    }
-  }, [representation, getStyleForRepresentation, pdbData, $3Dmol]);
-
-  const handleResetCamera = useCallback(() => {
-    if (!viewerRef.current) return;
-    viewerRef.current.zoomTo();
-    viewerRef.current.render();
-  }, []);
-
-  if (error) {
-    return (
-      <Card className={`border-destructive bg-destructive/10 ${className}`}>
-        <CardContent className="flex items-center gap-3 p-4">
-          <AlertCircle className="size-5 text-destructive" />
-          <div className="flex flex-col">
-            <span className="text-sm font-medium text-destructive">
-              Protein Visualization Error
-            </span>
-            <span className="text-xs text-muted-foreground">{error}</span>
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <div className={`flex flex-col gap-3 ${className}`}>
-      <div className="flex items-center gap-2">
-        <Select
-          value={representation}
-          onValueChange={(value) =>
-            setRepresentation(value as ProteinRepresentation)
-          }
-        >
-          <SelectTrigger className="w-40">
-            <SelectValue placeholder="Representation" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="cartoon">Cartoon</SelectItem>
-            <SelectItem value="ball-and-stick">Ball & Stick</SelectItem>
-            <SelectItem value="surface">Surface</SelectItem>
-            <SelectItem value="ribbon">Ribbon</SelectItem>
-          </SelectContent>
-        </Select>
-        <Button variant="outline" size="sm" onClick={handleResetCamera}>
-          <RotateCcw className="mr-1 size-4" />
-          Reset
-        </Button>
-      </div>
-
-      <div className="relative">
-        {isLoading && (
-          <Skeleton
-            className="absolute inset-0 z-10"
-            style={{ width, height }}
-          />
-        )}
-        <div
-          ref={containerRef}
-          style={{ width, height }}
-          className={`rounded-lg border bg-background ${isLoading ? 'opacity-0' : 'opacity-100'} transition-opacity duration-200`}
-        />
-      </div>
-    </div>
-  );
-}

ui/app/dashboard/proteins-3d/page.tsx

@@ -1,228 +0,0 @@
-'use client';
-
-import { ExternalLink, Search } from 'lucide-react';
-import dynamic from 'next/dynamic';
-import { useEffect, useMemo, useState } from 'react';
-
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Separator } from '@/components/ui/separator';
-import { Skeleton } from '@/components/ui/skeleton';
-import { getProteins, getProteinPdbUrl } from '@/lib/visualization-api';
-import type { Protein } from '@/lib/visualization-types';
-
-// Dynamic import of the protein viewer to prevent SSR issues
-const ProteinViewer = dynamic(
-  () =>
-    import('./_components/ProteinViewer').then((mod) => mod.ProteinViewer),
-  {
-    ssr: false,
-    loading: () => <Skeleton className="size-[500px]" />,
-  }
-);
-
-export default function Proteins3DPage() {
-  const [proteins, setProteins] = useState<Protein[]>([]);
-  const [selectedProtein, setSelectedProtein] = useState<Protein | null>(null);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Load proteins list
-  useEffect(() => {
-    const loadProteins = async () => {
-      try {
-        setIsLoading(true);
-        const data = await getProteins();
-        setProteins(data);
-        if (data.length > 0) {
-          setSelectedProtein(data[0]);
-        }
-      } catch (err) {
-        setError(
-          err instanceof Error ? err.message : 'Failed to load proteins'
-        );
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    loadProteins();
-  }, []);
-
-  const filteredProteins = useMemo(() => {
-    if (!searchQuery.trim()) return proteins;
-    const query = searchQuery.toLowerCase();
-    return proteins.filter(
-      (p) =>
-        p.name.toLowerCase().includes(query) ||
-        p.pdbId.toLowerCase().includes(query) ||
-        p.description?.toLowerCase().includes(query)
-    );
-  }, [proteins, searchQuery]);
-
-  if (error) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <Card className="max-w-md">
-          <CardHeader>
-            <CardTitle className="text-destructive">Error</CardTitle>
-            <CardDescription>{error}</CardDescription>
-          </CardHeader>
-        </Card>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex h-full gap-6 p-6">
-      {/* Left Panel - Protein List */}
-      <Card className="w-80 shrink-0">
-        <CardHeader className="pb-3">
-          <CardTitle className="text-lg">Proteins</CardTitle>
-          <CardDescription>Select a protein to visualize</CardDescription>
-        </CardHeader>
-        <CardContent className="pb-3">
-          <div className="relative">
-            <Search className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
-            <Input
-              placeholder="Search proteins..."
-              className="pl-8"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-            />
-          </div>
-        </CardContent>
-        <Separator />
-        <ScrollArea className="h-[calc(100vh-280px)]">
-          <div className="p-2">
-            {isLoading ? (
-              <div className="space-y-2">
-                {[1, 2, 3].map((i) => (
-                  <Skeleton key={i} className="h-16 w-full" />
-                ))}
-              </div>
-            ) : filteredProteins.length === 0 ? (
-              <p className="p-4 text-center text-sm text-muted-foreground">
-                No proteins found
-              </p>
-            ) : (
-              <div className="space-y-1">
-                {filteredProteins.map((protein) => (
-                  <button
-                    key={protein.id}
-                    onClick={() => setSelectedProtein(protein)}
-                    className={`w-full rounded-lg p-3 text-left transition-colors hover:bg-accent ${
-                      selectedProtein?.id === protein.id
-                        ? 'bg-accent'
-                        : 'bg-transparent'
-                    }`}
-                  >
-                    <div className="flex items-center gap-2">
-                      <span className="font-medium">{protein.name}</span>
-                      <Badge variant="secondary" className="text-xs">
-                        {protein.pdbId}
-                      </Badge>
-                    </div>
-                    {protein.description && (
-                      <div className="mt-1 truncate text-xs text-muted-foreground">
-                        {protein.description}
-                      </div>
-                    )}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-        </ScrollArea>
-      </Card>
-
-      {/* Right Panel - 3D Visualization */}
-      <div className="flex flex-1 flex-col gap-6">
-        {selectedProtein ? (
-          <>
-            {/* Protein Info Card */}
-            <Card>
-              <CardHeader className="pb-3">
-                <div className="flex items-start justify-between">
-                  <div>
-                    <CardTitle>{selectedProtein.name}</CardTitle>
-                    <CardDescription>
-                      {selectedProtein.description}
-                    </CardDescription>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Badge variant="outline">PDB: {selectedProtein.pdbId}</Badge>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      asChild
-                    >
-                      <a
-                        href={getProteinPdbUrl(selectedProtein.id)}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        <ExternalLink className="mr-1 size-4" />
-                        Open PDB
-                      </a>
-                    </Button>
-                  </div>
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="flex gap-4 text-sm text-muted-foreground">
-                  <a
-                    href={`https://www.rcsb.org/structure/${selectedProtein.pdbId}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex items-center gap-1 hover:text-foreground"
-                  >
-                    <ExternalLink className="size-3" />
-                    View on RCSB PDB
-                  </a>
-                  <a
-                    href={`https://www.uniprot.org/uniprotkb?query=${selectedProtein.name}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex items-center gap-1 hover:text-foreground"
-                  >
-                    <ExternalLink className="size-3" />
-                    Search UniProt
-                  </a>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* 3D Structure Card */}
-            <Card className="flex-1">
-              <CardHeader>
-                <CardTitle className="text-lg">3D Structure</CardTitle>
-                <CardDescription>
-                  Rotate: click + drag • Zoom: scroll • Pan: right-click + drag
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="flex items-center justify-center">
-                <ProteinViewer
-                  key={selectedProtein.pdbId}
-                  pdbId={selectedProtein.pdbId}
-                  width={600}
-                  height={500}
-                />
-              </CardContent>
-            </Card>
-          </>
-        ) : (
-          <div className="flex flex-1 items-center justify-center">
-            <p className="text-muted-foreground">
-              Select a protein to view its 3D structure
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

ui/app/dashboard/settings/page.tsx

@@ -1,193 +0,0 @@
-"use client"
-
-import { Brain, Save,Settings } from "lucide-react"
-
-import { PageHeader, SectionHeader } from "@/components/page-header"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription,CardHeader, CardTitle } from "@/components/ui/card"
-import { Label } from "@/components/ui/label"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Slider } from "@/components/ui/slider"
-import { Switch } from "@/components/ui/switch"
-import { Tabs, TabsContent,TabsList, TabsTrigger } from "@/components/ui/tabs"
-
-export default function SettingsPage() {
-  return (
-    <div className="space-y-8 animate-in fade-in duration-500">
-         <PageHeader
-            title="Settings"
-            subtitle="Configure models, databases, and preferences"
-            icon={<Settings className="h-8 w-8 text-primary" />} 
-        />
-
-        <Tabs defaultValue="models" className="w-full">
-            <TabsList className="w-full justify-start overflow-x-auto">
-                <TabsTrigger value="models">Models</TabsTrigger>
-                <TabsTrigger value="database">Database</TabsTrigger>
-                <TabsTrigger value="api">API Keys</TabsTrigger>
-                <TabsTrigger value="appearance">Appearance</TabsTrigger>
-                <TabsTrigger value="system">System</TabsTrigger>
-            </TabsList>
-            <TabsContent value="models" className="space-y-6 mt-6">
-                 <SectionHeader title="Model Configuration" icon={<Brain className="h-5 w-5 text-primary" />} />
-                 
-                 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <Card>
-                        <CardHeader>
-                            <CardTitle>Embedding Models</CardTitle>
-                            <CardDescription>Configure models used for molecular and protein embeddings</CardDescription>
-                        </CardHeader>
-                        <CardContent className="space-y-4">
-                            <div className="space-y-2">
-                                <Label htmlFor="mol-encoder">Molecule Encoder</Label>
-                                <Select defaultValue="MolCLR">
-                                    <SelectTrigger id="mol-encoder">
-                                        <SelectValue placeholder="Select molecule encoder" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="MolCLR">MolCLR (Recommended)</SelectItem>
-                                        <SelectItem value="ChemBERTa">ChemBERTa</SelectItem>
-                                        <SelectItem value="GraphMVP">GraphMVP</SelectItem>
-                                        <SelectItem value="MolBERT">MolBERT</SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                            <div className="space-y-2">
-                                <Label htmlFor="prot-encoder">Protein Encoder</Label>
-                                <Select defaultValue="ESM-2">
-                                    <SelectTrigger id="prot-encoder">
-                                        <SelectValue placeholder="Select protein encoder" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="ESM-2">ESM-2 (Recommended)</SelectItem>
-                                        <SelectItem value="ProtTrans">ProtTrans</SelectItem>
-                                        <SelectItem value="UniRep">UniRep</SelectItem>
-                                        <SelectItem value="SeqVec">SeqVec</SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                        </CardContent>
-                    </Card>
-
-                    <Card>
-                        <CardHeader>
-                            <CardTitle>Prediction Heads</CardTitle>
-                            <CardDescription>Configure downstream task predictors</CardDescription>
-                        </CardHeader>
-                         <CardContent className="space-y-4">
-                             <div className="space-y-2">
-                                <Label htmlFor="binding">Binding Predictor</Label>
-                                <Select defaultValue="DrugBAN">
-                                    <SelectTrigger id="binding">
-                                        <SelectValue placeholder="Select predictor" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="DrugBAN">DrugBAN (Recommended)</SelectItem>
-                                        <SelectItem value="DeepDTA">DeepDTA</SelectItem>
-                                        <SelectItem value="GraphDTA">GraphDTA</SelectItem>
-                                        <SelectItem value="Custom">Custom</SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                             <div className="space-y-2">
-                                <Label htmlFor="property">Property Predictor</Label>
-                                <Select defaultValue="ADMET-AI">
-                                    <SelectTrigger id="property">
-                                        <SelectValue placeholder="Select predictor" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="ADMET-AI">ADMET-AI (Recommended)</SelectItem>
-                                        <SelectItem value="ChemProp">ChemProp</SelectItem>
-                                        <SelectItem value="Custom">Custom</SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                        </CardContent>
-                    </Card>
-                 </div>
-
-                 <Card>
-                    <CardHeader>
-                        <CardTitle>LLM Settings</CardTitle>
-                        <CardDescription>Configure language models for evidence retrieval and reasoning</CardDescription>
-                    </CardHeader>
-                    <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div className="space-y-2">
-                            <Label htmlFor="llm-provider">LLM Provider</Label>
-                            <Select defaultValue="OpenAI">
-                                <SelectTrigger id="llm-provider">
-                                    <SelectValue placeholder="Select provider" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectItem value="OpenAI">OpenAI</SelectItem>
-                                    <SelectItem value="Anthropic">Anthropic</SelectItem>
-                                    <SelectItem value="Local">Local (Ollama)</SelectItem>
-                                    <SelectItem value="Azure">Azure OpenAI</SelectItem>
-                                </SelectContent>
-                            </Select>
-                        </div>
-                         <div className="space-y-2">
-                             <Label htmlFor="llm-model">Model</Label>
-                             <Select defaultValue="GPT-4o">
-                                <SelectTrigger id="llm-model">
-                                    <SelectValue placeholder="Select model" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectItem value="GPT-4o">GPT-4o</SelectItem>
-                                    <SelectItem value="GPT-4-turbo">GPT-4-turbo</SelectItem>
-                                    <SelectItem value="Claude 3.5">Claude 3.5 Sonnet</SelectItem>
-                                    <SelectItem value="Llama 3">Llama 3.1 70B</SelectItem>
-                                </SelectContent>
-                            </Select>
-                        </div>
-                        <div className="col-span-1 md:col-span-2 space-y-4">
-                            <div className="space-y-2">
-                                <div className="flex items-center justify-between">
-                                    <Label>Temperature: 0.7</Label>
-                                    <span className="text-xs text-muted-foreground">Creativity vs Precision</span>
-                                </div>
-                                <Slider defaultValue={[0.7]} max={1} step={0.1} />
-                            </div>
-                            <div className="flex items-center space-x-2">
-                                <Switch id="stream" defaultChecked />
-                                <Label htmlFor="stream">Stream Responses</Label>
-                            </div>
-                        </div>
-                    </CardContent>
-                 </Card>
-            </TabsContent>
-            
-            <TabsContent value="appearance">
-                <Card>
-                     <CardContent className="p-12 text-center text-muted-foreground">
-                        Theme settings coming soon.
-                    </CardContent>
-                </Card>
-            </TabsContent>
-            
-             <TabsContent value="database">
-                <Card>
-                     <CardContent className="p-12 text-center text-muted-foreground">
-                        Database connection settings.
-                    </CardContent>
-                </Card>
-            </TabsContent>
-            
-            <TabsContent value="api">
-                <Card>
-                     <CardContent className="p-12 text-center text-muted-foreground">
-                        API Key configuration.
-                    </CardContent>
-                </Card>
-            </TabsContent>
-        </Tabs>
-
-        <div className="fixed bottom-6 right-6">
-            <Button size="lg" className="shadow-2xl">
-                <Save className="mr-2 h-4 w-4" />
-                Save Changes
-            </Button>
-        </div>
-    </div>
-  )
-}

ui/app/dashboard/visualization/page.tsx

@@ -1,581 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Download, ExternalLink, Filter, Loader2, RotateCcw, Search, ZoomIn, ZoomOut } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Slider } from "@/components/ui/slider"
-import { Badge } from "@/components/ui/badge"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-
-// Types
-interface EmbeddingPoint {
-  id: string
-  x: number
-  y: number
-  z: number
-  label: string
-  content: string
-  modality: string
-  source: string
-  score?: number
-  metadata?: Record<string, unknown>
-}
-
-interface SearchResult {
-  id: string
-  content: string
-  score: number
-  modality: string
-  source: string
-  evidence_links?: Array<{
-    source: string
-    identifier: string
-    url: string
-    label: string
-  }>
-  citation?: string
-}
-
-// 3D Canvas Component using CSS transforms (no Three.js dependency)
-function Scatter3DCanvas({
-  points,
-  selectedPoint,
-  onSelectPoint,
-  rotation,
-  zoom,
-}: {
-  points: EmbeddingPoint[]
-  selectedPoint: EmbeddingPoint | null
-  onSelectPoint: (point: EmbeddingPoint | null) => void
-  rotation: { x: number; y: number }
-  zoom: number
-}) {
-  const containerRef = React.useRef<HTMLDivElement>(null)
-
-  // Color by modality
-  const getColor = (modality: string) => {
-    switch (modality) {
-      case "text": return "#3b82f6" // blue
-      case "molecule": return "#22c55e" // green
-      case "protein": return "#f59e0b" // amber
-      default: return "#8b5cf6" // purple
-    }
-  }
-
-  // Project 3D to 2D with rotation
-  const project = (point: EmbeddingPoint) => {
-    const rad = Math.PI / 180
-    const cosX = Math.cos(rotation.x * rad)
-    const sinX = Math.sin(rotation.x * rad)
-    const cosY = Math.cos(rotation.y * rad)
-    const sinY = Math.sin(rotation.y * rad)
-
-    // Rotate around Y axis
-    let x = point.x * cosY - point.z * sinY
-    let z = point.x * sinY + point.z * cosY
-
-    // Rotate around X axis
-    const y = point.y * cosX - z * sinX
-    z = point.y * sinX + z * cosX
-
-    // Simple perspective projection
-    const perspective = 500
-    const scale = perspective / (perspective + z * 50)
-    
-    return {
-      x: 250 + x * 100 * zoom * scale,
-      y: 250 - y * 100 * zoom * scale,
-      scale,
-      z,
-    }
-  }
-
-  // Sort points by z for proper rendering order
-  const sortedPoints = [...points]
-    .map(p => ({ ...p, projected: project(p) }))
-    .sort((a, b) => a.projected.z - b.projected.z)
-
-  return (
-    <div
-      ref={containerRef}
-      className="relative w-full h-[500px] bg-gradient-to-br from-slate-900 to-slate-800 rounded-lg overflow-hidden"
-      style={{ perspective: "500px" }}
-    >
-      {/* Axis lines */}
-      <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-20">
-        <line x1="50" y1="250" x2="450" y2="250" stroke="#fff" strokeWidth="1" />
-        <line x1="250" y1="50" x2="250" y2="450" stroke="#fff" strokeWidth="1" />
-        <text x="460" y="255" fill="#fff" fontSize="12">X</text>
-        <text x="255" y="40" fill="#fff" fontSize="12">Y</text>
-      </svg>
-
-      {/* Points */}
-      {sortedPoints.map((point) => {
-        const { x, y, scale } = point.projected
-        const size = Math.max(6, 12 * scale)
-        const isSelected = selectedPoint?.id === point.id
-        
-        return (
-          <button
-            key={point.id}
-            className="absolute rounded-full transition-all duration-150 cursor-pointer hover:ring-2 hover:ring-white/50"
-            style={{
-              left: x - size / 2,
-              top: y - size / 2,
-              width: size,
-              height: size,
-              backgroundColor: getColor(point.modality),
-              opacity: 0.5 + scale * 0.5,
-              transform: isSelected ? "scale(1.5)" : "scale(1)",
-              boxShadow: isSelected ? `0 0 20px ${getColor(point.modality)}` : "none",
-              zIndex: Math.floor(scale * 100),
-            }}
-            onClick={() => onSelectPoint(isSelected ? null : point)}
-            title={point.label}
-          />
-        )
-      })}
-
-      {/* Legend */}
-      <div className="absolute bottom-4 left-4 flex gap-4 text-xs text-white/70">
-        <div className="flex items-center gap-1">
-          <div className="w-3 h-3 rounded-full bg-blue-500" />
-          <span>Text</span>
-        </div>
-        <div className="flex items-center gap-1">
-          <div className="w-3 h-3 rounded-full bg-green-500" />
-          <span>Molecule</span>
-        </div>
-        <div className="flex items-center gap-1">
-          <div className="w-3 h-3 rounded-full bg-amber-500" />
-          <span>Protein</span>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// Evidence Panel Component
-function EvidencePanel({ result }: { result: SearchResult | null }) {
-  if (!result) {
-    return (
-      <Card className="h-full">
-        <CardHeader>
-          <CardTitle className="text-lg">Evidence Panel</CardTitle>
-          <CardDescription>Select a point to view details</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="text-center text-muted-foreground py-8">
-            Click on a point in the 3D view to see its evidence trail
-          </div>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  return (
-    <Card className="h-full">
-      <CardHeader className="pb-3">
-        <div className="flex items-center justify-between">
-          <CardTitle className="text-lg">Evidence</CardTitle>
-          <Badge variant="outline">{result.modality}</Badge>
-        </div>
-        <CardDescription>Score: {result.score.toFixed(3)}</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ScrollArea className="h-[400px] pr-4">
-          {/* Content */}
-          <div className="space-y-4">
-            <div>
-              <Label className="text-xs text-muted-foreground">Content</Label>
-              <p className="text-sm mt-1 bg-muted/50 p-3 rounded-lg">
-                {result.content.slice(0, 300)}
-                {result.content.length > 300 && "..."}
-              </p>
-            </div>
-
-            {/* Source */}
-            <div>
-              <Label className="text-xs text-muted-foreground">Source</Label>
-              <Badge className="mt-1">{result.source}</Badge>
-            </div>
-
-            {/* Citation */}
-            {result.citation && (
-              <div>
-                <Label className="text-xs text-muted-foreground">Citation</Label>
-                <p className="text-sm mt-1 italic">{result.citation}</p>
-              </div>
-            )}
-
-            {/* Evidence Links */}
-            {result.evidence_links && result.evidence_links.length > 0 && (
-              <div>
-                <Label className="text-xs text-muted-foreground">External Links</Label>
-                <div className="mt-2 space-y-2">
-                  {result.evidence_links.map((link, idx) => (
-                    <a
-                      key={idx}
-                      href={link.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center gap-2 text-sm text-primary hover:underline"
-                    >
-                      <ExternalLink className="h-3 w-3" />
-                      {link.label}
-                    </a>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        </ScrollArea>
-      </CardContent>
-    </Card>
-  )
-}
-
-// Export functions
-function exportToCSV(results: SearchResult[]) {
-  const headers = ["id", "content", "score", "modality", "source", "citation"]
-  const rows = results.map(r => [
-    r.id,
-    `"${r.content.replace(/"/g, '""')}"`,
-    r.score,
-    r.modality,
-    r.source,
-    r.citation || "",
-  ])
-  
-  const csv = [headers.join(","), ...rows.map(r => r.join(","))].join("\n")
-  const blob = new Blob([csv], { type: "text/csv" })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement("a")
-  a.href = url
-  a.download = `bioflow_results_${Date.now()}.csv`
-  a.click()
-  URL.revokeObjectURL(url)
-}
-
-function exportToJSON(results: SearchResult[]) {
-  const json = JSON.stringify(results, null, 2)
-  const blob = new Blob([json], { type: "application/json" })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement("a")
-  a.href = url
-  a.download = `bioflow_results_${Date.now()}.json`
-  a.click()
-  URL.revokeObjectURL(url)
-}
-
-function exportToFASTA(results: SearchResult[]) {
-  const fasta = results
-    .filter(r => r.modality === "protein")
-    .map(r => `>${r.id}\n${r.content}`)
-    .join("\n\n")
-  
-  if (!fasta) {
-    alert("No protein sequences to export")
-    return
-  }
-  
-  const blob = new Blob([fasta], { type: "text/plain" })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement("a")
-  a.href = url
-  a.download = `bioflow_proteins_${Date.now()}.fasta`
-  a.click()
-  URL.revokeObjectURL(url)
-}
-
-// Main Visualization Page
-export default function VisualizationPage() {
-  const [isLoading, setIsLoading] = React.useState(false)
-  const [query, setQuery] = React.useState("")
-  const [points, setPoints] = React.useState<EmbeddingPoint[]>([])
-  const [results, setResults] = React.useState<SearchResult[]>([])
-  const [selectedPoint, setSelectedPoint] = React.useState<EmbeddingPoint | null>(null)
-  const [selectedResult, setSelectedResult] = React.useState<SearchResult | null>(null)
-  const [rotation, setRotation] = React.useState({ x: 15, y: 30 })
-  const [zoom, setZoom] = React.useState(1)
-  const [modalityFilter, setModalityFilter] = React.useState("all")
-  const [isDragging, setIsDragging] = React.useState(false)
-  const [lastMousePos, setLastMousePos] = React.useState({ x: 0, y: 0 })
-
-  // Handle mouse drag for rotation
-  const handleMouseDown = (e: React.MouseEvent) => {
-    setIsDragging(true)
-    setLastMousePos({ x: e.clientX, y: e.clientY })
-  }
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (!isDragging) return
-    const dx = e.clientX - lastMousePos.x
-    const dy = e.clientY - lastMousePos.y
-    setRotation(prev => ({
-      x: prev.x + dy * 0.5,
-      y: prev.y + dx * 0.5,
-    }))
-    setLastMousePos({ x: e.clientX, y: e.clientY })
-  }
-
-  const handleMouseUp = () => {
-    setIsDragging(false)
-  }
-
-  // Search and load embeddings
-  const handleSearch = async () => {
-    if (!query.trim()) return
-    
-    setIsLoading(true)
-    try {
-      const response = await fetch("/api/search", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          query,
-          top_k: 50,
-          use_mmr: true,
-        }),
-      })
-      
-      const data = await response.json()
-      
-      if (data.results) {
-        // Convert to points with random 3D positions (in real use, these would come from UMAP/t-SNE)
-        const newPoints: EmbeddingPoint[] = data.results.map((r: SearchResult, idx: number) => {
-          // Create pseudo-3D positions based on score and index
-          const angle = (idx / data.results.length) * Math.PI * 2
-          const radius = 1 - r.score
-          return {
-            id: r.id || `point-${idx}`,
-            x: Math.cos(angle) * radius + (Math.random() - 0.5) * 0.3,
-            y: r.score * 2 - 1 + (Math.random() - 0.5) * 0.2,
-            z: Math.sin(angle) * radius + (Math.random() - 0.5) * 0.3,
-            label: r.content.slice(0, 50) + "...",
-            content: r.content,
-            modality: r.modality,
-            source: r.source,
-            score: r.score,
-          }
-        })
-        
-        setPoints(newPoints)
-        setResults(data.results)
-      }
-    } catch (err) {
-      console.error("Search failed:", err)
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  // Filter points by modality
-  const filteredPoints = modalityFilter === "all" 
-    ? points 
-    : points.filter(p => p.modality === modalityFilter)
-
-  // Handle point selection
-  const handleSelectPoint = (point: EmbeddingPoint | null) => {
-    setSelectedPoint(point)
-    if (point) {
-      const result = results.find(r => r.id === point.id || r.content === point.content)
-      setSelectedResult(result || null)
-    } else {
-      setSelectedResult(null)
-    }
-  }
-
-  return (
-    <div className="container mx-auto p-6 space-y-6">
-      {/* Header */}
-      <div className="flex flex-col space-y-2">
-        <h1 className="text-3xl font-bold tracking-tight">3D Embedding Explorer</h1>
-        <p className="text-muted-foreground">
-          Visualize and explore multimodal embeddings in 3D space. Search, filter, and examine evidence trails.
-        </p>
-      </div>
-
-      {/* Search Bar */}
-      <Card>
-        <CardContent className="pt-6">
-          <div className="flex gap-4">
-            <div className="flex-1">
-              <Input
-                placeholder="Search for molecules, proteins, or literature..."
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                onKeyDown={(e) => e.key === "Enter" && handleSearch()}
-              />
-            </div>
-            <Button onClick={handleSearch} disabled={isLoading}>
-              {isLoading ? (
-                <Loader2 className="h-4 w-4 animate-spin mr-2" />
-              ) : (
-                <Search className="h-4 w-4 mr-2" />
-              )}
-              Search
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Main Content */}
-      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
-        {/* Controls */}
-        <Card className="lg:col-span-1">
-          <CardHeader>
-            <CardTitle className="text-lg">Controls</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            {/* Modality Filter */}
-            <div className="space-y-2">
-              <Label>Filter by Modality</Label>
-              <Select value={modalityFilter} onValueChange={setModalityFilter}>
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">All</SelectItem>
-                  <SelectItem value="text">Text</SelectItem>
-                  <SelectItem value="molecule">Molecule</SelectItem>
-                  <SelectItem value="protein">Protein</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* Zoom */}
-            <div className="space-y-2">
-              <Label>Zoom: {zoom.toFixed(1)}x</Label>
-              <div className="flex items-center gap-2">
-                <ZoomOut className="h-4 w-4 text-muted-foreground" />
-                <Slider
-                  value={[zoom]}
-                  onValueChange={([v]) => setZoom(v)}
-                  min={0.5}
-                  max={3}
-                  step={0.1}
-                  className="flex-1"
-                />
-                <ZoomIn className="h-4 w-4 text-muted-foreground" />
-              </div>
-            </div>
-
-            {/* Rotation controls */}
-            <div className="space-y-2">
-              <Label>Rotation X: {rotation.x.toFixed(0)}°</Label>
-              <Slider
-                value={[rotation.x]}
-                onValueChange={([v]) => setRotation(prev => ({ ...prev, x: v }))}
-                min={-180}
-                max={180}
-                step={1}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label>Rotation Y: {rotation.y.toFixed(0)}°</Label>
-              <Slider
-                value={[rotation.y]}
-                onValueChange={([v]) => setRotation(prev => ({ ...prev, y: v }))}
-                min={-180}
-                max={180}
-                step={1}
-              />
-            </div>
-
-            {/* Reset */}
-            <Button
-              variant="outline"
-              className="w-full"
-              onClick={() => {
-                setRotation({ x: 15, y: 30 })
-                setZoom(1)
-              }}
-            >
-              <RotateCcw className="h-4 w-4 mr-2" />
-              Reset View
-            </Button>
-
-            {/* Export */}
-            <div className="space-y-2">
-              <Label>Export Results</Label>
-              <div className="flex gap-2">
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => exportToCSV(results)}
-                  disabled={results.length === 0}
-                >
-                  CSV
-                </Button>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => exportToJSON(results)}
-                  disabled={results.length === 0}
-                >
-                  JSON
-                </Button>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => exportToFASTA(results)}
-                  disabled={results.length === 0}
-                >
-                  FASTA
-                </Button>
-              </div>
-            </div>
-
-            {/* Stats */}
-            <div className="pt-4 border-t">
-              <div className="text-sm text-muted-foreground space-y-1">
-                <p>Points: {filteredPoints.length}</p>
-                <p>Results: {results.length}</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* 3D View */}
-        <div
-          className="lg:col-span-2"
-          onMouseDown={handleMouseDown}
-          onMouseMove={handleMouseMove}
-          onMouseUp={handleMouseUp}
-          onMouseLeave={handleMouseUp}
-        >
-          <Card>
-            <CardHeader className="pb-2">
-              <CardTitle className="text-lg">Embedding Space</CardTitle>
-              <CardDescription>
-                Drag to rotate • Click points for details
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="p-4">
-              <Scatter3DCanvas
-                points={filteredPoints}
-                selectedPoint={selectedPoint}
-                onSelectPoint={handleSelectPoint}
-                rotation={rotation}
-                zoom={zoom}
-              />
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Evidence Panel */}
-        <div className="lg:col-span-1">
-          <EvidencePanel result={selectedResult} />
-        </div>
-      </div>
-    </div>
-  )
-}

ui/app/dashboard/workflow/page.tsx

@@ -1,762 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ArrowRight,
-  Check,
-  ChevronDown,
-  ChevronRight,
-  Download,
-  Loader2,
-  Play,
-  Plus,
-  Settings,
-  Sparkles,
-  Trash2,
-  Upload,
-  X,
-} from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Textarea } from "@/components/ui/textarea"
-import { Badge } from "@/components/ui/badge"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Slider } from "@/components/ui/slider"
-import { Switch } from "@/components/ui/switch"
-import { Progress } from "@/components/ui/progress"
-
-// Types
-interface WorkflowStep {
-  id: string
-  type: "generate" | "validate" | "rank"
-  name: string
-  config: Record<string, unknown>
-  status: "pending" | "running" | "completed" | "error"
-  result?: unknown
-  error?: string
-}
-
-interface WorkflowResult {
-  candidates: Array<{
-    smiles: string
-    name: string
-    validation: {
-      is_valid: boolean
-      checks: Record<string, boolean>
-      properties: Record<string, number>
-    }
-    score: number
-  }>
-  steps_completed: number
-  total_time_ms: number
-}
-
-// Step Configuration Components
-function GenerateStepConfig({
-  config,
-  onChange,
-}: {
-  config: Record<string, unknown>
-  onChange: (config: Record<string, unknown>) => void
-}) {
-  return (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <Label>Mode</Label>
-        <Select
-          value={(config.mode as string) || "text"}
-          onValueChange={(v) => onChange({ ...config, mode: v })}
-        >
-          <SelectTrigger>
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="text">Text-to-Molecule</SelectItem>
-            <SelectItem value="mutate">Mutation-Based</SelectItem>
-            <SelectItem value="scaffold">Scaffold-Based</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
-      <div className="space-y-2">
-        <Label>Prompt / SMILES</Label>
-        <Textarea
-          placeholder={
-            config.mode === "text"
-              ? "Describe the molecule you want to generate..."
-              : config.mode === "mutate"
-              ? "Enter a SMILES string to mutate..."
-              : "Enter a scaffold SMILES..."
-          }
-          value={(config.prompt as string) || ""}
-          onChange={(e) => onChange({ ...config, prompt: e.target.value })}
-          className="h-24"
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label>Number to Generate: {config.num_candidates || 5}</Label>
-        <Slider
-          value={[Number(config.num_candidates) || 5]}
-          onValueChange={([v]) => onChange({ ...config, num_candidates: v })}
-          min={1}
-          max={20}
-          step={1}
-        />
-      </div>
-    </div>
-  )
-}
-
-function ValidateStepConfig({
-  config,
-  onChange,
-}: {
-  config: Record<string, unknown>
-  onChange: (config: Record<string, unknown>) => void
-}) {
-  const checks = (config.checks as string[]) || ["lipinski", "admet", "qed", "alerts"]
-
-  const toggleCheck = (check: string) => {
-    const newChecks = checks.includes(check)
-      ? checks.filter((c) => c !== check)
-      : [...checks, check]
-    onChange({ ...config, checks: newChecks })
-  }
-
-  return (
-    <div className="space-y-4">
-      <Label>Validation Checks</Label>
-      <div className="grid grid-cols-2 gap-2">
-        {[
-          { id: "lipinski", label: "Lipinski Rule of 5" },
-          { id: "admet", label: "ADMET Properties" },
-          { id: "qed", label: "QED Score" },
-          { id: "alerts", label: "Structural Alerts" },
-        ].map((check) => (
-          <div
-            key={check.id}
-            className={`flex items-center gap-2 p-2 rounded-lg border cursor-pointer transition-colors ${
-              checks.includes(check.id)
-                ? "border-primary bg-primary/10"
-                : "border-border hover:border-primary/50"
-            }`}
-            onClick={() => toggleCheck(check.id)}
-          >
-            <div
-              className={`w-4 h-4 rounded border flex items-center justify-center ${
-                checks.includes(check.id) ? "bg-primary border-primary" : "border-muted-foreground"
-              }`}
-            >
-              {checks.includes(check.id) && <Check className="h-3 w-3 text-primary-foreground" />}
-            </div>
-            <span className="text-sm">{check.label}</span>
-          </div>
-        ))}
-      </div>
-
-      <div className="flex items-center justify-between">
-        <Label>Strict Mode</Label>
-        <Switch
-          checked={Boolean(config.strict)}
-          onCheckedChange={(v) => onChange({ ...config, strict: v })}
-        />
-      </div>
-    </div>
-  )
-}
-
-function RankStepConfig({
-  config,
-  onChange,
-}: {
-  config: Record<string, unknown>
-  onChange: (config: Record<string, unknown>) => void
-}) {
-  const weights = (config.weights as Record<string, number>) || {
-    qed: 0.3,
-    validity: 0.3,
-    mw: 0.2,
-    logp: 0.2,
-  }
-
-  const updateWeight = (key: string, value: number) => {
-    onChange({ ...config, weights: { ...weights, [key]: value } })
-  }
-
-  return (
-    <div className="space-y-4">
-      <Label>Ranking Weights</Label>
-      
-      {Object.entries({
-        qed: "QED Score",
-        validity: "Validity",
-        mw: "Molecular Weight",
-        logp: "LogP",
-      }).map(([key, label]) => (
-        <div key={key} className="space-y-1">
-          <div className="flex justify-between text-sm">
-            <span>{label}</span>
-            <span className="text-muted-foreground">{(weights[key] || 0).toFixed(2)}</span>
-          </div>
-          <Slider
-            value={[weights[key] || 0]}
-            onValueChange={([v]) => updateWeight(key, v)}
-            min={0}
-            max={1}
-            step={0.05}
-          />
-        </div>
-      ))}
-
-      <div className="space-y-2">
-        <Label>Top K: {config.top_k || 5}</Label>
-        <Slider
-          value={[Number(config.top_k) || 5]}
-          onValueChange={([v]) => onChange({ ...config, top_k: v })}
-          min={1}
-          max={20}
-          step={1}
-        />
-      </div>
-    </div>
-  )
-}
-
-// Step Card Component
-function StepCard({
-  step,
-  index,
-  onUpdate,
-  onRemove,
-  isLast,
-}: {
-  step: WorkflowStep
-  index: number
-  onUpdate: (step: WorkflowStep) => void
-  onRemove: () => void
-  isLast: boolean
-}) {
-  const [isExpanded, setIsExpanded] = React.useState(true)
-
-  const getStepIcon = () => {
-    switch (step.type) {
-      case "generate":
-        return <Sparkles className="h-4 w-4" />
-      case "validate":
-        return <Check className="h-4 w-4" />
-      case "rank":
-        return <Settings className="h-4 w-4" />
-    }
-  }
-
-  const getStatusBadge = () => {
-    switch (step.status) {
-      case "pending":
-        return <Badge variant="outline">Pending</Badge>
-      case "running":
-        return <Badge className="bg-blue-500">Running</Badge>
-      case "completed":
-        return <Badge className="bg-green-500">Completed</Badge>
-      case "error":
-        return <Badge variant="destructive">Error</Badge>
-    }
-  }
-
-  return (
-    <div className="relative">
-      <Card className={step.status === "running" ? "border-blue-500 shadow-lg" : ""}>
-        <CardHeader className="py-3">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary">
-                {index + 1}
-              </div>
-              <div className="flex items-center gap-2">
-                {getStepIcon()}
-                <span className="font-medium">{step.name}</span>
-              </div>
-              {getStatusBadge()}
-            </div>
-            <div className="flex items-center gap-2">
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={() => setIsExpanded(!isExpanded)}
-              >
-                {isExpanded ? (
-                  <ChevronDown className="h-4 w-4" />
-                ) : (
-                  <ChevronRight className="h-4 w-4" />
-                )}
-              </Button>
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={onRemove}
-                className="text-destructive hover:text-destructive"
-              >
-                <Trash2 className="h-4 w-4" />
-              </Button>
-            </div>
-          </div>
-        </CardHeader>
-
-        {isExpanded && (
-          <CardContent className="pt-0">
-            {step.type === "generate" && (
-              <GenerateStepConfig
-                config={step.config}
-                onChange={(config) => onUpdate({ ...step, config })}
-              />
-            )}
-            {step.type === "validate" && (
-              <ValidateStepConfig
-                config={step.config}
-                onChange={(config) => onUpdate({ ...step, config })}
-              />
-            )}
-            {step.type === "rank" && (
-              <RankStepConfig
-                config={step.config}
-                onChange={(config) => onUpdate({ ...step, config })}
-              />
-            )}
-
-            {step.error && (
-              <div className="mt-4 p-3 bg-destructive/10 text-destructive rounded-lg text-sm">
-                {step.error}
-              </div>
-            )}
-          </CardContent>
-        )}
-      </Card>
-
-      {/* Arrow connector */}
-      {!isLast && (
-        <div className="flex justify-center py-2">
-          <ArrowRight className="h-6 w-6 text-muted-foreground" />
-        </div>
-      )}
-    </div>
-  )
-}
-
-// Results Display
-function WorkflowResults({ result }: { result: WorkflowResult | null }) {
-  if (!result) return null
-
-  return (
-    <Card>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <CardTitle className="text-lg">Results</CardTitle>
-          <Badge variant="outline">
-            {result.total_time_ms.toFixed(0)}ms
-          </Badge>
-        </div>
-        <CardDescription>
-          {result.candidates.length} candidates generated • {result.steps_completed} steps completed
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ScrollArea className="h-[300px]">
-          <div className="space-y-3">
-            {result.candidates.map((candidate, idx) => (
-              <div
-                key={idx}
-                className="p-3 rounded-lg border bg-card"
-              >
-                <div className="flex items-start justify-between">
-                  <div className="space-y-1">
-                    <div className="flex items-center gap-2">
-                      <span className="font-medium">{candidate.name}</span>
-                      <Badge variant={candidate.validation.is_valid ? "default" : "destructive"}>
-                        {candidate.validation.is_valid ? "Valid" : "Invalid"}
-                      </Badge>
-                    </div>
-                    <code className="text-xs text-muted-foreground block max-w-md truncate">
-                      {candidate.smiles}
-                    </code>
-                  </div>
-                  <div className="text-right">
-                    <div className="text-lg font-bold">{candidate.score.toFixed(3)}</div>
-                    <span className="text-xs text-muted-foreground">Score</span>
-                  </div>
-                </div>
-
-                {/* Properties */}
-                <div className="mt-2 flex gap-4 text-xs text-muted-foreground">
-                  {Object.entries(candidate.validation.properties).map(([key, value]) => (
-                    <span key={key}>
-                      {key}: {typeof value === "number" ? value.toFixed(2) : value}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            ))}
-          </div>
-        </ScrollArea>
-      </CardContent>
-    </Card>
-  )
-}
-
-// Main Workflow Builder Page
-export default function WorkflowBuilderPage() {
-  const [steps, setSteps] = React.useState<WorkflowStep[]>([
-    {
-      id: "gen-1",
-      type: "generate",
-      name: "Generate Molecules",
-      config: { mode: "text", prompt: "", num_candidates: 5 },
-      status: "pending",
-    },
-    {
-      id: "val-1",
-      type: "validate",
-      name: "Validate Candidates",
-      config: { checks: ["lipinski", "admet", "qed", "alerts"], strict: false },
-      status: "pending",
-    },
-    {
-      id: "rank-1",
-      type: "rank",
-      name: "Rank & Select",
-      config: { weights: { qed: 0.3, validity: 0.3, mw: 0.2, logp: 0.2 }, top_k: 5 },
-      status: "pending",
-    },
-  ])
-  const [isRunning, setIsRunning] = React.useState(false)
-  const [progress, setProgress] = React.useState(0)
-  const [result, setResult] = React.useState<WorkflowResult | null>(null)
-  const [workflowName, setWorkflowName] = React.useState("My Discovery Workflow")
-
-  // Add a new step
-  const addStep = (type: WorkflowStep["type"]) => {
-    const id = `${type}-${Date.now()}`
-    const newStep: WorkflowStep = {
-      id,
-      type,
-      name: type === "generate" ? "Generate Molecules" : type === "validate" ? "Validate Candidates" : "Rank & Select",
-      config: type === "generate"
-        ? { mode: "text", prompt: "", num_candidates: 5 }
-        : type === "validate"
-        ? { checks: ["lipinski", "admet", "qed", "alerts"], strict: false }
-        : { weights: { qed: 0.3, validity: 0.3, mw: 0.2, logp: 0.2 }, top_k: 5 },
-      status: "pending",
-    }
-    setSteps([...steps, newStep])
-  }
-
-  // Update a step
-  const updateStep = (updatedStep: WorkflowStep) => {
-    setSteps(steps.map((s) => (s.id === updatedStep.id ? updatedStep : s)))
-  }
-
-  // Remove a step
-  const removeStep = (id: string) => {
-    setSteps(steps.filter((s) => s.id !== id))
-  }
-
-  // Run the workflow
-  const runWorkflow = async () => {
-    setIsRunning(true)
-    setProgress(0)
-    setResult(null)
-
-    // Reset all step statuses
-    setSteps(steps.map((s) => ({ ...s, status: "pending", result: undefined, error: undefined })))
-
-    try {
-      // Build workflow config from steps
-      const generateStep = steps.find((s) => s.type === "generate")
-      const validateStep = steps.find((s) => s.type === "validate")
-      const rankStep = steps.find((s) => s.type === "rank")
-
-      if (!generateStep) {
-        throw new Error("Workflow must include a generate step")
-      }
-
-      // Mark generate as running
-      setSteps((prev) =>
-        prev.map((s) => (s.id === generateStep.id ? { ...s, status: "running" } : s))
-      )
-      setProgress(10)
-
-      // Call the workflow API
-      const response = await fetch("/api/agents/workflow", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          query: generateStep.config.prompt || "drug-like molecule",
-          num_candidates: generateStep.config.num_candidates || 5,
-          top_k: rankStep?.config.top_k || 5,
-        }),
-      })
-
-      // Simulate step progression
-      setProgress(30)
-      setSteps((prev) =>
-        prev.map((s) =>
-          s.id === generateStep.id
-            ? { ...s, status: "completed" }
-            : s.type === "validate"
-            ? { ...s, status: "running" }
-            : s
-        )
-      )
-
-      await new Promise((r) => setTimeout(r, 500))
-      setProgress(60)
-
-      if (validateStep) {
-        setSteps((prev) =>
-          prev.map((s) =>
-            s.id === validateStep.id
-              ? { ...s, status: "completed" }
-              : s.type === "rank"
-              ? { ...s, status: "running" }
-              : s
-          )
-        )
-      }
-
-      await new Promise((r) => setTimeout(r, 500))
-      setProgress(90)
-
-      const data = await response.json()
-
-      if (!response.ok) {
-        throw new Error(data.detail || "Workflow failed")
-      }
-
-      // Mark all as completed
-      setSteps((prev) => prev.map((s) => ({ ...s, status: "completed" })))
-      setProgress(100)
-
-      // Transform API result to WorkflowResult
-      // API returns: success, status, steps_completed, total_steps, execution_time_ms, top_candidates, all_outputs, errors
-      const workflowResult: WorkflowResult = {
-        candidates: (data.top_candidates || []).map((c: any) => ({
-          smiles: c.smiles || '',
-          name: c.name || `Candidate ${c.rank || 0}`,
-          validation: c.validation || { is_valid: true, checks: {}, properties: {} },
-          score: c.score || 0,
-        })),
-        steps_completed: data.steps_completed || steps.length,
-        total_time_ms: data.execution_time_ms || 0,
-      }
-
-      setResult(workflowResult)
-    } catch (err) {
-      console.error("Workflow error:", err)
-      setSteps((prev) =>
-        prev.map((s) =>
-          s.status === "running"
-            ? { ...s, status: "error", error: String(err) }
-            : s
-        )
-      )
-    } finally {
-      setIsRunning(false)
-    }
-  }
-
-  // Export workflow config
-  const exportWorkflow = () => {
-    const config = {
-      name: workflowName,
-      steps: steps.map((s) => ({
-        type: s.type,
-        name: s.name,
-        config: s.config,
-      })),
-    }
-    const json = JSON.stringify(config, null, 2)
-    const blob = new Blob([json], { type: "application/json" })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement("a")
-    a.href = url
-    a.download = `${workflowName.replace(/\s+/g, "_").toLowerCase()}.json`
-    a.click()
-    URL.revokeObjectURL(url)
-  }
-
-  // Import workflow config
-  const importWorkflow = () => {
-    const input = document.createElement("input")
-    input.type = "file"
-    input.accept = ".json"
-    input.onchange = async (e) => {
-      const file = (e.target as HTMLInputElement).files?.[0]
-      if (!file) return
-
-      const text = await file.text()
-      try {
-        const config = JSON.parse(text)
-        setWorkflowName(config.name || "Imported Workflow")
-        setSteps(
-          config.steps.map((s: Record<string, unknown>, idx: number) => ({
-            id: `${s.type}-${idx}`,
-            type: s.type,
-            name: s.name,
-            config: s.config,
-            status: "pending",
-          }))
-        )
-      } catch (err) {
-        console.error("Failed to import workflow:", err)
-      }
-    }
-    input.click()
-  }
-
-  return (
-    <div className="container mx-auto p-6 space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="space-y-1">
-          <h1 className="text-3xl font-bold tracking-tight">Workflow Builder</h1>
-          <p className="text-muted-foreground">
-            Design and execute drug discovery pipelines with visual configuration
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" onClick={importWorkflow}>
-            <Upload className="h-4 w-4 mr-2" />
-            Import
-          </Button>
-          <Button variant="outline" onClick={exportWorkflow}>
-            <Download className="h-4 w-4 mr-2" />
-            Export
-          </Button>
-          <Button onClick={runWorkflow} disabled={isRunning || steps.length === 0}>
-            {isRunning ? (
-              <Loader2 className="h-4 w-4 animate-spin mr-2" />
-            ) : (
-              <Play className="h-4 w-4 mr-2" />
-            )}
-            Run Workflow
-          </Button>
-        </div>
-      </div>
-
-      {/* Workflow Name */}
-      <Card>
-        <CardContent className="pt-6">
-          <div className="flex items-center gap-4">
-            <Label className="whitespace-nowrap">Workflow Name:</Label>
-            <Input
-              value={workflowName}
-              onChange={(e) => setWorkflowName(e.target.value)}
-              className="max-w-md"
-            />
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Progress */}
-      {isRunning && (
-        <Card>
-          <CardContent className="pt-6">
-            <div className="space-y-2">
-              <div className="flex justify-between text-sm">
-                <span>Running workflow...</span>
-                <span>{progress}%</span>
-              </div>
-              <Progress value={progress} />
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Main Content */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Pipeline Editor */}
-        <div className="lg:col-span-2 space-y-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>Pipeline Steps</CardTitle>
-              <CardDescription>
-                Configure each step of your discovery workflow
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              {steps.length === 0 ? (
-                <div className="text-center py-8 text-muted-foreground">
-                  No steps added yet. Click "Add Step" to get started.
-                </div>
-              ) : (
-                steps.map((step, idx) => (
-                  <StepCard
-                    key={step.id}
-                    step={step}
-                    index={idx}
-                    onUpdate={updateStep}
-                    onRemove={() => removeStep(step.id)}
-                    isLast={idx === steps.length - 1}
-                  />
-                ))
-              )}
-
-              {/* Add Step Buttons */}
-              <div className="flex gap-2 pt-4 border-t">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => addStep("generate")}
-                >
-                  <Plus className="h-4 w-4 mr-1" />
-                  Add Generate
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => addStep("validate")}
-                >
-                  <Plus className="h-4 w-4 mr-1" />
-                  Add Validate
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => addStep("rank")}
-                >
-                  <Plus className="h-4 w-4 mr-1" />
-                  Add Rank
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Results Panel */}
-        <div className="lg:col-span-1">
-          <WorkflowResults result={result} />
-          
-          {!result && (
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-lg">Results</CardTitle>
-                <CardDescription>
-                  Run the workflow to see results
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="text-center py-8 text-muted-foreground">
-                  Configure your pipeline and click "Run Workflow" to execute
-                </div>
-              </CardContent>
-            </Card>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

ui/components/sidebar.tsx

@@ -59,105 +59,105 @@ import { useIsMobile } from '@/hooks/use-mobile';
 const navMain = [
   {
     title: 'Home',
-    url: '/dashboard',
+    url: '/',
     icon: Home,
     isActive: true,
   },
   {
     title: 'Visualization',
-    url: '/dashboard/molecules-2d',
+    url: '/molecules-2d',
     icon: FlaskConical,
     items: [
       {
         title: 'Molecules 2D',
-        url: '/dashboard/molecules-2d',
+        url: '/molecules-2d',
       },
       {
         title: 'Molecules 3D',
-        url: '/dashboard/molecules-3d',
+        url: '/molecules-3d',
       },
       {
         title: 'Proteins 3D',
-        url: '/dashboard/proteins-3d',
+        url: '/proteins-3d',
       },
     ],
   },
   {
     title: 'Discovery',
-    url: '/dashboard/discovery',
+    url: '/discovery',
     icon: Microscope,
     items: [
       {
         title: 'Drug Discovery',
-        url: '/dashboard/discovery',
+        url: '/discovery',
       },
       {
         title: 'Molecule Search',
-        url: '/dashboard/discovery#search',
+        url: '/discovery#search',
       },
     ],
   },
   {
     title: 'Explorer',
-    url: '/dashboard/explorer',
+    url: '/explorer',
     icon: Dna,
     items: [
       {
         title: 'Embeddings',
-        url: '/dashboard/explorer',
+        url: '/explorer',
       },
       {
         title: '3D Visualization',
-        url: '/dashboard/visualization',
+        url: '/visualization',
       },
       {
         title: 'Predictions',
-        url: '/dashboard/explorer#predictions',
+        url: '/explorer#predictions',
       },
     ],
   },
   {
     title: 'Workflows',
-    url: '/dashboard/workflow',
+    url: '/workflow',
     icon: Sparkles,
     items: [
       {
         title: 'Builder',
-        url: '/dashboard/workflow',
+        url: '/workflow',
       },
       {
         title: 'Templates',
-        url: '/dashboard/workflow#templates',
+        url: '/workflow#templates',
       },
     ],
   },
   {
     title: 'Data',
-    url: '/dashboard/data',
+    url: '/data',
     icon: BarChart2,
     items: [
       {
         title: 'Datasets',
-        url: '/dashboard/data',
+        url: '/data',
       },
       {
         title: 'Analytics',
-        url: '/dashboard/data#analytics',
+        url: '/data#analytics',
       },
     ],
   },
   {
     title: 'Settings',
-    url: '/dashboard/settings',
+    url: '/settings',
     icon: Settings,
     items: [
       {
         title: 'General',
-        url: '/dashboard/settings',
+        url: '/settings',
       },
       {
         title: 'Models',
-        url: '/dashboard/settings#models',
+        url: '/settings#models',
       },
     ],
   },
@@ -180,7 +180,7 @@ export function AppSidebar() {
         <SidebarMenu>
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
-              <Link href="/dashboard">
+              <Link href="/">
                 <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                   <Dna className="size-4" />
                 </div>
@@ -192,11 +192,6 @@ export function AppSidebar() {
             </SidebarMenuButton>
           </SidebarMenuItem>
         </SidebarMenu>
-        {/* Theme Toggle */}
-        <div className="group-data-[collapsible=icon]:hidden px-2">
-          <ThemeToggle />
-        </div>
-        {/* App Header */}
       </SidebarHeader>
 
       <SidebarContent>
@@ -258,7 +253,10 @@ export function AppSidebar() {
 
         {/* Status Section */}
         <SidebarGroup className="group-data-[collapsible=icon]:hidden mt-auto">
-          <SidebarGroupLabel>System Status</SidebarGroupLabel>
+          <SidebarGroupLabel className="flex items-center justify-between">
+            <span>System Status</span>
+            <ThemeToggle />
+          </SidebarGroupLabel>
           <div className="px-3 py-2">
             <div className="rounded-lg border bg-muted/50 p-3">
               <div className="flex items-center gap-2 mb-2">