fix: make composer banners opaque

[gwkline]

Summary

• make the shared composer banner surface fully opaque
• preserve a subtle semantic tint for error, info, success, and warning banners
• remove the now-unnecessary backdrop blur from composer banners

Why

Composer banners used a shared translucent glass surface. Text and other high-contrast content behind a banner could show through and make its message difficult to read. Fixing only the error variant left the same underlying problem in warning and informational banners.

Impact

Before:

After:

Root cause

The base .alert-glass rule mixed the application background with transparency and applied backdrop blur. Every semantic variant inherited that translucent surface; the variants only changed its tint.

The fix makes the shared surface a solid mix of 96% application background and 4% semantic tint, so current and future variants cannot expose content behind them.

Validation

• vp fmt --check apps/web/src/index.css
• vp test run apps/web/src/components/chat/ComposerBannerStack.test.tsx (3 tests passed)
• verified the rendered connection-error surface in an isolated web environment
• confirmed error, info, success, and warning backgrounds have no alpha channel or background image in both light and dark themes

[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: 2b5c4415-cb4f-4001-8980-18df64c9752f

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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]

🟢 Low src/index.css:548

The .alert-glass rule now applies an opaque background and drops backdrop-filter for every variant, so info, success, and warning composer banners lose their translucent glass treatment. ComposerBannerStackAlert applies .alert-glass to all variants, so the opaque override should be scoped to .alert-glass[data-variant="error"].

🤖 Copy this AI Prompt to have your agent fix this:

In file @apps/web/src/index.css around line 548:

The `.alert-glass` rule now applies an opaque `background` and drops `backdrop-filter` for every variant, so `info`, `success`, and `warning` composer banners lose their translucent glass treatment. `ComposerBannerStackAlert` applies `.alert-glass` to all variants, so the opaque override should be scoped to `.alert-glass[data-variant="error"]`.