refactor(frontend): finalize abort-safe effect loading flows

Agent-Logs-Url: https://github.com/bg-playground/BGSTM/sessions/9076fdda-8521-48c4-b1fe-54df29bd6181

Co-authored-by: bg-playground <259109604+bg-playground@users.noreply.github.com>

Author: Copilot

frontend/src/pages/MetricsDashboardPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { isRequestCanceled } from "../api/client";
 import traceabilityApi, { type Metrics } from "../api/traceability";
 import { useToast } from "../context/ToastContext";
@@ -9,6 +9,7 @@ export default function MetricsDashboardPage() {
   const [metrics, setMetrics] = useState<Metrics | null>(null);
   const [loading, setLoading] = useState(true);
   const [exporting, setExporting] = useState(false);
+  const refreshControllerRef = useRef<AbortController | null>(null);
   const { showToast } = useToast();
 
   const loadMetrics = useCallback(async (signal?: AbortSignal) => {
@@ -29,6 +30,19 @@ export default function MetricsDashboardPage() {
     await loadMetrics(signal);
   }, [loadMetrics]);
 
+  useEffect(() => {
+    return () => {
+      refreshControllerRef.current?.abort();
+    };
+  }, []);
+
+  const handleRefresh = useCallback(() => {
+    refreshControllerRef.current?.abort();
+    const controller = new AbortController();
+    refreshControllerRef.current = controller;
+    void loadMetrics(controller.signal);
+  }, [loadMetrics]);
+
   const handleExportCsv = useCallback(async () => {
     try {
       setExporting(true);
@@ -88,9 +102,7 @@ export default function MetricsDashboardPage() {
             Export CSV
           </button>
           <button
-            onClick={() => {
-              void loadMetrics();
-            }}
+            onClick={handleRefresh}
             disabled={loading}
             className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 disabled:bg-gray-400"
           >

frontend/src/pages/TestRunDetailPage.tsx

@@ -60,7 +60,11 @@ const TestRunDetailPage: React.FC = () => {
       let total = 0;
       do {
         if (signal.aborted) break;
-        const caseRes = await externalResultsApi.listSessionCases(sessionId, { skip, limit }, { signal });
+        const caseRes = await externalResultsApi.listSessionCases(
+          sessionId,
+          { skip, limit },
+          { signal }
+        );
         allCases.push(...caseRes.data.cases);
         total = caseRes.data.total;
         skip += caseRes.data.cases.length;

frontend/src/pages/TraceabilityMatrixPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { isRequestCanceled } from "../api/client";
 import traceabilityApi, { type TraceabilityMatrix } from "../api/traceability";
 import { useToast } from "../context/ToastContext";
@@ -9,6 +9,7 @@ export default function TraceabilityMatrixPage() {
   const [matrix, setMatrix] = useState<TraceabilityMatrix | null>(null);
   const [loading, setLoading] = useState(true);
   const [exporting, setExporting] = useState(false);
+  const refreshControllerRef = useRef<AbortController | null>(null);
   const { showToast } = useToast();
 
   const loadMatrix = useCallback(async (signal?: AbortSignal) => {
@@ -29,6 +30,19 @@ export default function TraceabilityMatrixPage() {
     await loadMatrix(signal);
   }, [loadMatrix]);
 
+  useEffect(() => {
+    return () => {
+      refreshControllerRef.current?.abort();
+    };
+  }, []);
+
+  const handleRefresh = useCallback(() => {
+    refreshControllerRef.current?.abort();
+    const controller = new AbortController();
+    refreshControllerRef.current = controller;
+    void loadMatrix(controller.signal);
+  }, [loadMatrix]);
+
   const handleExport = async (format: "csv" | "json" | "pdf") => {
     try {
       setExporting(true);
@@ -113,9 +127,7 @@ export default function TraceabilityMatrixPage() {
             Export PDF
           </button>
           <button
-            onClick={() => {
-              void loadMatrix();
-            }}
+            onClick={handleRefresh}
             disabled={loading}
             className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 disabled:bg-gray-400"
           >