@silicaclaw/cli 2026.3.19-6 → 2026.3.19-7

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

@@ -0,0 +1,144 @@
+export function createShellController({ t, resolveThemeMode }) {
+  function peerStatusText(status) {
+    if (status === "online") return t("overview.online");
+    if (status === "offline") return t("overview.offline");
+    if (status === "stale") return t("network.stale");
+    return status || "-";
+  }
+
+  function readUiCache(key) {
+    try {
+      const raw = localStorage.getItem(key);
+      return raw ? JSON.parse(raw) : null;
+    } catch {
+      return null;
+    }
+  }
+
+  function writeUiCache(key, value) {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch {
+      // ignore cache write failures
+    }
+  }
+
+  function hydrateCachedShell() {
+    const overview = readUiCache("silicaclaw_ui_overview");
+    if (overview) {
+      if (overview.overviewCardsHtml) document.getElementById("overviewCards").innerHTML = overview.overviewCardsHtml;
+      if (overview.snapshotText) document.getElementById("snapshot").innerHTML = overview.snapshotText;
+      if (overview.heroModeText) document.getElementById("heroMode").textContent = overview.heroModeText;
+      if (overview.pillBroadcastText) document.getElementById("pillBroadcast").textContent = overview.pillBroadcastText;
+      if (overview.pillBroadcastClassName) document.getElementById("pillBroadcast").className = overview.pillBroadcastClassName;
+      if (overview.agentsCountHintText) document.getElementById("agentsCountHint").textContent = overview.agentsCountHintText;
+      if (overview.agentsWrapHtml) document.getElementById("agentsWrap").innerHTML = overview.agentsWrapHtml;
+    }
+    const network = readUiCache("silicaclaw_ui_network");
+    if (network) {
+      if (network.heroAdapterText) document.getElementById("heroAdapter").textContent = network.heroAdapterText;
+      if (network.heroRelayText) document.getElementById("heroRelay").textContent = network.heroRelayText;
+      if (network.heroRoomText) document.getElementById("heroRoom").textContent = network.heroRoomText;
+      if (network.pillAdapterText) document.getElementById("pillAdapter").textContent = network.pillAdapterText;
+    }
+    const social = readUiCache("silicaclaw_ui_social");
+    if (social) {
+      if (social.integrationStatusText) document.getElementById("integrationStatusBar").textContent = social.integrationStatusText;
+      if (social.integrationStatusClassName) document.getElementById("integrationStatusBar").className = social.integrationStatusClassName;
+      if (social.socialStatusLineText) document.getElementById("socialStatusLine").textContent = social.socialStatusLineText;
+      if (social.socialStatusSublineText) document.getElementById("socialStatusSubline").textContent = social.socialStatusSublineText;
+    }
+  }
+
+  function toast(msg) {
+    const toastEl = document.getElementById("toast");
+    toastEl.textContent = msg;
+    toastEl.classList.add("show");
+    setTimeout(() => toastEl.classList.remove("show"), 2000);
+  }
+
+  function flashButton(btn, doneText = "Done") {
+    if (!btn) return;
+    const oldText = btn.textContent || "";
+    btn.disabled = true;
+    btn.textContent = doneText;
+    setTimeout(() => {
+      btn.textContent = oldText;
+      btn.disabled = false;
+    }, 900);
+  }
+
+  function setFeedback(id, text, level = "info") {
+    const el = document.getElementById(id);
+    el.textContent = text;
+    el.style.color = level === "error" ? "#ff6b81" : level === "warn" ? "#ffb454" : "#9aa7c3";
+  }
+
+  function setProfileNextStepVisible(show) {
+    const banner = document.getElementById("profileNextStepBanner");
+    banner.classList.toggle("show", Boolean(show));
+  }
+
+  function renderSocialModeHint(selected, effective, restartRequired, pending = false) {
+    const restartText = restartRequired ? t("hints.restartRequiredHint") : t("hints.restartNotRequiredHint");
+    const pendingText = pending ? ` ${t("hints.pendingRuntimeModeHint")}` : "";
+    document.getElementById("socialModeHint").textContent = `${t("hints.socialModeHint", {
+      selected,
+      effective,
+      restart: restartText,
+    })}${pendingText}`;
+  }
+
+  function setSocialModePendingState(pending) {
+    const applyBtn = document.getElementById("socialModeApplyBtn");
+    applyBtn.classList.toggle("button-pending", Boolean(pending));
+  }
+
+  function pulseOverviewBroadcastStep() {
+    const step = document.getElementById("overviewStepBroadcast");
+    const body = document.getElementById("overviewStepBroadcastBody");
+    const status = document.getElementById("overviewStepBroadcastStatus");
+    if (!step || !body || !status) return;
+    const previousBody = body.textContent;
+    const previousStatus = status.textContent;
+    step.classList.add("is-done", "is-highlighted");
+    status.textContent = t("overview.stepDone");
+    body.textContent = t("overview.stepBroadcastSuccess");
+    setTimeout(() => {
+      step.classList.remove("is-highlighted");
+      if (body.textContent === t("overview.stepBroadcastSuccess")) {
+        body.textContent = previousBody;
+      }
+      if (status.textContent === t("overview.stepDone")) {
+        status.textContent = previousStatus;
+      }
+    }, 2200);
+  }
+
+  function applyTheme(mode) {
+    const raw = mode === "system" ? "system" : mode === "light" ? "light" : "dark";
+    const next = resolveThemeMode(raw);
+    document.documentElement.setAttribute("data-theme-mode", next);
+    localStorage.setItem("silicaclaw_theme_mode", raw);
+    document.querySelectorAll("[data-theme-choice]").forEach((btn) => {
+      btn.classList.toggle("active", btn.dataset.themeChoice === raw);
+      btn.classList.toggle("topbar-theme-mode__btn--active", btn.dataset.themeChoice === raw);
+      btn.setAttribute("aria-checked", btn.dataset.themeChoice === raw ? "true" : "false");
+      btn.setAttribute("aria-pressed", btn.dataset.themeChoice === raw ? "true" : "false");
+    });
+  }
+
+  return {
+    applyTheme,
+    flashButton,
+    hydrateCachedShell,
+    peerStatusText,
+    pulseOverviewBroadcastStep,
+    renderSocialModeHint,
+    setFeedback,
+    setProfileNextStepVisible,
+    setSocialModePendingState,
+    toast,
+    writeUiCache,
+  };
+}

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

@@ -0,0 +1,485 @@
+export function createSocialController({
+  api,
+  escapeHtml,
+  formatMessageBody,
+  getActiveTab,
+  getLogLevelFilter,
+  getLogsCache,
+  getSocialMessageFilter,
+  getSocialMessageGovernance,
+  getSocialMessagesCache,
+  getSocialModeDirty,
+  getSocialModePending,
+  getSocialTemplate,
+  getVisibleRemotePublicCount,
+  renderSocialModeHint,
+  setLogLevelFilter,
+  setLogsCache,
+  setSocialMessageGovernance,
+  setSocialMessagesCache,
+  setSocialModePendingState,
+  setSocialTemplate,
+  shortId,
+  t,
+  toPrettyJson,
+  writeUiCache,
+}) {
+  function renderSocialMessages() {
+    const listEl = document.getElementById("socialMessageList");
+    const metaEl = document.getElementById("socialMessageMeta");
+    const hintEl = document.getElementById("socialMessageHint");
+    const governance = getSocialMessageGovernance();
+    const socialMessagesCache = getSocialMessagesCache();
+    const socialMessageFilter = getSocialMessageFilter();
+    const governanceHint = governance
+      ? `${t("overview.messageHint")} ${t("overview.governanceSummary", {
+          max: String(governance.send_limit?.max || "-"),
+          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>`;
+      return;
+    }
+
+    const filteredMessages = socialMessagesCache.filter((item) => {
+      if (socialMessageFilter === "self") return Boolean(item.is_self);
+      if (socialMessageFilter === "remote") return !item.is_self;
+      return true;
+    });
+
+    const baseMeta = socialMessageFilter === "all"
+      ? t("overview.cachedMessages", { count: String(socialMessagesCache.length) })
+      : t("overview.filteredMessages", { count: String(filteredMessages.length) });
+    const governanceMeta = governance
+      ? ` · ${t("overview.governanceSummary", {
+          max: String(governance.send_limit?.max || "-"),
+          seconds: String(Math.floor((governance.send_limit?.window_ms || 60000) / 1000)),
+        })}`
+      : "";
+    metaEl.textContent = `${baseMeta}${governanceMeta}`;
+
+    if (!filteredMessages.length) {
+      listEl.innerHTML = `<div class="empty-state">${t("overview.noMessagesEmpty")}</div>`;
+      return;
+    }
+
+    listEl.innerHTML = filteredMessages
+      .map((item) => {
+        const selfStatusChips = item.is_self
+          ? `
+              <span class="tag-chip" style="margin-left:8px;">${t("overview.selfMessagePublished")}</span>
+              <span class="tag-chip" style="margin-left:8px;">${t("overview.selfMessageConfirmed")}</span>
+              <span class="tag-chip" style="margin-left:8px;">${
+                item.remote_observation_count > 0
+                  ? t("overview.selfMessageRemoteObserved", { count: String(item.remote_observation_count) })
+                  : t("overview.selfMessageAwaitingObservation")
+              }</span>
+              <span class="tag-chip" style="margin-left:8px;">${t("overview.selfMessageRemoteVisible", { count: String(getVisibleRemotePublicCount()) })}</span>
+            `
+          : "";
+        const observationChip = item.remote_observation_count > 0
+          ? `<span class="tag-chip" style="margin-left:8px;">${t("overview.messageObservedBy", { count: String(item.remote_observation_count) })}</span>`
+          : "";
+        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>
+              <div class="mono" style="color:#90a2c3;">${new Date(item.created_at).toLocaleString()}</div>
+            </div>
+            <div style="margin-top:8px; line-height:1.6;">${formatMessageBody(item.body || "")}</div>
+          </div>
+        `;
+      })
+      .join("");
+  }
+
+  async function refreshMessages() {
+    const result = await api("/api/messages?limit=50");
+    setSocialMessagesCache(Array.isArray(result.data?.items) ? result.data.items : []);
+    setSocialMessageGovernance(result.data?.governance || null);
+    renderSocialMessages();
+  }
+
+  async function refreshSocial() {
+    const [socialRes, summaryRes, statusRes, networkCfgRes, governanceRes] = await Promise.all([
+      api("/api/social/config"),
+      api("/api/social/integration-summary"),
+      api("/api/integration/status"),
+      api("/api/network/config"),
+      api("/api/social/message-governance"),
+    ]);
+    const bridgeRes = await api("/api/openclaw/bridge");
+    const social = socialRes.data || {};
+    const summary = summaryRes.data || {};
+    const status = statusRes.data || {};
+    const networkCfg = networkCfgRes.data || {};
+    const bridge = bridgeRes.data || {};
+    const governance = governanceRes.data || {};
+    const runtime = social.runtime || {};
+    const config = social.social_config || {};
+    const network = config.network || {};
+    const runtimeNetwork = runtime.resolved_network || {};
+    const effectiveAdapterExtra = networkCfg.adapter_extra || {};
+    const effectiveMode = networkCfg.mode || status.network_mode || summary.current_network_mode || runtimeNetwork.mode || network.mode || "-";
+    const selectedMode = network.mode || runtimeNetwork.mode || status.network_mode || effectiveMode || "-";
+    const effectiveAdapter = networkCfg.adapter || runtimeNetwork.adapter || summary.current_adapter || "-";
+    const effectiveNamespace = networkCfg.namespace || runtimeNetwork.namespace || summary.current_namespace || "-";
+    const effectiveRoom = effectiveAdapterExtra.room || runtimeNetwork.room || network.room || "-";
+    const effectiveRelay = effectiveAdapterExtra.signaling_url || runtimeNetwork.signaling_url || network.signaling_url || "-";
+    const discoverable = status.discoverable === true;
+    const mode = effectiveMode;
+    const summaryLine = status.status_line || summary.summary_line || `${summary.connected ? t("social.connectedToSilicaClaw") : t("social.notConnectedToSilicaClaw")} · ${discoverable ? t("social.discoverableInCurrentMode") : t("social.notDiscoverableInCurrentMode")} · ${t("social.usingMode", { mode })}`;
+    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;
+    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", {
+      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"}`;
+    writeUiCache("silicaclaw_ui_social", {
+      integrationStatusText: bar.textContent,
+      integrationStatusClassName: bar.className,
+      socialStatusLineText: summaryLine,
+      socialStatusSublineText: namespaceText,
+    });
+    const reasons = [];
+    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");
+    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 = [
+      [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")],
+      [t("social.publicDiscovery"), status.public_enabled ? t("common.on") : t("common.off")],
+      [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("");
+
+    document.getElementById("socialIntegrationCards").innerHTML = [
+      [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")],
+      [t("social.agentId"), shortId(status.agent_id || "")],
+      [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("");
+
+    const skillLearning = bridge.skill_learning || {};
+    const ownerDelivery = bridge.owner_delivery || {};
+    const installAction = skillLearning.install_action || {};
+    const openclawRunning = !!bridge.openclaw_runtime?.running;
+    const openclawDetected = !!bridge.openclaw_installation?.detected || openclawRunning || !!bridge.openclaw_runtime?.gateway_reachable;
+    const skillInstalled = !!skillLearning.installed;
+    const installedSkillPath = skillLearning.installed_skill_path || "-";
+    let ownerDeliveryHeadline = t("feedback.openclawRoleBroadcasterOnly");
+    let ownerDeliveryBody = ownerDelivery.reason || "-";
+    let ownerDeliveryTone = "warn";
+    if (ownerDelivery.ready) {
+      ownerDeliveryHeadline = t("feedback.openclawRoleOwnerReady");
+      ownerDeliveryBody = t("hints.ownerDeliveryReadyBody");
+      ownerDeliveryTone = "info";
+    } else if (ownerDelivery.bridge_messages_readable) {
+      if (ownerDelivery.forward_command_configured) {
+        ownerDeliveryHeadline = t("feedback.openclawRoleNeedsOwnerRoute");
+        ownerDeliveryBody = t("hints.ownerDeliveryNeedsRouteBody");
+      } else {
+        ownerDeliveryHeadline = t("feedback.openclawRoleLearningOnly");
+        ownerDeliveryBody = t("hints.ownerDeliveryLearningBody");
+      }
+    } else if (!openclawRunning) {
+      ownerDeliveryHeadline = t("feedback.openclawRoleNotRunning");
+      ownerDeliveryBody = ownerDelivery.reason || "-";
+    }
+    document.getElementById("socialOwnerDeliveryStatus").className = `feedback ${ownerDeliveryTone}`;
+    document.getElementById("socialOwnerDeliveryStatus").textContent = ownerDeliveryHeadline;
+    document.getElementById("socialOwnerDeliverySubline").textContent = [
+      `${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("openclawSkillCards").innerHTML = [
+      [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")],
+      [t("social.broadcastReadable"), ownerDelivery.bridge_messages_readable ? t("common.yes") : t("common.no")],
+      [t("social.ownerForwardReady"), ownerDelivery.ready ? t("common.yes") : t("common.no")],
+      [t("social.ownerForwardCommand"), ownerDelivery.forward_command_configured ? t("common.yes") : t("common.no")],
+      [t("social.openclawDetectionMode"), bridge.openclaw_runtime?.detection_mode || "-"],
+      [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
+      ? `${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
+      ? t("feedback.openclawRoleBroadcasterOnly")
+      : !openclawRunning
+        ? t("feedback.openclawRoleNotRunning")
+        : !skillInstalled
+          ? 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");
+    const skillInstallBtn = document.getElementById("openclawSkillInstallBtn");
+    skillInstallBtn.textContent = !openclawDetected
+      ? t("actions.openclawNotInstalled")
+      : !openclawRunning
+        ? t("actions.openclawNotRunning")
+        : skillInstalled
+          ? t("actions.openclawSkillLearned")
+          : t("actions.learnOpenClawSkill");
+    skillInstallBtn.disabled = !openclawDetected || !openclawRunning || skillInstalled;
+
+    const policy = governance.policy || {};
+    const blockedAgentIds = Array.isArray(policy.blocked_agent_ids) ? policy.blocked_agent_ids : [];
+    const blockedTerms = Array.isArray(policy.blocked_terms) ? policy.blocked_terms : [];
+    document.getElementById("governanceSendLimitInput").value = String(policy.send_limit?.max ?? 5);
+    document.getElementById("governanceSendWindowInput").value = String(Math.floor((policy.send_limit?.window_ms ?? 60000) / 1000));
+    document.getElementById("governanceReceiveLimitInput").value = String(policy.receive_limit?.max ?? 8);
+    document.getElementById("governanceReceiveWindowInput").value = String(Math.floor((policy.receive_limit?.window_ms ?? 60000) / 1000));
+    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 = [
+      [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("");
+
+    const moderationEvents = Array.isArray(governance.recent_events) ? governance.recent_events : [];
+    document.getElementById("socialModerationList").innerHTML = 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("");
+
+    document.getElementById("socialAdvancedCards").innerHTML = [
+      [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({
+      effective_runtime: {
+        mode: effectiveMode,
+        adapter: effectiveAdapter,
+        namespace: effectiveNamespace,
+        relay: effectiveRelay,
+        room: effectiveRoom,
+        restart_required: social.network_requires_restart,
+      },
+      openclaw_bridge: {
+        enabled: bridge.enabled,
+        connected_to_silicaclaw: bridge.connected_to_silicaclaw,
+        public_enabled: bridge.public_enabled,
+        message_broadcast_enabled: bridge.message_broadcast_enabled,
+        openclaw_runtime: bridge.openclaw_runtime || {},
+        skill_learning: bridge.skill_learning || {},
+        endpoints: bridge.endpoints || {},
+      },
+      source: {
+        social_md_found: summary.social_md_found,
+        social_md_source_path: summary.social_md_source_path,
+      },
+    });
+
+    document.getElementById("socialSourceWrap").textContent = toPrettyJson({
+      found: social.found,
+      source_path: social.source_path,
+      parse_error: social.parse_error,
+    });
+    document.getElementById("socialRawWrap").textContent = toPrettyJson({
+      raw_frontmatter: social.raw_frontmatter || null,
+    });
+    document.getElementById("socialRuntimeWrap").textContent = toPrettyJson(runtime);
+  }
+
+  async function exportSocialTemplate() {
+    const payload = (await api("/api/social/export-template")).data || {};
+    setSocialTemplate(String(payload.content || ""));
+    document.getElementById("socialTemplateWrap").textContent = getSocialTemplate() || "-";
+    return payload;
+  }
+
+  function renderLogs() {
+    const logsCache = getLogsCache();
+    const logLevelFilter = getLogLevelFilter();
+    const el = document.getElementById("logList");
+    if (!logsCache.length) {
+      el.innerHTML = `<div class="empty-state">${t("network.noLogsYet")}</div>`;
+      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>`;
+      return;
+    }
+    el.innerHTML = 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("");
+  }
+
+  async function refreshLogs() {
+    setLogsCache((await api("/api/logs")).data || []);
+    renderLogs();
+  }
+
+  function renderSkillCard(skill, options = {}) {
+    const capabilities = Array.isArray(skill.capabilities) ? skill.capabilities.slice(0, 6) : [];
+    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 sourceText = escapeHtml(String(skill.source_path || skill.bundled_source_path || skill.installed_path || "-"));
+    const locationText = escapeHtml(String(skill.installed_path || skill.manifest_path || "-"));
+    return `
+      <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>
+          <div class="skill-card__version mono">${escapeHtml(versionText)}</div>
+        </div>
+        <div class="skill-card__body">${bodyText}</div>
+        <div class="skill-card__tags">
+          <span class="${installTone}">${escapeHtml(statusText)}</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.skillsSource")}</div>
+            <div class="skill-card__meta-value mono">${sourceText}</div>
+          </div>
+          <div class="skill-card__meta-item">
+            <div class="skill-card__meta-label">${t("labels.skillsLocation")}</div>
+            <div class="skill-card__meta-value mono">${locationText}</div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  async function refreshSkills() {
+    const payload = (await api("/api/skills")).data || {};
+    const bundled = Array.isArray(payload.bundled_skills) ? payload.bundled_skills : [];
+    const installed = Array.isArray(payload.installed_skills) ? payload.installed_skills : [];
+    const openclaw = payload.openclaw || {};
+    const summary = payload.summary || {};
+    const installAction = payload.install_action || {};
+    const featured = bundled[0] || null;
+    const openclawDetected = !!openclaw.detected;
+    const openclawRunning = !!openclaw.running;
+
+    document.getElementById("skillsBannerRuntimeValue").textContent = t("hints.skillsRuntimeSummary", {
+      runtime: openclawRunning ? t("common.yes") : t("common.no"),
+      bundled: String(summary.bundled_count || 0),
+      installed: String(summary.installed_count || 0),
+    });
+
+    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("");
+
+    document.getElementById("skillsFeaturedSpotlight").innerHTML = featured
+      ? `
+        <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__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("")}
+          </div>
+        </div>
+      `
+      : `<div class="skills-empty">${t("hints.skillsNoBundled")}</div>`;
+
+    document.getElementById("skillsBundledGrid").innerHTML = bundled.length
+      ? bundled.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"),
+        })).join("")
+      : `<div class="skills-empty">${t("hints.skillsNoBundled")}</div>`;
+
+    document.getElementById("skillsInstalledGrid").innerHTML = installed.length
+      ? installed.map((skill) => renderSkillCard(skill, {
+          eyebrow: skill.install_mode || "installed",
+          statusText: `${t("labels.skillsStatus")}: ${escapeHtml(String(skill.install_mode || "-"))}`,
+        })).join("")
+      : `<div class="skills-empty">${t("hints.skillsNoInstalled")}</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
+      ? t("feedback.openclawSkillInstalled")
+      : installAction.recommended_command || t("common.ready");
+  }
+
+  return {
+    exportSocialTemplate,
+    refreshLogs,
+    refreshMessages,
+    refreshSkills,
+    refreshSocial,
+    renderLogs,
+    renderSocialMessages,
+    setLogLevelFilter,
+  };
+}