fix(desktop): clear the traffic lights on every auth-shell surface

Only /login reserved the macOS traffic-light lane, so signup drew its logo
underneath the lights — and so did reset-password, sso, verify, the CLI auth
handoff, and the invite pages. The pre-paint script marks the lane on every
desktop route, so any surface that did not reserve it overlapped.

Ownership moves to `AuthShell`, which is the single source of truth for the frame
all of these wear, and it now reserves unconditionally. Per-route gating was the
wrong shape rather than merely incomplete: `/invite/[id]` is a dynamic segment, so
no route list could have covered it. `supportsDesktopTitleBar` therefore drops its
pathname argument — the caller mounting the controller is the signal, and only
`AuthShell` mounts it. Workspace routes never render it and keep their existing
`WorkspaceChrome`-owned listener, so the two never contend for the attribute.

Off the desktop shell `--desktop-title-bar-height` is `0px`, so the reservation and
the drag strip collapse to nothing and `.desktop-title-bar-page` is exactly the
`min-h-screen` these surfaces had before — web is unchanged. With the prop gone the
client auth layout was a bare passthrough, so the route layout renders the shell
directly and the passthrough is deleted.

Measured in the Electron renderer over CDP across /signup, /login, /reset-password
and /cli/auth: lane 40px, logo top 56px, zero overflow on each. /invite/[id]
redirects to login when signed out and was not measured directly.

The surface audit gains a `stripComments` helper that every negative assertion runs
through. These files document the shapes they avoid, so a bare `not.toContain` was
matching the prose explaining the fix and failing on correct code.

Author: waleedlatif1

apps/sim/app/(auth)/auth-layout-client.tsx

@@ -1,15 +1,13 @@
 import type { ReactNode } from 'react'
-import { cn } from '@sim/emcn'
 import Link from 'next/link'
+import { DesktopTitleBarController } from '@/app/_shell/desktop-title-bar'
 import { LogoMark, SimWordmark } from '@/app/(landing)/components/navbar/components'
 
 interface AuthShellProps {
   /** Centered content column (the form, status copy, etc.). */
   children: ReactNode
   /** Optional element pinned to the bottom of the shell (e.g. the support footer). */
   footer?: ReactNode
-  /** Reserve the native macOS title-bar lane for the desktop login route. */
-  reserveDesktopTitleBar?: boolean
 }
 
 /**
@@ -21,18 +19,20 @@ interface AuthShellProps {
  * the canvas/`--text-primary` surface, and renders a logo-only header that reuses
  * the landing {@link LogoMark} + {@link SimWordmark} at the same nav gutters. The
  * single content column is centered and capped for a calm single-form layout.
+ *
+ * The shell also owns the macOS traffic-light lane, unconditionally — every surface that
+ * wears it (the `(auth)` routes, the CLI auth handoff, the invite pages) sits outside
+ * workspace chrome and draws its logo where the lights are. Gating this per route left
+ * whichever surface was overlooked drawing underneath them, and a route list could not
+ * cover a dynamic segment like `/invite/[id]` anyway. Off the desktop shell
+ * `--desktop-title-bar-height` is `0px`, so the reservation and the drag strip both
+ * collapse to nothing and `.desktop-title-bar-page` is exactly `min-h-screen`.
  */
-export function AuthShell({ children, footer, reserveDesktopTitleBar = false }: AuthShellProps) {
+export function AuthShell({ children, footer }: AuthShellProps) {
   return (
-    <div
-      className={cn(
-        'light relative flex flex-col bg-[var(--bg)] text-[var(--text-primary)]',
-        reserveDesktopTitleBar ? 'desktop-title-bar-page' : 'min-h-screen'
-      )}
-    >
-      {reserveDesktopTitleBar && (
-        <div aria-hidden className='desktop-login-window-drag-region desktop-window-drag-region' />
-      )}
+    <div className='light desktop-title-bar-page relative flex flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
+      <DesktopTitleBarController />
+      <div aria-hidden className='desktop-login-window-drag-region desktop-window-drag-region' />
       <header>
         <nav className='mx-auto flex w-full max-w-[1446px] items-center px-12 py-4 max-sm:px-5 max-lg:px-8'>
           <Link href='/' aria-label='Sim home' className='flex h-[30px] items-center'>

apps/sim/app/(auth)/components/auth-shell.tsx

@@ -1,10 +1,10 @@
 import type { Metadata } from 'next'
-import AuthLayoutClient from '@/app/(auth)/auth-layout-client'
+import { AuthShell } from '@/app/(auth)/components'
 
 export const metadata: Metadata = {
   robots: { index: false, follow: false },
 }
 
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
-  return <AuthLayoutClient>{children}</AuthLayoutClient>
+  return <AuthShell>{children}</AuthShell>
 }

apps/sim/app/(auth)/layout.tsx

@@ -7,7 +7,18 @@ import { describe, expect, it } from 'vitest'
 /** Anchored to this file, not `process.cwd()`, which only resolves from `apps/sim`. */
 const read = (relativePath: string) => readFileSync(new URL(relativePath, import.meta.url), 'utf8')
 
-const authLayout = read('../(auth)/auth-layout-client.tsx')
+/**
+ * Source with comments removed.
+ *
+ * Every negative assertion here must run through this. These files document the shapes
+ * they deliberately avoid, so a bare `not.toContain('min-h-screen')` matches the prose
+ * explaining why `min-h-screen` is gone and fails on correct code. The mirror case is
+ * worse: prose containing a wanted token makes a positive assertion pass on broken code.
+ */
+const stripComments = (source: string) =>
+  source.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^\s*\/\/.*$/gm, '')
+
+const authLayout = read('../(auth)/layout.tsx')
 const authShell = read('../(auth)/components/auth-shell.tsx')
 const workspaceChrome = read(
   '../workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx'
@@ -23,12 +34,16 @@ const mothershipView = read(
 )
 
 describe('desktop title-bar surface audit', () => {
-  it('applies the safe-area shell only when the auth route is login', () => {
-    expect(authLayout).toContain("usePathname() === '/login'")
-    expect(authLayout).toContain('reserveDesktopTitleBar={isLogin}')
-    expect(authShell).toContain(
-      "reserveDesktopTitleBar ? 'desktop-title-bar-page' : 'min-h-screen'"
-    )
+  it('reserves the lane for every surface wearing the auth shell', () => {
+    // Signup, reset-password, sso, verify, the CLI handoff and the invite pages all wear
+    // this shell and sit under the same traffic lights. Reserving only on /login left the
+    // rest drawing their logo beneath them; per-route gating could not cover
+    // `/invite/[id]` either, so the shell owns the lane unconditionally.
+    expect(authShell).toContain('desktop-title-bar-page')
+    expect(authShell).toContain('<DesktopTitleBarController />')
+    expect(stripComments(authShell)).not.toContain('reserveDesktopTitleBar')
+    expect(stripComments(authShell)).not.toContain('min-h-screen')
+    expect(authLayout).toContain('<AuthShell>')
   })
 
   it('mounts a real drag surface across login and workspace title-bar lanes', () => {
@@ -93,20 +108,15 @@ describe('desktop title-bar surface audit', () => {
     // tall empty slab over the content. It now hugs its content and caps at the pane
     // height less the lane and the bottom gutter, so a long list still scrolls.
     expect(workspaceChrome).toContain('max-h-[calc(100%-var(--desktop-title-bar-height)-8px)]')
-    expect(workspaceChrome).not.toMatch(/PEEK_CARD_CHROME[\s\S]{0,240}?bottom-2/)
+    expect(stripComments(workspaceChrome)).not.toMatch(/PEEK_CARD_CHROME[\s\S]{0,240}?bottom-2/)
   })
 
   it('reserves the login lane inside the box, never as a collapsing margin', () => {
     // `body` carries `min-height: 100vh`, and a `margin-top` here collapses through it
     // (body is a plain block box, so it opens no BFC) and displaces body itself. The
     // document then measured one full lane taller than the viewport, which is what made
     // the desktop login page scroll. Verified live: 40px of overflow, now 0.
-    // Comments are stripped first: the rule documents why `margin-top` is wrong, and a
-    // raw `not.toContain` would match that prose instead of a declaration.
-    const rule = (globalStyles.match(/\.desktop-title-bar-page \{[^}]*\}/)?.[0] ?? '').replace(
-      /\/\*[\s\S]*?\*\//g,
-      ''
-    )
+    const rule = stripComments(globalStyles.match(/\.desktop-title-bar-page \{[^}]*\}/)?.[0] ?? '')
     expect(rule).toContain('padding-top: var(--desktop-title-bar-height)')
     expect(rule).toContain('min-height: 100vh')
     expect(rule).not.toContain('margin-top')

apps/sim/app/_shell/desktop-title-bar-surfaces.test.ts

@@ -5,13 +5,12 @@ import { describe, expect, it } from 'vitest'
 import { applyDesktopTitleBarMode, supportsDesktopTitleBar } from '@/app/_shell/desktop-title-bar'
 
 describe('desktop title bar', () => {
-  it('reserves traffic-light space only for desktop login on macOS', () => {
-    expect(supportsDesktopTitleBar('/login', 'Macintosh', true)).toBe(true)
-    expect(supportsDesktopTitleBar('/workspace/ws/home', 'Macintosh', true)).toBe(false)
-    expect(supportsDesktopTitleBar('/signup', 'Macintosh', true)).toBe(false)
-    expect(supportsDesktopTitleBar('/desktop/connect', 'Macintosh', true)).toBe(false)
-    expect(supportsDesktopTitleBar('/login', 'Windows NT 10.0', true)).toBe(false)
-    expect(supportsDesktopTitleBar('/login', 'Macintosh', false)).toBe(false)
+  it('reserves traffic-light space on macOS desktop, and nowhere else', () => {
+    // No route check by design — mounting the controller is the signal, and only
+    // `AuthShell` mounts it. A route list could not cover `/invite/[id]`.
+    expect(supportsDesktopTitleBar('Macintosh', true)).toBe(true)
+    expect(supportsDesktopTitleBar('Windows NT 10.0', true)).toBe(false)
+    expect(supportsDesktopTitleBar('Macintosh', false)).toBe(false)
   })
 
   it('sets, updates, and removes the shared document marker', () => {

apps/sim/app/_shell/desktop-title-bar.test.ts

@@ -1,18 +1,23 @@
 'use client'
 
 import { useEffect } from 'react'
-import { usePathname } from 'next/navigation'
 import { getDesktopBridge } from '@/lib/desktop'
 
 export type DesktopTitleBarMode = 'fullscreen' | 'inset' | null
 
-/** Only the macOS desktop login route reserves space outside workspace chrome. */
-export function supportsDesktopTitleBar(
-  pathname: string,
-  userAgent: string,
-  hasDesktopBridge: boolean
-): boolean {
-  return hasDesktopBridge && /Mac/i.test(userAgent) && pathname === '/login'
+/**
+ * Whether this surface reserves the macOS traffic-light lane itself.
+ *
+ * There is no route check: the caller mounting {@link DesktopTitleBarController} IS the
+ * signal. Only `AuthShell` mounts it, and every surface wearing that shell — the `(auth)`
+ * routes, the CLI auth handoff, the invite pages — sits outside workspace chrome and must
+ * clear the lights. Workspace routes never render it; `WorkspaceChrome` owns the lane
+ * there through its own listener, and two owners would fight over the attribute.
+ *
+ * A route list was the previous shape and could not survive `/invite/[id]`.
+ */
+export function supportsDesktopTitleBar(userAgent: string, hasDesktopBridge: boolean): boolean {
+  return hasDesktopBridge && /Mac/i.test(userAgent)
 }
 
 export function applyDesktopTitleBarMode(
@@ -27,16 +32,15 @@ export function applyDesktopTitleBarMode(
 }
 
 /**
- * Keeps the macOS login inset correct across native fullscreen transitions.
- * Workspace routes retain their existing WorkspaceChrome-owned listener.
+ * Keeps the inset correct across native fullscreen transitions, where the traffic lights
+ * disappear and the lane must collapse. Rendered by `AuthShell`; workspace routes retain
+ * their existing WorkspaceChrome-owned listener.
  */
 export function DesktopTitleBarController() {
-  const pathname = usePathname()
-
   useEffect(() => {
     const bridge = getDesktopBridge()
     const root = document.documentElement
-    if (!supportsDesktopTitleBar(pathname, navigator.userAgent, Boolean(bridge))) {
+    if (!supportsDesktopTitleBar(navigator.userAgent, Boolean(bridge))) {
       applyDesktopTitleBarMode(root, null)
       return
     }
@@ -61,7 +65,7 @@ export function DesktopTitleBarController() {
       disposed = true
       unsubscribe()
     }
-  }, [pathname])
+  }, [])
 
   return null
 }