fix(ui): tone down hover/click control shadows; show dev build identity in status tooltip (#104215)

* fix(ui): tone down hover/click control shadows via theme tokens

* feat(ui): show dev build identity in gateway status tooltip

ui/src/app/settings.ts

@@ -319,7 +319,7 @@ export function resolveApplicationStartupSettings(
   };
 }
 
-function isViteDevPage(): boolean {
+export function isViteDevPage(): boolean {
   if (typeof document === "undefined") {
     return false;
   }

ui/src/components/app-sidebar.ts

@@ -23,10 +23,12 @@ import {
   type ApplicationNavigationOptions,
 } from "../app/context.ts";
 import { controlUiPublicAssetPath } from "../app/public-assets.ts";
+import { isViteDevPage } from "../app/settings.ts";
+import type { ThemeMode } from "../app/theme.ts";
 import "./session-menu.ts";
 import "./theme-mode-toggle.ts";
 import "./tooltip.ts";
-import type { ThemeMode } from "../app/theme.ts";
+import { CONTROL_UI_BUILD_INFO } from "../build-info.ts";
 import { t } from "../i18n/index.ts";
 import { editorOpenUrl } from "../lib/editor-links.ts";
 import { buildExternalLinkRel, EXTERNAL_LINK_TARGET } from "../lib/external-link.ts";
@@ -125,6 +127,24 @@ const PALETTE_SHORTCUT = /Mac|iP(hone|ad|od)/i.test(globalThis.navigator?.platfo
   ? "⌘K"
   : "Ctrl K";
 
+// Dev-server pages get the artifact identity in the status tooltip so devs can
+// tell which checkout built the UI they are looking at; release builds keep the
+// plain status line (About/Settings already expose build details there).
+const DEV_BUILD_TOOLTIP_LINE = isViteDevPage()
+  ? [
+      [
+        CONTROL_UI_BUILD_INFO.version ? `v${CONTROL_UI_BUILD_INFO.version}` : null,
+        CONTROL_UI_BUILD_INFO.commit?.slice(0, 12) ?? null,
+      ]
+        .filter((part): part is string => part !== null)
+        .join(" · "),
+      // Trim to minutes so the timestamp stays one tooltip line.
+      CONTROL_UI_BUILD_INFO.builtAt ? `${CONTROL_UI_BUILD_INFO.builtAt.slice(0, 16)}Z` : "",
+    ]
+      .filter(Boolean)
+      .join("\n")
+  : "";
+
 function loadStoredSidebarSessionsGrouping(): SidebarSessionsGrouping {
   return normalizeSidebarSessionsGrouping(
     getSafeLocalStorage()?.getItem(SIDEBAR_SESSION_GROUPING_STORAGE_KEY),
@@ -1883,6 +1903,9 @@ class AppSidebar extends OpenClawLightDomContentsElement {
     const gatewayStatus = t("chat.gatewayStatus", {
       status: this.connected ? t("common.online") : t("common.offline"),
     });
+    const gatewayStatusTooltip = DEV_BUILD_TOOLTIP_LINE
+      ? `${gatewayStatus}\n${DEV_BUILD_TOOLTIP_LINE}`
+      : gatewayStatus;
     const settingsActive =
       this.activeRouteId !== undefined && isSettingsNavigationRoute(this.activeRouteId);
     const settingsTooltip = `${titleForRoute("config")} (⇧⌘,)`;
@@ -1909,7 +1932,7 @@ class AppSidebar extends OpenClawLightDomContentsElement {
               .gatewayVersion=${this.gatewayVersion}
             ></openclaw-lobster-pet>
             <div class="sidebar-footer-bar">
-              <openclaw-tooltip .content=${gatewayStatus}>
+              <openclaw-tooltip .content=${gatewayStatusTooltip}>
                 <span
                   class="sidebar-status__dot ${this.connected
                     ? "sidebar-connection-status--online"

ui/src/components/browser/browser-panel.styles.ts

@@ -255,7 +255,7 @@ export const browserPanelStyles = css`
     border-radius: 8px;
     border: 1px solid var(--border, #262b34);
     background: var(--bg, #0e1015);
-    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
+    box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.3));
     font-size: 12px;
     pointer-events: none;
   }

ui/src/styles/chat/layout.css

@@ -208,7 +208,7 @@ openclaw-chat-page {
   border-radius: var(--radius-lg);
   background: color-mix(in srgb, var(--popover) 96%, var(--card));
   color: var(--popover-foreground);
-  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.28);
+  box-shadow: var(--shadow-lg);
   animation: fade-in 150ms var(--ease-out);
 }
 
@@ -1623,7 +1623,7 @@ openclaw-chat-page {
   border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
   border-radius: var(--radius-lg);
   background: color-mix(in srgb, var(--bg-elevated) 94%, var(--card));
-  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
+  box-shadow: var(--shadow-lg);
   overflow-y: auto;
 }
 
@@ -2256,7 +2256,7 @@ openclaw-chat-page {
   border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
   border-radius: var(--radius-md);
   background: color-mix(in srgb, var(--bg-elevated) 96%, var(--card));
-  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-md);
   overflow-y: auto;
 }
 
@@ -3411,7 +3411,7 @@ openclaw-chat-page {
   border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
   border-radius: var(--radius-md);
   background: color-mix(in srgb, var(--bg-elevated) 96%, var(--card));
-  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-md);
   overflow-y: auto;
 }
 

ui/src/styles/chat/sidebar.css

@@ -1035,7 +1035,7 @@
   border: 1px solid color-mix(in srgb, var(--border-strong) 78%, transparent);
   border-radius: var(--radius-md);
   background: var(--bg-elevated);
-  box-shadow: 0 12px 28px color-mix(in srgb, black 24%, transparent);
+  box-shadow: var(--shadow-md);
 }
 
 .sidebar-file-view__editor-item {

ui/src/styles/components.css

@@ -903,9 +903,7 @@
   border: 1px solid color-mix(in srgb, var(--border-strong) 84%, transparent);
   border-radius: var(--radius-md);
   background: color-mix(in srgb, var(--card) 94%, black 6%);
-  box-shadow:
-    0 10px 28px rgba(0, 0, 0, 0.24),
-    0 0 0 1px rgba(255, 255, 255, 0.04);
+  box-shadow: var(--shadow-md);
   color: var(--text);
   font-size: 12px; /* was 11px */
   font-weight: 500;
@@ -952,9 +950,7 @@
   border: 1px solid color-mix(in srgb, var(--border-strong) 88%, transparent);
   border-radius: var(--radius-lg);
   background: color-mix(in srgb, var(--card) 96%, var(--bg) 4%);
-  box-shadow:
-    0 22px 54px rgba(0, 0, 0, 0.34),
-    0 0 0 1px rgba(255, 255, 255, 0.035);
+  box-shadow: var(--shadow-lg);
   color: var(--text);
   font-family: var(--font-body);
   pointer-events: none;