@fayz-ai/saas 0.5.0 → 0.6.6

package/src/shell/components/organization/PermissionMatrixEditor.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { Card } from '@fayz-ai/ui'
 import { Input } from '@fayz-ai/ui'
-import { Button } from '@fayz-ai/ui'
 import { Badge } from '@fayz-ai/ui'
 import { Checkbox, type CheckboxColor } from '@fayz-ai/ui'
-import { ChevronDown, ChevronRight, Search } from 'lucide-react'
+import { useSaveBar, useBackHandler } from '@fayz-ai/ui'
+import { ArrowLeft, ChevronDown, ChevronRight, Search } from 'lucide-react'
 import { useTranslation } from '../../hooks/useTranslation'
 import type { FeatureDeclaration, PermissionAction, PermissionProfile, SystemPermission } from '../../types/permissions'
 
@@ -28,9 +28,14 @@ interface PermissionMatrixEditorProps {
   onSave: (data: { name: string; description?: string; systemPermissions: SystemPermission[]; grants: Record<string, PermissionAction[]> }) => void
   onCancel: () => void
   saving?: boolean
+  /** True when creating/duplicating (not editing an existing custom role). Drives
+   *  the SaveBar dirty state + the breadcrumb crumb. */
+  isNew?: boolean
+  /** Label of the parent list, shown in the back breadcrumb (e.g. "Permissões"). */
+  parentLabel?: string
 }
 
-export function PermissionMatrixEditor({ features, profile, onSave, onCancel, saving }: PermissionMatrixEditorProps) {
+export function PermissionMatrixEditor({ features, profile, onSave, onCancel, saving, isNew, parentLabel }: PermissionMatrixEditorProps) {
   const { t } = useTranslation()
   const [name, setName] = React.useState(profile?.name ?? '')
   const [description, setDescription] = React.useState(profile?.description ?? '')
@@ -39,6 +44,22 @@ export function PermissionMatrixEditor({ features, profile, onSave, onCancel, sa
   const [collapsed, setCollapsed] = React.useState<Set<string>>(new Set())
   const [search, setSearch] = React.useState('')
 
+  // Snapshot the initial form so an EDIT only shows the SaveBar once something
+  // actually changes. A NEW role (create/duplicate) is unsaved by definition, so
+  // it's "dirty" as soon as it has a name.
+  const initial = React.useRef({
+    name: profile?.name ?? '',
+    description: profile?.description ?? '',
+    systemPerms: JSON.stringify(profile?.systemPermissions ?? []),
+    grants: JSON.stringify(profile?.grants ?? {}),
+  })
+  const dirty = isNew
+    ? name.trim() !== ''
+    : name !== initial.current.name ||
+      description !== initial.current.description ||
+      JSON.stringify(systemPerms) !== initial.current.systemPerms ||
+      JSON.stringify(grants) !== initial.current.grants
+
   const toggleSystemPerm = (perm: SystemPermission) => {
     setSystemPerms((prev) =>
       prev.includes(perm) ? prev.filter((p) => p !== perm) : [...prev, perm]
@@ -68,6 +89,17 @@ export function PermissionMatrixEditor({ features, profile, onSave, onCancel, sa
     onSave({ name: name.trim(), description: description.trim() || undefined, systemPermissions: systemPerms, grants })
   }
 
+  // Surface Save/Discard through the app-wide floating SaveBar (same pattern as
+  // CRUD forms), and wire Escape → back-to-list.
+  useSaveBar({
+    dirty,
+    saving,
+    onSave: handleSave,
+    onDiscard: onCancel,
+    saveLabel: isNew ? t('organization.permissions.createProfile') : t('organization.permissions.updateProfile'),
+  })
+  useBackHandler(onCancel)
+
   // Group features, filtering by search
   const groups = React.useMemo(() => {
     const filtered = search
@@ -84,6 +116,18 @@ export function PermissionMatrixEditor({ features, profile, onSave, onCancel, sa
 
   return (
     <div className="space-y-6">
+      {/* Back-to-list breadcrumb, matching the CRUD subpage pattern. */}
+      <nav className="flex items-center gap-1.5 text-sm text-muted-foreground">
+        <button type="button" onClick={onCancel} className="inline-flex items-center gap-1 transition-colors hover:text-foreground">
+          <ArrowLeft className="h-3.5 w-3.5" />
+          {parentLabel ?? t('organization.permissions.title')}
+        </button>
+        <span>/</span>
+        <span className="max-w-[240px] truncate font-medium text-foreground">
+          {name.trim() || t('organization.permissions.createCustom')}
+        </span>
+      </nav>
+
       <div className="grid gap-4 sm:grid-cols-2">
         <div>
           <label className="text-sm font-medium">{t('organization.permissions.profileName')}</label>
@@ -194,13 +238,7 @@ export function PermissionMatrixEditor({ features, profile, onSave, onCancel, sa
           </table>
         </div>
       </Card>
-
-      <div className="flex justify-end gap-2">
-        <Button variant="outline" onClick={onCancel}>{t('common.cancel')}</Button>
-        <Button onClick={handleSave} disabled={!name.trim() || saving}>
-          {saving ? t('common.saving') : profile ? t('organization.permissions.updateProfile') : t('organization.permissions.createProfile')}
-        </Button>
-      </div>
+      {/* Save / Discard are provided by the app-wide floating SaveBar (useSaveBar). */}
     </div>
   )
 }

package/src/shell/components/organization/PermissionProfilesTab.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react'
-import { Shield, Pencil, Trash2, Plus, Eye } from 'lucide-react'
+import { Shield, Pencil, Trash2, Plus, Eye, Copy } from 'lucide-react'
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@fayz-ai/ui'
 import { Button } from '@fayz-ai/ui'
 import { Badge } from '@fayz-ai/ui'
+import { Skeleton } from '@fayz-ai/ui'
 import { PermissionMatrixEditor } from './PermissionMatrixEditor'
 import { usePermissionsStore } from '../../stores/permissions.store'
 import { useOrganizationStore } from '../../stores/organization.store'
-import { useOrgAdapterOptional } from '../../lib/org-context'
+// Use the NATIVE org adapter (the one the app actually provides). The shell
+// lib/org-context is a separate, un-provided context that returns null here.
+import { useOrgAdapterOptional } from '../../../org'
 import { useTranslation } from '../../hooks/useTranslation'
 import type { PermissionProfile, PermissionAction, SystemPermission } from '../../types/permissions'
 
@@ -25,8 +28,22 @@ export function PermissionProfilesTab() {
   const { t } = useTranslation()
   const [editingProfile, setEditingProfile] = React.useState<PermissionProfile | null>(null)
   const [creating, setCreating] = React.useState(false)
+  // When duplicating, we open the CREATE flow pre-filled from a source role (its
+  // grants/system perms), with a fresh name — system roles are static, so users
+  // customize by copying rather than editing them in place.
+  const [duplicateSource, setDuplicateSource] = React.useState<PermissionProfile | null>(null)
   const [saving, setSaving] = React.useState(false)
 
+  const handleDuplicate = (profile: PermissionProfile) => {
+    setEditingProfile(null)
+    setCreating(false)
+    setDuplicateSource({
+      ...profile,
+      name: t('organization.permissions.copyName', { name: profile.name }) || `${profile.name} (copy)`,
+      isSystem: false,
+    })
+  }
+
   const memberCountByProfile = React.useMemo(() => {
     const counts: Record<string, number> = {}
     for (const m of members) {
@@ -48,6 +65,7 @@ export function PermissionProfilesTab() {
       setProfiles(updated)
       setEditingProfile(null)
       setCreating(false)
+      setDuplicateSource(null)
     } catch {
       // ignore
     } finally {
@@ -66,20 +84,17 @@ export function PermissionProfilesTab() {
     }
   }
 
-  if (creating || editingProfile) {
+  if (creating || editingProfile || duplicateSource) {
     return (
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">
-          {editingProfile ? t('organization.permissions.editProfile', { name: editingProfile.name }) : t('organization.permissions.createCustom')}
-        </h3>
-        <PermissionMatrixEditor
-          features={features}
-          profile={editingProfile ?? undefined}
-          onSave={handleSave}
-          onCancel={() => { setEditingProfile(null); setCreating(false) }}
-          saving={saving}
-        />
-      </div>
+      <PermissionMatrixEditor
+        features={features}
+        profile={editingProfile ?? duplicateSource ?? undefined}
+        isNew={!editingProfile}
+        parentLabel={t('organization.permissions.title')}
+        onSave={handleSave}
+        onCancel={() => { setEditingProfile(null); setCreating(false); setDuplicateSource(null) }}
+        saving={saving}
+      />
     )
   }
 
@@ -97,7 +112,20 @@ export function PermissionProfilesTab() {
       </div>
 
       <div className="grid gap-3">
-        {profiles.map((profile) => (
+        {profiles.length === 0 ? (
+          // Roles load via central org hydration; show skeletons until they arrive.
+          Array.from({ length: 4 }).map((_, i) => (
+            <Card key={`sk-${i}`}>
+              <CardContent className="flex items-center gap-4 p-4">
+                <Skeleton className="h-10 w-10 shrink-0 rounded-lg" />
+                <div className="flex-1 space-y-2">
+                  <Skeleton className="h-4 w-40" />
+                  <Skeleton className="h-3 w-64" />
+                </div>
+              </CardContent>
+            </Card>
+          ))
+        ) : profiles.map((profile) => (
           <Card key={profile.id}>
             <CardContent className="flex items-center gap-4 p-4">
               <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
@@ -126,18 +154,32 @@ export function PermissionProfilesTab() {
                     <Eye className="h-3.5 w-3.5" />
                   </Button>
                 )}
-                <Button variant="ghost" size="sm" onClick={() => setEditingProfile(profile)}>
-                  <Pencil className="h-3.5 w-3.5" />
-                </Button>
+                {/* Duplicate — always available; the primary (and only) way to
+                    customize a static system role. */}
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="text-destructive hover:text-destructive"
-                  disabled={profile.isSystem}
-                  onClick={() => handleDelete(profile)}
+                  title={t('organization.permissions.duplicate')}
+                  onClick={() => handleDuplicate(profile)}
                 >
-                  <Trash2 className="h-3.5 w-3.5" />
+                  <Copy className="h-3.5 w-3.5" />
                 </Button>
+                {/* Edit + delete are for custom roles only — system roles are static. */}
+                {!profile.isSystem && (
+                  <>
+                    <Button variant="ghost" size="sm" onClick={() => setEditingProfile(profile)}>
+                      <Pencil className="h-3.5 w-3.5" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="text-destructive hover:text-destructive"
+                      onClick={() => handleDelete(profile)}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </Button>
+                  </>
+                )}
               </div>
             </CardContent>
           </Card>

package/src/shell/components/organization/TeamTab.tsx

@@ -3,6 +3,7 @@ import { UserPlus, MoreHorizontal, Mail, Clock } from 'lucide-react'
 import { Card } from '@fayz-ai/ui'
 import { Button } from '@fayz-ai/ui'
 import { Badge } from '@fayz-ai/ui'
+import { Skeleton } from '@fayz-ai/ui'
 import { Avatar, AvatarFallback, AvatarImage } from '@fayz-ai/ui'
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@fayz-ai/ui'
 import {
@@ -13,11 +14,15 @@ import {
   DropdownSeparator,
 } from '@fayz-ai/ui'
 import { InviteMemberDialog } from './InviteMemberDialog'
+import { toast } from '../notifications/ToastProvider'
 import { useOrganizationStore } from '../../stores/organization.store'
 import { usePermissionsStore } from '../../stores/permissions.store'
 import { useInviteStore } from '../../stores/invite.store'
-import { useOrgAdapterOptional } from '../../lib/org-context'
-import { useAuthStore } from '../../stores/auth.store'
+// Native org adapter (see InviteMemberDialog) — the shell context is un-provided.
+import { useOrgAdapterOptional as useNativeOrgAdapter } from '../../../org'
+import type { OrgAdapter } from '../../types/org-adapter'
+const useOrgAdapterOptional = () => useNativeOrgAdapter() as unknown as OrgAdapter | null
+import { useAuthStore } from '@fayz-ai/auth'
 import { usePermission } from '../../hooks/usePermission'
 import { useTranslation } from '../../hooks/useTranslation'
 import { dedup } from '../../lib/dedup'
@@ -30,7 +35,7 @@ export function TeamTab() {
   const profiles = usePermissionsStore((s) => s.profiles)
   const invites = useInviteStore((s) => s.invites)
   const setInvites = useInviteStore((s) => s.setInvites)
-  const user = useAuthStore((s) => s.user)
+  const { user } = useAuthStore()
   const { hasSystemPermission } = usePermission()
 
   const [inviteOpen, setInviteOpen] = React.useState(false)
@@ -70,8 +75,9 @@ export function TeamTab() {
       await adapter.revokeInvite(currentOrg.id, inviteId)
       const updated = await adapter.listInvites(currentOrg.id)
       setInvites(updated)
-    } catch {
-      // ignore
+      toast.success(t('organization.team.inviteRevoked'))
+    } catch (err: any) {
+      toast.error(t('organization.team.inviteActionFailed'), { description: err?.message })
     }
   }
 
@@ -81,8 +87,9 @@ export function TeamTab() {
       await adapter.resendInvite(currentOrg.id, inviteId)
       const updated = await adapter.listInvites(currentOrg.id)
       setInvites(updated)
-    } catch {
-      // ignore
+      toast.success(t('organization.team.inviteResent'))
+    } catch (err: any) {
+      toast.error(t('organization.team.inviteActionFailed'), { description: err?.message })
     }
   }
 
@@ -121,7 +128,25 @@ export function TeamTab() {
                 </tr>
               </thead>
               <tbody className="divide-y">
-                {members.map((member) => {
+                {members.length === 0 ? (
+                  // Members load via central org hydration; show skeleton rows meanwhile.
+                  Array.from({ length: 3 }).map((_, i) => (
+                    <tr key={`sk-${i}`}>
+                      <td className="p-3">
+                        <div className="flex items-center gap-3">
+                          <Skeleton className="h-8 w-8 shrink-0 rounded-full" />
+                          <div className="space-y-1.5">
+                            <Skeleton className="h-3.5 w-32" />
+                            <Skeleton className="h-3 w-40" />
+                          </div>
+                        </div>
+                      </td>
+                      <td className="p-3"><Skeleton className="h-6 w-24 rounded-full" /></td>
+                      <td className="p-3"><Skeleton className="h-3 w-20" /></td>
+                      {canManageTeam && <td className="p-3" />}
+                    </tr>
+                  ))
+                ) : members.map((member) => {
                   const initials = member.user.fullName
                     .split(' ')
                     .map((n) => n[0])
@@ -163,7 +188,9 @@ export function TeamTab() {
                             </SelectContent>
                           </Select>
                         ) : (
-                          <Badge variant="secondary" className="text-xs">{member.profileName}</Badge>
+                          <Badge variant="secondary" className="text-xs">
+                            {profiles.find((p) => p.id === member.profileId)?.name ?? member.profileName}
+                          </Badge>
                         )}
                       </td>
                       <td className="p-3 text-sm text-muted-foreground">

package/src/shell/components/plugins/PluginSettingsPanel.tsx

@@ -99,7 +99,7 @@ function PropertiesTab({ registries, routeBase, regLabel }: {
               )}
             >
               {Icon && <Icon className="h-3.5 w-3.5" />}
-              {regLabel(r.id, r.entity.name)}
+              {regLabel(r.id, r.entity.namePlural ?? r.entity.name)}
             </button>
           )
         })}
@@ -161,7 +161,7 @@ export function PluginSettingsPanel({ title, subtitle, generalSettings, registri
     }
     if (customTabs) {
       for (const tab of customTabs) {
-        list.push({ id: `_custom_${tab.id}`, label: tab.label, icon: tab.icon, type: 'custom' })
+        list.push({ id: tab.id, label: tab.label, icon: tab.icon, type: 'custom' })
       }
     }
     if (connectors.length > 0) {
@@ -184,6 +184,8 @@ export function PluginSettingsPanel({ title, subtitle, generalSettings, registri
       const rest = hash.slice(routeBase.length + 1).split('/')[0]
       const match = tabs.find((t) => t.id === rest)
       if (match) return match.id
+      const legacyCustom = rest.startsWith('_custom_') ? rest.slice('_custom_'.length) : null
+      if (legacyCustom && tabs.find((t) => t.id === legacyCustom && t.type === 'custom')) return legacyCustom
       // Legacy/nested: a registry id (flat or under _properties) → Properties tab.
       if (registries?.some((r) => r.id === rest) && tabs.some((t) => t.id === '_properties')) return '_properties'
     }
@@ -207,7 +209,7 @@ export function PluginSettingsPanel({ title, subtitle, generalSettings, registri
   }
 
   const activeTabDef = tabs.find((t) => t.id === activeTab) ?? tabs[0]
-  const customTabContent = customTabs?.find((t) => `_custom_${t.id}` === activeTab)
+  const customTabContent = customTabs?.find((t) => t.id === activeTab)
 
   return (
     <div className="space-y-4">

package/src/shell/components/settings/ConnectedUserProfile.tsx

@@ -1,41 +1,74 @@
+import * as React from 'react'
 import { UserProfile } from './UserProfile'
-import { useAuthStore } from '../../stores/auth.store'
-import { getSupabaseClient } from '../../lib/supabase'
+// The signed-in user lives in @fayz-ai/auth's store (the one AuthProvider fills) —
+// the shell stores/auth.store is a separate, unpopulated store.
+import { useAuthStore } from '@fayz-ai/auth'
+import { getSupabaseClient, getSupabaseClientSafe, CORE_SCHEMA } from '../../lib/supabase'
 import { toast } from '../notifications/ToastProvider'
 
+interface ProfileRow {
+  full_name: string | null
+  avatar_url: string | null
+  email: string | null
+}
+
+// The "/me" surface: the current user's canonical profile = the auth user (id,
+// e-mail) merged with their saas_core.profiles row (name, avatar). Reads/writes go
+// to saas_core.profiles (RLS: id = auth.uid(), so a user only ever sees/edits their
+// own), and keep the auth-user metadata in sync so both stay coherent.
 export function ConnectedUserProfile() {
   const user = useAuthStore((s) => s.user)
   const setUser = useAuthStore((s) => s.setUser)
+  const [profile, setProfile] = React.useState<ProfileRow | null>(null)
+
+  // Fill: load the canonical profile row on mount (falls back to auth metadata).
+  React.useEffect(() => {
+    const supabase = getSupabaseClientSafe()
+    if (!user || !supabase) return // mock/no-backend: just use the auth-store user
+    let cancelled = false
+    void supabase
+      .schema(CORE_SCHEMA)
+      .from('profiles')
+      .select('full_name, avatar_url, email')
+      .eq('id', user.id)
+      .maybeSingle()
+      .then(({ data }) => {
+        if (!cancelled && data) setProfile(data as ProfileRow)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [user?.id])
+
   const handleSave = async (data: { fullName: string }) => {
+    if (!user) return
     try {
       const supabase = getSupabaseClient()
+      // Upsert the canonical row (INSERT if the profile doesn't exist yet).
+      const { error: profileError } = await supabase
+        .schema(CORE_SCHEMA)
+        .from('profiles')
+        .upsert({ id: user.id, full_name: data.fullName, email: user.email }, { onConflict: 'id' })
+      if (profileError) throw profileError
 
-      if (data.fullName !== user?.fullName) {
-        const { error: metaError } = await supabase.auth.updateUser({
-          data: { full_name: data.fullName },
-        })
-        if (metaError) throw metaError
+      // Keep the auth-user metadata in sync (used across the app's session).
+      const { error: metaError } = await supabase.auth.updateUser({ data: { full_name: data.fullName } })
+      if (metaError) throw metaError
 
-        const { error: profileError } = await supabase
-          .from('profiles')
-          .update({ full_name: data.fullName })
-          .eq('id', user!.id)
-        if (profileError) throw profileError
-
-        setUser(user ? { ...user, fullName: data.fullName } : null)
-      }
-
-      toast.success('Profile updated')
+      setUser({ ...user, fullName: data.fullName })
+      setProfile({ full_name: data.fullName, avatar_url: profile?.avatar_url ?? null, email: user.email })
+      toast.success('Perfil atualizado')
     } catch (err: any) {
-      toast.error('Failed to update', { description: err?.message })
+      toast.error('Falha ao atualizar', { description: err?.message })
     }
   }
 
   const handleAvatarChange = async (file: File) => {
+    if (!user) return
     try {
       const supabase = getSupabaseClient()
       const ext = file.name.split('.').pop()
-      const path = `avatars/${user!.id}.${ext}`
+      const path = `avatars/${user.id}.${ext}`
 
       const { error: uploadError } = await supabase.storage
         .from('avatars')
@@ -45,15 +78,25 @@ export function ConnectedUserProfile() {
       const { data: urlData } = supabase.storage.from('avatars').getPublicUrl(path)
       const avatarUrl = urlData.publicUrl
 
-      await supabase.auth.updateUser({ data: { avatar_url: avatarUrl } })
-      await supabase.from('profiles').update({ avatar_url: avatarUrl }).eq('id', user!.id)
+      const { error: profileError } = await supabase
+        .schema(CORE_SCHEMA)
+        .from('profiles')
+        .upsert({ id: user.id, avatar_url: avatarUrl, email: user.email }, { onConflict: 'id' })
+      if (profileError) throw profileError
 
-      setUser(user ? { ...user, avatarUrl } : null)
-      toast.success('Avatar updated')
+      await supabase.auth.updateUser({ data: { avatar_url: avatarUrl } })
+      setUser({ ...user, avatarUrl })
+      setProfile({ full_name: profile?.full_name ?? null, avatar_url: avatarUrl, email: user.email })
+      toast.success('Avatar atualizado')
     } catch (err: any) {
-      toast.error('Failed to upload avatar', { description: err?.message })
+      toast.error('Falha ao enviar avatar', { description: err?.message })
     }
   }
 
-  return <UserProfile user={user as any} onSave={handleSave} onAvatarChange={handleAvatarChange} />
+  // Merge: prefer the canonical profile row, fall back to auth metadata.
+  const merged = user
+    ? { ...user, fullName: profile?.full_name ?? user.fullName, avatarUrl: profile?.avatar_url ?? user.avatarUrl }
+    : null
+
+  return <UserProfile user={merged as any} onSave={handleSave} onAvatarChange={handleAvatarChange} />
 }

package/src/shell/components/settings/SettingsPage.tsx

@@ -21,6 +21,13 @@ interface SettingsPageProps {
   className?: string
   beforeContent?: React.ReactNode
   afterContent?: React.ReactNode
+  /** Show the company "Geral" (organization general) tab. Default: true.
+   *  B2C apps pass false to hide org-identity settings. Ignored when `tabs` is
+   *  supplied explicitly. */
+  showCompany?: boolean
+  /** Show the branding ("Identidade Visual") tab. Default: true. Ignored when
+   *  `tabs` is supplied explicitly. */
+  showBranding?: boolean
 }
 
 export function SettingsPage({
@@ -30,15 +37,17 @@ export function SettingsPage({
   className,
   beforeContent,
   afterContent,
+  showCompany = true,
+  showBranding = true,
 }: SettingsPageProps) {
   const { t } = useTranslation()
 
   const defaultTabs: SettingsTab[] = React.useMemo(() => [
-    { id: 'general', label: t('settings.general'), icon: <Building2 className="h-4 w-4" />, component: <ConnectedCompanySettings /> },
+    ...(showCompany ? [{ id: 'general', label: t('settings.general'), icon: <Building2 className="h-4 w-4" />, component: <ConnectedCompanySettings /> }] : []),
     { id: 'profile', label: t('settings.profile'), icon: <User className="h-4 w-4" />, component: <ConnectedUserProfile /> },
     { id: 'security', label: t('settings.security'), icon: <Shield className="h-4 w-4" />, component: <ConnectedSecuritySettings /> },
-    { id: 'branding', label: t('settings.branding'), icon: <Palette className="h-4 w-4" />, component: <ConnectedBrandingSettings /> },
-  ], [t])
+    ...(showBranding ? [{ id: 'branding', label: t('settings.branding'), icon: <Palette className="h-4 w-4" />, component: <ConnectedBrandingSettings /> }] : []),
+  ], [t, showCompany, showBranding])
 
   const baseTabs = tabs ?? defaultTabs
   const resolvedTabs = extraTabs ? [...baseTabs, ...extraTabs] : baseTabs

package/src/shell/config/theme/tokens.ts

@@ -82,7 +82,17 @@ export type ThemeDensity = 'compact' | 'comfortable' | 'spacious'
 export type ThemeShadow = 'none' | 'subtle' | 'medium' | 'bold'
 export type ThemeFont = 'system' | 'inter' | 'dm-sans' | 'poppins' | 'geist' | 'plus-jakarta' | 'outfit' | 'nunito' | 'source-sans' | 'raleway' | 'manrope'
 
+/** Native sidebar palette selector. 'neutral' (default) keeps the light Polaris
+ *  rail; 'brand' opts the sidebar into the app's `brand` color with a readable
+ *  light foreground (icons, active item, workspace switcher, user row). */
+export type SidebarStyle = 'brand' | 'neutral'
+
 export interface SaasTheme {
+  /** Explicit discriminator so config code never has to duck-type the theme
+   *  shape (SaasTheme vs CreateThemeOptions share keys like `brand`/`name`).
+   *  Optional for hand-written configs — `isSaasTheme` falls back to a
+   *  structural check — but generated configs should always set it. */
+  __kind?: 'saas-theme'
   name: string
   preset?: FayzThemePresetId
   brand: string
@@ -90,7 +100,9 @@ export interface SaasTheme {
   density?: ThemeDensity
   shadow?: ThemeShadow
   font?: ThemeFont
-  sidebar?: {
+  /** 'brand' | 'neutral' to derive the sidebar palette natively, or an explicit
+   *  token object for full control. Defaults to neutral when omitted. */
+  sidebar?: SidebarStyle | {
     background: string
     foreground: string
     border?: string