fix(desktop): cover the shells behind the allowlist, and make the guard fail

Greptile was right on both counts, and the first one is worse than reported.

`LogoShell` was allowlisted as "marketing chrome, not reachable in the desktop
shell". That claim was simply false: it is the frame for `not-found`, the interfaces
shell, the desktop handoff shell, and the public-file access gates — so the password,
email, and SSO gates for `/f/[token]` all still drew under the traffic lights. The
allowlist existed to make risk visible and instead hid four surfaces behind one
unverified sentence. It now carries two entries, both checked: the landing shell (every
consumer lives under `app/(landing)/`) and the playground (calls `notFound()` unless
`NEXT_PUBLIC_ENABLE_PLAYGROUND` is set).

The lane's two halves also travelled separately, so `/oauth-error` and the public-file
view reserved the space without the drag strip — clearing the lights but leaving the
window with no title bar on those pages. `DesktopTitleBarLane` now ships both together
and the audit enforces the pairing.

Both new checks were unfailable when first written, and mutation testing is the only
reason that surfaced:

- the pairing check matched `DesktopTitleBarLane` anywhere in the file, so the import
  line satisfied it after the JSX was deleted;
- the coverage check matched `LogoShell` anywhere, so a shell's own definition file
  self-certified as covered.

Both now match JSX usage (`/<LogoShell\b/`). Reverting either fix, and deleting either
half of the lane, now fails.

Measured over CDP: /oauth-error and the LogoShell-based 404 each reserve 40px, carry the
drag strip, and overflow by zero, with the logo at 56px.

Author: waleedlatif1

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import Link from 'next/link'
-import { DesktopTitleBarController } from '@/app/_shell/desktop-title-bar'
+import { DesktopTitleBarLane } from '@/app/_shell/desktop-title-bar'
 import { LogoMark, SimWordmark } from '@/app/(landing)/components/navbar/components'
 
 interface AuthShellProps {
@@ -31,8 +31,7 @@ interface AuthShellProps {
 export function AuthShell({ children, footer }: AuthShellProps) {
   return (
     <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' />
+      <DesktopTitleBarLane />
       <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/(interfaces)/resume/[workflowId]/[executionId]/loading.tsx

@@ -1,8 +1,10 @@
 import { Skeleton } from '@sim/emcn'
+import { DesktopTitleBarLane } from '@/app/_shell/desktop-title-bar'
 
 export default function ResumeLoading() {
   return (
-    <div className='min-h-screen bg-background'>
+    <div className='desktop-title-bar-page bg-background'>
+      <DesktopTitleBarLane />
       <div className='border-b px-4 py-3'>
         <div className='mx-auto flex max-w-[1200px] items-center justify-between'>
           <Skeleton className='h-[24px] w-[80px] rounded-[4px]' />

apps/sim/app/(landing)/components/logo-shell/logo-shell.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 import { cn } from '@sim/emcn'
 import Link from 'next/link'
+import { DesktopTitleBarLane } from '@/app/_shell/desktop-title-bar'
 import { LogoMark, SimWordmark } from '@/app/(landing)/components/navbar/components'
 
 /**
@@ -26,7 +27,8 @@ interface LogoShellProps {
 
 export function LogoShell({ children, center = false, footer }: LogoShellProps) {
   return (
-    <div className='light relative flex min-h-screen flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
+    <div className='light desktop-title-bar-page relative flex flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
+      <DesktopTitleBarLane />
       <header>
         <nav className='mx-auto flex w-full max-w-[1460px] items-center px-20 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/_shell/desktop-title-bar-surfaces.test.ts

@@ -25,6 +25,7 @@ const workspaceChrome = read(
 )
 const sidebar = read('../workspace/[workspaceId]/w/components/sidebar/sidebar.tsx')
 const globalStyles = read('../_styles/globals.css')
+const desktopTitleBar = read('../_shell/desktop-title-bar.tsx')
 const pageHeaderBar = read('../../components/page-header-bar.ts')
 const resourceHeader = read(
   '../workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx'
@@ -40,7 +41,7 @@ describe('desktop title-bar surface audit', () => {
     // 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(authShell).toContain('<DesktopTitleBarLane />')
     expect(stripComments(authShell)).not.toContain('reserveDesktopTitleBar')
     expect(stripComments(authShell)).not.toContain('min-h-screen')
     expect(authLayout).toContain('<AuthShell>')
@@ -49,7 +50,7 @@ describe('desktop title-bar surface audit', () => {
   it('mounts a real drag surface across login and workspace title-bar lanes', () => {
     const dragRegion = globalStyles.match(/\.desktop-window-drag-region\s*\{([^}]*)\}/)?.[1]
 
-    expect(authShell).toContain('desktop-login-window-drag-region')
+    expect(desktopTitleBar).toContain('desktop-login-window-drag-region')
     expect(workspaceChrome).toContain('desktop-workspace-window-drag-region')
     expect(workspaceChrome).toContain("isCollapsed ? 'h-[var(--desktop-title-bar-height)]' : 'h-2'")
     // The sidebar's lane strip composes the same two classes instead of
@@ -165,14 +166,20 @@ describe('desktop title-bar surface audit', () => {
  */
 const LANE_EXEMPT: Record<string, string> = {
   'app/(landing)/components/landing-shell/landing-shell.tsx':
-    'Marketing chrome. The desktop shell boots straight to /login or a workspace and has no path to the landing routes.',
-  'app/(landing)/components/logo-shell/logo-shell.tsx':
-    'Marketing chrome, same reasoning as landing-shell.',
-  'app/playground/page.tsx': 'Dev-only scratch route, not shipped in the desktop shell.',
-  'app/(interfaces)/resume/[workflowId]/[executionId]/loading.tsx':
-    'Embedded interface surface rendered inside a host page, never as the desktop window root.',
+    'Marketing chrome. Verified: every consumer lives under app/(landing)/, and the desktop shell boots to /login or a workspace with no path to those routes.',
+  'app/playground/page.tsx':
+    'Verified dev-only: the page calls notFound() unless NEXT_PUBLIC_ENABLE_PLAYGROUND is set.',
 }
 
+/**
+ * Shells that reserve the lane for whatever they wrap.
+ *
+ * Matched as JSX usage (`<AuthShell`), never as a bare identifier: an import line, or a
+ * shell's own definition file mentioning its name, would otherwise self-certify as
+ * covered. Both mistakes were in the first draft of this check and made it unfailable.
+ */
+const LANE_AWARE_SHELL_USAGE = /<(AuthShell|LogoShell)\b/
+
 describe('desktop traffic-light lane coverage', () => {
   it('leaves no full-viewport root outside workspace chrome unaccounted for', () => {
     const appDir = new URL('../', import.meta.url)
@@ -184,10 +191,30 @@ describe('desktop traffic-light lane coverage', () => {
       const source = stripComments(read(`../${file.slice('app/'.length)}`))
       const fillsViewport = /\b(min-h-screen|h-screen)\b/.test(source)
       if (!fillsViewport) return false
-      const laneAware = source.includes('desktop-title-bar-page') || source.includes('AuthShell')
+      // Composition counts: a surface is covered if it wears a shell that reserves the
+      // lane. `LogoShell` was previously allowlisted as marketing chrome — a claim that
+      // was simply false, and it hid not-found, the interfaces shell, the desktop handoff
+      // shell and the public-file access gates behind one wrong sentence.
+      const laneAware =
+        source.includes('desktop-title-bar-page') || LANE_AWARE_SHELL_USAGE.test(source)
       return !laneAware && !(file in LANE_EXEMPT)
     })
 
     expect(unaccounted).toEqual([])
   })
+
+  it('never reserves the lane without also making it draggable', () => {
+    const appDir = new URL('../', import.meta.url)
+    const orphaned = readdirSync(appDir, { recursive: true, encoding: 'utf8' })
+      .filter((f) => f.endsWith('.tsx'))
+      .map((f) => `app/${f}`)
+      .filter((file) => {
+        const source = stripComments(read(`../${file.slice('app/'.length)}`))
+        // The class alone clears the lights but leaves the strip undraggable, so the
+        // window loses its title bar on that page. Shipped that way twice in this PR.
+        return source.includes('desktop-title-bar-page') && !/<DesktopTitleBarLane\b/.test(source)
+      })
+
+    expect(orphaned).toEqual([])
+  })
 })

apps/sim/app/_shell/desktop-title-bar.tsx

@@ -31,6 +31,24 @@ export function applyDesktopTitleBarMode(
   root.setAttribute('data-sim-desktop-title-bar', mode)
 }
 
+/**
+ * Reserves the macOS traffic-light lane for a full-viewport surface outside workspace
+ * chrome. Pair it with `desktop-title-bar-page` on the surface's own root.
+ *
+ * The two halves ship together on purpose. Reserving the space without this leaves the
+ * lane visually clear but undraggable — the window loses its title bar on that page —
+ * and that is exactly what happened when `/oauth-error` and the public-file view were
+ * given the class alone. The surface audit enforces the pairing.
+ */
+export function DesktopTitleBarLane() {
+  return (
+    <>
+      <DesktopTitleBarController />
+      <div aria-hidden className='desktop-login-window-drag-region desktop-window-drag-region' />
+    </>
+  )
+}
+
 /**
  * Keeps the inset correct across native fullscreen transitions, where the traffic lights
  * disappear and the lane must collapse. Rendered by `AuthShell`; workspace routes retain

apps/sim/app/f/[token]/public-file-view.tsx

@@ -5,6 +5,7 @@ import { Chip } from '@sim/emcn'
 import { Download } from '@sim/emcn/icons'
 import Link from 'next/link'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
+import { DesktopTitleBarLane } from '@/app/_shell/desktop-title-bar'
 import { SimWordmark } from '@/app/(landing)/components/navbar/components'
 import { buildProvenance } from '@/app/f/[token]/utils'
 import { FileViewer } from '@/app/workspace/[workspaceId]/files/components/file-viewer'
@@ -66,6 +67,7 @@ export function PublicFileView({
 
   return (
     <div className='light desktop-title-bar-page flex flex-col bg-[var(--bg)]'>
+      <DesktopTitleBarLane />
       <header className='sticky top-0 z-10 flex items-center justify-between gap-4 border-[var(--border)] border-b bg-[var(--bg)] px-4 py-3'>
         <div className='flex min-w-0 items-center gap-3'>
           {!brand.logoUrl && (

apps/sim/app/oauth-error/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from 'next'
+import { DesktopTitleBarLane } from '@/app/_shell/desktop-title-bar'
 
 export const metadata: Metadata = {
   title: 'Sign-in couldn’t be completed',
@@ -37,6 +38,7 @@ export default async function OAuthErrorPage({ searchParams }: OAuthErrorPagePro
 
   return (
     <main className='desktop-title-bar-page flex items-center justify-center px-6'>
+      <DesktopTitleBarLane />
       <div className='max-w-sm text-center'>
         <h1 className='font-semibold text-foreground text-lg'>Couldn’t complete that</h1>
         <p className='mt-2 text-muted-foreground text-sm'>{messageForError(code)}</p>