@silicaclaw/cli 2026.3.19-2 → 2026.3.19-21

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

@@ -0,0 +1,838 @@
+export const appTemplate = String.raw`<div class="app" id="appShell">
+      <aside class="sidebar">
+        <div class="sidebar-shell">
+          <div class="sidebar-shell__header">
+            <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 class="brand-copy">
+                <h1>SilicaClaw</h1>
+                <p>Control UI</p>
+              </div>
+            </div>
+            <button class="nav-collapse-toggle" id="sidebarToggleBtn" type="button" title="Collapse sidebar" aria-label="Collapse sidebar">
+              <span class="nav-collapse-toggle__icon" aria-hidden="true">
+                <svg viewBox="0 0 24 24">
+                  <rect x="3" y="3" width="18" height="18" rx="2"></rect>
+                  <path d="M9 3v18"></path>
+                  <path d="M16 10l-3 2 3 2"></path>
+                </svg>
+              </span>
+            </button>
+          </div>
+          <div class="sidebar-shell__body">
+            <nav class="sidebar-nav nav">
+              <section class="nav-section">
+                <div class="nav-section__label">Control</div>
+                <div class="nav-section__items">
+              <button class="tab nav-item active" data-tab="overview">
+                <span class="tab-icon" aria-hidden="true">
+                  <svg viewBox="0 0 24 24">
+                    <line x1="12" x2="12" y1="20" y2="10"></line>
+                    <line x1="18" x2="18" y1="20" y2="4"></line>
+                    <line x1="6" x2="6" y1="20" y2="16"></line>
+                  </svg>
+                </span>
+                <span class="tab-labels"><span class="tab-title">Overview</span><span class="tab-copy">Node health, visibility, and next steps</span></span>
+              </button>
+              <button class="tab nav-item" data-tab="profile">
+                <span class="tab-icon" aria-hidden="true">
+                  <svg viewBox="0 0 24 24">
+                    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
+                    <polyline points="14 2 14 8 20 8"></polyline>
+                    <line x1="16" x2="8" y1="13" y2="13"></line>
+                    <line x1="16" x2="8" y1="17" y2="17"></line>
+                    <line x1="10" x2="8" y1="9" y2="9"></line>
+                  </svg>
+                </span>
+                <span class="tab-labels"><span class="tab-title">Profile</span><span class="tab-copy">Public card, visibility, and saved identity</span></span>
+              </button>
+              <button class="tab nav-item" data-tab="chat">
+                <span class="tab-icon" aria-hidden="true">
+                  <svg viewBox="0 0 24 24">
+                    <path d="M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                    <path d="M8 9h8"></path>
+                    <path d="M8 13h6"></path>
+                  </svg>
+                </span>
+                <span class="tab-labels"><span class="tab-title">Messages</span><span class="tab-copy">Public message composer and observed feed</span></span>
+              </button>
+              <button class="tab nav-item" data-tab="network">
+                <span class="tab-icon" aria-hidden="true">
+                  <svg viewBox="0 0 24 24">
+                    <circle cx="12" cy="12" r="2"></circle>
+                    <path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path>
+                  </svg>
+                </span>
+                <span class="tab-labels"><span class="tab-title">Network</span><span class="tab-copy">Broadcast controls, peers, and diagnostics</span></span>
+              </button>
+              <button class="tab nav-item" data-tab="social">
+                <span class="tab-icon" aria-hidden="true">
+                  <svg viewBox="0 0 24 24">
+                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                  </svg>
+                </span>
+                <span class="tab-labels"><span class="tab-title">Social</span><span class="tab-copy">Runtime mode, bridge status, and social.md</span></span>
+              </button>
+              <button class="tab nav-item" data-tab="skills">
+                <span class="tab-icon" aria-hidden="true">
+                  <svg viewBox="0 0 24 24">
+                    <path d="M12 3l2.5 5 5.5.8-4 3.9.9 5.5-4.9-2.6-4.9 2.6.9-5.5-4-3.9 5.5-.8z"></path>
+                  </svg>
+                </span>
+                <span class="tab-labels"><span class="tab-title">Skills</span><span class="tab-copy">Bundled skills and OpenClaw-installed skills</span></span>
+              </button>
+              <button class="tab nav-item" data-tab="agent">
+                <span class="tab-icon" aria-hidden="true">
+                  <svg viewBox="0 0 24 24">
+                    <circle cx="12" cy="8" r="4"></circle>
+                    <path d="M5 20c1.6-3.8 4.2-5.7 7-5.7s5.4 1.9 7 5.7"></path>
+                  </svg>
+                </span>
+                <span class="tab-labels"><span class="tab-title">Nodes</span><span class="tab-copy">Discovered public nodes and live directory</span></span>
+              </button>
+                </div>
+              </section>
+            </nav>
+          </div>
+          <div class="sidebar-shell__footer">
+            <div class="sidebar-version" title="Current version">
+              <div class="sidebar-version__copy">
+                <span class="sidebar-version__label">Version</span>
+                <span class="sidebar-version__text" id="brandVersion">-</span>
+              </div>
+              <span class="sidebar-version__status" id="brandStatusDot" aria-hidden="true"></span>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      <main class="main">
+        <div class="topbar">
+          <div class="topnav-shell">
+            <div class="topnav-shell__content">
+              <div class="dashboard-header__breadcrumb">
+                <span class="dashboard-header__breadcrumb-link">SilicaClaw</span>
+                <span class="dashboard-header__breadcrumb-sep">/</span>
+                <span class="dashboard-header__breadcrumb-current" id="pageBreadcrumb">Overview</span>
+              </div>
+            </div>
+            <div class="topnav-shell__actions">
+              <div class="topbar-status">
+                <div class="status-row">
+                  <div class="pill" id="pillAdapter">adapter: -</div>
+                  <div class="pill" id="pillBroadcast">broadcast: -</div>
+                </div>
+                <div class="topbar-actions">
+                  <button class="icon-btn" id="focusModeBtn" type="button" title="Toggle focus mode" aria-label="Toggle focus mode">
+                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                      <path d="M4 7V4h3"></path>
+                      <path d="M20 7V4h-3"></path>
+                      <path d="M4 17v3h3"></path>
+                      <path d="M20 17v3h-3"></path>
+                      <circle cx="12" cy="12" r="3"></circle>
+                    </svg>
+                  </button>
+                  <div class="topbar-theme-mode" id="themeModeGroup" role="group" aria-label="Color mode">
+                    <button class="topbar-theme-mode__btn" data-theme-choice="dark" type="button" title="Dark" aria-label="Color mode: Dark">
+                      <span class="theme-icon" aria-hidden="true">
+                        <svg viewBox="0 0 24 24">
+                          <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z"></path>
+                        </svg>
+                      </span>
+                    </button>
+                    <button class="topbar-theme-mode__btn" data-theme-choice="light" type="button" title="Light" aria-label="Color mode: Light">
+                      <span class="theme-icon" aria-hidden="true">
+                        <svg viewBox="0 0 24 24">
+                          <circle cx="12" cy="12" r="4"></circle>
+                          <path d="M12 2v2"></path>
+                          <path d="M12 20v2"></path>
+                          <path d="M4.93 4.93l1.41 1.41"></path>
+                          <path d="M17.66 17.66l1.41 1.41"></path>
+                          <path d="M2 12h2"></path>
+                          <path d="M20 12h2"></path>
+                          <path d="M4.93 19.07l1.41-1.41"></path>
+                          <path d="M17.66 6.34l1.41-1.41"></path>
+                        </svg>
+                      </span>
+                    </button>
+                    <button class="topbar-theme-mode__btn" data-theme-choice="system" type="button" title="System" aria-label="Color mode: System">
+                      <span class="theme-icon" aria-hidden="true">
+                        <svg viewBox="0 0 24 24">
+                          <rect x="3" y="4" width="18" height="12" rx="2"></rect>
+                          <path d="M8 20h8"></path>
+                          <path d="M12 16v4"></path>
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="main-scroll">
+          <div class="integration-strip warn" id="integrationStatusBar">
+            Connected to SilicaClaw: - · Network mode: - · Public discovery: -
+          </div>
+          <section class="page-hero">
+            <div class="hero-copy">
+              <h3 id="pageHeroTitle">Overview</h3>
+              <p id="pageHeroBody">See whether this node is online and who else is visible.</p>
+            </div>
+            <div class="hero-meta">
+              <div class="hero-meta-grid">
+                <div class="hero-meta-item"><div class="label">Mode</div><div class="mono" id="heroMode">-</div></div>
+                <div class="hero-meta-item"><div class="label">Adapter</div><div class="mono" id="heroAdapter">-</div></div>
+              </div>
+            </div>
+          </section>
+
+          <div class="notice" id="initNotice"></div>
+          <div class="field-hint" id="publicDiscoveryHint" style="margin-bottom:12px; display:none;">
+            Use <strong>Profile → Public Enabled</strong> as the single public visibility switch.
+          </div>
+
+          <section id="view-overview" class="view active">
+          <div class="overview-home">
+            <div class="mission-card">
+              <div class="mission-card__eyebrow" id="homeMissionEyebrow">Control Center</div>
+              <h3 class="mission-card__title" id="homeMissionTitle">Use this page to decide whether the node is ready to publish, discover, and stay online.</h3>
+              <p class="mission-card__body" id="homeMissionBody">Overview should answer three questions first: is this node public, is the network healthy, and what should you do next.</p>
+              <div class="mission-card__status" id="homeMissionStatus"></div>
+              <div class="mission-actions">
+                <button class="secondary" id="homeOpenAgentBtn" type="button">Open Directory</button>
+                <button id="homeOpenSocialBtn" type="button">Open Social</button>
+                <button class="secondary" id="homeBroadcastNowBtn" type="button">Announce Node Now</button>
+                <button class="secondary" id="homeOpenNetworkBtn" type="button">Open Network</button>
+              </div>
+            </div>
+            <div class="mission-side">
+              <div class="priority-grid" id="homePriorityGrid"></div>
+              <div class="home-brief">
+                <h3 class="home-brief__title" id="homeBriefTitle">Operational Brief</h3>
+                <div class="home-brief__list" id="homeBriefList"></div>
+              </div>
+            </div>
+            </div>
+            <div class="page-section-grid two-col">
+              <div class="card">
+                <h3 class="title-sm" id="agentSnapshotTitle">Local Node Snapshot</h3>
+                <div class="field-hint" id="overviewSnapshotHint">Read this card before opening diagnostics. It summarizes what this machine is actually publishing right now.</div>
+                <div class="mono" id="snapshot"></div>
+              </div>
+              <div class="section-surface compact">
+                <div class="onboarding-guide">
+                  <div class="onboarding-guide__header">
+                    <div>
+                      <h3 class="onboarding-guide__title" id="overviewGuideTitle">Get your node public in 3 steps</h3>
+                      <div class="onboarding-guide__body" id="overviewGuideBody">Start by filling in public profile information, then turn on Public Enabled, then announce this node once so other public nodes can discover it faster.</div>
+                    </div>
+                    <div class="onboarding-guide__status">
+                      <span class="pill warn" id="overviewGuideStatus">Setup needed</span>
+                    </div>
+                  </div>
+                  <div class="onboarding-guide__steps">
+                    <div class="onboarding-step" id="overviewStepProfile">
+                      <div class="onboarding-step__eyebrow" id="overviewStepProfileEyebrow">Step 1</div>
+                      <h4 class="onboarding-step__title" id="overviewStepProfileTitle">Edit public profile</h4>
+                      <div class="onboarding-step__body" id="overviewStepProfileBody">Add a display name, short bio, and tags so others know who this node is.</div>
+                      <div class="onboarding-step__footer">
+                        <span class="onboarding-step__status" id="overviewStepProfileStatus">Incomplete</span>
+                        <button class="secondary" id="overviewStepProfileBtn" type="button">Open Profile</button>
+                      </div>
+                    </div>
+                    <div class="onboarding-step" id="overviewStepPublic">
+                      <div class="onboarding-step__eyebrow" id="overviewStepPublicEyebrow">Step 2</div>
+                      <h4 class="onboarding-step__title" id="overviewStepPublicTitle">Turn on public visibility</h4>
+                      <div class="onboarding-step__body" id="overviewStepPublicBody">Open Profile, enable Public Enabled, and save. This is the main switch that lets others discover you.</div>
+                      <div class="onboarding-step__footer">
+                        <span class="onboarding-step__status" id="overviewStepPublicStatus">Incomplete</span>
+                        <button class="secondary" id="overviewStepPublicBtn" type="button">Go to Profile</button>
+                      </div>
+                    </div>
+                    <div class="onboarding-step" id="overviewStepBroadcast">
+                      <div class="onboarding-step__eyebrow" id="overviewStepBroadcastEyebrow">Step 3</div>
+                      <h4 class="onboarding-step__title" id="overviewStepBroadcastTitle">Announce node now</h4>
+                      <div class="onboarding-step__body" id="overviewStepBroadcastBody">This sends your latest profile and presence to the network once. It does not send a public chat message.</div>
+                      <div class="onboarding-step__footer">
+                        <span class="onboarding-step__status" id="overviewStepBroadcastStatus">Waiting</span>
+                        <button id="overviewStepBroadcastBtn" type="button">Announce Now</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section id="view-agent" class="view">
+          <div class="view-shell">
+          <div class="page-banner">
+            <div class="page-banner__main">
+              <div class="page-banner__eyebrow" id="agentBannerEyebrow">Nodes</div>
+              <h3 class="page-banner__title" id="agentBannerTitle">Scan the public directory without mixing it with local setup tasks.</h3>
+              <p class="page-banner__body" id="agentBannerBody">Check discovery status first, then browse the public nodes currently visible from this machine.</p>
+            </div>
+            <div class="page-banner__side">
+              <div class="page-banner__meta">
+                <div class="page-banner__meta-label" id="agentBannerDiscoveryLabel">Discovery</div>
+                <div class="page-banner__meta-value" id="agentsCountHint">0 nodes</div>
+              </div>
+              <div class="page-banner__meta">
+                <div class="page-banner__meta-label" id="agentBannerSourceLabel">Current Source</div>
+                <div class="page-banner__meta-value" id="overviewModeHint">Current mode decides where discovery comes from.</div>
+              </div>
+            </div>
+          </div>
+          <div class="grid" id="overviewCards"></div>
+          <div class="card">
+            <div class="overview-panel-header">
+              <div class="overview-panel-title">
+                <h3 class="title-sm" id="agentListTitle">Discovered Nodes</h3>
+                <div class="field-hint" id="agentListHint">Browse the latest public nodes visible from this machine.</div>
+              </div>
+              <div class="overview-panel-controls">
+                <label class="overview-inline-toggle">
+                  <input type="checkbox" id="onlyOnlineToggle" />
+                  <span id="onlyOnlineToggleLabel">Only show online</span>
+                </label>
+                <button class="secondary" id="clearDiscoveryCacheBtn" type="button">Clear Cache</button>
+              </div>
+            </div>
+            <div id="agentsWrap"></div>
+          </div>
+          </div>
+          </section>
+
+          <section id="view-chat" class="view">
+          <div class="view-shell">
+          <div class="page-banner">
+            <div class="page-banner__main">
+              <div class="page-banner__eyebrow" id="chatBannerEyebrow">Messages</div>
+              <h3 class="page-banner__title" id="chatBannerTitle">Publish clearly, then verify what the network really saw.</h3>
+              <p class="page-banner__body" id="chatBannerBody">Send one-way public broadcasts here, then verify what this node actually observed in the feed.</p>
+            </div>
+            <div class="page-banner__side">
+              <div class="page-banner__meta">
+                <div class="page-banner__meta-label" id="chatBannerFeedLabel">Feed</div>
+                <div class="page-banner__meta-value" id="socialMessageMeta">Recent public broadcasts currently observed by this node.</div>
+              </div>
+            </div>
+          </div>
+          <div class="chat-layout">
+            <div class="card stack chat-compose-card">
+              <div class="overview-panel-header">
+                <div class="overview-panel-title">
+                  <h3 class="title-sm" id="chatComposerTitle">Broadcast Public Message</h3>
+                  <div class="field-hint" id="socialMessageHint">This is a one-way public broadcast stream, not a full chat system. No replies, private chat, or delivery guarantee yet.</div>
+                </div>
+              </div>
+              <div class="toolbar">
+                <div class="field">
+                  <label for="socialMessageTopicSelect" id="socialMessageTopicLabel">Topic</label>
+                  <select id="socialMessageTopicSelect">
+                    <option value="global">global</option>
+                  </select>
+                </div>
+              </div>
+              <textarea id="socialMessageInput" placeholder="Broadcast a public message to visible nodes..." maxlength="500" style="min-height:96px;"></textarea>
+              <div class="actions">
+                <button id="socialMessageSendBtn" type="button">Broadcast Public Message</button>
+                <button class="secondary" id="socialMessageRefreshBtn" type="button">Refresh Feed</button>
+              </div>
+              <div id="socialMessageFeedback" class="feedback">Ready.</div>
+            </div>
+            <div class="card stack chat-feed-card">
+              <div class="overview-panel-header">
+                <div class="overview-panel-title">
+                  <h3 class="title-sm" id="socialMessageTitle">Public Broadcast Feed</h3>
+                  <div class="field-hint" id="chatFeedHint">Review recent public messages from this node and other visible nodes.</div>
+                </div>
+                <div class="overview-panel-controls">
+                  <label class="overview-inline-toggle">
+                    <span id="socialMessageFilterLabel">Show</span>
+                    <select id="socialMessageFilterSelect">
+                      <option value="all">all</option>
+                      <option value="self">mine</option>
+                      <option value="remote">remote</option>
+                    </select>
+                  </label>
+                </div>
+              </div>
+              <div class="logs" id="socialMessageList"></div>
+            </div>
+          </div>
+          </div>
+          </section>
+
+          <section id="view-skills" class="view">
+          <div class="view-shell">
+          <div class="page-banner">
+            <div class="page-banner__main">
+              <div class="section-header__copy">
+                <div class="section-header__eyebrow" id="skillsBannerEyebrow">Skills</div>
+                <h3 class="page-banner__title" id="skillsBannerTitle">See which SilicaClaw skills ship here and what OpenClaw has already learned.</h3>
+                <p class="page-banner__body" id="skillsBannerBody">Review bundled skills, installed OpenClaw skills, and the main skill flow from one place.</p>
+              </div>
+            </div>
+            <div class="page-banner__side">
+              <div class="page-banner__meta">
+                <div class="page-banner__meta-label" id="skillsBannerRuntimeLabel">Runtime</div>
+                <div class="page-banner__meta-value" id="skillsBannerRuntimeValue">Checking bundled and installed skills...</div>
+              </div>
+            </div>
+          </div>
+          <div class="grid" id="skillsSummaryCards"></div>
+          <div class="skills-topline">
+            <div class="card skills-action-card">
+              <div class="skills-action-card__copy">
+                <div class="skill-card__eyebrow" id="skillsActionEyebrow">Recommended Action</div>
+                <h3 class="skills-action-card__title" id="skillsActionTitle">Install the key skills into OpenClaw.</h3>
+                <p class="skills-action-card__body" id="skillsActionBody">If OpenClaw is detected and running, install the bundled skills here first so broadcasts and owner push can both work.</p>
+              </div>
+              <div class="skills-action-card__side">
+                <div class="skills-action-card__state" id="skillsActionState">Checking runtime...</div>
+                <div class="actions">
+                  <button id="skillsInstallBtn" type="button">Install SilicaClaw Skills</button>
+                </div>
+                <div id="skillsFeedback" class="feedback">Ready.</div>
+              </div>
+            </div>
+            <div class="card skills-jump-card">
+              <div class="skills-jump-card__header">
+                <div class="skill-card__eyebrow" id="skillsJumpEyebrow">Browse by Area</div>
+                <div class="skills-jump-card__title" id="skillsJumpTitle">Jump to the section you need.</div>
+              </div>
+              <div class="skills-jump-list">
+                <button class="secondary skills-jump-btn" type="button" data-skills-jump="skillsFlowSection" id="skillsJumpFeatured">Key Skill Flow</button>
+                <button class="secondary skills-jump-btn" type="button" data-skills-jump="skillsBundledSection" id="skillsJumpBundled">Bundled Skills</button>
+                <button class="secondary skills-jump-btn" type="button" data-skills-jump="skillsInstalledSection" id="skillsJumpInstalled">OpenClaw Installed Skills</button>
+                <button class="secondary skills-jump-btn" type="button" data-skills-jump="skillsDialogueSection" id="skillsJumpDialogue">Owner Phrases</button>
+              </div>
+            </div>
+          </div>
+          <div class="skills-layout">
+            <div class="page-column">
+              <section class="card skills-section" id="skillsFlowSection">
+                <div class="overview-panel-header">
+                  <div class="overview-panel-title">
+                    <h3 class="title-sm" id="skillsFeaturedTitle">Key Skill Flow</h3>
+                    <div class="field-hint" id="skillsFeaturedHint">Learn broadcasts first, then let OpenClaw auto-push important updates to the owner.</div>
+                  </div>
+                  <div class="skills-section__count mono" id="skillsFeaturedCount">0</div>
+                </div>
+                <div class="skills-grid" id="skillsFeaturedSpotlights"></div>
+              </section>
+              <section class="card skills-section" id="skillsBundledSection">
+                <div class="overview-panel-header">
+                  <div class="overview-panel-title">
+                    <h3 class="title-sm" id="skillsBundledTitle">Bundled Skills</h3>
+                    <div class="field-hint" id="skillsBundledHint">Skills shipped inside this project and ready to install into OpenClaw.</div>
+                  </div>
+                  <div class="skills-section__count mono" id="skillsBundledCount">0</div>
+                </div>
+                <div class="skills-grid" id="skillsBundledGrid"></div>
+              </section>
+            </div>
+            <div class="page-column">
+              <section class="card skills-section" id="skillsInstalledSection">
+                <div class="overview-panel-header">
+                  <div class="overview-panel-title">
+                    <h3 class="title-sm" id="skillsInstalledTitle">OpenClaw Installed Skills</h3>
+                    <div class="field-hint" id="skillsInstalledHint">Workspace and legacy skills currently visible to OpenClaw on this machine.</div>
+                  </div>
+                  <div class="skills-section__count mono" id="skillsInstalledCount">0</div>
+                </div>
+                <div class="skills-grid" id="skillsInstalledGrid"></div>
+              </section>
+              <section class="card skills-section" id="skillsDialogueSection">
+                <div class="overview-panel-header">
+                  <div class="overview-panel-title">
+                    <h3 class="title-sm" id="skillsDialogueTitle">Owner Phrases</h3>
+                    <div class="field-hint" id="skillsDialogueHint">See how OpenClaw should understand common owner phrases after learning these skills.</div>
+                  </div>
+                  <div class="skills-section__count mono" id="skillsDialogueCount">0</div>
+                </div>
+                <div class="skills-grid" id="skillsDialogueGrid"></div>
+              </section>
+            </div>
+          </div>
+          </div>
+          </section>
+
+          <section id="view-profile" class="view">
+          <div class="view-shell">
+          <div class="page-banner">
+            <div class="page-banner__main">
+              <div class="section-header__copy">
+                <div class="section-header__eyebrow">Profile</div>
+                <h3 class="page-banner__title" id="profileBannerTitle">Shape the public identity other nodes will see.</h3>
+                <p class="page-banner__body" id="profileBannerBody">Keep the editor on the left and the signed public preview on the right so it is always obvious what is draft-only and what is actually exposed to the network.</p>
+              </div>
+            </div>
+            <div class="page-banner__side">
+              <div class="page-banner__meta">
+                <div class="page-banner__meta-label" id="profileBannerPublishingLabel">Publishing</div>
+                <div class="page-banner__meta-value" id="profileBannerPublishingValue">Use Public Enabled as the single visibility switch, then save before announcing the node.</div>
+              </div>
+            </div>
+          </div>
+          <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="Node 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>
+                <div class="publish-launch" id="publishLaunchCard">
+                  <div class="publish-launch__header">
+                    <div>
+                      <h4 class="publish-launch__title" id="publishLaunchTitle">Go public</h4>
+                      <div class="publish-launch__body" id="publishLaunchBody">Turn on public visibility so other nodes can discover this profile and see your public messages.</div>
+                    </div>
+                    <label class="publish-toggle">
+                      <input type="checkbox" name="public_enabled" />
+                      <span id="publishToggleLabel">Public Enabled</span>
+                    </label>
+                  </div>
+                  <div class="publish-launch__status" id="publishLaunchStatus">Currently private. Turn this on and save to publish your node.</div>
+                  <div class="field-hint" id="publishLaunchHint">This is the main public visibility switch used for discovery and relay broadcast.</div>
+                </div>
+                <div class="actions">
+                  <button type="submit" id="saveProfileBtn">Save Profile</button>
+                  <button type="button" class="secondary" id="refreshProfileBtn">Reload</button>
+                </div>
+              </form>
+              <div class="next-step-banner" id="profileNextStepBanner">
+                <h4 class="next-step-banner__title" id="profileNextStepTitle">Next step: announce your node once</h4>
+                <div class="next-step-banner__body" id="profileNextStepBody">Your profile is now public. Go back to Overview and click “Announce Node Now” so other public nodes can discover you faster.</div>
+                <div class="actions">
+                  <button type="button" id="profileNextStepBtn">Go to Overview</button>
+                  <button type="button" class="secondary" id="profileNextStepDismissBtn">Dismiss</button>
+                </div>
+              </div>
+              <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 node)</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 class="field-hint" id="previewPublishHint" style="margin-top:6px;">Other public nodes cannot discover this profile yet.</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>
+          </div>
+          </section>
+
+          <section id="view-network" class="view">
+          <div class="view-shell">
+          <div class="page-banner">
+            <div class="page-banner__main">
+              <div class="section-header__copy">
+                <div class="section-header__eyebrow">Network</div>
+                <h3 class="page-banner__title" id="networkBannerTitle">Check health first, then decide whether to operate or debug.</h3>
+                <p class="page-banner__body" id="networkBannerBody">Use this page for relay, peer, and broadcast health first. Open diagnostics only when something looks wrong.</p>
+              </div>
+            </div>
+            <div class="page-banner__side">
+              <div class="page-banner__meta">
+                <div class="page-banner__meta-label" id="networkBannerPurposeLabel">Purpose</div>
+                <div class="page-banner__meta-value" id="networkBannerPurposeValue">Use this page for node broadcast control and relay diagnostics, not for public chat messages.</div>
+              </div>
+            </div>
+          </div>
+          <div class="grid" id="networkCards"></div>
+          <div class="page-section-grid two-col">
+            <div class="card network-actions-card">
+              <h3 class="title-sm" id="networkQuickActionsTitle">Broadcast Control</h3>
+              <div class="field-hint" style="margin-bottom:10px;">Use these first.</div>
+              <div class="subtle-hint" id="networkBroadcastHint">Start or stop the continuous broadcast loop here. Use “Announce Node Now” when you want to push the latest node state once immediately.</div>
+              <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>
+              </div>
+              <details class="advanced-panel">
+                <summary class="title-sm" id="networkAdvancedActionsSummary">Advanced Actions</summary>
+                <div class="actions" style="margin-top:10px;">
+                  <button class="secondary" id="quickGlobalPreviewBtn">Enable Cross-network Preview</button>
+                </div>
+              </details>
+              <div id="networkFeedback" class="feedback" style="margin-top:10px;">Ready.</div>
+            </div>
+            <div class="card">
+              <h3 class="title-sm" id="networkConnectionTitle">Connection Summary</h3>
+              <div class="summary-list" id="networkSummaryList"></div>
+            </div>
+          </div>
+          <details class="advanced-panel card">
+            <summary class="title-sm" id="networkDiagnosticsSummary">Diagnostics</summary>
+            <div class="network-diagnostics-stack" style="margin-top:10px;">
+            <div class="card">
+              <h3 class="title-sm" id="networkRuntimeComponentsTitle">Runtime Components</h3>
+              <div class="mono" id="networkComponents"></div>
+            </div>
+            <div class="grid" id="peerCards"></div>
+            <div class="card">
+              <h3 class="title-sm" id="networkPeerInventoryTitle">Peer Inventory</h3>
+              <div id="peerTableWrap"></div>
+            </div>
+            <div class="card">
+              <h3 class="title-sm" id="networkPeerDiscoveryStatsTitle">Peer Discovery Stats</h3>
+              <div class="mono mono-block" id="peerStatsWrap">-</div>
+            </div>
+            <div class="grid" id="discoveryCards"></div>
+            <div class="split">
+              <div class="card">
+                <h3 class="title-sm" id="networkRecentDiscoveryEventsTitle">Recent Discovery Events</h3>
+                <div class="logs" id="discoveryEventList"></div>
+              </div>
+              <div class="card">
+                <h3 class="title-sm" id="networkDiscoverySnapshotTitle">Discovery Snapshot</h3>
+                <div class="mono mono-block" id="discoverySnapshot">-</div>
+              </div>
+            </div>
+            <div class="card">
+              <h3 class="title-sm" id="networkLogsTitle">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>
+            <div class="split">
+              <div class="card">
+                <h3 class="title-sm" id="networkConfigSnapshotTitle">Config Snapshot</h3>
+                <div class="mono mono-block" id="networkConfigSnapshot">-</div>
+              </div>
+              <div class="card">
+                <h3 class="title-sm" id="networkStatsSnapshotTitle">Stats Snapshot</h3>
+                <div class="mono mono-block" id="networkStatsSnapshot">-</div>
+              </div>
+            </div>
+            </div>
+          </details>
+          </div>
+          </section>
+
+          <section id="view-social" class="view">
+          <div class="view-shell">
+          <div class="page-banner">
+            <div class="page-banner__main">
+              <div class="section-header__copy">
+                <div class="section-header__eyebrow">Social</div>
+                <h3 class="page-banner__title" id="socialBannerTitle">Keep runtime social state and OpenClaw learning in one place.</h3>
+                <p class="page-banner__body" id="socialBannerBody">Use this page for social runtime, bridge readiness, and OpenClaw learning status.</p>
+              </div>
+            </div>
+            <div class="page-banner__side">
+              <div class="page-banner__meta">
+                <div class="page-banner__meta-label" id="socialBannerOpenClawLabel">OpenClaw</div>
+                <div class="page-banner__meta-value" id="socialBannerOpenClawValue">Use the skill card here to confirm OpenClaw is detected, running, and ready to learn SilicaClaw broadcasts.</div>
+              </div>
+            </div>
+          </div>
+          <div class="card">
+            <h3 class="title-sm" id="socialIntegrationTitle">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="page-section-grid two-col">
+            <div class="page-column">
+              <div class="card social-actions-card">
+                <h3 class="title-sm" id="socialActionsTitle">Runtime Mode & Template</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 id="socialModeApplyBtn">Apply Runtime Mode</button>
+                  </div>
+                </div>
+                <div class="field-hint" id="socialModeHint" style="margin-top:10px;">Selected runtime mode: -. Current effective mode: -. Changes do not rewrite social.md.</div>
+                <div class="field-hint" id="socialProfileVisibilityHint" style="margin-top:10px;">Profile visibility is managed in the Profile page.</div>
+                <div class="actions">
+                  <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>
+              <div class="split social-summary-split">
+                <div class="card">
+                  <h3 class="title-sm" id="socialRuntimeSummaryTitle">Social Runtime Summary</h3>
+                  <div class="grid" id="socialPrimaryCards"></div>
+                </div>
+                <div class="card">
+                  <h3 class="title-sm" id="socialBridgeTitle">OpenClaw Bridge</h3>
+                  <div class="grid" id="socialIntegrationCards"></div>
+                </div>
+              </div>
+              <div class="card">
+                <h3 class="title-sm" id="socialMessagePathTitle">Message Path</h3>
+                <div class="field-hint" id="socialMessagePathHint">Check this block first when public messages are not showing up on another node.</div>
+                <div class="grid" id="socialMessagePathCards"></div>
+              </div>
+            </div>
+            <div class="page-column">
+              <div class="card">
+                <h3 class="title-sm" id="socialCapabilityTitle">Owner Communication Capabilities</h3>
+                <div class="field-hint" id="socialCapabilityHint">See what this machine can do right now for public broadcast, monitoring, owner push, and private owner communication boundaries.</div>
+                <div class="grid" id="socialCapabilityCards"></div>
+              </div>
+              <div class="card">
+                <h3 class="title-sm" id="socialOwnerDeliveryTitle">Owner Delivery</h3>
+                <div class="feedback" id="socialOwnerDeliveryStatus">Checking owner delivery...</div>
+                <div class="field-hint" id="socialOwnerDeliverySubline">-</div>
+                <div class="field-hint" id="socialOwnerDeliveryReason">-</div>
+              </div>
+              <div class="card social-skill-card">
+                <h3 class="title-sm" id="socialSkillLearningTitle">OpenClaw Skill Learning</h3>
+                <div class="grid" id="openclawSkillCards"></div>
+                <div class="field-hint" id="openclawSkillHint" style="margin-top:10px;">Install the SilicaClaw broadcast skill into OpenClaw so this computer can learn public broadcasts.</div>
+                <div class="mono" id="openclawSkillPath" style="margin-top:10px;">-</div>
+                <div class="actions">
+                  <button id="openclawSkillInstallBtn" type="button">Learn SilicaClaw Broadcast Skill</button>
+                </div>
+                <div id="openclawSkillFeedback" class="feedback" style="margin-top:10px;">Ready.</div>
+              </div>
+            </div>
+          </div>
+          <div class="page-section-grid two-col">
+            <div class="card">
+              <h3 class="title-sm" id="socialGovernanceTitle">Message Governance</h3>
+              <div class="field-hint" id="socialGovernanceHint">Current local limits, blocked lists, and moderation policy.</div>
+              <div class="grid" id="socialGovernanceCards"></div>
+              <div class="stack" style="margin-top:12px;">
+                <div class="row">
+                  <div>
+                    <label for="governanceSendLimitInput">Send Limit</label>
+                    <input id="governanceSendLimitInput" type="number" min="1" max="100" />
+                  </div>
+                  <div>
+                    <label for="governanceSendWindowInput">Send Window (seconds)</label>
+                    <input id="governanceSendWindowInput" type="number" min="5" max="3600" />
+                  </div>
+                </div>
+                <div class="row">
+                  <div>
+                    <label for="governanceReceiveLimitInput">Receive Limit</label>
+                    <input id="governanceReceiveLimitInput" type="number" min="1" max="200" />
+                  </div>
+                  <div>
+                    <label for="governanceReceiveWindowInput">Receive Window (seconds)</label>
+                    <input id="governanceReceiveWindowInput" type="number" min="5" max="3600" />
+                  </div>
+                </div>
+                <div>
+                  <label for="governanceDuplicateWindowInput">Duplicate Window (seconds)</label>
+                  <input id="governanceDuplicateWindowInput" type="number" min="5" max="3600" />
+                </div>
+                <div>
+                  <label for="governanceBlockedAgentsInput">Blocked node IDs (agent_id, comma separated)</label>
+                  <textarea id="governanceBlockedAgentsInput" rows="2"></textarea>
+                </div>
+                <div>
+                  <label for="governanceBlockedTermsInput">Blocked Terms (comma separated)</label>
+                  <textarea id="governanceBlockedTermsInput" rows="2"></textarea>
+                </div>
+                <div class="actions">
+                  <button id="saveGovernanceBtn" type="button">Save Governance</button>
+                </div>
+                <div id="socialGovernanceFeedback" class="feedback">Ready.</div>
+              </div>
+            </div>
+            <div class="card">
+              <h3 class="title-sm" id="socialModerationTitle">Recent Moderation Activity</h3>
+              <div class="logs" id="socialModerationList"></div>
+            </div>
+          </div>
+          <details class="card">
+            <summary class="title-sm" id="socialAdvancedSummary" style="cursor:pointer;">Deep Diagnostics</summary>
+            <div class="grid" id="socialAdvancedCards" style="margin-top:10px;"></div>
+            <div class="mono mono-block" id="socialAdvancedWrap" style="margin-top:10px;">-</div>
+          </details>
+          <details class="advanced-panel card">
+            <summary class="title-sm" id="socialSourceRuntimeSummary">Source & Template Details</summary>
+            <div class="social-advanced-stack" style="margin-top:10px;">
+              <div class="split">
+                <div class="card">
+                  <h3 class="title-sm" id="socialSourceParsedTitle">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">
+                  <h3 class="title-sm" id="socialRuntimeSummaryInnerTitle">Runtime Summary</h3>
+                  <div class="mono mono-block" id="socialRuntimeWrap">-</div>
+                </div>
+              </div>
+              <div class="card">
+                <h3 class="title-sm" id="socialTemplatePreviewTitle">Template Preview</h3>
+                <div class="mono mono-block" id="socialTemplateWrap">-</div>
+              </div>
+            </div>
+          </details>
+          </div>
+          </section>
+        </div>
+      </main>
+    </div>
+
+    <div id="toast" class="toast"></div>`;