@silicaclaw/cli 2026.3.20-2 → 2026.3.20-4

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

@@ -7,6 +7,8 @@ export function createOverviewController({
   t,
   writeUiCache,
 }) {
+  let lastAgentsRenderKey = "";
+
   function renderOverviewGuide(overview, profile) {
     const hasDisplayName = Boolean(String(profile?.display_name || overview?.display_name || "").trim());
     const hasBio = Boolean(String(profile?.bio || "").trim());
@@ -108,15 +110,15 @@ export function createOverviewController({
     const snapshotHtml = `
       <div class="snapshot-card">
         <div class="snapshot-card__identity">
-          <div class="snapshot-card__label">Current Node</div>
+          <div class="snapshot-card__label">${t("overview.snapshotCurrentNode")}</div>
           <div class="snapshot-card__title">${escapeHtml(o.display_name || t("overview.unnamed"))}</div>
           <div class="snapshot-card__subtle mono">${escapeHtml(o.agent_id || "-")}</div>
         </div>
         <div class="snapshot-card__grid">
-          <div class="snapshot-card__item"><div class="label">Version</div><span class="value-inline">${escapeHtml(o.app_version || "-")}</span></div>
-          <div class="snapshot-card__item"><div class="label">Public</div><span class="value-inline">${o.public_enabled ? t("common.on") : t("common.off")}</span></div>
-          <div class="snapshot-card__item"><div class="label">Broadcast</div><span class="value-inline">${o.broadcast_enabled ? t("common.on") : t("common.off")}</span></div>
-          <div class="snapshot-card__item"><div class="label">Last Broadcast</div><span class="value-inline">${escapeHtml(ago(o.last_broadcast_at))}</span></div>
+          <div class="snapshot-card__item"><div class="label">${t("overview.snapshotVersion")}</div><span class="value-inline">${escapeHtml(o.app_version || "-")}</span></div>
+          <div class="snapshot-card__item"><div class="label">${t("overview.snapshotPublic")}</div><span class="value-inline">${o.public_enabled ? t("common.on") : t("common.off")}</span></div>
+          <div class="snapshot-card__item"><div class="label">${t("overview.snapshotBroadcast")}</div><span class="value-inline">${o.broadcast_enabled ? t("common.on") : t("common.off")}</span></div>
+          <div class="snapshot-card__item"><div class="label">${t("overview.snapshotLastBroadcast")}</div><span class="value-inline">${escapeHtml(ago(o.last_broadcast_at))}</span></div>
         </div>
       </div>
     `;
@@ -175,7 +177,7 @@ export function createOverviewController({
     document.getElementById("homePriorityGrid").innerHTML = [
       [t("overview.homeOpenClaw"), openclawRunning ? t("overview.homeRunning") : openclawDetected ? t("overview.homeInstalledOnly") : t("overview.homeStopped"), openclawRunning ? t("overview.homeMetaRunning") : t("overview.homeMetaNotRunning")],
       [t("overview.homeGlobalMode"), globalMode ? t("overview.homeGlobalReady") : t("overview.homeNotGlobal"), globalMode ? t("overview.homeMetaGlobal") : t("overview.homeMetaNotGlobal")],
-      [t("overview.homeBroadcastHealth"), broadcastHealthy ? t("overview.homeHealthy") : t("overview.homeDegraded"), lastNetworkError || `Last broadcast ${ago(o.last_broadcast_at)}`],
+      [t("overview.homeBroadcastHealth"), broadcastHealthy ? t("overview.homeHealthy") : t("overview.homeDegraded"), lastNetworkError || t("overview.lastBroadcastAgo", { value: ago(o.last_broadcast_at) })],
       [t("overview.homePeers"), String(all.filter((agent) => !agent.is_self && agent.online).length), t("overview.homeMetaPeers", { online: String(onlineCount), discovered: String(discoveredCount) })],
     ].map(([label, value, meta]) => `
       <div class="priority-card">
@@ -221,8 +223,17 @@ export function createOverviewController({
     if (!filtered.length) {
       const agentsCountHintText = t("overview.agentsZero");
       const agentsWrapHtml = `<div class="label">${t("overview.noDiscoveredAgents")}</div>`;
-      document.getElementById("agentsCountHint").textContent = agentsCountHintText;
-      document.getElementById("agentsWrap").innerHTML = agentsWrapHtml;
+      const renderKey = JSON.stringify({
+        state: "empty",
+        hint: agentsCountHintText,
+        page: agentsPage,
+        onlineOnly: getOnlyShowOnline(),
+      });
+      if (renderKey !== lastAgentsRenderKey) {
+        document.getElementById("agentsCountHint").textContent = agentsCountHintText;
+        document.getElementById("agentsWrap").innerHTML = agentsWrapHtml;
+        lastAgentsRenderKey = renderKey;
+      }
       writeUiCache("silicaclaw_ui_overview", {
         overviewCardsHtml,
         brandVersionText,
@@ -282,20 +293,37 @@ export function createOverviewController({
         </div>
       </div>
     `;
-    document.getElementById("agentsCountHint").textContent = agentsCountHintText;
-    document.getElementById("agentsWrap").innerHTML = agentsWrapHtml;
-    document.getElementById("agentsPrevPageBtn")?.addEventListener("click", async () => {
-      if (agentsPage <= 1) return;
-      agentsPage -= 1;
-      onPageChange(agentsPage);
-      await refreshOverview({ getAgentsPage, getOnlyShowOnline, onPageChange, setOverviewMode, setVisibleRemotePublicCount });
-    });
-    document.getElementById("agentsNextPageBtn")?.addEventListener("click", async () => {
-      if (agentsPage >= totalAgentPages) return;
-      agentsPage += 1;
-      onPageChange(agentsPage);
-      await refreshOverview({ getAgentsPage, getOnlyShowOnline, onPageChange, setOverviewMode, setVisibleRemotePublicCount });
+    const renderKey = JSON.stringify({
+      state: "list",
+      hint: agentsCountHintText,
+      page: agentsPage,
+      totalPages: totalAgentPages,
+      onlineOnly: getOnlyShowOnline(),
+      items: pagedAgents.map((agent) => [
+        agent.agent_id,
+        agent.updated_at,
+        agent.online ? 1 : 0,
+        agent.display_name || "",
+        agent.bio || "",
+      ]),
     });
+    if (renderKey !== lastAgentsRenderKey) {
+      document.getElementById("agentsCountHint").textContent = agentsCountHintText;
+      document.getElementById("agentsWrap").innerHTML = agentsWrapHtml;
+      document.getElementById("agentsPrevPageBtn")?.addEventListener("click", async () => {
+        if (agentsPage <= 1) return;
+        agentsPage -= 1;
+        onPageChange(agentsPage);
+        await refreshOverview({ getAgentsPage, getOnlyShowOnline, onPageChange, setOverviewMode, setVisibleRemotePublicCount });
+      });
+      document.getElementById("agentsNextPageBtn")?.addEventListener("click", async () => {
+        if (agentsPage >= totalAgentPages) return;
+        agentsPage += 1;
+        onPageChange(agentsPage);
+        await refreshOverview({ getAgentsPage, getOnlyShowOnline, onPageChange, setOverviewMode, setVisibleRemotePublicCount });
+      });
+      lastAgentsRenderKey = renderKey;
+    }
     writeUiCache("silicaclaw_ui_overview", {
       overviewCardsHtml,
       brandVersionText,