FIX (frontend): omit misleading byte size on media attachment chip (#1896)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: romanlutz

frontend/src/components/Chat/ChatInputArea.test.tsx

@@ -497,6 +497,37 @@ describe("ChatInputArea", () => {
     expect(screen.getByRole("button", { name: /send message/i })).toBeEnabled();
   });
 
+  it("should render attachment chip without size label when size is undefined", async () => {
+    // Regression guard for the media-chip bug: when an attachment forwarded
+    // via "Copy to input box in a new conversation" has no known size (e.g.
+    // its url is a /api/media?path=... reference), the chip must not print a
+    // bogus "(... B)" derived from the URL string length.
+    const ref = React.createRef<ChatInputAreaHandle>();
+
+    render(
+      <TestWrapper>
+        <ChatInputArea ref={ref} {...defaultProps} />
+      </TestWrapper>
+    );
+
+    React.act(() => {
+      ref.current?.addAttachment({
+        type: "image",
+        name: "forwarded.png",
+        url: "/api/media?path=%2Fdbdata%2Fprompt-memory-entries%2Fimages%2Fimg.png",
+        mimeType: "image/png",
+        // no size
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/forwarded\.png/)).toBeInTheDocument();
+    });
+
+    // No "(NNN B)" / "(N.N KB)" / "(N.N MB)" label should be rendered.
+    expect(screen.queryByText(/\(\s*\d+(?:\.\d+)?\s*[KM]?B\s*\)/)).toBeNull();
+  });
+
   it("should show single-turn banner when singleTurnLimitReached is true", () => {
     render(
       <TestWrapper>

frontend/src/components/Chat/ChatInputArea.tsx

@@ -84,7 +84,7 @@ function AttachmentList({ attachments, mediaConversions, onRemove, onClearMediaC
                   {att.type === 'audio' && '🎵'}
                   {att.type === 'video' && '🎥'}
                   {att.type === 'file' && '📄'}
-                  {' '}{att.name} ({formatFileSize(att.size)})
+                  {' '}{att.name}{att.size != null ? ` (${formatFileSize(att.size)})` : ''}
                 </Caption1>
               </span>
               <Button

frontend/src/components/Chat/ChatWindow.tsx

@@ -222,7 +222,6 @@ export default function ChatWindow({
         name: basenameFromValue(textConversion.convertedValue, `output.${kind}`),
         url,
         mimeType: 'application/octet-stream',
-        size: 0,
       })
     }
 

frontend/src/types/index.ts

@@ -7,7 +7,12 @@ export interface MessageAttachment {
   name: string
   url: string
   mimeType: string
-  size: number
+  /**
+   * Decoded byte count when known. Omitted for path / URL / scheme-prefixed
+   * values (e.g. `/api/media?path=...`) where the value is a reference, not
+   * the payload, so its string length would be meaningless.
+   */
+  size?: number
   file?: File
   /** Backend piece ID — preserved so remix/copy can trace back to the original piece */
   pieceId?: string

frontend/src/utils/messageMapper.test.ts

@@ -398,6 +398,121 @@ describe("messageMapper", () => {
     });
   });
 
+  describe("pieceToAttachment size handling", () => {
+    function makeMediaMessage(
+      converted_value: string,
+      converted_value_data_type = "image_path",
+      converted_value_mime_type: string | undefined = "image/png",
+    ): BackendMessage {
+      return {
+        turn_number: 1,
+        role: "assistant",
+        pieces: [
+          {
+            piece_id: "p1abcdef",
+            original_value_data_type: "text",
+            converted_value_data_type,
+            original_value: "prompt",
+            converted_value,
+            converted_value_mime_type,
+            scores: [],
+            response_error: "none",
+          },
+        ],
+        created_at: "2026-02-15T00:00:00Z",
+      };
+    }
+
+    it("omits size for /api/media path URLs (the originally reported bug)", () => {
+      // Reproduces the screenshot: a backend-served PNG referenced via
+      // /api/media?path=... would otherwise produce a chip like "(119 B)"
+      // because value.length was used as size.
+      const url = "/api/media?path=C%3A%5CUsers%5Cromanlutz%5Cgit%5CPyRIT%5Cdbdata%5Cprompt-memory-entries%5Cimages%5Cimage_150c901b9db7.png";
+      expect(url.length).toBeGreaterThan(50); // sanity: long enough for the old bug to bite
+
+      const result = backendMessageToFrontend(makeMediaMessage(url));
+
+      expect(result.attachments).toHaveLength(1);
+      expect(result.attachments![0].url).toBe(url);
+      expect(result.attachments![0].size).toBeUndefined();
+    });
+
+    it("omits size for Windows absolute paths", () => {
+      const result = backendMessageToFrontend(
+        makeMediaMessage("C:\\Users\\me\\dbdata\\prompt-memory-entries\\images\\img.png")
+      );
+      expect(result.attachments![0].size).toBeUndefined();
+    });
+
+    it("omits size for Unix absolute paths", () => {
+      const result = backendMessageToFrontend(
+        makeMediaMessage("/dbdata/prompt-memory-entries/images/img.png")
+      );
+      expect(result.attachments![0].size).toBeUndefined();
+    });
+
+    it("omits size for data: / blob: / file: URI schemes", () => {
+      for (const url of [
+        "data:image/png;base64,aGVsbG8=",
+        "blob:https://example.com/abc-123",
+        "file:///tmp/img.png",
+      ]) {
+        const result = backendMessageToFrontend(makeMediaMessage(url));
+        expect(result.attachments![0].size).toBeUndefined();
+      }
+    });
+
+    it("sets size to the decoded byte count for base64-inlined media", () => {
+      // btoa("hello world") = "aGVsbG8gd29ybGQ=" — 11 decoded bytes.
+      const base64 = "aGVsbG8gd29ybGQ=";
+      const result = backendMessageToFrontend(makeMediaMessage(base64));
+
+      expect(result.attachments![0].url).toBe(`data:image/png;base64,${base64}`);
+      expect(result.attachments![0].size).toBe(11);
+    });
+
+    it("computes base64 size correctly without padding", () => {
+      // 16-char base64 with no padding decodes to floor(16 * 3 / 4) = 12 bytes.
+      const base64 = "YWJjZGVmZ2hpamtsbW5vcA"; // "abcdefghijklmnop" without '=' padding
+      const result = backendMessageToFrontend(makeMediaMessage(base64));
+      expect(result.attachments![0].size).toBe(16);
+    });
+
+    it("omits size on the original-side attachment for path values", () => {
+      // Same /api/media URL on original_value — used when originalAttachments
+      // is populated via pieceToAttachment(piece, 'original').
+      const url = "/api/media?path=output%2Fimage.png";
+      const msg: BackendMessage = {
+        turn_number: 1,
+        role: "assistant",
+        pieces: [
+          {
+            piece_id: "p1abcdef",
+            original_value_data_type: "image_path",
+            converted_value_data_type: "image_path",
+            original_value: url,
+            converted_value: "aW1hZ2VkYXRhYWFhYWFh", // 20 chars base64
+            converted_value_mime_type: "image/png",
+            original_value_mime_type: "image/png",
+            scores: [],
+            response_error: "none",
+          },
+        ],
+        created_at: "2026-02-15T00:00:00Z",
+      };
+
+      const result = backendMessageToFrontend(msg);
+
+      // Converted attachment should be present with computed size.
+      expect(result.attachments).toHaveLength(1);
+      expect(result.attachments![0].size).toBe(15); // floor(20 * 3 / 4)
+
+      // originalAttachments only populated when URLs differ — they do here.
+      expect(result.originalAttachments).toHaveLength(1);
+      expect(result.originalAttachments![0].size).toBeUndefined();
+    });
+  });
+
   describe("backendMessagesToFrontend", () => {
     it("should convert multiple messages", () => {
       const messages: BackendMessage[] = [

frontend/src/utils/messageMapper.ts

@@ -104,6 +104,16 @@ function extractReasoningSummaries(value: string): string[] {
   return []
 }
 
+/**
+ * Compute the decoded byte count of a base64-encoded string. Whitespace and
+ * trailing `=` padding are stripped before applying the standard
+ * `floor(n * 3 / 4)` formula.
+ */
+function decodedBase64ByteCount(value: string): number {
+  const stripped = value.replace(/\s+/g, '').replace(/=+$/, '')
+  return Math.floor((stripped.length * 3) / 4)
+}
+
 /**
  * Build a frontend MessageAttachment from a backend piece.
  *
@@ -134,12 +144,17 @@ function pieceToAttachment(
   const filename = isOriginal ? piece.original_filename : piece.converted_filename
   const fallbackName = `${prefix}${dataType}_${piece.piece_id.slice(0, 8)}`
 
+  // For base64-inlined media, derive the decoded byte count. For path / URL
+  // values the string length is meaningless (e.g. /api/media?path=... is a
+  // reference, not the payload), so size is omitted and the UI must hide it.
+  const size = isBase64 ? decodedBase64ByteCount(value) : undefined
+
   return {
     type: dataTypeToAttachmentType(dataType),
     name: filename || fallbackName,
     url,
     mimeType: mime,
-    size: value.length,
+    size,
     pieceId: piece.piece_id,
     metadata: piece.prompt_metadata || undefined,
   }