Jotai 13 (#18178)

## Recoil to Jotai Migration — PR 13: Workflow, Page Layout, AI,
Activities, Settings, SSE & Remaining Modules

### Summary

This is the 13th PR in the [14-PR migration
series](packages/twenty-front/src/modules/ui/utilities/state/jotai/MIGRATION_PLAN.md)
to replace Recoil with Jotai as the state management library in
`twenty-front`. This PR migrates the remaining consumer code across all
modules — updating ~1,076 files with ~10k insertions/deletions.

### What changed

**New Jotai infrastructure (13 new files):**
- `createComponentSelectorV2` and `createComponentFamilySelectorV2` —
instance-scoped derived atoms, replacing Recoil's component selectors
- 6 new hooks: `useRecoilComponentSelectorValueV2`,
`useRecoilComponentFamilySelectorValueV2`,
`useRecoilComponentSelectorCallbackStateV2`,
`useRecoilComponentFamilySelectorCallbackStateV2`,
`useRecoilComponentStateCallbackStateV2`,
`useRecoilComponentFamilyStateCallbackStateV2`
- New types: `ComponentSelectorV2`, `ComponentFamilySelectorV2`,
`SelectorCallbacksV2`
- Extended `buildGetHelper` to support the new selector patterns

**State definition migrations:**
- `createState()` → `createStateV2()` (Jotai `atom()`)
- `createFamilyState()` → `createFamilyStateV2()` (Jotai `atom()` with
family cache)
- Recoil `selector`/`selectorFamily` → Jotai derived `atom()` via V2
utilities

**Hook migrations (~2,400 removed, ~1,545 added V2 equivalents):**
- `useRecoilValue` → `useRecoilValueV2`
- `useRecoilState` → `useRecoilStateV2`
- `useSetRecoilState` → `useSetRecoilStateV2`
- `useRecoilCallback` → `useCallback` + `jotaiStore.get/set`
- `useRecoilComponentValue` → `useRecoilComponentValueV2`
- `useSetRecoilComponentState` → `useSetRecoilComponentStateV2`
- `useRecoilComponentFamilyValue` → `useRecoilComponentFamilyValueV2` /
`useFamilySelectorValueV2`
- ~397 direct `import from 'recoil'` removed

**Deleted files (9 files):**
- `dateLocaleState.ts` — consolidated
- `currentAIChatThreadTitleStateV2.ts` — renamed to replace the original
- `isCommandMenuOpenedState.ts` — removed
- `filesFieldUploadState.ts` — replaced by V2
- `recordStoreFamilySelector.ts`, `recordStoreFieldValueSelector.ts`,
`recordStoreRecordsSelector.ts` — replaced by V2 equivalents
- `settingsAllRolesSelector.ts` — replaced by `useSettingsAllRoles` hook
- `settingsRoleIdsStateV2.ts` — consolidated

**Modules migrated:**
- Workflow (diagram, steps, variables, filters)
- Page Layout (widgets, fields, graph, tabs)
- AI (chat, agents, browsing context)
- Activities (rich text editor, targets, timeline)
- Action Menu (single/multiple record actions)
- Command Menu (navigation, history, pages, workflow)
- Context Store
- Record Board, Record Table, Record Calendar, Record Index
- Record Field, Record Filter, Record Sort, Record Group
- Record Drag, Record Picker, Record Store
- Views (view bar, view picker, filters, sorts)
- Settings (roles, permissions, SSO, security, data model, developers,
domains)
- SSE (event streams, subscriptions)
- Spreadsheet Import
- Auth, Favorites, Front Components, Information Banner

packages/twenty-front/src/modules/workflow/hooks/useFlowOrThrow.ts

@@ -1,9 +1,9 @@
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
 import { flowComponentState } from '@/workflow/states/flowComponentState';
 import { isDefined } from 'twenty-shared/utils';
 
 export const useFlowOrThrow = () => {
-  const flow = useRecoilComponentValue(flowComponentState);
+  const flow = useRecoilComponentValueV2(flowComponentState);
 
   if (!isDefined(flow)) {
     throw new Error('Expected the flow to be defined');

packages/twenty-front/src/modules/workflow/hooks/useGetUpdatableWorkflowVersionOrThrow.ts

@@ -1,4 +1,4 @@
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
 import { useCreateDraftFromWorkflowVersion } from '@/workflow/hooks/useCreateDraftFromWorkflowVersion';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
 import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
@@ -7,7 +7,7 @@ import { isDefined } from 'twenty-shared/utils';
 export const useGetUpdatableWorkflowVersionOrThrow = (instanceId?: string) => {
   const { createDraftFromWorkflowVersion } =
     useCreateDraftFromWorkflowVersion();
-  const workflowVisualizerWorkflowId = useRecoilComponentValue(
+  const workflowVisualizerWorkflowId = useRecoilComponentValueV2(
     workflowVisualizerWorkflowIdComponentState,
     instanceId,
   );

packages/twenty-front/src/modules/workflow/hooks/useRunWorkflowRunOpeningInCommandMenuSideEffects.ts

@@ -14,7 +14,7 @@ import { workflowRunDiagramAutomaticallyOpenedStepsComponentState } from '@/work
 import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
 import { generateWorkflowRunDiagram } from '@/workflow/workflow-diagram/utils/generateWorkflowRunDiagram';
 import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey';
-import { useRecoilCallback } from 'recoil';
+import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';
 
@@ -25,102 +25,93 @@ export const useRunWorkflowRunOpeningInCommandMenuSideEffects = () => {
 
   const { objectPermissionsByObjectMetadataId } = useObjectPermissions();
 
-  const runWorkflowRunOpeningInCommandMenuSideEffects = useRecoilCallback(
-    ({ set }) =>
-      ({
+  const runWorkflowRunOpeningInCommandMenuSideEffects = useCallback(
+    ({
+      objectMetadataItem,
+      recordId,
+    }: {
+      objectMetadataItem: ObjectMetadataItem;
+      recordId: string;
+    }) => {
+      const objectMetadataItems = jotaiStore.get(objectMetadataItemsState.atom);
+
+      const workflowRunRecord = getRecordFromCache<WorkflowRun>({
         objectMetadataItem,
+        cache: apolloCoreClient.cache,
         recordId,
-      }: {
-        objectMetadataItem: ObjectMetadataItem;
-        recordId: string;
-      }) => {
-        const objectMetadataItems = jotaiStore.get(
-          objectMetadataItemsState.atom,
-        );
+        objectMetadataItems,
+        objectPermissionsByObjectMetadataId,
+      });
+      if (
+        !(isDefined(workflowRunRecord) && isDefined(workflowRunRecord.state))
+      ) {
+        return;
+      }
 
-        const workflowRunRecord = getRecordFromCache<WorkflowRun>({
-          objectMetadataItem,
-          cache: apolloCoreClient.cache,
-          recordId,
-          objectMetadataItems,
-          objectPermissionsByObjectMetadataId,
-        });
-        if (
-          !(isDefined(workflowRunRecord) && isDefined(workflowRunRecord.state))
-        ) {
-          return;
-        }
+      const { stepToOpenByDefault } = generateWorkflowRunDiagram({
+        steps: workflowRunRecord.state.flow.steps,
+        stepInfos: workflowRunRecord.state.stepInfos,
+        trigger: workflowRunRecord.state.flow.trigger,
+      });
 
-        const { stepToOpenByDefault } = generateWorkflowRunDiagram({
-          steps: workflowRunRecord.state.flow.steps,
-          stepInfos: workflowRunRecord.state.stepInfos,
+      if (!isDefined(stepToOpenByDefault)) {
+        return;
+      }
+
+      const instanceId = getWorkflowVisualizerComponentInstanceId({
+        recordId,
+      });
+
+      jotaiStore.set(
+        workflowVisualizerWorkflowRunIdComponentState.atomFamily({
+          instanceId,
+        }),
+        workflowRunRecord.id,
+      );
+      jotaiStore.set(
+        workflowVisualizerWorkflowIdComponentState.atomFamily({
+          instanceId,
+        }),
+        workflowRunRecord.workflowId,
+      );
+      jotaiStore.set(
+        flowComponentState.atomFamily({
+          instanceId,
+        }),
+        {
+          workflowVersionId: workflowRunRecord.workflowVersionId,
           trigger: workflowRunRecord.state.flow.trigger,
-        });
+          steps: workflowRunRecord.state.flow.steps,
+        },
+      );
+      jotaiStore.set(
+        workflowSelectedNodeComponentState.atomFamily({
+          instanceId,
+        }),
+        stepToOpenByDefault.id,
+      );
 
-        if (!isDefined(stepToOpenByDefault)) {
-          return;
-        }
-
-        set(
-          workflowVisualizerWorkflowRunIdComponentState.atomFamily({
-            instanceId: getWorkflowVisualizerComponentInstanceId({
-              recordId,
-            }),
-          }),
-          workflowRunRecord.id,
-        );
-        set(
-          workflowVisualizerWorkflowIdComponentState.atomFamily({
-            instanceId: getWorkflowVisualizerComponentInstanceId({
-              recordId,
-            }),
-          }),
-          workflowRunRecord.workflowId,
-        );
-        set(
-          flowComponentState.atomFamily({
-            instanceId: getWorkflowVisualizerComponentInstanceId({
-              recordId,
-            }),
-          }),
+      jotaiStore.set(
+        workflowRunDiagramAutomaticallyOpenedStepsComponentState.atomFamily({
+          instanceId,
+        }),
+        (steps) => [
+          ...steps,
           {
-            workflowVersionId: workflowRunRecord.workflowVersionId,
-            trigger: workflowRunRecord.state.flow.trigger,
-            steps: workflowRunRecord.state.flow.steps,
+            stepId: stepToOpenByDefault.id,
+            isInRightDrawer: true,
           },
-        );
-        set(
-          workflowSelectedNodeComponentState.atomFamily({
-            instanceId: getWorkflowVisualizerComponentInstanceId({
-              recordId,
-            }),
-          }),
-          stepToOpenByDefault.id,
-        );
-
-        set(
-          workflowRunDiagramAutomaticallyOpenedStepsComponentState.atomFamily({
-            instanceId: getWorkflowVisualizerComponentInstanceId({
-              recordId,
-            }),
-          }),
-          (steps) => [
-            ...steps,
-            {
-              stepId: stepToOpenByDefault.id,
-              isInRightDrawer: true,
-            },
-          ],
-        );
-        openWorkflowRunViewStepInCommandMenu({
-          workflowId: workflowRunRecord.workflowId,
-          workflowRunId: workflowRunRecord.id,
-          title: stepToOpenByDefault.data.name,
-          icon: getIcon(getWorkflowNodeIconKey(stepToOpenByDefault.data)),
-          workflowSelectedNode: stepToOpenByDefault.id,
-          stepExecutionStatus: stepToOpenByDefault.data.runStatus,
-        });
-      },
+        ],
+      );
+      openWorkflowRunViewStepInCommandMenu({
+        workflowId: workflowRunRecord.workflowId,
+        workflowRunId: workflowRunRecord.id,
+        title: stepToOpenByDefault.data.name,
+        icon: getIcon(getWorkflowNodeIconKey(stepToOpenByDefault.data)),
+        workflowSelectedNode: stepToOpenByDefault.id,
+        stepExecutionStatus: stepToOpenByDefault.data.runStatus,
+      });
+    },
     [
       apolloCoreClient.cache,
       objectPermissionsByObjectMetadataId,

packages/twenty-front/src/modules/workflow/hooks/useRunWorkflowVersion.tsx

@@ -13,13 +13,14 @@ import { useGenerateDepthRecordGqlFieldsFromObject } from '@/object-record/graph
 import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions';
 import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { computeOptimisticCreateRecordBaseRecordInput } from '@/object-record/utils/computeOptimisticCreateRecordBaseRecordInput';
 import { computeOptimisticRecordFromInput } from '@/object-record/utils/computeOptimisticRecordFromInput';
 import { RUN_WORKFLOW_VERSION } from '@/workflow/graphql/mutations/runWorkflowVersion';
 import { type WorkflowRun } from '@/workflow/types/Workflow';
 import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
+import { useCallback } from 'react';
 import { useMutation } from '@apollo/client';
-import { useRecoilCallback } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { v4 } from 'uuid';
 import {
@@ -62,13 +63,12 @@ export const useRunWorkflowVersion = () => {
 
   const { openRecordInCommandMenu } = useOpenRecordInCommandMenu();
 
-  const setRecordInStore = useRecoilCallback(
-    ({ set }) =>
-      (workflowRun: WorkflowRun) => {
-        set(recordStoreFamilyState(workflowRun.id), workflowRun);
-      },
-    [],
-  );
+  const setRecordInStore = useCallback((workflowRun: WorkflowRun) => {
+    jotaiStore.set(
+      recordStoreFamilyState.atomFamily(workflowRun.id),
+      workflowRun,
+    );
+  }, []);
 
   const runWorkflowVersion = async ({
     workflowId,

packages/twenty-front/src/modules/workflow/hooks/useWorkflowRunIdOrThrow.ts

@@ -1,9 +1,9 @@
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
 import { workflowVisualizerWorkflowRunIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowRunIdComponentState';
 import { isDefined } from 'twenty-shared/utils';
 
 export const useWorkflowRunIdOrThrow = () => {
-  const workflowRunId = useRecoilComponentValue(
+  const workflowRunId = useRecoilComponentValueV2(
     workflowVisualizerWorkflowRunIdComponentState,
   );
 

packages/twenty-front/src/modules/workflow/hooks/useWorkflowVersionIdOrThrow.ts

@@ -1,9 +1,9 @@
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
 import { workflowVisualizerWorkflowVersionIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowVersionIdComponentState';
 import { isDefined } from 'twenty-shared/utils';
 
 export const useWorkflowVersionIdOrThrow = () => {
-  const workflowVersionId = useRecoilComponentValue(
+  const workflowVersionId = useRecoilComponentValueV2(
     workflowVisualizerWorkflowVersionIdComponentState,
   );
 

packages/twenty-front/src/modules/workflow/hooks/useWorkflowWithCurrentVersion.ts

@@ -1,8 +1,9 @@
 import { useEffect } from 'react';
-import { useRecoilState } from 'recoil';
 
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
+import { useFamilyRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilyRecoilValueV2';
+import { useSetFamilyRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetFamilyRecoilStateV2';
 import { shouldWorkflowRefetchRequestFamilyState } from '@/workflow/states/shouldWorkflowRefetchRequestFamilyState';
 import {
   type Workflow,
@@ -20,8 +21,14 @@ type WorkflowWithAllVersions = Omit<Workflow, 'versions'> & {
 export const useWorkflowWithCurrentVersion = (
   workflowId: string | undefined,
 ): WorkflowWithCurrentVersion | undefined => {
-  const [shouldWorkflowRefetchRequest, setShouldWorkflowRefetchRequest] =
-    useRecoilState(shouldWorkflowRefetchRequestFamilyState(workflowId ?? ''));
+  const shouldWorkflowRefetchRequest = useFamilyRecoilValueV2(
+    shouldWorkflowRefetchRequestFamilyState,
+    workflowId ?? '',
+  );
+  const setShouldWorkflowRefetchRequest = useSetFamilyRecoilStateV2(
+    shouldWorkflowRefetchRequestFamilyState,
+    workflowId ?? '',
+  );
 
   const { record: workflow, refetch: refetchWorkflow } =
     useFindOneRecord<WorkflowWithAllVersions>({