chore(helm): migrate chart to the all-in-one image

FIRST PASS - renders and lints, but has NOT been installed on a cluster.
See #3898. Needs a real deploy and an upgrade test from 0.2.x before merge.

The chart deployed checkmate-client, checkmate-backend and checkmate-mongo,
none of which CI publishes any more. Chart.yaml pinned appVersion to v3.8.1
with a comment explaining the chart could not be bumped until it moved to the
all-in-one image. This does that move.

Structure. The application image serves the client and the API from one
origin, so the separate client deployment, service, nginx ConfigMap and
ingress are removed and templates/api/ becomes templates/app/. One ingress
now routes / to the app rather than one routing / to nginx and another
routing /api/v1 to the API - which also drops the CORS annotations, since
the browser is same-origin. MongoDB moves to upstream mongo:8.0, matching
docker/docker-compose.yaml.

Environment. UPTIME_APP_API_BASE_URL and UPTIME_APP_CLIENT_HOST are gone;
the server stopped reading them. CLIENT_HOST is derived from the app's own
ingress, and is omitted from `env` when secrets.CLIENT_HOST is set, because
`env` takes precedence over `envFrom` and would otherwise discard the
override silently.

Back-compat. checkmate.app merges any legacy client/api/server block over
the app defaults, so most values files upgrade unedited. client.image and
client.tag are deliberately not inherited - that repo is unpublished, and
honouring it would pin an install to an unpullable image. checkmate.api is
kept as an alias.

Two upgrade cases fail loudly instead of deploying something wrong: a set
client.image, and client/api ingress hosts that differ (one origin cannot
serve both).

Worker is unchanged in shape - still opt-in, still the same image as the
app, still deriving QUEUE_PRIMARY_PROCESSES. It referenced
.Values.client.protocol, which no longer exists; rendering with
worker.enabled=true caught that nil pointer.

Verified with helm lint and helm template across: defaults, worker enabled,
worker plus KEDA autoscaling, each of the three legacy value blocks, the two
new guards, the change_me guard, and the CLIENT_HOST override. No
checkmate-client, checkmate-backend, checkmate-mongo or UPTIME_APP_* strings
remain in rendered output.

Not done: INSTALLATION.md has a new migration section but its body still
documents the two-tier layout in places, and no cluster test has been run.

Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd

charts/helm/checkmate/Chart.yaml

@@ -2,9 +2,5 @@ apiVersion: v2
 name: checkmate-chart
 description: A Helm chart for Checkmate App
 type: application
-version: 0.2.0
-# DO NOT bump appVersion past v3.8.1 until this chart is migrated to the all-in-one
-# image (ghcr.io/bluewave-labs/checkmate). The checkmate-client / checkmate-backend /
-# checkmate-mongo images this chart references are frozen at v3.8.1 — later versions
-# are never published, so a bumped chart will fail to pull.
-appVersion: "v3.8.1" # "v" prefix: published image tags are v-prefixed (ghcr.io/.../checkmate-*:v3.8.1)
+version: 0.3.0
+appVersion: "latest" # the all-in-one image publishes :latest on release tags; pin a version here to freeze

charts/helm/checkmate/INSTALLATION.md

@@ -19,8 +19,8 @@ cd checkmate/charts/helm/checkmate
 
 ### 2. Customize values.yaml
 Edit `values.yaml` to update:
-- `client.ingress.host` and `api.ingress.host` with your domain names
-- `api.protocol` (usually http or https)
+- `app.ingress.host` with your domain name
+- `app.protocol` (usually http or https)
 - **If upgrading**: Migrate persistence settings from flat structure to nested:
   - Old: `persistence.mongodbSize` → New: `persistence.mongo.size`
   - Add: `persistence.mongo.storageClass` (leave empty for default)
@@ -95,7 +95,7 @@ chart. You can still pin per tier:
 
 ```yaml
 api:
-  image: ghcr.io/bluewave-labs/checkmate-backend   # repo only
+  image: ghcr.io/bluewave-labs/checkmate   # repo only
   tag: ""            # empty → Chart.appVersion; set e.g. "v3.1.0" to pin, or "latest" for a dev tag
 ```
 
@@ -244,3 +244,41 @@ kubectl get secrets | grep checkmate-tls
 ```
 
 The ingress will automatically use these secrets to enable HTTPS access to your Checkmate instance.
+
+## Upgrading to chart 0.3.0 (all-in-one image)
+
+Checkmate now ships as a single image that serves both the client and the API, so
+the chart deploys one workload and one ingress instead of two.
+
+**What changed**
+
+| 0.2.x | 0.3.0 |
+|---|---|
+| `client.*` + `api.*` value blocks | one `app.*` block |
+| `checkmate-client` + `checkmate-backend` images | `ghcr.io/bluewave-labs/checkmate` |
+| `ghcr.io/bluewave-labs/checkmate-mongo` | upstream `mongo:8.0` |
+| Deployment `checkmate-api` + `checkmate-client` | Deployment `checkmate` |
+| Ingress `checkmate-api-ingress` (`/api/v1`) + client ingress (`/`) | Ingress `checkmate-ingress` (`/`) |
+| `UPTIME_APP_API_BASE_URL`, `UPTIME_APP_CLIENT_HOST` | not set — the client is same-origin |
+
+`appVersion` is no longer frozen at v3.8.1; the chart tracks the published image again.
+
+**Upgrading an existing install**
+
+Existing `client.*`, `api.*` and `server.*` overrides are still read and merged over
+the `app.*` defaults, so most values files upgrade without edits. Two cases fail
+deliberately rather than deploying something wrong:
+
+- `client.image` set — that image is no longer published, so the chart stops instead
+  of leaving you with an ImagePullBackOff. Remove the `client:` block.
+- `client.ingress.host` and `api.ingress.host` set to *different* hosts — one origin
+  now serves both, so the chart cannot honour a split. Set a single `app.ingress.host`.
+
+Migrate overrides to `app.*` when convenient; the legacy blocks are transitional.
+
+**One ingress, one host**
+
+If you previously served the client and API on separate hostnames, external clients
+now use the single `app.ingress.host`. Update any bookmarks, uptime checks, or DNS
+records that pointed at the old API hostname.
+

charts/helm/checkmate/templates/_helpers.tpl

@@ -1,18 +1,41 @@
 {{- /*
-Back-compat shim: the `server.*` value block was renamed to `api.*`. Existing installs that
-still pass a legacy `server:` block keep working — this returns the effective API values with any
-legacy `server.*` overrides merged on top of the `api.*` defaults (legacy wins where set).
+Back-compat shim for the all-in-one image migration.
 
-New installs have no `server:` key, so this is a no-op deepCopy of `.Values.api`. Consume it as:
-  {{- $api := include "checkmate.api" . | fromYaml -}}
-then reference `$api.*` instead of `.Values.api.*`.
+Chart 0.2.x deployed a separate client and API, configured through `client.*` and
+`api.*` (and, before that, `server.*`). Checkmate now ships one image that serves
+both, so those collapse into a single `app.*` block.
+
+Existing installs keep working: any legacy block is merged over the `app.*`
+defaults, in the order client -> api -> server, so a value set in an older block
+still wins. Only `image`/`tag` are deliberately NOT inherited from `client.*` —
+that repo (checkmate-client) is no longer published, so honouring it would pin an
+install to an image that cannot be pulled.
+
+New installs have no legacy keys and this is a no-op deepCopy of `.Values.app`.
+Consume it as:
+  {{- $app := include "checkmate.app" . | fromYaml -}}
+*/}}
+{{- define "checkmate.app" -}}
+{{- $app := deepCopy .Values.app -}}
+{{- with .Values.client -}}
+{{- $legacy := omit (deepCopy .) "image" "tag" "port" -}}
+{{- $app = mergeOverwrite $app $legacy -}}
+{{- end -}}
+{{- with .Values.api -}}
+{{- $app = mergeOverwrite $app (deepCopy .) -}}
+{{- end -}}
+{{- with .Values.server -}}
+{{- $app = mergeOverwrite $app (deepCopy .) -}}
+{{- end -}}
+{{- $app | toYaml -}}
+{{- end -}}
+
+{{- /*
+Deprecated alias kept so any out-of-tree template referencing `checkmate.api`
+still resolves. Prefer `checkmate.app`.
 */}}
 {{- define "checkmate.api" -}}
-{{- $api := deepCopy .Values.api -}}
-{{- with .Values.server -}}
-{{- $api = mergeOverwrite $api (deepCopy .) -}}
-{{- end -}}
-{{- $api | toYaml -}}
+{{- include "checkmate.app" . -}}
 {{- end -}}
 
 {{- /*

charts/helm/checkmate/templates/api/deployment.yaml

@@ -1,65 +0,0 @@
-{{- $api := include "checkmate.api" . | fromYaml -}}
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: checkmate-api
-spec:
-  replicas: 1 # single scheduler — seeds/reconciles the jobs collection
-  selector:
-    matchLabels:
-      app: checkmate-api
-  template:
-    metadata:
-      labels:
-        app: checkmate-api
-    spec:
-    {{- with $api.affinity }}
-      affinity:
-        {{- tpl ( . | toYaml) $ | nindent 8 }}
-    {{- end }}
-    {{- with $api.tolerations }}
-      tolerations:
-        {{- tpl ( . | toYaml) $ | nindent 8 }}
-    {{- end }}
-      containers:
-        - name: api
-          image: {{ include "checkmate.image" (dict "image" $api.image "tag" $api.tag "root" $) }}
-          imagePullPolicy: {{ $api.imagePullPolicy }}
-          ports:
-            - name: http
-              containerPort: {{ $api.port }}
-          envFrom:
-            - secretRef:
-                name: checkmate-secrets
-          # Probes hit the Express /api/v1/health endpoint — proves the HTTP server is responsive.
-          # NOTE: this does NOT detect a wedged job loop when queuePrimaryProcesses=true (the API is
-          # also a worker). Worker-aware health for that mode is a follow-up — see worker-health-checks.md §7.5.
-          livenessProbe:
-            httpGet:
-              path: /api/v1/health
-              port: http
-            initialDelaySeconds: {{ $api.probes.liveness.initialDelaySeconds }}
-            periodSeconds: {{ $api.probes.liveness.periodSeconds }}
-            timeoutSeconds: {{ $api.probes.liveness.timeoutSeconds }}
-            failureThreshold: {{ $api.probes.liveness.failureThreshold }}
-          readinessProbe:
-            httpGet:
-              path: /api/v1/health
-              port: http
-            initialDelaySeconds: {{ $api.probes.readiness.initialDelaySeconds }}
-            periodSeconds: {{ $api.probes.readiness.periodSeconds }}
-            timeoutSeconds: {{ $api.probes.readiness.timeoutSeconds }}
-            failureThreshold: {{ $api.probes.readiness.failureThreshold }}
-          {{- with $api.resources }}
-          resources:
-              {{- tpl ( . | toYaml) $ | nindent 12 }}
-          {{- end }}
-          env:
-          - name: CLIENT_HOST
-            value: "{{ .Values.client.protocol }}://{{ .Values.client.ingress.host }}"
-          - name: QUEUE_MODE
-            value: "primary"
-          # Derived: when a worker tier is deployed the API only schedules (false); otherwise it is
-          # all-in-one and processes jobs itself (true). Keeps the two from ever competing for jobs.
-          - name: QUEUE_PRIMARY_PROCESSES
-            value: {{ not .Values.worker.enabled | quote }}

charts/helm/checkmate/templates/api/ingress.yaml

@@ -1,39 +0,0 @@
-{{- $api := include "checkmate.api" . | fromYaml -}}
-{{- if $api.ingress.enabled }}
-apiVersion: networking.k8s.io/v1
-kind: Ingress
-metadata:
-  name: checkmate-api-ingress
-  {{- if $api.ingress.annotations }}
-  annotations:
-    {{- range $key, $value := $api.ingress.annotations }}
-    {{ $key }}: {{ $value | quote }}
-    {{- end }}
-  {{- end }}
-  {{/*#annotations:
-    #nginx.ingress.kubernetes.io/rewrite-target: /
-    #nginx.ingress.kubernetes.io/enable-cors: "true"
-    #nginx.ingress.kubernetes.io/cors-allow-origin: "http://{{ .Values.client.ingress.host }},https://{{ .Values.client.ingress.host }}"
-    #nginx.ingress.kubernetes.io/cors-allow-methods: "GET, PUT, POST, DELETE, PATCH, OPTIONS"
-    #nginx.ingress.kubernetes.io/cors-allow-headers: "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization"
-    #nginx.ingress.kubernetes.io/cors-allow-credentials: "true"*/}}
-spec:
-  ingressClassName: {{ $api.ingress.className }}
-  {{- if $api.ingress.tls.enabled }}
-  tls:
-    - hosts:
-        - {{ $api.ingress.host }}
-      secretName: {{ default (printf "%s-api-tls" .Release.Name) $api.ingress.tls.secretName }}
-  {{- end }}
-  rules:
-    - host: {{ $api.ingress.host }}
-      http:
-        paths:
-          - path: /api/v1
-            pathType: Prefix
-            backend:
-              service:
-                name: checkmate-api
-                port:
-                  number: {{ $api.port }}
-{{- end }}

charts/helm/checkmate/templates/api/service.yaml

@@ -1,10 +0,0 @@
-{{- $api := include "checkmate.api" . | fromYaml -}}
-apiVersion: v1
-kind: Service
-metadata:
-  name: checkmate-api
-spec:
-  selector:
-    app: checkmate-api
-  ports:
-    - port: {{ $api.port }}

charts/helm/checkmate/templates/app/deployment.yaml

@@ -0,0 +1,71 @@
+{{- $app := include "checkmate.app" . | fromYaml -}}
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: checkmate
+spec:
+  replicas: 1 # single scheduler — seeds/reconciles the jobs collection
+  selector:
+    matchLabels:
+      app: checkmate
+  template:
+    metadata:
+      labels:
+        app: checkmate
+    spec:
+    {{- with $app.affinity }}
+      affinity:
+        {{- tpl ( . | toYaml) $ | nindent 8 }}
+    {{- end }}
+    {{- with $app.tolerations }}
+      tolerations:
+        {{- tpl ( . | toYaml) $ | nindent 8 }}
+    {{- end }}
+      containers:
+        - name: checkmate
+          image: {{ include "checkmate.image" (dict "image" $app.image "tag" $app.tag "root" $) }}
+          imagePullPolicy: {{ $app.imagePullPolicy }}
+          ports:
+            - name: http
+              containerPort: {{ $app.port }}
+          envFrom:
+            - secretRef:
+                name: checkmate-secrets
+          # Probes hit the Express /api/v1/health endpoint — proves the HTTP server is responsive.
+          # NOTE: this does NOT detect a wedged job loop when queuePrimaryProcesses=true (the app is
+          # also a worker). Worker-aware health for that mode is a follow-up — see worker-health-checks.md §7.5.
+          livenessProbe:
+            httpGet:
+              path: /api/v1/health
+              port: http
+            initialDelaySeconds: {{ $app.probes.liveness.initialDelaySeconds }}
+            periodSeconds: {{ $app.probes.liveness.periodSeconds }}
+            timeoutSeconds: {{ $app.probes.liveness.timeoutSeconds }}
+            failureThreshold: {{ $app.probes.liveness.failureThreshold }}
+          readinessProbe:
+            httpGet:
+              path: /api/v1/health
+              port: http
+            initialDelaySeconds: {{ $app.probes.readiness.initialDelaySeconds }}
+            periodSeconds: {{ $app.probes.readiness.periodSeconds }}
+            timeoutSeconds: {{ $app.probes.readiness.timeoutSeconds }}
+            failureThreshold: {{ $app.probes.readiness.failureThreshold }}
+          {{- with $app.resources }}
+          resources:
+              {{- tpl ( . | toYaml) $ | nindent 12 }}
+          {{- end }}
+          env:
+          # The client is served from this same origin, so CLIENT_HOST defaults to
+          # the app's own ingress URL. `env` takes precedence over `envFrom`, so an
+          # explicit secrets.CLIENT_HOST is honoured by omitting this entry rather
+          # than emitting a value that would silently win over it.
+          {{- if not (hasKey .Values.secrets "CLIENT_HOST") }}
+          - name: CLIENT_HOST
+            value: "{{ $app.protocol }}://{{ $app.ingress.host }}"
+          {{- end }}
+          - name: QUEUE_MODE
+            value: "primary"
+          # Derived: when a worker tier is deployed the app only schedules (false); otherwise it is
+          # all-in-one and processes jobs itself (true). Keeps the two from ever competing for jobs.
+          - name: QUEUE_PRIMARY_PROCESSES
+            value: {{ not .Values.worker.enabled | quote }}

charts/helm/checkmate/templates/app/ingress.yaml

@@ -0,0 +1,35 @@
+{{- $app := include "checkmate.app" . | fromYaml -}}
+{{- if $app.ingress.enabled }}
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: checkmate-ingress
+  {{- if $app.ingress.annotations }}
+  annotations:
+    {{- range $key, $value := $app.ingress.annotations }}
+    {{ $key }}: {{ $value | quote }}
+    {{- end }}
+  {{- end }}
+spec:
+  ingressClassName: {{ $app.ingress.className }}
+  {{- if $app.ingress.tls.enabled }}
+  tls:
+    - hosts:
+        - {{ $app.ingress.host }}
+      secretName: {{ default (printf "%s-tls" .Release.Name) $app.ingress.tls.secretName }}
+  {{- end }}
+  rules:
+    - host: {{ $app.ingress.host }}
+      http:
+        paths:
+          # The application serves both the client and /api/v1 from one origin, so
+          # a single root rule replaces the separate client and API ingresses. No
+          # CORS annotations are needed now that the browser is same-origin.
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: checkmate
+                port:
+                  number: {{ $app.port }}
+{{- end }}

charts/helm/checkmate/templates/app/service.yaml

@@ -0,0 +1,10 @@
+{{- $app := include "checkmate.app" . | fromYaml -}}
+apiVersion: v1
+kind: Service
+metadata:
+  name: checkmate
+spec:
+  selector:
+    app: checkmate
+  ports:
+    - port: {{ $app.port }}

charts/helm/checkmate/templates/client/deployment.yaml

@@ -1,46 +0,0 @@
-{{- $api := include "checkmate.api" . | fromYaml -}}
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: checkmate-client
-spec:
-  replicas: 1
-  selector:
-    matchLabels:
-      app: checkmate-client
-  template:
-    metadata:
-      labels:
-        app: checkmate-client
-    spec:
-    {{- with .Values.client.affinity }}
-      affinity:
-        {{- tpl ( . | toYaml) $ | nindent 8 }}
-    {{- end }}
-    {{- with .Values.client.tolerations }}
-      tolerations:
-        {{- tpl ( . | toYaml) $ | nindent 8 }}
-    {{- end }}
-      containers:
-        - name: client
-          image: {{ include "checkmate.image" (dict "image" .Values.client.image "tag" .Values.client.tag "root" $) }}
-          imagePullPolicy: {{ .Values.client.imagePullPolicy }}
-          ports:
-            - containerPort: {{ .Values.client.port }}
-          env:
-            - name: UPTIME_APP_API_BASE_URL
-              value: "{{ $api.protocol }}://{{ $api.ingress.host }}/api/v1"
-            - name: UPTIME_APP_CLIENT_HOST
-              value: "{{ .Values.client.protocol }}://{{ .Values.client.ingress.host }}"
-          volumeMounts:
-            - name: config-volume
-              mountPath: /etc/nginx/conf.d/default.conf
-              subPath: default.conf
-          {{- with .Values.client.resources }}
-          resources:
-              {{- tpl ( . | toYaml) $ | nindent 12 }}
-          {{- end }}
-      volumes:
-        - name: config-volume
-          configMap:
-            name: checkmate-client-nginx-cm

charts/helm/checkmate/templates/client/ingress.yaml

@@ -1,31 +0,0 @@
-{{- if .Values.client.ingress.enabled }}
-apiVersion: networking.k8s.io/v1
-kind: Ingress
-metadata:
-  name: checkmate-client-ingress
-  {{- if .Values.client.ingress.annotations }}
-  annotations:
-    {{- range $key, $value := .Values.client.ingress.annotations }}
-    {{ $key }}: {{ $value | quote }}
-    {{- end }}
-  {{- end }}
-spec:
-  ingressClassName: {{ .Values.client.ingress.className }}
-  {{- if .Values.client.ingress.tls.enabled }}
-  tls:
-    - hosts:
-        - {{ .Values.client.ingress.host }}
-      secretName: {{ default (printf "%s-client-tls" .Release.Name) .Values.client.ingress.tls.secretName }}
-  {{- end }}
-  rules:
-    - host: {{ .Values.client.ingress.host }}
-      http:
-        paths:
-          - path: /
-            pathType: Prefix
-            backend:
-              service:
-                name: checkmate-client
-                port:
-                  number: {{ .Values.client.port }}
-{{- end }}

charts/helm/checkmate/templates/client/nginx-cm.yaml

@@ -1,42 +0,0 @@
-{{- $api := include "checkmate.api" . | fromYaml -}}
-apiVersion: v1
-kind: ConfigMap
-metadata:
-  name: checkmate-client-nginx-cm
-data:
-  default.conf: |
-    server {
-      listen       80;
-      listen  [::]:80;
-
-      server_name checkmate-demo.bluewavelabs.ca;
-      server_tokens off;
-
-      location /.well-known/acme-challenge/ {
-          root /var/www/certbot;
-      }
-
-      location / {
-          root   /usr/share/nginx/html;
-          index  index.html index.htm;
-          try_files $uri $uri/ /index.html;
-      }
-
-      # location /api/ {
-      #     proxy_pass http://{{ $api.ingress.host }}:5000/api/;
-      #     proxy_http_version 1.1;
-      #     proxy_set_header Host $host;
-      #     proxy_set_header X-Real-IP $remote_addr;
-      #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-      #     proxy_set_header X-Forwarded-Proto $scheme;
-      # }
-
-      location /api-docs/ {
-          proxy_pass http://{{ $api.ingress.host }}:5000/api-docs/;
-          proxy_http_version 1.1;
-          proxy_set_header Host $host;
-          proxy_set_header X-Real-IP $remote_addr;
-          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-          proxy_set_header X-Forwarded-Proto $scheme;
-      }
-    }

charts/helm/checkmate/templates/client/service.yaml

@@ -1,9 +0,0 @@
-apiVersion: v1
-kind: Service
-metadata:
-  name: checkmate-client
-spec:
-  selector:
-    app: checkmate-client
-  ports:
-    - port: {{ .Values.client.port }}

charts/helm/checkmate/templates/prechecks.yaml

@@ -1,49 +1,45 @@
-{{- $api := include "checkmate.api" . | fromYaml -}}
-{{- if eq .Values.client.ingress.host "change_me" }}
-  {{- fail "client.ingress.host must be overridden and not set to 'change_me'" }}
+{{- $app := include "checkmate.app" . | fromYaml -}}
+{{- if eq $app.ingress.host "change_me" }}
+  {{- fail "app.ingress.host must be overridden and not set to 'change_me'" }}
 {{- end }}
 
-{{- if eq $api.ingress.host "change_me" }}
-  {{- fail "api.ingress.host (or legacy server.ingress.host) must be overridden and not set to 'change_me'" }}
-{{- end }}
-
-{{- $apiProtocol := $api.protocol }}
-{{- if not (or (eq $apiProtocol "http") (eq $apiProtocol "https")) }}
-  {{- fail "api.protocol must be either 'http' or 'https'" }}
-{{- end }}
-
-{{- $clientProtocol := .Values.client.protocol }}
-{{- if not (or (eq $clientProtocol "http") (eq $clientProtocol "https")) }}
-  {{- fail "client.protocol must be either 'http' or 'https'" }}
+{{- $protocol := $app.protocol }}
+{{- if not (or (eq $protocol "http") (eq $protocol "https")) }}
+  {{- fail "app.protocol must be either 'http' or 'https'" }}
 {{- end }}
 
 {{/* Enforce protocol when TLS is enabled to avoid mixed-content */}}
-{{- if and .Values.client.ingress.tls.enabled (ne $clientProtocol "https") }}
-  {{- fail "client.ingress.tls.enabled is true but client.protocol is not 'https'. Set client.protocol: https to avoid mixed content." }}
-{{- end }}
-
-{{- if and $api.ingress.tls.enabled (ne $apiProtocol "https") }}
-  {{- fail "api.ingress.tls.enabled is true but api.protocol is not 'https'. Set api.protocol: https to ensure correct API base URL." }}
-{{- end }}
-
-{{/* If client runs on https, API must also be https to avoid mixed content */}}
-{{- if and (eq $clientProtocol "https") (ne $apiProtocol "https") }}
-  {{- fail "client.protocol is 'https' but api.protocol is not. Set api.protocol: https to prevent browser mixed-content issues." }}
+{{- if and $app.ingress.tls.enabled (ne $protocol "https") }}
+  {{- fail "app.ingress.tls.enabled is true but app.protocol is not 'https'. Set app.protocol: https to avoid mixed content." }}
 {{- end }}
 
 {{/* Fail early if TLS enabled without cert-manager annotations (cluster-issuer or issuer) */}}
-{{- $cAnn := .Values.client.ingress.annotations | default dict }}
-{{- $aAnn := $api.ingress.annotations | default dict }}
+{{- $ann := $app.ingress.annotations | default dict }}
+{{- $hasIssuer := or (hasKey $ann "cert-manager.io/cluster-issuer") (hasKey $ann "cert-manager.io/issuer") }}
 
-{{- $clientHasIssuer := or (hasKey $cAnn "cert-manager.io/cluster-issuer") (hasKey $cAnn "cert-manager.io/issuer") }}
-{{- $apiHasIssuer := or (hasKey $aAnn "cert-manager.io/cluster-issuer") (hasKey $aAnn "cert-manager.io/issuer") }}
-
-{{- if and .Values.client.ingress.tls.enabled (not $clientHasIssuer) }}
-  {{- fail "client.ingress.tls.enabled is true but no cert-manager issuer annotation found. Add 'cert-manager.io/cluster-issuer' or 'cert-manager.io/issuer'." }}
+{{- if and $app.ingress.tls.enabled (not $hasIssuer) }}
+  {{- fail "app.ingress.tls.enabled is true but no cert-manager issuer annotation found. Add 'cert-manager.io/cluster-issuer' or 'cert-manager.io/issuer'." }}
 {{- end }}
 
-{{- if and $api.ingress.tls.enabled (not $apiHasIssuer) }}
-  {{- fail "api.ingress.tls.enabled is true but no cert-manager issuer annotation found. Add 'cert-manager.io/cluster-issuer' or 'cert-manager.io/issuer'." }}
+{{/*
+  Upgrade guard. The client and API are one service now, so a values file that still
+  points the two at different hosts cannot be honoured — fail loudly rather than
+  silently dropping one of them.
+*/}}
+{{- if and .Values.client .Values.api }}
+{{- $clientHost := (.Values.client.ingress | default dict).host }}
+{{- $apiHost := (.Values.api.ingress | default dict).host }}
+{{- if and $clientHost $apiHost (ne $clientHost $apiHost) }}
+  {{- fail (printf "client.ingress.host (%s) and api.ingress.host (%s) differ, but Checkmate now serves the client and the API from one origin. Set a single app.ingress.host instead." $clientHost $apiHost) }}
+{{- end }}
+{{- end }}
+
+{{/*
+  The client image is no longer published. Point this out rather than letting the
+  install fail later on an ImagePullBackOff nobody can action.
+*/}}
+{{- if and .Values.client .Values.client.image }}
+  {{- fail "client.image is set, but the separate client image is no longer published. Remove the client block; the application image in app.image now serves the client." }}
 {{- end }}
 
 {{/* Worker grace period must exceed the server drain timeout (25s) or workers are SIGKILLed mid-drain */}}
@@ -51,4 +47,4 @@
   {{- fail "worker.terminationGracePeriodSeconds must be greater than 25 (the server drain timeout) or workers are killed mid-drain" }}
 {{- end }}
 
-{{/* Secret name can be omitted; we default to <release>-client|api-tls in templates */}}
+{{/* Secret name can be omitted; we default to <release>-tls in templates */}}

charts/helm/checkmate/templates/worker/deployment.yaml

@@ -1,4 +1,4 @@
-{{- $api := include "checkmate.api" . | fromYaml -}}
+{{- $app := include "checkmate.app" . | fromYaml -}}
 {{- if .Values.worker.enabled }}
 apiVersion: apps/v1
 kind: Deployment
@@ -27,8 +27,8 @@ spec:
     {{- end }}
       containers:
         - name: worker
-          image: {{ include "checkmate.image" (dict "image" (.Values.worker.image | default $api.image) "tag" (.Values.worker.tag | default $api.tag) "root" $) }}
-          imagePullPolicy: {{ .Values.worker.imagePullPolicy | default $api.imagePullPolicy }}
+          image: {{ include "checkmate.image" (dict "image" (.Values.worker.image | default $app.image) "tag" (.Values.worker.tag | default $app.tag) "root" $) }}
+          imagePullPolicy: {{ .Values.worker.imagePullPolicy | default $app.imagePullPolicy }}
           ports:
             - name: health
               containerPort: {{ .Values.worker.healthPort }}
@@ -36,9 +36,13 @@ spec:
             - secretRef:
                 name: checkmate-secrets # DB_CONNECTION_STRING (+ JWT_SECRET/CLIENT_HOST for validateEnv)
           env:
-          # Secret default CLIENT_HOST is the non-URL "change_me"; override like the API so validateEnv passes.
+          # validateEnv requires a URL-shaped CLIENT_HOST, so mirror the app's default
+          # here. Omitted when secrets.CLIENT_HOST is set, since `env` would otherwise
+          # take precedence over the envFrom value and silently discard the override.
+          {{- if not (hasKey .Values.secrets "CLIENT_HOST") }}
           - name: CLIENT_HOST
-            value: "{{ .Values.client.protocol }}://{{ .Values.client.ingress.host }}"
+            value: "{{ $app.protocol }}://{{ $app.ingress.host }}"
+          {{- end }}
           - name: QUEUE_MODE
             value: "worker"
           - name: HEALTH_PORT

charts/helm/checkmate/values.yaml

@@ -1,31 +1,17 @@
-client:
-  image: ghcr.io/bluewave-labs/checkmate-client
-  tag: "" # defaults to Chart.appVersion; set a full repo:tag in `image` to pin (e.g. a :latest dev tag)
-  imagePullPolicy: IfNotPresent # IfNotPresent so kind-loaded :latest images are used (not pulled)
-  port: 80
-  protocol: http
-  ingress:
-    enabled: true
-    host: change_me
-    className: nginx
-    annotations: {}
-    # Example annotations for cert-manager:
-    # annotations:
-    #   cert-manager.io/cluster-issuer: "letsencrypt-prod"
-    tls:
-      enabled: false
-      # secretName: {{ .Release.Name }}-client-tls  # Optional; defaults to <release>-client-tls if omitted
-      # Note: when enabling TLS, also set client.protocol: https and add
-      # a cert-manager issuer annotation (e.g. cert-manager.io/cluster-issuer: "letsencrypt-prod").
-      # The secret will be automatically created by cert-manager when using the cert-manager.io/cluster-issuer annotation
-
-api:
-  image: ghcr.io/bluewave-labs/checkmate-backend
+# Checkmate is published as a single all-in-one application image: the API server
+# also serves the React client, so one deployment and one ingress cover both.
+# The `client:` and `api:` blocks from chart 0.2.x are still read for back-compat
+# (see templates/_helpers.tpl) — `app.*` is the block to set on new installs.
+app:
+  image: ghcr.io/bluewave-labs/checkmate
   tag: "" # defaults to Chart.appVersion; set a full repo:tag in `image` to pin (e.g. a :latest dev tag)
   imagePullPolicy: IfNotPresent # IfNotPresent so kind-loaded :latest images are used (not pulled)
   port: 52345
   protocol: http
-  # Liveness/readiness probes hit GET /api/v1/health on the api port (proves the HTTP server is up).
+  resources: {}
+  affinity: {}
+  tolerations: {}
+  # Liveness/readiness probes hit GET /api/v1/health on the app port (proves the HTTP server is up).
   probes:
     liveness:
       initialDelaySeconds: 10
@@ -47,25 +33,27 @@ api:
     #   cert-manager.io/cluster-issuer: "letsencrypt-prod"
     tls:
       enabled: false
-      # secretName: {{ .Release.Name }}-api-tls  # Optional; defaults to <release>-api-tls if omitted
-      # Note: when enabling TLS, also set api.protocol: https and add
+      # secretName: {{ .Release.Name }}-tls  # Optional; defaults to <release>-tls if omitted
+      # Note: when enabling TLS, also set app.protocol: https and add
       # a cert-manager issuer annotation (e.g. cert-manager.io/cluster-issuer: "letsencrypt-prod").
       # The secret will be automatically created by cert-manager when using the cert-manager.io/cluster-issuer annotation
 
+# Upstream MongoDB. The former ghcr.io/bluewave-labs/checkmate-mongo image is no
+# longer published; this matches the mongo version in docker/docker-compose.yaml.
 mongodb:
-  image: ghcr.io/bluewave-labs/checkmate-mongo
-  tag: "" # defaults to Chart.appVersion; set a full repo:tag in `image` to pin
-  imagePullPolicy: IfNotPresent # IfNotPresent so kind-loaded :latest images are used (not pulled)
+  image: mongo
+  tag: "8.0"
+  imagePullPolicy: IfNotPresent
   port: 27017
 
 worker:
   # Off by default; existing installs are unchanged. When true, a dedicated worker processes all
-  # jobs and the API stops processing (QUEUE_PRIMARY_PROCESSES is derived as false). When false, the
-  # API is all-in-one and processes jobs itself.
+  # jobs and the app stops processing (QUEUE_PRIMARY_PROCESSES is derived as false). When false, the
+  # app is all-in-one and processes jobs itself.
   enabled: false
-  image: "" # defaults to api.image when empty, same as API image
-  tag: "" # defaults to api.tag (-> Chart.appVersion) when empty
-  imagePullPolicy: "" # defaults to api.imagePullPolicy when empty
+  image: "" # defaults to app.image when empty, same as the application image
+  tag: "" # defaults to app.tag (-> Chart.appVersion) when empty
+  imagePullPolicy: "" # defaults to app.imagePullPolicy when empty
   replicas: 1 # used only when autoscaling.enabled = false
   healthPort: 52346 # HEALTH_PORT; serves /livez /readyz /metrics
   terminationGracePeriodSeconds: 30 # MUST stay > the server drain timeout (25s) or workers are killed mid-drain
@@ -97,7 +85,8 @@ worker:
 secrets:
   JWT_SECRET: change_me
   DB_CONNECTION_STRING: mongodb://checkmate-mongodb:27017/uptime_db
-  CLIENT_HOST: change_me
+  # CLIENT_HOST is derived from app.protocol + app.ingress.host by the deployment;
+  # set it here only to override that (e.g. when fronting the app with another proxy).
   NODE_ENV: production
   LOG_LEVEL: info
   TOKEN_TTL: 99d

client/src/Components/monitors/MonitorListPage.tsx

@@ -0,0 +1,156 @@
+import { HeaderCreate } from "@/Components/common";
+import { ColoredLabel, MonitorBasePageWithStates } from "@/Components/design-elements";
+import { BulkActionsBar } from "@/Components/monitors/BulkActionsBar";
+import { ControlsFilter } from "@/Components/monitors/ControlsFilter";
+import { HeaderMonitorsSummary } from "@/Components/monitors/HeaderMonitorsSummary";
+import { useIsAdmin } from "@/Hooks/useIsAdmin";
+import type { MonitorListController } from "@/Hooks/useMonitorListController";
+import { useMediaQuery, useTheme } from "@mui/material";
+import { SPACING } from "@/Utils/Theme/constants";
+
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { TextField, Button, Dialog } from "@/Components/inputs";
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Pause, Play } from "lucide-react";
+
+interface MonitorListPageProps {
+	headerKey: string;
+	page: string;
+	actionLink: string;
+	controller: MonitorListController;
+	bulkActions?: boolean;
+	showTypeFilter?: boolean;
+	summaryProps?: { showBreached?: boolean };
+	priorityFallback?: ReactNode;
+	extraLoading?: boolean;
+	extraError?: unknown;
+	children: ReactNode;
+}
+
+// Base monitor list page, all monitors pages are nearly identical, but with different tables.
+
+export const MonitorListPage = ({
+	headerKey,
+	page,
+	actionLink,
+	controller: c,
+	bulkActions,
+	showTypeFilter,
+	summaryProps,
+	priorityFallback,
+	extraLoading,
+	extraError,
+	children,
+}: MonitorListPageProps) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+	const isAdmin = useIsAdmin();
+	const isLoading = c.isLoading || Boolean(extraLoading);
+
+	return (
+		<MonitorBasePageWithStates
+			headerKey={headerKey}
+			loading={isLoading}
+			error={c.error || extraError}
+			totalCount={c.effectiveTotalCount}
+			page={page}
+			actionLink={actionLink}
+			priorityFallback={priorityFallback}
+		>
+			<HeaderCreate
+				path={actionLink}
+				isLoading={isLoading}
+				isAdmin={isAdmin}
+			/>
+			<HeaderMonitorsSummary
+				summary={c.summary}
+				{...summaryProps}
+			/>
+			<Stack
+				direction={isSmall ? "column" : "row"}
+				justifyContent={isSmall ? "flex-start" : "space-between"}
+				gap={theme.spacing(4)}
+			>
+				<ControlsFilter
+					{...(showTypeFilter === false
+						? { showTypes: false }
+						: {
+								selectedTypes: c.selectedTypes,
+								setSelectedTypes: c.setSelectedTypes,
+							})}
+					selectedStatus={c.selectedStatus}
+					setSelectedStatus={c.setSelectedStatus}
+					selectedState={c.selectedState}
+					setSelectedState={c.setSelectedState}
+					tagOptions={c.tags ?? []}
+					selectedTags={c.selectedTags}
+					setSelectedTags={c.setSelectedTags}
+					onClearFilters={c.handleClearFilters}
+				/>
+				<TextField
+					placeholder={t("pages.uptime.filters.search.placeholder")}
+					value={c.search}
+					onChange={(event) => {
+						c.setSearch(event.target.value);
+					}}
+				/>
+			</Stack>
+			{c.selectedTags.length > 0 && (
+				<Stack
+					direction={isSmall ? "column" : "row"}
+					alignItems={isSmall ? "flex-start" : "center"}
+					flexWrap="wrap"
+					gap={theme.spacing(SPACING.XL)}
+				>
+					<Typography color={theme.palette.text.secondary}>
+						{t("pages.uptime.filters.activeTags")}
+					</Typography>
+					{c.selectedTags.map((tagId) => {
+						const tag = c.tags?.find((t) => t.id === tagId);
+						if (!tag) return null;
+						return (
+							<ColoredLabel
+								key={tag.id}
+								text={tag.name}
+								color={tag.color}
+							/>
+						);
+					})}
+				</Stack>
+			)}
+			{bulkActions && !isLoading && (
+				<BulkActionsBar
+					selectedCount={c.selectedRows.length}
+					onCancel={c.handleCancelSelection}
+				>
+					<Button
+						size="small"
+						startIcon={<Play size={16} />}
+						onClick={c.handleBulkResume}
+					>
+						{t("common.buttons.resume")}
+					</Button>
+					<Button
+						size="small"
+						startIcon={<Pause size={16} />}
+						onClick={c.handleBulkPause}
+					>
+						{t("common.buttons.pause")}
+					</Button>
+				</BulkActionsBar>
+			)}
+			{children}
+			<Dialog
+				open={c.isDialogOpen}
+				title={t("common.dialogs.delete.title")}
+				content={t("common.dialogs.delete.description")}
+				onConfirm={c.handleConfirmDelete}
+				onCancel={c.handleCancelDelete}
+				loading={c.isDeleting}
+			/>
+		</MonitorBasePageWithStates>
+	);
+};

client/src/Components/monitors/index.tsx

@@ -15,3 +15,4 @@ export * from "./charts/HistogramPageSpeedDetailsTooltip";
 export * from "./charts/HistogramInfrastructure";
 export * from "./HeaderMonitorsSummary";
 export * from "./BulkActionsBar";
+export * from "./MonitorListPage";

client/src/Features/UI/uiSlice.ts

@@ -2,7 +2,13 @@ import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
 
 type ThemeMode = "light" | "dark";
 type ChartType = "histogram" | "line";
-type TableName = "monitors" | "team" | "maintenance" | "infrastructure" | "logs";
+type TableName =
+	| "monitors"
+	| "team"
+	| "maintenance"
+	| "infrastructure"
+	| "logs"
+	| "pagespeed";
 
 interface TableState {
 	rowsPerPage: number;
@@ -14,6 +20,7 @@ interface SidebarState {
 
 interface UIState {
 	monitors: TableState;
+	pagespeed: TableState;
 	team: TableState;
 	maintenance: TableState;
 	infrastructure: TableState;
@@ -37,6 +44,9 @@ const initialState: UIState = {
 	monitors: {
 		rowsPerPage: 10,
 	},
+	pagespeed: {
+		rowsPerPage: 10,
+	},
 	team: {
 		rowsPerPage: 5,
 	},

client/src/Hooks/useMonitorListController.ts

@@ -0,0 +1,209 @@
+import { setRowsPerPage, type TableName } from "@/Features/UI/uiSlice";
+import { useDelete, useGet } from "@/Hooks/UseApi";
+import { useBulkMonitorActions } from "@/Hooks/useBulkMonitorActions";
+import useDebounce from "@/Hooks/useDebounce";
+import type { RootState } from "@/store";
+import {
+	type MonitorsWithChecksResponse,
+	SelectableMonitorTypes,
+	type Monitor,
+	type MonitorType,
+} from "@/Types/Monitor";
+import type { Tag } from "@/Types/Tag";
+import { useCallback, useMemo, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+interface MonitorListConfig {
+	types: MonitorType[] | "selectable";
+	checksLimit: number;
+	refreshInterval: number;
+	rowsPerPageTable: TableName;
+	rowsPerPageDefault: number;
+	initialSortField?: string; // default ""
+}
+
+export const useMonitorListController = (config: MonitorListConfig) => {
+	const dispatch = useDispatch();
+	const rowsPerPage = useSelector(
+		(state: RootState) =>
+			state.ui?.[config.rowsPerPageTable]?.rowsPerPage ?? config.rowsPerPageDefault
+	);
+
+	// Filter states
+	const [selectedTypes, setSelectedTypes] = useState<MonitorType[]>([]);
+	const [selectedStatus, setSelectedStatus] = useState<string>("");
+	const [selectedState, setSelectedState] = useState<string>("");
+	const [selectedTags, setSelectedTags] = useState<string[]>([]);
+	const [page, setPage] = useState<number>(0);
+	const [search, setSearch] = useState<string>("");
+	const [sortField, setSortField] = useState<string>(config.initialSortField ?? "");
+	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
+	const debouncedSearch = useDebounce<string>(search, 300);
+
+	// Convert filter selections to API filter values
+	// Status: pass "up"/"down" directly to the API
+	// State: "active" -> true, "paused" -> false
+	const toFilterStatus = useMemo(() => {
+		if (selectedStatus === "up") return "up";
+		if (selectedStatus === "down") return "down";
+		return undefined;
+	}, [selectedStatus]);
+
+	const toFilterActive = useMemo(() => {
+		if (selectedState === "active") return "true";
+		if (selectedState === "paused") return "false";
+		return undefined;
+	}, [selectedState]);
+
+	// Determine field and filter for the API request
+	// Priority: status > isActive > search > sort
+	const filterLookup = new Map<string | undefined, string>([
+		[toFilterStatus, "status"],
+		[toFilterActive, "isActive"],
+	]);
+	const activeFilter = [...filterLookup].find(([key]) => key !== undefined);
+	const field = activeFilter?.[1] || (debouncedSearch ? "name" : sortField || undefined);
+	const filter = activeFilter?.[0] || debouncedSearch || undefined;
+
+	const effectiveTypes = useMemo(() => {
+		return config.types === "selectable"
+			? selectedTypes.length > 0
+				? selectedTypes
+				: [...SelectableMonitorTypes]
+			: config.types;
+	}, [config.types, selectedTypes]);
+
+	// Fetching
+	const monitorsWithChecksUrl = useMemo(() => {
+		const params = new URLSearchParams();
+		effectiveTypes.forEach((type) => params.append("type", type));
+		selectedTags.forEach((tag) => params.append("tags", tag));
+		params.append("limit", String(config.checksLimit));
+		if (page !== undefined) params.append("page", String(page));
+		if (rowsPerPage) params.append("rowsPerPage", String(rowsPerPage));
+		if (filter) params.append("filter", filter);
+		if (field) params.append("field", field);
+		if (sortOrder) params.append("order", sortOrder);
+		return `/monitors/team/with-checks?${params.toString()}`;
+	}, [
+		effectiveTypes,
+		selectedTags,
+		page,
+		rowsPerPage,
+		filter,
+		field,
+		sortOrder,
+		config.checksLimit,
+	]);
+
+	const {
+		data: monitorsWithChecksData,
+		isLoading,
+		error,
+		refetch,
+	} = useGet<MonitorsWithChecksResponse>(
+		monitorsWithChecksUrl,
+		{},
+		{ refreshInterval: config.refreshInterval, keepPreviousData: true }
+	);
+	const { data: tags } = useGet<Tag[]>("/tags/team");
+
+	const bulk = useBulkMonitorActions(refetch, page);
+
+	// Delete ops
+	const { deleteFn, loading: isDeleting } = useDelete();
+	const handleConfirmDelete = async () => {
+		if (!selectedMonitor) return;
+		await deleteFn(`/monitors/${selectedMonitor.id}`);
+		setSelectedMonitor(null);
+		refetch();
+	};
+	const handleCancelDelete = () => setSelectedMonitor(null);
+
+	// Handle filters
+	const handleClearFilters = useCallback(() => {
+		setSelectedTypes([]);
+		setSelectedStatus("");
+		setSelectedState("");
+		setSelectedTags([]);
+		setSearch("");
+	}, []);
+
+	const handleSetRowsPerPage = (value: number) => {
+		dispatch(setRowsPerPage({ value, table: config.rowsPerPageTable }));
+		setPage(0);
+	};
+
+	// Check for active filters
+	const hasActiveFilters = Boolean(
+		selectedTypes.length > 0 ||
+		selectedStatus ||
+		selectedState ||
+		selectedTags.length > 0 ||
+		search
+	);
+
+	// Show empty state only when there are truly no monitors (not just filtered out)
+	// If filters are active and count is 0, pass 1 to prevent empty state fallback
+
+	const { monitors, summary, count } = monitorsWithChecksData ?? {
+		monitors: null,
+		summary: null,
+		count: 0,
+	};
+
+	const effectiveTotalCount =
+		hasActiveFilters && (summary?.totalMonitors ?? 0) === 0
+			? 1
+			: (summary?.totalMonitors ?? 0);
+
+	return {
+		// Data
+		monitors,
+		summary,
+		count,
+		tags,
+		isLoading,
+		error,
+		refetch,
+		effectiveTotalCount,
+		hasActiveFilters,
+
+		// Filter state and setters
+		selectedTypes,
+		setSelectedTypes,
+		selectedStatus,
+		setSelectedStatus,
+		selectedState,
+		setSelectedState,
+		selectedTags,
+		setSelectedTags,
+		search,
+		setSearch,
+		handleClearFilters,
+
+		// Paging and Sorting
+		page,
+		setPage,
+		rowsPerPage,
+		handleSetRowsPerPage,
+		sortField,
+		setSortField,
+		sortOrder,
+		setSortOrder,
+
+		// Delete
+		selectedMonitor,
+		setSelectedMonitor,
+		isDialogOpen: Boolean(selectedMonitor),
+		isDeleting,
+		handleConfirmDelete,
+		handleCancelDelete,
+
+		// Rendered only when config.bulkActions
+		...bulk,
+	};
+};
+
+export type MonitorListController = ReturnType<typeof useMonitorListController>;

client/src/Pages/Infrastructure/Monitors/index.tsx

@@ -1,274 +1,44 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { MonitorBasePageWithStates, ColoredLabel } from "@/Components/design-elements";
-import { HeaderCreate } from "@/Components/common";
-import {
-	ControlsFilter,
-	HeaderMonitorsSummary,
-	BulkActionsBar,
-} from "@/Components/monitors";
-import { TextField, Dialog, Button } from "@/Components/inputs";
-import { Play, Pause } from "lucide-react";
+import { MonitorListPage } from "@/Components/monitors";
+import { InfraMonitorsTable } from "@/Pages/Infrastructure/Monitors/Components/MonitorsTable";
 
-import { useGet, useDelete } from "@/Hooks/UseApi";
-import { useIsAdmin } from "@/Hooks/useIsAdmin";
-import type { Monitor, MonitorsWithChecksResponse } from "@/Types/Monitor";
-import type { Tag } from "@/Types/Tag";
-import { useTheme } from "@mui/material";
-import { SPACING } from "@/Utils/Theme/constants";
-import { useState, useCallback, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { useSelector, useDispatch } from "react-redux";
-import { setRowsPerPage } from "@/Features/UI/uiSlice.js";
-import type { RootState } from "@/Types/state";
-import { InfraMonitorsTable } from "./Components/MonitorsTable";
-import useDebounce from "@/Hooks/useDebounce";
-import { useBulkMonitorActions } from "@/Hooks/useBulkMonitorActions";
+import { useMonitorListController } from "@/Hooks/useMonitorListController";
 
 const InfrastructureMonitors = () => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-	const isAdmin = useIsAdmin();
-	const dispatch = useDispatch();
-
-	// Redux state
-	const rowsPerPage = useSelector(
-		(state: RootState) => state.ui?.infrastructure?.rowsPerPage ?? 5
-	);
-
-	// Local state
-	const [selectedStatus, setSelectedStatus] = useState<string>("");
-	const [selectedState, setSelectedState] = useState<string>("");
-	const [selectedTags, setSelectedTags] = useState<string[]>([]);
-	const [search, setSearch] = useState<string>("");
-	const [page, setPage] = useState<number>(0);
-	const [sortField, setSortField] = useState<string>("");
-	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
-	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
-
-	const { data: tags } = useGet<Tag[]>("/tags/team");
-
-	const isDialogOpen = Boolean(selectedMonitor);
-
-	const debouncedSearch = useDebounce<string>(search, 300);
-
-	const handleClearFilters = useCallback(() => {
-		setSelectedStatus("");
-		setSelectedState("");
-		setSelectedTags([]);
-		setSearch("");
-	}, []);
-
-	// Convert filter selections to API filter values
-	const toFilterStatus = useMemo(() => {
-		if (selectedStatus === "up") return "true";
-		if (selectedStatus === "down") return "false";
-		return undefined;
-	}, [selectedStatus]);
-
-	const toFilterActive = useMemo(() => {
-		if (selectedState === "active") return "true";
-		if (selectedState === "paused") return "false";
-		return undefined;
-	}, [selectedState]);
-
-	// Determine field and filter for the API request
-	// Priority: status > isActive > search
-	const filterLookup = new Map<string | undefined, string>([
-		[toFilterStatus, "status"],
-		[toFilterActive, "isActive"],
-	]);
-	const activeFilter = [...filterLookup].find(([key]) => key !== undefined);
-	const field = activeFilter?.[1] || (debouncedSearch ? "name" : sortField || undefined);
-	const filter = activeFilter?.[0] || debouncedSearch || undefined;
-
-	// Build URL for monitors with checks
-	const monitorsWithChecksUrl = useMemo(() => {
-		const params = new URLSearchParams();
-		params.append("type", "hardware");
-		selectedTags.forEach((tagId) => params.append("tags", tagId));
-		params.append("limit", "1");
-		if (page !== undefined) params.append("page", String(page));
-		if (rowsPerPage) params.append("rowsPerPage", String(rowsPerPage));
-		if (filter) params.append("filter", filter);
-		if (field) params.append("field", field);
-		if (sortOrder) params.append("order", sortOrder);
-		return `/monitors/team/with-checks?${params.toString()}`;
-	}, [page, rowsPerPage, filter, field, sortOrder, selectedTags]);
-
-	const {
-		data: monitorsWithChecksData,
-		isLoading: monitorsWithChecksLoading,
-		error: monitorsWithChecksError,
-		refetch,
-	} = useGet<MonitorsWithChecksResponse>(
-		monitorsWithChecksUrl,
-		{},
-		{ refreshInterval: 5000, keepPreviousData: true }
-	);
-
-	const { summary, count } = monitorsWithChecksData ?? { summary: null, count: 0 };
-	const isLoading = monitorsWithChecksLoading;
-
-	// Bulk actions
-	const {
-		selectedRows,
-		setSelectedRows,
-		handleBulkPause,
-		handleBulkResume,
-		handleCancelSelection,
-	} = useBulkMonitorActions(refetch, page);
-
-	// Check if any filters are active
-	const hasActiveFilters = Boolean(
-		selectedStatus || selectedState || selectedTags.length > 0 || search
-	);
-
-	// Show empty state only when there are truly no monitors (not just filtered out)
-	const effectiveTotalCount =
-		hasActiveFilters && (summary?.totalMonitors ?? 0) === 0
-			? 1
-			: (summary?.totalMonitors ?? 0);
-
-	// Delete hook
-	const { deleteFn, loading: isDeleting } = useDelete();
-
-	const handleConfirm = async () => {
-		if (!selectedMonitor) return;
-		await deleteFn(`/monitors/${selectedMonitor.id}`);
-		setSelectedMonitor(null);
-		refetch();
-	};
-
-	const handleCancel = () => {
-		setSelectedMonitor(null);
-	};
-
+	const c = useMonitorListController({
+		types: ["hardware"],
+		checksLimit: 1,
+		refreshInterval: 5000,
+		rowsPerPageTable: "infrastructure",
+		rowsPerPageDefault: 5,
+	});
 	return (
-		<MonitorBasePageWithStates
+		<MonitorListPage
 			headerKey="infrastructure"
-			loading={isLoading}
-			error={monitorsWithChecksError}
-			totalCount={effectiveTotalCount}
 			page="infrastructure"
 			actionLink="/infrastructure/create"
+			controller={c}
+			bulkActions
+			showTypeFilter={false}
+			summaryProps={{ showBreached: true }}
 		>
-			<HeaderCreate
-				path="/infrastructure/create"
-				isLoading={isLoading}
-				isAdmin={isAdmin}
-			/>
-			<HeaderMonitorsSummary
-				summary={summary}
-				showBreached={true}
-			/>
-			<Stack
-				direction={isSmall ? "column" : "row"}
-				justifyContent={isSmall ? "flex-start" : "space-between"}
-				gap={theme.spacing(4)}
-			>
-				<ControlsFilter
-					showTypes={false}
-					selectedStatus={selectedStatus}
-					setSelectedStatus={setSelectedStatus}
-					selectedState={selectedState}
-					setSelectedState={setSelectedState}
-					tagOptions={tags ?? []}
-					selectedTags={selectedTags}
-					setSelectedTags={setSelectedTags}
-					onClearFilters={handleClearFilters}
-				/>
-				<TextField
-					placeholder={t("pages.uptime.filters.search.placeholder")}
-					value={search}
-					onChange={(event) => {
-						setSearch(event.target.value);
-					}}
-				/>
-			</Stack>
-
-			{selectedTags.length > 0 && (
-				<Stack
-					direction={isSmall ? "column" : "row"}
-					alignItems={isSmall ? "flex-start" : "center"}
-					flexWrap="wrap"
-					gap={theme.spacing(SPACING.XL)}
-				>
-					<Typography color={theme.palette.text.secondary}>
-						{t("pages.uptime.filters.activeTags")}
-					</Typography>
-					{selectedTags.map((tagId) => {
-						const tag = tags?.find((t) => t.id === tagId);
-						if (!tag) return null;
-						return (
-							<ColoredLabel
-								key={tag.id}
-								text={tag.name}
-								color={tag.color}
-							/>
-						);
-					})}
-				</Stack>
-			)}
-
-			{!isLoading && (
-				<BulkActionsBar
-					selectedCount={selectedRows.length}
-					onCancel={handleCancelSelection}
-				>
-					<Button
-						size="small"
-						startIcon={<Play size={16} />}
-						onClick={handleBulkResume}
-					>
-						{t("common.buttons.resume")}
-					</Button>
-					<Button
-						size="small"
-						startIcon={<Pause size={16} />}
-						onClick={handleBulkPause}
-					>
-						{t("common.buttons.pause")}
-					</Button>
-				</BulkActionsBar>
-			)}
-
 			<InfraMonitorsTable
-				monitors={monitorsWithChecksData?.monitors || []}
-				tags={tags ?? []}
-				refetch={refetch}
-				setSelectedMonitor={setSelectedMonitor}
-				sortField={sortField}
-				setSortField={setSortField}
-				sortOrder={sortOrder}
-				setSortOrder={setSortOrder}
-				count={count || 0}
-				page={page}
-				setPage={setPage}
-				rowsPerPage={rowsPerPage}
-				setRowsPerPage={(value: number) => {
-					dispatch(
-						setRowsPerPage({
-							value,
-							table: "infrastructure",
-						})
-					);
-					setPage(0);
-				}}
-				selectedRows={selectedRows}
-				onSelectionChange={setSelectedRows}
+				monitors={c.monitors || []}
+				tags={c.tags || []}
+				refetch={c.refetch}
+				setSelectedMonitor={c.setSelectedMonitor}
+				count={c.count || 0}
+				page={c.page}
+				setPage={c.setPage}
+				rowsPerPage={c.rowsPerPage}
+				sortField={c.sortField}
+				setSortField={c.setSortField}
+				sortOrder={c.sortOrder}
+				setSortOrder={c.setSortOrder}
+				setRowsPerPage={c.handleSetRowsPerPage}
+				selectedRows={c.selectedRows}
+				onSelectionChange={c.setSelectedRows}
 			/>
-			<Dialog
-				open={isDialogOpen}
-				title={t("common.dialogs.delete.title")}
-				content={t("common.dialogs.delete.description")}
-				onConfirm={handleConfirm}
-				onCancel={handleCancel}
-				loading={isDeleting}
-			/>
-		</MonitorBasePageWithStates>
+		</MonitorListPage>
 	);
 };
 

client/src/Pages/PageSpeed/Monitors/index.tsx

@@ -1,229 +1,57 @@
-import {
-	MonitorBasePageWithStates,
-	PageSpeedKeyPriorityFallback,
-	ColoredLabel,
-} from "@/Components/design-elements";
-import { Dialog, TextField } from "@/Components/inputs";
-import { HeaderCreate } from "@/Components/common";
+import { PageSpeedKeyPriorityFallback } from "@/Components/design-elements";
 import { PageSpeedMonitorsTable } from "@/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable";
-import type { Monitor } from "@/Types/Monitor";
-import type { Tag } from "@/Types/Tag";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme } from "@mui/material";
-import { SPACING } from "@/Utils/Theme/constants";
-
-import { useTranslation } from "react-i18next";
-import { useCallback, useMemo, useState } from "react";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
-import { useGet, useDelete } from "@/Hooks/UseApi";
-import useDebounce from "@/Hooks/useDebounce";
-import type { MonitorsWithChecksResponse } from "@/Types/Monitor";
+import { useGet } from "@/Hooks/UseApi";
 import type { AppSettingsResponse } from "@/Types/Settings";
-import { ControlsFilter, HeaderMonitorsSummary } from "@/Components/monitors";
+import { MonitorListPage } from "@/Components/monitors";
+import { useMonitorListController } from "@/Hooks/useMonitorListController";
 
 const PageSpeedMonitorsPage = () => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isAdmin = useIsAdmin();
-	const { deleteFn, loading: isDeleting } = useDelete();
-
-	const settingsUrl = "/settings";
 	const {
 		data: settingsData,
 		isLoading: settingsIsLoading,
 		error: settingsError,
-	} = useGet<AppSettingsResponse>(settingsUrl);
+	} = useGet<AppSettingsResponse>("/settings");
 
-	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
-	const isDialogOpen = Boolean(selectedMonitor);
-	const [sortField, setSortField] = useState<string>("name");
-	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
-	const [page, setPage] = useState(0);
-	const [rowsPerPage, setRowsPerPage] = useState(10);
-	const [selectedTags, setSelectedTags] = useState<string[]>([]);
-	const [selectedStatus, setSelectedStatus] = useState<string>("");
-	const [selectedState, setSelectedState] = useState<string>("");
-	const [search, setSearch] = useState<string>("");
-
-	const debouncedSearch = useDebounce<string>(search, 300);
-
-	// Status: pass "up"/"down" directly to the API
-	// State: "active" -> true, "paused" -> false
-	const toFilterStatus = useMemo(() => {
-		if (selectedStatus === "up") return "up";
-		if (selectedStatus === "down") return "down";
-		return undefined;
-	}, [selectedStatus]);
-
-	const toFilterActive = useMemo(() => {
-		if (selectedState === "active") return "true";
-		if (selectedState === "paused") return "false";
-		return undefined;
-	}, [selectedState]);
-
-	// Priority: status > isActive > search > sort
-	const filterLookup = new Map<string | undefined, string>([
-		[toFilterStatus, "status"],
-		[toFilterActive, "isActive"],
-	]);
-	const activeFilter = [...filterLookup].find(([key]) => key !== undefined);
-	const field = activeFilter?.[1] || (debouncedSearch ? "name" : sortField || undefined);
-	const filter = activeFilter?.[0] || debouncedSearch;
-
-	const { data: tags } = useGet<Tag[]>("/tags/team");
-
-	const monitorsWithChecksUrl = useMemo(() => {
-		const params = new URLSearchParams();
-		params.append("type", "pagespeed");
-		selectedTags.forEach((tagId) => params.append("tags", tagId));
-		params.append("limit", "25");
-		if (page !== undefined) params.append("page", String(page));
-		if (rowsPerPage) params.append("rowsPerPage", String(rowsPerPage));
-		if (filter) params.append("filter", filter);
-		if (field) params.append("field", field);
-		if (sortOrder) params.append("order", sortOrder);
-		return `/monitors/team/with-checks?${params.toString()}`;
-	}, [page, rowsPerPage, sortOrder, selectedTags, filter, field]);
-
-	const {
-		data: monitorsData,
-		isLoading: monitorsIsLoading,
-		error: monitorsError,
-		refetch,
-	} = useGet<MonitorsWithChecksResponse>(
-		monitorsWithChecksUrl,
-		{},
-		{ refreshInterval: 30000 }
-	);
-
-	const monitors = monitorsData?.monitors;
-	const monitorsCount = monitorsData?.count ?? 0;
-	const summary = monitorsData?.summary ?? null;
-
-	const isLoading = monitorsIsLoading || settingsIsLoading;
+	const c = useMonitorListController({
+		types: ["pagespeed"],
+		checksLimit: 25,
+		refreshInterval: 30000,
+		rowsPerPageTable: "pagespeed",
+		rowsPerPageDefault: 10,
+		initialSortField: "name",
+	});
 
 	const showApiKeyWarning = isAdmin && settingsData && !settingsData.pagespeedKeySet;
 
-	const handleConfirm = async () => {
-		if (!selectedMonitor) return;
-		await deleteFn(`/monitors/${selectedMonitor.id}`);
-		setSelectedMonitor(null);
-		refetch();
-	};
-
-	const handleCancel = () => {
-		setSelectedMonitor(null);
-	};
-
-	const handleClearFilters = useCallback(() => {
-		setSelectedStatus("");
-		setSelectedState("");
-		setSelectedTags([]);
-		setSearch("");
-	}, []);
-
-	const hasActiveFilters = Boolean(
-		selectedStatus || selectedState || selectedTags.length > 0 || search
-	);
-
-	const effectiveTotalCount =
-		hasActiveFilters && (summary?.totalMonitors ?? 0) === 0
-			? 1
-			: (summary?.totalMonitors ?? 0);
-
 	return (
-		<MonitorBasePageWithStates
+		<MonitorListPage
 			headerKey="pageSpeed"
-			loading={isLoading}
-			error={monitorsError || settingsError}
-			totalCount={effectiveTotalCount}
 			page="pageSpeed"
 			actionLink="/pagespeed/create"
+			controller={c}
+			showTypeFilter={false}
+			extraLoading={settingsIsLoading}
+			extraError={settingsError}
 			priorityFallback={showApiKeyWarning ? <PageSpeedKeyPriorityFallback /> : undefined}
 		>
-			<HeaderCreate
-				path="/pagespeed/create"
-				isLoading={isLoading}
-				isAdmin={isAdmin}
-			/>
-			<HeaderMonitorsSummary summary={summary} />
-
-			<Stack
-				direction={isSmall ? "column" : "row"}
-				justifyContent={isSmall ? "flex-start" : "space-between"}
-				gap={theme.spacing(4)}
-			>
-				<ControlsFilter
-					showTypes={false}
-					selectedStatus={selectedStatus}
-					setSelectedStatus={setSelectedStatus}
-					selectedState={selectedState}
-					setSelectedState={setSelectedState}
-					tagOptions={tags ?? []}
-					selectedTags={selectedTags}
-					setSelectedTags={setSelectedTags}
-					onClearFilters={handleClearFilters}
-				/>
-				<TextField
-					placeholder={t("pages.uptime.filters.search.placeholder")}
-					value={search}
-					onChange={(event) => {
-						setSearch(event.target.value);
-					}}
-				/>
-			</Stack>
-
-			{selectedTags.length > 0 && (
-				<Stack
-					direction={isSmall ? "column" : "row"}
-					alignItems={isSmall ? "flex-start" : "center"}
-					flexWrap="wrap"
-					gap={theme.spacing(SPACING.XL)}
-				>
-					<Typography color={theme.palette.text.secondary}>
-						{t("pages.uptime.filters.activeTags")}
-					</Typography>
-					{selectedTags.map((tagId) => {
-						const tag = tags?.find((t) => t.id === tagId);
-						if (!tag) return null;
-						return (
-							<ColoredLabel
-								key={tag.id}
-								text={tag.name}
-								color={tag.color}
-							/>
-						);
-					})}
-				</Stack>
-			)}
-
 			<PageSpeedMonitorsTable
-				monitors={monitors || []}
-				tags={tags ?? []}
-				refetch={refetch}
-				setSelectedMonitor={setSelectedMonitor}
-				sortField={sortField}
-				setSortField={setSortField}
-				sortOrder={sortOrder}
-				setSortOrder={setSortOrder}
-				count={monitorsCount || 0}
-				page={page}
-				setPage={setPage}
-				rowsPerPage={rowsPerPage}
-				setRowsPerPage={setRowsPerPage}
+				monitors={c.monitors || []}
+				tags={c.tags || []}
+				refetch={c.refetch}
+				setSelectedMonitor={c.setSelectedMonitor}
+				count={c.count || 0}
+				page={c.page}
+				setPage={c.setPage}
+				rowsPerPage={c.rowsPerPage}
+				sortField={c.sortField}
+				setSortField={c.setSortField}
+				sortOrder={c.sortOrder}
+				setSortOrder={c.setSortOrder}
+				setRowsPerPage={c.handleSetRowsPerPage}
 			/>
-			<Dialog
-				open={isDialogOpen}
-				title={t("common.dialogs.delete.title")}
-				content={t("common.dialogs.delete.description")}
-				onConfirm={handleConfirm}
-				onCancel={handleCancel}
-				loading={isDeleting}
-			/>
-		</MonitorBasePageWithStates>
+		</MonitorListPage>
 	);
 };
 

client/src/Pages/Uptime/Monitors/index.tsx

@@ -1,294 +1,43 @@
-import {
-	ControlsFilter,
-	HeaderMonitorsSummary,
-	BulkActionsBar,
-} from "@/Components/monitors";
-import { MonitorBasePageWithStates, ColoredLabel } from "@/Components/design-elements";
-import { TextField, Dialog, Button } from "@/Components/inputs";
-import Stack from "@mui/material/Stack";
+import { MonitorListPage } from "@/Components/monitors";
 import { MonitorTable } from "@/Pages/Uptime/Monitors/Components/UptimeMonitorsTable";
-import { HeaderCreate } from "@/Components/common";
-import { Play, Pause } from "lucide-react";
-import Typography from "@mui/material/Typography";
 
-import { useTranslation } from "react-i18next";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useGet, useDelete } from "@/Hooks/UseApi";
-import type { Monitor, MonitorType, MonitorsWithChecksResponse } from "@/Types/Monitor";
-import type { Tag } from "@/Types/Tag";
-import { useState, useMemo, useCallback } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import { setRowsPerPage } from "@/Features/UI/uiSlice.js";
-import { useIsAdmin } from "@/Hooks/useIsAdmin";
-import type { RootState } from "@/Types/state";
-import { useTheme } from "@mui/material";
-import useDebounce from "@/Hooks/useDebounce";
-import { useBulkMonitorActions } from "@/Hooks/useBulkMonitorActions";
-import { SPACING } from "@/Utils/Theme/constants";
+import { useMonitorListController } from "@/Hooks/useMonitorListController";
 
 const UptimeMonitorsPage = () => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-	const dispatch = useDispatch();
-	const isAdmin = useIsAdmin();
-	// Redux state
-	const rowsPerPage = useSelector(
-		(state: RootState) => state.ui?.monitors?.rowsPerPage ?? 10
-	);
-
-	// Local state
-	const [selectedTypes, setSelectedTypes] = useState<MonitorType[]>([]);
-	const [selectedStatus, setSelectedStatus] = useState<string>("");
-	const [selectedState, setSelectedState] = useState<string>("");
-	const [selectedTags, setSelectedTags] = useState<string[]>([]);
-	const [page, setPage] = useState<number>(0);
-	const [search, setSearch] = useState<string>("");
-	const [sortField, setSortField] = useState<string>("");
-	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
-	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
-
-	const isDialogOpen = Boolean(selectedMonitor);
-
-	const debouncedSearch = useDebounce<string>(search, 300);
-
-	// Convert filter selections to API filter values
-	// Status: pass "up"/"down" directly to the API
-	// State: "active" -> true, "paused" -> false
-	const toFilterStatus = useMemo(() => {
-		if (selectedStatus === "up") return "up";
-		if (selectedStatus === "down") return "down";
-		return undefined;
-	}, [selectedStatus]);
-
-	const toFilterActive = useMemo(() => {
-		if (selectedState === "active") return "true";
-		if (selectedState === "paused") return "false";
-		return undefined;
-	}, [selectedState]);
-
-	// Determine field and filter for the API request
-	// Priority: status > isActive > search > sort
-	const filterLookup = new Map<string | undefined, string>([
-		[toFilterStatus, "status"],
-		[toFilterActive, "isActive"],
-	]);
-	const activeFilter = [...filterLookup].find(([key]) => key !== undefined);
-	const field = activeFilter?.[1] || (debouncedSearch ? "name" : sortField || undefined);
-	const filter = activeFilter?.[0] || debouncedSearch;
-
-	// Default to all types when none selected
-	const effectiveTypes =
-		selectedTypes.length > 0
-			? selectedTypes
-			: ["http", "ping", "docker", "port", "game", "grpc", "websocket", "dns"];
-
-	// Build URL for monitors with checks
-	const monitorsWithChecksUrl = useMemo(() => {
-		const params = new URLSearchParams();
-		effectiveTypes.forEach((type) => params.append("type", type));
-		selectedTags.forEach((tagId) => params.append("tags", tagId));
-		params.append("limit", "25");
-		if (page !== undefined) params.append("page", String(page));
-		if (rowsPerPage) params.append("rowsPerPage", String(rowsPerPage));
-		if (filter) params.append("filter", filter);
-		if (field) params.append("field", field);
-		if (sortOrder) params.append("order", sortOrder);
-		return `/monitors/team/with-checks?${params.toString()}`;
-	}, [effectiveTypes, selectedTags, page, rowsPerPage, filter, field, sortOrder]);
-
-	const {
-		data: monitorsWithChecksData,
-		isLoading: monitorsWithChecksLoading,
-		error: monitorsWithChecksError,
-		refetch,
-	} = useGet<MonitorsWithChecksResponse>(
-		monitorsWithChecksUrl,
-		{},
-		{ refreshInterval: 5000, keepPreviousData: true }
-	);
-
-	const { data: tags } = useGet<Tag[]>("/tags/team");
-
-	const {
-		monitors: monitorsWithChecks,
-		summary,
-		count,
-	} = monitorsWithChecksData ?? { monitors: null, summary: null, count: 0 };
-
-	// Bulk actions
-	const {
-		selectedRows,
-		setSelectedRows,
-		handleBulkPause,
-		handleBulkResume,
-		handleCancelSelection,
-	} = useBulkMonitorActions(refetch, page);
-
-	// Delete hook
-	const { deleteFn, loading: isDeleting } = useDelete();
-
-	// Handlers
-	const handleClearFilters = useCallback(() => {
-		setSelectedTypes([]);
-		setSelectedStatus("");
-		setSelectedState("");
-		setSelectedTags([]);
-		setSearch("");
-	}, []);
-
-	const handleConfirm = async () => {
-		if (!selectedMonitor) return;
-		await deleteFn(`/monitors/${selectedMonitor.id}`);
-		setSelectedMonitor(null);
-		refetch();
-	};
-
-	const handleCancel = () => {
-		setSelectedMonitor(null);
-	};
-
-	const isLoading = monitorsWithChecksLoading;
-
-	// Check if any filters are active
-	const hasActiveFilters = Boolean(
-		selectedTypes.length > 0 ||
-		selectedStatus ||
-		selectedState ||
-		selectedTags.length > 0 ||
-		search
-	);
-
-	// Show empty state only when there are truly no monitors (not just filtered out)
-	// If filters are active and count is 0, pass 1 to prevent empty state fallback
-	const effectiveTotalCount =
-		hasActiveFilters && (summary?.totalMonitors ?? 0) === 0
-			? 1
-			: (summary?.totalMonitors ?? 0);
+	const c = useMonitorListController({
+		types: "selectable",
+		checksLimit: 25,
+		refreshInterval: 5000,
+		rowsPerPageTable: "monitors",
+		rowsPerPageDefault: 10,
+	});
 
 	return (
-		<MonitorBasePageWithStates
+		<MonitorListPage
 			headerKey="uptime"
-			loading={isLoading}
-			error={monitorsWithChecksError}
-			totalCount={effectiveTotalCount}
 			page="uptime"
 			actionLink="/uptime/create"
+			controller={c}
+			bulkActions
 		>
-			<HeaderCreate
-				path="/uptime/create"
-				isLoading={isLoading}
-				isAdmin={isAdmin}
-			/>
-
-			<HeaderMonitorsSummary summary={summary} />
-
-			<Stack
-				direction={isSmall ? "column" : "row"}
-				justifyContent={isSmall ? "flex-start" : "space-between"}
-				gap={theme.spacing(4)}
-			>
-				<ControlsFilter
-					selectedTypes={selectedTypes}
-					setSelectedTypes={setSelectedTypes}
-					selectedStatus={selectedStatus}
-					setSelectedStatus={setSelectedStatus}
-					selectedState={selectedState}
-					setSelectedState={setSelectedState}
-					tagOptions={tags ?? []}
-					selectedTags={selectedTags}
-					setSelectedTags={setSelectedTags}
-					onClearFilters={handleClearFilters}
-				/>
-				<TextField
-					placeholder={t("pages.uptime.filters.search.placeholder")}
-					value={search}
-					onChange={(event) => {
-						setSearch(event.target.value);
-					}}
-				/>
-			</Stack>
-
-			{selectedTags.length > 0 && (
-				<Stack
-					direction={isSmall ? "column" : "row"}
-					alignItems={isSmall ? "flex-start" : "center"}
-					flexWrap="wrap"
-					gap={theme.spacing(SPACING.XL)}
-				>
-					<Typography color={theme.palette.text.secondary}>
-						{t("pages.uptime.filters.activeTags")}
-					</Typography>
-					{selectedTags.map((tagId) => {
-						const tag = tags?.find((t) => t.id === tagId);
-						if (!tag) return null;
-						return (
-							<ColoredLabel
-								key={tag.id}
-								text={tag.name}
-								color={tag.color}
-							/>
-						);
-					})}
-				</Stack>
-			)}
-
-			{!isLoading && (
-				<BulkActionsBar
-					selectedCount={selectedRows.length}
-					onCancel={handleCancelSelection}
-				>
-					<Button
-						size="small"
-						startIcon={<Play size={16} />}
-						onClick={handleBulkResume}
-					>
-						{t("common.buttons.resume")}
-					</Button>
-					<Button
-						size="small"
-						startIcon={<Pause size={16} />}
-						onClick={handleBulkPause}
-					>
-						{t("common.buttons.pause")}
-					</Button>
-				</BulkActionsBar>
-			)}
-
 			<MonitorTable
-				monitors={monitorsWithChecks || []}
-				tags={tags || []}
-				refetch={refetch}
-				setSelectedMonitor={setSelectedMonitor}
-				count={count || 0}
-				page={page}
-				setPage={setPage}
-				rowsPerPage={rowsPerPage}
-				sortField={sortField}
-				setSortField={setSortField}
-				sortOrder={sortOrder}
-				setSortOrder={setSortOrder}
-				setRowsPerPage={(rowsPerPage: number) => {
-					dispatch(
-						setRowsPerPage({
-							value: rowsPerPage,
-							table: "monitors",
-						})
-					);
-					setPage(0);
-				}}
-				selectedRows={selectedRows}
-				onSelectionChange={setSelectedRows}
+				monitors={c.monitors || []}
+				tags={c.tags || []}
+				refetch={c.refetch}
+				setSelectedMonitor={c.setSelectedMonitor}
+				count={c.count || 0}
+				page={c.page}
+				setPage={c.setPage}
+				rowsPerPage={c.rowsPerPage}
+				sortField={c.sortField}
+				setSortField={c.setSortField}
+				sortOrder={c.sortOrder}
+				setSortOrder={c.setSortOrder}
+				setRowsPerPage={c.handleSetRowsPerPage}
+				selectedRows={c.selectedRows}
+				onSelectionChange={c.setSelectedRows}
 			/>
-			<Dialog
-				open={isDialogOpen}
-				title={t("common.dialogs.delete.title")}
-				content={t("common.dialogs.delete.description")}
-				onConfirm={handleConfirm}
-				onCancel={handleCancel}
-				loading={isDeleting}
-			/>
-		</MonitorBasePageWithStates>
+		</MonitorListPage>
 	);
 };
 

client/src/store.ts

@@ -2,6 +2,7 @@ import { configureStore, combineReducers } from "@reduxjs/toolkit";
 import authReducer from "@/Features/Auth/authSlice";
 import uiReducer from "@/Features/UI/uiSlice";
 import storage from "redux-persist/lib/storage";
+import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2";
 import {
 	persistReducer,
 	persistStore,
@@ -24,6 +25,8 @@ const persistConfig = {
 	storage,
 	whitelist: ["auth", "ui"],
 	transforms: [authTransform],
+	// Merge two levels deep on rehydrate so a slice key added in a new release keeps initial value
+	stateReconciler: autoMergeLevel2,
 };
 
 const rootReducer = combineReducers({