♻️ Improve reporter workflows and enable React Compiler

package.json

@@ -122,6 +122,7 @@
     "@vitejs/plugin-react": "^5.0.3",
     "@vizzly-testing/observatory": "^0.3.3",
     "autoprefixer": "^10.4.21",
+    "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "postcss": "^8.5.6",
     "react": "^19.1.1",

src/reporter/src/components/comparison/screenshot-list.jsx

@@ -10,6 +10,10 @@ import { useMemo } from 'react';
 import { Badge, Button } from '../design-system/index.js';
 import SmartImage from '../ui/smart-image.jsx';
 
+function getComparisonId(comparison) {
+  return comparison.id || comparison.signature || comparison.name;
+}
+
 /**
  * Group comparisons by name and calculate aggregate stats
  */
@@ -366,6 +370,8 @@ export default function ScreenshotList({
   onSelectComparison,
   onAcceptComparison,
   onRejectComparison,
+  onAcceptGroup,
+  onRejectGroup,
   loadingStates = {},
 }) {
   let groups = useMemo(() => {
@@ -382,16 +388,30 @@ export default function ScreenshotList({
   }
 
   let handleAcceptGroup = group => {
+    let ids = group.comparisons.map(getComparisonId).filter(Boolean);
+
+    if (onAcceptGroup) {
+      onAcceptGroup(ids);
+      return;
+    }
+
     if (!onAcceptComparison) return;
-    for (let comp of group.comparisons) {
-      onAcceptComparison(comp.id || comp.signature || comp.name);
+    for (let id of ids) {
+      onAcceptComparison(id);
     }
   };
 
   let handleRejectGroup = group => {
+    let ids = group.comparisons.map(getComparisonId).filter(Boolean);
+
+    if (onRejectGroup) {
+      onRejectGroup(ids);
+      return;
+    }
+
     if (!onRejectComparison) return;
-    for (let comp of group.comparisons) {
-      onRejectComparison(comp.id || comp.signature || comp.name);
+    for (let id of ids) {
+      onRejectComparison(id);
     }
   };
 

src/reporter/src/components/views/builds-view.jsx

@@ -393,15 +393,14 @@ export default function BuildsView() {
 
   // Use TanStack Query for data
   const { data: authData, isLoading: authLoading } = useAuthStatus();
+  const authenticated = authData?.authenticated;
   const {
     data: projectsData,
     isLoading: projectsLoading,
     refetch,
-  } = useProjects();
+  } = useProjects({ enabled: authenticated === true });
   const downloadMutation = useDownloadBaselines();
 
-  const authenticated = authData?.authenticated;
-
   // Group projects by organization
   const projectsByOrg = useMemo(() => {
     const projects = projectsData?.projects || [];

src/reporter/src/components/views/comparisons-view.jsx

@@ -9,8 +9,8 @@ import { useCallback, useState } from 'react';
 import { useLocation } from 'wouter';
 import {
   useAcceptAllBaselines,
-  useAcceptBaseline,
-  useRejectBaseline,
+  useAcceptBaselinesBatch,
+  useRejectBaselinesBatch,
   useReportData,
 } from '../../hooks/queries/use-tdd-queries.js';
 import useComparisonFilters from '../../hooks/use-comparison-filters.js';
@@ -23,6 +23,18 @@ import DashboardFilters from '../dashboard/dashboard-filters.jsx';
 import { Button, Card, CardBody, EmptyState } from '../design-system/index.js';
 import { useToast } from '../ui/toast.jsx';
 
+function asIdList(value) {
+  if (Array.isArray(value)) {
+    return value.filter(Boolean);
+  }
+
+  if (value) {
+    return [value];
+  }
+
+  return [];
+}
+
 /**
  * Action banner for accepting changes
  */
@@ -122,8 +134,8 @@ export default function ComparisonsView() {
   // Use TanStack Query for data
   let { data: reportData, isLoading, refetch } = useReportData();
   let acceptAllMutation = useAcceptAllBaselines();
-  let acceptMutation = useAcceptBaseline();
-  let rejectMutation = useRejectBaseline();
+  let acceptBatchMutation = useAcceptBaselinesBatch();
+  let rejectBatchMutation = useRejectBaselinesBatch();
 
   let {
     filteredComparisons,
@@ -152,38 +164,93 @@ export default function ComparisonsView() {
     [setLocation]
   );
 
-  // Accept a single comparison
-  let handleAcceptComparison = useCallback(
-    id => {
-      setLoadingStates(prev => ({ ...prev, [id]: 'accepting' }));
-      acceptMutation.mutate(id, {
+  let updateLoadingStateForIds = useCallback((ids, state) => {
+    setLoadingStates(prev => {
+      let next = { ...prev };
+
+      for (let id of ids) {
+        if (!id) continue;
+
+        if (state) {
+          next[id] = state;
+        } else {
+          delete next[id];
+        }
+      }
+
+      return next;
+    });
+  }, []);
+
+  let handleAcceptGroup = useCallback(
+    ids => {
+      if (!ids || ids.length === 0) return;
+
+      updateLoadingStateForIds(ids, 'accepting');
+      acceptBatchMutation.mutate(ids, {
         onSuccess: () => {
-          setLoadingStates(prev => ({ ...prev, [id]: 'accepted' }));
+          updateLoadingStateForIds(ids, 'accepted');
         },
         onError: err => {
-          setLoadingStates(prev => ({ ...prev, [id]: undefined }));
+          let succeededIds = asIdList(err?.succeededIds);
+          let failedIds = asIdList(err?.failedIds);
+
+          if (succeededIds.length > 0) {
+            updateLoadingStateForIds(succeededIds, 'accepted');
+          }
+
+          if (failedIds.length > 0) {
+            updateLoadingStateForIds(failedIds, null);
+          } else {
+            updateLoadingStateForIds(ids, null);
+          }
+
           addToast(`Failed to accept: ${err.message}`, 'error');
         },
       });
     },
-    [acceptMutation, addToast]
+    [acceptBatchMutation, addToast, updateLoadingStateForIds]
   );
 
-  // Reject a single comparison
-  let handleRejectComparison = useCallback(
-    id => {
-      setLoadingStates(prev => ({ ...prev, [id]: 'rejecting' }));
-      rejectMutation.mutate(id, {
+  let handleRejectGroup = useCallback(
+    ids => {
+      if (!ids || ids.length === 0) return;
+
+      updateLoadingStateForIds(ids, 'rejecting');
+      rejectBatchMutation.mutate(ids, {
         onSuccess: () => {
-          setLoadingStates(prev => ({ ...prev, [id]: 'rejected' }));
+          updateLoadingStateForIds(ids, 'rejected');
         },
         onError: err => {
-          setLoadingStates(prev => ({ ...prev, [id]: undefined }));
+          let succeededIds = asIdList(err?.succeededIds);
+          let failedIds = asIdList(err?.failedIds);
+
+          if (succeededIds.length > 0) {
+            updateLoadingStateForIds(succeededIds, 'rejected');
+          }
+
+          if (failedIds.length > 0) {
+            updateLoadingStateForIds(failedIds, null);
+          } else {
+            updateLoadingStateForIds(ids, null);
+          }
+
           addToast(`Failed to reject: ${err.message}`, 'error');
         },
       });
     },
-    [rejectMutation, addToast]
+    [rejectBatchMutation, addToast, updateLoadingStateForIds]
+  );
+
+  // Single-item handlers for fallback paths
+  let handleAcceptComparison = useCallback(
+    id => handleAcceptGroup(id ? [id] : []),
+    [handleAcceptGroup]
+  );
+
+  let handleRejectComparison = useCallback(
+    id => handleRejectGroup(id ? [id] : []),
+    [handleRejectGroup]
   );
 
   let handleAcceptAll = useCallback(async () => {
@@ -227,7 +294,6 @@ export default function ComparisonsView() {
   let newCount =
     reportData?.comparisons?.filter(c => isNewComparisonStatus(c.status))
       .length || 0;
-  let _totalToAccept = failedCount + newCount;
 
   if (hasNoComparisons) {
     return (
@@ -302,6 +368,8 @@ export default function ComparisonsView() {
           onSelectComparison={handleSelectComparison}
           onAcceptComparison={handleAcceptComparison}
           onRejectComparison={handleRejectComparison}
+          onAcceptGroup={handleAcceptGroup}
+          onRejectGroup={handleRejectGroup}
           loadingStates={loadingStates}
         />
       )}