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/testing/decorators/ContextStoreDecorator.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
-import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
 import { isUndefined } from '@sniptt/guards';
 import { getMockCompanyObjectMetadataItem } from '~/testing/mock-data/companies';
 
@@ -17,7 +17,7 @@ export const ContextStoreDecorator: Decorator = (Story, context) => {
     componentInstanceId = MAIN_CONTEXT_STORE_INSTANCE_ID;
   }
 
-  const setCurrentObjectMetadataItemId = useSetRecoilComponentState(
+  const setCurrentObjectMetadataItemId = useSetRecoilComponentStateV2(
     contextStoreCurrentObjectMetadataItemIdComponentState,
     componentInstanceId,
   );

packages/twenty-front/src/testing/decorators/ProfilerDecorator.tsx

@@ -1,6 +1,6 @@
 import { type Decorator } from '@storybook/react-vite';
-import { useRecoilState } from 'recoil';
 
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { ProfilerWrapper } from '~/testing/profiling/components/ProfilerWrapper';
 import { ProfilingQueueEffect } from '~/testing/profiling/components/ProfilingQueueEffect';
 import { ProfilingReporter } from '~/testing/profiling/components/ProfilingReporter';
@@ -14,12 +14,12 @@ export const ProfilerDecorator: Decorator = (Story, { id, parameters }) => {
   const numberOfRuns = parameters.numberOfRuns ?? 2;
   const warmUpRounds = parameters.warmUpRounds ?? 5;
 
-  const [currentProfilingRunIndex] = useRecoilState(
+  const currentProfilingRunIndex = useRecoilValueV2(
     currentProfilingRunIndexState,
   );
 
-  const [profilingSessionStatus] = useRecoilState(profilingSessionStatusState);
-  const [profilingSessionRuns] = useRecoilState(profilingSessionRunsState);
+  const profilingSessionStatus = useRecoilValueV2(profilingSessionStatusState);
+  const profilingSessionRuns = useRecoilValueV2(profilingSessionRunsState);
 
   const skip = profilingSessionRuns.length === 0;
 

packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx

@@ -3,6 +3,7 @@ import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetReco
 
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
+import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { labelIdentifierFieldMetadataItemSelector } from '@/object-metadata/states/labelIdentifierFieldMetadataItemSelector';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
@@ -25,8 +26,9 @@ import { useSetRecordTableData } from '@/object-record/record-table/hooks/intern
 import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/utils/getRecordIndexIdFromObjectNamePluralAndViewId';
 import { getObjectPermissionsFromMapByObjectMetadataId } from '@/settings/roles/role-permissions/objects-permissions/utils/getObjectPermissionsFromMapByObjectMetadataId';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
-import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useRecoilComponentSelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentSelectorValueV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
 import { coreViewsState } from '@/views/states/coreViewState';
 import { type CoreViewWithRelations } from '@/views/types/CoreViewWithRelations';
@@ -45,12 +47,13 @@ const InternalTableStateLoaderEffect = ({
 }) => {
   const { recordTableId } = useRecordTableContextOrThrow();
   const { loadRecordIndexStates } = useLoadRecordIndexStates();
-  const setCurrentRecordFields = useSetRecoilComponentState(
+  const setCurrentRecordFields = useSetRecoilComponentStateV2(
     currentRecordFieldsComponentState,
   );
 
-  const setContextStoreCurrentViewId = useSetRecoilComponentState(
+  const setContextStoreCurrentViewId = useSetRecoilComponentStateV2(
     contextStoreCurrentViewIdComponentState,
+    MAIN_CONTEXT_STORE_INSTANCE_ID,
   );
 
   const setCoreViews = useSetRecoilStateV2(coreViewsState);
@@ -104,14 +107,12 @@ const InternalTableContextProviders = ({
 }) => {
   const { objectPermissionsByObjectMetadataId } = useObjectPermissions();
 
-  const currentRecordFields = useRecoilComponentValue(
+  const currentRecordFields = useRecoilComponentValueV2(
     currentRecordFieldsComponentState,
-    'record-index',
   );
 
-  const visibleRecordFields = useRecoilComponentValue(
+  const visibleRecordFields = useRecoilComponentSelectorValueV2(
     visibleRecordFieldsComponentSelector,
-    'record-index',
   );
 
   const fieldMetadataItems = objectMetadataItem.fields;

packages/twenty-front/src/testing/decorators/WorkflowStepDecorator.tsx

@@ -10,8 +10,8 @@ import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-
 import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
 import { useStepsOutputSchema } from '@/workflow/workflow-variables/hooks/useStepsOutputSchema';
 import { type Decorator } from '@storybook/react-vite';
-import { useEffect, useState } from 'react';
-import { useRecoilCallback } from 'recoil';
+import { useStore } from 'jotai';
+import { useCallback, useEffect, useState } from 'react';
 import {
   getWorkflowMock,
   getWorkflowNodeIdMock,
@@ -26,56 +26,59 @@ export const WorkflowStepDecorator: Decorator = (Story) => {
   const { loadMockedObjectMetadataItems } = useLoadMockedObjectMetadataItems();
   const [ready, setReady] = useState(false);
 
-  const handleMount = useRecoilCallback(
-    ({ set }) =>
-      async () => {
-        await loadMockedObjectMetadataItems();
+  const store = useStore();
 
-        set(
-          workflowVisualizerWorkflowIdComponentState.atomFamily({
-            instanceId: workflowVisualizerComponentInstanceId,
-          }),
-          getWorkflowMock().id,
-        );
-        set(
-          workflowVisualizerWorkflowVersionIdComponentState.atomFamily({
-            instanceId: workflowVisualizerComponentInstanceId,
-          }),
-          workflowVersion.id,
-        );
-        set(
-          workflowVisualizerWorkflowRunIdComponentState.atomFamily({
-            instanceId: workflowVisualizerComponentInstanceId,
-          }),
-          '123',
-        );
-        set(
-          workflowSelectedNodeComponentState.atomFamily({
-            instanceId: workflowVisualizerComponentInstanceId,
-          }),
-          getWorkflowNodeIdMock(),
-        );
-        set(
-          flowComponentState.atomFamily({
-            instanceId: workflowVisualizerComponentInstanceId,
-          }),
-          {
-            workflowVersionId: workflowVersion.id,
-            trigger: workflowVersion.trigger,
-            steps: workflowVersion.steps,
-          },
-        );
-        set(
-          commandMenuWorkflowIdComponentState.atomFamily({
-            instanceId: workflowVisualizerComponentInstanceId,
-          }),
-          getWorkflowMock().id,
-        );
-        populateStepsOutputSchema(workflowVersion);
-        setReady(true);
+  const handleMount = useCallback(async () => {
+    await loadMockedObjectMetadataItems();
+
+    store.set(
+      workflowVisualizerWorkflowIdComponentState.atomFamily({
+        instanceId: workflowVisualizerComponentInstanceId,
+      }),
+      getWorkflowMock().id,
+    );
+    store.set(
+      workflowVisualizerWorkflowVersionIdComponentState.atomFamily({
+        instanceId: workflowVisualizerComponentInstanceId,
+      }),
+      workflowVersion.id,
+    );
+    store.set(
+      workflowVisualizerWorkflowRunIdComponentState.atomFamily({
+        instanceId: workflowVisualizerComponentInstanceId,
+      }),
+      '123',
+    );
+    store.set(
+      workflowSelectedNodeComponentState.atomFamily({
+        instanceId: workflowVisualizerComponentInstanceId,
+      }),
+      getWorkflowNodeIdMock(),
+    );
+    store.set(
+      flowComponentState.atomFamily({
+        instanceId: workflowVisualizerComponentInstanceId,
+      }),
+      {
+        workflowVersionId: workflowVersion.id,
+        trigger: workflowVersion.trigger,
+        steps: workflowVersion.steps,
       },
-    [loadMockedObjectMetadataItems, populateStepsOutputSchema, workflowVersion],
-  );
+    );
+    store.set(
+      commandMenuWorkflowIdComponentState.atomFamily({
+        instanceId: workflowVisualizerComponentInstanceId,
+      }),
+      getWorkflowMock().id,
+    );
+    populateStepsOutputSchema(workflowVersion);
+    setReady(true);
+  }, [
+    loadMockedObjectMetadataItems,
+    populateStepsOutputSchema,
+    workflowVersion,
+    store,
+  ]);
 
   useEffect(() => {
     handleMount();

packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx

@@ -1,6 +1,5 @@
 import { type Decorator } from '@storybook/react-vite';
-import { useEffect } from 'react';
-import { useRecoilCallback } from 'recoil';
+import { useCallback, useEffect } from 'react';
 
 import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition';
 import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
@@ -8,6 +7,7 @@ import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldCont
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/ui/states/contexts/RecordFieldComponentInstanceContext';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { type ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { CustomError, isDefined } from 'twenty-shared/utils';
 import { getCompaniesMock } from '~/testing/mock-data/companies';
 import { getPeopleRecordConnectionMock } from '~/testing/mock-data/people';
@@ -24,13 +24,9 @@ const RecordMockSetterEffect = ({
   people: ObjectRecord[];
   tasks: ObjectRecord[];
 }) => {
-  const setRecordInStores = useRecoilCallback(
-    ({ set }) =>
-      (record: ObjectRecord) => {
-        set(recordStoreFamilyState(record.id), record);
-      },
-    [],
-  );
+  const setRecordInStores = useCallback((record: ObjectRecord) => {
+    jotaiStore.set(recordStoreFamilyState.atomFamily(record.id), record);
+  }, []);
 
   useEffect(() => {
     for (const company of companies) {