@silicaclaw/cli 2026.3.18-3 → 2026.3.18-4

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

@@ -141,23 +141,23 @@
         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;
+        background: color-mix(in srgb, var(--bg) 96%, var(--bg-elevated) 4%);
         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;
+        background: color-mix(in srgb, var(--panel) 98%, white 2%);
       }
       .sidebar-shell {
         display: flex;
         flex: 1 1 auto;
         min-height: 0;
         flex-direction: column;
+        padding: 14px 10px 12px;
+        background: transparent;
+      }
+      .app.nav-collapsed .sidebar-shell {
+        padding: 12px 8px 10px;
       }
       .sidebar-shell__header {
         flex: 0 0 auto;
@@ -174,12 +174,13 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background: var(--bg-elevated);
+        background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
         border: 1px solid color-mix(in srgb, var(--border-strong) 68%, transparent);
         border-radius: 999px;
         cursor: pointer;
         color: var(--muted);
         flex: 0 0 auto;
+        box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
         transition:
           background .16s ease,
           border-color .16s ease,
@@ -223,7 +224,7 @@
         display: flex;
         align-items: center;
         gap: 10px;
-        margin-bottom: 0;
+        min-width: 0;
       }
       .brand-logo {
         width: 32px;
@@ -245,14 +246,24 @@
         place-items: center;
       }
       .brand-badge.hidden { display: none; }
+      .brand-copy {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+      }
       .brand h1 {
         margin: 0;
         font-size: 15px;
         line-height: 1.1;
         letter-spacing: -0.03em;
+        color: var(--text-strong);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
       .brand p {
-        margin: 2px 0 0;
+        margin: 0;
         color: var(--muted);
         font-size: 10px;
         line-height: 1.15;
@@ -270,7 +281,7 @@
       .app.nav-collapsed .brand h1,
       .app.nav-collapsed .brand p,
       .app.nav-collapsed .sidebar-foot,
-      .app.nav-collapsed .sidebar-nav__label {
+      .app.nav-collapsed .nav-section__label {
         display: none;
       }
       .app.focus-mode .sidebar {
@@ -308,18 +319,36 @@
       .app.nav-collapsed .nav button .tab-icon {
         width: 18px;
         height: 18px;
+        transform: translateX(.5px);
       }
       .app.nav-collapsed .nav button .tab-icon svg {
         width: 18px;
         height: 18px;
       }
       .app.nav-collapsed .nav button.active::before {
+        content: "";
+        position: absolute;
         left: 8px;
         top: 10px;
         bottom: 10px;
+        width: 3px;
+        border-radius: 999px;
+        background: color-mix(in srgb, var(--accent) 86%, transparent);
+        box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 34%, transparent);
       }
       .app.nav-collapsed .sidebar-shell__footer {
         padding: 8px 0 2px;
+        display: grid;
+        justify-items: center;
+      }
+      .app.nav-collapsed .nav-collapse-toggle {
+        width: 42px;
+        height: 42px;
+        border-color: color-mix(in srgb, var(--border) 82%, transparent);
+        background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
+        box-shadow:
+          inset 0 1px 0 color-mix(in srgb, white 8%, transparent),
+          0 8px 18px color-mix(in srgb, black 16%, transparent);
       }
       .app.nav-collapsed .sidebar-utility {
         display: none;
@@ -331,24 +360,56 @@
         justify-content: center;
         border-radius: 16px;
       }
+      .app.nav-collapsed .sidebar-version__status {
+        margin-left: 0;
+      }
 
       .nav {
         display: grid;
-        gap: 4px;
+        align-content: start;
         min-height: 0;
         overflow: auto;
         padding: 0;
         scrollbar-width: none;
       }
       .nav::-webkit-scrollbar { display: none; }
-      .sidebar-nav__label {
-        padding: 0 10px 8px;
+      .sidebar-nav {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 0;
+      }
+      .sidebar-nav::-webkit-scrollbar {
+        display: none;
+      }
+      .nav-section {
+        display: grid;
+        align-content: start;
+        gap: 6px;
+        margin-bottom: 10px;
+      }
+      .nav-section:last-child {
+        margin-bottom: 0;
+      }
+      .nav-section__label {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+        width: 100%;
+        min-height: 28px;
+        padding: 0 10px;
         color: var(--muted);
         font-size: 12px;
         font-weight: 700;
         letter-spacing: 0.06em;
         text-transform: uppercase;
       }
+      .nav-section__items {
+        display: grid;
+        align-content: start;
+        gap: 4px;
+      }
       .nav button {
         position: relative;
         display: flex;
@@ -360,10 +421,11 @@
         border: 1px solid transparent;
         background: transparent;
         color: var(--muted);
-        padding: 0 9px;
+        padding: 0 10px;
         border-radius: 12px;
         cursor: pointer;
         font: inherit;
+        line-height: 1;
         transition:
           border-color .16s ease,
           background .16s ease,
@@ -378,6 +440,7 @@
         justify-content: center;
         flex-shrink: 0;
         opacity: .72;
+        transform: translateY(-.5px);
       }
       .nav button .tab-icon svg {
         width: 16px;
@@ -396,6 +459,7 @@
         font-size: 14px;
         font-weight: 600;
         color: inherit;
+        line-height: 1.1;
         white-space: nowrap;
       }
       .nav button .tab-copy {
@@ -403,9 +467,11 @@
       }
       .nav button.active {
         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);
+        border-color: color-mix(in srgb, var(--accent) 14%, transparent);
+        background: color-mix(in srgb, var(--accent-subtle) 76%, var(--bg-elevated) 24%);
+        box-shadow:
+          inset 0 1px 0 color-mix(in srgb, white 10%, transparent),
+          0 10px 18px color-mix(in srgb, black 8%, transparent);
       }
       .nav button.active .tab-icon {
         opacity: 1;
@@ -456,16 +522,31 @@
         font-weight: 600;
       }
       .sidebar-version {
-        margin-top: 10px;
+        margin-top: 0;
         display: flex;
         align-items: center;
-        justify-content: center;
-        min-height: 40px;
+        justify-content: space-between;
+        gap: 10px;
+        min-height: 42px;
         padding: 0 12px;
         border-radius: 14px;
-        background: var(--bg-elevated);
+        background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
         border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
-        box-shadow: none;
+        box-shadow: inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
+      }
+      .sidebar-version__copy {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+      }
+      .sidebar-version__label {
+        font-size: 10px;
+        line-height: 1;
+        color: var(--muted);
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
       }
       .sidebar-version__text {
         font-size: 12px;
@@ -475,12 +556,30 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        text-align: center;
+      }
+      .sidebar-version__status {
+        width: 8px;
+        height: 8px;
+        border-radius: 999px;
+        background: color-mix(in srgb, var(--muted) 55%, transparent);
+        box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 12%, transparent);
+        flex: 0 0 auto;
+      }
+      .sidebar-version__status.ok {
+        background: var(--ok);
+        box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 14%, transparent);
+      }
+      .sidebar-version__status.warn {
+        background: var(--warn);
+        box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 14%, transparent);
       }
       .app.nav-collapsed .sidebar-version {
         justify-content: center;
         padding: 0;
       }
+      .app.nav-collapsed .sidebar-version__copy {
+        display: none;
+      }
 
       .main {
         display: flex;
@@ -494,16 +593,21 @@
       .topbar {
         flex: 0 0 auto;
         display: flex;
-        justify-content: space-between;
-        gap: 12px;
         align-items: center;
-        min-height: 52px;
+        min-height: 58px;
         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);
       }
+      .topnav-shell {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        width: 100%;
+        min-height: 52px;
+      }
       .topbar h2 {
         display: none;
         margin: 0;
@@ -523,9 +627,7 @@
         gap: 8px;
         min-width: 0;
         overflow: hidden;
-        font-size: 12px;
-        margin-bottom: 2px;
-        letter-spacing: 0.01em;
+        font-size: 13px;
       }
       .dashboard-header__breadcrumb-link,
       .dashboard-header__breadcrumb-sep {
@@ -544,11 +646,17 @@
         flex: 1;
         overflow: hidden;
       }
+      .topnav-shell__actions {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-shrink: 0;
+      }
       .main-scroll {
         flex: 1 1 auto;
         min-height: 0;
         overflow: auto;
-        padding: 12px 18px 18px;
+        padding: 10px 18px 18px;
       }
       .status-row {
         display: flex;
@@ -558,14 +666,19 @@
         flex-shrink: 0;
         min-width: max-content;
       }
+      .topbar-status {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
       .topbar-actions {
         display: inline-flex;
         align-items: center;
-        gap: 8px;
+        gap: 10px;
       }
       .icon-btn {
-        width: 30px;
-        height: 30px;
+        width: 32px;
+        height: 32px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -586,8 +699,8 @@
         background: var(--accent-subtle);
       }
       .icon-btn svg {
-        width: 15px;
-        height: 15px;
+        width: 16px;
+        height: 16px;
         stroke: currentColor;
       }
       .topbar-theme-mode {
@@ -665,6 +778,7 @@
         min-height: 32px;
         display: inline-flex;
         align-items: center;
+        gap: 6px;
         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); }
@@ -672,7 +786,7 @@
 
       .notice {
         display: none;
-        margin-bottom: 12px;
+        margin-bottom: 8px;
         border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
         background: var(--accent-subtle);
         border-radius: 10px;
@@ -684,12 +798,12 @@
         position: sticky;
         top: 0;
         z-index: 9;
-        margin-bottom: 8px;
+        margin-bottom: 4px;
         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;
+        padding: 6px 11px;
         font-size: 12px;
         line-height: 1.45;
         color: var(--text);
@@ -703,56 +817,90 @@
       }
       .page-hero {
         display: grid;
-        grid-template-columns: 1.2fr .8fr;
-        gap: 10px;
-        margin-bottom: 8px;
+        grid-template-columns: minmax(0, 1fr) 440px;
+        align-items: stretch;
+        gap: 6px;
+        margin-bottom: 4px;
       }
       .hero-copy {
+        display: flex;
+        align-items: center;
+        gap: 12px;
         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;
+        padding: 10px 12px;
         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;
+        flex: 0 0 auto;
+        font-size: 15px;
         color: var(--text-strong);
         letter-spacing: -0.02em;
       }
       .hero-copy p {
-        margin: 5px 0 0;
+        margin: 0;
         color: var(--muted);
         font-size: 12px;
         line-height: 1.42;
+        min-width: 0;
       }
       .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;
+        padding: 8px;
         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;
+        gap: 4px;
       }
       .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;
+        padding: 5px 7px;
       }
 
       .view { display: none; }
       .view.active {
         display: grid;
-        gap: 8px;
+        gap: 6px;
+      }
+
+      .overview-panel-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 6px;
+      }
+      .overview-panel-title {
+        min-width: 0;
+      }
+      .overview-panel-title .title-sm {
+        margin: 0;
+      }
+      .overview-panel-controls {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        flex-shrink: 0;
+      }
+      .overview-inline-toggle {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        color: var(--muted);
+        font-size: 12px;
+        white-space: nowrap;
       }
 
       .section-header {
@@ -761,12 +909,13 @@
         justify-content: space-between;
         gap: 12px;
         min-width: 0;
+        margin-bottom: 2px;
       }
       .section-header__copy {
         min-width: 0;
       }
       .section-header__eyebrow {
-        margin: 0 0 3px;
+        margin: 0 0 2px;
         color: var(--muted);
         font-size: 11px;
         font-weight: 700;
@@ -780,7 +929,7 @@
         letter-spacing: -0.02em;
       }
       .section-header__body {
-        margin: 4px 0 0;
+        margin: 3px 0 0;
         color: var(--muted);
         font-size: 12px;
         line-height: 1.45;
@@ -790,13 +939,16 @@
         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;
+        padding: 10px;
         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;
+        padding: 8px 10px;
+      }
+      #view-overview .section-surface.compact {
+        margin-bottom: 2px;
       }
 
       .grid {
@@ -815,10 +967,10 @@
         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;
+        padding: 10px;
         box-shadow:
           inset 0 1px 0 color-mix(in srgb, white 4%, transparent),
-          0 14px 30px color-mix(in srgb, black 10%, transparent);
+          0 12px 24px color-mix(in srgb, black 9%, transparent);
         transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
       }
       .card:hover {
@@ -831,12 +983,12 @@
       .value { margin-top: 4px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
 
       .split {
-        margin-top: 8px;
+        margin-top: 4px;
         display: grid;
-        gap: 8px;
+        gap: 6px;
         grid-template-columns: 1.2fr 1fr;
       }
-      .title-sm { margin: 0 0 10px; font-size: 16px; letter-spacing: -0.02em; }
+      .title-sm { margin: 0 0 6px; font-size: 15px; letter-spacing: -0.02em; }
       .mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
 
       .table {
@@ -853,15 +1005,171 @@
       .table th, .table td {
         border-bottom: 1px solid var(--border);
         text-align: left;
-        padding: 8px 6px;
+        padding: 7px 6px;
         font-size: 13px;
       }
+      .agent-list {
+        display: grid;
+        gap: 8px;
+      }
+      .agent-card {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr) auto auto;
+        gap: 10px;
+        align-items: center;
+        padding: 9px 10px;
+        border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
+        border-radius: 14px;
+        background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, transparent), color-mix(in srgb, var(--bg-elevated) 90%, transparent));
+      }
+      .agent-card__avatar {
+        width: 34px;
+        height: 34px;
+        border-radius: 10px;
+        object-fit: cover;
+        display: block;
+        border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+        background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
+      }
+      .agent-card__avatar-fallback {
+        width: 34px;
+        height: 34px;
+        border-radius: 10px;
+        display: grid;
+        place-items: center;
+        font-size: 12px;
+        font-weight: 800;
+        color: var(--text-strong);
+        border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+        background: color-mix(in srgb, var(--accent-subtle) 70%, var(--bg-elevated) 30%);
+      }
+      .agent-card__main {
+        min-width: 0;
+        display: grid;
+        gap: 4px;
+      }
+      .agent-card__row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-width: 0;
+      }
+      .agent-card__name {
+        min-width: 0;
+        font-size: 14px;
+        font-weight: 700;
+        color: var(--text-strong);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .agent-card__id {
+        color: var(--muted);
+        font-size: 11px;
+        white-space: nowrap;
+      }
+      .agent-card__bio {
+        color: var(--muted);
+        font-size: 12px;
+        line-height: 1.4;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .agent-card__tags {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex-wrap: wrap;
+      }
+      .agent-card__meta {
+        display: grid;
+        gap: 4px;
+        justify-items: end;
+        text-align: right;
+      }
+      .agent-card__updated {
+        color: var(--muted);
+        font-size: 12px;
+        white-space: nowrap;
+      }
+      .agent-list__footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        margin-top: 8px;
+      }
+      .agent-list__page {
+        color: var(--muted);
+        font-size: 12px;
+      }
+      .agent-list__pager {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .agent-list__pager button {
+        min-height: 32px;
+        padding: 0 10px;
+      }
+      .snapshot-card {
+        display: grid;
+        gap: 10px;
+      }
+      .snapshot-card__identity {
+        display: grid;
+        gap: 6px;
+      }
+      .snapshot-card__label {
+        font-size: 11px;
+        font-weight: 700;
+        color: var(--muted);
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+      }
+      .snapshot-card__title {
+        font-size: 15px;
+        font-weight: 700;
+        color: var(--text-strong);
+        line-height: 1.2;
+        word-break: break-word;
+      }
+      .snapshot-card__subtle {
+        color: var(--muted);
+        font-size: 12px;
+        line-height: 1.45;
+        word-break: break-word;
+      }
+      .snapshot-card__grid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 6px;
+      }
+      .snapshot-card__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 8px;
+      }
+      .snapshot-card__item .label {
+        font-size: 11px;
+      }
+      .snapshot-card__item .mono,
+      .snapshot-card__item .value-inline {
+        margin-top: 4px;
+        display: block;
+        color: var(--text);
+        font-size: 12px;
+        line-height: 1.35;
+        word-break: break-word;
+      }
       .online { color: var(--ok); font-weight: 700; }
       .offline { color: #f48c8f; font-weight: 700; }
       .stale { color: var(--warn); font-weight: 700; }
 
-      .stack { display: grid; gap: 10px; }
-      .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+      .stack { display: grid; gap: 8px; }
+      .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
       label { color: var(--muted); font-size: 13px; }
       input, textarea {
         margin-top: 5px;
@@ -871,7 +1179,7 @@
         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;
+        padding: 9px 10px;
         box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
       }
       select {
@@ -894,7 +1202,7 @@
           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; }
+      textarea { min-height: 84px; resize: vertical; }
 
       .actions {
         display: flex;
@@ -910,7 +1218,7 @@
         display: flex;
         gap: 8px;
         flex-wrap: wrap;
-        margin-bottom: 8px;
+        margin-bottom: 4px;
         padding: 2px 0 0;
       }
       .summary-list {
@@ -920,7 +1228,7 @@
       .summary-item {
         display: grid;
         gap: 3px;
-        padding: 10px;
+        padding: 9px;
         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));
@@ -929,10 +1237,11 @@
       .empty-state {
         border: 1px dashed color-mix(in srgb, var(--border-strong) 88%, transparent);
         border-radius: 14px;
-        padding: 18px;
+        padding: 15px 16px;
         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;
+        line-height: 1.5;
+        font-size: 12.5px;
       }
       button {
         border: 1px solid transparent;
@@ -969,29 +1278,34 @@
       }
       button.secondary {
         border-color: var(--border-strong);
-        background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
+        background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 98%, transparent), color-mix(in srgb, var(--panel) 94%, transparent));
         color: var(--text);
         box-shadow: none;
       }
+      button.secondary:hover {
+        border-color: color-mix(in srgb, var(--accent) 18%, var(--border-strong));
+        background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
+      }
 
       .feedback {
         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);
+        padding: 9px 10px;
+        font-size: 12.5px;
+        color: var(--text);
         box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
+        line-height: 1.45;
       }
       .profile-layout {
         display: grid;
-        gap: 10px;
+        gap: 8px;
         grid-template-columns: 1.1fr .9fr;
       }
       .profile-meta {
         border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
         border-radius: 12px;
-        padding: 10px;
+        padding: 9px;
         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);
       }
@@ -1012,7 +1326,7 @@
         line-height: 1.45;
       }
       .tag-chips {
-        margin-top: 10px;
+        margin-top: 8px;
         display: flex;
         gap: 6px;
         flex-wrap: wrap;
@@ -1033,7 +1347,7 @@
         margin-top: 4px;
         color: var(--muted);
         font-size: 12px;
-        line-height: 1.45;
+        line-height: 1.4;
       }
       .field-error {
         margin-top: 4px;
@@ -1053,8 +1367,8 @@
         overflow: auto;
         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;
+        background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 97%, transparent), color-mix(in srgb, var(--bg-elevated) 92%, transparent));
+        padding: 9px;
         box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
       }
       .log-item {
@@ -1070,7 +1384,7 @@
         gap: 10px;
         flex-wrap: wrap;
         align-items: end;
-        margin-bottom: 10px;
+        margin-bottom: 8px;
         padding-bottom: 2px;
       }
       .toolbar .field {
@@ -1079,8 +1393,8 @@
       .mono-block {
         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;
+        background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 97%, transparent), color-mix(in srgb, var(--panel) 93%, transparent));
+        padding: 9px;
         max-height: 240px;
         overflow: auto;
         white-space: pre-wrap;
@@ -1088,7 +1402,11 @@
         box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
       }
       .advanced-panel {
-        margin-top: 8px;
+        margin-top: 6px;
+      }
+      details.card,
+      .advanced-panel.card {
+        background: linear-gradient(180deg, color-mix(in srgb, var(--card-soft) 97%, transparent), color-mix(in srgb, var(--panel) 94%, transparent));
       }
       .advanced-panel.card > summary,
       details.card > summary {
@@ -1166,6 +1484,10 @@
         .nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
         .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
         .split, .row, .profile-layout, .page-hero { grid-template-columns: 1fr; }
+        .hero-copy {
+          display: grid;
+          gap: 4px;
+        }
         .main {
           height: auto;
           overflow: visible;
@@ -1186,7 +1508,7 @@
             <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>
+              <div class="brand-copy">
                 <h1>SilicaClaw</h1>
                 <p>Control UI</p>
               </div>
@@ -1202,9 +1524,11 @@
             </button>
           </div>
           <div class="sidebar-shell__body">
-            <div class="sidebar-nav__label">Control</div>
-            <nav class="nav">
-              <button class="tab active" data-tab="overview">
+            <nav class="sidebar-nav nav">
+              <section class="nav-section">
+                <div class="nav-section__label">Control</div>
+                <div class="nav-section__items">
+              <button class="tab nav-item active" data-tab="overview">
                 <span class="tab-icon" aria-hidden="true">
                   <svg viewBox="0 0 24 24">
                     <line x1="12" x2="12" y1="20" y2="10"></line>
@@ -1214,7 +1538,7 @@
                 </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">
+              <button class="tab nav-item" data-tab="profile">
                 <span class="tab-icon" aria-hidden="true">
                   <svg viewBox="0 0 24 24">
                     <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
@@ -1226,7 +1550,7 @@
                 </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">
+              <button class="tab nav-item" data-tab="network">
                 <span class="tab-icon" aria-hidden="true">
                   <svg viewBox="0 0 24 24">
                     <circle cx="12" cy="12" r="2"></circle>
@@ -1235,7 +1559,7 @@
                 </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">
+              <button class="tab nav-item" data-tab="social">
                 <span class="tab-icon" aria-hidden="true">
                   <svg viewBox="0 0 24 24">
                     <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
@@ -1243,11 +1567,17 @@
                 </span>
                 <span class="tab-labels"><span class="tab-title">Social</span><span class="tab-copy">social.md config and runtime state</span></span>
               </button>
+                </div>
+              </section>
             </nav>
           </div>
           <div class="sidebar-shell__footer">
             <div class="sidebar-version" title="Current version">
-              <span class="sidebar-version__text" id="brandVersion">-</span>
+              <div class="sidebar-version__copy">
+                <span class="sidebar-version__label">Version</span>
+                <span class="sidebar-version__text" id="brandVersion">-</span>
+              </div>
+              <span class="sidebar-version__status" id="brandStatusDot" aria-hidden="true"></span>
             </div>
           </div>
         </div>
@@ -1255,60 +1585,64 @@
 
       <main class="main">
         <div class="topbar">
-          <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 class="topnav-shell">
+            <div class="topnav-shell__content">
+              <div class="dashboard-header__breadcrumb">
+                <span class="dashboard-header__breadcrumb-link">SilicaClaw</span>
+                <span class="dashboard-header__breadcrumb-sep">/</span>
+                <span class="dashboard-header__breadcrumb-current" id="pageBreadcrumb">Overview</span>
+              </div>
             </div>
-            <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="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>
+            <div class="topnav-shell__actions">
+              <div class="topbar-status">
+                <div class="status-row">
+                  <div class="pill" id="pillAdapter">adapter: -</div>
+                  <div class="pill" id="pillBroadcast">broadcast: -</div>
+                </div>
+                <div class="topbar-actions">
+                  <button class="icon-btn" id="focusModeBtn" type="button" title="Toggle focus mode" aria-label="Toggle focus mode">
+                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                      <path d="M4 7V4h3"></path>
+                      <path d="M20 7V4h-3"></path>
+                      <path d="M4 17v3h3"></path>
+                      <path d="M20 17v3h-3"></path>
+                      <circle cx="12" cy="12" r="3"></circle>
                     </svg>
-                  </span>
-                </button>
+                  </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>
@@ -1348,12 +1682,18 @@
           <div class="grid" id="overviewCards"></div>
           <div class="split">
             <div class="card">
-              <h3 class="title-sm">Discovered Agents</h3>
-              <div class="field-hint" id="agentsCountHint">0 agents</div>
-              <label class="field-hint" style="display:inline-flex;gap:6px;align-items:center;margin:6px 0 8px;">
-                <input type="checkbox" id="onlyOnlineToggle" />
-                Only show online
-              </label>
+              <div class="overview-panel-header">
+                <div class="overview-panel-title">
+                  <h3 class="title-sm">Discovered Agents</h3>
+                  <div class="field-hint" id="agentsCountHint">0 agents</div>
+                </div>
+                <div class="overview-panel-controls">
+                  <label class="overview-inline-toggle">
+                    <input type="checkbox" id="onlyOnlineToggle" />
+                    <span>Only show online</span>
+                  </label>
+                </div>
+              </div>
               <div id="agentsWrap"></div>
             </div>
             <div class="card">
@@ -1760,6 +2100,9 @@
             onboardingNotice: 'Connected · mode={mode} · discoverable={discoverable} · next: update your profile, turn on Public Enabled, and export social.md',
             pillRunning: 'broadcast: running',
             pillPaused: 'broadcast: paused',
+            pageStatus: 'Page {page} / {total}',
+            prevPage: 'Prev',
+            nextPage: 'Next',
           },
           preview: {
             unnamedAgent: '(unnamed agent)',
@@ -1916,7 +2259,7 @@
               body: '查看当前节点是否在线，以及还能看到哪些节点。',
             },
             profile: {
-              title: 'Profile',
+              title: '资料',
               body: '编辑其他节点可见的公开名片。',
             },
             network: {
@@ -1930,7 +2273,7 @@
           },
           actions: {
             broadcastNow: '立即广播',
-            editProfile: '编辑 Profile',
+            editProfile: '编辑资料',
             openNetwork: '打开网络页',
             startBroadcast: '启动广播',
             stopBroadcast: '停止广播',
@@ -1940,12 +2283,12 @@
             copyTemplate: '复制模板',
             downloadTemplate: '下载模板',
             applyRuntimeMode: '应用运行时模式',
-            saveProfile: '保存 Profile',
-            copyPublicProfilePreview: '复制公开 Profile 预览摘要',
+            saveProfile: '保存资料',
+            copyPublicProfilePreview: '复制公开资料预览摘要',
           },
           labels: {
             overviewTabCopy: '代理摘要与已发现节点',
-            profileTabCopy: '公开身份与已保存的 Profile',
+            profileTabCopy: '公开身份与已保存资料',
             networkTabCopy: 'Relay 健康度、广播与诊断',
             socialTabCopy: 'social.md 配置与运行时状态',
             collapseSidebar: '折叠侧边栏',
@@ -1967,9 +2310,9 @@
             discoveredAgents: '已发现代理',
             onlyShowOnline: '只显示在线',
             nodeSnapshot: '节点快照',
-            profileEyebrow: 'Profile',
-            publicProfile: '公开 Profile',
-            publicProfileEditor: '公开 Profile 编辑器',
+            profileEyebrow: '资料',
+            publicProfile: '公开资料',
+            publicProfileEditor: '公开资料编辑器',
             displayName: '显示名称',
             avatarUrl: '头像 URL',
             bio: '简介',
@@ -1978,7 +2321,7 @@
             livePreview: '实时预览',
             publicCard: '公开卡片',
             publishStatus: '发布状态',
-            publicProfilePreview: '公开 Profile 预览',
+            publicProfilePreview: '公开资料预览',
             networkEyebrow: '网络',
             connectionSummary: '连接摘要',
             quickActions: '快捷操作',
@@ -2006,14 +2349,14 @@
             networkModeRuntime: '网络模式（运行时）',
           },
           hints: {
-            publicDiscoverySwitch: '使用 Profile -> Public Enabled 作为唯一的公开可见性开关。',
+            publicDiscoverySwitch: '使用资料 -> Public Enabled 作为唯一的公开可见性开关。',
             discoverabilityRecommendation: '建议 2-32 个字符，以提升可发现性。',
             avatarOptional: '可选。如提供，必须是 http(s) URL。',
             tagsLimit: '最多 8 个标签，每个不超过 20 个字符。',
             publicEnabledHint: '这是发现与 relay 广播使用的主公开可见性开关。',
-            signedPublicProfileHint: '这是其他节点或 explorer 可以看到的已签名公开 Profile 视图。',
+            signedPublicProfileHint: '这是其他节点或 explorer 可以看到的已签名公开资料视图。',
             useTheseFirst: '优先使用这些操作。',
-            profileVisibilityManaged: 'Profile 可见性在 Profile 页面管理。',
+            profileVisibilityManaged: '资料可见性在资料页面管理。',
             checkingIntegration: '正在检查集成状态...',
             allIntegrationChecksPassed: '所有集成检查均已通过。',
           },
@@ -2036,9 +2379,12 @@
             tableStatus: '状态',
             tableUpdated: '更新时间',
             unnamed: '（未命名）',
-            onboardingNotice: '已连接 · mode={mode} · discoverable={discoverable} · 下一步：更新 Profile、开启 Public Enabled，并导出 social.md',
+            onboardingNotice: '已连接 · mode={mode} · discoverable={discoverable} · 下一步：更新资料、开启 Public Enabled，并导出 social.md',
             pillRunning: 'broadcast: 运行中',
             pillPaused: 'broadcast: 已暂停',
+            pageStatus: '第 {page} / {total} 页',
+            prevPage: '上一页',
+            nextPage: '下一页',
           },
           preview: {
             unnamedAgent: '（未命名代理）',
@@ -2131,9 +2477,9 @@
             unsavedChanges: '你有尚未保存的更改。',
             allChangesSaved: '所有更改都已保存。',
             fixValidation: '请先修复校验错误再保存。',
-            savingProfile: '正在保存 Profile...',
-            profileSaved: 'Profile 已保存',
-            profileReloaded: 'Profile 表单已重新加载',
+            savingProfile: '正在保存资料...',
+            profileSaved: '资料已保存',
+            profileReloaded: '资料表单已重新加载',
             exportingTemplate: '正在导出模板...',
             templateExported: '已按当前运行时导出模板。',
             templateCopied: '模板已复制到剪贴板。',
@@ -2161,7 +2507,7 @@
             avatarProtocol: '头像 URL 必须以 http:// 或 https:// 开头',
             tooManyTags: '标签过多（最多 8 个）。',
             tagTooLong: '每个标签必须不超过 20 个字符。',
-            leaveConfirm: '你有未保存的 Profile 更改，仍要离开吗？',
+            leaveConfirm: '你有未保存的资料更改，仍要离开吗？',
           },
         },
       };
@@ -2217,9 +2563,11 @@
         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('.sidebar-version__label', 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('pageBreadcrumb').textContent = t('pageMeta.overview.title');
+        document.getElementById('pageHeroTitle').textContent = t('pageMeta.overview.title');
+        document.getElementById('pageHeroBody').textContent = t('pageMeta.overview.body');
         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'));
@@ -2317,6 +2665,8 @@
       let logLevelFilter = 'all';
       let socialTemplate = '';
       let onlyShowOnline = false;
+      let agentsPage = 1;
+      const AGENTS_PAGE_SIZE = 10;
       const pageMeta = TRANSLATIONS[currentLocale].pageMeta || TRANSLATIONS[DEFAULT_LOCALE].pageMeta;
 
       function ago(ts) {
@@ -2330,6 +2680,14 @@
         if (!id) return '-';
         return `${id.slice(0, 10)}...${id.slice(-6)}`;
       }
+      function escapeHtml(value) {
+        return String(value ?? '')
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#39;');
+      }
       function toPrettyJson(obj) {
         try {
           return JSON.stringify(obj, null, 2);
@@ -2337,6 +2695,48 @@
           return String(obj);
         }
       }
+      function readUiCache(key) {
+        try {
+          const raw = localStorage.getItem(key);
+          return raw ? JSON.parse(raw) : null;
+        } catch {
+          return null;
+        }
+      }
+      function writeUiCache(key, value) {
+        try {
+          localStorage.setItem(key, JSON.stringify(value));
+        } catch {
+          // ignore cache write failures
+        }
+      }
+      function hydrateCachedShell() {
+        const overview = readUiCache('silicaclaw_ui_overview');
+        if (overview) {
+          if (overview.overviewCardsHtml) document.getElementById('overviewCards').innerHTML = overview.overviewCardsHtml;
+          if (overview.brandVersionText) document.getElementById('brandVersion').textContent = overview.brandVersionText;
+          if (overview.snapshotText) document.getElementById('snapshot').innerHTML = overview.snapshotText;
+          if (overview.heroModeText) document.getElementById('heroMode').textContent = overview.heroModeText;
+          if (overview.pillBroadcastText) document.getElementById('pillBroadcast').textContent = overview.pillBroadcastText;
+          if (overview.pillBroadcastClassName) document.getElementById('pillBroadcast').className = overview.pillBroadcastClassName;
+          if (overview.agentsCountHintText) document.getElementById('agentsCountHint').textContent = overview.agentsCountHintText;
+          if (overview.agentsWrapHtml) document.getElementById('agentsWrap').innerHTML = overview.agentsWrapHtml;
+        }
+        const network = readUiCache('silicaclaw_ui_network');
+        if (network) {
+          if (network.heroAdapterText) document.getElementById('heroAdapter').textContent = network.heroAdapterText;
+          if (network.heroRelayText) document.getElementById('heroRelay').textContent = network.heroRelayText;
+          if (network.heroRoomText) document.getElementById('heroRoom').textContent = network.heroRoomText;
+          if (network.pillAdapterText) document.getElementById('pillAdapter').textContent = network.pillAdapterText;
+        }
+        const social = readUiCache('silicaclaw_ui_social');
+        if (social) {
+          if (social.integrationStatusText) document.getElementById('integrationStatusBar').textContent = social.integrationStatusText;
+          if (social.integrationStatusClassName) document.getElementById('integrationStatusBar').className = social.integrationStatusClassName;
+          if (social.socialStatusLineText) document.getElementById('socialStatusLine').textContent = social.socialStatusLineText;
+          if (social.socialStatusSublineText) document.getElementById('socialStatusSubline').textContent = social.socialStatusSublineText;
+        }
+      }
       function toast(msg) {
         const t = document.getElementById('toast');
         t.textContent = msg;
@@ -2519,31 +2919,98 @@
       }
 
       async function refreshOverview() {
-        const [overview, discovered] = await Promise.all([api('/api/overview'), api('/api/search?q=')]);
-        const o = overview.data;
-        const all = discovered.data || [];
-        const d = onlyShowOnline ? all.filter((agent) => agent.online) : all;
+        const [overviewRes, discoveredRes, peerRes] = await Promise.allSettled([
+          api('/api/overview'),
+          api('/api/search?q='),
+          api('/api/peers'),
+        ]);
+        if (overviewRes.status !== 'fulfilled') {
+          throw overviewRes.reason;
+        }
+        const o = overviewRes.value.data;
+        const allProfiles = discoveredRes.status === 'fulfilled' ? (discoveredRes.value.data || []) : [];
+        const peers = peerRes.status === 'fulfilled' ? (peerRes.value.data || {}) : {};
+        const peerItems = peers.items || [];
+        const mergedById = new Map();
+
+        for (const agent of allProfiles) {
+          mergedById.set(agent.agent_id, agent);
+        }
+
+        for (const peer of peerItems) {
+          const existing = mergedById.get(peer.peer_id);
+          if (existing) {
+            if (peer.status && !existing.online) {
+              existing.online = peer.status === 'online';
+            }
+            if (peer.last_seen_at && (!existing.updated_at || peer.last_seen_at > existing.updated_at)) {
+              existing.updated_at = peer.last_seen_at;
+            }
+            continue;
+          }
+          mergedById.set(peer.peer_id, {
+            agent_id: peer.peer_id,
+            display_name: shortId(peer.peer_id),
+            online: peer.status === 'online',
+            updated_at: peer.last_seen_at || peer.first_seen_at || 0,
+          });
+        }
 
-        document.getElementById('overviewCards').innerHTML = [
-          [t('overview.discovered'), o.discovered_count],
-          [t('overview.online'), o.online_count],
-          [t('overview.offline'), o.offline_count],
+        const all = Array.from(mergedById.values());
+        const d = onlyShowOnline ? all.filter((agent) => agent.online) : all;
+        const totalAgentPages = Math.max(1, Math.ceil(d.length / AGENTS_PAGE_SIZE));
+        agentsPage = Math.min(Math.max(1, agentsPage), totalAgentPages);
+        const pagedAgents = d.slice((agentsPage - 1) * AGENTS_PAGE_SIZE, agentsPage * AGENTS_PAGE_SIZE);
+        const discoveredCount = Math.max(Number(o.discovered_count || 0), Number(peers.total || 0), all.length);
+        const onlineCount = Math.max(Number(o.online_count || 0), Number(peers.online || 0), all.filter((agent) => agent.online).length);
+        const offlineCount = Math.max(0, discoveredCount - onlineCount);
+
+        const overviewCardsHtml = [
+          [t('overview.discovered'), discoveredCount],
+          [t('overview.online'), onlineCount],
+          [t('overview.offline'), offlineCount],
           [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('overviewCards').innerHTML = overviewCardsHtml;
 
-        document.getElementById('brandVersion').textContent = o.app_version ? `v${o.app_version}` : '-';
+        const brandVersionText = o.app_version ? `v${o.app_version}` : '-';
+        document.getElementById('brandVersion').textContent = brandVersionText;
 
-        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 || '-';
+        const snapshotHtml = `
+          <div class="snapshot-card">
+            <div class="snapshot-card__identity">
+              <div class="snapshot-card__label">Current Node</div>
+              <div class="snapshot-card__title">${escapeHtml(o.display_name || t('overview.unnamed'))}</div>
+              <div class="snapshot-card__subtle mono">${escapeHtml(o.agent_id || '-')}</div>
+            </div>
+            <div class="snapshot-card__grid">
+              <div class="snapshot-card__item">
+                <div class="label">Version</div>
+                <span class="value-inline">${escapeHtml(o.app_version || '-')}</span>
+              </div>
+              <div class="snapshot-card__item">
+                <div class="label">Public</div>
+                <span class="value-inline">${o.public_enabled ? t('common.on') : t('common.off')}</span>
+              </div>
+              <div class="snapshot-card__item">
+                <div class="label">Broadcast</div>
+                <span class="value-inline">${o.broadcast_enabled ? t('common.on') : t('common.off')}</span>
+              </div>
+              <div class="snapshot-card__item">
+                <div class="label">Last Broadcast</div>
+                <span class="value-inline">${escapeHtml(ago(o.last_broadcast_at))}</span>
+              </div>
+            </div>
+          </div>
+        `;
+        document.getElementById('snapshot').innerHTML = snapshotHtml;
+        const heroModeText = o.social?.network_mode || '-';
+        document.getElementById('heroMode').textContent = heroModeText;
 
-        document.getElementById('pillBroadcast').textContent = o.broadcast_enabled ? t('overview.pillRunning') : t('overview.pillPaused');
-        document.getElementById('pillBroadcast').className = `pill ${o.broadcast_enabled ? 'ok' : 'warn'}`;
+        const pillBroadcastText = o.broadcast_enabled ? t('overview.pillRunning') : t('overview.pillPaused');
+        const pillBroadcastClassName = `pill ${o.broadcast_enabled ? 'ok' : 'warn'}`;
+        document.getElementById('pillBroadcast').textContent = pillBroadcastText;
+        document.getElementById('pillBroadcast').className = pillBroadcastClassName;
 
         const init = o.init_state || {};
         const onboarding = o.onboarding || {};
@@ -2566,27 +3033,88 @@
         }
 
         if (!d.length) {
-          document.getElementById('agentsCountHint').textContent = t('overview.agentsZero');
-          document.getElementById('agentsWrap').innerHTML = `<div class="label">${t('overview.noDiscoveredAgents')}</div>`;
+          const agentsCountHintText = t('overview.agentsZero');
+          const agentsWrapHtml = `<div class="label">${t('overview.noDiscoveredAgents')}</div>`;
+          document.getElementById('agentsCountHint').textContent = agentsCountHintText;
+          document.getElementById('agentsWrap').innerHTML = agentsWrapHtml;
+          writeUiCache('silicaclaw_ui_overview', {
+            overviewCardsHtml,
+            brandVersionText,
+            snapshotText: snapshotHtml,
+            heroModeText,
+            pillBroadcastText,
+            pillBroadcastClassName,
+            agentsCountHintText,
+            agentsWrapHtml,
+          });
         } else {
-          document.getElementById('agentsCountHint').textContent = onlyShowOnline
+          const agentsCountHintText = onlyShowOnline
             ? 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>${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 || t('overview.unnamed')}</td>
-                    <td class="mono">${shortId(a.agent_id)}</td>
-                    <td class="${a.online ? 'online' : 'offline'}">${a.online ? t('overview.online') : t('overview.offline')}</td>
-                    <td>${ago(a.updated_at)}</td>
-                  </tr>
-                `).join('')}
-              </tbody>
-            </table>
+          const renderAvatar = (agent) => {
+            const avatar = String(agent.avatar_url || '').trim();
+            if (avatar) {
+              return `<img class="agent-card__avatar" src="${avatar}" alt="${escapeHtml(agent.display_name || 'agent')}" loading="lazy" />`;
+            }
+            const label = String(agent.display_name || agent.agent_id || '?').trim();
+            const initial = escapeHtml((label[0] || '?').toUpperCase());
+            return `<div class="agent-card__avatar-fallback">${initial}</div>`;
+          };
+          const renderTags = (agent) => {
+            const tags = Array.isArray(agent.tags) ? agent.tags.slice(0, 4) : [];
+            if (!tags.length) return '';
+            return `<div class="agent-card__tags">${tags.map((tag) => `<span class="tag-chip">${escapeHtml(String(tag))}</span>`).join('')}</div>`;
+          };
+          const agentsWrapHtml = `
+            <div class="agent-list">
+              ${pagedAgents.map((a) => `
+                <div class="agent-card">
+                  ${renderAvatar(a)}
+                  <div class="agent-card__main">
+                    <div class="agent-card__row">
+                      <div class="agent-card__name">${escapeHtml(a.display_name || t('overview.unnamed'))}</div>
+                      <div class="agent-card__id mono">${shortId(a.agent_id)}</div>
+                    </div>
+                    <div class="agent-card__bio">${escapeHtml(a.bio || t('preview.noBioYet'))}</div>
+                    ${renderTags(a)}
+                  </div>
+                  <div class="${a.online ? 'online' : 'offline'}">${a.online ? t('overview.online') : t('overview.offline')}</div>
+                  <div class="agent-card__meta">
+                    <div class="agent-card__updated">${ago(a.updated_at)}</div>
+                  </div>
+                </div>
+              `).join('')}
+              <div class="agent-list__footer">
+                <div class="agent-list__page">${t('overview.pageStatus', { page: String(agentsPage), total: String(totalAgentPages) })}</div>
+                <div class="agent-list__pager">
+                  <button class="secondary" type="button" id="agentsPrevPageBtn" ${agentsPage <= 1 ? 'disabled' : ''}>${t('overview.prevPage')}</button>
+                  <button class="secondary" type="button" id="agentsNextPageBtn" ${agentsPage >= totalAgentPages ? 'disabled' : ''}>${t('overview.nextPage')}</button>
+                </div>
+              </div>
+            </div>
           `;
+          document.getElementById('agentsCountHint').textContent = agentsCountHintText;
+          document.getElementById('agentsWrap').innerHTML = agentsWrapHtml;
+          document.getElementById('agentsPrevPageBtn')?.addEventListener('click', async () => {
+            if (agentsPage <= 1) return;
+            agentsPage -= 1;
+            await refreshOverview();
+          });
+          document.getElementById('agentsNextPageBtn')?.addEventListener('click', async () => {
+            if (agentsPage >= totalAgentPages) return;
+            agentsPage += 1;
+            await refreshOverview();
+          });
+          writeUiCache('silicaclaw_ui_overview', {
+            overviewCardsHtml,
+            brandVersionText,
+            snapshotText: snapshotHtml,
+            heroModeText,
+            pillBroadcastText,
+            pillBroadcastClassName,
+            agentsCountHintText,
+            agentsWrapHtml,
+          });
         }
       }
 
@@ -2627,7 +3155,7 @@
         const msg = s.message_counters || {};
         const p = s.peer_counters || {};
         const a = s.adapter_stats || {};
-        const t = s.adapter_transport_stats || {};
+        const transportStats = s.adapter_transport_stats || {};
         const d = s.adapter_discovery_stats || {};
         const dx = s.adapter_diagnostics_summary || {};
         const ac = s.adapter_config || c.adapter_config || {};
@@ -2636,6 +3164,12 @@
         document.getElementById('heroRoom').textContent = dx.room || '-';
 
         document.getElementById('pillAdapter').textContent = `adapter: ${c.adapter}`;
+        writeUiCache('silicaclaw_ui_network', {
+          heroAdapterText: c.adapter || '-',
+          heroRelayText: dx.signaling_url || '-',
+          heroRoomText: dx.room || '-',
+          pillAdapterText: `adapter: ${c.adapter}`,
+        });
         document.getElementById('networkCards').innerHTML = [
           [t('labels.adapter'), c.adapter],
           [t('labels.namespace'), c.namespace || '-'],
@@ -2689,7 +3223,7 @@
           `dropped_namespace_mismatch: ${a.dropped_namespace_mismatch ?? '-'}`,
           `received_validated: ${a.received_validated ?? '-'}`,
           `send_errors: ${a.send_errors ?? '-'}`,
-          `transport_send_errors: ${t.send_errors ?? '-'}`,
+          `transport_send_errors: ${transportStats.send_errors ?? '-'}`,
           `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 ?? '-'}`,
@@ -2811,20 +3345,35 @@
       }
 
       async function refreshSocial() {
-        const [socialRes, summaryRes, statusRes] = await Promise.all([
+        const [socialRes, summaryRes, statusRes, networkCfgRes] = await Promise.all([
           api('/api/social/config'),
           api('/api/social/integration-summary'),
           api('/api/integration/status'),
+          api('/api/network/config'),
         ]);
         const social = socialRes.data || {};
         const summary = summaryRes.data || {};
         const status = statusRes.data || {};
+        const networkCfg = networkCfgRes.data || {};
         const runtime = social.runtime || {};
         const config = social.social_config || {};
         const network = config.network || {};
         const runtimeNetwork = runtime.resolved_network || {};
+        const effectiveAdapterExtra = networkCfg.adapter_extra || {};
+        const effectiveMode = networkCfg.mode || status.network_mode || summary.current_network_mode || runtimeNetwork.mode || network.mode || '-';
+        const effectiveAdapter = networkCfg.adapter || runtimeNetwork.adapter || summary.current_adapter || '-';
+        const effectiveNamespace = networkCfg.namespace || runtimeNetwork.namespace || summary.current_namespace || '-';
+        const effectiveRoom = effectiveAdapterExtra.room || runtimeNetwork.room || network.room || '-';
+        const effectiveRelay = effectiveAdapterExtra.signaling_url || runtimeNetwork.signaling_url || network.signaling_url || '-';
+        const effectiveSignalingEndpoints = effectiveAdapterExtra.signaling_endpoints || runtimeNetwork.signaling_urls || network.signaling_urls || [];
+        const effectiveBootstrapSources = effectiveAdapterExtra.bootstrap_sources || runtimeNetwork.bootstrap_sources || [];
+        const effectiveSeedPeersCount = typeof effectiveAdapterExtra.seed_peers_count === 'number'
+          ? effectiveAdapterExtra.seed_peers_count
+          : Array.isArray(runtimeNetwork.seed_peers)
+            ? runtimeNetwork.seed_peers.length
+            : 0;
         const discoverable = status.discoverable === true;
-        const mode = status.network_mode || summary.current_network_mode || network.mode || runtimeNetwork.mode || '-';
+        const mode = effectiveMode;
         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');
 
@@ -2838,6 +3387,14 @@
           mode,
           public: status.public_enabled ? t('common.on') : t('common.off'),
         });
+        const brandStatusDot = document.getElementById('brandStatusDot');
+        brandStatusDot.className = `sidebar-version__status ${status.connected_to_silicaclaw ? 'ok' : 'warn'}`;
+        writeUiCache('silicaclaw_ui_social', {
+          integrationStatusText: bar.textContent,
+          integrationStatusClassName: bar.className,
+          socialStatusLineText: summaryLine,
+          socialStatusSublineText: namespaceText,
+        });
         const reasons = [];
         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 }));
@@ -2870,17 +3427,27 @@
         ].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 = [
-          [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('labels.adapter'), effectiveAdapter],
+          [t('social.namespace'), effectiveNamespace],
+          [t('labels.room'), effectiveRoom],
+          [t('network.signalingEndpoints'), effectiveSignalingEndpoints.length || 0],
+          [t('network.bootstrapSources'), effectiveBootstrapSources.length || 0],
+          [t('network.seedPeers'), effectiveSeedPeersCount],
           [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,
+          effective_network: {
+            mode: effectiveMode,
+            adapter: effectiveAdapter,
+            namespace: effectiveNamespace,
+            relay: effectiveRelay,
+            room: effectiveRoom,
+            signaling_endpoints: effectiveSignalingEndpoints,
+            bootstrap_sources: effectiveBootstrapSources,
+            seed_peers_count: effectiveSeedPeersCount,
+          },
         });
 
         document.getElementById('socialSourceWrap').textContent = toPrettyJson({
@@ -2928,18 +3495,18 @@
       }
 
       async function refreshAll() {
-        try {
-          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 : t('common.unknownError'), 'error');
+        const tasks = [refreshOverview(), refreshNetwork(), refreshSocial(), refreshPublicProfilePreview()];
+        if (activeTab === 'network') {
+          tasks.push(refreshPeers(), refreshDiscovery(), refreshLogs());
+        }
+        const shouldRefreshProfile = !(activeTab === 'profile' && profileDirty);
+        if (shouldRefreshProfile) {
+          tasks.push(refreshProfile());
+        }
+        const results = await Promise.allSettled(tasks);
+        const firstError = results.find((result) => result.status === 'rejected');
+        if (firstError && firstError.status === 'rejected') {
+          setFeedback('networkFeedback', firstError.reason instanceof Error ? firstError.reason.message : t('common.unknownError'), 'error');
         }
       }
 
@@ -3093,6 +3660,7 @@
       });
       document.getElementById('onlyOnlineToggle').addEventListener('change', async (event) => {
         onlyShowOnline = Boolean(event.target?.checked);
+        agentsPage = 1;
         await refreshOverview();
       });
       document.getElementById('refreshLogsBtn').addEventListener('click', async () => {
@@ -3204,6 +3772,7 @@
       }
 
       applyTheme(localStorage.getItem('silicaclaw_theme_mode') || 'dark');
+      hydrateCachedShell();
       refreshAll();
       exportSocialTemplate().catch(() => {});
       setInterval(refreshAll, 4000);