@silicaclaw/cli 2026.3.20-2 → 2026.3.20-4

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;
@@ -51,7 +52,7 @@ root.innerHTML = appTemplate;
           summary.setAttribute('data-i18n-closed-label', t('labels.show'));
           summary.setAttribute('data-i18n-open-label', t('labels.hide'));
         });
-        setText('.sidebar-nav__label', t('common.control'));
+        setText('.nav-section__label', t('common.control'));
         setText('[data-tab="overview"] .tab-title', t('pageMeta.overview.title'));
         setText('[data-tab="overview"] .tab-copy', t('labels.overviewTabCopy'));
         setText('[data-tab="agent"] .tab-title', t('pageMeta.agent.title'));
@@ -70,6 +71,9 @@ 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('brandCheckUpdateBtn').textContent = t('actions.checkUpdate');
+        document.getElementById('brandUpdateBtn').textContent = t('actions.updateNow');
         document.getElementById('integrationStatusBar').textContent = t('social.barStatus', {
           connected: '-',
           mode: '-',
@@ -106,19 +110,25 @@ root.innerHTML = appTemplate;
         document.getElementById('chatFeedHint').textContent = t('hints.chatFeedHint');
         document.getElementById('overviewGuideTitle').textContent = t('overview.guideTitle');
         document.getElementById('overviewGuideBody').textContent = t('overview.guideBody');
+        document.getElementById('overviewGuideStatus').textContent = t('overview.guideNeedSetup');
         document.getElementById('overviewStepProfileEyebrow').textContent = t('overview.stepLabel', { step: '1' });
         document.getElementById('overviewStepProfileTitle').textContent = t('overview.stepProfileTitle');
         document.getElementById('overviewStepProfileBody').textContent = t('overview.stepProfileBody');
+        document.getElementById('overviewStepProfileStatus').textContent = t('overview.stepIncomplete');
         document.getElementById('overviewStepProfileBtn').textContent = t('actions.editProfile');
         document.getElementById('overviewStepPublicEyebrow').textContent = t('overview.stepLabel', { step: '2' });
         document.getElementById('overviewStepPublicTitle').textContent = t('overview.stepPublicTitle');
         document.getElementById('overviewStepPublicBody').textContent = t('overview.stepPublicBody');
+        document.getElementById('overviewStepPublicStatus').textContent = t('overview.stepIncomplete');
         document.getElementById('overviewStepPublicBtn').textContent = t('actions.editProfile');
         document.getElementById('overviewStepBroadcastEyebrow').textContent = t('overview.stepLabel', { step: '3' });
         document.getElementById('overviewStepBroadcastTitle').textContent = t('overview.stepBroadcastTitle');
         document.getElementById('overviewStepBroadcastBody').textContent = t('overview.stepBroadcastBody');
+        document.getElementById('overviewStepBroadcastStatus').textContent = t('overview.stepWaiting');
         document.getElementById('overviewStepBroadcastBtn').textContent = t('actions.broadcastNow');
         document.getElementById('homeMissionEyebrow').textContent = t('hints.homeMissionEyebrow');
+        document.getElementById('homeMissionTitle').textContent = t('hints.homeMissionTitle');
+        document.getElementById('homeMissionBody').textContent = t('hints.homeMissionBody');
         document.getElementById('homeBriefTitle').textContent = t('hints.homeBriefTitle');
         document.getElementById('homeOpenAgentBtn').textContent = t('actions.openAgent');
         document.getElementById('homeOpenSocialBtn').textContent = t('pageMeta.social.title');
@@ -156,7 +166,7 @@ root.innerHTML = appTemplate;
         setText('#view-profile .profile-meta h4', t('labels.publicCard'), 0);
         setText('#view-profile .profile-meta h4', t('labels.publishStatus'), 1);
         setText('#view-profile .profile-meta h4', t('labels.publicProfilePreview'), 2);
-        setText('#view-profile .profile-meta .field-hint', t('hints.signedPublicProfileHint'));
+        setText('#view-profile .profile-meta .field-hint', t('hints.signedPublicProfileHint'), 1);
         setText('#view-network .section-header__eyebrow', t('labels.networkEyebrow'));
         document.getElementById('networkBannerTitle').textContent = t('hints.networkBannerTitle');
         document.getElementById('networkBannerBody').textContent = t('hints.networkBannerBody');
@@ -190,6 +200,7 @@ root.innerHTML = appTemplate;
         document.getElementById('skillsBannerTitle').textContent = t('hints.skillsBannerTitle');
         document.getElementById('skillsBannerBody').textContent = t('hints.skillsBannerBody');
         document.getElementById('skillsBannerRuntimeLabel').textContent = t('hints.skillsBannerRuntime');
+        document.getElementById('skillsBannerRuntimeValue').textContent = t('hints.skillsRuntimeChecking');
         document.getElementById('skillsActionEyebrow').textContent = t('labels.skillsRecommendedAction');
         document.getElementById('skillsActionTitle').textContent = t('hints.skillsActionInstallTitle');
         document.getElementById('skillsActionBody').textContent = t('hints.skillsActionInstallBody');
@@ -200,6 +211,16 @@ root.innerHTML = appTemplate;
         document.getElementById('skillsJumpBundled').textContent = t('labels.skillsBundled');
         document.getElementById('skillsJumpInstalled').textContent = t('labels.skillsInstalled');
         document.getElementById('skillsJumpDialogue').textContent = t('labels.skillsDialogue');
+        document.getElementById('skillsSearchLabel').textContent = t('labels.skillsSearch');
+        document.getElementById('skillsSearchInput').placeholder = t('placeholders.skillsSearch');
+        document.getElementById('skillsFilterAll').textContent = t('labels.skillsFilterAll');
+        document.getElementById('skillsFilterAttention').textContent = t('labels.skillsFilterAttention');
+        document.getElementById('skillsFilterUpdates').textContent = t('labels.skillsFilterUpdates');
+        document.getElementById('skillsFilterInstalled').textContent = t('labels.skillsFilterInstalled');
+        document.getElementById('skillsFilterMeta').textContent = t('hints.skillsFilterMeta', {
+          count: '0',
+          filter: t('labels.skillsFilterAll'),
+        });
         document.getElementById('skillsFeaturedTitle').textContent = t('labels.skillsFeatured');
         document.getElementById('skillsFeaturedHint').textContent = t('hints.skillsFeaturedHint');
         document.getElementById('skillsBundledTitle').textContent = t('labels.skillsBundled');
@@ -219,6 +240,7 @@ root.innerHTML = appTemplate;
         document.getElementById('socialSkillLearningTitle').textContent = t('labels.openclawSkillLearning');
         document.getElementById('socialMessagePathTitle').textContent = t('labels.messagePath');
         document.getElementById('socialMessagePathHint').textContent = t('hints.socialMessagePathHint');
+        document.getElementById('socialOwnerDeliveryStatus').textContent = t('hints.checkingOwnerDelivery');
         document.getElementById('socialGovernanceTitle').textContent = t('labels.messageGovernance');
         document.getElementById('socialModerationTitle').textContent = t('labels.recentModeration');
         document.getElementById('socialAdvancedSummary').textContent = t('labels.advancedNetworkDetails');
@@ -240,6 +262,10 @@ root.innerHTML = appTemplate;
         setText('.hero-meta-item .label', t('labels.room'), 3);
         document.getElementById('publicDiscoveryHint').innerHTML = t('hints.publicDiscoverySwitch');
         document.getElementById('clearDiscoveryCacheBtn').textContent = t('actions.clearDiscoveryCache');
+        document.getElementById('overviewModeHint').textContent = t('overview.modeCurrentSource', {
+          mode: '-',
+          hint: t('overview.modeCacheHint'),
+        });
         document.getElementById('socialMessageTitle').textContent = t('overview.messageTitle');
         document.getElementById('socialMessageMeta').textContent = t('overview.messageMetaInitial');
         document.getElementById('socialMessageHint').textContent = t('overview.messageHint');
@@ -262,6 +288,7 @@ root.innerHTML = appTemplate;
         document.querySelector('label[for="governanceBlockedTermsInput"]').textContent = t('labels.blockedTerms');
         document.getElementById('startBroadcastBtn').textContent = t('actions.startBroadcast');
         document.getElementById('stopBroadcastBtn').textContent = t('actions.stopBroadcast');
+        document.getElementById('broadcastNowBtn').textContent = t('actions.broadcastNow');
         document.getElementById('quickGlobalPreviewBtn').textContent = t('actions.enablePreview');
         document.getElementById('refreshLogsBtn').textContent = t('actions.refreshLogs');
         document.getElementById('socialExportBtn').textContent = t('actions.exportTemplate');
@@ -296,6 +323,175 @@ root.innerHTML = appTemplate;
         toast,
         writeUiCache,
       } = shell;
+      let appUpdatePollTimer = null;
+      let appUpdateCheckInFlight = false;
+
+      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');
+      }
+
+      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();
 
@@ -404,6 +600,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(() => {});
         }
       }
 
@@ -430,6 +643,43 @@ root.innerHTML = appTemplate;
       const renderLogs = socialController.renderLogs;
       const refreshLogs = socialController.refreshLogs;
       const refreshSkills = socialController.refreshSkills;
+      let autoRefreshInFlight = false;
+
+      async function refreshActiveView() {
+        const tasks = [refreshPublicProfilePreview()];
+        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()];
@@ -488,6 +738,27 @@ 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(() => {});
+        }
+      });
+      setInterval(refreshAuto, 4000);
+      setInterval(() => {
+        refreshAppUpdateStatus({ silent: true }).catch(() => {});
+      }, 15 * 60 * 1000);

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

@@ -319,6 +319,27 @@ export function bindAppEvents({
     });
   });
 
+  document.getElementById("skillsSearchInput").addEventListener("input", async (event) => {
+    socialController.setSkillsQuery(String(event.target?.value || ""));
+    await refreshSkills();
+  });
+
+  document.querySelectorAll("[data-skills-filter]").forEach((btn) => {
+    btn.addEventListener("click", async () => {
+      socialController.setSkillsFilter(String(btn.getAttribute("data-skills-filter") || "all"));
+      await refreshSkills();
+    });
+  });
+
+  document.querySelectorAll("#skillsBundledFooter, #skillsInstalledFooter, #skillsDialogueFooter").forEach((footer) => {
+    footer.addEventListener("click", async (event) => {
+      const btn = event.target instanceof Element ? event.target.closest("[data-skills-toggle]") : null;
+      if (!btn) return;
+      socialController.toggleSkillsExpanded(String(btn.getAttribute("data-skills-toggle") || ""));
+      await refreshSkills();
+    });
+  });
+
   document.getElementById("saveGovernanceBtn").addEventListener("click", async () => {
     setFeedback("socialGovernanceFeedback", t("common.saving"));
     try {

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

@@ -13,6 +13,9 @@ export function createNetworkController({
     room: "",
   };
   let quickConnectDefaults = { ...fallbackQuickConnectDefaults };
+  let lastNetworkRenderKey = "";
+  let lastPeersRenderKey = "";
+  let lastDiscoveryRenderKey = "";
 
   async function refreshNetwork() {
     const [cfg, sts, rtp] = await Promise.all([api("/api/network/config"), api("/api/network/stats"), api("/api/runtime/paths")]);
@@ -25,6 +28,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 +66,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 +82,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 +106,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 +143,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 +183,7 @@ export function createNetworkController({
     const peers = peerRes.data || {};
     const ds = statsRes.data?.adapter_discovery_stats || {};
     const summary = peers.diagnostics_summary || {};
-
-    document.getElementById("peerCards").innerHTML = [
+    const peerCardsHtml = [
       [t("network.total"), peers.total || 0],
       [t("overview.online"), peers.online || 0],
       [t("network.stale"), peers.stale || 0],
@@ -164,17 +203,15 @@ export function createNetworkController({
       [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>
         <tbody>
@@ -192,19 +229,51 @@ export function createNetworkController({
         </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,
+      },
+      items: Array.isArray(peers.items)
+        ? peers.items.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,
+            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 +281,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 +294,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 {