web

Cursor Agent Rules for CaseAI Connect - Web

Redux & Feature Architecture

API Calls Must Go Through Redux + Services

Rule: All API calls MUST go through React-Redux thunks, which in turn MUST use the shared services object. React components MUST NOT call the API client (Axios, fetch, etc.) directly.

Requirements:

• All API calls must use Redux thunks (createAsyncThunk)
• Thunks call extra.services.{feature} methods only (never axios / fetch directly)
• Components dispatch thunks, never call API directly
• API routes and DTOs come from @caseai-connect/api-contracts
• The Axios client is centralized in external/axios.ts
• The feature services registry is centralized in external/axios.services.ts and exposed via di/services.ts

Structure:

• Redux slices: features/{domain}/{domain}.slice.ts
• Redux thunks: features/{domain}/{domain}.thunks.ts
• Redux selectors: features/{domain}/{domain}.selectors.ts
• Axios client: external/axios.ts (singleton Axios with auth interceptors)
• Services registry: external/axios.services.ts (builds concrete services) and di/services.ts (typed Services + getServices())

Store wiring:

• store/index.ts:
  • Registers feature reducers under their domain keys (e.g. me, projects, organizations, agents, etc.)
  • Configures thunk.extraArgument with { services: getServices() } (typed as ThunkExtraArg)
  • Middleware and listeners must assume all side-effectful work goes through these services

Feature Service Pattern (SPI + External API + Models)

Rule: Each feature MUST follow the "me" feature architecture as the canonical pattern for defining and organizing objects inside a feature.

Canonical Example (Me Feature):

• features/me/me.models.ts
  • Defines domain-level types (User, Me, etc.)
  • These are the types slices and components should depend on (not raw DTOs)
• features/me/me.spi.ts
  • Declares the Service Provider Interface for the feature (IMeSpi)
  • Only exposes domain models (Me) in its API surface
• features/me/external/me.api.ts
  • Concrete implementation of the SPI using Axios + @caseai-connect/api-contracts
  • Uses satisfies IMeSpi to ensure the implementation matches the SPI contract
  • Performs DTO → domain mapping via small helpers (e.g. fromDto(dto: MeResponseDto): Me)
• external/axios.services.ts
  • Wires the feature implementation into the global services object:
    • me: meApi (where meApi is the SPI implementation from features/me/external/me.api.ts)
• di/services.ts
  • Declares the Services type (e.g. me: IMeSpi, projects: IProjectsApi, etc.)
  • Exposes getServices() which returns the concrete services instance
• features/me/me.thunks.ts
  • Uses createAsyncThunk<Me, void, { state: RootState; extra: ThunkExtraArg }>
  • Accesses the SPI through extra.services.me only
• features/me/me.slice.ts
  • Stores domain state based on Me / Me["user"] types
  • Handles pending/fulfilled/rejected states of the feature thunks
• features/me/me.selectors.ts
  • Selectors read from the slice and return domain models, not DTOs