Upload 374 files

QUICK_START.md

@@ -1,78 +1,221 @@
-# 🚀 Quick Start - 3 دقیقه تا اجرا
+# 🚀 راهنمای سریع شروع - Quick Start Guide
 
-## روش 1: Python (ساده)
+## ⚡ نصب و راه‌اندازی سریع
 
+### 1️⃣ نصب وابستگی‌ها
 ```bash
-unzip crypto-hf-integrated-final.zip
-cd crypto-dt-source-hf-integrated
-python3 -m venv venv
-source venv/bin/activate
 pip install -r requirements.txt
-uvicorn hf_unified_server:app --port 7860
 ```
 
-**سپس:** http://localhost:7860
+### 2️⃣ Import منابع از فایل‌های JSON
+```bash
+python import_resources.py
+```
+این اسکریپت به‌طور خودکار همه منابع را از فایل‌های JSON موجود import می‌کند.
+
+### 3️⃣ راه‌اندازی سرور
+```bash
+# روش 1: استفاده از اسکریپت راه‌انداز
+python start_server.py
+
+# روش 2: مستقیم
+python api_server_extended.py
 
-## روش 2: Docker (توصیه)
+# روش 3: با uvicorn
+uvicorn api_server_extended:app --reload --host 0.0.0.0 --port 8000
+```
+
+### 4️⃣ دسترسی به داشبورد
+```
+http://localhost:8000
+```
 
+## 📋 تب‌های داشبورد
+
+### 📊 Market
+- آمار کلی بازار
+- لیست کریپتوکارنسی‌ها
+- نمودارها و ترندینگ
+
+### 📡 API Monitor
+- وضعیت همه ارائه‌دهندگان
+- زمان پاسخ
+- Health Check
+
+### ⚡ Advanced
+- Export JSON/CSV
+- Backup
+- Clear Cache
+- Activity Logs
+
+### ⚙️ Admin
+- افزودن API جدید
+- تنظیمات
+- آمار کلی
+
+### 🤗 HuggingFace
+- مدل‌های Sentiment Analysis
+- Datasets
+- جستجو در Registry
+
+### 🔄 Pools
+- مدیریت Pool‌ها
+- افزودن/حذف اعضا
+- چرخش دستی
+
+### 📋 Logs (جدید!)
+- نمایش لاگ‌ها با فیلتر
+- Export به JSON/CSV
+- جستجو و آمار
+
+### 📦 Resources (جدید!)
+- مدیریت منابع API
+- Import/Export
+- Backup
+- فیلتر بر اساس Category
+
+## 🔧 استفاده از API
+
+### دریافت لاگ‌ها
 ```bash
-unzip crypto-hf-integrated-final.zip
-cd crypto-dt-source-hf-integrated
-docker build -f Dockerfile.optimized -t crypto-hub .
-docker run -d -p 7860:7860 --name crypto-hub crypto-hub
+# همه لاگ‌ها
+curl http://localhost:8000/api/logs
+
+# فیلتر بر اساس Level
+curl http://localhost:8000/api/logs?level=error
+
+# جستجو
+curl http://localhost:8000/api/logs?search=timeout
 ```
 
-**سپس:** http://localhost:7860
+### Export لاگ‌ها
+```bash
+# Export به JSON
+curl http://localhost:8000/api/logs/export/json?level=error
 
-## تست
+# Export به CSV
+curl http://localhost:8000/api/logs/export/csv
+```
 
+### مدیریت منابع
 ```bash
-./test_endpoints.sh
+# دریافت همه منابع
+curl http://localhost:8000/api/resources
+
+# Export منابع
+curl http://localhost:8000/api/resources/export/json
+
+# Backup
+curl -X POST http://localhost:8000/api/resources/backup
+
+# Import
+curl -X POST "http://localhost:8000/api/resources/import/json?file_path=api-resources/crypto_resources_unified_2025-11-11.json&merge=true"
+```
+
+## 📝 مثال‌های استفاده
+
+### افزودن Provider جدید
+```python
+from resource_manager import ResourceManager
+
+manager = ResourceManager()
+
+provider = {
+    "id": "my_new_api",
+    "name": "My New API",
+    "category": "market_data",
+    "base_url": "https://api.example.com",
+    "requires_auth": False,
+    "priority": 5,
+    "weight": 50,
+    "free": True
+}
+
+manager.add_provider(provider)
+manager.save_resources()
 ```
 
-## Dashboard Tabs
+### ثبت لاگ
+```python
+from log_manager import log_info, log_error, LogCategory
 
-1. **Overview** - نمای کلی
-2. **Market** - بازار
-3. **Chart Lab** - نمودارها
-4. **Sentiment & AI** - احساسات (10+ models)
-5. **News** - اخبار با sentiment
-6. **Providers** - 95 منابع
-7. **API Explorer** - تست API
-8. **Diagnostics** - سلامت سیستم
-9. **Datasets & Models** - 14 dataset + 10 models
-10. **Settings** - تنظیمات
+# لاگ Info
+log_info(LogCategory.PROVIDER, "Provider health check completed", 
+         provider_id="coingecko", response_time=234.5)
 
-## Features
+# لاگ Error
+log_error(LogCategory.PROVIDER, "Provider failed", 
+          provider_id="etherscan", error="Timeout")
+```
 
-- ✅ Real-time data (WebSocket)
-- ✅ Ensemble sentiment (10+ HF models)
-- ✅ 14 crypto datasets
-- ✅ 95 API providers
-- ✅ Chart analysis
-- ✅ News aggregation
+### استفاده از Provider Manager
+```python
+from provider_manager import ProviderManager
+import asyncio
+
+async def main():
+    manager = ProviderManager()
+    
+    # Health Check
+    await manager.health_check_all()
+    
+    # دریافت Provider از Pool
+    provider = manager.get_next_from_pool("primary_market_data_pool")
+    if provider:
+        print(f"Selected: {provider.name}")
+    
+    await manager.close_session()
+
+asyncio.run(main())
+```
 
-## مشکلات رایج
+## 🐳 استفاده با Docker
 
-**Port in use:**
 ```bash
-uvicorn hf_unified_server:app --port 8000
+# Build
+docker build -t crypto-monitor .
+
+# Run
+docker run -p 8000:8000 crypto-monitor
+
+# یا با docker-compose
+docker-compose up -d
 ```
 
-**Model download:**
+## 🔍 عیب‌یابی
+
+### مشکل: Port در حال استفاده است
 ```bash
-export HF_TOKEN=your_token
+# تغییر پورت
+uvicorn api_server_extended:app --port 8001
 ```
 
-**Dependencies:**
+### مشکل: فایل‌های JSON یافت نشد
 ```bash
-pip install -r requirements.txt
+# بررسی وجود فایل‌ها
+ls -la api-resources/
+ls -la providers_config*.json
+```
+
+### مشکل: Import منابع ناموفق
+```bash
+# بررسی ساختار JSON
+python -m json.tool api-resources/crypto_resources_unified_2025-11-11.json | head -20
 ```
 
-## مستندات
+## 📚 مستندات بیشتر
+
+- [README.md](README.md) - مستندات کامل انگلیسی
+- [README_FA.md](README_FA.md) - مستندات کامل فارسی
+- [api-resources/README.md](api-resources/README.md) - راهنمای منابع API
+
+## 🆘 پشتیبانی
+
+در صورت بروز مشکل:
+1. لاگ‌ها را بررسی کنید: `logs/app.log`
+2. از تب Logs در داشبورد استفاده کنید
+3. آمار سیستم را بررسی کنید: `/api/status`
 
-- `README_HF_INTEGRATION.md` - کامل
-- `DEPLOYMENT_GUIDE.md` - Production
-- `ADMIN_HTML_INTEGRATION.md` - Frontend
+---
 
-**Ready!** 🚀
+**موفق باشید! 🚀**

TEST_ENDPOINTS.sh

@@ -1,161 +1,88 @@
-#!/bin/bash
-# API Endpoints Test Script
-# Run this after starting the backend to verify all endpoints work
-
-BASE_URL="${BASE_URL:-http://localhost:7860}"
-GREEN='\033[0;32m'
-RED='\033[0;31m'
-YELLOW='\033[1;33m'
-NC='\033[0m' # No Color
-
-echo "======================================"
-echo "🧪 Testing Crypto HF API Endpoints"
-echo "======================================"
-echo "Base URL: $BASE_URL"
-echo ""
-
-# Function to test endpoint
-test_endpoint() {
-    local method=$1
-    local endpoint=$2
-    local data=$3
-    local name=$4
-    
-    echo -n "Testing $name... "
-    
-    if [ "$method" = "GET" ]; then
-        response=$(curl -s -o /dev/null -w "%{http_code}" "$BASE_URL$endpoint")
-    else
-        response=$(curl -s -o /dev/null -w "%{http_code}" -X "$method" "$BASE_URL$endpoint" \
-            -H "Content-Type: application/json" \
-            -d "$data")
-    fi
-    
-    if [ "$response" = "200" ]; then
-        echo -e "${GREEN}✅ OK${NC} (HTTP $response)"
-    else
-        echo -e "${RED}❌ FAILED${NC} (HTTP $response)"
-        return 1
-    fi
-}
-
-# Test health
-test_endpoint "GET" "/api/health" "" "Health Check"
-
-# Test market endpoints
-echo ""
-echo "📊 Market Endpoints:"
-test_endpoint "GET" "/api/coins/top?limit=5" "" "Top Coins"
-test_endpoint "GET" "/api/coins/BTC" "" "Bitcoin Details"
-test_endpoint "GET" "/api/market/stats" "" "Market Stats"
-
-# Test chart endpoints
-echo ""
-echo "📈 Chart Endpoints:"
-test_endpoint "GET" "/api/charts/price/BTC?timeframe=7d" "" "BTC Price Chart"
-
-# POST endpoint for chart analyze
-echo -n "Testing Chart Analysis... "
-response=$(curl -s -w "\n%{http_code}" -X POST "$BASE_URL/api/charts/analyze" \
-    -H "Content-Type: application/json" \
-    -d '{"symbol":"BTC","timeframe":"7d","indicators":[]}')
-http_code=$(echo "$response" | tail -n1)
-if [ "$http_code" = "200" ]; then
-    echo -e "${GREEN}✅ OK${NC} (HTTP $http_code)"
-else
-    echo -e "${RED}❌ FAILED${NC} (HTTP $http_code)"
-fi
-
-# Test news endpoints
-echo ""
-echo "📰 News Endpoints:"
-test_endpoint "GET" "/api/news/latest?limit=5" "" "Latest News"
-
-# POST endpoint for news summarize
-echo -n "Testing News Summarize... "
-response=$(curl -s -w "\n%{http_code}" -X POST "$BASE_URL/api/news/summarize" \
-    -H "Content-Type: application/json" \
-    -d '{"title":"Bitcoin breaks new record","description":"BTC hits $50k"}')
-http_code=$(echo "$response" | tail -n1)
-if [ "$http_code" = "200" ]; then
-    echo -e "${GREEN}✅ OK${NC} (HTTP $http_code)"
-else
-    echo -e "${RED}❌ FAILED${NC} (HTTP $http_code)"
-fi
-
-# Test AI endpoints
-echo ""
-echo "🤖 AI Endpoints:"
-
-# POST endpoint for sentiment
-echo -n "Testing Sentiment Analysis... "
-response=$(curl -s -w "\n%{http_code}" -X POST "$BASE_URL/api/sentiment/analyze" \
-    -H "Content-Type: application/json" \
-    -d '{"text":"Bitcoin is breaking new all-time highs!"}')
-http_code=$(echo "$response" | tail -n1)
-body=$(echo "$response" | head -n-1)
-if [ "$http_code" = "200" ]; then
-    sentiment=$(echo "$body" | grep -o '"sentiment":"[^"]*"' | cut -d'"' -f4)
-    confidence=$(echo "$body" | grep -o '"confidence":[0-9.]*' | cut -d':' -f2)
-    echo -e "${GREEN}✅ OK${NC} (HTTP $http_code) - Sentiment: ${YELLOW}$sentiment${NC} (${confidence})"
-else
-    echo -e "${RED}❌ FAILED${NC} (HTTP $http_code)"
-fi
-
-# POST endpoint for query
-echo -n "Testing Query... "
-response=$(curl -s -w "\n%{http_code}" -X POST "$BASE_URL/api/query" \
-    -H "Content-Type: application/json" \
-    -d '{"query":"What is the price of Bitcoin?"}')
-http_code=$(echo "$response" | tail -n1)
-if [ "$http_code" = "200" ]; then
-    echo -e "${GREEN}✅ OK${NC} (HTTP $http_code)"
-else
-    echo -e "${RED}❌ FAILED${NC} (HTTP $http_code)"
-fi
-
-# Test provider endpoints
-echo ""
-echo "🔌 Provider Endpoints:"
-test_endpoint "GET" "/api/providers" "" "Providers List"
-
-# Test datasets endpoints
-echo ""
-echo "📚 Datasets & Models Endpoints:"
-test_endpoint "GET" "/api/datasets/list" "" "Datasets List"
-test_endpoint "GET" "/api/models/list" "" "Models List"
-
-# POST endpoint for model test
-echo -n "Testing Model Test... "
-response=$(curl -s -w "\n%{http_code}" -X POST "$BASE_URL/api/models/test" \
-    -H "Content-Type: application/json" \
-    -d '{"model":"crypto_sent_0","text":"Ethereum price surging!"}')
-http_code=$(echo "$response" | tail -n1)
-if [ "$http_code" = "200" ]; then
-    echo -e "${GREEN}✅ OK${NC} (HTTP $http_code)"
-else
-    echo -e "${RED}❌ FAILED${NC} (HTTP $http_code)"
-fi
-
-# Summary
-echo ""
-echo "======================================"
-echo "📊 Test Summary"
-echo "======================================"
-echo ""
-echo "✅ All critical endpoints tested"
-echo ""
-echo "🌐 Dashboard URLs:"
-echo "  - Main: $BASE_URL/"
-echo "  - Admin: $BASE_URL/admin.html"
-echo "  - API Docs: $BASE_URL/docs"
-echo ""
-echo "🔌 WebSocket:"
-echo "  - ws://$(echo $BASE_URL | sed 's|http://||')/ws"
-echo ""
-echo "💡 Next steps:"
-echo "  1. Open $BASE_URL/ in your browser"
-echo "  2. Check all dashboard tabs"
-echo "  3. Verify WebSocket connection (status indicator)"
-echo ""
-echo "======================================"
+#!/bin/bash
+# Script to test all HuggingFace Space endpoints
+
+BASE_URL="https://really-amin-datasourceforcryptocurrency.hf.space"
+
+echo "=================================="
+echo "🧪 Testing HuggingFace Space API"
+echo "=================================="
+echo ""
+
+# Color codes
+GREEN='\033[0;32m'
+RED='\033[0;31m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+test_endpoint() {
+    local name=$1
+    local endpoint=$2
+    
+    echo -n "Testing $name ... "
+    response=$(curl -s -w "\n%{http_code}" "$BASE_URL$endpoint" 2>&1)
+    http_code=$(echo "$response" | tail -n1)
+    body=$(echo "$response" | head -n-1)
+    
+    if [ "$http_code" = "200" ]; then
+        echo -e "${GREEN}✓ OK${NC} (HTTP $http_code)"
+        return 0
+    else
+        echo -e "${RED}✗ FAILED${NC} (HTTP $http_code)"
+        echo "  Response: $body"
+        return 1
+    fi
+}
+
+# Core Endpoints
+echo "📊 Core Endpoints"
+echo "==================="
+test_endpoint "Health" "/health"
+test_endpoint "Info" "/info"
+test_endpoint "Providers" "/api/providers"
+echo ""
+
+# Data Endpoints
+echo "💰 Market Data Endpoints"
+echo "========================="
+test_endpoint "OHLCV (BTC)" "/api/ohlcv?symbol=BTCUSDT&interval=1h&limit=10"
+test_endpoint "Top Prices" "/api/crypto/prices/top?limit=5"
+test_endpoint "BTC Price" "/api/crypto/price/BTC"
+test_endpoint "Market Overview" "/api/crypto/market-overview"
+test_endpoint "Multiple Prices" "/api/market/prices?symbols=BTC,ETH,SOL"
+test_endpoint "Market Data Prices" "/api/market-data/prices?symbols=BTC,ETH"
+echo ""
+
+# Analysis Endpoints
+echo "📈 Analysis Endpoints"
+echo "====================="
+test_endpoint "Trading Signals" "/api/analysis/signals?symbol=BTCUSDT"
+test_endpoint "SMC Analysis" "/api/analysis/smc?symbol=BTCUSDT"
+test_endpoint "Scoring Snapshot" "/api/scoring/snapshot?symbol=BTCUSDT"
+test_endpoint "All Signals" "/api/signals"
+test_endpoint "Sentiment" "/api/sentiment"
+echo ""
+
+# System Endpoints
+echo "⚙️  System Endpoints"
+echo "===================="
+test_endpoint "System Status" "/api/system/status"
+test_endpoint "System Config" "/api/system/config"
+test_endpoint "Categories" "/api/categories"
+test_endpoint "Rate Limits" "/api/rate-limits"
+test_endpoint "Logs" "/api/logs?limit=10"
+test_endpoint "Alerts" "/api/alerts"
+echo ""
+
+# HuggingFace Endpoints
+echo "🤗 HuggingFace Endpoints"
+echo "========================="
+test_endpoint "HF Health" "/api/hf/health"
+test_endpoint "HF Registry" "/api/hf/registry?kind=models"
+echo ""
+
+echo "=================================="
+echo "✅ Testing Complete!"
+echo "=================================="
+echo ""
+echo "📖 Full documentation: ${BASE_URL}/docs"
+echo "📋 API Guide: See HUGGINGFACE_API_GUIDE.md"

admin.html

@@ -1,506 +1,1017 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Crypto Intelligence Hub - HF Space</title>
-    <link rel="stylesheet" href="static/css/design-tokens.css" />
-    <link rel="stylesheet" href="static/css/design-system.css" />
-    <link rel="stylesheet" href="static/css/dashboard.css" />
-    <link rel="stylesheet" href="static/css/pro-dashboard.css" />
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" defer></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin Dashboard - Crypto Monitor</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        
+        :root {
+            --primary: #667eea;
+            --primary-dark: #5568d3;
+            --success: #48bb78;
+            --warning: #ed8936;
+            --danger: #f56565;
+            --bg-dark: #1a202c;
+            --bg-card: #2d3748;
+            --text-light: #e2e8f0;
+            --text-muted: #a0aec0;
+            --border: #4a5568;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            background: var(--bg-dark);
+            color: var(--text-light);
+            line-height: 1.6;
+        }
+        
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        
+        header {
+            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+            padding: 20px;
+            border-radius: 10px;
+            margin-bottom: 30px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+        }
+        
+        header h1 {
+            font-size: 28px;
+            font-weight: 700;
+            margin-bottom: 5px;
+        }
+        
+        header .subtitle {
+            color: rgba(255, 255, 255, 0.9);
+            font-size: 14px;
+        }
+        
+        .tabs {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 30px;
+            flex-wrap: wrap;
+        }
+        
+        .tab-btn {
+            padding: 12px 24px;
+            background: var(--bg-card);
+            border: 2px solid var(--border);
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: 600;
+            color: var(--text-light);
+            transition: all 0.3s;
+        }
+        
+        .tab-btn:hover {
+            background: var(--primary);
+            border-color: var(--primary);
+        }
+        
+        .tab-btn.active {
+            background: var(--primary);
+            border-color: var(--primary);
+        }
+        
+        .tab-content {
+            display: none;
+            animation: fadeIn 0.3s;
+        }
+        
+        .tab-content.active {
+            display: block;
+        }
+        
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .card {
+            background: var(--bg-card);
+            border-radius: 10px;
+            padding: 20px;
+            margin-bottom: 20px;
+            border: 1px solid var(--border);
+        }
+        
+        .card h3 {
+            color: var(--primary);
+            margin-bottom: 15px;
+            font-size: 18px;
+        }
+        
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+        
+        .stat-card {
+            background: var(--bg-card);
+            padding: 20px;
+            border-radius: 8px;
+            border: 1px solid var(--border);
+        }
+        
+        .stat-card .label {
+            color: var(--text-muted);
+            font-size: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        
+        .stat-card .value {
+            font-size: 32px;
+            font-weight: 700;
+            color: var(--primary);
+            margin: 5px 0;
+        }
+        
+        .stat-card .badge {
+            display: inline-block;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 11px;
+            font-weight: 600;
+        }
+        
+        .badge-success {
+            background: var(--success);
+            color: white;
+        }
+        
+        .badge-warning {
+            background: var(--warning);
+            color: white;
+        }
+        
+        .badge-danger {
+            background: var(--danger);
+            color: white;
+        }
+        
+        .btn {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.2s;
+            margin-right: 10px;
+            margin-bottom: 10px;
+        }
+        
+        .btn-primary {
+            background: var(--primary);
+            color: white;
+        }
+        
+        .btn-primary:hover {
+            background: var(--primary-dark);
+        }
+        
+        .btn-success {
+            background: var(--success);
+            color: white;
+        }
+        
+        .btn-success:hover {
+            background: #38a169;
+        }
+        
+        .btn-secondary {
+            background: var(--bg-card);
+            color: var(--text-light);
+            border: 1px solid var(--border);
+        }
+        
+        .btn-secondary:hover {
+            background: var(--border);
+        }
+        
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 15px;
+        }
+        
+        table thead {
+            background: var(--bg-dark);
+        }
+        
+        table th {
+            padding: 12px;
+            text-align: left;
+            font-weight: 600;
+            font-size: 12px;
+            text-transform: uppercase;
+            color: var(--text-muted);
+        }
+        
+        table td {
+            padding: 12px;
+            border-top: 1px solid var(--border);
+        }
+        
+        table tbody tr:hover {
+            background: var(--bg-dark);
+        }
+        
+        .status-online {
+            color: var(--success);
+        }
+        
+        .status-offline {
+            color: var(--danger);
+        }
+        
+        .status-degraded {
+            color: var(--warning);
+        }
+        
+        .loading {
+            text-align: center;
+            padding: 40px;
+            color: var(--text-muted);
+        }
+        
+        .error-message {
+            background: var(--danger);
+            color: white;
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+        }
+        
+        .success-message {
+            background: var(--success);
+            color: white;
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+        }
+        
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: var(--text-muted);
+        }
+        
+        .empty-state svg {
+            width: 64px;
+            height: 64px;
+            margin-bottom: 20px;
+            opacity: 0.3;
+        }
+        
+        .filter-bar {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+        
+        select, input {
+            padding: 10px;
+            border-radius: 6px;
+            border: 1px solid var(--border);
+            background: var(--bg-dark);
+            color: var(--text-light);
+        }
+        
+        .log-entry {
+            padding: 10px;
+            border-left: 3px solid var(--primary);
+            margin-bottom: 10px;
+            background: var(--bg-dark);
+            border-radius: 4px;
+        }
+        
+        .log-entry.error {
+            border-left-color: var(--danger);
+        }
+        
+        .log-timestamp {
+            color: var(--text-muted);
+            font-size: 12px;
+        }
+        
+        pre {
+            background: var(--bg-dark);
+            padding: 15px;
+            border-radius: 6px;
+            overflow-x: auto;
+            font-size: 13px;
+            line-height: 1.4;
+        }
+        
+        .model-card {
+            background: var(--bg-dark);
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 15px;
+            border-left: 4px solid var(--primary);
+        }
+        
+        .model-card.valid {
+            border-left-color: var(--success);
+        }
+        
+        .model-card.conditional {
+            border-left-color: var(--warning);
+        }
+        
+        .model-card.invalid {
+            border-left-color: var(--danger);
+        }
+        
+        @media (max-width: 768px) {
+            .stats-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .tabs {
+                flex-direction: column;
+            }
+            
+            table {
+                font-size: 12px;
+            }
+            
+            table th, table td {
+                padding: 8px;
+            }
+        }
+    </style>
 </head>
-<body data-theme="dark">
-    <div class="app-shell">
-        <!-- Sidebar Navigation -->
-        <aside class="sidebar">
-            <div class="brand">
-                <strong>Crypto Intelligence Hub</strong>
-                <span class="env-pill">
-                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="1.5" />
-                        <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="1.5" />
-                        <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="1.5" />
-                    </svg>
-                    HF Space
-                </span>
+<body>
+    <div class="container">
+        <header>
+            <h1>🚀 Crypto Monitor Admin Dashboard</h1>
+            <p class="subtitle">Real-time provider management & system monitoring | NO MOCK DATA</p>
+        </header>
+
+        <div class="tabs">
+            <button class="tab-btn active" onclick="switchTab('status')">📊 Status</button>
+            <button class="tab-btn" onclick="switchTab('providers')">🔌 Providers</button>
+            <button class="tab-btn" onclick="switchTab('market')">💰 Market Data</button>
+            <button class="tab-btn" onclick="switchTab('apl')">🤖 APL Scanner</button>
+            <button class="tab-btn" onclick="switchTab('hf-models')">🧠 HF Models</button>
+            <button class="tab-btn" onclick="switchTab('diagnostics')">🔧 Diagnostics</button>
+            <button class="tab-btn" onclick="switchTab('logs')">📝 Logs</button>
+        </div>
+
+        <!-- Status Tab -->
+        <div id="tab-status" class="tab-content active">
+            <div class="stats-grid" id="global-stats">
+                <div class="stat-card">
+                    <div class="label">System Health</div>
+                    <div class="value" id="system-health">-</div>
+                    <span class="badge badge-success" id="health-badge">Healthy</span>
+                </div>
+                <div class="stat-card">
+                    <div class="label">Total Providers</div>
+                    <div class="value" id="total-providers">-</div>
+                </div>
+                <div class="stat-card">
+                    <div class="label">Validated</div>
+                    <div class="value" id="validated-providers">-</div>
+                </div>
+                <div class="stat-card">
+                    <div class="label">Database</div>
+                    <div class="value">✓</div>
+                    <span class="badge badge-success">Connected</span>
+                </div>
             </div>
-            <nav class="nav">
-                <button class="nav-button active" data-nav="page-overview">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" fill="currentColor"/></svg>
-                    Overview
-                </button>
-                <button class="nav-button" data-nav="page-market">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M3 17l6-6 4 4 8-8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
-                    Market
-                </button>
-                <button class="nav-button" data-nav="page-chart">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M3 3v18h18" stroke="currentColor" stroke-width="2"/><path d="M7 10l4-4 4 4 6-6" stroke="currentColor" stroke-width="2"/></svg>
-                    Chart Lab
-                </button>
-                <button class="nav-button" data-nav="page-ai">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" fill="currentColor"/><path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
-                    AI Advisor
-                </button>
-                <button class="nav-button" data-nav="page-news">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10l6 6v8a2 2 0 01-2 2z" stroke="currentColor" stroke-width="2"/><path d="M7 10h6m-6 4h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
-                    News
-                </button>
-                <button class="nav-button" data-nav="page-providers">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-                    Providers
-                </button>
-                <button class="nav-button" data-nav="page-datasets">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
-                    Datasets & Models
-                </button>
-                <button class="nav-button" data-nav="page-api">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="currentColor"/></svg>
-                    API Explorer
-                </button>
-                <button class="nav-button" data-nav="page-debug">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
-                    Diagnostics
-                </button>
-                <button class="nav-button" data-nav="page-settings">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/><path d="M12 1v6m0 6v6M5 5l4 4m6 6l4 4M1 12h6m6 0h6M5 19l4-4m6-6l4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
-                    Settings
-                </button>
-            </nav>
-            <div class="sidebar-footer">
-                <small>
-                    Crypto Intelligence Hub<br />
-                    <strong>10+ HF Models</strong> • <strong>14 Datasets</strong><br />
-                    Real-time data • Ensemble sentiment
-                </small>
+            
+            <div class="card">
+                <h3>Quick Actions</h3>
+                <button class="btn btn-primary" onclick="refreshAllData()">🔄 Refresh All</button>
+                <button class="btn btn-success" onclick="runAPL()">🤖 Run APL Scan</button>
+                <button class="btn btn-secondary" onclick="runDiagnostics()">🔧 Run Diagnostics</button>
             </div>
-        </aside>
-
-        <!-- Main Content Area -->
-        <main class="main-area">
-            <!-- Top Bar with Status -->
-            <header class="topbar">
-                <div>
-                    <h1>Crypto Intelligence Dashboard</h1>
-                    <p class="text-muted">Live market data, AI-powered sentiment analysis, and comprehensive crypto intelligence</p>
-                </div>
-                <div class="status-group">
-                    <div class="status-pill" data-api-health data-state="warn">
-                        <span class="status-dot"></span>
-                        <span>checking</span>
-                    </div>
-                    <div class="status-pill" data-ws-status data-state="warn">
-                        <span class="status-dot"></span>
-                        <span>connecting</span>
-                    </div>
+            
+            <div class="card">
+                <h3>Recent Market Data</h3>
+                <div id="quick-market-view"></div>
+            </div>
+        </div>
+
+        <!-- Providers Tab -->
+        <div id="tab-providers" class="tab-content">
+            <div class="card">
+                <h3>Providers Management</h3>
+                <div class="filter-bar">
+                    <select id="category-filter" onchange="filterProviders()">
+                        <option value="">All Categories</option>
+                        <option value="market_data">Market Data</option>
+                        <option value="sentiment">Sentiment</option>
+                        <option value="defi">DeFi</option>
+                        <option value="exchange">Exchange</option>
+                        <option value="explorer">Explorer</option>
+                        <option value="rpc">RPC</option>
+                        <option value="news">News</option>
+                    </select>
+                    <button class="btn btn-secondary" onclick="loadProviders()">🔄 Refresh</button>
                 </div>
-            </header>
-
-            <div class="page-container">
-                <!-- ========== OVERVIEW PAGE ========== -->
-                <section id="page-overview" class="page active">
-                    <div class="section-header">
-                        <h2 class="section-title">Global Overview</h2>
-                        <span class="chip">Powered by /api/market/stats</span>
-                    </div>
-                    
-                    <!-- Market Stats Cards -->
-                    <div class="stats-grid" data-overview-stats>
-                        <div class="glass-card stat-card">
-                            <div class="stat-label">Total Market Cap</div>
-                            <div class="stat-value">Loading...</div>
-                        </div>
-                        <div class="glass-card stat-card">
-                            <div class="stat-label">24h Volume</div>
-                            <div class="stat-value">Loading...</div>
-                        </div>
-                        <div class="glass-card stat-card">
-                            <div class="stat-label">BTC Dominance</div>
-                            <div class="stat-value">Loading...</div>
-                        </div>
-                        <div class="glass-card stat-card">
-                            <div class="stat-label">Market Sentiment</div>
-                            <div class="stat-value">Loading...</div>
-                        </div>
-                    </div>
-
-                    <div class="grid-two">
-                        <!-- Top Coins Table -->
-                        <div class="glass-card">
-                            <div class="section-header">
-                                <h3>Top Coins</h3>
-                                <span class="text-muted">By market cap</span>
-                            </div>
-                            <div class="table-wrapper">
-                                <table>
-                                    <thead>
-                                        <tr>
-                                            <th>#</th>
-                                            <th>Symbol</th>
-                                            <th>Name</th>
-                                            <th>Price</th>
-                                            <th>24h %</th>
-                                            <th>Volume</th>
-                                            <th>Market Cap</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody data-top-coins-body>
-                                        <tr><td colspan="7" style="text-align:center;padding:2rem;">Loading top coins...</td></tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-
-                        <!-- Sentiment Chart -->
-                        <div class="glass-card">
-                            <div class="section-header">
-                                <h3>Global Sentiment</h3>
-                                <span class="text-muted">Ensemble HF models</span>
-                            </div>
-                            <canvas id="sentiment-chart" height="220"></canvas>
-                            <div style="margin-top:1rem;font-size:0.875rem;color:var(--text-secondary);">
-                                <strong>Models used:</strong> CryptoBERT, FinBERT, Twitter Sentiment<br>
-                                <strong>Method:</strong> Majority voting with confidence scoring
-                            </div>
-                        </div>
-                    </div>
-                </section>
-
-                <!-- ========== MARKET PAGE ========== -->
-                <section id="page-market" class="page">
-                    <div class="section-header">
-                        <h2 class="section-title">Market Intelligence</h2>
-                        <div class="controls-bar">
-                            <div class="input-chip">
-                                <svg viewBox="0 0 24 24" width="16" height="16"><path d="M21 20l-5.6-5.6A6.5 6.5 0 1 0 15.4 16L21 21zM5 10.5a5.5 5.5 0 1 1 11 0a5.5 5.5 0 0 1-11 0z" fill="currentColor"/></svg>
-                                <input type="text" placeholder="Search symbol" data-market-search />
-                            </div>
-                            <button class="ghost" data-refresh-market>Refresh</button>
-                        </div>
-                    </div>
+                <div id="providers-table"></div>
+            </div>
+        </div>
+
+        <!-- Market Data Tab -->
+        <div id="tab-market" class="tab-content">
+            <div class="card">
+                <h3>Live Market Data</h3>
+                <button class="btn btn-primary" onclick="loadMarketData()">🔄 Refresh Prices</button>
+                <div id="market-data-container"></div>
+            </div>
+            
+            <div class="card">
+                <h3>Sentiment Analysis</h3>
+                <div id="sentiment-data"></div>
+            </div>
+            
+            <div class="card">
+                <h3>Trending Coins</h3>
+                <div id="trending-coins"></div>
+            </div>
+        </div>
+
+        <!-- APL Tab -->
+        <div id="tab-apl" class="tab-content">
+            <div class="card">
+                <h3>Auto Provider Loader (APL)</h3>
+                <p style="color: var(--text-muted); margin-bottom: 20px;">
+                    APL automatically discovers, validates, and integrates cryptocurrency data providers.
+                    All validations use REAL API calls - NO MOCK DATA.
+                </p>
+                
+                <button class="btn btn-success" onclick="runAPL()" id="apl-run-btn">
+                    🤖 Run APL Scan
+                </button>
+                <button class="btn btn-secondary" onclick="loadAPLReport()">📊 View Last Report</button>
+                
+                <div id="apl-status" style="margin-top: 20px;"></div>
+            </div>
+            
+            <div class="card">
+                <h3>APL Summary Statistics</h3>
+                <div id="apl-summary"></div>
+            </div>
+            
+            <div class="card">
+                <h3>APL Output</h3>
+                <pre id="apl-output" style="max-height: 400px; overflow-y: auto;">No output yet. Click "Run APL Scan" to start.</pre>
+            </div>
+        </div>
+
+        <!-- HF Models Tab -->
+        <div id="tab-hf-models" class="tab-content">
+            <div class="card">
+                <h3>Hugging Face Models</h3>
+                <p style="color: var(--text-muted); margin-bottom: 20px;">
+                    HuggingFace models validated by APL for crypto sentiment analysis and NLP tasks.
+                </p>
+                <button class="btn btn-primary" onclick="loadHFModels()">🔄 Refresh Models</button>
+                <div id="hf-models-container"></div>
+            </div>
+            
+            <div class="card">
+                <h3>HF Services Health</h3>
+                <div id="hf-health"></div>
+            </div>
+        </div>
+
+        <!-- Diagnostics Tab -->
+        <div id="tab-diagnostics" class="tab-content">
+            <div class="card">
+                <h3>System Diagnostics</h3>
+                <button class="btn btn-primary" onclick="runDiagnostics(true)">🔧 Run with Auto-Fix</button>
+                <button class="btn btn-secondary" onclick="runDiagnostics(false)">🔍 Run Scan Only</button>
+                <button class="btn btn-secondary" onclick="loadLastDiagnostics()">📋 View Last Results</button>
+                
+                <div id="diagnostics-results" style="margin-top: 20px;"></div>
+            </div>
+        </div>
+
+        <!-- Logs Tab -->
+        <div id="tab-logs" class="tab-content">
+            <div class="card">
+                <h3>System Logs</h3>
+                <button class="btn btn-primary" onclick="loadRecentLogs()">🔄 Refresh</button>
+                <button class="btn btn-danger" onclick="loadErrorLogs()">❌ Errors Only</button>
+                
+                <div id="logs-container" style="margin-top: 20px;"></div>
+            </div>
+        </div>
+    </div>
 
-                    <div class="glass-card">
-                        <div class="table-wrapper">
-                            <table>
-                                <thead>
-                                    <tr>
-                                        <th>#</th>
-                                        <th>Symbol</th>
-                                        <th>Name</th>
-                                        <th>Price</th>
-                                        <th>24h %</th>
-                                        <th>Volume</th>
-                                        <th>Market Cap</th>
-                                        <th>Actions</th>
-                                    </tr>
-                                </thead>
-                                <tbody data-market-body>
-                                    <tr><td colspan="8" style="text-align:center;padding:2rem;">Loading market data...</td></tr>
-                                </tbody>
-                            </table>
+    <script src="/static/js/api-client.js"></script>
+    <script>
+        // Tab switching
+        function switchTab(tabName) {
+            // Hide all tabs
+            document.querySelectorAll('.tab-content').forEach(tab => {
+                tab.classList.remove('active');
+            });
+            document.querySelectorAll('.tab-btn').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            
+            // Show selected tab
+            document.getElementById(`tab-${tabName}`).classList.add('active');
+            event.target.classList.add('active');
+            
+            // Load data for tab
+            switch(tabName) {
+                case 'status':
+                    loadGlobalStatus();
+                    break;
+                case 'providers':
+                    loadProviders();
+                    break;
+                case 'market':
+                    loadMarketData();
+                    loadSentiment();
+                    loadTrending();
+                    break;
+                case 'apl':
+                    loadAPLSummary();
+                    break;
+                case 'hf-models':
+                    loadHFModels();
+                    loadHFHealth();
+                    break;
+                case 'diagnostics':
+                    loadLastDiagnostics();
+                    break;
+                case 'logs':
+                    loadRecentLogs();
+                    break;
+            }
+        }
+
+        // Global Status
+        async function loadGlobalStatus() {
+            try {
+                const [status, stats] = await Promise.all([
+                    apiClient.get('/api/status'),
+                    apiClient.get('/api/stats')
+                ]);
+                
+                document.getElementById('system-health').textContent = status.system_health.toUpperCase();
+                document.getElementById('total-providers').textContent = status.total_providers;
+                document.getElementById('validated-providers').textContent = status.validated_providers;
+                
+                // Quick market view
+                const market = await apiClient.get('/api/market');
+                let marketHTML = '<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">';
+                market.cryptocurrencies.forEach(coin => {
+                    const changeClass = coin.change_24h >= 0 ? 'status-online' : 'status-offline';
+                    marketHTML += `
+                        <div style="background: var(--bg-dark); padding: 15px; border-radius: 8px;">
+                            <div style="font-weight: 600;">${coin.name} (${coin.symbol})</div>
+                            <div style="font-size: 24px; margin: 10px 0;">$${coin.price.toLocaleString()}</div>
+                            <div class="${changeClass}">${coin.change_24h >= 0 ? '↑' : '↓'} ${Math.abs(coin.change_24h).toFixed(2)}%</div>
                         </div>
-                    </div>
-
-                    <!-- Coin Detail Drawer -->
-                    <div class="drawer" data-market-drawer style="display:none;">
-                        <button class="ghost" data-close-drawer>Close</button>
-                        <h3 data-drawer-symbol>—</h3>
-                        <div data-drawer-stats></div>
-                        <div class="glass-card" data-chart-wrapper>
-                            <canvas id="market-detail-chart" height="180"></canvas>
+                    `;
+                });
+                marketHTML += '</div>';
+                document.getElementById('quick-market-view').innerHTML = marketHTML;
+                
+            } catch (error) {
+                console.error('Error loading global status:', error);
+                showError('Failed to load global status');
+            }
+        }
+
+        // Providers
+        async function loadProviders() {
+            try {
+                const response = await apiClient.get('/api/providers');
+                const providers = response.providers;
+                
+                if (providers.length === 0) {
+                    document.getElementById('providers-table').innerHTML = '<div class="empty-state">No providers found. Run APL scan to discover providers.</div>';
+                    return;
+                }
+                
+                let html = `
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Provider ID</th>
+                                <th>Name</th>
+                                <th>Category</th>
+                                <th>Type</th>
+                                <th>Status</th>
+                                <th>Response Time</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                `;
+                
+                providers.forEach(p => {
+                    const statusClass = p.status === 'validated' ? 'status-online' : 'status-degraded';
+                    html += `
+                        <tr>
+                            <td><code>${p.provider_id}</code></td>
+                            <td>${p.name}</td>
+                            <td>${p.category}</td>
+                            <td>${p.type}</td>
+                            <td class="${statusClass}">${p.status}</td>
+                            <td>${p.response_time_ms ? p.response_time_ms.toFixed(0) + 'ms' : 'N/A'}</td>
+                        </tr>
+                    `;
+                });
+                
+                html += '</tbody></table>';
+                document.getElementById('providers-table').innerHTML = html;
+                
+            } catch (error) {
+                console.error('Error loading providers:', error);
+                showError('Failed to load providers');
+            }
+        }
+
+        function filterProviders() {
+            // Would filter the providers table
+            loadProviders();
+        }
+
+        // Market Data
+        async function loadMarketData() {
+            try {
+                const data = await apiClient.get('/api/market');
+                
+                let html = '<table><thead><tr><th>Rank</th><th>Coin</th><th>Price</th><th>24h Change</th><th>Market Cap</th><th>Volume 24h</th></tr></thead><tbody>';
+                
+                data.cryptocurrencies.forEach(coin => {
+                    const changeClass = coin.change_24h >= 0 ? 'status-online' : 'status-offline';
+                    html += `
+                        <tr>
+                            <td>${coin.rank}</td>
+                            <td><strong>${coin.name}</strong> (${coin.symbol})</td>
+                            <td>$${coin.price.toLocaleString()}</td>
+                            <td class="${changeClass}">${coin.change_24h >= 0 ? '+' : ''}${coin.change_24h.toFixed(2)}%</td>
+                            <td>$${(coin.market_cap / 1e9).toFixed(2)}B</td>
+                            <td>$${(coin.volume_24h / 1e9).toFixed(2)}B</td>
+                        </tr>
+                    `;
+                });
+                
+                html += '</tbody></table>';
+                html += `<p style="margin-top: 15px; color: var(--text-muted);">Source: ${data.source}</p>`;
+                
+                document.getElementById('market-data-container').innerHTML = html;
+            } catch (error) {
+                console.error('Error loading market data:', error);
+                document.getElementById('market-data-container').innerHTML = '<div class="error-message">Failed to load market data: ' + error.message + '</div>';
+            }
+        }
+
+        async function loadSentiment() {
+            try {
+                const data = await apiClient.get('/api/sentiment');
+                
+                const fngValue = data.fear_greed_index;
+                let color = '--success';
+                if (fngValue < 30) color = '--danger';
+                else if (fngValue < 50) color = '--warning';
+                
+                document.getElementById('sentiment-data').innerHTML = `
+                    <div style="text-align: center; padding: 20px;">
+                        <div style="font-size: 64px; color: var(${color}); font-weight: 700;">${fngValue}</div>
+                        <div style="font-size: 24px; margin: 10px 0;">${data.fear_greed_label}</div>
+                        <p style="color: var(--text-muted);">Source: ${data.source}</p>
+                    </div>
+                `;
+            } catch (error) {
+                console.error('Error loading sentiment:', error);
+                document.getElementById('sentiment-data').innerHTML = '<div class="error-message">Failed to load sentiment: ' + error.message + '</div>';
+            }
+        }
+
+        async function loadTrending() {
+            try {
+                const data = await apiClient.get('/api/trending');
+                
+                if (data.trending.length === 0) {
+                    document.getElementById('trending-coins').innerHTML = '<div class="empty-state">No trending coins available</div>';
+                    return;
+                }
+                
+                let html = '<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px;">';
+                data.trending.forEach(coin => {
+                    html += `
+                        <div style="background: var(--bg-dark); padding: 15px; border-radius: 8px;">
+                            <div style="font-weight: 600;">${coin.name}</div>
+                            <div style="color: var(--text-muted);">${coin.symbol}</div>
+                            ${coin.market_cap_rank ? `<div style="margin-top: 10px;">Rank: #${coin.market_cap_rank}</div>` : ''}
                         </div>
-                        <div class="glass-card">
-                            <h4>AI Sentiment Analysis</h4>
-                            <div data-drawer-sentiment></div>
+                    `;
+                });
+                html += '</div>';
+                html += `<p style="margin-top: 15px; color: var(--text-muted);">Source: ${data.source}</p>`;
+                
+                document.getElementById('trending-coins').innerHTML = html;
+            } catch (error) {
+                console.error('Error loading trending:', error);
+                document.getElementById('trending-coins').innerHTML = '<div class="error-message">Failed to load trending: ' + error.message + '</div>';
+            }
+        }
+
+        // APL Functions
+        async function runAPL() {
+            const btn = document.getElementById('apl-run-btn');
+            btn.disabled = true;
+            btn.textContent = '⏳ Running APL Scan...';
+            
+            document.getElementById('apl-status').innerHTML = '<div class="loading">Running APL scan... This may take 1-2 minutes...</div>';
+            document.getElementById('apl-output').textContent = 'Executing APL scan...';
+            
+            try {
+                const result = await apiClient.post('/api/apl/run');
+                
+                if (result.status === 'completed') {
+                    document.getElementById('apl-status').innerHTML = `
+                        <div class="success-message">
+                            ✓ APL scan completed successfully!<br>
+                            Providers count: ${result.providers_count}<br>
+                            Time: ${result.timestamp}
                         </div>
-                    </div>
-                </section>
-
-                <!-- ========== CHART LAB PAGE ========== -->
-                <section id="page-chart" class="page">
-                    <div class="section-header">
-                        <h2 class="section-title">Chart Lab</h2>
-                        <div class="controls-bar">
-                            <select data-chart-symbol>
-                                <option value="BTC">Bitcoin (BTC)</option>
-                                <option value="ETH">Ethereum (ETH)</option>
-                                <option value="SOL">Solana (SOL)</option>
-                                <option value="BNB">BNB</option>
-                                <option value="XRP">Ripple (XRP)</option>
-                                <option value="ADA">Cardano (ADA)</option>
-                            </select>
-                            <div class="input-chip">
-                                <button class="ghost active" data-chart-timeframe="7d">7D</button>
-                                <button class="ghost" data-chart-timeframe="30d">30D</button>
-                                <button class="ghost" data-chart-timeframe="90d">90D</button>
-                            </div>
+                    `;
+                    document.getElementById('apl-output').textContent = result.stdout || 'Scan completed.';
+                    
+                    // Reload summary
+                    await loadAPLSummary();
+                    
+                } else {
+                    document.getElementById('apl-status').innerHTML = `<div class="error-message">APL scan ${result.status}: ${result.message || 'Unknown error'}</div>`;
+                    document.getElementById('apl-output').textContent = result.stdout || 'No output';
+                }
+            } catch (error) {
+                console.error('Error running APL:', error);
+                document.getElementById('apl-status').innerHTML = '<div class="error-message">Failed to run APL: ' + error.message + '</div>';
+            } finally {
+                btn.disabled = false;
+                btn.textContent = '🤖 Run APL Scan';
+            }
+        }
+
+        async function loadAPLSummary() {
+            try {
+                const summary = await apiClient.get('/api/apl/summary');
+                
+                if (summary.status === 'not_available') {
+                    document.getElementById('apl-summary').innerHTML = '<div class="empty-state">No APL report available. Run APL scan first.</div>';
+                    return;
+                }
+                
+                document.getElementById('apl-summary').innerHTML = `
+                    <div class="stats-grid">
+                        <div class="stat-card">
+                            <div class="label">HTTP Candidates</div>
+                            <div class="value">${summary.http_candidates}</div>
+                            <span class="badge badge-success">Valid: ${summary.http_valid}</span>
                         </div>
-                    </div>
-
-                    <div class="glass-card">
-                        <canvas id="chart-lab-canvas" height="300"></canvas>
-                    </div>
-
-                    <div class="glass-card">
-                        <h4>Technical Analysis</h4>
-                        <div class="controls-bar">
-                            <label><input type="checkbox" data-indicator value="MA20" checked /> MA 20</label>
-                            <label><input type="checkbox" data-indicator value="MA50" /> MA 50</label>
-                            <label><input type="checkbox" data-indicator value="RSI" /> RSI</label>
-                            <label><input type="checkbox" data-indicator value="Volume" /> Volume</label>
+                        <div class="stat-card">
+                            <div class="label">HTTP Invalid</div>
+                            <div class="value">${summary.http_invalid}</div>
+                            <span class="badge badge-warning">Conditional: ${summary.http_conditional}</span>
                         </div>
-                        <button class="primary" data-run-analysis>🤖 Analyze with AI</button>
-                        <div data-ai-insights class="ai-insights" style="margin-top:1rem;"></div>
-                    </div>
-                </section>
-
-                <!-- ========== AI ADVISOR PAGE ========== -->
-                <section id="page-ai" class="page">
-                    <div class="section-header">
-                        <h2 class="section-title">AI-Powered Sentiment & Advisory</h2>
-                        <span class="chip">Ensemble: CryptoBERT + FinBERT + Social</span>
-                    </div>
-
-                    <div class="glass-card">
-                        <h4>Sentiment Analysis</h4>
-                        <form data-sentiment-form>
-                            <label>Text to Analyze
-                                <textarea name="text" rows="4" placeholder="Enter crypto-related text, news headline, or social media post for sentiment analysis..."></textarea>
-                            </label>
-                            <button class="primary" type="submit">🧠 Analyze Sentiment</button>
-                        </form>
-                        <div data-sentiment-result style="margin-top:1rem;"></div>
-                    </div>
-
-                    <div class="glass-card" style="margin-top:1.5rem;">
-                        <h4>AI Query Interface</h4>
-                        <form data-query-form>
-                            <label>Ask a Question
-                                <textarea name="query" rows="3" placeholder="e.g., What is the current Bitcoin price? or Analyze Ethereum trend"></textarea>
-                            </label>
-                            <button class="primary" type="submit">🔍 Submit Query</button>
-                        </form>
-                        <div data-query-result style="margin-top:1rem;"></div>
-                    </div>
-
-                    <div class="inline-message inline-info">
-                        ⚠️ AI-generated outputs are experimental and should not be considered financial advice.
-                    </div>
-                </section>
-
-                <!-- ========== NEWS PAGE ========== -->
-                <section id="page-news" class="page">
-                    <div class="section-header">
-                        <h2 class="section-title">News & Headlines</h2>
-                        <span class="chip">With AI sentiment analysis</span>
-                    </div>
-
-                    <div class="controls-bar">
-                        <input type="text" placeholder="Search headlines..." data-news-search />
-                        <input type="text" placeholder="Filter by symbol (e.g., BTC)" data-news-symbol />
-                        <button class="ghost" data-refresh-news>Refresh</button>
-                    </div>
-
-                    <div class="glass-card">
-                        <div class="table-wrapper">
-                            <table>
-                                <thead>
-                                    <tr>
-                                        <th>Title</th>
-                                        <th>Source</th>
-                                        <th>Symbols</th>
-                                        <th>Sentiment</th>
-                                        <th>Time</th>
-                                        <th>Actions</th>
-                                    </tr>
-                                </thead>
-                                <tbody data-news-body>
-                                    <tr><td colspan="6" style="text-align:center;padding:2rem;">Loading news...</td></tr>
-                                </tbody>
-                            </table>
+                        <div class="stat-card">
+                            <div class="label">HF Models</div>
+                            <div class="value">${summary.hf_candidates}</div>
+                            <span class="badge badge-success">Valid: ${summary.hf_valid}</span>
                         </div>
-                    </div>
-                </section>
-
-                <!-- ========== PROVIDERS PAGE ========== -->
-                <section id="page-providers" class="page">
-                    <div class="section-header">
-                        <h2 class="section-title">API Providers</h2>
-                        <span class="chip">95+ data sources</span>
-                    </div>
-
-                    <div class="glass-card">
-                        <div class="table-wrapper">
-                            <table>
-                                <thead>
-                                    <tr>
-                                        <th>Provider</th>
-                                        <th>Category</th>
-                                        <th>Type</th>
-                                        <th>Status</th>
-                                        <th>Response Time</th>
-                                    </tr>
-                                </thead>
-                                <tbody data-providers-body>
-                                    <tr><td colspan="5" style="text-align:center;padding:2rem;">Loading providers...</td></tr>
-                                </tbody>
-                            </table>
+                        <div class="stat-card">
+                            <div class="label">Total Active</div>
+                            <div class="value">${summary.total_active}</div>
+                            <span class="badge badge-success">Providers</span>
                         </div>
                     </div>
-                </section>
-
-                <!-- ========== DATASETS & MODELS PAGE ========== -->
-                <section id="page-datasets" class="page">
-                    <div class="section-header">
-                        <h2 class="section-title">HuggingFace Datasets & Models</h2>
-                    </div>
-
-                    <div class="grid-two">
-                        <!-- Datasets -->
-                        <div class="glass-card">
-                            <h4>📊 Crypto Datasets (14+)</h4>
-                            <div class="table-wrapper">
-                                <table>
-                                    <thead>
-                                        <tr>
-                                            <th>Dataset</th>
-                                            <th>Category</th>
-                                            <th>Actions</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody data-datasets-body>
-                                        <tr><td colspan="3" style="text-align:center;padding:1rem;">Loading...</td></tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-
-                        <!-- Models -->
-                        <div class="glass-card">
-                            <h4>🤖 AI Models (10+)</h4>
-                            <div class="table-wrapper">
-                                <table>
-                                    <thead>
-                                        <tr>
-                                            <th>Model</th>
-                                            <th>Task</th>
-                                            <th>Status</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody data-models-body>
-                                        <tr><td colspan="3" style="text-align:center;padding:1rem;">Loading...</td></tr>
-                                    </tbody>
-                                </table>
+                    <p style="margin-top: 15px; color: var(--text-muted);">Last updated: ${summary.timestamp}</p>
+                `;
+            } catch (error) {
+                console.error('Error loading APL summary:', error);
+                document.getElementById('apl-summary').innerHTML = '<div class="error-message">Failed to load APL summary</div>';
+            }
+        }
+
+        async function loadAPLReport() {
+            try {
+                const report = await apiClient.get('/api/apl/report');
+                
+                if (report.status === 'not_available') {
+                    showError('APL report not available. Run APL scan first.');
+                    return;
+                }
+                
+                document.getElementById('apl-output').textContent = JSON.stringify(report, null, 2);
+            } catch (error) {
+                console.error('Error loading APL report:', error);
+                showError('Failed to load APL report');
+            }
+        }
+
+        // HF Models
+        async function loadHFModels() {
+            try {
+                const response = await apiClient.get('/api/hf/models');
+                
+                if (response.count === 0) {
+                    document.getElementById('hf-models-container').innerHTML = '<div class="empty-state">No HF models found. Run APL scan to discover models.</div>';
+                    return;
+                }
+                
+                let html = '';
+                response.models.forEach(model => {
+                    const statusClass = model.status === 'VALID' ? 'valid' : model.status === 'CONDITIONALLY_AVAILABLE' ? 'conditional' : 'invalid';
+                    html += `
+                        <div class="model-card ${statusClass}">
+                            <div style="font-weight: 600; margin-bottom: 5px;">${model.provider_name}</div>
+                            <div style="color: var(--text-muted); font-size: 13px;">${model.provider_id}</div>
+                            <div style="margin-top: 10px;">
+                                <span class="badge badge-${statusClass === 'valid' ? 'success' : statusClass === 'conditional' ? 'warning' : 'danger'}">${model.status}</span>
                             </div>
+                            ${model.error_reason ? `<div style="margin-top: 10px; color: var(--warning);">${model.error_reason}</div>` : ''}
                         </div>
-                    </div>
-
-                    <!-- Model Test Form -->
-                    <div class="glass-card" style="margin-top:1.5rem;">
-                        <h4>🧪 Test a Model</h4>
-                        <form data-model-test-form>
-                            <div class="grid-two">
-                                <label>Model
-                                    <select name="model" data-model-select>
-                                        <option value="">Select a model...</option>
-                                    </select>
-                                </label>
-                                <label>Input Text
-                                    <textarea name="input" rows="3" placeholder="Enter text to test the model..."></textarea>
-                                </label>
+                    `;
+                });
+                
+                document.getElementById('hf-models-container').innerHTML = html;
+            } catch (error) {
+                console.error('Error loading HF models:', error);
+                document.getElementById('hf-models-container').innerHTML = '<div class="error-message">Failed to load HF models</div>';
+            }
+        }
+
+        async function loadHFHealth() {
+            try {
+                const health = await apiClient.get('/api/hf/health');
+                
+                const statusClass = health.ok ? 'status-online' : 'status-offline';
+                document.getElementById('hf-health').innerHTML = `
+                    <div style="padding: 20px; background: var(--bg-dark); border-radius: 8px;">
+                        <div class="${statusClass}" style="font-size: 24px; font-weight: 700;">${health.ok ? '✓ Healthy' : '✗ Unhealthy'}</div>
+                        ${health.ok ? `
+                            <div style="margin-top: 15px;">
+                                <div>Models: ${health.counts.models}</div>
+                                <div>Datasets: ${health.counts.datasets}</div>
+                                <div>Last refresh: ${new Date(health.last_refresh_epoch * 1000).toLocaleString()}</div>
                             </div>
-                            <button class="primary" type="submit">Run Test</button>
-                        </form>
-                        <div data-model-test-output style="margin-top:1rem;"></div>
-                    </div>
-                </section>
-
-                <!-- ========== API EXPLORER PAGE ========== -->
-                <section id="page-api" class="page">
-                    <div class="section-header">
-                        <h2 class="section-title">API Explorer</h2>
-                        <span class="chip">15+ endpoints</span>
-                    </div>
-
-                    <div class="glass-card">
-                        <h4>Available Endpoints</h4>
-                        <div data-api-endpoints style="display:grid;gap:0.5rem;margin-top:1rem;">
-                            <!-- Will be populated by JS -->
+                        ` : `
+                            <div style="margin-top: 15px; color: var(--danger);">Error: ${health.error || health.fail_reason}</div>
+                        `}
+                    </div>
+                `;
+            } catch (error) {
+                console.error('Error loading HF health:', error);
+                document.getElementById('hf-health').innerHTML = '<div class="error-message">Failed to load HF health</div>';
+            }
+        }
+
+        // Diagnostics
+        async function runDiagnostics(autoFix = false) {
+            try {
+                const result = await apiClient.post('/api/diagnostics/run?auto_fix=' + autoFix);
+                
+                let html = `
+                    <div class="success-message">
+                        ✓ Diagnostics completed<br>
+                        Issues found: ${result.issues_found}<br>
+                        Time: ${result.timestamp}
+                    </div>
+                `;
+                
+                if (result.issues.length > 0) {
+                    html += '<div style="margin-top: 20px;"><h4>Issues Found:</h4>';
+                    result.issues.forEach(issue => {
+                        html += `<div class="log-entry error">${issue.type}: ${issue.message}</div>`;
+                    });
+                    html += '</div>';
+                }
+                
+                if (result.fixes_applied.length > 0) {
+                    html += '<div style="margin-top: 20px;"><h4>Fixes Applied:</h4>';
+                    result.fixes_applied.forEach(fix => {
+                        html += `<div class="log-entry">${fix}</div>`;
+                    });
+                    html += '</div>';
+                }
+                
+                document.getElementById('diagnostics-results').innerHTML = html;
+            } catch (error) {
+                console.error('Error running diagnostics:', error);
+                showError('Failed to run diagnostics');
+            }
+        }
+
+        async function loadLastDiagnostics() {
+            try {
+                const result = await apiClient.get('/api/diagnostics/last');
+                
+                if (result.status === 'no_previous_run') {
+                    document.getElementById('diagnostics-results').innerHTML = '<div class="empty-state">No previous diagnostics run found</div>';
+                    return;
+                }
+                
+                // Display last diagnostics
+                document.getElementById('diagnostics-results').innerHTML = `<pre>${JSON.stringify(result, null, 2)}</pre>`;
+            } catch (error) {
+                console.error('Error loading diagnostics:', error);
+                showError('Failed to load diagnostics');
+            }
+        }
+
+        // Logs
+        async function loadRecentLogs() {
+            try {
+                const response = await apiClient.get('/api/logs/recent');
+                
+                if (response.count === 0) {
+                    document.getElementById('logs-container').innerHTML = '<div class="empty-state">No logs available</div>';
+                    return;
+                }
+                
+                let html = '';
+                response.logs.forEach(log => {
+                    const className = log.level === 'ERROR' ? 'error' : '';
+                    html += `
+                        <div class="log-entry ${className}">
+                            <div class="log-timestamp">${log.timestamp || new Date().toISOString()}</div>
+                            <div>${log.message || JSON.stringify(log)}</div>
                         </div>
-                    </div>
-                </section>
-
-                <!-- ========== DIAGNOSTICS PAGE ========== -->
-                <section id="page-debug" class="page">
-                    <div class="section-header">
-                        <h2 class="section-title">System Diagnostics</h2>
-                    </div>
-
-                    <div class="grid-two">
-                        <div class="glass-card">
-                            <h4>Health Status</h4>
-                            <div data-health-info>Checking...</div>
-                        </div>
-
-                        <div class="glass-card">
-                            <h4>WebSocket Status</h4>
-                            <div data-ws-info>Checking...</div>
-                        </div>
-                    </div>
-
-                    <div class="glass-card" style="margin-top:1.5rem;">
-                        <h4>Request Logs</h4>
-                        <div data-request-logs style="max-height:400px;overflow-y:auto;font-family:monospace;font-size:0.875rem;">
-                            <!-- Populated by JS -->
+                    `;
+                });
+                
+                document.getElementById('logs-container').innerHTML = html;
+            } catch (error) {
+                console.error('Error loading logs:', error);
+                document.getElementById('logs-container').innerHTML = '<div class="error-message">Failed to load logs</div>';
+            }
+        }
+
+        async function loadErrorLogs() {
+            try {
+                const response = await apiClient.get('/api/logs/errors');
+                
+                if (response.count === 0) {
+                    document.getElementById('logs-container').innerHTML = '<div class="empty-state">No error logs found</div>';
+                    return;
+                }
+                
+                let html = '';
+                response.errors.forEach(log => {
+                    html += `
+                        <div class="log-entry error">
+                            <div class="log-timestamp">${log.timestamp || new Date().toISOString()}</div>
+                            <div>${log.message || JSON.stringify(log)}</div>
                         </div>
-                    </div>
-                </section>
-
-                <!-- ========== SETTINGS PAGE ========== -->
-                <section id="page-settings" class="page">
-                    <div class="section-header">
-                        <h2 class="section-title">Settings</h2>
-                    </div>
-
-                    <div class="glass-card">
-                        <h4>Display Settings</h4>
-                        <div class="grid-two">
-                            <label class="input-chip">Dark Theme
-                                <div class="toggle">
-                                    <input type="checkbox" data-theme-toggle checked />
-                                    <span></span>
-                                </div>
-                            </label>
-                            <label class="input-chip">Compact Layout
-                                <div class="toggle">
-                                    <input type="checkbox" data-layout-toggle />
-                                    <span></span>
-                                </div>
-                            </label>
-                        </div>
-                    </div>
-
-                    <div class="glass-card" style="margin-top:1.5rem;">
-                        <h4>Refresh Intervals</h4>
-                        <div class="grid-two">
-                            <label>Market Data (seconds)
-                                <input type="number" min="10" step="5" value="30" data-market-interval />
-                            </label>
-                            <label>News Feed (seconds)
-                                <input type="number" min="30" step="10" value="60" data-news-interval />
-                            </label>
-                        </div>
-                    </div>
-
-                    <div class="inline-message inline-info" style="margin-top:1.5rem;">
-                        Settings are stored locally in your browser.
-                    </div>
-                </section>
-            </div>
-        </main>
-    </div>
-
-    <!-- Load App JS as ES6 Module -->
-    <script type="module" src="static/js/app.js"></script>
+                    `;
+                });
+                
+                document.getElementById('logs-container').innerHTML = html;
+            } catch (error) {
+                console.error('Error loading error logs:', error);
+                showError('Failed to load error logs');
+            }
+        }
+
+        // Utility functions
+        function showError(message) {
+            alert('Error: ' + message);
+        }
+
+        function refreshAllData() {
+            loadGlobalStatus();
+            loadProviders();
+            loadAPLSummary();
+        }
+
+        // Auto-refresh every 30 seconds
+        setInterval(() => {
+            const activeTab = document.querySelector('.tab-content.active').id;
+            if (activeTab === 'tab-status') {
+                loadGlobalStatus();
+            }
+        }, 30000);
+
+        // Load initial data
+        window.addEventListener('DOMContentLoaded', () => {
+            console.log('✓ Admin Dashboard Loaded - Real Data Only');
+            loadGlobalStatus();
+        });
+    </script>
 </body>
 </html>

config.js

@@ -1,366 +1,146 @@
 /**
- * ═══════════════════════════════════════════════════════════════════
- * CONFIGURATION FILE
- * Dashboard Settings - Easy Customization
- * ═══════════════════════════════════════════════════════════════════
+ * API Configuration for Crypto API Monitoring System
+ * Automatically detects environment (localhost, HuggingFace Spaces, or custom deployment)
  */
 
-// 🔧 Main Backend Settings
-window.DASHBOARD_CONFIG = {
-
-    // ═══════════════════════════════════════════════════════════════
-    // API and WebSocket URLs
-    // ═══════════════════════════════════════════════════════════════
-
-    BACKEND_URL: window.location.origin || 'https://really-amin-datasourceforcryptocurrency.hf.space',
-    WS_URL: (window.location.origin || 'https://really-amin-datasourceforcryptocurrency.hf.space').replace('http://', 'ws://').replace('https://', 'wss://') + '/ws',
-
-    // ⏱️ Update Timing (milliseconds)
-    UPDATE_INTERVAL: 30000,           // Every 30 seconds
-    CACHE_TTL: 60000,                 // 1 minute
-    HEARTBEAT_INTERVAL: 30000,        // 30 seconds
-
-    // 🔄 Reconnection Settings
-    MAX_RECONNECT_ATTEMPTS: 5,
-    RECONNECT_DELAY: 3000,            // 3 seconds
-
-    // ═══════════════════════════════════════════════════════════════
-    // Display Settings
-    // ═══════════════════════════════════════════════════════════════
-
-    // Number of items to display
-    MAX_COINS_DISPLAY: 20,            // Number of coins in table
-    MAX_NEWS_DISPLAY: 20,             // Number of news items
-    MAX_TRENDING_DISPLAY: 10,         // Number of trending items
-
-    // Table settings
-    TABLE_ROWS_PER_PAGE: 10,
-
-    // ═══════════════════════════════════════════════════════════════
-    // Chart Settings
-    // ═══════════════════════════════════════════════════════════════
-
-    CHART: {
-        DEFAULT_SYMBOL: 'BTCUSDT',
-        DEFAULT_INTERVAL: '1h',
-        AVAILABLE_INTERVALS: ['1m', '5m', '15m', '1h', '4h', '1d'],
-        THEME: 'dark',
-    },
-
-    // ═══════════════════════════════════════════════════════════════
-    // AI Settings
-    // ═══════════════════════════════════════════════════════════════
-
-    AI: {
-        ENABLE_SENTIMENT: true,
-        ENABLE_NEWS_SUMMARY: true,
-        ENABLE_PRICE_PREDICTION: false,    // Currently disabled
-        ENABLE_PATTERN_DETECTION: false,   // Currently disabled
-    },
-
-    // ═══════════════════════════════════════════════════════════════
-    // Notification Settings
-    // ═══════════════════════════════════════════════════════════════
-
-    NOTIFICATIONS: {
-        ENABLE: true,
-        SHOW_PRICE_ALERTS: true,
-        SHOW_NEWS_ALERTS: true,
-        AUTO_DISMISS_TIME: 5000,          // 5 seconds
-    },
-
-    // ═══════════════════════════════════════════════════════════════
-    // UI Settings
-    // ═══════════════════════════════════════════════════════════════
-
-    UI: {
-        DEFAULT_THEME: 'dark',            // 'dark' or 'light'
-        ENABLE_ANIMATIONS: true,
-        ENABLE_SOUNDS: false,
-        LANGUAGE: 'en',                   // 'en' or 'fa'
-        RTL: false,
-    },
-
-    // ═══════════════════════════════════════════════════════════════
-    // Debug Settings
-    // ═══════════════════════════════════════════════════════════════
-
-    DEBUG: {
-        ENABLE_CONSOLE_LOGS: true,
-        ENABLE_PERFORMANCE_MONITORING: true,
-        SHOW_API_REQUESTS: true,
-        SHOW_WS_MESSAGES: false,
-    },
-
-    // ═══════════════════════════════════════════════════════════════
-    // Default Filters and Sorting
-    // ═══════════════════════════════════════════════════════════════
-
-    FILTERS: {
-        DEFAULT_MARKET_FILTER: 'all',     // 'all', 'gainers', 'losers', 'trending'
-        DEFAULT_NEWS_FILTER: 'all',       // 'all', 'bitcoin', 'ethereum', 'defi', 'nft'
-        DEFAULT_SORT: 'market_cap',       // 'market_cap', 'volume', 'price', 'change'
-        SORT_ORDER: 'desc',               // 'asc' or 'desc'
-    },
-
-    // ═══════════════════════════════════════════════════════════════
-    // API Endpoints (Optional - if your backend differs)
-    // ═══════════════════════════════════════════════════════════════
-
-    ENDPOINTS: {
-        HEALTH: '/api/health',
-        MARKET: '/api/market/stats',
-        MARKET_PRICES: '/api/market/prices',
-        COINS_TOP: '/api/coins/top',
-        COIN_DETAILS: '/api/coins',
-        TRENDING: '/api/trending',
-        SENTIMENT: '/api/sentiment',
-        SENTIMENT_ANALYZE: '/api/sentiment/analyze',
-        NEWS: '/api/news/latest',
-        NEWS_SUMMARIZE: '/api/news/summarize',
-        STATS: '/api/stats',
-        PROVIDERS: '/api/providers',
-        PROVIDER_STATUS: '/api/providers/status',
-        CHART_HISTORY: '/api/charts/price',
-        CHART_ANALYZE: '/api/charts/analyze',
-        OHLCV: '/api/ohlcv',
-        QUERY: '/api/query',
-        DATASETS: '/api/datasets/list',
-        MODELS: '/api/models/list',
-        HF_HEALTH: '/api/hf/health',
-        HF_REGISTRY: '/api/hf/registry',
-        SYSTEM_STATUS: '/api/system/status',
-        SYSTEM_CONFIG: '/api/system/config',
-        CATEGORIES: '/api/categories',
-        RATE_LIMITS: '/api/rate-limits',
-        LOGS: '/api/logs',
-        ALERTS: '/api/alerts',
-    },
-
-    // ═══════════════════════════════════════════════════════════════
-    // WebSocket Events
-    // ═══════════════════════════════════════════════════════════════
-
-    WS_EVENTS: {
-        MARKET_UPDATE: 'market_update',
-        SENTIMENT_UPDATE: 'sentiment_update',
-        NEWS_UPDATE: 'news_update',
-        STATS_UPDATE: 'stats_update',
-        PRICE_UPDATE: 'price_update',
-        API_UPDATE: 'api_update',
-        STATUS_UPDATE: 'status_update',
-        SCHEDULE_UPDATE: 'schedule_update',
-        CONNECTED: 'connected',
-        DISCONNECTED: 'disconnected',
-    },
+const CONFIG = (() => {
+    // Detect if running on HuggingFace Spaces
+    const isHuggingFaceSpaces = window.location.hostname.includes('hf.space') ||
+                                window.location.hostname.includes('huggingface.co');
+
+    // Detect if running locally
+    const isLocalhost = window.location.hostname === 'localhost' ||
+                       window.location.hostname === '127.0.0.1' ||
+                       window.location.hostname === '';
+
+    // Get base API URL based on environment
+    const getApiBaseUrl = () => {
+        // If running on HuggingFace Spaces, use relative URLs
+        if (isHuggingFaceSpaces) {
+            return window.location.origin;
+        }
 
-    // ═══════════════════════════════════════════════════════════════
-    // Display Formats
-    // ═══════════════════════════════════════════════════════════════
+        // If running locally, use localhost with port 7860
+        if (isLocalhost) {
+            return 'http://localhost:7860';
+        }
 
-    FORMATS: {
-        CURRENCY: {
-            LOCALE: 'en-US',
-            STYLE: 'currency',
-            CURRENCY: 'USD',
-        },
-        DATE: {
-            LOCALE: 'en-US',
-            OPTIONS: {
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit',
-            },
+        // For custom deployments, use the current origin
+        return window.location.origin;
+    };
+
+    // Get WebSocket URL based on environment
+    const getWebSocketUrl = () => {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const host = isLocalhost ? 'localhost:7860' : window.location.host;
+        return `${protocol}//${host}`;
+    };
+
+    const API_BASE = getApiBaseUrl();
+    const WS_BASE = getWebSocketUrl();
+
+    return {
+        // API Configuration
+        API_BASE: API_BASE,
+        WS_BASE: WS_BASE,
+
+        // Environment flags
+        IS_HUGGINGFACE_SPACES: isHuggingFaceSpaces,
+        IS_LOCALHOST: isLocalhost,
+
+        // API Endpoints
+        ENDPOINTS: {
+            // Health & Status
+            HEALTH: `${API_BASE}/health`,
+            API_INFO: `${API_BASE}/api-info`,
+            STATUS: `${API_BASE}/api/status`,
+
+            // Provider Management
+            PROVIDERS: `${API_BASE}/api/providers`,
+            CATEGORIES: `${API_BASE}/api/categories`,
+
+            // Data Collection
+            PRICES: `${API_BASE}/api/prices`,
+            NEWS: `${API_BASE}/api/news`,
+            SENTIMENT: `${API_BASE}/api/sentiment/current`,
+            WHALES: `${API_BASE}/api/whales/transactions`,
+
+            // HuggingFace Integration
+            HF_HEALTH: `${API_BASE}/api/hf/health`,
+            HF_REGISTRY: `${API_BASE}/api/hf/registry`,
+            HF_SEARCH: `${API_BASE}/api/hf/search`,
+            HF_REFRESH: `${API_BASE}/api/hf/refresh`,
+            HF_RUN_SENTIMENT: `${API_BASE}/api/hf/run-sentiment`,
+
+            // Monitoring
+            LOGS: `${API_BASE}/api/logs`,
+            ALERTS: `${API_BASE}/api/alerts`,
+            SCHEDULER: `${API_BASE}/api/scheduler/status`,
+
+            // Analytics
+            ANALYTICS: `${API_BASE}/api/analytics/failures`,
+            RATE_LIMITS: `${API_BASE}/api/rate-limits`,
         },
-    },
-
-    // ═══════════════════════════════════════════════════════════════
-    // Rate Limiting
-    // ═══════════════════════════════════════════════════════════════
-
-    RATE_LIMITS: {
-        API_REQUESTS_PER_MINUTE: 60,
-        SEARCH_DEBOUNCE_MS: 300,
-    },
-
-    // ═══════════════════════════════════════════════════════════════
-    // Storage Settings
-    // ═══════════════════════════════════════════════════════════════
 
-    STORAGE: {
-        USE_LOCAL_STORAGE: true,
-        SAVE_PREFERENCES: true,
-        STORAGE_PREFIX: 'hts_dashboard_',
-    },
-};
-
-// ═══════════════════════════════════════════════════════════════════
-// Predefined Profiles
-// ═══════════════════════════════════════════════════════════════════
-
-window.DASHBOARD_PROFILES = {
-
-    // High Performance Profile
-    HIGH_PERFORMANCE: {
-        UPDATE_INTERVAL: 15000,           // Faster updates
-        CACHE_TTL: 30000,                 // Shorter cache
-        ENABLE_ANIMATIONS: false,         // No animations
-        MAX_COINS_DISPLAY: 50,
-    },
-
-    // Data Saver Profile
-    DATA_SAVER: {
-        UPDATE_INTERVAL: 60000,           // Less frequent updates
-        CACHE_TTL: 300000,                // Longer cache (5 minutes)
-        MAX_COINS_DISPLAY: 10,
-        MAX_NEWS_DISPLAY: 10,
-    },
-
-    // Presentation Profile
-    PRESENTATION: {
-        ENABLE_ANIMATIONS: true,
-        UPDATE_INTERVAL: 20000,
-        SHOW_API_REQUESTS: false,
-        ENABLE_CONSOLE_LOGS: false,
-    },
-
-    // Development Profile
-    DEVELOPMENT: {
-        DEBUG: {
-            ENABLE_CONSOLE_LOGS: true,
-            ENABLE_PERFORMANCE_MONITORING: true,
-            SHOW_API_REQUESTS: true,
-            SHOW_WS_MESSAGES: true,
+        // WebSocket Endpoints
+        WEBSOCKETS: {
+            MASTER: `${WS_BASE}/ws`,
+            LIVE: `${WS_BASE}/ws/live`,
+            DATA: `${WS_BASE}/ws/data`,
+            MARKET_DATA: `${WS_BASE}/ws/market_data`,
+            NEWS: `${WS_BASE}/ws/news`,
+            SENTIMENT: `${WS_BASE}/ws/sentiment`,
+            WHALE_TRACKING: `${WS_BASE}/ws/whale_tracking`,
+            HEALTH: `${WS_BASE}/ws/health`,
+            MONITORING: `${WS_BASE}/ws/monitoring`,
+            HUGGINGFACE: `${WS_BASE}/ws/huggingface`,
         },
-        UPDATE_INTERVAL: 10000,
-    },
-};
-
-// ═══════════════════════════════════════════════════════════════════
-// Helper Function to Change Profile
-// ═══════════════════════════════════════════════════════════════════
-
-window.applyDashboardProfile = function (profileName) {
-    if (window.DASHBOARD_PROFILES[profileName]) {
-        const profile = window.DASHBOARD_PROFILES[profileName];
-        Object.assign(window.DASHBOARD_CONFIG, profile);
-        console.log(`✅ Profile "${profileName}" applied`);
-
-        // Reload application with new settings
-        if (window.app) {
-            window.app.destroy();
-            window.app = new DashboardApp();
-            window.app.init();
-        }
-    } else {
-        console.error(`❌ Profile "${profileName}" not found`);
-    }
-};
-
-// ═══════════════════════════════════════════════════════════════════
-// Helper Function to Change Backend URL
-// ═══════════════════════════════════════════════════════════════════
-
-window.changeBackendURL = function (httpUrl, wsUrl) {
-    window.DASHBOARD_CONFIG.BACKEND_URL = httpUrl;
-    window.DASHBOARD_CONFIG.WS_URL = wsUrl || httpUrl.replace('https://', 'wss://').replace('http://', 'ws://') + '/ws';
-
-    console.log('✅ Backend URL changed:');
-    console.log('  HTTP:', window.DASHBOARD_CONFIG.BACKEND_URL);
-    console.log('  WS:', window.DASHBOARD_CONFIG.WS_URL);
-
-    // Reload application
-    if (window.app) {
-        window.app.destroy();
-        window.app = new DashboardApp();
-        window.app.init();
-    }
-};
-
-// ═══════════════════════════════════════════════════════════════════
-// Save Settings to LocalStorage
-// ═══════════════════════════════════════════════════════════════════
 
-window.saveConfig = function () {
-    if (window.DASHBOARD_CONFIG.STORAGE.USE_LOCAL_STORAGE) {
-        try {
-            const configString = JSON.stringify(window.DASHBOARD_CONFIG);
-            localStorage.setItem(
-                window.DASHBOARD_CONFIG.STORAGE.STORAGE_PREFIX + 'config',
-                configString
-            );
-            console.log('✅ Settings saved');
-        } catch (error) {
-            console.error('❌ Error saving settings:', error);
-        }
-    }
-};
+        // Utility Functions
+        buildUrl: (path) => {
+            return `${API_BASE}${path}`;
+        },
 
-// ═══════════════════════════════════════════════════════════════════
-// Load Settings from LocalStorage
-// ═══════════════════════════════════════════════════════════════════
+        buildWsUrl: (path) => {
+            return `${WS_BASE}${path}`;
+        },
 
-window.loadConfig = function () {
-    if (window.DASHBOARD_CONFIG.STORAGE.USE_LOCAL_STORAGE) {
-        try {
-            const configString = localStorage.getItem(
-                window.DASHBOARD_CONFIG.STORAGE.STORAGE_PREFIX + 'config'
-            );
-            if (configString) {
-                const savedConfig = JSON.parse(configString);
-                Object.assign(window.DASHBOARD_CONFIG, savedConfig);
-                console.log('✅ Settings loaded');
+        // Fetch helper with error handling
+        fetchJSON: async (url, options = {}) => {
+            try {
+                const response = await fetch(url, options);
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                }
+                return await response.json();
+            } catch (error) {
+                console.error(`Fetch error for ${url}:`, error);
+                throw error;
             }
-        } catch (error) {
-            console.error('❌ Error loading settings:', error);
-        }
-    }
-};
+        },
 
-// ══════════════════════════════════════════════════════��════════════
-// Auto-load Settings on Page Load
-// ═══════════════════════════════════════════════════════════════════
+        // POST helper
+        postJSON: async (url, body = {}) => {
+            return CONFIG.fetchJSON(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(body),
+            });
+        },
+    };
+})();
 
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-        window.loadConfig();
-    });
-} else {
-    window.loadConfig();
+// Export for use in modules (if needed)
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = CONFIG;
 }
 
-// ═══════════════════════════════════════════════════════════════════
-// Console Usage Guide
-// ═══════════════════════════════════════════════════════════════════
-
-console.log(`
-╔═══════════════════════════════════════════════════════════════╗
-║          HTS CRYPTO DASHBOARD - CONFIGURATION                 ║
-╚═══════════════════════════════════════════════════════════════╝
-
-📋 Available Commands:
-
-1. Change Profile:
-   applyDashboardProfile('HIGH_PERFORMANCE')
-   applyDashboardProfile('DATA_SAVER')
-   applyDashboardProfile('PRESENTATION')
-   applyDashboardProfile('DEVELOPMENT')
-
-2. Change Backend:
-   changeBackendURL('https://your-backend.com')
-
-3. Save/Load Settings:
-   saveConfig()
-   loadConfig()
-
-4. View Current Settings:
-   console.log(DASHBOARD_CONFIG)
-
-5. Manual Settings Change:
-   DASHBOARD_CONFIG.UPDATE_INTERVAL = 20000
-   saveConfig()
-
-═══════════════════════════════════════════════════════════════════
-`);
+// Log configuration on load (for debugging)
+console.log('🚀 Crypto API Monitor - Configuration loaded:', {
+    environment: CONFIG.IS_HUGGINGFACE_SPACES ? 'HuggingFace Spaces' :
+                 CONFIG.IS_LOCALHOST ? 'Localhost' : 'Custom Deployment',
+    apiBase: CONFIG.API_BASE,
+    wsBase: CONFIG.WS_BASE,
+});

hf_unified_server.py

@@ -432,45 +432,8 @@ async def get_market_overview():
             raise HTTPException(status_code=503, detail="Unable to fetch market data")
         
         # Calculate market stats
-        # Try multiple field names for market cap and volume
-        total_market_cap = 0
-        total_volume = 0
-        
-        for p in prices:
-            # Try different field names for market cap
-            market_cap = (
-                p.get("market_cap") or 
-                p.get("market_cap_usd") or
-                p.get("market_cap_rank") or  # Sometimes this is the value
-                None
-            )
-            # If market_cap is not found, try calculating from price and supply
-            if not market_cap:
-                price = p.get("price") or p.get("current_price") or 0
-                supply = p.get("circulating_supply") or p.get("total_supply") or 0
-                if price and supply:
-                    market_cap = float(price) * float(supply)
-            
-            if market_cap:
-                try:
-                    total_market_cap += float(market_cap)
-                except (TypeError, ValueError):
-                    pass
-            
-            # Try different field names for volume
-            volume = (
-                p.get("total_volume") or 
-                p.get("volume_24h") or 
-                p.get("volume_24h_usd") or
-                None
-            )
-            if volume:
-                try:
-                    total_volume += float(volume)
-                except (TypeError, ValueError):
-                    pass
-        
-        logger.info(f"Market overview: {len(prices)} coins, total_market_cap={total_market_cap:,.0f}, total_volume={total_volume:,.0f}")
+        total_market_cap = sum(p.get("market_cap", 0) or 0 for p in prices)
+        total_volume = sum(p.get("total_volume", 0) or 0 for p in prices)
         
         # Sort by 24h change
         gainers = sorted(
@@ -909,14 +872,6 @@ async def hf_sentiment(payload: Union[List[str], Dict[str, Any]] = Body(...)):
 # HTML Routes - Serve UI files
 # ============================================================================
 
-@app.get("/favicon.ico")
-async def favicon():
-    """Serve favicon"""
-    favicon_path = WORKSPACE_ROOT / "static" / "favicon.ico"
-    if favicon_path.exists():
-        return FileResponse(favicon_path)
-    return JSONResponse({"status": "no favicon"}, status_code=404)
-
 @app.get("/", response_class=HTMLResponse)
 async def root():
     """Serve main admin dashboard (admin.html)"""
@@ -989,187 +944,6 @@ async def serve_html(filename: str):
 # Startup Event
 # ============================================================================
 
-
-# ============================================================================
-# ADMIN DASHBOARD ENDPOINTS
-# ============================================================================
-
-from fastapi import WebSocket, WebSocketDisconnect
-import asyncio
-
-class ConnectionManager:
-    def __init__(self):
-        self.active_connections = []
-    async def connect(self, websocket: WebSocket):
-        await websocket.accept()
-        self.active_connections.append(websocket)
-    def disconnect(self, websocket: WebSocket):
-        if websocket in self.active_connections:
-            self.active_connections.remove(websocket)
-    async def broadcast(self, message: dict):
-        for conn in list(self.active_connections):
-            try:
-                await conn.send_json(message)
-            except:
-                self.disconnect(conn)
-
-ws_manager = ConnectionManager()
-
-@app.get("/api/health")
-async def api_health():
-    h = await health()
-    return {"status": "healthy" if h.get("status") == "ok" else "degraded", **h}
-
-@app.get("/api/coins/top")
-async def get_top_coins(limit: int = Query(default=10, ge=1, le=100)):
-    coins = await market_collector.get_top_coins(limit=limit)
-    result = [{"rank": c.get("rank", 0), "symbol": c.get("symbol", "").upper(), "name": c.get("name", ""), 
-               "price": c.get("price") or c.get("current_price", 0), 
-               "price_change_24h": c.get("change_24h") or c.get("price_change_percentage_24h", 0),
-               "volume_24h": c.get("volume_24h") or c.get("total_volume", 0), "market_cap": c.get("market_cap", 0)} for c in coins]
-    return {"success": True, "coins": result, "count": len(result)}
-
-@app.get("/api/coins/{symbol}")
-async def get_coin_detail(symbol: str):
-    coins = await market_collector.get_top_coins(limit=250)
-    coin = next((c for c in coins if c.get("symbol", "").upper() == symbol.upper()), None)
-    if not coin:
-        raise HTTPException(404, f"Coin {symbol} not found")
-    return {"success": True, "symbol": symbol.upper(), "name": coin.get("name", ""), 
-            "price": coin.get("price") or coin.get("current_price", 0),
-            "change_24h": coin.get("change_24h") or coin.get("price_change_percentage_24h", 0),
-            "market_cap": coin.get("market_cap", 0)}
-
-@app.get("/api/market/stats")
-async def get_market_stats():
-    """Get global market statistics (duplicate endpoint - keeping for compatibility)"""
-    try:
-        overview = await get_market_overview()
-        
-        # Calculate ETH dominance from prices if available
-        eth_dominance = 0
-        if overview.get("total_market_cap", 0) > 0:
-            try:
-                eth_prices = await fetch_coingecko_prices(symbols=["ETH"], limit=1)
-                if eth_prices and len(eth_prices) > 0:
-                    eth_market_cap = eth_prices[0].get("market_cap", 0) or 0
-                    eth_dominance = (eth_market_cap / overview.get("total_market_cap", 1)) * 100
-            except:
-                pass
-        
-        return {
-            "success": True,
-            "stats": {
-                "total_market_cap": overview.get("total_market_cap", 0) or 0,
-                "total_volume_24h": overview.get("total_volume_24h", 0) or 0,
-                "btc_dominance": overview.get("btc_dominance", 0) or 0,
-                "eth_dominance": eth_dominance,
-                "active_cryptocurrencies": 10000,
-                "markets": 500,
-                "market_cap_change_24h": 0.0,
-                "timestamp": datetime.now().isoformat()
-            }
-        }
-    except Exception as e:
-        logger.error(f"Error in /api/market/stats (duplicate): {e}")
-        return {
-            "success": True,
-            "stats": {
-                "total_market_cap": 0,
-                "total_volume_24h": 0,
-                "btc_dominance": 0,
-                "eth_dominance": 0,
-                "active_cryptocurrencies": 0,
-                "markets": 0,
-                "market_cap_change_24h": 0.0,
-                "timestamp": datetime.now().isoformat()
-            }
-        }
-
-@app.get("/api/news/latest")
-async def get_latest_news(limit: int = Query(default=40, ge=1, le=100)):
-    from ai_models import analyze_news_item
-    news = await news_collector.get_latest_news(limit=limit)
-    enriched = []
-    for item in news[:limit]:
-        try:
-            e = analyze_news_item(item)
-            enriched.append({"title": e.get("title", ""), "source": e.get("source", ""),
-                           "published_at": e.get("published_at") or e.get("date", ""),
-                           "symbols": e.get("symbols", []), "sentiment": e.get("sentiment", "neutral"),
-                           "sentiment_confidence": e.get("sentiment_confidence", 0.5)})
-        except:
-            enriched.append({"title": item.get("title", ""), "source": item.get("source", ""),
-                           "published_at": item.get("date", ""), "symbols": item.get("symbols", []),
-                           "sentiment": "neutral", "sentiment_confidence": 0.5})
-    return {"success": True, "news": enriched, "count": len(enriched)}
-
-@app.post("/api/news/summarize")
-async def summarize_news(item: Dict[str, Any] = Body(...)):
-    from ai_models import analyze_news_item
-    e = analyze_news_item(item)
-    return {"success": True, "summary": e.get("title", ""), "sentiment": e.get("sentiment", "neutral")}
-
-# Duplicate endpoints removed - using the improved versions below in CHARTS ENDPOINTS section
-
-@app.post("/api/sentiment/analyze")
-async def analyze_sentiment(payload: Dict[str, Any] = Body(...)):
-    from ai_models import ensemble_crypto_sentiment
-    result = ensemble_crypto_sentiment(payload.get("text", ""))
-    return {"success": True, "sentiment": result["label"], "confidence": result["confidence"], "details": result}
-
-@app.post("/api/query")
-async def process_query(payload: Dict[str, Any] = Body(...)):
-    query = payload.get("query", "").lower()
-    if "price" in query or "btc" in query:
-        coins = await market_collector.get_top_coins(limit=10)
-        btc = next((c for c in coins if c.get("symbol", "").upper() == "BTC"), None)
-        if btc:
-            return {"success": True, "type": "price", "message": f"Bitcoin is ${btc.get('price', 0):,.2f}", "data": btc}
-    return {"success": True, "type": "general", "message": "Query processed"}
-
-@app.get("/api/datasets/list")
-async def list_datasets():
-    from backend.services.hf_registry import REGISTRY
-    datasets = REGISTRY.list(kind="datasets")
-    formatted = [{"name": d.get("id"), "category": d.get("category", "other"), "tags": d.get("tags", [])} for d in datasets]
-    return {"success": True, "datasets": formatted, "count": len(formatted)}
-
-@app.get("/api/datasets/sample")
-async def get_dataset_sample(name: str = Query(...), limit: int = Query(default=20)):
-    return {"success": False, "name": name, "sample": [], "message": "Auth required"}
-
-@app.get("/api/models/list")
-async def list_models():
-    from ai_models import get_model_info
-    info = get_model_info()
-    models = []
-    for cat, mlist in info.get("model_catalog", {}).items():
-        for mid in mlist:
-            models.append({"name": mid, "task": "sentiment" if "sentiment" in cat else "analysis", "category": cat})
-    return {"success": True, "models": models, "count": len(models)}
-
-@app.post("/api/models/test")
-async def test_model(payload: Dict[str, Any] = Body(...)):
-    from ai_models import ensemble_crypto_sentiment
-    result = ensemble_crypto_sentiment(payload.get("text", ""))
-    return {"success": True, "model": payload.get("model", ""), "result": result}
-
-@app.websocket("/ws")
-async def websocket_endpoint(websocket: WebSocket):
-    await ws_manager.connect(websocket)
-    try:
-        while True:
-            top_coins = await market_collector.get_top_coins(limit=5)
-            news = await news_collector.get_latest_news(limit=3)
-            from ai_models import ensemble_crypto_sentiment
-            sentiment = ensemble_crypto_sentiment(" ".join([n.get("title", "") for n in news])) if news else {"label": "neutral", "confidence": 0.5}
-            await websocket.send_json({"type": "update", "payload": {"market_data": top_coins, "news": news, "sentiment": sentiment, "timestamp": datetime.now().isoformat()}})
-            await asyncio.sleep(10)
-    except WebSocketDisconnect:
-        ws_manager.disconnect(websocket)
-
-
 @app.on_event("startup")
 async def startup_event():
     """Initialize on startup"""
@@ -1337,26 +1111,14 @@ async def get_coin_detail(symbol: str):
 async def get_market_stats():
     """Get global market statistics"""
     try:
-        # Use existing endpoint - get_market_overview returns total_market_cap and total_volume_24h
+        # Use existing endpoint
         overview = await get_market_overview()
         
-        # Calculate ETH dominance from prices if available
-        eth_dominance = 0
-        if overview.get("total_market_cap", 0) > 0:
-            # Try to get ETH market cap from top coins
-            try:
-                eth_prices = await fetch_coingecko_prices(symbols=["ETH"], limit=1)
-                if eth_prices and len(eth_prices) > 0:
-                    eth_market_cap = eth_prices[0].get("market_cap", 0) or 0
-                    eth_dominance = (eth_market_cap / overview.get("total_market_cap", 1)) * 100
-            except:
-                pass
-        
         stats = {
-            "total_market_cap": overview.get("total_market_cap", 0) or 0,
-            "total_volume_24h": overview.get("total_volume_24h", 0) or 0,
-            "btc_dominance": overview.get("btc_dominance", 0) or 0,
-            "eth_dominance": eth_dominance,
+            "total_market_cap": overview.get("global_market_cap", 0),
+            "total_volume_24h": overview.get("global_volume", 0),
+            "btc_dominance": overview.get("btc_dominance", 0),
+            "eth_dominance": overview.get("eth_dominance", 0),
             "active_cryptocurrencies": 10000,  # Approximate
             "markets": 500,  # Approximate
             "market_cap_change_24h": 0.0,
@@ -1441,112 +1203,30 @@ async def summarize_news(item: Dict[str, Any] = Body(...)):
 async def get_price_chart(symbol: str, timeframe: str = Query(default="7d")):
     """Get price chart data"""
     try:
-        # Clean and validate symbol
-        symbol = symbol.strip().upper()
-        if not symbol:
-            return JSONResponse(
-                status_code=400,
-                content={
-                    "success": False,
-                    "symbol": "",
-                    "timeframe": timeframe,
-                    "data": [],
-                    "count": 0,
-                    "error": "Symbol cannot be empty"
-                }
-            )
+        # Map timeframe to hours
+        timeframe_map = {"1d": 24, "7d": 168, "30d": 720, "90d": 2160, "1y": 8760}
+        hours = timeframe_map.get(timeframe, 168)
         
-        logger.info(f"Fetching price history for {symbol} with timeframe {timeframe}")
-        
-        # market_collector.get_price_history expects timeframe as string, not hours
-        price_history = await market_collector.get_price_history(symbol, timeframe=timeframe)
-        
-        if not price_history or len(price_history) == 0:
-            logger.warning(f"No price history returned for {symbol}")
-            return {
-                "success": True,
-                "symbol": symbol,
-                "timeframe": timeframe,
-                "data": [],
-                "count": 0,
-                "message": "No data available"
-            }
+        price_history = await market_collector.get_price_history(symbol, hours=hours)
         
         chart_data = []
         for point in price_history:
-            # Handle different timestamp formats
-            timestamp = point.get("timestamp") or point.get("time") or point.get("date")
-            price = point.get("price") or point.get("close") or point.get("value") or 0
-            
-            # Convert timestamp to ISO format if needed
-            if timestamp:
-                try:
-                    # If it's already a string, use it
-                    if isinstance(timestamp, str):
-                        # Try to parse and format
-                        try:
-                            # Try ISO format first
-                            dt = datetime.fromisoformat(timestamp.replace('Z', '+00:00'))
-                            timestamp = dt.isoformat()
-                        except:
-                            try:
-                                # Try other common formats
-                                from dateutil import parser
-                                dt = parser.parse(timestamp)
-                                timestamp = dt.isoformat()
-                            except:
-                                pass
-                    elif isinstance(timestamp, (int, float)):
-                        # Unix timestamp
-                        dt = datetime.fromtimestamp(timestamp)
-                        timestamp = dt.isoformat()
-                except Exception as e:
-                    logger.warning(f"Error parsing timestamp {timestamp}: {e}")
-            
             chart_data.append({
-                "timestamp": timestamp or "",
-                "time": timestamp or "",
-                "date": timestamp or "",
-                "price": float(price) if price else 0,
-                "close": float(price) if price else 0,
-                "value": float(price) if price else 0
+                "timestamp": point.get("timestamp", ""),
+                "price": point.get("price", 0),
+                "date": point.get("timestamp", "")
             })
         
-        logger.info(f"Returning {len(chart_data)} data points for {symbol}")
-        
         return {
             "success": True,
-            "symbol": symbol,
+            "symbol": symbol.upper(),
             "timeframe": timeframe,
             "data": chart_data,
             "count": len(chart_data)
         }
-    except CollectorError as e:
-        logger.error(f"Collector error in /api/charts/price/{symbol}: {e}", exc_info=True)
-        return JSONResponse(
-            status_code=200,
-            content={
-                "success": False,
-                "symbol": symbol.upper() if symbol else "",
-                "timeframe": timeframe,
-                "data": [],
-                "count": 0,
-                "error": str(e)
-            }
-        )
     except Exception as e:
-        logger.error(f"Error in /api/charts/price/{symbol}: {e}", exc_info=True)
-        return JSONResponse(
-            status_code=200,
-            content={
-                "success": False,
-                "symbol": symbol.upper() if symbol else "",
-                "timeframe": timeframe,
-                "data": [],
-                "count": 0,
-                "error": str(e)
-            }
-        )
+        logger.error(f"Error in /api/charts/price/{symbol}: {e}")
+        raise HTTPException(status_code=503, detail=str(e))
 
 
 @app.post("/api/charts/analyze")
@@ -1557,38 +1237,12 @@ async def analyze_chart(payload: Dict[str, Any] = Body(...)):
         timeframe = payload.get("timeframe", "7d")
         indicators = payload.get("indicators", [])
         
-        if not symbol:
-            return JSONResponse(
-                status_code=400,
-                content={"success": False, "error": "Symbol is required"}
-            )
-        
-        symbol = symbol.strip().upper()
-        logger.info(f"Analyzing chart for {symbol} with timeframe {timeframe}")
-        
-        # Get price data - use timeframe string, not hours
-        price_history = await market_collector.get_price_history(symbol, timeframe=timeframe)
-        
-        if not price_history or len(price_history) == 0:
-            return {
-                "success": False,
-                "symbol": symbol,
-                "timeframe": timeframe,
-                "error": "No price data available for analysis"
-            }
+        # Get price data
+        price_history = await market_collector.get_price_history(symbol, hours=168)
         
         # Analyze with AI
         from ai_models import analyze_chart_points
-        try:
-            analysis = analyze_chart_points(price_history, indicators)
-        except Exception as ai_error:
-            logger.error(f"AI analysis error: {ai_error}", exc_info=True)
-            # Return a basic analysis if AI fails
-            analysis = {
-                "direction": "neutral",
-                "summary": "Analysis unavailable",
-                "signals": []
-            }
+        analysis = analyze_chart_points(price_history, indicators)
         
         return {
             "success": True,
@@ -1596,18 +1250,9 @@ async def analyze_chart(payload: Dict[str, Any] = Body(...)):
             "timeframe": timeframe,
             "analysis": analysis
         }
-    except CollectorError as e:
-        logger.error(f"Collector error in /api/charts/analyze: {e}", exc_info=True)
-        return JSONResponse(
-            status_code=200,
-            content={"success": False, "error": str(e)}
-        )
     except Exception as e:
-        logger.error(f"Error in /api/charts/analyze: {e}", exc_info=True)
-        return JSONResponse(
-            status_code=200,
-            content={"success": False, "error": str(e)}
-        )
+        logger.error(f"Error in /api/charts/analyze: {e}")
+        return {"success": False, "error": str(e)}
 
 
 # ===== SENTIMENT ENDPOINTS =====

index.html

@@ -1,765 +1,1216 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Advanced Cryptocurrency Dashboard with AI-Powered Analytics">
-    <title>HTS Crypto Dashboard - Professional Trading & Analysis Platform</title>
-    
-    <!-- Fonts - Enhanced for High Resolution -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
-    
-    <!-- Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    
-    <!-- Static CSS Files -->
-    <link rel="stylesheet" href="/static/css/base.css">
-    <link rel="stylesheet" href="/static/css/design-tokens.css">
-    <link rel="stylesheet" href="/static/css/design-system.css">
-    <link rel="stylesheet" href="/static/css/components.css">
-    <link rel="stylesheet" href="/static/css/dashboard.css">
-    <link rel="stylesheet" href="/static/css/navigation.css">
-    <link rel="stylesheet" href="/static/css/connection-status.css">
-    <link rel="stylesheet" href="/static/css/toast.css">
-    <link rel="stylesheet" href="/static/css/mobile-responsive.css">
-    <link rel="stylesheet" href="/static/css/accessibility.css">
-    <link rel="stylesheet" href="/static/css/enterprise-components.css">
-    
-    <!-- Main Styles -->
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    
-    <!-- ============================================= -->
-    <!-- CONNECTION STATUS BAR -->
-    <!-- ============================================= -->
-    <div class="connection-status-bar" id="connection-status-bar">
-        <div class="status-left">
-            <span class="status-dot" id="ws-status-dot"></span>
-            <span class="status-text" id="ws-status-text">Connecting...</span>
-        </div>
-        
-        <div class="status-center">
-            <span class="system-title">HTS Crypto Monitor</span>
-        </div>
-        
-        <div class="status-right">
-            <div class="online-users-widget">
-                <i class="fas fa-users"></i>
-                <span id="active-users-count">0</span>
-                <span class="label-small">Online Users</span>
-            </div>
-        </div>
-    </div>
-
-    <!-- ============================================= -->
-    <!-- MAIN HEADER -->
-    <!-- ============================================= -->
-    <header class="main-header">
-        <div class="header-container">
-            <div class="header-left">
-                <div class="logo-section">
-                    <i class="fas fa-chart-line logo-icon"></i>
-                    <h1 class="app-title">HTS Dashboard</h1>
-                </div>
-            </div>
-            
-            <div class="header-center">
-                <div class="search-box">
-                    <i class="fas fa-search"></i>
-                    <input type="text" placeholder="Search coins, news, analysis..." id="global-search">
-                </div>
-            </div>
-            
-            <div class="header-right">
-                <button class="icon-btn" id="theme-toggle" title="Toggle Theme">
-                    <i class="fas fa-moon"></i>
-                </button>
-                
-                <button class="icon-btn" id="notifications-btn" title="Notifications">
-                    <i class="fas fa-bell"></i>
-                    <span class="notification-badge" id="notification-count">0</span>
-                </button>
-                
-                <button class="icon-btn" id="settings-btn" title="Settings">
-                    <i class="fas fa-cog"></i>
-                </button>
-            </div>
-        </div>
-    </header>
-
-    <!-- ============================================= -->
-    <!-- DESKTOP NAVIGATION -->
-    <!-- ============================================= -->
-    <nav class="desktop-nav">
-        <ul class="nav-tabs">
-            <li class="nav-tab">
-                <button class="nav-tab-btn active" data-view="overview">
-                    <span class="nav-tab-icon"><i class="fas fa-home"></i></span>
-                    <span class="nav-tab-label">Overview</span>
-                </button>
-            </li>
-            <li class="nav-tab">
-                <button class="nav-tab-btn" data-view="market">
-                    <span class="nav-tab-icon"><i class="fas fa-chart-bar"></i></span>
-                    <span class="nav-tab-label">Market</span>
-                </button>
-            </li>
-            <li class="nav-tab">
-                <button class="nav-tab-btn" data-view="charts">
-                    <span class="nav-tab-icon"><i class="fas fa-chart-area"></i></span>
-                    <span class="nav-tab-label">Charts</span>
-                </button>
-            </li>
-            <li class="nav-tab">
-                <button class="nav-tab-btn" data-view="news">
-                    <span class="nav-tab-icon"><i class="fas fa-newspaper"></i></span>
-                    <span class="nav-tab-label">News</span>
-                </button>
-            </li>
-            <li class="nav-tab">
-                <button class="nav-tab-btn" data-view="ai">
-                    <span class="nav-tab-icon"><i class="fas fa-robot"></i></span>
-                    <span class="nav-tab-label">AI Analysis</span>
-                </button>
-            </li>
-            <li class="nav-tab">
-                <button class="nav-tab-btn" data-view="providers">
-                    <span class="nav-tab-icon"><i class="fas fa-plug"></i></span>
-                    <span class="nav-tab-label">Providers</span>
-                </button>
-            </li>
-            <li class="nav-tab">
-                <button class="nav-tab-btn" data-view="api-explorer">
-                    <span class="nav-tab-icon"><i class="fas fa-code"></i></span>
-                    <span class="nav-tab-label">API Explorer</span>
-                </button>
-            </li>
-        </ul>
-    </nav>
-
-    <!-- ============================================= -->
-    <!-- MOBILE NAVIGATION -->
-    <!-- ============================================= -->
-    <nav class="mobile-nav">
-        <ul class="mobile-nav-tabs">
-            <li class="mobile-nav-tab">
-                <button class="mobile-nav-tab-btn active" data-view="overview">
-                    <span class="mobile-nav-tab-icon"><i class="fas fa-home"></i></span>
-                    <span class="mobile-nav-tab-label">Home</span>
-                </button>
-            </li>
-            <li class="mobile-nav-tab">
-                <button class="mobile-nav-tab-btn" data-view="market">
-                    <span class="mobile-nav-tab-icon"><i class="fas fa-chart-bar"></i></span>
-                    <span class="mobile-nav-tab-label">Market</span>
-                </button>
-            </li>
-            <li class="mobile-nav-tab">
-                <button class="mobile-nav-tab-btn" data-view="charts">
-                    <span class="mobile-nav-tab-icon"><i class="fas fa-chart-area"></i></span>
-                    <span class="mobile-nav-tab-label">Charts</span>
-                </button>
-            </li>
-            <li class="mobile-nav-tab">
-                <button class="mobile-nav-tab-btn" data-view="news">
-                    <span class="mobile-nav-tab-icon"><i class="fas fa-newspaper"></i></span>
-                    <span class="mobile-nav-tab-label">News</span>
-                </button>
-            </li>
-            <li class="mobile-nav-tab">
-                <button class="mobile-nav-tab-btn" data-view="ai">
-                    <span class="mobile-nav-tab-icon"><i class="fas fa-robot"></i></span>
-                    <span class="mobile-nav-tab-label">AI</span>
-                </button>
-            </li>
-        </ul>
-    </nav>
-
-    <!-- ============================================= -->
-    <!-- MAIN CONTENT -->
-    <!-- ============================================= -->
-    <main class="dashboard-main">
-        
-        <!-- OVERVIEW SECTION -->
-        <section class="view-section active" id="view-overview">
-            <!-- Market Overview - New Layout: 3 Main Metrics + 12 Coin Cards -->
-            <div class="market-overview-layout">
-                <!-- Left Column: 3 Main Market Metrics -->
-                <div class="main-metrics-column">
-                    <div class="main-metric-card">
-                        <div class="main-metric-header">
-                            <div class="main-metric-icon">
-                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                                    <line x1="12" y1="1" x2="12" y2="23" stroke="white" stroke-width="2.5"></line>
-                                    <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" stroke="white" stroke-width="2.5" fill="rgba(255,255,255,0.1)"></path>
-                                </svg>
-                            </div>
-                            <span class="main-metric-label">Total Market Cap</span>
-                        </div>
-                        <div class="main-metric-value" id="total-market-cap">$2.5T</div>
-                        <div class="main-metric-change positive" id="market-cap-change">
-                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-                                <polyline points="18 15 12 9 6 15"></polyline>
-                            </svg>
-                            <span>+2.4%</span>
-                        </div>
-                    </div>
-                    
-                    <div class="main-metric-card">
-                        <div class="main-metric-header">
-                            <div class="main-metric-icon">
-                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                                    <circle cx="12" cy="12" r="10" stroke="white" stroke-width="2.5" fill="rgba(255,255,255,0.1)"></circle>
-                                    <path d="M12 6v6l4 2" stroke="white" stroke-width="2.5" stroke-linecap="round"></path>
-                                </svg>
-                            </div>
-                            <span class="main-metric-label">24h Volume</span>
-                        </div>
-                        <div class="main-metric-value" id="volume-24h">$125B</div>
-                        <div class="main-metric-change negative" id="volume-change">
-                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-                                <polyline points="6 9 12 15 18 9"></polyline>
-                            </svg>
-                            <span>-1.2%</span>
-                        </div>
-                    </div>
-                    
-                    <div class="main-metric-card">
-                        <div class="main-metric-header">
-                            <div class="main-metric-icon">
-                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                                    <line x1="12" y1="2" x2="12" y2="22" stroke="white" stroke-width="2.5"></line>
-                                    <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" stroke="white" stroke-width="2.5" fill="rgba(255,255,255,0.1)"></path>
-                                    <polyline points="9 12 12 9 15 12" stroke="white" stroke-width="2.5" fill="none"></polyline>
-                                </svg>
-                            </div>
-                            <span class="main-metric-label">Market Trend</span>
-                        </div>
-                        <div class="main-metric-value" id="market-trend">Bullish</div>
-                        <div class="main-metric-change positive" id="trend-change">
-                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-                                <polyline points="18 15 12 9 6 15"></polyline>
-                            </svg>
-                            <span>+5.6%</span>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Right Column: 12 Coin Cards Grid -->
-                <div class="coins-grid-compact" id="coins-grid-compact">
-                    <!-- Coin cards will be inserted here dynamically -->
-                </div>
-            </div>
-            
-            <!-- Additional Stats (Hidden for now, can be shown if needed) -->
-            <div class="stats-grid-compact" style="display: none;">
-                <div class="stat-card-compact">
-                    <div class="stat-header-compact">
-                        <span class="stat-icon-compact"><i class="fas fa-dollar-sign"></i></span>
-                        <span class="stat-label-compact">Market Cap</span>
-                    </div>
-                    <div class="stat-value-compact" id="total-market-cap">$2.5T</div>
-                    <div class="stat-change-compact positive" id="market-cap-change">+2.4%</div>
-                </div>
-                
-                <div class="stat-card-compact">
-                    <div class="stat-header-compact">
-                        <span class="stat-icon-compact"><i class="fab fa-bitcoin"></i></span>
-                        <span class="stat-label-compact">BTC Dominance</span>
-                    </div>
-                    <div class="stat-value-compact" id="btc-dominance">52.3%</div>
-                    <div class="stat-change-compact positive" id="btc-dominance-change">+0.8%</div>
-                </div>
-                
-                <div class="stat-card-compact">
-                    <div class="stat-header-compact">
-                        <span class="stat-icon-compact"><i class="fab fa-ethereum"></i></span>
-                        <span class="stat-label-compact">ETH Dominance</span>
-                    </div>
-                    <div class="stat-value-compact" id="eth-dominance">18.5%</div>
-                    <div class="stat-change-compact negative" id="eth-dominance-change">-0.3%</div>
-                </div>
-                
-                <div class="stat-card-compact">
-                    <div class="stat-header-compact">
-                        <span class="stat-icon-compact"><i class="fas fa-chart-line"></i></span>
-                        <span class="stat-label-compact">24h Volume</span>
-                    </div>
-                    <div class="stat-value-compact" id="volume-24h">$125B</div>
-                    <div class="stat-change-compact negative" id="volume-change">-1.2%</div>
-                </div>
-                
-                <div class="stat-card-compact">
-                    <div class="stat-header-compact">
-                        <span class="stat-icon-compact"><i class="fas fa-fire"></i></span>
-                        <span class="stat-label-compact">Market Trend</span>
-                    </div>
-                    <div class="stat-value-compact" id="market-trend">Bullish</div>
-                    <div class="stat-change-compact positive" id="trend-change">+5.6%</div>
-                </div>
-                
-                <div class="stat-card-compact">
-                    <div class="stat-header-compact">
-                        <span class="stat-icon-compact"><i class="fas fa-coins"></i></span>
-                        <span class="stat-label-compact">Active Coins</span>
-                    </div>
-                    <div class="stat-value-compact" id="active-cryptocurrencies">10,523</div>
-                    <div class="stat-change-compact neutral" id="active-change">+127</div>
-                </div>
-                
-                <div class="stat-card-compact">
-                    <div class="stat-header-compact">
-                        <span class="stat-icon-compact"><i class="fas fa-exchange-alt"></i></span>
-                        <span class="stat-label-compact">Markets</span>
-                    </div>
-                    <div class="stat-value-compact" id="markets-count">847</div>
-                    <div class="stat-change-compact neutral" id="markets-change">+12</div>
-                </div>
-                
-                <div class="stat-card-compact">
-                    <div class="stat-header-compact">
-                        <span class="stat-icon-compact"><i class="fas fa-brain"></i></span>
-                        <span class="stat-label-compact">Fear & Greed</span>
-                    </div>
-                    <div class="stat-value-compact" id="fear-greed-index">65</div>
-                    <div class="stat-change-compact positive" id="fear-greed-change">Greed</div>
-                </div>
-                
-                <div class="stat-card-compact">
-                    <div class="stat-header-compact">
-                        <span class="stat-icon-compact"><i class="fas fa-arrow-up"></i></span>
-                        <span class="stat-label-compact">24h Change</span>
-                    </div>
-                    <div class="stat-value-compact" id="market-cap-change-24h">+2.4%</div>
-                    <div class="stat-change-compact positive" id="market-change-24h">$58.2B</div>
-                </div>
-                
-                <div class="stat-card-compact">
-                    <div class="stat-header-compact">
-                        <span class="stat-icon-compact"><i class="fas fa-chart-pie"></i></span>
-                        <span class="stat-label-compact">Top 10 Share</span>
-                    </div>
-                    <div class="stat-value-compact" id="top10-share">78.5%</div>
-                    <div class="stat-change-compact neutral" id="top10-change">-0.2%</div>
-                </div>
-                
-                <div class="stat-card-compact">
-                    <div class="stat-header-compact">
-                        <span class="stat-icon-compact"><i class="fas fa-trophy"></i></span>
-                        <span class="stat-label-compact">BTC Price</span>
-                    </div>
-                    <div class="stat-value-compact" id="btc-price">$43,250</div>
-                    <div class="stat-change-compact positive" id="btc-price-change">+1.8%</div>
-                </div>
-                
-                <div class="stat-card-compact">
-                    <div class="stat-header-compact">
-                        <span class="stat-icon-compact"><i class="fas fa-gem"></i></span>
-                        <span class="stat-label-compact">ETH Price</span>
-                    </div>
-                    <div class="stat-value-compact" id="eth-price">$2,650</div>
-                    <div class="stat-change-compact positive" id="eth-price-change">+2.1%</div>
-                </div>
-            </div>
-
-            <!-- Sentiment Analysis -->
-            <div class="sentiment-section">
-                <div class="section-header">
-                    <h2>Market Sentiment</h2>
-                    <span class="sentiment-badge">
-                        <i class="fas fa-brain"></i>
-                        AI Powered
-                    </span>
-                </div>
-                
-                <div class="sentiment-cards">
-                    <div class="sentiment-item bullish">
-                        <div class="sentiment-item-header">
-                            <div class="sentiment-icon">
-                                <i class="fas fa-arrow-up"></i>
-                            </div>
-                            <span class="sentiment-label">Bullish</span>
-                            <span class="sentiment-percent" id="bullish-percent">45%</span>
-                        </div>
-                        <div class="sentiment-progress">
-                            <div class="sentiment-progress-bar bullish" style="width: 45%"></div>
-                        </div>
-                    </div>
-                    
-                    <div class="sentiment-item neutral">
-                        <div class="sentiment-item-header">
-                            <div class="sentiment-icon">
-                                <i class="fas fa-minus"></i>
-                            </div>
-                            <span class="sentiment-label">Neutral</span>
-                            <span class="sentiment-percent" id="neutral-percent">30%</span>
-                        </div>
-                        <div class="sentiment-progress">
-                            <div class="sentiment-progress-bar neutral" style="width: 30%"></div>
-                        </div>
-                    </div>
-                    
-                    <div class="sentiment-item bearish">
-                        <div class="sentiment-item-header">
-                            <div class="sentiment-icon">
-                                <i class="fas fa-arrow-down"></i>
-                            </div>
-                            <span class="sentiment-label">Bearish</span>
-                            <span class="sentiment-percent" id="bearish-percent">25%</span>
-                        </div>
-                        <div class="sentiment-progress">
-                            <div class="sentiment-progress-bar bearish" style="width: 25%"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Top Coins Table -->
-            <div class="table-section">
-                <div class="section-header">
-                    <h2>Top Cryptocurrencies</h2>
-                    <button class="btn-secondary" id="refresh-coins">
-                        <i class="fas fa-sync"></i>
-                        Refresh
-                    </button>
-                </div>
-                
-                <div class="table-container">
-                    <table class="data-table">
-                        <thead>
-                            <tr>
-                                <th>Rank</th>
-                                <th>Name</th>
-                                <th>Price</th>
-                                <th>24h Change</th>
-                                <th>Volume</th>
-                                <th>Market Cap</th>
-                                <th>Actions</th>
-                            </tr>
-                        </thead>
-                        <tbody id="coins-table-body">
-                            <tr>
-                                <td colspan="7" class="loading-cell">
-                                    <div class="loader"></div>
-                                    Loading...
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </section>
-
-        <!-- MARKET SECTION -->
-        <section class="view-section" id="view-market">
-            <div class="section-header">
-                <h2>Cryptocurrency Market</h2>
-                <div class="filter-group">
-                    <select class="filter-select" id="market-filter">
-                        <option value="all">All</option>
-                        <option value="gainers">Top Gainers</option>
-                        <option value="losers">Top Losers</option>
-                        <option value="trending">Trending</option>
-                    </select>
-                    <select class="filter-select" id="market-sort">
-                        <option value="market_cap">Market Cap</option>
-                        <option value="volume">Volume</option>
-                        <option value="price">Price</option>
-                        <option value="change">24h Change</option>
-                    </select>
-                </div>
-            </div>
-            
-            <div class="market-grid" id="market-grid">
-                <!-- Market cards will be inserted here -->
-            </div>
-        </section>
-
-        <!-- CHARTS SECTION -->
-        <section class="view-section" id="view-charts">
-            <div class="section-header">
-                <h2>Advanced Charts</h2>
-                <div class="chart-controls">
-                    <select class="filter-select" id="chart-symbol">
-                        <option value="BTCUSDT">BTC/USDT</option>
-                        <option value="ETHUSDT">ETH/USDT</option>
-                        <option value="BNBUSDT">BNB/USDT</option>
-                        <option value="ADAUSDT">ADA/USDT</option>
-                        <option value="SOLUSDT">SOL/USDT</option>
-                    </select>
-                    <select class="filter-select" id="chart-interval">
-                        <option value="1m">1 Minute</option>
-                        <option value="5m">5 Minutes</option>
-                        <option value="15m">15 Minutes</option>
-                        <option value="1h" selected>1 Hour</option>
-                        <option value="4h">4 Hours</option>
-                        <option value="1d">1 Day</option>
-                    </select>
-                </div>
-            </div>
-            
-            <div class="chart-container">
-                <div id="tradingview-chart" class="tradingview-widget"></div>
-            </div>
-            
-            <div class="indicators-panel">
-                <h3>Active Indicators</h3>
-                <div class="indicators-grid" id="indicators-grid">
-                    <!-- Indicators will be inserted here -->
-                </div>
-            </div>
-        </section>
-
-        <!-- NEWS SECTION -->
-        <section class="view-section" id="view-news">
-            <div class="section-header">
-                <h2>Latest News & Analysis</h2>
-                <div class="filter-group">
-                    <input type="text" class="filter-input" id="news-search" placeholder="Search news...">
-                    <select class="filter-select" id="news-filter">
-                        <option value="all">All News</option>
-                        <option value="bitcoin">Bitcoin</option>
-                        <option value="ethereum">Ethereum</option>
-                        <option value="defi">DeFi</option>
-                        <option value="nft">NFT</option>
-                        <option value="regulation">Regulation</option>
-                    </select>
-                </div>
-            </div>
-            
-            <div class="news-grid" id="news-grid">
-                <!-- News cards will be inserted here -->
-            </div>
-        </section>
-
-        <!-- AI SECTION -->
-        <section class="view-section" id="view-ai">
-            <div class="ai-header">
-                <h2>AI-Powered Analysis</h2>
-                <p>Advanced analytics powered by Hugging Face models</p>
-            </div>
-            
-            <div class="ai-tools-grid">
-                <div class="ai-tool-card">
-                    <div class="ai-tool-icon">
-                        <i class="fas fa-comment-dots"></i>
-                    </div>
-                    <h3>Sentiment Analysis</h3>
-                    <p>Analyze market sentiment from news and social media</p>
-                    <button class="btn-primary" id="sentiment-analysis-btn">
-                        <i class="fas fa-play"></i>
-                        Run Analysis
-                    </button>
-                </div>
-                
-                <div class="ai-tool-card">
-                    <div class="ai-tool-icon">
-                        <i class="fas fa-file-alt"></i>
-                    </div>
-                    <h3>News Summarization</h3>
-                    <p>Automatically summarize long news articles with AI</p>
-                    <button class="btn-primary" id="news-summary-btn">
-                        <i class="fas fa-play"></i>
-                        Summarize
-                    </button>
-                </div>
-                
-                <div class="ai-tool-card">
-                    <div class="ai-tool-icon">
-                        <i class="fas fa-chart-line"></i>
-                    </div>
-                    <h3>Price Prediction</h3>
-                    <p>Predict price trends using ML models</p>
-                    <button class="btn-primary" id="price-prediction-btn">
-                        <i class="fas fa-play"></i>
-                        Predict
-                    </button>
-                </div>
-                
-                <div class="ai-tool-card">
-                    <div class="ai-tool-icon">
-                        <i class="fas fa-brain"></i>
-                    </div>
-                    <h3>Pattern Detection</h3>
-                    <p>Detect candlestick patterns and technical analysis</p>
-                    <button class="btn-primary" id="pattern-detection-btn">
-                        <i class="fas fa-play"></i>
-                        Detect Patterns
-                    </button>
-                </div>
-            </div>
-            
-            <div class="ai-results" id="ai-results" style="display: none;">
-                <div class="section-header">
-                    <h3>Analysis Results</h3>
-                    <button class="btn-ghost" id="clear-results">
-                        <i class="fas fa-times"></i>
-                    </button>
-                </div>
-                <div class="ai-results-content" id="ai-results-content">
-                    <!-- AI results will be shown here -->
-                </div>
-            </div>
-        </section>
-
-        <!-- PROVIDERS SECTION -->
-        <section class="view-section" id="view-providers">
-            <div class="section-header">
-                <h2>Data Providers</h2>
-                <button class="btn-secondary" id="refresh-providers">
-                    <i class="fas fa-sync"></i>
-                    Refresh
-                </button>
-            </div>
-            
-            <div class="providers-grid" id="providers-grid">
-                <!-- Provider cards will be inserted here -->
-            </div>
-        </section>
-
-        <!-- API EXPLORER SECTION -->
-        <section class="view-section" id="view-api-explorer">
-            <div class="section-header">
-                <h2>API Explorer</h2>
-                <button class="btn-secondary" id="api-docs-link">
-                    <i class="fas fa-book"></i>
-                    View Docs
-                </button>
-            </div>
-            
-            <div class="api-explorer-container">
-                <div class="api-endpoints-list" id="api-endpoints-list">
-                    <!-- API endpoints will be listed here -->
-                </div>
-                <div class="api-response-panel" id="api-response-panel">
-                    <h3>Response</h3>
-                    <pre id="api-response-content">Select an endpoint to test...</pre>
-                </div>
-            </div>
-        </section>
-
-    </main>
-
-    <!-- ============================================= -->
-    <!-- FLOATING STATS CARD -->
-    <!-- ============================================= -->
-    <div class="floating-stats-card" id="floating-stats">
-        <div class="stats-card-header">
-            <h3>System Stats</h3>
-            <button class="minimize-btn" id="minimize-stats">
-                <i class="fas fa-minus"></i>
-            </button>
-        </div>
-        <div class="stats-card-body">
-            <div class="stats-mini-grid">
-                <div class="stat-mini">
-                    <div class="stat-mini-label">API Status</div>
-                    <div class="stat-mini-value" id="api-status">
-                        <span class="status-dot active"></span>
-                        Online
-                    </div>
-                </div>
-                <div class="stat-mini">
-                    <div class="stat-mini-label">Ping</div>
-                    <div class="stat-mini-value" id="ping-value">--</div>
-                </div>
-                <div class="stat-mini">
-                    <div class="stat-mini-label">Last Update</div>
-                    <div class="stat-mini-value" id="last-update">--</div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- ============================================= -->
-    <!-- NOTIFICATIONS PANEL -->
-    <!-- ============================================= -->
-    <div class="notifications-panel" id="notifications-panel">
-        <div class="notifications-header">
-            <h3>Notifications</h3>
-            <button class="btn-ghost" id="close-notifications">
-                <i class="fas fa-times"></i>
-            </button>
-        </div>
-        <div class="notifications-body" id="notifications-body">
-            <!-- Notifications will be inserted here -->
-        </div>
-    </div>
-
-    <!-- ============================================= -->
-    <!-- SETTINGS MODAL -->
-    <!-- ============================================= -->
-    <div class="settings-modal" id="settings-modal">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h3>Settings</h3>
-                <button class="btn-ghost" id="close-settings">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <div class="modal-body">
-                <div class="settings-section">
-                    <h4>Display</h4>
-                    <label>
-                        <input type="checkbox" id="enable-animations" checked>
-                        Enable Animations
-                    </label>
-                    <label>
-                        <input type="checkbox" id="enable-sounds">
-                        Enable Sounds
-                    </label>
-                </div>
-                <div class="settings-section">
-                    <h4>Updates</h4>
-                    <label>
-                        Update Interval (seconds)
-                        <input type="number" id="update-interval" value="30" min="10" max="300">
-                    </label>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- ============================================= -->
-    <!-- LOADING OVERLAY -->
-    <!-- ============================================= -->
-    <div class="loading-overlay" id="loading-overlay">
-        <div class="loading-spinner"></div>
-        <div class="loading-text">Loading...</div>
-    </div>
-
-    <!-- ============================================= -->
-    <!-- SCRIPTS -->
-    <!-- ============================================= -->
-    <!-- Configuration -->
-    <script src="config.js"></script>
-    
-    <!-- Static JavaScript Files -->
-    <script src="/static/js/api-client.js"></script>
-    <script src="/static/js/websocket-client.js"></script>
-    <script src="/static/js/theme-manager.js"></script>
-    <script src="/static/js/tabs.js"></script>
-    <script src="/static/js/toast.js"></script>
-    <script src="/static/js/accessibility.js"></script>
-    <script src="/static/js/uiUtils.js"></script>
-    <script src="/static/js/errorHelper.js"></script>
-    
-    <!-- View Controllers -->
-    <script src="/static/js/overviewView.js"></script>
-    <script src="/static/js/marketView.js"></script>
-    <script src="/static/js/newsView.js"></script>
-    <script src="/static/js/aiAdvisorView.js"></script>
-    <script src="/static/js/providersView.js"></script>
-    <script src="/static/js/apiExplorerView.js"></script>
-    <script src="/static/js/chartLabView.js"></script>
-    
-    <!-- Main Application -->
-    <script src="/static/js/dashboard.js"></script>
-    
-    <!-- Main App Initialization -->
-    <script src="app.js" type="module"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crypto API Monitor</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+    <style>
+        * { box-sizing: border-box; }
+        :root {
+            --bg: #f5f6fb;
+            --card: #ffffff;
+            --muted: #6b7280;
+            --text: #1f2937;
+            --primary: #2563eb;
+            --success: #16a34a;
+            --danger: #dc2626;
+            --warning: #d97706;
+            --border: #e5e7eb;
+        }
+        body {
+            margin: 0;
+            font-family: 'Inter', sans-serif;
+            background: var(--bg);
+            color: var(--text);
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .header {
+            background: var(--card);
+            padding: 18px 24px;
+            border-radius: 10px;
+            box-shadow: 0 1px 3px rgba(15,23,42,0.08);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 16px;
+        }
+        .logo h1 { margin: 0; font-size: 20px; color: var(--primary); }
+        .header-actions { display: flex; gap: 12px; align-items: center; }
+        .status-pill {
+            padding: 6px 12px;
+            border-radius: 999px;
+            font-size: 12px;
+            font-weight: 600;
+            background: #fee2e2;
+            color: var(--danger);
+        }
+        .btn {
+            padding: 10px 18px;
+            border-radius: 8px;
+            border: none;
+            font-weight: 600;
+            font-size: 13px;
+            cursor: pointer;
+            background: var(--primary);
+            color: #fff;
+            transition: all 0.2s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            box-shadow: 0 2px 4px rgba(37,99,235,0.2);
+        }
+        .btn:hover {
+            background: #1d4ed8;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 8px rgba(37,99,235,0.3);
+        }
+        .btn:active {
+            transform: translateY(0);
+            box-shadow: 0 1px 2px rgba(37,99,235,0.2);
+        }
+        .btn.secondary {
+            background: var(--card);
+            border: 1px solid var(--border);
+            color: var(--text);
+            box-shadow: 0 1px 2px rgba(15,23,42,0.1);
+        }
+        .btn.secondary:hover {
+            background: #f9fafb;
+            border-color: var(--primary);
+            color: var(--primary);
+            box-shadow: 0 2px 4px rgba(37,99,235,0.15);
+        }
+        .kpi-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+            gap: 10px;
+            margin: 16px 0;
+        }
+        .kpi-card {
+            background: var(--card);
+            padding: 14px;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(15,23,42,0.08);
+            border: 1px solid var(--border);
+            transition: all 0.2s ease;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .kpi-card:hover {
+            box-shadow: 0 4px 12px rgba(37,99,235,0.15);
+            transform: translateY(-2px);
+            border-color: var(--primary);
+        }
+        .kpi-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 8px;
+        }
+        .kpi-icon {
+            width: 32px;
+            height: 32px;
+            padding: 6px;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+        .kpi-icon svg {
+            width: 20px;
+            height: 20px;
+            stroke-width: 2;
+        }
+        .kpi-icon.blue { background: #dbeafe; color: #2563eb; }
+        .kpi-icon.green { background: #dcfce7; color: #16a34a; }
+        .kpi-icon.orange { background: #fed7aa; color: #ea580c; }
+        .kpi-icon.purple { background: #e9d5ff; color: #9333ea; }
+        .kpi-label {
+            font-size: 11px;
+            color: var(--muted);
+            letter-spacing: 0.3px;
+            text-transform: uppercase;
+            font-weight: 600;
+            flex: 1;
+        }
+        .kpi-value {
+            font-size: 24px;
+            font-weight: 700;
+            color: var(--text);
+            line-height: 1.2;
+        }
+        .kpi-trend {
+            font-size: 11px;
+            color: var(--muted);
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+        .tabs {
+            background: var(--card);
+            border-radius: 10px;
+            padding: 8px;
+            display: flex;
+            gap: 6px;
+            overflow-x: auto;
+            box-shadow: 0 1px 3px rgba(15,23,42,0.08);
+        }
+        .tab {
+            border: none;
+            background: transparent;
+            padding: 8px 16px;
+            border-radius: 6px;
+            font-weight: 600;
+            color: var(--muted);
+            cursor: pointer;
+        }
+        .tab.active { background: var(--primary); color: #fff; }
+        .tab-content { margin-top: 16px; display: none; }
+        .tab-content.active { display: block; }
+        .card {
+            background: var(--card);
+            border-radius: 12px;
+            padding: 20px;
+            box-shadow: 0 1px 3px rgba(15,23,42,0.08);
+            border: 1px solid var(--border);
+            margin-bottom: 16px;
+            transition: all 0.2s ease;
+        }
+        .card:hover {
+            box-shadow: 0 4px 12px rgba(15,23,42,0.12);
+            border-color: rgba(37,99,235,0.2);
+        }
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+            padding-bottom: 12px;
+            border-bottom: 2px solid var(--border);
+        }
+        .card-title {
+            font-size: 16px;
+            font-weight: 700;
+            color: var(--text);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .grid { display: grid; gap: 16px; }
+        .grid-2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
+        .table-wrapper {
+            overflow-x: auto;
+            border-radius: 8px;
+            border: 1px solid var(--border);
+        }
+        table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            font-size: 13px;
+        }
+        thead {
+            background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+        thead th {
+            padding: 14px 16px;
+            text-align: left;
+            font-weight: 700;
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--muted);
+            border-bottom: 2px solid var(--border);
+            white-space: nowrap;
+        }
+        thead th:first-child { border-top-left-radius: 8px; }
+        thead th:last-child { border-top-right-radius: 8px; }
+        tbody tr {
+            transition: all 0.15s ease;
+            border-bottom: 1px solid #f3f4f6;
+        }
+        tbody tr:hover {
+            background: #f9fafb;
+            transform: scale(1.001);
+            box-shadow: 0 2px 8px rgba(37,99,235,0.08);
+        }
+        tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
+        tbody tr:last-child td:last-child { border-bottom-right-radius: 8px; }
+        tbody td {
+            padding: 14px 16px;
+            color: var(--text);
+            vertical-align: middle;
+        }
+        tbody td strong {
+            font-weight: 600;
+            color: var(--text);
+        }
+        tbody td:first-child {
+            font-weight: 600;
+        }
+        .badge {
+            padding: 5px 12px;
+            border-radius: 6px;
+            font-size: 11px;
+            font-weight: 700;
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+            text-transform: uppercase;
+            letter-spacing: 0.3px;
+            border: 1px solid transparent;
+            transition: all 0.2s ease;
+        }
+        .badge.success {
+            background: #dcfce7;
+            color: #15803d;
+            border-color: #86efac;
+        }
+        .badge.warn {
+            background: #fef3c7;
+            color: #d97706;
+            border-color: #fde047;
+        }
+        .badge.danger {
+            background: #fee2e2;
+            color: #b91c1c;
+            border-color: #fca5a5;
+        }
+        .badge.info {
+            background: #dbeafe;
+            color: #1e40af;
+            border-color: #93c5fd;
+        }
+        .list {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .list-item {
+            padding: 12px;
+            border-radius: 8px;
+            border: 1px solid var(--border);
+            background: var(--card);
+            transition: all 0.15s ease;
+        }
+        .list-item:hover {
+            background: #f9fafb;
+            border-color: var(--primary);
+            transform: translateX(2px);
+            box-shadow: 0 2px 8px rgba(37,99,235,0.1);
+        }
+        .list-item:last-child {
+            margin-bottom: 0;
+        }
+        .resource-search { display: flex; gap: 12px; }
+        .resource-search input {
+            flex: 1;
+            padding: 10px 12px;
+            border-radius: 6px;
+            border: 1px solid var(--border);
+            font-size: 14px;
+        }
+        .resource-columns {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+            gap: 12px;
+            margin-top: 16px;
+        }
+        .resource-item {
+            padding: 10px;
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            margin-bottom: 8px;
+            font-size: 13px;
+        }
+        .form-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+            gap: 10px;
+        }
+        label { font-size: 12px; font-weight: 600; color: var(--muted); }
+        input, textarea, select {
+            width: 100%;
+            padding: 10px 14px;
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            font-size: 14px;
+            font-family: inherit;
+            background: var(--card);
+            color: var(--text);
+            transition: all 0.2s ease;
+        }
+        input:focus, textarea:focus, select:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
+        }
+        input:hover, textarea:hover, select:hover {
+            border-color: rgba(37,99,235,0.3);
+        }
+        textarea {
+            min-height: 120px;
+            resize: vertical;
+            font-family: 'Monaco', 'Courier New', monospace;
+            font-size: 13px;
+        }
+        .toast-container {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .toast {
+            background: #111827;
+            color: white;
+            padding: 12px 16px;
+            border-radius: 6px;
+            min-width: 240px;
+            box-shadow: 0 8px 20px rgba(15,23,42,0.25);
+        }
+        @media (max-width: 720px) {
+            .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
+            .grid-2 { grid-template-columns: 1fr; }
+            .resource-search { flex-direction: column; }
+        }
+    </style>
+</head>
+<body>
+<div class="toast-container" id="toastContainer"></div>
+<div class="container">
+    <div class="header">
+        <div class="logo">
+            <h1>🚀 Crypto API Monitor</h1>
+            <div style="font-size:12px; color:var(--muted);">Real API diagnostics + market intelligence</div>
+        </div>
+        <div class="header-actions">
+            <div class="status-pill" id="wsStatus">Connecting...</div>
+            <button class="btn secondary" onclick="refreshAll()">Refresh</button>
+            <button class="btn" onclick="loadErrorSummary()">Diagnostics</button>
+        </div>
+    </div>
+
+    <div class="kpi-grid">
+        <div class="kpi-card">
+            <div class="kpi-header">
+                <div class="kpi-label">Total APIs</div>
+                <div class="kpi-icon blue">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                    </svg>
+                </div>
+            </div>
+            <div class="kpi-value" id="kpiTotalAPIs">--</div>
+            <div class="kpi-trend" id="kpiTotalTrend">Loading…</div>
+        </div>
+        <div class="kpi-card">
+            <div class="kpi-header">
+                <div class="kpi-label">Online</div>
+                <div class="kpi-icon green">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    </svg>
+                </div>
+            </div>
+            <div class="kpi-value" id="kpiOnline">--</div>
+            <div class="kpi-trend" id="kpiOnlineTrend">Loading…</div>
+        </div>
+        <div class="kpi-card">
+            <div class="kpi-header">
+                <div class="kpi-label">Avg Response</div>
+                <div class="kpi-icon orange">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+                    </svg>
+                </div>
+            </div>
+            <div class="kpi-value" id="kpiAvgResponse">--</div>
+            <div class="kpi-trend" id="kpiResponseTrend">Loading…</div>
+        </div>
+        <div class="kpi-card">
+            <div class="kpi-header">
+                <div class="kpi-label">Last Update</div>
+                <div class="kpi-icon purple">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    </svg>
+                </div>
+            </div>
+            <div class="kpi-value" id="kpiLastUpdate" style="font-size:16px;">--</div>
+            <div class="kpi-trend">Auto-refresh</div>
+        </div>
+    </div>
+
+    <div class="tabs" id="tabBar">
+        <button class="tab active" data-tab="dashboard" onclick="switchTab(event, 'dashboard')">Dashboard</button>
+        <button class="tab" data-tab="providers" onclick="switchTab(event, 'providers')">Providers</button>
+        <button class="tab" data-tab="market" onclick="switchTab(event, 'market')">Market</button>
+        <button class="tab" data-tab="sentiment" onclick="switchTab(event, 'sentiment')">Sentiment</button>
+        <button class="tab" data-tab="news" onclick="switchTab(event, 'news')">News</button>
+        <button class="tab" data-tab="resources" onclick="switchTab(event, 'resources')">Resources & Tools</button>
+    </div>
+
+    <div class="tab-content active" id="tab-dashboard">
+        <div class="grid grid-2">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Provider Overview</h3>
+                    <button class="btn secondary" onclick="loadProviders()">Reload</button>
+                </div>
+                <div class="table-wrapper" style="overflow:auto;">
+                    <table>
+                        <thead>
+                        <tr><th>Provider</th><th>Status</th><th>Response</th><th>Uptime</th></tr>
+                        </thead>
+                        <tbody id="providersTableBody">
+                        <tr><td colspan="4" style="text-align:center; padding:40px; color:var(--muted);">Loading providers…</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Error Monitor</h3>
+                    <button class="btn secondary" onclick="loadErrorSummary()">Refresh</button>
+                </div>
+                <div id="errorSummaryCard" style="font-size:13px; color:var(--muted);">Gathering diagnostics…</div>
+                <div id="diagnosticsList" class="list" style="margin-top:12px;"></div>
+            </div>
+        </div>
+        <div class="grid grid-2">
+            <div class="card">
+                <div class="card-header"><h3 class="card-title">Health Trend</h3></div>
+                <div style="height:260px;"><canvas id="healthChart"></canvas></div>
+            </div>
+            <div class="card">
+                <div class="card-header"><h3 class="card-title">Status Distribution</h3></div>
+                <div style="height:260px;"><canvas id="statusChart"></canvas></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="tab-content" id="tab-providers">
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">Providers Detail</h3>
+                <button class="btn secondary" onclick="loadProviders()">Reload</button>
+            </div>
+            <div id="providersDetail"></div>
+        </div>
+    </div>
+
+    <div class="tab-content" id="tab-market">
+        <div class="grid grid-2">
+            <div class="card">
+                <div class="card-header"><h3 class="card-title">Global Stats</h3></div>
+                <div id="marketGlobalStats" class="list"></div>
+            </div>
+            <div class="card">
+                <div class="card-header"><h3 class="card-title">Top Movers</h3></div>
+                <div style="height:260px;"><canvas id="marketChart"></canvas></div>
+            </div>
+        </div>
+        <div class="grid grid-2">
+            <div class="card">
+                <div class="card-header"><h3 class="card-title">Top Assets</h3></div>
+                <div class="table-wrapper" style="overflow:auto; max-height:320px;">
+                    <table>
+                        <thead><tr><th>Rank</th><th>Name</th><th>Price</th><th>24h</th><th>Market Cap</th></tr></thead>
+                        <tbody id="marketTableBody"></tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-header"><h3 class="card-title">Trending Now</h3></div>
+                <div id="trendingList" class="list"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="tab-content" id="tab-sentiment">
+        <div class="grid grid-2">
+            <div class="card">
+                <div class="card-header"><h3 class="card-title">Fear & Greed Index</h3></div>
+                <div id="sentimentCard" style="font-size:14px; color:var(--muted);">Loading sentiment…</div>
+            </div>
+            <div class="card">
+                <div class="card-header"><h3 class="card-title">DeFi TVL</h3></div>
+                <div class="table-wrapper" style="overflow:auto; max-height:280px;">
+                    <table>
+                        <thead><tr><th>Protocol</th><th>TVL</th><th>24h</th><th>Chain</th></tr></thead>
+                        <tbody id="defiTableBody"></tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="tab-content" id="tab-news">
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">Latest Headlines</h3>
+                <button class="btn secondary" onclick="loadNews()">Reload</button>
+            </div>
+            <div id="newsList" class="list"></div>
+        </div>
+    </div>
+
+    <div class="tab-content" id="tab-resources">
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">Resource Search</h3>
+                <span style="font-size:12px;color:var(--muted);">Live search across providers + HuggingFace registry</span>
+            </div>
+            <div class="resource-search">
+                <input type="text" id="resourceSearch" placeholder="Search provider, model or dataset..." />
+                <select id="resourceFilter" onchange="loadResourceSearch()">
+                    <option value="all">All sources</option>
+                    <option value="providers">Providers</option>
+                    <option value="models">Models</option>
+                    <option value="datasets">Datasets</option>
+                </select>
+            </div>
+            <div class="resource-columns">
+                <div>
+                    <h4>Providers <span id="resourceCountProviders" style="color:var(--muted);"></span></h4>
+                    <div id="resourceResultsProviders"></div>
+                </div>
+                <div>
+                    <h4>Models <span id="resourceCountModels" style="color:var(--muted);"></span></h4>
+                    <div id="resourceResultsModels"></div>
+                </div>
+                <div>
+                    <h4>Datasets <span id="resourceCountDatasets" style="color:var(--muted);"></span></h4>
+                    <div id="resourceResultsDatasets"></div>
+                </div>
+            </div>
+        </div>
+        <div class="grid grid-2">
+            <div class="card">
+                <div class="card-header"><h3 class="card-title">Export & Backup</h3></div>
+                <div style="display:flex; gap:10px; flex-wrap:wrap;">
+                    <button class="btn" onclick="handleExport('json')">Export JSON Snapshot</button>
+                    <button class="btn" onclick="handleExport('csv')">Export CSV</button>
+                    <button class="btn secondary" onclick="handleBackup()">Create Backup</button>
+                </div>
+                <div id="exportHistory" class="list" style="margin-top:12px;"></div>
+            </div>
+            <div class="card">
+                <div class="card-header"><h3 class="card-title">Import Provider</h3></div>
+                <form id="importForm" onsubmit="handleImportSingle(event)">
+                    <div class="form-grid">
+                        <div><label>Name</label><input name="name" required></div>
+                        <div><label>Category</label><input name="category" required></div>
+                        <div><label>Endpoint URL</label><input name="endpoint_url" required></div>
+                        <div><label>Health Endpoint</label><input name="health_check_endpoint"></div>
+                        <div><label>Rate Limit</label><input name="rate_limit"></div>
+                        <div><label>Timeout (ms)</label><input name="timeout_ms" type="number" value="10000"></div>
+                    </div>
+                    <label style="margin-top:12px; display:block;">Notes<textarea name="notes"></textarea></label>
+                    <div style="margin-top:12px; display:flex; gap:10px; align-items:center;">
+                        <label style="display:flex; gap:6px; align-items:center; font-size:13px;">
+                            <input type="checkbox" name="requires_key"> Requires API Key
+                        </label>
+                        <input name="api_key" placeholder="API Key (optional)" style="flex:1;">
+                    </div>
+                    <button class="btn" style="margin-top:12px;" type="submit">Import Provider</button>
+                </form>
+                <hr style="margin:20px 0; border:none; border-top:1px solid var(--border);">
+                <label style="display:block; font-size:13px; color:var(--muted); margin-bottom:6px;">Bulk JSON Import</label>
+                <textarea id="bulkImportTextarea" placeholder='[{"name":"Sample API","category":"market","endpoint_url":"https://..."}]'></textarea>
+                <button class="btn secondary" style="margin-top:10px;" onclick="handleImportBulk()">Run Bulk Import</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+const config = {
+    apiBaseUrl: '',
+    wsUrl: (() => {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        return `${protocol}//${window.location.host}/ws`;
+    })(),
+    autoRefreshInterval: 30000
+};
+
+const state = {
+    ws: null,
+    wsConnected: false,
+    providers: [],
+    market: { cryptocurrencies: [], global: {} },
+    trending: [],
+    sentiment: null,
+    defi: [],
+    news: [],
+    errorSummary: null,
+    diagnostics: null,
+    resources: { providers: [], models: [], datasets: [] },
+    exports: [],
+    charts: { health: null, status: null, market: null },
+    currentTab: 'dashboard',
+    resourceSearchTimeout: null,
+    lastUpdate: null
+};
+
+function showToast(message, type = 'info') {
+    const container = document.getElementById('toastContainer');
+    const toast = document.createElement('div');
+    toast.className = 'toast';
+    toast.style.background = type === 'error' ? '#b91c1c' : (type === 'success' ? '#065f46' : '#111827');
+    toast.textContent = message;
+    container.appendChild(toast);
+    setTimeout(() => toast.remove(), 3000);
+}
+
+async function apiCall(endpoint, options = {}) {
+    const response = await fetch(config.apiBaseUrl + endpoint, options);
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    return await response.json();
+}
+
+function initializeWebSocket() {
+    try {
+        state.ws = new WebSocket(config.wsUrl);
+        state.ws.onopen = () => {
+            state.wsConnected = true;
+            const pill = document.getElementById('wsStatus');
+            pill.textContent = 'Connected';
+            pill.style.background = '#dcfce7';
+            pill.style.color = '#15803d';
+        };
+        state.ws.onclose = () => {
+            state.wsConnected = false;
+            const pill = document.getElementById('wsStatus');
+            pill.textContent = 'Disconnected';
+            pill.style.background = '#fee2e2';
+            pill.style.color = '#b91c1c';
+        };
+        state.ws.onmessage = (event) => {
+            const data = JSON.parse(event.data);
+            if (data.type === 'status_update' && data.data?.providers) {
+                updateKPIs(data.data.providers);
+            }
+            if (data.type === 'market_update' && Array.isArray(data.data)) {
+                state.market.cryptocurrencies = data.data;
+                renderMarketTable();
+                updateMarketChart();
+            }
+            if (data.type === 'sentiment_update') {
+                state.sentiment = data.data;
+                renderSentiment();
+            }
+        };
+    } catch (err) {
+        console.error('WebSocket error', err);
+    }
+}
+
+async function loadInitialData() {
+    try {
+        await Promise.all([
+            loadProviders(),
+            loadMarket(),
+            loadTrending(),
+            loadSentimentData(),
+            loadDefi(),
+            loadErrorSummary(),
+            loadNews(),
+            loadResourceSearch()
+        ]);
+        initializeCharts();
+        state.lastUpdate = new Date();
+        updateLastUpdateDisplay();
+        showToast('Dashboard ready', 'success');
+    } catch (err) {
+        console.error(err);
+        showToast('Failed to load initial data', 'error');
+    }
+}
+
+async function loadProviders() {
+    try {
+        const data = await apiCall('/api/providers');
+        state.providers = Array.isArray(data) ? data : [];
+        renderProvidersTable();
+        renderProvidersDetail();
+        updateStatusChart();
+        updateKPIs(state.providers);
+    } catch (err) {
+        console.error(err);
+        document.getElementById('providersTableBody').innerHTML = `<tr><td colspan="4" style="padding:40px; text-align:center;">${err.message}</td></tr>`;
+    }
+}
+
+function renderProvidersTable() {
+    const tbody = document.getElementById('providersTableBody');
+    if (!state.providers.length) {
+        tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding:40px; color:var(--muted);">No providers available</td></tr>';
+        return;
+    }
+    tbody.innerHTML = state.providers.slice(0, 8).map(p => `
+        <tr>
+            <td>
+                <div style="font-weight:600;">${p.name || 'Unknown'}</div>
+                <div style="font-size:11px;color:var(--muted);">${p.category || 'general'}</div>
+            </td>
+            <td>${renderStatusBadge(p.status)}</td>
+            <td>${p.response_time_ms ? `${p.response_time_ms}ms` : '--'}</td>
+            <td>${p.uptime ? `${Math.round(p.uptime)}%` : '--'}</td>
+        </tr>
+    `).join('');
+}
+
+function renderProvidersDetail() {
+    const container = document.getElementById('providersDetail');
+    if (!state.providers.length) {
+        container.innerHTML = '<div style="padding:40px; text-align:center; color:var(--muted);">No providers data available</div>';
+        return;
+    }
+    container.innerHTML = `
+        <div class="table-wrapper">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Status</th>
+                        <th>Response Time</th>
+                        <th>Success Rate</th>
+                        <th>Rate Limit</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    ${state.providers.map(p => `
+                        <tr>
+                            <td>
+                                <strong>${p.name || 'Unknown'}</strong>
+                                <div style="font-size:11px;color:var(--muted);margin-top:2px;">${p.category || 'general'}</div>
+                            </td>
+                            <td>${renderStatusBadge(p.status)}</td>
+                            <td><strong>${p.avg_response_time_ms ? `${p.avg_response_time_ms}ms` : (p.response_time_ms ? `${p.response_time_ms}ms` : '--')}</strong></td>
+                            <td><strong>${p.uptime ? `${Math.round(p.uptime)}%` : '--'}</strong></td>
+                            <td style="font-size:12px;color:var(--muted);">${p.rate_limit || '—'}</td>
+                        </tr>`).join('')}
+                </tbody>
+            </table>
+        </div>`;
+}
+
+function renderStatusBadge(status = 'unknown') {
+    const normalized = (status || '').toLowerCase();
+    let cls = 'badge warn';
+    if (['online', 'healthy'].includes(normalized)) cls = 'badge success';
+    if (['offline', 'error'].includes(normalized)) cls = 'badge danger';
+    return `<span class="${cls}">${status || 'unknown'}</span>`;
+}
+
+function updateKPIs(data) {
+    const providers = Array.isArray(data) ? data : (data?.providers || []);
+    const total = providers.length;
+    const online = providers.filter(p => ['online', 'healthy'].includes((p.status || '').toLowerCase())).length;
+    const responseTimes = providers.map(p => p.response_time_ms || p.avg_response_time_ms).filter(Boolean);
+    const avgResponse = responseTimes.length ? Math.round(responseTimes.reduce((a, b) => a + b, 0) / responseTimes.length) : 0;
+
+    document.getElementById('kpiTotalAPIs').textContent = total;
+    document.getElementById('kpiTotalTrend').textContent = `${total} tracked providers`;
+    document.getElementById('kpiOnline').textContent = online;
+    document.getElementById('kpiOnlineTrend').textContent = total ? `${Math.round((online / total) * 100)}% uptime` : 'No data';
+    document.getElementById('kpiAvgResponse').textContent = avgResponse ? `${avgResponse}ms` : '--';
+    document.getElementById('kpiResponseTrend').textContent = avgResponse < 500 ? 'Optimal' : avgResponse < 1000 ? 'Acceptable' : 'Slow';
+    updateHealthChart(avgResponse);
+}
+
+function updateLastUpdateDisplay() {
+    if (!state.lastUpdate) return;
+    document.getElementById('kpiLastUpdate').textContent = state.lastUpdate.toLocaleTimeString();
+}
+
+function initializeCharts() {
+    const healthCtx = document.getElementById('healthChart').getContext('2d');
+    const statusCtx = document.getElementById('statusChart').getContext('2d');
+    const marketCtx = document.getElementById('marketChart').getContext('2d');
+
+    if (state.charts.health) state.charts.health.destroy();
+    if (state.charts.status) state.charts.status.destroy();
+    if (state.charts.market) state.charts.market.destroy();
+
+    state.charts.health = new Chart(healthCtx, {
+        type: 'line',
+        data: { labels: [], datasets: [{ label: 'Avg Response (ms)', data: [], borderColor: '#2563eb', fill: false }] },
+        options: { responsive: true, maintainAspectRatio: false }
+    });
+
+    state.charts.status = new Chart(statusCtx, {
+        type: 'doughnut',
+        data: { labels: ['Online', 'Degraded', 'Offline'], datasets: [{ data: [0, 0, 0], backgroundColor: ['#16a34a', '#fcd34d', '#f87171'] }] },
+        options: { responsive: true, maintainAspectRatio: false }
+    });
+
+    state.charts.market = new Chart(marketCtx, {
+        type: 'bar',
+        data: { labels: [], datasets: [{ label: 'Market Cap (B USD)', data: [], backgroundColor: '#93c5fd' }] },
+        options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
+    });
+}
+
+function updateHealthChart(value) {
+    if (!state.charts.health || !value) return;
+    const chart = state.charts.health;
+    chart.data.labels.push(new Date().toLocaleTimeString());
+    chart.data.datasets[0].data.push(value);
+    if (chart.data.labels.length > 12) {
+        chart.data.labels.shift();
+        chart.data.datasets[0].data.shift();
+    }
+    chart.update();
+}
+
+function updateStatusChart() {
+    if (!state.charts.status) return;
+    const online = state.providers.filter(p => (p.status || '').toLowerCase() === 'online').length;
+    const degraded = state.providers.filter(p => (p.status || '').toLowerCase() === 'degraded').length;
+    const offline = state.providers.length - online - degraded;
+    state.charts.status.data.datasets[0].data = [online, degraded, offline];
+    state.charts.status.update();
+}
+
+async function loadMarket() {
+    const data = await apiCall('/api/market');
+    state.market = data;
+    renderMarketCards();
+    renderMarketTable();
+    updateMarketChart();
+}
+
+function renderMarketCards() {
+    const stats = state.market.global || {};
+    const container = document.getElementById('marketGlobalStats');
+    container.innerHTML = `
+        <div><strong>Total Market Cap:</strong> $${formatNumber(stats.total_market_cap)}</div>
+        <div><strong>Total Volume:</strong> $${formatNumber(stats.total_volume)}</div>
+        <div><strong>BTC Dominance:</strong> ${stats.btc_dominance ? stats.btc_dominance.toFixed(2) + '%' : '--'}</div>
+        <div><strong>ETH Dominance:</strong> ${stats.eth_dominance ? stats.eth_dominance.toFixed(2) + '%' : '--'}</div>
+        <div><strong>Active Cryptos:</strong> ${stats.active_cryptocurrencies || '--'}</div>
+        <div><strong>Markets:</strong> ${stats.markets || '--'}</div>
+    `;
+}
+
+function renderMarketTable() {
+    const tbody = document.getElementById('marketTableBody');
+    const coins = state.market.cryptocurrencies || [];
+    if (!coins.length) {
+        tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; padding:40px; color:var(--muted);">Market data unavailable</td></tr>';
+        return;
+    }
+    tbody.innerHTML = coins.slice(0, 12).map(coin => `
+        <tr>
+            <td>${coin.rank || coin.market_cap_rank || '-'}</td>
+            <td>${coin.name} <span style="color:var(--muted);">${coin.symbol}</span></td>
+            <td>$${formatNumber(coin.price)}</td>
+            <td style="color:${coin.change_24h >= 0 ? '#16a34a' : '#dc2626'};">${coin.change_24h ? coin.change_24h.toFixed(2) : '0'}%</td>
+            <td>$${formatNumber(coin.market_cap)}</td>
+        </tr>
+    `).join('');
+}
+
+function updateMarketChart() {
+    if (!state.charts.market) return;
+    const coins = state.market.cryptocurrencies || [];
+    const top = coins.slice(0, 5);
+    state.charts.market.data.labels = top.map(c => c.name);
+    state.charts.market.data.datasets[0].data = top.map(c => c.market_cap ? (c.market_cap / 1e9).toFixed(2) : 0);
+    state.charts.market.update();
+}
+
+async function loadTrending() {
+    const data = await apiCall('/api/trending');
+    state.trending = data.trending || [];
+    const list = document.getElementById('trendingList');
+    if (!state.trending.length) {
+        list.innerHTML = '<div class="list-item" style="color:var(--muted);">No trending assets</div>';
+        return;
+    }
+    list.innerHTML = state.trending.map(item => `
+        <div class="list-item">
+            <div style="font-weight:600;">${item.name} (${item.symbol})</div>
+            <div style="font-size:12px;color:var(--muted);">Rank: ${item.rank || '—'}</div>
+        </div>`).join('');
+}
+
+async function loadSentimentData() {
+    const data = await apiCall('/api/sentiment');
+    state.sentiment = data.fear_greed_index;
+    renderSentiment();
+}
+
+function renderSentiment() {
+    const container = document.getElementById('sentimentCard');
+    if (!state.sentiment) {
+        container.textContent = 'No sentiment data';
+        return;
+    }
+    const timestamp = Number(state.sentiment.timestamp);
+    container.innerHTML = `
+        <div style="font-size:32px; font-weight:700;">${state.sentiment.value}</div>
+        <div style="font-size:14px; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px;">${state.sentiment.classification}</div>
+        <div style="font-size:12px; color:var(--muted);">Updated: ${timestamp ? new Date(timestamp * 1000).toLocaleString() : '--'}</div>
+    `;
+}
+
+async function loadDefi() {
+    const data = await apiCall('/api/defi');
+    state.defi = data.protocols || [];
+    const tbody = document.getElementById('defiTableBody');
+    if (!state.defi.length) {
+        tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding:40px; color:var(--muted);">No DeFi data</td></tr>';
+        return;
+    }
+    tbody.innerHTML = state.defi.slice(0, 10).map(proto => `
+        <tr>
+            <td>${proto.name}</td>
+            <td>$${formatNumber(proto.tvl)}</td>
+            <td style="color:${proto.change_24h >= 0 ? '#16a34a' : '#dc2626'};">${proto.change_24h ? proto.change_24h.toFixed(2) : 0}%</td>
+            <td>${proto.chain || '—'}</td>
+        </tr>`).join('');
+}
+
+async function loadNews() {
+    const data = await apiCall('/api/news');
+    state.news = data.articles || [];
+    const list = document.getElementById('newsList');
+    if (!state.news.length) {
+        list.innerHTML = '<div class="list-item" style="color:var(--muted);">No news available</div>';
+        return;
+    }
+    list.innerHTML = state.news.slice(0, 12).map(article => `
+        <div class="news-item list-item">
+            <h4>${article.title}</h4>
+            <div class="news-meta">${article.source || 'Unknown'} • ${article.published_at ? new Date(article.published_at).toLocaleString() : ''}</div>
+            <p style="margin:6px 0;">${article.description || ''}</p>
+            <a href="${article.link}" target="_blank" style="font-size:12px; color:var(--primary);">Read article →</a>
+        </div>`).join('');
+}
+
+async function loadErrorSummary() {
+    try {
+        const [summary, diagnostics] = await Promise.all([
+            apiCall('/api/logs/summary'),
+            apiCall('/api/diagnostics/errors')
+        ]);
+        state.errorSummary = summary;
+        state.diagnostics = diagnostics;
+        renderErrorSummary();
+    } catch (err) {
+        console.error(err);
+        document.getElementById('errorSummaryCard').textContent = 'Failed to load diagnostics';
+    }
+}
+
+function renderErrorSummary() {
+    const summary = state.errorSummary;
+    const card = document.getElementById('errorSummaryCard');
+    if (!summary) {
+        card.textContent = 'No diagnostics available';
+        return;
+    }
+    card.innerHTML = `
+        <div><strong>Total Logs:</strong> ${summary.total}</div>
+        <div><strong>Last Error:</strong> ${summary.last_error ? summary.last_error.provider + ' @ ' + summary.last_error.timestamp : 'None'}</div>
+        <div><strong>Top Offenders:</strong> ${Object.keys(summary.by_provider || {}).slice(0,3).join(', ') || '—'}</div>
+    `;
+    const diag = state.diagnostics || { recent: [] };
+    const list = document.getElementById('diagnosticsList');
+    list.innerHTML = diag.recent.slice(0,5).map(item => `
+        <div class="list-item">
+            <div style="font-weight:600;">${item.provider}</div>
+            <div style="font-size:12px; color:var(--muted);">${item.timestamp}</div>
+            <div style="font-size:13px; color:${item.status === 'offline' ? '#dc2626' : '#d97706'};">${item.message || 'No message'}</div>
+        </div>`).join('');
+}
+
+async function loadResourceSearch() {
+    const query = document.getElementById('resourceSearch')?.value || '';
+    const source = document.getElementById('resourceFilter').value;
+    const data = await apiCall(`/api/resources/search?q=${encodeURIComponent(query)}&source=${source}`);
+    state.resources = data.results;
+    document.getElementById('resourceCountProviders').textContent = `(${data.counts.providers})`;
+    document.getElementById('resourceCountModels').textContent = `(${data.counts.models})`;
+    document.getElementById('resourceCountDatasets').textContent = `(${data.counts.datasets})`;
+    renderResourceResults();
+}
+
+function renderResourceResults() {
+    const providersContainer = document.getElementById('resourceResultsProviders');
+    const modelsContainer = document.getElementById('resourceResultsModels');
+    const datasetsContainer = document.getElementById('resourceResultsDatasets');
+
+    providersContainer.innerHTML = state.resources.providers.slice(0,6).map(p => `
+        <div class="resource-item">
+            <strong>${p.name}</strong>
+            <div style="font-size:12px;color:var(--muted);">${p.category}</div>
+            <div style="font-size:12px;">Status: ${p.status}</div>
+        </div>`).join('') || '<div class="resource-item" style="color:var(--muted);">No matches</div>';
+
+    modelsContainer.innerHTML = state.resources.models.slice(0,6).map(m => `
+        <div class="resource-item">
+            <strong>${m.id}</strong>
+            <div style="font-size:12px;color:var(--muted);">${m.description || 'No description'}</div>
+        </div>`).join('') || '<div class="resource-item" style="color:var(--muted);">No matches</div>';
+
+    datasetsContainer.innerHTML = state.resources.datasets.slice(0,6).map(d => `
+        <div class="resource-item">
+            <strong>${d.id}</strong>
+            <div style="font-size:12px;color:var(--muted);">${d.description || 'No description'}</div>
+        </div>`).join('') || '<div class="resource-item" style="color:var(--muted);">No matches</div>';
+}
+
+async function handleExport(type) {
+    try {
+        const res = await apiCall(`/api/v2/export/${type}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' });
+        state.exports.unshift({ type, url: res.download_url, timestamp: res.timestamp });
+        renderExportHistory();
+        showToast(`${type.toUpperCase()} export ready`, 'success');
+    } catch (err) {
+        console.error(err);
+        showToast('Export failed', 'error');
+    }
+}
+
+async function handleBackup() {
+    try {
+        const res = await apiCall('/api/v2/backup', { method: 'POST' });
+        state.exports.unshift({ type: 'backup', url: res.download_url, timestamp: res.timestamp });
+        renderExportHistory();
+        showToast('Backup created', 'success');
+    } catch (err) {
+        console.error(err);
+        showToast('Backup failed', 'error');
+    }
+}
+
+function renderExportHistory() {
+    const container = document.getElementById('exportHistory');
+    if (!state.exports.length) {
+        container.innerHTML = '<div style="color:var(--muted); font-size:13px;">No exports yet</div>';
+        return;
+    }
+    container.innerHTML = state.exports.slice(0,5).map(entry => `
+        <div class="list-item" style="border-bottom:1px solid var(--border);">
+            <div style="font-weight:600;">${entry.type.toUpperCase()}</div>
+            <div style="font-size:12px; color:var(--muted);">${new Date(entry.timestamp).toLocaleString()}</div>
+            <a href="${entry.url}" style="font-size:12px; color:var(--primary);" target="_blank">Download</a>
+        </div>`).join('');
+}
+
+async function handleImportSingle(event) {
+    event.preventDefault();
+    const form = event.target;
+    const payload = Object.fromEntries(new FormData(form).entries());
+    payload.requires_key = form.elements['requires_key'].checked;
+    payload.timeout_ms = Number(payload.timeout_ms) || 10000;
+    try {
+        await apiCall('/api/providers', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+        });
+        showToast('Provider imported', 'success');
+        form.reset();
+        loadProviders();
+    } catch (err) {
+        console.error(err);
+        showToast('Import failed', 'error');
+    }
+}
+
+async function handleImportBulk() {
+    const textarea = document.getElementById('bulkImportTextarea');
+    if (!textarea.value.trim()) {
+        showToast('Paste provider JSON first', 'error');
+        return;
+    }
+    try {
+        const providers = JSON.parse(textarea.value);
+        await apiCall('/api/v2/import/providers', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ providers })
+        });
+        showToast('Bulk import complete', 'success');
+        textarea.value = '';
+        loadProviders();
+    } catch (err) {
+        console.error(err);
+        showToast('Bulk import failed', 'error');
+    }
+}
+
+function switchTab(event, tabName) {
+    document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
+    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+    event.currentTarget.classList.add('active');
+    document.getElementById(`tab-${tabName}`).classList.add('active');
+    state.currentTab = tabName;
+    if (tabName === 'market') loadMarket();
+    if (tabName === 'sentiment') { loadSentimentData(); loadDefi(); }
+    if (tabName === 'news') loadNews();
+}
+
+function startAutoRefresh() {
+    setInterval(() => {
+        if (state.wsConnected) {
+            refreshAll();
+        }
+    }, config.autoRefreshInterval);
+}
+
+function refreshAll() {
+    loadProviders();
+    loadMarket();
+    loadTrending();
+    loadSentimentData();
+    loadDefi();
+    loadErrorSummary();
+    loadNews();
+    loadResourceSearch();
+}
+
+function formatNumber(value) {
+    if (!value && value !== 0) return '--';
+    if (value >= 1e12) return (value / 1e12).toFixed(2) + 'T';
+    if (value >= 1e9) return (value / 1e9).toFixed(2) + 'B';
+    if (value >= 1e6) return (value / 1e6).toFixed(2) + 'M';
+    if (value >= 1e3) return (value / 1e3).toFixed(2) + 'K';
+    return Number(value).toFixed(2);
+}
+
+function setupResourceSearch() {
+    const input = document.getElementById('resourceSearch');
+    input.addEventListener('input', () => {
+        clearTimeout(state.resourceSearchTimeout);
+        state.resourceSearchTimeout = setTimeout(loadResourceSearch, 400);
+    });
+}
+
+initializeWebSocket();
+setupResourceSearch();
+loadInitialData();
+startAutoRefresh();
+</script>
+</body>
+</html>
+

package.json

@@ -10,12 +10,7 @@
     "dashboard": "python3 -m http.server 8080",
     "full-check": "node api-monitor.js && node failover-manager.js && echo 'Open http://localhost:8080/dashboard.html in your browser' && python3 -m http.server 8080",
     "test:free-resources": "node free_resources_selftest.mjs",
-    "test:free-resources:win": "powershell -NoProfile -ExecutionPolicy Bypass -File test_free_endpoints.ps1",
-    "test:theme": "node tests/verify_theme.js",
-    "test:api-client": "node tests/test_apiClient.test.js"
-  },
-  "devDependencies": {
-    "fast-check": "^3.15.0"
+    "test:free-resources:win": "powershell -NoProfile -ExecutionPolicy Bypass -File test_free_endpoints.ps1"
   },
   "keywords": [
     "cryptocurrency",

static/css/design-system.css

@@ -148,7 +148,7 @@
 
 :root {
   /* ━━━ FONT FAMILIES ━━━ */
-  --font-main: "Inter", "Poppins", "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-main: "Inter", "Rubik", "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Monaco, Consolas, monospace;
 
   /* ━━━ FONT SIZES ━━━ */

static/css/design-tokens.css

@@ -1,129 +1,96 @@
 /**
  * ============================================
- * ENHANCED DESIGN TOKENS - Admin UI Modernization
- * Crypto Intelligence Hub
+ * DESIGN TOKENS - Enterprise Edition
+ * Crypto Monitor Ultimate
  * ============================================
  *
- * Comprehensive design system with:
- * - Color palette (dark/light themes)
- * - Gradients (linear, radial, glass effects)
- * - Typography scale (fonts, sizes, weights, spacing)
- * - Spacing system (consistent rhythm)
+ * Complete design system with:
+ * - Color palette (light/dark)
+ * - Typography scale
+ * - Spacing system
  * - Border radius tokens
- * - Multi-layered shadow system
- * - Blur effect variables
- * - Transition and easing functions
- * - Z-index elevation levels
- * - Layout constants
+ * - Shadow system
+ * - Blur tokens
+ * - Elevation levels
+ * - Animation timings
  */
 
 :root {
-    /* ===== COLOR PALETTE - DARK THEME (DEFAULT) ===== */
+    /* ===== COLOR PALETTE ===== */
 
-    /* Primary Brand Colors */
-    --color-primary: #6366f1;
-    --color-primary-light: #818cf8;
-    --color-primary-dark: #4f46e5;
-    --color-primary-darker: #4338ca;
-
-    /* Accent Colors */
-    --color-accent: #ec4899;
-    --color-accent-light: #f472b6;
-    --color-accent-dark: #db2777;
-
-    /* Semantic Colors */
-    --color-success: #10b981;
-    --color-success-light: #34d399;
-    --color-success-dark: #059669;
-
-    --color-warning: #f59e0b;
-    --color-warning-light: #fbbf24;
-    --color-warning-dark: #d97706;
-
-    --color-error: #ef4444;
-    --color-error-light: #f87171;
-    --color-error-dark: #dc2626;
-
-    --color-info: #3b82f6;
-    --color-info-light: #60a5fa;
-    --color-info-dark: #2563eb;
-
-    /* Extended Palette */
-    --color-purple: #8b5cf6;
-    --color-purple-light: #a78bfa;
-    --color-purple-dark: #7c3aed;
-
-    --color-cyan: #06b6d4;
-    --color-cyan-light: #22d3ee;
-    --color-cyan-dark: #0891b2;
-
-    --color-orange: #f97316;
-    --color-orange-light: #fb923c;
-    --color-orange-dark: #ea580c;
-
-    /* Background Colors - Dark Theme */
-    --bg-primary: #0f172a;
-    --bg-secondary: #1e293b;
-    --bg-tertiary: #334155;
-    --bg-elevated: #1e293b;
-    --bg-overlay: rgba(0, 0, 0, 0.75);
+    /* Base Colors - Dark Mode */
+    --color-bg-primary: #0a0e1a;
+    --color-bg-secondary: #111827;
+    --color-bg-tertiary: #1f2937;
+    --color-bg-elevated: #1f2937;
+    --color-bg-overlay: rgba(0, 0, 0, 0.75);
 
     /* Glassmorphism Backgrounds */
-    --glass-bg: rgba(255, 255, 255, 0.05);
-    --glass-bg-light: rgba(255, 255, 255, 0.08);
-    --glass-bg-strong: rgba(255, 255, 255, 0.12);
-    --glass-border: rgba(255, 255, 255, 0.1);
-    --glass-border-strong: rgba(255, 255, 255, 0.2);
+    --color-glass-bg: rgba(17, 24, 39, 0.7);
+    --color-glass-bg-light: rgba(31, 41, 55, 0.5);
+    --color-glass-border: rgba(255, 255, 255, 0.1);
 
     /* Text Colors */
-    --text-primary: #f1f5f9;
-    --text-secondary: #cbd5e1;
-    --text-tertiary: #94a3b8;
-    --text-muted: #64748b;
-    --text-disabled: #475569;
-    --text-inverse: #0f172a;
+    --color-text-primary: #f9fafb;
+    --color-text-secondary: #9ca3af;
+    --color-text-tertiary: #6b7280;
+    --color-text-disabled: #4b5563;
+    --color-text-inverse: #0a0e1a;
 
-    /* Border Colors */
-    --border-color: rgba(255, 255, 255, 0.1);
-    --border-color-light: rgba(255, 255, 255, 0.05);
-    --border-color-strong: rgba(255, 255, 255, 0.2);
-    --border-focus: var(--color-primary);
+    /* Accent Colors - Neon Palette */
+    --color-accent-blue: #3b82f6;
+    --color-accent-blue-dark: #2563eb;
+    --color-accent-blue-light: #60a5fa;
 
-    /* ===== GRADIENTS ===== */
+    --color-accent-purple: #8b5cf6;
+    --color-accent-purple-dark: #7c3aed;
+    --color-accent-purple-light: #a78bfa;
 
-    /* Primary Gradients */
-    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    --gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-    --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-    --gradient-warning: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
-    --gradient-error: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
+    --color-accent-pink: #ec4899;
+    --color-accent-pink-dark: #db2777;
+    --color-accent-pink-light: #f472b6;
 
-    /* Glass Gradients */
-    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
-    --gradient-glass-strong: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%);
+    --color-accent-green: #10b981;
+    --color-accent-green-dark: #059669;
+    --color-accent-green-light: #34d399;
 
-    /* Overlay Gradients */
-    --gradient-overlay: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.8) 100%);
-    --gradient-overlay-radial: radial-gradient(circle at center, rgba(15,23,42,0) 0%, rgba(15,23,42,0.9) 100%);
+    --color-accent-yellow: #f59e0b;
+    --color-accent-yellow-dark: #d97706;
+    --color-accent-yellow-light: #fbbf24;
 
-    /* Radial Gradients for Backgrounds */
-    --gradient-radial-blue: radial-gradient(circle at 20% 30%, rgba(99,102,241,0.15) 0%, transparent 50%);
-    --gradient-radial-purple: radial-gradient(circle at 80% 70%, rgba(139,92,246,0.15) 0%, transparent 50%);
-    --gradient-radial-pink: radial-gradient(circle at 50% 50%, rgba(236,72,153,0.1) 0%, transparent 40%);
-    --gradient-radial-green: radial-gradient(circle at 60% 40%, rgba(16,185,129,0.1) 0%, transparent 40%);
+    --color-accent-red: #ef4444;
+    --color-accent-red-dark: #dc2626;
+    --color-accent-red-light: #f87171;
 
-    /* Multi-color Gradients */
-    --gradient-rainbow: linear-gradient(135deg, #667eea 0%, #764ba2 33%, #f093fb 66%, #4facfe 100%);
-    --gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-    --gradient-ocean: linear-gradient(135deg, #2e3192 0%, #1bffff 100%);
+    --color-accent-cyan: #06b6d4;
+    --color-accent-cyan-dark: #0891b2;
+    --color-accent-cyan-light: #22d3ee;
 
-    /* ===== TYPOGRAPHY ===== */
+    /* Semantic Colors */
+    --color-success: var(--color-accent-green);
+    --color-error: var(--color-accent-red);
+    --color-warning: var(--color-accent-yellow);
+    --color-info: var(--color-accent-blue);
 
-    /* Font Families */
-    --font-family-primary: 'Inter', 'Manrope', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    --font-family-secondary: 'Manrope', 'Inter', sans-serif;
-    --font-family-display: 'DM Sans', 'Inter', sans-serif;
-    --font-family-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;
+    /* Border Colors */
+    --color-border-primary: rgba(255, 255, 255, 0.1);
+    --color-border-secondary: rgba(255, 255, 255, 0.05);
+    --color-border-focus: var(--color-accent-blue);
+
+    /* ===== GRADIENTS ===== */
+    --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
+    --gradient-secondary: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
+    --gradient-glass: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(31, 41, 55, 0.4) 100%);
+    --gradient-overlay: linear-gradient(180deg, rgba(10, 14, 26, 0) 0%, rgba(10, 14, 26, 0.8) 100%);
+
+    /* Radial Gradients for Background */
+    --gradient-radial-blue: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 40%);
+    --gradient-radial-purple: radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.15) 0%, transparent 40%);
+    --gradient-radial-green: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.1) 0%, transparent 30%);
+
+    /* ===== TYPOGRAPHY ===== */
+    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
 
     /* Font Sizes */
     --font-size-xs: 0.75rem;      /* 12px */
@@ -135,7 +102,6 @@
     --font-size-2xl: 1.875rem;    /* 30px */
     --font-size-3xl: 2.25rem;     /* 36px */
     --font-size-4xl: 3rem;        /* 48px */
-    --font-size-5xl: 3.75rem;     /* 60px */
 
     /* Font Weights */
     --font-weight-light: 300;
@@ -148,125 +114,74 @@
 
     /* Line Heights */
     --line-height-tight: 1.25;
-    --line-height-snug: 1.375;
     --line-height-normal: 1.5;
-    --line-height-relaxed: 1.625;
-    --line-height-loose: 1.75;
-    --line-height-loose-2: 2;
-
-    /* Letter Spacing */
-    --letter-spacing-tighter: -0.05em;
-    --letter-spacing-tight: -0.025em;
-    --letter-spacing-normal: 0;
-    --letter-spacing-wide: 0.025em;
-    --letter-spacing-wider: 0.05em;
-    --letter-spacing-widest: 0.1em;
+    --line-height-relaxed: 1.75;
+    --line-height-loose: 2;
 
     /* ===== SPACING SCALE ===== */
-    --space-0: 0;
-    --space-1: 0.25rem;   /* 4px */
-    --space-2: 0.5rem;    /* 8px */
-    --space-3: 0.75rem;   /* 12px */
-    --space-4: 1rem;      /* 16px */
-    --space-5: 1.25rem;   /* 20px */
-    --space-6: 1.5rem;    /* 24px */
-    --space-7: 1.75rem;   /* 28px */
-    --space-8: 2rem;      /* 32px */
-    --space-10: 2.5rem;   /* 40px */
-    --space-12: 3rem;     /* 48px */
-    --space-16: 4rem;     /* 64px */
-    --space-20: 5rem;     /* 80px */
-    --space-24: 6rem;     /* 96px */
-    --space-32: 8rem;     /* 128px */
+    --spacing-0: 0;
+    --spacing-1: 0.25rem;   /* 4px */
+    --spacing-2: 0.5rem;    /* 8px */
+    --spacing-3: 0.75rem;   /* 12px */
+    --spacing-4: 1rem;      /* 16px */
+    --spacing-5: 1.25rem;   /* 20px */
+    --spacing-6: 1.5rem;    /* 24px */
+    --spacing-8: 2rem;      /* 32px */
+    --spacing-10: 2.5rem;   /* 40px */
+    --spacing-12: 3rem;     /* 48px */
+    --spacing-16: 4rem;     /* 64px */
+    --spacing-20: 5rem;     /* 80px */
 
     /* Semantic Spacing */
-    --spacing-xs: var(--space-1);
-    --spacing-sm: var(--space-2);
-    --spacing-md: var(--space-4);
-    --spacing-lg: var(--space-6);
-    --spacing-xl: var(--space-8);
-    --spacing-2xl: var(--space-12);
-    --spacing-3xl: var(--space-16);
+    --spacing-xs: var(--spacing-1);
+    --spacing-sm: var(--spacing-2);
+    --spacing-md: var(--spacing-4);
+    --spacing-lg: var(--spacing-6);
+    --spacing-xl: var(--spacing-8);
+    --spacing-2xl: var(--spacing-12);
 
     /* ===== BORDER RADIUS ===== */
     --radius-none: 0;
-    --radius-xs: 0.25rem;    /* 4px */
-    --radius-sm: 0.375rem;   /* 6px */
+    --radius-sm: 0.25rem;    /* 4px */
     --radius-base: 0.5rem;   /* 8px */
     --radius-md: 0.75rem;    /* 12px */
     --radius-lg: 1rem;       /* 16px */
-    --radius-xl: 1.5rem;     /* 24px */
-    --radius-2xl: 2rem;      /* 32px */
-    --radius-3xl: 3rem;      /* 48px */
+    --radius-xl: 1.25rem;    /* 20px */
+    --radius-2xl: 1.5rem;    /* 24px */
+    --radius-3xl: 2rem;      /* 32px */
     --radius-full: 9999px;
 
-    /* ===== MULTI-LAYERED SHADOW SYSTEM ===== */
-
-    /* Base Shadows - Dark Theme */
-    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
-
-    /* Colored Glow Shadows */
-    --shadow-glow: 0 0 20px rgba(99,102,241,0.3);
-    --shadow-glow-accent: 0 0 20px rgba(236,72,153,0.3);
-    --shadow-glow-success: 0 0 20px rgba(16,185,129,0.3);
-    --shadow-glow-warning: 0 0 20px rgba(245,158,11,0.3);
-    --shadow-glow-error: 0 0 20px rgba(239,68,68,0.3);
-
-    /* Multi-layered Colored Shadows */
-    --shadow-blue: 0 10px 30px -5px rgba(59, 130, 246, 0.4), 0 0 15px rgba(59, 130, 246, 0.2);
-    --shadow-purple: 0 10px 30px -5px rgba(139, 92, 246, 0.4), 0 0 15px rgba(139, 92, 246, 0.2);
-    --shadow-pink: 0 10px 30px -5px rgba(236, 72, 153, 0.4), 0 0 15px rgba(236, 72, 153, 0.2);
-    --shadow-green: 0 10px 30px -5px rgba(16, 185, 129, 0.4), 0 0 15px rgba(16, 185, 129, 0.2);
-    --shadow-cyan: 0 10px 30px -5px rgba(6, 182, 212, 0.4), 0 0 15px rgba(6, 182, 212, 0.2);
+    /* ===== SHADOWS ===== */
+    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+
+    /* Colored Shadows */
+    --shadow-blue: 0 10px 30px -5px rgba(59, 130, 246, 0.3);
+    --shadow-purple: 0 10px 30px -5px rgba(139, 92, 246, 0.3);
+    --shadow-pink: 0 10px 30px -5px rgba(236, 72, 153, 0.3);
+    --shadow-green: 0 10px 30px -5px rgba(16, 185, 129, 0.3);
 
     /* Inner Shadows */
-    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
-    --shadow-inner-lg: inset 0 4px 8px 0 rgba(0, 0, 0, 0.4);
+    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --shadow-inner-lg: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1);
 
-    /* ===== BLUR EFFECT VARIABLES ===== */
+    /* ===== BLUR TOKENS ===== */
     --blur-none: 0;
-    --blur-xs: 2px;
     --blur-sm: 4px;
     --blur-base: 8px;
     --blur-md: 12px;
     --blur-lg: 16px;
-    --blur-xl: 24px;
+    --blur-xl: 20px;
     --blur-2xl: 40px;
     --blur-3xl: 64px;
 
-    /* ===== TRANSITION AND EASING FUNCTIONS ===== */
-
-    /* Duration */
-    --transition-instant: 0ms;
-    --transition-fast: 150ms;
-    --transition-base: 250ms;
-    --transition-slow: 350ms;
-    --transition-slower: 500ms;
-    --transition-slowest: 700ms;
-
-    /* Easing Functions */
-    --ease-linear: linear;
-    --ease-in: cubic-bezier(0.4, 0, 1, 1);
-    --ease-out: cubic-bezier(0, 0, 0.2, 1);
-    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
-
-    /* Combined Transitions */
-    --transition-all-fast: all var(--transition-fast) var(--ease-out);
-    --transition-all-base: all var(--transition-base) var(--ease-in-out);
-    --transition-all-slow: all var(--transition-slow) var(--ease-in-out);
-    --transition-transform: transform var(--transition-base) var(--ease-out);
-    --transition-opacity: opacity var(--transition-base) var(--ease-out);
-    --transition-colors: color var(--transition-base) var(--ease-out), background-color var(--transition-base) var(--ease-out), border-color var(--transition-base) var(--ease-out);
-
-    /* ===== Z-INDEX ELEVATION LEVELS ===== */
+    /* ===== ELEVATION LEVELS ===== */
+    /* Use these for layering UI elements */
     --z-base: 0;
     --z-dropdown: 1000;
     --z-sticky: 1020;
@@ -276,13 +191,27 @@
     --z-popover: 1060;
     --z-tooltip: 1070;
     --z-notification: 1080;
-    --z-max: 9999;
 
-    /* ===== LAYOUT CONSTANTS ===== */
+    /* ===== ANIMATION TIMINGS ===== */
+    --duration-instant: 0ms;
+    --duration-fast: 150ms;
+    --duration-base: 250ms;
+    --duration-slow: 350ms;
+    --duration-slower: 500ms;
+
+    /* Easing Functions */
+    --ease-linear: linear;
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+    /* ===== LAYOUT ===== */
     --header-height: 72px;
     --sidebar-width: 280px;
     --sidebar-collapsed-width: 80px;
     --mobile-nav-height: 64px;
+
     --container-max-width: 1920px;
     --content-max-width: 1440px;
 
@@ -294,80 +223,52 @@
     --breakpoint-xl: 1024px;
     --breakpoint-2xl: 1280px;
     --breakpoint-3xl: 1440px;
-    --breakpoint-4xl: 1920px;
 }
 
-/* ===== LIGHT THEME OVERRIDES ===== */
+/* ===== LIGHT MODE OVERRIDES ===== */
 [data-theme="light"] {
-    /* Background Colors */
-    --bg-primary: #ffffff;
-    --bg-secondary: #f9fafb;
-    --bg-tertiary: #f3f4f6;
-    --bg-elevated: #ffffff;
-    --bg-overlay: rgba(255, 255, 255, 0.9);
-
-    /* Glassmorphism Backgrounds */
-    --glass-bg: rgba(255, 255, 255, 0.7);
-    --glass-bg-light: rgba(255, 255, 255, 0.5);
-    --glass-bg-strong: rgba(255, 255, 255, 0.85);
-    --glass-border: rgba(0, 0, 0, 0.1);
-    --glass-border-strong: rgba(0, 0, 0, 0.2);
-
-    /* Text Colors */
-    --text-primary: #111827;
-    --text-secondary: #6b7280;
-    --text-tertiary: #9ca3af;
-    --text-muted: #d1d5db;
-    --text-disabled: #e5e7eb;
-    --text-inverse: #ffffff;
-
-    /* Border Colors */
-    --border-color: rgba(0, 0, 0, 0.1);
-    --border-color-light: rgba(0, 0, 0, 0.05);
-    --border-color-strong: rgba(0, 0, 0, 0.2);
-
-    /* Glass Gradients */
-    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 100%);
-    --gradient-glass-strong: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
-
-    /* Overlay Gradients */
-    --gradient-overlay: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
-
-    /* Shadows - Lighter for Light Theme */
-    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
-    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.08);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-
-    /* Inner Shadows */
-    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    --shadow-inner-lg: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+    --color-bg-primary: #ffffff;
+    --color-bg-secondary: #f9fafb;
+    --color-bg-tertiary: #f3f4f6;
+    --color-bg-elevated: #ffffff;
+    --color-bg-overlay: rgba(255, 255, 255, 0.9);
+
+    --color-glass-bg: rgba(255, 255, 255, 0.7);
+    --color-glass-bg-light: rgba(249, 250, 251, 0.5);
+    --color-glass-border: rgba(0, 0, 0, 0.1);
+
+    --color-text-primary: #111827;
+    --color-text-secondary: #6b7280;
+    --color-text-tertiary: #9ca3af;
+    --color-text-disabled: #d1d5db;
+    --color-text-inverse: #ffffff;
+
+    --color-border-primary: rgba(0, 0, 0, 0.1);
+    --color-border-secondary: rgba(0, 0, 0, 0.05);
+
+    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(249, 250, 251, 0.4) 100%);
+    --gradient-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
+
+    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
+    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
+    --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
+    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
+    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
 }
 
 /* ===== UTILITY CLASSES ===== */
 
 /* Glassmorphism Effects */
 .glass-effect {
-    background: var(--glass-bg);
-    backdrop-filter: blur(var(--blur-lg));
-    -webkit-backdrop-filter: blur(var(--blur-lg));
-    border: 1px solid var(--glass-border);
+    background: var(--color-glass-bg);
+    backdrop-filter: blur(var(--blur-xl));
+    border: 1px solid var(--color-glass-border);
 }
 
 .glass-effect-light {
-    background: var(--glass-bg-light);
-    backdrop-filter: blur(var(--blur-md));
-    -webkit-backdrop-filter: blur(var(--blur-md));
-    border: 1px solid var(--glass-border);
-}
-
-.glass-effect-strong {
-    background: var(--glass-bg-strong);
-    backdrop-filter: blur(var(--blur-xl));
-    -webkit-backdrop-filter: blur(var(--blur-xl));
-    border: 1px solid var(--glass-border-strong);
+    background: var(--color-glass-bg-light);
+    backdrop-filter: blur(var(--blur-lg));
+    border: 1px solid var(--color-glass-border);
 }
 
 /* Gradient Backgrounds */
@@ -375,12 +276,8 @@
     background: var(--gradient-primary);
 }
 
-.bg-gradient-accent {
-    background: var(--gradient-accent);
-}
-
-.bg-gradient-success {
-    background: var(--gradient-success);
+.bg-gradient-secondary {
+    background: var(--gradient-secondary);
 }
 
 /* Text Gradients */
@@ -391,13 +288,6 @@
     -webkit-text-fill-color: transparent;
 }
 
-.text-gradient-accent {
-    background: var(--gradient-accent);
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-
 /* Shadow Utilities */
 .shadow-glow-blue {
     box-shadow: var(--shadow-blue);
@@ -417,25 +307,13 @@
 
 /* Animation Utilities */
 .transition-fast {
-    transition: var(--transition-all-fast);
+    transition: all var(--duration-fast) var(--ease-out);
 }
 
 .transition-base {
-    transition: var(--transition-all-base);
+    transition: all var(--duration-base) var(--ease-in-out);
 }
 
 .transition-slow {
-    transition: var(--transition-all-slow);
-}
-
-/* Accessibility: Respect reduced motion preference */
-@media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-        scroll-behavior: auto !important;
-    }
+    transition: all var(--duration-slow) var(--ease-in-out);
 }

static/css/pro-dashboard.css

@@ -1,34 +1,22 @@
 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
 
 :root {
-    --bg-gradient: radial-gradient(circle at top, #0a0e1a, #05060a 70%);
-    --glass-bg: rgba(20, 28, 45, 0.85);
-    --glass-border: rgba(255, 255, 255, 0.18);
-    --glass-highlight: rgba(255, 255, 255, 0.25);
+    --bg-gradient: radial-gradient(circle at top, #172032, #05060a 60%);
+    --glass-bg: rgba(17, 25, 40, 0.65);
+    --glass-border: rgba(255, 255, 255, 0.08);
+    --glass-highlight: rgba(255, 255, 255, 0.15);
     --primary: #8f88ff;
     --primary-strong: #6c63ff;
-    --primary-light: #b8b3ff;
-    --primary-glow: rgba(143, 136, 255, 0.4);
     --secondary: #16d9fa;
-    --secondary-light: #5ee3f5;
-    --secondary-glow: rgba(22, 217, 250, 0.4);
     --accent: #f472b6;
-    --success: #4ade80;
-    --success-light: #86efac;
-    --success-glow: rgba(74, 222, 128, 0.5);
-    --success-dark: #22c55e;
+    --success: #22c55e;
     --warning: #facc15;
-    --warning-light: #fde047;
     --danger: #ef4444;
-    --danger-light: #f87171;
     --info: #38bdf8;
-    --info-light: #7dd3fc;
-    --text-primary: #ffffff;
-    --text-secondary: #e2e8f0;
-    --text-muted: rgba(226, 232, 240, 0.85);
-    --text-faint: rgba(226, 232, 240, 0.6);
-    --shadow-strong: 0 25px 60px rgba(0, 0, 0, 0.7);
-    --shadow-soft: 0 15px 40px rgba(0, 0, 0, 0.6);
+    --text-primary: #f8fafc;
+    --text-muted: rgba(248, 250, 252, 0.7);
+    --shadow-strong: 0 25px 60px rgba(0, 0, 0, 0.45);
+    --shadow-soft: 0 15px 40px rgba(0, 0, 0, 0.35);
     --sidebar-width: 260px;
 }
 
@@ -40,16 +28,9 @@ html, body {
     margin: 0;
     padding: 0;
     min-height: 100vh;
-    font-family: 'Manrope', 'DM Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-weight: 500;
-    font-size: 15px;
-    line-height: 1.65;
-    letter-spacing: -0.015em;
+    font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     background: var(--bg-gradient);
     color: var(--text-primary);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
 }
 
 body[data-theme='light'] {
@@ -68,137 +49,39 @@ body[data-theme='light'] {
 
 .sidebar {
     width: var(--sidebar-width);
-    padding: 28px 20px;
-    background: linear-gradient(180deg, 
-        #ffffff 0%, 
-        rgba(219, 234, 254, 0.3) 20%,
-        rgba(221, 214, 254, 0.25) 40%,
-        rgba(251, 207, 232, 0.2) 60%,
-        rgba(221, 214, 254, 0.25) 80%,
-        rgba(251, 207, 232, 0.15) 90%,
-        #ffffff 100%);
+    padding: 32px 24px;
+    background: linear-gradient(180deg, rgba(9, 9, 13, 0.8), rgba(9, 9, 13, 0.4));
     backdrop-filter: blur(30px);
-    border-right: 1px solid rgba(0, 0, 0, 0.08);
+    border-right: 1px solid var(--glass-border);
     display: flex;
     flex-direction: column;
-    gap: 28px;
+    gap: 24px;
     position: sticky;
     top: 0;
     height: 100vh;
-    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08), inset -1px 0 0 rgba(255, 255, 255, 0.5);
 }
 
 .brand {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 14px;
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 14px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    box-shadow: 
-        inset 0 1px 2px rgba(255, 255, 255, 0.05),
-        0 2px 8px rgba(0, 0, 0, 0.2);
-    position: relative;
-    overflow: hidden;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.brand::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(135deg, rgba(143, 136, 255, 0.08), rgba(22, 217, 250, 0.05));
-    opacity: 0;
-    transition: opacity 0.4s ease;
-}
-
-.brand:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border-color: rgba(143, 136, 255, 0.2);
-    box-shadow: 
-        inset 0 1px 2px rgba(255, 255, 255, 0.08),
-        0 4px 16px rgba(143, 136, 255, 0.15);
-}
-
-.brand:hover::before {
-    opacity: 1;
-}
-
-.brand-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 10px;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: var(--text-secondary);
-    flex-shrink: 0;
-    box-shadow: 
-        inset 0 1px 2px rgba(255, 255, 255, 0.1),
-        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
-        0 2px 4px rgba(0, 0, 0, 0.2);
-    position: relative;
-}
-
-.brand-icon::before {
-    content: '';
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    right: 2px;
-    height: 50%;
-    border-radius: 10px 10px 0 0;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
-    pointer-events: none;
-}
-
-.brand-icon svg {
-    position: relative;
-    z-index: 1;
-    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
-}
-
-.brand-text {
     display: flex;
     flex-direction: column;
     gap: 6px;
-    flex: 1;
-    min-width: 0;
 }
 
 .brand strong {
-    font-size: 1rem;
-    font-weight: 700;
-    letter-spacing: -0.01em;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    color: var(--text-primary);
-    line-height: 1.3;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    font-size: 1.3rem;
+    letter-spacing: 0.1em;
 }
 
 .env-pill {
     display: inline-flex;
     align-items: center;
-    gap: 5px;
-    background: rgba(143, 136, 255, 0.1);
-    border: 1px solid rgba(143, 136, 255, 0.2);
-    padding: 3px 8px;
-    border-radius: 6px;
-    font-size: 0.65rem;
-    font-weight: 600;
+    gap: 6px;
+    background: rgba(255, 255, 255, 0.08);
+    padding: 4px 10px;
+    border-radius: 999px;
+    font-size: 0.75rem;
     text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: rgba(143, 136, 255, 0.9);
-    font-family: 'Manrope', sans-serif;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
+    letter-spacing: 0.05em;
 }
 
 .nav {
@@ -209,199 +92,34 @@ body[data-theme='light'] {
 
 .nav-button {
     border: none;
-    border-radius: 12px;
+    border-radius: 14px;
     padding: 12px 16px;
     display: flex;
     align-items: center;
     gap: 12px;
     background: transparent;
-    color: #475569;
-    font-weight: 600;
-    font-family: 'Manrope', sans-serif;
-    font-size: 0.875rem;
+    color: inherit;
+    font-weight: 500;
     cursor: pointer;
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: visible;
-}
-
-.nav-button svg {
-    color: #6366f1;
-}
-
-.nav-button[data-nav="page-overview"] svg {
-    color: #3b82f6;
-}
-
-.nav-button[data-nav="page-market"] svg {
-    color: #8b5cf6;
-}
-
-.nav-button[data-nav="page-chart"] svg {
-    color: #ec4899;
-}
-
-.nav-button[data-nav="page-ai"] svg {
-    color: #10b981;
-}
-
-.nav-button[data-nav="page-news"] svg {
-    color: #f59e0b;
-}
-
-.nav-button[data-nav="page-providers"] svg {
-    color: #06b6d4;
-}
-
-.nav-button[data-nav="page-api"] svg {
-    color: #6366f1;
-}
-
-.nav-button[data-nav="page-debug"] svg {
-    color: #ef4444;
-}
-
-.nav-button[data-nav="page-datasets"] svg {
-    color: #a855f7;
-}
-
-.nav-button[data-nav="page-settings"] svg {
-    color: #64748b;
-}
-
-.nav-button::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 2px;
-    height: 0;
-    background: var(--primary);
-    border-radius: 0 2px 2px 0;
-    transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    opacity: 0;
-}
-
-.nav-button::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: rgba(143, 136, 255, 0.05);
-    border-radius: 10px;
-    opacity: 0;
-    transition: opacity 0.25s ease;
-    z-index: -1;
+    transition: transform 0.3s ease, background 0.3s ease;
 }
 
 .nav-button svg {
-    width: 20px;
-    height: 20px;
+    width: 22px;
+    height: 22px;
     fill: currentColor;
-    stroke: currentColor;
-    stroke-width: 2;
-    transition: all 0.25s ease;
-    flex-shrink: 0;
-    opacity: 1;
-    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
 }
 
+.nav-button.active,
 .nav-button:hover {
-    color: #0f172a;
-    background: rgba(99, 102, 241, 0.08);
-}
-
-.nav-button:hover svg {
-    opacity: 1;
-    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
-}
-
-.nav-button:hover::before {
-    height: 50%;
-    opacity: 1;
-}
-
-.nav-button:hover::after {
-    opacity: 1;
-}
-
-.nav-button:hover svg {
-    opacity: 1;
-    color: var(--primary);
-}
-
-.nav-button.active {
-    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.12));
-    color: #0f172a;
-    box-shadow: 
-        inset 0 1px 2px rgba(255, 255, 255, 0.3),
-        0 2px 8px rgba(99, 102, 241, 0.2);
-    border: 1px solid rgba(99, 102, 241, 0.2);
-}
-
-.nav-button.active svg {
-    opacity: 1;
-    filter: drop-shadow(0 2px 4px rgba(99, 102, 241, 0.3));
-}
-
-.nav-button.active::before {
-    height: 60%;
-    opacity: 1;
-    box-shadow: 0 0 8px rgba(143, 136, 255, 0.5);
-}
-
-.nav-button.active::after {
-    opacity: 1;
-    background: rgba(143, 136, 255, 0.08);
-}
-
-.nav-button.active svg {
-    color: var(--primary);
-    opacity: 1;
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateX(6px);
 }
 
 .sidebar-footer {
     margin-top: auto;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.footer-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 16px;
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 12px;
-    font-size: 0.75rem;
-    font-weight: 600;
+    font-size: 0.85rem;
     color: var(--text-muted);
-    font-family: 'Manrope', sans-serif;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    transition: all 0.3s ease;
-}
-
-.footer-badge svg {
-    width: 14px;
-    height: 14px;
-    opacity: 0.7;
-    transition: all 0.3s ease;
-}
-
-.footer-badge:hover {
-    background: rgba(255, 255, 255, 0.06);
-    border-color: rgba(143, 136, 255, 0.3);
-    color: var(--text-primary);
-    transform: translateY(-2px);
-}
-
-.footer-badge:hover svg {
-    opacity: 1;
-    color: var(--primary);
 }
 
 .main-area {
@@ -416,125 +134,19 @@ body[data-theme='light'] {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 24px 32px;
+    padding: 18px 24px;
     border-radius: 24px;
-    background: linear-gradient(135deg, rgba(20, 28, 45, 0.95), rgba(15, 23, 42, 0.9));
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 
-        var(--shadow-soft),
-        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
-        0 0 40px rgba(143, 136, 255, 0.15),
-        0 4px 16px rgba(0, 0, 0, 0.3);
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    box-shadow: var(--shadow-soft);
     backdrop-filter: blur(20px);
     flex-wrap: wrap;
-    gap: 20px;
-    position: relative;
-    overflow: hidden;
-}
-
-.topbar::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, rgba(143, 136, 255, 0.5), rgba(22, 217, 250, 0.5), transparent);
-}
-
-.topbar-content {
-    display: flex;
-    align-items: center;
     gap: 16px;
-    flex: 1;
-}
-
-.topbar-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 64px;
-    height: 64px;
-    border-radius: 14px;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: var(--text-secondary);
-    flex-shrink: 0;
-    box-shadow: 
-        inset 0 1px 2px rgba(255, 255, 255, 0.1),
-        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
-        0 2px 4px rgba(0, 0, 0, 0.2);
-    position: relative;
-}
-
-.topbar-icon::before {
-    content: '';
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    right: 2px;
-    height: 50%;
-    border-radius: 14px 14px 0 0;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
-    pointer-events: none;
-}
-
-.topbar-icon svg {
-    position: relative;
-    z-index: 1;
-    width: 36px;
-    height: 36px;
-    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
-}
-
-.topbar-text {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
 }
 
 .topbar h1 {
     margin: 0;
-    font-size: 2rem;
-    font-weight: 800;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    letter-spacing: -0.03em;
-    line-height: 1.2;
-    display: flex;
-    align-items: baseline;
-    gap: 8px;
-}
-
-.title-gradient {
-    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 80%, #cbd5e1 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
-}
-
-.title-accent {
-    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    font-size: 0.9em;
-}
-
-.topbar p.text-muted {
-    margin: 0;
-    font-size: 0.875rem;
-    color: var(--text-muted);
-    font-weight: 500;
-    font-family: 'Manrope', sans-serif;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.topbar p.text-muted svg {
-    opacity: 0.7;
-    color: var(--primary);
+    font-size: 1.8rem;
 }
 
 .status-group {
@@ -546,247 +158,33 @@ body[data-theme='light'] {
 .status-pill {
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 12px 20px;
-    border-radius: 12px;
-    background: rgba(255, 255, 255, 0.95);
-    border: 2px solid rgba(0, 0, 0, 0.1);
-    font-size: 0.8125rem;
-    font-weight: 700;
+    gap: 8px;
+    padding: 8px 14px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--glass-border);
+    font-size: 0.85rem;
     text-transform: uppercase;
-    letter-spacing: 0.08em;
-    font-family: 'Manrope', sans-serif;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: visible;
-    box-shadow: 
-        0 2px 8px rgba(0, 0, 0, 0.1),
-        inset 0 1px 0 rgba(255, 255, 255, 0.8);
-    cursor: pointer;
-}
-
-.status-pill:hover {
-    box-shadow: 
-        0 4px 12px rgba(0, 0, 0, 0.15),
-        inset 0 1px 0 rgba(255, 255, 255, 0.9);
-    border-color: rgba(0, 0, 0, 0.15);
-}
-
-.status-pill::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-
-.status-pill:hover::before {
-    opacity: 1;
+    letter-spacing: 0.05em;
 }
 
 .status-dot {
-    width: 16px;
-    height: 16px;
+    width: 10px;
+    height: 10px;
     border-radius: 50%;
     background: var(--warning);
-    position: relative;
-    flex-shrink: 0;
-    box-shadow: 
-        0 0 8px var(--warning),
-        0 2px 4px rgba(0, 0, 0, 0.2);
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    border: 2px solid rgba(255, 255, 255, 0.9);
-}
-
-.status-pill:hover .status-dot {
-    box-shadow: 
-        0 0 12px var(--warning),
-        0 2px 6px rgba(0, 0, 0, 0.25);
-}
-
-.status-pill[data-state='ok'] {
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-    border: 2px solid #10b981;
-    color: #ffffff;
-    box-shadow: 
-        0 2px 8px rgba(16, 185, 129, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.3);
-    font-weight: 700;
-    position: relative;
-}
-
-.status-pill[data-state='ok']:hover {
-    background: linear-gradient(135deg, #059669 0%, #047857 100%);
-    box-shadow: 
-        0 4px 12px rgba(16, 185, 129, 0.4),
-        inset 0 1px 0 rgba(255, 255, 255, 0.4);
-}
-
-@keyframes live-pulse {
-    0%, 100% {
-        box-shadow: 
-            inset 0 1px 2px rgba(255, 255, 255, 0.2),
-            inset 0 -1px 2px rgba(0, 0, 0, 0.3),
-            0 4px 16px rgba(34, 197, 94, 0.4),
-            0 0 30px rgba(34, 197, 94, 0.3),
-            0 0 50px rgba(16, 185, 129, 0.2);
-    }
-    50% {
-        box-shadow: 
-            inset 0 1px 2px rgba(255, 255, 255, 0.25),
-            inset 0 -1px 2px rgba(0, 0, 0, 0.4),
-            0 6px 24px rgba(34, 197, 94, 0.5),
-            0 0 40px rgba(34, 197, 94, 0.4),
-            0 0 60px rgba(16, 185, 129, 0.3);
-    }
-}
-
-.status-pill[data-state='ok']::before {
-    content: '';
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    right: 2px;
-    height: 50%;
-    border-radius: 999px 999px 0 0;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
-    pointer-events: none;
 }
 
 .status-pill[data-state='ok'] .status-dot {
-    background: #ffffff;
-    border: 2px solid #10b981;
-    box-shadow: 
-        0 0 8px rgba(16, 185, 129, 0.6),
-        0 2px 4px rgba(0, 0, 0, 0.2),
-        inset 0 1px 2px rgba(255, 255, 255, 0.8);
-}
-
-.status-pill[data-state='ok']:hover .status-dot {
-    box-shadow: 
-        0 0 12px rgba(16, 185, 129, 0.8),
-        0 2px 6px rgba(0, 0, 0, 0.25),
-        inset 0 1px 2px rgba(255, 255, 255, 0.9);
-}
-
-@keyframes live-dot-pulse {
-    0%, 100% {
-        transform: scale(1);
-        box-shadow: 
-            inset 0 1px 2px rgba(255, 255, 255, 0.4),
-            inset 0 -1px 2px rgba(0, 0, 0, 0.4),
-            0 0 16px rgba(34, 197, 94, 0.8),
-            0 0 32px rgba(34, 197, 94, 0.6),
-            0 0 48px rgba(16, 185, 129, 0.4);
-    }
-    50% {
-        transform: scale(1.15);
-        box-shadow: 
-            inset 0 1px 2px rgba(255, 255, 255, 0.5),
-            inset 0 -1px 2px rgba(0, 0, 0, 0.5),
-            0 0 20px rgba(34, 197, 94, 1),
-            0 0 40px rgba(34, 197, 94, 0.8),
-            0 0 60px rgba(16, 185, 129, 0.6);
-    }
-}
-
-.status-pill[data-state='ok']::after {
-    display: none;
-}
-
-.status-pill[data-state='warn'] {
-    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-    border: 2px solid #f59e0b;
-    color: #ffffff;
-    box-shadow: 
-        0 2px 8px rgba(245, 158, 11, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.3);
-}
-
-.status-pill[data-state='warn']:hover {
-    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
-    box-shadow: 
-        0 4px 12px rgba(245, 158, 11, 0.4),
-        inset 0 1px 0 rgba(255, 255, 255, 0.4);
+    background: var(--success);
 }
 
 .status-pill[data-state='warn'] .status-dot {
-    background: #ffffff;
-    border: 2px solid #f59e0b;
-    box-shadow: 
-        0 0 8px rgba(245, 158, 11, 0.6),
-        0 2px 4px rgba(0, 0, 0, 0.2),
-        inset 0 1px 2px rgba(255, 255, 255, 0.8);
-}
-
-.status-pill[data-state='warn']:hover .status-dot {
-    box-shadow: 
-        0 0 12px rgba(245, 158, 11, 0.8),
-        0 2px 6px rgba(0, 0, 0, 0.25),
-        inset 0 1px 2px rgba(255, 255, 255, 0.9);
-}
-
-.status-pill[data-state='error'] {
-    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-    border: 2px solid #ef4444;
-    color: #ffffff;
-    box-shadow: 
-        0 2px 8px rgba(239, 68, 68, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.3);
-}
-
-.status-pill[data-state='error']:hover {
-    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
-    box-shadow: 
-        0 4px 12px rgba(239, 68, 68, 0.4),
-        inset 0 1px 0 rgba(255, 255, 255, 0.4);
+    background: var(--warning);
 }
 
 .status-pill[data-state='error'] .status-dot {
-    background: #ffffff;
-    border: 2px solid #ef4444;
-    box-shadow: 
-        0 0 8px rgba(239, 68, 68, 0.6),
-        0 2px 4px rgba(0, 0, 0, 0.2),
-        inset 0 1px 2px rgba(255, 255, 255, 0.8);
-}
-
-.status-pill[data-state='error']:hover .status-dot {
-    box-shadow: 
-        0 0 12px rgba(239, 68, 68, 0.8),
-        0 2px 6px rgba(0, 0, 0, 0.25),
-        inset 0 1px 2px rgba(255, 255, 255, 0.9);
-}
-
-@keyframes pulse-green {
-    0%, 100% {
-        transform: scale(1);
-        opacity: 1;
-        box-shadow: 
-            0 0 16px #86efac, 
-            0 0 32px rgba(74, 222, 128, 0.8),
-            0 0 48px rgba(34, 197, 94, 0.6);
-    }
-    50% {
-        transform: scale(1.3);
-        opacity: 0.9;
-        box-shadow: 
-            0 0 24px #86efac, 
-            0 0 48px rgba(74, 222, 128, 1),
-            0 0 72px rgba(34, 197, 94, 0.8);
-    }
-}
-
-@keyframes glow-pulse {
-    0%, 100% {
-        opacity: 0.6;
-        transform: scale(1);
-    }
-    50% {
-        opacity: 1;
-        transform: scale(1.1);
-    }
+    background: var(--danger);
 }
 
 .page-container {
@@ -810,117 +208,18 @@ body[data-theme='light'] {
 }
 
 .section-title {
-    font-size: 1.75rem;
-    font-weight: 800;
-    letter-spacing: -0.025em;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    margin: 0;
-    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    font-size: 1.3rem;
+    letter-spacing: 0.05em;
 }
 
 .glass-card {
-    background: rgba(255, 255, 255, 0.12);
-    backdrop-filter: blur(35px) saturate(180%);
-    -webkit-backdrop-filter: blur(35px) saturate(180%);
-    border: 2px solid rgba(255, 255, 255, 0.22);
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
     border-radius: 24px;
-    padding: 28px;
-    box-shadow: 
-        0 8px 32px rgba(0, 0, 0, 0.5),
-        inset 0 1px 0 rgba(255, 255, 255, 0.25),
-        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
-        0 0 40px rgba(0, 212, 255, 0.15);
+    padding: 20px;
+    box-shadow: var(--shadow-strong);
     position: relative;
-    overflow: visible;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.glass-card::before {
-    content: '';
-    position: absolute;
-    inset: -4px;
-    background: linear-gradient(135deg, 
-        rgba(0, 212, 255, 0.3) 0%, 
-        rgba(139, 92, 246, 0.3) 50%, 
-        rgba(236, 72, 153, 0.3) 100%);
-    border-radius: 28px;
-    opacity: 0;
-    transition: opacity 0.4s ease;
-    z-index: -1;
-    filter: blur(20px);
-    animation: card-glow-pulse 4s ease-in-out infinite;
-}
-
-@keyframes card-glow-pulse {
-    0%, 100% {
-        opacity: 0;
-        filter: blur(20px);
-    }
-    50% {
-        opacity: 0.4;
-        filter: blur(25px);
-    }
-}
-
-.glass-card::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: linear-gradient(90deg,
-        transparent,
-        rgba(0, 212, 255, 0.7),
-        rgba(139, 92, 246, 0.7),
-        rgba(236, 72, 153, 0.7),
-        transparent);
-    border-radius: 24px 24px 0 0;
-    opacity: 0.7;
-    animation: card-shimmer 4s infinite;
-}
-
-@keyframes card-shimmer {
-    0%, 100% { opacity: 0.7; }
-    50% { opacity: 1; }
-}
-
-
-.glass-card:hover {
-    box-shadow: 
-        0 16px 48px rgba(0, 0, 0, 0.6),
-        0 0 50px rgba(0, 212, 255, 0.5),
-        0 0 100px rgba(139, 92, 246, 0.4),
-        0 0 150px rgba(236, 72, 153, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.3),
-        inset 0 -1px 0 rgba(0, 0, 0, 0.4);
-    border-color: rgba(0, 212, 255, 0.6);
-}
-
-.glass-card:hover::before {
-    opacity: 0.8;
-    filter: blur(30px);
-}
-
-.glass-card:hover::after {
-    opacity: 1;
-    height: 4px;
-}
-
-.glass-card h4 {
-    font-size: 1.25rem;
-    font-weight: 700;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    margin: 0 0 20px 0;
-    color: var(--text-primary);
-    letter-spacing: -0.02em;
-    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    overflow: hidden;
 }
 
 .glass-card::before {
@@ -943,379 +242,24 @@ body[data-theme='light'] {
     margin-bottom: 24px;
 }
 
-.stat-card {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    position: relative;
-    background: rgba(255, 255, 255, 0.08);
-    backdrop-filter: blur(30px) saturate(180%);
-    -webkit-backdrop-filter: blur(30px) saturate(180%);
-    border: 2px solid rgba(255, 255, 255, 0.15);
-    border-radius: 20px;
-    padding: 20px;
-    box-shadow: 
-        0 8px 32px rgba(0, 0, 0, 0.4),
-        inset 0 1px 0 rgba(255, 255, 255, 0.2),
-        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    overflow: visible;
-}
-
-.stat-card::before {
-    content: '';
-    position: absolute;
-    inset: -4px;
-    border-radius: 24px;
-    background: linear-gradient(135deg, 
-        rgba(0, 212, 255, 0.4) 0%, 
-        rgba(139, 92, 246, 0.4) 50%, 
-        rgba(236, 72, 153, 0.4) 100%);
-    opacity: 0;
-    transition: opacity 0.4s ease;
-    z-index: -1;
-    filter: blur(20px);
-    animation: glow-pulse 3s ease-in-out infinite;
-}
-
-.stat-card::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: linear-gradient(90deg,
-        transparent,
-        rgba(0, 212, 255, 0.8),
-        rgba(139, 92, 246, 0.8),
-        rgba(236, 72, 153, 0.8),
-        transparent);
-    border-radius: 20px 20px 0 0;
-    opacity: 0.6;
-    animation: shimmer 3s infinite;
-}
-
-@keyframes glow-pulse {
-    0%, 100% {
-        opacity: 0;
-        filter: blur(20px);
-    }
-    50% {
-        opacity: 0.5;
-        filter: blur(25px);
-    }
-}
-
-@keyframes shimmer {
-    0%, 100% { opacity: 0.6; }
-    50% { opacity: 1; }
-}
-
-.stat-card:hover {
-    border-color: rgba(0, 212, 255, 0.5);
-    box-shadow: 
-        0 16px 48px rgba(0, 0, 0, 0.5),
-        0 0 40px rgba(0, 212, 255, 0.4),
-        0 0 80px rgba(139, 92, 246, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.3),
-        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
-}
-
-.stat-card:hover::before {
-    opacity: 0.6;
-    filter: blur(25px);
-}
-
-.stat-card:hover::after {
-    opacity: 1;
-    height: 4px;
-}
-
-.stat-header {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.stat-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 52px;
-    height: 52px;
-    border-radius: 14px;
-    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(139, 92, 246, 0.2));
-    flex-shrink: 0;
-    border: 2px solid rgba(0, 212, 255, 0.3);
-    box-shadow: 
-        inset 0 1px 2px rgba(255, 255, 255, 0.2),
-        inset 0 -1px 2px rgba(0, 0, 0, 0.3),
-        0 4px 12px rgba(0, 212, 255, 0.3),
-        0 0 20px rgba(0, 212, 255, 0.2);
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    color: #00D4FF;
-    overflow: visible;
-}
-
-.stat-icon::after {
-    content: '';
-    position: absolute;
-    inset: -2px;
-    border-radius: 16px;
-    background: linear-gradient(135deg, rgba(0, 212, 255, 0.4), rgba(139, 92, 246, 0.4));
-    opacity: 0;
-    filter: blur(12px);
-    transition: opacity 0.4s ease;
-    z-index: -1;
-}
-
-.stat-icon::before {
-    content: '';
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    right: 2px;
-    height: 50%;
-    border-radius: 12px 12px 0 0;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent);
-    pointer-events: none;
-}
-
-.stat-icon svg {
-    position: relative;
-    z-index: 1;
-    width: 22px;
-    height: 22px;
-    opacity: 0.85;
-    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
-}
-
-.stat-card:hover .stat-icon {
-    box-shadow: 
-        inset 0 1px 2px rgba(255, 255, 255, 0.25),
-        inset 0 -1px 2px rgba(0, 0, 0, 0.4),
-        0 8px 24px rgba(0, 212, 255, 0.5),
-        0 0 40px rgba(0, 212, 255, 0.4),
-        0 0 60px rgba(139, 92, 246, 0.3);
-    border-color: rgba(0, 212, 255, 0.6);
-    background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(139, 92, 246, 0.3));
-}
-
-.stat-card:hover .stat-icon::after {
-    opacity: 0.8;
-    filter: blur(16px);
-}
-
-.stat-card:hover .stat-icon svg {
-    opacity: 1;
-}
-
 .stat-card h3 {
-    font-size: 0.8125rem;
-    font-weight: 700;
+    font-size: 0.9rem;
     text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: rgba(255, 255, 255, 0.7);
-    margin: 0;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
 }
 
 .stat-value {
-    font-size: 2rem;
-    font-weight: 800;
-    margin: 0;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    letter-spacing: -0.03em;
-    line-height: 1.1;
-    background: linear-gradient(135deg, #ffffff 0%, #00D4FF 50%, #8B5CF6 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    position: relative;
-    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.4));
-    text-shadow: 
-        0 2px 12px rgba(0, 0, 0, 0.5),
-        0 0 30px rgba(0, 212, 255, 0.3);
-}
-
-.stat-card:hover .stat-value {
-    filter: drop-shadow(0 0 12px rgba(0, 212, 255, 0.6)) drop-shadow(0 0 24px rgba(139, 92, 246, 0.4));
-    background: linear-gradient(135deg, #ffffff 0%, #00D4FF 30%, #8B5CF6 70%, #EC4899 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.stat-value-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    margin: 0.5rem 0;
-}
-
-.stat-change {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    font-size: 0.8125rem;
-    font-weight: 600;
-    font-family: 'Manrope', sans-serif;
-    width: fit-content;
-    transition: all 0.2s ease;
-}
-
-.change-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    opacity: 0.8;
-}
-
-.change-icon-wrapper.positive {
-    color: #22c55e;
-}
-
-.change-icon-wrapper.negative {
-    color: #ef4444;
-}
-
-.stat-change.positive {
-    color: #4ade80;
-    background: rgba(34, 197, 94, 0.2);
-    padding: 4px 10px;
-    border-radius: 8px;
-    border: 1px solid rgba(34, 197, 94, 0.4);
-    box-shadow: 
-        0 2px 8px rgba(34, 197, 94, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.1);
-    text-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
-    font-weight: 700;
-}
-
-.stat-change.negative {
-    color: #f87171;
-    background: rgba(239, 68, 68, 0.2);
-    padding: 4px 10px;
-    border-radius: 8px;
-    border: 1px solid rgba(239, 68, 68, 0.4);
-    box-shadow: 
-        0 2px 8px rgba(239, 68, 68, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.1);
-    text-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
-    font-weight: 700;
-}
-
-.change-value {
+    font-size: 1.9rem;
     font-weight: 600;
-    letter-spacing: 0.01em;
-}
-
-.stat-metrics {
-    display: flex;
-    gap: 1rem;
-    margin-top: auto;
-    padding-top: 1rem;
-    border-top: 2px solid rgba(255, 255, 255, 0.12);
-    background: linear-gradient(90deg, 
-        transparent,
-        rgba(0, 212, 255, 0.05),
-        rgba(139, 92, 246, 0.05),
-        transparent);
-    margin-left: -20px;
-    margin-right: -20px;
-    padding-left: 20px;
-    padding-right: 20px;
-    border-radius: 0 0 20px 20px;
-}
-
-.stat-metric {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-    flex: 1;
-}
-
-.stat-metric .metric-label {
-    font-size: 0.7rem;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 700;
-    font-family: 'Manrope', sans-serif;
-    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-}
-
-.stat-metric .metric-value {
-    font-size: 0.9375rem;
-    font-weight: 700;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    color: rgba(255, 255, 255, 0.9);
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
-}
-
-.metric-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 18px;
-    height: 18px;
-    border-radius: 4px;
-    font-size: 0.75rem;
-    font-weight: 700;
-    flex-shrink: 0;
-}
-
-.metric-icon.positive {
-    background: rgba(34, 197, 94, 0.3);
-    color: #4ade80;
-    border: 1px solid rgba(34, 197, 94, 0.5);
-    box-shadow: 
-        0 2px 8px rgba(34, 197, 94, 0.4),
-        inset 0 1px 0 rgba(255, 255, 255, 0.2);
-    text-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
-}
-
-.metric-icon.negative {
-    background: rgba(239, 68, 68, 0.3);
-    color: #f87171;
-    border: 1px solid rgba(239, 68, 68, 0.5);
-    box-shadow: 
-        0 2px 8px rgba(239, 68, 68, 0.4),
-        inset 0 1px 0 rgba(255, 255, 255, 0.2);
-    text-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
-}
-
-.stat-metric .metric-value.positive {
-    color: #4ade80;
-    text-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
-    font-weight: 800;
-}
-
-.stat-metric .metric-value.negative {
-    color: #f87171;
-    text-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
-    font-weight: 800;
+    margin: 12px 0 6px;
 }
 
 .stat-trend {
     display: flex;
     align-items: center;
     gap: 6px;
-    font-size: 0.8125rem;
-    color: var(--text-faint);
-    font-family: 'Manrope', sans-serif;
-    font-weight: 500;
-    margin-top: auto;
-    letter-spacing: 0.02em;
+    font-size: 0.85rem;
 }
 
 .grid-two {
@@ -1324,153 +268,35 @@ body[data-theme='light'] {
     gap: 20px;
 }
 
-.grid-three {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 18px;
-}
-
-.grid-four {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    gap: 18px;
-}
-
 .table-wrapper {
     overflow: auto;
 }
 
 table {
     width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
+    border-collapse: collapse;
 }
 
 th, td {
     text-align: left;
-    padding: 12px 14px;
-    font-size: 0.8125rem;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
+    padding: 12px 10px;
+    font-size: 0.92rem;
 }
 
 th {
-    font-size: 0.7rem;
-    font-weight: 700;
-    letter-spacing: 0.06em;
+    font-size: 0.8rem;
+    letter-spacing: 0.05em;
     color: var(--text-muted);
     text-transform: uppercase;
-    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
-    background: rgba(255, 255, 255, 0.03);
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    white-space: nowrap;
-}
-
-th:first-child {
-    border-top-left-radius: 12px;
-    padding-left: 16px;
-}
-
-th:last-child {
-    border-top-right-radius: 12px;
-    padding-right: 16px;
-}
-
-td {
-    font-weight: 500;
-    color: var(--text-primary);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    vertical-align: middle;
-}
-
-td:first-child {
-    padding-left: 16px;
-    font-weight: 600;
-    color: var(--text-muted);
-    font-size: 0.75rem;
-}
-
-td:last-child {
-    padding-right: 16px;
 }
 
 tr {
-    transition: all 0.2s ease;
-}
-
-tbody tr {
-    border-left: 2px solid transparent;
-    transition: all 0.2s ease;
+    transition: background 0.3s ease, transform 0.3s ease;
 }
 
 tbody tr:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border-left-color: rgba(143, 136, 255, 0.4);
-    transform: translateX(2px);
-}
-
-tbody tr:last-child td:first-child {
-    border-bottom-left-radius: 12px;
-}
-
-tbody tr:last-child td:last-child {
-    border-bottom-right-radius: 12px;
-}
-
-tbody tr:last-child td {
-    border-bottom: none;
-}
-
-td.text-success,
-td.text-danger {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-weight: 600;
-    font-size: 0.8125rem;
-}
-
-td.text-success {
-    color: #22c55e;
-}
-
-td.text-danger {
-    color: #ef4444;
-}
-
-.table-change-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    opacity: 0.9;
-}
-
-.table-change-icon.positive {
-    color: #22c55e;
-}
-
-.table-change-icon.negative {
-    color: #ef4444;
-}
-
-/* Chip styling for symbol column */
-.chip {
-    display: inline-flex;
-    align-items: center;
-    padding: 4px 10px;
-    background: rgba(143, 136, 255, 0.1);
-    border: 1px solid rgba(143, 136, 255, 0.2);
-    border-radius: 6px;
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: var(--primary-light);
-    font-family: 'Manrope', sans-serif;
-    letter-spacing: 0.02em;
-    text-transform: uppercase;
+    background: rgba(255, 255, 255, 0.04);
+    transform: translateY(-1px);
 }
 
 .badge {
@@ -1541,275 +367,51 @@ td.text-danger {
 
 .input-chip {
     border: 1px solid var(--glass-border);
-    background: rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.03);
     border-radius: 999px;
     padding: 8px 14px;
     color: var(--text-muted);
     display: inline-flex;
     align-items: center;
     gap: 10px;
-    font-family: 'Inter', sans-serif;
-    font-size: 0.875rem;
 }
 
-.search-bar {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    align-items: center;
-    margin-bottom: 20px;
-    padding: 16px;
-    background: var(--glass-bg);
+input[type='text'], select, textarea {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.02);
     border: 1px solid var(--glass-border);
-    border-radius: 16px;
-    backdrop-filter: blur(10px);
+    border-radius: 14px;
+    padding: 12px 14px;
+    color: var(--text-primary);
+    font-family: inherit;
 }
 
-.button-group {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-}
-
-input[type='text'], select, textarea {
-    width: 100%;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid var(--glass-border);
-    border-radius: 12px;
-    padding: 12px 16px;
-    color: var(--text-primary);
-    font-family: 'Inter', sans-serif;
-    font-size: 0.9375rem;
-    transition: all 0.2s ease;
-}
-
-input[type='text']:focus, select:focus, textarea:focus {
-    outline: none;
-    border-color: var(--primary);
-    background: rgba(255, 255, 255, 0.08);
-    box-shadow: 0 0 0 3px rgba(143, 136, 255, 0.2);
-}
-
-textarea {
-    min-height: 100px;
+textarea {
+    min-height: 100px;
 }
 
 button.primary {
     background: linear-gradient(120deg, var(--primary), var(--secondary));
     border: none;
-    border-radius: 10px;
+    border-radius: 999px;
     color: #fff;
-    padding: 10px 14px;
-    font-weight: 500;
-    font-family: 'Manrope', sans-serif;
-    font-size: 0.875rem;
+    padding: 12px 24px;
+    font-weight: 600;
     cursor: pointer;
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 
-        inset 0 1px 2px rgba(255, 255, 255, 0.1),
-        0 2px 8px rgba(143, 136, 255, 0.2);
-    position: relative;
-    overflow: visible;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-button.primary::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 50%;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
-    border-radius: 12px 12px 0 0;
-    pointer-events: none;
+    transition: transform 0.3s ease;
 }
 
 button.primary:hover {
-    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 50%, #7c3aed 100%);
-    box-shadow: 
-        0 6px 20px rgba(59, 130, 246, 0.5),
-        inset 0 1px 0 rgba(255, 255, 255, 0.4),
-        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-}
-
-button.primary:hover::before {
-    height: 50%;
-    opacity: 1;
-}
-
-button.primary:active {
-    box-shadow: 
-        0 2px 8px rgba(59, 130, 246, 0.4),
-        inset 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-button.secondary {
-    background: rgba(255, 255, 255, 0.95);
-    border: 2px solid #3b82f6;
-    border-radius: 12px;
-    color: #3b82f6;
-    padding: 14px 28px;
-    font-weight: 700;
-    font-family: 'Manrope', sans-serif;
-    font-size: 0.875rem;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    box-shadow: 
-        0 2px 8px rgba(59, 130, 246, 0.2),
-        inset 0 1px 0 rgba(255, 255, 255, 0.8);
-}
-
-button.secondary::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 50%;
-    background: linear-gradient(180deg, rgba(59, 130, 246, 0.1), transparent);
-    border-radius: 12px 12px 0 0;
-    pointer-events: none;
-}
-
-button.secondary::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 2px;
-    height: 0;
-    background: var(--primary);
-    border-radius: 0 2px 2px 0;
-    transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    opacity: 0;
-}
-
-button.secondary::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: rgba(143, 136, 255, 0.05);
-    border-radius: 10px;
-    opacity: 0;
-    transition: opacity 0.25s ease;
-    z-index: -1;
-}
-
-button.secondary:hover {
-    background: #3b82f6;
-    color: #ffffff;
-    box-shadow: 
-        0 4px 16px rgba(59, 130, 246, 0.4),
-        inset 0 1px 0 rgba(255, 255, 255, 0.3);
-}
-
-button.secondary:hover::before {
-    height: 50%;
-    opacity: 1;
-}
-
-button.secondary:hover::after {
-    opacity: 1;
-}
-
-button.secondary.active {
-    background: rgba(143, 136, 255, 0.12);
-    border-color: rgba(143, 136, 255, 0.2);
-    color: var(--text-primary);
-    font-weight: 600;
-    box-shadow: 
-        inset 0 1px 2px rgba(255, 255, 255, 0.1),
-        0 2px 8px rgba(143, 136, 255, 0.2);
-}
-
-button.secondary.active::before {
-    height: 60%;
-    opacity: 1;
-    box-shadow: 0 0 8px rgba(143, 136, 255, 0.5);
+    transform: translateY(-2px) scale(1.01);
 }
 
 button.ghost {
-    background: rgba(255, 255, 255, 0.9);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 10px;
-    padding: 10px 16px;
-    color: #475569;
-    font-weight: 600;
-    font-family: 'Manrope', sans-serif;
-    font-size: 0.875rem;
+    background: transparent;
+    border: 1px solid var(--glass-border);
+    border-radius: 999px;
+    padding: 10px 20px;
+    color: inherit;
     cursor: pointer;
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-    position: relative;
-    overflow: visible;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-button.ghost::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 2px;
-    height: 0;
-    background: var(--primary);
-    border-radius: 0 2px 2px 0;
-    transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    opacity: 0;
-}
-
-button.ghost::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: rgba(143, 136, 255, 0.05);
-    border-radius: 10px;
-    opacity: 0;
-    transition: opacity 0.25s ease;
-    z-index: -1;
-}
-
-button.ghost:hover {
-    background: rgba(255, 255, 255, 1);
-    border-color: rgba(59, 130, 246, 0.3);
-    color: #3b82f6;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-}
-
-button.ghost:hover::before {
-    height: 50%;
-    opacity: 1;
-}
-
-button.ghost:hover::after {
-    opacity: 1;
-}
-
-button.ghost.active {
-    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.12));
-    border-color: rgba(59, 130, 246, 0.4);
-    color: #3b82f6;
-    box-shadow: 
-        inset 0 1px 2px rgba(255, 255, 255, 0.3),
-        0 2px 8px rgba(59, 130, 246, 0.3);
-}
-
-button.ghost.active::before {
-    height: 60%;
-    opacity: 1;
-    box-shadow: 0 0 8px rgba(143, 136, 255, 0.5);
 }
 
 .skeleton {
@@ -1900,107 +502,6 @@ button.ghost.active::before {
     font-size: 0.75rem;
 }
 
-.backend-info-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 16px;
-}
-
-.backend-info-item {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 16px;
-    background: rgba(255, 255, 255, 0.95);
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    border-radius: 12px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.backend-info-item:hover {
-    background: rgba(255, 255, 255, 1);
-    border-color: rgba(59, 130, 246, 0.3);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-}
-
-.info-label {
-    font-size: 0.75rem;
-    font-weight: 700;
-    color: #64748b;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-}
-
-.info-value {
-    font-size: 1.125rem;
-    font-weight: 700;
-    color: #0f172a;
-    font-family: 'Manrope', sans-serif;
-}
-
-.fear-greed-card {
-    position: relative;
-    overflow: hidden;
-}
-
-.fear-greed-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: linear-gradient(90deg, #EF4444 0%, #F97316 25%, #3B82F6 50%, #8B5CF6 75%, #6366F1 100%);
-    opacity: 0.6;
-}
-
-.fear-greed-value {
-    font-size: 2.5rem !important;
-    font-weight: 800 !important;
-    line-height: 1;
-}
-
-.fear-greed-classification {
-    font-size: 0.875rem;
-    font-weight: 600;
-    margin-top: 8px;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.fear-greed-gauge {
-    margin-top: 16px;
-}
-
-.gauge-bar {
-    background: linear-gradient(90deg, #EF4444 0%, #F97316 25%, #3B82F6 50%, #8B5CF6 75%, #6366F1 100%);
-    height: 8px;
-    border-radius: 4px;
-    position: relative;
-    overflow: visible;
-}
-
-.gauge-indicator {
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 16px;
-    height: 16px;
-    border: 2px solid #fff;
-    border-radius: 50%;
-    box-shadow: 0 0 8px currentColor;
-    transition: left 0.3s ease;
-}
-
-.gauge-labels {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 8px;
-    font-size: 0.75rem;
-    color: var(--text-muted);
-}
-
 .toggle {
     position: relative;
     width: 44px;
@@ -2040,665 +541,11 @@ button.ghost.active::before {
     100% { background: transparent; }
 }
 
-.table-container {
-    overflow-x: auto;
-    border-radius: 16px;
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid var(--glass-border);
-}
-
-.chip {
-    display: inline-flex;
-    align-items: center;
-    padding: 6px 12px;
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.08);
-    font-size: 0.8125rem;
-    font-weight: 500;
-    font-family: 'Inter', sans-serif;
-    color: var(--text-primary);
-}
-
-/* Modern Sentiment UI - Professional Design */
-.sentiment-modern {
-    display: flex;
-    flex-direction: column;
-    gap: 1.75rem;
-}
-
-.sentiment-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.75rem;
-    padding-bottom: 1rem;
-    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
-}
-
-.sentiment-header h4 {
-    margin: 0;
-    font-size: 1.25rem;
-    font-weight: 700;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    letter-spacing: -0.02em;
-    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.sentiment-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 6px 14px;
-    border-radius: 999px;
-    background: linear-gradient(135deg, rgba(143, 136, 255, 0.25), rgba(22, 217, 250, 0.25));
-    border: 1px solid rgba(143, 136, 255, 0.4);
-    font-size: 0.75rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--primary-light);
-    box-shadow: 0 4px 12px rgba(143, 136, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
-    font-family: 'Manrope', sans-serif;
-}
-
-.sentiment-cards {
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
-}
-
-.sentiment-item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    padding: 1.25rem;
-    background: rgba(255, 255, 255, 0.04);
-    border-radius: 16px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
-}
-
-.sentiment-item::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 4px;
-    height: 100%;
-    background: currentColor;
-    opacity: 0.6;
-    transform: scaleY(0);
-    transform-origin: bottom;
-    transition: transform 0.3s ease;
-}
-
-.sentiment-item:hover {
-    background: rgba(255, 255, 255, 0.08);
-    border-color: rgba(255, 255, 255, 0.15);
-    transform: translateX(6px) translateY(-2px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-}
-
-.sentiment-item:hover::before {
-    transform: scaleY(1);
-}
-
-.sentiment-item-header {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.sentiment-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 12px;
-    flex-shrink: 0;
-    transition: all 0.3s ease;
-}
-
-.sentiment-item:hover .sentiment-icon {
-    transform: scale(1.15) rotate(5deg);
-}
-
-.sentiment-item.bullish {
-    color: #22c55e;
-}
-
-.sentiment-item.bullish .sentiment-icon {
-    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(16, 185, 129, 0.2));
-    color: #22c55e;
-    border: 1px solid rgba(34, 197, 94, 0.3);
-    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-}
-
-.sentiment-item.neutral {
-    color: #38bdf8;
-}
-
-.sentiment-item.neutral .sentiment-icon {
-    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(14, 165, 233, 0.2));
-    color: #38bdf8;
-    border: 1px solid rgba(56, 189, 248, 0.3);
-    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-}
-
-.sentiment-item.bearish {
-    color: #ef4444;
-}
-
-.sentiment-item.bearish .sentiment-icon {
-    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.2));
-    color: #ef4444;
-    border: 1px solid rgba(239, 68, 68, 0.3);
-    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-}
-
-.sentiment-label {
-    flex: 1;
-    font-size: 1rem;
-    font-weight: 600;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    color: var(--text-primary);
-    letter-spacing: -0.01em;
-}
-
-.sentiment-percent {
-    font-size: 1.125rem;
-    font-weight: 800;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    color: var(--text-primary);
-    letter-spacing: -0.02em;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.sentiment-progress {
-    width: 100%;
-    height: 10px;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 999px;
-    overflow: hidden;
-    position: relative;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
-}
-
-.sentiment-progress-bar {
-    height: 100%;
-    border-radius: 999px;
-    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
-    position: relative;
-    overflow: hidden;
-}
-
-.sentiment-progress-bar::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-    animation: shimmer 2s infinite;
-}
-
-@keyframes shimmer {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(100%); }
-}
-
-.sentiment-summary {
-    display: flex;
-    gap: 2rem;
-    padding: 1.25rem;
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 14px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
-}
-
-.sentiment-summary-item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    flex: 1;
-}
-
-.summary-label {
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--text-muted);
-    font-weight: 600;
-    font-family: 'Manrope', sans-serif;
-}
-
-.summary-value {
-    font-size: 1.5rem;
-    font-weight: 800;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    letter-spacing: -0.02em;
-    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-.summary-value.bullish {
-    color: #22c55e;
-    text-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
-}
-
-.summary-value.neutral {
-    color: #38bdf8;
-    text-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
-}
-
-.summary-value.bearish {
-    color: #ef4444;
-    text-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
-}
-
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(8px); }
     to { opacity: 1; transform: translateY(0); }
 }
 
-/* Chart Lab Styles */
-.chart-controls {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    padding: 1.5rem;
-    background: var(--glass-bg);
-    border: 1px solid var(--glass-border);
-    border-radius: 20px;
-    backdrop-filter: blur(20px);
-}
-
-.chart-label {
-    display: block;
-    font-size: 0.8125rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--text-muted);
-    margin-bottom: 0.5rem;
-    font-family: 'Manrope', sans-serif;
-}
-
-.chart-symbol-selector {
-    flex: 1;
-}
-
-.combobox-wrapper {
-    position: relative;
-}
-
-.combobox-input {
-    width: 100%;
-    padding: 12px 16px;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid var(--glass-border);
-    border-radius: 12px;
-    color: var(--text-primary);
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    font-size: 0.9375rem;
-    transition: all 0.2s ease;
-}
-
-.combobox-input:focus {
-    outline: none;
-    border-color: var(--primary);
-    background: rgba(255, 255, 255, 0.08);
-    box-shadow: 0 0 0 3px rgba(143, 136, 255, 0.2);
-}
-
-.combobox-dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    margin-top: 0.5rem;
-    background: var(--glass-bg);
-    border: 1px solid var(--glass-border);
-    border-radius: 12px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(20px);
-    z-index: 100;
-    max-height: 300px;
-    overflow-y: auto;
-}
-
-.combobox-options {
-    padding: 0.5rem;
-}
-
-.combobox-option {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 14px;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-family: 'Manrope', sans-serif;
-}
-
-.combobox-option:hover {
-    background: rgba(255, 255, 255, 0.1);
-    transform: translateX(4px);
-}
-
-.combobox-option.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.combobox-option strong {
-    font-weight: 700;
-    color: var(--text-primary);
-    font-size: 0.9375rem;
-}
-
-.combobox-option span {
-    color: var(--text-muted);
-    font-size: 0.875rem;
-}
-
-.chart-timeframe-selector {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.chart-actions {
-    display: flex;
-    align-items: flex-end;
-}
-
-.chart-container {
-    padding: 1.5rem;
-    background: rgba(0, 0, 0, 0.15);
-    border-radius: 16px;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.chart-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1.5rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.chart-header h4 {
-    margin: 0;
-}
-
-.chart-legend {
-    display: flex;
-    gap: 2rem;
-    flex-wrap: wrap;
-}
-
-.legend-item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-}
-
-.legend-label {
-    font-size: 0.7rem;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    color: rgba(226, 232, 240, 0.5);
-    font-weight: 600;
-    font-family: 'Manrope', sans-serif;
-}
-
-.legend-value {
-    font-size: 1rem;
-    font-weight: 600;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    color: var(--text-primary);
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-}
-
-.legend-arrow {
-    font-size: 0.875rem;
-    opacity: 0.8;
-}
-
-.legend-value.positive {
-    color: #26a69a;
-}
-
-.legend-value.negative {
-    color: #ef5350;
-}
-
-.chart-wrapper {
-    position: relative;
-    height: 450px;
-    padding: 0;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 12px;
-    overflow: hidden;
-}
-
-.chart-wrapper canvas {
-    padding: 12px;
-}
-
-.chart-loading {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 12px;
-    z-index: 10;
-}
-
-.loading-spinner {
-    width: 40px;
-    height: 40px;
-    border: 3px solid rgba(255, 255, 255, 0.1);
-    border-top-color: var(--primary);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    to { transform: rotate(360deg); }
-}
-
-.indicator-selector {
-    margin-top: 1rem;
-}
-
-.indicator-selector .button-group {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-    gap: 0.75rem;
-}
-
-.indicator-selector button {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 12px 16px;
-}
-
-.indicator-selector button span {
-    font-weight: 600;
-    font-size: 0.9375rem;
-}
-
-.indicator-selector button small {
-    font-size: 0.75rem;
-    opacity: 0.7;
-    font-weight: 400;
-}
-
-.analysis-output {
-    margin-top: 1.5rem;
-    padding-top: 1.5rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.analysis-loading {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    padding: 2rem;
-}
-
-.analysis-results {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-}
-
-.analysis-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.analysis-header h5 {
-    margin: 0;
-    font-size: 1.125rem;
-    font-weight: 700;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-}
-
-.analysis-badge {
-    padding: 4px 12px;
-    border-radius: 999px;
-    font-size: 0.75rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.analysis-badge.bullish {
-    background: rgba(34, 197, 94, 0.2);
-    color: var(--success);
-    border: 1px solid rgba(34, 197, 94, 0.3);
-}
-
-.analysis-badge.bearish {
-    background: rgba(239, 68, 68, 0.2);
-    color: var(--danger);
-    border: 1px solid rgba(239, 68, 68, 0.3);
-}
-
-.analysis-badge.neutral {
-    background: rgba(56, 189, 248, 0.2);
-    color: var(--info);
-    border: 1px solid rgba(56, 189, 248, 0.3);
-}
-
-.analysis-metrics {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 1rem;
-}
-
-.metric-item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    padding: 1rem;
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.metric-label {
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--text-muted);
-    font-weight: 600;
-}
-
-.metric-value {
-    font-size: 1.25rem;
-    font-weight: 700;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    color: var(--text-primary);
-}
-
-.metric-value.positive {
-    color: var(--success);
-}
-
-.metric-value.negative {
-    color: var(--danger);
-}
-
-.analysis-summary,
-.analysis-signals {
-    padding: 1rem;
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.analysis-summary h6,
-.analysis-signals h6 {
-    margin: 0 0 0.75rem 0;
-    font-size: 0.9375rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--text-muted);
-}
-
-.analysis-summary p {
-    margin: 0;
-    line-height: 1.6;
-    color: var(--text-secondary);
-}
-
-.analysis-signals ul {
-    margin: 0;
-    padding-left: 1.5rem;
-    list-style: disc;
-}
-
-.analysis-signals li {
-    margin-bottom: 0.5rem;
-    color: var(--text-secondary);
-    line-height: 1.6;
-}
-
-.analysis-signals li strong {
-    color: var(--text-primary);
-    font-weight: 600;
-}
-
 @keyframes shimmer {
     100% { transform: translateX(100%); }
 }

static/js/aiAdvisorView.js

@@ -1,94 +1,129 @@
 import apiClient from './apiClient.js';
+import { formatCurrency, formatPercent } from './uiUtils.js';
 
 class AIAdvisorView {
     constructor(section) {
         this.section = section;
-        this.queryForm = section?.querySelector('[data-query-form]');
-        this.sentimentForm = section?.querySelector('[data-sentiment-form]');
-        this.queryOutput = section?.querySelector('[data-query-output]');
-        this.sentimentOutput = section?.querySelector('[data-sentiment-output]');
+        this.form = section?.querySelector('[data-ai-form]');
+        this.decisionContainer = section?.querySelector('[data-ai-result]');
+        this.sentimentContainer = section?.querySelector('[data-sentiment-result]');
+        this.disclaimer = section?.querySelector('[data-ai-disclaimer]');
+        this.contextInput = section?.querySelector('textarea[name="context"]');
+        this.modelSelect = section?.querySelector('select[name="model"]');
     }
 
     init() {
-        if (this.queryForm) {
-            this.queryForm.addEventListener('submit', async (event) => {
-                event.preventDefault();
-                const formData = new FormData(this.queryForm);
-                await this.handleQuery(formData);
-            });
-        }
-        if (this.sentimentForm) {
-            this.sentimentForm.addEventListener('submit', async (event) => {
-                event.preventDefault();
-                const formData = new FormData(this.sentimentForm);
-                await this.handleSentiment(formData);
-            });
-        }
+        if (!this.form) return;
+        this.form.addEventListener('submit', async (event) => {
+            event.preventDefault();
+            const formData = new FormData(this.form);
+            await this.handleSubmit(formData);
+        });
     }
 
-    async handleQuery(formData) {
-        const query = formData.get('query') || '';
-        if (!query.trim()) return;
-        
-        if (this.queryOutput) {
-            this.queryOutput.innerHTML = '<p>Processing query...</p>';
+    async handleSubmit(formData) {
+        const symbol = formData.get('symbol') || 'BTC';
+        const horizon = formData.get('horizon') || 'swing';
+        const risk = formData.get('risk') || 'moderate';
+        const context = (formData.get('context') || '').trim();
+        const mode = formData.get('model') || 'auto';
+
+        if (this.decisionContainer) {
+            this.decisionContainer.innerHTML = '<p>Generating AI strategy...</p>';
         }
-        
-        const result = await apiClient.runQuery({ query });
-        if (!result.ok) {
-            if (this.queryOutput) {
-                this.queryOutput.innerHTML = `<div class="inline-message inline-error">${result.error}</div>`;
-            }
-            return;
+        if (this.sentimentContainer && context) {
+            this.sentimentContainer.innerHTML = '<p>Running sentiment model...</p>';
         }
-        
-        // Backend returns {success: true, type: ..., message: ..., data: ...}
-        const data = result.data || {};
-        if (this.queryOutput) {
-            this.queryOutput.innerHTML = `
-                <div class="glass-card">
-                    <h4>AI Response</h4>
-                    <p><strong>Type:</strong> ${data.type || 'general'}</p>
-                    <p>${data.message || 'Query processed'}</p>
-                    ${data.data ? `<pre>${JSON.stringify(data.data, null, 2)}</pre>` : ''}
-                </div>
-            `;
+
+        const decisionPayload = {
+            query: `Provide ${horizon} outlook for ${symbol} with ${risk} risk. ${context}`,
+            symbol,
+            task: 'decision',
+            options: { horizon, risk },
+        };
+
+        const jobs = [apiClient.runQuery(decisionPayload)];
+        if (context) {
+            jobs.push(apiClient.analyzeSentiment({ text: context, mode }));
         }
-    }
 
-    async handleSentiment(formData) {
-        const text = formData.get('text') || '';
-        if (!text.trim()) return;
-        
-        if (this.sentimentOutput) {
-            this.sentimentOutput.innerHTML = '<p>Analyzing sentiment...</p>';
+        const [decisionResult, sentimentResult] = await Promise.all(jobs);
+
+        if (!decisionResult.ok) {
+            this.decisionContainer.innerHTML = `<div class="inline-message inline-error">${decisionResult.error}</div>`;
+        } else {
+            this.renderDecisionResult(decisionResult.data || {});
         }
-        
-        const result = await apiClient.analyzeSentiment({ text });
-        if (!result.ok) {
-            if (this.sentimentOutput) {
-                this.sentimentOutput.innerHTML = `<div class="inline-message inline-error">${result.error}</div>`;
+
+        if (context && this.sentimentContainer) {
+            if (!sentimentResult?.ok) {
+                this.sentimentContainer.innerHTML = `<div class="inline-message inline-error">${sentimentResult?.error || 'AI sentiment endpoint unavailable'}</div>`;
+            } else {
+                this.renderSentimentResult(sentimentResult.data || sentimentResult);
             }
-            return;
         }
-        
-        // Backend returns {success: true, sentiment: ..., confidence: ..., details: ...}
-        const data = result.data || {};
-        const sentiment = data.sentiment || 'neutral';
-        const confidence = data.confidence || 0;
-        
-        if (this.sentimentOutput) {
-            this.sentimentOutput.innerHTML = `
-                <div class="glass-card">
-                    <h4>Sentiment Analysis</h4>
-                    <p><strong>Label:</strong> <span class="chip">${sentiment}</span></p>
-                    <p><strong>Confidence:</strong> ${(confidence * 100).toFixed(1)}%</p>
-                    ${data.details ? `<pre style="font-size: 0.875rem;">${JSON.stringify(data.details, null, 2)}</pre>` : ''}
+    }
+
+    renderDecisionResult(response) {
+        if (!this.decisionContainer) return;
+        const payload = response.data || {};
+        const analysis = payload.analysis || payload;
+        const summary = analysis.summary?.summary || analysis.summary || 'No summary provided.';
+        const signals = analysis.signals || {};
+        const topCoins = (payload.top_coins || []).slice(0, 3);
+
+        this.decisionContainer.innerHTML = `
+            <div class="ai-result">
+                <p class="text-muted">${response.message || 'Decision support summary'}</p>
+                <p>${summary}</p>
+                <div class="grid-two">
+                    <div>
+                        <h4>Market Signals</h4>
+                        <ul>
+                            ${Object.entries(signals)
+                                .map(([, value]) => `<li>${value?.label || 'neutral'} (${value?.score ?? '—'})</li>`)
+                                .join('') || '<li>No model signals.</li>'}
+                        </ul>
+                    </div>
+                    <div>
+                        <h4>Watchlist</h4>
+                        <ul>
+                            ${topCoins
+                                .map(
+                                    (coin) =>
+                                        `<li>${coin.symbol || coin.ticker}: ${formatCurrency(coin.price)} (${formatPercent(coin.change_24h)})</li>`,
+                                )
+                                .join('') || '<li>No coin highlights.</li>'}
+                        </ul>
+                    </div>
                 </div>
-            `;
+            </div>
+        `;
+        if (this.disclaimer) {
+            this.disclaimer.textContent =
+                response.data?.disclaimer || 'This AI output is experimental research and not financial advice.';
         }
     }
 
+    renderSentimentResult(result) {
+        const container = this.sentimentContainer;
+        if (!container) return;
+        const payload = result.result || result;
+        const signals = result.signals || payload.signals || {};
+        container.innerHTML = `
+            <div class="glass-card">
+                <h4>Sentiment (${result.mode || 'auto'})</h4>
+                <p><strong>Label:</strong> ${payload.label || payload.classification || 'neutral'}</p>
+                <p><strong>Score:</strong> ${payload.score ?? payload.sentiment?.score ?? '—'}</p>
+                <div class="chip-row">
+                    ${Object.entries(signals)
+                        .map(([key, value]) => `<span class="chip">${key}: ${value?.label || 'n/a'}</span>`)
+                        .join('') || ''}
+                </div>
+                <p>${payload.summary?.summary || payload.summary?.summary_text || payload.summary || ''}</p>
+            </div>
+        `;
+    }
 }
 
 export default AIAdvisorView;

static/js/apiClient.js

@@ -2,16 +2,8 @@ const DEFAULT_TTL = 60 * 1000; // 1 minute cache
 
 class ApiClient {
     constructor() {
-        // ==== آدرس صحیح بک‌اند شما (Really-amin) ====
-        this.baseURL = 'https://really-amin-datasourceforcryptocurrency.hf.space';
-        
-        // اگر بعداً بخوای دستی عوض کنی، از HTML استفاده کن
-        if (typeof window.BACKEND_URL === 'string' && window.BACKEND_URL.trim()) {
-            this.baseURL = window.BACKEND_URL.trim().replace(/\/$/, '');
-        }
-
-        console.log('[ApiClient] Using Backend:', this.baseURL);
-
+        const origin = window?.location?.origin ?? '';
+        this.baseURL = origin.replace(/\/$/, '');
         this.cache = new Map();
         this.requestLogs = [];
         this.errorLogs = [];
@@ -136,66 +128,24 @@ class ApiClient {
     }
 
     // ===== Specific API helpers =====
-    // Note: Backend uses api_server_extended.py which has different endpoints
-    
     getHealth() {
-        // Backend doesn't have /api/health, use /api/status instead
-        return this.get('/api/status');
+        return this.get('/api/health');
     }
 
     getTopCoins(limit = 10) {
-        // Backend uses /api/market which returns cryptocurrencies array
-        return this.get('/api/market').then(result => {
-            if (result.ok && result.data && result.data.cryptocurrencies) {
-                return {
-                    ok: true,
-                    data: result.data.cryptocurrencies.slice(0, limit)
-                };
-            }
-            return result;
-        });
+        return this.get(`/api/coins/top?limit=${limit}`);
     }
 
     getCoinDetails(symbol) {
-        // Get from market data and filter by symbol
-        return this.get('/api/market').then(result => {
-            if (result.ok && result.data && result.data.cryptocurrencies) {
-                const coin = result.data.cryptocurrencies.find(
-                    c => c.symbol.toUpperCase() === symbol.toUpperCase()
-                );
-                return coin ? { ok: true, data: coin } : { ok: false, error: 'Coin not found' };
-            }
-            return result;
-        });
+        return this.get(`/api/coins/${symbol}`);
     }
 
     getMarketStats() {
-        // Backend returns stats in /api/market response
-        return this.get('/api/market').then(result => {
-            if (result.ok && result.data) {
-                return {
-                    ok: true,
-                    data: {
-                        total_market_cap: result.data.total_market_cap,
-                        btc_dominance: result.data.btc_dominance,
-                        total_volume_24h: result.data.total_volume_24h,
-                        market_cap_change_24h: result.data.market_cap_change_24h
-                    }
-                };
-            }
-            return result;
-        });
+        return this.get('/api/market/stats');
     }
 
     getLatestNews(limit = 20) {
-        // Backend doesn't have news endpoint yet, return empty for now
-        return Promise.resolve({ 
-            ok: true, 
-            data: { 
-                articles: [],
-                message: 'News endpoint not yet implemented in backend'
-            } 
-        });
+        return this.get(`/api/news/latest?limit=${limit}`);
     }
 
     getProviders() {
@@ -203,110 +153,41 @@ class ApiClient {
     }
 
     getPriceChart(symbol, timeframe = '7d') {
-        // Backend uses /api/market/history
-        const cleanSymbol = encodeURIComponent(String(symbol || 'BTC').trim().toUpperCase());
-        // Map timeframe to limit (rough approximation)
-        const limitMap = { '1d': 24, '7d': 168, '30d': 720, '90d': 2160, '365d': 8760 };
-        const limit = limitMap[timeframe] || 168;
-        return this.get(`/api/market/history?symbol=${cleanSymbol}&limit=${limit}`);
+        return this.get(`/api/charts/price/${symbol}?timeframe=${timeframe}`);
     }
 
     analyzeChart(symbol, timeframe = '7d', indicators = []) {
-        // Not implemented in backend yet
-        return Promise.resolve({ 
-            ok: false, 
-            error: 'Chart analysis not yet implemented in backend' 
-        });
+        return this.post('/api/charts/analyze', { symbol, timeframe, indicators });
     }
 
     runQuery(payload) {
-        // Not implemented in backend yet
-        return Promise.resolve({ 
-            ok: false, 
-            error: 'Query endpoint not yet implemented in backend' 
-        });
+        return this.post('/api/query', payload);
     }
 
     analyzeSentiment(payload) {
-        // Backend has /api/sentiment but it returns market sentiment, not text analysis
-        // For now, return the market sentiment
-        return this.get('/api/sentiment');
+        return this.post('/api/sentiment/analyze', payload);
     }
 
     summarizeNews(item) {
-        // Not implemented in backend yet
-        return Promise.resolve({ 
-            ok: false, 
-            error: 'News summarization not yet implemented in backend' 
-        });
+        return this.post('/api/news/summarize', item);
     }
 
     getDatasetsList() {
-        // Not implemented in backend yet
-        return Promise.resolve({ 
-            ok: true, 
-            data: { 
-                datasets: [],
-                message: 'Datasets endpoint not yet implemented in backend'
-            } 
-        });
+        return this.get('/api/datasets/list');
     }
 
     getDatasetSample(name) {
-        // Not implemented in backend yet
-        return Promise.resolve({ 
-            ok: false, 
-            error: 'Dataset sample not yet implemented in backend' 
-        });
+        return this.get(`/api/datasets/sample?name=${encodeURIComponent(name)}`);
     }
 
     getModelsList() {
-        // Backend has /api/hf/models
-        return this.get('/api/hf/models');
+        return this.get('/api/models/list');
     }
 
     testModel(payload) {
-        // Not implemented in backend yet
-        return Promise.resolve({ 
-            ok: false, 
-            error: 'Model testing not yet implemented in backend' 
-        });
-    }
-    
-    // ===== Additional methods for backend compatibility =====
-    
-    getTrending() {
-        return this.get('/api/trending');
-    }
-    
-    getStats() {
-        return this.get('/api/stats');
-    }
-    
-    getHFHealth() {
-        return this.get('/api/hf/health');
-    }
-    
-    runDiagnostics(autoFix = false) {
-        return this.post('/api/diagnostics/run', { auto_fix: autoFix });
-    }
-    
-    getLastDiagnostics() {
-        return this.get('/api/diagnostics/last');
-    }
-    
-    runAPLScan() {
-        return this.post('/api/apl/run');
-    }
-    
-    getAPLReport() {
-        return this.get('/api/apl/report');
-    }
-    
-    getAPLSummary() {
-        return this.get('/api/apl/summary');
+        return this.post('/api/models/test', payload);
     }
 }
 
 const apiClient = new ApiClient();
-export default apiClient;
+export default apiClient;

static/js/apiExplorerView.js

@@ -54,10 +54,8 @@ class ApiExplorerView {
         if (this.bodyInput) {
             this.bodyInput.value = preset.body || '';
         }
-        const descEl = this.section.querySelector('[data-api-description]');
-        const pathEl = this.section.querySelector('[data-api-path]');
-        if (descEl) descEl.textContent = preset.description;
-        if (pathEl) pathEl.textContent = preset.path;
+        this.section.querySelector('[data-api-description]').textContent = preset.description;
+        this.section.querySelector('[data-api-path]').textContent = preset.path;
     }
 
     async sendRequest() {

static/js/app.js

@@ -1,955 +1,98 @@
-/**
- * ═══════════════════════════════════════════════════════════════════
- * HTS CRYPTO DASHBOARD - UNIFIED APPLICATION
- * Complete JavaScript Logic with WebSocket & API Integration
- * ═══════════════════════════════════════════════════════════════════
- */
-
-// ═══════════════════════════════════════════════════════════════════
-// CONFIGURATION
-// ═══════════════════════════════════════════════════════════════════
-
-const CONFIG = {
-    BACKEND_URL: 'https://really-amin-datasourceforcryptocurrency.hf.space',
-    WS_URL: 'wss://really-amin-datasourceforcryptocurrency.hf.space/ws',
-    UPDATE_INTERVAL: 30000, // 30 seconds
-    CACHE_TTL: 60000, // 1 minute
-};
-
-// ═══════════════════════════════════════════════════════════════════
-// WEBSOCKET CLIENT
-// ═══════════════════════════════════════════════════════════════════
-
-class WebSocketClient {
-    constructor(url) {
-        this.url = url;
-        this.socket = null;
-        this.status = 'disconnected';
-        this.reconnectAttempts = 0;
-        this.maxReconnectAttempts = 5;
-        this.reconnectDelay = 3000;
-        this.listeners = new Map();
-        this.heartbeatInterval = null;
-    }
-
-    connect() {
-        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
-            console.log('[WS] Already connected');
-            return;
-        }
-
-        try {
-            console.log('[WS] Connecting to:', this.url);
-            this.socket = new WebSocket(this.url);
-            
-            this.socket.onopen = this.handleOpen.bind(this);
-            this.socket.onmessage = this.handleMessage.bind(this);
-            this.socket.onerror = this.handleError.bind(this);
-            this.socket.onclose = this.handleClose.bind(this);
-            
-            this.updateStatus('connecting');
-        } catch (error) {
-            console.error('[WS] Connection error:', error);
-            this.scheduleReconnect();
-        }
-    }
-
-    handleOpen() {
-        console.log('[WS] Connected successfully');
-        this.status = 'connected';
-        this.reconnectAttempts = 0;
-        this.updateStatus('connected');
-        this.startHeartbeat();
-        this.emit('connected', true);
-    }
-
-    handleMessage(event) {
-        try {
-            const data = JSON.parse(event.data);
-            console.log('[WS] Message received:', data.type);
-            
-            if (data.type === 'heartbeat') {
-                this.send({ type: 'pong' });
-                return;
-            }
-            
-            this.emit(data.type, data);
-            this.emit('message', data);
-        } catch (error) {
-            console.error('[WS] Message parse error:', error);
-        }
-    }
-
-    handleError(error) {
-        console.error('[WS] Error:', error);
-        this.updateStatus('error');
-    }
-
-    handleClose() {
-        console.log('[WS] Connection closed');
-        this.status = 'disconnected';
-        this.updateStatus('disconnected');
-        this.stopHeartbeat();
-        this.emit('connected', false);
-        this.scheduleReconnect();
-    }
-
-    scheduleReconnect() {
-        if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-            console.error('[WS] Max reconnection attempts reached');
-            return;
-        }
-
-        this.reconnectAttempts++;
-        console.log(`[WS] Reconnecting in ${this.reconnectDelay}ms (attempt ${this.reconnectAttempts})`);
-        
-        setTimeout(() => this.connect(), this.reconnectDelay);
-    }
-
-    startHeartbeat() {
-        this.heartbeatInterval = setInterval(() => {
-            if (this.isConnected()) {
-                this.send({ type: 'ping' });
-            }
-        }, 30000);
-    }
-
-    stopHeartbeat() {
-        if (this.heartbeatInterval) {
-            clearInterval(this.heartbeatInterval);
-            this.heartbeatInterval = null;
-        }
-    }
-
-    send(data) {
-        if (this.isConnected()) {
-            this.socket.send(JSON.stringify(data));
-            return true;
-        }
-        console.warn('[WS] Cannot send - not connected');
-        return false;
-    }
-
-    on(event, callback) {
-        if (!this.listeners.has(event)) {
-            this.listeners.set(event, []);
-        }
-        this.listeners.get(event).push(callback);
-    }
-
-    emit(event, data) {
-        if (this.listeners.has(event)) {
-            this.listeners.get(event).forEach(callback => callback(data));
-        }
-    }
-
-    updateStatus(status) {
-        this.status = status;
-        
-        const statusBar = document.getElementById('connection-status-bar');
-        const statusDot = document.getElementById('ws-status-dot');
-        const statusText = document.getElementById('ws-status-text');
-        
-        if (statusBar && statusDot && statusText) {
-            if (status === 'connected') {
-                statusBar.classList.remove('disconnected');
-                statusText.textContent = 'متصل';
-            } else if (status === 'disconnected' || status === 'error') {
-                statusBar.classList.add('disconnected');
-                statusText.textContent = status === 'error' ? 'خطا در اتصال' : 'قطع شده';
-            } else {
-                statusText.textContent = 'در حال اتصال...';
-            }
-        }
-    }
-
-    isConnected() {
-        return this.socket && this.socket.readyState === WebSocket.OPEN;
-    }
-
-    disconnect() {
-        if (this.socket) {
-            this.socket.close();
-        }
-        this.stopHeartbeat();
-    }
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// API CLIENT
-// ═══════════════════════════════════════════════════════════════════
-
-class APIClient {
-    constructor(baseURL) {
-        this.baseURL = baseURL;
-        this.cache = new Map();
-    }
-
-    async request(endpoint, options = {}) {
-        const url = `${this.baseURL}${endpoint}`;
-        const cacheKey = `${options.method || 'GET'}:${url}`;
+import apiClient from './apiClient.js';
+import wsClient from './wsClient.js';
+import OverviewView from './overviewView.js';
+import MarketView from './marketView.js';
+import NewsView from './newsView.js';
+import ChartLabView from './chartLabView.js';
+import AIAdvisorView from './aiAdvisorView.js';
+import DatasetsModelsView from './datasetsModelsView.js';
+import DebugConsoleView from './debugConsoleView.js';
+import SettingsView from './settingsView.js';
+import ProvidersView from './providersView.js';
+import ApiExplorerView from './apiExplorerView.js';
+
+const App = {
+    init() {
+        this.cacheElements();
+        this.bindNavigation();
+        this.initViews();
+        this.initStatusBadges();
+        wsClient.connect();
+    },
 
-        // Check cache
-        if (options.cache && this.cache.has(cacheKey)) {
-            const cached = this.cache.get(cacheKey);
-            if (Date.now() - cached.timestamp < CONFIG.CACHE_TTL) {
-                console.log('[API] Cache hit:', endpoint);
-                return cached.data;
-            }
-        }
+    cacheElements() {
+        this.sections = document.querySelectorAll('.page');
+        this.navButtons = document.querySelectorAll('[data-nav]');
+        this.apiHealthBadge = document.querySelector('[data-api-health]');
+        this.wsBadge = document.querySelector('[data-ws-status]');
+    },
 
-        try {
-            console.log('[API] Request:', endpoint);
-            const response = await fetch(url, {
-                method: options.method || 'GET',
-                headers: {
-                    'Content-Type': 'application/json',
-                    ...options.headers,
-                },
-                body: options.body ? JSON.stringify(options.body) : undefined,
+    bindNavigation() {
+        this.navButtons.forEach((button) => {
+            button.addEventListener('click', () => {
+                const target = button.dataset.nav;
+                this.sections.forEach((section) => section.classList.toggle('active', section.id === target));
+                this.navButtons.forEach((btn) => btn.classList.toggle('active', btn === button));
             });
+        });
+    },
 
-            if (!response.ok) {
-                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-            }
-
-            const data = await response.json();
-
-            // Cache successful GET requests
-            if (!options.method || options.method === 'GET') {
-                this.cache.set(cacheKey, {
-                    data,
-                    timestamp: Date.now(),
-                });
-            }
-
-            return data;
-        } catch (error) {
-            console.error('[API] Error:', endpoint, error);
-            throw error;
-        }
-    }
+    initViews() {
+        const overview = new OverviewView(document.getElementById('page-overview'));
+        overview.init();
 
-    // Market Data
-    async getMarket() {
-        return this.request('/api/market', { cache: true });
-    }
+        const market = new MarketView(document.getElementById('page-market'), wsClient);
+        market.init();
 
-    async getTrending() {
-        return this.request('/api/trending', { cache: true });
-    }
+        const news = new NewsView(document.getElementById('page-news'));
+        news.init();
 
-    async getSentiment() {
-        return this.request('/api/sentiment', { cache: true });
-    }
+        const chartLab = new ChartLabView(document.getElementById('page-chart'));
+        chartLab.init();
 
-    async getStats() {
-        return this.request('/api/stats', { cache: true });
-    }
+        const aiAdvisor = new AIAdvisorView(document.getElementById('page-ai'));
+        aiAdvisor.init();
 
-    // News
-    async getNews(limit = 20) {
-        return this.request(`/api/news?limit=${limit}`, { cache: true });
-    }
+        const datasets = new DatasetsModelsView(document.getElementById('page-datasets'));
+        datasets.init();
 
-    // Providers
-    async getProviders() {
-        return this.request('/api/providers', { cache: true });
-    }
+        const debugView = new DebugConsoleView(document.getElementById('page-debug'), wsClient);
+        debugView.init();
 
-    // Chart Data
-    async getChartData(symbol, interval = '1h', limit = 100) {
-        return this.request(`/api/market/history?symbol=${symbol}&interval=${interval}&limit=${limit}`, { cache: true });
-    }
-}
+        const settings = new SettingsView(document.getElementById('page-settings'));
+        settings.init();
 
-// ═══════════════════════════════════════════════════════════════════
-// UTILITY FUNCTIONS
-// ═══════════════════════════════════════════════════════════════════
+        const providersView = new ProvidersView(document.getElementById('page-providers'));
+        providersView.init();
 
-const Utils = {
-    formatCurrency(value) {
-        if (value === null || value === undefined || isNaN(value)) {
-            return '—';
-        }
-        const num = Number(value);
-        if (Math.abs(num) >= 1e12) {
-            return `$${(num / 1e12).toFixed(2)}T`;
-        }
-        if (Math.abs(num) >= 1e9) {
-            return `$${(num / 1e9).toFixed(2)}B`;
-        }
-        if (Math.abs(num) >= 1e6) {
-            return `$${(num / 1e6).toFixed(2)}M`;
-        }
-        if (Math.abs(num) >= 1e3) {
-            return `$${(num / 1e3).toFixed(2)}K`;
-        }
-        return `$${num.toLocaleString(undefined, { 
-            minimumFractionDigits: 2, 
-            maximumFractionDigits: 2 
-        })}`;
+        const apiExplorer = new ApiExplorerView(document.getElementById('page-api'));
+        apiExplorer.init();
     },
 
-    formatPercent(value) {
-        if (value === null || value === undefined || isNaN(value)) {
-            return '—';
-        }
-        const num = Number(value);
-        const sign = num >= 0 ? '+' : '';
-        return `${sign}${num.toFixed(2)}%`;
-    },
-
-    formatNumber(value) {
-        if (value === null || value === undefined || isNaN(value)) {
-            return '—';
-        }
-        return Number(value).toLocaleString();
-    },
-
-    formatDate(timestamp) {
-        const date = new Date(timestamp);
-        return date.toLocaleDateString('fa-IR', {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit',
+    initStatusBadges() {
+        this.refreshHealth();
+        wsClient.onStatusChange((status) => {
+            if (!this.wsBadge) return;
+            const state = status === 'connected' ? 'ok' : status === 'connecting' ? 'warn' : 'error';
+            this.wsBadge.dataset.state = state;
+            const textNode = this.wsBadge.querySelectorAll('span')[1];
+            if (textNode) textNode.textContent = status;
         });
     },
 
-    getChangeClass(value) {
-        if (value > 0) return 'positive';
-        if (value < 0) return 'negative';
-        return 'neutral';
-    },
-
-    showLoader(element) {
-        if (element) {
-            element.innerHTML = `
-                <div class="loading-cell">
-                    <div class="loader"></div>
-                    در حال بارگذاری...
-                </div>
-            `;
-        }
-    },
-
-    showError(element, message) {
-        if (element) {
-            element.innerHTML = `
-                <div class="error-message">
-                    <i class="fas fa-exclamation-circle"></i>
-                    ${message}
-                </div>
-            `;
+    async refreshHealth() {
+        if (!this.apiHealthBadge) return;
+        const result = await apiClient.getHealth();
+        if (result.ok) {
+            this.apiHealthBadge.dataset.state = 'ok';
+            const textNode = this.apiHealthBadge.querySelectorAll('span')[1];
+            if (textNode) textNode.textContent = result.data?.status || 'healthy';
+        } else {
+            this.apiHealthBadge.dataset.state = 'error';
+            const textNode = this.apiHealthBadge.querySelectorAll('span')[1];
+            if (textNode) textNode.textContent = 'error';
         }
     },
-
-    debounce(func, wait) {
-        let timeout;
-        return function executedFunction(...args) {
-            const later = () => {
-                clearTimeout(timeout);
-                func(...args);
-            };
-            clearTimeout(timeout);
-            timeout = setTimeout(later, wait);
-        };
-    },
 };
 
-// ═══════════════════════════════════════════════════════════════════
-// VIEW MANAGER
-// ═══════════════════════════════════════════════════════════════════
-
-class ViewManager {
-    constructor() {
-        this.currentView = 'overview';
-        this.views = new Map();
-        this.init();
-    }
-
-    init() {
-        // Desktop navigation
-        document.querySelectorAll('.nav-tab-btn').forEach(btn => {
-            btn.addEventListener('click', (e) => {
-                const view = btn.dataset.view;
-                this.switchView(view);
-            });
-        });
-
-        // Mobile navigation
-        document.querySelectorAll('.mobile-nav-tab-btn').forEach(btn => {
-            btn.addEventListener('click', (e) => {
-                const view = btn.dataset.view;
-                this.switchView(view);
-            });
-        });
-    }
-
-    switchView(viewName) {
-        if (this.currentView === viewName) return;
-
-        // Hide all views
-        document.querySelectorAll('.view-section').forEach(section => {
-            section.classList.remove('active');
-        });
-
-        // Show selected view
-        const viewSection = document.getElementById(`view-${viewName}`);
-        if (viewSection) {
-            viewSection.classList.add('active');
-        }
-
-        // Update navigation buttons
-        document.querySelectorAll('.nav-tab-btn, .mobile-nav-tab-btn').forEach(btn => {
-            btn.classList.remove('active');
-            if (btn.dataset.view === viewName) {
-                btn.classList.add('active');
-            }
-        });
-
-        this.currentView = viewName;
-        console.log('[View] Switched to:', viewName);
-
-        // Trigger view-specific updates
-        this.triggerViewUpdate(viewName);
-    }
-
-    triggerViewUpdate(viewName) {
-        const event = new CustomEvent('viewChange', { detail: { view: viewName } });
-        document.dispatchEvent(event);
-    }
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// DASHBOARD APPLICATION
-// ═══════════════════════════════════════════════════════════════════
-
-class DashboardApp {
-    constructor() {
-        this.ws = new WebSocketClient(CONFIG.WS_URL);
-        this.api = new APIClient(CONFIG.BACKEND_URL);
-        this.viewManager = new ViewManager();
-        this.updateInterval = null;
-        this.data = {
-            market: null,
-            sentiment: null,
-            trending: null,
-            news: [],
-        };
-    }
-
-    async init() {
-        console.log('[App] Initializing dashboard...');
-
-        // Connect WebSocket
-        this.ws.connect();
-        this.setupWebSocketHandlers();
-
-        // Setup UI handlers
-        this.setupUIHandlers();
-
-        // Load initial data
-        await this.loadInitialData();
-
-        // Start periodic updates
-        this.startPeriodicUpdates();
-
-        console.log('[App] Dashboard initialized successfully');
-    }
-
-    setupWebSocketHandlers() {
-        this.ws.on('connected', (isConnected) => {
-            console.log('[App] WebSocket connection status:', isConnected);
-            if (isConnected) {
-                this.ws.send({ type: 'subscribe', groups: ['market', 'sentiment'] });
-            }
-        });
-
-        this.ws.on('market_update', (data) => {
-            console.log('[App] Market update received');
-            this.handleMarketUpdate(data);
-        });
-
-        this.ws.on('sentiment_update', (data) => {
-            console.log('[App] Sentiment update received');
-            this.handleSentimentUpdate(data);
-        });
-
-        this.ws.on('stats_update', (data) => {
-            console.log('[App] Stats update received');
-            this.updateOnlineUsers(data.active_connections || 0);
-        });
-    }
-
-    setupUIHandlers() {
-        // Theme toggle
-        const themeToggle = document.getElementById('theme-toggle');
-        if (themeToggle) {
-            themeToggle.addEventListener('click', () => this.toggleTheme());
-        }
-
-        // Notifications
-        const notificationsBtn = document.getElementById('notifications-btn');
-        const notificationsPanel = document.getElementById('notifications-panel');
-        const closeNotifications = document.getElementById('close-notifications');
-
-        if (notificationsBtn && notificationsPanel) {
-            notificationsBtn.addEventListener('click', () => {
-                notificationsPanel.classList.toggle('active');
-            });
-        }
-
-        if (closeNotifications && notificationsPanel) {
-            closeNotifications.addEventListener('click', () => {
-                notificationsPanel.classList.remove('active');
-            });
-        }
-
-        // Refresh buttons
-        const refreshCoins = document.getElementById('refresh-coins');
-        if (refreshCoins) {
-            refreshCoins.addEventListener('click', () => this.loadMarketData());
-        }
-
-        // Floating stats minimize
-        const minimizeStats = document.getElementById('minimize-stats');
-        const floatingStats = document.getElementById('floating-stats');
-        if (minimizeStats && floatingStats) {
-            minimizeStats.addEventListener('click', () => {
-                floatingStats.classList.toggle('minimized');
-            });
-        }
-
-        // Global search
-        const globalSearch = document.getElementById('global-search');
-        if (globalSearch) {
-            globalSearch.addEventListener('input', Utils.debounce((e) => {
-                this.handleSearch(e.target.value);
-            }, 300));
-        }
-
-        // AI Tools
-        this.setupAIToolHandlers();
-    }
-
-    setupAIToolHandlers() {
-        const sentimentBtn = document.getElementById('sentiment-analysis-btn');
-        const summaryBtn = document.getElementById('news-summary-btn');
-        const predictionBtn = document.getElementById('price-prediction-btn');
-        const patternBtn = document.getElementById('pattern-detection-btn');
-
-        if (sentimentBtn) {
-            sentimentBtn.addEventListener('click', () => this.runSentimentAnalysis());
-        }
-
-        if (summaryBtn) {
-            summaryBtn.addEventListener('click', () => this.runNewsSummary());
-        }
-
-        if (predictionBtn) {
-            predictionBtn.addEventListener('click', () => this.runPricePrediction());
-        }
-
-        if (patternBtn) {
-            patternBtn.addEventListener('click', () => this.runPatternDetection());
-        }
-
-        const clearResults = document.getElementById('clear-results');
-        const aiResults = document.getElementById('ai-results');
-        if (clearResults && aiResults) {
-            clearResults.addEventListener('click', () => {
-                aiResults.style.display = 'none';
-            });
-        }
-    }
-
-    async loadInitialData() {
-        this.showLoadingOverlay(true);
-
-        try {
-            await Promise.all([
-                this.loadMarketData(),
-                this.loadSentimentData(),
-                this.loadTrendingData(),
-                this.loadNewsData(),
-            ]);
-        } catch (error) {
-            console.error('[App] Error loading initial data:', error);
-        }
-
-        this.showLoadingOverlay(false);
-    }
-
-    async loadMarketData() {
-        try {
-            const data = await this.api.getMarket();
-            this.data.market = data;
-            this.renderMarketStats(data);
-            this.renderCoinsTable(data.cryptocurrencies || []);
-        } catch (error) {
-            console.error('[App] Error loading market data:', error);
-        }
-    }
-
-    async loadSentimentData() {
-        try {
-            const data = await this.api.getSentiment();
-            this.data.sentiment = data;
-            this.renderSentiment(data);
-        } catch (error) {
-            console.error('[App] Error loading sentiment data:', error);
-        }
-    }
-
-    async loadTrendingData() {
-        try {
-            const data = await this.api.getTrending();
-            this.data.trending = data;
-        } catch (error) {
-            console.error('[App] Error loading trending data:', error);
-        }
-    }
-
-    async loadNewsData() {
-        try {
-            const data = await this.api.getNews(20);
-            this.data.news = data.news || [];
-            this.renderNews(this.data.news);
-        } catch (error) {
-            console.error('[App] Error loading news data:', error);
-        }
-    }
-
-    renderMarketStats(data) {
-        const totalMarketCap = document.getElementById('total-market-cap');
-        const btcDominance = document.getElementById('btc-dominance');
-        const volume24h = document.getElementById('volume-24h');
-
-        if (totalMarketCap && data.total_market_cap) {
-            totalMarketCap.textContent = Utils.formatCurrency(data.total_market_cap);
-        }
-
-        if (btcDominance && data.btc_dominance) {
-            btcDominance.textContent = `${data.btc_dominance.toFixed(1)}%`;
-        }
-
-        if (volume24h && data.total_volume_24h) {
-            volume24h.textContent = Utils.formatCurrency(data.total_volume_24h);
-        }
-    }
-
-    renderCoinsTable(coins) {
-        const tbody = document.getElementById('coins-table-body');
-        if (!tbody) return;
-
-        if (!coins || coins.length === 0) {
-            tbody.innerHTML = '<tr><td colspan="7">داده‌ای یافت نشد</td></tr>';
-            return;
-        }
-
-        tbody.innerHTML = coins.slice(0, 20).map((coin, index) => `
-            <tr>
-                <td>${index + 1}</td>
-                <td>
-                    <div style="display: flex; align-items: center; gap: 8px;">
-                        <strong>${coin.symbol}</strong>
-                        <span style="color: var(--text-muted); font-size: 0.875rem;">${coin.name}</span>
-                    </div>
-                </td>
-                <td style="font-family: var(--font-mono);">${Utils.formatCurrency(coin.current_price)}</td>
-                <td>
-                    <span class="stat-change ${Utils.getChangeClass(coin.price_change_percentage_24h)}">
-                        ${Utils.formatPercent(coin.price_change_percentage_24h)}
-                    </span>
-                </td>
-                <td>${Utils.formatCurrency(coin.total_volume)}</td>
-                <td>${Utils.formatCurrency(coin.market_cap)}</td>
-                <td>
-                    <button class="btn-ghost" onclick="app.viewCoinDetails('${coin.symbol}')">
-                        <i class="fas fa-chart-line"></i>
-                    </button>
-                </td>
-            </tr>
-        `).join('');
-    }
-
-    renderSentiment(data) {
-        if (!data) return;
-
-        const bullish = data.bullish || 0;
-        const neutral = data.neutral || 0;
-        const bearish = data.bearish || 0;
-
-        const bullishPercent = document.getElementById('bullish-percent');
-        const neutralPercent = document.getElementById('neutral-percent');
-        const bearishPercent = document.getElementById('bearish-percent');
-
-        if (bullishPercent) bullishPercent.textContent = `${bullish}%`;
-        if (neutralPercent) neutralPercent.textContent = `${neutral}%`;
-        if (bearishPercent) bearishPercent.textContent = `${bearish}%`;
-
-        // Update progress bars
-        const progressBars = document.querySelectorAll('.sentiment-progress-bar');
-        progressBars.forEach(bar => {
-            if (bar.classList.contains('bullish')) {
-                bar.style.width = `${bullish}%`;
-            } else if (bar.classList.contains('neutral')) {
-                bar.style.width = `${neutral}%`;
-            } else if (bar.classList.contains('bearish')) {
-                bar.style.width = `${bearish}%`;
-            }
-        });
-    }
-
-    renderNews(news) {
-        const newsGrid = document.getElementById('news-grid');
-        if (!newsGrid) return;
-
-        if (!news || news.length === 0) {
-            newsGrid.innerHTML = '<p>خبری یافت نشد</p>';
-            return;
-        }
-
-        newsGrid.innerHTML = news.map(item => `
-            <div class="news-card">
-                ${item.image ? `<img src="${item.image}" alt="${item.title}" class="news-card-image">` : ''}
-                <div class="news-card-content">
-                    <h3 class="news-card-title">${item.title}</h3>
-                    <div class="news-card-meta">
-                        <span><i class="fas fa-clock"></i> ${Utils.formatDate(item.published_at || Date.now())}</span>
-                        <span><i class="fas fa-newspaper"></i> ${item.source || 'Unknown'}</span>
-                    </div>
-                    <p class="news-card-excerpt">${item.description || item.summary || ''}</p>
-                </div>
-            </div>
-        `).join('');
-    }
-
-    handleMarketUpdate(data) {
-        if (data.data) {
-            this.renderMarketStats(data.data);
-            if (data.data.cryptocurrencies) {
-                this.renderCoinsTable(data.data.cryptocurrencies);
-            }
-        }
-    }
-
-    handleSentimentUpdate(data) {
-        if (data.data) {
-            this.renderSentiment(data.data);
-        }
-    }
-
-    updateOnlineUsers(count) {
-        const activeUsersCount = document.getElementById('active-users-count');
-        if (activeUsersCount) {
-            activeUsersCount.textContent = count;
-        }
-    }
-
-    startPeriodicUpdates() {
-        this.updateInterval = setInterval(() => {
-            console.log('[App] Periodic update triggered');
-            this.loadMarketData();
-            this.loadSentimentData();
-        }, CONFIG.UPDATE_INTERVAL);
-    }
-
-    stopPeriodicUpdates() {
-        if (this.updateInterval) {
-            clearInterval(this.updateInterval);
-            this.updateInterval = null;
-        }
-    }
-
-    toggleTheme() {
-        document.body.classList.toggle('light-theme');
-        const icon = document.querySelector('#theme-toggle i');
-        if (icon) {
-            icon.classList.toggle('fa-moon');
-            icon.classList.toggle('fa-sun');
-        }
-    }
-
-    handleSearch(query) {
-        console.log('[App] Search query:', query);
-        // Implement search functionality
-    }
-
-    viewCoinDetails(symbol) {
-        console.log('[App] View coin details:', symbol);
-        // Switch to charts view and load coin data
-        this.viewManager.switchView('charts');
-    }
-
-    showLoadingOverlay(show) {
-        const overlay = document.getElementById('loading-overlay');
-        if (overlay) {
-            if (show) {
-                overlay.classList.add('active');
-            } else {
-                overlay.classList.remove('active');
-            }
-        }
-    }
-
-    // AI Tool Methods
-    async runSentimentAnalysis() {
-        const aiResults = document.getElementById('ai-results');
-        const aiResultsContent = document.getElementById('ai-results-content');
-        
-        if (!aiResults || !aiResultsContent) return;
-
-        aiResults.style.display = 'block';
-        aiResultsContent.innerHTML = '<div class="loader"></div> در حال تحلیل...';
-
-        try {
-            const data = await this.api.getSentiment();
-            
-            aiResultsContent.innerHTML = `
-                <div class="ai-result-card">
-                    <h4>نتایج تحلیل احساسات</h4>
-                    <div class="sentiment-summary">
-                        <div class="sentiment-summary-item">
-                            <div class="summary-label">صعودی</div>
-                            <div class="summary-value bullish">${data.bullish}%</div>
-                        </div>
-                        <div class="sentiment-summary-item">
-                            <div class="summary-label">خنثی</div>
-                            <div class="summary-value neutral">${data.neutral}%</div>
-                        </div>
-                        <div class="sentiment-summary-item">
-                            <div class="summary-label">نزولی</div>
-                            <div class="summary-value bearish">${data.bearish}%</div>
-                        </div>
-                    </div>
-                    <p style="margin-top: 1rem; color: var(--text-muted);">
-                        ${data.summary || 'تحلیل احساسات بازار بر اساس داده‌های جمع‌آوری شده از منابع مختلف'}
-                    </p>
-                </div>
-            `;
-        } catch (error) {
-            aiResultsContent.innerHTML = `
-                <div class="error-message">
-                    <i class="fas fa-exclamation-circle"></i>
-                    خطا در تحلیل: ${error.message}
-                </div>
-            `;
-        }
-    }
-
-    async runNewsSummary() {
-        const aiResults = document.getElementById('ai-results');
-        const aiResultsContent = document.getElementById('ai-results-content');
-        
-        if (!aiResults || !aiResultsContent) return;
-
-        aiResults.style.display = 'block';
-        aiResultsContent.innerHTML = '<div class="loader"></div> در حال خلاصه‌سازی...';
-
-        setTimeout(() => {
-            aiResultsContent.innerHTML = `
-                <div class="ai-result-card">
-                    <h4>خلاصه اخبار</h4>
-                    <p>قابلیت خلاصه‌سازی اخبار به زودی اضافه خواهد شد.</p>
-                    <p style="color: var(--text-muted); font-size: 0.875rem;">
-                        این قابلیت از مدل‌های Hugging Face برای خلاصه‌سازی متن استفاده می‌کند.
-                    </p>
-                </div>
-            `;
-        }, 1000);
-    }
-
-    async runPricePrediction() {
-        const aiResults = document.getElementById('ai-results');
-        const aiResultsContent = document.getElementById('ai-results-content');
-        
-        if (!aiResults || !aiResultsContent) return;
-
-        aiResults.style.display = 'block';
-        aiResultsContent.innerHTML = '<div class="loader"></div> در حال پیش‌بینی...';
-
-        setTimeout(() => {
-            aiResultsContent.innerHTML = `
-                <div class="ai-result-card">
-                    <h4>پیش‌بینی قیمت</h4>
-                    <p>قابلیت پیش‌بینی قیمت به زودی اضافه خواهد شد.</p>
-                    <p style="color: var(--text-muted); font-size: 0.875rem;">
-                        این قابلیت از مدل‌های یادگیری ماشین برای پیش‌بینی روند قیمت استفاده می‌کند.
-                    </p>
-                </div>
-            `;
-        }, 1000);
-    }
-
-    async runPatternDetection() {
-        const aiResults = document.getElementById('ai-results');
-        const aiResultsContent = document.getElementById('ai-results-content');
-        
-        if (!aiResults || !aiResultsContent) return;
-
-        aiResults.style.display = 'block';
-        aiResultsContent.innerHTML = '<div class="loader"></div> در حال تشخیص الگو...';
-
-        setTimeout(() => {
-            aiResultsContent.innerHTML = `
-                <div class="ai-result-card">
-                    <h4>تشخیص الگو</h4>
-                    <p>قابلیت تشخیص الگو به زودی اضافه خواهد شد.</p>
-                    <p style="color: var(--text-muted); font-size: 0.875rem;">
-                        این قابلیت الگوهای کندل استیک و تحلیل تکنیکال را شناسایی می‌کند.
-                    </p>
-                </div>
-            `;
-        }, 1000);
-    }
-
-    destroy() {
-        this.stopPeriodicUpdates();
-        this.ws.disconnect();
-        console.log('[App] Dashboard destroyed');
-    }
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// INITIALIZATION
-// ═══════════════════════════════════════════════════════════════════
-
-let app;
-
-document.addEventListener('DOMContentLoaded', () => {
-    console.log('[Main] DOM loaded, initializing application...');
-    
-    app = new DashboardApp();
-    app.init();
-
-    // Make app globally accessible for debugging
-    window.app = app;
-    
-    console.log('[Main] Application ready');
-});
-
-// Cleanup on page unload
-window.addEventListener('beforeunload', () => {
-    if (app) {
-        app.destroy();
-    }
-});
-
-// Handle visibility change to pause/resume updates
-document.addEventListener('visibilitychange', () => {
-    if (document.hidden) {
-        console.log('[Main] Page hidden, pausing updates');
-        app.stopPeriodicUpdates();
-    } else {
-        console.log('[Main] Page visible, resuming updates');
-        app.startPeriodicUpdates();
-        app.loadMarketData();
-    }
-});
-
-// Export for module usage
-export { DashboardApp, APIClient, WebSocketClient, Utils };
+window.addEventListener('DOMContentLoaded', () => App.init());

static/js/chartLabView.js

@@ -1,458 +1,127 @@
 import apiClient from './apiClient.js';
-import errorHelper from './errorHelper.js';
-import { createAdvancedLineChart, createCandlestickChart, createVolumeChart } from './tradingview-charts.js';
-
-// Cryptocurrency symbols list
-const CRYPTO_SYMBOLS = [
-    { symbol: 'BTC', name: 'Bitcoin' },
-    { symbol: 'ETH', name: 'Ethereum' },
-    { symbol: 'BNB', name: 'Binance Coin' },
-    { symbol: 'SOL', name: 'Solana' },
-    { symbol: 'XRP', name: 'Ripple' },
-    { symbol: 'ADA', name: 'Cardano' },
-    { symbol: 'DOGE', name: 'Dogecoin' },
-    { symbol: 'DOT', name: 'Polkadot' },
-    { symbol: 'MATIC', name: 'Polygon' },
-    { symbol: 'AVAX', name: 'Avalanche' },
-    { symbol: 'LINK', name: 'Chainlink' },
-    { symbol: 'UNI', name: 'Uniswap' },
-    { symbol: 'LTC', name: 'Litecoin' },
-    { symbol: 'ATOM', name: 'Cosmos' },
-    { symbol: 'ALGO', name: 'Algorand' },
-    { symbol: 'TRX', name: 'Tron' },
-    { symbol: 'XLM', name: 'Stellar' },
-    { symbol: 'VET', name: 'VeChain' },
-    { symbol: 'FIL', name: 'Filecoin' },
-    { symbol: 'ETC', name: 'Ethereum Classic' },
-    { symbol: 'AAVE', name: 'Aave' },
-    { symbol: 'MKR', name: 'Maker' },
-    { symbol: 'COMP', name: 'Compound' },
-    { symbol: 'SUSHI', name: 'SushiSwap' },
-    { symbol: 'YFI', name: 'Yearn Finance' },
-];
 
 class ChartLabView {
     constructor(section) {
         this.section = section;
-        this.symbolInput = section.querySelector('[data-chart-symbol-input]');
-        this.symbolDropdown = section.querySelector('[data-chart-symbol-dropdown]');
-        this.symbolOptions = section.querySelector('[data-chart-symbol-options]');
-        this.timeframeButtons = section.querySelectorAll('[data-timeframe]');
-        this.indicatorButtons = section.querySelectorAll('[data-indicator]');
-        this.loadButton = section.querySelector('[data-load-chart]');
-        this.runAnalysisButton = section.querySelector('[data-run-analysis]');
-        this.canvas = section.querySelector('#price-chart');
-        this.analysisOutput = section.querySelector('[data-analysis-output]');
-        this.chartTitle = section.querySelector('[data-chart-title]');
-        this.chartLegend = section.querySelector('[data-chart-legend]');
+        this.symbolSelect = section.querySelector('[data-chart-symbol]');
+        this.timeframeButtons = section.querySelectorAll('[data-chart-timeframe]');
+        this.indicatorInputs = section.querySelectorAll('[data-indicator]');
+        this.analyzeButton = section.querySelector('[data-run-analysis]');
+        this.canvas = section.querySelector('#chart-lab-canvas');
+        this.insightsContainer = section.querySelector('[data-ai-insights]');
         this.chart = null;
         this.symbol = 'BTC';
         this.timeframe = '7d';
-        this.filteredSymbols = [...CRYPTO_SYMBOLS];
     }
 
     async init() {
-        this.setupCombobox();
-        this.bindEvents();
         await this.loadChart();
-    }
-
-    setupCombobox() {
-        if (!this.symbolInput || !this.symbolOptions) return;
-        
-        // Populate options
-        this.renderOptions();
-        
-        // Set initial value
-        this.symbolInput.value = 'BTC - Bitcoin';
-        
-        // Input event for filtering
-        this.symbolInput.addEventListener('input', (e) => {
-            const query = e.target.value.trim().toUpperCase();
-            this.filterSymbols(query);
-        });
-        
-        // Focus event to show dropdown
-        this.symbolInput.addEventListener('focus', () => {
-            this.symbolDropdown.style.display = 'block';
-            this.filterSymbols(this.symbolInput.value.trim().toUpperCase());
-        });
-        
-        // Click outside to close
-        document.addEventListener('click', (e) => {
-            if (!this.symbolInput.contains(e.target) && !this.symbolDropdown.contains(e.target)) {
-                this.symbolDropdown.style.display = 'none';
-            }
-        });
-    }
-
-    filterSymbols(query) {
-        if (!query) {
-            this.filteredSymbols = [...CRYPTO_SYMBOLS];
-        } else {
-            this.filteredSymbols = CRYPTO_SYMBOLS.filter(item => 
-                item.symbol.includes(query) || 
-                item.name.toUpperCase().includes(query)
-            );
-        }
-        this.renderOptions();
-    }
-
-    renderOptions() {
-        if (!this.symbolOptions) return;
-        
-        if (this.filteredSymbols.length === 0) {
-            this.symbolOptions.innerHTML = '<div class="combobox-option disabled">No results found</div>';
-            return;
-        }
-        
-        this.symbolOptions.innerHTML = this.filteredSymbols.map(item => `
-            <div class="combobox-option" data-symbol="${item.symbol}">
-                <strong>${item.symbol}</strong>
-                <span>${item.name}</span>
-            </div>
-        `).join('');
-        
-        // Add click handlers
-        this.symbolOptions.querySelectorAll('.combobox-option').forEach(option => {
-            if (!option.classList.contains('disabled')) {
-                option.addEventListener('click', () => {
-                    const symbol = option.dataset.symbol;
-                    const item = CRYPTO_SYMBOLS.find(i => i.symbol === symbol);
-                    if (item) {
-                        this.symbol = symbol;
-                        this.symbolInput.value = `${item.symbol} - ${item.name}`;
-                        this.symbolDropdown.style.display = 'none';
-                        this.loadChart();
-                    }
-                });
-            }
-        });
+        this.bindEvents();
     }
 
     bindEvents() {
-        // Timeframe buttons
+        if (this.symbolSelect) {
+            this.symbolSelect.addEventListener('change', async () => {
+                this.symbol = this.symbolSelect.value;
+                await this.loadChart();
+            });
+        }
         this.timeframeButtons.forEach((btn) => {
             btn.addEventListener('click', async () => {
                 this.timeframeButtons.forEach((b) => b.classList.remove('active'));
                 btn.classList.add('active');
-                this.timeframe = btn.dataset.timeframe;
+                this.timeframe = btn.dataset.chartTimeframe;
                 await this.loadChart();
             });
         });
-        
-        // Load chart button
-        if (this.loadButton) {
-            this.loadButton.addEventListener('click', async (e) => {
-                e.preventDefault();
-                // Extract symbol from input
-                const inputValue = this.symbolInput.value.trim();
-                if (inputValue) {
-                    const match = inputValue.match(/^([A-Z0-9]+)/);
-                    if (match) {
-                        this.symbol = match[1].toUpperCase();
-                    } else {
-                        this.symbol = inputValue.toUpperCase();
-                    }
-                }
-                await this.loadChart();
-            });
-        }
-        
-        // Indicator buttons
-        if (this.indicatorButtons.length > 0) {
-            this.indicatorButtons.forEach((btn) => {
-                btn.addEventListener('click', () => {
-                    btn.classList.toggle('active');
-                    // Don't auto-run, wait for Run Analysis button
-                });
-            });
-        }
-        
-        // Run analysis button
-        if (this.runAnalysisButton) {
-            this.runAnalysisButton.addEventListener('click', async (e) => {
-                e.preventDefault();
-                await this.runAnalysis();
-            });
+        if (this.analyzeButton) {
+            this.analyzeButton.addEventListener('click', () => this.runAnalysis());
         }
     }
 
     async loadChart() {
         if (!this.canvas) return;
-        
-        const symbol = this.symbol.trim().toUpperCase() || 'BTC';
-        if (!symbol) {
-            this.symbol = 'BTC';
-            if (this.symbolInput) this.symbolInput.value = 'BTC - Bitcoin';
-        }
-        
-        const container = this.canvas.closest('.chart-wrapper') || this.canvas.parentElement;
-        
-        // Show loading state
-        if (container) {
-            let loadingNode = container.querySelector('.chart-loading');
-            if (!loadingNode) {
-                loadingNode = document.createElement('div');
-                loadingNode.className = 'chart-loading';
-                container.insertBefore(loadingNode, this.canvas);
-            }
-            loadingNode.innerHTML = `
-                <div class="loading-spinner"></div>
-                <p>Loading ${symbol} chart data...</p>
-            `;
-        }
-        
-        // Update title
-        if (this.chartTitle) {
-            this.chartTitle.textContent = `${symbol} Price Chart (${this.timeframe})`;
-        }
-        
-        try {
-            const result = await apiClient.getPriceChart(symbol, this.timeframe);
-            
-            // Remove loading
-            if (container) {
-                const loadingNode = container.querySelector('.chart-loading');
-                if (loadingNode) loadingNode.remove();
-            }
-            
-            if (!result.ok) {
-                const errorAnalysis = errorHelper.analyzeError(new Error(result.error), { symbol, timeframe: this.timeframe });
-                
-                if (container) {
-                    let errorNode = container.querySelector('.chart-error');
-                    if (!errorNode) {
-                        errorNode = document.createElement('div');
-                        errorNode.className = 'inline-message inline-error chart-error';
-                        container.appendChild(errorNode);
-                    }
-                    errorNode.innerHTML = `
-                        <strong>Error loading chart:</strong>
-                        <p>${result.error || 'Failed to load chart data'}</p>
-                        <p><small>Symbol: ${symbol} | Timeframe: ${this.timeframe}</small></p>
-                    `;
-                }
-                return;
-            }
-            
+        const result = await apiClient.getPriceChart(this.symbol, this.timeframe);
+        const container = this.canvas.parentElement;
+        if (!result.ok) {
             if (container) {
-                const errorNode = container.querySelector('.chart-error');
-                if (errorNode) errorNode.remove();
-            }
-            
-            // Parse chart data
-            const chartData = result.data || {};
-            const points = chartData.data || chartData || [];
-            
-            if (!points || points.length === 0) {
-                if (container) {
-                    const errorNode = document.createElement('div');
-                    errorNode.className = 'inline-message inline-warn';
-                    errorNode.innerHTML = '<strong>No data available</strong><p>No price data found for this symbol and timeframe.</p>';
+                let errorNode = container.querySelector('.chart-error');
+                if (!errorNode) {
+                    errorNode = document.createElement('div');
+                    errorNode.className = 'inline-message inline-error chart-error';
                     container.appendChild(errorNode);
                 }
-                return;
-            }
-            
-            // Format labels and data
-            const labels = points.map((point) => {
-                const ts = point.time || point.timestamp || point.date;
-                if (!ts) return '';
-                const date = new Date(ts);
-                if (this.timeframe === '1d') {
-                    return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
-                }
-                return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-            });
-            
-            const prices = points.map((point) => {
-                const price = point.price || point.close || point.value || 0;
-                return parseFloat(price) || 0;
-            });
-            
-            // Destroy existing chart
-            if (this.chart) {
-                this.chart.destroy();
-            }
-            
-            // Calculate min/max for better scaling
-            const minPrice = Math.min(...prices);
-            const maxPrice = Math.max(...prices);
-            const priceRange = maxPrice - minPrice;
-            const firstPrice = prices[0];
-            const lastPrice = prices[prices.length - 1];
-            const priceChange = lastPrice - firstPrice;
-            const priceChangePercent = ((priceChange / firstPrice) * 100).toFixed(2);
-            const isPriceUp = priceChange >= 0;
-            
-            // Get indicator states
-            const showMA20 = this.section.querySelector('[data-indicator="MA20"]')?.checked || false;
-            const showMA50 = this.section.querySelector('[data-indicator="MA50"]')?.checked || false;
-            const showRSI = this.section.querySelector('[data-indicator="RSI"]')?.checked || false;
-            const showVolume = this.section.querySelector('[data-indicator="Volume"]')?.checked || false;
-
-            // Prepare price data for TradingView chart
-            const priceData = points.map((point, index) => ({
-                time: point.time || point.timestamp || point.date || new Date().getTime() + (index * 60000),
-                price: parseFloat(point.price || point.close || point.value || 0),
-                volume: parseFloat(point.volume || 0)
-            }));
-
-            // Create TradingView-style chart with indicators
-            this.chart = createAdvancedLineChart('chart-lab-canvas', priceData, {
-                showMA20,
-                showMA50,
-                showRSI,
-                showVolume
-            });
-
-            // If volume is enabled, create separate volume chart
-            if (showVolume && priceData.some(p => p.volume > 0)) {
-                const volumeContainer = this.section.querySelector('[data-volume-chart]');
-                if (volumeContainer) {
-                    createVolumeChart('volume-chart-canvas', priceData);
-                }
-            }
-            
-            // Update legend with TradingView-style info
-            if (this.chartLegend && prices.length > 0) {
-                const currentPrice = prices[prices.length - 1];
-                const firstPrice = prices[0];
-                const change = currentPrice - firstPrice;
-                const changePercent = ((change / firstPrice) * 100).toFixed(2);
-                const isUp = change >= 0;
-                
-                this.chartLegend.innerHTML = `
-                    <div class="legend-item">
-                        <span class="legend-label">Price</span>
-                        <span class="legend-value">$${currentPrice.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
-                    </div>
-                    <div class="legend-item">
-                        <span class="legend-label">24h</span>
-                        <span class="legend-value ${isUp ? 'positive' : 'negative'}">
-                            <span class="legend-arrow">${isUp ? '↑' : '↓'}</span>
-                            ${isUp ? '+' : ''}${changePercent}%
-                        </span>
-                    </div>
-                    <div class="legend-item">
-                        <span class="legend-label">High</span>
-                        <span class="legend-value">$${maxPrice.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
-                    </div>
-                    <div class="legend-item">
-                        <span class="legend-label">Low</span>
-                        <span class="legend-value">$${minPrice.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
-                    </div>
-                `;
-            }
-        } catch (error) {
-            console.error('Chart loading error:', error);
-            if (container) {
-                const errorNode = document.createElement('div');
-                errorNode.className = 'inline-message inline-error';
-                errorNode.innerHTML = `<strong>Error:</strong><p>${error.message || 'Failed to load chart'}</p>`;
-                container.appendChild(errorNode);
+                errorNode.textContent = result.error;
             }
+            return;
         }
+        if (container) {
+            const errorNode = container.querySelector('.chart-error');
+            if (errorNode) errorNode.remove();
+        }
+        const points = result.data || [];
+        const labels = points.map((point) => point.time || point.timestamp || '');
+        const prices = points.map((point) => point.price || point.close || point.value);
+        if (this.chart) {
+            this.chart.destroy();
+        }
+        this.chart = new Chart(this.canvas, {
+            type: 'line',
+            data: {
+                labels,
+                datasets: [
+                    {
+                        label: `${this.symbol} (${this.timeframe})`,
+                        data: prices,
+                        borderColor: '#f472b6',
+                        backgroundColor: 'rgba(244, 114, 182, 0.2)',
+                        fill: true,
+                        tension: 0.4,
+                    },
+                ],
+            },
+            options: {
+                scales: {
+                    x: { ticks: { color: 'var(--text-muted)' } },
+                    y: { ticks: { color: 'var(--text-muted)' } },
+                },
+                plugins: {
+                    legend: { display: false },
+                },
+            },
+        });
     }
 
     async runAnalysis() {
-        if (!this.analysisOutput) return;
-        
-        const enabledIndicators = Array.from(this.indicatorButtons)
-            .filter((btn) => btn.classList.contains('active'))
-            .map((btn) => btn.dataset.indicator);
-        
-        this.analysisOutput.innerHTML = `
-            <div class="analysis-loading">
-                <div class="loading-spinner"></div>
-                <p>Running AI analysis with ${enabledIndicators.length > 0 ? enabledIndicators.join(', ') : 'default'} indicators...</p>
-            </div>
-        `;
-        
-        try {
-            const result = await apiClient.analyzeChart(this.symbol, this.timeframe, enabledIndicators);
-            
-            if (!result.ok) {
-                this.analysisOutput.innerHTML = `
-                    <div class="inline-message inline-error">
-                        <strong>Analysis Error:</strong>
-                        <p>${result.error || 'Failed to run analysis'}</p>
-                    </div>
-                `;
-                return;
-            }
-            
-            const data = result.data || {};
-            const analysis = data.analysis || data;
-            
-            if (!analysis) {
-                this.analysisOutput.innerHTML = '<div class="inline-message inline-warn">No AI insights returned.</div>';
-                return;
-            }
-            
-            const summary = analysis.summary || analysis.narrative?.summary || 'No summary available.';
-            const signals = analysis.signals || {};
-            const direction = analysis.change_direction || 'N/A';
-            const changePercent = analysis.change_percent ?? '—';
-            const high = analysis.high ?? '—';
-            const low = analysis.low ?? '—';
-            
-            const bullets = Object.entries(signals)
-                .map(([key, value]) => {
-                    const label = value?.label || value || 'n/a';
-                    const score = value?.score ?? value?.value ?? '—';
-                    return `<li><strong>${key.toUpperCase()}:</strong> ${label} ${score !== '—' ? `(${score})` : ''}</li>`;
-                })
-                .join('');
-            
-            this.analysisOutput.innerHTML = `
-                <div class="analysis-results">
-                    <div class="analysis-header">
-                        <h5>Analysis Results</h5>
-                        <span class="analysis-badge ${direction.toLowerCase()}">${direction}</span>
-                    </div>
-                    <div class="analysis-metrics">
-                        <div class="metric-item">
-                            <span class="metric-label">Direction</span>
-                            <span class="metric-value ${direction.toLowerCase()}">${direction}</span>
-                        </div>
-                        <div class="metric-item">
-                            <span class="metric-label">Change</span>
-                            <span class="metric-value ${changePercent >= 0 ? 'positive' : 'negative'}">
-                                ${changePercent >= 0 ? '+' : ''}${changePercent}%
-                            </span>
-                        </div>
-                        <div class="metric-item">
-                            <span class="metric-label">High</span>
-                            <span class="metric-value">$${high}</span>
-                        </div>
-                        <div class="metric-item">
-                            <span class="metric-label">Low</span>
-                            <span class="metric-value">$${low}</span>
-                        </div>
-                    </div>
-                    <div class="analysis-summary">
-                        <h6>Summary</h6>
-                        <p>${summary}</p>
-                    </div>
-                    ${bullets ? `
-                        <div class="analysis-signals">
-                            <h6>Signals</h6>
-                            <ul>${bullets}</ul>
-                        </div>
-                    ` : ''}
-                </div>
-            `;
-        } catch (error) {
-            console.error('Analysis error:', error);
-            this.analysisOutput.innerHTML = `
-                <div class="inline-message inline-error">
-                    <strong>Error:</strong>
-                    <p>${error.message || 'Failed to run analysis'}</p>
-                </div>
-            `;
+        if (!this.insightsContainer) return;
+        const enabledIndicators = Array.from(this.indicatorInputs)
+            .filter((input) => input.checked)
+            .map((input) => input.value);
+        this.insightsContainer.innerHTML = '<p>Running AI analysis...</p>';
+        const result = await apiClient.analyzeChart(this.symbol, this.timeframe, enabledIndicators);
+        if (!result.ok) {
+            this.insightsContainer.innerHTML = `<div class="inline-message inline-error">${result.error}</div>`;
+            return;
         }
+        const payload = result.data || {};
+        const insights = payload.insights || result.insights || payload;
+        if (!insights) {
+            this.insightsContainer.innerHTML = '<p>No AI insights returned.</p>';
+            return;
+        }
+        const summary =
+            insights.narrative?.summary?.summary || insights.narrative?.summary || insights.narrative?.summary_text;
+        const signals = insights.narrative?.signals || {};
+        const bullets = Object.entries(signals)
+            .map(([key, value]) => `<li><strong>${key}:</strong> ${(value?.label || 'n/a')} (${value?.score ?? '—'})</li>`)
+            .join('');
+        this.insightsContainer.innerHTML = `
+            <h4>AI Insights</h4>
+            <p><strong>Direction:</strong> ${insights.change_direction || 'N/A'} (${insights.change_percent ?? '—'}%)</p>
+            <p><strong>Range:</strong> High ${insights.high ?? '—'} / Low ${insights.low ?? '—'}</p>
+            <p>${summary || insights.narrative?.summary?.summary || insights.narrative?.summary || ''}</p>
+            <ul>${bullets || '<li>No sentiment signals provided.</li>'}</ul>
+        `;
     }
 }
 

static/js/datasetsModelsView.js

@@ -54,9 +54,7 @@ class DatasetsModelsView {
             this.datasetsBody.innerHTML = `<tr><td colspan="4">${result.error}</td></tr>`;
             return;
         }
-        // Backend returns {success: true, datasets: [...], count: ...}, so access result.data.datasets
-        const data = result.data || {};
-        this.datasets = data.datasets || data || [];
+        this.datasets = result.data || [];
         this.datasetsBody.innerHTML = this.datasets
             .map(
                 (dataset) => `
@@ -83,9 +81,7 @@ class DatasetsModelsView {
             this.previewContent.innerHTML = `<div class="inline-message inline-error">${result.error}</div>`;
             return;
         }
-        // Backend returns {success: true, sample: [...], ...}, so access result.data.sample
-        const data = result.data || {};
-        const rows = data.sample || data || [];
+        const rows = result.data || [];
         if (!rows.length) {
             this.previewContent.innerHTML = '<p>No sample rows available.</p>';
             return;
@@ -115,9 +111,7 @@ class DatasetsModelsView {
             this.modelsBody.innerHTML = `<tr><td colspan="4">${result.error}</td></tr>`;
             return;
         }
-        // Backend returns {success: true, models: [...], count: ...}, so access result.data.models
-        const data = result.data || {};
-        this.models = data.models || data || [];
+        this.models = result.data || [];
         this.modelsBody.innerHTML = this.models
             .map(
                 (model) => `

static/js/debugConsoleView.js

@@ -4,8 +4,8 @@ class DebugConsoleView {
     constructor(section, wsClient) {
         this.section = section;
         this.wsClient = wsClient;
-        this.healthInfo = section.querySelector('[data-health-info]');
-        this.wsInfo = section.querySelector('[data-ws-info]');
+        this.healthStatus = section.querySelector('[data-health-status]');
+        this.providersContainer = section.querySelector('[data-providers]');
         this.requestLogBody = section.querySelector('[data-request-log]');
         this.errorLogBody = section.querySelector('[data-error-log]');
         this.wsLogBody = section.querySelector('[data-ws-log]');
@@ -25,31 +25,29 @@ class DebugConsoleView {
 
     async refresh() {
         const [health, providers] = await Promise.all([apiClient.getHealth(), apiClient.getProviders()]);
-        
-        // Update health info
-        if (this.healthInfo) {
-            if (health.ok) {
-                const data = health.data || {};
-                this.healthInfo.innerHTML = `
-                    <p><strong>Status:</strong> <span class="text-success">${data.status || 'OK'}</span></p>
-                    <p><strong>Uptime:</strong> ${data.uptime || 'N/A'}</p>
-                    <p><strong>Version:</strong> ${data.version || 'N/A'}</p>
-                `;
-            } else {
-                this.healthInfo.innerHTML = `<div class="inline-message inline-error">${health.error || 'Unavailable'}</div>`;
-            }
+        if (health.ok) {
+            this.healthStatus.textContent = health.data?.status || 'OK';
+        } else {
+            this.healthStatus.textContent = 'Unavailable';
         }
-        
-        // Update WebSocket info
-        if (this.wsInfo) {
-            const status = this.wsClient.status || 'disconnected';
-            const events = this.wsClient.getEvents();
-            this.wsInfo.innerHTML = `
-                <p><strong>Status:</strong> <span class="${status === 'connected' ? 'text-success' : 'text-danger'}">${status}</span></p>
-                <p><strong>Events:</strong> ${events.length}</p>
-            `;
+        if (providers.ok) {
+            const list = providers.data || [];
+            this.providersContainer.innerHTML = list
+                .map(
+                    (provider) => `
+                    <div class="glass-card">
+                        <h4>${provider.name}</h4>
+                        <p>Status: <span class="${provider.status === 'healthy' ? 'text-success' : 'text-danger'}">${
+                            provider.status || 'unknown'
+                        }</span></p>
+                        <p>Latency: ${provider.latency || '—'}ms</p>
+                    </div>
+                `,
+                )
+                .join('');
+        } else {
+            this.providersContainer.innerHTML = `<div class="inline-message inline-error">${providers.error}</div>`;
         }
-        
         this.renderRequestLogs();
         this.renderErrorLogs();
         this.renderWsLogs();

static/js/marketView.js

@@ -70,9 +70,7 @@ class MarketView {
                 </td></tr>`;
             return;
         }
-        // Backend returns {success: true, coins: [...], count: ...}, so access result.data.coins
-        const data = result.data || {};
-        this.coins = data.coins || data || [];
+        this.coins = result.data || [];
         this.filtered = [...this.coins];
         this.renderTable();
     }
@@ -97,15 +95,7 @@ class MarketView {
                     </td>
                     <td>${coin.name || 'Unknown'}</td>
                     <td>${formatCurrency(coin.price)}</td>
-                    <td class="${coin.change_24h >= 0 ? 'text-success' : 'text-danger'}">
-                        <span class="table-change-icon ${coin.change_24h >= 0 ? 'positive' : 'negative'}">
-                            ${coin.change_24h >= 0 ? 
-                                '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 19V5M5 12l7-7 7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>' :
-                                '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14M19 12l-7 7-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
-                            }
-                        </span>
-                        ${formatPercent(coin.change_24h)}
-                    </td>
+                    <td class="${coin.change_24h >= 0 ? 'text-success' : 'text-danger'}">${formatPercent(coin.change_24h)}</td>
                     <td>${formatCurrency(coin.volume_24h)}</td>
                     <td>${formatCurrency(coin.market_cap)}</td>
                 </tr>
@@ -164,10 +154,7 @@ class MarketView {
                 this.chartWrapper.innerHTML = `<div class="inline-message inline-error">${chart.error}</div>`;
             }
         } else {
-            // Backend returns {success: true, data: [...], ...}, so access result.data.data
-            const chartData = chart.data || {};
-            const points = chartData.data || chartData || [];
-            this.renderChart(points);
+            this.renderChart(chart.data || []);
         }
     }
 

static/js/newsView.js

@@ -48,9 +48,7 @@ class NewsView {
             this.tableBody.innerHTML = `<tr><td colspan="6"><div class="inline-message inline-error">${result.error}</div></td></tr>`;
             return;
         }
-        // Backend returns {success: true, news: [...], count: ...}, so access result.data.news
-        const data = result.data || {};
-        this.dataset = data.news || data || [];
+        this.dataset = result.data || [];
         this.datasetMap.clear();
         this.dataset.forEach((item, index) => {
             const rowId = item.id || `${item.title}-${index}`;

static/js/overviewView.js

@@ -1,6 +1,5 @@
 import apiClient from './apiClient.js';
 import { formatCurrency, formatPercent, renderMessage, createSkeletonRows } from './uiUtils.js';
-import { initMarketOverviewChart, createSparkline } from './charts-enhanced.js';
 
 class OverviewView {
     constructor(section) {
@@ -8,35 +7,13 @@ class OverviewView {
         this.statsContainer = section.querySelector('[data-overview-stats]');
         this.topCoinsBody = section.querySelector('[data-top-coins-body]');
         this.sentimentCanvas = section.querySelector('#sentiment-chart');
-        this.marketOverviewCanvas = section.querySelector('#market-overview-chart');
         this.sentimentChart = null;
-        this.marketData = [];
     }
 
     async init() {
         this.renderStatSkeletons();
-        this.topCoinsBody.innerHTML = createSkeletonRows(6, 8);
-        await Promise.all([
-            this.loadStats(), 
-            this.loadTopCoins(), 
-            this.loadSentiment(),
-            this.loadMarketOverview(),
-            this.loadBackendInfo()
-        ]);
-    }
-
-    async loadMarketOverview() {
-        try {
-            const response = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=true');
-            const data = await response.json();
-            this.marketData = data;
-            
-            if (this.marketOverviewCanvas && data.length > 0) {
-                initMarketOverviewChart(data);
-            }
-        } catch (error) {
-            console.error('Error loading market overview:', error);
-        }
+        this.topCoinsBody.innerHTML = createSkeletonRows(6, 6);
+        await Promise.all([this.loadStats(), this.loadTopCoins(), this.loadSentiment()]);
     }
 
     renderStatSkeletons() {
@@ -57,260 +34,60 @@ class OverviewView {
             });
             return;
         }
-        // Backend returns {success: true, stats: {...}}, so access result.data.stats
-        const data = result.data || {};
-        const stats = data.stats || data;
-        
-        // Debug: Log stats to see what we're getting
-        console.log('[OverviewView] Market Stats:', stats);
-        
-        // Get change data from stats if available
-        const marketCapChange = stats.market_cap_change_24h || 0;
-        const volumeChange = stats.volume_change_24h || 0;
-        
-        // Get Fear & Greed Index
-        const fearGreedValue = stats.fear_greed_value || stats.sentiment?.fear_greed_index?.value || stats.sentiment?.fear_greed_value || 50;
-        const fearGreedClassification = stats.sentiment?.fear_greed_index?.classification || stats.sentiment?.classification || 
-            (fearGreedValue >= 75 ? 'Extreme Greed' : 
-             fearGreedValue >= 55 ? 'Greed' : 
-             fearGreedValue >= 45 ? 'Neutral' : 
-             fearGreedValue >= 25 ? 'Fear' : 'Extreme Fear');
-        
+        const stats = result.data || {};
         const cards = [
-            { 
-                label: 'Total Market Cap', 
-                value: formatCurrency(stats.total_market_cap),
-                change: marketCapChange,
-                icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>`,
-                color: '#06B6D4'
-            },
-            { 
-                label: '24h Volume', 
-                value: formatCurrency(stats.total_volume_24h),
-                change: volumeChange,
-                icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M3 3v18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                    <path d="M7 10l4-4 4 4 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>`,
-                color: '#3B82F6'
-            },
-            { 
-                label: 'BTC Dominance', 
-                value: formatPercent(stats.btc_dominance),
-                change: (Math.random() * 0.5 - 0.25).toFixed(2),
-                icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-                    <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                </svg>`,
-                color: '#F97316'
-            },
-            { 
-                label: 'Fear & Greed Index', 
-                value: fearGreedValue,
-                change: null,
-                classification: fearGreedClassification,
-                icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/>
-                </svg>`,
-                color: fearGreedValue >= 75 ? '#EF4444' : fearGreedValue >= 55 ? '#F97316' : fearGreedValue >= 45 ? '#3B82F6' : fearGreedValue >= 25 ? '#8B5CF6' : '#6366F1',
-                isFearGreed: true
-            },
+            { label: 'Total Market Cap', value: formatCurrency(stats.total_market_cap) },
+            { label: '24h Volume', value: formatCurrency(stats.total_volume_24h) },
+            { label: 'BTC Dominance', value: formatPercent(stats.btc_dominance) },
+            { label: 'ETH Dominance', value: formatPercent(stats.eth_dominance) },
         ];
         this.statsContainer.innerHTML = cards
             .map(
-                (card) => {
-                    const changeValue = card.change ? parseFloat(card.change) : 0;
-                    const isPositive = changeValue >= 0;
-                    
-                    // Special handling for Fear & Greed Index
-                    if (card.isFearGreed) {
-                        const fgColor = card.color;
-                        const fgGradient = fearGreedValue >= 75 ? 'linear-gradient(135deg, #EF4444, #DC2626)' :
-                                          fearGreedValue >= 55 ? 'linear-gradient(135deg, #F97316, #EA580C)' :
-                                          fearGreedValue >= 45 ? 'linear-gradient(135deg, #3B82F6, #2563EB)' :
-                                          fearGreedValue >= 25 ? 'linear-gradient(135deg, #8B5CF6, #7C3AED)' :
-                                          'linear-gradient(135deg, #6366F1, #4F46E5)';
-                        
-                        return `
-                <div class="glass-card stat-card fear-greed-card" style="--card-color: ${fgColor}">
-                    <div class="stat-header">
-                        <div class="stat-icon" style="color: ${fgColor}; background: ${fgGradient};">
-                            ${card.icon}
-                        </div>
-                        <h3>${card.label}</h3>
-                    </div>
-                    <div class="stat-value-wrapper">
-                        <div class="stat-value fear-greed-value" style="color: ${fgColor}; font-size: 2.5rem; font-weight: 800;">
-                            ${card.value}
-                        </div>
-                        <div class="fear-greed-classification" style="color: ${fgColor}; font-weight: 600; font-size: 0.875rem; margin-top: 8px;">
-                            ${card.classification}
-                        </div>
-                    </div>
-                    <div class="fear-greed-gauge" style="margin-top: 16px;">
-                        <div class="gauge-bar" style="background: linear-gradient(90deg, #EF4444 0%, #F97316 25%, #3B82F6 50%, #8B5CF6 75%, #6366F1 100%); height: 8px; border-radius: 4px; position: relative; overflow: hidden;">
-                            <div class="gauge-indicator" style="position: absolute; left: ${fearGreedValue}%; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; background: ${fgColor}; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 8px ${fgColor};"></div>
-                        </div>
-                        <div class="gauge-labels" style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.75rem; color: var(--text-muted);">
-                            <span>Extreme Fear</span>
-                            <span>Neutral</span>
-                            <span>Extreme Greed</span>
-                        </div>
-                    </div>
-                    <div class="stat-metrics">
-                        <div class="stat-metric">
-                            <span class="metric-label">Status</span>
-                            <span class="metric-value" style="color: ${fgColor};">
-                                ${card.classification}
-                            </span>
-                        </div>
-                        <div class="stat-metric">
-                            <span class="metric-label">Updated</span>
-                            <span class="metric-value">
-                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: inline-block; vertical-align: middle; margin-right: 4px; opacity: 0.6;">
-                                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-                                    <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                                </svg>
-                                ${new Date().toLocaleTimeString()}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            `;
-                    }
-                    
-                    return `
-                <div class="glass-card stat-card" style="--card-color: ${card.color}">
-                    <div class="stat-header">
-                        <div class="stat-icon" style="color: ${card.color}">
-                            ${card.icon}
-                        </div>
-                        <h3>${card.label}</h3>
-                    </div>
-                    <div class="stat-value-wrapper">
-                        <div class="stat-value">${card.value}</div>
-                        ${card.change !== null && card.change !== undefined ? `
-                            <div class="stat-change ${isPositive ? 'positive' : 'negative'}">
-                                <div class="change-icon-wrapper ${isPositive ? 'positive' : 'negative'}">
-                                    ${isPositive ? 
-                                        '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 19V5M5 12l7-7 7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>' :
-                                        '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14M19 12l-7 7-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
-                                    }
-                                </div>
-                                <span class="change-value">${isPositive ? '+' : ''}${changeValue.toFixed(2)}%</span>
-                            </div>
-                        ` : ''}
-                    </div>
-                    <div class="stat-metrics">
-                        <div class="stat-metric">
-                            <span class="metric-label">24h Change</span>
-                            <span class="metric-value ${card.change !== null && card.change !== undefined ? (isPositive ? 'positive' : 'negative') : ''}">
-                                ${card.change !== null && card.change !== undefined ? `
-                                    <span class="metric-icon ${isPositive ? 'positive' : 'negative'}">
-                                        ${isPositive ? '↑' : '↓'}
-                                    </span>
-                                    ${isPositive ? '+' : ''}${changeValue.toFixed(2)}%
-                                ` : '—'}
-                            </span>
-                        </div>
-                        <div class="stat-metric">
-                            <span class="metric-label">Updated</span>
-                            <span class="metric-value">
-                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: inline-block; vertical-align: middle; margin-right: 4px; opacity: 0.6;">
-                                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-                                    <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                                </svg>
-                                ${new Date().toLocaleTimeString()}
-                            </span>
-                        </div>
-                    </div>
+                (card) => `
+                <div class="glass-card stat-card">
+                    <h3>${card.label}</h3>
+                    <div class="stat-value">${card.value}</div>
+                    <div class="stat-trend">Updated ${new Date().toLocaleTimeString()}</div>
                 </div>
-            `;
-                }
+            `,
             )
             .join('');
     }
 
     async loadTopCoins() {
-        // Use CoinGecko API directly for better data
-        try {
-            const response = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=true');
-            const coins = await response.json();
-            
-            const rows = coins.map((coin, index) => {
-                const sparklineId = `sparkline-${coin.id}`;
-                const changeColor = coin.price_change_percentage_24h >= 0 ? '#4ade80' : '#ef4444';
-                
-                return `
-                <tr>
-                    <td>${index + 1}</td>
-                    <td>
-                        <div class="chip">${coin.symbol.toUpperCase()}</div>
-                    </td>
-                    <td>
-                        <div style="display: flex; align-items: center; gap: 8px;">
-                            <img src="${coin.image}" alt="${coin.name}" style="width: 24px; height: 24px; border-radius: 50%;">
-                            <span>${coin.name}</span>
-                        </div>
-                    </td>
-                    <td style="font-weight: 600;">${formatCurrency(coin.current_price)}</td>
-                    <td class="${coin.price_change_percentage_24h >= 0 ? 'text-success' : 'text-danger'}">
-                        <span class="table-change-icon ${coin.price_change_percentage_24h >= 0 ? 'positive' : 'negative'}">
-                            ${coin.price_change_percentage_24h >= 0 ? 
-                                '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 19V5M5 12l7-7 7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>' :
-                                '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14M19 12l-7 7-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
-                            }
-                        </span>
-                        ${formatPercent(coin.price_change_percentage_24h)}
-                    </td>
-                    <td>${formatCurrency(coin.total_volume)}</td>
-                    <td>${formatCurrency(coin.market_cap)}</td>
-                    <td>
-                        <div style="width: 100px; height: 40px;">
-                            <canvas id="${sparklineId}" width="100" height="40"></canvas>
-                        </div>
-                    </td>
-                </tr>
-            `;
-            });
-            
-            this.topCoinsBody.innerHTML = rows.join('');
-            
-            // Create sparkline charts after DOM update
-            setTimeout(() => {
-                coins.forEach(coin => {
-                    if (coin.sparkline_in_7d && coin.sparkline_in_7d.price) {
-                        const sparklineId = `sparkline-${coin.id}`;
-                        const changeColor = coin.price_change_percentage_24h >= 0 ? '#4ade80' : '#ef4444';
-                        createSparkline(sparklineId, coin.sparkline_in_7d.price.slice(-24), changeColor);
-                    }
-                });
-            }, 100);
-            
-        } catch (error) {
-            console.error('Error loading top coins:', error);
+        const result = await apiClient.getTopCoins(10);
+        if (!result.ok) {
             this.topCoinsBody.innerHTML = `
-                <tr><td colspan="8">
+                <tr><td colspan="7">
                     <div class="inline-message inline-error">
                         <strong>Failed to load coins</strong>
-                        <p>${error.message}</p>
+                        <p>${result.error}</p>
                     </div>
                 </td></tr>`;
+            return;
         }
+        const rows = (result.data || []).map(
+            (coin, index) => `
+            <tr>
+                <td>${index + 1}</td>
+                <td>${coin.symbol || coin.ticker || '—'}</td>
+                <td>${coin.name || 'Unknown'}</td>
+                <td>${formatCurrency(coin.price)}</td>
+                <td class="${coin.change_24h >= 0 ? 'text-success' : 'text-danger'}">
+                    ${formatPercent(coin.change_24h)}
+                </td>
+                <td>${formatCurrency(coin.volume_24h)}</td>
+                <td>${formatCurrency(coin.market_cap)}</td>
+            </tr>
+        `);
+        this.topCoinsBody.innerHTML = rows.join('');
     }
 
     async loadSentiment() {
         if (!this.sentimentCanvas) return;
-        const container = this.sentimentCanvas.closest('.glass-card');
-        if (!container) return;
-        
         const result = await apiClient.runQuery({ query: 'global crypto sentiment breakdown' });
         if (!result.ok) {
-            container.innerHTML = this.buildSentimentFallback(result.error);
+            this.sentimentCanvas.replaceWith(this.buildSentimentFallback(result.error));
             return;
         }
         const payload = result.data || {};
@@ -320,142 +97,40 @@ class OverviewView {
             neutral: sentiment.neutral ?? 35,
             bearish: sentiment.bearish ?? 25,
         };
-        
-        // Calculate total for percentage
-        const total = data.bullish + data.neutral + data.bearish;
-        const bullishPct = total > 0 ? (data.bullish / total * 100).toFixed(1) : 0;
-        const neutralPct = total > 0 ? (data.neutral / total * 100).toFixed(1) : 0;
-        const bearishPct = total > 0 ? (data.bearish / total * 100).toFixed(1) : 0;
-        
-        // Create modern sentiment UI
-        container.innerHTML = `
-            <div class="sentiment-modern">
-                <div class="sentiment-header">
-                    <h4>Global Sentiment</h4>
-                    <span class="sentiment-badge">AI Powered</span>
-                </div>
-                <div class="sentiment-cards">
-                    <div class="sentiment-item bullish">
-                        <div class="sentiment-item-header">
-                            <div class="sentiment-icon">
-                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="currentColor"/>
-                                </svg>
-                            </div>
-                            <span class="sentiment-label">Bullish</span>
-                            <span class="sentiment-percent">${bullishPct}%</span>
-                        </div>
-                        <div class="sentiment-progress">
-                            <div class="sentiment-progress-bar" style="width: ${bullishPct}%; background: linear-gradient(90deg, #22c55e, #16a34a);"></div>
-                        </div>
-                    </div>
-                    <div class="sentiment-item neutral">
-                        <div class="sentiment-item-header">
-                            <div class="sentiment-icon">
-                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-                                    <path d="M8 12h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                                </svg>
-                            </div>
-                            <span class="sentiment-label">Neutral</span>
-                            <span class="sentiment-percent">${neutralPct}%</span>
-                        </div>
-                        <div class="sentiment-progress">
-                            <div class="sentiment-progress-bar" style="width: ${neutralPct}%; background: linear-gradient(90deg, #38bdf8, #0ea5e9);"></div>
-                        </div>
-                    </div>
-                    <div class="sentiment-item bearish">
-                        <div class="sentiment-item-header">
-                            <div class="sentiment-icon">
-                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M12 22L8.91 15.74L2 14.73L7 9.86L5.82 2.98L12 6.23L18.18 2.98L17 9.86L22 14.73L15.09 15.74L12 22Z" fill="currentColor"/>
-                                </svg>
-                            </div>
-                            <span class="sentiment-label">Bearish</span>
-                            <span class="sentiment-percent">${bearishPct}%</span>
-                        </div>
-                        <div class="sentiment-progress">
-                            <div class="sentiment-progress-bar" style="width: ${bearishPct}%; background: linear-gradient(90deg, #ef4444, #dc2626);"></div>
-                        </div>
-                    </div>
-                </div>
-                <div class="sentiment-summary">
-                    <div class="sentiment-summary-item">
-                        <span class="summary-label">Overall</span>
-                        <span class="summary-value ${data.bullish > data.bearish ? 'bullish' : data.bearish > data.bullish ? 'bearish' : 'neutral'}">
-                            ${data.bullish > data.bearish ? 'Bullish' : data.bearish > data.bullish ? 'Bearish' : 'Neutral'}
-                        </span>
-                    </div>
-                    <div class="sentiment-summary-item">
-                        <span class="summary-label">Confidence</span>
-                        <span class="summary-value">${Math.max(bullishPct, neutralPct, bearishPct)}%</span>
-                    </div>
-                </div>
-            </div>
-        `;
+        if (this.sentimentChart) {
+            this.sentimentChart.destroy();
+        }
+        this.sentimentChart = new Chart(this.sentimentCanvas, {
+            type: 'doughnut',
+            data: {
+                labels: ['Bullish', 'Neutral', 'Bearish'],
+                datasets: [
+                    {
+                        data: [data.bullish, data.neutral, data.bearish],
+                        backgroundColor: ['#22c55e', '#38bdf8', '#ef4444'],
+                        borderWidth: 0,
+                    },
+                ],
+            },
+            options: {
+                cutout: '65%',
+                plugins: {
+                    legend: {
+                        labels: { color: 'var(--text-primary)', usePointStyle: true },
+                    },
+                },
+            },
+        });
     }
 
     buildSentimentFallback(message) {
-        return `
-            <div class="sentiment-modern">
-                <div class="sentiment-header">
-                    <h4>Global Sentiment</h4>
-                    <span class="sentiment-badge">Unavailable</span>
-                </div>
-                <div class="inline-message inline-info" style="margin-top: 1rem;">
-                    <strong>Sentiment insight unavailable</strong>
-                    <p>${message || 'AI sentiment endpoint did not respond in time.'}</p>
-                </div>
-            </div>
+        const wrapper = document.createElement('div');
+        wrapper.className = 'inline-message inline-info';
+        wrapper.innerHTML = `
+            <strong>Sentiment insight unavailable</strong>
+            <p>${message || 'AI sentiment endpoint did not respond in time.'}</p>
         `;
-    }
-
-    async loadBackendInfo() {
-        const backendInfoContainer = this.section.querySelector('[data-backend-info]');
-        if (!backendInfoContainer) return;
-
-        try {
-            // Get API health
-            const healthResult = await apiClient.getHealth();
-            const apiStatusEl = this.section.querySelector('[data-api-status]');
-            if (apiStatusEl) {
-                if (healthResult.ok) {
-                    apiStatusEl.textContent = 'Healthy';
-                    apiStatusEl.style.color = '#22c55e';
-                } else {
-                    apiStatusEl.textContent = 'Error';
-                    apiStatusEl.style.color = '#ef4444';
-                }
-            }
-
-            // Get providers count
-            const providersResult = await apiClient.getProviders();
-            const providersCountEl = this.section.querySelector('[data-providers-count]');
-            if (providersCountEl && providersResult.ok) {
-                const providers = providersResult.data?.providers || providersResult.data || [];
-                const activeCount = Array.isArray(providers) ? providers.filter(p => p.status === 'active' || p.status === 'online').length : 0;
-                const totalCount = Array.isArray(providers) ? providers.length : 0;
-                providersCountEl.textContent = `${activeCount}/${totalCount} Active`;
-                providersCountEl.style.color = activeCount > 0 ? '#22c55e' : '#ef4444';
-            }
-
-            // Update last update time
-            const lastUpdateEl = this.section.querySelector('[data-last-update]');
-            if (lastUpdateEl) {
-                lastUpdateEl.textContent = new Date().toLocaleTimeString();
-                lastUpdateEl.style.color = 'var(--text-secondary)';
-            }
-
-            // WebSocket status is handled by app.js
-            const wsStatusEl = this.section.querySelector('[data-ws-status]');
-            if (wsStatusEl) {
-                // Will be updated by wsClient status change handler
-                wsStatusEl.textContent = 'Checking...';
-                wsStatusEl.style.color = '#f59e0b';
-            }
-        } catch (error) {
-            console.error('Error loading backend info:', error);
-        }
+        return wrapper;
     }
 }
 

static/js/providersView.js

@@ -33,7 +33,6 @@ class ProvidersView {
             this.tableBody.innerHTML = `<tr><td colspan="5"><div class="inline-message inline-error">${result.error}</div></td></tr>`;
             return;
         }
-        // Backend returns {providers: [...], total: ..., ...}, so access result.data.providers
         const data = result.data || {};
         this.providers = data.providers || data || [];
         this.applyFilters();

static/js/uiUtils.js

@@ -1,15 +1,8 @@
 export function formatCurrency(value) {
-    if (value === null || value === undefined || value === '') {
+    if (value === null || value === undefined || Number.isNaN(Number(value))) {
         return '—';
     }
     const num = Number(value);
-    if (Number.isNaN(num)) {
-        return '—';
-    }
-    // Don't return '—' for 0, show $0.00 instead
-    if (num === 0) {
-        return '$0.00';
-    }
     if (Math.abs(num) >= 1_000_000_000_000) {
         return `$${(num / 1_000_000_000_000).toFixed(2)}T`;
     }
@@ -19,10 +12,7 @@ export function formatCurrency(value) {
     if (Math.abs(num) >= 1_000_000) {
         return `$${(num / 1_000_000).toFixed(2)}M`;
     }
-    if (Math.abs(num) >= 1_000) {
-        return `$${(num / 1_000).toFixed(2)}K`;
-    }
-    return `$${num.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })}`;
+    return `$${num.toLocaleString(undefined, { maximumFractionDigits: 2 })}`;
 }
 
 export function formatPercent(value) {

static/js/wsClient.js

@@ -1,8 +1,3 @@
-/**
- * WebSocket Client for Real-time Communication
- * Manages WebSocket connections with automatic reconnection and exponential backoff
- * Supports message routing to type-specific subscribers
- */
 class WSClient {
     constructor() {
         this.socket = null;
@@ -11,83 +6,35 @@ class WSClient {
         this.globalSubscribers = new Set();
         this.typeSubscribers = new Map();
         this.eventLog = [];
-        this.backoff = 1000; // Initial backoff delay in ms
-        this.maxBackoff = 16000; // Maximum backoff delay in ms
+        this.backoff = 1000;
+        this.maxBackoff = 16000;
         this.shouldReconnect = true;
-        this.reconnectAttempts = 0;
-        this.connectionStartTime = null;
     }
 
-    /**
-     * Automatically determine WebSocket URL based on environment
-     * Uses localhost for local development, HuggingFace Space URL for production
-     */
     get url() {
-        if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
-            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-            return `${protocol}//${window.location.hostname}:7860/ws`;
-        } else {
-            return 'wss://really-amin-datasourceforcryptocurrency.hf.space/ws';
-        }
+        const { protocol, host } = window.location;
+        const wsProtocol = protocol === 'https:' ? 'wss:' : 'ws:';
+        return `${wsProtocol}//${host}/ws`;
     }
 
-    /**
-     * Log WebSocket events for debugging and monitoring
-     * Maintains a rolling buffer of the last 100 events
-     * @param {Object} event - Event object to log
-     */
     logEvent(event) {
-        const entry = { 
-            ...event, 
-            time: new Date().toISOString(),
-            attempt: this.reconnectAttempts 
-        };
+        const entry = { ...event, time: new Date().toISOString() };
         this.eventLog.push(entry);
-        // Keep only last 100 events
-        if (this.eventLog.length > 100) {
-            this.eventLog = this.eventLog.slice(-100);
-        }
-        console.log('[WSClient]', entry);
+        this.eventLog = this.eventLog.slice(-100);
     }
 
-    /**
-     * Subscribe to connection status changes
-     * @param {Function} callback - Called with new status ('connecting', 'connected', 'disconnected', 'error')
-     * @returns {Function} Unsubscribe function
-     */
     onStatusChange(callback) {
-        if (typeof callback !== 'function') {
-            throw new Error('Callback must be a function');
-        }
         this.statusSubscribers.add(callback);
-        // Immediately call with current status
         callback(this.status);
         return () => this.statusSubscribers.delete(callback);
     }
 
-    /**
-     * Subscribe to all WebSocket messages
-     * @param {Function} callback - Called with parsed message data
-     * @returns {Function} Unsubscribe function
-     */
     onMessage(callback) {
-        if (typeof callback !== 'function') {
-            throw new Error('Callback must be a function');
-        }
         this.globalSubscribers.add(callback);
         return () => this.globalSubscribers.delete(callback);
     }
 
-    /**
-     * Subscribe to specific message types
-     * @param {string} type - Message type to subscribe to (e.g., 'market_update', 'news_update')
-     * @param {Function} callback - Called with messages of the specified type
-     * @returns {Function} Unsubscribe function
-     */
     subscribe(type, callback) {
-        if (typeof callback !== 'function') {
-            throw new Error('Callback must be a function');
-        }
         if (!this.typeSubscribers.has(type)) {
             this.typeSubscribers.set(type, new Set());
         }
@@ -96,269 +43,69 @@ class WSClient {
         return () => set.delete(callback);
     }
 
-    /**
-     * Update connection status and notify all subscribers
-     * @param {string} newStatus - New status value
-     */
     updateStatus(newStatus) {
-        if (this.status !== newStatus) {
-            const oldStatus = this.status;
-            this.status = newStatus;
-            this.logEvent({ 
-                type: 'status_change', 
-                from: oldStatus, 
-                to: newStatus 
-            });
-            this.statusSubscribers.forEach(cb => {
-                try {
-                    cb(newStatus);
-                } catch (error) {
-                    console.error('[WSClient] Error in status subscriber:', error);
-                }
-            });
-        }
+        this.status = newStatus;
+        this.statusSubscribers.forEach((cb) => cb(newStatus));
     }
 
-    /**
-     * Establish WebSocket connection with automatic reconnection
-     * Implements exponential backoff for reconnection attempts
-     */
     connect() {
-        // Prevent multiple simultaneous connection attempts
-        if (this.socket && (this.socket.readyState === WebSocket.CONNECTING || this.socket.readyState === WebSocket.OPEN)) {
-            console.log('[WSClient] Already connected or connecting');
+        if (this.socket && (this.status === 'connecting' || this.status === 'connected')) {
             return;
         }
 
-        this.connectionStartTime = Date.now();
         this.updateStatus('connecting');
-        
-        try {
-            this.socket = new WebSocket(this.url);
-            this.logEvent({ 
-                type: 'connection_attempt', 
-                url: this.url,
-                attempt: this.reconnectAttempts + 1
-            });
-
-            this.socket.onopen = () => {
-                const connectionTime = Date.now() - this.connectionStartTime;
-                this.backoff = 1000; // Reset backoff on successful connection
-                this.reconnectAttempts = 0;
-                this.updateStatus('connected');
-                this.logEvent({ 
-                    type: 'connection_established', 
-                    connectionTime: `${connectionTime}ms`
-                });
-                console.log(`[WSClient] Connected to ${this.url} in ${connectionTime}ms`);
-            };
-
-            this.socket.onmessage = (event) => {
-                try {
-                    const data = JSON.parse(event.data);
-                    this.logEvent({ 
-                        type: 'message_received', 
-                        messageType: data.type || 'unknown',
-                        size: event.data.length 
-                    });
-                    
-                    // Notify global subscribers
-                    this.globalSubscribers.forEach(cb => {
-                        try {
-                            cb(data);
-                        } catch (error) {
-                            console.error('[WSClient] Error in global subscriber:', error);
-                        }
-                    });
-                    
-                    // Notify type-specific subscribers
-                    if (data.type && this.typeSubscribers.has(data.type)) {
-                        this.typeSubscribers.get(data.type).forEach(cb => {
-                            try {
-                                cb(data);
-                            } catch (error) {
-                                console.error(`[WSClient] Error in ${data.type} subscriber:`, error);
-                            }
-                        });
-                    }
-                } catch (error) {
-                    console.error('[WSClient] Message parse error:', error);
-                    this.logEvent({ 
-                        type: 'parse_error', 
-                        error: error.message,
-                        rawData: event.data.substring(0, 100) 
-                    });
-                }
-            };
-
-            this.socket.onclose = (event) => {
-                const wasConnected = this.status === 'connected';
-                this.updateStatus('disconnected');
-                this.logEvent({ 
-                    type: 'connection_closed', 
-                    code: event.code,
-                    reason: event.reason || 'No reason provided',
-                    wasClean: event.wasClean
-                });
-                
-                // Attempt reconnection if enabled
-                if (this.shouldReconnect) {
-                    this.reconnectAttempts++;
-                    const delay = this.backoff;
-                    this.backoff = Math.min(this.backoff * 2, this.maxBackoff);
-                    
-                    console.log(`[WSClient] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})...`);
-                    this.logEvent({ 
-                        type: 'reconnect_scheduled', 
-                        delay: `${delay}ms`,
-                        nextBackoff: `${this.backoff}ms`
-                    });
-                    
-                    setTimeout(() => this.connect(), delay);
+        this.socket = new WebSocket(this.url);
+        this.logEvent({ type: 'status', status: 'connecting' });
+
+        this.socket.addEventListener('open', () => {
+            this.backoff = 1000;
+            this.updateStatus('connected');
+            this.logEvent({ type: 'status', status: 'connected' });
+        });
+
+        this.socket.addEventListener('message', (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                this.logEvent({ type: 'message', messageType: data.type || 'unknown' });
+                this.globalSubscribers.forEach((cb) => cb(data));
+                if (data.type && this.typeSubscribers.has(data.type)) {
+                    this.typeSubscribers.get(data.type).forEach((cb) => cb(data));
                 }
-            };
+            } catch (error) {
+                console.error('WS message parse error', error);
+            }
+        });
 
-            this.socket.onerror = (error) => {
-                console.error('[WSClient] WebSocket error:', error);
-                this.updateStatus('error');
-                this.logEvent({ 
-                    type: 'connection_error', 
-                    error: error.message || 'Unknown error',
-                    readyState: this.socket ? this.socket.readyState : 'null'
-                });
-            };
-        } catch (error) {
-            console.error('[WSClient] Failed to create WebSocket:', error);
-            this.updateStatus('error');
-            this.logEvent({ 
-                type: 'creation_error', 
-                error: error.message 
-            });
-            
-            // Retry connection if enabled
+        this.socket.addEventListener('close', () => {
+            this.updateStatus('disconnected');
+            this.logEvent({ type: 'status', status: 'disconnected' });
             if (this.shouldReconnect) {
-                this.reconnectAttempts++;
                 const delay = this.backoff;
                 this.backoff = Math.min(this.backoff * 2, this.maxBackoff);
                 setTimeout(() => this.connect(), delay);
             }
-        }
+        });
+
+        this.socket.addEventListener('error', (error) => {
+            console.error('WebSocket error', error);
+            this.logEvent({ type: 'error', details: error.message || 'unknown' });
+            if (this.socket) {
+                this.socket.close();
+            }
+        });
     }
 
-    /**
-     * Gracefully disconnect WebSocket and disable automatic reconnection
-     */
     disconnect() {
         this.shouldReconnect = false;
         if (this.socket) {
-            this.logEvent({ type: 'manual_disconnect' });
-            this.socket.close(1000, 'Client disconnect');
-            this.socket = null;
+            this.socket.close();
         }
     }
 
-    /**
-     * Manually trigger reconnection (useful for testing or recovery)
-     */
-    reconnect() {
-        this.disconnect();
-        this.shouldReconnect = true;
-        this.backoff = 1000; // Reset backoff
-        this.reconnectAttempts = 0;
-        this.connect();
-    }
-
-    /**
-     * Send a message through the WebSocket connection
-     * @param {Object} data - Data to send (will be JSON stringified)
-     * @returns {boolean} True if sent successfully, false otherwise
-     */
-    send(data) {
-        if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
-            console.error('[WSClient] Cannot send message: not connected');
-            this.logEvent({ 
-                type: 'send_failed', 
-                reason: 'not_connected',
-                readyState: this.socket ? this.socket.readyState : 'null'
-            });
-            return false;
-        }
-
-        try {
-            const message = JSON.stringify(data);
-            this.socket.send(message);
-            this.logEvent({ 
-                type: 'message_sent', 
-                messageType: data.type || 'unknown',
-                size: message.length 
-            });
-            return true;
-        } catch (error) {
-            console.error('[WSClient] Failed to send message:', error);
-            this.logEvent({ 
-                type: 'send_error', 
-                error: error.message 
-            });
-            return false;
-        }
-    }
-
-    /**
-     * Get a copy of the event log
-     * @returns {Array} Array of logged events
-     */
     getEvents() {
         return [...this.eventLog];
     }
-
-    /**
-     * Get current connection statistics
-     * @returns {Object} Connection statistics
-     */
-    getStats() {
-        return {
-            status: this.status,
-            reconnectAttempts: this.reconnectAttempts,
-            currentBackoff: this.backoff,
-            maxBackoff: this.maxBackoff,
-            shouldReconnect: this.shouldReconnect,
-            subscriberCounts: {
-                status: this.statusSubscribers.size,
-                global: this.globalSubscribers.size,
-                typed: Array.from(this.typeSubscribers.entries()).map(([type, subs]) => ({
-                    type,
-                    count: subs.size
-                }))
-            },
-            eventLogSize: this.eventLog.length,
-            url: this.url
-        };
-    }
-
-    /**
-     * Check if WebSocket is currently connected
-     * @returns {boolean} True if connected
-     */
-    isConnected() {
-        return this.socket && this.socket.readyState === WebSocket.OPEN;
-    }
-
-    /**
-     * Clear all subscribers (useful for cleanup)
-     */
-    clearSubscribers() {
-        this.statusSubscribers.clear();
-        this.globalSubscribers.clear();
-        this.typeSubscribers.clear();
-        this.logEvent({ type: 'subscribers_cleared' });
-    }
 }
 
-// Create singleton instance
 const wsClient = new WSClient();
-
-// Auto-connect on module load
-wsClient.connect();
-
-// Export singleton instance
-export default wsClient;
+export default wsClient;

unified_dashboard.html

@@ -8,152 +8,54 @@
     <link rel="stylesheet" href="static/css/design-system.css" />
     <link rel="stylesheet" href="static/css/dashboard.css" />
     <link rel="stylesheet" href="static/css/pro-dashboard.css" />
-    <link rel="stylesheet" href="static/css/modern-dashboard.css" />
-    <link rel="stylesheet" href="static/css/glassmorphism.css" />
-    <link rel="stylesheet" href="static/css/light-minimal-theme.css" />
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" defer></script>
-    <script src="static/js/animations.js" defer></script>
-    <script src="static/js/menu-system.js" defer></script>
-    <script src="static/js/huggingface-integration.js" defer></script>
 </head>
-<body data-theme="light">
+<body data-theme="dark">
     <div class="app-shell">
-        <aside class="sidebar sidebar-modern">
-            <div class="brand brand-modern">
-                <div class="brand-icon">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <aside class="sidebar">
+            <div class="brand">
+                <strong>Crypto Monitor HF</strong>
+                <span class="env-pill">
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="1.5" />
                         <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="1.5" />
                         <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="1.5" />
                     </svg>
-                </div>
-                <div class="brand-text">
-                    <strong>Crypto Monitor HF</strong>
-                    <span class="env-pill">
-                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="1.5" />
-                        </svg>
-                        HF Space
-                    </span>
-                </div>
+                    HF Space
+                </span>
             </div>
-            <nav class="nav nav-modern">
-                <button class="nav-button nav-button-modern active" data-nav="page-overview">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                        <path d="M9 22V12h6v10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>
-                    <span>Overview</span>
-                </button>
-                <button class="nav-button nav-button-modern" data-nav="page-market">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M3 3v18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                        <path d="M7 10l4-4 4 4 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>
-                    <span>Market</span>
-                </button>
-                <button class="nav-button nav-button-modern" data-nav="page-chart">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M3 3v18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                        <path d="M7 16l4-4 4 4 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>
-                    <span>Chart Lab</span>
-                </button>
-                <button class="nav-button nav-button-modern" data-nav="page-ai">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>
-                    <span>Sentiment & AI</span>
-                </button>
-                <button class="nav-button nav-button-modern" data-nav="page-news">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M4 19.5A2.5 2.5 0 016.5 17H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>
-                    <span>News</span>
-                </button>
-                <button class="nav-button nav-button-modern" data-nav="page-providers">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-                        <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                    </svg>
-                    <span>Providers</span>
-                </button>
-                <button class="nav-button nav-button-modern" data-nav="page-api">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>
-                    <span>API Explorer</span>
-                </button>
-                <button class="nav-button nav-button-modern" data-nav="page-debug">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-                        <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                    </svg>
-                    <span>Diagnostics</span>
-                </button>
-                <button class="nav-button nav-button-modern" data-nav="page-datasets">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>
-                    <span>Datasets & Models</span>
-                </button>
-                <button class="nav-button nav-button-modern" data-nav="page-settings">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
-                        <path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                    </svg>
-                    <span>Settings</span>
-                </button>
+            <nav class="nav">
+                <button class="nav-button active" data-nav="page-overview">Overview</button>
+                <button class="nav-button" data-nav="page-market">Market</button>
+                <button class="nav-button" data-nav="page-chart">Chart Lab</button>
+                <button class="nav-button" data-nav="page-ai">Sentiment & AI</button>
+                <button class="nav-button" data-nav="page-news">News</button>
+                <button class="nav-button" data-nav="page-providers">Providers</button>
+                <button class="nav-button" data-nav="page-api">API Explorer</button>
+                <button class="nav-button" data-nav="page-debug">Diagnostics</button>
+                <button class="nav-button" data-nav="page-datasets">Datasets & Models</button>
+                <button class="nav-button" data-nav="page-settings">Settings</button>
             </nav>
             <div class="sidebar-footer">
-                <div class="footer-badge">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>
-                    Unified Intelligence Console
-                </div>
+                Unified crypto intelligence console<br />Realtime data • HF optimized
             </div>
         </aside>
         <main class="main-area">
-            <header class="modern-header">
-                <div style="display: flex; align-items: center; justify-content: space-between; width: 100%; flex-wrap: wrap; gap: 16px;">
-                    <div>
-                        <h1 style="margin: 0; font-size: 1.75rem; font-weight: 800; background: linear-gradient(135deg, #00D4FF, #8B5CF6, #EC4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Unified Intelligence Dashboard</h1>
-                        <p class="text-muted" style="margin: 4px 0 0 0; font-size: 0.875rem;">Live market telemetry, AI signals, diagnostics, and provider health.</p>
+            <header class="topbar">
+                <div>
+                    <h1>Unified Intelligence Dashboard</h1>
+                    <p class="text-muted">Live market telemetry, AI signals, diagnostics, and provider health.</p>
+                </div>
+                <div class="status-group">
+                    <div class="status-pill" data-api-health data-state="warn">
+                        <span class="status-dot"></span>
+                        <span>checking</span>
                     </div>
-                    <div class="status-group" style="display: flex; gap: 12px; align-items: center; position: relative;">
-                        <div class="status-pill" data-api-health data-state="warn" style="padding: 8px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);">
-                            <span class="status-dot"></span>
-                            <span>checking</span>
-                        </div>
-                        <div class="status-pill" data-ws-status data-state="warn" style="padding: 8px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);">
-                            <span class="status-dot"></span>
-                            <span>connecting</span>
-                        </div>
-                        <button class="button-3d" data-menu-trigger="theme-menu" style="padding: 8px 16px; position: relative;">
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
-                                <path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                            </svg>
-                        </button>
-                        <div class="menu-dropdown" data-menu="theme-menu" style="display: none; top: 100%; right: 0; margin-top: 8px;">
-                            <div class="menu-item" data-action="theme-light">
-                                <span>☀️ Light Theme</span>
-                            </div>
-                            <div class="menu-item" data-action="theme-dark">
-                                <span>🌙 Dark Theme</span>
-                            </div>
-                            <div class="menu-separator"></div>
-                            <div class="menu-item" data-action="settings">
-                                <span>⚙️ Settings</span>
-                            </div>
-                        </div>
+                    <div class="status-pill" data-ws-status data-state="warn">
+                        <span class="status-dot"></span>
+                        <span>connecting</span>
                     </div>
                 </div>
-                <div class="header-crypto-list" data-header-crypto-list style="margin-top: 16px; width: 100%;">
-                    <!-- Crypto list will be populated by JavaScript -->
-                </div>
             </header>
             <div class="page-container">
                 <section id="page-overview" class="page active">
@@ -193,30 +95,6 @@
                             <canvas id="sentiment-chart" height="220"></canvas>
                         </div>
                     </div>
-                    <div class="glass-card" style="margin-top: 24px;">
-                        <div class="section-header">
-                            <h3>Backend Information</h3>
-                            <span class="text-muted">System Status</span>
-                        </div>
-                        <div data-backend-info class="backend-info-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 16px;">
-                            <div class="backend-info-item">
-                                <span class="info-label">API Status</span>
-                                <span class="info-value" data-api-status>Checking...</span>
-                            </div>
-                            <div class="backend-info-item">
-                                <span class="info-label">WebSocket</span>
-                                <span class="info-value" data-ws-status>Connecting...</span>
-                            </div>
-                            <div class="backend-info-item">
-                                <span class="info-label">Providers</span>
-                                <span class="info-value" data-providers-count>—</span>
-                            </div>
-                            <div class="backend-info-item">
-                                <span class="info-label">Last Update</span>
-                                <span class="info-value" data-last-update>—</span>
-                            </div>
-                        </div>
-                    </div>
                 </section>
 
                 <section id="page-market" class="page">
@@ -275,53 +153,32 @@
 
                 <section id="page-chart" class="page">
                     <div class="section-header">
-                        <h2 class="section-title">Chart Lab - TradingView Style</h2>
+                        <h2 class="section-title">Chart Lab</h2>
                         <div class="controls-bar">
-                            <select data-chart-symbol style="padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-primary);">
+                            <select data-chart-symbol>
                                 <option value="BTC">BTC</option>
                                 <option value="ETH">ETH</option>
                                 <option value="SOL">SOL</option>
                                 <option value="BNB">BNB</option>
-                                <option value="ADA">ADA</option>
-                                <option value="DOT">DOT</option>
-                                <option value="MATIC">MATIC</option>
-                                <option value="AVAX">AVAX</option>
                             </select>
-                            <div class="chart-toolbar">
-                                <button class="chart-timeframe-btn active" data-chart-timeframe="1d">1D</button>
-                                <button class="chart-timeframe-btn" data-chart-timeframe="7d">7D</button>
-                                <button class="chart-timeframe-btn" data-chart-timeframe="30d">30D</button>
-                                <button class="chart-timeframe-btn" data-chart-timeframe="90d">90D</button>
+                            <div class="input-chip">
+                                <button class="ghost active" data-chart-timeframe="7d">7D</button>
+                                <button class="ghost" data-chart-timeframe="30d">30D</button>
+                                <button class="ghost" data-chart-timeframe="90d">90D</button>
                             </div>
                         </div>
                     </div>
-                    <div class="tradingview-chart-container glass-vibrant">
-                        <div class="chart-toolbar">
-                            <div class="chart-indicators">
-                                <label class="chart-indicator-toggle">
-                                    <input type="checkbox" data-indicator="MA20" checked />
-                                    <span>MA 20</span>
-                                </label>
-                                <label class="chart-indicator-toggle">
-                                    <input type="checkbox" data-indicator="MA50" />
-                                    <span>MA 50</span>
-                                </label>
-                                <label class="chart-indicator-toggle">
-                                    <input type="checkbox" data-indicator="RSI" />
-                                    <span>RSI</span>
-                                </label>
-                                <label class="chart-indicator-toggle">
-                                    <input type="checkbox" data-indicator="Volume" checked />
-                                    <span>Volume</span>
-                                </label>
-                            </div>
-                        </div>
-                        <canvas id="chart-lab-canvas" height="400"></canvas>
+                    <div class="glass-card">
+                        <canvas id="chart-lab-canvas" height="260"></canvas>
                     </div>
-                    <div class="glass-card glass-vibrant" style="margin-top: 24px;">
-                        <div class="controls-bar" style="margin-bottom: 16px;">
-                            <button class="primary" data-run-analysis style="background: linear-gradient(135deg, #00D4FF, #8B5CF6);">Analyze Chart with AI</button>
+                    <div class="glass-card">
+                        <div class="controls-bar">
+                            <label><input type="checkbox" data-indicator value="MA20" checked /> MA 20</label>
+                            <label><input type="checkbox" data-indicator value="MA50" /> MA 50</label>
+                            <label><input type="checkbox" data-indicator value="RSI" /> RSI</label>
+                            <label><input type="checkbox" data-indicator value="Volume" /> Volume</label>
                         </div>
+                        <button class="primary" data-run-analysis>Analyze Chart with AI</button>
                         <div data-ai-insights class="ai-insights"></div>
                     </div>
                 </section>