feat: add complete visualization system from feat/raed-ui

- Add dashboard layout with sidebar navigation
- Add molecules 2D page with SMILES visualization (smiles-drawer)
- Add molecules 3D page with 3Dmol.js viewer
- Add proteins 3D page with PDB structure viewer
- Add API routes for molecules and proteins (mock data)
- Add scroll-area and alert UI components
- Add theme toggle component
- Update sidebar with visualization menu items
- Update routes to use /dashboard prefix

Co-authored-by: RaedAddala <raed.addala@example.com>

ui/app/api/_mock/molecules.ts

@@ -0,0 +1,31 @@
+export type Molecule = {
+  id: string;
+  name: string;
+  smiles: string;
+  pubchemCid: number;
+  description?: string;
+};
+
+export const molecules: Molecule[] = [
+  {
+    id: 'caffeine',
+    name: 'Caffeine',
+    smiles: 'CN1C=NC2=C1C(=O)N(C(=O)N2C)C',
+    pubchemCid: 2519,
+    description: 'Xanthine alkaloid found in coffee and tea',
+  },
+  {
+    id: 'aspirin',
+    name: 'Aspirin',
+    smiles: 'CC(=O)OC1=CC=CC=C1C(=O)O',
+    pubchemCid: 2244,
+    description: 'Acetylsalicylic acid - common pain reliever',
+  },
+  {
+    id: 'ibuprofen',
+    name: 'Ibuprofen',
+    smiles: 'CC(C)CC1=CC=C(C=C1)C(C)C(=O)O',
+    pubchemCid: 3672,
+    description: 'Non-steroidal anti-inflammatory drug (NSAID)',
+  },
+];

ui/app/api/_mock/proteins.ts

@@ -0,0 +1,27 @@
+export type Protein = {
+  id: string;
+  pdbId: string;
+  name: string;
+  description?: string;
+};
+
+export const proteins: Protein[] = [
+  {
+    id: '1CRN',
+    pdbId: '1CRN',
+    name: 'Crambin',
+    description: 'Small hydrophobic protein from Crambe abyssinica seeds',
+  },
+  {
+    id: '1UBQ',
+    pdbId: '1UBQ',
+    name: 'Ubiquitin',
+    description: 'Regulatory protein found in most eukaryotic cells',
+  },
+  {
+    id: '4HHB',
+    pdbId: '4HHB',
+    name: 'Hemoglobin',
+    description: 'Iron-containing oxygen-transport protein in red blood cells',
+  },
+];

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

@@ -0,0 +1,17 @@
+import { NextResponse } from 'next/server';
+
+import { molecules } from '../../_mock/molecules';
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+  const molecule = molecules.find((m) => m.id === id);
+
+  if (!molecule) {
+    return NextResponse.json({ error: 'Molecule not found' }, { status: 404 });
+  }
+
+  return NextResponse.json(molecule);
+}

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

@@ -0,0 +1,60 @@
+import { NextResponse } from 'next/server';
+
+import { molecules } from '../../../_mock/molecules';
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+  const molecule = molecules.find((m) => m.id === id);
+
+  if (!molecule) {
+    return NextResponse.json({ error: 'Molecule not found' }, { status: 404 });
+  }
+
+  try {
+    const pubchemUrl = `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/${molecule.pubchemCid}/record/SDF?record_type=3d`;
+    const response = await fetch(pubchemUrl, {
+      next: { revalidate: 3600 }, // Cache for 1 hour
+    });
+
+    if (!response.ok) {
+      // Try 2D SDF as fallback if 3D is not available
+      const pubchemUrl2D = `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/${molecule.pubchemCid}/record/SDF`;
+      const response2D = await fetch(pubchemUrl2D, {
+        next: { revalidate: 3600 },
+      });
+
+      if (!response2D.ok) {
+        return NextResponse.json(
+          { error: 'Failed to fetch SDF from PubChem' },
+          { status: 502 }
+        );
+      }
+
+      const sdfText = await response2D.text();
+      return new NextResponse(sdfText, {
+        headers: {
+          'Content-Type': 'chemical/x-mdl-sdfile',
+          'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
+        },
+      });
+    }
+
+    const sdfText = await response.text();
+
+    return new NextResponse(sdfText, {
+      headers: {
+        'Content-Type': 'chemical/x-mdl-sdfile',
+        'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
+      },
+    });
+  } catch (error) {
+    console.error('Error fetching SDF:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch SDF data' },
+      { status: 500 }
+    );
+  }
+}

ui/app/api/molecules/route.ts

@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server';
+
+import { molecules } from '../_mock/molecules';
+
+export async function GET() {
+  return NextResponse.json(molecules);
+}

ui/app/api/proteins/[id]/pdb/route.ts

@@ -0,0 +1,45 @@
+import { NextResponse } from 'next/server';
+
+import { proteins } from '../../../_mock/proteins';
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+  const protein = proteins.find((p) => p.id === id || p.pdbId === id);
+
+  if (!protein) {
+    return NextResponse.json({ error: 'Protein not found' }, { status: 404 });
+  }
+
+  try {
+    const rcsbUrl = `https://files.rcsb.org/download/${protein.pdbId}.pdb`;
+
+    const response = await fetch(rcsbUrl, {
+      next: { revalidate: 3600 }, // Cache for 1 hour
+    });
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: `Failed to fetch PDB from RCSB: ${response.statusText}` },
+        { status: 502 }
+      );
+    }
+
+    const pdbText = await response.text();
+
+    return new NextResponse(pdbText, {
+      headers: {
+        'Content-Type': 'text/plain',
+        'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
+      },
+    });
+  } catch (error) {
+    console.error('Error fetching PDB:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch PDB data' },
+      { status: 500 }
+    );
+  }
+}

ui/app/api/proteins/[id]/route.ts

@@ -0,0 +1,17 @@
+import { NextResponse } from 'next/server';
+
+import { proteins } from '../../_mock/proteins';
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+  const protein = proteins.find((p) => p.id === id || p.pdbId === id);
+
+  if (!protein) {
+    return NextResponse.json({ error: 'Protein not found' }, { status: 404 });
+  }
+
+  return NextResponse.json(protein);
+}

ui/app/api/proteins/route.ts

@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server';
+
+import { proteins } from '../_mock/proteins';
+
+export async function GET() {
+  return NextResponse.json(proteins);
+}

ui/app/dashboard/layout.tsx

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

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

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

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

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

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

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

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

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

ui/app/dashboard/page.tsx

@@ -0,0 +1,172 @@
+"use client"
+
+import { ArrowUp, Database, FileText, Search, Sparkles, Zap } from "lucide-react"
+import Link from "next/link"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
+
+export default function DashboardHome() {
+  return (
+    <div className="space-y-8 animate-in fade-in duration-500 p-8">
+      {/* Hero Section */}
+      <div className="flex flex-col lg:flex-row gap-6">
+        <div className="flex-1 rounded-2xl bg-gradient-to-br from-primary/10 via-background to-background p-8 border">
+          <Badge variant="secondary" className="mb-4">New • BioFlow 2.0</Badge>
+          <h1 className="text-4xl font-bold tracking-tight mb-4">AI-Powered Drug Discovery</h1>
+          <p className="text-lg text-muted-foreground mb-6 max-w-xl">
+            Run discovery pipelines, predict binding, and surface evidence in one streamlined workspace.
+          </p>
+          <div className="flex gap-2 mb-6">
+            <Badge variant="outline" className="bg-primary/5 border-primary/20 text-primary">Model-aware search</Badge>
+            <Badge variant="outline" className="bg-green-500/10 border-green-500/20 text-green-700 dark:text-green-400">Evidence-linked</Badge>
+            <Badge variant="outline" className="bg-amber-500/10 border-amber-500/20 text-amber-700 dark:text-amber-400">Fast iteration</Badge>
+          </div>
+
+          <div className="flex gap-4">
+            <Link href="/dashboard/discovery">
+              <Button size="lg" className="font-semibold">
+                Start Discovery
+              </Button>
+            </Link>
+            <Link href="/dashboard/explorer">
+              <Button size="lg" variant="outline">
+                Explore Data
+              </Button>
+            </Link>
+          </div>
+        </div>
+
+        <div className="lg:w-[350px]">
+          <Card className="h-full">
+            <CardContent className="p-6 flex flex-col justify-between h-full">
+              <div>
+                <div className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">Today</div>
+                <div className="text-4xl font-bold mb-2">156 Discoveries</div>
+                <div className="text-sm text-green-600 font-medium flex items-center gap-1">
+                  <ArrowUp className="h-4 w-4" />
+                  +12% vs last week
+                </div>
+              </div>
+
+              <Separator className="my-4" />
+
+              <div className="space-y-2">
+                <div className="flex items-center justify-between text-sm">
+                  <span className="flex items-center gap-2">
+                    <span className="h-2 w-2 rounded-full bg-primary"></span>
+                    Discovery
+                  </span>
+                  <span className="font-mono font-medium">64</span>
+                </div>
+                <div className="flex items-center justify-between text-sm">
+                  <span className="flex items-center gap-2">
+                    <span className="h-2 w-2 rounded-full bg-green-500"></span>
+                    Prediction
+                  </span>
+                  <span className="font-mono font-medium">42</span>
+                </div>
+                <div className="flex items-center justify-between text-sm">
+                  <span className="flex items-center gap-2">
+                    <span className="h-2 w-2 rounded-full bg-amber-500"></span>
+                    Evidence
+                  </span>
+                  <span className="font-mono font-medium">50</span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* Metrics Row */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {[
+          { label: "Molecules", value: "12.5M", icon: "🧪", 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">
+        <div className="flex items-center gap-2 mb-4">
+          <Zap className="h-5 w-5 text-amber-500" />
+          <h2 className="text-xl font-semibold">Quick Actions</h2>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <Link href="/dashboard/molecules-2d" className="block">
+            <Card className="hover:bg-accent/50 transition-colors cursor-pointer h-full">
+              <CardContent className="p-6 flex flex-col items-center text-center gap-3">
+                <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
+                  <Search className="h-5 w-5" />
+                </div>
+                <div>
+                  <div className="font-semibold">Molecules 2D</div>
+                  <div className="text-sm text-muted-foreground">View 2D structures</div>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+          <Link href="/dashboard/molecules-3d" className="block">
+            <Card className="hover:bg-accent/50 transition-colors cursor-pointer h-full">
+              <CardContent className="p-6 flex flex-col items-center text-center gap-3">
+                <div className="h-10 w-10 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500">
+                  <Database className="h-5 w-5" />
+                </div>
+                <div>
+                  <div className="font-semibold">Molecules 3D</div>
+                  <div className="text-sm text-muted-foreground">View 3D structures</div>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+          <Link href="/dashboard/proteins-3d" className="block">
+            <Card className="hover:bg-accent/50 transition-colors cursor-pointer h-full">
+              <CardContent className="p-6 flex flex-col items-center text-center gap-3">
+                <div className="h-10 w-10 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-500">
+                  <FileText className="h-5 w-5" />
+                </div>
+                <div>
+                  <div className="font-semibold">Proteins 3D</div>
+                  <div className="text-sm text-muted-foreground">View protein structures</div>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+          <Link href="/dashboard/discovery" className="block">
+            <Card className="hover:bg-accent/50 transition-colors cursor-pointer h-full">
+              <CardContent className="p-6 flex flex-col items-center text-center gap-3">
+                <div className="h-10 w-10 rounded-full bg-slate-500/10 flex items-center justify-center text-slate-500">
+                  <Sparkles className="h-5 w-5" />
+                </div>
+                <div>
+                  <div className="font-semibold">Discovery</div>
+                  <div className="text-sm text-muted-foreground">Run predictions</div>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

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

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

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

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

ui/app/visualization/page.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { useState } from 'react';
+
+import { PageHeader } from '@/components/page-header';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ProteinViewer } from '@/components/visualization/protein-viewer';
+import { Smiles2DViewer } from '@/components/visualization/smiles-2d-viewer';
+
+// Example molecules
+const EXAMPLE_SMILES = [
+  { name: 'Aspirin', smiles: 'CC(=O)OC1=CC=CC=C1C(=O)O' },
+  { name: 'Caffeine', smiles: 'CN1C=NC2=C1C(=O)N(C(=O)N2C)C' },
+  { name: 'Ibuprofen', smiles: 'CC(C)CC1=CC=C(C=C1)C(C)C(=O)O' },
+  { name: 'Paracetamol', smiles: 'CC(=O)NC1=CC=C(C=C1)O' },
+];
+
+// Example proteins (PDB IDs)
+const EXAMPLE_PROTEINS = [
+  { name: 'Hemoglobin', pdbId: '1HHO' },
+  { name: 'Insulin', pdbId: '1ZNI' },
+  { name: 'Lysozyme', pdbId: '1LYZ' },
+  { name: 'Green Fluorescent Protein', pdbId: '1EMA' },
+];
+
+export default function VisualizationPage() {
+  const [customSmiles, setCustomSmiles] = useState('');
+  const [customPdbId, setCustomPdbId] = useState('');
+  const [activeSmiles, setActiveSmiles] = useState(EXAMPLE_SMILES[0].smiles);
+  const [activePdbId, setActivePdbId] = useState(EXAMPLE_PROTEINS[0].pdbId);
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <PageHeader
+        title="Molecular Visualization"
+        subtitle="View 2D molecule structures and 3D protein models"
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: 'Visualization' },
+        ]}
+      />
+
+      <Tabs defaultValue="molecules" className="space-y-6">
+        <TabsList>
+          <TabsTrigger value="molecules">2D Molecules</TabsTrigger>
+          <TabsTrigger value="proteins">3D Proteins</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="molecules" className="space-y-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Controls */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Molecule Selection</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label>Example Molecules</Label>
+                  <div className="flex flex-wrap gap-2">
+                    {EXAMPLE_SMILES.map((mol) => (
+                      <Button
+                        key={mol.name}
+                        variant={activeSmiles === mol.smiles ? 'default' : 'outline'}
+                        size="sm"
+                        onClick={() => setActiveSmiles(mol.smiles)}
+                      >
+                        {mol.name}
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="custom-smiles">Custom SMILES</Label>
+                  <div className="flex gap-2">
+                    <Input
+                      id="custom-smiles"
+                      placeholder="Enter SMILES string..."
+                      value={customSmiles}
+                      onChange={(e) => setCustomSmiles(e.target.value)}
+                    />
+                    <Button
+                      onClick={() => customSmiles && setActiveSmiles(customSmiles)}
+                      disabled={!customSmiles}
+                    >
+                      View
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="p-3 bg-muted rounded-lg">
+                  <Label className="text-xs text-muted-foreground">Current SMILES</Label>
+                  <code className="block text-sm font-mono mt-1 break-all">
+                    {activeSmiles}
+                  </code>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Viewer */}
+            <Card>
+              <CardHeader>
+                <CardTitle>2D Structure</CardTitle>
+              </CardHeader>
+              <CardContent className="flex justify-center">
+                <Smiles2DViewer
+                  smiles={activeSmiles}
+                  width={400}
+                  height={300}
+                />
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="proteins" className="space-y-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Controls */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Protein Selection</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label>Example Proteins</Label>
+                  <div className="flex flex-wrap gap-2">
+                    {EXAMPLE_PROTEINS.map((protein) => (
+                      <Button
+                        key={protein.pdbId}
+                        variant={activePdbId === protein.pdbId ? 'default' : 'outline'}
+                        size="sm"
+                        onClick={() => setActivePdbId(protein.pdbId)}
+                      >
+                        {protein.name}
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="custom-pdb">Custom PDB ID</Label>
+                  <div className="flex gap-2">
+                    <Input
+                      id="custom-pdb"
+                      placeholder="Enter PDB ID (e.g., 1HHO)..."
+                      value={customPdbId}
+                      onChange={(e) => setCustomPdbId(e.target.value.toUpperCase())}
+                      maxLength={4}
+                    />
+                    <Button
+                      onClick={() => customPdbId && setActivePdbId(customPdbId)}
+                      disabled={!customPdbId || customPdbId.length !== 4}
+                    >
+                      View
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="p-3 bg-muted rounded-lg">
+                  <Label className="text-xs text-muted-foreground">Current PDB ID</Label>
+                  <code className="block text-sm font-mono mt-1">
+                    {activePdbId}
+                  </code>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Viewer */}
+            <Card>
+              <CardHeader>
+                <CardTitle>3D Structure</CardTitle>
+              </CardHeader>
+              <CardContent className="flex justify-center">
+                <ProteinViewer
+                  pdbId={activePdbId}
+                  width={500}
+                  height={400}
+                />
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

ui/components/sidebar.tsx

@@ -9,6 +9,7 @@ import {
   ChevronsUpDown,
   CreditCard,
   Dna,
+  FlaskConical,
   Home,
   LogOut,
   Microscope,
@@ -16,7 +17,6 @@ import {
   Sparkles,
   Terminal,
   User,
-  Workflow,
 } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
@@ -52,87 +52,92 @@ import {
   CollapsibleTrigger,
 } from '@/components/animate-ui/primitives/radix/collapsible';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { ThemeToggle } from '@/components/theme-toggle';
 import { useIsMobile } from '@/hooks/use-mobile';
 
 const navMain = [
   {
     title: 'Home',
-    url: '/',
+    url: '/dashboard',
     icon: Home,
     isActive: true,
   },
   {
-    title: 'Workflow',
-    url: '/workflow',
-    icon: Workflow,
+    title: 'Visualization',
+    url: '/dashboard/molecules-2d',
+    icon: FlaskConical,
     items: [
       {
-        title: 'Pipeline Builder',
-        url: '/workflow',
+        title: 'Molecules 2D',
+        url: '/dashboard/molecules-2d',
       },
       {
-        title: 'Templates',
-        url: '/workflow#templates',
+        title: 'Molecules 3D',
+        url: '/dashboard/molecules-3d',
+      },
+      {
+        title: 'Proteins 3D',
+        url: '/dashboard/proteins-3d',
       },
     ],
   },
   {
     title: 'Discovery',
-    url: '/discovery',
+    url: '/dashboard/discovery',
     icon: Microscope,
     items: [
       {
         title: 'Drug Discovery',
-        url: '/discovery',
+        url: '/dashboard/discovery',
       },
       {
         title: 'Molecule Search',
-        url: '/discovery#search',
+        url: '/dashboard/discovery#search',
       },
     ],
   },
   {
     title: 'Explorer',
-    url: '/explorer',
+    url: '/dashboard/explorer',
     icon: Dna,
     items: [
       {
         title: 'Embeddings',
-        url: '/explorer',
+        url: '/dashboard/explorer',
       },
       {
         title: 'Predictions',
-        url: '/explorer#predictions',
+        url: '/dashboard/explorer#predictions',
       },
     ],
   },
   {
     title: 'Data',
-    url: '/data',
+    url: '/dashboard/data',
     icon: BarChart2,
     items: [
       {
         title: 'Datasets',
-        url: '/data',
+        url: '/dashboard/data',
       },
       {
         title: 'Analytics',
-        url: '/data#analytics',
+        url: '/dashboard/data#analytics',
       },
     ],
   },
   {
     title: 'Settings',
-    url: '/settings',
+    url: '/dashboard/settings',
     icon: Settings,
     items: [
       {
         title: 'General',
-        url: '/settings',
+        url: '/dashboard/settings',
       },
       {
         title: 'Models',
-        url: '/settings#models',
+        url: '/dashboard/settings#models',
       },
     ],
   },
@@ -155,7 +160,7 @@ export function AppSidebar() {
         <SidebarMenu>
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
-              <Link href="/">
+              <Link href="/dashboard">
                 <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                   <Dna className="size-4" />
                 </div>
@@ -167,6 +172,10 @@ export function AppSidebar() {
             </SidebarMenuButton>
           </SidebarMenuItem>
         </SidebarMenu>
+        {/* Theme Toggle */}
+        <div className="group-data-[collapsible=icon]:hidden px-2">
+          <ThemeToggle />
+        </div>
         {/* App Header */}
       </SidebarHeader>
 
@@ -177,7 +186,7 @@ export function AppSidebar() {
           <SidebarMenu>
             {navMain.map((item) => {
               const isActive = pathname === item.url || pathname?.startsWith(item.url + '/');
-              
+
               if (!item.items || item.items.length === 0) {
                 return (
                   <SidebarMenuItem key={item.title}>

ui/components/theme-toggle.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun, Laptop } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/animate-ui/components/radix/dropdown-menu"
+
+export function ThemeToggle() {
+  const { setTheme, theme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-9 w-9">
+          <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          <Sun className="mr-2 h-4 w-4" />
+          <span>Light</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          <Moon className="mr-2 h-4 w-4" />
+          <span>Dark</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          <Laptop className="mr-2 h-4 w-4" />
+          <span>System</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

ui/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

ui/components/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

ui/lib/visualization-api.ts

@@ -52,6 +52,7 @@ export function getMoleculeSdfUrl(id: string): string {
   return `${API_BASE}/molecules/${id}/sdf`;
 }
 
-export function getProteinPdbUrl(id: string): string {
-  return `${API_BASE}/proteins/${id}/pdb`;
+export function getProteinPdbUrl(pdbId: string): string {
+  // Fetch directly from RCSB PDB for now
+  return `https://files.rcsb.org/download/${pdbId.toUpperCase()}.pdb`;
 }

ui/package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slider": "^1.3.6",
@@ -28,6 +29,7 @@
     "lucide-react": "^0.563.0",
     "motion": "^12.29.2",
     "next": "^16.1.4",
+    "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",

ui/pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       '@radix-ui/react-label':
         specifier: ^2.1.8
         version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.2.10
+        version: 1.2.10(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-select':
         specifier: ^2.2.6
         version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -62,6 +65,9 @@ importers:
       next:
         specifier: ^16.1.4
         version: 16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       radix-ui:
         specifier: ^1.4.3
         version: 1.4.3(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -3367,6 +3373,12 @@ packages:
   netcdfjs@3.0.0:
     resolution: {integrity: sha512-LOvT8KkC308qtpUkcBPiCMBtii7ZQCN6LxcVheWgyUeZ6DQWcpSRFV9dcVXLj/2eHZ/bre9tV5HTH4Sf93vrFw==}
 
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   next@16.1.4:
     resolution: {integrity: sha512-gKSecROqisnV7Buen5BfjmXAm7Xlpx9o2ueVQRo5DxQcjC8d330dOM1xiGWc2k3Dcnz0In3VybyRPOsudwgiqQ==}
     engines: {node: '>=20.9.0'}
@@ -7625,6 +7637,11 @@ snapshots:
     dependencies:
       iobuffer: 5.4.0
 
+  next-themes@0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   next@16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       '@next/env': 16.1.4

ui/types/smiles-drawer.d.ts

@@ -0,0 +1,33 @@
+declare module 'smiles-drawer' {
+  interface SmiDrawerOptions {
+    width?: number;
+    height?: number;
+    bondThickness?: number;
+    bondLength?: number;
+    shortBondLength?: number;
+    bondSpacing?: number;
+    atomVisualization?: 'default' | 'balls' | 'none';
+    isomeric?: boolean;
+    debug?: boolean;
+    terminalCarbons?: boolean;
+    explicitHydrogens?: boolean;
+    compactDrawing?: boolean;
+    fontSizeLarge?: number;
+    fontSizeSmall?: number;
+    padding?: number;
+  }
+
+  class SmiDrawer {
+    constructor(options?: SmiDrawerOptions);
+    draw(
+      smiles: string,
+      target: string | HTMLCanvasElement,
+      theme?: 'light' | 'dark',
+      onSuccess?: () => void,
+      onError?: (error: Error) => void
+    ): void;
+  }
+
+  export { SmiDrawer };
+  export default { SmiDrawer };
+}