fix(desktop): route overlays on shadow-nous + ladder rungs, single scrim source

apps/desktop/DESIGN.md

@@ -81,6 +81,11 @@ Both are CSS vars in `src/styles.css` — tune in one place, everything inherits
 Don't add per-overlay `shadow-[…]` or `border-(--ui-stroke-secondary)`
 one-offs; if elevation needs to change, change the token.
 
+Every overlay dims the surface beneath it with the shared `scrim-nous`
+utility (`--ui-scrim` fill + blur) — the single source for the dim/blur layer
+behind dialogs, sheets, route overlays, and pickers. Don't hand-roll
+`bg-black/22 backdrop-blur-[0.125rem]` copies.
+
 Menus and popovers use their own shared `shadow-md` +
 `--ui-stroke-secondary` primitive treatment. Drag affordances may use tokenized
 dashed targets and local blur. These are semantic surface classes, not licenses
@@ -96,6 +101,7 @@ for call-site shadow or border inventions.
 | `--ui-text-primary / -secondary / -tertiary` | text hierarchy |
 | `--ui-bg-quaternary` | soft control fill (secondary button) |
 | `--ui-widget-surface-background` | fill for inline chat widgets (`WIDGET_SHELL_CLASS`) |
+| `--ui-scrim` | overlay dim layer (fill of the shared `scrim-nous` utility) |
 | `--chrome-action-hover` | hover fill for quiet controls |
 | `--theme-primary`, `--ui-accent` | brand/accent |
 
@@ -213,11 +219,13 @@ Notes:
 - Respect `AppShell` overlay ownership. Persistent terminal/content layers,
   route overlays, dialogs, and boot surfaces must not compete through ad-hoc
   z-index literals. Pick a rung of the ladder in `styles.css` instead —
-  `--z-modal-backdrop` / `--z-modal` / `--z-modal-popover`, `--z-over-modal`
-  (toasts, tooltips, command surfaces) and `--z-over-modal-content`,
-  `--z-switcher-backdrop` / `--z-switcher`, then the boot chain
-  `--z-connecting` → `--z-onboarding` → `--z-setup` → `--z-crash`. Plain
-  `z-10`/`z-20` are still right for stacking *within* one component.
+  `--z-route-overlay-backdrop` / `--z-route-overlay` (Settings, Command Center,
+  Cron, Profiles, Agents, Starmap — below dialogs), `--z-modal-backdrop` /
+  `--z-modal` / `--z-modal-popover`, `--z-over-modal` (toasts, tooltips,
+  command surfaces) and `--z-over-modal-content`, `--z-switcher-backdrop` /
+  `--z-switcher`, then the boot chain `--z-connecting` → `--z-onboarding` →
+  `--z-setup` → `--z-crash`. Plain `z-10`/`z-20` are still right for stacking
+  *within* one component.
 
 ## Iconography & brand
 

apps/desktop/src/app/overlays/overlay-view.tsx

@@ -65,7 +65,7 @@ export function OverlayView({
   return (
     <div
       className={cn(
-        'fixed inset-0 z-50 bg-black/22 backdrop-blur-[0.125rem]',
+        'fixed inset-0 z-(--z-route-overlay-backdrop) scrim-nous',
         // Equidistant inset on every side. The top value is driven by the
         // titlebar height so the card clears the OS traffic-lights vertically;
         // since the card top already sits below them, the left needs no extra
@@ -95,7 +95,7 @@ export function OverlayView({
     >
       <div
         className={cn(
-          'relative flex h-full min-h-0 flex-col overflow-hidden rounded-xl border border-(--ui-stroke-secondary) bg-(--ui-chat-surface-background) shadow-md',
+          'relative flex h-full min-h-0 flex-col overflow-hidden rounded-xl border border-(--stroke-nous) bg-(--ui-chat-surface-background) shadow-nous',
           rootClassName
         )}
       >

apps/desktop/src/components/session-picker.tsx

@@ -45,7 +45,7 @@ export function SessionPickerDialog({ activeStoredSessionId, onOpenChange, onRes
   return (
     <DialogPrimitive.Root onOpenChange={onOpenChange} open={open}>
       <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className="fixed inset-0 z-(--z-over-modal) bg-black/15 backdrop-blur-[1px] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0" />
+        <DialogPrimitive.Overlay className="fixed inset-0 z-(--z-over-modal) scrim-nous data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0" />
         <DialogPrimitive.Content
           aria-describedby={undefined}
           className="fixed left-1/2 top-[14vh] z-(--z-over-modal-content) w-[min(40rem,calc(100vw-2rem))] -translate-x-1/2 overflow-hidden rounded-xl border border-(--ui-stroke-secondary) bg-(--ui-chat-bubble-background) shadow-lg duration-150 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-2 data-[state=open]:zoom-in-95"

apps/desktop/src/components/ui/dialog.tsx

@@ -27,7 +27,7 @@ function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dial
   return (
     <DialogPrimitive.Overlay
       className={cn(
-        'fixed inset-0 z-(--z-modal-backdrop) pointer-events-auto bg-black/22 backdrop-blur-[0.125rem] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+        'fixed inset-0 z-(--z-modal-backdrop) pointer-events-auto scrim-nous data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
         className
       )}
       data-slot="dialog-overlay"

apps/desktop/src/components/ui/sheet.tsx

@@ -27,7 +27,7 @@ function SheetOverlay({ className, ...props }: React.ComponentProps<typeof Sheet
   return (
     <SheetPrimitive.Overlay
       className={cn(
-        'fixed inset-0 z-50 bg-black/22 backdrop-blur-[0.125rem] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+        'fixed inset-0 z-(--z-modal-backdrop) scrim-nous data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
         className
       )}
       data-slot="sheet-overlay"
@@ -53,7 +53,7 @@ function SheetContent({
       <SheetOverlay />
       <SheetPrimitive.Content
         className={cn(
-          'fixed z-50 flex flex-col gap-3 border-(--ui-stroke-secondary) bg-(--ui-sidebar-surface-background) text-[length:var(--conversation-text-font-size)] shadow-md transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500',
+          'fixed z-(--z-modal) flex flex-col gap-3 border-(--ui-stroke-secondary) bg-(--ui-sidebar-surface-background) text-[length:var(--conversation-text-font-size)] shadow-md transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500',
           side === 'right' &&
             'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
           side === 'left' &&

apps/desktop/src/styles.css

@@ -216,6 +216,10 @@
     --z-modal: 130;
     /* A select/dropdown/popover opened from inside a modal, portaled to body. */
     --z-modal-popover: 140;
+    /* Route overlays (Settings, Command Center, Cron, Profiles, Agents,
+       Starmap) cover the app below dialogs, which may open on top of them. */
+    --z-route-overlay-backdrop: 100;
+    --z-route-overlay: 110;
     /* Must clear any open modal: toasts, tooltips, command-surface backdrops. */
     --z-over-modal: 200;
     --z-over-modal-content: 210;
@@ -346,6 +350,9 @@
     --ui-inline-code-background: color-mix(in srgb, #141414 5%, transparent);
     --ui-inline-code-foreground: color-mix(in srgb, #141414 88%, transparent);
     --ui-selection-background: color-mix(in srgb, #ffd24a 55%, transparent);
+    /* Overlay scrim — the single dim/blur layer behind dialogs, sheets, route
+       overlays, and pickers. One source: tune here, every overlay inherits. */
+    --ui-scrim: color-mix(in srgb, #000 22%, transparent);
 
     --dt-background: var(--ui-bg-chrome);
     --dt-foreground: var(--ui-text-primary);
@@ -807,6 +814,13 @@
   }
 }
 
+/* Overlay scrim — dim + blur for dialogs, sheets, route overlays, pickers.
+   Replaces per-call-site `bg-black/22 backdrop-blur-[0.125rem]` copies. */
+@utility scrim-nous {
+  background-color: var(--ui-scrim);
+  backdrop-filter: blur(0.125rem);
+}
+
 @keyframes arc-border {
   0% {
     background-position: 15% 15%;