npm - @silicaclaw/cli - Versions diffs - 1.0.0-beta.0 - Mend

@silicaclaw/cli 1.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/ARCHITECTURE.md +137 -0
package/CHANGELOG.md +411 -0
package/DEMO_GUIDE.md +89 -0
package/INSTALL.md +156 -0
package/README.md +244 -0
package/RELEASE_NOTES_v1.0.md +65 -0
package/ROADMAP.md +48 -0
package/SOCIAL_MD_SPEC.md +122 -0
package/VERSION +1 -0
package/apps/local-console/package.json +23 -0
package/apps/local-console/public/assets/README.md +5 -0
package/apps/local-console/public/assets/silicaclaw-logo.png +0 -0
package/apps/local-console/public/index.html +1602 -0
package/apps/local-console/src/server.ts +1656 -0
package/apps/local-console/src/socialRoutes.ts +90 -0
package/apps/local-console/tsconfig.json +7 -0
package/apps/public-explorer/package.json +20 -0
package/apps/public-explorer/public/assets/README.md +5 -0
package/apps/public-explorer/public/assets/silicaclaw-logo.png +0 -0
package/apps/public-explorer/public/index.html +483 -0
package/apps/public-explorer/src/server.ts +32 -0
package/apps/public-explorer/tsconfig.json +7 -0
package/docs/QUICK_START.md +48 -0
package/docs/assets/README.md +8 -0
package/docs/assets/banner.svg +25 -0
package/docs/assets/silicaclaw-logo.png +0 -0
package/docs/assets/silicaclaw-og.png +0 -0
package/docs/release/GITHUB_RELEASE_v1.0-beta.md +143 -0
package/docs/screenshots/README.md +8 -0
package/docs/screenshots/v0.3.1-explorer-search.svg +9 -0
package/docs/screenshots/v0.3.1-machine-a-network.svg +9 -0
package/docs/screenshots/v0.3.1-machine-b-peers.svg +9 -0
package/docs/screenshots/v0.3.1-stale-transition.svg +9 -0
package/openclaw.social.md.example +28 -0
package/package.json +64 -0
package/packages/core/package.json +13 -0
package/packages/core/src/crypto.ts +55 -0
package/packages/core/src/directory.ts +171 -0
package/packages/core/src/identity.ts +14 -0
package/packages/core/src/index.ts +11 -0
package/packages/core/src/indexing.ts +42 -0
package/packages/core/src/presence.ts +24 -0
package/packages/core/src/profile.ts +39 -0
package/packages/core/src/publicProfileSummary.ts +180 -0
package/packages/core/src/socialConfig.ts +440 -0
package/packages/core/src/socialResolver.ts +281 -0
package/packages/core/src/socialTemplate.ts +97 -0
package/packages/core/src/types.ts +43 -0
package/packages/core/tsconfig.json +7 -0
package/packages/network/package.json +10 -0
package/packages/network/src/abstractions/messageEnvelope.ts +80 -0
package/packages/network/src/abstractions/peerDiscovery.ts +49 -0
package/packages/network/src/abstractions/topicCodec.ts +4 -0
package/packages/network/src/abstractions/transport.ts +40 -0
package/packages/network/src/codec/jsonMessageEnvelopeCodec.ts +22 -0
package/packages/network/src/codec/jsonTopicCodec.ts +11 -0
package/packages/network/src/discovery/heartbeatPeerDiscovery.ts +173 -0
package/packages/network/src/index.ts +16 -0
package/packages/network/src/localEventBus.ts +61 -0
package/packages/network/src/mock.ts +27 -0
package/packages/network/src/realPreview.ts +436 -0
package/packages/network/src/transport/udpLanBroadcastTransport.ts +173 -0
package/packages/network/src/types.ts +6 -0
package/packages/network/src/webrtcPreview.ts +1052 -0
package/packages/network/tsconfig.json +7 -0
package/packages/storage/package.json +13 -0
package/packages/storage/src/index.ts +3 -0
package/packages/storage/src/jsonRepo.ts +25 -0
package/packages/storage/src/repos.ts +46 -0
package/packages/storage/src/socialRuntimeRepo.ts +51 -0
package/packages/storage/tsconfig.json +7 -0
package/scripts/functional-check.mjs +165 -0
package/scripts/install-logo.sh +53 -0
package/scripts/quickstart.sh +144 -0
package/scripts/silicaclaw-cli.mjs +88 -0
package/scripts/webrtc-signaling-server.mjs +249 -0
package/social.md.example +30 -0

package/apps/local-console/public/index.html ADDED Viewed

@@ -0,0 +1,1602 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SilicaClaw Control UI</title>
+    <meta name="description" content="SilicaClaw local-first agent control console." />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="SilicaClaw Local Console" />
+    <meta property="og:description" content="Local-first control surface for SilicaClaw agents." />
+    <meta property="og:image" content="/assets/silicaclaw-logo.png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="SilicaClaw Local Console" />
+    <meta name="twitter:description" content="Local-first control surface for SilicaClaw agents." />
+    <meta name="twitter:image" content="/assets/silicaclaw-logo.png" />
+    <link rel="icon" type="image/png" href="/assets/silicaclaw-logo.png" />
+    <link rel="apple-touch-icon" href="/assets/silicaclaw-logo.png" />
+    <style>
+      :root {
+        --bg: #0e1015;
+        --bg-elevated: #191c24;
+        --bg-hover: #1f2330;
+        --panel: #0e1015;
+        --card: #161920;
+        --line: #1e2028;
+        --line-strong: #2e3040;
+        --text: #d4d4d8;
+        --text-strong: #f4f4f5;
+        --muted: #636370;
+        --brand: #ff5c5c;
+        --brand-hover: #ff7070;
+        --brand-soft: rgba(255, 92, 92, 0.1);
+        --ok: #22c55e;
+        --warn: #f59e0b;
+        --err: #ef4444;
+        --chip: #1f2330;
+      }
+      :root[data-theme-mode="light"] {
+        --bg: #f8f9fa;
+        --bg-elevated: #f1f3f5;
+        --bg-hover: #eceef0;
+        --panel: #f8f9fa;
+        --card: #ffffff;
+        --line: #e5e5ea;
+        --line-strong: #d1d1d6;
+        --text: #3c3c43;
+        --text-strong: #1a1a1e;
+        --muted: #8e8e93;
+        --brand: #dc2626;
+        --brand-hover: #ef4444;
+        --brand-soft: rgba(220, 38, 38, 0.08);
+        --ok: #16a34a;
+        --warn: #d97706;
+        --err: #dc2626;
+        --chip: #f1f3f5;
+      }
+      * { box-sizing: border-box; }
+      html, body { margin: 0; min-height: 100%; }
+      body {
+        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
+        color: var(--text);
+        background:
+          radial-gradient(900px 420px at 8% -12%, rgba(255, 92, 92, 0.18), transparent 60%),
+          linear-gradient(180deg, #0e1015 0%, #0e1015 62%, #0f1219 100%);
+        transition: background .2s ease, color .2s ease;
+      }
+      :root[data-theme-mode="light"] body {
+        background:
+          radial-gradient(900px 420px at 8% -12%, rgba(220, 38, 38, 0.1), transparent 60%),
+          linear-gradient(180deg, #f8f9fa 0%, #f8f9fa 62%, #eef1f6 100%);
+      }
+      .app {
+        display: grid;
+        grid-template-columns: 240px 1fr;
+        min-height: 100vh;
+      }
+      .sidebar {
+        border-right: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
+        background: color-mix(in srgb, var(--panel) 96%, transparent);
+        padding: 18px 14px;
+      }
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 18px;
+      }
+      .brand-logo {
+        width: 38px;
+        height: 38px;
+        border-radius: 10px;
+        object-fit: cover;
+        display: block;
+        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
+        border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
+      }
+      .brand-badge {
+        width: 38px;
+        height: 38px;
+        border-radius: 10px;
+        background: linear-gradient(135deg, var(--brand), var(--brand-hover));
+        color: #fff;
+        font-weight: 900;
+        display: grid;
+        place-items: center;
+      }
+      .brand-badge.hidden { display: none; }
+      .brand h1 {
+        margin: 0;
+        font-size: 17px;
+      }
+      .brand p {
+        margin: 2px 0 0;
+        color: var(--muted);
+        font-size: 12px;
+      }
+      .nav {
+        display: grid;
+        gap: 8px;
+      }
+      .nav button {
+        text-align: left;
+        border: 1px solid transparent;
+        background: transparent;
+        color: var(--muted);
+        padding: 10px 12px;
+        border-radius: 10px;
+        cursor: pointer;
+        font: inherit;
+      }
+      .nav button.active {
+        color: #e9f7ff;
+        border-color: color-mix(in srgb, var(--brand) 28%, transparent);
+        background: var(--brand-soft);
+      }
+      .nav button:hover { color: #d2e7ff; }
+      .sidebar-foot {
+        margin-top: 20px;
+        border-top: 1px dashed color-mix(in srgb, var(--line-strong) 85%, transparent);
+        padding-top: 14px;
+        color: var(--muted);
+        font-size: 12px;
+      }
+      .main {
+        padding: 18px;
+      }
+      .topbar {
+        display: flex;
+        justify-content: space-between;
+        gap: 10px;
+        align-items: center;
+        margin-bottom: 14px;
+      }
+      .topbar h2 {
+        margin: 0;
+        font-size: 22px;
+      }
+      .topbar p {
+        margin: 4px 0 0;
+        color: var(--muted);
+        font-size: 13px;
+      }
+      .status-row {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+        align-items: center;
+      }
+      .theme-switch {
+        display: inline-flex;
+        gap: 4px;
+        padding: 3px;
+        border-radius: 999px;
+        border: 1px solid var(--line);
+        background: var(--bg-elevated);
+      }
+      .theme-switch button {
+        border: 1px solid transparent;
+        background: transparent;
+        color: var(--muted);
+        border-radius: 999px;
+        padding: 5px 10px;
+        font-size: 12px;
+        font-weight: 600;
+      }
+      .theme-switch button.active {
+        color: var(--text-strong);
+        background: var(--brand-soft);
+        border-color: color-mix(in srgb, var(--brand) 24%, transparent);
+      }
+      .pill {
+        border-radius: 999px;
+        border: 1px solid var(--line);
+        background: var(--bg-elevated);
+        color: var(--muted);
+        padding: 7px 11px;
+        font-size: 12px;
+      }
+      .pill.ok { color: var(--ok); border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.08); }
+      .pill.warn { color: var(--warn); border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.08); }
+      .notice {
+        display: none;
+        margin-bottom: 12px;
+        border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
+        background: var(--brand-soft);
+        border-radius: 10px;
+        padding: 10px 12px;
+        font-size: 13px;
+      }
+      .notice.show { display: block; }
+      .integration-strip {
+        position: sticky;
+        top: 0;
+        z-index: 9;
+        margin-bottom: 12px;
+        border: 1px solid var(--line);
+        border-radius: 10px;
+        background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
+        padding: 9px 12px;
+        font-size: 13px;
+        color: var(--text);
+      }
+      .integration-strip.ok {
+        border-color: rgba(34, 197, 94, 0.35);
+      }
+      .integration-strip.warn {
+        border-color: rgba(245, 158, 11, 0.35);
+      }
+      .view { display: none; }
+      .view.active { display: block; }
+      .grid {
+        display: grid;
+        gap: 10px;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+      .card {
+        border: 1px solid var(--line);
+        border-radius: 14px;
+        background: var(--card);
+        padding: 12px;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.25);
+      }
+      .label { font-size: 12px; color: var(--muted); }
+      .value { margin-top: 4px; font-size: 24px; font-weight: 800; }
+      .split {
+        margin-top: 10px;
+        display: grid;
+        gap: 10px;
+        grid-template-columns: 1.2fr 1fr;
+      }
+      .title-sm { margin: 0 0 10px; font-size: 18px; }
+      .mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+      .table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+      .table th, .table td {
+        border-bottom: 1px solid var(--line);
+        text-align: left;
+        padding: 8px 6px;
+        font-size: 13px;
+      }
+      .online { color: var(--ok); font-weight: 700; }
+      .offline { color: #f48c8f; font-weight: 700; }
+      .stale { color: var(--warn); font-weight: 700; }
+      .stack { display: grid; gap: 10px; }
+      .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+      label { color: var(--muted); font-size: 13px; }
+      input, textarea {
+        margin-top: 5px;
+        width: 100%;
+        border-radius: 10px;
+        border: 1px solid var(--line);
+        background: var(--bg-elevated);
+        color: #eaf0ff;
+        font: inherit;
+        padding: 10px;
+      }
+      select {
+        margin-top: 5px;
+        width: 100%;
+        border-radius: 10px;
+        border: 1px solid var(--line);
+        background: var(--bg-elevated);
+        color: var(--text);
+        font: inherit;
+        padding: 10px;
+      }
+      textarea { min-height: 90px; resize: vertical; }
+      .actions {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+      }
+      button {
+        border: 1px solid transparent;
+        border-radius: 10px;
+        background: var(--brand);
+        color: #ffffff;
+        font-weight: 700;
+        padding: 9px 13px;
+        cursor: pointer;
+      }
+      button.secondary {
+        border-color: var(--line-strong);
+        background: var(--bg-elevated);
+        color: var(--text);
+      }
+      .feedback {
+        border: 1px solid var(--line);
+        border-radius: 10px;
+        background: var(--bg-elevated);
+        padding: 9px;
+        font-size: 13px;
+        color: var(--muted);
+      }
+      .profile-layout {
+        display: grid;
+        gap: 10px;
+        grid-template-columns: 1.1fr .9fr;
+      }
+      .profile-meta {
+        border: 1px solid var(--line);
+        border-radius: 10px;
+        padding: 10px;
+        background: color-mix(in srgb, var(--card) 86%, transparent);
+      }
+      .profile-meta h4 {
+        margin: 0 0 8px;
+        font-size: 14px;
+        color: var(--text-strong);
+      }
+      .preview-name {
+        font-size: 18px;
+        font-weight: 700;
+        color: var(--text-strong);
+      }
+      .preview-bio {
+        margin-top: 6px;
+        color: var(--muted);
+        font-size: 13px;
+        line-height: 1.45;
+      }
+      .tag-chips {
+        margin-top: 10px;
+        display: flex;
+        gap: 6px;
+        flex-wrap: wrap;
+      }
+      .tag-chip {
+        border: 1px solid var(--line-strong);
+        border-radius: 999px;
+        background: var(--chip);
+        color: var(--text);
+        padding: 3px 9px;
+        font-size: 12px;
+      }
+      .tag-chip.muted {
+        color: var(--muted);
+        border-style: dashed;
+      }
+      .field-hint {
+        margin-top: 4px;
+        color: var(--muted);
+        font-size: 12px;
+      }
+      .field-error {
+        margin-top: 4px;
+        color: var(--err);
+        font-size: 12px;
+      }
+      .input-invalid {
+        border-color: color-mix(in srgb, var(--err) 55%, transparent);
+      }
+      .save-busy {
+        opacity: 0.7;
+        cursor: wait;
+      }
+      .logs {
+        max-height: 420px;
+        overflow: auto;
+        border: 1px solid var(--line);
+        border-radius: 12px;
+        background: var(--panel);
+        padding: 10px;
+      }
+      .log-item {
+        border-bottom: 1px dashed var(--line);
+        padding: 7px 0;
+      }
+      .log-item:last-child { border-bottom: 0; }
+      .log-info { color: #8dc6ff; }
+      .log-warn { color: var(--warn); }
+      .log-error { color: var(--err); }
+      .toolbar {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+        align-items: end;
+        margin-bottom: 10px;
+      }
+      .toolbar .field {
+        min-width: 180px;
+      }
+      .mono-block {
+        border: 1px solid var(--line);
+        border-radius: 10px;
+        background: color-mix(in srgb, var(--bg-elevated) 85%, transparent);
+        padding: 10px;
+        max-height: 240px;
+        overflow: auto;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+      .toast {
+        position: fixed;
+        right: 16px;
+        bottom: 16px;
+        background: var(--bg-elevated);
+        border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
+        color: var(--text);
+        border-radius: 10px;
+        padding: 10px 12px;
+        font-size: 13px;
+        min-width: 220px;
+        opacity: 0;
+        transform: translateY(8px);
+        pointer-events: none;
+        transition: all .2s ease;
+      }
+      .toast.show {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      @media (max-width: 980px) {
+        .app { grid-template-columns: 1fr; }
+        .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
+        .nav { grid-template-columns: repeat(3, minmax(0,1fr)); }
+        .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+        .split, .row, .profile-layout { grid-template-columns: 1fr; }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="app">
+      <aside class="sidebar">
+        <div class="brand">
+          <img id="brandLogo" class="brand-logo" src="/assets/silicaclaw-logo.png" alt="SilicaClaw logo" />
+          <div id="brandFallback" class="brand-badge hidden">SC</div>
+          <div>
+            <h1>SilicaClaw</h1>
+            <p>Control UI</p>
+          </div>
+        </div>
+        <nav class="nav">
+          <button class="tab active" data-tab="overview">Overview</button>
+          <button class="tab" data-tab="profile">Profile</button>
+          <button class="tab" data-tab="network">Network</button>
+          <button class="tab" data-tab="peers">Peers</button>
+          <button class="tab" data-tab="discovery">Discovery Events</button>
+          <button class="tab" data-tab="social">Social Config</button>
+          <button class="tab" data-tab="logs">Logs</button>
+        </nav>
+        <div class="sidebar-foot" id="sideMeta">adapter: -<br/>namespace: -</div>
+      </aside>
+      <main class="main">
+        <div class="topbar">
+          <div>
+            <h2>Local Console</h2>
+            <p>OpenClaw-inspired local-first agent control surface</p>
+          </div>
+          <div class="status-row">
+            <div class="pill" id="pillAdapter">adapter: -</div>
+            <div class="pill" id="pillBroadcast">broadcast: -</div>
+            <div class="theme-switch">
+              <button id="themeDarkBtn" type="button">Dark</button>
+              <button id="themeLightBtn" type="button">Light</button>
+            </div>
+          </div>
+        </div>
+        <div class="integration-strip warn" id="integrationStatusBar">
+          Connected to SilicaClaw: - · Network mode: - · Public discovery: -
+        </div>
+        <div class="notice" id="initNotice"></div>
+        <div class="actions" id="onboardingActions" style="display:none; margin:8px 0 12px;">
+          <button id="enablePublicDiscoveryBtn">Enable Public Discovery</button>
+          <button class="secondary" id="disablePublicDiscoveryBtn">Disable Public Discovery</button>
+        </div>
+        <div class="field-hint" id="publicDiscoveryHint" style="margin-bottom:12px; display:none;">
+          Public discovery only shares signed profile/presence records. It does not share private files and does not enable chat or remote control.
+        </div>
+        <section id="view-overview" class="view active">
+          <div class="grid" id="overviewCards"></div>
+          <div class="split">
+            <div class="card">
+              <h3 class="title-sm">Discovered Agents</h3>
+              <div class="field-hint" id="agentsCountHint">0 agents</div>
+              <label class="field-hint" style="display:inline-flex;gap:6px;align-items:center;margin:6px 0 8px;">
+                <input type="checkbox" id="onlyOnlineToggle" />
+                Only show online
+              </label>
+              <div id="agentsWrap"></div>
+            </div>
+            <div class="card">
+              <h3 class="title-sm">Node Snapshot</h3>
+              <div class="mono" id="snapshot"></div>
+            </div>
+          </div>
+        </section>
+        <section id="view-profile" class="view">
+          <div class="profile-layout">
+            <div class="card stack">
+              <h3 class="title-sm">Public Profile Editor</h3>
+              <form id="profileForm" class="stack">
+                <div class="row">
+                  <div>
+                    <label>Display Name</label>
+                    <input name="display_name" placeholder="Agent name" maxlength="48" />
+                    <div class="field-hint">Recommended 2-32 chars for better discoverability.</div>
+                    <div class="field-error" id="errDisplayName"></div>
+                  </div>
+                  <div>
+                    <label>Avatar URL</label>
+                    <input name="avatar_url" placeholder="https://..." />
+                    <div class="field-hint">Optional. Must be http(s) URL if provided.</div>
+                    <div class="field-error" id="errAvatarUrl"></div>
+                  </div>
+                </div>
+                <div>
+                  <label>Bio</label>
+                  <textarea name="bio" placeholder="Public summary" maxlength="280"></textarea>
+                  <div class="field-hint"><span id="bioCount">0</span>/280</div>
+                </div>
+                <div>
+                  <label>Tags (comma separated)</label>
+                  <input name="tags" placeholder="ai,browser,local-first" />
+                  <div class="field-hint">Up to 8 tags, each <= 20 chars.</div>
+                  <div class="field-error" id="errTags"></div>
+                </div>
+                <label><input type="checkbox" name="public_enabled" /> Public Enabled</label>
+                <div class="actions">
+                  <button type="submit" id="saveProfileBtn">Save Profile</button>
+                  <button type="button" class="secondary" id="refreshProfileBtn">Reload</button>
+                </div>
+              </form>
+              <div id="profileFeedback" class="feedback">Ready.</div>
+            </div>
+            <div class="card stack">
+              <h3 class="title-sm">Live Preview</h3>
+              <div class="profile-meta">
+                <h4>Public Card</h4>
+                <div id="previewName" class="preview-name">(unnamed agent)</div>
+                <div id="previewBio" class="preview-bio">No bio yet.</div>
+                <div id="previewTags" class="tag-chips"></div>
+              </div>
+              <div class="profile-meta">
+                <h4>Publish Status</h4>
+                <div class="mono" id="previewPublish">public_enabled: false</div>
+              </div>
+              <div class="profile-meta">
+                <h4>Public Profile Preview</h4>
+                <div class="field-hint">This is the signed public profile view other nodes/explorer can see.</div>
+                <div class="actions" style="margin-top:8px;">
+                  <button class="secondary" type="button" id="copyPublicProfilePreviewBtn">Copy public profile preview summary</button>
+                </div>
+                <div class="field-hint" id="publicVisibilityHint" style="margin-top:8px;">Visible fields: - | Hidden fields: -</div>
+                <div class="mono" id="publicVisibilityList" style="margin-top:6px;">-</div>
+                <div class="mono mono-block" id="publicProfilePreviewWrap">-</div>
+              </div>
+            </div>
+          </div>
+        </section>
+        <section id="view-network" class="view">
+          <div class="grid" id="networkCards"></div>
+          <div class="split">
+            <div class="card">
+              <h3 class="title-sm">Runtime Components</h3>
+              <div class="mono" id="networkComponents"></div>
+            </div>
+            <div class="card">
+              <h3 class="title-sm">Actions</h3>
+              <div class="actions">
+                <button id="startBroadcastBtn">Start Broadcast</button>
+                <button class="secondary" id="stopBroadcastBtn">Stop Broadcast</button>
+                <button class="secondary" id="broadcastNowBtn">Broadcast Now</button>
+                <button class="secondary" id="refreshCacheBtn">Refresh Cache</button>
+                <button class="secondary" id="clearCacheBtn">Clear Discovered Cache</button>
+                <button class="secondary" id="quickGlobalPreviewBtn">Enable Cross-network Preview</button>
+              </div>
+              <div id="networkFeedback" class="feedback" style="margin-top:10px;">Ready.</div>
+            </div>
+          </div>
+          <div class="split">
+            <div class="card" style="margin-top:10px;">
+              <h3 class="title-sm">Config Snapshot</h3>
+              <div class="mono mono-block" id="networkConfigSnapshot">-</div>
+            </div>
+            <div class="card" style="margin-top:10px;">
+              <h3 class="title-sm">Stats Snapshot</h3>
+              <div class="mono mono-block" id="networkStatsSnapshot">-</div>
+            </div>
+          </div>
+        </section>
+        <section id="view-peers" class="view">
+          <div class="grid" id="peerCards"></div>
+          <div class="card" style="margin-top:10px;">
+            <h3 class="title-sm">Peer Inventory</h3>
+            <div id="peerTableWrap"></div>
+          </div>
+          <div class="card" style="margin-top:10px;">
+            <h3 class="title-sm">Peer Discovery Stats</h3>
+            <div class="mono mono-block" id="peerStatsWrap">-</div>
+          </div>
+        </section>
+        <section id="view-discovery" class="view">
+          <div class="grid" id="discoveryCards"></div>
+          <div class="split">
+            <div class="card" style="margin-top:10px;">
+              <h3 class="title-sm">Recent Discovery Events</h3>
+              <div class="logs" id="discoveryEventList"></div>
+            </div>
+            <div class="card" style="margin-top:10px;">
+              <h3 class="title-sm">Discovery Snapshot</h3>
+              <div class="mono mono-block" id="discoverySnapshot">-</div>
+            </div>
+          </div>
+        </section>
+        <section id="view-social" class="view">
+          <div class="card">
+            <h3 class="title-sm">Integration Status</h3>
+            <div class="feedback" id="socialStatusLine">Checking integration status...</div>
+            <div class="field-hint" id="socialStatusSubline">-</div>
+            <div class="field-hint" id="socialStateHint">-</div>
+          </div>
+          <div class="grid" id="socialPrimaryCards" style="margin-top:10px;"></div>
+          <div class="grid" id="socialIntegrationCards"></div>
+          <details class="card" style="margin-top:10px;">
+            <summary class="title-sm" style="cursor:pointer;">Advanced Network Details</summary>
+            <div class="grid" id="socialAdvancedCards" style="margin-top:10px;"></div>
+            <div class="mono mono-block" id="socialAdvancedWrap" style="margin-top:10px;">-</div>
+          </details>
+          <div class="split">
+            <div class="card" style="margin-top:10px;">
+              <h3 class="title-sm">Source & Parsed Frontmatter</h3>
+              <div class="mono mono-block" id="socialSourceWrap">-</div>
+              <div style="height:10px;"></div>
+              <div class="mono mono-block" id="socialRawWrap">-</div>
+            </div>
+            <div class="card" style="margin-top:10px;">
+              <h3 class="title-sm">Runtime Summary</h3>
+              <div class="mono mono-block" id="socialRuntimeWrap">-</div>
+            </div>
+          </div>
+          <div class="card" style="margin-top:10px;">
+            <h3 class="title-sm">Export Template Preview</h3>
+            <div class="mono mono-block" id="socialTemplateWrap">-</div>
+          </div>
+          <div class="card" style="margin-top:10px;">
+            <h3 class="title-sm">Actions</h3>
+            <div class="toolbar">
+              <div class="field">
+                <label for="socialModeSelect">Network Mode (runtime)</label>
+                <select id="socialModeSelect">
+                  <option value="local">local</option>
+                  <option value="lan">lan</option>
+                  <option value="global-preview">global-preview</option>
+                </select>
+              </div>
+              <div>
+                <button class="secondary" id="socialModeApplyBtn">Apply Runtime Mode</button>
+              </div>
+            </div>
+            <div class="actions">
+              <button id="socialReloadBtn">Reload Config</button>
+              <button class="secondary" id="socialGenerateBtn">Generate Default social.md</button>
+              <button class="secondary" id="socialExportBtn">Export social.md template</button>
+              <button class="secondary" id="socialCopyBtn">Copy Template</button>
+              <button class="secondary" id="socialDownloadBtn">Download Template</button>
+            </div>
+            <div id="socialFeedback" class="feedback" style="margin-top:10px;">Ready.</div>
+          </div>
+        </section>
+        <section id="view-logs" class="view">
+          <div class="card">
+            <h3 class="title-sm">Recent Logs</h3>
+            <div class="toolbar">
+              <div class="field">
+                <label for="logLevelFilter">Category</label>
+                <select id="logLevelFilter">
+                  <option value="all">all</option>
+                  <option value="info">info</option>
+                  <option value="warn">warn</option>
+                  <option value="error">error</option>
+                </select>
+              </div>
+              <div>
+                <button type="button" class="secondary" id="refreshLogsBtn">Refresh Logs</button>
+              </div>
+            </div>
+            <div class="logs" id="logList"></div>
+          </div>
+        </section>
+      </main>
+    </div>
+    <div id="toast" class="toast"></div>
+    <script>
+      let activeTab = 'overview';
+      let profileBaseline = '';
+      let profileDirty = false;
+      let profileSaving = false;
+      let logsCache = [];
+      let logLevelFilter = 'all';
+      let socialTemplate = '';
+      let onlyShowOnline = false;
+      function ago(ts) {
+        if (!ts) return '-';
+        const s = Math.max(0, Math.floor((Date.now() - ts) / 1000));
+        if (s < 60) return `${s}s ago`;
+        if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+        return `${Math.floor(s / 3600)}h ago`;
+      }
+      function shortId(id) {
+        if (!id) return '-';
+        return `${id.slice(0, 10)}...${id.slice(-6)}`;
+      }
+      function toPrettyJson(obj) {
+        try {
+          return JSON.stringify(obj, null, 2);
+        } catch {
+          return String(obj);
+        }
+      }
+      function toast(msg) {
+        const t = document.getElementById('toast');
+        t.textContent = msg;
+        t.classList.add('show');
+        setTimeout(() => t.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 applyTheme(mode) {
+        const next = mode === 'light' ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-theme-mode', next);
+        localStorage.setItem('silicaclaw_theme_mode', next);
+        document.getElementById('themeDarkBtn').classList.toggle('active', next === 'dark');
+        document.getElementById('themeLightBtn').classList.toggle('active', next === 'light');
+      }
+      function parseTags(raw) {
+        return String(raw || '')
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean)
+          .filter((tag, idx, arr) => arr.indexOf(tag) === idx);
+      }
+      function field(form, name) {
+        return form.querySelector(`[name="${name}"]`);
+      }
+      function normalizeTagsInput(raw) {
+        return parseTags(raw).join(', ');
+      }
+      function profileSnapshot(form) {
+        const displayNameEl = field(form, 'display_name');
+        const bioEl = field(form, 'bio');
+        const avatarEl = field(form, 'avatar_url');
+        const tagsEl = field(form, 'tags');
+        const publicEl = field(form, 'public_enabled');
+        return JSON.stringify({
+          display_name: String(displayNameEl?.value || '').trim(),
+          bio: String(bioEl?.value || '').trim(),
+          avatar_url: String(avatarEl?.value || '').trim(),
+          tags: parseTags(tagsEl?.value || ''),
+          public_enabled: !!publicEl?.checked,
+        });
+      }
+      function updateDirtyState(form, fromUserInput = false) {
+        const now = profileSnapshot(form);
+        profileDirty = now !== profileBaseline;
+        if (fromUserInput && !profileSaving) {
+          setFeedback(
+            'profileFeedback',
+            profileDirty ? 'You have unsaved changes.' : 'All changes saved.',
+            profileDirty ? 'warn' : 'info'
+          );
+        }
+      }
+      function setProfileBaseline(form) {
+        profileBaseline = profileSnapshot(form);
+        profileDirty = false;
+      }
+      function setInputError(inputEl, errorElId, message) {
+        const errEl = document.getElementById(errorElId);
+        errEl.textContent = message || '';
+        if (inputEl) {
+          inputEl.classList.toggle('input-invalid', Boolean(message));
+        }
+      }
+      function validateProfileForm(form) {
+        const displayNameEl = field(form, 'display_name');
+        const avatarEl = field(form, 'avatar_url');
+        const tagsEl = field(form, 'tags');
+        const displayName = String(displayNameEl?.value || '').trim();
+        const avatarUrl = String(avatarEl?.value || '').trim();
+        const tags = parseTags(tagsEl?.value || '');
+        let ok = true;
+        let err = '';
+        if (displayName.length > 0 && displayName.length < 2) {
+          err = 'Display name should be at least 2 chars.';
+          ok = false;
+        } else if (displayName.length > 48) {
+          err = 'Display name too long.';
+          ok = false;
+        }
+        setInputError(displayNameEl, 'errDisplayName', err);
+        err = '';
+        if (avatarUrl && !/^https?:\/\//i.test(avatarUrl)) {
+          err = 'Avatar URL must start with http:// or https://';
+          ok = false;
+        }
+        setInputError(avatarEl, 'errAvatarUrl', err);
+        err = '';
+        if (tags.length > 8) {
+          err = 'Too many tags (max 8).';
+          ok = false;
+        } else if (tags.some((t) => t.length > 20)) {
+          err = 'Each tag must be <= 20 chars.';
+          ok = false;
+        }
+        setInputError(tagsEl, 'errTags', err);
+        return { ok, tags };
+      }
+      function renderProfilePreview(form) {
+        const displayName = String(field(form, 'display_name')?.value || '').trim();
+        const bio = String(field(form, 'bio')?.value || '').trim();
+        const tags = parseTags(field(form, 'tags')?.value || '');
+        const enabled = !!field(form, 'public_enabled')?.checked;
+        document.getElementById('previewName').textContent = displayName || '(unnamed agent)';
+        document.getElementById('previewBio').textContent = bio || 'No bio yet.';
+        document.getElementById('previewPublish').textContent = `public_enabled: ${enabled}`;
+        document.getElementById('bioCount').textContent = String(bio.length);
+        const tagBox = document.getElementById('previewTags');
+        if (!tags.length) {
+          tagBox.innerHTML = '<span class=\"tag-chip muted\">No tags</span>';
+          return;
+        }
+        tagBox.innerHTML = tags.map((tag) => `<span class=\"tag-chip\">${tag}</span>`).join('');
+      }
+      function setSaveBusy(busy) {
+        profileSaving = busy;
+        const btn = document.getElementById('saveProfileBtn');
+        btn.disabled = busy;
+        btn.classList.toggle('save-busy', busy);
+        btn.textContent = busy ? 'Saving...' : 'Save Profile';
+      }
+      async function api(path, options = {}) {
+        const res = await fetch(path, { headers: { 'Content-Type': 'application/json' }, ...options });
+        const json = await res.json().catch(() => null);
+        if (!res.ok || !json || !json.ok) {
+          throw new Error(json?.error?.message || `Request failed (${res.status})`);
+        }
+        return json;
+      }
+      function switchTab(tab) {
+        if (activeTab === 'profile' && tab !== 'profile' && profileDirty && !profileSaving) {
+          const ok = window.confirm('You have unsaved profile changes. Leave anyway?');
+          if (!ok) {
+            return;
+          }
+        }
+        activeTab = tab;
+        document.querySelectorAll('.tab').forEach((b) => b.classList.toggle('active', b.dataset.tab === tab));
+        ['overview', 'profile', 'network', 'peers', 'discovery', 'social', 'logs'].forEach((k) => {
+          document.getElementById(`view-${k}`).classList.toggle('active', k === tab);
+        });
+        if (tab === 'profile' && !profileDirty && !profileSaving) {
+          refreshProfile().catch(() => {});
+        }
+      }
+      async function refreshOverview() {
+        const [overview, discovered] = await Promise.all([api('/api/overview'), api('/api/search?q=')]);
+        const o = overview.data;
+        const all = discovered.data || [];
+        const d = onlyShowOnline ? all.filter((agent) => agent.online) : all;
+        document.getElementById('overviewCards').innerHTML = [
+          ['Discovered', o.discovered_count],
+          ['Online', o.online_count],
+          ['Offline', o.offline_count],
+          ['Presence TTL', `${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('snapshot').textContent = [
+          `agent_id: ${o.agent_id || '-'}`,
+          `public_enabled: ${o.public_enabled}`,
+          `broadcast_enabled: ${o.broadcast_enabled}`,
+          `last_broadcast: ${ago(o.last_broadcast_at)}`,
+        ].join('\n');
+        document.getElementById('pillBroadcast').textContent = o.broadcast_enabled ? 'broadcast: running' : 'broadcast: paused';
+        document.getElementById('pillBroadcast').className = `pill ${o.broadcast_enabled ? 'ok' : 'warn'}`;
+        const init = o.init_state || {};
+        const onboarding = o.onboarding || {};
+        const notice = document.getElementById('initNotice');
+        const onboardingActions = document.getElementById('onboardingActions');
+        const enableBtn = document.getElementById('enablePublicDiscoveryBtn');
+        const disableBtn = document.getElementById('disablePublicDiscoveryBtn');
+        const discoveryHint = document.getElementById('publicDiscoveryHint');
+        const showOnboarding = onboarding.first_run || init.identity_auto_created || init.profile_auto_created || init.social_auto_created;
+        if (onboarding.first_run || init.identity_auto_created || init.profile_auto_created || init.social_auto_created) {
+          notice.classList.add('show');
+          notice.textContent = `OpenClaw already connected to SilicaClaw · mode=${onboarding.mode || '-'} · discoverable=${onboarding.discoverable ? 'yes' : 'no'} · next: update display name and export social.md`;
+        } else {
+          notice.classList.remove('show');
+        }
+        if (onboarding.can_enable_public_discovery || onboarding.public_enabled) {
+          onboardingActions.style.display = 'flex';
+          discoveryHint.style.display = 'block';
+          if (onboarding.public_enabled) {
+            enableBtn.style.display = 'none';
+            disableBtn.style.display = 'inline-block';
+          } else {
+            enableBtn.style.display = 'inline-block';
+            disableBtn.style.display = 'none';
+          }
+        } else {
+          onboardingActions.style.display = 'none';
+          discoveryHint.style.display = 'none';
+        }
+        if (!d.length) {
+          document.getElementById('agentsCountHint').textContent = '0 agents';
+          document.getElementById('agentsWrap').innerHTML = '<div class="label">No discovered agents yet.</div>';
+        } else {
+          document.getElementById('agentsCountHint').textContent = onlyShowOnline
+            ? `${d.length}/${all.length} agents (online filter)`
+            : `${d.length} agents discovered`;
+          document.getElementById('agentsWrap').innerHTML = `
+            <table class="table">
+              <thead><tr><th>Name</th><th>Agent ID</th><th>Status</th><th>Updated</th></tr></thead>
+              <tbody>
+                ${d.map((a) => `
+                  <tr>
+                    <td>${a.display_name || '(unnamed)'}</td>
+                    <td class="mono">${shortId(a.agent_id)}</td>
+                    <td class="${a.online ? 'online' : 'offline'}">${a.online ? 'online' : 'offline'}</td>
+                    <td>${ago(a.updated_at)}</td>
+                  </tr>
+                `).join('')}
+              </tbody>
+            </table>
+          `;
+        }
+      }
+      async function refreshProfile() {
+        const p = (await api('/api/profile')).data;
+        if (!p) return;
+        const f = document.getElementById('profileForm');
+        field(f, 'display_name').value = p.display_name || '';
+        field(f, 'bio').value = p.bio || '';
+        field(f, 'tags').value = (p.tags || []).join(', ');
+        field(f, 'avatar_url').value = p.avatar_url || '';
+        field(f, 'public_enabled').checked = !!p.public_enabled;
+        renderProfilePreview(f);
+        setProfileBaseline(f);
+        await refreshPublicProfilePreview();
+      }
+      async function refreshPublicProfilePreview() {
+        const summary = (await api('/api/public-profile/preview')).data;
+        document.getElementById('publicProfilePreviewWrap').textContent = toPrettyJson(summary || null);
+        const visibleFields = summary?.public_visibility?.visible_fields || [];
+        const hiddenFields = summary?.public_visibility?.hidden_fields || [];
+        const visible = visibleFields.join(', ') || '-';
+        const hidden = hiddenFields.join(', ') || '-';
+        document.getElementById('publicVisibilityHint').textContent = `Visible fields: ${visible} | Hidden fields: ${hidden}`;
+        const rows = [
+          ...visibleFields.map((field) => `[visible] ${field}`),
+          ...hiddenFields.map((field) => `[hidden]  ${field}`),
+        ];
+        document.getElementById('publicVisibilityList').textContent = rows.length ? rows.join('\n') : '-';
+      }
+      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 t = 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('pillAdapter').textContent = `adapter: ${c.adapter}`;
+        document.getElementById('sideMeta').innerHTML = `adapter: ${c.adapter}<br/>namespace: ${c.namespace || '-'}<br/>port: ${c.port ?? '-'}`;
+        document.getElementById('networkCards').innerHTML = [
+          ['Adapter', c.adapter],
+          ['Namespace', c.namespace || '-'],
+          ['Port', c.port ?? '-'],
+          ['Started', ac.started === true ? 'yes' : ac.started === false ? 'no' : '-'],
+          ['Transport State', ac.transport?.state || '-'],
+          ['Signaling URL', dx.signaling_url || '-'],
+          ['Signaling Endpoints', (dx.signaling_endpoints || []).length || 0],
+          ['WebRTC Room', dx.room || '-'],
+          ['Bootstrap Sources', (dx.bootstrap_sources || []).length || 0],
+          ['Seed Peers', dx.seed_peers_count ?? 0],
+          ['Discovery Events', dx.discovery_events_total ?? 0],
+          ['Recv', msg.received_total ?? 0],
+          ['Sent', msg.broadcast_total ?? 0],
+          ['Peers', p.total ?? 0],
+          ['Online Peers', p.online ?? 0],
+          ['Active WebRTC Peers', dx.active_webrtc_peers ?? '-'],
+          ['Reconnect Attempts', dx.reconnect_attempts_total ?? '-'],
+          ['Last Inbound', ago(msg.last_message_at)],
+          ['Last Outbound', 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('');
+        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: ${t.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 ?? '-'}`,
+          `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 = [
+          ['Total', peers.total || 0],
+          ['Online', peers.online || 0],
+          ['Stale', peers.stale || 0],
+          ['Namespace', peers.namespace || '-'],
+          ['Signaling URL', summary.signaling_url || '-'],
+          ['Signaling Endpoints', (summary.signaling_endpoints || []).length || 0],
+          ['Room', summary.room || '-'],
+          ['Bootstrap Sources', (summary.bootstrap_sources || []).length || 0],
+          ['Seed Peers', summary.seed_peers_count ?? 0],
+          ['Discovery Events', summary.discovery_events_total ?? 0],
+          ['Active WebRTC Peers', summary.active_webrtc_peers ?? '-'],
+          ['Observe Calls', ds.observe_calls || 0],
+          ['Heartbeats', ds.heartbeat_sent || 0],
+          ['Peers Added', ds.peers_added || 0],
+          ['Peers Removed', 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="label">No peers discovered yet.</div>';
+          document.getElementById('peerStatsWrap').textContent = toPrettyJson({
+            discovery_stats: ds,
+            diagnostics_summary: summary,
+          });
+          return;
+        }
+        document.getElementById('peerTableWrap').innerHTML = `
+          <table class="table">
+            <thead><tr><th>Peer</th><th>Status</th><th>Last Seen</th><th>Stale Since</th><th>Messages</th><th>First Seen</th><th>Meta</th></tr></thead>
+            <tbody>
+              ${peers.items.map((peer) => `
+                <tr>
+                  <td class="mono">${shortId(peer.peer_id)}</td>
+                  <td class="${peer.status === 'online' ? 'online' : 'stale'}">${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 = [
+          ['Adapter', payload.adapter || '-'],
+          ['Namespace', payload.namespace || '-'],
+          ['Events Total', payload.total ?? 0],
+          ['Last Event', ago(payload.last_event_at)],
+          ['Signaling Endpoints', (payload.signaling_endpoints || []).length || 0],
+          ['Seed Peers', 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="label">No discovery events yet.</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);
+      }
+      async function refreshSocial() {
+        const [socialRes, summaryRes, statusRes] = await Promise.all([
+          api('/api/social/config'),
+          api('/api/social/integration-summary'),
+          api('/api/integration/status'),
+        ]);
+        const social = socialRes.data || {};
+        const summary = summaryRes.data || {};
+        const status = statusRes.data || {};
+        const runtime = social.runtime || {};
+        const config = social.social_config || {};
+        const network = config.network || {};
+        const runtimeNetwork = runtime.resolved_network || {};
+        const discoverable = status.discoverable === true;
+        const mode = status.network_mode || summary.current_network_mode || network.mode || runtimeNetwork.mode || '-';
+        const summaryLine = status.status_line || summary.summary_line || `${summary.connected ? 'Connected to SilicaClaw' : 'Not connected to SilicaClaw'} · ${discoverable ? 'Discoverable in current mode' : 'Not discoverable in current mode'} · Using ${mode}`;
+        const publicDiscoveryText = status.public_enabled ? 'Public discovery enabled' : 'Public discovery disabled';
+        const namespaceText = `${status.connected_to_silicaclaw ? 'Connected to SilicaClaw' : 'Not connected'} · ${publicDiscoveryText} · 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'}`;
+        bar.textContent = `Connected to SilicaClaw: ${status.connected_to_silicaclaw ? 'yes' : 'no'} · Network mode: ${mode} · Public discovery: ${status.public_enabled ? 'enabled' : 'disabled'}`;
+        const reasons = [];
+        if (!status.configured && status.configured_reason) reasons.push(`Configured: ${status.configured_reason}`);
+        if (!status.running && status.running_reason) reasons.push(`Running: ${status.running_reason}`);
+        if (!status.discoverable && status.discoverable_reason) reasons.push(`Discoverable: ${status.discoverable_reason}`);
+        document.getElementById('socialStateHint').textContent = reasons.length ? reasons.join(' · ') : 'All integration checks passed.';
+        const modeSelect = document.getElementById('socialModeSelect');
+        if (modeSelect && mode !== '-') {
+          modeSelect.value = mode;
+        }
+        document.getElementById('socialPrimaryCards').innerHTML = [
+          ['Configured', status.configured ? 'yes' : 'no'],
+          ['Running', status.running ? 'yes' : 'no'],
+          ['Discoverable', discoverable ? 'yes' : 'no'],
+          ['Public discovery', status.public_enabled ? 'enabled' : 'disabled'],
+          ['network mode', mode],
+          ['connected', status.connected_to_silicaclaw ? 'yes' : 'no'],
+          ['discoverable reason', 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 = [
+          ['display name', status.display_name || '(unnamed)'],
+          ['agent id', shortId(status.agent_id || '')],
+          ['social.md found', summary.social_md_found ? 'yes' : 'no'],
+          ['social.md source', summary.social_md_source_path || '-'],
+          ['runtime generated', summary.runtime_generated ? 'yes' : 'no'],
+          ['reuse OpenClaw identity', summary.reused_openclaw_identity ? 'yes' : 'no'],
+          ['mode', mode],
+          ['broadcast status', summary.current_broadcast_status || '-'],
+        ].map(([k,v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join('');
+        document.getElementById('socialAdvancedCards').innerHTML = [
+          ['adapter', runtimeNetwork.adapter || summary.current_adapter || '-'],
+          ['namespace', runtimeNetwork.namespace || summary.current_namespace || '-'],
+          ['room', runtimeNetwork.room || network.room || '-'],
+          ['signaling endpoints', (runtimeNetwork.signaling_urls || []).length || 0],
+          ['bootstrap sources', (runtimeNetwork.bootstrap_sources || []).length || 0],
+          ['seed peers', (runtimeNetwork.seed_peers || []).length || 0],
+          ['bootstrap hints', (runtimeNetwork.bootstrap_hints || []).length || 0],
+          ['restart required', social.network_requires_restart ? 'yes' : '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({
+          runtime_network: runtimeNetwork,
+        });
+        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 || {};
+        socialTemplate = String(payload.content || '');
+        document.getElementById('socialTemplateWrap').textContent = socialTemplate || '-';
+        return payload;
+      }
+      function renderLogs() {
+        const el = document.getElementById('logList');
+        if (!logsCache.length) {
+          el.innerHTML = '<div class="label">No logs yet.</div>';
+          return;
+        }
+        const filtered = logLevelFilter === 'all'
+          ? logsCache
+          : logsCache.filter((l) => String(l.level || '').toLowerCase() === logLevelFilter);
+        if (!filtered.length) {
+          el.innerHTML = `<div class="label">No ${logLevelFilter} logs.</div>`;
+          return;
+        }
+        el.innerHTML = filtered.map((l) => `
+          <div class="log-item">
+            <div class="log-${l.level}">[${String(l.level).toUpperCase()}] ${l.message}</div>
+            <div class="mono" style="color:#90a2c3;">${new Date(l.timestamp).toLocaleString()}</div>
+          </div>
+        `).join('');
+      }
+      async function refreshLogs() {
+        logsCache = (await api('/api/logs')).data || [];
+        renderLogs();
+      }
+      async function refreshAll() {
+        try {
+          const tasks = [refreshOverview(), refreshNetwork(), refreshPeers(), refreshDiscovery(), refreshSocial(), refreshLogs(), refreshPublicProfilePreview()];
+          const shouldRefreshProfile = !(activeTab === 'profile' && profileDirty);
+          if (shouldRefreshProfile) {
+            tasks.push(refreshProfile());
+          }
+          await Promise.all(tasks);
+        } catch (e) {
+          setFeedback('networkFeedback', e instanceof Error ? e.message : 'Unknown error', 'error');
+        }
+      }
+      document.querySelectorAll('.tab').forEach((btn) => {
+        btn.addEventListener('click', () => switchTab(btn.dataset.tab));
+      });
+      document.getElementById('themeDarkBtn').addEventListener('click', () => applyTheme('dark'));
+      document.getElementById('themeLightBtn').addEventListener('click', () => applyTheme('light'));
+      document.getElementById('profileForm').addEventListener('submit', async (event) => {
+        event.preventDefault();
+        const f = event.currentTarget;
+        const result = validateProfileForm(f);
+        if (!result.ok) {
+          setFeedback('profileFeedback', 'Please fix validation errors before saving.', 'warn');
+          return;
+        }
+        const tags = result.tags;
+        setFeedback('profileFeedback', 'Saving profile...');
+        setSaveBusy(true);
+        try {
+          const r = await api('/api/profile', { method: 'PUT', body: JSON.stringify({
+            display_name: field(f, 'display_name').value,
+            bio: field(f, 'bio').value,
+            tags,
+            avatar_url: field(f, 'avatar_url').value,
+            public_enabled: !!field(f, 'public_enabled').checked,
+          })});
+          setFeedback('profileFeedback', r.meta?.message || 'Saved.');
+          toast('Profile saved');
+          field(f, 'tags').value = normalizeTagsInput(field(f, 'tags').value);
+          await refreshAll();
+        } catch (e) {
+          setFeedback('profileFeedback', e instanceof Error ? e.message : 'Failed', 'error');
+        } finally {
+          setSaveBusy(false);
+        }
+      });
+      document.getElementById('refreshProfileBtn').addEventListener('click', async () => {
+        await refreshProfile();
+        toast('Profile form reloaded');
+      });
+      const profileFormEl = document.getElementById('profileForm');
+      ['input', 'change'].forEach((evt) => {
+        profileFormEl.addEventListener(evt, () => {
+          renderProfilePreview(profileFormEl);
+          validateProfileForm(profileFormEl);
+          updateDirtyState(profileFormEl, true);
+        });
+      });
+      const tagsInputEl = field(profileFormEl, 'tags');
+      tagsInputEl.addEventListener('keydown', (event) => {
+        if (event.key !== 'Enter') return;
+        event.preventDefault();
+        tagsInputEl.value = normalizeTagsInput(tagsInputEl.value);
+        renderProfilePreview(profileFormEl);
+        validateProfileForm(profileFormEl);
+        updateDirtyState(profileFormEl, true);
+      });
+      tagsInputEl.addEventListener('blur', () => {
+        tagsInputEl.value = normalizeTagsInput(tagsInputEl.value);
+        renderProfilePreview(profileFormEl);
+        validateProfileForm(profileFormEl);
+        updateDirtyState(profileFormEl, true);
+      });
+      window.addEventListener('beforeunload', (event) => {
+        if (!profileDirty || profileSaving) return;
+        event.preventDefault();
+        event.returnValue = '';
+      });
+      async function runAction(path, text, level = 'info') {
+        setFeedback('networkFeedback', text);
+        try {
+          const r = await api(path, { method: 'POST' });
+          setFeedback('networkFeedback', r.meta?.message || 'Done', level);
+          toast(r.meta?.message || 'Done');
+          await refreshAll();
+        } catch (e) {
+          setFeedback('networkFeedback', e instanceof Error ? e.message : 'Failed', 'error');
+        }
+      }
+      document.getElementById('startBroadcastBtn').addEventListener('click', () => runAction('/api/broadcast/start', 'Starting...'));
+      document.getElementById('stopBroadcastBtn').addEventListener('click', () => runAction('/api/broadcast/stop', 'Stopping...', 'warn'));
+      document.getElementById('broadcastNowBtn').addEventListener('click', () => runAction('/api/broadcast/now', 'Broadcasting now...'));
+      document.getElementById('refreshCacheBtn').addEventListener('click', () => runAction('/api/cache/refresh', 'Refreshing cache...'));
+      document.getElementById('clearCacheBtn').addEventListener('click', async () => {
+        const ok = window.confirm('Clear discovered cache now?\n\nThis removes discovered peer profiles/presence/index references and keeps your self profile.');
+        if (!ok) return;
+        await runAction('/api/cache/clear', 'Clearing discovered cache...', 'warn');
+      });
+      document.getElementById('quickGlobalPreviewBtn').addEventListener('click', async () => {
+        const currentSignaling = window.prompt('Signaling URL (publicly reachable):', 'http://localhost:4510');
+        if (!currentSignaling) return;
+        const room = window.prompt('Room:', 'silicaclaw-demo') || 'silicaclaw-demo';
+        setFeedback('networkFeedback', 'Enabling cross-network preview...');
+        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 || 'Cross-network preview enabled');
+          toast('Cross-network preview enabled');
+          await refreshAll();
+        } catch (e) {
+          setFeedback('networkFeedback', e instanceof Error ? e.message : 'Enable cross-network preview failed', 'error');
+        }
+      });
+      document.getElementById('onlyOnlineToggle').addEventListener('change', async (event) => {
+        onlyShowOnline = Boolean(event.target?.checked);
+        await refreshOverview();
+      });
+      document.getElementById('refreshLogsBtn').addEventListener('click', async () => {
+        await refreshLogs();
+        toast('Logs refreshed');
+      });
+      document.getElementById('enablePublicDiscoveryBtn').addEventListener('click', async () => {
+        const ok = window.confirm(
+          'Enable public discovery now?\n\n' +
+          '- Only profile/presence are shared.\n' +
+          '- Private files are not shared.\n' +
+          '- Chat and remote control are not enabled.\n\n' +
+          'This updates runtime state and does not overwrite social.md.'
+        );
+        if (!ok) return;
+        setFeedback('networkFeedback', 'Enabling public discovery...');
+        try {
+          const res = await api('/api/public-discovery/enable', { method: 'POST' });
+          setFeedback('networkFeedback', res.meta?.message || 'Public discovery enabled.');
+          toast('Public discovery enabled');
+          await refreshAll();
+        } catch (e) {
+          setFeedback('networkFeedback', e instanceof Error ? e.message : 'Enable public discovery failed', 'error');
+        }
+      });
+      document.getElementById('disablePublicDiscoveryBtn').addEventListener('click', async () => {
+        const ok = window.confirm('Disable public discovery now? This updates runtime state and does not overwrite social.md.');
+        if (!ok) return;
+        setFeedback('networkFeedback', 'Disabling public discovery...');
+        try {
+          const res = await api('/api/public-discovery/disable', { method: 'POST' });
+          setFeedback('networkFeedback', res.meta?.message || 'Public discovery disabled.');
+          toast('Public discovery disabled');
+          await refreshAll();
+        } catch (e) {
+          setFeedback('networkFeedback', e instanceof Error ? e.message : 'Disable public discovery failed', 'error');
+        }
+      });
+      document.getElementById('socialReloadBtn').addEventListener('click', async () => {
+        setFeedback('socialFeedback', 'Reloading social config...');
+        try {
+          const res = await api('/api/social/reload', { method: 'POST' });
+          setFeedback('socialFeedback', res.meta?.message || 'Reloaded');
+          toast('Social config reloaded');
+          await refreshAll();
+        } catch (e) {
+          setFeedback('socialFeedback', e instanceof Error ? e.message : 'Reload failed', 'error');
+        }
+      });
+      document.getElementById('socialGenerateBtn').addEventListener('click', async () => {
+        setFeedback('socialFeedback', 'Generating default social.md...');
+        try {
+          const res = await api('/api/social/generate-default', { method: 'POST' });
+          setFeedback('socialFeedback', res.meta?.message || 'Done');
+          toast(res.meta?.message || 'Default social.md ready');
+          await refreshAll();
+        } catch (e) {
+          setFeedback('socialFeedback', e instanceof Error ? e.message : 'Generate failed', 'error');
+        }
+      });
+      document.getElementById('socialExportBtn').addEventListener('click', async () => {
+        setFeedback('socialFeedback', 'Exporting template...');
+        try {
+          await exportSocialTemplate();
+          setFeedback('socialFeedback', 'Template exported from current runtime.');
+          toast('Template exported');
+        } catch (e) {
+          setFeedback('socialFeedback', e instanceof Error ? e.message : 'Export failed', 'error');
+        }
+      });
+      document.getElementById('socialModeApplyBtn').addEventListener('click', async () => {
+        const mode = document.getElementById('socialModeSelect').value;
+        setFeedback('socialFeedback', `Applying runtime mode: ${mode}...`);
+        try {
+          const res = await api('/api/social/runtime-mode', {
+            method: 'POST',
+            body: JSON.stringify({ mode }),
+          });
+          setFeedback('socialFeedback', res.meta?.message || 'Runtime mode updated.');
+          toast(`Runtime mode: ${mode}`);
+          await refreshAll();
+        } catch (e) {
+          setFeedback('socialFeedback', e instanceof Error ? e.message : 'Runtime mode update failed', 'error');
+        }
+      });
+      document.getElementById('socialCopyBtn').addEventListener('click', async () => {
+        setFeedback('socialFeedback', 'Copying template...');
+        const btn = document.getElementById('socialCopyBtn');
+        try {
+          if (!socialTemplate) {
+            await exportSocialTemplate();
+          }
+          await navigator.clipboard.writeText(socialTemplate);
+          setFeedback('socialFeedback', 'Template copied to clipboard.');
+          toast('Copied');
+          flashButton(btn, 'Copied');
+        } catch (e) {
+          setFeedback('socialFeedback', e instanceof Error ? e.message : 'Copy failed', 'error');
+        }
+      });
+      document.getElementById('socialDownloadBtn').addEventListener('click', async () => {
+        setFeedback('socialFeedback', 'Preparing download...');
+        try {
+          const payload = await exportSocialTemplate();
+          const filename = String(payload.filename || 'social.md');
+          const blob = new Blob([socialTemplate], { 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', `Downloaded ${filename}.`);
+          toast('Downloaded');
+        } catch (e) {
+          setFeedback('socialFeedback', e instanceof Error ? e.message : 'Download failed', '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('Public profile preview copied');
+          flashButton(btn, 'Copied');
+        } catch (e) {
+          setFeedback('profileFeedback', e instanceof Error ? e.message : 'Copy preview failed', 'error');
+        }
+      });
+      document.getElementById('logLevelFilter').addEventListener('change', (event) => {
+        logLevelFilter = 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');
+        });
+      })();
+      applyTheme(localStorage.getItem('silicaclaw_theme_mode') || 'dark');
+      refreshAll();
+      exportSocialTemplate().catch(() => {});
+      setInterval(refreshAll, 4000);
+    </script>
+  </body>
+</html>