@silicaclaw/cli 2026.3.19-6 → 2026.3.19-7

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

@@ -0,0 +1,422 @@
+export function bindAppEvents({
+  api,
+  applyTheme,
+  exportSocialTemplate,
+  flashButton,
+  messageSendReasonText,
+  parseCsv,
+  profileController,
+  pulseOverviewBroadcastStep,
+  refreshAll,
+  refreshLogs,
+  refreshMessages,
+  refreshNetwork,
+  refreshOverview,
+  refreshSkills,
+  refreshSocial,
+  renderLogs,
+  renderSocialMessages,
+  renderSocialModeHint,
+  setFeedback,
+  setOnlyShowOnline,
+  setProfileNextStepVisible,
+  setSocialMessageFilter,
+  setSocialModeDirty,
+  setSocialModePending,
+  setSocialModePendingState,
+  shouldWarnBeforeUnload,
+  socialController,
+  switchTab,
+  t,
+  toast,
+  getSocialTemplate,
+  setAgentsPage,
+  getSocialMessagesCache,
+  toPrettyJson,
+}) {
+  document.querySelectorAll(".tab").forEach((btn) => {
+    btn.addEventListener("click", () => switchTab(btn.dataset.tab));
+  });
+
+  document.getElementById("sidebarToggleBtn").addEventListener("click", () => {
+    const shell = document.getElementById("appShell");
+    const next = !shell.classList.contains("nav-collapsed");
+    shell.classList.toggle("nav-collapsed", next);
+    const btn = document.getElementById("sidebarToggleBtn");
+    const icon = btn.querySelector(".nav-collapse-toggle__icon");
+    btn.classList.toggle("active", next);
+    btn.title = next ? t("labels.expandSidebar") : t("labels.collapseSidebar");
+    btn.setAttribute("aria-label", btn.title);
+    if (icon) {
+      icon.innerHTML = next
+        ? `
+          <svg viewBox="0 0 24 24">
+            <rect x="3" y="3" width="18" height="18" rx="2"></rect>
+            <path d="M9 3v18"></path>
+            <path d="M14 10l3 2-3 2"></path>
+          </svg>
+        `
+        : `
+          <svg viewBox="0 0 24 24">
+            <rect x="3" y="3" width="18" height="18" rx="2"></rect>
+            <path d="M9 3v18"></path>
+            <path d="M16 10l-3 2 3 2"></path>
+          </svg>
+        `;
+    }
+  });
+
+  document.getElementById("focusModeBtn").addEventListener("click", () => {
+    const shell = document.getElementById("appShell");
+    const next = !shell.classList.contains("focus-mode");
+    shell.classList.toggle("focus-mode", next);
+    const btn = document.getElementById("focusModeBtn");
+    btn.classList.toggle("active", next);
+    btn.title = next ? t("labels.exitFocusMode") : t("labels.toggleFocusMode");
+    btn.setAttribute("aria-label", btn.title);
+  });
+
+  document.querySelectorAll("[data-theme-choice]").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      applyTheme(btn.dataset.themeChoice || "dark");
+    });
+  });
+
+  document.getElementById("overviewStepProfileBtn").addEventListener("click", () => switchTab("profile"));
+  document.getElementById("overviewStepPublicBtn").addEventListener("click", () => switchTab("profile"));
+  document.getElementById("overviewStepBroadcastBtn").addEventListener("click", () => {
+    document.getElementById("broadcastNowBtn").click();
+  });
+  document.getElementById("homeOpenAgentBtn").addEventListener("click", () => switchTab("agent"));
+  document.getElementById("homeOpenSocialBtn").addEventListener("click", () => switchTab("social"));
+  document.getElementById("homeOpenNetworkBtn").addEventListener("click", () => switchTab("network"));
+  document.getElementById("homeBroadcastNowBtn").addEventListener("click", () => {
+    document.getElementById("broadcastNowBtn").click();
+  });
+  document.getElementById("profileNextStepBtn").addEventListener("click", () => {
+    setProfileNextStepVisible(false);
+    switchTab("overview");
+  });
+  document.getElementById("profileNextStepDismissBtn").addEventListener("click", () => {
+    setProfileNextStepVisible(false);
+  });
+
+  document.getElementById("socialMessageRefreshBtn").addEventListener("click", async () => {
+    try {
+      await refreshMessages();
+      setFeedback("socialMessageFeedback", t("feedback.messageInboxRefreshed"));
+      toast(t("feedback.messageInboxRefreshed"));
+    } catch (e) {
+      setFeedback("socialMessageFeedback", e instanceof Error ? e.message : t("feedback.messageRefreshFailed"), "error");
+    }
+  });
+
+  document.getElementById("socialMessageFilterSelect").addEventListener("change", (event) => {
+    setSocialMessageFilter(String(event.target?.value || "all"));
+    renderSocialMessages();
+  });
+
+  document.getElementById("socialMessageSendBtn").addEventListener("click", async () => {
+    const input = document.getElementById("socialMessageInput");
+    const topic = String(document.getElementById("socialMessageTopicSelect").value || "global");
+    const body = String(input.value || "").trim();
+    if (!body) {
+      setFeedback("socialMessageFeedback", t("feedback.messageEmpty"), "warn");
+      return;
+    }
+
+    const sendBtn = document.getElementById("socialMessageSendBtn");
+    sendBtn.disabled = true;
+    setFeedback("socialMessageFeedback", t("feedback.messageSending"));
+    try {
+      const result = await api("/api/messages/broadcast", {
+        method: "POST",
+        body: JSON.stringify({ body, topic }),
+      });
+      if (!result.data?.sent) {
+        setFeedback("socialMessageFeedback", messageSendReasonText(t, String(result.data?.reason || "failed")), "warn");
+        return;
+      }
+      const messageId = String(result.data?.message?.message_id || "");
+      input.value = "";
+      await refreshMessages();
+      const visiblePeers = await api("/api/search?q=");
+      const remoteVisibleCount = Array.isArray(visiblePeers.data)
+        ? visiblePeers.data.filter((item) => !item.is_self && item.online).length
+        : 0;
+      const published = getSocialMessagesCache().find((item) => item.message_id === messageId);
+      const confirmed = Boolean(published);
+      const remoteObservedCount = Number(published?.remote_observation_count || 0);
+      const remoteHint = t("feedback.messageRemoteVisibility", { count: String(remoteVisibleCount) });
+      setFeedback(
+        "socialMessageFeedback",
+        `${confirmed ? t("feedback.messageInboxConfirmed") : t("feedback.messageInboxPending")} ${
+          remoteObservedCount > 0
+            ? t("feedback.messageRemoteObserved", { count: String(remoteObservedCount) })
+            : remoteHint
+        }`,
+        confirmed ? "info" : "warn",
+      );
+      toast(confirmed ? t("feedback.messageInboxConfirmed") : t("feedback.messagePublishedLocal"));
+      await refreshNetwork();
+    } catch (e) {
+      setFeedback("socialMessageFeedback", e instanceof Error ? e.message : t("feedback.messageBroadcastFailed"), "error");
+    } finally {
+      sendBtn.disabled = false;
+    }
+  });
+
+  profileController.bindProfileForm({ refreshAll });
+
+  window.addEventListener("beforeunload", (event) => {
+    if (!shouldWarnBeforeUnload()) return;
+    event.preventDefault();
+    event.returnValue = "";
+  });
+
+  async function runAction(path, text, level = "info") {
+    setFeedback("networkFeedback", text);
+    try {
+      const response = await api(path, { method: "POST" });
+      setFeedback("networkFeedback", response.meta?.message || t("common.done"), level);
+      toast(response.meta?.message || t("common.done"));
+      await refreshAll();
+      if (path === "/api/broadcast/now") {
+        pulseOverviewBroadcastStep();
+      }
+    } catch (e) {
+      setFeedback("networkFeedback", e instanceof Error ? e.message : t("feedback.failed"), "error");
+    }
+  }
+
+  document.getElementById("startBroadcastBtn").addEventListener("click", () => runAction("/api/broadcast/start", t("actions.startBroadcast")));
+  document.getElementById("stopBroadcastBtn").addEventListener("click", () => runAction("/api/broadcast/stop", t("actions.stopBroadcast"), "warn"));
+  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");
+    if (!currentSignaling) return;
+    const room = window.prompt(t("feedback.promptRoom"), "silicaclaw-global-preview") || "silicaclaw-global-preview";
+    setFeedback("networkFeedback", t("feedback.crossPreviewEnabling"));
+    try {
+      const result = await api("/api/network/quick-connect-global-preview", {
+        method: "POST",
+        body: JSON.stringify({
+          signaling_url: currentSignaling.trim(),
+          room: room.trim(),
+        }),
+      });
+      setFeedback("networkFeedback", result.meta?.message || t("feedback.crossPreviewEnabled"));
+      toast(t("feedback.crossPreviewEnabled"));
+      await refreshAll();
+    } catch (e) {
+      setFeedback("networkFeedback", e instanceof Error ? e.message : t("feedback.enableCrossPreviewFailed"), "error");
+    }
+  });
+
+  document.getElementById("onlyOnlineToggle").addEventListener("change", async (event) => {
+    setOnlyShowOnline(Boolean(event.target?.checked));
+    setAgentsPage(1);
+    await refreshOverview();
+  });
+
+  document.getElementById("clearDiscoveryCacheBtn").addEventListener("click", async () => {
+    try {
+      await api("/api/cache/clear", { method: "POST" });
+      setFeedback("networkFeedback", t("feedback.discoveryCacheCleared"));
+      toast(t("feedback.discoveryCacheCleared"));
+      setAgentsPage(1);
+      await refreshAll();
+    } catch (e) {
+      setFeedback("networkFeedback", e instanceof Error ? e.message : t("feedback.failed"), "error");
+    }
+  });
+
+  document.getElementById("refreshLogsBtn").addEventListener("click", async () => {
+    await refreshLogs();
+    toast(t("feedback.logsRefreshed"));
+  });
+
+  document.getElementById("socialExportBtn").addEventListener("click", async () => {
+    setFeedback("socialFeedback", t("feedback.exportingTemplate"));
+    try {
+      await exportSocialTemplate();
+      setFeedback("socialFeedback", t("feedback.templateExported"));
+      toast(t("feedback.templateExported"));
+    } catch (e) {
+      setFeedback("socialFeedback", e instanceof Error ? e.message : t("feedback.exportFailed"), "error");
+    }
+  });
+
+  document.getElementById("openclawSkillInstallBtn").addEventListener("click", async () => {
+    const btn = document.getElementById("openclawSkillInstallBtn");
+    btn.disabled = true;
+    setFeedback("openclawSkillFeedback", t("feedback.openclawSkillInstalling"));
+    try {
+      await api("/api/openclaw/bridge/skill-install", { method: "POST" });
+      setFeedback("openclawSkillFeedback", t("feedback.openclawSkillInstalled"));
+      toast(t("feedback.openclawSkillInstalled"));
+      await refreshSocial();
+    } catch (e) {
+      setFeedback("openclawSkillFeedback", e instanceof Error ? e.message : t("feedback.openclawSkillInstallFailed"), "error");
+    } finally {
+      await refreshSocial().catch(() => {});
+    }
+  });
+
+  document.getElementById("skillsInstallBtn").addEventListener("click", async () => {
+    const btn = document.getElementById("skillsInstallBtn");
+    btn.disabled = true;
+    setFeedback("skillsFeedback", t("feedback.openclawSkillInstalling"));
+    try {
+      await api("/api/openclaw/bridge/skill-install", { method: "POST" });
+      setFeedback("skillsFeedback", t("feedback.openclawSkillInstalled"));
+      toast(t("feedback.openclawSkillInstalled"));
+      await refreshSkills();
+      await refreshSocial();
+    } catch (e) {
+      setFeedback("skillsFeedback", e instanceof Error ? e.message : t("feedback.openclawSkillInstallFailed"), "error");
+    } finally {
+      await refreshSkills().catch(() => {});
+    }
+  });
+
+  document.getElementById("saveGovernanceBtn").addEventListener("click", async () => {
+    setFeedback("socialGovernanceFeedback", t("common.saving"));
+    try {
+      await api("/api/social/message-governance", {
+        method: "PUT",
+        body: JSON.stringify({
+          send_limit_max: Number(document.getElementById("governanceSendLimitInput").value || 5),
+          send_window_ms: Number(document.getElementById("governanceSendWindowInput").value || 60) * 1000,
+          receive_limit_max: Number(document.getElementById("governanceReceiveLimitInput").value || 8),
+          receive_window_ms: Number(document.getElementById("governanceReceiveWindowInput").value || 60) * 1000,
+          duplicate_window_ms: Number(document.getElementById("governanceDuplicateWindowInput").value || 180) * 1000,
+          blocked_agent_ids: parseCsv(document.getElementById("governanceBlockedAgentsInput").value || ""),
+          blocked_terms: parseCsv(document.getElementById("governanceBlockedTermsInput").value || ""),
+        }),
+      });
+      setFeedback("socialGovernanceFeedback", t("hints.governanceSaved"));
+      toast(t("hints.governanceSaved"));
+      await refreshSocial();
+      await refreshMessages();
+    } catch (e) {
+      setFeedback("socialGovernanceFeedback", e instanceof Error ? e.message : t("feedback.failed"), "error");
+    }
+  });
+
+  document.getElementById("socialModeSelect").addEventListener("change", (event) => {
+    const mode = String(event.target?.value || "").trim();
+    if (!mode) return;
+    setSocialModeDirty(true);
+    setSocialModePending(mode);
+    renderSocialModeHint(mode, mode, false, true);
+    setSocialModePendingState(true);
+  });
+
+  document.getElementById("socialModeApplyBtn").addEventListener("click", async () => {
+    const mode = document.getElementById("socialModeSelect").value;
+    setFeedback("socialFeedback", t("feedback.runtimeModeApplying", { mode }));
+    try {
+      const res = await api("/api/social/runtime-mode", {
+        method: "POST",
+        body: JSON.stringify({ mode }),
+      });
+      setSocialModeDirty(false);
+      setSocialModePending("");
+      document.getElementById("socialModeSelect").value = mode;
+      setSocialModePendingState(false);
+      setFeedback("socialFeedback", `${res.meta?.message || t("feedback.runtimeUpdated")} ${t("hints.socialModeHint", {
+        selected: mode,
+        effective: mode,
+        restart: res.data?.network_requires_restart ? t("hints.restartRequiredHint") : t("hints.restartNotRequiredHint"),
+      })}`);
+      toast(t("feedback.runtimeMode", { mode }));
+      await refreshAll();
+    } catch (e) {
+      setFeedback("socialFeedback", e instanceof Error ? e.message : t("feedback.failed"), "error");
+    }
+  });
+
+  document.getElementById("socialCopyBtn").addEventListener("click", async () => {
+    setFeedback("socialFeedback", t("feedback.copyingTemplate"));
+    const btn = document.getElementById("socialCopyBtn");
+    try {
+      if (!getSocialTemplate()) {
+        await exportSocialTemplate();
+      }
+      await navigator.clipboard.writeText(getSocialTemplate());
+      setFeedback("socialFeedback", t("feedback.templateCopied"));
+      toast(t("common.copied"));
+      flashButton(btn, t("common.copied"));
+    } catch (e) {
+      setFeedback("socialFeedback", e instanceof Error ? e.message : t("feedback.copyFailed"), "error");
+    }
+  });
+
+  document.getElementById("socialDownloadBtn").addEventListener("click", async () => {
+    setFeedback("socialFeedback", t("feedback.preparingDownload"));
+    try {
+      const payload = await exportSocialTemplate();
+      const filename = String(payload.filename || "social.md");
+      const blob = new Blob([getSocialTemplate()], { type: "text/markdown;charset=utf-8" });
+      const url = URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = filename;
+      document.body.appendChild(anchor);
+      anchor.click();
+      anchor.remove();
+      URL.revokeObjectURL(url);
+      setFeedback("socialFeedback", t("feedback.downloaded", { filename }));
+      toast(t("feedback.downloaded", { filename }));
+    } catch (e) {
+      setFeedback("socialFeedback", e instanceof Error ? e.message : t("feedback.downloadFailed"), "error");
+    }
+  });
+
+  document.getElementById("copyPublicProfilePreviewBtn").addEventListener("click", async () => {
+    const btn = document.getElementById("copyPublicProfilePreviewBtn");
+    try {
+      const summary = (await api("/api/public-profile/preview")).data || null;
+      await navigator.clipboard.writeText(toPrettyJson(summary));
+      toast(t("actions.copyPublicProfilePreview"));
+      flashButton(btn, t("common.copied"));
+    } catch (e) {
+      setFeedback("profileFeedback", e instanceof Error ? e.message : t("feedback.copyPreviewFailed"), "error");
+    }
+  });
+
+  document.getElementById("logLevelFilter").addEventListener("change", (event) => {
+    socialController.setLogLevelFilter(String(event.target?.value || "all"));
+    renderLogs();
+  });
+
+  (() => {
+    const logo = document.getElementById("brandLogo");
+    const fallback = document.getElementById("brandFallback");
+    if (!logo || !fallback) return;
+    logo.addEventListener("error", () => {
+      logo.style.display = "none";
+      fallback.classList.remove("hidden");
+    });
+    logo.addEventListener("load", () => {
+      logo.style.display = "block";
+      fallback.classList.add("hidden");
+    });
+  })();
+
+  if (window.matchMedia) {
+    const media = window.matchMedia("(prefers-color-scheme: light)");
+    const handleThemeMedia = () => {
+      if ((localStorage.getItem("silicaclaw_theme_mode") || "dark") === "system") {
+        applyTheme("system");
+      }
+    };
+    if (typeof media.addEventListener === "function") {
+      media.addEventListener("change", handleThemeMedia);
+    } else if (typeof media.addListener === "function") {
+      media.addListener(handleThemeMedia);
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+export function createI18n(translations) {
+  const LOCALE_STORAGE_KEY = "silicaclaw.i18n.locale";
+  const DEFAULT_LOCALE = "en";
+  const SUPPORTED_LOCALES = ["en", "zh-CN"];
+
+  function isSupportedLocale(value) {
+    return SUPPORTED_LOCALES.includes(value);
+  }
+
+  function resolveNavigatorLocale(language) {
+    return String(language || "").toLowerCase().startsWith("zh") ? "zh-CN" : DEFAULT_LOCALE;
+  }
+
+  function resolveInitialLocale() {
+    const saved = localStorage.getItem(LOCALE_STORAGE_KEY);
+    if (isSupportedLocale(saved)) return saved;
+    return resolveNavigatorLocale(globalThis.navigator?.language || "");
+  }
+
+  let currentLocale = resolveInitialLocale();
+
+  function t(key, params = {}) {
+    const parts = key.split(".");
+    const resolve = (bundle) => parts.reduce((acc, part) => (acc && typeof acc === "object" ? acc[part] : undefined), bundle);
+    let value = resolve(translations[currentLocale]);
+    if (typeof value !== "string") value = resolve(translations[DEFAULT_LOCALE]);
+    if (typeof value !== "string") return key;
+    return value.replace(/\{(\w+)\}/g, (_, name) => params[name] ?? `{${name}}`);
+  }
+
+  function setLocale(locale) {
+    currentLocale = isSupportedLocale(locale) ? locale : DEFAULT_LOCALE;
+    document.documentElement.lang = currentLocale;
+    return currentLocale;
+  }
+
+  return {
+    DEFAULT_LOCALE,
+    getCurrentLocale: () => currentLocale,
+    setLocale,
+    t,
+  };
+}

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

@@ -0,0 +1,212 @@
+export function createNetworkController({
+  ago,
+  api,
+  describeCurrentMode,
+  peerStatusText,
+  shortId,
+  t,
+  toPrettyJson,
+  writeUiCache,
+}) {
+  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;
+    const s = sts.data;
+    const runtimePaths = rtp.data || {};
+    const msg = s.message_counters || {};
+    const p = s.peer_counters || {};
+    const a = s.adapter_stats || {};
+    const transportStats = s.adapter_transport_stats || {};
+    const d = s.adapter_discovery_stats || {};
+    const dx = s.adapter_diagnostics_summary || {};
+    const ac = s.adapter_config || c.adapter_config || {};
+    document.getElementById("heroAdapter").textContent = c.adapter || "-";
+    document.getElementById("heroRelay").textContent = dx.signaling_url || "-";
+    document.getElementById("heroRoom").textContent = dx.room || "-";
+
+    document.getElementById("pillAdapter").textContent = `${t("labels.adapter")}: ${c.adapter || "-"}`;
+    writeUiCache("silicaclaw_ui_network", {
+      heroAdapterText: c.adapter || "-",
+      heroRelayText: dx.signaling_url || "-",
+      heroRoomText: dx.room || "-",
+      pillAdapterText: `${t("labels.adapter")}: ${c.adapter || "-"}`,
+    });
+    document.getElementById("networkCards").innerHTML = [
+      [t("labels.adapter"), c.adapter],
+      [t("labels.namespace"), c.namespace || "-"],
+      [t("labels.port"), c.port ?? "-"],
+      [t("network.started"), ac.started === true ? t("common.yes") : ac.started === false ? t("common.no") : "-"],
+      [t("network.transportState"), ac.transport?.state || "-"],
+      [t("network.signalingUrl"), dx.signaling_url || "-"],
+      [t("network.signalingEndpoints"), (dx.signaling_endpoints || []).length || 0],
+      [t("network.webrtcRoom"), dx.room || "-"],
+      [t("network.bootstrapSources"), (dx.bootstrap_sources || []).length || 0],
+      [t("network.seedPeers"), dx.seed_peers_count ?? 0],
+      [t("network.discoveryEvents"), dx.discovery_events_total ?? 0],
+      [t("network.recv"), msg.received_total ?? 0],
+      [t("network.sent"), msg.broadcast_total ?? 0],
+      [t("network.peers"), p.total ?? 0],
+      [t("network.onlinePeers"), p.online ?? 0],
+      [t("network.activeWebrtcPeers"), dx.active_webrtc_peers ?? "-"],
+      [t("network.reconnectAttempts"), dx.reconnect_attempts_total ?? "-"],
+      [t("network.lastInbound"), ago(msg.last_message_at)],
+      [t("network.lastOutbound"), ago(msg.last_broadcast_at)],
+    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join("");
+    document.getElementById("networkSummaryList").innerHTML = [
+      [t("labels.mode"), describeCurrentMode(t, c.mode || "lan")],
+      [t("network.relayHealth"), dx.last_error ? t("network.degraded") : t("network.connected")],
+      [t("network.currentRelay"), dx.signaling_url || "-"],
+      [t("network.currentRoom"), dx.room || "-"],
+      [t("network.lastJoin"), ago(dx.last_join_at)],
+      [t("network.lastPoll"), ago(dx.last_poll_at)],
+      [t("network.lastPublish"), ago(dx.last_publish_at)],
+      [t("network.lastError"), dx.last_error || t("network.none")],
+    ].map(([k, v]) => `<div class="summary-item"><div class="label">${k}</div><div class="mono">${v}</div></div>`).join("");
+
+    const comp = c.components || {};
+    const lim = c.limits || {};
+    document.getElementById("networkComponents").textContent = [
+      `demo_mode: ${c.demo_mode || "-"}`,
+      `transport: ${comp.transport || "-"}`,
+      `discovery: ${comp.discovery || "-"}`,
+      `envelope_codec: ${comp.envelope_codec || "-"}`,
+      `topic_codec: ${comp.topic_codec || "-"}`,
+      `max_message_bytes: ${lim.max_message_bytes ?? "-"}`,
+      `dedupe_window_ms: ${lim.dedupe_window_ms ?? "-"}`,
+      `dedupe_max_entries: ${lim.dedupe_max_entries ?? "-"}`,
+      `max_future_drift_ms: ${lim.max_future_drift_ms ?? "-"}`,
+      `max_past_drift_ms: ${lim.max_past_drift_ms ?? "-"}`,
+      `dropped_duplicate: ${a.dropped_duplicate ?? "-"}`,
+      `dropped_self: ${a.dropped_self ?? "-"}`,
+      `dropped_malformed: ${a.dropped_malformed ?? "-"}`,
+      `dropped_decode_failed: ${a.dropped_decode_failed ?? "-"}`,
+      `dropped_timestamp_future_drift: ${a.dropped_timestamp_future_drift ?? "-"}`,
+      `dropped_timestamp_past_drift: ${a.dropped_timestamp_past_drift ?? "-"}`,
+      `dropped_namespace_mismatch: ${a.dropped_namespace_mismatch ?? "-"}`,
+      `received_validated: ${a.received_validated ?? "-"}`,
+      `send_errors: ${a.send_errors ?? "-"}`,
+      `transport_send_errors: ${transportStats.send_errors ?? "-"}`,
+      `discovery_heartbeat_send_errors: ${d.heartbeat_send_errors ?? "-"}`,
+      `signaling_messages_sent_total: ${dx.signaling_messages_sent_total ?? "-"}`,
+      `signaling_messages_received_total: ${dx.signaling_messages_received_total ?? "-"}`,
+      `last_join_at: ${dx.last_join_at ? new Date(dx.last_join_at).toISOString() : "-"}`,
+      `last_poll_at: ${dx.last_poll_at ? new Date(dx.last_poll_at).toISOString() : "-"}`,
+      `last_publish_at: ${dx.last_publish_at ? new Date(dx.last_publish_at).toISOString() : "-"}`,
+      `last_peer_refresh_at: ${dx.last_peer_refresh_at ? new Date(dx.last_peer_refresh_at).toISOString() : "-"}`,
+      `last_error_at: ${dx.last_error_at ? new Date(dx.last_error_at).toISOString() : "-"}`,
+      `last_error: ${dx.last_error || "-"}`,
+      `signaling_endpoints: ${Array.isArray(dx.signaling_endpoints) ? dx.signaling_endpoints.join(", ") : "-"}`,
+      `bootstrap_sources: ${Array.isArray(dx.bootstrap_sources) ? dx.bootstrap_sources.join(", ") : "-"}`,
+      `seed_peers_count: ${dx.seed_peers_count ?? "-"}`,
+      `discovery_events_total: ${dx.discovery_events_total ?? "-"}`,
+      `last_discovery_event_at: ${dx.last_discovery_event_at ? new Date(dx.last_discovery_event_at).toISOString() : "-"}`,
+    ].join("\n");
+
+    document.getElementById("networkConfigSnapshot").textContent = toPrettyJson({
+      config: c,
+      adapter_config: ac,
+      runtime_paths: runtimePaths,
+    });
+    document.getElementById("networkStatsSnapshot").textContent = toPrettyJson({ stats: s });
+  }
+
+  async function refreshPeers() {
+    const [peerRes, statsRes] = await Promise.all([api("/api/peers"), api("/api/network/stats")]);
+    const peers = peerRes.data || {};
+    const ds = statsRes.data?.adapter_discovery_stats || {};
+    const summary = peers.diagnostics_summary || {};
+
+    document.getElementById("peerCards").innerHTML = [
+      [t("network.total"), peers.total || 0],
+      [t("overview.online"), peers.online || 0],
+      [t("network.stale"), peers.stale || 0],
+      [t("labels.namespace"), peers.namespace || "-"],
+      [t("network.signalingUrl"), summary.signaling_url || "-"],
+      [t("network.signalingEndpoints"), (summary.signaling_endpoints || []).length || 0],
+      [t("labels.room"), summary.room || "-"],
+      [t("network.lastJoin"), ago(summary.last_join_at)],
+      [t("network.lastPoll"), ago(summary.last_poll_at)],
+      [t("network.lastPublish"), ago(summary.last_publish_at)],
+      [t("network.bootstrapSources"), (summary.bootstrap_sources || []).length || 0],
+      [t("network.seedPeers"), summary.seed_peers_count ?? 0],
+      [t("network.discoveryEvents"), summary.discovery_events_total ?? 0],
+      [t("network.activeWebrtcPeers"), summary.active_webrtc_peers ?? "-"],
+      [t("network.observeCalls"), ds.observe_calls || 0],
+      [t("network.heartbeats"), ds.heartbeat_sent || 0],
+      [t("network.peersAdded"), ds.peers_added || 0],
+      [t("network.peersRemoved"), ds.peers_removed || 0],
+    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join("");
+
+    if (!peers.items || !peers.items.length) {
+      document.getElementById("peerTableWrap").innerHTML = `<div class="empty-state">${t("network.noPeersDiscovered")}</div>`;
+      document.getElementById("peerStatsWrap").textContent = toPrettyJson({
+        discovery_stats: ds,
+        diagnostics_summary: summary,
+      });
+      return;
+    }
+
+    document.getElementById("peerTableWrap").innerHTML = `
+      <table class="table">
+        <thead><tr><th>${t("network.peer")}</th><th>${t("network.status")}</th><th>${t("network.lastSeen")}</th><th>${t("network.staleSince")}</th><th>${t("network.messages")}</th><th>${t("network.firstSeen")}</th><th>${t("network.meta")}</th></tr></thead>
+        <tbody>
+          ${peers.items.map((peer) => `
+            <tr>
+              <td class="mono">${shortId(peer.peer_id)}</td>
+              <td class="${peer.status === "online" ? "online" : peer.status === "offline" ? "offline" : "stale"}">${peerStatusText(peer.status)}</td>
+              <td>${ago(peer.last_seen_at)}</td>
+              <td>${peer.stale_since_at ? ago(peer.stale_since_at) : "-"}</td>
+              <td>${peer.messages_seen || 0}</td>
+              <td>${new Date(peer.first_seen_at).toLocaleTimeString()}</td>
+              <td class="mono">${peer.meta ? JSON.stringify(peer.meta) : "-"}</td>
+            </tr>
+          `).join("")}
+        </tbody>
+      </table>
+    `;
+    document.getElementById("peerStatsWrap").textContent = toPrettyJson({
+      discovery_stats: ds,
+      diagnostics_summary: summary,
+      adapter_stats: statsRes.data?.adapter_stats || {},
+    });
+  }
+
+  async function refreshDiscovery() {
+    const eventsRes = await api("/api/discovery/events");
+    const payload = eventsRes.data || {};
+    const items = Array.isArray(payload.items) ? payload.items : [];
+
+    document.getElementById("discoveryCards").innerHTML = [
+      [t("labels.adapter"), payload.adapter || "-"],
+      [t("labels.namespace"), payload.namespace || "-"],
+      [t("network.eventsTotal"), payload.total ?? 0],
+      [t("network.lastEvent"), ago(payload.last_event_at)],
+      [t("network.signalingEndpoints"), (payload.signaling_endpoints || []).length || 0],
+      [t("network.seedPeers"), payload.seed_peers_count ?? 0],
+    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join("");
+
+    if (!items.length) {
+      document.getElementById("discoveryEventList").innerHTML = `<div class="empty-state">${t("network.noDiscoveryEvents")}</div>`;
+    } else {
+      document.getElementById("discoveryEventList").innerHTML = items
+        .slice()
+        .reverse()
+        .map((event) => `
+          <div class="log-item">
+            <div class="mono" style="color:#c5d8ff;">[${event.type}] ${event.peer_id || "-"} ${event.endpoint || ""}</div>
+            <div class="label">${event.detail || "-"}</div>
+            <div class="mono" style="color:#90a2c3;">${new Date(event.at).toLocaleString()}</div>
+          </div>
+        `)
+        .join("");
+    }
+
+    document.getElementById("discoverySnapshot").textContent = toPrettyJson(payload);
+  }
+
+  return {
+    refreshDiscovery,
+    refreshNetwork,
+    refreshPeers,
+  };
+}