add

.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1,28 +1,38 @@
-# Dependencies
-node_modules/
-frontend/node_modules/
+# Python
 __pycache__/
 *.py[cod]
 *$py.class
+*.so
+.Python
+env/
+venv/
+.venv/
+ENV/
+env.bak/
+venv.bak/
+.pytest_cache/
+*.egg-info/
+dist/
+build/
+
+# Node.js
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.npm
+.eslintcache
 
 # Build outputs
 frontend/dist/
 frontend/build/
 
-# Environment
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-.venv/
-venv/
-
 # IDE
 .vscode/
 .idea/
 *.swp
 *.swo
+*~
 
 # OS
 .DS_Store
@@ -32,15 +42,20 @@ Thumbs.db
 *.log
 logs/
 
-# Cache
-.cache/
-.pytest_cache/
-.mypy_cache/
-
-# Model cache (uncomment to ignore downloaded models)
-# models/
-# .cache/huggingface/
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
 # Temporary files
 *.tmp
-*.temp
+*.temp
+test_*.py
+debug_*.py
+quick_*.py
+
+# Model cache (optional - uncomment if you don't want to track downloaded models)
+# .cache/
+# models/

CONTRIBUTING.md

@@ -1,230 +0,0 @@
-# Contributing to Edge LLM 🤝
-
-Thank you for your interest in contributing to Edge LLM! This guide will help you get started with development and contributions.
-
-## 🚀 Quick Setup for Contributors
-
-### 1. Fork and Clone
-```bash
-# Fork the repository on Hugging Face Spaces
-# Then clone your fork
-git clone https://huggingface.co/spaces/[your-username]/EdgeLLM
-cd EdgeLLM
-```
-
-### 2. Install Dependencies
-```bash
-# Install Python dependencies
-pip install -r requirements.txt
-
-# Install Node.js dependencies
-cd frontend && npm install && cd ..
-
-# Optional: Install root package for scripts
-npm install
-```
-
-### 3. Start Development
-```bash
-# Option 1: Use npm scripts
-npm run dev
-
-# Option 2: Use Python script
-python scripts/start_platform.py
-
-# Option 3: Start manually
-npm run backend    # Terminal 1
-npm run frontend   # Terminal 2
-```
-
-## 📁 Project Structure
-
-```
-EdgeLLM/                        # Main project directory
-├── 🔧 Backend
-│   ├── backend/
-│   │   ├── api/               # API routes
-│   │   ├── services/          # Business logic
-│   │   ├── models.py          # Data models
-│   │   ├── config.py          # Configuration
-│   │   └── main.py            # FastAPI app
-│   ├── app.py                 # Entry point
-│   └── requirements.txt       # Python dependencies
-├── 💻 Frontend
-│   ├── frontend/
-│   │   ├── src/
-│   │   │   ├── components/    # React components
-│   │   │   ├── pages/         # Page components
-│   │   │   ├── hooks/         # Custom hooks
-│   │   │   └── types/         # TypeScript types
-│   │   ├── package.json       # Frontend dependencies
-│   │   └── vite.config.ts     # Build configuration
-│   └── static/                # Built assets (auto-generated)
-├── 🔨 Development
-│   ├── scripts/               # Development scripts
-│   ├── package.json           # Root scripts
-│   └── .gitignore             # Git ignore rules
-└── 📚 Documentation
-    ├── README.md              # Main documentation
-    └── CONTRIBUTING.md        # This file
-```
-
-## 🛠️ Development Workflow
-
-### Frontend Development
-```bash
-cd frontend
-npm run dev          # Start dev server (hot reload)
-npm run build        # Build for production
-npm run preview      # Preview production build
-```
-
-### Backend Development
-```bash
-# Start with auto-reload
-uvicorn app:app --host 0.0.0.0 --port 8000 --reload
-
-# Or use npm script
-npm run backend
-```
-
-### Full Stack Development
-```bash
-# Start both frontend and backend
-npm run dev
-
-# Build everything
-npm run build
-```
-
-## 🧪 Testing Your Changes
-
-### 1. Frontend Testing
-```bash
-cd frontend
-npm run test         # Run tests
-npm run build        # Ensure build works
-```
-
-### 2. Backend Testing
-```bash
-# Start backend and test API endpoints
-curl http://localhost:8000/health
-curl http://localhost:8000/models
-```
-
-### 3. Integration Testing
-```bash
-# Build and test full application
-npm run build
-python app.py        # Test production build
-```
-
-## 📝 Code Style Guidelines
-
-### Frontend (TypeScript/React)
-- Use TypeScript for type safety
-- Follow React best practices
-- Use ShadCN UI components when possible
-- Keep components small and focused
-- Use custom hooks for reusable logic
-
-### Backend (Python/FastAPI)
-- Use type hints everywhere
-- Follow PEP 8 style guide
-- Keep services modular
-- Add docstrings to functions
-- Use Pydantic models for data validation
-
-### General
-- Write descriptive commit messages
-- Keep functions small and focused
-- Add comments for complex logic
-- Update documentation for new features
-
-## 🔄 Contribution Process
-
-### 1. Create a Feature Branch
-```bash
-git checkout -b feature/your-feature-name
-```
-
-### 2. Make Your Changes
-- Follow the code style guidelines
-- Add tests if applicable
-- Update documentation
-
-### 3. Test Your Changes
-```bash
-npm run build        # Ensure everything builds
-npm run dev          # Test in development
-```
-
-### 4. Commit and Push
-```bash
-git add .
-git commit -m "feat: add your feature description"
-git push origin feature/your-feature-name
-```
-
-### 5. Create a Pull Request
-- Describe your changes clearly
-- Include screenshots if UI changes
-- Reference any related issues
-
-## 🎯 Areas for Contribution
-
-### 🔧 Backend Improvements
-- Add new model support
-- Improve error handling
-- Add model caching optimizations
-- Create API tests
-
-### 💻 Frontend Enhancements
-- Add new UI components
-- Improve chat interface
-- Add dark mode support
-- Enhance accessibility
-
-### 📚 Documentation
-- Improve README
-- Add code comments
-- Create tutorials
-- Update API documentation
-
-### 🚀 DevOps & Deployment
-- Improve Docker configuration
-- Add CI/CD workflows
-- Optimize build process
-- Add monitoring
-
-## 🐛 Bug Reports
-
-When reporting bugs, please include:
-- Steps to reproduce
-- Expected behavior
-- Actual behavior
-- Browser/OS information
-- Console error messages
-
-## 💡 Feature Requests
-
-When requesting features, please include:
-- Clear description of the feature
-- Use case and motivation
-- Proposed implementation approach
-- Any relevant examples
-
-## 📞 Getting Help
-
-- **Issues**: Create a GitHub issue for bugs or questions
-- **Discussions**: Use GitHub discussions for general questions
-- **Documentation**: Check the README and API docs first
-
-## 🙏 Thank You!
-
-Every contribution, no matter how small, helps make Edge LLM better for everyone. We appreciate your time and effort!
-
----
-
-**Happy coding!** 🚀

Dockerfile

@@ -13,4 +13,4 @@ COPY --chown=user ./requirements.txt requirements.txt
 RUN pip install --no-cache-dir --upgrade -r requirements.txt
 
 COPY --chown=user . /app
-CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]
+CMD ["python", "app.py"]

LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 ZEKUN WU
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -1,10 +1,137 @@
----
-title: EdgeLLM
-emoji: 🏆
-colorFrom: blue
-colorTo: yellow
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🚀 Edge LLM Platform
+
+A lightweight, local LLM inference platform with a modern web interface.
+
+> **Note**: All development now happens directly in this repository (EdgeLLM_HF). This is both the development environment and the production Hugging Face Space.
+
+## ✨ Features
+
+### 🤖 **Hybrid Model Support**
+- **Local Models**: Run Qwen models locally for privacy
+- **API Models**: Access powerful cloud models via [AiHubMix API](https://docs.aihubmix.com/en/api/Qwen)
+- **Seamless Switching**: Switch between local and API models effortlessly
+- **Thinking Models**: Support for models with visible reasoning process
+
+### 🌐 **Available Models**
+
+#### Local Models (Privacy-First)
+- `Qwen/Qwen3-4B-Thinking-2507` - Local model with thinking process (~8GB)
+- `Qwen/Qwen3-4B-Instruct-2507` - Local direct instruction model (~8GB)
+
+#### API Models (Cloud-Powered)
+- `Qwen/Qwen3-30B-A3B` - Advanced Qwen3 with dynamic thinking modes
+- `qwen2.5-vl-72b-instruct` - Multimodal model with vision capabilities
+- `Qwen/QVQ-72B-Preview` - Visual reasoning with thinking process
+
+### 🎨 **Modern UI/UX**
+- **Responsive Design**: Works on desktop and mobile
+- **Chat Interface**: Beautiful conversation bubbles with session management
+- **Model Management**: Easy switching between local and API models
+- **Parameter Controls**: Temperature, max tokens, and system prompts
+- **Session History**: Persistent conversations with localStorage
+
+## 📁 Project Structure
+
+```
+EdgeLLM/
+├── frontend/        # 🎨 React frontend with ShadCN UI
+├── backend/         # 🔧 FastAPI backend
+├── static/          # 📱 Built frontend assets
+├── app.py           # 🌐 Production entry point
+├── requirements.txt # 🐍 Python dependencies
+└── README.md        # 📖 Documentation
+```
+
+## 🎯 Quick Start
+
+1. **Clone the repository**
+   ```bash
+   git clone https://huggingface.co/spaces/wu981526092/EdgeLLM
+   cd EdgeLLM
+   ```
+
+2. **Set up environment variables**
+   ```bash
+   # Create .env file with your API credentials
+   echo 'api_key="your-aihubmix-api-key"' > .env
+   echo 'base_url="https://aihubmix.com/v1"' >> .env
+   ```
+
+3. **Install dependencies**
+   ```bash
+   pip install -r requirements.txt
+   cd frontend && npm install && cd ..
+   ```
+
+4. **Run locally**
+   ```bash
+   python app.py
+   ```
+
+5. **Deploy changes**
+   ```bash
+   # Build frontend if needed
+   cd frontend && npm run build && cd ..
+   
+   # Push to Hugging Face
+   git add .
+   git commit -m "Update: your changes"
+   git push
+   ```
+
+## 🌐 Live Demo
+
+Visit the live demo at: [https://huggingface.co/spaces/wu981526092/EdgeLLM](https://huggingface.co/spaces/wu981526092/EdgeLLM)
+
+## 🔧 Configuration
+
+### Environment Variables
+
+For local development, create a `.env` file:
+```bash
+api_key="your-aihubmix-api-key"
+base_url="https://aihubmix.com/v1"
+```
+
+For production (Hugging Face Spaces), set these as secrets:
+- `api_key`: Your AiHubMix API key
+- `base_url`: API endpoint (https://aihubmix.com/v1)
+
+### API Integration
+
+This platform integrates with [AiHubMix API](https://docs.aihubmix.com/en/api/Qwen) for cloud-based model access. Features include:
+
+- OpenAI-compatible API interface
+- Support for Qwen 3 series models
+- Multimodal capabilities (text + vision)
+- Streaming and non-streaming responses
+
+## 🛠️ Development Workflow
+
+1. **Frontend development**: Work in `frontend/`
+2. **Backend development**: Work in `backend/`
+3. **Build frontend**: `cd frontend && npm run build`
+4. **Deploy**: Standard git workflow
+   ```bash
+   git add .
+   git commit -m "Your changes"
+   git push
+   ```
+
+## 🏗️ Architecture
+
+### Backend (FastAPI)
+- **Models Service**: Handles both local model loading and API client management
+- **Chat Service**: Routes requests to appropriate generation method (local/API)
+- **API Routes**: RESTful endpoints for model management and text generation
+- **Configuration**: Environment-based settings for API credentials
+
+### Frontend (React + TypeScript)
+- **Modern UI**: Built with ShadCN components and Tailwind CSS
+- **Chat Interface**: Real-time conversation with message bubbles
+- **Model Management**: Easy switching between available models
+- **Session Management**: Persistent chat history and settings
+
+## 📄 License
+
+MIT License - see `LICENSE` for details.

app.py

@@ -1,292 +1,195 @@
-from fastapi import FastAPI, HTTPException
-from fastapi.middleware.cors import CORSMiddleware
-from fastapi.staticfiles import StaticFiles
-from fastapi.responses import FileResponse
-from pydantic import BaseModel
-from transformers import AutoModelForCausalLM, AutoTokenizer
-import torch
-from typing import Optional, Dict, Any
+"""
+Edge LLM API - Main application entry point with integrated frontend
+
+This entry point handles both backend API and frontend serving,
+with automatic port detection and process management.
+"""
+import uvicorn
+import socket
+import subprocess
+import sys
 import os
-
-app = FastAPI(title="Edge LLM API")
-
-# Enable CORS for Hugging Face Space
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],  # Allow all origins for HF Space
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
-
-# Mount static files
-app.mount("/assets", StaticFiles(directory="static/assets"), name="assets")
-
-# Available models
-AVAILABLE_MODELS = {
-    "Qwen/Qwen3-4B-Thinking-2507": {
-        "name": "Qwen3-4B-Thinking-2507",
-        "supports_thinking": True,
-        "description": "Shows thinking process",
-        "size_gb": "~8GB"
-    },
-    "Qwen/Qwen3-4B-Instruct-2507": {
-        "name": "Qwen3-4B-Instruct-2507",
-        "supports_thinking": False,
-        "description": "Direct instruction following",
-        "size_gb": "~8GB"
-    }
-}
-
-# Global model cache
-models_cache: Dict[str, Dict[str, Any]] = {}
-current_model_name = None  # No model loaded by default
-
-class PromptRequest(BaseModel):
-    prompt: str
-    system_prompt: Optional[str] = None
-    model_name: Optional[str] = None
-    temperature: Optional[float] = 0.7
-    max_new_tokens: Optional[int] = 1024
-
-class PromptResponse(BaseModel):
-    thinking_content: str
-    content: str
-    model_used: str
-    supports_thinking: bool
-
-class ModelInfo(BaseModel):
-    model_name: str
-    name: str
-    supports_thinking: bool
-    description: str
-    size_gb: str
-    is_loaded: bool
-
-class ModelsResponse(BaseModel):
-    models: list[ModelInfo]
-    current_model: str
-
-class ModelLoadRequest(BaseModel):
-    model_name: str
-
-class ModelUnloadRequest(BaseModel):
-    model_name: str
-
-def load_model_by_name(model_name: str):
-    """Load a model into the cache"""
-    global models_cache
+import time
+import signal
+import webbrowser
+from backend.main import app
+
+def find_free_port(start_port=8000, max_attempts=50):
+    """Find a free port starting from start_port"""
+    for port in range(start_port, start_port + max_attempts):
+        try:
+            with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
+                s.bind(('localhost', port))
+                return port
+        except OSError:
+            continue
+    raise RuntimeError(f"Could not find a free port in range {start_port}-{start_port + max_attempts}")
+
+def kill_processes_on_port(port):
+    """Kill processes using the specified port"""
+    try:
+        if os.name == 'nt':  # Windows
+            result = subprocess.run(['netstat', '-ano'], capture_output=True, text=True)
+            lines = result.stdout.split('\n')
+            for line in lines:
+                if f':{port}' in line and 'LISTENING' in line:
+                    parts = line.split()
+                    if len(parts) >= 5:
+                        pid = parts[-1]
+                        try:
+                            subprocess.run(['taskkill', '/pid', pid, '/f'], 
+                                         capture_output=True, check=True)
+                            print(f"✅ Killed process {pid} on port {port}")
+                        except subprocess.CalledProcessError:
+                            pass
+        else:  # Unix/Linux/macOS
+            try:
+                result = subprocess.run(['lsof', '-ti', f':{port}'], 
+                                      capture_output=True, text=True)
+                pids = result.stdout.strip().split('\n')
+                for pid in pids:
+                    if pid:
+                        subprocess.run(['kill', '-9', pid], capture_output=True)
+                        print(f"✅ Killed process {pid} on port {port}")
+            except subprocess.CalledProcessError:
+                pass
+    except Exception as e:
+        print(f"⚠️ Warning: Could not kill processes on port {port}: {e}")
+
+def update_frontend_config(port):
+    """Update frontend configuration to use the correct backend port"""
+    frontend_files = [
+        'frontend/src/pages/Models.tsx',
+        'frontend/src/pages/Playground.tsx'
+    ]
     
-    if model_name in models_cache:
+    for file_path in frontend_files:
+        if os.path.exists(file_path):
+            try:
+                with open(file_path, 'r', encoding='utf-8') as f:
+                    content = f.read()
+                
+                # Update the baseUrl to use the current port (no longer needed with dynamic ports)
+                old_pattern = "window.location.hostname === 'localhost' ? `${window.location.protocol}//${window.location.host}` : ''"
+                new_pattern = old_pattern  # No change needed since it's already dynamic
+                
+                # No need to update frontend files since they use dynamic origins now
+                print(f"✅ Frontend uses dynamic origins - no port updates needed")
+            except Exception as e:
+                print(f"⚠️ Warning: Could not update {file_path}: {e}")
+
+def build_frontend():
+    """Build the frontend if needed"""
+    if not os.path.exists('frontend/dist') or not os.listdir('frontend/dist'):
+        print("🔨 Building frontend...")
+        try:
+            os.chdir('frontend')
+            subprocess.run(['npm', 'install'], check=True, capture_output=True)
+            subprocess.run(['npm', 'run', 'build'], check=True, capture_output=True)
+            os.chdir('..')
+            print("✅ Frontend built successfully")
+        except subprocess.CalledProcessError as e:
+            print(f"❌ Frontend build failed: {e}")
+            os.chdir('..')
+            return False
+        except FileNotFoundError:
+            print("❌ npm not found. Please install Node.js")
+            return False
+    return True
+
+def should_rebuild_frontend():
+    """Check if frontend needs to be rebuilt"""
+    # Check if build exists
+    if not (os.path.exists('frontend/dist/index.html') and os.path.exists('frontend/dist/assets')):
+        print("⚠️ Frontend build not found - will build it")
         return True
     
-    if model_name not in AVAILABLE_MODELS:
-        return False
-    
+    # Check if source is newer than build
     try:
-        print(f"Loading model: {model_name}")
-        tokenizer = AutoTokenizer.from_pretrained(model_name)
-        model = AutoModelForCausalLM.from_pretrained(
-            model_name,
-            torch_dtype=torch.float16,
-            device_map="auto"
-        )
+        dist_time = os.path.getmtime('frontend/dist/index.html')
         
-        models_cache[model_name] = {
-            "model": model,
-            "tokenizer": tokenizer
-        }
-        print(f"Model {model_name} loaded successfully")
-        return True
-    except Exception as e:
-        print(f"Error loading model {model_name}: {e}")
+        # Check key source files
+        source_files = [
+            'frontend/src',
+            'frontend/package.json',
+            'frontend/vite.config.ts',
+            'frontend/tsconfig.json'
+        ]
+        
+        for src_path in source_files:
+            if os.path.exists(src_path):
+                if os.path.isdir(src_path):
+                    # Check all files in directory
+                    for root, dirs, files in os.walk(src_path):
+                        for file in files:
+                            file_path = os.path.join(root, file)
+                            if os.path.getmtime(file_path) > dist_time:
+                                print(f"🔄 Source files changed - will rebuild frontend")
+                                return True
+                else:
+                    if os.path.getmtime(src_path) > dist_time:
+                        print(f"🔄 {src_path} changed - will rebuild frontend")
+                        return True
+        
+        print("✅ Frontend build is up to date")
         return False
-
-def unload_model_by_name(model_name: str):
-    """Unload a model from the cache"""
-    global models_cache, current_model_name
-    
-    if model_name in models_cache:
-        del models_cache[model_name]
-        if current_model_name == model_name:
-            current_model_name = None
-        print(f"Model {model_name} unloaded")
+        
+    except Exception as e:
+        print(f"⚠️ Error checking build status: {e} - will rebuild")
         return True
-    return False
-
-@app.on_event("startup")
-async def startup_event():
-    """Startup event - don't load models by default"""
-    print("🚀 Edge LLM API is starting up...")
-    print("💡 Models will be loaded on demand")
 
-@app.get("/")
-async def read_index():
-    """Serve the React app"""
-    return FileResponse('static/index.html')
+def cleanup_handler(signum, frame):
+    """Handle cleanup on exit"""
+    print("\n🛑 Shutting down Edge LLM...")
+    sys.exit(0)
 
-@app.get("/health")
-async def health_check():
-    return {"status": "healthy", "message": "Edge LLM API is running"}
-
-@app.get("/models", response_model=ModelsResponse)
-async def get_models():
-    """Get available models and their status"""
-    global current_model_name
-    
-    models = []
-    for model_name, info in AVAILABLE_MODELS.items():
-        models.append(ModelInfo(
-            model_name=model_name,
-            name=info["name"],
-            supports_thinking=info["supports_thinking"],
-            description=info["description"],
-            size_gb=info["size_gb"],
-            is_loaded=model_name in models_cache
-        ))
-    
-    return ModelsResponse(
-        models=models,
-        current_model=current_model_name or ""
-    )
-
-@app.post("/load-model")
-async def load_model(request: ModelLoadRequest):
-    """Load a specific model"""
-    global current_model_name
-    
-    if request.model_name not in AVAILABLE_MODELS:
-        raise HTTPException(
-            status_code=400, 
-            detail=f"Model {request.model_name} not available"
-        )
+if __name__ == "__main__":
+    # Set up signal handlers
+    signal.signal(signal.SIGINT, cleanup_handler)
+    signal.signal(signal.SIGTERM, cleanup_handler)
     
-    success = load_model_by_name(request.model_name)
-    if success:
-        current_model_name = request.model_name
-        return {
-            "message": f"Model {request.model_name} loaded successfully",
-            "current_model": current_model_name
-        }
-    else:
-        raise HTTPException(
-            status_code=500,
-            detail=f"Failed to load model {request.model_name}"
-        )
-
-@app.post("/unload-model")
-async def unload_model(request: ModelUnloadRequest):
-    """Unload a specific model"""
-    global current_model_name
+    print("🚀 Starting Edge LLM with auto-build frontend...")
     
-    success = unload_model_by_name(request.model_name)
-    if success:
-        return {
-            "message": f"Model {request.model_name} unloaded successfully",
-            "current_model": current_model_name or ""
-        }
+    # Find available port  
+    import os
+    original_port = int(os.getenv("PORT", "0"))  # Use env var or auto-assign
+    if original_port == 0:
+        # Auto-assign a free port starting from 8000
+        original_port = find_free_port(8000)
+        print(f"🔍 Auto-assigned port: {original_port}")
     else:
-        raise HTTPException(
-            status_code=404,
-            detail=f"Model {request.model_name} not found in cache"
-        )
-
-@app.post("/set-current-model")
-async def set_current_model(request: ModelLoadRequest):
-    """Set the current active model"""
-    global current_model_name
-    
-    if request.model_name not in models_cache:
-        raise HTTPException(
-            status_code=400,
-            detail=f"Model {request.model_name} is not loaded. Please load it first."
-        )
-    
-    current_model_name = request.model_name
-    return {
-        "message": f"Current model set to {current_model_name}",
-        "current_model": current_model_name
-    }
-
-@app.post("/generate", response_model=PromptResponse)
-async def generate_text(request: PromptRequest):
-    """Generate text using the loaded model"""
-    global current_model_name
-    
-    # Use the model specified in request, or fall back to current model
-    model_to_use = request.model_name if request.model_name else current_model_name
-    
-    if not model_to_use:
-        raise HTTPException(
-            status_code=400,
-            detail="No model specified. Please load a model first."
-        )
-    
-    if model_to_use not in models_cache:
-        raise HTTPException(
-            status_code=400,
-            detail=f"Model {model_to_use} is not loaded. Please load it first."
-        )
+        kill_processes_on_port(original_port)
     
     try:
-        model = models_cache[model_to_use]["model"]
-        tokenizer = models_cache[model_to_use]["tokenizer"]
-        model_info = AVAILABLE_MODELS[model_to_use]
-        
-        # Build the prompt
-        messages = []
-        if request.system_prompt:
-            messages.append({"role": "system", "content": request.system_prompt})
-        messages.append({"role": "user", "content": request.prompt})
-        
-        # Apply chat template
-        formatted_prompt = tokenizer.apply_chat_template(
-            messages, 
-            tokenize=False, 
-            add_generation_prompt=True
-        )
+        port = find_free_port(original_port)
+        print(f"📡 Using port: {port}")
         
-        # Tokenize
-        inputs = tokenizer(formatted_prompt, return_tensors="pt").to(model.device)
+        if port != original_port:
+            print(f"⚠️ Port {original_port} was busy, switched to {port}")
+            update_frontend_config(port)
         
-        # Generate
-        with torch.no_grad():
-            outputs = model.generate(
-                **inputs,
-                max_new_tokens=request.max_new_tokens,
-                temperature=request.temperature,
-                do_sample=True,
-                pad_token_id=tokenizer.eos_token_id
-            )
+        # Auto-build frontend if needed
+        if should_rebuild_frontend():
+            print("🔨 Building frontend...")
+            build_frontend()
         
-        # Decode
-        generated_tokens = outputs[0][inputs['input_ids'].shape[1]:]
-        generated_text = tokenizer.decode(generated_tokens, skip_special_tokens=True)
+        # Start the backend server
+        print(f"🌐 Starting server on http://localhost:{port}")
+        print("🎯 Frontend and Backend integrated - ready to use!")
         
-        # Parse thinking vs final content for thinking models
-        thinking_content = ""
-        final_content = generated_text
+        # Auto-open browser after a short delay
+        def open_browser():
+            time.sleep(2)
+            webbrowser.open(f'http://localhost:{port}')
         
-        if model_info["supports_thinking"] and "<thinking>" in generated_text:
-            parts = generated_text.split("<thinking>")
-            if len(parts) > 1:
-                thinking_part = parts[1]
-                if "</thinking>" in thinking_part:
-                    thinking_content = thinking_part.split("</thinking>")[0].strip()
-                    remaining = thinking_part.split("</thinking>", 1)[1] if "</thinking>" in thinking_part else ""
-                    final_content = remaining.strip()
+        import threading
+        browser_thread = threading.Thread(target=open_browser)
+        browser_thread.daemon = True
+        browser_thread.start()
         
-        return PromptResponse(
-            thinking_content=thinking_content,
-            content=final_content,
-            model_used=model_to_use,
-            supports_thinking=model_info["supports_thinking"]
-        )
+        # Start the server
+        uvicorn.run(app, host="0.0.0.0", port=port)
         
     except Exception as e:
-        print(f"Generation error: {e}")
-        raise HTTPException(status_code=500, detail=f"Generation failed: {str(e)}")
-
-if __name__ == "__main__":
-    import uvicorn
-    uvicorn.run(app, host="0.0.0.0", port=7860)
+        print(f"❌ Error starting server: {e}")
+        sys.exit(1)

backend/api/routes.py

@@ -1,7 +1,7 @@
 """
 API routes for Edge LLM
 """
-from fastapi import APIRouter, HTTPException
+from fastapi import APIRouter, HTTPException, Request
 from fastapi.responses import FileResponse
 from ..models import (
     PromptRequest, PromptResponse, ModelInfo, ModelsResponse,
@@ -18,7 +18,8 @@ router = APIRouter()
 @router.get("/")
 async def read_index():
     """Serve the React app"""
-    return FileResponse('static/index.html')
+    from ..config import FRONTEND_DIST_DIR
+    return FileResponse(f'{FRONTEND_DIST_DIR}/index.html')
 
 
 @router.get("/health")
@@ -38,7 +39,8 @@ async def get_models():
             supports_thinking=info["supports_thinking"],
             description=info["description"],
             size_gb=info["size_gb"],
-            is_loaded=model_service.is_model_loaded(model_name)
+            is_loaded=model_service.is_model_loaded(model_name),
+            type=info["type"]
         ))
     
     return ModelsResponse(
@@ -124,6 +126,7 @@ async def generate_text(request: PromptRequest):
         thinking_content, final_content, model_used, supports_thinking = chat_service.generate_response(
             prompt=request.prompt,
             model_name=model_to_use,
+            messages=[msg.dict() for msg in request.messages] if request.messages else [],
             system_prompt=request.system_prompt,
             temperature=request.temperature,
             max_new_tokens=request.max_new_tokens
@@ -139,3 +142,14 @@ async def generate_text(request: PromptRequest):
     except Exception as e:
         print(f"Generation error: {e}")
         raise HTTPException(status_code=500, detail=f"Generation failed: {str(e)}")
+
+
+# Catch-all route for SPA - must be last
+@router.get("/{full_path:path}")
+async def catch_all(request: Request, full_path: str):
+    """
+    Catch-all route to serve index.html for any unmatched paths.
+    This enables client-side routing for the React SPA.
+    """
+    from ..config import FRONTEND_DIST_DIR
+    return FileResponse(f'{FRONTEND_DIST_DIR}/index.html')

backend/app.py

@@ -1,243 +0,0 @@
-from fastapi import FastAPI, HTTPException
-from fastapi.middleware.cors import CORSMiddleware
-from pydantic import BaseModel
-from transformers import AutoModelForCausalLM, AutoTokenizer
-import torch
-from typing import Optional, Dict, Any
-
-app = FastAPI(title="Edge LLM API")
-
-# Enable CORS for frontend
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["http://localhost:5173", "http://localhost:5174"],  # Vite ports
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
-
-# Available models
-AVAILABLE_MODELS = {
-    "Qwen/Qwen3-4B-Thinking-2507": {
-        "name": "Qwen3-4B-Thinking-2507",
-        "supports_thinking": True,
-        "description": "Shows thinking process",
-        "size_gb": "~8GB"
-    },
-    "Qwen/Qwen3-4B-Instruct-2507": {
-        "name": "Qwen3-4B-Instruct-2507",
-        "supports_thinking": False,
-        "description": "Direct instruction following",
-        "size_gb": "~8GB"
-    }
-}
-
-# Global model cache
-models_cache: Dict[str, Dict[str, Any]] = {}
-current_model_name = None  # No model loaded by default
-
-class PromptRequest(BaseModel):
-    prompt: str
-    system_prompt: Optional[str] = None
-    model_name: Optional[str] = None
-    temperature: Optional[float] = 0.7
-    max_new_tokens: Optional[int] = 1024
-
-class PromptResponse(BaseModel):
-    thinking_content: str
-    content: str
-    model_used: str
-    supports_thinking: bool
-
-class ModelInfo(BaseModel):
-    model_name: str
-    name: str
-    supports_thinking: bool
-    description: str
-    size_gb: str
-    is_loaded: bool
-
-class ModelLoadRequest(BaseModel):
-    model_name: str
-
-class ModelUnloadRequest(BaseModel):
-    model_name: str
-
-async def load_model_by_name(model_name: str):
-    """Load a specific model and cache it (without setting as current)"""
-    global models_cache
-    
-    if model_name not in AVAILABLE_MODELS:
-        raise HTTPException(status_code=400, detail=f"Model {model_name} not available")
-    
-    if model_name not in models_cache:
-        print(f"Loading model: {model_name}...")
-        tokenizer = AutoTokenizer.from_pretrained(model_name)
-        model = AutoModelForCausalLM.from_pretrained(
-            model_name,
-            torch_dtype="auto",
-            device_map="auto"
-        )
-        models_cache[model_name] = {
-            "model": model,
-            "tokenizer": tokenizer
-        }
-        print(f"Model {model_name} loaded successfully!")
-    
-    return models_cache[model_name]
-
-def unload_model_by_name(model_name: str):
-    """Unload a specific model from cache"""
-    global models_cache, current_model_name
-    
-    if model_name in models_cache:
-        del models_cache[model_name]
-        print(f"Model {model_name} unloaded from cache")
-        
-        # If current model was unloaded, reset current model
-        if current_model_name == model_name:
-            current_model_name = None
-
-@app.on_event("startup")
-async def startup_event():
-    """Startup without loading any models"""
-    print("Backend started. Models will be loaded on demand.")
-
-@app.get("/")
-async def root():
-    return {"message": "Edge LLM API is running"}
-
-@app.get("/models")
-async def get_available_models():
-    """Get list of available models with their status"""
-    models_info = []
-    for model_name, info in AVAILABLE_MODELS.items():
-        models_info.append(ModelInfo(
-            model_name=model_name,
-            name=info["name"],
-            supports_thinking=info["supports_thinking"],
-            description=info["description"],
-            size_gb=info["size_gb"],
-            is_loaded=model_name in models_cache
-        ))
-    return {
-        "models": models_info,
-        "current_model": current_model_name
-    }
-
-@app.post("/load-model")
-async def load_model(request: ModelLoadRequest):
-    """Load a model into memory"""
-    try:
-        model_data = await load_model_by_name(request.model_name)
-        return {
-            "message": f"Model loaded: {request.model_name}",
-            "model_name": request.model_name,
-            "supports_thinking": AVAILABLE_MODELS[request.model_name]["supports_thinking"]
-        }
-    except Exception as e:
-        raise HTTPException(status_code=500, detail=str(e))
-
-@app.post("/unload-model")
-async def unload_model(request: ModelUnloadRequest):
-    """Unload a model from memory"""
-    try:
-        unload_model_by_name(request.model_name)
-        return {
-            "message": f"Model unloaded: {request.model_name}",
-            "model_name": request.model_name
-        }
-    except Exception as e:
-        raise HTTPException(status_code=500, detail=str(e))
-
-@app.post("/set-current-model")
-async def set_current_model(request: ModelLoadRequest):
-    """Set the current active model (must be loaded first)"""
-    global current_model_name
-    
-    if request.model_name not in models_cache:
-        raise HTTPException(status_code=400, detail=f"Model {request.model_name} is not loaded. Please load it first.")
-    
-    current_model_name = request.model_name
-    return {
-        "message": f"Current model set to: {request.model_name}",
-        "model_name": request.model_name,
-        "supports_thinking": AVAILABLE_MODELS[request.model_name]["supports_thinking"]
-    }
-
-@app.post("/generate", response_model=PromptResponse)
-async def generate_response(request: PromptRequest):
-    global current_model_name
-    
-    # Determine which model to use
-    target_model = request.model_name if request.model_name else current_model_name
-    
-    if not target_model:
-        raise HTTPException(status_code=400, detail="No model specified and no current model set")
-    
-    # Check if the target model is loaded
-    if target_model not in models_cache:
-        raise HTTPException(
-            status_code=400, 
-            detail=f"Model {target_model} is not loaded. Please load the model first using the load button."
-        )
-    
-    # Set as current model if it's different
-    if target_model != current_model_name:
-        current_model_name = target_model
-    
-    # Get model and tokenizer
-    model_data = models_cache[current_model_name]
-    model = model_data["model"]
-    tokenizer = model_data["tokenizer"]
-    supports_thinking = AVAILABLE_MODELS[current_model_name]["supports_thinking"]
-    
-    # Prepare the model input with optional system prompt
-    messages = []
-    if request.system_prompt:
-        messages.append({"role": "system", "content": request.system_prompt})
-    messages.append({"role": "user", "content": request.prompt})
-    
-    text = tokenizer.apply_chat_template(
-        messages,
-        tokenize=False,
-        add_generation_prompt=True,
-    )
-    model_inputs = tokenizer([text], return_tensors="pt").to(model.device)
-    
-    # Generate response with parameters
-    generated_ids = model.generate(
-        **model_inputs,
-        max_new_tokens=request.max_new_tokens,
-        temperature=request.temperature,
-        do_sample=True if request.temperature > 0 else False,
-        pad_token_id=tokenizer.eos_token_id
-    )
-    output_ids = generated_ids[0][len(model_inputs.input_ids[0]):].tolist()
-    
-    thinking_content = ""
-    content = ""
-    
-    if supports_thinking:
-        # Parse thinking content for thinking models
-        try:
-            index = len(output_ids) - output_ids[::-1].index(151668)
-        except ValueError:
-            index = 0
-        
-        thinking_content = tokenizer.decode(output_ids[:index], skip_special_tokens=True).strip("\n")
-        content = tokenizer.decode(output_ids[index:], skip_special_tokens=True).strip("\n")
-    else:
-        # For non-thinking models, everything is content
-        content = tokenizer.decode(output_ids, skip_special_tokens=True).strip("\n")
-    
-    return PromptResponse(
-        thinking_content=thinking_content,
-        content=content,
-        model_used=current_model_name,
-        supports_thinking=supports_thinking
-    )
-
-if __name__ == "__main__":
-    import uvicorn
-    uvicorn.run("app:app", host="0.0.0.0", port=8000, reload=False)

backend/config.py

@@ -1,30 +1,64 @@
 """
 Configuration settings for the Edge LLM API
 """
+import os
+from dotenv import load_dotenv
+
+# Load environment variables
+load_dotenv()
+
+# API Configuration
+API_KEY = os.getenv("api_key", "")
+BASE_URL = os.getenv("base_url", "https://aihubmix.com/v1")
 
 # Available models configuration
 AVAILABLE_MODELS = {
+    # API models (AiHubMix) - Prioritized first
+    "Qwen/Qwen3-30B-A3B": {
+        "name": "Qwen3-30B-A3B",
+        "supports_thinking": True,
+        "description": "API: Qwen3 with dynamic thinking modes",
+        "size_gb": "API",
+        "type": "api"
+    },
+    # Local models (for local development)
     "Qwen/Qwen3-4B-Thinking-2507": {
         "name": "Qwen3-4B-Thinking-2507",
         "supports_thinking": True,
-        "description": "Shows thinking process",
-        "size_gb": "~8GB"
+        "description": "Local: Shows thinking process",
+        "size_gb": "~8GB",
+        "type": "local"
     },
     "Qwen/Qwen3-4B-Instruct-2507": {
-        "name": "Qwen3-4B-Instruct-2507",
+        "name": "Qwen3-4B-Instruct-2507", 
         "supports_thinking": False,
-        "description": "Direct instruction following",
-        "size_gb": "~8GB"
+        "description": "Local: Direct instruction following",
+        "size_gb": "~8GB",
+        "type": "local"
+    },
+    "qwen2.5-vl-72b-instruct": {
+        "name": "Qwen2.5-VL-72B-Instruct",
+        "supports_thinking": False,
+        "description": "API: Multimodal model with vision",
+        "size_gb": "API", 
+        "type": "api"
+    },
+    "Qwen/QVQ-72B-Preview": {
+        "name": "QVQ-72B-Preview",
+        "supports_thinking": True,
+        "description": "API: Visual reasoning with thinking",
+        "size_gb": "API",
+        "type": "api"
     }
 }
 
 # CORS settings
 CORS_ORIGINS = ["*"]  # Allow all origins for HF Space
 
-# Static files directory
-STATIC_DIR = "static"
-ASSETS_DIR = "static/assets"
+# Static files directory - point directly to frontend build
+FRONTEND_DIST_DIR = "frontend/dist"
+ASSETS_DIR = "frontend/dist/assets"
 
-# Server settings
+# Server settings (port will be dynamically determined)
 HOST = "0.0.0.0"
-PORT = 7860
+DEFAULT_PORT = int(os.getenv("PORT", "0"))  # 0 means auto-assign a free port

backend/main.py

@@ -5,7 +5,7 @@ from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
 from .api.routes import router
-from .config import CORS_ORIGINS, ASSETS_DIR
+from .config import CORS_ORIGINS, ASSETS_DIR, FRONTEND_DIST_DIR
 
 
 def create_app() -> FastAPI:

backend/models.py

@@ -5,8 +5,13 @@ from pydantic import BaseModel
 from typing import Optional, List
 
 
+class ChatMessage(BaseModel):
+    role: str  # 'user', 'assistant', 'system'
+    content: str
+
 class PromptRequest(BaseModel):
     prompt: str
+    messages: Optional[List[ChatMessage]] = []  # Full conversation history
     system_prompt: Optional[str] = None
     model_name: Optional[str] = None
     temperature: Optional[float] = 0.7
@@ -27,6 +32,7 @@ class ModelInfo(BaseModel):
     description: str
     size_gb: str
     is_loaded: bool
+    type: str
 
 
 class ModelsResponse(BaseModel):

backend/services/__init__.py

@@ -1 +0,0 @@
-# Services module

backend/services/chat_service.py

@@ -1,26 +1,94 @@
 """
-Chat generation service
+Chat generation service supporting both local models and API calls
 """
 import torch
 from typing import Tuple
+from openai import OpenAI
 from .model_service import model_service
-from ..config import AVAILABLE_MODELS
+from ..config import AVAILABLE_MODELS, API_KEY, BASE_URL
 
 
 class ChatService:
+    def __init__(self):
+        # Initialize OpenAI client for API calls
+        self.api_client = OpenAI(
+            api_key=API_KEY,
+            base_url=BASE_URL
+        ) if API_KEY else None
     
-    @staticmethod
-    def generate_response(
+    def _generate_api_response(
+        self,
         prompt: str,
         model_name: str,
+        messages: list = None,
         system_prompt: str = None,
         temperature: float = 0.7,
         max_new_tokens: int = 1024
     ) -> Tuple[str, str, str, bool]:
-        """
-        Generate chat response
-        Returns: (thinking_content, final_content, model_used, supports_thinking)
-        """
+        """Generate response using API"""
+        if not self.api_client:
+            raise ValueError("API client not configured. Please check API_KEY.")
+        
+        # Build messages with conversation history
+        api_messages = []
+        if system_prompt:
+            api_messages.append({"role": "system", "content": system_prompt})
+        
+        # Add conversation history
+        if messages:
+            for msg in messages:
+                api_messages.append({"role": msg.get("role"), "content": msg.get("content")})
+        
+        # Add current prompt as the latest user message
+        api_messages.append({"role": "user", "content": prompt})
+        
+        model_info = AVAILABLE_MODELS[model_name]
+        
+        try:
+            # Make API call
+            completion = self.api_client.chat.completions.create(
+                model=model_name,
+                messages=api_messages,
+                temperature=temperature,
+                max_tokens=max_new_tokens,
+                stream=False
+            )
+            
+            generated_text = completion.choices[0].message.content
+            
+            # Parse thinking vs final content for thinking models
+            thinking_content = ""
+            final_content = generated_text
+            
+            if model_info["supports_thinking"] and "<thinking>" in generated_text:
+                parts = generated_text.split("<thinking>")
+                if len(parts) > 1:
+                    thinking_part = parts[1]
+                    if "</thinking>" in thinking_part:
+                        thinking_content = thinking_part.split("</thinking>")[0].strip()
+                        remaining = thinking_part.split("</thinking>", 1)[1] if "</thinking>" in thinking_part else ""
+                        final_content = remaining.strip()
+            
+            return (
+                thinking_content,
+                final_content,
+                model_name,
+                model_info["supports_thinking"]
+            )
+            
+        except Exception as e:
+            raise ValueError(f"API call failed: {str(e)}")
+    
+    def _generate_local_response(
+        self,
+        prompt: str,
+        model_name: str,
+        messages: list = None,
+        system_prompt: str = None,
+        temperature: float = 0.7,
+        max_new_tokens: int = 1024
+    ) -> Tuple[str, str, str, bool]:
+        """Generate response using local model"""
         if not model_service.is_model_loaded(model_name):
             raise ValueError(f"Model {model_name} is not loaded")
         
@@ -30,15 +98,22 @@ class ChatService:
         tokenizer = model_data["tokenizer"]
         model_info = AVAILABLE_MODELS[model_name]
         
-        # Build the prompt
-        messages = []
+        # Build the conversation with full history
+        conversation = []
         if system_prompt:
-            messages.append({"role": "system", "content": system_prompt})
-        messages.append({"role": "user", "content": prompt})
+            conversation.append({"role": "system", "content": system_prompt})
+        
+        # Add conversation history
+        if messages:
+            for msg in messages:
+                conversation.append({"role": msg.get("role"), "content": msg.get("content")})
+        
+        # Add current prompt as the latest user message
+        conversation.append({"role": "user", "content": prompt})
         
         # Apply chat template
         formatted_prompt = tokenizer.apply_chat_template(
-            messages, 
+            conversation, 
             tokenize=False, 
             add_generation_prompt=True
         )
@@ -79,6 +154,33 @@ class ChatService:
             model_name,
             model_info["supports_thinking"]
         )
+    
+    def generate_response(
+        self,
+        prompt: str,
+        model_name: str,
+        messages: list = None,
+        system_prompt: str = None,
+        temperature: float = 0.7,
+        max_new_tokens: int = 1024
+    ) -> Tuple[str, str, str, bool]:
+        """
+        Generate chat response using appropriate method (API or local)
+        Returns: (thinking_content, final_content, model_used, supports_thinking)
+        """
+        model_info = AVAILABLE_MODELS.get(model_name)
+        if not model_info:
+            raise ValueError(f"Unknown model: {model_name}")
+        
+        # Route to appropriate generation method
+        if model_info["type"] == "api":
+            return self._generate_api_response(
+                prompt, model_name, messages, system_prompt, temperature, max_new_tokens
+            )
+        else:
+            return self._generate_local_response(
+                prompt, model_name, messages, system_prompt, temperature, max_new_tokens
+            )
 
 
 # Global chat service instance

backend/services/model_service.py

@@ -1,46 +1,60 @@
 """
 Model loading and management service
 """
-import torch
 from transformers import AutoModelForCausalLM, AutoTokenizer
-from typing import Dict, Any, Optional
+import torch
+from typing import Dict, Any
 from ..config import AVAILABLE_MODELS
 
 
 class ModelService:
     def __init__(self):
         self.models_cache: Dict[str, Dict[str, Any]] = {}
-        self.current_model_name: Optional[str] = None
-
+        self.current_model_name: str = None
+    
     def load_model(self, model_name: str) -> bool:
-        """Load a model into the cache"""
-        if model_name in self.models_cache:
-            return True
-        
+        """Load a model into memory"""
         if model_name not in AVAILABLE_MODELS:
+            print(f"Model {model_name} not available.")
             return False
         
+        model_info = AVAILABLE_MODELS[model_name]
+        
+        # API models don't need to be "loaded" - they're always available
+        if model_info["type"] == "api":
+            print(f"API model {model_name} is always available")
+            return True
+        
+        # Handle local models
+        if model_name in self.models_cache:
+            print(f"Model {model_name} already loaded.")
+            return True
+        
         try:
-            print(f"Loading model: {model_name}")
+            print(f"Loading local model: {model_name}")
             tokenizer = AutoTokenizer.from_pretrained(model_name)
             model = AutoModelForCausalLM.from_pretrained(
                 model_name,
                 torch_dtype=torch.float16,
                 device_map="auto"
             )
-            
-            self.models_cache[model_name] = {
-                "model": model,
-                "tokenizer": tokenizer
-            }
+            self.models_cache[model_name] = {"model": model, "tokenizer": tokenizer}
             print(f"Model {model_name} loaded successfully")
             return True
         except Exception as e:
             print(f"Error loading model {model_name}: {e}")
             return False
-
+    
     def unload_model(self, model_name: str) -> bool:
-        """Unload a model from the cache"""
+        """Unload a model from memory"""
+        model_info = AVAILABLE_MODELS.get(model_name, {})
+        
+        # API models can't be "unloaded"
+        if model_info.get("type") == "api":
+            print(f"API model {model_name} cannot be unloaded")
+            return True
+        
+        # Handle local models
         if model_name in self.models_cache:
             del self.models_cache[model_name]
             if self.current_model_name == model_name:
@@ -48,27 +62,47 @@ class ModelService:
             print(f"Model {model_name} unloaded")
             return True
         return False
-
+    
     def set_current_model(self, model_name: str) -> bool:
         """Set the current active model"""
-        if model_name in self.models_cache:
+        if model_name not in AVAILABLE_MODELS:
+            return False
+        
+        model_info = AVAILABLE_MODELS[model_name]
+        
+        # API models are always "available"
+        if model_info["type"] == "api":
             self.current_model_name = model_name
             return True
-        return False
-
-    def get_model_info(self, model_name: str) -> Dict[str, Any]:
-        """Get model configuration info"""
-        return AVAILABLE_MODELS.get(model_name, {})
-
+        
+        # Local models need to be loaded first
+        if model_name not in self.models_cache:
+            if not self.load_model(model_name):
+                return False
+        
+        self.current_model_name = model_name
+        return True
+    
     def is_model_loaded(self, model_name: str) -> bool:
-        """Check if a model is loaded"""
+        """Check if a model is loaded/available"""
+        model_info = AVAILABLE_MODELS.get(model_name, {})
+        
+        # API models are always available
+        if model_info.get("type") == "api":
+            return True
+        
+        # Local models need to be in cache
         return model_name in self.models_cache
-
+    
     def get_loaded_models(self) -> list:
-        """Get list of currently loaded models"""
-        return list(self.models_cache.keys())
-
-    def get_current_model(self) -> Optional[str]:
+        """Get list of currently loaded/available models"""
+        loaded = []
+        for model_name, model_info in AVAILABLE_MODELS.items():
+            if model_info["type"] == "api" or model_name in self.models_cache:
+                loaded.append(model_name)
+        return loaded
+    
+    def get_current_model(self) -> str:
         """Get the current active model"""
         return self.current_model_name
 

frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

frontend/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Edge LLM Platform</title>
+    <title>Edge LLM</title>
   </head>
   <body>
     <div id="root"></div>

frontend/package-lock.json

@@ -16,9 +16,10 @@
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-switch": "^1.2.6",
         "@tailwindcss/typography": "^0.5.16",
+        "ai": "^5.0.27",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "lucide-react": "^0.263.1",
+        "lucide-react": "^0.542.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-markdown": "^10.1.0",
@@ -37,6 +38,51 @@
         "vite": "^4.4.5"
       }
     },
+    "node_modules/@ai-sdk/gateway": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-1.0.15.tgz",
+      "integrity": "sha512-xySXoQ29+KbGuGfmDnABx+O6vc7Gj7qugmj1kGpn0rW0rQNn6UKUuvscKMzWyv1Uv05GyC1vqHq8ZhEOLfXscQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "2.0.0",
+        "@ai-sdk/provider-utils": "3.0.7"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4"
+      }
+    },
+    "node_modules/@ai-sdk/provider": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-2.0.0.tgz",
+      "integrity": "sha512-6o7Y2SeO9vFKB8lArHXehNuusnpddKPk7xqL7T2/b+OvXMRIXUO1rR4wcv1hAFUAT9avGZshty3Wlua/XA7TvA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "json-schema": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@ai-sdk/provider-utils": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-3.0.7.tgz",
+      "integrity": "sha512-o3BS5/t8KnBL3ubP8k3w77AByOypLm+pkIL/DCw0qKkhDbvhCy+L3hRTGPikpdb8WHcylAeKsjgwOxhj4cqTUA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "2.0.0",
+        "@standard-schema/spec": "^1.0.0",
+        "eventsource-parser": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4"
+      }
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -844,6 +890,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@opentelemetry/api": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
+      "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -1569,6 +1624,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
+      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+      "license": "MIT"
+    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
@@ -1736,6 +1797,24 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/ai": {
+      "version": "5.0.27",
+      "resolved": "https://registry.npmjs.org/ai/-/ai-5.0.27.tgz",
+      "integrity": "sha512-V7I9Rvrap5+3ozAjOrETA5Mv9Z1LmQobyY13U88IkFRahFp0xrEwjvYTwjQa4q5lPgLxwKgbIZRLnZSbUQwnUg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/gateway": "1.0.15",
+        "@ai-sdk/provider": "2.0.0",
+        "@ai-sdk/provider-utils": "3.0.7",
+        "@opentelemetry/api": "1.9.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.0.tgz",
@@ -2277,6 +2356,15 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/eventsource-parser": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.5.tgz",
+      "integrity": "sha512-bSRG85ZrMdmWtm7qkF9He9TNRzc/Bm99gEJMaQoHJ9E6Kv9QBbsldh2oMj7iXmYNEAVvNgvv5vPorG6W+XtBhQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -2675,6 +2763,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "license": "(AFL-2.1 OR BSD-3-Clause)"
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -2757,12 +2851,12 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.263.1",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.263.1.tgz",
-      "integrity": "sha512-keqxAx97PlaEN89PXZ6ki1N8nRjGWtDa4021GFYLNj0RgruM5odbpl8GHTExj0hhPq3sF6Up0gnxt6TSHu+ovw==",
+      "version": "0.542.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.542.0.tgz",
+      "integrity": "sha512-w3hD8/SQB7+lzU2r4VdFyzzOzKnUjTZIF/MQJGSSvni7Llewni4vuViRppfRAa2guOsY5k4jZyxw/i9DQHv+dw==",
       "license": "ISC",
       "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/mdast-util-from-markdown": {
@@ -4819,6 +4913,16 @@
         "node": ">= 14.6"
       }
     },
+    "node_modules/zod": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.5.tgz",
+      "integrity": "sha512-rcUUZqlLJgBC33IT3PNMgsCq6TzLQEG/Ei/KTCU0PedSWRMAXoOUN+4t/0H+Q8bdnLPdqUYnvboJT0bn/229qg==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",

frontend/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "build:watch": "tsc && vite build --watch",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -17,9 +18,10 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.6",
     "@tailwindcss/typography": "^0.5.16",
+    "ai": "^5.0.27",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.263.1",
+    "lucide-react": "^0.542.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^10.1.0",

frontend/src/App.tsx

@@ -21,4 +21,3 @@ function App() {
 }
 
 export default App
-

frontend/src/components/Layout.tsx

@@ -0,0 +1,18 @@
+import { Outlet } from 'react-router-dom'
+import { Sidebar } from './Sidebar'
+
+export function Layout() {
+  return (
+    <div className="flex h-screen bg-background">
+      {/* Sidebar */}
+      <div className="w-64 border-r">
+        <Sidebar />
+      </div>
+      
+      {/* Main content */}
+      <div className="flex-1 overflow-hidden">
+        <Outlet />
+      </div>
+    </div>
+  )
+}

frontend/src/components/Sidebar.tsx

@@ -63,24 +63,24 @@ export function Sidebar() {
   const location = useLocation()
 
   return (
-    <div className="flex flex-col h-full bg-muted/30 border-r">
-      {/* Logo/Brand */}
-      <div className="flex items-center h-16 px-6 border-b">
+    <div className="flex h-full flex-col bg-background border-r">
+      {/* Header */}
+      <div className="p-6 border-b">
         <div className="flex items-center gap-2">
-          <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
-            <Brain className="w-5 h-5 text-white" />
+          <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+            <Brain className="h-5 w-5 text-primary-foreground" />
           </div>
           <div>
-            <h1 className="text-lg font-semibold">Edge LLM</h1>
+            <h1 className="font-semibold text-lg">Edge LLM</h1>
             <p className="text-xs text-muted-foreground">Local AI Platform</p>
           </div>
         </div>
       </div>
 
       {/* Navigation */}
-      <div className="flex-1 overflow-y-auto py-4">
-        <div className="px-3 mb-4">
-          <h2 className="mb-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+      <div className="flex-1 px-3 py-4 space-y-8">
+        <div>
+          <h2 className="mb-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
             Get started
           </h2>
           <nav className="space-y-1">
@@ -115,8 +115,8 @@ export function Sidebar() {
         </div>
 
         <div className="px-3">
-          <h2 className="mb-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-            Tools
+          <h2 className="mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+            Advanced
           </h2>
           <nav className="space-y-1">
             {tools.map((item) => {
@@ -140,14 +140,6 @@ export function Sidebar() {
           </nav>
         </div>
       </div>
-
-      {/* Footer */}
-      <div className="border-t p-4">
-        <div className="text-xs text-muted-foreground">
-          <p className="mb-1">Local Model Platform</p>
-          <p>Privacy-focused AI</p>
-        </div>
-      </div>
     </div>
   )
 }

frontend/src/components/chat/ChatContainer.tsx

@@ -1,113 +1,185 @@
-import { useEffect, useRef } from 'react'
-import { ChatMessage } from './ChatMessage'
-import { ChatInput } from './ChatInput'
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+import { Button } from '@/components/ui/button'
+import { Textarea } from '@/components/ui/textarea'
+import { Card } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
 import { Message } from '@/types/chat'
-import { Loader2 } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { Send, Square, Eye, EyeOff, Brain, User, Bot } from 'lucide-react'
 
 interface ChatContainerProps {
   messages: Message[]
   input: string
-  onInputChange: (value: string) => void
+  setInput: (value: string) => void
   onSubmit: () => void
-  onStop?: () => void
-  isLoading?: boolean
+  onStop: () => void
+  isLoading: boolean
   disabled?: boolean
-  className?: string
   placeholder?: string
 }
 
 export function ChatContainer({
   messages,
   input,
-  onInputChange,
+  setInput,
   onSubmit,
   onStop,
-  isLoading = false,
+  isLoading,
   disabled = false,
-  className,
-  placeholder = "Ask me anything..."
+  placeholder = "Type your message..."
 }: ChatContainerProps) {
-  const messagesEndRef = useRef<HTMLDivElement>(null)
-  const messagesContainerRef = useRef<HTMLDivElement>(null)
+  const [showThinking, setShowThinking] = React.useState<{ [key: string]: boolean }>({})
 
-  // Auto-scroll to bottom when new messages arrive
-  useEffect(() => {
-    if (messagesEndRef.current) {
-      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      if (!isLoading && !disabled) {
+        onSubmit()
+      }
     }
-  }, [messages, isLoading])
+  }
 
-  const handleCopyMessage = (content: string) => {
-    navigator.clipboard.writeText(content)
-    // Could add a toast notification here
+  const toggleThinking = (messageId: string) => {
+    setShowThinking(prev => ({
+      ...prev,
+      [messageId]: !prev[messageId]
+    }))
   }
 
   return (
-    <div className={cn("flex flex-col h-full", className)}>
-      {/* Messages Area */}
-      <div 
-        ref={messagesContainerRef}
-        className="flex-1 overflow-y-auto p-4 space-y-4"
-      >
+    <div className="flex flex-col h-full">
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
         {messages.length === 0 ? (
-          <div className="flex-1 flex items-center justify-center text-center">
-            <div className="max-w-md space-y-4">
-              <div className="text-muted-foreground">
-                <h3 className="text-lg font-medium">Start a conversation</h3>
-                <p className="text-sm">
-                  Ask me anything! I can help with coding, writing, analysis, and more.
-                </p>
-              </div>
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center">
+              <Bot className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
+              <h3 className="text-lg font-medium mb-2">Start a conversation</h3>
+              <p className="text-muted-foreground">
+                Ask me anything and I'll help you out!
+              </p>
             </div>
           </div>
         ) : (
-          <>
-            {messages.map((message) => (
-              <div key={message.id} className="group">
-                <ChatMessage
-                  message={message}
-                  onCopy={handleCopyMessage}
-                />
-              </div>
-            ))}
-            
-            {/* Loading indicator */}
-            {isLoading && (
-              <div className="flex gap-3 mb-4">
-                {/* Assistant avatar */}
-                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-muted border flex items-center justify-center">
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                </div>
+          messages.map((message) => (
+            <div key={message.id} className="space-y-3">
+              <div className={`flex items-start gap-3 ${
+                message.role === 'user' ? 'justify-end' : 'justify-start'
+              }`}>
+                {message.role !== 'user' && (
+                  <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
+                    <Bot className="h-4 w-4 text-primary-foreground" />
+                  </div>
+                )}
                 
-                {/* Loading message */}
-                <div className="flex-1 max-w-[80%]">
-                  <div className="bg-muted/50 rounded-lg p-3">
-                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                      <Loader2 className="h-4 w-4 animate-spin" />
-                      <span>Thinking...</span>
+                <Card className={`max-w-[80%] ${
+                  message.role === 'user' 
+                    ? 'bg-primary text-primary-foreground' 
+                    : 'bg-muted'
+                }`}>
+                  <div className="p-4">
+                    <div className="flex items-center gap-2 mb-2">
+                      {message.role === 'user' ? (
+                        <User className="h-4 w-4" />
+                      ) : (
+                        <Bot className="h-4 w-4" />
+                      )}
+                      <span className="text-sm font-medium capitalize">
+                        {message.role === 'user' ? 'You' : 'Assistant'}
+                      </span>
+                      {message.model_used && (
+                        <Badge variant="outline" className="text-xs">
+                          {message.model_used}
+                        </Badge>
+                      )}
                     </div>
+                    
+                    {/* Thinking content */}
+                    {message.thinking_content && message.supports_thinking && (
+                      <div className="mb-3">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => toggleThinking(message.id)}
+                          className="p-1 h-auto"
+                        >
+                          <Brain className="h-3 w-3 mr-1" />
+                          {showThinking[message.id] ? (
+                            <>
+                              <EyeOff className="h-3 w-3 mr-1" />
+                              Hide thinking
+                            </>
+                          ) : (
+                            <>
+                              <Eye className="h-3 w-3 mr-1" />
+                              Show thinking
+                            </>
+                          )}
+                        </Button>
+                        
+                        {showThinking[message.id] && (
+                          <div className="mt-2 p-3 bg-background/50 rounded border-l-4 border-blue-500">
+                            <div className="text-xs text-muted-foreground mb-1">Thinking process:</div>
+                            <ReactMarkdown 
+                              components={{
+                                p: ({ children }) => <p className="text-sm prose prose-sm max-w-none">{children}</p>
+                              }}
+                            >
+                              {message.thinking_content}
+                            </ReactMarkdown>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                    
+                    {/* Main content */}
+                    <ReactMarkdown 
+                      components={{
+                        p: ({ children }) => <p className="prose prose-sm max-w-none">{children}</p>
+                      }}
+                    >
+                      {message.content}
+                    </ReactMarkdown>
                   </div>
-                </div>
+                </Card>
+                
+                {message.role === 'user' && (
+                  <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
+                    <User className="h-4 w-4" />
+                  </div>
+                )}
               </div>
-            )}
-          </>
+            </div>
+          ))
         )}
-        
-        {/* Scroll anchor */}
-        <div ref={messagesEndRef} />
       </div>
 
-      {/* Input Area */}
-      <ChatInput
-        value={input}
-        onChange={onInputChange}
-        onSubmit={onSubmit}
-        onStop={onStop}
-        isLoading={isLoading}
-        disabled={disabled}
-        placeholder={placeholder}
-      />
+      {/* Input area */}
+      <div className="border-t p-4">
+        <div className="flex gap-2">
+          <Textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyPress={handleKeyPress}
+            placeholder={placeholder}
+            disabled={disabled}
+            className="min-h-[60px] resize-none"
+          />
+          {isLoading ? (
+            <Button onClick={onStop} variant="outline" size="icon">
+              <Square className="h-4 w-4" />
+            </Button>
+          ) : (
+            <Button 
+              onClick={onSubmit} 
+              disabled={disabled || !input.trim()}
+              size="icon"
+            >
+              <Send className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
     </div>
   )
 }

frontend/src/components/chat/ChatInput.tsx

@@ -1,138 +0,0 @@
-import { useState, useRef, useEffect } from 'react'
-import { Button } from '@/components/ui/button'
-import { Textarea } from '@/components/ui/textarea'
-import { 
-  Send, 
-  Square, 
-  Paperclip 
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
-
-interface ChatInputProps {
-  value: string
-  onChange: (value: string) => void
-  onSubmit: () => void
-  onStop?: () => void
-  isLoading?: boolean
-  disabled?: boolean
-  placeholder?: string
-  maxRows?: number
-}
-
-export function ChatInput({
-  value,
-  onChange,
-  onSubmit,
-  onStop,
-  isLoading = false,
-  disabled = false,
-  placeholder = "Type your message...",
-  maxRows = 6
-}: ChatInputProps) {
-  const textareaRef = useRef<HTMLTextAreaElement>(null)
-  const [rows, setRows] = useState(1)
-
-  // Auto-resize textarea
-  useEffect(() => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto'
-      const scrollHeight = textareaRef.current.scrollHeight
-      const rowHeight = 24 // Approximate line height
-      const newRows = Math.min(Math.max(Math.ceil(scrollHeight / rowHeight), 1), maxRows)
-      setRows(newRows)
-    }
-  }, [value, maxRows])
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault()
-      if (!isLoading && value.trim() && !disabled) {
-        onSubmit()
-      }
-    }
-  }
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!isLoading && value.trim() && !disabled) {
-      onSubmit()
-    }
-  }
-
-  const canSend = value.trim() && !disabled && !isLoading
-
-  return (
-    <div className="border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="p-4">
-        <form onSubmit={handleSubmit} className="space-y-3">
-          {/* Main input area */}
-          <div className="relative flex items-end gap-2">
-            <div className="flex-1 relative">
-              <Textarea
-                ref={textareaRef}
-                value={value}
-                onChange={(e) => onChange(e.target.value)}
-                onKeyDown={handleKeyDown}
-                placeholder={placeholder}
-                disabled={disabled}
-                rows={rows}
-                className={cn(
-                  "min-h-[40px] max-h-[150px] resize-none pr-12",
-                  "focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
-                  "placeholder:text-muted-foreground"
-                )}
-                style={{
-                  lineHeight: '1.5',
-                }}
-              />
-              
-              {/* Attachment button (placeholder) */}
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="absolute right-2 bottom-2 h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
-                disabled={disabled}
-              >
-                <Paperclip className="h-4 w-4" />
-              </Button>
-            </div>
-
-            {/* Send/Stop button */}
-            {isLoading ? (
-              <Button
-                type="button"
-                variant="destructive"
-                size="sm"
-                onClick={onStop}
-                className="h-10 w-10 p-0"
-              >
-                <Square className="h-4 w-4" />
-              </Button>
-            ) : (
-              <Button
-                type="submit"
-                size="sm"
-                disabled={!canSend}
-                className={cn(
-                  "h-10 w-10 p-0 transition-colors",
-                  canSend 
-                    ? "bg-blue-500 hover:bg-blue-600 text-white" 
-                    : "bg-muted text-muted-foreground"
-                )}
-              >
-                <Send className="h-4 w-4" />
-              </Button>
-            )}
-          </div>
-
-          {/* Helper text */}
-          <div className="flex items-center justify-between text-xs text-muted-foreground">
-            <span>Press Enter to send, Shift+Enter for new line</span>
-            <span>{value.length} characters</span>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-}

frontend/src/components/chat/ChatMessage.tsx

@@ -1,192 +0,0 @@
-import { useState } from 'react'
-import { Card, CardContent } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import { Message } from '@/types/chat'
-import ReactMarkdown from 'react-markdown'
-import { 
-  Copy, 
-  User, 
-  Bot, 
-  Brain, 
-  Zap, 
-  ChevronDown, 
-  ChevronUp,
-  MessageSquare
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
-
-interface ChatMessageProps {
-  message: Message
-  onCopy?: (content: string) => void
-}
-
-export function ChatMessage({ message, onCopy }: ChatMessageProps) {
-  const [showThinking, setShowThinking] = useState(false)
-  const isUser = message.role === 'user'
-  const isSystem = message.role === 'system'
-
-  const handleCopy = () => {
-    if (onCopy) {
-      onCopy(message.content)
-    } else {
-      navigator.clipboard.writeText(message.content)
-    }
-  }
-
-  const formatTime = (timestamp: number) => {
-    return new Date(timestamp).toLocaleTimeString([], { 
-      hour: '2-digit', 
-      minute: '2-digit' 
-    })
-  }
-
-  if (isSystem) {
-    return (
-      <div className="flex justify-center my-4">
-        <Badge variant="outline" className="text-xs">
-          <MessageSquare className="h-3 w-3 mr-1" />
-          System prompt set
-        </Badge>
-      </div>
-    )
-  }
-
-  return (
-    <div className={cn(
-      "flex gap-3 mb-4",
-      isUser ? "flex-row-reverse" : "flex-row"
-    )}>
-      {/* Avatar */}
-      <div className={cn(
-        "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center",
-        isUser 
-          ? "bg-blue-500 text-white" 
-          : "bg-muted border"
-      )}>
-        {isUser ? (
-          <User className="h-4 w-4" />
-        ) : message.supports_thinking ? (
-          <Brain className="h-4 w-4" />
-        ) : (
-          <Bot className="h-4 w-4" />
-        )}
-      </div>
-
-      {/* Message Content */}
-      <div className={cn(
-        "flex-1 max-w-[80%] space-y-2",
-        isUser ? "items-end" : "items-start"
-      )}>
-        {/* Message Bubble */}
-        <Card className={cn(
-          "relative",
-          isUser 
-            ? "bg-blue-500 text-white border-blue-500" 
-            : "bg-muted/50"
-        )}>
-          <CardContent className="p-3">
-            {/* Model info for assistant messages */}
-            {!isUser && message.model_used && (
-              <div className="flex items-center gap-2 mb-2 text-xs text-muted-foreground">
-                {message.supports_thinking ? <Brain className="h-3 w-3" /> : <Zap className="h-3 w-3" />}
-                <span>{message.model_used}</span>
-                <Badge variant="secondary" className="text-xs">
-                  {message.supports_thinking ? "Thinking" : "Instruct"}
-                </Badge>
-              </div>
-            )}
-
-            {/* Thinking Content Toggle */}
-            {!isUser && message.thinking_content && (
-              <div className="mb-3">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setShowThinking(!showThinking)}
-                  className="h-auto p-2 text-xs font-normal"
-                >
-                  <Brain className="h-3 w-3 mr-2" />
-                  Thinking Process
-                  {showThinking ? (
-                    <ChevronUp className="h-3 w-3 ml-2" />
-                  ) : (
-                    <ChevronDown className="h-3 w-3 ml-2" />
-                  )}
-                </Button>
-                
-                {showThinking && (
-                  <Card className="mt-2 bg-background/50">
-                    <CardContent className="p-3">
-                      <pre className="text-xs font-mono whitespace-pre-wrap text-muted-foreground">
-                        {message.thinking_content}
-                      </pre>
-                    </CardContent>
-                  </Card>
-                )}
-              </div>
-            )}
-
-            {/* Main Message Content */}
-            <div className="text-sm">
-              {isUser ? (
-                <div className="whitespace-pre-wrap">{message.content}</div>
-              ) : (
-                <div className="prose prose-sm max-w-none dark:prose-invert
-                  prose-headings:font-semibold prose-headings:text-foreground
-                  prose-p:text-foreground prose-p:leading-relaxed
-                  prose-strong:text-foreground prose-strong:font-semibold
-                  prose-em:text-muted-foreground
-                  prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-sm
-                  prose-pre:bg-muted prose-pre:border prose-pre:rounded-md
-                  prose-ul:text-foreground prose-ol:text-foreground
-                  prose-li:text-foreground
-                  prose-blockquote:border-l-muted-foreground prose-blockquote:text-muted-foreground">
-                  <ReactMarkdown 
-                    components={{
-                      // Custom component for better styling
-                      h1: ({children}) => <h1 className="text-lg font-bold mb-2 text-foreground">{children}</h1>,
-                      h2: ({children}) => <h2 className="text-base font-semibold mb-2 text-foreground">{children}</h2>,
-                      h3: ({children}) => <h3 className="text-sm font-semibold mb-1 text-foreground">{children}</h3>,
-                      p: ({children}) => <p className="mb-2 last:mb-0 text-foreground leading-relaxed">{children}</p>,
-                      strong: ({children}) => <strong className="font-semibold text-foreground">{children}</strong>,
-                      em: ({children}) => <em className="italic text-muted-foreground">{children}</em>,
-                      code: ({children}) => <code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{children}</code>,
-                      ul: ({children}) => <ul className="mb-2 space-y-1 text-foreground">{children}</ul>,
-                      ol: ({children}) => <ol className="mb-2 space-y-1 text-foreground">{children}</ol>,
-                      li: ({children}) => <li className="text-foreground">{children}</li>,
-                    }}
-                  >
-                    {message.content}
-                  </ReactMarkdown>
-                </div>
-              )}
-            </div>
-          </CardContent>
-
-          {/* Message Actions */}
-          {!isUser && (
-            <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleCopy}
-                className="h-6 w-6 p-0"
-              >
-                <Copy className="h-3 w-3" />
-              </Button>
-            </div>
-          )}
-        </Card>
-
-        {/* Timestamp */}
-        <div className={cn(
-          "text-xs text-muted-foreground px-1",
-          isUser ? "text-right" : "text-left"
-        )}>
-          {formatTime(message.timestamp)}
-        </div>
-      </div>
-    </div>
-  )
-}

frontend/src/components/chat/ChatSessions.tsx

@@ -1,16 +1,16 @@
-import { useState } from 'react'
+import React from 'react'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
+import { Card } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
+import { ChatSession } from '@/types/chat'
 import { 
   Plus, 
   MessageSquare, 
   Trash2, 
-  Edit3,
-  Calendar
+  Edit2, 
+  Check, 
+  X
 } from 'lucide-react'
-import { ChatSession } from '@/types/chat'
-import { cn } from '@/lib/utils'
 
 interface ChatSessionsProps {
   sessions: ChatSession[]
@@ -18,7 +18,7 @@ interface ChatSessionsProps {
   onSelectSession: (sessionId: string) => void
   onNewSession: () => void
   onDeleteSession: (sessionId: string) => void
-  onRenameSession?: (sessionId: string, newTitle: string) => void
+  onRenameSession: (sessionId: string, newTitle: string) => void
 }
 
 export function ChatSessions({
@@ -29,182 +29,141 @@ export function ChatSessions({
   onDeleteSession,
   onRenameSession
 }: ChatSessionsProps) {
-  const [editingSession, setEditingSession] = useState<string | null>(null)
-  const [editTitle, setEditTitle] = useState('')
+  const [editingId, setEditingId] = React.useState<string | null>(null)
+  const [editTitle, setEditTitle] = React.useState('')
 
-  const handleStartEdit = (session: ChatSession) => {
-    setEditingSession(session.id)
+  const startEditing = (session: ChatSession) => {
+    setEditingId(session.id)
     setEditTitle(session.title)
   }
 
-  const handleSaveEdit = () => {
-    if (editingSession && editTitle.trim() && onRenameSession) {
-      onRenameSession(editingSession, editTitle.trim())
+  const finishEditing = () => {
+    if (editingId && editTitle.trim()) {
+      onRenameSession(editingId, editTitle.trim())
     }
-    setEditingSession(null)
+    setEditingId(null)
     setEditTitle('')
   }
 
-  const handleCancelEdit = () => {
-    setEditingSession(null)
+  const cancelEditing = () => {
+    setEditingId(null)
     setEditTitle('')
   }
 
-  const formatDate = (timestamp: number) => {
-    const date = new Date(timestamp)
-    const now = new Date()
-    const diffTime = now.getTime() - date.getTime()
-    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
-    
-    if (diffDays === 0) {
-      return 'Today'
-    } else if (diffDays === 1) {
-      return 'Yesterday'
-    } else if (diffDays < 7) {
-      return `${diffDays} days ago`
-    } else {
-      return date.toLocaleDateString()
-    }
-  }
-
-  const groupedSessions = sessions.reduce((groups, session) => {
-    const date = formatDate(session.updated_at)
-    if (!groups[date]) {
-      groups[date] = []
-    }
-    groups[date].push(session)
-    return groups
-  }, {} as Record<string, ChatSession[]>)
-
   return (
     <div className="h-full flex flex-col">
       {/* Header */}
       <div className="p-4 border-b">
-        <div className="flex items-center justify-between mb-3">
-          <h2 className="font-semibold text-sm">Chat Sessions</h2>
-          <Button
-            onClick={onNewSession}
-            size="sm"
-            className="h-8 w-8 p-0"
-          >
-            <Plus className="h-4 w-4" />
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="font-semibold">Chat Sessions</h2>
+          <Button onClick={onNewSession} size="sm">
+            <Plus className="h-4 w-4 mr-1" />
+            New
           </Button>
         </div>
-        
-        <Button
-          onClick={onNewSession}
-          variant="outline"
-          className="w-full justify-start"
-          size="sm"
-        >
-          <Plus className="h-4 w-4 mr-2" />
-          New Chat
-        </Button>
       </div>
 
-      {/* Sessions List */}
-      <div className="flex-1 overflow-y-auto p-2 space-y-4">
-        {Object.keys(groupedSessions).length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-32 text-center">
-            <MessageSquare className="h-8 w-8 text-muted-foreground mb-2" />
-            <p className="text-sm text-muted-foreground">No chat sessions yet</p>
-            <p className="text-xs text-muted-foreground">Start a new conversation</p>
+      {/* Sessions list */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-2">
+        {sessions.length === 0 ? (
+          <div className="text-center py-8">
+            <MessageSquare className="h-8 w-8 mx-auto text-muted-foreground mb-2" />
+            <p className="text-sm text-muted-foreground">No conversations yet</p>
+            <Button onClick={onNewSession} variant="outline" size="sm" className="mt-2">
+              Start your first chat
+            </Button>
           </div>
         ) : (
-          Object.entries(groupedSessions).map(([date, sessionGroup]) => (
-            <div key={date} className="space-y-2">
-              {/* Date Group Header */}
-              <div className="flex items-center gap-2 px-2">
-                <Calendar className="h-3 w-3 text-muted-foreground" />
-                <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                  {date}
-                </span>
-              </div>
-              
-              {/* Sessions in this date group */}
-              <div className="space-y-1">
-                {sessionGroup.map((session) => (
-                  <Card
-                    key={session.id}
-                    className={cn(
-                      "cursor-pointer transition-colors hover:bg-accent/50 group",
-                      currentSessionId === session.id && "bg-accent border-primary"
-                    )}
-                    onClick={() => onSelectSession(session.id)}
-                  >
-                    <CardContent className="p-3">
-                      {editingSession === session.id ? (
-                        <div className="space-y-2">
-                          <input
-                            type="text"
-                            value={editTitle}
-                            onChange={(e) => setEditTitle(e.target.value)}
-                            className="w-full text-sm bg-transparent border border-input rounded px-2 py-1"
-                            onKeyDown={(e) => {
-                              if (e.key === 'Enter') handleSaveEdit()
-                              if (e.key === 'Escape') handleCancelEdit()
-                            }}
-                            autoFocus
-                          />
-                          <div className="flex gap-1">
-                            <Button size="sm" onClick={handleSaveEdit} className="h-6 px-2 text-xs">
-                              Save
-                            </Button>
-                            <Button size="sm" variant="outline" onClick={handleCancelEdit} className="h-6 px-2 text-xs">
-                              Cancel
-                            </Button>
-                          </div>
-                        </div>
-                      ) : (
-                        <div className="space-y-2">
-                          <div className="flex items-start justify-between">
-                            <h3 className="text-sm font-medium line-clamp-2 flex-1 mr-2">
-                              {session.title}
-                            </h3>
-                            
-                            <div className="opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
-                              {onRenameSession && (
-                                <Button
-                                  variant="ghost"
-                                  size="sm"
-                                  onClick={(e) => {
-                                    e.stopPropagation()
-                                    handleStartEdit(session)
-                                  }}
-                                  className="h-6 w-6 p-0"
-                                >
-                                  <Edit3 className="h-3 w-3" />
-                                </Button>
-                              )}
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={(e) => {
-                                  e.stopPropagation()
-                                  onDeleteSession(session.id)
-                                }}
-                                className="h-6 w-6 p-0 text-destructive hover:text-destructive"
-                              >
-                                <Trash2 className="h-3 w-3" />
-                              </Button>
-                            </div>
-                          </div>
-                          
-                          <div className="flex items-center justify-between text-xs text-muted-foreground">
-                            <span>{session.messages.length} messages</span>
-                            {session.model_name && (
-                              <Badge variant="outline" className="text-xs">
-                                {session.model_name.split('/').pop()?.split('-')[0]}
-                              </Badge>
-                            )}
-                          </div>
-                        </div>
-                      )}
-                    </CardContent>
-                  </Card>
-                ))}
+          sessions.map((session) => (
+            <Card 
+              key={session.id}
+              className={`p-3 cursor-pointer transition-colors hover:bg-accent ${
+                currentSessionId === session.id ? 'bg-accent border-primary' : ''
+              }`}
+              onClick={() => onSelectSession(session.id)}
+            >
+              <div className="space-y-2">
+                {/* Title */}
+                {editingId === session.id ? (
+                  <div className="flex items-center gap-1">
+                    <input
+                      value={editTitle}
+                      onChange={(e) => setEditTitle(e.target.value)}
+                      onKeyPress={(e) => {
+                        if (e.key === 'Enter') finishEditing()
+                        if (e.key === 'Escape') cancelEditing()
+                      }}
+                      className="flex-1 text-sm bg-background border rounded px-2 py-1"
+                      autoFocus
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                    <Button 
+                      size="sm" 
+                      variant="ghost" 
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        finishEditing()
+                      }}
+                    >
+                      <Check className="h-3 w-3" />
+                    </Button>
+                    <Button 
+                      size="sm" 
+                      variant="ghost" 
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        cancelEditing()
+                      }}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="flex items-start justify-between">
+                    <h3 className="font-medium text-sm line-clamp-2">
+                      {session.title}
+                    </h3>
+                    <div className="flex items-center gap-1 ml-2">
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          startEditing(session)
+                        }}
+                        className="h-6 w-6 p-0"
+                      >
+                        <Edit2 className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          onDeleteSession(session.id)
+                        }}
+                        className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  </div>
+                )}
+
+                {/* Metadata */}
+                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                  <span>{session.messages.length} messages</span>
+                  <span>{new Date(session.updatedAt).toLocaleDateString()}</span>
+                </div>
+
+                {/* Model info */}
+                {session.model && (
+                  <Badge variant="outline" className="text-xs">
+                    {session.model}
+                  </Badge>
+                )}
               </div>
-            </div>
+            </Card>
           ))
         )}
       </div>

frontend/src/components/chat/index.ts

@@ -1,4 +0,0 @@
-export { ChatContainer } from './ChatContainer'
-export { ChatInput } from './ChatInput'
-export { ChatMessage } from './ChatMessage'
-export { ChatSessions } from './ChatSessions'

frontend/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,138 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

frontend/src/components/ui/badge.tsx

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

frontend/src/components/ui/button.tsx

@@ -1,30 +1,28 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
       },
     },
     defaultVariants: {

frontend/src/components/ui/card.tsx

@@ -1,5 +1,4 @@
 import * as React from "react"
-
 import { cn } from "@/lib/utils"
 
 const Card = React.forwardRef<
@@ -9,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
       className
     )}
     {...props}
@@ -21,31 +20,30 @@ const CardHeader = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
+  <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
 ))
 CardHeader.displayName = "CardHeader"
 
 const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
-  <div
+  <h3
     ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
     {...props}
   />
 ))
 CardTitle.displayName = "CardTitle"
 
 const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div
+  <p
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
@@ -65,11 +63,7 @@ const CardFooter = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
+  <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
 ))
 CardFooter.displayName = "CardFooter"
 

frontend/src/components/ui/chat.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Textarea } from '@/components/ui/textarea'
+import { Send, Square, User, Bot } from 'lucide-react'
+
+export interface ChatProps extends React.HTMLAttributes<HTMLDivElement> {
+  messages: Array<{
+    id: string
+    role: 'user' | 'assistant' | 'system'
+    content: string
+    createdAt?: Date
+  }>
+  input: string
+  handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
+  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void
+  isGenerating?: boolean
+  stop?: () => void
+}
+
+const Chat = React.forwardRef<HTMLDivElement, ChatProps>(
+  ({ className, messages, input, handleInputChange, handleSubmit, isGenerating, stop, ...props }, ref) => {
+    const messagesEndRef = React.useRef<HTMLDivElement>(null)
+
+    const scrollToBottom = () => {
+      messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+    }
+
+    React.useEffect(() => {
+      console.log('Chat component - messages updated:', messages.length, messages.map(m => ({ id: m.id, role: m.role, content: m.content.slice(0, 50) + '...' })))
+      scrollToBottom()
+    }, [messages])
+
+    return (
+      <div
+        className={cn('flex h-full flex-col', className)}
+        ref={ref}
+        {...props}
+      >
+        {/* Messages */}
+        <div className="flex-1 overflow-y-auto p-4 space-y-4">
+          {messages.length === 0 ? (
+            <div className="flex items-center justify-center h-full text-muted-foreground">
+              <p>No messages yet. Start a conversation!</p>
+            </div>
+          ) : (
+            messages.map((message, index) => (
+              <div
+                key={`${message.id}-${index}`}
+                className={cn(
+                  'flex gap-3 w-full',
+                  message.role === 'user' ? 'justify-end' : 'justify-start'
+                )}
+              >
+                {/* Avatar for assistant */}
+                {message.role !== 'user' && (
+                  <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
+                    <Bot className="h-4 w-4 text-primary-foreground" />
+                  </div>
+                )}
+                
+                {/* Message content */}
+                <div
+                  className={cn(
+                    'max-w-[75%] flex flex-col gap-2 rounded-lg px-3 py-2 text-sm',
+                    message.role === 'user'
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted'
+                  )}
+                >
+                  <div className="text-xs opacity-70">
+                    {message.role === 'user' ? 'You' : 'Assistant'} • #{index + 1}
+                  </div>
+                  <div className="leading-relaxed">
+                    {message.content}
+                  </div>
+                </div>
+                
+                {/* Avatar for user */}
+                {message.role === 'user' && (
+                  <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
+                    <User className="h-4 w-4" />
+                  </div>
+                )}
+              </div>
+            ))
+          )}
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* Input */}
+        <div className="border-t p-4">
+          <form onSubmit={handleSubmit} className="flex gap-2">
+            <Textarea
+              value={input}
+              onChange={handleInputChange}
+              placeholder="Type your message..."
+              className="min-h-[60px] resize-none"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault()
+                  handleSubmit(e as any)
+                }
+              }}
+            />
+            {isGenerating ? (
+              <Button type="button" onClick={stop} variant="outline" size="icon">
+                <Square className="h-4 w-4" />
+              </Button>
+            ) : (
+              <Button type="submit" disabled={!input.trim()} size="icon">
+                <Send className="h-4 w-4" />
+              </Button>
+            )}
+          </form>
+        </div>
+      </div>
+    )
+  }
+)
+Chat.displayName = 'Chat'
+
+export { Chat }

frontend/src/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

frontend/src/components/ui/label.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

frontend/src/components/ui/select.tsx

@@ -0,0 +1,156 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

frontend/src/components/ui/slider.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

frontend/src/components/ui/switch.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

frontend/src/components/ui/textarea.tsx

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

frontend/src/hooks/useChat.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { Message, ChatSession, MessageStatus } from '@/types/chat'
 import { chatStorage } from '@/lib/chat-storage'
 
@@ -17,8 +17,8 @@ interface ApiResponse {
 
 export function useChat(options: UseChatOptions = {}) {
   const {
-    api_endpoint = 'http://localhost:8000/generate',
-    defaultModel = 'Qwen/Qwen3-4B-Instruct-2507',
+    api_endpoint = `${window.location.origin}/generate`,
+    defaultModel = 'Qwen/Qwen3-30B-A3B',
     defaultSystemPrompt = ''
   } = options
 
@@ -37,9 +37,22 @@ export function useChat(options: UseChatOptions = {}) {
   const [temperature, setTemperature] = useState(0.7)
   const [maxTokens, setMaxTokens] = useState(1024)
 
-  // Current session
-  const currentSession = sessions.find(s => s.id === currentSessionId) || null
-  const messages = currentSession?.messages || []
+  // Current session - add dependency on sessions to force re-render
+  const currentSession = React.useMemo(() => {
+    const session = sessions.find((s: any) => s.id === currentSessionId) || null
+    console.log('useChat - currentSession updated:', { 
+      sessionId: currentSessionId, 
+      found: !!session, 
+      messageCount: session?.messages?.length || 0 
+    })
+    return session
+  }, [sessions, currentSessionId])
+  
+  const messages = React.useMemo(() => {
+    const msgs = currentSession?.messages || []
+    console.log('useChat - messages computed:', msgs.length, msgs.map(m => ({ id: m.id, role: m.role })))
+    return msgs
+  }, [currentSession?.messages])
 
   // Load sessions on mount
   useEffect(() => {
@@ -66,7 +79,8 @@ export function useChat(options: UseChatOptions = {}) {
     )
     
     // Update React state with all sessions from localStorage
-    setSessions(chatStorage.getAllSessions())
+    const updatedSessions = chatStorage.getAllSessions()
+    setSessions([...updatedSessions]) // Force update with new array reference
     setCurrentSessionId(newSession.id)
     chatStorage.setCurrentSession(newSession.id)
     
@@ -83,7 +97,7 @@ export function useChat(options: UseChatOptions = {}) {
   const deleteSession = useCallback((sessionId: string) => {
     chatStorage.deleteSession(sessionId)
     const updatedSessions = chatStorage.getAllSessions()
-    setSessions(updatedSessions)
+    setSessions([...updatedSessions]) // Force update with new array reference
     
     if (currentSessionId === sessionId) {
       if (updatedSessions.length > 0) {
@@ -98,7 +112,8 @@ export function useChat(options: UseChatOptions = {}) {
   // Rename session
   const renameSession = useCallback((sessionId: string, newTitle: string) => {
     chatStorage.updateSession(sessionId, { title: newTitle })
-    setSessions(chatStorage.getAllSessions())
+    const updatedSessions = chatStorage.getAllSessions()
+    setSessions([...updatedSessions]) // Force update with new array reference
   }, [])
 
   // Add message to current session
@@ -106,7 +121,9 @@ export function useChat(options: UseChatOptions = {}) {
     if (!currentSessionId) return
 
     chatStorage.addMessageToSession(currentSessionId, message)
-    setSessions(chatStorage.getAllSessions())
+    // Force update with new array reference
+    const updatedSessions = chatStorage.getAllSessions()
+    setSessions([...updatedSessions])
   }, [currentSessionId])
 
   // Send message
@@ -130,7 +147,9 @@ export function useChat(options: UseChatOptions = {}) {
         role: 'user',
         content: userMessage
       })
-      setSessions(chatStorage.getAllSessions())
+      // Force update sessions state with fresh data
+      const updatedSessions = chatStorage.getAllSessions()
+      setSessions([...updatedSessions]) // Create new array reference to force re-render
     }
 
     // Add system message if system prompt is set
@@ -143,10 +162,21 @@ export function useChat(options: UseChatOptions = {}) {
         role: 'system',
         content: systemPrompt
       })
-      setSessions(chatStorage.getAllSessions())
+      // Force update sessions state with fresh data
+      const updatedSessions = chatStorage.getAllSessions()
+      setSessions([...updatedSessions]) // Create new array reference to force re-render
     }
 
     try {
+      // Get conversation history (excluding system messages for the API)
+      const actualSession = chatStorage.getSession(sessionId!)
+      const conversationHistory = actualSession?.messages
+        ?.filter((msg: any) => msg.role !== 'system')
+        ?.map((msg: any) => ({
+          role: msg.role,
+          content: msg.content
+        })) || []
+
       const response = await fetch(api_endpoint, {
         method: 'POST',
         headers: {
@@ -154,6 +184,7 @@ export function useChat(options: UseChatOptions = {}) {
         },
         body: JSON.stringify({
           prompt: userMessage,
+          messages: conversationHistory,
           system_prompt: systemPrompt || null,
           model_name: selectedModel,
           temperature,
@@ -177,7 +208,9 @@ export function useChat(options: UseChatOptions = {}) {
           model_used: data.model_used,
           supports_thinking: data.supports_thinking
         })
-        setSessions(chatStorage.getAllSessions())
+        // Force update sessions state with fresh data
+        const updatedSessions = chatStorage.getAllSessions()
+        setSessions([...updatedSessions]) // Create new array reference to force re-render
       }
 
       setStatus({ isLoading: false, error: null })
@@ -191,7 +224,9 @@ export function useChat(options: UseChatOptions = {}) {
           role: 'assistant',
           content: `Sorry, I encountered an error: ${errorMessage}`
         })
-        setSessions(chatStorage.getAllSessions())
+        // Force update sessions state with fresh data
+        const updatedSessions = chatStorage.getAllSessions()
+        setSessions([...updatedSessions]) // Create new array reference to force re-render
       }
     }
   }, [

frontend/src/index.css

@@ -3,115 +3,52 @@
 @tailwind utilities;
 
 @layer base {
-  body {
-    @apply bg-gray-50 text-gray-900;
-  }
   :root {
-
     --background: 0 0% 100%;
-
-    --foreground: 0 0% 3.9%;
-
+    --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
-
-    --card-foreground: 0 0% 3.9%;
-
+    --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
-
-    --popover-foreground: 0 0% 3.9%;
-
-    --primary: 0 0% 9%;
-
-    --primary-foreground: 0 0% 98%;
-
-    --secondary: 0 0% 96.1%;
-
-    --secondary-foreground: 0 0% 9%;
-
-    --muted: 0 0% 96.1%;
-
-    --muted-foreground: 0 0% 45.1%;
-
-    --accent: 0 0% 96.1%;
-
-    --accent-foreground: 0 0% 9%;
-
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
     --destructive: 0 84.2% 60.2%;
-
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 0 0% 89.8%;
-
-    --input: 0 0% 89.8%;
-
-    --ring: 0 0% 3.9%;
-
-    --chart-1: 12 76% 61%;
-
-    --chart-2: 173 58% 39%;
-
-    --chart-3: 197 37% 24%;
-
-    --chart-4: 43 74% 66%;
-
-    --chart-5: 27 87% 67%;
-
-    --radius: 0.5rem
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
   }
-  .dark {
-
-    --background: 0 0% 3.9%;
-
-    --foreground: 0 0% 98%;
-
-    --card: 0 0% 3.9%;
-
-    --card-foreground: 0 0% 98%;
-
-    --popover: 0 0% 3.9%;
-
-    --popover-foreground: 0 0% 98%;
-
-    --primary: 0 0% 98%;
-
-    --primary-foreground: 0 0% 9%;
-
-    --secondary: 0 0% 14.9%;
-
-    --secondary-foreground: 0 0% 98%;
-
-    --muted: 0 0% 14.9%;
-
-    --muted-foreground: 0 0% 63.9%;
-
-    --accent: 0 0% 14.9%;
-
-    --accent-foreground: 0 0% 98%;
 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 84% 4.9%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
     --destructive: 0 62.8% 30.6%;
-
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 0 0% 14.9%;
-
-    --input: 0 0% 14.9%;
-
-    --ring: 0 0% 83.1%;
-
-    --chart-1: 220 70% 50%;
-
-    --chart-2: 160 60% 45%;
-
-    --chart-3: 30 80% 55%;
-
-    --chart-4: 280 65% 60%;
-
-    --chart-5: 340 75% 55%
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 94.1%;
   }
 }
 
-
-
 @layer base {
   * {
     @apply border-border;
@@ -120,19 +57,3 @@
     @apply bg-background text-foreground;
   }
 }
-
-@layer utilities {
-  .line-clamp-2 {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  
-  .line-clamp-3 {
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-}

frontend/src/lib/chat-storage.ts

@@ -1,132 +1,105 @@
-import { ChatSession, Message, ChatStore } from '@/types/chat'
+import { ChatSession, Message } from '@/types/chat'
 
-const STORAGE_KEY = 'edge-llm-chat-store'
+const STORAGE_KEYS = {
+  sessions: 'edge-llm-sessions',
+  currentSession: 'edge-llm-current-session'
+}
 
-export const chatStorage = {
-  // Load all chat data from localStorage
-  load(): ChatStore {
-    try {
-      const stored = localStorage.getItem(STORAGE_KEY)
-      if (!stored) {
-        return { sessions: [], current_session_id: null }
-      }
-      return JSON.parse(stored)
-    } catch (error) {
-      console.error('Failed to load chat store:', error)
-      return { sessions: [], current_session_id: null }
-    }
-  },
+function generateId(): string {
+  return Math.random().toString(36).substring(2) + Date.now().toString(36)
+}
 
-  // Save chat data to localStorage
-  save(store: ChatStore): void {
-    try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(store))
-    } catch (error) {
-      console.error('Failed to save chat store:', error)
-    }
-  },
+function generateMessageId(): string {
+  return generateId()
+}
+
+class ChatStorageManager {
+  getAllSessions(): ChatSession[] {
+    const stored = localStorage.getItem(STORAGE_KEYS.sessions)
+    return stored ? JSON.parse(stored) : []
+  }
+
+  getSession(sessionId: string): ChatSession | null {
+    const sessions = this.getAllSessions()
+    return sessions.find(s => s.id === sessionId) || null
+  }
 
-  // Create a new chat session
-  createSession(title?: string, model_name?: string, system_prompt?: string): ChatSession {
-    const now = Date.now()
+  createSession(title?: string, model?: string, systemPrompt?: string): ChatSession {
     const newSession: ChatSession = {
-      id: `session_${now}_${Math.random().toString(36).substr(2, 9)}`,
-      title: title || `New Chat ${new Date(now).toLocaleDateString()}`,
+      id: generateId(),
+      title: title || `New Chat ${new Date().toLocaleString()}`,
       messages: [],
-      created_at: now,
-      updated_at: now,
-      model_name,
-      system_prompt,
+      model,
+      systemPrompt,
+      createdAt: Date.now(),
+      updatedAt: Date.now()
     }
-    
-    // Save the new session to localStorage immediately
-    const store = this.load()
-    store.sessions.unshift(newSession)  // Add to beginning of array
-    this.save(store)
-    
-    return newSession
-  },
 
-  // Add message to session
-  addMessageToSession(sessionId: string, message: Omit<Message, 'id' | 'timestamp'>): void {
-    const store = this.load()
-    const session = store.sessions.find(s => s.id === sessionId)
+    const sessions = this.getAllSessions()
+    sessions.unshift(newSession)
+    localStorage.setItem(STORAGE_KEYS.sessions, JSON.stringify(sessions))
     
-    if (session) {
-      const newMessage: Message = {
-        ...message,
-        id: `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-        timestamp: Date.now(),
-      }
-      
-      session.messages.push(newMessage)
-      session.updated_at = Date.now()
-      
-      // Update session title based on first user message
-      if (session.messages.length === 1 && message.role === 'user') {
-        session.title = message.content.slice(0, 50) + (message.content.length > 50 ? '...' : '')
-      }
-      
-      this.save(store)
-    }
-  },
-
-  // Get session by ID
-  getSession(sessionId: string): ChatSession | null {
-    const store = this.load()
-    return store.sessions.find(s => s.id === sessionId) || null
-  },
+    return newSession
+  }
 
-  // Update session
   updateSession(sessionId: string, updates: Partial<ChatSession>): void {
-    const store = this.load()
-    const sessionIndex = store.sessions.findIndex(s => s.id === sessionId)
+    const sessions = this.getAllSessions()
+    const sessionIndex = sessions.findIndex(s => s.id === sessionId)
     
     if (sessionIndex !== -1) {
-      store.sessions[sessionIndex] = {
-        ...store.sessions[sessionIndex],
+      sessions[sessionIndex] = {
+        ...sessions[sessionIndex],
         ...updates,
-        updated_at: Date.now(),
+        updatedAt: Date.now()
       }
-      this.save(store)
+      localStorage.setItem(STORAGE_KEYS.sessions, JSON.stringify(sessions))
     }
-  },
+  }
 
-  // Delete session
   deleteSession(sessionId: string): void {
-    const store = this.load()
-    store.sessions = store.sessions.filter(s => s.id !== sessionId)
+    const sessions = this.getAllSessions()
+    const filtered = sessions.filter(s => s.id !== sessionId)
+    localStorage.setItem(STORAGE_KEYS.sessions, JSON.stringify(filtered))
     
-    // If deleting current session, clear current_session_id
-    if (store.current_session_id === sessionId) {
-      store.current_session_id = store.sessions.length > 0 ? store.sessions[0].id : null
+    if (this.getCurrentSessionId() === sessionId) {
+      localStorage.removeItem(STORAGE_KEYS.currentSession)
     }
+  }
+
+  addMessageToSession(sessionId: string, message: Omit<Message, 'id' | 'timestamp'>): void {
+    const sessions = this.getAllSessions()
+    const sessionIndex = sessions.findIndex(s => s.id === sessionId)
     
-    this.save(store)
-  },
+    if (sessionIndex !== -1) {
+      const newMessage: Message = {
+        ...message,
+        id: generateMessageId(),
+        timestamp: Date.now()
+      }
+      
+      sessions[sessionIndex].messages.push(newMessage)
+      sessions[sessionIndex].updatedAt = Date.now()
+      localStorage.setItem(STORAGE_KEYS.sessions, JSON.stringify(sessions))
+    }
+  }
 
-  // Set current session
-  setCurrentSession(sessionId: string): void {
-    const store = this.load()
-    store.current_session_id = sessionId
-    this.save(store)
-  },
+  getCurrentSessionId(): string | null {
+    return localStorage.getItem(STORAGE_KEYS.currentSession)
+  }
 
-  // Get current session
   getCurrentSession(): ChatSession | null {
-    const store = this.load()
-    if (!store.current_session_id) return null
-    return this.getSession(store.current_session_id)
-  },
+    const currentId = this.getCurrentSessionId()
+    return currentId ? this.getSession(currentId) : null
+  }
 
-  // Get all sessions sorted by updated_at
-  getAllSessions(): ChatSession[] {
-    const store = this.load()
-    return store.sessions.sort((a, b) => b.updated_at - a.updated_at)
-  },
+  setCurrentSession(sessionId: string): void {
+    localStorage.setItem(STORAGE_KEYS.currentSession, sessionId)
+  }
 
-  // Clear all data
   clear(): void {
-    localStorage.removeItem(STORAGE_KEY)
-  },
+    localStorage.removeItem(STORAGE_KEYS.sessions)
+    localStorage.removeItem(STORAGE_KEYS.currentSession)
+  }
 }
+
+export const chatStorage = new ChatStorageManager()

frontend/src/lib/utils.ts

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

frontend/src/pages/Home.tsx

@@ -8,8 +8,7 @@ import {
   Zap,
   Shield,
   Cpu,
-  ArrowRight,
-  Download
+  ArrowRight
 } from 'lucide-react'
 import { Link } from 'react-router-dom'
 
@@ -67,115 +66,106 @@ const quickActions = [
 export function Home() {
   return (
     <div className="min-h-screen bg-background">
-      {/* Header */}
-      <div className="border-b">
-        <div className="flex h-14 items-center px-6">
-          <div className="flex items-center gap-2">
-            <Brain className="h-5 w-5" />
-            <h1 className="text-lg font-semibold">Home</h1>
-          </div>
-        </div>
-      </div>
-
-      <div className="flex-1 p-6">
-        <div className="max-w-6xl mx-auto space-y-8">
-          
-          {/* Hero Section */}
-          <div className="text-center space-y-4">
-            <div className="inline-flex items-center gap-2 px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">
-              <Cpu className="h-4 w-4" />
-              Local AI Platform
+      <div className="container mx-auto px-4 py-8">
+        {/* Hero Section */}
+        <div className="text-center mb-12">
+          <div className="flex items-center justify-center mb-4">
+            <div className="w-16 h-16 bg-primary rounded-2xl flex items-center justify-center">
+              <Brain className="h-8 w-8 text-primary-foreground" />
             </div>
-            <h1 className="text-4xl font-bold tracking-tight">
-              Welcome to Edge LLM
-            </h1>
-            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
-              A powerful local AI platform for running language models privately on your machine. 
-              Experience the future of AI without compromising your privacy.
-            </p>
           </div>
-
-          {/* Quick Actions */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {quickActions.map((action) => (
-              <Card key={action.href} className={action.primary ? "ring-2 ring-blue-500" : ""}>
-                <CardContent className="p-6">
-                  <Link to={action.href} className="block space-y-3 group">
-                    <div className="flex items-center justify-between">
-                      <action.icon className={`h-8 w-8 ${action.primary ? 'text-blue-500' : 'text-muted-foreground'}`} />
-                      <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors" />
-                    </div>
-                    <div>
-                      <h3 className="font-semibold text-lg">{action.title}</h3>
-                      <p className="text-muted-foreground text-sm">{action.description}</p>
-                    </div>
-                  </Link>
-                </CardContent>
-              </Card>
-            ))}
+          <h1 className="text-4xl font-bold mb-4">Edge LLM</h1>
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
+            Your local AI companion. Run powerful language models on your own hardware with complete privacy and control.
+          </p>
+          <div className="flex items-center justify-center gap-4">
+            <Link to="/playground">
+              <Button size="lg">
+                <MessageSquare className="h-5 w-5 mr-2" />
+                Start Chatting
+              </Button>
+            </Link>
+            <Link to="/models">
+              <Button variant="outline" size="lg">
+                <BookOpen className="h-5 w-5 mr-2" />
+                Browse Models
+              </Button>
+            </Link>
           </div>
+        </div>
 
-          {/* Features Grid */}
-          <div className="space-y-6">
-            <div className="text-center">
-              <h2 className="text-2xl font-bold">Key Features</h2>
-              <p className="text-muted-foreground mt-2">
-                Everything you need for local AI development and experimentation
-              </p>
-            </div>
-            
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-              {features.map((feature, index) => (
-                <Card key={index}>
-                  <CardContent className="p-6 space-y-3">
-                    <feature.icon className={`h-8 w-8 ${feature.color}`} />
-                    <div>
-                      <h3 className="font-semibold">{feature.title}</h3>
-                      <p className="text-sm text-muted-foreground">{feature.description}</p>
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          </div>
+        {/* Features Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+          {features.map((feature, index) => (
+            <Card key={index} className="text-center">
+              <CardContent className="pt-6">
+                <feature.icon className={`h-12 w-12 mx-auto mb-4 ${feature.color}`} />
+                <h3 className="font-semibold mb-2">{feature.title}</h3>
+                <p className="text-sm text-muted-foreground">{feature.description}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
 
-          {/* Getting Started */}
+        {/* Quick Actions */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+          {quickActions.map((action, index) => (
+            <Card key={index} className="hover:shadow-lg transition-shadow">
+              <CardContent className="pt-6">
+                <div className="flex items-center gap-3 mb-3">
+                  <action.icon className="h-6 w-6 text-primary" />
+                  <h3 className="font-semibold">{action.title}</h3>
+                </div>
+                <p className="text-sm text-muted-foreground mb-4">{action.description}</p>
+                <Link to={action.href}>
+                  <Button 
+                    variant={action.primary ? "default" : "outline"} 
+                    className="w-full"
+                  >
+                    Get Started
+                    <ArrowRight className="h-4 w-4 ml-2" />
+                  </Button>
+                </Link>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        {/* Getting Started */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
           <Card>
             <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Download className="h-5 w-5" />
-                Getting Started
-              </CardTitle>
+              <CardTitle>Getting Started</CardTitle>
             </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <CardContent>
+              <div className="space-y-4">
                 <div className="space-y-2">
                   <div className="flex items-center gap-2">
-                    <div className="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-medium">
+                    <div className="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-sm font-medium">
                       1
                     </div>
-                    <h4 className="font-medium">Choose a Model</h4>
+                    <h4 className="font-medium">Browse Available Models</h4>
                   </div>
                   <p className="text-sm text-muted-foreground pl-8">
-                    Browse the model catalog and select a model that fits your needs.
+                    Check out our model catalog to see what's available for your use case.
                   </p>
                 </div>
                 
                 <div className="space-y-2">
                   <div className="flex items-center gap-2">
-                    <div className="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-medium">
+                    <div className="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-sm font-medium">
                       2
                     </div>
-                    <h4 className="font-medium">Load the Model</h4>
+                    <h4 className="font-medium">Load a Model</h4>
                   </div>
                   <p className="text-sm text-muted-foreground pl-8">
-                    Click the load button to download and prepare the model for use.
+                    Select and load a model that fits your hardware and requirements.
                   </p>
                 </div>
                 
                 <div className="space-y-2">
                   <div className="flex items-center gap-2">
-                    <div className="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-medium">
+                    <div className="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-sm font-medium">
                       3
                     </div>
                     <h4 className="font-medium">Start Chatting</h4>
@@ -203,29 +193,34 @@ export function Home() {
               <CardTitle>System Status</CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div className="flex items-center gap-3">
-                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                  <div>
-                    <p className="text-sm font-medium">Backend</p>
-                    <p className="text-xs text-muted-foreground">Running</p>
-                  </div>
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm">Backend Status</span>
+                  <span className="inline-flex items-center gap-1 text-sm text-green-600">
+                    <div className="w-2 h-2 bg-green-600 rounded-full"></div>
+                    Online
+                  </span>
                 </div>
-                <div className="flex items-center gap-3">
-                  <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
-                  <div>
-                    <p className="text-sm font-medium">Models</p>
-                    <p className="text-xs text-muted-foreground">Ready to load</p>
-                  </div>
+                
+                <div className="flex items-center justify-between">
+                  <span className="text-sm">Models Loaded</span>
+                  <span className="text-sm font-medium">Ready</span>
                 </div>
-                <div className="flex items-center gap-3">
-                  <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
-                  <div>
-                    <p className="text-sm font-medium">Platform</p>
-                    <p className="text-xs text-muted-foreground">Local</p>
-                  </div>
+                
+                <div className="flex items-center justify-between">
+                  <span className="text-sm">Memory Usage</span>
+                  <span className="text-sm font-medium">Optimized</span>
                 </div>
               </div>
+              
+              <div className="pt-4 border-t">
+                <Link to="/settings">
+                  <Button variant="outline" className="w-full md:w-auto">
+                    <Cpu className="h-4 w-4 mr-2" />
+                    View Settings
+                  </Button>
+                </Link>
+              </div>
             </CardContent>
           </Card>
         </div>

frontend/src/pages/Models.tsx

@@ -0,0 +1,339 @@
+import { useState, useEffect } from 'react'
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { 
+  BookOpen, 
+  Brain, 
+  Zap, 
+  Download, 
+  Trash2, 
+  Loader2,
+  Info,
+  CheckCircle,
+  Cloud,
+  HardDrive
+} from 'lucide-react'
+
+interface ModelInfo {
+  model_name: string
+  name: string
+  supports_thinking: boolean
+  description: string
+  size_gb: string
+  is_loaded: boolean
+  type: 'local' | 'api'
+}
+
+interface ModelsResponse {
+  models: ModelInfo[]
+  current_model: string
+}
+
+export function Models() {
+  const [models, setModels] = useState<ModelInfo[]>([])
+  const [loading, setLoading] = useState(true)
+  const [modelLoading, setModelLoading] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetchModels()
+  }, [])
+
+  const fetchModels = async () => {
+    try {
+      const baseUrl = window.location.hostname === 'localhost' ? `${window.location.protocol}//${window.location.host}` : ''
+      const res = await fetch(`${baseUrl}/models`)
+      if (res.ok) {
+        const data: ModelsResponse = await res.json()
+        setModels(data.models)
+      }
+    } catch (err) {
+      console.error('Failed to fetch models:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleLoadModel = async (modelName: string) => {
+    setModelLoading(modelName)
+    try {
+      const baseUrl = window.location.hostname === 'localhost' ? `${window.location.protocol}//${window.location.host}` : ''
+      const res = await fetch(`${baseUrl}/load-model`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ model_name: modelName }),
+      })
+      
+      if (res.ok) {
+        await fetchModels()
+      }
+    } catch (err) {
+      console.error('Failed to load model:', err)
+    } finally {
+      setModelLoading(null)
+    }
+  }
+
+  const handleUnloadModel = async (modelName: string) => {
+    try {
+      const baseUrl = window.location.hostname === 'localhost' ? `${window.location.protocol}//${window.location.host}` : ''
+      const res = await fetch(`${baseUrl}/unload-model`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ model_name: modelName }),
+      })
+      
+      if (res.ok) {
+        await fetchModels()
+      }
+    } catch (err) {
+      console.error('Failed to unload model:', err)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-background">
+        <div className="border-b">
+          <div className="flex h-14 items-center px-6">
+            <div className="flex items-center gap-2">
+              <BookOpen className="h-5 w-5" />
+              <h1 className="text-lg font-semibold">Model Catalog</h1>
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center justify-center h-64">
+          <Loader2 className="h-8 w-8 animate-spin" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <div className="border-b">
+        <div className="flex h-14 items-center px-6">
+          <div className="flex items-center gap-2">
+            <BookOpen className="h-5 w-5" />
+            <h1 className="text-lg font-semibold">Model Catalog</h1>
+          </div>
+          <div className="ml-auto">
+            <Button variant="outline" size="sm" onClick={fetchModels}>
+              Refresh
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 p-6">
+        <div className="max-w-4xl mx-auto space-y-6">
+          
+          {/* Info Card */}
+          <Card className="bg-blue-50 border-blue-200">
+            <CardContent className="pt-6">
+              <div className="flex items-start gap-3">
+                <Info className="h-5 w-5 text-blue-600 mt-0.5" />
+                <div>
+                  <h3 className="font-medium text-blue-900">Model Management</h3>
+                  <p className="text-sm text-blue-700 mt-1">
+                    Load models to use them in the playground. Models are cached locally for faster access.
+                    Each model requires significant storage space and initial download time.
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* API Models Section */}
+          <div>
+            <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
+              <Cloud className="h-5 w-5" />
+              API Models
+              <Badge variant="outline" className="text-xs">Cloud-Powered</Badge>
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+              {models.filter(m => m.type === 'api').map((model) => (
+                <ModelCard 
+                  key={model.model_name} 
+                  model={model} 
+                  modelLoading={modelLoading}
+                  onLoad={handleLoadModel}
+                  onUnload={handleUnloadModel}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Local Models Section */}
+          <div>
+            <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
+              <HardDrive className="h-5 w-5" />
+              Local Models
+              <Badge variant="outline" className="text-xs">Privacy-First</Badge>
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {models.filter(m => m.type === 'local').map((model) => (
+                <ModelCard 
+                  key={model.model_name} 
+                  model={model} 
+                  modelLoading={modelLoading}
+                  onLoad={handleLoadModel}
+                  onUnload={handleUnloadModel}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Stats Card */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Model Statistics</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-blue-600">{models.length}</div>
+                  <div className="text-sm text-muted-foreground">Available Models</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-green-600">
+                    {models.filter(m => m.is_loaded).length}
+                  </div>
+                  <div className="text-sm text-muted-foreground">Loaded Models</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-purple-600">
+                    {models.filter(m => m.supports_thinking).length}
+                  </div>
+                  <div className="text-sm text-muted-foreground">Thinking Models</div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ModelCard component for reusability
+interface ModelCardProps {
+  model: ModelInfo
+  modelLoading: string | null
+  onLoad: (modelName: string) => void
+  onUnload: (modelName: string) => void
+}
+
+function ModelCard({ model, modelLoading, onLoad, onUnload }: ModelCardProps) {
+  const isApiModel = model.type === 'api'
+  
+  return (
+    <Card className="relative">
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-3">
+            {isApiModel ? (
+              <Cloud className="h-6 w-6 text-blue-500" />
+            ) : model.supports_thinking ? (
+              <Brain className="h-6 w-6 text-blue-500" />
+            ) : (
+              <Zap className="h-6 w-6 text-green-500" />
+            )}
+            <div>
+              <CardTitle className="text-lg">{model.name}</CardTitle>
+              <div className="flex items-center gap-2 mt-1 flex-wrap">
+                {isApiModel ? (
+                  <Badge variant="default" className="bg-blue-600">
+                    <Cloud className="h-3 w-3 mr-1" />
+                    API Model
+                  </Badge>
+                ) : (
+                  <Badge variant={model.supports_thinking ? "default" : "secondary"}>
+                    <HardDrive className="h-3 w-3 mr-1" />
+                    {model.supports_thinking ? "Thinking Model" : "Instruction Model"}
+                  </Badge>
+                )}
+                {model.is_loaded && (
+                  <Badge variant="outline" className="text-green-600 border-green-600">
+                    <CheckCircle className="h-3 w-3 mr-1" />
+                    {isApiModel ? "Ready" : "Loaded"}
+                  </Badge>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">{model.description}</p>
+          <div className="flex items-center gap-4 text-xs text-muted-foreground">
+            <span>Size: {model.size_gb}</span>
+            {!isApiModel && <span>Format: Safetensors</span>}
+            {isApiModel && <span>Type: Cloud API</span>}
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <h4 className="text-sm font-medium">Capabilities</h4>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="text-xs">Text Generation</Badge>
+            <Badge variant="outline" className="text-xs">Conversation</Badge>
+            <Badge variant="outline" className="text-xs">Code</Badge>
+            {model.supports_thinking && (
+              <Badge variant="outline" className="text-xs">Reasoning</Badge>
+            )}
+            {isApiModel && model.model_name.includes('vl') && (
+              <Badge variant="outline" className="text-xs">Vision</Badge>
+            )}
+          </div>
+        </div>
+
+        <div className="pt-2 border-t">
+          {model.is_loaded ? (
+            <div className="flex gap-2">
+              {!isApiModel && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onUnload(model.model_name)}
+                  className="flex-1"
+                >
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  Unload
+                </Button>
+              )}
+              <Button size="sm" className="flex-1" asChild>
+                <a href="/playground">Use in Playground</a>
+              </Button>
+            </div>
+          ) : (
+            <Button
+              onClick={() => onLoad(model.model_name)}
+              disabled={modelLoading === model.model_name}
+              className="w-full"
+              size="sm"
+            >
+              {modelLoading === model.model_name ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  {isApiModel ? "Connecting..." : "Loading..."}
+                </>
+              ) : (
+                <>
+                  {isApiModel ? (
+                    <Cloud className="h-4 w-4 mr-2" />
+                  ) : (
+                    <Download className="h-4 w-4 mr-2" />
+                  )}
+                  {isApiModel ? "Connect" : "Load Model"}
+                </>
+              )}
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

frontend/src/pages/Playground.tsx

@@ -5,29 +5,35 @@ import { Slider } from '@/components/ui/slider'
 import { Label } from '@/components/ui/label'
 import { Badge } from '@/components/ui/badge'
 import { 
-  AlertDialog, 
-  AlertDialogAction, 
-  AlertDialogCancel, 
-  AlertDialogContent, 
-  AlertDialogDescription, 
-  AlertDialogFooter, 
-  AlertDialogHeader, 
-  AlertDialogTitle 
-} from '@/components/ui/alert-dialog'
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+
 import { 
   Collapsible, 
   CollapsibleContent, 
   CollapsibleTrigger 
 } from '@/components/ui/collapsible'
-import { ChatContainer } from '@/components/chat/ChatContainer'
-import { ChatSessions } from '@/components/chat/ChatSessions'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Chat } from '@/components/ui/chat'
 import { useChat } from '@/hooks/useChat'
 import { 
-  Loader2, 
   Brain, 
   Zap, 
-  Download, 
-  Trash2, 
   ChevronDown, 
   MessageSquare, 
   RotateCcw,
@@ -37,7 +43,13 @@ import {
   History,
   Settings,
   PanelLeftOpen,
-  PanelLeftClose
+  PanelLeftClose,
+  Cloud,
+  BookOpen,
+  Download,
+  AlertTriangle,
+  Plus,
+  Trash2
 } from 'lucide-react'
 
 interface ModelInfo {
@@ -47,6 +59,7 @@ interface ModelInfo {
   description: string
   size_gb: string
   is_loaded: boolean
+  type: 'local' | 'api'
 }
 
 interface ModelsResponse {
@@ -63,7 +76,7 @@ export function Playground() {
     createNewSession,
     selectSession,
     deleteSession,
-    renameSession,
+
     messages,
     input,
     setInput,
@@ -83,16 +96,12 @@ export function Playground() {
   // UI state
   const [showSessions, setShowSessions] = useState(false)
   const [isSystemPromptOpen, setIsSystemPromptOpen] = useState(false)
+  const [autoLoadingModel, setAutoLoadingModel] = useState<string | null>(null)
+  const [showLoadConfirm, setShowLoadConfirm] = useState(false)
+  const [pendingModelToLoad, setPendingModelToLoad] = useState<ModelInfo | null>(null)
   
   // Model management state
   const [models, setModels] = useState<ModelInfo[]>([])
-  const [modelLoading, setModelLoading] = useState<string | null>(null)
-  const [showLoadConfirm, setShowLoadConfirm] = useState(false)
-  const [showUnloadConfirm, setShowUnloadConfirm] = useState(false)
-  const [pendingModelAction, setPendingModelAction] = useState<{
-    action: 'load' | 'unload'
-    model: ModelInfo | null
-  }>({ action: 'load', model: null })
 
   // Preset system prompts
   const systemPromptPresets = [
@@ -153,108 +162,168 @@ export function Playground() {
 
   // Update selected model when models change
   useEffect(() => {
-    if (selectedModel && !models.find(m => m.model_name === selectedModel && m.is_loaded)) {
-      const loadedModel = models.find(m => m.is_loaded)
-      if (loadedModel) {
-        setSelectedModel(loadedModel.model_name)
+    // Only reset if the selected model no longer exists in the models list
+    if (selectedModel && !models.find(m => m.model_name === selectedModel)) {
+      const firstModel = models[0]
+      if (firstModel) {
+        setSelectedModel(firstModel.model_name)
       }
     }
   }, [models, selectedModel, setSelectedModel])
 
-  const fetchModels = async () => {
-    try {
-      const res = await fetch('http://localhost:8000/models')
-      if (res.ok) {
-        const data: ModelsResponse = await res.json()
-        setModels(data.models)
-        
-        // Set selected model to current model if available, otherwise first loaded model
-        if (data.current_model && selectedModel !== data.current_model) {
-          setSelectedModel(data.current_model)
-        } else if (!selectedModel) {
-          const loadedModel = data.models.find(m => m.is_loaded)
-          if (loadedModel) {
-            setSelectedModel(loadedModel.model_name)
+  // Auto-load/unload local models when selection changes
+  useEffect(() => {
+    const handleModelChange = async () => {
+      if (!selectedModel || !models.length) return
+
+      const selectedModelInfo = models.find(m => m.model_name === selectedModel)
+      if (!selectedModelInfo) return
+
+      const baseUrl = window.location.hostname === 'localhost' ? `${window.location.protocol}//${window.location.host}` : ''
+
+      // If selected model is a local model and not loaded, show confirmation
+      if (selectedModelInfo.type === 'local' && !selectedModelInfo.is_loaded) {
+        setPendingModelToLoad(selectedModelInfo)
+        setShowLoadConfirm(true)
+        return // Don't auto-load, wait for user confirmation
+      }
+
+      // Unload other local models that are loaded but not selected
+      const loadedLocalModels = models.filter(m => 
+        m.type === 'local' && 
+        m.is_loaded && 
+        m.model_name !== selectedModel
+      )
+
+      for (const model of loadedLocalModels) {
+        try {
+          const response = await fetch(`${baseUrl}/unload-model`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ model_name: model.model_name })
+          })
+          
+          if (response.ok) {
+            console.log(`✅ Auto-unloaded local model: ${model.model_name}`)
           }
+        } catch (error) {
+          console.error(`Error auto-unloading model ${model.model_name}:`, error)
         }
       }
-    } catch (err) {
-      console.error('Failed to fetch models:', err)
+      
+      // Refresh models after any unloading
+      if (loadedLocalModels.length > 0) {
+        fetchModels()
+      }
     }
-  }
 
-  const handleLoadModelClick = (model: ModelInfo) => {
-    setPendingModelAction({ action: 'load', model })
-    setShowLoadConfirm(true)
-  }
-
-  const handleUnloadModelClick = (model: ModelInfo) => {
-    setPendingModelAction({ action: 'unload', model })
-    setShowUnloadConfirm(true)
-  }
+    handleModelChange()
+  }, [selectedModel, models])
 
-  const confirmLoadModel = async () => {
-    const model = pendingModelAction.model
-    if (!model) return
-
-    setModelLoading(model.model_name)
+  const handleLoadModelConfirm = async () => {
+    if (!pendingModelToLoad) return
+    
     setShowLoadConfirm(false)
+    setAutoLoadingModel(pendingModelToLoad.model_name)
     
     try {
-      const res = await fetch('http://localhost:8000/load-model', {
+      const baseUrl = window.location.hostname === 'localhost' ? `${window.location.protocol}//${window.location.host}` : ''
+      const response = await fetch(`${baseUrl}/load-model`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ model_name: model.model_name }),
+        body: JSON.stringify({ model_name: pendingModelToLoad.model_name })
       })
       
-      if (res.ok) {
-        await fetchModels()
-        
-        // Set as selected model
-        setSelectedModel(model.model_name)
+      if (response.ok) {
+        console.log(`✅ User confirmed and loaded: ${pendingModelToLoad.model_name}`)
+        fetchModels() // Refresh model states
       } else {
-        const errorData = await res.json()
-        console.error(`Failed to load model: ${errorData.detail || 'Unknown error'}`)
+        console.error(`❌ Failed to load model: ${pendingModelToLoad.model_name}`)
+        // Revert to an API model if load failed
+        const apiModel = models.find(m => m.type === 'api')
+        if (apiModel) {
+          setSelectedModel(apiModel.model_name)
+        }
+      }
+    } catch (error) {
+      console.error('Error loading model:', error)
+      // Revert to an API model if error
+      const apiModel = models.find(m => m.type === 'api')
+      if (apiModel) {
+        setSelectedModel(apiModel.model_name)
       }
-    } catch (err) {
-      console.error(`Failed to load model: ${err instanceof Error ? err.message : 'Unknown error'}`)
     } finally {
-      setModelLoading(null)
+      setAutoLoadingModel(null)
+      setPendingModelToLoad(null)
     }
   }
 
-  const confirmUnloadModel = async () => {
-    const model = pendingModelAction.model
-    if (!model) return
-
-    setShowUnloadConfirm(false)
+  const handleLoadModelCancel = () => {
+    setShowLoadConfirm(false)
+    setPendingModelToLoad(null)
     
-    try {
-      const res = await fetch('http://localhost:8000/unload-model', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ model_name: model.model_name }),
-      })
+    // Revert to an API model
+    const apiModel = models.find(m => m.type === 'api')
+    if (apiModel) {
+      setSelectedModel(apiModel.model_name)
+    }
+  }
+
+  // Cleanup: unload all local models when component unmounts or user leaves
+  useEffect(() => {
+    const handlePageUnload = async () => {
+      const baseUrl = window.location.hostname === 'localhost' ? `${window.location.protocol}//${window.location.host}` : ''
+      const loadedLocalModels = models.filter(m => m.type === 'local' && m.is_loaded)
       
+      for (const model of loadedLocalModels) {
+        try {
+          await fetch(`${baseUrl}/unload-model`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ model_name: model.model_name })
+          })
+          console.log(`✅ Cleanup: unloaded ${model.model_name}`)
+        } catch (error) {
+          console.error(`Error cleaning up model ${model.model_name}:`, error)
+        }
+      }
+    }
+
+    // Cleanup on component unmount
+    return () => {
+      handlePageUnload()
+    }
+  }, [models])
+
+  const fetchModels = async () => {
+    try {
+      const baseUrl = window.location.hostname === 'localhost' ? `${window.location.protocol}//${window.location.host}` : ''
+      const res = await fetch(`${baseUrl}/models`)
       if (res.ok) {
-        await fetchModels()
+        const data: ModelsResponse = await res.json()
+        setModels(data.models)
         
-        // If we unloaded the selected model, find another loaded model
-        if (selectedModel === model.model_name) {
-          const remainingLoaded = models.find(m => m.is_loaded && m.model_name !== model.model_name)
-          if (remainingLoaded) {
-            setSelectedModel(remainingLoaded.model_name)
-          }
+        // Set selected model to current model if available, otherwise first API model
+        if (data.current_model && selectedModel !== data.current_model) {
+          setSelectedModel(data.current_model)
+        } else if (!selectedModel && data.models.length > 0) {
+          // Prefer API models as default
+          const apiModel = data.models.find(m => m.type === 'api')
+          const defaultModel = apiModel || data.models[0]
+          setSelectedModel(defaultModel.model_name)
         }
-      } else {
-        const errorData = await res.json()
-        console.error(`Failed to unload model: ${errorData.detail || 'Unknown error'}`)
       }
     } catch (err) {
-      console.error(`Failed to unload model: ${err instanceof Error ? err.message : 'Unknown error'}`)
+      console.error('Failed to fetch models:', err)
     }
   }
 
+
+
+
+
+
+
   const handleSamplePromptClick = (samplePrompt: string) => {
     setInput(samplePrompt)
   }
@@ -267,14 +336,44 @@ export function Playground() {
         fixed inset-y-0 left-0 z-50 w-80 bg-background border-r transition-transform duration-300 ease-in-out
         lg:translate-x-0 lg:static lg:inset-0
       `}>
-        <ChatSessions
-          sessions={sessions}
-          currentSessionId={currentSessionId}
-          onSelectSession={selectSession}
-          onNewSession={createNewSession}
-          onDeleteSession={deleteSession}
-          onRenameSession={renameSession}
-        />
+        <div className="p-4 space-y-4">
+          <div className="flex items-center justify-between">
+            <h2 className="font-semibold">Chat Sessions</h2>
+            <Button onClick={createNewSession} size="sm">
+              <Plus className="h-4 w-4 mr-1" />
+              New
+            </Button>
+          </div>
+          <div className="space-y-2">
+            {sessions.map((session) => (
+              <Card 
+                key={session.id}
+                className={`p-3 cursor-pointer transition-colors hover:bg-accent ${
+                  currentSessionId === session.id ? 'bg-accent border-primary' : ''
+                }`}
+                onClick={() => selectSession(session.id)}
+              >
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium truncate">{session.title}</span>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      deleteSession(session.id)
+                    }}
+                    className="h-6 w-6 p-0"
+                  >
+                    <Trash2 className="h-3 w-3" />
+                  </Button>
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  {session.messages.length} messages
+                </div>
+              </Card>
+            ))}
+          </div>
+        </div>
       </div>
 
       {/* Overlay for mobile */}
@@ -368,19 +467,22 @@ export function Playground() {
             )}
 
             {/* Chat Messages and Input */}
-            <ChatContainer
-              messages={messages}
+                      <Chat
+              messages={messages.map(msg => ({
+                id: msg.id,
+                role: msg.role as 'user' | 'assistant' | 'system',
+                content: msg.content,
+                createdAt: new Date(msg.timestamp)
+              }))}
               input={input}
-              onInputChange={setInput}
-              onSubmit={sendMessage}
-              onStop={stopGeneration}
-              isLoading={isLoading}
-              disabled={!selectedModel || !models.find(m => m.model_name === selectedModel)?.is_loaded}
-              placeholder={
-                !selectedModel || !models.find(m => m.model_name === selectedModel)?.is_loaded
-                  ? "Please load a model first..."
-                  : "Ask me anything..."
-              }
+              handleInputChange={(e) => setInput(e.target.value)}
+              handleSubmit={async (e) => {
+                e.preventDefault()
+                if (!selectedModel || !models.find(m => m.model_name === selectedModel)) return
+                await sendMessage()
+              }}
+              isGenerating={isLoading}
+              stop={stopGeneration}
               className="flex-1"
             />
           </div>
@@ -393,87 +495,94 @@ export function Playground() {
                 <h2 className="font-semibold text-sm">Configuration</h2>
               </div>
 
-              {/* Model Management */}
+              {/* Model Selection */}
               <Card>
                 <CardHeader>
-                  <CardTitle className="text-sm">Model Management</CardTitle>
+                  <CardTitle className="text-sm">Model Selection</CardTitle>
                 </CardHeader>
                 <CardContent className="space-y-3">
-                  {models.map((model) => (
-                    <div key={model.model_name} className="border rounded-lg p-3 overflow-hidden">
-                      <div className="space-y-3">
-                        {/* Model Header */}
-                        <div className="flex items-start gap-2">
-                          {model.supports_thinking ? <Brain className="h-4 w-4 flex-shrink-0" /> : <Zap className="h-4 w-4 flex-shrink-0" />}
-                          <div className="flex-1 min-w-0">
-                            <div className="flex items-center gap-2 mb-1 flex-wrap">
-                              <span className="font-medium text-sm truncate">{model.name}</span>
-                              {model.model_name === selectedModel && (
-                                <Badge variant="default" className="text-xs flex-shrink-0">Active</Badge>
-                              )}
-                              {model.is_loaded && model.model_name !== selectedModel && (
-                                <Badge variant="secondary" className="text-xs flex-shrink-0">Loaded</Badge>
-                              )}
-                            </div>
-                            <p className="text-xs text-muted-foreground break-words">
-                              {model.description} • {model.size_gb}
-                            </p>
-                          </div>
-                        </div>
-
-                        {/* Model Selection */}
-                        {model.is_loaded && (
-                          <div className="flex items-center gap-2">
-                            <input
-                              type="radio"
-                              name="selectedModel"
-                              value={model.model_name}
-                              checked={selectedModel === model.model_name}
-                              onChange={() => setSelectedModel(model.model_name)}
-                              className="h-3 w-3 flex-shrink-0"
-                            />
-                            <Label className="text-xs">Use for generation</Label>
-                          </div>
-                        )}
+                  {/* Simple Model Dropdown */}
+                  <div>
+                    <Label className="text-xs font-medium mb-2">Active Model</Label>
+                    <Select value={selectedModel || ""} onValueChange={setSelectedModel}>
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select a model...">
+                          {selectedModel && (() => {
+                            const model = models.find(m => m.model_name === selectedModel)
+                            if (!model) return selectedModel
+                            const isApiModel = model.type === 'api'
+                            return (
+                              <div className="flex items-center gap-2">
+                                {isApiModel ? (
+                                  <Cloud className="h-4 w-4 text-blue-500" />
+                                ) : model.supports_thinking ? (
+                                  <Brain className="h-4 w-4 text-purple-500" />
+                                ) : (
+                                  <Zap className="h-4 w-4 text-green-500" />
+                                )}
+                                <span className="truncate">{model.name}</span>
+                                {autoLoadingModel === selectedModel ? (
+                                  <Badge variant="outline" className="text-xs">
+                                    Loading...
+                                  </Badge>
+                                ) : (
+                                  <Badge variant="outline" className="text-xs">
+                                    {isApiModel ? "API" : model.is_loaded ? "Loaded" : "Available"}
+                                  </Badge>
+                                )}
+                              </div>
+                            )
+                          })()}
+                        </SelectValue>
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          <SelectLabel>🌐 API Models</SelectLabel>
+                          {models.filter(m => m.type === 'api').map((model) => (
+                            <SelectItem key={model.model_name} value={model.model_name}>
+                              <div className="flex items-center gap-2">
+                                <Cloud className="h-4 w-4 text-blue-500" />
+                                <span>{model.name}</span>
+                                <Badge variant="outline" className="text-xs bg-blue-50">API</Badge>
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectGroup>
+                        <SelectGroup>
+                          <SelectLabel>💻 Local Models</SelectLabel>
+                          {models.filter(m => m.type === 'local').map((model) => (
+                            <SelectItem key={model.model_name} value={model.model_name}>
+                              <div className="flex items-center gap-2">
+                                {model.supports_thinking ? (
+                                  <Brain className="h-4 w-4 text-purple-500" />
+                                ) : (
+                                  <Zap className="h-4 w-4 text-green-500" />
+                                )}
+                                <span>{model.name}</span>
+                                {autoLoadingModel === model.model_name ? (
+                                  <Badge variant="outline" className="text-xs bg-yellow-50">Loading...</Badge>
+                                ) : model.is_loaded ? (
+                                  <Badge variant="outline" className="text-xs bg-green-50">Loaded</Badge>
+                                ) : (
+                                  <Badge variant="outline" className="text-xs bg-gray-50">Available</Badge>
+                                )}
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </div>
 
-                        {/* Action Button */}
-                        <div className="flex justify-end">
-                          {model.is_loaded ? (
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              onClick={() => handleUnloadModelClick(model)}
-                              disabled={isLoading}
-                              className="h-8 px-3 text-xs flex-shrink-0"
-                            >
-                              <Trash2 className="h-3 w-3 mr-2" />
-                              Unload
-                            </Button>
-                          ) : (
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              onClick={() => handleLoadModelClick(model)}
-                              disabled={isLoading || modelLoading === model.model_name}
-                              className="h-8 px-3 text-xs flex-shrink-0 min-w-[80px]"
-                            >
-                              {modelLoading === model.model_name ? (
-                                <>
-                                  <Loader2 className="h-3 w-3 mr-2 animate-spin" />
-                                  Loading...
-                                </>
-                              ) : (
-                                <>
-                                  <Download className="h-3 w-3 mr-2" />
-                                  Load
-                                </>
-                              )}
-                            </Button>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                  ))}
+                  {/* Model Catalog Link */}
+                  <div className="pt-2 border-t">
+                    <Button variant="outline" size="sm" className="w-full" asChild>
+                      <a href="/models" className="flex items-center gap-2">
+                        <BookOpen className="h-4 w-4" />
+                        View Model Catalog
+                      </a>
+                    </Button>
+                  </div>
                 </CardContent>
               </Card>
 
@@ -490,7 +599,7 @@ export function Playground() {
                     </Label>
                     <Slider
                       value={[temperature]}
-                      onValueChange={(value) => setTemperature(value[0])}
+                      onValueChange={(value: number[]) => setTemperature(value[0])}
                       min={0}
                       max={2}
                       step={0.01}
@@ -509,7 +618,7 @@ export function Playground() {
                     </Label>
                     <Slider
                       value={[maxTokens]}
-                      onValueChange={(value) => setMaxTokens(value[0])}
+                      onValueChange={(value: number[]) => setMaxTokens(value[0])}
                       min={100}
                       max={4096}
                       step={100}
@@ -581,7 +690,7 @@ export function Playground() {
                         <textarea
                           id="system-prompt"
                           value={systemPrompt}
-                          onChange={(e) => setSystemPrompt(e.target.value)}
+                          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setSystemPrompt(e.target.value)}
                           placeholder="Enter custom system prompt to define how the model should behave..."
                           className="w-full min-h-[80px] text-xs p-2 border rounded-md bg-background"
                           disabled={isLoading}
@@ -599,47 +708,59 @@ export function Playground() {
         </div>
       </div>
 
-      {/* Load Model Confirmation Dialog */}
+      {/* Model Load Confirmation Dialog */}
       <AlertDialog open={showLoadConfirm} onOpenChange={setShowLoadConfirm}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Load Model</AlertDialogTitle>
-            <AlertDialogDescription>
-              Do you want to load <strong>{pendingModelAction.model?.name}</strong>?
-              <br /><br />
-              <strong>Size:</strong> {pendingModelAction.model?.size_gb}
-              <br />
-              <strong>Note:</strong> This will download the model if it's not already cached locally. 
-              This may take several minutes and use significant bandwidth and storage.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={confirmLoadModel}>
-              Load Model
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+            <AlertDialogTitle className="flex items-center gap-2">
+              <Download className="h-5 w-5 text-blue-500" />
+              Load Local Model
+            </AlertDialogTitle>
+            <AlertDialogDescription asChild>
+              <div className="space-y-3">
+                <p>
+                  You're about to load <strong>{pendingModelToLoad?.name}</strong> locally.
+                </p>
+                
+                <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+                  <div className="flex items-start gap-2">
+                    <AlertTriangle className="h-4 w-4 text-yellow-600 mt-0.5" />
+                    <div className="text-sm">
+                      <p className="font-medium text-yellow-800">Resource Requirements:</p>
+                      <ul className="mt-1 text-yellow-700 space-y-1">
+                        <li>• <strong>Storage:</strong> {pendingModelToLoad?.size_gb}</li>
+                        <li>• <strong>RAM:</strong> ~{pendingModelToLoad?.size_gb} (while running)</li>
+                        <li>• <strong>Download:</strong> First-time loading will download the model</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
 
-      {/* Unload Model Confirmation Dialog */}
-      <AlertDialog open={showUnloadConfirm} onOpenChange={setShowUnloadConfirm}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Unload Model</AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to unload <strong>{pendingModelAction.model?.name}</strong>?
-              <br /><br />
-              This will free up memory but you'll need to reload it to use it again.
-              {pendingModelAction.model?.model_name === selectedModel && (
-                <><br /><br /><strong>Warning:</strong> This is the currently active model.</>
-              )}
+                <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                  <div className="text-sm text-blue-700">
+                    <p className="font-medium text-blue-800">Model Features:</p>
+                    <p className="mt-1">{pendingModelToLoad?.description}</p>
+                    {pendingModelToLoad?.supports_thinking && (
+                      <p className="mt-1 flex items-center gap-1">
+                        <Brain className="h-3 w-3" />
+                        Supports thinking process
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                <p className="text-sm text-muted-foreground">
+                  The model will be cached locally for faster future access. You can unload it anytime to free up memory.
+                </p>
+              </div>
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={confirmUnloadModel}>
-              Unload Model
+            <AlertDialogCancel onClick={handleLoadModelCancel}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={handleLoadModelConfirm}>
+              Load Model
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>