From 4e4a5d49056cd1735034a9cbb04220e5fb8aae68 Mon Sep 17 00:00:00 2001
From: Peter Steinberger <peter@steipete.me>
Date: Fri, 17 Jul 2026 11:11:19 +0100
Subject: [PATCH] fix(ui): blend chat pane header with window chrome and stroke
 workspace chip icons (#109888)

---
 ui/src/pages/chat/chat-pane.ts                        |  1 -
 ui/src/pages/chat/components/chat-pane-header.test.ts |  1 -
 ui/src/pages/chat/components/chat-pane-header.ts      |  6 +-----
 ui/src/styles/chat/split-view.css                     | 11 +++++++----
 4 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/ui/src/pages/chat/chat-pane.ts b/ui/src/pages/chat/chat-pane.ts
index 453919eb42b4..4816b3e971ab 100644
--- a/ui/src/pages/chat/chat-pane.ts
+++ b/ui/src/pages/chat/chat-pane.ts
@@ -2143,7 +2143,6 @@ class ChatPane extends OpenClawLightDomElement {
     });
     return renderChatPaneHeader({
       paneId: this.paneId,
-      active: this.active,
       narrow: this.narrow,
       mergedChrome: this.mergedChrome,
       title: this.paneTitle,
diff --git a/ui/src/pages/chat/components/chat-pane-header.test.ts b/ui/src/pages/chat/components/chat-pane-header.test.ts
index 9fbf7dca6b8b..8ab8962a2b20 100644
--- a/ui/src/pages/chat/components/chat-pane-header.test.ts
+++ b/ui/src/pages/chat/components/chat-pane-header.test.ts
@@ -32,7 +32,6 @@ function mount(patch: Partial<ChatPaneHeaderProps> = {}) {
   containers.push(container);
   const props: ChatPaneHeaderProps = {
     paneId: "pane-1",
-    active: true,
     narrow: false,
     mergedChrome: false,
     title: "Session title",
diff --git a/ui/src/pages/chat/components/chat-pane-header.ts b/ui/src/pages/chat/components/chat-pane-header.ts
index 016269ab67cb..63e4b4c325e1 100644
--- a/ui/src/pages/chat/components/chat-pane-header.ts
+++ b/ui/src/pages/chat/components/chat-pane-header.ts
@@ -16,7 +16,6 @@ export type ChatPaneHeaderAction = "reveal" | "copy-path" | "copy-branch";
 
 type ChatPaneHeaderProps = {
   paneId: string;
-  active: boolean;
   narrow: boolean;
   mergedChrome: boolean;
   title: string;
@@ -123,10 +122,7 @@ export function renderChatPaneHeader(props: ChatPaneHeaderProps) {
   const copied = props.copiedAction === "copy-path" || props.copiedAction === "copy-branch";
 
   return html`
-    <div
-      class="chat-pane__header ${props.active ? "chat-pane__header--active" : ""}"
-      @mousedown=${beginNativeWindowDrag}
-    >
+    <div class="chat-pane__header" @mousedown=${beginNativeWindowDrag}>
       ${props.mergedChrome
         ? html`<openclaw-tooltip .content=${t("nav.expand")}>
             <button
diff --git a/ui/src/styles/chat/split-view.css b/ui/src/styles/chat/split-view.css
index fe0b7f910e13..a0932cc22074 100644
--- a/ui/src/styles/chat/split-view.css
+++ b/ui/src/styles/chat/split-view.css
@@ -134,10 +134,6 @@ openclaw-chat-pane {
   -webkit-user-select: none;
 }
 
-.chat-pane__header--active {
-  background: color-mix(in srgb, var(--accent) 8%, transparent);
-}
-
 /* The title hugs its text so the workspace chip sits right after it (the
    header's shared 8px gap provides the spacing); it may shrink with ellipsis
    when space runs out, and the action row pushes itself to the right edge. */
@@ -204,6 +200,13 @@ openclaw-chat-pane {
 .chat-pane__workspace-chip svg {
   width: 14px;
   height: 14px;
+  /* Lucide outline icons: without this the paths render browser-default
+     black fill, which reads as a solid dark blob on the chip. */
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
 .chat-pane__workspace-menu {