ci: Bump version to 0.2.2 [skip ci]

.gitea/workflows/deploy-to-prod.yml

@@ -138,6 +138,10 @@ jobs:
           cd /var/www/flyer-crawler.projectium.com
           npm install --omit=dev
 
+          # --- Cleanup Errored Processes ---
+          echo "Cleaning up errored or stopped PM2 processes..."
+          node -e "const exec = require('child_process').execSync; try { const list = JSON.parse(exec('pm2 jlist').toString()); list.forEach(p => { if (p.pm2_env.status === 'errored' || p.pm2_env.status === 'stopped') { console.log('Deleting ' + p.pm2_env.status + ' process: ' + p.name + ' (' + p.pm2_env.pm_id + ')'); try { exec('pm2 delete ' + p.pm2_env.pm_id); } catch(e) { console.error('Failed to delete ' + p.pm2_env.pm_id); } } }); } catch (e) { console.error('Error cleaning up processes:', e); }"
+
           # --- Version Check Logic ---
           # Get the version from the newly deployed package.json
           NEW_VERSION=$(node -p "require('./package.json').version")

.gitea/workflows/deploy-to-test.yml

@@ -397,6 +397,11 @@ jobs:
           echo "Installing production dependencies and restarting test server..."
           cd /var/www/flyer-crawler-test.projectium.com
           npm install --omit=dev
+
+          # --- Cleanup Errored Processes ---
+          echo "Cleaning up errored or stopped PM2 processes..."
+          node -e "const exec = require('child_process').execSync; try { const list = JSON.parse(exec('pm2 jlist').toString()); list.forEach(p => { if (p.pm2_env.status === 'errored' || p.pm2_env.status === 'stopped') { console.log('Deleting ' + p.pm2_env.status + ' process: ' + p.name + ' (' + p.pm2_env.pm_id + ')'); try { exec('pm2 delete ' + p.pm2_env.pm_id); } catch(e) { console.error('Failed to delete ' + p.pm2_env.pm_id); } } }); } catch (e) { console.error('Error cleaning up processes:', e); }"
+
           # Use `startOrReload` with the ecosystem file. This is the standard, idempotent way to deploy.
           # It will START the process if it's not running, or RELOAD it if it is.
           # We also add `&& pm2 save` to persist the process list across server reboots.

.gitea/workflows/manual-deploy-major.yml

@@ -137,6 +137,10 @@ jobs:
           cd /var/www/flyer-crawler.projectium.com
           npm install --omit=dev
 
+          # --- Cleanup Errored Processes ---
+          echo "Cleaning up errored or stopped PM2 processes..."
+          node -e "const exec = require('child_process').execSync; try { const list = JSON.parse(exec('pm2 jlist').toString()); list.forEach(p => { if (p.pm2_env.status === 'errored' || p.pm2_env.status === 'stopped') { console.log('Deleting ' + p.pm2_env.status + ' process: ' + p.name + ' (' + p.pm2_env.pm_id + ')'); try { exec('pm2 delete ' + p.pm2_env.pm_id); } catch(e) { console.error('Failed to delete ' + p.pm2_env.pm_id); } } }); } catch (e) { console.error('Error cleaning up processes:', e); }"
+
           # --- Version Check Logic ---
           # Get the version from the newly deployed package.json
           NEW_VERSION=$(node -p "require('./package.json').version")

ecosystem.config.cjs

@@ -13,6 +13,7 @@ module.exports = {
       name: 'flyer-crawler-api',
       script: './node_modules/.bin/tsx',
       args: 'server.ts', // tsx will execute this file
+      max_memory_restart: '500M', // Restart if memory usage exceeds 500MB
       // Production Environment Settings
       env_production: {
         NODE_ENV: 'production', // Set the Node.js environment to production
@@ -89,6 +90,7 @@ module.exports = {
       name: 'flyer-crawler-worker',
       script: './node_modules/.bin/tsx',
       args: 'src/services/worker.ts', // tsx will execute this file
+      max_memory_restart: '1G', // Restart if memory usage exceeds 1GB
       // Production Environment Settings
       env_production: {
         NODE_ENV: 'production',
@@ -165,6 +167,7 @@ module.exports = {
       name: 'flyer-crawler-analytics-worker',
       script: './node_modules/.bin/tsx',
       args: 'src/services/worker.ts', // tsx will execute this file
+      max_memory_restart: '1G', // Restart if memory usage exceeds 1GB
       // Production Environment Settings
       env_production: {
         NODE_ENV: 'production',

package-lock.json

@@ -1,16 +1,17 @@
 {
   "name": "flyer-crawler",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "flyer-crawler",
-      "version": "0.2.0",
+      "version": "0.2.2",
       "dependencies": {
         "@bull-board/api": "^6.14.2",
         "@bull-board/express": "^6.14.2",
         "@google/genai": "^1.30.0",
+        "@tanstack/react-query": "^5.90.12",
         "@types/connect-timeout": "^1.9.0",
         "bcrypt": "^5.1.1",
         "bullmq": "^5.65.1",
@@ -4882,6 +4883,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.90.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.12.tgz",
+      "integrity": "sha512-T1/8t5DhV/SisWjDnaiU2drl6ySvsHj1bHBCWNXd+/T+Hh1cf6JodyEYMd5sgwm+b/mETT4EV3H+zCVczCU5hg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.90.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.12.tgz",
+      "integrity": "sha512-graRZspg7EoEaw0a8faiUASCyJrqjKPdqJ9EwuDRUF9mEYJ1YPczI9H+/agJ0mOJkPCJDk0lsz5QTrLZ/jQ2rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.90.12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@testcontainers/postgresql": {
       "version": "11.10.0",
       "resolved": "https://registry.npmjs.org/@testcontainers/postgresql/-/postgresql-11.10.0.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "flyer-crawler",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "scripts": {
     "dev": "concurrently \"npm:start:dev\" \"vite\"",
@@ -30,6 +30,7 @@
     "@bull-board/api": "^6.14.2",
     "@bull-board/express": "^6.14.2",
     "@google/genai": "^1.30.0",
+    "@tanstack/react-query": "^5.90.12",
     "@types/connect-timeout": "^1.9.0",
     "bcrypt": "^5.1.1",
     "bullmq": "^5.65.1",

src/App.tsx

@@ -1,6 +1,7 @@
 // src/App.tsx
 import React, { useState, useCallback, useEffect } from 'react';
 import { Routes, Route, useParams, useLocation, useNavigate } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Toaster } from 'react-hot-toast';
 import * as pdfjsLib from 'pdfjs-dist';
 import { Footer } from './components/Footer'; // Assuming this is where your Footer component will live
@@ -35,6 +36,9 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
   import.meta.url,
 ).toString();
 
+// Create a client
+const queryClient = new QueryClient();
+
 function App() {
   const { userProfile, authStatus, login, logout, updateProfile } = useAuth();
   const { flyers } = useFlyers();
@@ -345,4 +349,10 @@ function App() {
   );
 }
 
-export default App;
+const WrappedApp = () => (
+  <QueryClientProvider client={queryClient}>
+    <App />
+  </QueryClientProvider>
+);
+
+export default WrappedApp;

src/features/flyer/FlyerUploader.test.tsx

@@ -6,6 +6,7 @@ import { FlyerUploader } from './FlyerUploader';
 import * as aiApiClientModule from '../../services/aiApiClient';
 import * as checksumModule from '../../utils/checksum';
 import { useNavigate, MemoryRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 // Mock dependencies
 vi.mock('../../services/aiApiClient');
@@ -39,10 +40,19 @@ const mockedChecksumModule = checksumModule as unknown as {
 
 const renderComponent = (onProcessingComplete = vi.fn()) => {
   console.log('--- [TEST LOG] ---: Rendering component inside MemoryRouter.');
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
   return render(
-    <MemoryRouter>
-      <FlyerUploader onProcessingComplete={onProcessingComplete} />
-    </MemoryRouter>,
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        <FlyerUploader onProcessingComplete={onProcessingComplete} />
+      </MemoryRouter>
+    </QueryClientProvider>,
   );
 };
 
@@ -224,7 +234,11 @@ describe('FlyerUploader', () => {
     mockedAiApiClient.uploadAndProcessFlyer.mockResolvedValue({ jobId: 'job-fail' });
     mockedAiApiClient.getJobStatus.mockResolvedValue({
       state: 'failed',
-      failedReason: 'AI model exploded',
+      progress: {
+        errorCode: 'UNKNOWN_ERROR',
+        message: 'AI model exploded',
+      },
+      failedReason: 'This is the raw error message.', // The UI should prefer the progress message.
     });
 
     console.log('--- [TEST LOG] ---: 2. Rendering and uploading.');
@@ -259,7 +273,11 @@ describe('FlyerUploader', () => {
     // We need at least one 'active' response to establish a timeout loop so we have something to clear
     mockedAiApiClient.getJobStatus
       .mockResolvedValueOnce({ state: 'active', progress: { message: 'Working...' } })
-      .mockResolvedValueOnce({ state: 'failed', failedReason: 'Fatal Error' });
+      .mockResolvedValueOnce({
+        state: 'failed',
+        progress: { errorCode: 'UNKNOWN_ERROR', message: 'Fatal Error' },
+        failedReason: 'Fatal Error',
+      });
 
     renderComponent();
     const file = new File(['content'], 'flyer.pdf', { type: 'application/pdf' });

src/features/flyer/FlyerUploader.tsx

@@ -1,208 +1,62 @@
 // src/features/flyer/FlyerUploader.tsx
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
-import { uploadAndProcessFlyer, getJobStatus } from '../../services/aiApiClient';
-import { generateFileChecksum } from '../../utils/checksum';
 import { logger } from '../../services/logger.client';
 import { ProcessingStatus } from './ProcessingStatus';
-import type { ProcessingStage } from '../../types';
 import { useDragAndDrop } from '../../hooks/useDragAndDrop';
-
-type ProcessingState = 'idle' | 'uploading' | 'polling' | 'completed' | 'error';
+import { useFlyerUploader } from '../../hooks/useFlyerUploader';
 
 interface FlyerUploaderProps {
   onProcessingComplete: () => void;
 }
 
 export const FlyerUploader: React.FC<FlyerUploaderProps> = ({ onProcessingComplete }) => {
-  const [processingState, setProcessingState] = useState<ProcessingState>('idle');
-  const [statusMessage, setStatusMessage] = useState<string | null>(null);
-  const [jobId, setJobId] = useState<string | null>(null);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const [duplicateFlyerId, setDuplicateFlyerId] = useState<number | null>(null);
   const navigate = useNavigate();
 
-  const pollingTimeoutRef = useRef<number | null>(null);
-
-  const [processingStages, setProcessingStages] = useState<ProcessingStage[]>([]);
-  const [estimatedTime, setEstimatedTime] = useState(0);
-  const [currentFile, setCurrentFile] = useState<string | null>(null);
-
-  // DEBUG: Log component mount and unmount
-  useEffect(() => {
-    console.debug('[DEBUG] FlyerUploader: Component did mount.');
-    return () => {
-      console.debug('[DEBUG] FlyerUploader: Component will unmount.');
-    };
-  }, []);
-
-  // DEBUG: Log state changes
-  useEffect(() => {
-    console.debug(`[DEBUG] FlyerUploader: processingState changed to -> ${processingState}`);
-  }, [processingState]);
+  const {
+    processingState,
+    statusMessage,
+    errorMessage,
+    duplicateFlyerId,
+    processingStages,
+    estimatedTime,
+    currentFile,
+    flyerId,
+    upload,
+    resetUploaderState,
+  } = useFlyerUploader();
 
   useEffect(() => {
     if (statusMessage) logger.info(`FlyerUploader Status: ${statusMessage}`);
   }, [statusMessage]);
 
+  // Handle completion and navigation
   useEffect(() => {
-    console.debug(`[DEBUG] Polling Effect Triggered: state=${processingState}, jobId=${jobId}`);
-    if (processingState !== 'polling' || !jobId) {
-      if (pollingTimeoutRef.current) {
-        console.debug(
-          `[DEBUG] Polling Effect: Clearing timeout ID ${pollingTimeoutRef.current} because state is not 'polling' or no jobId exists.`,
-        );
-        clearTimeout(pollingTimeoutRef.current);
-      }
-      return;
+    if (processingState === 'completed' && flyerId) {
+      onProcessingComplete();
+      // Small delay to show the "Complete" state before redirecting
+      const timer = setTimeout(() => {
+        navigate(`/flyers/${flyerId}`);
+      }, 1500);
+      return () => clearTimeout(timer);
     }
-
-    const pollStatus = async () => {
-      console.debug(`[DEBUG] pollStatus(): Polling for jobId: ${jobId}`);
-      try {
-        const job = await getJobStatus(jobId); // Now returns parsed JSON directly
-        console.debug('[DEBUG] pollStatus(): Job status received:', job); // The rest of the logic remains the same
-
-        if (job.progress) {
-          setProcessingStages(job.progress.stages || []);
-          setEstimatedTime(job.progress.estimatedTimeRemaining || 0);
-          setStatusMessage(job.progress.message || null);
-        }
-
-        switch (job.state) {
-          case 'completed':
-            console.debug('[DEBUG] pollStatus(): Job state is "completed".');
-            const flyerId = job.returnValue?.flyerId;
-            if (flyerId) {
-              setStatusMessage(`Processing complete! Redirecting to flyer ${flyerId}...`);
-              setProcessingState('completed');
-              onProcessingComplete();
-              console.debug('[DEBUG] pollStatus(): Setting 1500ms timeout for redirect.');
-              setTimeout(() => {
-                console.debug(`[DEBUG] pollStatus(): Redirecting to /flyers/${flyerId}`);
-                navigate(`/flyers/${flyerId}`);
-              }, 1500);
-            } else {
-              throw new Error('Job completed but did not return a flyer ID.');
-            }
-            break;
-
-          case 'failed':
-            console.debug(
-              `[DEBUG] pollStatus(): Job state is "failed". Reason: ${job.failedReason}`,
-            );
-            // Explicitly clear any pending timeout to stop the polling loop immediately.
-            if (pollingTimeoutRef.current) {
-              clearTimeout(pollingTimeoutRef.current);
-            }
-            setErrorMessage(`Processing failed: ${job.failedReason || 'Unknown error'}`);
-            // Clear any stale "in-progress" messages to avoid user confusion.
-            setStatusMessage(null);
-            setProcessingState('error');
-            break;
-
-          case 'active':
-          case 'waiting':
-          default:
-            console.debug(
-              `[DEBUG] pollStatus(): Job state is "${job.state}". Setting timeout for next poll (3000ms).`,
-            );
-            pollingTimeoutRef.current = window.setTimeout(pollStatus, 3000);
-            console.debug(`[DEBUG] pollStatus(): Timeout ID ${pollingTimeoutRef.current} set.`);
-            break;
-        }
-      } catch (error) {
-        logger.error({ error }, 'Error during polling:');
-        setErrorMessage(
-          error instanceof Error ? error.message : 'An unexpected error occurred during polling.',
-        );
-        setProcessingState('error');
-      }
-    };
-
-    pollStatus();
-
-    return () => {
-      if (pollingTimeoutRef.current) {
-        console.debug(
-          `[DEBUG] Polling Effect Cleanup: Clearing timeout ID ${pollingTimeoutRef.current}`,
-        );
-        clearTimeout(pollingTimeoutRef.current);
-        pollingTimeoutRef.current = null;
-      } else {
-        console.debug('[DEBUG] Polling Effect Cleanup: No active timeout to clear.');
-      }
-    };
-  }, [processingState, jobId, onProcessingComplete, navigate]);
-
-  const processFile = useCallback(async (file: File) => {
-    console.debug('[DEBUG] processFile(): Starting file processing for', file.name);
-    setProcessingState('uploading');
-    setErrorMessage(null);
-    setDuplicateFlyerId(null);
-    setCurrentFile(file.name);
-
-    try {
-      console.debug('[DEBUG] processFile(): Generating file checksum.');
-      const checksum = await generateFileChecksum(file);
-      setStatusMessage('Uploading file...');
-      console.debug(
-        `[DEBUG] processFile(): Checksum generated: ${checksum}. Calling uploadAndProcessFlyer.`,
-      );
-
-      // The API client now returns parsed JSON on success or throws a structured error on failure.
-      const { jobId: newJobId } = await uploadAndProcessFlyer(file, checksum);
-      console.debug(`[DEBUG] processFile(): Upload successful. Received jobId: ${newJobId}`);
-      setJobId(newJobId);
-      setProcessingState('polling');
-    } catch (error: any) {
-      // Handle the structured error thrown by the API client.
-      logger.error({ error }, 'An error occurred during file upload:');
-      // Handle 409 Conflict for duplicate flyers
-      if (error?.status === 409 && error.body?.flyerId) {
-        setErrorMessage(`This flyer has already been processed. You can view it here:`);
-        setDuplicateFlyerId(error.body.flyerId);
-      } else {
-        // Handle other errors (e.g., validation, server errors)
-        const message =
-          error?.body?.message || error?.message || 'An unexpected error occurred during upload.';
-        setErrorMessage(message);
-      }
-      setProcessingState('error');
-    }
-  }, []);
+  }, [processingState, flyerId, onProcessingComplete, navigate]);
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    console.debug('[DEBUG] handleFileChange(): File input changed.');
     const file = event.target.files?.[0];
     if (file) {
-      processFile(file);
+      upload(file);
     }
     event.target.value = '';
   };
 
-  const resetUploaderState = useCallback(() => {
-    console.debug(
-      `[DEBUG] resetUploaderState(): User triggered reset. Previous jobId was: ${jobId}`,
-    );
-    setProcessingState('idle');
-    setJobId(null);
-    setErrorMessage(null);
-    setDuplicateFlyerId(null);
-    setCurrentFile(null);
-    setProcessingStages([]);
-    setEstimatedTime(0);
-    logger.info('Uploader state has been reset. Previous job ID was:', jobId);
-  }, [jobId]);
-
   const onFilesDropped = useCallback(
     (files: FileList) => {
-      console.debug('[DEBUG] onFilesDropped(): Files were dropped.');
       if (files && files.length > 0) {
-        processFile(files[0]);
+        upload(files[0]);
       }
     },
-    [processFile],
+    [upload],
   );
 
   const isProcessing = processingState === 'uploading' || processingState === 'polling';
@@ -216,11 +70,6 @@ export const FlyerUploader: React.FC<FlyerUploaderProps> = ({ onProcessingComple
     ? 'bg-brand-light/50 dark:bg-brand-dark/20'
     : 'bg-gray-50/50 dark:bg-gray-800/20';
 
-  // If processing, show the detailed status component. Otherwise, show the uploader.
-  console.debug(
-    `[DEBUG] FlyerUploader: Rendering. State=${processingState}, Msg=${statusMessage}, Err=${!!errorMessage}`,
-  );
-
   if (isProcessing || processingState === 'completed' || processingState === 'error') {
     return (
       <div className="max-w-4xl mx-auto">
@@ -230,13 +79,17 @@ export const FlyerUploader: React.FC<FlyerUploaderProps> = ({ onProcessingComple
           currentFile={currentFile}
         />
         <div className="mt-4 text-center">
-          {/* Display the current status message to the user and the test runner */}
-          {statusMessage && (
+          {/* Display status message if not completed (completed has its own redirect logic) */}
+          {statusMessage && processingState !== 'completed' && (
             <p className="text-gray-600 dark:text-gray-400 mt-2 italic animate-pulse">
               {statusMessage}
             </p>
           )}
 
+          {processingState === 'completed' && (
+            <p className="text-green-600 dark:text-green-400 mt-2 font-bold">Processing complete! Redirecting...</p>
+          )}
+
           {errorMessage && (
             <div className="text-red-600 dark:text-red-400 font-semibold p-4 bg-red-100 dark:bg-red-900/30 rounded-md">
               <p>{errorMessage}</p>

src/hooks/useFlyerUploader.test.tsx

@@ -0,0 +1,133 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useFlyerUploader } from './useFlyerUploader';
+import * as aiApiClient from '../services/aiApiClient';
+import * as checksumUtil from '../utils/checksum';
+
+// Mock dependencies
+vi.mock('../services/aiApiClient');
+vi.mock('../utils/checksum');
+vi.mock('../services/logger.client', () => ({
+  logger: {
+    info: vi.fn(),
+    error: vi.fn(),
+    warn: vi.fn(),
+    debug: vi.fn(),
+  },
+}));
+
+const mockedAiApiClient = vi.mocked(aiApiClient);
+const mockedChecksumUtil = vi.mocked(checksumUtil);
+
+// Helper to wrap the hook with QueryClientProvider, which is required by react-query
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false, // Disable retries for tests for predictable behavior
+      },
+    },
+  });
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+describe('useFlyerUploader Hook with React Query', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    mockedChecksumUtil.generateFileChecksum.mockResolvedValue('mock-checksum');
+  });
+
+  it('should handle a successful upload and polling flow', async () => {
+    // Arrange
+    const mockJobId = 'job-123';
+    mockedAiApiClient.uploadAndProcessFlyer.mockResolvedValue({ jobId: mockJobId });
+    mockedAiApiClient.getJobStatus
+      .mockResolvedValueOnce({
+        // First poll: active
+        id: mockJobId,
+        state: 'active',
+        progress: { message: 'Processing...' },
+        returnValue: null,
+        failedReason: null,
+      } as aiApiClient.JobStatus)
+      .mockResolvedValueOnce({
+        // Second poll: completed
+        id: mockJobId,
+        state: 'completed',
+        progress: { message: 'Complete!' },
+        returnValue: { flyerId: 777 },
+        failedReason: null,
+      } as aiApiClient.JobStatus);
+
+    const { result } = renderHook(() => useFlyerUploader(), { wrapper: createWrapper() });
+    const mockFile = new File([''], 'flyer.pdf');
+
+    // Act
+    await act(async () => {
+      result.current.upload(mockFile);
+    });
+
+    // Assert initial upload state
+    await waitFor(() => expect(result.current.processingState).toBe('polling'));
+    expect(result.current.jobId).toBe(mockJobId);
+
+    // Assert polling state
+    await waitFor(() => expect(result.current.statusMessage).toBe('Processing...'));
+
+    // Assert completed state
+    await waitFor(() => expect(result.current.processingState).toBe('completed'), { timeout: 5000 });
+    expect(result.current.flyerId).toBe(777);
+  });
+
+  it('should handle an upload failure', async () => {
+    // Arrange
+    const uploadError = {
+      status: 409,
+      body: { message: 'Duplicate flyer detected.', flyerId: 99 },
+    };
+    mockedAiApiClient.uploadAndProcessFlyer.mockRejectedValue(uploadError);
+
+    const { result } = renderHook(() => useFlyerUploader(), { wrapper: createWrapper() });
+    const mockFile = new File([''], 'flyer.pdf');
+
+    // Act
+    await act(async () => {
+      result.current.upload(mockFile);
+    });
+
+    // Assert error state
+    await waitFor(() => expect(result.current.processingState).toBe('error'));
+    expect(result.current.errorMessage).toBe('Duplicate flyer detected.');
+    expect(result.current.duplicateFlyerId).toBe(99);
+    expect(result.current.jobId).toBeNull();
+  });
+
+  it('should handle a job failure during polling', async () => {
+    // Arrange
+    const mockJobId = 'job-456';
+    mockedAiApiClient.uploadAndProcessFlyer.mockResolvedValue({ jobId: mockJobId });
+
+    // Mock getJobStatus to throw a JobFailedError
+    const jobFailedError = new aiApiClient.JobFailedError(
+      'AI validation failed.',
+      'AI_VALIDATION_FAILED',
+    );
+    mockedAiApiClient.getJobStatus.mockRejectedValue(jobFailedError);
+
+    const { result } = renderHook(() => useFlyerUploader(), { wrapper: createWrapper() });
+    const mockFile = new File([''], 'flyer.pdf');
+
+    // Act
+    await act(async () => {
+      result.current.upload(mockFile);
+    });
+
+    // Assert error state after polling fails
+    await waitFor(() => expect(result.current.processingState).toBe('error'));
+    expect(result.current.errorMessage).toBe('Polling failed: AI validation failed.');
+    expect(result.current.flyerId).toBeNull();
+  });
+});

src/hooks/useFlyerUploader.ts

@@ -0,0 +1,123 @@
+// src/hooks/useFlyerUploader.ts
+// src/hooks/useFlyerUploader.ts
+import { useState, useCallback } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  uploadAndProcessFlyer,
+  getJobStatus,
+  type JobStatus,
+  JobFailedError,
+} from '../services/aiApiClient';
+import { logger } from '../services/logger.client';
+import { generateFileChecksum } from '../utils/checksum';
+import type { ProcessingStage } from '../types';
+
+export type ProcessingState = 'idle' | 'uploading' | 'polling' | 'completed' | 'error';
+
+export const useFlyerUploader = () => {
+  const queryClient = useQueryClient();
+  const [jobId, setJobId] = useState<string | null>(null);
+  const [currentFile, setCurrentFile] = useState<string | null>(null);
+
+  // Mutation for the initial file upload
+  const uploadMutation = useMutation({
+    mutationFn: async (file: File) => {
+      setCurrentFile(file.name);
+      const checksum = await generateFileChecksum(file);
+      return uploadAndProcessFlyer(file, checksum);
+    },
+    onSuccess: (data) => {
+      // When upload is successful, we get a jobId and can start polling.
+      setJobId(data.jobId);
+    },
+    // onError is handled automatically by react-query and exposed in `uploadMutation.error`
+  });
+
+  // Query for polling the job status
+  const { data: jobStatus, error: pollError } = useQuery({
+    queryKey: ['jobStatus', jobId],
+    queryFn: () => {
+      if (!jobId) throw new Error('No job ID to poll');
+      return getJobStatus(jobId);
+    },
+    // Only run this query if there is a jobId
+    enabled: !!jobId,
+    // Polling logic: react-query handles the interval
+    refetchInterval: (query) => {
+      const data = query.state.data;
+      // Stop polling if the job is completed or has failed
+      if (data?.state === 'completed' || data?.state === 'failed') {
+        return false;
+      }
+      // Otherwise, poll every 3 seconds
+      return 3000;
+    },
+    refetchOnWindowFocus: false, // No need to refetch on focus, interval is enough
+    retry: (failureCount, error) => {
+      // Don't retry for our custom JobFailedError, as it's a terminal state.
+      if (error instanceof JobFailedError) {
+        return false;
+      }
+      // For other errors (like network issues), retry up to 3 times.
+      return failureCount < 3;
+    },
+  });
+
+  const upload = useCallback(
+    (file: File) => {
+      // Reset previous state before a new upload
+      setJobId(null);
+      setCurrentFile(null);
+      queryClient.removeQueries({ queryKey: ['jobStatus'] });
+      uploadMutation.mutate(file);
+    },
+    [uploadMutation, queryClient],
+  );
+
+  const resetUploaderState = useCallback(() => {
+    setJobId(null);
+    setCurrentFile(null);
+    uploadMutation.reset();
+    queryClient.removeQueries({ queryKey: ['jobStatus'] });
+  }, [uploadMutation, queryClient]);
+
+  // Consolidate state for the UI from the react-query hooks
+  const processingState = ((): ProcessingState => {
+    if (uploadMutation.isPending) return 'uploading';
+    if (jobStatus && (jobStatus.state === 'active' || jobStatus.state === 'waiting'))
+      return 'polling';
+    if (jobStatus?.state === 'completed') return 'completed';
+    if (uploadMutation.isError || jobStatus?.state === 'failed' || pollError) return 'error';
+    return 'idle';
+  })();
+
+  const getErrorMessage = () => {
+    const uploadError = uploadMutation.error as any;
+    if (uploadMutation.isError) {
+      return uploadError?.body?.message || uploadError?.message || 'Upload failed.';
+    }
+    if (pollError) return `Polling failed: ${pollError.message}`;
+    if (jobStatus?.state === 'failed') {
+      return `Processing failed: ${jobStatus.progress?.message || jobStatus.failedReason}`;
+    }
+    return null;
+  };
+
+  const errorMessage = getErrorMessage();
+  const duplicateFlyerId = (uploadMutation.error as any)?.body?.flyerId ?? null;
+  const flyerId = jobStatus?.state === 'completed' ? jobStatus.returnValue?.flyerId : null;
+
+  return {
+    processingState,
+    statusMessage: uploadMutation.isPending ? 'Uploading file...' : jobStatus?.progress?.message,
+    errorMessage,
+    duplicateFlyerId,
+    processingStages: jobStatus?.progress?.stages || [],
+    estimatedTime: jobStatus?.progress?.estimatedTimeRemaining || 0,
+    currentFile,
+    flyerId,
+    upload,
+    resetUploaderState,
+    jobId,
+  };
+};

src/services/aiApiClient.ts

@@ -63,12 +63,28 @@ export interface JobStatus {
   progress: {
     stages?: ProcessingStage[];
     estimatedTimeRemaining?: number;
+    // The structured error payload from the backend worker
+    errorCode?: string;
     message?: string;
   } | null;
   returnValue: {
     flyerId?: number;
   } | null;
-  failedReason: string | null;
+  failedReason: string | null; // The raw error string from BullMQ
+}
+
+/**
+ * Custom error class for job failures to make `catch` blocks more specific.
+ * This allows the UI to easily distinguish between a job failure and a network error.
+ */
+export class JobFailedError extends Error {
+  public errorCode: string;
+
+  constructor(message: string, errorCode: string) {
+    super(message);
+    this.name = 'JobFailedError';
+    this.errorCode = errorCode;
+  }
 }
 
 /**
@@ -77,7 +93,7 @@ export interface JobStatus {
  * @param jobId The ID of the job to check.
  * @param tokenOverride Optional token for testing.
  * @returns A promise that resolves to the parsed job status object.
- * @throws An error if the network request fails or if the response is not valid JSON.
+ * @throws A `JobFailedError` if the job has failed, or a generic `Error` for other issues.
  */
 export const getJobStatus = async (
   jobId: string,
@@ -85,22 +101,36 @@ export const getJobStatus = async (
 ): Promise<JobStatus> => {
   const response = await apiFetch(`/ai/jobs/${jobId}/status`, {}, { tokenOverride });
 
-  if (!response.ok) {
-    let errorText = `API Error: ${response.status} ${response.statusText}`;
-    try {
-      const errorBody = await response.text();
-      if (errorBody) errorText = `API Error ${response.status}: ${errorBody}`;
-    } catch (e) {
-      // ignore if reading body fails
-    }
-    throw new Error(errorText);
-  }
-
   try {
-    return await response.json();
+    const statusData: JobStatus = await response.json();
+
+    if (!response.ok) {
+      // If the HTTP response itself is an error (e.g., 404, 500), throw an error.
+      // Use the message from the JSON body if available.
+      const errorMessage = (statusData as any).message || `API Error: ${response.status}`;
+      throw new Error(errorMessage);
+    }
+
+    // If the job itself has failed, we should treat this as an error condition
+    // for the polling logic by rejecting the promise. This will stop the polling loop.
+    if (statusData.state === 'failed') {
+      // The structured error payload is in the 'progress' object.
+      const progress = statusData.progress;
+      const userMessage =
+        progress?.message || statusData.failedReason || 'Job failed with an unknown error.';
+      const errorCode = progress?.errorCode || 'UNKNOWN_ERROR';
+
+      logger.error(`Job ${jobId} failed with code: ${errorCode}, message: ${userMessage}`);
+
+      // Throw a custom, structured error so the frontend can react to the errorCode.
+      throw new JobFailedError(userMessage, errorCode);
+    }
+
+    return statusData;
   } catch (error) {
-    const rawText = await response.text();
-    throw new Error(`Failed to parse JSON response from server. Body: ${rawText}`);
+    // This block catches errors from `response.json()` (if the body is not valid JSON)
+    // and also re-throws the errors we created above.
+    throw error;
   }
 };
 

src/services/aiService.server.ts

@@ -551,6 +551,11 @@ export class AIService {
   private _normalizeExtractedItems(items: RawFlyerItem[]): ExtractedFlyerItem[] {
     return items.map((item: RawFlyerItem) => ({
       ...item,
+      // Ensure 'item' is always a string, defaulting to 'Unknown Item' if null/undefined.
+      item:
+        item.item === null || item.item === undefined || String(item.item).trim() === ''
+          ? 'Unknown Item'
+          : String(item.item),
       price_display:
         item.price_display === null || item.price_display === undefined
           ? ''

src/services/flyerDataTransformer.ts

@@ -40,6 +40,20 @@ export class FlyerDataTransformer {
 
     const itemsForDb: FlyerItemInsert[] = extractedData.items.map((item) => ({
       ...item,
+      // Ensure 'item' is always a string, defaulting to 'Unknown Item' if null/undefined/empty.
+      item:
+        item.item === null || item.item === undefined || String(item.item).trim() === ''
+          ? 'Unknown Item'
+          : String(item.item),
+      // Ensure 'price_display' is always a string, defaulting to empty if null/undefined.
+      price_display:
+        item.price_display === null || item.price_display === undefined
+          ? ''
+          : String(item.price_display),
+      // Ensure 'quantity' is always a string, defaulting to empty if null/undefined.
+      quantity: item.quantity === null || item.quantity === undefined ? '' : String(item.quantity),
+      // Ensure 'category_name' is always a string, defaulting to 'Other/Miscellaneous' if null/undefined.
+      category_name: item.category_name === null || item.category_name === undefined ? 'Other/Miscellaneous' : String(item.category_name),
       master_item_id: item.master_item_id === null ? undefined : item.master_item_id, // Convert null to undefined
       view_count: 0,
       click_count: 0,

src/services/flyerProcessingService.server.test.ts

@@ -248,7 +248,10 @@ describe('FlyerProcessingService', () => {
 
       await expect(service.processJob(job)).rejects.toThrow('AI model exploded');
 
-      expect(job.updateProgress).toHaveBeenCalledWith({ message: 'Error: AI model exploded' });
+      expect(job.updateProgress).toHaveBeenCalledWith({
+        errorCode: 'UNKNOWN_ERROR',
+        message: 'AI model exploded',
+      });
       expect(mockCleanupQueue.add).not.toHaveBeenCalled();
     });
 
@@ -260,7 +263,11 @@ describe('FlyerProcessingService', () => {
 
       await expect(service.processJob(job)).rejects.toThrow(conversionError);
 
-      expect(job.updateProgress).toHaveBeenCalledWith({ message: 'Error: Conversion failed' });
+      expect(job.updateProgress).toHaveBeenCalledWith({
+        errorCode: 'PDF_CONVERSION_FAILED',
+        message:
+          'The uploaded PDF could not be processed. It might be blank, corrupt, or password-protected.',
+      });
       expect(mockCleanupQueue.add).not.toHaveBeenCalled();
     });
 
@@ -280,7 +287,11 @@ describe('FlyerProcessingService', () => {
         { err: validationError, validationErrors: {}, rawData: {} },
         'AI Data Validation failed.',
       );
-      expect(job.updateProgress).toHaveBeenCalledWith({ message: 'Error: Validation failed' });
+      expect(job.updateProgress).toHaveBeenCalledWith({
+        errorCode: 'AI_VALIDATION_FAILED',
+        message:
+          "The AI couldn't read the flyer's format. Please try a clearer image or a different flyer.",
+      });
       expect(mockCleanupQueue.add).not.toHaveBeenCalled();
     });
 
@@ -353,7 +364,8 @@ describe('FlyerProcessingService', () => {
       await expect(service.processJob(job)).rejects.toThrow('Database transaction failed');
 
       expect(job.updateProgress).toHaveBeenCalledWith({
-        message: 'Error: Database transaction failed',
+        errorCode: 'UNKNOWN_ERROR',
+        message: 'Database transaction failed',
       });
       expect(mockCleanupQueue.add).not.toHaveBeenCalled();
     });
@@ -366,6 +378,7 @@ describe('FlyerProcessingService', () => {
 
       await expect(service.processJob(job)).rejects.toThrow(UnsupportedFileTypeError);
       expect(job.updateProgress).toHaveBeenCalledWith({
+        errorCode: 'UNSUPPORTED_FILE_TYPE',
         message:
           'Error: Unsupported file type: .txt. Supported types are PDF, JPG, PNG, WEBP, HEIC, HEIF, GIF, TIFF, SVG, BMP.',
       });
@@ -390,7 +403,8 @@ describe('FlyerProcessingService', () => {
       await expect(service.processJob(job)).rejects.toThrow('Icon generation failed.');
 
       expect(job.updateProgress).toHaveBeenCalledWith({
-        message: 'Error: Icon generation failed.',
+        errorCode: 'UNKNOWN_ERROR',
+        message: 'Icon generation failed.',
       });
       expect(mockCleanupQueue.add).not.toHaveBeenCalled();
     });

src/services/flyerProcessingService.server.ts

@@ -63,16 +63,16 @@ interface ICleanupQueue {
 
 // --- Zod Schemas for AI Response Validation (exported for the transformer) ---
 const ExtractedFlyerItemSchema = z.object({
-  item: z.string(),
-  price_display: z.string(),
+  item: z.string().nullable(), // AI might return null or empty, normalize later
+  price_display: z.string().nullable(), // AI might return null or empty, normalize later
   price_in_cents: z.number().nullable(),
-  quantity: z.string(),
-  category_name: z.string(),
+  quantity: z.string().nullable(), // AI might return null or empty, normalize later
+  category_name: z.string().nullable(), // AI might return null or empty, normalize later
   master_item_id: z.number().nullish(), // .nullish() allows null or undefined
 });
 
 export const AiFlyerDataSchema = z.object({
-  store_name: requiredString('Store name cannot be empty'),
+  store_name: z.string().nullable(), // AI might return null or empty, normalize later
   valid_from: z.string().nullable(),
   valid_to: z.string().nullable(),
   store_address: z.string().nullable(),
@@ -258,9 +258,17 @@ export class FlyerProcessingService {
   ) {
     logger.info(`Preparing to save extracted data to database.`);
 
+    // Ensure store_name is a non-empty string before passing to the transformer.
+    // This makes the handling of the nullable store_name explicit in this service.
+    const dataForTransformer = { ...extractedData };
+    if (!dataForTransformer.store_name) {
+      logger.warn('AI did not return a store name. Using fallback "Unknown Store (auto)".');
+      dataForTransformer.store_name = 'Unknown Store (auto)';
+    }
+
     // 1. Transform the AI data into database-ready records.
     const { flyerData, itemsForDb } = await this.transformer.transform(
-      extractedData,
+      dataForTransformer,
       imagePaths,
       jobData.originalFileName,
       jobData.checksum,
@@ -345,27 +353,47 @@ export class FlyerProcessingService {
       logger.info({ flyerId: newFlyerId }, `Job processed successfully.`);
       return { flyerId: newFlyer.flyer_id };
     } catch (error: unknown) {
-      let errorMessage = 'An unknown error occurred';
-      if (error instanceof PdfConversionError) {
-        errorMessage = error.message;
+      // Define a structured error payload for job progress updates.
+      // This allows the frontend to provide more specific feedback.
+      let errorPayload = {
+        errorCode: 'UNKNOWN_ERROR',
+        message: 'An unexpected error occurred during processing.',
+      };
+
+      if (error instanceof UnsupportedFileTypeError) {
+        logger.error({ err: error }, `Unsupported file type error.`);
+        errorPayload = {
+          errorCode: 'UNSUPPORTED_FILE_TYPE',
+          message: error.message, // The message is already user-friendly
+        };
+      } else if (error instanceof PdfConversionError) {
         logger.error({ err: error, stderr: error.stderr }, `PDF Conversion failed.`);
+        errorPayload = {
+          errorCode: 'PDF_CONVERSION_FAILED',
+          message:
+            'The uploaded PDF could not be processed. It might be blank, corrupt, or password-protected.',
+        };
       } else if (error instanceof AiDataValidationError) {
-        errorMessage = error.message;
         logger.error(
           { err: error, validationErrors: error.validationErrors, rawData: error.rawData },
           `AI Data Validation failed.`,
         );
-      } else if (error instanceof UnsupportedFileTypeError) {
-        errorMessage = error.message;
-        logger.error({ err: error }, `Unsupported file type error.`);
+        errorPayload = {
+          errorCode: 'AI_VALIDATION_FAILED',
+          message:
+            "The AI couldn't read the flyer's format. Please try a clearer image or a different flyer.",
+        };
       } else if (error instanceof Error) {
-        errorMessage = error.message;
         logger.error(
           { err: error, attemptsMade: job.attemptsMade, totalAttempts: job.opts.attempts },
           `A generic error occurred in job.`,
         );
+        // For generic errors, we can pass the message along, but still use a code.
+        errorPayload.message = error.message;
       }
-      await job.updateProgress({ message: `Error: ${errorMessage}` });
+
+      // Update the job's progress with the structured error payload.
+      await job.updateProgress(errorPayload);
       throw error;
     } finally {
       if (newFlyerId) {