diff --git "a/unified_dashboard.html" "b/unified_dashboard.html"
--- "a/unified_dashboard.html"
+++ "b/unified_dashboard.html"
@@ -1,2107 +1,1892 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Crypto Monitor ULTIMATE - Unified Dashboard</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        :root {
-            --bg-dark: #0a0e1a;
-            --bg-card: #111827;
-            --bg-card-hover: #1f2937;
-            --text-primary: #f9fafb;
-            --text-secondary: #9ca3af;
-            --accent-blue: #3b82f6;
-            --accent-green: #10b981;
-            --accent-red: #ef4444;
-            --accent-yellow: #f59e0b;
-            --accent-purple: #8b5cf6;
-            --accent-pink: #ec4899;
-            --border: rgba(255, 255, 255, 0.1);
-            --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-        }
-
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: var(--bg-dark);
-            color: var(--text-primary);
-            line-height: 1.6;
-            overflow-x: hidden;
-        }
-
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: 
-                radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 40%),
-                radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.15) 0%, transparent 40%),
-                radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.1) 0%, transparent 30%);
-            pointer-events: none;
-            z-index: 0;
-        }
-
-        .container {
-            max-width: 1920px;
-            margin: 0 auto;
-            padding: 20px;
-            position: relative;
-            z-index: 1;
-        }
-
-        /* Header */
-        .header {
-            background: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(31, 41, 55, 0.4) 100%);
-            backdrop-filter: blur(20px);
-            border: 1px solid var(--border);
-            border-radius: 24px;
-            padding: 30px;
-            margin-bottom: 30px;
-            box-shadow: var(--shadow);
-        }
-
-        .header-top {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            flex-wrap: wrap;
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-
-        .logo {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-
-        .logo-icon {
-            width: 60px;
-            height: 60px;
-            background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
-            border-radius: 16px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 32px;
-            box-shadow: 0 10px 40px rgba(59, 130, 246, 0.4);
-            animation: pulse-glow 3s ease-in-out infinite;
-        }
-
-        @keyframes pulse-glow {
-            0%, 100% { box-shadow: 0 10px 40px rgba(59, 130, 246, 0.4); }
-            50% { box-shadow: 0 10px 60px rgba(139, 92, 246, 0.6); }
-        }
-
-        .logo-text h1 {
-            font-size: 32px;
-            font-weight: 900;
-            background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            letter-spacing: -1px;
-        }
-
-        .logo-text p {
-            font-size: 14px;
-            color: var(--text-secondary);
-            font-weight: 500;
-        }
-
-        .header-actions {
-            display: flex;
-            gap: 12px;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-
-        .status-badge {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 12px 24px;
-            background: rgba(16, 185, 129, 0.15);
-            border: 1px solid rgba(16, 185, 129, 0.3);
-            border-radius: 12px;
-            font-size: 14px;
-            font-weight: 600;
-        }
-
-        .status-dot {
-            width: 10px;
-            height: 10px;
-            background: var(--accent-green);
-            border-radius: 50%;
-            animation: pulse 2s infinite;
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 1; transform: scale(1); }
-            50% { opacity: 0.5; transform: scale(1.2); }
-        }
-
-        .live-indicator {
-            padding: 8px 16px;
-            background: rgba(239, 68, 68, 0.15);
-            border: 1px solid rgba(239, 68, 68, 0.3);
-            border-radius: 8px;
-            font-size: 12px;
-            font-weight: 700;
-            text-transform: uppercase;
-            color: var(--accent-red);
-            animation: blink 2s infinite;
-        }
-
-        @keyframes blink {
-            0%, 50%, 100% { opacity: 1; }
-            25%, 75% { opacity: 0.3; }
-        }
-
-        /* Tabs */
-        .tabs {
-            display: flex;
-            gap: 10px;
-            margin-bottom: 30px;
-            flex-wrap: wrap;
-            border-bottom: 2px solid var(--border);
-            padding-bottom: 10px;
-        }
-
-        .tab {
-            padding: 12px 24px;
-            background: transparent;
-            border: none;
-            border-radius: 12px 12px 0 0;
-            color: var(--text-secondary);
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s;
-            font-size: 14px;
-            position: relative;
-        }
-
-        .tab:hover {
-            color: var(--text-primary);
-            background: rgba(255, 255, 255, 0.05);
-        }
-
-        .tab.active {
-            color: var(--accent-blue);
-            background: rgba(59, 130, 246, 0.1);
-        }
-
-        .tab.active::after {
-            content: '';
-            position: absolute;
-            bottom: -12px;
-            left: 0;
-            right: 0;
-            height: 3px;
-            background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
-            border-radius: 2px;
-        }
-
-        .tab-content {
-            display: none;
-            animation: fadeIn 0.3s;
-        }
-
-        .tab-content.active {
-            display: block;
-        }
-
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        /* Stats Grid */
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
-        }
-
-        .stat-card {
-            background: rgba(17, 24, 39, 0.6);
-            backdrop-filter: blur(10px);
-            border: 1px solid var(--border);
-            border-radius: 20px;
-            padding: 25px;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .stat-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 4px;
-            background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple), var(--accent-pink));
-            transform: scaleX(0);
-            transition: transform 0.3s ease;
-        }
-
-        .stat-card:hover {
-            transform: translateY(-8px) scale(1.02);
-            border-color: rgba(59, 130, 246, 0.5);
-            box-shadow: 0 20px 50px rgba(59, 130, 246, 0.3);
-        }
-
-        .stat-card:hover::before {
-            transform: scaleX(1);
-        }
-
-        .stat-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 15px;
-        }
-
-        .stat-icon {
-            width: 48px;
-            height: 48px;
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 24px;
-            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
-        }
-
-        .stat-value {
-            font-size: 36px;
-            font-weight: 900;
-            margin-bottom: 5px;
-            background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        .stat-label {
-            font-size: 13px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            font-weight: 600;
-        }
-
-        .stat-change {
-            font-size: 14px;
-            font-weight: 700;
-            margin-top: 12px;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .stat-change.positive { color: var(--accent-green); }
-        .stat-change.negative { color: var(--accent-red); }
-
-        /* Market Table */
-        .market-section {
-            background: rgba(17, 24, 39, 0.6);
-            backdrop-filter: blur(10px);
-            border: 1px solid var(--border);
-            border-radius: 24px;
-            padding: 30px;
-            margin-bottom: 30px;
-            box-shadow: var(--shadow);
-        }
-
-        .section-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 25px;
-            flex-wrap: wrap;
-            gap: 15px;
-        }
-
-        .section-title {
-            font-size: 24px;
-            font-weight: 800;
-            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        .refresh-btn {
-            padding: 10px 20px;
-            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
-            border: none;
-            border-radius: 10px;
-            color: white;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .refresh-btn:hover {
-            transform: scale(1.05);
-            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
-        }
-
-        table {
-            width: 100%;
-            border-collapse: collapse;
-        }
-
-        thead {
-            background: rgba(59, 130, 246, 0.1);
-        }
-
-        th {
-            padding: 16px;
-            text-align: left;
-            font-size: 12px;
-            font-weight: 700;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-
-        td {
-            padding: 16px;
-            border-top: 1px solid var(--border);
-            font-size: 14px;
-        }
-
-        tr:hover {
-            background: rgba(59, 130, 246, 0.05);
-        }
-
-        .crypto-name {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .crypto-img {
-            width: 36px;
-            height: 36px;
-            border-radius: 10px;
-            object-fit: cover;
-        }
-
-        .price {
-            font-weight: 700;
-            font-size: 15px;
-        }
-
-        .change {
-            padding: 6px 12px;
-            border-radius: 8px;
-            font-weight: 700;
-            font-size: 13px;
-        }
-
-        .change.positive {
-            background: rgba(16, 185, 129, 0.15);
-            color: var(--accent-green);
-        }
-
-        .change.negative {
-            background: rgba(239, 68, 68, 0.15);
-            color: var(--accent-red);
-        }
-
-        /* Charts */
-        .chart-container {
-            background: rgba(17, 24, 39, 0.6);
-            backdrop-filter: blur(10px);
-            border: 1px solid var(--border);
-            border-radius: 24px;
-            padding: 30px;
-            margin-bottom: 30px;
-        }
-
-        canvas {
-            max-height: 350px;
-        }
-
-        /* Loading */
-        .loading {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 60px;
-        }
-
-        .spinner {
-            width: 50px;
-            height: 50px;
-            border: 4px solid var(--border);
-            border-top-color: var(--accent-blue);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-
-        /* Forms */
-        .form-group {
-            margin-bottom: 20px;
-        }
-
-        .form-label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: 600;
-            color: var(--text-primary);
-        }
-
-        .form-input, .form-select, .form-textarea {
-            width: 100%;
-            padding: 12px;
-            background: rgba(17, 24, 39, 0.6);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            color: var(--text-primary);
-            font-family: inherit;
-            font-size: 14px;
-        }
-
-        .form-input:focus, .form-select:focus, .form-textarea:focus {
-            outline: none;
-            border-color: var(--accent-blue);
-        }
-
-        .form-textarea {
-            resize: vertical;
-            min-height: 100px;
-        }
-
-        /* Badges */
-        .badge {
-            display: inline-block;
-            padding: 4px 12px;
-            border-radius: 12px;
-            font-size: 12px;
-            font-weight: 600;
-        }
-
-        .badge-success {
-            background: rgba(16, 185, 129, 0.15);
-            color: var(--accent-green);
-        }
-
-        .badge-warning {
-            background: rgba(245, 158, 11, 0.15);
-            color: var(--accent-yellow);
-        }
-
-        .badge-danger {
-            background: rgba(239, 68, 68, 0.15);
-            color: var(--accent-red);
-        }
-
-        .badge-info {
-            background: rgba(59, 130, 246, 0.15);
-            color: var(--accent-blue);
-        }
-
-        /* Alert */
-        .alert {
-            padding: 12px 16px;
-            border-radius: 8px;
-            margin-bottom: 16px;
-            font-size: 14px;
-        }
-
-        .alert-success {
-            background: rgba(16, 185, 129, 0.15);
-            color: var(--accent-green);
-            border-left: 4px solid var(--accent-green);
-        }
-
-        .alert-error {
-            background: rgba(239, 68, 68, 0.15);
-            color: var(--accent-red);
-            border-left: 4px solid var(--accent-red);
-        }
-
-        /* Responsive */
-        @media (max-width: 768px) {
-            .stats-grid {
-                grid-template-columns: 1fr;
-            }
-            
-            .header-top {
-                flex-direction: column;
-                align-items: flex-start;
-            }
-            
-            table {
-                font-size: 12px;
-            }
-            
-            th, td {
-                padding: 10px;
-            }
-
-            .tabs {
-                overflow-x: auto;
-            }
-        }
-
-        /* Modal Styles */
-        .modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.8);
-            backdrop-filter: blur(5px);
-            z-index: 1000;
-            justify-content: center;
-            align-items: center;
-            animation: fadeIn 0.3s;
-        }
-
-        .modal.active {
-            display: flex;
-        }
-
-        .modal-content {
-            background: var(--bg-card);
-            border-radius: 20px;
-            padding: 30px;
-            max-width: 600px;
-            width: 90%;
-            max-height: 90vh;
-            overflow-y: auto;
-            border: 1px solid var(--border);
-            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
-            animation: slideUp 0.3s;
-        }
-
-        @keyframes slideUp {
-            from {
-                opacity: 0;
-                transform: translateY(30px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        /* Improved Button Styles */
-        .btn-icon {
-            padding: 8px 12px;
-            border-radius: 8px;
-            border: 1px solid;
-            cursor: pointer;
-            font-size: 12px;
-            font-weight: 600;
-            transition: all 0.3s;
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .btn-icon:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-        }
-
-        /* Pool Card Hover Effect */
-        .pool-card-hover {
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        .pool-card-hover:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
-        }
-
-        /* Improved Empty States */
-        .empty-state {
-            text-align: center;
-            padding: 60px 20px;
-            background: rgba(17, 24, 39, 0.6);
-            border-radius: 20px;
-            border: 2px dashed var(--border);
-        }
-
-        .empty-state-icon {
-            font-size: 64px;
-            margin-bottom: 20px;
-            opacity: 0.5;
-        }
-
-        /* Loading States */
-        .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: loading 1.5s infinite;
-        }
-
-        @keyframes loading {
-            0% { background-position: 200% 0; }
-            100% { background-position: -200% 0; }
-        }
-
-        /* Scrollbar */
-        ::-webkit-scrollbar {
-            width: 10px;
-            height: 10px;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: var(--bg-dark);
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
-            border-radius: 5px;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
-        }
-
-        /* Toast Notifications */
-        .toast {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 16px 20px;
-            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
-            z-index: 2000;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            min-width: 300px;
-            animation: slideInRight 0.3s;
-        }
-
-        @keyframes slideInRight {
-            from {
-                opacity: 0;
-                transform: translateX(100%);
-            }
-            to {
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-
-        .toast-success {
-            border-left: 4px solid var(--accent-green);
-        }
-
-        .toast-error {
-            border-left: 4px solid var(--accent-red);
-        }
-
-        .toast-info {
-            border-left: 4px solid var(--accent-blue);
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <!-- Header -->
-        <div class="header">
-            <div class="header-top">
-                <div class="logo">
-                    <div class="logo-icon">₿</div>
-                    <div class="logo-text">
-                        <h1>Crypto Monitor ULTIMATE</h1>
-                        <p>Unified Dashboard • Real-time data from 100+ free APIs</p>
-                    </div>
-                </div>
-                <div class="header-actions">
-                    <div class="live-indicator">● LIVE</div>
-                    <div class="status-badge">
-                        <div class="status-dot"></div>
-                        <span id="statusText">All Systems Operational</span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Tabs -->
-            <div class="tabs">
-                <button class="tab active" onclick="switchTab('market')">📊 Market</button>
-                <button class="tab" onclick="switchTab('monitor')">📡 API Monitor</button>
-                <button class="tab" onclick="switchTab('advanced')">⚡ Advanced</button>
-                <button class="tab" onclick="switchTab('admin')">⚙️ Admin</button>
-                <button class="tab" onclick="switchTab('hf')">🤗 HuggingFace</button>
-                <button class="tab" onclick="switchTab('pools')">🔄 Pools</button>
-            </div>
-        </div>
-
-        <!-- Market Tab -->
-        <div id="tab-market" class="tab-content active">
-            <!-- Stats Grid -->
-            <div class="stats-grid">
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">💰</div>
-                    </div>
-                    <div class="stat-value" id="totalMarketCap">$0.00T</div>
-                    <div class="stat-label">Total Market Cap</div>
-                    <div class="stat-change positive" id="mcapChange">
-                        <span>↑</span> <span>0.0%</span>
-                    </div>
-                </div>
-
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">📊</div>
-                    </div>
-                    <div class="stat-value" id="totalVolume">$0.00B</div>
-                    <div class="stat-label">24h Trading Volume</div>
-                    <div class="stat-change positive">
-                        <span>↑</span> <span>Volume spike</span>
-                    </div>
-                </div>
-
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">₿</div>
-                    </div>
-                    <div class="stat-value" id="btcDominance">0.0%</div>
-                    <div class="stat-label">BTC Dominance</div>
-                    <div class="stat-change">
-                        <span id="btcDomIcon">↑</span> <span id="btcDomChange">0.0%</span>
-                    </div>
-                </div>
-
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">🔥</div>
-                    </div>
-                    <div class="stat-value" id="fearGreed">50</div>
-                    <div class="stat-label">Fear & Greed Index</div>
-                    <div class="stat-change" id="sentimentLabel">
-                        <span>Neutral</span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Market Table -->
-            <div class="market-section">
-                <div class="section-header">
-                    <div class="section-title">💎 Live Market Data</div>
-                    <button class="refresh-btn" onclick="loadMarketData()">↻ Refresh</button>
-                </div>
-                <div style="overflow-x: auto;">
-                    <table id="marketTable">
-                        <thead>
-                            <tr>
-                                <th>#</th>
-                                <th>Name</th>
-                                <th>Price</th>
-                                <th>24h Change</th>
-                                <th>Market Cap</th>
-                                <th>Volume 24h</th>
-                            </tr>
-                        </thead>
-                        <tbody id="marketTableBody">
-                            <tr>
-                                <td colspan="6">
-                                    <div class="loading"><div class="spinner"></div></div>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-
-            <!-- Charts Row -->
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin-bottom: 30px;">
-                <div class="chart-container">
-                    <div class="section-title" style="margin-bottom: 20px;">📈 Market Dominance</div>
-                    <canvas id="dominanceChart"></canvas>
-                </div>
-
-                <div class="chart-container">
-                    <div class="section-title" style="margin-bottom: 20px;">😱 Fear & Greed Index</div>
-                    <div style="text-align: center;">
-                        <canvas id="gaugeChart"></canvas>
-                        <div style="font-size: 48px; font-weight: 900; margin: 20px 0 10px;" id="sentimentValue">50</div>
-                        <div style="color: var(--text-secondary); font-size: 16px; font-weight: 600;" id="sentimentText">Neutral</div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Trending Section -->
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">🔥 Trending Now</div>
-                <div id="trendingGrid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
-                    <div class="loading"><div class="spinner"></div></div>
-                </div>
-            </div>
-
-            <!-- DeFi Section -->
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">🏦 Top DeFi Protocols</div>
-                <div id="defiList">
-                    <div class="loading"><div class="spinner"></div></div>
-                </div>
-            </div>
-        </div>
-
-        <!-- API Monitor Tab -->
-        <div id="tab-monitor" class="tab-content">
-            <div class="stats-grid">
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">📡</div>
-                    </div>
-                    <div class="stat-value" id="totalAPIs">0</div>
-                    <div class="stat-label">Total APIs</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">✅</div>
-                    </div>
-                    <div class="stat-value" id="onlineAPIs" style="color: var(--accent-green);">0</div>
-                    <div class="stat-label">Online</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">❌</div>
-                    </div>
-                    <div class="stat-value" id="offlineAPIs" style="color: var(--accent-red);">0</div>
-                    <div class="stat-label">Offline</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">⚡</div>
-                    </div>
-                    <div class="stat-value" id="avgResponse" style="font-size: 28px;">0ms</div>
-                    <div class="stat-label">Avg Response</div>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-header">
-                    <div class="section-title">📊 API Providers Status</div>
-                    <button class="refresh-btn" onclick="loadMonitorData()">↻ Refresh</button>
-                </div>
-                <div style="overflow-x: auto;">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>Provider</th>
-                                <th>Category</th>
-                                <th>Status</th>
-                                <th>Response Time</th>
-                                <th>Last Check</th>
-                            </tr>
-                        </thead>
-                        <tbody id="providersTable">
-                            <tr><td colspan="5" style="text-align: center;">Loading...</td></tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">🤗 HuggingFace Sentiment Analysis</div>
-                <div class="form-group">
-                    <label class="form-label">Enter crypto-related text (one per line):</label>
-                    <textarea class="form-textarea" id="sentimentText" rows="5" placeholder="BTC strong breakout&#10;ETH looks weak&#10;Market is bullish">BTC strong breakout
-ETH looks weak
-Market is bullish today</textarea>
-                </div>
-                <button class="refresh-btn" onclick="runSentiment()">🧠 Analyze Sentiment</button>
-                <div id="sentimentResult" style="margin-top: 20px; padding: 20px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; text-align: center; font-size: 36px; font-weight: 900;">—</div>
-                <pre id="sentimentDetails" style="background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 8px; overflow-x: auto; font-size: 12px; margin-top: 15px; max-height: 300px; overflow-y: auto;"></pre>
-            </div>
-        </div>
-
-        <!-- Advanced Tab -->
-        <div id="tab-advanced" class="tab-content">
-            <div class="stats-grid">
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">📡</div>
-                    </div>
-                    <div class="stat-value" id="totalApis">0</div>
-                    <div class="stat-label">Total APIs</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">⚙️</div>
-                    </div>
-                    <div class="stat-value" id="activeTasks">0</div>
-                    <div class="stat-label">Active Tasks</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">💾</div>
-                    </div>
-                    <div class="stat-value" id="cachedData">0</div>
-                    <div class="stat-label">Cached Data</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">🔌</div>
-                    </div>
-                    <div class="stat-value" id="wsConnections">0</div>
-                    <div class="stat-label">WS Connections</div>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-header">
-                    <div class="section-title">🔧 Advanced Actions</div>
-                </div>
-                <div style="display: flex; gap: 15px; flex-wrap: wrap;">
-                    <button class="refresh-btn" onclick="exportJSON()">💾 Export JSON</button>
-                    <button class="refresh-btn" onclick="exportCSV()">📊 Export CSV</button>
-                    <button class="refresh-btn" onclick="createBackup()">🔄 Create Backup</button>
-                    <button class="refresh-btn" onclick="clearCache()">🗑️ Clear Cache</button>
-                    <button class="refresh-btn" onclick="forceUpdateAll()">🔃 Force Update All</button>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">📈 Recent Activity</div>
-                <div id="activityLog" style="max-height: 400px; overflow-y: auto; font-family: monospace; font-size: 12px;">
-                    <div style="padding: 10px; border-left: 3px solid var(--accent-blue); margin-bottom: 8px;">
-                        <span style="opacity: 0.6;">--:--:--</span> Waiting for updates...
-                    </div>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">🔌 API Sources</div>
-                <div id="apiList">
-                    <div class="loading"><div class="spinner"></div></div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Admin Tab -->
-        <div id="tab-admin" class="tab-content">
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">➕ Add New API Source</div>
-                <div class="form-group">
-                    <label class="form-label">API Name</label>
-                    <input type="text" class="form-input" id="newApiName" placeholder="e.g., CoinGecko">
-                </div>
-                <div class="form-group">
-                    <label class="form-label">API URL</label>
-                    <input type="text" class="form-input" id="newApiUrl" placeholder="https://api.example.com/endpoint">
-                </div>
-                <div class="form-group">
-                    <label class="form-label">Category</label>
-                    <select class="form-select" id="newApiCategory">
-                        <option value="market_data">Market Data</option>
-                        <option value="blockchain_explorers">Blockchain Explorers</option>
-                        <option value="news">News & Social</option>
-                        <option value="sentiment">Sentiment</option>
-                        <option value="defi">DeFi</option>
-                        <option value="nft">NFT</option>
-                    </select>
-                </div>
-                <button class="refresh-btn" onclick="addNewAPI()">➕ Add API Source</button>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">📋 Current API Sources</div>
-                <div id="apisList">Loading...</div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">⚙️ Settings</div>
-                <div class="form-group">
-                    <label class="form-label">API Check Interval (seconds)</label>
-                    <input type="number" class="form-input" id="checkInterval" value="30" min="10" max="300">
-                </div>
-                <div class="form-group">
-                    <label class="form-label">Dashboard Auto-Refresh (seconds)</label>
-                    <input type="number" class="form-input" id="dashboardRefresh" value="30" min="5" max="300">
-                </div>
-                <button class="refresh-btn" onclick="saveSettings()">💾 Save Settings</button>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">📊 Statistics</div>
-                <div class="stats-grid">
-                    <div class="stat-card">
-                        <div class="stat-value" id="statTotal">0</div>
-                        <div class="stat-label">Total API Sources</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value" id="statOnline" style="color: var(--accent-green);">0</div>
-                        <div class="stat-label">Currently Online</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value" id="statOffline" style="color: var(--accent-red);">0</div>
-                        <div class="stat-label">Currently Offline</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- HuggingFace Tab -->
-        <div id="tab-hf" class="tab-content">
-            <div class="market-section">
-                <div class="section-header">
-                    <div class="section-title">📊 Health Status</div>
-                    <button class="refresh-btn" onclick="loadHFHealth()">🔄 Refresh</button>
-                </div>
-                <pre id="healthOutput" style="background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 8px; overflow-x: auto; font-size: 12px; max-height: 200px; overflow-y: auto;">Loading...</pre>
-            </div>
-
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px;">
-                <div class="market-section">
-                    <div class="section-title" style="margin-bottom: 20px;">🤖 Models Registry</div>
-                    <button class="refresh-btn" onclick="loadModels()" style="margin-bottom: 15px;">Load Models</button>
-                    <div id="modelsList" style="max-height: 300px; overflow-y: auto; background: rgba(17, 24, 39, 0.6); padding: 15px; border-radius: 8px;">
-                        <p style="color: var(--text-secondary);">Click "Load Models" to fetch...</p>
-                    </div>
-                </div>
-
-                <div class="market-section">
-                    <div class="section-title" style="margin-bottom: 20px;">📚 Datasets Registry</div>
-                    <button class="refresh-btn" onclick="loadDatasets()" style="margin-bottom: 15px;">Load Datasets</button>
-                    <div id="datasetsList" style="max-height: 300px; overflow-y: auto; background: rgba(17, 24, 39, 0.6); padding: 15px; border-radius: 8px;">
-                        <p style="color: var(--text-secondary);">Click "Load Datasets" to fetch...</p>
-                    </div>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">🔍 Search Registry</div>
-                <div class="form-group">
-                    <input type="text" class="form-input" id="searchQuery" placeholder="Search query (e.g., crypto, bitcoin, sentiment)" value="crypto">
-                </div>
-                <div style="display: flex; gap: 10px; margin-bottom: 15px;">
-                    <button class="refresh-btn" onclick="doSearch()">Search Models</button>
-                    <button class="refresh-btn" onclick="doSearchDatasets()">Search Datasets</button>
-                </div>
-                <div id="searchResults" style="max-height: 300px; overflow-y: auto; background: rgba(17, 24, 39, 0.6); padding: 15px; border-radius: 8px;">
-                    <p style="color: var(--text-secondary);">Enter a query and click search...</p>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">💭 Sentiment Analysis</div>
-                <div class="form-group">
-                    <label class="form-label">Enter text samples (one per line):</label>
-                    <textarea class="form-textarea" id="sentimentTexts" rows="5" placeholder="BTC strong breakout&#10;ETH looks weak&#10;Market sentiment is bullish">BTC strong breakout
-ETH looks weak
-Crypto market is bullish today</textarea>
-                </div>
-                <button class="refresh-btn" onclick="doSentiment()">🧠 Run Sentiment Analysis</button>
-                <div id="voteDisplay" style="margin-top: 20px; padding: 20px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; text-align: center; font-size: 36px; font-weight: 900;">—</div>
-                <pre id="sentimentOutput" style="background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 8px; overflow-x: auto; font-size: 12px; margin-top: 15px; max-height: 300px; overflow-y: auto;">Results will appear here...</pre>
-            </div>
-        </div>
-
-        <!-- Pools Tab -->
-        <div id="tab-pools" class="tab-content">
-            <div class="market-section">
-                <div class="section-header">
-                    <div class="section-title">🔄 Source Pool Management</div>
-                    <div style="display: flex; gap: 10px;">
-                        <button class="refresh-btn" onclick="showCreatePoolModal()">➕ Create Pool</button>
-                        <button class="refresh-btn" onclick="loadPools()">🔄 Refresh</button>
-                    </div>
-                </div>
-                <div id="poolsContainer" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 20px;">
-                    <div class="loading"><div class="spinner"></div></div>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">📜 Rotation History</div>
-                <div id="rotationHistory" style="max-height: 400px; overflow-y: auto;">
-                    <div class="loading"><div class="spinner"></div></div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Create Pool Modal -->
-        <div id="createPoolModal" class="modal">
-            <div class="modal-content">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-                    <h2 style="font-size: 24px; font-weight: 800;">➕ Create New Pool</h2>
-                    <button onclick="closeCreatePoolModal()" style="background: none; border: none; color: var(--text-secondary); font-size: 28px; cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">×</button>
-                </div>
-                <form id="createPoolForm">
-                    <div class="form-group">
-                        <label class="form-label">Pool Name</label>
-                        <input type="text" class="form-input" id="poolName" required placeholder="e.g., Market Data Pool">
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Category</label>
-                        <select class="form-select" id="poolCategory" required>
-                            <option value="market_data">Market Data</option>
-                            <option value="blockchain_explorers">Blockchain Explorers</option>
-                            <option value="news">News & Social</option>
-                            <option value="sentiment">Sentiment</option>
-                            <option value="defi">DeFi</option>
-                            <option value="nft">NFT</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Rotation Strategy</label>
-                        <select class="form-select" id="rotationStrategy" required>
-                            <option value="round_robin">Round Robin</option>
-                            <option value="priority">Priority Based</option>
-                            <option value="weighted">Weighted</option>
-                            <option value="least_used">Least Used</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Description (optional)</label>
-                        <textarea class="form-textarea" id="poolDescription" rows="3" placeholder="Pool description..."></textarea>
-                    </div>
-                    <div style="display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px;">
-                        <button type="button" class="refresh-btn" onclick="closeCreatePoolModal()" style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red);">Cancel</button>
-                        <button type="submit" class="refresh-btn">Create Pool</button>
-                    </div>
-                </form>
-            </div>
-        </div>
-
-        <!-- Add Member Modal -->
-        <div id="addMemberModal" class="modal">
-            <div class="modal-content">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-                    <h2 style="font-size: 24px; font-weight: 800;">➕ Add Provider to Pool</h2>
-                    <button onclick="closeAddMemberModal()" style="background: none; border: none; color: var(--text-secondary); font-size: 28px; cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">×</button>
-                </div>
-                <form id="addMemberForm">
-                    <div class="form-group">
-                        <label class="form-label">Provider</label>
-                        <select class="form-select" id="memberProvider" required>
-                            <option value="">Select a provider...</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Priority (1-10, higher = better)</label>
-                        <input type="number" class="form-input" id="memberPriority" value="1" min="1" max="10">
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Weight (1-100, for weighted strategy)</label>
-                        <input type="number" class="form-input" id="memberWeight" value="1" min="1" max="100">
-                    </div>
-                    <div style="display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px;">
-                        <button type="button" class="refresh-btn" onclick="closeAddMemberModal()" style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red);">Cancel</button>
-                        <button type="submit" class="refresh-btn">Add Member</button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        // Global variables
-        let charts = {};
-        let wsConnection = null;
-        let currentTab = 'market';
-
-        // Tab switching
-        function switchTab(tabName) {
-            currentTab = tabName;
-            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-            document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
-            
-            event.target.classList.add('active');
-            document.getElementById(`tab-${tabName}`).classList.add('active');
-
-            // Load data for specific tabs
-            if (tabName === 'market') {
-                loadMarketData();
-            } else if (tabName === 'monitor') {
-                loadMonitorData();
-            } else if (tabName === 'advanced') {
-                loadAdvancedData();
-            } else if (tabName === 'admin') {
-                loadAdminData();
-            } else if (tabName === 'hf') {
-                loadHFHealth();
-            } else if (tabName === 'pools') {
-                loadPools();
-            }
-        }
-
-        // Initialize
-        document.addEventListener('DOMContentLoaded', async () => {
-            await loadMarketData();
-            initCharts();
-            connectWebSocket();
-            setInterval(() => {
-                if (currentTab === 'market') loadMarketData();
-                else if (currentTab === 'monitor') loadMonitorData();
-            }, 60000);
-        });
-
-        // Market Data Functions
-        async function loadMarketData() {
-            try {
-                const [market, stats, sentiment, trending, defi] = await Promise.all([
-                    fetch('/api/market').then(r => r.json()),
-                    fetch('/api/stats').then(r => r.json()),
-                    fetch('/api/sentiment').then(r => r.json()),
-                    fetch('/api/trending').then(r => r.json()),
-                    fetch('/api/defi').then(r => r.json())
-                ]);
-
-                updateStats(stats, sentiment);
-                updateMarketTable(market.cryptocurrencies);
-                updateTrending(trending.trending);
-                updateDeFi(defi);
-                updateCharts(market, sentiment);
-            } catch (error) {
-                console.error('Error loading market data:', error);
-            }
-        }
-
-        function updateStats(stats, sentiment) {
-            const mcap = stats.market.total_market_cap;
-            document.getElementById('totalMarketCap').textContent = '$' + (mcap / 1e12).toFixed(2) + 'T';
-            
-            const volume = stats.market.total_volume;
-            document.getElementById('totalVolume').textContent = '$' + (volume / 1e9).toFixed(2) + 'B';
-            
-            const btcDom = stats.market.btc_dominance;
-            document.getElementById('btcDominance').textContent = btcDom.toFixed(1) + '%';
-            
-            const fg = sentiment.fear_greed_index.value;
-            const classification = sentiment.fear_greed_index.classification;
-            document.getElementById('fearGreed').textContent = fg;
-            document.getElementById('sentimentLabel').innerHTML = `<span>${classification}</span>`;
-            
-            const sentEl = document.getElementById('sentimentLabel');
-            if (fg < 25) {
-                sentEl.style.color = 'var(--accent-red)';
-            } else if (fg < 45) {
-                sentEl.style.color = 'var(--accent-yellow)';
-            } else if (fg < 55) {
-                sentEl.style.color = 'var(--text-secondary)';
-            } else if (fg < 75) {
-                sentEl.style.color = 'var(--accent-blue)';
-            } else {
-                sentEl.style.color = 'var(--accent-green)';
-            }
-        }
-
-        function updateMarketTable(cryptos) {
-            const tbody = document.getElementById('marketTableBody');
-            tbody.innerHTML = cryptos.map((crypto, index) => `
-                <tr>
-                    <td style="font-weight: 700; color: var(--text-secondary);">${crypto.rank || index + 1}</td>
-                    <td>
-                        <div class="crypto-name">
-                            ${crypto.image ? `<img src="${crypto.image}" class="crypto-img" alt="${crypto.symbol}">` : 
-                              `<div class="crypto-img" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6); display: flex; align-items: center; justify-content: center; font-weight: 700;">${crypto.symbol[0]}</div>`}
-                            <div>
-                                <div style="font-weight: 600;">${crypto.name}</div>
-                                <div class="crypto-symbol">${crypto.symbol}</div>
-                            </div>
-                        </div>
-                    </td>
-                    <td class="price">$${crypto.price.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 6})}</td>
-                    <td><span class="change ${crypto.change_24h >= 0 ? 'positive' : 'negative'}">${crypto.change_24h >= 0 ? '+' : ''}${crypto.change_24h.toFixed(2)}%</span></td>
-                    <td style="font-weight: 600;">$${(crypto.market_cap / 1e9).toFixed(2)}B</td>
-                    <td style="color: var(--text-secondary);">$${(crypto.volume_24h / 1e9).toFixed(2)}B</td>
-                </tr>
-            `).join('');
-        }
-
-        function updateTrending(trending) {
-            const grid = document.getElementById('trendingGrid');
-            grid.innerHTML = trending.map((coin, index) => `
-                <div style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 12px; padding: 15px; display: flex; align-items: center; gap: 12px;">
-                    <div style="font-size: 20px; font-weight: 900; color: var(--accent-yellow);">#${index + 1}</div>
-                    ${coin.thumb ? `<img src="${coin.thumb}" style="width: 32px; height: 32px; border-radius: 8px;">` : ''}
-                    <div>
-                        <div style="font-weight: 600;">${coin.name}</div>
-                        <div style="font-size: 12px; color: var(--text-secondary);">${coin.symbol}</div>
-                    </div>
-                </div>
-            `).join('');
-        }
-
-        function updateDeFi(defi) {
-            const list = document.getElementById('defiList');
-            const protocols = defi.protocols || [];
-            
-            list.innerHTML = `
-                <div style="margin-bottom: 20px; padding: 20px; background: rgba(59, 130, 246, 0.1); border-radius: 16px; text-align: center;">
-                    <div style="font-size: 36px; font-weight: 900; margin-bottom: 5px;">$${(defi.total_tvl / 1e9).toFixed(2)}B</div>
-                    <div style="color: var(--text-secondary); font-size: 14px;">Total Value Locked</div>
-                </div>
-                <div style="display: grid; gap: 12px;">
-                    ${protocols.map((p, i) => `
-                        <div style="display: flex; justify-content: space-between; align-items: center; padding: 15px; background: rgba(255, 255, 255, 0.05); border-radius: 12px;">
-                            <div>
-                                <div style="font-weight: 600;">${i + 1}. ${p.name}</div>
-                                <div style="font-size: 12px; color: var(--text-secondary);">${p.chain}</div>
-                            </div>
-                            <div style="text-align: right;">
-                                <div style="font-weight: 700; font-size: 16px;">$${(p.tvl / 1e9).toFixed(2)}B</div>
-                                <div style="font-size: 12px; color: ${p.change_24h >= 0 ? 'var(--accent-green)' : 'var(--accent-red)'};">
-                                    ${p.change_24h >= 0 ? '+' : ''}${p.change_24h.toFixed(2)}%
-                                </div>
-                            </div>
-                        </div>
-                    `).join('')}
-                </div>
-            `;
-        }
-
-        function initCharts() {
-            Chart.defaults.color = '#9ca3af';
-            Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.1)';
-
-            charts.dominance = new Chart(document.getElementById('dominanceChart'), {
-                type: 'doughnut',
-                data: {
-                    labels: ['Bitcoin', 'Ethereum', 'Others'],
-                    datasets: [{
-                        data: [45, 18, 37],
-                        backgroundColor: ['#f7931a', '#627eea', '#8b5cf6'],
-                        borderWidth: 0
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    plugins: {
-                        legend: { position: 'bottom', labels: { padding: 15, font: { size: 12, weight: 600 } } }
-                    }
-                }
-            });
-
-            charts.gauge = new Chart(document.getElementById('gaugeChart'), {
-                type: 'doughnut',
-                data: {
-                    datasets: [{
-                        data: [50, 50],
-                        backgroundColor: ['#3b82f6', 'rgba(255, 255, 255, 0.1)'],
-                        borderWidth: 0
-                    }]
-                },
-                options: {
-                    rotation: -90,
-                    circumference: 180,
-                    cutout: '75%',
-                    plugins: { legend: { display: false }, tooltip: { enabled: false } }
-                }
-            });
-        }
-
-        function updateCharts(market, sentiment) {
-            const btcDom = market.global.btc_dominance;
-            const ethDom = market.global.eth_dominance;
-            charts.dominance.data.datasets[0].data = [btcDom, ethDom, 100 - btcDom - ethDom];
-            charts.dominance.update();
-
-            const fg = sentiment.fear_greed_index.value;
-            charts.gauge.data.datasets[0].data = [fg, 100 - fg];
-            
-            if (fg < 25) {
-                charts.gauge.data.datasets[0].backgroundColor[0] = '#ef4444';
-            } else if (fg < 45) {
-                charts.gauge.data.datasets[0].backgroundColor[0] = '#f59e0b';
-            } else if (fg < 55) {
-                charts.gauge.data.datasets[0].backgroundColor[0] = '#6b7280';
-            } else if (fg < 75) {
-                charts.gauge.data.datasets[0].backgroundColor[0] = '#3b82f6';
-            } else {
-                charts.gauge.data.datasets[0].backgroundColor[0] = '#10b981';
-            }
-            
-            charts.gauge.update();
-            document.getElementById('sentimentValue').textContent = fg;
-            document.getElementById('sentimentText').textContent = sentiment.fear_greed_index.classification;
-        }
-
-        function connectWebSocket() {
-            const ws = new WebSocket(`ws://${window.location.host}/ws/live`);
-            
-            ws.onopen = () => {
-                console.log('✅ WebSocket connected');
-            };
-            
-            ws.onmessage = (event) => {
-                const data = JSON.parse(event.data);
-                if (data.type === 'market_update') {
-                    console.log('📊 Market update received');
-                }
-                if (data.type === 'sentiment_update') {
-                    updateCharts({global: {}}, {fear_greed_index: data.data});
-                }
-            };
-            
-            ws.onerror = () => {
-                console.log('❌ WebSocket error');
-            };
-            
-            ws.onclose = () => {
-                console.log('⚠️ WebSocket disconnected, reconnecting...');
-                setTimeout(connectWebSocket, 5000);
-            };
-        }
-
-        // Monitor Functions
-        async function loadMonitorData() {
-            try {
-                const [status, providers] = await Promise.all([
-                    fetch('/api/status').then(r => r.json()),
-                    fetch('/api/providers').then(r => r.json())
-                ]);
-                
-                document.getElementById('totalAPIs').textContent = status.total_providers;
-                document.getElementById('onlineAPIs').textContent = status.online;
-                document.getElementById('offlineAPIs').textContent = status.offline;
-                document.getElementById('avgResponse').textContent = status.avg_response_time_ms + 'ms';
-                
-                const tbody = document.getElementById('providersTable');
-                tbody.innerHTML = providers.map(p => {
-                    let statusClass = 'badge-success';
-                    if (p.status === 'offline') statusClass = 'badge-danger';
-                    else if (p.status === 'degraded') statusClass = 'badge-warning';
-                    
-                    return `
-                        <tr>
-                            <td><strong>${p.name}</strong></td>
-                            <td><span class="badge badge-info">${p.category}</span></td>
-                            <td><span class="badge ${statusClass}">${p.status.toUpperCase()}</span></td>
-                            <td>${p.response_time_ms}ms</td>
-                            <td style="color: var(--text-secondary); font-size: 13px;">${new Date(p.last_fetch).toLocaleTimeString()}</td>
-                        </tr>
-                    `;
-                }).join('');
-            } catch (error) {
-                console.error('Error loading monitor data:', error);
-            }
-        }
-
-        async function runSentiment() {
-            const text = document.getElementById('sentimentText').value;
-            const texts = text.split('\n').filter(t => t.trim());
-            
-            if (texts.length === 0) {
-                showToast('Please enter at least one line of text', 'info');
-                return;
-            }
-            
-            try {
-                document.getElementById('sentimentResult').textContent = '⏳ Analyzing...';
-                document.getElementById('sentimentDetails').textContent = '';
-                
-                const res = await fetch('/api/hf/run-sentiment', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ texts })
-                });
-                
-                const data = await res.json();
-                const vote = data.vote || 0;
-                let emoji = '😐';
-                let color = 'var(--text-secondary)';
-                
-                if (vote > 0.2) {
-                    emoji = '📈';
-                    color = 'var(--accent-green)';
-                } else if (vote < -0.2) {
-                    emoji = '📉';
-                    color = 'var(--accent-red)';
-                }
-                
-                document.getElementById('sentimentResult').innerHTML = `<span style="color: ${color};">${emoji} ${vote.toFixed(3)}</span>`;
-                document.getElementById('sentimentDetails').textContent = JSON.stringify(data, null, 2);
-            } catch (error) {
-                document.getElementById('sentimentResult').innerHTML = '<span style="color: var(--accent-red);">❌ Error</span>';
-                document.getElementById('sentimentDetails').textContent = 'Error: ' + error.message;
-            }
-        }
-
-        // Advanced Functions
-        async function loadAdvancedData() {
-            try {
-                const response = await fetch('/api/v2/status');
-                const data = await response.json();
-
-                document.getElementById('totalApis').textContent = data.services.config_loader.apis_loaded;
-                document.getElementById('activeTasks').textContent = data.services.scheduler.total_tasks;
-                document.getElementById('cachedData').textContent = data.services.persistence.cached_apis;
-                document.getElementById('wsConnections').textContent = data.services.websocket.total_connections;
-
-                const apisResponse = await fetch('/api/v2/config/apis');
-                const apisData = await apisResponse.json();
-                displayAPIs(apisData.apis);
-            } catch (error) {
-                console.error('Error loading advanced data:', error);
-            }
-        }
-
-        function displayAPIs(apis) {
-            const listElement = document.getElementById('apiList');
-            listElement.innerHTML = '';
-
-            for (const [apiId, api] of Object.entries(apis)) {
-                const item = document.createElement('div');
-                item.style.cssText = 'background: rgba(17, 24, 39, 0.6); padding: 15px; border-radius: 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;';
-                item.innerHTML = `
-                    <div>
-                        <div style="font-weight: 600;">${api.name}</div>
-                        <div style="font-size: 12px; color: var(--text-secondary);">${api.category}</div>
-                    </div>
-                    <button class="refresh-btn" onclick="forceUpdate('${apiId}')" style="padding: 6px 12px; font-size: 12px;">🔄 Update</button>
-                `;
-                listElement.appendChild(item);
-            }
-        }
-
-        async function exportJSON() {
-            try {
-                const response = await fetch('/api/v2/export/json', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ include_history: true })
-                });
-                const data = await response.json();
-                showToast('✅ JSON export created!', 'success');
-                addLog(`Exported to JSON: ${data.filepath}`);
-            } catch (error) {
-                showToast('❌ Export failed', 'error');
-                console.error(error);
-            }
-        }
-
-        async function exportCSV() {
-            try {
-                const response = await fetch('/api/v2/export/csv', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ flatten: true })
-                });
-                const data = await response.json();
-                showToast('✅ CSV export created!', 'success');
-                addLog(`Exported to CSV: ${data.filepath}`);
-            } catch (error) {
-                showToast('❌ Export failed', 'error');
-                console.error(error);
-            }
-        }
-
-        async function createBackup() {
-            try {
-                const response = await fetch('/api/v2/backup', { method: 'POST' });
-                const data = await response.json();
-                showToast('✅ Backup created!', 'success');
-                addLog(`Backup created: ${data.backup_file}`);
-            } catch (error) {
-                showToast('❌ Backup failed', 'error');
-                console.error(error);
-            }
-        }
-
-        async function clearCache() {
-            if (!confirm('Clear all cached data?')) return;
-            try {
-                await fetch('/api/v2/cleanup/cache', { method: 'POST' });
-                showToast('✅ Cache cleared!', 'success');
-                addLog('Cache cleared');
-            } catch (error) {
-                showToast('❌ Failed to clear cache', 'error');
-                console.error(error);
-            }
-        }
-
-        async function forceUpdateAll() {
-            try {
-                const response = await fetch('/api/v2/config/apis');
-                const data = await response.json();
-                for (const apiId of Object.keys(data.apis)) {
-                    await forceUpdate(apiId);
-                    await new Promise(resolve => setTimeout(resolve, 100));
-                }
-                showToast('✅ All APIs updated!', 'success');
-            } catch (error) {
-                showToast('❌ Update failed', 'error');
-                console.error(error);
-            }
-        }
-
-        async function forceUpdate(apiId) {
-            try {
-                await fetch(`/api/v2/schedule/tasks/${apiId}/force-update`, { method: 'POST' });
-                addLog(`Forced update: ${apiId}`);
-            } catch (error) {
-                console.error(error);
-            }
-        }
-
-        function addLog(text) {
-            const logContainer = document.getElementById('activityLog');
-            const time = new Date().toLocaleTimeString();
-            const entry = document.createElement('div');
-            entry.style.cssText = 'padding: 10px; border-left: 3px solid var(--accent-blue); margin-bottom: 8px;';
-            entry.innerHTML = `<span style="opacity: 0.6;">${time}</span> ${text}`;
-            logContainer.insertBefore(entry, logContainer.firstChild);
-            while (logContainer.children.length > 50) {
-                logContainer.removeChild(logContainer.lastChild);
-            }
-        }
-
-        // Admin Functions
-        async function loadAdminData() {
-            try {
-                const [status, providers] = await Promise.all([
-                    fetch('/api/status').then(r => r.json()),
-                    fetch('/api/providers').then(r => r.json())
-                ]);
-                
-                document.getElementById('statTotal').textContent = status.total_providers;
-                document.getElementById('statOnline').textContent = status.online;
-                document.getElementById('statOffline').textContent = status.offline;
-                
-                const list = document.getElementById('apisList');
-                list.innerHTML = providers.map(api => `
-                    <div style="background: rgba(17, 24, 39, 0.6); padding: 15px; border-radius: 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
-                        <div>
-                            <div style="font-weight: 600;">${api.name}</div>
-                            <div style="font-size: 12px; color: var(--text-secondary);">${api.category}</div>
-                        </div>
-                        <span class="badge ${api.status === 'online' ? 'badge-success' : 'badge-danger'}">${api.status.toUpperCase()}</span>
-                    </div>
-                `).join('');
-            } catch (error) {
-                console.error('Error loading admin data:', error);
-            }
-        }
-
-        async function addNewAPI() {
-            const name = document.getElementById('newApiName').value;
-            const url = document.getElementById('newApiUrl').value;
-            const category = document.getElementById('newApiCategory').value;
-
-            if (!name || !url) {
-                showToast('Please fill in API name and URL', 'info');
-                return;
-            }
-
-            showToast('✅ API added! Note: Restart server to activate.', 'success');
-            document.getElementById('newApiName').value = '';
-            document.getElementById('newApiUrl').value = '';
-            loadAdminData();
-        }
-
-        function saveSettings() {
-            const interval = document.getElementById('checkInterval').value;
-            const refresh = document.getElementById('dashboardRefresh').value;
-            localStorage.setItem('monitorSettings', JSON.stringify({ interval, refresh }));
-            showToast('✅ Settings saved!', 'success');
-        }
-
-        // HuggingFace Functions
-        async function loadHFHealth() {
-            try {
-                const data = await fetch('/api/hf/health').then(r => r.json());
-                document.getElementById('healthOutput').textContent = JSON.stringify(data, null, 2);
-            } catch (err) {
-                document.getElementById('healthOutput').textContent = `Error: ${err.message}`;
-            }
-        }
-
-        async function loadModels() {
-            try {
-                document.getElementById('modelsList').innerHTML = '<p style="color: var(--text-secondary);">Loading...</p>';
-                // Mock data for now
-                document.getElementById('modelsList').innerHTML = '<p style="color: var(--text-secondary);">Models registry endpoint not implemented</p>';
-            } catch (err) {
-                document.getElementById('modelsList').innerHTML = `<p style="color: var(--accent-red);">Error: ${err.message}</p>`;
-            }
-        }
-
-        async function loadDatasets() {
-            try {
-                document.getElementById('datasetsList').innerHTML = '<p style="color: var(--text-secondary);">Loading...</p>';
-                // Mock data for now
-                document.getElementById('datasetsList').innerHTML = '<p style="color: var(--text-secondary);">Datasets registry endpoint not implemented</p>';
-            } catch (err) {
-                document.getElementById('datasetsList').innerHTML = `<p style="color: var(--accent-red);">Error: ${err.message}</p>`;
-            }
-        }
-
-        async function doSearch() {
-            const q = document.getElementById('searchQuery').value;
-            document.getElementById('searchResults').innerHTML = `<p style="color: var(--text-secondary);">Searching for "${q}"...</p>`;
-            // Mock search
-            document.getElementById('searchResults').innerHTML = '<p style="color: var(--text-secondary);">Search endpoint not implemented</p>';
-        }
-
-        async function doSearchDatasets() {
-            const q = document.getElementById('searchQuery').value;
-            document.getElementById('searchResults').innerHTML = `<p style="color: var(--text-secondary);">Searching datasets for "${q}"...</p>`;
-            // Mock search
-            document.getElementById('searchResults').innerHTML = '<p style="color: var(--text-secondary);">Search endpoint not implemented</p>';
-        }
-
-        async function doSentiment() {
-            const texts = document.getElementById('sentimentTexts').value.split('\n').filter(t => t.trim());
-            if (texts.length === 0) {
-                showToast('Please enter at least one text sample', 'info');
-                return;
-            }
-            try {
-                document.getElementById('voteDisplay').innerHTML = '<span>⏳ Analyzing...</span>';
-                document.getElementById('sentimentOutput').textContent = 'Running sentiment analysis...';
-                
-                const data = await fetch('/api/hf/run-sentiment', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ texts })
-                }).then(r => r.json());
-                
-                const vote = data.vote || 0;
-                let voteClass = 'vote-neutral';
-                let voteEmoji = '😐';
-                if (vote > 0.2) { voteClass = 'vote-positive'; voteEmoji = '📈'; }
-                else if (vote < -0.2) { voteClass = 'vote-negative'; voteEmoji = '📉'; }
-                
-                document.getElementById('voteDisplay').innerHTML = `<span style="color: ${voteClass === 'vote-positive' ? 'var(--accent-green)' : voteClass === 'vote-negative' ? 'var(--accent-red)' : 'var(--text-secondary)'};">${voteEmoji} ${vote.toFixed(3)}</span>`;
-                document.getElementById('sentimentOutput').textContent = JSON.stringify(data, null, 2);
-            } catch (err) {
-                document.getElementById('voteDisplay').innerHTML = '<span style="color: var(--accent-red);">Error</span>';
-                document.getElementById('sentimentOutput').textContent = `Error: ${err.message}`;
-            }
-        }
-
-        // Pools Functions
-        let currentPoolId = null;
-        let allProvidersList = [];
-
-        async function loadPools() {
-            try {
-                const [poolsRes, historyRes] = await Promise.all([
-                    fetch('/api/pools').then(r => r.json()),
-                    fetch('/api/pools/history?limit=20').then(r => r.json())
-                ]);
-
-                const pools = poolsRes.pools || [];
-                const container = document.getElementById('poolsContainer');
-                
-                if (pools.length === 0) {
-                    container.innerHTML = `
-                        <div style="grid-column: 1/-1; text-align: center; padding: 40px; background: rgba(17, 24, 39, 0.6); border-radius: 20px; border: 2px dashed var(--border);">
-                            <div style="font-size: 48px; margin-bottom: 15px;">🔄</div>
-                            <div style="font-size: 18px; font-weight: 600; margin-bottom: 10px; color: var(--text-primary);">No pools configured</div>
-                            <div style="color: var(--text-secondary); margin-bottom: 20px;">Create your first pool to get started with API source rotation</div>
-                            <button class="refresh-btn" onclick="showCreatePoolModal()">➕ Create Pool</button>
-                        </div>
-                    `;
-                } else {
-                    container.innerHTML = pools.map(pool => createPoolCard(pool)).join('');
-                }
-
-                // Load rotation history
-                const history = historyRes.history || [];
-                const historyContainer = document.getElementById('rotationHistory');
-                if (history.length === 0) {
-                    historyContainer.innerHTML = '<p style="color: var(--text-secondary); text-align: center; padding: 20px;">No rotation history yet</p>';
-                } else {
-                    historyContainer.innerHTML = history.map(h => `
-                        <div style="padding: 15px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; margin-bottom: 10px; border-left: 3px solid var(--accent-blue);">
-                            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
-                                <div>
-                                    <div style="font-weight: 600; margin-bottom: 5px;">${h.pool_name}</div>
-                                    <div style="font-size: 12px; color: var(--text-secondary);">Rotated to: <strong>${h.provider_name}</strong></div>
-                                </div>
-                                <div style="text-align: right;">
-                                    <div style="font-size: 12px; color: var(--text-secondary);">${new Date(h.timestamp).toLocaleString()}</div>
-                                    <span class="badge badge-info" style="margin-top: 5px; display: inline-block;">${h.reason}</span>
-                                </div>
-                            </div>
-                        </div>
-                    `).join('');
-                }
-            } catch (error) {
-                console.error('Error loading pools:', error);
-                document.getElementById('poolsContainer').innerHTML = `
-                    <div style="grid-column: 1/-1; text-align: center; padding: 40px; color: var(--accent-red);">
-                        <div>❌ Error loading pools: ${error.message}</div>
-                    </div>
-                `;
-            }
-        }
-
-        function createPoolCard(pool) {
-            const currentProvider = pool.current_provider
-                ? `<div style="margin-bottom: 15px; padding: 12px; background: rgba(16, 185, 129, 0.1); border-radius: 10px; border: 1px solid rgba(16, 185, 129, 0.3);">
-                     <div style="display: flex; align-items: center; gap: 8px;">
-                         <span style="width: 10px; height: 10px; background: var(--accent-green); border-radius: 50%; display: inline-block;"></span>
-                         <span style="font-weight: 600;">Current: ${pool.current_provider.name}</span>
-                     </div>
-                   </div>`
-                : '<div style="margin-bottom: 15px; padding: 12px; background: rgba(239, 68, 68, 0.1); border-radius: 10px; border: 1px solid rgba(239, 68, 68, 0.3); color: var(--text-secondary);">No active provider</div>';
-
-            const membersHTML = pool.members && pool.members.length > 0
-                ? pool.members.map(member => {
-                    const successRate = member.success_rate || 0;
-                    const statusClass = successRate >= 90 ? 'badge-success' : successRate >= 70 ? 'badge-warning' : 'badge-danger';
-                    const rateLimit = member.rate_limit || { usage: 0, limit: 100, percentage: 0 };
-
-                    return `
-                        <div style="background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 10px; margin-bottom: 8px;">
-                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-                                <div style="font-weight: 600;">${member.provider_name}</div>
-                                <span class="badge ${statusClass}">${successRate.toFixed(1)}%</span>
-                            </div>
-                            <div style="display: flex; gap: 15px; font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;">
-                                <span>Used: ${member.use_count || 0}</span>
-                                <span>Priority: ${member.priority || 1}</span>
-                                <span>Weight: ${member.weight || 1}</span>
-                            </div>
-                            <div>
-                                <div style="font-size: 11px; color: var(--text-secondary); margin-bottom: 4px;">
-                                    Rate Limit: ${rateLimit.usage}/${rateLimit.limit} (${rateLimit.percentage}%)
-                                </div>
-                                <div style="height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden;">
-                                    <div style="height: 100%; background: ${rateLimit.percentage < 70 ? 'var(--accent-green)' : rateLimit.percentage < 90 ? 'var(--accent-yellow)' : 'var(--accent-red)'}; width: ${rateLimit.percentage}%; transition: width 0.3s;"></div>
-                                </div>
-                            </div>
-                        </div>
-                    `;
-                }).join('')
-                : '<div style="color: var(--text-secondary); font-size: 14px; padding: 20px; text-align: center;">No members in pool</div>';
-
-            return `
-                <div class="pool-card-hover" style="background: rgba(17, 24, 39, 0.6); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 20px; padding: 25px;">
-                    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;">
-                        <div>
-                            <div style="font-size: 20px; font-weight: 700; margin-bottom: 8px;">${pool.pool_name}</div>
-                            <span class="badge badge-info">${pool.category}</span>
-                        </div>
-                        <div style="display: flex; gap: 8px;">
-                            <button onclick="addMemberToPool(${pool.pool_id})" style="padding: 8px 12px; background: rgba(59, 130, 246, 0.2); border: 1px solid var(--accent-blue); border-radius: 8px; color: var(--accent-blue); cursor: pointer; font-size: 12px; font-weight: 600;">➕</button>
-                            <button onclick="rotatePool(${pool.pool_id})" style="padding: 8px 12px; background: rgba(16, 185, 129, 0.2); border: 1px solid var(--accent-green); border-radius: 8px; color: var(--accent-green); cursor: pointer; font-size: 12px; font-weight: 600;">🔄</button>
-                            <button onclick="deletePool(${pool.pool_id}, '${pool.pool_name}')" style="padding: 8px 12px; background: rgba(239, 68, 68, 0.2); border: 1px solid var(--accent-red); border-radius: 8px; color: var(--accent-red); cursor: pointer; font-size: 12px; font-weight: 600;">🗑️</button>
-                        </div>
-                    </div>
-
-                    ${currentProvider}
-
-                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0;">
-                        <div style="background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 10px;">
-                            <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">Strategy</div>
-                            <div style="font-weight: 600; font-size: 14px;">${pool.rotation_strategy.replace('_', ' ')}</div>
-                        </div>
-                        <div style="background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 10px;">
-                            <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">Rotations</div>
-                            <div style="font-weight: 600; font-size: 14px;">${pool.total_rotations || 0}</div>
-                        </div>
-                        <div style="background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 10px;">
-                            <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">Members</div>
-                            <div style="font-weight: 600; font-size: 14px;">${pool.members ? pool.members.length : 0}</div>
-                        </div>
-                        <div style="background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 10px;">
-                            <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">Status</div>
-                            <span class="badge ${pool.enabled ? 'badge-success' : 'badge-danger'}">${pool.enabled ? 'Enabled' : 'Disabled'}</span>
-                        </div>
-                    </div>
-
-                    <div style="margin-top: 20px;">
-                        <div style="font-weight: 600; margin-bottom: 12px; font-size: 14px;">Pool Members</div>
-                        <div style="max-height: 300px; overflow-y: auto;">
-                            ${membersHTML}
-                        </div>
-                    </div>
-                </div>
-            `;
-        }
-
-        async function loadProvidersForPool() {
-            try {
-                const providers = await fetch('/api/providers').then(r => r.json());
-                allProvidersList = providers;
-                const select = document.getElementById('memberProvider');
-                select.innerHTML = '<option value="">Select a provider...</option>' + providers.map(p => {
-                    const providerId = p.name.toLowerCase().replace(/\s+/g, '_');
-                    return `<option value="${providerId}">${p.name} (${p.category})</option>`;
-                }).join('');
-            } catch (error) {
-                console.error('Error loading providers:', error);
-            }
-        }
-
-        function showCreatePoolModal() {
-            document.getElementById('createPoolModal').classList.add('active');
-        }
-
-        function closeCreatePoolModal() {
-            document.getElementById('createPoolModal').classList.remove('active');
-            document.getElementById('createPoolForm').reset();
-        }
-
-        function addMemberToPool(poolId) {
-            currentPoolId = poolId;
-            loadProvidersForPool();
-            document.getElementById('addMemberModal').classList.add('active');
-        }
-
-        function closeAddMemberModal() {
-            document.getElementById('addMemberModal').classList.remove('active');
-            document.getElementById('addMemberForm').reset();
-            currentPoolId = null;
-        }
-
-        document.getElementById('createPoolForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const data = {
-                name: document.getElementById('poolName').value,
-                category: document.getElementById('poolCategory').value,
-                rotation_strategy: document.getElementById('rotationStrategy').value,
-                description: document.getElementById('poolDescription').value
-            };
-
-            try {
-                const response = await fetch('/api/pools', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(data)
-                });
-
-                if (response.ok) {
-                    showToast('✅ Pool created successfully!', 'success');
-                    closeCreatePoolModal();
-                    loadPools();
-                } else {
-                    const error = await response.json();
-                    showToast('❌ Error: ' + (error.detail || 'Failed to create pool'), 'error');
-                }
-            } catch (error) {
-                showToast('❌ Error: ' + error.message, 'error');
-                console.error(error);
-            }
-        });
-
-        document.getElementById('addMemberForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const data = {
-                provider_id: document.getElementById('memberProvider').value,
-                priority: parseInt(document.getElementById('memberPriority').value),
-                weight: parseInt(document.getElementById('memberWeight').value)
-            };
-
-            try {
-                const response = await fetch(`/api/pools/${currentPoolId}/members`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(data)
-                });
-
-                if (response.ok) {
-                    showToast('✅ Member added successfully!', 'success');
-                    closeAddMemberModal();
-                    loadPools();
-                } else {
-                    const error = await response.json();
-                    showToast('❌ Error: ' + (error.detail || 'Failed to add member'), 'error');
-                }
-            } catch (error) {
-                showToast('❌ Error: ' + error.message, 'error');
-                console.error(error);
-            }
-        });
-
-        async function rotatePool(poolId) {
-            try {
-                const response = await fetch(`/api/pools/${poolId}/rotate`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ reason: 'manual' })
-                });
-
-                if (response.ok) {
-                    const result = await response.json();
-                    showToast(`✅ Rotated to ${result.provider_name}`, 'success');
-                    loadPools();
-                } else {
-                    const error = await response.json();
-                    showToast('❌ Error: ' + (error.detail || 'Failed to rotate'), 'error');
-                }
-            } catch (error) {
-                showToast('❌ Error: ' + error.message, 'error');
-                console.error(error);
-            }
-        }
-
-        async function deletePool(poolId, poolName) {
-            if (!confirm(`Are you sure you want to delete pool "${poolName}"?`)) {
-                return;
-            }
-
-            try {
-                const response = await fetch(`/api/pools/${poolId}`, {
-                    method: 'DELETE'
-                });
-
-                if (response.ok) {
-                    showToast('✅ Pool deleted successfully!', 'success');
-                    loadPools();
-                } else {
-                    const error = await response.json();
-                    showToast('❌ Error: ' + (error.detail || 'Failed to delete pool'), 'error');
-                }
-            } catch (error) {
-                alert('❌ Error: ' + error.message);
-                console.error(error);
-            }
-        }
-
-        // Toast notification function
-        function showToast(message, type = 'info') {
-            const toast = document.createElement('div');
-            toast.className = `toast toast-${type}`;
-            toast.innerHTML = `
-                <span style="font-size: 20px;">${type === 'success' ? '✅' : type === 'error' ? '❌' : 'ℹ️'}</span>
-                <span>${message}</span>
-            `;
-            document.body.appendChild(toast);
-
-            setTimeout(() => {
-                toast.style.animation = 'slideInRight 0.3s reverse';
-                setTimeout(() => toast.remove(), 300);
-            }, 3000);
-        }
-
-        // Close modals when clicking outside
-        document.addEventListener('click', (e) => {
-            if (e.target.classList.contains('modal')) {
-                e.target.style.display = 'none';
-            }
-        });
-    </script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>🚀 Crypto API Monitor – Unified Dashboard</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap"
+        rel="stylesheet" />
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Vazirmatn', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+        }
+
+        :root {
+            --bg: #020617;
+            --bg-elevated: rgba(15, 23, 42, 0.9);
+            --bg-soft: rgba(15, 23, 42, 0.7);
+            --border-subtle: rgba(148, 163, 184, 0.2);
+            --border-strong: rgba(129, 140, 248, 0.7);
+            --accent: #6366f1;
+            --accent-soft: rgba(99, 102, 241, 0.2);
+            --accent-strong: #4f46e5;
+            --accent-2: #22c55e;
+            --accent-3: #f97316;
+            --accent-4: #ec4899;
+            --danger: #ef4444;
+            --text: #e5e7eb;
+            --muted: #9ca3af;
+            --chip-bg: rgba(15, 23, 42, 0.9);
+            --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.85);
+            --radius-lg: 22px;
+            --radius-md: 14px;
+            --radius-pill: 999px;
+            --blur: 24px;
+            --transition-fast: 0.18s ease-out;
+        }
+
+        body {
+            min-height: 100vh;
+            background:
+                radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 55%),
+                radial-gradient(circle at bottom right, rgba(129, 140, 248, 0.2), transparent 55%),
+                radial-gradient(circle at top right, rgba(244, 114, 182, 0.16), transparent 60%),
+                #020617;
+            color: var(--text);
+            padding: 24px;
+        }
+
+        .shell {
+            max-width: 1440px;
+            margin: 0 auto;
+        }
+
+        .hero {
+            position: relative;
+            border-radius: 32px;
+            padding: 26px 26px 20px;
+            background: radial-gradient(circle at top left, rgba(96, 165, 250, 0.2), transparent 60%),
+                radial-gradient(circle at bottom right, rgba(244, 114, 182, 0.18), transparent 55%),
+                linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.98));
+            backdrop-filter: blur(26px);
+            border: 1px solid rgba(148, 163, 184, 0.4);
+            box-shadow: 0 28px 70px rgba(15, 23, 42, 0.9);
+            margin-bottom: 22px;
+            overflow: hidden;
+        }
+
+        .hero-header {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 18px;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 12px;
+        }
+
+        .hero-title-block {
+            display: flex;
+            align-items: center;
+            gap: 14px;
+            flex-wrap: wrap;
+        }
+
+        .hero-logo {
+            width: 40px;
+            height: 40px;
+            border-radius: 16px;
+            background: radial-gradient(circle at 30% 0%, #4f46e5, transparent 60%),
+                radial-gradient(circle at 80% 100%, #22c55e, transparent 60%),
+                #020617;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 12px 30px rgba(129, 140, 248, 0.7);
+            font-size: 22px;
+        }
+
+        .hero-title-text h1 {
+            font-size: 26px;
+            font-weight: 800;
+            letter-spacing: -0.03em;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .hero-title-text span.badge-beta {
+            font-size: 11px;
+            padding: 4px 10px;
+            border-radius: 999px;
+            background: rgba(15, 23, 42, 0.9);
+            border: 1px solid rgba(148, 163, 184, 0.5);
+            color: var(--muted);
+            font-weight: 500;
+        }
+
+        .hero-title-text p {
+            margin-top: 4px;
+            font-size: 13px;
+            color: var(--muted);
+            max-width: 520px;
+        }
+
+        .hero-status-row {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            align-items: center;
+            justify-content: flex-end;
+        }
+
+        .pill {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            border-radius: 999px;
+            padding: 6px 12px;
+            background: rgba(15, 23, 42, 0.9);
+            border: 1px solid rgba(148, 163, 184, 0.5);
+            font-size: 11px;
+            color: var(--muted);
+            white-space: nowrap;
+        }
+
+        .pill-dot {
+            width: 7px;
+            height: 7px;
+            border-radius: 999px;
+            background: var(--muted);
+            box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.3);
+        }
+
+        .pill-dot.ok {
+            background: #22c55e;
+            box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35);
+        }
+
+        .pill-dot.warn {
+            background: #eab308;
+            box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.35);
+        }
+
+        .pill-dot.err {
+            background: #ef4444;
+            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35);
+        }
+
+        .pill-label {
+            opacity: 0.85;
+        }
+
+        .pill-value {
+            font-weight: 600;
+            color: var(--text);
+        }
+
+        .chip-row {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin-top: 10px;
+        }
+
+        .chip {
+            border-radius: 999px;
+            padding: 6px 11px;
+            background: rgba(15, 23, 42, 0.8);
+            border: 1px solid rgba(148, 163, 184, 0.3);
+            font-size: 11px;
+            color: var(--muted);
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .chip b {
+            color: var(--text);
+            font-weight: 600;
+        }
+
+        .hero-footer {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            gap: 14px;
+            margin-top: 10px;
+        }
+
+        .tab-strip {
+            display: inline-flex;
+            gap: 6px;
+            padding: 4px;
+            border-radius: 999px;
+            background: rgba(15, 23, 42, 0.9);
+            border: 1px solid rgba(148, 163, 184, 0.4);
+        }
+
+        .tab-btn {
+            border-radius: 999px;
+            padding: 6px 13px;
+            font-size: 12px;
+            border: none;
+            cursor: pointer;
+            color: var(--muted);
+            background: transparent;
+            position: relative;
+            transition: var(--transition-fast);
+            white-space: nowrap;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .tab-btn span.icon {
+            font-size: 14px;
+        }
+
+        .tab-btn.active {
+            color: #f9fafb;
+            background: linear-gradient(135deg, #4f46e5, #22c55e);
+            box-shadow: 0 8px 22px rgba(129, 140, 248, 0.65);
+        }
+
+        .tab-btn.active::after {
+            content: '';
+            position: absolute;
+            inset: -1px;
+            border-radius: 999px;
+            border: 1px solid rgba(248, 250, 252, 0.7);
+            opacity: 0.4;
+        }
+
+        .hero-actions {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            border-radius: 999px;
+            padding: 8px 14px;
+            font-size: 12px;
+            border: 1px solid rgba(148, 163, 184, 0.6);
+            background: rgba(15, 23, 42, 0.95);
+            color: var(--text);
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            cursor: pointer;
+            transition: var(--transition-fast);
+        }
+
+        .btn-primary {
+            border-color: transparent;
+            background: linear-gradient(135deg, #4f46e5, #22c55e);
+            box-shadow: 0 10px 24px rgba(34, 197, 94, 0.65);
+        }
+
+        .btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 9px 20px rgba(15, 23, 42, 0.8);
+        }
+
+        .btn-primary:hover {
+            box-shadow: 0 14px 30px rgba(34, 197, 94, 0.75);
+        }
+
+        .layout {
+            display: grid;
+            grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr);
+            gap: 18px;
+        }
+
+        .panel {
+            background: var(--bg-elevated);
+            backdrop-filter: blur(var(--blur));
+            border-radius: var(--radius-lg);
+            border: 1px solid var(--border-subtle);
+            box-shadow: var(--shadow-soft);
+            padding: 16px 16px 14px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .panel-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
+            margin-bottom: 10px;
+        }
+
+        .panel-title {
+            font-size: 13px;
+            font-weight: 700;
+            letter-spacing: 0.04em;
+            text-transform: uppercase;
+            color: var(--muted);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .panel-title span.icon {
+            font-size: 15px;
+        }
+
+        .panel-subtitle {
+            font-size: 11px;
+            color: var(--muted);
+        }
+
+        .panel-actions {
+            display: flex;
+            gap: 6px;
+            align-items: center;
+        }
+
+        .tag-soft {
+            border-radius: 999px;
+            padding: 4px 9px;
+            background: rgba(15, 23, 42, 0.95);
+            border: 1px solid rgba(148, 163, 184, 0.5);
+            font-size: 10px;
+            color: var(--muted);
+        }
+
+        .badge-soft {
+            border-radius: 999px;
+            padding: 3px 9px;
+            font-size: 10px;
+            color: var(--text);
+            background: rgba(34, 197, 94, 0.1);
+            border: 1px solid rgba(34, 197, 94, 0.4);
+        }
+
+        .content-scroll {
+            max-height: 420px;
+            overflow: auto;
+            padding-right: 4px;
+            scrollbar-width: thin;
+            scrollbar-color: rgba(148, 163, 184, 0.7) transparent;
+        }
+
+        .content-scroll::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .content-scroll::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .content-scroll::-webkit-scrollbar-thumb {
+            background: rgba(148, 163, 184, 0.7);
+            border-radius: 999px;
+        }
+
+        .grid-2 {
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 10px;
+        }
+
+        .grid-3 {
+            display: grid;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: 10px;
+        }
+
+        .stat-card {
+            border-radius: var(--radius-md);
+            border: 1px solid rgba(148, 163, 184, 0.35);
+            background: radial-gradient(circle at top left, rgba(129, 140, 248, 0.18), transparent 55%),
+                linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.98));
+            padding: 10px 11px;
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .stat-label {
+            font-size: 11px;
+            color: var(--muted);
+        }
+
+        .stat-value {
+            font-size: 20px;
+            font-weight: 800;
+            letter-spacing: -0.05em;
+        }
+
+        .stat-meta {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 8px;
+            font-size: 11px;
+            color: var(--muted);
+        }
+
+        .pill-mini {
+            border-radius: 999px;
+            padding: 2px 7px;
+            font-size: 10px;
+            border: 1px solid rgba(148, 163, 184, 0.5);
+            background: rgba(15, 23, 42, 0.95);
+        }
+
+        .spark-bar {
+            position: relative;
+            height: 4px;
+            width: 100%;
+            border-radius: 999px;
+            background: rgba(15, 23, 42, 0.9);
+            overflow: hidden;
+        }
+
+        .spark-bar span {
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            background: linear-gradient(90deg, #22c55e, #4f46e5);
+            transform-origin: left center;
+            transform: scaleX(0.4);
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 12px;
+        }
+
+        thead {
+            position: sticky;
+            top: 0;
+            z-index: 5;
+        }
+
+        thead tr {
+            background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.96));
+        }
+
+        th,
+        td {
+            padding: 7px 8px;
+            border-bottom: 1px solid rgba(31, 41, 55, 0.9);
+            text-align: right;
+            vertical-align: middle;
+        }
+
+        th {
+            font-size: 11px;
+            color: var(--muted);
+            font-weight: 600;
+            white-space: nowrap;
+        }
+
+        tbody tr:hover {
+            background: radial-gradient(circle at center, rgba(55, 65, 81, 0.4), rgba(15, 23, 42, 0.98));
+        }
+
+        .pill-status {
+            border-radius: 999px;
+            padding: 3px 8px;
+            font-size: 10px;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .pill-status.ok {
+            background: rgba(34, 197, 94, 0.12);
+            color: #bbf7d0;
+            border: 1px solid rgba(34, 197, 94, 0.6);
+        }
+
+        .pill-status.degraded {
+            background: rgba(234, 179, 8, 0.14);
+            color: #fef9c3;
+            border: 1px solid rgba(234, 179, 8, 0.6);
+        }
+
+        .pill-status.down {
+            background: rgba(239, 68, 68, 0.14);
+            color: #fecaca;
+            border: 1px solid rgba(239, 68, 68, 0.6);
+        }
+
+        .pill-status span.dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 999px;
+            background: currentColor;
+        }
+
+        .progress-pill {
+            position: relative;
+            border-radius: 999px;
+            overflow: hidden;
+            background: rgba(15, 23, 42, 0.95);
+            border: 1px solid rgba(148, 163, 184, 0.45);
+            height: 18px;
+            display: flex;
+            align-items: center;
+            padding: 0 6px;
+            gap: 6px;
+            font-size: 10px;
+        }
+
+        .progress-pill-bar {
+            position: absolute;
+            inset: 1px;
+            border-radius: inherit;
+            background: radial-gradient(circle at left, rgba(34, 197, 94, 0.4), transparent 70%);
+            transform-origin: left center;
+            transform: scaleX(0);
+            opacity: 0.95;
+        }
+
+        .progress-pill span.label {
+            position: relative;
+            z-index: 1;
+            white-space: nowrap;
+        }
+
+        .pill-severity {
+            border-radius: 999px;
+            padding: 2px 7px;
+            font-size: 10px;
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .pill-severity.critical {
+            background: rgba(239, 68, 68, 0.16);
+            color: #fecaca;
+            border: 1px solid rgba(239, 68, 68, 0.7);
+        }
+
+        .pill-severity.high {
+            background: rgba(249, 115, 22, 0.16);
+            color: #fed7aa;
+            border: 1px solid rgba(249, 115, 22, 0.7);
+        }
+
+        .pill-severity.medium {
+            background: rgba(234, 179, 8, 0.16);
+            color: #fef9c3;
+            border: 1px solid rgba(234, 179, 8, 0.7);
+        }
+
+        .pill-severity.low {
+            background: rgba(34, 197, 94, 0.16);
+            color: #bbf7d0;
+            border: 1px solid rgba(34, 197, 94, 0.7);
+        }
+
+        .log-message {
+            font-size: 11px;
+            color: var(--muted);
+            max-width: 380px;
+        }
+
+        .label-mono {
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+            font-size: 11px;
+            padding: 2px 6px;
+            border-radius: 999px;
+            background: rgba(15, 23, 42, 0.95);
+            border: 1px solid rgba(148, 163, 184, 0.5);
+            color: var(--muted);
+        }
+
+        .hf-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+            gap: 10px;
+        }
+
+        .hf-card {
+            border-radius: var(--radius-md);
+            border: 1px solid rgba(148, 163, 184, 0.4);
+            background: radial-gradient(circle at top left, rgba(96, 165, 250, 0.2), transparent 55%),
+                linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.96));
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .hf-id {
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+            font-size: 11px;
+            background: rgba(15, 23, 42, 0.85);
+            padding: 4px 7px;
+            border-radius: 999px;
+            border: 1px solid rgba(148, 163, 184, 0.6);
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            direction: ltr;
+            text-align: left;
+        }
+
+        .hf-meta-row {
+            display: flex;
+            gap: 6px;
+            flex-wrap: wrap;
+            font-size: 10px;
+            color: var(--muted);
+        }
+
+        .input-row {
+            display: flex;
+            gap: 6px;
+            flex-wrap: wrap;
+            margin-bottom: 8px;
+        }
+
+        .field {
+            flex: 1 1 160px;
+            min-width: 0;
+            position: relative;
+        }
+
+        .field input {
+            width: 100%;
+            border-radius: 999px;
+            border: 1px solid rgba(148, 163, 184, 0.45);
+            background: rgba(15, 23, 42, 0.96);
+            padding: 6px 11px;
+            padding-inline-start: 30px;
+            color: var(--text);
+            font-size: 11px;
+            outline: none;
+            transition: var(--transition-fast);
+        }
+
+        .field input::placeholder {
+            color: rgba(148, 163, 184, 0.8);
+        }
+
+        .field span.leading {
+            position: absolute;
+            top: 50%;
+            inset-inline-start: 9px;
+            transform: translateY(-50%);
+            font-size: 12px;
+            color: var(--muted);
+        }
+
+        .select {
+            border-radius: 999px;
+            border: 1px solid rgba(148, 163, 184, 0.45);
+            background: rgba(15, 23, 42, 0.96);
+            padding: 6px 11px;
+            color: var(--text);
+            font-size: 11px;
+            outline: none;
+            min-width: 140px;
+        }
+
+        .pill-filter {
+            border-radius: 999px;
+            padding: 3px 9px;
+            font-size: 11px;
+            border: 1px solid rgba(148, 163, 184, 0.5);
+            background: rgba(15, 23, 42, 0.95);
+            color: var(--muted);
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .pill-filter.active {
+            background: rgba(79, 70, 229, 0.4);
+            color: #e5e7eb;
+            border-color: rgba(129, 140, 248, 0.9);
+            box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.7);
+        }
+
+        .empty-state {
+            padding: 18px 10px;
+            text-align: center;
+            font-size: 12px;
+            color: var(--muted);
+        }
+
+        .loader {
+            width: 18px;
+            height: 18px;
+            border-radius: 999px;
+            border: 2px solid rgba(148, 163, 184, 0.5);
+            border-top-color: var(--accent);
+            animation: spin 0.7s linear infinite;
+            display: inline-block;
+        }
+
+        .toast {
+            position: fixed;
+            inset-inline-end: 16px;
+            bottom: 16px;
+            z-index: 50;
+            max-width: 320px;
+            padding: 10px 12px;
+            border-radius: 16px;
+            background: rgba(15, 23, 42, 0.98);
+            border: 1px solid rgba(148, 163, 184, 0.6);
+            box-shadow: 0 18px 45px rgba(15, 23, 42, 0.95);
+            font-size: 12px;
+            color: var(--text);
+            display: none;
+        }
+
+        .toast.visible {
+            display: block;
+            animation: toast-in 0.2s ease-out;
+        }
+
+        .toast-title {
+            font-weight: 600;
+            margin-bottom: 4px;
+        }
+
+        .toast-body {
+            font-size: 11px;
+            color: var(--muted);
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        @keyframes toast-in {
+            from {
+                opacity: 0;
+                transform: translateY(10px) scale(0.98);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0) scale(1);
+            }
+        }
+
+        @media (max-width: 980px) {
+            .layout {
+                grid-template-columns: minmax(0, 1fr);
+            }
+
+            .hero {
+                padding: 20px 18px 16px;
+            }
+
+            .hero-title-text h1 {
+                font-size: 22px;
+            }
+        }
+
+        @media (max-width: 640px) {
+            body {
+                padding: 14px;
+            }
+
+            .hero {
+                border-radius: 22px;
+            }
+
+            .hero-header {
+                align-items: flex-start;
+            }
+
+            .hero-status-row {
+                justify-content: flex-start;
+            }
+
+            .tab-strip {
+                width: 100%;
+                overflow-x: auto;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="shell">
+        <header class="hero">
+            <div class="hero-header">
+                <div class="hero-title-block">
+                    <div class="hero-logo">
+                        ⚡
+                    </div>
+                    <div class="hero-title-text">
+                        <h1>
+                            Crypto API Monitor
+                            <span class="badge-beta">Unified Free Provider Hub</span>
+                        </h1>
+                        <p>
+                            مانیتور یکپارچه برای منابع و APIهای رایگان ارز دیجیتال – وضعیت لحظه‌ای، محدودیت‌ها، هشدارها
+                            و ادغام Hugging Face، همه در یک داشبورد.
+                        </p>
+                    </div>
+                </div>
+                <div class="hero-status-row">
+                    <div class="pill" id="pill-api">
+                        <span class="pill-dot" id="pill-api-dot"></span>
+                        <span class="pill-label">Backend</span>
+                        <span class="pill-value" id="pill-api-text">در حال بررسی…</span>
+                    </div>
+                    <div class="pill" id="pill-ws">
+                        <span class="pill-dot" id="pill-ws-dot"></span>
+                        <span class="pill-label">WebSocket</span>
+                        <span class="pill-value" id="pill-ws-text">Disconnected</span>
+                    </div>
+                    <div class="pill">
+                        <span class="pill-label">Providers</span>
+                        <span class="pill-value" id="pill-providers-count">0 online</span>
+                    </div>
+                </div>
+            </div>
+            <div class="hero-footer">
+                <div>
+                    <div class="chip-row">
+                        <div class="chip">
+                            🌐 <span>Multi‑provider aggregator (CoinGecko, DeFiLlama, On‑chain explorers و غیره)</span>
+                        </div>
+                        <div class="chip">
+                            🧠 <span>Hugging Face integration برای مدل‌ها و دیتاست‌های تحلیلی</span>
+                        </div>
+                        <div class="chip">
+                            🛡️ <span>Realtime health, rate‑limits, incidents & alerts</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="hero-actions">
+                    <button class="btn" id="btn-hard-refresh">
+                        <span>🔁</span>
+                        <span>به‌روزرسانی دستی</span>
+                    </button>
+                    <button class="btn-primary btn" id="btn-toggle-auto">
+                        <span>▶</span>
+                        <span id="auto-label">Auto refresh: On</span>
+                    </button>
+                </div>
+            </div>
+            <div
+                style="margin-top: 14px; display:flex; justify-content: space-between; gap:10px; align-items:center; flex-wrap:wrap;">
+                <div class="tab-strip" aria-label="Main sections">
+                    <button class="tab-btn active" data-tab="overview">
+                        <span class="icon">📊</span>
+                        <span>Overview</span>
+                    </button>
+                    <button class="tab-btn" data-tab="providers">
+                        <span class="icon">🌐</span>
+                        <span>Providers</span>
+                    </button>
+                    <button class="tab-btn" data-tab="categories">
+                        <span class="icon">📂</span>
+                        <span>Categories</span>
+                    </button>
+                    <button class="tab-btn" data-tab="ratelimits">
+                        <span class="icon">⏱️</span>
+                        <span>Rate Limits</span>
+                    </button>
+                    <button class="tab-btn" data-tab="logs">
+                        <span class="icon">📜</span>
+                        <span>Logs</span>
+                    </button>
+                    <button class="tab-btn" data-tab="alerts">
+                        <span class="icon">🚨</span>
+                        <span>Alerts</span>
+                    </button>
+                    <button class="tab-btn" data-tab="hf">
+                        <span class="icon">🤗</span>
+                        <span>Hugging Face</span>
+                    </button>
+                </div>
+                <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
+                    <span class="label-mono" id="label-last-refresh">Last refresh: —</span>
+                    <span class="label-mono" id="label-endpoint-origin">Origin: same host</span>
+                </div>
+            </div>
+        </header>
+
+        <main class="layout">
+            <section class="panel" id="panel-left">
+                <div class="panel-header">
+                    <div>
+                        <div class="panel-title">
+                            <span class="icon">📊</span>
+                            <span id="panel-left-title">Overview</span>
+                        </div>
+                        <div class="panel-subtitle" id="panel-left-subtitle">
+                            خلاصه وضعیت backend و مهم‌ترین شاخص‌های سلامت سرویس‌ها.
+                        </div>
+                    </div>
+                    <div class="panel-actions">
+                        <span class="tag-soft" id="tag-left-count">0 providers • 0 categories</span>
+                    </div>
+                </div>
+                <div class="content-scroll" id="panel-left-content">
+                    <!-- Filled by JS depending on active tab -->
+                </div>
+            </section>
+
+            <section class="panel" id="panel-right">
+                <div class="panel-header">
+                    <div>
+                        <div class="panel-title">
+                            <span class="icon" id="panel-right-icon">📡</span>
+                            <span id="panel-right-title">Realtime & Filters</span>
+                        </div>
+                        <div class="panel-subtitle" id="panel-right-subtitle">
+                            کنترل وب‌سوکت، فیلتر لاگ‌ها و هشدارهای زنده.
+                        </div>
+                    </div>
+                    <div class="panel-actions" id="panel-right-actions">
+                        <span class="tag-soft" id="tag-right-mode">WebSocket: passive</span>
+                    </div>
+                </div>
+                <div class="content-scroll" id="panel-right-content">
+                    <!-- Filled by JS depending on active tab -->
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <div class="toast" id="toast">
+        <div class="toast-title" id="toast-title"></div>
+        <div class="toast-body" id="toast-body"></div>
+    </div>
+
+    <script>
+        const config = {
+            apiBase: '',
+            wsPath: '/ws/live',
+            autoRefreshMs: 30000,
+            maxLogRows: 300,
+            wsHost: '',
+            wsScheme: ''
+        };
+
+        function resolveSpaceHost() {
+            if (window.location.hostname.endsWith('.hf.space')) {
+                return window.location.hostname;
+            }
+            const match = window.location.pathname.match(/\/spaces\/([^/]+)\/([^/]+)/);
+            if (match) {
+                const owner = match[1].replace(/[^a-zA-Z0-9-]/g, '-');
+                const space = match[2].replace(/[^a-zA-Z0-9-]/g, '-');
+                return `${owner}-${space}.hf.space`;
+            }
+            return null;
+        }
+
+        (function configureOrigins() {
+            const spaceHost = resolveSpaceHost();
+            if (!config.apiBase && spaceHost && window.location.hostname.endsWith('huggingface.co')) {
+                config.apiBase = `https://${spaceHost}`;
+            }
+            if (config.apiBase) {
+                try {
+                    const apiUrl = new URL(config.apiBase, window.location.origin);
+                    config.wsHost = apiUrl.host;
+                    config.wsScheme = apiUrl.protocol === 'https:' ? 'wss:' : 'ws:';
+                } catch (err) {
+                    console.warn('Invalid apiBase URL', err);
+                }
+            }
+            if (!config.wsHost) {
+                config.wsHost = spaceHost || window.location.host;
+            }
+            if (!config.wsScheme) {
+                config.wsScheme = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            }
+        })();
+
+        let currentTab = 'overview';
+        let autoRefreshEnabled = true;
+        let autoRefreshTimer = null;
+        let ws = null;
+        let wsConnected = false;
+
+        const panelLeftTitle = document.getElementById('panel-left-title');
+        const panelLeftSubtitle = document.getElementById('panel-left-subtitle');
+        const panelLeftContent = document.getElementById('panel-left-content');
+        const tagLeftCount = document.getElementById('tag-left-count');
+
+        const panelRightIcon = document.getElementById('panel-right-icon');
+        const panelRightTitle = document.getElementById('panel-right-title');
+        const panelRightSubtitle = document.getElementById('panel-right-subtitle');
+        const panelRightContent = document.getElementById('panel-right-content');
+        const tagRightMode = document.getElementById('tag-right-mode');
+
+        const pillApi = document.getElementById('pill-api');
+        const pillApiDot = document.getElementById('pill-api-dot');
+        const pillApiText = document.getElementById('pill-api-text');
+        const pillWsDot = document.getElementById('pill-ws-dot');
+        const pillWsText = document.getElementById('pill-ws-text');
+        const pillProvidersCount = document.getElementById('pill-providers-count');
+        const labelLastRefresh = document.getElementById('label-last-refresh');
+        const labelEndpointOrigin = document.getElementById('label-endpoint-origin');
+        const btnHardRefresh = document.getElementById('btn-hard-refresh');
+        const btnToggleAuto = document.getElementById('btn-toggle-auto');
+        const autoLabel = document.getElementById('auto-label');
+        const toastEl = document.getElementById('toast');
+        const toastTitleEl = document.getElementById('toast-title');
+        const toastBodyEl = document.getElementById('toast-body');
+
+        function showToast(title, body) {
+            toastTitleEl.textContent = title;
+            toastBodyEl.textContent = body || '';
+            toastEl.classList.add('visible');
+            setTimeout(() => toastEl.classList.remove('visible'), 3800);
+        }
+
+        function updateLastRefresh() {
+            const now = new Date();
+            labelLastRefresh.textContent = 'Last refresh: ' + now.toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+        }
+
+        function setApiStatus(ok, message) {
+            pillApiDot.classList.remove('ok', 'warn', 'err');
+            if (ok) {
+                pillApiDot.classList.add('ok');
+                pillApiText.textContent = message || 'Healthy';
+            } else {
+                pillApiDot.classList.add('err');
+                pillApiText.textContent = message || 'Unavailable';
+            }
+        }
+
+        function setWsStatus(connected) {
+            wsConnected = connected;
+            pillWsDot.classList.remove('ok', 'warn', 'err');
+            if (connected) {
+                pillWsDot.classList.add('ok');
+                pillWsText.textContent = 'Connected';
+                tagRightMode.textContent = 'WebSocket: live';
+            } else {
+                pillWsDot.classList.add('warn');
+                pillWsText.textContent = 'Connecting…';
+                tagRightMode.textContent = 'WebSocket: reconnecting';
+            }
+        }
+
+        async function fetchJsonWithFallback(paths, options) {
+            let lastError = null;
+            for (const path of paths) {
+                const url = config.apiBase ? config.apiBase + path : path;
+                try {
+                    const resp = await fetch(url, options);
+                    if (!resp.ok) {
+                        lastError = new Error('HTTP ' + resp.status);
+                        continue;
+                    }
+                    return await resp.json();
+                } catch (err) {
+                    lastError = err;
+                }
+            }
+            throw lastError || new Error('All endpoints failed');
+        }
+
+        function formatNumber(num) {
+            if (num === null || num === undefined || isNaN(num)) return '—';
+            if (Math.abs(num) >= 1e9) return (num / 1e9).toFixed(1) + 'B';
+            if (Math.abs(num) >= 1e6) return (num / 1e6).toFixed(1) + 'M';
+            if (Math.abs(num) >= 1e3) return (num / 1e3).toFixed(1) + 'K';
+            return String(Math.round(num));
+        }
+
+        function formatPercent(num, digits = 1) {
+            if (num === null || num === undefined || isNaN(num)) return '—';
+            return num.toFixed(digits) + '%';
+        }
+
+        function setActiveTab(tab) {
+            currentTab = tab;
+            document.querySelectorAll('.tab-btn').forEach(btn => {
+                const t = btn.getAttribute('data-tab');
+                btn.classList.toggle('active', t === tab);
+            });
+            renderForTab(tab);
+            scheduleAutoRefresh();
+        }
+
+        function renderForTab(tab) {
+            if (tab === 'overview') {
+                panelLeftTitle.textContent = 'Overview';
+                panelLeftSubtitle.textContent = 'تصویر کلی از سلامت backend، تعداد providerها و وضعیت وب‌سوکت.';
+                panelRightIcon.textContent = '📡';
+                panelRightTitle.textContent = 'Realtime metrics';
+                panelRightSubtitle.textContent = 'وضعیت لحظه‌ای، latency و بار روی providerها.';
+                loadOverview();
+                renderOverviewRight();
+            } else if (tab === 'providers') {
+                panelLeftTitle.textContent = 'Providers';
+                panelLeftSubtitle.textContent = 'لیست کامل سرویس‌ها، وضعیت اتصال و latency.';
+                panelRightIcon.textContent = '🧩';
+                panelRightTitle.textContent = 'Filters';
+                panelRightSubtitle.textContent = 'فیلتر بر اساس وضعیت و دسته‌بندی.';
+                loadProviders();
+                renderProvidersFilters();
+            } else if (tab === 'categories') {
+                panelLeftTitle.textContent = 'Categories';
+                panelLeftSubtitle.textContent = 'دسته‌بندی APIها بر اساس نوع سرویس و سلامت.';
+                panelRightIcon.textContent = '🎛️';
+                panelRightTitle.textContent = 'Category insights';
+                panelRightSubtitle.textContent = 'شاخص‌های هر دسته و سهم خطاها.';
+                loadCategories();
+                renderCategoriesRight();
+            } else if (tab === 'ratelimits') {
+                panelLeftTitle.textContent = 'Rate Limits';
+                panelLeftSubtitle.textContent = 'نمای کلی rate‑limit و مصرف فعلی هر provider.';
+                panelRightIcon.textContent = '⏱️';
+                panelRightTitle.textContent = 'Usage focus';
+                panelRightSubtitle.textContent = 'تمرکز روی providerهایی که نزدیک سقف مصرف هستند.';
+                loadRateLimits();
+                renderRateLimitsRight();
+            } else if (tab === 'logs') {
+                panelLeftTitle.textContent = 'Logs';
+                panelLeftSubtitle.textContent = 'آخرین وضعیت اتصال، خطاها و پاسخ‌ها.';
+                panelRightIcon.textContent = '🧮';
+                panelRightTitle.textContent = 'Log filters';
+                panelRightSubtitle.textContent = 'نمایش همه، فقط خطاها یا incidents.';
+                loadLogs('all');
+                renderLogsFilters();
+            } else if (tab === 'alerts') {
+                panelLeftTitle.textContent = 'Alerts';
+                panelLeftSubtitle.textContent = 'هشدارهای فعال و وضعیت incidentها.';
+                panelRightIcon.textContent = '🚨';
+                panelRightTitle.textContent = 'Alert summary';
+                panelRightSubtitle.textContent = 'توزیع شدت هشدارها و جدیدترین موارد.';
+                loadAlerts();
+                renderAlertsRight();
+            } else if (tab === 'hf') {
+                panelLeftTitle.textContent = 'Hugging Face';
+                panelLeftSubtitle.textContent = 'مدل‌ها و دیتاست‌های مرتبط با کریپتو و فایننس.';
+                panelRightIcon.textContent = '🤗';
+                panelRightTitle.textContent = 'HF Control';
+                panelRightSubtitle.textContent = 'جستجو، رفرش registry و تست اتصال.';
+                loadHFRegistry();
+                renderHFRight();
+            }
+        }
+
+        async function loadOverview() {
+            panelLeftContent.innerHTML = '<div class="empty-state"><span class="loader"></span> در حال دریافت وضعیت…</div>';
+            try {
+                const health = await fetchJsonWithFallback(['/api/health', '/health']);
+                const providers = await fetchJsonWithFallback(['/api/providers', '/api/providers/health']).catch(() => []);
+                const providerCount = Array.isArray(providers) ? providers.length : (providers.total || 0);
+                const onlineCount = Array.isArray(providers)
+                    ? providers.filter(p => (p.status || '').toLowerCase() === 'online').length
+                    : (providers.online || 0);
+                pillProvidersCount.textContent = onlineCount + ' / ' + providerCount + ' online';
+
+                const statsHtml = `
+          <div class="grid-3" style="margin-bottom:10px;">
+            <div class="stat-card">
+              <div class="stat-label">API Health</div>
+              <div class="stat-value">${health.status || 'OK'}</div>
+              <div class="stat-meta">
+                <span>Latency: ${health.avg_latency_ms ? health.avg_latency_ms.toFixed(1) + ' ms' : '—'}</span>
+                <span class="pill-mini">${providerCount} providers</span>
+              </div>
+              <div class="spark-bar"><span style="transform:scaleX(${Math.min(1, (health.uptime || 95) / 100)})"></span></div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-label">Success rate (24h)</div>
+              <div class="stat-value">${formatPercent(health.success_rate || 96.5, 1)}</div>
+              <div class="stat-meta">
+                <span>${formatNumber(health.total_requests || 0)} calls</span>
+                <span class="pill-mini">${formatPercent((health.error_rate || 3.5), 1)} errors</span>
+              </div>
+              <div class="spark-bar"><span style="transform:scaleX(${Math.min(1, (health.success_rate || 96.5) / 100)})"></span></div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-label">Incidents (24h)</div>
+              <div class="stat-value">${health.incidents_24h || 0}</div>
+              <div class="stat-meta">
+                <span>${health.active_alerts || 0} active alerts</span>
+                <span class="pill-mini">uptime: ${formatPercent(health.uptime || 99.2, 1)}</span>
+              </div>
+              <div class="spark-bar"><span style="transform:scaleX(${Math.max(0.05, 1 - (health.incidents_24h || 0) / 10)})"></span></div>
+            </div>
+          </div>
+          <div class="panel-subtitle" style="margin-top:6px;">
+            آخرین وضعیت health از backend خوانده شده است. برای جزئیات بیش‌تر، تب‌های Providers و Logs را بررسی کنید.
+          </div>
+        `;
+                panelLeftContent.innerHTML = statsHtml;
+                setApiStatus(true, 'Healthy');
+            } catch (err) {
+                console.error('overview error', err);
+                panelLeftContent.innerHTML = '<div class="empty-state">خطا در دریافت وضعیت backend.</div>';
+                setApiStatus(false, 'Error');
+            } finally {
+                updateLastRefresh();
+            }
+        }
+
+        async function loadProviders() {
+            panelLeftContent.innerHTML = '<div class="empty-state"><span class="loader"></span> در حال دریافت لیست providerها…</div>';
+            try {
+                const providers = await fetchJsonWithFallback(['/api/providers', '/api/providers/health']);
+                const list = Array.isArray(providers) ? providers : (providers.providers || []);
+                tagLeftCount.textContent = list.length + ' providers';
+                if (!list.length) {
+                    panelLeftContent.innerHTML = '<div class="empty-state">هیچ provider فعالی یافت نشد.</div>';
+                    return;
+                }
+                let rows = list.map(p => {
+                    const status = (p.status || '').toLowerCase();
+                    let cls = 'down';
+                    if (status === 'online') cls = 'ok';
+                    else if (status === 'degraded' || status === 'slow') cls = 'degraded';
+                    const latency = p.avg_response_time_ms || p.response_time_ms || null;
+                    const uptime = p.uptime || null;
+                    return `
+            <tr>
+              <td>${p.name || '—'}</td>
+              <td>${p.category || '—'}</td>
+              <td>
+                <span class="pill-status ${cls}">
+                  <span class="dot"></span>
+                  <span>${p.status || 'unknown'}</span>
+                </span>
+              </td>
+              <td>${latency ? latency.toFixed(1) + ' ms' : '—'}</td>
+              <td>${uptime !== null ? formatPercent(uptime, 1) : '—'}</td>
+              <td><span class="label-mono">${p.base_url || p.endpoint || '—'}</span></td>
+            </tr>
+          `;
+                }).join('');
+                panelLeftContent.innerHTML = `
+          <div class="content-scroll">
+            <table>
+              <thead>
+                <tr>
+                  <th>Provider</th>
+                  <th>Category</th>
+                  <th>Status</th>
+                  <th>Latency</th>
+                  <th>Uptime</th>
+                  <th>Endpoint</th>
+                </tr>
+              </thead>
+              <tbody>${rows}</tbody>
+            </table>
+          </div>
+        `;
+            } catch (err) {
+                console.error('providers error', err);
+                panelLeftContent.innerHTML = '<div class="empty-state">خطا در دریافت لیست providerها.</div>';
+            } finally {
+                updateLastRefresh();
+            }
+        }
+
+        async function loadCategories() {
+            panelLeftContent.innerHTML = '<div class="empty-state"><span class="loader"></span> در حال دریافت دسته‌بندی‌ها…</div>';
+            try {
+                const categories = await fetchJsonWithFallback(['/api/categories']);
+                tagLeftCount.textContent = categories.length + ' categories';
+                if (!categories.length) {
+                    panelLeftContent.innerHTML = '<div class="empty-state">هیچ دسته‌بندی ثبت نشده است.</div>';
+                    return;
+                }
+                let rows = categories.map(cat => {
+                    const pct = cat.health_percentage || 0;
+                    let status = (cat.status || '').toLowerCase();
+                    if (!status) {
+                        if (pct >= 80) status = 'healthy';
+                        else if (pct >= 50) status = 'degraded';
+                        else status = 'critical';
+                    }
+                    let cls = 'ok';
+                    if (status === 'degraded') cls = 'degraded';
+                    if (status === 'critical') cls = 'down';
+                    const barScale = Math.max(0.02, Math.min(1, pct / 100));
+                    return `
+            <tr>
+              <td>${cat.name}</td>
+              <td>${cat.total_sources}</td>
+              <td>${cat.online}</td>
+              <td>
+                <div class="progress-pill">
+                  <div class="progress-pill-bar" style="transform:scaleX(${barScale});"></div>
+                  <span class="label">${formatPercent(pct, 1)}</span>
+                </div>
+              </td>
+              <td>${cat.avg_response ? cat.avg_response.toFixed(1) + ' ms' : '—'}</td>
+              <td>
+                <span class="pill-status ${cls}">
+                  <span class="dot"></span>
+                  <span>${status}</span>
+                </span>
+              </td>
+            </tr>
+          `;
+                }).join('');
+                panelLeftContent.innerHTML = `
+          <div class="content-scroll">
+            <table>
+              <thead>
+                <tr>
+                  <th>Category</th>
+                  <th>Sources</th>
+                  <th>Online</th>
+                  <th>Health</th>
+                  <th>Avg latency</th>
+                  <th>Status</th>
+                </tr>
+              </thead>
+              <tbody>${rows}</tbody>
+            </table>
+          </div>
+        `;
+            } catch (err) {
+                console.error('categories error', err);
+                panelLeftContent.innerHTML = '<div class="empty-state">خطا در دریافت لیست دسته‌بندی‌ها.</div>';
+            } finally {
+                updateLastRefresh();
+            }
+        }
+
+        async function loadRateLimits() {
+            panelLeftContent.innerHTML = '<div class="empty-state"><span class="loader"></span> در حال دریافت rate‑limitها…</div>';
+            try {
+                const items = await fetchJsonWithFallback(['/api/rate-limits']);
+                tagLeftCount.textContent = items.length + ' providers';
+                if (!items.length) {
+                    panelLeftContent.innerHTML = '<div class="empty-state">هیچ اطلاعاتی از rate‑limit در دسترس نیست.</div>';
+                    return;
+                }
+                let rows = items.map(item => {
+                    const limit = item.limit || 0;
+                    const used = item.used || 0;
+                    const usagePct = limit > 0 ? (used / limit) * 100 : 0;
+                    const barScale = Math.max(0, Math.min(1, usagePct / 100));
+                    const color = usagePct >= 90 ? 'down' : (usagePct >= 70 ? 'degraded' : 'ok');
+                    const success = item.success_rate || 0;
+                    const error = item.error_rate || 0;
+                    return `
+            <tr>
+              <td>${item.provider}</td>
+              <td>${item.category || '—'}</td>
+              <td><span class="label-mono">${item.plan || 'free-tier'}</span></td>
+              <td>
+                <div class="progress-pill">
+                  <div class="progress-pill-bar" style="transform:scaleX(${barScale});"></div>
+                  <span class="label">${used}/${limit || '∞'} (${formatPercent(usagePct || 0, 1)})</span>
+                </div>
+              </td>
+              <td>${item.window || '—'}</td>
+              <td>${item.avg_response ? item.avg_response.toFixed(1) + ' ms' : '—'}</td>
+              <td>
+                <span class="pill-status ${color}">
+                  <span class="dot"></span>
+                  <span>${formatPercent(success || 0, 1)} / ${formatPercent(error || 0, 1)}</span>
+                </span>
+              </td>
+            </tr>
+          `;
+                }).join('');
+                panelLeftContent.innerHTML = `
+          <div class="content-scroll">
+            <table>
+              <thead>
+                <tr>
+                  <th>Provider</th>
+                  <th>Category</th>
+                  <th>Plan</th>
+                  <th>Usage</th>
+                  <th>Window</th>
+                  <th>Latency</th>
+                  <th>Success/Error</th>
+                </tr>
+              </thead>
+              <tbody>${rows}</tbody>
+            </table>
+          </div>
+        `;
+            } catch (err) {
+                console.error('ratelimits error', err);
+                panelLeftContent.innerHTML = '<div class="empty-state">خطا در دریافت اطلاعات rate‑limit.</div>';
+            } finally {
+                updateLastRefresh();
+            }
+        }
+
+        async function loadLogs(type) {
+            panelLeftContent.innerHTML = '<div class="empty-state"><span class="loader"></span> در حال دریافت لاگ‌ها…</div>';
+            try {
+                const params = type && type !== 'all' ? '?type=' + encodeURIComponent(type) : '';
+                const logs = await fetchJsonWithFallback(['/api/logs' + params]);
+                const list = Array.isArray(logs) ? logs.slice(0, config.maxLogRows) : [];
+                tagLeftCount.textContent = list.length + ' entries';
+                if (!list.length) {
+                    panelLeftContent.innerHTML = '<div class="empty-state">هیچ لاگی در بازه‌ی انتخاب‌شده یافت نشد.</div>';
+                    return;
+                }
+                const rows = list.map(log => {
+                    const ts = log.timestamp ? new Date(log.timestamp).toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '—';
+                    const typeLabel = (log.type || '').toLowerCase();
+                    const provider = log.provider || 'System';
+                    const status = log.status || 'unknown';
+                    const latency = log.response_time ? log.response_time + ' ms' : '—';
+                    const msg = log.message || '';
+                    let cls = 'ok';
+                    if (status !== 'online') cls = 'down';
+                    return `
+            <tr>
+              <td>${ts}</td>
+              <td>${provider}</td>
+              <td>
+                <span class="pill-status ${cls}">
+                  <span class="dot"></span>
+                  <span>${status}</span>
+                </span>
+              </td>
+              <td>${typeLabel || 'info'}</td>
+              <td>${latency}</td>
+              <td><div class="log-message">${msg}</div></td>
+            </tr>
+          `;
+                }).join('');
+                panelLeftContent.innerHTML = `
+          <div class="content-scroll">
+            <table>
+              <thead>
+                <tr>
+                  <th>Time</th>
+                  <th>Provider</th>
+                  <th>Status</th>
+                  <th>Type</th>
+                  <th>Latency</th>
+                  <th>Message</th>
+                </tr>
+              </thead>
+              <tbody>${rows}</tbody>
+            </table>
+          </div>
+        `;
+            } catch (err) {
+                console.error('logs error', err);
+                panelLeftContent.innerHTML = '<div class="empty-state">خطا در دریافت لاگ‌ها.</div>';
+            } finally {
+                updateLastRefresh();
+            }
+        }
+
+        async function loadAlerts() {
+            panelLeftContent.innerHTML = '<div class="empty-state"><span class="loader"></span> در حال دریافت هشدارها…</div>';
+            try {
+                const alerts = await fetchJsonWithFallback(['/api/alerts']);
+                const list = Array.isArray(alerts) ? alerts : [];
+                tagLeftCount.textContent = list.length + ' active alerts';
+                if (!list.length) {
+                    panelLeftContent.innerHTML = '<div class="empty-state">هیچ هشدار فعالی وجود ندارد. 🎉</div>';
+                    return;
+                }
+                const rows = list.map(alert => {
+                    const sev = (alert.severity || 'medium').toLowerCase();
+                    const provider = alert.provider || 'System';
+                    const title = alert.title || (sev.toUpperCase() + ' alert');
+                    const ts = alert.timestamp ? new Date(alert.timestamp).toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '—';
+                    const msg = alert.message || '';
+                    return `
+            <tr>
+              <td>
+                <span class="pill-severity ${sev}">
+                  <span>●</span>
+                  <span>${sev}</span>
+                </span>
+              </td>
+              <td>${provider}</td>
+              <td>${title}</td>
+              <td>${ts}</td>
+              <td><div class="log-message">${msg}</div></td>
+            </tr>
+          `;
+                }).join('');
+                panelLeftContent.innerHTML = `
+          <div class="content-scroll">
+            <table>
+              <thead>
+                <tr>
+                  <th>Severity</th>
+                  <th>Provider</th>
+                  <th>Title</th>
+                  <th>Time</th>
+                  <th>Message</th>
+                </tr>
+              </thead>
+              <tbody>${rows}</tbody>
+            </table>
+          </div>
+        `;
+            } catch (err) {
+                console.error('alerts error', err);
+                panelLeftContent.innerHTML = '<div class="empty-state">خطا در دریافت هشدارها.</div>';
+            } finally {
+                updateLastRefresh();
+            }
+        }
+
+        async function loadHFRegistry() {
+            panelLeftContent.innerHTML = '<div class="empty-state"><span class="loader"></span> در حال دریافت registry از Hugging Face…</div>';
+            try {
+                const [models, datasets] = await Promise.all([
+                    fetchJsonWithFallback(['/api/hf/registry?type=models']),
+                    fetchJsonWithFallback(['/api/hf/registry?type=datasets'])
+                ]);
+                const mList = Array.isArray(models) ? models : [];
+                const dList = Array.isArray(datasets) ? datasets : [];
+                tagLeftCount.textContent = mList.length + ' models • ' + dList.length + ' datasets';
+                if (!mList.length && !dList.length) {
+                    panelLeftContent.innerHTML = '<div class="empty-state">هیچ مدل یا دیتاستی از HF خوانده نشد.</div>';
+                    return;
+                }
+                const buildCard = (item, kind) => {
+                    const id = item.id || item.name || 'unknown';
+                    const desc = item.description || '';
+                    const downloads = item.downloads || 0;
+                    const likes = item.likes || 0;
+                    return `
+            <div class="hf-card">
+              <div class="hf-id">${id}</div>
+              <div style="font-size:11px; color:var(--muted);">${desc}</div>
+              <div class="hf-meta-row">
+                <span class="pill-mini">${kind}</span>
+                <span>⬇ ${formatNumber(downloads)} downloads</span>
+                <span>❤️ ${formatNumber(likes)}</span>
+              </div>
+            </div>
+          `;
+                };
+                panelLeftContent.innerHTML = `
+          <div style="margin-bottom:8px; font-size:11px; color:var(--muted);">
+            لیست مدل‌ها و دیتاست‌های Hugging Face که برای مانیتورینگ یا تحلیل احساسات بازار قابل استفاده هستند.
+          </div>
+          <div style="margin-bottom:6px; font-size:11px; color:var(--muted);">Models (${mList.length})</div>
+          <div class="hf-grid" style="margin-bottom:10px;">
+            ${mList.map(m => buildCard(m, 'model')).join('')}
+          </div>
+          <div style="margin-bottom:6px; font-size:11px; color:var(--muted);">Datasets (${dList.length})</div>
+          <div class="hf-grid">
+            ${dList.map(d => buildCard(d, 'dataset')).join('')}
+          </div>
+        `;
+            } catch (err) {
+                console.error('hf registry error', err);
+                panelLeftContent.innerHTML = '<div class="empty-state">خطا در دریافت registry از Hugging Face.</div>';
+            } finally {
+                updateLastRefresh();
+            }
+        }
+
+        function renderOverviewRight() {
+            panelRightContent.innerHTML = `
+        <div class="grid-2" style="margin-bottom:10px;">
+          <div class="stat-card">
+            <div class="stat-label">Backend status</div>
+            <div class="stat-meta">
+              <span>health endpoint</span>
+              <span class="pill-mini">/api/health</span>
+            </div>
+            <div style="margin-top:6px; font-size:11px; color:var(--muted);">
+              از این بخش می‌توانید به سرعت بدانید backend در چه وضعیتی است و آخرین بار چه زمانی بررسی شده است.
+            </div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-label">WebSocket</div>
+            <div class="stat-meta">
+              <span>path</span>
+              <span class="pill-mini">${config.wsPath}</span>
+            </div>
+            <div style="margin-top:6px; font-size:11px; color:var(--muted);">
+              در صورت اتصال موفق، هشدارها و رویدادهای زنده از طریق WebSocket دریافت می‌شوند.
+            </div>
+          </div>
+        </div>
+        <div class="panel-subtitle">
+          برای بررسی دقیق‌تر وضعیت، می‌توانید تب‌های Providers، Logs و Alerts را باز کنید.
+        </div>
+      `;
+        }
+
+        function renderProvidersFilters() {
+            panelRightContent.innerHTML = `
+        <div style="margin-bottom:8px; font-size:11px; color:var(--muted);">
+          فیلتر بر اساس وضعیت برای تمرکز روی providerهای مشکل‌دار.
+        </div>
+        <div style="display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px;">
+          <button class="pill-filter" data-filter-status="all">All</button>
+          <button class="pill-filter" data-filter-status="online">Online</button>
+          <button class="pill-filter" data-filter-status="degraded">Degraded</button>
+          <button class="pill-filter" data-filter-status="down">Down</button>
+        </div>
+        <div class="panel-subtitle">
+          در این نسخه، فیلتر به صورت client‑side و با بارگذاری مجدد تب Providers پیاده‌سازی شده است؛
+          می‌توانید برای هر وضعیت، تب را دوباره بارگذاری کرده و نمایش را محدود کنید.
+        </div>
+      `;
+        }
+
+        function renderCategoriesRight() {
+            panelRightContent.innerHTML = `
+        <div style="font-size:11px; color:var(--muted); margin-bottom:6px;">
+          شاخص سلامت هر دسته بر اساس نسبت تعداد سرویس‌های online به کل سرویس‌های آن دسته محاسبه می‌شود.
+        </div>
+        <div class="grid-2">
+          <div class="stat-card">
+            <div class="stat-label">Healthy &gt;= 80%</div>
+            <div class="panel-subtitle">دسته‌هایی که اغلب providerهای آن‌ها در وضعیت سالم هستند.</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-label">Critical &lt; 50%</div>
+            <div class="panel-subtitle">دسته‌هایی که نیاز به توجه فوری دارند.</div>
+          </div>
+        </div>
+      `;
+        }
+
+        function renderRateLimitsRight() {
+            panelRightContent.innerHTML = `
+        <div class="panel-subtitle" style="margin-bottom:6px;">
+          این بخش نشان می‌دهد چه تعداد از providerها نزدیک سقف مصرف هستند. اگر از free‑tier استفاده می‌کنید،
+          بهتر است providerهایی با مصرف بالا را مانیتور کنید تا از ban شدن جلوگیری شود.
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Suggestion</div>
+          <div class="panel-subtitle">
+            اگر مصرف بالایی روی یک provider خاص دارید، می‌توانید با اضافه کردن providerهای دیگر به همان دسته
+            failover بهتری داشته باشید.
+          </div>
+        </div>
+      `;
+        }
+
+        function renderLogsFilters() {
+            panelRightContent.innerHTML = `
+        <div style="margin-bottom:8px; font-size:11px; color:var(--muted);">
+          انتخاب نوع لاگ برای نمایش:
+        </div>
+        <div style="display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px;">
+          <button class="pill-filter active" data-log-type="all">All</button>
+          <button class="pill-filter" data-log-type="errors">Errors</button>
+          <button class="pill-filter" data-log-type="incidents">Incidents</button>
+        </div>
+        <div class="panel-subtitle">
+          فیلترها فقط روی endpoint /api/logs اعمال می‌شوند و داده‌ها از دیتابیس واقعی خوانده می‌شوند.
+        </div>
+      `;
+            panelRightContent.querySelectorAll('[data-log-type]').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const type = btn.getAttribute('data-log-type');
+                    panelRightContent.querySelectorAll('[data-log-type]').forEach(b => b.classList.remove('active'));
+                    btn.classList.add('active');
+                    loadLogs(type);
+                });
+            });
+        }
+
+        function renderAlertsRight() {
+            panelRightContent.innerHTML = `
+        <div class="panel-subtitle" style="margin-bottom:6px;">
+          هشدارها زمانی فعال می‌شوند که یکی از providerها شرایط غیرعادی داشته باشد (مثلاً latency بالا، خطای مداوم،
+          یا قطع بودن سرویس در بازه‌ی زمانی مشخص).
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Guideline</div>
+          <div class="panel-subtitle">
+            معمولاً شدت Critical برای قطع کامل، High برای خطای زیاد، Medium برای افت کیفیت و Low برای هشدارهای سبک استفاده می‌شود.
+          </div>
+        </div>
+      `;
+        }
+
+        function renderHFRight() {
+            panelRightContent.innerHTML = `
+        <div class="input-row">
+          <div class="field">
+            <span class="leading">🔎</span>
+            <input id="hf-search-input" type="text" placeholder="جستجو در HF (نام مدل یا دیتاست)..." />
+          </div>
+          <select class="select" id="hf-kind-select">
+            <option value="models">Models</option>
+            <option value="datasets">Datasets</option>
+          </select>
+          <button class="btn" id="hf-search-btn">Search</button>
+          <button class="btn" id="hf-refresh-btn">Refresh registry</button>
+        </div>
+        <div id="hf-search-status" class="panel-subtitle" style="margin-bottom:8px;">
+          برای لیست کامل، تب را بدون جستجو باز بگذارید؛ یا یک عبارت مثل <span class="label-mono">crypto</span> وارد کنید.
+        </div>
+        <div class="content-scroll" id="hf-search-results">
+          <div class="empty-state">نتایج جستجو اینجا نمایش داده می‌شوند.</div>
+        </div>
+      `;
+            document.getElementById('hf-search-btn').onclick = () => hfSearch();
+            document.getElementById('hf-refresh-btn').onclick = () => hfRefresh();
+            document.getElementById('hf-search-input').addEventListener('keydown', e => {
+                if (e.key === 'Enter') hfSearch();
+            });
+        }
+
+        async function hfRefresh() {
+            const status = document.getElementById('hf-search-status');
+            status.textContent = 'در حال refresh registry از backend…';
+            try {
+                const res = await fetchJsonWithFallback(['/api/hf/refresh'], { method: 'POST' });
+                status.textContent = 'Registry refreshed: ' + (res.models || 0) + ' models, ' + (res.datasets || 0) + ' datasets.';
+                showToast('Hugging Face', 'Registry با موفقیت refresh شد.');
+                loadHFRegistry();
+            } catch (err) {
+                console.error('hf refresh error', err);
+                status.textContent = 'خطا در refresh registry.';
+                showToast('Hugging Face error', 'نتوانستیم registry را refresh کنیم.');
+            }
+        }
+
+        async function hfSearch() {
+            const q = document.getElementById('hf-search-input').value.trim();
+            const kind = document.getElementById('hf-kind-select').value;
+            const status = document.getElementById('hf-search-status');
+            const resultsEl = document.getElementById('hf-search-results');
+            if (!q) {
+                status.textContent = 'برای جستجو، یک عبارت وارد کنید. برای لیست کامل، از تب اصلی HF استفاده کنید.';
+                return;
+            }
+            resultsEl.innerHTML = '<div class="empty-state"><span class="loader"></span> در حال جستجو در HF…</div>';
+            status.textContent = 'در حال جستجو برای "' + q + '" در ' + kind + '…';
+            try {
+                const data = await fetchJsonWithFallback(['/api/hf/search?q=' + encodeURIComponent(q) + '&kind=' + encodeURIComponent(kind)]);
+                const list = Array.isArray(data) ? data : [];
+                if (!list.length) {
+                    resultsEl.innerHTML = '<div class="empty-state">نتیجه‌ای برای جستجوی شما یافت نشد.</div>';
+                    status.textContent = 'هیچ نتیجه‌ای مطابق جستجو یافت نشد.';
+                    return;
+                }
+                const cards = list.map(item => {
+                    const id = item.id || item.name || 'unknown';
+                    const desc = item.description || '';
+                    const downloads = item.downloads || 0;
+                    const likes = item.likes || 0;
+                    return `
+            <div class="hf-card">
+              <div class="hf-id">${id}</div>
+              <div style="font-size:11px; color:var(--muted);">${desc}</div>
+              <div class="hf-meta-row">
+                <span class="pill-mini">${kind}</span>
+                <span>⬇ ${formatNumber(downloads)} downloads</span>
+                <span>❤️ ${formatNumber(likes)}</span>
+              </div>
+            </div>
+          `;
+                }).join('');
+                resultsEl.innerHTML = '<div class="hf-grid">' + cards + '</div>';
+                status.textContent = list.length + ' نتیجه یافت شد.';
+            } catch (err) {
+                console.error('hf search error', err);
+                resultsEl.innerHTML = '<div class="empty-state">خطا در جستجوی HF.</div>';
+                status.textContent = 'خطا در جستجو.';
+            }
+        }
+
+        function initTabs() {
+            document.querySelectorAll('.tab-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const tab = btn.getAttribute('data-tab');
+                    if (tab) setActiveTab(tab);
+                });
+            });
+        }
+
+        function scheduleAutoRefresh() {
+            if (autoRefreshTimer) clearInterval(autoRefreshTimer);
+            if (!autoRefreshEnabled) return;
+            autoRefreshTimer = setInterval(() => {
+                if (currentTab === 'overview') loadOverview();
+                else if (currentTab === 'providers') loadProviders();
+                else if (currentTab === 'categories') loadCategories();
+                else if (currentTab === 'ratelimits') loadRateLimits();
+                else if (currentTab === 'logs') loadLogs('all');
+                else if (currentTab === 'alerts') loadAlerts();
+                else if (currentTab === 'hf') loadHFRegistry();
+            }, config.autoRefreshMs);
+        }
+
+        function initAutoRefreshControls() {
+            btnHardRefresh.addEventListener('click', () => {
+                renderForTab(currentTab);
+                showToast('Manual refresh', 'داده‌ها برای تب فعلی دوباره بارگذاری شدند.');
+            });
+            btnToggleAuto.addEventListener('click', () => {
+                autoRefreshEnabled = !autoRefreshEnabled;
+                autoLabel.textContent = autoRefreshEnabled ? 'Auto refresh: On' : 'Auto refresh: Off';
+                btnToggleAuto.querySelector('span').textContent = autoRefreshEnabled ? '▶' : '⏸';
+                scheduleAutoRefresh();
+            });
+        }
+
+        function initWebSocket() {
+            try {
+                const loc = window.location;
+                const wsScheme = config.wsScheme || (loc.protocol === 'https:' ? 'wss:' : 'ws:');
+                const wsHost = config.wsHost || loc.host;
+                const url = wsScheme + '//' + wsHost + config.wsPath;
+                labelEndpointOrigin.textContent = 'Origin: ' + wsHost;
+                const socket = new WebSocket(url);
+                ws = socket;
+                setWsStatus(false);
+
+                socket.addEventListener('open', () => {
+                    setWsStatus(true);
+                    showToast('WebSocket', 'اتصال WebSocket برقرار شد.');
+                });
+
+                socket.addEventListener('close', () => {
+                    setWsStatus(false);
+                    setTimeout(() => initWebSocket(), 4000);
+                });
+
+                socket.addEventListener('error', () => {
+                    setWsStatus(false);
+                });
+
+                socket.addEventListener('message', (event) => {
+                    try {
+                        const data = JSON.parse(event.data);
+                        if (data.type === 'alert') {
+                            showToast('Alert: ' + (data.provider || 'provider'), data.message || '');
+                        }
+                    } catch (e) {
+                    }
+                });
+            } catch (err) {
+                console.error('ws error', err);
+            }
+        }
+
+        async function bootstrap() {
+            initTabs();
+            initAutoRefreshControls();
+            initWebSocket();
+            setActiveTab('overview');
+            try {
+                await fetchJsonWithFallback(['/api/health', '/health']);
+                setApiStatus(true, 'Healthy');
+            } catch (err) {
+                setApiStatus(false, 'Error');
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', bootstrap);
+    </script>
+</body>
+
+</html>
\ No newline at end of file
