enhance responsive

app/static/dashboard.html

@@ -843,15 +843,22 @@
       .charts-grid { grid-template-columns: 1fr; }
     }
     @media (max-width: 768px) {
-      body { flex-direction: column; overflow: auto; }
-      .sb { width: 100%; height: auto; flex-direction: column; border-right: none; border-bottom: 1px solid var(--b); }
-      .sb-body { overflow: visible; }
-      .main { overflow: visible; }
-      .kpi-grid { grid-template-columns: repeat(2, 1fr); }
-      .topbar { flex-direction: column; gap: 12px; align-items: stretch; }
-      .topbar-right { justify-content: space-between; flex-wrap: wrap; }
-      .content { padding: 16px; }
-      table { display: block; overflow-x: auto; white-space: nowrap; }
+      body { flex-direction: column; overflow: auto; height: auto; }
+      .sb { width: 100%; height: auto; flex-direction: column; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
+      .sb-brand { justify-content: center; }
+      .sb-body { overflow: visible; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; }
+      .sb-footer { padding: 12px; flex-direction: row; justify-content: space-between; }
+      .main { overflow: visible; width: 100%; }
+      .kpi-grid { grid-template-columns: 1fr; }
+      .topbar { flex-direction: column; gap: 12px; align-items: stretch; padding: 16px; }
+      .topbar-right { justify-content: space-between; flex-wrap: wrap; gap: 8px; }
+      .content { padding: 12px; gap: 16px; }
+      table { display: block; overflow-x: auto; white-space: nowrap; width: 100%; }
+      .grid2 { grid-template-columns: 1fr; }
+      .sec-title { flex-direction: column; align-items: flex-start !important; gap: 12px; }
+      .modal-box { width: 92%; max-height: 90vh; overflow-y: auto; padding: 24px; }
+      .btns { flex-wrap: wrap; }
+      .chart-wrap { height: 180px !important; }
     }
   </style>
 </head>
@@ -945,8 +952,8 @@
         <div class="badge">
           <i class="ph-fill ph-shield-check" style="color:var(--ok);font-size:14px"></i> Secure
         </div>
-        <div class="badge">Sync: <span id="syncTime" class="mono" style="margin-left:4px">Never</span></div>
-        <button class="btn btn-acc" style="padding:5px 12px" onclick="fetchAll()"><i class="ph-bold ph-arrows-clockwise"></i> Refresh</button>
+        <div class="badge">Sync: <span id="syncTime" class="mono" style="margin-left:4px">Connecting...</span></div>
+        <button class="btn btn-acc" style="padding:5px 12px" onclick="initSSE()"><i class="ph-bold ph-arrows-clockwise"></i> Force Sync</button>
       </div>
     </header>
     <div class="refresh-bar">
@@ -1170,7 +1177,6 @@
       document.getElementById('authOverlay').classList.remove('on');
       document.getElementById('mainContent').style.display = 'block';
       try { initCharts(); } catch(e) { console.error('Chart init error:', e); }
-      fetchAll();
       fetchEnv();
       initSSE();
       renderAlerts(); // Fetch alerts immediately once
@@ -1329,7 +1335,8 @@
         const s = typeof m.success_rate === 'number' ? m.success_rate : 100;
         const sc = s >= 95 ? 't-ok' : s >= 70 ? 't-warn' : 't-crit';
         const calls = m.total_calls || 0, errs = m.total_errors || 0;
-        tb.innerHTML += `<tr style="opacity:${ban ? .6 : 1}">
+        const tooltip = `Provider: ${m.provider || 'n/a'}\nTotal Calls: ${calls}\nSuccess Rate: ${s.toFixed(1)}%\nAvg Latency: ${m.avg_latency_ms || 0}ms\nStatus: ${m.status || 'unknown'}`;
+        tb.innerHTML += `<tr style="opacity:${ban ? .6 : 1}" title="${tooltip}">
       <td>
         <div class="tag" style="${ban ? 'text-decoration:line-through;color:var(--tm)' : ''}">${name}</div>
         <div class="t-mute" style="font-size:11px;margin-top:4px">${m.provider || 'n/a'} • ${m.status || 'unknown'}</div>
@@ -1476,9 +1483,10 @@
             if (r.status === 401) { logout(); return; }
             const d = await r.json();
             const modelsPayload = (d.models && Object.keys(d.models).length) ? d.models : (LAST_MODELS || {});
+            try { sessionStorage.setItem('awn_models', JSON.stringify(modelsPayload)); LAST_MODELS = modelsPayload; } catch(e){}
             renderSys(d.system || {}, d.redis || null, d.cost || null);
             renderProviders(d.providers || {}, d.breakers || {});
-            renderModels(d.models);
+            renderModels(modelsPayload);
           } catch(e) {}
       }
     }