twenty 0.2.0 → 2.46.0

package/dist/app-template/github/workflows/publish.yml

@@ -0,0 +1,52 @@
+# Publishes the app to npm with provenance (npm trusted publishing).
+#
+# One-time setup:
+# 1. On npmjs.com open your package > Settings > Trusted Publisher and register
+#    this repository and this workflow file (publish.yml).
+#    See https://docs.npmjs.com/trusted-publishers
+# 2. Push a version tag (e.g. `git tag v1.0.0 && git push --tags`) or run the
+#    workflow manually from the Actions tab.
+#
+# Publishing with provenance certifies which GitHub repository the package is
+# built from. This is also how you claim ownership of your app in a Twenty
+# marketplace: the claim flow verifies you own the GitHub account or
+# organization the provenance points to.
+name: Publish
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  # Required for npm trusted publishing (OIDC provenance).
+  id-token: write
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          registry-url: https://registry.npmjs.org
+
+      - name: Update npm
+        # Trusted publishing requires npm 11.5.1 or later.
+        run: npm install -g npm@latest
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Publish to npm
+        # Uncomment if publishing from a private source repo: npm rejects
+        # OIDC provenance for private repos
+        # env:
+        #   TWENTY_APP_PUBLISH_DISABLE_PROVENANCE: 'true'
+        run: yarn twenty app:publish

package/dist/app-template/gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# codegen
+generated
+
+# testing
+/coverage
+
+# dev
+/dist/
+
+.twenty
+
+# 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
+*.d.ts

package/dist/app-template/locales/en.json

@@ -0,0 +1 @@
+{}

package/dist/app-template/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "TO-BE-GENERATED",
+  "version": "0.1.0",
+  "license": "MIT",
+  "engines": {
+    "node": "^24.5.0",
+    "npm": "please-use-yarn",
+    "yarn": ">=4.0.2"
+  },
+  "keywords": [],
+  "packageManager": "yarn@4.13.0",
+  "scripts": {
+    "twenty": "twenty",
+    "lint": "oxlint -c .oxlintrc.json .",
+    "lint:fix": "oxlint --fix -c .oxlintrc.json .",
+    "typecheck": "tsgo --noEmit -p tsconfig.spec.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:unit": "vitest run --config vitest.unit.config.ts"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/node": "^24.7.2",
+    "@types/react": "^19.0.0",
+    "@typescript/native-preview": "^7.0.0-dev.20260116.1",
+    "oxlint": "^0.16.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "twenty-client-sdk": "TO-BE-GENERATED",
+    "twenty-sdk": "TO-BE-GENERATED",
+    "twenty-ui": "TO-BE-GENERATED",
+    "typescript": "^5.9.3",
+    "vite-tsconfig-paths": "^4.2.1",
+    "vitest": "^4.0.0"
+  }
+}

package/dist/app-template/public/logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" fill="none">
+  <rect width="80" height="80" rx="16" fill="#141414"/>
+  <rect x="20" y="20" width="16" height="16" rx="4" fill="#FAFAFA"/>
+  <rect x="44" y="20" width="16" height="16" rx="4" fill="#FAFAFA" opacity="0.6"/>
+  <rect x="20" y="44" width="16" height="16" rx="4" fill="#FAFAFA" opacity="0.6"/>
+  <rect x="44" y="44" width="16" height="16" rx="4" fill="#FAFAFA" opacity="0.3"/>
+</svg>

package/dist/app-template/src/__tests__/application-config.test.ts

@@ -0,0 +1,14 @@
+import {
+  APP_DESCRIPTION,
+  APP_DISPLAY_NAME,
+  APPLICATION_UNIVERSAL_IDENTIFIER,
+} from 'src/constants/universal-identifiers';
+import { describe, expect, it } from 'vitest';
+
+describe('application identifiers', () => {
+  it('should expose the application metadata constants', () => {
+    expect(APP_DISPLAY_NAME).toBeTruthy();
+    expect(typeof APP_DESCRIPTION).toBe('string');
+    expect(APPLICATION_UNIVERSAL_IDENTIFIER).toBeTruthy();
+  });
+});

package/dist/app-template/src/__tests__/global-setup.ts

@@ -0,0 +1,56 @@
+import { runTwenty } from './run-twenty';
+
+function validateEnv(): { apiUrl: string; apiKey: string } {
+  const apiUrl = process.env.TWENTY_API_URL;
+  const apiKey = process.env.TWENTY_API_KEY;
+
+  if (!apiUrl || !apiKey) {
+    throw new Error(
+      'TWENTY_API_URL and TWENTY_API_KEY must be set.\n' +
+        'Start a local server: yarn twenty docker:start\n' +
+        'Or set them in vitest env config.',
+    );
+  }
+
+  return { apiUrl, apiKey };
+}
+
+async function checkServer(apiUrl: string) {
+  let response: Response;
+
+  try {
+    response = await fetch(`${apiUrl}/healthz`);
+  } catch {
+    throw new Error(
+      `Twenty server is not reachable at ${apiUrl}. ` +
+        'Make sure the server is running before executing integration tests.',
+    );
+  }
+
+  if (!response.ok) {
+    throw new Error(`Server at ${apiUrl} returned ${response.status}`);
+  }
+}
+
+export async function setup() {
+  const { apiUrl } = validateEnv();
+
+  await checkServer(apiUrl);
+  await runTwenty(['app', 'uninstall', '--yes']);
+
+  const result = await runTwenty(['app', 'apply', '--create']);
+
+  if (!result.ok) {
+    throw new Error(
+      `App apply failed: ${result.error.code} ${result.error.message}`,
+    );
+  }
+}
+
+export async function teardown() {
+  const result = await runTwenty(['app', 'uninstall', '--yes']);
+
+  if (!result.ok) {
+    console.warn(`App uninstall failed: ${result.error.message}`);
+  }
+}

package/dist/app-template/src/__tests__/run-twenty.ts

@@ -0,0 +1,66 @@
+import { spawn } from 'child_process';
+import { delimiter, join } from 'path';
+
+type TwentyCliError = {
+  code: string;
+  message: string;
+  hint?: string;
+};
+
+export type TwentyCliResult =
+  | { ok: true; data: unknown }
+  | { ok: false; error: TwentyCliError };
+
+function withoutProjectBinaries(pathValue: string) {
+  return pathValue
+    .split(delimiter)
+    .filter(
+      (entry) =>
+        entry !== process.env.BERRY_BIN_FOLDER &&
+        !entry.endsWith(join('node_modules', '.bin')),
+    )
+    .join(delimiter);
+}
+
+export function runTwenty(args: string[]): Promise<TwentyCliResult> {
+  const executable = process.env.TWENTY_CLI ?? 'twenty';
+
+  return new Promise((resolve, reject) => {
+    const child = spawn(executable, [...args, '--json'], {
+      env: {
+        ...process.env,
+        PATH: withoutProjectBinaries(process.env.PATH ?? ''),
+      },
+      stdio: ['ignore', 'pipe', 'inherit'],
+    });
+    let stdout = '';
+
+    child.stdout.setEncoding('utf8');
+    child.stdout.on('data', (chunk: string) => {
+      stdout += chunk;
+    });
+
+    child.on('error', (error: NodeJS.ErrnoException) => {
+      reject(
+        error.code === 'ENOENT'
+          ? new Error(
+              `${executable} was not found. Install the Twenty CLI globally, or set TWENTY_CLI to its path.`,
+            )
+          : error,
+      );
+    });
+
+    child.on('close', (exitCode) => {
+      try {
+        resolve(JSON.parse(stdout));
+      } catch {
+        reject(
+          new Error(
+            `${executable} ${args.join(' ')} exited with code ${exitCode} without a JSON result. ` +
+              'Check that it is the Twenty CLI (twenty --version), or set TWENTY_CLI to its path.',
+          ),
+        );
+      }
+    });
+  });
+}

package/dist/app-template/src/__tests__/schema.integration-test.ts

@@ -0,0 +1,46 @@
+import { CoreApiClient } from 'twenty-client-sdk/core';
+import { MetadataApiClient } from 'twenty-client-sdk/metadata';
+import { APPLICATION_UNIVERSAL_IDENTIFIER } from 'src/constants/universal-identifiers';
+import { describe, expect, it } from 'vitest';
+
+describe('App installation', () => {
+  it('should find the installed app in the applications list', async () => {
+    const client = new MetadataApiClient();
+
+    const result = await client.query({
+      findManyApplications: {
+        id: true,
+        name: true,
+        universalIdentifier: true,
+      },
+    });
+
+    const app = result.findManyApplications.find(
+      (a: { universalIdentifier: string }) =>
+        a.universalIdentifier === APPLICATION_UNIVERSAL_IDENTIFIER,
+    );
+
+    expect(app).toBeDefined();
+  });
+});
+
+describe('CoreApiClient', () => {
+  it('should support CRUD on standard objects', async () => {
+    const client = new CoreApiClient();
+
+    const created = await client.mutation({
+      createNote: {
+        __args: { data: { title: 'Integration test note' } },
+        id: true,
+      },
+    });
+    expect(created.createNote.id).toBeDefined();
+
+    await client.mutation({
+      destroyNote: {
+        __args: { id: created.createNote.id },
+        id: true,
+      },
+    });
+  });
+});

package/dist/app-template/src/application-config.ts

@@ -0,0 +1,13 @@
+import { defineApplication } from 'twenty-sdk/define';
+
+import {
+  APP_DESCRIPTION,
+  APP_DISPLAY_NAME,
+  APPLICATION_UNIVERSAL_IDENTIFIER,
+} from 'src/constants/universal-identifiers';
+
+export default defineApplication({
+  universalIdentifier: APPLICATION_UNIVERSAL_IDENTIFIER,
+  displayName: APP_DISPLAY_NAME,
+  description: APP_DESCRIPTION,
+});

package/dist/app-template/src/constants/universal-identifiers.ts

@@ -0,0 +1,12 @@
+export const APP_DISPLAY_NAME = 'DISPLAY-NAME-TO-BE-GENERATED';
+export const APP_DESCRIPTION = 'DESCRIPTION-TO-BE-GENERATED';
+export const APPLICATION_UNIVERSAL_IDENTIFIER = 'UUID-TO-BE-GENERATED';
+export const DEFAULT_ROLE_UNIVERSAL_IDENTIFIER = 'UUID-TO-BE-GENERATED';
+export const HEALTH_CHECK_UNIVERSAL_IDENTIFIER = 'UUID-TO-BE-GENERATED';
+export const MAIN_PAGE_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER =
+  'UUID-TO-BE-GENERATED';
+export const MAIN_PAGE_LAYOUT_UNIVERSAL_IDENTIFIER = 'UUID-TO-BE-GENERATED';
+export const MAIN_PAGE_LAYOUT_TAB_UNIVERSAL_IDENTIFIER = 'UUID-TO-BE-GENERATED';
+export const MAIN_PAGE_WIDGET_UNIVERSAL_IDENTIFIER = 'UUID-TO-BE-GENERATED';
+export const MAIN_PAGE_NAVIGATION_MENU_ITEM_UNIVERSAL_IDENTIFIER =
+  'UUID-TO-BE-GENERATED';

package/dist/app-template/src/default-role.ts

@@ -0,0 +1,16 @@
+import { defineApplicationRole } from 'twenty-sdk/define';
+
+import {
+  APP_DISPLAY_NAME,
+  DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
+} from 'src/constants/universal-identifiers';
+
+export default defineApplicationRole({
+  universalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
+  label: `${APP_DISPLAY_NAME} default function role`,
+  description: `${APP_DISPLAY_NAME} default function role`,
+  canReadAllObjectRecords: true,
+  canUpdateAllObjectRecords: true,
+  canSoftDeleteAllObjectRecords: true,
+  canDestroyAllObjectRecords: false,
+});

package/dist/app-template/src/front-components/main-page.tsx

@@ -0,0 +1,287 @@
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { useState } from 'react';
+import { Avatar } from 'twenty-ui/primitives/data-display';
+import {
+  IconBox,
+  IconHierarchy,
+  IconLayout,
+  IconSettingsAutomation,
+} from 'twenty-ui/icon';
+
+import {
+  APP_DISPLAY_NAME,
+  MAIN_PAGE_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
+} from 'src/constants/universal-identifiers';
+
+const DOCS_BASE_URL = 'https://docs.twenty.com/developers/extend/apps';
+
+const CATEGORIES = [
+  {
+    title: 'Data model',
+    color: '#73D08D',
+    items: [
+      { label: 'CUSTOM OBJECT', href: `${DOCS_BASE_URL}/data/objects` },
+      {
+        label: 'CUSTOM FIELDS',
+        href: `${DOCS_BASE_URL}/data/extending-objects`,
+      },
+    ],
+    rotation: '2.4deg',
+  },
+  {
+    title: 'Logic',
+    color: '#F4D345',
+    items: [
+      {
+        label: 'TOOLS',
+        href: `${DOCS_BASE_URL}/logic/logic-functions`,
+      },
+      {
+        label: 'LOGIC FUNCTION',
+        href: `${DOCS_BASE_URL}/logic/logic-functions`,
+      },
+      {
+        label: 'SKILLS',
+        href: `${DOCS_BASE_URL}/logic/skills-and-agents`,
+      },
+    ],
+    rotation: '0deg',
+  },
+  {
+    title: 'Layout',
+    color: '#C4A2E0',
+    items: [
+      { label: 'VIEWS', href: `${DOCS_BASE_URL}/layout/views` },
+      { label: 'WIDGETS', href: `${DOCS_BASE_URL}/layout/page-layouts` },
+      {
+        label: 'LAYOUT PAGES',
+        href: `${DOCS_BASE_URL}/layout/page-layouts`,
+      },
+      {
+        label: 'COMMANDS',
+        href: `${DOCS_BASE_URL}/layout/command-menu-items`,
+      },
+    ],
+    rotation: '-2.8deg',
+  },
+] as const;
+
+const ArrowUpRight = ({ color = '#999' }: { color?: string }) => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+    <path
+      d="M4.5 3.5H10.5V9.5M10.5 3.5L3.5 10.5"
+      stroke={color}
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const CategoryCard = ({
+  title,
+  color,
+  items,
+  rotation,
+}: {
+  title: string;
+  color: string;
+  items: ReadonlyArray<{ label: string; href: string }>;
+  rotation: string;
+}) => {
+  const [hoveredItem, setHoveredItem] = useState<string | null>(null);
+
+  const CategoryIcon = () => {
+    if (title === 'Data model') {
+      return <IconHierarchy color={color} size="20px" />;
+    }
+    if (title === 'Logic') {
+      return <IconSettingsAutomation color={color} size="20px" />;
+    }
+    if (title === 'Layout') {
+      return <IconLayout color={color} size="20px" />;
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        border: `1px solid ${color}80`,
+        borderRadius: '12px',
+        overflow: 'hidden',
+        width: '240px',
+        background: '#FFFFFF',
+        transform: `rotate(${rotation})`,
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)',
+      }}
+    >
+      <div
+        style={{
+          padding: '16px 20px',
+          background: `${color}22`,
+          display: 'flex',
+          alignItems: 'center',
+          gap: '12px',
+        }}
+      >
+        <CategoryIcon />
+        <span
+          style={{
+            fontSize: '16px',
+            fontWeight: 600,
+            color: color,
+          }}
+        >
+          {title}
+        </span>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          padding: '8px',
+          gap: '4px',
+        }}
+      >
+        {items.map((item) => {
+          const isHovered = hoveredItem === item.label;
+
+          return (
+            <a
+              key={item.label}
+              href={item.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              onMouseEnter={() => setHoveredItem(item.label)}
+              onMouseLeave={() => setHoveredItem(null)}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '10px',
+                textDecoration: 'none',
+                cursor: 'pointer',
+                padding: '10px 12px',
+                borderRadius: '8px',
+                background: isHovered ? '#0000000A' : 'transparent',
+                transition: 'background 0.15s',
+              }}
+            >
+              <IconBox color={color} size="20px" />
+              <span
+                style={{
+                  fontSize: '13px',
+                  fontWeight: 300,
+                  color: '#333',
+                  letterSpacing: '0.5px',
+                  flex: 1,
+                }}
+              >
+                {item.label}
+              </span>
+              {isHovered && <ArrowUpRight />}
+            </a>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+const MainPage = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        fontFamily:
+          'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        gap: '8px',
+        padding: '40px',
+      }}
+    >
+      <Avatar name={APP_DISPLAY_NAME} colorSeed={APP_DISPLAY_NAME} size="xl" />
+      <span
+        style={{
+          fontSize: '24px',
+          fontWeight: 600,
+          color: '#333',
+          marginTop: '8px',
+        }}
+      >
+        {APP_DISPLAY_NAME}
+      </span>
+      <span
+        style={{
+          fontSize: '13px',
+          color: '#888',
+          textAlign: 'center',
+          lineHeight: '1.5',
+        }}
+      >
+        Was installed successfully.
+        <br />
+        You can now add content to your app.
+      </span>
+      <a
+        href="/settings/applications#installed"
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '6px',
+          marginTop: '16px',
+          fontSize: '13px',
+          color: '#333',
+          textDecoration: 'none',
+          padding: '8px 16px',
+          borderRadius: '8px',
+          border: '1px solid #e0e0e0',
+          background: '#fafafa',
+          transition: 'background 0.15s, border-color 0.15s',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.background = '#f0f0f0';
+          e.currentTarget.style.borderColor = '#ccc';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.background = '#fafafa';
+          e.currentTarget.style.borderColor = '#e0e0e0';
+        }}
+      >
+        Open app settings
+        <ArrowUpRight color="#333" />
+      </a>
+      <div
+        style={{
+          display: 'flex',
+          gap: '16px',
+          marginTop: '32px',
+          flexWrap: 'wrap',
+          justifyContent: 'center',
+          alignItems: 'flex-start',
+        }}
+      >
+        {CATEGORIES.map((category) => (
+          <CategoryCard
+            key={category.title}
+            title={category.title}
+            color={category.color}
+            items={category.items}
+            rotation={category.rotation}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default defineFrontComponent({
+  universalIdentifier: MAIN_PAGE_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
+  name: APP_DISPLAY_NAME,
+  description: `${APP_DISPLAY_NAME} front component displaying the app logo and name`,
+  component: MainPage,
+});

package/dist/app-template/src/logic-functions/health-check.ts

@@ -0,0 +1,11 @@
+import { defineHealthCheck } from 'twenty-sdk/define';
+
+import { HEALTH_CHECK_UNIVERSAL_IDENTIFIER } from 'src/constants/universal-identifiers';
+
+export default defineHealthCheck({
+  universalIdentifier: HEALTH_CHECK_UNIVERSAL_IDENTIFIER,
+  name: 'health-check',
+  handler: async () => {
+    return { status: 'OK' };
+  },
+});

package/dist/app-template/src/navigation-menu-items/main-page.navigation-menu-item.ts

@@ -0,0 +1,19 @@
+import {
+  defineNavigationMenuItem,
+  NavigationMenuItemType,
+} from 'twenty-sdk/define';
+
+import {
+  APP_DISPLAY_NAME,
+  MAIN_PAGE_LAYOUT_UNIVERSAL_IDENTIFIER,
+  MAIN_PAGE_NAVIGATION_MENU_ITEM_UNIVERSAL_IDENTIFIER,
+} from 'src/constants/universal-identifiers';
+
+export default defineNavigationMenuItem({
+  universalIdentifier: MAIN_PAGE_NAVIGATION_MENU_ITEM_UNIVERSAL_IDENTIFIER,
+  name: APP_DISPLAY_NAME,
+  icon: 'IconFile',
+  position: -1,
+  type: NavigationMenuItemType.PAGE_LAYOUT,
+  pageLayoutUniversalIdentifier: MAIN_PAGE_LAYOUT_UNIVERSAL_IDENTIFIER,
+});