chore: improve monitoring for fix(ai-chat): use AGENT_NOT_FOUND instead of AGENT

Added a test case to the existing `agent-graphql-api-exception-handler.util.spec.ts` that verifies `AGENT_NOT_FOUND` maps to `ErrorCode.NOT_FOUND` (not `INTERNAL_SERVER_ERROR`). This ensures future regressions in the exception code mapping are caught in CI.

After deploying the fix, "Thread not found" errors will surface as `NOT_FOUND` (404) instead of `INTERNAL_SERVER_ERROR` (500) in Sentry, which should be filtered by default alert rules since 404s are expected user behavior.

packages/create-twenty-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-twenty-app",
-  "version": "1.22.0-canary.6",
+  "version": "1.22.0",
   "description": "Command-line interface to create Twenty application",
   "main": "dist/cli.cjs",
   "bin": "dist/cli.cjs",

packages/twenty-apps/internal/self-hosting/.github/workflows/cd.yml

@@ -0,0 +1,42 @@
+name: CD
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [labeled]
+
+permissions:
+  contents: read
+
+env:
+  TWENTY_DEPLOY_URL: http://localhost:3000
+
+concurrency:
+  group: cd-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  deploy-and-install:
+    if: >-
+      github.event_name == 'push' ||
+      (github.event_name == 'pull_request' && github.event.label.name == 'deploy')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+
+      - name: Deploy
+        uses: twentyhq/twenty/.github/actions/deploy-twenty-app@main
+        with:
+          api-url: ${{ env.TWENTY_DEPLOY_URL }}
+          api-key: ${{ secrets.TWENTY_DEPLOY_API_KEY }}
+
+      - name: Install
+        uses: twentyhq/twenty/.github/actions/install-twenty-app@main
+        with:
+          api-url: ${{ env.TWENTY_DEPLOY_URL }}
+          api-key: ${{ secrets.TWENTY_DEPLOY_API_KEY }}

packages/twenty-apps/internal/self-hosting/.github/workflows/ci.yml

@@ -0,0 +1,48 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request: {}
+
+permissions:
+  contents: read
+
+env:
+  TWENTY_VERSION: latest
+
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Spawn Twenty test instance
+        id: twenty
+        uses: twentyhq/twenty/.github/actions/spawn-twenty-app-dev-test@main
+        with:
+          twenty-version: ${{ env.TWENTY_VERSION }}
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Run integration tests
+        run: yarn test
+        env:
+          TWENTY_API_URL: ${{ steps.twenty.outputs.server-url }}
+          TWENTY_API_KEY: ${{ steps.twenty.outputs.api-key }}

packages/twenty-apps/internal/self-hosting/.gitignore

@@ -35,3 +35,4 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+*.d.ts

packages/twenty-apps/internal/self-hosting/.nvmrc

@@ -0,0 +1 @@
+24.5.0

packages/twenty-apps/internal/self-hosting/.oxlintrc.json

@@ -1,40 +1,19 @@
 {
   "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "plugins": ["typescript", "import", "unicorn"],
+  "plugins": ["typescript"],
   "categories": {
     "correctness": "off"
   },
-  "ignorePatterns": ["node_modules"],
+  "ignorePatterns": ["node_modules", "dist"],
   "rules": {
-    "func-style": ["error", "declaration", { "allowArrowFunctions": true }],
-    "no-console": ["warn", { "allow": ["group", "groupCollapsed", "groupEnd"] }],
-    "no-control-regex": "off",
-    "no-debugger": "error",
-    "no-duplicate-imports": "error",
-    "no-undef": "off",
     "no-unused-vars": "off",
-    "no-redeclare": "off",
 
-    "import/no-duplicates": "error",
-
-    "typescript/no-redeclare": "error",
-    "typescript/ban-ts-comment": "error",
-    "typescript/consistent-type-imports": ["error", {
-      "prefer": "type-imports",
-      "fixStyle": "inline-type-imports"
-    }],
-    "typescript/explicit-function-return-type": "off",
-    "typescript/explicit-module-boundary-types": "off",
-    "typescript/no-empty-object-type": ["error", {
-      "allowInterfaces": "with-single-extends"
-    }],
-    "typescript/no-empty-function": "off",
-    "typescript/no-explicit-any": "off",
-    "typescript/no-unused-vars": ["warn", {
-      "vars": "all",
-      "varsIgnorePattern": "^_",
-      "args": "after-used",
-      "argsIgnorePattern": "^_"
-    }]
+    "typescript/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "typescript/no-explicit-any": "off"
   }
 }

packages/twenty-apps/internal/self-hosting/.yarnrc.yml

@@ -1,5 +1 @@
-yarnPath: .yarn/releases/yarn-4.9.2.cjs
-
 nodeLinker: node-modules
-
-enableTransparentWorkspaces: false

packages/twenty-apps/internal/self-hosting/AGENT.md

@@ -0,0 +1,14 @@
+## Base documentation
+
+- Documentation: https://docs.twenty.com/developers/extend/apps/getting-started
+- Rich app example: https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/examples/postcard
+
+## UUID requirement
+
+- All generated UUIDs must be valid UUID v4.
+
+## Common Pitfalls
+
+- Creating an object without an index view associated. Unless this is a technical object, user will need to visualize it.
+- Creating a view without a navigationMenuItem associated. This will make the view available on the left sidebar.
+- Creating a front-end component that has a scroll instead of being responsive to its fixed widget height and width, unless it is specifically meant to be used in a canvas tab.

packages/twenty-apps/internal/self-hosting/CLAUDE.md

@@ -0,0 +1,14 @@
+## Base documentation
+
+- Documentation: https://docs.twenty.com/developers/extend/apps/getting-started
+- Rich app example: https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/examples/postcard
+
+## UUID requirement
+
+- All generated UUIDs must be valid UUID v4.
+
+## Common Pitfalls
+
+- Creating an object without an index view associated. Unless this is a technical object, user will need to visualize it.
+- Creating a view without a navigationMenuItem associated. This will make the view available on the left sidebar.
+- Creating a front-end component that has a scroll instead of being responsive to its fixed widget height and width, unless it is specifically meant to be used in a canvas tab.

packages/twenty-apps/internal/self-hosting/LLMS.md

@@ -0,0 +1,14 @@
+## Base documentation
+
+- Documentation: https://docs.twenty.com/developers/extend/apps/getting-started
+- Rich app example: https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/examples/postcard
+
+## UUID requirement
+
+- All generated UUIDs must be valid UUID v4.
+
+## Common Pitfalls
+
+- Creating an object without an index view associated. Unless this is a technical object, user will need to visualize it.
+- Creating a view without a navigationMenuItem associated. This will make the view available on the left sidebar.
+- Creating a front-end component that has a scroll instead of being responsive to its fixed widget height and width, unless it is specifically meant to be used in a canvas tab.

packages/twenty-apps/internal/self-hosting/README.md

@@ -1,44 +1,11 @@
-# Self Hosting
+This is a [Twenty](https://twenty.com) application bootstrapped with [`create-twenty-app`](https://www.npmjs.com/package/create-twenty-app).
 
-Used to manage billing and telemetry of self-hosted instances
+## Getting Started
 
-## Features
+Run `yarn twenty help` to list all available commands.
 
-### Telemetry Webhook
+## Learn More
 
-Receives user signup telemetry events from self-hosted Twenty instances and creates/updates selfHostingUser records.
-
-**Endpoint:** `POST /webhook/telemetry`
-
-**Payload Structure:**
-```json
-{
-  "action": "user_signup",
-  "timestamp": "2025-11-21T...",
-  "version": "1",
-  "payload": {
-    "userId": "uuid",
-    "workspaceId": "uuid",
-    "payload": {
-      "events": [
-        {
-          "userEmail": "user@example.com",
-          "userId": "uuid",
-          "userFirstName": "John",
-          "userLastName": "Doe",
-          "locale": "en",
-          "serverUrl": "https://self-hosted.example.com"
-        }
-      ]
-    }
-  }
-}
-```
-
-**Response:**
-```json
-{
-  "success": true,
-  "message": "Self hosting user created/updated: uuid"
-}
-```
+- [Twenty Apps documentation](https://docs.twenty.com/developers/extend/apps/getting-started)
+- [twenty-sdk CLI reference](https://www.npmjs.com/package/twenty-sdk)
+- [Discord](https://discord.gg/cx5n4Jzs57)

packages/twenty-apps/internal/self-hosting/package.json

@@ -1,6 +1,6 @@
 {
   "name": "self-hosting",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "license": "MIT",
   "engines": {
     "node": "^24.5.0",
@@ -11,13 +11,22 @@
   "scripts": {
     "twenty": "twenty",
     "lint": "oxlint -c .oxlintrc.json .",
-    "lint:fix": "oxlint --fix -c .oxlintrc.json ."
+    "lint:fix": "oxlint --fix -c .oxlintrc.json .",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "twenty-client-sdk": "1.22.0-canary.6",
+    "twenty-sdk": "1.22.0-canary.6"
   },
   "devDependencies": {
     "@types/node": "^24.7.2",
+    "@types/react": "^19.0.0",
     "oxlint": "^0.16.0",
-    "twenty-sdk": "0.6.2"
-  },
-  "$schema": "https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-cli/src/constants/schemas/appManifest.schema.json",
-  "universalIdentifier": "a7070f46-3158-4b40-828f-8e6b1febc233"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.9.3",
+    "vite-tsconfig-paths": "^4.2.1",
+    "vitest": "^3.1.1"
+  }
 }

packages/twenty-apps/internal/self-hosting/src/__tests__/app-install.integration-test.ts

@@ -0,0 +1,72 @@
+import { appBuild, appDeploy, appInstall, appUninstall } from 'twenty-sdk/cli';
+import { MetadataApiClient } from 'twenty-client-sdk/metadata';
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+import { APPLICATION_UNIVERSAL_IDENTIFIER } from 'src/application.config';
+
+const APP_PATH = process.cwd();
+
+describe('App installation', () => {
+  beforeAll(async () => {
+    const buildResult = await appBuild({
+      appPath: APP_PATH,
+      tarball: true,
+      onProgress: (message: string) => console.log(`[build] ${message}`),
+    });
+
+    if (!buildResult.success) {
+      throw new Error(
+        `Build failed: ${buildResult.error?.message ?? 'Unknown error'}`,
+      );
+    }
+
+    const deployResult = await appDeploy({
+      tarballPath: buildResult.data.tarballPath!,
+      onProgress: (message: string) => console.log(`[deploy] ${message}`),
+    });
+
+    if (!deployResult.success) {
+      throw new Error(
+        `Deploy failed: ${deployResult.error?.message ?? 'Unknown error'}`,
+      );
+    }
+
+    const installResult = await appInstall({ appPath: APP_PATH });
+
+    if (!installResult.success) {
+      throw new Error(
+        `Install failed: ${installResult.error?.message ?? 'Unknown error'}`,
+      );
+    }
+  });
+
+  afterAll(async () => {
+    const uninstallResult = await appUninstall({ appPath: APP_PATH });
+
+    if (!uninstallResult.success) {
+      console.warn(
+        `App uninstall failed: ${
+          uninstallResult.error?.message ?? 'Unknown error'
+        }`,
+      );
+    }
+  });
+
+  it('should find the installed app in the applications list', async () => {
+    const metadataClient = new MetadataApiClient();
+
+    const result = await metadataClient.query({
+      findManyApplications: {
+        id: true,
+        name: true,
+        universalIdentifier: true,
+      },
+    });
+
+    const installedApp = result.findManyApplications.find(
+      (application: { universalIdentifier: string }) =>
+        application.universalIdentifier === APPLICATION_UNIVERSAL_IDENTIFIER,
+    );
+
+    expect(installedApp).toBeDefined();
+  });
+});

packages/twenty-apps/internal/self-hosting/src/__tests__/setup-test.ts

@@ -0,0 +1,53 @@
+import * as fs from 'fs';
+import * as os from 'os';
+import * as path from 'path';
+import { beforeAll } from 'vitest';
+
+const CONFIG_DIR = path.join(os.homedir(), '.twenty');
+const CONFIG_PATH = path.join(CONFIG_DIR, 'config.test.json');
+
+beforeAll(async () => {
+  const apiUrl = process.env.TWENTY_API_URL!;
+  const token = process.env.TWENTY_API_KEY!;
+
+  if (!apiUrl || !token) {
+    throw new Error(
+      'TWENTY_API_URL and TWENTY_API_KEY must be set.\n' +
+        'Start a local server: yarn twenty server start\n' +
+        'Or set them in vitest env config.',
+    );
+  }
+
+  let response: Response;
+
+  try {
+    response = await fetch(`${apiUrl}/healthz`);
+  } catch {
+    throw new Error(
+      `Twenty server is not reachable at ${apiUrl}. ` +
+        'Make sure the server is running before executing integration tests.',
+    );
+  }
+
+  if (!response.ok) {
+    throw new Error(`Server at ${apiUrl} returned ${response.status}`);
+  }
+
+  fs.mkdirSync(CONFIG_DIR, { recursive: true });
+
+  fs.writeFileSync(
+    CONFIG_PATH,
+    JSON.stringify(
+      {
+        remotes: {
+          local: { apiUrl, apiKey: token },
+        },
+        defaultRemote: 'local',
+      },
+      null,
+      2,
+    ),
+  );
+
+  process.env.TWENTY_APP_ACCESS_TOKEN ??= token;
+});

packages/twenty-apps/internal/self-hosting/src/application.config.ts

@@ -1,6 +1,9 @@
 import { defineApplication } from 'twenty-sdk';
 import { UNIVERSAL_IDENTIFIERS } from 'src/constants/universal-identifiers.constant';
 
+export const APPLICATION_UNIVERSAL_IDENTIFIER =
+  '94f7db30-59e5-4b09-a5fe-64cd3d4a65b0';
+
 export default defineApplication({
   universalIdentifier: '94f7db30-59e5-4b09-a5fe-64cd3d4a65b0',
   displayName: 'Self Hosting',

packages/twenty-apps/internal/self-hosting/src/logic-functions/match-telemetry-event-with-people.ts

@@ -5,7 +5,7 @@ import {
   type ObjectRecordUpdateEvent,
 } from 'twenty-sdk';
 import { SELF_HOSTING_USER_NAME_SINGULAR } from 'src/objects/selfHostingUser.object';
-import { CoreApiClient } from 'twenty-sdk/clients';
+import { CoreApiClient } from 'twenty-client-sdk/core';
 
 type SelfHostingUser = {
   id: string;

packages/twenty-apps/internal/self-hosting/src/logic-functions/telemetryWebhook.function.ts

@@ -1,5 +1,5 @@
 import { defineLogicFunction, type RoutePayload } from 'twenty-sdk';
-import { CoreApiClient } from 'twenty-sdk/clients';
+import { CoreApiClient } from 'twenty-client-sdk/core';
 import { type TelemetryEvent } from 'src/logic-functions/types/telemetry-event.type';
 
 export const main = async (

packages/twenty-apps/internal/self-hosting/src/roles/default-role.ts

@@ -4,7 +4,7 @@ import { UNIVERSAL_IDENTIFIERS } from 'src/constants/universal-identifiers.const
 export default defineRole({
   universalIdentifier:
     UNIVERSAL_IDENTIFIERS.roles.defaultRole.universalIdentifier,
-  label: 'default role',
+  label: 'Self hosting default role',
   description: 'Add a description for your role',
   canReadAllObjectRecords: true,
   canUpdateAllObjectRecords: true,

packages/twenty-apps/internal/self-hosting/tsconfig.json

@@ -27,5 +27,16 @@
       "~/*": ["./*"]
     }
   },
-  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.spec.ts"]
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.integration-test.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
 }

packages/twenty-apps/internal/self-hosting/tsconfig.spec.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "types": ["vitest/globals", "node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

packages/twenty-apps/internal/self-hosting/vitest.config.ts

@@ -0,0 +1,24 @@
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  plugins: [
+    tsconfigPaths({
+      projects: ['tsconfig.spec.json'],
+      ignoreConfigErrors: true,
+    }),
+  ],
+  test: {
+    testTimeout: 120_000,
+    hookTimeout: 120_000,
+    include: ['src/**/*.integration-test.ts'],
+    setupFiles: ['src/__tests__/setup-test.ts'],
+    env: {
+      TWENTY_API_URL: process.env.TWENTY_API_URL ?? 'http://localhost:2020',
+      TWENTY_API_KEY:
+        process.env.TWENTY_API_KEY ??
+        // Tim Apple (admin) access token for twenty-app-dev
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIyMDIwMjAyMC05ZTNiLTQ2ZDQtYTU1Ni04OGI5ZGRjMmIwMzQiLCJ1c2VySWQiOiIyMDIwMjAyMC05ZTNiLTQ2ZDQtYTU1Ni04OGI5ZGRjMmIwMzQiLCJ3b3Jrc3BhY2VJZCI6IjIwMjAyMDIwLTFjMjUtNGQwMi1iZjI1LTZhZWNjZjdlYTQxOSIsIndvcmtzcGFjZU1lbWJlcklkIjoiMjAyMDIwMjAtMDY4Ny00YzQxLWI3MDctZWQxYmZjYTk3MmE3IiwidXNlcldvcmtzcGFjZUlkIjoiMjAyMDIwMjAtOWUzYi00NmQ0LWE1NTYtODhiOWRkYzJiMDM1IiwidHlwZSI6IkFDQ0VTUyIsImF1dGhQcm92aWRlciI6InBhc3N3b3JkIiwiaWF0IjoxNzUxMjgxNzA0LCJleHAiOjQ5MDQ4ODE3MDR9.9S4wc0MOr5iczsomlFxZdOHD1IRDS4dnRSwNVNpctF4',
+    },
+  },
+});

packages/twenty-client-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty-client-sdk",
-  "version": "1.22.0-canary.6",
+  "version": "1.22.0",
   "sideEffects": false,
   "license": "AGPL-3.0",
   "scripts": {

packages/twenty-client-sdk/src/metadata/generated/schema.graphql

@@ -735,6 +735,7 @@ enum ViewType {
   KANBAN
   CALENDAR
   FIELDS_WIDGET
+  TABLE_WIDGET
 }
 
 enum ViewKey {
@@ -792,7 +793,6 @@ type Workspace {
   isCustomDomainEnabled: Boolean!
   editableProfileFields: [String!]
   defaultRole: Role
-  version: String
   fastModel: String!
   smartModel: String!
   aiAdditionalInstructions: String
@@ -1258,6 +1258,7 @@ enum PageLayoutType {
   RECORD_INDEX
   RECORD_PAGE
   DASHBOARD
+  STANDALONE_PAGE
 }
 
 type Analytics {
@@ -1265,6 +1266,37 @@ type Analytics {
   success: Boolean!
 }
 
+type ApprovedAccessDomain {
+  id: UUID!
+  domain: String!
+  isValidated: Boolean!
+  createdAt: DateTime!
+}
+
+type FileWithSignedUrl {
+  id: UUID!
+  path: String!
+  size: Float!
+  createdAt: DateTime!
+  url: String!
+}
+
+type EnterpriseLicenseInfoDTO {
+  isValid: Boolean!
+  licensee: String
+  expiresAt: DateTime
+  subscriptionId: String
+}
+
+type EnterpriseSubscriptionStatusDTO {
+  status: String!
+  licensee: String
+  expiresAt: DateTime
+  cancelAt: DateTime
+  currentPeriodEnd: DateTime
+  isCancellationScheduled: Boolean!
+}
+
 type BillingSubscriptionSchedulePhaseItem {
   price: String!
   quantity: Float
@@ -1418,42 +1450,11 @@ type BillingUpdate {
   billingSubscriptions: [BillingSubscription!]!
 }
 
-type EnterpriseLicenseInfoDTO {
-  isValid: Boolean!
-  licensee: String
-  expiresAt: DateTime
-  subscriptionId: String
-}
-
-type EnterpriseSubscriptionStatusDTO {
-  status: String!
-  licensee: String
-  expiresAt: DateTime
-  cancelAt: DateTime
-  currentPeriodEnd: DateTime
-  isCancellationScheduled: Boolean!
-}
-
 type OnboardingStepSuccess {
   """Boolean that confirms query was dispatched"""
   success: Boolean!
 }
 
-type ApprovedAccessDomain {
-  id: UUID!
-  domain: String!
-  isValidated: Boolean!
-  createdAt: DateTime!
-}
-
-type FileWithSignedUrl {
-  id: UUID!
-  path: String!
-  size: Float!
-  createdAt: DateTime!
-  url: String!
-}
-
 type WorkspaceInvitation {
   id: UUID!
   email: String!
@@ -1486,6 +1487,7 @@ type NavigationMenuItem {
   icon: String
   color: String
   folderId: UUID
+  pageLayoutId: UUID
   position: Float!
   applicationId: UUID
   createdAt: DateTime!
@@ -1499,6 +1501,7 @@ enum NavigationMenuItemType {
   LINK
   OBJECT
   RECORD
+  PAGE_LAYOUT
 }
 
 type ObjectRecordEventProperties {
@@ -1729,6 +1732,12 @@ type PublicWorkspaceData {
   workspaceUrls: WorkspaceUrls!
 }
 
+type PublicWorkspaceDataSummary {
+  id: UUID!
+  logo: String
+  displayName: String
+}
+
 type NativeModelCapabilities {
   webSearch: Boolean
   twitterSearch: Boolean
@@ -2584,6 +2593,7 @@ type Location {
 }
 
 type PlaceDetailsResult {
+  street: String
   state: String
   postcode: String
   city: String
@@ -2641,6 +2651,7 @@ type CommandMenuItem {
   hotKeys: [String!]
   conditionalAvailabilityExpression: String
   availabilityObjectMetadataId: UUID
+  pageLayoutId: UUID
   applicationId: UUID
   createdAt: DateTime!
   updatedAt: DateTime!
@@ -2717,6 +2728,7 @@ enum EngineComponentKey {
 
 enum CommandMenuItemAvailabilityType {
   GLOBAL
+  GLOBAL_OBJECT_CONTEXT
   RECORD_SELECTION
   FALLBACK
 }
@@ -3339,6 +3351,7 @@ type Query {
   currentUser: User!
   currentWorkspace: Workspace!
   getPublicWorkspaceDataByDomain(origin: String): PublicWorkspaceData!
+  getPublicWorkspaceDataById(id: UUID!): PublicWorkspaceDataSummary!
   getSSOIdentityProviders: [FindAvailableSSOIDP!]!
   getConnectedImapSmtpCaldavAccount(id: UUID!): ConnectedImapSmtpCaldavAccount!
   getAutoCompleteAddress(address: String!, token: String!, country: String, isFieldCity: Boolean): [AutocompleteResult!]!
@@ -3363,6 +3376,7 @@ type Query {
   workspaceLookupAdminPanel(workspaceId: UUID!): UserLookup!
   getAdminWorkspaceChatThreads(workspaceId: UUID!): [AdminWorkspaceChatThread!]!
   getAdminChatThreadMessages(threadId: UUID!): AdminChatThreadMessages!
+  findOneAdminApplicationRegistration(id: String!): ApplicationRegistration!
   getUsageAnalytics(input: UsageAnalyticsInput): UsageAnalytics!
   getPostgresCredentials: PostgresCredentials
   findManyPublicDomains: [PublicDomain!]!
@@ -3569,6 +3583,7 @@ type Mutation {
   updatePageLayout(id: String!, input: UpdatePageLayoutInput!): PageLayout!
   destroyPageLayout(id: String!): Boolean!
   updatePageLayoutWithTabsAndWidgets(id: String!, input: UpdatePageLayoutWithTabsInput!): PageLayout!
+  resetPageLayoutToDefault(id: String!): PageLayout!
   resetPageLayoutWidgetToDefault(id: String!): PageLayoutWidget!
   resetPageLayoutTabToDefault(id: String!): PageLayoutTab!
   createPageLayoutWidget(input: CreatePageLayoutWidgetInput!): PageLayoutWidget!
@@ -3660,6 +3675,7 @@ type Mutation {
   verifyTwoFactorAuthenticationMethodForAuthenticatedUser(otp: String!): VerifyTwoFactorAuthenticationMethod!
   deleteUser: User!
   deleteUserFromWorkspace(workspaceMemberIdToDelete: String!): UserWorkspace!
+  updateWorkspaceMemberSettings(input: UpdateWorkspaceMemberSettingsInput!): Boolean!
   updateUserEmail(newEmail: String!, verifyEmailRedirectPath: String): Boolean!
   resendEmailVerificationToken(email: String!, origin: String!): ResendEmailVerificationToken!
   activateWorkspace(data: ActivateWorkspaceInput!): Workspace!
@@ -3738,6 +3754,7 @@ input CreateNavigationMenuItemInput {
   icon: String
   color: String
   folderId: UUID
+  pageLayoutId: UUID
   position: Float
 }
 
@@ -3756,6 +3773,7 @@ input UpdateNavigationMenuItemInput {
   link: String
   icon: String
   color: String
+  pageLayoutId: UUID
 }
 
 """The `Upload` scalar type represents a file upload."""
@@ -4166,6 +4184,7 @@ input CreateCommandMenuItemInput {
   conditionalAvailabilityExpression: String
   availabilityObjectMetadataId: UUID
   payload: JSON
+  pageLayoutId: UUID
 }
 
 input UpdateCommandMenuItemInput {
@@ -4179,6 +4198,7 @@ input UpdateCommandMenuItemInput {
   availabilityObjectMetadataId: UUID
   engineComponentKey: EngineComponentKey
   hotKeys: [String!]
+  pageLayoutId: UUID
 }
 
 input CreateFrontComponentInput {
@@ -4589,9 +4609,15 @@ input UpdateApplicationRegistrationVariableInput {
 
 input UpdateApplicationRegistrationVariablePayload {
   value: String
+  resetValue: Boolean
   description: String
 }
 
+input UpdateWorkspaceMemberSettingsInput {
+  workspaceMemberId: UUID!
+  update: JSON!
+}
+
 input ActivateWorkspaceInput {
   displayName: String
 }

packages/twenty-client-sdk/src/metadata/generated/schema.ts

@@ -534,7 +534,7 @@ export interface View {
     __typename: 'View'
 }
 
-export type ViewType = 'TABLE' | 'KANBAN' | 'CALENDAR' | 'FIELDS_WIDGET'
+export type ViewType = 'TABLE' | 'KANBAN' | 'CALENDAR' | 'FIELDS_WIDGET' | 'TABLE_WIDGET'
 
 export type ViewKey = 'INDEX'
 
@@ -579,7 +579,6 @@ export interface Workspace {
     isCustomDomainEnabled: Scalars['Boolean']
     editableProfileFields?: Scalars['String'][]
     defaultRole?: Role
-    version?: Scalars['String']
     fastModel: Scalars['String']
     smartModel: Scalars['String']
     aiAdditionalInstructions?: Scalars['String']
@@ -982,7 +981,7 @@ export interface PageLayout {
     __typename: 'PageLayout'
 }
 
-export type PageLayoutType = 'RECORD_INDEX' | 'RECORD_PAGE' | 'DASHBOARD'
+export type PageLayoutType = 'RECORD_INDEX' | 'RECORD_PAGE' | 'DASHBOARD' | 'STANDALONE_PAGE'
 
 export interface Analytics {
     /** Boolean that confirms query was dispatched */
@@ -990,6 +989,41 @@ export interface Analytics {
     __typename: 'Analytics'
 }
 
+export interface ApprovedAccessDomain {
+    id: Scalars['UUID']
+    domain: Scalars['String']
+    isValidated: Scalars['Boolean']
+    createdAt: Scalars['DateTime']
+    __typename: 'ApprovedAccessDomain'
+}
+
+export interface FileWithSignedUrl {
+    id: Scalars['UUID']
+    path: Scalars['String']
+    size: Scalars['Float']
+    createdAt: Scalars['DateTime']
+    url: Scalars['String']
+    __typename: 'FileWithSignedUrl'
+}
+
+export interface EnterpriseLicenseInfoDTO {
+    isValid: Scalars['Boolean']
+    licensee?: Scalars['String']
+    expiresAt?: Scalars['DateTime']
+    subscriptionId?: Scalars['String']
+    __typename: 'EnterpriseLicenseInfoDTO'
+}
+
+export interface EnterpriseSubscriptionStatusDTO {
+    status: Scalars['String']
+    licensee?: Scalars['String']
+    expiresAt?: Scalars['DateTime']
+    cancelAt?: Scalars['DateTime']
+    currentPeriodEnd?: Scalars['DateTime']
+    isCancellationScheduled: Scalars['Boolean']
+    __typename: 'EnterpriseSubscriptionStatusDTO'
+}
+
 export interface BillingSubscriptionSchedulePhaseItem {
     price: Scalars['String']
     quantity?: Scalars['Float']
@@ -1135,47 +1169,12 @@ export interface BillingUpdate {
     __typename: 'BillingUpdate'
 }
 
-export interface EnterpriseLicenseInfoDTO {
-    isValid: Scalars['Boolean']
-    licensee?: Scalars['String']
-    expiresAt?: Scalars['DateTime']
-    subscriptionId?: Scalars['String']
-    __typename: 'EnterpriseLicenseInfoDTO'
-}
-
-export interface EnterpriseSubscriptionStatusDTO {
-    status: Scalars['String']
-    licensee?: Scalars['String']
-    expiresAt?: Scalars['DateTime']
-    cancelAt?: Scalars['DateTime']
-    currentPeriodEnd?: Scalars['DateTime']
-    isCancellationScheduled: Scalars['Boolean']
-    __typename: 'EnterpriseSubscriptionStatusDTO'
-}
-
 export interface OnboardingStepSuccess {
     /** Boolean that confirms query was dispatched */
     success: Scalars['Boolean']
     __typename: 'OnboardingStepSuccess'
 }
 
-export interface ApprovedAccessDomain {
-    id: Scalars['UUID']
-    domain: Scalars['String']
-    isValidated: Scalars['Boolean']
-    createdAt: Scalars['DateTime']
-    __typename: 'ApprovedAccessDomain'
-}
-
-export interface FileWithSignedUrl {
-    id: Scalars['UUID']
-    path: Scalars['String']
-    size: Scalars['Float']
-    createdAt: Scalars['DateTime']
-    url: Scalars['String']
-    __typename: 'FileWithSignedUrl'
-}
-
 export interface WorkspaceInvitation {
     id: Scalars['UUID']
     email: Scalars['String']
@@ -1211,6 +1210,7 @@ export interface NavigationMenuItem {
     icon?: Scalars['String']
     color?: Scalars['String']
     folderId?: Scalars['UUID']
+    pageLayoutId?: Scalars['UUID']
     position: Scalars['Float']
     applicationId?: Scalars['UUID']
     createdAt: Scalars['DateTime']
@@ -1219,7 +1219,7 @@ export interface NavigationMenuItem {
     __typename: 'NavigationMenuItem'
 }
 
-export type NavigationMenuItemType = 'VIEW' | 'FOLDER' | 'LINK' | 'OBJECT' | 'RECORD'
+export type NavigationMenuItemType = 'VIEW' | 'FOLDER' | 'LINK' | 'OBJECT' | 'RECORD' | 'PAGE_LAYOUT'
 
 export interface ObjectRecordEventProperties {
     updatedFields?: Scalars['String'][]
@@ -1430,6 +1430,13 @@ export interface PublicWorkspaceData {
     __typename: 'PublicWorkspaceData'
 }
 
+export interface PublicWorkspaceDataSummary {
+    id: Scalars['UUID']
+    logo?: Scalars['String']
+    displayName?: Scalars['String']
+    __typename: 'PublicWorkspaceDataSummary'
+}
+
 export interface NativeModelCapabilities {
     webSearch?: Scalars['Boolean']
     twitterSearch?: Scalars['Boolean']
@@ -2297,6 +2304,7 @@ export interface Location {
 }
 
 export interface PlaceDetailsResult {
+    street?: Scalars['String']
     state?: Scalars['String']
     postcode?: Scalars['String']
     city?: Scalars['String']
@@ -2360,6 +2368,7 @@ export interface CommandMenuItem {
     hotKeys?: Scalars['String'][]
     conditionalAvailabilityExpression?: Scalars['String']
     availabilityObjectMetadataId?: Scalars['UUID']
+    pageLayoutId?: Scalars['UUID']
     applicationId?: Scalars['UUID']
     createdAt: Scalars['DateTime']
     updatedAt: Scalars['DateTime']
@@ -2368,7 +2377,7 @@ export interface CommandMenuItem {
 
 export type EngineComponentKey = 'NAVIGATE_TO_NEXT_RECORD' | 'NAVIGATE_TO_PREVIOUS_RECORD' | 'CREATE_NEW_RECORD' | 'DELETE_RECORDS' | 'RESTORE_RECORDS' | 'DESTROY_RECORDS' | 'ADD_TO_FAVORITES' | 'REMOVE_FROM_FAVORITES' | 'EXPORT_NOTE_TO_PDF' | 'EXPORT_RECORDS' | 'UPDATE_MULTIPLE_RECORDS' | 'MERGE_MULTIPLE_RECORDS' | 'IMPORT_RECORDS' | 'EXPORT_VIEW' | 'SEE_DELETED_RECORDS' | 'CREATE_NEW_VIEW' | 'HIDE_DELETED_RECORDS' | 'EDIT_RECORD_PAGE_LAYOUT' | 'EDIT_DASHBOARD_LAYOUT' | 'SAVE_DASHBOARD_LAYOUT' | 'CANCEL_DASHBOARD_LAYOUT' | 'DUPLICATE_DASHBOARD' | 'ACTIVATE_WORKFLOW' | 'DEACTIVATE_WORKFLOW' | 'DISCARD_DRAFT_WORKFLOW' | 'TEST_WORKFLOW' | 'SEE_ACTIVE_VERSION_WORKFLOW' | 'SEE_RUNS_WORKFLOW' | 'SEE_VERSIONS_WORKFLOW' | 'ADD_NODE_WORKFLOW' | 'TIDY_UP_WORKFLOW' | 'DUPLICATE_WORKFLOW' | 'SEE_VERSION_WORKFLOW_RUN' | 'SEE_WORKFLOW_WORKFLOW_RUN' | 'STOP_WORKFLOW_RUN' | 'SEE_RUNS_WORKFLOW_VERSION' | 'SEE_WORKFLOW_WORKFLOW_VERSION' | 'USE_AS_DRAFT_WORKFLOW_VERSION' | 'SEE_VERSIONS_WORKFLOW_VERSION' | 'SEARCH_RECORDS' | 'SEARCH_RECORDS_FALLBACK' | 'ASK_AI' | 'VIEW_PREVIOUS_AI_CHATS' | 'NAVIGATION' | 'TRIGGER_WORKFLOW_VERSION' | 'FRONT_COMPONENT_RENDERER' | 'REPLY_TO_EMAIL_THREAD' | 'COMPOSE_EMAIL' | 'GO_TO_PEOPLE' | 'GO_TO_COMPANIES' | 'GO_TO_DASHBOARDS' | 'GO_TO_OPPORTUNITIES' | 'GO_TO_SETTINGS' | 'GO_TO_TASKS' | 'GO_TO_NOTES' | 'GO_TO_WORKFLOWS' | 'GO_TO_RUNS' | 'DELETE_SINGLE_RECORD' | 'DELETE_MULTIPLE_RECORDS' | 'RESTORE_SINGLE_RECORD' | 'RESTORE_MULTIPLE_RECORDS' | 'DESTROY_SINGLE_RECORD' | 'DESTROY_MULTIPLE_RECORDS' | 'EXPORT_FROM_RECORD_INDEX' | 'EXPORT_FROM_RECORD_SHOW' | 'EXPORT_MULTIPLE_RECORDS'
 
-export type CommandMenuItemAvailabilityType = 'GLOBAL' | 'RECORD_SELECTION' | 'FALLBACK'
+export type CommandMenuItemAvailabilityType = 'GLOBAL' | 'GLOBAL_OBJECT_CONTEXT' | 'RECORD_SELECTION' | 'FALLBACK'
 
 export type CommandMenuItemPayload = (PathCommandMenuItemPayload | ObjectMetadataCommandMenuItemPayload) & { __isUnion?: true }
 
@@ -2904,6 +2913,7 @@ export interface Query {
     currentUser: User
     currentWorkspace: Workspace
     getPublicWorkspaceDataByDomain: PublicWorkspaceData
+    getPublicWorkspaceDataById: PublicWorkspaceDataSummary
     getSSOIdentityProviders: FindAvailableSSOIDP[]
     getConnectedImapSmtpCaldavAccount: ConnectedImapSmtpCaldavAccount
     getAutoCompleteAddress: AutocompleteResult[]
@@ -2928,6 +2938,7 @@ export interface Query {
     workspaceLookupAdminPanel: UserLookup
     getAdminWorkspaceChatThreads: AdminWorkspaceChatThread[]
     getAdminChatThreadMessages: AdminChatThreadMessages
+    findOneAdminApplicationRegistration: ApplicationRegistration
     getUsageAnalytics: UsageAnalytics
     getPostgresCredentials?: PostgresCredentials
     findManyPublicDomains: PublicDomain[]
@@ -3027,6 +3038,7 @@ export interface Mutation {
     updatePageLayout: PageLayout
     destroyPageLayout: Scalars['Boolean']
     updatePageLayoutWithTabsAndWidgets: PageLayout
+    resetPageLayoutToDefault: PageLayout
     resetPageLayoutWidgetToDefault: PageLayoutWidget
     resetPageLayoutTabToDefault: PageLayoutTab
     createPageLayoutWidget: PageLayoutWidget
@@ -3118,6 +3130,7 @@ export interface Mutation {
     verifyTwoFactorAuthenticationMethodForAuthenticatedUser: VerifyTwoFactorAuthenticationMethod
     deleteUser: User
     deleteUserFromWorkspace: UserWorkspace
+    updateWorkspaceMemberSettings: Scalars['Boolean']
     updateUserEmail: Scalars['Boolean']
     resendEmailVerificationToken: ResendEmailVerificationToken
     activateWorkspace: Workspace
@@ -3788,7 +3801,6 @@ export interface WorkspaceGenqlSelection{
     isCustomDomainEnabled?: boolean | number
     editableProfileFields?: boolean | number
     defaultRole?: RoleGenqlSelection
-    version?: boolean | number
     fastModel?: boolean | number
     smartModel?: boolean | number
     aiAdditionalInstructions?: boolean | number
@@ -4227,6 +4239,45 @@ export interface AnalyticsGenqlSelection{
     __scalar?: boolean | number
 }
 
+export interface ApprovedAccessDomainGenqlSelection{
+    id?: boolean | number
+    domain?: boolean | number
+    isValidated?: boolean | number
+    createdAt?: boolean | number
+    __typename?: boolean | number
+    __scalar?: boolean | number
+}
+
+export interface FileWithSignedUrlGenqlSelection{
+    id?: boolean | number
+    path?: boolean | number
+    size?: boolean | number
+    createdAt?: boolean | number
+    url?: boolean | number
+    __typename?: boolean | number
+    __scalar?: boolean | number
+}
+
+export interface EnterpriseLicenseInfoDTOGenqlSelection{
+    isValid?: boolean | number
+    licensee?: boolean | number
+    expiresAt?: boolean | number
+    subscriptionId?: boolean | number
+    __typename?: boolean | number
+    __scalar?: boolean | number
+}
+
+export interface EnterpriseSubscriptionStatusDTOGenqlSelection{
+    status?: boolean | number
+    licensee?: boolean | number
+    expiresAt?: boolean | number
+    cancelAt?: boolean | number
+    currentPeriodEnd?: boolean | number
+    isCancellationScheduled?: boolean | number
+    __typename?: boolean | number
+    __scalar?: boolean | number
+}
+
 export interface BillingSubscriptionSchedulePhaseItemGenqlSelection{
     price?: boolean | number
     quantity?: boolean | number
@@ -4374,26 +4425,6 @@ export interface BillingUpdateGenqlSelection{
     __scalar?: boolean | number
 }
 
-export interface EnterpriseLicenseInfoDTOGenqlSelection{
-    isValid?: boolean | number
-    licensee?: boolean | number
-    expiresAt?: boolean | number
-    subscriptionId?: boolean | number
-    __typename?: boolean | number
-    __scalar?: boolean | number
-}
-
-export interface EnterpriseSubscriptionStatusDTOGenqlSelection{
-    status?: boolean | number
-    licensee?: boolean | number
-    expiresAt?: boolean | number
-    cancelAt?: boolean | number
-    currentPeriodEnd?: boolean | number
-    isCancellationScheduled?: boolean | number
-    __typename?: boolean | number
-    __scalar?: boolean | number
-}
-
 export interface OnboardingStepSuccessGenqlSelection{
     /** Boolean that confirms query was dispatched */
     success?: boolean | number
@@ -4401,25 +4432,6 @@ export interface OnboardingStepSuccessGenqlSelection{
     __scalar?: boolean | number
 }
 
-export interface ApprovedAccessDomainGenqlSelection{
-    id?: boolean | number
-    domain?: boolean | number
-    isValidated?: boolean | number
-    createdAt?: boolean | number
-    __typename?: boolean | number
-    __scalar?: boolean | number
-}
-
-export interface FileWithSignedUrlGenqlSelection{
-    id?: boolean | number
-    path?: boolean | number
-    size?: boolean | number
-    createdAt?: boolean | number
-    url?: boolean | number
-    __typename?: boolean | number
-    __scalar?: boolean | number
-}
-
 export interface WorkspaceInvitationGenqlSelection{
     id?: boolean | number
     email?: boolean | number
@@ -4458,6 +4470,7 @@ export interface NavigationMenuItemGenqlSelection{
     icon?: boolean | number
     color?: boolean | number
     folderId?: boolean | number
+    pageLayoutId?: boolean | number
     position?: boolean | number
     applicationId?: boolean | number
     createdAt?: boolean | number
@@ -4676,6 +4689,14 @@ export interface PublicWorkspaceDataGenqlSelection{
     __scalar?: boolean | number
 }
 
+export interface PublicWorkspaceDataSummaryGenqlSelection{
+    id?: boolean | number
+    logo?: boolean | number
+    displayName?: boolean | number
+    __typename?: boolean | number
+    __scalar?: boolean | number
+}
+
 export interface NativeModelCapabilitiesGenqlSelection{
     webSearch?: boolean | number
     twitterSearch?: boolean | number
@@ -5616,6 +5637,7 @@ export interface LocationGenqlSelection{
 }
 
 export interface PlaceDetailsResultGenqlSelection{
+    street?: boolean | number
     state?: boolean | number
     postcode?: boolean | number
     city?: boolean | number
@@ -5685,6 +5707,7 @@ export interface CommandMenuItemGenqlSelection{
     hotKeys?: boolean | number
     conditionalAvailabilityExpression?: boolean | number
     availabilityObjectMetadataId?: boolean | number
+    pageLayoutId?: boolean | number
     applicationId?: boolean | number
     createdAt?: boolean | number
     updatedAt?: boolean | number
@@ -6269,6 +6292,7 @@ export interface QueryGenqlSelection{
     currentUser?: UserGenqlSelection
     currentWorkspace?: WorkspaceGenqlSelection
     getPublicWorkspaceDataByDomain?: (PublicWorkspaceDataGenqlSelection & { __args?: {origin?: (Scalars['String'] | null)} })
+    getPublicWorkspaceDataById?: (PublicWorkspaceDataSummaryGenqlSelection & { __args: {id: Scalars['UUID']} })
     getSSOIdentityProviders?: FindAvailableSSOIDPGenqlSelection
     getConnectedImapSmtpCaldavAccount?: (ConnectedImapSmtpCaldavAccountGenqlSelection & { __args: {id: Scalars['UUID']} })
     getAutoCompleteAddress?: (AutocompleteResultGenqlSelection & { __args: {address: Scalars['String'], token: Scalars['String'], country?: (Scalars['String'] | null), isFieldCity?: (Scalars['Boolean'] | null)} })
@@ -6293,6 +6317,7 @@ export interface QueryGenqlSelection{
     workspaceLookupAdminPanel?: (UserLookupGenqlSelection & { __args: {workspaceId: Scalars['UUID']} })
     getAdminWorkspaceChatThreads?: (AdminWorkspaceChatThreadGenqlSelection & { __args: {workspaceId: Scalars['UUID']} })
     getAdminChatThreadMessages?: (AdminChatThreadMessagesGenqlSelection & { __args: {threadId: Scalars['UUID']} })
+    findOneAdminApplicationRegistration?: (ApplicationRegistrationGenqlSelection & { __args: {id: Scalars['String']} })
     getUsageAnalytics?: (UsageAnalyticsGenqlSelection & { __args?: {input?: (UsageAnalyticsInput | null)} })
     getPostgresCredentials?: PostgresCredentialsGenqlSelection
     findManyPublicDomains?: PublicDomainGenqlSelection
@@ -6411,6 +6436,7 @@ export interface MutationGenqlSelection{
     updatePageLayout?: (PageLayoutGenqlSelection & { __args: {id: Scalars['String'], input: UpdatePageLayoutInput} })
     destroyPageLayout?: { __args: {id: Scalars['String']} }
     updatePageLayoutWithTabsAndWidgets?: (PageLayoutGenqlSelection & { __args: {id: Scalars['String'], input: UpdatePageLayoutWithTabsInput} })
+    resetPageLayoutToDefault?: (PageLayoutGenqlSelection & { __args: {id: Scalars['String']} })
     resetPageLayoutWidgetToDefault?: (PageLayoutWidgetGenqlSelection & { __args: {id: Scalars['String']} })
     resetPageLayoutTabToDefault?: (PageLayoutTabGenqlSelection & { __args: {id: Scalars['String']} })
     createPageLayoutWidget?: (PageLayoutWidgetGenqlSelection & { __args: {input: CreatePageLayoutWidgetInput} })
@@ -6502,6 +6528,7 @@ export interface MutationGenqlSelection{
     verifyTwoFactorAuthenticationMethodForAuthenticatedUser?: (VerifyTwoFactorAuthenticationMethodGenqlSelection & { __args: {otp: Scalars['String']} })
     deleteUser?: UserGenqlSelection
     deleteUserFromWorkspace?: (UserWorkspaceGenqlSelection & { __args: {workspaceMemberIdToDelete: Scalars['String']} })
+    updateWorkspaceMemberSettings?: { __args: {input: UpdateWorkspaceMemberSettingsInput} }
     updateUserEmail?: { __args: {newEmail: Scalars['String'], verifyEmailRedirectPath?: (Scalars['String'] | null)} }
     resendEmailVerificationToken?: (ResendEmailVerificationTokenGenqlSelection & { __args: {email: Scalars['String'], origin: Scalars['String']} })
     activateWorkspace?: (WorkspaceGenqlSelection & { __args: {data: ActivateWorkspaceInput} })
@@ -6563,7 +6590,7 @@ export interface AddQuerySubscriptionInput {eventStreamId: Scalars['String'],que
 
 export interface RemoveQueryFromEventStreamInput {eventStreamId: Scalars['String'],queryId: Scalars['String']}
 
-export interface CreateNavigationMenuItemInput {id?: (Scalars['UUID'] | null),userWorkspaceId?: (Scalars['UUID'] | null),targetRecordId?: (Scalars['UUID'] | null),targetObjectMetadataId?: (Scalars['UUID'] | null),viewId?: (Scalars['UUID'] | null),type: NavigationMenuItemType,name?: (Scalars['String'] | null),link?: (Scalars['String'] | null),icon?: (Scalars['String'] | null),color?: (Scalars['String'] | null),folderId?: (Scalars['UUID'] | null),position?: (Scalars['Float'] | null)}
+export interface CreateNavigationMenuItemInput {id?: (Scalars['UUID'] | null),userWorkspaceId?: (Scalars['UUID'] | null),targetRecordId?: (Scalars['UUID'] | null),targetObjectMetadataId?: (Scalars['UUID'] | null),viewId?: (Scalars['UUID'] | null),type: NavigationMenuItemType,name?: (Scalars['String'] | null),link?: (Scalars['String'] | null),icon?: (Scalars['String'] | null),color?: (Scalars['String'] | null),folderId?: (Scalars['UUID'] | null),pageLayoutId?: (Scalars['UUID'] | null),position?: (Scalars['Float'] | null)}
 
 export interface UpdateOneNavigationMenuItemInput {
 /** The id of the record to update */
@@ -6571,7 +6598,7 @@ id: Scalars['UUID'],
 /** The record to update */
 update: UpdateNavigationMenuItemInput}
 
-export interface UpdateNavigationMenuItemInput {folderId?: (Scalars['UUID'] | null),position?: (Scalars['Float'] | null),name?: (Scalars['String'] | null),link?: (Scalars['String'] | null),icon?: (Scalars['String'] | null),color?: (Scalars['String'] | null)}
+export interface UpdateNavigationMenuItemInput {folderId?: (Scalars['UUID'] | null),position?: (Scalars['Float'] | null),name?: (Scalars['String'] | null),link?: (Scalars['String'] | null),icon?: (Scalars['String'] | null),color?: (Scalars['String'] | null),pageLayoutId?: (Scalars['UUID'] | null)}
 
 export interface CreateViewFilterGroupInput {id?: (Scalars['UUID'] | null),parentViewFilterGroupId?: (Scalars['UUID'] | null),logicalOperator?: (ViewFilterGroupLogicalOperator | null),positionInViewFilterGroup?: (Scalars['Float'] | null),viewId: Scalars['UUID']}
 
@@ -6717,9 +6744,9 @@ update: UpdateLogicFunctionFromSourceInputUpdates}
 
 export interface UpdateLogicFunctionFromSourceInputUpdates {name?: (Scalars['String'] | null),description?: (Scalars['String'] | null),timeoutSeconds?: (Scalars['Float'] | null),sourceHandlerCode?: (Scalars['String'] | null),toolInputSchema?: (Scalars['JSON'] | null),handlerName?: (Scalars['String'] | null),sourceHandlerPath?: (Scalars['String'] | null),isTool?: (Scalars['Boolean'] | null),cronTriggerSettings?: (Scalars['JSON'] | null),databaseEventTriggerSettings?: (Scalars['JSON'] | null),httpRouteTriggerSettings?: (Scalars['JSON'] | null)}
 
-export interface CreateCommandMenuItemInput {workflowVersionId?: (Scalars['UUID'] | null),frontComponentId?: (Scalars['UUID'] | null),engineComponentKey: EngineComponentKey,label: Scalars['String'],icon?: (Scalars['String'] | null),shortLabel?: (Scalars['String'] | null),position?: (Scalars['Float'] | null),isPinned?: (Scalars['Boolean'] | null),availabilityType?: (CommandMenuItemAvailabilityType | null),hotKeys?: (Scalars['String'][] | null),conditionalAvailabilityExpression?: (Scalars['String'] | null),availabilityObjectMetadataId?: (Scalars['UUID'] | null),payload?: (Scalars['JSON'] | null)}
+export interface CreateCommandMenuItemInput {workflowVersionId?: (Scalars['UUID'] | null),frontComponentId?: (Scalars['UUID'] | null),engineComponentKey: EngineComponentKey,label: Scalars['String'],icon?: (Scalars['String'] | null),shortLabel?: (Scalars['String'] | null),position?: (Scalars['Float'] | null),isPinned?: (Scalars['Boolean'] | null),availabilityType?: (CommandMenuItemAvailabilityType | null),hotKeys?: (Scalars['String'][] | null),conditionalAvailabilityExpression?: (Scalars['String'] | null),availabilityObjectMetadataId?: (Scalars['UUID'] | null),payload?: (Scalars['JSON'] | null),pageLayoutId?: (Scalars['UUID'] | null)}
 
-export interface UpdateCommandMenuItemInput {id: Scalars['UUID'],label?: (Scalars['String'] | null),icon?: (Scalars['String'] | null),shortLabel?: (Scalars['String'] | null),position?: (Scalars['Float'] | null),isPinned?: (Scalars['Boolean'] | null),availabilityType?: (CommandMenuItemAvailabilityType | null),availabilityObjectMetadataId?: (Scalars['UUID'] | null),engineComponentKey?: (EngineComponentKey | null),hotKeys?: (Scalars['String'][] | null)}
+export interface UpdateCommandMenuItemInput {id: Scalars['UUID'],label?: (Scalars['String'] | null),icon?: (Scalars['String'] | null),shortLabel?: (Scalars['String'] | null),position?: (Scalars['Float'] | null),isPinned?: (Scalars['Boolean'] | null),availabilityType?: (CommandMenuItemAvailabilityType | null),availabilityObjectMetadataId?: (Scalars['UUID'] | null),engineComponentKey?: (EngineComponentKey | null),hotKeys?: (Scalars['String'][] | null),pageLayoutId?: (Scalars['UUID'] | null)}
 
 export interface CreateFrontComponentInput {id?: (Scalars['UUID'] | null),name: Scalars['String'],description?: (Scalars['String'] | null),sourceComponentPath: Scalars['String'],builtComponentPath: Scalars['String'],componentName: Scalars['String'],builtComponentChecksum: Scalars['String']}
 
@@ -6851,7 +6878,9 @@ export interface CreateApplicationRegistrationVariableInput {applicationRegistra
 
 export interface UpdateApplicationRegistrationVariableInput {id: Scalars['String'],update: UpdateApplicationRegistrationVariablePayload}
 
-export interface UpdateApplicationRegistrationVariablePayload {value?: (Scalars['String'] | null),description?: (Scalars['String'] | null)}
+export interface UpdateApplicationRegistrationVariablePayload {value?: (Scalars['String'] | null),resetValue?: (Scalars['Boolean'] | null),description?: (Scalars['String'] | null)}
+
+export interface UpdateWorkspaceMemberSettingsInput {workspaceMemberId: Scalars['UUID'],update: Scalars['JSON']}
 
 export interface ActivateWorkspaceInput {displayName?: (Scalars['String'] | null)}
 
@@ -7464,6 +7493,38 @@ export interface LogicFunctionLogsInput {applicationId?: (Scalars['UUID'] | null
     
 
 
+    const ApprovedAccessDomain_possibleTypes: string[] = ['ApprovedAccessDomain']
+    export const isApprovedAccessDomain = (obj?: { __typename?: any } | null): obj is ApprovedAccessDomain => {
+      if (!obj?.__typename) throw new Error('__typename is missing in "isApprovedAccessDomain"')
+      return ApprovedAccessDomain_possibleTypes.includes(obj.__typename)
+    }
+    
+
+
+    const FileWithSignedUrl_possibleTypes: string[] = ['FileWithSignedUrl']
+    export const isFileWithSignedUrl = (obj?: { __typename?: any } | null): obj is FileWithSignedUrl => {
+      if (!obj?.__typename) throw new Error('__typename is missing in "isFileWithSignedUrl"')
+      return FileWithSignedUrl_possibleTypes.includes(obj.__typename)
+    }
+    
+
+
+    const EnterpriseLicenseInfoDTO_possibleTypes: string[] = ['EnterpriseLicenseInfoDTO']
+    export const isEnterpriseLicenseInfoDTO = (obj?: { __typename?: any } | null): obj is EnterpriseLicenseInfoDTO => {
+      if (!obj?.__typename) throw new Error('__typename is missing in "isEnterpriseLicenseInfoDTO"')
+      return EnterpriseLicenseInfoDTO_possibleTypes.includes(obj.__typename)
+    }
+    
+
+
+    const EnterpriseSubscriptionStatusDTO_possibleTypes: string[] = ['EnterpriseSubscriptionStatusDTO']
+    export const isEnterpriseSubscriptionStatusDTO = (obj?: { __typename?: any } | null): obj is EnterpriseSubscriptionStatusDTO => {
+      if (!obj?.__typename) throw new Error('__typename is missing in "isEnterpriseSubscriptionStatusDTO"')
+      return EnterpriseSubscriptionStatusDTO_possibleTypes.includes(obj.__typename)
+    }
+    
+
+
     const BillingSubscriptionSchedulePhaseItem_possibleTypes: string[] = ['BillingSubscriptionSchedulePhaseItem']
     export const isBillingSubscriptionSchedulePhaseItem = (obj?: { __typename?: any } | null): obj is BillingSubscriptionSchedulePhaseItem => {
       if (!obj?.__typename) throw new Error('__typename is missing in "isBillingSubscriptionSchedulePhaseItem"')
@@ -7592,22 +7653,6 @@ export interface LogicFunctionLogsInput {applicationId?: (Scalars['UUID'] | null
     
 
 
-    const EnterpriseLicenseInfoDTO_possibleTypes: string[] = ['EnterpriseLicenseInfoDTO']
-    export const isEnterpriseLicenseInfoDTO = (obj?: { __typename?: any } | null): obj is EnterpriseLicenseInfoDTO => {
-      if (!obj?.__typename) throw new Error('__typename is missing in "isEnterpriseLicenseInfoDTO"')
-      return EnterpriseLicenseInfoDTO_possibleTypes.includes(obj.__typename)
-    }
-    
-
-
-    const EnterpriseSubscriptionStatusDTO_possibleTypes: string[] = ['EnterpriseSubscriptionStatusDTO']
-    export const isEnterpriseSubscriptionStatusDTO = (obj?: { __typename?: any } | null): obj is EnterpriseSubscriptionStatusDTO => {
-      if (!obj?.__typename) throw new Error('__typename is missing in "isEnterpriseSubscriptionStatusDTO"')
-      return EnterpriseSubscriptionStatusDTO_possibleTypes.includes(obj.__typename)
-    }
-    
-
-
     const OnboardingStepSuccess_possibleTypes: string[] = ['OnboardingStepSuccess']
     export const isOnboardingStepSuccess = (obj?: { __typename?: any } | null): obj is OnboardingStepSuccess => {
       if (!obj?.__typename) throw new Error('__typename is missing in "isOnboardingStepSuccess"')
@@ -7616,22 +7661,6 @@ export interface LogicFunctionLogsInput {applicationId?: (Scalars['UUID'] | null
     
 
 
-    const ApprovedAccessDomain_possibleTypes: string[] = ['ApprovedAccessDomain']
-    export const isApprovedAccessDomain = (obj?: { __typename?: any } | null): obj is ApprovedAccessDomain => {
-      if (!obj?.__typename) throw new Error('__typename is missing in "isApprovedAccessDomain"')
-      return ApprovedAccessDomain_possibleTypes.includes(obj.__typename)
-    }
-    
-
-
-    const FileWithSignedUrl_possibleTypes: string[] = ['FileWithSignedUrl']
-    export const isFileWithSignedUrl = (obj?: { __typename?: any } | null): obj is FileWithSignedUrl => {
-      if (!obj?.__typename) throw new Error('__typename is missing in "isFileWithSignedUrl"')
-      return FileWithSignedUrl_possibleTypes.includes(obj.__typename)
-    }
-    
-
-
     const WorkspaceInvitation_possibleTypes: string[] = ['WorkspaceInvitation']
     export const isWorkspaceInvitation = (obj?: { __typename?: any } | null): obj is WorkspaceInvitation => {
       if (!obj?.__typename) throw new Error('__typename is missing in "isWorkspaceInvitation"')
@@ -7840,6 +7869,14 @@ export interface LogicFunctionLogsInput {applicationId?: (Scalars['UUID'] | null
     
 
 
+    const PublicWorkspaceDataSummary_possibleTypes: string[] = ['PublicWorkspaceDataSummary']
+    export const isPublicWorkspaceDataSummary = (obj?: { __typename?: any } | null): obj is PublicWorkspaceDataSummary => {
+      if (!obj?.__typename) throw new Error('__typename is missing in "isPublicWorkspaceDataSummary"')
+      return PublicWorkspaceDataSummary_possibleTypes.includes(obj.__typename)
+    }
+    
+
+
     const NativeModelCapabilities_possibleTypes: string[] = ['NativeModelCapabilities']
     export const isNativeModelCapabilities = (obj?: { __typename?: any } | null): obj is NativeModelCapabilities => {
       if (!obj?.__typename) throw new Error('__typename is missing in "isNativeModelCapabilities"')
@@ -9257,7 +9294,8 @@ export const enumViewType = {
    TABLE: 'TABLE' as const,
    KANBAN: 'KANBAN' as const,
    CALENDAR: 'CALENDAR' as const,
-   FIELDS_WIDGET: 'FIELDS_WIDGET' as const
+   FIELDS_WIDGET: 'FIELDS_WIDGET' as const,
+   TABLE_WIDGET: 'TABLE_WIDGET' as const
 }
 
 export const enumViewKey = {
@@ -9401,7 +9439,8 @@ export const enumFieldDisplayMode = {
 export const enumPageLayoutType = {
    RECORD_INDEX: 'RECORD_INDEX' as const,
    RECORD_PAGE: 'RECORD_PAGE' as const,
-   DASHBOARD: 'DASHBOARD' as const
+   DASHBOARD: 'DASHBOARD' as const,
+   STANDALONE_PAGE: 'STANDALONE_PAGE' as const
 }
 
 export const enumBillingPlanKey = {
@@ -9440,7 +9479,8 @@ export const enumNavigationMenuItemType = {
    FOLDER: 'FOLDER' as const,
    LINK: 'LINK' as const,
    OBJECT: 'OBJECT' as const,
-   RECORD: 'RECORD' as const
+   RECORD: 'RECORD' as const,
+   PAGE_LAYOUT: 'PAGE_LAYOUT' as const
 }
 
 export const enumMetadataEventAction = {
@@ -9678,6 +9718,7 @@ export const enumEngineComponentKey = {
 
 export const enumCommandMenuItemAvailabilityType = {
    GLOBAL: 'GLOBAL' as const,
+   GLOBAL_OBJECT_CONTEXT: 'GLOBAL_OBJECT_CONTEXT' as const,
    RECORD_SELECTION: 'RECORD_SELECTION' as const,
    FALLBACK: 'FALLBACK' as const
 }

packages/twenty-docs/developers/extend/apps/getting-started.mdx

@@ -220,6 +220,7 @@ The scaffolder already started a local Twenty server for you. To manage it later
 |---------|-------------|
 | `yarn twenty server start` | Start the local server (pulls image if needed) |
 | `yarn twenty server start --port 3030` | Start on a custom port |
+| `yarn twenty server start --test` | Start a separate test instance on port 2021 |
 | `yarn twenty server stop` | Stop the server (preserves data) |
 | `yarn twenty server status` | Show server status, URL, and credentials |
 | `yarn twenty server logs` | Stream server logs |
@@ -228,6 +229,20 @@ The scaffolder already started a local Twenty server for you. To manage it later
 
 Data is persisted across restarts in two Docker volumes (`twenty-app-dev-data` for PostgreSQL, `twenty-app-dev-storage` for files). Use `reset` to wipe everything and start fresh.
 
+### Running a test instance
+
+Pass `--test` to any `server` command to manage a second, fully isolated instance — useful for running integration tests or experimenting without touching your main dev data.
+
+| Command | Description |
+|---------|-------------|
+| `yarn twenty server start --test` | Start the test instance (defaults to port 2021) |
+| `yarn twenty server stop --test` | Stop the test instance |
+| `yarn twenty server status --test` | Show test instance status, URL, and credentials |
+| `yarn twenty server logs --test` | Stream test instance logs |
+| `yarn twenty server reset --test` | Wipe test data and start fresh |
+
+The test instance runs in its own Docker container (`twenty-app-dev-test`) with dedicated volumes (`twenty-app-dev-test-data`, `twenty-app-dev-test-storage`) and config, so it can run in parallel with your main instance without conflicts. Combine `--test` with `--port` to override the default 2021.
+
 <Note>
   The server requires **Docker** to be running. If you see a "Docker not running" error, make sure Docker Desktop (or the Docker daemon) is started.
 </Note>

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

@@ -80,6 +80,57 @@ Pre-release tags work as expected: bumping `1.0.0-rc.1` → `1.0.0-rc.2` is allo
 
 {/* TODO: add screenshot of the Upgrade button */}
 
+## Automated CI/CD (scaffolded workflows)
+
+Apps generated with `create-twenty-app` ship with two GitHub Actions workflows out of the box, under `.github/workflows/`. They are ready to run as soon as you push the repo to GitHub — no extra setup is needed for CI, and CD only requires a single secret.
+
+### CI — `ci.yml`
+
+Runs integration tests on every push to `main` and every pull request.
+
+**What it does:**
+
+1. Checks out your app's source.
+2. Spawns an isolated Twenty test instance using the `twentyhq/twenty/.github/actions/spawn-twenty-app-dev-test@main` composite action (the CI equivalent of `yarn twenty server start --test`).
+3. Enables Corepack, sets up Node.js from your `.nvmrc`, and installs dependencies with `yarn install --immutable`.
+4. Runs `yarn test`, passing `TWENTY_API_URL` and `TWENTY_API_KEY` from the spawned instance so your tests can talk to a real server.
+
+**Config knobs:**
+
+- `TWENTY_VERSION` (env, defaults to `latest`) — pin the Twenty server version used in CI by editing this in `ci.yml`.
+- Concurrency is grouped by `github.ref` and cancels in-progress runs on new pushes.
+
+No secrets are required — the test instance is ephemeral and lives only for the duration of the job.
+
+### CD — `cd.yml`
+
+Deploys your app to a configured Twenty server on every push to `main`, and optionally from a pull request when the `deploy` label is applied.
+
+**What it does:**
+
+1. Checks out the PR head (for labeled PRs) or the pushed commit.
+2. Runs `twentyhq/twenty/.github/actions/deploy-twenty-app@main` — the CI equivalent of `yarn twenty deploy`.
+3. Runs `twentyhq/twenty/.github/actions/install-twenty-app@main` so the newly deployed version is installed into the target workspace.
+
+**Required configuration:**
+
+| Setting | Where | Purpose |
+|---------|-------|---------|
+| `TWENTY_DEPLOY_URL` | `env` in `cd.yml` (defaults to `http://localhost:3000`) | The Twenty server to deploy to. Change this to your real server URL before first use. |
+| `TWENTY_DEPLOY_API_KEY` | GitHub repo **Settings → Secrets and variables → Actions** | API key with deploy permission on the target server. |
+
+<Note>
+The default `TWENTY_DEPLOY_URL` of `http://localhost:3000` is a placeholder — it will not reach anything from a GitHub-hosted runner. Update it to your server's public URL (or use a self-hosted runner with network access) before enabling CD.
+</Note>
+
+**Triggering a preview deploy from a PR:**
+
+Add the `deploy` label to a pull request. The `if:` guard in `cd.yml` will run the job for that PR using the PR's head commit, letting you validate a change on the target server before merging.
+
+### Pinning the reusable actions
+
+Both workflows reference reusable actions at `@main`, so action updates in the `twentyhq/twenty` repo are picked up automatically. If you want deterministic builds, replace `@main` with a commit SHA or release tag on each `uses:` line.
+
 ## Publishing to npm
 
 Publishing to npm makes your app discoverable in the Twenty marketplace. Any Twenty workspace can browse, install, and upgrade marketplace apps directly from the UI.

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

@@ -220,6 +220,7 @@ npx create-twenty-app@latest my-twenty-app --example postcard
 | -------------------------------------- | --------------------------------------------- |
 | `yarn twenty server start`             | بدء الخادم المحلي (يسحب الصورة إذا لزم الأمر) |
 | `yarn twenty server start --port 3030` | ابدأ على منفذ مخصّص                           |
+| `yarn twenty server start --test`      | ابدأ مثيل اختبار منفصل على المنفذ 2021        |
 | `yarn twenty server stop`              | إيقاف الخادم (مع الحفاظ على البيانات)         |
 | `yarn twenty server status`            | عرض حالة الخادم، وعنوان URL، وبيانات الاعتماد |
 | `yarn twenty server logs`              | بث سجلات الخادم                               |
@@ -228,6 +229,20 @@ npx create-twenty-app@latest my-twenty-app --example postcard
 
 يتم الاحتفاظ بالبيانات عبر عمليات إعادة التشغيل في وحدتي تخزين Docker (`twenty-app-dev-data` لـ PostgreSQL، و`twenty-app-dev-storage` للملفات). استخدم `reset` لمسح كل شيء والبدء من جديد.
 
+### تشغيل مثيل الاختبار
+
+مرر `--test` إلى أي أمر `server` لإدارة مثيل ثانٍ معزول تمامًا — مفيد لتشغيل اختبارات التكامل أو للتجربة من دون لمس بيانات التطوير الرئيسية لديك.
+
+| أمر                                | الوصف                                                |
+| ---------------------------------- | ---------------------------------------------------- |
+| `yarn twenty server start --test`  | بدء مثيل الاختبار (المنفذ الافتراضي 2021)            |
+| `yarn twenty server stop --test`   | إيقاف مثيل الاختبار                                  |
+| `yarn twenty server status --test` | عرض حالة مثيل الاختبار، وعنوان URL، وبيانات الاعتماد |
+| `yarn twenty server logs --test`   | بث سجلات مثيل الاختبار                               |
+| `yarn twenty server reset --test`  | محو بيانات الاختبار والبدء من جديد                   |
+
+يعمل مثيل الاختبار في حاوية Docker خاصة به (`twenty-app-dev-test`) مع وحدات تخزين مخصصة (`twenty-app-dev-test-data`, `twenty-app-dev-test-storage`) وتهيئة مستقلة، بحيث يمكنه العمل بالتوازي مع مثيلك الرئيسي من دون تعارضات. اجمع `--test` مع `--port` لتجاوز القيمة الافتراضية 2021.
+
 <Note>
   يتطلّب الخادم أن يكون **Docker** قيد التشغيل. إذا ظهرت لك رسالة خطأ "Docker not running"، فتأكّد من تشغيل Docker Desktop (أو خادوم Docker).
 </Note>

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

@@ -80,6 +80,57 @@ yarn twenty deploy
 
 {/* TODO: add screenshot of the Upgrade button */}
 
+## CI/CD المؤتمتة (مهام سير عمل مُولَّدة بالقوالب)
+
+التطبيقات المُولَّدة باستخدام `create-twenty-app` تأتي افتراضيًا مع مهمَّتي سير عمل من GitHub Actions ضمن `.github/workflows/`. هي جاهزة للتشغيل بمجرد دفع المستودع إلى GitHub — لا حاجة لأي إعداد إضافي لـ CI، وCD يتطلّب سرًّا واحدًا فقط.
+
+### CI — `ci.yml`
+
+يشغّل اختبارات التكامل عند كل دفع إلى `main` وعند كل طلب سحب.
+
+**ماذا يفعل:**
+
+1. يجلب مصدر تطبيقك.
+2. ينشئ مثيلاً اختبارياً معزولاً من Twenty باستخدام الإجراء المركّب `twentyhq/twenty/.github/actions/spawn-twenty-app-dev-test@main` (المكافئ في CI للأمر `yarn twenty server start --test`).
+3. يُفعِّل Corepack، ويُعدّ Node.js من ملف `.nvmrc` لديك، ويثبّت التبعيات بواسطة `yarn install --immutable`.
+4. يشغّل `yarn test`، ويمرّر `TWENTY_API_URL` و`TWENTY_API_KEY` من المثيل الذي تم إنشاؤه بحيث تتمكّن اختباراتك من التواصل مع خادم حقيقي.
+
+**خيارات التكوين:**
+
+* `TWENTY_VERSION` (متغيّر بيئة، القيمة الافتراضية `latest`) — ثبّت نسخة خادم Twenty المستخدمة في CI عبر تعديل هذا في `ci.yml`.
+* يتم تجميع التشغيل المتزامن حسب `github.ref` ويلغي التشغيلات قيد التقدّم عند أي دفع جديد.
+
+لا تتطلّب أي أسرار — مثيل الاختبار مؤقّت ويستمر فقط طوال مدّة المهمّة.
+
+### CD — `cd.yml`
+
+ينشر تطبيقك إلى خادم Twenty مُهيّأ عند كل دفع إلى `main`، وبشكل اختياري من طلب سحب عند تطبيق الوسم `deploy`.
+
+**ماذا يفعل:**
+
+1. يجلب رأس طلب السحب (للطلبات الموسومة) أو الالتزام المدفوع.
+2. يشغّل `twentyhq/twenty/.github/actions/deploy-twenty-app@main` — وهو المكافئ في CI للأمر `yarn twenty deploy`.
+3. يشغّل `twentyhq/twenty/.github/actions/install-twenty-app@main` بحيث تُثبَّت النسخة المُنشَرة حديثًا في مساحة العمل المستهدفة.
+
+**التكوين المطلوب:**
+
+| الإعداد                 | حيث                                                             | الغرض                                                                                    |
+| ----------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| `TWENTY_DEPLOY_URL`     | `env` في `cd.yml` (القيمة الافتراضية `http://localhost:3000`)   | خادم Twenty الذي سيتم النشر إليه. غيّر هذا إلى عنوان URL لخادمك الحقيقي قبل أول استخدام. |
+| `TWENTY_DEPLOY_API_KEY` | في مستودع GitHub **Settings → Secrets and variables → Actions** | مفتاح API يمتلك إذن النشر على الخادم المستهدف.                                           |
+
+<Note>
+القيمة الافتراضية لـ `TWENTY_DEPLOY_URL` وهي `http://localhost:3000` مجرد عنصر نائب — لن تصل إلى أي شيء من مُشغِّل مستضاف لدى GitHub. حدّثها إلى عنوان URL العام لخادمك (أو استخدم مُشغِّلًا مستضافًا ذاتيًا مع وصول شبكي) قبل تمكين CD.
+</Note>
+
+**تشغيل نشر معاينة من طلب سحب:**
+
+أضِف الوسم `deploy` إلى طلب سحب. الشرط `if:` في `cd.yml` سيشغّل المهمّة لذلك الطلب مستخدمًا التزام رأس الطلب، مما يتيح لك التحقّق من التغيير على الخادم المستهدف قبل الدمج.
+
+### تثبيت الإجراءات القابلة لإعادة الاستخدام
+
+يشير كلا سيرَي العمل إلى إجراءات قابلة لإعادة الاستخدام عند `@main`، لذا تُلتقط تحديثات الإجراءات في مستودع `twentyhq/twenty` تلقائيًا. إذا كنت تريد بناءات حتمية، فاستبدِل `@main` بقيمة SHA لالتزام أو بوسم إصدار في كل سطر `uses:`.
+
 ## النشر على npm
 
 يُتيح النشر على npm إمكانية العثور على تطبيقك في سوق Twenty. يمكن لأي مساحة عمل في Twenty استعراض تطبيقات السوق وتثبيتها وترقيتها مباشرةً من واجهة المستخدم.

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

@@ -220,6 +220,7 @@ Nástroj pro vytvoření kostry vám již spustil lokální server Twenty. Pro j
 | -------------------------------------- | ------------------------------------------------------ |
 | `yarn twenty server start`             | Spustí lokální server (v případě potřeby stáhne image) |
 | `yarn twenty server start --port 3030` | Spustí na vlastním portu                               |
+| `yarn twenty server start --test`      | Spusťte samostatnou testovací instanci na portu 2021   |
 | `yarn twenty server stop`              | Zastaví server (zachová data)                          |
 | `yarn twenty server status`            | Zobrazí stav serveru, URL a přihlašovací údaje         |
 | `yarn twenty server logs`              | Streamuje protokoly serveru                            |
@@ -228,6 +229,20 @@ Nástroj pro vytvoření kostry vám již spustil lokální server Twenty. Pro j
 
 Data přetrvávají při restartech ve dvou svazcích Dockeru (`twenty-app-dev-data` pro PostgreSQL, `twenty-app-dev-storage` pro soubory). Pomocí `reset` vymažte vše a začněte znovu.
 
+### Spuštění testovací instance
+
+Předejte volbu `--test` libovolnému příkazu `server` pro správu druhé, plně izolované instance — užitečné pro spouštění integračních testů nebo experimentování, aniž byste se dotkli svých hlavních vývojových dat.
+
+| Příkaz                             | Popis                                                     |
+| ---------------------------------- | --------------------------------------------------------- |
+| `yarn twenty server start --test`  | Spustí testovací instanci (výchozí port je 2021)          |
+| `yarn twenty server stop --test`   | Zastaví testovací instanci                                |
+| `yarn twenty server status --test` | Zobrazí stav testovací instance, URL a přihlašovací údaje |
+| `yarn twenty server logs --test`   | Streamuje protokoly testovací instance                    |
+| `yarn twenty server reset --test`  | Vymaže testovací data a začne znovu                       |
+
+Testovací instance běží ve vlastním kontejneru Docker (`twenty-app-dev-test`) s vyhrazenými svazky (`twenty-app-dev-test-data`, `twenty-app-dev-test-storage`) a konfigurací, takže může běžet paralelně s vaší hlavní instancí bez konfliktů. Zkombinujte `--test` s `--port` pro změnu výchozího portu 2021.
+
 <Note>
   Server vyžaduje, aby **Docker** běžel. Pokud vidíte chybu "Docker not running", ujistěte se, že je spuštěný Docker Desktop (nebo démon Dockeru).
 </Note>

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

@@ -80,6 +80,57 @@ Předběžné tagy fungují podle očekávání: zvýšení z `1.0.0-rc.1` → `
 
 {/* TODO: add screenshot of the Upgrade button */}
 
+## Automatizované CI/CD (předpřipravené workflowy)
+
+Aplikace vygenerované pomocí `create-twenty-app` jsou hned připravené se dvěma workflowy GitHub Actions ve složce `.github/workflows/`. Jsou připravené ke spuštění hned, jakmile repozitář pushnete na GitHub — pro CI není potřeba žádné další nastavení a CD vyžaduje pouze jeden secret.
+
+### CI — `ci.yml`
+
+Automaticky spouští integrační testy při každém pushi do `main` a u pull requestů.
+
+**K čemu slouží:**
+
+1. Provede checkout zdrojového kódu vaší aplikace.
+2. Spustí izolovanou testovací instanci Twenty pomocí složené akce `twentyhq/twenty/.github/actions/spawn-twenty-app-dev-test@main` (ekvivalent v CI k `yarn twenty server start --test`).
+3. Povolí Corepack, nastaví Node.js podle vašeho `.nvmrc` a nainstaluje závislosti pomocí `yarn install --immutable`.
+4. Spustí `yarn test` a předá `TWENTY_API_URL` a `TWENTY_API_KEY` ze spuštěné instance, aby vaše testy mohly komunikovat se skutečným serverem.
+
+**Konfigurační volby:**
+
+* `TWENTY_VERSION` (env, výchozí hodnota `latest`) — uzamkněte v CI používanou verzi serveru Twenty úpravou této hodnoty v `ci.yml`.
+* Souběžné běhy jsou seskupeny podle `github.ref` a při nových pushích ruší právě probíhající běhy.
+
+Nejsou potřeba žádné secrety — testovací instance je efemérní a existuje pouze po dobu běhu úlohy.
+
+### CD — `cd.yml`
+
+Nasazuje vaši aplikaci na nakonfigurovaný server Twenty při každém pushi do `main` a volitelně také z pull requestu, pokud je přidán štítek `deploy`.
+
+**K čemu slouží:**
+
+1. Provede checkout headu PR (u označených PR) nebo pushnutého commitu.
+2. Spustí `twentyhq/twenty/.github/actions/deploy-twenty-app@main` — ekvivalent v CI k `yarn twenty deploy`.
+3. Spustí `twentyhq/twenty/.github/actions/install-twenty-app@main`, aby se nově nasazená verze nainstalovala do cílového workspace.
+
+**Požadovaná konfigurace:**
+
+| Nastavení               | Kde                                                             | Účel                                                                                                 |
+| ----------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| `TWENTY_DEPLOY_URL`     | `env` v `cd.yml` (výchozí `http://localhost:3000`)              | Server Twenty, na který se nasazuje. Před prvním použitím to změňte na skutečnou URL vašeho serveru. |
+| `TWENTY_DEPLOY_API_KEY` | GitHub repozitář **Settings → Secrets and variables → Actions** | API klíč s oprávněním k nasazení na cílovém serveru.                                                 |
+
+<Note>
+Výchozí `TWENTY_DEPLOY_URL` `http://localhost:3000` je pouze zástupná hodnota — z runneru hostovaného GitHubem tato adresa nebude dosažitelná. Před povolením CD ji aktualizujte na veřejnou URL vašeho serveru (nebo použijte self-hosted runner s přístupem do sítě).
+</Note>
+
+**Spuštění náhledového nasazení z PR:**
+
+Přidejte k pull requestu štítek `deploy`. Podmínka `if:` v `cd.yml` spustí úlohu pro dané PR s použitím head commitu PR, což vám umožní ověřit změnu na cílovém serveru před sloučením.
+
+### Připnutí verzí znovupoužitelných akcí
+
+Obě workflowy odkazují na znovupoužitelné akce na `@main`, takže aktualizace akcí v repozitáři `twentyhq/twenty` se přeberou automaticky. Pokud chcete deterministická sestavení, nahraďte `@main` v každém řádku `uses:` za commit SHA nebo tag vydání.
+
 ## Publikování na npm
 
 Publikování na npm zajistí, že bude vaše aplikace dohledatelná v Marketplace Twenty. Jakýkoli pracovní prostor Twenty může procházet, instalovat a aktualizovat aplikace z Marketplace přímo z UI.

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

@@ -220,6 +220,7 @@ Der Scaffolder hat bereits einen lokalen Twenty-Server für Sie gestartet. Um ih
 | -------------------------------------- | ----------------------------------------------------------- |
 | `yarn twenty server start`             | Lokalen Server starten (lädt das Image bei Bedarf herunter) |
 | `yarn twenty server start --port 3030` | Auf einem benutzerdefinierten Port starten                  |
+| `yarn twenty server start --test`      | Starten Sie eine separate Testinstanz auf Port 2021         |
 | `yarn twenty server stop`              | Server stoppen (Daten bleiben erhalten)                     |
 | `yarn twenty server status`            | Serverstatus, URL und Anmeldedaten anzeigen                 |
 | `yarn twenty server logs`              | Serverprotokolle streamen                                   |
@@ -228,6 +229,20 @@ Der Scaffolder hat bereits einen lokalen Twenty-Server für Sie gestartet. Um ih
 
 Daten bleiben über Neustarts hinweg in zwei Docker-Volumes bestehen (`twenty-app-dev-data` für PostgreSQL, `twenty-app-dev-storage` für Dateien). Verwenden Sie `reset`, um alles zu löschen und neu zu beginnen.
 
+### Eine Testinstanz ausführen
+
+Übergeben Sie `--test` an jeden `server`-Befehl, um eine zweite, vollständig isolierte Instanz zu verwalten — nützlich, um Integrationstests auszuführen oder zu experimentieren, ohne Ihre Hauptentwicklungsdaten anzutasten.
+
+| Befehl                             | Beschreibung                                          |
+| ---------------------------------- | ----------------------------------------------------- |
+| `yarn twenty server start --test`  | Die Testinstanz starten (standardmäßig Port 2021)     |
+| `yarn twenty server stop --test`   | Die Testinstanz stoppen                               |
+| `yarn twenty server status --test` | Status, URL und Anmeldedaten der Testinstanz anzeigen |
+| `yarn twenty server logs --test`   | Protokolle der Testinstanz streamen                   |
+| `yarn twenty server reset --test`  | Alle Testdaten löschen und neu starten                |
+
+Die Testinstanz läuft in einem eigenen Docker-Container (`twenty-app-dev-test`) mit dedizierten Volumes (`twenty-app-dev-test-data`, `twenty-app-dev-test-storage`) und eigener Konfiguration, sodass sie parallel zu Ihrer Hauptinstanz ohne Konflikte ausgeführt werden kann. Kombinieren Sie `--test` mit `--port`, um den Standardport 2021 zu überschreiben.
+
 <Note>
   Der Server erfordert, dass **Docker** läuft. Wenn der Fehler "Docker not running" angezeigt wird, stellen Sie sicher, dass Docker Desktop (oder der Docker-Daemon) gestartet ist.
 </Note>

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

@@ -80,6 +80,57 @@ Pre-Release-Tags funktionieren wie erwartet: Das Erhöhen von `1.0.0-rc.1` → `
 
 {/* TODO: add screenshot of the Upgrade button */}
 
+## Automatisiertes CI/CD (vorgefertigte Workflows)
+
+Apps, die mit `create-twenty-app` erzeugt wurden, enthalten von Haus aus zwei GitHub-Actions-Workflows unter `.github/workflows/`. Sie sind einsatzbereit, sobald Sie das Repository zu GitHub pushen — für CI ist keine zusätzliche Einrichtung erforderlich, und für CD ist nur ein einziges Secret nötig.
+
+### CI — `ci.yml`
+
+Führt Ihre Integrationstests bei jedem Push auf `main` und bei Pull Requests aus.
+
+**Was sie macht:**
+
+1. Checkt den Quellcode Ihrer App aus.
+2. Startet eine isolierte Twenty-Testinstanz mithilfe der Composite-Action `twentyhq/twenty/.github/actions/spawn-twenty-app-dev-test@main` (das CI-Äquivalent zu `yarn twenty server start --test`).
+3. Aktiviert Corepack, richtet Node.js anhand Ihrer `.nvmrc` ein und installiert Abhängigkeiten mit `yarn install --immutable`.
+4. Führt `yarn test` aus und übergibt `TWENTY_API_URL` und `TWENTY_API_KEY` aus der gestarteten Instanz, damit Ihre Tests mit einem echten Server kommunizieren können.
+
+**Konfigurationsoptionen:**
+
+* `TWENTY_VERSION` (env, standardmäßig `latest`) — fixieren Sie die in CI verwendete Twenty-Server-Version, indem Sie dies in `ci.yml` anpassen.
+* Die Parallelität wird nach `github.ref` gruppiert und bricht laufende Ausführungen bei neuen Pushes ab.
+
+Es sind keine Secrets erforderlich — die Testinstanz ist flüchtig und existiert nur für die Dauer des Jobs.
+
+### CD — `cd.yml`
+
+Stellt Ihre App bei jedem Push auf `main` auf einem konfigurierten Twenty-Server bereit und optional aus einem Pull Request, wenn das Label `deploy` gesetzt ist.
+
+**Was sie macht:**
+
+1. Checkt den PR-Head (bei PRs mit Label) oder den gepushten Commit aus.
+2. Führt `twentyhq/twenty/.github/actions/deploy-twenty-app@main` aus — das CI-Äquivalent zu `yarn twenty deploy`.
+3. Führt `twentyhq/twenty/.github/actions/install-twenty-app@main` aus, damit die neu bereitgestellte Version in den Ziel-Workspace installiert wird.
+
+**Erforderliche Konfiguration:**
+
+| Einstellung             | Wo                                                               | Zweck                                                                                                                      |
+| ----------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `TWENTY_DEPLOY_URL`     | `env` in `cd.yml` (standardmäßig `http://localhost:3000`)        | Der Twenty-Server, auf den bereitgestellt werden soll. Ändern Sie dies vor der ersten Verwendung auf die echte Server-URL. |
+| `TWENTY_DEPLOY_API_KEY` | GitHub-Repository **Settings → Secrets and variables → Actions** | API-Schlüssel mit Berechtigung zum Bereitstellen auf dem Zielserver.                                                       |
+
+<Note>
+Der Standardwert von `TWENTY_DEPLOY_URL` (`http://localhost:3000`) ist ein Platzhalter — von einem GitHub-gehosteten Runner ist er nicht erreichbar. Aktualisieren Sie sie auf die öffentliche URL Ihres Servers (oder verwenden Sie einen selbstgehosteten Runner mit Netzwerkzugriff), bevor Sie CD aktivieren.
+</Note>
+
+**Eine Vorschau-Bereitstellung aus einem PR auslösen:**
+
+Fügen Sie einem Pull Request das Label `deploy` hinzu. Die `if:`-Bedingung in `cd.yml` führt den Job für diesen PR mit dem Head-Commit des PR aus, sodass Sie eine Änderung auf dem Zielserver vor dem Mergen validieren können.
+
+### Fixieren der wiederverwendbaren Actions
+
+Beide Workflows verweisen auf wiederverwendbare Actions mit `@main`, sodass Aktualisierungen der Actions im Repository `twentyhq/twenty` automatisch übernommen werden. Wenn Sie deterministische Builds möchten, ersetzen Sie `@main` in jeder `uses:`-Zeile durch eine Commit-SHA oder einen Release-Tag.
+
 ## Auf npm veröffentlichen
 
 Die Veröffentlichung auf npm macht Ihre App im Twenty-Marktplatz auffindbar. Jeder Twenty-Arbeitsbereich kann Marktplatz-Apps direkt über die Benutzeroberfläche durchsuchen, installieren und aktualisieren.

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

@@ -220,6 +220,7 @@ Lo scaffolder ha già avviato per te un server Twenty locale. Per gestirlo in se
 | -------------------------------------- | --------------------------------------------------------- |
 | `yarn twenty server start`             | Avvia il server locale (scarica l'immagine se necessario) |
 | `yarn twenty server start --port 3030` | Avvia su una porta personalizzata                         |
+| `yarn twenty server start --test`      | Avvia un'istanza di test separata sulla porta 2021        |
 | `yarn twenty server stop`              | Arresta il server (conserva i dati)                       |
 | `yarn twenty server status`            | Mostra stato del server, URL e credenziali                |
 | `yarn twenty server logs`              | Trasmetti in streaming i log del server                   |
@@ -228,6 +229,20 @@ Lo scaffolder ha già avviato per te un server Twenty locale. Per gestirlo in se
 
 I dati vengono mantenuti tra i riavvii in due volumi Docker (`twenty-app-dev-data` per PostgreSQL, `twenty-app-dev-storage` per i file). Usa `reset` per cancellare tutto e ripartire da zero.
 
+### Esecuzione di un'istanza di test
+
+Passa `--test` a qualsiasi comando `server` per gestire una seconda istanza completamente isolata — utile per eseguire test di integrazione o per sperimentare senza toccare i tuoi dati di sviluppo principali.
+
+| Comando                            | Descrizione                                                              |
+| ---------------------------------- | ------------------------------------------------------------------------ |
+| `yarn twenty server start --test`  | Avvia l'istanza di test (per impostazione predefinita usa la porta 2021) |
+| `yarn twenty server stop --test`   | Arresta l'istanza di test                                                |
+| `yarn twenty server status --test` | Mostra stato, URL e credenziali dell'istanza di test                     |
+| `yarn twenty server logs --test`   | Trasmetti in streaming i log dell'istanza di test                        |
+| `yarn twenty server reset --test`  | Cancella i dati di test e riparti da zero                                |
+
+L'istanza di test viene eseguita nel proprio container Docker (`twenty-app-dev-test`) con volumi dedicati (`twenty-app-dev-test-data`, `twenty-app-dev-test-storage`) e configurazione dedicata, così può essere eseguita in parallelo con la tua istanza principale senza conflitti. Combina `--test` con `--port` per sovrascrivere il valore predefinito 2021.
+
 <Note>
   Il server richiede che **Docker** sia in esecuzione. Se vedi l'errore "Docker not running", assicurati che Docker Desktop (o il demone Docker) sia avviato.
 </Note>

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

@@ -80,6 +80,57 @@ I tag di pre-release funzionano come previsto: incrementare `1.0.0-rc.1` → `1.
 
 {/* TODO: add screenshot of the Upgrade button */}
 
+## CI/CD automatizzati (workflow preconfigurati)
+
+Le app generate con `create-twenty-app` includono due workflow di GitHub Actions pronti all'uso, nella cartella `.github/workflows/`. Sono pronti all'esecuzione non appena esegui il push del repository su GitHub — non è necessaria alcuna configurazione aggiuntiva per la CI e la CD richiede solo un singolo secret.
+
+### CI — `ci.yml`
+
+Esegue automaticamente i test di integrazione a ogni push su `main` e sulle pull request.
+
+**Cosa fa:**
+
+1. Esegue il checkout del codice sorgente della tua app.
+2. Avvia un'istanza di test isolata di Twenty utilizzando l'azione composita `twentyhq/twenty/.github/actions/spawn-twenty-app-dev-test@main` (l'equivalente per la CI di `yarn twenty server start --test`).
+3. Abilita Corepack, configura Node.js dal tuo `.nvmrc` e installa le dipendenze con `yarn install --immutable`.
+4. Esegue `yarn test`, passando `TWENTY_API_URL` e `TWENTY_API_KEY` dall'istanza avviata affinché i tuoi test possano comunicare con un server reale.
+
+**Opzioni di configurazione:**
+
+* `TWENTY_VERSION` (variabile di ambiente, predefinito `latest`) — fissa la versione del server Twenty usata nella CI modificando questo valore in `ci.yml`.
+* La concorrenza è raggruppata per `github.ref` e annulla le esecuzioni in corso in caso di nuovi push.
+
+Non sono necessari Secrets — l'istanza di test è effimera ed esiste solo per la durata del job.
+
+### CD — `cd.yml`
+
+Esegue il deploy della tua app su un server Twenty configurato a ogni push su `main` e, facoltativamente, da una pull request quando viene applicata l'etichetta `deploy`.
+
+**Cosa fa:**
+
+1. Esegue il checkout della testa della PR (per le PR etichettate) oppure del commit inviato.
+2. Esegue `twentyhq/twenty/.github/actions/deploy-twenty-app@main` — l'equivalente per la CI di `yarn twenty deploy`.
+3. Esegue `twentyhq/twenty/.github/actions/install-twenty-app@main` in modo che la versione appena distribuita venga installata nello spazio di lavoro di destinazione.
+
+**Configurazione richiesta:**
+
+| Impostazione            | Dove                                                             | Scopo                                                                                                             |
+| ----------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `TWENTY_DEPLOY_URL`     | `env` in `cd.yml` (predefinito `http://localhost:3000`)          | Il server Twenty su cui effettuare il deploy. Modificalo con l'URL reale del tuo server prima del primo utilizzo. |
+| `TWENTY_DEPLOY_API_KEY` | Repository GitHub **Settings → Secrets and variables → Actions** | Chiave API con autorizzazione di deploy sul server di destinazione.                                               |
+
+<Note>
+Il valore predefinito di `TWENTY_DEPLOY_URL`, `http://localhost:3000`, è un segnaposto — non raggiungerà alcuna risorsa da un runner ospitato su GitHub. Aggiornalo all'URL pubblico del tuo server (oppure usa un runner self-hosted con accesso di rete) prima di abilitare il CD.
+</Note>
+
+**Attivare un deploy di anteprima da una PR:**
+
+Aggiungi l'etichetta `deploy` a una pull request. La condizione `if:` in `cd.yml` eseguirà il job per quella PR utilizzando il commit di testa della PR, permettendoti di convalidare una modifica sul server di destinazione prima del merge.
+
+### Bloccare le azioni riutilizzabili
+
+Entrambi i workflow fanno riferimento ad azioni riutilizzabili a `@main`, quindi gli aggiornamenti delle azioni nel repository `twentyhq/twenty` vengono recepiti automaticamente. Se desideri build deterministiche, sostituisci `@main` con uno SHA di commit o un tag di release in ciascuna riga `uses:`.
+
 ## Pubblicazione su npm
 
 La pubblicazione su npm rende la tua app scopribile nel marketplace di Twenty. Qualsiasi spazio di lavoro Twenty può sfogliare, installare e aggiornare le app del marketplace direttamente dall'interfaccia utente.

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

@@ -220,6 +220,7 @@ A ferramenta de scaffolding já iniciou um servidor local do Twenty para você.
 | -------------------------------------- | ------------------------------------------------------ |
 | `yarn twenty server start`             | Inicia o servidor local (baixa a imagem se necessário) |
 | `yarn twenty server start --port 3030` | Iniciar em uma porta personalizada                     |
+| `yarn twenty server start --test`      | Inicie uma instância de teste separada na porta 2021   |
 | `yarn twenty server stop`              | Interrompe o servidor (preserva os dados)              |
 | `yarn twenty server status`            | Mostra o status do servidor, a URL e as credenciais    |
 | `yarn twenty server logs`              | Transmite os logs do servidor                          |
@@ -228,6 +229,20 @@ A ferramenta de scaffolding já iniciou um servidor local do Twenty para você.
 
 Os dados são persistidos entre reinicializações em dois volumes do Docker (`twenty-app-dev-data` para PostgreSQL, `twenty-app-dev-storage` para arquivos). Use `reset` para apagar tudo e começar do zero.
 
+### Executando uma instância de teste
+
+Passe `--test` para qualquer comando de `server` para gerenciar uma segunda instância totalmente isolada — útil para executar testes de integração ou experimentar sem tocar nos seus dados principais de desenvolvimento.
+
+| Comando                            | Descrição                                                     |
+| ---------------------------------- | ------------------------------------------------------------- |
+| `yarn twenty server start --test`  | Inicia a instância de teste (padrão: porta 2021)              |
+| `yarn twenty server stop --test`   | Interrompe a instância de teste                               |
+| `yarn twenty server status --test` | Mostra o status da instância de teste, a URL e as credenciais |
+| `yarn twenty server logs --test`   | Transmite os logs da instância de teste                       |
+| `yarn twenty server reset --test`  | Exclui os dados de teste e inicia do zero                     |
+
+A instância de teste é executada em seu próprio contêiner Docker (`twenty-app-dev-test`) com volumes dedicados (`twenty-app-dev-test-data`, `twenty-app-dev-test-storage`) e configuração própria, para que possa ser executada em paralelo com sua instância principal sem conflitos. Combine `--test` com `--port` para substituir a porta padrão 2021.
+
 <Note>
   O servidor requer que o **Docker** esteja em execução. Se você vir um erro "Docker not running", certifique-se de que o Docker Desktop (ou o daemon do Docker) esteja iniciado.
 </Note>

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

@@ -80,6 +80,57 @@ Tags de pré-lançamento funcionam como esperado: incrementar `1.0.0-rc.1` → `
 
 {/* TODO: add screenshot of the Upgrade button */}
 
+## CI/CD automatizado (fluxos de trabalho pré-configurados)
+
+Os apps gerados com `create-twenty-app` já vêm com dois fluxos de trabalho do GitHub Actions prontos, em `.github/workflows/`. Eles estão prontos para executar assim que você fizer push do repositório para o GitHub — nenhuma configuração extra é necessária para CI, e CD requer apenas um único segredo.
+
+### CI — `ci.yml`
+
+Executa testes de integração a cada push para `main` e a cada pull request.
+
+**O que faz:**
+
+1. Faz checkout do código-fonte do seu app.
+2. Inicia uma instância de teste do Twenty isolada usando a ação composta `twentyhq/twenty/.github/actions/spawn-twenty-app-dev-test@main` (o equivalente em CI de `yarn twenty server start --test`).
+3. Habilita o Corepack, configura o Node.js a partir do seu `.nvmrc` e instala as dependências com `yarn install --immutable`.
+4. Executa `yarn test`, passando `TWENTY_API_URL` e `TWENTY_API_KEY` da instância iniciada para que seus testes possam se comunicar com um servidor real.
+
+**Opções de configuração:**
+
+* `TWENTY_VERSION` (env, padrão `latest`) — fixe a versão do servidor Twenty usada no CI editando isto em `ci.yml`.
+* A concorrência é agrupada por `github.ref` e cancela execuções em andamento quando há novos pushes.
+
+Nenhum segredo é necessário — a instância de teste é efêmera e existe apenas durante a execução do job.
+
+### CD — `cd.yml`
+
+Faz o deploy do seu app para um servidor Twenty configurado a cada push para `main` e, opcionalmente, a partir de um pull request quando o rótulo `deploy` é aplicado.
+
+**O que faz:**
+
+1. Faz checkout do head do PR (para PRs rotulados) ou do commit enviado.
+2. Executa `twentyhq/twenty/.github/actions/deploy-twenty-app@main` — o equivalente em CI de `yarn twenty deploy`.
+3. Executa `twentyhq/twenty/.github/actions/install-twenty-app@main` para que a versão recém-implantada seja instalada no workspace de destino.
+
+**Configuração obrigatória:**
+
+| Configuração            | Onde                                                                 | Finalidade                                                                                                       |
+| ----------------------- | -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `TWENTY_DEPLOY_URL`     | `env` em `cd.yml` (padrão `http://localhost:3000`)                   | O servidor Twenty para o qual fazer o deploy. Altere isto para a URL real do seu servidor antes do primeiro uso. |
+| `TWENTY_DEPLOY_API_KEY` | Repositório do GitHub **Settings → Secrets and variables → Actions** | Chave de API com permissão de deploy no servidor de destino.                                                     |
+
+<Note>
+O `TWENTY_DEPLOY_URL` padrão de `http://localhost:3000` é um placeholder — ele não alcançará nada a partir de um runner hospedado pelo GitHub. Atualize-o para a URL pública do seu servidor (ou use um runner self-hosted com acesso à rede) antes de habilitar o CD.
+</Note>
+
+**Acionando um deploy de pré-visualização a partir de um PR:**
+
+Adicione o rótulo `deploy` a um pull request. A condição `if:` em `cd.yml` executará o job para esse PR usando o commit HEAD do PR, permitindo que você valide uma alteração no servidor de destino antes de fazer o merge.
+
+### Fixando as ações reutilizáveis
+
+Ambos os fluxos de trabalho fazem referência a ações reutilizáveis em `@main`, portanto as atualizações de ações no repositório `twentyhq/twenty` são aplicadas automaticamente. Se você quiser builds determinísticos, substitua `@main` por um SHA de commit ou uma tag de release em cada linha `uses:`.
+
 ## Publicação no npm
 
 Publicar no npm torna seu aplicativo descobrível no Marketplace da Twenty. Qualquer espaço de trabalho da Twenty pode navegar, instalar e atualizar aplicativos do Marketplace diretamente pela UI.

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

@@ -220,6 +220,7 @@ npx create-twenty-app@latest my-twenty-app --example postcard
 | -------------------------------------- | -------------------------------------------------------------- |
 | `yarn twenty server start`             | Запустить локальный сервер (при необходимости скачивает образ) |
 | `yarn twenty server start --port 3030` | Запустить на пользовательском порту                            |
+| `yarn twenty server start --test`      | Запускает отдельный тестовый экземпляр на порту 2021           |
 | `yarn twenty server stop`              | Остановить сервер (данные сохраняются)                         |
 | `yarn twenty server status`            | Показать состояние сервера, URL и учётные данные               |
 | `yarn twenty server logs`              | Потоковый вывод журналов сервера                               |
@@ -228,6 +229,20 @@ npx create-twenty-app@latest my-twenty-app --example postcard
 
 Данные сохраняются между перезапусками в двух томах Docker (`twenty-app-dev-data` для PostgreSQL, `twenty-app-dev-storage` для файлов). Используйте `reset`, чтобы стереть всё и начать заново.
 
+### Запуск тестового экземпляра
+
+Передайте `--test` любой команде `server`, чтобы управлять вторым, полностью изолированным экземпляром — это полезно для запуска интеграционных тестов или экспериментов, не затрагивая ваши основные данные разработки.
+
+| Команда                            | Описание                                                      |
+| ---------------------------------- | ------------------------------------------------------------- |
+| `yarn twenty server start --test`  | Запустить тестовый экземпляр (по умолчанию — порт 2021)       |
+| `yarn twenty server stop --test`   | Остановить тестовый экземпляр                                 |
+| `yarn twenty server status --test` | Показать состояние тестового экземпляра, URL и учётные данные |
+| `yarn twenty server logs --test`   | Выводить журналы тестового экземпляра в потоковом режиме      |
+| `yarn twenty server reset --test`  | Удалить тестовые данные и начать с чистого листа              |
+
+Тестовый экземпляр запускается в собственном контейнере Docker (`twenty-app-dev-test`) с выделенными томами (`twenty-app-dev-test-data`, `twenty-app-dev-test-storage`) и собственной конфигурацией, поэтому он может работать параллельно с вашим основным экземпляром без конфликтов. Совместите `--test` с `--port`, чтобы переопределить значение по умолчанию (2021).
+
 <Note>
   Для работы сервера необходимо, чтобы **Docker** был запущен. Если вы видите ошибку "Docker not running", убедитесь, что запущен Docker Desktop (или демон Docker).
 </Note>

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

@@ -80,6 +80,57 @@ When updating an already deployed tarball app, the server requires the `version`
 
 {/* TODO: add screenshot of the Upgrade button */}
 
+## Автоматизированный CI/CD (рабочие процессы, сгенерированные шаблоном)
+
+Приложения, созданные с помощью `create-twenty-app`, «из коробки» включают два рабочих процесса GitHub Actions в каталоге `.github/workflows/`. Они готовы к запуску, как только вы запушите репозиторий на GitHub — для CI не требуется дополнительной настройки, а для CD нужен лишь один секрет.
+
+### CI — `ci.yml`
+
+Автоматически запускает интеграционные тесты при каждом пуше в `main` и для каждого pull request.
+
+**Что делает:**
+
+1. Извлекает исходный код вашего приложения.
+2. Запускает изолированный тестовый экземпляр Twenty с помощью составного действия `twentyhq/twenty/.github/actions/spawn-twenty-app-dev-test@main` (эквивалент для CI `yarn twenty server start --test`).
+3. Включает Corepack, настраивает Node.js на основе вашего `.nvmrc` и устанавливает зависимости с помощью `yarn install --immutable`.
+4. Запускает `yarn test`, передавая `TWENTY_API_URL` и `TWENTY_API_KEY` из запущенного экземпляра, чтобы ваши тесты могли взаимодействовать с реальным сервером.
+
+**Параметры конфигурации:**
+
+* `TWENTY_VERSION` (переменная окружения, по умолчанию `latest`) — зафиксируйте версию сервера Twenty, используемую в CI, отредактировав это значение в `ci.yml`.
+* Параллельные запуски группируются по `github.ref` и отменяют выполняющиеся прогоны при новых пушах.
+
+Секреты не требуются — тестовый экземпляр эфемерен и существует только на время выполнения задания.
+
+### CD — `cd.yml`
+
+Разворачивает ваше приложение на настроенном сервере Twenty при каждом пуше в `main` и, при необходимости, из pull request при наличии метки `deploy`.
+
+**Что делает:**
+
+1. Извлекает head-коммит PR (для PR с меткой) или запушенный коммит.
+2. Запускает `twentyhq/twenty/.github/actions/deploy-twenty-app@main` — эквивалент для CI `yarn twenty deploy`.
+3. Запускает `twentyhq/twenty/.github/actions/install-twenty-app@main`, чтобы новая развернутая версия была установлена в целевое рабочее пространство.
+
+**Обязательная конфигурация:**
+
+| Настройка               | Где                                                                   | Назначение                                                                                                              |
+| ----------------------- | --------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `TWENTY_DEPLOY_URL`     | `env` в `cd.yml` (по умолчанию `http://localhost:3000`)               | Сервер Twenty, на который выполняется деплой. Перед первым использованием замените это на URL вашего реального сервера. |
+| `TWENTY_DEPLOY_API_KEY` | В репозитории GitHub — **Settings → Secrets and variables → Actions** | Ключ API с правом деплоя на целевом сервере.                                                                            |
+
+<Note>
+Значение `TWENTY_DEPLOY_URL` по умолчанию — `http://localhost:3000` — это заглушка: с хостируемого GitHub раннера к ней не будет доступа. Перед включением CD замените его на публичный URL вашего сервера (или используйте self-hosted раннер с сетевым доступом).
+</Note>
+
+**Запуск предварительного деплоя из PR:**
+
+Добавьте к pull request метку `deploy`. Условие `if:` в `cd.yml` запустит задачу для этого PR, используя его head-коммит, что позволит проверить изменение на целевом сервере до слияния.
+
+### Закрепление версий повторно используемых действий
+
+Оба рабочих процесса ссылаются на повторно используемые действия с указанием `@main`, поэтому обновления действий в репозитории `twentyhq/twenty` подхватываются автоматически. Если вам нужны детерминированные сборки, замените `@main` на SHA коммита или тег релиза в каждой строке `uses:`.
+
 ## Публикация в npm
 
 Публикация в npm делает ваше приложение видимым в маркетплейсе Twenty. Любое рабочее пространство Twenty может просматривать, устанавливать и обновлять приложения из маркетплейса непосредственно из интерфейса.

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

@@ -216,18 +216,33 @@ npx create-twenty-app@latest my-twenty-app --example postcard
 
 İskelet oluşturucu sizin için zaten yerel bir Twenty sunucusu başlattı. Daha sonra yönetmek için `yarn twenty server` komutunu kullanın:
 
-| Komut                                  | Açıklama                                               |
-| -------------------------------------- | ------------------------------------------------------ |
-| `yarn twenty server start`             | Yerel sunucuyu başlatır (gerekirse imajı çeker)        |
-| `yarn twenty server start --port 3030` | Özel bir portta başlatır                               |
-| `yarn twenty server stop`              | Sunucuyu durdurur (verileri korur)                     |
-| `yarn twenty server status`            | Sunucu durumunu, URL'yi ve kimlik bilgilerini gösterir |
-| `yarn twenty server logs`              | Sunucu günlüklerini akış olarak iletir                 |
-| `yarn twenty server logs --lines 100`  | Son 100 günlük satırını gösterir                       |
-| `yarn twenty server reset`             | Tüm verileri siler ve sıfırdan başlatır                |
+| Komut                                  | Açıklama                                                        |
+| -------------------------------------- | --------------------------------------------------------------- |
+| `yarn twenty server start`             | Yerel sunucuyu başlatır (gerekirse imajı çeker)                 |
+| `yarn twenty server start --port 3030` | Özel bir portta başlatır                                        |
+| `yarn twenty server start --test`      | 2021 numaralı bağlantı noktasında ayrı bir test örneği başlatın |
+| `yarn twenty server stop`              | Sunucuyu durdurur (verileri korur)                              |
+| `yarn twenty server status`            | Sunucu durumunu, URL'yi ve kimlik bilgilerini gösterir          |
+| `yarn twenty server logs`              | Sunucu günlüklerini akış olarak iletir                          |
+| `yarn twenty server logs --lines 100`  | Son 100 günlük satırını gösterir                                |
+| `yarn twenty server reset`             | Tüm verileri siler ve sıfırdan başlatır                         |
 
 Veriler, yeniden başlatmalar arasında iki Docker biriminde kalıcıdır (PostgreSQL için `twenty-app-dev-data`, dosyalar için `twenty-app-dev-storage`). Her şeyi silip baştan başlamak için `reset` kullanın.
 
+### Test örneği çalıştırma
+
+`server` komutlarının herhangi birine `--test` parametresini vererek ikinci, tamamen yalıtılmış bir örneği yönetin — entegrasyon testlerini çalıştırmak veya ana geliştirme verilerinize dokunmadan denemeler yapmak için kullanışlıdır.
+
+| Komut                              | Açıklama                                                       |
+| ---------------------------------- | -------------------------------------------------------------- |
+| `yarn twenty server start --test`  | Test örneğini başlatır (varsayılan bağlantı noktası 2021'dir)  |
+| `yarn twenty server stop --test`   | Test örneğini durdurur                                         |
+| `yarn twenty server status --test` | Test örneğinin durumunu, URL'yi ve kimlik bilgilerini gösterir |
+| `yarn twenty server logs --test`   | Test örneği günlüklerini akış olarak iletir                    |
+| `yarn twenty server reset --test`  | Test verilerini siler ve sıfırdan başlatır                     |
+
+Test örneği, kendine ait bir Docker konteynerinde (`twenty-app-dev-test`), ayrılmış birimlerle (`twenty-app-dev-test-data`, `twenty-app-dev-test-storage`) ve yapılandırmayla çalışır; böylece ana örneğinizle çakışma olmadan paralel olarak çalışabilir. Varsayılan 2021'i geçersiz kılmak için `--test` ile `--port`'u birlikte kullanın.
+
 <Note>
   Sunucunun çalışması için **Docker**'ın çalışıyor olması gerekir. "Docker not running" hatası görürseniz Docker Desktop'ın (veya Docker daemon'ının) başlatıldığından emin olun.
 </Note>

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

@@ -80,6 +80,57 @@ Bir güncelleme yayımlamak için:
 
 {/* TODO: add screenshot of the Upgrade button */}
 
+## Otomatik CI/CD (hazır şablonlu iş akışları)
+
+`create-twenty-app` ile oluşturulan uygulamalar, kutudan çıktığı gibi `.github/workflows/` altında iki GitHub Actions iş akışıyla gelir. Depoyu GitHub’a iter itmez çalışmaya hazırdır — CI için ek bir kurulum gerekmez ve CD yalnızca tek bir gizli anahtar gerektirir.
+
+### CI — `ci.yml`
+
+Entegrasyon testlerini `main` dalına yapılan her itmede ve her çekme isteğinde otomatik olarak çalıştırır.
+
+**Ne yapar:**
+
+1. Uygulamanızın kaynak kodunu alır.
+2. `twentyhq/twenty/.github/actions/spawn-twenty-app-dev-test@main` bileşik eylemini kullanarak yalıtılmış bir Twenty test örneği başlatır (CI'daki `yarn twenty server start --test` eşdeğeri).
+3. Corepack’i etkinleştirir, `.nvmrc` dosyanızdan Node.js'i kurar ve bağımlılıkları `yarn install --immutable` ile yükler.
+4. Oluşturulan örnekten `TWENTY_API_URL` ve `TWENTY_API_KEY` değerlerini aktararak `yarn test`i çalıştırır; böylece testleriniz gerçek bir sunucuyla haberleşebilir.
+
+**Yapılandırma seçenekleri:**
+
+* `TWENTY_VERSION` (ortam, varsayılanı `latest`) — CI’da kullanılan Twenty sunucu sürümünü `ci.yml` içinde bunu düzenleyerek sabitleyin.
+* Eşzamanlılık `github.ref` bazında gruplanır ve yeni itmelerde devam eden çalışmaları iptal eder.
+
+Gizli anahtar gerekmez — test örneği geçicidir ve yalnızca iş süresi boyunca çalışır.
+
+### CD — `cd.yml`
+
+`main` dalına yapılan her itmede uygulamanızı yapılandırılmış bir Twenty sunucusuna dağıtır ve isteğe bağlı olarak `deploy` etiketi uygulandığında bir çekme isteğinden de dağıtım yapar.
+
+**Ne yapar:**
+
+1. Etiketli PR'ler için PR'in head commit'ini ya da itilen commit'i alır.
+2. `twentyhq/twenty/.github/actions/deploy-twenty-app@main` çalıştırır — `yarn twenty deploy` komutunun CI eşdeğeridir.
+3. `twentyhq/twenty/.github/actions/install-twenty-app@main` eylemini çalıştırır; böylece yeni dağıtılan sürüm hedef çalışma alanına kurulur.
+
+**Gerekli yapılandırma:**
+
+| Ayar                    | Koşul                                                        | Amaç                                                                                                |
+| ----------------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
+| `TWENTY_DEPLOY_URL`     | `cd.yml` içinde `env` (varsayılan: `http://localhost:3000`)  | Dağıtımın yapılacağı Twenty sunucusu. İlk kullanımdan önce bunu gerçek sunucu URL'nizle değiştirin. |
+| `TWENTY_DEPLOY_API_KEY` | GitHub deposu **Settings → Secrets and variables → Actions** | Hedef sunucuda dağıtım iznine sahip API anahtarı.                                                   |
+
+<Note>
+Varsayılan `TWENTY_DEPLOY_URL` olan `http://localhost:3000` bir yer tutucudur — GitHub barındırmalı bir çalıştırıcıdan hiçbir yere erişemez. CD'yi etkinleştirmeden önce bunu sunucunuzun genel URL'siyle güncelleyin (veya ağ erişimi olan öz barındırılan bir çalıştırıcı kullanın).
+</Note>
+
+**Bir PR'den bir önizleme dağıtımını tetikleme:**
+
+Bir çekme isteğine `deploy` etiketini ekleyin. `cd.yml` içindeki `if:` koruması, ilgili PR için işi PR'in head commit'ini kullanarak çalıştırır; böylece birleştirmeden önce hedef sunucuda değişikliği doğrulayabilirsiniz.
+
+### Yeniden kullanılabilir eylemleri sabitleme
+
+Her iki iş akışı da `@main` üzerindeki yeniden kullanılabilir eylemlere başvurur; bu nedenle `twentyhq/twenty` deposundaki eylem güncellemeleri otomatik olarak alınır. Deterministik derlemeler istiyorsanız, her `uses:` satırında `@main` ifadesini bir commit SHA'sı veya sürüm etiketiyle değiştirin.
+
 ## npm’ye yayımlama
 
 npm’ye yayımlamak, uygulamanızın Twenty pazaryerinde keşfedilebilir olmasını sağlar. Herhangi bir Twenty çalışma alanı, pazaryeri uygulamalarına doğrudan arayüzden göz atabilir, yükleyebilir ve güncelleyebilir.

packages/twenty-e2e-testing/tests/create-record.spec.ts

@@ -64,7 +64,7 @@ test('Create and update record', async ({ page }) => {
     await lastNameInput.press('Enter');
 
     // Focus on recordFieldList
-    const recordFieldList = page.getByTestId('person-widget-fields');
+    const recordFieldList = page.getByTestId('record-fields-widget');
     await expect(recordFieldList).toBeVisible();
     await recordFieldList.getByText('Emails').first().click();
 

packages/twenty-front-component-renderer/.gitignore

@@ -1,4 +1,5 @@
 node_modules
 storybook-static
-src/__stories__/example-sources-built
+src/__stories__/example-sources-built/*
+!src/__stories__/example-sources-built/bundle-sizes.json.d.ts
 src/__stories__/example-sources-built-preact

packages/twenty-front-component-renderer/scripts/front-component-stories/build-source-examples.ts

@@ -60,7 +60,7 @@ const twentySharedAliases = Object.fromEntries(
 const storyAlias = {
   react: path.join(rootNodeModules, 'react'),
   'react-dom': path.join(rootNodeModules, 'react-dom'),
-  '@/sdk': sdkIndividualIndex,
+  'twenty-sdk': sdkIndividualIndex,
   'twenty-sdk/ui': twentyUiIndividualIndex,
   ...twentySharedAliases,
 };
@@ -77,6 +77,9 @@ const STORY_COMPONENTS = [
   'mui-example.front-component',
   'twenty-ui-example.front-component',
   'sdk-context-example.front-component',
+  'form-events.front-component',
+  'keyboard-events.front-component',
+  'host-api-calls.front-component',
 ];
 
 const resolveEntryPoints = (): Record<string, string> => {

packages/twenty-front-component-renderer/scripts/remote-dom/generate-remote-dom-elements.ts

@@ -45,7 +45,7 @@ const getHtmlElementSchemas = (): ComponentSchema[] => {
     events: element.events
       ? [...COMMON_HTML_EVENTS, ...element.events]
       : COMMON_HTML_EVENTS,
-    htmlTag: extractHtmlTag(element.tag),
+    htmlTag: element.htmlTag ?? extractHtmlTag(element.tag),
   }));
 };
 

packages/twenty-front-component-renderer/scripts/remote-dom/generators/schemas.ts

@@ -12,6 +12,7 @@ export const HtmlElementConfigZ = z.object({
     .regex(/^Html[A-Z]/, 'Name must be PascalCase starting with Html'),
   properties: z.record(z.string(), PropertySchemaZ),
   events: z.array(z.string()).optional(),
+  htmlTag: z.string().optional(),
 });
 
 export const HtmlElementConfigArrayZ = z.array(HtmlElementConfigZ);

packages/twenty-front-component-renderer/src/__stories__/EventForwarding.stories.tsx

@@ -0,0 +1,348 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
+
+import { FrontComponentRenderer } from '../host/components/FrontComponentRenderer';
+
+import { getBuiltStoryComponentPathForRender } from './utils/getBuiltStoryComponentPathForRender';
+
+const errorHandler = fn();
+
+const createHostApiMocks = () => ({
+  navigate: fn().mockResolvedValue(undefined),
+  enqueueSnackbar: fn().mockResolvedValue(undefined),
+  openSidePanelPage: fn().mockResolvedValue(undefined),
+  closeSidePanel: fn().mockResolvedValue(undefined),
+  unmountFrontComponent: fn().mockResolvedValue(undefined),
+  updateProgress: fn().mockResolvedValue(undefined),
+  requestAccessTokenRefresh: fn().mockResolvedValue('refreshed-token'),
+  openCommandConfirmationModal: fn().mockResolvedValue(undefined),
+});
+
+const meta: Meta<typeof FrontComponentRenderer> = {
+  title: 'FrontComponent/EventForwarding',
+  component: FrontComponentRenderer,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    onError: errorHandler,
+    applicationAccessToken: 'fake-token',
+    executionContext: {
+      frontComponentId: 'storybook-test',
+      userId: null,
+      recordId: null,
+    },
+    colorScheme: 'light',
+    frontComponentHostCommunicationApi: createHostApiMocks(),
+  },
+  beforeEach: () => {
+    errorHandler.mockClear();
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FrontComponentRenderer>;
+
+const MOUNT_TIMEOUT = 30000;
+const INTERACTION_TIMEOUT = 5000;
+const HOST_API_TIMEOUT = 10000;
+
+const createComponentStory = (
+  name: string,
+  options?: { play?: Story['play'] },
+): Story => ({
+  args: {
+    componentUrl: getBuiltStoryComponentPathForRender(
+      `${name}.front-component`,
+    ),
+  },
+  ...(options?.play ? { play: options.play } : {}),
+});
+
+const createHostApiStory = (play: Story['play']): Story => ({
+  ...createComponentStory('host-api-calls'),
+  args: {
+    ...createComponentStory('host-api-calls').args,
+    frontComponentHostCommunicationApi: createHostApiMocks(),
+  },
+  play,
+});
+
+export const FormTextInput: Story = createComponentStory('form-events', {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByTestId(
+      'form-events-component',
+      {},
+      { timeout: MOUNT_TIMEOUT },
+    );
+
+    const textInput = await canvas.findByTestId('text-input');
+    await userEvent.type(textInput, 'hello');
+
+    expect(
+      await canvas.findByText('hello', {}, { timeout: INTERACTION_TIMEOUT }),
+    ).toBeVisible();
+  },
+});
+
+export const FormCheckbox: Story = createComponentStory('form-events', {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByTestId(
+      'form-events-component',
+      {},
+      { timeout: MOUNT_TIMEOUT },
+    );
+
+    const checkbox = await canvas.findByTestId('checkbox-input');
+    await userEvent.click(checkbox);
+
+    expect(
+      await canvas.findByText('true', {}, { timeout: INTERACTION_TIMEOUT }),
+    ).toBeVisible();
+  },
+});
+
+export const FormFocusAndBlur: Story = createComponentStory('form-events', {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByTestId(
+      'form-events-component',
+      {},
+      { timeout: MOUNT_TIMEOUT },
+    );
+
+    const textInput = await canvas.findByTestId('text-input');
+    await userEvent.click(textInput);
+
+    expect(
+      await canvas.findByText('focused', {}, { timeout: INTERACTION_TIMEOUT }),
+    ).toBeVisible();
+
+    await userEvent.click(await canvas.findByTestId('form-events-component'));
+
+    expect(
+      await canvas.findByText('blurred', {}, { timeout: INTERACTION_TIMEOUT }),
+    ).toBeVisible();
+  },
+});
+
+export const FormSubmission: Story = createComponentStory('form-events', {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByTestId(
+      'form-events-component',
+      {},
+      { timeout: MOUNT_TIMEOUT },
+    );
+
+    const textInput = await canvas.findByTestId('text-input');
+    await userEvent.type(textInput, 'hello');
+
+    const checkbox = await canvas.findByTestId('checkbox-input');
+    await userEvent.click(checkbox);
+
+    const submitButton = await canvas.findByTestId('submit-button');
+    await userEvent.click(submitButton);
+
+    expect(
+      await canvas.findByText(
+        '{"text":"hello","checkbox":true}',
+        {},
+        { timeout: INTERACTION_TIMEOUT },
+      ),
+    ).toBeVisible();
+  },
+});
+
+export const KeyboardBasicInput: Story = createComponentStory(
+  'keyboard-events',
+  {
+    play: async ({ canvasElement }) => {
+      const canvas = within(canvasElement);
+
+      await canvas.findByTestId(
+        'keyboard-events-component',
+        {},
+        { timeout: MOUNT_TIMEOUT },
+      );
+
+      const input = await canvas.findByTestId('keyboard-input');
+      await userEvent.click(input);
+
+      await userEvent.keyboard('a');
+
+      expect(
+        await canvas.findByText('a', {}, { timeout: INTERACTION_TIMEOUT }),
+      ).toBeVisible();
+
+      expect(
+        await canvas.findByText('KeyA', {}, { timeout: INTERACTION_TIMEOUT }),
+      ).toBeVisible();
+
+      expect(
+        await canvas.findByText(
+          /^[1-9]\d*$/,
+          {},
+          { timeout: INTERACTION_TIMEOUT },
+        ),
+      ).toBeVisible();
+    },
+  },
+);
+
+export const KeyboardModifiers: Story = createComponentStory(
+  'keyboard-events',
+  {
+    play: async ({ canvasElement }) => {
+      const canvas = within(canvasElement);
+
+      await canvas.findByTestId(
+        'keyboard-events-component',
+        {},
+        { timeout: MOUNT_TIMEOUT },
+      );
+
+      const input = await canvas.findByTestId('keyboard-input');
+      await userEvent.click(input);
+
+      await userEvent.keyboard('{Shift>}b{/Shift}');
+
+      expect(
+        await canvas.findByText('shift', {}, { timeout: INTERACTION_TIMEOUT }),
+      ).toBeVisible();
+    },
+  },
+);
+
+export const HostApiNavigate: Story = createHostApiStory(
+  async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const api = args.frontComponentHostCommunicationApi!;
+
+    await canvas.findByTestId(
+      'host-api-calls-component',
+      {},
+      { timeout: MOUNT_TIMEOUT },
+    );
+
+    const navigateBtn = await canvas.findByTestId('btn-navigate');
+    await userEvent.click(navigateBtn);
+
+    await waitFor(
+      () => {
+        expect(api.navigate).toHaveBeenCalled();
+      },
+      { timeout: HOST_API_TIMEOUT },
+    );
+
+    expect(
+      await canvas.findByText(
+        'navigate:success',
+        {},
+        { timeout: INTERACTION_TIMEOUT },
+      ),
+    ).toBeVisible();
+  },
+);
+
+export const HostApiSnackbar: Story = createHostApiStory(
+  async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const api = args.frontComponentHostCommunicationApi!;
+
+    await canvas.findByTestId(
+      'host-api-calls-component',
+      {},
+      { timeout: MOUNT_TIMEOUT },
+    );
+
+    const snackbarBtn = await canvas.findByTestId('btn-snackbar');
+    await userEvent.click(snackbarBtn);
+
+    await waitFor(
+      () => {
+        expect(api.enqueueSnackbar).toHaveBeenCalledWith({
+          message: 'Test notification',
+          variant: 'success',
+        });
+      },
+      { timeout: HOST_API_TIMEOUT },
+    );
+
+    expect(
+      await canvas.findByText(
+        'snackbar:success',
+        {},
+        { timeout: INTERACTION_TIMEOUT },
+      ),
+    ).toBeVisible();
+  },
+);
+
+export const HostApiProgress: Story = createHostApiStory(
+  async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const api = args.frontComponentHostCommunicationApi!;
+
+    await canvas.findByTestId(
+      'host-api-calls-component',
+      {},
+      { timeout: MOUNT_TIMEOUT },
+    );
+
+    const progressBtn = await canvas.findByTestId('btn-progress');
+    await userEvent.click(progressBtn);
+
+    await waitFor(
+      () => {
+        expect(api.updateProgress).toHaveBeenCalledWith(50);
+      },
+      { timeout: HOST_API_TIMEOUT },
+    );
+
+    expect(
+      await canvas.findByText(
+        'progress:success',
+        {},
+        { timeout: INTERACTION_TIMEOUT },
+      ),
+    ).toBeVisible();
+  },
+);
+
+export const HostApiClosePanel: Story = createHostApiStory(
+  async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const api = args.frontComponentHostCommunicationApi!;
+
+    await canvas.findByTestId(
+      'host-api-calls-component',
+      {},
+      { timeout: MOUNT_TIMEOUT },
+    );
+
+    const closePanelBtn = await canvas.findByTestId('btn-close-panel');
+    await userEvent.click(closePanelBtn);
+
+    await waitFor(
+      () => {
+        expect(api.closeSidePanel).toHaveBeenCalled();
+      },
+      { timeout: HOST_API_TIMEOUT },
+    );
+
+    expect(
+      await canvas.findByText(
+        'closePanel:success',
+        {},
+        { timeout: INTERACTION_TIMEOUT },
+      ),
+    ).toBeVisible();
+  },
+);

packages/twenty-front-component-renderer/src/__stories__/FrontComponentRenderer.stories.tsx

@@ -16,7 +16,11 @@ const meta: Meta<typeof FrontComponentRenderer> = {
   args: {
     onError: errorHandler,
     applicationAccessToken: 'fake-token',
-    executionContext: { frontComponentId: 'storybook-test', userId: null },
+    executionContext: {
+      frontComponentId: 'storybook-test',
+      userId: null,
+      recordId: null,
+    },
   },
   beforeEach: () => {
     errorHandler.mockClear();
@@ -92,13 +96,9 @@ export const Lifecycle: Story = {
 
     expect(await canvas.findByText('Mounted')).toBeVisible();
 
-    await waitFor(
-      () => {
-        const tickElement = canvas.getByTestId('tick-count');
-        expect(tickElement.textContent).toMatch(/Ticks: [1-9]\d*/);
-      },
-      { timeout: 10000 },
-    );
+    expect(
+      await canvas.findByText(/Ticks: [1-9]\d*/, {}, { timeout: 10000 }),
+    ).toBeVisible();
   },
 };
 
@@ -121,6 +121,7 @@ export const SdkContext: Story = {
     executionContext: {
       frontComponentId: 'sdk-context-test',
       userId: 'test-user-abc-123',
+      recordId: null,
     },
   },
   play: async ({ canvasElement }) => {

packages/twenty-front-component-renderer/src/__stories__/UILibraries.stories.tsx

@@ -16,7 +16,11 @@ const meta: Meta<typeof FrontComponentRenderer> = {
   args: {
     onError: errorHandler,
     applicationAccessToken: 'fake-token',
-    executionContext: { frontComponentId: 'storybook-test', userId: null },
+    executionContext: {
+      frontComponentId: 'storybook-test',
+      userId: null,
+      recordId: null,
+    },
   },
   beforeEach: () => {
     errorHandler.mockClear();

packages/twenty-front-component-renderer/src/__stories__/example-sources-built/bundle-sizes.json.d.ts

@@ -0,0 +1,7 @@
+declare const bundleSizes: {
+  name: string;
+  reactBytes: number;
+  preactBytes: number;
+}[];
+
+export default bundleSizes;

packages/twenty-front-component-renderer/src/__stories__/example-sources/emotion-example.front-component.tsx

@@ -1,6 +1,6 @@
+import { defineFrontComponent } from 'twenty-sdk';
 import styled from '@emotion/styled';
 import { useState } from 'react';
-import { defineFrontComponent } from '@/sdk';
 
 const Card = styled.div`
   padding: 24px;

packages/twenty-front-component-renderer/src/__stories__/example-sources/form-events.front-component.tsx

@@ -0,0 +1,141 @@
+import { defineFrontComponent } from 'twenty-sdk';
+import { type ChangeEvent, useState } from 'react';
+
+const CARD_STYLE = {
+  padding: 24,
+  backgroundColor: '#f0fdf4',
+  border: '2px solid #22c55e',
+  borderRadius: 12,
+  fontFamily: 'system-ui, sans-serif',
+  display: 'flex',
+  flexDirection: 'column' as const,
+  gap: 16,
+  maxWidth: 400,
+};
+
+const HEADING_STYLE = {
+  color: '#166534',
+  fontWeight: 700,
+  fontSize: 18,
+  margin: 0,
+};
+
+const LABEL_STYLE = {
+  fontSize: 13,
+  fontWeight: 600,
+  color: '#374151',
+};
+
+const HINT_STYLE = {
+  fontSize: 13,
+  color: '#6b7280',
+};
+
+const INPUT_STYLE = {
+  padding: '8px 12px',
+  border: '1px solid #d1d5db',
+  borderRadius: 6,
+  fontSize: 14,
+};
+
+const SUBMIT_BUTTON_STYLE = {
+  padding: '10px 20px',
+  backgroundColor: '#16a34a',
+  color: 'white',
+  border: 'none',
+  borderRadius: 6,
+  fontWeight: 600,
+  cursor: 'pointer',
+};
+
+const FormEventsComponent = () => {
+  const [textValue, setTextValue] = useState('');
+  const [checkboxValue, setCheckboxValue] = useState(false);
+  const [focusState, setFocusState] = useState('none');
+  const [submittedData, setSubmittedData] = useState<string | null>(null);
+
+  return (
+    <div data-testid="form-events-component" style={CARD_STYLE}>
+      <h2 style={HEADING_STYLE}>Form Events</h2>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <label style={LABEL_STYLE}>Text Input</label>
+        <input
+          data-testid="text-input"
+          type="text"
+          placeholder="Type here..."
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            const detail = (event as unknown as { detail: { value?: string } })
+              .detail;
+            setTextValue(detail?.value ?? '');
+          }}
+          onFocus={() => setFocusState('focused')}
+          onBlur={() => setFocusState('blurred')}
+          style={INPUT_STYLE}
+        />
+        <span data-testid="text-value" style={HINT_STYLE}>
+          {textValue}
+        </span>
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <input
+          data-testid="checkbox-input"
+          type="checkbox"
+          checked={checkboxValue}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            const detail = (
+              event as unknown as { detail: { checked?: boolean } }
+            ).detail;
+            setCheckboxValue(detail?.checked ?? false);
+          }}
+        />
+        <label style={LABEL_STYLE}>Check me</label>
+        <span data-testid="checkbox-value" style={HINT_STYLE}>
+          {String(checkboxValue)}
+        </span>
+      </div>
+
+      <span data-testid="focus-state" style={HINT_STYLE}>
+        {focusState}
+      </span>
+
+      <button
+        data-testid="submit-button"
+        type="button"
+        onClick={() =>
+          setSubmittedData(
+            JSON.stringify({ text: textValue, checkbox: checkboxValue }),
+          )
+        }
+        style={SUBMIT_BUTTON_STYLE}
+      >
+        Submit
+      </button>
+
+      {submittedData !== null && (
+        <pre
+          data-testid="submitted-data"
+          style={{
+            fontSize: 13,
+            background: '#dcfce7',
+            padding: 12,
+            borderRadius: 8,
+            margin: 0,
+            overflow: 'auto',
+          }}
+        >
+          {submittedData}
+        </pre>
+      )}
+    </div>
+  );
+};
+
+export default defineFrontComponent({
+  universalIdentifier: 'test-form-00000000-0000-0000-0000-000000000020',
+  name: 'form-events-component',
+  description:
+    'Component testing form input events (onChange, onFocus, onBlur, submit)',
+  component: FormEventsComponent,
+});

packages/twenty-front-component-renderer/src/__stories__/example-sources/host-api-calls.front-component.tsx

@@ -0,0 +1,155 @@
+import {
+  AppPath,
+  closeSidePanel,
+  defineFrontComponent,
+  enqueueSnackbar,
+  navigate,
+  openSidePanelPage,
+  SidePanelPages,
+  unmountFrontComponent,
+  updateProgress,
+} from 'twenty-sdk';
+import { useState } from 'react';
+
+const CARD_STYLE = {
+  padding: 24,
+  backgroundColor: '#faf5ff',
+  border: '2px solid #a78bfa',
+  borderRadius: 12,
+  fontFamily: 'system-ui, sans-serif',
+  display: 'flex',
+  flexDirection: 'column' as const,
+  gap: 10,
+  maxWidth: 400,
+};
+
+const HEADING_STYLE = {
+  color: '#5b21b6',
+  fontWeight: 700,
+  fontSize: 18,
+  margin: 0,
+};
+
+const BUTTON_STYLE = {
+  padding: '8px 16px',
+  backgroundColor: '#7c3aed',
+  color: 'white',
+  border: 'none',
+  borderRadius: 6,
+  fontWeight: 600,
+  cursor: 'pointer',
+  fontSize: 13,
+};
+
+const STATUS_STYLE = {
+  fontSize: 13,
+  color: '#6b7280',
+  fontFamily: 'monospace',
+};
+
+const HostApiCallsComponent = () => {
+  const [apiStatus, setApiStatus] = useState('idle');
+
+  const callApi = async (name: string, apiFunction: () => Promise<void>) => {
+    try {
+      await apiFunction();
+      setApiStatus(`${name}:success`);
+    } catch (error) {
+      setApiStatus(
+        `${name}:error:${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  };
+
+  return (
+    <div data-testid="host-api-calls-component" style={CARD_STYLE}>
+      <h2 style={HEADING_STYLE}>Host API Calls</h2>
+
+      <button
+        data-testid="btn-navigate"
+        type="button"
+        onClick={() =>
+          callApi('navigate', () =>
+            navigate(AppPath.RecordIndexPage, {
+              objectNamePlural: 'companies',
+            }),
+          )
+        }
+        style={BUTTON_STYLE}
+      >
+        Navigate
+      </button>
+
+      <button
+        data-testid="btn-snackbar"
+        type="button"
+        onClick={() =>
+          callApi('snackbar', () =>
+            enqueueSnackbar({
+              message: 'Test notification',
+              variant: 'success',
+            }),
+          )
+        }
+        style={BUTTON_STYLE}
+      >
+        Snackbar
+      </button>
+
+      <button
+        data-testid="btn-side-panel"
+        type="button"
+        onClick={() =>
+          callApi('sidePanel', () =>
+            openSidePanelPage({
+              page: SidePanelPages.ViewRecord,
+              pageTitle: 'Test Record',
+            }),
+          )
+        }
+        style={BUTTON_STYLE}
+      >
+        Open Side Panel
+      </button>
+
+      <button
+        data-testid="btn-close-panel"
+        type="button"
+        onClick={() => callApi('closePanel', () => closeSidePanel())}
+        style={BUTTON_STYLE}
+      >
+        Close Side Panel
+      </button>
+
+      <button
+        data-testid="btn-unmount"
+        type="button"
+        onClick={() => callApi('unmount', () => unmountFrontComponent())}
+        style={BUTTON_STYLE}
+      >
+        Unmount
+      </button>
+
+      <button
+        data-testid="btn-progress"
+        type="button"
+        onClick={() => callApi('progress', () => updateProgress(50))}
+        style={BUTTON_STYLE}
+      >
+        Update Progress (50)
+      </button>
+
+      <span data-testid="api-status" style={STATUS_STYLE}>
+        {apiStatus}
+      </span>
+    </div>
+  );
+};
+
+export default defineFrontComponent({
+  universalIdentifier: 'test-hapi-00000000-0000-0000-0000-000000000022',
+  name: 'host-api-calls-component',
+  description:
+    'Component testing host communication API calls (navigate, snackbar, side panel, etc.)',
+  component: HostApiCallsComponent,
+});

packages/twenty-front-component-renderer/src/__stories__/example-sources/interactive.front-component.tsx

@@ -1,4 +1,4 @@
-import { defineFrontComponent } from '@/sdk';
+import { defineFrontComponent } from 'twenty-sdk';
 import { useState } from 'react';
 
 const InteractiveComponent = () => {

packages/twenty-front-component-renderer/src/__stories__/example-sources/keyboard-events.front-component.tsx

@@ -0,0 +1,125 @@
+import { defineFrontComponent } from 'twenty-sdk';
+import { type KeyboardEvent, useState } from 'react';
+
+type RemoteKeyboardEventDetail = {
+  key?: string;
+  code?: string;
+  shiftKey?: boolean;
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+  altKey?: boolean;
+};
+
+const KeyboardEventsComponent = () => {
+  const [lastKey, setLastKey] = useState('');
+  const [lastCode, setLastCode] = useState('');
+  const [modifiers, setModifiers] = useState('');
+  const [keyCount, setKeyCount] = useState(0);
+
+  // remote-dom serializes keyboard events into CustomEvent.detail
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    const data = (event as unknown as { detail: RemoteKeyboardEventDetail })
+      .detail;
+
+    setLastKey(data.key ?? '');
+    setLastCode(data.code ?? '');
+    setKeyCount((previousCount) => previousCount + 1);
+
+    const activeModifiers: string[] = [];
+    if (data.shiftKey) activeModifiers.push('shift');
+    if (data.ctrlKey) activeModifiers.push('ctrl');
+    if (data.metaKey) activeModifiers.push('meta');
+    if (data.altKey) activeModifiers.push('alt');
+    setModifiers(activeModifiers.join(','));
+  };
+
+  return (
+    <div
+      data-testid="keyboard-events-component"
+      style={{
+        padding: 24,
+        backgroundColor: '#fefce8',
+        border: '2px solid #eab308',
+        borderRadius: 12,
+        fontFamily: 'system-ui, sans-serif',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 12,
+        maxWidth: 400,
+      }}
+    >
+      <h2
+        style={{
+          color: '#854d0e',
+          fontWeight: 700,
+          fontSize: 18,
+          margin: 0,
+        }}
+      >
+        Keyboard Events
+      </h2>
+
+      <input
+        data-testid="keyboard-input"
+        type="text"
+        placeholder="Press keys here..."
+        onKeyDown={handleKeyDown}
+        style={{
+          padding: '8px 12px',
+          border: '1px solid #d1d5db',
+          borderRadius: 6,
+          fontSize: 14,
+        }}
+      />
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <div style={{ display: 'flex', gap: 16 }}>
+          <span style={{ fontSize: 13, color: '#6b7280' }}>
+            Key:{' '}
+            <span
+              data-testid="last-key"
+              style={{ fontWeight: 700, color: '#854d0e' }}
+            >
+              {lastKey}
+            </span>
+          </span>
+          <span style={{ fontSize: 13, color: '#6b7280' }}>
+            Code:{' '}
+            <span
+              data-testid="last-code"
+              style={{ fontWeight: 700, color: '#854d0e' }}
+            >
+              {lastCode}
+            </span>
+          </span>
+        </div>
+        <span style={{ fontSize: 13, color: '#6b7280' }}>
+          Modifiers:{' '}
+          <span
+            data-testid="modifiers"
+            style={{ fontWeight: 700, color: '#854d0e' }}
+          >
+            {modifiers}
+          </span>
+        </span>
+        <span style={{ fontSize: 13, color: '#6b7280' }}>
+          Key count:{' '}
+          <span
+            data-testid="key-count"
+            style={{ fontWeight: 700, color: '#854d0e' }}
+          >
+            {keyCount}
+          </span>
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default defineFrontComponent({
+  universalIdentifier: 'test-kbd0-00000000-0000-0000-0000-000000000021',
+  name: 'keyboard-events-component',
+  description:
+    'Component testing keyboard event serialization (key, code, modifiers)',
+  component: KeyboardEventsComponent,
+});

packages/twenty-front-component-renderer/src/__stories__/example-sources/lifecycle.front-component.tsx

@@ -1,4 +1,4 @@
-import { defineFrontComponent } from '@/sdk';
+import { defineFrontComponent } from 'twenty-sdk';
 import { useEffect, useState } from 'react';
 
 const LifecycleComponent = () => {

packages/twenty-front-component-renderer/src/__stories__/example-sources/mui-example.front-component.tsx

@@ -1,7 +1,7 @@
+import { defineFrontComponent } from 'twenty-sdk';
 import Button from '@mui/material/Button';
 import MuiChip from '@mui/material/Chip';
 import { useState } from 'react';
-import { defineFrontComponent } from '@/sdk';
 
 const MuiComponent = () => {
   const [count, setCount] = useState(0);

packages/twenty-front-component-renderer/src/__stories__/example-sources/sdk-context-example.front-component.tsx

@@ -1,9 +1,9 @@
-import { useState } from 'react';
 import {
   defineFrontComponent,
   useFrontComponentExecutionContext,
   useUserId,
-} from '@/sdk';
+} from 'twenty-sdk';
+import { useState } from 'react';
 
 const CARD_STYLE = {
   padding: 24,
@@ -72,7 +72,7 @@ const SdkContextComponent = () => {
             overflow: 'auto',
           }}
         >
-          {JSON.stringify(fullContext, null, 2) ?? 'undefined'}
+          {JSON.stringify(fullContext, null, 2)}
         </pre>
       </div>
 

packages/twenty-front-component-renderer/src/__stories__/example-sources/shadcn-example.front-component.tsx

@@ -1,5 +1,5 @@
+import { defineFrontComponent } from 'twenty-sdk';
 import { useState } from 'react';
-import { defineFrontComponent } from '@/sdk';
 
 const SHADCN_CSS = `
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

packages/twenty-front-component-renderer/src/__stories__/example-sources/static.front-component.tsx

@@ -1,4 +1,4 @@
-import { defineFrontComponent } from '@/sdk';
+import { defineFrontComponent } from 'twenty-sdk';
 
 const StaticComponent = () => (
   <div

packages/twenty-front-component-renderer/src/__stories__/example-sources/styled-components-example.front-component.tsx

@@ -1,6 +1,6 @@
+import { defineFrontComponent } from 'twenty-sdk';
 import { useState } from 'react';
 import styled from 'styled-components';
-import { defineFrontComponent } from '@/sdk';
 
 const Card = styled.div`
   padding: 24px;

packages/twenty-front-component-renderer/src/__stories__/example-sources/tailwind-example.front-component.tsx

@@ -1,4 +1,4 @@
-import { defineFrontComponent } from '@/sdk';
+import { defineFrontComponent } from 'twenty-sdk';
 import { useState } from 'react';
 
 const TAILWIND_CSS = `

packages/twenty-front-component-renderer/src/__stories__/example-sources/twenty-ui-example.front-component.tsx

@@ -1,5 +1,5 @@
+import { defineFrontComponent } from 'twenty-sdk';
 import { useState } from 'react';
-import { defineFrontComponent } from '@/sdk';
 import {
   Button,
   Chip,

packages/twenty-front-component-renderer/src/constants/AllowedHtmlElements.ts

@@ -1,13 +1,12 @@
-type PropertySchema = {
-  type: 'string' | 'number' | 'boolean';
-  optional: boolean;
-};
+import { type PropertySchema } from './PropertySchema';
+import { SVG_PRESENTATION_PROPERTIES } from './SvgPresentationProperties';
 
 export type AllowedHtmlElement = {
   tag: string;
   name: string;
   properties: Record<string, PropertySchema>;
   events?: string[];
+  htmlTag?: string;
 };
 
 export const ALLOWED_HTML_ELEMENTS: AllowedHtmlElement[] = [
@@ -249,4 +248,421 @@ export const ALLOWED_HTML_ELEMENTS: AllowedHtmlElement[] = [
       height: { type: 'number', optional: true },
     },
   },
+
+  // Semantic inline text
+  { tag: 'html-b', name: 'HtmlB', properties: {} },
+  { tag: 'html-i', name: 'HtmlI', properties: {} },
+  { tag: 'html-u', name: 'HtmlU', properties: {} },
+  { tag: 'html-s', name: 'HtmlS', properties: {} },
+  { tag: 'html-mark', name: 'HtmlMark', properties: {} },
+  { tag: 'html-sub', name: 'HtmlSub', properties: {} },
+  { tag: 'html-sup', name: 'HtmlSup', properties: {} },
+  { tag: 'html-abbr', name: 'HtmlAbbr', properties: {} },
+  { tag: 'html-cite', name: 'HtmlCite', properties: {} },
+  { tag: 'html-kbd', name: 'HtmlKbd', properties: {} },
+  { tag: 'html-samp', name: 'HtmlSamp', properties: {} },
+  { tag: 'html-var', name: 'HtmlVar', properties: {} },
+  { tag: 'html-dfn', name: 'HtmlDfn', properties: {} },
+  { tag: 'html-bdi', name: 'HtmlBdi', properties: {} },
+  {
+    tag: 'html-bdo',
+    name: 'HtmlBdo',
+    properties: {
+      dir: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-data',
+    name: 'HtmlData',
+    properties: {
+      value: { type: 'string', optional: true },
+    },
+  },
+
+  // Edited/annotated text
+  {
+    tag: 'html-del',
+    name: 'HtmlDel',
+    properties: {
+      cite: { type: 'string', optional: true },
+      dateTime: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-ins',
+    name: 'HtmlIns',
+    properties: {
+      cite: { type: 'string', optional: true },
+      dateTime: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-q',
+    name: 'HtmlQ',
+    properties: {
+      cite: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-time',
+    name: 'HtmlTime',
+    properties: {
+      dateTime: { type: 'string', optional: true },
+    },
+  },
+
+  // Ruby annotations
+  { tag: 'html-ruby', name: 'HtmlRuby', properties: {} },
+  { tag: 'html-rt', name: 'HtmlRt', properties: {} },
+  { tag: 'html-rp', name: 'HtmlRp', properties: {} },
+
+  // Description lists
+  { tag: 'html-dl', name: 'HtmlDl', properties: {} },
+  { tag: 'html-dt', name: 'HtmlDt', properties: {} },
+  { tag: 'html-dd', name: 'HtmlDd', properties: {} },
+
+  // Structural/semantic
+  { tag: 'html-figure', name: 'HtmlFigure', properties: {} },
+  { tag: 'html-figcaption', name: 'HtmlFigcaption', properties: {} },
+  {
+    tag: 'html-details',
+    name: 'HtmlDetails',
+    properties: {
+      open: { type: 'boolean', optional: true },
+    },
+  },
+  { tag: 'html-summary', name: 'HtmlSummary', properties: {} },
+  { tag: 'html-address', name: 'HtmlAddress', properties: {} },
+  {
+    tag: 'html-dialog',
+    name: 'HtmlDialog',
+    properties: {
+      open: { type: 'boolean', optional: true },
+    },
+  },
+  { tag: 'html-hgroup', name: 'HtmlHgroup', properties: {} },
+  { tag: 'html-search', name: 'HtmlSearch', properties: {} },
+
+  // Table additions
+  { tag: 'html-caption', name: 'HtmlCaption', properties: {} },
+  {
+    tag: 'html-colgroup',
+    name: 'HtmlColgroup',
+    properties: {
+      span: { type: 'number', optional: true },
+    },
+  },
+  {
+    tag: 'html-col',
+    name: 'HtmlCol',
+    properties: {
+      span: { type: 'number', optional: true },
+    },
+  },
+
+  // Form additions
+  {
+    tag: 'html-fieldset',
+    name: 'HtmlFieldset',
+    properties: {
+      disabled: { type: 'boolean', optional: true },
+      name: { type: 'string', optional: true },
+    },
+  },
+  { tag: 'html-legend', name: 'HtmlLegend', properties: {} },
+  {
+    tag: 'html-output',
+    name: 'HtmlOutput',
+    properties: {
+      name: { type: 'string', optional: true },
+      htmlFor: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-progress',
+    name: 'HtmlProgress',
+    properties: {
+      value: { type: 'number', optional: true },
+      max: { type: 'number', optional: true },
+    },
+  },
+  {
+    tag: 'html-meter',
+    name: 'HtmlMeter',
+    properties: {
+      value: { type: 'number', optional: true },
+      min: { type: 'number', optional: true },
+      max: { type: 'number', optional: true },
+      low: { type: 'number', optional: true },
+      high: { type: 'number', optional: true },
+      optimum: { type: 'number', optional: true },
+    },
+  },
+  {
+    tag: 'html-optgroup',
+    name: 'HtmlOptgroup',
+    properties: {
+      label: { type: 'string', optional: true },
+      disabled: { type: 'boolean', optional: true },
+    },
+  },
+  { tag: 'html-datalist', name: 'HtmlDatalist', properties: {} },
+
+  // Media additions
+  { tag: 'html-picture', name: 'HtmlPicture', properties: {} },
+  {
+    tag: 'html-track',
+    name: 'HtmlTrack',
+    properties: {
+      src: { type: 'string', optional: true },
+      kind: { type: 'string', optional: true },
+      srclang: { type: 'string', optional: true },
+      label: { type: 'string', optional: true },
+      default: { type: 'boolean', optional: true },
+    },
+  },
+
+  // Miscellaneous
+  { tag: 'html-wbr', name: 'HtmlWbr', properties: {} },
+  { tag: 'html-menu', name: 'HtmlMenu', properties: {} },
+
+  // SVG container/structural
+  {
+    tag: 'html-svg',
+    name: 'HtmlSvg',
+    properties: {
+      ...SVG_PRESENTATION_PROPERTIES,
+      viewBox: { type: 'string', optional: true },
+      xmlns: { type: 'string', optional: true },
+      width: { type: 'string', optional: true },
+      height: { type: 'string', optional: true },
+      preserveAspectRatio: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-g',
+    name: 'HtmlG',
+    properties: {
+      ...SVG_PRESENTATION_PROPERTIES,
+    },
+  },
+  { tag: 'html-defs', name: 'HtmlDefs', properties: {} },
+  {
+    tag: 'html-symbol',
+    name: 'HtmlSymbol',
+    properties: {
+      viewBox: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-use',
+    name: 'HtmlUse',
+    properties: {
+      href: { type: 'string', optional: true },
+      x: { type: 'string', optional: true },
+      y: { type: 'string', optional: true },
+      width: { type: 'string', optional: true },
+      height: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-clippath',
+    name: 'HtmlClipPath',
+    htmlTag: 'clipPath',
+    properties: {
+      clipPathUnits: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-mask',
+    name: 'HtmlMask',
+    properties: {
+      maskUnits: { type: 'string', optional: true },
+    },
+  },
+
+  // SVG shapes
+  {
+    tag: 'html-circle',
+    name: 'HtmlCircle',
+    properties: {
+      ...SVG_PRESENTATION_PROPERTIES,
+      cx: { type: 'string', optional: true },
+      cy: { type: 'string', optional: true },
+      r: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-ellipse',
+    name: 'HtmlEllipse',
+    properties: {
+      ...SVG_PRESENTATION_PROPERTIES,
+      cx: { type: 'string', optional: true },
+      cy: { type: 'string', optional: true },
+      rx: { type: 'string', optional: true },
+      ry: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-rect',
+    name: 'HtmlRect',
+    properties: {
+      ...SVG_PRESENTATION_PROPERTIES,
+      x: { type: 'string', optional: true },
+      y: { type: 'string', optional: true },
+      width: { type: 'string', optional: true },
+      height: { type: 'string', optional: true },
+      rx: { type: 'string', optional: true },
+      ry: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-line',
+    name: 'HtmlLine',
+    properties: {
+      ...SVG_PRESENTATION_PROPERTIES,
+      x1: { type: 'string', optional: true },
+      y1: { type: 'string', optional: true },
+      x2: { type: 'string', optional: true },
+      y2: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-path',
+    name: 'HtmlPath',
+    properties: {
+      ...SVG_PRESENTATION_PROPERTIES,
+      d: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-polygon',
+    name: 'HtmlPolygon',
+    properties: {
+      ...SVG_PRESENTATION_PROPERTIES,
+      points: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-polyline',
+    name: 'HtmlPolyline',
+    properties: {
+      ...SVG_PRESENTATION_PROPERTIES,
+      points: { type: 'string', optional: true },
+    },
+  },
+
+  // SVG text
+  {
+    tag: 'html-text',
+    name: 'HtmlText',
+    properties: {
+      ...SVG_PRESENTATION_PROPERTIES,
+      x: { type: 'string', optional: true },
+      y: { type: 'string', optional: true },
+      dx: { type: 'string', optional: true },
+      dy: { type: 'string', optional: true },
+      textAnchor: { type: 'string', optional: true },
+      dominantBaseline: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-tspan',
+    name: 'HtmlTspan',
+    properties: {
+      ...SVG_PRESENTATION_PROPERTIES,
+      x: { type: 'string', optional: true },
+      y: { type: 'string', optional: true },
+      dx: { type: 'string', optional: true },
+      dy: { type: 'string', optional: true },
+    },
+  },
+
+  // SVG gradients/patterns
+  {
+    tag: 'html-lineargradient',
+    name: 'HtmlLinearGradient',
+    htmlTag: 'linearGradient',
+    properties: {
+      x1: { type: 'string', optional: true },
+      y1: { type: 'string', optional: true },
+      x2: { type: 'string', optional: true },
+      y2: { type: 'string', optional: true },
+      gradientUnits: { type: 'string', optional: true },
+      gradientTransform: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-radialgradient',
+    name: 'HtmlRadialGradient',
+    htmlTag: 'radialGradient',
+    properties: {
+      cx: { type: 'string', optional: true },
+      cy: { type: 'string', optional: true },
+      r: { type: 'string', optional: true },
+      fx: { type: 'string', optional: true },
+      fy: { type: 'string', optional: true },
+      gradientUnits: { type: 'string', optional: true },
+      gradientTransform: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-stop',
+    name: 'HtmlStop',
+    properties: {
+      offset: { type: 'string', optional: true },
+      stopColor: { type: 'string', optional: true },
+      stopOpacity: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-pattern',
+    name: 'HtmlPattern',
+    properties: {
+      x: { type: 'string', optional: true },
+      y: { type: 'string', optional: true },
+      width: { type: 'string', optional: true },
+      height: { type: 'string', optional: true },
+      patternUnits: { type: 'string', optional: true },
+      patternTransform: { type: 'string', optional: true },
+    },
+  },
+
+  // SVG other
+  {
+    tag: 'html-image',
+    name: 'HtmlImage',
+    properties: {
+      href: { type: 'string', optional: true },
+      x: { type: 'string', optional: true },
+      y: { type: 'string', optional: true },
+      width: { type: 'string', optional: true },
+      height: { type: 'string', optional: true },
+      preserveAspectRatio: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-foreignobject',
+    name: 'HtmlForeignObject',
+    htmlTag: 'foreignObject',
+    properties: {
+      x: { type: 'string', optional: true },
+      y: { type: 'string', optional: true },
+      width: { type: 'string', optional: true },
+      height: { type: 'string', optional: true },
+    },
+  },
+  {
+    tag: 'html-marker',
+    name: 'HtmlMarker',
+    properties: {
+      markerWidth: { type: 'string', optional: true },
+      markerHeight: { type: 'string', optional: true },
+      refX: { type: 'string', optional: true },
+      refY: { type: 'string', optional: true },
+      orient: { type: 'string', optional: true },
+      markerUnits: { type: 'string', optional: true },
+    },
+  },
+  { tag: 'html-title', name: 'HtmlTitle', properties: {} },
 ];

packages/twenty-front-component-renderer/src/constants/HtmlTagToRemoteComponent.ts

@@ -4,24 +4,29 @@ const UTILITY_TAG_MAPPINGS: Record<string, string> = {
   'remote-style': 'RemoteStyle',
 };
 
+const getHostTagName = (element: (typeof ALLOWED_HTML_ELEMENTS)[number]) =>
+  element.htmlTag ??
+  (element.tag.startsWith('html-') ? element.tag.slice(5) : element.tag);
+
 export const HTML_TAG_TO_REMOTE_COMPONENT: Record<string, string> = {
   ...Object.fromEntries(
     ALLOWED_HTML_ELEMENTS.map((element) => [
-      element.tag.startsWith('html-') ? element.tag.slice(5) : element.tag,
+      getHostTagName(element),
       element.name,
     ]),
   ),
   ...UTILITY_TAG_MAPPINGS,
 };
 
-// Maps standard HTML tag names to their custom element equivalents
-// used by the remote DOM polyfill (e.g. "div" → "html-div").
+// Maps standard HTML/SVG tag names to their custom element equivalents
+// used by the remote DOM polyfill (e.g. "div" → "html-div",
+// "clipPath" → "html-clippath").
 // Consumed by the jsx-runtime wrapper so React creates the correct
-// custom elements instead of standard HTML tags.
+// custom elements instead of standard HTML/SVG tags.
 export const HTML_TAG_TO_CUSTOM_ELEMENT_TAG: Record<string, string> = {
   ...Object.fromEntries(
     ALLOWED_HTML_ELEMENTS.map((element) => [
-      element.tag.startsWith('html-') ? element.tag.slice(5) : element.tag,
+      getHostTagName(element),
       element.tag,
     ]),
   ),

packages/twenty-front-component-renderer/src/constants/SvgPresentationProperties.ts

@@ -0,0 +1,22 @@
+import { type PropertySchema } from './PropertySchema';
+
+export const SVG_PRESENTATION_PROPERTIES: Record<string, PropertySchema> = {
+  fill: { type: 'string', optional: true },
+  fillOpacity: { type: 'string', optional: true },
+  fillRule: { type: 'string', optional: true },
+  stroke: { type: 'string', optional: true },
+  strokeWidth: { type: 'string', optional: true },
+  strokeOpacity: { type: 'string', optional: true },
+  strokeLinecap: { type: 'string', optional: true },
+  strokeLinejoin: { type: 'string', optional: true },
+  strokeDasharray: { type: 'string', optional: true },
+  strokeDashoffset: { type: 'string', optional: true },
+  strokeMiterlimit: { type: 'string', optional: true },
+  opacity: { type: 'string', optional: true },
+  transform: { type: 'string', optional: true },
+  clipPath: { type: 'string', optional: true },
+  clipRule: { type: 'string', optional: true },
+  mask: { type: 'string', optional: true },
+  filter: { type: 'string', optional: true },
+  pointerEvents: { type: 'string', optional: true },
+};

packages/twenty-front-component-renderer/src/host/generated/host-component-registry.ts

@@ -92,6 +92,162 @@ export const componentRegistry: Map<string, ComponentRegistryValue> = new Map([
     'html-source',
     createRemoteComponentRenderer(createHtmlHostWrapper('source')),
   ],
+  ['html-b', createRemoteComponentRenderer(createHtmlHostWrapper('b'))],
+  ['html-i', createRemoteComponentRenderer(createHtmlHostWrapper('i'))],
+  ['html-u', createRemoteComponentRenderer(createHtmlHostWrapper('u'))],
+  ['html-s', createRemoteComponentRenderer(createHtmlHostWrapper('s'))],
+  ['html-mark', createRemoteComponentRenderer(createHtmlHostWrapper('mark'))],
+  ['html-sub', createRemoteComponentRenderer(createHtmlHostWrapper('sub'))],
+  ['html-sup', createRemoteComponentRenderer(createHtmlHostWrapper('sup'))],
+  ['html-abbr', createRemoteComponentRenderer(createHtmlHostWrapper('abbr'))],
+  ['html-cite', createRemoteComponentRenderer(createHtmlHostWrapper('cite'))],
+  ['html-kbd', createRemoteComponentRenderer(createHtmlHostWrapper('kbd'))],
+  ['html-samp', createRemoteComponentRenderer(createHtmlHostWrapper('samp'))],
+  ['html-var', createRemoteComponentRenderer(createHtmlHostWrapper('var'))],
+  ['html-dfn', createRemoteComponentRenderer(createHtmlHostWrapper('dfn'))],
+  ['html-bdi', createRemoteComponentRenderer(createHtmlHostWrapper('bdi'))],
+  ['html-bdo', createRemoteComponentRenderer(createHtmlHostWrapper('bdo'))],
+  ['html-data', createRemoteComponentRenderer(createHtmlHostWrapper('data'))],
+  ['html-del', createRemoteComponentRenderer(createHtmlHostWrapper('del'))],
+  ['html-ins', createRemoteComponentRenderer(createHtmlHostWrapper('ins'))],
+  ['html-q', createRemoteComponentRenderer(createHtmlHostWrapper('q'))],
+  ['html-time', createRemoteComponentRenderer(createHtmlHostWrapper('time'))],
+  ['html-ruby', createRemoteComponentRenderer(createHtmlHostWrapper('ruby'))],
+  ['html-rt', createRemoteComponentRenderer(createHtmlHostWrapper('rt'))],
+  ['html-rp', createRemoteComponentRenderer(createHtmlHostWrapper('rp'))],
+  ['html-dl', createRemoteComponentRenderer(createHtmlHostWrapper('dl'))],
+  ['html-dt', createRemoteComponentRenderer(createHtmlHostWrapper('dt'))],
+  ['html-dd', createRemoteComponentRenderer(createHtmlHostWrapper('dd'))],
+  [
+    'html-figure',
+    createRemoteComponentRenderer(createHtmlHostWrapper('figure')),
+  ],
+  [
+    'html-figcaption',
+    createRemoteComponentRenderer(createHtmlHostWrapper('figcaption')),
+  ],
+  [
+    'html-details',
+    createRemoteComponentRenderer(createHtmlHostWrapper('details')),
+  ],
+  [
+    'html-summary',
+    createRemoteComponentRenderer(createHtmlHostWrapper('summary')),
+  ],
+  [
+    'html-address',
+    createRemoteComponentRenderer(createHtmlHostWrapper('address')),
+  ],
+  [
+    'html-dialog',
+    createRemoteComponentRenderer(createHtmlHostWrapper('dialog')),
+  ],
+  [
+    'html-hgroup',
+    createRemoteComponentRenderer(createHtmlHostWrapper('hgroup')),
+  ],
+  [
+    'html-search',
+    createRemoteComponentRenderer(createHtmlHostWrapper('search')),
+  ],
+  [
+    'html-caption',
+    createRemoteComponentRenderer(createHtmlHostWrapper('caption')),
+  ],
+  [
+    'html-colgroup',
+    createRemoteComponentRenderer(createHtmlHostWrapper('colgroup')),
+  ],
+  ['html-col', createRemoteComponentRenderer(createHtmlHostWrapper('col'))],
+  [
+    'html-fieldset',
+    createRemoteComponentRenderer(createHtmlHostWrapper('fieldset')),
+  ],
+  [
+    'html-legend',
+    createRemoteComponentRenderer(createHtmlHostWrapper('legend')),
+  ],
+  [
+    'html-output',
+    createRemoteComponentRenderer(createHtmlHostWrapper('output')),
+  ],
+  [
+    'html-progress',
+    createRemoteComponentRenderer(createHtmlHostWrapper('progress')),
+  ],
+  ['html-meter', createRemoteComponentRenderer(createHtmlHostWrapper('meter'))],
+  [
+    'html-optgroup',
+    createRemoteComponentRenderer(createHtmlHostWrapper('optgroup')),
+  ],
+  [
+    'html-datalist',
+    createRemoteComponentRenderer(createHtmlHostWrapper('datalist')),
+  ],
+  [
+    'html-picture',
+    createRemoteComponentRenderer(createHtmlHostWrapper('picture')),
+  ],
+  ['html-track', createRemoteComponentRenderer(createHtmlHostWrapper('track'))],
+  ['html-wbr', createRemoteComponentRenderer(createHtmlHostWrapper('wbr'))],
+  ['html-menu', createRemoteComponentRenderer(createHtmlHostWrapper('menu'))],
+  ['html-svg', createRemoteComponentRenderer(createHtmlHostWrapper('svg'))],
+  ['html-g', createRemoteComponentRenderer(createHtmlHostWrapper('g'))],
+  ['html-defs', createRemoteComponentRenderer(createHtmlHostWrapper('defs'))],
+  [
+    'html-symbol',
+    createRemoteComponentRenderer(createHtmlHostWrapper('symbol')),
+  ],
+  ['html-use', createRemoteComponentRenderer(createHtmlHostWrapper('use'))],
+  [
+    'html-clippath',
+    createRemoteComponentRenderer(createHtmlHostWrapper('clipPath')),
+  ],
+  ['html-mask', createRemoteComponentRenderer(createHtmlHostWrapper('mask'))],
+  [
+    'html-circle',
+    createRemoteComponentRenderer(createHtmlHostWrapper('circle')),
+  ],
+  [
+    'html-ellipse',
+    createRemoteComponentRenderer(createHtmlHostWrapper('ellipse')),
+  ],
+  ['html-rect', createRemoteComponentRenderer(createHtmlHostWrapper('rect'))],
+  ['html-line', createRemoteComponentRenderer(createHtmlHostWrapper('line'))],
+  ['html-path', createRemoteComponentRenderer(createHtmlHostWrapper('path'))],
+  [
+    'html-polygon',
+    createRemoteComponentRenderer(createHtmlHostWrapper('polygon')),
+  ],
+  [
+    'html-polyline',
+    createRemoteComponentRenderer(createHtmlHostWrapper('polyline')),
+  ],
+  ['html-text', createRemoteComponentRenderer(createHtmlHostWrapper('text'))],
+  ['html-tspan', createRemoteComponentRenderer(createHtmlHostWrapper('tspan'))],
+  [
+    'html-lineargradient',
+    createRemoteComponentRenderer(createHtmlHostWrapper('linearGradient')),
+  ],
+  [
+    'html-radialgradient',
+    createRemoteComponentRenderer(createHtmlHostWrapper('radialGradient')),
+  ],
+  ['html-stop', createRemoteComponentRenderer(createHtmlHostWrapper('stop'))],
+  [
+    'html-pattern',
+    createRemoteComponentRenderer(createHtmlHostWrapper('pattern')),
+  ],
+  ['html-image', createRemoteComponentRenderer(createHtmlHostWrapper('image'))],
+  [
+    'html-foreignobject',
+    createRemoteComponentRenderer(createHtmlHostWrapper('foreignObject')),
+  ],
+  [
+    'html-marker',
+    createRemoteComponentRenderer(createHtmlHostWrapper('marker')),
+  ],
+  ['html-title', createRemoteComponentRenderer(createHtmlHostWrapper('title'))],
   ['remote-style', createRemoteComponentRenderer(RemoteStyleRenderer)],
   ['remote-fragment', RemoteFragmentRenderer],
 ]);

packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts

@@ -13,14 +13,14 @@ const EVENT_NAME_MAP: Record<string, string> = Object.fromEntries(
 );
 
 const VOID_ELEMENTS = new Set([
-  'input',
-  'br',
-  'hr',
-  'img',
   'area',
   'base',
+  'br',
   'col',
   'embed',
+  'hr',
+  'img',
+  'input',
   'link',
   'meta',
   'source',

packages/twenty-front-component-renderer/tsconfig.json

@@ -31,7 +31,6 @@
     "src/remote/mock/**/*",
     "src/host/generated/host-component-registry.ts",
     "src/remote/generated/remote-components.ts",
-    "src/remote/generated/remote-elements.ts",
-    "src/__stories__/**/*"
+    "src/remote/generated/remote-elements.ts"
   ]
 }

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

@@ -2,12 +2,13 @@ import { useHasAccessTokenPair } from '@/auth/hooks/useHasAccessTokenPair';
 import { useDefaultHomePagePath } from '@/navigation/hooks/useDefaultHomePagePath';
 import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
 import { useIsWorkspaceActivationStatusEqualsTo } from '@/workspace/hooks/useIsWorkspaceActivationStatusEqualsTo';
+import { useQuery } from '@apollo/client/react';
 import { useParams } from 'react-router-dom';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { AppPath, SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 
-import { OnboardingStatus } from '~/generated-metadata/graphql';
+import { OnboardingStatus, PageLayoutType } from '~/generated-metadata/graphql';
 
 import { useIsCurrentLocationOnAWorkspace } from '@/domain-manager/hooks/useIsCurrentLocationOnAWorkspace';
 import { usePageChangeEffectNavigateLocation } from '~/hooks/usePageChangeEffectNavigateLocation';
@@ -58,11 +59,23 @@ const setupMockIsOnAWorkspace = (isOnAWorkspace: boolean) => {
   });
 };
 
+jest.mock('@apollo/client/react');
+const setupMockUseQuery = (result?: { data?: unknown; loading?: boolean }) => {
+  jest.mocked(useQuery).mockReturnValueOnce({
+    data: result?.data ?? undefined,
+    loading: result?.loading ?? false,
+  } as ReturnType<typeof useQuery>);
+};
+
 jest.mock('react-router-dom');
-const setupMockUseParams = (objectNamePlural?: string) => {
-  jest
-    .mocked(useParams)
-    .mockReturnValueOnce({ objectNamePlural: objectNamePlural ?? '' });
+const setupMockUseParams = (
+  objectNamePlural?: string,
+  pageLayoutId?: string,
+) => {
+  jest.mocked(useParams).mockReturnValueOnce({
+    objectNamePlural: objectNamePlural ?? '',
+    pageLayoutId,
+  });
 };
 
 jest.mock('@/ui/utilities/state/jotai/hooks/useAtomStateValue');
@@ -92,6 +105,8 @@ const testCases: {
   objectNamePluralFromMetadata?: string;
   verifyEmailRedirectPath?: string;
   returnToPath?: string;
+  pageLayoutId?: string;
+  useQueryResult?: { data?: unknown; loading?: boolean };
 }[] = [
   { loc: AppPath.Verify, hasAccessTokenPair: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: AppPath.PlanRequired },
   { loc: AppPath.Verify, hasAccessTokenPair: true, isWorkspaceSuspended: true, onboardingStatus: OnboardingStatus.COMPLETED, res: getSettingsPath(SettingsPath.Billing) },
@@ -277,6 +292,20 @@ const testCases: {
   { loc: AppPath.RecordShowPage, hasAccessTokenPair: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.BOOK_ONBOARDING, res: AppPath.BookCallDecision },
   { loc: AppPath.RecordShowPage, hasAccessTokenPair: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.COMPLETED, res: undefined },
 
+  { loc: AppPath.PageLayoutPage, hasAccessTokenPair: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: AppPath.PlanRequired },
+  { loc: AppPath.PageLayoutPage, hasAccessTokenPair: true, isWorkspaceSuspended: true, onboardingStatus: OnboardingStatus.COMPLETED, res: getSettingsPath(SettingsPath.Billing) },
+  { loc: AppPath.PageLayoutPage, hasAccessTokenPair: false, isWorkspaceSuspended: false, onboardingStatus: undefined, res: AppPath.SignInUp },
+  { loc: AppPath.PageLayoutPage, hasAccessTokenPair: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.WORKSPACE_ACTIVATION, res: AppPath.CreateWorkspace },
+  { loc: AppPath.PageLayoutPage, hasAccessTokenPair: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PROFILE_CREATION, res: AppPath.CreateProfile },
+  { loc: AppPath.PageLayoutPage, hasAccessTokenPair: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.SYNC_EMAIL, res: AppPath.SyncEmails },
+  { loc: AppPath.PageLayoutPage, hasAccessTokenPair: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.INVITE_TEAM, res: AppPath.InviteTeam },
+  { loc: AppPath.PageLayoutPage, hasAccessTokenPair: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.BOOK_ONBOARDING, res: AppPath.BookCallDecision },
+  { loc: AppPath.PageLayoutPage, hasAccessTokenPair: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.COMPLETED, res: undefined },
+  { loc: AppPath.PageLayoutPage, hasAccessTokenPair: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.COMPLETED, res: undefined, pageLayoutId: 'valid-id', useQueryResult: { loading: true } },
+  { loc: AppPath.PageLayoutPage, hasAccessTokenPair: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.COMPLETED, res: AppPath.NotFound, pageLayoutId: 'non-existent-id', useQueryResult: { data: { getPageLayout: null }, loading: false } },
+  { loc: AppPath.PageLayoutPage, hasAccessTokenPair: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.COMPLETED, res: AppPath.NotFound, pageLayoutId: 'wrong-type-id', useQueryResult: { data: { getPageLayout: { type: PageLayoutType.RECORD_PAGE } }, loading: false } },
+  { loc: AppPath.PageLayoutPage, hasAccessTokenPair: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.COMPLETED, res: undefined, pageLayoutId: 'valid-standalone-id', useQueryResult: { data: { getPageLayout: { type: PageLayoutType.STANDALONE_PAGE } }, loading: false } },
+
   { loc: AppPath.SettingsCatchAll, hasAccessTokenPair: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: AppPath.PlanRequired },
   { loc: AppPath.SettingsCatchAll, hasAccessTokenPair: true, isWorkspaceSuspended: true, onboardingStatus: OnboardingStatus.COMPLETED, res: undefined },
   { loc: AppPath.SettingsCatchAll, hasAccessTokenPair: false, isWorkspaceSuspended: false, onboardingStatus: undefined, res: AppPath.SignInUp },
@@ -350,6 +379,8 @@ describe('usePageChangeEffectNavigateLocation', () => {
       objectNamePluralFromMetadata,
       verifyEmailRedirectPath,
       returnToPath,
+      pageLayoutId,
+      useQueryResult,
       res,
     }) => {
       setupMockIsMatchingLocation(loc);
@@ -357,7 +388,8 @@ describe('usePageChangeEffectNavigateLocation', () => {
       setupMockIsWorkspaceActivationStatusEqualsTo(isWorkspaceSuspended);
       setupMockHasAccessTokenPair(hasAccessTokenPair);
       setupMockIsOnAWorkspace(isOnAWorkspace ?? true);
-      setupMockUseParams(objectNamePluralFromParams);
+      setupMockUseQuery(useQueryResult);
+      setupMockUseParams(objectNamePluralFromParams, pageLayoutId);
       setupMockState(
         objectNamePluralFromMetadata,
         verifyEmailRedirectPath,
@@ -379,6 +411,12 @@ describe('usePageChangeEffectNavigateLocation', () => {
           ['nonExistingObjectInParam', 'existingObjectInParam:false'].length +
           ['caseWithRedirectionToVerifyEmailRedirectPath', 'caseWithout']
             .length +
+          [
+            'pageLayout:loading',
+            'pageLayout:missing',
+            'pageLayout:wrongType',
+            'pageLayout:validStandalone',
+          ].length +
           ['returnToPath:verify', 'returnToPath:signInUp', 'returnToPath:index']
             .length +
           ['notOnWorkspace:verify', 'notOnWorkspace:signInUp'].length,

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

@@ -11,12 +11,17 @@ import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useIsWorkspaceActivationStatusEqualsTo } from '@/workspace/hooks/useIsWorkspaceActivationStatusEqualsTo';
 import { isValidReturnToPath } from '@/auth/utils/isValidReturnToPath';
+import { useQuery } from '@apollo/client/react';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useLocation, useParams } from 'react-router-dom';
 import { AppPath, SettingsPath } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { WorkspaceActivationStatus } from 'twenty-shared/workspace';
-import { OnboardingStatus } from '~/generated-metadata/graphql';
+import {
+  FindOnePageLayoutTypeDocument,
+  OnboardingStatus,
+  PageLayoutType,
+} from '~/generated-metadata/graphql';
 import { isMatchingLocation } from '~/utils/isMatchingLocation';
 
 const readReturnToPathFromUrlSearchParams = (): string | null => {
@@ -39,11 +44,27 @@ export const usePageChangeEffectNavigateLocation = () => {
   const someMatchingLocationOf = (appPaths: AppPath[]): boolean =>
     appPaths.some((appPath) => isMatchingLocation(location, appPath));
 
-  const objectNamePlural = useParams().objectNamePlural ?? '';
+  const params = useParams();
+
+  const objectNamePlural = params.objectNamePlural ?? '';
   const objectMetadataItems = useAtomStateValue(objectMetadataItemsSelector);
   const objectMetadataItem = objectMetadataItems?.find(
     (objectMetadataItem) => objectMetadataItem.namePlural === objectNamePlural,
   );
+
+  const pageLayoutId = params.pageLayoutId;
+  const isOnPageLayoutPage = isMatchingLocation(
+    location,
+    AppPath.PageLayoutPage,
+  );
+
+  const { data: pageLayoutData, loading: isPageLayoutLoading } = useQuery(
+    FindOnePageLayoutTypeDocument,
+    {
+      variables: { id: pageLayoutId ?? '' },
+      skip: !isOnPageLayoutPage || !isDefined(pageLayoutId),
+    },
+  );
   const verifyEmailRedirectPath = useAtomStateValue(
     verifyEmailRedirectPathState,
   );
@@ -157,5 +178,15 @@ export const usePageChangeEffectNavigateLocation = () => {
     return AppPath.NotFound;
   }
 
+  if (
+    isOnPageLayoutPage &&
+    isDefined(pageLayoutId) &&
+    !isPageLayoutLoading &&
+    (!isDefined(pageLayoutData?.getPageLayout) ||
+      pageLayoutData.getPageLayout.type !== PageLayoutType.STANDALONE_PAGE)
+  ) {
+    return AppPath.NotFound;
+  }
+
   return;
 };