refactor(media): improve image URL handling and add cleanup workflow

- Enhance ImageMedia component to properly handle absolute and relative URLs, avoiding ENV mismatches
- Update next.config.js to filter invalid URLs and add error handling for image remote patterns
- Add new workflow to remove AI-generated inconsistencies from branch diffs

.agent/workflows/remove-slop.md

@@ -0,0 +1,11 @@
+---
+description: Check the diff against main and remove all AI generated slop introduced in this branch.
+---
+1. Run `git diff --name-only main...HEAD` to identify the files modified in the current branch.
+2. For each modified file, compare it against the version in `main` to identify changes.
+3. Review the changes and remove the following "AI slop":
+    - Extra comments that a human wouldn't add or that are inconsistent with the rest of the file.
+    - Extra defensive checks or try/catch blocks that are abnormal for that area of the codebase (especially if called by trusted/validated codepaths).
+    - Casts to `any` used to get around type issues.
+    - Any other style that is inconsistent with the file.
+4. Report at the end with only a 1-3 sentence summary of what you changed.

next.config.js

@@ -11,14 +11,22 @@ const nextConfig = {
   output: 'standalone',
   images: {
     remotePatterns: [
-      ...[NEXT_PUBLIC_SERVER_URL /* 'https://example.com' */].map((item) => {
+      ...[NEXT_PUBLIC_SERVER_URL, process.env.NEXT_PUBLIC_SERVER_URL]
-        const url = new URL(item)
+        .filter(Boolean)
+        .map((item) => {
+          const urlString = item.startsWith('http') ? item : `https://${item}`
 
+          try {
+            const url = new URL(urlString)
             return {
               hostname: url.hostname,
               protocol: url.protocol.replace(':', ''),
             }
-      }),
+          } catch (_) {
+            return null
+          }
+        })
+        .filter(Boolean),
     ],
   },
   webpack: (webpackConfig) => {

src/components/Media/ImageMedia/index.tsx

@@ -9,7 +9,7 @@ import React from 'react'
 import type { Props as MediaProps } from '../types'
 
 import { cssVariables } from '@/cssVariables'
-import { getMediaUrl } from '@/utilities/getMediaUrl'
+import { getMediaUrl as _getMediaUrl } from '@/utilities/getMediaUrl'
 
 const { breakpoints } = cssVariables
 
@@ -35,16 +35,30 @@ export const ImageMedia: React.FC<MediaProps> = (props) => {
   let alt = altFromProps
   let src: StaticImageData | string = srcFromProps || ''
 
-  if (!src && resource && typeof resource === 'object') {
+  if (!src && resource) {
+    if (typeof resource === 'string') {
+      src = resource
+    } else if (typeof resource === 'object') {
       const { alt: altFromResource, height: fullHeight, url, width: fullWidth } = resource
 
-    width = fullWidth!
+      width = fullWidth ?? undefined
-    height = fullHeight!
+      height = fullHeight ?? undefined
       alt = altFromResource || ''
 
       const cacheTag = resource.updatedAt
 
-    src = getMediaUrl(url, cacheTag)
+      // If we have a URL, decide if we need to absolute-ize it.
+      // For NextImage, relative URLs (starting with /) are preferred for internal assets.
+      // They automatically use the current domain, avoiding ENV var mismatches.
+
+      if (url) {
+        if (url.startsWith('http') || url.startsWith('//')) {
+          src = cacheTag ? `${url}?${cacheTag}` : url
+        } else {
+          src = url
+        }
+      }
+    }
   }
 
   const loading = loadingFromProps || (!priority ? 'lazy' : undefined)