fix(web): stop the chat timeline reading through the provider status banner

[Bil0000]

Problem

The provider status banner floats above the message timeline — ChatView renders it in an
absolute inset-x-0 top-0 layer so it can appear without shifting the timeline's content height.

Its only backing, though, was a 4% variant tint (bg-warning/4 / bg-destructive/4). That is
effectively transparent, so the messages underneath stayed fully sharp and legible straight through
the card: code spans, inline chips and body copy all collided with the banner's own title and
message, and neither layer was readable.

Every other floating surface in the app already sits on an opaque, blurred backing — dialogs on
dialog-glass, menus/popovers/tooltips on dropdown-glass, and the composer banner stack on
alert-glass. The provider banner was the one overlay that opted out.

Fix

The banner now floats on alert-glass, the same surface ComposerBannerStack uses. That utility
already layers a 4% variant tint (selected via data-variant) over
color-mix(--background, var(--glass-opacity)) plus a saturating backdrop blur, so the banner keeps
its exact severity tinting while the timeline behind it is properly occluded. The per-variant
bg-*/4 classes are dropped because alert-glass supplies that tint itself.

The utility also carries the existing @supports not (backdrop-filter) fallback to a fully opaque
--background, so browsers without backdrop filters get a solid surface rather than a see-through one.

Scope

I swept the other floating overlays before settling on this one-surface change — the scroll-to-end
pill, terminal drawer controls, preview badges, mini player chrome, sidebar pills and every
ui/ popup surface all already back themselves with glass or a solid bg-background/bg-popover.
The provider status banner was the only overlay left reading through to the content below it.

Alert itself is left alone on purpose: its translucent variants are correct for the inline,
in-flow usages in settings and the sidebar, where there is nothing behind them to bleed through.

Before / after

Before

After

Verification

• vp lint --report-unused-disable-directives — exit 0, no new warnings
• vp run --filter @t3tools/web typecheck — clean
• vp run --filter @t3tools/web test — 1776 passed; the single failure
  (src/lib/imageCompression.test.ts timing out on canvas encoding) reproduces identically on an
  unmodified tree and is unrelated to this change
• Added a regression test asserting the banner renders on the glass surface with its severity
  data-variant, so a future refactor cannot silently drop the backing again

Note

Fix chat timeline from reading through the provider status banner

Replaces the background color classes (bg-warning/4, bg-destructive/4) on ProviderStatusBanner with the alert-glass class, which provides a solid visual barrier so the chat timeline no longer shows through. A data-variant attribute (warning or error) is added to the alert element to preserve semantic styling hooks.

^{Macroscope summarized 47f06a5.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 56618a19-b2fb-460e-9dd7-9b317f132162

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved 47f06a5

Purely visual CSS change that adds a glass effect to prevent the chat timeline from showing through the provider status banner. The change is self-contained, includes a test, and has no runtime logic impact.

^{You can customize Macroscope's approvability policy. Learn more.}