improvement(ui): give the two full-screen takeovers named design-system layers

.agents/skills/emcn-design-review/SKILL.md

@@ -39,7 +39,7 @@ Use CSS variable pattern (`text-[var(--text-primary)]`), never Tailwind semantic
 **Surfaces**: `--bg`, `--surface-1` through `--surface-7`, `--surface-hover`, `--surface-active`
 **Borders**: `--border`, `--border-1`, `--border-muted`
 **Brand/accent**: `--brand-secondary`, `--brand-accent`
-**Z-Index**: `--z-dropdown` (100), `--z-modal` (200), `--z-popover` (300), `--z-tooltip` (400), `--z-toast` (500)
+**Z-Index**: `--z-dropdown` (100), `--z-toast` (150), `--z-modal` (200), `--z-popover` (300), `--z-tooltip` (400), `--z-takeover` (500), `--z-shell-gate` (600)
 **Shadows**: `shadow-subtle`, `shadow-medium`, `shadow-overlay`, `shadow-card`
 **Badges**: `--badge-*` semantic families (success/error/gray/blue/purple/orange/amber/teal/cyan/pink, each with `-bg`/`-text`)
 

apps/sim/app/_shell/desktop-update-gate.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import type { DesktopUpdateState } from '@sim/desktop-bridge'
-import { Button, useNativeSurfaceOcclusionReady } from '@sim/emcn'
+import { Chip, useNativeSurfaceOcclusionReady } from '@sim/emcn'
 import { getDesktopBridge, getDesktopShellVersion, getDesktopUpdates } from '@/lib/desktop'
 import { isShellOutdated } from '@/lib/desktop/min-version'
 
@@ -41,11 +41,11 @@ function gateActionFor(state: DesktopUpdateState): GateAction {
   }
   switch (state.status) {
     case 'checking':
-      return { label: 'Checking for updates...', disabled: true, onClick: () => {} }
+      return { label: 'Checking for updates…', disabled: true, onClick: () => {} }
     case 'downloading':
       return {
         label:
-          state.percent !== undefined ? `Downloading ${state.percent}%` : 'Downloading update...',
+          state.percent !== undefined ? `Downloading ${state.percent}%` : 'Downloading update…',
         disabled: true,
         onClick: () => {},
       }
@@ -97,8 +97,8 @@ export function DesktopUpdateGate() {
 
   return (
     <div
-      className='fixed inset-0 z-[9999] flex flex-col items-center justify-center gap-4 bg-[var(--bg)] px-8 text-center'
-      style={{ opacity: nativeSurfaceReady ? 1 : 0 }}
+      className='fixed inset-0 z-[var(--z-shell-gate)] flex flex-col items-center justify-center gap-4 bg-[var(--bg)] px-8 text-center'
+      style={{ visibility: nativeSurfaceReady ? undefined : 'hidden' }}
       data-native-surface-occlusion='takeover'
     >
       <div className='flex max-w-sm flex-col gap-2'>
@@ -108,11 +108,11 @@ export function DesktopUpdateGate() {
           the update to keep going.
         </p>
       </div>
-      <Button variant='primary' disabled={action.disabled} onClick={action.onClick}>
+      <Chip variant='primary' disabled={action.disabled} onClick={action.onClick}>
         {action.label}
-      </Button>
+      </Chip>
       {updateState.status === 'error' && (
-        <p className='text-[var(--text-muted)] text-xs'>
+        <p className='text-[var(--text-error)] text-xs'>
           The update could not be downloaded. Check your connection and try again.
         </p>
       )}

apps/sim/app/_styles/globals.css

@@ -58,6 +58,13 @@
   --z-modal: 200;
   --z-popover: 300;
   --z-tooltip: 400;
+  /* Full-screen takeovers replace the app entirely, so they sit above every
+     other layer including poppers. The desktop shell gate is the outermost of
+     them: an incompatible shell invalidates everything the web app renders
+     inside it, so it outranks in-app takeovers rather than tying with them and
+     letting document order decide. */
+  --z-takeover: 500;
+  --z-shell-gate: 600;
 
   /* Shadow scale */
   --shadow-subtle: 0 2px 4px 0 rgba(0, 0, 0, 0.08);

apps/sim/app/workspace/[workspaceId]/components/session-expired/session-expired.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { Chip, useNativeSurfaceOcclusionReady } from '@sim/emcn'
+import { Chip, cn, useNativeSurfaceOcclusionReady } from '@sim/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { recoverFromStaleSession } from '@/lib/auth/stale-session-recovery'
 
@@ -64,11 +64,16 @@ export function SessionExpired() {
 
   return (
     <main
-      className='fixed inset-0 z-50 flex flex-col items-center justify-center gap-3 bg-[var(--surface-1)] p-6'
-      style={{ opacity: nativeSurfaceReady ? 1 : 0 }}
+      className='fixed inset-0 z-[var(--z-takeover)] flex flex-col items-center justify-center gap-3 bg-[var(--bg)] p-6 text-center'
+      style={{ visibility: nativeSurfaceReady ? undefined : 'hidden' }}
       data-native-surface-occlusion='takeover'
     >
-      <p className='text-[var(--text-muted)] text-sm'>
+      <p
+        className={cn(
+          'text-sm',
+          failed ? 'text-[var(--text-error)]' : 'text-[var(--text-secondary)]'
+        )}
+      >
         {failed ? `${subject}, but signing out failed.` : `${subject}. Signing you out…`}
       </p>
       {failed && (