@silicaclaw/cli 2026.3.20-3 → 2026.3.20-5

package/apps/local-console/public/app/app.js

@@ -27,6 +27,7 @@ if (!root) {
   throw new Error("Missing root element: app-root");
 }
 root.innerHTML = appTemplate;
+const APP_UPDATE_SESSION_KEY = 'silicaclaw_pending_updated_version';
 
       const i18n = createI18n(TRANSLATIONS);
       const DEFAULT_LOCALE = i18n.DEFAULT_LOCALE;
@@ -70,6 +71,10 @@ root.innerHTML = appTemplate;
         document.getElementById('sidebarToggleBtn').setAttribute('aria-label', t('labels.collapseSidebar'));
         document.querySelector('.sidebar-version').title = t('common.version');
         setText('.sidebar-version__label', t('common.version'));
+        document.getElementById('brandUpdateHint').textContent = t('labels.versionChecking');
+        document.getElementById('brandRelayHint').textContent = t('labels.relayQueuesHealthy');
+        document.getElementById('brandCheckUpdateBtn').textContent = t('actions.checkUpdate');
+        document.getElementById('brandUpdateBtn').textContent = t('actions.updateNow');
         document.getElementById('integrationStatusBar').textContent = t('social.barStatus', {
           connected: '-',
           mode: '-',
@@ -319,6 +324,216 @@ root.innerHTML = appTemplate;
         toast,
         writeUiCache,
       } = shell;
+      let appUpdatePollTimer = null;
+      let appUpdateCheckInFlight = false;
+      let relayQueueCheckInFlight = false;
+      let lastRelayQueueCheckAt = 0;
+
+      function setAppUpdateUi({
+        hint,
+        buttonVisible = false,
+        buttonDisabled = false,
+        buttonText = t('actions.updateNow'),
+        checkVisible = false,
+        checkDisabled = false,
+      }) {
+        const hintEl = document.getElementById('brandUpdateHint');
+        const buttonEl = document.getElementById('brandUpdateBtn');
+        const checkEl = document.getElementById('brandCheckUpdateBtn');
+        if (hintEl) {
+          hintEl.textContent = hint;
+          hintEl.classList.toggle('hidden', !hint);
+        }
+        if (checkEl) {
+          checkEl.textContent = t('actions.checkUpdate');
+          checkEl.classList.toggle('hidden', !checkVisible);
+          checkEl.disabled = checkDisabled;
+        }
+        if (buttonEl) {
+          buttonEl.textContent = buttonText;
+          buttonEl.classList.toggle('hidden', !buttonVisible);
+          buttonEl.disabled = buttonDisabled;
+        }
+      }
+
+      function platformUpdateHint(platform) {
+        if (platform === 'darwin') return t('labels.versionPlatformMac');
+        if (platform === 'linux') return t('labels.versionPlatformLinux');
+        return t('labels.versionPlatformOther');
+      }
+
+      function setRelayQueueUi({ hint = '', tone = 'ok', visible = false }) {
+        const hintEl = document.getElementById('brandRelayHint');
+        if (!hintEl) return;
+        hintEl.textContent = hint;
+        hintEl.classList.toggle('hidden', !visible || !hint);
+        hintEl.classList.remove('warn', 'danger');
+        if (tone === 'warn' || tone === 'danger') {
+          hintEl.classList.add(tone);
+        }
+      }
+
+      async function refreshRelayQueueStatus({ force = false } = {}) {
+        const now = Date.now();
+        if (relayQueueCheckInFlight) return null;
+        if (!force && now - lastRelayQueueCheckAt < 15_000) return null;
+        relayQueueCheckInFlight = true;
+        try {
+          const result = await api('/api/peers');
+          const peers = result.data || {};
+          const peerItems = Array.isArray(peers.items) ? peers.items : [];
+          const relayQueueMax = peerItems.reduce((max, peer) => Math.max(max, Number(peer?.meta?.relay_queue_size || 0)), 0);
+          const signalQueueMax = peerItems.reduce((max, peer) => Math.max(max, Number(peer?.meta?.signal_queue_size || 0)), 0);
+          const queueMax = Math.max(relayQueueMax, signalQueueMax);
+          if (queueMax >= 100) {
+            setRelayQueueUi({ hint: t('labels.relayQueuesHigh'), tone: 'danger', visible: true });
+          } else if (queueMax >= 20) {
+            setRelayQueueUi({ hint: t('labels.relayQueuesWatch'), tone: 'warn', visible: true });
+          } else {
+            setRelayQueueUi({ hint: t('labels.relayQueuesHealthy'), tone: 'ok', visible: true });
+          }
+          lastRelayQueueCheckAt = now;
+          return { relayQueueMax, signalQueueMax };
+        } catch (_error) {
+          return null;
+        } finally {
+          relayQueueCheckInFlight = false;
+        }
+      }
+
+      async function refreshAppUpdateStatus({ silent = false } = {}) {
+        if (appUpdateCheckInFlight) return null;
+        appUpdateCheckInFlight = true;
+        try {
+          const result = await api('/api/app/update-status');
+          const status = result.data || {};
+          const currentVersion = String(status.current_version || '').trim();
+          const latestVersion = String(status.latest_version || '').trim();
+          const platformHint = platformUpdateHint(String(status.platform || ''));
+          if (currentVersion) {
+            document.getElementById('brandVersion').textContent = currentVersion.startsWith('v') ? currentVersion : `v${currentVersion}`;
+          }
+          if (status.update_available && status.latest_version) {
+            setAppUpdateUi({
+              hint: `${t('labels.versionUpdateReady', { version: `v${status.latest_version}` })} · ${platformHint}`,
+              buttonVisible: true,
+              buttonDisabled: false,
+              buttonText: t('actions.updateNowVersion', { version: latestVersion.startsWith('v') ? latestVersion : `v${latestVersion}` }),
+              checkVisible: true,
+              checkDisabled: false,
+            });
+          } else if (status.check_error) {
+            setAppUpdateUi({
+              hint: t('labels.versionCheckFailed'),
+              buttonVisible: false,
+              buttonDisabled: false,
+              buttonText: t('actions.updateNow'),
+              checkVisible: true,
+              checkDisabled: false,
+            });
+            if (!silent) {
+              setFeedback('networkFeedback', t('feedback.appUpdateCheckFailed'), 'warn');
+            }
+          } else {
+            setAppUpdateUi({
+              hint: `${t('labels.versionCurrent')} · ${platformHint}`,
+              buttonVisible: false,
+              buttonDisabled: false,
+              buttonText: t('actions.updateNow'),
+              checkVisible: true,
+              checkDisabled: false,
+            });
+          }
+          return status;
+        } catch (_error) {
+          setAppUpdateUi({
+            hint: t('labels.versionCheckFailed'),
+            buttonVisible: false,
+            buttonDisabled: false,
+            buttonText: t('actions.updateNow'),
+            checkVisible: true,
+            checkDisabled: false,
+          });
+          if (!silent) {
+            setFeedback('networkFeedback', t('feedback.appUpdateCheckFailed'), 'warn');
+          }
+          return null;
+        } finally {
+          appUpdateCheckInFlight = false;
+        }
+      }
+
+      function startAppUpdatePolling(targetVersion) {
+        if (appUpdatePollTimer) {
+          window.clearInterval(appUpdatePollTimer);
+        }
+        let attempts = 0;
+        appUpdatePollTimer = window.setInterval(async () => {
+          attempts += 1;
+          const status = await refreshAppUpdateStatus({ silent: true });
+          if (status && !status.update_available && String(status.current_version || '') === String(targetVersion || '')) {
+            window.clearInterval(appUpdatePollTimer);
+            appUpdatePollTimer = null;
+            if (targetVersion) {
+              window.sessionStorage.setItem(APP_UPDATE_SESSION_KEY, String(targetVersion));
+            }
+            window.location.reload();
+            return;
+          }
+          if (attempts >= 24) {
+            window.clearInterval(appUpdatePollTimer);
+            appUpdatePollTimer = null;
+            setAppUpdateUi({
+              hint: t('labels.versionCurrent'),
+              buttonVisible: false,
+              buttonDisabled: false,
+              buttonText: t('actions.updateNow'),
+              checkVisible: true,
+              checkDisabled: false,
+            });
+          }
+        }, 5000);
+      }
+
+      async function triggerAppUpdate() {
+        const buttonEl = document.getElementById('brandUpdateBtn');
+        setAppUpdateUi({
+          hint: t('labels.versionUpdating'),
+          buttonVisible: true,
+          buttonDisabled: true,
+          buttonText: t('labels.versionUpdating'),
+          checkVisible: true,
+          checkDisabled: true,
+        });
+        try {
+          const result = await api('/api/app/update', { method: 'POST' });
+          const data = result.data || {};
+          if (!data.started) {
+            setAppUpdateUi({
+              hint: t('labels.versionCurrent'),
+              buttonVisible: false,
+              buttonDisabled: false,
+              buttonText: t('actions.updateNow'),
+              checkVisible: true,
+              checkDisabled: false,
+            });
+            toast(t('feedback.appUpdateLatest'));
+            return;
+          }
+          toast(t('feedback.appUpdateStarted'));
+          startAppUpdatePolling(String(data.target_version || ''));
+        } catch (error) {
+          setAppUpdateUi({
+            hint: t('labels.versionCheckFailed'),
+            buttonVisible: true,
+            buttonDisabled: false,
+            buttonText: t('actions.updateNow'),
+            checkVisible: true,
+            checkDisabled: false,
+          });
+          setFeedback('networkFeedback', error instanceof Error ? error.message : t('feedback.appUpdateFailed'), 'error');
+        }
+      }
       setLocale(currentLocale);
       applyStaticTranslations();
 
@@ -427,6 +642,23 @@ root.innerHTML = appTemplate;
         document.getElementById('publicDiscoveryHint')?.classList.toggle('hidden', tab !== 'overview');
         if (tab === 'profile' && !profileController.isDirty() && !profileController.isSaving()) {
           refreshProfile().catch(() => {});
+        } else if (tab === 'overview') {
+          refreshOverview().catch(() => {});
+          refreshMessages().catch(() => {});
+        } else if (tab === 'agent') {
+          refreshOverview().catch(() => {});
+        } else if (tab === 'chat') {
+          refreshMessages().catch(() => {});
+        } else if (tab === 'skills') {
+          refreshSkills().catch(() => {});
+        } else if (tab === 'network') {
+          refreshNetwork().catch(() => {});
+          refreshPeers().catch(() => {});
+          refreshDiscovery().catch(() => {});
+          refreshLogs().catch(() => {});
+        } else if (tab === 'social') {
+          refreshSocial().catch(() => {});
+          refreshMessages().catch(() => {});
         }
       }
 
@@ -453,9 +685,46 @@ root.innerHTML = appTemplate;
       const renderLogs = socialController.renderLogs;
       const refreshLogs = socialController.refreshLogs;
       const refreshSkills = socialController.refreshSkills;
+      let autoRefreshInFlight = false;
+
+      async function refreshActiveView() {
+        const tasks = [refreshPublicProfilePreview(), refreshRelayQueueStatus()];
+        if (activeTab === 'overview') {
+          tasks.push(refreshOverview(), refreshMessages(), refreshSocial());
+        } else if (activeTab === 'agent') {
+          tasks.push(refreshOverview());
+        } else if (activeTab === 'chat') {
+          tasks.push(refreshMessages());
+        } else if (activeTab === 'skills') {
+          tasks.push(refreshSkills());
+        } else if (activeTab === 'network') {
+          tasks.push(refreshNetwork(), refreshPeers(), refreshDiscovery(), refreshLogs());
+        } else if (activeTab === 'social') {
+          tasks.push(refreshSocial(), refreshMessages());
+        } else if (activeTab === 'profile' && !profileController.isDirty() && !profileController.isSaving()) {
+          tasks.push(refreshProfile());
+        }
+        const results = await Promise.allSettled(tasks);
+        const firstError = results.find((result) => result.status === 'rejected');
+        if (firstError && firstError.status === 'rejected') {
+          setFeedback('networkFeedback', firstError.reason instanceof Error ? firstError.reason.message : t('common.unknownError'), 'error');
+        }
+      }
+
+      async function refreshAuto() {
+        if (document.hidden || autoRefreshInFlight) {
+          return;
+        }
+        autoRefreshInFlight = true;
+        try {
+          await refreshActiveView();
+        } finally {
+          autoRefreshInFlight = false;
+        }
+      }
 
       async function refreshAll() {
-        const tasks = [refreshOverview(), refreshNetwork(), refreshSocial(), refreshSkills(), refreshPublicProfilePreview(), refreshMessages()];
+        const tasks = [refreshOverview(), refreshNetwork(), refreshSocial(), refreshSkills(), refreshPublicProfilePreview(), refreshMessages(), refreshRelayQueueStatus({ force: true })];
         if (activeTab === 'network') {
           tasks.push(refreshPeers(), refreshDiscovery(), refreshLogs());
         }
@@ -511,6 +780,28 @@ root.innerHTML = appTemplate;
 
       applyTheme(localStorage.getItem('silicaclaw_theme_mode') || 'dark');
       hydrateCachedShell();
+      document.getElementById('brandUpdateBtn').addEventListener('click', () => {
+        triggerAppUpdate().catch(() => {});
+      });
+      document.getElementById('brandCheckUpdateBtn').addEventListener('click', () => {
+        refreshAppUpdateStatus().catch(() => {});
+      });
       refreshAll();
+      refreshAppUpdateStatus({ silent: true }).catch(() => {});
+      const updatedVersion = window.sessionStorage.getItem(APP_UPDATE_SESSION_KEY);
+      if (updatedVersion) {
+        window.sessionStorage.removeItem(APP_UPDATE_SESSION_KEY);
+        toast(t('feedback.appUpdatedTo', { version: updatedVersion.startsWith('v') ? updatedVersion : `v${updatedVersion}` }));
+      }
       exportSocialTemplate().catch(() => {});
-      setInterval(refreshAll, 4000);
+      document.addEventListener('visibilitychange', () => {
+        if (!document.hidden) {
+          refreshAuto().catch(() => {});
+          refreshAppUpdateStatus({ silent: true }).catch(() => {});
+          refreshRelayQueueStatus({ force: true }).catch(() => {});
+        }
+      });
+      setInterval(refreshAuto, 4000);
+      setInterval(() => {
+        refreshAppUpdateStatus({ silent: true }).catch(() => {});
+      }, 15 * 60 * 1000);

package/apps/local-console/public/app/network.js

@@ -13,6 +13,21 @@ export function createNetworkController({
     room: "",
   };
   let quickConnectDefaults = { ...fallbackQuickConnectDefaults };
+  let lastNetworkRenderKey = "";
+  let lastPeersRenderKey = "";
+  let lastDiscoveryRenderKey = "";
+
+  function queueState(value) {
+    const n = Number(value || 0);
+    if (n >= 100) return { tone: "danger", label: t("labels.queueHigh") };
+    if (n >= 20) return { tone: "warn", label: t("labels.queueWatch") };
+    return { tone: "ok", label: t("labels.queueHealthy") };
+  }
+
+  function queueBadge(value) {
+    const state = queueState(value);
+    return `<span class="pill ${state.tone}">${Number(value || 0)} · ${state.label}</span>`;
+  }
 
   async function refreshNetwork() {
     const [cfg, sts, rtp] = await Promise.all([api("/api/network/config"), api("/api/network/stats"), api("/api/runtime/paths")]);
@@ -25,6 +40,10 @@ export function createNetworkController({
     const transportStats = s.adapter_transport_stats || {};
     const d = s.adapter_discovery_stats || {};
     const dx = s.adapter_diagnostics_summary || {};
+    const runtimeDiag = s.runtime_diagnostics || {};
+    const runtimeMemory = runtimeDiag.memory_mib || {};
+    const runtimeDirectory = runtimeDiag.directory || {};
+    const runtimeSocial = runtimeDiag.social || {};
     const ac = s.adapter_config || c.adapter_config || {};
     quickConnectDefaults = {
       signalingUrl: String(
@@ -59,7 +78,7 @@ export function createNetworkController({
       heroRoomText: dx.room || "-",
       pillAdapterText: `${t("labels.adapter")}: ${c.adapter || "-"}`,
     });
-    document.getElementById("networkCards").innerHTML = [
+    const networkCardsHtml = [
       [t("labels.adapter"), c.adapter],
       [t("labels.namespace"), c.namespace || "-"],
       [t("labels.port"), c.port ?? "-"],
@@ -75,12 +94,18 @@ export function createNetworkController({
       [t("network.sent"), msg.broadcast_total ?? 0],
       [t("network.peers"), p.total ?? 0],
       [t("network.onlinePeers"), p.online ?? 0],
+      ["RSS", runtimeMemory.rss ?? "-"],
+      ["Heap", runtimeMemory.heap_used ?? "-"],
+      ["Profiles", runtimeDirectory.profile_count ?? "-"],
+      ["Index keys", runtimeDirectory.index_key_count ?? "-"],
+      ["Messages", runtimeSocial.message_count ?? "-"],
+      ["Observations", runtimeSocial.observation_count ?? "-"],
       [t("network.activeWebrtcPeers"), dx.active_webrtc_peers ?? "-"],
       [t("network.reconnectAttempts"), dx.reconnect_attempts_total ?? "-"],
       [t("network.lastInbound"), ago(msg.last_message_at)],
       [t("network.lastOutbound"), ago(msg.last_broadcast_at)],
     ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join("");
-    document.getElementById("networkSummaryList").innerHTML = [
+    const networkSummaryHtml = [
       [t("labels.mode"), describeCurrentMode(t, c.mode || "lan")],
       [t("network.relayHealth"), relayHealth],
       [t("network.currentRelay"), dx.signaling_url || "-"],
@@ -93,7 +118,7 @@ export function createNetworkController({
 
     const comp = c.components || {};
     const lim = c.limits || {};
-    document.getElementById("networkComponents").textContent = [
+    const networkComponentsText = [
       `demo_mode: ${c.demo_mode || "-"}`,
       `transport: ${comp.transport || "-"}`,
       `discovery: ${comp.discovery || "-"}`,
@@ -130,12 +155,39 @@ export function createNetworkController({
       `last_discovery_event_at: ${dx.last_discovery_event_at ? new Date(dx.last_discovery_event_at).toISOString() : "-"}`,
     ].join("\n");
 
-    document.getElementById("networkConfigSnapshot").textContent = toPrettyJson({
+    const networkConfigSnapshotText = toPrettyJson({
       config: c,
       adapter_config: ac,
       runtime_paths: runtimePaths,
     });
-    document.getElementById("networkStatsSnapshot").textContent = toPrettyJson({ stats: s });
+    const networkStatsSnapshotText = toPrettyJson({ stats: s });
+    const renderKey = JSON.stringify({
+      adapter: c.adapter || "",
+      mode: c.mode || "",
+      namespace: c.namespace || "",
+      port: c.port ?? null,
+      signaling_url: dx.signaling_url || "",
+      room: dx.room || "",
+      relay_health: relayHealth,
+      last_poll_at: dx.last_poll_at || 0,
+      last_publish_at: dx.last_publish_at || 0,
+      last_error: dx.last_error || "",
+      msg_received_total: msg.received_total ?? 0,
+      msg_broadcast_total: msg.broadcast_total ?? 0,
+      peers_total: p.total ?? 0,
+      peers_online: p.online ?? 0,
+      reconnect_attempts_total: dx.reconnect_attempts_total ?? 0,
+      active_webrtc_peers: dx.active_webrtc_peers ?? 0,
+    });
+    if (renderKey === lastNetworkRenderKey) {
+      return;
+    }
+    document.getElementById("networkCards").innerHTML = networkCardsHtml;
+    document.getElementById("networkSummaryList").innerHTML = networkSummaryHtml;
+    document.getElementById("networkComponents").textContent = networkComponentsText;
+    document.getElementById("networkConfigSnapshot").textContent = networkConfigSnapshotText;
+    document.getElementById("networkStatsSnapshot").textContent = networkStatsSnapshotText;
+    lastNetworkRenderKey = renderKey;
   }
 
   async function refreshPeers() {
@@ -143,8 +195,12 @@ export function createNetworkController({
     const peers = peerRes.data || {};
     const ds = statsRes.data?.adapter_discovery_stats || {};
     const summary = peers.diagnostics_summary || {};
-
-    document.getElementById("peerCards").innerHTML = [
+    const peerItems = Array.isArray(peers.items) ? peers.items : [];
+    const relayQueueTotal = peerItems.reduce((sum, peer) => sum + Number(peer?.meta?.relay_queue_size || 0), 0);
+    const relayQueueMax = peerItems.reduce((max, peer) => Math.max(max, Number(peer?.meta?.relay_queue_size || 0)), 0);
+    const signalQueueTotal = peerItems.reduce((sum, peer) => sum + Number(peer?.meta?.signal_queue_size || 0), 0);
+    const signalQueueMax = peerItems.reduce((max, peer) => Math.max(max, Number(peer?.meta?.signal_queue_size || 0)), 0);
+    const peerCardsHtml = [
       [t("network.total"), peers.total || 0],
       [t("overview.online"), peers.online || 0],
       [t("network.stale"), peers.stale || 0],
@@ -159,26 +215,28 @@ export function createNetworkController({
       [t("network.seedPeers"), summary.seed_peers_count ?? 0],
       [t("network.discoveryEvents"), summary.discovery_events_total ?? 0],
       [t("network.activeWebrtcPeers"), summary.active_webrtc_peers ?? "-"],
+      ["Relay queue", queueBadge(relayQueueTotal)],
+      ["Max relay queue", queueBadge(relayQueueMax)],
+      ["Signal queue", queueBadge(signalQueueTotal)],
+      ["Max signal queue", queueBadge(signalQueueMax)],
       [t("network.observeCalls"), ds.observe_calls || 0],
       [t("network.heartbeats"), ds.heartbeat_sent || 0],
       [t("network.peersAdded"), ds.peers_added || 0],
       [t("network.peersRemoved"), ds.peers_removed || 0],
     ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join("");
+    const peerStatsText = toPrettyJson({
+      discovery_stats: ds,
+      diagnostics_summary: summary,
+      adapter_stats: statsRes.data?.adapter_stats || {},
+    });
 
-    if (!peers.items || !peers.items.length) {
-      document.getElementById("peerTableWrap").innerHTML = `<div class="empty-state">${t("network.noPeersDiscovered")}</div>`;
-      document.getElementById("peerStatsWrap").textContent = toPrettyJson({
-        discovery_stats: ds,
-        diagnostics_summary: summary,
-      });
-      return;
-    }
-
-    document.getElementById("peerTableWrap").innerHTML = `
+    const peerTableHtml = !peers.items || !peers.items.length
+      ? `<div class="empty-state">${t("network.noPeersDiscovered")}</div>`
+      : `
       <table class="table">
-        <thead><tr><th>${t("network.peer")}</th><th>${t("network.status")}</th><th>${t("network.lastSeen")}</th><th>${t("network.staleSince")}</th><th>${t("network.messages")}</th><th>${t("network.firstSeen")}</th><th>${t("network.meta")}</th></tr></thead>
+        <thead><tr><th>${t("network.peer")}</th><th>${t("network.status")}</th><th>${t("network.lastSeen")}</th><th>${t("network.staleSince")}</th><th>${t("network.messages")}</th><th>${t("network.firstSeen")}</th><th>Relay Q</th><th>Signal Q</th><th>${t("network.meta")}</th></tr></thead>
         <tbody>
-          ${peers.items.map((peer) => `
+          ${peerItems.map((peer) => `
             <tr>
               <td class="mono">${shortId(peer.peer_id)}</td>
               <td class="${peer.status === "online" ? "online" : peer.status === "offline" ? "offline" : "stale"}">${peerStatusText(peer.status)}</td>
@@ -186,25 +244,67 @@ export function createNetworkController({
               <td>${peer.stale_since_at ? ago(peer.stale_since_at) : "-"}</td>
               <td>${peer.messages_seen || 0}</td>
               <td>${new Date(peer.first_seen_at).toLocaleTimeString()}</td>
+              <td>${queueBadge(Number(peer?.meta?.relay_queue_size || 0))}</td>
+              <td>${queueBadge(Number(peer?.meta?.signal_queue_size || 0))}</td>
               <td class="mono">${peer.meta ? JSON.stringify(peer.meta) : "-"}</td>
             </tr>
           `).join("")}
         </tbody>
       </table>
     `;
-    document.getElementById("peerStatsWrap").textContent = toPrettyJson({
-      discovery_stats: ds,
-      diagnostics_summary: summary,
-      adapter_stats: statsRes.data?.adapter_stats || {},
+    const renderKey = JSON.stringify({
+      total: peers.total || 0,
+      online: peers.online || 0,
+      stale: peers.stale || 0,
+      namespace: peers.namespace || "",
+      summary: {
+        signaling_url: summary.signaling_url || "",
+        room: summary.room || "",
+        last_join_at: summary.last_join_at || 0,
+        last_poll_at: summary.last_poll_at || 0,
+        last_publish_at: summary.last_publish_at || 0,
+        last_error: summary.last_error || "",
+      },
+      ds: {
+        observe_calls: ds.observe_calls || 0,
+        heartbeat_sent: ds.heartbeat_sent || 0,
+        peers_added: ds.peers_added || 0,
+        peers_removed: ds.peers_removed || 0,
+      },
+      queues: {
+        relay_total: relayQueueTotal,
+        relay_max: relayQueueMax,
+        signal_total: signalQueueTotal,
+        signal_max: signalQueueMax,
+      },
+      items: peerItems
+        ? peerItems.map((peer) => [
+            peer.peer_id,
+            peer.status || "",
+            peer.last_seen_at || 0,
+            peer.stale_since_at || 0,
+            peer.messages_seen || 0,
+            peer.first_seen_at || 0,
+            Number(peer?.meta?.relay_queue_size || 0),
+            Number(peer?.meta?.signal_queue_size || 0),
+            peer.meta ? JSON.stringify(peer.meta) : "",
+          ])
+        : [],
     });
+    if (renderKey === lastPeersRenderKey) {
+      return;
+    }
+    document.getElementById("peerCards").innerHTML = peerCardsHtml;
+    document.getElementById("peerTableWrap").innerHTML = peerTableHtml;
+    document.getElementById("peerStatsWrap").textContent = peerStatsText;
+    lastPeersRenderKey = renderKey;
   }
 
   async function refreshDiscovery() {
     const eventsRes = await api("/api/discovery/events");
     const payload = eventsRes.data || {};
     const items = Array.isArray(payload.items) ? payload.items : [];
-
-    document.getElementById("discoveryCards").innerHTML = [
+    const discoveryCardsHtml = [
       [t("labels.adapter"), payload.adapter || "-"],
       [t("labels.namespace"), payload.namespace || "-"],
       [t("network.eventsTotal"), payload.total ?? 0],
@@ -212,11 +312,9 @@ export function createNetworkController({
       [t("network.signalingEndpoints"), (payload.signaling_endpoints || []).length || 0],
       [t("network.seedPeers"), payload.seed_peers_count ?? 0],
     ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join("");
-
-    if (!items.length) {
-      document.getElementById("discoveryEventList").innerHTML = `<div class="empty-state">${t("network.noDiscoveryEvents")}</div>`;
-    } else {
-      document.getElementById("discoveryEventList").innerHTML = items
+    const discoveryEventListHtml = !items.length
+      ? `<div class="empty-state">${t("network.noDiscoveryEvents")}</div>`
+      : items
         .slice()
         .reverse()
         .map((event) => `
@@ -227,9 +325,23 @@ export function createNetworkController({
           </div>
         `)
         .join("");
+    const discoverySnapshotText = toPrettyJson(payload);
+    const renderKey = JSON.stringify({
+      adapter: payload.adapter || "",
+      namespace: payload.namespace || "",
+      total: payload.total ?? 0,
+      last_event_at: payload.last_event_at || 0,
+      signaling_endpoints: payload.signaling_endpoints || [],
+      seed_peers_count: payload.seed_peers_count ?? 0,
+      items: items.map((event) => [event.type || "", event.peer_id || "", event.endpoint || "", event.detail || "", event.at || 0]),
+    });
+    if (renderKey === lastDiscoveryRenderKey) {
+      return;
     }
-
-    document.getElementById("discoverySnapshot").textContent = toPrettyJson(payload);
+    document.getElementById("discoveryCards").innerHTML = discoveryCardsHtml;
+    document.getElementById("discoveryEventList").innerHTML = discoveryEventListHtml;
+    document.getElementById("discoverySnapshot").textContent = discoverySnapshotText;
+    lastDiscoveryRenderKey = renderKey;
   }
 
   return {