Merge branch 'main' into r--remove-standard-front-components

This reverts commit f32265ae44.

packages/twenty-front/src/modules/command-menu-item/engine-command/components/HeadlessConfirmationModalEngineCommandEffect.tsx

@@ -0,0 +1,97 @@
+import { type ReactNode, useContext, useEffect, useState } from 'react';
+
+import { COMMAND_MENU_CONFIRMATION_MODAL_RESULT_BROWSER_EVENT_NAME } from '@/command-menu-item/confirmation-modal/constants/CommandMenuItemConfirmationModalResultBrowserEventName';
+import { useCommandMenuConfirmationModal } from '@/command-menu-item/confirmation-modal/hooks/useCommandMenuConfirmationModal';
+import { type CommandMenuConfirmationModalResultBrowserEventDetail } from '@/command-menu-item/confirmation-modal/types/CommandMenuConfirmationModalResultBrowserEventDetail';
+import { EngineCommandIdContext } from '@/command-menu-item/engine-command/contexts/EngineCommandIdContext';
+import { useUnmountEngineCommand } from '@/command-menu-item/engine-command/hooks/useUnmountEngineCommand';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { isDefined } from 'twenty-shared/utils';
+import { type ButtonAccent } from 'twenty-ui/input';
+
+export type HeadlessConfirmationModalEngineCommandEffectProps = {
+  title: string;
+  subtitle: ReactNode;
+  confirmButtonText: string;
+  confirmButtonAccent?: ButtonAccent;
+  execute: () => void | Promise<unknown>;
+};
+
+export const HeadlessConfirmationModalEngineCommandEffect = ({
+  title,
+  subtitle,
+  confirmButtonText,
+  confirmButtonAccent = 'danger',
+  execute,
+}: HeadlessConfirmationModalEngineCommandEffectProps) => {
+  const [hasOpened, setHasOpened] = useState(false);
+  const engineCommandId = useContext(EngineCommandIdContext);
+  const unmountEngineCommand = useUnmountEngineCommand();
+  const { openConfirmationModal } = useCommandMenuConfirmationModal();
+  const { enqueueErrorSnackBar } = useSnackBar();
+
+  useEffect(() => {
+    if (hasOpened || !isDefined(engineCommandId)) {
+      return;
+    }
+
+    setHasOpened(true);
+
+    openConfirmationModal({
+      frontComponentId: engineCommandId,
+      title,
+      subtitle,
+      confirmButtonText,
+      confirmButtonAccent,
+    });
+  }, [
+    hasOpened,
+    engineCommandId,
+    openConfirmationModal,
+    title,
+    subtitle,
+    confirmButtonText,
+    confirmButtonAccent,
+  ]);
+
+  useEffect(() => {
+    if (!isDefined(engineCommandId)) {
+      return;
+    }
+
+    const handleConfirmationResult = async (event: Event) => {
+      const customEvent =
+        event as CustomEvent<CommandMenuConfirmationModalResultBrowserEventDetail>;
+
+      if (customEvent.detail.frontComponentId !== engineCommandId) {
+        return;
+      }
+
+      if (customEvent.detail.confirmationResult === 'confirm') {
+        try {
+          await execute();
+        } catch (error) {
+          if (error instanceof Error) {
+            enqueueErrorSnackBar({ message: error.message });
+          }
+        }
+      }
+
+      unmountEngineCommand(engineCommandId);
+    };
+
+    window.addEventListener(
+      COMMAND_MENU_CONFIRMATION_MODAL_RESULT_BROWSER_EVENT_NAME,
+      handleConfirmationResult,
+    );
+
+    return () => {
+      window.removeEventListener(
+        COMMAND_MENU_CONFIRMATION_MODAL_RESULT_BROWSER_EVENT_NAME,
+        handleConfirmationResult,
+      );
+    };
+  }, [engineCommandId, execute, unmountEngineCommand, enqueueErrorSnackBar]);
+
+  return null;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect.tsx

@@ -0,0 +1,57 @@
+import { EngineCommandIdContext } from '@/command-menu-item/engine-command/contexts/EngineCommandIdContext';
+import { useUnmountEngineCommand } from '@/command-menu-item/engine-command/hooks/useUnmountEngineCommand';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useContext, useEffect, useState } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+
+export type HeadlessEngineCommandWrapperEffectProps = {
+  execute: () => void | Promise<unknown>;
+};
+
+export const HeadlessEngineCommandWrapperEffect = ({
+  execute,
+}: HeadlessEngineCommandWrapperEffectProps) => {
+  const [hasExecuted, setHasExecuted] = useState(false);
+
+  const engineCommandId = useContext(EngineCommandIdContext);
+
+  const unmountEngineCommand = useUnmountEngineCommand();
+
+  const { enqueueErrorSnackBar } = useSnackBar();
+
+  useEffect(() => {
+    if (hasExecuted) {
+      return;
+    }
+
+    setHasExecuted(true);
+
+    const run = async () => {
+      try {
+        await execute();
+      } catch (error) {
+        if (error instanceof Error) {
+          enqueueErrorSnackBar({
+            message: error.message,
+          });
+        }
+      } finally {
+        if (!isDefined(engineCommandId)) {
+          return;
+        }
+
+        unmountEngineCommand(engineCommandId);
+      }
+    };
+
+    run();
+  }, [
+    execute,
+    hasExecuted,
+    engineCommandId,
+    unmountEngineCommand,
+    enqueueErrorSnackBar,
+  ]);
+
+  return null;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/components/HeadlessNavigateEngineCommand.tsx

@@ -0,0 +1,24 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { type PathParam, useNavigate } from 'react-router-dom';
+import { type AppPath } from 'twenty-shared/types';
+import { getAppPath } from 'twenty-shared/utils';
+
+export const HeadlessNavigateEngineCommand = <T extends AppPath>({
+  to,
+  params,
+  queryParams,
+}: {
+  to: T;
+  params?: { [key in PathParam<T>]: string | null };
+  queryParams?: Record<string, any>;
+}) => {
+  const navigate = useNavigate();
+  const path = getAppPath(to, params, queryParams);
+
+  // eslint-disable-next-line twenty/no-navigate-prefer-link
+  const onExecute = () => {
+    navigate(path);
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={onExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/components/HeadlessOpenSidePanelPageEngineCommand.tsx

@@ -0,0 +1,37 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
+import { sidePanelSearchState } from '@/side-panel/states/sidePanelSearchState';
+import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
+import { type MessageDescriptor } from '@lingui/core';
+import { t } from '@lingui/core/macro';
+import { type SidePanelPages } from 'twenty-shared/types';
+import { type IconComponent } from 'twenty-ui/display';
+
+export const HeadlessOpenSidePanelPageEngineCommand = ({
+  page,
+  pageTitle,
+  pageIcon,
+  shouldResetSearchState = false,
+}: {
+  page: SidePanelPages;
+  pageTitle: MessageDescriptor;
+  pageIcon: IconComponent;
+  shouldResetSearchState?: boolean;
+}) => {
+  const { navigateSidePanel } = useNavigateSidePanel();
+  const setSidePanelSearch = useSetAtomState(sidePanelSearchState);
+
+  const onExecute = () => {
+    navigateSidePanel({
+      page,
+      pageTitle: t(pageTitle),
+      pageIcon,
+    });
+
+    if (shouldResetSearchState) {
+      setSidePanelSearch('');
+    }
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={onExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/constants/EngineComponentKeyHeadlessComponentMap.tsx

@@ -0,0 +1,280 @@
+import { HeadlessNavigateEngineCommand } from '@/command-menu-item/engine-command/components/HeadlessNavigateEngineCommand';
+import { HeadlessOpenSidePanelPageEngineCommand } from '@/command-menu-item/engine-command/components/HeadlessOpenSidePanelPageEngineCommand';
+import { DeleteMultipleRecordsCommand } from '@/command-menu-item/engine-command/record/multiple-records/components/DeleteMultipleRecordsCommand';
+import { DestroyMultipleRecordsCommand } from '@/command-menu-item/engine-command/record/multiple-records/components/DestroyMultipleRecordsCommand';
+import { ExportMultipleRecordsCommand } from '@/command-menu-item/engine-command/record/multiple-records/components/ExportMultipleRecordsCommand';
+import { MergeMultipleRecordsCommand } from '@/command-menu-item/engine-command/record/multiple-records/components/MergeMultipleRecordsCommand';
+import { RestoreMultipleRecordsCommand } from '@/command-menu-item/engine-command/record/multiple-records/components/RestoreMultipleRecordsCommand';
+import { UpdateMultipleRecordsCommand } from '@/command-menu-item/engine-command/record/multiple-records/components/UpdateMultipleRecordsCommand';
+import { CreateNewIndexRecordNoSelectionRecordCommand } from '@/command-menu-item/engine-command/record/no-selection/components/CreateNewIndexRecordNoSelectionRecordCommand';
+import { CreateNewViewNoSelectionRecordCommand } from '@/command-menu-item/engine-command/record/no-selection/components/CreateNewViewNoSelectionRecordCommand';
+import { HideDeletedRecordsNoSelectionRecordCommand } from '@/command-menu-item/engine-command/record/no-selection/components/HideDeletedRecordsNoSelectionRecordCommand';
+import { ImportRecordsNoSelectionRecordCommand } from '@/command-menu-item/engine-command/record/no-selection/components/ImportRecordsNoSelectionRecordCommand';
+import { SeeDeletedRecordsNoSelectionRecordCommand } from '@/command-menu-item/engine-command/record/no-selection/components/SeeDeletedRecordsNoSelectionRecordCommand';
+import { AddToFavoritesSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/components/AddToFavoritesSingleRecordCommand';
+import { DeleteSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/components/DeleteSingleRecordCommand';
+import { DestroySingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/components/DestroySingleRecordCommand';
+import { ExportNoteSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/components/ExportNoteSingleRecordCommand';
+import { ExportSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/components/ExportSingleRecordCommand';
+import { NavigateToNextRecordSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/components/NavigateToNextRecordSingleRecordCommand';
+import { NavigateToPreviousRecordSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/components/NavigateToPreviousRecordSingleRecordCommand';
+import { RemoveFromFavoritesSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/components/RemoveFromFavoritesSingleRecordCommand';
+import { RestoreSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/components/RestoreSingleRecordCommand';
+import { CancelDashboardSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/dashboard/components/CancelDashboardSingleRecordCommand';
+import { DuplicateDashboardSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/dashboard/components/DuplicateDashboardSingleRecordCommand';
+import { EditDashboardSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/dashboard/components/EditDashboardSingleRecordCommand';
+import { SaveDashboardSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/dashboard/components/SaveDashboardSingleRecordCommand';
+import { CancelRecordPageLayoutSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/record-page-layout/components/CancelRecordPageLayoutSingleRecordCommand';
+import { EditRecordPageLayoutSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/record-page-layout/components/EditRecordPageLayoutSingleRecordCommand';
+import { SaveRecordPageLayoutSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/record-page-layout/components/SaveRecordPageLayoutSingleRecordCommand';
+import { SeeVersionWorkflowRunSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow-runs/components/SeeVersionWorkflowRunSingleRecordCommand';
+import { SeeWorkflowWorkflowRunSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow-runs/components/SeeWorkflowWorkflowRunSingleRecordCommand';
+import { StopWorkflowRunSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow-runs/components/StopWorkflowRunSingleRecordCommand';
+import { SeeRunsWorkflowVersionSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow-versions/components/SeeRunsWorkflowVersionSingleRecordCommand';
+import { SeeVersionsWorkflowVersionSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow-versions/components/SeeVersionsWorkflowVersionSingleRecordCommand';
+import { SeeWorkflowWorkflowVersionSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow-versions/components/SeeWorkflowWorkflowVersionSingleRecordCommand';
+import { UseAsDraftWorkflowVersionSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow-versions/components/UseAsDraftWorkflowVersionSingleRecordCommand';
+import { ActivateWorkflowSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow/components/ActivateWorkflowSingleRecordCommand';
+import { AddNodeWorkflowSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow/components/AddNodeWorkflowSingleRecordCommand';
+import { DeactivateWorkflowSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow/components/DeactivateWorkflowSingleRecordCommand';
+import { DiscardDraftWorkflowSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow/components/DiscardDraftWorkflowSingleRecordCommand';
+import { DuplicateWorkflowSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow/components/DuplicateWorkflowSingleRecordCommand';
+import { SeeActiveVersionWorkflowSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow/components/SeeActiveVersionWorkflowSingleRecordCommand';
+import { SeeRunsWorkflowSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow/components/SeeRunsWorkflowSingleRecordCommand';
+import { SeeVersionsWorkflowSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow/components/SeeVersionsWorkflowSingleRecordCommand';
+import { TestWorkflowSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow/components/TestWorkflowSingleRecordCommand';
+import { TidyUpWorkflowSingleRecordCommand } from '@/command-menu-item/engine-command/record/single-record/workflow/components/TidyUpWorkflowSingleRecordCommand';
+import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
+import { msg } from '@lingui/core/macro';
+import { AppPath, SettingsPath, SidePanelPages } from 'twenty-shared/types';
+import { IconHistory, IconSearch, IconSparkles } from 'twenty-ui/display';
+import { EngineComponentKey } from '~/generated-metadata/graphql';
+
+export const ENGINE_COMPONENT_KEY_HEADLESS_COMPONENT_MAP: Record<
+  EngineComponentKey,
+  React.ReactNode
+> = {
+  [EngineComponentKey.CREATE_NEW_RECORD]: (
+    <CreateNewIndexRecordNoSelectionRecordCommand />
+  ),
+  [EngineComponentKey.DELETE_SINGLE_RECORD]: (
+    <DeleteSingleRecordCommand />
+  ),
+  [EngineComponentKey.DELETE_MULTIPLE_RECORDS]: (
+    <DeleteMultipleRecordsCommand />
+  ),
+  [EngineComponentKey.RESTORE_SINGLE_RECORD]: (
+    <RestoreSingleRecordCommand />
+  ),
+  [EngineComponentKey.RESTORE_MULTIPLE_RECORDS]: (
+    <RestoreMultipleRecordsCommand />
+  ),
+  [EngineComponentKey.DESTROY_SINGLE_RECORD]: (
+    <DestroySingleRecordCommand />
+  ),
+  [EngineComponentKey.DESTROY_MULTIPLE_RECORDS]: (
+    <DestroyMultipleRecordsCommand />
+  ),
+  [EngineComponentKey.ADD_TO_FAVORITES]: (
+    <AddToFavoritesSingleRecordCommand />
+  ),
+  [EngineComponentKey.REMOVE_FROM_FAVORITES]: (
+    <RemoveFromFavoritesSingleRecordCommand />
+  ),
+  [EngineComponentKey.MERGE_MULTIPLE_RECORDS]: (
+    <MergeMultipleRecordsCommand />
+  ),
+  [EngineComponentKey.DUPLICATE_DASHBOARD]: (
+    <DuplicateDashboardSingleRecordCommand />
+  ),
+  [EngineComponentKey.DUPLICATE_WORKFLOW]: (
+    <DuplicateWorkflowSingleRecordCommand />
+  ),
+  [EngineComponentKey.ACTIVATE_WORKFLOW]: (
+    <ActivateWorkflowSingleRecordCommand />
+  ),
+  [EngineComponentKey.DEACTIVATE_WORKFLOW]: (
+    <DeactivateWorkflowSingleRecordCommand />
+  ),
+  [EngineComponentKey.DISCARD_DRAFT_WORKFLOW]: (
+    <DiscardDraftWorkflowSingleRecordCommand />
+  ),
+  [EngineComponentKey.TEST_WORKFLOW]: (
+    <TestWorkflowSingleRecordCommand />
+  ),
+  [EngineComponentKey.STOP_WORKFLOW_RUN]: (
+    <StopWorkflowRunSingleRecordCommand />
+  ),
+  [EngineComponentKey.USE_AS_DRAFT_WORKFLOW_VERSION]: (
+    <UseAsDraftWorkflowVersionSingleRecordCommand />
+  ),
+  [EngineComponentKey.SAVE_RECORD_PAGE_LAYOUT]: (
+    <SaveRecordPageLayoutSingleRecordCommand />
+  ),
+  [EngineComponentKey.SAVE_DASHBOARD_LAYOUT]: (
+    <SaveDashboardSingleRecordCommand />
+  ),
+  [EngineComponentKey.TIDY_UP_WORKFLOW]: (
+    <TidyUpWorkflowSingleRecordCommand />
+  ),
+  [EngineComponentKey.NAVIGATE_TO_NEXT_RECORD]: (
+    <NavigateToNextRecordSingleRecordCommand />
+  ),
+  [EngineComponentKey.NAVIGATE_TO_PREVIOUS_RECORD]: (
+    <NavigateToPreviousRecordSingleRecordCommand />
+  ),
+  [EngineComponentKey.EXPORT_NOTE_TO_PDF]: (
+    <ExportNoteSingleRecordCommand />
+  ),
+  [EngineComponentKey.EXPORT_FROM_RECORD_INDEX]: (
+    <ExportMultipleRecordsCommand />
+  ),
+  [EngineComponentKey.EXPORT_FROM_RECORD_SHOW]: (
+    <ExportSingleRecordCommand />
+  ),
+  [EngineComponentKey.EXPORT_MULTIPLE_RECORDS]: (
+    <ExportMultipleRecordsCommand />
+  ),
+  [EngineComponentKey.UPDATE_MULTIPLE_RECORDS]: (
+    <UpdateMultipleRecordsCommand />
+  ),
+  [EngineComponentKey.IMPORT_RECORDS]: (
+    <ImportRecordsNoSelectionRecordCommand />
+  ),
+  [EngineComponentKey.EXPORT_VIEW]: <ExportMultipleRecordsCommand />,
+  [EngineComponentKey.SEE_DELETED_RECORDS]: (
+    <SeeDeletedRecordsNoSelectionRecordCommand />
+  ),
+  [EngineComponentKey.CREATE_NEW_VIEW]: (
+    <CreateNewViewNoSelectionRecordCommand />
+  ),
+  [EngineComponentKey.HIDE_DELETED_RECORDS]: (
+    <HideDeletedRecordsNoSelectionRecordCommand />
+  ),
+  [EngineComponentKey.EDIT_RECORD_PAGE_LAYOUT]: (
+    <EditRecordPageLayoutSingleRecordCommand />
+  ),
+  [EngineComponentKey.CANCEL_RECORD_PAGE_LAYOUT]: (
+    <CancelRecordPageLayoutSingleRecordCommand />
+  ),
+  [EngineComponentKey.EDIT_DASHBOARD_LAYOUT]: (
+    <EditDashboardSingleRecordCommand />
+  ),
+  [EngineComponentKey.CANCEL_DASHBOARD_LAYOUT]: (
+    <CancelDashboardSingleRecordCommand />
+  ),
+  [EngineComponentKey.GO_TO_PEOPLE]: (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.RecordIndexPage}
+      params={{ objectNamePlural: CoreObjectNamePlural.Person }}
+    />
+  ),
+  [EngineComponentKey.GO_TO_COMPANIES]: (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.RecordIndexPage}
+      params={{ objectNamePlural: CoreObjectNamePlural.Company }}
+    />
+  ),
+  [EngineComponentKey.GO_TO_DASHBOARDS]: (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.RecordIndexPage}
+      params={{ objectNamePlural: CoreObjectNamePlural.Dashboard }}
+    />
+  ),
+  [EngineComponentKey.GO_TO_OPPORTUNITIES]: (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.RecordIndexPage}
+      params={{
+        objectNamePlural: CoreObjectNamePlural.Opportunity,
+      }}
+    />
+  ),
+  [EngineComponentKey.GO_TO_SETTINGS]: (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.SettingsCatchAll}
+      params={{
+        '*': SettingsPath.ProfilePage,
+      }}
+    />
+  ),
+  [EngineComponentKey.GO_TO_TASKS]: (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.RecordIndexPage}
+      params={{ objectNamePlural: CoreObjectNamePlural.Task }}
+    />
+  ),
+  [EngineComponentKey.GO_TO_NOTES]: (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.RecordIndexPage}
+      params={{ objectNamePlural: CoreObjectNamePlural.Note }}
+    />
+  ),
+  [EngineComponentKey.GO_TO_WORKFLOWS]: (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.RecordIndexPage}
+      params={{ objectNamePlural: CoreObjectNamePlural.Workflow }}
+    />
+  ),
+  [EngineComponentKey.GO_TO_RUNS]: (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.RecordIndexPage}
+      params={{ objectNamePlural: CoreObjectNamePlural.WorkflowRun }}
+    />
+  ),
+  [EngineComponentKey.SEARCH_RECORDS]: (
+    <HeadlessOpenSidePanelPageEngineCommand
+      page={SidePanelPages.SearchRecords}
+      pageTitle={msg`Search`}
+      pageIcon={IconSearch}
+      shouldResetSearchState={true}
+    />
+  ),
+  [EngineComponentKey.SEARCH_RECORDS_FALLBACK]: (
+    <HeadlessOpenSidePanelPageEngineCommand
+      page={SidePanelPages.SearchRecords}
+      pageTitle={msg`Search`}
+      pageIcon={IconSearch}
+    />
+  ),
+  [EngineComponentKey.ASK_AI]: (
+    <HeadlessOpenSidePanelPageEngineCommand
+      page={SidePanelPages.AskAI}
+      pageTitle={msg`Ask AI`}
+      pageIcon={IconSparkles}
+    />
+  ),
+  [EngineComponentKey.VIEW_PREVIOUS_AI_CHATS]: (
+    <HeadlessOpenSidePanelPageEngineCommand
+      page={SidePanelPages.ViewPreviousAIChats}
+      pageTitle={msg`View Previous AI Chats`}
+      pageIcon={IconHistory}
+    />
+  ),
+  [EngineComponentKey.SEE_ACTIVE_VERSION_WORKFLOW]: (
+    <SeeActiveVersionWorkflowSingleRecordCommand />
+  ),
+  [EngineComponentKey.SEE_RUNS_WORKFLOW]: (
+    <SeeRunsWorkflowSingleRecordCommand />
+  ),
+  [EngineComponentKey.SEE_VERSIONS_WORKFLOW]: (
+    <SeeVersionsWorkflowSingleRecordCommand />
+  ),
+  [EngineComponentKey.ADD_NODE_WORKFLOW]: (
+    <AddNodeWorkflowSingleRecordCommand />
+  ),
+  [EngineComponentKey.SEE_VERSION_WORKFLOW_RUN]: (
+    <SeeVersionWorkflowRunSingleRecordCommand />
+  ),
+  [EngineComponentKey.SEE_WORKFLOW_WORKFLOW_RUN]: (
+    <SeeWorkflowWorkflowRunSingleRecordCommand />
+  ),
+  [EngineComponentKey.SEE_RUNS_WORKFLOW_VERSION]: (
+    <SeeRunsWorkflowVersionSingleRecordCommand />
+  ),
+  [EngineComponentKey.SEE_WORKFLOW_WORKFLOW_VERSION]: (
+    <SeeWorkflowWorkflowVersionSingleRecordCommand />
+  ),
+  [EngineComponentKey.SEE_VERSIONS_WORKFLOW_VERSION]: (
+    <SeeVersionsWorkflowVersionSingleRecordCommand />
+  ),
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/contexts/EngineCommandIdContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const EngineCommandIdContext = createContext<string | null>(null);

packages/twenty-front/src/modules/command-menu-item/engine-command/hooks/useMountEngineCommand.ts

@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+
+import {
+  type MountedEngineCommandContext,
+  mountedEngineCommandsState,
+} from '@/command-menu-item/engine-command/states/mountedEngineCommandsState';
+import { useStore } from 'jotai';
+
+export const useMountEngineCommand = () => {
+  const store = useStore();
+
+  const mountEngineCommand = useCallback(
+    (engineCommandId: string, context: MountedEngineCommandContext) => {
+      store.set(mountedEngineCommandsState.atom, (previousMap) => {
+        const newMap = new Map(previousMap);
+
+        newMap.set(engineCommandId, context);
+
+        return newMap;
+      });
+    },
+    [store],
+  );
+
+  return mountEngineCommand;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/hooks/useUnmountEngineCommand.ts

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+
+import { mountedEngineCommandsState } from '@/command-menu-item/engine-command/states/mountedEngineCommandsState';
+import { useStore } from 'jotai';
+
+export const useUnmountEngineCommand = () => {
+  const store = useStore();
+
+  const unmountEngineCommand = useCallback(
+    (engineCommandId: string) => {
+      store.set(mountedEngineCommandsState.atom, (previousMap) => {
+        const newMap = new Map(previousMap);
+
+        newMap.delete(engineCommandId);
+
+        return newMap;
+      });
+    },
+    [store],
+  );
+
+  return unmountEngineCommand;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/multiple-records/components/DeleteMultipleRecordsCommand.tsx

@@ -0,0 +1,74 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { contextStoreAnyFieldFilterValueComponentState } from '@/context-store/states/contextStoreAnyFieldFilterValueComponentState';
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
+import { contextStoreFilterGroupsComponentState } from '@/context-store/states/contextStoreFilterGroupsComponentState';
+import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
+import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
+import { DEFAULT_QUERY_PAGE_SIZE } from '@/object-record/constants/DefaultQueryPageSize';
+import { useIncrementalDeleteManyRecords } from '@/object-record/hooks/useIncrementalDeleteManyRecords';
+import { useRemoveSelectedRecordsFromRecordBoard } from '@/object-record/record-board/hooks/useRemoveSelectedRecordsFromRecordBoard';
+import { useFilterValueDependencies } from '@/object-record/record-filter/hooks/useFilterValueDependencies';
+import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore';
+import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+
+export const DeleteMultipleRecordsCommand = () => {
+  const { recordIndexId, objectMetadataItem } =
+    useRecordIndexIdFromCurrentContextStore();
+
+  const contextStoreCurrentViewId = useAtomComponentStateValue(
+    contextStoreCurrentViewIdComponentState,
+  );
+
+  if (!contextStoreCurrentViewId) {
+    throw new Error('Current view ID is not defined');
+  }
+
+  const { resetTableRowSelection } = useResetTableRowSelection(recordIndexId);
+
+  const contextStoreTargetedRecordsRule = useAtomComponentStateValue(
+    contextStoreTargetedRecordsRuleComponentState,
+  );
+
+  const contextStoreFilters = useAtomComponentStateValue(
+    contextStoreFiltersComponentState,
+  );
+
+  const contextStoreFilterGroups = useAtomComponentStateValue(
+    contextStoreFilterGroupsComponentState,
+  );
+
+  const contextStoreAnyFieldFilterValue = useAtomComponentStateValue(
+    contextStoreAnyFieldFilterValueComponentState,
+  );
+
+  const { removeSelectedRecordsFromRecordBoard } =
+    useRemoveSelectedRecordsFromRecordBoard(recordIndexId);
+
+  const { filterValueDependencies } = useFilterValueDependencies();
+
+  const graphqlFilter = computeContextStoreFilters({
+    contextStoreTargetedRecordsRule,
+    contextStoreFilters,
+    contextStoreFilterGroups,
+    objectMetadataItem,
+    filterValueDependencies,
+    contextStoreAnyFieldFilterValue,
+  });
+
+  const { incrementalDeleteManyRecords } = useIncrementalDeleteManyRecords({
+    objectNameSingular: objectMetadataItem.nameSingular,
+    filter: graphqlFilter,
+    pageSize: DEFAULT_QUERY_PAGE_SIZE,
+    delayInMsBetweenMutations: 50,
+  });
+
+  const handleExecute = async () => {
+    removeSelectedRecordsFromRecordBoard();
+    resetTableRowSelection();
+    await incrementalDeleteManyRecords();
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/multiple-records/components/DestroyMultipleRecordsCommand.tsx

@@ -0,0 +1,90 @@
+import { HeadlessConfirmationModalEngineCommandEffect } from '@/command-menu-item/engine-command/components/HeadlessConfirmationModalEngineCommandEffect';
+import { contextStoreAnyFieldFilterValueComponentState } from '@/context-store/states/contextStoreAnyFieldFilterValueComponentState';
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
+import { contextStoreFilterGroupsComponentState } from '@/context-store/states/contextStoreFilterGroupsComponentState';
+import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
+import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
+import { DEFAULT_QUERY_PAGE_SIZE } from '@/object-record/constants/DefaultQueryPageSize';
+import { useIncrementalDestroyManyRecords } from '@/object-record/hooks/useIncrementalDestroyManyRecords';
+import { useRemoveSelectedRecordsFromRecordBoard } from '@/object-record/record-board/hooks/useRemoveSelectedRecordsFromRecordBoard';
+import { useFilterValueDependencies } from '@/object-record/record-filter/hooks/useFilterValueDependencies';
+import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore';
+import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { t } from '@lingui/core/macro';
+import { type RecordGqlOperationFilter } from 'twenty-shared/types';
+
+export const DestroyMultipleRecordsCommand = () => {
+  const { recordIndexId, objectMetadataItem } =
+    useRecordIndexIdFromCurrentContextStore();
+
+  const contextStoreCurrentViewId = useAtomComponentStateValue(
+    contextStoreCurrentViewIdComponentState,
+  );
+
+  if (!contextStoreCurrentViewId) {
+    throw new Error('Current view ID is not defined');
+  }
+
+  const { resetTableRowSelection } = useResetTableRowSelection(recordIndexId);
+  const { removeSelectedRecordsFromRecordBoard } =
+    useRemoveSelectedRecordsFromRecordBoard(recordIndexId);
+
+  const contextStoreTargetedRecordsRule = useAtomComponentStateValue(
+    contextStoreTargetedRecordsRuleComponentState,
+  );
+
+  const contextStoreFilters = useAtomComponentStateValue(
+    contextStoreFiltersComponentState,
+  );
+
+  const contextStoreFilterGroups = useAtomComponentStateValue(
+    contextStoreFilterGroupsComponentState,
+  );
+
+  const contextStoreAnyFieldFilterValue = useAtomComponentStateValue(
+    contextStoreAnyFieldFilterValueComponentState,
+  );
+
+  const { filterValueDependencies } = useFilterValueDependencies();
+
+  const deletedAtFilter: RecordGqlOperationFilter = {
+    deletedAt: { is: 'NOT_NULL' },
+  };
+  const graphqlFilter = {
+    ...computeContextStoreFilters({
+      contextStoreTargetedRecordsRule,
+      contextStoreFilters,
+      contextStoreFilterGroups,
+      objectMetadataItem,
+      filterValueDependencies,
+      contextStoreAnyFieldFilterValue,
+    }),
+    ...deletedAtFilter,
+  };
+
+  const { incrementalDestroyManyRecords } = useIncrementalDestroyManyRecords({
+    objectNameSingular: objectMetadataItem.nameSingular,
+    filter: graphqlFilter,
+    pageSize: DEFAULT_QUERY_PAGE_SIZE,
+    delayInMsBetweenMutations: 50,
+  });
+
+  const handleExecute = async () => {
+    removeSelectedRecordsFromRecordBoard();
+
+    resetTableRowSelection();
+
+    await incrementalDestroyManyRecords();
+  };
+
+  return (
+    <HeadlessConfirmationModalEngineCommandEffect
+      title={t`Permanently Destroy Records`}
+      subtitle={t`Are you sure you want to destroy these records? They won't be recoverable anymore.`}
+      confirmButtonText={t`Destroy Records`}
+      execute={handleExecute}
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/multiple-records/components/ExportMultipleRecordsCommand.tsx

@@ -0,0 +1,30 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
+import { useRecordIndexExportRecords } from '@/object-record/record-index/export/hooks/useRecordIndexExportRecords';
+import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/utils/getRecordIndexIdFromObjectNamePluralAndViewId';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+
+export const ExportMultipleRecordsCommand = () => {
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
+
+  const contextStoreCurrentViewId = useAtomComponentStateValue(
+    contextStoreCurrentViewIdComponentState,
+  );
+
+  if (!contextStoreCurrentViewId) {
+    throw new Error('Current view ID is not defined');
+  }
+
+  const { download } = useRecordIndexExportRecords({
+    delayMs: 100,
+    objectMetadataItem,
+    recordIndexId: getRecordIndexIdFromObjectNamePluralAndViewId(
+      objectMetadataItem.namePlural,
+      contextStoreCurrentViewId,
+    ),
+    filename: `${objectMetadataItem.nameSingular}.csv`,
+  });
+
+  return <HeadlessEngineCommandWrapperEffect execute={download} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/multiple-records/components/MergeMultipleRecordsCommand.tsx

@@ -0,0 +1,31 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIds } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIds';
+import { useOpenMergeRecordsPageInSidePanel } from '@/side-panel/hooks/useOpenMergeRecordsPageInSidePanel';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+
+export const MergeMultipleRecordsCommand = () => {
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
+
+  const contextStoreCurrentViewId = useAtomComponentStateValue(
+    contextStoreCurrentViewIdComponentState,
+  );
+
+  if (!contextStoreCurrentViewId) {
+    throw new Error('Current view ID is not defined');
+  }
+  const selectedRecordIds = useSelectedRecordIds();
+
+  const { openMergeRecordsPageInSidePanel } =
+    useOpenMergeRecordsPageInSidePanel({
+      objectNameSingular: objectMetadataItem.nameSingular,
+      objectRecordIds: selectedRecordIds,
+    });
+
+  const handleExecute = () => {
+    openMergeRecordsPageInSidePanel();
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/multiple-records/components/RestoreMultipleRecordsCommand.tsx

@@ -0,0 +1,101 @@
+import { HeadlessConfirmationModalEngineCommandEffect } from '@/command-menu-item/engine-command/components/HeadlessConfirmationModalEngineCommandEffect';
+import { contextStoreAnyFieldFilterValueComponentState } from '@/context-store/states/contextStoreAnyFieldFilterValueComponentState';
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
+import { contextStoreFilterGroupsComponentState } from '@/context-store/states/contextStoreFilterGroupsComponentState';
+import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
+import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
+import { DEFAULT_QUERY_PAGE_SIZE } from '@/object-record/constants/DefaultQueryPageSize';
+import { useLazyFetchAllRecords } from '@/object-record/hooks/useLazyFetchAllRecords';
+import { useRestoreManyRecords } from '@/object-record/hooks/useRestoreManyRecords';
+import { useRemoveSelectedRecordsFromRecordBoard } from '@/object-record/record-board/hooks/useRemoveSelectedRecordsFromRecordBoard';
+import { useFilterValueDependencies } from '@/object-record/record-filter/hooks/useFilterValueDependencies';
+import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore';
+import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { t } from '@lingui/core/macro';
+import { type RecordGqlOperationFilter } from 'twenty-shared/types';
+
+export const RestoreMultipleRecordsCommand = () => {
+  const { recordIndexId, objectMetadataItem } =
+    useRecordIndexIdFromCurrentContextStore();
+
+  const contextStoreCurrentViewId = useAtomComponentStateValue(
+    contextStoreCurrentViewIdComponentState,
+  );
+
+  if (!contextStoreCurrentViewId) {
+    throw new Error('Current view ID is not defined');
+  }
+
+  const { resetTableRowSelection } = useResetTableRowSelection(recordIndexId);
+  const { removeSelectedRecordsFromRecordBoard } =
+    useRemoveSelectedRecordsFromRecordBoard(recordIndexId);
+
+  const { restoreManyRecords } = useRestoreManyRecords({
+    objectNameSingular: objectMetadataItem.nameSingular,
+  });
+
+  const contextStoreTargetedRecordsRule = useAtomComponentStateValue(
+    contextStoreTargetedRecordsRuleComponentState,
+  );
+
+  const contextStoreFilters = useAtomComponentStateValue(
+    contextStoreFiltersComponentState,
+  );
+
+  const contextStoreFilterGroups = useAtomComponentStateValue(
+    contextStoreFilterGroupsComponentState,
+  );
+
+  const contextStoreAnyFieldFilterValue = useAtomComponentStateValue(
+    contextStoreAnyFieldFilterValueComponentState,
+  );
+
+  const { filterValueDependencies } = useFilterValueDependencies();
+
+  const deletedAtFilter: RecordGqlOperationFilter = {
+    deletedAt: { is: 'NOT_NULL' },
+  };
+
+  const graphqlFilter = {
+    ...computeContextStoreFilters({
+      contextStoreTargetedRecordsRule,
+      contextStoreFilters,
+      contextStoreFilterGroups,
+      objectMetadataItem,
+      filterValueDependencies,
+      contextStoreAnyFieldFilterValue,
+    }),
+    ...deletedAtFilter,
+  };
+
+  const { fetchAllRecords: fetchAllRecordIds } = useLazyFetchAllRecords({
+    objectNameSingular: objectMetadataItem.nameSingular,
+    filter: graphqlFilter,
+    limit: DEFAULT_QUERY_PAGE_SIZE,
+    recordGqlFields: { id: true },
+  });
+
+  const handleExecute = async () => {
+    removeSelectedRecordsFromRecordBoard();
+    const recordsToRestore = await fetchAllRecordIds();
+    const recordIdsToRestore = recordsToRestore.map((record) => record.id);
+
+    resetTableRowSelection();
+
+    await restoreManyRecords({
+      idsToRestore: recordIdsToRestore,
+    });
+  };
+
+  return (
+    <HeadlessConfirmationModalEngineCommandEffect
+      title={t`Restore Records`}
+      subtitle={t`Are you sure you want to restore these records?`}
+      confirmButtonText={t`Restore Records`}
+      confirmButtonAccent="default"
+      execute={handleExecute}
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/multiple-records/components/UpdateMultipleRecordsCommand.tsx

@@ -0,0 +1,21 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useOpenUpdateMultipleRecordsPageInSidePanel } from '@/side-panel/hooks/useOpenUpdateMultipleRecordsPageInSidePanel';
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+
+export const UpdateMultipleRecordsCommand = () => {
+  const contextStoreInstanceId = useAvailableComponentInstanceIdOrThrow(
+    ContextStoreComponentInstanceContext,
+  );
+
+  const { openUpdateMultipleRecordsPageInSidePanel } =
+    useOpenUpdateMultipleRecordsPageInSidePanel({
+      contextStoreInstanceId,
+    });
+
+  const handleExecute = () => {
+    openUpdateMultipleRecordsPageInSidePanel();
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/no-selection/components/CreateNewIndexRecordNoSelectionRecordCommand.tsx

@@ -0,0 +1,17 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { useCreateNewIndexRecord } from '@/object-record/record-table/hooks/useCreateNewIndexRecord';
+
+export const CreateNewIndexRecordNoSelectionRecordCommand = () => {
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
+
+  const { createNewIndexRecord } = useCreateNewIndexRecord({
+    objectMetadataItem,
+  });
+
+  return (
+    <HeadlessEngineCommandWrapperEffect
+      execute={() => createNewIndexRecord({ position: 'first' })}
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/no-selection/components/CreateNewViewNoSelectionRecordCommand.tsx

@@ -0,0 +1,45 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
+import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/utils/getRecordIndexIdFromObjectNamePluralAndViewId';
+import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
+import { VIEW_PICKER_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerDropdownId';
+import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
+import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState';
+
+export const CreateNewViewNoSelectionRecordCommand = () => {
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
+  const { openDropdown } = useOpenDropdown();
+
+  const contextStoreCurrentViewId = useAtomComponentStateValue(
+    contextStoreCurrentViewIdComponentState,
+  );
+
+  if (!contextStoreCurrentViewId) {
+    throw new Error('Current view ID is not defined');
+  }
+
+  const recordIndexId = getRecordIndexIdFromObjectNamePluralAndViewId(
+    objectMetadataItem.namePlural,
+    contextStoreCurrentViewId,
+  );
+
+  const setViewPickerReferenceViewId = useSetAtomComponentState(
+    viewPickerReferenceViewIdComponentState,
+    recordIndexId,
+  );
+
+  const { setViewPickerMode } = useViewPickerMode(recordIndexId);
+
+  const handleExecute = () => {
+    setViewPickerReferenceViewId(contextStoreCurrentViewId);
+    setViewPickerMode('create-empty');
+    openDropdown({
+      dropdownComponentInstanceIdFromProps: VIEW_PICKER_DROPDOWN_ID,
+    });
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/no-selection/components/HideDeletedRecordsNoSelectionRecordCommand.tsx

@@ -0,0 +1,56 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
+import { useCheckIsSoftDeleteFilter } from '@/object-record/record-filter/hooks/useCheckIsSoftDeleteFilter';
+import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
+import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
+import { useHandleToggleTrashColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleTrashColumnFilter';
+import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/utils/getRecordIndexIdFromObjectNamePluralAndViewId';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { isDefined } from 'twenty-shared/utils';
+
+export const HideDeletedRecordsNoSelectionRecordCommand = () => {
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
+
+  const contextStoreCurrentViewId = useAtomComponentStateValue(
+    contextStoreCurrentViewIdComponentState,
+  );
+
+  if (!isDefined(contextStoreCurrentViewId)) {
+    throw new Error('Current view ID is not defined');
+  }
+
+  const recordIndexId = getRecordIndexIdFromObjectNamePluralAndViewId(
+    objectMetadataItem.namePlural,
+    contextStoreCurrentViewId,
+  );
+
+  const { toggleSoftDeleteFilterState } = useHandleToggleTrashColumnFilter({
+    objectNameSingular: objectMetadataItem.nameSingular,
+    viewBarId: recordIndexId,
+  });
+
+  const { isRecordFilterAboutSoftDelete } = useCheckIsSoftDeleteFilter();
+
+  const currentRecordFilters = useAtomComponentStateValue(
+    currentRecordFiltersComponentState,
+    recordIndexId,
+  );
+
+  const deletedFilter = currentRecordFilters.find(
+    isRecordFilterAboutSoftDelete,
+  );
+
+  const { removeRecordFilter } = useRemoveRecordFilter();
+
+  const handleExecute = () => {
+    if (!isDefined(deletedFilter)) {
+      return;
+    }
+
+    removeRecordFilter({ recordFilterId: deletedFilter.id });
+    toggleSoftDeleteFilterState(false);
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/no-selection/components/ImportRecordsNoSelectionRecordCommand.tsx

@@ -0,0 +1,18 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { useOpenObjectRecordsSpreadsheetImportDialog } from '@/object-record/spreadsheet-import/hooks/useOpenObjectRecordsSpreadsheetImportDialog';
+
+export const ImportRecordsNoSelectionRecordCommand = () => {
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
+
+  const { openObjectRecordsSpreadsheetImportDialog } =
+    useOpenObjectRecordsSpreadsheetImportDialog(
+      objectMetadataItem.nameSingular,
+    );
+
+  return (
+    <HeadlessEngineCommandWrapperEffect
+      execute={openObjectRecordsSpreadsheetImportDialog}
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/no-selection/components/SeeDeletedRecordsNoSelectionRecordCommand.tsx

@@ -0,0 +1,39 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
+import { useHandleToggleTrashColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleTrashColumnFilter';
+import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/utils/getRecordIndexIdFromObjectNamePluralAndViewId';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { isDefined } from 'twenty-shared/utils';
+
+export const SeeDeletedRecordsNoSelectionRecordCommand = () => {
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
+
+  const contextStoreCurrentViewId = useAtomComponentStateValue(
+    contextStoreCurrentViewIdComponentState,
+  );
+
+  if (!isDefined(contextStoreCurrentViewId)) {
+    throw new Error('Current view ID is not defined');
+  }
+
+  const recordIndexId = getRecordIndexIdFromObjectNamePluralAndViewId(
+    objectMetadataItem.namePlural,
+    contextStoreCurrentViewId,
+  );
+
+  const { handleToggleTrashColumnFilter, toggleSoftDeleteFilterState } =
+    useHandleToggleTrashColumnFilter({
+      objectNameSingular: objectMetadataItem.nameSingular,
+      viewBarId: recordIndexId,
+    });
+
+  return (
+    <HeadlessEngineCommandWrapperEffect
+      execute={() => {
+        handleToggleTrashColumnFilter();
+        toggleSoftDeleteFilterState(true);
+      }}
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/components/AddToFavoritesSingleRecordCommand.tsx

@@ -0,0 +1,27 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { useCreateFavorite } from '@/favorites/hooks/useCreateFavorite';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
+import { isDefined } from 'twenty-shared/utils';
+
+export const AddToFavoritesSingleRecordCommand = () => {
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
+
+  const recordId = useSelectedRecordIdOrThrow();
+
+  const { createFavorite } = useCreateFavorite();
+
+  const recordStore = useAtomFamilyStateValue(recordStoreFamilyState, recordId);
+
+  const handleExecute = () => {
+    if (!isDefined(recordStore)) {
+      return;
+    }
+
+    createFavorite(recordStore, objectMetadataItem.nameSingular);
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/components/DeleteSingleRecordCommand.tsx

@@ -0,0 +1,63 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useDeleteFavorite } from '@/favorites/hooks/useDeleteFavorite';
+import { useFavorites } from '@/favorites/hooks/useFavorites';
+import { usePrefetchedNavigationMenuItemsData } from '@/navigation-menu-item/hooks/usePrefetchedNavigationMenuItemsData';
+import { useRemoveNavigationMenuItemByTargetRecordId } from '@/navigation-menu-item/hooks/useRemoveNavigationMenuItemByTargetRecordId';
+import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
+import { useRemoveSelectedRecordsFromRecordBoard } from '@/object-record/record-board/hooks/useRemoveSelectedRecordsFromRecordBoard';
+import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore';
+import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
+import { isDefined } from 'twenty-shared/utils';
+
+export const DeleteSingleRecordCommand = () => {
+  const { recordIndexId, objectMetadataItem } =
+    useRecordIndexIdFromCurrentContextStore();
+
+  const recordId = useSelectedRecordIdOrThrow();
+
+  const { resetTableRowSelection } = useResetTableRowSelection(recordIndexId);
+
+  const { removeSelectedRecordsFromRecordBoard } =
+    useRemoveSelectedRecordsFromRecordBoard(recordIndexId);
+
+  const { deleteOneRecord } = useDeleteOneRecord({
+    objectNameSingular: objectMetadataItem.nameSingular,
+  });
+
+  const { sortedFavorites: favorites } = useFavorites();
+  const { deleteFavorite } = useDeleteFavorite();
+
+  const { navigationMenuItems, workspaceNavigationMenuItems } =
+    usePrefetchedNavigationMenuItemsData();
+
+  const { removeNavigationMenuItemsByTargetRecordIds } =
+    useRemoveNavigationMenuItemByTargetRecordId();
+
+  const handleExecute = async () => {
+    removeSelectedRecordsFromRecordBoard();
+
+    resetTableRowSelection();
+
+    const foundFavorite = favorites?.find(
+      (favorite) => favorite.recordId === recordId,
+    );
+
+    if (isDefined(foundFavorite)) {
+      deleteFavorite(foundFavorite.id);
+    }
+
+    const foundNavigationMenuItem = [
+      ...navigationMenuItems,
+      ...workspaceNavigationMenuItems,
+    ].find((item) => item.targetRecordId === recordId);
+
+    if (isDefined(foundNavigationMenuItem)) {
+      removeNavigationMenuItemsByTargetRecordIds([recordId]);
+    }
+
+    await deleteOneRecord(recordId);
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/components/DestroySingleRecordCommand.tsx

@@ -0,0 +1,46 @@
+import { HeadlessConfirmationModalEngineCommandEffect } from '@/command-menu-item/engine-command/components/HeadlessConfirmationModalEngineCommandEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useDestroyOneRecord } from '@/object-record/hooks/useDestroyOneRecord';
+import { useRemoveSelectedRecordsFromRecordBoard } from '@/object-record/record-board/hooks/useRemoveSelectedRecordsFromRecordBoard';
+import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore';
+import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
+import { t } from '@lingui/core/macro';
+import { AppPath } from 'twenty-shared/types';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
+
+export const DestroySingleRecordCommand = () => {
+  const { recordIndexId, objectMetadataItem } =
+    useRecordIndexIdFromCurrentContextStore();
+
+  const recordId = useSelectedRecordIdOrThrow();
+
+  const navigateApp = useNavigateApp();
+
+  const { resetTableRowSelection } = useResetTableRowSelection(recordIndexId);
+
+  const { removeSelectedRecordsFromRecordBoard } =
+    useRemoveSelectedRecordsFromRecordBoard(recordIndexId);
+
+  const { destroyOneRecord } = useDestroyOneRecord({
+    objectNameSingular: objectMetadataItem.nameSingular,
+  });
+
+  const handleExecute = async () => {
+    removeSelectedRecordsFromRecordBoard();
+    resetTableRowSelection();
+
+    await destroyOneRecord(recordId);
+    navigateApp(AppPath.RecordIndexPage, {
+      objectNamePlural: objectMetadataItem.namePlural,
+    });
+  };
+
+  return (
+    <HeadlessConfirmationModalEngineCommandEffect
+      title={t`Permanently Destroy Record`}
+      subtitle={t`Are you sure you want to destroy this record? It cannot be recovered anymore.`}
+      confirmButtonText={t`Permanently Destroy Record`}
+      execute={handleExecute}
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/components/ExportNoteSingleRecordCommand.tsx

@@ -0,0 +1,43 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
+import { isDefined } from 'twenty-shared/utils';
+
+export const ExportNoteSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+
+  const recordStore = useAtomFamilyStateValue(recordStoreFamilyState, recordId);
+
+  const filename = `${(recordStore?.title || 'Untitled Note').replace(/[<>:"/\\|?*]/g, '-')}`;
+
+  const handleExecute = async () => {
+    if (!isDefined(recordStore)) {
+      return;
+    }
+
+    const initialBody = recordStore.bodyV2?.blocknote;
+
+    let parsedBody = [];
+
+    // TODO: Remove this once we have removed the old rich text
+    try {
+      parsedBody = JSON.parse(initialBody);
+    } catch {
+      // oxlint-disable-next-line no-console
+      console.warn(
+        `Failed to parse body for record ${recordId}, for rich text version 'v2'`,
+      );
+      // oxlint-disable-next-line no-console
+      console.warn(initialBody);
+    }
+
+    const { exportBlockNoteEditorToPdf } = await import(
+      '@/command-menu-item/record/single-record/utils/exportBlockNoteEditorToPdf'
+    );
+
+    await exportBlockNoteEditorToPdf(parsedBody, filename);
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/components/ExportSingleRecordCommand.tsx

@@ -0,0 +1,30 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
+import { useExportSingleRecord } from '@/object-record/record-show/hooks/useExportSingleRecord';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { isDefined } from 'twenty-shared/utils';
+
+export const ExportSingleRecordCommand = () => {
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
+
+  const contextStoreCurrentViewId = useAtomComponentStateValue(
+    contextStoreCurrentViewIdComponentState,
+  );
+
+  if (!isDefined(contextStoreCurrentViewId)) {
+    throw new Error('Current view ID is not defined');
+  }
+
+  const recordId = useSelectedRecordIdOrThrow();
+
+  const filename = `${objectMetadataItem.nameSingular}.csv`;
+  const { download } = useExportSingleRecord({
+    filename,
+    objectMetadataItem,
+    recordId,
+  });
+
+  return <HeadlessEngineCommandWrapperEffect execute={download} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/components/NavigateToNextRecordSingleRecordCommand.tsx

@@ -0,0 +1,17 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { useRecordShowPagePagination } from '@/object-record/record-show/hooks/useRecordShowPagePagination';
+
+export const NavigateToNextRecordSingleRecordCommand = () => {
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
+
+  const recordId = useSelectedRecordIdOrThrow();
+
+  const { navigateToNextRecord } = useRecordShowPagePagination(
+    objectMetadataItem.nameSingular,
+    recordId,
+  );
+
+  return <HeadlessEngineCommandWrapperEffect execute={navigateToNextRecord} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/components/NavigateToPreviousRecordSingleRecordCommand.tsx

@@ -0,0 +1,17 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { useRecordShowPagePagination } from '@/object-record/record-show/hooks/useRecordShowPagePagination';
+
+export const NavigateToPreviousRecordSingleRecordCommand = () => {
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
+
+  const recordId = useSelectedRecordIdOrThrow();
+
+  const { navigateToPreviousRecord } = useRecordShowPagePagination(
+    objectMetadataItem.nameSingular,
+    recordId,
+  );
+
+  return <HeadlessEngineCommandWrapperEffect execute={navigateToPreviousRecord} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/components/RemoveFromFavoritesSingleRecordCommand.tsx

@@ -0,0 +1,44 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { useDeleteFavorite } from '@/favorites/hooks/useDeleteFavorite';
+import { useFavorites } from '@/favorites/hooks/useFavorites';
+import { useDeleteNavigationMenuItem } from '@/navigation-menu-item/hooks/useDeleteNavigationMenuItem';
+import { usePrefetchedNavigationMenuItemsData } from '@/navigation-menu-item/hooks/usePrefetchedNavigationMenuItemsData';
+import { isDefined } from 'twenty-shared/utils';
+
+export const RemoveFromFavoritesSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
+
+  const { sortedFavorites: favorites } = useFavorites();
+  const { navigationMenuItems, workspaceNavigationMenuItems } =
+    usePrefetchedNavigationMenuItemsData();
+
+  const { deleteFavorite } = useDeleteFavorite();
+  const { deleteNavigationMenuItem } = useDeleteNavigationMenuItem();
+
+  const foundFavorite = favorites?.find(
+    (favorite) => favorite.recordId === recordId,
+  );
+
+  const foundNavigationMenuItem = [
+    ...navigationMenuItems,
+    ...workspaceNavigationMenuItems,
+  ].find(
+    (item) =>
+      item.targetRecordId === recordId &&
+      item.targetObjectMetadataId === objectMetadataItem.id,
+  );
+
+  const handleExecute = () => {
+    if (!isDefined(foundNavigationMenuItem) || !isDefined(foundFavorite)) {
+      return;
+    }
+
+    deleteNavigationMenuItem(foundNavigationMenuItem.id);
+    deleteFavorite(foundFavorite.id);
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/components/RestoreSingleRecordCommand.tsx

@@ -0,0 +1,41 @@
+import { HeadlessConfirmationModalEngineCommandEffect } from '@/command-menu-item/engine-command/components/HeadlessConfirmationModalEngineCommandEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useRestoreManyRecords } from '@/object-record/hooks/useRestoreManyRecords';
+import { useRemoveSelectedRecordsFromRecordBoard } from '@/object-record/record-board/hooks/useRemoveSelectedRecordsFromRecordBoard';
+import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore';
+import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
+import { t } from '@lingui/core/macro';
+
+export const RestoreSingleRecordCommand = () => {
+  const { recordIndexId, objectMetadataItem } =
+    useRecordIndexIdFromCurrentContextStore();
+
+  const recordId = useSelectedRecordIdOrThrow();
+
+  const { resetTableRowSelection } = useResetTableRowSelection(recordIndexId);
+  const { removeSelectedRecordsFromRecordBoard } =
+    useRemoveSelectedRecordsFromRecordBoard(recordIndexId);
+
+  const { restoreManyRecords } = useRestoreManyRecords({
+    objectNameSingular: objectMetadataItem.nameSingular,
+  });
+
+  const handleExecute = async () => {
+    removeSelectedRecordsFromRecordBoard();
+    resetTableRowSelection();
+
+    await restoreManyRecords({
+      idsToRestore: [recordId],
+    });
+  };
+
+  return (
+    <HeadlessConfirmationModalEngineCommandEffect
+      title={t`Restore Record`}
+      subtitle={t`Are you sure you want to restore this record?`}
+      confirmButtonText={t`Restore Record`}
+      confirmButtonAccent="default"
+      execute={handleExecute}
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/dashboard/components/CancelDashboardSingleRecordCommand.tsx

@@ -0,0 +1,32 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useResetDraftPageLayoutToPersistedPageLayout } from '@/page-layout/hooks/useResetDraftPageLayoutToPersistedPageLayout';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
+
+export const CancelDashboardSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+
+  const recordStore = useAtomFamilyStateValue(recordStoreFamilyState, recordId);
+
+  const pageLayoutId = recordStore?.pageLayoutId;
+
+  const { closeSidePanelMenu } = useSidePanelMenu();
+
+  const { setIsPageLayoutInEditMode } =
+    useSetIsPageLayoutInEditMode(pageLayoutId);
+
+  const { resetDraftPageLayoutToPersistedPageLayout } =
+    useResetDraftPageLayoutToPersistedPageLayout(pageLayoutId);
+
+  const handleExecute = () => {
+    closeSidePanelMenu();
+
+    resetDraftPageLayoutToPersistedPageLayout();
+    setIsPageLayoutInEditMode(false);
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/dashboard/components/DuplicateDashboardSingleRecordCommand.tsx

@@ -0,0 +1,38 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useDuplicateDashboard } from '@/dashboards/hooks/useDuplicateDashboard';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useLingui } from '@lingui/react/macro';
+import { isNonEmptyString } from '@sniptt/guards';
+import { AppPath, CoreObjectNameSingular } from 'twenty-shared/types';
+import { isDefined } from 'twenty-shared/utils';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
+
+export const DuplicateDashboardSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+  const { duplicateDashboard } = useDuplicateDashboard();
+  const navigate = useNavigateApp();
+  const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
+  const { t } = useLingui();
+
+  const handleExecute = async () => {
+    const result = await duplicateDashboard(recordId);
+
+    if (isDefined(result) && isNonEmptyString(result.id)) {
+      enqueueSuccessSnackBar({
+        message: t`Dashboard duplicated successfully`,
+      });
+
+      navigate(AppPath.RecordShowPage, {
+        objectNameSingular: CoreObjectNameSingular.Dashboard,
+        objectRecordId: result.id,
+      });
+    } else {
+      enqueueErrorSnackBar({
+        message: t`Failed to duplicate dashboard`,
+      });
+    }
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/dashboard/components/EditDashboardSingleRecordCommand.tsx

@@ -0,0 +1,26 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
+import { useResetLocationHash } from 'twenty-ui/utilities';
+
+export const EditDashboardSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+
+  const recordStore = useAtomFamilyStateValue(recordStoreFamilyState, recordId);
+
+  const pageLayoutId = recordStore?.pageLayoutId;
+
+  const { setIsPageLayoutInEditMode } =
+    useSetIsPageLayoutInEditMode(pageLayoutId);
+
+  const { resetLocationHash } = useResetLocationHash();
+
+  const handleExecute = () => {
+    setIsPageLayoutInEditMode(true);
+    resetLocationHash();
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/dashboard/components/SaveDashboardSingleRecordCommand.tsx

@@ -0,0 +1,33 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useSavePageLayout } from '@/page-layout/hooks/useSavePageLayout';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
+
+export const SaveDashboardSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+
+  const recordStore = useAtomFamilyStateValue(recordStoreFamilyState, recordId);
+
+  const pageLayoutId = recordStore?.pageLayoutId;
+
+  const { savePageLayout } = useSavePageLayout(pageLayoutId);
+
+  const { setIsPageLayoutInEditMode } =
+    useSetIsPageLayoutInEditMode(pageLayoutId);
+
+  const { closeSidePanelMenu } = useSidePanelMenu();
+
+  const handleExecute = async () => {
+    const result = await savePageLayout();
+
+    if (result.status === 'successful') {
+      closeSidePanelMenu();
+      setIsPageLayoutInEditMode(false);
+    }
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/record-page-layout/components/CancelRecordPageLayoutSingleRecordCommand.tsx

@@ -0,0 +1,31 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { useRecordPageLayoutIdFromRecordStoreOrThrow } from '@/page-layout/hooks/useRecordPageLayoutIdFromRecordStoreOrThrow';
+import { useResetDraftPageLayoutToPersistedPageLayout } from '@/page-layout/hooks/useResetDraftPageLayoutToPersistedPageLayout';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+
+export const CancelRecordPageLayoutSingleRecordCommand = () => {
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
+
+  const { pageLayoutId } = useRecordPageLayoutIdFromRecordStoreOrThrow({
+    targetObjectNameSingular: objectMetadataItem.nameSingular,
+  });
+
+  const { closeSidePanelMenu } = useSidePanelMenu();
+
+  const { setIsPageLayoutInEditMode } =
+    useSetIsPageLayoutInEditMode(pageLayoutId);
+
+  const { resetDraftPageLayoutToPersistedPageLayout } =
+    useResetDraftPageLayoutToPersistedPageLayout(pageLayoutId);
+
+  const handleExecute = () => {
+    closeSidePanelMenu();
+
+    resetDraftPageLayoutToPersistedPageLayout();
+    setIsPageLayoutInEditMode(false);
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/record-page-layout/components/EditRecordPageLayoutSingleRecordCommand.tsx

@@ -0,0 +1,25 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { useRecordPageLayoutIdFromRecordStoreOrThrow } from '@/page-layout/hooks/useRecordPageLayoutIdFromRecordStoreOrThrow';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useResetLocationHash } from 'twenty-ui/utilities';
+
+export const EditRecordPageLayoutSingleRecordCommand = () => {
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
+
+  const { pageLayoutId } = useRecordPageLayoutIdFromRecordStoreOrThrow({
+    targetObjectNameSingular: objectMetadataItem.nameSingular,
+  });
+
+  const { setIsPageLayoutInEditMode } =
+    useSetIsPageLayoutInEditMode(pageLayoutId);
+
+  const { resetLocationHash } = useResetLocationHash();
+
+  const handleExecute = () => {
+    setIsPageLayoutInEditMode(true);
+    resetLocationHash();
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/record-page-layout/components/SaveRecordPageLayoutSingleRecordCommand.tsx

@@ -0,0 +1,39 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { useRecordPageLayoutIdFromRecordStoreOrThrow } from '@/page-layout/hooks/useRecordPageLayoutIdFromRecordStoreOrThrow';
+import { useSaveFieldsWidgetGroups } from '@/page-layout/hooks/useSaveFieldsWidgetGroups';
+import { useSavePageLayout } from '@/page-layout/hooks/useSavePageLayout';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+
+export const SaveRecordPageLayoutSingleRecordCommand = () => {
+  const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
+
+  const { pageLayoutId } = useRecordPageLayoutIdFromRecordStoreOrThrow({
+    targetObjectNameSingular: objectMetadataItem.nameSingular,
+  });
+
+  const { savePageLayout } = useSavePageLayout(pageLayoutId);
+
+  const { saveFieldsWidgetGroups } = useSaveFieldsWidgetGroups({
+    pageLayoutId,
+  });
+
+  const { setIsPageLayoutInEditMode } =
+    useSetIsPageLayoutInEditMode(pageLayoutId);
+
+  const { closeSidePanelMenu } = useSidePanelMenu();
+
+  const handleExecute = async () => {
+    const result = await savePageLayout();
+
+    if (result.status === 'successful') {
+      await saveFieldsWidgetGroups();
+
+      closeSidePanelMenu();
+      setIsPageLayoutInEditMode(false);
+    }
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow-runs/components/SeeVersionWorkflowRunSingleRecordCommand.tsx

@@ -0,0 +1,25 @@
+import { HeadlessNavigateEngineCommand } from '@/command-menu-item/engine-command/components/HeadlessNavigateEngineCommand';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { CoreObjectNameSingular, AppPath } from 'twenty-shared/types';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
+import { isDefined } from 'twenty-shared/utils';
+
+export const SeeVersionWorkflowRunSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+  const recordStore = useAtomFamilyStateValue(recordStoreFamilyState, recordId);
+
+  if (!isDefined(recordStore) || !isDefined(recordStore?.workflowVersion?.id)) {
+    return null;
+  }
+
+  return (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.RecordShowPage}
+      params={{
+        objectNameSingular: CoreObjectNameSingular.WorkflowVersion,
+        objectRecordId: recordStore.workflowVersion.id,
+      }}
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow-runs/components/SeeWorkflowWorkflowRunSingleRecordCommand.tsx

@@ -0,0 +1,25 @@
+import { HeadlessNavigateEngineCommand } from '@/command-menu-item/engine-command/components/HeadlessNavigateEngineCommand';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { CoreObjectNameSingular, AppPath } from 'twenty-shared/types';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
+import { isDefined } from 'twenty-shared/utils';
+
+export const SeeWorkflowWorkflowRunSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+  const recordStore = useAtomFamilyStateValue(recordStoreFamilyState, recordId);
+
+  if (!isDefined(recordStore) || !isDefined(recordStore?.workflow?.id)) {
+    return null;
+  }
+
+  return (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.RecordShowPage}
+      params={{
+        objectNameSingular: CoreObjectNameSingular.Workflow,
+        objectRecordId: recordStore.workflow.id,
+      }}
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow-runs/components/StopWorkflowRunSingleRecordCommand.tsx

@@ -0,0 +1,69 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { contextStoreAnyFieldFilterValueComponentState } from '@/context-store/states/contextStoreAnyFieldFilterValueComponentState';
+import { contextStoreFilterGroupsComponentState } from '@/context-store/states/contextStoreFilterGroupsComponentState';
+import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
+import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
+import { CoreObjectNameSingular } from 'twenty-shared/types';
+import { DEFAULT_QUERY_PAGE_SIZE } from '@/object-record/constants/DefaultQueryPageSize';
+import { useLazyFetchAllRecords } from '@/object-record/hooks/useLazyFetchAllRecords';
+import { useFilterValueDependencies } from '@/object-record/record-filter/hooks/useFilterValueDependencies';
+import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { useStopWorkflowRun } from '@/workflow/hooks/useStopWorkflowRun';
+
+export const StopWorkflowRunSingleRecordCommand = () => {
+  const { objectMetadataItem } = useRecordIndexIdFromCurrentContextStore();
+
+  const contextStoreTargetedRecordsRule = useAtomComponentStateValue(
+    contextStoreTargetedRecordsRuleComponentState,
+  );
+
+  const contextStoreFilters = useAtomComponentStateValue(
+    contextStoreFiltersComponentState,
+  );
+
+  const contextStoreFilterGroups = useAtomComponentStateValue(
+    contextStoreFilterGroupsComponentState,
+  );
+
+  const contextStoreAnyFieldFilterValue = useAtomComponentStateValue(
+    contextStoreAnyFieldFilterValueComponentState,
+  );
+
+  const { filterValueDependencies } = useFilterValueDependencies();
+
+  const graphqlFilter = computeContextStoreFilters({
+    contextStoreTargetedRecordsRule,
+    contextStoreFilters,
+    contextStoreFilterGroups,
+    objectMetadataItem,
+    filterValueDependencies,
+    contextStoreAnyFieldFilterValue,
+  });
+
+  const { fetchAllRecords: fetchAllRecordIds } = useLazyFetchAllRecords({
+    objectNameSingular: CoreObjectNameSingular.WorkflowRun,
+    filter: graphqlFilter,
+    limit: DEFAULT_QUERY_PAGE_SIZE,
+    recordGqlFields: { id: true },
+  });
+
+  const { stopWorkflowRun } = useStopWorkflowRun();
+
+  const handleExecute = async () => {
+    if (contextStoreTargetedRecordsRule.mode === 'selection') {
+      for (const selectedRecordId of contextStoreTargetedRecordsRule.selectedRecordIds) {
+        await stopWorkflowRun(selectedRecordId);
+      }
+    } else {
+      const records = await fetchAllRecordIds();
+
+      for (const record of records) {
+        await stopWorkflowRun(record.id);
+      }
+    }
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow-versions/components/SeeRunsWorkflowVersionSingleRecordCommand.tsx

@@ -0,0 +1,57 @@
+import { HeadlessNavigateEngineCommand } from '@/command-menu-item/engine-command/components/HeadlessNavigateEngineCommand';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
+import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
+import { AppPath, ViewFilterOperand } from 'twenty-shared/types';
+import { isDefined } from 'twenty-shared/utils';
+
+const SeeRunsWorkflowVersionSingleRecordCommandContent = ({
+  workflowId,
+  recordId,
+}: {
+  workflowId: string;
+  recordId: string;
+}) => {
+  const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(workflowId);
+
+  return (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.RecordIndexPage}
+      params={{ objectNamePlural: CoreObjectNamePlural.WorkflowRun }}
+      queryParams={{
+        filter: {
+          workflow: {
+            [ViewFilterOperand.IS]: {
+              selectedRecordIds: [workflowWithCurrentVersion?.id],
+            },
+          },
+          recordStore: {
+            [ViewFilterOperand.IS]: {
+              selectedRecordIds: [recordId],
+            },
+          },
+        },
+      }}
+    />
+  );
+};
+
+export const SeeRunsWorkflowVersionSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+  const recordStore = useAtomFamilyStateValue(recordStoreFamilyState, recordId);
+
+  const workflowId = recordStore?.workflow?.id;
+
+  if (!isDefined(workflowId)) {
+    return null;
+  }
+
+  return (
+    <SeeRunsWorkflowVersionSingleRecordCommandContent
+      workflowId={workflowId}
+      recordId={recordId}
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow-versions/components/SeeVersionsWorkflowVersionSingleRecordCommand.tsx

@@ -0,0 +1,47 @@
+import { HeadlessNavigateEngineCommand } from '@/command-menu-item/engine-command/components/HeadlessNavigateEngineCommand';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
+import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
+import { AppPath, ViewFilterOperand } from 'twenty-shared/types';
+import { isDefined } from 'twenty-shared/utils';
+
+const SeeVersionsWorkflowVersionSingleRecordCommandContent = ({
+  workflowId,
+}: {
+  workflowId: string;
+}) => {
+  const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(workflowId);
+
+  return (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.RecordIndexPage}
+      params={{ objectNamePlural: CoreObjectNamePlural.WorkflowVersion }}
+      queryParams={{
+        filter: {
+          workflow: {
+            [ViewFilterOperand.IS]: {
+              selectedRecordIds: [workflowWithCurrentVersion?.id],
+            },
+          },
+        },
+      }}
+    />
+  );
+};
+
+export const SeeVersionsWorkflowVersionSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+  const recordStore = useAtomFamilyStateValue(recordStoreFamilyState, recordId);
+
+  if (!isDefined(recordStore) || !isDefined(recordStore.workflowId)) {
+    return null;
+  }
+
+  return (
+    <SeeVersionsWorkflowVersionSingleRecordCommandContent
+      workflowId={recordStore.workflowId}
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow-versions/components/SeeWorkflowWorkflowVersionSingleRecordCommand.tsx

@@ -0,0 +1,25 @@
+import { HeadlessNavigateEngineCommand } from '@/command-menu-item/engine-command/components/HeadlessNavigateEngineCommand';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { CoreObjectNameSingular, AppPath } from 'twenty-shared/types';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
+import { isDefined } from 'twenty-shared/utils';
+
+export const SeeWorkflowWorkflowVersionSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+  const recordStore = useAtomFamilyStateValue(recordStoreFamilyState, recordId);
+
+  if (!isDefined(recordStore) || !isDefined(recordStore?.workflow?.id)) {
+    return null;
+  }
+
+  return (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.RecordShowPage}
+      params={{
+        objectNameSingular: CoreObjectNameSingular.Workflow,
+        objectRecordId: recordStore.workflow.id,
+      }}
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow-versions/components/UseAsDraftWorkflowVersionSingleRecordCommand.tsx

@@ -0,0 +1,82 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { CoreObjectNameSingular, AppPath } from 'twenty-shared/types';
+import { useModal } from '@/ui/layout/modal/hooks/useModal';
+import { OverrideWorkflowDraftConfirmationModal } from '@/workflow/components/OverrideWorkflowDraftConfirmationModal';
+import { OVERRIDE_WORKFLOW_DRAFT_CONFIRMATION_MODAL_ID } from '@/workflow/constants/OverrideWorkflowDraftConfirmationModalId';
+import { useCreateDraftFromWorkflowVersion } from '@/workflow/hooks/useCreateDraftFromWorkflowVersion';
+import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
+import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
+import { useState } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
+
+const UseAsDraftWorkflowVersionSingleRecordCommandContent = ({
+  workflowId,
+  workflowVersionId,
+}: {
+  workflowId: string;
+  workflowVersionId: string;
+}) => {
+  const { openModal } = useModal();
+  const workflow = useWorkflowWithCurrentVersion(workflowId);
+  const { createDraftFromWorkflowVersion } =
+    useCreateDraftFromWorkflowVersion();
+  const navigate = useNavigateApp();
+  const [hasNavigated, setHasNavigated] = useState(false);
+
+  const hasAlreadyDraftVersion =
+    workflow?.versions.some((version) => version.status === 'DRAFT') || false;
+
+  const handleExecute = () => {
+    if (!isDefined(workflow) || hasNavigated) {
+      return;
+    }
+
+    if (hasAlreadyDraftVersion) {
+      openModal(OVERRIDE_WORKFLOW_DRAFT_CONFIRMATION_MODAL_ID);
+    } else {
+      const executeCommandWithoutWaiting = async () => {
+        await createDraftFromWorkflowVersion({
+          workflowId,
+          workflowVersionIdToCopy: workflowVersionId,
+        });
+
+        navigate(AppPath.RecordShowPage, {
+          objectNameSingular: CoreObjectNameSingular.Workflow,
+          objectRecordId: workflowId,
+        });
+
+        setHasNavigated(true);
+      };
+
+      executeCommandWithoutWaiting();
+    }
+  };
+
+  return (
+    <>
+      <HeadlessEngineCommandWrapperEffect execute={handleExecute} />
+      <OverrideWorkflowDraftConfirmationModal
+        workflowId={workflowId}
+        workflowVersionIdToCopy={workflowVersionId}
+      />
+    </>
+  );
+};
+
+export const UseAsDraftWorkflowVersionSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+  const workflowVersion = useWorkflowVersion(recordId);
+
+  if (!isDefined(workflowVersion?.workflow?.id)) {
+    return null;
+  }
+
+  return (
+    <UseAsDraftWorkflowVersionSingleRecordCommandContent
+      workflowId={workflowVersion.workflow.id}
+      workflowVersionId={workflowVersion.id}
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow/components/ActivateWorkflowSingleRecordCommand.tsx

@@ -0,0 +1,24 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useActivateWorkflowVersion } from '@/workflow/hooks/useActivateWorkflowVersion';
+import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
+import { isDefined } from 'twenty-shared/utils';
+
+export const ActivateWorkflowSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+  const { activateWorkflowVersion } = useActivateWorkflowVersion();
+  const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(recordId);
+
+  const handleExecute = () => {
+    if (!isDefined(workflowWithCurrentVersion)) {
+      return;
+    }
+
+    activateWorkflowVersion({
+      workflowVersionId: workflowWithCurrentVersion.currentVersion.id,
+      workflowId: workflowWithCurrentVersion.id,
+    });
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow/components/AddNodeWorkflowSingleRecordCommand.tsx

@@ -0,0 +1,22 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation';
+import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
+import { isDefined } from 'twenty-shared/utils';
+
+export const AddNodeWorkflowSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+  const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(recordId);
+  const { openWorkflowCreateStepInSidePanel } =
+    useSidePanelWorkflowNavigation();
+
+  const handleExecute = () => {
+    if (!isDefined(workflowWithCurrentVersion)) {
+      return;
+    }
+
+    openWorkflowCreateStepInSidePanel(workflowWithCurrentVersion.id);
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow/components/DeactivateWorkflowSingleRecordCommand.tsx

@@ -0,0 +1,23 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useDeactivateWorkflowVersion } from '@/workflow/hooks/useDeactivateWorkflowVersion';
+import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
+import { isDefined } from 'twenty-shared/utils';
+
+export const DeactivateWorkflowSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+  const { deactivateWorkflowVersion } = useDeactivateWorkflowVersion();
+  const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(recordId);
+
+  const handleExecute = () => {
+    if (!isDefined(workflowWithCurrentVersion)) {
+      return;
+    }
+
+    deactivateWorkflowVersion({
+      workflowVersionId: workflowWithCurrentVersion.currentVersion.id,
+    });
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow/components/DiscardDraftWorkflowSingleRecordCommand.tsx

@@ -0,0 +1,23 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useDeleteOneWorkflowVersion } from '@/workflow/hooks/useDeleteOneWorkflowVersion';
+import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
+import { isDefined } from 'twenty-shared/utils';
+
+export const DiscardDraftWorkflowSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+  const { deleteOneWorkflowVersion } = useDeleteOneWorkflowVersion();
+  const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(recordId);
+
+  const handleExecute = () => {
+    if (!isDefined(workflowWithCurrentVersion)) {
+      return;
+    }
+
+    deleteOneWorkflowVersion({
+      workflowVersionId: workflowWithCurrentVersion.currentVersion.id,
+    });
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow/components/DuplicateWorkflowSingleRecordCommand.tsx

@@ -0,0 +1,49 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useDuplicateWorkflow } from '@/workflow/hooks/useDuplicateWorkflow';
+import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
+import { useLingui } from '@lingui/react/macro';
+import { isNonEmptyString } from '@sniptt/guards';
+import { AppPath, CoreObjectNameSingular } from 'twenty-shared/types';
+import { isDefined } from 'twenty-shared/utils';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
+
+export const DuplicateWorkflowSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+  const workflow = useWorkflowWithCurrentVersion(recordId);
+  const { duplicateWorkflow } = useDuplicateWorkflow();
+  const navigate = useNavigateApp();
+  const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
+  const { t } = useLingui();
+
+  const handleExecute = async () => {
+    if (!isDefined(workflow) || !isDefined(workflow.currentVersion)) {
+      return;
+    }
+
+    const result = await duplicateWorkflow({
+      workflowIdToDuplicate: workflow.id,
+      workflowVersionIdToCopy: workflow.currentVersion.id,
+    });
+
+    if (isDefined(result) && isNonEmptyString(result.workflowId)) {
+      enqueueSuccessSnackBar({
+        message: t`Workflow duplicated successfully`,
+      });
+
+      navigate(AppPath.RecordShowPage, {
+        objectNameSingular: CoreObjectNameSingular.Workflow,
+        objectRecordId: result.workflowId,
+      });
+    } else {
+      enqueueErrorSnackBar({
+        message: t`Failed to duplicate workflow`,
+      });
+    }
+  };
+
+  return isDefined(workflow) ? (
+    <HeadlessEngineCommandWrapperEffect execute={handleExecute} />
+  ) : null;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow/components/SeeActiveVersionWorkflowSingleRecordCommand.tsx

@@ -0,0 +1,26 @@
+import { HeadlessNavigateEngineCommand } from '@/command-menu-item/engine-command/components/HeadlessNavigateEngineCommand';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { CoreObjectNameSingular, AppPath } from 'twenty-shared/types';
+import { useActiveWorkflowVersion } from '@/workflow/hooks/useActiveWorkflowVersion';
+
+export const SeeActiveVersionWorkflowSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+
+  const { workflowVersion, loading } = useActiveWorkflowVersion({
+    workflowId: recordId,
+  });
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.RecordShowPage}
+      params={{
+        objectNameSingular: CoreObjectNameSingular.WorkflowVersion,
+        objectRecordId: workflowVersion.id,
+      }}
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow/components/SeeRunsWorkflowSingleRecordCommand.tsx

@@ -0,0 +1,26 @@
+import { HeadlessNavigateEngineCommand } from '@/command-menu-item/engine-command/components/HeadlessNavigateEngineCommand';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
+import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
+import { AppPath, ViewFilterOperand } from 'twenty-shared/types';
+
+export const SeeRunsWorkflowSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+  const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(recordId);
+
+  return (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.RecordIndexPage}
+      params={{ objectNamePlural: CoreObjectNamePlural.WorkflowRun }}
+      queryParams={{
+        filter: {
+          workflow: {
+            [ViewFilterOperand.IS]: {
+              selectedRecordIds: [workflowWithCurrentVersion?.id],
+            },
+          },
+        },
+      }}
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow/components/SeeVersionsWorkflowSingleRecordCommand.tsx

@@ -0,0 +1,26 @@
+import { HeadlessNavigateEngineCommand } from '@/command-menu-item/engine-command/components/HeadlessNavigateEngineCommand';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
+import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
+import { AppPath, ViewFilterOperand } from 'twenty-shared/types';
+
+export const SeeVersionsWorkflowSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+  const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(recordId);
+
+  return (
+    <HeadlessNavigateEngineCommand
+      to={AppPath.RecordIndexPage}
+      params={{ objectNamePlural: CoreObjectNamePlural.WorkflowVersion }}
+      queryParams={{
+        filter: {
+          workflow: {
+            [ViewFilterOperand.IS]: {
+              selectedRecordIds: [workflowWithCurrentVersion?.id],
+            },
+          },
+        },
+      }}
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow/components/TestWorkflowSingleRecordCommand.tsx

@@ -0,0 +1,24 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useRunWorkflowVersion } from '@/workflow/hooks/useRunWorkflowVersion';
+import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
+import { isDefined } from 'twenty-shared/utils';
+
+export const TestWorkflowSingleRecordCommand = () => {
+  const recordId = useSelectedRecordIdOrThrow();
+  const { runWorkflowVersion } = useRunWorkflowVersion();
+  const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(recordId);
+
+  const handleExecute = () => {
+    if (!isDefined(workflowWithCurrentVersion)) {
+      return;
+    }
+
+    runWorkflowVersion({
+      workflowVersionId: workflowWithCurrentVersion.currentVersion.id,
+      workflowId: workflowWithCurrentVersion.id,
+    });
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/workflow/components/TidyUpWorkflowSingleRecordCommand.tsx

@@ -0,0 +1,36 @@
+import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
+import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
+import { useGetUpdatableWorkflowVersionOrThrow } from '@/workflow/hooks/useGetUpdatableWorkflowVersionOrThrow';
+import { getWorkflowVisualizerComponentInstanceId } from '@/workflow/utils/getWorkflowVisualizerComponentInstanceId';
+import { workflowDiagramComponentState } from '@/workflow/workflow-diagram/states/workflowDiagramComponentState';
+import { useTidyUpWorkflowVersion } from '@/workflow/workflow-version/hooks/useTidyUpWorkflowVersion';
+import { isDefined } from 'twenty-shared/utils';
+import { useStore } from 'jotai';
+
+export const TidyUpWorkflowSingleRecordCommand = () => {
+  const store = useStore();
+  const recordId = useSelectedRecordIdOrThrow();
+  const { tidyUpWorkflowVersion } = useTidyUpWorkflowVersion();
+  const instanceId = getWorkflowVisualizerComponentInstanceId({
+    recordId,
+  });
+  const { getUpdatableWorkflowVersion } =
+    useGetUpdatableWorkflowVersionOrThrow(instanceId);
+
+  const handleExecute = async () => {
+    const workflowDiagramAtom = workflowDiagramComponentState.atomFamily({
+      instanceId,
+    });
+    const workflowDiagram = store.get(workflowDiagramAtom);
+
+    if (!isDefined(workflowDiagram)) {
+      return;
+    }
+
+    const workflowVersionId = await getUpdatableWorkflowVersion();
+
+    await tidyUpWorkflowVersion(workflowVersionId, workflowDiagram);
+  };
+
+  return <HeadlessEngineCommandWrapperEffect execute={handleExecute} />;
+};

packages/twenty-front/src/modules/command-menu-item/engine-command/states/mountedEngineCommandsState.ts

@@ -0,0 +1,14 @@
+import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
+import { type EngineComponentKey } from '~/generated-metadata/graphql';
+
+export type MountedEngineCommandContext = {
+  engineComponentKey: EngineComponentKey;
+  contextStoreInstanceId: string;
+};
+
+export const mountedEngineCommandsState = createAtomState<
+  Map<string, MountedEngineCommandContext>
+>({
+  key: 'mountedEngineCommandsState',
+  defaultValue: new Map(),
+});

packages/twenty-front/src/modules/command-menu-item/server-items/hooks/useCommandMenuItemFrontComponentCommands.tsx

@@ -1,14 +1,17 @@
-import { ENGINE_COMPONENT_KEY_COMPONENT_MAP } from '@/command-menu-item/constants/EngineComponentKeyComponentMap';
 import { Command } from '@/command-menu-item/display/components/Command';
 import { HeadlessFrontComponentCommandMenuItem } from '@/command-menu-item/display/components/HeadlessFrontComponentCommandMenuItem';
+import { useMountEngineCommand } from '@/command-menu-item/engine-command/hooks/useMountEngineCommand';
+import { type MountedEngineCommandContext } from '@/command-menu-item/engine-command/states/mountedEngineCommandsState';
 import { CommandMenuItemScope } from '@/command-menu-item/types/CommandMenuItemScope';
 import { CommandMenuItemType } from '@/command-menu-item/types/CommandMenuItemType';
 import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
 import { contextStoreIsPageInEditModeComponentState } from '@/context-store/states/contextStoreIsPageInEditModeComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { useMountHeadlessFrontComponent } from '@/front-components/hooks/useMountHeadlessFrontComponent';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { useOpenFrontComponentInSidePanel } from '@/side-panel/hooks/useOpenFrontComponentInSidePanel';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { type CommandMenuContextApi } from 'twenty-shared/types';
@@ -127,6 +130,11 @@ type BuildCommandMenuItemFromStandardKeyParams = {
   isPinned: boolean;
   getIcon: ReturnType<typeof useIcons>['getIcon'];
   commandMenuContextApi: CommandMenuContextApi;
+  mountEngineCommand: (
+    engineCommandId: string,
+    context: MountedEngineCommandContext,
+  ) => void;
+  contextStoreInstanceId: string;
 };
 
 const buildCommandItemFromEngineKey = ({
@@ -137,10 +145,17 @@ const buildCommandItemFromEngineKey = ({
   isPinned,
   getIcon,
   commandMenuContextApi,
+  mountEngineCommand,
+  contextStoreInstanceId,
 }: BuildCommandMenuItemFromStandardKeyParams) => {
   const Icon = getIcon(item.icon, COMMAND_MENU_DEFAULT_ICON);
 
-  const component = ENGINE_COMPONENT_KEY_COMPONENT_MAP[engineComponentKey];
+  const handleClick = () => {
+    mountEngineCommand(item.id, {
+      engineComponentKey,
+      contextStoreInstanceId,
+    });
+  };
 
   return {
     type,
@@ -156,7 +171,7 @@ const buildCommandItemFromEngineKey = ({
         item.conditionalAvailabilityExpression,
         commandMenuContextApi,
       ),
-    component,
+    component: <Command onClick={handleClick} />,
   };
 };
 
@@ -166,6 +181,11 @@ export const useCommandMenuItemFrontComponentCommands = (
   const { getIcon } = useIcons();
   const { openFrontComponentInSidePanel } = useOpenFrontComponentInSidePanel();
   const mountHeadlessFrontComponent = useMountHeadlessFrontComponent();
+  const mountEngineCommand = useMountEngineCommand();
+
+  const contextStoreInstanceId = useAvailableComponentInstanceIdOrThrow(
+    ContextStoreComponentInstanceContext,
+  );
 
   const contextStoreIsPageInEditMode = useAtomComponentStateValue(
     contextStoreIsPageInEditModeComponentState,
@@ -233,6 +253,8 @@ export const useCommandMenuItemFrontComponentCommands = (
         isPinned,
         getIcon,
         commandMenuContextApi,
+        mountEngineCommand,
+        contextStoreInstanceId,
       });
     }
 

packages/twenty-front/src/modules/front-components/components/HeadlessFrontComponentMountRoot.tsx

@@ -1,5 +1,9 @@
 import { Suspense, lazy } from 'react';
 
+import { ENGINE_COMPONENT_KEY_HEADLESS_COMPONENT_MAP } from '@/command-menu-item/engine-command/constants/EngineComponentKeyHeadlessComponentMap';
+import { EngineCommandIdContext } from '@/command-menu-item/engine-command/contexts/EngineCommandIdContext';
+import { mountedEngineCommandsState } from '@/command-menu-item/engine-command/states/mountedEngineCommandsState';
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { mountedHeadlessFrontComponentMapsState } from '@/front-components/states/mountedHeadlessFrontComponentMapsState';
 import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
@@ -17,35 +21,54 @@ export const HeadlessFrontComponentMountRoot = () => {
     mountedHeadlessFrontComponentMapsState,
   );
 
-  if (mountedHeadlessFrontComponentMaps.size === 0) {
-    return null;
-  }
+  const mountedEngineCommands = useAtomStateValue(mountedEngineCommandsState);
+
+  const hasFrontComponents = mountedHeadlessFrontComponentMaps.size > 0;
+  const hasEngineCommands = mountedEngineCommands.size > 0;
 
   return (
     <>
-      {[...mountedHeadlessFrontComponentMaps.entries()].map(
-        ([frontComponentId, mountContext]) => (
-          <Suspense key={frontComponentId} fallback={null}>
-            <LayoutRenderingProvider
-              value={{
-                targetRecordIdentifier:
-                  isDefined(mountContext) &&
-                  isDefined(mountContext.objectNameSingular)
-                    ? {
-                        id: mountContext.recordId,
-                        targetObjectNameSingular:
-                          mountContext.objectNameSingular,
-                      }
-                    : undefined,
-                layoutType: PageLayoutType.DASHBOARD,
-                isInSidePanel: false,
-              }}
+      {hasFrontComponents &&
+        [...mountedHeadlessFrontComponentMaps.entries()].map(
+          ([frontComponentId, mountContext]) => (
+            <Suspense key={frontComponentId} fallback={null}>
+              <LayoutRenderingProvider
+                value={{
+                  targetRecordIdentifier:
+                    isDefined(mountContext) &&
+                    isDefined(mountContext.objectNameSingular)
+                      ? {
+                          id: mountContext.recordId,
+                          targetObjectNameSingular:
+                            mountContext.objectNameSingular,
+                        }
+                      : undefined,
+                  layoutType: PageLayoutType.DASHBOARD,
+                  isInSidePanel: false,
+                }}
+              >
+                <FrontComponentRenderer frontComponentId={frontComponentId} />
+              </LayoutRenderingProvider>
+            </Suspense>
+          ),
+        )}
+      {hasEngineCommands &&
+        [...mountedEngineCommands.entries()].map(
+          ([engineCommandId, mountContext]) => (
+            <ContextStoreComponentInstanceContext.Provider
+              key={engineCommandId}
+              value={{ instanceId: mountContext.contextStoreInstanceId }}
             >
-              <FrontComponentRenderer frontComponentId={frontComponentId} />
-            </LayoutRenderingProvider>
-          </Suspense>
-        ),
-      )}
+              <EngineCommandIdContext.Provider value={engineCommandId}>
+                {
+                  ENGINE_COMPONENT_KEY_HEADLESS_COMPONENT_MAP[
+                    mountContext.engineComponentKey
+                  ]
+                }
+              </EngineCommandIdContext.Provider>
+            </ContextStoreComponentInstanceContext.Provider>
+          ),
+        )}
     </>
   );
 };