M-029 Pass 1 batch 3: migrate 3 three-mutation pages to useTrackedMutation

Drains 9 more useMutation sites (42 -> 33). HealthMonitorPage hoists the

shared invalidation pair into a healthCheckInvalidates const so the three

mutations don't repeat the array literal.

Pages migrated:

  - HealthMonitorPage.tsx  create + delete + acknowledge all invalidate

                            [['health-checks'], ['health-checks-summary']]

                            (hoisted to a shared const)

  - AgentGroupsPage.tsx    delete + create + update all invalidate [['agent-groups']]

                            (queryClient kept — modal onSuccess props still use it)

  - JobsPage.tsx           cancel + approve + reject all invalidate [['jobs']]

Verification:

  legacy useMutation count   42 -> 33 (-9)

  useTrackedMutation count   14 -> 23 (+9)

Closes 23 of 56 sites toward M-029 Pass 1 completion.

web/src/pages/AgentGroupsPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useTrackedMutation } from '../hooks/useTrackedMutation';
 import { getAgentGroups, deleteAgentGroup, createAgentGroup, updateAgentGroup } from '../api/client';
 import PageHeader from '../components/PageHeader';
 import DataTable from '../components/DataTable';
@@ -259,23 +260,23 @@ export default function AgentGroupsPage() {
     queryFn: () => getAgentGroups(),
   });
 
-  const deleteMutation = useMutation({
+  const deleteMutation = useTrackedMutation({
     mutationFn: deleteAgentGroup,
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['agent-groups'] }),
+    invalidates: [['agent-groups']],
   });
 
-  const createMutation = useMutation({
+  const createMutation = useTrackedMutation({
     mutationFn: createAgentGroup,
+    invalidates: [['agent-groups']],
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['agent-groups'] });
       setShowCreate(false);
     },
   });
 
-  const updateMutation = useMutation({
+  const updateMutation = useTrackedMutation({
     mutationFn: ({ id, data }: { id: string; data: Partial<AgentGroup> }) => updateAgentGroup(id, data),
+    invalidates: [['agent-groups']],
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['agent-groups'] });
       setEditingGroup(null);
     },
   });

web/src/pages/HealthMonitorPage.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import { useTrackedMutation } from '../hooks/useTrackedMutation';
 import {
   listHealthChecks,
   createHealthCheck,
@@ -139,7 +140,6 @@ function SummaryBar({ summary }: { summary: HealthCheckSummary }) {
 export default function HealthMonitorPage() {
   const [showCreate, setShowCreate] = useState(false);
   const [statusFilter, setStatusFilter] = useState<string | undefined>();
-  const queryClient = useQueryClient();
 
   const { data, isLoading, error, refetch } = useQuery({
     queryKey: ['health-checks', statusFilter],
@@ -153,29 +153,26 @@ export default function HealthMonitorPage() {
     refetchInterval: 30000,
   });
 
-  const createMutation = useMutation({
+  // Every health-check mutation invalidates the same two queries: the list
+  // (rows reflect new state) and the summary (counts reflect new state).
+  const healthCheckInvalidates = [['health-checks'], ['health-checks-summary']];
+
+  const createMutation = useTrackedMutation({
     mutationFn: createHealthCheck,
+    invalidates: healthCheckInvalidates,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['health-checks'] });
-      queryClient.invalidateQueries({ queryKey: ['health-checks-summary'] });
       setShowCreate(false);
     },
   });
 
-  const deleteMutation = useMutation({
+  const deleteMutation = useTrackedMutation({
     mutationFn: deleteHealthCheck,
-    onSuccess: () => {
+    invalidates: healthCheckInvalidates,
-      queryClient.invalidateQueries({ queryKey: ['health-checks'] });
-      queryClient.invalidateQueries({ queryKey: ['health-checks-summary'] });
-    },
   });
 
-  const acknowledgeMutation = useMutation({
+  const acknowledgeMutation = useTrackedMutation({
     mutationFn: acknowledgeHealthCheck,
-    onSuccess: () => {
+    invalidates: healthCheckInvalidates,
-      queryClient.invalidateQueries({ queryKey: ['health-checks'] });
-      queryClient.invalidateQueries({ queryKey: ['health-checks-summary'] });
-    },
   });
 
   const columns: Column<EndpointHealthCheck>[] = [

web/src/pages/JobsPage.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import { useTrackedMutation } from '../hooks/useTrackedMutation';
 import { getJobs, cancelJob, approveRenewal, rejectRenewal } from '../api/client';
 import PageHeader from '../components/PageHeader';
 import DataTable from '../components/DataTable';
@@ -73,7 +74,6 @@ export default function JobsPage() {
   const [statusFilter, setStatusFilter] = useState('');
   const [typeFilter, setTypeFilter] = useState('');
   const [rejectingJob, setRejectingJob] = useState<Job | null>(null);
-  const queryClient = useQueryClient();
 
   const params: Record<string, string> = {};
   if (statusFilter) params.status = statusFilter;
@@ -85,20 +85,20 @@ export default function JobsPage() {
     refetchInterval: 10000,
   });
 
-  const cancelMutation = useMutation({
+  const cancelMutation = useTrackedMutation({
     mutationFn: cancelJob,
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['jobs'] }),
+    invalidates: [['jobs']],
   });
 
-  const approveMutation = useMutation({
+  const approveMutation = useTrackedMutation({
     mutationFn: approveRenewal,
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['jobs'] }),
+    invalidates: [['jobs']],
   });
 
-  const rejectMutation = useMutation({
+  const rejectMutation = useTrackedMutation({
     mutationFn: ({ id, reason }: { id: string; reason: string }) => rejectRenewal(id, reason),
+    invalidates: [['jobs']],
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['jobs'] });
       setRejectingJob(null);
     },
   });