From d2096827923700eb96f44890cde22fedbaad8938 Mon Sep 17 00:00:00 2001
From: Theodore Li <teddy@zenobiapay.com>
Date: Tue, 24 Mar 2026 10:51:23 -0700
Subject: [PATCH 1/5] Allow admin users to assume user sessions

---
 .../app/_shell/providers/session-provider.tsx |  1 +
 .../app/workspace/[workspaceId]/layout.tsx    | 58 ++++++++++++++++---
 .../settings/[section]/settings.tsx           |  3 +-
 .../settings/components/admin/admin.tsx       | 39 +++++++++++--
 .../settings-sidebar/settings-sidebar.tsx     |  4 +-
 .../emcn/components/banner/banner.tsx         | 31 ++++++++++
 apps/sim/components/emcn/components/index.ts  |  1 +
 apps/sim/hooks/queries/admin-users.ts         | 24 ++++++++
 8 files changed, 147 insertions(+), 14 deletions(-)
 create mode 100644 apps/sim/components/emcn/components/banner/banner.tsx

diff --git a/apps/sim/app/_shell/providers/session-provider.tsx b/apps/sim/app/_shell/providers/session-provider.tsx
index 7678f8b100b..b2fe1fb43f2 100644
--- a/apps/sim/app/_shell/providers/session-provider.tsx
+++ b/apps/sim/app/_shell/providers/session-provider.tsx
@@ -21,6 +21,7 @@ export type AppSession = {
     id?: string
     userId?: string
     activeOrganizationId?: string
+    impersonatedBy?: string | null
   }
 } | null
 
diff --git a/apps/sim/app/workspace/[workspaceId]/layout.tsx b/apps/sim/app/workspace/[workspaceId]/layout.tsx
index 45a92298f32..508552e1cde 100644
--- a/apps/sim/app/workspace/[workspaceId]/layout.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/layout.tsx
@@ -1,24 +1,66 @@
-import { ToastProvider } from '@/components/emcn'
+import { Banner, Button, ToastProvider } from '@/components/emcn'
 import { GlobalCommandsProvider } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { ProviderModelsLoader } from '@/app/workspace/[workspaceId]/providers/provider-models-loader'
 import { SettingsLoader } from '@/app/workspace/[workspaceId]/providers/settings-loader'
 import { WorkspacePermissionsProvider } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import { useSession } from '@/lib/auth/auth-client'
+import { useStopImpersonating } from '@/hooks/queries/admin-users'
 import { Sidebar } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
 
+function ImpersonationBanner() {
+  const { data: session, isPending } = useSession()
+  const stopImpersonating = useStopImpersonating()
+  const userLabel = session?.user?.name || 'this user'
+  const userEmail = session?.user?.email
+
+  if (isPending || !session?.session?.impersonatedBy) {
+    return null
+  }
+
+  return (
+    <Banner variant='destructive'>
+      <div className='mx-auto flex max-w-[1400px] items-center justify-between gap-[12px]'>
+        <p className='text-[13px] text-red-700 dark:text-red-300'>
+          Impersonating {userLabel}
+          {userEmail ? ` (${userEmail})` : ''}. Changes will apply to this account until you switch
+          back.
+        </p>
+        <Button
+          variant='destructive'
+          className='h-[28px] shrink-0 px-[8px] text-[12px]'
+          onClick={() =>
+            stopImpersonating.mutate(undefined, {
+              onSuccess: () => {
+                window.location.assign('/workspace')
+              },
+            })
+          }
+          disabled={stopImpersonating.isPending}
+        >
+          {stopImpersonating.isPending ? 'Returning...' : 'Stop impersonating'}
+        </Button>
+      </div>
+    </Banner>
+  )
+}
+
 export default function WorkspaceLayout({ children }: { children: React.ReactNode }) {
   return (
     <ToastProvider>
       <SettingsLoader />
       <ProviderModelsLoader />
       <GlobalCommandsProvider>
-        <div className='flex h-screen w-full bg-[var(--surface-1)]'>
+        <div className='flex h-screen w-full flex-col overflow-hidden bg-[var(--surface-1)]'>
+          <ImpersonationBanner />
           <WorkspacePermissionsProvider>
-            <div className='shrink-0' suppressHydrationWarning>
-              <Sidebar />
-            </div>
-            <div className='flex min-w-0 flex-1 flex-col p-[8px] pl-0'>
-              <div className='flex-1 overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)]'>
-                {children}
+            <div className='flex min-h-0 flex-1'>
+              <div className='shrink-0' suppressHydrationWarning>
+                <Sidebar />
+              </div>
+              <div className='flex min-w-0 flex-1 flex-col p-[8px] pl-0'>
+                <div className='flex-1 overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)]'>
+                  {children}
+                </div>
               </div>
             </div>
           </WorkspacePermissionsProvider>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx b/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
index fd01097fde9..ed5edd31352 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
@@ -161,10 +161,11 @@ export function SettingsPage({ section }: SettingsPageProps) {
   const { data: session, isPending: sessionLoading } = useSession()
 
   const isAdminRole = session?.user?.role === 'admin'
+  const isImpersonating = Boolean(session?.session?.impersonatedBy)
   const effectiveSection =
     !isBillingEnabled && (section === 'subscription' || section === 'team')
       ? 'general'
-      : section === 'admin' && !sessionLoading && !isAdminRole
+      : section === 'admin' && !sessionLoading && !isAdminRole && !isImpersonating
         ? 'general'
         : section
 
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
index 5161bb3c5d9..01a000fd26b 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
@@ -8,6 +8,7 @@ import { cn } from '@/lib/core/utils/cn'
 import {
   useAdminUsers,
   useBanUser,
+  useImpersonateUser,
   useSetUserRole,
   useUnbanUser,
 } from '@/hooks/queries/admin-users'
@@ -28,6 +29,7 @@ export function Admin() {
   const setUserRole = useSetUserRole()
   const banUser = useBanUser()
   const unbanUser = useUnbanUser()
+  const impersonateUser = useImpersonateUser()
 
   const [workflowId, setWorkflowId] = useState('')
   const [usersOffset, setUsersOffset] = useState(0)
@@ -67,6 +69,18 @@ export function Admin() {
     )
   }
 
+  const handleImpersonate = (userId: string) => {
+    impersonateUser.reset()
+    impersonateUser.mutate(
+      { userId },
+      {
+        onSuccess: () => {
+          window.location.assign('/workspace')
+        },
+      }
+    )
+  }
+
   const pendingUserIds = useMemo(() => {
     const ids = new Set<string>()
     if (setUserRole.isPending && (setUserRole.variables as { userId?: string })?.userId)
@@ -75,6 +89,8 @@ export function Admin() {
       ids.add((banUser.variables as { userId: string }).userId)
     if (unbanUser.isPending && (unbanUser.variables as { userId?: string })?.userId)
       ids.add((unbanUser.variables as { userId: string }).userId)
+    if (impersonateUser.isPending && (impersonateUser.variables as { userId?: string })?.userId)
+      ids.add((impersonateUser.variables as { userId: string }).userId)
     return ids
   }, [
     setUserRole.isPending,
@@ -83,6 +99,8 @@ export function Admin() {
     banUser.variables,
     unbanUser.isPending,
     unbanUser.variables,
+    impersonateUser.isPending,
+    impersonateUser.variables,
   ])
   return (
     <div className='flex h-full flex-col gap-[24px]'>
@@ -152,9 +170,10 @@ export function Admin() {
           </p>
         )}
 
-        {(setUserRole.error || banUser.error || unbanUser.error) && (
+        {(setUserRole.error || banUser.error || unbanUser.error || impersonateUser.error) && (
           <p className='text-[13px] text-[var(--text-error)]'>
-            {(setUserRole.error || banUser.error || unbanUser.error)?.message ??
+            {(setUserRole.error || banUser.error || unbanUser.error || impersonateUser.error)
+              ?.message ??
               'Action failed. Please try again.'}
           </p>
         )}
@@ -175,7 +194,7 @@ export function Admin() {
                 <span className='flex-1'>Email</span>
                 <span className='w-[80px]'>Role</span>
                 <span className='w-[80px]'>Status</span>
-                <span className='w-[180px] text-right'>Actions</span>
+                <span className='w-[250px] text-right'>Actions</span>
               </div>
 
               {usersData.users.length === 0 && (
@@ -206,9 +225,21 @@ export function Admin() {
                       <Badge variant='green'>Active</Badge>
                     )}
                   </span>
-                  <span className='flex w-[180px] justify-end gap-[4px]'>
+                  <span className='flex w-[250px] justify-end gap-[4px]'>
                     {u.id !== session?.user?.id && (
                       <>
+                        <Button
+                          variant='active'
+                          className='h-[28px] px-[8px] text-[12px]'
+                          onClick={() => handleImpersonate(u.id)}
+                          disabled={pendingUserIds.has(u.id)}
+                        >
+                          {impersonateUser.isPending &&
+                          (impersonateUser.variables as { userId?: string } | undefined)?.userId ===
+                            u.id
+                            ? 'Switching...'
+                            : 'Impersonate'}
+                        </Button>
                         <Button
                           variant='active'
                           className='h-[28px] px-[8px] text-[12px]'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
index f1312bf5965..68ebee058a0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
@@ -64,6 +64,7 @@ export function SettingsSidebar({
   const hasEnterprisePlan = subscriptionStatus.isEnterprise
 
   const isSuperUser = session?.user?.role === 'admin'
+  const isImpersonating = Boolean(session?.session?.impersonatedBy)
 
   const isSSOProviderOwner = useMemo(() => {
     if (isHosted) return null
@@ -121,7 +122,7 @@ export function SettingsSidebar({
         return false
       }
 
-      if (item.requiresAdminRole && !isSuperUser) {
+      if (item.requiresAdminRole && !isSuperUser && !isImpersonating) {
         return false
       }
 
@@ -135,6 +136,7 @@ export function SettingsSidebar({
     ssoProvidersData?.providers?.length,
     permissionConfig,
     isSuperUser,
+    isImpersonating,
     generalSettings?.superUserModeEnabled,
   ])
 
diff --git a/apps/sim/components/emcn/components/banner/banner.tsx b/apps/sim/components/emcn/components/banner/banner.tsx
new file mode 100644
index 00000000000..a8c9fb9ebbb
--- /dev/null
+++ b/apps/sim/components/emcn/components/banner/banner.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/core/utils/cn'
+
+const bannerVariants = cva('shrink-0 px-[24px] py-[10px]', {
+  variants: {
+    variant: {
+      default: 'bg-[var(--surface-active)]',
+      destructive: 'bg-red-50 dark:bg-red-950/30',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+export interface BannerProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof bannerVariants> {
+  children: ReactNode
+}
+
+export function Banner({ className, variant, children, ...props }: BannerProps) {
+  return (
+    <div className={cn(bannerVariants({ variant }), className)} {...props}>
+      {children}
+    </div>
+  )
+}
diff --git a/apps/sim/components/emcn/components/index.ts b/apps/sim/components/emcn/components/index.ts
index 1f19d7d4b72..fea669b37a6 100644
--- a/apps/sim/components/emcn/components/index.ts
+++ b/apps/sim/components/emcn/components/index.ts
@@ -6,6 +6,7 @@ export {
   avatarStatusVariants,
   avatarVariants,
 } from './avatar/avatar'
+export { Banner, type BannerProps } from './banner/banner'
 export { Badge } from './badge/badge'
 export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps } from './breadcrumb/breadcrumb'
 export { Button, type ButtonProps, buttonVariants } from './button/button'
diff --git a/apps/sim/hooks/queries/admin-users.ts b/apps/sim/hooks/queries/admin-users.ts
index 6f9f6bba736..2ede1af8ab1 100644
--- a/apps/sim/hooks/queries/admin-users.ts
+++ b/apps/sim/hooks/queries/admin-users.ts
@@ -133,3 +133,27 @@ export function useUnbanUser() {
     },
   })
 }
+
+export function useImpersonateUser() {
+  return useMutation({
+    mutationFn: async ({ userId }: { userId: string }) => {
+      const result = await client.admin.impersonateUser({ userId })
+      return result
+    },
+    onError: (err) => {
+      logger.error('Failed to impersonate user', err)
+    },
+  })
+}
+
+export function useStopImpersonating() {
+  return useMutation({
+    mutationFn: async () => {
+      const result = await client.admin.stopImpersonating()
+      return result
+    },
+    onError: (err) => {
+      logger.error('Failed to stop impersonating', err)
+    },
+  })
+}

From d53a41facf27658dca6d8c07b1ec6210b6ca442e Mon Sep 17 00:00:00 2001
From: Theodore Li <teddy@zenobiapay.com>
Date: Tue, 24 Mar 2026 11:07:09 -0700
Subject: [PATCH 2/5] Add explicit role check

---
 .../[workspaceId]/impersonation-banner.tsx    | 44 ++++++++++++++++++
 .../app/workspace/[workspaceId]/layout.tsx    | 42 +----------------
 .../settings/components/admin/admin.tsx       | 33 +++++++++++---
 .../emcn/components/banner/banner.tsx         | 45 +++++++++++++++++--
 4 files changed, 115 insertions(+), 49 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/impersonation-banner.tsx

diff --git a/apps/sim/app/workspace/[workspaceId]/impersonation-banner.tsx b/apps/sim/app/workspace/[workspaceId]/impersonation-banner.tsx
new file mode 100644
index 00000000000..69f85fa1606
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/impersonation-banner.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import { useState } from 'react'
+import { Banner } from '@/components/emcn'
+import { useStopImpersonating } from '@/hooks/queries/admin-users'
+import { useSession } from '@/lib/auth/auth-client'
+
+function getImpersonationBannerText(userLabel: string, userEmail?: string) {
+  return `Impersonating ${userLabel}${userEmail ? ` (${userEmail})` : ''}. Changes will apply to this account until you switch back.`
+}
+
+export function ImpersonationBanner() {
+  const { data: session, isPending } = useSession()
+  const stopImpersonating = useStopImpersonating()
+  const [isRedirecting, setIsRedirecting] = useState(false)
+  const userLabel = session?.user?.name || 'this user'
+  const userEmail = session?.user?.email
+
+  if (isPending || !session?.session?.impersonatedBy) {
+    return null
+  }
+
+  return (
+    <Banner
+      variant='destructive'
+      text={getImpersonationBannerText(userLabel, userEmail)}
+      textClassName='text-red-700 dark:text-red-300'
+      actionLabel={stopImpersonating.isPending || isRedirecting ? 'Returning...' : 'Stop impersonating'}
+      actionVariant='destructive'
+      actionDisabled={stopImpersonating.isPending || isRedirecting}
+      onAction={() =>
+        stopImpersonating.mutate(undefined, {
+          onError: () => {
+            setIsRedirecting(false)
+          },
+          onSuccess: () => {
+            setIsRedirecting(true)
+            window.location.assign('/workspace')
+          },
+        })
+      }
+    />
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/layout.tsx b/apps/sim/app/workspace/[workspaceId]/layout.tsx
index 508552e1cde..3981d2d3c7e 100644
--- a/apps/sim/app/workspace/[workspaceId]/layout.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/layout.tsx
@@ -1,49 +1,11 @@
-import { Banner, Button, ToastProvider } from '@/components/emcn'
+import { ToastProvider } from '@/components/emcn'
 import { GlobalCommandsProvider } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
+import { ImpersonationBanner } from '@/app/workspace/[workspaceId]/impersonation-banner'
 import { ProviderModelsLoader } from '@/app/workspace/[workspaceId]/providers/provider-models-loader'
 import { SettingsLoader } from '@/app/workspace/[workspaceId]/providers/settings-loader'
 import { WorkspacePermissionsProvider } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import { useSession } from '@/lib/auth/auth-client'
-import { useStopImpersonating } from '@/hooks/queries/admin-users'
 import { Sidebar } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
 
-function ImpersonationBanner() {
-  const { data: session, isPending } = useSession()
-  const stopImpersonating = useStopImpersonating()
-  const userLabel = session?.user?.name || 'this user'
-  const userEmail = session?.user?.email
-
-  if (isPending || !session?.session?.impersonatedBy) {
-    return null
-  }
-
-  return (
-    <Banner variant='destructive'>
-      <div className='mx-auto flex max-w-[1400px] items-center justify-between gap-[12px]'>
-        <p className='text-[13px] text-red-700 dark:text-red-300'>
-          Impersonating {userLabel}
-          {userEmail ? ` (${userEmail})` : ''}. Changes will apply to this account until you switch
-          back.
-        </p>
-        <Button
-          variant='destructive'
-          className='h-[28px] shrink-0 px-[8px] text-[12px]'
-          onClick={() =>
-            stopImpersonating.mutate(undefined, {
-              onSuccess: () => {
-                window.location.assign('/workspace')
-              },
-            })
-          }
-          disabled={stopImpersonating.isPending}
-        >
-          {stopImpersonating.isPending ? 'Returning...' : 'Stop impersonating'}
-        </Button>
-      </div>
-    </Banner>
-  )
-}
-
 export default function WorkspaceLayout({ children }: { children: React.ReactNode }) {
   return (
     <ToastProvider>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
index 01a000fd26b..b81c0289a1c 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
@@ -37,6 +37,8 @@ export function Admin() {
   const [searchQuery, setSearchQuery] = useState('')
   const [banUserId, setBanUserId] = useState<string | null>(null)
   const [banReason, setBanReason] = useState('')
+  const [impersonatingUserId, setImpersonatingUserId] = useState<string | null>(null)
+  const [impersonationGuardError, setImpersonationGuardError] = useState<string | null>(null)
 
   const {
     data: usersData,
@@ -70,10 +72,21 @@ export function Admin() {
   }
 
   const handleImpersonate = (userId: string) => {
+    setImpersonationGuardError(null)
+    if (session?.user?.role !== 'admin') {
+      setImpersonatingUserId(null)
+      setImpersonationGuardError('Only admins can impersonate users.')
+      return
+    }
+
+    setImpersonatingUserId(userId)
     impersonateUser.reset()
     impersonateUser.mutate(
       { userId },
       {
+        onError: () => {
+          setImpersonatingUserId(null)
+        },
         onSuccess: () => {
           window.location.assign('/workspace')
         },
@@ -91,6 +104,7 @@ export function Admin() {
       ids.add((unbanUser.variables as { userId: string }).userId)
     if (impersonateUser.isPending && (impersonateUser.variables as { userId?: string })?.userId)
       ids.add((impersonateUser.variables as { userId: string }).userId)
+    if (impersonatingUserId) ids.add(impersonatingUserId)
     return ids
   }, [
     setUserRole.isPending,
@@ -101,6 +115,7 @@ export function Admin() {
     unbanUser.variables,
     impersonateUser.isPending,
     impersonateUser.variables,
+    impersonatingUserId,
   ])
   return (
     <div className='flex h-full flex-col gap-[24px]'>
@@ -170,10 +185,15 @@ export function Admin() {
           </p>
         )}
 
-        {(setUserRole.error || banUser.error || unbanUser.error || impersonateUser.error) && (
+        {(setUserRole.error ||
+          banUser.error ||
+          unbanUser.error ||
+          impersonateUser.error ||
+          impersonationGuardError) && (
           <p className='text-[13px] text-[var(--text-error)]'>
-            {(setUserRole.error || banUser.error || unbanUser.error || impersonateUser.error)
-              ?.message ??
+            {impersonationGuardError ||
+              (setUserRole.error || banUser.error || unbanUser.error || impersonateUser.error)
+                ?.message ||
               'Action failed. Please try again.'}
           </p>
         )}
@@ -234,9 +254,10 @@ export function Admin() {
                           onClick={() => handleImpersonate(u.id)}
                           disabled={pendingUserIds.has(u.id)}
                         >
-                          {impersonateUser.isPending &&
-                          (impersonateUser.variables as { userId?: string } | undefined)?.userId ===
-                            u.id
+                          {(impersonatingUserId === u.id ||
+                            (impersonateUser.isPending &&
+                              (impersonateUser.variables as { userId?: string } | undefined)
+                                ?.userId === u.id))
                             ? 'Switching...'
                             : 'Impersonate'}
                         </Button>
diff --git a/apps/sim/components/emcn/components/banner/banner.tsx b/apps/sim/components/emcn/components/banner/banner.tsx
index a8c9fb9ebbb..8c374cf27c6 100644
--- a/apps/sim/components/emcn/components/banner/banner.tsx
+++ b/apps/sim/components/emcn/components/banner/banner.tsx
@@ -3,6 +3,7 @@
 import type { HTMLAttributes, ReactNode } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
+import { Button, type ButtonProps } from '@/components/emcn/components/button/button'
 
 const bannerVariants = cva('shrink-0 px-[24px] py-[10px]', {
   variants: {
@@ -19,13 +20,51 @@ const bannerVariants = cva('shrink-0 px-[24px] py-[10px]', {
 export interface BannerProps
   extends HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof bannerVariants> {
-  children: ReactNode
+  actionClassName?: string
+  actionDisabled?: boolean
+  actionLabel?: ReactNode
+  actionProps?: Omit<ButtonProps, 'children' | 'className' | 'disabled' | 'onClick' | 'variant'>
+  actionVariant?: ButtonProps['variant']
+  children?: ReactNode
+  contentClassName?: string
+  onAction?: () => void
+  text?: ReactNode
+  textClassName?: string
 }
 
-export function Banner({ className, variant, children, ...props }: BannerProps) {
+export function Banner({
+  actionClassName,
+  actionDisabled,
+  actionLabel,
+  actionProps,
+  actionVariant = 'default',
+  children,
+  className,
+  contentClassName,
+  onAction,
+  text,
+  textClassName,
+  variant,
+  ...props
+}: BannerProps) {
   return (
     <div className={cn(bannerVariants({ variant }), className)} {...props}>
-      {children}
+      {children ?? (
+        <div className={cn('mx-auto flex max-w-[1400px] items-center justify-between gap-[12px]', contentClassName)}>
+          <p className={cn('text-[13px]', textClassName)}>{text}</p>
+          {actionLabel ? (
+            <Button
+              variant={actionVariant}
+              className={cn('h-[28px] shrink-0 px-[8px] text-[12px]', actionClassName)}
+              onClick={onAction}
+              disabled={actionDisabled}
+              {...actionProps}
+            >
+              {actionLabel}
+            </Button>
+          ) : null}
+        </div>
+      )}
     </div>
   )
 }

From 1776ee836db507b766098a969f2bfa794f591518 Mon Sep 17 00:00:00 2001
From: Theodore Li <teddy@zenobiapay.com>
Date: Tue, 24 Mar 2026 11:09:52 -0700
Subject: [PATCH 3/5] Fix lint

---
 .../app/workspace/[workspaceId]/impersonation-banner.tsx | 6 ++++--
 apps/sim/app/workspace/[workspaceId]/layout.tsx          | 2 +-
 .../[workspaceId]/settings/components/admin/admin.tsx    | 8 ++++----
 apps/sim/components/emcn/components/banner/banner.tsx    | 9 +++++++--
 apps/sim/components/emcn/components/index.ts             | 2 +-
 5 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/impersonation-banner.tsx b/apps/sim/app/workspace/[workspaceId]/impersonation-banner.tsx
index 69f85fa1606..a4a23572e25 100644
--- a/apps/sim/app/workspace/[workspaceId]/impersonation-banner.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/impersonation-banner.tsx
@@ -2,8 +2,8 @@
 
 import { useState } from 'react'
 import { Banner } from '@/components/emcn'
-import { useStopImpersonating } from '@/hooks/queries/admin-users'
 import { useSession } from '@/lib/auth/auth-client'
+import { useStopImpersonating } from '@/hooks/queries/admin-users'
 
 function getImpersonationBannerText(userLabel: string, userEmail?: string) {
   return `Impersonating ${userLabel}${userEmail ? ` (${userEmail})` : ''}. Changes will apply to this account until you switch back.`
@@ -25,7 +25,9 @@ export function ImpersonationBanner() {
       variant='destructive'
       text={getImpersonationBannerText(userLabel, userEmail)}
       textClassName='text-red-700 dark:text-red-300'
-      actionLabel={stopImpersonating.isPending || isRedirecting ? 'Returning...' : 'Stop impersonating'}
+      actionLabel={
+        stopImpersonating.isPending || isRedirecting ? 'Returning...' : 'Stop impersonating'
+      }
       actionVariant='destructive'
       actionDisabled={stopImpersonating.isPending || isRedirecting}
       onAction={() =>
diff --git a/apps/sim/app/workspace/[workspaceId]/layout.tsx b/apps/sim/app/workspace/[workspaceId]/layout.tsx
index 3981d2d3c7e..fb018abb2f4 100644
--- a/apps/sim/app/workspace/[workspaceId]/layout.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/layout.tsx
@@ -1,6 +1,6 @@
 import { ToastProvider } from '@/components/emcn'
-import { GlobalCommandsProvider } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { ImpersonationBanner } from '@/app/workspace/[workspaceId]/impersonation-banner'
+import { GlobalCommandsProvider } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { ProviderModelsLoader } from '@/app/workspace/[workspaceId]/providers/provider-models-loader'
 import { SettingsLoader } from '@/app/workspace/[workspaceId]/providers/settings-loader'
 import { WorkspacePermissionsProvider } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
index b81c0289a1c..9b8d24f2b82 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
@@ -254,10 +254,10 @@ export function Admin() {
                           onClick={() => handleImpersonate(u.id)}
                           disabled={pendingUserIds.has(u.id)}
                         >
-                          {(impersonatingUserId === u.id ||
-                            (impersonateUser.isPending &&
-                              (impersonateUser.variables as { userId?: string } | undefined)
-                                ?.userId === u.id))
+                          {impersonatingUserId === u.id ||
+                          (impersonateUser.isPending &&
+                            (impersonateUser.variables as { userId?: string } | undefined)
+                              ?.userId === u.id)
                             ? 'Switching...'
                             : 'Impersonate'}
                         </Button>
diff --git a/apps/sim/components/emcn/components/banner/banner.tsx b/apps/sim/components/emcn/components/banner/banner.tsx
index 8c374cf27c6..98ebd0b7788 100644
--- a/apps/sim/components/emcn/components/banner/banner.tsx
+++ b/apps/sim/components/emcn/components/banner/banner.tsx
@@ -2,8 +2,8 @@
 
 import type { HTMLAttributes, ReactNode } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '@/lib/core/utils/cn'
 import { Button, type ButtonProps } from '@/components/emcn/components/button/button'
+import { cn } from '@/lib/core/utils/cn'
 
 const bannerVariants = cva('shrink-0 px-[24px] py-[10px]', {
   variants: {
@@ -50,7 +50,12 @@ export function Banner({
   return (
     <div className={cn(bannerVariants({ variant }), className)} {...props}>
       {children ?? (
-        <div className={cn('mx-auto flex max-w-[1400px] items-center justify-between gap-[12px]', contentClassName)}>
+        <div
+          className={cn(
+            'mx-auto flex max-w-[1400px] items-center justify-between gap-[12px]',
+            contentClassName
+          )}
+        >
           <p className={cn('text-[13px]', textClassName)}>{text}</p>
           {actionLabel ? (
             <Button
diff --git a/apps/sim/components/emcn/components/index.ts b/apps/sim/components/emcn/components/index.ts
index fea669b37a6..4aa1412079a 100644
--- a/apps/sim/components/emcn/components/index.ts
+++ b/apps/sim/components/emcn/components/index.ts
@@ -6,8 +6,8 @@ export {
   avatarStatusVariants,
   avatarVariants,
 } from './avatar/avatar'
-export { Banner, type BannerProps } from './banner/banner'
 export { Badge } from './badge/badge'
+export { Banner, type BannerProps } from './banner/banner'
 export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps } from './breadcrumb/breadcrumb'
 export { Button, type ButtonProps, buttonVariants } from './button/button'
 export {

From 831f3360ff3d2f169adeec15202e4523bd24914d Mon Sep 17 00:00:00 2001
From: Theodore Li <teddy@zenobiapay.com>
Date: Tue, 24 Mar 2026 11:34:11 -0700
Subject: [PATCH 4/5] Remove admin panel when impersonating

---
 .../workspace/[workspaceId]/settings/[section]/settings.tsx   | 3 +--
 .../sidebar/components/settings-sidebar/settings-sidebar.tsx  | 4 +---
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx b/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
index ed5edd31352..fd01097fde9 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
@@ -161,11 +161,10 @@ export function SettingsPage({ section }: SettingsPageProps) {
   const { data: session, isPending: sessionLoading } = useSession()
 
   const isAdminRole = session?.user?.role === 'admin'
-  const isImpersonating = Boolean(session?.session?.impersonatedBy)
   const effectiveSection =
     !isBillingEnabled && (section === 'subscription' || section === 'team')
       ? 'general'
-      : section === 'admin' && !sessionLoading && !isAdminRole && !isImpersonating
+      : section === 'admin' && !sessionLoading && !isAdminRole
         ? 'general'
         : section
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
index 68ebee058a0..f1312bf5965 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
@@ -64,7 +64,6 @@ export function SettingsSidebar({
   const hasEnterprisePlan = subscriptionStatus.isEnterprise
 
   const isSuperUser = session?.user?.role === 'admin'
-  const isImpersonating = Boolean(session?.session?.impersonatedBy)
 
   const isSSOProviderOwner = useMemo(() => {
     if (isHosted) return null
@@ -122,7 +121,7 @@ export function SettingsSidebar({
         return false
       }
 
-      if (item.requiresAdminRole && !isSuperUser && !isImpersonating) {
+      if (item.requiresAdminRole && !isSuperUser) {
         return false
       }
 
@@ -136,7 +135,6 @@ export function SettingsSidebar({
     ssoProvidersData?.providers?.length,
     permissionConfig,
     isSuperUser,
-    isImpersonating,
     generalSettings?.superUserModeEnabled,
   ])
 

From 6f97d5a363e99d6123fca04293fa431da0af7e33 Mon Sep 17 00:00:00 2001
From: Theodore Li <teddy@zenobiapay.com>
Date: Tue, 24 Mar 2026 16:07:19 -0700
Subject: [PATCH 5/5] Fix lint

---
 apps/sim/app/workspace/[workspaceId]/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/layout.tsx b/apps/sim/app/workspace/[workspaceId]/layout.tsx
index 5cf7ae2c20a..ad7b57e437f 100644
--- a/apps/sim/app/workspace/[workspaceId]/layout.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/layout.tsx
@@ -1,6 +1,6 @@
 import { ToastProvider } from '@/components/emcn'
-import { ImpersonationBanner } from '@/app/workspace/[workspaceId]/impersonation-banner'
 import { NavTour } from '@/app/workspace/[workspaceId]/components/product-tour'
+import { ImpersonationBanner } from '@/app/workspace/[workspaceId]/impersonation-banner'
 import { GlobalCommandsProvider } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { ProviderModelsLoader } from '@/app/workspace/[workspaceId]/providers/provider-models-loader'
 import { SettingsLoader } from '@/app/workspace/[workspaceId]/providers/settings-loader'