@silicaclaw/cli 2026.3.20-2 → 2026.3.20-4

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

@@ -24,6 +24,134 @@ export function createSocialController({
   toPrettyJson,
   writeUiCache,
 }) {
+  const SKILLS_SECTION_LIMIT = 4;
+  const SKILLS_DIALOGUE_LIMIT = 1;
+  let lastMessagesRenderKey = "";
+  let lastLogsRenderKey = "";
+  const sectionRenderCache = new Map();
+  let skillsQuery = "";
+  let skillsFilter = "all";
+  const skillsExpanded = {
+    bundled: false,
+    installed: false,
+    dialogue: false,
+  };
+
+  function skillModeLabel(mode) {
+    if (mode === "workspace") return t("labels.skillsModeWorkspace");
+    if (mode === "legacy") return t("labels.skillsModeLegacy");
+    if (mode === "bundled") return t("labels.skillsModeBundled");
+    if (mode === "installed") return t("labels.skillsModeInstalled");
+    return mode ? String(mode) : t("labels.skillsModeGeneric");
+  }
+
+  function normalizeSkillSearchText(value) {
+    return String(value || "").trim().toLowerCase();
+  }
+
+  function setSkillsQuery(value) {
+    skillsQuery = normalizeSkillSearchText(value);
+  }
+
+  function setSkillsFilter(value) {
+    const next = String(value || "").trim();
+    skillsFilter = ["all", "attention", "updates", "installed"].includes(next) ? next : "all";
+  }
+
+  function toggleSkillsExpanded(section) {
+    if (!(section in skillsExpanded)) return;
+    skillsExpanded[section] = !skillsExpanded[section];
+  }
+
+  function skillMatchesSearch(skill) {
+    if (!skillsQuery) return true;
+    const haystack = [
+      skill.display_name,
+      skill.name,
+      skill.description,
+      skill.version,
+      ...(Array.isArray(skill.capabilities) ? skill.capabilities : []),
+      ...(Array.isArray(skill.owner_dialogue_examples_zh) ? skill.owner_dialogue_examples_zh : []),
+    ].map((item) => normalizeSkillSearchText(item)).join(" ");
+    return haystack.includes(skillsQuery);
+  }
+
+  function skillMatchesFilter(skill, section) {
+    if (skillsFilter === "all") return true;
+    if (skillsFilter === "updates") return Boolean(skill.update_available);
+    if (skillsFilter === "installed") {
+      return section === "installed" ? true : Boolean(skill.installed_in_openclaw);
+    }
+    if (skillsFilter === "attention") {
+      return section === "installed"
+        ? Boolean(skill.update_available)
+        : Boolean(skill.update_available || !skill.installed_in_openclaw);
+    }
+    return true;
+  }
+
+  function renderSkillsSectionFooter({ footerId, section, totalCount, visibleCount, limit }) {
+    const footer = document.getElementById(footerId);
+    if (!footer) return;
+    if (totalCount <= limit) {
+      footer.innerHTML = "";
+      return;
+    }
+    const expanded = skillsExpanded[section];
+    const hiddenCount = Math.max(totalCount - visibleCount, 0);
+    footer.innerHTML = `
+      <button class="secondary skills-section__toggle" type="button" data-skills-toggle="${section}">
+        ${expanded ? t("actions.showLess") : t("actions.showMoreCount", { count: String(hiddenCount) })}
+      </button>
+    `;
+  }
+
+  function renderFilteredSkillCards({ skills, section, gridId, footerId, renderer, limit }) {
+    const filtered = skills.filter((skill) => skillMatchesSearch(skill) && skillMatchesFilter(skill, section));
+    const expanded = skillsExpanded[section];
+    const visible = expanded ? filtered : filtered.slice(0, limit);
+    document.getElementById(gridId).innerHTML = visible.length
+      ? visible.map((skill) => renderer(skill)).join("")
+      : `<div class="skills-empty">${t("hints.skillsNoFilterMatch")}</div>`;
+    renderSkillsSectionFooter({
+      footerId,
+      section,
+      totalCount: filtered.length,
+      visibleCount: visible.length,
+      limit,
+    });
+    return filtered.length;
+  }
+
+  function renderSkillsFilterMeta({ bundledCount, installedCount, dialogueCount }) {
+    const matchedTotal = bundledCount + installedCount + dialogueCount;
+    const filterLabel = t(`labels.skillsFilter${skillsFilter.charAt(0).toUpperCase()}${skillsFilter.slice(1)}`);
+    document.getElementById("skillsFilterMeta").textContent = t("hints.skillsFilterMeta", {
+      count: String(matchedTotal),
+      filter: filterLabel,
+    });
+    document.querySelectorAll("[data-skills-filter]").forEach((btn) => {
+      btn.classList.toggle("active", btn.getAttribute("data-skills-filter") === skillsFilter);
+    });
+  }
+
+  function setCachedContent(id, value, mode = "html") {
+    const cacheKey = `${mode}:${id}`;
+    if (sectionRenderCache.get(cacheKey) === value) {
+      return;
+    }
+    const el = document.getElementById(id);
+    if (!el) return;
+    if (mode === "text") {
+      el.textContent = value;
+    } else if (mode === "class") {
+      el.className = value;
+    } else {
+      el.innerHTML = value;
+    }
+    sectionRenderCache.set(cacheKey, value);
+  }
+
   function renderSocialMessages() {
     const listEl = document.getElementById("socialMessageList");
     const metaEl = document.getElementById("socialMessageMeta");
@@ -37,10 +165,16 @@ export function createSocialController({
           seconds: String(Math.floor((governance.send_limit?.window_ms || 60000) / 1000)),
         })}`
       : t("overview.messageHint");
-    hintEl.textContent = governanceHint;
     if (!socialMessagesCache.length) {
-      metaEl.textContent = t("overview.noMessagesMeta");
-      listEl.innerHTML = `<div class="empty-state">${t("overview.noMessagesEmpty")}</div>`;
+      const nextMeta = t("overview.noMessagesMeta");
+      const nextHtml = `<div class="empty-state">${t("overview.noMessagesEmpty")}</div>`;
+      const renderKey = JSON.stringify({ hint: governanceHint, meta: nextMeta, html: nextHtml });
+      if (renderKey !== lastMessagesRenderKey) {
+        hintEl.textContent = governanceHint;
+        metaEl.textContent = nextMeta;
+        listEl.innerHTML = nextHtml;
+        lastMessagesRenderKey = renderKey;
+      }
       return;
     }
 
@@ -59,16 +193,28 @@ export function createSocialController({
           seconds: String(Math.floor((governance.send_limit?.window_ms || 60000) / 1000)),
         })}`
       : "";
-    metaEl.textContent = `${baseMeta}${governanceMeta}`;
+    const nextMeta = `${baseMeta}${governanceMeta}`;
 
     if (!filteredMessages.length) {
-      listEl.innerHTML = `<div class="empty-state">${t("overview.noMessagesEmpty")}</div>`;
+      const nextHtml = `<div class="empty-state">${t("overview.noMessagesEmpty")}</div>`;
+      const renderKey = JSON.stringify({ hint: governanceHint, meta: nextMeta, html: nextHtml });
+      if (renderKey !== lastMessagesRenderKey) {
+        hintEl.textContent = governanceHint;
+        metaEl.textContent = nextMeta;
+        listEl.innerHTML = nextHtml;
+        lastMessagesRenderKey = renderKey;
+      }
       return;
     }
 
-    listEl.innerHTML = filteredMessages
+    const nextHtml = filteredMessages
       .map((item) => {
         const visibleRemoteCount = getVisibleRemotePublicCount();
+        const avatarUrl = String(item.avatar_url || "").trim();
+        const displayName = String(item.display_name || t("overview.unnamed")).trim() || t("overview.unnamed");
+        const avatar = avatarUrl
+          ? `<img class="agent-card__avatar" src="${escapeHtml(avatarUrl)}" alt="${escapeHtml(displayName)}" loading="lazy" />`
+          : `<div class="agent-card__avatar-fallback">${escapeHtml((displayName[0] || "?").toUpperCase())}</div>`;
         const selfStatusChips = item.is_self
           ? `
               <span class="tag-chip" style="margin-left:8px;">${t("overview.selfMessagePublished")}</span>
@@ -101,14 +247,17 @@ export function createSocialController({
         return `
           <div class="log-item">
             <div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
-              <div>
-                <strong>${escapeHtml(item.display_name || t("overview.unnamed"))}</strong>
-                <span class="mono" style="color:#90a2c3; margin-left:8px;">${escapeHtml(shortId(item.agent_id || ""))}</span>
-                <span class="tag-chip" style="margin-left:8px;">${escapeHtml(item.topic || t("labels.globalTopic"))}</span>
-                ${item.is_self ? `<span class="tag-chip" style="margin-left:8px;">${t("overview.messageFilterSelf")}</span>` : ""}
-                <span class="tag-chip" style="margin-left:8px;">${item.online ? t("overview.online") : t("overview.offline")}</span>
-                ${observationChip}
-                ${selfStatusChips}
+              <div style="display:flex; align-items:flex-start; gap:10px; min-width:0;">
+                ${avatar}
+                <div style="min-width:0;">
+                  <strong>${escapeHtml(displayName)}</strong>
+                  <span class="mono" style="color:#90a2c3; margin-left:8px;">${escapeHtml(shortId(item.agent_id || ""))}</span>
+                  <span class="tag-chip" style="margin-left:8px;">${escapeHtml(item.topic || t("labels.globalTopic"))}</span>
+                  ${item.is_self ? `<span class="tag-chip" style="margin-left:8px;">${t("overview.messageFilterSelf")}</span>` : ""}
+                  <span class="tag-chip" style="margin-left:8px;">${item.online ? t("overview.online") : t("overview.offline")}</span>
+                  ${observationChip}
+                  ${selfStatusChips}
+                </div>
               </div>
               <div class="mono" style="color:#90a2c3;">${new Date(item.created_at).toLocaleString()}</div>
             </div>
@@ -118,6 +267,25 @@ export function createSocialController({
         `;
       })
       .join("");
+    const renderKey = JSON.stringify({
+      hint: governanceHint,
+      meta: nextMeta,
+      filter: socialMessageFilter,
+      messages: filteredMessages.map((item) => [
+        item.message_id,
+        item.updated_at || item.created_at,
+        item.remote_observation_count || 0,
+        item.online ? 1 : 0,
+      ]),
+      visibleRemoteCount: getVisibleRemotePublicCount(),
+    });
+    if (renderKey === lastMessagesRenderKey) {
+      return;
+    }
+    hintEl.textContent = governanceHint;
+    metaEl.textContent = nextMeta;
+    listEl.innerHTML = nextHtml;
+    lastMessagesRenderKey = renderKey;
   }
 
   async function refreshMessages() {
@@ -162,19 +330,29 @@ export function createSocialController({
     const publicDiscoveryText = status.public_enabled ? t("social.publicDiscoveryEnabled") : t("social.publicDiscoveryDisabled");
 
     const namespaceText = `${status.connected_to_silicaclaw ? t("social.connectedToSilicaClaw") : t("social.notConnected")} · ${publicDiscoveryText} · ${t("social.mode")} ${mode}`;
-    document.getElementById("socialStatusLine").textContent = summaryLine;
-    document.getElementById("socialStatusSubline").textContent = namespaceText;
+    setCachedContent("socialStatusLine", summaryLine, "text");
+    setCachedContent("socialStatusSubline", namespaceText, "text");
     const bar = document.getElementById("integrationStatusBar");
-    bar.className = `integration-strip ${status.connected_to_silicaclaw && status.public_enabled ? "ok" : "warn"}${getActiveTab() === "overview" ? "" : " hidden"}`;
-    bar.textContent = t("social.barStatus", {
+    const barClassName = `integration-strip ${status.connected_to_silicaclaw && status.public_enabled ? "ok" : "warn"}${getActiveTab() === "overview" ? "" : " hidden"}`;
+    const barText = t("social.barStatus", {
       connected: status.connected_to_silicaclaw ? t("common.yes") : t("common.no"),
       mode,
       public: status.public_enabled ? t("common.on") : t("common.off"),
     });
-    document.getElementById("brandStatusDot").className = `sidebar-version__status ${status.connected_to_silicaclaw ? "ok" : "warn"}`;
+    if (bar.className !== barClassName) {
+      bar.className = barClassName;
+    }
+    if (bar.textContent !== barText) {
+      bar.textContent = barText;
+    }
+    const brandStatusDot = document.getElementById("brandStatusDot");
+    const brandStatusClassName = `sidebar-version__status ${status.connected_to_silicaclaw ? "ok" : "warn"}`;
+    if (brandStatusDot.className !== brandStatusClassName) {
+      brandStatusDot.className = brandStatusClassName;
+    }
     writeUiCache("silicaclaw_ui_social", {
-      integrationStatusText: bar.textContent,
-      integrationStatusClassName: bar.className,
+      integrationStatusText: barText,
+      integrationStatusClassName: barClassName,
       socialStatusLineText: summaryLine,
       socialStatusSublineText: namespaceText,
     });
@@ -182,14 +360,14 @@ export function createSocialController({
     if (!status.configured && status.configured_reason) reasons.push(t("social.configuredReason", { reason: status.configured_reason }));
     if (!status.running && status.running_reason) reasons.push(t("social.runningReason", { reason: status.running_reason }));
     if (!status.discoverable && status.discoverable_reason) reasons.push(t("social.discoverableReasonFull", { reason: status.discoverable_reason }));
-    document.getElementById("socialStateHint").textContent = reasons.length ? reasons.join(" · ") : t("hints.allIntegrationChecksPassed");
+    setCachedContent("socialStateHint", reasons.length ? reasons.join(" · ") : t("hints.allIntegrationChecksPassed"), "text");
     const modeSelect = document.getElementById("socialModeSelect");
     const displayedSelectedMode = getSocialModeDirty() && getSocialModePending() ? getSocialModePending() : selectedMode;
     if (modeSelect && displayedSelectedMode !== "-") modeSelect.value = displayedSelectedMode;
     renderSocialModeHint(displayedSelectedMode, mode, !!social.network_requires_restart, getSocialModeDirty());
     setSocialModePendingState(getSocialModeDirty());
 
-    document.getElementById("socialPrimaryCards").innerHTML = [
+    setCachedContent("socialPrimaryCards", [
       [t("social.configured"), status.configured ? t("common.yes") : t("common.no")],
       [t("social.running"), status.running ? t("common.yes") : t("common.no")],
       [t("social.discoverable"), discoverable ? t("common.yes") : t("common.no")],
@@ -197,9 +375,9 @@ export function createSocialController({
       [t("social.networkMode"), mode],
       [t("labels.adapter"), effectiveAdapter],
       [t("social.discoverableReason"), status.discoverable_reason || "-"],
-    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join("");
+    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join(""));
 
-    document.getElementById("socialIntegrationCards").innerHTML = [
+    setCachedContent("socialIntegrationCards", [
       [t("social.connected"), bridge.connected_to_silicaclaw ? t("common.yes") : t("common.no")],
       [t("social.messageBroadcast"), bridge.message_broadcast_enabled ? t("common.on") : t("common.off")],
       [t("social.displayName"), status.display_name || t("overview.unnamed")],
@@ -207,9 +385,9 @@ export function createSocialController({
       [t("social.socialFound"), summary.social_md_found ? t("common.yes") : t("common.no")],
       [t("social.socialSource"), summary.social_md_source_path || "-"],
       [t("social.reuseOpenClawIdentity"), summary.reused_openclaw_identity ? t("common.yes") : t("common.no")],
-    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join("");
+    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join(""));
 
-    document.getElementById("socialMessagePathCards").innerHTML = [
+    setCachedContent("socialMessagePathCards", [
       [t("social.messageBroadcast"), bridge.message_broadcast_enabled ? t("common.on") : t("common.off")],
       [t("social.publicDiscovery"), status.public_enabled ? t("common.on") : t("common.off")],
       [t("social.namespace"), effectiveNamespace],
@@ -218,7 +396,7 @@ export function createSocialController({
       [t("network.lastPoll"), networkDiag.last_poll_at ? new Date(networkDiag.last_poll_at).toLocaleTimeString() : "-"],
       [t("network.lastPublish"), networkDiag.last_publish_at ? new Date(networkDiag.last_publish_at).toLocaleTimeString() : "-"],
       [t("network.lastError"), networkDiag.last_error || t("network.none")],
-    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${escapeHtml(String(v))}</div></div>`).join("");
+    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${escapeHtml(String(v))}</div></div>`).join(""));
 
     const skillLearning = bridge.skill_learning || {};
     const ownerDelivery = bridge.owner_delivery || {};
@@ -246,21 +424,21 @@ export function createSocialController({
       ownerDeliveryHeadline = t("feedback.openclawRoleNotRunning");
       ownerDeliveryBody = ownerDelivery.reason || "-";
     }
-    document.getElementById("socialOwnerDeliveryStatus").className = `feedback ${ownerDeliveryTone}`;
-    document.getElementById("socialOwnerDeliveryStatus").textContent = ownerDeliveryHeadline;
-    document.getElementById("socialOwnerDeliverySubline").textContent = [
+    setCachedContent("socialOwnerDeliveryStatus", `feedback ${ownerDeliveryTone}`, "class");
+    setCachedContent("socialOwnerDeliveryStatus", ownerDeliveryHeadline, "text");
+    setCachedContent("socialOwnerDeliverySubline", [
       `${t("social.broadcastReadable")}: ${ownerDelivery.bridge_messages_readable ? t("common.yes") : t("common.no")}`,
       `${t("social.ownerForwardCommand")}: ${ownerDelivery.forward_command_configured ? t("common.yes") : t("common.no")}`,
       `${t("social.ownerForwardReady")}: ${ownerDelivery.ready ? t("common.yes") : t("common.no")}`,
-    ].join(" · ");
-    document.getElementById("socialOwnerDeliveryReason").textContent = ownerDeliveryBody;
-    document.getElementById("socialCapabilityCards").innerHTML = [
+    ].join(" · "), "text");
+    setCachedContent("socialOwnerDeliveryReason", ownerDeliveryBody, "text");
+    setCachedContent("socialCapabilityCards", [
       [t("socialCapability.publicBroadcast"), bridge.message_broadcast_enabled ? t("common.yes") : t("common.no")],
       [t("socialCapability.monitorBroadcasts"), ownerDelivery.bridge_messages_readable ? t("common.yes") : t("common.no")],
       [t("socialCapability.autoPushToOwner"), ownerDelivery.ready ? t("common.yes") : t("common.no")],
       [t("socialCapability.ownerPrivateBoundary"), t("socialCapability.ownerPrivateBoundaryValue")],
-    ].map(([k, v]) => `<div class="card"><div class="label">${escapeHtml(String(k))}</div><div class="value" style="font-size:17px;">${escapeHtml(String(v))}</div></div>`).join("");
-    document.getElementById("openclawSkillCards").innerHTML = [
+    ].map(([k, v]) => `<div class="card"><div class="label">${escapeHtml(String(k))}</div><div class="value" style="font-size:17px;">${escapeHtml(String(v))}</div></div>`).join(""));
+    setCachedContent("openclawSkillCards", [
       [t("social.openclawInstalled"), openclawDetected ? t("common.yes") : t("common.no")],
       [t("social.running"), openclawRunning ? t("common.yes") : t("common.no")],
       [t("social.skillInstalled"), skillInstalled ? t("common.yes") : t("common.no")],
@@ -271,13 +449,13 @@ export function createSocialController({
       [t("social.openclawGateway"), bridge.openclaw_runtime?.gateway_url || "-"],
       [t("social.installMode"), skillLearning.install_mode || "-"],
       [t("social.installedPath"), skillInstalled ? installedSkillPath : "-"],
-    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${escapeHtml(v)}</div></div>`).join("");
-    document.getElementById("openclawSkillPath").textContent = ownerDelivery.forward_command
+    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${escapeHtml(v)}</div></div>`).join(""));
+    setCachedContent("openclawSkillPath", ownerDelivery.forward_command
       ? `${ownerDelivery.forward_command}${ownerDelivery.owner_channel ? ` · ${ownerDelivery.owner_channel}` : ""}${ownerDelivery.owner_target ? ` · ${ownerDelivery.owner_target}` : ""}`
       : skillInstalled
         ? installedSkillPath
-        : `${installAction.recommended_command || "-"}${bridge.openclaw_runtime?.gateway_url ? ` · detect ${bridge.openclaw_runtime.gateway_url}` : ""}`;
-    document.getElementById("openclawSkillHint").textContent = !openclawDetected
+        : `${installAction.recommended_command || "-"}${bridge.openclaw_runtime?.gateway_url ? ` · detect ${bridge.openclaw_runtime.gateway_url}` : ""}`, "text");
+    setCachedContent("openclawSkillHint", !openclawDetected
       ? t("feedback.openclawRoleBroadcasterOnly")
       : !openclawRunning
         ? t("feedback.openclawRoleNotRunning")
@@ -285,11 +463,11 @@ export function createSocialController({
           ? t("feedback.openclawRoleReadyToLearn")
           : ownerDelivery.ready
             ? t("feedback.openclawRoleOwnerReady")
-            : ownerDelivery.bridge_messages_readable && !ownerDelivery.forward_command_configured
-              ? t("feedback.openclawRoleLearningOnly")
-              : ownerDelivery.bridge_messages_readable
-                ? t("feedback.openclawRoleNeedsOwnerRoute")
-                : t("feedback.openclawRoleLearned");
+          : ownerDelivery.bridge_messages_readable && !ownerDelivery.forward_command_configured
+            ? t("feedback.openclawRoleLearningOnly")
+            : ownerDelivery.bridge_messages_readable
+              ? t("feedback.openclawRoleNeedsOwnerRoute")
+                : t("feedback.openclawRoleLearned"), "text");
     const skillInstallBtn = document.getElementById("openclawSkillInstallBtn");
     skillInstallBtn.textContent = !openclawDetected
       ? t("actions.openclawNotInstalled")
@@ -310,33 +488,33 @@ export function createSocialController({
     document.getElementById("governanceDuplicateWindowInput").value = String(Math.floor((policy.duplicate_window_ms ?? 180000) / 1000));
     document.getElementById("governanceBlockedAgentsInput").value = blockedAgentIds.join(", ");
     document.getElementById("governanceBlockedTermsInput").value = blockedTerms.join(", ");
-    document.getElementById("socialGovernanceCards").innerHTML = [
+    setCachedContent("socialGovernanceCards", [
       [t("labels.sendLimit"), `${policy.send_limit?.max ?? "-"} / ${Math.floor((policy.send_limit?.window_ms ?? 60000) / 1000)}s`],
       [t("labels.receiveLimit"), `${policy.receive_limit?.max ?? "-"} / ${Math.floor((policy.receive_limit?.window_ms ?? 60000) / 1000)}s`],
       [t("labels.duplicateWindowSeconds"), `${Math.floor((policy.duplicate_window_ms ?? 0) / 1000)}s`],
       [t("labels.blockedAgentIds"), blockedAgentIds.length],
       [t("labels.blockedTerms"), blockedTerms.length],
-    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join("");
+    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join(""));
 
     const moderationEvents = Array.isArray(governance.recent_events) ? governance.recent_events : [];
-    document.getElementById("socialModerationList").innerHTML = moderationEvents.length === 0
+    setCachedContent("socialModerationList", moderationEvents.length === 0
       ? `<div class="empty-state">${t("network.noModerationEvents")}</div>`
       : moderationEvents.map((event) => `
           <div class="log-item">
             <div class="log-${event.level || "warn"}">[${String(event.level || "warn").toUpperCase()}] ${escapeHtml(event.message || "-")}</div>
             <div class="mono" style="color:#90a2c3;">${new Date(event.timestamp).toLocaleString()}</div>
           </div>
-        `).join("");
+        `).join(""));
 
-    document.getElementById("socialAdvancedCards").innerHTML = [
+    setCachedContent("socialAdvancedCards", [
       [t("labels.adapter"), effectiveAdapter],
       [t("social.namespace"), effectiveNamespace],
       [t("labels.room"), effectiveRoom],
       [t("social.bridgeStatus"), bridge.connected_to_silicaclaw ? t("common.yes") : t("common.no")],
       [t("social.messageBroadcast"), bridge.message_broadcast_enabled ? t("common.on") : t("common.off")],
       [t("social.restartRequired"), social.network_requires_restart ? t("common.yes") : t("common.no")],
-    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join("");
-    document.getElementById("socialAdvancedWrap").textContent = toPrettyJson({
+    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join(""));
+    setCachedContent("socialAdvancedWrap", toPrettyJson({
       effective_runtime: {
         mode: effectiveMode,
         adapter: effectiveAdapter,
@@ -358,17 +536,17 @@ export function createSocialController({
         social_md_found: summary.social_md_found,
         social_md_source_path: summary.social_md_source_path,
       },
-    });
+    }), "text");
 
-    document.getElementById("socialSourceWrap").textContent = toPrettyJson({
+    setCachedContent("socialSourceWrap", toPrettyJson({
       found: social.found,
       source_path: social.source_path,
       parse_error: social.parse_error,
-    });
-    document.getElementById("socialRawWrap").textContent = toPrettyJson({
+    }), "text");
+    setCachedContent("socialRawWrap", toPrettyJson({
       raw_frontmatter: social.raw_frontmatter || null,
-    });
-    document.getElementById("socialRuntimeWrap").textContent = toPrettyJson(runtime);
+    }), "text");
+    setCachedContent("socialRuntimeWrap", toPrettyJson(runtime), "text");
   }
 
   async function exportSocialTemplate() {
@@ -383,23 +561,43 @@ export function createSocialController({
     const logLevelFilter = getLogLevelFilter();
     const el = document.getElementById("logList");
     if (!logsCache.length) {
-      el.innerHTML = `<div class="empty-state">${t("network.noLogsYet")}</div>`;
+      const nextHtml = `<div class="empty-state">${t("network.noLogsYet")}</div>`;
+      if (nextHtml !== lastLogsRenderKey) {
+        el.innerHTML = nextHtml;
+        lastLogsRenderKey = nextHtml;
+      }
       return;
     }
     const filtered = logLevelFilter === "all" ? logsCache : logsCache.filter((item) => String(item.level || "").toLowerCase() === logLevelFilter);
     if (!filtered.length) {
-      el.innerHTML = `<div class="empty-state">${t("network.noLogsForLevel", { level: logLevelFilter })}</div>`;
+      const nextHtml = `<div class="empty-state">${t("network.noLogsForLevel", { level: logLevelFilter })}</div>`;
+      if (nextHtml !== lastLogsRenderKey) {
+        el.innerHTML = nextHtml;
+        lastLogsRenderKey = nextHtml;
+      }
       return;
     }
-    el.innerHTML = filtered.map((item) => `
+    const nextHtml = filtered.map((item) => `
       <div class="log-item">
         <div class="log-${item.level}">[${String(item.level).toUpperCase()}] ${item.message}</div>
         <div class="mono" style="color:#90a2c3;">${new Date(item.timestamp).toLocaleString()}</div>
       </div>
     `).join("");
+    const renderKey = JSON.stringify({
+      level: logLevelFilter,
+      items: filtered.map((item) => [item.timestamp, item.level, item.message]),
+    });
+    if (renderKey === lastLogsRenderKey) {
+      return;
+    }
+    el.innerHTML = nextHtml;
+    lastLogsRenderKey = renderKey;
   }
 
   async function refreshLogs() {
+    if (getActiveTab() !== "network") {
+      return;
+    }
     setLogsCache((await api("/api/logs")).data || []);
     renderLogs();
   }
@@ -425,8 +623,8 @@ export function createSocialController({
       <div class="skill-card">
         <div class="skill-card__top">
           <div>
-            <div class="skill-card__eyebrow">${escapeHtml(options.eyebrow || skill.install_mode || "skill")}</div>
-            <div class="skill-card__title">${escapeHtml(skill.display_name || skill.name || "Skill")}</div>
+            <div class="skill-card__eyebrow">${escapeHtml(skillModeLabel(options.eyebrow || skill.install_mode || "skill"))}</div>
+            <div class="skill-card__title">${escapeHtml(skill.display_name || skill.name || t("labels.skillsModeGeneric"))}</div>
           </div>
           <div class="skill-card__version mono">${escapeHtml(versionText)}</div>
         </div>
@@ -476,7 +674,7 @@ export function createSocialController({
       <div class="skill-card">
         <div class="skill-card__top">
           <div>
-            <div class="skill-card__eyebrow">${escapeHtml(skill.display_name || skill.name || "Skill")}</div>
+            <div class="skill-card__eyebrow">${escapeHtml(skill.display_name || skill.name || t("labels.skillsModeGeneric"))}</div>
             <div class="skill-card__title">${escapeHtml(t("labels.skillsDialogueExamples"))}</div>
           </div>
           <div class="skill-card__version mono">${escapeHtml(skill.version || "-")}</div>
@@ -604,36 +802,57 @@ export function createSocialController({
       `).join("")
       : `<div class="skills-empty">${t("hints.skillsNoBundled")}</div>`;
 
-    document.getElementById("skillsBundledGrid").innerHTML = bundledSorted.length
-      ? bundledSorted.map((skill) => renderSkillCard(skill, {
-          eyebrow: skill.install_mode === "workspace" || skill.install_mode === "legacy" ? skill.install_mode : "bundled",
-          statusText: skill.update_available
-            ? t("labels.skillsUpdateAvailable")
-            : skill.installed_in_openclaw
-              ? `${t("labels.skillsStatus")}: ${t("common.yes")}`
-              : t("hints.skillsNotInstalled"),
-          installable: true,
-          updateAvailable: skill.update_available,
-          installedVersion: skill.installed_version,
-          bundledVersion: skill.version,
-        })).join("")
-      : `<div class="skills-empty">${t("hints.skillsNoBundled")}</div>`;
+    const bundledMatchCount = renderFilteredSkillCards({
+      skills: bundledSorted,
+      section: "bundled",
+      gridId: "skillsBundledGrid",
+      footerId: "skillsBundledFooter",
+      limit: SKILLS_SECTION_LIMIT,
+      renderer: (skill) => renderSkillCard(skill, {
+        eyebrow: skill.install_mode === "workspace" || skill.install_mode === "legacy" ? skill.install_mode : "bundled",
+        statusText: skill.update_available
+          ? t("labels.skillsUpdateAvailable")
+          : skill.installed_in_openclaw
+            ? `${t("labels.skillsStatus")}: ${t("common.yes")}`
+            : t("hints.skillsNotInstalled"),
+        installable: true,
+        updateAvailable: skill.update_available,
+        installedVersion: skill.installed_version,
+        bundledVersion: skill.version,
+      }),
+    });
+
+    const installedMatchCount = renderFilteredSkillCards({
+      skills: installedSorted,
+      section: "installed",
+      gridId: "skillsInstalledGrid",
+      footerId: "skillsInstalledFooter",
+      limit: SKILLS_SECTION_LIMIT,
+      renderer: (skill) => renderSkillCard(skill, {
+        eyebrow: skill.install_mode || "installed",
+        statusText: skill.update_available
+          ? t("labels.skillsUpdateAvailable")
+          : `${t("labels.skillsStatus")}: ${escapeHtml(skillModeLabel(skill.install_mode || "installed"))}`,
+        updateAvailable: skill.update_available,
+        installedVersion: skill.version,
+        bundledVersion: skill.bundled_version,
+      }),
+    });
+
+    const dialogueMatchCount = renderFilteredSkillCards({
+      skills: featuredSkills,
+      section: "dialogue",
+      gridId: "skillsDialogueGrid",
+      footerId: "skillsDialogueFooter",
+      limit: SKILLS_DIALOGUE_LIMIT,
+      renderer: (skill) => renderDialogueCard(skill),
+    });
 
-    document.getElementById("skillsInstalledGrid").innerHTML = installedSorted.length
-      ? installedSorted.map((skill) => renderSkillCard(skill, {
-          eyebrow: skill.install_mode || "installed",
-          statusText: skill.update_available
-            ? t("labels.skillsUpdateAvailable")
-            : `${t("labels.skillsStatus")}: ${escapeHtml(String(skill.install_mode || "-"))}`,
-          updateAvailable: skill.update_available,
-          installedVersion: skill.version,
-          bundledVersion: skill.bundled_version,
-        })).join("")
-      : `<div class="skills-empty">${t("hints.skillsNoInstalled")}</div>`;
-
-    document.getElementById("skillsDialogueGrid").innerHTML = featuredSkills.length
-      ? featuredSkills.map((skill) => renderDialogueCard(skill)).join("")
-      : `<div class="skills-empty">${t("hints.skillsNoDialogueExamples")}</div>`;
+    renderSkillsFilterMeta({
+      bundledCount: bundledMatchCount,
+      installedCount: installedMatchCount,
+      dialogueCount: dialogueMatchCount,
+    });
 
     const installBtn = document.getElementById("skillsInstallBtn");
     installBtn.textContent = !openclawDetected
@@ -659,6 +878,9 @@ export function createSocialController({
     refreshSocial,
     renderLogs,
     renderSocialMessages,
+    setSkillsFilter,
+    setSkillsQuery,
     setLogLevelFilter,
+    toggleSkillsExpanded,
   };
 }