npm - @silicaclaw/cli - Versions diffs - 1.0.0-beta.9 → 2026.3.18-3 - Mend

@silicaclaw/cli 1.0.0-beta.9 → 2026.3.18-3

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

Files changed (29) hide show

package/CHANGELOG.md +100 -0
package/INSTALL.md +24 -13
package/README.md +62 -18
package/VERSION +1 -1
package/apps/local-console/package.json +1 -0
package/apps/local-console/public/index.html +2083 -473
package/apps/local-console/src/server.ts +108 -31
package/apps/public-explorer/public/index.html +283 -61
package/docs/CLOUDFLARE_RELAY.md +61 -0
package/docs/NEW_USER_INSTALL.md +166 -0
package/docs/NEW_USER_OPERATIONS.md +265 -0
package/package.json +2 -2
package/packages/core/dist/socialConfig.d.ts +1 -1
package/packages/core/dist/socialConfig.js +7 -6
package/packages/core/dist/socialResolver.js +15 -5
package/packages/core/src/socialConfig.ts +8 -7
package/packages/core/src/socialResolver.ts +17 -5
package/packages/network/dist/index.d.ts +1 -0
package/packages/network/dist/index.js +1 -0
package/packages/network/dist/relayPreview.d.ts +166 -0
package/packages/network/dist/relayPreview.js +430 -0
package/packages/network/src/index.ts +1 -0
package/packages/network/src/relayPreview.ts +552 -0
package/packages/storage/dist/socialRuntimeRepo.js +4 -4
package/packages/storage/src/socialRuntimeRepo.ts +4 -4
package/scripts/quickstart.sh +241 -38
package/scripts/silicaclaw-cli.mjs +418 -56
package/scripts/silicaclaw-gateway.mjs +231 -46
package/scripts/webrtc-signaling-server.mjs +89 -5

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

@@ -4,65 +4,117 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SilicaClaw Control UI</title>
-    <meta name="description" content="SilicaClaw local-first agent control console." />
+    <meta id="metaDescription" name="description" content="SilicaClaw local-first agent control console." />
     <meta property="og:type" content="website" />
-    <meta property="og:title" content="SilicaClaw Local Console" />
-    <meta property="og:description" content="Local-first control surface for SilicaClaw agents." />
+    <meta id="ogTitle" property="og:title" content="SilicaClaw Local Console" />
+    <meta id="ogDescription" property="og:description" content="Local-first control surface for SilicaClaw agents." />
     <meta property="og:image" content="/assets/silicaclaw-logo.png" />
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="SilicaClaw Local Console" />
-    <meta name="twitter:description" content="Local-first control surface for SilicaClaw agents." />
+    <meta id="twitterTitle" name="twitter:title" content="SilicaClaw Local Console" />
+    <meta id="twitterDescription" name="twitter:description" content="Local-first control surface for SilicaClaw agents." />
     <meta name="twitter:image" content="/assets/silicaclaw-logo.png" />
     <link rel="icon" type="image/png" href="/assets/silicaclaw-logo.png" />
     <link rel="apple-touch-icon" href="/assets/silicaclaw-logo.png" />
     <style>
       :root {
         --bg: #0e1015;
+        --bg-accent: #13151b;
         --bg-elevated: #191c24;
         --bg-hover: #1f2330;
+        --bg-muted: #1f2330;
         --panel: #0e1015;
+        --panel-strong: #191c24;
+        --panel-hover: #1f2330;
         --card: #161920;
-        --line: #1e2028;
-        --line-strong: #2e3040;
+        --card-foreground: #f0f0f2;
+        --card-highlight: rgba(255, 255, 255, 0.04);
+        --card-soft: rgba(22, 25, 32, 0.86);
+        --card-strong: rgba(25, 28, 36, 0.96);
+        --chrome: rgba(14, 16, 21, 0.96);
+        --chrome-strong: rgba(14, 16, 21, 0.98);
         --text: #d4d4d8;
         --text-strong: #f4f4f5;
-        --muted: #636370;
-        --brand: #ff5c5c;
-        --brand-hover: #ff7070;
-        --brand-soft: rgba(255, 92, 92, 0.1);
+        --muted: #838387;
+        --muted-strong: #62626a;
+        --border: #1e2028;
+        --border-strong: #2e3040;
+        --border-hover: #3e4050;
+        --accent: #ff5c5c;
+        --accent-hover: #ff7070;
+        --accent-subtle: rgba(255, 92, 92, 0.1);
+        --accent-glow: rgba(255, 92, 92, 0.2);
         --ok: #22c55e;
         --warn: #f59e0b;
-        --err: #ef4444;
-        --chip: #1f2330;
+        --danger: #ef4444;
+        --info: #3b82f6;
+        --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent);
+        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
+        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
+        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
+        --radius-sm: 6px;
+        --radius-md: 10px;
+        --radius-lg: 14px;
+        --radius-xl: 20px;
+        --radius-full: 9999px;
+        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+        --duration-fast: 100ms;
+        --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
       }
       :root[data-theme-mode="light"] {
         --bg: #f8f9fa;
-        --bg-elevated: #f1f3f5;
+        --bg-accent: #f1f3f5;
+        --bg-elevated: #ffffff;
         --bg-hover: #eceef0;
+        --bg-muted: #eceef0;
         --panel: #f8f9fa;
+        --panel-strong: #f1f3f5;
+        --panel-hover: #e6e8eb;
         --card: #ffffff;
-        --line: #e5e5ea;
-        --line-strong: #d1d1d6;
+        --card-foreground: #1a1a1e;
+        --card-highlight: rgba(0, 0, 0, 0.02);
+        --card-soft: rgba(255, 255, 255, 0.9);
+        --card-strong: rgba(255, 255, 255, 0.98);
+        --chrome: rgba(248, 249, 250, 0.96);
+        --chrome-strong: rgba(248, 249, 250, 0.98);
         --text: #3c3c43;
         --text-strong: #1a1a1e;
-        --muted: #8e8e93;
-        --brand: #dc2626;
-        --brand-hover: #ef4444;
-        --brand-soft: rgba(220, 38, 38, 0.08);
-        --ok: #16a34a;
-        --warn: #d97706;
-        --err: #dc2626;
-        --chip: #f1f3f5;
+        --muted: #6e6e73;
+        --muted-strong: #545458;
+        --border: #e5e5ea;
+        --border-strong: #d1d1d6;
+        --border-hover: #aeaeb2;
+        --accent: #dc2626;
+        --accent-hover: #ef4444;
+        --accent-subtle: rgba(220, 38, 38, 0.08);
+        --accent-glow: rgba(220, 38, 38, 0.1);
+        --ok: #15803d;
+        --warn: #b45309;
+        --danger: #dc2626;
+        --info: #2563eb;
+        --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent);
+        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
+        --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.08);
       }
       * { box-sizing: border-box; }
-      html, body { margin: 0; min-height: 100%; }
+      html, body {
+        margin: 0;
+        height: 100%;
+        overflow: hidden;
+      }
       body {
-        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
+        font: 400 13.5px/1.55 var(--font-body);
+        letter-spacing: -0.01em;
         color: var(--text);
         background:
           radial-gradient(900px 420px at 8% -12%, rgba(255, 92, 92, 0.18), transparent 60%),
           linear-gradient(180deg, #0e1015 0%, #0e1015 62%, #0f1219 100%);
         transition: background .2s ease, color .2s ease;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
       }
       :root[data-theme-mode="light"] body {
         background:
@@ -72,35 +124,121 @@
       .app {
         display: grid;
-        grid-template-columns: 240px 1fr;
-        min-height: 100vh;
+        grid-template-columns: 258px 1fr;
+        height: 100vh;
+        overflow: hidden;
+        transition: grid-template-columns .2s ease;
+      }
+      .app.nav-collapsed {
+        grid-template-columns: 78px 1fr;
+      }
+      .app.focus-mode {
+        grid-template-columns: 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;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        border-right: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
+        background: var(--bg);
+        padding: 14px 10px 12px;
+        position: relative;
+        overflow: hidden;
+        transition: padding .2s ease;
+      }
+      :root[data-theme-mode="light"] .sidebar {
+        background: var(--panel);
+      }
+      .app.nav-collapsed .sidebar {
+        padding: 12px 8px 10px;
+      }
+      .sidebar-shell {
+        display: flex;
+        flex: 1 1 auto;
+        min-height: 0;
+        flex-direction: column;
+      }
+      .sidebar-shell__header {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        min-height: 0;
+        padding: 0 8px 18px;
+      }
+      .nav-collapse-toggle {
+        width: 36px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--bg-elevated);
+        border: 1px solid color-mix(in srgb, var(--border-strong) 68%, transparent);
+        border-radius: 999px;
+        cursor: pointer;
+        color: var(--muted);
+        flex: 0 0 auto;
+        transition:
+          background .16s ease,
+          border-color .16s ease,
+          color .16s ease,
+          transform .16s ease;
+      }
+      .nav-collapse-toggle:hover {
+        background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
+        border-color: color-mix(in srgb, var(--border-strong) 88%, transparent);
+        color: var(--text);
+        transform: translateY(-1px);
+      }
+      .nav-collapse-toggle__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        color: inherit;
+      }
+      .nav-collapse-toggle__icon svg {
+        width: 16px;
+        height: 16px;
+        stroke: currentColor;
+        fill: none;
+        stroke-width: 1.5px;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .sidebar-shell__body {
+        flex: 1 1 auto;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+      }
+      .sidebar-shell__footer {
+        flex: 0 0 auto;
+        padding: 12px 8px 0;
       }
       .brand {
         display: flex;
         align-items: center;
         gap: 10px;
-        margin-bottom: 18px;
+        margin-bottom: 0;
       }
       .brand-logo {
-        width: 38px;
-        height: 38px;
+        width: 32px;
+        height: 32px;
         border-radius: 10px;
         object-fit: cover;
         display: block;
-        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
-        border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
+        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
+        border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
       }
       .brand-badge {
-        width: 38px;
-        height: 38px;
+        width: 32px;
+        height: 32px;
         border-radius: 10px;
-        background: linear-gradient(135deg, var(--brand), var(--brand-hover));
+        background: linear-gradient(135deg, var(--accent), var(--accent-hover));
         color: #fff;
         font-weight: 900;
         display: grid;
@@ -109,98 +247,425 @@
       .brand-badge.hidden { display: none; }
       .brand h1 {
         margin: 0;
-        font-size: 17px;
+        font-size: 15px;
+        line-height: 1.1;
+        letter-spacing: -0.03em;
       }
       .brand p {
         margin: 2px 0 0;
         color: var(--muted);
-        font-size: 12px;
+        font-size: 10px;
+        line-height: 1.15;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .version-dot {
+        width: 5px;
+        height: 5px;
+        border-radius: 999px;
+        background: var(--accent);
+        opacity: .85;
+      }
+      .app.nav-collapsed .brand h1,
+      .app.nav-collapsed .brand p,
+      .app.nav-collapsed .sidebar-foot,
+      .app.nav-collapsed .sidebar-nav__label {
+        display: none;
+      }
+      .app.focus-mode .sidebar {
+        display: none;
+      }
+      .app.focus-mode .integration-strip,
+      .app.focus-mode .page-hero,
+      .app.focus-mode .notice,
+      .app.focus-mode #publicDiscoveryHint {
+        display: none !important;
+      }
+      .app.nav-collapsed .brand {
+        display: none;
+      }
+      .app.nav-collapsed .sidebar-shell__header {
+        justify-content: center;
+        align-items: center;
+        gap: 0;
+        padding: 0 2px 16px;
+      }
+      .app.nav-collapsed .nav button {
+        justify-content: center;
+        width: 44px;
+        min-height: 44px;
+        padding: 0;
+        margin: 0 auto;
+        border-radius: 16px;
+        border-color: transparent;
+        box-shadow: none;
+        background: transparent;
+      }
+      .app.nav-collapsed .nav button .tab-labels {
+        display: none;
+      }
+      .app.nav-collapsed .nav button .tab-icon {
+        width: 18px;
+        height: 18px;
+      }
+      .app.nav-collapsed .nav button .tab-icon svg {
+        width: 18px;
+        height: 18px;
+      }
+      .app.nav-collapsed .nav button.active::before {
+        left: 8px;
+        top: 10px;
+        bottom: 10px;
+      }
+      .app.nav-collapsed .sidebar-shell__footer {
+        padding: 8px 0 2px;
+      }
+      .app.nav-collapsed .sidebar-utility {
+        display: none;
+      }
+      .app.nav-collapsed .sidebar-version {
+        width: 44px;
+        min-height: 44px;
+        padding: 0;
+        justify-content: center;
+        border-radius: 16px;
       }
       .nav {
         display: grid;
-        gap: 8px;
+        gap: 4px;
+        min-height: 0;
+        overflow: auto;
+        padding: 0;
+        scrollbar-width: none;
+      }
+      .nav::-webkit-scrollbar { display: none; }
+      .sidebar-nav__label {
+        padding: 0 10px 8px;
+        color: var(--muted);
+        font-size: 12px;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
       }
       .nav button {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 8px;
+        min-height: 40px;
         text-align: left;
         border: 1px solid transparent;
         background: transparent;
         color: var(--muted);
-        padding: 10px 12px;
-        border-radius: 10px;
+        padding: 0 9px;
+        border-radius: 12px;
         cursor: pointer;
         font: inherit;
+        transition:
+          border-color .16s ease,
+          background .16s ease,
+          color .16s ease,
+          transform .16s ease;
+      }
+      .nav button .tab-icon {
+        width: 16px;
+        height: 16px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        opacity: .72;
+      }
+      .nav button .tab-icon svg {
+        width: 16px;
+        height: 16px;
+        stroke: currentColor;
+        fill: none;
+        stroke-width: 1.5px;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .nav button .tab-labels {
+        min-width: 0;
+      }
+      .nav button .tab-title {
+        display: block;
+        font-size: 14px;
+        font-weight: 600;
+        color: inherit;
+        white-space: nowrap;
+      }
+      .nav button .tab-copy {
+        display: none;
       }
       .nav button.active {
-        color: #e9f7ff;
-        border-color: color-mix(in srgb, var(--brand) 28%, transparent);
-        background: var(--brand-soft);
+        color: var(--text-strong);
+        border-color: color-mix(in srgb, var(--accent) 18%, transparent);
+        background: color-mix(in srgb, var(--accent-subtle) 88%, var(--bg-elevated) 12%);
+        box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent);
+      }
+      .nav button.active .tab-icon {
+        opacity: 1;
+        color: var(--accent);
+      }
+      .nav button:hover {
+        color: var(--text);
+        background: color-mix(in srgb, var(--bg-hover) 68%, transparent);
+        border-color: color-mix(in srgb, var(--border) 60%, transparent);
+      }
+      .nav button:hover .tab-icon {
+        opacity: 1;
       }
-      .nav button:hover { color: #d2e7ff; }
       .sidebar-foot {
-        margin-top: 20px;
-        border-top: 1px dashed color-mix(in srgb, var(--line-strong) 85%, transparent);
-        padding-top: 14px;
+        margin-top: 12px;
+        flex: 0 0 auto;
+        border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
+        padding-top: 12px;
         color: var(--muted);
         font-size: 12px;
       }
+      .sidebar-utility {
+        display: grid;
+        gap: 8px;
+        padding: 12px;
+        border-radius: 16px;
+        border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+        background: var(--bg-elevated);
+        box-shadow: none;
+      }
+      .sidebar-utility-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+      }
+      .sidebar-utility__label {
+        font-size: 11px;
+        font-weight: 700;
+        color: var(--muted);
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+      }
+      .sidebar-utility__value {
+        color: var(--text);
+        font-size: 12px;
+        font-weight: 600;
+      }
+      .sidebar-version {
+        margin-top: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 40px;
+        padding: 0 12px;
+        border-radius: 14px;
+        background: var(--bg-elevated);
+        border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+        box-shadow: none;
+      }
+      .sidebar-version__text {
+        font-size: 12px;
+        color: var(--text);
+        font-weight: 600;
+        line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: center;
+      }
+      .app.nav-collapsed .sidebar-version {
+        justify-content: center;
+        padding: 0;
+      }
       .main {
-        padding: 18px;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        min-height: 0;
+        height: 100vh;
+        overflow: hidden;
+        padding: 0;
       }
       .topbar {
+        flex: 0 0 auto;
         display: flex;
         justify-content: space-between;
-        gap: 10px;
+        gap: 12px;
         align-items: center;
-        margin-bottom: 14px;
+        min-height: 52px;
+        padding: 0 24px;
+        border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
+        background: var(--chrome);
+        backdrop-filter: blur(12px) saturate(1.6);
+        -webkit-backdrop-filter: blur(12px) saturate(1.6);
       }
       .topbar h2 {
+        display: none;
         margin: 0;
-        font-size: 22px;
       }
       .topbar p {
-        margin: 4px 0 0;
+        display: none;
+        margin: 0;
         color: var(--muted);
-        font-size: 13px;
+        font-size: 12px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .dashboard-header__breadcrumb {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-width: 0;
+        overflow: hidden;
+        font-size: 12px;
+        margin-bottom: 2px;
+        letter-spacing: 0.01em;
+      }
+      .dashboard-header__breadcrumb-link,
+      .dashboard-header__breadcrumb-sep {
+        color: var(--muted);
+      }
+      .dashboard-header__breadcrumb-current {
+        color: var(--text-strong);
+        font-weight: 650;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
+      .topnav-shell__content {
+        min-width: 0;
+        flex: 1;
+        overflow: hidden;
+      }
+      .main-scroll {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow: auto;
+        padding: 12px 18px 18px;
+      }
       .status-row {
         display: flex;
         gap: 8px;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         align-items: center;
+        flex-shrink: 0;
+        min-width: max-content;
       }
-      .theme-switch {
+      .topbar-actions {
         display: inline-flex;
-        gap: 4px;
-        padding: 3px;
+        align-items: center;
+        gap: 8px;
+      }
+      .icon-btn {
+        width: 30px;
+        height: 30px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
         border-radius: 999px;
-        border: 1px solid var(--line);
+        border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
         background: var(--bg-elevated);
+        color: var(--muted);
+        padding: 0;
+      }
+      .icon-btn:hover {
+        color: var(--text-strong);
+        border-color: color-mix(in srgb, var(--accent) 28%, transparent);
+        background: color-mix(in srgb, var(--accent-subtle) 65%, var(--bg-elevated));
+      }
+      .icon-btn.active {
+        color: var(--text-strong);
+        border-color: color-mix(in srgb, var(--accent) 34%, transparent);
+        background: var(--accent-subtle);
       }
-      .theme-switch button {
+      .icon-btn svg {
+        width: 15px;
+        height: 15px;
+        stroke: currentColor;
+      }
+      .topbar-theme-mode {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        padding: 3px;
+        border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+        border-radius: 999px;
+        background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
+      }
+      .topbar-theme-mode__btn {
+        width: 30px;
+        height: 30px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
         border: 1px solid transparent;
+        border-radius: 999px;
         background: transparent;
         color: var(--muted);
-        border-radius: 999px;
-        padding: 5px 10px;
-        font-size: 12px;
-        font-weight: 600;
+        cursor: pointer;
+        transition:
+          color var(--duration-fast) ease,
+          background var(--duration-fast) ease,
+          border-color var(--duration-fast) ease;
       }
-      .theme-switch button.active {
-        color: var(--text-strong);
-        background: var(--brand-soft);
-        border-color: color-mix(in srgb, var(--brand) 24%, transparent);
+      .topbar-theme-mode__btn:hover {
+        color: var(--text);
+        background: var(--bg-hover);
+      }
+      .topbar-theme-mode__btn:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring);
+      }
+      .topbar-theme-mode__btn--active {
+        color: var(--accent);
+        background: var(--accent-subtle);
+        border-color: color-mix(in srgb, var(--accent) 25%, transparent);
+      }
+      .topbar-theme-mode__btn svg {
+        width: 14px;
+        height: 14px;
+        stroke: currentColor;
+        fill: none;
+        stroke-width: 1.75px;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .theme-icon {
+        width: 14px;
+        height: 14px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .theme-icon svg {
+        width: 14px;
+        height: 14px;
+        stroke: currentColor;
+        fill: none;
+        stroke-width: 1.75px;
+        stroke-linecap: round;
+        stroke-linejoin: round;
       }
       .pill {
         border-radius: 999px;
-        border: 1px solid var(--line);
-        background: var(--bg-elevated);
+        border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
+        background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
         color: var(--muted);
-        padding: 7px 11px;
+        padding: 6px 10px;
         font-size: 12px;
+        font-weight: 500;
+        min-height: 32px;
+        display: inline-flex;
+        align-items: center;
+        box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
       }
       .pill.ok { color: var(--ok); border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.08); }
       .pill.warn { color: var(--warn); border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.08); }
@@ -208,8 +673,8 @@
       .notice {
         display: none;
         margin-bottom: 12px;
-        border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
-        background: var(--brand-soft);
+        border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
+        background: var(--accent-subtle);
         border-radius: 10px;
         padding: 10px 12px;
         font-size: 13px;
@@ -219,13 +684,16 @@
         position: sticky;
         top: 0;
         z-index: 9;
-        margin-bottom: 12px;
-        border: 1px solid var(--line);
-        border-radius: 10px;
-        background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
-        padding: 9px 12px;
-        font-size: 13px;
+        margin-bottom: 8px;
+        border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+        border-radius: 14px;
+        background:
+          linear-gradient(180deg, color-mix(in srgb, var(--card-soft) 98%, transparent), color-mix(in srgb, var(--bg-elevated) 94%, transparent));
+        padding: 8px 12px;
+        font-size: 12px;
+        line-height: 1.45;
         color: var(--text);
+        box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
       }
       .integration-strip.ok {
         border-color: rgba(34, 197, 94, 0.35);
@@ -233,40 +701,157 @@
       .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: 8px;
+      }
+      .hero-copy {
+        border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+        border-radius: 16px;
+        background:
+          linear-gradient(180deg, color-mix(in srgb, var(--card-strong) 98%, transparent), color-mix(in srgb, var(--card-soft) 96%, transparent));
+        padding: 11px 14px;
+        box-shadow:
+          inset 0 1px 0 color-mix(in srgb, white 4%, transparent),
+          0 10px 24px color-mix(in srgb, black 9%, transparent);
+      }
+      .hero-copy h3 {
+        margin: 0;
+        font-size: 17px;
+        color: var(--text-strong);
+        letter-spacing: -0.02em;
+      }
+      .hero-copy p {
+        margin: 5px 0 0;
+        color: var(--muted);
+        font-size: 12px;
+        line-height: 1.42;
+      }
+      .hero-meta {
+        border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+        border-radius: 16px;
+        background:
+          linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 97%, transparent), color-mix(in srgb, var(--panel) 98%, transparent));
+        padding: 11px;
+        box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
+      }
+      .hero-meta-grid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 6px;
+      }
+      .hero-meta-item {
+        border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
+        border-radius: 12px;
+        background: color-mix(in srgb, var(--panel) 90%, transparent);
+        padding: 7px 9px;
+      }
       .view { display: none; }
-      .view.active { display: block; }
+      .view.active {
+        display: grid;
+        gap: 8px;
+      }
+      .section-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        min-width: 0;
+      }
+      .section-header__copy {
+        min-width: 0;
+      }
+      .section-header__eyebrow {
+        margin: 0 0 3px;
+        color: var(--muted);
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .section-header__title {
+        margin: 0;
+        color: var(--text-strong);
+        font-size: 16px;
+        letter-spacing: -0.02em;
+      }
+      .section-header__body {
+        margin: 4px 0 0;
+        color: var(--muted);
+        font-size: 12px;
+        line-height: 1.45;
+      }
+      .section-surface {
+        border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+        border-radius: 16px;
+        background:
+          linear-gradient(180deg, color-mix(in srgb, var(--card-strong) 98%, transparent), color-mix(in srgb, var(--card-soft) 96%, transparent));
+        padding: 12px;
+        box-shadow:
+          inset 0 1px 0 color-mix(in srgb, white 4%, transparent),
+          0 14px 30px color-mix(in srgb, black 10%, transparent);
+      }
+      .section-surface.compact {
+        padding: 10px 12px;
+      }
       .grid {
         display: grid;
-        gap: 10px;
+        gap: 8px;
         grid-template-columns: repeat(4, minmax(0, 1fr));
       }
+      #networkCards,
+      #socialPrimaryCards,
+      #socialIntegrationCards,
+      #socialAdvancedCards {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
       .card {
-        border: 1px solid var(--line);
-        border-radius: 14px;
-        background: var(--card);
+        border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+        border-radius: 16px;
+        background:
+          linear-gradient(180deg, color-mix(in srgb, var(--card-strong) 98%, transparent), color-mix(in srgb, var(--card-soft) 96%, transparent));
         padding: 12px;
-        box-shadow: 0 1px 2px rgba(0,0,0,0.25);
+        box-shadow:
+          inset 0 1px 0 color-mix(in srgb, white 4%, transparent),
+          0 14px 30px color-mix(in srgb, black 10%, transparent);
+        transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
+      }
+      .card:hover {
+        border-color: color-mix(in srgb, var(--accent) 14%, var(--border));
+        box-shadow:
+          inset 0 1px 0 color-mix(in srgb, white 4%, transparent),
+          0 18px 36px color-mix(in srgb, black 14%, transparent);
       }
       .label { font-size: 12px; color: var(--muted); }
-      .value { margin-top: 4px; font-size: 24px; font-weight: 800; }
+      .value { margin-top: 4px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
       .split {
-        margin-top: 10px;
+        margin-top: 8px;
         display: grid;
-        gap: 10px;
+        gap: 8px;
         grid-template-columns: 1.2fr 1fr;
       }
-      .title-sm { margin: 0 0 10px; font-size: 18px; }
+      .title-sm { margin: 0 0 10px; font-size: 16px; letter-spacing: -0.02em; }
       .mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
       .table {
         width: 100%;
         border-collapse: collapse;
       }
+      .table thead th {
+        color: var(--muted);
+        font-size: 11px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.07em;
+      }
       .table th, .table td {
-        border-bottom: 1px solid var(--line);
+        border-bottom: 1px solid var(--border);
         text-align: left;
         padding: 8px 6px;
         font-size: 13px;
@@ -281,22 +866,33 @@
       input, textarea {
         margin-top: 5px;
         width: 100%;
-        border-radius: 10px;
-        border: 1px solid var(--line);
-        background: var(--bg-elevated);
-        color: #eaf0ff;
+        border-radius: 12px;
+        border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+        background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 98%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
+        color: var(--text);
         font: inherit;
         padding: 10px;
+        box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
       }
       select {
         margin-top: 5px;
         width: 100%;
-        border-radius: 10px;
-        border: 1px solid var(--line);
-        background: var(--bg-elevated);
+        border-radius: 12px;
+        border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+        background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 98%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
         color: var(--text);
         font: inherit;
         padding: 10px;
+        box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
+      }
+      input:focus,
+      textarea:focus,
+      select:focus {
+        outline: none;
+        border-color: color-mix(in srgb, var(--accent) 34%, transparent);
+        box-shadow:
+          inset 0 1px 0 color-mix(in srgb, white 3%, transparent),
+          0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
       }
       textarea { min-height: 90px; resize: vertical; }
@@ -305,28 +901,87 @@
         gap: 8px;
         flex-wrap: wrap;
       }
+      .actions button,
+      .action-bar button,
+      .toolbar button {
+        min-height: 38px;
+      }
+      .action-bar {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+        margin-bottom: 8px;
+        padding: 2px 0 0;
+      }
+      .summary-list {
+        display: grid;
+        gap: 8px;
+      }
+      .summary-item {
+        display: grid;
+        gap: 3px;
+        padding: 10px;
+        border-radius: 12px;
+        border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+        background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 98%, transparent), color-mix(in srgb, var(--panel) 94%, transparent));
+        box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
+      }
+      .empty-state {
+        border: 1px dashed color-mix(in srgb, var(--border-strong) 88%, transparent);
+        border-radius: 14px;
+        padding: 18px;
+        color: var(--muted);
+        background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, transparent), color-mix(in srgb, var(--bg-elevated) 88%, transparent));
+        line-height: 1.55;
+      }
       button {
         border: 1px solid transparent;
-        border-radius: 10px;
-        background: var(--brand);
+        border-radius: 12px;
+        background: var(--accent);
         color: #ffffff;
         font-weight: 700;
         padding: 9px 13px;
         cursor: pointer;
+        box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 16%, transparent);
+      }
+      button:hover {
+        transform: translateY(-1px);
+        filter: saturate(1.04);
+      }
+      .nav button,
+      .nav-collapse-toggle,
+      .icon-btn,
+      .topbar-theme-mode__btn {
+        box-shadow: none;
+        filter: none;
+      }
+      .nav button,
+      .nav-collapse-toggle,
+      .icon-btn {
+        background: transparent;
+        color: var(--muted);
+      }
+      .nav button:hover,
+      .nav-collapse-toggle:hover,
+      .icon-btn:hover,
+      .topbar-theme-mode__btn:hover {
+        filter: none;
       }
       button.secondary {
-        border-color: var(--line-strong);
-        background: var(--bg-elevated);
+        border-color: var(--border-strong);
+        background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
         color: var(--text);
+        box-shadow: none;
       }
       .feedback {
-        border: 1px solid var(--line);
-        border-radius: 10px;
-        background: var(--bg-elevated);
-        padding: 9px;
+        border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+        border-radius: 12px;
+        background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 98%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
+        padding: 10px 11px;
         font-size: 13px;
         color: var(--muted);
+        box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
       }
       .profile-layout {
         display: grid;
@@ -334,10 +989,11 @@
         grid-template-columns: 1.1fr .9fr;
       }
       .profile-meta {
-        border: 1px solid var(--line);
-        border-radius: 10px;
+        border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+        border-radius: 12px;
         padding: 10px;
-        background: color-mix(in srgb, var(--card) 86%, transparent);
+        background: linear-gradient(180deg, color-mix(in srgb, var(--card-soft) 98%, transparent), color-mix(in srgb, var(--bg-elevated) 90%, transparent));
+        box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
       }
       .profile-meta h4 {
         margin: 0 0 8px;
@@ -362,9 +1018,9 @@
         flex-wrap: wrap;
       }
       .tag-chip {
-        border: 1px solid var(--line-strong);
+        border: 1px solid var(--border-strong);
         border-radius: 999px;
-        background: var(--chip);
+        background: var(--bg-hover);
         color: var(--text);
         padding: 3px 9px;
         font-size: 12px;
@@ -377,14 +1033,15 @@
         margin-top: 4px;
         color: var(--muted);
         font-size: 12px;
+        line-height: 1.45;
       }
       .field-error {
         margin-top: 4px;
-        color: var(--err);
+        color: var(--danger);
         font-size: 12px;
       }
       .input-invalid {
-        border-color: color-mix(in srgb, var(--err) 55%, transparent);
+        border-color: color-mix(in srgb, var(--danger) 55%, transparent);
       }
       .save-busy {
         opacity: 0.7;
@@ -394,46 +1051,71 @@
       .logs {
         max-height: 420px;
         overflow: auto;
-        border: 1px solid var(--line);
-        border-radius: 12px;
-        background: var(--panel);
+        border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+        border-radius: 14px;
+        background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, transparent), color-mix(in srgb, var(--bg-elevated) 90%, transparent));
         padding: 10px;
+        box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
       }
       .log-item {
-        border-bottom: 1px dashed var(--line);
+        border-bottom: 1px dashed var(--border);
         padding: 7px 0;
       }
       .log-item:last-child { border-bottom: 0; }
       .log-info { color: #8dc6ff; }
       .log-warn { color: var(--warn); }
-      .log-error { color: var(--err); }
+      .log-error { color: var(--danger); }
       .toolbar {
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
         align-items: end;
         margin-bottom: 10px;
+        padding-bottom: 2px;
       }
       .toolbar .field {
         min-width: 180px;
       }
       .mono-block {
-        border: 1px solid var(--line);
-        border-radius: 10px;
-        background: color-mix(in srgb, var(--bg-elevated) 85%, transparent);
+        border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+        border-radius: 12px;
+        background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 96%, transparent), color-mix(in srgb, var(--panel) 92%, transparent));
         padding: 10px;
         max-height: 240px;
         overflow: auto;
         white-space: pre-wrap;
         word-break: break-word;
+        box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
+      }
+      .advanced-panel {
+        margin-top: 8px;
+      }
+      .advanced-panel.card > summary,
+      details.card > summary {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
       }
+      .advanced-panel summary {
+        cursor: pointer;
+        list-style: none;
+        user-select: none;
+      }
+      .advanced-panel summary::-webkit-details-marker { display: none; }
+      .advanced-panel summary::after {
+        content: attr(data-i18n-closed-label);
+        float: right;
+        color: var(--muted);
+        font-size: 12px;
+      }
+      .advanced-panel[open] summary::after { content: attr(data-i18n-open-label); }
       .toast {
         position: fixed;
         right: 16px;
         bottom: 16px;
         background: var(--bg-elevated);
-        border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
+        border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
         color: var(--text);
         border-radius: 10px;
         padding: 10px 12px;
@@ -449,69 +1131,220 @@
         transform: translateY(0);
       }
+      #view-overview .action-bar {
+        margin-bottom: 0;
+      }
+      #view-overview .grid {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+      #view-overview .card .field-hint {
+        font-size: 12px;
+      }
+      #view-overview #snapshot {
+        line-height: 1.55;
+      }
       @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)); }
+        html, body {
+          height: auto;
+          overflow: auto;
+        }
+        .app {
+          grid-template-columns: 1fr;
+          height: auto;
+          overflow: visible;
+        }
+        .sidebar {
+          border-right: 0;
+          border-bottom: 1px solid var(--border);
+          height: auto;
+          overflow: visible;
+        }
+        .sidebar-shell {
+          display: block;
+        }
+        .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; }
+        .main {
+          height: auto;
+          overflow: visible;
+          padding-bottom: 18px;
+        }
+        .main-scroll {
+          overflow: visible;
+          padding-right: 0;
+        }
       }
     </style>
   </head>
   <body>
-    <div class="app">
+    <div class="app" id="appShell">
       <aside class="sidebar">
-        <div class="brand">
-          <img id="brandLogo" class="brand-logo" src="/assets/silicaclaw-logo.png" alt="SilicaClaw logo" />
-          <div id="brandFallback" class="brand-badge hidden">SC</div>
-          <div>
-            <h1>SilicaClaw</h1>
-            <p>Control UI</p>
+        <div 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>
+                <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">
+            <div class="sidebar-nav__label">Control</div>
+            <nav class="nav">
+              <button class="tab 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">Agent summary and discovered peers</span></span>
+              </button>
+              <button class="tab" 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 identity and saved profile</span></span>
+              </button>
+              <button class="tab" 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">Relay health, broadcast, diagnostics</span></span>
+              </button>
+              <button class="tab" 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">social.md config and runtime state</span></span>
+              </button>
+            </nav>
+          </div>
+          <div class="sidebar-shell__footer">
+            <div class="sidebar-version" title="Current version">
+              <span class="sidebar-version__text" id="brandVersion">-</span>
+            </div>
           </div>
         </div>
-        <nav class="nav">
-          <button class="tab active" data-tab="overview">Overview</button>
-          <button class="tab" data-tab="profile">Profile</button>
-          <button class="tab" data-tab="network">Network</button>
-          <button class="tab" data-tab="peers">Peers</button>
-          <button class="tab" data-tab="discovery">Discovery Events</button>
-          <button class="tab" data-tab="social">Social Config</button>
-          <button class="tab" data-tab="logs">Logs</button>
-        </nav>
-        <div class="sidebar-foot" id="sideMeta">adapter: -<br/>namespace: -</div>
       </aside>
       <main class="main">
         <div class="topbar">
-          <div>
-            <h2>Local Console</h2>
-            <p>OpenClaw-inspired local-first agent control surface</p>
+          <div 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>
+            <h2 id="topbarTitle">Local Console</h2>
+            <p id="topbarSubtitle">OpenClaw-inspired local-first agent control surface</p>
           </div>
           <div class="status-row">
             <div class="pill" id="pillAdapter">adapter: -</div>
             <div class="pill" id="pillBroadcast">broadcast: -</div>
-            <div class="theme-switch">
-              <button id="themeDarkBtn" type="button">Dark</button>
-              <button id="themeLightBtn" type="button">Light</button>
+            <div 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 class="integration-strip warn" id="integrationStatusBar">
-          Connected to SilicaClaw: - · Network mode: - · Public discovery: -
-        </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="actions" id="onboardingActions" style="display:none; margin:8px 0 12px;">
-          <button id="enablePublicDiscoveryBtn">Enable Public Discovery</button>
-          <button class="secondary" id="disablePublicDiscoveryBtn">Disable Public Discovery</button>
-        </div>
-        <div class="field-hint" id="publicDiscoveryHint" style="margin-bottom:12px; display:none;">
-          Public discovery only shares signed profile/presence records. It does not share private files and does not enable chat or remote control.
-        </div>
+          <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">
+          <section id="view-overview" class="view active">
+          <div class="section-surface compact">
+            <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</button>
+            </div>
+          </div>
           <div class="grid" id="overviewCards"></div>
           <div class="split">
             <div class="card">
@@ -528,9 +1361,16 @@
               <div class="mono" id="snapshot"></div>
             </div>
           </div>
-        </section>
-        <section id="view-profile" class="view">
+          </section>
+          <section id="view-profile" class="view">
+          <div class="section-header">
+            <div class="section-header__copy">
+              <div class="section-header__eyebrow">Profile</div>
+              <h3 class="section-header__title">Public profile</h3>
+              <p class="section-header__body">Edit the public card other nodes can see.</p>
+            </div>
+          </div>
           <div class="profile-layout">
             <div class="card stack">
               <h3 class="title-sm">Public Profile Editor</h3>
@@ -561,6 +1401,7 @@
                   <div class="field-error" id="errTags"></div>
                 </div>
                 <label><input type="checkbox" name="public_enabled" /> Public Enabled</label>
+                <div class="field-hint">This is the main public visibility switch used for discovery and relay broadcast.</div>
                 <div class="actions">
                   <button type="submit" id="saveProfileBtn">Save Profile</button>
                   <button type="button" class="secondary" id="refreshProfileBtn">Reload</button>
@@ -592,96 +1433,144 @@
               </div>
             </div>
           </div>
-        </section>
-        <section id="view-network" class="view">
+          </section>
+          <section id="view-network" class="view">
+          <div class="section-header">
+            <div class="section-header__copy">
+              <div class="section-header__eyebrow">Network</div>
+              <h3 class="section-header__title">Network</h3>
+              <p class="section-header__body">Check relay status, peers, and broadcast health.</p>
+            </div>
+          </div>
           <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">Actions</h3>
+              <h3 class="title-sm">Quick Actions</h3>
+              <div class="field-hint" style="margin-bottom:10px;">Use these first.</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>
-                <button class="secondary" id="refreshCacheBtn">Refresh Cache</button>
-                <button class="secondary" id="clearCacheBtn">Clear Discovered Cache</button>
-                <button class="secondary" id="quickGlobalPreviewBtn">Enable Cross-network Preview</button>
               </div>
+              <details class="advanced-panel">
+                <summary class="title-sm">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>
-          <div class="split">
+          <details class="advanced-panel card">
+            <summary class="title-sm">Diagnostics</summary>
             <div class="card" style="margin-top:10px;">
-              <h3 class="title-sm">Config Snapshot</h3>
-              <div class="mono mono-block" id="networkConfigSnapshot">-</div>
+              <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">Stats Snapshot</h3>
-              <div class="mono mono-block" id="networkStatsSnapshot">-</div>
+              <h3 class="title-sm">Peer Inventory</h3>
+              <div id="peerTableWrap"></div>
             </div>
-          </div>
-        </section>
-        <section id="view-peers" class="view">
-          <div class="grid" id="peerCards"></div>
-          <div class="card" style="margin-top:10px;">
-            <h3 class="title-sm">Peer Inventory</h3>
-            <div id="peerTableWrap"></div>
-          </div>
-          <div class="card" style="margin-top:10px;">
-            <h3 class="title-sm">Peer Discovery Stats</h3>
-            <div class="mono mono-block" id="peerStatsWrap">-</div>
-          </div>
-        </section>
-        <section id="view-discovery" class="view">
-          <div class="grid" id="discoveryCards"></div>
-          <div class="split">
             <div class="card" style="margin-top:10px;">
-              <h3 class="title-sm">Recent Discovery Events</h3>
-              <div class="logs" id="discoveryEventList"></div>
+              <h3 class="title-sm">Peer Discovery Stats</h3>
+              <div class="mono mono-block" id="peerStatsWrap">-</div>
+            </div>
+            <div class="grid" id="discoveryCards" style="margin-top:10px;"></div>
+            <div class="split">
+              <div class="card" style="margin-top:10px;">
+                <h3 class="title-sm">Recent Discovery Events</h3>
+                <div class="logs" id="discoveryEventList"></div>
+              </div>
+              <div class="card" style="margin-top:10px;">
+                <h3 class="title-sm">Discovery Snapshot</h3>
+                <div class="mono mono-block" id="discoverySnapshot">-</div>
+              </div>
             </div>
             <div class="card" style="margin-top:10px;">
-              <h3 class="title-sm">Discovery Snapshot</h3>
-              <div class="mono mono-block" id="discoverySnapshot">-</div>
+              <h3 class="title-sm">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" 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>
+          <section id="view-social" class="view">
+          <div class="section-header">
+            <div class="section-header__copy">
+              <div class="section-header__eyebrow">Social</div>
+              <h3 class="section-header__title">Social</h3>
+              <p class="section-header__body">Switch mode and export a clean social.md template.</p>
             </div>
           </div>
-        </section>
-        <section id="view-social" class="view">
           <div class="card">
             <h3 class="title-sm">Integration Status</h3>
             <div class="feedback" id="socialStatusLine">Checking integration status...</div>
             <div class="field-hint" id="socialStatusSubline">-</div>
             <div class="field-hint" id="socialStateHint">-</div>
           </div>
-          <div class="grid" id="socialPrimaryCards" style="margin-top:10px;"></div>
-          <div class="grid" id="socialIntegrationCards"></div>
+          <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>
             <div class="mono mono-block" id="socialAdvancedWrap" style="margin-top:10px;">-</div>
           </details>
-          <div class="split">
-            <div class="card" style="margin-top:10px;">
-              <h3 class="title-sm">Source & Parsed Frontmatter</h3>
-              <div class="mono mono-block" id="socialSourceWrap">-</div>
-              <div style="height:10px;"></div>
-              <div class="mono mono-block" id="socialRawWrap">-</div>
+          <details class="advanced-panel card">
+            <summary class="title-sm">Source / Runtime / Template</summary>
+            <div class="split">
+              <div class="card" style="margin-top:10px;">
+                <h3 class="title-sm">Source & Parsed Frontmatter</h3>
+                <div class="mono mono-block" id="socialSourceWrap">-</div>
+                <div style="height:10px;"></div>
+                <div class="mono mono-block" id="socialRawWrap">-</div>
+              </div>
+              <div class="card" style="margin-top:10px;">
+                <h3 class="title-sm">Runtime Summary</h3>
+                <div class="mono mono-block" id="socialRuntimeWrap">-</div>
+              </div>
             </div>
             <div class="card" style="margin-top:10px;">
-              <h3 class="title-sm">Runtime Summary</h3>
-              <div class="mono mono-block" id="socialRuntimeWrap">-</div>
+              <h3 class="title-sm">Export Template Preview</h3>
+              <div class="mono mono-block" id="socialTemplateWrap">-</div>
             </div>
-          </div>
-          <div class="card" style="margin-top:10px;">
-            <h3 class="title-sm">Export Template Preview</h3>
-            <div class="mono mono-block" id="socialTemplateWrap">-</div>
-          </div>
+          </details>
           <div class="card" style="margin-top:10px;">
             <h3 class="title-sm">Actions</h3>
             <div class="toolbar">
@@ -694,46 +1583,732 @@
                 </select>
               </div>
               <div>
-                <button class="secondary" id="socialModeApplyBtn">Apply Runtime Mode</button>
+                <button id="socialModeApplyBtn">Apply Runtime Mode</button>
               </div>
             </div>
+            <div class="field-hint" style="margin-top:10px;">Profile visibility is managed in the Profile page.</div>
             <div class="actions">
-              <button id="socialReloadBtn">Reload Config</button>
-              <button class="secondary" id="socialGenerateBtn">Generate Default social.md</button>
               <button class="secondary" id="socialExportBtn">Export social.md template</button>
               <button class="secondary" id="socialCopyBtn">Copy Template</button>
               <button class="secondary" id="socialDownloadBtn">Download Template</button>
             </div>
             <div id="socialFeedback" class="feedback" style="margin-top:10px;">Ready.</div>
           </div>
-        </section>
-        <section id="view-logs" class="view">
-          <div class="card">
-            <h3 class="title-sm">Recent Logs</h3>
-            <div class="toolbar">
-              <div class="field">
-                <label for="logLevelFilter">Category</label>
-                <select id="logLevelFilter">
-                  <option value="all">all</option>
-                  <option value="info">info</option>
-                  <option value="warn">warn</option>
-                  <option value="error">error</option>
-                </select>
-              </div>
-              <div>
-                <button type="button" class="secondary" id="refreshLogsBtn">Refresh Logs</button>
-              </div>
-            </div>
-            <div class="logs" id="logList"></div>
-          </div>
-        </section>
+          </section>
+        </div>
       </main>
     </div>
     <div id="toast" class="toast"></div>
     <script>
+      const LOCALE_STORAGE_KEY = 'silicaclaw.i18n.locale';
+      const DEFAULT_LOCALE = 'en';
+      const SUPPORTED_LOCALES = ['en', 'zh-CN'];
+      const TRANSLATIONS = {
+        en: {
+          meta: {
+            title: 'SilicaClaw Control UI',
+            description: 'SilicaClaw local-first agent control console.',
+            socialTitle: 'SilicaClaw Local Console',
+            socialDescription: 'Local-first control surface for SilicaClaw agents.',
+          },
+          common: {
+            control: 'Control',
+            version: 'Version',
+            localConsole: 'Local Console',
+            subtitle: 'OpenClaw-inspired local-first agent control surface',
+            copied: 'Copied',
+            done: 'Done',
+            saving: 'Saving...',
+            saved: 'Saved.',
+            ready: 'Ready.',
+            reload: 'Reload',
+            yes: 'yes',
+            no: 'no',
+            on: 'enabled',
+            off: 'disabled',
+            unknownError: 'Unknown error',
+            requestFailed: 'Request failed ({status})',
+          },
+          pageMeta: {
+            overview: {
+              title: 'Overview',
+              body: 'See whether this node is online and who else is visible.',
+            },
+            profile: {
+              title: 'Profile',
+              body: 'Edit the public card other nodes can see.',
+            },
+            network: {
+              title: 'Network',
+              body: 'Check relay status, peers, and broadcast health.',
+            },
+            social: {
+              title: 'Social',
+              body: 'Switch mode and export a clean social.md template.',
+            },
+          },
+          actions: {
+            broadcastNow: 'Broadcast Now',
+            editProfile: 'Edit Profile',
+            openNetwork: 'Open Network',
+            startBroadcast: 'Start Broadcast',
+            stopBroadcast: 'Stop Broadcast',
+            enablePreview: 'Enable Cross-network Preview',
+            refreshLogs: 'Refresh Logs',
+            exportTemplate: 'Export social.md template',
+            copyTemplate: 'Copy Template',
+            downloadTemplate: 'Download Template',
+            applyRuntimeMode: 'Apply Runtime Mode',
+            saveProfile: 'Save Profile',
+            copyPublicProfilePreview: 'Copy public profile preview summary',
+          },
+          labels: {
+            overviewTabCopy: 'Agent summary and discovered peers',
+            profileTabCopy: 'Public identity and saved profile',
+            networkTabCopy: 'Relay health, broadcast, diagnostics',
+            socialTabCopy: 'social.md config and runtime state',
+            collapseSidebar: 'Collapse sidebar',
+            expandSidebar: 'Expand sidebar',
+            toggleFocusMode: 'Toggle focus mode',
+            exitFocusMode: 'Exit focus mode',
+            colorMode: 'Color mode',
+            dark: 'Dark',
+            light: 'Light',
+            system: 'System',
+            mode: 'Mode',
+            adapter: 'Adapter',
+            relay: 'Relay',
+            room: 'Room',
+            namespace: 'Namespace',
+            port: 'Port',
+            show: 'Show',
+            hide: 'Hide',
+            discoveredAgents: 'Discovered Agents',
+            onlyShowOnline: 'Only show online',
+            nodeSnapshot: 'Node Snapshot',
+            profileEyebrow: 'Profile',
+            publicProfile: 'Public profile',
+            publicProfileEditor: 'Public Profile Editor',
+            displayName: 'Display Name',
+            avatarUrl: 'Avatar URL',
+            bio: 'Bio',
+            tagsCommaSeparated: 'Tags (comma separated)',
+            publicEnabled: 'Public Enabled',
+            livePreview: 'Live Preview',
+            publicCard: 'Public Card',
+            publishStatus: 'Publish Status',
+            publicProfilePreview: 'Public Profile Preview',
+            networkEyebrow: 'Network',
+            connectionSummary: 'Connection Summary',
+            quickActions: 'Quick Actions',
+            advancedActions: 'Advanced Actions',
+            diagnostics: 'Diagnostics',
+            runtimeComponents: 'Runtime Components',
+            peerInventory: 'Peer Inventory',
+            peerDiscoveryStats: 'Peer Discovery Stats',
+            recentDiscoveryEvents: 'Recent Discovery Events',
+            discoverySnapshot: 'Discovery Snapshot',
+            logs: 'Logs',
+            category: 'Category',
+            configSnapshot: 'Config Snapshot',
+            statsSnapshot: 'Stats Snapshot',
+            socialEyebrow: 'Social',
+            integrationStatus: 'Integration Status',
+            whatIsActive: 'What Is Active',
+            identityBinding: 'Identity Binding',
+            advancedNetworkDetails: 'Advanced Network Details',
+            sourceRuntimeTemplate: 'Source / Runtime / Template',
+            sourceParsedFrontmatter: 'Source & Parsed Frontmatter',
+            runtimeSummary: 'Runtime Summary',
+            exportTemplatePreview: 'Export Template Preview',
+            actionsTitle: 'Actions',
+            networkModeRuntime: 'Network Mode (runtime)',
+          },
+          hints: {
+            publicDiscoverySwitch: 'Use Profile -> Public Enabled as the single public visibility switch.',
+            discoverabilityRecommendation: 'Recommended 2-32 chars for better discoverability.',
+            avatarOptional: 'Optional. Must be http(s) URL if provided.',
+            tagsLimit: 'Up to 8 tags, each <= 20 chars.',
+            publicEnabledHint: 'This is the main public visibility switch used for discovery and relay broadcast.',
+            signedPublicProfileHint: 'This is the signed public profile view other nodes/explorer can see.',
+            useTheseFirst: 'Use these first.',
+            profileVisibilityManaged: 'Profile visibility is managed in the Profile page.',
+            checkingIntegration: 'Checking integration status...',
+            allIntegrationChecksPassed: 'All integration checks passed.',
+          },
+          placeholders: {
+            agentName: 'Agent name',
+            bioSummary: 'Public summary',
+            tags: 'ai,browser,local-first',
+          },
+          overview: {
+            discovered: 'Discovered',
+            online: 'Online',
+            offline: 'Offline',
+            presenceTtl: 'Presence TTL',
+            agentsZero: '0 agents',
+            noDiscoveredAgents: 'No discovered agents yet.',
+            agentsOnlineFilter: '{shown}/{total} agents (online filter)',
+            agentsDiscovered: '{count} agents discovered',
+            tableName: 'Name',
+            tableAgentId: 'Agent ID',
+            tableStatus: 'Status',
+            tableUpdated: 'Updated',
+            unnamed: '(unnamed)',
+            onboardingNotice: 'Connected · mode={mode} · discoverable={discoverable} · next: update your profile, turn on Public Enabled, and export social.md',
+            pillRunning: 'broadcast: running',
+            pillPaused: 'broadcast: paused',
+          },
+          preview: {
+            unnamedAgent: '(unnamed agent)',
+            noBioYet: 'No bio yet.',
+            noTags: 'No tags',
+            visibleFields: 'Visible fields: {visible} | Hidden fields: {hidden}',
+            visible: '[visible] {field}',
+            hidden: '[hidden]  {field}',
+          },
+          network: {
+            started: 'Started',
+            transportState: 'Transport State',
+            signalingUrl: 'Signaling URL',
+            signalingEndpoints: 'Signaling Endpoints',
+            webrtcRoom: 'WebRTC Room',
+            bootstrapSources: 'Bootstrap Sources',
+            seedPeers: 'Seed Peers',
+            discoveryEvents: 'Discovery Events',
+            recv: 'Recv',
+            sent: 'Sent',
+            peers: 'Peers',
+            onlinePeers: 'Online Peers',
+            activeWebrtcPeers: 'Active WebRTC Peers',
+            reconnectAttempts: 'Reconnect Attempts',
+            lastInbound: 'Last Inbound',
+            lastOutbound: 'Last Outbound',
+            relayHealth: 'Relay health',
+            currentRelay: 'Current relay',
+            currentRoom: 'Current room',
+            lastJoin: 'Last join',
+            lastPoll: 'Last poll',
+            lastPublish: 'Last publish',
+            lastError: 'Last error',
+            degraded: 'degraded',
+            connected: 'connected',
+            none: 'none',
+            total: 'Total',
+            stale: 'Stale',
+            observeCalls: 'Observe Calls',
+            heartbeats: 'Heartbeats',
+            peersAdded: 'Peers Added',
+            peersRemoved: 'Peers Removed',
+            noPeersDiscovered: 'No peers discovered yet. Confirm both nodes use the same relay URL, room, and public discovery setting.',
+            peer: 'Peer',
+            status: 'Status',
+            lastSeen: 'Last Seen',
+            staleSince: 'Stale Since',
+            messages: 'Messages',
+            firstSeen: 'First Seen',
+            meta: 'Meta',
+            eventsTotal: 'Events Total',
+            lastEvent: 'Last Event',
+            noDiscoveryEvents: 'No discovery events yet. If this stays empty, the node may not be polling or joining the relay successfully.',
+            noLogsYet: 'No logs yet.',
+            noLogsForLevel: 'No {level} logs.',
+          },
+          social: {
+            connectedToSilicaClaw: 'Connected to SilicaClaw',
+            notConnectedToSilicaClaw: 'Not connected to SilicaClaw',
+            discoverableInCurrentMode: 'Discoverable in current mode',
+            notDiscoverableInCurrentMode: 'Not discoverable in current mode',
+            usingMode: 'Using {mode}',
+            publicDiscoveryEnabled: 'Public discovery enabled',
+            publicDiscoveryDisabled: 'Public discovery disabled',
+            notConnected: 'Not connected',
+            barStatus: 'Connected to SilicaClaw: {connected} · Network mode: {mode} · Public discovery: {public}',
+            configured: 'Configured',
+            running: 'Running',
+            discoverable: 'Discoverable',
+            publicDiscovery: 'Public discovery',
+            networkMode: 'network mode',
+            connected: 'connected',
+            discoverableReason: 'discoverable reason',
+            displayName: 'display name',
+            agentId: 'agent id',
+            socialFound: 'social.md found',
+            socialSource: 'social.md source',
+            runtimeGenerated: 'runtime generated',
+            reuseOpenClawIdentity: 'reuse OpenClaw identity',
+            mode: 'mode',
+            broadcastStatus: 'broadcast status',
+            namespace: 'namespace',
+            bootstrapHints: 'bootstrap hints',
+            restartRequired: 'restart required',
+            configuredReason: 'Configured: {reason}',
+            runningReason: 'Running: {reason}',
+            discoverableReasonFull: 'Discoverable: {reason}',
+          },
+          feedback: {
+            unsavedChanges: 'You have unsaved changes.',
+            allChangesSaved: 'All changes saved.',
+            fixValidation: 'Please fix validation errors before saving.',
+            savingProfile: 'Saving profile...',
+            profileSaved: 'Profile saved',
+            profileReloaded: 'Profile form reloaded',
+            exportingTemplate: 'Exporting template...',
+            templateExported: 'Template exported from current runtime.',
+            templateCopied: 'Template copied to clipboard.',
+            preparingDownload: 'Preparing download...',
+            runtimeUpdated: 'Runtime mode updated.',
+            copyPreviewFailed: 'Copy preview failed',
+            logsRefreshed: 'Logs refreshed',
+            crossPreviewEnabled: 'Cross-network preview enabled',
+            enableCrossPreviewFailed: 'Enable cross-network preview failed',
+            downloadFailed: 'Download failed',
+            exportFailed: 'Export failed',
+            copyFailed: 'Copy failed',
+            failed: 'Failed',
+            runtimeMode: 'Runtime mode: {mode}',
+            downloaded: 'Downloaded {filename}.',
+            runtimeModeApplying: 'Applying runtime mode: {mode}...',
+            copyingTemplate: 'Copying template...',
+            crossPreviewEnabling: 'Enabling cross-network preview...',
+            promptSignalingUrl: 'Signaling URL (publicly reachable):',
+            promptRoom: 'Room:',
+          },
+          validation: {
+            displayNameShort: 'Display name should be at least 2 chars.',
+            displayNameLong: 'Display name too long.',
+            avatarProtocol: 'Avatar URL must start with http:// or https://',
+            tooManyTags: 'Too many tags (max 8).',
+            tagTooLong: 'Each tag must be <= 20 chars.',
+            leaveConfirm: 'You have unsaved profile changes. Leave anyway?',
+          },
+        },
+        'zh-CN': {
+          meta: {
+            title: 'SilicaClaw 控制台',
+            description: 'SilicaClaw 本地优先代理控制台。',
+            socialTitle: 'SilicaClaw 本地控制台',
+            socialDescription: '面向 SilicaClaw 代理的本地优先控制界面。',
+          },
+          common: {
+            control: '控制',
+            version: '版本',
+            localConsole: '本地控制台',
+            subtitle: '受 OpenClaw 启发的本地优先代理控制界面',
+            copied: '已复制',
+            done: '完成',
+            saving: '保存中...',
+            saved: '已保存。',
+            ready: '就绪。',
+            reload: '重新加载',
+            yes: '是',
+            no: '否',
+            on: '已启用',
+            off: '已禁用',
+            unknownError: '未知错误',
+            requestFailed: '请求失败 ({status})',
+          },
+          pageMeta: {
+            overview: {
+              title: '概览',
+              body: '查看当前节点是否在线，以及还能看到哪些节点。',
+            },
+            profile: {
+              title: 'Profile',
+              body: '编辑其他节点可见的公开名片。',
+            },
+            network: {
+              title: '网络',
+              body: '检查 relay 状态、对等节点和广播健康度。',
+            },
+            social: {
+              title: '社交',
+              body: '切换模式并导出干净的 social.md 模板。',
+            },
+          },
+          actions: {
+            broadcastNow: '立即广播',
+            editProfile: '编辑 Profile',
+            openNetwork: '打开网络页',
+            startBroadcast: '启动广播',
+            stopBroadcast: '停止广播',
+            enablePreview: '启用跨网络预览',
+            refreshLogs: '刷新日志',
+            exportTemplate: '导出 social.md 模板',
+            copyTemplate: '复制模板',
+            downloadTemplate: '下载模板',
+            applyRuntimeMode: '应用运行时模式',
+            saveProfile: '保存 Profile',
+            copyPublicProfilePreview: '复制公开 Profile 预览摘要',
+          },
+          labels: {
+            overviewTabCopy: '代理摘要与已发现节点',
+            profileTabCopy: '公开身份与已保存的 Profile',
+            networkTabCopy: 'Relay 健康度、广播与诊断',
+            socialTabCopy: 'social.md 配置与运行时状态',
+            collapseSidebar: '折叠侧边栏',
+            expandSidebar: '展开侧边栏',
+            toggleFocusMode: '切换专注模式',
+            exitFocusMode: '退出专注模式',
+            colorMode: '颜色模式',
+            dark: '深色',
+            light: '浅色',
+            system: '跟随系统',
+            mode: '模式',
+            adapter: '适配器',
+            relay: 'Relay',
+            room: '房间',
+            namespace: '命名空间',
+            port: '端口',
+            show: '显示',
+            hide: '隐藏',
+            discoveredAgents: '已发现代理',
+            onlyShowOnline: '只显示在线',
+            nodeSnapshot: '节点快照',
+            profileEyebrow: 'Profile',
+            publicProfile: '公开 Profile',
+            publicProfileEditor: '公开 Profile 编辑器',
+            displayName: '显示名称',
+            avatarUrl: '头像 URL',
+            bio: '简介',
+            tagsCommaSeparated: '标签（逗号分隔）',
+            publicEnabled: '公开启用',
+            livePreview: '实时预览',
+            publicCard: '公开卡片',
+            publishStatus: '发布状态',
+            publicProfilePreview: '公开 Profile 预览',
+            networkEyebrow: '网络',
+            connectionSummary: '连接摘要',
+            quickActions: '快捷操作',
+            advancedActions: '高级操作',
+            diagnostics: '诊断',
+            runtimeComponents: '运行时组件',
+            peerInventory: '节点清单',
+            peerDiscoveryStats: '节点发现统计',
+            recentDiscoveryEvents: '最近发现事件',
+            discoverySnapshot: '发现快照',
+            logs: '日志',
+            category: '类别',
+            configSnapshot: '配置快照',
+            statsSnapshot: '统计快照',
+            socialEyebrow: '社交',
+            integrationStatus: '集成状态',
+            whatIsActive: '当前激活项',
+            identityBinding: '身份绑定',
+            advancedNetworkDetails: '高级网络详情',
+            sourceRuntimeTemplate: '来源 / 运行时 / 模板',
+            sourceParsedFrontmatter: '源文件与解析后的 Frontmatter',
+            runtimeSummary: '运行时摘要',
+            exportTemplatePreview: '导出模板预览',
+            actionsTitle: '操作',
+            networkModeRuntime: '网络模式（运行时）',
+          },
+          hints: {
+            publicDiscoverySwitch: '使用 Profile -> Public Enabled 作为唯一的公开可见性开关。',
+            discoverabilityRecommendation: '建议 2-32 个字符，以提升可发现性。',
+            avatarOptional: '可选。如提供，必须是 http(s) URL。',
+            tagsLimit: '最多 8 个标签，每个不超过 20 个字符。',
+            publicEnabledHint: '这是发现与 relay 广播使用的主公开可见性开关。',
+            signedPublicProfileHint: '这是其他节点或 explorer 可以看到的已签名公开 Profile 视图。',
+            useTheseFirst: '优先使用这些操作。',
+            profileVisibilityManaged: 'Profile 可见性在 Profile 页面管理。',
+            checkingIntegration: '正在检查集成状态...',
+            allIntegrationChecksPassed: '所有集成检查均已通过。',
+          },
+          placeholders: {
+            agentName: '代理名称',
+            bioSummary: '公开摘要',
+            tags: 'ai,browser,local-first',
+          },
+          overview: {
+            discovered: '已发现',
+            online: '在线',
+            offline: '离线',
+            presenceTtl: 'Presence TTL',
+            agentsZero: '0 个代理',
+            noDiscoveredAgents: '还没有发现代理。',
+            agentsOnlineFilter: '{shown}/{total} 个代理（在线筛选）',
+            agentsDiscovered: '已发现 {count} 个代理',
+            tableName: '名称',
+            tableAgentId: '代理 ID',
+            tableStatus: '状态',
+            tableUpdated: '更新时间',
+            unnamed: '（未命名）',
+            onboardingNotice: '已连接 · mode={mode} · discoverable={discoverable} · 下一步：更新 Profile、开启 Public Enabled，并导出 social.md',
+            pillRunning: 'broadcast: 运行中',
+            pillPaused: 'broadcast: 已暂停',
+          },
+          preview: {
+            unnamedAgent: '（未命名代理）',
+            noBioYet: '还没有简介。',
+            noTags: '没有标签',
+            visibleFields: '显示字段: {visible} | 隐藏字段: {hidden}',
+            visible: '[显示] {field}',
+            hidden: '[隐藏]  {field}',
+          },
+          network: {
+            started: '已启动',
+            transportState: '传输状态',
+            signalingUrl: 'Signaling URL',
+            signalingEndpoints: 'Signaling 端点',
+            webrtcRoom: 'WebRTC 房间',
+            bootstrapSources: 'Bootstrap 来源',
+            seedPeers: '种子节点',
+            discoveryEvents: '发现事件',
+            recv: '接收',
+            sent: '发送',
+            peers: '节点',
+            onlinePeers: '在线节点',
+            activeWebrtcPeers: '活跃 WebRTC 节点',
+            reconnectAttempts: '重连尝试次数',
+            lastInbound: '最近入站',
+            lastOutbound: '最近出站',
+            relayHealth: 'Relay 健康度',
+            currentRelay: '当前 Relay',
+            currentRoom: '当前房间',
+            lastJoin: '最近加入',
+            lastPoll: '最近轮询',
+            lastPublish: '最近发布',
+            lastError: '最近错误',
+            degraded: '降级',
+            connected: '已连接',
+            none: '无',
+            total: '总数',
+            stale: '陈旧',
+            observeCalls: '观察调用',
+            heartbeats: '心跳',
+            peersAdded: '新增节点',
+            peersRemoved: '移除节点',
+            noPeersDiscovered: '尚未发现节点。请确认两端使用相同的 relay URL、room 与公开发现设置。',
+            peer: '节点',
+            status: '状态',
+            lastSeen: '最近出现',
+            staleSince: '陈旧开始于',
+            messages: '消息数',
+            firstSeen: '首次出现',
+            meta: '元数据',
+            eventsTotal: '事件总数',
+            lastEvent: '最近事件',
+            noDiscoveryEvents: '还没有发现事件。如果这里持续为空，节点可能没有成功轮询或加入 relay。',
+            noLogsYet: '还没有日志。',
+            noLogsForLevel: '没有 {level} 级别日志。',
+          },
+          social: {
+            connectedToSilicaClaw: '已连接到 SilicaClaw',
+            notConnectedToSilicaClaw: '未连接到 SilicaClaw',
+            discoverableInCurrentMode: '当前模式下可发现',
+            notDiscoverableInCurrentMode: '当前模式下不可发现',
+            usingMode: '使用 {mode}',
+            publicDiscoveryEnabled: '公开发现已启用',
+            publicDiscoveryDisabled: '公开发现已禁用',
+            notConnected: '未连接',
+            barStatus: 'Connected to SilicaClaw: {connected} · Network mode: {mode} · Public discovery: {public}',
+            configured: '已配置',
+            running: '运行中',
+            discoverable: '可发现',
+            publicDiscovery: '公开发现',
+            networkMode: '网络模式',
+            connected: '已连接',
+            discoverableReason: '可发现原因',
+            displayName: '显示名称',
+            agentId: '代理 ID',
+            socialFound: '已找到 social.md',
+            socialSource: 'social.md 来源',
+            runtimeGenerated: '运行时生成',
+            reuseOpenClawIdentity: '复用 OpenClaw 身份',
+            mode: '模式',
+            broadcastStatus: '广播状态',
+            namespace: '命名空间',
+            bootstrapHints: 'Bootstrap 提示',
+            restartRequired: '需要重启',
+            configuredReason: 'Configured: {reason}',
+            runningReason: 'Running: {reason}',
+            discoverableReasonFull: 'Discoverable: {reason}',
+          },
+          feedback: {
+            unsavedChanges: '你有尚未保存的更改。',
+            allChangesSaved: '所有更改都已保存。',
+            fixValidation: '请先修复校验错误再保存。',
+            savingProfile: '正在保存 Profile...',
+            profileSaved: 'Profile 已保存',
+            profileReloaded: 'Profile 表单已重新加载',
+            exportingTemplate: '正在导出模板...',
+            templateExported: '已按当前运行时导出模板。',
+            templateCopied: '模板已复制到剪贴板。',
+            preparingDownload: '正在准备下载...',
+            runtimeUpdated: '运行时模式已更新。',
+            copyPreviewFailed: '复制预览失败',
+            logsRefreshed: '日志已刷新',
+            crossPreviewEnabled: '跨网络预览已启用',
+            enableCrossPreviewFailed: '启用跨网络预览失败',
+            downloadFailed: '下载失败',
+            exportFailed: '导出失败',
+            copyFailed: '复制失败',
+            failed: '失败',
+            runtimeMode: '运行时模式: {mode}',
+            downloaded: '已下载 {filename}。',
+            runtimeModeApplying: '正在应用运行时模式: {mode}...',
+            copyingTemplate: '正在复制模板...',
+            crossPreviewEnabling: '正在启用跨网络预览...',
+            promptSignalingUrl: 'Signaling URL（需公网可达）:',
+            promptRoom: '房间:',
+          },
+          validation: {
+            displayNameShort: '显示名称至少需要 2 个字符。',
+            displayNameLong: '显示名称过长。',
+            avatarProtocol: '头像 URL 必须以 http:// 或 https:// 开头',
+            tooManyTags: '标签过多（最多 8 个）。',
+            tagTooLong: '每个标签必须不超过 20 个字符。',
+            leaveConfirm: '你有未保存的 Profile 更改，仍要离开吗？',
+          },
+        },
+      };
+      function isSupportedLocale(value) {
+        return SUPPORTED_LOCALES.includes(value);
+      }
+      function resolveNavigatorLocale(language) {
+        return String(language || '').toLowerCase().startsWith('zh') ? 'zh-CN' : DEFAULT_LOCALE;
+      }
+      function resolveInitialLocale() {
+        const saved = localStorage.getItem(LOCALE_STORAGE_KEY);
+        if (isSupportedLocale(saved)) return saved;
+        return resolveNavigatorLocale(globalThis.navigator?.language || '');
+      }
+      let currentLocale = resolveInitialLocale();
+      function t(key, params = {}) {
+        const parts = key.split('.');
+        const resolve = (bundle) => parts.reduce((acc, part) => (acc && typeof acc === 'object' ? acc[part] : undefined), bundle);
+        let value = resolve(TRANSLATIONS[currentLocale]);
+        if (typeof value !== 'string') value = resolve(TRANSLATIONS[DEFAULT_LOCALE]);
+        if (typeof value !== 'string') return key;
+        return value.replace(/\{(\w+)\}/g, (_, name) => params[name] ?? `{${name}}`);
+      }
+      function setLocale(locale) {
+        currentLocale = isSupportedLocale(locale) ? locale : DEFAULT_LOCALE;
+        document.documentElement.lang = currentLocale;
+      }
+      function applyStaticTranslations() {
+        const setText = (selector, text, index = 0) => {
+          const nodes = document.querySelectorAll(selector);
+          if (nodes[index]) nodes[index].textContent = text;
+        };
+        document.title = t('meta.title');
+        document.getElementById('metaDescription').setAttribute('content', t('meta.description'));
+        document.getElementById('ogTitle').setAttribute('content', t('meta.socialTitle'));
+        document.getElementById('ogDescription').setAttribute('content', t('meta.socialDescription'));
+        document.getElementById('twitterTitle').setAttribute('content', t('meta.socialTitle'));
+        document.getElementById('twitterDescription').setAttribute('content', t('meta.socialDescription'));
+        setText('.brand p', 'Control UI');
+        document.querySelectorAll('.advanced-panel summary').forEach((summary) => {
+          summary.setAttribute('data-i18n-closed-label', t('labels.show'));
+          summary.setAttribute('data-i18n-open-label', t('labels.hide'));
+        });
+        setText('.sidebar-nav__label', t('common.control'));
+        setText('[data-tab="overview"] .tab-title', t('pageMeta.overview.title'));
+        setText('[data-tab="overview"] .tab-copy', t('labels.overviewTabCopy'));
+        setText('[data-tab="profile"] .tab-title', t('pageMeta.profile.title'));
+        setText('[data-tab="profile"] .tab-copy', t('labels.profileTabCopy'));
+        setText('[data-tab="network"] .tab-title', t('pageMeta.network.title'));
+        setText('[data-tab="network"] .tab-copy', t('labels.networkTabCopy'));
+        setText('[data-tab="social"] .tab-title', t('pageMeta.social.title'));
+        setText('[data-tab="social"] .tab-copy', t('labels.socialTabCopy'));
+        document.getElementById('sidebarToggleBtn').title = t('labels.collapseSidebar');
+        document.getElementById('sidebarToggleBtn').setAttribute('aria-label', t('labels.collapseSidebar'));
+        document.querySelector('.sidebar-version').title = t('common.version');
+        setText('.dashboard-header__breadcrumb-current', t('pageMeta.overview.title'));
+        document.getElementById('topbarTitle').textContent = t('common.localConsole');
+        document.getElementById('topbarSubtitle').textContent = t('common.subtitle');
+        document.getElementById('focusModeBtn').title = t('labels.toggleFocusMode');
+        document.getElementById('focusModeBtn').setAttribute('aria-label', t('labels.toggleFocusMode'));
+        document.getElementById('themeModeGroup').setAttribute('aria-label', t('labels.colorMode'));
+        document.querySelector('[data-theme-choice="dark"]').title = t('labels.dark');
+        document.querySelector('[data-theme-choice="dark"]').setAttribute('aria-label', `${t('labels.colorMode')}: ${t('labels.dark')}`);
+        document.querySelector('[data-theme-choice="light"]').title = t('labels.light');
+        document.querySelector('[data-theme-choice="light"]').setAttribute('aria-label', `${t('labels.colorMode')}: ${t('labels.light')}`);
+        document.querySelector('[data-theme-choice="system"]').title = t('labels.system');
+        document.querySelector('[data-theme-choice="system"]').setAttribute('aria-label', `${t('labels.colorMode')}: ${t('labels.system')}`);
+        setText('#view-overview .title-sm', t('labels.discoveredAgents'), 0);
+        document.getElementById('agentsCountHint').textContent = t('overview.agentsZero');
+        setText('#view-overview label.field-hint', t('labels.onlyShowOnline'));
+        setText('#view-overview .title-sm', t('labels.nodeSnapshot'), 1);
+        setText('#view-profile .section-header__eyebrow', t('labels.profileEyebrow'));
+        setText('#view-profile .section-header__title', t('labels.publicProfile'));
+        setText('#view-profile .title-sm', t('labels.publicProfileEditor'), 0);
+        setText('#view-profile label', t('labels.displayName'), 0);
+        setText('#view-profile .row > div:nth-child(2) label', t('labels.avatarUrl'));
+        setText('#view-profile div > label + textarea', t('labels.bio'));
+        setText('#view-profile div > label + input[name="tags"]', t('labels.tagsCommaSeparated'));
+        document.querySelector('#view-profile input[name="display_name"]').setAttribute('placeholder', t('placeholders.agentName'));
+        document.querySelector('#view-profile input[name="avatar_url"]').setAttribute('placeholder', 'https://...');
+        document.querySelector('#view-profile textarea[name="bio"]').setAttribute('placeholder', t('placeholders.bioSummary'));
+        document.querySelector('#view-profile input[name="tags"]').setAttribute('placeholder', t('placeholders.tags'));
+        document.querySelector('#view-profile input[name="display_name"]').nextElementSibling.textContent = t('hints.discoverabilityRecommendation');
+        document.querySelector('#view-profile input[name="avatar_url"]').nextElementSibling.textContent = t('hints.avatarOptional');
+        document.querySelector('#view-profile input[name="tags"]').nextElementSibling.textContent = t('hints.tagsLimit');
+        document.querySelector('#view-profile input[name="public_enabled"]').parentElement.childNodes[1].textContent = ` ${t('labels.publicEnabled')}`;
+        setText('#view-profile .field-hint', t('hints.publicEnabledHint'), 3);
+        setText('#view-profile .title-sm', t('labels.livePreview'), 1);
+        setText('#view-profile .profile-meta h4', t('labels.publicCard'), 0);
+        setText('#view-profile .profile-meta h4', t('labels.publishStatus'), 1);
+        setText('#view-profile .profile-meta h4', t('labels.publicProfilePreview'), 2);
+        setText('#view-profile .profile-meta .field-hint', t('hints.signedPublicProfileHint'));
+        setText('#view-network .section-header__eyebrow', t('labels.networkEyebrow'));
+        setText('#view-network .section-header__title', t('pageMeta.network.title'));
+        setText('#view-network .split .card .title-sm', t('labels.connectionSummary'), 0);
+        setText('#view-network .split .card .title-sm', t('labels.quickActions'), 1);
+        setText('#view-network .split .card .field-hint', t('hints.useTheseFirst'));
+        setText('#view-network details.advanced-panel summary', t('labels.advancedActions'), 0);
+        setText('#view-network > details.advanced-panel.card > summary', t('labels.diagnostics'));
+        setText('#view-network .card .title-sm', t('labels.runtimeComponents'), 3);
+        setText('#view-network .card .title-sm', t('labels.peerInventory'), 4);
+        setText('#view-network .card .title-sm', t('labels.peerDiscoveryStats'), 5);
+        setText('#view-network .card .title-sm', t('labels.recentDiscoveryEvents'), 6);
+        setText('#view-network .card .title-sm', t('labels.discoverySnapshot'), 7);
+        setText('#view-network label[for="logLevelFilter"]', t('labels.category'));
+        setText('#view-network .card .title-sm', t('labels.configSnapshot'), 9);
+        setText('#view-network .card .title-sm', t('labels.statsSnapshot'), 10);
+        setText('#view-social .section-header__eyebrow', t('labels.socialEyebrow'));
+        setText('#view-social .section-header__title', t('pageMeta.social.title'));
+        setText('#view-social .card .title-sm', t('labels.integrationStatus'), 0);
+        document.querySelector('#socialStatusLine').textContent = t('hints.checkingIntegration');
+        setText('#view-social .split .card .title-sm', t('labels.whatIsActive'), 0);
+        setText('#view-social .split .card .title-sm', t('labels.identityBinding'), 1);
+        setText('#view-social details.card summary', t('labels.advancedNetworkDetails'));
+        setText('#view-social details.advanced-panel summary', t('labels.sourceRuntimeTemplate'));
+        setText('#view-social .card .title-sm', t('labels.sourceParsedFrontmatter'), 3);
+        setText('#view-social .card .title-sm', t('labels.runtimeSummary'), 4);
+        setText('#view-social .card .title-sm', t('labels.exportTemplatePreview'), 5);
+        setText('#view-social .card .title-sm', t('labels.actionsTitle'), 6);
+        setText('label[for="socialModeSelect"]', t('labels.networkModeRuntime'));
+        setText('#view-social > .card:last-of-type .field-hint', t('hints.profileVisibilityManaged'));
+        setText('.hero-meta-item .label', t('labels.mode'), 0);
+        setText('.hero-meta-item .label', t('labels.adapter'), 1);
+        setText('.hero-meta-item .label', t('labels.relay'), 2);
+        setText('.hero-meta-item .label', t('labels.room'), 3);
+        document.getElementById('publicDiscoveryHint').innerHTML = t('hints.publicDiscoverySwitch');
+        document.getElementById('overviewBroadcastNowBtn').textContent = t('actions.broadcastNow');
+        document.getElementById('overviewGoProfileBtn').textContent = t('actions.editProfile');
+        document.getElementById('overviewGoNetworkBtn').textContent = t('actions.openNetwork');
+        document.getElementById('startBroadcastBtn').textContent = t('actions.startBroadcast');
+        document.getElementById('stopBroadcastBtn').textContent = t('actions.stopBroadcast');
+        document.getElementById('quickGlobalPreviewBtn').textContent = t('actions.enablePreview');
+        document.getElementById('refreshLogsBtn').textContent = t('actions.refreshLogs');
+        document.getElementById('socialExportBtn').textContent = t('actions.exportTemplate');
+        document.getElementById('socialCopyBtn').textContent = t('actions.copyTemplate');
+        document.getElementById('socialDownloadBtn').textContent = t('actions.downloadTemplate');
+        document.getElementById('socialModeApplyBtn').textContent = t('actions.applyRuntimeMode');
+        document.getElementById('copyPublicProfilePreviewBtn').textContent = t('actions.copyPublicProfilePreview');
+        document.getElementById('saveProfileBtn').textContent = t('actions.saveProfile');
+        document.getElementById('refreshProfileBtn').textContent = t('common.reload');
+        document.getElementById('profileFeedback').textContent = t('common.ready');
+        document.getElementById('networkFeedback').textContent = t('common.ready');
+        document.getElementById('socialFeedback').textContent = t('common.ready');
+      }
+      setLocale(currentLocale);
+      applyStaticTranslations();
       let activeTab = 'overview';
       let profileBaseline = '';
       let profileDirty = false;
@@ -742,6 +2317,7 @@
       let logLevelFilter = 'all';
       let socialTemplate = '';
       let onlyShowOnline = false;
+      const pageMeta = TRANSLATIONS[currentLocale].pageMeta || TRANSLATIONS[DEFAULT_LOCALE].pageMeta;
       function ago(ts) {
         if (!ts) return '-';
@@ -767,6 +2343,12 @@
         t.classList.add('show');
         setTimeout(() => t.classList.remove('show'), 2000);
       }
+      function resolveThemeMode(mode) {
+        if (mode === 'system') {
+          return window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+        }
+        return mode === 'light' ? 'light' : 'dark';
+      }
       function flashButton(btn, doneText = 'Done') {
         if (!btn) return;
         const oldText = btn.textContent || '';
@@ -783,11 +2365,16 @@
         el.style.color = level === 'error' ? '#ff6b81' : level === 'warn' ? '#ffb454' : '#9aa7c3';
       }
       function applyTheme(mode) {
-        const next = mode === 'light' ? 'light' : 'dark';
+        const raw = mode === 'system' ? 'system' : (mode === 'light' ? 'light' : 'dark');
+        const next = resolveThemeMode(raw);
         document.documentElement.setAttribute('data-theme-mode', next);
-        localStorage.setItem('silicaclaw_theme_mode', next);
-        document.getElementById('themeDarkBtn').classList.toggle('active', next === 'dark');
-        document.getElementById('themeLightBtn').classList.toggle('active', next === 'light');
+        localStorage.setItem('silicaclaw_theme_mode', raw);
+        document.querySelectorAll('[data-theme-choice]').forEach((btn) => {
+          btn.classList.toggle('active', btn.dataset.themeChoice === raw);
+          btn.classList.toggle('topbar-theme-mode__btn--active', btn.dataset.themeChoice === raw);
+          btn.setAttribute('aria-checked', btn.dataset.themeChoice === raw ? 'true' : 'false');
+          btn.setAttribute('aria-pressed', btn.dataset.themeChoice === raw ? 'true' : 'false');
+        });
       }
       function parseTags(raw) {
         return String(raw || '')
@@ -822,7 +2409,7 @@
         if (fromUserInput && !profileSaving) {
           setFeedback(
             'profileFeedback',
-            profileDirty ? 'You have unsaved changes.' : 'All changes saved.',
+            profileDirty ? t('feedback.unsavedChanges') : t('feedback.allChangesSaved'),
             profileDirty ? 'warn' : 'info'
           );
         }
@@ -849,27 +2436,27 @@
         let ok = true;
         let err = '';
         if (displayName.length > 0 && displayName.length < 2) {
-          err = 'Display name should be at least 2 chars.';
+          err = t('validation.displayNameShort');
           ok = false;
         } else if (displayName.length > 48) {
-          err = 'Display name too long.';
+          err = t('validation.displayNameLong');
           ok = false;
         }
         setInputError(displayNameEl, 'errDisplayName', err);
         err = '';
         if (avatarUrl && !/^https?:\/\//i.test(avatarUrl)) {
-          err = 'Avatar URL must start with http:// or https://';
+          err = t('validation.avatarProtocol');
           ok = false;
         }
         setInputError(avatarEl, 'errAvatarUrl', err);
         err = '';
         if (tags.length > 8) {
-          err = 'Too many tags (max 8).';
+          err = t('validation.tooManyTags');
           ok = false;
         } else if (tags.some((t) => t.length > 20)) {
-          err = 'Each tag must be <= 20 chars.';
+          err = t('validation.tagTooLong');
           ok = false;
         }
         setInputError(tagsEl, 'errTags', err);
@@ -881,14 +2468,14 @@
         const tags = parseTags(field(form, 'tags')?.value || '');
         const enabled = !!field(form, 'public_enabled')?.checked;
-        document.getElementById('previewName').textContent = displayName || '(unnamed agent)';
-        document.getElementById('previewBio').textContent = bio || 'No bio yet.';
+        document.getElementById('previewName').textContent = displayName || t('preview.unnamedAgent');
+        document.getElementById('previewBio').textContent = bio || t('preview.noBioYet');
         document.getElementById('previewPublish').textContent = `public_enabled: ${enabled}`;
         document.getElementById('bioCount').textContent = String(bio.length);
         const tagBox = document.getElementById('previewTags');
         if (!tags.length) {
-          tagBox.innerHTML = '<span class=\"tag-chip muted\">No tags</span>';
+          tagBox.innerHTML = `<span class="tag-chip muted">${t('preview.noTags')}</span>`;
           return;
         }
         tagBox.innerHTML = tags.map((tag) => `<span class=\"tag-chip\">${tag}</span>`).join('');
@@ -898,30 +2485,34 @@
         const btn = document.getElementById('saveProfileBtn');
         btn.disabled = busy;
         btn.classList.toggle('save-busy', busy);
-        btn.textContent = busy ? 'Saving...' : 'Save Profile';
+        btn.textContent = busy ? t('common.saving') : t('actions.saveProfile');
       }
       async function api(path, options = {}) {
         const res = await fetch(path, { headers: { 'Content-Type': 'application/json' }, ...options });
         const json = await res.json().catch(() => null);
         if (!res.ok || !json || !json.ok) {
-          throw new Error(json?.error?.message || `Request failed (${res.status})`);
+          throw new Error(json?.error?.message || t('common.requestFailed', { status: String(res.status) }));
         }
         return json;
       }
       function switchTab(tab) {
         if (activeTab === 'profile' && tab !== 'profile' && profileDirty && !profileSaving) {
-          const ok = window.confirm('You have unsaved profile changes. Leave anyway?');
+          const ok = window.confirm(t('validation.leaveConfirm'));
           if (!ok) {
             return;
           }
         }
         activeTab = tab;
         document.querySelectorAll('.tab').forEach((b) => b.classList.toggle('active', b.dataset.tab === tab));
-        ['overview', 'profile', 'network', 'peers', 'discovery', 'social', 'logs'].forEach((k) => {
+        ['overview', 'profile', 'network', 'social'].forEach((k) => {
           document.getElementById(`view-${k}`).classList.toggle('active', k === tab);
         });
+        const meta = pageMeta[tab] || pageMeta.overview;
+        document.getElementById('pageBreadcrumb').textContent = meta.title;
+        document.getElementById('pageHeroTitle').textContent = meta.title;
+        document.getElementById('pageHeroBody').textContent = meta.body;
         if (tab === 'profile' && !profileDirty && !profileSaving) {
           refreshProfile().catch(() => {});
         }
@@ -934,67 +2525,62 @@
         const d = onlyShowOnline ? all.filter((agent) => agent.online) : all;
         document.getElementById('overviewCards').innerHTML = [
-          ['Discovered', o.discovered_count],
-          ['Online', o.online_count],
-          ['Offline', o.offline_count],
-          ['Presence TTL', `${Math.floor(o.presence_ttl_ms / 1000)}s`],
+          [t('overview.discovered'), o.discovered_count],
+          [t('overview.online'), o.online_count],
+          [t('overview.offline'), o.offline_count],
+          [t('overview.presenceTtl'), `${Math.floor(o.presence_ttl_ms / 1000)}s`],
         ].map(([k,v]) => `<div class="card"><div class="label">${k}</div><div class="value">${v}</div></div>`).join('');
+        document.getElementById('brandVersion').textContent = o.app_version ? `v${o.app_version}` : '-';
         document.getElementById('snapshot').textContent = [
+          `app_version: ${o.app_version || '-'}`,
           `agent_id: ${o.agent_id || '-'}`,
           `public_enabled: ${o.public_enabled}`,
           `broadcast_enabled: ${o.broadcast_enabled}`,
           `last_broadcast: ${ago(o.last_broadcast_at)}`,
         ].join('\n');
+        document.getElementById('heroMode').textContent = o.social?.network_mode || '-';
-        document.getElementById('pillBroadcast').textContent = o.broadcast_enabled ? 'broadcast: running' : 'broadcast: paused';
+        document.getElementById('pillBroadcast').textContent = o.broadcast_enabled ? t('overview.pillRunning') : t('overview.pillPaused');
         document.getElementById('pillBroadcast').className = `pill ${o.broadcast_enabled ? 'ok' : 'warn'}`;
         const init = o.init_state || {};
         const onboarding = o.onboarding || {};
         const notice = document.getElementById('initNotice');
-        const onboardingActions = document.getElementById('onboardingActions');
-        const enableBtn = document.getElementById('enablePublicDiscoveryBtn');
-        const disableBtn = document.getElementById('disablePublicDiscoveryBtn');
         const discoveryHint = document.getElementById('publicDiscoveryHint');
         const showOnboarding = onboarding.first_run || init.identity_auto_created || init.profile_auto_created || init.social_auto_created;
         if (onboarding.first_run || init.identity_auto_created || init.profile_auto_created || init.social_auto_created) {
           notice.classList.add('show');
-          notice.textContent = `OpenClaw already connected to SilicaClaw · mode=${onboarding.mode || '-'} · discoverable=${onboarding.discoverable ? 'yes' : 'no'} · next: update display name and export social.md`;
+          notice.textContent = t('overview.onboardingNotice', {
+            mode: onboarding.mode || '-',
+            discoverable: onboarding.discoverable ? t('common.yes') : t('common.no'),
+          });
         } else {
           notice.classList.remove('show');
         }
         if (onboarding.can_enable_public_discovery || onboarding.public_enabled) {
-          onboardingActions.style.display = 'flex';
           discoveryHint.style.display = 'block';
-          if (onboarding.public_enabled) {
-            enableBtn.style.display = 'none';
-            disableBtn.style.display = 'inline-block';
-          } else {
-            enableBtn.style.display = 'inline-block';
-            disableBtn.style.display = 'none';
-          }
         } else {
-          onboardingActions.style.display = 'none';
           discoveryHint.style.display = 'none';
         }
         if (!d.length) {
-          document.getElementById('agentsCountHint').textContent = '0 agents';
-          document.getElementById('agentsWrap').innerHTML = '<div class="label">No discovered agents yet.</div>';
+          document.getElementById('agentsCountHint').textContent = t('overview.agentsZero');
+          document.getElementById('agentsWrap').innerHTML = `<div class="label">${t('overview.noDiscoveredAgents')}</div>`;
         } else {
           document.getElementById('agentsCountHint').textContent = onlyShowOnline
-            ? `${d.length}/${all.length} agents (online filter)`
-            : `${d.length} agents discovered`;
+            ? t('overview.agentsOnlineFilter', { shown: String(d.length), total: String(all.length) })
+            : t('overview.agentsDiscovered', { count: String(d.length) });
           document.getElementById('agentsWrap').innerHTML = `
             <table class="table">
-              <thead><tr><th>Name</th><th>Agent ID</th><th>Status</th><th>Updated</th></tr></thead>
+              <thead><tr><th>${t('overview.tableName')}</th><th>${t('overview.tableAgentId')}</th><th>${t('overview.tableStatus')}</th><th>${t('overview.tableUpdated')}</th></tr></thead>
               <tbody>
                 ${d.map((a) => `
                   <tr>
-                    <td>${a.display_name || '(unnamed)'}</td>
+                    <td>${a.display_name || t('overview.unnamed')}</td>
                     <td class="mono">${shortId(a.agent_id)}</td>
-                    <td class="${a.online ? 'online' : 'offline'}">${a.online ? 'online' : 'offline'}</td>
+                    <td class="${a.online ? 'online' : 'offline'}">${a.online ? t('overview.online') : t('overview.offline')}</td>
                     <td>${ago(a.updated_at)}</td>
                   </tr>
                 `).join('')}
@@ -1025,10 +2611,10 @@
         const hiddenFields = summary?.public_visibility?.hidden_fields || [];
         const visible = visibleFields.join(', ') || '-';
         const hidden = hiddenFields.join(', ') || '-';
-        document.getElementById('publicVisibilityHint').textContent = `Visible fields: ${visible} | Hidden fields: ${hidden}`;
+        document.getElementById('publicVisibilityHint').textContent = t('preview.visibleFields', { visible, hidden });
         const rows = [
-          ...visibleFields.map((field) => `[visible] ${field}`),
-          ...hiddenFields.map((field) => `[hidden]  ${field}`),
+          ...visibleFields.map((field) => t('preview.visible', { field })),
+          ...hiddenFields.map((field) => t('preview.hidden', { field })),
         ];
         document.getElementById('publicVisibilityList').textContent = rows.length ? rows.join('\n') : '-';
       }
@@ -1045,31 +2631,41 @@
         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 ?? '-'}`;
         document.getElementById('networkCards').innerHTML = [
-          ['Adapter', c.adapter],
-          ['Namespace', c.namespace || '-'],
-          ['Port', c.port ?? '-'],
-          ['Started', ac.started === true ? 'yes' : ac.started === false ? 'no' : '-'],
-          ['Transport State', ac.transport?.state || '-'],
-          ['Signaling URL', dx.signaling_url || '-'],
-          ['Signaling Endpoints', (dx.signaling_endpoints || []).length || 0],
-          ['WebRTC Room', dx.room || '-'],
-          ['Bootstrap Sources', (dx.bootstrap_sources || []).length || 0],
-          ['Seed Peers', dx.seed_peers_count ?? 0],
-          ['Discovery Events', dx.discovery_events_total ?? 0],
-          ['Recv', msg.received_total ?? 0],
-          ['Sent', msg.broadcast_total ?? 0],
-          ['Peers', p.total ?? 0],
-          ['Online Peers', p.online ?? 0],
-          ['Active WebRTC Peers', dx.active_webrtc_peers ?? '-'],
-          ['Reconnect Attempts', dx.reconnect_attempts_total ?? '-'],
-          ['Last Inbound', ago(msg.last_message_at)],
-          ['Last Outbound', ago(msg.last_broadcast_at)],
+          [t('labels.adapter'), c.adapter],
+          [t('labels.namespace'), c.namespace || '-'],
+          [t('labels.port'), c.port ?? '-'],
+          [t('network.started'), ac.started === true ? t('common.yes') : ac.started === false ? t('common.no') : '-'],
+          [t('network.transportState'), ac.transport?.state || '-'],
+          [t('network.signalingUrl'), dx.signaling_url || '-'],
+          [t('network.signalingEndpoints'), (dx.signaling_endpoints || []).length || 0],
+          [t('network.webrtcRoom'), dx.room || '-'],
+          [t('network.bootstrapSources'), (dx.bootstrap_sources || []).length || 0],
+          [t('network.seedPeers'), dx.seed_peers_count ?? 0],
+          [t('network.discoveryEvents'), dx.discovery_events_total ?? 0],
+          [t('network.recv'), msg.received_total ?? 0],
+          [t('network.sent'), msg.broadcast_total ?? 0],
+          [t('network.peers'), p.total ?? 0],
+          [t('network.onlinePeers'), p.online ?? 0],
+          [t('network.activeWebrtcPeers'), dx.active_webrtc_peers ?? '-'],
+          [t('network.reconnectAttempts'), dx.reconnect_attempts_total ?? '-'],
+          [t('network.lastInbound'), ago(msg.last_message_at)],
+          [t('network.lastOutbound'), 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 = [
+          [t('network.relayHealth'), dx.last_error ? t('network.degraded') : t('network.connected')],
+          [t('network.currentRelay'), dx.signaling_url || '-'],
+          [t('network.currentRoom'), dx.room || '-'],
+          [t('network.lastJoin'), ago(dx.last_join_at)],
+          [t('network.lastPoll'), ago(dx.last_poll_at)],
+          [t('network.lastPublish'), ago(dx.last_publish_at)],
+          [t('network.lastError'), dx.last_error || t('network.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 || {};
@@ -1097,6 +2693,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 ?? '-'}`,
@@ -1121,25 +2723,28 @@
         const summary = peers.diagnostics_summary || {};
         document.getElementById('peerCards').innerHTML = [
-          ['Total', peers.total || 0],
-          ['Online', peers.online || 0],
-          ['Stale', peers.stale || 0],
-          ['Namespace', peers.namespace || '-'],
-          ['Signaling URL', summary.signaling_url || '-'],
-          ['Signaling Endpoints', (summary.signaling_endpoints || []).length || 0],
-          ['Room', summary.room || '-'],
-          ['Bootstrap Sources', (summary.bootstrap_sources || []).length || 0],
-          ['Seed Peers', summary.seed_peers_count ?? 0],
-          ['Discovery Events', summary.discovery_events_total ?? 0],
-          ['Active WebRTC Peers', summary.active_webrtc_peers ?? '-'],
-          ['Observe Calls', ds.observe_calls || 0],
-          ['Heartbeats', ds.heartbeat_sent || 0],
-          ['Peers Added', ds.peers_added || 0],
-          ['Peers Removed', ds.peers_removed || 0],
+          [t('network.total'), peers.total || 0],
+          [t('overview.online'), peers.online || 0],
+          [t('network.stale'), peers.stale || 0],
+          [t('labels.namespace'), peers.namespace || '-'],
+          [t('network.signalingUrl'), summary.signaling_url || '-'],
+          [t('network.signalingEndpoints'), (summary.signaling_endpoints || []).length || 0],
+          [t('labels.room'), summary.room || '-'],
+          [t('network.lastJoin'), ago(summary.last_join_at)],
+          [t('network.lastPoll'), ago(summary.last_poll_at)],
+          [t('network.lastPublish'), ago(summary.last_publish_at)],
+          [t('network.bootstrapSources'), (summary.bootstrap_sources || []).length || 0],
+          [t('network.seedPeers'), summary.seed_peers_count ?? 0],
+          [t('network.discoveryEvents'), summary.discovery_events_total ?? 0],
+          [t('network.activeWebrtcPeers'), summary.active_webrtc_peers ?? '-'],
+          [t('network.observeCalls'), ds.observe_calls || 0],
+          [t('network.heartbeats'), ds.heartbeat_sent || 0],
+          [t('network.peersAdded'), ds.peers_added || 0],
+          [t('network.peersRemoved'), ds.peers_removed || 0],
         ].map(([k,v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join('');
         if (!peers.items || !peers.items.length) {
-          document.getElementById('peerTableWrap').innerHTML = '<div class="label">No peers discovered yet.</div>';
+          document.getElementById('peerTableWrap').innerHTML = `<div class="empty-state">${t('network.noPeersDiscovered')}</div>`;
           document.getElementById('peerStatsWrap').textContent = toPrettyJson({
             discovery_stats: ds,
             diagnostics_summary: summary,
@@ -1149,7 +2754,7 @@
         document.getElementById('peerTableWrap').innerHTML = `
           <table class="table">
-            <thead><tr><th>Peer</th><th>Status</th><th>Last Seen</th><th>Stale Since</th><th>Messages</th><th>First Seen</th><th>Meta</th></tr></thead>
+            <thead><tr><th>${t('network.peer')}</th><th>${t('network.status')}</th><th>${t('network.lastSeen')}</th><th>${t('network.staleSince')}</th><th>${t('network.messages')}</th><th>${t('network.firstSeen')}</th><th>${t('network.meta')}</th></tr></thead>
             <tbody>
               ${peers.items.map((peer) => `
                 <tr>
@@ -1178,16 +2783,16 @@
         const items = Array.isArray(payload.items) ? payload.items : [];
         document.getElementById('discoveryCards').innerHTML = [
-          ['Adapter', payload.adapter || '-'],
-          ['Namespace', payload.namespace || '-'],
-          ['Events Total', payload.total ?? 0],
-          ['Last Event', ago(payload.last_event_at)],
-          ['Signaling Endpoints', (payload.signaling_endpoints || []).length || 0],
-          ['Seed Peers', payload.seed_peers_count ?? 0],
+          [t('labels.adapter'), payload.adapter || '-'],
+          [t('labels.namespace'), payload.namespace || '-'],
+          [t('network.eventsTotal'), payload.total ?? 0],
+          [t('network.lastEvent'), ago(payload.last_event_at)],
+          [t('network.signalingEndpoints'), (payload.signaling_endpoints || []).length || 0],
+          [t('network.seedPeers'), payload.seed_peers_count ?? 0],
         ].map(([k,v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join('');
         if (!items.length) {
-          document.getElementById('discoveryEventList').innerHTML = '<div class="label">No discovery events yet.</div>';
+          document.getElementById('discoveryEventList').innerHTML = `<div class="empty-state">${t('network.noDiscoveryEvents')}</div>`;
         } else {
           document.getElementById('discoveryEventList').innerHTML = items
             .slice()
@@ -1220,55 +2825,59 @@
         const runtimeNetwork = runtime.resolved_network || {};
         const discoverable = status.discoverable === true;
         const mode = status.network_mode || summary.current_network_mode || network.mode || runtimeNetwork.mode || '-';
-        const summaryLine = status.status_line || summary.summary_line || `${summary.connected ? 'Connected to SilicaClaw' : 'Not connected to SilicaClaw'} · ${discoverable ? 'Discoverable in current mode' : 'Not discoverable in current mode'} · Using ${mode}`;
-        const publicDiscoveryText = status.public_enabled ? 'Public discovery enabled' : 'Public discovery disabled';
+        const summaryLine = status.status_line || summary.summary_line || `${summary.connected ? t('social.connectedToSilicaClaw') : t('social.notConnectedToSilicaClaw')} · ${discoverable ? t('social.discoverableInCurrentMode') : t('social.notDiscoverableInCurrentMode')} · ${t('social.usingMode', { mode })}`;
+        const publicDiscoveryText = status.public_enabled ? t('social.publicDiscoveryEnabled') : t('social.publicDiscoveryDisabled');
-        const namespaceText = `${status.connected_to_silicaclaw ? 'Connected to SilicaClaw' : 'Not connected'} · ${publicDiscoveryText} · mode ${mode}`;
+        const namespaceText = `${status.connected_to_silicaclaw ? t('social.connectedToSilicaClaw') : t('social.notConnected')} · ${publicDiscoveryText} · ${t('social.mode')} ${mode}`;
         document.getElementById('socialStatusLine').textContent = summaryLine;
         document.getElementById('socialStatusSubline').textContent = namespaceText;
         const bar = document.getElementById('integrationStatusBar');
         bar.className = `integration-strip ${status.connected_to_silicaclaw && status.public_enabled ? 'ok' : 'warn'}`;
-        bar.textContent = `Connected to SilicaClaw: ${status.connected_to_silicaclaw ? 'yes' : 'no'} · Network mode: ${mode} · Public discovery: ${status.public_enabled ? 'enabled' : 'disabled'}`;
+        bar.textContent = t('social.barStatus', {
+          connected: status.connected_to_silicaclaw ? t('common.yes') : t('common.no'),
+          mode,
+          public: status.public_enabled ? t('common.on') : t('common.off'),
+        });
         const reasons = [];
-        if (!status.configured && status.configured_reason) reasons.push(`Configured: ${status.configured_reason}`);
-        if (!status.running && status.running_reason) reasons.push(`Running: ${status.running_reason}`);
-        if (!status.discoverable && status.discoverable_reason) reasons.push(`Discoverable: ${status.discoverable_reason}`);
-        document.getElementById('socialStateHint').textContent = reasons.length ? reasons.join(' · ') : 'All integration checks passed.';
+        if (!status.configured && status.configured_reason) reasons.push(t('social.configuredReason', { reason: status.configured_reason }));
+        if (!status.running && status.running_reason) reasons.push(t('social.runningReason', { reason: status.running_reason }));
+        if (!status.discoverable && status.discoverable_reason) reasons.push(t('social.discoverableReasonFull', { reason: status.discoverable_reason }));
+        document.getElementById('socialStateHint').textContent = reasons.length ? reasons.join(' · ') : t('hints.allIntegrationChecksPassed');
         const modeSelect = document.getElementById('socialModeSelect');
         if (modeSelect && mode !== '-') {
           modeSelect.value = mode;
         }
         document.getElementById('socialPrimaryCards').innerHTML = [
-          ['Configured', status.configured ? 'yes' : 'no'],
-          ['Running', status.running ? 'yes' : 'no'],
-          ['Discoverable', discoverable ? 'yes' : 'no'],
-          ['Public discovery', status.public_enabled ? 'enabled' : 'disabled'],
-          ['network mode', mode],
-          ['connected', status.connected_to_silicaclaw ? 'yes' : 'no'],
-          ['discoverable reason', status.discoverable_reason || '-'],
+          [t('social.configured'), status.configured ? t('common.yes') : t('common.no')],
+          [t('social.running'), status.running ? t('common.yes') : t('common.no')],
+          [t('social.discoverable'), discoverable ? t('common.yes') : t('common.no')],
+          [t('social.publicDiscovery'), status.public_enabled ? t('common.on') : t('common.off')],
+          [t('social.networkMode'), mode],
+          [t('social.connected'), status.connected_to_silicaclaw ? t('common.yes') : t('common.no')],
+          [t('social.discoverableReason'), status.discoverable_reason || '-'],
         ].map(([k,v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join('');
         document.getElementById('socialIntegrationCards').innerHTML = [
-          ['display name', status.display_name || '(unnamed)'],
-          ['agent id', shortId(status.agent_id || '')],
-          ['social.md found', summary.social_md_found ? 'yes' : 'no'],
-          ['social.md source', summary.social_md_source_path || '-'],
-          ['runtime generated', summary.runtime_generated ? 'yes' : 'no'],
-          ['reuse OpenClaw identity', summary.reused_openclaw_identity ? 'yes' : 'no'],
-          ['mode', mode],
-          ['broadcast status', summary.current_broadcast_status || '-'],
+          [t('social.displayName'), status.display_name || t('overview.unnamed')],
+          [t('social.agentId'), shortId(status.agent_id || '')],
+          [t('social.socialFound'), summary.social_md_found ? t('common.yes') : t('common.no')],
+          [t('social.socialSource'), summary.social_md_source_path || '-'],
+          [t('social.runtimeGenerated'), summary.runtime_generated ? t('common.yes') : t('common.no')],
+          [t('social.reuseOpenClawIdentity'), summary.reused_openclaw_identity ? t('common.yes') : t('common.no')],
+          [t('social.mode'), mode],
+          [t('social.broadcastStatus'), summary.current_broadcast_status || '-'],
         ].map(([k,v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join('');
         document.getElementById('socialAdvancedCards').innerHTML = [
-          ['adapter', runtimeNetwork.adapter || summary.current_adapter || '-'],
-          ['namespace', runtimeNetwork.namespace || summary.current_namespace || '-'],
-          ['room', runtimeNetwork.room || network.room || '-'],
-          ['signaling endpoints', (runtimeNetwork.signaling_urls || []).length || 0],
-          ['bootstrap sources', (runtimeNetwork.bootstrap_sources || []).length || 0],
-          ['seed peers', (runtimeNetwork.seed_peers || []).length || 0],
-          ['bootstrap hints', (runtimeNetwork.bootstrap_hints || []).length || 0],
-          ['restart required', social.network_requires_restart ? 'yes' : 'no'],
+          [t('labels.adapter'), runtimeNetwork.adapter || summary.current_adapter || '-'],
+          [t('social.namespace'), runtimeNetwork.namespace || summary.current_namespace || '-'],
+          [t('labels.room'), runtimeNetwork.room || network.room || '-'],
+          [t('network.signalingEndpoints'), (runtimeNetwork.signaling_urls || []).length || 0],
+          [t('network.bootstrapSources'), (runtimeNetwork.bootstrap_sources || []).length || 0],
+          [t('network.seedPeers'), (runtimeNetwork.seed_peers || []).length || 0],
+          [t('social.bootstrapHints'), (runtimeNetwork.bootstrap_hints || []).length || 0],
+          [t('social.restartRequired'), social.network_requires_restart ? t('common.yes') : t('common.no')],
         ].map(([k,v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join('');
         document.getElementById('socialAdvancedWrap').textContent = toPrettyJson({
           runtime_network: runtimeNetwork,
@@ -1295,14 +2904,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">${t('network.noLogsYet')}</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">${t('network.noLogsForLevel', { level: logLevelFilter })}</div>`;
           return;
         }
         el.innerHTML = filtered.map((l) => `
@@ -1320,34 +2929,81 @@
       async function refreshAll() {
         try {
-          const tasks = [refreshOverview(), refreshNetwork(), refreshPeers(), refreshDiscovery(), refreshSocial(), refreshLogs(), refreshPublicProfilePreview()];
+          const tasks = [refreshOverview(), refreshNetwork(), refreshSocial(), refreshPublicProfilePreview()];
+          if (activeTab === 'network') {
+            tasks.push(refreshPeers(), refreshDiscovery(), refreshLogs());
+          }
           const shouldRefreshProfile = !(activeTab === 'profile' && profileDirty);
           if (shouldRefreshProfile) {
             tasks.push(refreshProfile());
           }
           await Promise.all(tasks);
         } catch (e) {
-          setFeedback('networkFeedback', e instanceof Error ? e.message : 'Unknown error', 'error');
+          setFeedback('networkFeedback', e instanceof Error ? e.message : t('common.unknownError'), 'error');
         }
       }
       document.querySelectorAll('.tab').forEach((btn) => {
         btn.addEventListener('click', () => switchTab(btn.dataset.tab));
       });
-      document.getElementById('themeDarkBtn').addEventListener('click', () => applyTheme('dark'));
-      document.getElementById('themeLightBtn').addEventListener('click', () => applyTheme('light'));
+      document.getElementById('sidebarToggleBtn').addEventListener('click', () => {
+        const shell = document.getElementById('appShell');
+        const next = !shell.classList.contains('nav-collapsed');
+        shell.classList.toggle('nav-collapsed', next);
+        const btn = document.getElementById('sidebarToggleBtn');
+        const icon = btn.querySelector('.nav-collapse-toggle__icon');
+        btn.classList.toggle('active', next);
+        btn.title = next ? t('labels.expandSidebar') : t('labels.collapseSidebar');
+        btn.setAttribute('aria-label', btn.title);
+        if (icon) {
+          icon.innerHTML = next
+            ? `
+              <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="M14 10l3 2-3 2"></path>
+              </svg>
+            `
+            : `
+              <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>
+            `;
+        }
+      });
+      document.getElementById('focusModeBtn').addEventListener('click', () => {
+        const shell = document.getElementById('appShell');
+        const next = !shell.classList.contains('focus-mode');
+        shell.classList.toggle('focus-mode', next);
+        const btn = document.getElementById('focusModeBtn');
+        btn.classList.toggle('active', next);
+        btn.title = next ? t('labels.exitFocusMode') : t('labels.toggleFocusMode');
+        btn.setAttribute('aria-label', btn.title);
+      });
+      document.querySelectorAll('[data-theme-choice]').forEach((btn) => {
+        btn.addEventListener('click', () => {
+          applyTheme(btn.dataset.themeChoice || 'dark');
+        });
+      });
+      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();
         const f = event.currentTarget;
         const result = validateProfileForm(f);
         if (!result.ok) {
-          setFeedback('profileFeedback', 'Please fix validation errors before saving.', 'warn');
+          setFeedback('profileFeedback', t('feedback.fixValidation'), 'warn');
           return;
         }
         const tags = result.tags;
-        setFeedback('profileFeedback', 'Saving profile...');
+        setFeedback('profileFeedback', t('feedback.savingProfile'));
         setSaveBusy(true);
         try {
           const r = await api('/api/profile', { method: 'PUT', body: JSON.stringify({
@@ -1357,12 +3013,12 @@
             avatar_url: field(f, 'avatar_url').value,
             public_enabled: !!field(f, 'public_enabled').checked,
           })});
-          setFeedback('profileFeedback', r.meta?.message || 'Saved.');
-          toast('Profile saved');
+          setFeedback('profileFeedback', r.meta?.message || t('common.saved'));
+          toast(t('feedback.profileSaved'));
           field(f, 'tags').value = normalizeTagsInput(field(f, 'tags').value);
           await refreshAll();
         } catch (e) {
-          setFeedback('profileFeedback', e instanceof Error ? e.message : 'Failed', 'error');
+          setFeedback('profileFeedback', e instanceof Error ? e.message : t('feedback.failed'), 'error');
         } finally {
           setSaveBusy(false);
         }
@@ -1370,7 +3026,7 @@
       document.getElementById('refreshProfileBtn').addEventListener('click', async () => {
         await refreshProfile();
-        toast('Profile form reloaded');
+        toast(t('feedback.profileReloaded'));
       });
       const profileFormEl = document.getElementById('profileForm');
       ['input', 'change'].forEach((evt) => {
@@ -1405,27 +3061,21 @@
         setFeedback('networkFeedback', text);
         try {
           const r = await api(path, { method: 'POST' });
-          setFeedback('networkFeedback', r.meta?.message || 'Done', level);
-          toast(r.meta?.message || 'Done');
+          setFeedback('networkFeedback', r.meta?.message || t('common.done'), level);
+          toast(r.meta?.message || t('common.done'));
           await refreshAll();
         } catch (e) {
-          setFeedback('networkFeedback', e instanceof Error ? e.message : 'Failed', 'error');
+          setFeedback('networkFeedback', e instanceof Error ? e.message : t('feedback.failed'), 'error');
         }
       }
-      document.getElementById('startBroadcastBtn').addEventListener('click', () => runAction('/api/broadcast/start', 'Starting...'));
-      document.getElementById('stopBroadcastBtn').addEventListener('click', () => runAction('/api/broadcast/stop', 'Stopping...', 'warn'));
-      document.getElementById('broadcastNowBtn').addEventListener('click', () => runAction('/api/broadcast/now', 'Broadcasting now...'));
-      document.getElementById('refreshCacheBtn').addEventListener('click', () => runAction('/api/cache/refresh', 'Refreshing cache...'));
-      document.getElementById('clearCacheBtn').addEventListener('click', async () => {
-        const ok = window.confirm('Clear discovered cache now?\n\nThis removes discovered peer profiles/presence/index references and keeps your self profile.');
-        if (!ok) return;
-        await runAction('/api/cache/clear', 'Clearing discovered cache...', 'warn');
-      });
+      document.getElementById('startBroadcastBtn').addEventListener('click', () => runAction('/api/broadcast/start', t('actions.startBroadcast')));
+      document.getElementById('stopBroadcastBtn').addEventListener('click', () => runAction('/api/broadcast/stop', t('actions.stopBroadcast'), 'warn'));
+      document.getElementById('broadcastNowBtn').addEventListener('click', () => runAction('/api/broadcast/now', t('actions.broadcastNow')));
       document.getElementById('quickGlobalPreviewBtn').addEventListener('click', async () => {
-        const currentSignaling = window.prompt('Signaling URL (publicly reachable):', 'http://localhost:4510');
+        const currentSignaling = window.prompt(t('feedback.promptSignalingUrl'), 'http://localhost:4510');
         if (!currentSignaling) return;
-        const room = window.prompt('Room:', 'silicaclaw-demo') || 'silicaclaw-demo';
-        setFeedback('networkFeedback', 'Enabling cross-network preview...');
+        const room = window.prompt(t('feedback.promptRoom'), 'silicaclaw-global-preview') || 'silicaclaw-global-preview';
+        setFeedback('networkFeedback', t('feedback.crossPreviewEnabling'));
         try {
           const result = await api('/api/network/quick-connect-global-preview', {
             method: 'POST',
@@ -1434,11 +3084,11 @@
               room: room.trim(),
             }),
           });
-          setFeedback('networkFeedback', result.meta?.message || 'Cross-network preview enabled');
-          toast('Cross-network preview enabled');
+          setFeedback('networkFeedback', result.meta?.message || t('feedback.crossPreviewEnabled'));
+          toast(t('feedback.crossPreviewEnabled'));
           await refreshAll();
         } catch (e) {
-          setFeedback('networkFeedback', e instanceof Error ? e.message : 'Enable cross-network preview failed', 'error');
+          setFeedback('networkFeedback', e instanceof Error ? e.message : t('feedback.enableCrossPreviewFailed'), 'error');
         }
       });
       document.getElementById('onlyOnlineToggle').addEventListener('change', async (event) => {
@@ -1447,104 +3097,50 @@
       });
       document.getElementById('refreshLogsBtn').addEventListener('click', async () => {
         await refreshLogs();
-        toast('Logs refreshed');
-      });
-      document.getElementById('enablePublicDiscoveryBtn').addEventListener('click', async () => {
-        const ok = window.confirm(
-          'Enable public discovery now?\n\n' +
-          '- Only profile/presence are shared.\n' +
-          '- Private files are not shared.\n' +
-          '- Chat and remote control are not enabled.\n\n' +
-          'This updates runtime state and does not overwrite social.md.'
-        );
-        if (!ok) return;
-        setFeedback('networkFeedback', 'Enabling public discovery...');
-        try {
-          const res = await api('/api/public-discovery/enable', { method: 'POST' });
-          setFeedback('networkFeedback', res.meta?.message || 'Public discovery enabled.');
-          toast('Public discovery enabled');
-          await refreshAll();
-        } catch (e) {
-          setFeedback('networkFeedback', e instanceof Error ? e.message : 'Enable public discovery failed', 'error');
-        }
-      });
-      document.getElementById('disablePublicDiscoveryBtn').addEventListener('click', async () => {
-        const ok = window.confirm('Disable public discovery now? This updates runtime state and does not overwrite social.md.');
-        if (!ok) return;
-        setFeedback('networkFeedback', 'Disabling public discovery...');
-        try {
-          const res = await api('/api/public-discovery/disable', { method: 'POST' });
-          setFeedback('networkFeedback', res.meta?.message || 'Public discovery disabled.');
-          toast('Public discovery disabled');
-          await refreshAll();
-        } catch (e) {
-          setFeedback('networkFeedback', e instanceof Error ? e.message : 'Disable public discovery failed', 'error');
-        }
-      });
-      document.getElementById('socialReloadBtn').addEventListener('click', async () => {
-        setFeedback('socialFeedback', 'Reloading social config...');
-        try {
-          const res = await api('/api/social/reload', { method: 'POST' });
-          setFeedback('socialFeedback', res.meta?.message || 'Reloaded');
-          toast('Social config reloaded');
-          await refreshAll();
-        } catch (e) {
-          setFeedback('socialFeedback', e instanceof Error ? e.message : 'Reload failed', 'error');
-        }
-      });
-      document.getElementById('socialGenerateBtn').addEventListener('click', async () => {
-        setFeedback('socialFeedback', 'Generating default social.md...');
-        try {
-          const res = await api('/api/social/generate-default', { method: 'POST' });
-          setFeedback('socialFeedback', res.meta?.message || 'Done');
-          toast(res.meta?.message || 'Default social.md ready');
-          await refreshAll();
-        } catch (e) {
-          setFeedback('socialFeedback', e instanceof Error ? e.message : 'Generate failed', 'error');
-        }
+        toast(t('feedback.logsRefreshed'));
       });
       document.getElementById('socialExportBtn').addEventListener('click', async () => {
-        setFeedback('socialFeedback', 'Exporting template...');
+        setFeedback('socialFeedback', t('feedback.exportingTemplate'));
         try {
           await exportSocialTemplate();
-          setFeedback('socialFeedback', 'Template exported from current runtime.');
-          toast('Template exported');
+          setFeedback('socialFeedback', t('feedback.templateExported'));
+          toast(t('feedback.templateExported'));
         } catch (e) {
-          setFeedback('socialFeedback', e instanceof Error ? e.message : 'Export failed', 'error');
+          setFeedback('socialFeedback', e instanceof Error ? e.message : t('feedback.exportFailed'), 'error');
         }
       });
       document.getElementById('socialModeApplyBtn').addEventListener('click', async () => {
         const mode = document.getElementById('socialModeSelect').value;
-        setFeedback('socialFeedback', `Applying runtime mode: ${mode}...`);
+        setFeedback('socialFeedback', t('feedback.runtimeModeApplying', { mode }));
         try {
           const res = await api('/api/social/runtime-mode', {
             method: 'POST',
             body: JSON.stringify({ mode }),
           });
-          setFeedback('socialFeedback', res.meta?.message || 'Runtime mode updated.');
-          toast(`Runtime mode: ${mode}`);
+          setFeedback('socialFeedback', res.meta?.message || t('feedback.runtimeUpdated'));
+          toast(t('feedback.runtimeMode', { mode }));
           await refreshAll();
         } catch (e) {
-          setFeedback('socialFeedback', e instanceof Error ? e.message : 'Runtime mode update failed', 'error');
+          setFeedback('socialFeedback', e instanceof Error ? e.message : t('feedback.failed'), 'error');
         }
       });
       document.getElementById('socialCopyBtn').addEventListener('click', async () => {
-        setFeedback('socialFeedback', 'Copying template...');
+        setFeedback('socialFeedback', t('feedback.copyingTemplate'));
         const btn = document.getElementById('socialCopyBtn');
         try {
           if (!socialTemplate) {
             await exportSocialTemplate();
           }
           await navigator.clipboard.writeText(socialTemplate);
-          setFeedback('socialFeedback', 'Template copied to clipboard.');
-          toast('Copied');
-          flashButton(btn, 'Copied');
+          setFeedback('socialFeedback', t('feedback.templateCopied'));
+          toast(t('common.copied'));
+          flashButton(btn, t('common.copied'));
         } catch (e) {
-          setFeedback('socialFeedback', e instanceof Error ? e.message : 'Copy failed', 'error');
+          setFeedback('socialFeedback', e instanceof Error ? e.message : t('feedback.copyFailed'), 'error');
         }
       });
       document.getElementById('socialDownloadBtn').addEventListener('click', async () => {
-        setFeedback('socialFeedback', 'Preparing download...');
+        setFeedback('socialFeedback', t('feedback.preparingDownload'));
         try {
           const payload = await exportSocialTemplate();
           const filename = String(payload.filename || 'social.md');
@@ -1557,10 +3153,10 @@
           anchor.click();
           anchor.remove();
           URL.revokeObjectURL(url);
-          setFeedback('socialFeedback', `Downloaded ${filename}.`);
-          toast('Downloaded');
+          setFeedback('socialFeedback', t('feedback.downloaded', { filename }));
+          toast(t('feedback.downloaded', { filename }));
         } catch (e) {
-          setFeedback('socialFeedback', e instanceof Error ? e.message : 'Download failed', 'error');
+          setFeedback('socialFeedback', e instanceof Error ? e.message : t('feedback.downloadFailed'), 'error');
         }
       });
       document.getElementById('copyPublicProfilePreviewBtn').addEventListener('click', async () => {
@@ -1568,10 +3164,10 @@
         try {
           const summary = (await api('/api/public-profile/preview')).data || null;
           await navigator.clipboard.writeText(toPrettyJson(summary));
-          toast('Public profile preview copied');
-          flashButton(btn, 'Copied');
+          toast(t('actions.copyPublicProfilePreview'));
+          flashButton(btn, t('common.copied'));
         } catch (e) {
-          setFeedback('profileFeedback', e instanceof Error ? e.message : 'Copy preview failed', 'error');
+          setFeedback('profileFeedback', e instanceof Error ? e.message : t('feedback.copyPreviewFailed'), 'error');
         }
       });
       document.getElementById('logLevelFilter').addEventListener('change', (event) => {
@@ -1593,6 +3189,20 @@
         });
       })();
+      if (window.matchMedia) {
+        const media = window.matchMedia('(prefers-color-scheme: light)');
+        const handleThemeMedia = () => {
+          if ((localStorage.getItem('silicaclaw_theme_mode') || 'dark') === 'system') {
+            applyTheme('system');
+          }
+        };
+        if (typeof media.addEventListener === 'function') {
+          media.addEventListener('change', handleThemeMedia);
+        } else if (typeof media.addListener === 'function') {
+          media.addListener(handleThemeMedia);
+        }
+      }
       applyTheme(localStorage.getItem('silicaclaw_theme_mode') || 'dark');
       refreshAll();
       exportSocialTemplate().catch(() => {});