feat(experiment): add experiments list page with filtering, pagination, and actions

frontend/.claude/context/ui-patterns.md

@@ -1,5 +1,63 @@
 # UI Patterns & Best Practices
 
+**Use design tokens, utility classes, and primitive components before writing anything custom.** Each tier composes the one below — pick the highest tier that fits before reaching for SCSS.
+
+## Design Tokens & Primitives
+
+### Colour Tokens
+
+**Location:** `common/theme/tokens.ts` (auto-generated from `common/theme/tokens.json`)
+
+Never hardcode hex colours in TSX or SCSS. Use:
+- **In SCSS:** CSS variables directly — `var(--color-text-success)`, `var(--color-border-action)`, `var(--color-surface-muted)`
+- **In TSX (inline styles / chart props):** JS token constants — `colorTextSuccess`, `colorBorderAction`, `colorSurfaceMuted`
+
+Token categories: `colorText*`, `colorIcon*`, `colorBorder*`, `colorSurface*`, `colorChart*`, `radius*`, `shadow*`, `duration*`, `easing*`.
+
+### Utility Classes
+
+Before writing custom SCSS, check for token-driven utilities:
+
+- **Token utilities** (`web/styles/_token-utilities.scss`): `bg-surface-*`, `text-*`, `border-*`, `rounded-*`, `shadow-*`, `transition-*`
+- **Bootstrap utilities** (layout / spacing): `d-flex`, `flex-column`, `gap-*`, `p-*`, `m-*`, `text-center`, `align-items-*`, `justify-content-*`
+
+Prefer utility classes over one-off SCSS rules. Combine them freely — `className='d-flex gap-3 bg-surface-muted rounded-lg p-3'`.
+
+### Primitive Components — Use Before Building
+
+Before creating a custom element, check if an existing primitive fits:
+
+| Need | Primitive | Location |
+|------|-----------|----------|
+| Coloured dot / swatch | `ColorSwatch` | `components/ColorSwatch.tsx` — accepts `color`, `size` (`sm`/`md`/`lg`), `shape` (`square`/`circle`) |
+| Text input | `Input` | `components/base/forms/Input.js` — has `search` prop for built-in search icon |
+| Labelled field (text, textarea) | `InputGroup` | `components/base/forms/InputGroup.js` — has `textarea` prop, `title`, handles label + layout |
+| Icons | `Icon` | `components/icons/Icon.tsx` — project's own icon set. **Never use external icon libraries** (ionicons, etc.) |
+| Confirm dialog | `openConfirm` | `components/base/Modal` — see Confirmation Dialogs section below |
+
+### Inline Styles
+
+Avoid inline `style={}` props. Acceptable exceptions:
+- Flex layout fixes (`minWidth: 0` for overflow prevention)
+- Dynamic values that genuinely vary at runtime (e.g. chart dimensions)
+
+For fixed dimensions (widths, padding), prefer SCSS classes.
+
+## Code Organisation
+
+### Component File Structure
+
+Multi-file components (TSX + SCSS) use a folder structure with a barrel export:
+
+```
+ComponentName/
+├── ComponentName.tsx
+├── ComponentName.scss
+└── index.ts          ← barrel export
+```
+
+Single-file components without their own styles can live as a single `.tsx` next to peers — no folder needed.
+
 ## Storybook (Optional)
 
 When working on complex or unfamiliar components, you can query Storybook MCP (`list-all-documentation`, then `get-documentation`) to discover existing components, their props, and visual examples. This is optional — for simple changes, grepping the codebase is fine.
@@ -70,7 +128,7 @@ Use Bootstrap classes for responsive behavior:
 
 ## Tabs Component
 
-**Location:** `components/base/forms/Tabs.tsx`
+**Location:** `components/navigation/TabMenu/Tabs.tsx`
 
 ### Basic Usage
 
@@ -163,13 +221,10 @@ openConfirm({
 ```
 
 ### Parameters
-- `title: string` - Dialog title
+- `title: ReactNode` - Dialog title
 - `body: ReactNode` - Dialog content (can be JSX)
-- `onYes: (closeModal: () => void) => void` - Callback when user confirms
+- `onYes: () => void` - Callback when user confirms. The modal closes automatically after `onYes` returns.
 - `onNo?: () => void` - Optional callback when user cancels
-- `challenge?: string` - Optional challenge text user must type to confirm
-
-### Key Points
-- The `onYes` callback receives a `closeModal` function
-- Always call `closeModal()` when the action completes successfully
-- Can be async - use `async (closeModal) => { ... }`
+- `yesText?: string` - Label for the confirm button (default "OK")
+- `noText?: string` - Label for the cancel button (default "Cancel")
+- `destructive?: boolean` - Renders the confirm button in danger styling. Use for delete/discard actions.

frontend/common/services/useExperiment.ts

@@ -1,11 +1,23 @@
 import { Res } from 'common/types/responses'
 import { Req } from 'common/types/requests'
 import { service } from 'common/service'
+import Utils from 'common/utils/utils'
+import transformCorePaging from 'common/transformCorePaging'
 
 export const experimentService = service
   .enhanceEndpoints({ addTagTypes: ['Experiment'] })
   .injectEndpoints({
     endpoints: (builder) => ({
+      completeExperiment: builder.mutation<
+        Res['experiment'],
+        Req['experimentAction']
+      >({
+        invalidatesTags: [{ id: 'LIST', type: 'Experiment' }],
+        query: ({ environmentId, experimentId }) => ({
+          method: 'POST',
+          url: `environments/${environmentId}/experiments/${experimentId}/complete/`,
+        }),
+      }),
       createExperiment: builder.mutation<
         Res['experiment'],
         Req['createExperiment']
@@ -17,14 +29,50 @@ export const experimentService = service
           url: `environments/${environmentId}/experiments/`,
         }),
       }),
+      deleteExperiment: builder.mutation<void, Req['deleteExperiment']>({
+        invalidatesTags: [{ id: 'LIST', type: 'Experiment' }],
+        query: ({ environmentId, experimentId }) => ({
+          method: 'DELETE',
+          url: `environments/${environmentId}/experiments/${experimentId}/`,
+        }),
+      }),
       getExperiments: builder.query<Res['experiments'], Req['getExperiments']>({
         providesTags: [{ id: 'LIST', type: 'Experiment' }],
-        query: ({ environmentId }) => ({
-          url: `environments/${environmentId}/experiments/`,
+        query: ({ environmentId, ...rest }) => ({
+          url: `environments/${environmentId}/experiments/?${Utils.toParam(
+            rest,
+          )}`,
+        }),
+        transformResponse: (res, _, req) => transformCorePaging(req, res),
+      }),
+      pauseExperiment: builder.mutation<
+        Res['experiment'],
+        Req['experimentAction']
+      >({
+        invalidatesTags: [{ id: 'LIST', type: 'Experiment' }],
+        query: ({ environmentId, experimentId }) => ({
+          method: 'POST',
+          url: `environments/${environmentId}/experiments/${experimentId}/pause/`,
+        }),
+      }),
+      startExperiment: builder.mutation<
+        Res['experiment'],
+        Req['experimentAction']
+      >({
+        invalidatesTags: [{ id: 'LIST', type: 'Experiment' }],
+        query: ({ environmentId, experimentId }) => ({
+          method: 'POST',
+          url: `environments/${environmentId}/experiments/${experimentId}/start/`,
         }),
       }),
     }),
   })
 
-export const { useCreateExperimentMutation, useGetExperimentsQuery } =
-  experimentService
+export const {
+  useCompleteExperimentMutation,
+  useCreateExperimentMutation,
+  useDeleteExperimentMutation,
+  useGetExperimentsQuery,
+  usePauseExperimentMutation,
+  useStartExperimentMutation,
+} = experimentService

frontend/common/types/requests.ts

@@ -24,6 +24,7 @@ import {
   StageActionType,
   StageActionBody,
   ChangeRequest,
+  ExperimentStatus,
   FlagsmithValue,
   TagStrategy,
 } from './responses'
@@ -984,10 +985,15 @@ export type Req = {
     name?: string
     config?: Record<string, string>
   }
-  getExperiments: { environmentId: string }
+  getExperiments: PagedRequest<{
+    environmentId: string
+    status?: ExperimentStatus
+  }>
   createExperiment: {
     environmentId: string
     body: { name: string; hypothesis: string; feature: number }
   }
+  experimentAction: { environmentId: string; experimentId: number }
+  deleteExperiment: { environmentId: string; experimentId: number }
   // END OF TYPES
 }

frontend/common/types/responses.ts

@@ -579,11 +579,21 @@ export type FeatureType = 'STANDARD' | 'MULTIVARIATE'
 
 export type ExperimentStatus = 'created' | 'running' | 'paused' | 'completed'
 
+export type ExperimentStatusCounts = Record<ExperimentStatus, number>
+
+export type ExperimentFeature = {
+  id: number
+  name: string
+  type: FeatureType
+  initial_value: string | null
+  multivariate_options: MultivariateOption[]
+}
+
 export type Experiment = {
   id: number
   name: string
   hypothesis: string
-  feature: number
+  feature: ExperimentFeature
   status: ExperimentStatus
   created_at: string
   updated_at: string
@@ -1363,7 +1373,11 @@ export type Res = {
   gitlabIssues: PagedResponse<GitLabIssue>
   gitlabMergeRequests: PagedResponse<GitLabMergeRequest>
   warehouseConnections: WarehouseConnection[]
-  experiments: Experiment[]
+  experiments: PagedResponse<Experiment> & {
+    currentPage: number
+    pageSize: number
+    status_counts?: ExperimentStatusCounts
+  }
   experiment: Experiment
   // END OF TYPES
 }

frontend/web/components/base/grid/ContentCard/ContentCard.scss

@@ -13,6 +13,10 @@
     justify-content: space-between;
   }
 
+  .input-container {
+    display: block;
+  }
+
   &__title {
     font-size: var(--font-body-size, 0.875rem);
     font-weight: var(--font-weight-bold, 700);

frontend/web/components/experiments/ExperimentActionDropdown/ExperimentActionDropdown.tsx

@@ -0,0 +1,128 @@
+import { FC, useCallback, useMemo } from 'react'
+import { ExperimentStatus } from 'common/types/responses'
+import {
+  useCompleteExperimentMutation,
+  useDeleteExperimentMutation,
+  usePauseExperimentMutation,
+  useStartExperimentMutation,
+} from 'common/services/useExperiment'
+import DropdownMenu from 'components/base/DropdownMenu'
+
+type ExperimentActionDropdownProps = {
+  experimentId: number
+  experimentName: string
+  status: ExperimentStatus
+  environmentId: string
+}
+
+const ExperimentActionDropdown: FC<ExperimentActionDropdownProps> = ({
+  environmentId,
+  experimentId,
+  experimentName,
+  status,
+}) => {
+  const [startExperiment] = useStartExperimentMutation()
+  const [pauseExperiment] = usePauseExperimentMutation()
+  const [completeExperiment] = useCompleteExperimentMutation()
+  const [deleteExperiment] = useDeleteExperimentMutation()
+
+  const params = useMemo(
+    () => ({ environmentId, experimentId }),
+    [environmentId, experimentId],
+  )
+
+  const handleStart = useCallback(async () => {
+    try {
+      await startExperiment(params).unwrap()
+      toast('Experiment started')
+    } catch {
+      toast('Failed to start experiment', 'danger')
+    }
+  }, [startExperiment, params])
+
+  const handlePause = useCallback(async () => {
+    try {
+      await pauseExperiment(params).unwrap()
+      toast('Experiment paused')
+    } catch {
+      toast('Failed to pause experiment', 'danger')
+    }
+  }, [pauseExperiment, params])
+
+  const handleComplete = useCallback(() => {
+    openConfirm({
+      body: (
+        <span>
+          Are you sure you want to mark <strong>{experimentName}</strong> as
+          completed? This action cannot be undone.
+        </span>
+      ),
+      noText: 'Cancel',
+      onYes: async () => {
+        try {
+          await completeExperiment(params).unwrap()
+          toast('Experiment completed')
+        } catch {
+          toast('Failed to complete experiment', 'danger')
+        }
+      },
+      title: 'Complete experiment?',
+      yesText: 'Complete',
+    })
+  }, [completeExperiment, experimentName, params])
+
+  const handleDelete = useCallback(() => {
+    openConfirm({
+      body: (
+        <span>
+          Are you sure you want to delete <strong>{experimentName}</strong>?
+          This action cannot be undone.
+        </span>
+      ),
+      destructive: true,
+      noText: 'Cancel',
+      onYes: async () => {
+        try {
+          await deleteExperiment(params).unwrap()
+          toast('Experiment deleted')
+        } catch {
+          toast('Failed to delete experiment', 'danger')
+        }
+      },
+      title: 'Delete experiment?',
+      yesText: 'Delete',
+    })
+  }, [deleteExperiment, experimentName, params])
+
+  const items = useMemo(() => {
+    switch (status) {
+      case 'created':
+        return [
+          { label: 'Start Experiment', onClick: handleStart },
+          {
+            className: 'text-danger',
+            label: 'Delete',
+            onClick: handleDelete,
+          },
+        ]
+      case 'running':
+        return [
+          { label: 'Pause Experiment', onClick: handlePause },
+          { label: 'Mark as Completed', onClick: handleComplete },
+        ]
+      case 'paused':
+        return [
+          { label: 'Resume Experiment', onClick: handleStart },
+          { label: 'Mark as Completed', onClick: handleComplete },
+        ]
+      default:
+        return []
+    }
+  }, [status, handleStart, handlePause, handleComplete, handleDelete])
+
+  if (status === 'completed') return null
+
+  return <DropdownMenu items={items} />
+}
+
+export default ExperimentActionDropdown

frontend/web/components/experiments/ExperimentActionDropdown/index.ts

@@ -0,0 +1 @@
+export { default } from './ExperimentActionDropdown'