Dashboard

old_ui/__init__.py

@@ -0,0 +1,15 @@
+"""
+BioFlow UI Package
+===================
+
+Modern Streamlit-based interface for the BioFlow platform.
+
+Pages:
+- Home: Dashboard with key metrics and quick actions
+- Discovery: Drug discovery pipeline interface
+- Explorer: Vector space visualization
+- Data: Data ingestion and management
+- Settings: Configuration and preferences
+"""
+
+__version__ = "2.0.0"

old_ui/app.py

@@ -0,0 +1,61 @@
+"""
+BioFlow - AI-Powered Drug Discovery Platform
+==============================================
+Main application entry point.
+"""
+
+import streamlit as st
+import sys
+import os
+
+# Setup path for imports
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))))
+
+from bioflow.ui.config import get_css
+from bioflow.ui.components import side_nav
+from bioflow.ui.pages import home, discovery, explorer, data, settings
+
+
+def main():
+    """Main application."""
+    
+    # Page config
+    st.set_page_config(
+        page_title="BioFlow",
+        page_icon="🧬",
+        layout="wide",
+        initial_sidebar_state="collapsed",
+    )
+    
+    # Inject custom CSS
+    st.markdown(get_css(), unsafe_allow_html=True)
+    
+    # Initialize session state
+    if "current_page" not in st.session_state:
+        st.session_state.current_page = "home"
+    
+    # Layout with left navigation
+    nav_col, content_col = st.columns([1, 3.6], gap="large")
+    
+    with nav_col:
+        selected = side_nav(active_page=st.session_state.current_page)
+    
+    if selected != st.session_state.current_page:
+        st.session_state.current_page = selected
+        st.rerun()
+    
+    with content_col:
+        page_map = {
+            "home": home.render,
+            "discovery": discovery.render,
+            "explorer": explorer.render,
+            "data": data.render,
+            "settings": settings.render,
+        }
+        
+        render_fn = page_map.get(st.session_state.current_page, home.render)
+        render_fn()
+
+
+if __name__ == "__main__":
+    main()

old_ui/components.py

@@ -0,0 +1,481 @@
+"""
+BioFlow UI - Components Library
+================================
+Reusable, modern UI components for Streamlit.
+"""
+
+import streamlit as st
+from typing import List, Dict, Any, Optional, Callable
+import plotly.express as px
+import plotly.graph_objects as go
+
+# Import colors
+import sys
+import os
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))))
+from bioflow.ui.config import COLORS
+
+
+# === Navigation ===
+
+def side_nav(active_page: str = "home") -> str:
+    """Left vertical navigation list. Returns the selected page key."""
+
+    nav_items = [
+        ("home", "🏠", "Home"),
+        ("discovery", "🔬", "Discovery"),
+        ("explorer", "🧬", "Explorer"),
+        ("data", "📊", "Data"),
+        ("settings", "⚙️", "Settings"),
+    ]
+
+    st.markdown(
+        f"""
+        <div class="nav-rail">
+            <div class="nav-brand">
+                <div class="nav-logo">🧬</div>
+                <div class="nav-title">Bio<span>Flow</span></div>
+            </div>
+            <div class="nav-section">Navigation</div>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+    label_map = {key: f"{icon} {label}" for key, icon, label in nav_items}
+    options = [item[0] for item in nav_items]
+
+    selected = st.radio(
+        "Navigation",
+        options=options,
+        index=options.index(active_page),
+        format_func=lambda x: label_map.get(x, x),
+        key="nav_radio",
+        label_visibility="collapsed",
+    )
+
+    return selected
+
+
+# === Page Structure ===
+
+def page_header(title: str, subtitle: str = "", icon: str = ""):
+    """Page header with title and optional subtitle."""
+    header_html = f"""
+    <div style="margin-bottom: 2rem;">
+        <h1 style="display: flex; align-items: center; gap: 0.75rem; margin: 0;">
+            {f'<span style="font-size: 2rem;">{icon}</span>' if icon else ''}
+            {title}
+        </h1>
+        {f'<p style="margin-top: 0.5rem; font-size: 1rem; color: {COLORS.text_muted};">{subtitle}</p>' if subtitle else ''}
+    </div>
+    """
+    st.markdown(header_html, unsafe_allow_html=True)
+
+
+def section_header(title: str, icon: str = "", link_text: str = "", link_action: Optional[Callable] = None):
+    """Section header with optional action link."""
+    col1, col2 = st.columns([4, 1])
+    
+    with col1:
+        st.markdown(f"""
+        <div class="section-title">
+            {f'<span>{icon}</span>' if icon else ''}
+            {title}
+        </div>
+        """, unsafe_allow_html=True)
+    
+    with col2:
+        if link_text:
+            if st.button(link_text, key=f"section_{title}", use_container_width=True):
+                if link_action:
+                    link_action()
+
+
+def divider():
+    """Visual divider."""
+    st.markdown('<div class="divider"></div>', unsafe_allow_html=True)
+
+
+def spacer(height: str = "1rem"):
+    """Vertical spacer."""
+    st.markdown(f'<div style="height: {height};"></div>', unsafe_allow_html=True)
+
+
+# === Metrics ===
+
+def metric_card(
+    value: str,
+    label: str,
+    icon: str = "📊",
+    change: Optional[str] = None,
+    change_type: str = "up",
+    color: str = COLORS.primary
+):
+    """Single metric card with icon and optional trend."""
+    bg_color = color.replace(")", ", 0.15)").replace("rgb", "rgba") if "rgb" in color else f"{color}22"
+    change_html = ""
+    if change:
+        arrow = "↑" if change_type == "up" else "↓"
+        change_html = f'<div class="metric-change {change_type}">{arrow} {change}</div>'
+    
+    st.markdown(f"""
+    <div class="metric">
+        <div class="metric-icon" style="background: {bg_color}; color: {color};">
+            {icon}
+        </div>
+        <div class="metric-value">{value}</div>
+        <div class="metric-label">{label}</div>
+        {change_html}
+    </div>
+    """, unsafe_allow_html=True)
+
+
+def metric_row(metrics: List[Dict[str, Any]]):
+    """Row of metric cards."""
+    cols = st.columns(len(metrics))
+    for col, metric in zip(cols, metrics):
+        with col:
+            metric_card(**metric)
+
+
+# === Quick Actions ===
+
+def quick_action(icon: str, title: str, description: str, key: str) -> bool:
+    """Single quick action card. Returns True if clicked."""
+    clicked = st.button(
+        f"{icon}  {title}",
+        key=key,
+        use_container_width=True,
+        help=description
+    )
+    return clicked
+
+
+def quick_actions_grid(actions: List[Dict[str, Any]], columns: int = 4) -> Optional[str]:
+    """Grid of quick action cards. Returns clicked action key or None."""
+    cols = st.columns(columns)
+    clicked_key = None
+    
+    for i, action in enumerate(actions):
+        with cols[i % columns]:
+            st.markdown(f"""
+            <div class="quick-action">
+                <span class="quick-action-icon">{action['icon']}</span>
+                <div class="quick-action-title">{action['title']}</div>
+                <div class="quick-action-desc">{action.get('description', '')}</div>
+            </div>
+            """, unsafe_allow_html=True)
+            
+            if st.button("Select", key=action['key'], use_container_width=True):
+                clicked_key = action['key']
+    
+    return clicked_key
+
+
+# === Pipeline Progress ===
+
+def pipeline_progress(steps: List[Dict[str, Any]]):
+    """Visual pipeline with steps showing progress."""
+    html = '<div class="pipeline">'
+    
+    for i, step in enumerate(steps):
+        status = step.get('status', 'pending')
+        icon = step.get('icon', str(i + 1))
+        name = step.get('name', f'Step {i + 1}')
+        
+        # Display icon for completed steps
+        if status == 'done':
+            display = '✓'
+        elif status == 'active':
+            display = icon
+        else:
+            display = str(i + 1)
+        
+        html += f'''
+        <div class="step">
+            <div class="step-dot {status}">{display}</div>
+            <span class="step-name">{name}</span>
+        </div>
+        '''
+        
+        # Add connecting line (except after last step)
+        if i < len(steps) - 1:
+            line_status = 'done' if status == 'done' else ''
+            html += f'<div class="step-line {line_status}"></div>'
+    
+    html += '</div>'
+    st.markdown(html, unsafe_allow_html=True)
+
+
+# === Results ===
+
+def result_card(
+    title: str,
+    score: float,
+    properties: Dict[str, str] = None,
+    badges: List[str] = None,
+    key: str = ""
+) -> bool:
+    """Result card with score and properties. Returns True if clicked."""
+    
+    # Score color
+    if score >= 0.8:
+        score_class = "score-high"
+    elif score >= 0.5:
+        score_class = "score-med"
+    else:
+        score_class = "score-low"
+    
+    # Properties HTML
+    props_html = ""
+    if properties:
+        props_html = '<div style="display: flex; gap: 1rem; margin-top: 0.75rem; flex-wrap: wrap;">'
+        for k, v in properties.items():
+            props_html += f'''
+            <div style="font-size: 0.8125rem;">
+                <span style="color: {COLORS.text_muted};">{k}:</span>
+                <span style="color: {COLORS.text_secondary}; margin-left: 0.25rem;">{v}</span>
+            </div>
+            '''
+        props_html += '</div>'
+    
+    # Badges HTML
+    badges_html = ""
+    if badges:
+        badges_html = '<div style="display: flex; gap: 0.5rem; margin-top: 0.75rem;">'
+        for b in badges:
+            badges_html += f'<span class="badge badge-primary">{b}</span>'
+        badges_html += '</div>'
+    
+    st.markdown(f"""
+    <div class="result">
+        <div style="display: flex; justify-content: space-between; align-items: flex-start;">
+            <div style="font-weight: 600; color: {COLORS.text_primary};">{title}</div>
+            <div class="{score_class}" style="font-size: 1.25rem; font-weight: 700;">{score:.1%}</div>
+        </div>
+        {props_html}
+        {badges_html}
+    </div>
+    """, unsafe_allow_html=True)
+    
+    return st.button("View Details", key=key, use_container_width=True) if key else False
+
+
+def results_list(results: List[Dict[str, Any]], empty_message: str = "No results found"):
+    """List of result cards."""
+    if not results:
+        empty_state(icon="🔍", title="No Results", description=empty_message)
+        return
+    
+    for i, result in enumerate(results):
+        result_card(
+            title=result.get('title', f'Result {i + 1}'),
+            score=result.get('score', 0),
+            properties=result.get('properties'),
+            badges=result.get('badges'),
+            key=f"result_{i}"
+        )
+        spacer("0.75rem")
+
+
+# === Charts ===
+
+def bar_chart(data: Dict[str, float], title: str = "", height: int = 300):
+    """Styled bar chart."""
+    fig = go.Figure(data=[
+        go.Bar(
+            x=list(data.keys()),
+            y=list(data.values()),
+            marker_color=COLORS.primary,
+            marker_line_width=0,
+        )
+    ])
+    
+    fig.update_layout(
+        title=title,
+        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='rgba(0,0,0,0)',
+        font=dict(family="Inter", color=COLORS.text_secondary),
+        height=height,
+        margin=dict(l=40, r=20, t=40, b=40),
+        xaxis=dict(
+            showgrid=False,
+            showline=True,
+            linecolor=COLORS.border,
+        ),
+        yaxis=dict(
+            showgrid=True,
+            gridcolor=COLORS.border,
+            showline=False,
+        ),
+    )
+    
+    st.plotly_chart(fig, use_container_width=True)
+
+
+def scatter_chart(x: List, y: List, labels: List = None, title: str = "", height: int = 400):
+    """Styled scatter plot."""
+    fig = go.Figure(data=[
+        go.Scatter(
+            x=x,
+            y=y,
+            mode='markers',
+            marker=dict(
+                size=10,
+                color=COLORS.primary,
+                opacity=0.7,
+            ),
+            text=labels,
+            hovertemplate='<b>%{text}</b><br>X: %{x}<br>Y: %{y}<extra></extra>' if labels else None,
+        )
+    ])
+    
+    fig.update_layout(
+        title=title,
+        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='rgba(0,0,0,0)',
+        font=dict(family="Inter", color=COLORS.text_secondary),
+        height=height,
+        margin=dict(l=40, r=20, t=40, b=40),
+        xaxis=dict(
+            showgrid=True,
+            gridcolor=COLORS.border,
+            showline=True,
+            linecolor=COLORS.border,
+        ),
+        yaxis=dict(
+            showgrid=True,
+            gridcolor=COLORS.border,
+            showline=True,
+            linecolor=COLORS.border,
+        ),
+    )
+    
+    st.plotly_chart(fig, use_container_width=True)
+
+
+def heatmap(data: List[List[float]], x_labels: List[str], y_labels: List[str], title: str = "", height: int = 400):
+    """Styled heatmap."""
+    fig = go.Figure(data=[
+        go.Heatmap(
+            z=data,
+            x=x_labels,
+            y=y_labels,
+            colorscale=[
+                [0, COLORS.bg_hover],
+                [0.5, COLORS.primary],
+                [1, COLORS.cyan],
+            ],
+        )
+    ])
+    
+    fig.update_layout(
+        title=title,
+        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='rgba(0,0,0,0)',
+        font=dict(family="Inter", color=COLORS.text_secondary),
+        height=height,
+        margin=dict(l=80, r=20, t=40, b=60),
+    )
+    
+    st.plotly_chart(fig, use_container_width=True)
+
+
+# === Data Display ===
+
+def data_table(data: List[Dict], columns: List[str] = None):
+    """Styled data table."""
+    import pandas as pd
+    df = pd.DataFrame(data)
+    if columns:
+        df = df[columns]
+    st.dataframe(df, use_container_width=True, hide_index=True)
+
+
+# === States ===
+
+def empty_state(icon: str = "📭", title: str = "No Data", description: str = ""):
+    """Empty state placeholder."""
+    st.markdown(f"""
+    <div class="empty">
+        <div class="empty-icon">{icon}</div>
+        <div class="empty-title">{title}</div>
+        <div class="empty-desc">{description}</div>
+    </div>
+    """, unsafe_allow_html=True)
+
+
+def loading_state(message: str = "Loading..."):
+    """Loading state with spinner."""
+    st.markdown(f"""
+    <div class="loading">
+        <div class="spinner"></div>
+        <div class="loading-text">{message}</div>
+    </div>
+    """, unsafe_allow_html=True)
+
+
+# === Molecule Display ===
+
+def molecule_2d(smiles: str, size: int = 200):
+    """Display 2D molecule structure from SMILES."""
+    try:
+        from rdkit import Chem
+        from rdkit.Chem import Draw
+        import base64
+        from io import BytesIO
+        
+        mol = Chem.MolFromSmiles(smiles)
+        if mol:
+            img = Draw.MolToImage(mol, size=(size, size))
+            buffered = BytesIO()
+            img.save(buffered, format="PNG")
+            img_str = base64.b64encode(buffered.getvalue()).decode()
+            
+            st.markdown(f"""
+            <div class="mol-container">
+                <img src="data:image/png;base64,{img_str}" alt="Molecule" style="max-width: 100%; height: auto;">
+            </div>
+            """, unsafe_allow_html=True)
+        else:
+            st.warning("Invalid SMILES")
+    except ImportError:
+        st.info(f"SMILES: `{smiles}`")
+
+
+# === Evidence & Links ===
+
+def evidence_row(items: List[Dict[str, str]]):
+    """Row of evidence/source links."""
+    html = '<div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem;">'
+    for item in items:
+        icon = item.get('icon', '📄')
+        label = item.get('label', 'Source')
+        url = item.get('url', '#')
+        html += f'''
+        <a href="{url}" target="_blank" class="evidence">
+            <span>{icon}</span>
+            <span>{label}</span>
+        </a>
+        '''
+    html += '</div>'
+    st.markdown(html, unsafe_allow_html=True)
+
+
+# === Badges ===
+
+def badge(text: str, variant: str = "primary"):
+    """Inline badge component."""
+    st.markdown(f'<span class="badge badge-{variant}">{text}</span>', unsafe_allow_html=True)
+
+
+def badge_row(badges: List[Dict[str, str]]):
+    """Row of badges."""
+    html = '<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">'
+    for b in badges:
+        text = b.get('text', '')
+        variant = b.get('variant', 'primary')
+        html += f'<span class="badge badge-{variant}">{text}</span>'
+    html += '</div>'
+    st.markdown(html, unsafe_allow_html=True)

old_ui/config.py

@@ -0,0 +1,583 @@
+"""
+BioFlow UI - Modern Design System
+==================================
+Clean, minimal, and highly usable interface.
+"""
+
+from dataclasses import dataclass
+
+
+@dataclass
+class Colors:
+    """Color palette - Modern dark theme."""
+    # Primary
+    primary: str = "#8B5CF6"
+    primary_hover: str = "#A78BFA"
+    primary_muted: str = "rgba(139, 92, 246, 0.15)"
+    
+    # Accents
+    cyan: str = "#22D3EE"
+    emerald: str = "#34D399"
+    amber: str = "#FBBF24"
+    rose: str = "#FB7185"
+    
+    # Backgrounds
+    bg_app: str = "#0C0E14"
+    bg_surface: str = "#14161E"
+    bg_elevated: str = "#1C1F2B"
+    bg_hover: str = "#252836"
+    
+    # Text
+    text_primary: str = "#F8FAFC"
+    text_secondary: str = "#A1A7BB"
+    text_muted: str = "#6B7280"
+    
+    # Borders
+    border: str = "#2A2D3A"
+    border_hover: str = "#3F4354"
+    
+    # Status
+    success: str = "#10B981"
+    warning: str = "#F59E0B"
+    error: str = "#EF4444"
+    info: str = "#3B82F6"
+
+
+COLORS = Colors()
+
+
+def get_css() -> str:
+    """Minimalist, professional CSS using string concatenation to avoid f-string issues."""
+    
+    css = """
+    <style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+    
+    :root {
+        --primary: """ + COLORS.primary + """;
+        --bg-app: """ + COLORS.bg_app + """;
+        --bg-surface: """ + COLORS.bg_surface + """;
+        --text: """ + COLORS.text_primary + """;
+        --text-muted: """ + COLORS.text_muted + """;
+        --border: """ + COLORS.border + """;
+        --radius: 12px;
+        --transition: 150ms ease;
+    }
+    
+    .stApp {
+        background: """ + COLORS.bg_app + """;
+        font-family: 'Inter', sans-serif;
+    }
+    
+    #MainMenu, footer, header { visibility: hidden; }
+    .stDeployButton { display: none; }
+    
+    ::-webkit-scrollbar { width: 6px; height: 6px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: """ + COLORS.border + """; border-radius: 3px; }
+    ::-webkit-scrollbar-thumb:hover { background: """ + COLORS.border_hover + """; }
+    
+    section[data-testid="stSidebar"] { display: none !important; }
+    
+    h1, h2, h3 {
+        font-weight: 600;
+        color: """ + COLORS.text_primary + """;
+        letter-spacing: -0.025em;
+    }
+    
+    h1 { font-size: 1.875rem; margin-bottom: 0.5rem; }
+    h2 { font-size: 1.5rem; }
+    h3 { font-size: 1.125rem; }
+    
+    p { color: """ + COLORS.text_secondary + """; line-height: 1.6; }
+    
+    .card {
+        background: """ + COLORS.bg_surface + """;
+        border: 1px solid """ + COLORS.border + """;
+        border-radius: var(--radius);
+        padding: 1.25rem;
+    }
+    
+    .metric {
+        background: """ + COLORS.bg_surface + """;
+        border: 1px solid """ + COLORS.border + """;
+        border-radius: var(--radius);
+        padding: 1.25rem;
+        transition: border-color var(--transition);
+    }
+    
+    .metric:hover { border-color: """ + COLORS.primary + """; }
+    
+    .metric-icon {
+        width: 44px;
+        height: 44px;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.375rem;
+        margin-bottom: 1rem;
+    }
+    
+    .metric-value {
+        font-size: 2rem;
+        font-weight: 700;
+        color: """ + COLORS.text_primary + """;
+        line-height: 1;
+    }
+    
+    .metric-label {
+        font-size: 0.875rem;
+        color: """ + COLORS.text_muted + """;
+        margin-top: 0.375rem;
+    }
+    
+    .metric-change {
+        display: inline-flex;
+        align-items: center;
+        font-size: 0.75rem;
+        font-weight: 500;
+        padding: 0.25rem 0.5rem;
+        border-radius: 6px;
+        margin-top: 0.5rem;
+    }
+    
+    .metric-change.up { background: rgba(16, 185, 129, 0.15); color: """ + COLORS.success + """; }
+    .metric-change.down { background: rgba(239, 68, 68, 0.15); color: """ + COLORS.error + """; }
+    
+    .stButton > button {
+        font-family: 'Inter', sans-serif;
+        font-weight: 500;
+        font-size: 0.875rem;
+        border-radius: 8px;
+        padding: 0.625rem 1.25rem;
+        transition: all var(--transition);
+        border: none;
+    }
+    
+    .stTextInput input,
+    .stTextArea textarea,
+    .stSelectbox > div > div {
+        background: """ + COLORS.bg_app + """ !important;
+        border: 1px solid """ + COLORS.border + """ !important;
+        border-radius: 10px !important;
+        color: """ + COLORS.text_primary + """ !important;
+        font-family: 'Inter', sans-serif !important;
+    }
+    
+    .stTextInput input:focus,
+    .stTextArea textarea:focus {
+        border-color: """ + COLORS.primary + """ !important;
+        box-shadow: 0 0 0 3px """ + COLORS.primary_muted + """ !important;
+    }
+    
+    .stTabs [data-baseweb="tab-list"] {
+        gap: 0;
+        background: """ + COLORS.bg_surface + """;
+        border-radius: 10px;
+        padding: 4px;
+        border: 1px solid """ + COLORS.border + """;
+    }
+    
+    .stTabs [data-baseweb="tab"] {
+        height: auto;
+        padding: 0.625rem 1.25rem;
+        border-radius: 8px;
+        font-weight: 500;
+        font-size: 0.875rem;
+        color: """ + COLORS.text_muted + """;
+        background: transparent;
+    }
+    
+    .stTabs [aria-selected="true"] {
+        background: """ + COLORS.primary + """ !important;
+        color: white !important;
+    }
+    
+    .stTabs [data-baseweb="tab-highlight"],
+    .stTabs [data-baseweb="tab-border"] { display: none; }
+    
+    .pipeline {
+        display: flex;
+        align-items: center;
+        background: """ + COLORS.bg_surface + """;
+        border: 1px solid """ + COLORS.border + """;
+        border-radius: var(--radius);
+        padding: 1.5rem;
+        gap: 0;
+    }
+    
+    .step {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        flex: 1;
+    }
+    
+    .step-dot {
+        width: 44px;
+        height: 44px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.125rem;
+        font-weight: 600;
+        transition: all var(--transition);
+    }
+    
+    .step-dot.pending {
+        background: """ + COLORS.bg_hover + """;
+        color: """ + COLORS.text_muted + """;
+        border: 2px dashed """ + COLORS.border_hover + """;
+    }
+    
+    .step-dot.active {
+        background: """ + COLORS.primary + """;
+        color: white;
+        box-shadow: 0 0 24px rgba(139, 92, 246, 0.5);
+    }
+    
+    .step-dot.done {
+        background: """ + COLORS.emerald + """;
+        color: white;
+    }
+    
+    .step-name {
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: """ + COLORS.text_muted + """;
+    }
+    
+    .step-line {
+        flex: 0.6;
+        height: 2px;
+        background: """ + COLORS.border + """;
+    }
+    
+    .step-line.done { background: """ + COLORS.emerald + """; }
+    
+    .result {
+        background: """ + COLORS.bg_surface + """;
+        border: 1px solid """ + COLORS.border + """;
+        border-radius: var(--radius);
+        padding: 1.25rem;
+        transition: all var(--transition);
+        cursor: pointer;
+    }
+    
+    .result:hover {
+        border-color: """ + COLORS.primary + """;
+        transform: translateY(-2px);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    }
+    
+    .score-high { color: """ + COLORS.emerald + """; }
+    .score-med { color: """ + COLORS.amber + """; }
+    .score-low { color: """ + COLORS.rose + """; }
+    
+    .badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 0.25rem 0.625rem;
+        border-radius: 6px;
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+    }
+    
+    .badge-primary { background: """ + COLORS.primary_muted + """; color: """ + COLORS.primary + """; }
+    .badge-success { background: rgba(16, 185, 129, 0.15); color: """ + COLORS.success + """; }
+    .badge-warning { background: rgba(245, 158, 11, 0.15); color: """ + COLORS.warning + """; }
+    .badge-error { background: rgba(239, 68, 68, 0.15); color: """ + COLORS.error + """; }
+    
+    .quick-action {
+        background: """ + COLORS.bg_surface + """;
+        border: 1px solid """ + COLORS.border + """;
+        border-radius: var(--radius);
+        padding: 1.5rem;
+        text-align: center;
+        cursor: pointer;
+        transition: all var(--transition);
+    }
+    
+    .quick-action:hover {
+        border-color: """ + COLORS.primary + """;
+        transform: translateY(-4px);
+        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
+    }
+    
+    .quick-action-icon {
+        font-size: 2.5rem;
+        margin-bottom: 0.75rem;
+        display: block;
+    }
+    
+    .quick-action-title {
+        font-size: 0.9375rem;
+        font-weight: 600;
+        color: """ + COLORS.text_primary + """;
+    }
+    
+    .quick-action-desc {
+        font-size: 0.8125rem;
+        color: """ + COLORS.text_muted + """;
+        margin-top: 0.25rem;
+    }
+    
+    .section-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+    }
+    
+    .section-title {
+        font-size: 1rem;
+        font-weight: 600;
+        color: """ + COLORS.text_primary + """;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+    
+    .section-link {
+        font-size: 0.8125rem;
+        color: """ + COLORS.primary + """;
+        cursor: pointer;
+    }
+    
+    .section-link:hover { text-decoration: underline; }
+    
+    .empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 4rem 2rem;
+        text-align: center;
+    }
+    
+    .empty-icon { font-size: 3.5rem; margin-bottom: 1rem; opacity: 0.4; }
+    .empty-title { font-size: 1.125rem; font-weight: 600; color: """ + COLORS.text_primary + """; }
+    .empty-desc { font-size: 0.9375rem; color: """ + COLORS.text_muted + """; max-width: 320px; margin-top: 0.5rem; }
+    
+    .loading {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 3rem;
+    }
+    
+    .spinner {
+        width: 40px;
+        height: 40px;
+        border: 3px solid """ + COLORS.border + """;
+        border-top-color: """ + COLORS.primary + """;
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+    }
+    
+    @keyframes spin { to { transform: rotate(360deg); } }
+    
+    .loading-text {
+        margin-top: 1rem;
+        color: """ + COLORS.text_muted + """;
+        font-size: 0.875rem;
+    }
+    
+    .stProgress > div > div > div {
+        background: linear-gradient(90deg, """ + COLORS.primary + """ 0%, """ + COLORS.cyan + """ 100%);
+        border-radius: 4px;
+    }
+    
+    .stProgress > div > div {
+        background: """ + COLORS.bg_hover + """;
+        border-radius: 4px;
+    }
+    
+    .divider {
+        height: 1px;
+        background: """ + COLORS.border + """;
+        margin: 1.5rem 0;
+    }
+    
+    .mol-container {
+        background: white;
+        border-radius: 10px;
+        padding: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .evidence {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.5rem 0.75rem;
+        background: """ + COLORS.bg_app + """;
+        border: 1px solid """ + COLORS.border + """;
+        border-radius: 8px;
+        font-size: 0.8125rem;
+        color: """ + COLORS.text_secondary + """;
+        transition: all var(--transition);
+        text-decoration: none;
+    }
+    
+    .evidence:hover {
+        border-color: """ + COLORS.primary + """;
+        color: """ + COLORS.primary + """;
+    }
+    
+    .stAlert { border-radius: 10px; border: none; }
+    
+    .stDataFrame {
+        border-radius: var(--radius);
+        overflow: hidden;
+        border: 1px solid """ + COLORS.border + """;
+    }
+
+    .block-container {
+        padding-top: 1.25rem;
+    }
+
+    .nav-rail {
+        position: sticky;
+        top: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        padding: 1rem;
+        background: """ + COLORS.bg_surface + """;
+        border: 1px solid """ + COLORS.border + """;
+        border-radius: 16px;
+        margin-bottom: 1rem;
+    }
+
+    .nav-brand {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid """ + COLORS.border + """;
+    }
+
+    .nav-logo { font-size: 1.5rem; }
+
+    .nav-title {
+        font-size: 1.1rem;
+        font-weight: 700;
+        color: """ + COLORS.text_primary + """;
+    }
+
+    .nav-title span {
+        background: linear-gradient(135deg, """ + COLORS.primary + """ 0%, """ + COLORS.cyan + """ 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    .nav-section {
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        color: """ + COLORS.text_muted + """;
+    }
+
+    div[data-testid="stRadio"] {
+        background: """ + COLORS.bg_surface + """;
+        border: 1px solid """ + COLORS.border + """;
+        border-radius: 16px;
+        padding: 0.75rem;
+    }
+
+    div[data-testid="stRadio"] div[role="radiogroup"] {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        margin-top: 0.25rem;
+    }
+
+    div[data-testid="stRadio"] input {
+        display: none !important;
+    }
+
+    div[data-testid="stRadio"] label {
+        background: """ + COLORS.bg_app + """;
+        border: 1px solid """ + COLORS.border + """;
+        border-radius: 12px;
+        padding: 0.65rem 0.9rem;
+        font-weight: 500;
+        color: """ + COLORS.text_secondary + """;
+        transition: all var(--transition);
+        margin: 0 !important;
+    }
+
+    div[data-testid="stRadio"] label:hover {
+        border-color: """ + COLORS.primary + """;
+        color: """ + COLORS.text_primary + """;
+    }
+
+    div[data-testid="stRadio"] label:has(input:checked) {
+        background: """ + COLORS.primary + """;
+        border-color: """ + COLORS.primary + """;
+        color: white;
+        box-shadow: 0 8px 20px rgba(139, 92, 246, 0.25);
+    }
+
+    .hero {
+        position: relative;
+        background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(34, 211, 238, 0.08) 100%);
+        border: 1px solid """ + COLORS.border + """;
+        border-radius: 20px;
+        padding: 2.75rem;
+        overflow: hidden;
+    }
+
+    .hero-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.35rem 0.75rem;
+        border-radius: 999px;
+        background: """ + COLORS.primary_muted + """;
+        color: """ + COLORS.primary + """;
+        font-size: 0.75rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+    }
+
+    .hero-title {
+        font-size: 2.25rem;
+        font-weight: 700;
+        color: """ + COLORS.text_primary + """;
+        margin-top: 1rem;
+        line-height: 1.1;
+    }
+
+    .hero-subtitle {
+        font-size: 1rem;
+        color: """ + COLORS.text_muted + """;
+        margin-top: 0.75rem;
+        max-width: 560px;
+    }
+
+    .hero-actions {
+        display: flex;
+        gap: 0.75rem;
+        margin-top: 1.5rem;
+        flex-wrap: wrap;
+    }
+
+    .hero-card {
+        background: """ + COLORS.bg_surface + """;
+        border: 1px solid """ + COLORS.border + """;
+        border-radius: 16px;
+        padding: 1.5rem;
+    }
+    </style>
+    """
+    
+    return css

old_ui/pages/__init__.py

@@ -0,0 +1,5 @@
+"""Page exports."""
+
+from bioflow.ui.pages import home, discovery, explorer, data, settings
+
+__all__ = ["home", "discovery", "explorer", "data", "settings"]

old_ui/pages/data.py

@@ -0,0 +1,163 @@
+"""
+BioFlow - Data Page
+===================
+Data management and upload.
+"""
+
+import streamlit as st
+import sys
+import os
+import pandas as pd
+import numpy as np
+
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))))
+
+from bioflow.ui.components import (
+    page_header, section_header, divider, spacer,
+    metric_card, data_table, empty_state
+)
+from bioflow.ui.config import COLORS
+
+
+def render():
+    """Render data page."""
+    
+    page_header("Data Management", "Upload, manage, and organize your datasets", "📊")
+    
+    # Stats Row
+    cols = st.columns(4)
+    
+    with cols[0]:
+        metric_card("5", "Datasets", "📁", color=COLORS.primary)
+    with cols[1]:
+        metric_card("24.5K", "Molecules", "🧪", color=COLORS.cyan)
+    with cols[2]:
+        metric_card("1.2K", "Proteins", "🧬", color=COLORS.emerald)
+    with cols[3]:
+        metric_card("156 MB", "Storage Used", "💾", color=COLORS.amber)
+    
+    spacer("2rem")
+    
+    # Tabs
+    tabs = st.tabs(["📁 Datasets", "📤 Upload", "🔧 Processing"])
+    
+    with tabs[0]:
+        section_header("Your Datasets", "📁")
+        
+        # Dataset list
+        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"},
+        ]
+        
+        for ds in datasets:
+            st.markdown(f"""
+            <div class="card" style="margin-bottom: 0.75rem;">
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <div>
+                        <div style="font-weight: 600; color: {COLORS.text_primary};">{ds["name"]}</div>
+                        <div style="display: flex; gap: 1.5rem; margin-top: 0.5rem;">
+                            <span style="font-size: 0.8125rem; color: {COLORS.text_muted};">
+                                <span style="color: {COLORS.primary};">●</span> {ds["type"]}
+                            </span>
+                            <span style="font-size: 0.8125rem; color: {COLORS.text_muted};">{ds["count"]} items</span>
+                            <span style="font-size: 0.8125rem; color: {COLORS.text_muted};">{ds["size"]}</span>
+                            <span style="font-size: 0.8125rem; color: {COLORS.text_muted};">Updated: {ds["updated"]}</span>
+                        </div>
+                    </div>
+                    <div style="display: flex; gap: 0.5rem;">
+                        <span class="badge badge-primary">{ds["type"]}</span>
+                    </div>
+                </div>
+            </div>
+            """, unsafe_allow_html=True)
+            
+            # Action buttons
+            btn_cols = st.columns([1, 1, 1, 4])
+            with btn_cols[0]:
+                st.button("View", key=f"view_{ds['name']}", use_container_width=True)
+            with btn_cols[1]:
+                st.button("Export", key=f"export_{ds['name']}", use_container_width=True)
+            with btn_cols[2]:
+                st.button("Delete", key=f"delete_{ds['name']}", use_container_width=True)
+            
+            spacer("0.5rem")
+    
+    with tabs[1]:
+        section_header("Upload New Data", "📤")
+        
+        # Upload area
+        st.markdown(f"""
+        <div style="
+            border: 2px dashed {COLORS.border};
+            border-radius: 16px;
+            padding: 3rem;
+            text-align: center;
+            background: {COLORS.bg_surface};
+        ">
+            <div style="font-size: 3rem; margin-bottom: 1rem;">📁</div>
+            <div style="font-size: 1.125rem; font-weight: 600; color: {COLORS.text_primary};">
+                Drag & drop files here
+            </div>
+            <div style="font-size: 0.875rem; color: {COLORS.text_muted}; margin-top: 0.5rem;">
+                or click to browse
+            </div>
+            <div style="font-size: 0.75rem; color: {COLORS.text_muted}; margin-top: 1rem;">
+                Supports: CSV, SDF, FASTA, PDB, JSON
+            </div>
+        </div>
+        """, unsafe_allow_html=True)
+        
+        uploaded_file = st.file_uploader(
+            "Upload file",
+            type=["csv", "sdf", "fasta", "pdb", "json"],
+            label_visibility="collapsed"
+        )
+        
+        if uploaded_file:
+            st.success(f"✓ File uploaded: {uploaded_file.name}")
+            
+            col1, col2 = st.columns(2)
+            with col1:
+                dataset_name = st.text_input("Dataset Name", value=uploaded_file.name.split('.')[0])
+            with col2:
+                data_type = st.selectbox("Data Type", ["Molecules", "Proteins", "Text"])
+            
+            if st.button("Process & Import", type="primary", use_container_width=True):
+                with st.spinner("Processing..."):
+                    import time
+                    time.sleep(2)
+                st.success("✓ Dataset imported successfully!")
+    
+    with tabs[2]:
+        section_header("Data Processing", "🔧")
+        
+        st.markdown(f"""
+        <div class="card">
+            <div style="font-weight: 600; color: {COLORS.text_primary}; margin-bottom: 0.75rem;">
+                Available Operations
+            </div>
+        </div>
+        """, unsafe_allow_html=True)
+        
+        operations = [
+            {"icon": "🧹", "name": "Clean & Validate", "desc": "Remove duplicates, fix invalid structures"},
+            {"icon": "🔢", "name": "Compute Descriptors", "desc": "Calculate molecular properties and fingerprints"},
+            {"icon": "🧠", "name": "Generate Embeddings", "desc": "Create vector representations using AI models"},
+            {"icon": "🔗", "name": "Merge Datasets", "desc": "Combine multiple datasets with deduplication"},
+        ]
+        
+        for op in operations:
+            st.markdown(f"""
+            <div class="quick-action" style="margin-bottom: 0.75rem; text-align: left;">
+                <div style="display: flex; align-items: center; gap: 1rem;">
+                    <span style="font-size: 1.5rem;">{op["icon"]}</span>
+                    <div>
+                        <div style="font-weight: 600; color: {COLORS.text_primary};">{op["name"]}</div>
+                        <div style="font-size: 0.8125rem; color: {COLORS.text_muted};">{op["desc"]}</div>
+                    </div>
+                </div>
+            </div>
+            """, unsafe_allow_html=True)
+            st.button(f"Run {op['name']}", key=f"op_{op['name']}", use_container_width=True)

old_ui/pages/discovery.py

@@ -0,0 +1,165 @@
+"""
+BioFlow - Discovery Page
+========================
+Drug discovery pipeline interface.
+"""
+
+import streamlit as st
+import sys
+import os
+
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))))
+
+from bioflow.ui.components import (
+    page_header, section_header, divider, spacer,
+    pipeline_progress, bar_chart, empty_state, loading_state
+)
+from bioflow.ui.config import COLORS
+
+
+def render():
+    """Render discovery page."""
+    
+    page_header("Drug Discovery", "Search for drug candidates with AI-powered analysis", "🔬")
+    
+    # Query Input Section
+    st.markdown(f"""
+    <div class="card" style="margin-bottom: 1.5rem;">
+        <div style="font-size: 0.875rem; font-weight: 600; color: {COLORS.text_primary}; margin-bottom: 0.75rem;">
+            Search Query
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    col1, col2 = st.columns([3, 1])
+    
+    with col1:
+        query = st.text_area(
+            "Query",
+            placeholder="Enter a natural language query, SMILES string, or FASTA sequence...",
+            height=100,
+            label_visibility="collapsed"
+        )
+    
+    with col2:
+        st.selectbox("Search Type", ["Similarity", "Binding Affinity", "Properties"], label_visibility="collapsed")
+        st.selectbox("Database", ["All", "DrugBank", "ChEMBL", "ZINC"], label_visibility="collapsed")
+        search_clicked = st.button("🔍 Search", type="primary", use_container_width=True)
+    
+    spacer("1.5rem")
+    
+    # Pipeline Progress
+    section_header("Pipeline Status", "🔄")
+    
+    if "discovery_step" not in st.session_state:
+        st.session_state.discovery_step = 0
+    
+    steps = [
+        {"name": "Input", "status": "done" if st.session_state.discovery_step > 0 else "active"},
+        {"name": "Encode", "status": "done" if st.session_state.discovery_step > 1 else ("active" if st.session_state.discovery_step == 1 else "pending")},
+        {"name": "Search", "status": "done" if st.session_state.discovery_step > 2 else ("active" if st.session_state.discovery_step == 2 else "pending")},
+        {"name": "Predict", "status": "done" if st.session_state.discovery_step > 3 else ("active" if st.session_state.discovery_step == 3 else "pending")},
+        {"name": "Results", "status": "active" if st.session_state.discovery_step == 4 else "pending"},
+    ]
+    
+    pipeline_progress(steps)
+    
+    spacer("2rem")
+    divider()
+    spacer("2rem")
+    
+    # Results Section
+    section_header("Results", "🎯")
+    
+    if search_clicked and query:
+        st.session_state.discovery_step = 4
+        st.session_state.discovery_query = query
+    
+    if st.session_state.discovery_step >= 4:
+        # Show results
+        tabs = st.tabs(["Top Candidates", "Property Analysis", "Evidence"])
+        
+        with tabs[0]:
+            # Results list
+            results = [
+                {"name": "Candidate A", "score": 0.95, "mw": "342.4", "logp": "2.1", "hbd": "2"},
+                {"name": "Candidate B", "score": 0.89, "mw": "298.3", "logp": "1.8", "hbd": "3"},
+                {"name": "Candidate C", "score": 0.82, "mw": "415.5", "logp": "3.2", "hbd": "1"},
+                {"name": "Candidate D", "score": 0.76, "mw": "267.3", "logp": "1.5", "hbd": "2"},
+                {"name": "Candidate E", "score": 0.71, "mw": "389.4", "logp": "2.8", "hbd": "2"},
+            ]
+            
+            for r in results:
+                score_color = COLORS.emerald if r["score"] >= 0.8 else (COLORS.amber if r["score"] >= 0.5 else COLORS.rose)
+                st.markdown(f"""
+                <div class="result">
+                    <div style="display: flex; justify-content: space-between; align-items: flex-start;">
+                        <div>
+                            <div style="font-weight: 600; color: {COLORS.text_primary};">{r["name"]}</div>
+                            <div style="display: flex; gap: 1rem; margin-top: 0.5rem;">
+                                <span style="font-size: 0.8125rem; color: {COLORS.text_muted};">MW: {r["mw"]}</span>
+                                <span style="font-size: 0.8125rem; color: {COLORS.text_muted};">LogP: {r["logp"]}</span>
+                                <span style="font-size: 0.8125rem; color: {COLORS.text_muted};">HBD: {r["hbd"]}</span>
+                            </div>
+                        </div>
+                        <div style="font-size: 1.5rem; font-weight: 700; color: {score_color};">{r["score"]:.0%}</div>
+                    </div>
+                </div>
+                """, unsafe_allow_html=True)
+                spacer("0.75rem")
+        
+        with tabs[1]:
+            # Property distribution
+            col1, col2 = st.columns(2)
+            
+            with col1:
+                bar_chart(
+                    {"<200": 5, "200-300": 12, "300-400": 8, "400-500": 3, ">500": 2},
+                    title="Molecular Weight Distribution",
+                    height=250
+                )
+            
+            with col2:
+                bar_chart(
+                    {"<1": 4, "1-2": 10, "2-3": 8, "3-4": 5, ">4": 3},
+                    title="LogP Distribution",
+                    height=250
+                )
+        
+        with tabs[2]:
+            # Evidence
+            st.markdown(f"""
+            <div class="card">
+                <div style="font-weight: 600; color: {COLORS.text_primary}; margin-bottom: 1rem;">
+                    Related Literature
+                </div>
+            </div>
+            """, unsafe_allow_html=True)
+            
+            papers = [
+                {"title": "Novel therapeutic targets for cancer treatment", "year": "2024", "journal": "Nature Medicine"},
+                {"title": "Molecular docking studies of kinase inhibitors", "year": "2023", "journal": "J. Med. Chem."},
+                {"title": "AI-driven drug discovery approaches", "year": "2024", "journal": "Drug Discovery Today"},
+            ]
+            
+            for p in papers:
+                st.markdown(f"""
+                <div style="
+                    padding: 1rem;
+                    border: 1px solid {COLORS.border};
+                    border-radius: 8px;
+                    margin-bottom: 0.75rem;
+                ">
+                    <div style="font-weight: 500; color: {COLORS.text_primary};">{p["title"]}</div>
+                    <div style="font-size: 0.8125rem; color: {COLORS.text_muted}; margin-top: 0.25rem;">
+                        {p["journal"]} • {p["year"]}
+                    </div>
+                </div>
+                """, unsafe_allow_html=True)
+    
+    else:
+        empty_state(
+            "🔍",
+            "No Results Yet",
+            "Enter a query and click Search to find drug candidates"
+        )

old_ui/pages/explorer.py

@@ -0,0 +1,127 @@
+"""
+BioFlow - Explorer Page
+=======================
+Data exploration and visualization.
+"""
+
+import streamlit as st
+import sys
+import os
+import numpy as np
+
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))))
+
+from bioflow.ui.components import (
+    page_header, section_header, divider, spacer,
+    scatter_chart, heatmap, metric_card, empty_state
+)
+from bioflow.ui.config import COLORS
+
+
+def render():
+    """Render explorer page."""
+    
+    page_header("Data Explorer", "Visualize molecular embeddings and relationships", "🧬")
+    
+    # Controls
+    col1, col2, col3, col4 = st.columns(4)
+    
+    with col1:
+        dataset = st.selectbox("Dataset", ["DrugBank", "ChEMBL", "ZINC", "Custom"])
+    with col2:
+        viz_type = st.selectbox("Visualization", ["UMAP", "t-SNE", "PCA"])
+    with col3:
+        color_by = st.selectbox("Color by", ["Activity", "MW", "LogP", "Cluster"])
+    with col4:
+        st.write("")  # Spacing
+        st.write("")
+        if st.button("🔄 Refresh", use_container_width=True):
+            st.rerun()
+    
+    spacer("1.5rem")
+    
+    # Main visualization area
+    col_viz, col_details = st.columns([2, 1])
+    
+    with col_viz:
+        section_header("Embedding Space", "🗺️")
+        
+        # Generate sample data
+        np.random.seed(42)
+        n_points = 200
+        
+        # Create clusters
+        cluster1_x = np.random.normal(2, 0.8, n_points // 4)
+        cluster1_y = np.random.normal(3, 0.8, n_points // 4)
+        
+        cluster2_x = np.random.normal(-2, 1, n_points // 4)
+        cluster2_y = np.random.normal(-1, 1, n_points // 4)
+        
+        cluster3_x = np.random.normal(4, 0.6, n_points // 4)
+        cluster3_y = np.random.normal(-2, 0.6, n_points // 4)
+        
+        cluster4_x = np.random.normal(-1, 0.9, n_points // 4)
+        cluster4_y = np.random.normal(4, 0.9, n_points // 4)
+        
+        x = list(cluster1_x) + list(cluster2_x) + list(cluster3_x) + list(cluster4_x)
+        y = list(cluster1_y) + list(cluster2_y) + list(cluster3_y) + list(cluster4_y)
+        labels = [f"Mol_{i}" for i in range(n_points)]
+        
+        scatter_chart(x, y, labels, title=f"{viz_type} Projection - {dataset}", height=450)
+    
+    with col_details:
+        section_header("Statistics", "📊")
+        
+        metric_card("12,450", "Total Molecules", "🧪", color=COLORS.primary)
+        spacer("0.75rem")
+        metric_card("4", "Clusters Found", "🎯", color=COLORS.cyan)
+        spacer("0.75rem")
+        metric_card("0.89", "Silhouette Score", "📈", color=COLORS.emerald)
+        spacer("0.75rem")
+        metric_card("85%", "Coverage", "✓", color=COLORS.amber)
+    
+    spacer("2rem")
+    divider()
+    spacer("2rem")
+    
+    # Similarity Heatmap
+    section_header("Similarity Matrix", "🔥")
+    
+    # Sample similarity matrix
+    np.random.seed(123)
+    labels_short = ["Cluster A", "Cluster B", "Cluster C", "Cluster D", "Cluster E"]
+    similarity = np.random.uniform(0.3, 1.0, (5, 5))
+    similarity = (similarity + similarity.T) / 2  # Make symmetric
+    np.fill_diagonal(similarity, 1.0)
+    
+    heatmap(
+        similarity.tolist(),
+        labels_short,
+        labels_short,
+        title="Inter-cluster Similarity",
+        height=350
+    )
+    
+    spacer("2rem")
+    
+    # Export options
+    st.markdown(f"""
+    <div class="card">
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+            <div>
+                <div style="font-weight: 600; color: {COLORS.text_primary};">Export Data</div>
+                <div style="font-size: 0.8125rem; color: {COLORS.text_muted}; margin-top: 0.25rem;">
+                    Download embeddings, clusters, or full dataset
+                </div>
+            </div>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    exp_cols = st.columns(3)
+    with exp_cols[0]:
+        st.button("📥 Embeddings (CSV)", use_container_width=True)
+    with exp_cols[1]:
+        st.button("📥 Clusters (JSON)", use_container_width=True)
+    with exp_cols[2]:
+        st.button("📥 Full Dataset", use_container_width=True)

old_ui/pages/home.py

@@ -0,0 +1,213 @@
+"""
+BioFlow - Home Page
+====================
+Clean dashboard with key metrics and quick actions.
+"""
+
+import streamlit as st
+import sys
+import os
+
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))))
+
+from bioflow.ui.components import (
+    section_header, divider, spacer,
+    metric_card, pipeline_progress, bar_chart
+)
+from bioflow.ui.config import COLORS
+
+
+def render():
+    """Render home page."""
+    
+    # Hero Section (Tailark-inspired)
+    hero_col, hero_side = st.columns([3, 1.4])
+    
+    with hero_col:
+        st.markdown(f"""
+        <div class="hero">
+            <div class="hero-badge">New • BioFlow 2.0</div>
+            <div class="hero-title">AI-Powered Drug Discovery</div>
+            <div class="hero-subtitle">
+                Run discovery pipelines, predict binding, and surface evidence in one streamlined workspace.
+            </div>
+            <div class="hero-actions">
+                <span class="badge badge-primary">Model-aware search</span>
+                <span class="badge badge-success">Evidence-linked</span>
+                <span class="badge badge-warning">Fast iteration</span>
+            </div>
+        </div>
+        """, unsafe_allow_html=True)
+        
+        spacer("0.75rem")
+        btn1, btn2 = st.columns(2)
+        with btn1:
+            if st.button("Start Discovery", type="primary", use_container_width=True):
+                st.session_state.current_page = "discovery"
+                st.rerun()
+        with btn2:
+            if st.button("Explore Data", use_container_width=True):
+                st.session_state.current_page = "explorer"
+                st.rerun()
+    
+    with hero_side:
+        st.markdown(f"""
+        <div class="hero-card">
+            <div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: {COLORS.text_muted};">
+                Today
+            </div>
+            <div style="font-size: 1.75rem; font-weight: 700; color: {COLORS.text_primary}; margin-top: 0.5rem;">
+                156 Discoveries
+            </div>
+            <div style="font-size: 0.875rem; color: {COLORS.text_muted}; margin-top: 0.5rem;">
+                +12% vs last week
+            </div>
+            <div class="divider" style="margin: 1rem 0;"></div>
+            <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+                <span class="badge badge-primary">Discovery</span>
+                <span class="badge badge-success">Prediction</span>
+                <span class="badge badge-warning">Evidence</span>
+            </div>
+        </div>
+        """, unsafe_allow_html=True)
+    
+    # Metrics Row
+    cols = st.columns(4)
+    
+    with cols[0]:
+        metric_card("12.5M", "Molecules", "🧪", "+2.3%", "up", COLORS.primary)
+    with cols[1]:
+        metric_card("847K", "Proteins", "🧬", "+1.8%", "up", COLORS.cyan)
+    with cols[2]:
+        metric_card("1.2M", "Papers", "📚", "+5.2%", "up", COLORS.emerald)
+    with cols[3]:
+        metric_card("156", "Discoveries", "✨", "+12%", "up", COLORS.amber)
+    
+    spacer("2rem")
+    
+    # Quick Actions
+    section_header("Quick Actions", "⚡")
+    
+    action_cols = st.columns(4)
+    
+    with action_cols[0]:
+        st.markdown(f"""
+        <div class="quick-action">
+            <span class="quick-action-icon">🔍</span>
+            <div class="quick-action-title">New Discovery</div>
+            <div class="quick-action-desc">Start a pipeline</div>
+        </div>
+        """, unsafe_allow_html=True)
+        if st.button("Start", key="qa_discovery", use_container_width=True):
+            st.session_state.current_page = "discovery"
+            st.rerun()
+    
+    with action_cols[1]:
+        st.markdown(f"""
+        <div class="quick-action">
+            <span class="quick-action-icon">📊</span>
+            <div class="quick-action-title">Explore Data</div>
+            <div class="quick-action-desc">Visualize embeddings</div>
+        </div>
+        """, unsafe_allow_html=True)
+        if st.button("Explore", key="qa_explorer", use_container_width=True):
+            st.session_state.current_page = "explorer"
+            st.rerun()
+    
+    with action_cols[2]:
+        st.markdown(f"""
+        <div class="quick-action">
+            <span class="quick-action-icon">📁</span>
+            <div class="quick-action-title">Upload Data</div>
+            <div class="quick-action-desc">Add molecules</div>
+        </div>
+        """, unsafe_allow_html=True)
+        if st.button("Upload", key="qa_data", use_container_width=True):
+            st.session_state.current_page = "data"
+            st.rerun()
+    
+    with action_cols[3]:
+        st.markdown(f"""
+        <div class="quick-action">
+            <span class="quick-action-icon">⚙️</span>
+            <div class="quick-action-title">Settings</div>
+            <div class="quick-action-desc">Configure models</div>
+        </div>
+        """, unsafe_allow_html=True)
+        if st.button("Configure", key="qa_settings", use_container_width=True):
+            st.session_state.current_page = "settings"
+            st.rerun()
+    
+    spacer("2rem")
+    divider()
+    spacer("2rem")
+    
+    # Two Column Layout
+    col1, col2 = st.columns([3, 2])
+    
+    with col1:
+        section_header("Recent Discoveries", "🎯")
+        
+        # Sample results
+        results = [
+            {"name": "Aspirin analog", "score": 0.94, "mw": "180.16"},
+            {"name": "Novel kinase inhibitor", "score": 0.87, "mw": "331.39"},
+            {"name": "EGFR binder candidate", "score": 0.72, "mw": "311.38"},
+        ]
+        
+        for r in results:
+            score_color = COLORS.emerald if r["score"] >= 0.8 else (COLORS.amber if r["score"] >= 0.5 else COLORS.rose)
+            st.markdown(f"""
+            <div class="result">
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <div style="font-weight: 600; color: {COLORS.text_primary};">{r["name"]}</div>
+                    <div style="font-size: 1.25rem; font-weight: 700; color: {score_color};">{r["score"]:.0%}</div>
+                </div>
+                <div style="font-size: 0.8125rem; color: {COLORS.text_muted}; margin-top: 0.5rem;">
+                    MW: {r["mw"]}
+                </div>
+            </div>
+            """, unsafe_allow_html=True)
+            spacer("0.75rem")
+    
+    with col2:
+        section_header("Pipeline Activity", "📈")
+        
+        bar_chart(
+            {"Mon": 23, "Tue": 31, "Wed": 28, "Thu": 45, "Fri": 38, "Sat": 12, "Sun": 8},
+            title="",
+            height=250
+        )
+        
+        spacer("1rem")
+        section_header("Active Pipeline", "🔄")
+        
+        pipeline_progress([
+            {"name": "Encode", "status": "done"},
+            {"name": "Search", "status": "active"},
+            {"name": "Predict", "status": "pending"},
+            {"name": "Verify", "status": "pending"},
+        ])
+    
+    spacer("2rem")
+    
+    # Tip
+    st.markdown(f"""
+    <div style="
+        background: {COLORS.bg_surface};
+        border: 1px solid {COLORS.border};
+        border-radius: 12px;
+        padding: 1.25rem;
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    ">
+        <span style="font-size: 1.5rem;">💡</span>
+        <div>
+            <div style="font-size: 0.9375rem; color: {COLORS.text_primary}; font-weight: 500;">Pro Tip</div>
+            <div style="font-size: 0.8125rem; color: {COLORS.text_muted};">
+                Use natural language like "Find molecules similar to aspirin that can cross the blood-brain barrier"
+            </div>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)

old_ui/pages/settings.py

@@ -0,0 +1,192 @@
+"""
+BioFlow - Settings Page
+========================
+Configuration and preferences.
+"""
+
+import streamlit as st
+import sys
+import os
+
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))))
+
+from bioflow.ui.components import page_header, section_header, divider, spacer
+from bioflow.ui.config import COLORS
+
+
+def render():
+    """Render settings page."""
+    
+    page_header("Settings", "Configure models, databases, and preferences", "⚙️")
+    
+    # Tabs for different settings sections
+    tabs = st.tabs(["🧠 Models", "🗄️ Database", "🔌 API Keys", "🎨 Appearance"])
+    
+    with tabs[0]:
+        section_header("Model Configuration", "🧠")
+        
+        st.markdown(f"""
+        <div class="card" style="margin-bottom: 1rem;">
+            <div style="font-weight: 600; color: {COLORS.text_primary}; margin-bottom: 0.5rem;">
+                Embedding Models
+            </div>
+            <div style="font-size: 0.8125rem; color: {COLORS.text_muted};">
+                Configure models used for molecular and protein embeddings
+            </div>
+        </div>
+        """, unsafe_allow_html=True)
+        
+        col1, col2 = st.columns(2)
+        
+        with col1:
+            st.selectbox(
+                "Molecule Encoder",
+                ["MolCLR (Recommended)", "ChemBERTa", "GraphMVP", "MolBERT"],
+                help="Model for generating molecular embeddings"
+            )
+            
+            st.selectbox(
+                "Protein Encoder", 
+                ["ESM-2 (Recommended)", "ProtTrans", "UniRep", "SeqVec"],
+                help="Model for generating protein embeddings"
+            )
+        
+        with col2:
+            st.selectbox(
+                "Binding Predictor",
+                ["DrugBAN (Recommended)", "DeepDTA", "GraphDTA", "Custom"],
+                help="Model for predicting drug-target binding"
+            )
+            
+            st.selectbox(
+                "Property Predictor",
+                ["ADMET-AI (Recommended)", "ChemProp", "Custom"],
+                help="Model for ADMET property prediction"
+            )
+        
+        spacer("1rem")
+        
+        st.markdown(f"""
+        <div class="card" style="margin-bottom: 1rem;">
+            <div style="font-weight: 600; color: {COLORS.text_primary}; margin-bottom: 0.5rem;">
+                LLM Settings
+            </div>
+            <div style="font-size: 0.8125rem; color: {COLORS.text_muted};">
+                Configure language models for evidence retrieval and reasoning
+            </div>
+        </div>
+        """, unsafe_allow_html=True)
+        
+        col1, col2 = st.columns(2)
+        
+        with col1:
+            st.selectbox(
+                "LLM Provider",
+                ["OpenAI", "Anthropic", "Local (Ollama)", "Azure OpenAI"]
+            )
+        
+        with col2:
+            st.selectbox(
+                "Model",
+                ["GPT-4o", "GPT-4-turbo", "Claude 3.5 Sonnet", "Llama 3.1 70B"]
+            )
+        
+        st.slider("Temperature", 0.0, 1.0, 0.7, 0.1)
+        st.number_input("Max Tokens", 100, 4096, 2048, 100)
+    
+    with tabs[1]:
+        section_header("Database Configuration", "🗄️")
+        
+        st.markdown(f"""
+        <div class="card" style="margin-bottom: 1rem;">
+            <div style="font-weight: 600; color: {COLORS.text_primary}; margin-bottom: 0.5rem;">
+                Vector Database
+            </div>
+            <div style="font-size: 0.8125rem; color: {COLORS.text_muted};">
+                Configure the vector store for similarity search
+            </div>
+        </div>
+        """, unsafe_allow_html=True)
+        
+        col1, col2 = st.columns(2)
+        
+        with col1:
+            st.selectbox("Vector Store", ["Qdrant (Recommended)", "Milvus", "Pinecone", "Weaviate", "ChromaDB"])
+            st.text_input("Host", value="localhost")
+        
+        with col2:
+            st.number_input("Port", 1, 65535, 6333)
+            st.text_input("Collection Name", value="bioflow_embeddings")
+        
+        spacer("1rem")
+        
+        st.markdown(f"""
+        <div class="card" style="margin-bottom: 1rem;">
+            <div style="font-weight: 600; color: {COLORS.text_primary}; margin-bottom: 0.5rem;">
+                Knowledge Sources
+            </div>
+            <div style="font-size: 0.8125rem; color: {COLORS.text_muted};">
+                External databases for evidence retrieval
+            </div>
+        </div>
+        """, unsafe_allow_html=True)
+        
+        col1, col2 = st.columns(2)
+        
+        with col1:
+            st.checkbox("PubMed", value=True)
+            st.checkbox("DrugBank", value=True)
+            st.checkbox("ChEMBL", value=True)
+        
+        with col2:
+            st.checkbox("UniProt", value=True)
+            st.checkbox("KEGG", value=False)
+            st.checkbox("Reactome", value=False)
+    
+    with tabs[2]:
+        section_header("API Keys", "🔌")
+        
+        st.warning("⚠️ API keys are stored locally and never sent to external servers.")
+        
+        st.text_input("OpenAI API Key", type="password", placeholder="sk-...")
+        st.text_input("Anthropic API Key", type="password", placeholder="sk-ant-...")
+        st.text_input("PubMed API Key", type="password", placeholder="Optional - for higher rate limits")
+        st.text_input("ChEMBL API Key", type="password", placeholder="Optional")
+        
+        spacer("1rem")
+        
+        if st.button("💾 Save API Keys", type="primary"):
+            st.success("✓ API keys saved securely")
+    
+    with tabs[3]:
+        section_header("Appearance", "🎨")
+        
+        st.selectbox("Theme", ["Dark (Default)", "Light", "System"])
+        st.selectbox("Accent Color", ["Purple", "Blue", "Green", "Cyan", "Pink"])
+        st.checkbox("Enable animations", value=True)
+        st.checkbox("Compact mode", value=False)
+        st.slider("Font size", 12, 18, 14)
+    
+    spacer("2rem")
+    divider()
+    spacer("1rem")
+    
+    # Save buttons
+    col1, col2, col3 = st.columns([1, 1, 2])
+    
+    with col1:
+        if st.button("💾 Save Settings", type="primary", use_container_width=True):
+            st.success("✓ Settings saved successfully!")
+    
+    with col2:
+        if st.button("🔄 Reset to Defaults", use_container_width=True):
+            st.info("Settings reset to defaults")
+    
+    spacer("2rem")
+    
+    # Version info
+    st.markdown(f"""
+    <div style="text-align: center; padding: 1rem; color: {COLORS.text_muted}; font-size: 0.75rem;">
+        BioFlow v0.1.0 • Built with OpenBioMed
+    </div>
+    """, unsafe_allow_html=True)

old_ui/requirements.txt

@@ -0,0 +1,31 @@
+# BioFlow UI Dependencies
+# =======================
+
+# Core Streamlit
+streamlit>=1.29.0
+
+# Visualization
+plotly>=5.18.0
+altair>=5.2.0
+
+# Data handling
+pandas>=2.0.0
+numpy>=1.24.0
+
+# Molecular visualization (optional)
+rdkit>=2023.9.1
+py3Dmol>=2.0.0
+
+# Machine Learning (optional, for real encoders)
+# torch>=2.0.0
+# transformers>=4.35.0
+
+# Vector database
+qdrant-client>=1.7.0
+
+# Image processing
+Pillow>=10.0.0
+
+# Utilities
+python-dotenv>=1.0.0
+pyyaml>=6.0.1

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

@@ -1,22 +1,50 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# 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
 
-First, run the development server:
+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
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+-   `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.
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Tech Stack
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+-   **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.
 

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/data/page.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import { PageHeader, SectionHeader } from "@/components/page-header"
+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"
+
+export default function DataPage() {
+  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" },
+  ]
+
+  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" />} 
+      />
+
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        {[
+            { label: "Datasets", value: "5", icon: Folder, color: "text-blue-500" },
+            { label: "Molecules", value: "24.5K", icon: FileText, color: "text-cyan-500" },
+            { label: "Proteins", value: "1.2K", icon: Database, color: "text-emerald-500" },
+            { label: "Storage Used", value: "156 MB", icon: HardDrive, color: "text-amber-500" },
+        ].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.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/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/page.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import * as React from "react"
+import { PageHeader, SectionHeader } from "@/components/page-header"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Label } from "@/components/ui/label"
+import { Dna, RefreshCw, Map as MapIcon, BarChart2, Activity, Zap, Grid3X3 } from "lucide-react"
+import { ResponsiveContainer, ScatterChart, Scatter, XAxis, YAxis, ZAxis, Tooltip, Cell } from "recharts"
+
+interface DataPoint {
+    x: number;
+    y: number;
+    z: number;
+    color: string;
+    name: string;
+    affinity: number;
+}
+
+export default function ExplorerPage() {
+  const [dataset, setDataset] = React.useState("DrugBank")
+  const [visualization, setVisualization] = React.useState("UMAP")
+  const [colorBy, setColorBy] = React.useState("Activity")
+  const [data, setData] = React.useState<DataPoint[]>([])
+  
+  // Sample Data Generation
+  React.useEffect(() => {
+    const points: DataPoint[] = []
+    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)" }
+    ]
+    
+    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
+        })
+    }
+    setData(points)
+  }, [dataset]) 
+
+  return (
+    <div className="space-y-8 animate-in fade-in duration-500">
+        <PageHeader 
+            title="Data Explorer" 
+            subtitle="Visualize molecular embeddings and relationships" 
+            icon={<Dna className="h-8 w-8 text-primary" />}
+        />
+
+        <Card className="border-l-4 border-l-primary/50">
+            <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                    <Activity className="h-5 w-5" />
+                    Visualization Controls
+                </CardTitle>
+                <CardDescription>Adjust projection parameters and visual styles</CardDescription>
+            </CardHeader>
+            <CardContent className="grid grid-cols-1 md:grid-cols-4 gap-6">
+                <div className="space-y-2">
+                    <Label htmlFor="dataset">Dataset</Label>
+                    <Select value={dataset} onValueChange={setDataset}>
+                        <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={setVisualization}>
+                        <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={setColorBy}>
+                        <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="flex items-end">
+                    <Button variant="secondary" className="w-full" onClick={() => setDataset(d => d === "DrugBank" ? "ChEMBL" : "DrugBank")}>
+                        <RefreshCw className="mr-2 h-4 w-4" />
+                        Regenerate View
+                    </Button>
+                </div>
+            </CardContent>
+        </Card>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div className="lg:col-span-2 space-y-4">
+                <SectionHeader title="Embedding Space" icon={<MapIcon className="h-5 w-5 text-primary" />} />
+                <Card className="h-[500px] overflow-hidden bg-gradient-to-br from-card to-secondary/30">
+                    <CardContent className="p-4 h-full">
+                        <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 data = payload[0].payload;
+                                            return (
+                                                <div className="bg-popover border border-border p-3 rounded-lg shadow-xl text-sm">
+                                                    <p className="font-bold mb-1 text-primary">{data.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(data.x).toFixed(2)}</span>
+                                                        <span>Y:</span> <span className="text-foreground">{Number(data.y).toFixed(2)}</span>
+                                                        <span>Affinity:</span> <span className="text-foreground">{Number(data.affinity).toFixed(2)}</span>
+                                                    </div>
+                                                </div>
+                                            )
+                                        }
+                                        return null;
+                                    }} 
+                                />
+                                <Scatter name="Molecules" data={data} fill="#8884d8">
+                                    {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>
+            </div>
+
+            <div className="space-y-6">
+                 <SectionHeader title="Data Intelligence" icon={<Grid3X3 className="h-5 w-5 text-primary" />} />
+                 
+                 <div className="grid grid-cols-1 gap-4">
+                    <Card>
+                        <CardHeader className="pb-2">
+                             <CardTitle className="text-sm font-medium text-muted-foreground flex items-center justify-between">
+                                 Active Molecules
+                                 <Zap className="h-4 w-4 text-yellow-500" />
+                             </CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="text-2xl font-bold">12,450</div>
+                            <p className="text-xs text-muted-foreground mt-1">+2.5% from last month</p>
+                        </CardContent>
+                    </Card>
+                    <Card>
+                        <CardHeader className="pb-2">
+                             <CardTitle className="text-sm font-medium text-muted-foreground flex items-center justify-between">
+                                 Clusters Identified
+                                 <Grid3X3 className="h-4 w-4 text-blue-500" />
+                             </CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="text-2xl font-bold text-chart-2">4</div>
+                            <p className="text-xs text-muted-foreground mt-1">Distinct chemical series</p>
+                        </CardContent>
+                    </Card>
+                    <Card>
+                        <CardHeader className="pb-2">
+                             <CardTitle className="text-sm font-medium text-muted-foreground flex items-center justify-between">
+                                 Avg Confidence
+                                 <BarChart2 className="h-4 w-4 text-green-500" />
+                             </CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="text-2xl font-bold text-chart-3">0.89</div>
+                            <p className="text-xs text-muted-foreground mt-1">Across all predictions</p>
+                        </CardContent>
+                    </Card>
+                 </div>
+                 
+                 <div className="p-4 rounded-lg bg-secondary/50 border border-secondary">
+                     <h4 className="font-semibold mb-2 text-sm flex items-center gap-2">
+                         <Zap className="h-3 w-3 text-primary" />
+                         Quick Actions
+                     </h4>
+                     <div className="space-y-2">
+                         <Button variant="outline" size="sm" className="w-full justify-start text-xs">Exort Selection as CSV</Button>
+                         <Button variant="outline" size="sm" className="w-full justify-start text-xs">Run Clustering Analysis</Button>
+                     </div>
+                 </div>
+            </div>
+        </div>
+    </div>
+  )
+}

ui/app/globals.css

@@ -48,71 +48,71 @@
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.129 0.042 264.695);
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.145 0.02 260);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.129 0.042 264.695);
+  --card-foreground: oklch(0.145 0.02 260);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.129 0.042 264.695);
-  --primary: oklch(0.208 0.042 265.755);
-  --primary-foreground: oklch(0.984 0.003 247.858);
-  --secondary: oklch(0.968 0.007 247.896);
-  --secondary-foreground: oklch(0.208 0.042 265.755);
-  --muted: oklch(0.968 0.007 247.896);
-  --muted-foreground: oklch(0.554 0.046 257.417);
-  --accent: oklch(0.968 0.007 247.896);
-  --accent-foreground: oklch(0.208 0.042 265.755);
+  --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.929 0.013 255.508);
-  --input: oklch(0.929 0.013 255.508);
-  --ring: oklch(0.704 0.04 256.788);
+  --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.984 0.003 247.858);
-  --sidebar-foreground: oklch(0.129 0.042 264.695);
-  --sidebar-primary: oklch(0.208 0.042 265.755);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.968 0.007 247.896);
-  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
-  --sidebar-border: oklch(0.929 0.013 255.508);
-  --sidebar-ring: oklch(0.704 0.04 256.788);
+  --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.129 0.042 264.695);
-  --foreground: oklch(0.984 0.003 247.858);
-  --card: oklch(0.208 0.042 265.755);
-  --card-foreground: oklch(0.984 0.003 247.858);
-  --popover: oklch(0.208 0.042 265.755);
-  --popover-foreground: oklch(0.984 0.003 247.858);
-  --primary: oklch(0.929 0.013 255.508);
-  --primary-foreground: oklch(0.208 0.042 265.755);
-  --secondary: oklch(0.279 0.041 260.031);
-  --secondary-foreground: oklch(0.984 0.003 247.858);
-  --muted: oklch(0.279 0.041 260.031);
-  --muted-foreground: oklch(0.704 0.04 256.788);
-  --accent: oklch(0.279 0.041 260.031);
-  --accent-foreground: oklch(0.984 0.003 247.858);
+  --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(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
+  --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.208 0.042 265.755);
-  --sidebar-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.279 0.041 260.031);
-  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
+  --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 {

ui/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } 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",
@@ -13,8 +14,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "BioFlow",
+  description: "AI-Powered Drug Discovery Platform",
 };
 
 export default function RootLayout({
@@ -25,9 +26,14 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased flex h-screen overflow-hidden`}
       >
-        {children}
+        <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/page.tsx

@@ -1,65 +1,169 @@
-import Image from "next/image";
+"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="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
+    <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 className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+      </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>
-      </main>
+      </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/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/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/package.json

@@ -6,26 +6,37 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint"
+    "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",
-    "next": "16.1.4",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "next": "^16.1.4",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "recharts": "^3.7.0",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "16.1.4",
-    "tailwindcss": "^4",
+    "@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"
+    "typescript": "^5.9.3"
   }
 }

ui/pnpm-workspace.yaml

@@ -1,5 +1,2 @@
 packages:
   - .
-ignoredBuiltDependencies:
-  - sharp
-  - unrs-resolver