@silicaclaw/cli 2026.3.20-2 → 2026.3.20-21

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 socialController.rerenderSkills();
+  });
+
+  document.querySelectorAll("[data-skills-filter]").forEach((btn) => {
+    btn.addEventListener("click", async () => {
+      socialController.setSkillsFilter(String(btn.getAttribute("data-skills-filter") || "all"));
+      await socialController.rerenderSkills();
+    });
+  });
+
+  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 socialController.rerenderSkills();
+    });
+  });
+
   document.getElementById("saveGovernanceBtn").addEventListener("click", async () => {
     setFeedback("socialGovernanceFeedback", t("common.saving"));
     try {

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 {

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());
@@ -64,12 +66,11 @@ export function createOverviewController({
     setOverviewMode,
     setVisibleRemotePublicCount,
   }) {
-    const [overviewRes, discoveredRes, peerRes, profileRes, bridgeRes, networkCfgRes, networkStatsRes] = await Promise.allSettled([
+    const [overviewRes, discoveredRes, peerRes, profileRes, networkCfgRes, networkStatsRes] = await Promise.allSettled([
       api("/api/overview"),
       api("/api/search?q="),
       api("/api/peers"),
       api("/api/profile"),
-      api("/api/openclaw/bridge"),
       api("/api/network/config"),
       api("/api/network/stats"),
     ]);
@@ -80,7 +81,6 @@ export function createOverviewController({
     const allProfiles = discoveredRes.status === "fulfilled" ? discoveredRes.value.data || [] : [];
     const peers = peerRes.status === "fulfilled" ? peerRes.value.data || {} : {};
     const currentProfile = profileRes.status === "fulfilled" ? profileRes.value.data || {} : {};
-    const bridge = bridgeRes.status === "fulfilled" ? bridgeRes.value.data || {} : {};
     const networkCfg = networkCfgRes.status === "fulfilled" ? networkCfgRes.value.data || {} : {};
     const networkStats = networkStatsRes.status === "fulfilled" ? networkStatsRes.value.data || {} : {};
     const all = Array.isArray(allProfiles) ? allProfiles.slice() : [];
@@ -108,15 +108,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>
     `;
@@ -143,9 +143,10 @@ export function createOverviewController({
     document.getElementById("pillBroadcast").textContent = pillBroadcastText;
     document.getElementById("pillBroadcast").className = pillBroadcastClassName;
 
-    const openclawRunning = !!bridge.openclaw_runtime?.running;
-    const openclawDetected = !!bridge.openclaw_installation?.detected || openclawRunning || !!bridge.openclaw_runtime?.gateway_reachable;
-    const skillInstalled = !!bridge.skill_learning?.installed;
+    const openclaw = o.openclaw || {};
+    const openclawRunning = !!openclaw.running;
+    const openclawDetected = !!openclaw.detected || openclawRunning;
+    const skillInstalled = !!openclaw.skill_installed;
     const globalMode = heroModeText === "global-preview";
     const lastNetworkError = String(networkDiag.last_error || o.last_broadcast_error || "").trim();
     const broadcastHealthy = o.broadcast_enabled && !lastNetworkError;
@@ -175,7 +176,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 +222,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,
@@ -270,6 +280,9 @@ export function createOverviewController({
               ${renderTags(a)}
             </div>
             <div class="${a.online ? "online" : "offline"}">${a.online ? t("overview.online") : t("overview.offline")}</div>
+            <div class="agent-card__actions">
+              ${!a.is_self ? `<button class="secondary" type="button" data-private-agent="${escapeHtml(a.agent_id)}" data-private-name="${escapeHtml(a.display_name || "")}" data-private-key="${escapeHtml(a.private_encryption_public_key || "")}" ${a.private_encryption_public_key ? "" : "disabled title=\"Private messaging unavailable for this agent yet\""}>${t("actions.messageAgentPrivately")}</button>` : ""}
+            </div>
             <div class="agent-card__meta"><div class="agent-card__updated">${ago(a.updated_at)}</div></div>
           </div>
         `).join("")}
@@ -282,20 +295,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,