From d9264cdff1f5ecb2d61ff0285e8c83470e4f3d20 Mon Sep 17 00:00:00 2001
From: jbolor21 <86250273+jbolor21@users.noreply.github.com>
Date: Mon, 11 May 2026 08:40:32 -0700
Subject: [PATCH 1/4] add changes to files

---
 .../components/Chat/ChatInputArea.styles.ts   |  18 +++
 .../components/Chat/ChatInputArea.test.tsx    |  50 +++++++-
 .../src/components/Chat/ChatInputArea.tsx     |  60 ++++++++-
 frontend/src/components/Chat/ChatWindow.tsx   |  67 ++++++++--
 .../components/Chat/ConverterPanel.test.tsx   |  27 ++--
 .../ConverterPanel/ConverterPanel.styles.ts   |  35 ++++++
 .../Chat/ConverterPanel/ConverterPanel.tsx    |  23 +++-
 .../ConverterPanel/ConverterPreview.test.tsx  |  56 +++++++--
 .../Chat/ConverterPanel/ConverterPreview.tsx  | 115 +++++++++++++-----
 .../src/components/Chat/MessageList.styles.ts |  27 ++++
 .../src/components/Chat/MessageList.test.tsx  |  30 +++++
 frontend/src/components/Chat/MessageList.tsx  |  18 ++-
 .../src/components/Chat/converterTypes.ts     |  61 ++++++++++
 frontend/src/services/api.ts                  |   2 +-
 14 files changed, 513 insertions(+), 76 deletions(-)

diff --git a/frontend/src/components/Chat/ChatInputArea.styles.ts b/frontend/src/components/Chat/ChatInputArea.styles.ts
index b53e720e58..0599837cab 100644
--- a/frontend/src/components/Chat/ChatInputArea.styles.ts
+++ b/frontend/src/components/Chat/ChatInputArea.styles.ts
@@ -228,6 +228,24 @@ export const useChatInputAreaStyles = makeStyles({
     fontSize: tokens.fontSizeBase200,
     color: tokens.colorNeutralForeground2,
   },
+  openLink: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalXXS,
+    padding: `0 ${tokens.spacingHorizontalS}`,
+    borderRadius: tokens.borderRadiusSmall,
+    backgroundColor: tokens.colorBrandBackground,
+    color: tokens.colorNeutralForegroundOnBrand,
+    fontSize: tokens.fontSizeBase200,
+    fontWeight: tokens.fontWeightSemibold as unknown as string,
+    textDecoration: 'none',
+    flexShrink: 0,
+    height: '20px',
+    ':hover': {
+      backgroundColor: tokens.colorBrandBackgroundHover,
+      color: tokens.colorNeutralForegroundOnBrand,
+    },
+  },
   originalBadge: {
     display: 'inline-block',
     padding: `0 ${tokens.spacingHorizontalXS}`,
diff --git a/frontend/src/components/Chat/ChatInputArea.test.tsx b/frontend/src/components/Chat/ChatInputArea.test.tsx
index 570fb93039..82f1e47b56 100644
--- a/frontend/src/components/Chat/ChatInputArea.test.tsx
+++ b/frontend/src/components/Chat/ChatInputArea.test.tsx
@@ -543,7 +543,7 @@ describe("ChatInputArea", () => {
         <ChatInputArea
           {...defaultProps}
           activeTarget={{ target_registry_name: "t", target_type: "T", endpoint: "e", model_name: "m" }}
-          mediaConversions={[{ pieceType: "image", convertedValue: "/tmp/converted.png" }]}
+          mediaConversions={[{ pieceType: "image", convertedValue: "/tmp/converted.png", convertedDataType: "image_path" }]}
         />
       </TestWrapper>
     );
@@ -571,7 +571,7 @@ describe("ChatInputArea", () => {
         <ChatInputArea
           {...defaultProps}
           activeTarget={{ target_registry_name: "t", target_type: "T", endpoint: "e", model_name: "m" }}
-          mediaConversions={[{ pieceType: "image", convertedValue: "/tmp/converted.png" }]}
+          mediaConversions={[{ pieceType: "image", convertedValue: "/tmp/converted.png", convertedDataType: "image_path" }]}
           onClearMediaConversion={onClearMediaConversion}
         />
       </TestWrapper>
@@ -647,4 +647,50 @@ describe("ChatInputArea", () => {
     expect(onSend).toHaveBeenCalledWith("hello", "convertedHello", []);
     expect(onClearConversion).toHaveBeenCalled();
   });
+
+  it("should render converted file chip with Open link for text→file conversion", async () => {
+    render(
+      <TestWrapper>
+        <ChatInputArea
+          {...defaultProps}
+          activeTarget={{ target_registry_name: "t", target_type: "T", endpoint: "e", model_name: "m" }}
+          convertedFileChip={{
+            name: "result.pdf",
+            url: "/api/media?path=%2Ftmp%2Fresult.pdf",
+            iconKind: "file",
+          }}
+        />
+      </TestWrapper>
+    );
+
+    expect(screen.getByTestId("original-banner")).toBeInTheDocument();
+    const chip = screen.getByTestId("converted-file-chip");
+    expect(chip).toHaveTextContent("result.pdf");
+    const openLink = screen.getByTestId("converted-file-open");
+    expect(openLink).toHaveAttribute("href", "/api/media?path=%2Ftmp%2Fresult.pdf");
+    expect(openLink).toHaveAttribute("target", "_blank");
+  });
+
+  it("should call onClearConvertedFileChip when chip dismiss is clicked", async () => {
+    const onClearConvertedFileChip = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <TestWrapper>
+        <ChatInputArea
+          {...defaultProps}
+          activeTarget={{ target_registry_name: "t", target_type: "T", endpoint: "e", model_name: "m" }}
+          convertedFileChip={{
+            name: "result.pdf",
+            url: "/api/media?path=%2Ftmp%2Fresult.pdf",
+            iconKind: "file",
+          }}
+          onClearConvertedFileChip={onClearConvertedFileChip}
+        />
+      </TestWrapper>
+    );
+
+    await user.click(screen.getByTestId("clear-converted-file-chip"));
+    expect(onClearConvertedFileChip).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/frontend/src/components/Chat/ChatInputArea.tsx b/frontend/src/components/Chat/ChatInputArea.tsx
index 615244d0e9..b818402908 100644
--- a/frontend/src/components/Chat/ChatInputArea.tsx
+++ b/frontend/src/components/Chat/ChatInputArea.tsx
@@ -6,7 +6,7 @@ import {
   Text,
   tokens,
 } from '@fluentui/react-components'
-import { SendRegular, AttachRegular, DismissRegular, InfoRegular, AddRegular, CopyRegular, WarningRegular, SettingsRegular, ArrowShuffleRegular } from '@fluentui/react-icons'
+import { SendRegular, AttachRegular, DismissRegular, InfoRegular, AddRegular, CopyRegular, WarningRegular, SettingsRegular, ArrowShuffleRegular, OpenRegular } from '@fluentui/react-icons'
 import { MessageAttachment, TargetInstance } from '../../types'
 import { useChatInputAreaStyles } from './ChatInputArea.styles'
 
@@ -14,6 +14,12 @@ import { useChatInputAreaStyles } from './ChatInputArea.styles'
 // Reusable status banner
 // ---------------------------------------------------------------------------
 
+export interface ConvertedFileChip {
+  name: string
+  url: string
+  iconKind: 'image' | 'audio' | 'video' | 'file'
+}
+
 interface StatusBannerProps {
   icon: React.ReactElement
   text: string
@@ -53,7 +59,7 @@ function StatusBanner({ icon, text, buttonText, buttonIcon, onButtonClick, testI
 
 interface AttachmentListProps {
   attachments: MessageAttachment[]
-  mediaConversions: Array<{ pieceType: string; convertedValue: string }>
+  mediaConversions: Array<{ pieceType: string; convertedValue: string; convertedDataType: string }>
   onRemove: (index: number) => void
   onClearMediaConversion: (pieceType: string) => void
   formatFileSize: (bytes: number) => string
@@ -118,20 +124,23 @@ function AttachmentList({ attachments, mediaConversions, onRemove, onClearMediaC
 interface TextInputRowsProps {
   input: string
   convertedValue?: string | null
+  convertedFileChip?: ConvertedFileChip | null
   disabled: boolean
   textareaRef: Ref<HTMLTextAreaElement>
   onInput: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
   onKeyDown: (e: KeyboardEvent<HTMLTextAreaElement>) => void
   onConvertedValueChange: (value: string) => void
   onClearConversion: () => void
+  onClearConvertedFileChip?: () => void
   styles: ReturnType<typeof useChatInputAreaStyles>
 }
 
-function TextInputRows({ input, convertedValue, disabled, textareaRef, onInput, onKeyDown, onConvertedValueChange, onClearConversion, styles }: TextInputRowsProps) {
+function TextInputRows({ input, convertedValue, convertedFileChip, disabled, textareaRef, onInput, onKeyDown, onConvertedValueChange, onClearConversion, onClearConvertedFileChip, styles }: TextInputRowsProps) {
+  const hasConversion = Boolean(convertedValue) || Boolean(convertedFileChip)
   return (
     <>
       <div className={styles.textRow}>
-        {convertedValue && (
+        {hasConversion && (
           <span className={styles.originalBadge} data-testid="original-banner">Original</span>
         )}
         <textarea
@@ -166,6 +175,40 @@ function TextInputRows({ input, convertedValue, disabled, textareaRef, onInput,
           />
         </div>
       )}
+      {!convertedValue && convertedFileChip && (
+        <div className={styles.convertedRow} data-testid="converted-file-chip">
+          <span className={styles.convertedBadge}>Converted</span>
+          <span aria-hidden="true">
+            {convertedFileChip.iconKind === 'image' && '🖼️'}
+            {convertedFileChip.iconKind === 'audio' && '🎵'}
+            {convertedFileChip.iconKind === 'video' && '🎥'}
+            {convertedFileChip.iconKind === 'file' && '📄'}
+          </span>
+          <Caption1 className={styles.convertedFilename} title={convertedFileChip.name}>
+            {convertedFileChip.name}
+          </Caption1>
+          <Tooltip content="Open in new tab" relationship="label">
+            <a
+              href={convertedFileChip.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={styles.openLink}
+              data-testid="converted-file-open"
+            >
+              <OpenRegular fontSize={14} />
+              <span>Open</span>
+            </a>
+          </Tooltip>
+          <Button
+            appearance="transparent"
+            size="small"
+            className={styles.dismissBtn}
+            icon={<DismissRegular />}
+            onClick={onClearConvertedFileChip}
+            data-testid="clear-converted-file-chip"
+          />
+        </div>
+      )}
     </>
   )
 }
@@ -199,11 +242,14 @@ interface ChatInputAreaProps {
   originalValue?: string | null
   onClearConversion: () => void
   onConvertedValueChange: (value: string) => void
-  mediaConversions?: Array<{ pieceType: string; convertedValue: string }>
+  mediaConversions?: Array<{ pieceType: string; convertedValue: string; convertedDataType: string }>
   onClearMediaConversion: (pieceType: string) => void
+  /** Chip describing a text→file conversion (e.g. PDFConverter output). */
+  convertedFileChip?: ConvertedFileChip | null
+  onClearConvertedFileChip?: () => void
 }
 
-const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(function ChatInputArea({ onSend, disabled = false, activeTarget, singleTurnLimitReached = false, onNewConversation, operatorLocked = false, crossTargetLocked = false, onUseAsTemplate, attackOperator, noTargetSelected = false, onConfigureTarget, onToggleConverterPanel, isConverterPanelOpen = false, onInputChange, onAttachmentsChange, convertedValue, originalValue: _originalValue, onClearConversion, onConvertedValueChange, mediaConversions = [], onClearMediaConversion }, ref) {
+const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(function ChatInputArea({ onSend, disabled = false, activeTarget, singleTurnLimitReached = false, onNewConversation, operatorLocked = false, crossTargetLocked = false, onUseAsTemplate, attackOperator, noTargetSelected = false, onConfigureTarget, onToggleConverterPanel, isConverterPanelOpen = false, onInputChange, onAttachmentsChange, convertedValue, originalValue: _originalValue, onClearConversion, onConvertedValueChange, mediaConversions = [], onClearMediaConversion, convertedFileChip, onClearConvertedFileChip }, ref) {
   const styles = useChatInputAreaStyles()
   const [input, setInput] = useState('')
   const [attachments, setAttachments] = useState<MessageAttachment[]>([])
@@ -429,12 +475,14 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
               <TextInputRows
                 input={input}
                 convertedValue={convertedValue}
+                convertedFileChip={convertedFileChip}
                 disabled={disabled}
                 textareaRef={textareaRef}
                 onInput={handleInput}
                 onKeyDown={handleKeyDown}
                 onConvertedValueChange={onConvertedValueChange}
                 onClearConversion={onClearConversion}
+                onClearConvertedFileChip={onClearConvertedFileChip}
                 styles={styles}
               />
             </div>
diff --git a/frontend/src/components/Chat/ChatWindow.tsx b/frontend/src/components/Chat/ChatWindow.tsx
index 89d32be4b1..f29599d605 100644
--- a/frontend/src/components/Chat/ChatWindow.tsx
+++ b/frontend/src/components/Chat/ChatWindow.tsx
@@ -11,7 +11,7 @@ import ChatInputArea from './ChatInputArea'
 import ConversationPanel from './ConversationPanel'
 import ConverterPanel from './ConverterPanel'
 import type { PieceConversion } from './converterTypes'
-import { PIECE_TYPE_TO_DATA_TYPE } from './converterTypes'
+import { PIECE_TYPE_TO_DATA_TYPE, basenameFromValue, buildMediaUrl, dataTypeToAttachmentKind, isPathDataType } from './converterTypes'
 import LabelsBar from '../Labels/LabelsBar'
 import type { ChatInputAreaHandle } from './ChatInputArea'
 import { attacksApi } from '../../services/api'
@@ -81,6 +81,31 @@ export default function ChatWindow({
     setAttachmentData(data)
   }, [])
 
+  // Auto-clear stale conversions when their original input no longer matches.
+  // For text: the typed text differs from the captured originalValue.
+  // For media: the uploaded base64 changed (or was removed).
+  useEffect(() => {
+    setPieceConversions((prev) => {
+      const entries = Object.entries(prev)
+      if (entries.length === 0) return prev
+      let changed = false
+      const next: Record<string, PieceConversion> = {}
+      for (const [key, conv] of entries) {
+        if (key === 'text') {
+          if (conv.originalValue !== chatInputText) {
+            changed = true
+            continue
+          }
+        } else if (attachmentData[key] !== conv.originalValue) {
+          changed = true
+          continue
+        }
+        next[key] = conv
+      }
+      return changed ? next : prev
+    })
+  }, [chatInputText, attachmentData])
+
   // Auto-open conversation sidebar when loading a historical attack with multiple conversations
   useEffect(() => {
     if (relatedConversationCount && relatedConversationCount > 0) {
@@ -176,23 +201,38 @@ export default function ChatWindow({
     // Capture all piece conversions upfront before any async work or state clears
     const conversions = { ...pieceConversions }
     const textConversion = conversions['text']
+    const isTextTextConversion = textConversion?.convertedDataType === 'text'
+    const isTextFileConversion = Boolean(textConversion) && !isTextTextConversion
 
     // Track which conversation this send belongs to (may be updated after attack creation)
     let sendConvId = activeConversationId || '__pending__'
     // Mark synchronously so the useEffect guard sees it immediately
     sendingConvIdsRef.current.add(sendConvId)
 
-    // When a text converter is active, show a preview locally
-    const hasTextConversion = textConversion != null && convertedValue != null
-    const displayContent = hasTextConversion ? convertedValue : originalValue
+    // When a text→text converter is active, show the converted text as the bubble's
+    // primary content. When a text→file converter is active, keep the typed text
+    // as content and synthesize a file attachment so the bubble shows both.
+    const displayContent = isTextTextConversion && convertedValue != null ? convertedValue : originalValue
+    const optimisticAttachments: MessageAttachment[] = [...attachments]
+    if (isTextFileConversion && textConversion) {
+      const url = buildMediaUrl(textConversion.convertedValue)
+      const kind = dataTypeToAttachmentKind(textConversion.convertedDataType)
+      optimisticAttachments.push({
+        type: kind,
+        name: basenameFromValue(textConversion.convertedValue, `output.${kind}`),
+        url,
+        mimeType: 'application/octet-stream',
+        size: 0,
+      })
+    }
 
     // Add user message with attachments for display
     const userMessage: Message = {
       role: 'user',
       content: displayContent,
       timestamp: new Date().toISOString(),
-      attachments: attachments.length > 0 ? attachments : undefined,
-      originalContent: hasTextConversion ? originalValue : undefined,
+      attachments: optimisticAttachments.length > 0 ? optimisticAttachments : undefined,
+      originalContent: isTextTextConversion ? originalValue : undefined,
     }
     setMessages(prev => [...prev, userMessage])
 
@@ -583,7 +623,7 @@ export default function ChatWindow({
           isConverterPanelOpen={isConverterPanelOpen}
           onInputChange={setChatInputText}
           onAttachmentsChange={handleAttachmentsChange}
-          convertedValue={pieceConversions['text']?.convertedValue ?? null}
+          convertedValue={pieceConversions['text']?.convertedDataType === 'text' ? (pieceConversions['text']?.convertedValue ?? null) : null}
           originalValue={pieceConversions['text']?.originalValue ?? null}
           onClearConversion={() => setPieceConversions((prev) => { const next = { ...prev }; delete next['text']; return next })}
           onConvertedValueChange={(val) => setPieceConversions((prev) => {
@@ -591,9 +631,20 @@ export default function ChatWindow({
             if (!existing) return prev
             return { ...prev, text: { ...existing, convertedValue: val } }
           })}
+          convertedFileChip={(() => {
+            const tc = pieceConversions['text']
+            if (!tc || tc.convertedDataType === 'text') return null
+            if (!isPathDataType(tc.convertedDataType)) return null
+            return {
+              name: basenameFromValue(tc.convertedValue, 'output'),
+              url: buildMediaUrl(tc.convertedValue),
+              iconKind: dataTypeToAttachmentKind(tc.convertedDataType),
+            }
+          })()}
+          onClearConvertedFileChip={() => setPieceConversions((prev) => { const next = { ...prev }; delete next['text']; return next })}
           mediaConversions={Object.entries(pieceConversions)
             .filter(([k]) => k !== 'text')
-            .map(([k, v]) => ({ pieceType: k, convertedValue: v.convertedValue }))}
+            .map(([k, v]) => ({ pieceType: k, convertedValue: v.convertedValue, convertedDataType: v.convertedDataType }))}
           onClearMediaConversion={(pieceType) => setPieceConversions((prev) => {
             const next = { ...prev }
             delete next[pieceType]
diff --git a/frontend/src/components/Chat/ConverterPanel.test.tsx b/frontend/src/components/Chat/ConverterPanel.test.tsx
index 0c6bf567d9..9a9cfccbe1 100644
--- a/frontend/src/components/Chat/ConverterPanel.test.tsx
+++ b/frontend/src/components/Chat/ConverterPanel.test.tsx
@@ -416,6 +416,7 @@ describe('ConverterPanel use converted value', () => {
       converterInstanceId: 'conv-1',
       convertedValue: 'aGVsbG8=',
       originalValue: 'hello',
+      convertedDataType: 'text',
     })
   })
 })
@@ -493,9 +494,9 @@ describe('ConverterPanel grouped converters', () => {
 // ─── Preview output types (image, audio, video) ─────────────────
 
 describe('ConverterPanel output rendering', () => {
-  async function previewWithOutput(output: string) {
+  async function previewWithOutput(output: string, outputType: string = 'text') {
     mockedConvertersApi.createConverter.mockResolvedValue({ converter_id: 'conv-1', converter_type: 'Base64Converter' })
-    mockedConvertersApi.previewConversion.mockResolvedValue({ converted_value: output })
+    mockedConvertersApi.previewConversion.mockResolvedValue({ converted_value: output, converted_value_data_type: outputType })
 
     renderPanel({ previewText: 'hello' })
     await waitForList()
@@ -505,25 +506,33 @@ describe('ConverterPanel output rendering', () => {
     await waitFor(() => expect(screen.getByTestId('converter-preview-result')).toBeInTheDocument())
   }
 
-  it('renders image output for image file paths', async () => {
-    await previewWithOutput('/output/result.png')
+  it('renders image output for image_path data type', async () => {
+    await previewWithOutput('/output/result.png', 'image_path')
     expect((screen.getByTestId('converter-preview-result') as HTMLElement).tagName).toBe('IMG')
   })
 
-  it('renders audio output for audio file paths', async () => {
-    await previewWithOutput('/output/result.wav')
+  it('renders audio output for audio_path data type', async () => {
+    await previewWithOutput('/output/result.wav', 'audio_path')
     expect((screen.getByTestId('converter-preview-result') as HTMLElement).tagName).toBe('AUDIO')
   })
 
-  it('renders video output for video file paths', async () => {
-    await previewWithOutput('/output/result.mp4')
+  it('renders video output for video_path data type', async () => {
+    await previewWithOutput('/output/result.mp4', 'video_path')
     expect((screen.getByTestId('converter-preview-result') as HTMLElement).tagName).toBe('VIDEO')
   })
 
   it('renders text output for plain text', async () => {
-    await previewWithOutput('plain text output')
+    await previewWithOutput('plain text output', 'text')
     expect((screen.getByTestId('converter-preview-result') as HTMLElement).tagName).toBe('PRE')
   })
+
+  it('renders binary file output as a chip with Open link for binary_path data type', async () => {
+    await previewWithOutput('/tmp/out.pdf', 'binary_path')
+    const result = screen.getByTestId('converter-preview-result') as HTMLElement
+    expect(result.tagName).toBe('DIV')
+    expect(result).toHaveTextContent('out.pdf')
+    expect(screen.getByTestId('converter-preview-open')).toHaveAttribute('href', '/api/media?path=%2Ftmp%2Fout.pdf')
+  })
 })
 
 // ─── Resize handle ───────────────────────────────────────────────
diff --git a/frontend/src/components/Chat/ConverterPanel/ConverterPanel.styles.ts b/frontend/src/components/Chat/ConverterPanel/ConverterPanel.styles.ts
index 9569c1bc0a..eff9f3d62f 100644
--- a/frontend/src/components/Chat/ConverterPanel/ConverterPanel.styles.ts
+++ b/frontend/src/components/Chat/ConverterPanel/ConverterPanel.styles.ts
@@ -299,4 +299,39 @@ export const useConverterPanelStyles = makeStyles({
     maxHeight: '200px',
     borderRadius: tokens.borderRadiusMedium,
   },
+  fileChip: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalS,
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
+    backgroundColor: tokens.colorNeutralBackground4,
+    borderRadius: tokens.borderRadiusMedium,
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+  },
+  fileChipName: {
+    flex: 1,
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    fontFamily: tokens.fontFamilyMonospace,
+    color: tokens.colorNeutralForeground1,
+  },
+  fileChipOpen: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalXXS,
+    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
+    borderRadius: tokens.borderRadiusSmall,
+    backgroundColor: tokens.colorBrandBackground,
+    color: tokens.colorNeutralForegroundOnBrand,
+    fontSize: tokens.fontSizeBase200,
+    fontWeight: tokens.fontWeightSemibold as unknown as string,
+    textDecoration: 'none',
+    flexShrink: 0,
+    ':hover': {
+      backgroundColor: tokens.colorBrandBackgroundHover,
+      color: tokens.colorNeutralForegroundOnBrand,
+    },
+  },
 })
diff --git a/frontend/src/components/Chat/ConverterPanel/ConverterPanel.tsx b/frontend/src/components/Chat/ConverterPanel/ConverterPanel.tsx
index 66e3d0e6ab..184d87d626 100644
--- a/frontend/src/components/Chat/ConverterPanel/ConverterPanel.tsx
+++ b/frontend/src/components/Chat/ConverterPanel/ConverterPanel.tsx
@@ -35,6 +35,7 @@ export default function ConverterPanel({ onClose, previewText = '', attachmentDa
   const [paramValues, setParamValues] = useState<Record<string, string>>({})
   const [paramsExpanded, setParamsExpanded] = useState(true)
   const [previewOutput, setPreviewOutput] = useState('')
+  const [previewOutputType, setPreviewOutputType] = useState('text')
   const [previewConverterInstanceId, setPreviewConverterInstanceId] = useState<string | null>(null)
   const [isPreviewing, setIsPreviewing] = useState(false)
   const [previewError, setPreviewError] = useState<string | null>(null)
@@ -147,6 +148,7 @@ export default function ConverterPanel({ onClose, previewText = '', attachmentDa
     setQuery('')
     setParamValues({})
     setPreviewOutput('')
+    setPreviewOutputType('text')
     setPreviewConverterInstanceId(null)
     setPreviewError(null)
     setShowValidation(false)
@@ -165,6 +167,7 @@ export default function ConverterPanel({ onClose, previewText = '', attachmentDa
     }
     setParamValues(defaults)
     setPreviewOutput('')
+    setPreviewOutputType('text')
     setPreviewConverterInstanceId(null)
     setPreviewError(null)
     setShowValidation(false)
@@ -214,6 +217,7 @@ export default function ConverterPanel({ onClose, previewText = '', attachmentDa
       })
 
       setPreviewOutput(previewResponse.converted_value)
+      setPreviewOutputType(previewResponse.converted_value_data_type ?? 'text')
       setPreviewConverterInstanceId(converterId)
     } catch (err) {
       setPreviewError(toApiError(err).detail)
@@ -222,7 +226,18 @@ export default function ConverterPanel({ onClose, previewText = '', attachmentDa
     }
   }, [activeTab, previewText, attachmentData, selectedConverterType, missingRequiredParams, paramValues, activeDataType, getOrCreateConverterInstance])
 
-  // Auto-preview for non-LLM text-output converters (they're fast/cheap)
+  // Auto-preview is only safe for converters that:
+  //   - aren't LLM-based (network cost)
+  //   - emit text output (file outputs would litter the disk on every keystroke)
+  // Everything else requires an explicit Preview click.
+  const supportsAutoPreview = useMemo(() => {
+    if (!selectedConverter) return false
+    if (selectedConverter.is_llm_based) return false
+    const outputs = selectedConverter.supported_output_types ?? []
+    if (outputs.length === 0) return true
+    return outputs.every((t) => t === 'text')
+  }, [selectedConverter])
+
   const autoPreviewTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
   useEffect(() => {
     if (autoPreviewTimer.current) {
@@ -235,13 +250,14 @@ export default function ConverterPanel({ onClose, previewText = '', attachmentDa
     // Clear preview when input is emptied (e.g. after sending)
     if (!currentPreviewValue.trim()) {
       setPreviewOutput('')
+      setPreviewOutputType('text')
       setPreviewConverterInstanceId(null)
       setPreviewError(null)
     }
 
     if (
       !selectedConverter ||
-      selectedConverter.is_llm_based ||
+      !supportsAutoPreview ||
       !currentPreviewValue.trim() ||
       missingRequiredParams.length
     ) {
@@ -257,7 +273,7 @@ export default function ConverterPanel({ onClose, previewText = '', attachmentDa
         clearTimeout(autoPreviewTimer.current)
       }
     }
-    }, [activeTab, previewText, attachmentData, missingRequiredParams, selectedConverter, handlePreview])
+    }, [activeTab, previewText, attachmentData, missingRequiredParams, selectedConverter, supportsAutoPreview, handlePreview])
   const handleMouseDown = useCallback(() => {
     isDragging.current = true
     document.body.style.cursor = 'col-resize'
@@ -400,6 +416,7 @@ export default function ConverterPanel({ onClose, previewText = '', attachmentDa
               isPreviewing={isPreviewing}
               previewError={previewError}
               previewOutput={previewOutput}
+              previewOutputType={previewOutputType}
               previewConverterInstanceId={previewConverterInstanceId}
               onPreview={handlePreview}
               onUseConvertedValue={onUseConvertedValue}
diff --git a/frontend/src/components/Chat/ConverterPanel/ConverterPreview.test.tsx b/frontend/src/components/Chat/ConverterPanel/ConverterPreview.test.tsx
index dff3ac6000..433998b608 100644
--- a/frontend/src/components/Chat/ConverterPanel/ConverterPreview.test.tsx
+++ b/frontend/src/components/Chat/ConverterPanel/ConverterPreview.test.tsx
@@ -16,6 +16,7 @@ function renderPreview(overrides: Partial<ConverterPreviewProps> = {}) {
     isPreviewing: false,
     previewError: null,
     previewOutput: '',
+    previewOutputType: 'text',
     previewConverterInstanceId: null,
     onPreview: jest.fn(),
     onUseConvertedValue: jest.fn(),
@@ -130,38 +131,43 @@ describe('Error display', () => {
 
 describe('Output rendering', () => {
   it('renders text output in a pre element', () => {
-    renderPreview({ previewOutput: 'aGVsbG8=' })
+    renderPreview({ previewOutput: 'aGVsbG8=', previewOutputType: 'text' })
     const result = screen.getByTestId('converter-preview-result')
     expect(result.tagName).toBe('PRE')
     expect(result).toHaveTextContent('aGVsbG8=')
   })
 
-  it('renders image output as img element for .png file', () => {
-    renderPreview({ previewOutput: '/path/to/output.png' })
+  it('renders image output as img element when previewOutputType is image_path', () => {
+    renderPreview({ previewOutput: '/path/to/output.png', previewOutputType: 'image_path' })
     const result = screen.getByTestId('converter-preview-result')
     expect(result.tagName).toBe('IMG')
     expect(result).toHaveAttribute('src', '/api/media?path=%2Fpath%2Fto%2Foutput.png')
   })
 
-  it('renders image output for .jpg extension', () => {
-    renderPreview({ previewOutput: '/path/to/output.jpg' })
-    const result = screen.getByTestId('converter-preview-result')
-    expect(result.tagName).toBe('IMG')
-  })
-
-  it('renders audio output as audio element for .wav file', () => {
-    renderPreview({ previewOutput: '/path/to/output.wav' })
+  it('renders audio output as audio element when previewOutputType is audio_path', () => {
+    renderPreview({ previewOutput: '/path/to/output.wav', previewOutputType: 'audio_path' })
     const result = screen.getByTestId('converter-preview-result')
     expect(result.tagName).toBe('AUDIO')
     expect(result).toHaveAttribute('src', '/api/media?path=%2Fpath%2Fto%2Foutput.wav')
   })
 
-  it('renders video output as video element for .mp4 file', () => {
-    renderPreview({ previewOutput: '/path/to/output.mp4' })
+  it('renders video output as video element when previewOutputType is video_path', () => {
+    renderPreview({ previewOutput: '/path/to/output.mp4', previewOutputType: 'video_path' })
     const result = screen.getByTestId('converter-preview-result')
     expect(result.tagName).toBe('VIDEO')
     expect(result).toHaveAttribute('src', '/api/media?path=%2Fpath%2Fto%2Foutput.mp4')
   })
+
+  it('renders binary file output as a chip with an Open link', () => {
+    renderPreview({ previewOutput: '/tmp/result.pdf', previewOutputType: 'binary_path' })
+    const result = screen.getByTestId('converter-preview-result')
+    expect(result.tagName).toBe('DIV')
+    expect(result).toHaveTextContent('result.pdf')
+    const openLink = screen.getByTestId('converter-preview-open')
+    expect(openLink).toHaveAttribute('href', '/api/media?path=%2Ftmp%2Fresult.pdf')
+    expect(openLink).toHaveAttribute('target', '_blank')
+    expect(openLink).toHaveAttribute('rel', expect.stringContaining('noopener'))
+  })
 })
 
 // ─── Use Converted Value button ─────────────────────────────────
@@ -188,6 +194,7 @@ describe('Use Converted Value button', () => {
       activeTab: 'text',
       previewText: 'hello',
       previewOutput: 'aGVsbG8=',
+      previewOutputType: 'text',
       previewConverterInstanceId: 'conv-1',
       onUseConvertedValue,
     })
@@ -197,6 +204,7 @@ describe('Use Converted Value button', () => {
       converterInstanceId: 'conv-1',
       convertedValue: 'aGVsbG8=',
       originalValue: 'hello',
+      convertedDataType: 'text',
     })
   })
 
@@ -207,6 +215,7 @@ describe('Use Converted Value button', () => {
       previewText: '',
       attachmentData: { image: 'data:image/png;base64,abc' },
       previewOutput: '/path/to/output.png',
+      previewOutputType: 'image_path',
       previewConverterInstanceId: 'conv-2',
       onUseConvertedValue,
     })
@@ -216,6 +225,27 @@ describe('Use Converted Value button', () => {
       converterInstanceId: 'conv-2',
       convertedValue: '/path/to/output.png',
       originalValue: 'data:image/png;base64,abc',
+      convertedDataType: 'image_path',
+    })
+  })
+
+  it('calls onUseConvertedValue with binary_path output for text→file converter', () => {
+    const onUseConvertedValue = jest.fn()
+    renderPreview({
+      activeTab: 'text',
+      previewText: 'make a pdf',
+      previewOutput: '/tmp/result.pdf',
+      previewOutputType: 'binary_path',
+      previewConverterInstanceId: 'conv-pdf',
+      onUseConvertedValue,
+    })
+    fireEvent.click(screen.getByTestId('use-converted-btn'))
+    expect(onUseConvertedValue).toHaveBeenCalledWith({
+      pieceType: 'text',
+      converterInstanceId: 'conv-pdf',
+      convertedValue: '/tmp/result.pdf',
+      originalValue: 'make a pdf',
+      convertedDataType: 'binary_path',
     })
   })
 
diff --git a/frontend/src/components/Chat/ConverterPanel/ConverterPreview.tsx b/frontend/src/components/Chat/ConverterPanel/ConverterPreview.tsx
index ccf4ac1886..a39f2ccabd 100644
--- a/frontend/src/components/Chat/ConverterPanel/ConverterPreview.tsx
+++ b/frontend/src/components/Chat/ConverterPanel/ConverterPreview.tsx
@@ -1,6 +1,7 @@
 import { Button, MessageBar, MessageBarBody, Spinner, Text } from '@fluentui/react-components'
-import { PlayRegular } from '@fluentui/react-icons'
+import { OpenRegular, PlayRegular } from '@fluentui/react-icons'
 import type { PieceConversion } from '../converterTypes'
+import { basenameFromValue, buildMediaUrl, dataTypeToAttachmentKind, isPathDataType } from '../converterTypes'
 import { useConverterPanelStyles } from './ConverterPanel.styles'
 
 export interface ConverterPreviewProps {
@@ -11,14 +12,92 @@ export interface ConverterPreviewProps {
   isPreviewing: boolean
   previewError: string | null
   previewOutput: string
+  /** Backend data type of the preview output (e.g. 'text', 'image_path', 'binary_path'). */
+  previewOutputType: string
   previewConverterInstanceId: string | null
   onPreview: () => void
   onUseConvertedValue?: (conversion: PieceConversion) => void
 }
 
-export default function ConverterPreview({ activeTab, previewText, attachmentData, selectedConverterType, isPreviewing, previewError, previewOutput, previewConverterInstanceId, onPreview, onUseConvertedValue }: ConverterPreviewProps) {
+const FILE_ICON_BY_KIND: Record<string, string> = {
+  image: '🖼️',
+  audio: '🎵',
+  video: '🎥',
+  file: '📄',
+}
+
+export default function ConverterPreview({ activeTab, previewText, attachmentData, selectedConverterType, isPreviewing, previewError, previewOutput, previewOutputType, previewConverterInstanceId, onPreview, onUseConvertedValue }: ConverterPreviewProps) {
   const styles = useConverterPanelStyles()
 
+  const renderOutput = () => {
+    if (!previewOutput) {
+      return (
+        <Text size={200} className={styles.hintText}>
+          Converted output will appear here.
+        </Text>
+      )
+    }
+
+    // Path-based outputs (image/audio/video/binary) → media renderer or file chip.
+    if (isPathDataType(previewOutputType)) {
+      const kind = dataTypeToAttachmentKind(previewOutputType)
+      const url = buildMediaUrl(previewOutput)
+      const filename = basenameFromValue(previewOutput, `output.${kind}`)
+      if (kind === 'image') {
+        return (
+          <img
+            src={url}
+            alt="Converter output"
+            className={styles.previewImage}
+            data-testid="converter-preview-result"
+          />
+        )
+      }
+      if (kind === 'audio') {
+        return (
+          <audio
+            controls
+            src={url}
+            className={styles.previewAudio}
+            data-testid="converter-preview-result"
+          />
+        )
+      }
+      if (kind === 'video') {
+        return (
+          <video
+            controls
+            src={url}
+            className={styles.previewVideo}
+            data-testid="converter-preview-result"
+          />
+        )
+      }
+      // Generic binary file (e.g. PDF, DOCX): show a chip with an Open action.
+      return (
+        <div className={styles.fileChip} data-testid="converter-preview-result">
+          <span aria-hidden="true">{FILE_ICON_BY_KIND.file}</span>
+          <Text size={200} className={styles.fileChipName} title={filename}>
+            {filename}
+          </Text>
+          <a
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.fileChipOpen}
+            data-testid="converter-preview-open"
+          >
+            <OpenRegular fontSize={14} />
+            <span>Open</span>
+          </a>
+        </div>
+      )
+    }
+
+    // Text output — fallback to a preformatted block.
+    return <pre className={styles.previewPre} data-testid="converter-preview-result">{previewOutput}</pre>
+  }
+
   return (
     <div className={styles.outputSection} data-testid="converter-preview-section">
       <Button
@@ -53,36 +132,7 @@ export default function ConverterPreview({ activeTab, previewText, attachmentDat
       <div data-testid="converter-output">
         <Text weight="semibold" size={300}>Output</Text>
         <div className={styles.outputBox}>
-          {previewOutput ? (
-            previewOutput.match(/\.(png|jpg|jpeg|gif|bmp|webp)$/i) ? (
-              <img
-                src={`/api/media?path=${encodeURIComponent(previewOutput)}`}
-                alt="Converter output"
-                className={styles.previewImage}
-                data-testid="converter-preview-result"
-              />
-            ) : previewOutput.match(/\.(wav|mp3|ogg|flac)$/i) ? (
-              <audio
-                controls
-                src={`/api/media?path=${encodeURIComponent(previewOutput)}`}
-                className={styles.previewAudio}
-                data-testid="converter-preview-result"
-              />
-            ) : previewOutput.match(/\.(mp4|webm|mov)$/i) ? (
-              <video
-                controls
-                src={`/api/media?path=${encodeURIComponent(previewOutput)}`}
-                className={styles.previewVideo}
-                data-testid="converter-preview-result"
-              />
-            ) : (
-              <pre className={styles.previewPre} data-testid="converter-preview-result">{previewOutput}</pre>
-            )
-          ) : (
-            <Text size={200} className={styles.hintText}>
-              Converted output will appear here.
-            </Text>
-          )}
+          {renderOutput()}
         </div>
       </div>
 
@@ -95,6 +145,7 @@ export default function ConverterPreview({ activeTab, previewText, attachmentDat
             converterInstanceId: previewConverterInstanceId,
             convertedValue: previewOutput,
             originalValue: activeTab === 'text' ? previewText : (attachmentData[activeTab] ?? ''),
+            convertedDataType: previewOutputType,
           })}
           disabled={!onUseConvertedValue}
           data-testid="use-converted-btn"
diff --git a/frontend/src/components/Chat/MessageList.styles.ts b/frontend/src/components/Chat/MessageList.styles.ts
index 7273fa1589..4a4030be56 100644
--- a/frontend/src/components/Chat/MessageList.styles.ts
+++ b/frontend/src/components/Chat/MessageList.styles.ts
@@ -102,11 +102,38 @@ export const useMessageListStyles = makeStyles({
     border: `1px solid ${tokens.colorNeutralStroke1}`,
   },
   attachmentFile: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalS,
     padding: tokens.spacingVerticalS,
     backgroundColor: tokens.colorNeutralBackground1,
     borderRadius: tokens.borderRadiusMedium,
     border: `1px solid ${tokens.colorNeutralStroke1}`,
   },
+  attachmentFileName: {
+    flex: 1,
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  attachmentOpenLink: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalXXS,
+    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
+    borderRadius: tokens.borderRadiusSmall,
+    backgroundColor: tokens.colorBrandBackground,
+    color: tokens.colorNeutralForegroundOnBrand,
+    fontSize: tokens.fontSizeBase200,
+    fontWeight: tokens.fontWeightSemibold as unknown as string,
+    textDecoration: 'none',
+    flexShrink: 0,
+    ':hover': {
+      backgroundColor: tokens.colorBrandBackgroundHover,
+      color: tokens.colorNeutralForegroundOnBrand,
+    },
+  },
   emptyState: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/frontend/src/components/Chat/MessageList.test.tsx b/frontend/src/components/Chat/MessageList.test.tsx
index fd68e15ab1..e8a4a39555 100644
--- a/frontend/src/components/Chat/MessageList.test.tsx
+++ b/frontend/src/components/Chat/MessageList.test.tsx
@@ -352,6 +352,36 @@ describe("MessageList", () => {
     expect(screen.queryByTestId("download-btn-0-0")).not.toBeInTheDocument();
   });
 
+  it("should show Open link for file attachments with a url", () => {
+    const fileMessages: Message[] = [
+      {
+        role: "user",
+        content: "make a pdf please",
+        timestamp: new Date().toISOString(),
+        attachments: [
+          {
+            type: "file",
+            name: "result.pdf",
+            url: "/api/media?path=%2Ftmp%2Fresult.pdf",
+            mimeType: "application/pdf",
+            size: 0,
+          },
+        ],
+      },
+    ];
+
+    render(
+      <TestWrapper>
+        <MessageList messages={fileMessages} />
+      </TestWrapper>
+    );
+
+    const openLink = screen.getByTestId("attachment-open-0-0");
+    expect(openLink).toHaveAttribute("href", "/api/media?path=%2Ftmp%2Fresult.pdf");
+    expect(openLink).toHaveAttribute("target", "_blank");
+    expect(openLink).toHaveAttribute("rel", expect.stringContaining("noopener"));
+  });
+
   // -----------------------------------------------------------------------
   // "Use in new conversation" button
   // -----------------------------------------------------------------------
diff --git a/frontend/src/components/Chat/MessageList.tsx b/frontend/src/components/Chat/MessageList.tsx
index 6e2a54086a..ea7ac57148 100644
--- a/frontend/src/components/Chat/MessageList.tsx
+++ b/frontend/src/components/Chat/MessageList.tsx
@@ -9,7 +9,7 @@ import {
   Tooltip,
   Spinner,
 } from '@fluentui/react-components'
-import { ArrowDownloadRegular, ArrowReplyRegular, ArrowForwardRegular, ChatAddRegular, BranchForkRegular } from '@fluentui/react-icons'
+import { ArrowDownloadRegular, ArrowReplyRegular, ArrowForwardRegular, ChatAddRegular, BranchForkRegular, OpenRegular } from '@fluentui/react-icons'
 import { Message, MessageAttachment } from '../../types'
 import { useMessageListStyles } from './MessageList.styles'
 
@@ -233,7 +233,21 @@ export default function MessageList({ messages, onCopyToInput, onCopyToNewConver
                       )}
                       {att.type === 'file' && (
                         <div className={styles.attachmentFile}>
-                          <Text size={200}>📄 {att.name}</Text>
+                          <Text size={200} className={styles.attachmentFileName}>📄 {att.name}</Text>
+                          {att.url && (
+                            <Tooltip content="Open in new tab" relationship="label">
+                              <a
+                                href={att.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className={styles.attachmentOpenLink}
+                                data-testid={`attachment-open-${index}-${attIndex}`}
+                              >
+                                <OpenRegular fontSize={14} />
+                                <span>Open</span>
+                              </a>
+                            </Tooltip>
+                          )}
                         </div>
                       )}
                     </div>
diff --git a/frontend/src/components/Chat/converterTypes.ts b/frontend/src/components/Chat/converterTypes.ts
index 232a70490b..8f5bce685f 100644
--- a/frontend/src/components/Chat/converterTypes.ts
+++ b/frontend/src/components/Chat/converterTypes.ts
@@ -9,5 +9,66 @@ export interface PieceConversion {
   converterInstanceId: string
   convertedValue: string
   originalValue: string
+  /** Input piece type the conversion came from (e.g. 'text', 'image'). */
   pieceType: string
+  /**
+   * Backend data type of the converted value (e.g. 'text', 'image_path',
+   * 'binary_path'). May differ from the input piece type when a converter
+   * changes the data type — e.g. PDFConverter takes text and emits binary_path.
+   */
+  convertedDataType: string
+}
+
+/**
+ * True when the converter's output is a file path served via /api/media,
+ * i.e. anything that ends with `_path` (image, audio, video, binary).
+ */
+export function isPathDataType(dataType: string | undefined | null): boolean {
+  return typeof dataType === 'string' && dataType.endsWith('_path')
+}
+
+/**
+ * Map a backend data type to the corresponding frontend MessageAttachment type.
+ */
+export function dataTypeToAttachmentKind(dataType: string): 'image' | 'audio' | 'video' | 'file' {
+  if (dataType.startsWith('image')) return 'image'
+  if (dataType.startsWith('audio')) return 'audio'
+  if (dataType.startsWith('video')) return 'video'
+  return 'file'
+}
+
+/**
+ * Build a /api/media URL for a stored file path. Pass-through when the value
+ * is already a URL or data URI.
+ */
+export function buildMediaUrl(value: string): string {
+  if (value.startsWith('http://') || value.startsWith('https://') || value.startsWith('data:')) {
+    return value
+  }
+  if (value.startsWith('/api/media')) return value
+  return `/api/media?path=${encodeURIComponent(value)}`
+}
+
+/**
+ * Extract a display filename from a path/URL; falls back to a sensible default.
+ */
+export function basenameFromValue(value: string, fallback: string): string {
+  if (!value) return fallback
+  // Handle /api/media?path=... form
+  if (value.startsWith('/api/media')) {
+    const match = /[?&]path=([^&]+)/.exec(value)
+    if (match) {
+      try {
+        const decoded = decodeURIComponent(match[1])
+        const parts = decoded.split(/[/\\]/)
+        return parts[parts.length - 1] || fallback
+      } catch {
+        return fallback
+      }
+    }
+    return fallback
+  }
+  const cleaned = value.split('?')[0]
+  const parts = cleaned.split(/[/\\]/)
+  return parts[parts.length - 1] || fallback
 }
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index fefbbb6eb3..3c04828cb0 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -185,7 +185,7 @@ export const convertersApi = {
     return response.data
   },
 
-  previewConversion: async (request: { original_value: string; converter_ids: string[]; original_value_data_type?: string }): Promise<{ converted_value: string }> => {
+  previewConversion: async (request: { original_value: string; converter_ids: string[]; original_value_data_type?: string }): Promise<{ converted_value: string; converted_value_data_type?: string }> => {
     const response = await apiClient.post('/converters/preview', request)
     return response.data
   },

From 6600ec4638bac3b73babd5bc53d2a6dea2576cab Mon Sep 17 00:00:00 2001
From: jbolor21 <86250273+jbolor21@users.noreply.github.com>
Date: Mon, 11 May 2026 12:44:07 -0700
Subject: [PATCH 2/4] add tests

---
 .../src/components/Chat/ChatWindow.test.tsx   | 154 ++++++++++++++++++
 1 file changed, 154 insertions(+)

diff --git a/frontend/src/components/Chat/ChatWindow.test.tsx b/frontend/src/components/Chat/ChatWindow.test.tsx
index a2666fc18c..56f941d78d 100644
--- a/frontend/src/components/Chat/ChatWindow.test.tsx
+++ b/frontend/src/components/Chat/ChatWindow.test.tsx
@@ -2559,4 +2559,158 @@ describe("ChatWindow Integration", () => {
       expect(screen.getByTestId("converter-panel")).toBeInTheDocument();
     });
   });
+
+  // -----------------------------------------------------------------------
+  // Text → File converter flow (e.g. PDFConverter)
+  // -----------------------------------------------------------------------
+
+  it("should render converted-file chip and synthesize file attachment when a text→file converter is used", async () => {
+    mockedConvertersApi.listConverterCatalog.mockResolvedValue({
+      items: [
+        {
+          converter_type: "PDFConverter",
+          supported_input_types: ["text"],
+          supported_output_types: ["binary_path"],
+          parameters: [],
+        },
+      ],
+    });
+    mockedConvertersApi.createConverter.mockResolvedValue({
+      converter_id: "conv-pdf",
+      converter_type: "PDFConverter",
+    });
+    mockedConvertersApi.previewConversion.mockResolvedValue({
+      converted_value: "/tmp/results/report.pdf",
+      converted_value_data_type: "binary_path",
+    });
+    mockedAttacksApi.createAttack.mockResolvedValue({
+      attack_result_id: "ar-pdf",
+      conversation_id: "conv-pdf-flow",
+      created_at: "2026-01-01T00:00:00Z",
+    } as never);
+    // Keep addMessage pending so the optimistic user message (with the
+    // synthesized file attachment) remains in the DOM for assertion.
+    mockedAttacksApi.addMessage.mockImplementation(
+      () => new Promise(() => {}) as never
+    );
+    mockedMapper.buildMessagePieces.mockResolvedValue([
+      { piece_type: "text", original_value: "make a pdf" } as never,
+    ]);
+    mockedMapper.backendMessagesToFrontend.mockReturnValue([]);
+
+    render(
+      <TestWrapper>
+        <ChatWindow {...defaultProps} conversationId={null} />
+      </TestWrapper>
+    );
+
+    // 1. Type input
+    const chatInput = screen.getByTestId("chat-input");
+    await userEvent.type(chatInput, "make a pdf");
+
+    // 2. Open converter panel and select PDFConverter
+    await userEvent.click(screen.getByTestId("toggle-converter-panel-btn"));
+    const combobox = screen.getByRole("combobox");
+    await userEvent.click(combobox);
+    const option = await screen.findByRole("option", { name: /PDFConverter/ });
+    await userEvent.click(option);
+
+    // 3. text→file converters do not auto-preview; click Preview explicitly
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-preview-btn")).toBeInTheDocument();
+    });
+    await userEvent.click(screen.getByTestId("converter-preview-btn"));
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-preview-result")).toBeInTheDocument();
+    });
+
+    // 4. Use the converted value — populates pieceConversions['text'] with binary_path output
+    await userEvent.click(screen.getByTestId("use-converted-btn"));
+
+    // 5. The file chip should appear in the input area (covers convertedFileChip IIFE)
+    const chip = await screen.findByTestId("converted-file-chip");
+    expect(chip).toHaveTextContent("report.pdf");
+    const openLink = screen.getByTestId("converted-file-open");
+    expect(openLink).toHaveAttribute(
+      "href",
+      expect.stringContaining(encodeURIComponent("/tmp/results/report.pdf"))
+    );
+
+    // 6. Send — covers handleSend's text→file branch (buildMediaUrl /
+    //    dataTypeToAttachmentKind / basenameFromValue) which synthesizes a
+    //    file attachment on the optimistic user message.
+    const sendBtn = screen.getByTestId("send-message-btn");
+    await waitFor(() => expect(sendBtn).toBeEnabled());
+    await userEvent.click(sendBtn);
+
+    await waitFor(() => {
+      expect(mockedAttacksApi.createAttack).toHaveBeenCalled();
+    });
+
+    // The optimistic user bubble carries the synthesized file attachment.
+    // MessageList renders the file attachment with a unique testid we can target.
+    const attachmentOpen = await screen.findByTestId("attachment-open-0-0");
+    expect(attachmentOpen).toHaveAttribute(
+      "href",
+      expect.stringContaining(encodeURIComponent("/tmp/results/report.pdf"))
+    );
+  });
+
+  it("should auto-clear a stale text→text conversion when the typed text diverges from the original", async () => {
+    mockedConvertersApi.listConverterCatalog.mockResolvedValue({
+      items: [
+        {
+          converter_type: "Base64Converter",
+          supported_input_types: ["text"],
+          supported_output_types: ["text"],
+          parameters: [],
+        },
+      ],
+    });
+    mockedConvertersApi.createConverter.mockResolvedValue({
+      converter_id: "conv-b64-stale",
+      converter_type: "Base64Converter",
+    });
+    mockedConvertersApi.previewConversion.mockResolvedValue({
+      converted_value: "aGVsbG8=",
+      converted_value_data_type: "text",
+    });
+
+    render(
+      <TestWrapper>
+        <ChatWindow {...defaultProps} conversationId={null} />
+      </TestWrapper>
+    );
+
+    const chatInput = screen.getByTestId("chat-input");
+    await userEvent.type(chatInput, "hello");
+
+    await userEvent.click(screen.getByTestId("toggle-converter-panel-btn"));
+    const combobox = screen.getByRole("combobox");
+    await userEvent.click(combobox);
+    const option = await screen.findByRole("option", { name: /Base64Converter/ });
+    await userEvent.click(option);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-preview-btn")).toBeInTheDocument();
+    });
+    await userEvent.click(screen.getByTestId("converter-preview-btn"));
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-preview-result")).toBeInTheDocument();
+    });
+    await userEvent.click(screen.getByTestId("use-converted-btn"));
+
+    // The converted text row now exists (originalValue captured = "hello")
+    await waitFor(() => {
+      expect(screen.getByTestId("converted-value-input")).toBeInTheDocument();
+    });
+
+    // Type more — originalValue no longer matches chatInputText, so the
+    // auto-clear effect must drop pieceConversions['text'].
+    await userEvent.type(chatInput, " world");
+
+    await waitFor(() => {
+      expect(screen.queryByTestId("converted-value-input")).not.toBeInTheDocument();
+    });
+  });
 });

From 59efda0ea16a39d2a11ece072f8627475d565980 Mon Sep 17 00:00:00 2001
From: jbolor21 <86250273+jbolor21@users.noreply.github.com>
Date: Thu, 14 May 2026 11:07:54 -0700
Subject: [PATCH 3/4] add file preview

---
 .../components/Chat/ChatInputArea.styles.ts   | 27 +++++-
 .../components/Chat/ChatInputArea.test.tsx    | 88 +++++++++++++++++++
 .../src/components/Chat/ChatInputArea.tsx     | 88 ++++++++++++-------
 3 files changed, 168 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/Chat/ChatInputArea.styles.ts b/frontend/src/components/Chat/ChatInputArea.styles.ts
index 06d27b9953..27aa9c61da 100644
--- a/frontend/src/components/Chat/ChatInputArea.styles.ts
+++ b/frontend/src/components/Chat/ChatInputArea.styles.ts
@@ -238,13 +238,32 @@ export const useChatInputAreaStyles = makeStyles({
       borderRadius: '4px',
     },
   },
-  convertedMediaPreview: {
-    maxHeight: '60px',
+  convertedFileBlock: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalXXS,
+    minWidth: 0,
+  },
+  convertedImagePreview: {
+    display: 'block',
+    maxHeight: '120px',
     maxWidth: '100%',
     borderRadius: tokens.borderRadiusSmall,
     objectFit: 'contain' as const,
-    flex: 1,
-    minWidth: 0,
+    alignSelf: 'flex-start',
+  },
+  convertedAudioPreview: {
+    display: 'block',
+    width: '100%',
+    maxWidth: '360px',
+    height: '32px',
+  },
+  convertedVideoPreview: {
+    display: 'block',
+    maxHeight: '160px',
+    maxWidth: '100%',
+    borderRadius: tokens.borderRadiusSmall,
+    alignSelf: 'flex-start',
   },
   convertedFilename: {
     flex: 1,
diff --git a/frontend/src/components/Chat/ChatInputArea.test.tsx b/frontend/src/components/Chat/ChatInputArea.test.tsx
index 8dbb77f0ee..f7ddff1c41 100644
--- a/frontend/src/components/Chat/ChatInputArea.test.tsx
+++ b/frontend/src/components/Chat/ChatInputArea.test.tsx
@@ -709,6 +709,94 @@ describe("ChatInputArea", () => {
     expect(onClearConvertedFileChip).toHaveBeenCalledTimes(1);
   });
 
+  it("should render an inline image preview for an image conversion", () => {
+    render(
+      <TestWrapper>
+        <ChatInputArea
+          {...defaultProps}
+          activeTarget={{ target_registry_name: "t", target_type: "T", endpoint: "e", model_name: "m" }}
+          convertedFileChip={{
+            name: "result.png",
+            url: "/api/media?path=%2Ftmp%2Fresult.png",
+            iconKind: "image",
+          }}
+        />
+      </TestWrapper>
+    );
+
+    const preview = screen.getByTestId("converted-file-preview-image");
+    expect(preview.tagName).toBe("IMG");
+    expect(preview).toHaveAttribute("src", "/api/media?path=%2Ftmp%2Fresult.png");
+    expect(preview).toHaveAttribute("alt", "result.png");
+    // Header info (filename + Open link) is still rendered alongside the preview.
+    expect(screen.getByTestId("converted-file-chip")).toHaveTextContent("result.png");
+    expect(screen.getByTestId("converted-file-open")).toHaveAttribute("href", "/api/media?path=%2Ftmp%2Fresult.png");
+  });
+
+  it("should render an inline audio preview for an audio conversion", () => {
+    render(
+      <TestWrapper>
+        <ChatInputArea
+          {...defaultProps}
+          activeTarget={{ target_registry_name: "t", target_type: "T", endpoint: "e", model_name: "m" }}
+          convertedFileChip={{
+            name: "speech.wav",
+            url: "/api/media?path=%2Ftmp%2Fspeech.wav",
+            iconKind: "audio",
+          }}
+        />
+      </TestWrapper>
+    );
+
+    const preview = screen.getByTestId("converted-file-preview-audio");
+    expect(preview.tagName).toBe("AUDIO");
+    expect(preview).toHaveAttribute("src", "/api/media?path=%2Ftmp%2Fspeech.wav");
+    expect(preview).toHaveAttribute("controls");
+    expect(screen.queryByTestId("converted-file-preview-image")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("converted-file-preview-video")).not.toBeInTheDocument();
+  });
+
+  it("should render an inline video preview for a video conversion", () => {
+    render(
+      <TestWrapper>
+        <ChatInputArea
+          {...defaultProps}
+          activeTarget={{ target_registry_name: "t", target_type: "T", endpoint: "e", model_name: "m" }}
+          convertedFileChip={{
+            name: "clip.mp4",
+            url: "/api/media?path=%2Ftmp%2Fclip.mp4",
+            iconKind: "video",
+          }}
+        />
+      </TestWrapper>
+    );
+
+    const preview = screen.getByTestId("converted-file-preview-video");
+    expect(preview.tagName).toBe("VIDEO");
+    expect(preview).toHaveAttribute("src", "/api/media?path=%2Ftmp%2Fclip.mp4");
+    expect(preview).toHaveAttribute("controls");
+  });
+
+  it("should not render a media preview for a generic file conversion", () => {
+    render(
+      <TestWrapper>
+        <ChatInputArea
+          {...defaultProps}
+          activeTarget={{ target_registry_name: "t", target_type: "T", endpoint: "e", model_name: "m" }}
+          convertedFileChip={{
+            name: "result.pdf",
+            url: "/api/media?path=%2Ftmp%2Fresult.pdf",
+            iconKind: "file",
+          }}
+        />
+      </TestWrapper>
+    );
+
+    expect(screen.queryByTestId("converted-file-preview-image")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("converted-file-preview-audio")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("converted-file-preview-video")).not.toBeInTheDocument();
+  });
+
   // ---------------------------------------------------------------------------
   // Unsupported modality warnings
   // ---------------------------------------------------------------------------
diff --git a/frontend/src/components/Chat/ChatInputArea.tsx b/frontend/src/components/Chat/ChatInputArea.tsx
index a6a7a244d9..43a97663fd 100644
--- a/frontend/src/components/Chat/ChatInputArea.tsx
+++ b/frontend/src/components/Chat/ChatInputArea.tsx
@@ -172,37 +172,63 @@ function TextInputRows({ input, convertedValue, convertedFileChip, disabled, tex
         </div>
       )}
       {!convertedValue && convertedFileChip && (
-        <div className={styles.convertedRow} data-testid="converted-file-chip">
-          <span className={styles.convertedBadge}>Converted</span>
-          <span aria-hidden="true">
-            {convertedFileChip.iconKind === 'image' && '🖼️'}
-            {convertedFileChip.iconKind === 'audio' && '🎵'}
-            {convertedFileChip.iconKind === 'video' && '🎥'}
-            {convertedFileChip.iconKind === 'file' && '📄'}
-          </span>
-          <Caption1 className={styles.convertedFilename} title={convertedFileChip.name}>
-            {convertedFileChip.name}
-          </Caption1>
-          <Tooltip content="Open in new tab" relationship="label">
-            <a
-              href={convertedFileChip.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={styles.openLink}
-              data-testid="converted-file-open"
-            >
-              <OpenRegular fontSize={14} />
-              <span>Open</span>
-            </a>
-          </Tooltip>
-          <Button
-            appearance="transparent"
-            size="small"
-            className={styles.dismissBtn}
-            icon={<DismissRegular />}
-            onClick={onClearConvertedFileChip}
-            data-testid="clear-converted-file-chip"
-          />
+        <div className={styles.convertedFileBlock} data-testid="converted-file-chip">
+          <div className={styles.convertedRow}>
+            <span className={styles.convertedBadge}>Converted</span>
+            <span aria-hidden="true">
+              {convertedFileChip.iconKind === 'image' && '🖼️'}
+              {convertedFileChip.iconKind === 'audio' && '🎵'}
+              {convertedFileChip.iconKind === 'video' && '🎥'}
+              {convertedFileChip.iconKind === 'file' && '📄'}
+            </span>
+            <Caption1 className={styles.convertedFilename} title={convertedFileChip.name}>
+              {convertedFileChip.name}
+            </Caption1>
+            <Tooltip content="Open in new tab" relationship="label">
+              <a
+                href={convertedFileChip.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles.openLink}
+                data-testid="converted-file-open"
+              >
+                <OpenRegular fontSize={14} />
+                <span>Open</span>
+              </a>
+            </Tooltip>
+            <Button
+              appearance="transparent"
+              size="small"
+              className={styles.dismissBtn}
+              icon={<DismissRegular />}
+              onClick={onClearConvertedFileChip}
+              data-testid="clear-converted-file-chip"
+            />
+          </div>
+          {convertedFileChip.iconKind === 'image' && (
+            <img
+              src={convertedFileChip.url}
+              alt={convertedFileChip.name}
+              className={styles.convertedImagePreview}
+              data-testid="converted-file-preview-image"
+            />
+          )}
+          {convertedFileChip.iconKind === 'audio' && (
+            <audio
+              controls
+              src={convertedFileChip.url}
+              className={styles.convertedAudioPreview}
+              data-testid="converted-file-preview-audio"
+            />
+          )}
+          {convertedFileChip.iconKind === 'video' && (
+            <video
+              controls
+              src={convertedFileChip.url}
+              className={styles.convertedVideoPreview}
+              data-testid="converted-file-preview-video"
+            />
+          )}
         </div>
       )}
     </>

From 8eff901a0b679998f00c5de07c4e877d67943b30 Mon Sep 17 00:00:00 2001
From: jbolor21 <86250273+jbolor21@users.noreply.github.com>
Date: Fri, 15 May 2026 11:01:51 -0700
Subject: [PATCH 4/4] e2e tests

---
 frontend/e2e/converters.spec.ts | 98 ++++++++++++++++++++++++++++++++-
 1 file changed, 97 insertions(+), 1 deletion(-)

diff --git a/frontend/e2e/converters.spec.ts b/frontend/e2e/converters.spec.ts
index 1aa0c5096d..085e080e06 100644
--- a/frontend/e2e/converters.spec.ts
+++ b/frontend/e2e/converters.spec.ts
@@ -48,6 +48,14 @@ const MOCK_CATALOG = {
       is_llm_based: false,
       description: "Compresses images.",
     },
+    {
+      converter_type: "AddImageTextConverter",
+      supported_input_types: ["text"],
+      supported_output_types: ["image_path"],
+      parameters: [],
+      is_llm_based: false,
+      description: "Renders text onto a generated image.",
+    },
     {
       converter_type: "TranslationConverter",
       supported_input_types: ["text"],
@@ -61,6 +69,17 @@ const MOCK_CATALOG = {
 
 const MOCK_CONVERSATION_ID = "e2e-conv-001";
 
+// 1x1 transparent PNG returned by the mock /api/media route so that the
+// inline image preview <img> element can resolve its src in headless mode.
+const TINY_PNG_BASE64 =
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGIAAgAABQABDQotsgAAAABJRU5ErkJggg==";
+
+// Map of mock image-output converter types → path returned by the preview
+// mock. Used to decide whether to emit text vs. image_path output.
+const IMAGE_OUTPUT_CONVERTERS: Record<string, string> = {
+  AddImageTextConverter: "/tmp/output.png",
+};
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -73,6 +92,9 @@ const MOCK_CONVERSATION_ID = "e2e-conv-001";
  */
 async function mockBackendAPIs(page: Page) {
   let accumulatedMessages: Record<string, unknown>[] = [];
+  // Track the converter type for each created converter instance so the
+  // preview mock can decide between text and image_path output.
+  const converterTypeById: Record<string, string> = {};
 
   // ── Converter-specific routes ──────────────────────────────────────────
 
@@ -89,6 +111,26 @@ async function mockBackendAPIs(page: Page) {
   await page.route(/\/api\/converters\/preview/, async (route) => {
     if (route.request().method() === "POST") {
       const body = JSON.parse(route.request().postData() ?? "{}");
+      const converterIds: string[] = body.converter_ids ?? [];
+      const converterType = converterTypeById[converterIds[0] ?? ""] ?? "";
+
+      // Image-output converters emit a file path the frontend renders via
+      // /api/media → triggers the convertedFileChip + inline preview branch.
+      if (IMAGE_OUTPUT_CONVERTERS[converterType]) {
+        await route.fulfill({
+          status: 200,
+          contentType: "application/json",
+          body: JSON.stringify({
+            original_value: body.original_value,
+            original_value_data_type: body.original_value_data_type ?? "text",
+            converted_value: IMAGE_OUTPUT_CONVERTERS[converterType],
+            converted_value_data_type: "image_path",
+            steps: [],
+          }),
+        });
+        return;
+      }
+
       const converted = Buffer.from(body.original_value ?? "").toString("base64");
       await route.fulfill({
         status: 200,
@@ -108,11 +150,13 @@ async function mockBackendAPIs(page: Page) {
   await page.route(/\/api\/converters$/, async (route) => {
     if (route.request().method() === "POST") {
       const body = JSON.parse(route.request().postData() ?? "{}");
+      const converterId = `mock-converter-${body.type}`;
+      converterTypeById[converterId] = body.type;
       await route.fulfill({
         status: 201,
         contentType: "application/json",
         body: JSON.stringify({
-          converter_id: "mock-converter-001",
+          converter_id: converterId,
           converter_type: body.type,
           display_name: null,
         }),
@@ -122,6 +166,16 @@ async function mockBackendAPIs(page: Page) {
     }
   });
 
+  // Media route — serves the generated image referenced by the preview
+  // mock. Returning a tiny valid PNG keeps the <img> element layout-stable.
+  await page.route(/\/api\/media\?path=/, async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "image/png",
+      body: Buffer.from(TINY_PNG_BASE64, "base64"),
+    });
+  });
+
   // ── Standard chat routes (matching chat.spec.ts pattern) ───────────────
 
   // Targets list
@@ -515,4 +569,46 @@ test.describe("Converter Panel", () => {
     // The converter badge should be visible in the attack table
     await expect(page.getByText("Base64Converter")).toBeVisible({ timeout: 10000 });
   });
+
+  test("should render inline image preview in input box after a text→image conversion", async ({ page }) => {
+    // Type a prompt before opening the panel
+    await page.getByTestId("chat-input").fill("hello world");
+
+    // Select AddImageTextConverter (text input → image_path output)
+    await selectConverter(page, "AddImageTextConverter");
+
+    // Auto-preview only fires for text-output converters, so click Preview
+    await page.getByTestId("converter-preview-btn").click();
+    await expect(page.getByTestId("converter-preview-result")).toBeVisible({ timeout: 10000 });
+
+    // Apply the converted value to the input
+    await page.getByTestId("use-converted-btn").click();
+
+    // Close converter panel so the input area is unobscured
+    await page.getByTestId("close-converter-panel-btn").click();
+    await expect(page.getByTestId("converter-panel")).not.toBeVisible();
+
+    // The converted-file-chip block is rendered in the input area for image_path outputs
+    const chip = page.getByTestId("converted-file-chip");
+    await expect(chip).toBeVisible();
+    await expect(chip).toContainText("output.png");
+
+    // The inline image preview is rendered alongside the filename + Open link
+    const preview = page.getByTestId("converted-file-preview-image");
+    await expect(preview).toBeVisible({ timeout: 10000 });
+    await expect(preview).toHaveAttribute("src", /\/api\/media\?path=/);
+    await expect(preview).toHaveAttribute("alt", "output.png");
+
+    // The Open link is still present alongside the preview
+    await expect(page.getByTestId("converted-file-open")).toHaveAttribute("href", /\/api\/media\?path=/);
+
+    // Audio / video previews must NOT be rendered for an image conversion
+    await expect(page.getByTestId("converted-file-preview-audio")).toHaveCount(0);
+    await expect(page.getByTestId("converted-file-preview-video")).toHaveCount(0);
+
+    // Dismissing the chip clears the entire block (including the preview)
+    await page.getByTestId("clear-converted-file-chip").click();
+    await expect(chip).not.toBeVisible();
+    await expect(page.getByTestId("converted-file-preview-image")).toHaveCount(0);
+  });
 });