Merge API remote base URL config into dev

Co-authored-by: Cursor <cursoragent@cursor.com>

src/features/annotations/AnnotationsPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { api, endpoints } from '../../api'
+import { api, endpoints, authenticatedApiUrl } from '../../api'
 import MediaList from './MediaList'
 import VideoPlayer, { type VideoPlayerHandle } from './VideoPlayer'
 import CanvasEditor, { type CanvasEditorHandle } from './CanvasEditor'
@@ -195,7 +195,7 @@ export default function AnnotationsPage() {
       img.crossOrigin = 'anonymous'
       img.src = selectedMedia.path.startsWith('blob:')
         ? selectedMedia.path
-        : endpoints.annotations.mediaFile(selectedMedia.id)
+        : authenticatedApiUrl(endpoints.annotations.mediaFile(selectedMedia.id))
       await new Promise(res => { img.onload = res; img.onerror = res })
       w = img.naturalWidth
       h = img.naturalHeight

src/features/annotations/CanvasEditor.tsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useState, useCallback, forwardRef, useImperativeHandle } from 'react'
-import { endpoints } from '../../api'
+import { endpoints, authenticatedApiUrl } from '../../api'
 import { MediaType } from '../../types'
 import type { Media, AnnotationListItem, Detection, Affiliation, CombatReadiness } from '../../types'
 import { getClassColor, getClassNameFallback, hexToRgba } from '../../class-colors'
@@ -112,11 +112,11 @@ const CanvasEditor = forwardRef<CanvasEditorHandle, Props>(function CanvasEditor
     img.crossOrigin = 'anonymous'
     const isLocalPath = media.path.startsWith('blob:') || media.path.startsWith('data:')
     if (annotation && !isLocalPath) {
-      img.src = endpoints.annotations.annotationImage(annotation.id)
+      img.src = authenticatedApiUrl(endpoints.annotations.annotationImage(annotation.id))
     } else if (isLocalPath) {
       img.src = media.path
     } else {
-      img.src = endpoints.annotations.mediaFile(media.id)
+      img.src = authenticatedApiUrl(endpoints.annotations.mediaFile(media.id))
     }
     img.onload = () => {
       imgRef.current = img

src/features/annotations/VideoPlayer.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react'
-import { endpoints } from '../../api'
+import { endpoints, authenticatedApiUrl } from '../../api'
 import type { Media } from '../../types'
 
 interface Props {
@@ -49,7 +49,7 @@ const VideoPlayer = forwardRef<VideoPlayerHandle, Props>(function VideoPlayer({
 
   const videoUrl = media.path.startsWith('blob:')
     ? media.path
-    : endpoints.annotations.mediaFile(media.id)
+    : authenticatedApiUrl(endpoints.annotations.mediaFile(media.id))
 
   const stepFrames = useCallback((count: number) => {
     const video = videoRef.current