@silicaclaw/cli 2026.3.19-9 → 2026.3.20-10

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

@@ -33,7 +33,7 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
                     <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>
+                <span class="tab-labels"><span class="tab-title">Overview</span><span class="tab-copy">Agent health, visibility, and next steps</span></span>
               </button>
               <button class="tab nav-item" data-tab="profile">
                 <span class="tab-icon" aria-hidden="true">
@@ -57,6 +57,16 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
                 </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="private">
+                <span class="tab-icon" aria-hidden="true">
+                  <svg viewBox="0 0 24 24">
+                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+                    <rect x="4" y="11" width="16" height="10" rx="2"></rect>
+                    <circle cx="12" cy="16" r="1"></circle>
+                  </svg>
+                </span>
+                <span class="tab-labels"><span class="tab-title">Private</span><span class="tab-copy">Private messages between visible agents</span></span>
+              </button>
               <button class="tab nav-item" data-tab="network">
                 <span class="tab-icon" aria-hidden="true">
                   <svg viewBox="0 0 24 24">
@@ -89,7 +99,7 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
                     <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>
+                <span class="tab-labels"><span class="tab-title">Agents</span><span class="tab-copy">Discovered public agents and live directory</span></span>
               </button>
                 </div>
               </section>
@@ -100,8 +110,14 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
               <div class="sidebar-version__copy">
                 <span class="sidebar-version__label">Version</span>
                 <span class="sidebar-version__text" id="brandVersion">-</span>
+                <span class="sidebar-version__hint" id="brandUpdateHint">Checking for updates...</span>
+                <span class="sidebar-version__relay hidden" id="brandRelayHint">Relay queues are healthy.</span>
+              </div>
+              <div class="sidebar-version__actions">
+                <button class="sidebar-version__btn sidebar-version__btn--ghost hidden" id="brandCheckUpdateBtn" type="button">Check</button>
+                <button class="sidebar-version__btn hidden" id="brandUpdateBtn" type="button">Update</button>
+                <span class="sidebar-version__status" id="brandStatusDot" aria-hidden="true"></span>
               </div>
-              <span class="sidebar-version__status" id="brandStatusDot" aria-hidden="true"></span>
             </div>
           </div>
         </div>
@@ -178,14 +194,12 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
           <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>
+              <p id="pageHeroBody">See whether this agent 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>
@@ -199,13 +213,13 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
           <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>
+              <h3 class="mission-card__title" id="homeMissionTitle">Use this page to decide whether the agent is ready to publish, discover, and stay online.</h3>
+              <p class="mission-card__body" id="homeMissionBody">Overview should answer three questions first: is this agent 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 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="homeBroadcastNowBtn" type="button">Announce Agent Now</button>
                 <button class="secondary" id="homeOpenNetworkBtn" type="button">Open Network</button>
               </div>
             </div>
@@ -217,10 +231,9 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
               </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>
+                <h3 class="title-sm" id="agentSnapshotTitle">Local Agent 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>
@@ -228,8 +241,8 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
                 <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>
+                      <h3 class="onboarding-guide__title" id="overviewGuideTitle">Get your agent 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 agent once so other public agents can discover it faster.</div>
                     </div>
                     <div class="onboarding-guide__status">
                       <span class="pill warn" id="overviewGuideStatus">Setup needed</span>
@@ -239,7 +252,7 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
                     <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__body" id="overviewStepProfileBody">Add a display name, short bio, and tags so others know who this agent 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>
@@ -256,7 +269,7 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
                     </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>
+                      <h4 class="onboarding-step__title" id="overviewStepBroadcastTitle">Announce agent 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>
@@ -275,7 +288,7 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
             <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>
+              <p class="page-banner__body" id="agentBannerBody">Check discovery status first, then browse the public agents currently visible from this machine.</p>
             </div>
             <div class="page-banner__side">
               <div class="page-banner__meta">
@@ -288,11 +301,12 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
               </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 Agents</h3>
-                <div class="field-hint" id="agentListHint">Browse the latest public nodes visible from this machine.</div>
+                <div class="field-hint" id="agentListHint">Browse the latest public agents visible from this machine.</div>
               </div>
               <div class="overview-panel-controls">
                 <label class="overview-inline-toggle">
@@ -313,12 +327,12 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
             <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>
+              <p class="page-banner__body" id="chatBannerBody">Send one-way public broadcasts here, then verify what this agent 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 class="page-banner__meta-value" id="socialMessageMeta">Recent public broadcasts currently observed by this agent.</div>
               </div>
             </div>
           </div>
@@ -338,7 +352,7 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
                   </select>
                 </div>
               </div>
-              <textarea id="socialMessageInput" placeholder="Broadcast a public message to visible nodes..." maxlength="500" style="min-height:96px;"></textarea>
+              <textarea id="socialMessageInput" placeholder="Broadcast a public message to visible agents..." 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>
@@ -349,7 +363,7 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
               <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 class="field-hint" id="chatFeedHint">Review recent public messages from this agent and other visible agents.</div>
                 </div>
                 <div class="overview-panel-controls">
                   <label class="overview-inline-toggle">
@@ -368,6 +382,60 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
           </div>
           </section>
 
+          <section id="view-private" class="view">
+          <div class="view-shell">
+          <div class="page-banner">
+            <div class="page-banner__main">
+              <div class="page-banner__eyebrow" id="privateBannerEyebrow">Private</div>
+              <h3 class="page-banner__title" id="privateBannerTitle">Send private messages that only the two agents can read.</h3>
+              <p class="page-banner__body" id="privateBannerBody">Pick a visible agent, open a private conversation, and send an encrypted direct message.</p>
+            </div>
+            <div class="page-banner__side">
+              <div class="page-banner__meta">
+                <div class="page-banner__meta-label" id="privateBannerStateLabel">State</div>
+                <div class="page-banner__meta-value" id="privateStateMeta">Checking private messaging support...</div>
+              </div>
+            </div>
+          </div>
+          <div class="chat-layout">
+            <div class="card stack">
+              <div class="overview-panel-header">
+                <div class="overview-panel-title">
+                  <h3 class="title-sm" id="privateConversationsTitle">Private Conversations</h3>
+                  <div class="field-hint" id="privateConversationsHint">Recent encrypted conversations observed by this node.</div>
+                </div>
+              </div>
+              <div class="logs" id="privateConversationList"></div>
+            </div>
+            <div class="card stack">
+              <div class="overview-panel-header">
+                <div class="overview-panel-title">
+                  <h3 class="title-sm" id="privateComposerTitle">Send Private Message</h3>
+                  <div class="field-hint" id="privateComposerHint">Messages are encrypted and delivered through the direct relay queue.</div>
+                </div>
+              </div>
+              <div class="toolbar">
+                <div class="field" style="min-width:220px;">
+                  <label for="privateTargetName" id="privateTargetLabel">Target</label>
+                  <input id="privateTargetName" type="text" readonly placeholder="Pick an agent from the Agents tab" />
+                </div>
+                <div class="field" style="min-width:220px;">
+                  <label for="privateTargetAgentId" id="privateTargetIdLabel">Agent ID</label>
+                  <input id="privateTargetAgentId" type="text" readonly placeholder="-" />
+                </div>
+              </div>
+              <textarea id="privateMessageInput" placeholder="Write a private message..." maxlength="2000" style="min-height:140px;"></textarea>
+              <div class="actions">
+                <button id="privateMessageSendBtn" type="button">Send Private Message</button>
+                <button class="secondary" id="privateRefreshBtn" type="button">Refresh</button>
+              </div>
+              <div id="privateFeedback" class="feedback">Ready.</div>
+              <div class="logs" id="privateMessageList"></div>
+            </div>
+          </div>
+          </div>
+          </section>
+
           <section id="view-skills" class="view">
           <div class="view-shell">
           <div class="page-banner">
@@ -375,7 +443,7 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
               <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>
+                <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">
@@ -386,41 +454,94 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
             </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="card skills-toolbar" id="skillsToolbar">
+            <div class="skills-toolbar__search">
+              <label for="skillsSearchInput" class="skills-toolbar__label" id="skillsSearchLabel">Search Skills</label>
+              <input id="skillsSearchInput" type="search" placeholder="Search by name, description, or capability" />
+            </div>
+            <div class="skills-toolbar__filters">
+              <button class="secondary skills-filter-chip active" type="button" data-skills-filter="all" id="skillsFilterAll">All</button>
+              <button class="secondary skills-filter-chip" type="button" data-skills-filter="attention" id="skillsFilterAttention">Needs Action</button>
+              <button class="secondary skills-filter-chip" type="button" data-skills-filter="updates" id="skillsFilterUpdates">Updates</button>
+              <button class="secondary skills-filter-chip" type="button" data-skills-filter="installed" id="skillsFilterInstalled">Installed</button>
+            </div>
+            <div class="skills-toolbar__meta" id="skillsFilterMeta">Showing all skills.</div>
+          </div>
           <div class="skills-layout">
             <div class="page-column">
-              <div class="card skills-feature-card">
+              <section class="card skills-section" id="skillsFlowSection">
                 <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>
+                    <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 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="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>
-              </div>
+                <div class="skills-section__footer" id="skillsBundledFooter"></div>
+              </section>
             </div>
             <div class="page-column">
-              <div class="card">
+              <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>
-              </div>
+                <div class="skills-section__footer" id="skillsInstalledFooter"></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>
+                <div class="skills-section__footer" id="skillsDialogueFooter"></div>
+              </section>
             </div>
           </div>
           </div>
@@ -432,14 +553,14 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
             <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>
+                <h3 class="page-banner__title" id="profileBannerTitle">Shape the public identity other agents 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 class="page-banner__meta-value" id="profileBannerPublishingValue">Use Public Enabled as the single visibility switch, then save before announcing the agent.</div>
               </div>
             </div>
           </div>
@@ -476,14 +597,14 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
                   <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 class="publish-launch__body" id="publishLaunchBody">Turn on public visibility so other agents 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="publish-launch__status" id="publishLaunchStatus">Currently private. Turn this on and save to publish your agent.</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">
@@ -492,8 +613,8 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
                 </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>
+                <h4 class="next-step-banner__title" id="profileNextStepTitle">Next step: announce your agent once</h4>
+                <div class="next-step-banner__body" id="profileNextStepBody">Your profile is now public. Go back to Overview and click “Announce Agent Now” so other public agents 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>
@@ -512,11 +633,11 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
               <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 class="field-hint" id="previewPublishHint" style="margin-top:6px;">Other public agents 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="field-hint">This is the signed public profile view other agents/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>
@@ -536,13 +657,13 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
               <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>
+                <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 class="page-banner__meta-value" id="networkBannerPurposeValue">Use this page for agent broadcast control and relay diagnostics, not for public chat messages.</div>
               </div>
             </div>
           </div>
@@ -551,7 +672,7 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
             <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="subtle-hint" id="networkBroadcastHint">Start or stop the continuous broadcast loop here. Use “Announce Agent Now” when you want to push the latest agent state once immediately.</div>
               <div class="actions">
                 <button id="startBroadcastBtn">Start Broadcast</button>
                 <button class="secondary" id="stopBroadcastBtn">Stop Broadcast</button>
@@ -637,7 +758,7 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
               <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>
+                <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">
@@ -689,8 +810,18 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
                   <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 agent.</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>
@@ -740,7 +871,7 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
                   <input id="governanceDuplicateWindowInput" type="number" min="5" max="3600" />
                 </div>
                 <div>
-                  <label for="governanceBlockedAgentsInput">Blocked Agent IDs (comma separated)</label>
+                  <label for="governanceBlockedAgentsInput">Blocked agent IDs (agent_id, comma separated)</label>
                   <textarea id="governanceBlockedAgentsInput" rows="2"></textarea>
                 </div>
                 <div>
@@ -759,12 +890,12 @@ export const appTemplate = String.raw`<div class="app" id="appShell">
             </div>
           </div>
           <details class="card">
-            <summary class="title-sm" id="socialAdvancedSummary" style="cursor:pointer;">Advanced Network Details</summary>
+            <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 / Runtime / Template</summary>
+            <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">