fix: Replace modal with slide-out drawer panel from right side

COMPLETE REDESIGN based on user requirements:

What Changed:
- REMOVED: Modal overlay approach
- REMOVED: CPU/Memory/Hardware stats (not needed)
- ADDED: Slide-out drawer panel from RIGHT side
- ADDED: Floating button (beautiful, always visible)
- ADDED: Focus on Resources, Endpoints, Providers only

Features:
✅ Drawer slides from RIGHT side of screen
✅ Floating button with gradient (always visible)
✅ Click button → drawer opens smoothly
✅ Click close/arrow → drawer closes
✅ Real-time updates (3 seconds) ONLY when open
✅ Polling stops when closed

What's Displayed:
1. Resources Summary:
- Total Resources count
- Available count (green)
- Unavailable count (red)

2. API Endpoints:
- Each endpoint with status (online/offline)
- Response time in ms
- Success rate percentage

3. Service Providers:
- CoinGecko, Binance, Backend API, AI Models
- Status: Online/Offline with green/red dots
- Response time for each

4. Market Feeds:
- BTC, ETH, BNB, SOL, ADA
- Live prices
- Availability status

NO CPU, NO Memory, NO Hardware stats!
Only what user requested: Resources, Endpoints, Providers.

Files:
- DELETE: system-status-modal.js/css
- CREATE: status-drawer.js/css
- UPDATE: dashboard integration

static/pages/dashboard/dashboard.css

@@ -1748,23 +1748,4 @@
   }
 }
 
-/* ============================================================================
-   SYSTEM STATUS BUTTON
-   ============================================================================ */
-
-.btn-system-status {
-  position: relative;
-}
-
-.btn-system-status:hover {
-  background: linear-gradient(135deg, rgba(45, 212, 191, 0.15), rgba(34, 211, 238, 0.08));
-  border-color: rgba(45, 212, 191, 0.3);
-}
-
-.btn-system-status:active {
-  transform: scale(0.95);
-}
-
-.btn-system-status svg {
-  color: var(--teal, #14b8a6);
-}
+/* Status Drawer styles in status-drawer.css */

static/pages/dashboard/dashboard.js

@@ -38,7 +38,7 @@ class DashboardPage {
       
       // Defer Chart.js loading until after initial render
       this.injectEnhancedLayout();
-      this.initSystemStatusModal();
+      this.initStatusDrawer();
       this.bindEvents();
       
       // Add smooth fade-in delay for better UX
@@ -414,34 +414,24 @@ class DashboardPage {
     `;
   }
 
-  initSystemStatusModal() {
-    // Initialize the system status modal component
+  initStatusDrawer() {
+    // Initialize the status drawer component
     try {
-      if (typeof SystemStatusModal !== 'undefined') {
-        window.systemStatusModal = new SystemStatusModal({
+      if (typeof StatusDrawer !== 'undefined') {
+        window.statusDrawer = new StatusDrawer({
           apiEndpoint: '/api/system/status',
-          updateInterval: 3000, // 3 seconds
-          onError: (error) => {
-            logger.error('Dashboard', 'System status modal error:', error);
-          }
+          updateInterval: 3000 // 3 seconds real-time updates
         });
-        logger.info('Dashboard', 'System status modal initialized');
+        logger.info('Dashboard', 'Status drawer initialized');
       } else {
-        logger.warn('Dashboard', 'SystemStatusModal class not available');
+        logger.warn('Dashboard', 'StatusDrawer class not available');
       }
     } catch (error) {
-      logger.error('Dashboard', 'Failed to initialize system status modal:', error);
+      logger.error('Dashboard', 'Failed to initialize status drawer:', error);
     }
   }
 
   bindEvents() {
-    // System Status button
-    document.getElementById('system-status-btn')?.addEventListener('click', () => {
-      if (window.systemStatusModal) {
-        window.systemStatusModal.open();
-      }
-    });
-    
     // Refresh button
     document.getElementById('refresh-btn')?.addEventListener('click', () => {
       this.showToast('Refreshing...', 'info');

static/pages/dashboard/index.html

@@ -42,12 +42,12 @@
   <noscript><link rel="stylesheet" href="/static/shared/css/layout.css"></noscript>
   <link rel="stylesheet" href="/static/pages/dashboard/dashboard.css?v=3.0" media="print" onload="this.media='all'">
   <noscript><link rel="stylesheet" href="/static/pages/dashboard/dashboard.css?v=3.0"></noscript>
-  <link rel="stylesheet" href="/static/shared/css/system-status-modal.css" media="print" onload="this.media='all'">
-  <noscript><link rel="stylesheet" href="/static/shared/css/system-status-modal.css"></noscript>
+  <link rel="stylesheet" href="/static/shared/css/status-drawer.css" media="print" onload="this.media='all'">
+  <noscript><link rel="stylesheet" href="/static/shared/css/status-drawer.css"></noscript>
     <!-- Error Suppressor - Suppress external service errors (load first) -->
     <script src="/static/shared/js/utils/error-suppressor.js"></script>
-    <!-- System Status Modal Component -->
-    <script src="/static/shared/js/components/system-status-modal.js"></script>
+    <!-- Status Drawer Component -->
+    <script src="/static/shared/js/components/status-drawer.js"></script>
     <!-- Crypto Icons Library -->
     <script src="/static/assets/icons/crypto-icons.js"></script>
     <!-- API Configuration - Smart Fallback System -->
@@ -102,11 +102,6 @@
             <p class="page-subtitle">Real-time Market Data & AI Analysis</p>
           </div>
           <div class="page-actions">
-            <button id="system-status-btn" class="btn-icon btn-system-status" title="System Status" aria-label="Open system status modal">
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
-              </svg>
-            </button>
             <button id="refresh-btn" class="btn-icon" title="Refresh" aria-label="Refresh data">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>

static/shared/css/status-drawer.css

@@ -0,0 +1,390 @@
+/**
+ * Status Drawer - Slide-out panel from RIGHT side
+ * Beautiful, professional design matching Ocean Teal theme
+ */
+
+/* Floating Button */
+.status-drawer-floating-btn {
+  position: fixed;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 56px;
+  height: 56px;
+  background: linear-gradient(135deg, var(--teal-light, #2dd4bf), var(--cyan, #22d3ee));
+  border: none;
+  border-radius: 50%;
+  box-shadow: 
+    0 4px 12px rgba(45, 212, 191, 0.3),
+    0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9998;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.status-drawer-floating-btn:hover {
+  transform: translateY(-50%) scale(1.1);
+  box-shadow: 
+    0 8px 20px rgba(45, 212, 191, 0.4),
+    0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.status-drawer-floating-btn:active {
+  transform: translateY(-50%) scale(0.95);
+}
+
+.status-drawer-floating-btn svg {
+  color: white;
+}
+
+.status-drawer-floating-btn.hidden {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-50%) scale(0.8);
+}
+
+/* Drawer Panel */
+.status-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 380px;
+  background: linear-gradient(180deg, #ffffff 0%, #fafffe 100%);
+  border-left: 1px solid rgba(20, 184, 166, 0.2);
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.status-drawer.open {
+  transform: translateX(0);
+}
+
+/* Header */
+.status-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 20px;
+  border-bottom: 1px solid rgba(20, 184, 166, 0.15);
+  background: linear-gradient(135deg, rgba(45, 212, 191, 0.08), rgba(34, 211, 238, 0.04));
+}
+
+.status-drawer-header h3 {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--teal-dark, #0d7377);
+  margin: 0;
+  letter-spacing: -0.3px;
+}
+
+.drawer-close {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(239, 68, 68, 0.1);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.drawer-close:hover {
+  background: rgba(239, 68, 68, 0.2);
+  transform: scale(1.1);
+}
+
+.drawer-close svg {
+  color: var(--danger, #ef4444);
+}
+
+/* Body */
+.status-drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+.status-drawer-body::-webkit-scrollbar {
+  width: 6px;
+}
+
+.status-drawer-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.status-drawer-body::-webkit-scrollbar-thumb {
+  background: rgba(45, 212, 191, 0.3);
+  border-radius: 3px;
+}
+
+/* Status Section */
+.status-section {
+  margin-bottom: 24px;
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(20, 184, 166, 0.1);
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--teal-dark, #0d7377);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.section-title svg {
+  color: var(--teal, #14b8a6);
+}
+
+/* Resources Summary */
+.resources-summary {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+
+.resource-stat {
+  text-align: center;
+  padding: 12px;
+  background: linear-gradient(135deg, rgba(45, 212, 191, 0.06), rgba(34, 211, 238, 0.03));
+  border: 1px solid rgba(20, 184, 166, 0.1);
+  border-radius: 10px;
+  transition: all 0.2s ease;
+}
+
+.resource-stat:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(45, 212, 191, 0.15);
+}
+
+.resource-stat.success {
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(45, 212, 191, 0.04));
+  border-color: rgba(16, 185, 129, 0.2);
+}
+
+.resource-stat.danger {
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.04));
+  border-color: rgba(239, 68, 68, 0.2);
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--teal-dark, #0d7377);
+  line-height: 1;
+  margin-bottom: 6px;
+  font-family: var(--font-mono, 'SF Mono', Consolas, monospace);
+}
+
+.resource-stat.success .stat-value {
+  color: var(--success, #10b981);
+}
+
+.resource-stat.danger .stat-value {
+  color: var(--danger, #ef4444);
+}
+
+.stat-label {
+  font-size: 10px;
+  color: var(--text-muted, #4a9b91);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+}
+
+/* Status Items */
+.status-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(20, 184, 166, 0.08);
+  border-left: 3px solid var(--gray-300, #d1d5db);
+  border-radius: 8px;
+  margin-bottom: 8px;
+  transition: all 0.2s ease;
+}
+
+.status-item:hover {
+  transform: translateX(-4px);
+  box-shadow: 0 2px 8px rgba(45, 212, 191, 0.12);
+}
+
+.status-item:last-child {
+  margin-bottom: 0;
+}
+
+.status-item.status-online {
+  border-left-color: var(--success, #10b981);
+}
+
+.status-item.status-offline {
+  border-left-color: var(--danger, #ef4444);
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--gray-300, #d1d5db);
+  flex-shrink: 0;
+  position: relative;
+}
+
+.status-online .status-dot {
+  background: var(--success, #10b981);
+  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
+}
+
+.status-online .status-dot::after {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  right: -4px;
+  bottom: -4px;
+  border-radius: 50%;
+  background: inherit;
+  opacity: 0.3;
+  animation: pulse-dot 2s ease infinite;
+}
+
+@keyframes pulse-dot {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+}
+
+.status-offline .status-dot {
+  background: var(--danger, #ef4444);
+}
+
+.status-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.status-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary, #0f2926);
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.status-meta {
+  font-size: 11px;
+  color: var(--text-muted, #4a9b91);
+  font-weight: 500;
+}
+
+/* Footer */
+.drawer-footer {
+  padding: 16px 20px;
+  border-top: 1px solid rgba(20, 184, 166, 0.15);
+  background: linear-gradient(180deg, transparent, rgba(45, 212, 191, 0.03));
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.last-update-label {
+  font-size: 11px;
+  color: var(--text-muted, #4a9b91);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.last-update-time {
+  font-size: 12px;
+  color: var(--teal, #14b8a6);
+  font-weight: 600;
+  font-family: var(--font-mono, 'SF Mono', Consolas, monospace);
+}
+
+/* Loading & Empty States */
+.summary-loading,
+.empty-state,
+.error-state {
+  text-align: center;
+  padding: 20px;
+  color: var(--text-muted, #4a9b91);
+  font-size: 13px;
+}
+
+.summary-loading {
+  animation: pulse-text 1.5s ease infinite;
+}
+
+@keyframes pulse-text {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.error-state {
+  color: var(--danger, #ef4444);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .status-drawer {
+    width: 100%;
+    max-width: 380px;
+  }
+  
+  .status-drawer-floating-btn {
+    right: 16px;
+    width: 52px;
+    height: 52px;
+  }
+}
+
+@media (max-width: 480px) {
+  .status-drawer {
+    width: 100%;
+  }
+  
+  .resources-summary {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .status-drawer,
+  .status-drawer-floating-btn,
+  .status-item,
+  .status-dot {
+    animation: none;
+    transition: none;
+  }
+}

static/shared/css/system-status-modal.css

@@ -1,649 +0,0 @@
-/**
- * System Status Modal CSS
- * Matches Ocean Teal Theme
- * Professional, minimal, iOS-style icons
- */
-
-/* Modal Overlay */
-.system-status-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(8px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10000;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.system-status-modal-overlay.modal-visible {
-  opacity: 1;
-}
-
-/* Modal Container */
-.system-status-modal {
-  background: linear-gradient(180deg, #ffffff 0%, #fafffe 100%);
-  border: 1px solid rgba(20, 184, 166, 0.2);
-  border-radius: 20px;
-  width: 90%;
-  max-width: 900px;
-  max-height: 85vh;
-  overflow: hidden;
-  box-shadow: 
-    0 20px 60px rgba(0, 0, 0, 0.3),
-    0 8px 24px rgba(45, 212, 191, 0.2);
-  transform: scale(0.95) translateY(-20px);
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.modal-visible .system-status-modal {
-  transform: scale(1) translateY(0);
-}
-
-/* Modal Header */
-.system-status-modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 24px 28px;
-  border-bottom: 1px solid rgba(20, 184, 166, 0.15);
-  background: linear-gradient(135deg, rgba(45, 212, 191, 0.06), rgba(34, 211, 238, 0.03));
-}
-
-.modal-title-group {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.modal-title-group svg {
-  color: var(--teal, #14b8a6);
-}
-
-.modal-title-group h2 {
-  font-size: 22px;
-  font-weight: 700;
-  color: var(--teal-dark, #0d7377);
-  margin: 0;
-  letter-spacing: -0.3px;
-}
-
-.modal-close {
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(239, 68, 68, 0.1);
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.modal-close:hover {
-  background: rgba(239, 68, 68, 0.2);
-  transform: rotate(90deg);
-}
-
-.modal-close svg {
-  color: var(--danger, #ef4444);
-}
-
-/* Modal Body */
-.system-status-modal-body {
-  padding: 24px 28px;
-  max-height: calc(85vh - 100px);
-  overflow-y: auto;
-}
-
-.system-status-modal-body::-webkit-scrollbar {
-  width: 8px;
-}
-
-.system-status-modal-body::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.system-status-modal-body::-webkit-scrollbar-thumb {
-  background: rgba(45, 212, 191, 0.3);
-  border-radius: 4px;
-}
-
-/* Status Sections */
-.status-section {
-  margin-bottom: 24px;
-  background: linear-gradient(135deg, rgba(45, 212, 191, 0.04), rgba(34, 211, 238, 0.02));
-  border: 1px solid rgba(20, 184, 166, 0.1);
-  border-radius: 14px;
-  padding: 20px;
-}
-
-.status-section:last-child {
-  margin-bottom: 0;
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid rgba(20, 184, 166, 0.1);
-}
-
-.section-header svg {
-  color: var(--teal, #14b8a6);
-}
-
-.section-header h3 {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text-primary, #0f2926);
-  margin: 0;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-/* Overall Health */
-.overall-health {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  background: linear-gradient(135deg, rgba(45, 212, 191, 0.08), rgba(34, 211, 238, 0.04));
-  border-radius: 12px;
-}
-
-.health-status {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.status-indicator {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  position: relative;
-}
-
-.status-indicator.status-pulse {
-  animation: status-pulse 0.3s ease;
-}
-
-@keyframes status-pulse {
-  0%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.2);
-  }
-}
-
-.status-indicator::after {
-  content: '';
-  position: absolute;
-  top: -4px;
-  left: -4px;
-  right: -4px;
-  bottom: -4px;
-  border-radius: 50%;
-  background: inherit;
-  opacity: 0.3;
-  animation: status-ripple 2s ease infinite;
-}
-
-@keyframes status-ripple {
-  0% {
-    transform: scale(1);
-    opacity: 0.3;
-  }
-  100% {
-    transform: scale(1.5);
-    opacity: 0;
-  }
-}
-
-.status-online {
-  background: var(--success, #10b981);
-}
-
-.status-degraded {
-  background: var(--warning, #f59e0b);
-}
-
-.status-partial {
-  background: var(--danger, #ef4444);
-}
-
-.status-offline {
-  background: var(--danger, #ef4444);
-}
-
-.status-error {
-  background: var(--danger, #ef4444);
-}
-
-.status-loading {
-  background: var(--gray-400, #94a3b8);
-  animation: pulse-indicator 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse-indicator {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-.status-text {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-primary, #0f2926);
-}
-
-.health-timestamp {
-  font-size: 13px;
-  color: var(--text-muted, #4a9b91);
-  font-weight: 500;
-}
-
-/* Services Grid */
-.services-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 12px;
-}
-
-.service-card {
-  background: rgba(255, 255, 255, 0.8);
-  border: 1px solid rgba(20, 184, 166, 0.15);
-  border-radius: 12px;
-  padding: 14px;
-  transition: all 0.2s ease;
-}
-
-.service-card:hover {
-  border-color: rgba(20, 184, 166, 0.3);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(45, 212, 191, 0.1);
-}
-
-.service-card.status-changed {
-  animation: card-flash 0.3s ease;
-}
-
-@keyframes card-flash {
-  0%, 100% {
-    background: rgba(255, 255, 255, 0.8);
-  }
-  50% {
-    background: rgba(45, 212, 191, 0.15);
-  }
-}
-
-.service-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.service-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary, #0f2926);
-}
-
-.service-status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--gray-300, #d1d5db);
-}
-
-.service-online .service-status-dot {
-  background: var(--success, #10b981);
-}
-
-.service-degraded .service-status-dot {
-  background: var(--warning, #f59e0b);
-}
-
-.service-offline .service-status-dot {
-  background: var(--danger, #ef4444);
-}
-
-.service-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 12px;
-}
-
-.service-status-text {
-  color: var(--text-muted, #4a9b91);
-  text-transform: capitalize;
-}
-
-.service-response {
-  color: var(--teal, #14b8a6);
-  font-weight: 600;
-  font-family: var(--font-mono, 'SF Mono', Consolas, monospace);
-}
-
-/* Endpoints List */
-.endpoints-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.endpoint-item {
-  background: rgba(255, 255, 255, 0.8);
-  border: 1px solid rgba(20, 184, 166, 0.15);
-  border-left: 3px solid var(--gray-300, #d1d5db);
-  border-radius: 10px;
-  padding: 12px 16px;
-  transition: all 0.2s ease;
-}
-
-.endpoint-item:hover {
-  border-color: rgba(20, 184, 166, 0.3);
-  transform: translateX(2px);
-  box-shadow: 0 2px 8px rgba(45, 212, 191, 0.08);
-}
-
-.endpoint-online {
-  border-left-color: var(--success, #10b981);
-}
-
-.endpoint-degraded {
-  border-left-color: var(--warning, #f59e0b);
-}
-
-.endpoint-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 6px;
-}
-
-.endpoint-path {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary, #0f2926);
-  font-family: var(--font-mono, 'SF Mono', Consolas, monospace);
-}
-
-.endpoint-status-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--gray-300, #d1d5db);
-}
-
-.endpoint-online .endpoint-status-dot {
-  background: var(--success, #10b981);
-}
-
-.endpoint-degraded .endpoint-status-dot {
-  background: var(--warning, #f59e0b);
-}
-
-.endpoint-metrics {
-  display: flex;
-  gap: 16px;
-}
-
-.metric-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  color: var(--text-muted, #4a9b91);
-  font-weight: 500;
-}
-
-.metric-item svg {
-  opacity: 0.6;
-}
-
-/* Coins Grid */
-.coins-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 12px;
-}
-
-.coin-card {
-  background: rgba(255, 255, 255, 0.8);
-  border: 1px solid rgba(20, 184, 166, 0.15);
-  border-radius: 12px;
-  padding: 14px;
-  text-align: center;
-  transition: all 0.2s ease;
-}
-
-.coin-card:hover {
-  border-color: rgba(20, 184, 166, 0.3);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(45, 212, 191, 0.1);
-}
-
-.coin-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.coin-symbol {
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--teal-dark, #0d7377);
-  letter-spacing: -0.3px;
-}
-
-.coin-status-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--gray-300, #d1d5db);
-}
-
-.coin-online .coin-status-dot {
-  background: var(--success, #10b981);
-}
-
-.coin-offline .coin-status-dot {
-  background: var(--danger, #ef4444);
-}
-
-.coin-price {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-primary, #0f2926);
-  margin-bottom: 4px;
-  transition: color 0.3s ease;
-}
-
-.coin-price.price-up {
-  animation: price-up 0.3s ease;
-}
-
-.coin-price.price-down {
-  animation: price-down 0.3s ease;
-}
-
-@keyframes price-up {
-  0%, 100% {
-    color: var(--text-primary, #0f2926);
-  }
-  50% {
-    color: var(--success, #10b981);
-    transform: scale(1.05);
-  }
-}
-
-@keyframes price-down {
-  0%, 100% {
-    color: var(--text-primary, #0f2926);
-  }
-  50% {
-    color: var(--danger, #ef4444);
-    transform: scale(1.05);
-  }
-}
-
-.coin-updated {
-  font-size: 10px;
-  color: var(--text-muted, #4a9b91);
-}
-
-/* Resources Grid */
-.resources-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 14px;
-}
-
-.resource-card {
-  background: rgba(255, 255, 255, 0.8);
-  border: 1px solid rgba(20, 184, 166, 0.15);
-  border-radius: 12px;
-  padding: 14px;
-}
-
-.resource-label {
-  font-size: 11px;
-  color: var(--text-muted, #4a9b91);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 8px;
-}
-
-.resource-value {
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--teal-dark, #0d7377);
-  margin-bottom: 10px;
-  font-family: var(--font-mono, 'SF Mono', Consolas, monospace);
-  transition: color 0.3s ease;
-}
-
-.resource-value.value-changed {
-  animation: value-flash 0.3s ease;
-}
-
-@keyframes value-flash {
-  0%, 100% {
-    transform: scale(1);
-    color: var(--teal-dark, #0d7377);
-  }
-  50% {
-    transform: scale(1.05);
-    color: var(--teal, #14b8a6);
-  }
-}
-
-.resource-bar {
-  height: 6px;
-  background: rgba(20, 184, 166, 0.1);
-  border-radius: 3px;
-  overflow: hidden;
-  margin-bottom: 8px;
-}
-
-.resource-bar-fill {
-  height: 100%;
-  border-radius: 3px;
-  transition: width 0.5s ease, background 0.3s ease;
-}
-
-.resource-detail {
-  font-size: 11px;
-  color: var(--text-muted, #4a9b91);
-  font-weight: 500;
-}
-
-/* Loading Placeholder */
-.loading-placeholder {
-  text-align: center;
-  padding: 20px;
-  color: var(--text-muted, #4a9b91);
-  font-size: 13px;
-  animation: loading-pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes loading-pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .system-status-modal {
-    width: 95%;
-    max-height: 90vh;
-  }
-  
-  .system-status-modal-header,
-  .system-status-modal-body {
-    padding: 16px 20px;
-  }
-  
-  .services-grid,
-  .resources-grid {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  }
-  
-  .coins-grid {
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  }
-  
-  .modal-title-group h2 {
-    font-size: 18px;
-  }
-}
-
-@media (max-width: 480px) {
-  .services-grid,
-  .coins-grid,
-  .resources-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .overall-health {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
-}
-
-/* Accessibility */
-@media (prefers-reduced-motion: reduce) {
-  .system-status-modal,
-  .service-card,
-  .endpoint-item,
-  .coin-card,
-  .resource-value,
-  .coin-price,
-  .status-indicator {
-    animation: none;
-    transition: none;
-  }
-}

static/shared/js/components/status-drawer.js

@@ -0,0 +1,394 @@
+/**
+ * Status Drawer - Slide-out panel from right side
+ * Shows ONLY: Resources, Endpoints, Providers status
+ * Real-time updates, NO CPU/Memory stats
+ */
+
+class StatusDrawer {
+  constructor(options = {}) {
+    this.options = {
+      apiEndpoint: options.apiEndpoint || '/api/system/status',
+      updateInterval: options.updateInterval || 3000, // 3 seconds
+      ...options
+    };
+    
+    this.isOpen = false;
+    this.pollTimer = null;
+    this.lastData = null;
+    this.drawerElement = null;
+    this.buttonElement = null;
+    
+    this.createDrawer();
+    this.createFloatingButton();
+  }
+  
+  /**
+   * Create floating button
+   */
+  createFloatingButton() {
+    const button = document.createElement('button');
+    button.id = 'status-drawer-btn';
+    button.className = 'status-drawer-floating-btn';
+    button.setAttribute('aria-label', 'Open status panel');
+    button.innerHTML = `
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="12" r="10"/>
+        <path d="M12 6v6l4 2"/>
+      </svg>
+    `;
+    
+    button.addEventListener('click', () => this.toggle());
+    
+    document.body.appendChild(button);
+    this.buttonElement = button;
+  }
+  
+  /**
+   * Create drawer panel
+   */
+  createDrawer() {
+    const drawer = document.createElement('div');
+    drawer.id = 'status-drawer';
+    drawer.className = 'status-drawer';
+    drawer.innerHTML = `
+      <div class="status-drawer-header">
+        <h3>System Status</h3>
+        <button class="drawer-close" aria-label="Close">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 18l6-6-6-6"/>
+          </svg>
+        </button>
+      </div>
+      
+      <div class="status-drawer-body">
+        <!-- Resources Status -->
+        <div class="status-section">
+          <div class="section-title">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
+            </svg>
+            <span>Resources</span>
+          </div>
+          <div class="resources-summary" id="resources-summary">
+            <div class="summary-loading">Loading...</div>
+          </div>
+        </div>
+        
+        <!-- Endpoints Status -->
+        <div class="status-section">
+          <div class="section-title">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10"/>
+              <polyline points="12 6 12 12 16 14"/>
+            </svg>
+            <span>API Endpoints</span>
+          </div>
+          <div class="endpoints-status" id="endpoints-status">
+            <div class="summary-loading">Loading...</div>
+          </div>
+        </div>
+        
+        <!-- Providers Status -->
+        <div class="status-section">
+          <div class="section-title">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="2" y="3" width="20" height="14" rx="2"/>
+              <line x1="8" y1="21" x2="16" y2="21"/>
+              <line x1="12" y1="17" x2="12" y2="21"/>
+            </svg>
+            <span>Service Providers</span>
+          </div>
+          <div class="providers-status" id="providers-status">
+            <div class="summary-loading">Loading...</div>
+          </div>
+        </div>
+        
+        <!-- Coins Status -->
+        <div class="status-section">
+          <div class="section-title">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="12" y1="1" x2="12" y2="23"/>
+              <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
+            </svg>
+            <span>Market Feeds</span>
+          </div>
+          <div class="coins-status" id="coins-status">
+            <div class="summary-loading">Loading...</div>
+          </div>
+        </div>
+        
+        <!-- Last Update -->
+        <div class="drawer-footer">
+          <span class="last-update-label">Last update:</span>
+          <span class="last-update-time" id="last-update-time">--</span>
+        </div>
+      </div>
+    `;
+    
+    document.body.appendChild(drawer);
+    this.drawerElement = drawer;
+    
+    // Close button
+    drawer.querySelector('.drawer-close').addEventListener('click', () => this.close());
+  }
+  
+  /**
+   * Toggle drawer
+   */
+  toggle() {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  
+  /**
+   * Open drawer
+   */
+  open() {
+    if (this.isOpen) return;
+    
+    this.isOpen = true;
+    this.drawerElement.classList.add('open');
+    this.buttonElement.classList.add('hidden');
+    
+    // Start polling
+    this.startPolling();
+  }
+  
+  /**
+   * Close drawer
+   */
+  close() {
+    if (!this.isOpen) return;
+    
+    this.isOpen = false;
+    this.drawerElement.classList.remove('open');
+    this.buttonElement.classList.remove('hidden');
+    
+    // Stop polling
+    this.stopPolling();
+  }
+  
+  /**
+   * Start polling (only when open)
+   */
+  startPolling() {
+    if (!this.isOpen) return;
+    
+    this.fetchStatus();
+    this.pollTimer = setTimeout(() => this.startPolling(), this.options.updateInterval);
+  }
+  
+  /**
+   * Stop polling
+   */
+  stopPolling() {
+    if (this.pollTimer) {
+      clearTimeout(this.pollTimer);
+      this.pollTimer = null;
+    }
+  }
+  
+  /**
+   * Fetch status from API
+   */
+  async fetchStatus() {
+    if (!this.isOpen) return;
+    
+    try {
+      const response = await fetch(this.options.apiEndpoint);
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      
+      const data = await response.json();
+      this.updateUI(data);
+      
+    } catch (error) {
+      console.error('Status Drawer: Failed to fetch:', error);
+      this.showError();
+    }
+  }
+  
+  /**
+   * Update UI with data
+   */
+  updateUI(data) {
+    this.lastData = data;
+    
+    // Update resources summary
+    this.updateResourcesSummary(data);
+    
+    // Update endpoints
+    this.updateEndpoints(data.endpoints || []);
+    
+    // Update providers
+    this.updateProviders(data.services || []);
+    
+    // Update coins
+    this.updateCoins(data.coins || []);
+    
+    // Update timestamp
+    this.updateTimestamp(data.timestamp);
+  }
+  
+  /**
+   * Update resources summary
+   */
+  updateResourcesSummary(data) {
+    const container = document.getElementById('resources-summary');
+    if (!container) return;
+    
+    // Count total resources from services
+    const totalServices = (data.services || []).length;
+    const onlineServices = (data.services || []).filter(s => s.status === 'online').length;
+    
+    const totalEndpoints = (data.endpoints || []).length;
+    const onlineEndpoints = (data.endpoints || []).filter(e => e.status === 'online').length;
+    
+    const totalCoins = (data.coins || []).length;
+    const onlineCoins = (data.coins || []).filter(c => c.status === 'online').length;
+    
+    const totalResources = totalServices + totalEndpoints + totalCoins;
+    const availableResources = onlineServices + onlineEndpoints + onlineCoins;
+    const unavailableResources = totalResources - availableResources;
+    
+    container.innerHTML = `
+      <div class="resource-stat">
+        <div class="stat-value">${totalResources}</div>
+        <div class="stat-label">Total Resources</div>
+      </div>
+      <div class="resource-stat success">
+        <div class="stat-value">${availableResources}</div>
+        <div class="stat-label">Available</div>
+      </div>
+      <div class="resource-stat ${unavailableResources > 0 ? 'danger' : ''}">
+        <div class="stat-value">${unavailableResources}</div>
+        <div class="stat-label">Unavailable</div>
+      </div>
+    `;
+  }
+  
+  /**
+   * Update endpoints
+   */
+  updateEndpoints(endpoints) {
+    const container = document.getElementById('endpoints-status');
+    if (!container) return;
+    
+    if (!endpoints.length) {
+      container.innerHTML = '<div class="empty-state">No endpoints</div>';
+      return;
+    }
+    
+    container.innerHTML = endpoints.map(endpoint => {
+      const statusClass = endpoint.status === 'online' ? 'status-online' : 'status-offline';
+      return `
+        <div class="status-item ${statusClass}">
+          <div class="status-dot"></div>
+          <div class="status-info">
+            <div class="status-name">${endpoint.path}</div>
+            <div class="status-meta">
+              ${endpoint.avg_response_ms ? `${endpoint.avg_response_ms.toFixed(0)}ms` : '--'} • 
+              ${endpoint.success_rate ? `${endpoint.success_rate.toFixed(1)}%` : '--'}
+            </div>
+          </div>
+        </div>
+      `;
+    }).join('');
+  }
+  
+  /**
+   * Update providers
+   */
+  updateProviders(services) {
+    const container = document.getElementById('providers-status');
+    if (!container) return;
+    
+    if (!services.length) {
+      container.innerHTML = '<div class="empty-state">No providers</div>';
+      return;
+    }
+    
+    container.innerHTML = services.map(service => {
+      const statusClass = service.status === 'online' ? 'status-online' : 'status-offline';
+      return `
+        <div class="status-item ${statusClass}">
+          <div class="status-dot"></div>
+          <div class="status-info">
+            <div class="status-name">${service.name}</div>
+            <div class="status-meta">
+              ${service.response_time_ms ? `${service.response_time_ms.toFixed(0)}ms` : 'Offline'}
+            </div>
+          </div>
+        </div>
+      `;
+    }).join('');
+  }
+  
+  /**
+   * Update coins
+   */
+  updateCoins(coins) {
+    const container = document.getElementById('coins-status');
+    if (!container) return;
+    
+    if (!coins.length) {
+      container.innerHTML = '<div class="empty-state">No coins</div>';
+      return;
+    }
+    
+    container.innerHTML = coins.map(coin => {
+      const statusClass = coin.status === 'online' ? 'status-online' : 'status-offline';
+      return `
+        <div class="status-item ${statusClass}">
+          <div class="status-dot"></div>
+          <div class="status-info">
+            <div class="status-name">${coin.symbol}</div>
+            <div class="status-meta">
+              ${coin.price ? `$${coin.price.toLocaleString()}` : 'Unavailable'}
+            </div>
+          </div>
+        </div>
+      `;
+    }).join('');
+  }
+  
+  /**
+   * Update timestamp
+   */
+  updateTimestamp(timestamp) {
+    const element = document.getElementById('last-update-time');
+    if (element) {
+      const date = new Date(timestamp * 1000);
+      element.textContent = date.toLocaleTimeString();
+    }
+  }
+  
+  /**
+   * Show error state
+   */
+  showError() {
+    const sections = ['resources-summary', 'endpoints-status', 'providers-status', 'coins-status'];
+    sections.forEach(id => {
+      const element = document.getElementById(id);
+      if (element) {
+        element.innerHTML = '<div class="error-state">Failed to load</div>';
+      }
+    });
+  }
+  
+  /**
+   * Destroy drawer
+   */
+  destroy() {
+    this.stopPolling();
+    if (this.drawerElement) this.drawerElement.remove();
+    if (this.buttonElement) this.buttonElement.remove();
+  }
+}
+
+// Export
+if (typeof window !== 'undefined') {
+  window.StatusDrawer = StatusDrawer;
+}

static/shared/js/components/system-status-modal.js

@@ -1,638 +0,0 @@
-/**
- * System Status Modal - Comprehensive system status monitoring
- * Modal-based (closed by default), opens on user interaction
- * Shows real-time data: services, endpoints, coins, system resources
- * Safe polling that pauses when modal is closed
- * Data-driven animations only
- */
-
-class SystemStatusModal {
-  constructor(options = {}) {
-    this.options = {
-      apiEndpoint: options.apiEndpoint || '/api/system/status',
-      updateInterval: options.updateInterval || 3000, // 3 seconds
-      onUpdate: options.onUpdate || null,
-      onError: options.onError || null,
-      ...options
-    };
-    
-    this.isOpen = false;
-    this.pollTimer = null;
-    this.lastData = null;
-    this.errorCount = 0;
-    this.maxErrors = 3;
-    this.modalElement = null;
-    
-    this.createModal();
-  }
-  
-  /**
-   * Create modal structure in DOM
-   */
-  createModal() {
-    // Check if modal already exists
-    if (document.getElementById('system-status-modal')) {
-      this.modalElement = document.getElementById('system-status-modal');
-      return;
-    }
-    
-    // Create modal
-    const modal = document.createElement('div');
-    modal.id = 'system-status-modal';
-    modal.className = 'system-status-modal-overlay';
-    modal.style.display = 'none';
-    modal.innerHTML = `
-      <div class="system-status-modal">
-        <div class="system-status-modal-header">
-          <div class="modal-title-group">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <circle cx="12" cy="12" r="10"/>
-              <path d="M12 6v6l4 2"/>
-            </svg>
-            <h2>System Status</h2>
-          </div>
-          <button class="modal-close" onclick="window.systemStatusModal.close()" aria-label="Close modal">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <line x1="18" y1="6" x2="6" y2="18"/>
-              <line x1="6" y1="6" x2="18" y2="18"/>
-            </svg>
-          </button>
-        </div>
-        
-        <div class="system-status-modal-body">
-          <!-- Overall Health -->
-          <div class="status-section">
-            <div class="section-header">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
-              </svg>
-              <h3>Overall Health</h3>
-            </div>
-            <div class="overall-health" id="overall-health">
-              <div class="health-status">
-                <span class="status-indicator status-loading"></span>
-                <span class="status-text">Loading...</span>
-              </div>
-              <div class="health-timestamp" id="health-timestamp">--</div>
-            </div>
-          </div>
-          
-          <!-- Services Status -->
-          <div class="status-section">
-            <div class="section-header">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="2" y="3" width="20" height="14" rx="2"/>
-                <line x1="8" y1="21" x2="16" y2="21"/>
-                <line x1="12" y1="17" x2="12" y2="21"/>
-              </svg>
-              <h3>Services Status</h3>
-            </div>
-            <div class="services-grid" id="services-grid">
-              <div class="loading-placeholder">Loading services...</div>
-            </div>
-          </div>
-          
-          <!-- Endpoints Health -->
-          <div class="status-section">
-            <div class="section-header">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="12" cy="12" r="10"/>
-                <polyline points="12 6 12 12 16 14"/>
-              </svg>
-              <h3>API Endpoints</h3>
-            </div>
-            <div class="endpoints-list" id="endpoints-list">
-              <div class="loading-placeholder">Loading endpoints...</div>
-            </div>
-          </div>
-          
-          <!-- Coins & Market Feeds -->
-          <div class="status-section">
-            <div class="section-header">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="12" y1="1" x2="12" y2="23"/>
-                <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
-              </svg>
-              <h3>Coin Feeds</h3>
-            </div>
-            <div class="coins-grid" id="coins-grid">
-              <div class="loading-placeholder">Loading coin feeds...</div>
-            </div>
-          </div>
-          
-          <!-- System Resources -->
-          <div class="status-section">
-            <div class="section-header">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="4" y="4" width="16" height="16" rx="2"/>
-                <rect x="9" y="9" width="6" height="6"/>
-                <line x1="9" y1="1" x2="9" y2="4"/>
-                <line x1="15" y1="1" x2="15" y2="4"/>
-                <line x1="9" y1="20" x2="9" y2="23"/>
-                <line x1="15" y1="20" x2="15" y2="23"/>
-                <line x1="20" y1="9" x2="23" y2="9"/>
-                <line x1="20" y1="14" x2="23" y2="14"/>
-                <line x1="1" y1="9" x2="4" y2="9"/>
-                <line x1="1" y1="14" x2="4" y2="14"/>
-              </svg>
-              <h3>System Resources</h3>
-            </div>
-            <div class="resources-grid" id="resources-grid">
-              <div class="loading-placeholder">Loading resources...</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-    
-    document.body.appendChild(modal);
-    this.modalElement = modal;
-    
-    // Close on overlay click
-    modal.addEventListener('click', (e) => {
-      if (e.target === modal) {
-        this.close();
-      }
-    });
-    
-    // Close on ESC key
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape' && this.isOpen) {
-        this.close();
-      }
-    });
-  }
-  
-  /**
-   * Open modal and start polling
-   */
-  open() {
-    if (this.isOpen) return;
-    
-    this.isOpen = true;
-    this.errorCount = 0;
-    
-    if (this.modalElement) {
-      this.modalElement.style.display = 'flex';
-      // Add animation class
-      setTimeout(() => {
-        this.modalElement.classList.add('modal-visible');
-      }, 10);
-    }
-    
-    // Start polling
-    this.startPolling();
-  }
-  
-  /**
-   * Close modal and stop polling
-   */
-  close() {
-    if (!this.isOpen) return;
-    
-    this.isOpen = false;
-    
-    if (this.modalElement) {
-      this.modalElement.classList.remove('modal-visible');
-      setTimeout(() => {
-        this.modalElement.style.display = 'none';
-      }, 300);
-    }
-    
-    // Stop polling
-    this.stopPolling();
-  }
-  
-  /**
-   * Start polling (only when modal is open)
-   */
-  startPolling() {
-    if (!this.isOpen) return;
-    
-    // Immediate fetch
-    this.fetchStatus();
-    
-    // Schedule next poll
-    this.pollTimer = setTimeout(() => {
-      this.startPolling();
-    }, this.options.updateInterval);
-  }
-  
-  /**
-   * Stop polling
-   */
-  stopPolling() {
-    if (this.pollTimer) {
-      clearTimeout(this.pollTimer);
-      this.pollTimer = null;
-    }
-  }
-  
-  /**
-   * Fetch system status from API
-   */
-  async fetchStatus() {
-    if (!this.isOpen) return;
-    
-    try {
-      const response = await fetch(this.options.apiEndpoint);
-      
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}`);
-      }
-      
-      const data = await response.json();
-      
-      // Reset error count on success
-      this.errorCount = 0;
-      
-      // Update UI
-      this.updateUI(data);
-      
-      // Call user callback
-      if (this.options.onUpdate) {
-        this.options.onUpdate(data);
-      }
-      
-    } catch (error) {
-      this.errorCount++;
-      console.error('System Status Modal: Failed to fetch status:', error);
-      
-      // Show error in UI
-      this.showError(error);
-      
-      // Call error callback
-      if (this.options.onError) {
-        this.options.onError(error);
-      }
-      
-      // If too many errors, show degraded state
-      if (this.errorCount >= this.maxErrors) {
-        console.error('System Status Modal: Too many errors');
-        this.showDegradedState();
-      }
-    }
-  }
-  
-  /**
-   * Update UI with new data
-   */
-  updateUI(data) {
-    const oldData = this.lastData;
-    this.lastData = data;
-    
-    // Update overall health
-    this.updateOverallHealth(data.overall_health, data.timestamp);
-    
-    // Update services
-    this.updateServices(data.services, oldData?.services);
-    
-    // Update endpoints
-    this.updateEndpoints(data.endpoints, oldData?.endpoints);
-    
-    // Update coins
-    this.updateCoins(data.coins, oldData?.coins);
-    
-    // Update resources
-    this.updateResources(data.resources, oldData?.resources);
-  }
-  
-  /**
-   * Update overall health status
-   */
-  updateOverallHealth(health, timestamp) {
-    const container = document.getElementById('overall-health');
-    if (!container) return;
-    
-    const statusMap = {
-      'online': { class: 'status-online', text: 'All Systems Operational', color: '#10b981' },
-      'degraded': { class: 'status-degraded', text: 'Degraded Performance', color: '#f59e0b' },
-      'partial': { class: 'status-partial', text: 'Partial Outage', color: '#ef4444' },
-      'offline': { class: 'status-offline', text: 'System Offline', color: '#ef4444' }
-    };
-    
-    const status = statusMap[health] || statusMap['offline'];
-    
-    container.innerHTML = `
-      <div class="health-status">
-        <span class="status-indicator ${status.class}" data-status="${health}"></span>
-        <span class="status-text" style="color: ${status.color};">${status.text}</span>
-      </div>
-      <div class="health-timestamp">${this.formatTimestamp(timestamp)}</div>
-    `;
-    
-    // Animate status change
-    const indicator = container.querySelector('.status-indicator');
-    if (indicator) {
-      indicator.classList.add('status-pulse');
-      setTimeout(() => indicator.classList.remove('status-pulse'), 300);
-    }
-  }
-  
-  /**
-   * Update services grid
-   */
-  updateServices(services, oldServices) {
-    const container = document.getElementById('services-grid');
-    if (!container) return;
-    
-    container.innerHTML = services.map(service => {
-      const statusClass = service.status === 'online' ? 'service-online' : 
-                         service.status === 'degraded' ? 'service-degraded' : 'service-offline';
-      
-      const responseTime = service.response_time_ms ? 
-        `<span class="service-response">${service.response_time_ms.toFixed(0)}ms</span>` : '';
-      
-      return `
-        <div class="service-card ${statusClass}" data-service="${service.name}">
-          <div class="service-header">
-            <span class="service-name">${service.name}</span>
-            <span class="service-status-dot"></span>
-          </div>
-          <div class="service-meta">
-            <span class="service-status-text">${service.status}</span>
-            ${responseTime}
-          </div>
-        </div>
-      `;
-    }).join('');
-    
-    // Animate changes
-    if (oldServices) {
-      this.animateChanges(container, oldServices, services, 'name');
-    }
-  }
-  
-  /**
-   * Update endpoints list
-   */
-  updateEndpoints(endpoints, oldEndpoints) {
-    const container = document.getElementById('endpoints-list');
-    if (!container) return;
-    
-    container.innerHTML = endpoints.map(endpoint => {
-      const statusClass = endpoint.status === 'online' ? 'endpoint-online' : 'endpoint-degraded';
-      
-      return `
-        <div class="endpoint-item ${statusClass}" data-endpoint="${endpoint.path}">
-          <div class="endpoint-header">
-            <span class="endpoint-path">${endpoint.path}</span>
-            <span class="endpoint-status-dot"></span>
-          </div>
-          <div class="endpoint-metrics">
-            <span class="metric-item">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
-              </svg>
-              ${endpoint.avg_response_ms?.toFixed(0) || '--'}ms
-            </span>
-            <span class="metric-item">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
-                <polyline points="22 4 12 14.01 9 11.01"/>
-              </svg>
-              ${endpoint.success_rate?.toFixed(1) || '--'}%
-            </span>
-          </div>
-        </div>
-      `;
-    }).join('');
-    
-    // Animate changes
-    if (oldEndpoints) {
-      this.animateChanges(container, oldEndpoints, endpoints, 'path');
-    }
-  }
-  
-  /**
-   * Update coins grid
-   */
-  updateCoins(coins, oldCoins) {
-    const container = document.getElementById('coins-grid');
-    if (!container) return;
-    
-    container.innerHTML = coins.map(coin => {
-      const statusClass = coin.status === 'online' ? 'coin-online' : 'coin-offline';
-      const price = coin.price ? `$${coin.price.toLocaleString('en-US', {maximumFractionDigits: 2})}` : '--';
-      
-      return `
-        <div class="coin-card ${statusClass}" data-coin="${coin.symbol}">
-          <div class="coin-header">
-            <span class="coin-symbol">${coin.symbol}</span>
-            <span class="coin-status-dot"></span>
-          </div>
-          <div class="coin-price">${price}</div>
-          <div class="coin-updated">${this.formatRelativeTime(coin.last_update)}</div>
-        </div>
-      `;
-    }).join('');
-    
-    // Animate price changes
-    if (oldCoins) {
-      this.animateCoinPriceChanges(container, oldCoins, coins);
-    }
-  }
-  
-  /**
-   * Update resources grid
-   */
-  updateResources(resources, oldResources) {
-    const container = document.getElementById('resources-grid');
-    if (!container) return;
-    
-    container.innerHTML = `
-      <div class="resource-card">
-        <div class="resource-label">CPU</div>
-        <div class="resource-value" data-metric="cpu">${resources.cpu_percent.toFixed(1)}%</div>
-        <div class="resource-bar">
-          <div class="resource-bar-fill" style="width: ${resources.cpu_percent}%; background: ${this.getResourceColor(resources.cpu_percent)}"></div>
-        </div>
-      </div>
-      
-      <div class="resource-card">
-        <div class="resource-label">Memory</div>
-        <div class="resource-value" data-metric="memory">${resources.memory_percent.toFixed(1)}%</div>
-        <div class="resource-bar">
-          <div class="resource-bar-fill" style="width: ${resources.memory_percent}%; background: ${this.getResourceColor(resources.memory_percent)}"></div>
-        </div>
-        <div class="resource-detail">${resources.memory_used_mb.toFixed(0)} / ${resources.memory_total_mb.toFixed(0)} MB</div>
-      </div>
-      
-      <div class="resource-card">
-        <div class="resource-label">Uptime</div>
-        <div class="resource-value">${this.formatUptime(resources.uptime_seconds)}</div>
-      </div>
-      
-      ${resources.load_avg ? `
-        <div class="resource-card">
-          <div class="resource-label">Load Average</div>
-          <div class="resource-value">${resources.load_avg.map(v => v.toFixed(2)).join(', ')}</div>
-        </div>
-      ` : ''}
-    `;
-    
-    // Animate value changes (data-driven)
-    if (oldResources) {
-      this.animateResourceChanges(container, oldResources, resources);
-    }
-  }
-  
-  /**
-   * Animate changes (data-driven only)
-   */
-  animateChanges(container, oldData, newData, keyField) {
-    // Find changed items
-    const oldMap = new Map(oldData.map(item => [item[keyField], item]));
-    
-    newData.forEach(newItem => {
-      const oldItem = oldMap.get(newItem[keyField]);
-      if (oldItem && oldItem.status !== newItem.status) {
-        // Status changed - animate
-        const element = container.querySelector(`[data-${keyField.toLowerCase()}="${newItem[keyField]}"]`);
-        if (element) {
-          element.classList.add('status-changed');
-          setTimeout(() => element.classList.remove('status-changed'), 300);
-        }
-      }
-    });
-  }
-  
-  /**
-   * Animate coin price changes (data-driven)
-   */
-  animateCoinPriceChanges(container, oldCoins, newCoins) {
-    const oldMap = new Map(oldCoins.map(c => [c.symbol, c]));
-    
-    newCoins.forEach(newCoin => {
-      const oldCoin = oldMap.get(newCoin.symbol);
-      if (oldCoin && oldCoin.price && newCoin.price && oldCoin.price !== newCoin.price) {
-        const element = container.querySelector(`[data-coin="${newCoin.symbol}"] .coin-price`);
-        if (element) {
-          element.classList.add(newCoin.price > oldCoin.price ? 'price-up' : 'price-down');
-          setTimeout(() => {
-            element.classList.remove('price-up', 'price-down');
-          }, 300);
-        }
-      }
-    });
-  }
-  
-  /**
-   * Animate resource changes (data-driven)
-   */
-  animateResourceChanges(container, oldResources, newResources) {
-    // CPU
-    if (oldResources.cpu_percent !== newResources.cpu_percent) {
-      const cpuValue = container.querySelector('[data-metric="cpu"]');
-      if (cpuValue) {
-        cpuValue.classList.add('value-changed');
-        setTimeout(() => cpuValue.classList.remove('value-changed'), 300);
-      }
-    }
-    
-    // Memory
-    if (oldResources.memory_percent !== newResources.memory_percent) {
-      const memValue = container.querySelector('[data-metric="memory"]');
-      if (memValue) {
-        memValue.classList.add('value-changed');
-        setTimeout(() => memValue.classList.remove('value-changed'), 300);
-      }
-    }
-  }
-  
-  /**
-   * Show error state
-   */
-  showError(error) {
-    const overallHealth = document.getElementById('overall-health');
-    if (overallHealth) {
-      overallHealth.innerHTML = `
-        <div class="health-status">
-          <span class="status-indicator status-error"></span>
-          <span class="status-text" style="color: #ef4444;">Failed to fetch status</span>
-        </div>
-        <div class="health-timestamp">${error.message}</div>
-      `;
-    }
-  }
-  
-  /**
-   * Show degraded state after multiple errors
-   */
-  showDegradedState() {
-    // Show last known data with warning
-    const overallHealth = document.getElementById('overall-health');
-    if (overallHealth && this.lastData) {
-      overallHealth.innerHTML = `
-        <div class="health-status">
-          <span class="status-indicator status-degraded"></span>
-          <span class="status-text" style="color: #f59e0b;">Showing last known data</span>
-        </div>
-        <div class="health-timestamp">Data may be stale</div>
-      `;
-    }
-  }
-  
-  /**
-   * Get color for resource usage
-   */
-  getResourceColor(percent) {
-    if (percent < 50) return '#10b981';
-    if (percent < 75) return '#22d3ee';
-    if (percent < 90) return '#f59e0b';
-    return '#ef4444';
-  }
-  
-  /**
-   * Format timestamp
-   */
-  formatTimestamp(timestamp) {
-    const date = new Date(timestamp * 1000);
-    return date.toLocaleTimeString();
-  }
-  
-  /**
-   * Format relative time
-   */
-  formatRelativeTime(isoString) {
-    if (!isoString) return 'Never';
-    const diff = Date.now() - new Date(isoString).getTime();
-    const seconds = Math.floor(diff / 1000);
-    
-    if (seconds < 60) return 'Just now';
-    if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
-    if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
-    return `${Math.floor(seconds / 86400)}d ago`;
-  }
-  
-  /**
-   * Format uptime
-   */
-  formatUptime(seconds) {
-    if (seconds < 60) return `${seconds}s`;
-    if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
-    if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m`;
-    return `${Math.floor(seconds / 86400)}d ${Math.floor((seconds % 86400) / 3600)}h`;
-  }
-  
-  /**
-   * Destroy modal
-   */
-  destroy() {
-    this.stopPolling();
-    if (this.modalElement) {
-      this.modalElement.remove();
-      this.modalElement = null;
-    }
-  }
-}
-
-// Export for use in other modules
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = SystemStatusModal;
-}
-
-// Make available globally
-if (typeof window !== 'undefined') {
-  window.SystemStatusModal = SystemStatusModal;
-}