Add 150k model support, background computation, demo GIF, and UI improvements

README.md

@@ -12,11 +12,13 @@ Many have observed that the development and deployment of generative machine lea
 
 This interactive latent space navigator visualizes ~1.84M models from the [modelbiome/ai_ecosystem_withmodelcards](https://huggingface.co/datasets/modelbiome/ai_ecosystem_withmodelcards) dataset in a 2D space where similar models appear closer together, allowing you to explore the relationships and family structures described in the paper.
 
+![Demo](assets/demo.gif)
+
 **Resources:**
 - **GitHub Repository**: [bendlaufer/ai-ecosystem](https://github.com/bendlaufer/ai-ecosystem) - Original research repository with analysis notebooks and datasets
 - **Hugging Face Project**: [modelbiome](https://huggingface.co/modelbiome) - Dataset and project page on Hugging Face Hub
 
-## 🚀 Quick Start (New: Pre-Computed Data)
+## Quick Start (Pre-Computed Data)
 
 This project now uses **pre-computed embeddings and coordinates** for instant startup:
 
@@ -36,7 +38,7 @@ cd ../frontend
 npm install && npm start
 ```
 
-**Startup time:** ~5-10 seconds ⚡
+**Startup time:** ~5-10 seconds
 
 ### Option 2: Traditional Mode (Fallback)
 

backend/api/main.py

@@ -696,6 +696,91 @@ async def get_family_stats():
     }
 
 
+@app.get("/api/family/top")
+async def get_top_families(
+    limit: int = Query(50, ge=1, le=200, description="Maximum number of families to return"),
+    min_size: int = Query(2, ge=1, description="Minimum family size to include")
+):
+    """
+    Get top families by total lineage count (sum of all descendants).
+    Calculates the actual family tree size by traversing parent-child relationships.
+    """
+    if deps.df is None:
+        raise DataNotLoadedError()
+    
+    df = deps.df
+    
+    # Build parent -> children mapping
+    children_map = {}
+    root_models = set()
+    
+    for idx, row in df.iterrows():
+        model_id = str(row.get('model_id', ''))
+        parent_id = row.get('parent_model')
+        
+        if pd.isna(parent_id) or str(parent_id) == 'nan' or str(parent_id) == '':
+            root_models.add(model_id)
+        else:
+            parent_str = str(parent_id)
+            if parent_str not in children_map:
+                children_map[parent_str] = []
+            children_map[parent_str].append(model_id)
+    
+    # For each root, count all descendants
+    def count_descendants(model_id: str, visited: set) -> int:
+        if model_id in visited:
+            return 0
+        visited.add(model_id)
+        count = 1  # Count self
+        for child in children_map.get(model_id, []):
+            count += count_descendants(child, visited)
+        return count
+    
+    # Calculate family sizes
+    family_data = []
+    for root in root_models:
+        visited = set()
+        total_count = count_descendants(root, visited)
+        if total_count >= min_size:
+            # Get organization from model_id
+            org = root.split('/')[0] if '/' in root else root
+            family_data.append({
+                "root_model": root,
+                "organization": org,
+                "total_models": total_count,
+                "depth_count": len(visited)  # Same as total for tree traversal
+            })
+    
+    # Sort by total count descending
+    family_data.sort(key=lambda x: x['total_models'], reverse=True)
+    
+    # Also aggregate by organization (sum all families under same org)
+    org_totals = {}
+    for fam in family_data:
+        org = fam['organization']
+        if org not in org_totals:
+            org_totals[org] = {
+                "organization": org,
+                "total_models": 0,
+                "family_count": 0,
+                "root_models": []
+            }
+        org_totals[org]['total_models'] += fam['total_models']
+        org_totals[org]['family_count'] += 1
+        if len(org_totals[org]['root_models']) < 5:  # Keep top 5 root models
+            org_totals[org]['root_models'].append(fam['root_model'])
+    
+    # Sort organizations by total models
+    top_orgs = sorted(org_totals.values(), key=lambda x: x['total_models'], reverse=True)[:limit]
+    
+    return {
+        "families": family_data[:limit],
+        "organizations": top_orgs,
+        "total_families": len(family_data),
+        "total_root_models": len(root_models)
+    }
+
+
 @app.get("/api/family/path/{model_id}")
 async def get_family_path(
     model_id: str,
@@ -1028,6 +1113,118 @@ async def search_models(
     return {"results": results, "search_type": "basic", "query": search_query}
 
 
+@app.get("/api/search/fuzzy")
+async def fuzzy_search_models(
+    q: str = Query(..., min_length=2, description="Search query"),
+    limit: int = Query(50, ge=1, le=200, description="Maximum number of results"),
+    threshold: int = Query(60, ge=0, le=100, description="Minimum fuzzy match score (0-100)"),
+):
+    """
+    Fuzzy search for models using rapidfuzz.
+    Handles typos and partial matches across model names, libraries, and pipelines.
+    Returns results sorted by relevance score.
+    """
+    if deps.df is None:
+        raise DataNotLoadedError()
+    
+    df = deps.df
+    
+    try:
+        from rapidfuzz import fuzz, process
+        from rapidfuzz.utils import default_process
+        
+        query_lower = q.lower().strip()
+        
+        # Prepare choices - combine model_id, library, and pipeline for searching
+        # Create a searchable string for each model
+        model_ids = df['model_id'].astype(str).tolist()
+        libraries = df.get('library_name', pd.Series([''] * len(df))).fillna('').astype(str).tolist()
+        pipelines = df.get('pipeline_tag', pd.Series([''] * len(df))).fillna('').astype(str).tolist()
+        
+        # Create search strings - just model_id for better fuzzy matching
+        # Library and pipeline are used for secondary filtering
+        search_strings = [m.lower() for m in model_ids]
+        
+        # Use rapidfuzz to find best matches
+        # WRatio is best for general fuzzy matching with typo tolerance
+        # It handles transpositions, insertions, deletions well
+        
+        # extract returns list of (match, score, index)
+        matches = process.extract(
+            query_lower,
+            search_strings,
+            scorer=fuzz.WRatio,
+            limit=limit * 3,  # Get extra to filter by threshold and dedupe
+            score_cutoff=threshold,
+            processor=default_process
+        )
+        
+        # Also try partial matching for substring searches
+        if len(matches) < limit:
+            partial_matches = process.extract(
+                query_lower,
+                search_strings,
+                scorer=fuzz.partial_ratio,
+                limit=limit * 2,
+                score_cutoff=threshold + 10,  # Higher threshold for partial
+                processor=default_process
+            )
+            # Add unique partial matches
+            seen_indices = {m[2] for m in matches}
+            for m in partial_matches:
+                if m[2] not in seen_indices:
+                    matches.append(m)
+                    seen_indices.add(m[2])
+        
+        results = []
+        seen_ids = set()
+        
+        for match_str, score, idx in matches:
+            if len(results) >= limit:
+                break
+                
+            model_id = model_ids[idx]
+            if model_id in seen_ids:
+                continue
+            seen_ids.add(model_id)
+            
+            row = df.iloc[idx]
+            
+            # Get coordinates
+            x = float(row.get('x', 0.0)) if 'x' in row else None
+            y = float(row.get('y', 0.0)) if 'y' in row else None
+            z = float(row.get('z', 0.0)) if 'z' in row else None
+            
+            results.append({
+                "model_id": model_id,
+                "x": x,
+                "y": y,
+                "z": z,
+                "score": round(score, 1),
+                "library": row.get('library_name') if pd.notna(row.get('library_name')) else None,
+                "pipeline": row.get('pipeline_tag') if pd.notna(row.get('pipeline_tag')) else None,
+                "downloads": int(row.get('downloads', 0)),
+                "likes": int(row.get('likes', 0)),
+                "family_depth": int(row.get('family_depth', 0)) if pd.notna(row.get('family_depth')) else None,
+            })
+        
+        # Sort by score descending, then by downloads for tie-breaking
+        results.sort(key=lambda x: (-x['score'], -x['downloads']))
+        
+        return {
+            "results": results,
+            "query": q,
+            "total_matches": len(matches),
+            "threshold": threshold
+        }
+        
+    except ImportError:
+        raise HTTPException(status_code=500, detail="rapidfuzz not installed")
+    except Exception as e:
+        logger.exception(f"Fuzzy search error: {e}")
+        raise HTTPException(status_code=500, detail=f"Search error: {str(e)}")
+
+
 @app.get("/api/similar/{model_id}")
 async def get_similar_models(model_id: str, k: int = Query(10, ge=1, le=50)):
     """
@@ -1939,6 +2136,168 @@ async def get_model_files(model_id: str, branch: str = Query("main")):
         )
 
 
+# =============================================================================
+# BACKGROUND COMPUTATION ENDPOINTS
+# =============================================================================
+
+import subprocess
+import threading
+
+# Store for background process
+_background_process = None
+_background_lock = threading.Lock()
+
+
+class ComputeRequest(BaseModel):
+    sample_size: Optional[int] = None
+    all_models: bool = False
+
+
+@app.get("/api/compute/status")
+async def get_compute_status():
+    """Get the status of background pre-computation."""
+    from pathlib import Path
+    
+    root_dir = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    status_file = Path(root_dir) / "precomputed_data" / "background_status_v1.json"
+    
+    if status_file.exists():
+        import json
+        with open(status_file, 'r') as f:
+            status = json.load(f)
+        
+        # Check if process is still running
+        global _background_process
+        with _background_lock:
+            if _background_process is not None:
+                poll = _background_process.poll()
+                if poll is None:
+                    status['process_running'] = True
+                else:
+                    status['process_running'] = False
+                    status['process_exit_code'] = poll
+            else:
+                status['process_running'] = False
+        
+        return status
+    
+    # Check for existing precomputed data
+    metadata_file = Path(root_dir) / "precomputed_data" / "metadata_v1.json"
+    models_file = Path(root_dir) / "precomputed_data" / "models_v1.parquet"
+    
+    if metadata_file.exists() and models_file.exists():
+        import json
+        with open(metadata_file, 'r') as f:
+            metadata = json.load(f)
+        return {
+            'status': 'completed',
+            'total_models': metadata.get('total_models', 0),
+            'created_at': metadata.get('created_at'),
+            'process_running': False
+        }
+    
+    return {
+        'status': 'not_started',
+        'total_models': 0,
+        'process_running': False
+    }
+
+
+@app.post("/api/compute/start")
+async def start_background_compute(request: ComputeRequest, background_tasks: BackgroundTasks):
+    """Start background pre-computation of model embeddings."""
+    global _background_process
+    
+    with _background_lock:
+        if _background_process is not None and _background_process.poll() is None:
+            raise HTTPException(
+                status_code=409,
+                detail="Background computation is already running"
+            )
+    
+    # Prepare command
+    root_dir = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    script_path = os.path.join(root_dir, "backend", "scripts", "precompute_background.py")
+    venv_python = os.path.join(root_dir, "venv", "bin", "python")
+    
+    cmd = [venv_python, script_path]
+    
+    if request.all_models:
+        cmd.append("--all")
+    elif request.sample_size:
+        cmd.extend(["--sample-size", str(request.sample_size)])
+    else:
+        cmd.extend(["--sample-size", "150000"])  # Default
+    
+    cmd.extend(["--output-dir", os.path.join(root_dir, "precomputed_data")])
+    
+    # Start process in background
+    log_file = os.path.join(root_dir, "precompute_background.log")
+    
+    def run_computation():
+        global _background_process
+        with open(log_file, 'w') as f:
+            with _background_lock:
+                _background_process = subprocess.Popen(
+                    cmd,
+                    stdout=f,
+                    stderr=subprocess.STDOUT,
+                    cwd=os.path.join(root_dir, "backend")
+                )
+            _background_process.wait()
+    
+    thread = threading.Thread(target=run_computation, daemon=True)
+    thread.start()
+    
+    sample_desc = "all models" if request.all_models else f"{request.sample_size or 150000:,} models"
+    
+    return {
+        "message": f"Background computation started for {sample_desc}",
+        "status": "starting",
+        "log_file": log_file
+    }
+
+
+@app.post("/api/compute/stop")
+async def stop_background_compute():
+    """Stop the running background computation."""
+    global _background_process
+    
+    with _background_lock:
+        if _background_process is None or _background_process.poll() is not None:
+            return {"message": "No computation is running"}
+        
+        _background_process.terminate()
+        try:
+            _background_process.wait(timeout=5)
+        except subprocess.TimeoutExpired:
+            _background_process.kill()
+        
+        return {"message": "Background computation stopped"}
+
+
+@app.get("/api/data/info")
+async def get_data_info():
+    """Get information about currently loaded data."""
+    df = deps.df
+    
+    if df is None:
+        return {
+            "loaded": False,
+            "message": "No data loaded"
+        }
+    
+    return {
+        "loaded": True,
+        "total_models": len(df),
+        "columns": list(df.columns),
+        "unique_libraries": int(df['library_name'].nunique()) if 'library_name' in df.columns else 0,
+        "unique_pipelines": int(df['pipeline_tag'].nunique()) if 'pipeline_tag' in df.columns else 0,
+        "has_3d_coords": all(col in df.columns for col in ['x_3d', 'y_3d', 'z_3d']),
+        "has_2d_coords": all(col in df.columns for col in ['x_2d', 'y_2d'])
+    }
+
+
 if __name__ == "__main__":
     import uvicorn
     port = int(os.getenv("PORT", 8000))

backend/api/routes/models.py

@@ -13,6 +13,7 @@ from umap import UMAP
 from models.schemas import ModelPoint
 from utils.family_tree import calculate_family_depths
 from utils.dimensionality_reduction import DimensionReducer
+from utils.cache import cached_response
 from core.exceptions import DataNotLoadedError, EmbeddingsNotReadyError
 import api.dependencies as deps
 
@@ -245,3 +246,64 @@ async def get_models(
         "returned_count": len(models)
     }
 
+
+@router.get("/family/adoption")
+@cached_response(ttl=3600, key_prefix="family_adoption")
+async def get_family_adoption(
+    family: str = Query(..., description="Family name (e.g., 'meta-llama', 'google', 'microsoft')"),
+    limit: int = Query(100, ge=1, le=1000, description="Maximum number of models to return")
+):
+    """
+    Get adoption data for a specific family (S-curve data).
+    Returns models sorted by creation date with their downloads.
+    """
+    if deps.df is None:
+        raise DataNotLoadedError()
+    
+    df = deps.df
+    
+    # Filter by family name (check model_id prefix and tags)
+    family_lower = family.lower()
+    filtered_df = df[
+        df['model_id'].astype(str).str.lower().str.contains(family_lower, regex=False, na=False) |
+        df.get('tags', pd.Series([None] * len(df))).astype(str).str.lower().str.contains(family_lower, regex=False, na=False)
+    ]
+    
+    if len(filtered_df) == 0:
+        return {
+            "family": family,
+            "models": [],
+            "total_models": 0
+        }
+    
+    # Sort by downloads and limit
+    filtered_df = filtered_df.nlargest(limit, 'downloads', keep='first')
+    
+    # Extract required fields
+    model_ids = filtered_df['model_id'].astype(str).values
+    downloads_arr = filtered_df.get('downloads', pd.Series([0] * len(filtered_df))).fillna(0).astype(int).values
+    created_at_arr = filtered_df.get('createdAt', pd.Series([None] * len(filtered_df))).values
+    
+    # Parse dates efficiently
+    dates = pd.to_datetime(created_at_arr, errors='coerce', utc=True)
+    
+    # Build response
+    adoption_data = []
+    for idx in range(len(filtered_df)):
+        date_val = dates.iloc[idx] if isinstance(dates, pd.Series) else dates[idx]
+        if pd.notna(date_val):
+            adoption_data.append({
+                "model_id": model_ids[idx],
+                "downloads": int(downloads_arr[idx]),
+                "created_at": date_val.isoformat()
+            })
+    
+    # Sort by date
+    adoption_data.sort(key=lambda x: x['created_at'] if x['created_at'] else '')
+    
+    return {
+        "family": family,
+        "models": adoption_data,
+        "total_models": len(adoption_data)
+    }
+

backend/scripts/precompute_background.py

@@ -0,0 +1,414 @@
+#!/usr/bin/env python3
+"""
+Background pre-computation script for processing ALL models incrementally.
+Designed to run in the background and save progress so it can be resumed.
+
+Features:
+- Processes models in batches to manage memory
+- Saves progress incrementally
+- Can be resumed if interrupted
+- Provides status updates via JSON file
+
+Usage:
+    # Process all models (default ~500k batch)
+    python scripts/precompute_background.py --all
+    
+    # Process specific number of models
+    python scripts/precompute_background.py --sample-size 500000
+    
+    # Resume from previous run
+    python scripts/precompute_background.py --resume
+    
+    # Check status
+    python scripts/precompute_background.py --status
+"""
+
+import argparse
+import os
+import sys
+import json
+import time
+import logging
+import signal
+from datetime import datetime
+from pathlib import Path
+from typing import Optional, Dict, Any
+import threading
+
+import pandas as pd
+import numpy as np
+from umap import UMAP
+from sklearn.decomposition import PCA, IncrementalPCA
+
+# Add backend to path
+backend_dir = Path(__file__).parent.parent
+sys.path.insert(0, str(backend_dir))
+
+from utils.data_loader import ModelDataLoader
+from utils.embeddings import ModelEmbedder
+
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(levelname)s - %(message)s',
+    handlers=[
+        logging.StreamHandler(),
+        logging.FileHandler('precompute_background.log')
+    ]
+)
+logger = logging.getLogger(__name__)
+
+# Global flag for graceful shutdown
+shutdown_requested = False
+
+def signal_handler(signum, frame):
+    global shutdown_requested
+    logger.warning("Shutdown requested - will save progress and exit...")
+    shutdown_requested = True
+
+signal.signal(signal.SIGINT, signal_handler)
+signal.signal(signal.SIGTERM, signal_handler)
+
+
+class BackgroundPrecomputer:
+    """Handles incremental pre-computation of model embeddings and coordinates."""
+    
+    def __init__(
+        self,
+        output_dir: str = "precomputed_data",
+        version: str = "v1",
+        batch_size: int = 50000,
+        embedding_batch_size: int = 256
+    ):
+        self.output_dir = Path(output_dir)
+        self.version = version
+        self.batch_size = batch_size
+        self.embedding_batch_size = embedding_batch_size
+        
+        # Status file for tracking progress
+        self.status_file = self.output_dir / f"background_status_{version}.json"
+        self.output_dir.mkdir(parents=True, exist_ok=True)
+        
+        # Initialize components
+        self.data_loader = ModelDataLoader()
+        self.embedder = ModelEmbedder()
+        
+    def get_status(self) -> Dict[str, Any]:
+        """Get current computation status."""
+        if self.status_file.exists():
+            with open(self.status_file, 'r') as f:
+                return json.load(f)
+        return {
+            'status': 'not_started',
+            'total_models': 0,
+            'processed_models': 0,
+            'current_batch': 0,
+            'started_at': None,
+            'last_updated': None,
+            'error': None
+        }
+    
+    def save_status(self, status: Dict[str, Any]):
+        """Save computation status."""
+        status['last_updated'] = datetime.now().isoformat()
+        with open(self.status_file, 'w') as f:
+            json.dump(status, f, indent=2)
+    
+    def load_full_dataset(self) -> pd.DataFrame:
+        """Load the full dataset without sampling."""
+        logger.info("Loading full dataset from HuggingFace...")
+        from datasets import load_dataset
+        dataset = load_dataset("modelbiome/ai_ecosystem", split="train")
+        df = dataset.to_pandas()
+        logger.info(f"Loaded {len(df):,} total models")
+        return df
+    
+    def precompute_all(
+        self,
+        sample_size: Optional[int] = None,
+        resume: bool = False,
+        pca_dims: int = 50
+    ):
+        """
+        Pre-compute embeddings and coordinates for all or specified number of models.
+        
+        Args:
+            sample_size: If None, process all models. Otherwise, process this many.
+            resume: If True, resume from previous progress
+            pca_dims: Number of PCA dimensions for pre-reduction
+        """
+        global shutdown_requested
+        
+        start_time = time.time()
+        
+        # Get current status
+        status = self.get_status() if resume else {
+            'status': 'initializing',
+            'total_models': 0,
+            'processed_models': 0,
+            'current_batch': 0,
+            'started_at': datetime.now().isoformat(),
+            'error': None,
+            'batches_completed': []
+        }
+        
+        try:
+            # Step 1: Load data
+            status['status'] = 'loading_data'
+            self.save_status(status)
+            
+            if sample_size:
+                logger.info(f"Loading {sample_size:,} models with stratified sampling...")
+                df = self.data_loader.load_data(sample_size=sample_size, prioritize_base_models=True)
+            else:
+                logger.info("Loading ALL models...")
+                df = self.load_full_dataset()
+            
+            total_models = len(df)
+            status['total_models'] = total_models
+            logger.info(f"Total models to process: {total_models:,}")
+            
+            # Build combined text
+            logger.info("Building combined text for embeddings...")
+            df['combined_text'] = (
+                df.get('tags', '').astype(str) + ' ' +
+                df.get('pipeline_tag', '').astype(str) + ' ' +
+                df.get('library_name', '').astype(str)
+            )
+            if 'modelCard' in df.columns:
+                df['combined_text'] = df['combined_text'] + ' ' + df['modelCard'].astype(str).str[:500]
+            
+            # Step 2: Generate embeddings in batches
+            status['status'] = 'generating_embeddings'
+            self.save_status(status)
+            
+            logger.info("Generating embeddings...")
+            all_embeddings = []
+            texts = df['combined_text'].tolist()
+            
+            num_batches = (len(texts) + self.batch_size - 1) // self.batch_size
+            
+            for batch_idx in range(num_batches):
+                if shutdown_requested:
+                    logger.warning("Shutdown requested - saving partial progress...")
+                    break
+                
+                batch_start = batch_idx * self.batch_size
+                batch_end = min(batch_start + self.batch_size, len(texts))
+                batch_texts = texts[batch_start:batch_end]
+                
+                logger.info(f"Processing embedding batch {batch_idx + 1}/{num_batches} "
+                           f"(models {batch_start:,} - {batch_end:,})...")
+                
+                batch_embeddings = self.embedder.generate_embeddings(
+                    batch_texts, 
+                    batch_size=self.embedding_batch_size
+                )
+                all_embeddings.append(batch_embeddings)
+                
+                status['processed_models'] = batch_end
+                status['current_batch'] = batch_idx + 1
+                status['progress_percent'] = round(100 * batch_end / total_models, 1)
+                self.save_status(status)
+            
+            if shutdown_requested:
+                status['status'] = 'interrupted'
+                self.save_status(status)
+                return
+            
+            embeddings = np.vstack(all_embeddings)
+            logger.info(f"Generated embeddings: {embeddings.shape}")
+            
+            # Step 3: PCA pre-reduction
+            status['status'] = 'pca_reduction'
+            self.save_status(status)
+            
+            logger.info(f"Applying PCA reduction ({embeddings.shape[1]} -> {pca_dims} dims)...")
+            pca = PCA(n_components=pca_dims, random_state=42)
+            embeddings_reduced = pca.fit_transform(embeddings)
+            explained_var = pca.explained_variance_ratio_.sum()
+            logger.info(f"PCA complete (preserved {explained_var:.1%} variance)")
+            
+            if shutdown_requested:
+                status['status'] = 'interrupted'
+                self.save_status(status)
+                return
+            
+            # Step 4: UMAP 3D
+            status['status'] = 'umap_3d'
+            self.save_status(status)
+            
+            logger.info("Running UMAP for 3D coordinates...")
+            reducer_3d = UMAP(
+                n_components=3,
+                n_neighbors=15,
+                min_dist=0.1,
+                metric='euclidean',
+                n_jobs=-1,
+                low_memory=True if total_models > 200000 else False,
+                spread=1.5,
+                verbose=True
+            )
+            coords_3d = reducer_3d.fit_transform(embeddings_reduced)
+            logger.info(f"3D coordinates: {coords_3d.shape}")
+            
+            if shutdown_requested:
+                status['status'] = 'interrupted'
+                self.save_status(status)
+                return
+            
+            # Step 5: UMAP 2D
+            status['status'] = 'umap_2d'
+            self.save_status(status)
+            
+            logger.info("Running UMAP for 2D coordinates...")
+            reducer_2d = UMAP(
+                n_components=2,
+                n_neighbors=15,
+                min_dist=0.1,
+                metric='euclidean',
+                n_jobs=-1,
+                low_memory=True if total_models > 200000 else False,
+                spread=1.5,
+                verbose=True
+            )
+            coords_2d = reducer_2d.fit_transform(embeddings_reduced)
+            logger.info(f"2D coordinates: {coords_2d.shape}")
+            
+            # Step 6: Save results
+            status['status'] = 'saving'
+            self.save_status(status)
+            
+            logger.info("Saving results...")
+            
+            # Prepare output DataFrame
+            output_df = df.copy()
+            output_df['x_3d'] = coords_3d[:, 0]
+            output_df['y_3d'] = coords_3d[:, 1]
+            output_df['z_3d'] = coords_3d[:, 2]
+            output_df['x_2d'] = coords_2d[:, 0]
+            output_df['y_2d'] = coords_2d[:, 1]
+            
+            # Save models
+            models_file = self.output_dir / f"models_{self.version}.parquet"
+            output_df.to_parquet(models_file, compression='snappy', index=False)
+            logger.info(f"Saved: {models_file} ({models_file.stat().st_size / 1024 / 1024:.1f} MB)")
+            
+            # Save embeddings
+            embeddings_file = self.output_dir / f"embeddings_{self.version}.parquet"
+            embeddings_df = pd.DataFrame({
+                'model_id': df['modelId'].values,
+                'embedding': [emb.tolist() for emb in embeddings]
+            })
+            embeddings_df.to_parquet(embeddings_file, compression='snappy', index=False)
+            logger.info(f"Saved: {embeddings_file} ({embeddings_file.stat().st_size / 1024 / 1024:.1f} MB)")
+            
+            # Save metadata
+            total_time = time.time() - start_time
+            metadata = {
+                'version': self.version,
+                'created_at': datetime.now().isoformat(),
+                'total_models': int(total_models),
+                'embedding_dim': int(embeddings.shape[1]),
+                'umap_3d_shape': list(coords_3d.shape),
+                'umap_2d_shape': list(coords_2d.shape),
+                'unique_libraries': int(df['library_name'].nunique()),
+                'unique_pipelines': int(df['pipeline_tag'].nunique()),
+                'processing_time_seconds': total_time,
+                'processing_time_hours': total_time / 3600,
+                'pca_dims': pca_dims,
+                'pca_variance_preserved': float(explained_var)
+            }
+            
+            metadata_file = self.output_dir / f"metadata_{self.version}.json"
+            with open(metadata_file, 'w') as f:
+                json.dump(metadata, f, indent=2)
+            logger.info(f"Saved: {metadata_file}")
+            
+            # Update final status
+            status['status'] = 'completed'
+            status['completed_at'] = datetime.now().isoformat()
+            status['processing_time_hours'] = round(total_time / 3600, 2)
+            self.save_status(status)
+            
+            logger.info("="*60)
+            logger.info("BACKGROUND PRE-COMPUTATION COMPLETE!")
+            logger.info("="*60)
+            logger.info(f"Total time: {total_time/3600:.2f} hours ({total_time/60:.1f} minutes)")
+            logger.info(f"Models processed: {total_models:,}")
+            logger.info(f"Output directory: {self.output_dir}")
+            logger.info("="*60)
+            
+        except Exception as e:
+            logger.error(f"Pre-computation failed: {e}", exc_info=True)
+            status['status'] = 'failed'
+            status['error'] = str(e)
+            self.save_status(status)
+            raise
+
+
+def main():
+    parser = argparse.ArgumentParser(
+        description="Background pre-computation of HF model embeddings and coordinates"
+    )
+    parser.add_argument(
+        "--sample-size", type=int, default=None,
+        help="Number of models to process (default: all)"
+    )
+    parser.add_argument(
+        "--all", action="store_true",
+        help="Process ALL models (may take many hours)"
+    )
+    parser.add_argument(
+        "--resume", action="store_true",
+        help="Resume from previous progress"
+    )
+    parser.add_argument(
+        "--status", action="store_true",
+        help="Show current computation status and exit"
+    )
+    parser.add_argument(
+        "--output-dir", type=str, default="../precomputed_data",
+        help="Output directory"
+    )
+    parser.add_argument(
+        "--version", type=str, default="v1",
+        help="Version tag"
+    )
+    parser.add_argument(
+        "--batch-size", type=int, default=50000,
+        help="Batch size for processing"
+    )
+    
+    args = parser.parse_args()
+    
+    precomputer = BackgroundPrecomputer(
+        output_dir=args.output_dir,
+        version=args.version,
+        batch_size=args.batch_size
+    )
+    
+    if args.status:
+        status = precomputer.get_status()
+        print(json.dumps(status, indent=2))
+        return
+    
+    sample_size = None if args.all else (args.sample_size or 150000)
+    
+    if sample_size:
+        logger.info(f"Processing {sample_size:,} models...")
+    else:
+        logger.info("Processing ALL models (this may take many hours)...")
+    
+    try:
+        precomputer.precompute_all(
+            sample_size=sample_size,
+            resume=args.resume
+        )
+    except Exception as e:
+        logger.error(f"Failed: {e}")
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()
+

frontend/package-lock.json

@@ -29,7 +29,10 @@
         "axios": "^1.6.0",
         "comlink": "^4.4.1",
         "d3": "^7.8.5",
+        "d3-array": "^3.2.4",
+        "fuse.js": "^7.1.0",
         "idb": "^8.0.0",
+        "lucide-react": "^0.555.0",
         "msgpack-lite": "^0.1.26",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -5328,6 +5331,18 @@
       "integrity": "sha512-/myT3I7EwlukNOX2xVdMzb8FRgNzRMpsZddwst9Ld/VFe6LyJyRp0s32l/V9XoUzk+Gqu56F/oGk6507+8BxrA==",
       "license": "MIT"
     },
+    "node_modules/@visx/vendor/node_modules/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-gUY/qeHq/yNqqoCKNq4vtpFLdoCdvyNpWoC/KNjhGbhDuQpAM9sIQQKkXSNpXa9h5KySs/gzm7R88WkUutgwWQ==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@visx/visx": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/visx/-/visx-3.12.0.tgz",
@@ -7853,9 +7868,9 @@
       }
     },
     "node_modules/d3-array": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.1.tgz",
-      "integrity": "sha512-gUY/qeHq/yNqqoCKNq4vtpFLdoCdvyNpWoC/KNjhGbhDuQpAM9sIQQKkXSNpXa9h5KySs/gzm7R88WkUutgwWQ==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
       "license": "ISC",
       "dependencies": {
         "internmap": "1 - 2"
@@ -10484,6 +10499,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/fuse.js": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.1.0.tgz",
+      "integrity": "sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/generator-function": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
@@ -13364,6 +13388,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.555.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.555.0.tgz",
+      "integrity": "sha512-D8FvHUGbxWBRQM90NZeIyhAvkFfsh3u9ekrMvJ30Z6gnpBHS6HC6ldLg7tL45hwiIz/u66eKDtdA23gwwGsAHA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/maath": {
       "version": "0.10.8",
       "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",

frontend/package.json

@@ -25,7 +25,10 @@
     "axios": "^1.6.0",
     "comlink": "^4.4.1",
     "d3": "^7.8.5",
+    "d3-array": "^3.2.4",
+    "fuse.js": "^7.1.0",
     "idb": "^8.0.0",
+    "lucide-react": "^0.555.0",
     "msgpack-lite": "^0.1.26",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

frontend/public/index.html

@@ -4,6 +4,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
+    <noscript><link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet" /></noscript>
     <meta
       name="description"
       content="Anatomy of a Machine Learning Ecosystem: 2 Million Models on Hugging Face. Analysis of 1.86 million models on Hugging Face, revealing fine-tuning lineages and model family structures using evolutionary biology methods."

frontend/src/App.css

@@ -2,8 +2,8 @@
    ROOT & VARIABLES
    ============================================ */
    :root {
-    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    --font-mono: 'Monaco', 'Menlo', monospace;
+    --font-primary: 'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    --font-mono: 'Roboto Mono', 'Monaco', 'Menlo', 'Courier New', monospace;
     
     /* Light theme (default) */
     --bg-primary: #ffffff;
@@ -65,112 +65,1295 @@
     -moz-osx-font-smoothing: grayscale;
     color: var(--text-primary);
     background: var(--bg-secondary);
+    min-height: 100vh;
+  }
+
+  /* ============================================
+     APP LAYOUT
+     ============================================ */
+  .app-layout {
+    display: flex;
+    min-height: 100vh;
+    overflow-x: hidden;
+    width: 100%;
+    background: var(--bg-primary);
+  }
+
+  /* ============================================
+     NAVIGATION SIDEBAR
+     ============================================ */
+  .nav-sidebar {
+    width: 240px;
+    background: var(--bg-primary);
+    border-right: 1px solid var(--border-light);
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    z-index: 1000;
+    box-shadow: var(--shadow-md);
+    overflow-y: auto;
+  }
+
+  .nav-sidebar-header {
+    position: relative;
+    padding: 2rem 1.5rem 1.5rem;
+    border-bottom: 1px solid var(--border-light);
+  }
+
+  .nav-sidebar-header h1 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0 0 0.5rem 0;
+    color: var(--text-primary);
+    letter-spacing: -0.01em;
+    line-height: 1.3;
+  }
+
+  .nav-subtitle {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    margin: 0;
+    line-height: 1.4;
+  }
+
+  .nav-collapse-toggle {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+    transition: all var(--transition-base);
+    outline: none;
+    z-index: 10;
+  }
+  
+  .nav-collapse-toggle:hover {
+    color: var(--text-primary);
+    background: var(--bg-secondary);
+  }
+  
+  .nav-collapse-toggle:focus {
+    outline: 2px solid var(--accent-blue);
+    outline-offset: 2px;
+  }
+
+  .nav-sidebar.collapsed {
+    width: 60px;
+  }
+
+  .nav-sidebar.collapsed .nav-sidebar-header h1,
+  .nav-sidebar.collapsed .nav-subtitle {
+    display: none;
+  }
+
+  .nav-tabs {
+    flex: 1;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .nav-tab {
+    background: transparent;
+    border: none;
+    border-left: 3px solid transparent;
+    color: var(--text-secondary);
+    padding: 1rem 1.5rem;
+    cursor: pointer;
+    font-size: 0.95rem;
+    text-align: left;
+    transition: all 0.15s ease;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    font-weight: 500;
+    font-family: var(--font-primary);
+    position: relative;
+    margin: 0;
+  }
+  
+  .nav-tab:hover {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    border-left-color: var(--border-medium);
+  }
+  
+  .nav-tab:active {
+    background: var(--bg-tertiary, rgba(255, 255, 255, 0.08));
+    transition: all 0.05s ease;
+  }
+  
+  .nav-tab:focus {
+    outline: none;
+  }
+  
+  .nav-tab:focus-visible {
+    outline: 2px solid var(--accent-blue);
+    outline-offset: -2px;
+  }
+  
+  .nav-tab.active {
+    background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, transparent 100%);
+    border-left-color: var(--accent-blue);
+    color: var(--accent-blue);
+    font-weight: 600;
+    box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.05);
+  }
+  
+  .nav-tab.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: var(--accent-blue);
+    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
+  }
+
+  .nav-sidebar-footer {
+    padding: 1.5rem;
+    border-top: 1px solid var(--border-light);
+    margin-top: auto;
+  }
+
+  .nav-links {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .nav-links a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-size: 0.875rem;
+    transition: color var(--transition-base);
+    font-weight: 500;
+  }
+
+  .nav-links a:hover {
+    color: var(--accent-blue);
+    text-decoration: underline;
+  }
+
+  /* ============================================
+     APP MAIN CONTENT
+     ============================================ */
+  .app-main {
+    flex: 1;
+    margin-left: 240px;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    transition: margin-left var(--transition-base);
+    width: calc(100% - 240px);
+    max-width: none;
+    box-sizing: border-box;
+    overflow-x: hidden;
+  }
+
+  .nav-sidebar.collapsed ~ .app-main {
+    margin-left: 60px;
+    width: calc(100% - 60px);
+    max-width: none;
+  }
+
+  .app-content {
+    flex: 1;
+    overflow: auto;
   }
   
   /* ============================================
      HEADER
      ============================================ */
   .App-header {
-    background: var(--accent-primary);
+    background: var(--bg-primary);
     color: var(--text-primary);
     padding: 1rem 2rem;
-    border-bottom: 1px solid var(--border-medium);
-    box-shadow: var(--shadow-md);
+    border-bottom: 1px solid var(--border-light);
+    box-shadow: var(--shadow-sm);
+    width: 100%;
+    box-sizing: border-box;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+  
+  .header-content {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+  }
+  
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+  }
+  
+  .App-header h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    line-height: 1.3;
+    color: #ffffff;
+  }
+  
+  .header-nav {
+    margin-top: 0.75rem;
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  
+  .nav-tab {
+    background: transparent;
+    border: 1px solid var(--border-light);
+    border-radius: 0;
+    padding: 0.5rem 1rem;
+    color: var(--text-primary);
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 500;
+    white-space: nowrap;
+    transition: all var(--transition-base);
+    border-bottom: 2px solid transparent;
+    font-family: var(--font-primary);
+  }
+  
+  .nav-tab:hover {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+  }
+  
+  .nav-tab.active {
+    background: var(--bg-secondary);
+    border-bottom-color: var(--accent-blue);
+    color: var(--accent-blue);
+  }
+  
+  .header-links {
+    margin-top: 0.5rem;
+    font-size: 0.85rem;
+    opacity: 0.9;
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  
+  .App-header a {
+    color: #64b5f6;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all var(--transition-base);
+    white-space: nowrap;
+  }
+  
+  .App-header a:hover {
+    color: #90caf9;
+  }
+  
+  .header-author {
+    opacity: 0.7;
+    white-space: nowrap;
+    font-size: 0.85rem;
+  }
+  
+  .header-action-btn {
+    background: rgba(255, 255, 255, 0.15);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 0;
+    padding: 0.5rem 1rem;
+    color: #ffffff;
+    cursor: pointer;
+    font-size: 0.85rem;
+    font-weight: 500;
+    white-space: nowrap;
+    transition: all var(--transition-base);
+    flex-shrink: 0;
+    font-family: var(--font-primary);
+  }
+  
+  .header-action-btn:hover {
+    background: rgba(255, 255, 255, 0.25);
+    border-color: rgba(255, 255, 255, 0.4);
+  }
+  
+  .header-refresh-btn {
+    background: rgba(255, 255, 255, 0.15);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 0;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    transition: all var(--transition-base);
+    flex-shrink: 0;
+    color: #ffffff;
+  }
+  
+  .header-refresh-btn:hover {
+    background: rgba(255, 255, 255, 0.25);
+    border-color: rgba(255, 255, 255, 0.4);
+  }
+  
+  .stats {
+    display: flex;
+    gap: 0.75rem;
+    font-size: 0.85rem;
+    flex-wrap: wrap;
+  }
+  
+  .stats span {
+    padding: 0.5rem 0.875rem;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 0;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    font-weight: 500;
+    transition: all var(--transition-base);
+  }
+  
+  .stats span:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+  
+  /* ============================================
+     VISUALIZATION LAYOUT
+     ============================================ */
+  .visualization-layout {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 60px);
     width: 100%;
+  }
+
+  /* Ultra-Minimal Control Bar */
+  .control-bar {
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--border-light);
+    box-shadow: var(--shadow-sm);
+    z-index: 50;
+    position: sticky;
+    top: 0;
+  }
+
+  .control-bar-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    gap: 1rem;
+    max-width: 100%;
     box-sizing: border-box;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  
+  .control-bar-content::-webkit-scrollbar {
+    height: 4px;
+  }
+  
+  .control-bar-content::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  .control-bar-content::-webkit-scrollbar-thumb {
+    background: var(--border-medium);
+    border-radius: 2px;
+  }
+  
+  .control-bar-content::-webkit-scrollbar-thumb:hover {
+    background: var(--border-dark);
+  }
+
+  .control-bar-left {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  .control-back-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 1rem;
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+    transition: color var(--transition-base);
+  }
+
+  .control-back-btn:hover {
+    color: var(--text-primary);
+  }
+
+  .control-bar-title {
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+
+  .control-bar-center {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex: 1;
+    justify-content: center;
+    flex-wrap: wrap;
+    min-width: 0;
+  }
+
+  .control-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+  
+  .control-group.control-filters {
+    position: relative;
+  }
+
+  .control-label {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    white-space: nowrap;
+  }
+
+  .control-toggle-btn {
+    padding: 0.35rem 0.75rem;
+    border: 1px solid var(--border-medium);
+    background: var(--bg-primary);
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all var(--transition-base);
+    font-family: var(--font-primary);
+  }
+
+  .control-toggle-btn:first-child {
+    border-right: none;
+  }
+
+  .control-toggle-btn.active {
+    background: var(--accent-blue);
+    color: white;
+    border-color: var(--accent-blue);
+  }
+
+  .control-toggle-btn:hover:not(.active) {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+  }
+
+  .control-select {
+    padding: 0.35rem 0.5rem;
+    border: 1px solid var(--border-medium);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 0.85rem;
+    font-family: var(--font-primary);
+    cursor: pointer;
+    min-width: 130px;
+    transition: all var(--transition-base);
+    outline: none;
+  }
+  
+  .control-select:hover {
+    border-color: var(--border-dark);
+  }
+  
+  .control-select:focus {
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
+  }
+
+  .control-select:focus {
+    outline: none;
+    border-color: var(--accent-blue);
+  }
+
+  .control-select-small {
+    min-width: 90px;
+  }
+
+  .control-icon {
+    color: var(--text-tertiary);
+    flex-shrink: 0;
+  }
+
+  .control-divider {
+    width: 1px;
+    height: 20px;
+    background: var(--border-light);
+    margin: 0 0.25rem;
+  }
+
+  .control-stats {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0.35rem 0.75rem;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-light);
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+  }
+
+  .control-stats-text {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: var(--text-primary);
+    font-weight: 500;
+  }
+
+  .control-btn {
+    padding: 0.35rem 0.75rem;
+    border: 1px solid var(--border-medium);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 0.85rem;
+    font-family: var(--font-primary);
+    cursor: pointer;
+    transition: all var(--transition-base);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .control-btn:hover {
+    background: var(--bg-secondary);
+    border-color: var(--accent-blue);
+  }
+
+  .control-btn.has-filters {
+    border-color: var(--accent-blue);
+    background: var(--bg-secondary);
+    font-weight: 500;
+  }
+
+  .control-btn.has-filters:hover {
+    background: var(--bg-tertiary);
+    border-color: var(--accent-blue-hover);
+  }
+
+.control-btn:active {
+  opacity: 0.9;
+}
+
+.filter-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-blue);
+  color: white;
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 0.2rem 0.5rem;
+  margin-left: 0.5rem;
+  min-width: 20px;
+  height: 20px;
+  line-height: 1;
+}
+
+  .control-filters {
+    position: relative;
+  }
+
+.filters-dropdown {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-medium);
+  box-shadow: var(--shadow-lg);
+  padding: 1.25rem;
+  min-width: 280px;
+  max-width: 320px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+  
+  [data-theme="dark"] .filters-dropdown {
+    background: var(--bg-elevated);
+    border-color: var(--border-dark);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  }
+
+  .filter-dropdown-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .filter-dropdown-item label {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 0.25rem;
+    user-select: none;
+  }
+
+  .filter-dropdown-item label[for^="filter-base"] {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.75rem;
+    cursor: pointer;
+    text-transform: none;
+    font-weight: 400;
+    font-size: 0.875rem;
+    color: var(--text-primary);
+    margin-bottom: 0;
+  }
+  
+  .filter-dropdown-item input[type="checkbox"] {
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+    margin: 0;
+    accent-color: var(--accent-blue);
+  }
+
+.filter-number-input {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-medium);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  font-family: var(--font-primary);
+  width: 100%;
+  transition: all var(--transition-base);
+  outline: none;
+}
+  
+  .filter-number-input:hover {
+    border-color: var(--border-dark);
+    background: var(--bg-secondary);
+  }
+
+  .filter-number-input:focus {
+    outline: none;
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
+    background: var(--bg-primary);
+  }
+
+  .filter-number-input::placeholder {
+    color: var(--text-tertiary);
+    font-style: italic;
+  }
+
+  .filter-reset-section {
+    margin-top: 0.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-light);
+  }
+
+.filter-reset-btn {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border-medium);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-family: var(--font-primary);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  width: 100%;
+}
+
+  .filter-reset-btn:hover {
+    background: var(--bg-tertiary);
+    border-color: var(--accent-blue);
+    color: var(--accent-blue);
+  }
+
+.filter-reset-btn:active {
+  opacity: 0.9;
+}
+
+  .control-bar-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+
+.semantic-search-toggle {
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-medium);
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+  .semantic-search-toggle:hover {
+    background: var(--bg-tertiary);
+    border-color: var(--accent-blue);
+  }
+
+  .semantic-search-toggle.active {
+    background: var(--accent-blue);
+    border-color: var(--accent-blue);
+    color: #ffffff;
+  }
+
+.semantic-search-panel {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  max-width: 700px;
+  max-height: 80vh;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-medium);
+  box-shadow: var(--shadow-lg);
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+  [data-theme="dark"] .semantic-search-panel {
+    background: rgba(20, 20, 20, 0.98);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .semantic-search-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--border-light);
+  }
+
+  [data-theme="dark"] .semantic-search-panel-header {
+    border-bottom-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .semantic-search-panel-header h3 {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+.semantic-search-panel .close-btn {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+  .semantic-search-panel .close-btn:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+  }
+
+  .semantic-search-panel > div:last-child {
+    padding: 1.5rem;
+    overflow-y: auto;
+  }
+
+  .control-search {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    border: 1px solid var(--border-medium);
+    padding: 0.35rem 0.75rem;
+    background: var(--bg-primary);
+    transition: all var(--transition-base);
+    position: relative;
+    width: 100%;
+  }
+
+  .control-search:focus-within {
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
+  }
+
+  .search-icon {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+  }
+
+  .control-search-input {
+    border: none;
+    background: transparent;
+    color: var(--text-primary);
+    font-size: 0.85rem;
+    font-family: var(--font-primary);
+    width: 150px;
+    min-width: 100px;
+    max-width: 200px;
+    outline: none;
+  }
+  
+  .control-search-input:focus {
+    outline: none;
+  }
+
+  .control-search-input::placeholder {
+    color: var(--text-tertiary);
+  }
+
+  /* Legacy filters-top-bar for backwards compatibility */
+  .filters-top-bar {
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--border-light);
+    box-shadow: var(--shadow-sm);
+    z-index: 50;
+    position: sticky;
+    top: 0;
+  }
+
+  .filters-bar-content {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.5rem 1rem;
+    flex-wrap: wrap;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  .filter-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  .filter-item-range {
+    gap: 0.5rem;
+    min-width: 140px;
+  }
+
+  .filter-item-count {
+    margin-left: auto;
+    gap: 0.25rem;
+  }
+
+  .filter-item-averages {
+    gap: 1rem;
+    margin-left: 0.5rem;
+    padding-left: 1rem;
+    border-left: 1px solid var(--border-light);
+  }
+
+  .average-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    align-items: flex-end;
+  }
+
+  .average-label {
+    font-size: 0.7rem;
+    color: var(--text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .average-value {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .filter-item-actions {
+    gap: 0.5rem;
+    margin-left: 0.5rem;
+  }
+
+  .filter-action-btn {
+    padding: 0.35rem 0.6rem;
+    border: 1px solid var(--border-medium);
+    border-radius: 0;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 0.8rem;
+    font-family: var(--font-primary);
+    cursor: pointer;
+    transition: all var(--transition-base);
+    white-space: nowrap;
+  }
+
+  .filter-action-btn:hover {
+    background: var(--bg-secondary);
+    border-color: var(--accent-blue);
+    color: var(--accent-blue);
+  }
+
+  .filter-refresh-btn {
+    padding: 0.35rem 0.5rem;
+    font-size: 0.9rem;
+  }
+
+  .filter-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  .filter-group:has(.filter-label-compact) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+  }
+
+  .filter-input {
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--border-medium);
+    border-radius: 0;
+    font-size: 0.875rem;
+    font-family: var(--font-primary);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    min-width: 180px;
+    max-width: 100%;
+    transition: all var(--transition-base);
+  }
+
+  .filter-input-compact {
+    padding: 0.4rem 0.6rem;
+    border: 1px solid var(--border-medium);
+    border-radius: 0;
+    font-size: 0.8rem;
+    font-family: var(--font-primary);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    width: 150px;
+    transition: all var(--transition-base);
+  }
+
+  .filter-input-compact:focus {
+    outline: none;
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+  }
+
+  .filter-input:focus {
+    outline: none;
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+  }
+
+  .filter-label-inline {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    white-space: nowrap;
+  }
+
+  .filter-label-inline span:first-child {
+    min-width: 70px;
+    font-weight: 500;
+  }
+
+  .filter-label-text {
+    min-width: 90px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+  }
+
+  .filter-label-compact {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    margin-bottom: 0.25rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .filter-range {
+    width: 100px;
+    height: 4px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: var(--bg-tertiary);
+    border-radius: 0;
+    outline: none;
+    cursor: pointer;
+    flex-shrink: 1;
+  }
+
+  .filter-range-compact {
+    width: 80px;
+    height: 3px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: var(--bg-tertiary);
+    border-radius: 0;
+    outline: none;
+    cursor: pointer;
+    flex-shrink: 1;
+  }
+
+  .filter-range-compact::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 12px;
+    height: 12px;
+    border-radius: 0;
+    background: var(--accent-blue);
+    cursor: pointer;
+  }
+
+  .filter-range-compact::-moz-range-thumb {
+    width: 12px;
+    height: 12px;
+    border-radius: 0;
+    background: var(--accent-blue);
+    cursor: pointer;
+    border: none;
+  }
+
+  .filter-range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 0;
+    background: var(--accent-blue);
+    cursor: pointer;
+  }
+
+  .filter-range::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 0;
+    background: var(--accent-blue);
+    cursor: pointer;
+    border: none;
+  }
+
+  .filter-value-inline {
+    min-width: 50px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    text-align: right;
+    flex-shrink: 0;
+  }
+
+  .filter-select {
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--border-medium);
+    border-radius: 0;
+    font-size: 0.875rem;
+    font-family: var(--font-primary);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: all var(--transition-base);
+    min-width: 110px;
+    max-width: 100%;
+  }
+
+  .filter-select-compact {
+    padding: 0.4rem 0.6rem;
+    border: 1px solid var(--border-medium);
+    border-radius: 0;
+    font-size: 0.8rem;
+    font-family: var(--font-primary);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: all var(--transition-base);
+    min-width: 90px;
+    max-width: 100%;
+  }
+
+  .filter-select-compact:hover {
+    border-color: var(--border-dark);
+  }
+
+  .filter-select-compact:focus {
+    outline: none;
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+  }
+
+  .filter-select:hover {
+    border-color: var(--border-dark);
+  }
+
+  .filter-select:focus {
+    outline: none;
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+  }
+
+  .filter-checkbox-inline {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--text-primary);
+    cursor: pointer;
+  }
+
+  .filter-checkbox-compact {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.8rem;
+    color: var(--text-primary);
+    cursor: pointer;
+    white-space: nowrap;
   }
-  
-  .App-header h1 {
+
+  .filter-checkbox-compact input[type="checkbox"] {
     margin: 0;
-    font-size: 1.5rem;
-    font-weight: 600;
-    letter-spacing: -0.01em;
-    line-height: 1.3;
-    color: #ffffff;
+    cursor: pointer;
   }
-  
-  .App-header a {
-    color: #64b5f6;
-    text-decoration: none;
+
+  .filter-item-label {
+    font-size: 0.75rem;
     font-weight: 500;
-    transition: all var(--transition-base);
+    color: var(--text-secondary);
+    white-space: nowrap;
+    min-width: 60px;
   }
-  
-  .App-header a:hover {
-    color: #90caf9;
+
+  .filter-item-value {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    min-width: 45px;
+    text-align: right;
+    white-space: nowrap;
   }
-  
-  .stats {
-    display: flex;
-    gap: 0.75rem;
+
+  .model-count-compact {
     font-size: 0.85rem;
-    flex-wrap: wrap;
+    font-weight: 600;
+    color: var(--text-primary);
   }
-  
-  .stats span {
-    padding: 0.5rem 0.875rem;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 0;
-    border: 1px solid rgba(255, 255, 255, 0.2);
+
+  .model-count-compact-separator {
+    font-size: 0.75rem;
+    color: var(--text-tertiary);
+    margin: 0 0.15rem;
+  }
+
+  .model-count-compact-secondary {
+    font-size: 0.8rem;
     font-weight: 500;
-    transition: all var(--transition-base);
+    color: var(--text-secondary);
   }
-  
-  .stats span:hover {
-    background: rgba(255, 255, 255, 0.15);
+
+  .filter-checkbox-inline input[type="checkbox"] {
+    margin: 0;
+    cursor: pointer;
   }
-  
-  /* ============================================
-     LAYOUT
-     ============================================ */
-  .main-content {
+
+  .model-count-inline {
+    margin-left: auto;
     display: flex;
-    height: calc(100vh - 80px);
+    align-items: baseline;
+    gap: 0.25rem;
+    font-size: 0.875rem;
   }
-  
-  .sidebar {
-    width: 340px;
-    padding: 1.5rem;
-    background: var(--bg-secondary);
-    overflow-y: auto;
-    border-right: 1px solid var(--border-light);
+
+  .model-count-inline .model-count-value {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .model-count-inline .model-count-label {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
   }
   
   .visualization {
     flex: 1;
-    padding: 1.5rem;
+    padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--bg-primary);
-    overflow: auto;
+    overflow: hidden;
     position: relative;
+    width: 100%;
+    height: 100%;
   }
   
   /* ============================================
      SIDEBAR COMPONENTS
      ============================================ */
+  .sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border-light);
+  }
+  
   .sidebar h2 {
-    margin-top: 0;
-    font-size: 1.25rem;
+    margin: 0;
+    font-size: 1.5rem;
     font-weight: 600;
     letter-spacing: -0.01em;
     color: var(--text-primary);
   }
   
   .sidebar h3 {
-    font-size: 0.9rem;
+    font-size: 1rem;
     font-weight: 600;
     margin: 0 0 0.875rem 0;
     letter-spacing: -0.01em;
     color: var(--text-primary);
+    line-height: 1.3;
   }
   
   .sidebar-section {
     background: var(--bg-elevated);
     border-radius: 0;
     padding: 1.25rem;
-    margin-bottom: 1rem;
+    margin-bottom: 1.25rem;
     border: 1px solid var(--border-light);
     transition: all var(--transition-base);
   }
@@ -179,6 +1362,79 @@
     border-color: var(--border-medium);
     box-shadow: var(--shadow-sm);
   }
+
+  .sidebar-section:last-child {
+    margin-bottom: 0;
+  }
+  
+  .filter-badge {
+    font-size: 0.75rem;
+    background: var(--accent-primary);
+    color: white;
+    padding: 0.35rem 0.7rem;
+    border-radius: 0;
+    font-weight: 600;
+  }
+  
+  .model-count-display {
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-medium);
+    font-size: 0.9rem;
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+  }
+  
+  .model-count-main {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+  }
+  
+  .model-count-value {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+  
+  .model-count-label {
+    margin-left: 0.4rem;
+    color: var(--text-secondary);
+  }
+  
+  .model-count-meta {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    margin-top: 0.25rem;
+  }
+  
+  .model-count-meta:last-child {
+    font-size: 0.75rem;
+  }
+  
+  .filter-label-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+  }
+  
+  .filter-label {
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+  
+  .filter-value {
+    font-weight: 600;
+    color: var(--accent-primary);
+  }
+  
+  .filter-range-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.7rem;
+    color: var(--text-secondary);
+    margin-top: 0.25rem;
+  }
   
   /* ============================================
      FORM ELEMENTS
@@ -248,11 +1504,10 @@
     transition: all var(--transition-base);
   }
   
-  .sidebar input[type="range"]::-webkit-slider-thumb:hover {
-    background: var(--accent-hover);
-    transform: scale(1.15);
-    box-shadow: var(--shadow-lg);
-  }
+.sidebar input[type="range"]::-webkit-slider-thumb:hover {
+  background: var(--accent-hover);
+  box-shadow: var(--shadow-lg);
+}
   
   .sidebar input[type="range"]::-moz-range-thumb {
     width: 18px;
@@ -265,11 +1520,10 @@
     transition: all var(--transition-base);
   }
   
-  .sidebar input[type="range"]::-moz-range-thumb:hover {
-    background: var(--accent-hover);
-    transform: scale(1.15);
-    box-shadow: var(--shadow-lg);
-  }
+.sidebar input[type="range"]::-moz-range-thumb:hover {
+  background: var(--accent-hover);
+  box-shadow: var(--shadow-lg);
+}
   
   /* Checkbox */
   .sidebar input[type="checkbox"] {
@@ -279,6 +1533,83 @@
     accent-color: var(--accent-primary);
     margin-right: 0.5rem;
   }
+
+  /* Form Groups */
+  .form-group {
+    margin-bottom: 1.25rem;
+  }
+
+  .form-group:last-child {
+    margin-bottom: 0;
+  }
+
+  .form-label {
+    display: block;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+    letter-spacing: -0.01em;
+  }
+
+  .form-select {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 2px solid var(--border-light);
+    border-radius: 0;
+    font-size: 0.9rem;
+    font-family: var(--font-primary);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    transition: all var(--transition-base);
+    box-shadow: var(--shadow-sm);
+    cursor: pointer;
+  }
+
+  .form-select:hover {
+    border-color: var(--border-medium);
+    box-shadow: var(--shadow-md);
+    background: var(--bg-secondary);
+  }
+
+  .form-select:focus {
+    outline: none;
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+    background: var(--bg-primary);
+  }
+
+  /* Checkbox Labels */
+  .checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    margin-bottom: 0.75rem;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-light);
+    border-radius: 0;
+    cursor: pointer;
+    transition: all var(--transition-base);
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+
+  .checkbox-label:hover {
+    background: var(--bg-tertiary);
+    border-color: var(--border-medium);
+  }
+
+  .checkbox-label input[type="checkbox"] {
+    margin: 0;
+    cursor: pointer;
+  }
+
+  .checkbox-label span {
+    flex: 1;
+    user-select: none;
+  }
   
   /* ============================================
      BUTTONS
@@ -304,11 +1635,10 @@
     box-shadow: var(--shadow-md);
   }
   
-  .btn-primary:hover:not(:disabled) {
-    background: var(--accent-hover);
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-lg);
-  }
+.btn-primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+  box-shadow: var(--shadow-lg);
+}
   
   .btn-secondary {
     background: var(--bg-tertiary);
@@ -343,26 +1673,26 @@
     align-items: center;
     gap: 0.5rem;
     padding: 0.4rem 0.75rem;
-    background: #e3f2fd;
-    color: #1976d2;
+    background: var(--bg-tertiary, #f5f5f5);
+    color: var(--text-primary, #1a1a1a);
     border-radius: 0;
     font-size: 0.8rem;
     font-weight: 500;
-    border: 1px solid #90caf9;
+    border: 1px solid var(--border-medium, #d0d0d0);
     cursor: pointer;
     transition: all var(--transition-base);
   }
   
-  .filter-chip:hover {
-    background: #bbdefb;
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-sm);
-  }
+.filter-chip:hover {
+  background: var(--bg-secondary, #fafafa);
+  box-shadow: var(--shadow-sm);
+  border-color: var(--accent-blue, #4a90e2);
+}
   
   .filter-chip.active {
-    background: #1976d2;
-    color: white;
-    border-color: #1976d2;
+    background: var(--accent-blue, #4a90e2);
+    color: #ffffff;
+    border-color: var(--accent-blue, #4a90e2);
   }
   
   .filter-chip .remove {
@@ -546,10 +1876,14 @@
     position: absolute;
     cursor: pointer;
     inset: 0;
-    background-color: #ccc;
+    background-color: var(--border-medium, #d0d0d0);
     border-radius: 0;
     transition: background-color var(--transition-slow);
   }
+
+  [data-theme="dark"] .label-toggle-slider {
+    background-color: #555;
+  }
   
   .label-toggle-slider:before {
     position: absolute;
@@ -586,10 +1920,10 @@
     transition: all var(--transition-base);
   }
   
-  .theme-toggle:hover {
-    background: var(--bg-tertiary);
-    transform: scale(1.05);
-  }
+.theme-toggle:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--accent-blue);
+}
   
   /* ============================================
      ZOOM CONTROLS
@@ -634,10 +1968,9 @@
     transition: all var(--transition-base);
   }
   
-  .zoom-slider::-webkit-slider-thumb:hover {
-    transform: scale(1.2);
-    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2);
-  }
+.zoom-slider::-webkit-slider-thumb:hover {
+  box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2);
+}
   
   .zoom-slider::-moz-range-thumb {
     width: 16px;
@@ -649,10 +1982,9 @@
     transition: all var(--transition-base);
   }
   
-  .zoom-slider::-moz-range-thumb:hover {
-    transform: scale(1.2);
-    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2);
-  }
+.zoom-slider::-moz-range-thumb:hover {
+  box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2);
+}
   
   .zoom-slider:disabled {
     opacity: 0.5;
@@ -699,11 +2031,11 @@
   
   .loading::after {
     content: '';
-    width: 40px;
-    height: 40px;
-    border: 4px solid var(--border-light);
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--border-light);
     border-top-color: var(--accent-primary);
-    border-radius: 0;
+    border-radius: 50%;
     animation: spin 0.8s linear infinite;
   }
   
@@ -719,6 +2051,12 @@
     border: 1px solid #ffcdd2;
     font-weight: 500;
   }
+
+  [data-theme="dark"] .error {
+    color: #ff6b6b;
+    background: rgba(211, 47, 47, 0.2);
+    border: 1px solid rgba(211, 47, 47, 0.4);
+  }
   
   .empty {
     color: var(--text-secondary);
@@ -767,4 +2105,215 @@
   .visualization svg {
     display: block;
     background: var(--bg-primary);
+  }
+  
+  /* ============================================
+     RESPONSIVE DESIGN
+     ============================================ */
+  @media (max-width: 1024px) {
+    .nav-sidebar {
+      width: 200px;
+    }
+
+    .nav-sidebar.collapsed {
+      width: 50px;
+    }
+
+    .app-main {
+      margin-left: 200px;
+      width: calc(100% - 200px);
+    }
+
+    .nav-sidebar.collapsed ~ .app-main {
+      margin-left: 50px;
+      width: calc(100% - 50px);
+    }
+
+    .filters-bar-content {
+      gap: 1rem;
+      padding: 0.75rem 1rem;
+    }
+
+    .filter-section {
+      gap: 0.75rem;
+      padding-right: 1rem;
+    }
+
+    .sidebar {
+      width: 300px;
+      padding: 1rem;
+    }
+    
+    .header-content {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    
+    .header-right {
+      width: 100%;
+      justify-content: flex-start;
+      margin-top: 0.5rem;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .nav-sidebar {
+      width: 60px;
+    }
+
+    .nav-sidebar .nav-sidebar-header h1,
+    .nav-sidebar .nav-subtitle {
+      display: none;
+    }
+
+    .app-main {
+      margin-left: 60px;
+      width: calc(100% - 60px);
+    }
+
+    .control-bar-content {
+      flex-wrap: wrap;
+      gap: 0.75rem;
+      padding: 0.5rem 0.75rem;
+    }
+
+    .control-bar-center {
+      order: 2;
+      width: 100%;
+      justify-content: flex-start;
+      gap: 0.75rem;
+    }
+
+    .control-bar-right {
+      order: 1;
+      width: 100%;
+      justify-content: flex-start;
+    }
+
+    .control-search {
+      width: 100%;
+    }
+
+    .control-search-input {
+      width: 100%;
+      max-width: none;
+    }
+
+    .filters-dropdown {
+      left: auto;
+      right: 0;
+      min-width: 200px;
+    }
+
+    .control-select {
+      min-width: 110px;
+    }
+
+    .App-header {
+      padding: 1rem;
+    }
+    
+    .App-header h1 {
+      font-size: 1.25rem;
+    }
+    
+    .nav-tab {
+      padding: 0.4rem 0.75rem;
+      font-size: 0.85rem;
+    }
+    
+    .sidebar {
+      width: 100%;
+      max-width: 100%;
+      border-right: none;
+      border-bottom: 1px solid var(--border-light);
+    }
+    
+    .main-content {
+      flex-direction: column;
+      height: auto;
+    }
+    
+    .visualization {
+      min-height: 500px;
+    }
+
+    .nav-sidebar {
+      width: 200px;
+    }
+
+    .app-main {
+      margin-left: 200px;
+    }
+
+    .nav-sidebar-header h1 {
+      font-size: 1.25rem;
+    }
+
+    .nav-tab {
+      font-size: 0.85rem;
+      padding: 0.6rem 1rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .nav-sidebar {
+      width: 180px;
+    }
+
+    .app-main {
+      margin-left: 180px;
+      width: calc(100% - 180px);
+    }
+
+    .nav-sidebar-header {
+      padding: 1.5rem 1rem 1rem;
+    }
+
+    .nav-tabs {
+      padding: 0.75rem 0;
+    }
+
+    .nav-tab {
+      font-size: 0.8rem;
+      padding: 0.5rem 1rem;
+    }
+
+    .filters-top-bar {
+      padding: 0.5rem;
+    }
+
+    .filters-bar-content {
+      gap: 0.5rem;
+      flex-wrap: wrap;
+    }
+
+    .filter-input {
+      min-width: 120px;
+      font-size: 0.75rem;
+      padding: 0.4rem 0.5rem;
+    }
+
+    .filter-select {
+      min-width: 80px;
+      font-size: 0.75rem;
+      padding: 0.35rem 0.4rem;
+    }
+
+    .filter-range {
+      width: 60px;
+    }
+
+    .filter-label-inline {
+      font-size: 0.75rem;
+    }
+
+    .filter-label-inline span:first-child {
+      min-width: 50px;
+    }
+
+    .filter-value-inline {
+      min-width: 40px;
+      font-size: 0.75rem;
+    }
   }

frontend/src/App.tsx

@@ -1,37 +1,38 @@
 import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-// Visualizations
-import ScatterPlot from './components/visualizations/ScatterPlot';
+import { ChevronLeft, ChevronRight, Palette, Maximize2, Eye } from 'lucide-react';
+import IntroModal from './components/ui/IntroModal';
 import ScatterPlot3D from './components/visualizations/ScatterPlot3D';
 import NetworkGraph from './components/visualizations/NetworkGraph';
 import DistributionView from './components/visualizations/DistributionView';
-// Controls
-import RandomModelButton from './components/controls/RandomModelButton';
-import ZoomSlider from './components/controls/ZoomSlider';
-import ThemeToggle from './components/controls/ThemeToggle';
-// import RenderingStyleSelector from './components/controls/RenderingStyleSelector';
-// import VisualizationModeButtons from './components/controls/VisualizationModeButtons';
-// import ClusterFilter from './components/controls/ClusterFilter';
 import type { Cluster } from './components/controls/ClusterFilter';
-import NodeDensitySlider from './components/controls/NodeDensitySlider';
-// Modals
-import ModelModal from './components/modals/ModelModal';
-// UI Components
-import LiveModelCount from './components/ui/LiveModelCount';
-// import ModelTooltip from './components/ui/ModelTooltip';
 import ErrorBoundary from './components/ui/ErrorBoundary';
-import VirtualSearchResults from './components/ui/VirtualSearchResults';
+import LiveModelCounter from './components/ui/LiveModelCounter';
+import ModelPopup from './components/ui/ModelPopup';
+import AnalyticsPage from './pages/AnalyticsPage';
+import FamiliesPage from './pages/FamiliesPage';
 // Types & Utils
-import { ModelPoint, Stats, FamilyTree, SearchResult, SimilarModel } from './types';
+import { ModelPoint, Stats, SearchResult } from './types';
+import IntegratedSearch from './components/controls/IntegratedSearch';
 import cache, { IndexedDBCache } from './utils/data/indexedDB';
 import { debounce } from './utils/debounce';
 import requestManager from './utils/api/requestManager';
 import { fetchWithMsgPack, decodeModelsMsgPack } from './utils/api/msgpackDecoder';
-import { useFilterStore, ViewMode, ColorByOption, SizeByOption } from './stores/filterStore';
+import { useFilterStore, ViewMode, ColorByOption, SizeByOption, FilterState } from './stores/filterStore';
 import { API_BASE } from './config/api';
 import './App.css';
 
 const logger = {
   error: (message: string, error?: unknown) => {
+    // Suppress NetworkError messages - they're expected during backend startup
+    if (error instanceof Error) {
+      const errorMsg = error.message.toLowerCase();
+      if (errorMsg.includes('networkerror') || 
+          errorMsg.includes('failed to fetch') ||
+          errorMsg.includes('network request failed')) {
+        // Silently ignore network errors during startup
+        return;
+      }
+    }
     if (process.env.NODE_ENV === 'development') {
       console.error(message, error);
     }
@@ -39,16 +40,11 @@ const logger = {
 };
 
 function App() {
-  // Filter store state
   const {
     viewMode,
     colorBy,
     sizeBy,
     colorScheme,
-    showLabels,
-    zoomLevel,
-    // nodeDensity,
-    // renderingStyle,
     theme,
     selectedClusters,
     searchQuery,
@@ -58,16 +54,7 @@ function App() {
     setColorBy,
     setSizeBy,
     setColorScheme,
-    setShowLabels,
-    setZoomLevel,
-    // setNodeDensity,
-    // setRenderingStyle,
-    // setSelectedClusters,
     setSearchQuery,
-    setMinDownloads,
-    setMinLikes,
-    getActiveFilterCount,
-    resetFilters: resetFilterStore,
   } = useFilterStore();
 
   // Initialize theme on mount
@@ -76,65 +63,67 @@ function App() {
   }, [theme]);
 
   const [data, setData] = useState<ModelPoint[]>([]);
-  const [filteredCount, setFilteredCount] = useState<number | null>(null);
-  const [stats, setStats] = useState<Stats | null>(null);
+  const [, setFilteredCount] = useState<number | null>(null);
+  const [, setReturnedCount] = useState<number | null>(null);
+  const [, setStats] = useState<Stats | null>(null);
   const [loading, setLoading] = useState(true);
+  const [, setLoadingMessage] = useState<string>('Loading models...');
+  const [, setLoadingProgress] = useState<number | undefined>(undefined);
   const [error, setError] = useState<string | null>(null);
   const [selectedModel, setSelectedModel] = useState<ModelPoint | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [selectedModels, setSelectedModels] = useState<ModelPoint[]>([]);
-  const [baseModelsOnly, setBaseModelsOnly] = useState(false);
-  const [semanticSimilarityMode, setSemanticSimilarityMode] = useState(false);
-  const [semanticQueryModel, setSemanticQueryModel] = useState<string | null>(null);
+  const [showIntro, setShowIntro] = useState(() => {
+    // Check if user has dismissed the intro before
+    return localStorage.getItem('hf-intro-dismissed') !== 'true';
+  });
+  const [baseModelsOnly] = useState(false);
+  const [navCollapsed, setNavCollapsed] = useState(false);
+  const [semanticSimilarityMode] = useState(false);
+  const [semanticQueryModel] = useState<string | null>(null);
+  const [showAnalytics, setShowAnalytics] = useState(false);
+  const [showFamilies, setShowFamilies] = useState(false);
   
-  const [familyTree, setFamilyTree] = useState<ModelPoint[]>([]);
-  const [familyTreeModelId, setFamilyTreeModelId] = useState<string | null>(null);
-  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
-  const [searchInput, setSearchInput] = useState('');
-  const [showSearchResults, setShowSearchResults] = useState(false);
-  // const [viewCenter, setViewCenter] = useState<{ x: number; y: number; z: number } | null>(null);
-  const [projectionMethod, setProjectionMethod] = useState<'umap' | 'tsne'>('umap');
+  const [, setSearchResults] = useState<SearchResult[]>([]);
+  const [searchInput] = useState('');
+  const [, setShowSearchResults] = useState(false);
+  const [projectionMethod] = useState<'umap' | 'tsne'>('umap');
   const [bookmarkedModels, setBookmarkedModels] = useState<string[]>([]);
-  const [comparisonModels, setComparisonModels] = useState<ModelPoint[]>([]);
-  const [similarModels, setSimilarModels] = useState<SimilarModel[]>([]);
-  const [showSimilar, setShowSimilar] = useState(false);
-  const [showLegend, setShowLegend] = useState(true);
-  const [hoveredModel, setHoveredModel] = useState<ModelPoint | null>(null);
-  const [tooltipPosition, setTooltipPosition] = useState<{ x: number; y: number } | null>(null);
+  const [, setHoveredModel] = useState<ModelPoint | null>(null);
+  const [, setTooltipPosition] = useState<{ x: number; y: number } | null>(null);
+  const [, setLiveModelCount] = useState<number | null>(null);
   
-  // Structural visualization options
-  const [showNetworkEdges, setShowNetworkEdges] = useState(false);
-  const [showStructuralGroups, setShowStructuralGroups] = useState(false);
-  const [overviewMode, setOverviewMode] = useState(false);
-  const [networkEdgeType, setNetworkEdgeType] = useState<'library' | 'pipeline' | 'combined'>('combined');
-  const [maxHierarchyDepth, setMaxHierarchyDepth] = useState<number | null>(null);
-  const [showDistanceHeatmap, setShowDistanceHeatmap] = useState(false);
-  const [highlightedPath, setHighlightedPath] = useState<string[]>([]);
-  const [useGraphEmbeddings, setUseGraphEmbeddings] = useState(false);
-  const [embeddingType, setEmbeddingType] = useState<string>('text-only');
-  const [clusters, setClusters] = useState<Cluster[]>([]);
-  const [clustersLoading, setClustersLoading] = useState(false);
+  const [useGraphEmbeddings] = useState(false);
+  const [, setEmbeddingType] = useState<string>('text-only');
+  const [, setClusters] = useState<Cluster[]>([]);
+  const [, setClustersLoading] = useState(false);
   
-  const activeFilterCount = getActiveFilterCount();
-  
-  const resetFilters = useCallback(() => {
-    resetFilterStore();
-    setMinDownloads(0);
-    setMinLikes(0);
-    setSearchQuery('');
-  }, [resetFilterStore, setMinDownloads, setMinLikes, setSearchQuery]);
 
-  const [width, setWidth] = useState(window.innerWidth * 0.7);
-  const [height, setHeight] = useState(window.innerHeight * 0.7);
+  const [width, setWidth] = useState(window.innerWidth - 240); // Account for left sidebar
+  const [height, setHeight] = useState(window.innerHeight - 160); // Account for header and top bar
 
   useEffect(() => {
     const handleResize = () => {
-      setWidth(window.innerWidth * 0.7);
-      setHeight(window.innerHeight * 0.7);
+      setWidth(window.innerWidth - 240); // Account for left sidebar (240px)
+      setHeight(window.innerHeight - 160); // Account for header (~80px) and top bar (~80px)
     };
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
   }, []);
+  
+  // Stable callbacks for ScatterPlot3D to prevent re-renders
+  const handlePointClick = useCallback((model: ModelPoint) => {
+    setSelectedModel(model);
+    setIsModalOpen(true);
+  }, []);
+
+  const handleHover = useCallback((model: ModelPoint | null, position?: { x: number; y: number }) => {
+    setHoveredModel(model);
+    if (model && position) {
+      setTooltipPosition(position);
+    } else {
+      setTooltipPosition(null);
+    }
+  }, []);
 
   const fetchDataAbortRef = useRef<(() => void) | null>(null);
 
@@ -159,16 +148,16 @@ function App() {
         setData(cachedModels);
         setFilteredCount(cachedModels.length);
         setLoading(false);
-        // Fetch in background to update cache if stale
-        setTimeout(() => {
-          fetchData();
-        }, 100);
+        // Don't recursively call fetchData - it causes infinite loops
+        // The cache is valid, use it
         return;
       }
       let models: ModelPoint[];
       let count: number | null = null;
       
       if (semanticSimilarityMode && semanticQueryModel) {
+        setLoadingMessage('Finding similar models...');
+        setLoadingProgress(50);
         const params = new URLSearchParams({
           query_model_id: semanticQueryModel,
           k: '500',
@@ -191,6 +180,8 @@ function App() {
           count = models.length;
         }
       } else {
+        setLoadingMessage('Loading embeddings and coordinates...');
+        setLoadingProgress(40);
         const params = new URLSearchParams({
           min_downloads: minDownloads.toString(),
           min_likes: minLikes.toString(),
@@ -204,7 +195,8 @@ function App() {
           params.append('search_query', searchQuery);
         }
         
-        params.append('max_points', viewMode === '3d' ? '50000' : viewMode === 'scatter' ? '10000' : viewMode === 'network' ? '500' : '5000');
+        // Request up to 150k models for scatter plots, limit network graph for performance
+        params.append('max_points', viewMode === 'network' ? '500' : '150000');
         // Add format parameter for MessagePack support
         params.append('format', 'msgpack');
 
@@ -236,6 +228,7 @@ function App() {
             } else {
               models = result.models || [];
               count = result.filtered_count ?? models.length;
+              setReturnedCount(result.returned_count ?? models.length);
               setEmbeddingType(result.embedding_type || 'text-only');
             }
           }
@@ -253,6 +246,7 @@ function App() {
           } else {
             models = result.models || [];
             count = result.filtered_count ?? models.length;
+            setReturnedCount(result.returned_count ?? models.length);
             setEmbeddingType(result.embedding_type || 'text-only');
           }
         }
@@ -276,56 +270,124 @@ function App() {
       setLoading(false);
       fetchDataAbortRef.current = null;
     }
-  }, [minDownloads, minLikes, searchQuery, colorBy, sizeBy, projectionMethod, baseModelsOnly, semanticSimilarityMode, semanticQueryModel, useGraphEmbeddings, selectedClusters, viewMode]);
+  }, [minDownloads, minLikes, searchQuery, projectionMethod, baseModelsOnly, semanticSimilarityMode, semanticQueryModel, useGraphEmbeddings, selectedClusters, viewMode]);
+
+  // Debounce times for different control types
+  const SLIDER_DEBOUNCE_MS = 500; // Sliders need longer debounce
+  const SEARCH_DEBOUNCE_MS = 300; // Search debounce
+  const DROPDOWN_DEBOUNCE_MS = 200; // Dropdowns need shorter debounce
 
   const debouncedFetchData = useMemo(
-    () => debounce(fetchData, 300),
+    () => debounce(fetchData, SEARCH_DEBOUNCE_MS),
     [fetchData]
   );
 
+  // Debounced setters for sliders (minDownloads, minLikes)
+  // Debounced setter for search
+  const debouncedSetSearchQuery = useMemo(
+    () => debounce((query: string) => {
+      setSearchQuery(query);
+    }, SEARCH_DEBOUNCE_MS),
+    [setSearchQuery]
+  );
+
+  // Debounced setters for dropdowns
+  const debouncedSetColorBy = useMemo(
+    () => debounce((value: ColorByOption) => {
+      setColorBy(value);
+    }, DROPDOWN_DEBOUNCE_MS),
+    [setColorBy]
+  );
+
+  const debouncedSetSizeBy = useMemo(
+    () => debounce((value: SizeByOption) => {
+      setSizeBy(value);
+    }, DROPDOWN_DEBOUNCE_MS),
+    [setSizeBy]
+  );
+
+  const debouncedSetViewMode = useMemo(
+    () => debounce((mode: ViewMode) => {
+      setViewMode(mode);
+    }, DROPDOWN_DEBOUNCE_MS),
+    [setViewMode]
+  );
+
+  const debouncedSetColorScheme = useMemo(
+    () => debounce((scheme: FilterState['colorScheme']) => {
+      setColorScheme(scheme);
+    }, DROPDOWN_DEBOUNCE_MS),
+    [setColorScheme]
+  );
+
+  // Local state for search to show immediate feedback
+  const [localSearchQuery, setLocalSearchQuery] = useState(searchQuery);
+
+  // Sync local state with store state when store changes externally
+  useEffect(() => {
+    setLocalSearchQuery(searchQuery);
+  }, [searchQuery]);
+
+  // Cleanup debounced functions on unmount
+  useEffect(() => {
+    return () => {
+      debouncedSetSearchQuery.cancel();
+      debouncedSetColorBy.cancel();
+      debouncedSetSizeBy.cancel();
+      debouncedSetViewMode.cancel();
+      debouncedSetColorScheme.cancel();
+    };
+  }, [debouncedSetSearchQuery, debouncedSetColorBy, debouncedSetSizeBy, debouncedSetViewMode, debouncedSetColorScheme]);
+
+  // Initial fetch on mount (with delay to allow backend to start)
+  useEffect(() => {
+    // Delay initial fetch to allow backend to start
+    const timer = setTimeout(() => {
+      fetchData();
+    }, 500); // 500ms delay
+    
+    return () => clearTimeout(timer);
+  }, [fetchData]); // Include fetchData dependency
+
   // Consolidated effect to handle both search and filter changes
+  // NOTE: colorBy and sizeBy are CLIENT-SIDE only - don't refetch data for these changes
+  // Skip if this is the initial mount (first 600ms) - let the initial fetch effect handle it
+  const hasMounted = useRef(false);
   useEffect(() => {
-    // For search queries, use debounced version
-    if (searchQuery) {
-      debouncedFetchData();
-      return () => {
-        debouncedFetchData.cancel();
-      };
-    } else {
-      // For filter changes without search, also use debounced version
-      debouncedFetchData();
-      return () => {
-        debouncedFetchData.cancel();
-      };
+    if (!hasMounted.current) {
+      hasMounted.current = true;
+      return;
     }
-  }, [searchQuery, minDownloads, minLikes, colorBy, sizeBy, baseModelsOnly, projectionMethod, semanticSimilarityMode, semanticQueryModel, useGraphEmbeddings, selectedClusters, viewMode, debouncedFetchData]);
+    
+    // For search queries or filter changes, use debounced version
+    debouncedFetchData();
+    return () => {
+      debouncedFetchData.cancel();
+    };
+  }, [searchQuery, minDownloads, minLikes, baseModelsOnly, projectionMethod, semanticSimilarityMode, semanticQueryModel, useGraphEmbeddings, selectedClusters, viewMode, debouncedFetchData]);
 
-  // Function to clear cache and refresh stats
-  const clearCacheAndRefresh = useCallback(async () => {
-    try {
-      // Clear all caches
-      await cache.clear('stats');
-      await cache.clear('models');
-      console.log('Cache cleared successfully');
-      
-      // Immediately fetch fresh stats
-      const response = await fetch(`${API_BASE}/api/stats`);
-      if (!response.ok) throw new Error('Failed to fetch stats');
-      const statsData = await response.json();
-      await cache.cacheStats('stats', statsData);
-      setStats(statsData);
-      
-      // Refresh model data
-      fetchData();
-    } catch (err) {
-      if (err instanceof Error) {
-        logger.error('Error clearing cache:', err);
+  // Fetch live model count
+  useEffect(() => {
+    const fetchLiveCount = async () => {
+      try {
+        const response = await fetch(`${API_BASE}/api/model-count/current?use_models_page=true&use_cache=true`);
+        if (response.ok) {
+          const data = await response.json();
+          setLiveModelCount(data.total_models);
+        }
+      } catch (err) {
+        // Silently fail - live count is optional
       }
-    }
-  }, [fetchData]);
+    };
+    
+    fetchLiveCount();
+    // Refresh every 5 minutes
+    const interval = setInterval(fetchLiveCount, 5 * 60 * 1000);
+    return () => clearInterval(interval);
+  }, []);
 
   useEffect(() => {
-    const fetchStats = async () => {
+    const fetchStats = async (retries = 3) => {
       const cacheKey = 'stats';
       const cachedStats = await cache.getCachedStats(cacheKey);
       
@@ -336,41 +398,71 @@ function App() {
         setStats(cachedStats);
       }
       
-      // Always fetch fresh stats to update
-      try {
-        const response = await fetch(`${API_BASE}/api/stats`);
-        if (!response.ok) throw new Error('Failed to fetch stats');
-        const statsData = await response.json();
-        await cache.cacheStats(cacheKey, statsData);
-        setStats(statsData);
-      } catch (err) {
-        if (err instanceof Error) {
-          logger.error('Error fetching stats:', err);
+      // Always fetch fresh stats to update with retry logic
+      for (let i = 0; i < retries; i++) {
+        try {
+          const response = await fetch(`${API_BASE}/api/stats`);
+          if (!response.ok) throw new Error('Failed to fetch stats');
+          const statsData = await response.json();
+          await cache.cacheStats(cacheKey, statsData);
+          setStats(statsData);
+          return; // Success
+        } catch (err) {
+          if (i === retries - 1) {
+            // Only log on final retry failure (and not NetworkError)
+            if (err instanceof Error && !err.message.includes('NetworkError')) {
+              logger.error('Error fetching stats:', err);
+            }
+          } else {
+            // Wait before retry (exponential backoff)
+            await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
+          }
         }
       }
     };
 
-    fetchStats();
+    // Delay initial fetch to allow backend to start
+    const timer = setTimeout(() => {
+      fetchStats();
+    }, 1000);
+    
+    return () => clearTimeout(timer);
   }, []);
 
-  // Fetch clusters
+  // Fetch clusters with retry logic
   useEffect(() => {
-    const fetchClusters = async () => {
+    const fetchClusters = async (retries = 3) => {
       setClustersLoading(true);
-      try {
-        const response = await fetch(`${API_BASE}/api/clusters`);
-        if (!response.ok) throw new Error('Failed to fetch clusters');
-        const data = await response.json();
-        setClusters(data.clusters || []);
-      } catch (err) {
-        logger.error('Error fetching clusters:', err);
-        setClusters([]);
-      } finally {
-        setClustersLoading(false);
+      for (let i = 0; i < retries; i++) {
+        try {
+          const response = await fetch(`${API_BASE}/api/clusters`);
+          if (!response.ok) throw new Error('Failed to fetch clusters');
+          const data = await response.json();
+          setClusters(data.clusters || []);
+          setClustersLoading(false);
+          return; // Success
+        } catch (err) {
+          if (i === retries - 1) {
+            // Only log on final retry failure
+            if (err instanceof Error && !err.message.includes('NetworkError')) {
+              logger.error('Error fetching clusters:', err);
+            }
+            setClusters([]);
+            setClustersLoading(false);
+          } else {
+            // Wait before retry (exponential backoff)
+            await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
+          }
+        }
       }
     };
 
-    fetchClusters();
+    // Delay initial fetch to allow backend to start
+    const timer = setTimeout(() => {
+      fetchClusters();
+    }, 1000);
+    
+    return () => clearTimeout(timer);
   }, []);
 
   // Search models for family tree lookup
@@ -400,77 +492,6 @@ function App() {
     return () => clearTimeout(timer);
   }, [searchInput, searchModels]);
 
-  const loadFamilyTree = useCallback(async (modelId: string) => {
-    try {
-      const response = await fetch(`${API_BASE}/api/family/${encodeURIComponent(modelId)}?max_depth=5`);
-      if (!response.ok) throw new Error('Failed to load family tree');
-      const data: FamilyTree = await response.json();
-      setFamilyTree(data.family || []);
-      setFamilyTreeModelId(modelId);
-      setShowSearchResults(false);
-      setSearchInput('');
-    } catch (err) {
-      logger.error('Family tree error:', err);
-      setFamilyTree([]);
-      setFamilyTreeModelId(null);
-    }
-  }, []);
-
-  const clearFamilyTree = useCallback(() => {
-    setFamilyTree([]);
-    setFamilyTreeModelId(null);
-  }, []);
-
-  const loadFamilyPath = useCallback(async (modelId: string, targetId?: string) => {
-    try {
-      const url = targetId
-        ? `${API_BASE}/api/family/path/${encodeURIComponent(modelId)}?target_id=${encodeURIComponent(targetId)}`
-        : `${API_BASE}/api/family/path/${encodeURIComponent(modelId)}`;
-      const response = await fetch(url);
-      if (!response.ok) throw new Error('Failed to load path');
-      const data = await response.json();
-      setHighlightedPath(data.path || []);
-    } catch (err) {
-      logger.error('Path loading error:', err);
-      setHighlightedPath([]);
-    }
-  }, []);
-
-  const loadSimilarModels = useCallback(async (modelId: string) => {
-    try {
-      const response = await fetch(`${API_BASE}/api/similar/${encodeURIComponent(modelId)}?k=10`);
-      if (!response.ok) {
-        const errorText = await response.text();
-        let errorMessage = 'Failed to load similar models';
-        if (response.status === 404) {
-          errorMessage = 'Model not found';
-        } else if (response.status === 503) {
-          errorMessage = 'Data not loaded yet. Please wait a moment and try again.';
-        } else {
-          try {
-            const errorData = JSON.parse(errorText);
-            errorMessage = errorData.detail || errorMessage;
-          } catch {
-            errorMessage = `Error ${response.status}: ${errorText || errorMessage}`;
-          }
-        }
-        throw new Error(errorMessage);
-      }
-      const data = await response.json();
-      setSimilarModels(data.similar_models || []);
-      setShowSimilar(true);
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Failed to load similar models';
-      logger.error('Similar models error:', err);
-      if (errorMessage !== 'Failed to load similar models' || !(err instanceof TypeError && err.message.includes('fetch'))) {
-        setError(`Similar models: ${errorMessage}`);
-        setTimeout(() => setError(null), 5000);
-      }
-      setSimilarModels([]);
-      setShowSimilar(false);
-    }
-  }, []);
-
   // Bookmark management
   const toggleBookmark = useCallback((modelId: string) => {
     setBookmarkedModels(prev => 
@@ -480,851 +501,194 @@ function App() {
     );
   }, []);
 
-  // Comparison management
-  const addToComparison = useCallback((model: ModelPoint) => {
-    if (comparisonModels.length < 3 && !comparisonModels.find(m => m.model_id === model.model_id)) {
-      setComparisonModels(prev => [...prev, model]);
-    }
-  }, [comparisonModels]);
-
-  const removeFromComparison = useCallback((modelId: string) => {
-    setComparisonModels(prev => prev.filter(m => m.model_id !== modelId));
-  }, []);
-
-  // Export selected models
-  const exportModels = useCallback(async (modelIds: string[]) => {
-    try {
-      const response = await fetch(`${API_BASE}/api/export`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(modelIds),
-      });
-      if (!response.ok) throw new Error('Export failed');
-      const data = await response.json();
-      
-      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `models_export_${new Date().toISOString().split('T')[0]}.json`;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    } catch (err) {
-      logger.error('Export error:', err);
-      alert('Failed to export models');
-    }
-  }, []);
-
   return (
     <ErrorBoundary>
       <div className="App">
-      <header className="App-header">
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '1rem', width: '100%' }}>
-          <div style={{ flex: '1 1 auto', minWidth: '250px' }}>
-            <h1 style={{ margin: 0, fontSize: '1.5rem', fontWeight: '600', lineHeight: '1.2' }}>ML Ecosystem: 2M Models on Hugging Face</h1>
-            <div style={{ marginTop: '0.5rem', fontSize: '0.85rem', opacity: 0.9, display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
-              <a href="https://arxiv.org/abs/2508.06811" target="_blank" rel="noopener noreferrer" style={{ color: '#64b5f6', textDecoration: 'none', whiteSpace: 'nowrap' }}>Paper</a>
-              <a href="https://github.com/bendlaufer/ai-ecosystem" target="_blank" rel="noopener noreferrer" style={{ color: '#64b5f6', textDecoration: 'none', whiteSpace: 'nowrap' }}>GitHub</a>
-              <a href="https://huggingface.co/modelbiome" target="_blank" rel="noopener noreferrer" style={{ color: '#64b5f6', textDecoration: 'none', whiteSpace: 'nowrap' }}>Dataset</a>
-              <span style={{ opacity: 0.7, whiteSpace: 'nowrap' }}>Laufer, Oderinwale, Kleinberg</span>
-            </div>
-          </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap', flexShrink: 0 }}>
-            <LiveModelCount compact={true} />
-            {stats && (
-              <>
-                <div className="stats" style={{ display: 'flex', gap: '0.5rem', fontSize: '0.8rem', flexWrap: 'wrap' }}>
-                  <span>{stats.total_models.toLocaleString()} models</span>
-                  <span>{stats.unique_libraries} libraries</span>
-                </div>
-                <button
-                  onClick={clearCacheAndRefresh}
-                  style={{
-                    background: 'rgba(255, 255, 255, 0.15)',
-                    border: '1px solid rgba(255, 255, 255, 0.3)',
-                    borderRadius: '0',
-                    width: '32px',
-                    height: '32px',
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontSize: '16px',
-                    transition: 'all 0.2s ease',
-                    flexShrink: 0,
-                  }}
-                  onMouseOver={(e) => {
-                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.25)';
-                  }}
-                  onMouseOut={(e) => {
-                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.15)';
-                  }}
-                  title="Refresh data and clear cache"
-                  aria-label="Refresh data"
-                >
-                  ⟳
-                </button>
-              </>
-            )}
-          </div>
-        </div>
-      </header>
-
-      <div className="main-content">
-        <aside className="sidebar">
-          <div style={{ 
-            display: 'flex', 
-            justifyContent: 'space-between', 
-            alignItems: 'center', 
-            marginBottom: '1.5rem',
-            paddingBottom: '1rem',
-            borderBottom: '1px solid #e0e0e0'
-          }}>
-            <h2 style={{ 
-              margin: 0,
-              fontSize: '1.5rem',
-              fontWeight: '600',
-              color: '#2d2d2d'
-            }}>
-              Filters & Controls
-            </h2>
-            {activeFilterCount > 0 && (
-              <div style={{ 
-                fontSize: '0.75rem', 
-                background: '#4a4a4a',
-                color: 'white', 
-                padding: '0.35rem 0.7rem', 
-                borderRadius: '0',
-                fontWeight: '600'
-              }}>
-                {activeFilterCount} active
-              </div>
-            )}
-          </div>
-          
-          {/* Filter Results Count */}
-          {!loading && data.length > 0 && (
-            <div className="sidebar-section" style={{ 
-              background: '#f5f5f5',
-              border: '1px solid #d0d0d0',
-              fontSize: '0.9rem',
-              marginBottom: '1.5rem'
-            }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
-                <div>
-                  <strong style={{ fontSize: '1.1rem', color: '#2d2d2d' }}>
-                    {data.length.toLocaleString()}
-                  </strong>
-                  <span style={{ marginLeft: '0.4rem', color: '#4a4a4a' }}>
-                    {data.length === 1 ? 'model' : 'models'}
-                  </span>
-                </div>
-                {embeddingType === 'graph-aware' && (
-                  <span style={{ 
-                    fontSize: '0.7rem', 
-                    background: '#4a4a4a',
-                    color: 'white', 
-                    padding: '0.3rem 0.6rem', 
-                    borderRadius: '0',
-                    fontWeight: '600'
-                  }}>
-                    Graph
-                  </span>
-                )}
-              </div>
-              {filteredCount !== null && filteredCount !== data.length && (
-                <div style={{ fontSize: '0.8rem', color: '#666', marginTop: '0.25rem' }}>
-                  of {filteredCount.toLocaleString()} matching
-                </div>
-              )}
-              {stats && filteredCount !== null && filteredCount < stats.total_models && (
-                <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem' }}>
-                  from {stats.total_models.toLocaleString()} total
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Search Section */}
-          <div className="sidebar-section">
-            <h3>Search</h3>
-            <input
-              type="text"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Search models, tags, libraries..."
-              style={{ width: '100%' }}
-              title="Search by model name, tags, library, or metadata"
-            />
-          </div>
-
-          {/* Popularity Filters */}
-          <div className="sidebar-section">
-            <h3>Popularity Filters</h3>
-            
-            <label style={{ marginBottom: '1rem', display: 'block' }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
-                <span style={{ fontWeight: '500' }}>Minimum Downloads</span>
-                <span style={{ fontWeight: '600', color: '#4a4a4a' }}>
-                  {minDownloads > 0 ? minDownloads.toLocaleString() : 'Any'}
-                </span>
-              </div>
-              <input
-                type="range"
-                min="0"
-                max={stats ? Math.min(1000000, Math.ceil(stats.avg_downloads * 10)) : 1000000}
-                step={stats && stats.avg_downloads > 1000 ? "1000" : "100"}
-                value={minDownloads}
-                onChange={(e) => setMinDownloads(Number(e.target.value))}
-                style={{ width: '100%' }}
-              />
-              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.7rem', color: '#666', marginTop: '0.25rem' }}>
-                <span>0</span>
-                <span>{stats ? Math.ceil(stats.avg_downloads).toLocaleString() : '100K'} avg</span>
-                <span>{stats ? Math.min(1000000, Math.ceil(stats.avg_downloads * 10)).toLocaleString() : '1M'}</span>
-              </div>
-            </label>
-
-            <label style={{ display: 'block' }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
-                <span style={{ fontWeight: '500' }}>Minimum Likes</span>
-                <span style={{ fontWeight: '600', color: '#4a4a4a' }}>
-                  {minLikes > 0 ? minLikes.toLocaleString() : 'Any'}
-                </span>
-              </div>
-              <input
-                type="range"
-                min="0"
-                max={stats ? Math.min(10000, Math.ceil(stats.avg_likes * 20)) : 10000}
-                step={stats && stats.avg_likes > 10 ? "10" : "1"}
-                value={minLikes}
-                onChange={(e) => setMinLikes(Number(e.target.value))}
-                style={{ width: '100%' }}
-              />
-              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.7rem', color: '#666', marginTop: '0.25rem' }}>
-                <span>0</span>
-                <span>{stats ? Math.ceil(stats.avg_likes).toLocaleString() : '10'} avg</span>
-                <span>{stats ? Math.min(10000, Math.ceil(stats.avg_likes * 20)).toLocaleString() : '10K'}</span>
-              </div>
-            </label>
+      <div className="app-layout">
+        {/* Left Navigation Sidebar */}
+        <aside className={`nav-sidebar ${navCollapsed ? 'collapsed' : ''}`}>
+          <div className="nav-sidebar-header">
+            <h1>Hugging Face Model Lineage Viewer</h1>
+            <button
+              className="nav-collapse-toggle"
+              onClick={() => setNavCollapsed(!navCollapsed)}
+              aria-label={navCollapsed ? 'Expand navigation' : 'Collapse navigation'}
+              title={navCollapsed ? 'Expand navigation' : 'Collapse navigation'}
+            >
+              {navCollapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
+            </button>
           </div>
-
-          {/* License Filter - Collapsed */}
-          {stats && stats.licenses && typeof stats.licenses === 'object' && Object.keys(stats.licenses).length > 0 && (
-            <details className="sidebar-section" style={{ border: '1px solid #e0e0e0', borderRadius: '0', padding: '0.75rem' }}>
-              <summary style={{ cursor: 'pointer', fontWeight: '600', fontSize: '0.95rem', listStyle: 'none', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                <span>Licenses ({Object.keys(stats.licenses).length})</span>
-              </summary>
-              <div style={{ maxHeight: '200px', overflowY: 'auto', marginTop: '1rem' }}>
-                {Object.entries(stats.licenses as Record<string, number>)
-                  .sort((a, b) => b[1] - a[1])
-                  .slice(0, 20)
-                  .map(([license, count]) => (
-                    <label 
-                      key={license}
-                      style={{ 
-                        display: 'flex', 
-                        alignItems: 'center', 
-                        gap: '0.4rem', 
-                        marginBottom: '0.4rem',
-                        cursor: 'pointer',
-                        fontSize: '0.85rem'
-                      }}
-                    >
-                      <input
-                        type="checkbox"
-                        checked={searchQuery.toLowerCase().includes(license.toLowerCase())}
-                        onChange={(e) => {
-                          if (e.target.checked) {
-                            setSearchQuery(searchQuery ? `${searchQuery} ${license}` : license);
-                          } else {
-                            setSearchQuery(searchQuery.replace(license, '').trim() || '');
-                          }
-                        }}
-                      />
-                      <span style={{ flex: 1 }}>{license || 'Unknown'}</span>
-                      <span style={{ fontSize: '0.7rem', color: '#999' }}>({Number(count).toLocaleString()})</span>
-                    </label>
-                  ))}
-              </div>
-            </details>
-          )}
-
-          {/* Quick Actions - Consolidated */}
-          <div className="sidebar-section">
-            <h3>Quick Actions</h3>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-              <RandomModelButton
-                data={data}
-                onSelect={(model: ModelPoint) => {
-                  setSelectedModel(model);
-                  setIsModalOpen(true);
-                }}
-                disabled={loading || data.length === 0}
-              />
+          {!navCollapsed && (
+            <nav className="nav-tabs">
               <button
                 onClick={() => {
-                  const avgDownloads = data.reduce((sum, m) => sum + (m.downloads || 0), 0) / data.length;
-                  setMinDownloads(Math.floor(avgDownloads));
+                  setShowAnalytics(false);
+                  setShowFamilies(false);
                 }}
-                disabled={loading || data.length === 0}
-                style={{
-                  padding: '0.75rem',
-                  background: '#4a90e2',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '0',
-                  cursor: loading || data.length === 0 ? 'not-allowed' : 'pointer',
-                  fontWeight: '500',
-                  fontSize: '0.9rem',
-                  opacity: loading || data.length === 0 ? 0.5 : 1
+                className={`nav-tab ${!showAnalytics && !showFamilies ? 'active' : ''}`}
+                title="3D scatter plot of model embeddings — explore the model space interactively"
+              >
+                Visualization
+              </button>
+              <button
+                onClick={() => {
+                  setShowAnalytics(false);
+                  setShowFamilies(true);
                 }}
-                title="Filter to models with above average downloads"
+                className={`nav-tab ${showFamilies ? 'active' : ''}`}
+                title="Browse model families and their lineage trees"
               >
-                Popular Models
+                Families
               </button>
               <button
-                onClick={resetFilters}
-                style={{
-                  padding: '0.75rem',
-                  background: '#6c757d',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '0',
-                  cursor: 'pointer',
-                  fontWeight: '500',
-                  fontSize: '0.9rem'
+                onClick={() => {
+                  setShowFamilies(false);
+                  setShowAnalytics(true);
                 }}
-                title="Clear all filters and reset to defaults"
+                className={`nav-tab ${showAnalytics ? 'active' : ''}`}
+                title="Top models, trends, and statistics"
               >
-                Reset All
+                Analytics
               </button>
+            </nav>
+          )}
+          {!navCollapsed && (
+            <div className="nav-sidebar-footer">
+              <div className="nav-links">
+                <a href="https://arxiv.org/abs/2508.06811" target="_blank" rel="noopener noreferrer" title="Read the research paper on arXiv">Paper</a>
+                <a href="https://github.com/bendlaufer/ai-ecosystem" target="_blank" rel="noopener noreferrer" title="View source code on GitHub">GitHub</a>
+                <a href="https://huggingface.co/modelbiome" target="_blank" rel="noopener noreferrer" title="Access the dataset on Hugging Face">Dataset</a>
+              </div>
             </div>
-          </div>
+          )}
+        </aside>
 
-          {/* Visualization */}
-          <div className="sidebar-section">
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
-              <h3 style={{ margin: 0 }}>Visualization</h3>
-              <ThemeToggle />
+        {/* Main Content Area */}
+        <div className="app-main">
+          <div className="app-content">
+            {showAnalytics ? (
+              <AnalyticsPage />
+            ) : showFamilies ? (
+              <FamiliesPage />
+            ) : (
+      <div className="visualization-layout">
+        <div className="control-bar">
+          <div className="control-bar-content">
+            {/* Left: Title (only shown when nav is collapsed) */}
+            <div className="control-bar-left">
+              {navCollapsed && (
+                <span className="control-bar-title">HF Model Lineage Viewer</span>
+              )}
             </div>
-            
-            <label style={{ marginBottom: '1rem', display: 'block' }}>
-              <span style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem' }}>View Mode</span>
-              <select 
-                value={viewMode} 
-                onChange={(e) => setViewMode(e.target.value as ViewMode)}
-                style={{ width: '100%', padding: '0.6rem', borderRadius: '0', border: '1px solid #d0d0d0', fontSize: '0.9rem' }}
-                title="Choose how to visualize the models"
-              >
-                <option value="3d">3D Scatter</option>
-                <option value="scatter">2D Scatter</option>
-                <option value="network">Network</option>
-                <option value="distribution">Distribution</option>
-              </select>
-            </label>
-
-            {/* Zoom and Label Controls for Scatter View */}
-            {viewMode === 'scatter' && (
-              <>
-                <ZoomSlider
-                  value={zoomLevel}
-                  onChange={setZoomLevel}
-                  min={0.1}
-                  max={5}
-                  step={0.1}
-                  disabled={loading}
-                />
-                <NodeDensitySlider disabled={loading} />
-                <div className="label-toggle">
-                  <span className="label-toggle-label">Show Labels</span>
-                  <label className="label-toggle-switch">
-                    <input
-                      type="checkbox"
-                      checked={showLabels}
-                      onChange={(e) => setShowLabels(e.target.checked)}
-                    />
-                    <span className="label-toggle-slider"></span>
-                  </label>
-                </div>
-              </>
-            )}
-
-            <label style={{ marginBottom: '1rem', display: 'block' }}>
-              <span style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem' }}>Color By</span>
-              <select 
-                value={colorBy} 
-                onChange={(e) => setColorBy(e.target.value as ColorByOption)}
-                style={{ width: '100%', padding: '0.6rem', borderRadius: '0', border: '1px solid #d0d0d0', fontSize: '0.9rem' }}
-                title="Choose what attribute to color models by"
-              >
-                <option value="library_name">Library</option>
-                <option value="pipeline_tag">Pipeline/Task</option>
-                <option value="cluster_id">Cluster</option>
-                <option value="family_depth">Family Depth</option>
-                <option value="downloads">Downloads</option>
-                <option value="likes">Likes</option>
-                <option value="trending_score">Trending</option>
-                <option value="licenses">License</option>
-              </select>
-            </label>
-
-            {/* Color Scheme */}
-            {(colorBy === 'downloads' || colorBy === 'likes' || colorBy === 'family_depth' || colorBy === 'trending_score') && (
-              <label style={{ marginBottom: '1rem', display: 'block' }}>
-                <span style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem' }}>Color Scheme</span>
-                <select 
-                  value={colorScheme} 
-                  onChange={(e) => setColorScheme(e.target.value as any)}
-                  style={{ width: '100%', padding: '0.6rem', borderRadius: '0', border: '1px solid #d0d0d0', fontSize: '0.9rem' }}
-                >
-                  <option value="viridis">Viridis</option>
-                  <option value="plasma">Plasma</option>
-                  <option value="inferno">Inferno</option>
-                  <option value="magma">Magma</option>
-                  <option value="coolwarm">Cool-Warm</option>
-                </select>
-              </label>
-            )}
-
-            {/* Legend Toggle */}
-            <label style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-              <input
-                type="checkbox"
-                checked={showLegend}
-                onChange={(e) => setShowLegend(e.target.checked)}
-                style={{ cursor: 'pointer' }}
-              />
-              <span style={{ fontWeight: '500' }}>Show Color Legend</span>
-            </label>
 
-            <label style={{ marginBottom: '1rem', display: 'block' }}>
-              <span style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem' }}>Size By</span>
-              <select 
-                value={sizeBy} 
-                onChange={(e) => setSizeBy(e.target.value as SizeByOption)}
-                style={{ width: '100%', padding: '0.6rem', borderRadius: '0', border: '1px solid #d0d0d0', fontSize: '0.9rem' }}
-                title="Choose what determines point size"
-              >
-                <option value="downloads">Downloads</option>
-                <option value="likes">Likes</option>
-                <option value="none">Uniform</option>
-              </select>
-            </label>
+            {/* Center: Core Controls */}
+            <div className="control-bar-center">
 
-            <details style={{ marginBottom: '1rem', marginTop: '1rem' }}>
-              <summary style={{ cursor: 'pointer', fontWeight: '500', fontSize: '0.9rem', marginBottom: '0rem' }}>
-                Advanced Settings
-              </summary>
-              <div style={{ marginTop: '0.75rem' }}>
+              {/* Color by */}
+              <div className="control-group">
+                <Palette size={14} className="control-icon" />
                 <select 
-                  value={projectionMethod} 
-                  onChange={(e) => setProjectionMethod(e.target.value as 'umap' | 'tsne')}
-                  style={{ width: '100%', padding: '0.5rem', borderRadius: '0', border: '1px solid #d0d0d0', fontSize: '0.85rem' }}
-                  title="UMAP preserves global structure, t-SNE emphasizes local clusters"
+                  value={colorBy} 
+                  onChange={(e) => debouncedSetColorBy(e.target.value as ColorByOption)}
+                  className="control-select"
+                  title="Color points by attribute - Changes what determines each point's color"
                 >
-                  <option value="umap">UMAP</option>
-                  <option value="tsne">t-SNE</option>
+                  <option value="family_depth">Family Depth</option>
+                  <option value="library_name">ML Library</option>
+                  <option value="pipeline_tag">Task Type</option>
+                  <option value="downloads">Downloads</option>
+                  <option value="likes">Likes</option>
                 </select>
-              </div>
-            </details>
-          </div>
-
-          {/* Display Options - Simplified */}
-          <details className="sidebar-section" open>
-            <summary style={{ cursor: 'pointer', fontWeight: '600', fontSize: '1rem', marginBottom: '1rem', listStyle: 'none' }}>
-              <h3 style={{ display: 'inline', margin: 0 }}>Display Options</h3>
-            </summary>
-            
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-              <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} title="Show only root models without parents">
-                <input
-                  type="checkbox"
-                  checked={baseModelsOnly}
-                  onChange={(e) => setBaseModelsOnly(e.target.checked)}
-                  style={{ marginRight: '0.5rem', cursor: 'pointer' }}
-                />
-                <span style={{ fontWeight: '500', fontSize: '0.9rem' }}>Base Models Only</span>
-              </label>
-
-              <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} title="Use family tree structure in embeddings">
-                <input
-                  type="checkbox"
-                  checked={useGraphEmbeddings}
-                  onChange={(e) => setUseGraphEmbeddings(e.target.checked)}
-                  style={{ marginRight: '0.5rem', cursor: 'pointer' }}
-                />
-                <span style={{ fontWeight: '500', fontSize: '0.9rem' }}>Graph-Aware Layout</span>
-              </label>
-
-              <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} title="Sort by similarity to a specific model">
-                <input
-                  type="checkbox"
-                  checked={semanticSimilarityMode}
-                  onChange={(e) => {
-                    setSemanticSimilarityMode(e.target.checked);
-                    if (!e.target.checked) {
-                      setSemanticQueryModel(null);
-                    }
-                  }}
-                  style={{ marginRight: '0.5rem', cursor: 'pointer' }}
-                />
-                <span style={{ fontWeight: '500', fontSize: '0.9rem' }}>Similarity View</span>
-              </label>
-            </div>
-
-            {semanticSimilarityMode && (
-              <div style={{ marginTop: '1rem', padding: '0.75rem', background: '#f9f9f9', borderRadius: '0', border: '1px solid #e0e0e0' }}>
-                <input
-                  type="text"
-                  value={semanticQueryModel || ''}
-                  onChange={(e) => setSemanticQueryModel(e.target.value || null)}
-                  placeholder="Enter model ID..."
-                  style={{ width: '100%', padding: '0.5rem', borderRadius: '0', border: '1px solid #d0d0d0', fontSize: '0.85rem' }}
-                  title="Enter a model ID to compare against"
-                />
-                {selectedModel && (
-                  <button
-                    onClick={() => setSemanticQueryModel(selectedModel.model_id)}
-                    style={{
-                      marginTop: '0.5rem',
-                      padding: '0.4rem 0.7rem',
-                      background: '#4a90e2',
-                      color: 'white',
-                      border: 'none',
-                      borderRadius: '4px',
-                      cursor: 'pointer',
-                      fontSize: '0.8rem',
-                      width: '100%'
-                    }}
-                    title="Use the currently selected model"
+                {(colorBy === 'downloads' || colorBy === 'likes' || colorBy === 'trending_score') && (
+                  <select 
+                    value={colorScheme} 
+                    onChange={(e) => debouncedSetColorScheme(e.target.value as any)}
+                    className="control-select control-select-small"
+                    title="Color gradient style"
                   >
-                    Use Selected Model
-                  </button>
+                    <option value="viridis">Viridis</option>
+                    <option value="plasma">Plasma</option>
+                    <option value="inferno">Inferno</option>
+                    <option value="coolwarm">Cool-Warm</option>
+                  </select>
                 )}
               </div>
-            )}
-          </details>
 
-          {/* Structural Visualization Options */}
-          {viewMode === 'network' && (
-            <div className="sidebar-section">
-              <h3>Network Structure</h3>
-              <div style={{ fontSize: '0.75rem', color: '#666', marginBottom: '1rem', lineHeight: '1.4' }}>
-                Explore relationships and structure in the model ecosystem
-              </div>
-              
-              <label style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
-                <input
-                  type="checkbox"
-                  checked={overviewMode}
-                  onChange={(e) => setOverviewMode(e.target.checked)}
-                  style={{ marginRight: '0.5rem', cursor: 'pointer' }}
-                />
-              <div>
-                <span style={{ fontWeight: '500' }}>Overview Mode</span>
-                <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem' }}>
-                  Zoom out to see full ecosystem structure with all relationships visible. Camera will automatically adjust.
-                </div>
-              </div>
-              </label>
+              <span className="control-divider" />
 
-              <label style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
-                <input
-                  type="checkbox"
-                  checked={showNetworkEdges}
-                  onChange={(e) => setShowNetworkEdges(e.target.checked)}
-                  style={{ marginRight: '0.5rem', cursor: 'pointer' }}
-                />
-              <div>
-                <span style={{ fontWeight: '500' }}>Network Relationships</span>
-                <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem' }}>
-                  Show connections between related models (same library, pipeline, or tags). Blue = library, Pink = pipeline.
-                </div>
+              {/* Size by */}
+              <div className="control-group">
+                <Maximize2 size={14} className="control-icon" />
+                <select 
+                  value={sizeBy} 
+                  onChange={(e) => debouncedSetSizeBy(e.target.value as SizeByOption)}
+                  className="control-select"
+                  title="Size points by attribute - Larger values = bigger points"
+                >
+                  <option value="downloads">By Downloads</option>
+                  <option value="likes">By Likes</option>
+                  <option value="none">Uniform Size</option>
+                </select>
               </div>
-              </label>
 
-              {showNetworkEdges && (
-                <div style={{ marginLeft: '1.5rem', marginBottom: '1rem', padding: '0.75rem', background: 'white', borderRadius: '0', border: '1px solid #d0d0d0' }}>
-                  <label style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem' }}>
-                    Connection Type
-                  </label>
-                  <select 
-                    value={networkEdgeType} 
-                    onChange={(e) => setNetworkEdgeType(e.target.value as 'library' | 'pipeline' | 'combined')}
-                    style={{ width: '100%', padding: '0.5rem', borderRadius: '0', border: '1px solid #d0d0d0', fontSize: '0.85rem' }}
-                  >
-                    <option value="combined">Combined (library + pipeline + tags)</option>
-                    <option value="library">Library Only</option>
-                    <option value="pipeline">Pipeline Only</option>
-                  </select>
-                </div>
-              )}
+              <span className="control-divider" />
 
-              <label style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
-                <input
-                  type="checkbox"
-                  checked={showStructuralGroups}
-                  onChange={(e) => setShowStructuralGroups(e.target.checked)}
-                  style={{ marginRight: '0.5rem', cursor: 'pointer' }}
-                />
-              <div>
-                <span style={{ fontWeight: '500' }}>Structural Groupings</span>
-                <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem' }}>
-                  Highlight clusters and groups with wireframe boundaries. Shows top library and pipeline clusters.
-                </div>
+              {/* Stats summary */}
+              <div className="control-stats" title="Number of models currently loaded and visible in the visualization">
+                <Eye size={14} className="control-icon" />
+                <span className="control-stats-text">
+                  {data.length.toLocaleString()} models
+                </span>
               </div>
-              </label>
-            </div>
-          )}
 
-          {/* Advanced Hierarchy Controls */}
-          <details className="sidebar-section" style={{ border: '1px solid #e0e0e0', borderRadius: '0', padding: '0.75rem' }}>
-            <summary style={{ cursor: 'pointer', fontWeight: '600', fontSize: '0.95rem', listStyle: 'none' }}>
-              Hierarchy & Structure
-            </summary>
-            <div style={{ marginTop: '1rem' }}>
-              <label style={{ marginBottom: '1rem', display: 'block' }}>
-                <span style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem', fontSize: '0.85rem' }}>
-                  Max Hierarchy Depth
-                </span>
-                <input
-                  type="range"
-                  min="0"
-                  max="10"
-                  value={maxHierarchyDepth ?? 10}
-                  onChange={(e) => {
-                    const val = parseInt(e.target.value);
-                    setMaxHierarchyDepth(val === 10 ? null : val);
-                  }}
-                  style={{ width: '100%' }}
-                />
-                <div style={{ fontSize: '0.75rem', color: '#999', marginTop: '0.25rem', display: 'flex', justifyContent: 'space-between' }}>
-                  <span>All levels</span>
-                  <span>{maxHierarchyDepth !== null ? `Depth ≤ ${maxHierarchyDepth}` : 'No limit'}</span>
-                </div>
-              </label>
-              <label style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                <input
-                  type="checkbox"
-                  checked={showDistanceHeatmap}
-                  onChange={(e) => setShowDistanceHeatmap(e.target.checked)}
-                />
-                <span style={{ fontSize: '0.85rem' }}>Distance Heatmap</span>
-              </label>
-              {selectedModel && (
-                <div style={{ marginTop: '0.5rem', padding: '0.5rem', background: '#f5f5f5', borderRadius: '0', fontSize: '0.85rem' }}>
-                  <div style={{ fontWeight: '500', marginBottom: '0.25rem' }}>Selected Model:</div>
-                  <div style={{ color: '#666', marginBottom: '0.5rem', wordBreak: 'break-word' }}>{selectedModel.model_id}</div>
-                  {selectedModel.family_depth !== null && (
-                    <div style={{ color: '#666', marginBottom: '0.5rem' }}>
-                      Hierarchy Depth: {selectedModel.family_depth}
-                    </div>
-                  )}
-                  <button
-                    onClick={() => {
-                      if (selectedModel.parent_model) {
-                        loadFamilyPath(selectedModel.model_id, selectedModel.parent_model);
-                      } else {
-                        loadFamilyPath(selectedModel.model_id);
-                      }
-                    }}
-                    style={{
-                      padding: '0.25rem 0.5rem',
-                      fontSize: '0.8rem',
-                      background: '#4a90e2',
-                      color: 'white',
-                      border: 'none',
-                      borderRadius: '0',
-                      cursor: 'pointer',
-                      marginRight: '0.5rem',
-                      marginBottom: '0.5rem'
-                    }}
-                  >
-                    Show Path to Root
-                  </button>
-                  <button
-                    onClick={() => setHighlightedPath([])}
-                    style={{
-                      padding: '0.25rem 0.5rem',
-                      fontSize: '0.8rem',
-                      background: '#6a6a6a',
-                      color: 'white',
-                      border: 'none',
-                      borderRadius: '0',
-                      cursor: 'pointer',
-                      marginBottom: '0.5rem'
-                    }}
-                  >
-                    Clear Path
-                  </button>
-                </div>
-              )}
             </div>
-          </details>
 
-          <div className="sidebar-section">
-            <h3>Family Tree Explorer</h3>
-            <div style={{ position: 'relative' }}>
-              <input
-                type="text"
-                value={searchInput}
-                onChange={(e) => setSearchInput(e.target.value)}
-                onFocus={() => searchInput.length > 0 && setShowSearchResults(true)}
-                placeholder="Type model name..."
-                style={{ width: '100%', padding: '0.5rem', borderRadius: '0', border: '1px solid #d0d0d0' }}
+            {/* Right: Integrated Search */}
+            <div className="control-bar-right">
+              <IntegratedSearch
+                value={localSearchQuery}
+                onChange={(value) => {
+                  setLocalSearchQuery(value);
+                  debouncedSetSearchQuery(value);
+                }}
+                onSelect={(result) => {
+                  const modelPoint: ModelPoint = {
+                    model_id: result.model_id,
+                    x: result.x || 0,
+                    y: result.y || 0,
+                    z: result.z || 0,
+                    downloads: result.downloads || 0,
+                    likes: result.likes || 0,
+                    trending_score: null,
+                    tags: null,
+                    licenses: null,
+                    cluster_id: null,
+                    created_at: null,
+                    library_name: result.library_name || null,
+                    pipeline_tag: result.pipeline_tag || null,
+                    parent_model: null,
+                    family_depth: result.family_depth || null,
+                  };
+                  setSelectedModel(modelPoint);
+                  setIsModalOpen(true);
+                  setLocalSearchQuery('');
+                  setSearchQuery('');
+                }}
+                onZoomTo={(x, y, z) => {
+                  // Zoom to point - reserved for future implementation
+                }}
               />
-              {showSearchResults && searchResults.length > 0 && (
-                <div style={{
-                  position: 'absolute',
-                  top: '100%',
-                  left: 0,
-                  right: 0,
-                  background: 'white',
-                  border: '1px solid #d0d0d0',
-                  borderRadius: '2px',
-                  marginTop: '2px',
-                  maxHeight: '400px',
-                  zIndex: 1000,
-                  boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
-                }}>
-                  <VirtualSearchResults
-                    results={searchResults}
-                    onSelect={(result) => {
-                      loadFamilyTree(result.model_id);
-                    }}
-                  />
-                </div>
-              )}
             </div>
-            {familyTreeModelId && (
-              <div style={{ marginTop: '0.5rem', fontSize: '0.85rem' }}>
-                <div style={{ marginBottom: '0.25rem' }}>
-                  <strong>Showing family tree for:</strong> {familyTreeModelId}
-                </div>
-                <div style={{ marginBottom: '0.5rem', color: '#666' }}>
-                  {familyTree.length} family members
-                </div>
-                <button
-                  onClick={clearFamilyTree}
-                  style={{
-                    padding: '0.25rem 0.5rem',
-                    fontSize: '0.8rem',
-                    background: '#6a6a6a',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '2px',
-                    cursor: 'pointer'
-                  }}
-                >
-                  Clear Family Tree
-                </button>
-              </div>
-            )}
           </div>
+        </div>
 
-          {/* Bookmarks */}
-          {bookmarkedModels.length > 0 && (
-            <div style={{ marginTop: '1rem', padding: '0.75rem', background: '#f5f5f5', borderRadius: '0', border: '1px solid #d0d0d0' }}>
-              <h3 style={{ marginTop: 0, fontSize: '0.9rem', fontWeight: '600' }}>Bookmarks ({bookmarkedModels.length})</h3>
-              <div style={{ maxHeight: '150px', overflowY: 'auto', fontSize: '0.85rem' }}>
-                {bookmarkedModels.map(modelId => (
-                  <div key={modelId} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.25rem' }}>
-                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{modelId}</span>
-                    <button
-                      onClick={() => toggleBookmark(modelId)}
-                      style={{ marginLeft: '0.5rem', padding: '0.1rem 0.3rem', fontSize: '0.7rem', background: '#6a6a6a', color: 'white', border: 'none', borderRadius: '2px', cursor: 'pointer' }}
-                    >
-                      Remove
-                    </button>
-                  </div>
-                ))}
-              </div>
-              <button
-                onClick={() => exportModels(bookmarkedModels)}
-                style={{ marginTop: '0.5rem', padding: '0.25rem 0.5rem', fontSize: '0.8rem', background: '#4a4a4a', color: 'white', border: 'none', borderRadius: '2px', cursor: 'pointer', width: '100%' }}
-              >
-                Export Bookmarks
-              </button>
-            </div>
-          )}
-
-          {/* Comparison */}
-          {comparisonModels.length > 0 && (
-            <div style={{ marginTop: '1rem', padding: '0.75rem', background: '#f5f5f5', borderRadius: '0', border: '1px solid #d0d0d0' }}>
-              <h3 style={{ marginTop: 0, fontSize: '0.9rem', fontWeight: '600' }}>Comparison ({comparisonModels.length}/3)</h3>
-              {comparisonModels.map(model => (
-                <div key={model.model_id} style={{ marginBottom: '0.5rem', padding: '0.5rem', background: 'white', borderRadius: '0', fontSize: '0.85rem' }}>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                    <strong>{model.model_id}</strong>
-                    <button
-                      onClick={() => removeFromComparison(model.model_id)}
-                      style={{ padding: '0.1rem 0.3rem', fontSize: '0.7rem', background: '#6a6a6a', color: 'white', border: 'none', borderRadius: '2px', cursor: 'pointer' }}
-                    >
-                      Remove
-                    </button>
-                  </div>
-                  <div style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: '#666' }}>
-                    {model.library_name && <span>Library: {model.library_name} | </span>}
-                    Downloads: {model.downloads.toLocaleString()} | Likes: {model.likes.toLocaleString()}
-                  </div>
-                </div>
-              ))}
-              <button
-                onClick={() => setComparisonModels([])}
-                style={{ marginTop: '0.5rem', padding: '0.25rem 0.5rem', fontSize: '0.8rem', background: '#6a6a6a', color: 'white', border: 'none', borderRadius: '2px', cursor: 'pointer', width: '100%' }}
-              >
-                Clear Comparison
-              </button>
-            </div>
-          )}
-
-          {/* Similar Models */}
-          {showSimilar && similarModels.length > 0 && (
-            <div style={{ marginTop: '1rem', padding: '0.75rem', background: '#f5f5f5', borderRadius: '0', border: '1px solid #d0d0d0' }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
-                <h3 style={{ marginTop: 0, fontSize: '0.9rem', fontWeight: '600' }}>Similar Models</h3>
-                <button
-                  onClick={() => setShowSimilar(false)}
-                  style={{ padding: '0.1rem 0.3rem', fontSize: '0.7rem', background: '#6a6a6a', color: 'white', border: 'none', borderRadius: '2px', cursor: 'pointer' }}
-                >
-                  Close
-                </button>
-              </div>
-              <div style={{ maxHeight: '200px', overflowY: 'auto', fontSize: '0.85rem' }}>
-                {similarModels.map((similar, idx) => (
-                  <div key={idx} style={{ marginBottom: '0.5rem', padding: '0.5rem', background: 'white', borderRadius: '0' }}>
-                    <div style={{ fontWeight: '500' }}>{similar.model_id}</div>
-                    <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem' }}>
-                      Similarity: {(similar.similarity * 100).toFixed(1)}% | Distance: {similar.distance.toFixed(3)}
-                    </div>
-                    <div style={{ fontSize: '0.75rem', color: '#666' }}>
-                      {similar.library_name && <span>{similar.library_name} | </span>}
-                      Downloads: {similar.downloads.toLocaleString()}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-
-          {selectedModels.length > 0 && (
-            <div style={{ marginTop: '1rem', padding: '0.5rem', background: '#e3f2fd', borderRadius: '0' }}>
-              <strong>Selected: {selectedModels.length} models</strong>
-              <button
-                onClick={() => setSelectedModels([])}
-                style={{ marginLeft: '0.5rem', padding: '0.25rem 0.5rem', fontSize: '0.8rem' }}
-              >
-                Clear
-              </button>
-            </div>
-          )}
-        </aside>
 
         <main className="visualization">
+          {/* Intro Modal */}
+          {showIntro && !loading && data.length > 0 && (
+            <IntroModal onClose={() => setShowIntro(false)} />
+          )}
+          
           {loading && <div className="loading">Loading models...</div>}
           {error && <div className="error">Error: {error}</div>}
           {!loading && !error && data.length === 0 && (
@@ -1332,41 +696,18 @@ function App() {
           )}
           {!loading && !error && data.length > 0 && (
             <>
-              {viewMode === 'scatter' && (
-                <ScatterPlot
-                  width={width}
-                  height={height}
-                  data={data}
-                  colorBy={colorBy}
-                  sizeBy={sizeBy}
-                  onPointClick={(model) => {
-                    setSelectedModel(model);
-                    setIsModalOpen(true);
-                  }}
-                  onBrush={(selected) => {
-                    setSelectedModels(selected);
-                  }}
-                />
-              )}
               {viewMode === '3d' && (
-                <ScatterPlot3D
-                  data={data}
-                  colorBy={colorBy}
-                  sizeBy={sizeBy}
-                  hoveredModel={hoveredModel}
-                  onPointClick={(model) => {
-                    setSelectedModel(model);
-                    setIsModalOpen(true);
-                  }}
-                  onHover={(model, position) => {
-                    setHoveredModel(model);
-                    if (model && position) {
-                      setTooltipPosition(position);
-                    } else {
-                      setTooltipPosition(null);
-                    }
-                  }}
-                />
+                <>
+                  <ScatterPlot3D
+                    data={data}
+                    colorBy={colorBy}
+                    sizeBy={sizeBy}
+                    colorScheme={colorScheme}
+                    hoveredModel={null}
+                    onPointClick={handlePointClick}
+                    onHover={handleHover}
+                  />
+                </>
               )}
               {viewMode === 'network' && (
                 <NetworkGraph
@@ -1384,19 +725,28 @@ function App() {
               )}
             </>
           )}
+          
+          {/* Live Model Counter - Bottom Left */}
+          <LiveModelCounter
+            pollInterval={60000}
+            showGrowth={true}
+          />
+          
+          {/* Model Popup - Bottom Left */}
+          <ModelPopup
+            model={selectedModel}
+            isOpen={isModalOpen}
+            onClose={() => setIsModalOpen(false)}
+            onBookmark={selectedModel ? () => toggleBookmark(selectedModel.model_id) : undefined}
+            isBookmarked={selectedModel ? bookmarkedModels.includes(selectedModel.model_id) : false}
+          />
         </main>
-
-        <ModelModal
-          model={selectedModel}
-          isOpen={isModalOpen}
-          onClose={() => setIsModalOpen(false)}
-          onBookmark={selectedModel ? () => toggleBookmark(selectedModel.model_id) : undefined}
-          onAddToComparison={selectedModel ? () => addToComparison(selectedModel) : undefined}
-          onLoadSimilar={selectedModel ? () => loadSimilarModels(selectedModel.model_id) : undefined}
-          isBookmarked={selectedModel ? bookmarkedModels.includes(selectedModel.model_id) : false}
-        />
+            </div>
+          )}
+          </div>
+        </div>
+      </div>
       </div>
-    </div>
     </ErrorBoundary>
   );
 }

frontend/src/components/controls/IntegratedSearch.css

@@ -0,0 +1,519 @@
+/* ============================================
+   INTEGRATED SEARCH - TRIGGER INPUT
+   ============================================ */
+
+.integrated-search-container {
+  position: relative;
+  width: 100%;
+  min-width: 200px;
+  max-width: 300px;
+}
+
+.control-search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid var(--border-medium);
+  padding: 0.35rem 0.75rem;
+  background: var(--bg-primary);
+  cursor: pointer;
+  transition: border-color var(--transition-base), background-color var(--transition-base);
+}
+
+.control-search:hover {
+  border-color: var(--accent-blue);
+  background: var(--bg-secondary);
+}
+
+.search-icon {
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+.control-search-input {
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 0.85rem;
+  font-family: var(--font-primary);
+  flex: 1;
+  min-width: 0;
+  outline: none;
+  cursor: pointer;
+}
+
+.control-search-input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.search-shortcut {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.search-shortcut kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 5px;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-light);
+  color: var(--text-tertiary);
+  line-height: 1;
+}
+
+/* ============================================
+   SEARCH MODAL
+   ============================================ */
+
+.search-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  padding: 2rem;
+  animation: fadeIn 0.15s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.search-modal {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-medium);
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
+  width: 90%;
+  max-width: 640px;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  animation: slideDown 0.15s ease-out;
+  margin-top: -10vh;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+[data-theme="dark"] .search-modal {
+  background: #1a1a1a;
+  border-color: #3a3a3a;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
+}
+
+/* Modal Header */
+.search-modal-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.search-modal-input-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.search-modal-icon {
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+.search-modal-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 1.1rem;
+  font-family: var(--font-primary);
+  outline: none;
+}
+
+.search-modal-input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.search-modal-clear {
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color var(--transition-base);
+}
+
+.search-modal-clear:hover {
+  color: var(--text-primary);
+}
+
+.search-modal-close {
+  background: none;
+  border: 1px solid var(--border-light);
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-base);
+}
+
+.search-modal-close:hover {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border-color: var(--border-medium);
+}
+
+/* Modal Body */
+.search-modal-body {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 200px;
+  max-height: calc(70vh - 140px);
+}
+
+.search-modal-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 3rem;
+  color: var(--text-secondary);
+}
+
+.search-loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border-light);
+  border-top-color: var(--accent-blue);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.search-modal-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 3rem;
+  color: var(--text-secondary);
+}
+
+.search-empty-hint {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--text-tertiary);
+}
+
+.search-modal-hint {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 3rem;
+  text-align: center;
+}
+
+.search-modal-hint p {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+}
+
+.search-hint-examples {
+  color: var(--text-tertiary);
+  font-size: 0.85rem;
+}
+
+.search-hint-examples code {
+  background: var(--bg-tertiary);
+  padding: 2px 6px;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: var(--text-primary);
+}
+
+/* Fuzzy search feature hints */
+.search-hint-features {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.search-hint-feature {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+}
+
+.search-hint-feature svg {
+  color: var(--accent-blue);
+  flex-shrink: 0;
+}
+
+.search-hint-feature strong {
+  color: var(--text-primary);
+}
+
+/* Results Header */
+.search-results-header {
+  padding: 0.75rem 1rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Results List */
+.search-results-list {
+  padding: 0.5rem 0;
+}
+
+.search-result-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  transition: background-color var(--transition-base);
+}
+
+.search-result-item:hover,
+.search-result-item.selected {
+  background: var(--bg-secondary);
+}
+
+[data-theme="dark"] .search-result-item:hover,
+[data-theme="dark"] .search-result-item.selected {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.search-result-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.search-result-main {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.search-result-id {
+  font-weight: 500;
+  color: var(--text-primary);
+  font-size: 0.9rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.search-result-similarity {
+  font-size: 0.75rem;
+  color: var(--accent-blue);
+  font-weight: 600;
+  flex-shrink: 0;
+  padding: 2px 6px;
+  background: rgba(74, 144, 226, 0.1);
+}
+
+.search-result-relevance {
+  font-size: 0.7rem;
+  color: #10b981;
+  font-weight: 500;
+  flex-shrink: 0;
+  padding: 2px 6px;
+  background: rgba(16, 185, 129, 0.1);
+}
+
+/* Fuzzy match highlighting */
+.search-highlight {
+  background: rgba(251, 191, 36, 0.3);
+  color: inherit;
+  padding: 0 1px;
+  font-weight: 600;
+}
+
+[data-theme="dark"] .search-highlight {
+  background: rgba(251, 191, 36, 0.25);
+}
+
+/* Search type badge */
+.search-type-badge {
+  display: inline-block;
+  padding: 2px 6px;
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  background: rgba(139, 92, 246, 0.15);
+  color: #8b5cf6;
+  margin-left: 0.5rem;
+}
+
+.search-result-meta {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.search-result-tag {
+  font-size: 0.7rem;
+  padding: 2px 6px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-light);
+  color: var(--text-secondary);
+}
+
+.search-result-stat {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 0.7rem;
+  color: var(--text-tertiary);
+}
+
+.search-result-arrow {
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity var(--transition-base);
+}
+
+.search-result-item:hover .search-result-arrow,
+.search-result-item.selected .search-result-arrow {
+  opacity: 1;
+}
+
+/* Modal Footer */
+.search-modal-footer {
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--border-light);
+  background: var(--bg-secondary);
+}
+
+.search-modal-shortcuts {
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+}
+
+.search-modal-shortcuts span {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.75rem;
+  color: var(--text-tertiary);
+}
+
+.search-modal-shortcuts kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  padding: 2px 5px;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  background: var(--bg-primary);
+  border: 1px solid var(--border-medium);
+  color: var(--text-secondary);
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .search-results-header {
+  background: rgba(255, 255, 255, 0.03);
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
+[data-theme="dark"] .search-modal-footer {
+  background: rgba(255, 255, 255, 0.03);
+  border-top-color: rgba(255, 255, 255, 0.1);
+}
+
+[data-theme="dark"] .search-modal-header {
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .search-modal {
+    width: 95%;
+    max-height: 80vh;
+  }
+
+  .search-modal-shortcuts {
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+}
+
+/* Legacy dropdown styles - can be removed if not needed elsewhere */
+.integrated-search-results {
+  display: none;
+}
+
+.search-loading {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  margin-left: 0.5rem;
+}
+
+.search-clear {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color var(--transition-base);
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+}
+
+.search-clear:hover {
+  color: var(--text-primary);
+}

frontend/src/components/controls/IntegratedSearch.tsx

@@ -0,0 +1,435 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { X, Search, ArrowRight, Download, Heart, Sparkles } from 'lucide-react';
+import { API_BASE } from '../../config/api';
+import './IntegratedSearch.css';
+
+interface SearchResult {
+  model_id: string;
+  x?: number;
+  y?: number;
+  z?: number;
+  similarity?: number;
+  family_depth?: number | null;
+  downloads?: number;
+  likes?: number;
+  library_name?: string | null;
+  pipeline_tag?: string | null;
+  // Fuzzy search additions
+  score?: number;
+}
+
+interface IntegratedSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSelect?: (result: SearchResult) => void;
+  onZoomTo?: (x: number, y: number, z: number) => void;
+}
+
+export default function IntegratedSearch({
+  value,
+  onChange,
+  onSelect,
+  onZoomTo
+}: IntegratedSearchProps) {
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [totalMatches, setTotalMatches] = useState(0);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchType, setSearchType] = useState<'fuzzy' | 'semantic'>('fuzzy');
+  const [localQuery, setLocalQuery] = useState('');
+  
+  const modalInputRef = useRef<HTMLInputElement>(null);
+  const triggerInputRef = useRef<HTMLInputElement>(null);
+  const resultsRef = useRef<HTMLDivElement>(null);
+
+  // Detect if query looks like a model ID (contains "/")
+  const isModelId = useCallback((query: string): boolean => {
+    return query.includes('/') && query.length >= 3;
+  }, []);
+
+  // Perform fuzzy search via API (searches all 2M+ models)
+  const performFuzzySearch = useCallback(async (searchQuery: string) => {
+    if (searchQuery.length < 2) {
+      setResults([]);
+      setTotalMatches(0);
+      return;
+    }
+
+    setIsLoading(true);
+    
+    try {
+      const params = new URLSearchParams({
+        q: searchQuery,
+        limit: '100',
+        threshold: '50', // 50% minimum match score
+      });
+
+      const response = await fetch(`${API_BASE}/api/search/fuzzy?${params}`);
+      
+      if (!response.ok) {
+        throw new Error('Fuzzy search failed');
+      }
+      
+      const data = await response.json();
+      const models = (data.results || []).map((m: any) => ({
+        model_id: m.model_id,
+        x: m.x || 0,
+        y: m.y || 0,
+        z: m.z || 0,
+        downloads: m.downloads || 0,
+        likes: m.likes || 0,
+        library_name: m.library || null,
+        pipeline_tag: m.pipeline || null,
+        family_depth: m.family_depth || null,
+        score: m.score, // Server-side fuzzy score (0-100)
+      }));
+
+      setResults(models);
+      setTotalMatches(data.total_matches || models.length);
+      setSelectedIndex(-1);
+    } catch (error) {
+      console.error('Fuzzy search error:', error);
+      setResults([]);
+      setTotalMatches(0);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Perform semantic search for model IDs
+  const performSemanticSearch = useCallback(async (queryModelId: string) => {
+    if (!queryModelId || queryModelId.length < 3 || !queryModelId.includes('/')) {
+      setResults([]);
+      setTotalMatches(0);
+      setIsLoading(false);
+      return;
+    }
+    
+    setIsLoading(true);
+    try {
+      const params = new URLSearchParams({
+        query_model_id: queryModelId,
+        k: '50',
+        min_downloads: '0',
+        min_likes: '0',
+        projection_method: 'umap',
+      });
+
+      const response = await fetch(`${API_BASE}/api/models/semantic-similarity?${params}`);
+      
+      if (response.status === 404) {
+        // Model not found, fall back to fuzzy search
+        setSearchType('fuzzy');
+        await performFuzzySearch(queryModelId);
+        return;
+      }
+      
+      if (!response.ok) {
+        throw new Error('Semantic search failed');
+      }
+      
+      const data = await response.json();
+      const models = (data.models || []).map((m: any) => ({
+        model_id: m.model_id,
+        x: m.x,
+        y: m.y,
+        z: m.z,
+        similarity: m.similarity,
+        downloads: m.downloads,
+        likes: m.likes,
+        library_name: m.library_name,
+        pipeline_tag: m.pipeline_tag,
+        family_depth: m.family_depth,
+      }));
+
+      // Sort by similarity (highest first)
+      models.sort((a: SearchResult, b: SearchResult) => 
+        (b.similarity || 0) - (a.similarity || 0)
+      );
+
+      setResults(models.slice(0, 50));
+      setTotalMatches(models.length);
+      setSelectedIndex(-1);
+    } catch {
+      // Fall back to fuzzy search on error
+      setSearchType('fuzzy');
+      await performFuzzySearch(queryModelId);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [performFuzzySearch]);
+
+  // Handle search when local query changes
+  useEffect(() => {
+    if (localQuery.length < 2) {
+      setResults([]);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      // Auto-detect search type: if it looks like a model ID, use semantic search
+      if (isModelId(localQuery)) {
+        setSearchType('semantic');
+        performSemanticSearch(localQuery);
+      } else {
+        setSearchType('fuzzy');
+        performFuzzySearch(localQuery);
+      }
+    }, 150); // Faster debounce for fuzzy search
+
+    return () => clearTimeout(timer);
+  }, [localQuery, isModelId, performSemanticSearch, performFuzzySearch]);
+
+  const handleSelect = useCallback((result: SearchResult) => {
+    if (onZoomTo && result.x !== undefined && result.y !== undefined) {
+      onZoomTo(result.x, result.y, result.z || 0);
+    }
+    
+    if (onSelect) {
+      onSelect(result);
+    }
+    
+    setIsModalOpen(false);
+    setLocalQuery('');
+    onChange('');
+  }, [onSelect, onZoomTo, onChange]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (results.length === 0) return;
+    
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setSelectedIndex(prev => 
+        prev < results.length - 1 ? prev + 1 : prev
+      );
+      // Scroll selected item into view
+      if (resultsRef.current) {
+        const items = resultsRef.current.querySelectorAll('.search-result-item');
+        const nextIndex = selectedIndex < results.length - 1 ? selectedIndex + 1 : selectedIndex;
+        items[nextIndex]?.scrollIntoView({ block: 'nearest' });
+      }
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setSelectedIndex(prev => prev > 0 ? prev - 1 : -1);
+      if (resultsRef.current && selectedIndex > 0) {
+        const items = resultsRef.current.querySelectorAll('.search-result-item');
+        items[selectedIndex - 1]?.scrollIntoView({ block: 'nearest' });
+      }
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (selectedIndex >= 0 && results[selectedIndex]) {
+        handleSelect(results[selectedIndex]);
+      } else if (results.length > 0) {
+        handleSelect(results[0]);
+      }
+    } else if (e.key === 'Escape') {
+      setIsModalOpen(false);
+    }
+  };
+
+  const openModal = () => {
+    setIsModalOpen(true);
+    setLocalQuery(value);
+    setTimeout(() => modalInputRef.current?.focus(), 50);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setLocalQuery('');
+    setResults([]);
+  };
+
+  // Handle Cmd/Ctrl+K shortcut
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        openModal();
+      }
+    };
+
+    document.addEventListener('keydown', handleGlobalKeyDown);
+    return () => document.removeEventListener('keydown', handleGlobalKeyDown);
+  }, []);
+
+  // Format relevance score (server returns 0-100)
+  const formatScore = (score?: number) => {
+    if (score === undefined) return null;
+    return `${Math.round(score)}%`;
+  };
+
+  return (
+    <>
+      {/* Trigger input in control bar */}
+      <div className="integrated-search-container">
+        <div className="control-search" onClick={openModal}>
+          <Search size={14} className="search-icon" />
+          <input
+            ref={triggerInputRef}
+            type="text"
+            value={value}
+            readOnly
+            onClick={openModal}
+            onFocus={openModal}
+            placeholder="Search models, tags, or model ID..."
+            className="control-search-input"
+            aria-label="Search models"
+            title="Fuzzy search: finds models even with typos. Enter a model ID (e.g., meta-llama/Llama-2-7b) to find similar models."
+          />
+          <span className="search-shortcut">
+            <kbd>Cmd</kbd>
+            <kbd>K</kbd>
+          </span>
+        </div>
+      </div>
+
+      {/* Search Modal */}
+      {isModalOpen && (
+        <div className="search-modal-overlay" onClick={closeModal}>
+          <div className="search-modal" onClick={(e) => e.stopPropagation()}>
+            <div className="search-modal-header">
+              <div className="search-modal-input-wrapper">
+                <Search size={18} className="search-modal-icon" />
+                <input
+                  ref={modalInputRef}
+                  type="text"
+                  value={localQuery}
+                  onChange={(e) => setLocalQuery(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder={isModelId(localQuery) ? "Finding similar models..." : "Fuzzy search models..."}
+                  className="search-modal-input"
+                  autoFocus
+                />
+                {localQuery.length > 0 && (
+                  <button
+                    className="search-modal-clear"
+                    onClick={() => {
+                      setLocalQuery('');
+                      setResults([]);
+                      modalInputRef.current?.focus();
+                    }}
+                    aria-label="Clear search"
+                  >
+                    <X size={16} />
+                  </button>
+                )}
+              </div>
+              <button className="search-modal-close" onClick={closeModal}>
+                <X size={20} />
+              </button>
+            </div>
+
+            <div className="search-modal-body" ref={resultsRef}>
+              {isLoading && (
+                <div className="search-modal-loading">
+                  <div className="search-loading-spinner" />
+                  <span>Searching...</span>
+                </div>
+              )}
+
+              {!isLoading && localQuery.length >= 2 && results.length === 0 && (
+                <div className="search-modal-empty">
+                  <span>No models found for "{localQuery}"</span>
+                  <p className="search-empty-hint">Try a different spelling or fewer characters</p>
+                </div>
+              )}
+
+              {!isLoading && localQuery.length < 2 && (
+                <div className="search-modal-hint">
+                  <p>Start typing to search models</p>
+                  <div className="search-hint-features">
+                    <div className="search-hint-feature">
+                      <Sparkles size={14} />
+                      <span><strong>Fuzzy search</strong> — finds models even with typos</span>
+                    </div>
+                    <div className="search-hint-feature">
+                      <Search size={14} />
+                      <span><strong>Semantic search</strong> — enter a model ID to find similar models</span>
+                    </div>
+                  </div>
+                  <div className="search-hint-examples">
+                    <span>Try: <code>lama</code> (finds llama), <code>brt</code> (finds bert), <code>gpt2</code></span>
+                  </div>
+                </div>
+              )}
+
+              {!isLoading && results.length > 0 && (
+                <>
+                  <div className="search-results-header">
+                    {searchType === 'semantic' ? (
+                      <>Similar to "{localQuery}"</>
+                    ) : (
+                      <>{totalMatches.toLocaleString()} matches <span className="search-type-badge">fuzzy</span></>
+                    )}
+                  </div>
+                  <div className="search-results-list">
+                    {results.map((result, idx) => (
+                      <div
+                        key={result.model_id}
+                        className={`search-result-item ${idx === selectedIndex ? 'selected' : ''}`}
+                        onClick={() => handleSelect(result)}
+                        onMouseEnter={() => setSelectedIndex(idx)}
+                        role="option"
+                        aria-selected={idx === selectedIndex}
+                      >
+                        <div className="search-result-content">
+                          <div className="search-result-main">
+                            <span className="search-result-id">{result.model_id}</span>
+                            {result.similarity !== undefined && (
+                              <span className="search-result-similarity" title="Semantic similarity">
+                                {(result.similarity * 100).toFixed(1)}%
+                              </span>
+                            )}
+                            {searchType === 'fuzzy' && result.score !== undefined && (
+                              <span className="search-result-relevance" title="Match relevance">
+                                {formatScore(result.score)}
+                              </span>
+                            )}
+                          </div>
+                          <div className="search-result-meta">
+                            {result.library_name && (
+                              <span className="search-result-tag">{result.library_name}</span>
+                            )}
+                            {result.pipeline_tag && (
+                              <span className="search-result-tag">{result.pipeline_tag}</span>
+                            )}
+                            {result.downloads !== undefined && result.downloads > 0 && (
+                              <span className="search-result-stat">
+                                <Download size={10} />
+                                {result.downloads >= 1000000 
+                                  ? `${(result.downloads / 1000000).toFixed(1)}M`
+                                  : result.downloads >= 1000
+                                  ? `${(result.downloads / 1000).toFixed(0)}K`
+                                  : result.downloads}
+                              </span>
+                            )}
+                            {result.likes !== undefined && result.likes > 0 && (
+                              <span className="search-result-stat">
+                                <Heart size={10} />
+                                {result.likes}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                        <ArrowRight size={14} className="search-result-arrow" />
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
+
+            <div className="search-modal-footer">
+              <div className="search-modal-shortcuts">
+                <span><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
+                <span><kbd>Enter</kbd> Select</span>
+                <span><kbd>Esc</kbd> Close</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

frontend/src/components/controls/SemanticSearch.css

@@ -0,0 +1,278 @@
+.semantic-search-container {
+  position: relative;
+  width: 100%;
+  max-width: 600px;
+}
+
+.semantic-search-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+  padding: 0.75rem;
+  background: var(--bg-secondary, #f5f5f5);
+  border: 1px solid var(--border-light, #e0e0e0);
+  border-radius: 4px;
+}
+
+[data-theme="dark"] .semantic-search-controls {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.search-mode-toggle {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.mode-btn {
+  flex: 1;
+  padding: 0.5rem 1rem;
+  background: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-medium, #ddd);
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary, #1a1a1a);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.mode-btn:hover {
+  background: var(--bg-secondary, #f5f5f5);
+  border-color: var(--accent-blue, #3b82f6);
+}
+
+.mode-btn.active {
+  background: var(--accent-blue, #3b82f6);
+  border-color: var(--accent-blue, #3b82f6);
+  color: #ffffff;
+}
+
+[data-theme="dark"] .mode-btn {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .mode-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--accent-blue);
+}
+
+[data-theme="dark"] .mode-btn.active {
+  background: var(--accent-blue);
+  color: #ffffff;
+}
+
+.query-model-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-medium, #ddd);
+  border-radius: 4px;
+  font-size: 0.875rem;
+  background: var(--bg-primary, #ffffff);
+  color: var(--text-primary, #1a1a1a);
+}
+
+[data-theme="dark"] .query-model-input {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+
+.search-filters {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.depth-filter-input,
+.family-filter-input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-medium, #ddd);
+  border-radius: 4px;
+  font-size: 0.875rem;
+  background: var(--bg-primary, #ffffff);
+  color: var(--text-primary, #1a1a1a);
+}
+
+[data-theme="dark"] .depth-filter-input,
+[data-theme="dark"] .family-filter-input {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+
+.semantic-search-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.semantic-search-input {
+  width: 100%;
+  padding: 0.75rem 2.5rem 0.75rem 1rem;
+  border: 1px solid var(--border-medium, #ddd);
+  border-radius: 4px;
+  font-size: 0.95rem;
+  background: var(--bg-primary, #ffffff);
+  color: var(--text-primary, #1a1a1a);
+}
+
+[data-theme="dark"] .semantic-search-input {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+
+.semantic-search-input:focus {
+  outline: none;
+  border-color: var(--accent-blue, #3b82f6);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.search-loading {
+  position: absolute;
+  right: 2.5rem;
+  color: var(--text-secondary, #666);
+  animation: spin 1s linear infinite;
+}
+
+.search-clear {
+  position: absolute;
+  right: 0.75rem;
+  background: none;
+  border: none;
+  color: var(--text-secondary, #666);
+  font-size: 1.25rem;
+  cursor: pointer;
+  padding: 0.25rem;
+  line-height: 1;
+}
+
+.search-clear:hover {
+  color: var(--text-primary, #1a1a1a);
+}
+
+.semantic-search-results {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  max-height: 400px;
+  overflow-y: auto;
+  background: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-medium, #ddd);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  margin-top: 0.25rem;
+}
+
+[data-theme="dark"] .semantic-search-results {
+  background: rgba(20, 20, 20, 0.98);
+  border-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
+}
+
+.semantic-search-result {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-light, #e8e8e8);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+[data-theme="dark"] .semantic-search-result {
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
+.semantic-search-result:hover,
+.semantic-search-result.selected {
+  background: var(--bg-secondary, #f5f5f5);
+}
+
+[data-theme="dark"] .semantic-search-result:hover,
+[data-theme="dark"] .semantic-search-result.selected {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.semantic-search-result:last-child {
+  border-bottom: none;
+}
+
+.result-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.result-model-id {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+  word-break: break-all;
+}
+
+.similarity-badge {
+  padding: 0.25rem 0.5rem;
+  background: var(--accent-blue, #3b82f6);
+  color: #ffffff;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.result-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  color: var(--text-secondary, #666);
+}
+
+.result-tag {
+  padding: 0.25rem 0.5rem;
+  background: var(--bg-tertiary, #f0f0f0);
+  border: 1px solid var(--border-light, #e0e0e0);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+[data-theme="dark"] .result-tag {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.depth-tag {
+  background: var(--accent-green, #10b981);
+  color: #ffffff;
+  border-color: var(--accent-green, #10b981);
+}
+
+.result-stats {
+  margin-left: auto;
+  font-size: 0.8rem;
+  color: var(--text-secondary, #999);
+}
+
+.search-no-results {
+  padding: 2rem;
+  text-align: center;
+  color: var(--text-secondary, #666);
+  font-style: italic;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+

frontend/src/components/controls/SemanticSearch.tsx

@@ -0,0 +1,398 @@
+/**
+ * Enhanced semantic search component with depth and family filtering.
+ * Supports natural language queries and semantic similarity search.
+ */
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { X } from 'lucide-react';
+import { API_BASE } from '../../config/api';
+import './SemanticSearch.css';
+
+interface SemanticSearchResult {
+  model_id: string;
+  x: number;
+  y: number;
+  z: number;
+  similarity?: number;
+  family_depth?: number | null;
+  parent_model?: string | null;
+  downloads: number;
+  likes: number;
+  library_name?: string | null;
+  pipeline_tag?: string | null;
+}
+
+interface SemanticSearchProps {
+  onSelect?: (result: SemanticSearchResult) => void;
+  onZoomTo?: (x: number, y: number, z: number) => void;
+  onSearchComplete?: (results: SemanticSearchResult[]) => void;
+}
+
+export default function SemanticSearch({ 
+  onSelect, 
+  onZoomTo,
+  onSearchComplete 
+}: SemanticSearchProps) {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SemanticSearchResult[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchMode, setSearchMode] = useState<'semantic' | 'text'>('semantic');
+  const [depthFilter, setDepthFilter] = useState<number | null>(null);
+  const [familyFilter, setFamilyFilter] = useState<string>('');
+  const [queryModel, setQueryModel] = useState<string>('');
+  
+  const inputRef = useRef<HTMLInputElement>(null);
+  const resultsRef = useRef<HTMLDivElement>(null);
+
+  // Parse natural language query for depth and family hints
+  const parseQuery = useCallback((q: string) => {
+    const lower = q.toLowerCase();
+    let depth: number | null = null;
+    let family: string = '';
+    let cleanQuery = q;
+
+    // Extract depth hints: "depth 2", "at depth 3", "level 1", etc.
+    const depthMatch = lower.match(/(?:depth|level|at depth)\s*(\d+)/);
+    if (depthMatch) {
+      depth = parseInt(depthMatch[1], 10);
+      cleanQuery = cleanQuery.replace(new RegExp(depthMatch[0], 'gi'), '').trim();
+    }
+
+    // Extract family hints: "family Llama", "in Meta-Llama", etc.
+    const familyMatch = lower.match(/(?:family|in|from)\s+([a-zA-Z0-9\-_\/]+)/);
+    if (familyMatch) {
+      family = familyMatch[1];
+      cleanQuery = cleanQuery.replace(new RegExp(familyMatch[0], 'gi'), '').trim();
+    }
+
+    return { depth, family, cleanQuery };
+  }, []);
+
+  // Perform semantic search
+  const performSemanticSearch = useCallback(async (queryModelId: string, depth: number | null, family: string) => {
+    // Validate model ID format (should be org/model-name)
+    if (!queryModelId || queryModelId.length < 3 || !queryModelId.includes('/')) {
+      setResults([]);
+      setIsOpen(false);
+      setIsLoading(false);
+      return;
+    }
+    
+    setIsLoading(true);
+    try {
+      const params = new URLSearchParams({
+        query_model_id: queryModelId,
+        k: '100',
+        min_downloads: '0',
+        min_likes: '0',
+        projection_method: 'umap',
+      });
+
+      const response = await fetch(`${API_BASE}/api/models/semantic-similarity?${params}`);
+      
+      if (response.status === 404) {
+        // Model not found - this is expected for some models
+        setResults([]);
+        setIsOpen(false);
+        setIsLoading(false);
+        return;
+      }
+      
+      if (!response.ok) {
+        const errorText = await response.text();
+        let errorMessage = 'Semantic search failed';
+        try {
+          const errorData = JSON.parse(errorText);
+          errorMessage = errorData.detail || errorMessage;
+        } catch {
+          errorMessage = `Error ${response.status}: ${errorText || errorMessage}`;
+        }
+        throw new Error(errorMessage);
+      }
+      
+      const data = await response.json();
+      let models = data.models || [];
+
+      // Filter by depth if specified
+      if (depth !== null) {
+        models = models.filter((m: SemanticSearchResult) => 
+          m.family_depth !== null && m.family_depth !== undefined && m.family_depth === depth
+        );
+      }
+
+      // Filter by family if specified
+      if (family) {
+        models = models.filter((m: SemanticSearchResult) => {
+          const modelIdLower = m.model_id.toLowerCase();
+          const parentLower = (m.parent_model || '').toLowerCase();
+          const familyLower = family.toLowerCase();
+          return modelIdLower.includes(familyLower) || parentLower.includes(familyLower);
+        });
+      }
+
+      // Sort by similarity (highest first)
+      models.sort((a: SemanticSearchResult, b: SemanticSearchResult) => 
+        (b.similarity || 0) - (a.similarity || 0)
+      );
+
+      setResults(models.slice(0, 20)); // Top 20
+      setIsOpen(true);
+      setSelectedIndex(-1);
+      
+      if (onSearchComplete) {
+        onSearchComplete(models);
+      }
+    } catch {
+      setResults([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [onSearchComplete]);
+
+  // Perform text search with depth/family filters
+  const performTextSearch = useCallback(async (searchQuery: string, depth: number | null, family: string) => {
+    setIsLoading(true);
+    try {
+      const params = new URLSearchParams({
+        q: searchQuery,
+        limit: '50',
+      });
+
+      const response = await fetch(`${API_BASE}/api/search?${params}`);
+      if (!response.ok) throw new Error('Search failed');
+      
+      const data = await response.json();
+      let models = data.results || [];
+
+      // Filter by depth if specified (would need to fetch family tree data)
+      // For now, we'll filter by family name in model_id
+      if (family) {
+        models = models.filter((m: any) => {
+          const modelIdLower = m.model_id.toLowerCase();
+          const parentLower = (m.parent_model || '').toLowerCase();
+          const familyLower = family.toLowerCase();
+          return modelIdLower.includes(familyLower) || parentLower.includes(familyLower);
+        });
+      }
+
+      // Convert to SemanticSearchResult format
+      const formattedResults: SemanticSearchResult[] = models.map((m: any) => ({
+        model_id: m.model_id,
+        x: m.x || 0,
+        y: m.y || 0,
+        z: m.z || 0,
+        downloads: m.downloads || 0,
+        likes: m.likes || 0,
+        library_name: m.library,
+        pipeline_tag: m.pipeline,
+        parent_model: m.parent_model,
+      }));
+
+      setResults(formattedResults.slice(0, 20));
+      setIsOpen(true);
+      setSelectedIndex(-1);
+      
+      if (onSearchComplete) {
+        onSearchComplete(formattedResults);
+      }
+    } catch {
+      setResults([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [onSearchComplete]);
+
+  // Handle search
+  useEffect(() => {
+    if (query.length < 2 && !queryModel) {
+      setResults([]);
+      setIsOpen(false);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      const { depth, family, cleanQuery } = parseQuery(query);
+      
+      // Update filters from parsed query
+      if (depth !== null) setDepthFilter(depth);
+      if (family) setFamilyFilter(family);
+
+      if (searchMode === 'semantic' && queryModel) {
+        performSemanticSearch(queryModel, depth || depthFilter, family || familyFilter);
+      } else if (cleanQuery.length >= 2) {
+        performTextSearch(cleanQuery, depth || depthFilter, family || familyFilter);
+      }
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [query, queryModel, searchMode, depthFilter, familyFilter, parseQuery, performSemanticSearch, performTextSearch]);
+
+  const handleSelect = useCallback((result: SemanticSearchResult) => {
+    if (onZoomTo && result.x !== undefined && result.y !== undefined) {
+      onZoomTo(result.x, result.y, result.z || 0);
+    }
+    
+    if (onSelect) {
+      onSelect(result);
+    }
+    
+    setIsOpen(false);
+    setQuery('');
+    setQueryModel('');
+    inputRef.current?.blur();
+  }, [onSelect, onZoomTo]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!isOpen || results.length === 0) return;
+    
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setSelectedIndex(prev => 
+        prev < results.length - 1 ? prev + 1 : prev
+      );
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setSelectedIndex(prev => prev > 0 ? prev - 1 : -1);
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (selectedIndex >= 0 && results[selectedIndex]) {
+        handleSelect(results[selectedIndex]);
+      } else if (results.length > 0) {
+        handleSelect(results[0]);
+      }
+    } else if (e.key === 'Escape') {
+      setIsOpen(false);
+      inputRef.current?.blur();
+    }
+  };
+
+  return (
+    <div className="semantic-search-container">
+      <div className="semantic-search-controls">
+        <div className="search-mode-toggle">
+          <button
+            className={`mode-btn ${searchMode === 'semantic' ? 'active' : ''}`}
+            onClick={() => setSearchMode('semantic')}
+            title="Semantic similarity search"
+          >
+            Semantic
+          </button>
+          <button
+            className={`mode-btn ${searchMode === 'text' ? 'active' : ''}`}
+            onClick={() => setSearchMode('text')}
+            title="Text search"
+          >
+            Text
+          </button>
+        </div>
+
+        {searchMode === 'semantic' && (
+          <input
+            type="text"
+            value={queryModel}
+            onChange={(e) => setQueryModel(e.target.value)}
+            placeholder="Reference model ID (e.g., Meta-Llama-3.1-8B-Instruct)"
+            className="query-model-input"
+          />
+        )}
+
+        <div className="search-filters">
+          <input
+            type="number"
+            value={depthFilter || ''}
+            onChange={(e) => setDepthFilter(e.target.value ? parseInt(e.target.value, 10) : null)}
+            placeholder="Depth"
+            min="0"
+            className="depth-filter-input"
+            title="Filter by family depth (0 = root)"
+          />
+          <input
+            type="text"
+            value={familyFilter}
+            onChange={(e) => setFamilyFilter(e.target.value)}
+            placeholder="Family name"
+            className="family-filter-input"
+            title="Filter by family name"
+          />
+        </div>
+      </div>
+
+      <div className="semantic-search-bar">
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onFocus={() => results.length > 0 && setIsOpen(true)}
+          placeholder={
+            searchMode === 'semantic'
+              ? "e.g., 'depth 2 Llama models' or 'family Meta-Llama depth 3'"
+              : "Search models, orgs, tasks..."
+          }
+          className="semantic-search-input"
+          aria-label="Semantic search"
+        />
+        {isLoading && <div className="search-loading">Loading...</div>}
+        {query.length > 0 && !isLoading && (
+          <button
+            className="search-clear"
+            onClick={() => {
+              setQuery('');
+              setResults([]);
+              setIsOpen(false);
+            }}
+            aria-label="Clear search"
+          >
+            <X size={14} />
+          </button>
+        )}
+      </div>
+
+      {isOpen && results.length > 0 && (
+        <div ref={resultsRef} className="semantic-search-results" role="listbox">
+          {results.map((result, idx) => (
+            <div
+              key={result.model_id}
+              className={`semantic-search-result ${idx === selectedIndex ? 'selected' : ''}`}
+              onClick={() => handleSelect(result)}
+              role="option"
+              aria-selected={idx === selectedIndex}
+            >
+              <div className="result-header">
+                <strong className="result-model-id">{result.model_id}</strong>
+                {result.similarity !== undefined && (
+                  <span className="similarity-badge">
+                    {(result.similarity * 100).toFixed(1)}% similar
+                  </span>
+                )}
+              </div>
+              <div className="result-meta">
+                {result.family_depth !== null && result.family_depth !== undefined && (
+                  <span className="result-tag depth-tag">Depth {result.family_depth}</span>
+                )}
+                {result.library_name && (
+                  <span className="result-tag">{result.library_name}</span>
+                )}
+                {result.pipeline_tag && (
+                  <span className="result-tag">{result.pipeline_tag}</span>
+                )}
+                <span className="result-stats">
+                  {result.downloads.toLocaleString()} downloads • {result.likes.toLocaleString()} likes
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {isOpen && query.length >= 2 && results.length === 0 && !isLoading && (
+        <div className="semantic-search-results">
+          <div className="search-no-results">No results found</div>
+        </div>
+      )}
+    </div>
+  );
+}
+

frontend/src/components/controls/VisualizationModeButtons.tsx

@@ -14,7 +14,6 @@ interface ModeOption {
 }
 
 const MODES: ModeOption[] = [
-  { value: 'scatter', label: '2D Scatter', icon: '', description: '2D projection view' },
   { value: 'network', label: 'Network', icon: '', description: 'Network graph view' },
   { value: 'distribution', label: 'Distribution', icon: '', description: 'Statistical distributions' },
 ];

frontend/src/components/layout/SearchBar.tsx

@@ -3,6 +3,7 @@
  * Integrates with filter store and triggers map zoom/modal open.
  */
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { X } from 'lucide-react';
 import { useFilterStore } from '../../stores/filterStore';
 import './SearchBar.css';
 
@@ -56,8 +57,7 @@ export default function SearchBar({ onSelect, onZoomTo }: SearchBarProps) {
         setResults(data.results || []);
         setIsOpen(true);
         setSelectedIndex(-1);
-      } catch (err) {
-        console.error('Search error:', err);
+      } catch {
         setResults([]);
       } finally {
         setIsLoading(false);
@@ -146,7 +146,7 @@ export default function SearchBar({ onSelect, onZoomTo }: SearchBarProps) {
           aria-expanded={isOpen}
           aria-haspopup="listbox"
         />
-        {isLoading && <div className="search-loading">⟳</div>}
+        {isLoading && <div className="search-loading">Loading...</div>}
         {query.length > 0 && !isLoading && (
           <button
             className="search-clear"
@@ -157,7 +157,7 @@ export default function SearchBar({ onSelect, onZoomTo }: SearchBarProps) {
             }}
             aria-label="Clear search"
           >
-            ×
+            <X size={14} />
           </button>
         )}
       </div>

frontend/src/components/modals/FileTree.css

@@ -1,268 +0,0 @@
-.file-tree-container {
-  margin-top: 1rem;
-  border: 1px solid #e0e0e0;
-  border-radius: 0;
-  background: #fafafa;
-  max-height: 600px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.file-tree-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  background: #f5f5f5;
-  border-bottom: 1px solid #e0e0e0;
-  font-size: 0.9rem;
-  font-weight: 600;
-  flex-shrink: 0;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-
-.file-count-badge {
-  background: #e3f2fd;
-  color: #1976d2;
-  padding: 0.2rem 0.5rem;
-  border-radius: 0;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-.file-tree-link {
-  color: #4a90e2;
-  text-decoration: none;
-  font-size: 0.85rem;
-  font-weight: 400;
-  white-space: nowrap;
-}
-
-.file-tree-link:hover {
-  text-decoration: underline;
-}
-
-.file-tree-button {
-  background: #f0f0f0;
-  border: 1px solid #d0d0d0;
-  border-radius: 0;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-  cursor: pointer;
-  color: #333;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  transition: background 0.15s;
-}
-
-.file-tree-button:hover {
-  background: #e0e0e0;
-}
-
-.file-tree-button:active {
-  background: #d0d0d0;
-}
-
-.file-tree-filters {
-  padding: 0.75rem 1rem;
-  background: #ffffff;
-  border-bottom: 1px solid #e0e0e0;
-  display: flex;
-  gap: 0.75rem;
-  flex-shrink: 0;
-  position: sticky;
-  top: 48px;
-  z-index: 9;
-}
-
-.file-tree-search {
-  flex: 1;
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.file-tree-search-input {
-  width: 100%;
-  padding: 0.5rem 2rem 0.5rem 0.75rem;
-  border: 1px solid #d0d0d0;
-  border-radius: 0;
-  font-size: 0.85rem;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-}
-
-.file-tree-search-input:focus {
-  outline: none;
-  border-color: #4a90e2;
-  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
-}
-
-.file-tree-clear {
-  position: absolute;
-  right: 0.5rem;
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: #666;
-  font-size: 1rem;
-  padding: 0.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0;
-}
-
-.file-tree-clear:hover {
-  background: #f0f0f0;
-  color: #1a1a1a;
-}
-
-.file-tree-type-filter {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid #d0d0d0;
-  border-radius: 0;
-  font-size: 0.85rem;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  background: white;
-  cursor: pointer;
-  min-width: 150px;
-}
-
-.file-tree-type-filter:focus {
-  outline: none;
-  border-color: #4a90e2;
-  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
-}
-
-.file-tree {
-  padding: 0.5rem;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.85rem;
-  flex: 1;
-  overflow-y: auto;
-}
-
-.file-tree-node {
-  margin: 0.125rem 0;
-}
-
-.file-tree-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: 0;
-  transition: background 0.15s;
-  user-select: none;
-}
-
-.file-tree-item.directory {
-  cursor: pointer;
-}
-
-.file-tree-item.directory:hover {
-  background: #e8f4f8;
-}
-
-.file-tree-item.file:hover {
-  background: #f0f0f0;
-}
-
-.file-actions {
-  display: flex;
-  gap: 0.25rem;
-  margin-left: auto;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.file-tree-item:hover .file-actions {
-  opacity: 1;
-}
-
-.file-action-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 0.9rem;
-  padding: 0.25rem;
-  border-radius: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.15s;
-  text-decoration: none;
-  color: inherit;
-}
-
-.file-action-btn:hover {
-  background: rgba(0, 0, 0, 0.1);
-}
-
-.file-icon {
-  font-size: 1rem;
-  width: 1.25rem;
-  text-align: center;
-}
-
-.file-name {
-  flex: 1;
-  color: #1a1a1a;
-  word-break: break-all;
-}
-
-.file-size {
-  color: #666;
-  font-size: 0.8rem;
-  margin-left: auto;
-}
-
-.file-expand {
-  color: #666;
-  font-size: 0.7rem;
-  width: 0.75rem;
-  text-align: center;
-}
-
-.file-tree-children {
-  margin-left: 0.5rem;
-  border-left: 1px solid #e8e8e8;
-  padding-left: 0.5rem;
-  margin-top: 0.125rem;
-}
-
-.file-tree-loading,
-.file-tree-error,
-.file-tree-empty {
-  padding: 1rem;
-  text-align: center;
-  color: #666;
-  font-size: 0.9rem;
-}
-
-.file-tree-error {
-  color: #d32f2f;
-}
-
-/* Scrollbar styling */
-.file-tree-container::-webkit-scrollbar {
-  width: 8px;
-}
-
-.file-tree-container::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 0;
-}
-
-.file-tree-container::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 0;
-}
-
-.file-tree-container::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
-}
-

frontend/src/components/modals/FileTree.tsx

@@ -1,509 +0,0 @@
-/**
- * File tree component for displaying model file structure.
- * Fetches and displays files from Hugging Face model repository.
- */
-import React, { useState, useEffect, useMemo } from 'react';
-import { getHuggingFaceFileTreeUrl } from '../../utils/api/hfUrl';
-import './FileTree.css';
-
-import { API_BASE } from '../../config/api';
-
-interface FileNode {
-  path: string;
-  type: 'file' | 'directory';
-  size?: number;
-  children?: FileNode[];
-}
-
-interface FileTreeProps {
-  modelId: string;
-}
-
-export default function FileTree({ modelId }: FileTreeProps) {
-  const [files, setFiles] = useState<FileNode[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set());
-  const [searchQuery, setSearchQuery] = useState('');
-  const [fileTypeFilter, setFileTypeFilter] = useState<string>('all');
-  const [showSearch, setShowSearch] = useState(false);
-  const searchInputRef = React.useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!modelId) {
-      setLoading(false);
-      setError('No model ID provided');
-      return;
-    }
-
-    const fetchFiles = async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const response = await fetch(
-          `${API_BASE}/api/model/${encodeURIComponent(modelId)}/files?branch=main`
-        );
-
-        if (response.status === 404) {
-          throw new Error('File tree not available for this model');
-        }
-        
-        if (response.status === 503) {
-          throw new Error('Backend service unavailable');
-        }
-
-        if (!response.ok) {
-          const errorText = await response.text();
-          throw new Error(`Failed to load file tree: ${response.status} ${errorText}`);
-        }
-
-        const data = await response.json();
-        
-        if (!Array.isArray(data)) {
-          throw new Error('Invalid response format');
-        }
-        
-        // Convert flat list to tree structure
-        const tree = buildFileTree(data);
-        setFiles(tree);
-      } catch (err: any) {
-        const errorMessage = err instanceof Error ? err.message : 'Failed to load files';
-        setError(errorMessage);
-        // Only log in development
-        if (process.env.NODE_ENV === 'development') {
-          console.error('Error fetching file tree:', err);
-        }
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchFiles();
-  }, [modelId]);
-
-  const buildFileTree = (fileList: any[]): FileNode[] => {
-    if (!Array.isArray(fileList) || fileList.length === 0) {
-      return [];
-    }
-
-    const tree: FileNode[] = [];
-    const pathMap = new Map<string, FileNode>();
-
-    // Sort files by path for consistent ordering
-    const sortedFiles = [...fileList].sort((a, b) => {
-      const pathA = a.path || '';
-      const pathB = b.path || '';
-      return pathA.localeCompare(pathB);
-    });
-
-    for (const file of sortedFiles) {
-      if (!file.path) continue;
-
-      const parts = file.path.split('/').filter((p: string) => p.length > 0);
-      if (parts.length === 0) continue;
-
-      let currentPath = '';
-      let parent: FileNode | null = null;
-
-      for (let i = 0; i < parts.length; i++) {
-        const part = parts[i];
-        currentPath = currentPath ? `${currentPath}/${part}` : part;
-
-        if (!pathMap.has(currentPath)) {
-          const isDirectory = i < parts.length - 1;
-          const node: FileNode = {
-            path: currentPath,
-            type: isDirectory ? 'directory' : 'file',
-            size: isDirectory ? undefined : (file.size || undefined), // Only set size for files
-            children: isDirectory ? [] : undefined,
-          };
-
-          pathMap.set(currentPath, node);
-
-          if (parent) {
-            parent.children!.push(node);
-          } else {
-            tree.push(node);
-          }
-
-          parent = node;
-        } else {
-          parent = pathMap.get(currentPath)!;
-        }
-      }
-    }
-
-    return tree;
-  };
-
-  const toggleExpand = (path: string) => {
-    setExpandedPaths((prev) => {
-      const next = new Set(prev);
-      if (next.has(path)) {
-        next.delete(path);
-      } else {
-        next.add(path);
-      }
-      return next;
-    });
-  };
-
-  const expandAll = () => {
-    const allPaths = new Set<string>();
-    const collectPaths = (nodes: FileNode[]) => {
-      nodes.forEach(node => {
-        if (node.type === 'directory' && node.children) {
-          allPaths.add(node.path);
-          if (node.children.length > 0) {
-            collectPaths(node.children);
-          }
-        }
-      });
-    };
-    collectPaths(files);
-    setExpandedPaths(allPaths);
-  };
-
-  const collapseAll = () => {
-    setExpandedPaths(new Set());
-  };
-
-  const formatFileSize = (bytes?: number): string => {
-    if (!bytes) return '';
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-    return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
-  };
-
-  // Get all file extensions from the tree
-  const getAllFileExtensions = useMemo(() => {
-    const extensions = new Set<string>();
-    const collectExtensions = (nodes: FileNode[]) => {
-      nodes.forEach(node => {
-        if (node.type === 'file') {
-          const ext = node.path.split('.').pop()?.toLowerCase();
-          if (ext) extensions.add(ext);
-        }
-        if (node.children) {
-          collectExtensions(node.children);
-        }
-      });
-    };
-    collectExtensions(files);
-    return Array.from(extensions).sort();
-  }, [files]);
-
-  // Auto-expand directories when searching
-  useEffect(() => {
-    if (searchQuery) {
-      const pathsToExpand = new Set<string>();
-      const findMatchingPaths = (nodes: FileNode[], query: string) => {
-        nodes.forEach(node => {
-          if (node.path.toLowerCase().includes(query.toLowerCase())) {
-            // Expand all parent directories
-            const parts = node.path.split('/');
-            let currentPath = '';
-            for (let i = 0; i < parts.length - 1; i++) {
-              currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i];
-              pathsToExpand.add(currentPath);
-            }
-          }
-          if (node.children) {
-            findMatchingPaths(node.children, query);
-          }
-        });
-      };
-      findMatchingPaths(files, searchQuery);
-      setExpandedPaths(pathsToExpand);
-    }
-  }, [searchQuery, files]);
-
-  // Filter files based on search and file type
-  const filterNodes = (nodes: FileNode[]): FileNode[] => {
-    return nodes
-      .map(node => {
-        const matchesSearch = !searchQuery || 
-          node.path.toLowerCase().includes(searchQuery.toLowerCase());
-        const matchesType = fileTypeFilter === 'all' || 
-          (node.type === 'file' && node.path.toLowerCase().endsWith(`.${fileTypeFilter}`)) ||
-          (node.type === 'directory');
-        
-        if (!matchesSearch || !matchesType) {
-          return null;
-        }
-
-        const filteredChildren = node.children ? filterNodes(node.children) : undefined;
-        const result: FileNode | null = filteredChildren && filteredChildren.length > 0
-          ? { ...node, children: filteredChildren }
-          : filteredChildren === undefined && matchesSearch && matchesType
-          ? { ...node }
-          : null;
-        return result;
-      })
-      .filter((node): node is FileNode => node !== null);
-  };
-
-  const filteredFiles = useMemo(() => {
-    if (!searchQuery && fileTypeFilter === 'all') return files;
-    return filterNodes(files);
-  }, [files, searchQuery, fileTypeFilter]);
-
-  // Count total files
-  const countFiles = (nodes: FileNode[]): number => {
-    let count = 0;
-    nodes.forEach(node => {
-      if (node.type === 'file') count++;
-      if (node.children) count += countFiles(node.children);
-    });
-    return count;
-  };
-
-  const totalFileCount = useMemo(() => countFiles(files), [files]);
-  const visibleFileCount = useMemo(() => countFiles(filteredFiles), [filteredFiles]);
-
-  // Keyboard shortcut for search (Cmd+K / Ctrl+K)
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault();
-        setShowSearch(true);
-        setTimeout(() => searchInputRef.current?.focus(), 0);
-      }
-      if (e.key === 'Escape' && showSearch) {
-        setShowSearch(false);
-        setSearchQuery('');
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [showSearch]);
-
-  const getFileIcon = (node: FileNode): string => {
-    if (node.type === 'directory') {
-      return expandedPaths.has(node.path) ? '▼' : '▶';
-    }
-    const ext = node.path.split('.').pop()?.toLowerCase();
-    const iconMap: Record<string, string> = {
-      'py': 'py',
-      'json': 'json',
-      'txt': 'txt',
-      'md': 'md',
-      'yml': 'yml',
-      'yaml': 'yaml',
-      'bin': 'bin',
-      'safetensors': 'st',
-      'pt': 'pt',
-      'pth': 'pth',
-      'onnx': 'onnx',
-      'pb': 'pb',
-    };
-    return iconMap[ext || ''] || '•';
-  };
-
-  const copyFilePath = (path: string) => {
-    navigator.clipboard.writeText(path).then(() => {
-      // Show temporary feedback
-      const button = document.querySelector(`[data-file-path="${path}"]`) as HTMLElement;
-      if (button) {
-        const originalText = button.textContent;
-        button.textContent = 'Copied!';
-        setTimeout(() => {
-          if (button) button.textContent = originalText;
-        }, 1000);
-      }
-    });
-  };
-
-  const getFileUrl = (path: string) => {
-    return `https://huggingface.co/${modelId}/resolve/main/${path}`;
-  };
-
-  const renderNode = (node: FileNode, depth: number = 0): React.ReactNode => {
-    const isExpanded = expandedPaths.has(node.path);
-    const hasChildren = node.children && node.children.length > 0;
-    const fileName = node.path.split('/').pop() || node.path;
-
-    return (
-      <div key={node.path} className="file-tree-node" style={{ paddingLeft: `${depth * 1.5}rem` }}>
-        <div
-          className={`file-tree-item ${node.type} ${isExpanded ? 'expanded' : ''}`}
-          onClick={() => node.type === 'directory' && toggleExpand(node.path)}
-          style={{ cursor: node.type === 'directory' ? 'pointer' : 'default' }}
-        >
-          <span className="file-icon">{getFileIcon(node)}</span>
-          <span className="file-name" title={node.path}>{fileName}</span>
-          {node.type === 'file' && node.size && (
-            <span className="file-size">{formatFileSize(node.size)}</span>
-          )}
-          {node.type === 'directory' && (
-            <span className="file-expand">{isExpanded ? '▼' : '▶'}</span>
-          )}
-          {node.type === 'file' && (
-            <div className="file-actions" onClick={(e) => e.stopPropagation()}>
-              <button
-                className="file-action-btn"
-                onClick={() => copyFilePath(node.path)}
-                data-file-path={node.path}
-                title="Copy file path"
-                aria-label="Copy path"
-              >
-                Copy
-              </button>
-              <a
-                href={getFileUrl(node.path)}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="file-action-btn"
-                title="Download file"
-                aria-label="Download"
-                onClick={(e) => e.stopPropagation()}
-              >
-                Download
-              </a>
-            </div>
-          )}
-        </div>
-        {isExpanded && hasChildren && (
-          <div className="file-tree-children">
-            {node.children!.map((child) => renderNode(child, depth + 1))}
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  if (loading) {
-    return (
-      <div className="file-tree-container">
-        <div className="file-tree-loading">Loading file tree...</div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="file-tree-container">
-        <div className="file-tree-error">
-          {error}
-          <div style={{ marginTop: '0.5rem', fontSize: '0.85rem', color: '#666' }}>
-            File tree may not be available for this model.
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (files.length === 0) {
-    return (
-      <div className="file-tree-container">
-        <div className="file-tree-empty">No files found</div>
-      </div>
-    );
-  }
-
-  const hasDirectories = files.some(node => node.type === 'directory');
-
-  return (
-    <div className="file-tree-container">
-      <div className="file-tree-header">
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-          <strong>Repository Files</strong>
-          <span className="file-count-badge">
-            {visibleFileCount === totalFileCount 
-              ? `${totalFileCount} file${totalFileCount !== 1 ? 's' : ''}`
-              : `${visibleFileCount} of ${totalFileCount} files`}
-          </span>
-        </div>
-        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
-          <button
-            onClick={() => setShowSearch(!showSearch)}
-            className="file-tree-button"
-            title="Search files (Cmd+K)"
-            aria-label="Search"
-          >
-            🔍 Search
-          </button>
-          {hasDirectories && (
-            <>
-              <button
-                onClick={expandAll}
-                className="file-tree-button"
-                title="Expand all directories"
-                aria-label="Expand all"
-              >
-                Expand All
-              </button>
-              <button
-                onClick={collapseAll}
-                className="file-tree-button"
-                title="Collapse all directories"
-                aria-label="Collapse all"
-              >
-                Collapse All
-              </button>
-            </>
-          )}
-          <a
-            href={getHuggingFaceFileTreeUrl(modelId, 'main')}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="file-tree-link"
-          >
-            View on HF →
-          </a>
-        </div>
-      </div>
-
-      {/* Search and Filter Bar */}
-      {(showSearch || searchQuery || fileTypeFilter !== 'all') && (
-        <div className="file-tree-filters">
-          <div className="file-tree-search">
-            <input
-              ref={searchInputRef}
-              type="text"
-              placeholder="Search files... (Cmd+K)"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="file-tree-search-input"
-            />
-            {searchQuery && (
-              <button
-                onClick={() => setSearchQuery('')}
-                className="file-tree-clear"
-                aria-label="Clear search"
-              >
-                ✕
-              </button>
-            )}
-          </div>
-          {getAllFileExtensions.length > 0 && (
-            <select
-              value={fileTypeFilter}
-              onChange={(e) => setFileTypeFilter(e.target.value)}
-              className="file-tree-type-filter"
-            >
-              <option value="all">All file types</option>
-              {getAllFileExtensions.map(ext => (
-                <option key={ext} value={ext}>.{ext}</option>
-              ))}
-            </select>
-          )}
-        </div>
-      )}
-
-      <div className="file-tree">
-        {filteredFiles.length === 0 ? (
-          <div className="file-tree-empty">
-            {searchQuery || fileTypeFilter !== 'all' 
-              ? 'No files match your filters'
-              : 'No files found'}
-          </div>
-        ) : (
-          filteredFiles.map((node) => renderNode(node))
-        )}
-      </div>
-    </div>
-  );
-}
-

frontend/src/components/modals/ModelModal.css

@@ -1,533 +0,0 @@
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 2rem;
-  animation: fadeIn 0.2s ease-in;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.modal-content {
-  background: #ffffff;
-  border-radius: 0;
-  max-width: 900px;
-  width: 100%;
-  max-height: 90vh;
-  overflow-y: auto;
-  padding: 0;
-  position: relative;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-  border: 1px solid #d0d0d0;
-  animation: slideUp 0.3s ease-out;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  display: flex;
-  flex-direction: column;
-}
-
-.modal-content[data-tab="files"] {
-  max-width: 1000px;
-  max-height: 95vh;
-}
-
-@keyframes slideUp {
-  from {
-    transform: translateY(20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.modal-close {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  background: none;
-  border: 1px solid #d0d0d0;
-  font-size: 0.85rem;
-  line-height: 1;
-  cursor: pointer;
-  color: #6a6a6a;
-  padding: 0.4rem 0.8rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0;
-  transition: all 0.2s;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-}
-
-.modal-close:hover {
-  background: #f0f0f0;
-  color: #1a1a1a;
-}
-
-.modal-header {
-  padding: 1.5rem 2rem;
-  border-bottom: 1px solid #e0e0e0;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
-  background: #fafafa;
-}
-
-.modal-content h2 {
-  margin: 0;
-  font-size: 1.5rem;
-  color: #1a1a1a;
-  word-break: break-word;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-weight: 600;
-  line-height: 1.3;
-}
-
-.modal-body {
-  padding: 1.5rem 2rem;
-  flex: 1;
-  overflow-y: auto;
-}
-
-.modal-actions {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-  margin-bottom: 1.5rem;
-  padding-bottom: 1.5rem;
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.action-btn {
-  padding: 0.5rem 1rem;
-  background: #6a6a6a;
-  color: white;
-  border: none;
-  border-radius: 0;
-  cursor: pointer;
-  font-size: 0.85rem;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  transition: all 0.2s;
-  font-weight: 500;
-}
-
-.action-btn:hover {
-  background: #4a4a4a;
-  transform: translateY(-1px);
-}
-
-.action-btn.active {
-  background: #4a4a4a;
-}
-
-.modal-tabs {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
-  border-bottom: 2px solid #e0e0e0;
-  position: sticky;
-  top: 0;
-  background: #ffffff;
-  z-index: 10;
-  padding-top: 0.5rem;
-  margin-top: -0.5rem;
-}
-
-.modal-tab {
-  padding: 0.75rem 1.5rem;
-  background: none;
-  border: none;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
-  font-size: 0.9rem;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  color: #666;
-  font-weight: 500;
-  margin-bottom: -2px;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  position: relative;
-}
-
-.tab-icon {
-  font-size: 1rem;
-}
-
-.tab-badge {
-  background: #4a90e2;
-  color: white;
-  font-size: 0.7rem;
-  padding: 0.15rem 0.4rem;
-  border-radius: 0;
-  font-weight: 600;
-  margin-left: 0.25rem;
-}
-
-.modal-tab:hover {
-  color: #1a1a1a;
-  background: #f5f5f5;
-}
-
-.modal-tab.active {
-  color: #1a1a1a;
-  border-bottom-color: #1a1a1a;
-  font-weight: 600;
-}
-
-.modal-info-section {
-  min-height: 200px;
-}
-
-.info-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
-.info-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.info-label {
-  font-size: 0.8rem;
-  color: #666;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  font-weight: 600;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-}
-
-.info-value {
-  font-size: 1.1rem;
-  color: #1a1a1a;
-  font-weight: 500;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-}
-
-.info-value.highlight {
-  font-size: 1.3rem;
-  font-weight: 600;
-  color: #1a1a1a;
-}
-
-.info-value.colored {
-  font-size: 1.1rem;
-}
-
-.info-value.coordinates {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  font-size: 0.95rem;
-  font-family: 'Monaco', 'Menlo', monospace;
-  color: #4a4a4a;
-}
-
-.info-section {
-  margin-bottom: 1.5rem;
-  padding: 1rem;
-  background: #fafafa;
-  border-radius: 0;
-  border: 1px solid #e0e0e0;
-}
-
-.section-title {
-  font-size: 0.85rem;
-  color: #666;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  font-weight: 600;
-  margin-bottom: 0.75rem;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-}
-
-.section-content {
-  font-size: 0.95rem;
-  color: #1a1a1a;
-  line-height: 1.6;
-}
-
-.tag-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.tag {
-  display: inline-block;
-  padding: 0.35rem 0.75rem;
-  background: #e8f4f8;
-  color: #1a1a1a;
-  border-radius: 0;
-  font-size: 0.85rem;
-  font-weight: 500;
-  border: 1px solid #c8e6c9;
-}
-
-.tag.license-tag {
-  background: #fff3e0;
-  border-color: #ffcc80;
-}
-
-.model-link {
-  color: #4a90e2;
-  text-decoration: none;
-  font-weight: 500;
-  word-break: break-all;
-}
-
-.model-link:hover {
-  text-decoration: underline;
-}
-
-.modal-section {
-  margin-bottom: 1.5rem;
-}
-
-.modal-section:last-child {
-  margin-bottom: 0;
-}
-
-.modal-section h3 {
-  margin: 0 0 0.75rem 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: #4a4a4a;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-}
-
-.modal-info-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-}
-
-.modal-info-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.modal-info-item strong {
-  font-size: 0.875rem;
-  color: #6a6a6a;
-  font-weight: 500;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-}
-
-.modal-info-item span {
-  font-size: 1rem;
-  color: #1a1a1a;
-  font-weight: 500;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-}
-
-.modal-tags {
-  margin: 0;
-  padding: 0.75rem;
-  background: #f5f5f5;
-  border-radius: 0;
-  color: #1a1a1a;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-}
-
-.modal-footer {
-  margin-top: 2rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid #e0e0e0;
-  display: flex;
-  justify-content: center;
-}
-
-.modal-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  background: #1a1a1a;
-  color: #ffffff;
-  text-decoration: none;
-  border-radius: 0;
-  font-weight: 500;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  transition: all 0.2s;
-  border: 1px solid #1a1a1a;
-}
-
-.modal-link:hover {
-  background: #4a4a4a;
-  border-color: #4a4a4a;
-  transform: translateY(-1px);
-}
-
-@media (max-width: 768px) {
-  .modal-content {
-    max-width: 100%;
-    margin: 1rem;
-  }
-
-  .modal-header {
-    padding: 1rem 1.5rem;
-  }
-
-  .modal-body {
-    padding: 1rem 1.5rem;
-  }
-
-  .info-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .modal-tabs {
-    overflow-x: auto;
-  }
-}
-
-/* Papers Section */
-.papers-loading,
-.papers-error,
-.papers-empty {
-  text-align: center;
-  padding: 2rem;
-  color: #666;
-}
-
-.papers-error {
-  color: #d32f2f;
-  background: #ffebee;
-  border-radius: 0;
-  padding: 1rem;
-}
-
-.papers-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.paper-card {
-  background: #f9f9f9;
-  border: 1px solid #e0e0e0;
-  border-radius: 0;
-  padding: 1.5rem;
-  transition: box-shadow 0.2s;
-}
-
-.paper-card:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.paper-header {
-  margin-bottom: 1rem;
-}
-
-.paper-title {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.25rem;
-  line-height: 1.4;
-}
-
-.paper-link {
-  color: #1976d2;
-  text-decoration: none;
-  transition: color 0.2s;
-}
-
-.paper-link:hover {
-  color: #1565c0;
-  text-decoration: underline;
-}
-
-.paper-id {
-  font-size: 0.875rem;
-  color: #666;
-}
-
-.arxiv-link {
-  color: #b31b1b;
-  text-decoration: none;
-  font-weight: 500;
-  transition: color 0.2s;
-}
-
-.arxiv-link:hover {
-  color: #8b0000;
-  text-decoration: underline;
-}
-
-.paper-authors,
-.paper-date,
-.paper-categories {
-  margin-bottom: 0.75rem;
-  font-size: 0.9rem;
-  color: #555;
-}
-
-.paper-authors strong,
-.paper-date strong,
-.paper-categories strong {
-  color: #333;
-  margin-right: 0.5rem;
-}
-
-.paper-categories {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.category-tag {
-  background: #e3f2fd;
-  color: #1976d2;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0;
-  font-size: 0.8rem;
-  font-weight: 500;
-}
-
-.paper-abstract {
-  margin-top: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid #e0e0e0;
-}
-
-.paper-abstract strong {
-  display: block;
-  margin-bottom: 0.5rem;
-  color: #333;
-  font-size: 0.95rem;
-}
-
-.paper-abstract p {
-  margin: 0;
-  line-height: 1.6;
-  color: #555;
-  text-align: justify;
-}
-

frontend/src/components/modals/ModelModal.tsx

@@ -1,428 +0,0 @@
-/**
- * Modal component for displaying detailed model information.
- * Enhanced with bookmark, comparison, similar models, and file tree features.
- */
-import React, { useState, useEffect } from 'react';
-import { ModelPoint } from '../../types';
-import FileTree from './FileTree';
-import { getHuggingFaceUrl } from '../../utils/api/hfUrl';
-import { API_BASE } from '../../config/api';
-import './ModelModal.css';
-
-interface ArxivPaper {
-  arxiv_id: string;
-  title: string;
-  abstract: string;
-  authors: string[];
-  published: string;
-  categories: string[];
-  url: string;
-}
-
-interface ModelModalProps {
-  model: ModelPoint | null;
-  isOpen: boolean;
-  onClose: () => void;
-  onBookmark?: (modelId: string) => void;
-  onAddToComparison?: (model: ModelPoint) => void;
-  onLoadSimilar?: (modelId: string) => void;
-  isBookmarked?: boolean;
-}
-
-export default function ModelModal({
-  model,
-  isOpen,
-  onClose,
-  onBookmark,
-  onAddToComparison,
-  onLoadSimilar,
-  isBookmarked = false,
-}: ModelModalProps) {
-  const [activeTab, setActiveTab] = useState<'details' | 'files' | 'papers'>('details');
-  const [papers, setPapers] = useState<ArxivPaper[]>([]);
-  const [papersLoading, setPapersLoading] = useState(false);
-  const [papersError, setPapersError] = useState<string | null>(null);
-
-  // Fetch arXiv papers when model changes
-  useEffect(() => {
-    if (!isOpen || !model) {
-      setPapers([]);
-      return;
-    }
-
-    const fetchPapers = async () => {
-      setPapersLoading(true);
-      setPapersError(null);
-      try {
-        const response = await fetch(`${API_BASE}/api/model/${encodeURIComponent(model.model_id)}/papers`);
-        if (!response.ok) throw new Error('Failed to fetch papers');
-        const data = await response.json();
-        setPapers(data.papers || []);
-      } catch (err) {
-        setPapersError(err instanceof Error ? err.message : 'Failed to load papers');
-        setPapers([]);
-      } finally {
-        setPapersLoading(false);
-      }
-    };
-
-    fetchPapers();
-  }, [model?.model_id, isOpen]);
-
-  if (!isOpen || !model) return null;
-
-  const hfUrl = getHuggingFaceUrl(model.model_id);
-
-  // Parse tags if it's a string representation of an array
-  const parseTags = (tags: string | null | undefined): string[] => {
-    if (!tags) return [];
-    try {
-      // Try to parse as JSON array
-      if (tags.startsWith('[') && tags.endsWith(']')) {
-        // Replace single quotes with double quotes for valid JSON
-        const jsonString = tags.replace(/'/g, '"');
-        return JSON.parse(jsonString);
-      }
-      // Otherwise split by comma
-      return tags.split(',').map(t => t.trim().replace(/['"]/g, ''));
-    } catch {
-      // If parsing fails, try to extract values from string representation
-      try {
-        // Handle cases like "['tag1', 'tag2']"
-        const cleaned = tags.replace(/^\[|\]$/g, '').replace(/'/g, '"');
-        const parsed = JSON.parse(`[${cleaned}]`);
-        return Array.isArray(parsed) ? parsed : [tags];
-      } catch {
-        return [tags];
-      }
-    }
-  };
-
-  const tags = parseTags(model.tags);
-  
-  // Parse licenses - handle both JSON arrays and string representations with single quotes
-  const parseLicenses = (licenses: string | null | undefined): string[] => {
-    if (!licenses) return [];
-    try {
-      // If it's already a valid JSON array string, parse it
-      if (licenses.startsWith('[') && licenses.endsWith(']')) {
-        // Replace single quotes with double quotes for valid JSON
-        const jsonString = licenses.replace(/'/g, '"');
-        return JSON.parse(jsonString);
-      }
-      // Otherwise, treat as a single license string
-      return [licenses];
-    } catch {
-      // If parsing fails, try to extract values from string representation
-      try {
-        // Handle cases like "['apache-2.0']" or "['license1', 'license2']"
-        const cleaned = licenses.replace(/^\[|\]$/g, '').replace(/'/g, '"');
-        const parsed = JSON.parse(`[${cleaned}]`);
-        return Array.isArray(parsed) ? parsed : [licenses];
-      } catch {
-        // Last resort: return as single-item array
-        return [licenses];
-      }
-    }
-  };
-  
-  const licenses = parseLicenses(model.licenses);
-
-  // Color coding functions
-  const getLibraryColor = (library: string | null | undefined): string => {
-    if (!library) return '#cccccc';
-    const colors: Record<string, string> = {
-      'transformers': '#1f77b4',
-      'diffusers': '#ff7f0e',
-      'sentence-transformers': '#2ca02c',
-      'timm': '#d62728',
-      'speechbrain': '#9467bd',
-    };
-    return colors[library.toLowerCase()] || '#6a6a6a';
-  };
-
-  const getPipelineColor = (pipeline: string | null | undefined): string => {
-    if (!pipeline || pipeline === 'Unknown') return '#cccccc';
-    const colors: Record<string, string> = {
-      'text-classification': '#1f77b4',
-      'token-classification': '#ff7f0e',
-      'question-answering': '#2ca02c',
-      'summarization': '#d62728',
-      'translation': '#9467bd',
-      'text-generation': '#8c564b',
-    };
-    return colors[pipeline.toLowerCase()] || '#6a6a6a';
-  };
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div 
-        className="modal-content" 
-        onClick={(e) => e.stopPropagation()}
-        data-tab={activeTab}
-      >
-        <div className="modal-header">
-          <h2>{model.model_id}</h2>
-          <button className="modal-close" onClick={onClose}>Close</button>
-        </div>
-
-        <div className="modal-body">
-          {/* Action Buttons */}
-          <div className="modal-actions">
-            {onBookmark && (
-              <button
-                onClick={() => onBookmark(model.model_id)}
-                className={`action-btn ${isBookmarked ? 'active' : ''}`}
-              >
-                {isBookmarked ? '✓ Bookmarked' : 'Bookmark'}
-              </button>
-            )}
-            {onAddToComparison && (
-              <button
-                onClick={() => onAddToComparison(model)}
-                className="action-btn"
-              >
-                Add to Comparison
-              </button>
-            )}
-            {onLoadSimilar && (
-              <button
-                onClick={() => onLoadSimilar(model.model_id)}
-                className="action-btn"
-              >
-                Find Similar Models
-              </button>
-            )}
-          </div>
-
-          {/* Tabs */}
-          <div className="modal-tabs">
-            <button
-              className={`modal-tab ${activeTab === 'details' ? 'active' : ''}`}
-              onClick={() => setActiveTab('details')}
-            >
-              <span className="tab-icon"></span>
-              <span>Details</span>
-            </button>
-            <button
-              className={`modal-tab ${activeTab === 'files' ? 'active' : ''}`}
-              onClick={() => setActiveTab('files')}
-            >
-              <span className="tab-icon"></span>
-              <span>Files</span>
-            </button>
-            {(papers.length > 0 || papersLoading) && (
-              <button
-                className={`modal-tab ${activeTab === 'papers' ? 'active' : ''}`}
-                onClick={() => setActiveTab('papers')}
-              >
-                <span className="tab-icon"></span>
-                <span>Papers</span>
-                {papers.length > 0 && <span className="tab-badge">{papers.length}</span>}
-              </button>
-            )}
-          </div>
-
-          {/* Tab Content */}
-          {activeTab === 'details' && (
-            <div className="modal-info-section">
-              <div className="info-grid">
-                <div className="info-item">
-                  <div className="info-label">Library</div>
-                  <div 
-                    className="info-value colored"
-                    style={{ 
-                      color: getLibraryColor(model.library_name),
-                      fontWeight: 600 
-                    }}
-                  >
-                    {model.library_name || 'Unknown'}
-                  </div>
-                </div>
-
-                <div className="info-item">
-                  <div className="info-label">Pipeline / Task</div>
-                  <div 
-                    className="info-value colored"
-                    style={{ 
-                      color: getPipelineColor(model.pipeline_tag),
-                      fontWeight: 600 
-                    }}
-                  >
-                    {model.pipeline_tag || 'Unknown'}
-                  </div>
-                </div>
-
-                <div className="info-item">
-                  <div className="info-label">Downloads</div>
-                  <div className="info-value highlight">
-                    {model.downloads.toLocaleString()}
-                  </div>
-                </div>
-
-                <div className="info-item">
-                  <div className="info-label">Likes</div>
-                  <div className="info-value highlight">
-                    {model.likes.toLocaleString()}
-                  </div>
-                </div>
-
-                {model.trending_score !== null && (
-                  <div className="info-item">
-                    <div className="info-label">Trending Score</div>
-                    <div className="info-value">
-                      {model.trending_score.toFixed(2)}
-                    </div>
-                  </div>
-                )}
-
-                <div className="info-item">
-                  <div className="info-label">Coordinates</div>
-                  <div className="info-value coordinates">
-                    <span>X: {model.x.toFixed(3)}</span>
-                    <span>Y: {model.y.toFixed(3)}</span>
-                    <span>Z: {model.z.toFixed(3)}</span>
-                  </div>
-                </div>
-              </div>
-
-              {model.parent_model && (
-                <div className="info-section">
-                  <div className="section-title">Parent Model</div>
-                  <div className="section-content">
-                    <a
-                      href={getHuggingFaceUrl(model.parent_model)}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="model-link"
-                    >
-                      {model.parent_model}
-                    </a>
-                  </div>
-                </div>
-              )}
-
-              {licenses.length > 0 && (
-                <div className="info-section">
-                  <div className="section-title">License{licenses.length > 1 ? 's' : ''}</div>
-                  <div className="section-content">
-                    <div className="tag-list">
-                      {licenses.map((license: string, idx: number) => (
-                        <span key={idx} className="tag license-tag">
-                          {license}
-                        </span>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              )}
-
-              {tags.length > 0 && (
-                <div className="info-section">
-                  <div className="section-title">Tags</div>
-                  <div className="section-content">
-                    <div className="tag-list">
-                      {tags.map((tag: string, idx: number) => (
-                        <span key={idx} className="tag">
-                          {tag}
-                        </span>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-
-          {activeTab === 'files' && (
-            <div className="modal-info-section">
-              <FileTree modelId={model.model_id} />
-            </div>
-          )}
-
-          {activeTab === 'papers' && (
-            <div className="modal-info-section">
-              {papersLoading ? (
-                <div className="papers-loading">Loading papers...</div>
-              ) : papersError ? (
-                <div className="papers-error">Error loading papers: {papersError}</div>
-              ) : papers.length === 0 ? (
-                <div className="papers-empty">No arXiv papers found for this model.</div>
-              ) : (
-                <div className="papers-list">
-                  {papers.map((paper, idx) => (
-                    <div key={paper.arxiv_id || idx} className="paper-card">
-                      <div className="paper-header">
-                        <h3 className="paper-title">
-                          <a
-                            href={paper.url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="paper-link"
-                          >
-                            {paper.title}
-                          </a>
-                        </h3>
-                        <div className="paper-id">
-                          <a
-                            href={paper.url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="arxiv-link"
-                          >
-                            arXiv:{paper.arxiv_id}
-                          </a>
-                        </div>
-                      </div>
-                      
-                      {paper.authors && paper.authors.length > 0 && (
-                        <div className="paper-authors">
-                          <strong>Authors:</strong> {paper.authors.join(', ')}
-                        </div>
-                      )}
-                      
-                      {paper.published && (
-                        <div className="paper-date">
-                          <strong>Published:</strong> {new Date(paper.published).toLocaleDateString()}
-                        </div>
-                      )}
-                      
-                      {paper.categories && paper.categories.length > 0 && (
-                        <div className="paper-categories">
-                          <strong>Categories:</strong>{' '}
-                          {paper.categories.map((cat, i) => (
-                            <span key={i} className="category-tag">
-                              {cat}
-                            </span>
-                          ))}
-                        </div>
-                      )}
-                      
-                      {paper.abstract && (
-                        <div className="paper-abstract">
-                          <strong>Abstract:</strong>
-                          <p>{paper.abstract}</p>
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
-          <div className="modal-footer">
-            <a
-              href={hfUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="modal-link"
-            >
-              View on Hugging Face →
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/src/components/ui/ColorLegend.css

@@ -1,14 +1,28 @@
 .color-legend {
   position: absolute;
-  background: rgba(255, 255, 255, 0.95);
-  border: 1px solid #e0e0e0;
-  border-radius: 0;
-  padding: 0.75rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  background: var(--bg-elevated, #ffffff);
+  border: 1px solid var(--border-medium, #d0d0d0);
+  padding: 1rem;
+  box-shadow: var(--shadow-lg, 0 2px 8px rgba(0, 0, 0, 0.12));
   z-index: 100;
   font-size: 0.875rem;
-  max-height: 400px;
+  max-height: 450px;
   overflow-y: auto;
+  backdrop-filter: blur(12px);
+  color: var(--text-primary, #1a1a1a);
+  transition: box-shadow var(--transition-base, 0.2s ease), border-color var(--transition-base, 0.2s ease);
+}
+
+[data-theme="dark"] .color-legend {
+  background: rgba(20, 20, 20, 0.96);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
+  color: #ffffff;
+}
+
+.color-legend:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
+  border-color: rgba(255, 255, 255, 0.3);
 }
 
 .legend-top-right {
@@ -32,11 +46,18 @@
 }
 
 .legend-header {
-  margin-bottom: 0.5rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid #e0e0e0;
-  font-size: 0.9rem;
-  color: #333;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border-light, #e8e8e8);
+  font-size: 0.95rem;
+  color: var(--text-primary, #1a1a1a);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+[data-theme="dark"] .legend-header {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+  color: #ffffff;
 }
 
 .legend-content {
@@ -51,6 +72,23 @@
   gap: 0.25rem;
   max-height: 300px;
   overflow-y: auto;
+  padding-right: 0.25rem;
+}
+
+.legend-categorical::-webkit-scrollbar {
+  width: 6px;
+}
+
+.legend-categorical::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.legend-categorical::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.legend-categorical::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
 }
 
 .legend-item {
@@ -58,24 +96,44 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.25rem 0;
+  transition: opacity 0.2s;
+}
+
+.legend-item:hover {
+  opacity: 0.8;
+}
+
+.legend-item-more {
+  opacity: 0.7;
+  font-size: 0.75rem;
+  margin-top: 0.5rem;
 }
 
 .legend-color {
-  width: 16px;
-  height: 16px;
-  border-radius: 0;
-  border: 1px solid #ccc;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--border-medium, #d0d0d0);
   flex-shrink: 0;
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+}
+
+[data-theme="dark"] .legend-color {
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .legend-label {
-  color: #555;
+  color: var(--text-secondary, #666666);
   font-size: 0.8rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+[data-theme="dark"] .legend-label {
+  color: #e0e0e0;
+}
+
 .legend-continuous {
   display: flex;
   flex-direction: column;
@@ -84,10 +142,15 @@
 
 .legend-gradient {
   display: flex;
-  height: 20px;
-  border-radius: 0;
+  height: 24px;
   overflow: hidden;
-  border: 1px solid #ccc;
+  border: 1px solid var(--border-medium, #d0d0d0);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+}
+
+[data-theme="dark"] .legend-gradient {
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .legend-gradient-segment {
@@ -99,7 +162,12 @@
   display: flex;
   justify-content: space-between;
   font-size: 0.75rem;
-  color: #666;
+  color: var(--text-secondary, #666666);
+  margin-top: 0.25rem;
+}
+
+[data-theme="dark"] .legend-labels {
+  color: #e0e0e0;
 }
 
 @media (max-width: 768px) {

frontend/src/components/ui/ColorLegend.tsx

@@ -2,8 +2,8 @@
  * Interactive color legend component for visualizations.
  * Shows color mappings for categorical and continuous data.
  */
-import React from 'react';
-import { getCategoricalColorMap, getContinuousColorScale } from '../../utils/rendering/colors';
+import React, { useMemo } from 'react';
+import { getCategoricalColorMap, getContinuousColorScale, getDepthColorScale } from '../../utils/rendering/colors';
 import './ColorLegend.css';
 
 interface ColorLegendProps {
@@ -11,75 +11,160 @@ interface ColorLegendProps {
   data: any[];
   width?: number;
   position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+  isDarkMode?: boolean;
 }
 
-export default function ColorLegend({ colorBy, data, width = 200, position = 'top-right' }: ColorLegendProps) {
-  if (!data || data.length === 0) return null;
+function ColorLegend({ colorBy, data, width = 200, position = 'top-right', isDarkMode }: ColorLegendProps) {
+  // Memoize legend calculation to prevent recalculation on every render
+  const { legendItems, isContinuous, isCategorical, positionClass } = useMemo(() => {
+    if (!data || data.length === 0) {
+      return { legendItems: [], isContinuous: false, isCategorical: false, positionClass: `legend-${position}` };
+    }
 
-  const isCategorical = colorBy === 'library_name' || colorBy === 'pipeline_tag' || colorBy === 'cluster_id';
-  
-  // Get unique categories or value range
-  let legendItems: Array<{ label: string; color: string }> = [];
-  
-  if (isCategorical) {
-    const categories = Array.from(new Set(data.map((d: any) => {
-      if (colorBy === 'library_name') return d.library_name || 'unknown';
-      if (colorBy === 'pipeline_tag') return d.pipeline_tag || 'unknown';
-      if (colorBy === 'cluster_id') return d.cluster_id !== null ? `Cluster ${d.cluster_id}` : 'No cluster';
-      return 'unknown';
-    }))).sort();
-    
-    const colorScheme = colorBy === 'library_name' ? 'library' : colorBy === 'pipeline_tag' ? 'pipeline' : 'default';
-    const colorMap = getCategoricalColorMap(categories, colorScheme);
+    let isCat = colorBy === 'library_name' || colorBy === 'pipeline_tag' || colorBy === 'cluster_id';
+    let items: Array<{ label: string; color: string }> = [];
+    let isCont = false;
     
-    legendItems = categories.map(cat => ({
-      label: cat,
-      color: colorMap.get(cat) || '#808080'
-    }));
-  } else if (colorBy === 'family_depth') {
-    const depths = data.map((d: any) => d.family_depth ?? 0);
-    const maxDepth = Math.max(...depths, 1);
-    const scale = getContinuousColorScale(0, maxDepth, 'plasma');
-    
-    // Create gradient legend
-    const steps = 10;
-    for (let i = 0; i <= steps; i++) {
-      const depth = (i / steps) * maxDepth;
-      legendItems.push({
-        label: `Depth ${Math.round(depth)}`,
-        color: scale(depth)
+    if (isCat) {
+      const categories = Array.from(new Set(data.map((d: any) => {
+        if (colorBy === 'library_name') return d.library_name || 'unknown';
+        if (colorBy === 'pipeline_tag') return d.pipeline_tag || 'unknown';
+        if (colorBy === 'cluster_id') return d.cluster_id !== null ? `Cluster ${d.cluster_id}` : 'No cluster';
+        return 'unknown';
+      }))).sort();
+      
+      const colorSchemeType = colorBy === 'library_name' ? 'library' : colorBy === 'pipeline_tag' ? 'pipeline' : 'default';
+      const colorMap = getCategoricalColorMap(categories, colorSchemeType);
+      
+      // Limit to top 20 categories for readability
+      const topCategories = categories.slice(0, 20);
+      items = topCategories.map(cat => ({
+        label: cat.length > 25 ? cat.substring(0, 22) + '...' : cat,
+        color: colorMap.get(cat) || '#60a5fa'
+      }));
+    } else if (colorBy === 'family_depth') {
+      isCont = true;
+      const depths = data.map((d: any) => d.family_depth ?? 0);
+      const maxDepth = Math.max(...depths, 1);
+      const minDepth = Math.min(...depths);
+      const uniqueDepths = new Set(depths);
+      
+      // Use dark mode state if provided, otherwise detect from document
+      const darkMode = isDarkMode !== undefined 
+        ? isDarkMode 
+        : document.documentElement.getAttribute('data-theme') === 'dark';
+      
+      // If all depths are the same or very few unique depths, show a simpler legend
+      if (uniqueDepths.size <= 2 && maxDepth === 0) {
+        // All models are root - show library-based legend instead
+        const categories = Array.from(new Set(data.map((d: any) => d.library_name || 'unknown')));
+        const colorMap = getCategoricalColorMap(categories, 'library');
+        const topCategories = categories.slice(0, 10);
+        items = topCategories.map(cat => ({
+          label: cat.length > 20 ? cat.substring(0, 17) + '...' : cat,
+          color: colorMap.get(cat) || '#4a90e2'
+        }));
+        isCont = false;
+        isCat = true;
+      } else {
+        const scale = getDepthColorScale(maxDepth, darkMode);
+        
+        // Create gradient legend showing depth progression
+        const steps = 8;
+        for (let i = 0; i <= steps; i++) {
+          const depth = (i / steps) * maxDepth;
+          let label = '';
+          if (i === 0) {
+            label = `${minDepth} (Root)`;
+          } else if (i === steps) {
+            label = `${Math.round(maxDepth)} (Deep)`;
+          } else if (i === Math.floor(steps / 2)) {
+            label = `${Math.round(depth)}`;
+          }
+          items.push({
+            label,
+            color: scale(depth)
+          });
+        }
+      }
+    } else if (colorBy === 'downloads' || colorBy === 'likes') {
+      isCont = true;
+      const values = data.map((d: any) => {
+        if (colorBy === 'downloads') return d.downloads;
+        return d.likes;
       });
+      const min = Math.min(...values);
+      const max = Math.max(...values);
+      const scale = getContinuousColorScale(min, max, 'viridis', true); // Use log scale
+      
+      // Create gradient legend
+      const steps = 8;
+      for (let i = 0; i <= steps; i++) {
+        const logMin = Math.log10(min + 1);
+        const logMax = Math.log10(max + 1);
+        const logValue = logMin + (i / steps) * (logMax - logMin);
+        const value = Math.pow(10, logValue) - 1;
+        
+        let label = '';
+        if (i === 0) {
+          label = min >= 1000 ? `${(min / 1000).toFixed(1)}K` : Math.round(min).toString();
+        } else if (i === steps) {
+          label = max >= 1000000 ? `${(max / 1000000).toFixed(1)}M` : max >= 1000 ? `${(max / 1000).toFixed(1)}K` : Math.round(max).toString();
+        }
+        
+        items.push({
+          label,
+          color: scale(value)
+        });
+      }
+    } else if (colorBy === 'trending_score') {
+      isCont = true;
+      const scores = data.map((d: any) => d.trending_score ?? 0);
+      const min = Math.min(...scores);
+      const max = Math.max(...scores);
+      const scale = getContinuousColorScale(min, max, 'plasma', false);
+      
+      const steps = 8;
+      for (let i = 0; i <= steps; i++) {
+        const value = min + (i / steps) * (max - min);
+        items.push({
+          label: i === 0 ? min.toFixed(1) : i === steps ? max.toFixed(1) : '',
+          color: scale(value)
+        });
+      }
     }
-  } else {
-    // Continuous scale (downloads, likes)
-    const values = data.map((d: any) => {
-      if (colorBy === 'downloads') return d.downloads;
-      return d.likes;
-    });
-    const min = Math.min(...values);
-    const max = Math.max(...values);
-    const scale = getContinuousColorScale(min, max, 'viridis');
     
-    // Create gradient legend
-    const steps = 10;
-    for (let i = 0; i <= steps; i++) {
-      const value = min + (i / steps) * (max - min);
-      legendItems.push({
-        label: value >= 1000 ? `${(value / 1000).toFixed(1)}K` : Math.round(value).toString(),
-        color: scale(value)
-      });
-    }
-  }
+    return { 
+      legendItems: items, 
+      isContinuous: isCont, 
+      isCategorical: isCat,
+      positionClass: `legend-${position}`
+    };
+  }, [data, colorBy, position, isDarkMode]); // Only recalculate when data, colorBy, position, or isDarkMode changes
+
+  const getTitle = useMemo(() => {
+    const titles: Record<string, string> = {
+      'library_name': 'Library',
+      'pipeline_tag': 'Pipeline / Task',
+      'cluster_id': 'Cluster',
+      'family_depth': 'Family Depth',
+      'downloads': 'Downloads',
+      'likes': 'Likes',
+      'trending_score': 'Trending Score',
+      'licenses': 'License'
+    };
+    return titles[colorBy] || colorBy.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
+  }, [colorBy]);
 
-  const positionClass = `legend-${position}`;
+  if (!data || data.length === 0 || legendItems.length === 0) return null;
 
   return (
     <div className={`color-legend ${positionClass}`} style={{ width }}>
       <div className="legend-header">
-        <strong>{colorBy.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())}</strong>
+        <strong>{getTitle}</strong>
       </div>
       <div className="legend-content">
-        {isCategorical || colorBy === 'family_depth' ? (
+        {isCategorical ? (
           <div className="legend-categorical">
             {legendItems.map((item, idx) => (
               <div key={idx} className="legend-item">
@@ -87,9 +172,14 @@ export default function ColorLegend({ colorBy, data, width = 200, position = 'to
                   className="legend-color" 
                   style={{ backgroundColor: item.color }}
                 />
-                <span className="legend-label">{item.label}</span>
+                <span className="legend-label" title={item.label}>{item.label}</span>
               </div>
             ))}
+            {legendItems.length >= 20 && (
+              <div className="legend-item legend-item-more">
+                <span className="legend-label">... and more</span>
+              </div>
+            )}
           </div>
         ) : (
           <div className="legend-continuous">
@@ -103,8 +193,8 @@ export default function ColorLegend({ colorBy, data, width = 200, position = 'to
               ))}
             </div>
             <div className="legend-labels">
-              <span>{legendItems[0].label}</span>
-              <span>{legendItems[legendItems.length - 1].label}</span>
+              <span>{legendItems[0].label || 'Min'}</span>
+              <span>{legendItems[legendItems.length - 1].label || 'Max'}</span>
             </div>
           </div>
         )}
@@ -113,3 +203,11 @@ export default function ColorLegend({ colorBy, data, width = 200, position = 'to
   );
 }
 
+// Memoize the component to prevent unnecessary re-renders
+export default React.memo(ColorLegend, (prevProps, nextProps) => {
+  // Only re-render if colorBy changes or data length changes significantly
+  return prevProps.colorBy === nextProps.colorBy && 
+         prevProps.position === nextProps.position &&
+         prevProps.width === nextProps.width &&
+         Math.abs(prevProps.data.length - nextProps.data.length) < 100; // Allow small fluctuations
+});

frontend/src/components/ui/ErrorBoundary.css

@@ -0,0 +1,62 @@
+/* ============================================
+   ERROR BOUNDARY
+   ============================================ */
+
+.error-boundary-container {
+  padding: 2rem;
+  margin: 2rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-medium);
+  color: var(--text-primary);
+}
+
+.error-boundary-title {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  color: #ef4444;
+}
+
+.error-boundary-message {
+  margin-bottom: 1rem;
+  color: var(--text-secondary);
+}
+
+.error-boundary-details {
+  margin-top: 1rem;
+}
+
+.error-boundary-summary {
+  cursor: pointer;
+  font-weight: bold;
+  color: var(--text-primary);
+}
+
+.error-boundary-stack {
+  margin-top: 0.5rem;
+  padding: 1rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-light);
+  overflow-x: auto;
+  font-size: 0.875rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+}
+
+.error-boundary-reset-btn {
+  margin-top: 1rem;
+  padding: 0.5rem 1rem;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-medium);
+  color: var(--text-primary);
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all var(--transition-base);
+}
+
+.error-boundary-reset-btn:hover {
+  background: var(--bg-secondary);
+  border-color: var(--accent-blue);
+}
+

frontend/src/components/ui/ErrorBoundary.tsx

@@ -2,6 +2,7 @@
  * Error Boundary component to catch and display React errors gracefully
  */
 import React, { Component, ErrorInfo, ReactNode } from 'react';
+import './ErrorBoundary.css';
 
 interface Props {
   children: ReactNode;
@@ -33,11 +34,6 @@ class ErrorBoundary extends Component<Props, State> {
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // Log error to console in development
-    if (process.env.NODE_ENV === 'development') {
-      console.error('ErrorBoundary caught an error:', error, errorInfo);
-    }
-    
     this.setState({
       error,
       errorInfo,
@@ -59,52 +55,23 @@ class ErrorBoundary extends Component<Props, State> {
       }
 
       return (
-        <div
-          style={{
-            padding: '2rem',
-            margin: '2rem',
-            background: '#ffebee',
-            border: '1px solid #ffcdd2',
-            borderRadius: '0',
-            color: '#c62828',
-          }}
-        >
-          <h2 style={{ marginTop: 0 }}>Something went wrong</h2>
-          <p>
+        <div className="error-boundary-container">
+          <h2 className="error-boundary-title">Something went wrong</h2>
+          <p className="error-boundary-message">
             An error occurred while rendering this component. Please try refreshing the page.
           </p>
           {process.env.NODE_ENV === 'development' && this.state.error && (
-            <details style={{ marginTop: '1rem' }}>
-              <summary style={{ cursor: 'pointer', fontWeight: 'bold' }}>
+            <details className="error-boundary-details">
+              <summary className="error-boundary-summary">
                 Error Details (Development Only)
               </summary>
-              <pre
-                style={{
-                  marginTop: '0.5rem',
-                  padding: '1rem',
-                  background: '#fff',
-                  borderRadius: '0',
-                  overflow: 'auto',
-                  fontSize: '0.875rem',
-                }}
-              >
+              <pre className="error-boundary-stack">
                 {this.state.error.toString()}
                 {this.state.errorInfo?.componentStack}
               </pre>
             </details>
           )}
-          <button
-            onClick={this.handleReset}
-            style={{
-              marginTop: '1rem',
-              padding: '0.5rem 1rem',
-              background: '#4a4a4a',
-              color: 'white',
-              border: 'none',
-              borderRadius: '0',
-              cursor: 'pointer',
-            }}
-          >
+          <button className="error-boundary-reset-btn" onClick={this.handleReset}>
             Try Again
           </button>
         </div>
@@ -116,4 +83,3 @@ class ErrorBoundary extends Component<Props, State> {
 }
 
 export default ErrorBoundary;
-

frontend/src/components/ui/IntroModal.css

@@ -0,0 +1,268 @@
+/* ============================================
+   INTRO MODAL - TOP LEFT ONBOARDING
+   ============================================ */
+
+.intro-modal {
+  position: absolute;
+  top: 60px;
+  left: 20px;
+  width: 280px;
+  background: var(--bg-elevated, rgba(22, 27, 34, 0.98));
+  border: 1px solid var(--border-medium);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  z-index: 1000;
+  font-family: var(--font-primary);
+  animation: introSlideIn 0.2s ease-out;
+}
+
+@keyframes introSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.intro-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-secondary);
+}
+
+.intro-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.intro-close {
+  background: transparent;
+  border: none;
+  color: var(--text-tertiary);
+  padding: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+}
+
+.intro-close:hover {
+  color: var(--text-primary);
+}
+
+.intro-content {
+  padding: 12px;
+}
+
+.intro-desc {
+  margin: 0 0 12px 0;
+  font-size: 0.75rem;
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+
+.intro-desc strong {
+  color: var(--accent-blue);
+  font-weight: 600;
+}
+
+.intro-desc-sub {
+  display: block;
+  margin-top: 4px;
+  font-size: 0.68rem;
+  color: var(--text-tertiary);
+  font-style: italic;
+}
+
+.intro-section {
+  margin-bottom: 10px;
+}
+
+.intro-section:last-child {
+  margin-bottom: 0;
+}
+
+.intro-section-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  margin-bottom: 6px;
+}
+
+.intro-section-title svg {
+  color: var(--accent-blue);
+}
+
+.intro-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.intro-list li {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.7rem;
+  color: var(--text-secondary);
+  padding: 2px 0;
+}
+
+.intro-list li strong {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.intro-list.compact li {
+  padding: 1px 0;
+}
+
+.intro-list.inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.intro-list.inline li {
+  padding: 0;
+  gap: 4px;
+}
+
+.intro-detail {
+  color: var(--text-tertiary);
+  font-size: 0.65rem;
+  margin-left: auto;
+}
+
+.intro-list li code {
+  background: var(--bg-tertiary);
+  padding: 1px 4px;
+  font-size: 0.65rem;
+  font-family: var(--font-mono);
+  color: var(--text-primary);
+}
+
+.intro-list li kbd {
+  display: inline-block;
+  padding: 1px 5px;
+  font-size: 0.6rem;
+  font-family: var(--font-mono);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-light);
+  color: var(--text-primary);
+}
+
+.intro-inline-icon {
+  color: #f59e0b;
+  vertical-align: middle;
+}
+
+.intro-color {
+  width: 10px;
+  height: 10px;
+  flex-shrink: 0;
+}
+
+.intro-color.family {
+  background: linear-gradient(135deg, #22d3ee 0%, #facc15 50%, #f472b6 100%);
+}
+
+.intro-color.library {
+  background: linear-gradient(135deg, #60a5fa 0%, #4ade80 50%, #fb923c 100%);
+}
+
+.intro-color.task {
+  background: linear-gradient(135deg, #4ade80 0%, #22d3ee 50%, #c084fc 100%);
+}
+
+.intro-text {
+  margin: 0;
+  font-size: 0.7rem;
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+
+.intro-text kbd {
+  display: inline-block;
+  padding: 1px 5px;
+  font-size: 0.65rem;
+  font-family: var(--font-mono);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-light);
+  color: var(--text-primary);
+}
+
+.intro-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px;
+  border-top: 1px solid var(--border-light);
+  background: var(--bg-secondary);
+}
+
+.intro-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.65rem;
+  color: var(--text-tertiary);
+  cursor: pointer;
+}
+
+.intro-checkbox input {
+  width: 12px;
+  height: 12px;
+  margin: 0;
+  cursor: pointer;
+}
+
+.intro-dismiss {
+  padding: 5px 12px;
+  background: var(--accent-blue);
+  border: none;
+  color: #ffffff;
+  font-size: 0.7rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.intro-dismiss:hover {
+  background: #3b82f6;
+}
+
+/* Light theme */
+[data-theme="light"] .intro-modal {
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+}
+
+/* Responsive - hide on small screens */
+@media (max-width: 768px) {
+  .intro-modal {
+    display: none;
+  }
+}
+
+/* Smaller screens - adjust position */
+@media (max-width: 1200px) {
+  .intro-modal {
+    width: 260px;
+  }
+}
+

frontend/src/components/ui/IntroModal.tsx

@@ -0,0 +1,121 @@
+/**
+ * Intro Modal - Brief onboarding guide for the dashboard
+ */
+import React, { useState, useEffect } from 'react';
+import { X, Palette, Maximize2, Search, Move3D, Sparkles } from 'lucide-react';
+import './IntroModal.css';
+
+interface IntroModalProps {
+  onClose: () => void;
+}
+
+export default function IntroModal({ onClose }: IntroModalProps) {
+  const [dontShowAgain, setDontShowAgain] = useState(false);
+
+  const handleClose = () => {
+    if (dontShowAgain) {
+      localStorage.setItem('hf-intro-dismissed', 'true');
+    }
+    onClose();
+  };
+
+  // Close on Escape
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        handleClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [dontShowAgain]);
+
+  return (
+    <div className="intro-modal">
+      <div className="intro-header">
+        <span className="intro-title">Quick Guide</span>
+        <button className="intro-close" onClick={handleClose} title="Close">
+          <X size={14} />
+        </button>
+      </div>
+
+      <div className="intro-content">
+        <p className="intro-desc">
+          Visualizing <strong>2M+ ML models</strong> from Hugging Face by text embeddings.
+          <br />
+          <span className="intro-desc-sub">Each point represents a model positioned by semantic similarity.</span>
+        </p>
+
+        <div className="intro-section">
+          <div className="intro-section-title">
+            <Palette size={12} />
+            Colors
+          </div>
+          <ul className="intro-list">
+            <li title="Colors based on how many generations a model is from its root parent">
+              <span className="intro-color family"></span>
+              <strong>Family</strong>
+              <span className="intro-detail">Lineage depth</span>
+            </li>
+            <li title="Colors based on which ML framework/library the model uses">
+              <span className="intro-color library"></span>
+              <strong>Library</strong>
+              <span className="intro-detail">ML framework</span>
+            </li>
+            <li title="Colors based on what the model does">
+              <span className="intro-color task"></span>
+              <strong>Task</strong>
+              <span className="intro-detail">Model type</span>
+            </li>
+          </ul>
+        </div>
+
+        <div className="intro-section">
+          <div className="intro-section-title">
+            <Maximize2 size={12} />
+            Size
+          </div>
+          <p className="intro-text">Larger points = more downloads/likes</p>
+        </div>
+
+        <div className="intro-section">
+          <div className="intro-section-title">
+            <Move3D size={12} />
+            Controls
+          </div>
+          <ul className="intro-list compact inline">
+            <li><strong>Drag</strong> rotate</li>
+            <li><strong>Scroll</strong> zoom</li>
+            <li><strong>Click</strong> select</li>
+          </ul>
+        </div>
+
+        <div className="intro-section">
+          <div className="intro-section-title">
+            <Search size={12} />
+            Search
+          </div>
+          <ul className="intro-list compact">
+            <li><kbd>⌘K</kbd> open search</li>
+            <li><Sparkles size={10} className="intro-inline-icon" /> Fuzzy: <code>lama</code> finds llama</li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="intro-footer">
+        <label className="intro-checkbox">
+          <input 
+            type="checkbox" 
+            checked={dontShowAgain}
+            onChange={(e) => setDontShowAgain(e.target.checked)}
+          />
+          <span>Don't show again</span>
+        </label>
+        <button className="intro-dismiss" onClick={handleClose}>
+          Got it
+        </button>
+      </div>
+    </div>
+  );
+}
+

frontend/src/components/ui/LiveModelCount.css

@@ -68,10 +68,44 @@
   opacity: 0.9;
 }
 
+.count-loading-full {
+  text-align: center;
+  padding: 1rem;
+  color: var(--text-tertiary);
+}
+
 .count-error {
   color: #ffcccc;
 }
 
+.count-error-full {
+  padding: 1rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
+  color: var(--text-secondary);
+  text-align: center;
+}
+
+.count-error-message {
+  margin-bottom: 0.5rem;
+  color: #ef4444;
+}
+
+.count-retry-btn {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-medium);
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  transition: all var(--transition-base);
+}
+
+.count-retry-btn:hover {
+  background: var(--bg-secondary);
+  border-color: var(--accent-blue);
+}
+
 /* Full version (for sidebar) - matches sidebar-section style */
 .live-model-count-full {
   background: white;

frontend/src/components/ui/LiveModelCount.tsx

@@ -91,25 +91,15 @@ export default function LiveModelCount({ compact = true }: { compact?: boolean }
         ) : error && !currentCount ? (
           <div className="count-error" title={error}>Error</div>
         ) : currentCount ? (
-          <>
-            <div className="count-badge">
-              <span className="count-label">Live Models:</span>
-              <span className="count-value">{formatNumber(currentCount.total_models)}</span>
-              {lastUpdate && (
-                <span className="count-update" title={new Date(currentCount.timestamp).toLocaleString()}>
-                  {getTimeAgo(lastUpdate)}
-                </span>
-              )}
-            </div>
-            <button 
-              className="count-refresh-btn"
-              onClick={fetchCurrentCount}
-              disabled={loading}
-              title="Refresh count"
-            >
-              ⟳
-            </button>
-          </>
+          <div className="count-badge">
+            <span className="count-label">Live Models:</span>
+            <span className="count-value">{formatNumber(currentCount.total_models)}</span>
+            {lastUpdate && (
+              <span className="count-update" title={new Date(currentCount.timestamp).toLocaleString()}>
+                {getTimeAgo(lastUpdate)}
+              </span>
+            )}
+          </div>
         ) : null}
       </div>
     );
@@ -120,39 +110,13 @@ export default function LiveModelCount({ compact = true }: { compact?: boolean }
     <div className="live-model-count-full">
       <div className="count-header">
         <h4>Live Model Count</h4>
-        <button 
-          className="refresh-btn-small"
-          onClick={fetchCurrentCount}
-          disabled={loading}
-          title="Refresh"
-        >
-          ⟳
-        </button>
       </div>
       {loading && !currentCount ? (
-        <div className="count-loading" style={{ textAlign: 'center', padding: '1rem', color: '#666' }}>Loading...</div>
+        <div className="count-loading-full">Loading...</div>
       ) : error && !currentCount ? (
-        <div className="count-error" style={{ 
-          padding: '1rem', 
-          background: '#ffebee', 
-          border: '1px solid #ffcdd2', 
-          borderRadius: '0',
-          color: '#c62828',
-          textAlign: 'center'
-        }}>
-          <div style={{ marginBottom: '0.5rem' }}>Error: {error}</div>
-          <button 
-            onClick={fetchCurrentCount}
-            style={{
-              background: '#f5f5f5',
-              border: '1px solid #ddd',
-              borderRadius: '0',
-              padding: '0.5rem 1rem',
-              cursor: 'pointer',
-              fontSize: '0.875rem',
-              color: '#333'
-            }}
-          >
+        <div className="count-error-full">
+          <div className="count-error-message">Error: {error}</div>
+          <button className="count-retry-btn" onClick={fetchCurrentCount}>
             Retry
           </button>
         </div>

frontend/src/components/ui/LiveModelCounter.css

@@ -0,0 +1,165 @@
+/* ============================================
+   LIVE MODEL COUNTER - TOP LEFT DISPLAY
+   ============================================ */
+
+.live-model-counter {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: var(--bg-elevated, rgba(26, 26, 26, 0.95));
+  border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.15));
+  padding: 12px 16px;
+  min-width: 200px;
+  z-index: 500;
+  font-family: var(--font-primary);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  transition: all var(--transition-base);
+}
+
+.live-model-counter:hover {
+  border-color: var(--accent-blue);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+}
+
+/* Pulse animation when new models detected */
+.live-model-counter.pulse {
+  animation: counterPulse 0.6s ease-out;
+}
+
+@keyframes counterPulse {
+  0% {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+    border-color: var(--border-medium);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(74, 144, 226, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
+    border-color: var(--accent-blue);
+  }
+  100% {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+    border-color: var(--border-medium);
+  }
+}
+
+/* Main row with icon, value, and refresh */
+.counter-main {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.counter-content {
+  flex: 1;
+}
+
+.counter-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-primary, #ffffff);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+.counter-label {
+  font-size: 0.7rem;
+  color: var(--text-tertiary, rgba(255, 255, 255, 0.6));
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-top: 2px;
+}
+
+/* Growth stats */
+.counter-growth {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border-light);
+  font-size: 0.75rem;
+  color: #10b981;
+}
+
+.counter-growth svg {
+  flex-shrink: 0;
+}
+
+/* New models indicator */
+.counter-new-models {
+  margin-top: 6px;
+  font-size: 0.7rem;
+  color: var(--accent-blue);
+  font-weight: 500;
+}
+
+/* Timestamp */
+.counter-timestamp {
+  margin-top: 6px;
+  font-size: 0.65rem;
+  color: var(--text-tertiary);
+  font-style: italic;
+}
+
+/* Loading state */
+.counter-loading {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+.counter-loading .spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Error state */
+.live-model-counter.counter-error {
+  border-color: #ef4444;
+  color: #ef4444;
+}
+
+/* Light theme adjustments */
+[data-theme="light"] .live-model-counter {
+  background: rgba(255, 255, 255, 0.95);
+  border-color: var(--border-medium);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="light"] .counter-value {
+  color: var(--text-primary);
+}
+
+[data-theme="light"] .counter-label {
+  color: var(--text-secondary);
+}
+
+/* Responsive - hide on very small screens */
+@media (max-width: 480px) {
+  .live-model-counter {
+    top: 10px;
+    left: 10px;
+    padding: 8px 12px;
+    min-width: 160px;
+  }
+
+  .counter-value {
+    font-size: 1.2rem;
+  }
+
+  .counter-growth,
+  .counter-new-models,
+  .counter-timestamp {
+    display: none;
+  }
+}
+
+/* Responsive - smaller on mobile */
+@media (max-width: 768px) {
+  .live-model-counter {
+    left: 10px;
+    top: 10px;
+  }
+}
+

frontend/src/components/ui/LiveModelCounter.tsx

@@ -0,0 +1,226 @@
+/**
+ * Live model counter component for bottom-left display.
+ * Shows real-time model count from Hugging Face Hub with pulse animation.
+ * Supports continual updates via polling.
+ */
+import React, { useState, useEffect, useCallback } from 'react';
+import { TrendingUp, RefreshCw } from 'lucide-react';
+import { API_BASE } from '../../config/api';
+import './LiveModelCounter.css';
+
+interface ModelCountData {
+  total_models: number;
+  timestamp: string;
+  source?: string;
+  models_by_library?: Record<string, number>;
+  models_by_pipeline?: Record<string, number>;
+}
+
+interface GrowthStats {
+  daily_growth_avg?: number;
+  growth_rate_percent?: number;
+  total_growth?: number;
+  period_days?: number;
+}
+
+interface LiveModelCounterProps {
+  pollInterval?: number; // in milliseconds, default 60 seconds
+  showGrowth?: boolean;
+  onNewModelsDetected?: (count: number, previousCount: number) => void;
+}
+
+export default function LiveModelCounter({
+  pollInterval = 60000,
+  showGrowth = true,
+  onNewModelsDetected,
+}: LiveModelCounterProps) {
+  const [currentCount, setCurrentCount] = useState<ModelCountData | null>(null);
+  const [previousCount, setPreviousCount] = useState<number | null>(null);
+  const [growthStats, setGrowthStats] = useState<GrowthStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [newModelsAdded, setNewModelsAdded] = useState<number>(0);
+  const [showPulse, setShowPulse] = useState(false);
+
+  const fetchCurrentCount = useCallback(async (isManual = false) => {
+    if (isManual) setIsRefreshing(true);
+    
+    try {
+      // Try primary endpoint first
+      let data: ModelCountData | null = null;
+      
+      try {
+        const response = await fetch(
+          `${API_BASE}/api/model-count/current?use_models_page=true&use_cache=${!isManual}`
+        );
+        if (response.ok) {
+          data = await response.json();
+        }
+      } catch {
+        // Primary endpoint failed, will try fallback
+      }
+      
+      // Fallback to stats endpoint
+      if (!data || !data.total_models) {
+        const statsResponse = await fetch(`${API_BASE}/api/stats`);
+        if (statsResponse.ok) {
+          const statsData = await statsResponse.json();
+          if (statsData.total_models) {
+            data = {
+              total_models: statsData.total_models,
+              timestamp: new Date().toISOString(),
+              source: 'stats'
+            };
+          }
+        }
+      }
+      
+      if (!data || !data.total_models) {
+        throw new Error('No model count available');
+      }
+      
+      // Check if new models were added
+      if (currentCount && data.total_models > currentCount.total_models) {
+        const newCount = data.total_models - currentCount.total_models;
+        setNewModelsAdded(prev => prev + newCount);
+        setShowPulse(true);
+        setTimeout(() => setShowPulse(false), 2000);
+        
+        if (onNewModelsDetected) {
+          onNewModelsDetected(data.total_models, currentCount.total_models);
+        }
+      }
+      
+      setPreviousCount(currentCount?.total_models || null);
+      setCurrentCount(data);
+      setLastUpdate(new Date());
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setLoading(false);
+      setIsRefreshing(false);
+    }
+  }, [currentCount, onNewModelsDetected]);
+
+  const fetchGrowthStats = useCallback(async () => {
+    try {
+      const response = await fetch(`${API_BASE}/api/model-count/growth?days=7`);
+      if (response.ok) {
+        const data = await response.json();
+        setGrowthStats(data);
+      }
+    } catch {
+      // Silently fail - growth stats are optional
+    }
+  }, []);
+
+  // Initial fetch
+  useEffect(() => {
+    fetchCurrentCount();
+    if (showGrowth) {
+      fetchGrowthStats();
+    }
+  }, []);
+
+  // Polling interval
+  useEffect(() => {
+    const interval = setInterval(() => {
+      fetchCurrentCount();
+    }, pollInterval);
+
+    return () => clearInterval(interval);
+  }, [pollInterval, fetchCurrentCount]);
+
+  // Refresh growth stats less frequently
+  useEffect(() => {
+    if (!showGrowth) return;
+    
+    const growthInterval = setInterval(() => {
+      fetchGrowthStats();
+    }, 5 * 60 * 1000); // Every 5 minutes
+
+    return () => clearInterval(growthInterval);
+  }, [showGrowth, fetchGrowthStats]);
+
+  const formatNumber = (num: number): string => {
+    if (num >= 1000000) {
+      return `${(num / 1000000).toFixed(2)}M`;
+    }
+    return new Intl.NumberFormat('en-US').format(num);
+  };
+
+  const formatLargeNumber = (num: number): string => {
+    return new Intl.NumberFormat('en-US').format(num);
+  };
+
+  const getTimeAgo = (date: Date): string => {
+    const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000);
+    if (seconds < 60) return 'just now';
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    return `${days}d ago`;
+  };
+
+  if (loading && !currentCount) {
+    return (
+      <div className="live-model-counter">
+        <div className="counter-loading">
+          <RefreshCw size={14} className="spin" />
+          <span>Loading...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error && !currentCount) {
+    return (
+      <div className="live-model-counter counter-error">
+        <span>Error loading count</span>
+      </div>
+    );
+  }
+
+  return (
+    <div 
+      className={`live-model-counter ${showPulse ? 'pulse' : ''}`}
+      title="Total number of public models available on the Hugging Face Hub. Updates periodically."
+    >
+      <div className="counter-main">
+        <div className="counter-content">
+          <div className="counter-value" title={currentCount ? `Exact count: ${currentCount.total_models.toLocaleString()} models` : undefined}>
+            {currentCount ? formatLargeNumber(currentCount.total_models) : '—'}
+          </div>
+          <div className="counter-label">
+            Models on Hugging Face
+          </div>
+        </div>
+      </div>
+
+      {showGrowth && growthStats && growthStats.daily_growth_avg && (
+        <div className="counter-growth">
+          <TrendingUp size={12} />
+          <span>+{Math.round(growthStats.daily_growth_avg).toLocaleString()}/day</span>
+        </div>
+      )}
+
+      {newModelsAdded > 0 && (
+        <div className="counter-new-models">
+          +{newModelsAdded.toLocaleString()} new this session
+        </div>
+      )}
+
+      {lastUpdate && (
+        <div className="counter-timestamp">
+          Updated {getTimeAgo(lastUpdate)}
+        </div>
+      )}
+    </div>
+  );
+}
+

frontend/src/components/ui/LoadingProgress.css

@@ -0,0 +1,63 @@
+.loading-progress {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+  padding: 2rem;
+}
+
+.loading-progress-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  max-width: 500px;
+  text-align: center;
+}
+
+.loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border-light, #e0e0e0);
+  border-top-color: var(--accent-primary, #4a90e2);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-message {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-primary, #333);
+}
+
+.loading-submessage {
+  font-size: 0.9rem;
+  color: var(--text-secondary, #666);
+  font-weight: 400;
+}
+
+.loading-bar-container {
+  width: 100%;
+  height: 8px;
+  background: var(--bg-tertiary, #f5f5f5);
+  border: 1px solid var(--border-light, #e0e0e0);
+  border-radius: 0;
+  overflow: hidden;
+  margin-top: 0.5rem;
+}
+
+.loading-bar {
+  height: 100%;
+  background: var(--accent-primary, #4a90e2);
+  transition: width 0.3s ease;
+  border-radius: 0;
+}
+

frontend/src/components/ui/LoadingProgress.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import './LoadingProgress.css';
+
+interface LoadingProgressProps {
+  message?: string;
+  progress?: number; // 0-100
+  subMessage?: string;
+}
+
+export default function LoadingProgress({ 
+  message = 'Loading models...', 
+  progress,
+  subMessage 
+}: LoadingProgressProps) {
+  return (
+    <div className="loading-progress">
+      <div className="loading-progress-content">
+        <div className="loading-spinner" />
+        <div className="loading-message">{message}</div>
+        {subMessage && (
+          <div className="loading-submessage">{subMessage}</div>
+        )}
+        {progress !== undefined && (
+          <div className="loading-bar-container">
+            <div 
+              className="loading-bar" 
+              style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+

frontend/src/components/ui/ModelCountTracker.tsx

@@ -48,8 +48,8 @@ export default function ModelCountTracker() {
       if (!response.ok) throw new Error('Failed to fetch growth stats');
       const data = await response.json();
       setGrowthStats(data);
-    } catch (err) {
-      console.error('Error fetching growth stats:', err);
+    } catch {
+      // Silent error handling
     }
   };
 

frontend/src/components/ui/ModelPopup.css

@@ -0,0 +1,317 @@
+/* ============================================
+   MODEL POPUP - BOTTOM LEFT COMPACT VIEW
+   ============================================ */
+
+.model-popup {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  width: 320px;
+  max-height: calc(100% - 80px);
+  background: var(--bg-elevated, rgba(26, 26, 26, 0.98));
+  border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.15));
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-primary);
+  animation: popupSlideIn 0.2s ease-out;
+}
+
+@keyframes popupSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Header */
+.popup-header {
+  padding: 12px 12px 10px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.popup-title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.popup-title-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.popup-title {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.3;
+  word-break: break-word;
+}
+
+.popup-base-badge {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  padding: 2px 6px;
+  font-size: 0.6rem;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: #10b981;
+  background: rgba(16, 185, 129, 0.15);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.popup-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+/* Bookmark Button */
+.popup-bookmark-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-tertiary);
+  padding: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-base);
+}
+
+.popup-bookmark-btn:hover {
+  color: #f59e0b;
+}
+
+.popup-bookmark-btn.active {
+  color: #f59e0b;
+}
+
+.popup-close-btn {
+  background: transparent;
+  border: 1px solid var(--border-light);
+  color: var(--text-tertiary);
+  padding: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-base);
+}
+
+.popup-close-btn:hover {
+  color: #ef4444;
+  border-color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+}
+
+/* Content */
+.popup-content {
+  padding: 12px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+/* Stats Row */
+.popup-stats {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.popup-stat {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 0.8rem;
+  color: var(--text-primary);
+}
+
+.popup-stat svg {
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+.popup-stat.trending {
+  color: #10b981;
+}
+
+.popup-stat.trending svg {
+  color: #10b981;
+}
+
+/* Info Grid */
+.popup-info-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.popup-info-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.75rem;
+}
+
+.popup-info-item svg {
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+.popup-info-label {
+  color: var(--text-tertiary);
+  min-width: 50px;
+}
+
+.popup-info-value {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+/* Lineage */
+.popup-lineage {
+  margin-bottom: 12px;
+  padding: 8px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
+}
+
+.popup-lineage-label {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-tertiary);
+  margin-bottom: 6px;
+}
+
+.popup-lineage-path {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.75rem;
+}
+
+.popup-lineage-item {
+  color: var(--text-secondary);
+  padding: 2px 6px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-light);
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.popup-lineage-item.current {
+  color: var(--accent-blue);
+  border-color: var(--accent-blue);
+  background: rgba(74, 144, 226, 0.1);
+}
+
+.popup-lineage-separator {
+  color: var(--text-tertiary);
+  font-size: 0.7rem;
+}
+
+.popup-lineage-loading {
+  color: var(--text-tertiary);
+  font-style: italic;
+  font-size: 0.75rem;
+}
+
+.popup-lineage-base {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: #10b981;
+  font-weight: 500;
+  font-size: 0.75rem;
+}
+
+.popup-lineage-base svg {
+  color: #10b981;
+}
+
+/* Tags */
+.popup-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.popup-tag {
+  font-size: 0.65rem;
+  padding: 2px 6px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-light);
+  color: var(--text-secondary);
+}
+
+.popup-tag-more {
+  font-size: 0.65rem;
+  padding: 2px 6px;
+  color: var(--text-tertiary);
+  font-style: italic;
+}
+
+/* Footer */
+.popup-footer {
+  padding: 10px 12px;
+  border-top: 1px solid var(--border-light);
+  background: var(--bg-secondary);
+}
+
+.popup-hf-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: var(--accent-blue);
+  color: #ffffff;
+  text-decoration: none;
+  font-size: 0.8rem;
+  font-weight: 500;
+  transition: all var(--transition-base);
+}
+
+.popup-hf-link svg {
+  flex-shrink: 0;
+}
+
+.popup-hf-link:hover {
+  background: #3b82f6;
+}
+
+/* Light theme */
+[data-theme="light"] .model-popup {
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+  .model-popup {
+    width: calc(100% - 40px);
+    max-width: 320px;
+  }
+}
+

frontend/src/components/ui/ModelPopup.tsx

@@ -0,0 +1,243 @@
+/**
+ * Popup component for displaying model information in the bottom left.
+ * Replaces the full-screen modal with a compact, persistent popup.
+ */
+import React, { useState, useEffect } from 'react';
+import { X, ArrowUpRight, Bookmark, Download, Heart, TrendingUp, GitBranch, Tag, Layers, Box } from 'lucide-react';
+import { ModelPoint } from '../../types';
+import { getHuggingFaceUrl } from '../../utils/api/hfUrl';
+import { API_BASE } from '../../config/api';
+import './ModelPopup.css';
+
+interface ModelPopupProps {
+  model: ModelPoint | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onBookmark?: (modelId: string) => void;
+  isBookmarked?: boolean;
+}
+
+export default function ModelPopup({
+  model,
+  isOpen,
+  onClose,
+  onBookmark,
+  isBookmarked = false,
+}: ModelPopupProps) {
+  const [lineagePath, setLineagePath] = useState<string[]>([]);
+  const [lineageLoading, setLineageLoading] = useState(false);
+
+  // Fetch lineage path when model changes
+  useEffect(() => {
+    if (!isOpen || !model) {
+      setLineagePath([]);
+      return;
+    }
+
+    const fetchLineage = async () => {
+      setLineageLoading(true);
+      try {
+        const response = await fetch(`${API_BASE}/api/family/path/${encodeURIComponent(model.model_id)}`);
+        if (response.ok) {
+          const data = await response.json();
+          setLineagePath(data.path || []);
+        } else {
+          setLineagePath([]);
+        }
+      } catch {
+        setLineagePath([]);
+      } finally {
+        setLineageLoading(false);
+      }
+    };
+
+    fetchLineage();
+  }, [model?.model_id, isOpen]);
+
+  // Handle escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+    
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
+
+  if (!isOpen || !model) return null;
+
+  const formatNumber = (num: number | null): string => {
+    if (num === null || num === undefined) return '—';
+    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
+    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
+    return num.toLocaleString();
+  };
+
+  const formatDate = (dateString: string | null): string => {
+    if (!dateString) return '—';
+    try {
+      return new Date(dateString).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+      });
+    } catch {
+      return dateString;
+    }
+  };
+
+  return (
+    <div className="model-popup">
+      {/* Header */}
+      <div className="popup-header">
+        <div className="popup-title-row">
+          <div className="popup-title-wrapper">
+            <h3 className="popup-title" title={model.model_id}>
+              {model.model_id}
+            </h3>
+            {!model.parent_model && (model.family_depth === 0 || model.family_depth === null) && (
+              <span className="popup-base-badge" title="This is a base model with no parent">BASE</span>
+            )}
+          </div>
+          <div className="popup-actions">
+            {onBookmark && (
+              <button
+                className={`popup-bookmark-btn ${isBookmarked ? 'active' : ''}`}
+                onClick={() => onBookmark(model.model_id)}
+                title={isBookmarked ? 'Remove bookmark' : 'Add bookmark'}
+              >
+                <Bookmark size={16} fill={isBookmarked ? 'currentColor' : 'none'} />
+              </button>
+            )}
+            <button className="popup-close-btn" onClick={onClose} title="Close">
+              <X size={16} />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="popup-content">
+        {/* Stats Row */}
+        <div className="popup-stats">
+          <div className="popup-stat" title={`Downloads: ${model.downloads?.toLocaleString() || 0} total downloads from Hugging Face`}>
+            <Download size={14} />
+            <span>{formatNumber(model.downloads)}</span>
+          </div>
+          <div className="popup-stat" title={`Likes: ${model.likes?.toLocaleString() || 0} community likes on Hugging Face`}>
+            <Heart size={14} />
+            <span>{formatNumber(model.likes)}</span>
+          </div>
+          {model.trending_score !== null && model.trending_score > 0 && (
+            <div className="popup-stat trending" title={`Trending Score: ${model.trending_score.toFixed(2)} — measures recent popularity growth`}>
+              <TrendingUp size={14} />
+              <span>{model.trending_score.toFixed(1)}</span>
+            </div>
+          )}
+        </div>
+
+        {/* Info Grid */}
+        <div className="popup-info-grid">
+          {model.library_name && (
+            <div className="popup-info-item" title={`ML Library: The framework used to build this model (e.g., transformers, diffusers, timm)`}>
+              <Layers size={14} />
+              <span className="popup-info-label">Library</span>
+              <span className="popup-info-value">{model.library_name}</span>
+            </div>
+          )}
+          {model.pipeline_tag && (
+            <div className="popup-info-item" title={`Task Type: What this model does (e.g., text-generation, image-classification)`}>
+              <Tag size={14} />
+              <span className="popup-info-label">Task</span>
+              <span className="popup-info-value">{model.pipeline_tag}</span>
+            </div>
+          )}
+          {model.created_at && (
+            <div className="popup-info-item" title="When this model was first published on Hugging Face">
+              <span className="popup-info-label">Created</span>
+              <span className="popup-info-value">{formatDate(model.created_at)}</span>
+            </div>
+          )}
+          {model.family_depth !== null && model.family_depth !== undefined && (
+            <div className="popup-info-item" title={`Family Depth: ${model.family_depth === 0 ? 'Base model (root of lineage tree)' : `${model.family_depth} generation${model.family_depth > 1 ? 's' : ''} from the root model`}`}>
+              <GitBranch size={14} />
+              <span className="popup-info-label">Depth</span>
+              <span className="popup-info-value">{model.family_depth}</span>
+            </div>
+          )}
+        </div>
+
+        {/* Lineage */}
+        <div className="popup-lineage" title="Model lineage shows the parent-child relationship from the original base model to this model">
+          <div className="popup-lineage-label">Lineage</div>
+          <div className="popup-lineage-path">
+            {lineageLoading ? (
+              <span className="popup-lineage-loading">Loading...</span>
+            ) : lineagePath.length > 1 ? (
+              lineagePath.map((pathModel, idx) => (
+                <React.Fragment key={pathModel}>
+                  <span 
+                    className={`popup-lineage-item ${pathModel === model.model_id ? 'current' : ''}`}
+                    title={pathModel}
+                  >
+                    {pathModel.split('/').pop()}
+                  </span>
+                  {idx < lineagePath.length - 1 && (
+                    <span className="popup-lineage-separator">&gt;</span>
+                  )}
+                </React.Fragment>
+              ))
+            ) : model.parent_model ? (
+              <>
+                <span className="popup-lineage-item" title={model.parent_model}>
+                  {model.parent_model.split('/').pop()}
+                </span>
+                <span className="popup-lineage-separator">&gt;</span>
+                <span className="popup-lineage-item current" title={model.model_id}>
+                  {model.model_id.split('/').pop()}
+                </span>
+              </>
+            ) : (
+              <span className="popup-lineage-base">
+                <Box size={14} />
+                Root model
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Tags */}
+        {model.tags && (
+          <div className="popup-tags">
+            {(typeof model.tags === 'string' ? model.tags.split(',') : [])
+              .slice(0, 6)
+              .map((tag, idx) => (
+                <span key={idx} className="popup-tag">{tag.trim()}</span>
+              ))}
+            {(typeof model.tags === 'string' ? model.tags.split(',') : []).length > 6 && (
+              <span className="popup-tag-more">
+                +{(typeof model.tags === 'string' ? model.tags.split(',') : []).length - 6}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="popup-footer">
+        <a
+          href={getHuggingFaceUrl(model.model_id)}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="popup-hf-link"
+        >
+          View on Hugging Face
+          <ArrowUpRight size={14} />
+        </a>
+      </div>
+    </div>
+  );
+}
+

frontend/src/components/ui/ModelTooltip.css

@@ -0,0 +1,71 @@
+/* ============================================
+   MODEL TOOLTIP
+   ============================================ */
+
+.model-tooltip {
+  position: fixed;
+  background: rgba(20, 20, 20, 0.98);
+  padding: 12px 16px;
+  font-size: 13px;
+  max-width: 350px;
+  z-index: 10000;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.model-tooltip-title {
+  font-weight: 600;
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #fff;
+}
+
+.model-tooltip-content {
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: #d0d0d0;
+}
+
+.model-tooltip-row {
+  margin-bottom: 4px;
+}
+
+.model-tooltip-row-small {
+  margin-bottom: 4px;
+  font-size: 11px;
+  color: #aaa;
+}
+
+.model-tooltip-label {
+  color: #888;
+}
+
+.model-tooltip-label-spaced {
+  color: #888;
+  margin-left: 8px;
+}
+
+.model-tooltip-loading {
+  font-size: 11px;
+  color: #888;
+  font-style: italic;
+  margin-top: 8px;
+}
+
+.model-tooltip-description {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: 12px;
+  color: #e0e0e0;
+  line-height: 1.4;
+}
+
+.model-tooltip-hint {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #888;
+  font-style: italic;
+}
+

frontend/src/components/ui/ModelTooltip.tsx

@@ -4,6 +4,7 @@
 import React, { useEffect, useState } from 'react';
 import { ModelPoint } from '../../types';
 import { getHuggingFaceApiUrl } from '../../utils/api/hfUrl';
+import './ModelTooltip.css';
 
 interface ModelTooltipProps {
   model: ModelPoint | null;
@@ -21,7 +22,7 @@ function formatDate(dateString: string | null): string {
   if (!dateString) return '';
   try {
     const date = new Date(dateString);
-    if (isNaN(date.getTime())) return dateString; // Return original if invalid
+    if (isNaN(date.getTime())) return dateString;
     return date.toLocaleDateString('en-US', { 
       year: 'numeric', 
       month: 'short', 
@@ -42,19 +43,15 @@ export default function ModelTooltip({ model, position, visible }: ModelTooltipP
       return;
     }
 
-    // Check cache first
     if (cache.has(model.model_id)) {
       setDetails({ description: cache.get(model.model_id) });
       return;
     }
 
-    // Fetch model description from Hugging Face API
     setDetails({ loading: true });
     
     const fetchDescription = async () => {
       try {
-        // Try to get description from Hugging Face API
-        // Use HF token if available (from env or localStorage)
         const hfToken = process.env.REACT_APP_HF_TOKEN || 
                        (typeof window !== 'undefined' ? localStorage.getItem('HF_TOKEN') : null);
         
@@ -78,7 +75,6 @@ export default function ModelTooltip({ model, position, visible }: ModelTooltipP
                             null;
           
           if (description) {
-            // Cache the description
             const newCache = new Map(cache);
             newCache.set(model.model_id, description);
             setCache(newCache);
@@ -89,8 +85,7 @@ export default function ModelTooltip({ model, position, visible }: ModelTooltipP
         } else {
           setDetails({});
         }
-      } catch (error) {
-        console.error('Error fetching model description:', error);
+      } catch {
         setDetails({});
       }
     };
@@ -109,81 +104,58 @@ export default function ModelTooltip({ model, position, visible }: ModelTooltipP
 
   return (
     <div
+      className="model-tooltip"
       style={{
-        position: 'fixed',
         left: `${position.x + 15}px`,
         top: `${position.y - 10}px`,
-        background: 'rgba(0, 0, 0, 0.9)',
-        color: 'white',
-        padding: '12px 16px',
-        borderRadius: '0',
-        fontSize: '13px',
-        maxWidth: '350px',
-        zIndex: 10000,
-        pointerEvents: 'none',
-        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
-        border: '1px solid rgba(255, 255, 255, 0.1)',
       }}
     >
-      <div style={{ fontWeight: '600', marginBottom: '8px', fontSize: '14px', color: '#fff' }}>
+      <div className="model-tooltip-title">
         {model.model_id}
       </div>
       
-      <div style={{ marginBottom: '6px', fontSize: '12px', color: '#d0d0d0' }}>
+      <div className="model-tooltip-content">
         {model.library_name && (
-          <div style={{ marginBottom: '4px' }}>
-            <span style={{ color: '#888' }}>Library:</span> {model.library_name}
+          <div className="model-tooltip-row">
+            <span className="model-tooltip-label">Library:</span> {model.library_name}
           </div>
         )}
         {model.pipeline_tag && (
-          <div style={{ marginBottom: '4px' }}>
-            <span style={{ color: '#888' }}>Task:</span> {model.pipeline_tag}
+          <div className="model-tooltip-row">
+            <span className="model-tooltip-label">Task:</span> {model.pipeline_tag}
           </div>
         )}
-        <div style={{ marginBottom: '4px' }}>
-          <span style={{ color: '#888' }}>Downloads:</span> {model.downloads.toLocaleString()} | 
-          <span style={{ color: '#888', marginLeft: '8px' }}>Likes:</span> {model.likes.toLocaleString()}
+        <div className="model-tooltip-row">
+          <span className="model-tooltip-label">Downloads:</span> {model.downloads.toLocaleString()} | 
+          <span className="model-tooltip-label-spaced">Likes:</span> {model.likes.toLocaleString()}
         </div>
         {model.created_at && (
-          <div style={{ marginBottom: '4px', fontSize: '11px', color: '#aaa' }}>
-            <span style={{ color: '#888' }}>Created:</span> {formatDate(model.created_at)}
+          <div className="model-tooltip-row-small">
+            <span className="model-tooltip-label">Created:</span> {formatDate(model.created_at)}
           </div>
         )}
         {model.parent_model && (
-          <div style={{ marginBottom: '4px', fontSize: '11px', color: '#aaa' }}>
-            <span style={{ color: '#888' }}>Parent:</span> {model.parent_model}
+          <div className="model-tooltip-row-small">
+            <span className="model-tooltip-label">Parent:</span> {model.parent_model}
           </div>
         )}
       </div>
 
       {details.loading && (
-        <div style={{ fontSize: '11px', color: '#888', fontStyle: 'italic', marginTop: '8px' }}>
+        <div className="model-tooltip-loading">
           Loading description...
         </div>
       )}
 
       {truncatedDescription && (
-        <div style={{ 
-          marginTop: '8px', 
-          paddingTop: '8px', 
-          borderTop: '1px solid rgba(255, 255, 255, 0.1)',
-          fontSize: '12px',
-          color: '#e0e0e0',
-          lineHeight: '1.4',
-        }}>
+        <div className="model-tooltip-description">
           {truncatedDescription}
         </div>
       )}
 
-      <div style={{ 
-        marginTop: '8px', 
-        fontSize: '11px', 
-        color: '#888',
-        fontStyle: 'italic' 
-      }}>
+      <div className="model-tooltip-hint">
         Click for details
       </div>
     </div>
   );
 }
-

frontend/src/components/ui/VirtualSearchResults.css

@@ -0,0 +1,39 @@
+/* ============================================
+   VIRTUAL SEARCH RESULTS
+   ============================================ */
+
+.virtual-search-result {
+  cursor: pointer;
+  padding: 8px 12px;
+  background-color: transparent;
+  border-bottom: 1px solid var(--border-light);
+  transition: background-color var(--transition-base);
+}
+
+.virtual-search-result:hover {
+  background-color: var(--bg-secondary);
+}
+
+.virtual-search-result.selected {
+  background-color: var(--bg-tertiary);
+}
+
+.virtual-search-result-title {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.virtual-search-result-meta {
+  font-size: 0.875rem;
+  opacity: 0.7;
+  margin-top: 2px;
+  color: var(--text-secondary);
+}
+
+.virtual-search-result-stats {
+  font-size: 0.75rem;
+  opacity: 0.6;
+  margin-top: 2px;
+  color: var(--text-tertiary);
+}
+

frontend/src/components/ui/VirtualSearchResults.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import { FixedSizeList as List } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { SearchResult } from '../../types';
+import './VirtualSearchResults.css';
 
 interface VirtualSearchResultsProps {
   results: SearchResult[];
@@ -24,33 +25,18 @@ export const VirtualSearchResults: React.FC<VirtualSearchResultsProps> = ({
 
     return (
       <div
-        style={{
-          ...style,
-          cursor: 'pointer',
-          padding: '8px 12px',
-          backgroundColor: isSelected ? 'var(--accent-color)' : 'transparent',
-          borderBottom: '1px solid var(--border-color)',
-        }}
+        style={style}
+        className={`virtual-search-result ${isSelected ? 'selected' : ''}`}
         onClick={() => onSelect(result)}
-        onMouseEnter={(e) => {
-          if (!isSelected) {
-            e.currentTarget.style.backgroundColor = 'var(--hover-color)';
-          }
-        }}
-        onMouseLeave={(e) => {
-          if (!isSelected) {
-            e.currentTarget.style.backgroundColor = 'transparent';
-          }
-        }}
       >
-        <div style={{ fontWeight: 500 }}>{result.model_id}</div>
+        <div className="virtual-search-result-title">{result.model_id}</div>
         {result.library_name && (
-          <div style={{ fontSize: '0.875rem', opacity: 0.7, marginTop: '2px' }}>
+          <div className="virtual-search-result-meta">
             {result.library_name} {result.pipeline_tag && `• ${result.pipeline_tag}`}
           </div>
         )}
         {(result.downloads || result.likes) && (
-          <div style={{ fontSize: '0.75rem', opacity: 0.6, marginTop: '2px' }}>
+          <div className="virtual-search-result-stats">
             {result.downloads?.toLocaleString()} downloads • {result.likes?.toLocaleString()} likes
           </div>
         )}

frontend/src/components/visualizations/AdoptionCurve.css

@@ -0,0 +1,138 @@
+.adoption-curve-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  position: relative;
+  background: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-light, #e0e0e0);
+  border-radius: 0;
+}
+
+.adoption-curve-empty {
+  padding: 3rem;
+  text-align: center;
+  color: var(--text-secondary, #666);
+  background: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-light, #e0e0e0);
+  border-radius: 0;
+}
+
+.adoption-tooltip {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.tooltip-model-id {
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin-bottom: 0.25rem;
+  color: var(--text-primary, #1a1a1a);
+}
+
+[data-theme="dark"] .tooltip-model-id {
+  color: #ffffff;
+}
+
+.tooltip-date {
+  color: var(--text-secondary, #666666);
+  font-size: 0.8rem;
+}
+
+[data-theme="dark"] .tooltip-date {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.tooltip-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--border-light, #e8e8e8);
+  font-size: 0.8rem;
+}
+
+[data-theme="dark"] .tooltip-stats {
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.tooltip-family {
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin-bottom: 0.25rem;
+  color: var(--text-primary, #1a1a1a);
+}
+
+[data-theme="dark"] .tooltip-family {
+  color: #ffffff;
+}
+
+.adoption-legend {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background: var(--bg-elevated, #ffffff);
+  border: 1px solid var(--border-medium, #d0d0d0);
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: var(--shadow-lg, 0 2px 8px rgba(0, 0, 0, 0.12));
+  z-index: 10;
+  min-width: 180px;
+  backdrop-filter: blur(10px);
+}
+
+[data-theme="dark"] .adoption-legend {
+  background: rgba(20, 20, 20, 0.98);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
+}
+
+.legend-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary, #666666);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border-light, #e8e8e8);
+}
+
+[data-theme="dark"] .legend-title {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.625rem;
+  font-size: 0.875rem;
+}
+
+.legend-item:last-child {
+  margin-bottom: 0;
+}
+
+.legend-color-line {
+  width: 20px;
+  height: 3px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.legend-label {
+  color: var(--text-primary, #1a1a1a);
+  font-weight: 500;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-theme="dark"] .legend-label {
+  color: #ffffff;
+}

frontend/src/components/visualizations/AdoptionCurve.tsx

@@ -0,0 +1,447 @@
+import React, { useMemo, useCallback } from 'react';
+import { Group } from '@visx/group';
+import { AreaClosed, LinePath } from '@visx/shape';
+import { AxisLeft, AxisBottom } from '@visx/axis';
+import { scaleTime, scaleLinear } from '@visx/scale';
+import { useTooltip, TooltipWithBounds, defaultStyles } from '@visx/tooltip';
+import { localPoint } from '@visx/event';
+import { bisector } from 'd3-array';
+import './AdoptionCurve.css';
+
+export interface AdoptionDataPoint {
+  date: Date;
+  downloads: number;
+  modelId: string;
+}
+
+interface ProcessedAdoptionDataPoint extends AdoptionDataPoint {
+  cumulativeDownloads: number;
+}
+
+interface FamilyAdoptionData {
+  family: string;
+  data: AdoptionDataPoint[];
+  color?: string;
+}
+
+interface AdoptionCurveProps {
+  data: AdoptionDataPoint[];
+  selectedModel?: string;
+  width?: number;
+  height?: number;
+  margin?: { top: number; right: number; bottom: number; left: number };
+  // Comparison mode: multiple families
+  families?: FamilyAdoptionData[];
+}
+
+const defaultMargin = { top: 20, right: 20, bottom: 60, left: 80 };
+
+const bisectDate = bisector<ProcessedAdoptionDataPoint, Date>((d) => d.date).left;
+
+// Color palette for multiple families
+const FAMILY_COLORS = [
+  '#3b82f6', // blue
+  '#ef4444', // red
+  '#10b981', // green
+  '#f59e0b', // amber
+  '#8b5cf6', // purple
+  '#ec4899', // pink
+  '#06b6d4', // cyan
+  '#f97316', // orange
+];
+
+export default function AdoptionCurve({
+  data,
+  selectedModel,
+  width = 800,
+  height = 400,
+  margin = defaultMargin,
+  families,
+}: AdoptionCurveProps) {
+  const {
+    tooltipData,
+    tooltipLeft,
+    tooltipTop,
+    tooltipOpen,
+    showTooltip,
+    hideTooltip,
+  } = useTooltip<ProcessedAdoptionDataPoint>();
+
+  // Process data: calculate cumulative downloads for single family mode
+  const processedData: ProcessedAdoptionDataPoint[] = useMemo(() => {
+    if (families && families.length > 0) return []; // Use families data instead
+    
+    if (!data || data.length === 0) return [];
+    
+    const sorted = [...data].sort((a, b) => a.date.getTime() - b.date.getTime());
+    let cumulative = 0;
+    
+    return sorted.map((point) => {
+      cumulative += point.downloads;
+      return {
+        ...point,
+        cumulativeDownloads: cumulative,
+      };
+    });
+  }, [data, families]);
+
+  // Process multiple families for comparison mode
+  const processedFamilies = useMemo(() => {
+    if (!families || families.length === 0) return [];
+    
+    return families.map((family, idx) => {
+      const sorted = [...family.data].sort((a, b) => a.date.getTime() - b.date.getTime());
+      let cumulative = 0;
+      
+      const processed = sorted.map((point) => {
+        cumulative += point.downloads;
+        return {
+          ...point,
+          cumulativeDownloads: cumulative,
+        };
+      });
+      
+      return {
+        family: family.family,
+        data: processed,
+        color: family.color || FAMILY_COLORS[idx % FAMILY_COLORS.length],
+      };
+    });
+  }, [families]);
+
+  // Calculate scales - handle both single and multi-family modes
+  const allDates = useMemo(() => {
+    if (processedFamilies.length > 0) {
+      return processedFamilies.flatMap(f => f.data.map(d => d.date));
+    }
+    return processedData.map(d => d.date);
+  }, [processedData, processedFamilies]);
+
+  const allMaxDownloads = useMemo(() => {
+    if (processedFamilies.length > 0) {
+      return Math.max(...processedFamilies.flatMap(f => f.data.map(d => d.cumulativeDownloads)));
+    }
+    return Math.max(...processedData.map(d => d.cumulativeDownloads));
+  }, [processedData, processedFamilies]);
+
+  const xScale = useMemo(() => {
+    if (allDates.length === 0) {
+      return scaleTime({
+        domain: [new Date(), new Date()],
+        range: [margin.left, width - margin.right],
+      });
+    }
+    
+    return scaleTime({
+      domain: [new Date(Math.min(...allDates.map(d => d.getTime()))), new Date(Math.max(...allDates.map(d => d.getTime())))],
+      range: [margin.left, width - margin.right],
+    });
+  }, [allDates, width, margin]);
+
+  const yScale = useMemo(() => {
+    if (allDates.length === 0) {
+      return scaleLinear({
+        domain: [0, 1],
+        range: [height - margin.bottom, margin.top],
+      });
+    }
+    
+    return scaleLinear({
+      domain: [0, allMaxDownloads * 1.1],
+      range: [height - margin.bottom, margin.top],
+    });
+  }, [allDates.length, allMaxDownloads, height, margin]);
+
+  const isComparisonMode = processedFamilies.length > 0;
+
+  // Handle mouse move for tooltip
+  const handleMouseMove = useCallback(
+    (event: React.MouseEvent<SVGRectElement>) => {
+      const coords = localPoint(event.currentTarget.ownerSVGElement!, event);
+      if (!coords) return;
+
+      const x0 = xScale.invert(coords.x - margin.left);
+      const date = x0 instanceof Date ? x0 : new Date(x0);
+
+      if (isComparisonMode) {
+        // Find closest point across all families
+        let closestPoint: ProcessedAdoptionDataPoint | null = null;
+        let closestFamily: string | null = null;
+        let minDistance = Infinity;
+
+        processedFamilies.forEach((family) => {
+          const index = bisectDate(family.data, date, 1);
+          const a = family.data[index - 1];
+          const b = family.data[index];
+          
+          let point: ProcessedAdoptionDataPoint | null = null;
+          if (!b) {
+            point = a;
+          } else if (!a) {
+            point = b;
+          } else {
+            point = date.getTime() - a.date.getTime() > b.date.getTime() - date.getTime() ? b : a;
+          }
+
+          if (point) {
+            const distance = Math.abs(point.date.getTime() - date.getTime());
+            if (distance < minDistance) {
+              minDistance = distance;
+              closestPoint = point;
+              closestFamily = family.family;
+            }
+          }
+        });
+
+        if (closestPoint && closestFamily) {
+          const tooltipDataWithFamily = Object.assign({}, closestPoint, { family: closestFamily });
+          showTooltip({
+            tooltipData: tooltipDataWithFamily as any,
+            tooltipLeft: coords.x,
+            tooltipTop: coords.y,
+          });
+        }
+      } else {
+        const index = bisectDate(processedData, date, 1);
+        const a = processedData[index - 1];
+        const b = processedData[index];
+        
+        let closestPoint: ProcessedAdoptionDataPoint | null = null;
+        if (!b) {
+          closestPoint = a;
+        } else if (!a) {
+          closestPoint = b;
+        } else {
+          closestPoint = date.getTime() - a.date.getTime() > b.date.getTime() - date.getTime() ? b : a;
+        }
+
+        if (closestPoint) {
+          showTooltip({
+            tooltipData: closestPoint,
+            tooltipLeft: coords.x,
+            tooltipTop: coords.y,
+          });
+        }
+      }
+    },
+    [processedData, processedFamilies, isComparisonMode, xScale, margin, showTooltip]
+  );
+
+  const hasData = isComparisonMode || processedData.length > 0;
+
+  if (!hasData) {
+    return (
+      <div className="adoption-curve-empty">
+        <p>No adoption data available</p>
+      </div>
+    );
+  }
+
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+
+  return (
+    <div className="adoption-curve-container">
+      {/* Legend for comparison mode - positioned nicely */}
+      {isComparisonMode && processedFamilies.length > 0 && (
+        <div className="adoption-legend">
+          <div className="legend-title">Families</div>
+          {processedFamilies.map((family) => (
+            <div key={family.family} className="legend-item">
+              <div 
+                className="legend-color-line" 
+                style={{ backgroundColor: family.color }}
+              />
+              <span className="legend-label">{family.family}</span>
+            </div>
+          ))}
+        </div>
+      )}
+      <svg width={width} height={height}>
+        <Group>
+          {isComparisonMode ? (
+            // Multi-family comparison mode
+            <>
+              {processedFamilies.map((family, familyIdx) => {
+                const color = family.color;
+                const rgbaColor = color + '33'; // Add alpha for area
+                
+                return (
+                  <React.Fragment key={family.family}>
+                    {/* Area under curve */}
+                    <AreaClosed<ProcessedAdoptionDataPoint>
+                      data={family.data}
+                      x={(d) => xScale(d.date) ?? 0}
+                      y={(d) => yScale(d.cumulativeDownloads) ?? 0}
+                      yScale={yScale}
+                      fill={rgbaColor}
+                      stroke="none"
+                    />
+                    {/* Line path */}
+                    <LinePath<ProcessedAdoptionDataPoint>
+                      data={family.data}
+                      x={(d) => xScale(d.date) ?? 0}
+                      y={(d) => yScale(d.cumulativeDownloads) ?? 0}
+                      stroke={color}
+                      strokeWidth={2.5}
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </React.Fragment>
+                );
+              })}
+            </>
+          ) : (
+            // Single family mode
+            <>
+              {/* Area under curve */}
+              <AreaClosed<ProcessedAdoptionDataPoint>
+                data={processedData}
+                x={(d) => xScale(d.date) ?? 0}
+                y={(d) => yScale(d.cumulativeDownloads) ?? 0}
+                yScale={yScale}
+                fill="rgba(59, 130, 246, 0.2)"
+                stroke="none"
+              />
+              {/* Line path */}
+              <LinePath<ProcessedAdoptionDataPoint>
+                data={processedData}
+                x={(d) => xScale(d.date) ?? 0}
+                y={(d) => yScale(d.cumulativeDownloads) ?? 0}
+                stroke="#3b82f6"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              {/* Data points */}
+              {processedData.map((point, idx) => {
+                const x = xScale(point.date) ?? 0;
+                const y = yScale(point.cumulativeDownloads) ?? 0;
+                const isSelected = selectedModel === point.modelId;
+                
+                return (
+                  <circle
+                    key={`${point.modelId}-${idx}`}
+                    cx={x}
+                    cy={y}
+                    r={isSelected ? 6 : 4}
+                    fill={isSelected ? "#ef4444" : "#3b82f6"}
+                    stroke={isSelected ? "#fff" : "none"}
+                    strokeWidth={isSelected ? 2 : 0}
+                    style={{ cursor: 'pointer' }}
+                  />
+                );
+              })}
+            </>
+          )}
+
+          {/* X-axis */}
+          <AxisBottom
+            top={height - margin.bottom}
+            scale={xScale}
+            numTicks={width > 520 ? 8 : 4}
+            stroke="#666"
+            tickStroke="#666"
+            tickLabelProps={() => ({
+              fill: '#666',
+              fontSize: 10,
+              textAnchor: 'middle',
+              dy: -2,
+            })}
+            label="Date"
+            labelProps={{
+              fill: '#333',
+              fontSize: 11,
+              textAnchor: 'middle',
+              dy: 40,
+            }}
+          />
+
+          {/* Y-axis */}
+          <AxisLeft
+            left={margin.left}
+            scale={yScale}
+            numTicks={5}
+            tickFormat={(value) => {
+              const num = Number(value);
+              if (num >= 1000000) {
+                return `${(num / 1000000).toFixed(1)}M`;
+              } else if (num >= 1000) {
+                return `${(num / 1000).toFixed(0)}K`;
+              }
+              return num.toString();
+            }}
+            stroke="#666"
+            tickStroke="#666"
+            tickLabelProps={() => ({
+              fill: '#666',
+              fontSize: 10,
+              textAnchor: 'end',
+              dx: -4,
+              dy: 3,
+            })}
+            label="Cumulative Downloads"
+            labelProps={{
+              fill: '#333',
+              fontSize: 11,
+              textAnchor: 'middle',
+              transform: 'rotate(-90)',
+              dy: -50,
+            }}
+          />
+
+          {/* Invisible rect for mouse tracking */}
+          <rect
+            x={margin.left}
+            y={margin.top}
+            width={innerWidth}
+            height={innerHeight}
+            fill="transparent"
+            onMouseMove={handleMouseMove}
+            onMouseLeave={hideTooltip}
+          />
+        </Group>
+      </svg>
+
+      {/* Tooltip */}
+      {tooltipOpen && tooltipData && (
+        <TooltipWithBounds
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={{
+            ...defaultStyles,
+            backgroundColor: 'var(--bg-elevated, #ffffff)',
+            color: 'var(--text-primary, #1a1a1a)',
+            border: '1px solid var(--border-medium, #d0d0d0)',
+            padding: '0.75rem',
+            borderRadius: '4px',
+            fontSize: '0.875rem',
+            pointerEvents: 'none',
+            boxShadow: 'var(--shadow-lg, 0 2px 8px rgba(0, 0, 0, 0.12))',
+          }}
+        >
+          <div className="adoption-tooltip">
+            {(tooltipData as any).family && (
+              <div className="tooltip-family" style={{ color: processedFamilies.find(f => f.family === (tooltipData as any).family)?.color }}>
+                {(tooltipData as any).family}
+              </div>
+            )}
+            <div className="tooltip-model-id">{tooltipData.modelId}</div>
+            <div className="tooltip-date">
+              {tooltipData.date.toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+              })}
+            </div>
+            <div className="tooltip-stats">
+              <div>Downloads: {tooltipData.downloads.toLocaleString()}</div>
+              <div>Cumulative: {tooltipData.cumulativeDownloads.toLocaleString()}</div>
+            </div>
+          </div>
+        </TooltipWithBounds>
+      )}
+
+    </div>
+  );
+}

frontend/src/components/visualizations/DistanceHeatmap.css

@@ -0,0 +1,39 @@
+/* ============================================
+   DISTANCE HEATMAP
+   ============================================ */
+
+.distance-heatmap-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.distance-heatmap-info {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 8px 12px;
+  font-size: 11px;
+  font-family: var(--font-primary);
+}
+
+.distance-heatmap-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.distance-heatmap-detail {
+  font-size: 10px;
+  opacity: 0.9;
+}
+
+.distance-heatmap-range {
+  font-size: 10px;
+  opacity: 0.8;
+  margin-top: 4px;
+}
+

frontend/src/components/visualizations/DistanceHeatmap.tsx

@@ -4,6 +4,7 @@
  */
 import React, { useMemo } from 'react';
 import { ModelPoint } from '../../types';
+import './DistanceHeatmap.css';
 
 interface DistanceHeatmapProps {
   data: ModelPoint[];
@@ -18,7 +19,6 @@ export default function DistanceHeatmap({
   selectedModel,
   width,
   height,
-  opacity = 0.3
 }: DistanceHeatmapProps) {
   const distances = useMemo(() => {
     if (!selectedModel) return null;
@@ -45,39 +45,18 @@ export default function DistanceHeatmap({
   
   return (
     <div
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width,
-        height,
-        pointerEvents: 'none',
-        zIndex: 1
-      }}
+      className="distance-heatmap-overlay"
+      style={{ width, height }}
     >
-      <div
-        style={{
-          position: 'absolute',
-          bottom: 10,
-          left: 10,
-          background: 'rgba(0, 0, 0, 0.7)',
-          color: 'white',
-          padding: '8px 12px',
-          borderRadius: '0',
-          fontSize: '11px',
-          fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
-        }}
-      >
-        <div style={{ fontWeight: 600, marginBottom: '4px' }}>Distance Heatmap</div>
-        <div style={{ fontSize: '10px', opacity: 0.9 }}>
+      <div className="distance-heatmap-info">
+        <div className="distance-heatmap-title">Distance Heatmap</div>
+        <div className="distance-heatmap-detail">
           Showing distance from: <strong>{selectedModel.model_id}</strong>
         </div>
-        <div style={{ fontSize: '10px', opacity: 0.8, marginTop: '4px' }}>
+        <div className="distance-heatmap-range">
           Range: {distances.minDist.toFixed(2)} - {distances.maxDist.toFixed(2)}
         </div>
       </div>
     </div>
   );
 }
-
-

frontend/src/components/visualizations/MiniMap.css

@@ -0,0 +1,227 @@
+/* ============================================
+   MINI-MAP / OVERVIEW MAP
+   Best practices from GIS, embedding explorers, and visualization tools
+   ============================================ */
+
+/* CSS Custom Properties for theming */
+:root {
+  --minimap-bg: #0d1117;
+  --minimap-header: #161b22;
+  --minimap-footer: #161b22;
+  --minimap-border: #30363d;
+  --minimap-viewport-fill: rgba(59, 130, 246, 0.2);
+  --minimap-viewport-stroke: #3b82f6;
+}
+
+[data-theme="light"] {
+  --minimap-bg: #f6f8fa;
+  --minimap-header: #ffffff;
+  --minimap-footer: #ffffff;
+  --minimap-border: #d0d7de;
+  --minimap-viewport-fill: rgba(59, 130, 246, 0.15);
+  --minimap-viewport-stroke: #2563eb;
+}
+
+/* Container */
+.minimap-container {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  background: var(--minimap-bg);
+  border: 1px solid var(--minimap-border);
+  box-shadow: 
+    0 8px 24px rgba(0, 0, 0, 0.4),
+    0 2px 8px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  z-index: 100;
+  user-select: none;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.minimap-container:hover {
+  box-shadow: 
+    0 12px 32px rgba(0, 0, 0, 0.5),
+    0 4px 12px rgba(0, 0, 0, 0.25);
+}
+
+/* Minimize on hover out - subtle opacity */
+.minimap-container.minimized {
+  opacity: 0.8;
+}
+
+/* Header */
+.minimap-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 10px;
+  background: var(--minimap-header);
+  border-bottom: 1px solid var(--minimap-border);
+}
+
+.minimap-title {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-secondary, #8b949e);
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+}
+
+.minimap-hint {
+  font-size: 9px;
+  color: var(--text-tertiary, #6e7681);
+  font-style: italic;
+}
+
+/* SVG Canvas */
+.minimap-svg {
+  display: block;
+  cursor: crosshair;
+  background: var(--minimap-bg);
+}
+
+.minimap-svg:active {
+  cursor: grabbing;
+}
+
+/* Viewport rectangle styling (via D3, but CSS helps) */
+.viewport-indicator {
+  pointer-events: all;
+}
+
+.viewport-fill {
+  transition: fill 0.15s ease;
+}
+
+.viewport-fill:hover {
+  fill: rgba(59, 130, 246, 0.3);
+}
+
+.viewport-border {
+  transition: stroke-width 0.15s ease;
+}
+
+.viewport-fill:hover + .viewport-border,
+.viewport-border:hover {
+  stroke-width: 3px;
+}
+
+/* Stats footer */
+.minimap-stats,
+.minimap-footer {
+  display: none; /* Hidden by default */
+}
+
+.minimap-stat,
+.minimap-label {
+  display: none;
+}
+
+/* Density cells animation */
+.density-layer rect {
+  transition: opacity 0.2s ease;
+}
+
+/* Grid overlay */
+.grid-overlay line {
+  pointer-events: none;
+}
+
+/* Light theme adjustments */
+[data-theme="light"] .minimap-container {
+  box-shadow: 
+    0 4px 16px rgba(0, 0, 0, 0.12),
+    0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+[data-theme="light"] .minimap-container:hover {
+  box-shadow: 
+    0 8px 24px rgba(0, 0, 0, 0.16),
+    0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="light"] .minimap-title {
+  color: var(--text-primary, #24292f);
+}
+
+/* Responsive: hide on small screens */
+@media (max-width: 768px) {
+  .minimap-container {
+    display: none;
+  }
+}
+
+/* Compact variant for smaller screens */
+@media (max-width: 1200px) and (min-width: 769px) {
+  .minimap-container {
+    bottom: 12px;
+    right: 12px;
+  }
+  
+  .minimap-header {
+    padding: 4px 8px;
+  }
+  
+  .minimap-title {
+    font-size: 9px;
+  }
+}
+
+/* Animation for viewport pulsing (subtle attention) */
+@keyframes viewport-pulse {
+  0%, 100% {
+    stroke-opacity: 1;
+  }
+  50% {
+    stroke-opacity: 0.7;
+  }
+}
+
+/* Only pulse when first appearing or after navigation */
+.minimap-svg .viewport-border.pulse {
+  animation: viewport-pulse 1.5s ease-in-out 2;
+}
+
+/* Drag state */
+.minimap-container.dragging .minimap-svg {
+  cursor: grabbing;
+}
+
+.minimap-container.dragging .viewport-fill,
+.minimap-container.dragging .viewport-border {
+  stroke: #60a5fa;
+  fill: rgba(96, 165, 250, 0.25);
+}
+
+/* Focus state for accessibility */
+.minimap-svg:focus {
+  outline: 2px solid var(--minimap-viewport-stroke);
+  outline-offset: 2px;
+}
+
+.minimap-svg:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Tooltip for interaction hints */
+.minimap-container[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  background: var(--bg-elevated, #1c2128);
+  color: var(--text-primary, #e6edf3);
+  font-size: 11px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+  margin-bottom: 8px;
+}
+
+.minimap-container:hover[data-tooltip]::after {
+  opacity: 1;
+}

frontend/src/components/visualizations/MiniMap.tsx

@@ -0,0 +1,317 @@
+import React, { useRef, useEffect, useMemo, useCallback } from 'react';
+import * as d3 from 'd3';
+import { ModelPoint } from '../../types';
+
+interface MiniMapProps {
+  width: number;
+  height: number;
+  data: ModelPoint[];
+  colorBy: string;
+  // Main plot dimensions
+  mainWidth: number;
+  mainHeight: number;
+  mainMargin: { top: number; right: number; bottom: number; left: number };
+  // Current transform from main plot
+  transform: d3.ZoomTransform;
+  // Callback to update main plot transform
+  onViewportChange?: (transform: d3.ZoomTransform) => void;
+  // Base scales from main plot
+  xScaleBase: d3.ScaleLinear<number, number>;
+  yScaleBase: d3.ScaleLinear<number, number>;
+}
+
+export default function MiniMap({
+  width,
+  height,
+  data,
+  colorBy,
+  mainWidth,
+  mainHeight,
+  mainMargin,
+  transform,
+  onViewportChange,
+  xScaleBase,
+  yScaleBase,
+}: MiniMapProps) {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const isDragging = useRef(false);
+
+  // Sample data for mini-map (show fewer points for performance)
+  const sampledData = useMemo(() => {
+    const maxPoints = 2000;
+    if (data.length <= maxPoints) return data;
+    
+    const step = Math.ceil(data.length / maxPoints);
+    return data.filter((_, i) => i % step === 0);
+  }, [data]);
+
+  // Mini-map scales (fit entire data in mini-map viewport)
+  const { miniXScale, miniYScale, colorScale } = useMemo(() => {
+    if (data.length === 0) {
+      return {
+        miniXScale: d3.scaleLinear(),
+        miniYScale: d3.scaleLinear(),
+        colorScale: () => '#666',
+      };
+    }
+
+    const padding = 8;
+    const xExtent = d3.extent(data, (d) => d.x) as [number, number];
+    const yExtent = d3.extent(data, (d) => d.y) as [number, number];
+
+    const miniXScale = d3
+      .scaleLinear()
+      .domain(xExtent)
+      .range([padding, width - padding]);
+
+    const miniYScale = d3
+      .scaleLinear()
+      .domain(yExtent)
+      .range([height - padding, padding]);
+
+    // Color scale
+    let colorScale: (d: ModelPoint) => string;
+    
+    if (colorBy === 'library_name' || colorBy === 'pipeline_tag') {
+      const categories = Array.from(new Set(data.map((d) => 
+        colorBy === 'library_name' ? (d.library_name || 'unknown') : (d.pipeline_tag || 'unknown')
+      )));
+      const ordinalScale = d3.scaleOrdinal(d3.schemeTableau10).domain(categories);
+      colorScale = (d: ModelPoint) => {
+        const value = colorBy === 'library_name' ? (d.library_name || 'unknown') : (d.pipeline_tag || 'unknown');
+        return ordinalScale(value);
+      };
+    } else {
+      const values = data.map((d) => colorBy === 'downloads' ? d.downloads : d.likes);
+      const extent = d3.extent(values) as [number, number];
+      const logExtent: [number, number] = [Math.log10(extent[0] + 1), Math.log10(extent[1] + 1)];
+      const sequentialScale = d3.scaleSequential(d3.interpolateTurbo).domain(logExtent);
+      
+      colorScale = (d: ModelPoint) => {
+        const val = colorBy === 'downloads' ? d.downloads : d.likes;
+        return sequentialScale(Math.log10(val + 1));
+      };
+    }
+
+    return { miniXScale, miniYScale, colorScale };
+  }, [data, width, height, colorBy]);
+
+  // Calculate viewport rectangle in mini-map coordinates
+  const viewportRect = useMemo(() => {
+    if (!xScaleBase.domain || !yScaleBase.domain) return null;
+
+    const mainPlotWidth = mainWidth - mainMargin.left - mainMargin.right;
+    const mainPlotHeight = mainHeight - mainMargin.top - mainMargin.bottom;
+
+    // Get the visible domain in data coordinates
+    const visibleXDomain = transform.rescaleX(xScaleBase).domain();
+    const visibleYDomain = transform.rescaleY(yScaleBase).domain();
+
+    // Convert to mini-map coordinates
+    const x = miniXScale(visibleXDomain[0]);
+    const y = miniYScale(visibleYDomain[1]); // Note: y is inverted
+    const rectWidth = miniXScale(visibleXDomain[1]) - miniXScale(visibleXDomain[0]);
+    const rectHeight = miniYScale(visibleYDomain[0]) - miniYScale(visibleYDomain[1]);
+
+    return {
+      x: Math.max(0, x),
+      y: Math.max(0, y),
+      width: Math.min(width, rectWidth),
+      height: Math.min(height, rectHeight),
+    };
+  }, [transform, xScaleBase, yScaleBase, miniXScale, miniYScale, mainWidth, mainHeight, mainMargin, width, height]);
+
+  // Handle click on mini-map to pan
+  const handleClick = useCallback((event: React.MouseEvent<SVGSVGElement>) => {
+    if (!onViewportChange || !svgRef.current) return;
+
+    const rect = svgRef.current.getBoundingClientRect();
+    const clickX = event.clientX - rect.left;
+    const clickY = event.clientY - rect.top;
+
+    // Convert click position to data coordinates
+    const dataX = miniXScale.invert(clickX);
+    const dataY = miniYScale.invert(clickY);
+
+    // Calculate new transform to center on clicked point
+    const mainPlotWidth = mainWidth - mainMargin.left - mainMargin.right;
+    const mainPlotHeight = mainHeight - mainMargin.top - mainMargin.bottom;
+
+    // Get center of current viewport in data coordinates
+    const newCenterX = xScaleBase(dataX);
+    const newCenterY = yScaleBase(dataY);
+
+    // Calculate translation to center on this point
+    const newX = mainPlotWidth / 2 - transform.k * newCenterX;
+    const newY = mainPlotHeight / 2 - transform.k * newCenterY;
+
+    const newTransform = d3.zoomIdentity
+      .translate(newX, newY)
+      .scale(transform.k);
+
+    onViewportChange(newTransform);
+  }, [onViewportChange, miniXScale, miniYScale, xScaleBase, yScaleBase, mainWidth, mainHeight, mainMargin, transform.k]);
+
+  // Handle drag on viewport
+  const handleMouseDown = useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+    isDragging.current = true;
+    document.body.style.cursor = 'grabbing';
+  }, []);
+
+  const handleMouseMove = useCallback((event: MouseEvent) => {
+    if (!isDragging.current || !onViewportChange || !svgRef.current) return;
+
+    const rect = svgRef.current.getBoundingClientRect();
+    const mouseX = event.clientX - rect.left;
+    const mouseY = event.clientY - rect.top;
+
+    // Convert mouse position to data coordinates
+    const dataX = miniXScale.invert(mouseX);
+    const dataY = miniYScale.invert(mouseY);
+
+    // Calculate new transform
+    const mainPlotWidth = mainWidth - mainMargin.left - mainMargin.right;
+    const mainPlotHeight = mainHeight - mainMargin.top - mainMargin.bottom;
+
+    const newCenterX = xScaleBase(dataX);
+    const newCenterY = yScaleBase(dataY);
+
+    const newX = mainPlotWidth / 2 - transform.k * newCenterX;
+    const newY = mainPlotHeight / 2 - transform.k * newCenterY;
+
+    const newTransform = d3.zoomIdentity
+      .translate(newX, newY)
+      .scale(transform.k);
+
+    onViewportChange(newTransform);
+  }, [onViewportChange, miniXScale, miniYScale, xScaleBase, yScaleBase, mainWidth, mainHeight, mainMargin, transform.k]);
+
+  const handleMouseUp = useCallback(() => {
+    isDragging.current = false;
+    document.body.style.cursor = '';
+  }, []);
+
+  // Add global mouse event listeners for dragging
+  useEffect(() => {
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [handleMouseMove, handleMouseUp]);
+
+  // Render mini-map
+  useEffect(() => {
+    if (!svgRef.current || sampledData.length === 0) return;
+
+    const svg = d3.select(svgRef.current);
+    
+    // Only update points layer, preserve viewport rect
+    let pointsGroup = svg.select<SVGGElement>('.minimap-points');
+    if (pointsGroup.empty()) {
+      svg.selectAll('*').remove();
+      
+      // Background
+      svg.append('rect')
+        .attr('class', 'minimap-bg')
+        .attr('width', width)
+        .attr('height', height)
+        .attr('fill', 'var(--bg-secondary, #1a1a1a)')
+        .attr('rx', 4);
+
+      // Points group
+      pointsGroup = svg.append('g').attr('class', 'minimap-points');
+    }
+
+    // Draw points
+    pointsGroup
+      .selectAll<SVGCircleElement, ModelPoint>('circle')
+      .data(sampledData, (d) => d.model_id)
+      .join(
+        (enter) => enter
+          .append('circle')
+          .attr('cx', (d) => miniXScale(d.x))
+          .attr('cy', (d) => miniYScale(d.y))
+          .attr('r', 1.5)
+          .attr('fill', (d) => colorScale(d))
+          .attr('opacity', 0.6),
+        (update) => update
+          .attr('cx', (d) => miniXScale(d.x))
+          .attr('cy', (d) => miniYScale(d.y))
+          .attr('fill', (d) => colorScale(d)),
+        (exit) => exit.remove()
+      );
+
+  }, [sampledData, width, height, miniXScale, miniYScale, colorScale]);
+
+  // Update viewport rectangle separately for performance
+  useEffect(() => {
+    if (!svgRef.current || !viewportRect) return;
+
+    const svg = d3.select(svgRef.current);
+    
+    // Remove old viewport
+    svg.selectAll('.viewport-rect, .viewport-border').remove();
+
+    // Viewport fill
+    svg.append('rect')
+      .attr('class', 'viewport-rect')
+      .attr('x', viewportRect.x)
+      .attr('y', viewportRect.y)
+      .attr('width', Math.max(viewportRect.width, 10))
+      .attr('height', Math.max(viewportRect.height, 10))
+      .attr('fill', 'rgba(74, 144, 226, 0.15)')
+      .attr('stroke', 'rgba(74, 144, 226, 0.8)')
+      .attr('stroke-width', 2)
+      .attr('rx', 2)
+      .style('cursor', 'grab')
+      .style('pointer-events', 'all');
+
+    // Corner handles for visual feedback
+    const handleSize = 6;
+    const corners = [
+      { x: viewportRect.x, y: viewportRect.y },
+      { x: viewportRect.x + viewportRect.width, y: viewportRect.y },
+      { x: viewportRect.x, y: viewportRect.y + viewportRect.height },
+      { x: viewportRect.x + viewportRect.width, y: viewportRect.y + viewportRect.height },
+    ];
+
+    svg.selectAll('.viewport-handle')
+      .data(corners)
+      .join('rect')
+      .attr('class', 'viewport-handle')
+      .attr('x', (d) => d.x - handleSize / 2)
+      .attr('y', (d) => d.y - handleSize / 2)
+      .attr('width', handleSize)
+      .attr('height', handleSize)
+      .attr('fill', 'rgba(74, 144, 226, 1)')
+      .attr('rx', 1);
+
+  }, [viewportRect]);
+
+  if (data.length === 0) return null;
+
+  return (
+    <div className="minimap-container">
+      <div className="minimap-header">
+        <span className="minimap-title">Overview Map</span>
+        <span className="minimap-hint">Click to navigate</span>
+      </div>
+      <svg
+        ref={svgRef}
+        width={width}
+        height={height}
+        className="minimap-svg"
+        onClick={handleClick}
+        onMouseDown={handleMouseDown}
+      />
+      <div className="minimap-stats">
+        <span>Zoom: {transform.k.toFixed(1)}x</span>
+      </div>
+    </div>
+  );
+}
+

frontend/src/components/visualizations/MiniMap3D.tsx

@@ -0,0 +1,342 @@
+import React, { useMemo } from 'react';
+import { Canvas, useThree, useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { ModelPoint } from '../../types';
+import { getCategoricalColorMap, getContinuousColorScale, getDepthColorScale } from '../../utils/rendering/colors';
+
+interface MiniMap3DProps {
+  width?: number;
+  height?: number;
+  data: ModelPoint[];
+  colorBy: string;
+  cameraPosition: [number, number, number];
+  cameraTarget: [number, number, number];
+  onNavigate?: (position: [number, number, number], target: [number, number, number]) => void;
+}
+
+// Mini-map point cloud component
+function MiniMapPoints({ 
+  data, 
+  colorBy 
+}: { 
+  data: ModelPoint[]; 
+  colorBy: string;
+}) {
+  const { positions, colors } = useMemo(() => {
+    // Sample for performance (max 1000 points for mini-map)
+    const MAX_POINTS = 1000;
+    const step = Math.ceil(data.length / MAX_POINTS);
+    const sampled: ModelPoint[] = [];
+    
+    for (let i = 0; i < data.length && sampled.length < MAX_POINTS; i += step) {
+      sampled.push(data[i]);
+    }
+    
+    const count = sampled.length;
+    const positions = new Float32Array(count * 3);
+    const colors = new Float32Array(count * 3);
+    
+    // Calculate color scale
+    let colorScale: any;
+    
+    if (colorBy === 'library_name' || colorBy === 'pipeline_tag') {
+      const categories = Array.from(new Set(sampled.map((d) => 
+        colorBy === 'library_name' ? (d.library_name || 'unknown') : (d.pipeline_tag || 'unknown')
+      )));
+      const colorSchemeType = colorBy === 'library_name' ? 'library' : 'pipeline';
+      colorScale = getCategoricalColorMap(categories, colorSchemeType);
+    } else if (colorBy === 'downloads' || colorBy === 'likes') {
+      const values = sampled.map((d) => colorBy === 'downloads' ? d.downloads : d.likes);
+      if (values.length > 0) {
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        colorScale = getContinuousColorScale(min, max, 'viridis', true);
+      }
+    } else if (colorBy === 'family_depth') {
+      const depths = sampled.map((d) => d.family_depth ?? 0);
+      if (depths.length > 0) {
+        const maxDepth = Math.max(...depths, 1);
+        colorScale = getDepthColorScale(maxDepth, true);
+      }
+    }
+    
+    sampled.forEach((model, idx) => {
+      positions[idx * 3] = model.x;
+      positions[idx * 3 + 1] = model.y;
+      positions[idx * 3 + 2] = model.z;
+      
+      let colorHex = '#60a5fa';
+      
+      if (colorBy === 'library_name' || colorBy === 'pipeline_tag') {
+        const value = colorBy === 'library_name' 
+          ? (model.library_name || 'unknown') 
+          : (model.pipeline_tag || 'unknown');
+        colorHex = colorScale instanceof Map ? colorScale.get(value) || '#60a5fa' : '#60a5fa';
+      } else if (colorBy === 'downloads' || colorBy === 'likes') {
+        const val = colorBy === 'downloads' ? model.downloads : model.likes;
+        colorHex = typeof colorScale === 'function' ? colorScale(val) : '#60a5fa';
+      } else if (colorBy === 'family_depth') {
+        if (typeof colorScale === 'function') {
+          colorHex = colorScale(model.family_depth ?? 0);
+        }
+      }
+      
+      const color = new THREE.Color(colorHex);
+      colors[idx * 3] = color.r;
+      colors[idx * 3 + 1] = color.g;
+      colors[idx * 3 + 2] = color.b;
+    });
+    
+    return { positions, colors };
+  }, [data, colorBy]);
+  
+  return (
+    <points>
+      <bufferGeometry>
+        <bufferAttribute
+          attach="attributes-position"
+          count={positions.length / 3}
+          array={positions}
+          itemSize={3}
+        />
+        <bufferAttribute
+          attach="attributes-color"
+          count={colors.length / 3}
+          array={colors}
+          itemSize={3}
+        />
+      </bufferGeometry>
+      <pointsMaterial
+        size={0.2}
+        vertexColors
+        transparent
+        opacity={0.7}
+        sizeAttenuation={false}
+      />
+    </points>
+  );
+}
+
+// Camera indicator showing viewing direction
+function CameraIndicator({ 
+  position, 
+  target 
+}: { 
+  position: [number, number, number]; 
+  target: [number, number, number];
+}) {
+  // Calculate look direction
+  const lookDir = useMemo(() => {
+    const dir = new THREE.Vector3(
+      target[0] - position[0],
+      target[1] - position[1],
+      target[2] - position[2]
+    ).normalize();
+    return dir;
+  }, [position, target]);
+  
+  // Create frustum vertices
+  const frustumGeometry = useMemo(() => {
+    const geometry = new THREE.BufferGeometry();
+    
+    const apex = new THREE.Vector3(...position);
+    const forward = lookDir.clone().multiplyScalar(3);
+    const right = new THREE.Vector3().crossVectors(lookDir, new THREE.Vector3(0, 1, 0)).normalize();
+    const up = new THREE.Vector3().crossVectors(right, lookDir).normalize();
+    
+    const baseCenter = apex.clone().add(forward);
+    const halfWidth = 1.5;
+    const halfHeight = 1;
+    
+    const corners = [
+      baseCenter.clone().add(right.clone().multiplyScalar(halfWidth)).add(up.clone().multiplyScalar(halfHeight)),
+      baseCenter.clone().add(right.clone().multiplyScalar(-halfWidth)).add(up.clone().multiplyScalar(halfHeight)),
+      baseCenter.clone().add(right.clone().multiplyScalar(-halfWidth)).add(up.clone().multiplyScalar(-halfHeight)),
+      baseCenter.clone().add(right.clone().multiplyScalar(halfWidth)).add(up.clone().multiplyScalar(-halfHeight)),
+    ];
+    
+    const vertices = new Float32Array([
+      apex.x, apex.y, apex.z, corners[0].x, corners[0].y, corners[0].z,
+      apex.x, apex.y, apex.z, corners[1].x, corners[1].y, corners[1].z,
+      apex.x, apex.y, apex.z, corners[2].x, corners[2].y, corners[2].z,
+      apex.x, apex.y, apex.z, corners[3].x, corners[3].y, corners[3].z,
+      corners[0].x, corners[0].y, corners[0].z, corners[1].x, corners[1].y, corners[1].z,
+      corners[1].x, corners[1].y, corners[1].z, corners[2].x, corners[2].y, corners[2].z,
+      corners[2].x, corners[2].y, corners[2].z, corners[3].x, corners[3].y, corners[3].z,
+      corners[3].x, corners[3].y, corners[3].z, corners[0].x, corners[0].y, corners[0].z,
+    ]);
+    
+    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+    return geometry;
+  }, [position, lookDir]);
+  
+  return (
+    <group>
+      {/* Camera position sphere */}
+      <mesh position={position}>
+        <sphereGeometry args={[0.4, 16, 16]} />
+        <meshBasicMaterial color="#f97316" />
+      </mesh>
+      
+      {/* Target indicator */}
+      <mesh position={target}>
+        <sphereGeometry args={[0.2, 8, 8]} />
+        <meshBasicMaterial color="#22d3ee" />
+      </mesh>
+      
+      {/* Line from camera to target */}
+      <line>
+        <bufferGeometry>
+          <bufferAttribute
+            attach="attributes-position"
+            count={2}
+            array={new Float32Array([...position, ...target])}
+            itemSize={3}
+          />
+        </bufferGeometry>
+        <lineBasicMaterial color="#f97316" opacity={0.7} transparent />
+      </line>
+      
+      {/* Viewing frustum */}
+      <lineSegments geometry={frustumGeometry}>
+        <lineBasicMaterial color="#f97316" opacity={0.5} transparent />
+      </lineSegments>
+    </group>
+  );
+}
+
+// Axis helper for orientation
+function AxisHelper() {
+  return (
+    <group>
+      {/* X axis - red */}
+      <line>
+        <bufferGeometry>
+          <bufferAttribute
+            attach="attributes-position"
+            count={2}
+            array={new Float32Array([-20, 0, 0, 20, 0, 0])}
+            itemSize={3}
+          />
+        </bufferGeometry>
+        <lineBasicMaterial color="#ef4444" opacity={0.3} transparent />
+      </line>
+      
+      {/* Y axis - green */}
+      <line>
+        <bufferGeometry>
+          <bufferAttribute
+            attach="attributes-position"
+            count={2}
+            array={new Float32Array([0, -20, 0, 0, 20, 0])}
+            itemSize={3}
+          />
+        </bufferGeometry>
+        <lineBasicMaterial color="#22c55e" opacity={0.3} transparent />
+      </line>
+      
+      {/* Z axis - blue */}
+      <line>
+        <bufferGeometry>
+          <bufferAttribute
+            attach="attributes-position"
+            count={2}
+            array={new Float32Array([0, 0, -20, 0, 0, 20])}
+            itemSize={3}
+          />
+        </bufferGeometry>
+        <lineBasicMaterial color="#3b82f6" opacity={0.3} transparent />
+      </line>
+    </group>
+  );
+}
+
+// Mini-map camera synced with main view camera
+function SyncedMiniMapCamera({ 
+  mainCameraPosition, 
+  mainCameraTarget 
+}: { 
+  mainCameraPosition: [number, number, number];
+  mainCameraTarget: [number, number, number];
+}) {
+  const { camera } = useThree();
+  
+  useFrame(() => {
+    // Calculate direction from main camera
+    const dir = new THREE.Vector3(
+      mainCameraPosition[0] - mainCameraTarget[0],
+      mainCameraPosition[1] - mainCameraTarget[1],
+      mainCameraPosition[2] - mainCameraTarget[2]
+    );
+    
+    // Scale the distance for the mini-map (fixed overview distance)
+    const distance = 30;
+    dir.normalize().multiplyScalar(distance);
+    
+    // Position mini-map camera in same direction but at fixed distance
+    camera.position.set(
+      mainCameraTarget[0] + dir.x,
+      mainCameraTarget[1] + dir.y,
+      mainCameraTarget[2] + dir.z
+    );
+    camera.lookAt(mainCameraTarget[0], mainCameraTarget[1], mainCameraTarget[2]);
+    camera.updateProjectionMatrix();
+  });
+  
+  return null;
+}
+
+export default function MiniMap3D({
+  width = 180,
+  height = 140,
+  data,
+  colorBy,
+  cameraPosition,
+  cameraTarget,
+}: MiniMap3DProps) {
+  
+  if (data.length === 0) return null;
+  
+  // Calculate canvas height (subtract header height only)
+  const headerHeight = 24;
+  const canvasHeight = height - headerHeight;
+  
+  return (
+    <div className="minimap-container minimap-3d" title="3D overview showing your current camera position (orange) and viewing direction in the model space">
+      <div className="minimap-header">
+        <span className="minimap-title">VIEWPORT</span>
+      </div>
+      <Canvas
+        style={{ width, height: canvasHeight }}
+        camera={{ 
+          position: [20, 15, 20], 
+          fov: 50,
+          near: 0.1,
+          far: 1000
+        }}
+        dpr={[1, 1.5]}
+        gl={{ antialias: true, alpha: true }}
+      >
+        <color attach="background" args={['#0d1117']} />
+        
+        {/* Ambient light */}
+        <ambientLight intensity={0.6} />
+        
+        {/* Point cloud */}
+        <MiniMapPoints data={data} colorBy={colorBy} />
+        
+        {/* Camera indicator showing user's current view */}
+        <CameraIndicator position={cameraPosition} target={cameraTarget} />
+        
+        {/* Axis helper for orientation */}
+        <AxisHelper />
+        
+        {/* Mini-map camera synced with main view direction */}
+        <SyncedMiniMapCamera 
+          mainCameraPosition={cameraPosition} 
+          mainCameraTarget={cameraTarget} 
+        />
+      </Canvas>
+    </div>
+  );
+}

frontend/src/components/visualizations/NetworkGraph.tsx

@@ -193,7 +193,6 @@ export default function NetworkGraph({
         setLinks(e.data.result.links);
         setIsCalculating(false);
       } else if (e.data.type === 'error') {
-        console.error('Worker error:', e.data.error);
         setIsCalculating(false);
       }
     };

frontend/src/components/visualizations/ScatterPlot.css

@@ -2,11 +2,22 @@
 
 .scatter-plot-container {
   position: relative;
-  font-family: system-ui, -apple-system, sans-serif;
+  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  overflow: visible;
 }
 
 .scatter-plot-svg {
   display: block;
+  background: var(--bg-tertiary, #1a1a1a);
+}
+
+/* Dark theme support */
+[data-theme="dark"] .scatter-plot-svg {
+  background: #0a0a0a;
+}
+
+[data-theme="light"] .scatter-plot-svg,
+:root:not([data-theme="dark"]) .scatter-plot-svg {
   background: #fafafa;
 }
 

frontend/src/components/visualizations/ScatterPlot.tsx

@@ -1,7 +1,9 @@
 import React, { useMemo, useRef, useEffect, useState, useCallback } from 'react';
 import * as d3 from 'd3';
 import { ModelPoint } from '../../types';
+import MiniMap from './MiniMap';
 import './ScatterPlot.css';
+import './MiniMap.css';
 
 interface ScatterPlotProps {
   width: number;
@@ -36,8 +38,8 @@ export default function ScatterPlot({
 
   // Performance-optimized sampling with Level of Detail (LOD)
   const sampledData = useMemo(() => {
-    // Reduced render limit for better performance (was 25000)
-    const renderLimit = 10000;
+    // Increased render limit to support full dataset (using Canvas for performance)
+    const renderLimit = 150000;
     
     // LOD: Reduce further when zoomed out
     const lodFactor = transform.k < 1 ? 0.5 : 1; // Show 50% when zoomed out
@@ -156,6 +158,17 @@ export default function ScatterPlot({
     }
   }, []);
 
+  // Handler for mini-map viewport changes
+  const handleMiniMapViewportChange = useCallback((newTransform: d3.ZoomTransform) => {
+    if (svgRef.current && zoomRef.current) {
+      d3.select(svgRef.current)
+        .transition()
+        .duration(300)
+        .ease(d3.easeCubicOut)
+        .call(zoomRef.current.transform as any, newTransform);
+    }
+  }, []);
+
   // Debounced tooltip update
   const showTooltip = useCallback((d: ModelPoint, x: number, y: number) => {
     if (!gRef.current) return;
@@ -177,7 +190,7 @@ export default function ScatterPlot({
       { text: d.model_id.length > 35 ? d.model_id.substring(0, 35) + '...' : d.model_id, bold: true },
       { text: `Library: ${d.library_name || 'N/A'}` },
       { text: `Pipeline: ${d.pipeline_tag || 'N/A'}` },
-      { text: `↓ ${d.downloads.toLocaleString()} | ♥ ${d.likes.toLocaleString()}` },
+      { text: `Downloads: ${d.downloads.toLocaleString()} | Likes: ${d.likes.toLocaleString()}` },
       { text: 'Click for details', small: true }
     ];
 
@@ -553,6 +566,21 @@ export default function ScatterPlot({
           Showing {sampledData.length.toLocaleString()} of {data.length.toLocaleString()} points
         </div>
       )}
+      
+      {/* Mini-map / Overview Map */}
+      <MiniMap
+        width={180}
+        height={140}
+        data={data}
+        colorBy={colorBy}
+        mainWidth={width}
+        mainHeight={height}
+        mainMargin={margin}
+        transform={transform}
+        onViewportChange={handleMiniMapViewportChange}
+        xScaleBase={xScaleBase}
+        yScaleBase={yScaleBase}
+      />
     </div>
   );
 }

frontend/src/components/visualizations/ScatterPlot3D.css

@@ -0,0 +1,24 @@
+.scatter-3d-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: visible;
+}
+
+.scatter-3d-empty {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.1rem;
+}
+
+.scatter-3d-empty.dark {
+  color: #888;
+}
+
+.scatter-3d-empty.light {
+  color: #666;
+}
+

frontend/src/components/visualizations/ScatterPlot3D.tsx

@@ -1,272 +1,256 @@
-import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react';
-import { Canvas, useFrame, useThree } from '@react-three/fiber';
-import { OrbitControls, PerspectiveCamera } from '@react-three/drei';
+import React, { useMemo, useRef, useState, useEffect, useCallback } from 'react';
+import { Canvas, useThree, useFrame } from '@react-three/fiber';
+import { OrbitControls } from '@react-three/drei';
 import * as THREE from 'three';
 import { ModelPoint } from '../../types';
-import { createSpatialIndex } from '../../utils/rendering/spatialIndex';
-import { adaptiveSampleByDistance } from '../../utils/rendering/frustumCulling';
-
-// WebGL context loss recovery
-const handleWebGLContextLoss = (event: Event) => {
-  event.preventDefault();
-  // Context will be restored automatically by the browser
-};
-
-const handleWebGLContextRestored = () => {
-  // Context restored - component will re-render automatically
-  console.info('WebGL context restored');
-};
+import { getCategoricalColorMap, getContinuousColorScale, getDepthColorScale } from '../../utils/rendering/colors';
+import MiniMap3D from './MiniMap3D';
+import './ScatterPlot3D.css';
+import './MiniMap.css';
 
 interface ScatterPlot3DProps {
   data: ModelPoint[];
   colorBy: string;
   sizeBy: string;
+  colorScheme?: string;
   onPointClick?: (model: ModelPoint) => void;
   hoveredModel?: ModelPoint | null;
   onHover?: (model: ModelPoint | null, position?: { x: number; y: number }) => void;
 }
 
-function getModelColor(model: ModelPoint, colorBy: string, colorScale: any): string {
-  if (colorBy === 'library_name' || colorBy === 'pipeline_tag') {
-    const value = colorBy === 'library_name' 
-      ? (model.library_name || 'unknown') 
-      : (model.pipeline_tag || 'unknown');
-    return colorScale.get(value) || '#999999';
-  } else {
-    const val = colorBy === 'downloads' ? model.downloads : model.likes;
-    const logVal = Math.log10(val + 1);
-    return colorScale(logVal);
-  }
-}
-
-function getPointSize(model: ModelPoint, sizeBy: string): number {
-  if (sizeBy === 'none') return 0.02;
-  const val = sizeBy === 'downloads' ? model.downloads : model.likes;
-  const logVal = Math.log10(val + 1);
-  return 0.01 + (logVal / 7) * 0.04;
-}
-
-function Points({ 
+function ColoredPoints({ 
   data, 
   colorBy, 
   sizeBy, 
-  onPointClick, 
-  onHover
-}: ScatterPlot3DProps) {
-  const meshRef = useRef<THREE.InstancedMesh>(null);
-  const [hovered, setHovered] = useState<number | null>(null);
-  const { camera, size } = useThree();
-  const [visiblePoints, setVisiblePoints] = useState<ModelPoint[]>(data);
-  const frameCount = useRef(0);
+  colorScheme = 'viridis',
+  onPointClick,
+  isDarkMode = true
+}: ScatterPlot3DProps & { isDarkMode?: boolean }) {
+  const pointsRef = useRef<THREE.Points>(null);
+  const modelLookupRef = useRef<ModelPoint[]>([]);
+  const { raycaster, camera, gl } = useThree();
+
+  // Sample and prepare data
+  const geometryData = useMemo(() => {
+    // Increased limit to support full dataset (150k models)
+    const MAX_POINTS = 150000;
+    const step = data.length > MAX_POINTS ? Math.ceil(data.length / MAX_POINTS) : 1;
+    const sampled: ModelPoint[] = [];
+    
+    for (let i = 0; i < data.length && sampled.length < MAX_POINTS; i += step) {
+      sampled.push(data[i]);
+    }
 
-  const colorScale = useMemo(() => {
+    const count = sampled.length;
+    const positions = new Float32Array(count * 3);
+    const colors = new Float32Array(count * 3);
+    const sizes = new Float32Array(count);
+    
+    // Calculate color scale
+    let colorScale: any = () => '#4a90e2';
+    
     if (colorBy === 'library_name' || colorBy === 'pipeline_tag') {
-      const categories = new Set(data.map((d) => 
+      const categories = Array.from(new Set(sampled.map((d) => 
         colorBy === 'library_name' ? (d.library_name || 'unknown') : (d.pipeline_tag || 'unknown')
-      ));
-      const colors = [
-        '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd',
-        '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'
-      ];
-      const scale = new Map();
-      Array.from(categories).forEach((cat, i) => {
-        scale.set(cat, colors[i % colors.length]);
-      });
-      return scale;
-    } else {
-      return (logVal: number) => {
-        const t = Math.min(Math.max(logVal / 7, 0), 1);
-        if (t < 0.5) {
-          const tt = t * 2;
-          return `rgb(${Math.floor(tt * 255)}, ${Math.floor(tt * 255)}, ${Math.floor((1 - tt) * 255)})`;
+      )));
+      const colorSchemeType = colorBy === 'library_name' ? 'library' : 'pipeline';
+      colorScale = getCategoricalColorMap(categories, colorSchemeType);
+    } else if (colorBy === 'downloads' || colorBy === 'likes') {
+      const values = sampled.map((d) => colorBy === 'downloads' ? d.downloads : d.likes);
+      if (values.length > 0) {
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        colorScale = getContinuousColorScale(min, max, colorScheme as any, true);
+      }
+    } else if (colorBy === 'family_depth') {
+      const depths = sampled.map((d) => d.family_depth ?? 0);
+      if (depths.length > 0) {
+        const maxDepth = Math.max(...depths, 1);
+        const uniqueDepths = new Set(depths);
+        
+        if (uniqueDepths.size <= 2 && maxDepth === 0) {
+          const categories = Array.from(new Set(sampled.map((d) => d.library_name || 'unknown')));
+          colorScale = getCategoricalColorMap(categories, 'library');
         } else {
-          const tt = (t - 0.5) * 2;
-          return `rgb(${Math.floor(255)}, ${Math.floor((1 - tt) * 255)}, 0)`;
+          colorScale = getDepthColorScale(maxDepth, isDarkMode);
         }
-      };
+      }
     }
-  }, [data, colorBy]);
-
-  const { positions, colors, sizes, models } = useMemo(() => {
-    const positions: number[] = [];
-    const colors: number[] = [];
-    const sizes: number[] = [];
-    const models: ModelPoint[] = [];
-
-    visiblePoints.forEach((model) => {
-      positions.push(model.x, model.y, model.z);
+    
+    // Fill arrays
+    sampled.forEach((model, idx) => {
+      positions[idx * 3] = model.x;
+      positions[idx * 3 + 1] = model.y;
+      positions[idx * 3 + 2] = model.z;
       
-      const color = getModelColor(model, colorBy, colorScale);
-      const threeColor = new THREE.Color(color);
-      colors.push(threeColor.r, threeColor.g, threeColor.b);
+      let colorHex: string;
+      if (colorBy === 'library_name' || colorBy === 'pipeline_tag') {
+        const value = colorBy === 'library_name' 
+          ? (model.library_name || 'unknown') 
+          : (model.pipeline_tag || 'unknown');
+        colorHex = colorScale instanceof Map ? colorScale.get(value) || '#4a90e2' : '#4a90e2';
+      } else if (colorBy === 'downloads' || colorBy === 'likes') {
+        const val = colorBy === 'downloads' ? model.downloads : model.likes;
+        colorHex = typeof colorScale === 'function' ? colorScale(val) : '#4a90e2';
+      } else if (colorBy === 'family_depth') {
+        if (colorScale instanceof Map) {
+          const value = model.library_name || 'unknown';
+          colorHex = colorScale.get(value) || '#4a90e2';
+        } else if (typeof colorScale === 'function') {
+          colorHex = colorScale(model.family_depth ?? 0);
+        } else {
+          colorHex = '#4a90e2';
+        }
+      } else {
+        colorHex = '#4a90e2';
+      }
       
-      const size = getPointSize(model, sizeBy);
-      sizes.push(size);
+      const color = new THREE.Color(colorHex);
       
-      models.push(model);
-    });
-
-    return { positions, colors, sizes, models };
-  }, [visiblePoints, colorBy, sizeBy, colorScale]);
-
-  useEffect(() => {
-    if (!meshRef.current || positions.length === 0) return;
-
-    const tempObject = new THREE.Object3D();
-    const tempColor = new THREE.Color();
-    const count = Math.floor(positions.length / 3);
-
-    for (let i = 0; i < count; i++) {
-      tempObject.position.set(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]);
-      tempObject.scale.setScalar(sizes[i]);
-      tempObject.updateMatrix();
-      meshRef.current.setMatrixAt(i, tempObject.matrix);
+      // Preserve original vibrant colors - no washing out
+      // The colors from our color utility are already optimized for dark mode
       
-      tempColor.setRGB(colors[i * 3], colors[i * 3 + 1], colors[i * 3 + 2]);
-      meshRef.current.setColorAt(i, tempColor);
-    }
-
-    meshRef.current.count = count;
-    meshRef.current.instanceMatrix.needsUpdate = true;
-    if (meshRef.current.instanceColor) {
-      meshRef.current.instanceColor.needsUpdate = true;
-    }
-  }, [positions, colors, sizes]);
-
-  useEffect(() => {
-    if (!meshRef.current || positions.length === 0) return;
-
-    const tempObject = new THREE.Object3D();
-    const count = Math.floor(positions.length / 3);
-    
-    for (let i = 0; i < count; i++) {
-      const scale = i === hovered ? sizes[i] * 2 : sizes[i];
-      tempObject.position.set(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]);
-      tempObject.scale.setScalar(scale);
-      tempObject.updateMatrix();
-      meshRef.current.setMatrixAt(i, tempObject.matrix);
-    }
-
-    meshRef.current.instanceMatrix.needsUpdate = true;
-  }, [hovered, positions, sizes]);
-
-  useFrame(() => {
-    frameCount.current++;
-    if (frameCount.current % 10 !== 0) return;
-    
-    try {
-      const sampled = adaptiveSampleByDistance(
-        data,
-        camera as THREE.Camera,
-        1.0,
-        50
-      );
+      colors[idx * 3] = color.r;
+      colors[idx * 3 + 1] = color.g;
+      colors[idx * 3 + 2] = color.b;
       
-      // Reduced from 100000 to prevent WebGL context loss
-      const MAX_RENDER_POINTS = 50000;
-      if (sampled.length > MAX_RENDER_POINTS) {
-        const step = Math.ceil(sampled.length / MAX_RENDER_POINTS);
-        const finalSampled: ModelPoint[] = [];
-        for (let i = 0; i < sampled.length; i += step) {
-          finalSampled.push(sampled[i]);
-        }
-        setVisiblePoints(finalSampled);
+      // Calculate size
+      const baseSize = sizeBy === 'none' ? 8 : 6;
+      if (sizeBy === 'downloads' || sizeBy === 'likes') {
+        const val = sizeBy === 'downloads' ? model.downloads : model.likes;
+        const logVal = Math.log10(val + 1);
+        sizes[idx] = baseSize + (logVal / 7) * 12;
       } else {
-        setVisiblePoints(sampled);
-      }
-    } catch (error) {
-      // Silently handle WebGL errors to prevent console spam
-      if (error instanceof Error && error.message.includes('WebGL')) {
-        return;
+        sizes[idx] = baseSize;
       }
-      throw error;
-    }
-  });
-
-  const handlePointerMove = useCallback((event: any) => {
-    event.stopPropagation();
-    const instanceId = event.instanceId;
+    });
     
-    if (instanceId !== undefined && instanceId !== hovered) {
-      setHovered(instanceId);
-      
-      if (onHover && instanceId < models.length) {
-        const model = models[instanceId];
-        const vector = new THREE.Vector3(
-          positions[instanceId * 3],
-          positions[instanceId * 3 + 1],
-          positions[instanceId * 3 + 2]
-        );
-        vector.project(camera as THREE.Camera);
-        
-        const x = (vector.x * 0.5 + 0.5) * size.width;
-        const y = (-vector.y * 0.5 + 0.5) * size.height;
-        
-        onHover(model, { x, y });
-      }
-    }
-  }, [hovered, onHover, models, positions, camera, size]);
-
-  const handlePointerOut = useCallback(() => {
-    setHovered(null);
-    if (onHover) {
-      onHover(null);
-    }
-  }, [onHover]);
+    modelLookupRef.current = sampled;
+    return { positions, colors, sizes, count };
+  }, [data, colorBy, sizeBy, colorScheme, isDarkMode]);
+
+  // Create geometry
+  const geometry = useMemo(() => {
+    const geo = new THREE.BufferGeometry();
+    geo.setAttribute('position', new THREE.BufferAttribute(geometryData.positions, 3));
+    geo.setAttribute('color', new THREE.BufferAttribute(geometryData.colors, 3));
+    geo.setAttribute('size', new THREE.BufferAttribute(geometryData.sizes, 1));
+    return geo;
+  }, [geometryData]);
+
+  // Create material
+  const material = useMemo(() => {
+    return new THREE.PointsMaterial({
+      size: 0.15,
+      vertexColors: true,
+      sizeAttenuation: true,
+      transparent: true,
+      opacity: 0.9,
+    });
+  }, []);
 
-  const handleClick = useCallback((event: any) => {
-    event.stopPropagation();
-    const instanceId = event.instanceId;
+  // Handle click
+  const handleClick = (event: any) => {
+    if (!onPointClick || !pointsRef.current) return;
     
-    if (onPointClick && instanceId !== undefined && instanceId < models.length) {
-      onPointClick(models[instanceId]);
+    // Get mouse position
+    const rect = gl.domElement.getBoundingClientRect();
+    const mouse = new THREE.Vector2(
+      ((event.clientX - rect.left) / rect.width) * 2 - 1,
+      -((event.clientY - rect.top) / rect.height) * 2 + 1
+    );
+    
+    raycaster.setFromCamera(mouse, camera);
+    raycaster.params.Points = { threshold: 0.5 };
+    
+    const intersects = raycaster.intersectObject(pointsRef.current);
+    if (intersects.length > 0 && intersects[0].index !== undefined) {
+      const idx = intersects[0].index;
+      if (idx < modelLookupRef.current.length) {
+        onPointClick(modelLookupRef.current[idx]);
+      }
     }
-  }, [onPointClick, models]);
+  };
 
-  if (visiblePoints.length === 0) return null;
+  if (geometryData.count === 0) return null;
 
-  // Reduced max instances to prevent WebGL context loss
-  const maxInstances = Math.min(50000, Math.max(visiblePoints.length, 1000));
-  
   return (
-    <instancedMesh
-      ref={meshRef}
-      args={[undefined, undefined, maxInstances]}
-      frustumCulled={true}
-      onPointerMove={handlePointerMove}
-      onPointerOut={handlePointerOut}
+    <points 
+      ref={pointsRef}
+      geometry={geometry}
+      material={material}
       onClick={handleClick}
-    >
-      <sphereGeometry args={[1, 8, 8]} />
-      <meshBasicMaterial vertexColors />
-    </instancedMesh>
+      frustumCulled={false}
+    />
   );
 }
 
-export default function ScatterPlot3D(props: ScatterPlot3DProps) {
-  const { data } = props;
-  const canvasRef = useRef<HTMLDivElement>(null);
+// Camera tracking component for mini-map
+function CameraTracker({ 
+  onCameraUpdate 
+}: { 
+  onCameraUpdate: (position: [number, number, number], target: [number, number, number]) => void 
+}) {
+  const { camera, controls } = useThree();
+  
+  useFrame(() => {
+    if (camera && controls) {
+      const orbitControls = controls as any;
+      const position: [number, number, number] = [camera.position.x, camera.position.y, camera.position.z];
+      const target: [number, number, number] = orbitControls.target 
+        ? [orbitControls.target.x, orbitControls.target.y, orbitControls.target.z]
+        : [0, 0, 0];
+      onCameraUpdate(position, target);
+    }
+  });
+  
+  return null;
+}
 
-  useMemo(() => {
-    if (data.length > 0) {
-      createSpatialIndex(data);
+export default function ScatterPlot3D(props: ScatterPlot3DProps) {
+  const { data, colorBy } = props;
+  
+  const [canvasBg, setCanvasBg] = useState(() => {
+    const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+    return isDark ? '#0a0a0a' : '#ffffff';
+  });
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    return document.documentElement.getAttribute('data-theme') === 'dark';
+  });
+  
+  // Camera state for mini-map
+  const [cameraPosition, setCameraPosition] = useState<[number, number, number]>([0, 0, 10]);
+  const [cameraTarget, setCameraTarget] = useState<[number, number, number]>([0, 0, 0]);
+  
+  // Throttle camera updates
+  const lastUpdateRef = useRef<number>(0);
+  const handleCameraUpdate = useCallback((position: [number, number, number], target: [number, number, number]) => {
+    const now = Date.now();
+    if (now - lastUpdateRef.current > 100) { // Update every 100ms
+      setCameraPosition(position);
+      setCameraTarget(target);
+      lastUpdateRef.current = now;
     }
-  }, [data]);
+  }, []);
 
-  // Add WebGL context loss handlers
   useEffect(() => {
-    const canvas = canvasRef.current?.querySelector('canvas');
-    if (canvas) {
-      canvas.addEventListener('webglcontextlost', handleWebGLContextLoss);
-      canvas.addEventListener('webglcontextrestored', handleWebGLContextRestored);
-      
-      return () => {
-        canvas.removeEventListener('webglcontextlost', handleWebGLContextLoss);
-        canvas.removeEventListener('webglcontextrestored', handleWebGLContextRestored);
-      };
-    }
+    const updateBg = () => {
+      const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+      setCanvasBg(isDark ? '#0a0a0a' : '#ffffff');
+      setIsDarkMode(isDark);
+    };
+    
+    updateBg();
+    const observer = new MutationObserver(updateBg);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme']
+    });
+    
+    return () => observer.disconnect();
   }, []);
 
+  // Simple bounds calculation
   const bounds = useMemo(() => {
     if (data.length === 0) {
       return { center: [0, 0, 0] as [number, number, number], radius: 10 };
@@ -276,78 +260,96 @@ export default function ScatterPlot3D(props: ScatterPlot3DProps) {
     let minY = Infinity, maxY = -Infinity;
     let minZ = Infinity, maxZ = -Infinity;
 
-    data.forEach((d) => {
-      minX = Math.min(minX, d.x);
-      maxX = Math.max(maxX, d.x);
-      minY = Math.min(minY, d.y);
-      maxY = Math.max(maxY, d.y);
-      minZ = Math.min(minZ, d.z);
-      maxZ = Math.max(maxZ, d.z);
-    });
+    const step = Math.max(1, Math.floor(data.length / 1000));
+    for (let i = 0; i < data.length; i += step) {
+      const d = data[i];
+      if (isFinite(d.x) && isFinite(d.y) && isFinite(d.z)) {
+        minX = Math.min(minX, d.x);
+        maxX = Math.max(maxX, d.x);
+        minY = Math.min(minY, d.y);
+        maxY = Math.max(maxY, d.y);
+        minZ = Math.min(minZ, d.z);
+        maxZ = Math.max(maxZ, d.z);
+      }
+    }
+
+    if (!isFinite(minX)) {
+      return { center: [0, 0, 0] as [number, number, number], radius: 10 };
+    }
 
     const center: [number, number, number] = [
       (minX + maxX) / 2,
       (minY + maxY) / 2,
-      (minZ + maxZ) / 2,
+      (minZ + maxZ) / 2
     ];
-
-    const radius = Math.max(
-      maxX - minX,
-      maxY - minY,
-      maxZ - minZ
-    ) / 2;
+    const size = Math.max(maxX - minX, maxY - minY, maxZ - minZ);
+    const radius = Math.max(size / 2, 1);
 
     return { center, radius };
   }, [data]);
 
+  if (data.length === 0) {
+    return (
+      <div className={`scatter-3d-empty ${isDarkMode ? 'dark' : 'light'}`}>
+        No data to display
+      </div>
+    );
+  }
+
   return (
-    <div ref={canvasRef} style={{ width: '100%', height: '100%', background: 'var(--background-color)' }}>
+    <div className="scatter-3d-container">
       <Canvas
-        key="scatter-3d-canvas"
-        gl={{ 
-          antialias: false,
+        dpr={[1, 1.5]}
+        gl={{
+          antialias: true,
+          alpha: false,
           powerPreference: 'high-performance',
           preserveDrawingBuffer: false,
           failIfMajorPerformanceCaveat: false,
         }}
-        performance={{ min: 0.5 }}
         onCreated={({ gl }) => {
-          // Suppress WebGL context loss errors
-          gl.domElement.addEventListener('webglcontextlost', (e) => {
-            e.preventDefault();
+          gl.domElement.addEventListener('webglcontextlost', (event) => {
+            event.preventDefault();
           });
+          gl.domElement.addEventListener('webglcontextrestored', () => {});
+        }}
+        camera={{
+          position: [
+            bounds.center[0] + bounds.radius * 0.5,
+            bounds.center[1] + bounds.radius * 0.5,
+            bounds.center[2] + bounds.radius * 0.5,
+          ],
+          fov: 45,
+          near: 0.1,
+          far: bounds.radius * 20
         }}
       >
-        <PerspectiveCamera
-          makeDefault
-          position={[
-            bounds.center[0] + bounds.radius * 1.5,
-            bounds.center[1] + bounds.radius * 1.5,
-            bounds.center[2] + bounds.radius * 1.5,
-          ]}
-          fov={60}
-          near={0.1}
-          far={bounds.radius * 10}
-        />
+        <color attach="background" args={[canvasBg]} />
         
         <OrbitControls
           target={bounds.center}
-          enableDamping
+          enableDamping={true}
           dampingFactor={0.05}
-          minDistance={bounds.radius * 0.5}
-          maxDistance={bounds.radius * 5}
+          minDistance={bounds.radius * 0.2}
+          maxDistance={bounds.radius * 4}
+          makeDefault
         />
 
-        <ambientLight intensity={0.8} />
-        <directionalLight position={[10, 10, 5]} intensity={0.5} />
-
-        <Points {...props} />
+        <ambientLight intensity={1.0} />
 
-        <gridHelper
-          args={[bounds.radius * 4, 20]}
-          position={[bounds.center[0], bounds.center[1] - bounds.radius, bounds.center[2]]}
-        />
+        <ColoredPoints {...props} isDarkMode={isDarkMode} />
+        
+        <CameraTracker onCameraUpdate={handleCameraUpdate} />
+        
       </Canvas>
+      
+      {/* Mini-map / Overview Map */}
+      <MiniMap3D
+        data={data}
+        colorBy={colorBy}
+        cameraPosition={cameraPosition}
+        cameraTarget={cameraTarget}
+      />
     </div>
   );
 }