Workflow step deletion fails when referenced logic function already deleted

https://sonarly.com/issue/5446?type=bug

Deleting a CODE workflow step throws "Logic function to destroy not found" when the referenced logic function has already been destroyed, causing the deletion to appear failed even though the step was successfully removed from the workflow version.

Fix: The fix makes the CODE step deletion side effect idempotent by catching `LogicFunctionException` with code `LOGIC_FUNCTION_NOT_FOUND` and silently ignoring it. All other exception types are re-thrown, so genuine errors are not suppressed.

The key insight is that "logic function already deleted" is a valid idempotent outcome for a cleanup side effect — especially since the workflow version step is already removed from the DB before side effects run. Treating a missing resource as a fatal error in a cleanup path is incorrect; the desired end state (logic function gone) has already been achieved.

```typescript file=packages/twenty-server/src/modules/workflow/workflow-builder/workflow-version-step/workflow-version-step-operations.workspace-service.ts lines=24-27
import {
  LogicFunctionException,
  LogicFunctionExceptionCode,
} from 'src/engine/metadata-modules/logic-function/logic-function.exception';
```

```typescript file=packages/twenty-server/src/modules/workflow/workflow-builder/workflow-version-step/workflow-version-step-operations.workspace-service.ts lines=93-110
case WorkflowActionType.CODE: {
  try {
    await this.logicFunctionFromSourceService.deleteOneWithSource({
      id: step.settings.input.logicFunctionId,
      workspaceId,
    });
  } catch (error) {
    if (
      !(
        error instanceof LogicFunctionException &&
        error.code ===
          LogicFunctionExceptionCode.LOGIC_FUNCTION_NOT_FOUND
      )
    ) {
      throw error;
    }
  }
  break;
}
```

.github/actions/spawn-twenty-docker-image/action.yaml

@@ -1,80 +0,0 @@
-name: Spawn Twenty Docker Image
-description: >
-  Starts a full Twenty instance (server, worker, database, redis) using Docker
-  Compose. The server is available at http://localhost:3000 for subsequent steps
-  in the caller's job.
-  Pulls the specified semver image tag from Docker Hub.
-  Designed to be consumed from external repositories (e.g., twenty-app).
-
-inputs:
-  twenty-version:
-    description: 'Twenty Docker Hub image tag as semver (e.g., v0.40.0, v1.0.0).'
-    required: true
-  twenty-repository:
-    description: 'Twenty repository to checkout docker compose files from.'
-    required: false
-    default: 'twentyhq/twenty'
-  github-token:
-    description: 'GitHub token for cross-repo checkout. Required when calling from an external repository.'
-    required: false
-    default: ${{ github.token }}
-
-outputs:
-  server-url:
-    description: 'URL where the Twenty server can be reached'
-    value: http://localhost:3000
-  access-token:
-    description: 'Admin access token for the Twenty instance'
-    value: ${{ steps.admin-token.outputs.access-token }}
-
-runs:
-  using: 'composite'
-  steps:
-    - name: Validate version
-      shell: bash
-      run: |
-        VERSION="${{ inputs.twenty-version }}"
-        if ! echo "$VERSION" | grep -qE '^v[0-9]+\.[0-9]+\.[0-9]+$'; then
-          echo "::error::twenty-version must be a semver tag (e.g., v0.40.0). Got: '$VERSION'"
-          exit 1
-        fi
-
-    - name: Checkout docker compose files
-      uses: actions/checkout@v4
-      with:
-        repository: ${{ inputs.twenty-repository }}
-        ref: ${{ inputs.twenty-version }}
-        token: ${{ inputs.github-token }}
-        sparse-checkout: |
-          packages/twenty-docker
-        sparse-checkout-cone-mode: false
-        path: .twenty-spawn
-
-    - name: Prepare environment
-      shell: bash
-      working-directory: ./.twenty-spawn/packages/twenty-docker
-      run: |
-        cp .env.example .env
-        echo "" >> .env
-        echo "TAG=${{ inputs.twenty-version }}" >> .env
-        echo "APP_SECRET=replace_me_with_a_random_string" >> .env
-        echo "SERVER_URL=http://localhost:3000" >> .env
-
-    - name: Start Twenty instance
-      shell: bash
-      working-directory: ./.twenty-spawn/packages/twenty-docker
-      run: |
-        docker compose up -d --wait || {
-          echo "::error::Docker compose failed to start or health checks timed out"
-          docker compose logs
-          exit 1
-        }
-        echo "Twenty instance is ready at http://localhost:3000"
-
-    - name: Set admin access token
-      id: admin-token
-      shell: bash
-      run: |
-        ACCESS_TOKEN="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIyMDIwMjAyMC1lNmI1LTQ2ODAtOGEzMi1iODIwOTczNzE1NmIiLCJ1c2VySWQiOiIyMDIwMjAyMC1lNmI1LTQ2ODAtOGEzMi1iODIwOTczNzE1NmIiLCJ3b3Jrc3BhY2VJZCI6IjIwMjAyMDIwLTFjMjUtNGQwMi1iZjI1LTZhZWNjZjdlYTQxOSIsIndvcmtzcGFjZU1lbWJlcklkIjoiMjAyMDIwMjAtNDYzZi00MzViLTgyOGMtMTA3ZTAwN2EyNzExIiwidXNlcldvcmtzcGFjZUlkIjoiMjAyMDIwMjAtMWU3Yy00M2Q5LWE1ZGItNjg1YjUwNjlkODE2IiwidHlwZSI6IkFDQ0VTUyIsImF1dGhQcm92aWRlciI6InBhc3N3b3JkIiwiaWF0IjoxNzUxMjgxNzA0LCJleHAiOjIwNjY4NTc3MDR9.HMGqCsVlOAPVUBhKSGlD1X86VoHKt4LIUtET3CGIdik"
-        echo "::add-mask::$ACCESS_TOKEN"
-        echo "access-token=$ACCESS_TOKEN" >> "$GITHUB_OUTPUT"

.github/workflows/cd-deploy-main.yaml

@@ -11,7 +11,7 @@ on:
 jobs:
   deploy-main:
     timeout-minutes: 3
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     steps:
       - name: Repository Dispatch
         uses: peter-evans/repository-dispatch@v2

.github/workflows/cd-deploy-tag.yaml

@@ -11,7 +11,7 @@ on:
 jobs:
   deploy-tag:
     timeout-minutes: 3
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     steps:
       - name: Repository Dispatch
         uses: peter-evans/repository-dispatch@v2

.github/workflows/changed-files.yaml

@@ -16,7 +16,7 @@ permissions:
 jobs:
   changed-files:
     timeout-minutes: 5
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     outputs:
       any_changed: ${{ steps.changed-files.outputs.any_changed }}
     steps:

.github/workflows/ci-breaking-changes.yaml

@@ -32,7 +32,7 @@ jobs:
     needs: changed-files-check
     if: needs.changed-files-check.outputs.any_changed == 'true'
     timeout-minutes: 45
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     services:
       postgres:
         image: twentycrm/twenty-postgres-spilo

.github/workflows/ci-create-app.yaml

@@ -25,7 +25,7 @@ jobs:
     needs: changed-files-check
     if: needs.changed-files-check.outputs.any_changed == 'true'
     timeout-minutes: 30
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     strategy:
       matrix:
         task: [lint, typecheck, test]
@@ -50,7 +50,7 @@ jobs:
   ci-create-app-status-check:
     if: always() && !cancelled()
     timeout-minutes: 5
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     needs: [changed-files-check, create-app-test]
     steps:
       - name: Fail job if any needs failed

.github/workflows/ci-docs.yaml

@@ -27,7 +27,7 @@ jobs:
     needs: changed-files-check
     if: needs.changed-files-check.outputs.any_changed == 'true'
     timeout-minutes: 10
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     steps:
       - name: Cancel Previous Runs
         uses: styfle/cancel-workflow-action@0.11.0

.github/workflows/ci-emails.yaml

@@ -25,7 +25,7 @@ jobs:
     needs: changed-files-check
     if: needs.changed-files-check.outputs.any_changed == 'true'
     timeout-minutes: 10
-    runs-on: ubuntu-latest-8-cores
+    runs-on: depot-ubuntu-24.04-8
     steps:
       - name: Fetch custom Github Actions and base branch history
         uses: actions/checkout@v4
@@ -56,7 +56,7 @@ jobs:
   ci-emails-status-check:
     if: always() && !cancelled()
     timeout-minutes: 5
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     needs: [changed-files-check, emails-test]
     steps:
       - name: Fail job if any needs failed

.github/workflows/ci-front.yaml

@@ -14,8 +14,8 @@ concurrency:
 
 env:
   # restore-cache action adds 'v4-' prefix and '-<branch>-<sha>' suffix to the key
-  STORYBOOK_BUILD_CACHE_KEY_FOR_RESTORE_ACTION: storybook-build-ubuntu-latest-8-cores-runner
-  STORYBOOK_BUILD_CACHE_KEY_FOR_SAVE_ACTION: v4-storybook-build-ubuntu-latest-8-cores-runner-${{ github.ref_name }}-${{ github.sha }}
+  STORYBOOK_BUILD_CACHE_KEY_FOR_RESTORE_ACTION: storybook-build-depot-ubuntu-24.04-8-runner
+  STORYBOOK_BUILD_CACHE_KEY_FOR_SAVE_ACTION: v4-storybook-build-depot-ubuntu-24.04-8-runner-${{ github.ref_name }}-${{ github.sha }}
 
 jobs:
   changed-files-check:
@@ -42,7 +42,7 @@ jobs:
     needs: changed-files-check
     if: needs.changed-files-check.outputs.any_changed == 'true'
     timeout-minutes: 30
-    runs-on: ubuntu-latest-8-cores
+    runs-on: depot-ubuntu-24.04-8
     env:
       REACT_APP_SERVER_BASE_URL: http://localhost:3000
     steps:
@@ -68,7 +68,7 @@ jobs:
           key: ${{ env.STORYBOOK_BUILD_CACHE_KEY_FOR_SAVE_ACTION }}
   front-sb-test:
     timeout-minutes: 30
-    runs-on: ubuntu-latest-8-cores
+    runs-on: depot-ubuntu-24.04-8
     needs: front-sb-build
     strategy:
       fail-fast: false
@@ -115,7 +115,7 @@ jobs:
       #     path: packages/twenty-front/coverage/storybook/coverage-shard-${{matrix.shard}}.json
   # merge-reports-and-check-coverage:
   #   timeout-minutes: 30
-  #   runs-on: ubuntu-latest
+  #   runs-on: depot-ubuntu-24.04
   #   needs: front-sb-test
   #   env:
   #     PATH_TO_COVERAGE: packages/twenty-front/coverage/storybook
@@ -143,7 +143,7 @@ jobs:
     timeout-minutes: 30
     if: false
     needs: front-sb-build
-    runs-on: ubuntu-latest-8-cores
+    runs-on: depot-ubuntu-24.04-8
     env:
       REACT_APP_SERVER_BASE_URL: http://127.0.0.1:3000
       CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
@@ -169,7 +169,7 @@ jobs:
     needs: changed-files-check
     if: needs.changed-files-check.outputs.any_changed == 'true'
     timeout-minutes: 30
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     env:
       NODE_OPTIONS: '--max-old-space-size=4096'
       TASK_CACHE_KEY: front-task-${{ matrix.task }}
@@ -211,7 +211,7 @@ jobs:
     needs: changed-files-check
     if: needs.changed-files-check.outputs.any_changed == 'true'
     timeout-minutes: 30
-    runs-on: ubuntu-latest-8-cores
+    runs-on: depot-ubuntu-24.04-8
     env:
       NODE_OPTIONS: "--max-old-space-size=10240"
     steps:
@@ -236,7 +236,7 @@ jobs:
       #     path: packages/twenty-front/build
       #     retention-days: 1
   e2e-test:
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     needs: [changed-files-check-e2e, front-build]
     if: |
       always() &&
@@ -349,7 +349,7 @@ jobs:
   ci-front-status-check:
     if: always() && !cancelled()
     timeout-minutes: 5
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     needs:
       [
         changed-files-check,
@@ -366,7 +366,7 @@ jobs:
   ci-e2e-status-check:
     if: always() && !cancelled()
     timeout-minutes: 5
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     needs: [changed-files-check-e2e, e2e-test]
     steps:
       - name: Fail job if any needs failed

.github/workflows/ci-release-create.yaml

@@ -25,7 +25,7 @@ defaults:
 jobs:
   create_pr:
     timeout-minutes: 10
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/ci-release-merge.yaml

@@ -15,7 +15,7 @@ defaults:
 jobs:
   tag_and_release:
     timeout-minutes: 10
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'release')
     steps:
       - name: Check PR Author

.github/workflows/ci-sdk.yaml

@@ -23,7 +23,7 @@ jobs:
     needs: changed-files-check
     if: needs.changed-files-check.outputs.any_changed == 'true'
     timeout-minutes: 30
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     strategy:
       matrix:
         task: [lint, typecheck, test:unit, storybook:build, storybook:test, test:integration]
@@ -50,7 +50,7 @@ jobs:
           tasks: ${{ matrix.task }}
   sdk-e2e-test:
     timeout-minutes: 30
-    runs-on: ubuntu-latest-8-cores
+    runs-on: depot-ubuntu-24.04-8
     needs: [changed-files-check, sdk-test]
     if: needs.changed-files-check.outputs.any_changed == 'true'
     services:
@@ -94,7 +94,7 @@ jobs:
   ci-sdk-status-check:
     if: always() && !cancelled()
     timeout-minutes: 5
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     needs: [changed-files-check, sdk-test, sdk-e2e-test]
     steps:
       - name: Fail job if any needs failed

.github/workflows/ci-server.yaml

@@ -31,7 +31,7 @@ jobs:
     needs: changed-files-check
     if: needs.changed-files-check.outputs.any_changed == 'true'
     timeout-minutes: 30
-    runs-on: ubuntu-latest-8-cores
+    runs-on: depot-ubuntu-24.04-8
     services:
       postgres:
         image: twentycrm/twenty-postgres-spilo
@@ -143,7 +143,7 @@ jobs:
           key: ${{ steps.restore-server-setup-cache.outputs.cache-primary-key }}
   server-test:
     timeout-minutes: 30
-    runs-on: ubuntu-latest-8-cores
+    runs-on: depot-ubuntu-24.04-8
     needs: server-setup
     steps:
       - name: Fetch custom Github Actions and base branch history
@@ -164,7 +164,7 @@ jobs:
 
   server-integration-test:
     timeout-minutes: 30
-    runs-on: ubuntu-latest-8-cores
+    runs-on: depot-ubuntu-24.04-8
     needs: server-setup
     strategy:
       fail-fast: false
@@ -250,7 +250,7 @@ jobs:
   ci-server-status-check:
     if: always() && !cancelled()
     timeout-minutes: 5
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     needs: [changed-files-check, server-setup, server-test, server-integration-test]
     steps:
       - name: Fail job if any needs failed

.github/workflows/ci-shared.yaml

@@ -22,7 +22,7 @@ jobs:
     needs: changed-files-check
     if: needs.changed-files-check.outputs.any_changed == 'true'
     timeout-minutes: 30
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     env:
       NODE_OPTIONS: '--max-old-space-size=4096'
     strategy:
@@ -47,7 +47,7 @@ jobs:
   ci-shared-status-check:
     if: always() && !cancelled()
     timeout-minutes: 5
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     needs: [changed-files-check, shared-test]
     steps:
       - name: Fail job if any needs failed

.github/workflows/ci-test-docker-compose.yaml

@@ -23,7 +23,7 @@ jobs:
     needs: changed-files-check
     if: needs.changed-files-check.outputs.any_changed == 'true'
     timeout-minutes: 30
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -92,7 +92,7 @@ jobs:
   ci-test-docker-compose-status-check:
     if: always() && !cancelled()
     timeout-minutes: 5
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     needs: [changed-files-check, test]
     steps:
       - name: Fail job if any needs failed

.github/workflows/ci-utils.yaml

@@ -22,7 +22,7 @@ concurrency:
 jobs:
   danger-js:
     timeout-minutes: 5
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     if: github.event.action != 'closed'
     steps:
       - uses: actions/checkout@v4
@@ -35,7 +35,7 @@ jobs:
 
   congratulate:
     timeout-minutes: 3
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     if: github.event.action == 'closed' && github.event.pull_request.merged == true
     steps:
       - uses: actions/checkout@v4

.github/workflows/ci-website.yaml

@@ -23,7 +23,7 @@ jobs:
     needs: changed-files-check
     if: needs.changed-files-check.outputs.any_changed == 'true'
     timeout-minutes: 10
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     services:
       postgres:
         image: twentycrm/twenty-postgres-spilo
@@ -65,7 +65,7 @@ jobs:
   ci-website-status-check:
     if: always() && !cancelled()
     timeout-minutes: 5
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     needs: [changed-files-check, website-build]
     steps:
       - name: Fail job if any needs failed

.github/workflows/ci-zapier.yaml

@@ -28,7 +28,7 @@ jobs:
     needs: changed-files-check
     if: needs.changed-files-check.outputs.any_changed == 'true'
     timeout-minutes: 30
-    runs-on: ubuntu-latest-8-cores
+    runs-on: depot-ubuntu-24.04-8
     services:
       postgres:
         image: twentycrm/twenty-postgres-spilo
@@ -95,7 +95,7 @@ jobs:
     needs: server-setup
     if: needs.changed-files-check.outputs.any_changed == 'true'
     timeout-minutes: 30
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     strategy:
       matrix:
         task: [lint, typecheck, validate]
@@ -120,7 +120,7 @@ jobs:
   ci-zapier-status-check:
     if: always() && !cancelled()
     timeout-minutes: 5
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     needs: [changed-files-check, zapier-test]
     steps:
       - name: Fail job if any needs failed

.github/workflows/claude.yml

@@ -23,7 +23,7 @@ jobs:
       (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude') && github.event.comment.user.type != 'Bot') ||
       (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude') && github.event.review.user.type != 'Bot') ||
       (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     timeout-minutes: 60
     permissions:
       contents: write
@@ -96,7 +96,7 @@ jobs:
 
   claude-cross-repo:
     if: github.event_name == 'repository_dispatch'
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     timeout-minutes: 60
     permissions:
       contents: write

.github/workflows/docs-i18n-pull.yaml

@@ -34,7 +34,7 @@ concurrency:
 jobs:
   pull_docs_translations:
     name: Pull docs translations
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/docs-i18n-push.yaml

@@ -21,7 +21,7 @@ concurrency:
 jobs:
   push_docs:
     name: Push documentation to Crowdin
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/i18n-pull.yaml

@@ -32,7 +32,7 @@ concurrency:
 jobs:
   pull_translations:
     name: Pull translations
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/i18n-push.yaml

@@ -17,7 +17,7 @@ concurrency:
 jobs:
   extract_translations:
     name: Extract and upload translations
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/preview-env-dispatch.yaml

@@ -33,7 +33,7 @@ jobs:
         )
       )
     timeout-minutes: 5
-    runs-on: ubuntu-latest
+    runs-on: depot-ubuntu-24.04
     steps:
       - name: Trigger preview environment workflow
         uses: peter-evans/repository-dispatch@v2

.yarn/patches/@wyw-in-js-transform-npm-0.7.0-ba641dc99f.patch

@@ -1,58 +0,0 @@
-diff --git a/esm/cache.js b/esm/cache.js
-index 07cf6d7dd99effb9c3464b620ba67a7f445224f5..248bb527923499a6be8065ee7a3613b55819c58c 100644
---- a/esm/cache.js
-+++ b/esm/cache.js
-@@ -69,17 +69,20 @@ export class TransformCacheCollection {
-       this.invalidate(cacheName, filename);
-     });
-   }
--  invalidateIfChanged(filename, content) {
-+  invalidateIfChanged(filename, content, _visited) {
-+    const visited = _visited || new Set();
-+    if (visited.has(filename)) {
-+      return false;
-+    }
-+    visited.add(filename);
-     const fileEntrypoint = this.get('entrypoints', filename);
- 
--    // We need to check all dependencies of the file
--    // because they might have changed as well.
-     if (fileEntrypoint) {
-       for (const [, dependency] of fileEntrypoint.dependencies) {
-         const dependencyFilename = dependency.resolved;
-         if (dependencyFilename) {
-           const dependencyContent = fs.readFileSync(dependencyFilename, 'utf8');
--          this.invalidateIfChanged(dependencyFilename, dependencyContent);
-+          this.invalidateIfChanged(dependencyFilename, dependencyContent, visited);
-         }
-       }
-     }
-diff --git a/lib/cache.js b/lib/cache.js
-index 0762ed7d3c39b31000f7aa7d8156da15403c8e64..6955410cd3c9ec53cf7a01c8346abc4c47fff791 100644
---- a/lib/cache.js
-+++ b/lib/cache.js
-@@ -77,17 +77,20 @@ class TransformCacheCollection {
-       this.invalidate(cacheName, filename);
-     });
-   }
--  invalidateIfChanged(filename, content) {
-+  invalidateIfChanged(filename, content, _visited) {
-+    const visited = _visited || new Set();
-+    if (visited.has(filename)) {
-+      return false;
-+    }
-+    visited.add(filename);
-     const fileEntrypoint = this.get('entrypoints', filename);
- 
--    // We need to check all dependencies of the file
--    // because they might have changed as well.
-     if (fileEntrypoint) {
-       for (const [, dependency] of fileEntrypoint.dependencies) {
-         const dependencyFilename = dependency.resolved;
-         if (dependencyFilename) {
-           const dependencyContent = _nodeFs.default.readFileSync(dependencyFilename, 'utf8');
--          this.invalidateIfChanged(dependencyFilename, dependencyContent);
-+          this.invalidateIfChanged(dependencyFilename, dependencyContent, visited);
-         }
-       }
-     }

CLAUDE.md

@@ -90,7 +90,7 @@ npx nx run twenty-front:graphql:generate --configuration=metadata
 ## Architecture Overview
 
 ### Tech Stack
-- **Frontend**: React 18, TypeScript, Jotai (state management), Linaria (styling), Vite
+- **Frontend**: React 18, TypeScript, Jotai (state management), Emotion (styling), Vite
 - **Backend**: NestJS, TypeORM, PostgreSQL, Redis, GraphQL (with GraphQL Yoga)
 - **Monorepo**: Nx workspace managed with Yarn 4
 
@@ -175,7 +175,7 @@ IMPORTANT: Use Context7 for code generation, setup or configuration steps, or li
 5. Run `graphql:generate` after any GraphQL schema changes
 
 ### Code Style Notes
-- Use **Linaria** for styling with zero-runtime CSS-in-JS (styled-components pattern)
+- Use **Emotion** for styling with styled-components pattern
 - Follow **Nx** workspace conventions for imports
 - Use **Lingui** for internationalization
 - Apply security first, then formatting (sanitize before format)

README.md

@@ -109,7 +109,7 @@ Below are a few features we have implemented to date:
 - [TypeScript](https://www.typescriptlang.org/)
 - [Nx](https://nx.dev/)
 - [NestJS](https://nestjs.com/), with [BullMQ](https://bullmq.io/), [PostgreSQL](https://www.postgresql.org/), [Redis](https://redis.io/)
-- [React](https://reactjs.org/), with [Jotai](https://jotai.org/), [Linaria](https://linaria.dev/) and [Lingui](https://lingui.dev/)
+- [React](https://reactjs.org/), with [Jotai](https://jotai.org/), [Emotion](https://emotion.sh/) and [Lingui](https://lingui.dev/)
 
 
 

docs/emotion-to-linaria-migration-plan.md

@@ -0,0 +1,381 @@
+# Emotion → Linaria Migration Plan: twenty-front
+
+## Overview
+
+Migrate all Emotion (`@emotion/styled`, `@emotion/react`) usages in
+`packages/twenty-front/src` to Linaria (`@linaria/react`, `@linaria/core`),
+following the same patterns already established in the `twenty-ui` package.
+
+Linaria is a **zero-runtime** CSS-in-JS library. Styles are extracted at
+build time by [wyw-in-js](https://wyw-in-js.dev/) (the Vite plugin is
+`@wyw-in-js/vite`, already configured in `twenty-front/vite.config.ts`).
+This means every expression inside a `styled` or `css` template literal
+must be statically evaluable at build time — no runtime theme objects,
+no closures over component state, no side-effects.
+
+**Total files to migrate: ~998**
+
+| Category | Files | Description |
+|---|---|---|
+| styled-only | 694 | Import `@emotion/styled` but not `useTheme` |
+| styled + useTheme | 224 | Import both `@emotion/styled` and `useTheme` |
+| useTheme-only | 79 | Import `useTheme` but not `@emotion/styled` |
+| css / Global only | 1 | Import `css` or `Global` from `@emotion/react` only |
+
+## Theme Architecture
+
+Two build-time utilities produce the theme system:
+
+- **`buildThemeReferencingRootCssVariables`** — walks the theme object and
+  builds a nested mirror where every leaf is a `var(--t-xxx)` string
+  (evaluated at build time by wyw-in-js)
+- **`prepareThemeForRootCssVariableInjection`** — walks the runtime theme
+  and collects flat `[--css-variable-name, value]` pairs, injected onto
+  `document.documentElement` by `ThemeCssVariableInjectorEffect`
+
+`themeCssVariables` is the build-time object; every leaf resolves to a CSS
+`var()` reference. It is safe to use inside `styled` and `css` templates
+because wyw-in-js can evaluate it statically.
+
+## Migration Patterns
+
+### 1. `styled` import
+
+```diff
+- import styled from '@emotion/styled';
++ import { styled } from '@linaria/react';
+```
+
+### 2. Theme access in styled components
+
+Replace Emotion's `({ theme }) =>` prop-function pattern with static
+`themeCssVariables` references:
+
+```diff
++ import { themeCssVariables } from 'twenty-ui/theme';
+
+  const StyledTitle = styled.span`
+-   color: ${({ theme }) => theme.font.color.primary};
+-   font-size: ${({ theme }) => theme.font.size.lg};
++   color: ${themeCssVariables.font.color.primary};
++   font-size: ${themeCssVariables.font.size.lg};
+  `;
+```
+
+### 3. Spacing
+
+`theme.spacing(N)` is a function; in Linaria it becomes an indexed lookup:
+
+```diff
+- margin-top: ${({ theme }) => theme.spacing(3)};
++ margin-top: ${themeCssVariables.spacing[3]};
+```
+
+For multi-arg spacing like `theme.spacing(2, 4)` → `"8px 16px"`:
+
+```diff
+- padding: ${({ theme }) => theme.spacing(2, 4)};
++ padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[4]};
+```
+
+The spacing scale covers integers 0–32 plus `0.5` and `1.5`. Any other
+fractional values (`0.25`, `0.75`, `1.25`, `2.5`, `3.5`) must be replaced
+with literal pixel values (e.g. `theme.spacing(2.5)` → `10px`).
+
+### 4. `useTheme` → `useContext(ThemeContext)`
+
+For runtime theme access (icon sizes, animation durations, conditional logic
+outside of styled components):
+
+```diff
+- import { useTheme } from '@emotion/react';
++ import { useContext } from 'react';
++ import { ThemeContext } from 'twenty-ui/theme';
+
+  const MyComponent = () => {
+-   const theme = useTheme();
++   const { theme } = useContext(ThemeContext);
+    return <Icon size={theme.icon.size.sm} />;
+  };
+```
+
+### 5. `css` template literal
+
+Linaria's `css` (from `@linaria/core`) returns a **class name string**, not
+a serialized style object like Emotion's `css`. This has two consequences:
+
+**Standalone usage** — apply via `className`, not the `css` prop:
+
+```diff
+- import { css } from '@emotion/react';
++ import { css } from '@linaria/core';
+
+  const myClass = css`
+    text-decoration: none;
+  `;
+
+- <Link css={myClass} />
++ <Link className={myClass} />
+```
+
+**Inside `styled` templates** — do NOT nest `css` tags. Linaria's `css`
+returns a class name, not raw CSS text, so interpolating it inside `styled`
+produces broken output. Use plain strings instead:
+
+```diff
+  // WRONG — css`` returns a class name, not CSS text
+  ${({ handle }) =>
+    handle === 'left'
+-     ? css`left: ${themeCssVariables.spacing[1]};`
+-     : css`right: ${themeCssVariables.spacing[1]};`}
++     ? `left: ${themeCssVariables.spacing[1]};`
++     : `right: ${themeCssVariables.spacing[1]};`}
+```
+
+### 6. Interpolation return types
+
+wyw-in-js requires prop interpolation functions to return `string | number`.
+They must **never** return `false`, `undefined`, or `null`. Replace
+short-circuit `&&` with ternary expressions:
+
+```diff
+  // WRONG — returns false when condition is false
+- ${({ isActive }) => isActive && `background: ${themeCssVariables.color.blue};`}
+  // CORRECT
++ ${({ isActive }) => isActive ? `background: ${themeCssVariables.color.blue};` : ''}
+```
+
+### 7. Block interpolations (multi-declaration returns)
+
+Linaria wraps each interpolation result in a single CSS custom property
+(`var(--xxx)`). An interpolation that returns **multiple CSS declarations**
+produces invalid CSS. Split into one interpolation per property:
+
+```diff
+  // WRONG — single interpolation returning multiple declarations
+- ${({ divider, theme }) => {
+-   const border = `1px solid ${theme.border.color.light}`;
+-   return divider === 'left' ? `border-left: ${border}` : `border-right: ${border}`;
+- }}
+
+  // CORRECT — one interpolation per property
++ border-left: ${({ divider }) =>
++   divider === 'left' ? `1px solid ${themeCssVariables.border.color.light}` : 'none'};
++ border-right: ${({ divider }) =>
++   divider === 'right' ? `1px solid ${themeCssVariables.border.color.light}` : 'none'};
+```
+
+### 8. CSS var + unit concatenation
+
+CSS custom properties can't be concatenated with unit suffixes directly
+(`var(--x)px` is invalid). Use `calc()` to attach units:
+
+```diff
+- transition: background ${themeCssVariables.animation.duration.instant}s ease;
++ transition: background calc(${themeCssVariables.animation.duration.instant} * 1s) ease;
+```
+
+### 9. `styled(Component)` requires `className`
+
+Linaria's `styled(Component)` works by passing a generated `className` to
+the wrapped component. The component **must** accept and forward a
+`className` prop — otherwise the styles are silently lost. If the component
+doesn't support it, either add `className` support or use a wrapper div.
+
+Linaria also does **not** support Emotion's `shouldForwardProp` option.
+Custom props on HTML elements are automatically filtered by Linaria's
+runtime (via `@emotion/is-prop-valid`). For custom components, all props are
+forwarded — ensure the wrapped component ignores unknown props gracefully.
+
+### 10. `type Theme` → `type ThemeType`
+
+```diff
+- import { type Theme } from '@emotion/react';
++ import { type ThemeType } from 'twenty-ui/theme';
+```
+
+### 11. Framer Motion integration
+
+Linaria doesn't support `styled(motion.div)` — wrapping a motion element
+with `styled()` causes the component body to be stripped at build time by
+wyw-in-js. Define the styled component first, then wrap with
+`motion.create()`:
+
+```tsx
+const StyledBarBase = styled.div`
+  background-color: ${themeCssVariables.font.color.primary};
+  height: 100%;
+`;
+
+const StyledBar = motion.create(StyledBarBase);
+```
+
+### 12. Dynamic styles via CSS variables
+
+When a component needs to compute styles from multiple props with complex
+branching logic (e.g. combining `variant`, `accent`, `disabled`, `focus`),
+Linaria's prop interpolations become unwieldy. Use a `computeDynamicStyles`
+helper that returns a `CSSProperties` object injected via `style={}`,
+referenced from the static CSS with `var()`:
+
+```tsx
+const StyledButton = styled.button`
+  background: var(--btn-bg);
+  border-color: var(--btn-border-color);
+  &:hover { background: var(--btn-hover-bg); }
+`;
+
+const dynamicStyles = useMemo(() => {
+  const s = computeButtonDynamicStyles(variant, accent, ...);
+  return {
+    '--btn-bg': s.background,
+    '--btn-hover-bg': s.hoverBackground,
+  } as CSSProperties;
+}, [variant, accent, ...]);
+
+return <StyledButton style={dynamicStyles} />;
+```
+
+### 13. `Global` component
+
+Replace Emotion's `<Global styles={...} />` with standard CSS or the
+`ThemeCssVariableInjectorEffect` pattern from twenty-ui.
+
+### 14. `ThemeProvider`
+
+The `BaseThemeProvider` already wraps children with both Emotion's
+`ThemeProvider` and Linaria's `ThemeContextProvider`. Once all Emotion usages
+are gone, the Emotion `ThemeProvider` wrapper can be removed.
+
+---
+
+## PR Breakdown
+
+Files are grouped to keep each PR around ~100 files with consistent review
+surface. We start with the simplest, lowest-risk modules.
+
+### PR 1 (~97 files) — Small standalone modules
+
+Low-risk modules with mostly simple `styled`-only patterns.
+
+| Module | Files |
+|---|---|
+| spreadsheet-import | 28 |
+| billing | 10 |
+| views | 14 |
+| navigation-menu-item | 14 |
+| blocknote-editor | 7 |
+| advanced-text-editor | 7 |
+| favorites | 7 |
+| navigation | 4 |
+| information-banner | 3 |
+| sign-in-background-mock | 3 |
+
+### PR 2 (~100 files) — Auth, tiny modules, loading, testing, pages (part 1)
+
+| Module | Files |
+|---|---|
+| auth | 19 |
+| action-menu | 3 |
+| object-metadata | 3 |
+| onboarding | 2 |
+| workspace | 2 |
+| file | 2 |
+| error-handler | 2 |
+| front-components | 1 |
+| geo-map | 1 |
+| hooks | 1 |
+| loading | 5 |
+| testing | 5 |
+| pages (first ~55 files) | ~55 |
+
+### PR 3 (~97 files) — Pages (remaining) + activities + AI
+
+| Module | Files |
+|---|---|
+| pages (remaining ~16 files) | ~16 |
+| activities | 53 |
+| ai | 28 |
+
+### PR 4 (~100 files) — Command-menu + workflow (part 1)
+
+| Module | Files |
+|---|---|
+| command-menu | 53 |
+| workflow (first ~47 files) | ~47 |
+
+### PR 5 (~115 files) — Workflow (remaining) + page-layout
+
+| Module | Files |
+|---|---|
+| workflow (remaining ~32 files) | ~32 |
+| page-layout | 83 |
+
+### PR 6 (~100 files) — UI module (part 1)
+
+| Module | Files |
+|---|---|
+| ui (first ~100 files) | ~100 |
+
+### PR 7 (~85 files) — UI module (remaining) + object-record (start)
+
+| Module | Files |
+|---|---|
+| ui (remaining ~23 files) | ~23 |
+| object-record (first ~62 files) | ~62 |
+
+### PR 8 (~100 files) — Object-record (continued)
+
+| Module | Files |
+|---|---|
+| object-record (next ~100 files) | ~100 |
+
+### PR 9 (~100 files) — Settings (part 1)
+
+| Module | Files |
+|---|---|
+| settings (first ~100 files) | ~100 |
+
+### PR 10 (~102 files) — Settings (part 2) + final cleanup
+
+| Module | Files |
+|---|---|
+| settings (remaining ~102 files) | ~102 |
+| css/Global-only file | 1 |
+
+### Post-migration PR — Remove Emotion
+
+Once all PRs are merged:
+
+- Remove `ThemeProvider` from `@emotion/react` in `BaseThemeProvider`
+- Remove `@emotion/styled` and `@emotion/react` dependencies
+- Remove `@styled/typescript-styled-plugin` from tsconfig
+- Clean up any remaining Emotion-related configuration
+
+---
+
+## Risk Assessment
+
+| Risk | Mitigation |
+|---|---|
+| wyw-in-js evaluates at build time; dynamic expressions may fail | Use `themeCssVariables` for static theme values; pass dynamic values as component props or via `style={}` CSS variables |
+| `theme.spacing(N)` function → `themeCssVariables.spacing[N]` index | Pre-computed for integers 0–32 plus 0.5 and 1.5; other fractional values → literal pixel values |
+| `useTheme` used for runtime logic (not just styles) | Replace with `useContext(ThemeContext)`, destructure `{ theme }` |
+| Multi-arg `theme.spacing(a, b, c)` | Split into individual `themeCssVariables.spacing[N]` references |
+| `css` tag inside `styled` templates | Linaria `css` returns class name, not CSS text; use plain strings inside `styled` |
+| Interpolation returns `false` / `undefined` | wyw-in-js requires `string \| number`; use ternary `? : ''` instead of `&&` |
+| Block interpolations (multiple declarations) | Split into one interpolation per CSS property |
+| `var(--x)px` concatenation | Use `calc(var(--x) * 1px)` |
+| `styled(motion.div)` stripped by wyw-in-js | Use `motion.create(StyledBase)` pattern |
+| `styled(Component)` with no `className` prop | Add `className` support to wrapped component or use wrapper div |
+| Complex multi-prop style branching | Use `computeDynamicStyles` + `style={}` + `var()` references |
+
+---
+
+## Validation Checklist (per PR)
+
+- [ ] `npx nx lint:diff-with-main twenty-front` passes
+- [ ] `npx nx typecheck twenty-front` passes
+- [ ] `npx nx test twenty-front` passes
+- [ ] Visual spot-check of affected components in the app
+- [ ] No remaining `@emotion/styled` or `@emotion/react` imports in migrated files

npm-app-distribution-plan.md

@@ -0,0 +1,283 @@
+# npm-Based App Distribution for Twenty
+
+*Technical Design Document -- February 2026*
+
+## Overview
+
+Add npm registry support for distributing Twenty apps (public and private), with per-AppRegistration registry overrides, direct tarball upload as escape hatch, and version upgrade detection.
+
+## Assumptions
+
+- The marketplace install flow (currently a TODO in the resolver and frontend) will be implemented separately. This plan provides the infrastructure that install flow will call into.
+- The existing `app:dev` flow (individual file uploads via CLI) remains unchanged.
+- The existing GitHub-based marketplace discovery remains as a curated fallback.
+
+## Architecture
+
+```
+                    Developer
+                   /    |     \
+          npm publish   |   twenty app:push
+             /          |          \
+      npmjs.com    Private Reg   Server REST Upload
+         |              |              |
+         v              v              v
+    [Discovery Layer]           [Direct Upload]
+     npm search API                    |
+     GitHub curated list               |
+         |                             |
+         v                             |
+    MarketplaceService                 |
+     (sourcePackage in DTO)            |
+         |                             |
+         v                             v
+    AppPackageResolverService  <--------+
+     .npmrc generation
+     yarn add / tarball extract
+              |
+              v
+    ApplicationSyncService (existing)
+     WorkspaceMigrationRunnerService
+              |
+              v
+    AppRegistration + Application entities
+```
+
+## Phase 1: Entity and Config Changes
+
+### 1a. Extend AppRegistrationEntity
+
+Add four columns to `application-registration.entity.ts`:
+
+- **`sourcePackage`** (text, nullable) -- npm package name, e.g. `"twenty-app-fireflies"` or `"@myorg/twenty-app-crm"`. Null for tarball-only or OAuth-only apps.
+- **`tarballFileId`** (uuid, nullable) -- FK to a FileEntity storing a directly-uploaded `.tar.gz`. Null when the app comes from npm.
+- **`registryUrl`** (text, nullable) -- per-registration npm registry override. Null means "use the server default `APP_REGISTRY_URL`." This is how a single server can pull public apps from npmjs.com while pulling `@mycompany/*` apps from GitHub Packages.
+- **`latestAvailableVersion`** (text, nullable) -- cached latest version from the registry, updated periodically. Compared against `Application.version` to surface upgrade availability.
+
+**Source resolution priority:**
+
+1. `sourcePackage` is set → resolve from npm via `yarn add`
+2. `tarballFileId` is set → extract from file storage
+3. Neither → OAuth-only app, no server-side code
+
+### 1b. Extend ApplicationEntity.sourceType
+
+Widen the `sourceType` union from `'local'` to `'local' | 'npm' | 'tarball'`:
+
+- `'local'` -- existing behavior (CLI `app:dev`, individual file uploads, workspace-custom)
+- `'npm'` -- installed from an npm registry via `yarn add`
+- `'tarball'` -- installed from a directly-uploaded tarball
+
+This lets the system distinguish how an app was installed, which matters for upgrade logic (npm apps can check the registry for newer versions; tarball apps cannot).
+
+### 1c. Add server-wide config variables
+
+Add a new `APP_REGISTRY_CONFIG` group to ConfigVariablesGroup:
+
+- **`APP_REGISTRY_URL`** (string, default `https://registry.npmjs.org`) -- default npm registry URL
+- **`APP_REGISTRY_TOKEN`** (string, optional, sensitive) -- auth token for the default registry
+
+### 1d. Generate migration
+
+TypeORM migration adding `sourcePackage`, `tarballFileId`, `registryUrl`, `latestAvailableVersion` to `core.applicationRegistration`.
+
+## Phase 2: App Package Resolver Service
+
+### 2a. Create AppPackageResolverService
+
+New service with core method:
+
+```
+resolvePackage(appRegistration, options?: { targetVersion? }) → ResolvedPackage | null
+```
+
+Returns `{ manifestPath, packageJsonPath, filesDir }` or null for OAuth-only apps.
+
+**Resolution logic:**
+
+```
+if sourcePackage:
+  1. Determine registry: appRegistration.registryUrl ?? APP_REGISTRY_URL
+  2. Determine auth token for the resolved registry
+  3. Generate temporary .npmrc in an isolated working directory
+  4. Run: yarn add <sourcePackage>@<targetVersion ?? latest>
+  5. Read manifest from node_modules/<sourcePackage>/.twenty/output/manifest.json
+  6. Return paths
+
+if tarballFileId:
+  1. Download tarball from FileStorageService
+  2. Extract to temporary directory
+  3. Read manifest from extracted files
+  4. Return paths
+
+else:
+  return null (OAuth-only)
+```
+
+### 2b. Isolated working directories
+
+Each resolution runs in a temporary directory under `{os.tmpdir()}/twenty-app-resolver/{uuid}/`. This avoids contaminating the server's own `node_modules` and isolates apps from each other. Cleaned up after files are copied to storage.
+
+### 2c. .npmrc generation
+
+For scoped packages (`@scope/twenty-app-*`):
+
+```
+@scope:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=TOKEN
+```
+
+For unscoped packages with a non-default registry:
+
+```
+registry=https://my-verdaccio.internal:4873
+//my-verdaccio.internal:4873/:_authToken=TOKEN
+```
+
+### 2d. Post-resolution file transfer
+
+After resolving, copies files into the app's storage path using the existing FileStorageService layout:
+
+```
+{workspaceId}/{applicationUniversalIdentifier}/
+  built-logic-function/...
+  built-front-component/...
+  dependencies/package.json
+  dependencies/yarn.lock
+  public-asset/...
+  source/...
+```
+
+This reuses the same FileFolder enum paths that `app:dev` uses, so downstream ApplicationSyncService works unchanged.
+
+## Phase 3: Marketplace Discovery via npm
+
+### 3a. Update MarketplaceService
+
+Add npm-based discovery alongside the existing GitHub path:
+
+- Query npm search API: `GET {registryUrl}/-/v1/search?text=keywords:twenty-app&size=250`
+- Map each result to MarketplaceAppDTO using package.json metadata
+
+**Merge strategy:**
+
+1. Fetch from npm search API (apps with `keywords: ["twenty-app"]`)
+2. Fetch from GitHub (existing curated list)
+3. Merge by `universalIdentifier` -- GitHub entries override npm entries (allowing curation)
+4. Cache merged result with existing 1-hour TTL
+
+### 3b. Add sourcePackage to MarketplaceAppDTO
+
+The DTO needs a `sourcePackage: string | null` field so the install flow knows which npm package to resolve. For npm-discovered apps, this is the package name. For GitHub-only apps, this is null.
+
+## Phase 4: Version Upgrade Support
+
+### 4a. Create AppUpgradeService
+
+**Periodic version check (npm-sourced apps only):**
+
+- Fetches `{registryUrl}/{sourcePackage}/latest` from the npm registry
+- Stores result in `AppRegistration.latestAvailableVersion`
+- Frontend compares against `Application.version` to show "Update available"
+
+**Upgrade trigger:**
+
+1. Resolve the new version via AppPackageResolverService
+2. Sync via existing ApplicationSyncService (triggers workspace migration for schema changes)
+3. Update Application.version
+
+**Rollback strategy:** If sync fails (e.g., migration validation error), re-resolve the previous version and re-sync. This is possible because npm retains all published versions.
+
+### 4b. Version check scheduling
+
+Lightweight cron or check-on-access pattern. Iterates over AppRegistrations where `sourcePackage IS NOT NULL` and calls `checkForUpdates()`. Frequency: once per hour, matching the existing marketplace cache TTL.
+
+## Phase 5: SDK CLI Commands
+
+### 5a. Finalize `twenty app:build`
+
+Ensure `.twenty/output/` is npm-publishable. The build step generates a `package.json` in the output directory:
+
+```json
+{
+  "name": "twenty-app-fireflies",
+  "version": "1.2.0",
+  "keywords": ["twenty-app"],
+  "twenty": {
+    "universalIdentifier": "a4df0c0f-c65e-44e5-8436-24814182d4ac"
+  },
+  "files": ["manifest.json", "built-logic-function", "built-front-component", "public-asset"]
+}
+```
+
+The developer then publishes with standard `npm publish` -- no custom command needed.
+
+### 5b. `twenty app:pack` (new command)
+
+```
+twenty app:pack [appPath]
+```
+
+- Runs `app:build` if `.twenty/output/` doesn't exist or is stale
+- Uses existing TarballService to create `{name}-{version}.tar.gz`
+- Outputs the file path for manual distribution
+
+### 5c. `twenty app:push` (new command)
+
+```
+twenty app:push [appPath] --server <url> --token <token>
+```
+
+- Runs `app:pack` to produce the tarball
+- Reads universalIdentifier from manifest to find or create the AppRegistration
+- Uploads via `POST /api/app-registrations/upload-tarball`
+- Reports success with the registration ID
+- Reuses `twenty auth:login` credentials if `--server` is not specified
+
+## Phase 6: Server Tarball Upload Endpoint
+
+### 6a. REST controller
+
+```
+POST /api/app-registrations/upload-tarball
+Content-Type: multipart/form-data
+Body: tarball file + optional universalIdentifier
+```
+
+**Validation:**
+
+- Max file size: 50MB
+- Must be a valid `.tar.gz`
+- Extracted contents must contain `manifest.json` with a valid `universalIdentifier`
+- The `universalIdentifier` must not conflict with an existing registration owned by a different user
+
+**Flow:**
+
+1. Extract tarball to temp directory
+2. Validate manifest structure
+3. Find or create AppRegistration by universalIdentifier
+4. Store tarball in FileStorageService under `FileFolder.AppTarball`
+5. Set `tarballFileId` on the AppRegistration
+6. Return the AppRegistration entity
+
+### 6b. Add FileFolder.AppTarball
+
+New enum value `AppTarball = 'app-tarball'` in FileFolder.
+
+## Key Design Decisions
+
+| Decision | Rationale |
+|---|---|
+| Per-AppRegistration registry override | `registryUrl` on the entity allows mixing registries. Public apps from npmjs.com, private from GitHub Packages/Verdaccio. Server-wide `APP_REGISTRY_URL` is the fallback. |
+| npm publish is standard | No custom publish infra. Free versioning, README, `npm audit`, download stats, proven auth model. |
+| Tarball as escape hatch | Air-gapped environments, CI pipelines, one-off installs. Cannot auto-upgrade. |
+| sourceType distinction | `'npm' \| 'tarball' \| 'local'` lets the system know which upgrade path is available. Only npm apps can check for newer versions. |
+| Backward compatible | `app:dev` flow unchanged. GitHub marketplace unchanged. All new fields nullable. |
+| Upgrade rollback | Re-resolve previous version from npm on failure. Safe because npm never deletes published versions. |
+
+## Edge Cases
+
+- **npm unreachable**: Timeout after 30s, throw clear error. App remains at current installed version.
+- **Package name conflicts**: The `universalIdentifier` in the `twenty` field of `package.json` is the source of truth, not the npm package name. Two packages with the same universalIdentifier conflict at the AppRegistration level (unique index).
+- **Scoped vs unscoped packages**: Both work. Scoped packages naturally route to a private registry via `.npmrc` scope mapping.
+- **Multiple workspaces, same server**: AppRegistration is server-level (core schema). Application is workspace-level. One AppRegistration can be installed in multiple workspaces at different versions.

nx.json

@@ -276,7 +276,7 @@
   "generators": {
     "@nx/react": {
       "application": {
-        "style": "@linaria/react",
+        "style": "@emotion/styled",
         "linter": "eslint",
         "bundler": "vite",
         "compiler": "swc",
@@ -284,7 +284,7 @@
         "projectNameAndRootFormat": "derived"
       },
       "library": {
-        "style": "@linaria/react",
+        "style": "@emotion/styled",
         "linter": "eslint",
         "bundler": "vite",
         "compiler": "swc",
@@ -292,7 +292,7 @@
         "projectNameAndRootFormat": "derived"
       },
       "component": {
-        "style": "@linaria/react"
+        "style": "@emotion/styled"
       }
     }
   },

package.json

@@ -2,13 +2,14 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.17",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@floating-ui/react": "^0.24.3",
     "@linaria/core": "^6.2.0",
     "@linaria/react": "^6.2.1",
     "@radix-ui/colors": "^3.0.0",
     "@sniptt/guards": "^0.2.0",
     "@tabler/icons-react": "^3.31.0",
-    "@wyw-in-js/babel-preset": "^1.0.6",
     "@wyw-in-js/vite": "^0.7.0",
     "archiver": "^7.0.1",
     "danger-plugin-todos": "^1.3.1",
@@ -40,7 +41,6 @@
     "lodash.snakecase": "^4.1.1",
     "lodash.upperfirst": "^4.3.1",
     "microdiff": "^1.3.2",
-    "next-with-linaria": "^1.3.0",
     "planer": "^1.2.0",
     "pluralize": "^8.0.0",
     "react": "^18.2.0",
@@ -202,9 +202,7 @@
     "typescript": "5.9.2",
     "graphql-redis-subscriptions/ioredis": "^5.6.0",
     "@lingui/core": "5.1.2",
-    "@types/qs": "6.9.16",
-    "@wyw-in-js/transform@npm:0.6.0": "patch:@wyw-in-js/transform@npm%3A0.7.0#~/.yarn/patches/@wyw-in-js-transform-npm-0.7.0-ba641dc99f.patch",
-    "@wyw-in-js/transform@npm:0.7.0": "patch:@wyw-in-js/transform@npm%3A0.7.0#~/.yarn/patches/@wyw-in-js-transform-npm-0.7.0-ba641dc99f.patch"
+    "@types/qs": "6.9.16"
   },
   "version": "0.2.1",
   "nx": {},

packages/twenty-apps/community/apollo-enrich/.gitignore

@@ -1,38 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.*
-.yarn
-
-# codegen
-generated
-
-# testing
-/coverage
-
-# dev
-/dist/
-
-.twenty/*
-!.twenty/output/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# env files (can opt-in for committing if needed)
-.env*
-
-# typescript
-*.tsbuildinfo

packages/twenty-apps/community/apollo-enrich/.nvmrc

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

packages/twenty-apps/community/apollo-enrich/.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules

packages/twenty-apps/community/apollo-enrich/LLMS.md

@@ -1,12 +0,0 @@
-## Base documentation
-
-- Documentation: https://docs.twenty.com/developers/extend/capabilities/apps
-- Rich app example: https://github.com/twentyhq/twenty/tree/main/packages/twenty-sdk/src/cli/__tests__/apps/rich-app
-
-## 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.

packages/twenty-apps/community/apollo-enrich/README.md

@@ -1,51 +0,0 @@
-This is a [Twenty](https://twenty.com) application project bootstrapped with [`create-twenty-app`](https://www.npmjs.com/package/create-twenty-app).
-
-## Getting Started
-
-First, authenticate to your workspace:
-
-```bash
-yarn twenty auth:login
-```
-
-Then, start development mode to sync your app and watch for changes:
-
-```bash
-yarn twenty app:dev
-```
-
-Open your Twenty instance and go to `/settings/applications` section to see the result.
-
-## Available Commands
-
-Run `yarn twenty help` to list all available commands. Common commands:
-
-```bash
-# Authentication
-yarn twenty auth:login     # Authenticate with Twenty
-yarn twenty auth:logout    # Remove credentials
-yarn twenty auth:status    # Check auth status
-yarn twenty auth:switch    # Switch default workspace
-yarn twenty auth:list      # List all configured workspaces
-
-# Application
-yarn twenty app:dev        # Start dev mode (watch, build, sync, and auto-generate typed client)
-yarn twenty entity:add     # Add a new entity (object, field, function, front-component, role, view, navigation-menu-item)
-yarn twenty function:logs  # Stream function logs
-yarn twenty function:execute  # Execute a function with JSON payload
-yarn twenty app:uninstall  # Uninstall app from workspace
-```
-
-## LLMs instructions
-
-Main docs and pitfalls are available in LLMS.md file.
-
-## Learn More
-
-To learn more about Twenty applications, take a look at the following resources:
-
-- [twenty-sdk](https://www.npmjs.com/package/twenty-sdk) - learn about `twenty-sdk` tool.
-- [Twenty doc](https://docs.twenty.com/) - Twenty's documentation.
-- Join our [Discord](https://discord.gg/cx5n4Jzs57)
-
-You can check out [the Twenty GitHub repository](https://github.com/twentyhq/twenty) - your feedback and contributions are welcome!

packages/twenty-apps/community/apollo-enrich/eslint.config.mjs

@@ -1,29 +0,0 @@
-import js from '@eslint/js';
-import tseslint from 'typescript-eslint';
-
-export default [
-  // Base JS recommended rules
-  js.configs.recommended,
-
-  // TypeScript recommended rules
-  ...tseslint.configs.recommended,
-
-  {
-    files: ['**/*.ts', '**/*.tsx'],
-    languageOptions: {
-      parserOptions: {
-        project: true,
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
-    rules: {
-      // Common TypeScript-friendly tweaks
-      '@typescript-eslint/no-unused-vars': [
-        'warn',
-        { argsIgnorePattern: '^_' },
-      ],
-      '@typescript-eslint/no-explicit-any': 'off',
-      'no-unused-vars': 'off', // handled by TS rule
-    },
-  },
-];

packages/twenty-apps/community/apollo-enrich/package.json

@@ -1,27 +0,0 @@
-{
-  "name": "apollo-enrich",
-  "version": "0.1.0",
-  "license": "MIT",
-  "engines": {
-    "node": "^24.5.0",
-    "npm": "please-use-yarn",
-    "yarn": ">=4.0.2"
-  },
-  "packageManager": "yarn@4.9.2",
-  "scripts": {
-    "twenty": "twenty",
-    "lint": "eslint",
-    "lint:fix": "eslint --fix"
-  },
-  "dependencies": {
-    "twenty-sdk": "latest"
-  },
-  "devDependencies": {
-    "@types/node": "^24.7.2",
-    "@types/react": "^18.2.0",
-    "eslint": "^9.32.0",
-    "react": "^18.2.0",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.50.0"
-  }
-}

packages/twenty-apps/community/apollo-enrich/src/application-config.ts

@@ -1,54 +0,0 @@
-import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/roles/default-role';
-import { defineApplication } from 'twenty-sdk';
-
-export default defineApplication({
-  universalIdentifier: 'ac1d2ed1-8835-4bd4-9043-28b46fdda465',
-  displayName: 'Apollo enrichment',
-  description: 'Data enrichment with Apollo to keep your data accurate',
-  defaultRoleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
-  settingsCustomTabFrontComponentUniversalIdentifier: '50d59f7c-eada-4731-aacd-8e45371e1040',
-  applicationVariables: {
-    APOLLO_CLIENT_ID: {
-      universalIdentifier: '5852219e-7757-463e-9e7c-80980203794c',
-      isSecret: true,
-      value: '',
-      description: 'Apollo Client ID',
-    },
-    APOLLO_CLIENT_SECRET: {
-      universalIdentifier: 'a032349d-9458-4381-8505-82547276434a',
-      isSecret: true,
-      value: '',
-      description: 'Apollo Client Secret',
-    },
-    APOLLO_OAUTH_URL: {
-      universalIdentifier: '1d42411c-5809-4093-873a-8121b1302475',
-      isSecret: false,
-      value: '',
-      description: 'Apollo OAuth URL',
-    },
-    APOLLO_REDIRECT_URI: {
-      universalIdentifier: 'c8d9e0f1-2a3b-4c5d-6e7f-8a9b0c1d2e3f',
-      isSecret: false,
-      value: '',
-      description: 'Apollo OAuth redirect URI',
-    },
-    APOLLO_REGISTERED_URL: {
-      universalIdentifier: '672a6fce-5565-43bc-9a3b-7f2c33620770',
-      isSecret: false,
-      value: '',
-      description: 'Apollo registered URL',
-    },
-    APOLLO_ACCESS_TOKEN: {
-      universalIdentifier: '672a6fce-5565-43bc-9a3b-7f2c33620771',
-      isSecret: true,
-      value: '',
-      description: 'Apollo access token',
-    },
-    APOLLO_REFRESH_TOKEN: {
-      universalIdentifier: '672a6fce-5565-43bc-9a3b-7f2c33620772',
-      isSecret: true,
-      value: '',
-      description: 'Apollo refresh token',
-    },
-  },
-});

packages/twenty-apps/community/apollo-enrich/src/fields/apollo-founded-year.field.ts

@@ -1,16 +0,0 @@
-import {
-  defineField,
-  FieldType,
-  STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS,
-} from 'twenty-sdk';
-
-export default defineField({
-  universalIdentifier: 'da15cfc6-3657-457d-8757-4ba11b5bb6e1',
-  objectUniversalIdentifier:
-    STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.company.universalIdentifier,
-  type: FieldType.NUMBER,
-  name: 'apolloFoundedYear',
-  label: 'Founded Year',
-  description: 'Year the company was founded, from Apollo enrichment',
-  icon: 'IconCalendar',
-});

packages/twenty-apps/community/apollo-enrich/src/fields/apollo-industry.field.ts

@@ -1,16 +0,0 @@
-import {
-  defineField,
-  FieldType,
-  STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS,
-} from 'twenty-sdk';
-
-export default defineField({
-  universalIdentifier: '505532f5-1fc5-4a58-8074-ba9b48650dbc',
-  objectUniversalIdentifier:
-    STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.company.universalIdentifier,
-  type: FieldType.TEXT,
-  name: 'apolloIndustry',
-  label: 'Apollo Industry',
-  description: 'Industry classification from Apollo enrichment',
-  icon: 'IconBuildingFactory',
-});

packages/twenty-apps/community/apollo-enrich/src/fields/apollo-short-description.field.ts

@@ -1,16 +0,0 @@
-import {
-  defineField,
-  FieldType,
-  STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS,
-} from 'twenty-sdk';
-
-export default defineField({
-  universalIdentifier: 'be15e062-b065-48b4-979c-65b9a50e0cb1',
-  objectUniversalIdentifier:
-    STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.company.universalIdentifier,
-  type: FieldType.TEXT,
-  name: 'apolloShortDescription',
-  label: 'Apollo Description',
-  description: 'Short company description from Apollo enrichment',
-  icon: 'IconFileDescription',
-});

packages/twenty-apps/community/apollo-enrich/src/fields/apollo-total-funding.field.ts

@@ -1,16 +0,0 @@
-import {
-  defineField,
-  FieldType,
-  STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS,
-} from 'twenty-sdk';
-
-export default defineField({
-  universalIdentifier: 'c90ae72d-4ddf-4f22-882f-eef98c91e40e',
-  objectUniversalIdentifier:
-    STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.company.universalIdentifier,
-  type: FieldType.CURRENCY,
-  name: 'apolloTotalFunding',
-  label: 'Total Funding',
-  description: 'Total funding raised by the company, from Apollo enrichment',
-  icon: 'IconCash',
-});

packages/twenty-apps/community/apollo-enrich/src/front-components/apollo-oauth-cta.tsx

@@ -1,220 +0,0 @@
-import styled from '@emotion/styled';
-import { useEffect, useState } from 'react';
-import { OAuthApplicationVariables } from 'src/logic-functions/get-oauth-application-variables';
-import { VERIFY_PAGE_PATH } from 'src/logic-functions/get-verify-page';
-import { defineFrontComponent } from 'twenty-sdk';
-
-const StyledContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 100%;
-`;
-
-const StyledSectionTitle = styled.h3`
-  color: #333;
-  font-family: 'Inter', sans-serif;
-  font-size: 15px;
-  font-weight: 600;
-  margin: 0 0 4px 0;
-`;
-
-const StyledSectionSubtitle = styled.p`
-  color: #818181;
-  font-family: 'Inter', sans-serif;
-  font-size: 13px;
-  font-weight: 400;
-  margin: 0 0 12px 0;
-`;
-
-const StyledCard = styled.div`
-  align-items: center;
-  background: #fff;
-  border: 1px solid #ebebeb;
-  border-radius: 8px;
-  display: flex;
-  gap: 12px;
-  padding: 16px;
-`;
-
-const StyledIconContainer = styled.div`
-  align-items: center;
-  background: #f5f5f5;
-  border-radius: 8px;
-  color: #666;
-  display: flex;
-  flex-shrink: 0;
-  height: 40px;
-  justify-content: center;
-  width: 40px;
-`;
-
-const StyledTextContainer = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-`;
-
-const StyledTitle = styled.span`
-  color: #333;
-  font-family: 'Inter', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-`;
-
-const StyledDescription = styled.span`
-  color: #818181;
-  font-family: 'Inter', sans-serif;
-  font-size: 13px;
-`;
-
-const StyledLink = styled.a`
-  align-items: center;
-  background: #5e5adb;
-  border: 1px solid rgba(0, 0, 0, 0.04);
-  border-radius: 4px;
-  box-sizing: border-box;
-  color: #fafafa;
-  cursor: pointer;
-  display: inline-flex;
-  flex-shrink: 0;
-  font-family: 'Inter', sans-serif;
-  font-size: 13px;
-  font-weight: 500;
-  gap: 4px;
-  height: 32px;
-  justify-content: center;
-  padding: 0 12px;
-  text-decoration: none;
-  transition: background 0.1s ease;
-  white-space: nowrap;
-
-  &:hover {
-    background: #4b47b8;
-  }
-
-  &:active {
-    background: #3c3996;
-  }
-
-  &:focus {
-    outline: none;
-  }
-`;
-
-const StyledConnectedStatus = styled.span`
-  align-items: center;
-  background: #10b981;
-  border-radius: 4px;
-  color: #fff;
-  display: inline-flex;
-  flex-shrink: 0;
-  font-family: 'Inter', sans-serif;
-  font-size: 13px;
-  font-weight: 500;
-  gap: 6px;
-  height: 32px;
-  padding: 0 12px;
-  white-space: nowrap;
-`;
-
-const StyledIcon = styled.img`
-  height: 24px;
-  width: 24px;
-`;
-
-const APOLLO_ICON_URL = 'https://twenty-icons.com/apollo.io';
-
-const fetchOAuthApplicationVariables = async (): Promise<OAuthApplicationVariables> => {
-  const backEndUrl = `${process.env.TWENTY_API_URL}/s/oauth/application-variables`;
-  const response = await fetch(backEndUrl, {
-    method: 'GET',
-  });
-  const data = await response.json();
-
-  return data;
-};
-
-const buildOAuthUrl = (oauthApplicationVariables: OAuthApplicationVariables): string => {
-  const { apolloOAuthUrl, apolloClientId, apolloRegisteredUrl } = oauthApplicationVariables;
-  const redirectUri = `${apolloRegisteredUrl}auth/oauth-propagator/callback`;
-  const state = encodeURIComponent(`${process.env.TWENTY_API_URL}/s${VERIFY_PAGE_PATH}`);
-  return `${apolloOAuthUrl}?client_id=${apolloClientId}&redirect_uri=${redirectUri}&state=${state}&response_type=code`;
-};
-
-const ApolloOAuthCta = () => {
-  const [oauthApplicationVariables, setOAuthApplicationVariables] =
-    useState<OAuthApplicationVariables | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    fetchOAuthApplicationVariables()
-      .then(setOAuthApplicationVariables)
-      .catch(setError)
-      .finally(() => setIsLoading(false));
-  }, []);
-
-  if (isLoading) {
-    return (
-      <StyledContainer>
-        <StyledSectionTitle>Connect to Apollo</StyledSectionTitle>
-        <StyledSectionSubtitle>Enrich your contacts with Apollo data</StyledSectionSubtitle>
-        <StyledCard>
-          <StyledIconContainer>
-            <StyledIcon src={APOLLO_ICON_URL} alt="Apollo" />
-          </StyledIconContainer>
-          <StyledTextContainer>
-            <StyledTitle>Apollo OAuth</StyledTitle>
-            <StyledDescription>Loading...</StyledDescription>
-          </StyledTextContainer>
-        </StyledCard>
-      </StyledContainer>
-    );
-  }
-
-  if (error || !oauthApplicationVariables) {
-    return null;
-  }
-
-  const isConnected = Boolean(oauthApplicationVariables.apolloAccessToken);
-  const oauthUrl = buildOAuthUrl(oauthApplicationVariables);
-
-  return (
-    <StyledContainer>
-      <StyledSectionTitle>Connect to Apollo</StyledSectionTitle>
-      <StyledSectionSubtitle>Enrich your contacts with Apollo data</StyledSectionSubtitle>
-      <StyledCard>
-        <StyledIconContainer>
-          <StyledIcon src={APOLLO_ICON_URL} alt="Apollo" />
-        </StyledIconContainer>
-        <StyledTextContainer>
-          <StyledTitle>Apollo OAuth</StyledTitle>
-          <StyledDescription>
-            {isConnected
-              ? 'Your Apollo account is connected'
-              : 'Connect your Apollo account to enrich contacts'}
-          </StyledDescription>
-        </StyledTextContainer>
-        {isConnected ? (
-          <StyledConnectedStatus>
-            ✓ Connected
-          </StyledConnectedStatus>
-        ) : (
-          <StyledLink href={oauthUrl} rel="noopener noreferrer">
-            Connect
-          </StyledLink>
-        )}
-      </StyledCard>
-    </StyledContainer>
-  );
-};
-
-export default defineFrontComponent({
-  universalIdentifier: '50d59f7c-eada-4731-aacd-8e45371e1040',
-  name: 'apollo-oauth-cta',
-  description: 'CTA button to connect to Apollo Enrichment via OAuth',
-  component: ApolloOAuthCta,
-});

packages/twenty-apps/community/apollo-enrich/src/logic-functions/get-authentication-token-pairs.ts

@@ -1,105 +0,0 @@
-import { defineLogicFunction, RoutePayload } from "twenty-sdk";
-import { MetadataApiClient } from 'twenty-sdk/generated';
-
-
-export const OAUTH_TOKEN_PAIRS_PATH = '/oauth/token-pairs';
-
-type ApolloTokenResponse = {
-  access_token: string;
-  token_type: string;
-  expires_in: number;
-  refresh_token: string;
-  scope: string;
-  created_at: number;
-};
-
-const getAuthenticationTokenPairs = async (
-  code: string,
-  clientId: string,
-  clientSecret: string,
-): Promise<ApolloTokenResponse> => {
-  const formData = new URLSearchParams({
-    grant_type: 'authorization_code',
-    client_id: clientId,
-    client_secret: clientSecret,
-    code: code,
-    redirect_uri: 'https://hjsm0q38-3000.uks1.devtunnels.ms/auth/oauth-propagator/callback',
-  });
-
-  const response = await fetch('https://app.apollo.io/api/v1/oauth/token', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded',
-    },
-    body: formData.toString(),
-  });
-
-  if (!response.ok) {
-    const errorText = await response.text();
-    throw new Error(`Failed to exchange code for tokens: ${response.status} - ${errorText}`);
-  }
-
-  return response.json();
-};
-
-const handler = async (event: RoutePayload): Promise<any> => {
-  const { queryStringParameters: { code } } = event;
-
-  if (!code) {
-    throw new Error('Code is required');
-  }
-
-  const apolloClientId = process.env.APOLLO_CLIENT_ID ?? '';
-  const apolloClientSecret = process.env.APOLLO_CLIENT_SECRET ?? '';
-  const applicationId = process.env.APPLICATION_ID ?? '';
-
-
-  const metadataClient = new MetadataApiClient({});
-
-
-
-
-
-
-
-
-  const tokenPairs = await getAuthenticationTokenPairs(
-    code,
-    apolloClientId,
-    apolloClientSecret,
-  );
-
-  await metadataClient.mutation({
-    updateOneApplicationVariable: {
-      __args: {
-          key: 'APOLLO_ACCESS_TOKEN',
-          value: tokenPairs.access_token,
-          applicationId,
-        },
-    },
-  });
-
-   await metadataClient.mutation({
-    updateOneApplicationVariable: {
-      __args: {
-          key: 'APOLLO_REFRESH_TOKEN',
-          value: tokenPairs.refresh_token,
-          applicationId,
-        },
-    },
-  });
-  return {tokenPairs};
-};
-
-export default defineLogicFunction({
-  universalIdentifier: '7ccc63a7-ece1-44c0-adbe-805a1baea03a',
-  name: 'get-authentication-token-pairs',
-  description: 'Returns the Apollo authentication token pairs',
-  timeoutSeconds: 10,
-  handler,
-  httpRouteTriggerSettings: {
-    path: OAUTH_TOKEN_PAIRS_PATH,
-    httpMethod: 'GET',
-    isAuthRequired: false,
-  },
-});

packages/twenty-apps/community/apollo-enrich/src/logic-functions/get-oauth-application-variables.ts

@@ -1,32 +0,0 @@
-import { defineLogicFunction } from 'twenty-sdk';
-
-export type OAuthApplicationVariables = {
-  apolloClientId: string;
-  apolloRegisteredUrl: string;
-  apolloOAuthUrl: string;
-  apolloAccessToken: string;
-  apolloRefreshToken: string;
-};
-
-const handler = async (): Promise<OAuthApplicationVariables> => {
-  const apolloClientId = process.env.APOLLO_CLIENT_ID ?? '';
-  const apolloRegisteredUrl = process.env.APOLLO_REGISTERED_URL ?? '';
-  const apolloOAuthUrl = process.env.APOLLO_OAUTH_URL ?? '';
-  const apolloAccessToken = process.env.APOLLO_ACCESS_TOKEN ?? '';
-  const apolloRefreshToken = process.env.APOLLO_REFRESH_TOKEN ?? '';
-
-  return { apolloClientId, apolloRegisteredUrl, apolloOAuthUrl, apolloAccessToken, apolloRefreshToken };
-};
-
-export default defineLogicFunction({
-  universalIdentifier: 'b7c3e8f1-9d4a-4e2b-8f6c-1a5d3e7b9c2f',
-  name: 'get-oauth-application-variables',
-  description: 'Returns the Apollo OAuth authorization URL',
-  timeoutSeconds: 10,
-  handler,
-  httpRouteTriggerSettings: {
-    path: '/oauth/application-variables',
-    httpMethod: 'GET',
-    isAuthRequired: false,
-  },
-});

packages/twenty-apps/community/apollo-enrich/src/logic-functions/get-verify-page.ts

@@ -1,90 +0,0 @@
-import { defineLogicFunction } from "twenty-sdk";
-
-export const VERIFY_PAGE_PATH = '/oauth/verify';
-
-const buildVerifyPageHtml = (applicationId: string): string => `<!DOCTYPE html>
-<html>
-<head>
-  <title>Apollo OAuth - Verifying...</title>
-  <style>
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 600px; margin: 50px auto; padding: 20px; text-align: center; }
-    .loading { color: #6b7280; }
-    .success { color: #10b981; }
-    .error { color: #ef4444; }
-    .spinner { border: 3px solid #f3f4f6; border-top: 3px solid #3b82f6; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; }
-    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-  </style>
-  <script>
-    (async function() {
-      const applicationId = ${JSON.stringify(applicationId)};
-      const urlParams = new URLSearchParams(window.location.search);
-      const code = urlParams.get('code');
-      const baseUrl = window.location.origin;
-
-      function showError(message) {
-        document.addEventListener('DOMContentLoaded', function() {
-          document.getElementById('spinner').style.display = 'none';
-          document.getElementById('title').textContent = '✗ Connection Failed';
-          document.getElementById('title').className = 'error';
-          document.getElementById('status').textContent = message;
-        });
-
-        if (window.opener) {
-          window.opener.postMessage({ type: 'APOLLO_OAUTH_ERROR', error: message }, '*');
-        }
-      }
-
-      if (!code) {
-        showError('Authorization code is missing. Please try connecting again.');
-        return;
-      }
-
-      try {
-        const response = await fetch(
-          baseUrl + '/s/oauth/token-pairs?code=' + encodeURIComponent(code),
-          {
-            method: 'GET',
-            headers: { 'Content-Type': 'application/json' }
-          }
-        );
-
-        if (!response.ok) {
-          const errorText = await response.text();
-          throw new Error('Failed to get tokens: ' + response.status + ' - ' + errorText);
-        }
-
-        const tokens = await response.json();
-
-        window.location.href = 'http://apple.localhost:3001/settings/applications/' + applicationId + '#custom';
-
-      } catch (error) {
-        showError(error.message);
-      }
-    })();
-  </script>
-</head>
-<body>
-  <div class="spinner" id="spinner"></div>
-  <h1 class="loading" id="title">Connecting to Apollo...</h1>
-  <p id="status">Please wait while we complete the connection.</p>
-</body>
-</html>`;
-
-const handler = async (): Promise<string> => {
-  const applicationId = process.env.APPLICATION_ID ?? '';
-
-  return buildVerifyPageHtml(applicationId);
-};
-
-export default defineLogicFunction({
-  universalIdentifier: '4d74950a-d9c1-4c66-a799-89c1aea4e6b0',
-  name: 'get-verify-page',
-  description: 'Returns the Apollo OAuth verify page',
-  timeoutSeconds: 10,
-  handler,
-  httpRouteTriggerSettings: {
-    path: VERIFY_PAGE_PATH,
-    httpMethod: 'GET',
-    isAuthRequired: false,
-  },
-});

packages/twenty-apps/community/apollo-enrich/src/logic-functions/on-company-updated.ts

@@ -1,234 +0,0 @@
-import {
-  defineLogicFunction,
-  type DatabaseEventPayload,
-  type ObjectRecordUpdateEvent,
-} from 'twenty-sdk';
-import { CoreApiClient } from 'twenty-sdk/generated';
-
-
-
-type CompanyRecord = {
-  id: string;
-  name?: string;
-  domainName?: {
-    primaryLinkUrl?: string;
-    primaryLinkLabel?: string;
-  };
-};
-
-type ApolloOrganization = {
-  name?: string;
-  website_url?: string;
-  linkedin_url?: string;
-  twitter_url?: string;
-  estimated_num_employees?: number;
-  annual_revenue?: number;
-  total_funding?: number;
-  street_address?: string;
-  city?: string;
-  state?: string;
-  postal_code?: string;
-  country?: string;
-  short_description?: string;
-  industry?: string;
-  founded_year?: number;
-};
-
-type ApolloEnrichResponse = {
-  organization?: ApolloOrganization;
-};
-
-
-
-const extractDomain = (
-  domainName?: CompanyRecord['domainName'],
-): string | undefined => {
-  const url = domainName?.primaryLinkUrl;
-
-  if (!url) {
-    return undefined;
-  }
-
-  try {
-    const hostname = new URL(
-      url.startsWith('http') ? url : `https://${url}`,
-    ).hostname;
-
-    return hostname.replace(/^www\./, '');
-  } catch {
-    return url.replace(/^(https?:\/\/)?(www\.)?/, '').split('/')[0];
-  }
-};
-
-const fetchApolloEnrichment = async (
-  domain: string,
-): Promise<ApolloOrganization | undefined> => {
-  const response = await fetch(
-    `https://api.apollo.io/api/v1/organizations/enrich?domain=${encodeURIComponent(domain)}`,
-    {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.APOLLO_ACCESS_TOKEN ?? ''}`,
-      },
-    },
-  );
-
-  const data: ApolloEnrichResponse = await response.json();
-
-  return data.organization;
-};
-
-const buildCompanyUpdateData = (
-  apolloOrganization: ApolloOrganization,
-): Record<string, unknown> => {
-  const updateData: Record<string, unknown> = {};
-
-  if (apolloOrganization.name) {
-    updateData.name = apolloOrganization.name;
-  }
-
-  if (apolloOrganization.estimated_num_employees) {
-    updateData.employees = apolloOrganization.estimated_num_employees;
-  }
-
-  if (apolloOrganization.linkedin_url) {
-    updateData.linkedinLink = {
-      primaryLinkUrl: apolloOrganization.linkedin_url,
-      primaryLinkLabel: 'LinkedIn',
-    };
-  }
-
-  if (apolloOrganization.twitter_url) {
-    updateData.xLink = {
-      primaryLinkUrl: apolloOrganization.twitter_url,
-      primaryLinkLabel: 'X',
-    };
-  }
-
-  if (apolloOrganization.annual_revenue) {
-    updateData.annualRecurringRevenue = {
-      amountMicros: apolloOrganization.annual_revenue * 1_000_000,
-      currencyCode: 'USD',
-    };
-  }
-
-  const hasAddress =
-    apolloOrganization.street_address ||
-    apolloOrganization.city ||
-    apolloOrganization.state ||
-    apolloOrganization.country;
-
-  if (hasAddress) {
-    updateData.address = {
-      addressStreet1: apolloOrganization.street_address ?? '',
-      addressCity: apolloOrganization.city ?? '',
-      addressState: apolloOrganization.state ?? '',
-      addressPostcode: apolloOrganization.postal_code ?? '',
-      addressCountry: apolloOrganization.country ?? '',
-    };
-  }
-
-  if (apolloOrganization.industry) {
-    updateData.apolloIndustry = apolloOrganization.industry;
-  }
-
-  if (apolloOrganization.short_description) {
-    updateData.apolloShortDescription = apolloOrganization.short_description;
-  }
-
-  if (apolloOrganization.founded_year) {
-    updateData.apolloFoundedYear = apolloOrganization.founded_year;
-  }
-
-  if (apolloOrganization.total_funding) {
-    updateData.apolloTotalFunding = {
-      amountMicros: apolloOrganization.total_funding * 1_000_000,
-      currencyCode: 'USD',
-    };
-  }
-
-  return updateData;
-};
-
-const updateCompanyInTwenty = async (
-  companyId: string,
-  updateData: Record<string, unknown>,
-): Promise<void> => {
-  const client = new CoreApiClient();
-
-  const result = await client.mutation({
-    updateCompany: {
-      __args: {
-        id: companyId,
-        data: updateData,
-      },
-      id: true,
-    },
-  });
-
-  if (!result.updateCompany) {
-    throw new Error(`Failed to update company ${companyId}: no result`);
-  }
-};
-
-
-type CompanyUpdateEvent = DatabaseEventPayload<
-  ObjectRecordUpdateEvent<CompanyRecord>
->;
-
-const handler = async (
-  event: CompanyUpdateEvent,
-): Promise<object | undefined> => {
-
-
-    const { recordId, properties } = event;
-    const { after: companyAfter } = properties;
-
-    const domain = extractDomain(companyAfter?.domainName);
-
-    if (!domain) {
-      return { skipped: true, reason: 'no domain found on company' };
-    }
-
-    const apolloOrganization = await fetchApolloEnrichment(domain);
-
-    if (!apolloOrganization) {
-      return {
-        skipped: true,
-        reason: `no Apollo data found for ${domain}`,
-      };
-    }
-
-    const updateData = buildCompanyUpdateData(apolloOrganization);
-
-    if (Object.keys(updateData).length === 0) {
-      return { skipped: true, reason: 'no enrichment data to apply' };
-    }
-
-
-    await updateCompanyInTwenty(recordId, updateData);
-
-    const result = {
-      enriched: true,
-      companyId: recordId,
-      domain,
-      updatedFields: Object.keys(updateData),
-    };
-
-    return result;
-
-};
-
-export default defineLogicFunction({
-  universalIdentifier: '6248b3fe-a8af-404a-8e38-19df98f73d81',
-  name: 'on-company-updated',
-  description:
-    'Enriches company data from Apollo when the company domain is updated',
-  timeoutSeconds: 30,
-  handler,
-  databaseEventTriggerSettings: {
-    eventName: 'company.updated',
-    updatedFields: ['domainName'],
-  },
-});

packages/twenty-apps/community/apollo-enrich/src/logic-functions/post-install.ts

@@ -1,13 +0,0 @@
-import { definePostInstallLogicFunction, type InstallLogicFunctionPayload } from 'twenty-sdk';
-
-const handler = async (payload: InstallLogicFunctionPayload): Promise<void> => {
-  console.log('Post install logic function executed successfully!', payload.previousVersion);
-};
-
-export default definePostInstallLogicFunction({
-  universalIdentifier: '08292efc-d7ba-4ec3-ab95-e7c33bd3a3bc',
-  name: 'post-install',
-  description: 'Runs after installation to set up the application.',
-  timeoutSeconds: 300,
-  handler,
-});

packages/twenty-apps/community/apollo-enrich/src/logic-functions/pre-install.ts

@@ -1,13 +0,0 @@
-import { definePreInstallLogicFunction, type InstallLogicFunctionPayload } from 'twenty-sdk';
-
-const handler = async (payload: InstallLogicFunctionPayload): Promise<void> => {
-  console.log('Pre install logic function executed successfully!', payload.previousVersion);
-};
-
-export default definePreInstallLogicFunction({
-  universalIdentifier: 'af7cd86e-149e-466a-8d60-312b6e46d604',
-  name: 'pre-install',
-  description: 'Runs before installation to prepare the application.',
-  timeoutSeconds: 300,
-  handler,
-});

packages/twenty-apps/community/apollo-enrich/src/roles/default-role.ts

@@ -1,15 +0,0 @@
-import { defineRole } from 'twenty-sdk';
-
-export const DEFAULT_ROLE_UNIVERSAL_IDENTIFIER =
-  'b8faae3f-e174-43fa-ab94-715712ae26cb';
-
-export default defineRole({
-  universalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
-  label: 'Apollo enrich default function role',
-  description: 'Apollo enrich default function role',
-  canReadAllObjectRecords: true,
-  canUpdateAllObjectRecords: true,
-  canSoftDeleteAllObjectRecords: true,
-  canDestroyAllObjectRecords: false,
-  canUpdateAllSettings: true,
-});

packages/twenty-apps/community/apollo-enrich/tsconfig.json

@@ -1,31 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "sourceMap": true,
-    "declaration": true,
-    "outDir": "./dist",
-    "rootDir": ".",
-    "jsx": "react-jsx",
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "allowUnreachableCode": false,
-    "strict": true,
-    "alwaysStrict": true,
-    "noImplicitAny": true,
-    "strictBindCallApply": false,
-    "target": "es2018",
-    "module": "esnext",
-    "lib": ["es2020", "dom"],
-    "skipLibCheck": true,
-    "skipDefaultLibCheck": true,
-    "resolveJsonModule": true,
-    "paths": {
-      "src/*": ["./src/*"],
-      "~/*": ["./*"]
-    }
-  },
-  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.spec.ts"]
-}

packages/twenty-apps/hello-world/.gitignore

@@ -1,3 +1,2 @@
 .yarn/install-state.gz
 .env
-.twenty

packages/twenty-apps/hello-world/package.json

@@ -9,16 +9,14 @@
   },
   "packageManager": "yarn@4.9.2",
   "scripts": {
-    "twenty": "twenty",
-    "auth": "twenty auth:login",
-    "dev": "twenty app:dev",
-    "build": "twenty app:build",
-    "typecheck": "twenty app:typecheck",
-    "uninstall": "twenty app:uninstall",
-    "entity:add": "twenty entity:add"
+    "create-entity": "twenty app add",
+    "dev": "twenty app dev",
+    "sync": "twenty app sync",
+    "uninstall": "twenty app uninstall",
+    "auth": "twenty auth login"
   },
   "dependencies": {
-    "twenty-sdk": "0.6.3"
+    "twenty-sdk": "0.2.4"
   },
   "devDependencies": {
     "@types/node": "^24.7.2"

packages/twenty-apps/hello-world/src/actions/create-new-post-card.ts

@@ -1,55 +1,67 @@
-import {
-  defineLogicFunction,
-  type CronPayload,
-  type DatabaseEventPayload,
-  type ObjectRecordCreateEvent,
+import type {
+  FunctionConfig,
+  DatabaseEventPayload,
+  ObjectRecordCreateEvent,
+  CronPayload,
 } from 'twenty-sdk';
-import { CoreApiClient as Twenty, type CoreSchema } from 'twenty-sdk/generated';
+import Twenty, { type Person } from '../../generated';
 
 type CreateNewPostCardParams =
   | { name?: string }
-  | DatabaseEventPayload<ObjectRecordCreateEvent<CoreSchema.Person>>
+  | DatabaseEventPayload<ObjectRecordCreateEvent<Person>>
   | CronPayload;
 
-const handler = async (params: CreateNewPostCardParams) => {
-  const client = new Twenty();
+export const main = async (params: CreateNewPostCardParams) => {
+  try {
+    const client = new Twenty();
 
-  const name =
-    'name' in params
-      ? params.name ?? process.env.DEFAULT_RECIPIENT_NAME ?? 'Hello world'
-      : 'Hello world';
+    const name =
+      'name' in params
+        ? params.name ?? process.env.DEFAULT_RECIPIENT_NAME ?? 'Hello world'
+        : 'Hello world';
 
-  const createPostCard = await client.mutation({
-    createPostCard: {
-      __args: {
-        data: {
-          name,
+    const createPostCard = await client.mutation({
+      createPostCard: {
+        __args: {
+          data: {
+            name,
+          },
         },
+        name: true,
+        id: true,
       },
-      name: true,
-      id: true,
-    },
-  });
+    });
 
-  console.log('createPostCard result', createPostCard);
+    console.log('createPostCard result', createPostCard);
 
-  return createPostCard;
+    return createPostCard;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
 };
 
-export default defineLogicFunction({
+export const config: FunctionConfig = {
   universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
   name: 'create-new-post-card',
   timeoutSeconds: 2,
-  handler,
-  httpRouteTriggerSettings: {
-    path: '/post-card/create',
-    httpMethod: 'GET',
-    isAuthRequired: false,
-  },
-  cronTriggerSettings: {
-    pattern: '0 0 1 1 *',
-  },
-  databaseEventTriggerSettings: {
-    eventName: 'person.created',
-  },
-});
+  triggers: [
+    {
+      universalIdentifier: 'c9f84c8d-b26d-40d1-95dd-4f834ae5a2c6',
+      type: 'route',
+      path: '/post-card/create',
+      httpMethod: 'GET',
+      isAuthRequired: false,
+    },
+    {
+      universalIdentifier: 'dd802808-0695-49e1-98c9-d5c9e2704ce2',
+      type: 'cron',
+      pattern: '0 0 1 1 *', // Every year 1st of January
+    },
+    {
+      universalIdentifier: '203f1df3-4a82-4d06-a001-b8cf22a31156',
+      type: 'databaseEvent',
+      eventName: 'person.created',
+    },
+  ],
+};

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

@@ -1,6 +1,6 @@
-import { defineApplication } from 'twenty-sdk';
+import { type ApplicationConfig } from 'twenty-sdk';
 
-export default defineApplication({
+const config: ApplicationConfig = {
   universalIdentifier: '4ec0391d-18d5-411c-b2f3-266ddc1c3ef7',
   displayName: 'Hello World',
   description: 'A simple hello world app',
@@ -14,4 +14,6 @@ export default defineApplication({
     },
   },
   defaultRoleUniversalIdentifier: 'b648f87b-1d26-4961-b974-0908fd991061',
-});
+};
+
+export default config;

packages/twenty-apps/hello-world/src/objects/postCard.ts

@@ -1,89 +1,112 @@
-import { defineObject, FieldType } from 'twenty-sdk';
+import { type Note } from '../../generated';
 
-const POST_CARD_STATUS = {
-  DRAFT: 'DRAFT',
-  SENT: 'SENT',
-  DELIVERED: 'DELIVERED',
-  RETURNED: 'RETURNED',
-} as const;
+import {
+  type AddressField,
+  Field,
+  FieldType,
+  type FullNameField,
+  Object,
+  OnDeleteAction,
+  Relation,
+  RelationType,
+  STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS,
+} from 'twenty-sdk';
 
-export default defineObject({
+enum PostCardStatus {
+  DRAFT = 'DRAFT',
+  SENT = 'SENT',
+  DELIVERED = 'DELIVERED',
+  RETURNED = 'RETURNED',
+}
+
+@Object({
   universalIdentifier: '54b589ca-eeed-4950-a176-358418b85c05',
   nameSingular: 'postCard',
   namePlural: 'postCards',
   labelSingular: 'Post card',
   labelPlural: 'Post cards',
-  description: 'A post card object',
+  description: ' A post card object',
   icon: 'IconMail',
-  fields: [
-    {
-      universalIdentifier: '58a0a314-d7ea-4865-9850-7fb84e72f30b',
-      type: FieldType.TEXT,
-      name: 'content',
-      label: 'Content',
-      description: "Postcard's content",
-      icon: 'IconAbc',
-    },
-    {
-      universalIdentifier: 'c6aa31f3-da76-4ac6-889f-475e226009ac',
-      type: FieldType.FULL_NAME,
-      name: 'recipientName',
-      label: 'Recipient name',
-      icon: 'IconUser',
-    },
-    {
-      universalIdentifier: '95045777-a0ad-49ec-98f9-22f9fc0c8266',
-      type: FieldType.ADDRESS,
-      name: 'recipientAddress',
-      label: 'Recipient address',
-      icon: 'IconHome',
-    },
-    {
-      universalIdentifier: '87b675b8-dd8c-4448-b4ca-20e5a2234a1e',
-      type: FieldType.SELECT,
-      name: 'status',
-      label: 'Status',
-      icon: 'IconSend',
-      defaultValue: `'${POST_CARD_STATUS.DRAFT}'`,
-      options: [
-        {
-          id: 'a1b2c3d4-0001-4000-8000-000000000001',
-          value: POST_CARD_STATUS.DRAFT,
-          label: 'Draft',
-          position: 0,
-          color: 'gray',
-        },
-        {
-          id: 'a1b2c3d4-0002-4000-8000-000000000002',
-          value: POST_CARD_STATUS.SENT,
-          label: 'Sent',
-          position: 1,
-          color: 'orange',
-        },
-        {
-          id: 'a1b2c3d4-0003-4000-8000-000000000003',
-          value: POST_CARD_STATUS.DELIVERED,
-          label: 'Delivered',
-          position: 2,
-          color: 'green',
-        },
-        {
-          id: 'a1b2c3d4-0004-4000-8000-000000000004',
-          value: POST_CARD_STATUS.RETURNED,
-          label: 'Returned',
-          position: 3,
-          color: 'orange',
-        },
-      ],
-    },
-    {
-      universalIdentifier: 'e06abe72-5b44-4e7f-93be-afc185a3c433',
-      type: FieldType.DATE_TIME,
-      name: 'deliveredAt',
-      label: 'Delivered at',
-      icon: 'IconCheck',
-      isNullable: true,
-      defaultValue: null,
-    },
-  ],
-});
+})
+export class PostCard {
+  @Field({
+    universalIdentifier: '58a0a314-d7ea-4865-9850-7fb84e72f30b',
+    type: FieldType.TEXT,
+    label: 'Content',
+    description: "Postcard's content",
+    icon: 'IconAbc',
+  })
+  content: string;
+
+  @Field({
+    universalIdentifier: 'c6aa31f3-da76-4ac6-889f-475e226009ac',
+    type: FieldType.FULL_NAME,
+    label: 'Recipient name',
+    icon: 'IconUser',
+  })
+  recipientName: FullNameField;
+
+  @Field({
+    universalIdentifier: '95045777-a0ad-49ec-98f9-22f9fc0c8266',
+    type: FieldType.ADDRESS,
+    label: 'Recipient address',
+    icon: 'IconHome',
+  })
+  recipientAddress: AddressField;
+
+  @Field({
+    universalIdentifier: '87b675b8-dd8c-4448-b4ca-20e5a2234a1e',
+    type: FieldType.SELECT,
+    label: 'Status',
+    icon: 'IconSend',
+    defaultValue: `'${PostCardStatus.DRAFT}'`,
+    options: [
+      {
+        value: PostCardStatus.DRAFT,
+        label: 'Draft',
+        position: 0,
+        color: 'gray',
+      },
+      {
+        value: PostCardStatus.SENT,
+        label: 'Sent',
+        position: 1,
+        color: 'orange',
+      },
+      {
+        value: PostCardStatus.DELIVERED,
+        label: 'Delivered',
+        position: 2,
+        color: 'green',
+      },
+      {
+        value: PostCardStatus.RETURNED,
+        label: 'Returned',
+        position: 3,
+        color: 'orange',
+      },
+    ],
+  })
+  status: PostCardStatus;
+
+  @Relation({
+    universalIdentifier: 'c9e2b4f4-b9ad-4427-9b42-9971b785edfe',
+    type: RelationType.ONE_TO_MANY,
+    label: 'Notes',
+    icon: 'IconComment',
+    inverseSideTargetUniversalIdentifier:
+      STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.note.universalIdentifier,
+    onDelete: OnDeleteAction.CASCADE,
+  })
+  notes: Note[];
+
+  @Field({
+    universalIdentifier: 'e06abe72-5b44-4e7f-93be-afc185a3c433',
+    type: FieldType.DATE_TIME,
+    label: 'Delivered at',
+    icon: 'IconCheck',
+    isNullable: true,
+    defaultValue: null,
+  })
+  deliveredAt?: Date;
+}

packages/twenty-apps/hello-world/src/roles/function-role.ts

@@ -1,6 +1,6 @@
-import { defineRole, PermissionFlag } from 'twenty-sdk';
+import { PermissionFlag, type RoleConfig } from 'twenty-sdk';
 
-export default defineRole({
+export const functionRole: RoleConfig = {
   universalIdentifier: 'b648f87b-1d26-4961-b974-0908fd991061',
   label: 'Default function role',
   description: 'Default role for function Twenty client',
@@ -14,7 +14,7 @@ export default defineRole({
   canBeAssignedToApiKeys: false,
   objectPermissions: [
     {
-      objectUniversalIdentifier: '54b589ca-eeed-4950-a176-358418b85c05',
+      objectUniversalIdentifier: '9f9882af-170c-4879-b013-f9628b77c050',
       canReadObjectRecords: true,
       canUpdateObjectRecords: true,
       canSoftDeleteObjectRecords: false,
@@ -23,11 +23,11 @@ export default defineRole({
   ],
   fieldPermissions: [
     {
-      objectUniversalIdentifier: '54b589ca-eeed-4950-a176-358418b85c05',
-      fieldUniversalIdentifier: '58a0a314-d7ea-4865-9850-7fb84e72f30b',
+      objectUniversalIdentifier: '9f9882af-170c-4879-b013-f9628b77c050',
+      fieldUniversalIdentifier: 'b2c37dc0-8ae7-470e-96cd-1476b47dfaff',
       canReadFieldValue: false,
       canUpdateFieldValue: false,
     },
   ],
   permissionFlags: [PermissionFlag.APPLICATIONS],
-});
+};

packages/twenty-docs/developers/contribute/capabilities/frontend-development/style-guide.mdx

@@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope(
 
 ### Use StyledComponents
 
-Style the components with [Linaria styled](https://github.com/callstack/linaria).
+Style the components with [styled-components](https://emotion.sh/docs/styled).
 
 ```tsx
 // ❌ Bad

packages/twenty-docs/developers/self-host/capabilities/troubleshooting.mdx

@@ -136,7 +136,7 @@ That's expected as user is unauthorized when logged out since its identity is no
 Comment out checker plugin in `packages/twenty-ui/vite-config.ts` like in example below
 ```
 plugins: [
-      react({ jsxImportSource: 'react' }),
+      react({ jsxImportSource: '@emotion/react' }),
       tsconfigPaths(),
       svgr(),
       dts(dtsConfig),

packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/style-guide.mdx

@@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope(
 
 ### استخدام مكونات منسقة
 
-قم بتنسيق المكونات باستخدام [Linaria styled](https://github.com/callstack/linaria).
+قم بتنسيق المكونات باستخدام [styled-components](https://emotion.sh/docs/styled).
 
 ```tsx
 // ❌ سيء

packages/twenty-docs/l/ar/developers/self-host/capabilities/troubleshooting.mdx

@@ -145,7 +145,7 @@ npx nx worker twenty-server
 
 ```
 plugins: [
-      react({ jsxImportSource: 'react' }),
+      react({ jsxImportSource: '@emotion/react' }),
       tsconfigPaths(),
       svgr(),
       dts(dtsConfig),

packages/twenty-docs/l/cs/developers/contribute/capabilities/frontend-development/style-guide.mdx

@@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope(
 
 ### Používejte StyledComponents
 
-Stylujte komponenty pomocí [Linaria styled](https://github.com/callstack/linaria).
+Styling komponenty s [styled-components](https://emotion.sh/docs/styled).
 
 ```tsx
 // ❌ Špatné

packages/twenty-docs/l/cs/developers/self-host/capabilities/troubleshooting.mdx

@@ -146,7 +146,7 @@ Zakomentujte plugin checker v `packages/twenty-ui/vite-config.ts` jako v příkl
 
 ```
 plugins: [
-      react({ jsxImportSource: 'react' }),
+      react({ jsxImportSource: '@emotion/react' }),
       tsconfigPaths(),
       svgr(),
       dts(dtsConfig),

packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/style-guide.mdx

@@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope(
 
 ### Verwenden Sie StyledComponents
 
-Stylen Sie die Komponenten mit [Linaria styled](https://github.com/callstack/linaria).
+Stylen Sie die Komponenten mit [styled-components](https://emotion.sh/docs/styled).
 
 ```tsx
 // ❌ Schlecht

packages/twenty-docs/l/de/developers/self-host/capabilities/troubleshooting.mdx

@@ -145,7 +145,7 @@ Kommentieren Sie das Checker-Plugin in `packages/twenty-ui/vite-config.ts` wie i
 
 ```
 plugins: [
-      react({ jsxImportSource: 'react' }),
+      react({ jsxImportSource: '@emotion/react' }),
       tsconfigPaths(),
       svgr(),
       dts(dtsConfig),

packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/style-guide.mdx

@@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope(
 
 ### Usar StyledComponents
 
-Estiliza los componentes con [Linaria styled](https://github.com/callstack/linaria).
+Estiliza los componentes con [styled-components](https://emotion.sh/docs/styled).
 
 ```tsx
 // ❌ Bad

packages/twenty-docs/l/es/developers/self-host/capabilities/troubleshooting.mdx

@@ -145,7 +145,7 @@ Comente el plugin checker en `packages/twenty-ui/vite-config.ts` como en el ejem
 
 ```
 plugins: [
-      react({ jsxImportSource: 'react' }),
+      react({ jsxImportSource: '@emotion/react' }),
       tsconfigPaths(),
       svgr(),
       dts(dtsConfig),

packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/style-guide.mdx

@@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope(
 
 ### Utilisez StyledComponents
 
-Styliser les composants avec [Linaria styled](https://github.com/callstack/linaria).
+Styliser les composants avec [styled-components](https://emotion.sh/docs/styled).
 
 ```tsx
 // ❌ Bad

packages/twenty-docs/l/fr/developers/self-host/capabilities/troubleshooting.mdx

@@ -145,7 +145,7 @@ Commentez le plugin de vérification dans `packages/twenty-ui/vite-config.ts` co
 
 ```
 plugins: [
-      react({ jsxImportSource: 'react' }),
+      react({ jsxImportSource: '@emotion/react' }),
       tsconfigPaths(),
       svgr(),
       dts(dtsConfig),

packages/twenty-docs/l/it/developers/contribute/capabilities/frontend-development/style-guide.mdx

@@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope(
 
 ### Usa StyledComponents
 
-Stilizza i componenti con [Linaria styled](https://github.com/callstack/linaria).
+Stile i componenti con [styled-components](https://emotion.sh/docs/styled).
 
 ```tsx
 // ❌ Male

packages/twenty-docs/l/it/developers/self-host/capabilities/troubleshooting.mdx

@@ -146,7 +146,7 @@ Commenta il plugin checker in `packages/twenty-ui/vite-config.ts` come mostrato
 
 ```
 plugins: [
-      react({ jsxImportSource: 'react' }),
+      react({ jsxImportSource: '@emotion/react' }),
       tsconfigPaths(),
       svgr(),
       dts(dtsConfig),

packages/twenty-docs/l/ja/developers/contribute/capabilities/frontend-development/style-guide.mdx

@@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope(
 
 ### StyledComponentsを使用する
 
-コンポーネントを[Linaria styled](https://github.com/callstack/linaria)でスタイル設定する。
+コンポーネントを[styled-components](https://emotion.sh/docs/styled)でスタイル設定する。
 
 ```tsx
 // ❌ Bad

packages/twenty-docs/l/ja/developers/self-host/capabilities/troubleshooting.mdx

@@ -152,7 +152,7 @@ npx nx worker twenty-server
 
 ```
 plugins: [
-      react({ jsxImportSource: 'react' }),
+      react({ jsxImportSource: '@emotion/react' }),
       tsconfigPaths(),
       svgr(),
       dts(dtsConfig),

packages/twenty-docs/l/ko/developers/contribute/capabilities/frontend-development/style-guide.mdx

@@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope(
 
 ### StyledComponents 사용
 
-[Linaria styled](https://github.com/callstack/linaria)로 구성 요소를 스타일링하십시오.
+[styled-components](https://emotion.sh/docs/styled)로 구성 요소를 스타일링하십시오.
 
 ```tsx
 // ❌ Bad

packages/twenty-docs/l/ko/developers/self-host/capabilities/troubleshooting.mdx

@@ -145,7 +145,7 @@ npx nx worker twenty-server
 
 ```
 plugins: [
-      react({ jsxImportSource: 'react' }),
+      react({ jsxImportSource: '@emotion/react' }),
       tsconfigPaths(),
       svgr(),
       dts(dtsConfig),

packages/twenty-docs/l/pt/developers/contribute/capabilities/frontend-development/style-guide.mdx

@@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope(
 
 ### Use StyledComponents
 
-Estilize os componentes com [Linaria styled](https://github.com/callstack/linaria).
+Estilize os componentes com [styled-components](https://emotion.sh/docs/styled).
 
 ```tsx
 // ❌ Bad

packages/twenty-docs/l/pt/developers/self-host/capabilities/troubleshooting.mdx

@@ -145,7 +145,7 @@ Comente o plugin checker em `packages/twenty-ui/vite-config.ts` como no exemplo
 
 ```
 plugins: [
-      react({ jsxImportSource: 'react' }),
+      react({ jsxImportSource: '@emotion/react' }),
       tsconfigPaths(),
       svgr(),
       dts(dtsConfig),

packages/twenty-docs/l/ro/developers/contribute/capabilities/frontend-development/style-guide.mdx

@@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope(
 
 ### Folosește ComponentaStilizată
 
-Stilizează componentele cu [Linaria styled](https://github.com/callstack/linaria).
+Stilizează componentele cu [styled-components](https://emotion.sh/docs/styled).
 
 ```tsx
 // ❌ Rău

packages/twenty-docs/l/ro/developers/self-host/capabilities/troubleshooting.mdx

@@ -146,7 +146,7 @@ Comentați pluginul checker în `packages/twenty-ui/vite-config.ts`, ca în exem
 
 ```
 plugins: [
-      react({ jsxImportSource: 'react' }),
+      react({ jsxImportSource: '@emotion/react' }),
       tsconfigPaths(),
       svgr(),
       dts(dtsConfig),

packages/twenty-docs/l/ru/developers/contribute/capabilities/frontend-development/style-guide.mdx

@@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope(
 
 ### Использование StyledComponents
 
-Стилизуйте компоненты с помощью [Linaria styled](https://github.com/callstack/linaria).
+Стилизуйте компоненты с помощью [styled-components](https://emotion.sh/docs/styled).
 
 ```tsx
 // ❌ Плохо

packages/twenty-docs/l/ru/developers/self-host/capabilities/troubleshooting.mdx

@@ -146,7 +146,7 @@ npx nx worker twenty-server
 
 ```
 plugins: [
-      react({ jsxImportSource: 'react' }),
+      react({ jsxImportSource: '@emotion/react' }),
       tsconfigPaths(),
       svgr(),
       dts(dtsConfig),

packages/twenty-docs/l/tr/developers/contribute/capabilities/frontend-development/style-guide.mdx

@@ -193,7 +193,7 @@ setHotkeyScopeAndMemorizePreviousScope(
 
 ### StyledComponents kullanın
 
-Bileşenleri [Linaria styled](https://github.com/callstack/linaria) ile stillendirin.
+Bileşenleri [styled-components](https://emotion.sh/docs/styled) ile stillendirin.
 
 ```tsx
 // ❌ Kötü

packages/twenty-docs/l/tr/developers/self-host/capabilities/troubleshooting.mdx

@@ -145,7 +145,7 @@ Aşağıdaki örnekte olduğu gibi `packages/twenty-ui/vite-config.ts` içindeki
 
 ```
 plugins: [
-      react({ jsxImportSource: 'react' }),
+      react({ jsxImportSource: '@emotion/react' }),
       tsconfigPaths(),
       svgr(),
       dts(dtsConfig),

packages/twenty-docs/l/zh/developers/contribute/capabilities/frontend-development/style-guide.mdx

@@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope(
 
 ### 使用StyledComponents
 
-使用[Linaria styled](https://github.com/callstack/linaria)对组件进行样式化。
+使用[styled-components](https://emotion.sh/docs/styled)对组件进行样式化。
 
 ```tsx
 // ❌ Bad

packages/twenty-docs/l/zh/developers/self-host/capabilities/troubleshooting.mdx

@@ -145,7 +145,7 @@ npx nx worker twenty-server
 
 ```
 plugins: [
-      react({ jsxImportSource: 'react' }),
+      react({ jsxImportSource: '@emotion/react' }),
       tsconfigPaths(),
       svgr(),
       dts(dtsConfig),

packages/twenty-front/.storybook/main.ts

@@ -58,11 +58,6 @@ const config: StorybookConfig = {
 
     return mergeConfig(viteConfig, {
       logLevel: 'warn',
-      resolve: {
-        alias: {
-          '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
-        },
-      },
     });
   },
 

packages/twenty-front/.storybook/preview.tsx

@@ -1,3 +1,4 @@
+import { ThemeProvider } from '@emotion/react';
 import { i18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
 import { type Preview } from '@storybook/react-vite';
@@ -70,13 +71,15 @@ const preview: Preview = {
 
       return (
         <I18nProvider i18n={i18n}>
-          <ThemeContextProvider theme={theme}>
-            <ClickOutsideListenerContext.Provider
-              value={{ excludedClickOutsideId: undefined }}
-            >
-              <Story />
-            </ClickOutsideListenerContext.Provider>
-          </ThemeContextProvider>
+          <ThemeProvider theme={theme}>
+            <ThemeContextProvider theme={theme}>
+              <ClickOutsideListenerContext.Provider
+                value={{ excludedClickOutsideId: undefined }}
+              >
+                <Story />
+              </ClickOutsideListenerContext.Provider>
+            </ThemeContextProvider>
+          </ThemeProvider>
         </I18nProvider>
       );
     },

packages/twenty-front/src/config/index.ts

@@ -1,12 +1,12 @@
 const getDefaultUrl = () => {
   if (
-    window.location.hostname.endsWith('localhost') ||
-    window.location.hostname.endsWith('127.0.0.1')
+    window.location.hostname === 'localhost' ||
+    window.location.hostname === '127.0.0.1'
   ) {
     // In development environment front and backend usually run on separate ports
     // we set the default value to localhost:3000.
     // In dev context, we use env vars to overwrite it
-    return `http://${window.location.hostname}:3000`;
+    return 'http://localhost:3000';
   } else {
     // Outside of localhost we assume that they run on the same port
     // because the backend will serve the frontend

packages/twenty-front/src/emotion.d.ts

@@ -0,0 +1,5 @@
+import { type ThemeType } from 'twenty-ui/theme';
+
+declare module '@emotion/react' {
+  export interface Theme extends ThemeType {}
+}

packages/twenty-front/src/generated-metadata/graphql.ts

@@ -5710,7 +5710,7 @@ export type UpdateOneApplicationVariableMutationVariables = Exact<{
 
 export type UpdateOneApplicationVariableMutation = { __typename?: 'Mutation', updateOneApplicationVariable: boolean };
 
-export type ApplicationFieldsFragment = { __typename?: 'Application', id: string, name: string, description: string, version: string, universalIdentifier: string, canBeUninstalled: boolean, defaultRoleId?: string | null, settingsCustomTabFrontComponentId?: string | null, availablePackages: any, applicationVariables: Array<{ __typename?: 'ApplicationVariable', id: string, key: string, value: string, description: string, isSecret: boolean }>, agents: Array<{ __typename?: 'Agent', id: string, name: string, label: string, description?: string | null, icon?: string | null, prompt: string, modelId: string, responseFormat?: any | null, roleId?: string | null, isCustom: boolean, modelConfiguration?: any | null, evaluationInputs: Array<string>, applicationId?: string | null, createdAt: string, updatedAt: string }>, objects: Array<{ __typename?: 'Object', id: string, universalIdentifier: string, nameSingular: string, namePlural: string, labelSingular: string, labelPlural: string, description?: string | null, icon?: string | null, isCustom: boolean, isRemote: boolean, isActive: boolean, isSystem: boolean, isUIReadOnly: boolean, createdAt: string, updatedAt: string, labelIdentifierFieldMetadataId?: string | null, imageIdentifierFieldMetadataId?: string | null, applicationId: string, shortcut?: string | null, isLabelSyncedWithName: boolean, isSearchable: boolean, duplicateCriteria?: Array<Array<string>> | null, indexMetadataList: Array<{ __typename?: 'Index', id: string, createdAt: string, updatedAt: string, name: string, indexWhereClause?: string | null, indexType: IndexType, isUnique: boolean, isCustom?: boolean | null, indexFieldMetadataList: Array<{ __typename?: 'IndexField', id: string, fieldMetadataId: string, createdAt: string, updatedAt: string, order: number }> }>, fieldsList: Array<{ __typename?: 'Field', id: string, universalIdentifier: string, type: FieldMetadataType, name: string, label: string, description?: string | null, icon?: string | null, isCustom?: boolean | null, isActive?: boolean | null, isSystem?: boolean | null, isUIReadOnly?: boolean | null, isNullable?: boolean | null, isUnique?: boolean | null, createdAt: string, updatedAt: string, defaultValue?: any | null, options?: any | null, settings?: any | null, isLabelSyncedWithName?: boolean | null, morphId?: string | null, applicationId: string, relation?: { __typename?: 'Relation', type: RelationType, sourceObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, targetObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, sourceFieldMetadata: { __typename?: 'Field', id: string, name: string }, targetFieldMetadata: { __typename?: 'Field', id: string, name: string } } | null, morphRelations?: Array<{ __typename?: 'Relation', type: RelationType, sourceObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, targetObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, sourceFieldMetadata: { __typename?: 'Field', id: string, name: string }, targetFieldMetadata: { __typename?: 'Field', id: string, name: string } }> | null }> }>, logicFunctions: Array<{ __typename?: 'LogicFunction', id: string, name: string, description?: string | null, runtime: string, timeoutSeconds: number, sourceHandlerPath: string, handlerName: string, toolInputSchema?: any | null, isTool: boolean, cronTriggerSettings?: any | null, databaseEventTriggerSettings?: any | null, httpRouteTriggerSettings?: any | null, applicationId?: string | null, createdAt: string, updatedAt: string }> };
+export type ApplicationFieldsFragment = { __typename?: 'Application', id: string, name: string, description: string, version: string, universalIdentifier: string, canBeUninstalled: boolean, defaultRoleId?: string | null, settingsCustomTabFrontComponentId?: string | null, availablePackages: any, applicationVariables: Array<{ __typename?: 'ApplicationVariable', id: string, key: string, value: string, description: string, isSecret: boolean }>, agents: Array<{ __typename?: 'Agent', id: string, name: string, label: string, description?: string | null, icon?: string | null, prompt: string, modelId: string, responseFormat?: any | null, roleId?: string | null, isCustom: boolean, modelConfiguration?: any | null, evaluationInputs: Array<string>, applicationId?: string | null, createdAt: string, updatedAt: string }>, objects: Array<{ __typename?: 'Object', id: string, universalIdentifier: string, nameSingular: string, namePlural: string, labelSingular: string, labelPlural: string, description?: string | null, icon?: string | null, isCustom: boolean, isRemote: boolean, isActive: boolean, isSystem: boolean, isUIReadOnly: boolean, createdAt: string, updatedAt: string, labelIdentifierFieldMetadataId?: string | null, imageIdentifierFieldMetadataId?: string | null, applicationId: string, shortcut?: string | null, isLabelSyncedWithName: boolean, isSearchable: boolean, duplicateCriteria?: Array<Array<string>> | null, indexMetadataList: Array<{ __typename?: 'Index', id: string, createdAt: string, updatedAt: string, name: string, indexWhereClause?: string | null, indexType: IndexType, isUnique: boolean, isCustom?: boolean | null, indexFieldMetadataList: Array<{ __typename?: 'IndexField', id: string, fieldMetadataId: string, createdAt: string, updatedAt: string, order: number }> }>, fieldsList: Array<{ __typename?: 'Field', id: string, universalIdentifier: string, type: FieldMetadataType, name: string, label: string, description?: string | null, icon?: string | null, isCustom?: boolean | null, isActive?: boolean | null, isSystem?: boolean | null, isUIReadOnly?: boolean | null, isNullable?: boolean | null, isUnique?: boolean | null, createdAt: string, updatedAt: string, defaultValue?: any | null, options?: any | null, settings?: any | null, isLabelSyncedWithName?: boolean | null, morphId?: string | null, applicationId: string, relation?: { __typename?: 'Relation', type: RelationType, sourceObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, targetObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, sourceFieldMetadata: { __typename?: 'Field', id: string, name: string }, targetFieldMetadata: { __typename?: 'Field', id: string, name: string } } | null, morphRelations?: Array<{ __typename?: 'Relation', type: RelationType, sourceObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, targetObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, sourceFieldMetadata: { __typename?: 'Field', id: string, name: string }, targetFieldMetadata: { __typename?: 'Field', id: string, name: string } }> | null }> }>, logicFunctions: Array<{ __typename?: 'LogicFunction', id: string, name: string, description?: string | null, runtime: string, timeoutSeconds: number, sourceHandlerPath: string, handlerName: string, toolInputSchema?: any | null, isTool: boolean, applicationId?: string | null, createdAt: string, updatedAt: string }> };
 
 export type FindManyApplicationsQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -5722,7 +5722,7 @@ export type FindOneApplicationQueryVariables = Exact<{
 }>;
 
 
-export type FindOneApplicationQuery = { __typename?: 'Query', findOneApplication: { __typename?: 'Application', id: string, name: string, description: string, version: string, universalIdentifier: string, canBeUninstalled: boolean, defaultRoleId?: string | null, settingsCustomTabFrontComponentId?: string | null, availablePackages: any, applicationVariables: Array<{ __typename?: 'ApplicationVariable', id: string, key: string, value: string, description: string, isSecret: boolean }>, agents: Array<{ __typename?: 'Agent', id: string, name: string, label: string, description?: string | null, icon?: string | null, prompt: string, modelId: string, responseFormat?: any | null, roleId?: string | null, isCustom: boolean, modelConfiguration?: any | null, evaluationInputs: Array<string>, applicationId?: string | null, createdAt: string, updatedAt: string }>, objects: Array<{ __typename?: 'Object', id: string, universalIdentifier: string, nameSingular: string, namePlural: string, labelSingular: string, labelPlural: string, description?: string | null, icon?: string | null, isCustom: boolean, isRemote: boolean, isActive: boolean, isSystem: boolean, isUIReadOnly: boolean, createdAt: string, updatedAt: string, labelIdentifierFieldMetadataId?: string | null, imageIdentifierFieldMetadataId?: string | null, applicationId: string, shortcut?: string | null, isLabelSyncedWithName: boolean, isSearchable: boolean, duplicateCriteria?: Array<Array<string>> | null, indexMetadataList: Array<{ __typename?: 'Index', id: string, createdAt: string, updatedAt: string, name: string, indexWhereClause?: string | null, indexType: IndexType, isUnique: boolean, isCustom?: boolean | null, indexFieldMetadataList: Array<{ __typename?: 'IndexField', id: string, fieldMetadataId: string, createdAt: string, updatedAt: string, order: number }> }>, fieldsList: Array<{ __typename?: 'Field', id: string, universalIdentifier: string, type: FieldMetadataType, name: string, label: string, description?: string | null, icon?: string | null, isCustom?: boolean | null, isActive?: boolean | null, isSystem?: boolean | null, isUIReadOnly?: boolean | null, isNullable?: boolean | null, isUnique?: boolean | null, createdAt: string, updatedAt: string, defaultValue?: any | null, options?: any | null, settings?: any | null, isLabelSyncedWithName?: boolean | null, morphId?: string | null, applicationId: string, relation?: { __typename?: 'Relation', type: RelationType, sourceObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, targetObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, sourceFieldMetadata: { __typename?: 'Field', id: string, name: string }, targetFieldMetadata: { __typename?: 'Field', id: string, name: string } } | null, morphRelations?: Array<{ __typename?: 'Relation', type: RelationType, sourceObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, targetObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, sourceFieldMetadata: { __typename?: 'Field', id: string, name: string }, targetFieldMetadata: { __typename?: 'Field', id: string, name: string } }> | null }> }>, logicFunctions: Array<{ __typename?: 'LogicFunction', id: string, name: string, description?: string | null, runtime: string, timeoutSeconds: number, sourceHandlerPath: string, handlerName: string, toolInputSchema?: any | null, isTool: boolean, cronTriggerSettings?: any | null, databaseEventTriggerSettings?: any | null, httpRouteTriggerSettings?: any | null, applicationId?: string | null, createdAt: string, updatedAt: string }> } };
+export type FindOneApplicationQuery = { __typename?: 'Query', findOneApplication: { __typename?: 'Application', id: string, name: string, description: string, version: string, universalIdentifier: string, canBeUninstalled: boolean, defaultRoleId?: string | null, settingsCustomTabFrontComponentId?: string | null, availablePackages: any, applicationVariables: Array<{ __typename?: 'ApplicationVariable', id: string, key: string, value: string, description: string, isSecret: boolean }>, agents: Array<{ __typename?: 'Agent', id: string, name: string, label: string, description?: string | null, icon?: string | null, prompt: string, modelId: string, responseFormat?: any | null, roleId?: string | null, isCustom: boolean, modelConfiguration?: any | null, evaluationInputs: Array<string>, applicationId?: string | null, createdAt: string, updatedAt: string }>, objects: Array<{ __typename?: 'Object', id: string, universalIdentifier: string, nameSingular: string, namePlural: string, labelSingular: string, labelPlural: string, description?: string | null, icon?: string | null, isCustom: boolean, isRemote: boolean, isActive: boolean, isSystem: boolean, isUIReadOnly: boolean, createdAt: string, updatedAt: string, labelIdentifierFieldMetadataId?: string | null, imageIdentifierFieldMetadataId?: string | null, applicationId: string, shortcut?: string | null, isLabelSyncedWithName: boolean, isSearchable: boolean, duplicateCriteria?: Array<Array<string>> | null, indexMetadataList: Array<{ __typename?: 'Index', id: string, createdAt: string, updatedAt: string, name: string, indexWhereClause?: string | null, indexType: IndexType, isUnique: boolean, isCustom?: boolean | null, indexFieldMetadataList: Array<{ __typename?: 'IndexField', id: string, fieldMetadataId: string, createdAt: string, updatedAt: string, order: number }> }>, fieldsList: Array<{ __typename?: 'Field', id: string, universalIdentifier: string, type: FieldMetadataType, name: string, label: string, description?: string | null, icon?: string | null, isCustom?: boolean | null, isActive?: boolean | null, isSystem?: boolean | null, isUIReadOnly?: boolean | null, isNullable?: boolean | null, isUnique?: boolean | null, createdAt: string, updatedAt: string, defaultValue?: any | null, options?: any | null, settings?: any | null, isLabelSyncedWithName?: boolean | null, morphId?: string | null, applicationId: string, relation?: { __typename?: 'Relation', type: RelationType, sourceObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, targetObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, sourceFieldMetadata: { __typename?: 'Field', id: string, name: string }, targetFieldMetadata: { __typename?: 'Field', id: string, name: string } } | null, morphRelations?: Array<{ __typename?: 'Relation', type: RelationType, sourceObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, targetObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, sourceFieldMetadata: { __typename?: 'Field', id: string, name: string }, targetFieldMetadata: { __typename?: 'Field', id: string, name: string } }> | null }> }>, logicFunctions: Array<{ __typename?: 'LogicFunction', id: string, name: string, description?: string | null, runtime: string, timeoutSeconds: number, sourceHandlerPath: string, handlerName: string, toolInputSchema?: any | null, isTool: boolean, applicationId?: string | null, createdAt: string, updatedAt: string }> } };
 
 export type UploadFileMutationVariables = Exact<{
   file: Scalars['Upload'];
@@ -6091,21 +6091,21 @@ export type FindOneFrontComponentQueryVariables = Exact<{
 
 export type FindOneFrontComponentQuery = { __typename?: 'Query', frontComponent?: { __typename?: 'FrontComponent', id: string, name: string, applicationId: string, builtComponentChecksum: string, isHeadless: boolean, applicationTokenPair?: { __typename?: 'ApplicationTokenPair', applicationAccessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, applicationRefreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } | null } | null };
 
-export type LogicFunctionFieldsFragment = { __typename?: 'LogicFunction', id: string, name: string, description?: string | null, runtime: string, timeoutSeconds: number, sourceHandlerPath: string, handlerName: string, toolInputSchema?: any | null, isTool: boolean, cronTriggerSettings?: any | null, databaseEventTriggerSettings?: any | null, httpRouteTriggerSettings?: any | null, applicationId?: string | null, createdAt: string, updatedAt: string };
+export type LogicFunctionFieldsFragment = { __typename?: 'LogicFunction', id: string, name: string, description?: string | null, runtime: string, timeoutSeconds: number, sourceHandlerPath: string, handlerName: string, toolInputSchema?: any | null, isTool: boolean, applicationId?: string | null, createdAt: string, updatedAt: string };
 
 export type CreateOneLogicFunctionMutationVariables = Exact<{
   input: CreateLogicFunctionFromSourceInput;
 }>;
 
 
-export type CreateOneLogicFunctionMutation = { __typename?: 'Mutation', createOneLogicFunction: { __typename?: 'LogicFunction', id: string, name: string, description?: string | null, runtime: string, timeoutSeconds: number, sourceHandlerPath: string, handlerName: string, toolInputSchema?: any | null, isTool: boolean, cronTriggerSettings?: any | null, databaseEventTriggerSettings?: any | null, httpRouteTriggerSettings?: any | null, applicationId?: string | null, createdAt: string, updatedAt: string } };
+export type CreateOneLogicFunctionMutation = { __typename?: 'Mutation', createOneLogicFunction: { __typename?: 'LogicFunction', id: string, name: string, description?: string | null, runtime: string, timeoutSeconds: number, sourceHandlerPath: string, handlerName: string, toolInputSchema?: any | null, isTool: boolean, applicationId?: string | null, createdAt: string, updatedAt: string } };
 
 export type DeleteOneLogicFunctionMutationVariables = Exact<{
   input: LogicFunctionIdInput;
 }>;
 
 
-export type DeleteOneLogicFunctionMutation = { __typename?: 'Mutation', deleteOneLogicFunction: { __typename?: 'LogicFunction', id: string, name: string, description?: string | null, runtime: string, timeoutSeconds: number, sourceHandlerPath: string, handlerName: string, toolInputSchema?: any | null, isTool: boolean, cronTriggerSettings?: any | null, databaseEventTriggerSettings?: any | null, httpRouteTriggerSettings?: any | null, applicationId?: string | null, createdAt: string, updatedAt: string } };
+export type DeleteOneLogicFunctionMutation = { __typename?: 'Mutation', deleteOneLogicFunction: { __typename?: 'LogicFunction', id: string, name: string, description?: string | null, runtime: string, timeoutSeconds: number, sourceHandlerPath: string, handlerName: string, toolInputSchema?: any | null, isTool: boolean, applicationId?: string | null, createdAt: string, updatedAt: string } };
 
 export type ExecuteOneLogicFunctionMutationVariables = Exact<{
   input: ExecuteOneLogicFunctionInput;
@@ -6131,14 +6131,14 @@ export type FindManyAvailablePackagesQuery = { __typename?: 'Query', getAvailabl
 export type FindManyLogicFunctionsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type FindManyLogicFunctionsQuery = { __typename?: 'Query', findManyLogicFunctions: Array<{ __typename?: 'LogicFunction', id: string, name: string, description?: string | null, runtime: string, timeoutSeconds: number, sourceHandlerPath: string, handlerName: string, toolInputSchema?: any | null, isTool: boolean, cronTriggerSettings?: any | null, databaseEventTriggerSettings?: any | null, httpRouteTriggerSettings?: any | null, applicationId?: string | null, createdAt: string, updatedAt: string }> };
+export type FindManyLogicFunctionsQuery = { __typename?: 'Query', findManyLogicFunctions: Array<{ __typename?: 'LogicFunction', id: string, name: string, description?: string | null, runtime: string, timeoutSeconds: number, sourceHandlerPath: string, handlerName: string, toolInputSchema?: any | null, isTool: boolean, applicationId?: string | null, createdAt: string, updatedAt: string }> };
 
 export type FindOneLogicFunctionQueryVariables = Exact<{
   input: LogicFunctionIdInput;
 }>;
 
 
-export type FindOneLogicFunctionQuery = { __typename?: 'Query', findOneLogicFunction: { __typename?: 'LogicFunction', id: string, name: string, description?: string | null, runtime: string, timeoutSeconds: number, sourceHandlerPath: string, handlerName: string, toolInputSchema?: any | null, isTool: boolean, cronTriggerSettings?: any | null, databaseEventTriggerSettings?: any | null, httpRouteTriggerSettings?: any | null, applicationId?: string | null, createdAt: string, updatedAt: string } };
+export type FindOneLogicFunctionQuery = { __typename?: 'Query', findOneLogicFunction: { __typename?: 'LogicFunction', id: string, name: string, description?: string | null, runtime: string, timeoutSeconds: number, sourceHandlerPath: string, handlerName: string, toolInputSchema?: any | null, isTool: boolean, applicationId?: string | null, createdAt: string, updatedAt: string } };
 
 export type GetLogicFunctionSourceCodeQueryVariables = Exact<{
   input: LogicFunctionIdInput;
@@ -7397,9 +7397,6 @@ export const LogicFunctionFieldsFragmentDoc = gql`
   handlerName
   toolInputSchema
   isTool
-  cronTriggerSettings
-  databaseEventTriggerSettings
-  httpRouteTriggerSettings
   applicationId
   createdAt
   updatedAt

packages/twenty-front/src/hooks/useCopyToClipboard.tsx

@@ -1,11 +1,10 @@
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { IconCopy, IconExclamationCircle } from 'twenty-ui/display';
-import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
 
 export const useCopyToClipboard = () => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
   const { t } = useLingui();
 

packages/twenty-front/src/index.css

@@ -3,7 +3,6 @@ body {
   font-family: 'Inter', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: var(--t-background-tertiary);
 }
 
 html {

packages/twenty-front/src/index.tsx

@@ -1,5 +1,7 @@
 import ReactDOM from 'react-dom/client';
 
+import '@emotion/react';
+
 import { App } from '@/app/components/App';
 import 'react-loading-skeleton/dist/skeleton.css';
 import 'twenty-ui/style.css';

packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx

@@ -1,12 +1,12 @@
-import { styled } from '@linaria/react';
+import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
 import { NAVIGATION_DRAWER_CONSTRAINTS } from '@/ui/layout/resizable-panel/constants/NavigationDrawerConstraints';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { useContext } from 'react';
-import { ANIMATION, ThemeContext } from 'twenty-ui/theme';
+import { useTheme } from '@emotion/react';
+import { ANIMATION } from 'twenty-ui/theme';
 import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader';
 
 const StyledAnimatedContainer = styled(motion.div)`
@@ -48,7 +48,7 @@ const StyledSkeletonTitleContainer = styled.div`
 
 export const LeftPanelSkeletonLoader = () => {
   const isMobile = useIsMobile();
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <StyledAnimatedContainer

packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx

@@ -1,8 +1,7 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
-import { styled } from '@linaria/react';
-import { useContext } from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { ThemeContext } from 'twenty-ui/theme';
 
 const StyledSkeletonContainer = styled.div`
   align-items: flex-start;
@@ -21,7 +20,7 @@ export const MainNavigationDrawerItemsSkeletonLoader = ({
   title?: boolean;
   length: number;
 }) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <StyledSkeletonContainer>

packages/twenty-front/src/loading/components/RightDrawerSkeletonLoader.tsx

@@ -1,19 +1,17 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
-import { styled } from '@linaria/react';
-import { useContext } from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledRightDrawerContainer = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: ${themeCssVariables.spacing[4]};
+  padding: ${({ theme }) => theme.spacing(4)};
 `;
 
 const StyledSkeletonLoader = () => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <SkeletonTheme