Redesign application content tab + logic function settings; add Layout detail pages (#20056)

## Summary

Iterative redesign of two related areas in settings, plus a new
`pages/settings/layout/` folder for read-only entity detail pages.

### Application content tab

- **Grouped into three sections** — Data / Layout / Logic — each with
one H2 + multiple `TableSection`-wrapped sub-tables (mirrors the
role-permissions pattern). Replaces six per-category table/row
components with one uniform `<SettingsApplicationContentSubtable>` +
`ApplicationContentRow` shape (net **−~700 lines** across the refactor).
- **All 10 row categories now clickable** for installed apps:
- Objects / Fields / Logic functions / Front components → existing
detail pages
  - Agents → existing `AiAgentDetail`
- Skills → existing `AiSkillDetail` (looked up by `Skill.applicationId +
name`)
- Roles → existing `RoleDetail` (looked up by
`Role.universalIdentifier`)
- Views / Page layouts / Navigation menu items → **new** detail pages
(see below)
- **Lifecycle hooks visible** — `pre-install` / `post-install` logic
functions are surfaced in the Trigger column instead of appearing as
empty/misconfigured.

### Logic function settings (Triggers + Test tabs)

- Triggers tab is now editable (HTTP / Cron / Database event / AI tool)
with a `<SettingsLogicFunctionTriggerSection>` wrapper that owns the
toggle, header, and read-only short-circuit.
- HTTP section gets a Live URL field with copy-to-clipboard.
- Each section shows a **Sample input** preview (the JSON the function
will receive) using the same payload builders the Test tab uses.
- Test tab: **Simulate trigger** buttons that prefill the JSON input
from the configured trigger's schema. Replaces an unclickable `<Select>`
(which auto-disables when there's only one option — the typical case).
- Read-only behavior for installed-app functions: explicit `<Callout>`
notice when there's no trigger; trigger sections render as disabled
controls when there is one.
- Removed the empty Environment Variables section from the Settings tab
(it just told the user to go elsewhere).

### New `pages/settings/layout/` folder

Three new app-scoped detail pages so users can drill into entities the
GraphQL `Application` type doesn't expose by id (keyed by manifest
`universalIdentifier`):

- `ApplicationViewDetail` — type, object, visibility + Fields / Filters
/ Sorts subsections (field UIDs resolved to readable labels via
`useFieldLabelByUid`)
- `ApplicationPageLayoutDetail` — type, object + per-tab subsections
listing widgets
- `ApplicationNavigationMenuItemDetail` — type, destination (resolved),
icon, color, position

Each page reads from the marketplace manifest the parent app page
already loads (no extra queries). Folder set up so a future "Layout"
settings tab can grow here (analogous to the existing `data-model/`
folder under the Data tab).

### Other consistency fixes

- Breadcrumbs on every app-scoped entity detail page now include a
category crumb so users know what they're looking at: `Workspace /
Applications / Timely / Navigation menu items / Time entry`.
- Title fallback for nav menu items uses the resolved destination
(`"Time entry"`) instead of the raw enum (`"OBJECT"`).
- New shared utils: `getNavigationMenuItemDestination`,
`resolveManifestObjectLabel`, `getLogicFunctionTriggerLabel`,
`<MonoText>`.

## Backend changes

Only one minor schema-shape change (additive): added `applicationId` to
the `SkillFields` GraphQL fragment and `universalIdentifier` to the
`RoleFragment` so the new lookups have what they need. Generated
metadata schema patched in-tree to match — regenerate with `nx run
twenty-front:graphql:generate --configuration=metadata` if it drifts.

## Test plan

- [ ] Application content tab on an installed app shows the 3 grouped
sections; rows in each section are clickable
- [ ] Click an Object → existing object detail page
- [ ] Click a Field → existing field-edit page
- [ ] Click an Agent / Skill / Role → existing detail page
- [ ] Click a View / Page layout / Navigation menu item → new read-only
detail page; subsections (Fields/Filters/Sorts for views, per-tab
widgets for page layouts) populate correctly
- [ ] Breadcrumbs on every entity detail page have 5 crumbs ending in
`<Category> / <Entity name>`
- [ ] Logic function Triggers tab: toggle each trigger type on/off, see
the Sample input preview update; for installed apps, sections render as
read-only
- [ ] Test tab: each "Simulate trigger" button prefills the JSON editor
with the matching payload shape
- [ ] Functions list: a function configured as `post-install` shows
"Post-install" in the Trigger column

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: claude[bot] <claude[bot]@users.noreply.github.com>

Author: 3 people

packages/twenty-front/jest.config.mjs

@@ -61,8 +61,8 @@ const jestConfig = {
   extensionsToTreatAsEsm: ['.ts', '.tsx'],
   coverageThreshold: {
     global: {
-      statements: 47.9,
-      lines: 46,
+      statements: 47.3,
+      lines: 45.9,
       functions: 39.5,
     },
   },

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

@@ -180,6 +180,28 @@ const SettingsApplicationDetails = lazy(() =>
   ),
 );
 
+const SettingsApplicationFrontComponentDetail = lazy(() =>
+  import(
+    '~/pages/settings/applications/SettingsApplicationFrontComponentDetail'
+  ).then((module) => ({
+    default: module.SettingsApplicationFrontComponentDetail,
+  })),
+);
+
+const SettingsLayoutViewDetail = lazy(() =>
+  import('~/pages/settings/layout/SettingsLayoutViewDetail').then((module) => ({
+    default: module.SettingsLayoutViewDetail,
+  })),
+);
+
+const SettingsLayoutPageLayoutDetail = lazy(() =>
+  import('~/pages/settings/layout/SettingsLayoutPageLayoutDetail').then(
+    (module) => ({
+      default: module.SettingsLayoutPageLayoutDetail,
+    }),
+  ),
+);
+
 const SettingsAdminApplicationRegistrationDetail = lazy(() =>
   import(
     '~/pages/settings/admin-panel/SettingsAdminApplicationRegistrationDetail'
@@ -752,6 +774,18 @@ export const SettingsRoutes = ({ isAdminPageEnabled }: SettingsRoutesProps) => (
           path={SettingsPath.ApplicationLogicFunctionDetail}
           element={<SettingsLogicFunctionDetail />}
         />
+        <Route
+          path={SettingsPath.ApplicationFrontComponentDetail}
+          element={<SettingsApplicationFrontComponentDetail />}
+        />
+        <Route
+          path={SettingsPath.ApplicationViewDetail}
+          element={<SettingsLayoutViewDetail />}
+        />
+        <Route
+          path={SettingsPath.ApplicationPageLayoutDetail}
+          element={<SettingsLayoutPageLayoutDetail />}
+        />
         <Route
           path={SettingsPath.ApplicationRegistrationConfigVariableDetails}
           element={<SettingsApplicationRegistrationConfigVariableDetail />}

packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx

@@ -39,6 +39,13 @@ export const APPLICATION_FRAGMENT = gql`
       name
       description
       applicationId
+      componentName
+      builtComponentChecksum
+      universalIdentifier
+      isHeadless
+      usesSdkClient
+      createdAt
+      updatedAt
     }
     objects {
       ...ObjectMetadataFields

packages/twenty-front/src/modules/applications/graphql/fragments/applicationFragment.ts

@@ -15,6 +15,7 @@ export const LOGIC_FUNCTION_FRAGMENT = gql`
     databaseEventTriggerSettings
     httpRouteTriggerSettings
     applicationId
+    universalIdentifier
     createdAt
     updatedAt
   }

packages/twenty-front/src/modules/logic-functions/graphql/fragments/logicFunctionFragment.ts

@@ -46,6 +46,9 @@ describe('useLogicFunctionUpdateFormState', () => {
         properties: {},
         type: 'object',
       },
+      cronTriggerSettings: null,
+      databaseEventTriggerSettings: null,
+      httpRouteTriggerSettings: null,
     });
   });
 });

packages/twenty-front/src/modules/logic-functions/hooks/__tests__/useLogicFunctionUpdateFormState.test.ts

@@ -1,6 +1,11 @@
 import { useGetOneLogicFunction } from '@/logic-functions/hooks/useGetOneLogicFunction';
 import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
+import {
+  type CronTriggerSettings,
+  type DatabaseEventTriggerSettings,
+  type HttpRouteTriggerSettings,
+} from 'twenty-shared/application';
 import { type LogicFunction } from '~/generated-metadata/graphql';
 import { useGetLogicFunctionSourceCode } from '@/logic-functions/hooks/useGetLogicFunctionSourceCode';
 import { DEFAULT_TOOL_INPUT_SCHEMA } from 'twenty-shared/logic-function';
@@ -12,6 +17,9 @@ export type LogicFunctionFormValues = {
   timeoutSeconds: number;
   sourceHandlerCode: string;
   toolInputSchema?: object;
+  cronTriggerSettings: CronTriggerSettings | null;
+  databaseEventTriggerSettings: DatabaseEventTriggerSettings | null;
+  httpRouteTriggerSettings: HttpRouteTriggerSettings | null;
 };
 
 type SetLogicFunctionFormValues = Dispatch<
@@ -35,6 +43,9 @@ export const useLogicFunctionUpdateFormState = ({
     sourceHandlerCode: '',
     timeoutSeconds: 300,
     toolInputSchema: DEFAULT_TOOL_INPUT_SCHEMA,
+    cronTriggerSettings: null,
+    databaseEventTriggerSettings: null,
+    httpRouteTriggerSettings: null,
   });
 
   const { sourceHandlerCode, loading: logicFunctionSourceCodeLoading } =
@@ -57,6 +68,11 @@ export const useLogicFunctionUpdateFormState = ({
         timeoutSeconds: logicFunction.timeoutSeconds ?? 300,
         toolInputSchema:
           logicFunction.toolInputSchema || DEFAULT_TOOL_INPUT_SCHEMA,
+        cronTriggerSettings: logicFunction.cronTriggerSettings ?? null,
+        databaseEventTriggerSettings:
+          logicFunction.databaseEventTriggerSettings ?? null,
+        httpRouteTriggerSettings:
+          logicFunction.httpRouteTriggerSettings ?? null,
       }));
     }
   }, [logicFunction]);

packages/twenty-front/src/modules/logic-functions/hooks/useLogicFunctionUpdateFormState.ts

@@ -0,0 +1,55 @@
+import { getLogicFunctionTriggerLabel } from '@/logic-functions/utils/getLogicFunctionTriggerLabel';
+
+describe('getLogicFunctionTriggerLabel', () => {
+  it('returns Post-install when the function matches the post-install identifier', () => {
+    expect(
+      getLogicFunctionTriggerLabel(
+        { universalIdentifier: 'uid-post' },
+        { postInstallUniversalIdentifier: 'uid-post' },
+      ),
+    ).toBe('Post-install');
+  });
+
+  it('returns Pre-install when the function matches the pre-install identifier', () => {
+    expect(
+      getLogicFunctionTriggerLabel(
+        { universalIdentifier: 'uid-pre' },
+        { preInstallUniversalIdentifier: 'uid-pre' },
+      ),
+    ).toBe('Pre-install');
+  });
+
+  it('does not match when both identifiers are undefined', () => {
+    expect(getLogicFunctionTriggerLabel({}, {})).toBe('');
+  });
+
+  it('returns AI tool when isTool is set', () => {
+    expect(getLogicFunctionTriggerLabel({ isTool: true })).toBe('AI tool');
+  });
+
+  it('returns Cron when cron settings are present', () => {
+    expect(getLogicFunctionTriggerLabel({ cronTriggerSettings: {} })).toBe(
+      'Cron',
+    );
+  });
+
+  it('returns HTTP when http settings are present', () => {
+    expect(getLogicFunctionTriggerLabel({ httpRouteTriggerSettings: {} })).toBe(
+      'HTTP',
+    );
+  });
+
+  it('returns the database event name when it exists', () => {
+    expect(
+      getLogicFunctionTriggerLabel({
+        databaseEventTriggerSettings: { eventName: 'person.created' },
+      }),
+    ).toBe('person.created');
+  });
+
+  it('falls back to a generic label when the database event name is missing', () => {
+    expect(
+      getLogicFunctionTriggerLabel({ databaseEventTriggerSettings: {} }),
+    ).toBe('Database event');
+  });
+});

packages/twenty-front/src/modules/logic-functions/utils/__tests__/getLogicFunctionTriggerLabel.test.ts

@@ -0,0 +1,38 @@
+import { t } from '@lingui/core/macro';
+import { isDefined } from 'twenty-shared/utils';
+
+type LogicFunctionLike = {
+  universalIdentifier?: string | null;
+  isTool?: boolean;
+  cronTriggerSettings?: unknown;
+  httpRouteTriggerSettings?: unknown;
+  databaseEventTriggerSettings?: { eventName?: string } | null;
+};
+
+export const getLogicFunctionTriggerLabel = (
+  lf: LogicFunctionLike,
+  options: {
+    postInstallUniversalIdentifier?: string;
+    preInstallUniversalIdentifier?: string;
+  } = {},
+): string => {
+  if (
+    isDefined(lf.universalIdentifier) &&
+    lf.universalIdentifier === options.postInstallUniversalIdentifier
+  ) {
+    return t`Post-install`;
+  }
+  if (
+    isDefined(lf.universalIdentifier) &&
+    lf.universalIdentifier === options.preInstallUniversalIdentifier
+  ) {
+    return t`Pre-install`;
+  }
+  if (lf.isTool) return t`AI tool`;
+  if (lf.cronTriggerSettings) return t`Cron`;
+  if (lf.httpRouteTriggerSettings) return t`HTTP`;
+  if (lf.databaseEventTriggerSettings) {
+    return lf.databaseEventTriggerSettings.eventName ?? t`Database event`;
+  }
+  return '';
+};

packages/twenty-front/src/modules/logic-functions/utils/getLogicFunctionTriggerLabel.ts

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`generateDepthRecordGqlFieldsFromObject should generate depth one record gql fields from object 1`] = `
 {