Context
Exploratory spike — lives on its own branch, ships independently, non-blocking to the rest of the redesign. Test whether backdrop-blur / backdrop-saturate treatments on key surfaces feel premium without hurting mobile perf.
Approach
The codebase already has the foundation: --color-whiteAlpha-{50..900} tokens are used throughout (Composer, DrawerListItem, ToolCard, TxStepCard, ReceiveUI).
- Layer
backdrop-blur-md / backdrop-saturate-150 on the prompt box, sidebar, drawers, and tool cards.
- Mobile testing is required —
backdrop-filter is expensive on low-end devices. Test on physical mobile + via the existing useIsMobile hook (apps/agentic-chat/src/hooks/use-mobile.ts, 768px breakpoint).
- Graceful degradation:
backdrop-blur-none md:backdrop-blur-md where perf warrants it.
Acceptance criteria
- Feels premium on desktop.
- Doesn't drop frames on a mid-range Android.
- Degrades gracefully on low-end mobile.
Verification
bun run lint
bun run type-check
bun test
Visual/perf QA: test on desktop + physical mobile; verify no frame drops and the glass effect reads correctly across light/dark surfaces.
Context
Exploratory spike — lives on its own branch, ships independently, non-blocking to the rest of the redesign. Test whether
backdrop-blur/backdrop-saturatetreatments on key surfaces feel premium without hurting mobile perf.Approach
The codebase already has the foundation:
--color-whiteAlpha-{50..900}tokens are used throughout (Composer,DrawerListItem,ToolCard,TxStepCard,ReceiveUI).backdrop-blur-md/backdrop-saturate-150on the prompt box, sidebar, drawers, and tool cards.backdrop-filteris expensive on low-end devices. Test on physical mobile + via the existinguseIsMobilehook (apps/agentic-chat/src/hooks/use-mobile.ts, 768px breakpoint).backdrop-blur-none md:backdrop-blur-mdwhere perf warrants it.Acceptance criteria
Verification
bun run lint bun run type-check bun testVisual/perf QA: test on desktop + physical mobile; verify no frame drops and the glass effect reads correctly across light/dark surfaces.