@silicaclaw/cli 2026.3.19-2 → 2026.3.19-21

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

@@ -0,0 +1,241 @@
+export function createNetworkController({
+  ago,
+  api,
+  describeCurrentMode,
+  peerStatusText,
+  shortId,
+  t,
+  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;
+    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 || {};
+    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 || "-";
+    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", {
+      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"), relayHealth],
+      [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 {
+    getQuickConnectDefaults: () => ({ ...quickConnectDefaults }),
+    refreshDiscovery,
+    refreshNetwork,
+    refreshPeers,
+  };
+}

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

@@ -0,0 +1,339 @@
+export function createOverviewController({
+  ago,
+  api,
+  describeCurrentMode,
+  escapeHtml,
+  shortId,
+  t,
+  writeUiCache,
+}) {
+  function renderOverviewGuide(overview, profile) {
+    const hasDisplayName = Boolean(String(profile?.display_name || overview?.display_name || "").trim());
+    const hasBio = Boolean(String(profile?.bio || "").trim());
+    const hasTags = Array.isArray(profile?.tags) && profile.tags.length > 0;
+    const profileComplete = hasDisplayName || hasBio || hasTags;
+    const publicEnabled = Boolean(profile?.public_enabled ?? overview?.public_enabled);
+    const announcedRecently = Boolean(overview?.last_broadcast_at);
+
+    const guideStatusEl = document.getElementById("overviewGuideStatus");
+    const profileStepEl = document.getElementById("overviewStepProfile");
+    const publicStepEl = document.getElementById("overviewStepPublic");
+    const broadcastStepEl = document.getElementById("overviewStepBroadcast");
+
+    profileStepEl.classList.toggle("is-done", profileComplete);
+    publicStepEl.classList.toggle("is-done", publicEnabled);
+    broadcastStepEl.classList.toggle("is-done", announcedRecently);
+
+    document.getElementById("overviewStepProfileStatus").textContent = profileComplete
+      ? t("overview.stepDone")
+      : t("overview.stepIncomplete");
+    document.getElementById("overviewStepProfileBody").textContent = profileComplete
+      ? t("overview.stepProfileDone")
+      : t("overview.stepProfileBody");
+
+    document.getElementById("overviewStepPublicStatus").textContent = publicEnabled
+      ? t("overview.stepDone")
+      : t("overview.stepIncomplete");
+    document.getElementById("overviewStepPublicBody").textContent = publicEnabled
+      ? t("overview.stepPublicDone")
+      : t("overview.stepPublicBody");
+
+    document.getElementById("overviewStepBroadcastStatus").textContent = announcedRecently
+      ? t("overview.stepDone")
+      : t("overview.stepWaiting");
+    document.getElementById("overviewStepBroadcastBody").textContent = announcedRecently
+      ? t("overview.stepBroadcastDone")
+      : t("overview.stepBroadcastBody");
+
+    if (publicEnabled && announcedRecently) {
+      guideStatusEl.textContent = t("overview.guideLive");
+      guideStatusEl.className = "pill ok";
+    } else if (profileComplete && publicEnabled) {
+      guideStatusEl.textContent = t("overview.guideReadyToAnnounce");
+      guideStatusEl.className = "pill warn";
+    } else {
+      guideStatusEl.textContent = t("overview.guideNeedSetup");
+      guideStatusEl.className = "pill warn";
+    }
+  }
+
+  async function refreshOverview({
+    getAgentsPage,
+    getOnlyShowOnline,
+    onPageChange,
+    setOverviewMode,
+    setVisibleRemotePublicCount,
+  }) {
+    const [overviewRes, discoveredRes, peerRes, profileRes, bridgeRes, networkCfgRes, networkStatsRes] = await Promise.allSettled([
+      api("/api/overview"),
+      api("/api/search?q="),
+      api("/api/peers"),
+      api("/api/profile"),
+      api("/api/openclaw/bridge"),
+      api("/api/network/config"),
+      api("/api/network/stats"),
+    ]);
+    if (overviewRes.status !== "fulfilled") {
+      throw overviewRes.reason;
+    }
+    const o = overviewRes.value.data;
+    const allProfiles = discoveredRes.status === "fulfilled" ? discoveredRes.value.data || [] : [];
+    const peers = peerRes.status === "fulfilled" ? peerRes.value.data || {} : {};
+    const currentProfile = profileRes.status === "fulfilled" ? profileRes.value.data || {} : {};
+    const bridge = bridgeRes.status === "fulfilled" ? bridgeRes.value.data || {} : {};
+    const networkCfg = networkCfgRes.status === "fulfilled" ? networkCfgRes.value.data || {} : {};
+    const networkStats = networkStatsRes.status === "fulfilled" ? networkStatsRes.value.data || {} : {};
+    const peerItems = peers.items || [];
+    const mergedById = new Map();
+
+    for (const agent of allProfiles) mergedById.set(agent.agent_id, agent);
+
+    for (const peer of peerItems) {
+      const existing = mergedById.get(peer.peer_id);
+      if (existing) {
+        if (peer.status && !existing.online) existing.online = peer.status === "online";
+        if (peer.last_seen_at && (!existing.updated_at || peer.last_seen_at > existing.updated_at)) {
+          existing.updated_at = peer.last_seen_at;
+        }
+        continue;
+      }
+      mergedById.set(peer.peer_id, {
+        agent_id: peer.peer_id,
+        display_name: shortId(peer.peer_id),
+        online: peer.status === "online",
+        updated_at: peer.last_seen_at || peer.first_seen_at || 0,
+      });
+    }
+
+    const all = Array.from(mergedById.values());
+    const filtered = getOnlyShowOnline() ? all.filter((agent) => agent.online) : all;
+    setVisibleRemotePublicCount(all.filter((agent) => !agent.is_self && agent.online).length);
+    const totalAgentPages = Math.max(1, Math.ceil(filtered.length / 10));
+    let agentsPage = Math.min(Math.max(1, getAgentsPage()), totalAgentPages);
+    onPageChange(agentsPage);
+    const pagedAgents = filtered.slice((agentsPage - 1) * 10, agentsPage * 10);
+    const discoveredCount = Math.max(Number(o.discovered_count || 0), Number(peers.total || 0), all.length);
+    const onlineCount = Math.max(Number(o.online_count || 0), Number(peers.online || 0), all.filter((agent) => agent.online).length);
+    const offlineCount = Math.max(0, discoveredCount - onlineCount);
+
+    const overviewCardsHtml = [
+      [t("overview.discovered"), discoveredCount],
+      [t("overview.online"), onlineCount],
+      [t("overview.offline"), offlineCount],
+      [t("overview.presenceTtl"), `${Math.floor(o.presence_ttl_ms / 1000)}s`],
+    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value">${v}</div></div>`).join("");
+    document.getElementById("overviewCards").innerHTML = overviewCardsHtml;
+
+    const brandVersionText = o.app_version ? `v${o.app_version}` : "-";
+    document.getElementById("brandVersion").textContent = brandVersionText;
+
+    const snapshotHtml = `
+      <div class="snapshot-card">
+        <div class="snapshot-card__identity">
+          <div class="snapshot-card__label">Current Node</div>
+          <div class="snapshot-card__title">${escapeHtml(o.display_name || t("overview.unnamed"))}</div>
+          <div class="snapshot-card__subtle mono">${escapeHtml(o.agent_id || "-")}</div>
+        </div>
+        <div class="snapshot-card__grid">
+          <div class="snapshot-card__item"><div class="label">Version</div><span class="value-inline">${escapeHtml(o.app_version || "-")}</span></div>
+          <div class="snapshot-card__item"><div class="label">Public</div><span class="value-inline">${o.public_enabled ? t("common.on") : t("common.off")}</span></div>
+          <div class="snapshot-card__item"><div class="label">Broadcast</div><span class="value-inline">${o.broadcast_enabled ? t("common.on") : t("common.off")}</span></div>
+          <div class="snapshot-card__item"><div class="label">Last Broadcast</div><span class="value-inline">${escapeHtml(ago(o.last_broadcast_at))}</span></div>
+        </div>
+      </div>
+    `;
+    document.getElementById("snapshot").innerHTML = snapshotHtml;
+    const networkDiag = networkStats.adapter_diagnostics_summary || {};
+    const heroModeText = o.social?.network_mode || "-";
+    const heroAdapterText = networkCfg.adapter || "-";
+    const heroRelayText = String(networkDiag.signaling_url || networkCfg.adapter_extra?.signaling_url || "-");
+    const heroRoomText = String(networkDiag.room || networkCfg.adapter_extra?.room || "-");
+    setOverviewMode(heroModeText);
+    document.getElementById("heroMode").textContent = heroModeText;
+    document.getElementById("heroAdapter").textContent = heroAdapterText;
+    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"),
+    });
+
+    const pillBroadcastText = o.broadcast_enabled ? t("overview.pillRunning") : t("overview.pillPaused");
+    const pillBroadcastClassName = `pill ${o.broadcast_enabled ? "ok" : "warn"}`;
+    document.getElementById("pillBroadcast").textContent = pillBroadcastText;
+    document.getElementById("pillBroadcast").className = pillBroadcastClassName;
+
+    const openclawRunning = !!bridge.openclaw_runtime?.running;
+    const openclawDetected = !!bridge.openclaw_installation?.detected || openclawRunning || !!bridge.openclaw_runtime?.gateway_reachable;
+    const skillInstalled = !!bridge.skill_learning?.installed;
+    const globalMode = heroModeText === "global-preview";
+    const lastNetworkError = String(networkDiag.last_error || o.last_broadcast_error || "").trim();
+    const broadcastHealthy = o.broadcast_enabled && !lastNetworkError;
+    const roleKey = openclawRunning
+      ? "overview.homeRoleListener"
+      : openclawDetected
+        ? "overview.homeRoleStandby"
+        : "overview.homeRoleBroadcaster";
+    const titleKey = openclawRunning
+      ? "overview.homeTitleListener"
+      : openclawDetected
+        ? "overview.homeTitleOffline"
+        : "overview.homeTitleBroadcaster";
+    const bodyKey = openclawRunning
+      ? "overview.homeBodyListener"
+      : openclawDetected
+        ? "overview.homeBodyOffline"
+        : "overview.homeBodyBroadcaster";
+
+    document.getElementById("homeMissionTitle").textContent = t(titleKey);
+    document.getElementById("homeMissionBody").textContent = t(bodyKey);
+    document.getElementById("homeMissionStatus").innerHTML = [
+      `<span class="mission-status-pill"><strong>${t("overview.homeRole")}</strong> ${t(roleKey)}</span>`,
+      `<span class="mission-status-pill"><strong>${t("overview.homeOpenClaw")}</strong> ${openclawRunning ? t("overview.homeRunning") : openclawDetected ? t("overview.homeInstalledOnly") : t("overview.homeStopped")}</span>`,
+      `<span class="mission-status-pill"><strong>${t("overview.homeGlobalMode")}</strong> ${globalMode ? t("overview.homeGlobalReady") : t("overview.homeNotGlobal")}</span>`,
+    ].join("");
+    document.getElementById("homePriorityGrid").innerHTML = [
+      [t("overview.homeOpenClaw"), openclawRunning ? t("overview.homeRunning") : openclawDetected ? t("overview.homeInstalledOnly") : t("overview.homeStopped"), openclawRunning ? t("overview.homeMetaRunning") : t("overview.homeMetaNotRunning")],
+      [t("overview.homeGlobalMode"), globalMode ? t("overview.homeGlobalReady") : t("overview.homeNotGlobal"), globalMode ? t("overview.homeMetaGlobal") : t("overview.homeMetaNotGlobal")],
+      [t("overview.homeBroadcastHealth"), broadcastHealthy ? t("overview.homeHealthy") : t("overview.homeDegraded"), lastNetworkError || `Last broadcast ${ago(o.last_broadcast_at)}`],
+      [t("overview.homePeers"), String(all.filter((agent) => !agent.is_self && agent.online).length), t("overview.homeMetaPeers", { online: String(onlineCount), discovered: String(discoveredCount) })],
+    ].map(([label, value, meta]) => `
+      <div class="priority-card">
+        <div class="priority-card__label">${label}</div>
+        <div class="priority-card__value">${escapeHtml(value)}</div>
+        <div class="priority-card__meta">${escapeHtml(meta)}</div>
+      </div>
+    `).join("");
+    document.getElementById("homeBriefList").innerHTML = [
+      [t("overview.homeBriefNetwork"), t("overview.homeBriefNetworkValue", {
+        mode: describeCurrentMode(t, heroModeText),
+        relay: String(networkDiag.signaling_url || networkCfg.adapter_extra?.signaling_url || "-"),
+        room: String(networkDiag.room || networkCfg.adapter_extra?.room || "-"),
+      })],
+      [t("overview.homeBriefBridge"), t("overview.homeBriefBridgeValue", {
+        runtime: openclawRunning ? t("overview.homeRunning") : openclawDetected ? t("overview.homeInstalledOnly") : t("overview.homeStopped"),
+        skill: skillInstalled ? t("common.yes") : t("common.no"),
+      })],
+      [t("overview.homeBriefNextAction"), !broadcastHealthy ? t("overview.homeBriefActionStabilize") : openclawRunning ? t("overview.homeBriefActionBroadcast") : t("overview.homeBriefActionLearn")],
+    ].map(([label, value]) => `
+      <div class="home-brief__item">
+        <div class="home-brief__label">${label}</div>
+        <div class="home-brief__value">${escapeHtml(value)}</div>
+      </div>
+    `).join("");
+
+    const init = o.init_state || {};
+    const onboarding = o.onboarding || {};
+    const notice = document.getElementById("initNotice");
+    const discoveryHint = document.getElementById("publicDiscoveryHint");
+    if (onboarding.first_run || init.identity_auto_created || init.profile_auto_created || init.social_auto_created) {
+      notice.classList.add("show");
+      notice.textContent = t("overview.onboardingNotice", {
+        mode: onboarding.mode || "-",
+        discoverable: onboarding.discoverable ? t("common.yes") : t("common.no"),
+      });
+    } else {
+      notice.classList.remove("show");
+    }
+    discoveryHint.style.display = onboarding.can_enable_public_discovery || onboarding.public_enabled ? "block" : "none";
+    renderOverviewGuide(o, currentProfile);
+
+    if (!filtered.length) {
+      const agentsCountHintText = t("overview.agentsZero");
+      const agentsWrapHtml = `<div class="label">${t("overview.noDiscoveredAgents")}</div>`;
+      document.getElementById("agentsCountHint").textContent = agentsCountHintText;
+      document.getElementById("agentsWrap").innerHTML = agentsWrapHtml;
+      writeUiCache("silicaclaw_ui_overview", {
+        overviewCardsHtml,
+        brandVersionText,
+        snapshotText: snapshotHtml,
+        heroModeText,
+        heroAdapterText,
+        heroRelayText,
+        heroRoomText,
+        pillBroadcastText,
+        pillBroadcastClassName,
+        agentsCountHintText,
+        agentsWrapHtml,
+      });
+      return;
+    }
+
+    const agentsCountHintText = getOnlyShowOnline()
+      ? t("overview.agentsOnlineFilter", { shown: String(filtered.length), total: String(all.length) })
+      : t("overview.agentsDiscovered", { count: String(filtered.length) });
+    const renderAvatar = (agent) => {
+      const avatar = String(agent.avatar_url || "").trim();
+      if (avatar) {
+        return `<img class="agent-card__avatar" src="${avatar}" alt="${escapeHtml(agent.display_name || "agent")}" loading="lazy" />`;
+      }
+      const label = String(agent.display_name || agent.agent_id || "?").trim();
+      const initial = escapeHtml((label[0] || "?").toUpperCase());
+      return `<div class="agent-card__avatar-fallback">${initial}</div>`;
+    };
+    const renderTags = (agent) => {
+      const tags = Array.isArray(agent.tags) ? agent.tags.slice(0, 4) : [];
+      if (!tags.length) return "";
+      return `<div class="agent-card__tags">${tags.map((tag) => `<span class="tag-chip">${escapeHtml(String(tag))}</span>`).join("")}</div>`;
+    };
+    const agentsWrapHtml = `
+      <div class="agent-list">
+        ${pagedAgents.map((a) => `
+          <div class="agent-card">
+            ${renderAvatar(a)}
+            <div class="agent-card__main">
+              <div class="agent-card__row">
+                <div class="agent-card__name">${escapeHtml(a.display_name || t("overview.unnamed"))}</div>
+                <div class="agent-card__id mono">${shortId(a.agent_id)}</div>
+              </div>
+              <div class="agent-card__bio">${escapeHtml(a.bio || t("preview.noBioYet"))}</div>
+              ${renderTags(a)}
+            </div>
+            <div class="${a.online ? "online" : "offline"}">${a.online ? t("overview.online") : t("overview.offline")}</div>
+            <div class="agent-card__meta"><div class="agent-card__updated">${ago(a.updated_at)}</div></div>
+          </div>
+        `).join("")}
+        <div class="agent-list__footer">
+          <div class="agent-list__page">${t("overview.pageStatus", { page: String(agentsPage), total: String(totalAgentPages) })}</div>
+          <div class="agent-list__pager">
+            <button class="secondary" type="button" id="agentsPrevPageBtn" ${agentsPage <= 1 ? "disabled" : ""}>${t("overview.prevPage")}</button>
+            <button class="secondary" type="button" id="agentsNextPageBtn" ${agentsPage >= totalAgentPages ? "disabled" : ""}>${t("overview.nextPage")}</button>
+          </div>
+        </div>
+      </div>
+    `;
+    document.getElementById("agentsCountHint").textContent = agentsCountHintText;
+    document.getElementById("agentsWrap").innerHTML = agentsWrapHtml;
+    document.getElementById("agentsPrevPageBtn")?.addEventListener("click", async () => {
+      if (agentsPage <= 1) return;
+      agentsPage -= 1;
+      onPageChange(agentsPage);
+      await refreshOverview({ getAgentsPage, getOnlyShowOnline, onPageChange, setOverviewMode, setVisibleRemotePublicCount });
+    });
+    document.getElementById("agentsNextPageBtn")?.addEventListener("click", async () => {
+      if (agentsPage >= totalAgentPages) return;
+      agentsPage += 1;
+      onPageChange(agentsPage);
+      await refreshOverview({ getAgentsPage, getOnlyShowOnline, onPageChange, setOverviewMode, setVisibleRemotePublicCount });
+    });
+    writeUiCache("silicaclaw_ui_overview", {
+      overviewCardsHtml,
+      brandVersionText,
+      snapshotText: snapshotHtml,
+      heroModeText,
+      heroAdapterText,
+      heroRelayText,
+      heroRoomText,
+      pillBroadcastText,
+      pillBroadcastClassName,
+      agentsCountHintText,
+      agentsWrapHtml,
+    });
+  }
+
+  return {
+    refreshOverview,
+  };
+}