Datasourceforcryptocurrency-4

Sleeping

App Files Files Community

Really-amin commited on Nov 11, 2025

Commit

7f64a72

verified ·

1 Parent(s): 48688a6

Upload index.html

Browse files

Files changed (1) hide show

index.html +2352 -0

index.html ADDED Viewed

	@@ -0,0 +1,2352 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crypto API Monitor - Real-time Dashboard</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+    <style>
+        :root {
+            --bg-primary: #ffffff;
+            --bg-secondary: #f8f9ff;
+            --bg-card: #ffffff;
+            --bg-hover: #f3f4ff;
+            --text-primary: #1e1b4b;
+            --text-secondary: #4c4380;
+            --text-muted: #7c3aed;
+            --accent-primary: #8b5cf6;
+            --accent-secondary: #a78bfa;
+            --accent-tertiary: #c084fc;
+            --purple-glow: rgba(139, 92, 246, 0.5);
+            --success: #10b981;
+            --success-bg: #d1fae5;
+            --warning: #f59e0b;
+            --warning-bg: #fef3c7;
+            --danger: #ef4444;
+            --danger-bg: #fee2e2;
+            --info: #06b6d4;
+            --info-bg: #cffafe;
+            --border: rgba(139, 92, 246, 0.2);
+            --shadow-sm: 0 2px 8px rgba(139, 92, 246, 0.08);
+            --shadow: 0 4px 16px rgba(139, 92, 246, 0.12);
+            --shadow-lg: 0 10px 40px rgba(139, 92, 246, 0.15);
+            --radius: 16px;
+            --radius-lg: 24px;
+            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 50%, #f0f4ff 100%);
+            background-attachment: fixed;
+            color: var(--text-primary);
+            line-height: 1.6;
+            min-height: 100vh;
+        }
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
+                radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.05) 0%, transparent 50%);
+            pointer-events: none;
+            z-index: 0;
+        }
+        .container {
+            max-width: 1600px;
+            margin: 0 auto;
+            padding: 24px;
+            position: relative;
+            z-index: 1;
+        }
+        /* Header */
+        .header {
+            background: var(--bg-card);
+            border: 2px solid var(--border);
+            border-radius: var(--radius-lg);
+            padding: 28px;
+            margin-bottom: 24px;
+            box-shadow: var(--shadow-lg);
+        }
+        .header-top {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            gap: 20px;
+            margin-bottom: 24px;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+        .logo-icon {
+            width: 64px;
+            height: 64px;
+            background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 50%, #c084fc 100%);
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
+            position: relative;
+            overflow: hidden;
+        }
+        .logo-icon::after {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            right: -50%;
+            bottom: -50%;
+            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+            animation: shimmer 3s infinite;
+        }
+        @keyframes shimmer {
+            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
+            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
+        }
+        .logo-text h1 {
+            font-size: 32px;
+            font-weight: 900;
+            background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 50%, #c084fc 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 4px;
+            letter-spacing: -0.5px;
+        }
+        .logo-text p {
+            font-size: 14px;
+            color: var(--text-muted);
+            font-weight: 600;
+        }
+        .header-actions {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .status-badge {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 12px 20px;
+            border-radius: 999px;
+            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
+            border: 2px solid rgba(16, 185, 129, 0.4);
+            font-size: 14px;
+            font-weight: 700;
+            color: var(--success);
+            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: var(--success);
+            animation: pulse-glow 2s infinite;
+        }
+        @keyframes pulse-glow {
+            0%, 100% {
+                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7),
+                           0 0 10px rgba(16, 185, 129, 0.5);
+            }
+            50% {
+                box-shadow: 0 0 0 8px rgba(16, 185, 129, 0),
+                           0 0 20px rgba(16, 185, 129, 0.3);
+            }
+        }
+        .connection-status {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 16px;
+            border-radius: 999px;
+            background: var(--bg-card);
+            border: 2px solid var(--border);
+            font-size: 12px;
+            font-weight: 700;
+        }
+        .connection-status.connected { border-color: var(--success); color: var(--success); }
+        .connection-status.disconnected { border-color: var(--danger); color: var(--danger); }
+        .connection-status.connecting { border-color: var(--warning); color: var(--warning); }
+        .btn {
+            padding: 14px 28px;
+            border-radius: 14px;
+            border: none;
+            background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
+            color: white;
+            font-family: inherit;
+            font-size: 14px;
+            font-weight: 700;
+            cursor: pointer;
+            transition: var(--transition);
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+            transition: left 0.5s;
+        }
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 24px rgba(139, 92, 246, 0.5);
+        }
+        .btn:hover::before {
+            left: 100%;
+        }
+        .btn-secondary {
+            background: white;
+            color: var(--accent-primary);
+            border: 2px solid var(--border);
+            box-shadow: var(--shadow-sm);
+        }
+        .btn-secondary:hover {
+            background: var(--bg-hover);
+            border-color: var(--accent-primary);
+        }
+        .btn-icon {
+            padding: 12px;
+            width: 44px;
+            height: 44px;
+        }
+        .icon {
+            width: 20px;
+            height: 20px;
+            stroke: currentColor;
+            stroke-width: 2.5;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            fill: none;
+        }
+        .icon-lg {
+            width: 26px;
+            height: 26px;
+        }
+        /* KPI Cards */
+        .kpi-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 20px;
+            margin-bottom: 24px;
+        }
+        .kpi-card {
+            background: var(--bg-card);
+            border: 2px solid var(--border);
+            border-radius: var(--radius-lg);
+            padding: 32px;
+            transition: var(--transition);
+            box-shadow: var(--shadow);
+            position: relative;
+            overflow: hidden;
+            cursor: pointer;
+        }
+        .kpi-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 6px;
+            background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 50%, #c084fc 100%);
+            transform: scaleX(0);
+            transform-origin: left;
+            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .kpi-card:hover {
+            transform: translateY(-8px) scale(1.02);
+            box-shadow: 0 16px 48px rgba(139, 92, 246, 0.25);
+            border-color: var(--accent-primary);
+        }
+        .kpi-card:hover::before {
+            transform: scaleX(1);
+        }
+        .kpi-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 20px;
+        }
+        .kpi-label {
+            font-size: 12px;
+            color: var(--text-muted);
+            font-weight: 800;
+            text-transform: uppercase;
+            letter-spacing: 1.2px;
+        }
+        .kpi-icon-wrapper {
+            width: 64px;
+            height: 64px;
+            border-radius: 18px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: var(--transition);
+            box-shadow: var(--shadow);
+        }
+        .kpi-card:hover .kpi-icon-wrapper {
+            transform: rotate(-5deg) scale(1.15);
+            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
+        }
+        .kpi-value {
+            font-size: 48px;
+            font-weight: 900;
+            margin-bottom: 16px;
+            background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 50%, #c084fc 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            line-height: 1;
+            animation: countUp 0.6s ease-out;
+            letter-spacing: -2px;
+        }
+        @keyframes countUp {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .kpi-trend {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 13px;
+            font-weight: 700;
+            padding: 8px 16px;
+            border-radius: 12px;
+            width: fit-content;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .trend-up {
+            color: var(--success);
+            background: var(--success-bg);
+            border: 2px solid var(--success);
+        }
+        .trend-down {
+            color: var(--danger);
+            background: var(--danger-bg);
+            border: 2px solid var(--danger);
+        }
+        .trend-neutral {
+            color: var(--info);
+            background: var(--info-bg);
+            border: 2px solid var(--info);
+        }
+        /* Tabs */
+        .tabs {
+            display: flex;
+            gap: 6px;
+            margin-bottom: 24px;
+            overflow-x: auto;
+            padding: 8px;
+            background: var(--bg-card);
+            border-radius: var(--radius-lg);
+            border: 2px solid var(--border);
+            box-shadow: var(--shadow-sm);
+        }
+        .tab {
+            padding: 12px 20px;
+            border-radius: 12px;
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            transition: all 0.25s;
+            white-space: nowrap;
+            font-weight: 700;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .tab:hover:not(.active) {
+            background: var(--bg-hover);
+            color: var(--text-primary);
+        }
+        .tab.active {
+            background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
+            color: white;
+            box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
+            transform: scale(1.05);
+        }
+        .tab .icon {
+            width: 16px;
+            height: 16px;
+        }
+        /* Tab Content */
+        .tab-content {
+            display: none;
+            animation: fadeIn 0.4s ease;
+        }
+        .tab-content.active {
+            display: block;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        /* Card */
+        .card {
+            background: var(--bg-card);
+            border: 2px solid var(--border);
+            border-radius: var(--radius-lg);
+            padding: 28px;
+            margin-bottom: 24px;
+            box-shadow: var(--shadow);
+            transition: var(--transition);
+        }
+        .card:hover {
+            box-shadow: var(--shadow-lg);
+        }
+        .card-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 24px;
+            padding-bottom: 16px;
+            border-bottom: 2px solid var(--border);
+        }
+        .card-title {
+            font-size: 20px;
+            font-weight: 800;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            color: var(--text-primary);
+        }
+        .card-actions {
+            display: flex;
+            gap: 8px;
+        }
+        /* Table */
+        .table-container {
+            overflow-x: auto;
+            border-radius: var(--radius);
+            border: 2px solid var(--border);
+        }
+        .table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        .table thead {
+            background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
+        }
+        .table thead th {
+            color: white;
+            font-weight: 700;
+            font-size: 13px;
+            text-align: left;
+            padding: 16px;
+            text-transform: uppercase;
+            letter-spacing: 0.8px;
+        }
+        .table tbody tr {
+            transition: var(--transition);
+            border-bottom: 1px solid var(--border);
+        }
+        .table tbody tr:hover {
+            background: var(--bg-hover);
+        }
+        .table tbody td {
+            padding: 16px;
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        /* Badge */
+        .badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 12px;
+            border-radius: 999px;
+            font-size: 12px;
+            font-weight: 700;
+            white-space: nowrap;
+        }
+        .badge-success {
+            background: var(--success-bg);
+            color: var(--success);
+            border: 2px solid var(--success);
+        }
+        .badge-warning {
+            background: var(--warning-bg);
+            color: var(--warning);
+            border: 2px solid var(--warning);
+        }
+        .badge-danger {
+            background: var(--danger-bg);
+            color: var(--danger);
+            border: 2px solid var(--danger);
+        }
+        .badge-info {
+            background: var(--info-bg);
+            color: var(--info);
+            border: 2px solid var(--info);
+        }
+        /* Progress Bar */
+        .progress {
+            height: 12px;
+            background: var(--bg-hover);
+            border-radius: 999px;
+            overflow: hidden;
+            margin: 8px 0;
+            border: 2px solid var(--border);
+        }
+        .progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, #8b5cf6, #a78bfa);
+            border-radius: 999px;
+            transition: width 0.5s ease;
+        }
+        .progress-bar.success {
+            background: linear-gradient(90deg, var(--success), #34d399);
+        }
+        .progress-bar.warning {
+            background: linear-gradient(90deg, var(--warning), #fbbf24);
+        }
+        .progress-bar.danger {
+            background: linear-gradient(90deg, var(--danger), #f87171);
+        }
+        /* Chart Container */
+        .chart-container {
+            position: relative;
+            height: 320px;
+            margin: 20px 0;
+            background: var(--bg-secondary);
+            border-radius: var(--radius);
+            padding: 16px;
+            border: 2px solid var(--border);
+        }
+        /* Loading */
+        .loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(8px);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 9999;
+        }
+        .loading-overlay.active {
+            display: flex;
+        }
+        .spinner {
+            width: 60px;
+            height: 60px;
+            border: 6px solid var(--border);
+            border-top-color: var(--accent-primary);
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .loading-inline {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 40px;
+            color: var(--text-muted);
+        }
+        .spinner-inline {
+            width: 32px;
+            height: 32px;
+            border: 3px solid var(--border);
+            border-top-color: var(--accent-primary);
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            margin-right: 12px;
+        }
+        /* Toast */
+        .toast-container {
+            position: fixed;
+            bottom: 24px;
+            right: 24px;
+            z-index: 10000;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            max-width: 400px;
+        }
+        .toast {
+            padding: 16px 20px;
+            border-radius: var(--radius);
+            background: var(--bg-card);
+            border: 2px solid var(--border);
+            box-shadow: var(--shadow-lg);
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            animation: slideInRight 0.3s ease;
+            min-width: 300px;
+        }
+        @keyframes slideInRight {
+            from { transform: translateX(400px); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        .toast.success { border-color: var(--success); background: var(--success-bg); }
+        .toast.error { border-color: var(--danger); background: var(--danger-bg); }
+        .toast.warning { border-color: var(--warning); background: var(--warning-bg); }
+        .toast.info { border-color: var(--info); background: var(--info-bg); }
+        .toast-content { flex: 1; }
+        .toast-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
+        .toast-message { font-size: 13px; color: var(--text-secondary); }
+        /* Alert */
+        .alert {
+            padding: 18px 24px;
+            border-radius: var(--radius);
+            margin-bottom: 16px;
+            display: flex;
+            align-items: flex-start;
+            gap: 14px;
+            border-left: 6px solid;
+            box-shadow: var(--shadow-sm);
+        }
+        .alert-success { background: var(--success-bg); border-color: var(--success); color: var(--success); }
+        .alert-warning { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
+        .alert-danger { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
+        .alert-info { background: var(--info-bg); border-color: var(--info); color: var(--info); }
+        .alert-content { flex: 1; }
+        .alert-title { font-weight: 800; margin-bottom: 6px; font-size: 15px; }
+        .alert-message { font-size: 14px; opacity: 0.9; }
+        /* Grid */
+        .grid { display: grid; gap: 20px; }
+        .grid-2 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
+        .grid-3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
+        /* Input */
+        .input {
+            width: 100%;
+            padding: 12px 16px;
+            border-radius: var(--radius);
+            border: 2px solid var(--border);
+            background: var(--bg-card);
+            color: var(--text-primary);
+            font-family: inherit;
+            font-size: 14px;
+            transition: var(--transition);
+        }
+        .input:focus {
+            outline: none;
+            border-color: var(--accent-primary);
+            box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            .container { padding: 16px; }
+            .header-top { flex-direction: column; align-items: flex-start; }
+            .kpi-grid { grid-template-columns: 1fr; }
+            .grid-2, .grid-3 { grid-template-columns: 1fr; }
+            .card-header { flex-direction: column; align-items: flex-start; gap: 16px; }
+            .card-actions { width: 100%; justify-content: flex-end; }
+        }
+    </style>
+</head>
+<body>
+    <div class="loading-overlay" id="loadingOverlay">
+        <div class="spinner"></div>
+    </div>
+    <div class="toast-container" id="toastContainer"></div>
+    <div class="container">
+        <div class="header">
+            <div class="header-top">
+                <div class="logo">
+                    <div class="logo-icon">
+                        <svg class="icon icon-lg" style="stroke: white;">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <path d="M12 6v6l4 2"></path>
+                        </svg>
+                    </div>
+                    <div class="logo-text">
+                        <h1>Crypto API Monitor</h1>
+                        <p>Real-time Cryptocurrency API Resource Monitoring</p>
+                    </div>
+                </div>
+                <div class="header-actions">
+                    <div class="connection-status" id="wsStatus">
+                        <span class="status-dot"></span>
+                        <span id="wsStatusText">Connecting...</span>
+                    </div>
+                    <div class="status-badge" id="systemStatus">
+                        <span class="status-dot"></span>
+                        <span id="systemStatusText">System Active</span>
+                    </div>
+                    <button class="btn" onclick="refreshAll()">
+                        <svg class="icon">
+                            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path>
+                        </svg>
+                        Refresh All
+                    </button>
+                </div>
+            </div>
+            <div class="kpi-grid" id="kpiGrid">
+                <div class="kpi-card">
+                    <div class="kpi-header">
+                        <span class="kpi-label">Total APIs</span>
+                        <div class="kpi-icon-wrapper" style="background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);">
+                            <svg class="icon icon-lg" style="stroke: #3b82f6;">
+                                <rect x="3" y="3" width="18" height="18" rx="2"></rect>
+                                <line x1="3" y1="9" x2="21" y2="9"></line>
+                                <line x1="9" y1="21" x2="9" y2="9"></line>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="kpi-value" id="kpiTotalAPIs">--</div>
+                    <div class="kpi-trend trend-neutral">
+                        <svg class="icon" style="width: 16px; height: 16px;">
+                            <path d="M12 20V10M18 20V4M6 20v-4"></path>
+                        </svg>
+                        <span id="kpiTotalTrend">Loading...</span>
+                    </div>
+                </div>
+                <div class="kpi-card">
+                    <div class="kpi-header">
+                        <span class="kpi-label">Online</span>
+                        <div class="kpi-icon-wrapper" style="background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);">
+                            <svg class="icon icon-lg" style="stroke: #10b981;">
+                                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+                                <polyline points="9 12 11 14 15 10"></polyline>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="kpi-value" id="kpiOnline">--</div>
+                    <div class="kpi-trend trend-up">
+                        <svg class="icon" style="width: 16px; height: 16px;">
+                            <line x1="12" y1="19" x2="12" y2="5"></line>
+                            <polyline points="5 12 12 5 19 12"></polyline>
+                        </svg>
+                        <span id="kpiOnlineTrend">Loading...</span>
+                    </div>
+                </div>
+                <div class="kpi-card">
+                    <div class="kpi-header">
+                        <span class="kpi-label">Avg Response</span>
+                        <div class="kpi-icon-wrapper" style="background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.1) 100%);">
+                            <svg class="icon icon-lg" style="stroke: #f59e0b;">
+                                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="kpi-value" id="kpiAvgResponse" style="font-size: 32px;">--</div>
+                    <div class="kpi-trend trend-down">
+                        <svg class="icon" style="width: 16px; height: 16px;">
+                            <line x1="12" y1="5" x2="12" y2="19"></line>
+                            <polyline points="19 12 12 19 5 12"></polyline>
+                        </svg>
+                        <span id="kpiResponseTrend">Loading...</span>
+                    </div>
+                </div>
+                <div class="kpi-card">
+                    <div class="kpi-header">
+                        <span class="kpi-label">Last Update</span>
+                        <div class="kpi-icon-wrapper" style="background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.1) 100%);">
+                            <svg class="icon icon-lg" style="stroke: #8b5cf6;">
+                                <circle cx="12" cy="12" r="10"></circle>
+                                <polyline points="12 6 12 12 16 14"></polyline>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="kpi-value" id="kpiLastUpdate" style="font-size: 20px; line-height: 1.2;">--</div>
+                    <div class="kpi-trend trend-neutral">
+                        <svg class="icon" style="width: 16px; height: 16px;">
+                            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path>
+                        </svg>
+                        <span>Auto-refresh enabled</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="tabs">
+            <div class="tab active" onclick="switchTab(event, 'dashboard')">
+                <svg class="icon">
+                    <rect x="3" y="3" width="7" height="7"></rect>
+                    <rect x="14" y="3" width="7" height="7"></rect>
+                    <rect x="14" y="14" width="7" height="7"></rect>
+                    <rect x="3" y="14" width="7" height="7"></rect>
+                </svg>
+                <span>Dashboard</span>
+            </div>
+            <div class="tab" onclick="switchTab(event, 'providers')">
+                <svg class="icon">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                    <polyline points="14 2 14 8 20 8"></polyline>
+                </svg>
+                <span>Providers</span>
+            </div>
+            <div class="tab" onclick="switchTab(event, 'categories')">
+                <svg class="icon">
+                    <rect x="3" y="3" width="18" height="18" rx="2"></rect>
+                    <line x1="3" y1="9" x2="21" y2="9"></line>
+                    <line x1="9" y1="21" x2="9" y2="9"></line>
+                </svg>
+                <span>Categories</span>
+            </div>
+            <div class="tab" onclick="switchTab(event, 'ratelimits')">
+                <svg class="icon">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <polyline points="12 6 12 12 16 14"></polyline>
+                </svg>
+                <span>Rate Limits</span>
+            </div>
+            <div class="tab" onclick="switchTab(event, 'logs')">
+                <svg class="icon">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                    <polyline points="14 2 14 8 20 8"></polyline>
+                    <line x1="16" y1="13" x2="8" y2="13"></line>
+                </svg>
+                <span>Logs</span>
+            </div>
+            <div class="tab" onclick="switchTab(event, 'alerts')">
+                <svg class="icon">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <line x1="12" y1="8" x2="12" y2="12"></line>
+                    <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                </svg>
+                <span>Alerts</span>
+            </div>
+            <div class="tab" onclick="switchTab(event, 'huggingface')">
+                <svg class="icon">
+                    <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"></path>
+                    <circle cx="12" cy="12" r="3"></circle>
+                </svg>
+                <span>HuggingFace</span>
+            </div>
+        </div>
+        <!-- Dashboard Tab -->
+        <div class="tab-content active" id="tab-dashboard">
+            <div id="alertsContainer"></div>
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">
+                        <svg class="icon icon-lg">
+                            <rect x="3" y="3" width="7" height="7"></rect>
+                            <rect x="14" y="3" width="7" height="7"></rect>
+                        </svg>
+                        System Overview
+                    </h2>
+                    <button class="btn btn-secondary" onclick="loadProviders()">
+                        <svg class="icon">
+                            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path>
+                        </svg>
+                        Refresh
+                    </button>
+                </div>
+                <div class="table-container">
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th>Provider</th>
+                                <th>Category</th>
+                                <th>Status</th>
+                                <th>Response Time</th>
+                                <th>Last Check</th>
+                            </tr>
+                        </thead>
+                        <tbody id="providersTableBody">
+                            <tr>
+                                <td colspan="5">
+                                    <div class="loading-inline">
+                                        <div class="spinner-inline"></div>
+                                        Loading providers...
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="grid grid-2">
+                <div class="card">
+                    <div class="card-header">
+                        <h2 class="card-title">
+                            <svg class="icon icon-lg">
+                                <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
+                            </svg>
+                            Health Status
+                        </h2>
+                    </div>
+                    <div class="chart-container">
+                        <canvas id="healthChart"></canvas>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-header">
+                        <h2 class="card-title">
+                            <svg class="icon icon-lg">
+                                <path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path>
+                            </svg>
+                            Status Distribution
+                        </h2>
+                    </div>
+                    <div class="chart-container">
+                        <canvas id="statusChart"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Providers Tab -->
+        <div class="tab-content" id="tab-providers">
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">
+                        <svg class="icon icon-lg">
+                            <circle cx="12" cy="12" r="10"></circle>
+                        </svg>
+                        All Providers
+                    </h2>
+                    <button class="btn btn-secondary" onclick="loadProviders()">
+                        <svg class="icon">
+                            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path>
+                        </svg>
+                        Refresh
+                    </button>
+                </div>
+                <div id="providersDetail">
+                    <div class="loading-inline">
+                        <div class="spinner-inline"></div>
+                        Loading providers details...
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Categories Tab -->
+        <div class="tab-content" id="tab-categories">
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">
+                        <svg class="icon icon-lg">
+                            <rect x="3" y="3" width="18" height="18" rx="2"></rect>
+                            <line x1="3" y1="9" x2="21" y2="9"></line>
+                        </svg>
+                        Categories Overview
+                    </h2>
+                    <button class="btn btn-secondary" onclick="loadCategories()">
+                        <svg class="icon">
+                            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path>
+                        </svg>
+                        Refresh
+                    </button>
+                </div>
+                <div class="table-container">
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th>Category</th>
+                                <th>Total Sources</th>
+                                <th>Online</th>
+                                <th>Health %</th>
+                                <th>Avg Response</th>
+                                <th>Last Updated</th>
+                                <th>Status</th>
+                            </tr>
+                        </thead>
+                        <tbody id="categoriesTableBody">
+                            <tr>
+                                <td colspan="7">
+                                    <div class="loading-inline">
+                                        <div class="spinner-inline"></div>
+                                        Loading categories...
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <!-- Rate Limits Tab -->
+        <div class="tab-content" id="tab-ratelimits">
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">
+                        <svg class="icon icon-lg">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <polyline points="12 6 12 12 16 14"></polyline>
+                        </svg>
+                        Rate Limit Monitor
+                    </h2>
+                    <button class="btn btn-secondary" onclick="loadRateLimits()">
+                        <svg class="icon">
+                            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path>
+                        </svg>
+                        Refresh
+                    </button>
+                </div>
+                <div id="rateLimitCards" class="grid grid-2">
+                    <div class="loading-inline">
+                        <div class="spinner-inline"></div>
+                        Loading rate limits...
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Logs Tab -->
+        <div class="tab-content" id="tab-logs">
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">
+                        <svg class="icon icon-lg">
+                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                            <polyline points="14 2 14 8 20 8"></polyline>
+                        </svg>
+                        Connection Logs
+                    </h2>
+                    <div class="card-actions">
+                        <select id="logType" class="input" style="width: auto; padding: 10px 16px;" onchange="loadLogs()">
+                            <option value="connection">Connection</option>
+                            <option value="error">Error</option>
+                            <option value="rate_limit">Rate Limit</option>
+                            <option value="all">All</option>
+                        </select>
+                        <button class="btn btn-secondary" onclick="loadLogs()">
+                            <svg class="icon">
+                                <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path>
+                            </svg>
+                            Refresh
+                        </button>
+                    </div>
+                </div>
+                <div class="table-container">
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th>Timestamp</th>
+                                <th>Provider</th>
+                                <th>Type</th>
+                                <th>Status</th>
+                                <th>Response Time</th>
+                                <th>Message</th>
+                            </tr>
+                        </thead>
+                        <tbody id="logsTableBody">
+                            <tr>
+                                <td colspan="6">
+                                    <div class="loading-inline">
+                                        <div class="spinner-inline"></div>
+                                        Loading logs...
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <!-- Alerts Tab -->
+        <div class="tab-content" id="tab-alerts">
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">
+                        <svg class="icon icon-lg">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <line x1="12" y1="8" x2="12" y2="12"></line>
+                            <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                        </svg>
+                        System Alerts
+                    </h2>
+                    <button class="btn btn-secondary" onclick="loadAlerts()">
+                        <svg class="icon">
+                            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path>
+                        </svg>
+                        Refresh
+                    </button>
+                </div>
+                <div id="alertsList">
+                    <div class="loading-inline">
+                        <div class="spinner-inline"></div>
+                        Loading alerts...
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- HuggingFace Tab -->
+        <div class="tab-content" id="tab-huggingface">
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">
+                        <svg class="icon icon-lg">
+                            <circle cx="12" cy="12" r="10"></circle>
+                        </svg>
+                        🤗 HuggingFace Health Status
+                    </h2>
+                    <div class="card-actions">
+                        <button class="btn" onclick="refreshHFRegistry()">
+                            <svg class="icon">
+                                <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path>
+                            </svg>
+                            Refresh Registry
+                        </button>
+                    </div>
+                </div>
+                <div id="hfHealthDisplay" style="padding: 20px; background: var(--bg-secondary); border-radius: var(--radius); font-family: monospace; font-size: 13px; white-space: pre-wrap; max-height: 300px; overflow-y: auto; border: 2px solid var(--border);">
+                    Loading HF health status...
+                </div>
+            </div>
+            <div class="grid grid-2">
+                <div class="card">
+                    <div class="card-header">
+                        <h2 class="card-title">
+                            Models Registry
+                            <span class="badge badge-success" id="hfModelsCount">0</span>
+                        </h2>
+                    </div>
+                    <div id="hfModelsList" style="max-height: 400px; overflow-y: auto;">
+                        <div class="loading-inline">
+                            <div class="spinner-inline"></div>
+                            Loading models...
+                        </div>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-header">
+                        <h2 class="card-title">
+                            Datasets Registry
+                            <span class="badge badge-success" id="hfDatasetsCount">0</span>
+                        </h2>
+                    </div>
+                    <div id="hfDatasetsList" style="max-height: 400px; overflow-y: auto;">
+                        <div class="loading-inline">
+                            <div class="spinner-inline"></div>
+                            Loading datasets...
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">
+                        <svg class="icon icon-lg">
+                            <circle cx="11" cy="11" r="8"></circle>
+                            <path d="m21 21-4.35-4.35"></path>
+                        </svg>
+                        Search Registry
+                    </h2>
+                </div>
+                <div style="display: flex; gap: 12px; margin-bottom: 20px;">
+                    <input type="text" id="hfSearchQuery" placeholder="Search crypto, bitcoin, sentiment..." class="input" style="flex: 1;" value="crypto">
+                    <select id="hfSearchKind" class="input" style="width: auto; padding: 12px 16px;">
+                        <option value="models">Models</option>
+                        <option value="datasets">Datasets</option>
+                    </select>
+                    <button class="btn" onclick="searchHF()">
+                        <svg class="icon">
+                            <circle cx="11" cy="11" r="8"></circle>
+                            <path d="m21 21-4.35-4.35"></path>
+                        </svg>
+                        Search
+                    </button>
+                </div>
+                <div id="hfSearchResults" style="max-height: 400px; overflow-y: auto; padding: 20px; background: var(--bg-secondary); border-radius: var(--radius); border: 2px solid var(--border);">
+                    <div style="text-align: center; color: var(--text-muted);">Enter a query and click search</div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">💭 Sentiment Analysis</h2>
+                </div>
+                <div style="margin-bottom: 16px;">
+                    <label style="display: block; font-weight: 700; margin-bottom: 8px; color: var(--text-primary);">Text Samples (one per line)</label>
+                    <textarea id="hfSentimentTexts" rows="6" class="input" placeholder="BTC strong breakout&#10;ETH looks weak&#10;Crypto market is bullish today">BTC strong breakout
+ETH looks weak
+Crypto market is bullish today
+Bears are taking control
+Neutral market conditions</textarea>
+                </div>
+                <button class="btn" onclick="runHFSentiment()">
+                    <svg class="icon">
+                        <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"></path>
+                    </svg>
+                    Run Sentiment Analysis
+                </button>
+                <div id="hfSentimentVote" style="margin: 20px 0; padding: 20px; background: var(--bg-secondary); border-radius: var(--radius); text-align: center; font-size: 32px; font-weight: 900; border: 2px solid var(--border);">
+                    <span style="color: var(--text-muted);">—</span>
+                </div>
+                <div id="hfSentimentResults" style="padding: 20px; background: var(--bg-secondary); border-radius: var(--radius); font-family: monospace; font-size: 13px; white-space: pre-wrap; max-height: 400px; overflow-y: auto; border: 2px solid var(--border);">
+                    Results will appear here...
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Configuration
+        const config = {
+            apiBaseUrl: window.location.origin,
+            wsUrl: (() => {
+                const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+                const host = window.location.host;
+                return `${protocol}//${host}/ws/live`;
+            })(),
+            autoRefreshInterval: 30000,
+            maxRetries: 3
+        };
+        // Global state
+        let state = {
+            ws: null,
+            wsConnected: false,
+            autoRefreshEnabled: true,
+            charts: {},
+            currentTab: 'dashboard',
+            providers: [],
+            categories: [],
+            rateLimits: [],
+            logs: [],
+            alerts: [],
+            lastUpdate: null
+        };
+        // Initialize on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('🚀 Initializing Crypto API Monitor...');
+            console.log('📍 API Base URL:', config.apiBaseUrl);
+            console.log('📡 WebSocket URL:', config.wsUrl);
+            initializeWebSocket();
+            loadInitialData();
+            startAutoRefresh();
+        });
+        // WebSocket Connection
+        function initializeWebSocket() {
+            updateWSStatus('connecting');
+            try {
+                state.ws = new WebSocket(config.wsUrl);
+                state.ws.onopen = () => {
+                    console.log('✅ WebSocket connected');
+                    state.wsConnected = true;
+                    updateWSStatus('connected');
+                    showToast('Connected', 'Real-time data stream active', 'success');
+                };
+                state.ws.onmessage = (event) => {
+                    try {
+                        const data = JSON.parse(event.data);
+                        handleWSMessage(data);
+                    } catch (error) {
+                        console.error('Error parsing WebSocket message:', error);
+                    }
+                };
+                state.ws.onerror = (error) => {
+                    console.error('❌ WebSocket error:', error);
+                    updateWSStatus('disconnected');
+                };
+                state.ws.onclose = () => {
+                    console.log('⚠️ WebSocket disconnected');
+                    state.wsConnected = false;
+                    updateWSStatus('disconnected');
+                };
+            } catch (error) {
+                console.log('⚠️ WebSocket not available - using polling mode');
+                updateWSStatus('disconnected');
+            }
+        }
+        function updateWSStatus(status) {
+            const statusEl = document.getElementById('wsStatus');
+            const textEl = document.getElementById('wsStatusText');
+            statusEl.classList.remove('connected', 'disconnected', 'connecting');
+            statusEl.classList.add(status);
+            const statusText = {
+                'connected': '✓ Connected',
+                'disconnected': '✗ Disconnected',
+                'connecting': '⟳ Connecting...'
+            };
+            textEl.textContent = statusText[status] || 'Unknown';
+        }
+        function handleWSMessage(data) {
+            console.log('📨 WebSocket message:', data.type);
+            switch(data.type) {
+                case 'status_update':
+                    updateKPIs(data.data);
+                    break;
+                case 'provider_status_change':
+                    loadProviders();
+                    break;
+                case 'new_alert':
+                    addAlert(data.data);
+                    break;
+                default:
+                    console.log('Unknown message type:', data.type);
+            }
+        }
+        // API Calls
+        async function apiCall(endpoint, options = {}) {
+            try {
+                const url = `${config.apiBaseUrl}${endpoint}`;
+                console.log('🌐 API Call:', url);
+                const response = await fetch(url, {
+                    ...options,
+                    headers: {
+                        'Content-Type': 'application/json',
+                        ...options.headers
+                    }
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                }
+                const data = await response.json();
+                console.log('✅ API Response:', endpoint, data);
+                return data;
+            } catch (error) {
+                console.error(`❌ API call failed: ${endpoint}`, error);
+                showToast('API Error', `Failed: ${endpoint}`, 'error');
+                throw error;
+            }
+        }
+        async function loadInitialData() {
+            showLoading();
+            try {
+                console.log('📊 Loading initial data...');
+                await loadHealth();
+                await loadProviders();
+                await loadSystemInfo();
+                initializeCharts();
+                state.lastUpdate = new Date();
+                updateLastUpdateDisplay();
+                console.log('✅ Initial data loaded successfully');
+                showToast('Success', 'Dashboard loaded successfully', 'success');
+            } catch (error) {
+                console.error('❌ Error loading initial data:', error);
+                showToast('Error', 'Failed to load initial data', 'error');
+            } finally {
+                hideLoading();
+            }
+        }
+        async function loadHealth() {
+            try {
+                const data = await apiCall('/health');
+                updateKPIs(data.components);
+                const statusBadge = document.getElementById('systemStatus');
+                const statusText = document.getElementById('systemStatusText');
+                if (data.status === 'healthy') {
+                    statusBadge.style.background = 'linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.08))';
+                    statusBadge.style.borderColor = 'rgba(16, 185, 129, 0.4)';
+                    statusBadge.style.color = 'var(--success)';
+                    statusText.textContent = '✓ System Healthy';
+                } else if (data.status === 'degraded') {
+                    statusBadge.style.background = 'linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.08))';
+                    statusBadge.style.borderColor = 'rgba(245, 158, 11, 0.4)';
+                    statusBadge.style.color = 'var(--warning)';
+                    statusText.textContent = '⚠ System Degraded';
+                } else {
+                    statusBadge.style.background = 'linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.08))';
+                    statusBadge.style.borderColor = 'rgba(239, 68, 68, 0.4)';
+                    statusBadge.style.color = 'var(--danger)';
+                    statusText.textContent = '✗ System Critical';
+                }
+            } catch (error) {
+                console.error('Error loading health:', error);
+            }
+        }
+        async function loadSystemInfo() {
+            try {
+                const data = await apiCall('/info');
+                console.log('📋 System Info:', data);
+            } catch (error) {
+                console.error('Error loading system info:', error);
+            }
+        }
+        async function loadProviders() {
+            try {
+                const data = await apiCall('/api/providers');
+                state.providers = data;
+                renderProvidersTable(data);
+                renderProvidersDetail(data);
+                updateStatusChart(data);
+            } catch (error) {
+                console.error('Error loading providers:', error);
+                document.getElementById('providersTableBody').innerHTML = `
+                    <tr>
+                        <td colspan="5" style="text-align: center; color: var(--text-muted); padding: 40px;">
+                            Failed to load providers
+                        </td>
+                    </tr>
+                `;
+            }
+        }
+        async function loadCategories() {
+            try {
+                showLoading();
+                const data = await apiCall('/api/categories');
+                state.categories = data;
+                renderCategoriesTable(data);
+                showToast('Success', 'Categories loaded successfully', 'success');
+            } catch (error) {
+                console.error('Error loading categories:', error);
+                showToast('Error', 'Failed to load categories', 'error');
+            } finally {
+                hideLoading();
+            }
+        }
+        async function loadRateLimits() {
+            try {
+                showLoading();
+                const data = await apiCall('/api/rate-limits');
+                state.rateLimits = data;
+                renderRateLimitCards(data);
+                showToast('Success', 'Rate limits loaded successfully', 'success');
+            } catch (error) {
+                console.error('Error loading rate limits:', error);
+                showToast('Error', 'Failed to load rate limits', 'error');
+            } finally {
+                hideLoading();
+            }
+        }
+        async function loadLogs() {
+            try {
+                showLoading();
+                const logType = document.getElementById('logType').value;
+                const data = await apiCall(`/api/logs?type=${logType}`);
+                state.logs = data;
+                renderLogsTable(data);
+                showToast('Success', 'Logs loaded successfully', 'success');
+            } catch (error) {
+                console.error('Error loading logs:', error);
+                showToast('Error', 'Failed to load logs', 'error');
+            } finally {
+                hideLoading();
+            }
+        }
+        async function loadAlerts() {
+            try {
+                showLoading();
+                const data = await apiCall('/api/alerts');
+                state.alerts = data;
+                renderAlertsList(data);
+                showToast('Success', 'Alerts loaded successfully', 'success');
+            } catch (error) {
+                console.error('Error loading alerts:', error);
+                showToast('Error', 'Failed to load alerts', 'error');
+            } finally {
+                hideLoading();
+            }
+        }
+        // HuggingFace APIs
+        async function loadHFHealth() {
+            try {
+                const data = await apiCall('/api/hf/health');
+                document.getElementById('hfHealthDisplay').textContent = JSON.stringify(data, null, 2);
+            } catch (error) {
+                console.error('Error loading HF health:', error);
+                document.getElementById('hfHealthDisplay').textContent = 'Error loading health status';
+            }
+        }
+        async function refreshHFRegistry() {
+            try {
+                showLoading();
+                const data = await apiCall('/api/hf/refresh', { method: 'POST' });
+                showToast('Success', 'HF Registry refreshed', 'success');
+                loadHFModels();
+                loadHFDatasets();
+            } catch (error) {
+                console.error('Error refreshing HF registry:', error);
+                showToast('Error', 'Failed to refresh registry', 'error');
+            } finally {
+                hideLoading();
+            }
+        }
+        async function loadHFModels() {
+            try {
+                const data = await apiCall('/api/hf/registry?type=models');
+                document.getElementById('hfModelsCount').textContent = data.length || 0;
+                document.getElementById('hfModelsList').innerHTML = data.map(item => `
+                    <div style="padding: 12px; border-bottom: 1px solid var(--border);">
+                        <div style="font-weight: 700; margin-bottom: 4px;">${item.id || 'Unknown'}</div>
+                        <div style="font-size: 12px; color: var(--text-muted);">${item.description || 'No description'}</div>
+                    </div>
+                `).join('');
+            } catch (error) {
+                console.error('Error loading HF models:', error);
+                document.getElementById('hfModelsList').innerHTML = '<div style="padding: 20px; text-align: center; color: var(--text-muted);">Error loading models</div>';
+            }
+        }
+        async function loadHFDatasets() {
+            try {
+                const data = await apiCall('/api/hf/registry?type=datasets');
+                document.getElementById('hfDatasetsCount').textContent = data.length || 0;
+                document.getElementById('hfDatasetsList').innerHTML = data.map(item => `
+                    <div style="padding: 12px; border-bottom: 1px solid var(--border);">
+                        <div style="font-weight: 700; margin-bottom: 4px;">${item.id || 'Unknown'}</div>
+                        <div style="font-size: 12px; color: var(--text-muted);">${item.description || 'No description'}</div>
+                    </div>
+                `).join('');
+            } catch (error) {
+                console.error('Error loading HF datasets:', error);
+                document.getElementById('hfDatasetsList').innerHTML = '<div style="padding: 20px; text-align: center; color: var(--text-muted);">Error loading datasets</div>';
+            }
+        }
+        async function searchHF() {
+            try {
+                showLoading();
+                const query = document.getElementById('hfSearchQuery').value;
+                const kind = document.getElementById('hfSearchKind').value;
+                const data = await apiCall(`/api/hf/search?q=${encodeURIComponent(query)}&kind=${kind}`);
+                document.getElementById('hfSearchResults').innerHTML = data.map(item => `
+                    <div style="padding: 12px; border-bottom: 1px solid var(--border);">
+                        <div style="font-weight: 700; margin-bottom: 4px;">${item.id || 'Unknown'}</div>
+                        <div style="font-size: 12px; color: var(--text-muted); margin-bottom: 4px;">${item.description || 'No description'}</div>
+                        <div style="font-size: 11px; color: var(--accent-primary);">Downloads: ${item.downloads || 0} • Likes: ${item.likes || 0}</div>
+                    </div>
+                `).join('');
+                showToast('Success', `Found ${data.length} results`, 'success');
+            } catch (error) {
+                console.error('Error searching HF:', error);
+                showToast('Error', 'Search failed', 'error');
+            } finally {
+                hideLoading();
+            }
+        }
+        async function runHFSentiment() {
+            try {
+                showLoading();
+                const texts = document.getElementById('hfSentimentTexts').value.split('\n').filter(t => t.trim());
+                const data = await apiCall('/api/hf/run-sentiment', {
+                    method: 'POST',
+                    body: JSON.stringify({ texts: texts })
+                });
+                document.getElementById('hfSentimentResults').textContent = JSON.stringify(data, null, 2);
+                // Calculate overall sentiment vote
+                const sentiments = data.results || [];
+                const positive = sentiments.filter(s => s.sentiment === 'positive').length;
+                const negative = sentiments.filter(s => s.sentiment === 'negative').length;
+                const neutral = sentiments.filter(s => s.sentiment === 'neutral').length;
+                let overall = 'NEUTRAL';
+                let color = 'var(--info)';
+                if (positive > negative && positive > neutral) {
+                    overall = 'BULLISH 📈';
+                    color = 'var(--success)';
+                } else if (negative > positive && negative > neutral) {
+                    overall = 'BEARISH 📉';
+                    color = 'var(--danger)';
+                }
+                document.getElementById('hfSentimentVote').innerHTML = `
+                    <span style="color: ${color};">${overall}</span>
+                    <div style="font-size: 14px; margin-top: 8px; color: var(--text-muted);">
+                        Positive: ${positive} • Negative: ${negative} • Neutral: ${neutral}
+                    </div>
+                `;
+                showToast('Success', 'Sentiment analysis completed', 'success');
+            } catch (error) {
+                console.error('Error running sentiment analysis:', error);
+                showToast('Error', 'Sentiment analysis failed', 'error');
+            } finally {
+                hideLoading();
+            }
+        }
+        // Rendering Functions
+        function renderProvidersTable(providers) {
+            const tbody = document.getElementById('providersTableBody');
+            if (!providers || providers.length === 0) {
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="5" style="text-align: center; color: var(--text-muted); padding: 40px;">
+                            No providers found
+                        </td>
+                    </tr>
+                `;
+                return;
+            }
+            tbody.innerHTML = providers.map(provider => `
+                <tr>
+                    <td>
+                        <strong>${provider.name || 'Unknown'}</strong>
+                        <div style="font-size: 12px; color: var(--text-muted);">${provider.base_url || ''}</div>
+                    </td>
+                    <td>${provider.category || 'General'}</td>
+                    <td>
+                        <span class="badge ${getStatusBadgeClass(provider.status)}">
+                            ${provider.status || 'unknown'}
+                        </span>
+                    </td>
+                    <td>${provider.response_time ? provider.response_time + 'ms' : '--'}</td>
+                    <td>
+                        <div style="font-size: 12px; font-weight: 700;">${formatTimestamp(provider.last_checked)}</div>
+                        <div style="font-size: 11px; color: var(--text-muted);">${formatTimeAgo(provider.last_checked)}</div>
+                    </td>
+                </tr>
+            `).join('');
+        }
+        function renderProvidersDetail(providers) {
+            const container = document.getElementById('providersDetail');
+            if (!providers || providers.length === 0) {
+                container.innerHTML = `
+                    <div style="text-align: center; color: var(--text-muted); padding: 40px;">
+                        No providers data available
+                    </div>
+                `;
+                return;
+            }
+            container.innerHTML = `
+                <div class="table-container">
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th>Provider</th>
+                                <th>Status</th>
+                                <th>Response Time</th>
+                                <th>Success Rate</th>
+                                <th>Last Success</th>
+                                <th>Errors (24h)</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            ${providers.map(provider => `
+                                <tr>
+                                    <td>
+                                        <strong>${provider.name || 'Unknown'}</strong>
+                                        <div style="font-size: 12px; color: var(--text-muted);">${provider.base_url || ''}</div>
+                                    </td>
+                                    <td>
+                                        <span class="badge ${getStatusBadgeClass(provider.status)}">
+                                            ${provider.status || 'unknown'}
+                                        </span>
+                                    </td>
+                                    <td>${provider.response_time ? provider.response_time + 'ms' : '--'}</td>
+                                    <td>
+                                        <div class="progress">
+                                            <div class="progress-bar ${getHealthClass(provider.success_rate || 0)}"
+                                                 style="width: ${provider.success_rate || 0}%"></div>
+                                        </div>
+                                        <small>${Math.round(provider.success_rate || 0)}%</small>
+                                    </td>
+                                    <td>${formatTimestamp(provider.last_success)}</td>
+                                    <td>${provider.error_count_24h || 0}</td>
+                                </tr>
+                            `).join('')}
+                        </tbody>
+                    </table>
+                </div>
+            `;
+        }
+        function renderCategoriesTable(categories) {
+            const tbody = document.getElementById('categoriesTableBody');
+            if (!categories || categories.length === 0) {
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="7" style="text-align: center; color: var(--text-muted); padding: 40px;">
+                            No categories found
+                        </td>
+                    </tr>
+                `;
+                return;
+            }
+            tbody.innerHTML = categories.map(category => `
+                <tr>
+                    <td>
+                        <strong>${category.name || 'Unnamed'}</strong>
+                    </td>
+                    <td>${category.total_sources || 0}</td>
+                    <td>${category.online || 0}</td>
+                    <td>
+                        <div class="progress">
+                            <div class="progress-bar ${getHealthClass(category.health_percentage || 0)}"
+                                 style="width: ${category.health_percentage || 0}%"></div>
+                        </div>
+                        <small>${Math.round(category.health_percentage || 0)}%</small>
+                    </td>
+                    <td>${category.avg_response || '--'}ms</td>
+                    <td>${formatTimestamp(category.last_updated)}</td>
+                    <td>
+                        <span class="badge ${getStatusBadgeClass(category.status)}">
+                            ${category.status || 'unknown'}
+                        </span>
+                    </td>
+                </tr>
+            `).join('');
+        }
+        function renderRateLimitCards(rateLimits) {
+            const container = document.getElementById('rateLimitCards');
+            if (!rateLimits || rateLimits.length === 0) {
+                container.innerHTML = `
+                    <div class="card" style="grid-column: 1 / -1; text-align: center; padding: 40px;">
+                        <div style="color: var(--text-muted); font-size: 16px;">
+                            No rate limit data available
+                        </div>
+                    </div>
+                `;
+                return;
+            }
+            container.innerHTML = rateLimits.map(limit => `
+                <div class="card">
+                    <div class="card-header">
+                        <h3 class="card-title" style="font-size: 16px;">
+                            ${limit.provider || 'Unknown Provider'}
+                        </h3>
+                        <span class="badge ${getRateLimitStatusClass(limit)}">
+                            ${getRateLimitStatus(limit)}
+                        </span>
+                    </div>
+                    <div style="margin-bottom: 16px;">
+                        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+                            <span style="font-size: 12px; color: var(--text-muted);">Usage</span>
+                            <span style="font-size: 12px; font-weight: 700;">
+                                ${limit.used || 0}/${limit.limit || 0}
+                            </span>
+                        </div>
+                        <div class="progress">
+                            <div class="progress-bar ${getRateLimitProgressClass(limit)}"
+                                 style="width: ${calculateUsagePercentage(limit)}%"></div>
+                        </div>
+                    </div>
+                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 12px;">
+                        <div>
+                            <div style="color: var(--text-muted);">Reset In</div>
+                            <div style="font-weight: 700;">${formatResetTime(limit.reset_time)}</div>
+                        </div>
+                        <div>
+                            <div style="color: var(--text-muted);">Window</div>
+                            <div style="font-weight: 700;">${limit.window || 'N/A'}</div>
+                        </div>
+                    </div>
+                    ${limit.endpoint ? `
+                        <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);">
+                            <div style="font-size: 11px; color: var(--text-muted);">Endpoint</div>
+                            <div style="font-size: 12px; font-family: monospace;">${limit.endpoint}</div>
+                        </div>
+                    ` : ''}
+                </div>
+            `).join('');
+        }
+        function renderLogsTable(logs) {
+            const tbody = document.getElementById('logsTableBody');
+            if (!logs || logs.length === 0) {
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="6" style="text-align: center; color: var(--text-muted); padding: 40px;">
+                            No logs found
+                        </td>
+                    </tr>
+                `;
+                return;
+            }
+            tbody.innerHTML = logs.map(log => `
+                <tr>
+                    <td>
+                        <div style="font-size: 12px; font-weight: 700;">${formatTimestamp(log.timestamp)}</div>
+                        <div style="font-size: 11px; color: var(--text-muted);">${formatTimeAgo(log.timestamp)}</div>
+                    </td>
+                    <td>
+                        <strong>${log.provider || 'System'}</strong>
+                    </td>
+                    <td>
+                        <span class="badge ${getLogTypeClass(log.type)}">
+                            ${log.type || 'unknown'}
+                        </span>
+                    </td>
+                    <td>
+                        <span class="badge ${getStatusBadgeClass(log.status)}">
+                            ${log.status || 'unknown'}
+                        </span>
+                    </td>
+                    <td>${log.response_time ? log.response_time + 'ms' : '--'}</td>
+                    <td>
+                        <div style="max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                            ${log.message || 'No message'}
+                        </div>
+                    </td>
+                </tr>
+            `).join('');
+        }
+        function renderAlertsList(alerts) {
+            const container = document.getElementById('alertsList');
+            if (!alerts || alerts.length === 0) {
+                container.innerHTML = `
+                    <div class="alert alert-success">
+                        <div class="alert-content">
+                            <div class="alert-title">No Active Alerts</div>
+                            <div class="alert-message">All systems are operating normally</div>
+                        </div>
+                    </div>
+                `;
+                return;
+            }
+            container.innerHTML = alerts.map(alert => `
+                <div class="alert ${getAlertClass(alert.severity)}">
+                    <div class="alert-content">
+                        <div class="alert-title">
+                            ${alert.title || 'Alert'}
+                            <span style="font-size: 11px; margin-left: 8px; opacity: 0.8;">
+                                ${formatTimeAgo(alert.timestamp)}
+                            </span>
+                        </div>
+                        <div class="alert-message">
+                            ${alert.message || 'No message provided'}
+                        </div>
+                        ${alert.provider ? `
+                            <div style="margin-top: 8px; font-size: 12px;">
+                                <strong>Provider:</strong> ${alert.provider}
+                            </div>
+                        ` : ''}
+                    </div>
+                </div>
+            `).join('');
+        }
+        // Helper functions
+        function getHealthClass(percentage) {
+            if (percentage >= 80) return 'success';
+            if (percentage >= 60) return 'warning';
+            return 'danger';
+        }
+        function getStatusBadgeClass(status) {
+            switch (status?.toLowerCase()) {
+                case 'healthy': case 'online': case 'success': return 'badge-success';
+                case 'degraded': case 'warning': return 'badge-warning';
+                case 'offline': case 'error': case 'critical': return 'badge-danger';
+                default: return 'badge-info';
+            }
+        }
+        function getLogTypeClass(type) {
+            switch (type?.toLowerCase()) {
+                case 'error': return 'badge-danger';
+                case 'warning': return 'badge-warning';
+                case 'info': case 'connection': return 'badge-info';
+                case 'success': return 'badge-success';
+                default: return 'badge-info';
+            }
+        }
+        function getAlertClass(severity) {
+            switch (severity?.toLowerCase()) {
+                case 'critical': case 'error': return 'alert-danger';
+                case 'warning': return 'alert-warning';
+                case 'info': return 'alert-info';
+                case 'success': return 'alert-success';
+                default: return 'alert-info';
+            }
+        }
+        function getRateLimitStatusClass(limit) {
+            const usage = calculateUsagePercentage(limit);
+            if (usage >= 90) return 'badge-danger';
+            if (usage >= 75) return 'badge-warning';
+            return 'badge-success';
+        }
+        function getRateLimitStatus(limit) {
+            const usage = calculateUsagePercentage(limit);
+            if (usage >= 90) return 'Critical';
+            if (usage >= 75) return 'Warning';
+            return 'Normal';
+        }
+        function getRateLimitProgressClass(limit) {
+            const usage = calculateUsagePercentage(limit);
+            if (usage >= 90) return 'danger';
+            if (usage >= 75) return 'warning';
+            return 'success';
+        }
+        function calculateUsagePercentage(limit) {
+            if (!limit.limit || limit.limit === 0) return 0;
+            return Math.min(100, ((limit.used || 0) / limit.limit) * 100);
+        }
+        function formatResetTime(resetTime) {
+            if (!resetTime) return 'N/A';
+            // Simple formatting - you can enhance this with proper time parsing
+            return typeof resetTime === 'string' ? resetTime : 'Soon';
+        }
+        function formatTimestamp(timestamp) {
+            if (!timestamp) return '--';
+            try {
+                return new Date(timestamp).toLocaleString();
+            } catch {
+                return 'Invalid Date';
+            }
+        }
+        function formatTimeAgo(timestamp) {
+            if (!timestamp) return '';
+            try {
+                const now = new Date();
+                const time = new Date(timestamp);
+                const diff = now - time;
+                const minutes = Math.floor(diff / 60000);
+                const hours = Math.floor(diff / 3600000);
+                const days = Math.floor(diff / 86400000);
+                if (days > 0) return `${days}d ago`;
+                if (hours > 0) return `${hours}h ago`;
+                if (minutes > 0) return `${minutes}m ago`;
+                return 'Just now';
+            } catch {
+                return 'Unknown';
+            }
+        }
+        // KPI Updates
+        function updateKPIs(data) {
+            if (!data) return;
+            // Update Total APIs
+            const totalAPIs = data.length || 0;
+            document.getElementById('kpiTotalAPIs').textContent = totalAPIs;
+            document.getElementById('kpiTotalTrend').textContent = `${totalAPIs} active`;
+            // Update Online count
+            const onlineCount = data.filter(p => p.status === 'online' || p.status === 'healthy').length;
+            document.getElementById('kpiOnline').textContent = onlineCount;
+            document.getElementById('kpiOnlineTrend').textContent = `${Math.round((onlineCount / totalAPIs) * 100)}% uptime`;
+            // Update Average Response
+            const validResponses = data.filter(p => p.response_time).map(p => p.response_time);
+            const avgResponse = validResponses.length > 0 ?
+                Math.round(validResponses.reduce((a, b) => a + b, 0) / validResponses.length) : 0;
+            document.getElementById('kpiAvgResponse').textContent = avgResponse + 'ms';
+            const responseTrend = avgResponse < 500 ? 'Optimal' : avgResponse < 1000 ? 'Acceptable' : 'Slow';
+            document.getElementById('kpiResponseTrend').textContent = responseTrend;
+            const trendElement = document.querySelector('#kpiAvgResponse').nextElementSibling;
+            trendElement.className = `kpi-trend ${
+                avgResponse < 500 ? 'trend-up' : avgResponse < 1000 ? 'trend-neutral' : 'trend-down'
+            }`;
+        }
+        function updateLastUpdateDisplay() {
+            if (state.lastUpdate) {
+                document.getElementById('kpiLastUpdate').textContent =
+                    state.lastUpdate.toLocaleTimeString() + '\n' + state.lastUpdate.toLocaleDateString();
+            }
+        }
+        // Chart Functions
+        function initializeCharts() {
+            // Health Chart
+            const healthCtx = document.getElementById('healthChart').getContext('2d');
+            state.charts.health = new Chart(healthCtx, {
+                type: 'line',
+                data: {
+                    labels: [],
+                    datasets: [{
+                        label: 'System Health %',
+                        data: [],
+                        borderColor: '#8b5cf6',
+                        backgroundColor: 'rgba(139, 92, 246, 0.1)',
+                        borderWidth: 3,
+                        fill: true,
+                        tension: 0.4
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            max: 100,
+                            grid: {
+                                color: 'rgba(139, 92, 246, 0.1)'
+                            }
+                        },
+                        x: {
+                            grid: {
+                                color: 'rgba(139, 92, 246, 0.1)'
+                            }
+                        }
+                    }
+                }
+            });
+            // Status Chart
+            const statusCtx = document.getElementById('statusChart').getContext('2d');
+            state.charts.status = new Chart(statusCtx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['Online', 'Degraded', 'Offline'],
+                    datasets: [{
+                        data: [0, 0, 0],
+                        backgroundColor: [
+                            '#10b981',
+                            '#f59e0b',
+                            '#ef4444'
+                        ],
+                        borderWidth: 0
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    cutout: '70%',
+                    plugins: {
+                        legend: {
+                            position: 'bottom'
+                        }
+                    }
+                }
+            });
+        }
+        function updateStatusChart(providers) {
+            if (!state.charts.status || !providers) return;
+            const online = providers.filter(p => p.status === 'online' || p.status === 'healthy').length;
+            const degraded = providers.filter(p => p.status === 'degraded' || p.status === 'warning').length;
+            const offline = providers.filter(p => p.status === 'offline' || p.status === 'error').length;
+            state.charts.status.data.datasets[0].data = [online, degraded, offline];
+            state.charts.status.update();
+        }
+        // Tab Management
+        function switchTab(event, tabName) {
+            // Remove active class from all tabs
+            document.querySelectorAll('.tab').forEach(tab => {
+                tab.classList.remove('active');
+            });
+            // Remove active class from all contents
+            document.querySelectorAll('.tab-content').forEach(content => {
+                content.classList.remove('active');
+            });
+            // Add active class to clicked tab
+            event.currentTarget.classList.add('active');
+            // Show corresponding content
+            document.getElementById(`tab-${tabName}`).classList.add('active');
+            // Load data for the tab
+            switch(tabName) {
+                case 'dashboard':
+                    loadProviders();
+                    break;
+                case 'providers':
+                    loadProviders();
+                    break;
+                case 'categories':
+                    loadCategories();
+                    break;
+                case 'ratelimits':
+                    loadRateLimits();
+                    break;
+                case 'logs':
+                    loadLogs();
+                    break;
+                case 'alerts':
+                    loadAlerts();
+                    break;
+                case 'huggingface':
+                    loadHFHealth();
+                    loadHFModels();
+                    loadHFDatasets();
+                    break;
+            }
+            state.currentTab = tabName;
+        }
+        // Utility Functions
+        function showLoading() {
+            document.getElementById('loadingOverlay').classList.add('active');
+        }
+        function hideLoading() {
+            document.getElementById('loadingOverlay').classList.remove('active');
+        }
+        function showToast(title, message, type = 'info') {
+            const container = document.getElementById('toastContainer');
+            const toast = document.createElement('div');
+            toast.className = `toast ${type}`;
+            toast.innerHTML = `
+                <div class="toast-content">
+                    <div class="toast-title">${title}</div>
+                    <div class="toast-message">${message}</div>
+                </div>
+                <button onclick="this.parentElement.remove()" style="background: none; border: none; cursor: pointer; color: inherit;">
+                    <svg class="icon" style="width: 16px; height: 16px;">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            `;
+            container.appendChild(toast);
+            // Auto remove after 5 seconds
+            setTimeout(() => {
+                if (toast.parentElement) {
+                    toast.remove();
+                }
+            }, 5000);
+        }
+        function addAlert(alert) {
+            const container = document.getElementById('alertsContainer');
+            const alertEl = document.createElement('div');
+            alertEl.className = `alert ${getAlertClass(alert.severity)}`;
+            alertEl.innerHTML = `
+                <div class="alert-content">
+                    <div class="alert-title">
+                        ${alert.title}
+                        <span style="font-size: 11px; margin-left: 8px; opacity: 0.8;">
+                            ${formatTimeAgo(alert.timestamp)}
+                        </span>
+                    </div>
+                    <div class="alert-message">${alert.message}</div>
+                </div>
+            `;
+            container.appendChild(alertEl);
+            // Auto remove after 10 seconds
+            setTimeout(() => {
+                if (alertEl.parentElement) {
+                    alertEl.remove();
+                }
+            }, 10000);
+        }
+        function refreshAll() {
+            console.log('🔄 Refreshing all data...');
+            loadInitialData();
+            // Refresh current tab data
+            switch(state.currentTab) {
+                case 'categories':
+                    loadCategories();
+                    break;
+                case 'ratelimits':
+                    loadRateLimits();
+                    break;
+                case 'logs':
+                    loadLogs();
+                    break;
+                case 'alerts':
+                    loadAlerts();
+                    break;
+                case 'huggingface':
+                    loadHFHealth();
+                    loadHFModels();
+                    loadHFDatasets();
+                    break;
+            }
+        }
+        function startAutoRefresh() {
+            setInterval(() => {
+                if (state.autoRefreshEnabled && state.wsConnected) {
+                    console.log('🔄 Auto-refreshing data...');
+                    refreshAll();
+                }
+            }, config.autoRefreshInterval);
+        }
+    </script>
+</body>
+</html>