Spaces:

Really-amin
/

Datasourceforcryptocurrency

Running

App Files Files Community

Really-amin commited on 5 days ago

Commit

dd7ffbd

verified ·

1 Parent(s): 322f1ff

Upload 196 files

Browse files

Files changed (33) hide show

.dockerignore +121 -16
UI_DEMO.html +400 -0
ai_models.py +408 -40
api_server_extended.py +1384 -96
app.py +64 -0
backend/__pycache__/__init__.cpython-313.pyc +0 -0
backend/services/__pycache__/__init__.cpython-313.pyc +0 -0
backend/services/__pycache__/resource_validator.cpython-313.pyc +0 -0
config.py +15 -0
crypto_resources_unified_2025-11-11.json +0 -0
index.html +138 -0
requirements.txt +1 -0
static/css/components.css +778 -161
static/css/design-system.css +1 -1
static/css/design-tokens.css +170 -292
static/css/enhancements.css +440 -0
static/css/enterprise-components.css +2 -7
static/css/pro-dashboard.css +341 -3014
static/css/toast.css +88 -160
static/js/aiAdvisorView.js +105 -70
static/js/apiClient.js +17 -138
static/js/apiExplorerView.js +2 -4
static/js/app.js +856 -58
static/js/chartLabView.js +88 -419
static/js/datasetsModelsView.js +3 -9
static/js/debugConsoleView.js +23 -25
static/js/marketView.js +3 -16
static/js/newsView.js +1 -3
static/js/overviewView.js +64 -389
static/js/provider-discovery.js +33 -107
static/js/providersView.js +0 -1
static/js/uiUtils.js +61 -88
static/js/wsClient.js +44 -294

.dockerignore CHANGED Viewed

@@ -1,16 +1,121 @@
-__pycache__/
-*.pyc
-*.pyo
-*.log
-.venv/
-venv/
-.git/
-.gitignore
-dist/
-build/
-*.zip
-*.tar*
-*.db
-*.sqlite
-*.sqlite3

+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+pip-log.txt
+pip-delete-this-directory.txt
+# Virtual environments
+venv/
+ENV/
+env/
+.venv
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+.DS_Store
+# Git
+.git/
+.gitignore
+.gitattributes
+# Documentation
+*.md
+docs/
+README*.md
+CHANGELOG.md
+LICENSE
+# Testing
+.pytest_cache/
+.coverage
+htmlcov/
+.tox/
+.hypothesis/
+tests/
+test_*.py
+# Logs and databases (will be created in container)
+*.log
+logs/
+data/*.db
+data/*.sqlite
+data/*.db-journal
+# Environment files (should be set via docker-compose or HF Secrets)
+.env
+.env.*
+!.env.example
+# Docker
+docker-compose*.yml
+!docker-compose.yml
+Dockerfile
+.dockerignore
+# CI/CD
+.github/
+.gitlab-ci.yml
+.travis.yml
+azure-pipelines.yml
+# Temporary files
+*.tmp
+*.bak
+*.swp
+temp/
+tmp/
+# Node modules (if any)
+node_modules/
+package-lock.json
+yarn.lock
+# OS files
+Thumbs.db
+.DS_Store
+desktop.ini
+# Jupyter notebooks
+.ipynb_checkpoints/
+*.ipynb
+# Model cache (models will be downloaded in container)
+models/
+.cache/
+.huggingface/
+# Large files that shouldn't be in image
+*.tar
+*.tar.gz
+*.zip
+*.rar
+*.7z
+# Screenshots and assets not needed
+screenshots/
+assets/*.png
+assets/*.jpg

UI_DEMO.html ADDED Viewed

	@@ -0,0 +1,400 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UI Components Demo - Crypto Intelligence Hub</title>
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <!-- Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Styles -->
+    <link rel="stylesheet" href="/static/css/main.css">
+    <link rel="stylesheet" href="/static/css/toast.css">
+    <link rel="stylesheet" href="/static/css/enhancements.css">
+    <style>
+        .demo-section {
+            margin-bottom: 40px;
+            padding: 30px;
+            background: rgba(17, 24, 39, 0.6);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+        }
+        .demo-title {
+            font-size: 24px;
+            font-weight: 700;
+            margin-bottom: 20px;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .demo-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-top: 20px;
+        }
+        .code-block {
+            background: rgba(0, 0, 0, 0.4);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 15px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 13px;
+            color: #a5d6ff;
+            margin-top: 10px;
+            overflow-x: auto;
+        }
+    </style>
+</head>
+<body>
+    <div class="toast-container" id="toast-container"></div>
+    <div class="app-container">
+        <header class="app-header">
+            <div class="header-content">
+                <div class="logo">
+                    <div class="logo-icon">
+                        <i class="fas fa-palette"></i>
+                    </div>
+                    <div class="logo-text">
+                        <h1>UI Components Demo</h1>
+                        <p><i class="fas fa-code"></i> Crypto Intelligence Hub Design System</p>
+                    </div>
+                </div>
+                <button class="theme-toggle" onclick="toggleTheme()">
+                    <i class="fas fa-moon"></i>
+                </button>
+            </div>
+        </header>
+        <main class="main-content">
+            <!-- Toast Notifications -->
+            <section class="demo-section">
+                <h2 class="demo-title">🔔 Toast Notifications</h2>
+                <p style="color: var(--text-secondary); margin-bottom: 20px;">
+                    Modern slide-in notifications with auto-dismiss
+                </p>
+                <div class="demo-grid">
+                    <button class="btn-primary" onclick="showToast('success')">
+                        <i class="fas fa-check"></i> Success Toast
+                    </button>
+                    <button class="btn-primary" onclick="showToast('error')">
+                        <i class="fas fa-times"></i> Error Toast
+                    </button>
+                    <button class="btn-primary" onclick="showToast('warning')">
+                        <i class="fas fa-exclamation"></i> Warning Toast
+                    </button>
+                    <button class="btn-primary" onclick="showToast('info')">
+                        <i class="fas fa-info"></i> Info Toast
+                    </button>
+                </div>
+                <div class="code-block">ToastManager.success('Operation completed!');</div>
+            </section>
+            <!-- Stat Cards -->
+            <section class="demo-section">
+                <h2 class="demo-title">📊 Stat Cards</h2>
+                <div class="stats-grid">
+                    <div class="stat-card gradient-purple">
+                        <div class="stat-icon"><i class="fas fa-database"></i></div>
+                        <div class="stat-content">
+                            <div class="stat-value">1,234</div>
+                            <div class="stat-label">Total Resources</div>
+                            <div class="stat-trend"><i class="fas fa-arrow-up"></i> +12% this month</div>
+                        </div>
+                    </div>
+                    <div class="stat-card gradient-green">
+                        <div class="stat-icon"><i class="fas fa-gift"></i></div>
+                        <div class="stat-content">
+                            <div class="stat-value">567</div>
+                            <div class="stat-label">Free Resources</div>
+                            <div class="stat-trend"><i class="fas fa-check-circle"></i> Available</div>
+                        </div>
+                    </div>
+                    <div class="stat-card gradient-blue">
+                        <div class="stat-icon"><i class="fas fa-robot"></i></div>
+                        <div class="stat-content">
+                            <div class="stat-value">89</div>
+                            <div class="stat-label">AI Models</div>
+                            <div class="stat-trend"><i class="fas fa-brain"></i> Ready</div>
+                        </div>
+                    </div>
+                    <div class="stat-card gradient-orange">
+                        <div class="stat-icon"><i class="fas fa-server"></i></div>
+                        <div class="stat-content">
+                            <div class="stat-value">45</div>
+                            <div class="stat-label">Providers</div>
+                            <div class="stat-trend"><i class="fas fa-signal"></i> Online</div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <!-- Sentiment Badges -->
+            <section class="demo-section">
+                <h2 class="demo-title">💭 Sentiment Badges</h2>
+                <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+                    <span class="sentiment-badge bullish">
+                        <i class="fas fa-arrow-up"></i> Bullish
+                    </span>
+                    <span class="sentiment-badge bearish">
+                        <i class="fas fa-arrow-down"></i> Bearish
+                    </span>
+                    <span class="sentiment-badge neutral">
+                        <i class="fas fa-minus"></i> Neutral
+                    </span>
+                </div>
+                <div class="code-block">&lt;span class="sentiment-badge bullish"&gt;Bullish&lt;/span&gt;</div>
+            </section>
+            <!-- Model Status -->
+            <section class="demo-section">
+                <h2 class="demo-title">🤖 Model Status Indicators</h2>
+                <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+                    <span class="model-status available">
+                        <i class="fas fa-check"></i> Available
+                    </span>
+                    <span class="model-status unavailable">
+                        <i class="fas fa-times"></i> Unavailable
+                    </span>
+                    <span class="model-status partial">
+                        <i class="fas fa-exclamation"></i> Partial
+                    </span>
+                </div>
+            </section>
+            <!-- Loading States -->
+            <section class="demo-section">
+                <h2 class="demo-title">⏳ Loading States</h2>
+                <div class="demo-grid">
+                    <div class="card">
+                        <h3>Spinner</h3>
+                        <div class="loading">
+                            <div class="spinner"></div>
+                            <p>Loading data...</p>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <h3>Skeleton</h3>
+                        <div class="skeleton skeleton-title"></div>
+                        <div class="skeleton skeleton-text"></div>
+                        <div class="skeleton skeleton-text"></div>
+                    </div>
+                </div>
+            </section>
+            <!-- Glassmorphism -->
+            <section class="demo-section">
+                <h2 class="demo-title">✨ Glassmorphism Effects</h2>
+                <div class="glass-card" style="padding: 30px; text-align: center;">
+                    <h3 class="neon-text">Frosted Glass Card</h3>
+                    <p style="color: var(--text-secondary);">
+                        Semi-transparent background with backdrop blur
+                    </p>
+                </div>
+                <div class="code-block">&lt;div class="glass-card"&gt;...&lt;/div&gt;</div>
+            </section>
+            <!-- Market Table -->
+            <section class="demo-section">
+                <h2 class="demo-title">📈 Market Table</h2>
+                <table class="market-table">
+                    <thead>
+                        <tr>
+                            <th>Coin</th>
+                            <th>Price</th>
+                            <th>24h Change</th>
+                            <th>Market Cap</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td class="coin-info">
+                                <div style="width: 32px; height: 32px; background: linear-gradient(135deg, #f7931a, #f7931a); border-radius: 50%;"></div>
+                                <div>
+                                    <div class="coin-symbol">BTC</div>
+                                    <div class="coin-name">Bitcoin</div>
+                                </div>
+                            </td>
+                            <td class="price">$45,678.90</td>
+                            <td class="change-positive">+5.67%</td>
+                            <td>$890.5B</td>
+                        </tr>
+                        <tr>
+                            <td class="coin-info">
+                                <div style="width: 32px; height: 32px; background: linear-gradient(135deg, #627eea, #627eea); border-radius: 50%;"></div>
+                                <div>
+                                    <div class="coin-symbol">ETH</div>
+                                    <div class="coin-name">Ethereum</div>
+                                </div>
+                            </td>
+                            <td class="price">$2,345.67</td>
+                            <td class="change-negative">-2.34%</td>
+                            <td>$282.1B</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </section>
+            <!-- Buttons -->
+            <section class="demo-section">
+                <h2 class="demo-title">🔘 Buttons</h2>
+                <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+                    <button class="btn-primary">
+                        <i class="fas fa-rocket"></i> Primary Button
+                    </button>
+                    <button class="btn-refresh">
+                        <i class="fas fa-sync"></i> Refresh Button
+                    </button>
+                    <button class="btn-primary" disabled>
+                        <i class="fas fa-ban"></i> Disabled
+                    </button>
+                </div>
+            </section>
+            <!-- Empty State -->
+            <section class="demo-section">
+                <h2 class="demo-title">📭 Empty State</h2>
+                <div class="empty-state">
+                    <div class="empty-state-icon">
+                        <i class="fas fa-inbox"></i>
+                    </div>
+                    <div class="empty-state-title">No Data Available</div>
+                    <div class="empty-state-message">
+                        There's nothing to display right now. Try refreshing or check back later.
+                    </div>
+                    <button class="btn-primary" style="margin-top: 20px;">
+                        <i class="fas fa-sync"></i> Refresh
+                    </button>
+                </div>
+            </section>
+            <!-- Alerts -->
+            <section class="demo-section">
+                <h2 class="demo-title">⚠️ Alerts</h2>
+                <div class="alert alert-success">
+                    <strong>Success!</strong> Your operation completed successfully.
+                </div>
+                <div class="alert alert-error">
+                    <strong>Error!</strong> Something went wrong. Please try again.
+                </div>
+                <div class="alert alert-warning">
+                    <strong>Warning!</strong> You're approaching your rate limit.
+                </div>
+            </section>
+        </main>
+        <footer class="app-footer">
+            <p>Crypto Intelligence Hub - Modern UI Components</p>
+            <p>Built with Vanilla JavaScript & CSS</p>
+        </footer>
+    </div>
+    <script>
+        // Toast Manager
+        const ToastManager = {
+            container: null,
+            init() {
+                this.container = document.getElementById('toast-container');
+            },
+            show(message, type = 'info', duration = 5000) {
+                if (!this.container) this.init();
+                const toast = document.createElement('div');
+                toast.className = `toast ${type}`;
+                const icons = {
+                    success: 'fa-check-circle',
+                    error: 'fa-times-circle',
+                    warning: 'fa-exclamation-triangle',
+                    info: 'fa-info-circle'
+                };
+                const titles = {
+                    success: 'Success',
+                    error: 'Error',
+                    warning: 'Warning',
+                    info: 'Info'
+                };
+                toast.innerHTML = `
+                    <div class="toast-icon">
+                        <i class="fas ${icons[type]}"></i>
+                    </div>
+                    <div class="toast-content">
+                        <div class="toast-title">${titles[type]}</div>
+                        <div class="toast-message">${message}</div>
+                    </div>
+                    <button class="toast-close" onclick="ToastManager.remove(this.parentElement)">
+                        <i class="fas fa-times"></i>
+                    </button>
+                    <div class="toast-progress"></div>
+                `;
+                this.container.appendChild(toast);
+                if (duration > 0) {
+                    setTimeout(() => this.remove(toast), duration);
+                }
+            },
+            remove(toast) {
+                if (!toast) return;
+                toast.classList.add('removing');
+                setTimeout(() => {
+                    if (toast.parentElement) {
+                        toast.parentElement.removeChild(toast);
+                    }
+                }, 300);
+            },
+            success(message) { this.show(message, 'success'); },
+            error(message) { this.show(message, 'error'); },
+            warning(message) { this.show(message, 'warning'); },
+            info(message) { this.show(message, 'info'); }
+        };
+        ToastManager.init();
+        function showToast(type) {
+            const messages = {
+                success: 'Operation completed successfully!',
+                error: 'An error occurred. Please try again.',
+                warning: 'Warning: Please review your input.',
+                info: 'Here\'s some useful information.'
+            };
+            ToastManager[type](messages[type]);
+        }
+        function toggleTheme() {
+            const body = document.body;
+            const icon = document.querySelector('.theme-toggle i');
+            if (body.classList.contains('light-theme')) {
+                body.classList.remove('light-theme');
+                icon.className = 'fas fa-moon';
+            } else {
+                body.classList.add('light-theme');
+                icon.className = 'fas fa-sun';
+            }
+        }
+    </script>
+</body>
+</html>

ai_models.py CHANGED Viewed

@@ -5,6 +5,7 @@ from __future__ import annotations
 import logging
 import os
 import threading
 from dataclasses import dataclass
 from typing import Any, Dict, List, Mapping, Optional, Sequence
 from config import HUGGINGFACE_MODELS, get_settings
@@ -41,8 +42,19 @@ if HF_MODE not in ("off", "public", "auth"):
     logger.warning(f"Invalid HF_MODE, resetting to 'off'")
 if HF_MODE == "auth" and not HF_TOKEN_ENV:
-    HF_MODE = "off"
-    logger.warning("HF_MODE='auth' but no HF_TOKEN found, resetting to 'off'")
 # Linked models in HF Space - these are pre-validated
 LINKED_MODEL_IDS = {
@@ -52,6 +64,8 @@ LINKED_MODEL_IDS = {
     "ElKulako/cryptobert",
     "kk08/CryptoBERT",
     "agarkovv/CryptoTrader-LM",
     "burakutf/finetuned-finbert-crypto",
     "mathugo/crypto_news_bert",
     "mayurjadhav/crypto-sentiment-model",
@@ -60,18 +74,32 @@ LINKED_MODEL_IDS = {
 # Extended Model Catalog - Using VERIFIED public models only
 # These models are tested and confirmed working on HuggingFace Hub
 CRYPTO_SENTIMENT_MODELS = [
-    "cardiffnlp/twitter-roberta-base-sentiment-latest",  # Verified working
 ]
 SOCIAL_SENTIMENT_MODELS = [
-    "cardiffnlp/twitter-roberta-base-sentiment-latest",  # Verified working
 ]
 FINANCIAL_SENTIMENT_MODELS = [
-    "cardiffnlp/twitter-roberta-base-sentiment-latest",  # Verified working
 ]
 NEWS_SENTIMENT_MODELS = [
-    "cardiffnlp/twitter-roberta-base-sentiment-latest",  # Verified working
 ]
-DECISION_MODELS = []  # Disable for now
 @dataclass(frozen=True)
 class PipelineSpec:
@@ -93,39 +121,255 @@ for lk in ["sentiment_twitter", "sentiment_financial", "summarization", "crypto_
             category="legacy"
         )
-# Crypto sentiment
 for i, mid in enumerate(CRYPTO_SENTIMENT_MODELS):
-    MODEL_SPECS[f"crypto_sent_{i}"] = PipelineSpec(
-        key=f"crypto_sent_{i}", task="text-classification", model_id=mid,
-        category="crypto_sentiment", requires_auth=("ElKulako" in mid)
     )
 # Social
 for i, mid in enumerate(SOCIAL_SENTIMENT_MODELS):
-    MODEL_SPECS[f"social_sent_{i}"] = PipelineSpec(
-        key=f"social_sent_{i}", task="text-classification", model_id=mid, category="social_sentiment"
     )
 # Financial
 for i, mid in enumerate(FINANCIAL_SENTIMENT_MODELS):
-    MODEL_SPECS[f"financial_sent_{i}"] = PipelineSpec(
-        key=f"financial_sent_{i}", task="text-classification", model_id=mid, category="financial_sentiment"
     )
 # News
 for i, mid in enumerate(NEWS_SENTIMENT_MODELS):
-    MODEL_SPECS[f"news_sent_{i}"] = PipelineSpec(
-        key=f"news_sent_{i}", task="text-classification", model_id=mid, category="news_sentiment"
     )
 class ModelNotAvailable(RuntimeError): pass
 class ModelRegistry:
     def __init__(self):
         self._pipelines = {}
         self._lock = threading.Lock()
         self._initialized = False
         self._failed_models = {}  # Track failed models with reasons
     def _should_use_token(self, spec: PipelineSpec) -> Optional[str]:
         """Determine if and which token to use for model loading"""
@@ -148,18 +392,25 @@ class ModelRegistry:
         return None
     def get_pipeline(self, key: str):
-        """Get pipeline for a model key, with robust error handling"""
         if HF_MODE == "off":
-            raise ModelNotAvailable("HF_MODE=off")
         if not TRANSFORMERS_AVAILABLE:
-            raise ModelNotAvailable("transformers not installed")
         if key not in MODEL_SPECS:
-            raise ModelNotAvailable(f"Unknown key: {key}")
         spec = MODEL_SPECS[key]
-        # Return cached pipeline if available
         if key in self._pipelines:
             return self._pipelines[key]
         # Check if this model already failed
@@ -176,7 +427,7 @@ class ModelRegistry:
             # Determine token usage
             auth_token = self._should_use_token(spec)
-            logger.info(f"Loading model: {spec.model_id} (mode={HF_MODE}, auth={'yes' if auth_token else 'no'})")
             try:
                 # Use token parameter instead of deprecated use_auth_token
@@ -188,12 +439,18 @@ class ModelRegistry:
                 # Only add token if we have one and it's needed
                 if auth_token:
                     pipeline_kwargs["token"] = auth_token
                 else:
                     # Explicitly set to None to avoid using expired tokens
                     pipeline_kwargs["token"] = None
                 self._pipelines[key] = pipeline(**pipeline_kwargs)
-                logger.info(f"Successfully loaded model: {spec.model_id}")
                 return self._pipelines[key]
             except RepositoryNotFoundError as e:
@@ -210,7 +467,8 @@ class ModelRegistry:
                 if REQUESTS_AVAILABLE and isinstance(e, requests.exceptions.HTTPError):
                     status_code = getattr(e.response, 'status_code', None)
                     if status_code == 401:
-                        error_msg = f"Authentication failed (401) for {spec.model_id}"
                     elif status_code == 403:
                         error_msg = f"Access forbidden (403) for {spec.model_id}"
                     elif status_code == 404:
@@ -221,22 +479,86 @@ class ModelRegistry:
                     if "not a valid model identifier" in str(e):
                         # For linked models in HF Space, skip validation error
                         if spec.model_id in LINKED_MODEL_IDS:
-                            logger.info(f"Linked model {spec.model_id} - trying without validation check")
                             # Don't mark as failed yet, it might work
                             pass
                         else:
                             error_msg = f"Invalid model identifier: {spec.model_id}"
                     elif "401" in str(e) or "403" in str(e):
-                        error_msg = f"Authentication required for {spec.model_id}"
                     else:
                         error_msg = f"OS Error loading {spec.model_id}: {str(e)[:100]}"
-                logger.warning(f"Failed to load {spec.model_id}: {error_msg}")
                 self._failed_models[key] = error_msg
                 raise ModelNotAvailable(error_msg) from e
         return self._pipelines[key]
     def initialize_models(self):
         """Initialize models with fallback logic - tries primary models first"""
         if self._initialized:
@@ -267,37 +589,59 @@ class ModelRegistry:
                 "error": "transformers library not installed - using lexical fallback"
             }
         loaded, failed = [], []
         # Try to load at least one model from each category with fallback
         categories_to_try = {
-            "crypto": ["crypto_sent_0"],
-            "financial": ["financial_sent_0"],
-            "social": ["social_sent_0"],
             "news": ["news_sent_0"]
         }
         for category, keys in categories_to_try.items():
             category_loaded = False
             for key in keys:
                 if key not in MODEL_SPECS:
                     continue
                 try:
                     self.get_pipeline(key)
                     loaded.append(key)
                     category_loaded = True
                     break  # Successfully loaded one from this category
                 except ModelNotAvailable as e:
-                    failed.append((key, str(e)[:100]))  # Truncate long errors
                 except Exception as e:
-                    failed.append((key, f"{type(e).__name__}: {str(e)[:100]}"))
         # Determine status - be more lenient
         if len(loaded) > 0:
             status = "ok"
         else:
             # No models loaded, but that's OK - we have fallback
-            logger.warning("No HF models loaded, using fallback-only mode")
             status = "fallback_only"
         self._initialized = True
@@ -310,15 +654,28 @@ class ModelRegistry:
             "loaded": loaded[:10],  # Limit to first 10 for brevity
             "failed": failed[:10],  # Limit to first 10 for brevity
             "failed_count": len(self._failed_models),
-            "note": "Fallback lexical analysis available" if len(loaded) == 0 else None
         }
 _registry = ModelRegistry()
 def initialize_models(): return _registry.initialize_models()
 def ensemble_crypto_sentiment(text: str) -> Dict[str, Any]:
-    """Ensemble crypto sentiment with fallback model selection"""
     if not TRANSFORMERS_AVAILABLE:
         logger.warning("Transformers not available, using fallback")
         return basic_sentiment_fallback(text)
@@ -329,13 +686,20 @@ def ensemble_crypto_sentiment(text: str) -> Dict[str, Any]:
     results, labels_count, total_conf = {}, {"bullish": 0, "bearish": 0, "neutral": 0}, 0.0
-    # Try models in order with fallback
-    candidate_keys = ["crypto_sent_0", "crypto_sent_1", "crypto_sent_2"]
     for key in candidate_keys:
         if key not in MODEL_SPECS:
             continue
         try:
             pipe = _registry.get_pipeline(key)
             res = pipe(text[:512])
             if isinstance(res, list) and res:
@@ -356,9 +720,11 @@ def ensemble_crypto_sentiment(text: str) -> Dict[str, Any]:
             # If we got at least one result, we can proceed
             if len(results) >= 1:
                 break  # Got at least one working model
-        except ModelNotAvailable:
             continue  # Try next model
         except Exception as e:
             logger.warning(f"Ensemble failed for {key}: {str(e)[:100]}")
@@ -491,7 +857,9 @@ def get_model_info():
             "social_sentiment": SOCIAL_SENTIMENT_MODELS,
             "financial_sentiment": FINANCIAL_SENTIMENT_MODELS,
             "news_sentiment": NEWS_SENTIMENT_MODELS,
-            "decision": DECISION_MODELS
         },
         "total_models": len(MODEL_SPECS)
     }

 import logging
 import os
 import threading
+import time
 from dataclasses import dataclass
 from typing import Any, Dict, List, Mapping, Optional, Sequence
 from config import HUGGINGFACE_MODELS, get_settings
     logger.warning(f"Invalid HF_MODE, resetting to 'off'")
 if HF_MODE == "auth" and not HF_TOKEN_ENV:
+    logger.error("❌ HF_MODE='auth' but no HF_TOKEN found!")
+    logger.error("   Please set HF_TOKEN or HUGGINGFACE_TOKEN environment variable")
+    logger.error("   Falling back to 'public' mode (may have rate limits)")
+    HF_MODE = "public"  # Fallback to public instead of off
+# Log authentication status
+if HF_MODE != "off":
+    if HF_TOKEN_ENV:
+        logger.info(f"✅ Hugging Face token found (mode: {HF_MODE})")
+    else:
+        logger.warning(f"⚠️ No Hugging Face token found (mode: {HF_MODE}) - may hit rate limits")
+else:
+    logger.info("ℹ️ Hugging Face mode is 'off' - using fallback only")
 # Linked models in HF Space - these are pre-validated
 LINKED_MODEL_IDS = {
     "ElKulako/cryptobert",
     "kk08/CryptoBERT",
     "agarkovv/CryptoTrader-LM",
+    "StephanAkkerman/FinTwitBERT-sentiment",
+    "OpenC/crypto-gpt-o3-mini",
     "burakutf/finetuned-finbert-crypto",
     "mathugo/crypto_news_bert",
     "mayurjadhav/crypto-sentiment-model",
 # Extended Model Catalog - Using VERIFIED public models only
 # These models are tested and confirmed working on HuggingFace Hub
 CRYPTO_SENTIMENT_MODELS = [
+    "kk08/CryptoBERT",  # Crypto-specific sentiment binary classification
+    "ElKulako/cryptobert",  # Crypto social sentiment (Bullish/Neutral/Bearish)
+    "cardiffnlp/twitter-roberta-base-sentiment-latest",  # Fallback
 ]
 SOCIAL_SENTIMENT_MODELS = [
+    "ElKulako/cryptobert",  # Crypto social sentiment
+    "cardiffnlp/twitter-roberta-base-sentiment-latest",  # Twitter sentiment
 ]
 FINANCIAL_SENTIMENT_MODELS = [
+    "StephanAkkerman/FinTwitBERT-sentiment",  # Financial tweet sentiment
+    "ProsusAI/finbert",  # Financial sentiment
+    "cardiffnlp/twitter-roberta-base-sentiment-latest",  # Fallback
 ]
 NEWS_SENTIMENT_MODELS = [
+    "StephanAkkerman/FinTwitBERT-sentiment",  # News sentiment
+    "cardiffnlp/twitter-roberta-base-sentiment-latest",  # Fallback
+]
+GENERATION_MODELS = [
+    "OpenC/crypto-gpt-o3-mini",  # Crypto/DeFi text generation
+]
+TRADING_SIGNAL_MODELS = [
+    "agarkovv/CryptoTrader-LM",  # BTC/ETH trading signals (buy/sell/hold)
+]
+SUMMARIZATION_MODELS = [
+    "FurkanGozukara/Crypto-Financial-News-Summarizer",  # Crypto/Financial news summarization
 ]
 @dataclass(frozen=True)
 class PipelineSpec:
             category="legacy"
         )
+# Crypto sentiment - Add named keys for required models
 for i, mid in enumerate(CRYPTO_SENTIMENT_MODELS):
+    key = f"crypto_sent_{i}"
+    MODEL_SPECS[key] = PipelineSpec(
+        key=key, task="text-classification", model_id=mid,
+        category="sentiment_crypto", requires_auth=("ElKulako" in mid)
     )
+# Add specific named aliases for required models
+MODEL_SPECS["crypto_sent_kk08"] = PipelineSpec(
+    key="crypto_sent_kk08", task="sentiment-analysis", model_id="kk08/CryptoBERT",
+    category="sentiment_crypto", requires_auth=False
+)
 # Social
 for i, mid in enumerate(SOCIAL_SENTIMENT_MODELS):
+    key = f"social_sent_{i}"
+    MODEL_SPECS[key] = PipelineSpec(
+        key=key, task="text-classification", model_id=mid,
+        category="sentiment_social", requires_auth=("ElKulako" in mid)
     )
+# Add specific named alias
+MODEL_SPECS["crypto_sent_social"] = PipelineSpec(
+    key="crypto_sent_social", task="text-classification", model_id="ElKulako/cryptobert",
+    category="sentiment_social", requires_auth=True
+)
 # Financial
 for i, mid in enumerate(FINANCIAL_SENTIMENT_MODELS):
+    key = f"financial_sent_{i}"
+    MODEL_SPECS[key] = PipelineSpec(
+        key=key, task="text-classification", model_id=mid, category="sentiment_financial"
     )
+# Add specific named alias
+MODEL_SPECS["crypto_sent_fin"] = PipelineSpec(
+    key="crypto_sent_fin", task="sentiment-analysis", model_id="StephanAkkerman/FinTwitBERT-sentiment",
+    category="sentiment_financial", requires_auth=False
+)
 # News
 for i, mid in enumerate(NEWS_SENTIMENT_MODELS):
+    key = f"news_sent_{i}"
+    MODEL_SPECS[key] = PipelineSpec(
+        key=key, task="text-classification", model_id=mid, category="sentiment_news"
+    )
+# Generation models (for crypto/DeFi text generation)
+for i, mid in enumerate(GENERATION_MODELS):
+    key = f"crypto_gen_{i}"
+    MODEL_SPECS[key] = PipelineSpec(
+        key=key, task="text-generation", model_id=mid, category="analysis_generation"
+    )
+# Add specific named alias
+MODEL_SPECS["crypto_ai_analyst"] = PipelineSpec(
+    key="crypto_ai_analyst", task="text-generation", model_id="OpenC/crypto-gpt-o3-mini",
+    category="analysis_generation", requires_auth=False
+)
+# Trading signal models
+for i, mid in enumerate(TRADING_SIGNAL_MODELS):
+    key = f"crypto_trade_{i}"
+    MODEL_SPECS[key] = PipelineSpec(
+        key=key, task="text-generation", model_id=mid, category="trading_signal"
+    )
+# Add specific named alias
+MODEL_SPECS["crypto_trading_lm"] = PipelineSpec(
+    key="crypto_trading_lm", task="text-generation", model_id="agarkovv/CryptoTrader-LM",
+    category="trading_signal", requires_auth=False
+)
+# Summarization models
+for i, mid in enumerate(SUMMARIZATION_MODELS):
+    MODEL_SPECS[f"summarization_{i}"] = PipelineSpec(
+        key=f"summarization_{i}", task="summarization", model_id=mid, category="summarization"
     )
 class ModelNotAvailable(RuntimeError): pass
+@dataclass
+class ModelHealthEntry:
+    """Health tracking entry for a model"""
+    key: str
+    name: str
+    status: str = "unknown"  # "healthy", "degraded", "unavailable", "unknown"
+    last_success: Optional[float] = None
+    last_error: Optional[float] = None
+    error_count: int = 0
+    success_count: int = 0
+    cooldown_until: Optional[float] = None
+    last_error_message: Optional[str] = None
 class ModelRegistry:
     def __init__(self):
         self._pipelines = {}
         self._lock = threading.Lock()
         self._initialized = False
         self._failed_models = {}  # Track failed models with reasons
+        # Health tracking for self-healing
+        self._health_registry = {}  # key -> health entry
+    def _get_or_create_health_entry(self, key: str) -> ModelHealthEntry:
+        """Get or create health entry for a model"""
+        if key not in self._health_registry:
+            spec = MODEL_SPECS.get(key)
+            self._health_registry[key] = ModelHealthEntry(
+                key=key,
+                name=spec.model_id if spec else key,
+                status="unknown"
+            )
+        return self._health_registry[key]
+    def _update_health_on_success(self, key: str):
+        """Update health registry after successful model call"""
+        entry = self._get_or_create_health_entry(key)
+        entry.last_success = time.time()
+        entry.success_count += 1
+        # Reset error count gradually or fully on success
+        if entry.error_count > 0:
+            entry.error_count = max(0, entry.error_count - 1)
+        # Recovery logic: if we have enough successes, mark as healthy
+        if entry.success_count >= settings.health_success_recovery_count:
+            entry.status = "healthy"
+            entry.cooldown_until = None
+            # Clear from failed models if present
+            if key in self._failed_models:
+                del self._failed_models[key]
+    def _update_health_on_failure(self, key: str, error_msg: str):
+        """Update health registry after failed model call"""
+        entry = self._get_or_create_health_entry(key)
+        entry.last_error = time.time()
+        entry.error_count += 1
+        entry.last_error_message = error_msg
+        entry.success_count = 0  # Reset success count on failure
+        # Determine status based on error count
+        if entry.error_count >= settings.health_error_threshold:
+            entry.status = "unavailable"
+            # Set cooldown period
+            entry.cooldown_until = time.time() + settings.health_cooldown_seconds
+        elif entry.error_count >= (settings.health_error_threshold // 2):
+            entry.status = "degraded"
+        else:
+            entry.status = "healthy"
+    def _is_in_cooldown(self, key: str) -> bool:
+        """Check if model is in cooldown period"""
+        if key not in self._health_registry:
+            return False
+        entry = self._health_registry[key]
+        if entry.cooldown_until is None:
+            return False
+        return time.time() < entry.cooldown_until
+    def attempt_model_reinit(self, key: str) -> Dict[str, Any]:
+        """
+        Attempt to re-initialize a failed model after cooldown.
+        Returns result dict with status and message.
+        """
+        if key not in MODEL_SPECS:
+            return {"status": "error", "message": f"Unknown model key: {key}"}
+        entry = self._get_or_create_health_entry(key)
+        # Check if enough time has passed since last error
+        if entry.last_error:
+            time_since_error = time.time() - entry.last_error
+            if time_since_error < settings.health_reinit_cooldown_seconds:
+                return {
+                    "status": "cooldown",
+                    "message": f"Model in cooldown, wait {int(settings.health_reinit_cooldown_seconds - time_since_error)}s",
+                    "cooldown_remaining": int(settings.health_reinit_cooldown_seconds - time_since_error)
+                }
+        # Try to reinitialize
+        with self._lock:
+            # Remove from failed models and pipelines to force reload
+            if key in self._failed_models:
+                del self._failed_models[key]
+            if key in self._pipelines:
+                del self._pipelines[key]
+            # Reset health entry
+            entry.error_count = 0
+            entry.status = "unknown"
+            entry.cooldown_until = None
+            try:
+                # Attempt to load
+                pipe = self.get_pipeline(key)
+                return {
+                    "status": "success",
+                    "message": f"Model {key} successfully reinitialized",
+                    "model": MODEL_SPECS[key].model_id
+                }
+            except Exception as e:
+                return {
+                    "status": "failed",
+                    "message": f"Reinitialization failed: {str(e)[:200]}",
+                    "error": str(e)[:200]
+                }
+    def get_model_health_registry(self) -> List[Dict[str, Any]]:
+        """Get health registry for all models"""
+        result = []
+        for key, entry in self._health_registry.items():
+            spec = MODEL_SPECS.get(key)
+            result.append({
+                "key": entry.key,
+                "name": entry.name,
+                "model_id": spec.model_id if spec else entry.name,
+                "category": spec.category if spec else "unknown",
+                "status": entry.status,
+                "last_success": entry.last_success,
+                "last_error": entry.last_error,
+                "error_count": entry.error_count,
+                "success_count": entry.success_count,
+                "cooldown_until": entry.cooldown_until,
+                "in_cooldown": self._is_in_cooldown(key),
+                "last_error_message": entry.last_error_message,
+                "loaded": key in self._pipelines
+            })
+        # Add models that exist in specs but not in health registry
+        for key, spec in MODEL_SPECS.items():
+            if key not in self._health_registry:
+                result.append({
+                    "key": key,
+                    "name": spec.model_id,
+                    "model_id": spec.model_id,
+                    "category": spec.category,
+                    "status": "unknown",
+                    "last_success": None,
+                    "last_error": None,
+                    "error_count": 0,
+                    "success_count": 0,
+                    "cooldown_until": None,
+                    "in_cooldown": False,
+                    "last_error_message": None,
+                    "loaded": key in self._pipelines
+                })
+        return result
     def _should_use_token(self, spec: PipelineSpec) -> Optional[str]:
         """Determine if and which token to use for model loading"""
         return None
     def get_pipeline(self, key: str):
+        """Get pipeline for a model key, with robust error handling and health tracking"""
         if HF_MODE == "off":
+            raise ModelNotAvailable("HF_MODE=off - models disabled")
         if not TRANSFORMERS_AVAILABLE:
+            raise ModelNotAvailable("transformers library not installed")
         if key not in MODEL_SPECS:
+            raise ModelNotAvailable(f"Unknown model key: {key}")
         spec = MODEL_SPECS[key]
+        # Check if model is in cooldown
+        if self._is_in_cooldown(key):
+            entry = self._health_registry[key]
+            cooldown_remaining = int(entry.cooldown_until - time.time())
+            raise ModelNotAvailable(f"Model in cooldown for {cooldown_remaining}s: {entry.last_error_message or 'previous failures'}")
+        # Return cached pipeline if available (PRIORITY: use loaded pipeline first)
         if key in self._pipelines:
+            logger.debug(f"Using cached pipeline for {key}")
             return self._pipelines[key]
         # Check if this model already failed
             # Determine token usage
             auth_token = self._should_use_token(spec)
+            logger.info(f"🔄 Loading model: {spec.model_id} (mode={HF_MODE}, auth={'✅' if auth_token else '❌'})")
             try:
                 # Use token parameter instead of deprecated use_auth_token
                 # Only add token if we have one and it's needed
                 if auth_token:
                     pipeline_kwargs["token"] = auth_token
+                    logger.debug(f"Using authentication token for {spec.model_id}")
                 else:
                     # Explicitly set to None to avoid using expired tokens
                     pipeline_kwargs["token"] = None
+                    if HF_MODE == "auth":
+                        logger.warning(f"No token available for {spec.model_id} in auth mode - may fail")
+                # Load the pipeline
                 self._pipelines[key] = pipeline(**pipeline_kwargs)
+                logger.info(f"✅ Successfully loaded model: {spec.model_id}")
+                # Update health on successful load
+                self._update_health_on_success(key)
                 return self._pipelines[key]
             except RepositoryNotFoundError as e:
                 if REQUESTS_AVAILABLE and isinstance(e, requests.exceptions.HTTPError):
                     status_code = getattr(e.response, 'status_code', None)
                     if status_code == 401:
+                        error_msg = f"Authentication failed (401) for {spec.model_id} - check HF_TOKEN"
+                        logger.error(f"❌ {error_msg}")
                     elif status_code == 403:
                         error_msg = f"Access forbidden (403) for {spec.model_id}"
                     elif status_code == 404:
                     if "not a valid model identifier" in str(e):
                         # For linked models in HF Space, skip validation error
                         if spec.model_id in LINKED_MODEL_IDS:
+                            logger.info(f"Linked model {spec.model_id} - validation error ignored for linked models")
                             # Don't mark as failed yet, it might work
                             pass
                         else:
                             error_msg = f"Invalid model identifier: {spec.model_id}"
                     elif "401" in str(e) or "403" in str(e):
+                        error_msg = f"Authentication required for {spec.model_id} - set HF_TOKEN"
+                        logger.error(f"❌ {error_msg}")
                     else:
                         error_msg = f"OS Error loading {spec.model_id}: {str(e)[:100]}"
+                logger.warning(f"❌ Failed to load {spec.model_id}: {error_msg}")
                 self._failed_models[key] = error_msg
+                # Update health on failure
+                self._update_health_on_failure(key, error_msg)
                 raise ModelNotAvailable(error_msg) from e
         return self._pipelines[key]
+    def call_model_safe(self, key: str, text: str, **kwargs) -> Dict[str, Any]:
+        """
+        Safely call a model with health tracking.
+        Returns result dict with status and data or error.
+        """
+        try:
+            pipe = self.get_pipeline(key)
+            result = pipe(text[:512], **kwargs)
+            # Update health on successful call
+            self._update_health_on_success(key)
+            return {
+                "status": "success",
+                "data": result,
+                "model_key": key,
+                "model_id": MODEL_SPECS[key].model_id if key in MODEL_SPECS else key
+            }
+        except ModelNotAvailable as e:
+            # Don't update health here, already updated in get_pipeline
+            return {
+                "status": "unavailable",
+                "error": str(e),
+                "model_key": key
+            }
+        except Exception as e:
+            error_msg = f"{type(e).__name__}: {str(e)[:200]}"
+            logger.warning(f"Model call failed for {key}: {error_msg}")
+            # Update health on call failure
+            self._update_health_on_failure(key, error_msg)
+            return {
+                "status": "error",
+                "error": error_msg,
+                "model_key": key
+            }
+    def get_registry_status(self) -> Dict[str, Any]:
+        """Get detailed registry status with all models"""
+        items = []
+        for key, spec in MODEL_SPECS.items():
+            loaded = key in self._pipelines
+            error = self._failed_models.get(key) if key in self._failed_models else None
+            items.append({
+                "key": key,
+                "name": spec.model_id,
+                "task": spec.task,
+                "category": spec.category,
+                "loaded": loaded,
+                "error": error,
+                "requires_auth": spec.requires_auth
+            })
+        return {
+            "models_total": len(MODEL_SPECS),
+            "models_loaded": len(self._pipelines),
+            "models_failed": len(self._failed_models),
+            "items": items,
+            "hf_mode": HF_MODE,
+            "transformers_available": TRANSFORMERS_AVAILABLE,
+            "initialized": self._initialized
+        }
     def initialize_models(self):
         """Initialize models with fallback logic - tries primary models first"""
         if self._initialized:
                 "error": "transformers library not installed - using lexical fallback"
             }
+        # Check authentication if needed
+        if HF_MODE == "auth" and not HF_TOKEN_ENV:
+            logger.error("❌ Authentication required but no token found!")
+            logger.error("   Set HF_TOKEN environment variable to use authenticated models")
+            self._initialized = True
+            return {
+                "status": "auth_required",
+                "mode": HF_MODE,
+                "models_loaded": 0,
+                "error": "HF_TOKEN required for auth mode",
+                "note": "Set HF_TOKEN environment variable"
+            }
         loaded, failed = [], []
         # Try to load at least one model from each category with fallback
         categories_to_try = {
+            "crypto": ["crypto_sent_0", "crypto_sent_kk08"],
+            "financial": ["financial_sent_0", "crypto_sent_fin"],
+            "social": ["social_sent_0", "crypto_sent_social"],
             "news": ["news_sent_0"]
         }
+        logger.info(f"🔄 Initializing models (mode: {HF_MODE}, token: {'✅' if HF_TOKEN_ENV else '❌'})...")
         for category, keys in categories_to_try.items():
             category_loaded = False
             for key in keys:
                 if key not in MODEL_SPECS:
                     continue
                 try:
+                    logger.info(f"  Trying to load {key} ({MODEL_SPECS[key].model_id})...")
                     self.get_pipeline(key)
                     loaded.append(key)
                     category_loaded = True
+                    logger.info(f"  ✅ Successfully loaded {key}")
                     break  # Successfully loaded one from this category
                 except ModelNotAvailable as e:
+                    error_msg = str(e)[:100]
+                    failed.append((key, error_msg))
+                    logger.warning(f"  ❌ Failed to load {key}: {error_msg}")
                 except Exception as e:
+                    error_msg = f"{type(e).__name__}: {str(e)[:100]}"
+                    failed.append((key, error_msg))
+                    logger.error(f"  ❌ Error loading {key}: {error_msg}")
         # Determine status - be more lenient
         if len(loaded) > 0:
             status = "ok"
+            logger.info(f"✅ Model initialization complete: {len(loaded)} models loaded")
         else:
             # No models loaded, but that's OK - we have fallback
+            logger.warning("⚠️ No HF models loaded, using fallback-only mode")
             status = "fallback_only"
         self._initialized = True
             "loaded": loaded[:10],  # Limit to first 10 for brevity
             "failed": failed[:10],  # Limit to first 10 for brevity
             "failed_count": len(self._failed_models),
+            "note": "Fallback lexical analysis available" if len(loaded) == 0 else None,
+            "token_available": bool(HF_TOKEN_ENV)
         }
 _registry = ModelRegistry()
 def initialize_models(): return _registry.initialize_models()
+def get_model_health_registry() -> List[Dict[str, Any]]:
+    """Get health registry for all models"""
+    return _registry.get_model_health_registry()
+def attempt_model_reinit(model_key: str) -> Dict[str, Any]:
+    """Attempt to re-initialize a failed model"""
+    return _registry.attempt_model_reinit(model_key)
+def call_model_safe(model_key: str, text: str, **kwargs) -> Dict[str, Any]:
+    """Safely call a model with health tracking"""
+    return _registry.call_model_safe(model_key, text, **kwargs)
 def ensemble_crypto_sentiment(text: str) -> Dict[str, Any]:
+    """Ensemble crypto sentiment with fallback model selection - PRIORITIZES LOADED PIPELINES"""
     if not TRANSFORMERS_AVAILABLE:
         logger.warning("Transformers not available, using fallback")
         return basic_sentiment_fallback(text)
     results, labels_count, total_conf = {}, {"bullish": 0, "bearish": 0, "neutral": 0}, 0.0
+    # Try models in order with fallback - prioritize already loaded pipelines
+    candidate_keys = ["crypto_sent_0", "crypto_sent_kk08", "crypto_sent_1", "crypto_sent_2"]
+    # First, try already loaded pipelines (faster)
+    loaded_keys = [key for key in candidate_keys if key in _registry._pipelines]
+    if loaded_keys:
+        candidate_keys = loaded_keys + [k for k in candidate_keys if k not in loaded_keys]
+        logger.debug(f"Prioritizing loaded pipelines: {loaded_keys}")
     for key in candidate_keys:
         if key not in MODEL_SPECS:
             continue
         try:
+            # This will use cached pipeline if available, or load it if not
             pipe = _registry.get_pipeline(key)
             res = pipe(text[:512])
             if isinstance(res, list) and res:
             # If we got at least one result, we can proceed
             if len(results) >= 1:
+                logger.debug(f"Successfully analyzed with {key} ({spec.model_id})")
                 break  # Got at least one working model
+        except ModelNotAvailable as e:
+            logger.debug(f"Model {key} not available: {str(e)[:50]}")
             continue  # Try next model
         except Exception as e:
             logger.warning(f"Ensemble failed for {key}: {str(e)[:100]}")
             "social_sentiment": SOCIAL_SENTIMENT_MODELS,
             "financial_sentiment": FINANCIAL_SENTIMENT_MODELS,
             "news_sentiment": NEWS_SENTIMENT_MODELS,
+            "generation": GENERATION_MODELS,
+            "trading_signals": TRADING_SIGNAL_MODELS,
+            "summarization": SUMMARIZATION_MODELS
         },
         "total_models": len(MODEL_SPECS)
     }

api_server_extended.py CHANGED Viewed

@@ -5,6 +5,7 @@ Complete Admin API with Real Data Only - NO MOCKS
 """
 import os
 import asyncio
 import sqlite3
 import httpx
@@ -207,6 +208,115 @@ def load_api_registry() -> Dict[str, Any]:
         return {}
 # ===== Real Data Providers =====
 HEADERS = {
     "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
@@ -255,6 +365,212 @@ async def fetch_coingecko_trending() -> Dict[str, Any]:
         return response.json()
 # ===== Lifespan Management =====
 @asynccontextmanager
 async def lifespan(app: FastAPI):
@@ -399,6 +715,25 @@ async def index():
         headers={"Content-Type": "text/html; charset=utf-8"}
     )
 @app.get("/ai-tools", response_class=HTMLResponse)
 async def ai_tools_page(request: Request):
     """
@@ -425,11 +760,60 @@ async def ai_tools_page(request: Request):
         headers={"Content-Type": "text/html; charset=utf-8"}
     )
 # ===== Health & Status Endpoints =====
 @app.get("/health")
 async def health():
-    """Health check endpoint"""
     return {
         "status": "healthy",
         "timestamp": datetime.now().isoformat(),
@@ -439,24 +823,107 @@ async def health():
     }
 @app.get("/api/status")
 async def get_status():
-    """System status"""
-    config = load_providers_config()
-    providers = config.get("providers", {})
-    # Count by validation status
-    validated_count = sum(1 for p in providers.values() if p.get("validated"))
-    return {
-        "system_health": "healthy",
-        "timestamp": datetime.now().isoformat(),
-        "total_providers": len(providers),
-        "validated_providers": validated_count,
-        "database_status": "connected",
-        "apl_available": AUTO_DISCOVERY_REPORT_PATH.exists(),
-        "use_mock_data": USE_MOCK_DATA
-    }
 @app.get("/api/stats")
@@ -581,8 +1048,245 @@ async def get_sentiment():
         raise HTTPException(status_code=503, detail=f"Failed to fetch sentiment: {str(e)}")
 @app.get("/api/resources")
-async def get_resources():
     """Get resources summary for HTML dashboard (includes API registry metadata and local routes)"""
     try:
         # Load API registry for metadata
@@ -798,70 +1502,100 @@ async def get_trending():
 # ===== Providers Management Endpoints =====
 @app.get("/api/providers")
 async def get_providers():
-    """Get all providers from providers_config_extended.json + HF Models + auto-discovery status"""
-    config = load_providers_config()
-    providers = config.get("providers", {})
-    # Load auto-discovery report to merge status
-    discovery_report = load_auto_discovery_report()
-    discovery_results = {}
-    if discovery_report and "http_providers" in discovery_report:
-        for result in discovery_report["http_providers"].get("results", []):
-            discovery_results[result.get("provider_id")] = result
-    result = []
-    for provider_id, provider_data in providers.items():
-        # Merge with auto-discovery data if available
-        discovery_data = discovery_results.get(provider_id, {})
-        provider_entry = {
-            "id": provider_id,
-            "provider_id": provider_id,  # Keep for backward compatibility
-            "name": provider_data.get("name", provider_id),
-            "category": provider_data.get("category", "unknown"),
-            "base_url": provider_data.get("base_url", ""),
-            "type": provider_data.get("type", "http"),
-            "priority": provider_data.get("priority", 0),
-            "weight": provider_data.get("weight", 0),
-            "requires_auth": provider_data.get("requires_auth", False),
-            "rate_limit": provider_data.get("rate_limit", {}),
-            "endpoints": provider_data.get("endpoints", {}),
-            "status": discovery_data.get("status", "UNKNOWN") if discovery_data else "unvalidated",
-            "validated_at": provider_data.get("validated_at"),
-            "response_time_ms": discovery_data.get("response_time_ms") or provider_data.get("response_time_ms"),
-            "error_reason": discovery_data.get("error_reason"),
-            "test_endpoint": discovery_data.get("test_endpoint"),
-            "added_by": provider_data.get("added_by", "manual")
-        }
-        result.append(provider_entry)
-    # Add HF Models as providers
     try:
-        from ai_models import MODEL_SPECS, _registry
-        for model_key, spec in MODEL_SPECS.items():
-            is_loaded = model_key in _registry._pipelines
-            result.append({
-                "id": f"hf_model_{model_key}",
-                "provider_id": f"hf_model_{model_key}",
-                "name": f"HF Model: {spec.model_id}",
-                "category": spec.category,
-                "type": "hf_model",
-                "status": "available" if is_loaded else "not_loaded",
-                "model_key": model_key,
-                "model_id": spec.model_id,
-                "task": spec.task,
-                "requires_auth": spec.requires_auth,
-                "endpoint": f"/api/models/{model_key}/predict",
-                "added_by": "hf_models"
-            })
     except Exception as e:
-        logger.warning(f"Could not add HF models as providers: {e}")
-    return {
-        "providers": result,
-        "total": len(result),
-        "source": "providers_config_extended.json + HF Models + Auto-Discovery Report"
-    }
 @app.get("/api/providers/{provider_id}")
@@ -1004,6 +1738,124 @@ async def get_last_diagnostics():
     }
 # ===== APL (Auto Provider Loader) Endpoints =====
 @app.post("/api/apl/run")
 async def run_apl_scan():
@@ -1363,7 +2215,10 @@ async def analyze_sentiment(request: Dict[str, Any]):
             analyze_crypto_sentiment,
             analyze_financial_sentiment,
             analyze_social_sentiment,
-            analyze_market_text
         )
         text = request.get("text", "").strip()
@@ -1376,12 +2231,115 @@ async def analyze_sentiment(request: Dict[str, Any]):
         symbol = request.get("symbol")
         try:
             if mode == "crypto":
                 result = analyze_crypto_sentiment(text)
             elif mode == "financial":
                 result = analyze_financial_sentiment(text)
             elif mode == "social":
                 result = analyze_social_sentiment(text)
             else:
                 result = analyze_market_text(text)
@@ -1389,14 +2347,17 @@ async def analyze_sentiment(request: Dict[str, Any]):
             confidence = result.get("confidence", result.get("score", 0.5))
             model_used = result.get("model_count", result.get("model", result.get("engine", "unknown")))
-            # Prepare response compatible with ai_tools.html format
             response_data = {
                 "ok": True,
                 "available": True,
                 "label": sentiment_label.lower(),
                 "score": float(confidence),
                 "model": f"{model_used} models" if isinstance(model_used, int) else str(model_used),
-                "engine": result.get("engine", "huggingface")
             }
             # Add details if available for score bars
@@ -1445,7 +2406,9 @@ async def analyze_sentiment(request: Dict[str, Any]):
                 "ok": False,
                 "available": False,
                 "error": f"Analysis failed: {str(e)}",
                 "label": "neutral",
                 "score": 0.0
             }
@@ -1752,6 +2715,126 @@ async def get_latest_news(
         raise HTTPException(status_code=500, detail=f"Failed to fetch news: {str(e)}")
 @app.get("/api/models/status")
 async def get_models_status():
     """Get AI models status and registry info - honest status reporting"""
@@ -1824,18 +2907,21 @@ async def get_models_status():
 async def initialize_ai_models():
     """Initialize AI models (force reload)"""
     try:
-        from ai_models import initialize_models, registry_status
         result = initialize_models()
-        registry_info = registry_status()
         return {
-            "success": True,
-            "initialization": result,
-            "registry": registry_info
         }
-    except Exception as e:
-        raise HTTPException(status_code=500, detail=f"Failed to initialize models: {str(e)}")
 # ===== Model-based Data Endpoints (Using HF Models as Data Sources) =====
@@ -1843,10 +2929,22 @@ async def initialize_ai_models():
 async def list_available_models():
     """List all available Hugging Face models as data sources"""
     try:
-        from ai_models import get_model_info, MODEL_SPECS, _registry, CRYPTO_SENTIMENT_MODELS, SOCIAL_SENTIMENT_MODELS, FINANCIAL_SENTIMENT_MODELS, NEWS_SENTIMENT_MODELS
         model_info = get_model_info()
         models_list = []
         for key, spec in MODEL_SPECS.items():
             is_loaded = key in _registry._pipelines
@@ -1855,14 +2953,16 @@ async def list_available_models():
                 error_msg = str(_registry._failed_models[key])
             models_list.append({
-                "key": key,  # ai_tools.html expects "key"
-                "id": key,  # Keep for backward compatibility
                 "model_id": spec.model_id,
                 "task": spec.task,
                 "category": spec.category,
                 "requires_auth": spec.requires_auth,
-                "loaded": is_loaded,  # ai_tools.html expects "loaded" boolean
-                "error": error_msg,  # ai_tools.html expects "error" string or null
                 "endpoint": f"/api/models/{key}/predict"
             })
@@ -1874,7 +2974,10 @@ async def list_available_models():
                 "crypto_sentiment": CRYPTO_SENTIMENT_MODELS,
                 "social_sentiment": SOCIAL_SENTIMENT_MODELS,
                 "financial_sentiment": FINANCIAL_SENTIMENT_MODELS,
-                "news_sentiment": NEWS_SENTIMENT_MODELS
             },
             "model_info": model_info
         }
@@ -2035,6 +3138,191 @@ async def batch_predict(request: Dict[str, Any]):
         raise HTTPException(status_code=500, detail=f"Batch prediction failed: {str(e)}")
 @app.get("/api/models/data/generated")
 async def get_generated_data(
     limit: int = 50,

 """
 import os
+import threading
 import asyncio
 import sqlite3
 import httpx
         return {}
+# ===== Deduplication Helpers =====
+def deduplicate_providers(providers_list: List[Dict[str, Any]]) -> List[Dict[str, Any]]:
+    """
+    Deduplicate providers by id, or by name+base_url if no id.
+    Merge tags/categories when duplicates are found.
+    """
+    seen = {}
+    result = []
+    for provider in providers_list:
+        # Determine unique key
+        provider_id = provider.get("id") or provider.get("provider_id")
+        if provider_id:
+            key = f"id:{provider_id}"
+        else:
+            name = provider.get("name", "unknown")
+            base_url = provider.get("base_url", "")
+            key = f"name_url:{name}:{base_url}"
+        if key in seen:
+            # Merge tags/categories
+            existing = seen[key]
+            existing_tags = set(existing.get("tags", []) if isinstance(existing.get("tags"), list) else [])
+            new_tags = set(provider.get("tags", []) if isinstance(provider.get("tags"), list) else [])
+            existing["tags"] = list(existing_tags | new_tags)
+            # Merge categories if different
+            existing_cat = existing.get("category", "")
+            new_cat = provider.get("category", "")
+            if new_cat and new_cat != existing_cat:
+                if existing_cat:
+                    existing["categories"] = list(set([existing_cat, new_cat]))
+                else:
+                    existing["category"] = new_cat
+        else:
+            # Ensure tags is a list
+            if "tags" not in provider:
+                provider["tags"] = []
+            elif not isinstance(provider["tags"], list):
+                provider["tags"] = [provider["tags"]]
+            seen[key] = provider
+            result.append(provider)
+    return result
+def deduplicate_resources(resources_list: List[Dict[str, Any]]) -> List[Dict[str, Any]]:
+    """
+    Deduplicate resources by id, or by name+url if no id.
+    """
+    seen = {}
+    result = []
+    for resource in resources_list:
+        # Determine unique key
+        resource_id = resource.get("id")
+        if resource_id:
+            key = f"id:{resource_id}"
+        else:
+            name = resource.get("name", "unknown")
+            url = resource.get("url") or resource.get("base_url", "")
+            path = resource.get("path", "")
+            key = f"name_url:{name}:{url}{path}"
+        if key not in seen:
+            seen[key] = resource
+            result.append(resource)
+    return result
+def filter_resources_by_query(resources: List[Dict[str, Any]], query: str) -> List[Dict[str, Any]]:
+    """
+    Filter resources by search query (case-insensitive).
+    Searches in name, description, category, and tags.
+    """
+    if not query:
+        return resources
+    query_lower = query.lower()
+    filtered = []
+    for resource in resources:
+        # Search in name
+        if query_lower in resource.get("name", "").lower():
+            filtered.append(resource)
+            continue
+        # Search in description
+        if query_lower in resource.get("description", "").lower():
+            filtered.append(resource)
+            continue
+        # Search in category
+        if query_lower in resource.get("category", "").lower():
+            filtered.append(resource)
+            continue
+        # Search in tags
+        tags = resource.get("tags", [])
+        if isinstance(tags, list):
+            if any(query_lower in str(tag).lower() for tag in tags):
+                filtered.append(resource)
+                continue
+    return filtered
 # ===== Real Data Providers =====
 HEADERS = {
     "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
         return response.json()
+# ===== Self-Healing Health Registry =====
+from dataclasses import dataclass, field
+from typing import Callable
+import time as time_module
+@dataclass
+class ProviderHealthEntry:
+    """Health tracking entry for a provider/resource"""
+    id: str
+    name: str
+    status: str = "unknown"  # "healthy", "degraded", "unavailable", "unknown"
+    last_success: Optional[float] = None
+    last_error: Optional[float] = None
+    error_count: int = 0
+    success_count: int = 0
+    cooldown_until: Optional[float] = None
+    last_error_message: Optional[str] = None
+class HealthRegistry:
+    """
+    Self-healing health registry for providers and external API endpoints.
+    Tracks failures, implements cooldowns, and provides graceful degradation.
+    """
+    def __init__(self):
+        self._providers: Dict[str, ProviderHealthEntry] = {}
+        self._lock = threading.Lock()
+        # Load config
+        try:
+            from config import get_settings
+            self.settings = get_settings()
+        except:
+            # Fallback defaults if config not available
+            class FallbackSettings:
+                health_error_threshold = 3
+                health_cooldown_seconds = 300
+                health_success_recovery_count = 2
+            self.settings = FallbackSettings()
+    def _get_or_create_entry(self, provider_id: str, provider_name: str = None) -> ProviderHealthEntry:
+        """Get or create health entry for a provider"""
+        if provider_id not in self._providers:
+            self._providers[provider_id] = ProviderHealthEntry(
+                id=provider_id,
+                name=provider_name or provider_id,
+                status="unknown"
+            )
+        return self._providers[provider_id]
+    def update_on_success(self, provider_id: str, provider_name: str = None):
+        """Update health registry after successful provider call"""
+        with self._lock:
+            entry = self._get_or_create_entry(provider_id, provider_name)
+            entry.last_success = time_module.time()
+            entry.success_count += 1
+            # Reset error count gradually
+            if entry.error_count > 0:
+                entry.error_count = max(0, entry.error_count - 1)
+            # Recovery logic
+            if entry.success_count >= self.settings.health_success_recovery_count:
+                entry.status = "healthy"
+                entry.cooldown_until = None
+    def update_on_failure(self, provider_id: str, error_msg: str, provider_name: str = None):
+        """Update health registry after failed provider call"""
+        with self._lock:
+            entry = self._get_or_create_entry(provider_id, provider_name)
+            entry.last_error = time_module.time()
+            entry.error_count += 1
+            entry.last_error_message = error_msg[:500]  # Limit error message length
+            entry.success_count = 0
+            # Determine status based on error count
+            if entry.error_count >= self.settings.health_error_threshold:
+                entry.status = "unavailable"
+                entry.cooldown_until = time_module.time() + self.settings.health_cooldown_seconds
+            elif entry.error_count >= (self.settings.health_error_threshold // 2):
+                entry.status = "degraded"
+            else:
+                entry.status = "healthy"
+    def is_in_cooldown(self, provider_id: str) -> bool:
+        """Check if provider is in cooldown period"""
+        if provider_id not in self._providers:
+            return False
+        entry = self._providers[provider_id]
+        if entry.cooldown_until is None:
+            return False
+        return time_module.time() < entry.cooldown_until
+    def get_status(self, provider_id: str) -> Optional[str]:
+        """Get current status of a provider"""
+        if provider_id not in self._providers:
+            return "unknown"
+        return self._providers[provider_id].status
+    def get_all_entries(self) -> List[Dict[str, Any]]:
+        """Get all health entries as list of dicts"""
+        with self._lock:
+            return [
+                {
+                    "id": entry.id,
+                    "name": entry.name,
+                    "status": entry.status,
+                    "last_success": entry.last_success,
+                    "last_error": entry.last_error,
+                    "error_count": entry.error_count,
+                    "success_count": entry.success_count,
+                    "cooldown_until": entry.cooldown_until,
+                    "in_cooldown": self.is_in_cooldown(entry.id),
+                    "last_error_message": entry.last_error_message
+                }
+                for entry in self._providers.values()
+            ]
+    def get_summary(self) -> Dict[str, Any]:
+        """Get summary statistics of health registry"""
+        with self._lock:
+            total = len(self._providers)
+            healthy = sum(1 for e in self._providers.values() if e.status == "healthy")
+            degraded = sum(1 for e in self._providers.values() if e.status == "degraded")
+            unavailable = sum(1 for e in self._providers.values() if e.status == "unavailable")
+            unknown = sum(1 for e in self._providers.values() if e.status == "unknown")
+            in_cooldown = sum(1 for e in self._providers.values() if self.is_in_cooldown(e.id))
+            return {
+                "total": total,
+                "healthy": healthy,
+                "degraded": degraded,
+                "unavailable": unavailable,
+                "unknown": unknown,
+                "in_cooldown": in_cooldown
+            }
+# Global health registry instance
+_health_registry = HealthRegistry()
+async def call_provider_safe(
+    provider_id: str,
+    provider_name: str,
+    call_func: Callable,
+    *args,
+    **kwargs
+) -> Dict[str, Any]:
+    """
+    Safely call a provider with health tracking.
+    Args:
+        provider_id: Unique identifier for the provider
+        provider_name: Human-readable name
+        call_func: Async function to call
+        *args, **kwargs: Arguments to pass to call_func
+    Returns:
+        Dict with status and data or error
+    """
+    # Check if provider is in cooldown
+    if _health_registry.is_in_cooldown(provider_id):
+        entry = _health_registry._providers[provider_id]
+        cooldown_remaining = int(entry.cooldown_until - time_module.time())
+        return {
+            "status": "cooldown",
+            "error": f"Provider in cooldown for {cooldown_remaining}s",
+            "provider_id": provider_id,
+            "cooldown_remaining": cooldown_remaining
+        }
+    try:
+        # Call the provider function
+        result = await call_func(*args, **kwargs)
+        # Update health on success
+        _health_registry.update_on_success(provider_id, provider_name)
+        return {
+            "status": "success",
+            "data": result,
+            "provider_id": provider_id
+        }
+    except httpx.TimeoutException as e:
+        error_msg = f"Timeout: {str(e)[:200]}"
+        _health_registry.update_on_failure(provider_id, error_msg, provider_name)
+        return {
+            "status": "timeout",
+            "error": error_msg,
+            "provider_id": provider_id
+        }
+    except httpx.HTTPStatusError as e:
+        error_msg = f"HTTP {e.response.status_code}: {str(e)[:200]}"
+        _health_registry.update_on_failure(provider_id, error_msg, provider_name)
+        return {
+            "status": "http_error",
+            "error": error_msg,
+            "provider_id": provider_id,
+            "status_code": e.response.status_code
+        }
+    except Exception as e:
+        error_msg = f"{type(e).__name__}: {str(e)[:200]}"
+        _health_registry.update_on_failure(provider_id, error_msg, provider_name)
+        return {
+            "status": "error",
+            "error": error_msg,
+            "provider_id": provider_id
+        }
 # ===== Lifespan Management =====
 @asynccontextmanager
 async def lifespan(app: FastAPI):
         headers={"Content-Type": "text/html; charset=utf-8"}
     )
+@app.get("/test.html", response_class=HTMLResponse)
+async def test_page():
+    """Serve test.html for debugging"""
+    test_path = WORKSPACE_ROOT / "test.html"
+    if test_path.exists():
+        content = test_path.read_text(encoding="utf-8", errors="ignore")
+        return HTMLResponse(
+            content=content,
+            media_type="text/html",
+            headers={
+                "Content-Type": "text/html; charset=utf-8",
+                "X-Content-Type-Options": "nosniff"
+            }
+        )
+    return HTMLResponse(
+        "<h1>✅ Server is Running</h1><p>WORKSPACE_ROOT: " + str(WORKSPACE_ROOT) + "</p>",
+        headers={"Content-Type": "text/html; charset=utf-8"}
+    )
 @app.get("/ai-tools", response_class=HTMLResponse)
 async def ai_tools_page(request: Request):
     """
         headers={"Content-Type": "text/html; charset=utf-8"}
     )
+@app.get("/debug-info", response_class=HTMLResponse)
+async def debug_info():
+    """Debug endpoint to show server configuration"""
+    import os
+    info = f"""
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Debug Info</title>
+        <style>
+            body {{ font-family: monospace; padding: 20px; background: #1a1a1a; color: #0f0; }}
+            .success {{ color: #0f0; }}
+            .error {{ color: #f00; }}
+            pre {{ background: #000; padding: 10px; border-radius: 5px; }}
+        </style>
+    </head>
+    <body>
+        <h1>🔍 Server Debug Information</h1>
+        <h2>Paths:</h2>
+        <pre>
+WORKSPACE_ROOT: {WORKSPACE_ROOT}
+Current Dir: {Path.cwd()}
+index.html exists: {"✅ YES" if (WORKSPACE_ROOT / "index.html").exists() else "❌ NO"}
+static dir exists: {"✅ YES" if (WORKSPACE_ROOT / "static").exists() else "❌ NO"}
+        </pre>
+        <h2>Files in WORKSPACE_ROOT:</h2>
+        <pre>
+{chr(10).join([f"- {f.name}" for f in sorted(WORKSPACE_ROOT.glob("*.html"))[:20]])}
+        </pre>
+        <h2>Environment:</h2>
+        <pre>
+Python: {os.sys.version}
+Port: 7860
+Host: 127.0.0.1
+        </pre>
+        <h2>Quick Links:</h2>
+        <ul>
+            <li><a href="/" style="color: #0ff;">Home (/)</a></li>
+            <li><a href="/index.html" style="color: #0ff;">Index (/index.html)</a></li>
+            <li><a href="/test.html" style="color: #0ff;">Test Page (/test.html)</a></li>
+            <li><a href="/api/health" style="color: #0ff;">API Health</a></li>
+            <li><a href="/docs" style="color: #0ff;">API Docs</a></li>
+        </ul>
+    </body>
+    </html>
+    """
+    return HTMLResponse(content=info, headers={"Content-Type": "text/html; charset=utf-8"})
 # ===== Health & Status Endpoints =====
 @app.get("/health")
 async def health():
+    """Health check endpoint (legacy)"""
     return {
         "status": "healthy",
         "timestamp": datetime.now().isoformat(),
     }
+@app.get("/api/health")
+async def api_health():
+    """API health check endpoint - never crashes"""
+    try:
+        version = "1.0.0"
+        try:
+            # Try to get version from metadata
+            api_registry = load_api_registry()
+            metadata = api_registry.get("metadata", {})
+            if metadata.get("version"):
+                version = metadata.get("version")
+        except Exception:
+            pass
+        return {
+            "status": "ok",
+            "timestamp": datetime.now().isoformat(),
+            "version": version
+        }
+    except Exception as e:
+        # Even if something goes wrong, return a clean response
+        logger.error(f"Health check error: {e}")
+        return JSONResponse(
+            status_code=200,
+            content={
+                "status": "ok",
+                "timestamp": datetime.now().isoformat(),
+                "version": "unknown"
+            }
+        )
 @app.get("/api/status")
 async def get_status():
+    """System status with real aggregated data"""
+    try:
+        # Load providers
+        config = load_providers_config()
+        providers = config.get("providers", {})
+        # Count free vs paid providers
+        free_count = sum(1 for p in providers.values()
+                        if not p.get("requires_auth", False) and p.get("rate_limit"))
+        paid_count = sum(1 for p in providers.values()
+                        if p.get("requires_auth", False))
+        # Load resources from unified file
+        resources_json = WORKSPACE_ROOT / "api-resources" / "crypto_resources_unified_2025-11-11.json"
+        resources_data = {"total": 0, "categories": {}}
+        if resources_json.exists():
+            try:
+                with open(resources_json, 'r', encoding='utf-8') as f:
+                    unified_data = json.load(f)
+                    registry = unified_data.get('registry', {})
+                    for category, items in registry.items():
+                        if category == 'metadata':
+                            continue
+                        if isinstance(items, list):
+                            count = len(items)
+                            resources_data['total'] += count
+                            # Group similar categories
+                            cat_key = category.replace('_', '-')
+                            if cat_key not in resources_data['categories']:
+                                resources_data['categories'][cat_key] = 0
+                            resources_data['categories'][cat_key] += count
+            except Exception as e:
+                logger.error(f"Error loading resources: {e}")
+        # Get model count
+        model_count = 0
+        try:
+            from ai_models import MODEL_SPECS
+            model_count = len(MODEL_SPECS) if MODEL_SPECS else 0
+        except Exception:
+            pass
+        return {
+            "status": "ok",
+            "timestamp": datetime.now().isoformat(),
+            "providers": {
+                "total": len(providers),
+                "free": free_count,
+                "paid": paid_count
+            },
+            "resources": resources_data,
+            "models": {
+                "total": model_count
+            }
+        }
+    except Exception as e:
+        logger.error(f"Status endpoint error: {e}")
+        return {
+            "status": "error",
+            "timestamp": datetime.now().isoformat(),
+            "error": str(e),
+            "providers": {"total": 0, "free": 0, "paid": 0},
+            "resources": {"total": 0, "categories": {}}
+        }
 @app.get("/api/stats")
         raise HTTPException(status_code=503, detail=f"Failed to fetch sentiment: {str(e)}")
+@app.post("/api/sentiment")
+async def analyze_sentiment_simple(request: Dict[str, Any]):
+    """Analyze sentiment with mode routing - simplified endpoint"""
+    try:
+        from ai_models import (
+            analyze_crypto_sentiment,
+            analyze_financial_sentiment,
+            analyze_social_sentiment,
+            _registry,
+            MODEL_SPECS,
+            ModelNotAvailable
+        )
+        text = request.get("text", "").strip()
+        if not text:
+            raise HTTPException(status_code=400, detail="Text is required")
+        mode = request.get("mode", "auto").lower()
+        model_key = request.get("model_key")
+        # If model_key is provided, use that specific model
+        if model_key:
+            if model_key not in MODEL_SPECS:
+                raise HTTPException(status_code=404, detail=f"Model key '{model_key}' not found")
+            try:
+                pipeline = _registry.get_pipeline(model_key)
+                spec = MODEL_SPECS[model_key]
+                # Handle trading signal models specially
+                if spec.category == "trading_signal":
+                    raw_result = pipeline(text, max_length=200, num_return_sequences=1)
+                    if isinstance(raw_result, list) and raw_result:
+                        raw_result = raw_result[0]
+                    generated_text = raw_result.get("generated_text", str(raw_result))
+                    decision = "HOLD"
+                    if "buy" in generated_text.lower():
+                        decision = "BUY"
+                    elif "sell" in generated_text.lower():
+                        decision = "SELL"
+                    return {
+                        "sentiment": decision.lower(),
+                        "confidence": 0.7,
+                        "raw_label": decision,
+                        "mode": "trading",
+                        "model": model_key,
+                        "extra": {
+                            "decision": decision,
+                            "rationale": generated_text,
+                            "raw": raw_result
+                        }
+                    }
+                # Regular sentiment analysis
+                raw_result = pipeline(text[:512])
+                if isinstance(raw_result, list) and raw_result:
+                    raw_result = raw_result[0]
+                label = raw_result.get("label", "neutral").upper()
+                score = raw_result.get("score", 0.5)
+                # Map to standard format
+                mapped = "Bullish" if "POSITIVE" in label or "BULLISH" in label or "LABEL_2" in label else (
+                    "Bearish" if "NEGATIVE" in label or "BEARISH" in label or "LABEL_0" in label else "Neutral"
+                )
+                return {
+                    "sentiment": mapped,
+                    "confidence": score,
+                    "raw_label": label,
+                    "mode": mode,
+                    "model": model_key,
+                    "extra": {"raw": raw_result}
+                }
+            except ModelNotAvailable as e:
+                logger.warning(f"Model {model_key} not available: {e}")
+                raise HTTPException(status_code=503, detail=f"Model not available: {str(e)}")
+        # Mode-based routing (no explicit model key)
+        result = None
+        actual_model = None
+        if mode == "crypto" or mode == "auto":
+            result = analyze_crypto_sentiment(text)
+            actual_model = "crypto_sent_kk08"  # Default crypto model
+        elif mode == "social":
+            result = analyze_social_sentiment(text)
+            actual_model = "crypto_sent_social"  # ElKulako/cryptobert
+        elif mode == "financial":
+            result = analyze_financial_sentiment(text)
+            actual_model = "crypto_sent_fin"  # FinTwitBERT
+        elif mode == "news":
+            result = analyze_financial_sentiment(text)  # Use financial for news
+            actual_model = "crypto_sent_fin"
+        elif mode == "trading":
+            # Try to use trading model
+            try:
+                pipeline = _registry.get_pipeline("crypto_trading_lm")
+                raw_result = pipeline(text, max_length=200, num_return_sequences=1)
+                if isinstance(raw_result, list) and raw_result:
+                    raw_result = raw_result[0]
+                generated_text = raw_result.get("generated_text", str(raw_result))
+                decision = "HOLD"
+                if "buy" in generated_text.lower():
+                    decision = "BUY"
+                elif "sell" in generated_text.lower():
+                    decision = "SELL"
+                return {
+                    "sentiment": decision,
+                    "confidence": 0.7,
+                    "raw_label": decision,
+                    "mode": "trading",
+                    "model": "crypto_trading_lm",
+                    "extra": {
+                        "decision": decision,
+                        "rationale": generated_text
+                    }
+                }
+            except ModelNotAvailable:
+                # Fallback to crypto sentiment
+                result = analyze_crypto_sentiment(text)
+                actual_model = "crypto_sent_kk08"
+        else:
+            result = analyze_crypto_sentiment(text)  # Default fallback
+            actual_model = "crypto_sent_kk08"
+        if not result:
+            raise HTTPException(status_code=500, detail="Sentiment analysis failed")
+        # Standardize result format
+        sentiment = result.get("label", "Neutral")
+        confidence = result.get("confidence", 0.5)
+        # Capitalize first letter
+        sentiment_formatted = sentiment.capitalize() if isinstance(sentiment, str) else "Neutral"
+        return {
+            "sentiment": sentiment_formatted,
+            "confidence": confidence,
+            "raw_label": sentiment,
+            "mode": mode,
+            "model": actual_model,
+            "extra": result
+        }
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Sentiment analysis error: {e}")
+        raise HTTPException(status_code=500, detail=f"Analysis failed: {str(e)}")
 @app.get("/api/resources")
+async def get_resources(q: Optional[str] = None):
+    """Get all resources with optional search query and deduplication"""
+    try:
+        resources_list = []
+        # Load from unified resources file
+        resources_json = WORKSPACE_ROOT / "api-resources" / "crypto_resources_unified_2025-11-11.json"
+        if resources_json.exists():
+            try:
+                with open(resources_json, 'r', encoding='utf-8') as f:
+                    unified_data = json.load(f)
+                    registry = unified_data.get('registry', {})
+                    for category, items in registry.items():
+                        if category == 'metadata':
+                            continue
+                        if isinstance(items, list):
+                            for item in items:
+                                # Normalize resource structure
+                                resource = {
+                                    "id": item.get("id"),
+                                    "name": item.get("name", item.get("title", "Unknown")),
+                                    "category": category,
+                                    "url": item.get("url") or item.get("base_url", ""),
+                                    "free": item.get("free", True),
+                                    "auth_required": item.get("auth_required", False) or (item.get("auth", {}).get("type") != "none" if "auth" in item else False),
+                                    "tags": item.get("tags", []) if isinstance(item.get("tags"), list) else [],
+                                    "description": item.get("description", "") or item.get("note", "")
+                                }
+                                # Additional fields if present
+                                if "method" in item:
+                                    resource["method"] = item["method"]
+                                if "path" in item:
+                                    resource["path"] = item["path"]
+                                if "endpoint" in item:
+                                    resource["endpoint"] = item["endpoint"]
+                                resources_list.append(resource)
+            except Exception as e:
+                logger.error(f"Error loading unified resources: {e}")
+        # Load from API registry (all_apis_merged_2025.json)
+        api_registry = load_api_registry()
+        if api_registry and "raw_files" in api_registry:
+            # Parse raw files for additional resources (basic extraction)
+            for raw_file in api_registry.get("raw_files", [])[:10]:  # Limit to first 10
+                content = raw_file.get("content", "")
+                filename = raw_file.get("filename", "")
+                # Simple extraction: look for URLs in content
+                import re
+                urls = re.findall(r'https?://[^\s<>"]+', content)
+                for url in urls[:5]:  # Limit URLs per file
+                    resources_list.append({
+                        "id": None,
+                        "name": f"Resource from {filename}",
+                        "category": "discovered",
+                        "url": url,
+                        "free": True,
+                        "auth_required": False,
+                        "tags": ["auto-discovered"],
+                        "description": f"Auto-discovered from {filename}"
+                    })
+        # Apply deduplication
+        deduplicated_resources = deduplicate_resources(resources_list)
+        # Apply search filter if query provided
+        if q:
+            deduplicated_resources = filter_resources_by_query(deduplicated_resources, q)
+        return deduplicated_resources
+    except Exception as e:
+        logger.error(f"Error in get_resources: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to fetch resources: {str(e)}")
+@app.get("/api/resources/summary")
+async def get_resources_summary():
     """Get resources summary for HTML dashboard (includes API registry metadata and local routes)"""
     try:
         # Load API registry for metadata
 # ===== Providers Management Endpoints =====
 @app.get("/api/providers")
 async def get_providers():
+    """Get all providers with deduplication applied"""
     try:
+        # Load primary config
+        config = load_providers_config()
+        providers_dict = config.get("providers", {})
+        # Load auto-discovery report for validation status
+        discovery_report = load_auto_discovery_report()
+        discovery_results = {}
+        if discovery_report and "http_providers" in discovery_report:
+            for result in discovery_report["http_providers"].get("results", []):
+                discovery_results[result.get("provider_id")] = result
+        # Build provider list from primary config
+        providers_list = []
+        for provider_id, provider_data in providers_dict.items():
+            # Merge with auto-discovery data if available
+            discovery_data = discovery_results.get(provider_id, {})
+            # Determine auth requirement
+            auth_required = provider_data.get("requires_auth", False)
+            free = not auth_required
+            # Extract tags from provider data
+            tags = []
+            if "tags" in provider_data:
+                tags = provider_data["tags"] if isinstance(provider_data["tags"], list) else [provider_data["tags"]]
+            # Build description
+            description = provider_data.get("description", "") or provider_data.get("note", "")
+            if not description and provider_data.get("name"):
+                description = f"{provider_data.get('name')} - {provider_data.get('category', 'unknown')} provider"
+            provider_entry = {
+                "id": provider_id,
+                "name": provider_data.get("name", provider_id),
+                "category": provider_data.get("category", "unknown"),
+                "base_url": provider_data.get("base_url", ""),
+                "auth_required": auth_required,
+                "free": free,
+                "tags": tags,
+                "description": description,
+                "type": provider_data.get("type", "http"),
+                "priority": provider_data.get("priority", 0),
+                "weight": provider_data.get("weight", 0),
+                "rate_limit": provider_data.get("rate_limit", {}),
+                "endpoints": provider_data.get("endpoints", {}),
+                "status": discovery_data.get("status", "UNKNOWN") if discovery_data else "unvalidated",
+                "validated_at": provider_data.get("validated_at"),
+                "response_time_ms": discovery_data.get("response_time_ms") or provider_data.get("response_time_ms"),
+                "added_by": provider_data.get("added_by", "manual")
+            }
+            providers_list.append(provider_entry)
+        # Add HF Models as providers (with proper structure)
+        try:
+            from ai_models import MODEL_SPECS, _registry
+            for model_key, spec in MODEL_SPECS.items():
+                is_loaded = model_key in _registry._pipelines
+                providers_list.append({
+                    "id": f"hf_model_{model_key}",
+                    "name": f"HF Model: {spec.model_id}",
+                    "category": spec.category,
+                    "base_url": f"/api/models/{model_key}/predict",
+                    "auth_required": spec.requires_auth,
+                    "free": not spec.requires_auth,
+                    "tags": ["huggingface", "ai-model", spec.task, spec.category],
+                    "description": f"Hugging Face {spec.task} model for {spec.category}",
+                    "type": "hf_model",
+                    "status": "available" if is_loaded else "not_loaded",
+                    "model_key": model_key,
+                    "model_id": spec.model_id,
+                    "task": spec.task,
+                    "added_by": "hf_models"
+                })
+        except Exception as e:
+            logger.warning(f"Could not add HF models as providers: {e}")
+        # Apply deduplication
+        deduplicated_providers = deduplicate_providers(providers_list)
+        return {
+            "providers": deduplicated_providers,
+            "total": len(deduplicated_providers),
+            "source": "providers_config_extended.json + PROVIDER_AUTO_DISCOVERY_REPORT.json + HF Models (deduplicated)"
+        }
     except Exception as e:
+        logger.error(f"Error in get_providers: {e}")
+        return {
+            "providers": [],
+            "total": 0,
+            "error": str(e),
+            "source": "error"
+        }
 @app.get("/api/providers/{provider_id}")
     }
+@app.get("/api/diagnostics/health")
+async def get_diagnostics_health():
+    """
+    Get comprehensive health status of all providers and models.
+    Returns health registry data for diagnostics and observability.
+    """
+    try:
+        # Get provider health
+        provider_health = _health_registry.get_all_entries()
+        provider_summary = _health_registry.get_summary()
+        # Get model health
+        model_health = []
+        model_summary = {
+            "total": 0,
+            "healthy": 0,
+            "degraded": 0,
+            "unavailable": 0,
+            "unknown": 0,
+            "in_cooldown": 0
+        }
+        try:
+            from ai_models import get_model_health_registry
+            model_health = get_model_health_registry()
+            # Calculate model summary
+            model_summary["total"] = len(model_health)
+            for model in model_health:
+                status = model.get("status", "unknown")
+                model_summary[status] = model_summary.get(status, 0) + 1
+                if model.get("in_cooldown", False):
+                    model_summary["in_cooldown"] += 1
+        except Exception as e:
+            logger.warning(f"Could not load model health: {e}")
+        return {
+            "status": "success",
+            "timestamp": datetime.now().isoformat(),
+            "providers": {
+                "summary": provider_summary,
+                "entries": provider_health
+            },
+            "models": {
+                "summary": model_summary,
+                "entries": model_health
+            },
+            "overall_health": {
+                "providers_ok": provider_summary["healthy"] >= (provider_summary["total"] // 2) if provider_summary["total"] > 0 else True,
+                "models_ok": model_summary["healthy"] >= (model_summary["total"] // 4) if model_summary["total"] > 0 else True
+            }
+        }
+    except Exception as e:
+        logger.error(f"Error getting health diagnostics: {e}")
+        return {
+            "status": "error",
+            "error": str(e),
+            "timestamp": datetime.now().isoformat()
+        }
+@app.post("/api/diagnostics/self-heal")
+async def trigger_self_heal(model_key: Optional[str] = None):
+    """
+    Trigger self-healing actions for models.
+    Safe, idempotent, and non-blocking.
+    Query params:
+        model_key: Specific model to reinitialize (optional)
+    """
+    try:
+        from ai_models import attempt_model_reinit, get_model_health_registry
+        results = []
+        if model_key:
+            # Reinit specific model
+            result = attempt_model_reinit(model_key)
+            results.append({
+                "model_key": model_key,
+                **result
+            })
+        else:
+            # Reinit all failed models that are out of cooldown
+            model_health = get_model_health_registry()
+            failed_models = [
+                m for m in model_health
+                if m.get("status") in ["unavailable", "degraded"]
+                and not m.get("in_cooldown", False)
+            ]
+            for model in failed_models[:5]:  # Limit to 5 at a time to avoid blocking
+                result = attempt_model_reinit(model["key"])
+                results.append({
+                    "model_key": model["key"],
+                    **result
+                })
+        success_count = sum(1 for r in results if r.get("status") == "success")
+        return {
+            "status": "completed",
+            "timestamp": datetime.now().isoformat(),
+            "results": results,
+            "summary": {
+                "total_attempts": len(results),
+                "successful": success_count,
+                "failed": len(results) - success_count
+            }
+        }
+    except Exception as e:
+        logger.error(f"Error in self-heal: {e}")
+        return {
+            "status": "error",
+            "error": str(e),
+            "timestamp": datetime.now().isoformat()
+        }
 # ===== APL (Auto Provider Loader) Endpoints =====
 @app.post("/api/apl/run")
 async def run_apl_scan():
             analyze_crypto_sentiment,
             analyze_financial_sentiment,
             analyze_social_sentiment,
+            analyze_market_text,
+            _registry,
+            MODEL_SPECS,
+            ModelNotAvailable
         )
         text = request.get("text", "").strip()
         symbol = request.get("symbol")
         try:
+            # If model_key is provided, use that specific model
+            if model_key and model_key in MODEL_SPECS:
+                try:
+                    pipeline = _registry.get_pipeline(model_key)
+                    spec = MODEL_SPECS[model_key]
+                    # Handle different task types
+                    if spec.task == "text-generation":
+                        # For trading signal models or generation models
+                        raw_result = pipeline(text, max_length=200, num_return_sequences=1)
+                        if isinstance(raw_result, list) and raw_result:
+                            raw_result = raw_result[0]
+                        generated_text = raw_result.get("generated_text", str(raw_result))
+                        # Parse trading signals if applicable
+                        if spec.category == "trading_signal":
+                            # Extract signal from generated text
+                            decision = "HOLD"
+                            if "buy" in generated_text.lower():
+                                decision = "BUY"
+                            elif "sell" in generated_text.lower():
+                                decision = "SELL"
+                            return {
+                                "ok": True,
+                                "available": True,
+                                "sentiment": decision.lower(),
+                                "label": decision.lower(),
+                                "score": 0.7,
+                                "confidence": 0.7,
+                                "model": model_key,
+                                "engine": "huggingface",
+                                "mode": "trading",
+                                "extra": {
+                                    "decision": decision,
+                                    "rationale": generated_text,
+                                    "raw": raw_result
+                                }
+                            }
+                        else:
+                            # Generation model - return generated text
+                            return {
+                                "ok": True,
+                                "available": True,
+                                "sentiment": "neutral",
+                                "label": "neutral",
+                                "score": 0.5,
+                                "confidence": 0.5,
+                                "model": model_key,
+                                "engine": "huggingface",
+                                "mode": "generation",
+                                "extra": {
+                                    "generated_text": generated_text,
+                                    "raw": raw_result
+                                }
+                            }
+                    else:
+                        # Text classification / sentiment
+                        raw_result = pipeline(text[:512])
+                        if isinstance(raw_result, list) and raw_result:
+                            raw_result = raw_result[0]
+                        label = raw_result.get("label", "neutral").upper()
+                        score = raw_result.get("score", 0.5)
+                        # Map labels to standard format
+                        mapped = "bullish" if "POSITIVE" in label or "BULLISH" in label or "LABEL_2" in label else (
+                            "bearish" if "NEGATIVE" in label or "BEARISH" in label or "LABEL_0" in label else "neutral"
+                        )
+                        return {
+                            "ok": True,
+                            "available": True,
+                            "sentiment": mapped,
+                            "label": mapped,
+                            "score": score,
+                            "confidence": score,
+                            "raw_label": label,
+                            "model": model_key,
+                            "engine": "huggingface",
+                            "mode": mode,
+                            "extra": {
+                                "vote": score if mapped == "bullish" else (-score if mapped == "bearish" else 0.0),
+                                "raw": raw_result
+                            }
+                        }
+                except ModelNotAvailable as e:
+                    logger.warning(f"Model {model_key} not available: {e}")
+                    return {
+                        "ok": False,
+                        "available": False,
+                        "error": f"Model {model_key} not available: {str(e)}",
+                        "label": "neutral",
+                        "sentiment": "neutral",
+                        "score": 0.0,
+                        "confidence": 0.0
+                    }
+            # Default mode-based analysis
             if mode == "crypto":
                 result = analyze_crypto_sentiment(text)
             elif mode == "financial":
                 result = analyze_financial_sentiment(text)
             elif mode == "social":
                 result = analyze_social_sentiment(text)
+            elif mode == "trading":
+                # Try to use trading signal model
+                result = analyze_crypto_sentiment(text)
             else:
                 result = analyze_market_text(text)
             confidence = result.get("confidence", result.get("score", 0.5))
             model_used = result.get("model_count", result.get("model", result.get("engine", "unknown")))
+            # Prepare response compatible with frontend format
             response_data = {
                 "ok": True,
                 "available": True,
+                "sentiment": sentiment_label.lower(),
                 "label": sentiment_label.lower(),
+                "confidence": float(confidence),
                 "score": float(confidence),
                 "model": f"{model_used} models" if isinstance(model_used, int) else str(model_used),
+                "engine": result.get("engine", "huggingface"),
+                "mode": mode
             }
             # Add details if available for score bars
                 "ok": False,
                 "available": False,
                 "error": f"Analysis failed: {str(e)}",
+                "sentiment": "neutral",
                 "label": "neutral",
+                "confidence": 0.0,
                 "score": 0.0
             }
         raise HTTPException(status_code=500, detail=f"Failed to fetch news: {str(e)}")
+@app.post("/api/news/summarize")
+async def summarize_news(request: Dict[str, Any]):
+    """
+    Summarize crypto/financial news using Hugging Face Crypto-Financial-News-Summarizer model
+    Expects: { "title": "News Title", "content": "Full article text" }
+    Returns: { "summary": "Summarized news paragraph", "model": "Crypto-Financial-News-Summarizer" }
+    """
+    try:
+        from ai_models import MODEL_SPECS, _registry, ModelNotAvailable
+        title = request.get("title", "").strip()
+        content = request.get("content", "").strip()
+        if not title and not content:
+            raise HTTPException(status_code=400, detail="Title or content is required")
+        # Combine title and content for summarization
+        text_to_summarize = f"{title}. {content}" if title and content else (title or content)
+        try:
+            # Try to use the Crypto-Financial-News-Summarizer model
+            summarization_key = "summarization_0"
+            if summarization_key in MODEL_SPECS:
+                try:
+                    pipeline = _registry.get_pipeline(summarization_key)
+                    spec = MODEL_SPECS[summarization_key]
+                    # Use HF model for summarization
+                    # Limit input text to avoid token length issues
+                    max_input_length = 1024
+                    text_input = text_to_summarize[:max_input_length]
+                    try:
+                        # Try with parameters first
+                        summary_result = pipeline(
+                            text_input,
+                            max_length=150,
+                            min_length=50,
+                            do_sample=False,
+                            truncation=True
+                        )
+                    except TypeError:
+                        # Some pipelines don't accept these parameters
+                        summary_result = pipeline(text_input, truncation=True)
+                    # Extract summary text from result
+                    if isinstance(summary_result, list) and summary_result:
+                        summary_text = summary_result[0].get("summary_text", summary_result[0].get("generated_text", str(summary_result[0])))
+                    elif isinstance(summary_result, dict):
+                        summary_text = summary_result.get("summary_text", summary_result.get("generated_text", str(summary_result)))
+                    else:
+                        summary_text = str(summary_result)
+                    return {
+                        "success": True,
+                        "summary": summary_text,
+                        "model": spec.model_id,
+                        "available": True,
+                        "input_length": len(text_input),
+                        "title": title,
+                        "timestamp": datetime.now().isoformat()
+                    }
+                except ModelNotAvailable as e:
+                    logger.warning(f"Crypto-Financial-News-Summarizer not available: {e}")
+                    # Fall through to fallback
+                except Exception as e:
+                    logger.warning(f"HF summarization failed: {e}, using fallback")
+                    # Fall through to fallback
+            # Fallback: Simple extractive summarization
+            # Split into sentences and take the most important ones
+            sentences = []
+            current_sentence = ""
+            for char in text_to_summarize:
+                current_sentence += char
+                if char in ".!?":
+                    sentence = current_sentence.strip()
+                    if sentence and len(sentence) > 10:  # Filter out very short sentences
+                        sentences.append(sentence)
+                        current_sentence = ""
+                        if len(sentences) >= 5:  # Take first 5 sentences max
+                            break
+            # If we didn't get enough sentences, add the rest
+            if len(sentences) < 3 and current_sentence.strip():
+                sentences.append(current_sentence.strip())
+            # Take first 3 sentences as summary
+            summary = " ".join(sentences[:3]) if sentences else text_to_summarize[:500]
+            return {
+                "success": True,
+                "summary": summary,
+                "model": "fallback_extractive",
+                "available": False,
+                "note": "Using fallback extractive summarization (HF model not available)",
+                "title": title,
+                "timestamp": datetime.now().isoformat()
+            }
+        except Exception as e:
+            logger.error(f"Summarization error: {str(e)}")
+            return {
+                "success": False,
+                "error": f"Summarization failed: {str(e)}",
+                "summary": "",
+                "model": "error",
+                "available": False
+            }
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"News summarization failed: {str(e)}")
 @app.get("/api/models/status")
 async def get_models_status():
     """Get AI models status and registry info - honest status reporting"""
 async def initialize_ai_models():
     """Initialize AI models (force reload)"""
     try:
+        from ai_models import initialize_models, _registry
         result = initialize_models()
+        registry_status = _registry.get_registry_status()
+        return registry_status
+    except Exception as e:
+        logger.error(f"Failed to initialize models: {e}")
         return {
+            "models_total": 0,
+            "models_loaded": 0,
+            "models_failed": 0,
+            "items": [],
+            "error": str(e)
         }
 # ===== Model-based Data Endpoints (Using HF Models as Data Sources) =====
 async def list_available_models():
     """List all available Hugging Face models as data sources"""
     try:
+        from ai_models import get_model_info, MODEL_SPECS, _registry, CRYPTO_SENTIMENT_MODELS, SOCIAL_SENTIMENT_MODELS, FINANCIAL_SENTIMENT_MODELS, NEWS_SENTIMENT_MODELS, GENERATION_MODELS, TRADING_SIGNAL_MODELS
         model_info = get_model_info()
+        # Model descriptions
+        model_descriptions = {
+            "kk08/CryptoBERT": "Crypto sentiment binary classification model trained on cryptocurrency-related text",
+            "ElKulako/cryptobert": "Crypto social sentiment classifier (Bullish/Neutral/Bearish) for social media and news",
+            "StephanAkkerman/FinTwitBERT-sentiment": "Financial tweet sentiment analysis model for market-related social media content",
+            "OpenC/crypto-gpt-o3-mini": "Crypto and DeFi text generation model for analysis and content creation",
+            "agarkovv/CryptoTrader-LM": "BTC/ETH trading signal generator providing daily buy/sell/hold recommendations",
+            "cardiffnlp/twitter-roberta-base-sentiment-latest": "General Twitter sentiment analysis (fallback model)",
+            "ProsusAI/finbert": "Financial sentiment analysis model for news and financial documents",
+            "FurkanGozukara/Crypto-Financial-News-Summarizer": "Specialized model for summarizing cryptocurrency and financial news articles"
+        }
         models_list = []
         for key, spec in MODEL_SPECS.items():
             is_loaded = key in _registry._pipelines
                 error_msg = str(_registry._failed_models[key])
             models_list.append({
+                "key": key,
+                "id": key,
+                "name": spec.model_id,
                 "model_id": spec.model_id,
                 "task": spec.task,
                 "category": spec.category,
                 "requires_auth": spec.requires_auth,
+                "loaded": is_loaded,
+                "error": error_msg,
+                "description": model_descriptions.get(spec.model_id, f"{spec.category} model for {spec.task}"),
                 "endpoint": f"/api/models/{key}/predict"
             })
                 "crypto_sentiment": CRYPTO_SENTIMENT_MODELS,
                 "social_sentiment": SOCIAL_SENTIMENT_MODELS,
                 "financial_sentiment": FINANCIAL_SENTIMENT_MODELS,
+                "news_sentiment": NEWS_SENTIMENT_MODELS,
+                "generation": GENERATION_MODELS,
+                "trading_signals": TRADING_SIGNAL_MODELS,
+                "summarization": ["FurkanGozukara/Crypto-Financial-News-Summarizer"]
             },
             "model_info": model_info
         }
         raise HTTPException(status_code=500, detail=f"Batch prediction failed: {str(e)}")
+@app.post("/api/analyze/text")
+async def analyze_text(request: Dict[str, Any]):
+    """
+    Analyze or generate text using crypto-gpt-o3-mini generation model.
+    Expects: { "prompt": "...", "mode": "analysis" | "generation" }
+    Returns: { "text": "...", "model": "OpenC/crypto-gpt-o3-mini" }
+    """
+    try:
+        from ai_models import MODEL_SPECS, _registry, ModelNotAvailable
+        prompt = request.get("prompt", "").strip()
+        mode = request.get("mode", "analysis").lower()
+        max_length = request.get("max_length", 200)
+        if not prompt:
+            raise HTTPException(status_code=400, detail="Prompt is required")
+        # Find generation model (crypto-gpt-o3-mini) - use specific key first
+        generation_key = "crypto_ai_analyst" if "crypto_ai_analyst" in MODEL_SPECS else None
+        # Fallback: search by category or model name
+        if not generation_key:
+            for key, spec in MODEL_SPECS.items():
+                if spec.category == "analysis_generation" or "crypto-gpt" in spec.model_id.lower():
+                    generation_key = key
+                    break
+        if not generation_key:
+            return {
+                "success": False,
+                "available": False,
+                "error": "Crypto text generation model not configured",
+                "text": ""
+            }
+        try:
+            spec = MODEL_SPECS[generation_key]
+            pipeline = _registry.get_pipeline(generation_key)
+            # Generate text
+            result = pipeline(prompt, max_length=max_length, num_return_sequences=1, truncation=True)
+            if isinstance(result, list) and result:
+                result = result[0]
+            generated_text = result.get("generated_text", str(result))
+            return {
+                "success": True,
+                "available": True,
+                "text": generated_text,
+                "model": spec.model_id,
+                "mode": mode,
+                "prompt": prompt[:100],
+                "timestamp": datetime.now().isoformat()
+            }
+        except ModelNotAvailable as e:
+            logger.warning(f"Generation model not available: {e}")
+            return {
+                "success": False,
+                "available": False,
+                "error": f"Model not available: {str(e)}",
+                "text": "",
+                "note": "HF model unavailable - check model configuration"
+            }
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Text analysis failed: {e}")
+        raise HTTPException(status_code=500, detail=f"Text analysis failed: {str(e)}")
+@app.post("/api/trading/decision")
+async def trading_decision(request: Dict[str, Any]):
+    """
+    Get trading decision from CryptoTrader-LM model.
+    Expects: { "symbol": "BTC", "context": "market context..." }
+    Returns: {
+        "decision": "BUY" | "SELL" | "HOLD",
+        "confidence": float,
+        "rationale": "explanation",
+        "raw": {...}
+    }
+    """
+    try:
+        from ai_models import MODEL_SPECS, _registry, ModelNotAvailable
+        symbol = request.get("symbol", "").strip().upper()
+        context = request.get("context", "").strip()
+        if not symbol:
+            raise HTTPException(status_code=400, detail="Symbol is required")
+        # Find trading signal model (CryptoTrader-LM) - use specific key first
+        trading_key = "crypto_trading_lm" if "crypto_trading_lm" in MODEL_SPECS else None
+        # Fallback: search by category or model name
+        if not trading_key:
+            for key, spec in MODEL_SPECS.items():
+                if spec.category == "trading_signal" or "cryptotrader" in spec.model_id.lower():
+                    trading_key = key
+                    break
+        if not trading_key:
+            return {
+                "success": False,
+                "available": False,
+                "error": "Trading signal model not configured",
+                "decision": "HOLD",
+                "confidence": 0.0,
+                "rationale": "Model not available"
+            }
+        try:
+            spec = MODEL_SPECS[trading_key]
+            pipeline = _registry.get_pipeline(trading_key)
+            # Build prompt for trading model
+            if context:
+                prompt = f"Trading analysis for {symbol}: {context}"
+            else:
+                prompt = f"Trading signal for {symbol}"
+            # Generate trading signal
+            result = pipeline(prompt, max_length=150, num_return_sequences=1, truncation=True)
+            if isinstance(result, list) and result:
+                result = result[0]
+            generated_text = result.get("generated_text", str(result))
+            # Parse decision from generated text
+            decision = "HOLD"  # Default
+            confidence = 0.5
+            text_lower = generated_text.lower()
+            if "buy" in text_lower and "sell" not in text_lower:
+                decision = "BUY"
+                confidence = 0.7
+            elif "sell" in text_lower and "buy" not in text_lower:
+                decision = "SELL"
+                confidence = 0.7
+            elif "hold" in text_lower:
+                decision = "HOLD"
+                confidence = 0.6
+            # Extract rationale (use generated text as rationale)
+            rationale = generated_text if len(generated_text) < 500 else generated_text[:497] + "..."
+            return {
+                "success": True,
+                "available": True,
+                "decision": decision,
+                "confidence": confidence,
+                "rationale": rationale,
+                "symbol": symbol,
+                "model": spec.model_id,
+                "context_provided": bool(context),
+                "raw": result,
+                "timestamp": datetime.now().isoformat()
+            }
+        except ModelNotAvailable as e:
+            logger.warning(f"Trading model not available: {e}")
+            return {
+                "success": False,
+                "available": False,
+                "error": f"Model not available: {str(e)}",
+                "decision": "HOLD",
+                "confidence": 0.0,
+                "rationale": "Trading model unavailable - check configuration",
+                "note": "HF model unavailable"
+            }
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Trading decision failed: {e}")
+        raise HTTPException(status_code=500, detail=f"Trading decision failed: {str(e)}")
 @app.get("/api/models/data/generated")
 async def get_generated_data(
     limit: int = 50,

app.py CHANGED Viewed

@@ -78,6 +78,10 @@ class CryptoDataHub:
                     data = json.load(f)
                     self.resources['unified'] = data
                     logger.info(f"✅ Loaded unified resources: {RESOURCES_JSON}")
             # Load all APIs merged
             if ALL_APIS_JSON.exists():
@@ -85,10 +89,70 @@ class CryptoDataHub:
                     data = json.load(f)
                     self.resources['all_apis'] = data
                     logger.info(f"✅ Loaded all APIs: {ALL_APIS_JSON}")
             logger.info(f"📊 Total resource files loaded: {len(self.resources)}")
         except Exception as e:
             logger.error(f"❌ Error loading resources: {e}")
     def initialize_models(self):
         """بارگذاری مدل‌های Hugging Face"""

                     data = json.load(f)
                     self.resources['unified'] = data
                     logger.info(f"✅ Loaded unified resources: {RESOURCES_JSON}")
+            else:
+                # Fallback data structure
+                logger.warning(f"⚠️ Resources JSON not found at {RESOURCES_JSON}, using fallback data")
+                self.resources['unified'] = self._get_fallback_unified_resources()
             # Load all APIs merged
             if ALL_APIS_JSON.exists():
                     data = json.load(f)
                     self.resources['all_apis'] = data
                     logger.info(f"✅ Loaded all APIs: {ALL_APIS_JSON}")
+            else:
+                # Fallback data structure
+                logger.warning(f"⚠️ All APIs JSON not found at {ALL_APIS_JSON}, using fallback data")
+                self.resources['all_apis'] = self._get_fallback_apis_data()
             logger.info(f"📊 Total resource files loaded: {len(self.resources)}")
         except Exception as e:
             logger.error(f"❌ Error loading resources: {e}")
+            # Use fallback data on error
+            if 'unified' not in self.resources:
+                self.resources['unified'] = self._get_fallback_unified_resources()
+            if 'all_apis' not in self.resources:
+                self.resources['all_apis'] = self._get_fallback_apis_data()
+    def _get_fallback_unified_resources(self) -> Dict:
+        """Fallback unified resources structure"""
+        return {
+            "metadata": {
+                "name": "Crypto Resources (Fallback)",
+                "version": "1.0.0",
+                "generated_at": datetime.now().isoformat(),
+                "source": "fallback"
+            },
+            "registry": {
+                "market_data": [
+                    {
+                        "name": "CoinGecko",
+                        "base_url": "https://api.coingecko.com/api/v3",
+                        "free": True,
+                        "auth": {},
+                        "description": "Free cryptocurrency market data API"
+                    },
+                    {
+                        "name": "Binance Public",
+                        "base_url": "https://api.binance.com/api/v3",
+                        "free": True,
+                        "auth": {},
+                        "description": "Binance public market data API"
+                    }
+                ],
+                "news": [
+                    {
+                        "name": "CryptoCompare News",
+                        "base_url": "https://min-api.cryptocompare.com/data/v2",
+                        "free": True,
+                        "auth": {},
+                        "description": "Cryptocurrency news API"
+                    }
+                ]
+            }
+        }
+    def _get_fallback_apis_data(self) -> Dict:
+        """Fallback APIs data structure"""
+        return {
+            "metadata": {
+                "name": "Crypto APIs (Fallback)",
+                "version": "1.0.0",
+                "generated_at": datetime.now().isoformat(),
+                "source": "fallback"
+            },
+            "discovered_keys": {},
+            "raw_files": []
+        }
     def initialize_models(self):
         """بارگذاری مدل‌های Hugging Face"""

backend/__pycache__/__init__.cpython-313.pyc CHANGED Viewed

Binary files a/backend/__pycache__/__init__.cpython-313.pyc and b/backend/__pycache__/__init__.cpython-313.pyc differ

backend/services/__pycache__/__init__.cpython-313.pyc CHANGED Viewed

Binary files a/backend/services/__pycache__/__init__.cpython-313.pyc and b/backend/services/__pycache__/__init__.cpython-313.pyc differ

backend/services/__pycache__/resource_validator.cpython-313.pyc ADDED Viewed

Binary file (10.3 kB). View file

config.py CHANGED Viewed

@@ -11,10 +11,25 @@ HUGGINGFACE_MODELS: Dict[str, str] = {
     "crypto_sentiment": "ElKulako/cryptobert",
 }
 class Settings:
     """Application settings."""
     def __init__(self):
         self.hf_token: Optional[str] = os.getenv("HF_TOKEN") or os.getenv("HUGGINGFACE_TOKEN")
 _settings = Settings()

     "crypto_sentiment": "ElKulako/cryptobert",
 }
+# Self-Healing Configuration
+SELF_HEALING_CONFIG = {
+    "error_threshold": int(os.getenv("HEALTH_ERROR_THRESHOLD", "3")),  # Failures before degraded
+    "cooldown_seconds": int(os.getenv("HEALTH_COOLDOWN_SECONDS", "300")),  # 5 minutes default
+    "success_recovery_count": int(os.getenv("HEALTH_RECOVERY_COUNT", "2")),  # Successes to recover
+    "enable_auto_reinit": os.getenv("HEALTH_AUTO_REINIT", "true").lower() == "true",
+    "reinit_cooldown_seconds": int(os.getenv("HEALTH_REINIT_COOLDOWN", "600")),  # 10 minutes
+}
 class Settings:
     """Application settings."""
     def __init__(self):
         self.hf_token: Optional[str] = os.getenv("HF_TOKEN") or os.getenv("HUGGINGFACE_TOKEN")
+        # Self-healing settings
+        self.health_error_threshold: int = SELF_HEALING_CONFIG["error_threshold"]
+        self.health_cooldown_seconds: int = SELF_HEALING_CONFIG["cooldown_seconds"]
+        self.health_success_recovery_count: int = SELF_HEALING_CONFIG["success_recovery_count"]
+        self.health_enable_auto_reinit: bool = SELF_HEALING_CONFIG["enable_auto_reinit"]
+        self.health_reinit_cooldown_seconds: int = SELF_HEALING_CONFIG["reinit_cooldown_seconds"]
 _settings = Settings()

crypto_resources_unified_2025-11-11.json CHANGED Viewed

The diff for this file is too large to render. See raw diff

index.html CHANGED Viewed

@@ -17,6 +17,8 @@
     <!-- Styles -->
     <link rel="stylesheet" href="/static/css/main.css">
     <script src="/static/js/trading-pairs-loader.js" defer></script>
     <script src="/static/js/app.js" defer></script>
@@ -24,6 +26,9 @@
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
 </head>
 <body>
     <div class="app-container">
         <!-- Header -->
         <header class="app-header">
@@ -79,6 +84,14 @@
                 <i class="fas fa-brain"></i>
                 <span>Sentiment</span>
             </button>
             <button class="tab-btn" data-tab="news">
                 <i class="fas fa-newspaper"></i>
                 <span>News</span>
@@ -270,12 +283,131 @@
                     <div id="news-sentiment-result" style="margin-top: 20px;"></div>
                 </div>
                 <div class="card">
                     <h3>Analysis History</h3>
                     <div id="sentiment-history"></div>
                 </div>
             </section>
             <!-- News Tab -->
             <section id="tab-news" class="tab-content">
                 <div class="section-header">
@@ -315,6 +447,12 @@
                     <button class="btn-primary" onclick="runDiagnostics()">▶️ Run Diagnostics</button>
                 </div>
                 <div class="card">
                     <h3>System Status</h3>
                     <div id="diagnostics-status"></div>

     <!-- Styles -->
     <link rel="stylesheet" href="/static/css/main.css">
+    <link rel="stylesheet" href="/static/css/toast.css">
+    <link rel="stylesheet" href="/static/css/enhancements.css">
     <script src="/static/js/trading-pairs-loader.js" defer></script>
     <script src="/static/js/app.js" defer></script>
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
 </head>
 <body>
+    <!-- Toast Container -->
+    <div class="toast-container" id="toast-container"></div>
     <div class="app-container">
         <!-- Header -->
         <header class="app-header">
                 <i class="fas fa-brain"></i>
                 <span>Sentiment</span>
             </button>
+            <button class="tab-btn" data-tab="ai-analyst">
+                <i class="fas fa-magic"></i>
+                <span>AI Analyst</span>
+            </button>
+            <button class="tab-btn" data-tab="trading-assistant">
+                <i class="fas fa-chart-bar"></i>
+                <span>Trading Signals</span>
+            </button>
             <button class="tab-btn" data-tab="news">
                 <i class="fas fa-newspaper"></i>
                 <span>News</span>
                     <div id="news-sentiment-result" style="margin-top: 20px;"></div>
                 </div>
+                <!-- News Summarization -->
+                <div class="card">
+                    <h3>📝 News Summarization</h3>
+                    <p style="color: var(--text-secondary); margin-bottom: 15px;">
+                        Summarize crypto/financial news using AI-powered Hugging Face model
+                    </p>
+                    <div class="form-group">
+                        <label>News Title:</label>
+                        <input type="text" id="summary-news-title" placeholder="Example: Bitcoin Reaches New All-Time High">
+                    </div>
+                    <div class="form-group">
+                        <label>News Content:</label>
+                        <textarea id="summary-news-content" rows="6" placeholder="Enter the full article text here. The AI will generate a concise summary highlighting the key points..."></textarea>
+                    </div>
+                    <button class="btn-primary" onclick="summarizeNews()">✨ Summarize News</button>
+                    <div id="news-summary-result" style="margin-top: 20px;"></div>
+                </div>
                 <div class="card">
                     <h3>Analysis History</h3>
                     <div id="sentiment-history"></div>
                 </div>
             </section>
+            <!-- AI Analyst Tab -->
+            <section id="tab-ai-analyst" class="tab-content">
+                <div class="section-header">
+                    <h2>🪄 AI Crypto Analyst</h2>
+                    <p style="color: var(--text-secondary); margin-top: 10px;">Powered by OpenC/crypto-gpt-o3-mini</p>
+                </div>
+                <div class="card">
+                    <h3>Text Generation & Analysis</h3>
+                    <p style="color: var(--text-secondary); margin-bottom: 20px;">
+                        Use AI to generate crypto market analysis, insights, or creative content related to crypto and DeFi.
+                    </p>
+                    <div class="form-group">
+                        <label>Prompt / Question:</label>
+                        <textarea id="ai-analyst-prompt" rows="6" placeholder="Example: Analyze the current state of Bitcoin and explain potential price movements based on market sentiment..."></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label>Mode:</label>
+                        <select id="ai-analyst-mode">
+                            <option value="analysis">Analysis</option>
+                            <option value="generation">Generation</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Max Length (tokens):</label>
+                        <select id="ai-analyst-max-length">
+                            <option value="100">100</option>
+                            <option value="200" selected>200</option>
+                            <option value="300">300</option>
+                            <option value="500">500</option>
+                        </select>
+                    </div>
+                    <button class="btn-primary" onclick="runAIAnalyst()">✨ Generate Analysis</button>
+                    <div id="ai-analyst-result" style="margin-top: 20px;"></div>
+                </div>
+                <div class="card">
+                    <h3>💡 Example Prompts</h3>
+                    <div style="display: grid; gap: 10px;">
+                        <div style="padding: 10px; background: rgba(31, 41, 55, 0.6); border-radius: 8px; cursor: pointer;" onclick="setAIAnalystPrompt('Analyze the current DeFi market trends and identify key opportunities.')">
+                            <strong>DeFi Market Analysis</strong>
+                            <p style="font-size: 12px; color: var(--text-secondary); margin-top: 5px;">Analyze the current DeFi market trends and identify key opportunities.</p>
+                        </div>
+                        <div style="padding: 10px; background: rgba(31, 41, 55, 0.6); border-radius: 8px; cursor: pointer;" onclick="setAIAnalystPrompt('Explain how Layer 2 solutions are impacting Ethereum scalability.')">
+                            <strong>Layer 2 Solutions</strong>
+                            <p style="font-size: 12px; color: var(--text-secondary); margin-top: 5px;">Explain how Layer 2 solutions are impacting Ethereum scalability.</p>
+                        </div>
+                        <div style="padding: 10px; background: rgba(31, 41, 55, 0.6); border-radius: 8px; cursor: pointer;" onclick="setAIAnalystPrompt('What are the key factors affecting Bitcoin price movements?')">
+                            <strong>Bitcoin Price Factors</strong>
+                            <p style="font-size: 12px; color: var(--text-secondary); margin-top: 5px;">What are the key factors affecting Bitcoin price movements?</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <!-- Trading Assistant Tab -->
+            <section id="tab-trading-assistant" class="tab-content">
+                <div class="section-header">
+                    <h2>📊 Trading Signal Assistant</h2>
+                    <p style="color: var(--text-secondary); margin-top: 10px;">Powered by agarkovv/CryptoTrader-LM</p>
+                </div>
+                <div class="card">
+                    <h3>Get Trading Decision</h3>
+                    <p style="color: var(--text-secondary); margin-bottom: 20px;">
+                        Get AI-powered trading signals (BUY/SELL/HOLD) based on market analysis.
+                    </p>
+                    <div class="form-group">
+                        <label>Trading Symbol:</label>
+                        <div id="trading-symbol-container">
+                            <input type="text" id="trading-symbol" placeholder="Loading pairs..." readonly>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label>Market Context (Optional):</label>
+                        <textarea id="trading-context" rows="4" placeholder="Example: Recent breakout above resistance, high volume, positive news flow..."></textarea>
+                    </div>
+                    <button class="btn-primary" onclick="runTradingAssistant()">🎯 Get Trading Signal</button>
+                    <div id="trading-assistant-result" style="margin-top: 20px;"></div>
+                </div>
+                <div class="card">
+                    <h3>⚠️ Disclaimer</h3>
+                    <div class="alert alert-warning">
+                        <strong>Important:</strong> This trading assistant provides AI-generated signals for informational purposes only.
+                        It should NOT be used as the sole basis for trading decisions. Always conduct your own research,
+                        consider multiple factors, and consult with financial professionals before making investment decisions.
+                        Past performance does not guarantee future results.
+                    </div>
+                </div>
+            </section>
             <!-- News Tab -->
             <section id="tab-news" class="tab-content">
                 <div class="section-header">
                     <button class="btn-primary" onclick="runDiagnostics()">▶️ Run Diagnostics</button>
                 </div>
+                <div class="card">
+                    <h3>System Health</h3>
+                    <button class="btn-refresh" onclick="loadHealthDiagnostics()">🔄 Refresh Health</button>
+                    <div id="health-diagnostics-result" style="margin-top: 15px;"></div>
+                </div>
                 <div class="card">
                     <h3>System Status</h3>
                     <div id="diagnostics-status"></div>

requirements.txt CHANGED Viewed

@@ -1,5 +1,6 @@
 # Unified dependencies for Crypto Intelligence Hub (HuggingFace Space)
 # Optimized for HF deployment with minimal conflicts
 # ===== Core API Stack =====
 fastapi==0.115.0

 # Unified dependencies for Crypto Intelligence Hub (HuggingFace Space)
 # Optimized for HF deployment with minimal conflicts
+# Production-ready for Hugging Face Spaces Docker environment
 # ===== Core API Stack =====
 fastapi==0.115.0

static/css/components.css CHANGED Viewed

@@ -1,203 +1,820 @@
-/* ============================================
-   Components CSS - Reusable UI Components
-   ============================================
-   This file contains all reusable component styles:
-   - Toast notifications
-   - Loading spinners
-   - Status badges (info, success, warning, danger)
-   - Empty states
-   - Stream items
-   - Alerts
-   ============================================ */
-/* === Toast Notification Styles === */
-.toast-stack {
-  position: fixed;
-  top: 24px;
-  right: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  z-index: 2000;
-}
-.toast {
-  min-width: 260px;
-  background: #ffffff;
-  border-radius: 12px;
-  border: 1px solid var(--ui-border);
-  padding: 14px 18px;
-  box-shadow: var(--ui-shadow);
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  animation: toast-in 220ms ease;
-}
-.toast.success { border-color: rgba(22, 163, 74, 0.4); }
-.toast.error { border-color: rgba(220, 38, 38, 0.4); }
-.toast.info { border-color: rgba(37, 99, 235, 0.4); }
-.toast strong {
-  font-size: 0.95rem;
-  color: var(--ui-text);
-}
-.toast small {
-  color: var(--ui-text-muted);
-  display: block;
-}
-@keyframes toast-in {
-  from { opacity: 0; transform: translateY(-10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-/* === Loading Spinner Styles === */
-.loading-indicator {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--ui-text-muted);
-  font-size: 0.9rem;
-}
-.loading-indicator::before {
-  content: "";
-  width: 14px;
-  height: 14px;
-  border: 2px solid var(--ui-border);
-  border-top-color: var(--ui-primary);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
 }
-@keyframes spin {
-  to { transform: rotate(360deg); }
 }
-.fade-in {
-  animation: fade 250ms ease;
 }
-@keyframes fade {
-  from { opacity: 0; }
-  to { opacity: 1; }
 }
-/* === Badge Styles === */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 12px;
-  border-radius: 999px;
-  font-size: 0.8rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  border: 1px solid transparent;
 }
-.badge.info {
-  color: var(--ui-primary);
-  border-color: var(--ui-primary);
-  background: rgba(37, 99, 235, 0.08);
 }
-.badge.success {
-  color: var(--ui-success);
-  border-color: rgba(22, 163, 74, 0.3);
-  background: rgba(22, 163, 74, 0.08);
 }
-.badge.warning {
-  color: var(--ui-warning);
-  border-color: rgba(217, 119, 6, 0.3);
-  background: rgba(217, 119, 6, 0.08);
 }
-.badge.danger {
-  color: var(--ui-danger);
-  border-color: rgba(220, 38, 38, 0.3);
-  background: rgba(220, 38, 38, 0.08);
 }
-.badge.source-fallback {
-  border-color: rgba(220, 38, 38, 0.3);
-  color: var(--ui-danger);
-  background: rgba(220, 38, 38, 0.06);
 }
-.badge.source-live {
-  border-color: rgba(22, 163, 74, 0.3);
-  color: var(--ui-success);
-  background: rgba(22, 163, 74, 0.08);
 }
-/* === Empty State Styles === */
-.empty-state {
-  padding: 20px;
-  border-radius: 12px;
-  text-align: center;
-  border: 1px dashed var(--ui-border);
-  color: var(--ui-text-muted);
-  background: #fff;
 }
-/* === Stream Item Styles === */
-.ws-stream {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-height: 300px;
-  overflow-y: auto;
 }
-.stream-item {
-  border: 1px solid var(--ui-border);
-  border-radius: 12px;
-  padding: 12px 14px;
-  background: var(--ui-panel-muted);
 }
-/* === Alert Styles === */
 .alert {
-  border-radius: 12px;
-  padding: 12px 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
 }
-.alert.info {
-  background: rgba(37, 99, 235, 0.08);
-  color: var(--ui-primary);
-  border: 1px solid rgba(37, 99, 235, 0.2);
 }
-.alert.success {
-  background: rgba(22, 163, 74, 0.08);
-  color: var(--ui-success);
-  border: 1px solid rgba(22, 163, 74, 0.2);
 }
-.alert.warning {
-  background: rgba(217, 119, 6, 0.08);
-  color: var(--ui-warning);
-  border: 1px solid rgba(217, 119, 6, 0.2);
 }
-.alert.danger,
-.alert.error {
-  background: rgba(220, 38, 38, 0.08);
-  color: var(--ui-danger);
-  border: 1px solid rgba(220, 38, 38, 0.2);
 }

+/**
+ * ═══════════════════════════════════════════════════════════════════
+ * COMPONENTS CSS — ULTRA ENTERPRISE EDITION
+ * Crypto Monitor HF — Glass + Neon Component Library
+ * ═══════════════════════════════════════════════════════════════════
+ *
+ * All components use design-system.css tokens
+ * Glass morphism + Neon glows + Smooth animations
+ */
+/* ═══════════════════════════════════════════════════════════════════
+   🔘 BUTTONS
+   ═══════════════════════════════════════════════════════════════════ */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-6);
+    font-family: var(--font-main);
+    font-size: var(--fs-sm);
+    font-weight: var(--fw-semibold);
+    line-height: var(--lh-tight);
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    white-space: nowrap;
+    user-select: none;
+    min-height: 44px; /* Touch target WCAG AA */
 }
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
 }
+.btn:focus-visible {
+    outline: 2px solid var(--brand-cyan);
+    outline-offset: 2px;
 }
+/* Primary Button — Gradient + Glow */
+.btn-primary {
+    background: var(--gradient-primary);
+    color: var(--text-strong);
+    box-shadow: var(--shadow-sm), var(--glow-blue);
 }
+.btn-primary:hover {
+    box-shadow: var(--shadow-md), var(--glow-blue-strong);
+    transform: translateY(-2px);
+}
+.btn-primary:active {
+    transform: translateY(0);
+    box-shadow: var(--shadow-xs), var(--glow-blue);
 }
+/* Secondary Button — Glass Outline */
+.btn-secondary {
+    background: var(--surface-glass);
+    color: var(--text-normal);
+    border: 1px solid var(--border-light);
+    backdrop-filter: var(--blur-md);
 }
+.btn-secondary:hover {
+    background: var(--surface-glass-strong);
+    border-color: var(--border-medium);
+    transform: translateY(-1px);
 }
+/* Success Button */
+.btn-success {
+    background: var(--gradient-success);
+    color: var(--text-strong);
+    box-shadow: var(--shadow-sm), var(--glow-green);
 }
+.btn-success:hover {
+    box-shadow: var(--shadow-md), var(--glow-green-strong);
+    transform: translateY(-2px);
 }
+/* Danger Button */
+.btn-danger {
+    background: var(--gradient-danger);
+    color: var(--text-strong);
+    box-shadow: var(--shadow-sm);
 }
+.btn-danger:hover {
+    box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
 }
+/* Ghost Button */
+.btn-ghost {
+    background: transparent;
+    color: var(--text-soft);
+    border: none;
+}
+.btn-ghost:hover {
+    background: var(--surface-glass);
+    color: var(--text-normal);
+}
+/* Button Sizes */
+.btn-sm {
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--fs-xs);
+    min-height: 36px;
+}
+.btn-lg {
+    padding: var(--space-4) var(--space-8);
+    font-size: var(--fs-base);
+    min-height: 52px;
+}
+/* Icon-only button */
+.btn-icon {
+    padding: var(--space-3);
+    min-width: 44px;
+    min-height: 44px;
+}
+/* ═══════════════════════════════════════════════════════════════════
+   🃏 CARDS
+   ═══════════════════════════════════════════════════════════════════ */
+.card {
+    background: var(--surface-glass);
+    border: 1px solid var(--border-light);
+    border-radius: var(--radius-lg);
+    padding: var(--space-6);
+    box-shadow: var(--shadow-md);
+    backdrop-filter: var(--blur-lg);
+    transition: all var(--transition-normal);
+}
+.card:hover {
+    background: var(--surface-glass-strong);
+    box-shadow: var(--shadow-lg);
+    transform: translateY(-2px);
+}
+.card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--space-4);
+    padding-bottom: var(--space-4);
+    border-bottom: 1px solid var(--border-subtle);
+}
+.card-title {
+    font-size: var(--fs-lg);
+    font-weight: var(--fw-bold);
+    color: var(--text-strong);
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+.card-body {
+    color: var(--text-soft);
+    line-height: var(--lh-relaxed);
+}
+.card-footer {
+    margin-top: var(--space-6);
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--border-subtle);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+/* Card variants */
+.card-elevated {
+    background: var(--surface-glass-strong);
+    box-shadow: var(--shadow-lg);
+}
+.card-neon {
+    border-color: var(--brand-cyan);
+    box-shadow: var(--shadow-md), var(--glow-cyan);
+}
+/* ═══════════════════════════════════════════════════════════════════
+   📊 STAT CARDS
+   ═══════════════════════════════════════════════════════════════════ */
+.stat-card {
+    background: var(--surface-glass);
+    border: 1px solid var(--border-light);
+    border-radius: var(--radius-md);
+    padding: var(--space-5);
+    backdrop-filter: var(--blur-lg);
+    transition: all var(--transition-normal);
+}
+.stat-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg), var(--glow-cyan);
+    border-color: var(--brand-cyan);
+}
+.stat-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--gradient-primary);
+    box-shadow: var(--glow-blue);
+    margin-bottom: var(--space-3);
+}
+.stat-value {
+    font-size: var(--fs-3xl);
+    font-weight: var(--fw-extrabold);
+    color: var(--text-strong);
+    margin-bottom: var(--space-1);
+    line-height: var(--lh-tight);
+}
+.stat-label {
+    font-size: var(--fs-sm);
+    color: var(--text-muted);
+    font-weight: var(--fw-medium);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-wide);
+}
+.stat-change {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    margin-top: var(--space-2);
+    font-size: var(--fs-xs);
+    font-weight: var(--fw-semibold);
+    padding: var(--space-1) var(--space-2);
+    border-radius: var(--radius-xs);
+}
+.stat-change.positive {
+    color: var(--success);
+    background: rgba(34, 197, 94, 0.15);
+}
+.stat-change.negative {
+    color: var(--danger);
+    background: rgba(239, 68, 68, 0.15);
+}
+/* ═══════════════════════════════════════════════════════════════════
+   🏷️ BADGES
+   ═══════════════════════════════════════════════════════════════════ */
+.badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-3);
+    font-size: var(--fs-xs);
+    font-weight: var(--fw-semibold);
+    border-radius: var(--radius-full);
+    white-space: nowrap;
+    line-height: var(--lh-tight);
 }
+.badge-primary {
+    background: rgba(59, 130, 246, 0.20);
+    color: var(--brand-blue-light);
+    border: 1px solid rgba(59, 130, 246, 0.40);
+}
+.badge-success {
+    background: rgba(34, 197, 94, 0.20);
+    color: var(--success-light);
+    border: 1px solid rgba(34, 197, 94, 0.40);
 }
+.badge-warning {
+    background: rgba(245, 158, 11, 0.20);
+    color: var(--warning-light);
+    border: 1px solid rgba(245, 158, 11, 0.40);
 }
+.badge-danger {
+    background: rgba(239, 68, 68, 0.20);
+    color: var(--danger-light);
+    border: 1px solid rgba(239, 68, 68, 0.40);
+}
+.badge-purple {
+    background: rgba(139, 92, 246, 0.20);
+    color: var(--brand-purple-light);
+    border: 1px solid rgba(139, 92, 246, 0.40);
+}
+.badge-cyan {
+    background: rgba(6, 182, 212, 0.20);
+    color: var(--brand-cyan-light);
+    border: 1px solid rgba(6, 182, 212, 0.40);
+}
+/* ═══════════════════════════════════════════════════════════════════
+   ⚠️ ALERTS
+   ═══════════════════════════════════════════════════════════════════ */
 .alert {
+    padding: var(--space-4) var(--space-5);
+    border-radius: var(--radius-md);
+    border-left: 4px solid;
+    backdrop-filter: var(--blur-md);
+    display: flex;
+    align-items: start;
+    gap: var(--space-3);
+    margin-bottom: var(--space-4);
+}
+.alert-info {
+    background: rgba(14, 165, 233, 0.15);
+    border-left-color: var(--info);
+    color: var(--info-light);
+}
+.alert-success {
+    background: rgba(34, 197, 94, 0.15);
+    border-left-color: var(--success);
+    color: var(--success-light);
+}
+.alert-warning {
+    background: rgba(245, 158, 11, 0.15);
+    border-left-color: var(--warning);
+    color: var(--warning-light);
+}
+.alert-error {
+    background: rgba(239, 68, 68, 0.15);
+    border-left-color: var(--danger);
+    color: var(--danger-light);
+}
+.alert-icon {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+}
+.alert-content {
+    flex: 1;
+}
+.alert-title {
+    font-weight: var(--fw-semibold);
+    margin-bottom: var(--space-1);
+}
+.alert-description {
+    font-size: var(--fs-sm);
+    opacity: 0.9;
+}
+/* ═══════════════════════════════════════════════════════════════════
+   📋 TABLES
+   ═══════════════════════════════════════════════════════════════════ */
+.table-container {
+    overflow-x: auto;
+    border-radius: var(--radius-lg);
+    background: var(--surface-glass);
+    border: 1px solid var(--border-light);
+    backdrop-filter: var(--blur-lg);
+}
+.table {
+    width: 100%;
+    border-collapse: collapse;
+}
+.table thead {
+    background: rgba(255, 255, 255, 0.14);
+    position: sticky;
+    top: 0;
+    z-index: var(--z-sticky);
+}
+.table th {
+    padding: var(--space-4) var(--space-5);
+    text-align: left;
+    font-size: var(--fs-xs);
+    font-weight: var(--fw-bold);
+    color: var(--text-soft);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-wider);
+    border-bottom: 2px solid var(--border-medium);
+}
+.table td {
+    padding: var(--space-4) var(--space-5);
+    border-bottom: 1px solid var(--border-subtle);
+    color: var(--text-normal);
+}
+.table tbody tr {
+    transition: all var(--transition-fast);
+}
+.table tbody tr:hover {
+    background: rgba(255, 255, 255, 0.10);
+    box-shadow: inset 0 0 0 1px var(--brand-cyan), inset 0 0 12px rgba(6, 182, 212, 0.25);
+}
+.table tbody tr:last-child td {
+    border-bottom: none;
+}
+/* ═══════════════════════════════════════════════════════════════════
+   🔴 STATUS DOTS
+   ═══════════════════════════════════════════════════════════════════ */
+.status-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: var(--space-2);
+}
+.status-online {
+    background: var(--success);
+    box-shadow: 0 0 12px var(--success), 0 0 24px rgba(34, 197, 94, 0.40);
+    animation: pulse-green 2s infinite;
+}
+.status-offline {
+    background: var(--danger);
+    box-shadow: 0 0 12px var(--danger);
+}
+.status-degraded {
+    background: var(--warning);
+    box-shadow: 0 0 12px var(--warning);
+    animation: pulse-yellow 2s infinite;
+}
+@keyframes pulse-green {
+    0%, 100% {
+        box-shadow: 0 0 12px var(--success), 0 0 24px rgba(34, 197, 94, 0.40);
+    }
+    50% {
+        box-shadow: 0 0 16px var(--success), 0 0 32px rgba(34, 197, 94, 0.60);
+    }
+}
+@keyframes pulse-yellow {
+    0%, 100% {
+        box-shadow: 0 0 12px var(--warning), 0 0 24px rgba(245, 158, 11, 0.40);
+    }
+    50% {
+        box-shadow: 0 0 16px var(--warning), 0 0 32px rgba(245, 158, 11, 0.60);
+    }
+}
+/* ═══════════════════════════════════════════════════════════════════
+   ⏳ LOADING STATES
+   ═══════════════════════════════════════════════════════════════════ */
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-12);
+}
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid var(--border-light);
+    border-top-color: var(--brand-cyan);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    box-shadow: var(--glow-cyan);
+}
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+.skeleton {
+    background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0.08) 0%,
+        rgba(255, 255, 255, 0.14) 50%,
+        rgba(255, 255, 255, 0.08) 100%
+    );
+    background-size: 200% 100%;
+    animation: skeleton-loading 1.5s ease-in-out infinite;
+    border-radius: var(--radius-md);
+}
+@keyframes skeleton-loading {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
+}
+/* ═══════════════════════════════════════════════════════════════════
+   📝 FORMS & INPUTS
+   ═══════════════════════════════════════════════════════════════════ */
+.form-group {
+    margin-bottom: var(--space-5);
+}
+.form-label {
+    display: block;
+    font-size: var(--fs-sm);
+    font-weight: var(--fw-semibold);
+    margin-bottom: var(--space-2);
+    color: var(--text-normal);
+}
+.form-input,
+.form-select,
+.form-textarea {
+    width: 100%;
+    padding: var(--space-3) var(--space-4);
+    font-family: var(--font-main);
+    font-size: var(--fs-base);
+    color: var(--text-strong);
+    background: var(--input-bg);
+    border: 1px solid var(--border-light);
+    border-radius: var(--radius-sm);
+    backdrop-filter: var(--blur-md);
+    transition: all var(--transition-fast);
+}
+.form-input:focus,
+.form-select:focus,
+.form-textarea:focus {
+    outline: none;
+    border-color: var(--brand-cyan);
+    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.30), var(--glow-cyan);
+    background: rgba(15, 23, 42, 0.80);
+}
+.form-input::placeholder {
+    color: var(--text-faint);
+}
+.form-input:disabled,
+.form-select:disabled,
+.form-textarea:disabled {
+    background: var(--surface-glass);
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+.form-error {
+    color: var(--danger);
+    font-size: var(--fs-xs);
+    margin-top: var(--space-1);
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+}
+.form-help {
+    color: var(--text-muted);
+    font-size: var(--fs-xs);
+    margin-top: var(--space-1);
+}
+/* ═══════════════════════════════════════════════════════════════════
+   🔘 TOGGLE SWITCH
+   ═══════════════════════════════════════════════════════════════════ */
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 52px;
+    height: 28px;
 }
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
 }
+.toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--surface-glass);
+    border: 1px solid var(--border-light);
+    transition: var(--transition-normal);
+    border-radius: var(--radius-full);
 }
+.toggle-slider:before {
+    position: absolute;
+    content: "";
+    height: 20px;
+    width: 20px;
+    left: 4px;
+    bottom: 3px;
+    background: var(--text-strong);
+    transition: var(--transition-normal);
+    border-radius: 50%;
+    box-shadow: var(--shadow-sm);
 }
+.toggle-switch input:checked + .toggle-slider {
+    background: var(--gradient-primary);
+    box-shadow: var(--glow-blue);
+    border-color: transparent;
 }
+.toggle-switch input:checked + .toggle-slider:before {
+    transform: translateX(24px);
+}
+.toggle-switch input:focus-visible + .toggle-slider {
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.30);
+}
+/* ═══════════════════════════════════════════════════════════════════
+   🔳 MODAL
+   ═══════════════════════════════════════════════════════════════════ */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--modal-backdrop);
+    backdrop-filter: var(--blur-xl);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: var(--z-modal);
+    padding: var(--space-6);
+    animation: modal-fade-in 0.2s ease-out;
+}
+@keyframes modal-fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+.modal {
+    background: var(--surface-glass-stronger);
+    border: 1px solid var(--border-medium);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-2xl);
+    backdrop-filter: var(--blur-lg);
+    max-width: 600px;
+    width: 100%;
+    max-height: 90vh;
+    overflow-y: auto;
+    animation: modal-scale-in 0.25s var(--ease-spring);
+}
+@keyframes modal-scale-in {
+    from {
+        transform: scale(0.95);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+.modal-header {
+    padding: var(--space-6) var(--space-7);
+    border-bottom: 1px solid var(--border-subtle);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.modal-title {
+    font-size: var(--fs-xl);
+    font-weight: var(--fw-bold);
+    color: var(--text-strong);
+    margin: 0;
+}
+.modal-close {
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-soft);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: var(--transition-fast);
+}
+.modal-close:hover {
+    background: var(--surface-glass);
+    color: var(--text-strong);
+}
+.modal-body {
+    padding: var(--space-7);
+    color: var(--text-normal);
+}
+.modal-footer {
+    padding: var(--space-6) var(--space-7);
+    border-top: 1px solid var(--border-subtle);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-3);
+}
+/* ═══════════════════════════════════════════════════════════════════
+   📈 CHARTS & VISUALIZATION
+   ═══════════════════════════════════════════════════════════════════ */
+.chart-container {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    padding: var(--space-4);
+    background: var(--surface-glass);
+    border: 1px solid var(--border-light);
+    border-radius: var(--radius-md);
+    backdrop-filter: var(--blur-md);
+}
+.chart-container canvas {
+    width: 100% !important;
+    height: auto !important;
+    max-height: 400px;
+}
+/* ═══════════════════════════════════════════════════════════════════
+   📐 GRID LAYOUTS
+   ═══════════════════════════════════════════════════════════════════ */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: var(--space-5);
+    margin-bottom: var(--space-8);
+}
+.cards-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: var(--space-6);
+}
+/* ═══════════════════════════════════════════════════════════════════
+   🎯 EMPTY STATE
+   ═══════════════════════════════════════════════════════════════════ */
+.empty-state {
+    text-align: center;
+    padding: var(--space-12);
+    color: var(--text-muted);
+}
+.empty-state-icon {
+    font-size: 64px;
+    margin-bottom: var(--space-4);
+    opacity: 0.4;
+}
+.empty-state-title {
+    font-size: var(--fs-lg);
+    font-weight: var(--fw-semibold);
+    margin-bottom: var(--space-2);
+    color: var(--text-normal);
+}
+.empty-state-description {
+    font-size: var(--fs-sm);
+    margin-bottom: var(--space-6);
+    max-width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+}
+/* ═══════════════════════════════════════════════════════════════════
+   🏗️ END OF COMPONENTS
+   ═══════════════════════════════════════════════════════════════════ */

static/css/design-system.css CHANGED Viewed

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

 :root {
   /* ━━━ FONT FAMILIES ━━━ */
+  --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 CHANGED Viewed

@@ -1,129 +1,96 @@
 /**
  * ============================================
- * ENHANCED DESIGN TOKENS - Admin UI Modernization
- * Crypto Intelligence Hub
  * ============================================
  *
- * Comprehensive design system with:
- * - Color palette (dark/light themes)
- * - Gradients (linear, radial, glass effects)
- * - Typography scale (fonts, sizes, weights, spacing)
- * - Spacing system (consistent rhythm)
  * - Border radius tokens
- * - Multi-layered shadow system
- * - Blur effect variables
- * - Transition and easing functions
- * - Z-index elevation levels
- * - Layout constants
  */
 :root {
-    /* ===== COLOR PALETTE - DARK THEME (DEFAULT) ===== */
-    /* 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);
     /* 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);
     /* Text Colors */
-    --text-primary: #f1f5f9;
-    --text-secondary: #cbd5e1;
-    --text-tertiary: #94a3b8;
-    --text-muted: #64748b;
-    --text-disabled: #475569;
-    --text-inverse: #0f172a;
-    /* 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);
-    /* ===== GRADIENTS ===== */
-    /* 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%);
-    /* 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%);
-    /* 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%);
-    /* 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%);
-    /* 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%);
-    /* ===== TYPOGRAPHY ===== */
-    /* 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;
     /* 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;
     /* ===== 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 */
     /* 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);
     /* ===== BORDER RADIUS ===== */
     --radius-none: 0;
-    --radius-xs: 0.25rem;    /* 4px */
-    --radius-sm: 0.375rem;   /* 6px */
     --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-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);
     /* 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);
-    /* ===== BLUR EFFECT VARIABLES ===== */
     --blur-none: 0;
-    --blur-xs: 2px;
     --blur-sm: 4px;
     --blur-base: 8px;
     --blur-md: 12px;
     --blur-lg: 16px;
-    --blur-xl: 24px;
     --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 ===== */
     --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 ===== */
     --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 ===== */
 [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);
 }
 /* ===== 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);
 }
 .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);
 }
 /* Gradient Backgrounds */
@@ -375,12 +276,8 @@
     background: var(--gradient-primary);
 }
-.bg-gradient-accent {
-    background: var(--gradient-accent);
-}
-.bg-gradient-success {
-    background: var(--gradient-success);
 }
 /* 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-base {
-    transition: var(--transition-all-base);
 }
 .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;
-    }
 }

 /**
  * ============================================
+ * DESIGN TOKENS - Enterprise Edition
+ * Crypto Monitor Ultimate
  * ============================================
  *
+ * Complete design system with:
+ * - Color palette (light/dark)
+ * - Typography scale
+ * - Spacing system
  * - Border radius tokens
+ * - Shadow system
+ * - Blur tokens
+ * - Elevation levels
+ * - Animation timings
  */
 :root {
+    /* ===== COLOR PALETTE ===== */
+    /* 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 */
+    --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 */
+    --color-text-primary: #f9fafb;
+    --color-text-secondary: #9ca3af;
+    --color-text-tertiary: #6b7280;
+    --color-text-disabled: #4b5563;
+    --color-text-inverse: #0a0e1a;
+    /* Accent Colors - Neon Palette */
+    --color-accent-blue: #3b82f6;
+    --color-accent-blue-dark: #2563eb;
+    --color-accent-blue-light: #60a5fa;
+    --color-accent-purple: #8b5cf6;
+    --color-accent-purple-dark: #7c3aed;
+    --color-accent-purple-light: #a78bfa;
+    --color-accent-pink: #ec4899;
+    --color-accent-pink-dark: #db2777;
+    --color-accent-pink-light: #f472b6;
+    --color-accent-green: #10b981;
+    --color-accent-green-dark: #059669;
+    --color-accent-green-light: #34d399;
+    --color-accent-yellow: #f59e0b;
+    --color-accent-yellow-dark: #d97706;
+    --color-accent-yellow-light: #fbbf24;
+    --color-accent-red: #ef4444;
+    --color-accent-red-dark: #dc2626;
+    --color-accent-red-light: #f87171;
+    --color-accent-cyan: #06b6d4;
+    --color-accent-cyan-dark: #0891b2;
+    --color-accent-cyan-light: #22d3ee;
+    /* 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);
+    /* 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 */
     --font-size-2xl: 1.875rem;    /* 30px */
     --font-size-3xl: 2.25rem;     /* 36px */
     --font-size-4xl: 3rem;        /* 48px */
     /* Font Weights */
     --font-weight-light: 300;
     /* Line Heights */
     --line-height-tight: 1.25;
     --line-height-normal: 1.5;
+    --line-height-relaxed: 1.75;
+    --line-height-loose: 2;
     /* ===== SPACING SCALE ===== */
+    --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(--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-sm: 0.25rem;    /* 4px */
     --radius-base: 0.5rem;   /* 8px */
     --radius-md: 0.75rem;    /* 12px */
     --radius-lg: 1rem;       /* 16px */
+    --radius-xl: 1.25rem;    /* 20px */
+    --radius-2xl: 1.5rem;    /* 24px */
+    --radius-3xl: 2rem;      /* 32px */
     --radius-full: 9999px;
+    /* ===== 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.06);
+    --shadow-inner-lg: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+    /* ===== BLUR TOKENS ===== */
     --blur-none: 0;
     --blur-sm: 4px;
     --blur-base: 8px;
     --blur-md: 12px;
     --blur-lg: 16px;
+    --blur-xl: 20px;
     --blur-2xl: 40px;
     --blur-3xl: 64px;
+    /* ===== ELEVATION LEVELS ===== */
+    /* Use these for layering UI elements */
     --z-base: 0;
     --z-dropdown: 1000;
     --z-sticky: 1020;
     --z-popover: 1060;
     --z-tooltip: 1070;
     --z-notification: 1080;
+    /* ===== 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;
     --breakpoint-xl: 1024px;
     --breakpoint-2xl: 1280px;
     --breakpoint-3xl: 1440px;
 }
+/* ===== LIGHT MODE OVERRIDES ===== */
 [data-theme="light"] {
+    --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(--color-glass-bg);
+    backdrop-filter: blur(var(--blur-xl));
+    border: 1px solid var(--color-glass-border);
 }
 .glass-effect-light {
+    background: var(--color-glass-bg-light);
+    backdrop-filter: blur(var(--blur-lg));
+    border: 1px solid var(--color-glass-border);
 }
 /* Gradient Backgrounds */
     background: var(--gradient-primary);
 }
+.bg-gradient-secondary {
+    background: var(--gradient-secondary);
 }
 /* Text Gradients */
     -webkit-text-fill-color: transparent;
 }
 /* Shadow Utilities */
 .shadow-glow-blue {
     box-shadow: var(--shadow-blue);
 /* Animation Utilities */
 .transition-fast {
+    transition: all var(--duration-fast) var(--ease-out);
 }
 .transition-base {
+    transition: all var(--duration-base) var(--ease-in-out);
 }
 .transition-slow {
+    transition: all var(--duration-slow) var(--ease-in-out);
 }

static/css/enhancements.css ADDED Viewed

	@@ -0,0 +1,440 @@

+/* Additional UI Enhancements for Pro Trading Terminal */
+/* Glassmorphism Effects */
+.glass-card {
+    background: rgba(17, 24, 39, 0.4);
+    backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+/* Neon Glow Effects */
+.neon-text {
+    text-shadow:
+        0 0 5px rgba(102, 126, 234, 0.5),
+        0 0 10px rgba(102, 126, 234, 0.3),
+        0 0 20px rgba(102, 126, 234, 0.2);
+}
+.neon-border {
+    border: 1px solid var(--primary);
+    box-shadow:
+        0 0 5px rgba(102, 126, 234, 0.5),
+        0 0 10px rgba(102, 126, 234, 0.3),
+        inset 0 0 10px rgba(102, 126, 234, 0.1);
+}
+/* Price Movement Animations */
+.price-up {
+    color: var(--success) !important;
+    animation: priceFlash 0.5s ease;
+}
+.price-down {
+    color: var(--danger) !important;
+    animation: priceFlash 0.5s ease;
+}
+@keyframes priceFlash {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; transform: scale(1.05); }
+}
+/* Market Data Table Enhancements */
+.market-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+}
+.market-table thead {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background: rgba(17, 24, 39, 0.95);
+    backdrop-filter: blur(10px);
+}
+.market-table th {
+    padding: 15px 12px;
+    text-align: left;
+    font-weight: 600;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-secondary);
+    border-bottom: 2px solid var(--border);
+}
+.market-table td {
+    padding: 15px 12px;
+    border-bottom: 1px solid var(--border-light);
+    font-size: 14px;
+}
+.market-table tbody tr {
+    transition: all 0.2s;
+}
+.market-table tbody tr:hover {
+    background: rgba(102, 126, 234, 0.05);
+    transform: scale(1.01);
+}
+.market-table .coin-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.market-table .coin-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+.market-table .coin-symbol {
+    font-weight: 700;
+    color: var(--text-primary);
+}
+.market-table .coin-name {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+.market-table .price {
+    font-family: 'JetBrains Mono', monospace;
+    font-weight: 600;
+    font-size: 15px;
+}
+.market-table .change-positive {
+    color: var(--success);
+    font-weight: 600;
+}
+.market-table .change-negative {
+    color: var(--danger);
+    font-weight: 600;
+}
+/* Chart Container Enhancements */
+.chart-container {
+    position: relative;
+    height: 300px;
+    padding: 20px;
+    background: rgba(17, 24, 39, 0.4);
+    border-radius: 12px;
+    border: 1px solid var(--border);
+}
+.chart-container canvas {
+    max-height: 100%;
+}
+/* Sentiment Visualization */
+.sentiment-meter {
+    width: 100%;
+    height: 20px;
+    background: linear-gradient(90deg,
+        var(--danger) 0%,
+        var(--warning) 25%,
+        var(--text-secondary) 50%,
+        var(--info) 75%,
+        var(--success) 100%
+    );
+    border-radius: 10px;
+    position: relative;
+    overflow: hidden;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+.sentiment-indicator {
+    position: absolute;
+    top: -5px;
+    width: 30px;
+    height: 30px;
+    background: white;
+    border: 3px solid var(--primary);
+    border-radius: 50%;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    transition: left 0.5s ease;
+}
+/* Model Status Grid */
+.model-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 15px;
+}
+.model-card {
+    background: rgba(17, 24, 39, 0.6);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 20px;
+    transition: all 0.3s;
+    position: relative;
+    overflow: hidden;
+}
+.model-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: var(--gradient-purple);
+    transform: scaleX(0);
+    transition: transform 0.3s;
+}
+.model-card:hover::before {
+    transform: scaleX(1);
+}
+.model-card:hover {
+    border-color: var(--primary);
+    transform: translateY(-3px);
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
+}
+.model-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+.model-name {
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--text-primary);
+}
+.model-badge {
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+.model-badge.loaded {
+    background: rgba(16, 185, 129, 0.2);
+    color: var(--success);
+}
+.model-badge.failed {
+    background: rgba(239, 68, 68, 0.2);
+    color: var(--danger);
+}
+.model-badge.loading {
+    background: rgba(245, 158, 11, 0.2);
+    color: var(--warning);
+}
+/* News Card */
+.news-card {
+    background: rgba(17, 24, 39, 0.6);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 15px;
+    transition: all 0.3s;
+    cursor: pointer;
+}
+.news-card:hover {
+    border-color: var(--primary);
+    transform: translateX(5px);
+    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.2);
+}
+.news-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 10px;
+}
+.news-title {
+    font-weight: 600;
+    font-size: 16px;
+    color: var(--text-primary);
+    margin-bottom: 8px;
+    line-height: 1.4;
+}
+.news-meta {
+    display: flex;
+    gap: 15px;
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-bottom: 10px;
+}
+.news-source {
+    font-weight: 600;
+    color: var(--primary);
+}
+.news-content {
+    font-size: 14px;
+    color: var(--text-secondary);
+    line-height: 1.6;
+    margin-bottom: 10px;
+}
+/* API Explorer */
+.api-request-panel {
+    background: rgba(17, 24, 39, 0.6);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 20px;
+}
+.api-response {
+    background: rgba(0, 0, 0, 0.4);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 15px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 13px;
+    color: #a5d6ff;
+    max-height: 500px;
+    overflow-y: auto;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+.api-response .json-key {
+    color: #79c0ff;
+}
+.api-response .json-string {
+    color: #a5d6ff;
+}
+.api-response .json-number {
+    color: #79c0ff;
+}
+.api-response .json-boolean {
+    color: #ff7b72;
+}
+/* Skeleton Loading */
+.skeleton {
+    background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0.05) 25%,
+        rgba(255, 255, 255, 0.1) 50%,
+        rgba(255, 255, 255, 0.05) 75%
+    );
+    background-size: 200% 100%;
+    animation: skeleton-loading 1.5s infinite;
+    border-radius: 8px;
+}
+@keyframes skeleton-loading {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+.skeleton-text {
+    height: 16px;
+    margin-bottom: 10px;
+}
+.skeleton-title {
+    height: 24px;
+    width: 60%;
+    margin-bottom: 15px;
+}
+/* Empty State */
+.empty-state {
+    text-align: center;
+    padding: 60px 20px;
+    color: var(--text-secondary);
+}
+.empty-state-icon {
+    font-size: 64px;
+    margin-bottom: 20px;
+    opacity: 0.5;
+}
+.empty-state-title {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 10px;
+    color: var(--text-primary);
+}
+.empty-state-message {
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+/* Pulse Animation for Live Data */
+.live-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    background: rgba(239, 68, 68, 0.15);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+.live-dot {
+    width: 8px;
+    height: 8px;
+    background: var(--danger);
+    border-radius: 50%;
+    animation: pulse 2s infinite;
+}
+/* Responsive Grid Improvements */
+@media (max-width: 1200px) {
+    .model-grid {
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    }
+}
+@media (max-width: 768px) {
+    .chart-container {
+        height: 250px;
+        padding: 15px;
+    }
+    .market-table th,
+    .market-table td {
+        padding: 10px 8px;
+        font-size: 12px;
+    }
+    .market-table .coin-icon {
+        width: 24px;
+        height: 24px;
+    }
+    .model-grid {
+        grid-template-columns: 1fr;
+    }
+    .news-card {
+        padding: 15px;
+    }
+}

static/css/enterprise-components.css CHANGED Viewed

@@ -290,19 +290,14 @@
 }
 .btn-secondary {
-    background: var(--color-glass-bg);
     color: var(--color-text-primary);
     border-color: var(--color-border-primary);
-    font-weight: 600;
-    opacity: 0.9;
 }
 .btn-secondary:hover:not(:disabled) {
-    background: var(--color-glass-bg-strong);
     border-color: var(--color-accent-blue);
-    color: var(--color-text-primary);
-    opacity: 1;
-    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2);
 }
 .btn-success {

 }
 .btn-secondary {
+    background: transparent;
     color: var(--color-text-primary);
     border-color: var(--color-border-primary);
 }
 .btn-secondary:hover:not(:disabled) {
+    background: var(--color-glass-bg);
     border-color: var(--color-accent-blue);
 }
 .btn-success {

static/css/pro-dashboard.css CHANGED Viewed

@@ -1,68 +1,22 @@
 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
 :root {
-    /* ===== UNIFIED COLOR PALETTE - Professional & Harmonious ===== */
-    --bg-gradient: radial-gradient(circle at top, #0a0e1a, #05060a 70%);
-    /* Primary Colors - Blue/Purple Harmony */
-    --primary: #818CF8;
-    --primary-strong: #6366F1;
-    --primary-light: #A5B4FC;
-    --primary-dark: #4F46E5;
-    --primary-glow: rgba(129, 140, 248, 0.4);
-    /* Secondary Colors - Cyan/Teal Harmony */
-    --secondary: #22D3EE;
-    --secondary-light: #67E8F9;
-    --secondary-dark: #06B6D4;
-    --secondary-glow: rgba(34, 211, 238, 0.4);
-    /* Accent Colors - Pink/Magenta */
-    --accent: #F472B6;
-    --accent-light: #F9A8D4;
-    --accent-dark: #EC4899;
-    /* Status Colors - Bright & Professional */
-    --success: #34D399;
-    --success-light: #6EE7B7;
-    --success-dark: #10B981;
-    --success-glow: rgba(52, 211, 153, 0.5);
-    --warning: #FBBF24;
-    --warning-light: #FCD34D;
-    --warning-dark: #F59E0B;
-    --danger: #F87171;
-    --danger-light: #FCA5A5;
-    --danger-dark: #EF4444;
-    --info: #60A5FA;
-    --info-light: #93C5FD;
-    --info-dark: #3B82F6;
-    /* Glass Morphism - Unified */
-    --glass-bg: rgba(30, 41, 59, 0.85);
-    --glass-bg-light: rgba(30, 41, 59, 0.6);
-    --glass-bg-strong: rgba(30, 41, 59, 0.95);
-    --glass-border: rgba(255, 255, 255, 0.15);
-    --glass-border-light: rgba(255, 255, 255, 0.1);
-    --glass-border-strong: rgba(255, 255, 255, 0.25);
-    --glass-highlight: rgba(255, 255, 255, 0.2);
-    /* Text Colors - Consistent Hierarchy */
-    --text-primary: #F8FAFC;
-    --text-secondary: #E2E8F0;
-    --text-soft: #CBD5E1;
-    --text-muted: rgba(226, 232, 240, 0.75);
-    --text-faint: rgba(226, 232, 240, 0.5);
-    /* Shadows - Unified */
-    --shadow-strong: 0 25px 60px rgba(0, 0, 0, 0.7);
-    --shadow-soft: 0 15px 40px rgba(0, 0, 0, 0.6);
-    --shadow-glow-primary: 0 0 40px rgba(129, 140, 248, 0.2);
-    --shadow-glow-secondary: 0 0 40px rgba(34, 211, 238, 0.2);
-    /* Layout */
     --sidebar-width: 260px;
 }
@@ -74,115 +28,18 @@ 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;
     background: var(--bg-gradient);
     color: var(--text-primary);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
 }
 body[data-theme='light'] {
     --bg-gradient: radial-gradient(circle at top, #f3f6ff, #dfe5ff);
-    /* Glass Morphism - Light */
-    --glass-bg: rgba(255, 255, 255, 0.85);
-    --glass-bg-light: rgba(255, 255, 255, 0.7);
-    --glass-bg-strong: rgba(255, 255, 255, 0.95);
-    --glass-border: rgba(15, 23, 42, 0.15);
-    --glass-border-light: rgba(15, 23, 42, 0.1);
-    --glass-border-strong: rgba(15, 23, 42, 0.25);
-    --glass-highlight: rgba(15, 23, 42, 0.08);
-    /* Text Colors - Light */
     --text-primary: #0f172a;
-    --text-secondary: #1e293b;
-    --text-soft: #334155;
-    --text-muted: rgba(15, 23, 42, 0.7);
-    --text-faint: rgba(15, 23, 42, 0.5);
-    /* Shadows - Light */
-    --shadow-strong: 0 25px 60px rgba(0, 0, 0, 0.15);
-    --shadow-soft: 0 15px 40px rgba(0, 0, 0, 0.1);
-    --shadow-glow-primary: 0 0 40px rgba(96, 165, 250, 0.3);
-    --shadow-glow-secondary: 0 0 40px rgba(34, 211, 238, 0.3);
-}
-/* Light Theme Sidebar Styles */
-body[data-theme='light'] .sidebar {
-    background: linear-gradient(180deg,
-        rgba(255, 255, 255, 0.95) 0%,
-        rgba(248, 250, 252, 0.98) 50%,
-        rgba(255, 255, 255, 0.95) 100%);
-    border-right: 2px solid rgba(96, 165, 250, 0.2);
-    box-shadow:
-        8px 0 32px rgba(0, 0, 0, 0.08),
-        inset -2px 0 0 rgba(96, 165, 250, 0.15),
-        0 0 60px rgba(96, 165, 250, 0.05);
-}
-body[data-theme='light'] .sidebar::before {
-    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.3), rgba(34, 211, 238, 0.25), transparent);
-    opacity: 0.5;
-}
-body[data-theme='light'] .sidebar::after {
-    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.15), transparent);
-    opacity: 0.3;
-}
-body[data-theme='light'] .nav-button {
-    color: rgba(15, 23, 42, 0.8);
-}
-body[data-theme='light'] .nav-button:hover {
-    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(34, 211, 238, 0.12));
-    color: #0f172a;
-}
-body[data-theme='light'] .nav-button.active {
-    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(34, 211, 238, 0.18));
-    color: #0f172a;
-    border: 1px solid rgba(96, 165, 250, 0.3);
-}
-body[data-theme='light'] .nav-button::before {
-    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(34, 211, 238, 0.18));
-    border: 2.5px solid rgba(96, 165, 250, 0.4);
-}
-body[data-theme='light'] .nav-button.active::before {
-    background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(34, 211, 238, 0.25));
-    border-color: rgba(96, 165, 250, 0.6);
-}
-body[data-theme='light'] .brand {
-    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(34, 211, 238, 0.08));
-    border: 2px solid rgba(96, 165, 250, 0.2);
-}
-body[data-theme='light'] .brand:hover {
-    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(34, 211, 238, 0.12));
-    border-color: rgba(96, 165, 250, 0.3);
-}
-body[data-theme='light'] .brand-icon {
-    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(34, 211, 238, 0.12));
-    border: 2px solid rgba(96, 165, 250, 0.3);
-}
-body[data-theme='light'] .sidebar-footer {
-    border-top: 1px solid rgba(96, 165, 250, 0.15);
-}
-body[data-theme='light'] .footer-badge {
-    background: rgba(96, 165, 250, 0.1);
-    border: 1px solid rgba(96, 165, 250, 0.2);
-    color: rgba(15, 23, 42, 0.8);
 }
 .app-shell {
@@ -192,257 +49,39 @@ body[data-theme='light'] .footer-badge {
 .sidebar {
     width: var(--sidebar-width);
-    padding: 24px 16px;
-    background: linear-gradient(180deg,
-        rgba(10, 15, 30, 0.98) 0%,
-        rgba(15, 23, 42, 0.96) 50%,
-        rgba(10, 15, 30, 0.98) 100%);
-    backdrop-filter: blur(40px) saturate(200%);
-    border-right: 2px solid rgba(129, 140, 248, 0.3);
     display: flex;
     flex-direction: column;
     gap: 24px;
     position: sticky;
     top: 0;
     height: 100vh;
-    box-shadow:
-        8px 0 32px rgba(0, 0, 0, 0.6),
-        inset -2px 0 0 rgba(129, 140, 248, 0.2),
-        0 0 60px rgba(129, 140, 248, 0.1);
-    z-index: 100;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
-    position: relative;
-}
-.sidebar::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.4), rgba(34, 211, 238, 0.3), transparent);
-    opacity: 0.6;
-}
-.sidebar::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.2), transparent);
-    opacity: 0.4;
 }
 .brand {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    padding: 18px 16px;
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.15), rgba(34, 211, 238, 0.1));
-    border-radius: 18px;
-    border: 2px solid rgba(129, 140, 248, 0.3);
-    box-shadow:
-        inset 0 2px 4px rgba(255, 255, 255, 0.15),
-        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
-        0 4px 16px rgba(0, 0, 0, 0.4),
-        0 0 30px rgba(129, 140, 248, 0.2);
-    position: relative;
-    overflow: hidden;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    backdrop-filter: blur(20px) saturate(180%);
-}
-.brand::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.2), rgba(34, 211, 238, 0.15));
-    opacity: 0;
-    transition: opacity 0.4s ease;
-}
-.brand::after {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
-    transform: rotate(45deg);
-    transition: transform 0.6s ease;
-    opacity: 0;
-}
-.brand:hover {
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.25), rgba(34, 211, 238, 0.2));
-    border-color: rgba(129, 140, 248, 0.5);
-    box-shadow:
-        inset 0 2px 6px rgba(255, 255, 255, 0.2),
-        inset 0 -2px 6px rgba(0, 0, 0, 0.3),
-        0 6px 24px rgba(129, 140, 248, 0.4),
-        0 0 40px rgba(129, 140, 248, 0.3);
-}
-.brand:hover::before {
-    opacity: 1;
-}
-.brand:hover::after {
-    opacity: 1;
-    transform: rotate(45deg) translate(100%, 100%);
-    transition: transform 0.8s ease;
-}
-.brand-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 52px;
-    height: 52px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.25), rgba(34, 211, 238, 0.2));
-    border: 2px solid rgba(129, 140, 248, 0.4);
-    color: var(--primary-light);
-    flex-shrink: 0;
-    box-shadow:
-        inset 0 2px 4px rgba(255, 255, 255, 0.2),
-        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
-        0 4px 12px rgba(129, 140, 248, 0.3),
-        0 0 20px rgba(129, 140, 248, 0.2);
-    position: relative;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    backdrop-filter: blur(15px) saturate(180%);
-    animation: brandIconPulse 3s ease-in-out infinite;
-}
-.brand-icon::before {
-    content: '';
-    position: absolute;
-    inset: -2px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.4), rgba(34, 211, 238, 0.3));
-    opacity: 0;
-    transition: opacity 0.4s ease;
-    z-index: -1;
-    filter: blur(8px);
-}
-.brand-icon::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    border-radius: 50%;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
-    transform: translate(-50%, -50%);
-    transition: width 0.4s ease, height 0.4s ease;
-    opacity: 0;
-}
-.brand:hover .brand-icon {
-    box-shadow:
-        inset 0 2px 6px rgba(255, 255, 255, 0.25),
-        inset 0 -2px 6px rgba(0, 0, 0, 0.3),
-        0 6px 20px rgba(129, 140, 248, 0.5),
-        0 0 30px rgba(129, 140, 248, 0.4);
-    border-color: rgba(129, 140, 248, 0.6);
-}
-.brand:hover .brand-icon::before {
-    opacity: 1;
-}
-.brand:hover .brand-icon::after {
-    width: 100%;
-    height: 100%;
-    opacity: 1;
-}
-.brand-icon svg {
-    position: relative;
-    z-index: 1;
-    filter: drop-shadow(0 2px 6px rgba(129, 140, 248, 0.6));
-    transition: filter 0.4s ease;
-}
-.brand:hover .brand-icon svg {
-    filter: drop-shadow(0 3px 10px rgba(129, 140, 248, 0.8));
-}
-@keyframes brandIconPulse {
-    0%, 100% {
-        box-shadow:
-            inset 0 2px 4px rgba(255, 255, 255, 0.2),
-            inset 0 -2px 4px rgba(0, 0, 0, 0.3),
-            0 4px 12px rgba(129, 140, 248, 0.3),
-            0 0 20px rgba(129, 140, 248, 0.2);
-    }
-    50% {
-        box-shadow:
-            inset 0 2px 4px rgba(255, 255, 255, 0.2),
-            inset 0 -2px 4px rgba(0, 0, 0, 0.3),
-            0 4px 12px rgba(129, 140, 248, 0.4),
-            0 0 30px rgba(129, 140, 248, 0.3);
-    }
-}
-.brand-text {
     display: flex;
     flex-direction: column;
     gap: 6px;
-    flex: 1;
-    min-width: 0;
 }
 .brand strong {
-    font-size: 1.0625rem;
-    font-weight: 800;
-    letter-spacing: -0.02em;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    color: var(--text-primary);
-    line-height: 1.3;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
-    transition: all 0.3s ease;
-}
-.brand:hover strong {
-    background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
 }
 .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;
     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%;
 }
 .nav {
@@ -454,2769 +93,457 @@ body[data-theme='light'] .footer-badge {
 .nav-button {
     border: none;
     border-radius: 14px;
-    padding: 14px 18px;
     display: flex;
     align-items: center;
-    gap: 14px;
     background: transparent;
-    color: rgba(226, 232, 240, 0.8);
-    font-weight: 600;
-    font-family: 'Manrope', sans-serif;
-    font-size: 0.9375rem;
     cursor: pointer;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: visible;
 }
-.nav-button {
-    position: relative;
 }
-.nav-button svg {
-    width: 26px;
-    height: 26px;
-    flex-shrink: 0;
-    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 2;
-    position: relative;
-    opacity: 0.9;
-    stroke-width: 2.5;
 }
-.nav-button::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    width: 56px;
-    height: 56px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.3), rgba(34, 211, 238, 0.25));
-    border: 2.5px solid rgba(129, 140, 248, 0.5);
-    backdrop-filter: blur(25px) saturate(200%);
-    opacity: 0;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 0;
-    box-shadow:
-        inset 0 3px 8px rgba(255, 255, 255, 0.25),
-        inset 0 -3px 8px rgba(0, 0, 0, 0.3),
-        0 6px 20px rgba(129, 140, 248, 0.4),
-        0 0 40px rgba(129, 140, 248, 0.3);
 }
-.nav-button:hover::before {
-    opacity: 1;
-    transform: scale(1.05);
-    box-shadow:
-        inset 0 3px 10px rgba(255, 255, 255, 0.3),
-        inset 0 -3px 10px rgba(0, 0, 0, 0.35),
-        0 8px 24px rgba(129, 140, 248, 0.5),
-        0 0 50px rgba(129, 140, 248, 0.4);
-    border-color: rgba(129, 140, 248, 0.7);
 }
-.nav-button.active::before {
-    opacity: 1;
-    transform: scale(1.1);
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.45), rgba(34, 211, 238, 0.4));
-    border-color: rgba(129, 140, 248, 0.8);
-    box-shadow:
-        inset 0 4px 12px rgba(255, 255, 255, 0.35),
-        inset 0 -4px 12px rgba(0, 0, 0, 0.4),
-        0 10px 30px rgba(129, 140, 248, 0.6),
-        0 0 60px rgba(129, 140, 248, 0.5),
-        0 0 80px rgba(34, 211, 238, 0.3);
 }
-.nav-button[data-nav="page-overview"] svg {
-    color: #60A5FA;
-    filter: drop-shadow(0 2px 4px rgba(96, 165, 250, 0.5));
 }
-.nav-button[data-nav="page-market"] svg {
-    color: #A78BFA;
-    filter: drop-shadow(0 2px 4px rgba(167, 139, 250, 0.5));
 }
-.nav-button[data-nav="page-chart"] svg {
-    color: #F472B6;
-    filter: drop-shadow(0 2px 4px rgba(244, 114, 182, 0.5));
 }
-.nav-button[data-nav="page-ai"] svg {
-    color: #34D399;
-    filter: drop-shadow(0 2px 4px rgba(52, 211, 153, 0.5));
 }
-.nav-button[data-nav="page-news"] svg {
-    color: #FBBF24;
-    filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.5));
 }
-.nav-button[data-nav="page-providers"] svg {
-    color: #22D3EE;
-    filter: drop-shadow(0 2px 4px rgba(34, 211, 238, 0.5));
 }
-.nav-button[data-nav="page-api"] svg {
-    color: #818CF8;
-    filter: drop-shadow(0 2px 4px rgba(129, 140, 248, 0.5));
 }
-.nav-button[data-nav="page-debug"] svg {
-    color: #F87171;
-    filter: drop-shadow(0 2px 4px rgba(248, 113, 113, 0.5));
 }
-.nav-button[data-nav="page-datasets"] svg {
-    color: #C084FC;
-    filter: drop-shadow(0 2px 4px rgba(192, 132, 252, 0.5));
 }
-.nav-button[data-nav="page-settings"] svg {
-    color: #94A3B8;
-    filter: drop-shadow(0 2px 4px rgba(148, 163, 184, 0.5));
 }
-.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;
 }
-.nav-button svg {
-    width: 20px;
-    height: 20px;
-    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:hover {
-    color: #ffffff;
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.3), rgba(34, 211, 238, 0.25));
-    transform: translateX(4px);
-    box-shadow:
-        inset 0 2px 4px rgba(255, 255, 255, 0.15),
-        0 4px 16px rgba(129, 140, 248, 0.3),
-        0 0 25px rgba(129, 140, 248, 0.2);
 }
-.nav-button:hover svg {
-    filter: drop-shadow(0 3px 10px rgba(129, 140, 248, 0.7));
-    opacity: 1;
 }
-.nav-button:hover::before {
     opacity: 1;
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.35), rgba(34, 211, 238, 0.3));
-    border-color: rgba(129, 140, 248, 0.6);
-    box-shadow:
-        inset 0 2px 6px rgba(255, 255, 255, 0.25),
-        inset 0 -2px 6px rgba(0, 0, 0, 0.3),
-        0 6px 20px rgba(129, 140, 248, 0.4),
-        0 0 35px rgba(129, 140, 248, 0.3);
 }
-.nav-button:hover::after {
-    opacity: 1;
-    background: rgba(129, 140, 248, 0.12);
-}
-.nav-button.active {
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.2), rgba(34, 211, 238, 0.15));
-    color: #ffffff;
-    box-shadow:
-        inset 0 2px 6px rgba(255, 255, 255, 0.15),
-        0 8px 24px rgba(129, 140, 248, 0.3),
-        0 0 40px rgba(129, 140, 248, 0.2);
-    border: 1px solid rgba(129, 140, 248, 0.4);
-    font-weight: 700;
-    transform: translateX(6px);
 }
-.nav-button.active svg {
-    filter: drop-shadow(0 4px 16px rgba(129, 140, 248, 0.9)) drop-shadow(0 0 20px rgba(34, 211, 238, 0.6));
-    opacity: 1;
-    transform: scale(1.1);
 }
-.nav-button.active::after {
-    opacity: 1;
-    background: rgba(129, 140, 248, 0.1);
 }
-.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.05);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 12px;
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: rgba(226, 232, 240, 0.8);
-    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 {
-    flex: 1;
-    padding: 32px;
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-}
-.topbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 28px 36px;
-    border-radius: 24px;
-    background: linear-gradient(135deg, var(--glass-bg-strong) 0%, var(--glass-bg) 100%);
-    border: 1px solid var(--glass-border-strong);
-    box-shadow:
-        var(--shadow-strong),
-        inset 0 1px 0 rgba(255, 255, 255, 0.15),
-        var(--shadow-glow-primary),
-        0 0 60px rgba(129, 140, 248, 0.15);
-    backdrop-filter: blur(30px) saturate(180%);
-    flex-wrap: wrap;
-    gap: 20px;
-    position: relative;
-    overflow: hidden;
-    animation: headerGlow 4s ease-in-out infinite alternate;
-}
-@keyframes headerGlow {
-    0% {
-        box-shadow:
-            var(--shadow-strong),
-            inset 0 1px 0 rgba(255, 255, 255, 0.15),
-            var(--shadow-glow-primary),
-            0 0 60px rgba(129, 140, 248, 0.15);
-    }
-    100% {
-        box-shadow:
-            var(--shadow-strong),
-            inset 0 1px 0 rgba(255, 255, 255, 0.2),
-            var(--shadow-glow-primary),
-            0 0 80px rgba(129, 140, 248, 0.25),
-            0 0 120px rgba(34, 211, 238, 0.15);
-    }
-}
-.topbar::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: linear-gradient(90deg,
-        transparent,
-        var(--secondary) 20%,
-        var(--primary) 50%,
-        var(--secondary) 80%,
-        transparent);
-    opacity: 0.8;
-    animation: headerShine 3s linear infinite;
-}
-@keyframes headerShine {
-    0% {
-        transform: translateX(-100%);
-        opacity: 0;
-    }
-    50% {
-        opacity: 1;
-    }
-    100% {
-        transform: translateX(100%);
-        opacity: 0;
-    }
-}
-.topbar::after {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle, rgba(129, 140, 248, 0.1) 0%, transparent 70%);
-    animation: headerPulse 6s ease-in-out infinite;
-    pointer-events: none;
-}
-@keyframes headerPulse {
-    0%, 100% {
-        transform: scale(1);
-        opacity: 0.3;
-    }
-    50% {
-        transform: scale(1.1);
-        opacity: 0.5;
-    }
-}
-.topbar-content {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    flex: 1;
-}
-.topbar-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.2) 0%, rgba(34, 211, 238, 0.15) 100%);
-    border: 2px solid rgba(129, 140, 248, 0.3);
-    color: var(--primary-light);
-    flex-shrink: 0;
-    box-shadow:
-        inset 0 2px 4px rgba(255, 255, 255, 0.2),
-        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
-        0 6px 20px rgba(0, 0, 0, 0.4),
-        0 0 40px rgba(129, 140, 248, 0.3),
-        0 0 60px rgba(34, 211, 238, 0.2);
-    position: relative;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    animation: iconFloat 3s ease-in-out infinite;
-    backdrop-filter: blur(20px) saturate(180%);
-}
-@keyframes iconFloat {
-    0%, 100% {
-        transform: translateY(0);
-    }
-    50% {
-        transform: translateY(-3px);
-    }
-}
-.topbar-icon:hover {
-    box-shadow:
-        inset 0 1px 2px rgba(255, 255, 255, 0.2),
-        inset 0 -1px 2px rgba(0, 0, 0, 0.3),
-        0 6px 16px rgba(0, 0, 0, 0.4),
-        0 0 30px rgba(129, 140, 248, 0.3);
-    border-color: var(--primary);
-}
-.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: 2.25rem;
-    font-weight: 900;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    letter-spacing: -0.04em;
-    line-height: 1.2;
-    display: flex;
-    align-items: baseline;
-    gap: 12px;
-    position: relative;
-    z-index: 1;
-    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
-}
-.title-gradient {
-    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 80%, var(--text-soft) 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
-    position: relative;
-    animation: titleShimmer 3s ease-in-out infinite;
-}
-@keyframes titleShimmer {
-    0%, 100% {
-        filter: brightness(1);
-    }
-    50% {
-        filter: brightness(1.2);
-    }
-}
-.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.85em;
-    position: relative;
-    animation: accentPulse 2s ease-in-out infinite;
-}
-@keyframes accentPulse {
-    0%, 100% {
-        opacity: 1;
-        filter: drop-shadow(0 0 8px rgba(129, 140, 248, 0.4));
-    }
-    50% {
-        opacity: 0.9;
-        filter: drop-shadow(0 0 12px rgba(129, 140, 248, 0.6));
-    }
-}
-.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);
-}
-.status-group {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-}
-.status-pill {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px 18px;
-    border-radius: 14px;
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.15), rgba(34, 211, 238, 0.1));
-    border: 2px solid rgba(129, 140, 248, 0.3);
-    font-size: 0.8125rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    font-family: 'Manrope', sans-serif;
-    color: rgba(226, 232, 240, 0.95);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: visible;
-    box-shadow:
-        0 4px 12px rgba(0, 0, 0, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.15);
-    cursor: pointer;
-    backdrop-filter: blur(15px) saturate(180%);
-}
-.status-pill:hover {
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.25), rgba(34, 211, 238, 0.2));
-    box-shadow:
-        0 6px 16px rgba(0, 0, 0, 0.4),
-        inset 0 1px 0 rgba(255, 255, 255, 0.2),
-        0 0 20px rgba(129, 140, 248, 0.3);
-    border-color: rgba(129, 140, 248, 0.5);
-    color: #ffffff;
-    transform: translateY(-1px);
-}
-.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;
-}
-.status-dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: #FBBF24;
-    position: relative;
-    flex-shrink: 0;
-    box-shadow:
-        0 0 12px #FBBF24,
-        0 0 20px rgba(251, 191, 36, 0.5),
-        0 2px 4px rgba(0, 0, 0, 0.3);
-    animation: pulse-dot 2s ease-in-out infinite;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-}
-@keyframes pulse-dot {
-    0%, 100% {
-        opacity: 1;
-        transform: scale(1);
-        box-shadow: 0 0 12px #FBBF24, 0 0 20px rgba(251, 191, 36, 0.5);
-    }
-    50% {
-        opacity: 0.8;
-        transform: scale(1.1);
-        box-shadow: 0 0 16px #FBBF24, 0 0 30px rgba(251, 191, 36, 0.7);
-    }
-}
-.status-pill[data-state="ok"] .status-dot {
-    background: #34D399;
-    box-shadow:
-        0 0 12px #34D399,
-        0 0 20px rgba(52, 211, 153, 0.5),
-        0 2px 4px rgba(0, 0, 0, 0.3);
-    animation: none;
-}
-.status-pill[data-state="error"] .status-dot {
-    background: #F87171;
-    box-shadow:
-        0 0 12px #F87171,
-        0 0 20px rgba(248, 113, 113, 0.5),
-        0 2px 4px rgba(0, 0, 0, 0.3);
-    animation: none;
-}
-.status-pill .status-icon {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    color: rgba(226, 232, 240, 0.9);
-    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
-    transition: all 0.3s ease;
-}
-.status-pill:hover .status-icon {
-    color: #ffffff;
-    filter: drop-shadow(0 2px 4px rgba(129, 140, 248, 0.6));
-}
-.status-pill[data-state="ok"] .status-icon {
-    color: #34D399;
-}
-.status-pill[data-state="error"] .status-icon {
-    color: #F87171;
-}
-.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, var(--success) 0%, var(--success-dark) 100%);
-    border: 1px solid var(--success);
-    color: #ffffff;
-    box-shadow:
-        0 2px 8px var(--success-glow),
-        inset 0 1px 0 rgba(255, 255, 255, 0.2);
-    font-weight: 700;
-    position: relative;
-}
-.status-pill[data-state='ok']:hover {
-    background: linear-gradient(135deg, var(--success-dark) 0%, #047857 100%);
-    box-shadow:
-        0 4px 12px var(--success-glow),
-        inset 0 1px 0 rgba(255, 255, 255, 0.3);
-}
-@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);
-}
-.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);
-}
-.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);
-    }
-}
-.page-container {
-    flex: 1;
-}
-.page {
-    display: none;
-    animation: fadeIn 0.6s ease;
-}
-.page.active {
-    display: block;
-}
-.section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 24px;
-    padding-bottom: 16px;
-    border-bottom: 2px solid var(--glass-border);
-    position: relative;
-}
-.section-header::after {
-    content: '';
-    position: absolute;
-    bottom: -2px;
-    left: 0;
-    width: 60px;
-    height: 2px;
-    background: linear-gradient(90deg, var(--primary), var(--secondary));
-    border-radius: 2px;
-}
-.section-title {
-    font-size: 2rem;
-    font-weight: 900;
-    letter-spacing: -0.03em;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    margin: 0;
-    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    position: relative;
-    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
-}
-.glass-card {
-    background: var(--glass-bg);
-    backdrop-filter: blur(35px) saturate(180%);
-    -webkit-backdrop-filter: blur(35px) saturate(180%);
-    border: 1px solid var(--glass-border);
-    border-radius: 20px;
-    padding: 28px;
-    box-shadow:
-        0 8px 32px rgba(0, 0, 0, 0.5),
-        inset 0 1px 0 rgba(255, 255, 255, 0.1),
-        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
-        var(--shadow-glow-primary);
-    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,
-        var(--secondary-glow) 0%,
-        var(--primary-glow) 50%,
-        rgba(244, 114, 182, 0.3) 100%);
-    border-radius: 24px;
-    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,
-        var(--secondary),
-        var(--primary),
-        var(--accent),
-        transparent);
-    border-radius: 20px 20px 0 0;
-    opacity: 0.7;
-    animation: card-shimmer 4s infinite;
-}
-@keyframes card-shimmer {
-    0%, 100% { opacity: 0.7; }
-    50% { opacity: 1; }
-}
-.glass-card:hover {
-    background: var(--glass-bg-strong);
-    box-shadow:
-        0 16px 48px rgba(0, 0, 0, 0.6),
-        var(--shadow-glow-primary),
-        var(--shadow-glow-secondary),
-        inset 0 1px 0 rgba(255, 255, 255, 0.15),
-        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
-    border-color: var(--glass-border-strong);
-}
-.glass-card:hover::before {
-    opacity: 0.8;
-    filter: blur(30px);
-}
-.glass-card:hover::after {
-    opacity: 1;
-    height: 4px;
-}
-.card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-    padding-bottom: 16px;
-    border-bottom: 1px solid var(--glass-border);
-}
-.card-header h4 {
-    margin: 0;
-    font-size: 1.25rem;
-    font-weight: 700;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    color: var(--text-primary);
-    letter-spacing: -0.02em;
-}
-.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;
-}
-.glass-card::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(120deg, transparent, var(--glass-highlight), transparent);
-    opacity: 0;
-    transition: opacity 0.4s ease;
-}
-.glass-card:hover::before {
-    opacity: 1;
-}
-.stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 18px;
-    margin-bottom: 24px;
-}
-.stat-card {
-    display: flex;
-    flex-direction: column;
-    gap: 18px;
-    position: relative;
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.15), rgba(34, 211, 238, 0.1));
-    padding: 28px;
-    border-radius: 20px;
-    border: 2px solid rgba(129, 140, 248, 0.25);
-    backdrop-filter: blur(30px) saturate(180%);
-    -webkit-backdrop-filter: blur(30px) saturate(180%);
-    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: -2px;
-    border-radius: 22px;
-    background: linear-gradient(135deg,
-        rgba(129, 140, 248, 0.2) 0%,
-        rgba(34, 211, 238, 0.15) 100%);
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    z-index: -1;
-    filter: blur(8px);
-}
-.stat-card::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg,
-        transparent,
-        rgba(129, 140, 248, 0.6),
-        rgba(34, 211, 238, 0.6),
-        transparent);
-    border-radius: 20px 20px 0 0;
-    opacity: 0.5;
-    transition: opacity 0.3s ease;
-}
-.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.4;
-    filter: blur(10px);
-}
-.stat-card:hover::after {
-    opacity: 0.8;
-    height: 2px;
-}
-.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: 30px;
-    height: 30px;
-    opacity: 1;
-    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
-    stroke-width: 2.5;
-}
-.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;
-    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);
-}
-.stat-label {
-    font-size: 0.8125rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: rgba(226, 232, 240, 0.95);
-    margin: 0;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-    line-height: 1.5;
-}
-.stat-value {
-    font-size: 2.75rem;
-    font-weight: 900;
-    margin: 0;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-    letter-spacing: -0.05em;
-    line-height: 1.2;
-    color: #ffffff;
-    text-shadow:
-        0 2px 8px rgba(0, 0, 0, 0.6),
-        0 0 20px rgba(129, 140, 248, 0.4),
-        0 0 40px rgba(34, 211, 238, 0.3);
-    position: relative;
-}
-.stat-card:hover .stat-value {
-    text-shadow:
-        0 2px 10px rgba(0, 0, 0, 0.7),
-        0 0 30px rgba(129, 140, 248, 0.6),
-        0 0 50px rgba(34, 211, 238, 0.5);
-    transform: scale(1.02);
-}
-.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-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;
-}
-.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;
-}
-.grid-two {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    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;
-}
-th, td {
-    text-align: left;
-    padding: 12px 14px;
-    font-size: 0.8125rem;
-    font-family: 'Manrope', 'DM Sans', sans-serif;
-}
-th {
-    font-size: 0.7rem;
-    font-weight: 700;
-    letter-spacing: 0.06em;
-    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;
-}
-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: 6px 12px;
-    background: var(--glass-bg-light);
-    border: 1px solid var(--glass-border);
-    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;
-}
-.badge {
-    padding: 4px 10px;
-    border-radius: 999px;
-    font-size: 0.75rem;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-}
-.badge-success { background: rgba(52, 211, 153, 0.2); color: var(--success-light); border: 1px solid var(--success); }
-.badge-danger { background: rgba(248, 113, 113, 0.2); color: var(--danger-light); border: 1px solid var(--danger); }
-.badge-cyan { background: rgba(34, 211, 238, 0.2); color: var(--secondary-light); border: 1px solid var(--secondary); }
-.badge-neutral { background: var(--glass-bg-light); color: var(--text-muted); border: 1px solid var(--glass-border); }
-.text-muted { color: var(--text-muted); }
-.text-success { color: var(--success); }
-.text-danger { color: var(--danger); }
-.ai-result {
-    margin-top: 20px;
-    padding: 24px;
-    border-radius: 20px;
-    border: 1px solid var(--glass-border);
-    background: var(--glass-bg);
-    backdrop-filter: blur(20px);
-    box-shadow: var(--shadow-soft);
-}
-.action-badge {
-    display: inline-flex;
-    padding: 6px 14px;
-    border-radius: 999px;
-    letter-spacing: 0.08em;
-    font-weight: 600;
-    margin-bottom: 10px;
-}
-.action-buy { background: rgba(52, 211, 153, 0.2); color: var(--success-light); border: 1px solid var(--success); }
-.action-sell { background: rgba(248, 113, 113, 0.2); color: var(--danger-light); border: 1px solid var(--danger); }
-.action-hold { background: rgba(96, 165, 250, 0.2); color: var(--info-light); border: 1px solid var(--info); }
-.ai-insights ul {
-    padding-left: 20px;
-}
-.chip-row {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-    margin: 12px 0;
-}
-.news-item {
-    padding: 12px 0;
-    border-bottom: 1px solid var(--glass-border);
-}
-.ai-block {
-    padding: 14px;
-    border-radius: 12px;
-    border: 1px dashed var(--glass-border);
-    margin-top: 12px;
-}
-.controls-bar {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    margin-bottom: 16px;
-}
-.input-chip {
-    border: 1px solid var(--glass-border);
-    background: rgba(255, 255, 255, 0.05);
-    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);
-    border: 1px solid var(--glass-border);
-    border-radius: 16px;
-    backdrop-filter: blur(10px);
-}
-.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;
-}
-button.primary {
-    background: linear-gradient(120deg, var(--primary), var(--secondary));
-    border: none;
-    border-radius: 10px;
-    color: #fff;
-    padding: 10px 14px;
-    font-weight: 500;
-    font-family: 'Manrope', sans-serif;
-    font-size: 0.875rem;
-    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;
-}
-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);
-}
-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;
-    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 {
-    position: relative;
-    overflow: hidden;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 12px;
-}
-.skeleton-block {
-    display: inline-block;
-    width: 100%;
-    height: 12px;
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.08);
-}
-.skeleton::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    transform: translateX(-100%);
-    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent);
-    animation: shimmer 1.5s infinite;
-}
-.drawer {
-    position: fixed;
-    top: 0;
-    right: 0;
-    height: 100vh;
-    width: min(420px, 90vw);
-    background: rgba(5, 7, 12, 0.92);
-    border-left: 1px solid var(--glass-border);
-    transform: translateX(100%);
-    transition: transform 0.4s ease;
-    padding: 32px;
-    overflow-y: auto;
-    z-index: 40;
-}
-.drawer.active {
-    transform: translateX(0);
-}
-.modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background: rgba(2, 6, 23, 0.75);
-    backdrop-filter: blur(8px);
-    display: none;
-    align-items: center;
-    justify-content: center;
-    z-index: 10000;
-    animation: fadeIn 0.3s ease;
-}
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-.modal-backdrop.active {
-    display: flex;
-}
-.modal {
-    width: min(640px, 90vw);
-    background: var(--glass-bg);
-    border-radius: 28px;
-    padding: 28px;
-    border: 1px solid var(--glass-border);
-    backdrop-filter: blur(20px);
-}
-.inline-message {
-    border-radius: 16px;
-    padding: 16px 18px;
-    border: 1px solid var(--glass-border);
-}
-.inline-error { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.08); }
-.inline-warn { border-color: rgba(250, 204, 21, 0.4); background: rgba(250, 204, 21, 0.1); }
-.inline-info { border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.1); }
-.log-table {
-    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
-    font-size: 0.8rem;
-}
-.chip {
-    padding: 6px 12px;
-    border-radius: 999px;
-    background: var(--glass-bg-light);
-    border: 1px solid var(--glass-border);
-    color: var(--text-secondary);
-    font-size: 0.75rem;
-    font-weight: 500;
-}
-.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;
-    height: 24px;
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.2);
-    cursor: pointer;
-}
-.toggle input {
-    position: absolute;
-    opacity: 0;
-}
-.toggle span {
-    position: absolute;
-    top: 3px;
-    left: 4px;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: #fff;
-    transition: transform 0.3s ease;
-}
-.toggle input:checked + span {
-    transform: translateX(18px);
-    background: var(--secondary);
-}
-.flash {
-    animation: flash 0.6s ease;
-}
-@keyframes flash {
-    0% { background: rgba(34, 197, 94, 0.2); }
-    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: var(--glass-bg-light);
-    border: 1px solid var(--glass-border);
-    color: var(--text-secondary);
-    font-size: 0.8125rem;
-    font-weight: 500;
-    font-family: 'Inter', sans-serif;
-    transition: all 0.2s ease;
-}
-.chip:hover {
-    background: var(--glass-bg);
-    border-color: var(--glass-border-strong);
-    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, var(--text-primary) 0%, var(--text-secondary) 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, var(--primary-glow), var(--secondary-glow));
-    border: 1px solid var(--primary);
-    font-size: 0.75rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--primary-light);
-    box-shadow: 0 4px 12px var(--primary-glow), 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: var(--glass-bg);
-    border-radius: 16px;
-    border: 1px solid var(--glass-border);
-    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.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-}
-.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: var(--glass-bg-strong);
-    border-color: var(--glass-border-strong);
-    transform: translateX(6px) translateY(-2px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15), var(--shadow-glow-primary);
-}
-.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 {

 @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, #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;
+    --secondary: #16d9fa;
+    --accent: #f472b6;
+    --success: #22c55e;
+    --warning: #facc15;
+    --danger: #ef4444;
+    --info: #38bdf8;
+    --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;
 }
     margin: 0;
     padding: 0;
     min-height: 100vh;
+    font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     background: var(--bg-gradient);
     color: var(--text-primary);
 }
 body[data-theme='light'] {
     --bg-gradient: radial-gradient(circle at top, #f3f6ff, #dfe5ff);
+    --glass-bg: rgba(255, 255, 255, 0.75);
+    --glass-border: rgba(15, 23, 42, 0.1);
+    --glass-highlight: rgba(15, 23, 42, 0.05);
     --text-primary: #0f172a;
+    --text-muted: rgba(15, 23, 42, 0.6);
 }
 .app-shell {
 .sidebar {
     width: var(--sidebar-width);
+    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 var(--glass-border);
     display: flex;
     flex-direction: column;
     gap: 24px;
     position: sticky;
     top: 0;
     height: 100vh;
 }
 .brand {
     display: flex;
     flex-direction: column;
     gap: 6px;
 }
 .brand strong {
+    font-size: 1.3rem;
+    letter-spacing: 0.1em;
 }
 .env-pill {
     display: inline-flex;
     align-items: center;
+    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.05em;
 }
 .nav {
 .nav-button {
     border: none;
     border-radius: 14px;
+    padding: 12px 16px;
     display: flex;
     align-items: center;
+    gap: 12px;
     background: transparent;
+    color: inherit;
+    font-weight: 500;
     cursor: pointer;
+    transition: transform 0.3s ease, background 0.3s ease;
 }
+.nav-button svg {
+    width: 22px;
+    height: 22px;
+    fill: currentColor;
 }
+.nav-button.active,
+.nav-button:hover {
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateX(6px);
 }
+.sidebar-footer {
+    margin-top: auto;
+    font-size: 0.85rem;
+    color: var(--text-muted);
 }
+.main-area {
+    flex: 1;
+    padding: 32px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
 }
+.topbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 18px 24px;
+    border-radius: 24px;
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    box-shadow: var(--shadow-soft);
+    backdrop-filter: blur(20px);
+    flex-wrap: wrap;
+    gap: 16px;
 }
+.topbar h1 {
+    margin: 0;
+    font-size: 1.8rem;
 }
+.status-group {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
 }
+.status-pill {
+    display: flex;
+    align-items: center;
+    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.05em;
 }
+.status-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--warning);
 }
+.status-pill[data-state='ok'] .status-dot {
+    background: var(--success);
 }
+.status-pill[data-state='warn'] .status-dot {
+    background: var(--warning);
 }
+.status-pill[data-state='error'] .status-dot {
+    background: var(--danger);
 }
+.page-container {
+    flex: 1;
 }
+.page {
+    display: none;
+    animation: fadeIn 0.6s ease;
 }
+.page.active {
+    display: block;
 }
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
 }
+.section-title {
+    font-size: 1.3rem;
+    letter-spacing: 0.05em;
 }
+.glass-card {
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: 24px;
+    padding: 20px;
+    box-shadow: var(--shadow-strong);
+    position: relative;
+    overflow: hidden;
 }
+.glass-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(120deg, transparent, var(--glass-highlight), transparent);
+    opacity: 0;
+    transition: opacity 0.4s ease;
 }
+.glass-card:hover::before {
     opacity: 1;
 }
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 18px;
+    margin-bottom: 24px;
 }
+.stat-card h3 {
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
 }
+.stat-value {
+    font-size: 1.9rem;
+    font-weight: 600;
+    margin: 12px 0 6px;
 }
+.stat-trend {
     display: flex;
     align-items: center;
+    gap: 6px;
+    font-size: 0.85rem;
 }
+.grid-two {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 20px;
 }
+.table-wrapper {
+    overflow: auto;
 }
+table {
+    width: 100%;
+    border-collapse: collapse;
 }
+th, td {
+    text-align: left;
+    padding: 12px 10px;
+    font-size: 0.92rem;
 }
+th {
+    font-size: 0.8rem;
+    letter-spacing: 0.05em;
     color: var(--text-muted);
+    text-transform: uppercase;
 }
+tr {
+    transition: background 0.3s ease, transform 0.3s ease;
 }
+tbody tr:hover {
+    background: rgba(255, 255, 255, 0.04);
+    transform: translateY(-1px);
 }
+.badge {
+    padding: 4px 10px;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
 }
+.badge-success { background: rgba(34, 197, 94, 0.15); color: var(--success); }
+.badge-danger { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
+.badge-neutral { background: rgba(148, 163, 184, 0.15); color: var(--text-muted); }
+.text-muted { color: var(--text-muted); }
+.text-success { color: var(--success); }
+.text-danger { color: var(--danger); }
+.ai-result {
+    margin-top: 20px;
+    padding: 20px;
+    border-radius: 20px;
+    border: 1px solid var(--glass-border);
+    background: rgba(0, 0, 0, 0.2);
 }
+.action-badge {
+    display: inline-flex;
+    padding: 6px 14px;
+    border-radius: 999px;
     letter-spacing: 0.08em;
     font-weight: 600;
+    margin-bottom: 10px;
 }
+.action-buy { background: rgba(34, 197, 94, 0.18); color: var(--success); }
+.action-sell { background: rgba(239, 68, 68, 0.18); color: var(--danger); }
+.action-hold { background: rgba(56, 189, 248, 0.18); color: var(--info); }
+.ai-insights ul {
+    padding-left: 20px;
 }
+.chip-row {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin: 12px 0;
 }
+.news-item {
+    padding: 12px 0;
+    border-bottom: 1px solid var(--glass-border);
 }
+.ai-block {
+    padding: 14px;
     border-radius: 12px;
+    border: 1px dashed var(--glass-border);
+    margin-top: 12px;
 }
+.controls-bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-bottom: 16px;
 }
+.input-chip {
+    border: 1px solid var(--glass-border);
+    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;
 }
+input[type='text'], select, textarea {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid var(--glass-border);
+    border-radius: 14px;
+    padding: 12px 14px;
+    color: var(--text-primary);
+    font-family: inherit;
 }
+textarea {
+    min-height: 100px;
 }
+button.primary {
+    background: linear-gradient(120deg, var(--primary), var(--secondary));
+    border: none;
+    border-radius: 999px;
+    color: #fff;
+    padding: 12px 24px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.3s ease;
 }
+button.primary:hover {
+    transform: translateY(-2px) scale(1.01);
 }
+button.ghost {
+    background: transparent;
+    border: 1px solid var(--glass-border);
+    border-radius: 999px;
+    padding: 10px 20px;
+    color: inherit;
+    cursor: pointer;
 }
+.skeleton {
+    position: relative;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
 }
+.skeleton-block {
+    display: inline-block;
+    width: 100%;
+    height: 12px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.08);
 }
+.skeleton::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent);
+    animation: shimmer 1.5s infinite;
 }
+.drawer {
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    width: min(420px, 90vw);
+    background: rgba(5, 7, 12, 0.92);
+    border-left: 1px solid var(--glass-border);
+    transform: translateX(100%);
+    transition: transform 0.4s ease;
+    padding: 32px;
+    overflow-y: auto;
+    z-index: 40;
 }
+.drawer.active {
+    transform: translateX(0);
 }
+.modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(2, 6, 23, 0.7);
+    display: none;
     align-items: center;
+    justify-content: center;
+    z-index: 50;
 }
+.modal-backdrop.active {
+    display: flex;
 }
+.modal {
+    width: min(640px, 90vw);
+    background: var(--glass-bg);
+    border-radius: 28px;
+    padding: 28px;
+    border: 1px solid var(--glass-border);
+    backdrop-filter: blur(20px);
 }
+.inline-message {
+    border-radius: 16px;
+    padding: 16px 18px;
+    border: 1px solid var(--glass-border);
 }
+.inline-error { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.08); }
+.inline-warn { border-color: rgba(250, 204, 21, 0.4); background: rgba(250, 204, 21, 0.1); }
+.inline-info { border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.1); }
+.log-table {
+    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
+    font-size: 0.8rem;
 }
+.chip {
+    padding: 4px 12px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.08);
     font-size: 0.75rem;
 }
+.toggle {
+    position: relative;
+    width: 44px;
+    height: 24px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.2);
+    cursor: pointer;
 }
+.toggle input {
+    position: absolute;
+    opacity: 0;
 }
+.toggle span {
+    position: absolute;
+    top: 3px;
+    left: 4px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #fff;
+    transition: transform 0.3s ease;
 }
+.toggle input:checked + span {
+    transform: translateX(18px);
+    background: var(--secondary);
 }
+.flash {
+    animation: flash 0.6s ease;
 }
+@keyframes flash {
+    0% { background: rgba(34, 197, 94, 0.2); }
+    100% { background: transparent; }
 }
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 @keyframes shimmer {

static/css/toast.css CHANGED Viewed

@@ -1,55 +1,34 @@
-/**
- * ═══════════════════════════════════════════════════════════════════
- * TOAST NOTIFICATIONS — ULTRA ENTERPRISE EDITION
- * Crypto Monitor HF — Glass + Neon Toast System
- * ═══════════════════════════════════════════════════════════════════
- */
-/* ═══════════════════════════════════════════════════════════════════
-   TOAST CONTAINER
-   ═══════════════════════════════════════════════════════════════════ */
-#alerts-container {
     position: fixed;
-    top: calc(var(--header-height) + var(--status-bar-height) + var(--space-6));
-    right: var(--space-6);
-    z-index: var(--z-toast);
     display: flex;
     flex-direction: column;
-    gap: var(--space-3);
-    max-width: 420px;
-    width: 100%;
-    pointer-events: none;
 }
-/* ═══════════════════════════════════════════════════════════════════
-   TOAST BASE
-   ═══════════════════════════════════════════════════════════════════ */
 .toast {
-    background: var(--toast-bg);
-    border: 1px solid var(--border-medium);
-    border-left-width: 4px;
-    border-radius: var(--radius-md);
-    backdrop-filter: var(--blur-lg);
-    box-shadow: var(--shadow-lg);
-    padding: var(--space-4) var(--space-5);
     display: flex;
-    align-items: start;
-    gap: var(--space-3);
-    pointer-events: all;
-    animation: toast-slide-in 0.3s var(--ease-spring);
     position: relative;
     overflow: hidden;
 }
-.toast.removing {
-    animation: toast-slide-out 0.25s var(--ease-in) forwards;
-}
-@keyframes toast-slide-in {
     from {
-        transform: translateX(120%);
         opacity: 0;
     }
     to {
@@ -58,181 +37,130 @@
     }
 }
-@keyframes toast-slide-out {
     to {
-        transform: translateX(120%);
         opacity: 0;
     }
 }
-/* ═══════════════════════════════════════════════════════════════════
-   TOAST VARIANTS
-   ═══════════════════════════════════════════════════════════════════ */
-.toast-success {
-    border-left-color: var(--success);
-    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(34, 197, 94, 0.20);
-}
-.toast-error {
-    border-left-color: var(--danger);
-    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(239, 68, 68, 0.20);
-}
-.toast-warning {
-    border-left-color: var(--warning);
-    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(245, 158, 11, 0.20);
-}
-.toast-info {
-    border-left-color: var(--info);
-    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(14, 165, 233, 0.20);
-}
-/* ═══════════════════════════════════════════════════════════════════
-   TOAST CONTENT
-   ═══════════════════════════════════════════════════════════════════ */
 .toast-icon {
-    flex-shrink: 0;
-    width: 20px;
-    height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
-}
-.toast-success .toast-icon {
-    color: var(--success);
-}
-.toast-error .toast-icon {
-    color: var(--danger);
-}
-.toast-warning .toast-icon {
-    color: var(--warning);
-}
-.toast-info .toast-icon {
-    color: var(--info);
 }
 .toast-content {
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
 }
 .toast-title {
-    font-size: var(--fs-sm);
-    font-weight: var(--fw-semibold);
-    color: var(--text-strong);
-    margin: 0;
 }
 .toast-message {
-    font-size: var(--fs-xs);
-    color: var(--text-soft);
-    line-height: var(--lh-relaxed);
 }
-/* ═══════════════════════════════════════════════════════════════════
-   TOAST CLOSE BUTTON
-   ═══════════════════════════════════════════════════════════════════ */
 .toast-close {
-    flex-shrink: 0;
     width: 24px;
     height: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: transparent;
-    border: none;
-    color: var(--text-muted);
-    cursor: pointer;
-    border-radius: var(--radius-xs);
-    transition: all var(--transition-fast);
 }
 .toast-close:hover {
-    background: var(--surface-glass);
-    color: var(--text-normal);
 }
-/* ═══════════════════════════════════════════════════════════════════
-   TOAST PROGRESS BAR
-   ═══════════════════════════════════════════════════════════════════ */
 .toast-progress {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 3px;
-    background: currentColor;
-    opacity: 0.4;
-    animation: toast-progress-shrink 5s linear forwards;
 }
-@keyframes toast-progress-shrink {
-    from {
-        width: 100%;
-    }
-    to {
-        width: 0%;
-    }
 }
-.toast-success .toast-progress {
     color: var(--success);
 }
-.toast-error .toast-progress {
     color: var(--danger);
 }
-.toast-warning .toast-progress {
     color: var(--warning);
 }
-.toast-info .toast-progress {
-    color: var(--info);
 }
-/* ═══════════════════════════════════════════════════════════════════
-   MOBILE ADJUSTMENTS
-   ═══════════════════════════════════════════════════════════════════ */
 @media (max-width: 768px) {
-    #alerts-container {
-        top: auto;
-        bottom: calc(var(--mobile-nav-height) + var(--space-4));
-        right: var(--space-4);
-        left: var(--space-4);
         max-width: none;
     }
-    @keyframes toast-slide-in {
-        from {
-            transform: translateY(120%);
-            opacity: 0;
-        }
-        to {
-            transform: translateY(0);
-            opacity: 1;
-        }
-    }
-    @keyframes toast-slide-out {
-        to {
-            transform: translateY(120%);
-            opacity: 0;
-        }
     }
 }
-/* ═══════════════════��═══════════════════════════════════════════════
-   END OF TOAST
-   ═══════════════════════════════════════════════════════════════════ */

+/* Toast Notification System */
+.toast-container {
     position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 10000;
     display: flex;
     flex-direction: column;
+    gap: 10px;
+    max-width: 400px;
 }
 .toast {
+    background: rgba(17, 24, 39, 0.95);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 16px 20px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
     display: flex;
+    align-items: center;
+    gap: 12px;
+    animation: slideIn 0.3s ease;
+    min-width: 300px;
     position: relative;
     overflow: hidden;
 }
+@keyframes slideIn {
     from {
+        transform: translateX(400px);
         opacity: 0;
     }
     to {
     }
 }
+.toast.removing {
+    animation: slideOut 0.3s ease forwards;
+}
+@keyframes slideOut {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
     to {
+        transform: translateX(400px);
         opacity: 0;
     }
 }
 .toast-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
+    font-size: 18px;
+    flex-shrink: 0;
 }
 .toast-content {
     flex: 1;
 }
 .toast-title {
+    font-weight: 600;
+    font-size: 14px;
+    margin-bottom: 4px;
+    color: var(--text-primary);
 }
 .toast-message {
+    font-size: 13px;
+    color: var(--text-secondary);
+    line-height: 1.4;
 }
 .toast-close {
     width: 24px;
     height: 24px;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
+    transition: all 0.2s;
+    flex-shrink: 0;
 }
 .toast-close:hover {
+    background: rgba(255, 255, 255, 0.2);
+    color: var(--text-primary);
 }
 .toast-progress {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 3px;
+    background: var(--primary);
+    animation: progress 5s linear forwards;
 }
+@keyframes progress {
+    from { width: 100%; }
+    to { width: 0%; }
+}
+/* Toast Types */
+.toast.success {
+    border-left: 4px solid var(--success);
 }
+.toast.success .toast-icon {
+    background: rgba(16, 185, 129, 0.2);
     color: var(--success);
 }
+.toast.error {
+    border-left: 4px solid var(--danger);
+}
+.toast.error .toast-icon {
+    background: rgba(239, 68, 68, 0.2);
     color: var(--danger);
 }
+.toast.warning {
+    border-left: 4px solid var(--warning);
+}
+.toast.warning .toast-icon {
+    background: rgba(245, 158, 11, 0.2);
     color: var(--warning);
 }
+.toast.info {
+    border-left: 4px solid var(--info);
 }
+.toast.info .toast-icon {
+    background: rgba(59, 130, 246, 0.2);
+    color: var(--info);
+}
+/* Mobile Responsive */
 @media (max-width: 768px) {
+    .toast-container {
+        top: 10px;
+        right: 10px;
+        left: 10px;
         max-width: none;
     }
+    .toast {
+        min-width: auto;
     }
 }

static/js/aiAdvisorView.js CHANGED Viewed

@@ -1,94 +1,129 @@
 import apiClient from './apiClient.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]');
     }
     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);
-            });
-        }
     }
-    async handleQuery(formData) {
-        const query = formData.get('query') || '';
-        if (!query.trim()) return;
-        if (this.queryOutput) {
-            this.queryOutput.innerHTML = '<p>Processing query...</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;
         }
-        // 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>
-            `;
         }
-    }
-    async handleSentiment(formData) {
-        const text = formData.get('text') || '';
-        if (!text.trim()) return;
-        if (this.sentimentOutput) {
-            this.sentimentOutput.innerHTML = '<p>Analyzing sentiment...</p>';
         }
-        const result = await apiClient.analyzeSentiment({ text });
-        if (!result.ok) {
-            if (this.sentimentOutput) {
-                this.sentimentOutput.innerHTML = `<div class="inline-message inline-error">${result.error}</div>`;
             }
-            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>` : ''}
                 </div>
-            `;
         }
     }
 }
 export default AIAdvisorView;

 import apiClient from './apiClient.js';
+import { formatCurrency, formatPercent } from './uiUtils.js';
 class AIAdvisorView {
     constructor(section) {
         this.section = section;
+        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.form) return;
+        this.form.addEventListener('submit', async (event) => {
+            event.preventDefault();
+            const formData = new FormData(this.form);
+            await this.handleSubmit(formData);
+        });
     }
+    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>';
         }
+        if (this.sentimentContainer && context) {
+            this.sentimentContainer.innerHTML = '<p>Running sentiment model...</p>';
         }
+        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 }));
         }
+        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 || {});
         }
+        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);
             }
         }
+    }
+    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 CHANGED Viewed

@@ -2,16 +2,8 @@ const DEFAULT_TTL = 60 * 1000; // 1 minute cache
 class ApiClient {
     constructor() {
-        // Use current origin by default to avoid hardcoded URLs
-        this.baseURL = window.location.origin;
-        // Allow override via window.BACKEND_URL if needed
-        if (typeof window.BACKEND_URL === 'string' && window.BACKEND_URL.trim()) {
-            this.baseURL = window.BACKEND_URL.trim().replace(/\/$/, '');
-        }
-        console.log('[ApiClient] Using Backend:', this.baseURL);
         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');
     }
     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;
-        });
     }
     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;
-        });
     }
     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;
-        });
     }
     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'
-            }
-        });
     }
     getProviders() {
@@ -203,112 +153,41 @@ class ApiClient {
     }
     getPriceChart(symbol, timeframe = '7d') {
-        // Backend uses /api/ohlcv
-        const cleanSymbol = encodeURIComponent(String(symbol || 'BTC').trim().toUpperCase());
-        // Map timeframe to interval and limit
-        const intervalMap = { '1d': '1h', '7d': '1h', '30d': '4h', '90d': '1d', '365d': '1d' };
-        const limitMap = { '1d': 24, '7d': 168, '30d': 180, '90d': 90, '365d': 365 };
-        const interval = intervalMap[timeframe] || '1h';
-        const limit = limitMap[timeframe] || 168;
-        return this.get(`/api/ohlcv?symbol=${cleanSymbol}USDT&interval=${interval}&limit=${limit}`);
     }
     analyzeChart(symbol, timeframe = '7d', indicators = []) {
-        // Not implemented in backend yet
-        return Promise.resolve({
-            ok: false,
-            error: 'Chart analysis not yet implemented in backend'
-        });
     }
     runQuery(payload) {
-        // Not implemented in backend yet
-        return Promise.resolve({
-            ok: false,
-            error: 'Query endpoint not yet implemented in backend'
-        });
     }
     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');
     }
     summarizeNews(item) {
-        // Not implemented in backend yet
-        return Promise.resolve({
-            ok: false,
-            error: 'News summarization not yet implemented in backend'
-        });
     }
     getDatasetsList() {
-        // Not implemented in backend yet
-        return Promise.resolve({
-            ok: true,
-            data: {
-                datasets: [],
-                message: 'Datasets endpoint not yet implemented in backend'
-            }
-        });
     }
     getDatasetSample(name) {
-        // Not implemented in backend yet
-        return Promise.resolve({
-            ok: false,
-            error: 'Dataset sample not yet implemented in backend'
-        });
     }
     getModelsList() {
-        // Backend has /api/hf/models
-        return this.get('/api/hf/models');
     }
     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');
     }
 }
 const apiClient = new ApiClient();
-export default apiClient;

 class ApiClient {
     constructor() {
+        const origin = window?.location?.origin ?? '';
+        this.baseURL = origin.replace(/\/$/, '');
         this.cache = new Map();
         this.requestLogs = [];
         this.errorLogs = [];
     }
     // ===== Specific API helpers =====
     getHealth() {
+        return this.get('/api/health');
     }
     getTopCoins(limit = 10) {
+        return this.get(`/api/coins/top?limit=${limit}`);
     }
     getCoinDetails(symbol) {
+        return this.get(`/api/coins/${symbol}`);
     }
     getMarketStats() {
+        return this.get('/api/market/stats');
     }
     getLatestNews(limit = 20) {
+        return this.get(`/api/news/latest?limit=${limit}`);
     }
     getProviders() {
     }
     getPriceChart(symbol, timeframe = '7d') {
+        return this.get(`/api/charts/price/${symbol}?timeframe=${timeframe}`);
     }
     analyzeChart(symbol, timeframe = '7d', indicators = []) {
+        return this.post('/api/charts/analyze', { symbol, timeframe, indicators });
     }
     runQuery(payload) {
+        return this.post('/api/query', payload);
     }
     analyzeSentiment(payload) {
+        return this.post('/api/sentiment/analyze', payload);
     }
     summarizeNews(item) {
+        return this.post('/api/news/summarize', item);
     }
     getDatasetsList() {
+        return this.get('/api/datasets/list');
     }
     getDatasetSample(name) {
+        return this.get(`/api/datasets/sample?name=${encodeURIComponent(name)}`);
     }
     getModelsList() {
+        return this.get('/api/models/list');
     }
     testModel(payload) {
+        return this.post('/api/models/test', payload);
     }
 }
 const apiClient = new ApiClient();
+export default apiClient;

static/js/apiExplorerView.js CHANGED Viewed

@@ -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;
     }
     async sendRequest() {

         if (this.bodyInput) {
             this.bodyInput.value = preset.body || '';
         }
+        this.section.querySelector('[data-api-description]').textContent = preset.description;
+        this.section.querySelector('[data-api-path]').textContent = preset.path;
     }
     async sendRequest() {

static/js/app.js CHANGED Viewed

@@ -1,10 +1,106 @@
 // Crypto Intelligence Hub - Main JavaScript
-// Global state
 const AppState = {
     currentTab: 'dashboard',
     data: {},
-    charts: {}
 };
 // Initialize app
@@ -72,42 +168,23 @@ function initTabs() {
 function loadTabData(tabId) {
     switch(tabId) {
         case 'dashboard':
         case 'market':
             loadMarketData();
             break;
-        case 'monitor':
-            loadMonitorData();
-            break;
-        case 'advanced':
-            loadAdvancedData();
-            break;
-        case 'admin':
-            loadAdminData();
-            break;
-        case 'hf':
-            loadHFHealth();
-            loadModels();
-            break;
-        case 'pools':
-            loadPools();
-            break;
-        case 'logs':
-            loadLogs();
-            break;
-        case 'resources':
-            loadResources();
-            loadAPIRegistry();
-            break;
-        case 'reports':
-            loadReports();
-            break;
-        // Legacy tab names for backward compatibility
         case 'models':
             loadModels();
             break;
         case 'sentiment':
-            loadSentimentModels();
-            loadSentimentHistory();
             break;
         case 'news':
             loadNews();
@@ -121,6 +198,8 @@ function loadTabData(tabId) {
         case 'api-explorer':
             loadAPIEndpoints();
             break;
     }
 }
@@ -144,6 +223,9 @@ function loadAPIEndpoints() {
         { value: '/api/models/list', text: 'GET /api/models/list - List Models' },
         { value: '/api/models/status', text: 'GET /api/models/status - Models Status' },
         { value: '/api/models/data/stats', text: 'GET /api/models/data/stats - Models Statistics' },
         { value: '/api/logs/recent', text: 'GET /api/logs/recent - Recent Logs' },
         { value: '/api/logs/errors', text: 'GET /api/logs/errors - Error Logs' },
         { value: '/api/diagnostics/last', text: 'GET /api/diagnostics/last - Last Diagnostics' },
@@ -184,6 +266,21 @@ async function checkAPIStatus() {
 // Load Dashboard
 async function loadDashboard() {
     try {
         // Load resources
         const resourcesRes = await fetch('/api/resources');
@@ -229,7 +326,13 @@ async function loadDashboard() {
         }
     } catch (error) {
         console.error('Error loading dashboard:', error);
-        showError('Error loading dashboard');
     }
 }
@@ -275,6 +378,15 @@ function createCategoriesChart(categories) {
 // Load Market Data
 async function loadMarketData() {
     try {
         const response = await fetch('/api/market');
         const data = await response.json();
@@ -395,7 +507,12 @@ async function loadMarketData() {
         }
     } catch (error) {
         console.error('Error loading market data:', error);
-        showError('Error loading market data');
     }
 }
@@ -411,6 +528,13 @@ function formatNumber(num) {
 // Load Models
 async function loadModels() {
     try {
         const response = await fetch('/api/models/list');
         const data = await response.json();
@@ -528,7 +652,12 @@ async function loadModels() {
         }
     } catch (error) {
         console.error('Error loading models:', error);
-        showError('Error loading models');
     }
 }
@@ -549,7 +678,7 @@ async function initializeModels() {
     }
 }
-// Load Sentiment Models
 async function loadSentimentModels() {
     try {
         const response = await fetch('/api/models/list');
@@ -557,17 +686,31 @@ async function loadSentimentModels() {
         const models = data.models || data || [];
         const select = document.getElementById('sentiment-model');
-        select.innerHTML = '<option value="">Select Model...</option>';
         models.filter(m => {
-            const status = m.status || 'unknown';
-            return status === 'available' || status === 'loaded' || !m.status;
         }).forEach(model => {
             const option = document.createElement('option');
-            const modelId = model.model_id || model.name || model.key || 'unknown';
-            const task = model.task || model.category || '';
-            option.value = model.key || modelId;
-            option.textContent = `${modelId}${task ? ` (${task})` : ''}`;
             select.appendChild(option);
         });
@@ -575,14 +718,18 @@ async function loadSentimentModels() {
         if (select.options.length === 1) {
             const option = document.createElement('option');
             option.value = '';
-            option.textContent = 'No models available';
             option.disabled = true;
             select.appendChild(option);
         }
     } catch (error) {
         console.error('Error loading sentiment models:', error);
         const select = document.getElementById('sentiment-model');
-        select.innerHTML = '<option value="">Error loading models</option>';
     }
 }
@@ -789,7 +936,144 @@ async function analyzeNewsSentiment() {
     }
 }
-// Analyze Sentiment (updated)
 async function analyzeSentiment() {
     const text = document.getElementById('sentiment-text').value;
     const mode = document.getElementById('sentiment-mode').value;
@@ -806,11 +1090,22 @@ async function analyzeSentiment() {
     try {
         let response;
-        // Use the sentiment/analyze endpoint with mode
-        response = await fetch('/api/sentiment/analyze', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ text: text, mode: mode })
         });
         const data = await response.json();
@@ -935,6 +1230,12 @@ function loadSentimentHistory() {
 // Load News
 async function loadNews() {
     try {
         // Try /api/news/latest first, fallback to /api/news
         let response;
@@ -1099,6 +1400,12 @@ async function loadNews() {
 // Load Providers
 async function loadProviders() {
     try {
         // Load providers and auto-discovery health summary in parallel
         const [providersRes, healthRes] = await Promise.all([
@@ -1406,6 +1713,207 @@ async function runDiagnostics() {
     }
 }
 // Test API
 async function testAPI() {
     const endpoint = document.getElementById('api-endpoint').value;
@@ -1490,19 +1998,13 @@ async function testAPI() {
 // Utility Functions
 function showError(message) {
-    const alert = document.createElement('div');
-    alert.className = 'alert alert-error';
-    alert.textContent = message;
-    document.body.appendChild(alert);
-    setTimeout(() => alert.remove(), 5000);
 }
 function showSuccess(message) {
-    const alert = document.createElement('div');
-    alert.className = 'alert alert-success';
-    alert.textContent = message;
-    document.body.appendChild(alert);
-    setTimeout(() => alert.remove(), 5000);
 }
 // Additional tab loaders for HTML tabs
@@ -1839,3 +2341,299 @@ loadDashboard = async function() {
     await originalLoadDashboard();
     updateHeaderStats();
 };

 // Crypto Intelligence Hub - Main JavaScript
+// Enhanced Pro Trading Terminal UI
+// =============================================================================
+// Toast Notification System
+// =============================================================================
+const ToastManager = {
+    container: null,
+    init() {
+        this.container = document.getElementById('toast-container');
+        if (!this.container) {
+            this.container = document.createElement('div');
+            this.container.id = 'toast-container';
+            this.container.className = 'toast-container';
+            document.body.appendChild(this.container);
+        }
+    },
+    show(message, type = 'info', duration = 5000) {
+        if (!this.container) this.init();
+        const toast = document.createElement('div');
+        toast.className = `toast ${type}`;
+        const icons = {
+            success: 'fa-check-circle',
+            error: 'fa-times-circle',
+            warning: 'fa-exclamation-triangle',
+            info: 'fa-info-circle'
+        };
+        const titles = {
+            success: 'Success',
+            error: 'Error',
+            warning: 'Warning',
+            info: 'Info'
+        };
+        toast.innerHTML = `
+            <div class="toast-icon">
+                <i class="fas ${icons[type] || icons.info}"></i>
+            </div>
+            <div class="toast-content">
+                <div class="toast-title">${titles[type] || titles.info}</div>
+                <div class="toast-message">${message}</div>
+            </div>
+            <button class="toast-close" onclick="ToastManager.remove(this.parentElement)">
+                <i class="fas fa-times"></i>
+            </button>
+            <div class="toast-progress"></div>
+        `;
+        this.container.appendChild(toast);
+        // Auto remove after duration
+        if (duration > 0) {
+            setTimeout(() => this.remove(toast), duration);
+        }
+        return toast;
+    },
+    remove(toast) {
+        if (!toast) return;
+        toast.classList.add('removing');
+        setTimeout(() => {
+            if (toast.parentElement) {
+                toast.parentElement.removeChild(toast);
+            }
+        }, 300);
+    },
+    success(message, duration) {
+        return this.show(message, 'success', duration);
+    },
+    error(message, duration) {
+        return this.show(message, 'error', duration);
+    },
+    warning(message, duration) {
+        return this.show(message, 'warning', duration);
+    },
+    info(message, duration) {
+        return this.show(message, 'info', duration);
+    }
+};
+// Initialize toast manager
+document.addEventListener('DOMContentLoaded', () => {
+    ToastManager.init();
+});
+// =============================================================================
+// Global State
+// =============================================================================
 const AppState = {
     currentTab: 'dashboard',
     data: {},
+    charts: {},
+    isLoading: false
 };
 // Initialize app
 function loadTabData(tabId) {
     switch(tabId) {
         case 'dashboard':
+            loadDashboard();
+            break;
         case 'market':
             loadMarketData();
             break;
         case 'models':
             loadModels();
             break;
         case 'sentiment':
+            loadSentimentModels();  // Populate model dropdown
+            loadSentimentHistory();  // Load history from localStorage
+            break;
+        case 'ai-analyst':
+            // AI analyst tab is interactive, no auto-load needed
+            break;
+        case 'trading-assistant':
+            // Trading assistant tab is interactive, no auto-load needed
             break;
         case 'news':
             loadNews();
         case 'api-explorer':
             loadAPIEndpoints();
             break;
+        default:
+            console.log('No specific loader for tab:', tabId);
     }
 }
         { value: '/api/models/list', text: 'GET /api/models/list - List Models' },
         { value: '/api/models/status', text: 'GET /api/models/status - Models Status' },
         { value: '/api/models/data/stats', text: 'GET /api/models/data/stats - Models Statistics' },
+        { value: '/api/analyze/text', text: 'POST /api/analyze/text - AI Text Analysis' },
+        { value: '/api/trading/decision', text: 'POST /api/trading/decision - Trading Signal' },
+        { value: '/api/sentiment/analyze', text: 'POST /api/sentiment/analyze - Analyze Sentiment' },
         { value: '/api/logs/recent', text: 'GET /api/logs/recent - Recent Logs' },
         { value: '/api/logs/errors', text: 'GET /api/logs/errors - Error Logs' },
         { value: '/api/diagnostics/last', text: 'GET /api/diagnostics/last - Last Diagnostics' },
 // Load Dashboard
 async function loadDashboard() {
+    // Show loading state
+    const statsElements = [
+        'stat-total-resources', 'stat-free-resources',
+        'stat-models', 'stat-providers'
+    ];
+    statsElements.forEach(id => {
+        const el = document.getElementById(id);
+        if (el) el.textContent = '...';
+    });
+    const systemStatusDiv = document.getElementById('system-status');
+    if (systemStatusDiv) {
+        systemStatusDiv.innerHTML = '<div class="loading"><div class="spinner"></div> Loading system status...</div>';
+    }
     try {
         // Load resources
         const resourcesRes = await fetch('/api/resources');
         }
     } catch (error) {
         console.error('Error loading dashboard:', error);
+        showError('Failed to load dashboard. Please check the backend is running.');
+        // Show error state
+        const systemStatusDiv = document.getElementById('system-status');
+        if (systemStatusDiv) {
+            systemStatusDiv.innerHTML = '<div class="alert alert-error">Failed to load dashboard data. Please refresh or check backend status.</div>';
+        }
     }
 }
 // Load Market Data
 async function loadMarketData() {
+    // Show loading states
+    const marketDiv = document.getElementById('market-data');
+    const trendingDiv = document.getElementById('trending-coins');
+    const fgDiv = document.getElementById('fear-greed');
+    if (marketDiv) marketDiv.innerHTML = '<div class="loading"><div class="spinner"></div> Loading market data...</div>';
+    if (trendingDiv) trendingDiv.innerHTML = '<div class="loading"><div class="spinner"></div> Loading trending coins...</div>';
+    if (fgDiv) fgDiv.innerHTML = '<div class="loading"><div class="spinner"></div> Loading Fear & Greed Index...</div>';
     try {
         const response = await fetch('/api/market');
         const data = await response.json();
         }
     } catch (error) {
         console.error('Error loading market data:', error);
+        showError('Failed to load market data. Please check the backend connection.');
+        const marketDiv = document.getElementById('market-data');
+        if (marketDiv) {
+            marketDiv.innerHTML = '<div class="alert alert-error">Failed to load market data. The backend may be offline or the CoinGecko API may be unavailable.</div>';
+        }
     }
 }
 // Load Models
 async function loadModels() {
+    // Show loading state
+    const modelsListDiv = document.getElementById('models-list');
+    const statusDiv = document.getElementById('models-status');
+    if (modelsListDiv) modelsListDiv.innerHTML = '<div class="loading"><div class="spinner"></div> Loading models...</div>';
+    if (statusDiv) statusDiv.innerHTML = '<div class="loading"><div class="spinner"></div> Loading status...</div>';
     try {
         const response = await fetch('/api/models/list');
         const data = await response.json();
         }
     } catch (error) {
         console.error('Error loading models:', error);
+        showError('Failed to load models. Please check the backend connection.');
+        const modelsListDiv = document.getElementById('models-list');
+        if (modelsListDiv) {
+            modelsListDiv.innerHTML = '<div class="alert alert-error">Failed to load models. Check backend status.</div>';
+        }
     }
 }
     }
 }
+// Load Sentiment Models - updated to populate dropdown for sentiment analysis
 async function loadSentimentModels() {
     try {
         const response = await fetch('/api/models/list');
         const models = data.models || data || [];
         const select = document.getElementById('sentiment-model');
+        if (!select) return;
+        select.innerHTML = '<option value="">Auto (Mode-based)</option>';
+        // Filter and add models - only sentiment and generation models
         models.filter(m => {
+            const category = m.category || '';
+            const task = m.task || '';
+            // Include sentiment models and generation/trading models
+            return category.includes('sentiment') ||
+                   category.includes('generation') ||
+                   category.includes('trading') ||
+                   task.includes('classification') ||
+                   task.includes('generation');
         }).forEach(model => {
             const option = document.createElement('option');
+            const modelKey = model.key || model.id;
+            const modelName = model.model_id || model.name || modelKey;
+            const desc = model.description || model.category || '';
+            option.value = modelKey;
+            // Show model name with short description
+            const displayName = modelName.length > 40 ? modelName.substring(0, 37) + '...' : modelName;
+            option.textContent = displayName;
+            option.title = desc; // Full description on hover
             select.appendChild(option);
         });
         if (select.options.length === 1) {
             const option = document.createElement('option');
             option.value = '';
+            option.textContent = 'No models available - will use fallback';
             option.disabled = true;
             select.appendChild(option);
         }
+        console.log(`Loaded ${select.options.length - 1} sentiment models into dropdown`);
     } catch (error) {
         console.error('Error loading sentiment models:', error);
         const select = document.getElementById('sentiment-model');
+        if (select) {
+            select.innerHTML = '<option value="">Auto (Mode-based)</option>';
+        }
     }
 }
     }
 }
+// Summarize News
+async function summarizeNews() {
+    const title = document.getElementById('summary-news-title').value.trim();
+    const content = document.getElementById('summary-news-content').value.trim();
+    if (!title && !content) {
+        showError('Please enter news title or content');
+        return;
+    }
+    const resultDiv = document.getElementById('news-summary-result');
+    resultDiv.innerHTML = '<div class="loading"><div class="spinner"></div> Generating summary...</div>';
+    try {
+        const response = await fetch('/api/news/summarize', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ title: title, content: content })
+        });
+        const data = await response.json();
+        if (!data.success) {
+            resultDiv.innerHTML = `
+                <div class="alert alert-error">
+                    <strong>❌ Summarization Failed:</strong> ${data.error || 'Failed to generate summary'}
+                </div>
+            `;
+            return;
+        }
+        const summary = data.summary || '';
+        const model = data.model || 'Unknown';
+        const isHFModel = data.available !== false && model !== 'fallback_extractive';
+        const modelDisplay = isHFModel ? model : `${model} (Fallback)`;
+        // Create collapsible card with summary
+        resultDiv.innerHTML = `
+            <div class="alert alert-success" style="border-left: 4px solid var(--primary);">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
+                    <h4 style="margin: 0;">📝 News Summary</h4>
+                    <button class="btn-secondary" onclick="toggleSummaryDetails()" style="padding: 5px 10px; font-size: 12px;">
+                        <span id="toggle-summary-icon">▼</span> Details
+                    </button>
+                </div>
+                ${title ? `<div style="margin-bottom: 10px;">
+                    <strong>Title:</strong>
+                    <span style="color: var(--text-primary);">${title}</span>
+                </div>` : ''}
+                <div style="background: var(--bg-card); padding: 15px; border-radius: 8px; margin: 15px 0;">
+                    <strong style="color: var(--primary);">Summary:</strong>
+                    <p style="margin-top: 10px; line-height: 1.6; color: var(--text-primary);">
+                        ${summary}
+                    </p>
+                </div>
+                <div id="summary-details" style="display: none; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border);">
+                    <div style="display: grid; gap: 10px;">
+                        <div>
+                            <strong>Model:</strong>
+                            <span style="color: var(--text-secondary);">${modelDisplay}</span>
+                            ${!isHFModel ? '<span style="color: var(--warning); font-size: 12px; margin-left: 5px;">⚠️ HF model unavailable</span>' : ''}
+                        </div>
+                        ${data.input_length ? `<div>
+                            <strong>Input Length:</strong>
+                            <span style="color: var(--text-secondary);">${data.input_length} characters</span>
+                        </div>` : ''}
+                        <div>
+                            <strong>Timestamp:</strong>
+                            <span style="color: var(--text-secondary);">${new Date(data.timestamp).toLocaleString()}</span>
+                        </div>
+                        ${data.note ? `<div style="color: var(--warning); font-size: 13px;">
+                            <strong>Note:</strong> ${data.note}
+                        </div>` : ''}
+                    </div>
+                </div>
+                <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border);">
+                    <button class="btn-primary" onclick="copySummaryToClipboard()" style="margin-right: 10px;">
+                        📋 Copy Summary
+                    </button>
+                    <button class="btn-secondary" onclick="clearSummaryForm()">
+                        🔄 Clear
+                    </button>
+                </div>
+            </div>
+        `;
+        // Store summary for clipboard
+        window.lastSummary = summary;
+    } catch (error) {
+        console.error('News summarization error:', error);
+        resultDiv.innerHTML = `<div class="alert alert-error">Summarization Error: ${error.message}</div>`;
+        showError('Error summarizing news');
+    }
+}
+// Toggle summary details
+function toggleSummaryDetails() {
+    const details = document.getElementById('summary-details');
+    const icon = document.getElementById('toggle-summary-icon');
+    if (details.style.display === 'none') {
+        details.style.display = 'block';
+        icon.textContent = '▲';
+    } else {
+        details.style.display = 'none';
+        icon.textContent = '▼';
+    }
+}
+// Copy summary to clipboard
+async function copySummaryToClipboard() {
+    if (!window.lastSummary) {
+        showError('No summary to copy');
+        return;
+    }
+    try {
+        await navigator.clipboard.writeText(window.lastSummary);
+        showSuccess('Summary copied to clipboard!');
+    } catch (error) {
+        console.error('Failed to copy:', error);
+        showError('Failed to copy summary');
+    }
+}
+// Clear summary form
+function clearSummaryForm() {
+    document.getElementById('summary-news-title').value = '';
+    document.getElementById('summary-news-content').value = '';
+    document.getElementById('news-summary-result').innerHTML = '';
+    window.lastSummary = null;
+}
+// Analyze Sentiment (updated with model_key support)
 async function analyzeSentiment() {
     const text = document.getElementById('sentiment-text').value;
     const mode = document.getElementById('sentiment-mode').value;
     try {
         let response;
+        // Build request body
+        const requestBody = {
+            text: text,
+            mode: mode
+        };
+        // Add model_key if specific model selected
+        if (modelKey && modelKey !== '') {
+            requestBody.model_key = modelKey;
+        }
+        // Use the sentiment endpoint with mode and optional model_key
+        response = await fetch('/api/sentiment', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(requestBody)
         });
         const data = await response.json();
 // Load News
 async function loadNews() {
+    // Show loading state
+    const newsDiv = document.getElementById('news-list');
+    if (newsDiv) {
+        newsDiv.innerHTML = '<div class="loading"><div class="spinner"></div> Loading news...</div>';
+    }
     try {
         // Try /api/news/latest first, fallback to /api/news
         let response;
 // Load Providers
 async function loadProviders() {
+    // Show loading state
+    const providersDiv = document.getElementById('providers-list');
+    if (providersDiv) {
+        providersDiv.innerHTML = '<div class="loading"><div class="spinner"></div> Loading providers...</div>';
+    }
     try {
         // Load providers and auto-discovery health summary in parallel
         const [providersRes, healthRes] = await Promise.all([
     }
 }
+// Load Health Diagnostics
+async function loadHealthDiagnostics() {
+    const resultDiv = document.getElementById('health-diagnostics-result');
+    resultDiv.innerHTML = '<div class="loading"><div class="spinner"></div> Loading health data...</div>';
+    try {
+        const response = await fetch('/api/diagnostics/health');
+        const data = await response.json();
+        if (data.status !== 'success') {
+            resultDiv.innerHTML = `
+                <div class="alert alert-error">
+                    <strong>Error:</strong> ${data.error || 'Failed to load health diagnostics'}
+                </div>
+            `;
+            return;
+        }
+        const providerSummary = data.providers.summary;
+        const modelSummary = data.models.summary;
+        const providerEntries = data.providers.entries || [];
+        const modelEntries = data.models.entries || [];
+        // Helper function to get status color
+        const getStatusColor = (status) => {
+            switch (status) {
+                case 'healthy': return 'var(--success)';
+                case 'degraded': return 'var(--warning)';
+                case 'unavailable': return 'var(--danger)';
+                default: return 'var(--text-secondary)';
+            }
+        };
+        // Helper function to get status badge
+        const getStatusBadge = (status, inCooldown) => {
+            const color = getStatusColor(status);
+            const icon = status === 'healthy' ? '✅' :
+                        status === 'degraded' ? '⚠️' :
+                        status === 'unavailable' ? '❌' : '❓';
+            const cooldownText = inCooldown ? ' (cooldown)' : '';
+            return `<span style="padding: 4px 10px; background: ${color}20; color: ${color}; border-radius: 5px; font-size: 12px; font-weight: 600;">${icon} ${status}${cooldownText}</span>`;
+        };
+        resultDiv.innerHTML = `
+            <div style="display: grid; gap: 20px;">
+                <!-- Summary Cards -->
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
+                    <div style="padding: 15px; background: rgba(59, 130, 246, 0.1); border-radius: 10px; border-left: 4px solid var(--accent-blue);">
+                        <div style="font-size: 24px; font-weight: 800; color: var(--accent-blue); margin-bottom: 5px;">
+                            ${providerSummary.total}
+                        </div>
+                        <div style="font-size: 12px; color: var(--text-secondary);">Total Providers</div>
+                        <div style="margin-top: 8px; display: flex; gap: 8px; font-size: 11px;">
+                            <span style="color: var(--success);">✅ ${providerSummary.healthy}</span>
+                            <span style="color: var(--warning);">⚠️ ${providerSummary.degraded}</span>
+                            <span style="color: var(--danger);">❌ ${providerSummary.unavailable}</span>
+                        </div>
+                    </div>
+                    <div style="padding: 15px; background: rgba(139, 92, 246, 0.1); border-radius: 10px; border-left: 4px solid var(--accent-purple);">
+                        <div style="font-size: 24px; font-weight: 800; color: var(--accent-purple); margin-bottom: 5px;">
+                            ${modelSummary.total}
+                        </div>
+                        <div style="font-size: 12px; color: var(--text-secondary);">Total Models</div>
+                        <div style="margin-top: 8px; display: flex; gap: 8px; font-size: 11px;">
+                            <span style="color: var(--success);">✅ ${modelSummary.healthy}</span>
+                            <span style="color: var(--warning);">⚠️ ${modelSummary.degraded}</span>
+                            <span style="color: var(--danger);">❌ ${modelSummary.unavailable}</span>
+                        </div>
+                    </div>
+                    <div style="padding: 15px; background: ${data.overall_health.providers_ok && data.overall_health.models_ok ? 'rgba(16, 185, 129, 0.1)' : 'rgba(245, 158, 11, 0.1)'}; border-radius: 10px; border-left: 4px solid ${data.overall_health.providers_ok && data.overall_health.models_ok ? 'var(--success)' : 'var(--warning)'};">
+                        <div style="font-size: 32px; margin-bottom: 5px;">
+                            ${data.overall_health.providers_ok && data.overall_health.models_ok ? '💚' : '⚠️'}
+                        </div>
+                        <div style="font-size: 12px; color: var(--text-secondary);">Overall Health</div>
+                        <div style="margin-top: 8px; font-size: 14px; font-weight: 600; color: ${data.overall_health.providers_ok && data.overall_health.models_ok ? 'var(--success)' : 'var(--warning)'};">
+                            ${data.overall_health.providers_ok && data.overall_health.models_ok ? 'HEALTHY' : 'DEGRADED'}
+                        </div>
+                    </div>
+                </div>
+                <!-- Providers Health -->
+                ${providerEntries.length > 0 ? `
+                    <div>
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
+                            <h4 style="margin: 0; color: var(--text-primary);">🔌 Provider Health (${providerEntries.length})</h4>
+                        </div>
+                        <div style="display: grid; gap: 10px; max-height: 300px; overflow-y: auto;">
+                            ${providerEntries.map(provider => `
+                                <div style="padding: 12px; background: rgba(31, 41, 55, 0.6); border-radius: 8px; border-left: 3px solid ${getStatusColor(provider.status)};">
+                                    <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px;">
+                                        <div style="font-weight: 600; color: var(--text-primary);">${provider.name}</div>
+                                        ${getStatusBadge(provider.status, provider.in_cooldown)}
+                                    </div>
+                                    <div style="font-size: 11px; color: var(--text-secondary); display: grid; gap: 3px;">
+                                        <div>Errors: ${provider.error_count} | Successes: ${provider.success_count}</div>
+                                        ${provider.last_success ? `<div>Last Success: ${new Date(provider.last_success * 1000).toLocaleString()}</div>` : ''}
+                                        ${provider.last_error ? `<div>Last Error: ${new Date(provider.last_error * 1000).toLocaleString()}</div>` : ''}
+                                        ${provider.last_error_message ? `<div style="color: var(--danger); margin-top: 5px;">Error: ${provider.last_error_message.substring(0, 100)}${provider.last_error_message.length > 100 ? '...' : ''}</div>` : ''}
+                                    </div>
+                                </div>
+                            `).join('')}
+                        </div>
+                    </div>
+                ` : '<div class="alert alert-info">No provider health data available yet</div>'}
+                <!-- Models Health -->
+                ${modelEntries.length > 0 ? `
+                    <div>
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
+                            <h4 style="margin: 0; color: var(--text-primary);">🤖 Model Health (${modelEntries.length})</h4>
+                            <button class="btn-secondary" onclick="triggerSelfHeal()" style="padding: 6px 12px; font-size: 12px;">
+                                🔧 Auto-Heal Failed Models
+                            </button>
+                        </div>
+                        <div style="display: grid; gap: 10px; max-height: 400px; overflow-y: auto;">
+                            ${modelEntries.filter(m => m.loaded || m.status !== 'unknown').slice(0, 20).map(model => `
+                                <div style="padding: 12px; background: rgba(31, 41, 55, 0.6); border-radius: 8px; border-left: 3px solid ${getStatusColor(model.status)};">
+                                    <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px; gap: 10px;">
+                                        <div>
+                                            <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 3px;">${model.model_id}</div>
+                                            <div style="font-size: 10px; color: var(--text-secondary);">${model.key} • ${model.category}</div>
+                                        </div>
+                                        <div style="text-align: right; white-space: nowrap;">
+                                            ${getStatusBadge(model.status, model.in_cooldown)}
+                                            ${model.status === 'unavailable' && !model.in_cooldown ? `<button class="btn-secondary" onclick="reinitModel('${model.key}')" style="padding: 4px 8px; font-size: 10px; margin-top: 5px;">Reinit</button>` : ''}
+                                        </div>
+                                    </div>
+                                    <div style="font-size: 11px; color: var(--text-secondary); display: grid; gap: 3px;">
+                                        <div>Errors: ${model.error_count} | Successes: ${model.success_count} | Loaded: ${model.loaded ? 'Yes' : 'No'}</div>
+                                        ${model.last_success ? `<div>Last Success: ${new Date(model.last_success * 1000).toLocaleString()}</div>` : ''}
+                                        ${model.last_error ? `<div>Last Error: ${new Date(model.last_error * 1000).toLocaleString()}</div>` : ''}
+                                        ${model.last_error_message ? `<div style="color: var(--danger); margin-top: 5px;">Error: ${model.last_error_message.substring(0, 150)}${model.last_error_message.length > 150 ? '...' : ''}</div>` : ''}
+                                    </div>
+                                </div>
+                            `).join('')}
+                        </div>
+                    </div>
+                ` : '<div class="alert alert-info">No model health data available yet</div>'}
+                <div style="text-align: center; padding: 15px; background: rgba(31, 41, 55, 0.3); border-radius: 8px; font-size: 11px; color: var(--text-secondary);">
+                    Last updated: ${new Date(data.timestamp).toLocaleString()}
+                </div>
+            </div>
+        `;
+    } catch (error) {
+        console.error('Error loading health diagnostics:', error);
+        resultDiv.innerHTML = `
+            <div class="alert alert-error">
+                <strong>Error:</strong> ${error.message || 'Failed to load health diagnostics'}
+            </div>
+        `;
+    }
+}
+// Trigger self-heal for all failed models
+async function triggerSelfHeal() {
+    try {
+        const response = await fetch('/api/diagnostics/self-heal', { method: 'POST' });
+        const data = await response.json();
+        if (data.status === 'completed') {
+            const summary = data.summary;
+            showSuccess(`Self-heal completed: ${summary.successful}/${summary.total_attempts} successful`);
+            // Reload health after a short delay
+            setTimeout(loadHealthDiagnostics, 2000);
+        } else {
+            showError(data.error || 'Self-heal failed');
+        }
+    } catch (error) {
+        showError('Error triggering self-heal: ' + error.message);
+    }
+}
+// Reinitialize specific model
+async function reinitModel(modelKey) {
+    try {
+        const response = await fetch(`/api/diagnostics/self-heal?model_key=${encodeURIComponent(modelKey)}`, {
+            method: 'POST'
+        });
+        const data = await response.json();
+        if (data.status === 'completed' && data.results && data.results.length > 0) {
+            const result = data.results[0];
+            if (result.status === 'success') {
+                showSuccess(`Model ${modelKey} reinitialized successfully`);
+            } else {
+                showError(`Failed to reinit ${modelKey}: ${result.message || result.error || 'Unknown error'}`);
+            }
+            // Reload health after a short delay
+            setTimeout(loadHealthDiagnostics, 1500);
+        } else {
+            showError(data.error || 'Reinitialization failed');
+        }
+    } catch (error) {
+        showError('Error reinitializing model: ' + error.message);
+    }
+}
 // Test API
 async function testAPI() {
     const endpoint = document.getElementById('api-endpoint').value;
 // Utility Functions
 function showError(message) {
+    console.error(message);
+    ToastManager.error(message);
 }
 function showSuccess(message) {
+    console.log(message);
+    ToastManager.success(message);
 }
 // Additional tab loaders for HTML tabs
     await originalLoadDashboard();
     updateHeaderStats();
 };
+// ===== AI Analyst Functions =====
+async function runAIAnalyst() {
+    const prompt = document.getElementById('ai-analyst-prompt').value.trim();
+    const mode = document.getElementById('ai-analyst-mode').value;
+    const maxLength = parseInt(document.getElementById('ai-analyst-max-length').value);
+    if (!prompt) {
+        showError('Please enter a prompt or question');
+        return;
+    }
+    const resultDiv = document.getElementById('ai-analyst-result');
+    resultDiv.innerHTML = '<div class="loading"><div class="spinner"></div> Generating analysis...</div>';
+    try {
+        const response = await fetch('/api/analyze/text', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                prompt: prompt,
+                mode: mode,
+                max_length: maxLength
+            })
+        });
+        const data = await response.json();
+        if (!data.available) {
+            resultDiv.innerHTML = `
+                <div class="alert alert-warning">
+                    <strong>⚠️ Model Not Available:</strong> ${data.error || 'AI generation model is currently unavailable'}
+                    ${data.note ? `<br><small>${data.note}</small>` : ''}
+                </div>
+            `;
+            return;
+        }
+        if (!data.success) {
+            resultDiv.innerHTML = `
+                <div class="alert alert-error">
+                    <strong>❌ Generation Failed:</strong> ${data.error || 'Failed to generate analysis'}
+                </div>
+            `;
+            return;
+        }
+        const generatedText = data.text || '';
+        const model = data.model || 'Unknown';
+        resultDiv.innerHTML = `
+            <div class="alert alert-success" style="border-left: 4px solid var(--primary);">
+                <div style="display: flex; justify-content: between; align-items: center; margin-bottom: 15px;">
+                    <h4 style="margin: 0;">✨ AI Generated Analysis</h4>
+                </div>
+                <div style="background: var(--bg-card); padding: 20px; border-radius: 8px; margin: 15px 0;">
+                    <div style="line-height: 1.8; color: var(--text-primary); white-space: pre-wrap;">
+                        ${generatedText}
+                    </div>
+                </div>
+                <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border);">
+                    <div style="display: grid; gap: 10px; font-size: 13px;">
+                        <div>
+                            <strong>Model:</strong>
+                            <span style="color: var(--text-secondary);">${model}</span>
+                        </div>
+                        <div>
+                            <strong>Mode:</strong>
+                            <span style="color: var(--text-secondary);">${mode}</span>
+                        </div>
+                        <div>
+                            <strong>Prompt:</strong>
+                            <span style="color: var(--text-secondary);">"${prompt.substring(0, 100)}${prompt.length > 100 ? '...' : ''}"</span>
+                        </div>
+                        <div>
+                            <strong>Timestamp:</strong>
+                            <span style="color: var(--text-secondary);">${new Date(data.timestamp).toLocaleString()}</span>
+                        </div>
+                    </div>
+                </div>
+                <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border);">
+                    <button class="btn-primary" onclick="copyAIAnalystResult()" style="margin-right: 10px;">
+                        📋 Copy Analysis
+                    </button>
+                    <button class="btn-secondary" onclick="clearAIAnalystForm()">
+                        🔄 Clear
+                    </button>
+                </div>
+            </div>
+        `;
+        // Store for clipboard
+        window.lastAIAnalysis = generatedText;
+    } catch (error) {
+        console.error('AI analyst error:', error);
+        resultDiv.innerHTML = `<div class="alert alert-error">Generation Error: ${error.message}</div>`;
+        showError('Error generating analysis');
+    }
+}
+function setAIAnalystPrompt(text) {
+    document.getElementById('ai-analyst-prompt').value = text;
+}
+async function copyAIAnalystResult() {
+    if (!window.lastAIAnalysis) {
+        showError('No analysis to copy');
+        return;
+    }
+    try {
+        await navigator.clipboard.writeText(window.lastAIAnalysis);
+        showSuccess('Analysis copied to clipboard!');
+    } catch (error) {
+        console.error('Failed to copy:', error);
+        showError('Failed to copy analysis');
+    }
+}
+function clearAIAnalystForm() {
+    document.getElementById('ai-analyst-prompt').value = '';
+    document.getElementById('ai-analyst-result').innerHTML = '';
+    window.lastAIAnalysis = null;
+}
+// ===== Trading Assistant Functions =====
+async function runTradingAssistant() {
+    const symbol = document.getElementById('trading-symbol').value.trim().toUpperCase();
+    const context = document.getElementById('trading-context').value.trim();
+    if (!symbol) {
+        showError('Please enter a trading symbol');
+        return;
+    }
+    const resultDiv = document.getElementById('trading-assistant-result');
+    resultDiv.innerHTML = '<div class="loading"><div class="spinner"></div> Analyzing and generating trading signal...</div>';
+    try {
+        const response = await fetch('/api/trading/decision', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                symbol: symbol,
+                context: context
+            })
+        });
+        const data = await response.json();
+        if (!data.available) {
+            resultDiv.innerHTML = `
+                <div class="alert alert-warning">
+                    <strong>⚠️ Model Not Available:</strong> ${data.error || 'Trading signal model is currently unavailable'}
+                    ${data.note ? `<br><small>${data.note}</small>` : ''}
+                </div>
+            `;
+            return;
+        }
+        if (!data.success) {
+            resultDiv.innerHTML = `
+                <div class="alert alert-error">
+                    <strong>❌ Analysis Failed:</strong> ${data.error || 'Failed to generate trading signal'}
+                </div>
+            `;
+            return;
+        }
+        const decision = data.decision || 'HOLD';
+        const confidence = data.confidence || 0;
+        const rationale = data.rationale || '';
+        const model = data.model || 'Unknown';
+        // Determine colors and icons based on decision
+        let decisionColor, decisionBg, decisionIcon;
+        if (decision === 'BUY') {
+            decisionColor = 'var(--success)';
+            decisionBg = 'rgba(16, 185, 129, 0.2)';
+            decisionIcon = '📈';
+        } else if (decision === 'SELL') {
+            decisionColor = 'var(--danger)';
+            decisionBg = 'rgba(239, 68, 68, 0.2)';
+            decisionIcon = '📉';
+        } else {
+            decisionColor = 'var(--text-secondary)';
+            decisionBg = 'rgba(156, 163, 175, 0.2)';
+            decisionIcon = '➡️';
+        }
+        resultDiv.innerHTML = `
+            <div class="alert alert-success" style="border-left: 4px solid ${decisionColor};">
+                <h4 style="margin-bottom: 20px;">🎯 Trading Signal for ${symbol}</h4>
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
+                    <div style="text-align: center; padding: 30px; background: ${decisionBg}; border-radius: 10px;">
+                        <div style="font-size: 48px; margin-bottom: 10px;">${decisionIcon}</div>
+                        <div style="font-size: 32px; font-weight: 800; color: ${decisionColor}; margin-bottom: 5px;">
+                            ${decision}
+                        </div>
+                        <div style="font-size: 14px; color: var(--text-secondary);">
+                            Decision
+                        </div>
+                    </div>
+                    <div style="text-align: center; padding: 30px; background: rgba(102, 126, 234, 0.1); border-radius: 10px;">
+                        <div style="font-size: 48px; font-weight: 800; color: var(--primary); margin-bottom: 10px;">
+                            ${(confidence * 100).toFixed(0)}%
+                        </div>
+                        <div style="font-size: 14px; color: var(--text-secondary);">
+                            Confidence
+                        </div>
+                    </div>
+                </div>
+                <div style="background: var(--bg-card); padding: 20px; border-radius: 8px; margin: 20px 0;">
+                    <strong style="color: var(--primary);">AI Rationale:</strong>
+                    <p style="margin-top: 10px; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap;">
+                        ${rationale}
+                    </p>
+                </div>
+                ${context ? `
+                    <div style="margin-top: 15px; padding: 15px; background: rgba(31, 41, 55, 0.6); border-radius: 8px;">
+                        <strong>Your Context:</strong>
+                        <div style="margin-top: 5px; font-size: 13px; color: var(--text-secondary);">
+                            "${context.substring(0, 200)}${context.length > 200 ? '...' : ''}"
+                        </div>
+                    </div>
+                ` : ''}
+                <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border);">
+                    <div style="display: grid; gap: 10px; font-size: 13px;">
+                        <div>
+                            <strong>Model:</strong>
+                            <span style="color: var(--text-secondary);">${model}</span>
+                        </div>
+                        <div>
+                            <strong>Timestamp:</strong>
+                            <span style="color: var(--text-secondary);">${new Date(data.timestamp).toLocaleString()}</span>
+                        </div>
+                    </div>
+                </div>
+                <div style="margin-top: 20px; padding: 15px; background: rgba(245, 158, 11, 0.1); border-radius: 8px; border-left: 3px solid var(--warning);">
+                    <strong style="color: var(--warning);">⚠️ Reminder:</strong>
+                    <p style="margin-top: 5px; font-size: 13px; color: var(--text-secondary);">
+                        This is an AI-generated signal for informational purposes only. Always do your own research and consider multiple factors before trading.
+                    </p>
+                </div>
+            </div>
+        `;
+    } catch (error) {
+        console.error('Trading assistant error:', error);
+        resultDiv.innerHTML = `<div class="alert alert-error">Analysis Error: ${error.message}</div>`;
+        showError('Error generating trading signal');
+    }
+}
+// Initialize trading pair selector for trading assistant tab
+function initTradingSymbolSelector() {
+    const tradingSymbolContainer = document.getElementById('trading-symbol-container');
+    if (tradingSymbolContainer && window.TradingPairsLoader) {
+        const pairs = window.TradingPairsLoader.getTradingPairs();
+        if (pairs && pairs.length > 0) {
+            tradingSymbolContainer.innerHTML = window.TradingPairsLoader.createTradingPairCombobox(
+                'trading-symbol',
+                'Select or type trading pair',
+                'BTCUSDT'
+            );
+        }
+    }
+}
+// Update loadTabData to handle new tabs
+const originalLoadTabData = loadTabData;
+loadTabData = function(tabId) {
+    originalLoadTabData(tabId);
+    // Additional handlers for new tabs
+    if (tabId === 'ai-analyst') {
+        // No initialization needed for AI Analyst yet
+    } else if (tabId === 'trading-assistant') {
+        initTradingSymbolSelector();
+    }
+};
+// Listen for trading pairs loaded event to initialize trading symbol selector
+document.addEventListener('tradingPairsLoaded', function(e) {
+    initTradingSymbolSelector();
+});

static/js/chartLabView.js CHANGED Viewed

@@ -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.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();
-                    }
-                });
-            }
-        });
     }
     bindEvents() {
-        // Timeframe buttons
         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;
                 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();
-            });
         }
     }
     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;
-            }
             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>';
                     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);
             }
         }
     }
     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>
-            `;
         }
     }
 }

 import apiClient from './apiClient.js';
 class ChartLabView {
     constructor(section) {
         this.section = section;
+        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';
     }
     async init() {
         await this.loadChart();
+        this.bindEvents();
     }
     bindEvents() {
+        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.chartTimeframe;
                 await this.loadChart();
             });
         });
+        if (this.analyzeButton) {
+            this.analyzeButton.addEventListener('click', () => this.runAnalysis());
         }
     }
     async loadChart() {
         if (!this.canvas) return;
+        const result = await apiClient.getPriceChart(this.symbol, this.timeframe);
+        const container = this.canvas.parentElement;
+        if (!result.ok) {
             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.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.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 CHANGED Viewed

@@ -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.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 || [];
         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.modelsBody.innerHTML = this.models
             .map(
                 (model) => `

             this.datasetsBody.innerHTML = `<tr><td colspan="4">${result.error}</td></tr>`;
             return;
         }
+        this.datasets = result.data || [];
         this.datasetsBody.innerHTML = this.datasets
             .map(
                 (dataset) => `
             this.previewContent.innerHTML = `<div class="inline-message inline-error">${result.error}</div>`;
             return;
         }
+        const rows = result.data || [];
         if (!rows.length) {
             this.previewContent.innerHTML = '<p>No sample rows available.</p>';
             return;
             this.modelsBody.innerHTML = `<tr><td colspan="4">${result.error}</td></tr>`;
             return;
         }
+        this.models = result.data || [];
         this.modelsBody.innerHTML = this.models
             .map(
                 (model) => `

static/js/debugConsoleView.js CHANGED Viewed

@@ -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.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>`;
-            }
         }
-        // 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>
-            `;
         }
         this.renderRequestLogs();
         this.renderErrorLogs();
         this.renderWsLogs();

     constructor(section, wsClient) {
         this.section = section;
         this.wsClient = wsClient;
+        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]');
     async refresh() {
         const [health, providers] = await Promise.all([apiClient.getHealth(), apiClient.getProviders()]);
+        if (health.ok) {
+            this.healthStatus.textContent = health.data?.status || 'OK';
+        } else {
+            this.healthStatus.textContent = 'Unavailable';
         }
+        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 CHANGED Viewed

@@ -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.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>${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);
         }
     }

                 </td></tr>`;
             return;
         }
+        this.coins = result.data || [];
         this.filtered = [...this.coins];
         this.renderTable();
     }
                     </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.chartWrapper.innerHTML = `<div class="inline-message inline-error">${chart.error}</div>`;
             }
         } else {
+            this.renderChart(chart.data || []);
         }
     }

static/js/newsView.js CHANGED Viewed

@@ -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.datasetMap.clear();
         this.dataset.forEach((item, index) => {
             const rowId = item.id || `${item.title}-${index}`;

             this.tableBody.innerHTML = `<tr><td colspan="6"><div class="inline-message inline-error">${result.error}</div></td></tr>`;
             return;
         }
+        this.dataset = result.data || [];
         this.datasetMap.clear();
         this.dataset.forEach((item, index) => {
             const rowId = item.id || `${item.title}-${index}`;

static/js/overviewView.js CHANGED Viewed

@@ -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);
-        }
     }
     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 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
-            },
         ];
         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>
                 </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);
             this.topCoinsBody.innerHTML = `
-                <tr><td colspan="8">
                     <div class="inline-message inline-error">
                         <strong>Failed to load coins</strong>
-                        <p>${error.message}</p>
                     </div>
                 </td></tr>`;
         }
     }
     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);
             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>
-        `;
     }
     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>
         `;
-    }
-    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);
-        }
     }
 }

 import apiClient from './apiClient.js';
 import { formatCurrency, formatPercent, renderMessage, createSkeletonRows } from './uiUtils.js';
 class OverviewView {
     constructor(section) {
         this.statsContainer = section.querySelector('[data-overview-stats]');
         this.topCoinsBody = section.querySelector('[data-top-coins-body]');
         this.sentimentCanvas = section.querySelector('#sentiment-chart');
         this.sentimentChart = null;
     }
     async init() {
         this.renderStatSkeletons();
+        this.topCoinsBody.innerHTML = createSkeletonRows(6, 6);
+        await Promise.all([this.loadStats(), this.loadTopCoins(), this.loadSentiment()]);
     }
     renderStatSkeletons() {
             });
             return;
         }
+        const stats = result.data || {};
         const cards = [
+            { 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) => `
+                <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() {
+        const result = await apiClient.getTopCoins(10);
+        if (!result.ok) {
             this.topCoinsBody.innerHTML = `
+                <tr><td colspan="7">
                     <div class="inline-message inline-error">
                         <strong>Failed to load coins</strong>
+                        <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 result = await apiClient.runQuery({ query: 'global crypto sentiment breakdown' });
         if (!result.ok) {
+            this.sentimentCanvas.replaceWith(this.buildSentimentFallback(result.error));
             return;
         }
         const payload = result.data || {};
             neutral: sentiment.neutral ?? 35,
             bearish: sentiment.bearish ?? 25,
         };
+        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) {
+        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>
         `;
+        return wrapper;
     }
 }

static/js/provider-discovery.js CHANGED Viewed

@@ -19,7 +19,7 @@ class ProviderDiscoveryEngine {
         this.providers = [];
         this.categories = new Map();
         this.healthStatus = new Map();
-        this.configPath = '/static/providers_config_ultimate.json'; // Fallback path (prefer /api/providers/config)
         this.initialized = false;
     }
@@ -29,12 +29,14 @@ class ProviderDiscoveryEngine {
     async init() {
         if (this.initialized) return;
-        // Don't log initialization - only log if providers are successfully loaded
         try {
             // Try to load from backend API first
             await this.loadProvidersFromAPI();
         } catch (error) {
-            // Silently fallback to JSON file - providers are optional
             await this.loadProvidersFromJSON();
         }
@@ -42,11 +44,7 @@ class ProviderDiscoveryEngine {
         this.startHealthMonitoring();
         this.initialized = true;
-        // Only log if providers were successfully loaded
-        if (this.providers.length > 0) {
-            console.log(`[Provider Discovery] Initialized with ${this.providers.length} providers in ${this.categories.size} categories`);
-        }
-        // Silently skip if no providers loaded - they're optional
     }
     /**
@@ -55,35 +53,13 @@ class ProviderDiscoveryEngine {
     async loadProvidersFromAPI() {
         try {
             // Try the new /api/providers/config endpoint first
-            const controller = new AbortController();
-            const timeoutId = setTimeout(() => controller.abort(), 5000);
-            let response = null;
-            try {
-                response = await fetch('/api/providers/config', {
-                    signal: controller.signal
-                });
-            } catch (fetchError) {
-                // Completely suppress fetch errors - providers are optional
-                clearTimeout(timeoutId);
-                throw new Error('Network error');
-            }
-            clearTimeout(timeoutId);
-            if (!response || !response.ok) {
-                throw new Error(`HTTP ${response?.status || 'network error'}`);
-            }
-            try {
-                const data = await response.json();
-                this.processProviderData(data);
-            } catch (jsonError) {
-                // Silently handle JSON parse errors
-                throw new Error('Invalid response');
-            }
         } catch (error) {
-            // Silently fail - will fallback to JSON
-            throw error;
         }
     }
@@ -92,37 +68,14 @@ class ProviderDiscoveryEngine {
      */
     async loadProvidersFromJSON() {
         try {
-            const controller = new AbortController();
-            const timeoutId = setTimeout(() => controller.abort(), 5000);
-            let response = null;
-            try {
-                response = await fetch(this.configPath, {
-                    signal: controller.signal
-                });
-            } catch (fetchError) {
-                // Completely suppress fetch errors - providers are optional
-                clearTimeout(timeoutId);
-                this.useFallbackConfig();
-                return;
-            }
-            clearTimeout(timeoutId);
-            if (!response || !response.ok) {
-                // Silently use fallback config
-                this.useFallbackConfig();
-                return;
-            }
-            try {
-                const data = await response.json();
-                this.processProviderData(data);
-            } catch (jsonError) {
-                // Silently use fallback config on parse errors
-                this.useFallbackConfig();
-            }
         } catch (error) {
-            // Completely silent - use fallback config
             this.useFallbackConfig();
         }
     }
@@ -144,10 +97,7 @@ class ProviderDiscoveryEngine {
             responseTime: null
         }));
-        // Only log if providers were successfully loaded
-        if (this.providers.length > 0) {
-            console.log(`[Provider Discovery] Loaded ${this.providers.length} providers`);
-        }
     }
     /**
@@ -171,10 +121,7 @@ class ProviderDiscoveryEngine {
             providers.sort((a, b) => (b.priority || 0) - (a.priority || 0));
         });
-        // Only log if categories were created
-        if (this.categories.size > 0) {
-            console.log(`[Provider Discovery] Categorized into: ${Array.from(this.categories.keys()).join(', ')}`);
-        }
     }
     /**
@@ -270,27 +217,13 @@ class ProviderDiscoveryEngine {
         const startTime = Date.now();
         try {
-            // Call backend health check endpoint with timeout and silent error handling
-            const controller = new AbortController();
-            const timeoutId = setTimeout(() => controller.abort(), 5000);
-            let response = null;
-            try {
-                response = await fetch(`/api/providers/${providerId}/health`, {
-                    signal: controller.signal
-                });
-            } catch (fetchError) {
-                // Completely suppress fetch errors - health checks are optional
-                clearTimeout(timeoutId);
-                provider.status = 'unknown';
-                provider.lastCheck = new Date();
-                provider.responseTime = null;
-                return { status: 'unknown' };
-            }
-            clearTimeout(timeoutId);
             const responseTime = Date.now() - startTime;
-            const status = response && response.ok ? 'online' : 'unknown';
             // Update provider status
             provider.status = status;
@@ -305,17 +238,17 @@ class ProviderDiscoveryEngine {
             return { status, responseTime };
         } catch (error) {
-            // Silently mark as unknown on any error
-            provider.status = 'unknown';
             provider.lastCheck = new Date();
             provider.responseTime = null;
             this.healthStatus.set(providerId, {
-                status: 'unknown',
-                lastCheck: provider.lastCheck
             });
-            return { status: 'unknown' };
         }
     }
@@ -333,11 +266,7 @@ class ProviderDiscoveryEngine {
                 await this.checkProviderHealth(provider.id);
             }
-            // Silently complete health checks - don't log unless there's an issue
-            // Only log if providers are actually being monitored
-            if (highPriorityProviders.length > 0) {
-                // Health checks are running silently - no log needed
-            }
         }, interval);
     }
@@ -509,10 +438,7 @@ class ProviderDiscoveryEngine {
         const html = providers.map(p => this.generateProviderCard(p)).join('');
         container.innerHTML = html;
-        // Only log if providers were actually rendered
-        if (providers.length > 0) {
-            console.log(`[Provider Discovery] Rendered ${providers.length} providers`);
-        }
     }
     /**
@@ -541,7 +467,7 @@ class ProviderDiscoveryEngine {
      * Use fallback minimal config
      */
     useFallbackConfig() {
-        // Silently use fallback config - providers are optional
         this.providers = [
             {
                 id: 'coingecko',
@@ -568,4 +494,4 @@ class ProviderDiscoveryEngine {
 // Export singleton instance
 window.providerDiscovery = new ProviderDiscoveryEngine();
-// Silently load engine - only log if providers are successfully initialized

         this.providers = [];
         this.categories = new Map();
         this.healthStatus = new Map();
+        this.configPath = '/static/providers_config_ultimate.json'; // Fallback path
         this.initialized = false;
     }
     async init() {
         if (this.initialized) return;
+        console.log('[Provider Discovery] Initializing...');
         try {
             // Try to load from backend API first
             await this.loadProvidersFromAPI();
         } catch (error) {
+            console.warn('[Provider Discovery] API load failed, trying JSON file:', error);
+            // Fallback to JSON file
             await this.loadProvidersFromJSON();
         }
         this.startHealthMonitoring();
         this.initialized = true;
+        console.log(`[Provider Discovery] Initialized with ${this.providers.length} providers in ${this.categories.size} categories`);
     }
     /**
     async loadProvidersFromAPI() {
         try {
             // Try the new /api/providers/config endpoint first
+            const response = await fetch('/api/providers/config');
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            const data = await response.json();
+            this.processProviderData(data);
         } catch (error) {
+            throw new Error(`Failed to load from API: ${error.message}`);
         }
     }
      */
     async loadProvidersFromJSON() {
         try {
+            const response = await fetch(this.configPath);
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            const data = await response.json();
+            this.processProviderData(data);
         } catch (error) {
+            console.error('[Provider Discovery] Failed to load JSON:', error);
+            // Use fallback minimal config
             this.useFallbackConfig();
         }
     }
             responseTime: null
         }));
+        console.log(`[Provider Discovery] Loaded ${this.providers.length} providers`);
     }
     /**
             providers.sort((a, b) => (b.priority || 0) - (a.priority || 0));
         });
+        console.log(`[Provider Discovery] Categorized into: ${Array.from(this.categories.keys()).join(', ')}`);
     }
     /**
         const startTime = Date.now();
         try {
+            // Call backend health check endpoint
+            const response = await fetch(`/api/providers/${providerId}/health`, {
+                timeout: 5000
+            });
             const responseTime = Date.now() - startTime;
+            const status = response.ok ? 'online' : 'offline';
             // Update provider status
             provider.status = status;
             return { status, responseTime };
         } catch (error) {
+            provider.status = 'offline';
             provider.lastCheck = new Date();
             provider.responseTime = null;
             this.healthStatus.set(providerId, {
+                status: 'offline',
+                lastCheck: provider.lastCheck,
+                error: error.message
             });
+            return { status: 'offline', error: error.message };
         }
     }
                 await this.checkProviderHealth(provider.id);
             }
+            console.log('[Provider Discovery] Health check completed');
         }, interval);
     }
         const html = providers.map(p => this.generateProviderCard(p)).join('');
         container.innerHTML = html;
+        console.log(`[Provider Discovery] Rendered ${providers.length} providers`);
     }
     /**
      * Use fallback minimal config
      */
     useFallbackConfig() {
+        console.warn('[Provider Discovery] Using minimal fallback config');
         this.providers = [
             {
                 id: 'coingecko',
 // Export singleton instance
 window.providerDiscovery = new ProviderDiscoveryEngine();
+console.log('[Provider Discovery] Engine loaded');

static/js/providersView.js CHANGED Viewed

@@ -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();

             this.tableBody.innerHTML = `<tr><td colspan="5"><div class="inline-message inline-error">${result.error}</div></td></tr>`;
             return;
         }
         const data = result.data || {};
         this.providers = data.providers || data || [];
         this.applyFilters();

static/js/uiUtils.js CHANGED Viewed

@@ -1,90 +1,63 @@
-/**
- * UI Utility Functions
- * Works as regular script (not ES6 module)
- */
-// Create namespace object
-window.UIUtils = {
-    formatCurrency: function(value) {
-        if (value === null || value === undefined || 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`;
-        }
-        if (Math.abs(num) >= 1_000_000_000) {
-            return `$${(num / 1_000_000_000).toFixed(2)}B`;
-        }
-        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 })}`;
-    },
-    formatPercent: function(value) {
-        if (value === null || value === undefined || Number.isNaN(Number(value))) {
-            return '—';
-        }
-        const num = Number(value);
-        return `${num >= 0 ? '+' : ''}${num.toFixed(2)}%`;
-    },
-    setBadge: function(element, value) {
-        if (!element) return;
-        element.textContent = value;
-    },
-    renderMessage: function(container, { state, title, body }) {
-        if (!container) return;
-        container.innerHTML = `
-            <div class="inline-message inline-${state}">
-                <strong>${title}</strong>
-                <p>${body}</p>
-            </div>
-        `;
-    },
-    createSkeletonRows: function(count = 3, columns = 5) {
-        let rows = '';
-        for (let i = 0; i < count; i += 1) {
-            rows += '<tr class="skeleton">';
-            for (let j = 0; j < columns; j += 1) {
-                rows += '<td><span class="skeleton-block"></span></td>';
-            }
-            rows += '</tr>';
-        }
-        return rows;
-    },
-    toggleSection: function(section, active) {
-        if (!section) return;
-        section.classList.toggle('active', !!active);
-    },
-    shimmerElements: function(container) {
-        if (!container) return;
-        container.querySelectorAll('[data-shimmer]').forEach((el) => {
-            el.classList.add('shimmer');
-        });
     }
-};
-// Also expose functions globally for backward compatibility
-window.formatCurrency = window.UIUtils.formatCurrency;
-window.formatPercent = window.UIUtils.formatPercent;
-window.setBadge = window.UIUtils.setBadge;
-window.renderMessage = window.UIUtils.renderMessage;
-window.createSkeletonRows = window.UIUtils.createSkeletonRows;
-window.toggleSection = window.UIUtils.toggleSection;
-window.shimmerElements = window.UIUtils.shimmerElements;

+export function formatCurrency(value) {
+    if (value === null || value === undefined || Number.isNaN(Number(value))) {
+        return '—';
     }
+    const num = Number(value);
+    if (Math.abs(num) >= 1_000_000_000_000) {
+        return `$${(num / 1_000_000_000_000).toFixed(2)}T`;
+    }
+    if (Math.abs(num) >= 1_000_000_000) {
+        return `$${(num / 1_000_000_000).toFixed(2)}B`;
+    }
+    if (Math.abs(num) >= 1_000_000) {
+        return `$${(num / 1_000_000).toFixed(2)}M`;
+    }
+    return `$${num.toLocaleString(undefined, { maximumFractionDigits: 2 })}`;
+}
+export function formatPercent(value) {
+    if (value === null || value === undefined || Number.isNaN(Number(value))) {
+        return '—';
+    }
+    const num = Number(value);
+    return `${num >= 0 ? '+' : ''}${num.toFixed(2)}%`;
+}
+export function setBadge(element, value) {
+    if (!element) return;
+    element.textContent = value;
+}
+export function renderMessage(container, { state, title, body }) {
+    if (!container) return;
+    container.innerHTML = `
+        <div class="inline-message inline-${state}">
+            <strong>${title}</strong>
+            <p>${body}</p>
+        </div>
+    `;
+}
+export function createSkeletonRows(count = 3, columns = 5) {
+    let rows = '';
+    for (let i = 0; i < count; i += 1) {
+        rows += '<tr class="skeleton">';
+        for (let j = 0; j < columns; j += 1) {
+            rows += '<td><span class="skeleton-block"></span></td>';
+        }
+        rows += '</tr>';
+    }
+    return rows;
+}
+export function toggleSection(section, active) {
+    if (!section) return;
+    section.classList.toggle('active', !!active);
+}
+export function shimmerElements(container) {
+    if (!container) return;
+    container.querySelectorAll('[data-shimmer]').forEach((el) => {
+        el.classList.add('shimmer');
+    });
+}

static/js/wsClient.js CHANGED Viewed

@@ -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,80 +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.shouldReconnect = true;
-        this.reconnectAttempts = 0;
-        this.connectionStartTime = null;
     }
-    /**
-     * Automatically determine WebSocket URL based on current window location
-     * Always uses the current origin to avoid hardcoded URLs
-     */
     get url() {
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const host = window.location.host;
-        return `${protocol}//${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
-        };
         this.eventLog.push(entry);
-        // Keep only last 100 events
-        if (this.eventLog.length > 100) {
-            this.eventLog = this.eventLog.slice(-100);
-        }
-        console.log('[WSClient]', entry);
     }
-    /**
-     * 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());
         }
@@ -93,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);
-                }
-            });
-        }
     }
-    /**
-     * 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');
             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.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
             if (this.shouldReconnect) {
-                this.reconnectAttempts++;
                 const delay = this.backoff;
                 this.backoff = Math.min(this.backoff * 2, this.maxBackoff);
                 setTimeout(() => this.connect(), delay);
             }
-        }
     }
-    /**
-     * 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;
-        }
-    }
-    /**
-     * 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;

 class WSClient {
     constructor() {
         this.socket = null;
         this.globalSubscribers = new Set();
         this.typeSubscribers = new Map();
         this.eventLog = [];
+        this.backoff = 1000;
+        this.maxBackoff = 16000;
         this.shouldReconnect = true;
     }
     get url() {
+        const { protocol, host } = window.location;
+        const wsProtocol = protocol === 'https:' ? 'wss:' : 'ws:';
+        return `${wsProtocol}//${host}/ws`;
     }
     logEvent(event) {
+        const entry = { ...event, time: new Date().toISOString() };
         this.eventLog.push(entry);
+        this.eventLog = this.eventLog.slice(-100);
     }
     onStatusChange(callback) {
         this.statusSubscribers.add(callback);
         callback(this.status);
         return () => this.statusSubscribers.delete(callback);
     }
     onMessage(callback) {
         this.globalSubscribers.add(callback);
         return () => this.globalSubscribers.delete(callback);
     }
     subscribe(type, callback) {
         if (!this.typeSubscribers.has(type)) {
             this.typeSubscribers.set(type, new Set());
         }
         return () => set.delete(callback);
     }
     updateStatus(newStatus) {
+        this.status = newStatus;
+        this.statusSubscribers.forEach((cb) => cb(newStatus));
     }
     connect() {
+        if (this.socket && (this.status === 'connecting' || this.status === 'connected')) {
             return;
         }
         this.updateStatus('connecting');
+        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.addEventListener('close', () => {
+            this.updateStatus('disconnected');
+            this.logEvent({ type: 'status', status: 'disconnected' });
             if (this.shouldReconnect) {
                 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();
+            }
+        });
     }
     disconnect() {
         this.shouldReconnect = false;
         if (this.socket) {
+            this.socket.close();
         }
     }
     getEvents() {
         return [...this.eventLog];
     }
 }
 const wsClient = new WSClient();
+export default wsClient;