Upload 43 files

index.html

@@ -14,11 +14,11 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
     
     <!-- Styles -->
-    <link rel="stylesheet" href="/static/css/main.css?v=4">
-    <link rel="stylesheet" href="/static/css/toast.css?v=4">
-    <script src="/static/js/trading-pairs-loader.js?v=4" defer></script>
-    <script src="/static/js/toast.js?v=4" defer></script>
-    <script src="/static/js/app.js?v=4" defer></script>
+    <link rel="stylesheet" href="/static/css/main.css?v=5">
+    <link rel="stylesheet" href="/static/css/toast.css?v=5">
+    <script src="/static/js/trading-pairs-loader.js?v=5" defer></script>
+    <script src="/static/js/toast.js?v=5" defer></script>
+    <script src="/static/js/app.js?v=5" defer></script>
     
     <!-- Favicon -->
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">

static/css/main.css

@@ -726,6 +726,14 @@ table td {
     padding: 12px;
     text-align: left;
     border-bottom: 1px solid var(--border);
+    white-space: nowrap;
+}
+
+table td:nth-child(3),
+table td:nth-child(5),
+table td:nth-child(6) {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 14px;
 }
 
 table th {

static/js/app.js

@@ -230,6 +230,9 @@ function loadTabData(tabId) {
         case 'settings':
             loadSettings();
             break;
+        case 'diagnostics':
+            refreshDiagnosticStatus();
+            break;
         default:
             console.log('No specific loader for tab:', tabId);
     }
@@ -1579,19 +1582,48 @@ function updateStatusCards(summary) {
 
 async function refreshDiagnosticStatus() {
     try {
-        // Get current status from /api/diagnostics/health or similar
-        const response = await fetch('/api/health');
-        const healthData = await response.json();
-
-        // For now, just update the last test time
+        // Get models status to determine transformers and HF hub status
+        const modelsResponse = await fetch('/api/models/status');
+        if (modelsResponse.ok) {
+            const modelsData = await modelsResponse.json();
+            
+            // Update status cards
+            const transformersStatusEl = document.getElementById('transformers-status-value');
+            const hfStatusEl = document.getElementById('hf-status-value');
+            const modelsLoadedEl = document.getElementById('models-status-value');
+            
+            if (transformersStatusEl) {
+                const transformersAvailable = modelsData.transformers_available || false;
+                transformersStatusEl.innerHTML = transformersAvailable ?
+                    '<span style="color: #10b981;">✅ Available</span>' :
+                    '<span style="color: #ef4444;">❌ Not Available</span>';
+            }
+            
+            if (hfStatusEl) {
+                const hfMode = modelsData.hf_mode || 'off';
+                const isConnected = hfMode !== 'off';
+                hfStatusEl.innerHTML = isConnected ?
+                    '<span style="color: #10b981;">✅ Connected (' + hfMode + ')</span>' :
+                    '<span style="color: #f59e0b;">⚠️ Offline Mode</span>';
+            }
+            
+            if (modelsLoadedEl) {
+                const modelsLoaded = modelsData.models_loaded || 0;
+                modelsLoadedEl.textContent = modelsLoaded;
+            }
+        }
+        
+        // Update the last test time
         const lastRun = localStorage.getItem('lastDiagnosticRun');
-        document.getElementById('last-test-value').textContent =
-            lastRun ? new Date(lastRun).toLocaleString() : 'Never';
+        const lastTestEl = document.getElementById('last-test-value');
+        if (lastTestEl) {
+            lastTestEl.textContent = lastRun ? new Date(lastRun).toLocaleString() : 'Never';
+        }
 
-        showToast('✅ Status refreshed', 'success');
+        getToast().success('Status refreshed');
     } catch (error) {
         console.error('Error refreshing status:', error);
-        showToast('❌ Failed to refresh status', 'error');
+        getToast().error('Failed to refresh status');
     }
 }