Use presigned S3 URLs for serving images instead of proxying bytes

Browser <img> tags can't attach JWT headers, causing 401s. The image
endpoint now returns a time-limited presigned S3 URL via authenticated
API call, which the frontend fetches and uses directly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

raggr-frontend/src/api/conversationService.ts

@@ -147,8 +147,15 @@ class ConversationService {
     return await response.json();
   }
 
-  getImageUrl(imageKey: string): string {
-    return `/api/conversation/image/${imageKey}`;
+  async getPresignedImageUrl(imageKey: string): Promise<string> {
+    const response = await userService.fetchWithRefreshToken(
+      `${this.conversationBaseUrl}/image/${imageKey}`,
+    );
+    if (!response.ok) {
+      throw new Error("Failed to get image URL");
+    }
+    const data = await response.json();
+    return data.url;
   }
 
   async streamQuery(

raggr-frontend/src/components/QuestionBubble.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { cn } from "../lib/utils";
 import { conversationService } from "../api/conversationService";
 
@@ -7,6 +8,13 @@ type QuestionBubbleProps = {
 };
 
 export const QuestionBubble = ({ text, image_key }: QuestionBubbleProps) => {
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!image_key) return;
+    conversationService.getPresignedImageUrl(image_key).then(setImageUrl).catch(() => {});
+  }, [image_key]);
+
   return (
     <div className="flex justify-end message-enter">
       <div
@@ -17,9 +25,9 @@ export const QuestionBubble = ({ text, image_key }: QuestionBubbleProps) => {
           "shadow-sm shadow-leaf/10",
         )}
       >
-        {image_key && (
+        {imageUrl && (
           <img
-            src={conversationService.getImageUrl(image_key)}
+            src={imageUrl}
             alt="Uploaded image"
             className="max-w-full rounded-xl mb-2"
           />