feat(enterprise): cloud whitelabeling for enterprise orgs

apps/sim/app/api/organizations/[id]/whitelabel/route.ts

@@ -0,0 +1,213 @@
+import { db } from '@sim/db'
+import { member, organization } from '@sim/db/schema'
+import { createLogger } from '@sim/logger'
+import { and, eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { AuditAction, AuditResourceType, recordAudit } from '@/lib/audit/log'
+import { getSession } from '@/lib/auth'
+import { isOrganizationOnEnterprisePlan } from '@/lib/billing/core/subscription'
+import type { OrganizationWhitelabelSettings } from '@/lib/branding/types'
+
+const logger = createLogger('WhitelabelAPI')
+
+const HEX_COLOR_REGEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i
+
+const updateWhitelabelSchema = z.object({
+  brandName: z
+    .string()
+    .trim()
+    .max(64, 'Brand name must be 64 characters or fewer')
+    .nullable()
+    .optional(),
+  logoUrl: z.string().url('Logo URL must be a valid URL').nullable().optional(),
+  primaryColor: z
+    .string()
+    .regex(HEX_COLOR_REGEX, 'Primary color must be a valid hex color (e.g. #701ffc)')
+    .nullable()
+    .optional(),
+  primaryHoverColor: z
+    .string()
+    .regex(HEX_COLOR_REGEX, 'Primary hover color must be a valid hex color')
+    .nullable()
+    .optional(),
+  accentColor: z
+    .string()
+    .regex(HEX_COLOR_REGEX, 'Accent color must be a valid hex color')
+    .nullable()
+    .optional(),
+  accentHoverColor: z
+    .string()
+    .regex(HEX_COLOR_REGEX, 'Accent hover color must be a valid hex color')
+    .nullable()
+    .optional(),
+  supportEmail: z
+    .string()
+    .email('Support email must be a valid email address')
+    .nullable()
+    .optional(),
+  documentationUrl: z.string().url('Documentation URL must be a valid URL').nullable().optional(),
+  termsUrl: z.string().url('Terms URL must be a valid URL').nullable().optional(),
+  privacyUrl: z.string().url('Privacy URL must be a valid URL').nullable().optional(),
+  hidePoweredBySim: z.boolean().optional(),
+})
+
+/**
+ * GET /api/organizations/[id]/whitelabel
+ * Returns the organization's whitelabel settings.
+ * Accessible by any member of the organization.
+ */
+export async function GET(_request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  try {
+    const session = await getSession()
+
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { id: organizationId } = await params
+
+    const [memberEntry] = await db
+      .select({ id: member.id })
+      .from(member)
+      .where(and(eq(member.organizationId, organizationId), eq(member.userId, session.user.id)))
+      .limit(1)
+
+    if (!memberEntry) {
+      return NextResponse.json(
+        { error: 'Forbidden - Not a member of this organization' },
+        { status: 403 }
+      )
+    }
+
+    const [org] = await db
+      .select({ whitelabelSettings: organization.whitelabelSettings })
+      .from(organization)
+      .where(eq(organization.id, organizationId))
+      .limit(1)
+
+    if (!org) {
+      return NextResponse.json({ error: 'Organization not found' }, { status: 404 })
+    }
+
+    return NextResponse.json({
+      success: true,
+      data: (org.whitelabelSettings ?? {}) as OrganizationWhitelabelSettings,
+    })
+  } catch (error) {
+    logger.error('Failed to get whitelabel settings', { error })
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}
+
+/**
+ * PUT /api/organizations/[id]/whitelabel
+ * Updates the organization's whitelabel settings.
+ * Requires enterprise plan and owner/admin role.
+ */
+export async function PUT(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  try {
+    const session = await getSession()
+
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { id: organizationId } = await params
+
+    const body = await request.json()
+    const parsed = updateWhitelabelSchema.safeParse(body)
+
+    if (!parsed.success) {
+      return NextResponse.json(
+        { error: parsed.error.errors[0]?.message ?? 'Invalid request body' },
+        { status: 400 }
+      )
+    }
+
+    const [memberEntry] = await db
+      .select({ role: member.role })
+      .from(member)
+      .where(and(eq(member.organizationId, organizationId), eq(member.userId, session.user.id)))
+      .limit(1)
+
+    if (!memberEntry) {
+      return NextResponse.json(
+        { error: 'Forbidden - Not a member of this organization' },
+        { status: 403 }
+      )
+    }
+
+    if (memberEntry.role !== 'owner' && memberEntry.role !== 'admin') {
+      return NextResponse.json(
+        { error: 'Forbidden - Only organization owners and admins can update whitelabel settings' },
+        { status: 403 }
+      )
+    }
+
+    const hasEnterprisePlan = await isOrganizationOnEnterprisePlan(organizationId)
+
+    if (!hasEnterprisePlan) {
+      return NextResponse.json(
+        { error: 'Whitelabeling is available on Enterprise plans only' },
+        { status: 403 }
+      )
+    }
+
+    const [currentOrg] = await db
+      .select({ name: organization.name, whitelabelSettings: organization.whitelabelSettings })
+      .from(organization)
+      .where(eq(organization.id, organizationId))
+      .limit(1)
+
+    if (!currentOrg) {
+      return NextResponse.json({ error: 'Organization not found' }, { status: 404 })
+    }
+
+    const current: OrganizationWhitelabelSettings = currentOrg.whitelabelSettings ?? {}
+    const incoming = parsed.data
+
+    const merged: OrganizationWhitelabelSettings = { ...current }
+
+    for (const key of Object.keys(incoming) as Array<keyof typeof incoming>) {
+      const value = incoming[key]
+      if (value === null) {
+        delete merged[key as keyof OrganizationWhitelabelSettings]
+      } else if (value !== undefined) {
+        ;(merged as Record<string, unknown>)[key] = value
+      }
+    }
+
+    const [updated] = await db
+      .update(organization)
+      .set({ whitelabelSettings: merged, updatedAt: new Date() })
+      .where(eq(organization.id, organizationId))
+      .returning({ whitelabelSettings: organization.whitelabelSettings })
+
+    if (!updated) {
+      return NextResponse.json({ error: 'Organization not found' }, { status: 404 })
+    }
+
+    recordAudit({
+      workspaceId: null,
+      actorId: session.user.id,
+      action: AuditAction.ORGANIZATION_UPDATED,
+      resourceType: AuditResourceType.ORGANIZATION,
+      resourceId: organizationId,
+      actorName: session.user.name ?? undefined,
+      actorEmail: session.user.email ?? undefined,
+      resourceName: currentOrg.name,
+      description: 'Updated organization whitelabel settings',
+      metadata: { changes: Object.keys(incoming) },
+      request,
+    })
+
+    return NextResponse.json({
+      success: true,
+      data: (updated.whitelabelSettings ?? {}) as OrganizationWhitelabelSettings,
+    })
+  } catch (error) {
+    logger.error('Failed to update whitelabel settings', { error })
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}

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

@@ -7,31 +7,34 @@ import { SettingsLoader } from '@/app/workspace/[workspaceId]/providers/settings
 import { WorkspacePermissionsProvider } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { WorkspaceScopeSync } from '@/app/workspace/[workspaceId]/providers/workspace-scope-sync'
 import { Sidebar } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
+import { BrandingProvider } from '@/ee/whitelabeling/components/branding-provider'
 
 export default function WorkspaceLayout({ children }: { children: React.ReactNode }) {
   return (
-    <ToastProvider>
-      <SettingsLoader />
-      <ProviderModelsLoader />
-      <GlobalCommandsProvider>
-        <div className='flex h-screen w-full flex-col overflow-hidden bg-[var(--surface-1)]'>
-          <ImpersonationBanner />
-          <WorkspacePermissionsProvider>
-            <WorkspaceScopeSync />
-            <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}
+    <BrandingProvider>
+      <ToastProvider>
+        <SettingsLoader />
+        <ProviderModelsLoader />
+        <GlobalCommandsProvider>
+          <div className='flex h-screen w-full flex-col overflow-hidden bg-[var(--surface-1)]'>
+            <ImpersonationBanner />
+            <WorkspacePermissionsProvider>
+              <WorkspaceScopeSync />
+              <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>
-            </div>
-            <NavTour />
-          </WorkspacePermissionsProvider>
-        </div>
-      </GlobalCommandsProvider>
-    </ToastProvider>
+              <NavTour />
+            </WorkspacePermissionsProvider>
+          </div>
+        </GlobalCommandsProvider>
+      </ToastProvider>
+    </BrandingProvider>
   )
 }

apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx

@@ -156,6 +156,13 @@ const AccessControl = dynamic(
 const SSO = dynamic(() => import('@/ee/sso/components/sso-settings').then((m) => m.SSO), {
   loading: () => <SettingsSectionSkeleton />,
 })
+const WhitelabelingSettings = dynamic(
+  () =>
+    import('@/ee/whitelabeling/components/whitelabeling-settings').then(
+      (m) => m.WhitelabelingSettings
+    ),
+  { loading: () => <SettingsSectionSkeleton /> }
+)
 
 interface SettingsPageProps {
   section: SettingsSection
@@ -198,6 +205,7 @@ export function SettingsPage({ section }: SettingsPageProps) {
       {isBillingEnabled && effectiveSection === 'subscription' && <Subscription />}
       {isBillingEnabled && effectiveSection === 'team' && <TeamManagement />}
       {effectiveSection === 'sso' && <SSO />}
+      {effectiveSection === 'whitelabeling' && <WhitelabelingSettings />}
       {effectiveSection === 'byok' && <BYOK />}
       {effectiveSection === 'copilot' && <Copilot />}
       {effectiveSection === 'mcp' && <MCP initialServerId={mcpServerId} />}

apps/sim/app/workspace/[workspaceId]/settings/navigation.ts

@@ -7,6 +7,7 @@ import {
   Lock,
   LogIn,
   Mail,
+  Palette,
   Send,
   Server,
   Settings,
@@ -31,6 +32,7 @@ export type SettingsSection =
   | 'subscription'
   | 'team'
   | 'sso'
+  | 'whitelabeling'
   | 'copilot'
   | 'mcp'
   | 'custom-tools'
@@ -162,6 +164,14 @@ export const allNavigationItems: NavigationItem[] = [
     requiresEnterprise: true,
     selfHostedOverride: isSSOEnabled,
   },
+  {
+    id: 'whitelabeling',
+    label: 'Whitelabeling',
+    icon: Palette,
+    section: 'enterprise',
+    requiresHosted: true,
+    requiresEnterprise: true,
+  },
   {
     id: 'admin',
     label: 'Admin',

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -83,7 +83,7 @@ import {
   useImportWorkflow,
   useImportWorkspace,
 } from '@/app/workspace/[workspaceId]/w/hooks'
-import { getBrandConfig } from '@/ee/whitelabeling'
+import { useOrgBrandConfig } from '@/ee/whitelabeling/components/branding-provider'
 import { useFolderMap, useFolders } from '@/hooks/queries/folders'
 import { useKnowledgeBasesQuery } from '@/hooks/queries/kb/knowledge'
 import { useTablesList } from '@/hooks/queries/tables'
@@ -337,7 +337,7 @@ export const SIDEBAR_SCROLL_EVENT = 'sidebar-scroll-to-item'
  * @returns Sidebar with workflows panel
  */
 export const Sidebar = memo(function Sidebar() {
-  const brand = getBrandConfig()
+  const brand = useOrgBrandConfig()
   const params = useParams()
   const workspaceId = params.workspaceId as string
   const workflowId = params.workflowId as string | undefined

apps/sim/ee/whitelabeling/components/branding-provider.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { createContext, useContext, useMemo } from 'react'
+import type { BrandConfig } from '@/lib/branding/types'
+import { getBrandConfig } from '@/ee/whitelabeling/branding'
+import { useWhitelabelSettings } from '@/ee/whitelabeling/hooks/whitelabel'
+import { generateOrgThemeCSS, mergeOrgBrandConfig } from '@/ee/whitelabeling/org-branding-utils'
+import { useOrganizations } from '@/hooks/queries/organization'
+
+const BrandingContext = createContext<BrandConfig>(getBrandConfig())
+
+interface BrandingProviderProps {
+  children: React.ReactNode
+}
+
+/**
+ * Provides merged branding (instance env vars + org DB settings) to the workspace.
+ * Injects CSS variable overrides when org colors are configured.
+ */
+export function BrandingProvider({ children }: BrandingProviderProps) {
+  const { data: orgsData } = useOrganizations()
+  const orgId = orgsData?.activeOrganization?.id
+  const { data: orgSettings } = useWhitelabelSettings(orgId)
+
+  const brandConfig = useMemo(
+    () => mergeOrgBrandConfig(orgSettings ?? null, getBrandConfig()),
+    [orgSettings]
+  )
+
+  const themeCSS = useMemo(
+    () => (orgSettings ? generateOrgThemeCSS(orgSettings) : ''),
+    [orgSettings]
+  )
+
+  return (
+    <BrandingContext.Provider value={brandConfig}>
+      {themeCSS && <style>{themeCSS}</style>}
+      {children}
+    </BrandingContext.Provider>
+  )
+}
+
+/**
+ * Returns the merged brand config (org settings overlaid on instance defaults).
+ * Use this inside the workspace instead of `getBrandConfig()`.
+ */
+export function useOrgBrandConfig(): BrandConfig {
+  return useContext(BrandingContext)
+}