fix(desktop): keep page headers clear of the traffic lights

In the desktop app, collapsing the sidebar hands the top-left of the screen
to the content pane — the macOS traffic lights and the sidebar expander
then sit over page content rather than over the sidebar. Every top-of-page
header bar drew straight underneath them, so back buttons and the
integrations/skills switcher were unreadable and unclickable.

The reason it hit all of them at once is that the bar's geometry was copied
verbatim into seven files, so nothing could reserve that lane in one place.
Extract it as PAGE_HEADER_BAR and fold the lane into its top padding via
`--workspace-content-title-bar-inset`, the variable the content pane
already publishes for exactly this. That variable is 0px everywhere except
the macOS desktop app with the sidebar collapsed, so this is inert on the
web and on an expanded sidebar, where the lights sit over sidebar chrome
that already reserves its own lane.

Covers the settings shell, the credential/skill detail layout, the
integrations and skills switcher, integration block detail and its
fallback, and both upgrade headers. A guard test fails with the file named
if any page re-derives the bar instead of composing it.

Author: Waleed Latif

apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/credential-detail-layout.tsx

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react'
+import { cn } from '@sim/emcn'
+import { PAGE_HEADER_BAR } from '@/components/page-header-bar'
 
 interface CredentialDetailLayoutProps {
   /** Back link rendered at the start of the fixed action bar. */
@@ -17,7 +19,7 @@ interface CredentialDetailLayoutProps {
 export function CredentialDetailLayout({ back, actions, children }: CredentialDetailLayoutProps) {
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
-      <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+      <div className={cn(PAGE_HEADER_BAR, 'justify-between')}>
         {back}
         {actions ? <div className='flex items-center'>{actions}</div> : null}
       </div>

apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail-fallback.tsx

@@ -2,6 +2,7 @@
 
 import { ChipLink } from '@sim/emcn'
 import { ArrowLeft } from 'lucide-react'
+import { PAGE_HEADER_BAR } from '@/components/page-header-bar'
 
 interface IntegrationBlockDetailFallbackProps {
   workspaceId: string
@@ -23,7 +24,7 @@ export function IntegrationBlockDetailFallback({
 }: IntegrationBlockDetailFallbackProps) {
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
-      <div className='flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+      <div className={PAGE_HEADER_BAR}>
         <ChipLink href={`/workspace/${workspaceId}/integrations`} leftIcon={ArrowLeft}>
           Integrations
         </ChipLink>

apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx

@@ -6,6 +6,7 @@ import { ArrowLeft, ArrowRight, Plus } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { useQueryState } from 'nuqs'
+import { PAGE_HEADER_BAR } from '@/components/page-header-bar'
 import {
   blockTypeToIconMap,
   type Integration,
@@ -129,7 +130,7 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
 
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
-      <div className='flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+      <div className={PAGE_HEADER_BAR}>
         <ChipLink href={`/workspace/${workspaceId}/integrations`} leftIcon={ArrowLeft}>
           Integrations
         </ChipLink>

apps/sim/app/workspace/[workspaceId]/integrations/components/integration-tabs-header/integration-tabs-header.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { ChipLink } from '@sim/emcn'
+import { PAGE_HEADER_BAR } from '@/components/page-header-bar'
 
 interface IntegrationTabsHeaderProps {
   active: 'integrations' | 'skills'
@@ -18,7 +19,7 @@ export function IntegrationTabsHeader({
   rightSlot,
 }: IntegrationTabsHeaderProps) {
   return (
-    <div className='flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+    <div className={PAGE_HEADER_BAR}>
       <ChipLink href={`/workspace/${workspaceId}/integrations`} active={active === 'integrations'}>
         Integrations
       </ChipLink>

apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx

@@ -5,6 +5,7 @@ import { ArrowLeft, Chip, toast } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useRouter } from 'next/navigation'
 import { useQueryState } from 'nuqs'
+import { PAGE_HEADER_BAR } from '@/components/page-header-bar'
 import { useSession } from '@/lib/auth/auth-client'
 import {
   getUpgradeCardCta,
@@ -99,7 +100,7 @@ export function Upgrade({ workspaceId }: UpgradeProps) {
 
     return (
       <div className='flex h-full flex-col bg-[var(--bg)]'>
-        <div className='flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+        <div className={PAGE_HEADER_BAR}>
           <Chip leftIcon={ArrowLeft} onClick={handleBack}>
             Back
           </Chip>
@@ -192,7 +193,7 @@ export function Upgrade({ workspaceId }: UpgradeProps) {
 
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
-      <div className='flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+      <div className={PAGE_HEADER_BAR}>
         <Chip leftIcon={ArrowLeft} onClick={handleBack}>
           Back
         </Chip>

apps/sim/components/page-header-bar.test.ts

@@ -0,0 +1,51 @@
+/**
+ * @vitest-environment node
+ */
+import { readdirSync, readFileSync, statSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'vitest'
+import { PAGE_HEADER_BAR } from '@/components/page-header-bar'
+
+/** The geometry every page header bar shares, minus the top padding. */
+const BAR_SIGNATURE = 'px-[16px]'
+const LANE_VAR = 'var(--workspace-content-title-bar-inset)'
+
+const ROOTS = ['app', 'components'].map((dir) => join(process.cwd(), dir))
+
+function* sourceFiles(dir: string): Generator<string> {
+  for (const entry of readdirSync(dir)) {
+    if (entry === 'node_modules' || entry.startsWith('.')) continue
+    const full = join(dir, entry)
+    if (statSync(full).isDirectory()) {
+      yield* sourceFiles(full)
+      continue
+    }
+    if (/\.tsx?$/.test(entry)) yield full
+  }
+}
+
+describe('PAGE_HEADER_BAR', () => {
+  it('reserves the desktop title-bar lane in its top padding', () => {
+    // Without this the bar sits under the macOS traffic lights and the sidebar
+    // expander whenever the sidebar is collapsed in the desktop app.
+    expect(PAGE_HEADER_BAR).toContain(LANE_VAR)
+    expect(PAGE_HEADER_BAR).toContain(BAR_SIGNATURE)
+  })
+
+  it('is the only definition of the page header bar geometry', () => {
+    const offenders: string[] = []
+    for (const root of ROOTS) {
+      for (const file of sourceFiles(root)) {
+        if (file.endsWith(join('components', 'page-header-bar.ts'))) continue
+        const source = readFileSync(file, 'utf8')
+        // A header bar re-derived inline: the shared gutter plus the old fixed top
+        // padding, rather than composing PAGE_HEADER_BAR.
+        if (source.includes(`${BAR_SIGNATURE} pt-[8.5px]`)) {
+          offenders.push(file.replace(process.cwd(), '.'))
+        }
+      }
+    }
+
+    expect(offenders).toEqual([])
+  })
+})

apps/sim/components/page-header-bar.ts

@@ -0,0 +1,18 @@
+/**
+ * The canonical top-of-page header bar worn by every workspace surface that puts a
+ * back chip, tab switcher, or page actions above its content (settings, integrations,
+ * skills, credential and block detail, upgrade).
+ *
+ * Single source of truth for that chrome — never re-derive the geometry per page. It
+ * was previously copied verbatim into seven files, which is how every one of them came
+ * to overlap the macOS traffic lights at once.
+ *
+ * The top padding folds in `--workspace-content-title-bar-inset`, the height the
+ * workspace content pane must leave clear for the desktop shell's inset title bar.
+ * That variable is `0px` everywhere except the macOS desktop app with the sidebar
+ * collapsed — the only arrangement where the content pane, rather than the sidebar,
+ * sits beneath the traffic lights and the sidebar expander — so this is inert on the
+ * web and costs consumers nothing.
+ */
+export const PAGE_HEADER_BAR =
+  'flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[calc(8.5px+var(--workspace-content-title-bar-inset))] pb-[8.5px]'

apps/sim/components/settings/settings-header.tsx

@@ -13,7 +13,8 @@ import {
   useRef,
   useState,
 } from 'react'
-import { Chip, ChipInput, ChipLink, Search, Tooltip } from '@sim/emcn'
+import { Chip, ChipInput, ChipLink, cn, Search, Tooltip } from '@sim/emcn'
+import { PAGE_HEADER_BAR } from '@/components/page-header-bar'
 
 const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect
 
@@ -123,7 +124,7 @@ export function SettingsHeaderShell({ children }: { children: ReactNode }) {
 
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
-      <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+      <div className={cn(PAGE_HEADER_BAR, 'justify-between')}>
         {back ? (
           <Chip leftIcon={back.icon} onClick={() => configRef?.current.back?.onSelect()}>
             {back.text}