chore: import upstream snapshot with attribution

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

@@ -0,0 +1,64 @@
+'use client'
+
+import { createContext, useContext, useMemo } from 'react'
+import type { BrandConfig, OrganizationWhitelabelSettings } 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'
+
+interface BrandingContextValue {
+  config: BrandConfig
+}
+
+const BrandingContext = createContext<BrandingContextValue>({
+  config: getBrandConfig(),
+})
+
+interface BrandingProviderProps {
+  children: React.ReactNode
+  /**
+   * Org whitelabel settings fetched server-side from the DB by the workspace layout.
+   * Used as the source of truth until the React Query result becomes available,
+   * ensuring the correct org logo appears in the initial server HTML — no flash.
+   */
+  initialOrgSettings?: OrganizationWhitelabelSettings | null
+}
+
+/**
+ * Provides merged branding (instance env vars + org DB settings) to the workspace.
+ * Injects a `<style>` tag with CSS variable overrides when org colors are configured.
+ */
+export function BrandingProvider({ children, initialOrgSettings }: BrandingProviderProps) {
+  const { data: orgsData } = useOrganizations()
+  const orgId = orgsData?.activeOrganization?.id
+  const { data: orgSettings } = useWhitelabelSettings(orgId)
+
+  const effectiveOrgSettings =
+    orgSettings !== undefined ? orgSettings : (initialOrgSettings ?? null)
+
+  const brandConfig = useMemo(
+    () => mergeOrgBrandConfig(effectiveOrgSettings, getBrandConfig()),
+    [effectiveOrgSettings]
+  )
+
+  const themeCSS = useMemo(
+    () => (effectiveOrgSettings ? generateOrgThemeCSS(effectiveOrgSettings) : ''),
+    [effectiveOrgSettings]
+  )
+
+  return (
+    <BrandingContext.Provider value={{ config: 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).config
+}

apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx

@@ -0,0 +1,540 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Button, ChipInput, cn, Label, Loader, toast } from '@sim/emcn'
+import { createLogger } from '@sim/logger'
+import { isOrgAdminRole } from '@sim/platform-authz/predicates'
+import { toError } from '@sim/utils/errors'
+import { Image as ImageIcon, X } from 'lucide-react'
+import Image from 'next/image'
+import { useParams } from 'next/navigation'
+import { useSession } from '@/lib/auth/auth-client'
+import { getSubscriptionAccessState } from '@/lib/billing/client/utils'
+import { HEX_COLOR_REGEX } from '@/lib/branding'
+import { isBillingEnabled } from '@/lib/core/config/env-flags'
+import { getUserRole } from '@/lib/workspaces/organization/utils'
+import {
+  CHIP_FIELD_INPUT,
+  CHIP_FIELD_SHELL,
+} from '@/app/workspace/[workspaceId]/components/credential-detail'
+import { saveDiscardActions } from '@/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions'
+import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
+import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
+import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
+import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/settings/hooks/use-profile-picture-upload'
+import { useSettingsUnsavedGuard } from '@/app/workspace/[workspaceId]/settings/hooks/use-settings-unsaved-guard'
+import { SettingRow } from '@/ee/components/setting-row'
+import {
+  useUpdateWhitelabelSettings,
+  useWhitelabelSettings,
+  type WhitelabelSettingsPayload,
+} from '@/ee/whitelabeling/hooks/whitelabel'
+import { useOrganizations } from '@/hooks/queries/organization'
+import { useSubscriptionData } from '@/hooks/queries/subscription'
+
+const logger = createLogger('WhitelabelingSettings')
+
+interface DropZoneProps {
+  onDrop: (e: React.DragEvent) => void
+  children: React.ReactNode
+  className?: string
+}
+
+function DropZone({ onDrop, children, className }: DropZoneProps) {
+  const [isDragging, setIsDragging] = useState(false)
+
+  return (
+    <div
+      className={cn('relative', className)}
+      onDragOver={(e) => {
+        if (e.dataTransfer.types.includes('Files')) {
+          e.preventDefault()
+          setIsDragging(true)
+        }
+      }}
+      onDragLeave={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+          setIsDragging(false)
+        }
+      }}
+      onDrop={(e) => {
+        setIsDragging(false)
+        onDrop(e)
+      }}
+    >
+      {children}
+      {isDragging && (
+        <div className='pointer-events-none absolute inset-0 z-10 rounded-lg border-[1.5px] border-[var(--brand-accent)] border-dashed bg-[color-mix(in_srgb,var(--brand-accent)_8%,transparent)]' />
+      )}
+    </div>
+  )
+}
+
+interface ColorInputProps {
+  label: string
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+}
+
+function ColorInput({ label, value, onChange, placeholder = '#000000' }: ColorInputProps) {
+  const isValidHex = !value || HEX_COLOR_REGEX.test(value)
+  const showColor = Boolean(value) && isValidHex
+
+  return (
+    <div className='flex flex-col gap-1.5'>
+      <Label className='text-[var(--text-primary)] text-small'>{label}</Label>
+      <div className={cn(CHIP_FIELD_SHELL, !isValidHex && 'border-[var(--text-error)]')}>
+        <div
+          className={cn(
+            'size-[16px] flex-shrink-0 rounded-sm border border-[var(--border-1)]',
+            !showColor && 'bg-[var(--surface-3)]'
+          )}
+          style={showColor ? { backgroundColor: value } : undefined}
+        />
+        <input
+          value={value}
+          onChange={(e) => {
+            let v = e.target.value.trim()
+            if (v && !v.startsWith('#')) {
+              v = `#${v}`
+            }
+            v = v.slice(0, 1) + v.slice(1).replace(/[^0-9a-fA-F]/g, '')
+            onChange(v.slice(0, 7))
+          }}
+          onFocus={(e) => e.target.select()}
+          placeholder={placeholder}
+          maxLength={7}
+          className={cn(CHIP_FIELD_INPUT, 'font-mono')}
+        />
+      </div>
+      {!isValidHex && (
+        <p className='text-[var(--text-error)] text-caption'>
+          Must be a valid hex color (e.g. #33c482)
+        </p>
+      )}
+    </div>
+  )
+}
+
+export function WhitelabelingSettings() {
+  const params = useParams<{ workspaceId: string }>()
+  const { data: session } = useSession()
+  const { data: orgsData } = useOrganizations()
+  const { data: subscriptionData } = useSubscriptionData()
+
+  const activeOrganization = orgsData?.activeOrganization
+  const orgId = activeOrganization?.id
+
+  const { data: savedSettings, isLoading } = useWhitelabelSettings(orgId)
+  const updateSettings = useUpdateWhitelabelSettings()
+
+  const userEmail = session?.user?.email
+  const userRole = getUserRole(activeOrganization, userEmail)
+  const canManage = isOrgAdminRole(userRole)
+  const subscriptionAccess = getSubscriptionAccessState(subscriptionData?.data)
+  const hasEnterprisePlan = subscriptionAccess.hasUsableEnterpriseAccess
+
+  const [brandName, setBrandName] = useState('')
+  const [primaryColor, setPrimaryColor] = useState('')
+  const [primaryHoverColor, setPrimaryHoverColor] = useState('')
+  const [accentColor, setAccentColor] = useState('')
+  const [accentHoverColor, setAccentHoverColor] = useState('')
+  const [supportEmail, setSupportEmail] = useState('')
+  const [documentationUrl, setDocumentationUrl] = useState('')
+  const [termsUrl, setTermsUrl] = useState('')
+  const [privacyUrl, setPrivacyUrl] = useState('')
+  const [logoUrl, setLogoUrl] = useState<string | null>(null)
+  const [wordmarkUrl, setWordmarkUrl] = useState<string | null>(null)
+  const formInitializedRef = useRef(false)
+  const [savedBrandName, setSavedBrandName] = useState('')
+  const [savedPrimaryColor, setSavedPrimaryColor] = useState('')
+  const [savedPrimaryHoverColor, setSavedPrimaryHoverColor] = useState('')
+  const [savedAccentColor, setSavedAccentColor] = useState('')
+  const [savedAccentHoverColor, setSavedAccentHoverColor] = useState('')
+  const [savedSupportEmail, setSavedSupportEmail] = useState('')
+  const [savedDocumentationUrl, setSavedDocumentationUrl] = useState('')
+  const [savedTermsUrl, setSavedTermsUrl] = useState('')
+  const [savedPrivacyUrl, setSavedPrivacyUrl] = useState('')
+  const [savedLogoUrl, setSavedLogoUrl] = useState<string | null>(null)
+  const [savedWordmarkUrl, setSavedWordmarkUrl] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!savedSettings || formInitializedRef.current) return
+    const brand = savedSettings.brandName ?? ''
+    const primary = savedSettings.primaryColor ?? ''
+    const primaryHover = savedSettings.primaryHoverColor ?? ''
+    const accent = savedSettings.accentColor ?? ''
+    const accentHover = savedSettings.accentHoverColor ?? ''
+    const support = savedSettings.supportEmail ?? ''
+    const docs = savedSettings.documentationUrl ?? ''
+    const terms = savedSettings.termsUrl ?? ''
+    const privacy = savedSettings.privacyUrl ?? ''
+    const logo = savedSettings.logoUrl ?? null
+    const wordmark = savedSettings.wordmarkUrl ?? null
+    setBrandName(brand)
+    setPrimaryColor(primary)
+    setPrimaryHoverColor(primaryHover)
+    setAccentColor(accent)
+    setAccentHoverColor(accentHover)
+    setSupportEmail(support)
+    setDocumentationUrl(docs)
+    setTermsUrl(terms)
+    setPrivacyUrl(privacy)
+    setLogoUrl(logo)
+    setWordmarkUrl(wordmark)
+    setSavedBrandName(brand)
+    setSavedPrimaryColor(primary)
+    setSavedPrimaryHoverColor(primaryHover)
+    setSavedAccentColor(accent)
+    setSavedAccentHoverColor(accentHover)
+    setSavedSupportEmail(support)
+    setSavedDocumentationUrl(docs)
+    setSavedTermsUrl(terms)
+    setSavedPrivacyUrl(privacy)
+    setSavedLogoUrl(logo)
+    setSavedWordmarkUrl(wordmark)
+    formInitializedRef.current = true
+  }, [savedSettings])
+
+  const logoUpload = useProfilePictureUpload({
+    currentImage: logoUrl,
+    onUpload: (url) => setLogoUrl(url),
+    onError: (error) => toast.error(error),
+    context: 'workspace-logos',
+    workspaceId: params.workspaceId,
+  })
+
+  const wordmarkUpload = useProfilePictureUpload({
+    currentImage: wordmarkUrl,
+    onUpload: (url) => setWordmarkUrl(url),
+    onError: (error) => toast.error(error),
+    context: 'workspace-logos',
+    workspaceId: params.workspaceId,
+  })
+
+  const hasChanges =
+    formInitializedRef.current &&
+    (brandName !== savedBrandName ||
+      primaryColor !== savedPrimaryColor ||
+      primaryHoverColor !== savedPrimaryHoverColor ||
+      accentColor !== savedAccentColor ||
+      accentHoverColor !== savedAccentHoverColor ||
+      supportEmail !== savedSupportEmail ||
+      documentationUrl !== savedDocumentationUrl ||
+      termsUrl !== savedTermsUrl ||
+      privacyUrl !== savedPrivacyUrl ||
+      (logoUpload.previewUrl || null) !== savedLogoUrl ||
+      (wordmarkUpload.previewUrl || null) !== savedWordmarkUrl)
+
+  useSettingsUnsavedGuard({ isDirty: hasChanges })
+
+  async function handleSave() {
+    if (!orgId) return
+
+    const colorFields: Array<[string, string]> = [
+      ['Primary color', primaryColor],
+      ['Primary hover color', primaryHoverColor],
+      ['Accent color', accentColor],
+      ['Accent hover color', accentHoverColor],
+    ]
+
+    for (const [fieldName, value] of colorFields) {
+      if (value && !HEX_COLOR_REGEX.test(value)) {
+        toast.error(`${fieldName} must be a valid hex color (e.g. #33c482)`)
+        return
+      }
+    }
+
+    const settings: WhitelabelSettingsPayload = {
+      brandName: brandName || null,
+      logoUrl: logoUpload.previewUrl || null,
+      wordmarkUrl: wordmarkUpload.previewUrl || null,
+      primaryColor: primaryColor || null,
+      primaryHoverColor: primaryHoverColor || null,
+      accentColor: accentColor || null,
+      accentHoverColor: accentHoverColor || null,
+      supportEmail: supportEmail || null,
+      documentationUrl: documentationUrl || null,
+      termsUrl: termsUrl || null,
+      privacyUrl: privacyUrl || null,
+    }
+
+    try {
+      await updateSettings.mutateAsync({ orgId, settings })
+      setSavedBrandName(brandName)
+      setSavedPrimaryColor(primaryColor)
+      setSavedPrimaryHoverColor(primaryHoverColor)
+      setSavedAccentColor(accentColor)
+      setSavedAccentHoverColor(accentHoverColor)
+      setSavedSupportEmail(supportEmail)
+      setSavedDocumentationUrl(documentationUrl)
+      setSavedTermsUrl(termsUrl)
+      setSavedPrivacyUrl(privacyUrl)
+      setSavedLogoUrl(logoUpload.previewUrl || null)
+      setSavedWordmarkUrl(wordmarkUpload.previewUrl || null)
+      toast.success('Whitelabeling settings saved.')
+    } catch (error) {
+      logger.error('Failed to save whitelabel settings', { error })
+      toast.error(toError(error).message)
+    }
+  }
+
+  function handleDiscard() {
+    setBrandName(savedBrandName)
+    setPrimaryColor(savedPrimaryColor)
+    setPrimaryHoverColor(savedPrimaryHoverColor)
+    setAccentColor(savedAccentColor)
+    setAccentHoverColor(savedAccentHoverColor)
+    setSupportEmail(savedSupportEmail)
+    setDocumentationUrl(savedDocumentationUrl)
+    setTermsUrl(savedTermsUrl)
+    setPrivacyUrl(savedPrivacyUrl)
+    setLogoUrl(savedLogoUrl)
+    setWordmarkUrl(savedWordmarkUrl)
+  }
+
+  if (isBillingEnabled) {
+    if (!activeOrganization) {
+      return (
+        <SettingsEmptyState>
+          You must be part of an organization to configure whitelabeling.
+        </SettingsEmptyState>
+      )
+    }
+
+    if (!hasEnterprisePlan) {
+      return (
+        <SettingsEmptyState>
+          Whitelabeling is available on Enterprise plans only.
+        </SettingsEmptyState>
+      )
+    }
+
+    if (!canManage) {
+      return (
+        <SettingsEmptyState>
+          Only organization owners and admins can configure whitelabeling settings.
+        </SettingsEmptyState>
+      )
+    }
+  }
+
+  if (isLoading) {
+    return null
+  }
+
+  const isUploading = logoUpload.isUploading || wordmarkUpload.isUploading
+
+  return (
+    <SettingsPanel
+      actions={saveDiscardActions({
+        dirty: hasChanges,
+        saving: updateSettings.isPending,
+        saveDisabled: isUploading,
+        onSave: handleSave,
+        onDiscard: handleDiscard,
+      })}
+    >
+      <SettingsSection label='Brand Identity'>
+        <div className='flex flex-col gap-5'>
+          <SettingRow
+            label='Brand name'
+            description='Replaces "Sim" in the sidebar and select UI elements.'
+          >
+            <ChipInput
+              value={brandName}
+              onChange={(e) => setBrandName(e.target.value)}
+              placeholder='Your Company'
+              className='max-w-[320px]'
+              maxLength={64}
+            />
+          </SettingRow>
+          <div className='grid grid-cols-2 gap-4'>
+            <SettingRow
+              label='Logo'
+              labelTooltip='Shown in the collapsed sidebar. Square image — PNG, JPEG, or SVG, max 5MB.'
+            >
+              <div className='flex items-center gap-4'>
+                <DropZone onDrop={logoUpload.handleFileDrop}>
+                  <button
+                    type='button'
+                    onClick={logoUpload.handleThumbnailClick}
+                    disabled={logoUpload.isUploading}
+                    className='group relative flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--surface-2)] transition-colors hover:bg-[var(--surface-3)] disabled:opacity-50'
+                  >
+                    {logoUpload.isUploading ? (
+                      <Loader className='size-5 text-[var(--text-muted)]' animate />
+                    ) : logoUpload.previewUrl ? (
+                      <Image
+                        src={logoUpload.previewUrl}
+                        alt='Logo'
+                        fill
+                        className='object-contain p-1'
+                        unoptimized
+                      />
+                    ) : (
+                      <ImageIcon className='size-5 text-[var(--text-muted)]' />
+                    )}
+                  </button>
+                </DropZone>
+                <div className='flex gap-2'>
+                  <Button
+                    variant='outline'
+                    size='sm'
+                    onClick={logoUpload.handleThumbnailClick}
+                    disabled={logoUpload.isUploading}
+                    className='text-small'
+                  >
+                    {logoUpload.previewUrl ? 'Change' : 'Upload'}
+                  </Button>
+                  {logoUpload.previewUrl && (
+                    <Button
+                      variant='ghost'
+                      size='sm'
+                      onClick={logoUpload.handleRemove}
+                      className='text-[var(--text-muted)] text-small hover:text-[var(--text-primary)]'
+                    >
+                      <X className='size-[14px]' />
+                    </Button>
+                  )}
+                </div>
+                <input
+                  ref={logoUpload.fileInputRef}
+                  type='file'
+                  accept='image/png,image/jpeg,image/jpg,image/svg+xml,image/webp'
+                  onChange={logoUpload.handleFileChange}
+                  className='hidden'
+                />
+              </div>
+            </SettingRow>
+
+            <SettingRow
+              label='Wordmark'
+              labelTooltip='Shown in the expanded sidebar. Wide image — PNG, JPEG, or SVG, max 5MB.'
+            >
+              <div className='flex items-center gap-4'>
+                <DropZone onDrop={wordmarkUpload.handleFileDrop} className='min-w-0 flex-1'>
+                  <button
+                    type='button'
+                    onClick={wordmarkUpload.handleThumbnailClick}
+                    disabled={wordmarkUpload.isUploading}
+                    className='group relative flex h-16 w-full items-center justify-center overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--surface-2)] transition-colors hover:bg-[var(--surface-3)] disabled:opacity-50'
+                  >
+                    {wordmarkUpload.isUploading ? (
+                      <Loader className='size-5 text-[var(--text-muted)]' animate />
+                    ) : wordmarkUpload.previewUrl ? (
+                      <Image
+                        src={wordmarkUpload.previewUrl}
+                        alt='Wordmark'
+                        fill
+                        className='object-contain p-2'
+                        unoptimized
+                      />
+                    ) : (
+                      <ImageIcon className='size-5 text-[var(--text-muted)]' />
+                    )}
+                  </button>
+                </DropZone>
+                <div className='flex gap-2'>
+                  <Button
+                    variant='outline'
+                    size='sm'
+                    onClick={wordmarkUpload.handleThumbnailClick}
+                    disabled={wordmarkUpload.isUploading}
+                    className='text-small'
+                  >
+                    {wordmarkUpload.previewUrl ? 'Change' : 'Upload'}
+                  </Button>
+                  {wordmarkUpload.previewUrl && (
+                    <Button
+                      variant='ghost'
+                      size='sm'
+                      onClick={wordmarkUpload.handleRemove}
+                      className='text-[var(--text-muted)] text-small hover:text-[var(--text-primary)]'
+                    >
+                      <X className='size-[14px]' />
+                    </Button>
+                  )}
+                </div>
+                <input
+                  ref={wordmarkUpload.fileInputRef}
+                  type='file'
+                  accept='image/png,image/jpeg,image/jpg,image/svg+xml,image/webp'
+                  onChange={wordmarkUpload.handleFileChange}
+                  className='hidden'
+                />
+              </div>
+            </SettingRow>
+          </div>
+        </div>
+      </SettingsSection>
+
+      <SettingsSection label='Colors'>
+        <div className='grid grid-cols-2 gap-4'>
+          <ColorInput
+            label='Primary color'
+            value={primaryColor}
+            onChange={setPrimaryColor}
+            placeholder='#33c482'
+          />
+          <ColorInput
+            label='Primary hover color'
+            value={primaryHoverColor}
+            onChange={setPrimaryHoverColor}
+            placeholder='#2dac72'
+          />
+          <ColorInput
+            label='Accent color'
+            value={accentColor}
+            onChange={setAccentColor}
+            placeholder='#33b4ff'
+          />
+          <ColorInput
+            label='Accent hover color'
+            value={accentHoverColor}
+            onChange={setAccentHoverColor}
+            placeholder='#29a0e8'
+          />
+        </div>
+      </SettingsSection>
+
+      <SettingsSection label='Links'>
+        <div className='flex flex-col gap-4'>
+          <SettingRow label='Support email'>
+            <ChipInput
+              type='email'
+              value={supportEmail}
+              onChange={(e) => setSupportEmail(e.target.value)}
+              placeholder='support@yourcompany.com'
+            />
+          </SettingRow>
+          <SettingRow label='Documentation URL'>
+            <ChipInput
+              type='url'
+              value={documentationUrl}
+              onChange={(e) => setDocumentationUrl(e.target.value)}
+              placeholder='https://docs.yourcompany.com'
+            />
+          </SettingRow>
+          <SettingRow label='Terms of service URL'>
+            <ChipInput
+              type='url'
+              value={termsUrl}
+              onChange={(e) => setTermsUrl(e.target.value)}
+              placeholder='https://yourcompany.com/terms'
+            />
+          </SettingRow>
+          <SettingRow label='Privacy policy URL'>
+            <ChipInput
+              type='url'
+              value={privacyUrl}
+              onChange={(e) => setPrivacyUrl(e.target.value)}
+              placeholder='https://yourcompany.com/privacy'
+            />
+          </SettingRow>
+        </div>
+      </SettingsSection>
+    </SettingsPanel>
+  )
+}