From 4ae86fd48c44e7cf7b95a40eff57d341703bed6d Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 29 Sep 2026 07:42:27 +0200
Subject: [PATCH 1/5] fix: Paint Chat Surfaces From Theme Roles

The code window header and skill output panel stop repainting their
surface-secondary container with a per-mode fill that matched it in every bundled
theme, the drag-and-drop backdrop becomes the theme scrim, the OpenAI file-source
chip takes the primary surface, and the banner drops a stopless dark gradient.

ActionIcon, RetrievalIcon, WrenchIcon and the message ProgressCircle had no
importers and carried fixed Lottie colours, so they are removed. The media,
artwork and exported-document colours that stay fixed are recorded in the theme
allowlist.
---
 client/src/components/Banners/Banner.tsx      |   6 +-
 .../Chat/Input/Files/DragDropOverlay.tsx      |  14 +-
 .../Chat/Input/Files/SourceIcon.tsx           |   2 +-
 .../Chat/Messages/Content/ActionIcon.tsx      | 172 ------------------
 .../Content/Parts/CodeWindowHeader.tsx        |   2 +-
 .../Chat/Messages/Content/Parts/SkillCall.tsx |  10 +-
 .../Chat/Messages/Content/ProgressCircle.tsx  |  38 ----
 .../Chat/Messages/Content/RetrievalIcon.tsx   |  80 --------
 .../Chat/Messages/Content/WrenchIcon.tsx      |  49 -----
 eslint-suppressions.json                      |  31 +---
 packages/client/src/theme/allowlist.md        |  12 ++
 11 files changed, 28 insertions(+), 388 deletions(-)
 delete mode 100644 client/src/components/Chat/Messages/Content/ActionIcon.tsx
 delete mode 100644 client/src/components/Chat/Messages/Content/ProgressCircle.tsx
 delete mode 100644 client/src/components/Chat/Messages/Content/RetrievalIcon.tsx
 delete mode 100644 client/src/components/Chat/Messages/Content/WrenchIcon.tsx

diff --git a/client/src/components/Banners/Banner.tsx b/client/src/components/Banners/Banner.tsx
index 78d840e81be..7fa078d513f 100644
--- a/client/src/components/Banners/Banner.tsx
+++ b/client/src/components/Banners/Banner.tsx
@@ -58,11 +58,11 @@ export const Banner = ({ onHeightChange }: { onHeightChange?: (height: number) =
   return (
     <div
       ref={bannerRef}
-      className="sticky top-0 z-20 flex items-center bg-presentation px-2 py-1 text-text-primary dark:bg-gradient-to-r md:relative"
+      className="bg-presentation text-text-primary sticky top-0 z-20 flex items-center px-2 py-1 md:relative"
     >
       <div
         className={cn(
-          'w-full truncate text-center text-base [&_a]:text-link [&_a]:underline',
+          '[&_a]:text-link w-full truncate text-center text-base [&_a]:underline',
           !banner.persistable && 'px-4',
         )}
         dangerouslySetInnerHTML={{ __html: sanitizedMessage }}
@@ -75,7 +75,7 @@ export const Banner = ({ onHeightChange }: { onHeightChange?: (height: number) =
           className="size-8"
           onClick={onClick}
         >
-          <XIcon className="mx-auto h-4 w-4 text-text-primary" aria-hidden="true" />
+          <XIcon className="text-text-primary mx-auto h-4 w-4" aria-hidden="true" />
         </Button>
       )}
     </div>
diff --git a/client/src/components/Chat/Input/Files/DragDropOverlay.tsx b/client/src/components/Chat/Input/Files/DragDropOverlay.tsx
index 43700206c33..50d55faccd4 100644
--- a/client/src/components/Chat/Input/Files/DragDropOverlay.tsx
+++ b/client/src/components/Chat/Input/Files/DragDropOverlay.tsx
@@ -11,20 +11,16 @@ const DragDropOverlay = memo(({ isActive }: DragDropOverlayProps) => {
     <>
       {/** Modal backdrop overlay */}
       <div
-        className={`fixed inset-0 z-[9998] transition-opacity duration-200 ease-in-out ${
+        className={`bg-surface-overlay/40 fixed inset-0 z-[9998] transition-opacity duration-200 ease-in-out ${
           isActive
             ? 'pointer-events-auto visible opacity-100'
             : 'pointer-events-none invisible opacity-0'
         } `}
-        style={{
-          /** Semi-transparent black overlay that works in both themes */
-          backgroundColor: 'rgba(0, 0, 0, 0.4)',
-          willChange: 'opacity',
-        }}
+        style={{ willChange: 'opacity' }}
       />
       {/** Main content overlay */}
       <div
-        className={`fixed inset-0 z-[9999] flex flex-col items-center justify-center gap-2 text-text-primary transition-all duration-200 ease-in-out ${
+        className={`text-text-primary fixed inset-0 z-[9999] flex flex-col items-center justify-center gap-2 transition-all duration-200 ease-in-out ${
           isActive
             ? 'pointer-events-auto visible opacity-100'
             : 'pointer-events-none invisible opacity-0'
@@ -36,7 +32,7 @@ const DragDropOverlay = memo(({ isActive }: DragDropOverlayProps) => {
         }}
       >
         {/** Content area with subtle background */}
-        <div className="flex flex-col items-center rounded-lg bg-surface-primary p-8 shadow-xl">
+        <div className="bg-surface-primary flex flex-col items-center rounded-lg p-8 shadow-xl">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 132 108"
@@ -90,7 +86,7 @@ const DragDropOverlay = memo(({ isActive }: DragDropOverlayProps) => {
             </defs>
           </svg>
           <h3 className="mt-4 text-lg font-semibold">{localize('com_ui_upload_files')}</h3>
-          <h4 className="text-sm text-text-secondary">{localize('com_ui_drag_drop')}</h4>
+          <h4 className="text-text-secondary text-sm">{localize('com_ui_drag_drop')}</h4>
         </div>
       </div>
     </>
diff --git a/client/src/components/Chat/Input/Files/SourceIcon.tsx b/client/src/components/Chat/Input/Files/SourceIcon.tsx
index 63a8ef790b2..6ff1c062436 100644
--- a/client/src/components/Chat/Input/Files/SourceIcon.tsx
+++ b/client/src/components/Chat/Input/Files/SourceIcon.tsx
@@ -9,7 +9,7 @@ const sourceToEndpoint = {
 };
 
 const sourceToClassname = {
-  [FileSources.openai]: 'bg-white/75 dark:bg-black/65',
+  [FileSources.openai]: 'bg-surface-primary/75',
   [FileSources.azure]: 'azure-bg-color',
   [FileSources.azure_blob]: 'azure-bg-color',
   [FileSources.execute_code]: 'bg-black text-white opacity-85',
diff --git a/client/src/components/Chat/Messages/Content/ActionIcon.tsx b/client/src/components/Chat/Messages/Content/ActionIcon.tsx
deleted file mode 100644
index 2c6ee4465f8..00000000000
--- a/client/src/components/Chat/Messages/Content/ActionIcon.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-export default function ActionIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      viewBox="0 0 20 20"
-      width="20"
-      height="20"
-      style={{ width: '100%', height: '100%', transform: 'translate3d(0px, 0px, 0px)' }}
-      preserveAspectRatio="xMidYMid meet"
-    >
-      <defs>
-        <clipPath id="__lottie_element_232">
-          <rect width="20" height="20" x="0" y="0"></rect>
-        </clipPath>
-        <clipPath id="__lottie_element_242">
-          <path d="M0,0 L20000,0 L20000,20000 L0,20000z"></path>
-        </clipPath>
-        <g id="__lottie_element_245">
-          <g
-            clipPath="url(#__lottie_element_246)"
-            style={{ display: 'block' }}
-            transform="matrix(1,0,0,1,0,0)"
-            opacity="1"
-          >
-            <g style={{ display: 'block' }} transform="matrix(1,0,0,1,10006,10006)" opacity="1">
-              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
-                <path
-                  fill="rgb(255,255,255)"
-                  fillOpacity="1"
-                  d=" M4.5,1 C4.5,1 4.5,3.5 4.5,3.5 C4.5,4.05 4.05,4.5 3.5,4.5 C3.5,4.5 1,4.5 1,4.5 C0.45,4.5 0,4.05 0,3.5 C0,3.5 0,1 0,1 C0,0.45 0.45,0 1,0 C1,0 3.5,0 3.5,0 C4.05,0 4.5,0.45 4.5,1z"
-                ></path>
-                <g opacity="1" transform="matrix(1,0,0,1,2.25,2.25)"></g>
-              </g>
-            </g>
-          </g>
-        </g>
-        <clipPath id="__lottie_element_246">
-          <path d="M0,0 L20000,0 L20000,20000 L0,20000z"></path>
-        </clipPath>
-        <clipPath id="__lottie_element_256">
-          <path d="M0,0 L20000,0 L20000,20000 L0,20000z"></path>
-        </clipPath>
-        {/* eslint-disable-next-line react/no-unknown-property */}
-        <mask id="__lottie_element_245_1" mask-type="alpha">
-          <use xlinkHref="#__lottie_element_245"></use>
-        </mask>
-        <clipPath id="__lottie_element_269">
-          <path d="M0,0 L20000,0 L20000,20000 L0,20000z"></path>
-        </clipPath>
-        <g id="__lottie_element_272">
-          <g
-            clipPath="url(#__lottie_element_273)"
-            style={{ display: 'block' }}
-            transform="matrix(1,0,0,1,0,0)"
-            opacity="1"
-          >
-            <g style={{ display: 'block' }} transform="matrix(1,0,0,1,10006,10006)" opacity="1">
-              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
-                <path
-                  fill="rgb(255,255,255)"
-                  fillOpacity="1"
-                  d=" M4.5,1 C4.5,1 4.5,3.5 4.5,3.5 C4.5,4.05 4.05,4.5 3.5,4.5 C3.5,4.5 1,4.5 1,4.5 C0.45,4.5 0,4.05 0,3.5 C0,3.5 0,1 0,1 C0,0.45 0.45,0 1,0 C1,0 3.5,0 3.5,0 C4.05,0 4.5,0.45 4.5,1z"
-                ></path>
-                <g opacity="1" transform="matrix(1,0,0,1,2.25,2.25)"></g>
-              </g>
-            </g>
-          </g>
-        </g>
-        <clipPath id="__lottie_element_273">
-          <path d="M0,0 L20000,0 L20000,20000 L0,20000z"></path>
-        </clipPath>
-        <clipPath id="__lottie_element_283">
-          <path d="M0,0 L20000,0 L20000,20000 L0,20000z"></path>
-        </clipPath>
-        {/* eslint-disable-next-line react/no-unknown-property */}
-        <mask id="__lottie_element_272_1" mask-type="alpha">
-          <use xlinkHref="#__lottie_element_272"></use>
-        </mask>
-      </defs>
-      <g clipPath="url(#__lottie_element_232)">
-        <g
-          clipPath="url(#__lottie_element_269)"
-          style={{ display: 'block' }}
-          transform="matrix(-1,0,0,-1,10014,10018.5)"
-          opacity="1"
-        >
-          <g style={{ display: 'block' }} mask="url(#__lottie_element_272_1)">
-            <g clipPath="url(#__lottie_element_283)" transform="matrix(1,0,0,1,0,0)" opacity="1">
-              <g style={{ display: 'block' }} transform="matrix(1,0,0,1,10006,10006)" opacity="1">
-                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
-                  <path
-                    fill="rgb(177,98,253)"
-                    fillOpacity="1"
-                    d=" M4.5,1 C4.5,1 4.5,3.5 4.5,3.5 C4.5,4.05 4.05,4.5 3.5,4.5 C3.5,4.5 1,4.5 1,4.5 C0.45,4.5 0,4.05 0,3.5 C0,3.5 0,1 0,1 C0,0.45 0.45,0 1,0 C1,0 3.5,0 3.5,0 C4.05,0 4.5,0.45 4.5,1z"
-                  ></path>
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    fillOpacity="0"
-                    stroke="rgb(177,98,253)"
-                    strokeOpacity="1"
-                    strokeWidth="3"
-                    d=" M4.5,1 C4.5,1 4.5,3.5 4.5,3.5 C4.5,4.05 4.05,4.5 3.5,4.5 C3.5,4.5 1,4.5 1,4.5 C0.45,4.5 0,4.05 0,3.5 C0,3.5 0,1 0,1 C0,0.45 0.45,0 1,0 C1,0 3.5,0 3.5,0 C4.05,0 4.5,0.45 4.5,1z"
-                  ></path>
-                  <g opacity="1" transform="matrix(1,0,0,1,2.25,2.25)"></g>
-                </g>
-              </g>
-            </g>
-          </g>
-        </g>
-        <g style={{ display: 'block' }} transform="matrix(-1,0,0,-1,5.75,10.25)" opacity="1">
-          <g opacity="1" transform="matrix(1,0,0,1,-2.25,-0.75)">
-            <path
-              fill="rgb(247,247,248)"
-              fillOpacity="1"
-              d=" M0,0 C0.75,0 1.5,0 2.25,0 C2.6642000675201416,0 3,0.3357999920845032 3,0.75 C3,0.75 3,0.75 3,0.75 C3,1.164199948310852 2.6642000675201416,1.5 2.25,1.5 C1.5,1.5 0.75,1.5 0,1.5 C0,1 0,0.5 0,0 C0,0 0,0 0,0 C0,0 0,0 0,0"
-            ></path>
-          </g>
-        </g>
-        <g
-          clipPath="url(#__lottie_element_242)"
-          style={{ display: 'block' }}
-          transform="matrix(-1,0,0,-1,10022.5,10018.5)"
-          opacity="1"
-        >
-          <g style={{ display: 'block' }} mask="url(#__lottie_element_245_1)">
-            <g clipPath="url(#__lottie_element_256)" transform="matrix(1,0,0,1,0,0)" opacity="1">
-              <g style={{ display: 'block' }} transform="matrix(1,0,0,1,10006,10006)" opacity="1">
-                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
-                  <path
-                    fill="rgb(177,98,253)"
-                    fillOpacity="1"
-                    d=" M4.5,1 C4.5,1 4.5,3.5 4.5,3.5 C4.5,4.05 4.05,4.5 3.5,4.5 C3.5,4.5 1,4.5 1,4.5 C0.45,4.5 0,4.05 0,3.5 C0,3.5 0,1 0,1 C0,0.45 0.45,0 1,0 C1,0 3.5,0 3.5,0 C4.05,0 4.5,0.45 4.5,1z"
-                  ></path>
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    fillOpacity="0"
-                    stroke="rgb(177,98,253)"
-                    strokeOpacity="1"
-                    strokeWidth="3"
-                    d=" M4.5,1 C4.5,1 4.5,3.5 4.5,3.5 C4.5,4.05 4.05,4.5 3.5,4.5 C3.5,4.5 1,4.5 1,4.5 C0.45,4.5 0,4.05 0,3.5 C0,3.5 0,1 0,1 C0,0.45 0.45,0 1,0 C1,0 3.5,0 3.5,0 C4.05,0 4.5,0.45 4.5,1z"
-                  ></path>
-                  <g opacity="1" transform="matrix(1,0,0,1,2.25,2.25)"></g>
-                </g>
-              </g>
-            </g>
-          </g>
-        </g>
-        <g style={{ display: 'block' }} transform="matrix(-1,0,0,-1,14.25,10.25)" opacity="1">
-          <g opacity="1" transform="matrix(1,0,0,1,-0.75,-0.75)">
-            <path
-              fill="rgb(247,247,248)"
-              fillOpacity="1"
-              d=" M0,0.75 C0,0.3357999920845032 0.3357900083065033,0 0.75,0 C1.5,0 2.25,0 3,0 C3,0.5 3,1 3,1.5 C2.25,1.5 1.5,1.5 0.75,1.5 C0.3357900083065033,1.5 0,1.164199948310852 0,0.75 C0,0.75 0,0.75 0,0.75 C0,0.75 0,0.75 0,0.75 C0,0.75 0,0.75 0,0.75"
-            ></path>
-          </g>
-        </g>
-        <g style={{ display: 'block' }} transform="matrix(1,0,0,1,0,0)" opacity="1">
-          <g opacity="1" transform="matrix(1,0,0,1,10,10.25)">
-            <path
-              fill="rgb(177,98,253)"
-              fillOpacity="1"
-              d=" M2,-0.75 C2,-0.75 2,0.75 2,0.75 C2,0.75 -2,0.75 -2,0.75 C-2,0.75 -2,-0.75 -2,-0.75 C-2,-0.75 2,-0.75 2,-0.75z"
-            ></path>
-          </g>
-        </g>
-      </g>
-    </svg>
-  );
-}
diff --git a/client/src/components/Chat/Messages/Content/Parts/CodeWindowHeader.tsx b/client/src/components/Chat/Messages/Content/Parts/CodeWindowHeader.tsx
index 93ee1851f26..d3ab56c4cf4 100644
--- a/client/src/components/Chat/Messages/Content/Parts/CodeWindowHeader.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/CodeWindowHeader.tsx
@@ -25,7 +25,7 @@ export default function CodeWindowHeader({ language, code, diffStats }: CodeWind
   }, [code]);
 
   return (
-    <div className="flex items-center justify-between bg-surface-primary-alt px-1.5 py-1.5 font-sans text-xs text-text-secondary dark:bg-transparent">
+    <div className="text-text-secondary flex items-center justify-between px-1.5 py-1.5 font-sans text-xs">
       <span className="flex items-center gap-1.5 pl-1.5 text-xs font-medium">
         <LangIcon lang={language} className="size-3.5 shrink-0" />
         {language}
diff --git a/client/src/components/Chat/Messages/Content/Parts/SkillCall.tsx b/client/src/components/Chat/Messages/Content/Parts/SkillCall.tsx
index 8a58ad08dc3..0e95897bf97 100644
--- a/client/src/components/Chat/Messages/Content/Parts/SkillCall.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/SkillCall.tsx
@@ -63,7 +63,7 @@ export default function SkillCall({
           icon={
             <ScrollText
               className={cn(
-                'size-4 shrink-0 text-text-secondary',
+                'text-text-secondary size-4 shrink-0',
                 phase === 'running' && 'animate-pulse',
               )}
               aria-hidden="true"
@@ -79,14 +79,14 @@ export default function SkillCall({
             <div
               className={cn(
                 toolPanelSpacingClassName,
-                'overflow-hidden rounded-lg border border-border-light bg-surface-secondary',
+                'border-border-light bg-surface-secondary overflow-hidden rounded-lg border',
               )}
             >
-              <div className="bg-surface-primary-alt p-4 text-xs dark:bg-transparent">
-                <div className="mb-1.5 text-[10px] font-medium uppercase tracking-wide text-text-secondary">
+              <div className="p-4 text-xs">
+                <div className="text-text-secondary mb-1.5 text-[10px] font-medium tracking-wide uppercase">
                   {localize('com_ui_output')}
                 </div>
-                <div className="max-h-[200px] overflow-auto text-text-primary">
+                <div className="text-text-primary max-h-[200px] overflow-auto">
                   <Stdout output={output} />
                 </div>
               </div>
diff --git a/client/src/components/Chat/Messages/Content/ProgressCircle.tsx b/client/src/components/Chat/Messages/Content/ProgressCircle.tsx
deleted file mode 100644
index be4cd3be151..00000000000
--- a/client/src/components/Chat/Messages/Content/ProgressCircle.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-export default function ProgressCircle({
-  radius,
-  circumference,
-  offset,
-}: {
-  radius: number;
-  circumference: number;
-  offset: number;
-}) {
-  return (
-    <svg
-      width="120"
-      height="120"
-      viewBox="0 0 120 120"
-      className="absolute left-1/2 top-1/2 h-[23px] w-[23px] -translate-x-1/2 -translate-y-1/2 text-brand-purple"
-    >
-      <circle
-        className="stroke-brand-purple/25 dark:stroke-brand-purple/50 origin-[50%_50%] -rotate-90"
-        strokeWidth="7.826086956521739"
-        fill="transparent"
-        r={radius}
-        cx="60"
-        cy="60"
-      />
-      <circle
-        className="origin-[50%_50%] -rotate-90 transition-[stroke-dashoffset]"
-        stroke="currentColor"
-        strokeWidth="7.826086956521739"
-        strokeDasharray={`${circumference} ${circumference}`}
-        strokeDashoffset={offset}
-        fill="transparent"
-        r={radius}
-        cx="60"
-        cy="60"
-      />
-    </svg>
-  );
-}
diff --git a/client/src/components/Chat/Messages/Content/RetrievalIcon.tsx b/client/src/components/Chat/Messages/Content/RetrievalIcon.tsx
deleted file mode 100644
index fd9dfec07d9..00000000000
--- a/client/src/components/Chat/Messages/Content/RetrievalIcon.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-export default function RetrievalIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      viewBox="0 0 20 20"
-      width="20"
-      height="20"
-      style={{ width: '100%', height: '100%', transform: 'translate3d(0px, 0px, 0px)' }}
-      preserveAspectRatio="xMidYMid meet"
-    >
-      <defs>
-        <clipPath id="__lottie_element_258">
-          <rect width="20" height="20" x="0" y="0" />
-        </clipPath>
-        <clipPath id="__lottie_element_263">
-          <path d="M0,0 L20000,0 L20000,20000 L0,20000z" />
-        </clipPath>
-        <clipPath id="__lottie_element_270">
-          <path d="M0,0 L20000,0 L20000,20000 L0,20000z" />
-        </clipPath>
-      </defs>
-      <g clipPath="url(#__lottie_element_258)">
-        <g
-          clipPath="url(#__lottie_element_263)"
-          style={{ display: 'block' }}
-          transform="matrix(0.9999999403953552,0,0,0.9999999403953552,-10000,-10000)"
-          opacity="1"
-        >
-          <g
-            clipPath="url(#__lottie_element_270)"
-            style={{ display: 'block' }}
-            transform="matrix(0.9999988675117493,0,0,0.9999988675117493,10.01171875,10.01171875)"
-            opacity="1"
-          >
-            <g style={{ display: 'block' }} transform="matrix(1,0,0,1,10000,10000)" opacity="1">
-              <g opacity="1" transform="matrix(1,0,0,1,-3.25,-2.125)">
-                <path
-                  fill="rgb(177,97,253)"
-                  fillOpacity="1"
-                  d=" M0,0.75 C0,0.3357900083065033 0.3357900083065033,8.881784197001252e-16 0.75,8.881784197001252e-16 C2.4166667461395264,8.881784197001252e-16 4.083333492279053,8.881784197001252e-16 5.75,8.881784197001252e-16 C6.1641998291015625,8.881784197001252e-16 6.5,0.3357900083065033 6.5,0.75 C6.5,1.1642099618911743 6.1641998291015625,1.5 5.75,1.5 C4.083333492279053,1.5 2.4166667461395264,1.5 0.75,1.5 C0.3357900083065033,1.5 0,1.1642099618911743 0,0.75 C0,0.75 0,0.75 0,0.75 C0,0.75 0,0.75 0,0.75"
-                />
-              </g>
-            </g>
-            <g style={{ display: 'block' }} transform="matrix(1,0,0,1,10000,10000)" opacity="1">
-              <g opacity="1" transform="matrix(1,0,0,1,-3.25,0.625)">
-                <path
-                  fill="rgb(177,97,253)"
-                  fillOpacity="1"
-                  d=" M0,0.75 C0,0.3357999920845032 0.3357900083065033,0 0.75,0 C1.9166666269302368,0 3.0833332538604736,0 4.25,0 C4.6641998291015625,0 5,0.3357999920845032 5,0.75 C5,1.164199948310852 4.6641998291015625,1.5 4.25,1.5 C3.0833332538604736,1.5 1.9166666269302368,1.5 0.75,1.5 C0.3357900083065033,1.5 0,1.164199948310852 0,0.75 C0,0.75 0,0.75 0,0.75 C0,0.75 0,0.75 0,0.75"
-                />
-              </g>
-            </g>
-          </g>
-          <g style={{ display: 'block' }} transform="matrix(1,0,0,1,10000,10000)" opacity="1">
-            <g opacity="1" transform="matrix(1,0,0,1,10,10)">
-              <path
-                fill="rgb(177,97,253)"
-                fillOpacity="1"
-                d=" M-3.13,-5.25 C-3.09,-5.25 -3.04,-5.25 -3,-5.25 C-2.59,-5.25 -2.25,-4.91 -2.25,-4.5 C-2.25,-4.09 -2.59,-3.75 -3,-3.75 C-3.03,-3.75 -3.07,-3.75 -3.1,-3.75 C-3.53,-3.75 -3.81,-3.75 -4.02,-3.73 C-4.23,-3.72 -4.3,-3.69 -4.34,-3.67 C-4.48,-3.6 -4.6,-3.48 -4.67,-3.34 C-4.69,-3.3 -4.72,-3.23 -4.73,-3.02 C-4.75,-2.81 -4.75,-2.53 -4.75,-2.1 C-4.75,-2.07 -4.75,-2.03 -4.75,-2 C-4.75,-1.59 -5.09,-1.25 -5.5,-1.25 C-5.91,-1.25 -6.25,-1.59 -6.25,-2 C-6.25,-2.04 -6.25,-2.09 -6.25,-2.13 C-6.25,-2.52 -6.25,-2.87 -6.23,-3.15 C-6.2,-3.44 -6.15,-3.74 -6,-4.02 C-5.79,-4.44 -5.44,-4.79 -5.02,-5 C-4.74,-5.15 -4.44,-5.2 -4.15,-5.23 C-3.87,-5.25 -3.52,-5.25 -3.13,-5.25 C-3.13,-5.25 -3.13,-5.25 -3.13,-5.25 C-3.13,-5.25 -3.13,-5.25 -3.13,-5.25 M6.25,-2.13 C6.25,-2.09 6.25,-2.04 6.25,-2 C6.25,-1.59 5.91,-1.25 5.5,-1.25 C5.09,-1.25 4.75,-1.59 4.75,-2 C4.75,-2.03 4.75,-2.07 4.75,-2.1 C4.75,-2.53 4.75,-2.81 4.73,-3.02 C4.72,-3.23 4.69,-3.3 4.67,-3.34 C4.6,-3.48 4.48,-3.6 4.34,-3.67 C4.3,-3.69 4.23,-3.72 4.02,-3.73 C3.81,-3.75 3.53,-3.75 3.1,-3.75 C3.07,-3.75 3.03,-3.75 3,-3.75 C2.59,-3.75 2.25,-4.09 2.25,-4.5 C2.25,-4.91 2.59,-5.25 3,-5.25 C3.04,-5.25 3.09,-5.25 3.13,-5.25 C3.52,-5.25 3.87,-5.25 4.15,-5.23 C4.44,-5.2 4.74,-5.15 5.02,-5 C5.44,-4.79 5.79,-4.44 6,-4.02 C6.15,-3.74 6.2,-3.44 6.23,-3.15 C6.25,-2.87 6.25,-2.52 6.25,-2.13 C6.25,-2.13 6.25,-2.13 6.25,-2.13 C6.25,-2.13 6.25,-2.13 6.25,-2.13 M-3.13,5.25 C-3.09,5.25 -3.04,5.25 -3,5.25 C-2.59,5.25 -2.25,4.91 -2.25,4.5 C-2.25,4.09 -2.59,3.75 -3,3.75 C-3.03,3.75 -3.07,3.75 -3.1,3.75 C-3.53,3.75 -3.81,3.75 -4.02,3.73 C-4.23,3.72 -4.3,3.69 -4.34,3.67 C-4.48,3.6 -4.6,3.48 -4.67,3.34 C-4.69,3.3 -4.72,3.23 -4.73,3.02 C-4.75,2.81 -4.75,2.53 -4.75,2.1 C-4.75,2.07 -4.75,2.03 -4.75,2 C-4.75,1.59 -5.09,1.25 -5.5,1.25 C-5.91,1.25 -6.25,1.59 -6.25,2 C-6.25,2.04 -6.25,2.09 -6.25,2.13 C-6.25,2.52 -6.25,2.87 -6.23,3.15 C-6.2,3.44 -6.15,3.74 -6,4.02 C-5.79,4.44 -5.44,4.79 -5.02,5 C-4.74,5.15 -4.44,5.2 -4.15,5.23 C-3.87,5.25 -3.52,5.25 -3.13,5.25 C-3.13,5.25 -3.13,5.25 -3.13,5.25 C-3.13,5.25 -3.13,5.25 -3.13,5.25 M6.25,2.13 C6.25,2.09 6.25,2.04 6.25,2 C6.25,1.59 5.91,1.25 5.5,1.25 C5.09,1.25 4.75,1.59 4.75,2 C4.75,2.03 4.75,2.07 4.75,2.1 C4.75,2.53 4.75,2.81 4.73,3.02 C4.72,3.23 4.69,3.3 4.67,3.34 C4.6,3.48 4.48,3.6 4.34,3.67 C4.3,3.69 4.23,3.72 4.02,3.73 C3.81,3.75 3.53,3.75 3.1,3.75 C3.07,3.75 3.03,3.75 3,3.75 C2.59,3.75 2.25,4.09 2.25,4.5 C2.25,4.91 2.59,5.25 3,5.25 C3.04,5.25 3.09,5.25 3.13,5.25 C3.52,5.25 3.87,5.25 4.15,5.23 C4.44,5.2 4.74,5.15 5.02,5 C5.44,4.79 5.79,4.44 6,4.02 C6.15,3.74 6.2,3.44 6.23,3.15 C6.25,2.87 6.25,2.52 6.25,2.13 C6.25,2.13 6.25,2.13 6.25,2.13 C6.25,2.13 6.25,2.13 6.25,2.13"
-              />
-              <g opacity="1" transform="matrix(1,0,0,1,-6.250000476837158,-5.250000476837158)">
-                <path fill="rgb(177,97,253)" fillOpacity="1" d="M0 0" />
-              </g>
-              <g opacity="1" transform="matrix(1,0,0,1,2.25,-5.250000476837158)">
-                <path fill="rgb(177,97,253)" fillOpacity="1" d="M0 0" />
-              </g>
-              <g opacity="1" transform="matrix(1,0,0,1,-6.250000476837158,1.25)">
-                <path fill="rgb(177,97,253)" fillOpacity="1" d="M0 0" />
-              </g>
-              <g opacity="1" transform="matrix(1,0,0,1,2.25,1.25)">
-                <path fill="rgb(177,97,253)" fillOpacity="1" d="M0 0" />
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-    </svg>
-  );
-}
diff --git a/client/src/components/Chat/Messages/Content/WrenchIcon.tsx b/client/src/components/Chat/Messages/Content/WrenchIcon.tsx
deleted file mode 100644
index 9343f04b404..00000000000
--- a/client/src/components/Chat/Messages/Content/WrenchIcon.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-export default function WrenchIcon() {
-  const [rotate, setRotate] = useState(false);
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setRotate((r) => !r);
-    }, 2000); // Change 2000 to the duration you want for each pause
-
-    return () => clearInterval(timer);
-  }, []);
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      style={{ width: '100%', height: '100%', transform: 'rotate(30deg)' }}
-      preserveAspectRatio="xMidYMid meet"
-    >
-      <defs>
-        <clipPath id="__lottie_element_28">
-          <rect width="24" height="24" x="0" y="0"></rect>
-        </clipPath>
-      </defs>
-      <g clipPath="url(#__lottie_element_28)">
-        <g
-          style={{ display: 'block', transform: 'matrix(1,0,0,1,0,0)' }}
-          opacity="1"
-          className="rotate-adjust-and-back"
-        >
-          <g
-            opacity="1"
-            transform="matrix(0.8995603322982788,-0.8114914894104004,0.8114914894104004,0.8995603322982788,1.0572385787963867,13.542327880859375)"
-          >
-            <path
-              fill="rgb(178,98,254)"
-              fillOpacity="1"
-              d=" M8.648597717285156,0.11783526837825775 C9.091397285461426,0.2144152671098709 9.200997352600098,0.7544552683830261 8.880497932434082,1.0749353170394897 C8.137197494506836,1.8182452917099 7.393897533416748,2.5615553855895996 6.65059757232666,3.3048653602600098 C5.901897430419922,4.053555488586426 5.901897430419922,5.267405033111572 6.65059757232666,6.0161051750183105 C7.399197578430176,6.764805316925049 8.613097190856934,6.764805316925049 9.361797332763672,6.0161051750183105 C10.105097770690918,5.2727952003479 10.848397254943848,4.52948522567749 11.591697692871094,3.78617525100708 C11.91219711303711,3.465695381164551 12.452197074890137,3.5752952098846436 12.548797607421875,4.018115043640137 C12.907397270202637,5.6623053550720215 12.44759750366211,7.449105262756348 11.169297218322754,8.727405548095703 C9.65219783782959,10.244504928588867 7.418797492980957,10.608805656433105 5.557697296142578,9.820205688476562 C4.796051025390625,10.581838607788086 4.034404277801514,11.34347152709961 3.2727575302124023,12.10510540008545 C2.5240674018859863,12.853805541992188 1.310207486152649,12.853805541992188 0.5615174770355225,12.10510540008545 C-0.18717250227928162,11.356505393981934 -0.18717250227928162,10.14260482788086 0.5615174770355225,9.393905639648438 C1.3231642246246338,8.632271766662598 2.084810733795166,7.870638370513916 2.8464574813842773,7.109005451202393 C2.0579075813293457,5.247905254364014 2.4221975803375244,3.014495372772217 3.939307451248169,1.497375249862671 C5.217597484588623,0.21908527612686157 7.004397392272949,-0.24075473845005035 8.648597717285156,0.11783526837825775 "
-            ></path>
-          </g>
-        </g>
-      </g>
-    </svg>
-  );
-}
diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 27d7fcfa3a8..8b6f65acc6a 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -215,7 +215,7 @@
   },
   "client/src/components/Chat/Input/Files/DragDropOverlay.tsx": {
     "shadcn/no-inline-styles": {
-      "count": 4
+      "count": 3
     },
     "shadcn/no-raw-colors": {
       "count": 5
@@ -408,14 +408,6 @@
       "count": 4
     }
   },
-  "client/src/components/Chat/Messages/Content/ActionIcon.tsx": {
-    "shadcn/no-inline-styles": {
-      "count": 13
-    },
-    "shadcn/no-raw-colors": {
-      "count": 9
-    }
-  },
   "client/src/components/Chat/Messages/Content/ActivityPhaseGroup.tsx": {
     "shadcn/no-arbitrary-values": {
       "count": 1
@@ -660,11 +652,6 @@
       "count": 6
     }
   },
-  "client/src/components/Chat/Messages/Content/ProgressCircle.tsx": {
-    "shadcn/no-arbitrary-values": {
-      "count": 1
-    }
-  },
   "client/src/components/Chat/Messages/Content/ProgressText.tsx": {
     "shadcn/no-inline-styles": {
       "count": 2
@@ -681,14 +668,6 @@
       "count": 1
     }
   },
-  "client/src/components/Chat/Messages/Content/RetrievalIcon.tsx": {
-    "shadcn/no-inline-styles": {
-      "count": 5
-    },
-    "shadcn/no-raw-colors": {
-      "count": 7
-    }
-  },
   "client/src/components/Chat/Messages/Content/SearchContent.tsx": {
     "shadcn/no-unknown-classes": {
       "count": 1
@@ -768,14 +747,6 @@
       "count": 16
     }
   },
-  "client/src/components/Chat/Messages/Content/WrenchIcon.tsx": {
-    "shadcn/no-inline-styles": {
-      "count": 1
-    },
-    "shadcn/no-raw-colors": {
-      "count": 1
-    }
-  },
   "client/src/components/Chat/Messages/Content/animate.tsx": {
     "shadcn/no-inline-styles": {
       "count": 1
diff --git a/packages/client/src/theme/allowlist.md b/packages/client/src/theme/allowlist.md
index 5d7c48398ec..41f393af275 100644
--- a/packages/client/src/theme/allowlist.md
+++ b/packages/client/src/theme/allowlist.md
@@ -39,3 +39,15 @@ is a role, not an exception.
 | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `packages/client/src/components/Dropdown.css` | Popover shadows in black alpha. The app paints `.popover-ui` from its own copy of these rules in `client/src/style.css`, so moving either copy to `--theme-shadow-lg` needs both edited together. |
 | `packages/client/src/components/Tooltip.css`  | Tooltip shadows are smaller than any step of the theme shadow scale; black alpha ink, dropped in high contrast where the border takes over.                                                       |
+
+## Chat: media, artwork and documents that leave the app
+
+| File                                                                          | Why                                                                                                                                                                                          |
+| ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `client/src/components/Chat/Input/Files/DragDropOverlay.tsx`                  | The drop-zone illustration's fills are artwork; the backdrop behind it is the theme scrim.                                                                                                   |
+| `client/src/components/Chat/Input/Files/SourceIcon.tsx`                       | The code-execution badge is a black terminal mark with white ink, an identity like the provider marks.                                                                                       |
+| `client/src/components/Chat/Input/Files/ProgressCircle.tsx`                   | Upload progress drawn over the user's own image: a media scrim, so it stays black and white whatever the theme paints around the image.                                                      |
+| `client/src/utils/markdown.ts`                                                | The downloaded HTML document's GitHub Primer stylesheet; it is read outside the app, where no theme variables exist. Its high-contrast branch already reads the roles.                       |
+| `client/src/utils/mermaid.ts`                                                 | The mermaid artifact document and its zoom controls render in a sandboxed iframe without theme variables; the token reads' fallbacks and the luminance repair ink are literals by necessity. |
+| `client/src/utils/richtext.ts`                                                | Inline styles on HTML copied to the clipboard for pasting into other apps, which must not carry the sender's theme.                                                                          |
+| `client/src/utils/officePreview.ts`, `client/src/hooks/ScreenshotContext.tsx` | Fallbacks for a theme role read at runtime, used only when the variable is unset.                                                                                                            |

From c23f99db33f95dec7bedc5ed8a86c2c4e2f44f78 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 29 Sep 2026 08:21:03 +0200
Subject: [PATCH 2/5] fix: Keep the Drag-and-Drop Backdrop Black Until Scrim
 Opacity Is a Role

The theme scrim is gray in default light, so at the same alpha it dimmed the page
less than the black backdrop it replaced. The backdrop keeps its original colour
and the allowlist records the scrim-opacity role it waits on.
---
 .../Chat/Input/Files/DragDropOverlay.tsx       | 14 +++++++++-----
 eslint-suppressions.json                       |  2 +-
 packages/client/src/theme/allowlist.md         | 18 +++++++++---------
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Chat/Input/Files/DragDropOverlay.tsx b/client/src/components/Chat/Input/Files/DragDropOverlay.tsx
index 50d55faccd4..43700206c33 100644
--- a/client/src/components/Chat/Input/Files/DragDropOverlay.tsx
+++ b/client/src/components/Chat/Input/Files/DragDropOverlay.tsx
@@ -11,16 +11,20 @@ const DragDropOverlay = memo(({ isActive }: DragDropOverlayProps) => {
     <>
       {/** Modal backdrop overlay */}
       <div
-        className={`bg-surface-overlay/40 fixed inset-0 z-[9998] transition-opacity duration-200 ease-in-out ${
+        className={`fixed inset-0 z-[9998] transition-opacity duration-200 ease-in-out ${
           isActive
             ? 'pointer-events-auto visible opacity-100'
             : 'pointer-events-none invisible opacity-0'
         } `}
-        style={{ willChange: 'opacity' }}
+        style={{
+          /** Semi-transparent black overlay that works in both themes */
+          backgroundColor: 'rgba(0, 0, 0, 0.4)',
+          willChange: 'opacity',
+        }}
       />
       {/** Main content overlay */}
       <div
-        className={`text-text-primary fixed inset-0 z-[9999] flex flex-col items-center justify-center gap-2 transition-all duration-200 ease-in-out ${
+        className={`fixed inset-0 z-[9999] flex flex-col items-center justify-center gap-2 text-text-primary transition-all duration-200 ease-in-out ${
           isActive
             ? 'pointer-events-auto visible opacity-100'
             : 'pointer-events-none invisible opacity-0'
@@ -32,7 +36,7 @@ const DragDropOverlay = memo(({ isActive }: DragDropOverlayProps) => {
         }}
       >
         {/** Content area with subtle background */}
-        <div className="bg-surface-primary flex flex-col items-center rounded-lg p-8 shadow-xl">
+        <div className="flex flex-col items-center rounded-lg bg-surface-primary p-8 shadow-xl">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 132 108"
@@ -86,7 +90,7 @@ const DragDropOverlay = memo(({ isActive }: DragDropOverlayProps) => {
             </defs>
           </svg>
           <h3 className="mt-4 text-lg font-semibold">{localize('com_ui_upload_files')}</h3>
-          <h4 className="text-text-secondary text-sm">{localize('com_ui_drag_drop')}</h4>
+          <h4 className="text-sm text-text-secondary">{localize('com_ui_drag_drop')}</h4>
         </div>
       </div>
     </>
diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 8b6f65acc6a..5b5892571cc 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -215,7 +215,7 @@
   },
   "client/src/components/Chat/Input/Files/DragDropOverlay.tsx": {
     "shadcn/no-inline-styles": {
-      "count": 3
+      "count": 4
     },
     "shadcn/no-raw-colors": {
       "count": 5
diff --git a/packages/client/src/theme/allowlist.md b/packages/client/src/theme/allowlist.md
index 41f393af275..2f340e399ce 100644
--- a/packages/client/src/theme/allowlist.md
+++ b/packages/client/src/theme/allowlist.md
@@ -42,12 +42,12 @@ is a role, not an exception.
 
 ## Chat: media, artwork and documents that leave the app
 
-| File                                                                          | Why                                                                                                                                                                                          |
-| ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `client/src/components/Chat/Input/Files/DragDropOverlay.tsx`                  | The drop-zone illustration's fills are artwork; the backdrop behind it is the theme scrim.                                                                                                   |
-| `client/src/components/Chat/Input/Files/SourceIcon.tsx`                       | The code-execution badge is a black terminal mark with white ink, an identity like the provider marks.                                                                                       |
-| `client/src/components/Chat/Input/Files/ProgressCircle.tsx`                   | Upload progress drawn over the user's own image: a media scrim, so it stays black and white whatever the theme paints around the image.                                                      |
-| `client/src/utils/markdown.ts`                                                | The downloaded HTML document's GitHub Primer stylesheet; it is read outside the app, where no theme variables exist. Its high-contrast branch already reads the roles.                       |
-| `client/src/utils/mermaid.ts`                                                 | The mermaid artifact document and its zoom controls render in a sandboxed iframe without theme variables; the token reads' fallbacks and the luminance repair ink are literals by necessity. |
-| `client/src/utils/richtext.ts`                                                | Inline styles on HTML copied to the clipboard for pasting into other apps, which must not carry the sender's theme.                                                                          |
-| `client/src/utils/officePreview.ts`, `client/src/hooks/ScreenshotContext.tsx` | Fallbacks for a theme role read at runtime, used only when the variable is unset.                                                                                                            |
+| File                                                                          | Why                                                                                                                                                                                                                                              |
+| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `client/src/components/Chat/Input/Files/DragDropOverlay.tsx`                  | The drop-zone illustration's fills are artwork. Its backdrop is black at 40% in both modes; the theme scrim is gray-500 in default light, so it moves to `surface-overlay` once a theme can set scrim opacity per mode (berry-13/LibreChat#181). |
+| `client/src/components/Chat/Input/Files/SourceIcon.tsx`                       | The code-execution badge is a black terminal mark with white ink, an identity like the provider marks.                                                                                                                                           |
+| `client/src/components/Chat/Input/Files/ProgressCircle.tsx`                   | Upload progress drawn over the user's own image: a media scrim, so it stays black and white whatever the theme paints around the image.                                                                                                          |
+| `client/src/utils/markdown.ts`                                                | The downloaded HTML document's GitHub Primer stylesheet; it is read outside the app, where no theme variables exist. Its high-contrast branch already reads the roles.                                                                           |
+| `client/src/utils/mermaid.ts`                                                 | The mermaid artifact document and its zoom controls render in a sandboxed iframe without theme variables; the token reads' fallbacks and the luminance repair ink are literals by necessity.                                                     |
+| `client/src/utils/richtext.ts`                                                | Inline styles on HTML copied to the clipboard for pasting into other apps, which must not carry the sender's theme.                                                                                                                              |
+| `client/src/utils/officePreview.ts`, `client/src/hooks/ScreenshotContext.tsx` | Fallbacks for a theme role read at runtime, used only when the variable is unset.                                                                                                                                                                |

From d0a50a0388deee4cf3a71d5096f16a6b20f2a3cd Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 29 Sep 2026 08:27:19 +0200
Subject: [PATCH 3/5] test: Cover the Code Window Header Showing Its Panel
 Surface

---
 .../mock/scenarios/code-window-header.spec.ts | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 e2e/specs/mock/scenarios/code-window-header.spec.ts

diff --git a/e2e/specs/mock/scenarios/code-window-header.spec.ts b/e2e/specs/mock/scenarios/code-window-header.spec.ts
new file mode 100644
index 00000000000..15113cf6a0d
--- /dev/null
+++ b/e2e/specs/mock/scenarios/code-window-header.spec.ts
@@ -0,0 +1,51 @@
+import { expect, test } from '@playwright/test';
+import {
+  sendMessageAndWaitForCompletion,
+  enableCodeInterpreter,
+  selectMockEndpoint,
+  MOCK_ENDPOINTS,
+  NEW_CHAT_PATH,
+  messagesView,
+} from '../helpers';
+
+/**
+ * The code window header used to repaint its panel with a per-mode fill that matched the panel
+ * in every bundled theme. It now paints nothing, so the header always shows the panel's own
+ * `surface-secondary`, including in a theme where the two roles differ.
+ */
+test('the code window header shows its panel surface @scenario:code-window-header-shows-its-panel', async ({
+  page,
+}) => {
+  test.setTimeout(120_000);
+  const label = `header-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+  await page.goto(NEW_CHAT_PATH, { timeout: 10_000 });
+  await selectMockEndpoint(page, MOCK_ENDPOINTS[0]);
+  await enableCodeInterpreter(page);
+
+  const response = await sendMessageAndWaitForCompletion(page, `E2E_EXECUTE_CODE:${label}`);
+  expect(response.ok()).toBeTruthy();
+
+  const card = messagesView(page).getByRole('button', { name: /^Finished running/ });
+  await expect(card).toBeVisible({ timeout: 30_000 });
+  await card.click();
+
+  const copy = messagesView(page).getByRole('button', { name: 'Copy code' }).first();
+  await expect(copy).toBeVisible({ timeout: 15_000 });
+
+  const paint = await copy.evaluate((button) => {
+    const header = button.parentElement as HTMLElement;
+    const panel = header.parentElement as HTMLElement;
+    const probe = document.createElement('div');
+    probe.style.backgroundColor = 'rgb(var(--surface-secondary))';
+    document.body.appendChild(probe);
+    const surfaceSecondary = getComputedStyle(probe).backgroundColor;
+    probe.remove();
+    return {
+      header: getComputedStyle(header).backgroundColor,
+      panel: getComputedStyle(panel).backgroundColor,
+      surfaceSecondary,
+    };
+  });
+  expect(paint.header).toBe('rgba(0, 0, 0, 0)');
+  expect(paint.panel).toBe(paint.surfaceSecondary);
+});

From c0bb5611640171801da3748288caffe061806ba6 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 29 Sep 2026 08:51:34 +0200
Subject: [PATCH 4/5] test: Exercise the Code Window Header Through a
 File-Authoring Card

The mock code interpreter exposes bash_tool, whose card has its own header; a skill
file created by the model opens the file-authoring card that renders CodeWindowHeader.
---
 .../mock/scenarios/code-window-header.spec.ts | 80 ++++++++++++-------
 1 file changed, 52 insertions(+), 28 deletions(-)

diff --git a/e2e/specs/mock/scenarios/code-window-header.spec.ts b/e2e/specs/mock/scenarios/code-window-header.spec.ts
index 15113cf6a0d..96637abe473 100644
--- a/e2e/specs/mock/scenarios/code-window-header.spec.ts
+++ b/e2e/specs/mock/scenarios/code-window-header.spec.ts
@@ -1,51 +1,75 @@
 import { expect, test } from '@playwright/test';
 import {
-  sendMessageAndWaitForCompletion,
-  enableCodeInterpreter,
-  selectMockEndpoint,
   MOCK_ENDPOINTS,
   NEW_CHAT_PATH,
+  enableSkills,
+  fetchJson,
+  getAccessToken,
   messagesView,
+  requestJson,
+  selectMockEndpoint,
+  sendMessage,
 } from '../helpers';
 
 /**
  * The code window header used to repaint its panel with a per-mode fill that matched the panel
  * in every bundled theme. It now paints nothing, so the header always shows the panel's own
- * `surface-secondary`, including in a theme where the two roles differ.
+ * `surface-secondary`, including in a theme where the two roles differ. A skill file created by
+ * the model opens a file-authoring card, whose preview carries the header.
  */
+type SkillSummary = { _id: string; name: string };
+
 test('the code window header shows its panel surface @scenario:code-window-header-shows-its-panel', async ({
   page,
 }) => {
   test.setTimeout(120_000);
-  const label = `header-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+  const skillName = `e2e-code-header-${Date.now()}-${Math.floor(Math.random() * 1e4)}`;
   await page.goto(NEW_CHAT_PATH, { timeout: 10_000 });
   await selectMockEndpoint(page, MOCK_ENDPOINTS[0]);
-  await enableCodeInterpreter(page);
+  await enableSkills(page);
 
-  const response = await sendMessageAndWaitForCompletion(page, `E2E_EXECUTE_CODE:${label}`);
+  const response = await sendMessage(
+    page,
+    [`E2E_CREATE_SKILL:${skillName}`, 'Create the skill file using host file authoring only.'].join(
+      '\n',
+    ),
+  );
   expect(response.ok()).toBeTruthy();
 
-  const card = messagesView(page).getByRole('button', { name: /^Finished running/ });
-  await expect(card).toBeVisible({ timeout: 30_000 });
-  await card.click();
+  try {
+    const card = messagesView(page).getByRole('button', { name: /^Created / });
+    await expect(card).toBeVisible({ timeout: 30_000 });
+    await card.click();
 
-  const copy = messagesView(page).getByRole('button', { name: 'Copy code' }).first();
-  await expect(copy).toBeVisible({ timeout: 15_000 });
+    const copy = messagesView(page).getByRole('button', { name: 'Copy code', exact: true }).first();
+    await expect(copy).toBeVisible({ timeout: 15_000 });
 
-  const paint = await copy.evaluate((button) => {
-    const header = button.parentElement as HTMLElement;
-    const panel = header.parentElement as HTMLElement;
-    const probe = document.createElement('div');
-    probe.style.backgroundColor = 'rgb(var(--surface-secondary))';
-    document.body.appendChild(probe);
-    const surfaceSecondary = getComputedStyle(probe).backgroundColor;
-    probe.remove();
-    return {
-      header: getComputedStyle(header).backgroundColor,
-      panel: getComputedStyle(panel).backgroundColor,
-      surfaceSecondary,
-    };
-  });
-  expect(paint.header).toBe('rgba(0, 0, 0, 0)');
-  expect(paint.panel).toBe(paint.surfaceSecondary);
+    const paint = await copy.evaluate((button) => {
+      const header = button.closest('div.justify-between') as HTMLElement;
+      const panel = header.parentElement as HTMLElement;
+      const probe = document.createElement('div');
+      probe.style.backgroundColor = 'rgb(var(--surface-secondary))';
+      document.body.appendChild(probe);
+      const surfaceSecondary = getComputedStyle(probe).backgroundColor;
+      probe.remove();
+      return {
+        header: getComputedStyle(header).backgroundColor,
+        panel: getComputedStyle(panel).backgroundColor,
+        surfaceSecondary,
+      };
+    });
+    expect(paint.header).toBe('rgba(0, 0, 0, 0)');
+    expect(paint.panel).toBe(paint.surfaceSecondary);
+  } finally {
+    const token = await getAccessToken(page);
+    const listed = await fetchJson<{ skills?: SkillSummary[] }>(
+      page,
+      `/api/skills?search=${encodeURIComponent(skillName)}&limit=10`,
+      token,
+    );
+    const skill = listed.skills?.find((item) => item.name === skillName);
+    if (skill) {
+      await requestJson(page, { path: `/api/skills/${skill._id}`, token, method: 'DELETE' });
+    }
+  }
 });

From 094ac1bfb098a12ee4a4b7a5d3cdac7dc4972cbc Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 29 Sep 2026 08:55:56 +0200
Subject: [PATCH 5/5] fix: Keep the OpenAI File-Source Chip's Dark Opacity

The chip composites over the file's own preview, where surface-primary at 75% darkened
it against the shipped black at 65%. It keeps its colours and joins the code-execution
badge in the allowlist as a media overlay.
---
 client/src/components/Chat/Input/Files/SourceIcon.tsx | 2 +-
 packages/client/src/theme/allowlist.md                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Chat/Input/Files/SourceIcon.tsx b/client/src/components/Chat/Input/Files/SourceIcon.tsx
index 6ff1c062436..63a8ef790b2 100644
--- a/client/src/components/Chat/Input/Files/SourceIcon.tsx
+++ b/client/src/components/Chat/Input/Files/SourceIcon.tsx
@@ -9,7 +9,7 @@ const sourceToEndpoint = {
 };
 
 const sourceToClassname = {
-  [FileSources.openai]: 'bg-surface-primary/75',
+  [FileSources.openai]: 'bg-white/75 dark:bg-black/65',
   [FileSources.azure]: 'azure-bg-color',
   [FileSources.azure_blob]: 'azure-bg-color',
   [FileSources.execute_code]: 'bg-black text-white opacity-85',
diff --git a/packages/client/src/theme/allowlist.md b/packages/client/src/theme/allowlist.md
index 2f340e399ce..6eaf706be4d 100644
--- a/packages/client/src/theme/allowlist.md
+++ b/packages/client/src/theme/allowlist.md
@@ -45,7 +45,7 @@ is a role, not an exception.
 | File                                                                          | Why                                                                                                                                                                                                                                              |
 | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `client/src/components/Chat/Input/Files/DragDropOverlay.tsx`                  | The drop-zone illustration's fills are artwork. Its backdrop is black at 40% in both modes; the theme scrim is gray-500 in default light, so it moves to `surface-overlay` once a theme can set scrim opacity per mode (berry-13/LibreChat#181). |
-| `client/src/components/Chat/Input/Files/SourceIcon.tsx`                       | The code-execution badge is a black terminal mark with white ink, an identity like the provider marks.                                                                                                                                           |
+| `client/src/components/Chat/Input/Files/SourceIcon.tsx`                       | The OpenAI chip (white/75, black/65 in dark) and the code-execution badge (a black terminal mark with white ink) sit over the file's own preview: media overlays, like the upload progress.                                                      |
 | `client/src/components/Chat/Input/Files/ProgressCircle.tsx`                   | Upload progress drawn over the user's own image: a media scrim, so it stays black and white whatever the theme paints around the image.                                                                                                          |
 | `client/src/utils/markdown.ts`                                                | The downloaded HTML document's GitHub Primer stylesheet; it is read outside the app, where no theme variables exist. Its high-contrast branch already reads the roles.                                                                           |
 | `client/src/utils/mermaid.ts`                                                 | The mermaid artifact document and its zoom controls render in a sandboxed iframe without theme variables; the token reads' fallbacks and the luminance repair ink are literals by necessity.                                                     |