@silicaclaw/cli 2026.3.19-15 → 2026.3.19-16

package/apps/local-console/dist/packages/network/src/realPreview.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RealNetworkAdapterPreview = void 0;
 const crypto_1 = require("crypto");
@@ -7,6 +10,7 @@ const jsonMessageEnvelopeCodec_1 = require("./codec/jsonMessageEnvelopeCodec");
 const jsonTopicCodec_1 = require("./codec/jsonTopicCodec");
 const udpLanBroadcastTransport_1 = require("./transport/udpLanBroadcastTransport");
 const heartbeatPeerDiscovery_1 = require("./discovery/heartbeatPeerDiscovery");
+const silicaclaw_defaults_json_1 = __importDefault(require("../../../config/silicaclaw-defaults.json"));
 class RealNetworkAdapterPreview {
     started = false;
     peerId;
@@ -46,7 +50,7 @@ class RealNetworkAdapterPreview {
     };
     constructor(options = {}) {
         this.peerId = options.peerId ?? `peer-${process.pid}-${Math.random().toString(36).slice(2, 10)}`;
-        this.namespace = this.normalizeNamespace(options.namespace ?? "silicaclaw.preview");
+        this.namespace = this.normalizeNamespace(options.namespace ?? silicaclaw_defaults_json_1.default.network.default_namespace);
         this.transport = options.transport ?? new udpLanBroadcastTransport_1.UdpLanBroadcastTransport();
         this.envelopeCodec = options.envelopeCodec ?? new jsonMessageEnvelopeCodec_1.JsonMessageEnvelopeCodec();
         this.topicCodec = options.topicCodec ?? new jsonTopicCodec_1.JsonTopicCodec();
@@ -315,7 +319,7 @@ class RealNetworkAdapterPreview {
     }
     normalizeNamespace(namespace) {
         const normalized = namespace.trim();
-        return normalized.length > 0 ? normalized : "silicaclaw.preview";
+        return normalized.length > 0 ? normalized : silicaclaw_defaults_json_1.default.network.default_namespace;
     }
     errorMessage(error) {
         if (error instanceof Error) {

package/apps/local-console/dist/packages/network/src/relayPreview.js

@@ -1,10 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RelayPreviewAdapter = void 0;
 const crypto_1 = require("crypto");
 const messageEnvelope_1 = require("./abstractions/messageEnvelope");
 const jsonMessageEnvelopeCodec_1 = require("./codec/jsonMessageEnvelopeCodec");
 const jsonTopicCodec_1 = require("./codec/jsonTopicCodec");
+const silicaclaw_defaults_json_1 = __importDefault(require("../../../config/silicaclaw-defaults.json"));
 function dedupe(values) {
     return Array.from(new Set(values.map((value) => value.trim()).filter(Boolean)));
 }
@@ -77,13 +81,15 @@ class RelayPreviewAdapter {
     };
     constructor(options = {}) {
         this.peerId = options.peerId ?? `peer-${process.pid}-${Math.random().toString(36).slice(2, 10)}`;
-        this.namespace = String(options.namespace || "silicaclaw.preview").trim() || "silicaclaw.preview";
+        this.namespace =
+            String(options.namespace || silicaclaw_defaults_json_1.default.network.default_namespace).trim() || silicaclaw_defaults_json_1.default.network.default_namespace;
         this.signalingEndpoints = dedupe((options.signalingUrls && options.signalingUrls.length > 0
             ? options.signalingUrls
             : [options.signalingUrl || "http://localhost:4510"]));
         this.activeEndpoint = this.signalingEndpoints[0] || "http://localhost:4510";
         this.activeEndpointIndex = 0;
-        this.room = String(options.room || "silicaclaw-global-preview").trim() || "silicaclaw-global-preview";
+        this.room =
+            String(options.room || silicaclaw_defaults_json_1.default.network.global_preview.room).trim() || silicaclaw_defaults_json_1.default.network.global_preview.room;
         this.seedPeers = dedupe(options.seedPeers || []);
         this.bootstrapHints = dedupe(options.bootstrapHints || []);
         this.bootstrapSources = dedupe(options.bootstrapSources || []);

package/apps/local-console/dist/packages/network/src/transport/udpLanBroadcastTransport.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UdpLanBroadcastTransport = void 0;
 const dgram_1 = __importDefault(require("dgram"));
+const silicaclaw_defaults_json_1 = __importDefault(require("../../../../config/silicaclaw-defaults.json"));
 class UdpLanBroadcastTransport {
     socket = null;
     handlers = new Set();
@@ -28,7 +29,7 @@ class UdpLanBroadcastTransport {
     bindAddress;
     broadcastAddress;
     constructor(options = {}) {
-        this.port = options.port ?? 44123;
+        this.port = options.port ?? silicaclaw_defaults_json_1.default.ports.network_default;
         this.bindAddress = options.bindAddress ?? "0.0.0.0";
         this.broadcastAddress = options.broadcastAddress ?? "255.255.255.255";
     }

package/apps/local-console/dist/packages/network/src/webrtcPreview.js

@@ -1,10 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebRTCPreviewAdapter = void 0;
 const crypto_1 = require("crypto");
 const messageEnvelope_1 = require("./abstractions/messageEnvelope");
 const jsonMessageEnvelopeCodec_1 = require("./codec/jsonMessageEnvelopeCodec");
 const jsonTopicCodec_1 = require("./codec/jsonTopicCodec");
+const silicaclaw_defaults_json_1 = __importDefault(require("../../../config/silicaclaw-defaults.json"));
 function now() {
     return Date.now();
 }
@@ -103,7 +107,7 @@ class WebRTCPreviewAdapter {
     };
     constructor(options = {}) {
         this.peerId = options.peerId ?? `webrtc-${process.pid}-${Math.random().toString(36).slice(2, 9)}`;
-        this.namespace = (options.namespace ?? "silicaclaw.preview").trim() || "silicaclaw.preview";
+        this.namespace = (options.namespace ?? silicaclaw_defaults_json_1.default.network.default_namespace).trim() || silicaclaw_defaults_json_1.default.network.default_namespace;
         const configuredSignalingUrls = dedupeArray([
             ...(options.signalingUrls ?? []),
             options.signalingUrl ?? "",

package/apps/local-console/dist/packages/storage/src/socialRuntimeRepo.js

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SocialRuntimeRepo = void 0;
 const path_1 = require("path");
 const jsonRepo_1 = require("./jsonRepo");
+const silicaclaw_defaults_json_1 = __importDefault(require("../../../config/silicaclaw-defaults.json"));
 function emptyRuntime() {
     return {
         enabled: true,
@@ -14,13 +18,13 @@ function emptyRuntime() {
         resolved_identity: null,
         resolved_profile: null,
         resolved_network: {
-            mode: "global-preview",
+            mode: silicaclaw_defaults_json_1.default.network.default_mode,
             adapter: "relay-preview",
-            namespace: "silicaclaw.preview",
+            namespace: silicaclaw_defaults_json_1.default.network.default_namespace,
             port: null,
-            signaling_url: "https://relay.silicaclaw.com",
+            signaling_url: silicaclaw_defaults_json_1.default.network.global_preview.relay_url,
             signaling_urls: [],
-            room: "silicaclaw-global-preview",
+            room: silicaclaw_defaults_json_1.default.network.global_preview.room,
             seed_peers: [],
             bootstrap_hints: [],
             bootstrap_sources: [],

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

@@ -190,17 +190,31 @@ 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('skillsActionEyebrow').textContent = t('labels.skillsRecommendedAction');
+        document.getElementById('skillsActionTitle').textContent = t('hints.skillsActionInstallTitle');
+        document.getElementById('skillsActionBody').textContent = t('hints.skillsActionInstallBody');
+        document.getElementById('skillsActionState').textContent = t('labels.skillsStateReady');
+        document.getElementById('skillsJumpEyebrow').textContent = t('labels.skillsBrowseAreas');
+        document.getElementById('skillsJumpTitle').textContent = t('hints.skillsJumpTitle');
+        document.getElementById('skillsJumpFeatured').textContent = t('labels.skillsFeatured');
+        document.getElementById('skillsJumpBundled').textContent = t('labels.skillsBundled');
+        document.getElementById('skillsJumpInstalled').textContent = t('labels.skillsInstalled');
+        document.getElementById('skillsJumpDialogue').textContent = t('labels.skillsDialogue');
         document.getElementById('skillsFeaturedTitle').textContent = t('labels.skillsFeatured');
         document.getElementById('skillsFeaturedHint').textContent = t('hints.skillsFeaturedHint');
         document.getElementById('skillsBundledTitle').textContent = t('labels.skillsBundled');
         document.getElementById('skillsBundledHint').textContent = t('hints.skillsBundledHint');
+        document.getElementById('skillsDialogueTitle').textContent = t('labels.skillsDialogue');
+        document.getElementById('skillsDialogueHint').textContent = t('hints.skillsDialogueHint');
         document.getElementById('skillsInstalledTitle').textContent = t('labels.skillsInstalled');
         document.getElementById('skillsInstalledHint').textContent = t('hints.skillsInstalledHint');
-        document.getElementById('skillsInstallBtn').textContent = t('actions.learnOpenClawSkill');
+        document.getElementById('skillsInstallBtn').textContent = t('actions.installSilicaClawSkills');
         document.getElementById('socialIntegrationTitle').textContent = t('labels.integrationStatus');
         document.querySelector('#socialStatusLine').textContent = t('hints.checkingIntegration');
         document.getElementById('socialRuntimeSummaryTitle').textContent = t('labels.whatIsActive');
         document.getElementById('socialBridgeTitle').textContent = t('labels.identityBinding');
+        document.getElementById('socialCapabilityTitle').textContent = t('labels.ownerCommunicationCapabilities');
+        document.getElementById('socialCapabilityHint').textContent = t('hints.ownerCommunicationCapabilitiesHint');
         document.getElementById('socialOwnerDeliveryTitle').textContent = t('labels.ownerDelivery');
         document.getElementById('socialSkillLearningTitle').textContent = t('labels.openclawSkillLearning');
         document.getElementById('socialMessagePathTitle').textContent = t('labels.messagePath');
@@ -409,6 +423,7 @@ root.innerHTML = appTemplate;
       const refreshNetwork = networkController.refreshNetwork;
       const refreshPeers = networkController.refreshPeers;
       const refreshDiscovery = networkController.refreshDiscovery;
+      const getQuickConnectDefaults = networkController.getQuickConnectDefaults;
 
       const refreshSocial = socialController.refreshSocial;
       const exportSocialTemplate = socialController.exportSocialTemplate;
@@ -465,6 +480,7 @@ root.innerHTML = appTemplate;
         t,
         toast,
         getSocialTemplate: () => socialTemplate,
+        getQuickConnectDefaults,
         setAgentsPage: (value) => { agentsPage = value; },
         getSocialMessagesCache: () => socialMessagesCache,
         toPrettyJson,

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

@@ -31,6 +31,7 @@ export function bindAppEvents({
   t,
   toast,
   getSocialTemplate,
+  getQuickConnectDefaults,
   setAgentsPage,
   getSocialMessagesCache,
   toPrettyJson,
@@ -195,9 +196,12 @@ export function bindAppEvents({
   document.getElementById("broadcastNowBtn").addEventListener("click", () => runAction("/api/broadcast/now", t("actions.broadcastNow")));
 
   document.getElementById("quickGlobalPreviewBtn").addEventListener("click", async () => {
-    const currentSignaling = window.prompt(t("feedback.promptSignalingUrl"), "http://localhost:4510");
+    const quickConnectDefaults = typeof getQuickConnectDefaults === "function"
+      ? getQuickConnectDefaults()
+      : { signalingUrl: "http://localhost:4510", room: "" };
+    const currentSignaling = window.prompt(t("feedback.promptSignalingUrl"), quickConnectDefaults.signalingUrl || "http://localhost:4510");
     if (!currentSignaling) return;
-    const room = window.prompt(t("feedback.promptRoom"), "silicaclaw-global-preview") || "silicaclaw-global-preview";
+    const room = window.prompt(t("feedback.promptRoom"), quickConnectDefaults.room || "") || quickConnectDefaults.room || "";
     setFeedback("networkFeedback", t("feedback.crossPreviewEnabling"));
     try {
       const result = await api("/api/network/quick-connect-global-preview", {
@@ -283,6 +287,38 @@ export function bindAppEvents({
     }
   });
 
+  document.getElementById("skillsBundledGrid").addEventListener("click", async (event) => {
+    const btn = event.target instanceof Element ? event.target.closest("[data-skill-install]") : null;
+    if (!btn) return;
+    const skillName = String(btn.getAttribute("data-skill-install") || "").trim();
+    if (!skillName) return;
+    btn.setAttribute("disabled", "true");
+    setFeedback("skillsFeedback", `${t("common.saving")} ${skillName}`);
+    try {
+      await api("/api/openclaw/bridge/skill-install", {
+        method: "POST",
+        body: JSON.stringify({ skill_name: skillName }),
+      });
+      setFeedback("skillsFeedback", t("feedback.openclawSkillInstalled"));
+      toast(`${t("feedback.openclawSkillInstalled")} · ${skillName}`);
+      await refreshSkills();
+      await refreshSocial();
+    } catch (e) {
+      setFeedback("skillsFeedback", e instanceof Error ? e.message : t("feedback.openclawSkillInstallFailed"), "error");
+    } finally {
+      btn.removeAttribute("disabled");
+      await refreshSkills().catch(() => {});
+    }
+  });
+
+  document.querySelectorAll("[data-skills-jump]").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const targetId = String(btn.getAttribute("data-skills-jump") || "").trim();
+      if (!targetId) return;
+      document.getElementById(targetId)?.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+  });
+
   document.getElementById("saveGovernanceBtn").addEventListener("click", async () => {
     setFeedback("socialGovernanceFeedback", t("common.saving"));
     try {

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

@@ -8,6 +8,12 @@ export function createNetworkController({
   toPrettyJson,
   writeUiCache,
 }) {
+  const fallbackQuickConnectDefaults = {
+    signalingUrl: "http://localhost:4510",
+    room: "",
+  };
+  let quickConnectDefaults = { ...fallbackQuickConnectDefaults };
+
   async function refreshNetwork() {
     const [cfg, sts, rtp] = await Promise.all([api("/api/network/config"), api("/api/network/stats"), api("/api/runtime/paths")]);
     const c = cfg.data;
@@ -20,9 +26,31 @@ export function createNetworkController({
     const d = s.adapter_discovery_stats || {};
     const dx = s.adapter_diagnostics_summary || {};
     const ac = s.adapter_config || c.adapter_config || {};
+    quickConnectDefaults = {
+      signalingUrl: String(
+        dx.signaling_url ||
+        c.signaling_url ||
+        c.adapter_extra?.signaling_url ||
+        quickConnectDefaults.signalingUrl ||
+        fallbackQuickConnectDefaults.signalingUrl
+      ),
+      room: String(
+        dx.room ||
+        c.room ||
+        c.adapter_extra?.room ||
+        quickConnectDefaults.room ||
+        fallbackQuickConnectDefaults.room
+      ),
+    };
+    const relayCapable = c.adapter === "relay-preview" || c.adapter === "webrtc-preview";
+    const relayHealth = relayCapable
+      ? (dx.last_error ? t("network.degraded") : t("network.connected"))
+      : "-";
     document.getElementById("heroAdapter").textContent = c.adapter || "-";
-    document.getElementById("heroRelay").textContent = dx.signaling_url || "-";
-    document.getElementById("heroRoom").textContent = dx.room || "-";
+    const heroRelayEl = document.getElementById("heroRelay");
+    const heroRoomEl = document.getElementById("heroRoom");
+    if (heroRelayEl) heroRelayEl.textContent = dx.signaling_url || "-";
+    if (heroRoomEl) heroRoomEl.textContent = dx.room || "-";
 
     document.getElementById("pillAdapter").textContent = `${t("labels.adapter")}: ${c.adapter || "-"}`;
     writeUiCache("silicaclaw_ui_network", {
@@ -54,7 +82,7 @@ export function createNetworkController({
     ].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 = [
       [t("labels.mode"), describeCurrentMode(t, c.mode || "lan")],
-      [t("network.relayHealth"), dx.last_error ? t("network.degraded") : t("network.connected")],
+      [t("network.relayHealth"), relayHealth],
       [t("network.currentRelay"), dx.signaling_url || "-"],
       [t("network.currentRoom"), dx.room || "-"],
       [t("network.lastJoin"), ago(dx.last_join_at)],
@@ -205,6 +233,7 @@ export function createNetworkController({
   }
 
   return {
+    getQuickConnectDefaults: () => ({ ...quickConnectDefaults }),
     refreshDiscovery,
     refreshNetwork,
     refreshPeers,

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

@@ -151,8 +151,10 @@ export function createOverviewController({
     setOverviewMode(heroModeText);
     document.getElementById("heroMode").textContent = heroModeText;
     document.getElementById("heroAdapter").textContent = heroAdapterText;
-    document.getElementById("heroRelay").textContent = heroRelayText;
-    document.getElementById("heroRoom").textContent = heroRoomText;
+    const heroRelayEl = document.getElementById("heroRelay");
+    const heroRoomEl = document.getElementById("heroRoom");
+    if (heroRelayEl) heroRelayEl.textContent = heroRelayText;
+    if (heroRoomEl) heroRoomEl.textContent = heroRoomText;
     document.getElementById("overviewModeHint").textContent = t("overview.modeCurrentSource", {
       mode: describeCurrentMode(t, heroModeText),
       hint: t("overview.modeCacheHint"),

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

@@ -238,6 +238,12 @@ export function createSocialController({
       `${t("social.ownerForwardReady")}: ${ownerDelivery.ready ? t("common.yes") : t("common.no")}`,
     ].join(" · ");
     document.getElementById("socialOwnerDeliveryReason").textContent = ownerDeliveryBody;
+    document.getElementById("socialCapabilityCards").innerHTML = [
+      [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 = [
       [t("social.openclawInstalled"), openclawDetected ? t("common.yes") : t("common.no")],
       [t("social.running"), openclawRunning ? t("common.yes") : t("common.no")],
@@ -384,12 +390,19 @@ export function createSocialController({
 
   function renderSkillCard(skill, options = {}) {
     const capabilities = Array.isArray(skill.capabilities) ? skill.capabilities.slice(0, 6) : [];
+    const updateAvailable = options.updateAvailable === true;
     const statusText = options.statusText || (skill.installed_in_openclaw ? t("common.yes") : t("hints.skillsNotInstalled"));
     const versionText = String(skill.version || "-");
     const bodyText = escapeHtml(String(skill.description || "-"));
-    const installTone = skill.installed_in_openclaw || skill.install_mode === "workspace" || skill.install_mode === "legacy"
-      ? "tag-chip emphasis"
-      : "tag-chip muted";
+    const skillName = String(skill.name || "").trim();
+    const installable = options.installable === true && Boolean(skillName) && (!skill.installed_in_openclaw || updateAvailable);
+    const installedVersionText = escapeHtml(String(options.installedVersion || skill.installed_version || "-"));
+    const bundledVersionText = escapeHtml(String(options.bundledVersion || skill.bundled_version || skill.version || "-"));
+    const installTone = updateAvailable
+      ? "tag-chip warn"
+      : skill.installed_in_openclaw || skill.install_mode === "workspace" || skill.install_mode === "legacy"
+        ? "tag-chip emphasis"
+        : "tag-chip muted";
     const sourceText = escapeHtml(String(skill.source_path || skill.bundled_source_path || skill.installed_path || "-"));
     const locationText = escapeHtml(String(skill.installed_path || skill.manifest_path || "-"));
     return `
@@ -404,9 +417,18 @@ export function createSocialController({
         <div class="skill-card__body">${bodyText}</div>
         <div class="skill-card__tags">
           <span class="${installTone}">${escapeHtml(statusText)}</span>
+          ${updateAvailable ? `<span class="tag-chip warn">${t("labels.skillsUpdateAvailable")}</span>` : ""}
           ${capabilities.map((item) => `<span class="tag-chip">${escapeHtml(String(item))}</span>`).join("")}
         </div>
         <div class="skill-card__meta">
+          <div class="skill-card__meta-item">
+            <div class="skill-card__meta-label">${t("labels.skillsInstalledVersion")}</div>
+            <div class="skill-card__meta-value mono">${installedVersionText}</div>
+          </div>
+          <div class="skill-card__meta-item">
+            <div class="skill-card__meta-label">${t("labels.skillsBundledVersion")}</div>
+            <div class="skill-card__meta-value mono">${bundledVersionText}</div>
+          </div>
           <div class="skill-card__meta-item">
             <div class="skill-card__meta-label">${t("labels.skillsSource")}</div>
             <div class="skill-card__meta-value mono">${sourceText}</div>
@@ -416,6 +438,50 @@ export function createSocialController({
             <div class="skill-card__meta-value mono">${locationText}</div>
           </div>
         </div>
+        ${installable ? `
+          <div class="actions">
+            <button class="secondary skill-install-btn" type="button" data-skill-install="${escapeHtml(skillName)}">${updateAvailable ? t("actions.updateThisSkill") : t("actions.installThisSkill")}</button>
+          </div>
+        ` : ""}
+      </div>
+    `;
+  }
+
+  function setSkillActionCopy({ title, body, state }) {
+    document.getElementById("skillsActionTitle").textContent = title;
+    document.getElementById("skillsActionBody").textContent = body;
+    document.getElementById("skillsActionState").textContent = state;
+  }
+
+  function renderDialogueCard(skill) {
+    const sections = Array.isArray(skill.owner_dialogue_sections_zh) ? skill.owner_dialogue_sections_zh : [];
+    const examples = Array.isArray(skill.owner_dialogue_examples_zh) ? skill.owner_dialogue_examples_zh : [];
+    return `
+      <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__title">${escapeHtml(t("labels.skillsDialogueExamples"))}</div>
+          </div>
+          <div class="skill-card__version mono">${escapeHtml(skill.version || "-")}</div>
+        </div>
+        <div class="skill-card__body">${escapeHtml(skill.description || "-")}</div>
+        <div class="skills-dialogue-list">
+          ${sections.length
+            ? sections.map((section) => `
+                <div class="skills-dialogue-group">
+                  <div class="skills-dialogue-group__title">${escapeHtml(String(section.title || "-"))}</div>
+                  <div class="skills-dialogue-group__items">
+                    ${Array.isArray(section.items)
+                      ? section.items.map((item) => `<div class="skills-dialogue-item">"${escapeHtml(String(item))}"</div>`).join("")
+                      : ""}
+                  </div>
+                </div>
+              `).join("")
+            : examples.length
+              ? examples.map((item) => `<div class="skills-dialogue-item">"${escapeHtml(String(item))}"</div>`).join("")
+            : `<div class="skills-empty">${t("hints.skillsNoDialogueExamples")}</div>`}
+        </div>
       </div>
     `;
   }
@@ -427,9 +493,29 @@ export function createSocialController({
     const openclaw = payload.openclaw || {};
     const summary = payload.summary || {};
     const installAction = payload.install_action || {};
-    const featured = bundled[0] || null;
+    const broadcastSkill = bundled.find((item) => item.name === "silicaclaw-broadcast") || bundled[0] || null;
+    const ownerPushSkill = bundled.find((item) => item.name === "silicaclaw-owner-push") || null;
+    const featuredSkills = [broadcastSkill, ownerPushSkill].filter(Boolean);
     const openclawDetected = !!openclaw.detected;
     const openclawRunning = !!openclaw.running;
+    const allFeaturedInstalled = featuredSkills.length > 0 && featuredSkills.every((item) => item.installed_in_openclaw);
+    const installedFeaturedCount = featuredSkills.filter((item) => item.installed_in_openclaw).length;
+    const bundledUpdateCount = bundled.filter((item) => item.update_available).length;
+    const bundledSorted = [...bundled].sort((left, right) => {
+      const featuredLeft = featuredSkills.some((item) => item?.name === left.name) ? 1 : 0;
+      const featuredRight = featuredSkills.some((item) => item?.name === right.name) ? 1 : 0;
+      if (featuredLeft !== featuredRight) return featuredRight - featuredLeft;
+      const updateLeft = left.update_available ? 1 : 0;
+      const updateRight = right.update_available ? 1 : 0;
+      if (updateLeft !== updateRight) return updateRight - updateLeft;
+      const installLeft = left.installed_in_openclaw ? 1 : 0;
+      const installRight = right.installed_in_openclaw ? 1 : 0;
+      if (installLeft !== installRight) return installLeft - installRight;
+      return String(left.display_name || left.name || "").localeCompare(String(right.display_name || right.name || ""));
+    });
+    const installedSorted = [...installed].sort((left, right) =>
+      String(left.display_name || left.name || "").localeCompare(String(right.display_name || right.name || ""))
+    );
 
     document.getElementById("skillsBannerRuntimeValue").textContent = t("hints.skillsRuntimeSummary", {
       runtime: openclawRunning ? t("common.yes") : t("common.no"),
@@ -437,51 +523,114 @@ export function createSocialController({
       installed: String(summary.installed_count || 0),
     });
 
+    if (!openclawDetected) {
+      setSkillActionCopy({
+        title: t("hints.skillsActionMissingTitle"),
+        body: t("hints.skillsActionMissingBody"),
+        state: t("labels.skillsStateAttention"),
+      });
+    } else if (!openclawRunning) {
+      setSkillActionCopy({
+        title: t("hints.skillsActionStoppedTitle"),
+        body: t("hints.skillsActionStoppedBody"),
+        state: t("labels.skillsStateAttention"),
+      });
+    } else if (bundledUpdateCount > 0) {
+      setSkillActionCopy({
+        title: t("hints.skillsActionUpdateTitle", { count: String(bundledUpdateCount) }),
+        body: t("hints.skillsActionUpdateBody", { count: String(bundledUpdateCount) }),
+        state: t("labels.skillsStateAttention"),
+      });
+    } else if (allFeaturedInstalled) {
+      setSkillActionCopy({
+        title: t("hints.skillsActionCompleteTitle"),
+        body: t("hints.skillsActionCompleteBody"),
+        state: t("labels.skillsStateComplete"),
+      });
+    } else if (installedFeaturedCount > 0) {
+      setSkillActionCopy({
+        title: t("hints.skillsActionPartialTitle"),
+        body: t("hints.skillsActionPartialBody"),
+        state: t("labels.skillsStateInProgress"),
+      });
+    } else {
+      setSkillActionCopy({
+        title: t("hints.skillsActionInstallTitle"),
+        body: t("hints.skillsActionInstallBody"),
+        state: t("labels.skillsStateReady"),
+      });
+    }
+
     document.getElementById("skillsSummaryCards").innerHTML = [
       [t("labels.skillsBundled"), String(summary.bundled_count || 0)],
       [t("labels.skillsInstalled"), String(summary.installed_count || 0)],
-      [t("social.openclawInstalled"), openclawDetected ? t("common.yes") : t("common.no")],
-      [t("social.running"), openclawRunning ? t("common.yes") : t("common.no")],
-    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${escapeHtml(v)}</div></div>`).join("");
+      [t("labels.skillsUpdates"), String(summary.update_available_count || 0)],
+      [t("labels.skillsBroadcastLearning"), broadcastSkill?.installed_in_openclaw ? t("common.yes") : t("common.no")],
+      [t("labels.skillsAutoPush"), ownerPushSkill?.installed_in_openclaw ? t("common.yes") : t("common.no")],
+    ].map(([k, v]) => `<div class="skills-summary-card"><div class="label">${k}</div><div class="value">${escapeHtml(v)}</div></div>`).join("");
+
+    document.getElementById("skillsFeaturedCount").textContent = `${featuredSkills.length}`;
+    document.getElementById("skillsBundledCount").textContent = `${bundled.length}`;
+    document.getElementById("skillsInstalledCount").textContent = `${installed.length}`;
+    document.getElementById("skillsDialogueCount").textContent = `${featuredSkills.length}`;
 
-    document.getElementById("skillsFeaturedSpotlight").innerHTML = featured
-      ? `
+    document.getElementById("skillsFeaturedSpotlights").innerHTML = featuredSkills.length
+      ? featuredSkills.map((skill) => `
         <div class="skills-spotlight">
-          <div class="skill-card__eyebrow">${escapeHtml(openclaw.gateway_url || "OpenClaw skill")}</div>
-          <div class="skills-spotlight__title">${escapeHtml(featured.display_name || featured.name)}</div>
-          <div class="skills-spotlight__body">${escapeHtml(featured.description || "-")}</div>
+          <div class="skill-card__eyebrow">${escapeHtml(skill.name === "silicaclaw-owner-push" ? t("labels.skillsAutoPush") : t("labels.skillsBroadcastLearning"))}</div>
+          <div class="skills-spotlight__title">${escapeHtml(skill.display_name || skill.name)}</div>
+          <div class="skills-spotlight__body">${escapeHtml(skill.description || "-")}</div>
           <div class="skill-card__tags">
-            <span class="${featured.installed_in_openclaw ? "tag-chip emphasis" : "tag-chip muted"}">${featured.installed_in_openclaw ? t("common.yes") : t("hints.skillsNotInstalled")}</span>
-            ${(featured.capabilities || []).slice(0, 8).map((item) => `<span class="tag-chip">${escapeHtml(String(item))}</span>`).join("")}
+            <span class="${skill.update_available ? "tag-chip warn" : skill.installed_in_openclaw ? "tag-chip emphasis" : "tag-chip muted"}">${skill.update_available ? t("labels.skillsUpdateAvailable") : skill.installed_in_openclaw ? `${t("labels.skillsStatus")}: ${t("common.yes")}` : t("hints.skillsNotInstalled")}</span>
+            ${(skill.capabilities || []).slice(0, 8).map((item) => `<span class="tag-chip">${escapeHtml(String(item))}</span>`).join("")}
           </div>
         </div>
-      `
+      `).join("")
       : `<div class="skills-empty">${t("hints.skillsNoBundled")}</div>`;
 
-    document.getElementById("skillsBundledGrid").innerHTML = bundled.length
-      ? bundled.map((skill) => renderSkillCard(skill, {
+    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.installed_in_openclaw ? `${t("labels.skillsStatus")}: ${t("common.yes")}` : t("hints.skillsNotInstalled"),
+          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>`;
 
-    document.getElementById("skillsInstalledGrid").innerHTML = installed.length
-      ? installed.map((skill) => renderSkillCard(skill, {
+    document.getElementById("skillsInstalledGrid").innerHTML = installedSorted.length
+      ? installedSorted.map((skill) => renderSkillCard(skill, {
           eyebrow: skill.install_mode || "installed",
-          statusText: `${t("labels.skillsStatus")}: ${escapeHtml(String(skill.install_mode || "-"))}`,
+          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>`;
+
     const installBtn = document.getElementById("skillsInstallBtn");
     installBtn.textContent = !openclawDetected
       ? t("actions.openclawNotInstalled")
       : !openclawRunning
         ? t("actions.openclawNotRunning")
-        : featured?.installed_in_openclaw
-          ? t("actions.openclawSkillLearned")
-          : t("actions.learnOpenClawSkill");
-    installBtn.disabled = !openclawDetected || !openclawRunning || !!featured?.installed_in_openclaw;
-    document.getElementById("skillsFeedback").textContent = featured?.installed_in_openclaw
+        : bundledUpdateCount > 0
+          ? t("actions.updateSilicaClawSkills")
+        : allFeaturedInstalled
+          ? t("actions.silicaClawSkillsInstalled")
+          : t("actions.installSilicaClawSkills");
+    installBtn.disabled = !openclawDetected || !openclawRunning || (allFeaturedInstalled && bundledUpdateCount === 0);
+    document.getElementById("skillsFeedback").textContent = allFeaturedInstalled && bundledUpdateCount === 0
       ? t("feedback.openclawSkillInstalled")
       : installAction.recommended_command || t("common.ready");
   }