From 32303e4238681cb6d30aadbf20504cc22a7dbcd8 Mon Sep 17 00:00:00 2001
From: root <root@qq.com>
Date: Tue, 11 Aug 2026 18:44:12 +0800
Subject: [PATCH] fix(ui): cache the status page so switching back to home no
 longer rebuilds the whole dashboard

renderStatus() re-injected the entire status tab (#tab-status.innerHTML) + all charts + tables on every visit, so each tab switch back to home stuttered. Now the page is built once (pane.dataset.built) and revisits only reload live data via paintStats() + restart the 3s poll. Static parts (source table, model chips, connection box) are not rebuilt. Deployed (bak .bak.20260811y), server active.
---
 internal/gateway/ui/index.html | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/internal/gateway/ui/index.html b/internal/gateway/ui/index.html
index aa76e9a..c7915cc 100644
--- a/internal/gateway/ui/index.html
+++ b/internal/gateway/ui/index.html
@@ -691,13 +691,22 @@ async function renderStatus() {
   const s = await api('/api/status');
   const base = window._base = s.base_url || location.origin + '/v1';
   const key = window._key = (s.gateway_keys && s.gateway_keys[0]) || '';
+  // If the status page is already built, don't rebuild the whole DOM (tab
+  // switches would stutter); just refresh the live data via paintStats.
+  const pane = $('#tab-status');
+  if (pane && pane.dataset.built) {
+    if (statsTimerId) clearInterval(statsTimerId);
+    await paintStats();
+    statsTimerId = setInterval(paintStats, 3000);
+    return;
+  }
   const srcRows = s.sources ? s.sources.map(x =>
     `<tr><td>${x.live_available ? `<span class="tag tag-green"><i class="net-dot"></i>${t('online')}</span>` : `<span class="tag tag-red" title="${esc(x.last_error || '')}"><i class="net-dot"></i>${t('offline')}</span>`}</td>
      <td><b>${esc(x.name)}</b></td><td>${esc(x.adapter)}</td>
      <td><div class="src-models">${x.models.map(m => `<span class="tag tag-blue modelchip" onclick="showModelConfig('${escAttr(x.name)}','${escAttr(m)}')">${esc(m)}</span>`).join('')}</div></td>
      <td><span class="muted">${esc(x.base_url || '')}</span></td>
      <td>${x.max_concurrent}</td></tr>`).join('') : '';
-  $('#tab-status').innerHTML = `
+  pane.innerHTML = `
     <div class="kpis" id="kpi-row"><div class="kpi-skeletons" aria-hidden="true">${Array(5).fill('').map(() => `
       <div class="ksk"><i></i><i></i><i></i></div>`).join('')}</div></div>
     <div class="card"><h2>${t('connTitle')}</h2>
@@ -727,6 +736,7 @@ async function renderStatus() {
       <div class="tbl-wrap"><table><tr><th>${t('tName')}</th><th>${t('tVersion')}</th></tr>
       ${s.adapters.map(a => `<tr><td>${esc(a.name)}</td><td>${esc(a.version || '')}</td></tr>`).join('')}</table></div>
     </div>` : ''}`;
+  pane.dataset.built = '1';
   $('#conncfg').textContent = '';
   showModelConfig(null, '');
   $('#model-chips').innerHTML = s.models.map(m => `<span class="tag tag-blue modelchip" onclick="showModelConfig(null,'${escAttr(m)}')">${esc(m)}</span>`).join('');