fix: CI failures + ironclad pre-commit hooks

Fixes CI failures from CodeRabbit feedback PR:

1. ESLint react-hooks/set-state-in-effect error:
- Restructured CaseSelector to use inline async function pattern
- Moved fetch logic inside useEffect (React docs recommended pattern)
- Added isActive guard for cleanup race conditions

2. Coverage threshold (69.23% < 70%):
- Added test for 503 cold-start retry scenario
- Added casesColdStart mock handler with retry counter
- Coverage now 71% (70 tests passing)

3. Added ironclad pre-commit hooks for frontend:
- frontend-lint: ESLint on commit
- frontend-typecheck: TypeScript on commit
- frontend-test: Coverage tests on push (slower, so push-only)

This ensures CI failures are caught locally before push.

.pre-commit-config.yaml

@@ -1,4 +1,7 @@
 repos:
+  # ============================================
+  # BACKEND HOOKS (Python)
+  # ============================================
   - repo: https://github.com/astral-sh/ruff-pre-commit
     rev: v0.14.8
     hooks:
@@ -17,6 +20,36 @@ repos:
         # Exclude auto-generated Gradio custom component files
         exclude: ^packages/niivueviewer/
 
+  # ============================================
+  # FRONTEND HOOKS (TypeScript/React)
+  # ============================================
+  - repo: local
+    hooks:
+      - id: frontend-lint
+        name: frontend-lint (eslint)
+        entry: bash -c 'cd frontend && npm run lint'
+        language: system
+        files: ^frontend/.*\.(ts|tsx|js|jsx)$
+        pass_filenames: false
+
+      - id: frontend-typecheck
+        name: frontend-typecheck (tsc)
+        entry: bash -c 'cd frontend && npx tsc --noEmit'
+        language: system
+        files: ^frontend/.*\.(ts|tsx)$
+        pass_filenames: false
+
+      - id: frontend-test
+        name: frontend-test (vitest coverage)
+        entry: bash -c 'cd frontend && npm run test:coverage'
+        language: system
+        files: ^frontend/.*\.(ts|tsx)$
+        pass_filenames: false
+        stages: [pre-push]  # Run on push only (tests are slow)
+
+  # ============================================
+  # GENERAL HOOKS
+  # ============================================
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v6.0.0
     hooks:

frontend/src/components/CaseSelector.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState } from "react";
 import { apiClient, ApiError } from "../api/client";
 
 // Cold start retry configuration (matches useSegmentation.ts)
@@ -21,60 +21,70 @@ export function CaseSelector({
   const [retryCount, setRetryCount] = useState(0);
   const [isWakingUp, setIsWakingUp] = useState(false);
 
-  const fetchCases = useCallback(async (signal: AbortSignal) => {
-    let attempts = 0;
+  // Fetch cases on mount with cold-start retry logic
+  // Using inline async function pattern recommended by React docs for data fetching
+  useEffect(() => {
+    let isActive = true;
+    const abortController = new AbortController();
 
-    while (attempts <= MAX_COLD_START_RETRIES) {
-      try {
-        const data = await apiClient.getCases(signal);
-        setCases(data.cases);
-        setIsWakingUp(false);
-        setRetryCount(0);
-        setIsLoading(false);
-        return; // Success
-      } catch (err) {
-        if (err instanceof Error && err.name === "AbortError") return;
+    async function fetchCases() {
+      let attempts = 0;
 
-        const is503 = err instanceof ApiError && err.status === 503;
-        const isNetworkError =
-          err instanceof TypeError &&
-          err.message.toLowerCase().includes("fetch");
+      while (attempts <= MAX_COLD_START_RETRIES && isActive) {
+        try {
+          const data = await apiClient.getCases(abortController.signal);
+          if (!isActive) return;
+          setCases(data.cases);
+          setIsWakingUp(false);
+          setRetryCount(0);
+          setIsLoading(false);
+          return; // Success
+        } catch (err) {
+          if (!isActive) return;
+          if (err instanceof Error && err.name === "AbortError") return;
 
-        // Retry on cold start (503) or network errors
-        if ((is503 || isNetworkError) && attempts < MAX_COLD_START_RETRIES) {
-          attempts++;
-          setRetryCount(attempts);
-          setIsWakingUp(true);
+          const is503 = err instanceof ApiError && err.status === 503;
+          const isNetworkError =
+            err instanceof TypeError &&
+            err.message.toLowerCase().includes("fetch");
 
-          // Exponential backoff
-          const delay = Math.min(
-            INITIAL_RETRY_DELAY * Math.pow(2, attempts - 1),
-            MAX_RETRY_DELAY,
-          );
-          await new Promise((resolve) => setTimeout(resolve, delay));
-          continue;
-        }
+          // Retry on cold start (503) or network errors
+          if ((is503 || isNetworkError) && attempts < MAX_COLD_START_RETRIES) {
+            attempts++;
+            setRetryCount(attempts);
+            setIsWakingUp(true);
 
-        // Max retries exceeded or non-retryable error
-        const message =
-          is503 || isNetworkError
-            ? "Backend failed to wake up. Please refresh the page."
-            : err instanceof Error
-              ? err.message
-              : "Unknown error";
-        setError(`Failed to load cases: ${message}`);
-        setIsWakingUp(false);
-        setIsLoading(false);
-        return;
+            // Exponential backoff
+            const delay = Math.min(
+              INITIAL_RETRY_DELAY * Math.pow(2, attempts - 1),
+              MAX_RETRY_DELAY,
+            );
+            await new Promise((resolve) => setTimeout(resolve, delay));
+            continue;
+          }
+
+          // Max retries exceeded or non-retryable error
+          const message =
+            is503 || isNetworkError
+              ? "Backend failed to wake up. Please refresh the page."
+              : err instanceof Error
+                ? err.message
+                : "Unknown error";
+          setError(`Failed to load cases: ${message}`);
+          setIsWakingUp(false);
+          setIsLoading(false);
+          return;
+        }
       }
     }
-  }, []);
 
-  useEffect(() => {
-    const abortController = new AbortController();
-    fetchCases(abortController.signal);
-    return () => abortController.abort();
-  }, [fetchCases]);
+    fetchCases();
+
+    return () => {
+      isActive = false;
+      abortController.abort();
+    };
+  }, []);
 
   if (isLoading) {
     return (

frontend/src/components/__tests__/CaseSelector.test.tsx

@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { server } from "../../mocks/server";
-import { errorHandlers } from "../../mocks/handlers";
+import { errorHandlers, resetCasesAttempts } from "../../mocks/handlers";
 import { CaseSelector } from "../CaseSelector";
 
 describe("CaseSelector", () => {
@@ -10,6 +10,7 @@ describe("CaseSelector", () => {
 
   beforeEach(() => {
     mockOnSelectCase.mockClear();
+    resetCasesAttempts();
   });
 
   it("shows loading state initially", () => {
@@ -117,4 +118,32 @@ describe("CaseSelector", () => {
     const container = screen.getByRole("combobox").closest("div");
     expect(container).toHaveClass("bg-gray-800");
   });
+
+  it("retries on 503 cold-start and succeeds", async () => {
+    server.use(errorHandlers.casesColdStart);
+
+    render(
+      <CaseSelector selectedCase={null} onSelectCase={mockOnSelectCase} />,
+    );
+
+    // Should show waking up message during retry
+    await waitFor(
+      () => {
+        expect(screen.getByText(/waking up/i)).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    // Should eventually succeed and show cases
+    await waitFor(
+      () => {
+        expect(screen.getByRole("combobox")).toBeInTheDocument();
+      },
+      { timeout: 5000 },
+    );
+
+    expect(
+      screen.getByRole("option", { name: /sub-stroke0001/i }),
+    ).toBeInTheDocument();
+  });
 });

frontend/src/mocks/handlers.ts

@@ -173,6 +173,14 @@ export const handlers = [
   }),
 ];
 
+// Track retry attempts for cold-start testing
+let casesAttempts = 0;
+
+/** Reset the cases attempt counter (call in test beforeEach) */
+export function resetCasesAttempts(): void {
+  casesAttempts = 0;
+}
+
 // Error handlers for testing error states
 export const errorHandlers = {
   casesServerError: http.get(`${API_BASE}/api/cases`, () => {
@@ -186,6 +194,21 @@ export const errorHandlers = {
     return HttpResponse.error();
   }),
 
+  // 503 on first attempt, success on retry (tests cold-start retry)
+  casesColdStart: http.get(`${API_BASE}/api/cases`, async () => {
+    casesAttempts++;
+    if (casesAttempts === 1) {
+      return HttpResponse.json(
+        { detail: "Service Unavailable" },
+        { status: 503 },
+      );
+    }
+    // Succeed on retry
+    return HttpResponse.json({
+      cases: ["sub-stroke0001", "sub-stroke0002", "sub-stroke0003"],
+    });
+  }),
+
   segmentCreateError: http.post(`${API_BASE}/api/segment`, () => {
     return HttpResponse.json(
       { detail: "Failed to create job: case not found" },