feat: enhance visualization with mock data fallback and update readme

README.md

@@ -31,6 +31,7 @@ Researchers must manually navigate incompatible formats, creating bottlenecks an
 |---------|-------------|
 | **Visual Pipeline Builder** | Drag-and-drop node editor for constructing discovery workflows |
 | **DeepPurpose Integration** | Drug-Target Interaction prediction with Morgan + CNN encoding |
+| **Molecule & Protein Visualization** | Interactive 2D SMILES and 3D PDB structure viewing (powered by 3Dmol.js and SmilesDrawer) |
 | **Qdrant Vector Search** | High-dimensional similarity search across 23,531+ compounds |
 | **3D Embedding Explorer** | Real PCA projections of drug-target chemical space |
 | **Validator Agents** | Automated toxicity and novelty checking |

bioflow/api/deeppurpose_api.py

@@ -18,7 +18,7 @@ sys.path.insert(0, ROOT_DIR)
 
 logger = logging.getLogger(__name__)
 
-router = APIRouter(prefix="/api", tags=["deeppurpose"])
+router = APIRouter(prefix="/api/dp", tags=["deeppurpose"])
 
 # Global state for DeepPurpose model
 _dp_model = None

bioflow/api/server.py

@@ -379,7 +379,7 @@ def get_enhanced_search_service():
 
 
 @app.post("/api/search")
-async def enhanced_search(request: EnhancedSearchRequest):
+async def enhanced_search(request: dict = None):
     """
     Enhanced semantic search with MMR diversification and evidence linking.
     
@@ -388,20 +388,59 @@ async def enhanced_search(request: EnhancedSearchRequest):
     - Evidence links to source databases (PubMed, UniProt, ChEMBL)
     - Citations and source tracking
     - Filtered search by modality, source, etc.
+    
+    Accepts both old format (type, limit) and new format (modality, top_k).
     """
     try:
         if not qdrant_service:
             raise HTTPException(status_code=503, detail="Qdrant service not available")
         
+        # Handle both old and new request formats
+        query = request.get("query", "")
+        modality = request.get("modality") or request.get("type", "text")
+        top_k = request.get("top_k") or request.get("limit", 20)
+        collection = request.get("collection")
+        use_mmr = request.get("use_mmr", True)
+        lambda_param = request.get("lambda_param", 0.7)
+        filters = request.get("filters")
+        
+        # Map old type names to new modality names
+        type_to_modality = {
+            "drug": "molecule",
+            "target": "protein",
+            "text": "text",
+        }
+        modality = type_to_modality.get(modality, modality)
+        
+        # Check if any collections exist first
+        try:
+            existing_collections = qdrant_service.list_collections()
+            if not existing_collections:
+                # No data ingested yet - return empty results
+                return {
+                    "results": [],
+                    "query": query,
+                    "modality": modality,
+                    "total_found": 0,
+                    "returned": 0,
+                    "diversity_score": None,
+                    "filters_applied": {},
+                    "search_time_ms": 0,
+                    "message": "No data ingested yet. Please ingest data first."
+                }
+        except Exception as e:
+            logger.warning(f"Failed to list collections: {e}")
+            # Try to proceed anyway
+        
         search_service = get_enhanced_search_service()
         response = search_service.search(
-            query=request.query,
-            modality=request.modality,
-            collection=request.collection,
-            top_k=request.top_k,
-            use_mmr=request.use_mmr,
-            lambda_param=request.lambda_param,
-            filters=request.filters,
+            query=query,
+            modality=modality,
+            collection=collection,
+            top_k=int(top_k),
+            use_mmr=use_mmr,
+            lambda_param=lambda_param,
+            filters=filters,
         )
         
         return response.to_dict()
@@ -648,6 +687,117 @@ async def list_collections():
     }
 
 
+@app.get("/api/stats")
+async def get_stats():
+    """Get system statistics for the data page."""
+    total_vectors = 0
+    collections_info = []
+    
+    if qdrant_service:
+        try:
+            collections = qdrant_service.list_collections()
+            for coll in collections:
+                try:
+                    stats = qdrant_service.get_collection_stats(coll)
+                    total_vectors += stats.get("points_count", 0)
+                    collections_info.append(stats)
+                except Exception as e:
+                    logger.warning(f"Failed to get stats for {coll}: {e}")
+        except Exception as e:
+            logger.warning(f"Failed to list collections: {e}")
+    
+    return {
+        "total_vectors": total_vectors,
+        "collections": collections_info,
+        "model_status": "loaded" if model_service else "not_loaded",
+        "qdrant_status": "connected" if qdrant_service else "disconnected",
+    }
+
+
+@app.get("/api/points")
+async def get_points(limit: int = 500, view: str = "combined"):
+    """Get points for visualization."""
+    import numpy as np
+    
+    if not qdrant_service:
+        # Return mock data if qdrant not available
+        return _get_mock_points(limit)
+    
+    points = []
+    try:
+        # Get from molecules collection
+        mol_results = qdrant_service.search("", modality="text", collection="molecules", limit=min(limit // 2, 250))
+        for i, r in enumerate(mol_results):
+            np.random.seed(hash(r.content) % 2**32)
+            points.append({
+                "id": r.id,
+                "x": float(2 + np.random.randn() * 0.8),
+                "y": float(3 + np.random.randn() * 0.8),
+                "cluster": 0,
+                "label": r.metadata.get("name", r.content[:20] if r.content else f"mol-{i}"),
+                "modality": "molecule",
+            })
+        
+        # Get from proteins collection
+        prot_results = qdrant_service.search("", modality="text", collection="proteins", limit=min(limit // 2, 250))
+        for i, r in enumerate(prot_results):
+            np.random.seed(hash(r.content) % 2**32)
+            points.append({
+                "id": r.id,
+                "x": float(-2 + np.random.randn() * 0.8),
+                "y": float(-1 + np.random.randn() * 0.8),
+                "cluster": 1,
+                "label": r.metadata.get("name", r.content[:20] if r.content else f"prot-{i}"),
+                "modality": "protein",
+            })
+    except Exception as e:
+        logger.warning(f"Failed to get points from Qdrant: {e}")
+        return _get_mock_points(limit)
+    
+    return {
+        "points": points,
+        "total": len(points),
+        "view": view,
+    }
+
+
+def _get_mock_points(limit: int):
+    """Generate mock points for visualization when Qdrant unavailable."""
+    import numpy as np
+    points = []
+    n_molecules = min(limit // 2, 50)
+    n_proteins = min(limit // 2, 50)
+    
+    # Mock molecules
+    for i in range(n_molecules):
+        np.random.seed(i)
+        points.append({
+            "id": f"mol-{i}",
+            "x": float(2 + np.random.randn() * 0.8),
+            "y": float(3 + np.random.randn() * 0.8),
+            "cluster": 0,
+            "label": f"Molecule-{i}",
+            "modality": "molecule",
+        })
+    
+    # Mock proteins
+    for i in range(n_proteins):
+        np.random.seed(i + 1000)
+        points.append({
+            "id": f"prot-{i}",
+            "x": float(-2 + np.random.randn() * 0.8),
+            "y": float(-1 + np.random.randn() * 0.8),
+            "cluster": 1,
+            "label": f"Protein-{i}",
+            "modality": "protein",
+        })
+    
+    return {
+        "points": points,
+        "total": len(points),
+        "view": "mock",
+    }
+
 # ============================================================================
 # Agent Pipeline Endpoints (Phase 3)
 # ============================================================================

ui/app/api/agents/workflow/route.ts

@@ -0,0 +1,77 @@
+import { NextRequest, NextResponse } from "next/server"
+import { API_CONFIG } from "@/config/api.config"
+
+// Mock workflow results for when backend is unavailable
+function generateMockWorkflowResult(query: string, numCandidates: number) {
+  const candidates = []
+  for (let i = 0; i < numCandidates; i++) {
+    candidates.push({
+      rank: i + 1,
+      smiles: ["CCO", "CC(=O)O", "c1ccccc1", "CC(C)CC", "CCCCCC"][i % 5],
+      name: `Candidate-${i + 1}`,
+      score: Math.random() * 0.4 + 0.6, // 0.6-1.0
+      validation: {
+        is_valid: Math.random() > 0.2,
+        checks: {
+          lipinski_ro5: Math.random() > 0.3,
+          pains_filter: Math.random() > 0.2,
+          synthetic_accessibility: Math.random() > 0.4,
+        },
+        properties: {
+          mw: 150 + Math.random() * 300,
+          logp: Math.random() * 5,
+          hbd: Math.floor(Math.random() * 5),
+          hba: Math.floor(Math.random() * 10),
+        },
+      },
+    })
+  }
+
+  return {
+    success: true,
+    status: "completed",
+    steps_completed: 3,
+    total_steps: 3,
+    execution_time_ms: Math.floor(Math.random() * 2000) + 500,
+    top_candidates: candidates,
+    all_outputs: {
+      generate: { molecules: candidates.map((c) => c.smiles) },
+      validate: { valid_count: candidates.filter((c) => c.validation.is_valid).length },
+      rank: { ranked_by: "composite_score" },
+    },
+    errors: [],
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { query, num_candidates = 5, top_k = 5 } = body
+
+    // Try to call the backend workflow API
+    try {
+      const response = await fetch(`${API_CONFIG.baseUrl}/api/agents/workflow`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ query, num_candidates, top_k }),
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        return NextResponse.json(data)
+      }
+    } catch (backendError) {
+      console.log("Backend workflow API unavailable, using mock data")
+    }
+
+    // Return mock data if backend is unavailable
+    const mockResult = generateMockWorkflowResult(query, num_candidates)
+    return NextResponse.json(mockResult)
+  } catch (error) {
+    console.error("Workflow API error:", error)
+    return NextResponse.json(
+      { error: "Failed to run workflow", detail: String(error) },
+      { status: 500 }
+    )
+  }
+}

ui/app/api/molecules/route.ts

@@ -18,7 +18,14 @@ export async function GET(request: Request) {
     }
     
     const data = await response.json();
-    return NextResponse.json(data.molecules || data);
+    const result = data.molecules || data;
+    
+    // If backend returns empty, use mock data
+    if (!result || result.length === 0) {
+      return NextResponse.json(molecules);
+    }
+    
+    return NextResponse.json(result);
   } catch (error) {
     console.warn("Molecules API error, using mock data:", error);
     // Return mock data as fallback

ui/app/api/proteins/route.ts

@@ -18,7 +18,14 @@ export async function GET(request: Request) {
     }
     
     const data = await response.json();
-    return NextResponse.json(data.proteins || data);
+    const result = data.proteins || data;
+    
+    // If backend returns empty, use mock data
+    if (!result || result.length === 0) {
+      return NextResponse.json(proteins);
+    }
+    
+    return NextResponse.json(result);
   } catch (error) {
     console.warn("Proteins API error, using mock data:", error);
     // Return mock data as fallback

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

@@ -0,0 +1,118 @@
+"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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,267 @@
+"use client"
+
+import { ArrowRight,CheckCircle2, Circle, Loader2, Microscope, Search, AlertCircle } 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"
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+
+interface SearchResult {
+  id: string;
+  score: number;
+  smiles: string;
+  target_seq: string;
+  label: number;
+  affinity_class: string;
+}
+
+export default function DiscoveryPage() {
+  const [query, setQuery] = React.useState("")
+  const [searchType, setSearchType] = React.useState("Similarity")
+  const [isSearching, setIsSearching] = React.useState(false)
+  const [step, setStep] = React.useState(0)
+  const [results, setResults] = React.useState<SearchResult[]>([])
+  const [error, setError] = React.useState<string | null>(null)
+
+  // Map UI search type to API type
+  const getApiType = (uiType: string, query: string): string => {
+    // If it looks like SMILES (contains chemistry chars), use drug encoding
+    const looksLikeSmiles = /^[A-Za-z0-9@+\-\[\]\(\)\\\/=#$.]+$/.test(query.trim())
+    // If it looks like protein sequence (all caps amino acids)
+    const looksLikeProtein = /^[ACDEFGHIKLMNPQRSTVWY]+$/i.test(query.trim()) && query.length > 20
+    
+    if (uiType === "Similarity" || uiType === "Binding Affinity") {
+      if (looksLikeSmiles && !looksLikeProtein) return "drug"
+      if (looksLikeProtein) return "target"
+      return "text" // Fallback to text search
+    }
+    return "text"
+  }
+
+  const handleSearch = async () => {
+    if (!query.trim()) return;
+    
+    setIsSearching(true)
+    setStep(1)
+    setError(null)
+    setResults([])
+    
+    try {
+      // Step 1: Input received
+      setStep(1)
+      
+      // Step 2: Determine type and encode
+      await new Promise(r => setTimeout(r, 300))
+      setStep(2)
+      
+      const apiType = getApiType(searchType, query)
+      
+      // Step 3: Actually search Qdrant via our API
+      const response = await fetch(`${API_BASE}/api/search`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          query: query.trim(),
+          type: apiType,
+          limit: 10
+        })
+      });
+      
+      setStep(3)
+      
+      if (!response.ok) {
+        const errData = await response.json().catch(() => ({}));
+        throw new Error(errData.detail || `API error: ${response.status}`);
+      }
+      
+      const data = await response.json();
+      
+      // Step 4: Process results
+      await new Promise(r => setTimeout(r, 200))
+      setStep(4)
+      setResults(data.results || [])
+      
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Search failed');
+      setStep(0)
+    } finally {
+      setIsSearching(false)
+    }
+  }
+
+  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" },
+  ]
+
+  return (
+    <div className="space-y-8 animate-in fade-in duration-500">
+      <PageHeader 
+        title="Drug Discovery" 
+        subtitle="Search for drug candidates using DeepPurpose + Qdrant" 
+        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={
+                          searchType === "Similarity" 
+                            ? "Enter SMILES string (e.g., CC(=O)Nc1ccc(O)cc1 for Acetaminophen)" 
+                            : searchType === "Binding Affinity"
+                            ? "Enter protein sequence (amino acids, e.g., MKKFFD...)"
+                            : "Enter drug name or keyword to search"
+                        }
+                        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 (Drug SMILES)</SelectItem>
+                                <SelectItem value="Binding Affinity">Binding Affinity (Protein)</SelectItem>
+                                <SelectItem value="Properties">Properties (Text Search)</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                     <div className="space-y-2">
+                        <Label>Database</Label>
+                        <Select defaultValue="KIBA">
+                            <SelectTrigger>
+                                <SelectValue placeholder="Select database" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="KIBA">KIBA (23.5K pairs)</SelectItem>
+                                <SelectItem value="DAVIS">DAVIS Kinase</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 ? "Searching Qdrant..." : "Search"}
+                    </Button>
+                </div>
+            </div>
+        </CardContent>
+      </Card>
+
+      {error && (
+        <Card className="border-destructive">
+          <CardContent className="p-4 flex items-center gap-3 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            <div>
+              <div className="font-medium">Search Failed</div>
+              <div className="text-sm">{error}</div>
+              <div className="text-xs mt-1 text-muted-foreground">
+                Make sure the API server is running: python -m uvicorn server.api:app --port 8001
+              </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>
+
+      {step === 4 && results.length > 0 && (
+        <div className="space-y-4 animate-in slide-in-from-bottom-4 duration-500">
+             <SectionHeader title={`Results (${results.length} from Qdrant)`} icon={<CheckCircle2 className="h-5 w-5 text-green-500" />} />
+             
+             <Tabs defaultValue="candidates">
+                <TabsList>
+                    <TabsTrigger value="candidates">Top Candidates</TabsTrigger>
+                    <TabsTrigger value="details">Raw Data</TabsTrigger>
+                </TabsList>
+                <TabsContent value="candidates" className="space-y-4">
+                    {results.map((result, i) => (
+                        <Card key={result.id}>
+                            <CardContent className="p-4 flex items-center justify-between">
+                                <div className="flex-1">
+                                    <div className="font-mono text-sm font-medium">
+                                      {result.smiles?.slice(0, 50)}{result.smiles?.length > 50 ? '...' : ''}
+                                    </div>
+                                    <div className="flex gap-4 text-sm text-muted-foreground mt-1">
+                                        <span>Affinity: {result.affinity_class}</span>
+                                        <span>Label: {result.label?.toFixed(2)}</span>
+                                    </div>
+                                </div>
+                                <div className="text-right">
+                                    <div className="text-sm text-muted-foreground">Similarity</div>
+                                    <div className={`text-xl font-bold ${
+                                        result.score >= 0.9 ? 'text-green-600' : 
+                                        result.score >= 0.7 ? 'text-green-500' : 'text-amber-500'
+                                    }`}>
+                                        {result.score.toFixed(3)}
+                                    </div>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </TabsContent>
+                <TabsContent value="details">
+                    <Card>
+                        <CardContent className="p-4">
+                            <pre className="text-xs overflow-auto max-h-[400px] bg-muted p-4 rounded">
+                              {JSON.stringify(results, null, 2)}
+                            </pre>
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+             </Tabs>
+        </div>
+      )}
+      
+      {step === 4 && results.length === 0 && !error && (
+        <Card>
+          <CardContent className="p-8 text-center text-muted-foreground">
+            No similar compounds found in Qdrant.
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}

ui/app/dashboard/explorer/chart.tsx

@@ -0,0 +1,56 @@
+"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

@@ -0,0 +1,100 @@
+"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="KIBA">KIBA (23.5K)</SelectItem>
+                        <SelectItem value="DAVIS">DAVIS Kinase</SelectItem>
+                        <SelectItem value="BindingDB">BindingDB Kd</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

@@ -0,0 +1,59 @@
+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/molecules-2d/_components/Smiles2DViewer.tsx

@@ -0,0 +1,119 @@
+'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, canvasId]);
+
+  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

@@ -0,0 +1,223 @@
+'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-4 p-4">
+      {/* 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

@@ -0,0 +1,192 @@
+'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 for light mode, dark for dark mode
+      // 3Dmol doesn't support 'transparent', use hex color instead
+      const viewer = $3Dmol.createViewer(containerRef.current, {
+        backgroundColor: 0xffffff,
+      });
+      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

@@ -0,0 +1,264 @@
+'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-4 p-4">
+      {/* 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

@@ -0,0 +1,172 @@
+"use client"
+
+import { ArrowUp, Database, FileText, Search, Sparkles, Zap, Beaker, Dna, BookOpen } from "lucide-react"
+import Link from "next/link"
+
+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 p-8">
+      {/* 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: <Beaker className="h-5 w-5 text-blue-500" />, change: "+2.3%", color: "text-blue-500" },
+          { label: "Proteins", value: "847K", icon: <Dna className="h-5 w-5 text-cyan-500" />, change: "+1.8%", color: "text-cyan-500" },
+          { label: "Papers", value: "1.2M", icon: <BookOpen className="h-5 w-5 text-emerald-500" />, change: "+5.2%", color: "text-emerald-500" },
+          { label: "Discoveries", value: "156", icon: <Sparkles className="h-5 w-5 text-amber-500" />, 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">
+        <div className="flex items-center gap-2 mb-4">
+          <Zap className="h-5 w-5 text-amber-500" />
+          <h2 className="text-xl font-semibold">Quick Actions</h2>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <Link href="/dashboard/molecules-2d" 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">Molecules 2D</div>
+                  <div className="text-sm text-muted-foreground">View 2D structures</div>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+          <Link href="/dashboard/molecules-3d" 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">Molecules 3D</div>
+                  <div className="text-sm text-muted-foreground">View 3D structures</div>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+          <Link href="/dashboard/proteins-3d" 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">Proteins 3D</div>
+                  <div className="text-sm text-muted-foreground">View protein structures</div>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+          <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-slate-500/10 flex items-center justify-center text-slate-500">
+                  <Sparkles className="h-5 w-5" />
+                </div>
+                <div>
+                  <div className="font-semibold">Discovery</div>
+                  <div className="text-sm text-muted-foreground">Run predictions</div>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,243 @@
+'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

@@ -0,0 +1,227 @@
+'use client';
+
+import { ExternalLink, Search } from 'lucide-react';
+import dynamic from 'next/dynamic';
+import { 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 { 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-4 p-4">
+      {/* 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

@@ -0,0 +1,193 @@
+"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

@@ -0,0 +1,581 @@
+"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

@@ -0,0 +1,762 @@
+"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/app/discovery/page.tsx

@@ -11,7 +11,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Tabs, TabsContent,TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Textarea } from "@/components/ui/textarea"
 
-const API_BASE = "http://localhost:8001";
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
 
 interface SearchResult {
   id: string;

ui/app/layout.tsx

@@ -1,43 +1,32 @@
-import type React from "react";
-
-import { Inter, Space_Mono } from "next/font/google";
-import type { Metadata, Viewport } from "next";
-
 import "./globals.css";
-import { ProjectStateProvider } from "@/hooks/use-project-state";
-import { cn } from "@/lib/utils";
 
-import type { WebApplication, WithContext } from "schema-dts";
-import { API_CONFIG } from "@/config/api.config";
-
-import { Toaster } from "@/components/ui/sonner";
+import type { Metadata, Viewport } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 
-const INTER = Inter({
+import {
+  SidebarInset,
+  SidebarProvider,
+} from "@/components/animate-ui/components/radix/sidebar";
+import { AppSidebar } from "@/components/sidebar";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
   subsets: ["latin"],
-  variable: "--font-inter",
-  display: "swap",
 });
 
-const SPACE_MONO = Space_Mono({
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
   subsets: ["latin"],
-  variable: "--font-space-mono",
-  display: "swap",
-  weight: ["400", "700"],
 });
 
 export const viewport: Viewport = {
-  width: "device-width",
-  initialScale: 1,
-  maximumScale: 5,
-  userScalable: true,
-  viewportFit: "cover",
-  interactiveWidget: "resizes-content",
-  colorScheme: "light dark",
   themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "oklch(1 0 0)" },
-    { media: "(prefers-color-scheme: dark)", color: "oklch(0.1 0.02 265)" },
+    { media: "(prefers-color-scheme: light)", color: "white" },
+    { media: "(prefers-color-scheme: dark)", color: "#0C0E14" },
   ],
+  width: "device-width",
+  initialScale: 1,
 };
 
 export const metadata: Metadata = {
@@ -51,54 +40,33 @@ export const metadata: Metadata = {
   creator: "BioFlow",
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  const jsonLd: WithContext<WebApplication> = {
-    "@context": "https://schema.org",
-    "@type": "WebApplication",
-    name: API_CONFIG.name,
-    description: API_CONFIG.description,
-    applicationCategory: "ScienceApplication",
-    operatingSystem: "Web",
-    offers: {
-      "@type": "Offer",
-      price: "0",
-      priceCurrency: "USD",
-    },
-    author: {
-      "@type": "Organization",
-      name: API_CONFIG.author,
-    },
-  };
-
-  const safeJsonLd = JSON.stringify(jsonLd).replace(/</g, "\\u003c");
-
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
   return (
-    <html lang="fr" className="scroll-smooth" suppressHydrationWarning>
-      <head>
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: safeJsonLd }}
-        />
-      </head>
+    <html lang="en" suppressHydrationWarning>
       <body
-        className={cn(
-          INTER.variable,
-          SPACE_MONO.variable,
-          "min-h-screen bg-background font-sans text-foreground antialiased"
-        )}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <ProjectStateProvider>
-          <ThemeProvider
-            attribute="class"
-            defaultTheme="system"
-            enableSystem
-            disableTransitionOnChange
-            storageKey="bisoness-theme"
-          >
-            {children}
-            <Toaster />
-          </ThemeProvider>
-        </ProjectStateProvider>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <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>
+        </ThemeProvider>
       </body>
     </html>
   );

ui/app/page.tsx

@@ -1,5 +1,170 @@
-import { redirect } from "next/navigation"
+"use client"
 
-export default function RootPage() {
-  redirect("/dashboard")
+import { ArrowUp, Database, FileText, Search, Sparkles, Zap, Beaker, Dna, BookOpen } 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 Home() {
+  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: <Beaker className="h-5 w-5 text-blue-500" />, change: "+2.3%" },
+            { label: "Proteins", value: "847K", icon: <Dna className="h-5 w-5 text-cyan-500" />, change: "+1.8%" },
+            { label: "Papers", value: "1.2M", icon: <BookOpen className="h-5 w-5 text-emerald-500" />, change: "+5.2%" },
+            { label: "Discoveries", value: "156", icon: <Sparkles className="h-5 w-5 text-amber-500" />, change: "+12%" }
+        ].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="/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="/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="/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="/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/components/animate-ui/components/radix/sidebar.tsx

@@ -245,7 +245,7 @@ function Sidebar({
       <div
         data-slot="sidebar-gap"
         className={cn(
-          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-400 ease-[cubic-bezier(0.7,-0.15,0.25,1.15)]',
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-300 ease-out',
           'group-data-[collapsible=offcanvas]:w-0',
           'group-data-[side=right]:rotate-180',
           variant === 'floating' || variant === 'inset'
@@ -256,7 +256,7 @@ function Sidebar({
       <div
         data-slot="sidebar-container"
         className={cn(
-          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-400 ease-[cubic-bezier(0.75,0,0.25,1)] md:flex',
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-300 ease-out md:flex',
           side === 'left'
             ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
             : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',

ui/components/sidebar.tsx

@@ -59,105 +59,105 @@ import { useIsMobile } from '@/hooks/use-mobile';
 const navMain = [
   {
     title: 'Home',
-    url: '/',
+    url: '/dashboard',
     icon: Home,
     isActive: true,
   },
   {
     title: 'Visualization',
-    url: '/molecules-2d',
+    url: '/dashboard/molecules-2d',
     icon: FlaskConical,
     items: [
       {
         title: 'Molecules 2D',
-        url: '/molecules-2d',
+        url: '/dashboard/molecules-2d',
       },
       {
         title: 'Molecules 3D',
-        url: '/molecules-3d',
+        url: '/dashboard/molecules-3d',
       },
       {
         title: 'Proteins 3D',
-        url: '/proteins-3d',
+        url: '/dashboard/proteins-3d',
       },
     ],
   },
   {
     title: 'Discovery',
-    url: '/discovery',
+    url: '/dashboard/discovery',
     icon: Microscope,
     items: [
       {
         title: 'Drug Discovery',
-        url: '/discovery',
+        url: '/dashboard/discovery',
       },
       {
         title: 'Molecule Search',
-        url: '/discovery#search',
+        url: '/dashboard/discovery#search',
       },
     ],
   },
   {
     title: 'Explorer',
-    url: '/explorer',
+    url: '/dashboard/explorer',
     icon: Dna,
     items: [
       {
         title: 'Embeddings',
-        url: '/explorer',
+        url: '/dashboard/explorer',
       },
       {
         title: '3D Visualization',
-        url: '/visualization',
+        url: '/dashboard/visualization',
       },
       {
         title: 'Predictions',
-        url: '/explorer#predictions',
+        url: '/dashboard/explorer#predictions',
       },
     ],
   },
   {
     title: 'Workflows',
-    url: '/workflow',
+    url: '/dashboard/workflow',
     icon: Sparkles,
     items: [
       {
         title: 'Builder',
-        url: '/workflow',
+        url: '/dashboard/workflow',
       },
       {
         title: 'Templates',
-        url: '/workflow#templates',
+        url: '/dashboard/workflow#templates',
       },
     ],
   },
   {
     title: 'Data',
-    url: '/data',
+    url: '/dashboard/data',
     icon: BarChart2,
     items: [
       {
         title: 'Datasets',
-        url: '/data',
+        url: '/dashboard/data',
       },
       {
         title: 'Analytics',
-        url: '/data#analytics',
+        url: '/dashboard/data#analytics',
       },
     ],
   },
   {
     title: 'Settings',
-    url: '/settings',
+    url: '/dashboard/settings',
     icon: Settings,
     items: [
       {
         title: 'General',
-        url: '/settings',
+        url: '/dashboard/settings',
       },
       {
         title: 'Models',
-        url: '/settings#models',
+        url: '/dashboard/settings#models',
       },
     ],
   },
@@ -180,7 +180,7 @@ export function AppSidebar() {
         <SidebarMenu>
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
-              <Link href="/">
+              <Link href="/dashboard">
                 <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                   <Dna className="size-4" />
                 </div>

ui/lib/data-service.ts

@@ -1,6 +1,6 @@
 import { DataResponse } from "@/types/data";
 
-const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8001";
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
 
 export async function getData(): Promise<DataResponse> {
   try {