chore: integrate UI snapshot from raed-ui branch

ui/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

ui/.vscode/mcp.json

@@ -0,0 +1,11 @@
+{
+  "servers": {
+    "shadcn": {
+      "command": "npx",
+      "args": [
+        "shadcn@latest",
+        "mcp"
+      ]
+    }
+  }
+}

ui/.vscode/tasks.json

@@ -0,0 +1,44 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"label": "Type Check",
+			"type": "shell",
+			"command": "pnpm",
+			"args": [
+				"run",
+				"type-check"
+			],
+			"problemMatcher": [
+				"$tsc"
+			],
+			"group": "test"
+		},
+		{
+			"label": "Lint",
+			"type": "shell",
+			"command": "pnpm",
+			"args": [
+				"run",
+				"lint"
+			],
+			"problemMatcher": [
+				"$eslint-stylish"
+			],
+			"group": "test"
+		},
+		{
+			"label": "Lint",
+			"type": "shell",
+			"command": "npm",
+			"args": [
+				"run",
+				"lint"
+			],
+			"problemMatcher": [
+				"$eslint-stylish"
+			],
+			"group": "test"
+		}
+	]
+}

ui/README.md

@@ -0,0 +1,64 @@
+# BioFlow UI (Next.js)
+
+This project is a migration of the Streamlit "old_ui" to Next.js 16, Shadcn UI, Framer Motion, and Tailwind CSS v4.
+
+## Getting Started
+
+1. **Install dependencies:**
+
+    ```bash
+    cd ui
+    pnpm install
+    # or
+    npm install
+    ```
+
+2. **Run the development server:**
+
+    ```bash
+    pnpm dev
+    # or
+    npm run dev
+    ```
+
+3. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Structure
+
+- `app/`: App Router pages and layout.
+  - `page.tsx`: Home Dashboard.
+  - `discovery/`: Drug Discovery Pipeline interface.
+  - `explorer/`: Data Explorer with Charts.
+  - `data/`: Data Management.
+  - `settings/`: Configuration.
+  - `api/`: API Route handlers.
+- `components/`: Reusable UI components.
+  - `ui/`: Shadcn-like primitive components (Button, Card, etc.).
+  - `sidebar.tsx`: Main Navigation.
+  - `page-header.tsx`: Standard page headers.
+
+## Tech Stack
+
+- **Framework:** Next.js 16 (App Router)
+- **Styling:** Tailwind CSS v4
+- **UI Library:** Custom components inspired by Shadcn UI
+- **Icons:** Lucide React
+- **Charts:** Recharts
+- **Animations:** Framer Motion (basic animations included, Framer Motion ready)
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

ui/app/api/data/route.ts

@@ -0,0 +1,7 @@
+import { NextResponse } from "next/server";
+import { getData } from "@/lib/data-service";
+
+export async function GET() {
+  const data = await getData();
+  return NextResponse.json(data);
+}

ui/app/api/discovery/route.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request) {
+  const body = await request.json();
+  const { query } = body;
+
+  console.log("Starting discovery for:", query);
+
+  // Here you would typically call your Python backend
+  // e.g., await fetch('http://localhost:8000/api/discovery', { ... })
+
+  // Mock response
+  return NextResponse.json({ 
+    success: true,
+    jobId: "job_" + Date.now(),
+    status: "processing",
+    message: "Pipeline started successfully"
+  });
+}

ui/app/api/explorer/route.ts

@@ -0,0 +1,17 @@
+import { NextResponse } from "next/server";
+import { getExplorerPoints } from "@/lib/explorer-service";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  
+  try {
+    const data = await getExplorerPoints(
+      searchParams.get("dataset") || undefined,
+      searchParams.get("view") || undefined,
+      searchParams.get("colorBy") || undefined
+    );
+    return NextResponse.json(data);
+  } catch (e) {
+    return NextResponse.json({ error: "Invalid parameters" }, { status: 400 });
+  }
+}

ui/app/data/data-view.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Folder, FileText, Database, HardDrive, Upload, CloudUpload, Eye, Download, Trash2 } from "lucide-react"
+import { SectionHeader } from "@/components/page-header"
+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/data/page.tsx

@@ -0,0 +1,27 @@
+import { Suspense } from 'react'
+import { getData } from "@/lib/data-service"
+import { DataView } from "./data-view"
+import { PageHeader } from "@/components/page-header"
+import { Database, Loader2 } from "lucide-react"
+
+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/discovery/page.tsx

@@ -0,0 +1,182 @@
+"use client"
+
+import * as React from "react"
+import { PageHeader, SectionHeader } from "@/components/page-header"
+import { Card, CardContent } from "@/components/ui/card"
+import { Textarea } from "@/components/ui/textarea"
+import { Button } from "@/components/ui/button"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Label } from "@/components/ui/label"
+import { Microscope, Search, CheckCircle2, Circle, Loader2, ArrowRight } from "lucide-react"
+
+export default function DiscoveryPage() {
+  const [query, setQuery] = React.useState("")
+  const [isSearching, setIsSearching] = React.useState(false)
+  const [step, setStep] = React.useState(0)
+
+  const handleSearch = () => {
+    setIsSearching(true)
+    setStep(1)
+    
+    // Simulate pipeline
+    setTimeout(() => setStep(2), 1500)
+    setTimeout(() => setStep(3), 3000)
+    setTimeout(() => {
+        setStep(4)
+        setIsSearching(false)
+    }, 4500)
+  }
+
+  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 with AI-powered analysis" 
+        icon={<Microscope className="h-8 w-8" />}
+      />
+
+      <Card>
+        <div className="p-4 border-b font-semibold">Search Query</div>
+        <CardContent className="p-6">
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+                <div className="md:col-span-3">
+                    <Textarea 
+                        placeholder="Enter a natural language query, SMILES string, or FASTA sequence..."
+                        className="min-h-[120px] font-mono"
+                        value={query}
+                        onChange={(e) => setQuery(e.target.value)}
+                    />
+                </div>
+                <div className="space-y-4">
+                    <div className="space-y-2">
+                        <Label>Search Type</Label>
+                        <Select defaultValue="Similarity">
+                            <SelectTrigger>
+                                <SelectValue placeholder="Select type" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="Similarity">Similarity</SelectItem>
+                                <SelectItem value="Binding Affinity">Binding Affinity</SelectItem>
+                                <SelectItem value="Properties">Properties</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                     <div className="space-y-2">
+                        <Label>Database</Label>
+                        <Select defaultValue="All">
+                            <SelectTrigger>
+                                <SelectValue placeholder="Select database" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="All">All</SelectItem>
+                                <SelectItem value="DrugBank">DrugBank</SelectItem>
+                                <SelectItem value="ChEMBL">ChEMBL</SelectItem>
+                                <SelectItem value="ZINC">ZINC</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    <Button 
+                        className="w-full" 
+                        onClick={handleSearch}
+                        disabled={isSearching || !query}
+                    >
+                        {isSearching ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Search className="mr-2 h-4 w-4" />}
+                        {isSearching ? "Running..." : "Search"}
+                    </Button>
+                </div>
+            </div>
+        </CardContent>
+      </Card>
+
+      <div className="space-y-4">
+         <SectionHeader title="Pipeline Status" icon={<ArrowRight className="h-5 w-5 text-muted-foreground" />} />
+         
+         <div className="relative">
+            <div className="absolute left-0 top-1/2 w-full h-0.5 bg-muted -z-10 transform -translate-y-1/2"></div>
+            <div className="flex justify-between items-center w-full px-4">
+                {steps.map((s, i) => (
+                    <div key={i} className="flex flex-col items-center gap-2 bg-background px-2">
+                        <div className={`h-8 w-8 rounded-full flex items-center justify-center border-2 transition-colors ${
+                            s.status === 'done' ? 'bg-primary border-primary text-primary-foreground' : 
+                            s.status === 'active' ? 'border-primary text-primary animate-pulse' : 'border-muted text-muted-foreground bg-background'
+                        }`}>
+                            {s.status === 'done' ? <CheckCircle2 className="h-5 w-5" /> : <Circle className="h-5 w-5" />}
+                        </div>
+                        <span className={`text-sm font-medium ${s.status === 'pending' ? 'text-muted-foreground' : 'text-foreground'}`}>
+                            {s.name}
+                        </span>
+                    </div>
+                ))}
+            </div>
+         </div>
+      </div>
+
+      {step === 4 && (
+        <div className="space-y-4 animate-in slide-in-from-bottom-4 duration-500">
+             <SectionHeader title="Results" icon={<CheckCircle2 className="h-5 w-5 text-green-500" />} />
+             
+             <Tabs defaultValue="candidates">
+                <TabsList>
+                    <TabsTrigger value="candidates">Top Candidates</TabsTrigger>
+                    <TabsTrigger value="analysis">Property Analysis</TabsTrigger>
+                    <TabsTrigger value="evidence">Evidence</TabsTrigger>
+                </TabsList>
+                <TabsContent value="candidates" className="space-y-4">
+                    {[
+                        { name: "Candidate A", score: 0.95, mw: "342.4", logp: "2.1" },
+                        { name: "Candidate B", score: 0.89, mw: "298.3", logp: "1.8" },
+                        { name: "Candidate C", score: 0.82, mw: "415.5", logp: "3.2" },
+                        { name: "Candidate D", score: 0.76, mw: "267.3", logp: "1.5" },
+                        { name: "Candidate E", score: 0.71, mw: "389.4", logp: "2.8" },
+                    ].map((candidate, i) => (
+                        <Card key={i}>
+                            <CardContent className="p-4 flex items-center justify-between">
+                                <div>
+                                    <div className="font-bold text-lg">{candidate.name}</div>
+                                    <div className="flex gap-4 text-sm text-muted-foreground">
+                                        <span>MW: {candidate.mw}</span>
+                                        <span>LogP: {candidate.logp}</span>
+                                    </div>
+                                </div>
+                                <div className="text-right">
+                                    <div className="text-sm text-muted-foreground">Score</div>
+                                    <div className={`text-xl font-bold ${
+                                        candidate.score >= 0.9 ? 'text-green-600' : 
+                                        candidate.score >= 0.8 ? 'text-green-500' : 'text-amber-500'
+                                    }`}>
+                                        {candidate.score}
+                                    </div>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </TabsContent>
+                <TabsContent value="analysis">
+                    <Card>
+                        <CardContent className="p-12 text-center text-muted-foreground">
+                            Chart visualization would go here (using Recharts).
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+                <TabsContent value="evidence">
+                     <Card>
+                        <CardContent className="p-12 text-center text-muted-foreground">
+                            Evidence graph visualization would go here.
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+             </Tabs>
+        </div>
+      )}
+    </div>
+  )
+}

ui/app/explorer/chart.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { ResponsiveContainer, ScatterChart, Scatter, XAxis, YAxis, ZAxis, Tooltip, Cell } from "recharts"
+import { Card, CardContent } from "@/components/ui/card"
+import { AlertCircle } from "lucide-react"
+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/explorer/components.tsx

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

ui/app/explorer/page.tsx

@@ -0,0 +1,57 @@
+import { Suspense } from "react"
+import { getExplorerPoints } from "@/lib/explorer-service"
+import { ExplorerControls } from "./components"
+import { ExplorerChart } from "./chart"
+import { Loader2 } from "lucide-react"
+
+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/globals.css

@@ -0,0 +1,125 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.145 0.02 260);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0.02 260);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0.02 260);
+  --primary: oklch(0.55 0.2 280);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0.01 260);
+  --secondary-foreground: oklch(0.55 0.2 280);
+  --muted: oklch(0.97 0.01 260);
+  --muted-foreground: oklch(0.556 0.03 260);
+  --accent: oklch(0.97 0.01 260);
+  --accent-foreground: oklch(0.55 0.2 280);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0.01 260);
+  --input: oklch(0.922 0.01 260);
+  --ring: oklch(0.55 0.2 280);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.705 0 0);
+}
+
+.dark {
+  --background: oklch(0.12 0.03 260);
+  --foreground: oklch(0.95 0.01 260);
+  --card: oklch(0.15 0.03 260);
+  --card-foreground: oklch(0.95 0.01 260);
+  --popover: oklch(0.15 0.03 260);
+  --popover-foreground: oklch(0.95 0.01 260);
+  --primary: oklch(0.65 0.2 280);
+  --primary-foreground: oklch(0.12 0.03 260);
+  --secondary: oklch(0.2 0.04 260);
+  --secondary-foreground: oklch(0.95 0.01 260);
+  --muted: oklch(0.2 0.04 260);
+  --muted-foreground: oklch(0.7 0.04 260);
+  --accent: oklch(0.2 0.04 260);
+  --accent-foreground: oklch(0.95 0.01 260);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(0.25 0.04 260);
+  --input: oklch(0.25 0.04 260);
+  --ring: oklch(0.65 0.2 280);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.15 0.03 260);
+  --sidebar-foreground: oklch(0.95 0.01 260);
+  --sidebar-primary: oklch(0.65 0.2 280);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.2 0.04 260);
+  --sidebar-accent-foreground: oklch(0.95 0.01 260);
+  --sidebar-border: oklch(0.25 0.04 260);
+  --sidebar-ring: oklch(0.65 0.2 280);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

ui/app/layout.tsx

@@ -0,0 +1,55 @@
+import type { Metadata, Viewport } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { Sidebar } from "@/components/sidebar";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const viewport: Viewport = {
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "white" },
+    { media: "(prefers-color-scheme: dark)", color: "#0C0E14" },
+  ],
+  width: "device-width",
+  initialScale: 1,
+};
+
+export const metadata: Metadata = {
+  title: {
+    default: "BioFlow",
+    template: "%s | BioFlow",
+  },
+  description: "AI-Powered Drug Discovery Platform for molecular embedding and binding prediction.",
+  keywords: ["Drug Discovery", "AI", "Bioinformatics", "Machine Learning", "Molecular Dynamics"],
+  authors: [{ name: "BioFlow Team" }],
+  creator: "BioFlow",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased flex h-screen overflow-hidden`}
+      >
+        <Sidebar />
+        <main className="flex-1 overflow-y-auto bg-background p-8">
+          <div className="mx-auto max-w-7xl">
+            {children}
+          </div>
+        </main>
+      </body>
+    </html>
+  );
+}

ui/app/loading.tsx

@@ -0,0 +1,12 @@
+import { Loader2 } from "lucide-react";
+
+export default function Loading() {
+  return (
+    <div className="flex h-[50vh] w-full items-center justify-center">
+      <div className="flex flex-col items-center gap-2">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        <p className="text-sm text-muted-foreground animate-pulse">Loading BioFlow...</p>
+      </div>
+    </div>
+  );
+}

ui/app/page.tsx

@@ -0,0 +1,169 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent } from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
+import { SectionHeader } from "@/components/page-header"
+import { ArrowUp, Zap, Search, Database, FileText, Sparkles } from "lucide-react"
+import Link from "next/link"
+
+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="/discovery">
+                <Button size="lg" className="font-semibold">
+                    Start Discovery
+                </Button>
+            </Link>
+            <Link href="/explorer">
+                <Button size="lg" variant="outline">
+                    Explore Data
+                </Button>
+            </Link>
+          </div>
+        </div>
+
+        <div className="lg:w-[350px]">
+          <Card className="h-full">
+            <CardContent className="p-6 flex flex-col justify-between h-full">
+                <div>
+                   <div className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">Today</div>
+                   <div className="text-4xl font-bold mb-2">156 Discoveries</div>
+                   <div className="text-sm text-green-600 font-medium flex items-center gap-1">
+                     <ArrowUp className="h-4 w-4" />
+                     +12% vs last week
+                   </div>
+                </div>
+                
+                <Separator className="my-4" />
+
+                <div className="space-y-2">
+                    <div className="flex items-center justify-between text-sm">
+                        <span className="flex items-center gap-2">
+                             <span className="h-2 w-2 rounded-full bg-primary"></span>
+                             Discovery
+                        </span>
+                        <span className="font-mono font-medium">64</span>
+                    </div>
+                    <div className="flex items-center justify-between text-sm">
+                         <span className="flex items-center gap-2">
+                             <span className="h-2 w-2 rounded-full bg-green-500"></span>
+                             Prediction
+                        </span>
+                        <span className="font-mono font-medium">42</span>
+                    </div>
+                    <div className="flex items-center justify-between text-sm">
+                         <span className="flex items-center gap-2">
+                             <span className="h-2 w-2 rounded-full bg-amber-500"></span>
+                             Evidence
+                        </span>
+                        <span className="font-mono font-medium">50</span>
+                    </div>
+                </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* Metrics Row */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {[
+            { label: "Molecules", value: "12.5M", icon: "🧪", change: "+2.3%", color: "text-blue-500" },
+            { label: "Proteins", value: "847K", icon: "🧬", change: "+1.8%", color: "text-cyan-500" },
+            { label: "Papers", value: "1.2M", icon: "📚", change: "+5.2%", color: "text-emerald-500" },
+            { label: "Discoveries", value: "156", icon: "✨", change: "+12%", color: "text-amber-500" }
+        ].map((metric, i) => (
+            <Card key={i}>
+                <CardContent className="p-6">
+                    <div className="flex justify-between items-start mb-2">
+                        <div className="text-sm font-medium text-muted-foreground">{metric.label}</div>
+                        <div className="text-lg">{metric.icon}</div>
+                    </div>
+                    <div className="text-2xl font-bold mb-1">{metric.value}</div>
+                    <div className="text-xs font-medium flex items-center gap-1 text-green-500">
+                        <ArrowUp className="h-3 w-3" />
+                        {metric.change}
+                    </div>
+                </CardContent>
+            </Card>
+        ))}
+      </div>
+
+      {/* Quick Actions */}
+      <div className="pt-4">
+        <SectionHeader title="Quick Actions" icon={<Zap className="h-5 w-5 text-amber-500" />} />
+        
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <Link href="/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/app/settings/page.tsx

@@ -0,0 +1,192 @@
+"use client"
+
+import { PageHeader, SectionHeader } from "@/components/page-header"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Label } from "@/components/ui/label"
+import { Slider } from "@/components/ui/slider"
+import { Switch } from "@/components/ui/switch"
+import { Settings, Brain, Save } from "lucide-react"
+
+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/components.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@animate-ui": "https://animate-ui.com/r/{name}.json"
+  }
+}

ui/components/page-header.tsx

@@ -0,0 +1,37 @@
+// ui/components/page-header.tsx
+import { cn } from "@/lib/utils"
+
+interface PageHeaderProps {
+  title: string
+  subtitle?: string
+  icon?: React.ReactNode
+  className?: string
+}
+
+export function PageHeader({ title, subtitle, icon, className }: PageHeaderProps) {
+  return (
+    <div className={cn("mb-8 space-y-2", className)}>
+        <h1 className="flex items-center gap-3 text-3xl font-bold tracking-tight">
+            {icon && <span className="text-primary">{icon}</span>}
+            {title}
+        </h1>
+        {subtitle && (
+            <p className="text-lg text-muted-foreground">
+                {subtitle}
+            </p>
+        )}
+    </div>
+  )
+}
+
+export function SectionHeader({ title, icon, action }: { title: string, icon?: React.ReactNode, action?: React.ReactNode }) {
+    return (
+        <div className="flex items-center justify-between mb-6">
+            <h2 className="text-xl font-semibold flex items-center gap-2">
+                {icon}
+                {title}
+            </h2>
+            {action}
+        </div>
+    )
+}

ui/components/sidebar.tsx

@@ -0,0 +1,95 @@
+// ui/components/sidebar.tsx
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { Home, Microscope, Dna, BarChart2, Settings, Terminal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+const sidebarItems = [
+  {
+    title: "Home",
+    href: "/",
+    icon: Home,
+  },
+  {
+    title: "Discovery",
+    href: "/discovery",
+    icon: Microscope,
+  },
+  {
+    title: "Explorer",
+    href: "/explorer",
+    icon: Dna,
+  },
+  {
+    title: "Data",
+    href: "/data",
+    icon: BarChart2,
+  },
+  {
+    title: "Settings",
+    href: "/settings",
+    icon: Settings,
+  },
+]
+
+export function Sidebar() {
+  const pathname = usePathname()
+
+  return (
+    <div className="flex h-screen w-[250px] flex-col border-r bg-card pb-4 pt-6">
+      <div className="px-6 mb-8 flex items-center gap-2">
+        <div className="h-8 w-8 rounded-lg bg-primary/20 flex items-center justify-center text-primary">
+            <Dna className="h-5 w-5" />
+        </div>
+        <div className="font-bold text-xl tracking-tight">
+          Bio<span className="text-primary">Flow</span>
+        </div>
+      </div>
+      
+      <div className="px-4 py-2">
+        <div className="text-xs font-semibold text-muted-foreground mb-4 px-2 uppercase tracking-wider">
+          Navigation
+        </div>
+        <nav className="space-y-1">
+          {sidebarItems.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+            >
+              <Button
+                variant={pathname === item.href ? "secondary" : "ghost"}
+                className={cn(
+                  "w-full justify-start gap-3",
+                  pathname === item.href && "bg-secondary font-medium"
+                )}
+              >
+                <item.icon className="h-4 w-4" />
+                {item.title}
+              </Button>
+            </Link>
+          ))}
+        </nav>
+      </div>
+
+      <div className="mt-auto px-4">
+        <div className="rounded-lg border bg-muted/50 p-4">
+            <div className="flex items-center gap-2 mb-2">
+                <Terminal className="h-4 w-4 text-muted-foreground" />
+                <span className="text-xs font-medium">Status</span>
+            </div>
+            <div className="flex items-center gap-2">
+                <span className="relative flex h-2 w-2">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+                  <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+                </span>
+                <span className="text-xs text-muted-foreground">System Online</span>
+            </div>
+        </div>
+      </div>
+    </div>
+  )
+}

ui/components/ui/badge.tsx

@@ -0,0 +1,37 @@
+// ui/components/ui/badge.tsx
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

ui/components/ui/button.tsx

@@ -0,0 +1,58 @@
+// ui/components/ui/button.tsx
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

ui/components/ui/card.tsx

@@ -0,0 +1,77 @@
+// ui/components/ui/card.tsx
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

ui/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

ui/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

ui/components/ui/select.tsx

@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

ui/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

ui/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

ui/components/ui/slider.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

ui/components/ui/switch.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

ui/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

ui/components/ui/tabs.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

ui/components/ui/textarea.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

ui/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

ui/hooks/use-controlled-state.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+interface CommonControlledStateProps<T> {
+  value?: T;
+  defaultValue?: T;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useControlledState<T, Rest extends any[] = []>(
+  props: CommonControlledStateProps<T> & {
+    onChange?: (value: T, ...args: Rest) => void;
+  },
+): readonly [T, (next: T, ...args: Rest) => void] {
+  const { value, defaultValue, onChange } = props;
+
+  const [state, setInternalState] = React.useState<T>(
+    value !== undefined ? value : (defaultValue as T),
+  );
+
+  React.useEffect(() => {
+    if (value !== undefined) setInternalState(value);
+  }, [value]);
+
+  const setState = React.useCallback(
+    (next: T, ...args: Rest) => {
+      setInternalState(next);
+      onChange?.(next, ...args);
+    },
+    [onChange],
+  );
+
+  return [state, setState] as const;
+}

ui/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

ui/lib/api-utils.ts

@@ -0,0 +1,5 @@
+export function getApiUrl() {
+  if (typeof window !== "undefined") return ""; // browser should use relative url
+  if (process.env.BACKEND_URL) return `https://${process.env.BACKEND_URL}`; // SSR should use vercel url
+  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
+}

ui/lib/data-service.ts

@@ -0,0 +1,19 @@
+import { DataResponse } from "@/types/data";
+
+export async function getData(): Promise<DataResponse> {
+  // Mock data simulation - replacing actual database/API call
+  const datasets = [
+    { name: "DrugBank Compounds", type: "Molecules", count: "12,450", size: "45.2 MB", updated: "2024-01-15" },
+    { name: "ChEMBL Kinase Inhibitors", type: "Molecules", count: "8,234", size: "32.1 MB", updated: "2024-01-10" },
+    { name: "Custom Protein Targets", type: "Proteins", count: "1,245", size: "78.5 MB", updated: "2024-01-08" },
+  ];
+
+  const stats = {
+    datasets: 5,
+    molecules: "24.5K",
+    proteins: "1.2K",
+    storage: "156 MB",
+  };
+
+  return Promise.resolve({ datasets, stats });
+}

ui/lib/explorer-service.ts

@@ -0,0 +1,52 @@
+import { ExplorerResponse, DataPoint } from "@/types/explorer";
+import { ExplorerRequestSchema } from "@/schemas/explorer";
+
+const clusters = [
+  { cx: 2, cy: 3, color: "var(--color-chart-1)" },
+  { cx: -2, cy: -1, color: "var(--color-chart-2)" },
+  { cx: 4, cy: -2, color: "var(--color-chart-3)" },
+  { cx: -1, cy: 4, color: "var(--color-chart-4)" },
+];
+
+export async function getExplorerPoints(
+  dataset?: string,
+  view?: string,
+  colorBy?: string
+): Promise<ExplorerResponse> {
+  // Validate params using the schema to ensure defaults are applied if needed, even for internal calls
+  // Note: safeParse is synchronous, but we can treat this as an async service
+  const result = ExplorerRequestSchema.safeParse({
+    dataset,
+    view,
+    colorBy,
+  });
+
+  if (!result.success) {
+    // Return empty/default response or throw type-safe error
+    // For now, adhering to existing behavior, we can just throw or fallback
+    throw new Error("Invalid parameters");
+  }
+
+
+  // TODO: replace mock generation with backend embeddings
+  const points: DataPoint[] = [];
+  for (let i = 0; i < 200; i++) {
+    const cluster = clusters[Math.floor(i / 50)];
+    points.push({
+      x: cluster.cx + (Math.random() - 0.5) * 2,
+      y: cluster.cy + (Math.random() - 0.5) * 2,
+      z: Math.random() * 100,
+      color: cluster.color,
+      name: `Mol_${i}`,
+      affinity: Math.random() * 100,
+    });
+  }
+
+  const metrics = {
+    activeMolecules: 12450,
+    clusters: 4,
+    avgConfidence: 0.89,
+  };
+
+  return Promise.resolve({ points, metrics });
+}

ui/lib/get-strict-context.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+function getStrictContext<T>(
+  name?: string,
+): readonly [
+  ({
+    value,
+    children,
+  }: {
+    value: T;
+    children?: React.ReactNode;
+  }) => React.JSX.Element,
+  () => T,
+] {
+  const Context = React.createContext<T | undefined>(undefined);
+
+  const Provider = ({
+    value,
+    children,
+  }: {
+    value: T;
+    children?: React.ReactNode;
+  }) => <Context.Provider value={value}>{children}</Context.Provider>;
+
+  const useSafeContext = () => {
+    const ctx = React.useContext(Context);
+    if (ctx === undefined) {
+      throw new Error(`useContext must be used within ${name ?? 'a Provider'}`);
+    }
+    return ctx;
+  };
+
+  return [Provider, useSafeContext] as const;
+}
+
+export { getStrictContext };

ui/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

ui/next.config.ts

@@ -0,0 +1,37 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  poweredByHeader: false,
+  productionBrowserSourceMaps: false,
+  compress: true,
+  cacheComponents: true,
+  turbopack: {},
+  experimental: {
+    turbopackFileSystemCacheForDev: true,
+    turbopackFileSystemCacheForBuild: false,
+  },
+  images: {
+    formats: ["image/avif", "image/webp"],
+    remotePatterns: [],
+    dangerouslyAllowSVG: false,
+  },
+  async headers() {
+    return [
+      {
+        source: "/:path*",
+        headers: [
+          { key: "Strict-Transport-Security", value: "max-age=63072000; includeSubDomains; preload" },
+          { key: "X-Frame-Options", value: "DENY" },
+          { key: "X-Content-Type-Options", value: "nosniff" },
+          { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
+          { key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=()" },
+          { key: "Cross-Origin-Opener-Policy", value: "same-origin" },
+          { key: "Cross-Origin-Resource-Policy", value: "same-origin" },
+        ],
+      },
+    ];
+  },
+};
+
+export default nextConfig;

ui/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "ui",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint .",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.29.2",
+    "lucide-react": "^0.563.0",
+    "motion": "^12.29.2",
+    "next": "^16.1.4",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "recharts": "^3.7.0",
+    "tailwind-merge": "^3.4.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^25.0.10",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "^16.1.4",
+    "shadcn": "^3.7.0",
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3"
+  }
+}

ui/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - .

ui/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;