Act as a Senior TypeScript/Next.js Developer.

I need a robust client-side image processing utility (an "Image Agent") to optimize user uploads before sending them to an LLM or Supabase.

**Task:**
Create a utility file `src/utils/image-processing.ts`.
This file should export a function `processImageForAI` that uses the library `browser-image-compression`.

**Requirements:**
1.  **Input:** The function takes a raw `File` object (from an HTML input).
2.  **Processing Logic:**
    - Resize the image to a maximum of **1024x1024** pixels (maintain aspect ratio).
    - Convert the image to **WebP** format.
    - Limit the file size to approx **0.4MB**.
    - Enable `useWebWorker: true` to prevent UI freezing.
3.  **Output:** The function must return a Promise that resolves to an object with this interface:
    ```typescript
    interface ProcessedImage {
      file: File;           // The compressed WebP file (ready for Supabase storage)
      base64: string;       // The Base64 string (ready for LLM API calls)
      originalFile: File;   // Pass through the original file
    }
    ```
4.  **Helper:** Include a helper function to convert the resulting Blob/File to a Base64 string correctly.
5.  **Edge Cases:** Handle errors gracefully (try/catch) and ensure the returned `file` has the correct `.webp` extension and mime type.

**Step 1:** Give me the `npm install` command to add the necessary library.
**Step 2:** Write the complete `src/utils/image-processing.ts` code with proper JSDoc comments.