fix(desktop): boot overlays stay opaque under window glass

The full-screen boot surfaces (connecting, onboarding, boot failure, root
crash fallback) paint their backdrop with --ui-chat-surface-background,
which the glass field turns transparent so <body> can be the one painter
(0483133842). That was harmless while glass shipped off; once it shipped
on by default (be3166607e) every boot overlay became a window onto the
shell behind it.

These overlays mask the whole app, so they declare data-glass-opaque —
the existing contract for surfaces that paint over siblings — which pins
the token back to opaque chrome under glass and changes nothing when
glass is off.
This commit is contained in:
emozilla
2026-08-21 12:44:24 -04:00
committed by brooklyn!
parent b2c4f1f376
commit f33b260afa
4 changed files with 26 additions and 3 deletions
@@ -284,7 +284,12 @@ export function BootFailureOverlay() {
if (view === 'connect') {
return (
<div className="fixed inset-0 z-(--z-setup) flex items-center justify-center bg-(--ui-chat-surface-background) p-6">
<div
className="fixed inset-0 z-(--z-setup) flex items-center justify-center bg-(--ui-chat-surface-background) p-6"
// Masks the whole app on boot failure — must stay filled under window
// glass. Contract: `[data-glass-opaque]` in styles.css.
data-glass-opaque=""
>
<div className="flex max-h-[86vh] w-full max-w-[46rem] flex-col overflow-hidden rounded-xl border border-(--stroke-nous) bg-(--ui-chat-bubble-background) shadow-nous">
{/* Subtle back affordance (projects/overlay idiom): muted → foreground
on hover, no divider. */}
@@ -307,7 +312,12 @@ export function BootFailureOverlay() {
}
return (
<div className="fixed inset-0 z-(--z-setup) flex items-center justify-center bg-(--ui-chat-surface-background) p-6">
<div
className="fixed inset-0 z-(--z-setup) flex items-center justify-center bg-(--ui-chat-surface-background) p-6"
// Masks the whole app on boot failure — must stay filled under window
// glass. Contract: `[data-glass-opaque]` in styles.css.
data-glass-opaque=""
>
<div className="w-full max-w-[40rem] overflow-hidden rounded-xl border border-(--stroke-nous) bg-(--ui-chat-bubble-background) shadow-nous">
<div className="flex items-start gap-3 px-5 py-4">
<ErrorIcon className="mt-0.5" size="1.25rem" />
@@ -143,7 +143,12 @@ function RootErrorFallback({ error, reset }: ErrorBoundaryFallbackProps) {
const { t } = useI18n()
return (
<div className="fixed inset-0 z-(--z-crash) grid place-items-center bg-(--ui-chat-surface-background) p-6">
<div
className="fixed inset-0 z-(--z-crash) grid place-items-center bg-(--ui-chat-surface-background) p-6"
// Masks a crashed app — must stay filled under window glass. Contract:
// `[data-glass-opaque]` in styles.css.
data-glass-opaque=""
>
<ErrorState
className="w-full max-w-[28rem]"
description={error.message || t.errors.boundaryDesc}
@@ -141,6 +141,10 @@ export function GatewayConnectingOverlay() {
'fixed inset-0 z-(--z-connecting) grid place-items-center bg-(--ui-chat-surface-background) transition-opacity duration-500 ease-out',
overlayHidden ? 'pointer-events-none opacity-0' : 'opacity-100'
)}
// Masks the whole app while booting — must stay filled under window
// glass or the shell shows through. Contract: `[data-glass-opaque]`
// in styles.css.
data-glass-opaque=""
>
<DecodeText
active={phase === 'live' && (previewing || connecting)}
@@ -308,6 +308,10 @@ export function DesktopOnboardingOverlay({
bare && leaving ? '[transition-delay:660ms]' : '',
leaving ? 'pointer-events-none opacity-0' : 'opacity-100'
)}
// Masks the whole app until onboarding finishes — must stay filled under
// window glass or the shell shows through. Contract:
// `[data-glass-opaque]` in styles.css.
data-glass-opaque=""
>
<div
className={cn(