From 34a84722747301fad8382a96d2ca7025cd1441dc Mon Sep 17 00:00:00 2001 From: Peter Steinberger Date: Sat, 11 Jul 2026 00:13:36 -0700 Subject: [PATCH] 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 | 2 +- ui/src/components/app-sidebar.ts | 27 +++++++++++++++++-- .../browser/browser-panel.styles.ts | 2 +- ui/src/styles/chat/layout.css | 8 +++--- ui/src/styles/chat/sidebar.css | 2 +- ui/src/styles/components.css | 8 ++---- 6 files changed, 34 insertions(+), 15 deletions(-) diff --git a/ui/src/app/settings.ts b/ui/src/app/settings.ts index 016f3ba5cccd..cbd20e5d0ee0 100644 --- a/ui/src/app/settings.ts +++ b/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; } diff --git a/ui/src/components/app-sidebar.ts b/ui/src/components/app-sidebar.ts index 6c3ac81ebacb..78c3821f9ff3 100644 --- a/ui/src/components/app-sidebar.ts +++ b/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} >
- +