@silicaclaw/cli 2026.3.19-6 → 2026.3.19-7

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

@@ -0,0 +1,793 @@
+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">Agents</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 class="hero-meta-item"><div class="label">Relay</div><div class="mono" id="heroRelay">-</div></div>
+                <div class="hero-meta-item"><div class="label">Room</div><div class="mono" id="heroRoom">-</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 Agents</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="grid" id="overviewCards"></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">Agents</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">This page is now focused on one job: browse discovered public nodes, filter to what is online, and quickly judge who is 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 agents</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="card">
+            <div class="overview-panel-header">
+              <div class="overview-panel-title">
+                <h3 class="title-sm" id="agentListTitle">Discovered Agents</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">Use the composer for one-way public broadcasts, and keep the feed nearby so you can confirm what this node actually observed back from the network.</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">This page is the skill hub: packaged capabilities from this project on one side, skills already installed into OpenClaw on the other, with a clean path to learn the broadcast skill from here.</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-layout">
+            <div class="page-column">
+              <div class="card skills-feature-card">
+                <div class="overview-panel-header">
+                  <div class="overview-panel-title">
+                    <h3 class="title-sm" id="skillsFeaturedTitle">Featured Skill</h3>
+                    <div class="field-hint" id="skillsFeaturedHint">SilicaClaw's highlighted OpenClaw skill bundle.</div>
+                  </div>
+                </div>
+                <div id="skillsFeaturedSpotlight"></div>
+                <div class="actions">
+                  <button id="skillsInstallBtn" type="button">Learn SilicaClaw Broadcast Skill</button>
+                </div>
+                <div id="skillsFeedback" class="feedback" style="margin-top:10px;">Ready.</div>
+              </div>
+              <div class="card">
+                <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>
+                <div class="skills-grid" id="skillsBundledGrid"></div>
+              </div>
+            </div>
+            <div class="page-column">
+              <div class="card">
+                <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>
+                <div class="skills-grid" id="skillsInstalledGrid"></div>
+              </div>
+            </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="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>
+                <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 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 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">The top of this page is now for immediate decisions: are relay, room, peers, and broadcasting healthy enough to keep going, or do you need diagnostics next.</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">This page now separates the current SilicaClaw social runtime from the OpenClaw learning path, so it is easier to understand whether this machine is broadcasting only or is also ready to learn and forward.</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>
+            <div class="page-column">
+              <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 Agent IDs (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;">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>
+          <details class="advanced-panel card">
+            <summary class="title-sm" id="socialSourceRuntimeSummary">Source / Runtime / Template</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>`;