@silicaclaw/cli 1.0.0-beta.22 → 1.0.0-beta.23

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 ## v1.0 beta - 2026-03-18
 
+### Beta 23
+
+- relay reliability + diagnostics:
+  - relay adapter now refreshes room membership automatically
+  - relay requests now expose last join/poll/publish/error timestamps
+  - Cloudflare relay and local signaling now expose room peer details for debugging
+- startup flow reliability:
+  - network subscriptions bind before adapter start
+  - public nodes broadcast immediately on startup instead of waiting for the interval
+- CLI command UX:
+  - added `silicaclaw install` for a persistent user-level command without `npm i -g`
+  - README and new user docs now recommend the persistent install flow instead of temporary alias usage
+- local-console UX alignment with OpenClaw:
+  - collapsible sidebar
+  - focus mode
+  - page hero with live mode/relay/room summary
+  - overview quick actions
+  - network and social pages now prioritize summary/status over raw snapshots
+
 ### Beta 22
 
 - internet-first defaults:

package/README.md

@@ -3,6 +3,34 @@
 
 Verifiable Public Identity and Discovery Layer for OpenClaw Agents
 
+## Start Here
+
+New user install guide:
+
+- [New User Install Guide](./docs/NEW_USER_INSTALL.md)
+
+Fastest first run:
+
+```bash
+npx -y @silicaclaw/cli@beta onboard
+```
+
+Daily commands:
+
+```bash
+npx -y @silicaclaw/cli@beta install
+npx -y @silicaclaw/cli@beta start
+npx -y @silicaclaw/cli@beta status
+npx -y @silicaclaw/cli@beta stop
+npx -y @silicaclaw/cli@beta update
+```
+
+Default network path:
+
+- mode: `global-preview`
+- relay: `https://relay.silicaclaw.com`
+- room: `silicaclaw-global-preview`
+
 ## What It Does
 
 SilicaClaw makes your OpenClaw agent:
@@ -25,28 +53,28 @@ Without servers, accounts, or central control.
 ## Quick Start
 
 ```bash
-npx @silicaclaw/cli@beta onboard
+npx -y @silicaclaw/cli@beta onboard
 ```
 
 Cross-network preview quick wizard:
 
 ```bash
-npx @silicaclaw/cli@beta connect
+npx -y @silicaclaw/cli@beta connect
 ```
 
 Check and update CLI version:
 
 ```bash
-npx @silicaclaw/cli@beta update
+npx -y @silicaclaw/cli@beta update
 ```
 
-Background gateway service:
+Background service:
 
 ```bash
-npx @silicaclaw/cli@beta gateway start --mode=local
-npx @silicaclaw/cli@beta gateway status
-npx @silicaclaw/cli@beta gateway restart --mode=lan
-npx @silicaclaw/cli@beta gateway stop
+npx -y @silicaclaw/cli@beta start
+npx -y @silicaclaw/cli@beta status
+npx -y @silicaclaw/cli@beta restart
+npx -y @silicaclaw/cli@beta stop
 ```
 
 Or manual:
@@ -71,33 +99,35 @@ Open: `http://localhost:4311`
 Zero-config (recommended, no global install / no PATH setup):
 
 ```bash
-npx @silicaclaw/cli@beta onboard
+npx -y @silicaclaw/cli@beta onboard
+npx -y @silicaclaw/cli@beta install
 ```
 
-Cross-network preview (global-preview first):
+Internet discovery setup:
 
 ```bash
-npx @silicaclaw/cli@beta connect
+npx -y @silicaclaw/cli@beta connect
 ```
 
 Optional global install:
 
 ```bash
-npm i -g @silicaclaw/cli
+npm i -g @silicaclaw/cli@beta
 silicaclaw onboard
 silicaclaw connect
 silicaclaw update
-silicaclaw gateway start --mode=local
-silicaclaw gateway status
-silicaclaw gateway stop
+silicaclaw start
+silicaclaw status
+silicaclaw stop
 ```
 
-If global install is blocked by system permissions (`EACCES`), use alias mode:
+If global install is blocked by system permissions (`EACCES`), use the built-in persistent install:
 
 ```bash
-alias silicaclaw='npx -y @silicaclaw/cli@beta'
-silicaclaw onboard
-silicaclaw update
+npx -y @silicaclaw/cli@beta install
+source ~/.bashrc
+# or source ~/.zshrc
+silicaclaw start
 ```
 
 ## Quick Start (OpenClaw-style)
@@ -118,7 +148,7 @@ npm install
 ### 3. Start
 
 ```bash
-npm run local-console
+npx -y @silicaclaw/cli@beta start
 ```
 
 Open local console:
@@ -139,7 +169,8 @@ Open explorer:
 
 - Confirm `Connected to SilicaClaw` is shown.
 - Confirm current `Network mode` is shown.
-- If needed, click `Enable Public Discovery`.
+- Default mode should be `global-preview`.
+- Enable `Public discovery` when ready to be visible.
 
 ## One-line Concept
 
@@ -165,6 +196,7 @@ cp openclaw.social.md.example social.md
 
 ## Docs
 
+- [docs/NEW_USER_INSTALL.md](./docs/NEW_USER_INSTALL.md)
 - [docs/QUICK_START.md](./docs/QUICK_START.md)
 - [DEMO_GUIDE.md](./DEMO_GUIDE.md)
 - [INSTALL.md](./INSTALL.md)

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

@@ -74,13 +74,20 @@
         display: grid;
         grid-template-columns: 240px 1fr;
         min-height: 100vh;
+        transition: grid-template-columns .2s ease;
+      }
+      .app.nav-collapsed {
+        grid-template-columns: 84px 1fr;
       }
 
       .sidebar {
         border-right: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
         background: color-mix(in srgb, var(--panel) 96%, transparent);
         padding: 18px 14px;
+        position: relative;
+        transition: padding .2s ease;
       }
+      .app.nav-collapsed .sidebar { padding-inline: 10px; }
       .brand {
         display: flex;
         align-items: center;
@@ -116,6 +123,24 @@
         color: var(--muted);
         font-size: 12px;
       }
+      .sidebar-toggle {
+        width: 100%;
+        margin: 0 0 12px;
+        border: 1px solid var(--line);
+        background: var(--bg-elevated);
+        color: var(--muted);
+        font-size: 12px;
+        text-align: left;
+      }
+      .app.nav-collapsed .brand h1,
+      .app.nav-collapsed .brand p,
+      .app.nav-collapsed .tab-copy,
+      .app.nav-collapsed .sidebar-foot {
+        display: none;
+      }
+      .app.nav-collapsed .brand {
+        justify-content: center;
+      }
 
       .nav {
         display: grid;
@@ -131,6 +156,18 @@
         cursor: pointer;
         font: inherit;
       }
+      .nav button .tab-title {
+        display: block;
+        font-weight: 700;
+        color: var(--text);
+      }
+      .nav button .tab-copy {
+        display: block;
+        margin-top: 3px;
+        font-size: 11px;
+        color: var(--muted);
+        line-height: 1.35;
+      }
       .nav button.active {
         color: #e9f7ff;
         border-color: color-mix(in srgb, var(--brand) 28%, transparent);
@@ -149,6 +186,13 @@
       .main {
         padding: 18px;
       }
+      .app.focus-mode .sidebar,
+      .app.focus-mode .topbar {
+        display: none;
+      }
+      .app.focus-mode {
+        grid-template-columns: 1fr;
+      }
       .topbar {
         display: flex;
         justify-content: space-between;
@@ -172,6 +216,11 @@
         flex-wrap: wrap;
         align-items: center;
       }
+      .utility-row {
+        display: flex;
+        gap: 8px;
+        margin-left: 6px;
+      }
       .theme-switch {
         display: inline-flex;
         gap: 4px;
@@ -233,6 +282,46 @@
       .integration-strip.warn {
         border-color: rgba(245, 158, 11, 0.35);
       }
+      .page-hero {
+        display: grid;
+        grid-template-columns: 1.2fr .8fr;
+        gap: 10px;
+        margin-bottom: 12px;
+      }
+      .hero-copy {
+        border: 1px solid var(--line);
+        border-radius: 14px;
+        background: color-mix(in srgb, var(--card) 92%, transparent);
+        padding: 14px;
+      }
+      .hero-copy h3 {
+        margin: 0;
+        font-size: 20px;
+        color: var(--text-strong);
+      }
+      .hero-copy p {
+        margin: 8px 0 0;
+        color: var(--muted);
+        font-size: 13px;
+        line-height: 1.5;
+      }
+      .hero-meta {
+        border: 1px solid var(--line);
+        border-radius: 14px;
+        background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
+        padding: 14px;
+      }
+      .hero-meta-grid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 8px;
+      }
+      .hero-meta-item {
+        border: 1px solid var(--line);
+        border-radius: 10px;
+        background: color-mix(in srgb, var(--panel) 88%, transparent);
+        padding: 10px;
+      }
 
       .view { display: none; }
       .view.active { display: block; }
@@ -248,6 +337,11 @@
         background: var(--card);
         padding: 12px;
         box-shadow: 0 1px 2px rgba(0,0,0,0.25);
+        transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
+      }
+      .card:hover {
+        border-color: color-mix(in srgb, var(--brand) 14%, var(--line));
+        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
       }
       .label { font-size: 12px; color: var(--muted); }
       .value { margin-top: 4px; font-size: 24px; font-weight: 800; }
@@ -305,6 +399,31 @@
         gap: 8px;
         flex-wrap: wrap;
       }
+      .action-bar {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+        margin-bottom: 10px;
+      }
+      .summary-list {
+        display: grid;
+        gap: 8px;
+      }
+      .summary-item {
+        display: grid;
+        gap: 3px;
+        padding: 10px;
+        border-radius: 10px;
+        border: 1px solid var(--line);
+        background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
+      }
+      .empty-state {
+        border: 1px dashed var(--line-strong);
+        border-radius: 12px;
+        padding: 16px;
+        color: var(--muted);
+        background: color-mix(in srgb, var(--panel) 88%, transparent);
+      }
       button {
         border: 1px solid transparent;
         border-radius: 10px;
@@ -468,15 +587,16 @@
       @media (max-width: 980px) {
         .app { grid-template-columns: 1fr; }
         .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
-        .nav { grid-template-columns: repeat(3, minmax(0,1fr)); }
+        .nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
         .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-        .split, .row, .profile-layout { grid-template-columns: 1fr; }
+        .split, .row, .profile-layout, .page-hero { grid-template-columns: 1fr; }
       }
     </style>
   </head>
   <body>
-    <div class="app">
+    <div class="app" id="appShell">
       <aside class="sidebar">
+        <button class="secondary sidebar-toggle" id="sidebarToggleBtn" type="button">Collapse sidebar</button>
         <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>
@@ -487,10 +607,10 @@
         </div>
 
         <nav class="nav">
-          <button class="tab active" data-tab="overview">Overview</button>
-          <button class="tab" data-tab="profile">Profile</button>
-          <button class="tab" data-tab="network">Network</button>
-          <button class="tab" data-tab="social">Social</button>
+          <button class="tab active" data-tab="overview"><span class="tab-title">Overview</span><span class="tab-copy">Agent summary and discovered peers</span></button>
+          <button class="tab" data-tab="profile"><span class="tab-title">Profile</span><span class="tab-copy">Public identity and saved profile</span></button>
+          <button class="tab" data-tab="network"><span class="tab-title">Network</span><span class="tab-copy">Relay health, broadcast, diagnostics</span></button>
+          <button class="tab" data-tab="social"><span class="tab-title">Social</span><span class="tab-copy">social.md config and runtime state</span></button>
         </nav>
 
         <div class="sidebar-foot" id="sideMeta">adapter: -<br/>namespace: -</div>
@@ -509,11 +629,29 @@
               <button id="themeDarkBtn" type="button">Dark</button>
               <button id="themeLightBtn" type="button">Light</button>
             </div>
+            <div class="utility-row">
+              <button class="secondary" id="refreshAllBtn" type="button">Refresh</button>
+              <button class="secondary" id="focusModeBtn" type="button">Focus mode</button>
+            </div>
           </div>
         </div>
         <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 the live state of this node, whether discovery is working, and whether other public agents are 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="actions" id="onboardingActions" style="display:none; margin:8px 0 12px;">
@@ -525,6 +663,11 @@
         </div>
 
         <section id="view-overview" class="view active">
+          <div class="action-bar">
+            <button id="overviewBroadcastNowBtn" type="button">Broadcast Now</button>
+            <button class="secondary" id="overviewGoProfileBtn" type="button">Edit Profile</button>
+            <button class="secondary" id="overviewGoNetworkBtn" type="button">Open Network Diagnostics</button>
+          </div>
           <div class="grid" id="overviewCards"></div>
           <div class="split">
             <div class="card">
@@ -611,11 +754,12 @@
           <div class="grid" id="networkCards"></div>
           <div class="split">
             <div class="card">
-              <h3 class="title-sm">Runtime Components</h3>
-              <div class="mono" id="networkComponents"></div>
+              <h3 class="title-sm">Connection Summary</h3>
+              <div class="summary-list" id="networkSummaryList"></div>
             </div>
             <div class="card">
               <h3 class="title-sm">Quick Actions</h3>
+              <div class="field-hint" style="margin-bottom:10px;">Use these first. Most discovery issues can be confirmed here before opening diagnostics.</div>
               <div class="actions">
                 <button id="startBroadcastBtn">Start Broadcast</button>
                 <button class="secondary" id="stopBroadcastBtn">Stop Broadcast</button>
@@ -632,18 +776,12 @@
               <div id="networkFeedback" class="feedback" style="margin-top:10px;">Ready.</div>
             </div>
           </div>
-          <div class="split">
-            <div class="card" style="margin-top:10px;">
-              <h3 class="title-sm">Config Snapshot</h3>
-              <div class="mono mono-block" id="networkConfigSnapshot">-</div>
-            </div>
-            <div class="card" style="margin-top:10px;">
-              <h3 class="title-sm">Stats Snapshot</h3>
-              <div class="mono mono-block" id="networkStatsSnapshot">-</div>
-            </div>
-          </div>
           <details class="advanced-panel card">
             <summary class="title-sm">Diagnostics</summary>
+            <div class="card" style="margin-top:10px;">
+              <h3 class="title-sm">Runtime Components</h3>
+              <div class="mono" id="networkComponents"></div>
+            </div>
             <div class="grid" id="peerCards" style="margin-top:10px;"></div>
             <div class="card" style="margin-top:10px;">
               <h3 class="title-sm">Peer Inventory</h3>
@@ -682,6 +820,16 @@
               </div>
               <div class="logs" id="logList"></div>
             </div>
+            <div class="split">
+              <div class="card" style="margin-top:10px;">
+                <h3 class="title-sm">Config Snapshot</h3>
+                <div class="mono mono-block" id="networkConfigSnapshot">-</div>
+              </div>
+              <div class="card" style="margin-top:10px;">
+                <h3 class="title-sm">Stats Snapshot</h3>
+                <div class="mono mono-block" id="networkStatsSnapshot">-</div>
+              </div>
+            </div>
           </details>
         </section>
 
@@ -692,8 +840,16 @@
             <div class="field-hint" id="socialStatusSubline">-</div>
             <div class="field-hint" id="socialStateHint">-</div>
           </div>
-          <div class="grid" id="socialPrimaryCards" style="margin-top:10px;"></div>
-          <div class="grid" id="socialIntegrationCards"></div>
+          <div class="split" style="margin-top:10px;">
+            <div class="card">
+              <h3 class="title-sm">What Is Active</h3>
+              <div class="grid" id="socialPrimaryCards"></div>
+            </div>
+            <div class="card">
+              <h3 class="title-sm">Identity Binding</h3>
+              <div class="grid" id="socialIntegrationCards"></div>
+            </div>
+          </div>
           <details class="card" style="margin-top:10px;">
             <summary class="title-sm" style="cursor:pointer;">Advanced Network Details</summary>
             <div class="grid" id="socialAdvancedCards" style="margin-top:10px;"></div>
@@ -757,6 +913,24 @@
       let logLevelFilter = 'all';
       let socialTemplate = '';
       let onlyShowOnline = false;
+      const pageMeta = {
+        overview: {
+          title: 'Overview',
+          body: 'See the live state of this node, whether discovery is healthy, and whether other public agents are visible through the relay.',
+        },
+        profile: {
+          title: 'Profile',
+          body: 'Edit the signed public identity card that other agents can discover. Saved profile data should survive restart and update.',
+        },
+        network: {
+          title: 'Network',
+          body: 'Inspect relay connectivity, peer inventory, broadcast timing, and diagnostics when cross-device discovery is not working.',
+        },
+        social: {
+          title: 'Social',
+          body: 'Review social.md, runtime resolution, and the effective public visibility state that controls discovery.',
+        },
+      };
 
       function ago(ts) {
         if (!ts) return '-';
@@ -937,6 +1111,9 @@
         ['overview', 'profile', 'network', 'social'].forEach((k) => {
           document.getElementById(`view-${k}`).classList.toggle('active', k === tab);
         });
+        const meta = pageMeta[tab] || pageMeta.overview;
+        document.getElementById('pageHeroTitle').textContent = meta.title;
+        document.getElementById('pageHeroBody').textContent = meta.body;
         if (tab === 'profile' && !profileDirty && !profileSaving) {
           refreshProfile().catch(() => {});
         }
@@ -961,6 +1138,7 @@
           `broadcast_enabled: ${o.broadcast_enabled}`,
           `last_broadcast: ${ago(o.last_broadcast_at)}`,
         ].join('\n');
+        document.getElementById('heroMode').textContent = o.social?.network_mode || '-';
 
         document.getElementById('pillBroadcast').textContent = o.broadcast_enabled ? 'broadcast: running' : 'broadcast: paused';
         document.getElementById('pillBroadcast').className = `pill ${o.broadcast_enabled ? 'ok' : 'warn'}`;
@@ -1060,6 +1238,9 @@
         const d = s.adapter_discovery_stats || {};
         const dx = s.adapter_diagnostics_summary || {};
         const ac = s.adapter_config || c.adapter_config || {};
+        document.getElementById('heroAdapter').textContent = c.adapter || '-';
+        document.getElementById('heroRelay').textContent = dx.signaling_url || '-';
+        document.getElementById('heroRoom').textContent = dx.room || '-';
 
         document.getElementById('pillAdapter').textContent = `adapter: ${c.adapter}`;
         document.getElementById('sideMeta').innerHTML = `adapter: ${c.adapter}<br/>namespace: ${c.namespace || '-'}<br/>port: ${c.port ?? '-'}`;
@@ -1085,6 +1266,15 @@
           ['Last Inbound', ago(msg.last_message_at)],
           ['Last Outbound', ago(msg.last_broadcast_at)],
         ].map(([k,v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join('');
+        document.getElementById('networkSummaryList').innerHTML = [
+          ['Relay health', dx.last_error ? 'degraded' : 'connected'],
+          ['Current relay', dx.signaling_url || '-'],
+          ['Current room', dx.room || '-'],
+          ['Last join', ago(dx.last_join_at)],
+          ['Last poll', ago(dx.last_poll_at)],
+          ['Last publish', ago(dx.last_publish_at)],
+          ['Last error', dx.last_error || 'none'],
+        ].map(([k, v]) => `<div class="summary-item"><div class="label">${k}</div><div class="mono">${v}</div></div>`).join('');
 
         const comp = c.components || {};
         const lim = c.limits || {};
@@ -1112,6 +1302,12 @@
           `discovery_heartbeat_send_errors: ${d.heartbeat_send_errors ?? '-'}`,
           `signaling_messages_sent_total: ${dx.signaling_messages_sent_total ?? '-'}`,
           `signaling_messages_received_total: ${dx.signaling_messages_received_total ?? '-'}`,
+          `last_join_at: ${dx.last_join_at ? new Date(dx.last_join_at).toISOString() : '-'}`,
+          `last_poll_at: ${dx.last_poll_at ? new Date(dx.last_poll_at).toISOString() : '-'}`,
+          `last_publish_at: ${dx.last_publish_at ? new Date(dx.last_publish_at).toISOString() : '-'}`,
+          `last_peer_refresh_at: ${dx.last_peer_refresh_at ? new Date(dx.last_peer_refresh_at).toISOString() : '-'}`,
+          `last_error_at: ${dx.last_error_at ? new Date(dx.last_error_at).toISOString() : '-'}`,
+          `last_error: ${dx.last_error || '-'}`,
           `signaling_endpoints: ${Array.isArray(dx.signaling_endpoints) ? dx.signaling_endpoints.join(', ') : '-'}`,
           `bootstrap_sources: ${Array.isArray(dx.bootstrap_sources) ? dx.bootstrap_sources.join(', ') : '-'}`,
           `seed_peers_count: ${dx.seed_peers_count ?? '-'}`,
@@ -1143,6 +1339,9 @@
           ['Signaling URL', summary.signaling_url || '-'],
           ['Signaling Endpoints', (summary.signaling_endpoints || []).length || 0],
           ['Room', summary.room || '-'],
+          ['Last Join', ago(summary.last_join_at)],
+          ['Last Poll', ago(summary.last_poll_at)],
+          ['Last Publish', ago(summary.last_publish_at)],
           ['Bootstrap Sources', (summary.bootstrap_sources || []).length || 0],
           ['Seed Peers', summary.seed_peers_count ?? 0],
           ['Discovery Events', summary.discovery_events_total ?? 0],
@@ -1154,7 +1353,7 @@
         ].map(([k,v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join('');
 
         if (!peers.items || !peers.items.length) {
-          document.getElementById('peerTableWrap').innerHTML = '<div class="label">No peers discovered yet.</div>';
+          document.getElementById('peerTableWrap').innerHTML = '<div class="empty-state">No peers discovered yet. Confirm both nodes use the same relay URL, room, and public discovery setting.</div>';
           document.getElementById('peerStatsWrap').textContent = toPrettyJson({
             discovery_stats: ds,
             diagnostics_summary: summary,
@@ -1202,7 +1401,7 @@
         ].map(([k,v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join('');
 
         if (!items.length) {
-          document.getElementById('discoveryEventList').innerHTML = '<div class="label">No discovery events yet.</div>';
+          document.getElementById('discoveryEventList').innerHTML = '<div class="empty-state">No discovery events yet. If this stays empty, the node may not be polling or joining the relay successfully.</div>';
         } else {
           document.getElementById('discoveryEventList').innerHTML = items
             .slice()
@@ -1310,14 +1509,14 @@
       function renderLogs() {
         const el = document.getElementById('logList');
         if (!logsCache.length) {
-          el.innerHTML = '<div class="label">No logs yet.</div>';
+          el.innerHTML = '<div class="empty-state">No logs yet.</div>';
           return;
         }
         const filtered = logLevelFilter === 'all'
           ? logsCache
           : logsCache.filter((l) => String(l.level || '').toLowerCase() === logLevelFilter);
         if (!filtered.length) {
-          el.innerHTML = `<div class="label">No ${logLevelFilter} logs.</div>`;
+          el.innerHTML = `<div class="empty-state">No ${logLevelFilter} logs.</div>`;
           return;
         }
         el.innerHTML = filtered.map((l) => `
@@ -1354,6 +1553,27 @@
       });
       document.getElementById('themeDarkBtn').addEventListener('click', () => applyTheme('dark'));
       document.getElementById('themeLightBtn').addEventListener('click', () => applyTheme('light'));
+      document.getElementById('refreshAllBtn').addEventListener('click', async () => {
+        await refreshAll();
+        toast('Refreshed');
+      });
+      document.getElementById('focusModeBtn').addEventListener('click', () => {
+        const shell = document.getElementById('appShell');
+        const next = !shell.classList.contains('focus-mode');
+        shell.classList.toggle('focus-mode', next);
+        document.getElementById('focusModeBtn').textContent = next ? 'Exit focus' : 'Focus mode';
+      });
+      document.getElementById('sidebarToggleBtn').addEventListener('click', () => {
+        const shell = document.getElementById('appShell');
+        const next = !shell.classList.contains('nav-collapsed');
+        shell.classList.toggle('nav-collapsed', next);
+        document.getElementById('sidebarToggleBtn').textContent = next ? 'Expand sidebar' : 'Collapse sidebar';
+      });
+      document.getElementById('overviewBroadcastNowBtn').addEventListener('click', () => {
+        document.getElementById('broadcastNowBtn').click();
+      });
+      document.getElementById('overviewGoProfileBtn').addEventListener('click', () => switchTab('profile'));
+      document.getElementById('overviewGoNetworkBtn').addEventListener('click', () => switchTab('network'));
 
       document.getElementById('profileForm').addEventListener('submit', async (event) => {
         event.preventDefault();
@@ -1442,7 +1662,7 @@
       document.getElementById('quickGlobalPreviewBtn').addEventListener('click', async () => {
         const currentSignaling = window.prompt('Signaling URL (publicly reachable):', 'http://localhost:4510');
         if (!currentSignaling) return;
-        const room = window.prompt('Room:', 'silicaclaw-demo') || 'silicaclaw-demo';
+        const room = window.prompt('Room:', 'silicaclaw-global-preview') || 'silicaclaw-global-preview';
         setFeedback('networkFeedback', 'Enabling cross-network preview...');
         try {
           const result = await api('/api/network/quick-connect-global-preview', {