diff --git "a/templates/index.html" "b/templates/index.html"
--- "a/templates/index.html"
+++ "b/templates/index.html"
@@ -1,1891 +1,3475 @@
 <!DOCTYPE html>
-<html lang="fa" dir="rtl">
+<html lang="en">
 
 <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" />
+    <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>
+    <link rel="stylesheet" href="/static/css/connection-status.css">
+    <script src="/static/js/websocket-client.js"></script>
     <style>
         * {
-            box-sizing: border-box;
             margin: 0;
             padding: 0;
-            font-family: 'Vazirmatn', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+            box-sizing: border-box;
         }
 
         :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;
+            --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 {
-            min-height: 100vh;
+            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 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;
+                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;
         }
 
-        .shell {
-            max-width: 1440px;
+        .container {
+            max-width: 1920px;
             margin: 0 auto;
+            padding: 20px;
+            position: relative;
+            z-index: 1;
         }
 
-        .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;
+        /* 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);
         }
 
-        .hero-header {
+        .header-top {
             display: flex;
-            flex-wrap: wrap;
-            gap: 18px;
             align-items: center;
             justify-content: space-between;
-            margin-bottom: 12px;
+            flex-wrap: wrap;
+            gap: 20px;
+            margin-bottom: 20px;
         }
 
-        .hero-title-block {
+        .logo {
             display: flex;
             align-items: center;
-            gap: 14px;
-            flex-wrap: wrap;
+            gap: 15px;
         }
 
-        .hero-logo {
-            width: 40px;
-            height: 40px;
+        .logo-icon {
+            width: 60px;
+            height: 60px;
+            background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
             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;
+            font-size: 32px;
+            box-shadow: 0 10px 40px rgba(59, 130, 246, 0.4);
+            animation: pulse-glow 3s ease-in-out infinite;
         }
 
-        .hero-title-text h1 {
-            font-size: 26px;
-            font-weight: 800;
-            letter-spacing: -0.03em;
-            display: flex;
-            align-items: center;
-            gap: 8px;
+        @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);
+            }
         }
 
-        .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;
+        .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;
         }
 
-        .hero-title-text p {
-            margin-top: 4px;
-            font-size: 13px;
-            color: var(--muted);
-            max-width: 520px;
+        .logo-text p {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-weight: 500;
         }
 
-        .hero-status-row {
+        .header-actions {
             display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
+            gap: 12px;
             align-items: center;
-            justify-content: flex-end;
+            flex-wrap: wrap;
         }
 
-        .pill {
-            display: inline-flex;
+        .status-badge {
+            display: 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);
+            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;
         }
 
-        .pill-dot.ok {
-            background: #22c55e;
-            box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35);
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            background: var(--accent-green);
+            border-radius: 50%;
+            animation: pulse 2s infinite;
         }
 
-        .pill-dot.warn {
-            background: #eab308;
-            box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.35);
-        }
+        @keyframes pulse {
 
-        .pill-dot.err {
-            background: #ef4444;
-            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35);
-        }
+            0%,
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
 
-        .pill-label {
-            opacity: 0.85;
+            50% {
+                opacity: 0.5;
+                transform: scale(1.2);
+            }
         }
 
-        .pill-value {
-            font-weight: 600;
-            color: var(--text);
+        .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;
         }
 
-        .chip-row {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 8px;
-            margin-top: 10px;
-        }
+        @keyframes blink {
 
-        .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;
-        }
+            0%,
+            50%,
+            100% {
+                opacity: 1;
+            }
 
-        .chip b {
-            color: var(--text);
-            font-weight: 600;
+            25%,
+            75% {
+                opacity: 0.3;
+            }
         }
 
-        .hero-footer {
+        /* Tabs */
+        .tabs {
             display: flex;
-            align-items: center;
-            justify-content: space-between;
+            gap: 10px;
+            margin-bottom: 30px;
             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);
+            border-bottom: 2px solid var(--border);
+            padding-bottom: 10px;
         }
 
-        .tab-btn {
-            border-radius: 999px;
-            padding: 6px 13px;
-            font-size: 12px;
+        .tab {
+            padding: 12px 24px;
+            background: transparent;
             border: none;
+            border-radius: 12px 12px 0 0;
+            color: var(--text-secondary);
+            font-weight: 600;
             cursor: pointer;
-            color: var(--muted);
-            background: transparent;
+            transition: all 0.3s;
+            font-size: 14px;
             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:hover {
+            color: var(--text-primary);
+            background: rgba(255, 255, 255, 0.05);
         }
 
-        .tab-btn.active {
-            color: #f9fafb;
-            background: linear-gradient(135deg, #4f46e5, #22c55e);
-            box-shadow: 0 8px 22px rgba(129, 140, 248, 0.65);
+        .tab.active {
+            color: var(--accent-blue);
+            background: rgba(59, 130, 246, 0.1);
         }
 
-        .tab-btn.active::after {
+        .tab.active::after {
             content: '';
             position: absolute;
-            inset: -1px;
-            border-radius: 999px;
-            border: 1px solid rgba(248, 250, 252, 0.7);
-            opacity: 0.4;
+            bottom: -12px;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
+            border-radius: 2px;
         }
 
-        .hero-actions {
-            display: flex;
-            gap: 8px;
-            flex-wrap: wrap;
+        .tab-content {
+            display: none;
+            animation: fadeIn 0.3s;
         }
 
-        .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);
+        .tab-content.active {
+            display: block;
         }
 
-        .btn-primary {
-            border-color: transparent;
-            background: linear-gradient(135deg, #4f46e5, #22c55e);
-            box-shadow: 0 10px 24px rgba(34, 197, 94, 0.65);
-        }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
 
-        .btn:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 9px 20px rgba(15, 23, 42, 0.8);
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
 
-        .btn-primary:hover {
-            box-shadow: 0 14px 30px rgba(34, 197, 94, 0.75);
+        /* Stats Grid */
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+            gap: 16px;
+            margin-bottom: 24px;
+            align-items: stretch;
         }
 
-        .layout {
-            display: grid;
-            grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr);
-            gap: 18px;
+        @media (min-width: 1280px) {
+            .stats-grid--market {
+                grid-template-columns: repeat(5, minmax(180px, 1fr));
+            }
         }
 
-        .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;
+        .stat-card {
+            background: rgba(17, 24, 39, 0.6);
+            backdrop-filter: blur(10px);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            padding: 20px;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             position: relative;
             overflow: hidden;
-        }
-
-        .panel-header {
             display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 10px;
-            margin-bottom: 10px;
+            flex-direction: column;
+            gap: 12px;
         }
 
-        .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;
+        .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;
         }
 
-        .panel-title span.icon {
-            font-size: 15px;
+        .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);
         }
 
-        .panel-subtitle {
-            font-size: 11px;
-            color: var(--muted);
+        .stat-card:hover::before {
+            transform: scaleX(1);
         }
 
-        .panel-actions {
+        .stat-header {
             display: flex;
-            gap: 6px;
             align-items: center;
+            justify-content: space-between;
+            margin-bottom: 8px;
         }
 
-        .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);
+        .stat-icon {
+            width: 44px;
+            height: 44px;
+            border-radius: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
+            color: var(--accent-blue);
         }
 
-        .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);
+        .stat-icon svg {
+            width: 24px;
+            height: 24px;
+            stroke: currentColor;
+            stroke-width: 1.6;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            fill: none;
         }
 
-        .content-scroll {
-            max-height: 420px;
-            overflow: auto;
-            padding-right: 4px;
-            scrollbar-width: thin;
-            scrollbar-color: rgba(148, 163, 184, 0.7) transparent;
+        .stat-value {
+            font-size: 30px;
+            font-weight: 900;
+            margin-bottom: 0;
+            background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
 
-        .content-scroll::-webkit-scrollbar {
-            width: 6px;
+        .stat-label {
+            font-size: 13px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            font-weight: 600;
         }
 
-        .content-scroll::-webkit-scrollbar-track {
-            background: transparent;
+        .stat-change {
+            font-size: 14px;
+            font-weight: 700;
+            margin-top: 12px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
         }
 
-        .content-scroll::-webkit-scrollbar-thumb {
-            background: rgba(148, 163, 184, 0.7);
-            border-radius: 999px;
+        .stat-change.positive {
+            color: var(--accent-green);
         }
 
-        .grid-2 {
-            display: grid;
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-            gap: 10px;
+        .stat-change.negative {
+            color: var(--accent-red);
         }
 
-        .grid-3 {
-            display: grid;
-            grid-template-columns: repeat(3, minmax(0, 1fr));
-            gap: 10px;
+        /* 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);
         }
 
-        .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;
+        .section-header {
             display: flex;
-            flex-direction: column;
-            gap: 6px;
-        }
-
-        .stat-label {
-            font-size: 11px;
-            color: var(--muted);
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 25px;
+            flex-wrap: wrap;
+            gap: 15px;
         }
 
-        .stat-value {
-            font-size: 20px;
+        .section-title {
+            font-size: 24px;
             font-weight: 800;
-            letter-spacing: -0.05em;
+            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
 
-        .stat-meta {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 8px;
-            font-size: 11px;
-            color: var(--muted);
+        .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;
         }
 
-        .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);
+        .refresh-btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
         }
 
-        .spark-bar {
-            position: relative;
-            height: 4px;
+        table {
             width: 100%;
-            border-radius: 999px;
-            background: rgba(15, 23, 42, 0.9);
-            overflow: hidden;
+            border-collapse: collapse;
         }
 
-        .spark-bar span {
-            position: absolute;
-            inset: 0;
-            border-radius: inherit;
-            background: linear-gradient(90deg, #22c55e, #4f46e5);
-            transform-origin: left center;
-            transform: scaleX(0.4);
+        thead {
+            background: rgba(59, 130, 246, 0.1);
         }
 
-        table {
-            width: 100%;
-            border-collapse: collapse;
+        th {
+            padding: 16px;
+            text-align: left;
             font-size: 12px;
+            font-weight: 700;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 1px;
         }
 
-        thead {
-            position: sticky;
-            top: 0;
-            z-index: 5;
+        td {
+            padding: 16px;
+            border-top: 1px solid var(--border);
+            font-size: 14px;
         }
 
-        thead tr {
-            background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.96));
+        tr:hover {
+            background: rgba(59, 130, 246, 0.05);
         }
 
-        th,
-        td {
-            padding: 7px 8px;
-            border-bottom: 1px solid rgba(31, 41, 55, 0.9);
-            text-align: right;
-            vertical-align: middle;
+        .crypto-name {
+            display: flex;
+            align-items: center;
+            gap: 12px;
         }
 
-        th {
-            font-size: 11px;
-            color: var(--muted);
-            font-weight: 600;
-            white-space: nowrap;
+        .crypto-img {
+            width: 36px;
+            height: 36px;
+            border-radius: 10px;
+            object-fit: cover;
         }
 
-        tbody tr:hover {
-            background: radial-gradient(circle at center, rgba(55, 65, 81, 0.4), rgba(15, 23, 42, 0.98));
+        .price {
+            font-weight: 700;
+            font-size: 15px;
         }
 
-        .pill-status {
-            border-radius: 999px;
-            padding: 3px 8px;
-            font-size: 10px;
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
+        .change {
+            padding: 6px 12px;
+            border-radius: 8px;
+            font-weight: 700;
+            font-size: 13px;
         }
 
-        .pill-status.ok {
-            background: rgba(34, 197, 94, 0.12);
-            color: #bbf7d0;
-            border: 1px solid rgba(34, 197, 94, 0.6);
+        .change.positive {
+            background: rgba(16, 185, 129, 0.15);
+            color: var(--accent-green);
         }
 
-        .pill-status.degraded {
-            background: rgba(234, 179, 8, 0.14);
-            color: #fef9c3;
-            border: 1px solid rgba(234, 179, 8, 0.6);
+        .change.negative {
+            background: rgba(239, 68, 68, 0.15);
+            color: var(--accent-red);
         }
 
-        .pill-status.down {
-            background: rgba(239, 68, 68, 0.14);
-            color: #fecaca;
-            border: 1px solid rgba(239, 68, 68, 0.6);
+        /* 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;
         }
 
-        .pill-status span.dot {
-            width: 6px;
-            height: 6px;
-            border-radius: 999px;
-            background: currentColor;
+        canvas {
+            max-height: 350px;
         }
 
-        .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;
+        /* Loading */
+        .loading {
             display: flex;
             align-items: center;
-            padding: 0 6px;
-            gap: 6px;
-            font-size: 10px;
+            justify-content: center;
+            padding: 60px;
         }
 
-        .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;
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 4px solid var(--border);
+            border-top-color: var(--accent-blue);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
         }
 
-        .progress-pill span.label {
-            position: relative;
-            z-index: 1;
-            white-space: nowrap;
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
         }
 
-        .pill-severity {
-            border-radius: 999px;
-            padding: 2px 7px;
-            font-size: 10px;
-            display: inline-flex;
-            align-items: center;
-            gap: 4px;
+        /* Forms */
+        .form-group {
+            margin-bottom: 20px;
         }
 
-        .pill-severity.critical {
-            background: rgba(239, 68, 68, 0.16);
-            color: #fecaca;
-            border: 1px solid rgba(239, 68, 68, 0.7);
+        .form-label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: var(--text-primary);
         }
 
-        .pill-severity.high {
-            background: rgba(249, 115, 22, 0.16);
-            color: #fed7aa;
-            border: 1px solid rgba(249, 115, 22, 0.7);
+        .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;
         }
 
-        .pill-severity.medium {
-            background: rgba(234, 179, 8, 0.16);
-            color: #fef9c3;
-            border: 1px solid rgba(234, 179, 8, 0.7);
+        .form-input:focus,
+        .form-select:focus,
+        .form-textarea:focus {
+            outline: none;
+            border-color: var(--accent-blue);
         }
 
-        .pill-severity.low {
-            background: rgba(34, 197, 94, 0.16);
-            color: #bbf7d0;
-            border: 1px solid rgba(34, 197, 94, 0.7);
+        .form-textarea {
+            resize: vertical;
+            min-height: 100px;
         }
 
-        .log-message {
-            font-size: 11px;
-            color: var(--muted);
-            max-width: 380px;
+        /* Badges */
+        .badge {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: 600;
         }
 
-        .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);
+        .badge-success {
+            background: rgba(16, 185, 129, 0.15);
+            color: var(--accent-green);
         }
 
-        .hf-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-            gap: 10px;
+        .badge-warning {
+            background: rgba(245, 158, 11, 0.15);
+            color: var(--accent-yellow);
         }
 
-        .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;
+        .badge-danger {
+            background: rgba(239, 68, 68, 0.15);
+            color: var(--accent-red);
         }
 
-        .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;
+        .badge-info {
+            background: rgba(59, 130, 246, 0.15);
+            color: var(--accent-blue);
         }
 
-        .hf-meta-row {
-            display: flex;
-            gap: 6px;
-            flex-wrap: wrap;
-            font-size: 10px;
-            color: var(--muted);
+        /* Alert */
+        .alert {
+            padding: 12px 16px;
+            border-radius: 8px;
+            margin-bottom: 16px;
+            font-size: 14px;
         }
 
-        .input-row {
-            display: flex;
-            gap: 6px;
-            flex-wrap: wrap;
-            margin-bottom: 8px;
+        .alert-success {
+            background: rgba(16, 185, 129, 0.15);
+            color: var(--accent-green);
+            border-left: 4px solid var(--accent-green);
         }
 
-        .field {
-            flex: 1 1 160px;
-            min-width: 0;
-            position: relative;
+        .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;
+            }
         }
 
-        .field input {
+        /* Modal Styles */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
             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);
+            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;
         }
 
-        .field input::placeholder {
-            color: rgba(148, 163, 184, 0.8);
+        .modal.active {
+            display: flex;
         }
 
-        .field span.leading {
-            position: absolute;
-            top: 50%;
-            inset-inline-start: 9px;
-            transform: translateY(-50%);
-            font-size: 12px;
-            color: var(--muted);
+        .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;
         }
 
-        .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;
+        @keyframes slideUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
 
-        .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);
+        /* 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: 4px;
+            gap: 6px;
         }
 
-        .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);
+        .btn-icon:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
         }
 
-        .empty-state {
-            padding: 18px 10px;
+        /* 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;
-            font-size: 12px;
-            color: var(--muted);
+            padding: 60px 20px;
+            background: rgba(17, 24, 39, 0.6);
+            border-radius: 20px;
+            border: 2px dashed var(--border);
         }
 
-        .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;
+        .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;
-            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;
+            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;
         }
 
-        .toast.visible {
-            display: block;
-            animation: toast-in 0.2s ease-out;
+        @keyframes slideInRight {
+            from {
+                opacity: 0;
+                transform: translateX(100%);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
         }
 
-        .toast-title {
-            font-weight: 600;
-            margin-bottom: 4px;
+        .toast-success {
+            border-left: 4px solid var(--accent-green);
         }
 
-        .toast-body {
-            font-size: 11px;
-            color: var(--muted);
+        .toast-error {
+            border-left: 4px solid var(--accent-red);
         }
 
-        @keyframes spin {
-            to {
-                transform: rotate(360deg);
+        .toast-info {
+            border-left: 4px solid var(--accent-blue);
+        }
+
+        /* === کارت کاربران آنلاین - استایل جدید === */
+        .online-users-card {
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
+            backdrop-filter: blur(10px);
+            border: 2px solid rgba(59, 130, 246, 0.3);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .online-users-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
+        }
+
+        .online-users-card:hover {
+            border-color: rgba(59, 130, 246, 0.6);
+            box-shadow: 0 20px 50px rgba(59, 130, 246, 0.4);
+        }
+
+        .pulse-ring {
+            position: absolute;
+            top: 50%;
+            right: 20px;
+            transform: translateY(-50%);
+            width: 60px;
+            height: 60px;
+        }
+
+        .pulse-ring::before,
+        .pulse-ring::after {
+            content: '';
+            position: absolute;
+            border: 2px solid var(--accent-blue);
+            border-radius: 50%;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            animation: pulse-ring-animation 3s infinite;
+        }
+
+        .pulse-ring::after {
+            animation-delay: 1.5s;
+        }
+
+        @keyframes pulse-ring-animation {
+            0% {
+                transform: scale(0.5);
+                opacity: 1;
+            }
+
+            100% {
+                transform: scale(1.5);
+                opacity: 0;
             }
         }
 
-        @keyframes toast-in {
+        /* === Connection Status Indicator === */
+        .ws-status-indicator {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 10000;
+            background: rgba(17, 24, 39, 0.95);
+            backdrop-filter: blur(20px);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 12px 20px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+            transition: all 0.3s ease;
+        }
+
+        .ws-status-indicator:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
+        }
+
+        .ws-status-indicator.connected {
+            border-color: rgba(16, 185, 129, 0.5);
+        }
+
+        .ws-status-indicator.disconnected {
+            border-color: rgba(239, 68, 68, 0.5);
+        }
+
+        /* === انیمیشن‌های بیشتر === */
+        .stat-value {
+            animation: fadeInUp 0.5s ease;
+        }
+
+        @keyframes fadeInUp {
             from {
                 opacity: 0;
-                transform: translateY(10px) scale(0.98);
+                transform: translateY(20px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .shimmer {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .shimmer::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background: linear-gradient(90deg,
+                    transparent,
+                    rgba(255, 255, 255, 0.1),
+                    transparent);
+            animation: shimmer 2s infinite;
+        }
+
+        @keyframes shimmer {
+            0% {
+                transform: translateX(-100%);
+            }
+
+            100% {
+                transform: translateX(100%);
+            }
+        }
+
+        /* === گلو افکت برای آیکون‌ها === */
+        .stat-icon {
+            position: relative;
+        }
+
+        .stat-icon::after {
+            content: '';
+            position: absolute;
+            inset: -10px;
+            background: inherit;
+            filter: blur(20px);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            z-index: -1;
+        }
+
+        .stat-card:hover .stat-icon::after {
+            opacity: 0.6;
+        }
+
+        .count-updated {
+            animation: pop-scale 0.4s ease;
+        }
+
+        @keyframes pop-scale {
+            0% {
+                transform: scale(1);
+            }
+
+            50% {
+                transform: scale(1.08);
+            }
+
+            100% {
+                transform: scale(1);
+            }
+        }
+
+        /* === بهبود دکمه‌ها === */
+        .refresh-btn {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .refresh-btn::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.3);
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+
+        .refresh-btn:active::before {
+            width: 300px;
+            height: 300px;
+        }
+
+        /* === توسط Badge === */
+        .live-indicator {
+            position: relative;
+        }
+
+        .live-indicator::before {
+            content: '';
+            position: absolute;
+            left: -20px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 12px;
+            height: 12px;
+            background: var(--accent-red);
+            border-radius: 50%;
+            animation: live-pulse 2s infinite;
+        }
+
+        @keyframes live-pulse {
+
+            0%,
+            100% {
+                box-shadow: 0 0 0 0 var(--accent-red);
+            }
+
+            50% {
+                box-shadow: 0 0 0 8px transparent;
+            }
+        }
+
+        /* === Glassmorphism برای کارت‌ها === */
+        .glass-card {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px) saturate(180%);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        /* === Progress Bar انیمیت شده === */
+        .animated-progress {
+            position: relative;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 2px;
+            overflow: hidden;
+        }
+
+        .animated-progress::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 30%;
+            background: linear-gradient(90deg,
+                    transparent,
+                    var(--accent-blue),
+                    transparent);
+            animation: progress-slide 2s infinite;
+        }
+
+        @keyframes progress-slide {
+            0% {
+                transform: translateX(-100%);
+            }
+
+            100% {
+                transform: translateX(400%);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <!-- WebSocket Status Indicator -->
+    <div id="ws-connection-status" class="ws-status-indicator disconnected">
+        <div id="ws-status-dot" class="status-dot status-dot-offline"></div>
+        <span id="ws-status-text" class="ws-status-text">در حال اتصال...</span>
+        <div id="online-users-badge" class="badge badge-info" style="margin-left: 10px;">0</div>
+    </div>
+
+    <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>
+                <button class="tab" onclick="switchTab('logs')">📋 Logs</button>
+                <button class="tab" onclick="switchTab('resources')">📦 Resources</button>
+                <button class="tab" onclick="switchTab('reports')">📊 Reports</button>
+            </div>
+        </div>
+
+        <!-- Market Tab -->
+        <div id="tab-market" class="tab-content active">
+            <!-- Stats Grid -->
+            <div class="stats-grid stats-grid--market">
+                <div class="stat-card online-users-card">
+                    <div class="pulse-ring"></div>
+                    <div class="stat-header">
+                        <div class="stat-icon">
+                            <svg viewBox="0 0 24 24" aria-hidden="true">
+                                <circle cx="9" cy="8" r="3" />
+                                <circle cx="17" cy="9" r="2.5" />
+                                <path d="M4 19v-1.5A4.5 4.5 0 018.5 13h1A4.5 4.5 0 0114 17.5V19" />
+                                <path d="M17 19v-1a3 3 0 00-3-3h-1.5" />
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="stat-value shimmer" id="active-users-count">0</div>
+                    <div class="stat-label">کاربران آنلاین</div>
+                    <div class="stat-change positive">
+                        <span>📊</span>
+                        <span>کل نشست‌ها: <span id="total-sessions-count">0</span></span>
+                    </div>
+                    <div class="animated-progress"></div>
+                </div>
+
+                <div class="stat-card">
+                    <div class="stat-header">
+                        <div class="stat-icon">
+                            <svg viewBox="0 0 24 24" aria-hidden="true">
+                                <circle cx="12" cy="12" r="6" />
+                                <path d="M12 8v8" />
+                                <path d="M9.5 10.5h5" />
+                                <path d="M9.5 13.5h5" />
+                            </svg>
+                        </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">
+                            <svg viewBox="0 0 24 24" aria-hidden="true">
+                                <path d="M6 16V9" />
+                                <path d="M12 16V5" />
+                                <path d="M18 16v-7" />
+                                <path d="M4 16h16" />
+                            </svg>
+                        </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">
+                            <svg viewBox="0 0 24 24" aria-hidden="true">
+                                <circle cx="12" cy="12" r="6" />
+                                <path d="M10 8h3a2 2 0 010 4h-3h3a2 2 0 010 4h-3" />
+                                <path d="M11 6v2" />
+                                <path d="M11 16v2" />
+                            </svg>
+                        </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">
+                            <svg viewBox="0 0 24 24" aria-hidden="true">
+                                <path
+                                    d="M5.5 15c0 3.6 3 5.5 6.5 5.5s6.5-1.9 6.5-5.5c0-2.6-1.7-4.4-3.4-6.4-.4-.5-.8-1-1.1-1.6-.3-.6-.6-1.3-.8-2-1.6 1.4-3.3 3.2-3.3 5.1-1.2-.8-2.4-2-2.4-3.6C7 9 5.5 11.4 5.5 13.5Z" />
+                                <path d="M10.5 18.5c-1.1-.7-1.8-1.7-1.8-3 0-1.1.5-2 1.2-2.8" />
+                            </svg>
+                        </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">
+                            <svg viewBox="0 0 24 24" aria-hidden="true">
+                                <rect x="4" y="4" width="16" height="5" rx="2" />
+                                <rect x="4" y="11" width="16" height="5" rx="2" />
+                                <path d="M8 6h.01" />
+                                <path d="M8 13h.01" />
+                                <path d="M12 16v4" />
+                                <path d="M10 20h4" />
+                            </svg>
+                        </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">
+                            <svg viewBox="0 0 24 24" aria-hidden="true">
+                                <circle cx="12" cy="12" r="7.5" />
+                                <path d="M9.2 12.2l2 2 4-4" />
+                            </svg>
+                        </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">
+                            <svg viewBox="0 0 24 24" aria-hidden="true">
+                                <circle cx="12" cy="12" r="7.5" />
+                                <path d="M9 9l6 6" />
+                                <path d="M15 9l-6 6" />
+                            </svg>
+                        </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">
+                            <svg viewBox="0 0 24 24" aria-hidden="true">
+                                <path d="M11 3L6 13h5l-1 8 8-14h-5l1-4z" />
+                            </svg>
+                        </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">
+                            <svg viewBox="0 0 24 24" aria-hidden="true">
+                                <rect x="4" y="4" width="16" height="5" rx="2" />
+                                <rect x="4" y="11" width="16" height="5" rx="2" />
+                                <path d="M8 6h.01" />
+                                <path d="M8 13h.01" />
+                                <path d="M12 16v4" />
+                                <path d="M10 20h4" />
+                            </svg>
+                        </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">
+                            <svg viewBox="0 0 24 24" aria-hidden="true">
+                                <path d="M6 4v7m0 5v4" />
+                                <circle cx="6" cy="11" r="2" />
+                                <path d="M12 4v2m0 4v10" />
+                                <circle cx="12" cy="8" r="2" />
+                                <path d="M18 4v9m0 4v3" />
+                                <circle cx="18" cy="15" r="2" />
+                            </svg>
+                        </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">
+                            <svg viewBox="0 0 24 24" aria-hidden="true">
+                                <ellipse cx="12" cy="6" rx="7" ry="3" />
+                                <path d="M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6" />
+                                <path d="M5 12c0 1.7 3.1 3 7 3s7-1.3 7-3" />
+                            </svg>
+                        </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">
+                            <svg viewBox="0 0 24 24" aria-hidden="true">
+                                <path d="M8 3v4" />
+                                <path d="M16 3v4" />
+                                <path d="M6 11h12" />
+                                <path d="M10 15h4v6" />
+                                <path d="M8 7h8v4a6 6 0 01-12 0V7z" />
+                            </svg>
+                        </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>
+
+        <!-- Logs Tab -->
+        <div id="tab-logs" class="tab-content">
+            <div class="market-section">
+                <div class="section-header">
+                    <div class="section-title">📋 Log Management</div>
+                    <div style="display: flex; gap: 10px;">
+                        <button class="refresh-btn" onclick="loadLogs()">🔄 Refresh</button>
+                        <button class="refresh-btn" onclick="exportLogsJSON()"
+                            style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">💾 Export
+                            JSON</button>
+                        <button class="refresh-btn" onclick="exportLogsCSV()"
+                            style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">📊 Export
+                            CSV</button>
+                        <button class="refresh-btn" onclick="clearAllLogs()"
+                            style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red);">🗑️ Clear</button>
+                    </div>
+                </div>
+
+                <!-- Filters -->
+                <div
+                    style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;">
+                    <div class="form-group">
+                        <label class="form-label">Level</label>
+                        <select class="form-select" id="logLevelFilter" onchange="loadLogs()">
+                            <option value="">All Levels</option>
+                            <option value="debug">Debug</option>
+                            <option value="info">Info</option>
+                            <option value="warning">Warning</option>
+                            <option value="error">Error</option>
+                            <option value="critical">Critical</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Category</label>
+                        <select class="form-select" id="logCategoryFilter" onchange="loadLogs()">
+                            <option value="">All Categories</option>
+                            <option value="provider">Provider</option>
+                            <option value="pool">Pool</option>
+                            <option value="api">API</option>
+                            <option value="system">System</option>
+                            <option value="health_check">Health Check</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Search</label>
+                        <input type="text" class="form-input" id="logSearch" placeholder="Search logs..."
+                            onkeyup="loadLogs()">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Limit</label>
+                        <input type="number" class="form-input" id="logLimit" value="100" min="10" max="1000"
+                            onchange="loadLogs()">
+                    </div>
+                </div>
+
+                <!-- Log Stats -->
+                <div class="stats-grid" style="margin-bottom: 20px;">
+                    <div class="stat-card">
+                        <div class="stat-value" id="totalLogs">0</div>
+                        <div class="stat-label">Total Logs</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value" id="errorLogs" style="color: var(--accent-red);">0</div>
+                        <div class="stat-label">Errors</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value" id="infoLogs" style="color: var(--accent-blue);">0</div>
+                        <div class="stat-label">Info</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value" id="warningLogs" style="color: var(--accent-yellow);">0</div>
+                        <div class="stat-label">Warnings</div>
+                    </div>
+                </div>
+
+                <!-- Logs Table -->
+                <div style="overflow-x: auto;">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Time</th>
+                                <th>Level</th>
+                                <th>Category</th>
+                                <th>Message</th>
+                                <th>Provider</th>
+                                <th>Response Time</th>
+                            </tr>
+                        </thead>
+                        <tbody id="logsTableBody">
+                            <tr>
+                                <td colspan="6" style="text-align: center;">Loading logs...</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+        <!-- Resources Tab -->
+        <div id="tab-resources" class="tab-content">
+            <div class="market-section">
+                <div class="section-header">
+                    <div class="section-title">📦 Resource Management</div>
+                    <div style="display: flex; gap: 10px;">
+                        <button class="refresh-btn" onclick="loadResources()">🔄 Refresh</button>
+                        <button class="refresh-btn" onclick="exportResourcesJSON()"
+                            style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">💾 Export
+                            JSON</button>
+                        <button class="refresh-btn" onclick="exportResourcesCSV()"
+                            style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">📊 Export
+                            CSV</button>
+                        <button class="refresh-btn" onclick="backupResources()"
+                            style="background: rgba(59, 130, 246, 0.2); color: var(--accent-blue);">💾 Backup</button>
+                        <button class="refresh-btn" onclick="showImportModal()"
+                            style="background: rgba(139, 92, 246, 0.2); color: var(--accent-purple);">📥 Import</button>
+                    </div>
+                </div>
+
+                <!-- Resource Stats -->
+                <div class="stats-grid" style="margin-bottom: 20px;">
+                    <div class="stat-card">
+                        <div class="stat-value" id="totalResources">0</div>
+                        <div class="stat-label">Total Resources</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value" id="freeResources" style="color: var(--accent-green);">0</div>
+                        <div class="stat-label">Free APIs</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value" id="paidResources" style="color: var(--accent-yellow);">0</div>
+                        <div class="stat-label">Paid APIs</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value" id="authResources">0</div>
+                        <div class="stat-label">Requires Auth</div>
+                    </div>
+                </div>
+
+                <!-- Category Filter -->
+                <div style="margin-bottom: 20px;">
+                    <label class="form-label">Filter by Category</label>
+                    <select class="form-select" id="resourceCategoryFilter" onchange="loadResources()"
+                        style="max-width: 300px;">
+                        <option value="">All Categories</option>
+                        <option value="market_data">Market Data</option>
+                        <option value="exchange">Exchange</option>
+                        <option value="blockchain_explorer">Block Explorer</option>
+                        <option value="rpc">RPC</option>
+                        <option value="defi">DeFi</option>
+                        <option value="news">News</option>
+                        <option value="sentiment">Sentiment</option>
+                        <option value="analytics">Analytics</option>
+                    </select>
+                </div>
+
+                <!-- Resources Grid -->
+                <div id="resourcesGrid"
+                    style="display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px;">
+                    <div class="loading">
+                        <div class="spinner"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Import Modal -->
+        <div id="importModal" 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;">📥 Import Resources</h2>
+                    <button onclick="closeImportModal()"
+                        style="background: none; border: none; color: var(--text-secondary); font-size: 28px; cursor: pointer;">×</button>
+                </div>
+                <form id="importForm">
+                    <div class="form-group">
+                        <label class="form-label">File Path</label>
+                        <input type="text" class="form-input" id="importFilePath" placeholder="path/to/file.json"
+                            required>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Import Mode</label>
+                        <select class="form-select" id="importMode">
+                            <option value="true">Merge (Add to existing)</option>
+                            <option value="false">Replace (Overwrite all)</option>
+                        </select>
+                    </div>
+                    <div style="display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px;">
+                        <button type="button" class="refresh-btn" onclick="closeImportModal()"
+                            style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red);">Cancel</button>
+                        <button type="submit" class="refresh-btn">Import</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Reports Tab -->
+        <div id="tab-reports" class="tab-content">
+            <div class="market-section">
+                <div class="section-header">
+                    <div class="section-title">🔍 اشکال‌یابی خودکار</div>
+                    <div style="display: flex; gap: 10px;">
+                        <button class="refresh-btn" onclick="runDiagnostics(false)"
+                            style="background: rgba(59, 130, 246, 0.2); color: var(--accent-blue);">🔍 بررسی</button>
+                        <button class="refresh-btn" onclick="runDiagnostics(true)"
+                            style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">🔧 بررسی و
+                            تعمیر</button>
+                        <button class="refresh-btn" onclick="loadReports()">🔄 به‌روزرسانی</button>
+                    </div>
+                </div>
+
+                <!-- Diagnostics Results -->
+                <div id="diagnosticsResults" style="margin-top: 20px;">
+                    <div class="loading">
+                        <div class="spinner"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="market-section">
+                <div class="section-header">
+                    <div class="section-title">🤖 گزارش Auto-Discovery Service</div>
+                    <button class="refresh-btn" onclick="loadDiscoveryReport()">🔄 به‌روزرسانی</button>
+                </div>
+                <div id="discoveryReport">
+                    <div class="loading">
+                        <div class="spinner"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="market-section">
+                <div class="section-header">
+                    <div class="section-title">🧠 گزارش وضعیت مدل‌های HuggingFace</div>
+                    <button class="refresh-btn" onclick="loadModelsReport()">🔄 به‌روزرسانی</button>
+                </div>
+                <div id="modelsReport">
+                    <div class="loading">
+                        <div class="spinner"></div>
+                    </div>
+                </div>
+            </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();
+            } else if (tabName === 'logs') {
+                loadLogs();
+            } else if (tabName === 'resources') {
+                loadResources();
+            } else if (tabName === 'reports') {
+                loadReports();
+            }
+        }
+
+        // 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;
+        }
+
+        // استفاده از WebSocket Client جدید
+        function connectWebSocket() {
+            // WebSocket client از websocket-client.js استفاده می‌شود
+            // که به صورت خودکار اتصال برقرار می‌کند
+
+            if (window.wsClient) {
+                console.log('✅ WebSocket Client آماده است');
+
+                // ثبت handler برای به‌روزرسانی آمار
+                window.wsClient.on('stats_update', (message) => {
+                    console.log('📊 Stats update:', message.data);
+                    updateOnlineStats(message.data);
+                });
+
+                window.wsClient.on('provider_stats', (message) => {
+                    console.log('📡 Provider stats:', message.data);
+                    if (currentTab === 'monitor') {
+                        updateProviderStatsDisplay(message.data);
+                    }
+                });
+
+                window.wsClient.on('market_update', (message) => {
+                    console.log('💰 Market update');
+                    if (currentTab === 'market') {
+                        loadMarketData();
+                    }
+                });
+
+                // درخواست آمار اولیه
+                setTimeout(() => {
+                    if (window.wsClient.isConnected) {
+                        window.wsClient.requestStats();
+                    }
+                }, 1000);
+
+                // درخواست آمار هر 10 ثانیه
+                setInterval(() => {
+                    if (window.wsClient && window.wsClient.isConnected) {
+                        window.wsClient.requestStats();
+                    }
+                }, 10000);
+            } else {
+                console.log('⏳ در انتظار WebSocket Client...');
+                setTimeout(connectWebSocket, 1000);
+            }
+        }
+
+        // تابع برای به‌روزرسانی آمار آنلاین
+        function updateOnlineStats(data) {
+            const activeEl = document.getElementById('active-users-count');
+            const totalEl = document.getElementById('total-sessions-count');
+
+            if (data.active_connections !== undefined && activeEl) {
+                activeEl.textContent = data.active_connections;
+                // اضافه کردن انیمیشن
+                activeEl.classList.add('count-updated');
+                setTimeout(() => activeEl.classList.remove('count-updated'), 500);
+            }
+
+            if (data.total_sessions !== undefined && totalEl) {
+                totalEl.textContent = data.total_sessions;
+            }
+        }
+
+        // تابع برای به‌روزرسانی نمایش آمار Provider
+        function updateProviderStatsDisplay(stats) {
+            if (stats.summary) {
+                const summary = stats.summary;
+                if (document.getElementById('totalAPIs')) {
+                    document.getElementById('totalAPIs').textContent = summary.total_providers || 0;
+                }
+                if (document.getElementById('onlineAPIs')) {
+                    document.getElementById('onlineAPIs').textContent = summary.online || 0;
+                }
+                if (document.getElementById('offlineAPIs')) {
+                    document.getElementById('offlineAPIs').textContent = summary.offline || 0;
+                }
+            }
+        }
+
+        // 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>`;
             }
+        }
 
-            to {
-                opacity: 1;
-                transform: translateY(0) scale(1);
+        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>`;
             }
         }
 
-        @media (max-width: 980px) {
-            .layout {
-                grid-template-columns: minmax(0, 1fr);
-            }
+        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>';
+        }
 
-            .hero {
-                padding: 20px 18px 16px;
-            }
+        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>';
+        }
 
-            .hero-title-text h1 {
-                font-size: 22px;
+        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}`;
             }
         }
 
-        @media (max-width: 640px) {
-            body {
-                padding: 14px;
-            }
+        // Pools Functions
+        let currentPoolId = null;
+        let allProvidersList = [];
 
-            .hero {
-                border-radius: 22px;
-            }
+        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())
+                ]);
 
-            .hero-header {
-                align-items: flex-start;
-            }
+                const pools = poolsRes.pools || [];
+                const container = document.getElementById('poolsContainer');
 
-            .hero-status-row {
-                justify-content: flex-start;
-            }
+                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('');
+                }
 
-            .tab-strip {
-                width: 100%;
-                overflow-x: auto;
+                // 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>
+                `;
             }
         }
-    </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>
+        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>
-                        <div class="chip">
-                            🧠 <span>Hugging Face integration برای مدل‌ها و دیتاست‌های تحلیلی</span>
+                    `;
+                }).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 class="chip">
-                            🛡️ <span>Realtime health, rate‑limits, incidents & alerts</span>
+                        <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>
-                </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>
+                    ${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 class="panel-subtitle" id="panel-left-subtitle">
-                            خلاصه وضعیت backend و مهم‌ترین شاخص‌های سلامت سرویس‌ها.
+                        <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>
-                    <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 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 class="panel-subtitle" id="panel-right-subtitle">
-                            کنترل وب‌سوکت، فیلتر لاگ‌ها و هشدارهای زنده.
+                        <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 class="panel-actions" id="panel-right-actions">
-                        <span class="tag-soft" id="tag-right-mode">WebSocket: passive</span>
+
+                    <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>
-                <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>
+        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);
+            }
+        }
 
-    <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);
+        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);
             }
-            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';
+        });
+
+        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);
             }
-        }
+        });
 
-        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 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 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;
+        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);
             }
-            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));
-        }
+        // 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);
 
-        function formatPercent(num, digits = 1) {
-            if (num === null || num === undefined || isNaN(num)) return '—';
-            return num.toFixed(digits) + '%';
+            setTimeout(() => {
+                toast.style.animation = 'slideInRight 0.3s reverse';
+                setTimeout(() => toast.remove(), 300);
+            }, 3000);
         }
 
-        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();
+        // Close modals when clicking outside
+        document.addEventListener('click', (e) => {
+            if (e.target.classList.contains('modal')) {
+                e.target.style.display = 'none';
             }
-        }
+        });
 
-        async function loadProviders() {
-            panelLeftContent.innerHTML = '<div class="empty-state"><span class="loader"></span> در حال دریافت لیست providerها…</div>';
+        // ===== Log Management Functions =====
+
+        async function loadLogs() {
             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;
+                const level = document.getElementById('logLevelFilter')?.value || '';
+                const category = document.getElementById('logCategoryFilter')?.value || '';
+                const search = document.getElementById('logSearch')?.value || '';
+                const limit = parseInt(document.getElementById('logLimit')?.value || '100');
+
+                let url = `/api/logs?limit=${limit}`;
+                if (level) url += `&level=${level}`;
+                if (category) url += `&category=${category}`;
+                if (search) url += `&search=${search}`;
+
+                const response = await fetch(url);
+                const data = await response.json();
+
+                // Update stats
+                const statsResponse = await fetch('/api/logs/stats');
+                const stats = await statsResponse.json();
+
+                if (document.getElementById('totalLogs')) {
+                    document.getElementById('totalLogs').textContent = stats.total || 0;
+                    document.getElementById('errorLogs').textContent = stats.errors || 0;
+                    document.getElementById('infoLogs').textContent = stats.by_level?.info || 0;
+                    document.getElementById('warningLogs').textContent = stats.by_level?.warning || 0;
+                }
+
+                // Update table
+                const tbody = document.getElementById('logsTableBody');
+                if (data.logs && data.logs.length > 0) {
+                    tbody.innerHTML = data.logs.map(log => {
+                        const levelColor = {
+                            'error': 'var(--accent-red)',
+                            'critical': 'var(--accent-red)',
+                            'warning': 'var(--accent-yellow)',
+                            'info': 'var(--accent-blue)',
+                            'debug': 'var(--text-secondary)'
+                        }[log.level] || 'var(--text-secondary)';
+
+                        return `
+                            <tr>
+                                <td style="font-size: 12px; color: var(--text-secondary);">${new Date(log.timestamp).toLocaleString()}</td>
+                                <td><span style="color: ${levelColor}; font-weight: 700;">${log.level.toUpperCase()}</span></td>
+                                <td><span class="badge badge-info">${log.category}</span></td>
+                                <td>${log.message}</td>
+                                <td>${log.provider_id || '—'}</td>
+                                <td>${log.response_time ? log.response_time.toFixed(0) + 'ms' : '—'}</td>
+                            </tr>
+                        `;
+                    }).join('');
+                } else {
+                    tbody.innerHTML = '<tr><td colspan="6" style="text-align: center; color: var(--text-secondary);">No logs found</td></tr>';
+                }
+            } catch (error) {
+                console.error('Error loading logs:', error);
+                if (document.getElementById('logsTableBody')) {
+                    document.getElementById('logsTableBody').innerHTML = '<tr><td colspan="6" style="text-align: center; color: var(--accent-red);">Error loading logs</td></tr>';
                 }
-                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>';
+        async function exportLogsJSON() {
             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();
+                const level = document.getElementById('logLevelFilter')?.value || '';
+                const category = document.getElementById('logCategoryFilter')?.value || '';
+
+                let url = '/api/logs/export/json?';
+                if (level) url += `level=${level}&`;
+                if (category) url += `category=${category}&`;
+
+                const response = await fetch(url);
+                const data = await response.json();
+                showToast(`✅ Logs exported to ${data.filepath}`, 'success');
+            } catch (error) {
+                showToast('❌ Export failed', 'error');
+                console.error(error);
             }
         }
 
-        async function loadRateLimits() {
-            panelLeftContent.innerHTML = '<div class="empty-state"><span class="loader"></span> در حال دریافت rate‑limitها…</div>';
+        async function exportLogsCSV() {
             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();
+                const level = document.getElementById('logLevelFilter')?.value || '';
+                const category = document.getElementById('logCategoryFilter')?.value || '';
+
+                let url = '/api/logs/export/csv?';
+                if (level) url += `level=${level}&`;
+                if (category) url += `category=${category}&`;
+
+                const response = await fetch(url);
+                const data = await response.json();
+                showToast(`✅ Logs exported to ${data.filepath}`, 'success');
+            } catch (error) {
+                showToast('❌ Export failed', 'error');
+                console.error(error);
             }
         }
 
-        async function loadLogs(type) {
-            panelLeftContent.innerHTML = '<div class="empty-state"><span class="loader"></span> در حال دریافت لاگ‌ها…</div>';
+        async function clearAllLogs() {
+            if (!confirm('Are you sure you want to clear all logs? This cannot be undone.')) {
+                return;
+            }
             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 response = await fetch('/api/logs', { method: 'DELETE' });
+                if (response.ok) {
+                    showToast('✅ All logs cleared', 'success');
+                    loadLogs();
+                } else {
+                    showToast('❌ Failed to clear logs', 'error');
                 }
-                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();
+            } catch (error) {
+                showToast('❌ Error clearing logs', 'error');
+                console.error(error);
             }
         }
 
-        async function loadAlerts() {
-            panelLeftContent.innerHTML = '<div class="empty-state"><span class="loader"></span> در حال دریافت هشدارها…</div>';
+        // ===== Resource Management Functions =====
+
+        async function loadResources() {
             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 category = document.getElementById('resourceCategoryFilter')?.value || '';
+
+                let url = '/api/resources';
+                if (category) {
+                    url = `/api/resources/category/${category}`;
+                }
+
+                const response = await fetch(url);
+                const data = await response.json();
+
+                // Update stats
+                const stats = category ? { count: data.count } : data.statistics;
+                if (stats && document.getElementById('totalResources')) {
+                    document.getElementById('totalResources').textContent = stats.total_providers || stats.count || 0;
+                    document.getElementById('freeResources').textContent = stats.by_free?.free || 0;
+                    document.getElementById('paidResources').textContent = stats.by_free?.paid || 0;
+                    document.getElementById('authResources').textContent = stats.by_auth?.requires_auth || 0;
+                }
+
+                // Update grid
+                const grid = document.getElementById('resourcesGrid');
+                const providers = category ? data.providers : Object.values(data.providers || {});
+
+                if (providers && providers.length > 0) {
+                    grid.innerHTML = providers.map(provider => {
+                        const authBadge = provider.requires_auth
+                            ? '<span class="badge badge-warning">Auth Required</span>'
+                            : '<span class="badge badge-success">No Auth</span>';
+
+                        const freeBadge = provider.free !== false
+                            ? '<span class="badge badge-success">Free</span>'
+                            : '<span class="badge badge-danger">Paid</span>';
+
+                        return `
+                            <div class="stat-card pool-card-hover">
+                                <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px;">
+                                    <div>
+                                        <div style="font-size: 18px; font-weight: 700; margin-bottom: 8px;">${provider.name}</div>
+                                        <span class="badge badge-info">${provider.category}</span>
+                                    </div>
+                                    <div style="display: flex; gap: 5px; flex-direction: column;">
+                                        ${authBadge}
+                                        ${freeBadge}
+                                    </div>
+                                </div>
+                                <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; word-break: break-all;">
+                                    ${provider.base_url}
+                                </div>
+                                <div style="display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary);">
+                                    <span>Priority: ${provider.priority || 5}</span>
+                                    <span>Weight: ${provider.weight || 50}</span>
+                                </div>
+                                ${provider.docs_url ? `<div style="margin-top: 10px;"><a href="${provider.docs_url}" target="_blank" style="color: var(--accent-blue); font-size: 12px;">📖 Docs</a></div>` : ''}
+                            </div>
+                        `;
+                    }).join('');
+                } else {
+                    grid.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: var(--text-secondary);">No resources found</div>';
+                }
+            } catch (error) {
+                console.error('Error loading resources:', error);
+                if (document.getElementById('resourcesGrid')) {
+                    document.getElementById('resourcesGrid').innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: var(--accent-red);">Error loading resources</div>';
                 }
-                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>';
+        async function exportResourcesJSON() {
             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();
+                const response = await fetch('/api/resources/export/json');
+                const data = await response.json();
+                showToast(`✅ Resources exported to ${data.filepath}`, 'success');
+            } catch (error) {
+                showToast('❌ Export failed', 'error');
+                console.error(error);
             }
         }
 
-        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>
-      `;
+        async function exportResourcesCSV() {
+            try {
+                const response = await fetch('/api/resources/export/csv');
+                const data = await response.json();
+                showToast(`✅ Resources exported to ${data.filepath}`, 'success');
+            } catch (error) {
+                showToast('❌ Export failed', 'error');
+                console.error(error);
+            }
         }
 
-        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>
-      `;
+        async function backupResources() {
+            try {
+                const response = await fetch('/api/resources/backup', { method: 'POST' });
+                const data = await response.json();
+                showToast(`✅ Backup created: ${data.filepath}`, 'success');
+            } catch (error) {
+                showToast('❌ Backup failed', 'error');
+                console.error(error);
+            }
         }
 
-        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 showImportModal() {
+            document.getElementById('importModal').classList.add('active');
         }
 
-        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 closeImportModal() {
+            document.getElementById('importModal').classList.remove('active');
+            const form = document.getElementById('importForm');
+            if (form) form.reset();
         }
 
-        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);
-                });
+        // Import form handler
+        const importForm = document.getElementById('importForm');
+        if (importForm) {
+            importForm.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                const filePath = document.getElementById('importFilePath').value;
+                const merge = document.getElementById('importMode').value === 'true';
+
+                try {
+                    const response = await fetch(`/api/resources/import/json?file_path=${encodeURIComponent(filePath)}&merge=${merge}`, {
+                        method: 'POST'
+                    });
+
+                    if (response.ok) {
+                        const data = await response.json();
+                        showToast(`✅ Resources imported successfully (${data.merged ? 'merged' : 'replaced'})`, 'success');
+                        closeImportModal();
+                        loadResources();
+                    } else {
+                        const error = await response.json();
+                        showToast(`❌ Import failed: ${error.detail}`, 'error');
+                    }
+                } catch (error) {
+                    showToast('❌ Error importing resources', 'error');
+                    console.error(error);
+                }
             });
         }
 
-        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();
-            });
+        // ===== Reports Functions =====
+
+        async function loadReports() {
+            await Promise.all([
+                loadDiscoveryReport(),
+                loadModelsReport(),
+                loadLastDiagnostics()
+            ]);
         }
 
-        async function hfRefresh() {
-            const status = document.getElementById('hf-search-status');
-            status.textContent = 'در حال refresh registry از backend…';
+        async function runDiagnostics(autoFix = false) {
+            const resultsDiv = document.getElementById('diagnosticsResults');
+            resultsDiv.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
+
             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 کنیم.');
+                const response = await fetch(`/api/diagnostics/run?auto_fix=${autoFix}`, {
+                    method: 'POST'
+                });
+                const report = await response.json();
+
+                displayDiagnosticsReport(report);
+                showToast(`✅ اشکال‌یابی انجام شد (${report.total_issues} مشکل یافت شد)`, 'success');
+            } catch (error) {
+                resultsDiv.innerHTML = `<div class="alert alert-error">❌ خطا: ${error.message}</div>`;
+                showToast('❌ خطا در اجرای اشکال‌یابی', 'error');
             }
         }
 
-        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;
+        function displayDiagnosticsReport(report) {
+            const resultsDiv = document.getElementById('diagnosticsResults');
+
+            const severityColors = {
+                'critical': 'var(--accent-red)',
+                'warning': 'var(--accent-yellow)',
+                'info': 'var(--accent-blue)'
+            };
+
+            const severityIcons = {
+                'critical': '🔴',
+                'warning': '⚠️',
+                'info': 'ℹ️'
+            };
+
+            let html = `
+                <div class="stats-grid" style="margin-bottom: 20px;">
+                    <div class="stat-card">
+                        <div class="stat-value" style="color: ${severityColors.critical};">${report.critical_issues}</div>
+                        <div class="stat-label">مشکلات بحرانی</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value" style="color: ${severityColors.warning};">${report.warnings}</div>
+                        <div class="stat-label">هشدارها</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value" style="color: ${severityColors.info};">${report.info_issues}</div>
+                        <div class="stat-label">اطلاعات</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value">${report.fixed_issues.length}</div>
+                        <div class="stat-label">تعمیر شده</div>
+                    </div>
+                </div>
+            `;
+
+            if (report.fixed_issues && report.fixed_issues.length > 0) {
+                html += `
+                    <div style="margin-bottom: 20px; padding: 15px; background: rgba(16, 185, 129, 0.1); border-radius: 12px; border-left: 4px solid var(--accent-green);">
+                        <h3 style="margin-bottom: 10px; color: var(--accent-green);">✅ مشکلات تعمیر شده</h3>
+                        ${report.fixed_issues.map(issue => `
+                            <div style="padding: 10px; margin-bottom: 8px; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
+                                <strong>${issue.title}</strong><br>
+                                <span style="font-size: 12px; color: var(--text-secondary);">${issue.description}</span>
+                            </div>
+                        `).join('')}
+                    </div>
+                `;
             }
-            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 = 'خطا در جستجو.';
+
+            if (report.issues && report.issues.length > 0) {
+                html += `
+                    <div>
+                        <h3 style="margin-bottom: 15px;">📋 لیست مشکلات</h3>
+                        ${report.issues.map(issue => `
+                            <div style="padding: 15px; margin-bottom: 10px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; border-left: 4px solid ${severityColors[issue.severity]};">
+                                <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px;">
+                                    <div>
+                                        <span style="font-size: 20px; margin-left: 8px;">${severityIcons[issue.severity]}</span>
+                                        <strong>${issue.title}</strong>
+                                    </div>
+                                    <span class="badge badge-${issue.severity === 'critical' ? 'danger' : issue.severity === 'warning' ? 'warning' : 'info'}">${issue.category}</span>
+                                </div>
+                                <div style="color: var(--text-secondary); margin-bottom: 8px; font-size: 14px;">
+                                    ${issue.description}
+                                </div>
+                                ${issue.fixable && issue.fix_action ? `
+                                    <div style="margin-top: 8px; padding: 8px; background: rgba(59, 130, 246, 0.1); border-radius: 6px; font-family: monospace; font-size: 12px;">
+                                        🔧 ${issue.fix_action}
+                                    </div>
+                                ` : ''}
+                                <div style="margin-top: 8px; font-size: 11px; color: var(--text-secondary);">
+                                    ${new Date(issue.timestamp).toLocaleString('fa-IR')}
+                                </div>
+                            </div>
+                        `).join('')}
+                    </div>
+                `;
+            } else {
+                html += `
+                    <div style="text-align: center; padding: 40px; background: rgba(16, 185, 129, 0.1); border-radius: 12px;">
+                        <div style="font-size: 48px; margin-bottom: 15px;">✅</div>
+                        <div style="font-size: 18px; font-weight: 600; color: var(--accent-green);">هیچ مشکلی یافت نشد!</div>
+                        <div style="color: var(--text-secondary); margin-top: 10px;">سیستم شما در وضعیت مطلوب است.</div>
+                    </div>
+                `;
             }
-        }
 
-        function initTabs() {
-            document.querySelectorAll('.tab-btn').forEach(btn => {
-                btn.addEventListener('click', () => {
-                    const tab = btn.getAttribute('data-tab');
-                    if (tab) setActiveTab(tab);
-                });
-            });
-        }
+            html += `
+                <div style="margin-top: 20px; padding: 15px; background: rgba(17, 24, 39, 0.6); border-radius: 12px;">
+                    <div style="font-size: 12px; color: var(--text-secondary);">
+                        <strong>زمان اجرا:</strong> ${(report.duration_ms / 1000).toFixed(2)} ثانیه<br>
+                        <strong>تاریخ:</strong> ${new Date(report.timestamp).toLocaleString('fa-IR')}
+                    </div>
+                </div>
+            `;
 
-        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();
-            });
+            resultsDiv.innerHTML = html;
         }
 
-        function initWebSocket() {
+        async function loadLastDiagnostics() {
             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);
-                });
+                const response = await fetch('/api/diagnostics/last');
+                const report = await response.json();
 
-                socket.addEventListener('error', () => {
-                    setWsStatus(false);
-                });
+                if (report.message) {
+                    return; // هیچ گزارشی موجود نیست
+                }
 
-                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);
+                displayDiagnosticsReport(report);
+            } catch (error) {
+                console.error('Error loading last diagnostics:', error);
             }
         }
 
-        async function bootstrap() {
-            initTabs();
-            initAutoRefreshControls();
-            initWebSocket();
-            setActiveTab('overview');
+        async function loadDiscoveryReport() {
+            const reportDiv = document.getElementById('discoveryReport');
+            reportDiv.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
+
             try {
-                await fetchJsonWithFallback(['/api/health', '/health']);
-                setApiStatus(true, 'Healthy');
-            } catch (err) {
-                setApiStatus(false, 'Error');
+                const response = await fetch('/api/reports/discovery');
+                const report = await response.json();
+
+                const lastRun = report.last_run;
+                const status = report.service_status;
+
+                let html = `
+                    <div class="stats-grid" style="margin-bottom: 20px;">
+                        <div class="stat-card">
+                            <div class="stat-value" style="color: ${report.enabled ? 'var(--accent-green)' : 'var(--accent-red)'};">
+                                ${report.enabled ? '✅' : '❌'}
+                            </div>
+                            <div class="stat-label">وضعیت سرویس</div>
+                        </div>
+                        <div class="stat-card">
+                            <div class="stat-value">${report.model || 'N/A'}</div>
+                            <div class="stat-label">مدل استفاده شده</div>
+                        </div>
+                        <div class="stat-card">
+                            <div class="stat-value">${Math.floor(report.interval_seconds / 3600)}h</div>
+                            <div class="stat-label">فاصله اجرا</div>
+                        </div>
+                        ${report.next_run_estimate ? `
+                        <div class="stat-card">
+                            <div class="stat-value" style="color: var(--accent-purple);">⏰</div>
+                            <div class="stat-label">اجرای بعدی</div>
+                            <div style="font-size: 12px; color: var(--text-secondary); margin-top: 5px;">
+                                ${new Date(report.next_run_estimate).toLocaleString('fa-IR')}
+                            </div>
+                        </div>
+                        ` : ''}
+                    </div>
+                `;
+
+                if (lastRun) {
+                    html += `
+                        <div style="background: rgba(17, 24, 39, 0.6); padding: 20px; border-radius: 12px;">
+                            <h3 style="margin-bottom: 15px;">📊 آخرین اجرا</h3>
+                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
+                                <div>
+                                    <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">شروع</div>
+                                    <div style="font-weight: 600;">${new Date(lastRun.started_at).toLocaleString('fa-IR')}</div>
+                                </div>
+                                <div>
+                                    <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">پایان</div>
+                                    <div style="font-weight: 600;">${new Date(lastRun.finished_at).toLocaleString('fa-IR')}</div>
+                                </div>
+                                ${report.next_run_estimate ? `
+                                <div>
+                                    <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">⏰ اجرای بعدی</div>
+                                    <div style="font-weight: 600; color: var(--accent-purple);">${new Date(report.next_run_estimate).toLocaleString('fa-IR')}</div>
+                                </div>
+                                ` : ''}
+                                <div>
+                                    <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">کاندیداها</div>
+                                    <div style="font-weight: 600; color: var(--accent-blue);">${lastRun.candidates_seen || 0}</div>
+                                </div>
+                                <div>
+                                    <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">پیشنهاد شده</div>
+                                    <div style="font-weight: 600; color: var(--accent-yellow);">${lastRun.suggested || 0}</div>
+                                </div>
+                                <div>
+                                    <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">ذخیره شده</div>
+                                    <div style="font-weight: 600; color: var(--accent-green);">${lastRun.persisted || 0}</div>
+                                </div>
+                            </div>
+                            ${lastRun.persisted_ids && lastRun.persisted_ids.length > 0 ? `
+                                <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border);">
+                                    <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;">Providerهای اضافه شده:</div>
+                                    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+                                        ${lastRun.persisted_ids.map(id => `<span class="badge badge-success">${id}</span>`).join('')}
+                                    </div>
+                                </div>
+                            ` : ''}
+                        </div>
+                    `;
+                } else {
+                    html += `
+                        <div style="text-align: center; padding: 40px; color: var(--text-secondary);">
+                            هنوز اجرایی انجام نشده است
+                        </div>
+                    `;
+                }
+
+                reportDiv.innerHTML = html;
+            } catch (error) {
+                reportDiv.innerHTML = `<div class="alert alert-error">❌ خطا: ${error.message}</div>`;
             }
         }
 
-        document.addEventListener('DOMContentLoaded', bootstrap);
+        async function loadModelsReport() {
+            const reportDiv = document.getElementById('modelsReport');
+            reportDiv.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
+
+            try {
+                const response = await fetch('/api/reports/models');
+                const report = await response.json();
+
+                if (report.error) {
+                    reportDiv.innerHTML = `
+                        <div class="alert alert-warning">
+                            ⚠️ ${report.error}
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = `
+                    <div class="stats-grid" style="margin-bottom: 20px;">
+                        <div class="stat-card">
+                            <div class="stat-value">${report.total_models}</div>
+                            <div class="stat-label">کل مدل‌ها</div>
+                        </div>
+                        <div class="stat-card">
+                            <div class="stat-value" style="color: var(--accent-green);">${report.available}</div>
+                            <div class="stat-label">در دسترس</div>
+                        </div>
+                        <div class="stat-card">
+                            <div class="stat-value" style="color: var(--accent-red);">${report.errors}</div>
+                            <div class="stat-label">خطا</div>
+                        </div>
+                    </div>
+                `;
+
+                if (report.models && report.models.length > 0) {
+                    html += `
+                        <div style="display: grid; gap: 15px;">
+                            ${report.models.map(model => `
+                                <div style="padding: 20px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; border-left: 4px solid ${model.status === 'available' ? 'var(--accent-green)' : 'var(--accent-red)'};">
+                                    <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 10px;">
+                                        <div>
+                                            <h3 style="margin-bottom: 5px;">${model.model_id}</h3>
+                                            <span class="badge badge-${model.status === 'available' ? 'success' : 'danger'}">${model.status === 'available' ? '✅ در دسترس' : '❌ خطا'}</span>
+                                        </div>
+                                    </div>
+                                    ${model.status === 'available' ? `
+                                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 15px;">
+                                            ${model.downloads ? `<div><span style="font-size: 12px; color: var(--text-secondary);">دانلودها:</span> <strong>${model.downloads.toLocaleString()}</strong></div>` : ''}
+                                            ${model.likes ? `<div><span style="font-size: 12px; color: var(--text-secondary);">لایک‌ها:</span> <strong>${model.likes}</strong></div>` : ''}
+                                            ${model.pipeline_tag ? `<div><span style="font-size: 12px; color: var(--text-secondary);">نوع:</span> <strong>${model.pipeline_tag}</strong></div>` : ''}
+                                        </div>
+                                    ` : `
+                                        <div style="color: var(--accent-red); margin-top: 10px;">
+                                            ${model.error || 'خطای نامشخص'}
+                                        </div>
+                                    `}
+                                </div>
+                            `).join('')}
+                        </div>
+                    `;
+                }
+
+                reportDiv.innerHTML = html;
+            } catch (error) {
+                reportDiv.innerHTML = `<div class="alert alert-error">❌ خطا: ${error.message}</div>`;
+            }
+        }
     </script>
 </body>
 
