Upload 78 files

api_server_extended.py

@@ -1963,13 +1963,40 @@ async def run_diagnostic_test():
     start_time = time.time()
 
     try:
+        # Find the diagnostic script - check multiple possible locations
+        diagnostic_script = None
+        possible_paths = [
+            WORKSPACE_ROOT / "test_models_diagnostic.py",
+            Path("test_models_diagnostic.py"),
+            Path(__file__).parent / "test_models_diagnostic.py",
+        ]
+        
+        for path in possible_paths:
+            if path.exists():
+                diagnostic_script = path
+                break
+        
+        if not diagnostic_script:
+            return {
+                "status": "error",
+                "output": "test_models_diagnostic.py not found. Searched in:\n" + "\n".join([str(p) for p in possible_paths]),
+                "timestamp": datetime.now().isoformat(),
+                "duration_seconds": 0,
+                "summary": {
+                    "transformers_available": False,
+                    "hf_hub_connected": False,
+                    "models_loaded": 0,
+                    "critical_issues": ["Diagnostic script not found"]
+                }
+            }
+        
         # Execute the diagnostic script
         result = subprocess.run(
-            ["python3", "test_models_diagnostic.py"],
+            ["python3", str(diagnostic_script)],
             capture_output=True,
             text=True,
             timeout=60,  # 60 second timeout
-            cwd=WORKSPACE_ROOT
+            cwd=str(diagnostic_script.parent)
         )
 
         duration = time.time() - start_time

index.html

@@ -102,7 +102,7 @@
                     </svg>
                     <span>News</span>
                 </button>
-                <button class="nav-item" data-tab="ai-tools" onclick="window.location.href='/ai-tools'">
+                <button class="nav-item" data-tab="ai-tools" onclick="switchTab('ai-tools')">
                     <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="M12 2L2 7l10 5 10-5-10-5z"></path>
                         <path d="M2 17l10 5 10-5"></path>
@@ -304,8 +304,21 @@
                         <div id="trending-coins"></div>
                     </div>
                     
+                    <!-- Enhanced Sentiment Analysis Section -->
                     <div class="glass-card">
-                        <h3>Fear & Greed Index</h3>
+                        <div class="card-header">
+                            <div>
+                                <h3>📊 Market Sentiment Analysis</h3>
+                                <p class="text-secondary">Real-time market sentiment indicators and Fear & Greed Index</p>
+                            </div>
+                            <button class="btn-refresh" onclick="loadMarketData()" title="Refresh Sentiment Data">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <polyline points="23 4 23 10 17 10"></polyline>
+                                    <polyline points="1 20 1 14 7 14"></polyline>
+                                    <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                                </svg>
+                            </button>
+                        </div>
                         <div id="fear-greed"></div>
                     </div>
                 </section>
@@ -570,8 +583,22 @@
                 <!-- Test & Diagnostics Tab -->
                 <section id="tab-diagnostics" class="tab-panel">
                     <div class="glass-card">
-                        <h3>System Diagnostics & Model Testing</h3>
-                        <p class="text-secondary">Run comprehensive tests on AI models, transformers, and HuggingFace Hub connectivity</p>
+                        <div class="card-header">
+                            <div>
+                                <h3>🔧 Advanced Diagnostics & Monitoring</h3>
+                                <p class="text-secondary">Comprehensive system health monitoring, testing, and debugging tools</p>
+                            </div>
+                            <div style="display: flex; gap: 8px;">
+                                <button class="btn-refresh" onclick="toggleAutoRefresh()" id="auto-refresh-btn">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                                        <polyline points="23 4 23 10 17 10"></polyline>
+                                        <polyline points="1 20 1 14 7 14"></polyline>
+                                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                                    </svg>
+                                    Auto: OFF
+                                </button>
+                            </div>
+                        </div>
                     </div>
 
                     <!-- Quick Status Cards -->
@@ -633,25 +660,104 @@
                         </div>
                     </div>
 
-                    <!-- Action Buttons -->
+                    <!-- System Health Overview -->
+                    <div class="glass-card">
+                        <div class="card-header">
+                            <h3>📊 System Health Overview</h3>
+                            <button class="btn-refresh" onclick="loadSystemHealth()" title="Refresh Health Status">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <polyline points="23 4 23 10 17 10"></polyline>
+                                    <polyline points="1 20 1 14 7 14"></polyline>
+                                    <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                                </svg>
+                            </button>
+                        </div>
+                        <div id="system-health-overview" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
+                            <!-- Will be populated by JavaScript -->
+                        </div>
+                    </div>
+
+                    <!-- Provider & Model Status Table -->
+                    <div class="glass-card">
+                        <div class="card-header">
+                            <h3>🔍 Provider & Model Status</h3>
+                            <div style="display: flex; gap: 8px;">
+                                <button class="btn-refresh" onclick="loadProviderHealth()" title="Refresh Provider Status">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <polyline points="23 4 23 10 17 10"></polyline>
+                                        <polyline points="1 20 1 14 7 14"></polyline>
+                                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                                    </svg>
+                                </button>
+                                <button class="btn-refresh" onclick="triggerSelfHeal()" title="Trigger Self-Healing">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <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>
+                                    Self-Heal
+                                </button>
+                            </div>
+                        </div>
+                        <div style="overflow-x: auto;">
+                            <table style="width: 100%; border-collapse: collapse;">
+                                <thead>
+                                    <tr style="border-bottom: 1px solid var(--border);">
+                                        <th style="padding: 12px; text-align: left; color: var(--text-secondary); font-weight: 600;">Name</th>
+                                        <th style="padding: 12px; text-align: left; color: var(--text-secondary); font-weight: 600;">Type</th>
+                                        <th style="padding: 12px; text-align: left; color: var(--text-secondary); font-weight: 600;">Status</th>
+                                        <th style="padding: 12px; text-align: left; color: var(--text-secondary); font-weight: 600;">Last Check</th>
+                                        <th style="padding: 12px; text-align: left; color: var(--text-secondary); font-weight: 600;">Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="provider-health-table">
+                                    <tr><td colspan="5" style="padding: 20px; text-align: center; color: var(--text-secondary);">Loading...</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                    <!-- Quick Diagnostic Actions -->
                     <div class="glass-card">
                         <div class="card-header">
-                            <h3>Diagnostic Actions</h3>
+                            <h3>⚡ Quick Diagnostic Actions</h3>
                         </div>
-                        <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;">
                             <button class="btn-primary" id="run-diagnostics-btn" onclick="runDiagnostic()">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
                                     <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
                                 </svg>
                                 Run Full Diagnostic
                             </button>
+                            <button class="btn-refresh" onclick="testAPIEndpoints()">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
+                                    <path d="M18 20V10"></path>
+                                    <path d="M12 20V4"></path>
+                                    <path d="M6 20v-6"></path>
+                                </svg>
+                                Test API Endpoints
+                            </button>
+                            <button class="btn-refresh" onclick="checkDatabaseHealth()">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
+                                    <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
+                                    <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
+                                    <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
+                                </svg>
+                                Check Database
+                            </button>
+                            <button class="btn-refresh" onclick="testNetworkConnectivity()">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
+                                    <circle cx="12" cy="12" r="10"></circle>
+                                    <path d="M2 12h20"></path>
+                                    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+                                </svg>
+                                Network Test
+                            </button>
                             <button class="btn-refresh" onclick="refreshDiagnosticStatus()">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
                                     <polyline points="23 4 23 10 17 10"></polyline>
                                     <polyline points="1 20 1 14 7 14"></polyline>
                                     <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
                                 </svg>
-                                Refresh Status
+                                Refresh All
                             </button>
                             <button class="btn-refresh" onclick="downloadDiagnosticLog()">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
@@ -664,17 +770,60 @@
                         </div>
                     </div>
 
-                    <!-- Test Output Section -->
+                    <!-- Tabs for different diagnostic views -->
                     <div class="glass-card">
-                        <div class="card-header">
-                            <h3>Test Output</h3>
-                            <div id="test-progress" style="display: none;">
-                                <div class="spinner"></div>
-                                <span>Running diagnostic tests...</span>
+                        <div style="display: flex; gap: 8px; border-bottom: 1px solid var(--border); margin-bottom: 20px;">
+                            <button class="diagnostic-tab-btn active" data-tab="output" onclick="switchDiagnosticTab('output')">Test Output</button>
+                            <button class="diagnostic-tab-btn" data-tab="health" onclick="switchDiagnosticTab('health')">Health Details</button>
+                            <button class="diagnostic-tab-btn" data-tab="api-test" onclick="switchDiagnosticTab('api-test')">API Tests</button>
+                            <button class="diagnostic-tab-btn" data-tab="logs" onclick="switchDiagnosticTab('logs')">Recent Logs</button>
+                        </div>
+
+                        <!-- Test Output Tab -->
+                        <div id="diagnostic-tab-output" class="diagnostic-tab-content active">
+                            <div class="card-header">
+                                <h3>Test Output</h3>
+                                <div id="test-progress" style="display: none;">
+                                    <div class="spinner"></div>
+                                    <span>Running diagnostic tests...</span>
+                                </div>
+                            </div>
+                            <div style="background: rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 15px; max-height: 500px; overflow-y: auto; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.6;">
+                                <pre id="diagnostic-output" style="margin: 0; color: var(--text-primary); white-space: pre-wrap; word-wrap: break-word;"></pre>
+                            </div>
+                        </div>
+
+                        <!-- Health Details Tab -->
+                        <div id="diagnostic-tab-health" class="diagnostic-tab-content" style="display: none;">
+                            <h3>Detailed Health Information</h3>
+                            <div id="health-details-content" style="margin-top: 16px;">
+                                <p class="text-secondary">Click "Refresh All" to load detailed health information</p>
                             </div>
                         </div>
-                        <div style="background: rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 15px; max-height: 500px; overflow-y: auto; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.6;">
-                            <pre id="diagnostic-output" style="margin: 0; color: var(--text-primary); white-space: pre-wrap; word-wrap: break-word;"></pre>
+
+                        <!-- API Tests Tab -->
+                        <div id="diagnostic-tab-api-test" class="diagnostic-tab-content" style="display: none;">
+                            <h3>API Endpoint Testing</h3>
+                            <div id="api-test-results" style="margin-top: 16px;">
+                                <p class="text-secondary">Click "Test API Endpoints" to run tests</p>
+                            </div>
+                        </div>
+
+                        <!-- Logs Tab -->
+                        <div id="diagnostic-tab-logs" class="diagnostic-tab-content" style="display: none;">
+                            <div class="card-header">
+                                <h3>Recent System Logs</h3>
+                                <button class="btn-refresh" onclick="loadRecentLogs()">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <polyline points="23 4 23 10 17 10"></polyline>
+                                        <polyline points="1 20 1 14 7 14"></polyline>
+                                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                                    </svg>
+                                </button>
+                            </div>
+                            <div id="recent-logs-content" style="margin-top: 16px; max-height: 500px; overflow-y: auto;">
+                                <p class="text-secondary">Loading logs...</p>
+                            </div>
                         </div>
                     </div>
 
@@ -706,6 +855,23 @@
                         <div id="suggested-fixes" style="margin-top: 20px;"></div>
                     </div>
                 </section>
+
+                <!-- AI Design Tools Tab -->
+                <section id="tab-ai-tools" class="tab-panel">
+                    <div id="ai-tools-content" style="width: 100%; height: calc(100vh - 180px); min-height: 600px; position: relative;">
+                        <iframe 
+                            id="ai-tools-iframe" 
+                            src="/ai-tools" 
+                            style="width: 100%; height: 100%; border: none; border-radius: 12px; background: transparent; display: none;"
+                            title="AI Design Tools"
+                            onload="handleAIToolsIframeLoad()"
+                        ></iframe>
+                        <div id="ai-tools-loading" style="text-align: center; padding: 60px 20px;">
+                            <div class="spinner" style="margin: 0 auto 20px;"></div>
+                            <p class="text-secondary">Loading AI Design Tools...</p>
+                        </div>
+                    </div>
+                </section>
             </main>
         </div>
     </div>

static/css/main.css

@@ -47,6 +47,20 @@
     --transition-fast: 0.2s ease;
     --transition-normal: 0.3s ease;
     --transition-slow: 0.5s ease;
+    
+    /* Spacing */
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+    --spacing-2xl: 48px;
+    
+    /* Border Radius */
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 20px;
 }
 
 * {
@@ -438,39 +452,88 @@ body::before {
    ============================================================================= */
 
 .glass-card {
-    background: rgba(17, 24, 39, 0.6);
-    backdrop-filter: blur(10px);
+    background: rgba(17, 24, 39, 0.7);
+    backdrop-filter: blur(12px) saturate(180%);
     border: 1px solid var(--border);
-    border-radius: 16px;
-    padding: 25px;
-    margin-bottom: 20px;
+    border-radius: 18px;
+    padding: 28px;
+    margin-bottom: 24px;
     transition: all var(--transition-normal);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    position: relative;
+    overflow: hidden;
+}
+
+.glass-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, var(--primary), transparent);
+    opacity: 0;
+    transition: opacity var(--transition-normal);
 }
 
 .glass-card:hover {
-    border-color: rgba(102, 126, 234, 0.3);
-    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
+    border-color: rgba(102, 126, 234, 0.4);
+    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2), 0 4px 20px rgba(0, 0, 0, 0.3);
+    transform: translateY(-2px);
+}
+
+.glass-card:hover::before {
+    opacity: 1;
 }
 
 .glass-card h3 {
-    font-size: 20px;
+    font-size: 22px;
+    font-weight: 700;
     margin-bottom: 20px;
     color: var(--text-primary);
     border-bottom: 2px solid var(--border);
-    padding-bottom: 10px;
+    padding-bottom: 12px;
+    letter-spacing: -0.02em;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.glass-card h3::before {
+    content: '';
+    width: 4px;
+    height: 22px;
+    background: var(--gradient-purple);
+    border-radius: 2px;
+    flex-shrink: 0;
 }
 
 .card-header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
+    align-items: flex-start;
+    margin-bottom: 24px;
+    gap: 16px;
+    flex-wrap: wrap;
 }
 
 .card-header h3 {
     margin-bottom: 0;
     border-bottom: none;
     padding-bottom: 0;
+    flex: 1;
+    min-width: 200px;
+}
+
+.card-header > div:first-child {
+    flex: 1;
+    min-width: 200px;
+}
+
+.card-header > div:first-child p {
+    margin-top: 6px;
+    font-size: 14px;
+    line-height: 1.5;
 }
 
 /* Stats Grid */
@@ -496,18 +559,19 @@ body::before {
 }
 
 .stat-card {
-    background: linear-gradient(135deg, rgba(17, 24, 39, 0.8), rgba(31, 41, 55, 0.6));
+    background: linear-gradient(135deg, rgba(17, 24, 39, 0.85), rgba(31, 41, 55, 0.7));
     border: 1px solid var(--border);
-    border-radius: 16px;
-    padding: 20px;
+    border-radius: 18px;
+    padding: 24px;
     display: flex;
     align-items: center;
-    gap: 15px;
+    gap: 18px;
     transition: all var(--transition-normal);
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(12px) saturate(180%);
     position: relative;
     overflow: hidden;
-    min-height: 120px;
+    min-height: 130px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 }
 
 .stat-card::before {
@@ -523,8 +587,9 @@ body::before {
 }
 
 .stat-card:hover {
-    transform: translateY(-5px);
-    box-shadow: var(--shadow);
+    transform: translateY(-6px);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(102, 126, 234, 0.2);
+    border-color: rgba(102, 126, 234, 0.4);
 }
 
 .stat-card:hover::before {
@@ -548,14 +613,19 @@ body::before {
 }
 
 .stat-icon {
-    width: 60px;
-    height: 60px;
-    border-radius: 14px;
+    width: 64px;
+    height: 64px;
+    border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     flex-shrink: 0;
+    transition: transform var(--transition-normal);
+}
+
+.stat-card:hover .stat-icon {
+    transform: scale(1.1) rotate(5deg);
 }
 
 .stat-card.gradient-purple .stat-icon {
@@ -587,30 +657,39 @@ body::before {
 }
 
 .stat-value {
-    font-size: 32px;
+    font-size: 36px;
     font-weight: 800;
-    color: var(--primary);
-    margin-bottom: 5px;
+    color: var(--text-primary);
+    margin-bottom: 6px;
     display: block;
     visibility: visible;
     opacity: 1;
     min-height: 1.2em;
     line-height: 1.2;
+    letter-spacing: -0.03em;
+    background: linear-gradient(135deg, var(--text-primary), rgba(255, 255, 255, 0.8));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
 
 .stat-label {
     font-size: 14px;
     color: var(--text-secondary);
     font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 8px;
 }
 
 .stat-trend {
-    font-size: 12px;
+    font-size: 13px;
     color: var(--text-secondary);
-    margin-top: 5px;
+    margin-top: 8px;
     display: flex;
     align-items: center;
-    gap: 5px;
+    gap: 6px;
+    font-weight: 500;
 }
 
 .stat-trend i {
@@ -629,28 +708,38 @@ body::before {
    ============================================================================= */
 
 .form-group {
-    margin-bottom: 20px;
+    margin-bottom: 24px;
 }
 
 .form-group label {
     display: block;
-    margin-bottom: 8px;
+    margin-bottom: 10px;
     font-weight: 600;
     color: var(--text-primary);
+    font-size: 14px;
+    letter-spacing: 0.01em;
 }
 
 .form-group input,
 .form-group textarea,
 .form-group select {
     width: 100%;
-    padding: 12px;
-    background: rgba(31, 41, 55, 0.6);
-    border: 1px solid var(--border);
-    border-radius: 10px;
+    padding: 14px 16px;
+    background: rgba(31, 41, 55, 0.7);
+    border: 1.5px solid var(--border);
+    border-radius: 12px;
     color: var(--text-primary);
     font-family: inherit;
-    font-size: 14px;
-    transition: var(--transition-fast);
+    font-size: 15px;
+    transition: all var(--transition-fast);
+    backdrop-filter: blur(8px);
+}
+
+.form-group input:hover,
+.form-group textarea:hover,
+.form-group select:hover {
+    border-color: rgba(102, 126, 234, 0.3);
+    background: rgba(31, 41, 55, 0.8);
 }
 
 .form-group input:focus,
@@ -658,12 +747,24 @@ body::before {
 .form-group select:focus {
     outline: none;
     border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15), 0 4px 12px rgba(102, 126, 234, 0.1);
+    background: rgba(31, 41, 55, 0.9);
+    transform: translateY(-1px);
 }
 
 .form-group textarea {
     resize: vertical;
-    min-height: 80px;
+    min-height: 100px;
+    line-height: 1.6;
+}
+
+.form-group select {
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 14px center;
+    padding-right: 40px;
 }
 
 /* =============================================================================
@@ -671,17 +772,23 @@ body::before {
    ============================================================================= */
 
 .btn-primary, .btn-refresh {
-    padding: 12px 24px;
+    padding: 14px 28px;
     background: linear-gradient(135deg, var(--primary), var(--primary-dark));
     border: none;
-    border-radius: 10px;
+    border-radius: 12px;
     color: white;
     font-weight: 600;
     cursor: pointer;
     transition: all var(--transition-fast);
-    font-size: 14px;
+    font-size: 15px;
     position: relative;
     overflow: hidden;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    letter-spacing: 0.01em;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
 }
 
 .btn-primary::before, .btn-refresh::before {
@@ -692,14 +799,20 @@ body::before {
     width: 0;
     height: 0;
     border-radius: 50%;
-    background: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.25);
     transform: translate(-50%, -50%);
     transition: width 0.6s, height 0.6s;
 }
 
 .btn-primary:hover, .btn-refresh:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+    transform: translateY(-3px);
+    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5);
+    background: linear-gradient(135deg, var(--primary-light), var(--primary));
+}
+
+.btn-primary:active, .btn-refresh:active {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
 }
 
 .btn-primary:hover::before, .btn-refresh:hover::before {
@@ -708,8 +821,14 @@ body::before {
 }
 
 .btn-refresh {
-    background: rgba(102, 126, 234, 0.2);
-    border: 1px solid var(--primary);
+    background: rgba(102, 126, 234, 0.15);
+    border: 1.5px solid var(--primary);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
+}
+
+.btn-refresh:hover {
+    background: rgba(102, 126, 234, 0.25);
+    border-color: var(--primary-light);
 }
 
 /* =============================================================================
@@ -718,15 +837,19 @@ body::before {
 
 table {
     width: 100%;
-    border-collapse: collapse;
+    border-collapse: separate;
+    border-spacing: 0;
+    border-radius: 12px;
+    overflow: hidden;
 }
 
 table th,
 table td {
-    padding: 12px;
+    padding: 16px;
     text-align: left;
     border-bottom: 1px solid var(--border);
     white-space: nowrap;
+    transition: background-color var(--transition-fast);
 }
 
 table td:nth-child(3),
@@ -737,13 +860,33 @@ table td:nth-child(6) {
 }
 
 table th {
-    background: rgba(31, 41, 55, 0.6);
-    font-weight: 600;
+    background: linear-gradient(135deg, rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.8));
+    font-weight: 700;
     color: var(--text-primary);
+    text-transform: uppercase;
+    font-size: 12px;
+    letter-spacing: 0.05em;
+    border-bottom: 2px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+table tbody tr {
+    transition: all var(--transition-fast);
 }
 
-table tr:hover {
-    background: rgba(102, 126, 234, 0.05);
+table tbody tr:hover {
+    background: rgba(102, 126, 234, 0.08);
+    transform: scale(1.01);
+}
+
+table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+table tbody tr td:first-child {
+    font-weight: 600;
 }
 
 /* =============================================================================
@@ -751,29 +894,55 @@ table tr:hover {
    ============================================================================= */
 
 .alert {
-    padding: 15px;
-    border-radius: 10px;
-    margin-bottom: 15px;
+    padding: 16px 20px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    border-left: 4px solid;
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    backdrop-filter: blur(8px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: all var(--transition-fast);
+}
+
+.alert:hover {
+    transform: translateX(4px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .alert-success {
     background: rgba(16, 185, 129, 0.15);
+    border-left-color: var(--success);
     border: 1px solid rgba(16, 185, 129, 0.3);
+    border-left-width: 4px;
     color: var(--success);
 }
 
 .alert-error {
     background: rgba(239, 68, 68, 0.15);
+    border-left-color: var(--danger);
     border: 1px solid rgba(239, 68, 68, 0.3);
+    border-left-width: 4px;
     color: var(--danger);
 }
 
 .alert-warning {
     background: rgba(245, 158, 11, 0.15);
+    border-left-color: var(--warning);
     border: 1px solid rgba(245, 158, 11, 0.3);
+    border-left-width: 4px;
     color: var(--warning);
 }
 
+.alert-info {
+    background: rgba(59, 130, 246, 0.15);
+    border-left-color: var(--info);
+    border: 1px solid rgba(59, 130, 246, 0.3);
+    border-left-width: 4px;
+    color: var(--info);
+}
+
 /* =============================================================================
    Loading States
    ============================================================================= */
@@ -790,11 +959,13 @@ table tr:hover {
 .spinner {
     border: 3px solid var(--border);
     border-top: 3px solid var(--primary);
+    border-right: 3px solid transparent;
     border-radius: 50%;
     width: 40px;
     height: 40px;
-    animation: spin 1s linear infinite;
+    animation: spin 0.8s linear infinite;
     margin: 0 auto 15px;
+    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
 }
 
 @keyframes spin {
@@ -1541,11 +1712,12 @@ body.light-theme ::-webkit-scrollbar-track {
 }
 
 .news-card-title {
-    font-size: 18px;
+    font-size: 20px;
     font-weight: 700;
     color: var(--text-primary);
-    margin-bottom: 10px;
-    line-height: 1.4;
+    margin-bottom: 12px;
+    line-height: 1.5;
+    letter-spacing: -0.01em;
 }
 
 .news-card-title a {
@@ -1969,6 +2141,157 @@ body.light-theme ::-webkit-scrollbar-track {
 
 /* Diagnostic Actions - Removed custom styles, using standard button classes */
 
+/* Diagnostic Tab Buttons */
+.diagnostic-tab-btn {
+    padding: 12px 24px;
+    background: transparent;
+    border: none;
+    border-bottom: 3px solid transparent;
+    color: var(--text-secondary);
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    font-size: 14px;
+    position: relative;
+    letter-spacing: 0.01em;
+}
+
+.diagnostic-tab-btn::after {
+    content: '';
+    position: absolute;
+    bottom: -3px;
+    left: 0;
+    width: 0;
+    height: 3px;
+    background: var(--gradient-purple);
+    transition: width var(--transition-normal);
+}
+
+.diagnostic-tab-btn:hover {
+    color: var(--text-primary);
+    background: rgba(102, 126, 234, 0.08);
+}
+
+.diagnostic-tab-btn:hover::after {
+    width: 100%;
+}
+
+.diagnostic-tab-btn.active {
+    color: var(--primary);
+    background: rgba(102, 126, 234, 0.1);
+}
+
+.diagnostic-tab-btn.active::after {
+    width: 100%;
+}
+
+.diagnostic-tab-content {
+    display: none;
+}
+
+.diagnostic-tab-content.active {
+    display: block;
+}
+
+/* Sentiment Analysis Enhancements */
+@keyframes pulse-glow {
+    0%, 100% {
+        box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
+    }
+    50% {
+        box-shadow: 0 0 40px rgba(102, 126, 234, 0.6);
+    }
+}
+
+@keyframes progress-fill {
+    from {
+        width: 0%;
+    }
+}
+
+.sentiment-gauge {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    margin: 0 auto;
+}
+
+.sentiment-progress-bar {
+    position: relative;
+    height: 24px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.sentiment-progress-fill {
+    height: 100%;
+    border-radius: 12px;
+    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+}
+
+.sentiment-progress-fill::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: 0.3;
+    }
+    50% {
+        opacity: 0.6;
+    }
+}
+
+/* Health Status Badge */
+.health-badge {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.health-badge.healthy {
+    background: rgba(16, 185, 129, 0.2);
+    color: var(--success);
+}
+
+.health-badge.degraded {
+    background: rgba(245, 158, 11, 0.2);
+    color: var(--warning);
+}
+
+.health-badge.unavailable {
+    background: rgba(239, 68, 68, 0.2);
+    color: var(--danger);
+}
+
+.health-badge.unknown {
+    background: rgba(107, 114, 128, 0.2);
+    color: var(--text-secondary);
+}
+
 /* Test Progress */
 #test-progress {
     display: flex;
@@ -2093,16 +2416,20 @@ body.light-theme ::-webkit-scrollbar-track {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    min-height: 400px;
-    padding: 60px 20px;
+    min-height: 500px;
+    padding: 80px 20px;
     text-align: center;
+    background: rgba(17, 24, 39, 0.3);
+    border-radius: 18px;
+    border: 2px dashed var(--border);
 }
 
 .placeholder-icon {
-    font-size: 80px;
-    margin-bottom: 24px;
-    opacity: 0.6;
+    font-size: 96px;
+    margin-bottom: 32px;
+    opacity: 0.7;
     animation: float 3s ease-in-out infinite;
+    filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.3));
 }
 
 @keyframes float {
@@ -2116,27 +2443,366 @@ body.light-theme ::-webkit-scrollbar-track {
 
 .placeholder-page h2 {
     color: var(--text-primary);
-    font-size: 32px;
-    font-weight: 700;
-    margin: 0 0 16px 0;
+    font-size: 36px;
+    font-weight: 800;
+    margin: 0 0 20px 0;
+    letter-spacing: -0.02em;
+    background: linear-gradient(135deg, var(--text-primary), rgba(255, 255, 255, 0.7));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
 
 .placeholder-page p {
     color: var(--text-secondary);
     font-size: 18px;
-    margin: 0 0 8px 0;
+    margin: 0 0 12px 0;
     max-width: 600px;
+    line-height: 1.6;
 }
 
 .placeholder-page .text-secondary {
     color: var(--text-muted);
-    font-size: 14px;
-    margin-bottom: 32px;
+    font-size: 15px;
+    margin-bottom: 40px;
+    line-height: 1.6;
 }
 
 .placeholder-page .btn-primary {
     margin-top: 16px;
 }
-        max-width: 300px;
+
+/* =============================================================================
+   System Status Display
+   ============================================================================= */
+
+.system-status-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.system-status-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 20px;
+    border-radius: 12px;
+    background: rgba(31, 41, 55, 0.5);
+    border: 1px solid var(--border);
+    backdrop-filter: blur(8px);
+}
+
+.system-status-header.alert-success {
+    background: rgba(16, 185, 129, 0.1);
+    border-color: rgba(16, 185, 129, 0.3);
+}
+
+.system-status-header.alert-warning {
+    background: rgba(245, 158, 11, 0.1);
+    border-color: rgba(245, 158, 11, 0.3);
+}
+
+.system-status-header.alert-error {
+    background: rgba(239, 68, 68, 0.1);
+    border-color: rgba(239, 68, 68, 0.3);
+}
+
+.status-icon-wrapper {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(102, 126, 234, 0.2);
+    flex-shrink: 0;
+}
+
+.system-status-header.alert-success .status-icon-wrapper {
+    background: rgba(16, 185, 129, 0.2);
+    color: var(--success);
+}
+
+.system-status-header.alert-warning .status-icon-wrapper {
+    background: rgba(245, 158, 11, 0.2);
+    color: var(--warning);
+}
+
+.system-status-header.alert-error .status-icon-wrapper {
+    background: rgba(239, 68, 68, 0.2);
+    color: var(--danger);
+}
+
+.status-icon-wrapper svg {
+    width: 24px;
+    height: 24px;
+}
+
+.status-title {
+    font-size: 13px;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 600;
+    margin-bottom: 4px;
+}
+
+.status-value {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--text-primary);
+    letter-spacing: -0.02em;
+}
+
+.system-status-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 16px;
+}
+
+.status-item {
+    padding: 16px;
+    background: rgba(31, 41, 55, 0.4);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    backdrop-filter: blur(8px);
+    transition: all var(--transition-fast);
+}
+
+.status-item:hover {
+    background: rgba(31, 41, 55, 0.6);
+    border-color: rgba(102, 126, 234, 0.3);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.status-item.status-full-width {
+    grid-column: 1 / -1;
+}
+
+.status-item.status-online {
+    border-left: 3px solid var(--success);
+}
+
+.status-item.status-degraded {
+    border-left: 3px solid var(--warning);
+}
+
+.status-item.status-offline {
+    border-left: 3px solid var(--danger);
+}
+
+.status-item-label {
+    font-size: 12px;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.status-item-value {
+    font-size: 28px;
+    font-weight: 800;
+    color: var(--text-primary);
+    letter-spacing: -0.03em;
+    line-height: 1.2;
+}
+
+.status-item-value.status-time {
+    font-size: 16px;
+    font-weight: 600;
+    font-family: 'JetBrains Mono', monospace;
+    color: var(--text-secondary);
+}
+
+.status-online .status-item-value {
+    color: var(--success);
+}
+
+.status-degraded .status-item-value {
+    color: var(--warning);
+}
+
+.status-offline .status-item-value {
+    color: var(--danger);
+}
+
+@media (max-width: 768px) {
+    .system-status-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .status-item-value {
+        font-size: 24px;
+    }
+    
+    .status-value {
+        font-size: 20px;
+    }
+}
+
+/* =============================================================================
+   Trending Coins Display
+   ============================================================================= */
+
+.trending-coins-grid {
+    display: grid;
+    gap: 16px;
+}
+
+.trending-coin-card {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 18px;
+    background: rgba(31, 41, 55, 0.6);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    border-left: 4px solid var(--primary);
+    backdrop-filter: blur(8px);
+    transition: all var(--transition-normal);
+    position: relative;
+    overflow: hidden;
+}
+
+.trending-coin-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: var(--gradient-purple);
+    opacity: 0;
+    transition: opacity var(--transition-normal);
+}
+
+.trending-coin-card:hover {
+    background: rgba(31, 41, 55, 0.8);
+    border-color: rgba(102, 126, 234, 0.4);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
+}
+
+.trending-coin-card:hover::before {
+    opacity: 1;
+}
+
+.trending-coin-rank {
+    font-size: 20px;
+    font-weight: 800;
+    color: var(--primary);
+    min-width: 40px;
+    text-align: center;
+    background: rgba(102, 126, 234, 0.15);
+    border-radius: 10px;
+    padding: 8px 12px;
+    flex-shrink: 0;
+}
+
+.trending-coin-content {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    flex: 1;
+    min-width: 0;
+}
+
+.trending-coin-thumb {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    object-fit: cover;
+    flex-shrink: 0;
+    border: 1px solid var(--border);
+}
+
+.trending-coin-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.trending-coin-name {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    margin-bottom: 6px;
+    flex-wrap: wrap;
+}
+
+.trending-coin-name strong {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text-primary);
+    letter-spacing: -0.01em;
+}
+
+.trending-coin-fullname {
+    font-size: 14px;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.trending-coin-meta {
+    font-size: 12px;
+    color: var(--text-muted);
+    font-weight: 500;
+    margin-top: 4px;
+}
+
+.trending-coin-score {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 4px;
+    flex-shrink: 0;
+    padding-left: 16px;
+    border-left: 1px solid var(--border);
+}
+
+.trending-coin-score-value {
+    font-size: 22px;
+    font-weight: 800;
+    color: var(--success);
+    letter-spacing: -0.02em;
+    line-height: 1;
+}
+
+.trending-coin-score-label {
+    font-size: 11px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 600;
+}
+
+@media (max-width: 768px) {
+    .trending-coin-card {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+    }
+    
+    .trending-coin-rank {
+        align-self: flex-start;
+    }
+    
+    .trending-coin-score {
+        align-self: flex-end;
+        border-left: none;
+        border-top: 1px solid var(--border);
+        padding-left: 0;
+        padding-top: 12px;
+        width: 100%;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+    
+    .trending-coin-name {
+        flex-direction: column;
+        gap: 4px;
     }
 }

static/js/app.js

@@ -110,6 +110,7 @@ function switchTab(tabId) {
         'news': { title: 'Crypto News', subtitle: 'Latest News & Updates' },
         'settings': { title: 'Settings', subtitle: 'System Configuration' },
         'diagnostics': { title: 'Test & Diagnostics', subtitle: 'System Diagnostics & Model Testing' },
+        'ai-tools': { title: 'AI Design Tools', subtitle: 'AI-Powered Tools & Utilities' },
         'providers': { title: 'Providers', subtitle: 'Provider Management' },
         'resources': { title: 'Resources', subtitle: 'Resource Management' },
         'defi': { title: 'DeFi Analytics', subtitle: 'DeFi Protocol Analytics' },
@@ -233,6 +234,9 @@ function loadTabData(tabId) {
         case 'diagnostics':
             refreshDiagnosticStatus();
             break;
+        case 'ai-tools':
+            loadAITools();
+            break;
         default:
             console.log('No specific loader for tab:', tabId);
     }
@@ -446,15 +450,55 @@ async function loadDashboard() {
                     formattedTime = lastUpdate;
                 }
                 
+                // Create a properly formatted system status display
+                const statusIcon = healthStatus === 'healthy' || healthStatus === 'ok' ? 
+                    '<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 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>' :
+                    healthStatus === 'degraded' ?
+                    '<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"><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>' :
+                    '<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"><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>';
+                
+                const statusText = healthStatus === 'ok' ? 'Healthy' : 
+                                  healthStatus === 'healthy' ? 'Healthy' :
+                                  healthStatus === 'degraded' ? 'Degraded' :
+                                  healthStatus === 'error' ? 'Error' : 'Unknown';
+                
                 systemStatusDiv.innerHTML = `
-                    <div class="alert ${healthClass}">
-                        <strong>System Status:</strong> ${healthStatus === 'ok' ? 'Healthy' : healthStatus}<br>
-                        <strong>Total Providers:</strong> ${totalProviders}<br>
-                        <strong>Online APIs:</strong> ${onlineProviders}<br>
-                        <strong>Degraded APIs:</strong> ${degradedProviders}<br>
-                        <strong>Offline APIs:</strong> ${offlineProviders}<br>
-                        <strong>Avg Response Time:</strong> ${avgResponseTime}ms<br>
-                        <strong>Last Update:</strong> ${formattedTime}
+                    <div class="system-status-container">
+                        <div class="system-status-header ${healthClass}">
+                            <div class="status-icon-wrapper">
+                                ${statusIcon}
+                            </div>
+                            <div>
+                                <div class="status-title">System Status</div>
+                                <div class="status-value">${statusText}</div>
+                            </div>
+                        </div>
+                        <div class="system-status-grid">
+                            <div class="status-item">
+                                <div class="status-item-label">Total Providers</div>
+                                <div class="status-item-value">${totalProviders}</div>
+                            </div>
+                            <div class="status-item status-online">
+                                <div class="status-item-label">Online APIs</div>
+                                <div class="status-item-value">${onlineProviders}</div>
+                            </div>
+                            <div class="status-item status-degraded">
+                                <div class="status-item-label">Degraded APIs</div>
+                                <div class="status-item-value">${degradedProviders}</div>
+                            </div>
+                            <div class="status-item status-offline">
+                                <div class="status-item-label">Offline APIs</div>
+                                <div class="status-item-value">${offlineProviders}</div>
+                            </div>
+                            <div class="status-item">
+                                <div class="status-item-label">Avg Response Time</div>
+                                <div class="status-item-value">${avgResponseTime}ms</div>
+                            </div>
+                            <div class="status-item status-full-width">
+                                <div class="status-item-label">Last Update</div>
+                                <div class="status-item-value status-time">${formattedTime}</div>
+                            </div>
+                        </div>
                     </div>
                 `;
             }
@@ -611,19 +655,36 @@ async function loadMarketData() {
             
             if (trendingData.trending && trendingData.trending.length > 0) {
                 trendingDiv.innerHTML = `
-                    <div style="display: grid; gap: 10px;">
-                        ${trendingData.trending.map((coin, index) => `
-                            <div style="padding: 15px; background: rgba(31, 41, 55, 0.6); border-radius: 10px; display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--primary);">
-                                <div style="display: flex; align-items: center; gap: 10px;">
-                                    <span style="font-size: 18px; font-weight: 800; color: var(--primary);">#${index + 1}</span>
-                                    <div>
-                                        <strong>${coin.symbol || coin.id}</strong> - ${coin.name || 'Unknown'}
-                                        ${coin.market_cap_rank ? `<div style="font-size: 12px; color: var(--text-secondary);">Market Cap Rank: ${coin.market_cap_rank}</div>` : ''}
+                    <div class="trending-coins-grid">
+                        ${trendingData.trending.map((coin, index) => {
+                            const coinSymbol = coin.symbol || coin.id || 'N/A';
+                            const coinName = coin.name || 'Unknown';
+                            const marketCapRank = coin.market_cap_rank || null;
+                            const score = coin.score !== undefined && coin.score !== null ? coin.score : null;
+                            const thumb = coin.thumb || null;
+                            
+                            return `
+                            <div class="trending-coin-card">
+                                <div class="trending-coin-rank">#${index + 1}</div>
+                                <div class="trending-coin-content">
+                                    ${thumb ? `<img src="${thumb}" alt="${coinName}" class="trending-coin-thumb" onerror="this.style.display='none'">` : ''}
+                                    <div class="trending-coin-info">
+                                        <div class="trending-coin-name">
+                                            <strong>${coinSymbol}</strong>
+                                            <span class="trending-coin-fullname">${coinName}</span>
+                                        </div>
+                                        ${marketCapRank ? `<div class="trending-coin-meta">Market Cap Rank: #${marketCapRank}</div>` : ''}
                                     </div>
                                 </div>
-                                <div style="font-size: 20px; font-weight: 700; color: var(--success);">${coin.score ? coin.score.toFixed(2) : 'N/A'}</div>
+                                ${score !== null && score > 0 ? `
+                                    <div class="trending-coin-score">
+                                        <div class="trending-coin-score-value">${score.toFixed(2)}</div>
+                                        <div class="trending-coin-score-label">Score</div>
+                                    </div>
+                                ` : ''}
                             </div>
-                        `).join('')}
+                            `;
+                        }).join('')}
                     </div>
                 `;
             } else {
@@ -637,7 +698,7 @@ async function loadMarketData() {
             trendingDiv.innerHTML = '<div class="alert alert-warning">Trending data unavailable</div>';
         }
         
-        // Load Fear & Greed Index
+        // Load Fear & Greed Index with enhanced visualization
         try {
             const sentimentRes = await fetch('/api/sentiment');
             if (sentimentRes.ok) {
@@ -647,26 +708,171 @@ async function loadMarketData() {
                 const fgValue = sentimentData.fear_greed_index;
                 const fgLabel = sentimentData.fear_greed_label || 'Unknown';
                 
-                let fgColor = 'var(--warning)';
-                if (fgValue >= 75) fgColor = 'var(--success)';
-                else if (fgValue >= 50) fgColor = 'var(--info)';
-                else if (fgValue >= 25) fgColor = 'var(--warning)';
-                else fgColor = 'var(--danger)';
+                // Determine sentiment classification and colors
+                let sentimentClass = '';
+                let sentimentIcon = '';
+                let fgColor = '';
+                let bgGradient = '';
+                let description = '';
+                
+                if (fgValue >= 75) {
+                    sentimentClass = 'Extreme Greed';
+                    sentimentIcon = '🚀';
+                    fgColor = '#10b981';
+                    bgGradient = 'linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.1) 100%)';
+                    description = 'Market shows extreme greed. Consider taking profits.';
+                } else if (fgValue >= 50) {
+                    sentimentClass = 'Greed';
+                    sentimentIcon = '📈';
+                    fgColor = '#3b82f6';
+                    bgGradient = 'linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.1) 100%)';
+                    description = 'Market sentiment is bullish. Optimistic outlook.';
+                } else if (fgValue >= 25) {
+                    sentimentClass = 'Fear';
+                    sentimentIcon = '⚠️';
+                    fgColor = '#f59e0b';
+                    bgGradient = 'linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.1) 100%)';
+                    description = 'Market shows fear. Caution advised.';
+                } else {
+                    sentimentClass = 'Extreme Fear';
+                    sentimentIcon = '😱';
+                    fgColor = '#ef4444';
+                    bgGradient = 'linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%)';
+                    description = 'Extreme fear in market. Potential buying opportunity.';
+                }
+                
+                // Calculate progress bar percentage (0-100)
+                const progressPercent = fgValue;
+                
+                // Create circular gauge SVG
+                const circumference = 2 * Math.PI * 90; // radius = 90
+                const offset = circumference - (progressPercent / 100) * circumference;
                 
                 fgDiv.innerHTML = `
-                    <div style="text-align: center; padding: 30px;">
-                        <div style="font-size: 72px; font-weight: 800; margin-bottom: 10px; color: ${fgColor};">
-                            ${fgValue}
+                    <div style="display: grid; gap: 24px;">
+                        <!-- Main Fear & Greed Index Display with Circular Gauge -->
+                        <div style="background: ${bgGradient}; border: 2px solid ${fgColor}40; border-radius: 20px; padding: 40px; text-align: center; position: relative; overflow: hidden;">
+                            <!-- Background Pattern -->
+                            <div style="position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, ${fgColor}15 0%, transparent 70%); pointer-events: none; animation: pulse 3s ease-in-out infinite;"></div>
+                            
+                            <div style="position: relative; z-index: 1;">
+                                <!-- Circular Gauge -->
+                                <div style="position: relative; width: 240px; height: 240px; margin: 0 auto 24px;">
+                                    <svg width="240" height="240" style="transform: rotate(-90deg);">
+                                        <!-- Background Circle -->
+                                        <circle cx="120" cy="120" r="90" fill="none" stroke="rgba(255, 255, 255, 0.1)" stroke-width="12" />
+                                        <!-- Progress Circle -->
+                                        <circle 
+                                            cx="120" 
+                                            cy="120" 
+                                            r="90" 
+                                            fill="none" 
+                                            stroke="${fgColor}" 
+                                            stroke-width="12" 
+                                            stroke-linecap="round"
+                                            stroke-dasharray="${circumference}" 
+                                            stroke-dashoffset="${offset}"
+                                            style="transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1); filter: drop-shadow(0 0 10px ${fgColor}60);"
+                                        />
+                                    </svg>
+                                    <!-- Center Content -->
+                                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
+                                        <div style="font-size: 48px; margin-bottom: 8px; filter: drop-shadow(0 2px 4px ${fgColor}40);">
+                                            ${sentimentIcon}
+                                        </div>
+                                        <div style="font-size: 56px; font-weight: 900; line-height: 1; background: linear-gradient(135deg, ${fgColor}, ${fgColor}dd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
+                                            ${fgValue}
+                                        </div>
+                                        <div style="font-size: 12px; color: var(--text-secondary); margin-top: 4px;">/ 100</div>
+                                    </div>
+                                </div>
+                                
+                                <!-- Classification Label -->
+                                <div style="font-size: 28px; font-weight: 700; color: ${fgColor}; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 20px ${fgColor}40;">
+                                    ${sentimentClass}
+                                </div>
+                                
+                                <!-- Description -->
+                                <div style="font-size: 14px; color: var(--text-secondary); max-width: 400px; margin: 0 auto; line-height: 1.6;">
+                                    ${description}
+                                </div>
+                            </div>
                         </div>
-                        <div style="font-size: 24px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px;">
-                            ${fgLabel}
+                        
+                        <!-- Progress Bar Visualization -->
+                        <div>
+                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+                                <span style="font-size: 14px; font-weight: 600; color: var(--text-secondary);">Fear & Greed Index</span>
+                                <span style="font-size: 14px; font-weight: 700; color: ${fgColor};">${fgValue}/100</span>
+                            </div>
+                            
+                            <!-- Progress Bar Container -->
+                            <div class="sentiment-progress-bar">
+                                <!-- Progress Fill with Gradient -->
+                                <div class="sentiment-progress-fill" style="width: ${progressPercent}%; background: linear-gradient(90deg, ${fgColor} 0%, ${fgColor}dd 100%); box-shadow: 0 0 20px ${fgColor}40;">
+                                    <div style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 60%; background: rgba(255, 255, 255, 0.5); border-radius: 2px;"></div>
+                                </div>
+                                
+                                <!-- Scale Markers -->
+                                <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; pointer-events: none;">
+                                    <span style="font-size: 10px; color: var(--text-secondary); font-weight: 600;">0</span>
+                                    <span style="font-size: 10px; color: var(--text-secondary); font-weight: 600;">25</span>
+                                    <span style="font-size: 10px; color: var(--text-secondary); font-weight: 600;">50</span>
+                                    <span style="font-size: 10px; color: var(--text-secondary); font-weight: 600;">75</span>
+                                    <span style="font-size: 10px; color: var(--text-secondary); font-weight: 600;">100</span>
+                                </div>
+                            </div>
+                            
+                            <!-- Scale Labels -->
+                            <div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--text-secondary);">
+                                <span>😱 Extreme Fear</span>
+                                <span>⚠️ Fear</span>
+                                <span>😐 Neutral</span>
+                                <span>📈 Greed</span>
+                                <span>🚀 Extreme Greed</span>
+                            </div>
                         </div>
-                        <div style="font-size: 14px; color: var(--text-secondary);">
-                            Market Fear & Greed Index
+                        
+                        <!-- Additional Info Grid -->
+                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 8px;">
+                            <div style="padding: 16px; background: rgba(0, 0, 0, 0.2); border-radius: 12px; text-align: center; border: 1px solid var(--border);">
+                                <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 6px;">Current Value</div>
+                                <div style="font-size: 24px; font-weight: 700; color: ${fgColor};">${fgValue}</div>
+                            </div>
+                            <div style="padding: 16px; background: rgba(0, 0, 0, 0.2); border-radius: 12px; text-align: center; border: 1px solid var(--border);">
+                                <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 6px;">Classification</div>
+                                <div style="font-size: 14px; font-weight: 600; color: var(--text-primary);">${fgLabel}</div>
+                            </div>
+                            ${sentimentData.timestamp ? `
+                            <div style="padding: 16px; background: rgba(0, 0, 0, 0.2); border-radius: 12px; text-align: center; border: 1px solid var(--border);">
+                                <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 6px;">Last Update</div>
+                                <div style="font-size: 12px; font-weight: 600; color: var(--text-primary);">${new Date(sentimentData.timestamp).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}</div>
+                            </div>
+                            ` : ''}
+                            <div style="padding: 16px; background: rgba(0, 0, 0, 0.2); border-radius: 12px; text-align: center; border: 1px solid var(--border);">
+                                <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 6px;">Source</div>
+                                <div style="font-size: 12px; font-weight: 600; color: var(--text-primary);">Alternative.me</div>
+                            </div>
+                        </div>
+                        
+                        <!-- Market Interpretation -->
+                        <div style="padding: 20px; background: rgba(0, 0, 0, 0.3); border-radius: 12px; border-left: 4px solid ${fgColor};">
+                            <div style="display: flex; align-items: start; gap: 12px;">
+                                <div style="font-size: 24px;">💡</div>
+                                <div>
+                                    <div style="font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px;">Market Interpretation</div>
+                                    <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.6;">
+                                        ${fgValue >= 75 ? 
+                                            'The market is showing extreme greed. Historically, this may indicate a potential market top. Consider taking profits and being cautious with new positions.' :
+                                          fgValue >= 50 ?
+                                            'Market sentiment is positive with greed prevailing. This suggests bullish momentum, but monitor for overbought conditions.' :
+                                          fgValue >= 25 ?
+                                            'Fear is present in the market. This could indicate a buying opportunity for long-term investors, but exercise caution.' :
+                                            'Extreme fear dominates the market. Historically, this has often been a good time to buy, but ensure you have a solid risk management strategy.'}
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-                        ${sentimentData.timestamp ? `<div style="font-size: 12px; color: var(--text-secondary); margin-top: 10px;">
-                            Last Update: ${new Date(sentimentData.timestamp).toLocaleString('en-US')}
-                        </div>` : ''}
                     </div>
                 `;
             } else {
@@ -677,7 +883,13 @@ async function loadMarketData() {
             }
         } catch (fgError) {
             console.warn('Fear & Greed endpoint error:', fgError);
-            fgDiv.innerHTML = '<div class="alert alert-warning">Fear & Greed Index unavailable</div>';
+            fgDiv.innerHTML = `
+                <div style="padding: 40px; text-align: center;">
+                    <div style="font-size: 48px; margin-bottom: 16px;">⚠️</div>
+                    <div style="font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px;">Fear & Greed Index Unavailable</div>
+                    <div style="font-size: 14px; color: var(--text-secondary);">Unable to fetch sentiment data at this time. Please try again later.</div>
+                </div>
+            `;
         }
         
         console.log('✅ Market data loaded successfully');
@@ -1663,15 +1875,484 @@ function downloadDiagnosticLog() {
     showToast('✅ Log downloaded', 'success');
 }
 
-// Initialize diagnostics on page load
-document.addEventListener('DOMContentLoaded', function() {
-    // Update status cards on page load
-    refreshDiagnosticStatus();
-});
+// Note: Diagnostics initialization is handled in the enhanced section below
+
+// ===== ENHANCED DIAGNOSTIC FUNCTIONS =====
+
+let autoRefreshInterval = null;
+let autoRefreshEnabled = false;
+
+function toggleAutoRefresh() {
+    autoRefreshEnabled = !autoRefreshEnabled;
+    const btn = document.getElementById('auto-refresh-btn');
+    
+    if (autoRefreshEnabled) {
+        btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 4px;"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>Auto: ON (30s)';
+        btn.style.background = 'rgba(16, 185, 129, 0.2)';
+        btn.style.borderColor = 'var(--success)';
+        autoRefreshInterval = setInterval(() => {
+            refreshDiagnosticStatus();
+            loadSystemHealth();
+            loadProviderHealth();
+        }, 30000);
+        getToast().success('Auto-refresh enabled (30s interval)');
+    } else {
+        btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 4px;"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>Auto: OFF';
+        btn.style.background = '';
+        btn.style.borderColor = '';
+        if (autoRefreshInterval) {
+            clearInterval(autoRefreshInterval);
+            autoRefreshInterval = null;
+        }
+        getToast().info('Auto-refresh disabled');
+    }
+}
+
+function switchDiagnosticTab(tabName) {
+    // Hide all tabs
+    document.querySelectorAll('.diagnostic-tab-content').forEach(tab => {
+        tab.classList.remove('active');
+    });
+    document.querySelectorAll('.diagnostic-tab-btn').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    
+    // Show selected tab
+    document.getElementById(`diagnostic-tab-${tabName}`).classList.add('active');
+    document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
+    
+    // Load content if needed
+    if (tabName === 'health' && document.getElementById('health-details-content').innerHTML.includes('Click')) {
+        loadSystemHealth();
+    } else if (tabName === 'logs') {
+        loadRecentLogs();
+    }
+}
+
+async function loadSystemHealth() {
+    try {
+        const response = await fetch('/api/diagnostics/health');
+        if (!response.ok) throw new Error('Failed to fetch health data');
+        
+        const data = await response.json();
+        const container = document.getElementById('system-health-overview');
+        
+        if (!container) return;
+        
+        const providers = data.providers?.summary || {};
+        const models = data.models?.summary || {};
+        const overall = data.overall_health || {};
+        
+        container.innerHTML = `
+            <div class="stat-card gradient-blue">
+                <div class="stat-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                    </svg>
+                </div>
+                <div class="stat-content">
+                    <div class="stat-label">Providers</div>
+                    <div class="stat-value">${providers.healthy || 0}/${providers.total || 0}</div>
+                    <div class="stat-trend" style="color: ${overall.providers_ok ? 'var(--success)' : 'var(--warning)'};">
+                        ${overall.providers_ok ? '✅ Healthy' : '⚠️ Degraded'}
+                    </div>
+                </div>
+            </div>
+            <div class="stat-card gradient-purple">
+                <div class="stat-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                    </svg>
+                </div>
+                <div class="stat-content">
+                    <div class="stat-label">AI Models</div>
+                    <div class="stat-value">${models.healthy || 0}/${models.total || 0}</div>
+                    <div class="stat-trend" style="color: ${overall.models_ok ? 'var(--success)' : 'var(--warning)'};">
+                        ${overall.models_ok ? '✅ Healthy' : '⚠️ Degraded'}
+                    </div>
+                </div>
+            </div>
+            <div class="stat-card gradient-orange">
+                <div class="stat-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <path d="M12 6v6l4 2"></path>
+                    </svg>
+                </div>
+                <div class="stat-content">
+                    <div class="stat-label">In Cooldown</div>
+                    <div class="stat-value">${(providers.in_cooldown || 0) + (models.in_cooldown || 0)}</div>
+                    <div class="stat-trend">${(providers.in_cooldown || 0) + (models.in_cooldown || 0) > 0 ? '⚠️ Some services cooling' : '✅ All active'}</div>
+                </div>
+            </div>
+            <div class="stat-card gradient-green">
+                <div class="stat-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <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"></path>
+                    </svg>
+                </div>
+                <div class="stat-content">
+                    <div class="stat-label">Degraded</div>
+                    <div class="stat-value">${(providers.degraded || 0) + (models.degraded || 0)}</div>
+                    <div class="stat-trend">${(providers.degraded || 0) + (models.degraded || 0) > 0 ? '⚠️ Needs attention' : '✅ All optimal'}</div>
+                </div>
+            </div>
+        `;
+        
+        // Update health details tab
+        const healthDetails = document.getElementById('health-details-content');
+        if (healthDetails) {
+            healthDetails.innerHTML = `
+                <div style="display: grid; gap: 16px;">
+                    <div>
+                        <h4 style="margin-bottom: 12px;">Provider Health Summary</h4>
+                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;">
+                            <div style="padding: 12px; background: rgba(0,0,0,0.2); border-radius: 8px;">
+                                <div style="color: var(--text-secondary); font-size: 12px;">Total</div>
+                                <div style="font-size: 24px; font-weight: 700;">${providers.total || 0}</div>
+                            </div>
+                            <div style="padding: 12px; background: rgba(16,185,129,0.1); border-radius: 8px; border: 1px solid rgba(16,185,129,0.3);">
+                                <div style="color: var(--success); font-size: 12px;">Healthy</div>
+                                <div style="font-size: 24px; font-weight: 700; color: var(--success);">${providers.healthy || 0}</div>
+                            </div>
+                            <div style="padding: 12px; background: rgba(245,158,11,0.1); border-radius: 8px; border: 1px solid rgba(245,158,11,0.3);">
+                                <div style="color: var(--warning); font-size: 12px;">Degraded</div>
+                                <div style="font-size: 24px; font-weight: 700; color: var(--warning);">${providers.degraded || 0}</div>
+                            </div>
+                            <div style="padding: 12px; background: rgba(239,68,68,0.1); border-radius: 8px; border: 1px solid rgba(239,68,68,0.3);">
+                                <div style="color: var(--danger); font-size: 12px;">Unavailable</div>
+                                <div style="font-size: 24px; font-weight: 700; color: var(--danger);">${providers.unavailable || 0}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <h4 style="margin-bottom: 12px;">Model Health Summary</h4>
+                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;">
+                            <div style="padding: 12px; background: rgba(0,0,0,0.2); border-radius: 8px;">
+                                <div style="color: var(--text-secondary); font-size: 12px;">Total</div>
+                                <div style="font-size: 24px; font-weight: 700;">${models.total || 0}</div>
+                            </div>
+                            <div style="padding: 12px; background: rgba(16,185,129,0.1); border-radius: 8px; border: 1px solid rgba(16,185,129,0.3);">
+                                <div style="color: var(--success); font-size: 12px;">Healthy</div>
+                                <div style="font-size: 24px; font-weight: 700; color: var(--success);">${models.healthy || 0}</div>
+                            </div>
+                            <div style="padding: 12px; background: rgba(245,158,11,0.1); border-radius: 8px; border: 1px solid rgba(245,158,11,0.3);">
+                                <div style="color: var(--warning); font-size: 12px;">Degraded</div>
+                                <div style="font-size: 24px; font-weight: 700; color: var(--warning);">${models.degraded || 0}</div>
+                            </div>
+                            <div style="padding: 12px; background: rgba(239,68,68,0.1); border-radius: 8px; border: 1px solid rgba(239,68,68,0.3);">
+                                <div style="color: var(--danger); font-size: 12px;">Unavailable</div>
+                                <div style="font-size: 24px; font-weight: 700; color: var(--danger);">${models.unavailable || 0}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+        }
+    } catch (error) {
+        console.error('Error loading system health:', error);
+        getToast().error('Failed to load system health');
+    }
+}
+
+async function loadProviderHealth() {
+    try {
+        const response = await fetch('/api/diagnostics/health');
+        if (!response.ok) throw new Error('Failed to fetch provider health');
+        
+        const data = await response.json();
+        const tbody = document.getElementById('provider-health-table');
+        if (!tbody) return;
+        
+        const providers = data.providers?.entries || [];
+        const models = data.models?.entries || [];
+        
+        let html = '';
+        
+        // Add providers
+        providers.slice(0, 10).forEach(entry => {
+            const statusClass = entry.status === 'healthy' ? 'healthy' : 
+                               entry.status === 'degraded' ? 'degraded' : 
+                               entry.status === 'unavailable' ? 'unavailable' : 'unknown';
+            const lastCheck = entry.last_success ? new Date(entry.last_success * 1000).toLocaleString() : 'Never';
+            html += `
+                <tr style="border-bottom: 1px solid var(--border);">
+                    <td style="padding: 12px;">${entry.name || entry.id}</td>
+                    <td style="padding: 12px;"><span style="color: var(--text-secondary);">Provider</span></td>
+                    <td style="padding: 12px;"><span class="health-badge ${statusClass}">${entry.status || 'unknown'}</span></td>
+                    <td style="padding: 12px; color: var(--text-secondary); font-size: 12px;">${lastCheck}</td>
+                    <td style="padding: 12px;">
+                        ${entry.in_cooldown ? '<span style="color: var(--warning); font-size: 12px;">⏳ Cooldown</span>' : '-'}
+                    </td>
+                </tr>
+            `;
+        });
+        
+        // Add models
+        models.slice(0, 10).forEach(entry => {
+            const statusClass = entry.status === 'healthy' ? 'healthy' : 
+                               entry.status === 'degraded' ? 'degraded' : 
+                               entry.status === 'unavailable' ? 'unavailable' : 'unknown';
+            html += `
+                <tr style="border-bottom: 1px solid var(--border);">
+                    <td style="padding: 12px;">${entry.name || entry.key || 'Unknown'}</td>
+                    <td style="padding: 12px;"><span style="color: var(--text-secondary);">AI Model</span></td>
+                    <td style="padding: 12px;"><span class="health-badge ${statusClass}">${entry.status || 'unknown'}</span></td>
+                    <td style="padding: 12px; color: var(--text-secondary); font-size: 12px;">-</td>
+                    <td style="padding: 12px;">
+                        ${entry.in_cooldown ? '<span style="color: var(--warning); font-size: 12px;">⏳ Cooldown</span>' : '-'}
+                    </td>
+                </tr>
+            `;
+        });
+        
+        if (html === '') {
+            html = '<tr><td colspan="5" style="padding: 20px; text-align: center; color: var(--text-secondary);">No health data available</td></tr>';
+        }
+        
+        tbody.innerHTML = html;
+    } catch (error) {
+        console.error('Error loading provider health:', error);
+        getToast().error('Failed to load provider health');
+    }
+}
+
+async function triggerSelfHeal() {
+    try {
+        getToast().info('Triggering self-healing...');
+        const response = await fetch('/api/diagnostics/self-heal', { method: 'POST' });
+        const data = await response.json();
+        
+        if (data.status === 'completed') {
+            getToast().success(`Self-healing completed: ${data.summary.successful} successful, ${data.summary.failed} failed`);
+            loadProviderHealth();
+            loadSystemHealth();
+        } else {
+            getToast().error('Self-healing failed: ' + (data.error || 'Unknown error'));
+        }
+    } catch (error) {
+        console.error('Error triggering self-heal:', error);
+        getToast().error('Failed to trigger self-healing');
+    }
+}
+
+async function testAPIEndpoints() {
+    const resultsDiv = document.getElementById('api-test-results');
+    if (!resultsDiv) return;
+    
+    resultsDiv.innerHTML = '<div class="spinner"></div> <span>Testing API endpoints...</span>';
+    
+    const endpoints = [
+        { name: 'Health Check', url: '/api/health' },
+        { name: 'System Status', url: '/api/status' },
+        { name: 'Market Data', url: '/api/market' },
+        { name: 'Models Status', url: '/api/models/status' },
+        { name: 'Providers', url: '/api/providers' },
+    ];
+    
+    let html = '<div style="display: grid; gap: 12px;">';
+    let passed = 0;
+    let failed = 0;
+    
+    for (const endpoint of endpoints) {
+        try {
+            const startTime = performance.now();
+            const response = await fetch(endpoint.url);
+            const duration = (performance.now() - startTime).toFixed(0);
+            
+            if (response.ok) {
+                passed++;
+                html += `
+                    <div style="padding: 12px; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); border-radius: 8px;">
+                        <div style="display: flex; justify-content: space-between; align-items: center;">
+                            <div>
+                                <strong style="color: var(--success);">✅ ${endpoint.name}</strong>
+                                <div style="color: var(--text-secondary); font-size: 12px; margin-top: 4px;">${endpoint.url}</div>
+                            </div>
+                            <div style="color: var(--text-secondary); font-size: 12px;">${duration}ms</div>
+                        </div>
+                    </div>
+                `;
+            } else {
+                failed++;
+                html += `
+                    <div style="padding: 12px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 8px;">
+                        <div style="display: flex; justify-content: space-between; align-items: center;">
+                            <div>
+                                <strong style="color: var(--danger);">❌ ${endpoint.name}</strong>
+                                <div style="color: var(--text-secondary); font-size: 12px; margin-top: 4px;">${endpoint.url} - HTTP ${response.status}</div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            }
+        } catch (error) {
+            failed++;
+            html += `
+                <div style="padding: 12px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 8px;">
+                    <div>
+                        <strong style="color: var(--danger);">❌ ${endpoint.name}</strong>
+                        <div style="color: var(--text-secondary); font-size: 12px; margin-top: 4px;">${endpoint.url} - ${error.message}</div>
+                    </div>
+                </div>
+            `;
+        }
+    }
+    
+    html += `</div><div style="margin-top: 16px; padding: 12px; background: rgba(0,0,0,0.2); border-radius: 8px;">
+        <strong>Summary:</strong> ${passed} passed, ${failed} failed
+    </div>`;
+    
+    resultsDiv.innerHTML = html;
+    getToast().success(`API tests completed: ${passed} passed, ${failed} failed`);
+}
+
+async function checkDatabaseHealth() {
+    try {
+        getToast().info('Checking database health...');
+        const response = await fetch('/api/diagnostics/run?auto_fix=false');
+        const data = await response.json();
+        
+        const output = document.getElementById('diagnostic-output');
+        if (output) {
+            output.textContent = JSON.stringify(data, null, 2);
+        }
+        
+        if (data.issues_found === 0) {
+            getToast().success('Database health check passed');
+        } else {
+            getToast().warning(`Database health check found ${data.issues_found} issues`);
+        }
+    } catch (error) {
+        console.error('Error checking database:', error);
+        getToast().error('Failed to check database health');
+    }
+}
+
+async function testNetworkConnectivity() {
+    const output = document.getElementById('diagnostic-output');
+    if (output) {
+        output.textContent = 'Testing network connectivity...\n';
+    }
+    
+    const endpoints = [
+        { name: 'HuggingFace Hub', url: 'https://huggingface.co' },
+        { name: 'CoinGecko API', url: 'https://api.coingecko.com/api/v3/ping' },
+        { name: 'Alternative.me', url: 'https://api.alternative.me/fng/' },
+    ];
+    
+    let results = 'Network Connectivity Test Results:\n' + '='.repeat(50) + '\n\n';
+    
+    for (const endpoint of endpoints) {
+        try {
+            const startTime = performance.now();
+            const response = await fetch(endpoint.url, { method: 'HEAD', mode: 'no-cors' });
+            const duration = (performance.now() - startTime).toFixed(0);
+            results += `✅ ${endpoint.name}: Reachable (${duration}ms)\n`;
+        } catch (error) {
+            results += `❌ ${endpoint.name}: ${error.message}\n`;
+        }
+    }
+    
+    if (output) {
+        output.textContent = results;
+    }
+    getToast().success('Network connectivity test completed');
+}
+
+async function loadRecentLogs() {
+    try {
+        const response = await fetch('/api/logs/recent');
+        const data = await response.json();
+        const container = document.getElementById('recent-logs-content');
+        
+        if (!container) return;
+        
+        if (data.logs && data.logs.length > 0) {
+            let html = '<div style="display: grid; gap: 8px;">';
+            data.logs.slice(0, 20).forEach(log => {
+                const level = log.level || 'INFO';
+                const levelColor = level === 'ERROR' ? 'var(--danger)' : 
+                                  level === 'WARNING' ? 'var(--warning)' : 
+                                  level === 'INFO' ? 'var(--info)' : 'var(--text-secondary)';
+                html += `
+                    <div style="padding: 10px; background: rgba(0,0,0,0.2); border-left: 3px solid ${levelColor}; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px;">
+                        <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+                            <span style="color: ${levelColor}; font-weight: 600;">[${level}]</span>
+                            <span style="color: var(--text-secondary);">${log.timestamp || ''}</span>
+                        </div>
+                        <div style="color: var(--text-primary);">${log.message || JSON.stringify(log)}</div>
+                    </div>
+                `;
+            });
+            html += '</div>';
+            container.innerHTML = html;
+        } else {
+            container.innerHTML = '<p class="text-secondary">No recent logs available</p>';
+        }
+    } catch (error) {
+        console.error('Error loading logs:', error);
+        document.getElementById('recent-logs-content').innerHTML = '<p style="color: var(--danger);">Failed to load logs</p>';
+    }
+}
 
 // Export diagnostic functions to window
 window.runDiagnostic = runDiagnostic;
 window.refreshDiagnosticStatus = refreshDiagnosticStatus;
 window.downloadDiagnosticLog = downloadDiagnosticLog;
+window.toggleAutoRefresh = toggleAutoRefresh;
+window.switchDiagnosticTab = switchDiagnosticTab;
+window.loadSystemHealth = loadSystemHealth;
+window.loadProviderHealth = loadProviderHealth;
+window.triggerSelfHeal = triggerSelfHeal;
+window.testAPIEndpoints = testAPIEndpoints;
+window.checkDatabaseHealth = checkDatabaseHealth;
+window.testNetworkConnectivity = testNetworkConnectivity;
+window.loadRecentLogs = loadRecentLogs;
+
+// ===== AI TOOLS LOADER =====
+function loadAITools() {
+    const iframe = document.getElementById('ai-tools-iframe');
+    const loading = document.getElementById('ai-tools-loading');
+    
+    if (!iframe) return;
+    
+    // Show loading, hide iframe
+    if (loading) loading.style.display = 'block';
+    iframe.style.display = 'none';
+    
+    // Reload iframe if it already has content, or just show it
+    if (iframe.src && iframe.src.includes('/ai-tools')) {
+        // Iframe already loaded, just show it
+        setTimeout(() => {
+            if (loading) loading.style.display = 'none';
+            iframe.style.display = 'block';
+        }, 100);
+    } else {
+        // Set src to load the page
+        iframe.src = '/ai-tools';
+    }
+}
+
+function handleAIToolsIframeLoad() {
+    const iframe = document.getElementById('ai-tools-iframe');
+    const loading = document.getElementById('ai-tools-loading');
+    
+    if (loading) loading.style.display = 'none';
+    if (iframe) iframe.style.display = 'block';
+    
+    console.log('✅ AI Tools iframe loaded successfully');
+}
+
+window.loadAITools = loadAITools;
+window.handleAIToolsIframeLoad = handleAIToolsIframeLoad;
+
+// Initialize diagnostics on page load
+document.addEventListener('DOMContentLoaded', function() {
+    refreshDiagnosticStatus();
+    loadSystemHealth();
+    loadProviderHealth();
+});
 
 console.log('✅ App.js loaded successfully');