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/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/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..96637abe473
--- /dev/null
+++ b/e2e/specs/mock/scenarios/code-window-header.spec.ts
@@ -0,0 +1,75 @@
+import { expect, test } from '@playwright/test';
+import {
+  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. 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 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 enableSkills(page);
+
+  const response = await sendMessage(
+    page,
+    [`E2E_CREATE_SKILL:${skillName}`, 'Create the skill file using host file authoring only.'].join(
+      '\n',
+    ),
+  );
+  expect(response.ok()).toBeTruthy();
+
+  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', exact: true }).first();
+    await expect(copy).toBeVisible({ timeout: 15_000 });
+
+    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' });
+    }
+  }
+});
diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 27d7fcfa3a8..5b5892571cc 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -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..6eaf706be4d 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. 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 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.                                                     |
+| `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.                                                                                                                                                                |