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/states/flowComponentState.ts

@@ -1,11 +1,11 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
 import {
   type WorkflowAction,
   type WorkflowTrigger,
 } from '@/workflow/types/Workflow';
 import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
 
-export const flowComponentState = createComponentState<
+export const flowComponentState = createComponentStateV2<
   | {
       workflowVersionId: string;
       trigger: WorkflowTrigger | null;

packages/twenty-front/src/modules/workflow/states/selectors/stepSelector.ts

@@ -1,16 +1,16 @@
-import { createComponentSelector } from '@/ui/utilities/state/component-state/utils/createComponentSelector';
+import { createComponentSelectorV2 } from '@/ui/utilities/state/jotai/utils/createComponentSelectorV2';
 import { flowComponentState } from '@/workflow/states/flowComponentState';
 import type { WorkflowAction } from '@/workflow/types/Workflow';
 import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
 import { isDefined } from 'twenty-shared/utils';
 
 export const createStepSelector = (stepId: string) =>
-  createComponentSelector<WorkflowAction | null>({
+  createComponentSelectorV2<WorkflowAction | null>({
     key: `stepSelector-${stepId}`,
     get:
-      ({ instanceId }) =>
+      (componentStateKey) =>
       ({ get }) => {
-        const flowState = get(flowComponentState.atomFamily({ instanceId }));
+        const flowState = get(flowComponentState, componentStateKey);
 
         if (!isDefined(flowState) || !isDefined(flowState.steps)) {
           return null;

packages/twenty-front/src/modules/workflow/states/selectors/stepsOutputSchemaFamilySelector.ts

@@ -1,10 +1,10 @@
+import { createFamilySelectorV2 } from '@/ui/utilities/state/jotai/utils/createFamilySelectorV2';
 import { getStepOutputSchemaFamilyStateKey } from '@/workflow/utils/getStepOutputSchemaFamilyStateKey';
 import { stepsOutputSchemaFamilyState } from '@/workflow/workflow-variables/states/stepsOutputSchemaFamilyState';
 import { type StepOutputSchemaV2 } from '@/workflow/workflow-variables/types/StepOutputSchemaV2';
-import { selectorFamily } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 
-export const stepsOutputSchemaFamilySelector = selectorFamily<
+export const stepsOutputSchemaFamilySelector = createFamilySelectorV2<
   StepOutputSchemaV2[],
   { workflowVersionId: string; stepIds: string[] }
 >({
@@ -17,7 +17,7 @@ export const stepsOutputSchemaFamilySelector = selectorFamily<
           getStepOutputSchemaFamilyStateKey(workflowVersionId, stepId),
         )
         .map((stepOutputSchemaKey) =>
-          get(stepsOutputSchemaFamilyState(stepOutputSchemaKey)),
+          get(stepsOutputSchemaFamilyState, stepOutputSchemaKey),
         )
         .filter(isDefined);
 

packages/twenty-front/src/modules/workflow/states/shouldWorkflowRefetchRequestFamilyState.ts

@@ -1,6 +1,6 @@
-import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
+import { createFamilyStateV2 } from '@/ui/utilities/state/jotai/utils/createFamilyStateV2';
 
-export const shouldWorkflowRefetchRequestFamilyState = createFamilyState<
+export const shouldWorkflowRefetchRequestFamilyState = createFamilyStateV2<
   boolean,
   string
 >({

packages/twenty-front/src/modules/workflow/states/workflowLastCreatedStepIdComponentState.ts

@@ -1,7 +1,7 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
 import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
 
-export const workflowLastCreatedStepIdComponentState = createComponentState<
+export const workflowLastCreatedStepIdComponentState = createComponentStateV2<
   string | undefined
 >({
   key: 'workflowLastCreatedStepIdComponentState',

packages/twenty-front/src/modules/workflow/states/workflowVisualizerWorkflowIdComponentState.ts

@@ -1,10 +1,9 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
 import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
 
-export const workflowVisualizerWorkflowIdComponentState = createComponentState<
-  string | undefined
->({
-  key: 'workflowVisualizerWorkflowIdComponentState',
-  defaultValue: undefined,
-  componentInstanceContext: WorkflowVisualizerComponentInstanceContext,
-});
+export const workflowVisualizerWorkflowIdComponentState =
+  createComponentStateV2<string | undefined>({
+    key: 'workflowVisualizerWorkflowIdComponentState',
+    defaultValue: undefined,
+    componentInstanceContext: WorkflowVisualizerComponentInstanceContext,
+  });

packages/twenty-front/src/modules/workflow/states/workflowVisualizerWorkflowRunIdComponentState.ts

@@ -1,8 +1,8 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
 import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
 
 export const workflowVisualizerWorkflowRunIdComponentState =
-  createComponentState<string | undefined>({
+  createComponentStateV2<string | undefined>({
     key: 'workflowVisualizerWorkflowRunIdComponentState',
     defaultValue: undefined,
     componentInstanceContext: WorkflowVisualizerComponentInstanceContext,

packages/twenty-front/src/modules/workflow/states/workflowVisualizerWorkflowVersionIdComponentState.ts

@@ -1,8 +1,8 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
 import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
 
 export const workflowVisualizerWorkflowVersionIdComponentState =
-  createComponentState<string | undefined>({
+  createComponentStateV2<string | undefined>({
     key: 'workflowVisualizerWorkflowVersionIdComponentState',
     defaultValue: undefined,
     componentInstanceContext: WorkflowVisualizerComponentInstanceContext,