Logic function refactorization (#17861)

As title

.cursor/rules/creating-syncable-entity.mdc

@@ -913,7 +913,7 @@ export class WorkspaceMigrationMyEntityActionsBuilderService extends WorkspaceEn
       type: 'update',
       metadataName: 'myEntity',
       entityId: flatEntityId,
-      updates: flatEntityUpdates,
+      update: flatEntityUpdates,
     };
 
     return {

.github/workflows/ci-sdk.yaml

@@ -25,7 +25,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        task: [lint, typecheck, test:unit]
+        task: [lint, typecheck, test:unit, storybook:build, storybook:test, test:integration]
     steps:
       - name: Cancel Previous Runs
         uses: styfle/cancel-workflow-action@0.11.0
@@ -39,72 +39,62 @@ jobs:
         uses: ./.github/actions/yarn-install
       - name: Build
         run: npx nx build twenty-sdk
+      - name: Install Playwright
+        if: contains(matrix.task, 'storybook')
+        run: npx playwright install chromium
       - name: Run ${{ matrix.task }} task
         uses: ./.github/actions/nx-affected
         with:
           tag: scope:sdk
           tasks: ${{ matrix.task }}
-  # TODO uncomment when syncApplication resolver is fixed
-  # sdk-e2e-integration-test:
-  #   timeout-minutes: 30
-  #   runs-on: ubuntu-latest-8-cores
-  #   needs: [changed-files-check, sdk-test]
-  #   strategy:
-  #     matrix:
-  #       task: [test:integration, test:e2e]
-  #   if: needs.changed-files-check.outputs.any_changed == 'true'
-  #   services:
-  #     postgres:
-  #       image: twentycrm/twenty-postgres-spilo
-  #       env:
-  #         PGUSER_SUPERUSER: postgres
-  #         PGPASSWORD_SUPERUSER: postgres
-  #         ALLOW_NOSSL: 'true'
-  #         SPILO_PROVIDER: 'local'
-  #       ports:
-  #         - 5432:5432
-  #       options: >-
-  #         --health-cmd pg_isready
-  #         --health-interval 10s
-  #         --health-timeout 5s
-  #         --health-retries 5
-  #     redis:
-  #       image: redis
-  #       ports:
-  #         - 6379:6379
-  #   env:
-  #     NODE_ENV: test
-  #   steps:
-  #     - name: Fetch custom Github Actions and base branch history
-  #       uses: actions/checkout@v4
-  #       with:
-  #         fetch-depth: 0
-  #     - name: Install dependencies
-  #       uses: ./.github/actions/yarn-install
-  #     - name: Server / Append billing config to .env.test
-  #       working-directory: packages/twenty-server
-  #       run: |
-  #         echo "" >> .env.test
-  #         echo "IS_BILLING_ENABLED=true" >> .env.test
-  #         echo "BILLING_STRIPE_API_KEY=test-api-key" >> .env.test
-  #         echo "BILLING_STRIPE_BASE_PLAN_PRODUCT_ID=test-base-plan-product-id" >> .env.test
-  #         echo "BILLING_STRIPE_WEBHOOK_SECRET=test-webhook-secret" >> .env.test
-  #         echo "BILLING_PLAN_REQUIRED_LINK=http://localhost:3001/stripe-redirection" >> .env.test
-  #     - name: Server / Create Test DB
-  #       run: |
-  #         PGPASSWORD=postgres psql -h localhost -p 5432 -U postgres -d postgres -c 'CREATE DATABASE "test";'
-  #     - name: SDK / Run ${{ matrix.task }} Tests
-  #       uses: ./.github/actions/nx-affected
-  #       with:
-  #         tag: scope:sdk
-  #         tasks: ${{ matrix.task }}
+  sdk-e2e-test:
+    timeout-minutes: 30
+    runs-on: ubuntu-latest-8-cores
+    needs: [changed-files-check, sdk-test]
+    if: needs.changed-files-check.outputs.any_changed == 'true'
+    services:
+      postgres:
+        image: twentycrm/twenty-postgres-spilo
+        env:
+          PGUSER_SUPERUSER: postgres
+          PGPASSWORD_SUPERUSER: postgres
+          ALLOW_NOSSL: 'true'
+          SPILO_PROVIDER: 'local'
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
+    env:
+      NODE_ENV: test
+    steps:
+      - name: Fetch custom Github Actions and base branch history
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Install dependencies
+        uses: ./.github/actions/yarn-install
+      - name: Build
+        run: npx nx build twenty-sdk
+      - name: Server / Create Test DB
+        run: |
+          PGPASSWORD=postgres psql -h localhost -p 5432 -U postgres -d postgres -c 'CREATE DATABASE "test";'
+      - name: SDK / Run e2e Tests
+        uses: ./.github/actions/nx-affected
+        with:
+          tag: scope:sdk
+          tasks: test:e2e
   ci-sdk-status-check:
     if: always() && !cancelled()
     timeout-minutes: 5
     runs-on: ubuntu-latest
-    needs: [changed-files-check, sdk-test]
-    # TODO uncomment when syncApplication resolver is fixed
-    # needs: [changed-files-check, sdk-test, sdk-e2e-integration-test]
+    needs: [changed-files-check, sdk-test, sdk-e2e-test]
     steps:
       - name: Fail job if any needs failed
         if: contains(needs.*.result, 'failure')

eslint.config.mjs

@@ -11,7 +11,9 @@ import unicornPlugin from 'eslint-plugin-unicorn';
 import unusedImportsPlugin from 'eslint-plugin-unused-imports';
 import jsoncParser from 'jsonc-eslint-parser';
 
-const twentyRules = await nxPlugin.loadWorkspaceRules('packages/twenty-eslint-rules');
+const twentyRules = await nxPlugin.loadWorkspaceRules(
+  'packages/twenty-eslint-rules',
+);
 
 export default [
   // Base JavaScript configuration
@@ -65,6 +67,10 @@ export default [
               sourceTag: 'scope:sdk',
               onlyDependOnLibsWithTags: ['scope:sdk', 'scope:shared'],
             },
+            {
+              sourceTag: 'scope:create-app',
+              onlyDependOnLibsWithTags: ['scope:create-app', 'scope:shared'],
+            },
             {
               sourceTag: 'scope:shared',
               onlyDependOnLibsWithTags: ['scope:shared'],
@@ -197,7 +203,7 @@ export default [
     plugins: {
       ...mdxPlugin.flat.plugins,
       '@nx': nxPlugin,
-      'twenty': { rules: twentyRules },
+      twenty: { rules: twentyRules },
     },
   },
   mdxPlugin.flatCodeBlocks,

packages/create-twenty-app/README.md

@@ -61,15 +61,19 @@ yarn app:uninstall
 ```
 
 ## What gets scaffolded
-- A minimal app structure ready for Twenty
+- A minimal app structure ready for Twenty with example files:
+  - `application-config.ts` - Application metadata configuration
+  - `roles/default-role.ts` - Default role for logic functions
+  - `logic-functions/hello-world.ts` - Example logic function with HTTP trigger
+  - `front-components/hello-world.tsx` - Example front component
 - TypeScript configuration
 - Prewired scripts that wrap the `twenty` CLI from twenty-sdk
-- Example placeholders to help you add entities, actions, and sync logic
 
 ## Next steps
-- Explore the generated project and add your first entity with `yarn entity:add` (functions, front components, objects, roles).
-- Keep your types up‑to‑date using `yarn app:generate`.
+- Use `yarn auth:login` to authenticate with your Twenty workspace.
+- Explore the generated project and add your first entity with `yarn entity:add` (logic functions, front components, objects, roles).
 - Use `yarn app:dev` while you iterate — it watches, builds, and syncs changes to your workspace in real time.
+- Keep your types up‑to‑date using `yarn app:generate`.
 
 
 ## Publish your application

packages/create-twenty-app/eslint.config.mjs

@@ -1,111 +1,20 @@
-import js from '@eslint/js';
-import typescriptEslint from '@typescript-eslint/eslint-plugin';
-import typescriptParser from '@typescript-eslint/parser';
-import prettierPlugin from 'eslint-plugin-prettier';
+import baseConfig from '../../eslint.config.mjs';
 
 export default [
-  js.configs.recommended,
+  ...baseConfig,
   {
-    files: ['**/*.ts', '**/*.tsx'],
-    languageOptions: {
-      parser: typescriptParser,
-      parserOptions: {
-        ecmaVersion: 2022,
-        sourceType: 'module',
-      },
-      globals: {
-        // Node.js globals
-        process: 'readonly',
-        console: 'readonly',
-        Buffer: 'readonly',
-        __dirname: 'readonly',
-        __filename: 'readonly',
-        global: 'readonly',
-        setTimeout: 'readonly',
-        clearTimeout: 'readonly',
-        setInterval: 'readonly',
-        clearInterval: 'readonly',
-        // Browser globals that Node.js also has
-        URL: 'readonly',
-        URLSearchParams: 'readonly',
-        // Node.js types
-        NodeJS: 'readonly',
-      },
-    },
-    plugins: {
-      '@typescript-eslint': typescriptEslint,
-      prettier: prettierPlugin,
-    },
+    ignores: ['**/dist/**'],
+  },
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
     rules: {
-      ...typescriptEslint.configs.recommended.rules,
       'prettier/prettier': 'error',
-      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
-      '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/explicit-function-return-type': 'off',
-      '@typescript-eslint/explicit-module-boundary-types': 'off',
-      '@typescript-eslint/no-empty-function': 'off',
-      'no-useless-escape': 'off',
     },
   },
   {
-    files: ['**/*.js'],
-    languageOptions: {
-      ecmaVersion: 2022,
-      sourceType: 'module',
-      globals: {
-        process: 'readonly',
-        console: 'readonly',
-        Buffer: 'readonly',
-        __dirname: 'readonly',
-        __filename: 'readonly',
-        global: 'readonly',
-      },
-    },
-  },
-  {
-    files: ['**/*.test.ts', '**/*.spec.ts', '**/__tests__/**/*.ts'],
-    languageOptions: {
-      parser: typescriptParser,
-      parserOptions: {
-        ecmaVersion: 2022,
-        sourceType: 'module',
-      },
-      globals: {
-        // Node.js globals
-        process: 'readonly',
-        console: 'readonly',
-        Buffer: 'readonly',
-        __dirname: 'readonly',
-        __filename: 'readonly',
-        global: 'readonly',
-        // Jest globals
-        describe: 'readonly',
-        it: 'readonly',
-        test: 'readonly',
-        expect: 'readonly',
-        jest: 'readonly',
-        beforeEach: 'readonly',
-        afterEach: 'readonly',
-        beforeAll: 'readonly',
-        afterAll: 'readonly',
-      },
-    },
-    plugins: {
-      '@typescript-eslint': typescriptEslint,
-      prettier: prettierPlugin,
-    },
     rules: {
-      ...typescriptEslint.configs.recommended.rules,
-      'prettier/prettier': 'error',
-      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
-      '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/explicit-function-return-type': 'off',
-      '@typescript-eslint/explicit-module-boundary-types': 'off',
-      '@typescript-eslint/no-empty-function': 'off',
-      'no-useless-escape': 'off',
+      'no-console': 'off',
     },
-  },
-  {
-    ignores: ['dist/**', 'node_modules/**'],
+    ignores: ['src/**/*.ts', '!src/cli/**/*.ts'],
   },
 ];

packages/create-twenty-app/package.json

@@ -1,14 +1,18 @@
 {
   "name": "create-twenty-app",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Command-line interface to create Twenty application",
   "main": "dist/cli.cjs",
   "bin": "dist/cli.cjs",
   "files": [
-    "dist/**/*"
+    "dist",
+    "README.md",
+    "package.json"
   ],
   "scripts": {
-    "build": "npx rimraf dist && npx vite build"
+    "build": "npx rimraf dist && npx vite build",
+    "prepublishOnly": "tsx ../twenty-utils/pack-scripts/pre-publish-only.ts",
+    "postpublish": "tsx ../twenty-utils/pack-scripts/post-publish.ts"
   },
   "keywords": [
     "twenty",
@@ -34,6 +38,7 @@
     "lodash.camelcase": "^4.3.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.startcase": "^4.4.0",
+    "twenty-shared": "workspace:*",
     "uuid": "^13.0.0"
   },
   "devDependencies": {
@@ -43,6 +48,7 @@
     "@types/lodash.kebabcase": "^4.1.7",
     "@types/lodash.startcase": "^4",
     "@types/node": "^20.0.0",
+    "typescript": "^5.9.2",
     "vite": "^7.0.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^4.2.1"

packages/create-twenty-app/src/utils/__tests__/app-template.spec.ts

@@ -12,6 +12,9 @@ jest.mock('fs-extra', () => {
   };
 });
 
+const APPLICATION_FILE_NAME = 'application-config.ts';
+const DEFAULT_ROLE_FILE_NAME = 'default-role.ts';
+
 describe('copyBaseApplicationProject', () => {
   let testAppDirectory: string;
 
@@ -40,16 +43,16 @@ describe('copyBaseApplicationProject', () => {
       appDirectory: testAppDirectory,
     });
 
-    // Verify src/app/ folder exists
+    // Verify src/ folder exists
     const srcAppPath = join(testAppDirectory, 'src');
     expect(await fs.pathExists(srcAppPath)).toBe(true);
 
-    // Verify application.config.ts exists in src/app/
-    const appConfigPath = join(srcAppPath, 'application.config.ts');
+    // Verify application-config.ts exists in src/
+    const appConfigPath = join(srcAppPath, APPLICATION_FILE_NAME);
     expect(await fs.pathExists(appConfigPath)).toBe(true);
 
-    // Verify default.role.ts exists in src/app/
-    const roleConfigPath = join(srcAppPath, 'default.role.ts');
+    // Verify default-role.ts exists in src/
+    const roleConfigPath = join(srcAppPath, 'roles', DEFAULT_ROLE_FILE_NAME);
     expect(await fs.pathExists(roleConfigPath)).toBe(true);
   });
 
@@ -67,7 +70,7 @@ describe('copyBaseApplicationProject', () => {
     const packageJson = await fs.readJson(packageJsonPath);
     expect(packageJson.name).toBe('my-test-app');
     expect(packageJson.version).toBe('0.1.0');
-    expect(packageJson.dependencies['twenty-sdk']).toBe('0.4.0');
+    expect(packageJson.dependencies['twenty-sdk']).toBe('0.5.1');
     expect(packageJson.scripts['app:dev']).toBe('twenty app:dev');
   });
 
@@ -102,7 +105,7 @@ describe('copyBaseApplicationProject', () => {
     expect(yarnLockContent).toContain('yarn lockfile v1');
   });
 
-  it('should create application.config.ts with defineApplication and correct values', async () => {
+  it('should create application-config.ts with defineApplication and correct values', async () => {
     await copyBaseApplicationProject({
       appName: 'my-test-app',
       appDisplayName: 'My Test App',
@@ -110,11 +113,7 @@ describe('copyBaseApplicationProject', () => {
       appDirectory: testAppDirectory,
     });
 
-    const appConfigPath = join(
-      testAppDirectory,
-      'src',
-      'application.config.ts',
-    );
+    const appConfigPath = join(testAppDirectory, 'src', APPLICATION_FILE_NAME);
     const appConfigContent = await fs.readFile(appConfigPath, 'utf8');
 
     // Verify it uses defineApplication
@@ -125,7 +124,7 @@ describe('copyBaseApplicationProject', () => {
 
     // Verify it imports the role identifier
     expect(appConfigContent).toContain(
-      "import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/default.role'",
+      "import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/roles/default-role'",
     );
 
     // Verify display name and description
@@ -143,7 +142,7 @@ describe('copyBaseApplicationProject', () => {
     );
   });
 
-  it('should create default.role.ts with defineRole and correct values', async () => {
+  it('should create default-role.ts with defineRole and correct values', async () => {
     await copyBaseApplicationProject({
       appName: 'my-test-app',
       appDisplayName: 'My Test App',
@@ -151,7 +150,12 @@ describe('copyBaseApplicationProject', () => {
       appDirectory: testAppDirectory,
     });
 
-    const roleConfigPath = join(testAppDirectory, 'src', 'default.role.ts');
+    const roleConfigPath = join(
+      testAppDirectory,
+      'src',
+      'roles',
+      DEFAULT_ROLE_FILE_NAME,
+    );
     const roleConfigContent = await fs.readFile(roleConfigPath, 'utf8');
 
     // Verify it uses defineRole
@@ -206,11 +210,7 @@ describe('copyBaseApplicationProject', () => {
       appDirectory: testAppDirectory,
     });
 
-    const appConfigPath = join(
-      testAppDirectory,
-      'src',
-      'application.config.ts',
-    );
+    const appConfigPath = join(testAppDirectory, 'src', APPLICATION_FILE_NAME);
     const appConfigContent = await fs.readFile(appConfigPath, 'utf8');
 
     expect(appConfigContent).toContain("description: ''");
@@ -239,11 +239,11 @@ describe('copyBaseApplicationProject', () => {
 
     // Read both app configs
     const firstAppConfig = await fs.readFile(
-      join(firstAppDir, 'src', 'application.config.ts'),
+      join(firstAppDir, 'src', APPLICATION_FILE_NAME),
       'utf8',
     );
     const secondAppConfig = await fs.readFile(
-      join(secondAppDir, 'src', 'application.config.ts'),
+      join(secondAppDir, 'src', APPLICATION_FILE_NAME),
       'utf8',
     );
 
@@ -280,12 +280,12 @@ describe('copyBaseApplicationProject', () => {
     });
 
     const firstRoleConfig = await fs.readFile(
-      join(firstAppDir, 'src', 'default.role.ts'),
+      join(firstAppDir, 'src', 'roles', DEFAULT_ROLE_FILE_NAME),
       'utf8',
     );
 
     const secondRoleConfig = await fs.readFile(
-      join(secondAppDir, 'src', 'default.role.ts'),
+      join(secondAppDir, 'src', 'roles', DEFAULT_ROLE_FILE_NAME),
       'utf8',
     );
 

packages/create-twenty-app/src/utils/app-template.ts

@@ -33,20 +33,27 @@ export const copyBaseApplicationProject = async ({
   await createDefaultRoleConfig({
     displayName: appDisplayName,
     appDirectory: sourceFolderPath,
+    fileFolder: 'roles',
+    fileName: 'default-role.ts',
   });
 
   await createDefaultFrontComponent({
     appDirectory: sourceFolderPath,
+    fileFolder: 'front-components',
+    fileName: 'hello-world.tsx',
   });
 
   await createDefaultFunction({
     appDirectory: sourceFolderPath,
+    fileFolder: 'logic-functions',
+    fileName: 'hello-world.ts',
   });
 
   await createApplicationConfig({
     displayName: appDisplayName,
     description: appDescription,
     appDirectory: sourceFolderPath,
+    fileName: 'application-config.ts',
   });
 };
 
@@ -108,9 +115,13 @@ yarn-error.log*
 const createDefaultRoleConfig = async ({
   displayName,
   appDirectory,
+  fileFolder,
+  fileName,
 }: {
   displayName: string;
   appDirectory: string;
+  fileFolder?: string;
+  fileName: string;
 }) => {
   const universalIdentifier = v4();
 
@@ -130,13 +141,18 @@ export default defineRole({
 });
 `;
 
-  await fs.writeFile(join(appDirectory, 'default.role.ts'), content);
+  await fs.ensureDir(join(appDirectory, fileFolder ?? ''));
+  await fs.writeFile(join(appDirectory, fileFolder ?? '', fileName), content);
 };
 
 const createDefaultFrontComponent = async ({
   appDirectory,
+  fileFolder,
+  fileName,
 }: {
   appDirectory: string;
+  fileFolder?: string;
+  fileName: string;
 }) => {
   const universalIdentifier = v4();
 
@@ -159,19 +175,20 @@ export default defineFrontComponent({
 });
 `;
 
-  await fs.writeFile(
-    join(appDirectory, 'hello-world.front-component.tsx'),
-    content,
-  );
+  await fs.ensureDir(join(appDirectory, fileFolder ?? ''));
+  await fs.writeFile(join(appDirectory, fileFolder ?? '', fileName), content);
 };
 
 const createDefaultFunction = async ({
   appDirectory,
+  fileFolder,
+  fileName,
 }: {
   appDirectory: string;
+  fileFolder?: string;
+  fileName: string;
 }) => {
   const universalIdentifier = v4();
-  const triggerUniversalIdentifier = v4();
 
   const content = `import { defineLogicFunction } from 'twenty-sdk';
 
@@ -186,35 +203,33 @@ export default defineLogicFunction({
   description: 'A simple logic function',
   timeoutSeconds: 5,
   handler,
-  triggers: [
-    {
-      universalIdentifier: '${triggerUniversalIdentifier}',
-      type: 'route',
-      path: '/hello-world-logic-function',
-      httpMethod: 'GET',
-      isAuthRequired: false,
-    },
-  ],
+  httpRouteTriggerSettings: {
+    path: '/hello-world-logic-function',
+    httpMethod: 'GET',
+    isAuthRequired: false,
+  },
 });
 `;
 
-  await fs.writeFile(
-    join(appDirectory, 'hello-world.logic-function.ts'),
-    content,
-  );
+  await fs.ensureDir(join(appDirectory, fileFolder ?? ''));
+  await fs.writeFile(join(appDirectory, fileFolder ?? '', fileName), content);
 };
 
 const createApplicationConfig = async ({
   displayName,
   description,
   appDirectory,
+  fileFolder,
+  fileName,
 }: {
   displayName: string;
   description?: string;
   appDirectory: string;
+  fileFolder?: string;
+  fileName: string;
 }) => {
   const content = `import { defineApplication } from 'twenty-sdk';
-import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/default.role';
+import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/roles/default-role';
 
 export default defineApplication({
   universalIdentifier: '${v4()}',
@@ -224,7 +239,8 @@ export default defineApplication({
 });
 `;
 
-  await fs.writeFile(join(appDirectory, 'application.config.ts'), content);
+  await fs.ensureDir(join(appDirectory, fileFolder ?? ''));
+  await fs.writeFile(join(appDirectory, fileFolder ?? '', fileName), content);
 };
 
 const createPackageJson = async ({
@@ -261,13 +277,13 @@ const createPackageJson = async ({
       'lint:fix': 'eslint --fix',
     },
     dependencies: {
-      'twenty-sdk': '0.4.0',
+      'twenty-sdk': '0.5.1',
     },
     devDependencies: {
       typescript: '^5.9.3',
       '@types/node': '^24.7.2',
-      '@types/react': '^19.0.2',
-      react: '^19.0.2',
+      '@types/react': '^18.2.0',
+      react: '^18.2.0',
       eslint: '^9.32.0',
       'typescript-eslint': '^8.50.0',
     },

packages/create-twenty-app/tsconfig.json

@@ -12,7 +12,8 @@
     "types": ["jest", "node"],
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "jsx": "react"
   },
   "include": [
     "src/**/*.ts",

packages/twenty-apps/hello-world/src/application.config.ts

@@ -13,7 +13,7 @@ const config: ApplicationConfig = {
       isSecret: false,
     },
   },
-  functionRoleUniversalIdentifier: 'b648f87b-1d26-4961-b974-0908fd991061',
+  defaultRoleUniversalIdentifier: 'b648f87b-1d26-4961-b974-0908fd991061',
 };
 
 export default config;

packages/twenty-docker/twenty/entrypoint.sh

@@ -17,7 +17,10 @@ setup_and_migrate_db() {
         yarn database:migrate:prod
     fi
 
+    yarn command:prod cache:flush
     yarn command:prod upgrade
+    yarn command:prod cache:flush
+
     echo "Successfully migrated DB!"
 }
 

packages/twenty-docs/developers/extend/capabilities/apps.mdx

@@ -16,9 +16,6 @@ Apps let you build and manage Twenty customizations **as code**. Instead of conf
 - Build logic functions with custom triggers
 - Deploy the same app across multiple workspaces
 
-**Coming soon:**
-- Custom UI layouts and components
-
 ## Prerequisites
 
 - Node.js 24+ and Yarn 4
@@ -93,78 +90,53 @@ my-twenty-app/
   README.md
   public/                           # Public assets folder (images, fonts, etc.)
   src/
-    application.config.ts          # Required - main application configuration
-    default-function.role.ts       # Default role for serverless functions
-    hello-world.function.ts        # Example serverless function
-    hello-world.front-component.tsx # Example front component
-    // your entities (*.object.ts, *.function.ts, *.front-component.tsx, *.role.ts)
-```
-
-### Convention-over-configuration
-
-Applications use a **convention-over-configuration** approach where entities are detected by their file suffix. This allows flexible organization within the `src/app/` folder:
-
-| File suffix | Entity type |
-|-------------|-------------|
-| `*.object.ts` | Custom object definitions |
-| `*.function.ts` | Serverless function definitions |
-| `*.front-component.tsx` | Front component definitions |
-| `*.role.ts` | Role definitions |
-
-### Supported folder organizations
-
-You can organize your entities in any of these patterns:
-
-**Traditional (by type):**
-```text
-src/
-├── application.config.ts
-├── objects/
-│   └── postCard.object.ts
-├── functions/
-│   └── createPostCard.function.ts
-├── components/
-│   └── card.front-component.tsx
-└── roles/
-    └── admin.role.ts
-```
-
-**Feature-based:**
-```text
-src/
-├── application.config.ts
-└── post-card/
-    ├── postCard.object.ts
-    ├── createPostCard.function.ts
-    ├── card.front-component.tsx
-    └── postCardAdmin.role.ts
-```
-
-**Flat:**
-```text
-src/
-├── application.config.ts
-├── postCard.object.ts
-├── createPostCard.function.ts
-├── card.front-component.tsx
-└── admin.role.ts
+  ├── application-config.ts           # Required - main application configuration
+  ├── roles/
+  │   └── default-role.ts               # Default role for logic functions
+  ├── logic-functions/
+  │   └── hello-world.ts                # Example logic function
+  └── front-components/
+      └── hello-world.tsx               # Example front component
 ```
 
 At a high level:
 
-- **package.json**: Declares the app name, version, engines (Node 24+, Yarn 4), and adds `twenty-sdk` plus scripts like `app:dev`, `app:generate`, `entity:add`, `function:logs`, `function:execute`, `app:uninstall`, and `auth:login` that delegate to the local `twenty` CLI.
+- **package.json**: Declares the app name, version, engines (Node 24+, Yarn 4), and adds `twenty-sdk` plus scripts like `app:dev`, `app:generate`, `entity:add`, `function:logs`, `function:execute`, `app:uninstall`, and authentication commands that delegate to the local `twenty` CLI.
 - **.gitignore**: Ignores common artifacts such as `node_modules`, `.yarn`, `generated/` (typed client), `dist/`, `build/`, coverage folders, log files, and `.env*` files.
 - **yarn.lock**, **.yarnrc.yml**, **.yarn/**: Lock and configure the Yarn 4 toolchain used by the project.
 - **.nvmrc**: Pins the Node.js version expected by the project.
 - **eslint.config.mjs** and **tsconfig.json**: Provide linting and TypeScript configuration for your app's TypeScript sources.
 - **README.md**: A short README in the app root with basic instructions.
 - **public/**: A folder for storing public assets (images, fonts, static files) that will be served with your application. Files placed here are uploaded during sync and accessible at runtime.
-- **src/**: The main place where you define your application-as-code:
-  - `application.config.ts`: Global configuration for your app (metadata and runtime wiring). See "Application config" below.
-  - `*.role.ts`: Role definitions used by your logic functions. See "Default function role" below.
-  - `*.object.ts`: Custom object definitions.
-  - `*.function.ts`: Logic function definitions.
-  - `*.front-component.tsx`: Front component definitions.
+- **src/**: The main place where you define your application-as-code
+
+### Entity detection
+
+The SDK detects entities by parsing your TypeScript files for **`export default define<Entity>({...})`** calls. Each entity type has a corresponding helper function exported from `twenty-sdk`:
+
+| Helper function | Entity type |
+|-----------------|-------------|
+| `defineObject()` | Custom object definitions |
+| `defineLogicFunction()` | Logic function definitions |
+| `defineFrontComponent()` | Front component definitions |
+| `defineRole()` | Role definitions |
+| `defineField()` | Field extensions for existing objects |
+
+<Note>
+**File naming is flexible.** Entity detection is AST-based — the SDK scans your source files for the `export default define<Entity>({...})` pattern. You can organize your files and folders however you like. Grouping by entity type (e.g., `logic-functions/`, `roles/`) is just a convention for code organization, not a requirement.
+</Note>
+
+Example of a detected entity:
+```typescript
+// This file can be named anything and placed anywhere in src/
+import { defineObject, FieldType } from 'twenty-sdk';
+
+export default defineObject({
+  universalIdentifier: '...',
+  nameSingular: 'postCard',
+  // ... rest of config
+});
+```
 
 Later commands will add more files and folders:
 
@@ -210,16 +182,18 @@ The twenty-sdk provides typed building blocks and helper functions you use insid
 
 ### Helper functions
 
-The SDK provides four helper functions with built-in validation for defining your app entities:
+The SDK provides helper functions for defining your app entities. As described in [Entity detection](#entity-detection), you must use `export default define<Entity>({...})` for your entities to be detected:
 
 | Function | Purpose |
 |----------|---------|
-| `defineApplication()` | Configure application metadata |
+| `defineApplication()` | Configure application metadata (required, one per app) |
 | `defineObject()` | Define custom objects with fields |
-| `defineFunction()` | Define logic functions with handlers |
+| `defineLogicFunction()` | Define logic functions with handlers |
+| `defineFrontComponent()` | Define front components for custom UI |
 | `defineRole()` | Configure role permissions and object access |
+| `defineField()` | Extend existing objects with additional fields |
 
-These functions validate your configuration at runtime and provide better IDE autocompletion and type safety.
+These functions validate your configuration at build time and provide IDE autocompletion and type safety.
 
 ### Defining objects
 
@@ -307,9 +281,9 @@ Key points:
 </Note>
 
 
-### Application config (application.config.ts)
+### Application config (application-config.ts)
 
-Every app has a single `application.config.ts` file that describes:
+Every app has a single `application-config.ts` file that describes:
 
 - **Who the app is**: identifiers, display name, and description.
 - **How its functions run**: which role they use for permissions.
@@ -318,9 +292,9 @@ Every app has a single `application.config.ts` file that describes:
 Use `defineApplication()` to define your application configuration:
 
 ```typescript
-// src/app/application.config.ts
+// src/application-config.ts
 import { defineApplication } from 'twenty-sdk';
-import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from './default-function.role';
+import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/roles/default-role';
 
 export default defineApplication({
   universalIdentifier: '4ec0391d-18d5-411c-b2f3-266ddc1c3ef7',
@@ -335,18 +309,18 @@ export default defineApplication({
       isSecret: false,
     },
   },
-  roleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
+  defaultRoleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
 });
 ```
 
 Notes:
 - `universalIdentifier` fields are deterministic IDs you own; generate them once and keep them stable across syncs.
 - `applicationVariables` become environment variables for your functions (for example, `DEFAULT_RECIPIENT_NAME` is available as `process.env.DEFAULT_RECIPIENT_NAME`).
-- `roleUniversalIdentifier` must match the role you define in your `*.role.ts` file (see below).
+- `defaultRoleUniversalIdentifier` must match the role file (see below).
 
 #### Roles and permissions
 
-Applications can define roles that encapsulate permissions on your workspace's objects and actions. The field `roleUniversalIdentifier` in `application.config.ts` designates the default role used by your app's logic functions.
+Applications can define roles that encapsulate permissions on your workspace's objects and actions. The field `defaultRoleUniversalIdentifier` in `application-config.ts` designates the default role used by your app's logic functions.
 
 - The runtime API key injected as `TWENTY_API_KEY` is derived from this default function role.
 - The typed client will be restricted to the permissions granted to that role.
@@ -357,7 +331,7 @@ Applications can define roles that encapsulate permissions on your workspace's o
 When you scaffold a new app, the CLI also creates a default role file. Use `defineRole()` to define roles with built-in validation:
 
 ```typescript
-// src/app/default-function.role.ts
+// src/roles/default-role.ts
 import { defineRole, PermissionFlag } from 'twenty-sdk';
 
 export const DEFAULT_ROLE_UNIVERSAL_IDENTIFIER =
@@ -396,10 +370,10 @@ export default defineRole({
 });
 ```
 
-The `universalIdentifier` of this role is then referenced in `application.config.ts` as `roleUniversalIdentifier`. In other words:
+The `universalIdentifier` of this role is then referenced in `application-config.ts` as `defaultRoleUniversalIdentifier`. In other words:
 
 - **\*.role.ts** defines what the default function role can do.
-- **application.config.ts** points to that role so your functions inherit its permissions.
+- **application-config.ts** points to that role so your functions inherit its permissions.
 
 Notes:
 - Start from the scaffolded role, then progressively restrict it following least‑privilege.
@@ -409,11 +383,11 @@ Notes:
 
 ### Logic function config and entrypoint
 
-Each function file uses `defineFunction()` to export a configuration with a handler and optional triggers. Use the `*.function.ts` file suffix for automatic detection.
+Each function file uses `defineLogicFunction()` to export a configuration with a handler and optional triggers.
 
 ```typescript
-// src/app/createPostCard.function.ts
-import { defineFunction } from 'twenty-sdk';
+// src/app/createPostCard.logic-function.ts
+import { defineLogicFunction } from 'twenty-sdk';
 import type { DatabaseEventPayload, ObjectRecordCreateEvent, CronPayload, RoutePayload } from 'twenty-sdk';
 import Twenty, { type Person } from '~/generated';
 
@@ -433,7 +407,7 @@ const handler = async (params: RoutePayload) => {
   return result;
 };
 
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'create-new-post-card',
   timeoutSeconds: 2,
@@ -502,7 +476,7 @@ const handler = async (event: RoutePayload) => {
 When a route trigger invokes your logic function, it receives a `RoutePayload` object that follows the AWS HTTP API v2 format. Import the type from `twenty-sdk`:
 
 ```typescript
-import { defineFunction, type RoutePayload } from 'twenty-sdk';
+import { defineLogicFunction, type RoutePayload } from 'twenty-sdk';
 
 const handler = async (event: RoutePayload) => {
   // Access request data
@@ -532,7 +506,7 @@ The `RoutePayload` type has the following structure:
 By default, HTTP headers from incoming requests are **not** passed to your logic function for security reasons. To access specific headers, explicitly list them in the `forwardedRequestHeaders` array:
 
 ```typescript
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'webhook-handler',
   handler,
@@ -567,8 +541,44 @@ const handler = async (event: RoutePayload) => {
 
 You can create new functions in two ways:
 
-- **Scaffolded**: Run `yarn entity:add` and choose the option to add a new function. This generates a starter file with a handler and config.
-- **Manual**: Create a new `*.function.ts` file and use `defineFunction()`, following the same pattern.
+- **Scaffolded**: Run `yarn entity:add` and choose the option to add a new logic function. This generates a starter file with a handler and config.
+- **Manual**: Create a new `*.logic-function.ts` file and use `defineLogicFunction()`, following the same pattern.
+
+### Front components
+
+Front components let you build custom React components that render within Twenty's UI. Use `defineFrontComponent()` to define components with built-in validation:
+
+```typescript
+// src/my-widget.front-component.tsx
+import { defineFrontComponent } from 'twenty-sdk';
+
+const MyWidget = () => {
+  return (
+    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
+      <h1>My Custom Widget</h1>
+      <p>This is a custom front component for Twenty.</p>
+    </div>
+  );
+};
+
+export default defineFrontComponent({
+  universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  name: 'my-widget',
+  description: 'A custom widget component',
+  component: MyWidget,
+});
+```
+
+Key points:
+- Front components are React components that render in isolated contexts within Twenty.
+- Use the `*.front-component.tsx` file suffix for automatic detection.
+- The `component` field references your React component.
+- Components are built and synced automatically during `yarn app:dev`.
+
+You can create new front components in two ways:
+
+- **Scaffolded**: Run `yarn entity:add` and choose the option to add a new front component.
+- **Manual**: Create a new `*.front-component.tsx` file and use `defineFrontComponent()`.
 
 ### Generated typed client
 
@@ -592,13 +602,13 @@ When your function runs on Twenty, the platform injects credentials as environme
 
 Notes:
 - You do not need to pass URL or API key to the generated client. It reads `TWENTY_API_URL` and `TWENTY_API_KEY` from process.env at runtime.
-- The API key's permissions are determined by the role referenced in your `application.config.ts` via `roleUniversalIdentifier`. This is the default role used by logic functions of your application.
-- Applications can define roles to follow least‑privilege. Grant only the permissions your functions need, then point `roleUniversalIdentifier` to that role's universal identifier.
+- The API key's permissions are determined by the role referenced in your `application-config.ts` via `defaultRoleUniversalIdentifier`. This is the default role used by logic functions of your application.
+- Applications can define roles to follow least‑privilege. Grant only the permissions your functions need, then point `defaultRoleUniversalIdentifier` to that role's universal identifier.
 
 
 ### Hello World example
 
-Explore a minimal, end-to-end example that demonstrates objects, functions, and multiple triggers [here](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
+Explore a minimal, end-to-end example that demonstrates objects, logic functions, front components, and multiple triggers [here](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
 
 ## Manual setup (without the scaffolder)
 

packages/twenty-docs/l/ar/developers/extend/capabilities/apps.mdx

@@ -17,10 +17,6 @@ description: أنشئ وأدِر تخصيصات Twenty على هيئة كود.
 * أنشئ وظائف منطقية مع مشغلات مخصصة
 * انشر التطبيق نفسه عبر مساحات عمل متعددة
 
-**قريبًا:**
-
-* تخطيطات ومكونات واجهة مستخدم مخصصة
-
 ## المتطلبات الأساسية
 
 * Node.js 24+ وYarn 4
@@ -95,81 +91,54 @@ my-twenty-app/
   README.md
   public/                           # مجلد الأصول العامة (صور، خطوط، إلخ)
   src/
-    application.config.ts          # مطلوب - التكوين الرئيسي للتطبيق
-    default-function.role.ts       # الدور الافتراضي للوظائف بدون خادم
-    hello-world.function.ts        # مثال لوظيفة بدون خادم
-    hello-world.front-component.tsx # مثال لمكوّن الواجهة الأمامية
-    // كياناتك (*.object.ts, *.function.ts, *.front-component.tsx, *.role.ts)
-```
-
-### الاتفاقية فوق التهيئة
-
-تستخدم التطبيقات نهج **الاتفاقية فوق التهيئة** حيث تُكتشف الكيانات عبر لاحقة اسم الملف. يتيح ذلك تنظيمًا مرنًا داخل مجلد `src/app/`:
-
-| لاحقة الملف             | نوع الكيان                  |
-| ----------------------- | --------------------------- |
-| `*.object.ts`           | تعريفات كائنات مخصصة        |
-| `*.function.ts`         | تعريفات وظائف بلا خادم      |
-| `*.front-component.tsx` | Front component definitions |
-| `*.role.ts`             | تعريفات الأدوار             |
-
-### طرق تنظيم المجلدات المدعومة
-
-يمكنك تنظيم الكيانات بأي من الأنماط التالية:
-
-**تقليدي (حسب النوع):**
-
-```text
-src/
-├── application.config.ts
-├── objects/
-│   └── postCard.object.ts
-├── functions/
-│   └── createPostCard.function.ts
-├── components/
-│   └── card.front-component.tsx
-└── roles/
-    └── admin.role.ts
-```
-
-**حسب الميزة:**
-
-```text
-src/
-├── application.config.ts
-└── post-card/
-    ├── postCard.object.ts
-    ├── createPostCard.function.ts
-    ├── card.front-component.tsx
-    └── postCardAdmin.role.ts
-```
-
-**مسطح:**
-
-```text
-src/
-├── application.config.ts
-├── postCard.object.ts
-├── createPostCard.function.ts
-├── card.front-component.tsx
-└── admin.role.ts
+  ├── application-config.ts           # مطلوب - التكوين الرئيسي للتطبيق
+  ├── roles/
+  │   └── default-role.ts               # الدور الافتراضي لوظائف المنطق
+  ├── logic-functions/
+  │   └── hello-world.ts                # مثال لوظيفة منطقية
+  └── front-components/
+      └── hello-world.tsx               # مثال لمكوّن الواجهة الأمامية
 ```
 
 بشكل عام:
 
-* **package.json**: يصرّح باسم التطبيق والإصدار والمحرّكات (Node 24+، Yarn 4)، ويضيف `twenty-sdk` فضلًا عن نصوص مثل `app:dev` و`app:generate` و`entity:add` و`function:logs` و`function:execute` و`app:uninstall` و`auth:login` التي تفوِّض إلى `twenty` CLI المحلي.
+* **package.json**: يصرّح باسم التطبيق والإصدار والمحرّكات (Node 24+، Yarn 4)، ويضيف `twenty-sdk` فضلًا عن نصوص مثل `app:dev` و`app:generate` و`entity:add` و`function:logs` و`function:execute` و`app:uninstall` وأوامر المصادقة التي تُفوِّض إلى `twenty` CLI المحلي.
 * **.gitignore**: يتجاهل العناصر الشائعة مثل `node_modules` و`.yarn` و`generated/` (عميل مضبوط الأنواع) و`dist/` و`build/` ومجلدات التغطية وملفات السجلات وملفات `.env*`.
 * **yarn.lock**، **.yarnrc.yml**، **.yarn/**: تقوم بقفل وتكوين حزمة أدوات Yarn 4 المستخدمة في المشروع.
 * **.nvmrc**: يثبّت إصدار Node.js المتوقع للمشروع.
 * **eslint.config.mjs** و**tsconfig.json**: يقدّمان إعدادات الفحص والتهيئة لـ TypeScript لمصادر TypeScript في تطبيقك.
 * **README.md**: ملف README قصير في جذر التطبيق يتضمن تعليمات أساسية.
 * **public/**: مجلد لتخزين الأصول العامة (صور، خطوط، ملفات ثابتة) التي سيتم تقديمها مع تطبيقك. الملفات الموضوعة هنا تُرفع أثناء المزامنة وتكون متاحة أثناء وقت التشغيل.
-* **src/**: المكان الرئيسي حيث تعرّف تطبيقك ككود:
-  * `application.config.ts`: التكوين العام لتطبيقك (بيانات وصفية وربط وقت التشغيل). انظر "تكوين التطبيق" أدناه.
-  * `*.role.ts`: تعريفات الأدوار المستخدمة بواسطة وظائفك المنطقية. انظر "الدور الافتراضي للوظيفة" أدناه.
-  * `*.object.ts`: تعريفات كائنات مخصصة.
-  * `*.function.ts`: تعريفات الوظائف المنطقية.
-  * `*.front-component.tsx`: تعريفات المكونات الواجهية.
+* **src/**: المكان الرئيسي حيث تعرّف تطبيقك ككود
+
+### اكتشاف الكيانات
+
+يكتشف SDK الكيانات عبر تحليل ملفات TypeScript الخاصة بك بحثًا عن استدعاءات **`export default define<Entity>({...})`**. يحتوي كل نوع كيان على دالة مساعدة مقابلة يتم تصديرها من `twenty-sdk`:
+
+| دالة مساعدة              | نوع الكيان                        |
+| ------------------------ | --------------------------------- |
+| `defineObject()`         | تعريفات كائنات مخصصة              |
+| `defineLogicFunction()`  | تعريفات الوظائف المنطقية          |
+| `defineFrontComponent()` | Front component definitions       |
+| `defineRole()`           | تعريفات الأدوار                   |
+| `defineField()`          | امتدادات الحقول للكائنات الموجودة |
+
+<Note>
+  **تسمية الملفات مرنة.** يعتمد اكتشاف الكيانات على بنية الشجرة المجردة (AST) — إذ يقوم SDK بفحص ملفات المصدر لديك بحثًا عن النمط `export default define<Entity>({...})`. يمكنك تنظيم ملفاتك ومجلداتك كيفما تشاء. التجميع حسب نوع الكيان (مثلًا، `logic-functions/` و`roles/`) هو مجرد عرف لتنظيم الشيفرة، وليس مطلبًا إلزاميًا.
+</Note>
+
+مثال على كيان تم اكتشافه:
+
+```typescript
+// This file can be named anything and placed anywhere in src/
+import { defineObject, FieldType } from 'twenty-sdk';
+
+export default defineObject({
+  universalIdentifier: '...',
+  nameSingular: 'postCard',
+  // ... rest of config
+});
+```
 
 ستضيف الأوامر اللاحقة مزيدًا من الملفات والمجلدات:
 
@@ -215,16 +184,18 @@ Once you've switched workspaces with `auth:switch`, all subsequent commands will
 
 ### دوال مساعدة
 
-يوفّر SDK أربع دوال مساعدة مع تحقق مدمج لتعريف كيانات تطبيقك:
+يوفّر SDK دوالًا مساعدة لتعريف كيانات تطبيقك. كما هو موضح في [اكتشاف الكيانات](#entity-detection)، يجب استخدام `export default define<Entity>({...})` كي يتم اكتشاف كياناتك:
 
-| دالة                  | الغرض                                    |
-| --------------------- | ---------------------------------------- |
-| `defineApplication()` | تهيئة بيانات التطبيق الوصفية             |
-| `defineObject()`      | تعريف كائنات مخصصة مع حقول               |
-| `defineFunction()`    | تعريف وظائف منطقية مع معالجات            |
-| `defineRole()`        | تهيئة صلاحيات الدور والوصول إلى الكائنات |
+| دالة                     | الغرض                                                |
+| ------------------------ | ---------------------------------------------------- |
+| `defineApplication()`    | تهيئة بيانات التعريف للتطبيق (مطلوب، واحد لكل تطبيق) |
+| `defineObject()`         | تعريف كائنات مخصصة مع حقول                           |
+| `defineLogicFunction()`  | تعريف وظائف منطقية مع معالجات                        |
+| `defineFrontComponent()` | عرِّف مكوّنات أمامية لواجهة مستخدم مخصّصة            |
+| `defineRole()`           | تهيئة صلاحيات الدور والوصول إلى الكائنات             |
+| `defineField()`          | وسّع الكائنات الموجودة بحقول إضافية                  |
 
-تتحقق هذه الدوال من تكوينك في وقت التشغيل وتوفر إكمالًا تلقائيًا أفضل في بيئة التطوير وأمان أنواع أعلى.
+تتحقق هذه الدوال من تكوينك وقت البناء وتوفّر إكمالًا تلقائيًا في بيئة التطوير وأمان الأنواع.
 
 ### تعريف الكائنات
 
@@ -311,9 +282,9 @@ export default defineObject({
   **يتم إنشاء الحقول الأساسية تلقائيًا.** عند تعريف كائن مخصص، يضيف Twenty تلقائيًا حقولًا قياسية مثل `name` و`createdAt` و`updatedAt` و`createdBy` و`position` و`deletedAt`. لا تحتاج إلى تعريف هذه في مصفوفة `fields` — أضف فقط حقولك المخصصة.
 </Note>
 
-### تكوين التطبيق (application.config.ts)
+### تكوين التطبيق (application-config.ts)
 
-كل تطبيق لديه ملف واحد `application.config.ts` يصف:
+كل تطبيق لديه ملف واحد `application-config.ts` يصف:
 
 * **هوية التطبيق**: المعرفات، اسم العرض، والوصف.
 * **كيفية تشغيل وظائفه**: الدور الذي تستخدمه للأذونات.
@@ -322,9 +293,9 @@ export default defineObject({
 Use `defineApplication()` to define your application configuration:
 
 ```typescript
-// src/app/application.config.ts
+// src/application-config.ts
 import { defineApplication } from 'twenty-sdk';
-import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from './default-function.role';
+import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/roles/default-role';
 
 export default defineApplication({
   universalIdentifier: '4ec0391d-18d5-411c-b2f3-266ddc1c3ef7',
@@ -339,7 +310,7 @@ export default defineApplication({
       isSecret: false,
     },
   },
-  roleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
+  defaultRoleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
 });
 ```
 
@@ -347,11 +318,11 @@ export default defineApplication({
 
 * حقول `universalIdentifier` هي معرّفات حتمية تخصك؛ أنشئها مرة واحدة واحتفظ بها ثابتة عبر عمليات المزامنة.
 * `applicationVariables` تصبح متغيرات بيئة لوظائفك (على سبيل المثال، `DEFAULT_RECIPIENT_NAME` متاح كـ `process.env.DEFAULT_RECIPIENT_NAME`).
-* `roleUniversalIdentifier` must match the role you define in your `*.role.ts` file (see below).
+* `defaultRoleUniversalIdentifier` يجب أن يطابق ملف الدور (انظر أدناه).
 
 #### الأدوار والصلاحيات
 
-يمكن للتطبيقات تعريف أدوار تُغلّف الصلاحيات على كائنات وإجراءات مساحة العمل لديك. The field `roleUniversalIdentifier` in `application.config.ts` designates the default role used by your app's logic functions.
+يمكن للتطبيقات تعريف أدوار تُغلّف الصلاحيات على كائنات وإجراءات مساحة العمل لديك. يعين الحقل `defaultRoleUniversalIdentifier` في `application-config.ts` الدور الافتراضي الذي تستخدمه وظائف المنطق في تطبيقك.
 
 * مفتاح واجهة البرمجة في وقت التشغيل المحقون باسم `TWENTY_API_KEY` مستمد من دور الوظيفة الافتراضي هذا.
 * سيُقيَّد العميل مضبوط الأنواع بالأذونات الممنوحة لذلك الدور.
@@ -362,7 +333,7 @@ export default defineApplication({
 عند توليد تطبيق جديد بالقالب، ينشئ CLI أيضًا ملف دور افتراضي. استخدم `defineRole()` لتعريف أدوار مع تحقق مدمج:
 
 ```typescript
-// src/app/default-function.role.ts
+// src/roles/default-role.ts
 import { defineRole, PermissionFlag } from 'twenty-sdk';
 
 export const DEFAULT_ROLE_UNIVERSAL_IDENTIFIER =
@@ -401,10 +372,10 @@ export default defineRole({
 });
 ```
 
-يُشار بعد ذلك إلى `universalIdentifier` لهذا الدور في `application.config.ts` باسم `roleUniversalIdentifier`. بعبارة أخرى:
+يُشار بعد ذلك إلى `universalIdentifier` لهذا الدور في `application-config.ts` باسم `defaultRoleUniversalIdentifier`. بعبارة أخرى:
 
 * **\\*.role.ts** يحدد ما يمكن أن يفعله الدور الافتراضي للوظيفة.
-* **application.config.ts** يشير إلى ذلك الدور بحيث ترث وظائفك صلاحياته.
+* **application-config.ts** يشير إلى ذلك الدور بحيث ترث وظائفك أذوناته.
 
 الملاحظات:
 
@@ -415,11 +386,11 @@ export default defineRole({
 
 ### تكوين الوظيفة المنطقية ونقطة الدخول
 
-كل ملف وظيفة يستخدم `defineFunction()` لتصدير تكوين مع معالج ومشغلات اختيارية. استخدم لاحقة الملف `*.function.ts` للاكتشاف التلقائي.
+كل ملف وظيفة يستخدم `defineLogicFunction()` لتصدير تكوين مع معالج ومشغّلات اختيارية.
 
 ```typescript
-// src/app/createPostCard.function.ts
-import { defineFunction } from 'twenty-sdk';
+// src/app/createPostCard.logic-function.ts
+import { defineLogicFunction } from 'twenty-sdk';
 import type { DatabaseEventPayload, ObjectRecordCreateEvent, CronPayload, RoutePayload } from 'twenty-sdk';
 import Twenty, { type Person } from '~/generated';
 
@@ -439,7 +410,7 @@ const handler = async (params: RoutePayload) => {
   return result;
 };
 
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'create-new-post-card',
   timeoutSeconds: 2,
@@ -515,7 +486,7 @@ export default defineFunction({
 عندما يستدعي مشغّل المسار وظيفتك المنطقية، يتلقى كائنًا من النوع `RoutePayload` يتبع تنسيق AWS HTTP API v2. استورد النوع من `twenty-sdk`:
 
 ```typescript
-import { defineFunction, type RoutePayload } from 'twenty-sdk';
+import { defineLogicFunction, type RoutePayload } from 'twenty-sdk';
 
 const handler = async (event: RoutePayload) => {
   // Access request data
@@ -545,7 +516,7 @@ const handler = async (event: RoutePayload) => {
 افتراضيًا، **لا** تُمرَّر رؤوس HTTP من الطلبات الواردة إلى وظيفتك المنطقية لأسباب أمنية. للوصول إلى رؤوس محددة، قم بإدراجها صراحةً في مصفوفة `forwardedRequestHeaders`:
 
 ```typescript
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'webhook-handler',
   handler,
@@ -580,8 +551,45 @@ const handler = async (event: RoutePayload) => {
 
 يمكنك إنشاء وظائف جديدة بطريقتين:
 
-* **مُنشأ بالقالب**: شغّل `yarn entity:add` واختر خيار إضافة وظيفة جديدة. يُولّد هذا ملفًا مبدئيًا مع معالج وتكوين.
-* **يدوي**: أنشئ ملفًا جديدًا `*.function.ts` واستخدم `defineFunction()` مع اتباع النمط نفسه.
+* **مُنشأ بالقالب**: شغّل `yarn entity:add` واختر خيار إضافة وظيفة منطقية جديدة. يُولّد هذا ملفًا مبدئيًا مع معالج وتكوين.
+* **يدوي**: أنشئ ملفًا جديدًا `*.logic-function.ts` واستخدم `defineLogicFunction()` مع اتباع النمط نفسه.
+
+### المكوّنات الأمامية
+
+تتيح لك المكوّنات الأمامية إنشاء مكوّنات React مخصّصة تُعرَض داخل واجهة مستخدم Twenty. استخدم `defineFrontComponent()` لتعريف مكوّنات مع تحقّق مدمج:
+
+```typescript
+// src/my-widget.front-component.tsx
+import { defineFrontComponent } from 'twenty-sdk';
+
+const MyWidget = () => {
+  return (
+    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
+      <h1>My Custom Widget</h1>
+      <p>This is a custom front component for Twenty.</p>
+    </div>
+  );
+};
+
+export default defineFrontComponent({
+  universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  name: 'my-widget',
+  description: 'A custom widget component',
+  component: MyWidget,
+});
+```
+
+النقاط الرئيسية:
+
+* المكوّنات الأمامية هي مكوّنات React تُعرَض ضمن سياقات معزولة داخل Twenty.
+* استخدم لاحقة الملف `*.front-component.tsx` للاكتشاف التلقائي.
+* يشير الحقل `component` إلى مكوّن React الخاص بك.
+* يتم بناء المكوّنات ومزامنتها تلقائيًا أثناء `yarn app:dev`.
+
+يمكنك إنشاء مكوّنات أمامية جديدة بطريقتين:
+
+* **مُنشأ بالقالب**: شغّل `yarn entity:add` واختر خيار إضافة مكوّن أمامي جديد.
+* **يدوي**: أنشئ ملفًا جديدًا `*.front-component.tsx` واستخدم `defineFrontComponent()`.
 
 ### عميل مُولَّد مضبوط الأنواع
 
@@ -606,12 +614,12 @@ const { me } = await client.query({ me: { id: true, displayName: true } });
 الملاحظات:
 
 * لا تحتاج إلى تمرير عنوان URL أو مفتاح واجهة برمجة التطبيقات إلى العميل المُولَّد. يقوم بقراءة `TWENTY_API_URL` و`TWENTY_API_KEY` من process.env وقت التشغيل.
-* تُحدَّد أذونات مفتاح واجهة برمجة التطبيقات بواسطة الدور المشار إليه في `application.config.ts` عبر `roleUniversalIdentifier`. هذا هو الدور الافتراضي الذي تستخدمه الوظائف المنطقية في تطبيقك.
-* يمكن للتطبيقات تعريف أدوار لاتباع مبدأ أقل الامتياز. امنح فقط الأذونات التي تحتاجها وظائفك، ثم وجّه `roleUniversalIdentifier` إلى المعرّف الشامل لذلك الدور.
+* تُحدَّد أذونات مفتاح واجهة برمجة التطبيقات بواسطة الدور المشار إليه في `application-config.ts` عبر `defaultRoleUniversalIdentifier`. هذا هو الدور الافتراضي الذي تستخدمه الوظائف المنطقية في تطبيقك.
+* يمكن للتطبيقات تعريف أدوار لاتباع مبدأ أقل الامتياز. امنح فقط الأذونات التي تحتاجها وظائفك، ثم وجّه `defaultRoleUniversalIdentifier` إلى المعرّف الشامل لذلك الدور.
 
 ### مثال Hello World
 
-استكشف مثالًا بسيطًا شاملًا من البداية إلى النهاية يوضح الكائنات والوظائف ومشغلات متعددة [هنا](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
+استكشف مثالًا بسيطًا شاملًا من البداية إلى النهاية يوضح الكائنات والوظائف المنطقية والمكوّنات الأمامية ومشغّلات متعددة [هنا](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
 
 ## إعداد يدوي (بدون المهيئ)
 

packages/twenty-docs/l/cs/developers/extend/capabilities/apps.mdx

@@ -17,10 +17,6 @@ Aplikace vám umožňují vytvářet a spravovat přizpůsobení Twenty **jako k
 * Vytvářejte logické funkce s vlastními spouštěči
 * Nasazujte stejnou aplikaci do více pracovních prostorů
 
-**Již brzy:**
-
-* Vlastní rozvržení a komponenty uživatelského rozhraní
-
 ## Předpoklady
 
 * Node.js 24+ a Yarn 4
@@ -95,81 +91,54 @@ my-twenty-app/
   README.md
   public/                           # Složka s veřejnými prostředky (obrázky, písma apod.)
   src/
-    application.config.ts          # Povinné – hlavní konfigurace aplikace
-    default-function.role.ts       # Výchozí role pro bezserverové funkce
-    hello-world.function.ts        # Ukázková bezserverová funkce
-    hello-world.front-component.tsx # Ukázková front-endová komponenta
-    // vaše entity (*.object.ts, *.function.ts, *.front-component.tsx, *.role.ts)
-```
-
-### Konvence před konfigurací
-
-Aplikace používají přístup **konvence před konfigurací**, kde jsou entity detekovány podle přípony souboru. To umožňuje flexibilní organizaci ve složce `src/app/`:
-
-| Přípona souboru         | Typ entity                       |
-| ----------------------- | -------------------------------- |
-| `*.object.ts`           | Definice vlastních objektů       |
-| `*.function.ts`         | Definice serverless funkcí       |
-| `*.front-component.tsx` | Definice frontendových komponent |
-| `*.role.ts`             | Definice rolí                    |
-
-### Podporované uspořádání složek
-
-Entity můžete uspořádat podle některého z těchto vzorů:
-
-**Tradiční (podle typu):**
-
-```text
-src/
-├── application.config.ts
-├── objects/
-│   └── postCard.object.ts
-├── functions/
-│   └── createPostCard.function.ts
-├── components/
-│   └── card.front-component.tsx
-└── roles/
-    └── admin.role.ts
-```
-
-**Podle funkcí:**
-
-```text
-src/
-├── application.config.ts
-└── post-card/
-    ├── postCard.object.ts
-    ├── createPostCard.function.ts
-    ├── card.front-component.tsx
-    └── postCardAdmin.role.ts
-```
-
-**Plochá:**
-
-```text
-src/
-├── application.config.ts
-├── postCard.object.ts
-├── createPostCard.function.ts
-├── card.front-component.tsx
-└── admin.role.ts
+  ├── application-config.ts           # Povinné – hlavní konfigurace aplikace
+  ├── roles/
+  │   └── default-role.ts               # Výchozí role pro logické funkce
+  ├── logic-functions/
+  │   └── hello-world.ts                # Ukázková logická funkce
+  └── front-components/
+      └── hello-world.tsx               # Ukázková front-endová komponenta
 ```
 
 V kostce:
 
-* **package.json**: Deklaruje název aplikace, verzi, engines (Node 24+, Yarn 4) a přidává `twenty-sdk` plus skripty jako `app:dev`, `app:generate`, `entity:add`, `function:logs`, `function:execute`, `app:uninstall` a `auth:login`, které delegují na lokální `twenty` CLI.
+* **package.json**: Deklaruje název aplikace, verzi, engines (Node 24+, Yarn 4) a přidává `twenty-sdk` plus skripty jako `app:dev`, `app:generate`, `entity:add`, `function:logs`, `function:execute`, `app:uninstall` a autentizační příkazy, které delegují na lokální `twenty` CLI.
 * **.gitignore**: Ignoruje běžné artefakty jako `node_modules`, `.yarn`, `generated/` (typovaný klient), `dist/`, `build/`, složky s coverage, logy a soubory `.env*`.
 * **yarn.lock**, **.yarnrc.yml**, **.yarn/**: Zamykají a konfigurují nástrojový řetězec Yarn 4 používaný projektem.
 * **.nvmrc**: Fixuje verzi Node.js požadovanou projektem.
 * **eslint.config.mjs** a **tsconfig.json**: Poskytují lintování a konfiguraci TypeScriptu pro zdrojové soubory vaší aplikace v TypeScriptu.
 * **README.md**: Krátké README v kořeni aplikace se základními pokyny.
 * **public/**: Složka pro ukládání veřejných prostředků (obrázky, písma, statické soubory), které bude vaše aplikace poskytovat. Soubory umístěné zde se během synchronizace nahrají a jsou za běhu dostupné.
-* **src/**: Hlavní místo, kde definujete svou aplikaci jako kód:
-  * `application.config.ts`: Globální konfigurace vaší aplikace (metadata a napojení za běhu). Viz „Konfigurace aplikace“ níže.
-  * `*.role.ts`: Definice rolí používané vašimi logickými funkcemi. Viz „Výchozí role funkce“ níže.
-  * `*.object.ts`: Definice vlastních objektů.
-  * `*.function.ts`: Definice logických funkcí.
-  * `*.front-component.tsx`: Definice frontových komponent.
+* **src/**: Hlavní místo, kde definujete svou aplikaci jako kód
+
+### Detekce entit
+
+SDK detekuje entity analýzou vašich souborů TypeScript a hledá volání **`export default define<Entity>({...})`**. Každý typ entity má odpovídající pomocnou funkci exportovanou z `twenty-sdk`:
+
+| Pomocná funkce           | Typ entity                            |
+| ------------------------ | ------------------------------------- |
+| `defineObject()`         | Definice vlastních objektů            |
+| `defineLogicFunction()`  | Definice logických funkcí             |
+| `defineFrontComponent()` | Definice frontendových komponent      |
+| `defineRole()`           | Definice rolí                         |
+| `defineField()`          | Rozšíření polí u existujících objektů |
+
+<Note>
+  **Pojmenování souborů je flexibilní.** Detekce entit je založená na AST — SDK prochází vaše zdrojové soubory a hledá vzor `export default define<Entity>({...})`. Soubory a složky můžete organizovat, jak chcete. Seskupování podle typu entity (např. `logic-functions/`, `roles/`) je pouze konvence pro organizaci kódu, nikoli požadavek.
+</Note>
+
+Příklad detekované entity:
+
+```typescript
+// This file can be named anything and placed anywhere in src/
+import { defineObject, FieldType } from 'twenty-sdk';
+
+export default defineObject({
+  universalIdentifier: '...',
+  nameSingular: 'postCard',
+  // ... rest of config
+});
+```
 
 Pozdější příkazy přidají další soubory a složky:
 
@@ -215,16 +184,18 @@ twenty-sdk poskytuje typované stavební bloky a pomocné funkce, které použí
 
 ### Pomocné funkce
 
-SDK poskytuje čtyři pomocné funkce s vestavěnou validací pro definování entit vaší aplikace:
+SDK poskytuje pomocné funkce pro definování entit vaší aplikace. Jak je popsáno v [Detekce entit](#entity-detection), musíte použít `export default define<Entity>({...})`, aby byly vaše entity detekovány:
 
-| Funkce                | Účel                                             |
-| --------------------- | ------------------------------------------------ |
-| `defineApplication()` | Konfigurace metadat aplikace                     |
-| `defineObject()`      | Definice vlastních objektů s poli                |
-| `defineFunction()`    | Definice logických funkcí s obslužnými funkcemi  |
-| `defineRole()`        | Konfigurace oprávnění rolí a přístupu k objektům |
+| Funkce                   | Účel                                                              |
+| ------------------------ | ----------------------------------------------------------------- |
+| `defineApplication()`    | Nakonfigurujte metadata aplikace (povinné, jedno na aplikaci)     |
+| `defineObject()`         | Definice vlastních objektů s poli                                 |
+| `defineLogicFunction()`  | Definice logických funkcí s obslužnými funkcemi                   |
+| `defineFrontComponent()` | Definujte frontendové komponenty pro vlastní uživatelské rozhraní |
+| `defineRole()`           | Konfigurace oprávnění rolí a přístupu k objektům                  |
+| `defineField()`          | Rozšiřte existující objekty o další pole                          |
 
-Tyto funkce validují vaši konfiguraci za běhu a poskytují lepší automatické doplňování v IDE a lepší typovou bezpečnost.
+Tyto funkce validují vaši konfiguraci v době sestavení a poskytují automatické doplňování v IDE a typovou bezpečnost.
 
 ### Definování objektů
 
@@ -311,9 +282,9 @@ Hlavní body:
   **Základní pole jsou vytvořena automaticky.** Když definujete vlastní objekt, Twenty automaticky přidá standardní pole jako `name`, `createdAt`, `updatedAt`, `createdBy`, `position` a `deletedAt`. Nemusíte je definovat v poli `fields` — přidejte pouze svá vlastní pole.
 </Note>
 
-### Konfigurace aplikace (application.config.ts)
+### Konfigurace aplikace (application-config.ts)
 
-Každá aplikace má jeden soubor `application.config.ts`, který popisuje:
+Každá aplikace má jeden soubor `application-config.ts`, který popisuje:
 
 * **Identitu aplikace**: identifikátory, zobrazovaný název a popis.
 * **Jak běží její funkce**: kterou roli používají pro oprávnění.
@@ -322,9 +293,9 @@ Každá aplikace má jeden soubor `application.config.ts`, který popisuje:
 Use `defineApplication()` to define your application configuration:
 
 ```typescript
-// src/app/application.config.ts
+// src/application-config.ts
 import { defineApplication } from 'twenty-sdk';
-import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from './default-function.role';
+import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/roles/default-role';
 
 export default defineApplication({
   universalIdentifier: '4ec0391d-18d5-411c-b2f3-266ddc1c3ef7',
@@ -339,7 +310,7 @@ export default defineApplication({
       isSecret: false,
     },
   },
-  roleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
+  defaultRoleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
 });
 ```
 
@@ -347,11 +318,11 @@ Poznámky:
 
 * Pole `universalIdentifier` jsou deterministická ID, která vlastníte; vygenerujte je jednou a udržujte je stabilní napříč synchronizacemi.
 * `applicationVariables` se stanou proměnnými prostředí pro vaše funkce (například `DEFAULT_RECIPIENT_NAME` je dostupné jako `process.env.DEFAULT_RECIPIENT_NAME`).
-* `roleUniversalIdentifier` must match the role you define in your `*.role.ts` file (see below).
+* `defaultRoleUniversalIdentifier` se musí shodovat se souborem role (viz níže).
 
 #### Role a oprávnění
 
-Aplikace mohou definovat role, které zapouzdřují oprávnění k objektům a akcím ve vašem pracovním prostoru. The field `roleUniversalIdentifier` in `application.config.ts` designates the default role used by your app's logic functions.
+Aplikace mohou definovat role, které zapouzdřují oprávnění k objektům a akcím ve vašem pracovním prostoru. Pole `defaultRoleUniversalIdentifier` v `application-config.ts` určuje výchozí roli používanou logickými funkcemi vaší aplikace.
 
 * Běhový klíč API vložený jako `TWENTY_API_KEY` je odvozen z této výchozí role funkcí.
 * Typovaný klient bude omezen oprávněními udělenými této roli.
@@ -362,7 +333,7 @@ Aplikace mohou definovat role, které zapouzdřují oprávnění k objektům a a
 Když vygenerujete novou aplikaci, CLI také vytvoří výchozí soubor role. K definování rolí s vestavěnou validací použijte `defineRole()`:
 
 ```typescript
-// src/app/default-function.role.ts
+// src/roles/default-role.ts
 import { defineRole, PermissionFlag } from 'twenty-sdk';
 
 export const DEFAULT_ROLE_UNIVERSAL_IDENTIFIER =
@@ -401,10 +372,10 @@ export default defineRole({
 });
 ```
 
-Na `universalIdentifier` této role se poté odkazuje v `application.config.ts` jako na `roleUniversalIdentifier`. Jinými slovy:
+Na `universalIdentifier` této role se poté odkazuje v `application-config.ts` jako na `defaultRoleUniversalIdentifier`. Jinými slovy:
 
 * **\*.role.ts** definuje, co může výchozí role funkce dělat.
-* **application.config.ts** ukazuje na tuto roli, aby vaše funkce zdědily její oprávnění.
+* **application-config.ts** ukazuje na tuto roli, aby vaše funkce zdědily její oprávnění.
 
 Poznámky:
 
@@ -415,11 +386,11 @@ Poznámky:
 
 ### Konfigurace logických funkcí a vstupní bod
 
-Každý soubor funkce používá `defineFunction()` k exportu konfigurace s obslužnou funkcí (handlerem) a volitelnými spouštěči. Pro automatickou detekci použijte příponu souboru `*.function.ts`.
+Každý soubor funkce používá `defineLogicFunction()` k exportu konfigurace s obslužnou funkcí (handlerem) a volitelnými spouštěči.
 
 ```typescript
-// src/app/createPostCard.function.ts
-import { defineFunction } from 'twenty-sdk';
+// src/app/createPostCard.logic-function.ts
+import { defineLogicFunction } from 'twenty-sdk';
 import type { DatabaseEventPayload, ObjectRecordCreateEvent, CronPayload, RoutePayload } from 'twenty-sdk';
 import Twenty, { type Person } from '~/generated';
 
@@ -439,7 +410,7 @@ const handler = async (params: RoutePayload) => {
   return result;
 };
 
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'create-new-post-card',
   timeoutSeconds: 2,
@@ -515,7 +486,7 @@ Poznámky:
 Když spouštěč trasy vyvolá vaši logickou funkci, ta obdrží objekt `RoutePayload`, který odpovídá formátu AWS HTTP API v2. Importujte typ z `twenty-sdk`:
 
 ```typescript
-import { defineFunction, type RoutePayload } from 'twenty-sdk';
+import { defineLogicFunction, type RoutePayload } from 'twenty-sdk';
 
 const handler = async (event: RoutePayload) => {
   // Access request data
@@ -545,7 +516,7 @@ Typ `RoutePayload` má následující strukturu:
 Ve výchozím nastavení se záhlaví HTTP z příchozích požadavků z bezpečnostních důvodů do vaší logické funkce **ne** předávají. Chcete-li zpřístupnit konkrétní záhlaví, výslovně je uveďte v poli `forwardedRequestHeaders`:
 
 ```typescript
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'webhook-handler',
   handler,
@@ -580,8 +551,45 @@ const handler = async (event: RoutePayload) => {
 
 Nové funkce můžete vytvářet dvěma způsoby:
 
-* **Vygenerované**: Spusťte `yarn entity:add` a zvolte možnost přidat novou funkci. Tím se vygeneruje startovací soubor s obslužnou funkcí a konfigurací.
-* **Ruční**: Vytvořte nový soubor `*.function.ts` a použijte `defineFunction()` podle stejného vzoru.
+* **Vygenerované**: Spusťte `yarn entity:add` a zvolte možnost přidat novou logickou funkci. Tím se vygeneruje startovací soubor s obslužnou funkcí a konfigurací.
+* **Ruční**: Vytvořte nový soubor `*.logic-function.ts` a použijte `defineLogicFunction()` podle stejného vzoru.
+
+### Frontendové komponenty
+
+Frontendové komponenty vám umožňují vytvářet vlastní React komponenty, které se vykreslují v rozhraní Twenty. K definování komponent s vestavěnou validací použijte `defineFrontComponent()`:
+
+```typescript
+// src/my-widget.front-component.tsx
+import { defineFrontComponent } from 'twenty-sdk';
+
+const MyWidget = () => {
+  return (
+    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
+      <h1>My Custom Widget</h1>
+      <p>This is a custom front component for Twenty.</p>
+    </div>
+  );
+};
+
+export default defineFrontComponent({
+  universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  name: 'my-widget',
+  description: 'A custom widget component',
+  component: MyWidget,
+});
+```
+
+Hlavní body:
+
+* Frontendové komponenty jsou React komponenty, které se vykreslují v izolovaných kontextech v rámci Twenty.
+* Pro automatickou detekci použijte příponu souboru `*.front-component.tsx`.
+* Pole `component` odkazuje na vaši React komponentu.
+* Komponenty se během `yarn app:dev` automaticky sestaví a synchronizují.
+
+Nové frontendové komponenty můžete vytvořit dvěma způsoby:
+
+* **Vygenerované**: Spusťte `yarn entity:add` a zvolte možnost přidat novou frontendovou komponentu.
+* **Ruční**: Vytvořte nový soubor `*.front-component.tsx` a použijte `defineFrontComponent()`.
 
 ### Generovaný typovaný klient
 
@@ -606,12 +614,12 @@ Když vaše funkce běží na Twenty, platforma před spuštěním kódu vloží
 Poznámky:
 
 * Není nutné předávat URL ani klíč API vygenerovanému klientovi. Za běhu čte `TWENTY_API_URL` a `TWENTY_API_KEY` z process.env.
-* Oprávnění API klíče jsou určena rolí odkazovanou v `application.config.ts` prostřednictvím `roleUniversalIdentifier`. Toto je výchozí role používaná logickými funkcemi vaší aplikace.
-* Aplikace mohou definovat role podle principu nejmenších oprávnění. Udělte pouze oprávnění, která vaše funkce potřebují, a poté nastavte `roleUniversalIdentifier` na univerzální identifikátor této role.
+* Oprávnění klíče API jsou určena rolí odkazovanou ve vašem `application-config.ts` prostřednictvím `defaultRoleUniversalIdentifier`. Toto je výchozí role používaná logickými funkcemi vaší aplikace.
+* Aplikace mohou definovat role podle principu nejmenších oprávnění. Udělte pouze oprávnění, která vaše funkce potřebují, a poté nastavte `defaultRoleUniversalIdentifier` na univerzální identifikátor této role.
 
 ### Příklad Hello World
 
-Prozkoumejte minimalistický end-to-end příklad, který demonstruje objekty, funkce a více spouštěčů [zde](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
+Prozkoumejte minimalistický end-to-end příklad, který demonstruje objekty, logické funkce, frontendové komponenty a více spouštěčů [zde](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
 
 ## Ruční nastavení (bez scaffolderu)
 

packages/twenty-docs/l/de/developers/extend/capabilities/apps.mdx

@@ -17,10 +17,6 @@ Mit Apps können Sie Twenty-Anpassungen **als Code** erstellen und verwalten. An
 * Logikfunktionen mit benutzerdefinierten Triggern erstellen
 * Dieselbe App in mehreren Workspaces bereitstellen
 
-**Bald verfügbar:**
-
-* Benutzerdefinierte UI-Layouts und Komponenten
-
 ## Voraussetzungen
 
 * Node.js 24+ und Yarn 4
@@ -93,83 +89,56 @@ my-twenty-app/
   eslint.config.mjs
   tsconfig.json
   README.md
-  public/                           # Ordner für öffentliche Assets (Bilder, Schriftarten usw.)
+  public/                           # Public assets folder (images, fonts, etc.)
   src/
-    application.config.ts          # Erforderlich – Hauptkonfiguration der Anwendung
-    default-function.role.ts       # Standardrolle für serverlose Funktionen
-    hello-world.function.ts        # Beispiel für eine serverlose Funktion
-    hello-world.front-component.tsx # Beispiel für eine Frontend-Komponente
-    // Ihre Entitäten (*.object.ts, *.function.ts, *.front-component.tsx, *.role.ts)
-```
-
-### Konvention vor Konfiguration
-
-Anwendungen verwenden einen Ansatz **Konvention vor Konfiguration**, bei dem Entitäten anhand ihrer Dateiendung erkannt werden. Dies ermöglicht eine flexible Organisation im Ordner `src/app/`:
-
-| Dateiendung             | Entitätstyp                           |
-| ----------------------- | ------------------------------------- |
-| `*.object.ts`           | Benutzerdefinierte Objektdefinitionen |
-| `*.function.ts`         | Definitionen serverloser Funktionen   |
-| `*.front-component.tsx` | Definitionen von Frontend-Komponenten |
-| `*.role.ts`             | Rollendefinitionen                    |
-
-### Unterstützte Ordnerorganisationen
-
-Sie können Ihre Entitäten nach einem der folgenden Muster organisieren:
-
-**Traditionell (nach Typ):**
-
-```text
-src/
-├── application.config.ts
-├── objects/
-│   └── postCard.object.ts
-├── functions/
-│   └── createPostCard.function.ts
-├── components/
-│   └── card.front-component.tsx
-└── roles/
-    └── admin.role.ts
-```
-
-**Feature-basiert:**
-
-```text
-src/
-├── application.config.ts
-└── post-card/
-    ├── postCard.object.ts
-    ├── createPostCard.function.ts
-    ├── card.front-component.tsx
-    └── postCardAdmin.role.ts
-```
-
-**Flach:**
-
-```text
-src/
-├── application.config.ts
-├── postCard.object.ts
-├── createPostCard.function.ts
-├── card.front-component.tsx
-└── admin.role.ts
+  ├── application-config.ts           # Required - main application configuration
+  ├── roles/
+  │   └── default-role.ts               # Default role for logic functions
+  ├── logic-functions/
+  │   └── hello-world.ts                # Example logic function
+  └── front-components/
+      └── hello-world.tsx               # Example front component
 ```
 
 Auf hoher Ebene:
 
-* **package.json**: Deklariert den App-Namen, die Version, Engines (Node 24+, Yarn 4) und fügt `twenty-sdk` sowie Skripte wie `app:dev`, `app:generate`, `entity:add`, `function:logs`, `function:execute`, `app:uninstall` und `auth:login` hinzu, die an die lokale `twenty`-CLI delegieren.
+* **package.json**: Deklariert den App-Namen, die Version, Engines (Node 24+, Yarn 4) und fügt `twenty-sdk` sowie Skripte wie `app:dev`, `app:generate`, `entity:add`, `function:logs`, `function:execute`, `app:uninstall` sowie Authentifizierungsbefehle hinzu, die an die lokale `twenty`-CLI delegieren.
 * **.gitignore**: Ignoriert übliche Artefakte wie `node_modules`, `.yarn`, `generated/` (typisierter Client), `dist/`, `build/`, Coverage-Ordner, Logdateien und `.env*`-Dateien.
 * **yarn.lock**, **.yarnrc.yml**, **.yarn/**: Fixieren und konfigurieren die vom Projekt verwendete Yarn-4-Toolchain.
 * **.nvmrc**: Legt die vom Projekt erwartete Node.js-Version fest.
 * **eslint.config.mjs** und **tsconfig.json**: Stellen Linting und TypeScript-Konfiguration für die TypeScript-Quellen Ihrer App bereit.
 * **README.md**: Ein kurzes README im App-Root mit grundlegenden Anweisungen.
 * **public/**: Ein Ordner zum Speichern öffentlicher Assets (Bilder, Schriftarten, statische Dateien), die zusammen mit Ihrer Anwendung bereitgestellt werden. Hier abgelegte Dateien werden während der Synchronisierung hochgeladen und sind zur Laufzeit zugänglich.
-* **src/**: Der Hauptort, an dem Sie Ihre Anwendung als Code definieren:
-  * `application.config.ts`: Globale Konfiguration für Ihre App (Metadaten und Laufzeit-Anbindung). Siehe unten „Anwendungskonfiguration“.
-  * `*.role.ts`: Rollendefinitionen, die von Ihren Logikfunktionen verwendet werden. Siehe unten „Standard-Funktionsrolle“.
-  * `*.object.ts`: Benutzerdefinierte Objektdefinitionen.
-  * `*.function.ts`: Definitionen von Logikfunktionen.
-  * `*.front-component.tsx`: Front-Komponenten-Definitionen.
+* **src/**: Der Hauptort, an dem Sie Ihre Anwendung als Code definieren
+
+### Entitätserkennung
+
+Das SDK erkennt Entitäten, indem es Ihre TypeScript-Dateien nach Aufrufen von **`export default define<Entity>({...})`** parst. Für jeden Entitätstyp gibt es eine entsprechende Hilfsfunktion, die aus `twenty-sdk` exportiert wird:
+
+| Hilfsfunktion            | Entitätstyp                              |
+| ------------------------ | ---------------------------------------- |
+| `defineObject()`         | Benutzerdefinierte Objektdefinitionen    |
+| `defineLogicFunction()`  | Definitionen von Logikfunktionen         |
+| `defineFrontComponent()` | Definitionen von Frontend-Komponenten    |
+| `defineRole()`           | Rollendefinitionen                       |
+| `defineField()`          | Felderweiterungen für bestehende Objekte |
+
+<Note>
+  **Dateibenennung ist flexibel.** Die Entitätserkennung ist AST-basiert — das SDK durchsucht Ihre Quelldateien nach dem Muster `export default define<Entity>({...})`. Sie können Ihre Dateien und Ordner nach Belieben organisieren. Die Gruppierung nach Entitätstyp (z. B. `logic-functions/`, `roles/`) ist lediglich eine Konvention zur Codeorganisation, keine Voraussetzung.
+</Note>
+
+Beispiel für eine erkannte Entität:
+
+```typescript
+// This file can be named anything and placed anywhere in src/
+import { defineObject, FieldType } from 'twenty-sdk';
+
+export default defineObject({
+  universalIdentifier: '...',
+  nameSingular: 'postCard',
+  // ... rest of config
+});
+```
 
 Spätere Befehle fügen weitere Dateien und Ordner hinzu:
 
@@ -215,16 +184,18 @@ Das twenty-sdk stellt typisierte Bausteine und Hilfsfunktionen bereit, die Sie i
 
 ### Hilfsfunktionen
 
-Das SDK stellt vier Hilfsfunktionen mit eingebauter Validierung bereit, um Ihre App-Entitäten zu definieren:
+Das SDK stellt Hilfsfunktionen bereit, um die Entitäten Ihrer App zu definieren. Wie in [Entitätserkennung](#entity-detection) beschrieben, müssen Sie `export default define<Entity>({...})` verwenden, damit Ihre Entitäten erkannt werden:
 
-| Funktion              | Zweck                                                |
-| --------------------- | ---------------------------------------------------- |
-| `defineApplication()` | Anwendungsmetadaten konfigurieren                    |
-| `defineObject()`      | Benutzerdefinierte Objekte mit Feldern definieren    |
-| `defineFunction()`    | Logikfunktionen mit Handlern definieren              |
-| `defineRole()`        | Rollenberechtigungen und Objektzugriff konfigurieren |
+| Funktion                 | Zweck                                                          |
+| ------------------------ | -------------------------------------------------------------- |
+| `defineApplication()`    | Anwendungsmetadaten konfigurieren (erforderlich, eine pro App) |
+| `defineObject()`         | Benutzerdefinierte Objekte mit Feldern definieren              |
+| `defineLogicFunction()`  | Logikfunktionen mit Handlern definieren                        |
+| `defineFrontComponent()` | Frontend-Komponenten für benutzerdefinierte UI definieren      |
+| `defineRole()`           | Rollenberechtigungen und Objektzugriff konfigurieren           |
+| `defineField()`          | Bestehende Objekte mit zusätzlichen Feldern erweitern          |
 
-Diese Funktionen validieren Ihre Konfiguration zur Laufzeit und bieten bessere IDE-Autovervollständigung sowie Typsicherheit.
+Diese Funktionen validieren Ihre Konfiguration zur Build-Zeit und bieten IDE-Autovervollständigung sowie Typsicherheit.
 
 ### Objekte definieren
 
@@ -311,9 +282,9 @@ Hauptpunkte:
   **Basisfelder werden automatisch erstellt.** Wenn Sie ein benutzerdefiniertes Objekt definieren, fügt Twenty automatisch Standardfelder wie `name`, `createdAt`, `updatedAt`, `createdBy`, `position` und `deletedAt` hinzu. Sie müssen diese nicht in Ihrem `fields`-Array definieren — fügen Sie nur Ihre benutzerdefinierten Felder hinzu.
 </Note>
 
-### Anwendungskonfiguration (application.config.ts)
+### Anwendungskonfiguration (application-config.ts)
 
-Jede App hat eine einzelne Datei `application.config.ts`, die Folgendes beschreibt:
+Jede App hat eine einzelne Datei `application-config.ts`, die Folgendes beschreibt:
 
 * **Was die App ist**: Bezeichner, Anzeigename und Beschreibung.
 * **Wie ihre Funktionen ausgeführt werden**: welche Rolle sie für Berechtigungen verwenden.
@@ -322,9 +293,9 @@ Jede App hat eine einzelne Datei `application.config.ts`, die Folgendes beschrei
 Verwenden Sie `defineApplication()`, um Ihre Anwendungskonfiguration zu definieren:
 
 ```typescript
-// src/app/application.config.ts
+// src/application-config.ts
 import { defineApplication } from 'twenty-sdk';
-import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from './default-function.role';
+import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/roles/default-role';
 
 export default defineApplication({
   universalIdentifier: '4ec0391d-18d5-411c-b2f3-266ddc1c3ef7',
@@ -339,7 +310,7 @@ export default defineApplication({
       isSecret: false,
     },
   },
-  roleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
+  defaultRoleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
 });
 ```
 
@@ -347,11 +318,11 @@ Notizen:
 
 * `universalIdentifier`-Felder sind deterministische IDs, die Sie besitzen; generieren Sie sie einmal und halten Sie sie über Synchronisierungen hinweg stabil.
 * `applicationVariables` werden zu Umgebungsvariablen für Ihre Funktionen (zum Beispiel ist `DEFAULT_RECIPIENT_NAME` als `process.env.DEFAULT_RECIPIENT_NAME` verfügbar).
-* `roleUniversalIdentifier` muss mit der Rolle übereinstimmen, die Sie in Ihrer `*.role.ts`-Datei definieren (siehe unten).
+* `defaultRoleUniversalIdentifier` muss mit der Rollendatei übereinstimmen (siehe unten).
 
 #### Rollen und Berechtigungen
 
-Anwendungen können Rollen definieren, die Berechtigungen für die Objekte und Aktionen Ihres Workspaces kapseln. Das Feld `roleUniversalIdentifier` in `application.config.ts` legt die Standardrolle fest, die von den Logikfunktionen Ihrer App verwendet wird.
+Anwendungen können Rollen definieren, die Berechtigungen für die Objekte und Aktionen Ihres Workspaces kapseln. Das Feld `defaultRoleUniversalIdentifier` in `application-config.ts` legt die Standardrolle fest, die von den Logikfunktionen Ihrer App verwendet wird.
 
 * Der zur Laufzeit als `TWENTY_API_KEY` injizierte API-Schlüssel wird von dieser Standard-Funktionsrolle abgeleitet.
 * Der typisierte Client ist auf die dieser Rolle gewährten Berechtigungen beschränkt.
@@ -362,7 +333,7 @@ Anwendungen können Rollen definieren, die Berechtigungen für die Objekte und A
 Wenn Sie eine neue App erzeugen, erstellt die CLI auch eine Standard-Rolldatei. Verwenden Sie `defineRole()`, um Rollen mit eingebauter Validierung zu definieren:
 
 ```typescript
-// src/app/default-function.role.ts
+// src/roles/default-role.ts
 import { defineRole, PermissionFlag } from 'twenty-sdk';
 
 export const DEFAULT_ROLE_UNIVERSAL_IDENTIFIER =
@@ -401,10 +372,10 @@ export default defineRole({
 });
 ```
 
-Der `universalIdentifier` dieser Rolle wird anschließend in `application.config.ts` als `roleUniversalIdentifier` referenziert. Anders ausgedrückt:
+Der `universalIdentifier` dieser Rolle wird anschließend in `application-config.ts` als `defaultRoleUniversalIdentifier` referenziert. Anders ausgedrückt:
 
 * **\*.role.ts** definiert, was die Standard-Funktionsrolle darf.
-* **application.config.ts** verweist auf diese Rolle, sodass Ihre Funktionen deren Berechtigungen erben.
+* **application-config.ts** verweist auf diese Rolle, sodass Ihre Funktionen deren Berechtigungen erben.
 
 Notizen:
 
@@ -415,11 +386,11 @@ Notizen:
 
 ### Konfiguration von Logikfunktionen und Einstiegspunkt
 
-Jede Funktionsdatei verwendet `defineFunction()`, um eine Konfiguration mit einem Handler und optionalen Triggern zu exportieren. Verwenden Sie die Dateiendung `*.function.ts` für die automatische Erkennung.
+Jede Funktionsdatei verwendet `defineLogicFunction()`, um eine Konfiguration mit einem Handler und optionalen Triggern zu exportieren.
 
 ```typescript
-// src/app/createPostCard.function.ts
-import { defineFunction } from 'twenty-sdk';
+// src/app/createPostCard.logic-function.ts
+import { defineLogicFunction } from 'twenty-sdk';
 import type { DatabaseEventPayload, ObjectRecordCreateEvent, CronPayload, RoutePayload } from 'twenty-sdk';
 import Twenty, { type Person } from '~/generated';
 
@@ -439,7 +410,7 @@ const handler = async (params: RoutePayload) => {
   return result;
 };
 
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'create-new-post-card',
   timeoutSeconds: 2,
@@ -515,7 +486,7 @@ Notizen:
 Wenn ein Routen-Trigger Ihre Logikfunktion aufruft, erhält sie ein `RoutePayload`-Objekt, das dem AWS HTTP API v2-Format entspricht. Importieren Sie den Typ aus `twenty-sdk`:
 
 ```typescript
-import { defineFunction, type RoutePayload } from 'twenty-sdk';
+import { defineLogicFunction, type RoutePayload } from 'twenty-sdk';
 
 const handler = async (event: RoutePayload) => {
   // Access request data
@@ -545,7 +516,7 @@ Der Typ `RoutePayload` hat die folgende Struktur:
 Standardmäßig werden HTTP-Header von eingehenden Anfragen aus Sicherheitsgründen nicht an Ihre Logikfunktion weitergegeben. Um auf bestimmte Header zuzugreifen, listen Sie diese explizit im Array `forwardedRequestHeaders` auf:
 
 ```typescript
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'webhook-handler',
   handler,
@@ -580,8 +551,45 @@ const handler = async (event: RoutePayload) => {
 
 Sie können neue Funktionen auf zwei Arten erstellen:
 
-* **Generiert**: Führen Sie `yarn entity:add` aus und wählen Sie die Option zum Hinzufügen einer neuen Funktion. Dadurch wird eine Starterdatei mit Handler und Konfiguration erzeugt.
-* **Manuell**: Erstellen Sie eine neue `*.function.ts`-Datei und verwenden Sie `defineFunction()` nach demselben Muster.
+* **Generiert**: Führen Sie `yarn entity:add` aus und wählen Sie die Option zum Hinzufügen einer neuen Logikfunktion. Dadurch wird eine Starterdatei mit Handler und Konfiguration erzeugt.
+* **Manuell**: Erstellen Sie eine neue `*.logic-function.ts`-Datei und verwenden Sie `defineLogicFunction()` nach demselben Muster.
+
+### Frontend-Komponenten
+
+Frontend-Komponenten ermöglichen es Ihnen, benutzerdefinierte React-Komponenten zu erstellen, die innerhalb der Twenty-UI gerendert werden. Verwenden Sie `defineFrontComponent()`, um Komponenten mit eingebauter Validierung zu definieren:
+
+```typescript
+// src/my-widget.front-component.tsx
+import { defineFrontComponent } from 'twenty-sdk';
+
+const MyWidget = () => {
+  return (
+    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
+      <h1>My Custom Widget</h1>
+      <p>This is a custom front component for Twenty.</p>
+    </div>
+  );
+};
+
+export default defineFrontComponent({
+  universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  name: 'my-widget',
+  description: 'A custom widget component',
+  component: MyWidget,
+});
+```
+
+Hauptpunkte:
+
+* Frontend-Komponenten sind React-Komponenten, die in isolierten Kontexten innerhalb von Twenty gerendert werden.
+* Verwenden Sie die Dateiendung `*.front-component.tsx` für die automatische Erkennung.
+* Das Feld `component` verweist auf Ihre React-Komponente.
+* Komponenten werden während `yarn app:dev` automatisch gebaut und synchronisiert.
+
+Sie können neue Frontend-Komponenten auf zwei Arten erstellen:
+
+* **Generiert**: Führen Sie `yarn entity:add` aus und wählen Sie die Option zum Hinzufügen einer neuen Frontend-Komponente.
+* **Manuell**: Erstellen Sie eine neue `*.front-component.tsx`-Datei und verwenden Sie `defineFrontComponent()`.
 
 ### Generierter typisierter Client
 
@@ -606,12 +614,12 @@ Wenn Ihre Funktion auf Twenty läuft, injiziert die Plattform vor der Ausführun
 Notizen:
 
 * Sie müssen dem generierten Client weder URL noch API-Schlüssel übergeben. Er liest `TWENTY_API_URL` und `TWENTY_API_KEY` zur Laufzeit aus process.env.
-* Die Berechtigungen des API-Schlüssels werden durch die Rolle bestimmt, auf die in Ihrer `application.config.ts` über `roleUniversalIdentifier` verwiesen wird. Dies ist die Standardrolle, die von den Logikfunktionen Ihrer Anwendung verwendet wird.
-* Anwendungen können Rollen definieren, um das Least-Privilege-Prinzip einzuhalten. Gewähren Sie nur die Berechtigungen, die Ihre Funktionen benötigen, und verweisen Sie dann mit `roleUniversalIdentifier` auf den universellen Bezeichner dieser Rolle.
+* Die Berechtigungen des API-Schlüssels werden durch die Rolle bestimmt, auf die in Ihrer `application-config.ts` über `defaultRoleUniversalIdentifier` verwiesen wird. Dies ist die Standardrolle, die von den Logikfunktionen Ihrer Anwendung verwendet wird.
+* Anwendungen können Rollen definieren, um das Least-Privilege-Prinzip einzuhalten. Gewähren Sie nur die Berechtigungen, die Ihre Funktionen benötigen, und verweisen Sie dann mit `defaultRoleUniversalIdentifier` auf den universellen Bezeichner dieser Rolle.
 
 ### Hello-World-Beispiel
 
-Ein minimales End-to-End-Beispiel, das Objekte, Funktionen und mehrere Trigger demonstriert, finden Sie [hier](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
+Ein minimales End-to-End-Beispiel, das Objekte, Logikfunktionen, Frontend-Komponenten und mehrere Trigger demonstriert, finden Sie [hier](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
 
 ## Manuelle Einrichtung (ohne Scaffolder)
 

packages/twenty-docs/l/it/developers/extend/capabilities/apps.mdx

@@ -17,10 +17,6 @@ Le app ti consentono di creare e gestire le personalizzazioni di Twenty **come c
 * Crea funzioni logiche con trigger personalizzati
 * Distribuisci la stessa app su più spazi di lavoro
 
-**In arrivo:**
-
-* Layout e componenti UI personalizzati
-
 ## Prerequisiti
 
 * Node.js 24+ e Yarn 4
@@ -95,81 +91,54 @@ my-twenty-app/
   README.md
   public/                           # Cartella delle risorse pubbliche (immagini, font, ecc.)
   src/
-    application.config.ts          # Obbligatorio - configurazione principale dell'applicazione
-    default-function.role.ts       # Ruolo predefinito per le funzioni serverless
-    hello-world.function.ts        # Funzione serverless di esempio
-    hello-world.front-component.tsx # Componente front-end di esempio
-    // le tue entità (*.object.ts, *.function.ts, *.front-component.tsx, *.role.ts)
-```
-
-### Convenzioni invece della configurazione
-
-Le applicazioni usano un approccio basato sulle **convenzioni invece della configurazione** in cui le entità vengono rilevate in base al suffisso del file. Questo consente un'organizzazione flessibile all'interno della cartella `src/app/`:
-
-| Suffisso del file       | Tipo di entità                        |
-| ----------------------- | ------------------------------------- |
-| `*.object.ts`           | Definizioni di oggetti personalizzati |
-| `*.function.ts`         | Definizioni di funzioni serverless    |
-| `*.front-component.tsx` | Definizioni dei componenti front-end  |
-| `*.role.ts`             | Definizioni di ruoli                  |
-
-### Organizzazioni di cartelle supportate
-
-Puoi organizzare le tue entità in uno qualsiasi di questi modelli:
-
-**Tradizionale (per tipo):**
-
-```text
-src/
-├── application.config.ts
-├── objects/
-│   └── postCard.object.ts
-├── functions/
-│   └── createPostCard.function.ts
-├── components/
-│   └── card.front-component.tsx
-└── roles/
-    └── admin.role.ts
-```
-
-**Per funzionalità:**
-
-```text
-src/
-├── application.config.ts
-└── post-card/
-    ├── postCard.object.ts
-    ├── createPostCard.function.ts
-    ├── card.front-component.tsx
-    └── postCardAdmin.role.ts
-```
-
-**Struttura piatta:**
-
-```text
-src/
-├── application.config.ts
-├── postCard.object.ts
-├── createPostCard.function.ts
-├── card.front-component.tsx
-└── admin.role.ts
+  ├── application-config.ts           # Obbligatorio - configurazione principale dell'applicazione
+  ├── roles/
+  │   └── default-role.ts               # Ruolo predefinito per le funzioni logiche
+  ├── logic-functions/
+  │   └── hello-world.ts                # Funzione logica di esempio
+  └── front-components/
+      └── hello-world.tsx               # Componente front-end di esempio
 ```
 
 A livello generale:
 
-* **package.json**: Dichiara il nome dell'app, la versione, i motori (Node 24+, Yarn 4) e aggiunge `twenty-sdk`, oltre a script come `app:dev`, `app:generate`, `entity:add`, `function:logs`, `function:execute`, `app:uninstall` e `auth:login` che delegano alla CLI locale `twenty`.
+* **package.json**: Dichiara il nome dell'app, la versione, i motori (Node 24+, Yarn 4) e aggiunge `twenty-sdk`, oltre a script come `app:dev`, `app:generate`, `entity:add`, `function:logs`, `function:execute`, `app:uninstall` e comandi di autenticazione che delegano alla CLI locale `twenty`.
 * **.gitignore**: Ignora i file generati comuni come `node_modules`, `.yarn`, `generated/` (client tipizzato), `dist/`, `build/`, cartelle di coverage, file di log e file `.env*`.
 * **yarn.lock**, **.yarnrc.yml**, **.yarn/**: Bloccano e configurano la toolchain Yarn 4 utilizzata dal progetto.
 * **.nvmrc**: Fissa la versione di Node.js prevista dal progetto.
 * **eslint.config.mjs** e **tsconfig.json**: Forniscono linting e configurazione TypeScript per i sorgenti TypeScript della tua app.
 * **README.md**: Un breve README nella radice dell'app con istruzioni di base.
 * **public/**: Una cartella per archiviare risorse pubbliche (immagini, font, file statici) che saranno servite con la tua applicazione. I file collocati qui vengono caricati durante la sincronizzazione e sono accessibili in fase di esecuzione.
-* **src/**: Il luogo principale in cui definisci la tua applicazione come codice:
-  * `application.config.ts`: Configurazione globale della tua app (metadati e collegamenti di runtime). Vedi "Configurazione dell'applicazione" qui sotto.
-  * `*.role.ts`: Definizioni di ruoli usate dalle tue funzioni logiche. Vedi "Ruolo funzione predefinito" qui sotto.
-  * `*.object.ts`: Definizioni di oggetti personalizzati.
-  * `*.function.ts`: Definizioni di funzioni logiche.
-  * `*.front-component.tsx`: Definizioni di componenti front-end.
+* **src/**: Il luogo principale in cui definisci la tua applicazione come codice
+
+### Rilevamento delle entità
+
+L'SDK rileva le entità analizzando i tuoi file TypeScript alla ricerca di chiamate **`export default define<Entity>({...})`**. Ogni tipo di entità ha una corrispondente funzione helper esportata da `twenty-sdk`:
+
+| Funzione helper          | Tipo di entità                            |
+| ------------------------ | ----------------------------------------- |
+| `defineObject()`         | Definizioni di oggetti personalizzati     |
+| `defineLogicFunction()`  | Definizioni di funzioni logiche           |
+| `defineFrontComponent()` | Definizioni dei componenti front-end      |
+| `defineRole()`           | Definizioni di ruoli                      |
+| `defineField()`          | Estensioni di campo per oggetti esistenti |
+
+<Note>
+  **La denominazione dei file è flessibile.** Il rilevamento delle entità è basato sull'AST — l'SDK esegue la scansione dei file sorgente alla ricerca del pattern `export default define<Entity>({...})`. Puoi organizzare file e cartelle come preferisci. Raggruppare per tipo di entità (ad es., `logic-functions/`, `roles/`) è solo una convenzione per l'organizzazione del codice, non un requisito.
+</Note>
+
+Esempio di entità rilevata:
+
+```typescript
+// This file can be named anything and placed anywhere in src/
+import { defineObject, FieldType } from 'twenty-sdk';
+
+export default defineObject({
+  universalIdentifier: '...',
+  nameSingular: 'postCard',
+  // ... rest of config
+});
+```
 
 Comandi successivi aggiungeranno altri file e cartelle:
 
@@ -215,16 +184,18 @@ Il pacchetto twenty-sdk fornisce blocchi tipizzati e funzioni helper da usare ne
 
 ### Funzioni helper
 
-L'SDK fornisce quattro funzioni helper con convalida integrata per definire le entità della tua app:
+L'SDK fornisce funzioni helper per definire le entità della tua app. Come descritto in [Rilevamento delle entità](#entity-detection), devi usare `export default define<Entity>({...})` affinché le tue entità vengano rilevate:
 
-| Funzione              | Scopo                                                   |
-| --------------------- | ------------------------------------------------------- |
-| `defineApplication()` | Configura i metadati dell'applicazione                  |
-| `defineObject()`      | Definisci oggetti personalizzati con campi              |
-| `defineFunction()`    | Definisci funzioni logiche con handler                  |
-| `defineRole()`        | Configura i permessi dei ruoli e l'accesso agli oggetti |
+| Funzione                 | Scopo                                                                   |
+| ------------------------ | ----------------------------------------------------------------------- |
+| `defineApplication()`    | Configura i metadati dell'applicazione (obbligatorio, uno per app)      |
+| `defineObject()`         | Definisci oggetti personalizzati con campi                              |
+| `defineLogicFunction()`  | Definisci funzioni logiche con handler                                  |
+| `defineFrontComponent()` | Definisci componenti front-end per un'interfaccia utente personalizzata |
+| `defineRole()`           | Configura i permessi dei ruoli e l'accesso agli oggetti                 |
+| `defineField()`          | Estendi gli oggetti esistenti con campi aggiuntivi                      |
 
-Queste funzioni convalidano la configurazione a runtime e offrono un migliore completamento automatico nell'IDE e una maggiore sicurezza dei tipi.
+Queste funzioni convalidano la configurazione in fase di build e offrono il completamento automatico nell'IDE e la sicurezza dei tipi.
 
 ### Definizione degli oggetti
 
@@ -311,9 +282,9 @@ Punti chiave:
   **I campi base vengono creati automaticamente.** Quando definisci un oggetto personalizzato, Twenty aggiunge automaticamente i campi standard come `name`, `createdAt`, `updatedAt`, `createdBy`, `position` e `deletedAt`. Non è necessario definirli nel tuo array `fields` — aggiungi solo i tuoi campi personalizzati.
 </Note>
 
-### Configurazione dell'applicazione (application.config.ts)
+### Configurazione dell'applicazione (application-config.ts)
 
-Ogni app ha un singolo file `application.config.ts` che descrive:
+Ogni app ha un singolo file `application-config.ts` che descrive:
 
 * **Identità dell'app**: identificatori, nome visualizzato e descrizione.
 * **Come vengono eseguite le sue funzioni**: quale ruolo usano per i permessi.
@@ -322,9 +293,9 @@ Ogni app ha un singolo file `application.config.ts` che descrive:
 Usa `defineApplication()` per definire la configurazione della tua applicazione:
 
 ```typescript
-// src/app/application.config.ts
+// src/application-config.ts
 import { defineApplication } from 'twenty-sdk';
-import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from './default-function.role';
+import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/roles/default-role';
 
 export default defineApplication({
   universalIdentifier: '4ec0391d-18d5-411c-b2f3-266ddc1c3ef7',
@@ -339,7 +310,7 @@ export default defineApplication({
       isSecret: false,
     },
   },
-  roleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
+  defaultRoleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
 });
 ```
 
@@ -347,11 +318,11 @@ Note:
 
 * I campi `universalIdentifier` sono ID deterministici sotto il tuo controllo; generali una volta e mantienili stabili tra le sincronizzazioni.
 * `applicationVariables` diventano variabili d'ambiente per le tue funzioni (ad esempio, `DEFAULT_RECIPIENT_NAME` è disponibile come `process.env.DEFAULT_RECIPIENT_NAME`).
-* `roleUniversalIdentifier` deve corrispondere al ruolo che definisci nel tuo file `*.role.ts` (vedi sotto).
+* `defaultRoleUniversalIdentifier` deve corrispondere al file del ruolo (vedi sotto).
 
 #### Ruoli e permessi
 
-Le applicazioni possono definire ruoli che incapsulano i permessi sugli oggetti e sulle azioni del tuo spazio di lavoro. Il campo `roleUniversalIdentifier` in `application.config.ts` designa il ruolo predefinito utilizzato dalle funzioni logiche della tua app.
+Le applicazioni possono definire ruoli che incapsulano i permessi sugli oggetti e sulle azioni del tuo spazio di lavoro. Il campo `defaultRoleUniversalIdentifier` in `application-config.ts` indica il ruolo predefinito utilizzato dalle funzioni logiche della tua app.
 
 * La chiave API di runtime iniettata come `TWENTY_API_KEY` è derivata da questo ruolo funzione predefinito.
 * Il client tipizzato sarà limitato ai permessi concessi a quel ruolo.
@@ -362,7 +333,7 @@ Le applicazioni possono definire ruoli che incapsulano i permessi sugli oggetti
 Quando generi una nuova app con lo scaffolder, la CLI crea anche un file di ruolo predefinito. Usa `defineRole()` per definire ruoli con convalida integrata:
 
 ```typescript
-// src/app/default-function.role.ts
+// src/roles/default-role.ts
 import { defineRole, PermissionFlag } from 'twenty-sdk';
 
 export const DEFAULT_ROLE_UNIVERSAL_IDENTIFIER =
@@ -401,10 +372,10 @@ export default defineRole({
 });
 ```
 
-L'`universalIdentifier` di questo ruolo viene quindi referenziato in `application.config.ts` come `roleUniversalIdentifier`. In altre parole:
+L'`universalIdentifier` di questo ruolo viene quindi referenziato in `application-config.ts` come `defaultRoleUniversalIdentifier`. In altre parole:
 
 * **\*.role.ts** definisce ciò che il ruolo funzione predefinito può fare.
-* **application.config.ts** punta a quel ruolo in modo che le tue funzioni ne ereditino i permessi.
+* **application-config.ts** punta a quel ruolo in modo che le tue funzioni ne ereditino i permessi.
 
 Note:
 
@@ -415,11 +386,11 @@ Note:
 
 ### Configurazione e punto di ingresso della funzione logica
 
-Ogni file di funzione usa `defineFunction()` per esportare una configurazione con un handler e trigger opzionali. Usa il suffisso di file `*.function.ts` per il rilevamento automatico.
+Ogni file di funzione usa `defineLogicFunction()` per esportare una configurazione con un handler e trigger opzionali.
 
 ```typescript
-// src/app/createPostCard.function.ts
-import { defineFunction } from 'twenty-sdk';
+// src/app/createPostCard.logic-function.ts
+import { defineLogicFunction } from 'twenty-sdk';
 import type { DatabaseEventPayload, ObjectRecordCreateEvent, CronPayload, RoutePayload } from 'twenty-sdk';
 import Twenty, { type Person } from '~/generated';
 
@@ -439,7 +410,7 @@ const handler = async (params: RoutePayload) => {
   return result;
 };
 
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'create-new-post-card',
   timeoutSeconds: 2,
@@ -515,7 +486,7 @@ Note:
 Quando un trigger di route invoca la tua funzione logica, questa riceve un oggetto `RoutePayload` che segue il formato AWS HTTP API v2. Importa il tipo da `twenty-sdk`:
 
 ```typescript
-import { defineFunction, type RoutePayload } from 'twenty-sdk';
+import { defineLogicFunction, type RoutePayload } from 'twenty-sdk';
 
 const handler = async (event: RoutePayload) => {
   // Access request data
@@ -545,7 +516,7 @@ Il tipo `RoutePayload` ha la seguente struttura:
 Per impostazione predefinita, le intestazioni HTTP delle richieste in ingresso **non** vengono passate alla tua funzione logica per motivi di sicurezza. Per accedere a intestazioni specifiche, elencale esplicitamente nell'array `forwardedRequestHeaders`:
 
 ```typescript
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'webhook-handler',
   handler,
@@ -580,8 +551,45 @@ const handler = async (event: RoutePayload) => {
 
 Puoi creare nuove funzioni in due modi:
 
-* **Generata dallo scaffolder**: Esegui `yarn entity:add` e scegli l'opzione per aggiungere una nuova funzione. Questo genera un file iniziale con un handler e una configurazione.
-* **Manuale**: Crea un nuovo file `*.function.ts` e usa `defineFunction()`, seguendo lo stesso schema.
+* **Generata dallo scaffolder**: Esegui `yarn entity:add` e scegli l'opzione per aggiungere una nuova funzione logica. Questo genera un file iniziale con un handler e una configurazione.
+* **Manuale**: Crea un nuovo file `*.logic-function.ts` e usa `defineLogicFunction()`, seguendo lo stesso schema.
+
+### Componenti front-end
+
+I componenti front-end ti consentono di creare componenti React personalizzati che vengono renderizzati all'interno dell'interfaccia di Twenty. Usa `defineFrontComponent()` per definire componenti con convalida integrata:
+
+```typescript
+// src/my-widget.front-component.tsx
+import { defineFrontComponent } from 'twenty-sdk';
+
+const MyWidget = () => {
+  return (
+    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
+      <h1>My Custom Widget</h1>
+      <p>This is a custom front component for Twenty.</p>
+    </div>
+  );
+};
+
+export default defineFrontComponent({
+  universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  name: 'my-widget',
+  description: 'A custom widget component',
+  component: MyWidget,
+});
+```
+
+Punti chiave:
+
+* I componenti front-end sono componenti React che eseguono il rendering in contesti isolati all'interno di Twenty.
+* Usa il suffisso di file `*.front-component.tsx` per il rilevamento automatico.
+* Il campo `component` fa riferimento al tuo componente React.
+* I componenti vengono compilati e sincronizzati automaticamente durante `yarn app:dev`.
+
+Puoi creare nuovi componenti front-end in due modi:
+
+* **Generata dallo scaffolder**: Esegui `yarn entity:add` e scegli l'opzione per aggiungere un nuovo componente front-end.
+* **Manuale**: Crea un nuovo file `*.front-component.tsx` e usa `defineFrontComponent()`.
 
 ### Client tipizzato generato
 
@@ -606,12 +614,12 @@ Quando la tua funzione viene eseguita su Twenty, la piattaforma inietta le crede
 Note:
 
 * Non è necessario passare URL o chiave API al client generato. Legge `TWENTY_API_URL` e `TWENTY_API_KEY` da process.env in fase di esecuzione.
-* I permessi della chiave API sono determinati dal ruolo referenziato in `application.config.ts` tramite `roleUniversalIdentifier`. Questo è il ruolo predefinito utilizzato dalle funzioni logiche della tua applicazione.
-* Le applicazioni possono definire ruoli per seguire il principio del privilegio minimo. Concedi solo i permessi necessari alle tue funzioni, quindi punta `roleUniversalIdentifier` all'identificatore universale di quel ruolo.
+* I permessi della chiave API sono determinati dal ruolo referenziato nel tuo `application-config.ts` tramite `defaultRoleUniversalIdentifier`. Questo è il ruolo predefinito utilizzato dalle funzioni logiche della tua applicazione.
+* Le applicazioni possono definire ruoli per seguire il principio del privilegio minimo. Concedi solo i permessi necessari alle tue funzioni, quindi punta `defaultRoleUniversalIdentifier` all'identificatore universale di quel ruolo.
 
 ### Esempio Hello World
 
-Esplora un esempio minimale end‑to‑end che dimostra oggetti, funzioni e trigger multipli [qui](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
+Esplora un esempio minimale end-to-end che dimostra oggetti, funzioni logiche, componenti front-end e trigger multipli [qui](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
 
 ## Configurazione manuale (senza lo scaffolder)
 

packages/twenty-docs/l/pt/developers/extend/capabilities/apps.mdx

@@ -17,10 +17,6 @@ Os aplicativos permitem criar e gerenciar personalizações do Twenty **como có
 * Crie funções de lógica com gatilhos personalizados
 * Implemente o mesmo aplicativo em vários espaços de trabalho
 
-**Em breve:**
-
-* Layouts e componentes de UI personalizados
-
 ## Pré-requisitos
 
 * Node.js 24+ e Yarn 4
@@ -95,81 +91,54 @@ my-twenty-app/
   README.md
   public/                           # Pasta de recursos públicos (imagens, fontes, etc.)
   src/
-    application.config.ts          # Obrigatório - configuração principal da aplicação
-    default-function.role.ts       # Papel padrão para funções serverless
-    hello-world.function.ts        # Exemplo de função serverless
-    hello-world.front-component.tsx # Exemplo de componente de front-end
-    // suas entidades (*.object.ts, *.function.ts, *.front-component.tsx, *.role.ts)
-```
-
-### Convenção sobre configuração
-
-Os aplicativos usam uma abordagem de **convenção sobre configuração** em que as entidades são detectadas pelo sufixo do arquivo. Isso permite organização flexível dentro da pasta `src/app/`:
-
-| Sufixo de arquivo       | Tipo de entidade                       |
-| ----------------------- | -------------------------------------- |
-| `*.object.ts`           | Definições de objetos personalizados   |
-| `*.function.ts`         | Definições de funções serverless       |
-| `*.front-component.tsx` | Definições de componentes de front-end |
-| `*.role.ts`             | Definições de papéis                   |
-
-### Organizações de pastas suportadas
-
-Você pode organizar suas entidades em qualquer um destes padrões:
-
-**Tradicional (por tipo):**
-
-```text
-src/
-├── application.config.ts
-├── objects/
-│   └── postCard.object.ts
-├── functions/
-│   └── createPostCard.function.ts
-├── components/
-│   └── card.front-component.tsx
-└── roles/
-    └── admin.role.ts
-```
-
-**Baseada em funcionalidades:**
-
-```text
-src/
-├── application.config.ts
-└── post-card/
-    ├── postCard.object.ts
-    ├── createPostCard.function.ts
-    ├── card.front-component.tsx
-    └── postCardAdmin.role.ts
-```
-
-**Plana:**
-
-```text
-src/
-├── application.config.ts
-├── postCard.object.ts
-├── createPostCard.function.ts
-├── card.front-component.tsx
-└── admin.role.ts
+  ├── application-config.ts           # Obrigatório - configuração principal da aplicação
+  ├── roles/
+  │   └── default-role.ts               # Papel padrão para funções de lógica
+  ├── logic-functions/
+  │   └── hello-world.ts                # Exemplo de função de lógica
+  └── front-components/
+      └── hello-world.tsx               # Exemplo de componente de front-end
 ```
 
 Em alto nível:
 
-* **package.json**: Declara o nome do app, versão, engines (Node 24+, Yarn 4) e adiciona `twenty-sdk`, além de scripts como `app:dev`, `app:generate`, `entity:add`, `function:logs`, `function:execute`, `app:uninstall` e `auth:login` que delegam para a CLI local `twenty`.
+* **package.json**: Declara o nome do app, versão, engines (Node 24+, Yarn 4) e adiciona `twenty-sdk`, além de scripts como `app:dev`, `app:generate`, `entity:add`, `function:logs`, `function:execute`, `app:uninstall` e comandos de autenticação que delegam para a CLI local `twenty`.
 * **.gitignore**: Ignora artefatos comuns como `node_modules`, `.yarn`, `generated/` (cliente tipado), `dist/`, `build/`, pastas de cobertura, arquivos de log e arquivos `.env*`.
 * **yarn.lock**, **.yarnrc.yml**, **.yarn/**: Bloqueiam e configuram a ferramenta Yarn 4 usada pelo projeto.
 * **.nvmrc**: Fixa a versão do Node.js esperada pelo projeto.
 * **eslint.config.mjs** e **tsconfig.json**: Fornecem lint e configuração do TypeScript para os fontes TypeScript do seu aplicativo.
 * **README.md**: Um README curto na raiz do aplicativo com instruções básicas.
 * **public/**: Uma pasta para armazenar recursos públicos (imagens, fontes, arquivos estáticos) que serão servidos com sua aplicação. Os arquivos colocados aqui são enviados durante a sincronização e ficam acessíveis em tempo de execução.
-* **src/**: O local principal onde você define seu aplicativo como código:
-  * `application.config.ts`: Configuração global do seu aplicativo (metadados e conexões de execução). Veja "Configuração do aplicativo" abaixo.
-  * `*.role.ts`: Definições de papéis usadas pelas suas funções de lógica. Veja "Papel de função padrão" abaixo.
-  * `*.object.ts`: Definições de objetos personalizados.
-  * `*.function.ts`: Definições de funções de lógica.
-  * `*.front-component.tsx`: Definições de componentes de front-end.
+* **src/**: O local principal onde você define seu aplicativo como código
+
+### Detecção de entidades
+
+O SDK detecta entidades analisando seus arquivos TypeScript em busca de chamadas **`export default define<Entity>({...})`**. Cada tipo de entidade tem uma função utilitária correspondente exportada de `twenty-sdk`:
+
+| Função utilitária        | Tipo de entidade                            |
+| ------------------------ | ------------------------------------------- |
+| `defineObject()`         | Definições de objetos personalizados        |
+| `defineLogicFunction()`  | Definições de funções de lógica             |
+| `defineFrontComponent()` | Definições de componentes de front-end      |
+| `defineRole()`           | Definições de papéis                        |
+| `defineField()`          | Extensões de campos para objetos existentes |
+
+<Note>
+  **A nomeação de arquivos é flexível.** A detecção de entidades é baseada em AST — o SDK varre seus arquivos fonte em busca do padrão `export default define<Entity>({...})`. Você pode organizar seus arquivos e pastas como quiser. Agrupar por tipo de entidade (por exemplo, `logic-functions/`, `roles/`) é apenas uma convenção para organização do código, não um requisito.
+</Note>
+
+Exemplo de uma entidade detectada:
+
+```typescript
+// This file can be named anything and placed anywhere in src/
+import { defineObject, FieldType } from 'twenty-sdk';
+
+export default defineObject({
+  universalIdentifier: '...',
+  nameSingular: 'postCard',
+  // ... rest of config
+});
+```
 
 Comandos posteriores adicionarão mais arquivos e pastas:
 
@@ -215,16 +184,18 @@ O twenty-sdk fornece blocos de construção tipados e funções utilitárias que
 
 ### Funções utilitárias
 
-O SDK fornece quatro funções utilitárias com validação integrada para definir as entidades do seu aplicativo:
+O SDK fornece funções utilitárias para definir as entidades do seu app. Conforme descrito em [Detecção de entidades](#entity-detection), você deve usar `export default define<Entity>({...})` para que suas entidades sejam detectadas:
 
-| Função                | Finalidade                                        |
-| --------------------- | ------------------------------------------------- |
-| `defineApplication()` | Configura os metadados do aplicativo              |
-| `defineObject()`      | Define objetos personalizados com campos          |
-| `defineFunction()`    | Defina funções de lógica com handlers             |
-| `defineRole()`        | Configura permissões de papéis e acesso a objetos |
+| Função                   | Finalidade                                                   |
+| ------------------------ | ------------------------------------------------------------ |
+| `defineApplication()`    | Configurar metadados do aplicativo (obrigatório, um por app) |
+| `defineObject()`         | Define objetos personalizados com campos                     |
+| `defineLogicFunction()`  | Defina funções de lógica com handlers                        |
+| `defineFrontComponent()` | Definir componentes de front-end para UI personalizada       |
+| `defineRole()`           | Configura permissões de papéis e acesso a objetos            |
+| `defineField()`          | Estender objetos existentes com campos adicionais            |
 
-Essas funções validam sua configuração em tempo de execução e oferecem melhor autocompletar na IDE e segurança de tipos.
+Essas funções validam sua configuração em tempo de compilação e oferecem autocompletar na IDE e segurança de tipos.
 
 ### Definindo objetos
 
@@ -311,9 +282,9 @@ Pontos-chave:
   **Os campos base são criados automaticamente.** Quando você define um objeto personalizado, o Twenty adiciona automaticamente campos padrão como `name`, `createdAt`, `updatedAt`, `createdBy`, `position` e `deletedAt`. Você não precisa definir esses no seu array `fields` — adicione apenas seus campos personalizados.
 </Note>
 
-### Configuração do aplicativo (application.config.ts)
+### Configuração do aplicativo (application-config.ts)
 
-Todo aplicativo tem um único arquivo `application.config.ts` que descreve:
+Todo aplicativo tem um único arquivo `application-config.ts` que descreve:
 
 * **O que é o aplicativo**: identificadores, nome de exibição e descrição.
 * **Como suas funções são executadas**: qual papel usam para permissões.
@@ -322,9 +293,9 @@ Todo aplicativo tem um único arquivo `application.config.ts` que descreve:
 Use `defineApplication()` to define your application configuration:
 
 ```typescript
-// src/app/application.config.ts
+// src/application-config.ts
 import { defineApplication } from 'twenty-sdk';
-import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from './default-function.role';
+import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/roles/default-role';
 
 export default defineApplication({
   universalIdentifier: '4ec0391d-18d5-411c-b2f3-266ddc1c3ef7',
@@ -339,7 +310,7 @@ export default defineApplication({
       isSecret: false,
     },
   },
-  roleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
+  defaultRoleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
 });
 ```
 
@@ -347,11 +318,11 @@ Notas:
 
 * `universalIdentifier` são IDs determinísticos que você controla; gere-os uma vez e mantenha-os estáveis entre sincronizações.
 * `applicationVariables` tornam-se variáveis de ambiente para suas funções (por exemplo, `DEFAULT_RECIPIENT_NAME` fica disponível como `process.env.DEFAULT_RECIPIENT_NAME`).
-* `roleUniversalIdentifier` must match the role you define in your `*.role.ts` file (see below).
+* `defaultRoleUniversalIdentifier` deve corresponder ao arquivo do papel (veja abaixo).
 
 #### Papéis e permissões
 
-Os aplicativos podem definir papéis que encapsulam permissões sobre os objetos e ações do seu espaço de trabalho. The field `roleUniversalIdentifier` in `application.config.ts` designates the default role used by your app's logic functions.
+Os aplicativos podem definir papéis que encapsulam permissões sobre os objetos e ações do seu espaço de trabalho. O campo `defaultRoleUniversalIdentifier` em `application-config.ts` designa o papel padrão usado pelas funções de lógica do seu app.
 
 * A chave de API em tempo de execução, injetada como `TWENTY_API_KEY`, é derivada desse papel padrão de função.
 * O cliente tipado ficará restrito às permissões concedidas a esse papel.
@@ -362,7 +333,7 @@ Os aplicativos podem definir papéis que encapsulam permissões sobre os objetos
 Ao criar um novo aplicativo com o scaffold, a CLI também cria um arquivo de papel padrão. Use `defineRole()` para definir papéis com validação integrada:
 
 ```typescript
-// src/app/default-function.role.ts
+// src/roles/default-role.ts
 import { defineRole, PermissionFlag } from 'twenty-sdk';
 
 export const DEFAULT_ROLE_UNIVERSAL_IDENTIFIER =
@@ -401,10 +372,10 @@ export default defineRole({
 });
 ```
 
-O `universalIdentifier` desse papel é então referenciado em `application.config.ts` como `roleUniversalIdentifier`. Em outras palavras:
+O `universalIdentifier` desse papel é então referenciado em `application-config.ts` como `defaultRoleUniversalIdentifier`. Em outras palavras:
 
 * **\*.role.ts** define o que o papel de função padrão pode fazer.
-* **application.config.ts** aponta para esse papel para que suas funções herdem suas permissões.
+* **application-config.ts** aponta para esse papel para que suas funções herdem suas permissões.
 
 Notas:
 
@@ -415,11 +386,11 @@ Notas:
 
 ### Configuração de função de lógica e ponto de entrada
 
-Cada arquivo de função usa `defineFunction()` para exportar uma configuração com um handler e gatilhos opcionais. Use o sufixo de arquivo `*.function.ts` para detecção automática.
+Cada arquivo de função usa `defineLogicFunction()` para exportar uma configuração com um handler e gatilhos opcionais.
 
 ```typescript
-// src/app/createPostCard.function.ts
-import { defineFunction } from 'twenty-sdk';
+// src/app/createPostCard.logic-function.ts
+import { defineLogicFunction } from 'twenty-sdk';
 import type { DatabaseEventPayload, ObjectRecordCreateEvent, CronPayload, RoutePayload } from 'twenty-sdk';
 import Twenty, { type Person } from '~/generated';
 
@@ -439,7 +410,7 @@ const handler = async (params: RoutePayload) => {
   return result;
 };
 
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'create-new-post-card',
   timeoutSeconds: 2,
@@ -515,7 +486,7 @@ Notas:
 Quando um gatilho de rota invoca sua função de lógica, ela recebe um objeto `RoutePayload` que segue o formato do AWS HTTP API v2. Importe o tipo de `twenty-sdk`:
 
 ```typescript
-import { defineFunction, type RoutePayload } from 'twenty-sdk';
+import { defineLogicFunction, type RoutePayload } from 'twenty-sdk';
 
 const handler = async (event: RoutePayload) => {
   // Access request data
@@ -545,7 +516,7 @@ O tipo `RoutePayload` tem a seguinte estrutura:
 Por padrão, os cabeçalhos HTTP das requisições recebidas **não** são repassados para sua função de lógica por motivos de segurança. Para acessar cabeçalhos específicos, liste-os explicitamente no array `forwardedRequestHeaders`:
 
 ```typescript
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'webhook-handler',
   handler,
@@ -580,8 +551,45 @@ const handler = async (event: RoutePayload) => {
 
 Você pode criar novas funções de duas formas:
 
-* **Gerado automaticamente**: Execute `yarn entity:add` e escolha a opção para adicionar uma nova função. Isso gera um arquivo inicial com um handler e configuração.
-* **Manual**: Crie um novo arquivo `*.function.ts` e use `defineFunction()`, seguindo o mesmo padrão.
+* **Gerado automaticamente**: Execute `yarn entity:add` e escolha a opção para adicionar uma nova função de lógica. Isso gera um arquivo inicial com um handler e configuração.
+* **Manual**: Crie um novo arquivo `*.logic-function.ts` e use `defineLogicFunction()`, seguindo o mesmo padrão.
+
+### Componentes de front-end
+
+Componentes de front-end permitem criar componentes React personalizados que são renderizados na UI do Twenty. Use `defineFrontComponent()` para definir componentes com validação integrada:
+
+```typescript
+// src/my-widget.front-component.tsx
+import { defineFrontComponent } from 'twenty-sdk';
+
+const MyWidget = () => {
+  return (
+    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
+      <h1>My Custom Widget</h1>
+      <p>This is a custom front component for Twenty.</p>
+    </div>
+  );
+};
+
+export default defineFrontComponent({
+  universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  name: 'my-widget',
+  description: 'A custom widget component',
+  component: MyWidget,
+});
+```
+
+Pontos-chave:
+
+* Componentes de front-end são componentes React que renderizam em contextos isolados dentro do Twenty.
+* Use o sufixo de arquivo `*.front-component.tsx` para detecção automática.
+* O campo `component` faz referência ao seu componente React.
+* Os componentes são compilados e sincronizados automaticamente durante `yarn app:dev`.
+
+Você pode criar novos componentes de front-end de duas formas:
+
+* **Gerado automaticamente**: Execute `yarn entity:add` e escolha a opção para adicionar um novo componente de front-end.
+* **Manual**: Crie um novo arquivo `*.front-component.tsx` e use `defineFrontComponent()`.
 
 ### Cliente tipado gerado
 
@@ -606,12 +614,12 @@ Quando sua função é executada no Twenty, a plataforma injeta credenciais como
 Notas:
 
 * Você não precisa passar a URL ou a chave de API para o cliente gerado. Ele lê `TWENTY_API_URL` e `TWENTY_API_KEY` de process.env em tempo de execução.
-* As permissões da chave de API são determinadas pelo papel referenciado no seu `application.config.ts` via `roleUniversalIdentifier`. Este é o papel padrão usado pelas funções de lógica do seu app.
-* Os aplicativos podem definir papéis para seguir o princípio do menor privilégio. Conceda apenas as permissões de que suas funções precisam e, em seguida, aponte `roleUniversalIdentifier` para o identificador universal desse papel.
+* As permissões da chave de API são determinadas pelo papel referenciado no seu `application-config.ts` via `defaultRoleUniversalIdentifier`. Este é o papel padrão usado pelas funções de lógica do seu app.
+* Os aplicativos podem definir papéis para seguir o princípio do menor privilégio. Conceda apenas as permissões de que suas funções precisam e, em seguida, aponte `defaultRoleUniversalIdentifier` para o identificador universal desse papel.
 
 ### Exemplo Hello World
 
-Explore um exemplo mínimo de ponta a ponta que demonstra objetos, funções e vários gatilhos [aqui](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
+Explore um exemplo mínimo de ponta a ponta que demonstra objetos, funções de lógica, componentes de front-end e vários gatilhos [aqui](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
 
 ## Configuração manual (sem o gerador)
 

packages/twenty-docs/l/ro/developers/extend/capabilities/apps.mdx

@@ -17,10 +17,6 @@ Aplicațiile vă permit să construiți și să gestionați personalizările Twe
 * Creați funcții de logică cu declanșatoare personalizate
 * Implementați aceeași aplicație în mai multe spații de lucru
 
-**În curând:**
-
-* Dispuneri și componente UI personalizate
-
 ## Cerințe
 
 * Node.js 24+ și Yarn 4
@@ -93,83 +89,56 @@ my-twenty-app/
   eslint.config.mjs
   tsconfig.json
   README.md
-  public/                           # Director pentru resurse publice (imagini, fonturi etc.)
+  public/                           # Public assets folder (images, fonts, etc.)
   src/
-    application.config.ts          # Obligatoriu - configurația principală a aplicației
-    default-function.role.ts       # Rolul implicit pentru funcțiile serverless
-    hello-world.function.ts        # Exemplu de funcție serverless
-    hello-world.front-component.tsx # Exemplu de componentă de interfață
-    // entitățile tale (*.object.ts, *.function.ts, *.front-component.tsx, *.role.ts)
-```
-
-### Convenție în locul configurării
-
-Aplicațiile folosesc o abordare bazată pe convenție în locul configurării, în care entitățile sunt detectate după sufixul fișierului. Aceasta permite o organizare flexibilă în folderul `src/app/`:
-
-| Sufixul fișierului      | Tipul entității                          |
-| ----------------------- | ---------------------------------------- |
-| `*.object.ts`           | Definiții de obiecte personalizate       |
-| `*.function.ts`         | Definiții de funcții serverless          |
-| `*.front-component.tsx` | Definiții ale componentelor de interfață |
-| `*.role.ts`             | Definiții de rol                         |
-
-### Structuri de foldere acceptate
-
-Vă puteți organiza entitățile în oricare dintre aceste modele:
-
-**Tradițional (după tip):**
-
-```text
-src/
-├── application.config.ts
-├── objects/
-│   └── postCard.object.ts
-├── functions/
-│   └── createPostCard.function.ts
-├── components/
-│   └── card.front-component.tsx
-└── roles/
-    └── admin.role.ts
-```
-
-**Bazat pe funcționalități:**
-
-```text
-src/
-├── application.config.ts
-└── post-card/
-    ├── postCard.object.ts
-    ├── createPostCard.function.ts
-    ├── card.front-component.tsx
-    └── postCardAdmin.role.ts
-```
-
-**Plat:**
-
-```text
-src/
-├── application.config.ts
-├── postCard.object.ts
-├── createPostCard.function.ts
-├── card.front-component.tsx
-└── admin.role.ts
+  ├── application-config.ts           # Required - main application configuration
+  ├── roles/
+  │   └── default-role.ts               # Default role for logic functions
+  ├── logic-functions/
+  │   └── hello-world.ts                # Example logic function
+  └── front-components/
+      └── hello-world.tsx               # Example front component
 ```
 
 Pe scurt:
 
-* **package.json**: Declară numele aplicației, versiunea, motoarele (Node 24+, Yarn 4) și adaugă `twenty-sdk` plus scripturi precum `app:dev`, `app:generate`, `entity:add`, `function:logs`, `function:execute`, `app:uninstall` și `auth:login` care deleagă către CLI-ul local `twenty`.
+* **package.json**: Declară numele aplicației, versiunea, motoarele (Node 24+, Yarn 4) și adaugă `twenty-sdk` plus scripturi precum `app:dev`, `app:generate`, `entity:add`, `function:logs`, `function:execute`, `app:uninstall`, precum și comenzi de autentificare care deleagă către CLI-ul local `twenty`.
 * **.gitignore**: Ignoră artefacte comune precum `node_modules`, `.yarn`, `generated/` (client tipizat), `dist/`, `build/`, foldere de coverage, fișiere jurnal și fișiere `.env*`.
 * **yarn.lock**, **.yarnrc.yml**, **.yarn/**: Blochează și configurează lanțul de instrumente Yarn 4 folosit de proiect.
 * **.nvmrc**: Fixează versiunea Node.js așteptată de proiect.
 * **eslint.config.mjs** și **tsconfig.json**: Oferă linting și configurație TypeScript pentru fișierele TypeScript ale aplicației.
 * **README.md**: Un README scurt în rădăcina aplicației, cu instrucțiuni de bază.
 * **public/**: Un folder pentru stocarea resurselor publice (imagini, fonturi, fișiere statice) care vor fi servite împreună cu aplicația ta. Fișierele plasate aici sunt încărcate în timpul sincronizării și sunt accesibile la rulare.
-* **src/**: Locul principal unde vă definiți aplicația sub formă de cod:
-  * `application.config.ts`: Configurație globală pentru aplicație (metadate și conectare la runtime). Vezi "Configurația aplicației" mai jos.
-  * `*.role.ts`: Definiții de rol folosite de funcțiile dvs. de logică. Vezi "Rol implicit pentru funcții" mai jos.
-  * `*.object.ts`: Definiții de obiecte personalizate.
-  * `*.function.ts`: Definiții de funcții de logică.
-  * `*.front-component.tsx`: Definiții de componente front-end.
+* **src/**: Locul principal unde vă definiți aplicația sub formă de cod
+
+### Detectarea entităților
+
+SDK-ul detectează entitățile analizând fișierele TypeScript pentru apeluri **`export default define<Entity>({...})`**. Fiecare tip de entitate are o funcție ajutătoare corespunzătoare, exportată din `twenty-sdk`:
+
+| Funcție ajutătoare       | Tipul entității                             |
+| ------------------------ | ------------------------------------------- |
+| `defineObject()`         | Definiții de obiecte personalizate          |
+| `defineLogicFunction()`  | Definiții de funcții de logică              |
+| `defineFrontComponent()` | Definiții ale componentelor de interfață    |
+| `defineRole()`           | Definiții de rol                            |
+| `defineField()`          | Extensii de câmp pentru obiectele existente |
+
+<Note>
+  **Denumirea fișierelor este flexibilă.** Detectarea entităților se bazează pe AST — SDK-ul scanează fișierele sursă pentru tiparul `export default define<Entity>({...})`. Puteți organiza fișierele și folderele cum doriți. Gruparea după tipul de entitate (de exemplu, `logic-functions/`, `roles/`) este doar o convenție pentru organizarea codului, nu o cerință.
+</Note>
+
+Exemplu de entitate detectată:
+
+```typescript
+// This file can be named anything and placed anywhere in src/
+import { defineObject, FieldType } from 'twenty-sdk';
+
+export default defineObject({
+  universalIdentifier: '...',
+  nameSingular: 'postCard',
+  // ... rest of config
+});
+```
 
 Comenzile ulterioare vor adăuga mai multe fișiere și foldere:
 
@@ -215,16 +184,18 @@ Biblioteca twenty-sdk oferă blocuri de bază tipizate și funcții ajutătoare
 
 ### Funcții ajutătoare
 
-SDK-ul oferă patru funcții ajutătoare cu validare încorporată pentru definirea entităților aplicației:
+SDK-ul oferă funcții ajutătoare pentru definirea entităților aplicației. După cum este descris în [Detectarea entităților](#entity-detection), trebuie să folosiți `export default define<Entity>({...})` pentru ca entitățile să fie detectate:
 
-| Funcție               | Scop                                                     |
-| --------------------- | -------------------------------------------------------- |
-| `defineApplication()` | Configurați metadatele aplicației                        |
-| `defineObject()`      | Definiți obiecte personalizate cu câmpuri                |
-| `defineFunction()`    | Definiți funcții de logică cu handleri                   |
-| `defineRole()`        | Configurați permisiunile rolurilor și accesul la obiecte |
+| Funcție                  | Scop                                                                   |
+| ------------------------ | ---------------------------------------------------------------------- |
+| `defineApplication()`    | Configurați metadatele aplicației (obligatoriu, una per aplicație)     |
+| `defineObject()`         | Definiți obiecte personalizate cu câmpuri                              |
+| `defineLogicFunction()`  | Definiți funcții de logică cu handleri                                 |
+| `defineFrontComponent()` | Definiți componente Front pentru interfața de utilizator personalizată |
+| `defineRole()`           | Configurați permisiunile rolurilor și accesul la obiecte               |
+| `defineField()`          | Extindeți obiectele existente cu câmpuri suplimentare                  |
 
-Aceste funcții validează configurația în timpul execuției și oferă o completare automată mai bună în IDE și siguranța tipurilor.
+Aceste funcții validează configurația în timpul build-ului și oferă completare automată în IDE și siguranța tipurilor.
 
 ### Definirea obiectelor
 
@@ -311,9 +282,9 @@ Puncte cheie:
   **Câmpurile de bază sunt create automat.** Când definiți un obiect personalizat, Twenty adaugă automat câmpuri standard precum `name`, `createdAt`, `updatedAt`, `createdBy`, `position` și `deletedAt`. Nu trebuie să le definiți în tabloul `fields` — adăugați doar câmpurile personalizate proprii.
 </Note>
 
-### Configurația aplicației (application.config.ts)
+### Configurația aplicației (application-config.ts)
 
-Fiecare aplicație are un singur fișier `application.config.ts` care descrie:
+Fiecare aplicație are un singur fișier `application-config.ts` care descrie:
 
 * **Cine este aplicația**: identificatori, nume de afișare și descriere.
 * **Cum rulează funcțiile**: ce rol folosesc pentru permisiuni.
@@ -322,9 +293,9 @@ Fiecare aplicație are un singur fișier `application.config.ts` care descrie:
 Folosiți `defineApplication()` pentru a defini configurația aplicației:
 
 ```typescript
-// src/app/application.config.ts
+// src/application-config.ts
 import { defineApplication } from 'twenty-sdk';
-import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from './default-function.role';
+import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/roles/default-role';
 
 export default defineApplication({
   universalIdentifier: '4ec0391d-18d5-411c-b2f3-266ddc1c3ef7',
@@ -339,7 +310,7 @@ export default defineApplication({
       isSecret: false,
     },
   },
-  roleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
+  defaultRoleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
 });
 ```
 
@@ -347,11 +318,11 @@ Notițe:
 
 * Câmpurile `universalIdentifier` sunt ID-uri deterministe pe care le dețineți; generați-le o singură dată și păstrați-le stabile între sincronizări.
 * `applicationVariables` devin variabile de mediu pentru funcțiile dvs. (de exemplu, `DEFAULT_RECIPIENT_NAME` este disponibil ca `process.env.DEFAULT_RECIPIENT_NAME`).
-* `roleUniversalIdentifier` trebuie să corespundă rolului pe care îl definiți în fișierul `*.role.ts` (vedeți mai jos).
+* `defaultRoleUniversalIdentifier` trebuie să corespundă fișierului de rol (vedeți mai jos).
 
 #### Roluri și permisiuni
 
-Aplicațiile pot defini roluri care încapsulează permisiuni asupra obiectelor și acțiunilor din spațiul dvs. de lucru. Câmpul `roleUniversalIdentifier` din `application.config.ts` desemnează rolul implicit folosit de funcțiile de logică ale aplicației.
+Aplicațiile pot defini roluri care încapsulează permisiuni asupra obiectelor și acțiunilor din spațiul dvs. de lucru. Câmpul `defaultRoleUniversalIdentifier` din `application-config.ts` desemnează rolul implicit utilizat de funcțiile de logică ale aplicației.
 
 * Cheia API de runtime injectată ca `TWENTY_API_KEY` este derivată din acest rol implicit pentru funcții.
 * Clientul tipizat va fi restricționat la permisiunile acordate acelui rol.
@@ -362,7 +333,7 @@ Aplicațiile pot defini roluri care încapsulează permisiuni asupra obiectelor
 Când generați o aplicație nouă, CLI creează și un fișier de rol implicit. Folosiți `defineRole()` pentru a defini roluri cu validare încorporată:
 
 ```typescript
-// src/app/default-function.role.ts
+// src/roles/default-role.ts
 import { defineRole, PermissionFlag } from 'twenty-sdk';
 
 export const DEFAULT_ROLE_UNIVERSAL_IDENTIFIER =
@@ -401,10 +372,10 @@ export default defineRole({
 });
 ```
 
-`universalIdentifier` al acestui rol este apoi referențiat în `application.config.ts` ca `roleUniversalIdentifier`. Cu alte cuvinte:
+`universalIdentifier` al acestui rol este apoi referențiat în `application-config.ts` ca `defaultRoleUniversalIdentifier`. Cu alte cuvinte:
 
 * **\*.role.ts** definește ce poate face rolul implicit pentru funcții.
-* **application.config.ts** indică acel rol, astfel încât funcțiile moștenesc permisiunile lui.
+* **application-config.ts** indică acel rol, astfel încât funcțiile moștenesc permisiunile lui.
 
 Notițe:
 
@@ -415,11 +386,11 @@ Notițe:
 
 ### Configurația funcției de logică și punctul de intrare
 
-Fiecare fișier de funcție folosește `defineFunction()` pentru a exporta o configurație cu un handler și declanșatoare opționale. Folosiți sufixul de fișier `*.function.ts` pentru detectare automată.
+Fiecare fișier de funcție folosește `defineLogicFunction()` pentru a exporta o configurație cu un handler și declanșatoare opționale.
 
 ```typescript
-// src/app/createPostCard.function.ts
-import { defineFunction } from 'twenty-sdk';
+// src/app/createPostCard.logic-function.ts
+import { defineLogicFunction } from 'twenty-sdk';
 import type { DatabaseEventPayload, ObjectRecordCreateEvent, CronPayload, RoutePayload } from 'twenty-sdk';
 import Twenty, { type Person } from '~/generated';
 
@@ -439,7 +410,7 @@ const handler = async (params: RoutePayload) => {
   return result;
 };
 
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'create-new-post-card',
   timeoutSeconds: 2,
@@ -515,7 +486,7 @@ Notițe:
 Când un declanșator de rută apelează funcția dvs. de logică, aceasta primește un obiect `RoutePayload` care urmează formatul AWS HTTP API v2. Importă tipul din `twenty-sdk`:
 
 ```typescript
-import { defineFunction, type RoutePayload } from 'twenty-sdk';
+import { defineLogicFunction, type RoutePayload } from 'twenty-sdk';
 
 const handler = async (event: RoutePayload) => {
   // Access request data
@@ -545,7 +516,7 @@ Tipul `RoutePayload` are următoarea structură:
 În mod implicit, anteturile HTTP din cererile de intrare **nu** sunt transmise funcției dvs. de logică din motive de securitate. Pentru a accesa anumite anteturi, listează-le explicit în array-ul `forwardedRequestHeaders`:
 
 ```typescript
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'webhook-handler',
   handler,
@@ -580,8 +551,45 @@ const handler = async (event: RoutePayload) => {
 
 Puteți crea funcții noi în două moduri:
 
-* **Generat**: Rulați `yarn entity:add` și alegeți opțiunea de a adăuga o funcție nouă. Aceasta generează un fișier inițial cu un handler și o configurație.
-* **Manual**: Creați un fișier nou `*.function.ts` și folosiți `defineFunction()`, urmând același model.
+* **Generat**: Rulați `yarn entity:add` și alegeți opțiunea de a adăuga o funcție de logică nouă. Aceasta generează un fișier inițial cu un handler și o configurație.
+* **Manual**: Creați un fișier nou `*.logic-function.ts` și folosiți `defineLogicFunction()`, urmând același model.
+
+### Componente Front
+
+Componentele Front vă permit să construiți componente React personalizate care sunt randate în interfața Twenty. Utilizați `defineFrontComponent()` pentru a defini componente cu validare încorporată:
+
+```typescript
+// src/my-widget.front-component.tsx
+import { defineFrontComponent } from 'twenty-sdk';
+
+const MyWidget = () => {
+  return (
+    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
+      <h1>My Custom Widget</h1>
+      <p>This is a custom front component for Twenty.</p>
+    </div>
+  );
+};
+
+export default defineFrontComponent({
+  universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  name: 'my-widget',
+  description: 'A custom widget component',
+  component: MyWidget,
+});
+```
+
+Puncte cheie:
+
+* Componentele Front sunt componente React care sunt randate în contexte izolate în cadrul Twenty.
+* Folosiți sufixul de fișier `*.front-component.tsx` pentru detectare automată.
+* Câmpul `component` face referire la componenta React.
+* Componentele sunt construite și sincronizate automat în timpul `yarn app:dev`.
+
+Puteți crea componente Front noi în două moduri:
+
+* **Generat**: Rulați `yarn entity:add` și alegeți opțiunea de a adăuga o componentă Front nouă.
+* **Manual**: Creați un fișier nou `*.front-component.tsx` și folosiți `defineFrontComponent()`.
 
 ### Client tipizat generat
 
@@ -606,12 +614,12 @@ Când funcția rulează pe Twenty, platforma injectează acreditări ca variabil
 Notițe:
 
 * Nu trebuie să transmiteți URL-ul sau cheia API către clientul generat. Acesta citește `TWENTY_API_URL` și `TWENTY_API_KEY` din process.env la runtime.
-* Permisiunile cheii API sunt determinate de rolul referențiat în `application.config.ts` prin `roleUniversalIdentifier`. Acesta este rolul implicit folosit de funcțiile de logică ale aplicației.
-* Aplicațiile pot defini roluri pentru a urma principiul celui mai mic privilegiu. Acordați doar permisiunile de care au nevoie funcțiile, apoi setați `roleUniversalIdentifier` la identificatorul universal al acelui rol.
+* Permisiunile cheii API sunt determinate de rolul referențiat în `application-config.ts` prin `defaultRoleUniversalIdentifier`. Acesta este rolul implicit folosit de funcțiile de logică ale aplicației.
+* Aplicațiile pot defini roluri pentru a urma principiul celui mai mic privilegiu. Acordați doar permisiunile de care au nevoie funcțiile, apoi setați `defaultRoleUniversalIdentifier` la identificatorul universal al acelui rol.
 
 ### Exemplu Hello World
 
-Explorați un exemplu minim, cap‑la‑cap, care demonstrează obiecte, funcții și declanșatoare multiple [aici](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
+Explorați un exemplu minim, cap la cap, care demonstrează obiecte, funcții de logică, componente Front și declanșatoare multiple [aici](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
 
 ## Configurare manuală (fără generator)
 

packages/twenty-docs/l/ru/developers/extend/capabilities/apps.mdx

@@ -17,10 +17,6 @@ description: Создавайте и управляйте настройками
 * Создавайте логические функции с пользовательскими триггерами
 * Развёртывайте одно и то же приложение в нескольких рабочих пространствах
 
-**Скоро:**
-
-* Пользовательские макеты и компоненты интерфейса
-
 ## Требования
 
 * Node.js 24+ и Yarn 4
@@ -95,81 +91,54 @@ my-twenty-app/
   README.md
   public/                           # Папка общедоступных ресурсов (изображения, шрифты и т. п.)
   src/
-    application.config.ts          # Обязательный — основная конфигурация приложения
-    default-function.role.ts       # Роль по умолчанию для бессерверных функций
-    hello-world.function.ts        # Пример бессерверной функции
-    hello-world.front-component.tsx # Пример фронтенд-компонента
-    // ваши сущности (*.object.ts, *.function.ts, *.front-component.tsx, *.role.ts)
-```
-
-### Соглашения важнее конфигурации
-
-Приложения используют подход **соглашения важнее конфигурации**, при котором сущности определяются по суффиксу файла. Это позволяет гибко организовать структуру в папке `src/app/`:
-
-| Суффикс файла           | Тип сущности                          |
-| ----------------------- | ------------------------------------- |
-| `*.object.ts`           | Определения пользовательских объектов |
-| `*.function.ts`         | Определения бессерверных функций      |
-| `*.front-component.tsx` | Определения компонентов фронтенда     |
-| `*.role.ts`             | Определения ролей                     |
-
-### Поддерживаемые способы организации папок
-
-Вы можете организовать свои сущности по любому из этих шаблонов:
-
-**Традиционный (по типам):**
-
-```text
-src/
-├── application.config.ts
-├── objects/
-│   └── postCard.object.ts
-├── functions/
-│   └── createPostCard.function.ts
-├── components/
-│   └── card.front-component.tsx
-└── roles/
-    └── admin.role.ts
-```
-
-**По функциональности:**
-
-```text
-src/
-├── application.config.ts
-└── post-card/
-    ├── postCard.object.ts
-    ├── createPostCard.function.ts
-    ├── card.front-component.tsx
-    └── postCardAdmin.role.ts
-```
-
-**Плоский:**
-
-```text
-src/
-├── application.config.ts
-├── postCard.object.ts
-├── createPostCard.function.ts
-├── card.front-component.tsx
-└── admin.role.ts
+  ├── application-config.ts           # Обязательный — основная конфигурация приложения
+  ├── roles/
+  │   └── default-role.ts               # Роль по умолчанию для логических функций
+  ├── logic-functions/
+  │   └── hello-world.ts                # Пример логической функции
+  └── front-components/
+      └── hello-world.tsx               # Пример фронтенд-компонента
 ```
 
 В общих чертах:
 
-* **package.json**: Объявляет имя приложения, версию, движки (Node 24+, Yarn 4) и добавляет `twenty-sdk`, а также скрипты вроде `app:dev`, `app:generate`, `entity:add`, `function:logs`, `function:execute`, `app:uninstall` и `auth:login`, которые делегируют выполнение локальному CLI `twenty`.
+* **package.json**: Объявляет имя приложения, версию, движки (Node 24+, Yarn 4) и добавляет `twenty-sdk`, а также скрипты вроде `app:dev`, `app:generate`, `entity:add`, `function:logs`, `function:execute`, `app:uninstall` и команды аутентификации, которые делегируют выполнение локальному CLI `twenty`.
 * **.gitignore**: Игнорирует распространённые артефакты, такие как `node_modules`, `.yarn`, `generated/` (типизированный клиент), `dist/`, `build/`, каталоги coverage, файлы журналов и файлы `.env*`.
 * **yarn.lock**, **.yarnrc.yml**, **.yarn/**: Фиксируют и настраивают используемый в проекте инструментарий Yarn 4.
 * **.nvmrc**: Фиксирует версию Node.js, ожидаемую проектом.
 * **eslint.config.mjs** и **tsconfig.json**: Обеспечивают линтинг и конфигурацию TypeScript для исходников вашего приложения на TypeScript.
 * **README.md**: Короткий README в корне приложения с базовыми инструкциями.
 * **public/**: Папка для хранения общедоступных ресурсов (изображений, шрифтов, статических файлов), которые будут отдаваться вашим приложением. Файлы, размещённые здесь, загружаются во время синхронизации и доступны во время выполнения.
-* **src/**: Основное место, где вы определяете приложение как код:
-  * `application.config.ts`: Глобальная конфигурация вашего приложения (метаданные и параметры выполнения). См. раздел «Конфигурация приложения» ниже.
-  * `*.role.ts`: Определения ролей, используемых вашими логическими функциями. См. раздел «Роль функции по умолчанию» ниже.
-  * `*.object.ts`: Определения пользовательских объектов.
-  * `*.function.ts`: Определения логических функций.
-  * `*.front-component.tsx`: Определения фронтенд-компонентов.
+* **src/**: Основное место, где вы определяете приложение как код
+
+### Обнаружение сущностей
+
+SDK обнаруживает сущности, разбирая ваши файлы TypeScript в поисках вызовов **`export default define<Entity>({...})`**. Для каждого типа сущности существует соответствующая вспомогательная функция, экспортируемая из `twenty-sdk`:
+
+| Вспомогательная функция  | Тип сущности                               |
+| ------------------------ | ------------------------------------------ |
+| `defineObject()`         | Определения пользовательских объектов      |
+| `defineLogicFunction()`  | Определения логических функций             |
+| `defineFrontComponent()` | Определения компонентов фронтенда          |
+| `defineRole()`           | Определения ролей                          |
+| `defineField()`          | Расширения полей для существующих объектов |
+
+<Note>
+  **Имена файлов заданы гибко.** Обнаружение сущностей основано на AST — SDK сканирует ваши исходные файлы в поисках шаблона `export default define<Entity>({...})`. Вы можете организовывать файлы и папки как угодно. Группировка по типу сущности (например, `logic-functions/`, `roles/`) — это лишь соглашение для организации кода, а не требование.
+</Note>
+
+Пример обнаруженной сущности:
+
+```typescript
+// This file can be named anything and placed anywhere in src/
+import { defineObject, FieldType } from 'twenty-sdk';
+
+export default defineObject({
+  universalIdentifier: '...',
+  nameSingular: 'postCard',
+  // ... rest of config
+});
+```
 
 Позднее команды добавят больше файлов и папок:
 
@@ -215,16 +184,18 @@ yarn auth:status
 
 ### Вспомогательные функции
 
-SDK предоставляет четыре вспомогательных функции с встроенной валидацией для определения сущностей вашего приложения:
+SDK предоставляет вспомогательные функции для определения сущностей вашего приложения. Как описано в [Обнаружение сущностей](#entity-detection), вы должны использовать `export default define<Entity>({...})`, чтобы ваши сущности были обнаружены:
 
-| Функция               | Назначение                                     |
-| --------------------- | ---------------------------------------------- |
-| `defineApplication()` | Настраивает метаданные приложения              |
-| `defineObject()`      | Определяет пользовательские объекты с полями   |
-| `defineFunction()`    | Определение логических функций с обработчиками |
-| `defineRole()`        | Настраивает права роли и доступ к объектам     |
+| Функция                  | Назначение                                                             |
+| ------------------------ | ---------------------------------------------------------------------- |
+| `defineApplication()`    | Настройка метаданных приложения (обязательно, по одному на приложение) |
+| `defineObject()`         | Определяет пользовательские объекты с полями                           |
+| `defineLogicFunction()`  | Определение логических функций с обработчиками                         |
+| `defineFrontComponent()` | Определение фронт-компонентов для настраиваемого интерфейса            |
+| `defineRole()`           | Настраивает права роли и доступ к объектам                             |
+| `defineField()`          | Расширение существующих объектов дополнительными полями                |
 
-Эти функции проверяют вашу конфигурацию во время выполнения и обеспечивают лучшую автодополняемость в IDE и безопасность типов.
+Эти функции проверяют вашу конфигурацию на этапе сборки и обеспечивают автодополнение в IDE и безопасность типов.
 
 ### Определение объектов
 
@@ -311,9 +282,9 @@ export default defineObject({
   **Базовые поля создаются автоматически.** Когда вы определяете пользовательский объект, Twenty автоматически добавляет стандартные поля, такие как `name`, `createdAt`, `updatedAt`, `createdBy`, `position` и `deletedAt`. Вам не нужно определять их в массиве `fields` — добавляйте только свои пользовательские поля.
 </Note>
 
-### Конфигурация приложения (application.config.ts)
+### Конфигурация приложения (application-config.ts)
 
-У каждого приложения есть единственный файл `application.config.ts`, который описывает:
+У каждого приложения есть единственный файл `application-config.ts`, который описывает:
 
 * **Что это за приложение**: идентификаторы, отображаемое имя и описание.
 * **Как запускаются его функции**: какую роль они используют для прав доступа.
@@ -322,9 +293,9 @@ export default defineObject({
 Используйте `defineApplication()` для определения конфигурации вашего приложения:
 
 ```typescript
-// src/app/application.config.ts
+// src/application-config.ts
 import { defineApplication } from 'twenty-sdk';
-import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from './default-function.role';
+import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/roles/default-role';
 
 export default defineApplication({
   universalIdentifier: '4ec0391d-18d5-411c-b2f3-266ddc1c3ef7',
@@ -339,7 +310,7 @@ export default defineApplication({
       isSecret: false,
     },
   },
-  roleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
+  defaultRoleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
 });
 ```
 
@@ -347,11 +318,11 @@ export default defineApplication({
 
 * `universalIdentifier` — это детерминированные идентификаторы, которыми вы управляете; сгенерируйте их один раз и сохраняйте стабильными между синхронизациями.
 * `applicationVariables` становятся переменными окружения для ваших функций (например, `DEFAULT_RECIPIENT_NAME` доступна как `process.env.DEFAULT_RECIPIENT_NAME`).
-* `roleUniversalIdentifier` должен соответствовать роли, которую вы определяете в файле `*.role.ts` (см. ниже).
+* `defaultRoleUniversalIdentifier` должен соответствовать файлу роли (см. ниже).
 
 #### Роли и разрешения
 
-Приложения могут определять роли, инкапсулирующие права на объекты и действия в вашем рабочем пространстве. Поле `roleUniversalIdentifier` в `application.config.ts` обозначает роль по умолчанию, используемую логическими функциями вашего приложения.
+Приложения могут определять роли, инкапсулирующие права на объекты и действия в вашем рабочем пространстве. Поле `defaultRoleUniversalIdentifier` в `application-config.ts` обозначает роль по умолчанию, используемую логическими функциями вашего приложения.
 
 * Ключ API во время выполнения, подставляемый как `TWENTY_API_KEY`, получается из этой роли функции по умолчанию.
 * Типизированный клиент будет ограничен правами, предоставленными этой ролью.
@@ -362,7 +333,7 @@ export default defineApplication({
 Когда вы генерируете новое приложение, CLI также создаёт файл роли по умолчанию. Используйте `defineRole()` для определения ролей со встроенной валидацией:
 
 ```typescript
-// src/app/default-function.role.ts
+// src/roles/default-role.ts
 import { defineRole, PermissionFlag } from 'twenty-sdk';
 
 export const DEFAULT_ROLE_UNIVERSAL_IDENTIFIER =
@@ -401,10 +372,10 @@ export default defineRole({
 });
 ```
 
-`universalIdentifier` этой роли затем указывается в `application.config.ts` как `roleUniversalIdentifier`. Иными словами:
+Значение `universalIdentifier` этой роли затем указывается в `application-config.ts` как `defaultRoleUniversalIdentifier`. Иными словами:
 
 * **\*.role.ts** определяет, что может делать роль функции по умолчанию.
-* **application.config.ts** указывает на эту роль, чтобы ваши функции наследовали её права.
+* **application-config.ts** указывает на эту роль, чтобы ваши функции наследовали её права.
 
 Заметки:
 
@@ -415,11 +386,11 @@ export default defineRole({
 
 ### Конфигурация логической функции и точка входа
 
-Каждый файл функции использует `defineFunction()` для экспорта конфигурации с обработчиком и необязательными триггерами. Используйте суффикс файла `*.function.ts` для автоматического обнаружения.
+Каждый файл функции использует `defineLogicFunction()` для экспорта конфигурации с обработчиком и необязательными триггерами.
 
 ```typescript
-// src/app/createPostCard.function.ts
-import { defineFunction } from 'twenty-sdk';
+// src/app/createPostCard.logic-function.ts
+import { defineLogicFunction } from 'twenty-sdk';
 import type { DatabaseEventPayload, ObjectRecordCreateEvent, CronPayload, RoutePayload } from 'twenty-sdk';
 import Twenty, { type Person } from '~/generated';
 
@@ -439,7 +410,7 @@ const handler = async (params: RoutePayload) => {
   return result;
 };
 
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'create-new-post-card',
   timeoutSeconds: 2,
@@ -515,7 +486,7 @@ export default defineFunction({
 Когда триггер маршрута вызывает вашу логическую функцию, она получает объект `RoutePayload`, соответствующий формату AWS HTTP API v2. Импортируйте тип из `twenty-sdk`:
 
 ```typescript
-import { defineFunction, type RoutePayload } from 'twenty-sdk';
+import { defineLogicFunction, type RoutePayload } from 'twenty-sdk';
 
 const handler = async (event: RoutePayload) => {
   // Access request data
@@ -545,7 +516,7 @@ const handler = async (event: RoutePayload) => {
 По умолчанию HTTP-заголовки из входящих запросов **не** передаются в вашу логическую функцию по соображениям безопасности. Чтобы получить доступ к определённым заголовкам, явно перечислите их в массиве `forwardedRequestHeaders`:
 
 ```typescript
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'webhook-handler',
   handler,
@@ -580,8 +551,45 @@ const handler = async (event: RoutePayload) => {
 
 Вы можете создать новые функции двумя способами:
 
-* **Сгенерировано**: Запустите `yarn entity:add` и выберите опцию добавления новой функции. Это создаёт стартовый файл с обработчиком и конфигурацией.
-* **Вручную**: Создайте новый файл `*.function.ts` и используйте `defineFunction()`, следуя тому же шаблону.
+* **Сгенерировано**: Запустите `yarn entity:add` и выберите опцию добавления новой логической функции. Это создаёт стартовый файл с обработчиком и конфигурацией.
+* **Вручную**: Создайте новый файл `*.logic-function.ts` и используйте `defineLogicFunction()`, следуя тому же шаблону.
+
+### Фронт-компоненты
+
+Фронт-компоненты позволяют создавать пользовательские компоненты React, которые рендерятся внутри интерфейса Twenty. Используйте `defineFrontComponent()` для определения компонентов со встроенной валидацией:
+
+```typescript
+// src/my-widget.front-component.tsx
+import { defineFrontComponent } from 'twenty-sdk';
+
+const MyWidget = () => {
+  return (
+    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
+      <h1>My Custom Widget</h1>
+      <p>This is a custom front component for Twenty.</p>
+    </div>
+  );
+};
+
+export default defineFrontComponent({
+  universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  name: 'my-widget',
+  description: 'A custom widget component',
+  component: MyWidget,
+});
+```
+
+Основные моменты:
+
+* Фронт-компоненты — это компоненты React, которые рендерятся в изолированных контекстах внутри Twenty.
+* Используйте суффикс файла `*.front-component.tsx` для автоматического обнаружения.
+* Поле `component` ссылается на ваш компонент React.
+* Компоненты автоматически собираются и синхронизируются во время `yarn app:dev`.
+
+Вы можете создать новые фронт-компоненты двумя способами:
+
+* **Сгенерировано**: Запустите `yarn entity:add` и выберите опцию добавления нового фронт-компонента.
+* **Вручную**: Создайте новый файл `*.front-component.tsx` и используйте `defineFrontComponent()`.
 
 ### Сгенерированный типизированный клиент
 
@@ -606,12 +614,12 @@ const { me } = await client.query({ me: { id: true, displayName: true } });
 Заметки:
 
 * Вам не нужно передавать URL или ключ API сгенерированному клиенту. Он читает `TWENTY_API_URL` и `TWENTY_API_KEY` из process.env во время выполнения.
-* Права ключа API определяются ролью, на которую ссылается ваш `application.config.ts` через `roleUniversalIdentifier`. Это роль по умолчанию, используемая логическими функциями вашего приложения.
-* Приложения могут определять роли, чтобы следовать принципу наименьших привилегий. Выдавайте только те права, которые нужны вашим функциям, затем укажите в `roleUniversalIdentifier` универсальный идентификатор этой роли.
+* Права ключа API определяются ролью, на которую ссылается ваш `application-config.ts` через `defaultRoleUniversalIdentifier`. Это роль по умолчанию, используемая логическими функциями вашего приложения.
+* Приложения могут определять роли, чтобы следовать принципу наименьших привилегий. Предоставляйте только те права, которые нужны вашим функциям, затем укажите в `defaultRoleUniversalIdentifier` универсальный идентификатор этой роли.
 
 ### Пример Hello World
 
-Посмотрите минимальный сквозной пример, демонстрирующий объекты, функции и несколько триггеров, [здесь](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
+Ознакомьтесь с минимальным сквозным примером, демонстрирующим объекты, логические функции, фронт-компоненты и несколько триггеров, [здесь](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
 
 ## Ручная настройка (без генератора)
 

packages/twenty-docs/l/tr/developers/extend/capabilities/apps.mdx

@@ -17,10 +17,6 @@ Uygulamalar, Twenty özelleştirmelerini **kod olarak** oluşturup yönetmenizi
 * Özel tetikleyicilerle mantık fonksiyonları oluşturun
 * Aynı uygulamayı birden çok çalışma alanına dağıtın
 
-**Yakında:**
-
-* Özel UI düzenleri ve bileşenleri
-
 ## Ön Gereksinimler
 
 * Node.js 24+ ve Yarn 4
@@ -95,81 +91,54 @@ my-twenty-app/
   README.md
   public/                           # Genel varlıklar klasörü (görseller, yazı tipleri vb.)
   src/
-    application.config.ts          # Gerekli - ana uygulama yapılandırması
-    default-function.role.ts       # Sunucusuz işlevler için varsayılan rol
-    hello-world.function.ts        # Örnek sunucusuz işlev
-    hello-world.front-component.tsx # Örnek ön uç bileşeni
-    // varlıklarınız (*.object.ts, *.function.ts, *.front-component.tsx, *.role.ts)
-```
-
-### Sözleşme-öncelikli yapılandırma
-
-Uygulamalar, varlıkların dosya sonekiyle algılandığı **sözleşme-öncelikli yapılandırma** yaklaşımını kullanır. Bu, `src/app/` klasörü içinde esnek bir düzenlemeye olanak tanır:
-
-| Dosya soneki            | Varlık türü                   |
-| ----------------------- | ----------------------------- |
-| `*.object.ts`           | Özel nesne tanımları          |
-| `*.function.ts`         | Sunucusuz fonksiyon tanımları |
-| `*.front-component.tsx` | Front component definitions   |
-| `*.role.ts`             | Rol tanımları                 |
-
-### Desteklenen klasör düzenleri
-
-Varlıklarınızı şu desenlerden herhangi birine göre düzenleyebilirsiniz:
-
-**Geleneksel (türe göre):**
-
-```text
-src/
-├── application.config.ts
-├── objects/
-│   └── postCard.object.ts
-├── functions/
-│   └── createPostCard.function.ts
-├── components/
-│   └── card.front-component.tsx
-└── roles/
-    └── admin.role.ts
-```
-
-**Özelliğe dayalı:**
-
-```text
-src/
-├── application.config.ts
-└── post-card/
-    ├── postCard.object.ts
-    ├── createPostCard.function.ts
-    ├── card.front-component.tsx
-    └── postCardAdmin.role.ts
-```
-
-**Düz:**
-
-```text
-src/
-├── application.config.ts
-├── postCard.object.ts
-├── createPostCard.function.ts
-├── card.front-component.tsx
-└── admin.role.ts
+  ├── application-config.ts           # Gerekli - ana uygulama yapılandırması
+  ├── roles/
+  │   └── default-role.ts               # Mantık işlevleri için varsayılan rol
+  ├── logic-functions/
+  │   └── hello-world.ts                # Örnek mantık işlevi
+  └── front-components/
+      └── hello-world.tsx               # Örnek ön uç bileşeni
 ```
 
 Genel hatlarıyla:
 
-* **package.json**: Uygulama adını, sürümünü, motorları (Node 24+, Yarn 4) bildirir ve yerel `twenty` CLI’sine yetki devreden `app:dev`, `app:generate`, `entity:add`, `function:logs`, `function:execute`, `app:uninstall` ve `auth:login` gibi betiklerin yanı sıra `twenty-sdk` ekler.
+* **package.json**: Uygulama adını, sürümünü, motorları (Node 24+, Yarn 4) bildirir ve `twenty-sdk` ile `app:dev`, `app:generate`, `entity:add`, `function:logs`, `function:execute`, `app:uninstall` gibi betikleri ve yerel `twenty` CLI’sine yetki devreden kimlik doğrulama komutlarını ekler.
 * **.gitignore**: `node_modules`, `.yarn`, `generated/` (türlendirilmiş istemci), `dist/`, `build/`, kapsam klasörleri, günlük dosyaları ve `.env*` dosyaları gibi yaygın artifaktları yok sayar.
 * **yarn.lock**, **.yarnrc.yml**, **.yarn/**: Proje tarafından kullanılan Yarn 4 araç zincirini kilitler ve yapılandırır.
 * **.nvmrc**: Projenin beklediği Node.js sürümünü sabitler.
 * **eslint.config.mjs** ve **tsconfig.json**: Uygulamanızın TypeScript kaynakları için linting ve TypeScript yapılandırması sağlar.
 * **README.md**: Uygulama kökünde temel talimatların yer aldığı kısa bir README.
 * **public/**: Uygulamanızla birlikte sunulacak genel varlıkları (görseller, yazı tipleri, statik dosyalar) depolamak için bir klasör. Buraya yerleştirilen dosyalar senkronizasyon sırasında yüklenir ve çalışma zamanında erişilebilir olur.
-* **src/**: Uygulamanızı kod olarak tanımladığınız ana yer:
-  * `application.config.ts`: Uygulamanız için genel yapılandırma (meta veriler ve çalışma zamanı bağlantıları). Aşağıda "Uygulama yapılandırması"na bakın.
-  * `*.role.ts`: Mantık fonksiyonlarınız tarafından kullanılan rol tanımları. Aşağıda "Varsayılan fonksiyon rolü"ne bakın.
-  * `*.object.ts`: Özel nesne tanımları.
-  * `*.function.ts`: Mantık fonksiyon tanımları.
-  * `*.front-component.tsx`: Ön bileşen tanımları.
+* **src/**: Uygulamanızı kod olarak tanımladığınız ana yer
+
+### Varlık algılama
+
+SDK, TypeScript dosyalarınızı **`export default define<Entity>({...})`** çağrılarını arayarak ayrıştırıp varlıkları algılar. Her varlık türünün, `twenty-sdk` tarafından dışa aktarılan karşılık gelen bir yardımcı fonksiyonu vardır:
+
+| Yardımcı fonksiyon       | Varlık türü                              |
+| ------------------------ | ---------------------------------------- |
+| `defineObject()`         | Özel nesne tanımları                     |
+| `defineLogicFunction()`  | Mantık fonksiyon tanımları               |
+| `defineFrontComponent()` | Front component definitions              |
+| `defineRole()`           | Rol tanımları                            |
+| `defineField()`          | Mevcut nesneler için alan genişletmeleri |
+
+<Note>
+  **Dosya adlandırma esnektir.** Varlık algılama AST tabanlıdır — SDK, kaynak dosyalarınızı `export default define<Entity>({...})` desenini bulmak için tarar. Dosyalarınızı ve klasörlerinizi dilediğiniz gibi düzenleyebilirsiniz. Varlık türüne göre gruplama (örn. `logic-functions/`, `roles/`) bir gereklilik değil, yalnızca kod organizasyonu için bir gelenektir.
+</Note>
+
+Algılanan bir varlığa örnek:
+
+```typescript
+// This file can be named anything and placed anywhere in src/
+import { defineObject, FieldType } from 'twenty-sdk';
+
+export default defineObject({
+  universalIdentifier: '...',
+  nameSingular: 'postCard',
+  // ... rest of config
+});
+```
 
 İlerideki komutlar daha fazla dosya ve klasör ekleyecektir:
 
@@ -215,16 +184,18 @@ twenty-sdk, uygulamanız içinde kullandığınız türlendirilmiş yapı taşla
 
 ### Yardımcı fonksiyonlar
 
-SDK, uygulama varlıklarınızı tanımlamak için yerleşik doğrulamaya sahip dört yardımcı fonksiyon sunar:
+SDK, uygulama varlıklarınızı tanımlamak için yardımcı fonksiyonlar sağlar. [Varlık algılama](#entity-detection) bölümünde açıklandığı gibi, varlıklarınızın algılanması için `export default define<Entity>({...})` kullanmalısınız:
 
-| Fonksiyon             | Amaç                                           |
-| --------------------- | ---------------------------------------------- |
-| `defineApplication()` | Uygulama meta verilerini yapılandırın          |
-| `defineObject()`      | Alanlara sahip özel nesneler tanımlayın        |
-| `defineFunction()`    | İşleyicilerle mantık fonksiyonları tanımlayın  |
-| `defineRole()`        | Rol izinlerini ve nesne erişimini yapılandırın |
+| Fonksiyon                | Amaç                                                                      |
+| ------------------------ | ------------------------------------------------------------------------- |
+| `defineApplication()`    | Uygulama meta verilerini yapılandırın (zorunlu, uygulama başına bir adet) |
+| `defineObject()`         | Alanlara sahip özel nesneler tanımlayın                                   |
+| `defineLogicFunction()`  | İşleyicilerle mantık fonksiyonları tanımlayın                             |
+| `defineFrontComponent()` | Özel kullanıcı arayüzü için ön uç bileşenlerini tanımlayın                |
+| `defineRole()`           | Rol izinlerini ve nesne erişimini yapılandırın                            |
+| `defineField()`          | Mevcut nesneleri ek alanlarla genişletin                                  |
 
-Bu fonksiyonlar, yapılandırmanızı çalışma anında doğrular ve daha iyi IDE otomatik tamamlama ve tür güvenliği sağlar.
+Bu fonksiyonlar, derleme zamanında yapılandırmanızı doğrular ve IDE otomatik tamamlama ile tür güvenliği sağlar.
 
 ### Nesnelerin tanımlanması
 
@@ -311,9 +282,9 @@ export default defineObject({
   **Temel alanlar otomatik olarak oluşturulur.** Özel bir nesne tanımladığınızda Twenty, `name`, `createdAt`, `updatedAt`, `createdBy`, `position` ve `deletedAt` gibi standart alanları otomatik olarak ekler. Bunları `fields` dizinizde tanımlamanız gerekmez — yalnızca özel alanlarınızı ekleyin.
 </Note>
 
-### Uygulama yapılandırması (application.config.ts)
+### Uygulama yapılandırması (application-config.ts)
 
-Her uygulamanın aşağıdakileri açıklayan tek bir `application.config.ts` dosyası vardır:
+Her uygulamanın aşağıdakileri açıklayan tek bir `application-config.ts` dosyası vardır:
 
 * **Uygulamanın kim olduğu**: tanımlayıcılar, görünen ad ve açıklama.
 * **Fonksiyonlarının nasıl çalıştığı**: izinler için hangi rolü kullandıkları.
@@ -322,9 +293,9 @@ Her uygulamanın aşağıdakileri açıklayan tek bir `application.config.ts` do
 Uygulama yapılandırmanızı tanımlamak için `defineApplication()` kullanın:
 
 ```typescript
-// src/app/application.config.ts
+// src/application-config.ts
 import { defineApplication } from 'twenty-sdk';
-import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from './default-function.role';
+import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/roles/default-role';
 
 export default defineApplication({
   universalIdentifier: '4ec0391d-18d5-411c-b2f3-266ddc1c3ef7',
@@ -339,7 +310,7 @@ export default defineApplication({
       isSecret: false,
     },
   },
-  roleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
+  defaultRoleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
 });
 ```
 
@@ -347,11 +318,11 @@ Notlar:
 
 * `universalIdentifier` alanları size ait belirleyici kimliklerdir; bunları bir kez oluşturun ve eşitlemeler boyunca kararlı tutun.
 * `applicationVariables`, fonksiyonlarınız için ortam değişkenlerine dönüşür (örneğin, `DEFAULT_RECIPIENT_NAME` değeri `process.env.DEFAULT_RECIPIENT_NAME` olarak kullanılabilir).
-* `roleUniversalIdentifier`, `*.role.ts` dosyanızda tanımladığınız rolle eşleşmelidir (aşağıya bakın).
+* `defaultRoleUniversalIdentifier`, rol dosyasıyla eşleşmelidir (aşağıya bakın).
 
 #### Roller ve izinler
 
-Uygulamalar, çalışma alanınızdaki nesneler ve eylemler üzerindeki izinleri kapsülleyen roller tanımlayabilir. `application.config.ts` içindeki `roleUniversalIdentifier` alanı, uygulamanızın mantık fonksiyonları tarafından kullanılan varsayılan rolü belirtir.
+Uygulamalar, çalışma alanınızdaki nesneler ve eylemler üzerindeki izinleri kapsülleyen roller tanımlayabilir. `application-config.ts` içindeki `defaultRoleUniversalIdentifier` alanı, uygulamanızın mantık fonksiyonlarının kullandığı varsayılan rolü belirtir.
 
 * `TWENTY_API_KEY` olarak enjekte edilen çalışma zamanı API anahtarı bu varsayılan fonksiyon rolünden türetilir.
 * Türlendirilmiş istemci, o role tanınan izinlerle sınırlandırılır.
@@ -362,7 +333,7 @@ Uygulamalar, çalışma alanınızdaki nesneler ve eylemler üzerindeki izinleri
 Yeni bir uygulama oluşturduğunuzda CLI ayrıca varsayılan bir rol dosyası da oluşturur. Yerleşik doğrulamayla roller tanımlamak için `defineRole()` kullanın:
 
 ```typescript
-// src/app/default-function.role.ts
+// src/roles/default-role.ts
 import { defineRole, PermissionFlag } from 'twenty-sdk';
 
 export const DEFAULT_ROLE_UNIVERSAL_IDENTIFIER =
@@ -401,10 +372,10 @@ export default defineRole({
 });
 ```
 
-Bu rolün `universalIdentifier` değeri, `application.config.ts` içinde `roleUniversalIdentifier` olarak referans verilir. Başka bir deyişle:
+Bu rolün `universalIdentifier` değeri daha sonra `application-config.ts` içinde `defaultRoleUniversalIdentifier` olarak referans verilir. Başka bir deyişle:
 
 * **\*.role.ts**, varsayılan fonksiyon rolünün neler yapabileceğini tanımlar.
-* **application.config.ts** bu role işaret eder, böylece fonksiyonlarınız onun izinlerini devralır.
+* **application-config.ts**, fonksiyonlarınızın izinlerini devralması için bu role işaret eder.
 
 Notlar:
 
@@ -415,11 +386,11 @@ Notlar:
 
 ### Mantık fonksiyon yapılandırması ve giriş noktası
 
-Her fonksiyon dosyası, bir işleyici ve isteğe bağlı tetikleyiciler içeren bir yapılandırmayı dışa aktarmak için `defineFunction()` kullanır. Otomatik algılama için `*.function.ts` dosya soneğini kullanın.
+Her fonksiyon dosyası, bir işleyici ve isteğe bağlı tetikleyiciler içeren bir yapılandırmayı dışa aktarmak için `defineLogicFunction()` kullanır.
 
 ```typescript
-// src/app/createPostCard.function.ts
-import { defineFunction } from 'twenty-sdk';
+// src/app/createPostCard.logic-function.ts
+import { defineLogicFunction } from 'twenty-sdk';
 import type { DatabaseEventPayload, ObjectRecordCreateEvent, CronPayload, RoutePayload } from 'twenty-sdk';
 import Twenty, { type Person } from '~/generated';
 
@@ -439,7 +410,7 @@ const handler = async (params: RoutePayload) => {
   return result;
 };
 
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'create-new-post-card',
   timeoutSeconds: 2,
@@ -515,7 +486,7 @@ Notlar:
 Bir rota tetikleyicisi mantık fonksiyonunuzu çağırdığında, AWS HTTP API v2 formatını izleyen bir `RoutePayload` nesnesi alır. Türü `twenty-sdk` içinden içe aktarın:
 
 ```typescript
-import { defineFunction, type RoutePayload } from 'twenty-sdk';
+import { defineLogicFunction, type RoutePayload } from 'twenty-sdk';
 
 const handler = async (event: RoutePayload) => {
   // Access request data
@@ -545,7 +516,7 @@ const handler = async (event: RoutePayload) => {
 Varsayılan olarak, güvenlik nedenleriyle gelen isteklerden HTTP başlıkları mantık fonksiyonunuza **aktarılmaz**. Belirli başlıklara erişmek için bunları açıkça `forwardedRequestHeaders` dizisinde listeleyin:
 
 ```typescript
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'webhook-handler',
   handler,
@@ -580,8 +551,45 @@ const handler = async (event: RoutePayload) => {
 
 Yeni fonksiyonları iki şekilde oluşturabilirsiniz:
 
-* **Şablondan**: `yarn entity:add` çalıştırın ve yeni bir fonksiyon ekleme seçeneğini seçin. Bu, bir işleyici ve yapılandırma içeren bir başlangıç dosyası oluşturur.
-* **Manuel**: Yeni bir `*.function.ts` dosyası oluşturun ve aynı deseni izleyerek `defineFunction()` kullanın.
+* **Şablondan**: `yarn entity:add` çalıştırın ve yeni bir mantık fonksiyonu ekleme seçeneğini seçin. Bu, bir işleyici ve yapılandırma içeren bir başlangıç dosyası oluşturur.
+* **Manuel**: Yeni bir `*.logic-function.ts` dosyası oluşturun ve aynı deseni izleyerek `defineLogicFunction()` kullanın.
+
+### Ön uç bileşenleri
+
+Ön uç bileşenleri, Twenty'nin kullanıcı arayüzünde görüntülenen özel React bileşenleri oluşturmanıza olanak tanır. Yerleşik doğrulamayla bileşenleri tanımlamak için `defineFrontComponent()` kullanın:
+
+```typescript
+// src/my-widget.front-component.tsx
+import { defineFrontComponent } from 'twenty-sdk';
+
+const MyWidget = () => {
+  return (
+    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
+      <h1>My Custom Widget</h1>
+      <p>This is a custom front component for Twenty.</p>
+    </div>
+  );
+};
+
+export default defineFrontComponent({
+  universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  name: 'my-widget',
+  description: 'A custom widget component',
+  component: MyWidget,
+});
+```
+
+Önemli noktalar:
+
+* Ön uç bileşenleri, Twenty içinde yalıtılmış bağlamlarda görüntülenen React bileşenleridir.
+* Otomatik algılama için `*.front-component.tsx` dosya soneğini kullanın.
+* `component` alanı, React bileşeninize referans verir.
+* Bileşenler, `yarn app:dev` sırasında otomatik olarak oluşturulur ve senkronize edilir.
+
+Yeni ön uç bileşenlerini iki şekilde oluşturabilirsiniz:
+
+* **Şablondan**: `yarn entity:add` çalıştırın ve yeni bir ön uç bileşeni ekleme seçeneğini seçin.
+* **Manuel**: Yeni bir `*.front-component.tsx` dosyası oluşturun ve `defineFrontComponent()` kullanın.
 
 ### Oluşturulmuş türlendirilmiş istemci
 
@@ -606,12 +614,12 @@ Fonksiyonunuz Twenty üzerinde çalıştığında, platform kodunuz yürütülme
 Notlar:
 
 * Oluşturulan istemciye URL veya API anahtarı geçirmeniz gerekmez. Çalışma zamanında `TWENTY_API_URL` ve `TWENTY_API_KEY` değerlerini process.env üzerinden okur.
-* API anahtarının izinleri, `application.config.ts` içinde `roleUniversalIdentifier` aracılığıyla referans verilen role göre belirlenir. Bu, uygulamanızın mantık fonksiyonları tarafından kullanılan varsayılan roldür.
-* Uygulamalar, en az ayrıcalık ilkesini izlemek için roller tanımlayabilir. Yalnızca fonksiyonlarınızın ihtiyaç duyduğu izinleri verin ve ardından `roleUniversalIdentifier` değerini o rolün evrensel tanımlayıcısına yönlendirin.
+* API anahtarının izinleri, `application-config.ts` içinde `defaultRoleUniversalIdentifier` aracılığıyla referans verilen role göre belirlenir. Bu, uygulamanızın mantık fonksiyonları tarafından kullanılan varsayılan roldür.
+* Uygulamalar, en az ayrıcalık ilkesini izlemek için roller tanımlayabilir. Yalnızca fonksiyonlarınızın ihtiyaç duyduğu izinleri verin ve ardından `defaultRoleUniversalIdentifier` değerini o rolün evrensel tanımlayıcısına yönlendirin.
 
 ### Hello World örneği
 
-Nesneleri, fonksiyonları ve birden çok tetikleyiciyi gösteren minimal, uçtan uca bir örneği [buradan](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world) inceleyin:
+Nesneleri, mantık fonksiyonlarını, ön uç bileşenlerini ve birden çok tetikleyiciyi gösteren minimal, uçtan uca bir örneği [buradan](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world) inceleyin:
 
 ## Manuel kurulum (scaffolder olmadan)
 

packages/twenty-docs/l/zh/developers/extend/capabilities/apps.mdx

@@ -17,10 +17,6 @@ description: 以代码的形式构建并管理 Twenty 自定义项。
 * 构建带有自定义触发器的逻辑函数
 * 将同一个应用部署到多个工作空间
 
-**即将推出:**
-
-* 自定义 UI 布局和组件
-
 ## 先决条件
 
 * Node.js 24+ 和 Yarn 4
@@ -95,81 +91,54 @@ my-twenty-app/
   README.md
   public/                           # 公共资源文件夹（图像、字体等）
   src/
-    application.config.ts          # 必需 - 主应用程序配置
-    default-function.role.ts       # 用于无服务器函数的默认角色
-    hello-world.function.ts        # 示例无服务器函数
-    hello-world.front-component.tsx # 示例前端组件
-    // 你的实体 (*.object.ts, *.function.ts, *.front-component.tsx, *.role.ts)
-```
-
-### 约定优于配置
-
-应用采用**约定优于配置**的方式，根据文件后缀检测实体。 这使得可以在 `src/app/` 文件夹内灵活组织：
-
-| 文件后缀                    | 实体类型     |
-| ----------------------- | -------- |
-| `*.object.ts`           | 自定义对象定义  |
-| `*.function.ts`         | 无服务器函数定义 |
-| `*.front-component.tsx` | 前端组件定义   |
-| `*.role.ts`             | 角色定义     |
-
-### 支持的文件夹组织方式
-
-你可以按以下任一模式组织实体：
-
-**传统（按类型）：**
-
-```text
-src/
-├── application.config.ts
-├── objects/
-│   └── postCard.object.ts
-├── functions/
-│   └── createPostCard.function.ts
-├── components/
-│   └── card.front-component.tsx
-└── roles/
-    └── admin.role.ts
-```
-
-**基于特性：**
-
-```text
-src/
-├── application.config.ts
-└── post-card/
-    ├── postCard.object.ts
-    ├── createPostCard.function.ts
-    ├── card.front-component.tsx
-    └── postCardAdmin.role.ts
-```
-
-**扁平：**
-
-```text
-src/
-├── application.config.ts
-├── postCard.object.ts
-├── createPostCard.function.ts
-├── card.front-component.tsx
-└── admin.role.ts
+  ├── application-config.ts           # 必需 - 主应用程序配置
+  ├── roles/
+  │   └── default-role.ts               # 用于逻辑函数的默认角色
+  ├── logic-functions/
+  │   └── hello-world.ts                # 示例逻辑函数
+  └── front-components/
+      └── hello-world.tsx               # 示例前端组件
 ```
 
 总体来说：
 
-* **package.json**：声明应用名称、版本、运行时（Node 24+、Yarn 4），并添加 `twenty-sdk`，以及诸如 `app:dev`、`app:generate`、`entity:add`、`function:logs`、`function:execute`、`app:uninstall` 和 `auth:login` 等脚本，这些脚本会委托给本地的 `twenty` CLI。
+* **package.json**：声明应用名称、版本、运行时（Node 24+、Yarn 4），并添加 `twenty-sdk`，以及诸如 `app:dev`、`app:generate`、`entity:add`、`function:logs`、`function:execute`、`app:uninstall` 等脚本和认证命令，它们都会委托给本地的 `twenty` CLI。
 * **.gitignore**：忽略常见产物，如 `node_modules`、`.yarn`、`generated/`（类型化客户端）、`dist/`、`build/`、覆盖率文件夹、日志文件以及 `.env*` 文件。
 * **yarn.lock**、**.yarnrc.yml**、**.yarn/**：锁定并配置项目使用的 Yarn 4 工具链。
 * **.nvmrc**：固定项目期望的 Node.js 版本。
 * **eslint.config.mjs** 和 **tsconfig.json**：为应用的 TypeScript 源码提供 Lint 与 TypeScript 配置。
 * **README.md**：应用根目录中的简短 README，包含基本说明。
 * **public/**: 一个用于存储公共资源（图像、字体、静态文件）的文件夹，这些资源将随你的应用程序一起提供。 放置在此处的文件会在同步期间上传，并可在运行时访问。
-* **src/**：你以代码形式定义应用的主要位置：
-  * `application.config.ts`：应用的全局配置（元数据和运行时关联）。 参见下方“应用配置”。
-  * `*.role.ts`：你的逻辑函数所使用的角色定义。 参见下方“默认函数角色”。
-  * `*.object.ts`：自定义对象定义。
-  * `*.function.ts`：逻辑函数定义。
-  * `*.front-component.tsx`：前端组件定义。
+* **src/**：你以代码形式定义应用的主要位置
+
+### 实体检测
+
+该 SDK 通过在你的 TypeScript 文件中解析 **`export default define<Entity>({...})`** 调用来检测实体。 每种实体类型都有一个从 `twenty-sdk` 导出的对应辅助函数：
+
+| 辅助函数                     | 实体类型      |
+| ------------------------ | --------- |
+| `defineObject()`         | 自定义对象定义   |
+| `defineLogicFunction()`  | 逻辑函数定义    |
+| `defineFrontComponent()` | 前端组件定义    |
+| `defineRole()`           | 角色定义      |
+| `defineField()`          | 现有对象的字段扩展 |
+
+<Note>
+  **文件命名是灵活的。** 实体检测基于 AST — SDK 会扫描你的源文件以查找 `export default define<Entity>({...})` 模式。 你可以按照自己的喜好组织文件和文件夹。 按实体类型分组（例如 `logic-functions/`、`roles/`）只是代码组织的一种约定，并非必需。
+</Note>
+
+已检测实体的示例：
+
+```typescript
+// This file can be named anything and placed anywhere in src/
+import { defineObject, FieldType } from 'twenty-sdk';
+
+export default defineObject({
+  universalIdentifier: '...',
+  nameSingular: 'postCard',
+  // ... rest of config
+});
+```
 
 后续命令将添加更多文件和文件夹：
 
@@ -215,16 +184,18 @@ twenty-sdk 提供你在应用中使用的类型化构件和辅助函数。 以
 
 ### 辅助函数
 
-该 SDK 提供四个带内置校验的辅助函数，用于定义你的应用实体：
+该 SDK 提供辅助函数用于定义你的应用实体。 如 [实体检测](#entity-detection) 中所述，你必须使用 `export default define<Entity>({...})` 才能让你的实体被检测到：
 
-| 函数                    | 目的           |
-| --------------------- | ------------ |
-| `defineApplication()` | 配置应用元数据      |
-| `defineObject()`      | 定义带字段的自定义对象  |
-| `defineFunction()`    | 定义带处理程序的逻辑函数 |
-| `defineRole()`        | 配置角色权限和对象访问  |
+| 函数                       | 目的                 |
+| ------------------------ | ------------------ |
+| `defineApplication()`    | 配置应用元数据（必需，每个应用一个） |
+| `defineObject()`         | 定义带字段的自定义对象        |
+| `defineLogicFunction()`  | 定义带处理程序的逻辑函数       |
+| `defineFrontComponent()` | 为自定义 UI 定义前端组件     |
+| `defineRole()`           | 配置角色权限和对象访问        |
+| `defineField()`          | 为现有对象扩展额外字段        |
 
-这些函数会在运行时校验你的配置，并提供更好的 IDE 自动补全和类型安全。
+这些函数会在构建时校验你的配置，并提供 IDE 自动补全和类型安全。
 
 ### 定义对象
 
@@ -311,9 +282,9 @@ export default defineObject({
   **基础字段会自动创建。** 当你定义自定义对象时，Twenty 会自动添加 `name`、`createdAt`、`updatedAt`、`createdBy`、`position`、`deletedAt` 等标准字段。 你无需在 `fields` 数组中定义这些字段——只需添加你的自定义字段。
 </Note>
 
-### 应用配置（application.config.ts）
+### 应用配置（application-config.ts）
 
-每个应用都有一个 `application.config.ts` 文件，用于描述：
+每个应用都有一个 `application-config.ts` 文件，用于描述：
 
 * **应用的身份**：标识符、显示名称和描述。
 * **函数如何运行**：它们用于权限的角色。
@@ -322,9 +293,9 @@ export default defineObject({
 使用 `defineApplication()` 定义你的应用配置：
 
 ```typescript
-// src/app/application.config.ts
+// src/application-config.ts
 import { defineApplication } from 'twenty-sdk';
-import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from './default-function.role';
+import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/roles/default-role';
 
 export default defineApplication({
   universalIdentifier: '4ec0391d-18d5-411c-b2f3-266ddc1c3ef7',
@@ -339,7 +310,7 @@ export default defineApplication({
       isSecret: false,
     },
   },
-  roleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
+  defaultRoleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
 });
 ```
 
@@ -347,11 +318,11 @@ export default defineApplication({
 
 * `universalIdentifier` 字段是你拥有的确定性 ID；生成一次并在多次同步中保持稳定。
 * `applicationVariables` 会变成函数可用的环境变量（例如，`DEFAULT_RECIPIENT_NAME` 可作为 `process.env.DEFAULT_RECIPIENT_NAME` 使用）。
-* `roleUniversalIdentifier` 必须与在 `*.role.ts` 文件中定义的角色一致（见下文）。
+* `defaultRoleUniversalIdentifier` 必须与角色文件一致（见下文）。
 
 #### 角色和权限
 
-应用可以定义角色，以封装对工作空间对象与操作的权限。 `application.config.ts` 中的 `roleUniversalIdentifier` 字段指定你的应用逻辑函数所使用的默认角色。
+应用可以定义角色，以封装对工作空间对象与操作的权限。 `application-config.ts` 中的 `defaultRoleUniversalIdentifier` 字段指定你的应用逻辑函数所使用的默认角色。
 
 * 作为 `TWENTY_API_KEY` 注入的运行时 API 密钥源自该默认函数角色。
 * 类型化客户端将受限于该角色授予的权限。
@@ -362,7 +333,7 @@ export default defineApplication({
 当你脚手架生成新应用时，CLI 也会创建一个默认角色文件。 使用 `defineRole()` 定义带内置校验的角色：
 
 ```typescript
-// src/app/default-function.role.ts
+// src/roles/default-role.ts
 import { defineRole, PermissionFlag } from 'twenty-sdk';
 
 export const DEFAULT_ROLE_UNIVERSAL_IDENTIFIER =
@@ -401,10 +372,10 @@ export default defineRole({
 });
 ```
 
-随后，该角色的 `universalIdentifier` 会在 `application.config.ts` 中被引用为 `roleUniversalIdentifier`。 换句话说：
+随后，该角色的 `universalIdentifier` 会在 `application-config.ts` 中被引用为 `defaultRoleUniversalIdentifier`。 换句话说：
 
 * **\*.role.ts** 定义默认函数角色可以执行的操作。
-* **application.config.ts** 指向该角色，使你的函数继承其权限。
+* **application-config.ts** 指向该角色，使你的函数继承其权限。
 
 备注:
 
@@ -415,11 +386,11 @@ export default defineRole({
 
 ### 逻辑函数的配置与入口点
 
-每个函数文件都使用 `defineFunction()` 导出包含处理程序和可选触发器的配置。 使用 `*.function.ts` 文件后缀以便自动检测。
+每个函数文件都使用 `defineLogicFunction()` 导出包含处理程序和可选触发器的配置。
 
 ```typescript
-// src/app/createPostCard.function.ts
-import { defineFunction } from 'twenty-sdk';
+// src/app/createPostCard.logic-function.ts
+import { defineLogicFunction } from 'twenty-sdk';
 import type { DatabaseEventPayload, ObjectRecordCreateEvent, CronPayload, RoutePayload } from 'twenty-sdk';
 import Twenty, { type Person } from '~/generated';
 
@@ -439,7 +410,7 @@ const handler = async (params: RoutePayload) => {
   return result;
 };
 
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'create-new-post-card',
   timeoutSeconds: 2,
@@ -515,7 +486,7 @@ export default defineFunction({
 当路由触发器调用你的逻辑函数时，它会接收一个遵循 AWS HTTP API v2 格式的 `RoutePayload` 对象。 从 `twenty-sdk` 导入该类型：
 
 ```typescript
-import { defineFunction, type RoutePayload } from 'twenty-sdk';
+import { defineLogicFunction, type RoutePayload } from 'twenty-sdk';
 
 const handler = async (event: RoutePayload) => {
   // Access request data
@@ -545,7 +516,7 @@ const handler = async (event: RoutePayload) => {
 出于安全原因，默认**不会**将传入请求的 HTTP 请求头传递给你的逻辑函数。 如需访问特定请求头，请在 `forwardedRequestHeaders` 数组中显式列出：
 
 ```typescript
-export default defineFunction({
+export default defineLogicFunction({
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'webhook-handler',
   handler,
@@ -580,8 +551,45 @@ const handler = async (event: RoutePayload) => {
 
 你可以通过两种方式创建新函数：
 
-* **脚手架生成**：运行 `yarn entity:add` 并选择添加新函数的选项。 这将生成一个包含处理程序和配置的入门文件。
-* **手动**：创建一个新的 `*.function.ts` 文件，并使用 `defineFunction()`，遵循相同的模式。
+* **脚手架生成**：运行 `yarn entity:add` 并选择添加新逻辑函数的选项。 这将生成一个包含处理程序和配置的入门文件。
+* **手动**：创建一个新的 `*.logic-function.ts` 文件，并使用 `defineLogicFunction()`，遵循相同的模式。
+
+### 前端组件
+
+前端组件使你可以构建在 Twenty 的 UI 中渲染的自定义 React 组件。 使用 `defineFrontComponent()` 以内置校验定义组件：
+
+```typescript
+// src/my-widget.front-component.tsx
+import { defineFrontComponent } from 'twenty-sdk';
+
+const MyWidget = () => {
+  return (
+    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
+      <h1>My Custom Widget</h1>
+      <p>This is a custom front component for Twenty.</p>
+    </div>
+  );
+};
+
+export default defineFrontComponent({
+  universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  name: 'my-widget',
+  description: 'A custom widget component',
+  component: MyWidget,
+});
+```
+
+关键点：
+
+* 前端组件是在 Twenty 中的隔离上下文中渲染的 React 组件。
+* 使用 `*.front-component.tsx` 文件后缀以便自动检测。
+* `component` 字段引用你的 React 组件。
+* 组件会在 `yarn app:dev` 期间自动构建并同步。
+
+你可以通过两种方式创建新的前端组件：
+
+* **脚手架生成**：运行 `yarn entity:add` 并选择添加新前端组件的选项。
+* **手动**：创建一个新的 `*.front-component.tsx` 文件，并使用 `defineFrontComponent()`。
 
 ### 生成的类型化客户端
 
@@ -606,12 +614,12 @@ const { me } = await client.query({ me: { id: true, displayName: true } });
 备注:
 
 * 你无需向生成的客户端传递 URL 或 API 密钥。 它会在运行时从 process.env 读取 `TWENTY_API_URL` 和 `TWENTY_API_KEY`。
-* API 密钥的权限由 `application.config.ts` 中通过 `roleUniversalIdentifier` 引用的角色决定。 这是你的应用逻辑函数使用的默认角色。
-* 应用可以定义角色以遵循最小权限原则。 仅授予函数所需的权限，然后将 `roleUniversalIdentifier` 指向该角色的通用标识符。
+* API 密钥的权限由 `application-config.ts` 中通过 `defaultRoleUniversalIdentifier` 引用的角色决定。 这是你的应用逻辑函数使用的默认角色。
+* 应用可以定义角色以遵循最小权限原则。 仅授予函数所需的权限，然后将 `defaultRoleUniversalIdentifier` 指向该角色的通用标识符。
 
 ### Hello World 示例
 
-在[此处](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world)查看一个最小的端到端示例，展示对象、函数和多种触发器：
+在[此处](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world)查看一个最小的端到端示例，展示对象、逻辑函数、前端组件和多种触发器：
 
 ## 手动设置（不使用脚手架）
 

packages/twenty-e2e-testing/tests/workflow-creation.spec.ts

@@ -7,6 +7,9 @@ test('Create workflow', async ({ page }) => {
 
   await page.goto(process.env.LINK);
 
+  const workflowsFolder = page.getByRole('button', { name: 'Workflows' });
+  await workflowsFolder.click();
+
   const workflowsLink = page.getByRole('link', { name: 'Workflows' });
   await workflowsLink.click();
 

packages/twenty-emails/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "jsx": "react-jsx",
+    "moduleResolution": "bundler",
     "allowJs": false,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,

packages/twenty-front/codegen-metadata.cjs

@@ -18,9 +18,9 @@ module.exports = {
 
     './src/modules/billing/graphql/**/*.{ts,tsx}',
     './src/modules/settings/**/graphql/**/*.{ts,tsx}',
+    './src/modules/logic-functions/graphql/**/*.{ts,tsx}',
 
     './src/modules/databases/graphql/**/*.{ts,tsx}',
-    './src/modules/workflow/**/graphql/**/*.{ts,tsx}',
     './src/modules/analytics/graphql/**/*.{ts,tsx}',
     './src/modules/object-metadata/graphql/**/*.{ts,tsx}',
     './src/modules/navigation-menu-item/graphql/**/*.{ts,tsx}',
@@ -31,6 +31,9 @@ module.exports = {
 
     './src/modules/page-layout/widgets/**/graphql/**/*.{ts,tsx}',
 
+    './src/modules/dashboards/graphql/**/*.{ts,tsx}',
+    './src/modules/page-layout/graphql/**/*.{ts,tsx}',
+    './src/modules/marketplace/graphql/**/*.{ts,tsx}',
     '!./src/**/*.test.{ts,tsx}',
     '!./src/**/*.stories.{ts,tsx}',
     '!./src/**/__mocks__/*.ts',

packages/twenty-front/codegen.cjs

@@ -5,22 +5,11 @@ module.exports = {
     (process.env.REACT_APP_SERVER_BASE_URL ?? 'http://localhost:3000') +
     '/graphql',
   documents: [
-    './src/modules/activities/graphql/**/*.{ts,tsx}',
-    './src/modules/companies/graphql/**/*.{ts,tsx}',
-    './src/modules/people/graphql/**/*.{ts,tsx}',
-    './src/modules/opportunities/graphql/**/*.{ts,tsx}',
-
+    './src/modules/workflow/**/graphql/**/*.{ts,tsx}',
+    './src/modules/activities/emails/graphql/**/*.{ts,tsx}',
+    './src/modules/activities/calendar/graphql/**/*.{ts,tsx}',
     './src/modules/search/graphql/**/*.{ts,tsx}',
-    './src/modules/views/graphql/**/*.{ts,tsx}',
-    './src/modules/favorites/graphql/**/*.{ts,tsx}',
-    './src/modules/spreadsheet-import/graphql/**/*.{ts,tsx}',
     './src/modules/command-menu/graphql/**/*.{ts,tsx}',
-    './src/modules/marketplace/graphql/**/*.{ts,tsx}',
-
-    './src/modules/prefetch/graphql/**/*.{ts,tsx}',
-    './src/modules/subscription/graphql/**/*.{ts,tsx}',
-
-    './src/modules/page-layout/graphql/**/*.{ts,tsx}',
 
     '!./src/**/*.test.{ts,tsx}',
     '!./src/**/*.stories.{ts,tsx}',

packages/twenty-front/jest.config.mjs

@@ -62,9 +62,9 @@ const jestConfig = {
   extensionsToTreatAsEsm: ['.ts', '.tsx'],
   coverageThreshold: {
     global: {
-      statements: 50,
-      lines: 48.9,
-      functions: 40.9,
+      statements: 49.5,
+      lines: 48,
+      functions: 40,
     },
   },
   collectCoverageFrom: ['<rootDir>/src/**/*.ts'],

packages/twenty-front/src/hooks/__tests__/usePageChangeEffectNavigateLocation.test.ts

@@ -7,7 +7,7 @@ import { useRecoilValue } from 'recoil';
 import { AppPath, SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 
-import { OnboardingStatus } from '~/generated/graphql';
+import { OnboardingStatus } from '~/generated-metadata/graphql';
 
 import { useIsCurrentLocationOnAWorkspace } from '@/domain-manager/hooks/useIsCurrentLocationOnAWorkspace';
 import { usePageChangeEffectNavigateLocation } from '~/hooks/usePageChangeEffectNavigateLocation';

packages/twenty-front/src/hooks/useNavigateApp.ts

@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { type AppPath } from 'twenty-shared/types';
+import { type AppPath, type NavigateOptions } from 'twenty-shared/types';
 import { getAppPath } from 'twenty-shared/utils';
 
 export const useNavigateApp = () => {
@@ -9,10 +9,7 @@ export const useNavigateApp = () => {
     to: T,
     params?: Parameters<typeof getAppPath<T>>[1],
     queryParams?: Record<string, any>,
-    options?: {
-      replace?: boolean;
-      state?: any;
-    },
+    options?: NavigateOptions,
   ) => {
     const path = getAppPath(to, params, queryParams);
     return navigate(path, options);

packages/twenty-front/src/hooks/usePageChangeEffectNavigateLocation.ts

@@ -11,7 +11,7 @@ import { useRecoilValue } from 'recoil';
 import { AppPath, SettingsPath } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { WorkspaceActivationStatus } from 'twenty-shared/workspace';
-import { OnboardingStatus } from '~/generated/graphql';
+import { OnboardingStatus } from '~/generated-metadata/graphql';
 import { isMatchingLocation } from '~/utils/isMatchingLocation';
 
 export const usePageChangeEffectNavigateLocation = () => {

packages/twenty-front/src/modules/accounts/types/ImapSmtpCaldavAccount.ts

@@ -1,4 +1,4 @@
-import { type ConnectionParameters } from '~/generated/graphql';
+import { type ConnectionParameters } from '~/generated-metadata/graphql';
 
 export type ImapSmtpCaldavAccount = {
   IMAP?: ConnectionParameters;

packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/DefaultRecordActionsConfig.tsx

@@ -66,8 +66,10 @@ import {
 } from 'twenty-ui/display';
 
 import { isDefined } from 'twenty-shared/utils';
-import { PermissionFlagType } from '~/generated-metadata/graphql';
-import { FeatureFlagKey } from '~/generated/graphql';
+import {
+  PermissionFlagType,
+  FeatureFlagKey,
+} from '~/generated-metadata/graphql';
 
 export const DEFAULT_RECORD_ACTIONS_CONFIG: Record<
   | NoSelectionRecordActionKeys

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/AddToFavoritesSingleRecordAction.tsx

@@ -7,7 +7,7 @@ import { recordStoreFamilyState } from '@/object-record/record-store/states/reco
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
-import { FeatureFlagKey } from '~/generated/graphql';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 export const AddToFavoritesSingleRecordAction = () => {
   const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/DeleteSingleRecordAction.tsx

@@ -10,7 +10,7 @@ import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-
 import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { isDefined } from 'twenty-shared/utils';
-import { FeatureFlagKey } from '~/generated/graphql';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 export const DeleteSingleRecordAction = () => {
   const { recordIndexId, objectMetadataItem } =

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/RemoveFromFavoritesSingleRecordAction.tsx

@@ -7,7 +7,7 @@ import { useDeleteNavigationMenuItem } from '@/navigation-menu-item/hooks/useDel
 import { usePrefetchedNavigationMenuItemsData } from '@/navigation-menu-item/hooks/usePrefetchedNavigationMenuItemsData';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { isDefined } from 'twenty-shared/utils';
-import { FeatureFlagKey } from '~/generated/graphql';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 export const RemoveFromFavoritesSingleRecordAction = () => {
   const recordId = useSelectedRecordIdOrThrow();

packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/hooks/useRecordAgnosticActions.ts

@@ -2,7 +2,7 @@ import { RECORD_AGNOSTIC_ACTIONS_CONFIG } from '@/action-menu/actions/record-agn
 import { RecordAgnosticActionsKeys } from '@/action-menu/actions/record-agnostic-actions/types/RecordAgnosticActionsKeys';
 import { type ActionConfig } from '@/action-menu/actions/types/ActionConfig';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { FeatureFlagKey } from '~/generated/graphql';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 export const useRecordAgnosticActions = () => {
   const isAiEnabled = useIsFeatureEnabled(FeatureFlagKey.IS_AI_ENABLED);

packages/twenty-front/src/modules/action-menu/actions/types/ShouldBeRegisteredFunctionParams.ts

@@ -4,7 +4,7 @@ import { type RecordFilter } from '@/object-record/record-filter/types/RecordFil
 import { type ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { type WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
 import { type ObjectPermissions } from 'twenty-shared/types';
-import { type FeatureFlagKey } from '~/generated/graphql';
+import { type FeatureFlagKey } from '~/generated-metadata/graphql';
 
 export type ShouldBeRegisteredFunctionParams = {
   objectMetadataItem?: ObjectMetadataItem;