UI: polish dashboard — agents overview, chat toolbar, debug & login UX (#23553)

* UI: polish dashboard — agents overview, chat toolbar, debug simplification, login UX

* fix(ui): restore chat draft ordering, remove extra toolbar buttons

* UI: replace agent avatar fallback with lobster emoji

* style(ui): update layout styles for sidebar and shell, adjusting navigation widths for improved responsiveness

* feat(ui): implement sidebar resizing functionality and enhance navigation with new search and sorting features for sessions

* fix(ui): update references from ClawDash to OpenClaw in checklist and dashboard header

* style(ui): adjust sidebar minimum width and add responsive behavior for narrow states

* UI: minimal chat agent bar — remove sessions panel, strip chrome

* style(ui): update light theme colors and add ambient gradient for Luxe Cream & Coral

* UI: replace sparkle with OpenClaw lobster logo in chat

* style(ui): rename theme toggle to theme select and update related styles; adjust layout and spacing for agents and chat components

* style(ui): enhance agents panel layout with grid system, update toolbar styles, and refine usage chart presentation

* style(ui): adjust sessions table column width and refine agent model fields layout for better responsiveness

* style(ui): refine component styles for improved layout and responsiveness; adjust gradients, spacing, and element alignment across chat and agent interfaces

* ui: align chat-controls session container

* ui: enlarge agent controls for better touch targets

* ui: pass basePath to avatar renderer in grouped chat

* ui: formatting fixups from pre-commit hooks

* style(ui): update layout and spacing for chat controls; enhance select component styles and improve responsiveness

* UI: tighten chat header spacing and icon sizes

* UI: widen chat attachment gap

* style(ui): refine chat header layout and adjust icon sizes for improved visual consistency

* style(ui): enhance component styles and layout; introduce new inline field styles, update overview card design, and improve session filters for better usability

* style(ui): improve CSS formatting and consistency across components; adjust gradients, spacing, and layout for better readability and visual appeal

* fix(ui): correct rendering of empty state in overview cards by replacing 'nothing' with an empty string

ui/src/styles/layout.css

@@ -3,10 +3,10 @@
    =========================================== */
 
 .shell {
-  --shell-pad: 16px;
-  --shell-gap: 16px;
-  --shell-nav-width: 240px;
-  --shell-topbar-height: 62px;
+  --shell-pad: 12px;
+  --shell-gap: 12px;
+  --shell-nav-width: 220px;
+  --shell-topbar-height: 52px;
   --shell-focus-duration: 200ms;
   --shell-focus-ease: var(--ease-out);
   height: 100vh;
@@ -80,8 +80,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 12px;
-  padding: 0 20px;
+  gap: 10px;
+  padding: 0 16px;
   height: var(--shell-topbar-height);
   background: var(--topbar-bg);
   backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
@@ -102,7 +102,7 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 0.82rem;
+  font-size: 0.8rem;
   min-width: 0;
 }
 
@@ -142,17 +142,17 @@
 .topbar-search {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  min-width: 200px;
-  max-width: 340px;
+  gap: 6px;
+  padding: 5px 10px;
+  min-width: 160px;
+  max-width: 280px;
   flex: 1;
-  height: 34px;
+  height: 30px;
   border: 1px solid var(--border);
   border-radius: var(--radius-full);
   background: color-mix(in srgb, var(--secondary) 60%, transparent);
   color: var(--muted);
-  font-size: 13px;
+  font-size: 12px;
   font-family: var(--font-body);
   cursor: pointer;
   transition:
@@ -220,10 +220,10 @@
 .topbar-connection {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
+  gap: 5px;
+  padding: 3px 8px;
   border-radius: var(--radius-full);
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 500;
   color: var(--danger);
   background: var(--danger-subtle);
@@ -262,10 +262,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
-  min-width: 28px;
-  height: 28px;
-  padding: 0 4px;
+  width: 26px;
+  height: 26px;
+  padding: 0;
   border: 1px solid transparent;
   border-radius: var(--radius);
   background: none;
@@ -279,8 +278,8 @@
 }
 
 .topbar-redact svg {
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
 }
 
 .topbar-redact:hover {
@@ -290,45 +289,40 @@
 }
 
 .topbar-redact--active {
-  border-radius: var(--radius-full);
-  padding: 4px 10px;
   color: var(--warn);
-  background: var(--warn-subtle);
 }
 
 .topbar-redact--active:hover {
   color: var(--warn);
-  background: color-mix(in srgb, var(--warn-subtle) 80%, var(--warn) 10%);
+  background: var(--warn-subtle);
+  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
 }
 
-.topbar-redact__label {
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  line-height: 1;
-  white-space: nowrap;
-}
+/* Topbar theme select sizing */
 
-/* Topbar theme toggle sizing */
-
-.topbar-status .theme-toggle {
-  height: 30px;
-}
-
-.topbar-status .theme-btn svg {
-  width: 13px;
-  height: 13px;
+.topbar-status .theme-select {
+  height: 26px;
+  min-width: 82px;
+  font-size: 11px;
 }
 
 /* ===========================================
    Navigation Sidebar
    =========================================== */
 
-.sidebar {
+.shell-nav {
   grid-area: nav;
   display: flex;
   flex-direction: column;
+  min-height: 0;
+  position: relative;
+}
+
+.sidebar {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: none;
@@ -347,13 +341,9 @@
   display: none;
 }
 
-.shell--chat-focus .sidebar {
-  width: 0;
-  padding: 0;
-  border-width: 0;
-  overflow: hidden;
-  pointer-events: none;
-  opacity: 0;
+.shell--chat-focus .sidebar,
+.shell--chat-focus .sidebar-resizer {
+  display: none;
 }
 
 .sidebar--collapsed {
@@ -395,6 +385,21 @@
   border-left: 0;
 }
 
+.sidebar--collapsed .nav-item--active::before {
+  background:
+    radial-gradient(
+      ellipse 120% 28px at 50% -2px,
+      color-mix(in srgb, var(--accent) 38%, transparent) 0%,
+      color-mix(in srgb, var(--accent) 14%, transparent) 40%,
+      transparent 100%
+    ),
+    radial-gradient(
+      ellipse 60% 100% at -4px 50%,
+      color-mix(in srgb, var(--accent) 28%, transparent) 0%,
+      transparent 70%
+    );
+}
+
 .sidebar--collapsed .sidebar-footer {
   display: flex;
   flex-direction: column;
@@ -409,24 +414,54 @@
   height: 44px;
 }
 
+/* Sidebar resizer handle */
+.sidebar-resizer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  z-index: 10;
+  flex-shrink: 0;
+  /* Hit area extends beyond visible handle for easier grabbing */
+  margin-right: -3px;
+}
+
+.sidebar-resizer::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 20%;
+  bottom: 20%;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--glass-border);
+  transition: background 0.15s ease;
+}
+
+.sidebar-resizer:hover::before,
+.sidebar-resizer:active::before {
+  background: var(--glass-border-hover);
+}
+
 /* Sidebar header (brand + collapse) */
 .sidebar-header {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 10px 8px;
-  gap: 0;
+  gap: 8px;
   flex-shrink: 0;
   min-height: 54px;
 }
 
 .sidebar-brand {
-  flex: 2;
+  flex: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
   gap: 10px;
-  min-width: 0;
-
   max-height: 28px;
 
   padding-left: 10px;
@@ -452,13 +487,19 @@
   line-height: 1.1;
   color: var(--text-strong);
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 }
 
 .sidebar-collapse-btn {
-  flex: 1;
+  flex: 0 0 32px;
+  width: 32px;
   height: 32px;
 
   @media (max-width: 1100px) {
+    flex: 0 0 28px;
+    width: 28px;
     height: 28px;
   }
 
@@ -595,6 +636,7 @@
   border-radius: var(--radius-md);
   border: 1px solid transparent;
   background: transparent;
+  overflow: hidden;
   color: var(--muted);
   cursor: pointer;
   text-decoration: none;
@@ -667,6 +709,33 @@
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
 }
 
+.nav-item--active::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(
+    ellipse 28px 120% at -2px 50%,
+    color-mix(in srgb, var(--accent) 38%, transparent) 0%,
+    color-mix(in srgb, var(--accent) 14%, transparent) 40%,
+    transparent 100%
+  );
+  opacity: 0;
+  animation: nav-glow-in 0.4s ease-out 0.05s forwards;
+  pointer-events: none;
+}
+
+@keyframes nav-glow-in {
+  from {
+    opacity: 0;
+    transform: translateX(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
 .nav-item--active .nav-item__icon {
   opacity: 1;
   color: var(--accent);
@@ -680,11 +749,17 @@
   margin-top: auto;
 }
 
+.sidebar-footer__docs-block {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
 .sidebar-version {
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 6px 10px;
+  justify-content: flex-start;
+  padding: 2px 12px 6px;
 }
 
 .sidebar-version__text {
@@ -708,7 +783,7 @@
 
 .content {
   grid-area: content;
-  padding: 14px 18px 36px;
+  padding: 12px 14px 24px;
   display: block;
   min-height: 0;
   overflow-y: auto;
@@ -716,13 +791,13 @@
 }
 
 .content > * + * {
-  margin-top: 24px;
+  margin-top: 18px;
 }
 
 .content--chat {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 2px;
   overflow: hidden;
   padding-bottom: 0;
 }
@@ -734,10 +809,12 @@
 /* Content header */
 .content-header {
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  padding: 2px 0;
+  gap: 10px;
+  height: 36px;
+  min-height: 36px;
+  padding: 0;
   overflow: hidden;
   transform-origin: top center;
   transition:
@@ -745,30 +822,30 @@
     transform var(--shell-focus-duration) var(--shell-focus-ease),
     max-height var(--shell-focus-duration) var(--shell-focus-ease),
     padding var(--shell-focus-duration) var(--shell-focus-ease);
-  max-height: 64px;
+  max-height: 36px;
 }
 
 .shell--chat-focus .content-header {
   opacity: 0;
   transform: translateY(-8px);
-  max-height: 0px;
+  max-height: 0;
   padding: 0;
   pointer-events: none;
 }
 
 .page-title {
-  font-size: 22px;
+  font-size: 18px;
   font-weight: 600;
   letter-spacing: -0.03em;
-  line-height: 1.2;
+  line-height: 1.25;
   color: var(--text-strong);
 }
 
 .page-sub {
   color: var(--muted);
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 400;
-  margin-top: 2px;
+  margin-top: 1px;
   letter-spacing: -0.01em;
 }
 
@@ -783,10 +860,13 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 10px;
 }
 
 .content--chat .content-header > div:first-child {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   text-align: left;
 }
 
@@ -796,6 +876,66 @@
 
 .content--chat .chat-controls {
   flex-shrink: 0;
+  align-items: center;
+  align-content: center;
+}
+
+/* Chat controls in header — uniform 32px height across all controls */
+.content-header .btn--icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 !important;
+}
+
+.content-header .btn--icon svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.content-header .chat-controls__session {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  min-width: 0;
+}
+
+.content-header .chat-controls__session select {
+  height: 32px;
+  line-height: 1;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  padding: 0 28px 0 10px;
+  background-position: right 8px center;
+  border-radius: var(--radius-md);
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.content-header .chat-controls__separator {
+  width: 1px;
+  height: 32px;
+  background: var(--border);
+  font-size: 0;
+  color: transparent;
+  overflow: hidden;
+  align-self: center;
+  flex-shrink: 0;
+  margin: 0 4px;
+}
+
+.content-header .chat-controls__thinking {
+  height: 32px;
+  min-height: 32px;
+  align-items: center;
+  padding: 0 10px;
+  font-size: 12px;
 }
 
 /* ===========================================
@@ -804,7 +944,7 @@
 
 .grid {
   display: grid;
-  gap: 20px;
+  gap: 14px;
 }
 
 .grid-cols-2 {
@@ -817,32 +957,32 @@
 
 .stat-grid {
   display: grid;
-  gap: 14px;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 10px;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
 }
 
 .note-grid {
   display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
 .row {
   display: flex;
-  gap: 12px;
+  gap: 10px;
   align-items: center;
 }
 
 .stack {
   display: grid;
-  gap: 12px;
+  gap: 10px;
   grid-template-columns: minmax(0, 1fr);
 }
 
 .filters {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 12px;
   align-items: center;
 }
 
@@ -852,58 +992,14 @@
 
 @media (max-width: 1100px) {
   .shell {
-    --shell-pad: 12px;
-    --shell-gap: 12px;
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto 1fr;
-    grid-template-areas:
-      "topbar"
-      "nav"
-      "content";
-  }
-
-  .sidebar {
-    position: static;
-    max-height: none;
-    display: flex;
-    flex-direction: row;
-    gap: 6px;
-    overflow-x: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-
-  .sidebar-header {
-    display: none;
-  }
-
-  .sidebar-footer {
-    display: none;
-  }
-
-  .sidebar-nav {
-    display: flex;
-    flex-direction: row;
-    gap: 6px;
-    padding: 10px 14px;
-    overflow-x: auto;
-  }
-
-  .nav-group {
-    grid-auto-flow: column;
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-    margin-bottom: 0;
-  }
-
-  .grid-cols-2,
-  .grid-cols-3 {
-    grid-template-columns: 1fr;
+    --shell-pad: 10px;
+    --shell-gap: 10px;
+    --shell-nav-width: 200px;
   }
 
   .topbar {
-    position: static;
-    padding: 12px 14px;
-    gap: 10px;
+    padding: 10px 12px;
+    gap: 8px;
   }
 
   .topbar-search__kbd {
@@ -914,6 +1010,30 @@
     flex-wrap: nowrap;
   }
 
+  .content-header {
+    height: 36px;
+    min-height: 36px;
+    max-height: 36px;
+    padding: 0;
+  }
+
+  .page-sub {
+    display: none;
+  }
+
+  .content {
+    padding: 10px 12px 20px;
+  }
+
+  .content > * + * {
+    margin-top: 14px;
+  }
+
+  .grid-cols-2,
+  .grid-cols-3 {
+    grid-template-columns: 1fr;
+  }
+
   .table-head,
   .table-row {
     grid-template-columns: 1fr;