From 90e3778660690e4f00bdd4e237fc541725dc1427 Mon Sep 17 00:00:00 2001
From: Bilal Bakr <62337003+Bil0000@users.noreply.github.com>
Date: Tue, 4 Aug 2026 22:41:07 +0300
Subject: [PATCH] fix(web): stop the chat timeline reading through the provider
 status banner (#5353)

---
 .../src/components/chat/ProviderStatusBanner.test.tsx    | 9 +++++++++
 apps/web/src/components/chat/ProviderStatusBanner.tsx    | 7 ++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/chat/ProviderStatusBanner.test.tsx b/apps/web/src/components/chat/ProviderStatusBanner.test.tsx
index 2a5bfe9ed3a893d4f180e55f290ceda9d06a401e..90f28effc7dcdd92f068ef4010286c09061a1881 100644
--- a/apps/web/src/components/chat/ProviderStatusBanner.test.tsx
+++ b/apps/web/src/components/chat/ProviderStatusBanner.test.tsx
@@ -44,6 +44,15 @@ describe("ProviderStatusBanner", () => {
     expect(markup).toContain("absolute top-2 right-2");
   });
 
+  it("renders on a glass surface so the timeline never reads through the banner", () => {
+    const markup = renderToStaticMarkup(
+      <ProviderStatusBanner status={warningProvider()} onDismiss={() => {}} />,
+    );
+
+    expect(markup).toContain("alert-glass");
+    expect(markup).toContain('data-variant="warning"');
+  });
+
   it("labels error dismiss controls with the correct severity", () => {
     const markup = renderToStaticMarkup(
       <ProviderStatusBanner
diff --git a/apps/web/src/components/chat/ProviderStatusBanner.tsx b/apps/web/src/components/chat/ProviderStatusBanner.tsx
index a64a94bc1c38bba4def7d3665fd9b1032f31a36c..f82c17b13ddde00e989abc3efc972eeb11b8c9f9 100644
--- a/apps/web/src/components/chat/ProviderStatusBanner.tsx
+++ b/apps/web/src/components/chat/ProviderStatusBanner.tsx
@@ -46,11 +46,12 @@ export const ProviderStatusBanner = memo(function ProviderStatusBanner({
     <div className="pointer-events-auto mx-auto w-fit max-w-[calc(100%-2rem)] pt-3">
       <div
         className={cn(
-          "relative inline-flex items-center gap-3 rounded-xl border py-3 ps-3.5 pe-10 text-card-foreground text-sm",
+          "alert-glass relative inline-flex items-center gap-3 rounded-xl border py-3 ps-3.5 pe-10 text-card-foreground text-sm",
           status.status === "warning"
-            ? "border-warning/32 bg-warning/4 [&_svg]:text-warning"
-            : "border-destructive/32 bg-destructive/4 text-destructive-foreground [&_svg]:text-destructive",
+            ? "border-warning/32 [&_svg]:text-warning"
+            : "border-destructive/32 text-destructive-foreground [&_svg]:text-destructive",
         )}
+        data-variant={status.status === "warning" ? "warning" : "error"}
         role="alert"
       >
         <InfoIcon className="size-4 shrink-0" aria-hidden />
-- 
2.54.0