From 345386ae500273d0c6a3281db4491deecd13f56b Mon Sep 17 00:00:00 2001
From: Bolor <bjagdagdorj@microsoft.com>
Date: Fri, 13 Mar 2026 08:03:05 -0700
Subject: [PATCH 01/13] Add converter catalog panel scaffolding

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../components/Chat/ChatInputArea.styles.ts   |  47 +++++++
 .../components/Chat/ChatInputArea.test.tsx    |  21 ++-
 .../src/components/Chat/ChatInputArea.tsx     |  15 ++-
 .../src/components/Chat/ChatWindow.test.tsx   | 107 ++++++++++++++-
 frontend/src/components/Chat/ChatWindow.tsx   |   7 +
 .../components/Chat/ConverterPanel.styles.ts  |  85 ++++++++++++
 .../src/components/Chat/ConverterPanel.tsx    | 122 ++++++++++++++++++
 frontend/src/services/api.ts                  |  21 +++
 frontend/src/types/index.ts                   |  26 ++++
 pyrit/backend/models/converters.py            |  25 ++++
 pyrit/backend/routes/converters.py            |  16 +++
 pyrit/backend/services/converter_service.py   |  27 ++++
 tests/unit/backend/test_api_routes.py         |  24 ++++
 tests/unit/backend/test_converter_service.py  |  26 ++++
 14 files changed, 565 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/Chat/ConverterPanel.styles.ts
 create mode 100644 frontend/src/components/Chat/ConverterPanel.tsx

diff --git a/frontend/src/components/Chat/ChatInputArea.styles.ts b/frontend/src/components/Chat/ChatInputArea.styles.ts
index 75b67ff532..73a42efb9f 100644
--- a/frontend/src/components/Chat/ChatInputArea.styles.ts
+++ b/frontend/src/components/Chat/ChatInputArea.styles.ts
@@ -79,6 +79,7 @@ export const useChatInputAreaStyles = makeStyles({
     display: 'flex',
     gap: tokens.spacingHorizontalXS,
     marginRight: tokens.spacingHorizontalS,
+    alignItems: 'center',
   },
   iconButtonsRight: {
     display: 'flex',
@@ -131,4 +132,50 @@ export const useChatInputAreaStyles = makeStyles({
     color: tokens.colorPaletteRedForeground1,
     fontWeight: tokens.fontWeightSemibold as unknown as string,
   },
+  conversionBarBottom: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalXS,
+    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalL}`,
+    paddingLeft: `calc(${tokens.spacingHorizontalL} + 32px + ${tokens.spacingHorizontalXS} + 32px + ${tokens.spacingHorizontalS})`,
+    borderTop: `1px solid ${tokens.colorNeutralStroke1}`,
+    backgroundColor: tokens.colorNeutralBackground4,
+    overflow: 'hidden',
+  },
+  conversionLabel: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalXXS,
+    flex: 1,
+    minWidth: 0,
+    overflow: 'hidden',
+  },
+  conversionText: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    minWidth: 0,
+    flex: 1,
+  },
+  originalBadge: {
+    display: 'inline-block',
+    padding: `0 ${tokens.spacingHorizontalXS}`,
+    marginRight: tokens.spacingHorizontalXS,
+    borderRadius: tokens.borderRadiusSmall,
+    backgroundColor: tokens.colorPaletteBlueBackground2,
+    color: tokens.colorPaletteBlueForeground2,
+    fontSize: tokens.fontSizeBase100,
+    fontWeight: tokens.fontWeightSemibold as unknown as string,
+    flexShrink: 0,
+  },
+  convertedBadge: {
+    display: 'inline-block',
+    padding: `0 ${tokens.spacingHorizontalXS}`,
+    borderRadius: tokens.borderRadiusSmall,
+    backgroundColor: tokens.colorPaletteGreenBackground2,
+    color: tokens.colorPaletteGreenForeground2,
+    fontSize: tokens.fontSizeBase100,
+    fontWeight: tokens.fontWeightSemibold as unknown as string,
+    flexShrink: 0,
+  },
 })
diff --git a/frontend/src/components/Chat/ChatInputArea.test.tsx b/frontend/src/components/Chat/ChatInputArea.test.tsx
index c2712acddf..777be2dd08 100644
--- a/frontend/src/components/Chat/ChatInputArea.test.tsx
+++ b/frontend/src/components/Chat/ChatInputArea.test.tsx
@@ -26,12 +26,31 @@ describe("ChatInputArea", () => {
   it("should render input area and send button", () => {
     render(
       <TestWrapper>
-        <ChatInputArea {...defaultProps} />
+        <ChatInputArea {...defaultProps} onToggleConverterPanel={jest.fn()} />
       </TestWrapper>
     );
 
     expect(screen.getByRole("textbox")).toBeInTheDocument();
     expect(getSendButton()).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /convert/i })).toBeInTheDocument();
+  });
+
+  it("should call converter panel toggle handler when convert button is clicked", async () => {
+    const user = userEvent.setup();
+    const onToggleConverterPanel = jest.fn();
+
+    render(
+      <TestWrapper>
+        <ChatInputArea
+          {...defaultProps}
+          onToggleConverterPanel={onToggleConverterPanel}
+        />
+      </TestWrapper>
+    );
+
+    await user.click(screen.getByRole("button", { name: /convert/i }));
+
+    expect(onToggleConverterPanel).toHaveBeenCalledTimes(1);
   });
 
   it("should call onSend with input value when send button clicked", async () => {
diff --git a/frontend/src/components/Chat/ChatInputArea.tsx b/frontend/src/components/Chat/ChatInputArea.tsx
index 12ef7b3d23..3b9322d197 100644
--- a/frontend/src/components/Chat/ChatInputArea.tsx
+++ b/frontend/src/components/Chat/ChatInputArea.tsx
@@ -1,10 +1,10 @@
 import { useState, useEffect, useLayoutEffect, useRef, forwardRef, useImperativeHandle, KeyboardEvent } from 'react'
 import {
   Button,
-  tokens,
   Caption1,
   Tooltip,
   Text,
+  tokens,
 } from '@fluentui/react-components'
 import { SendRegular, AttachRegular, DismissRegular, InfoRegular, AddRegular, CopyRegular, WarningRegular, SettingsRegular } from '@fluentui/react-icons'
 import { MessageAttachment, TargetInstance } from '../../types'
@@ -68,9 +68,11 @@ interface ChatInputAreaProps {
   attackOperator?: string
   noTargetSelected?: boolean
   onConfigureTarget?: () => void
+  onToggleConverterPanel?: () => void
+  isConverterPanelOpen?: boolean
 }
 
-const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(function ChatInputArea({ onSend, disabled = false, activeTarget, singleTurnLimitReached = false, onNewConversation, operatorLocked = false, crossTargetLocked = false, onUseAsTemplate, attackOperator, noTargetSelected = false, onConfigureTarget }, 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 }, ref) {
   const styles = useChatInputAreaStyles()
   const [input, setInput] = useState('')
   const [attachments, setAttachments] = useState<MessageAttachment[]>([])
@@ -261,6 +263,15 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
               disabled={disabled}
               title="Attach files"
             />
+            <Button
+              className={styles.convertButton}
+              appearance={isConverterPanelOpen ? 'primary' : 'subtle'}
+              onClick={onToggleConverterPanel}
+              disabled={disabled || !onToggleConverterPanel}
+              data-testid="toggle-converter-panel-btn"
+            >
+              Convert
+            </Button>
             </div>
           <textarea
             ref={textareaRef}
diff --git a/frontend/src/components/Chat/ChatWindow.test.tsx b/frontend/src/components/Chat/ChatWindow.test.tsx
index ec446d81f0..14eebe731e 100644
--- a/frontend/src/components/Chat/ChatWindow.test.tsx
+++ b/frontend/src/components/Chat/ChatWindow.test.tsx
@@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event";
 import { FluentProvider, webLightTheme } from "@fluentui/react-components";
 import ChatWindow from "./ChatWindow";
 import { Message, TargetInfo, TargetInstance } from "../../types";
-import { attacksApi } from "../../services/api";
+import { attacksApi, convertersApi } from "../../services/api";
 import * as messageMapper from "../../utils/messageMapper";
 
 jest.mock("../../services/api", () => ({
@@ -16,6 +16,11 @@ jest.mock("../../services/api", () => ({
     createConversation: jest.fn(),
     changeMainConversation: jest.fn(),
   },
+  convertersApi: {
+    listConverterCatalog: jest.fn(),
+    listConverters: jest.fn(),
+    getConverter: jest.fn(),
+  },
   labelsApi: {
     getLabels: jest.fn().mockImplementation(() => new Promise(() => {})),
   },
@@ -27,6 +32,7 @@ jest.mock("../../utils/messageMapper", () => ({
 }));
 
 const mockedAttacksApi = attacksApi as jest.Mocked<typeof attacksApi>;
+const mockedConvertersApi = convertersApi as jest.Mocked<typeof convertersApi>;
 const mockedMapper = messageMapper as jest.Mocked<typeof messageMapper>;
 
 const TestWrapper: React.FC<{ children: React.ReactNode }> = ({
@@ -241,6 +247,12 @@ describe("ChatWindow Integration", () => {
       conversations: [],
       main_conversation_id: null,
     });
+    mockedConvertersApi.listConverters.mockResolvedValue({
+      items: [],
+    });
+    mockedConvertersApi.listConverterCatalog.mockResolvedValue({
+      items: [],
+    });
   });
 
   // -----------------------------------------------------------------------
@@ -2096,6 +2108,99 @@ describe("ChatWindow Integration", () => {
     });
   });
 
+  it("should toggle converter panel when convert button is clicked", async () => {
+    render(
+      <TestWrapper>
+        <ChatWindow
+          {...defaultProps}
+          attackResultId="ar-converter-panel"
+          conversationId="conv-converter-panel"
+          activeConversationId="conv-converter-panel"
+          relatedConversationCount={0}
+        />
+      </TestWrapper>
+    );
+
+    expect(screen.queryByTestId("converter-panel")).not.toBeInTheDocument();
+
+    const toggleBtn = screen.getByTestId("toggle-converter-panel-btn");
+    await userEvent.click(toggleBtn);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-panel")).toBeInTheDocument();
+    });
+
+    await userEvent.click(toggleBtn);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId("converter-panel")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should load and display converters in the converter panel", async () => {
+    mockedConvertersApi.listConverterCatalog.mockResolvedValue({
+      items: [
+        {
+          converter_type: "Base64Converter",
+          supported_input_types: ["text"],
+          supported_output_types: ["text"],
+        },
+      ],
+    });
+
+    render(
+      <TestWrapper>
+        <ChatWindow
+          {...defaultProps}
+          attackResultId="ar-converter-list"
+          conversationId="conv-converter-list"
+          activeConversationId="conv-converter-list"
+          relatedConversationCount={0}
+        />
+      </TestWrapper>
+    );
+
+    await userEvent.click(screen.getByTestId("toggle-converter-panel-btn"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-panel-list")).toBeInTheDocument();
+      expect(screen.getByText("Base64Converter")).toBeInTheDocument();
+      expect(screen.getByText("In: text")).toBeInTheDocument();
+      expect(screen.getByText("Out: text")).toBeInTheDocument();
+    });
+  });
+
+  it("should allow converter and conversation panels to be open at the same time", async () => {
+    mockedAttacksApi.getMessages.mockResolvedValue({ messages: [] });
+    mockedAttacksApi.getConversations.mockResolvedValue({
+      main_conversation_id: "conv-both-panels",
+      conversations: [
+        { conversation_id: "conv-both-panels", is_main: true, message_count: 1, created_at: "2026-01-01T00:00:00Z" },
+      ],
+    });
+    mockedMapper.backendMessagesToFrontend.mockReturnValue([]);
+
+    render(
+      <TestWrapper>
+        <ChatWindow
+          {...defaultProps}
+          attackResultId="ar-both-panels"
+          conversationId="conv-both-panels"
+          activeConversationId="conv-both-panels"
+          relatedConversationCount={0}
+        />
+      </TestWrapper>
+    );
+
+    await userEvent.click(screen.getByTestId("toggle-converter-panel-btn"));
+    await userEvent.click(screen.getByTestId("toggle-panel-btn"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-panel")).toBeInTheDocument();
+      expect(screen.getByTestId("conversation-panel")).toBeInTheDocument();
+    });
+  });
+
   // -----------------------------------------------------------------------
   // Copy to input with attachments
   // -----------------------------------------------------------------------
diff --git a/frontend/src/components/Chat/ChatWindow.tsx b/frontend/src/components/Chat/ChatWindow.tsx
index e7e57cbd67..7fd8b75c8a 100644
--- a/frontend/src/components/Chat/ChatWindow.tsx
+++ b/frontend/src/components/Chat/ChatWindow.tsx
@@ -9,6 +9,7 @@ import { AddRegular, PanelRightRegular } from '@fluentui/react-icons'
 import MessageList from './MessageList'
 import ChatInputArea from './ChatInputArea'
 import ConversationPanel from './ConversationPanel'
+import ConverterPanel from './ConverterPanel'
 import LabelsBar from '../Labels/LabelsBar'
 import type { ChatInputAreaHandle } from './ChatInputArea'
 import { attacksApi } from '../../services/api'
@@ -65,6 +66,7 @@ export default function ChatWindow({
   const [loadedConversationId, setLoadedConversationId] = useState<string | null>(null)
   const isSending = activeConversationId ? sendingConversations.has(activeConversationId) : Boolean(sendingConversations.size)
   const [isPanelOpen, setIsPanelOpen] = useState(false)
+  const [isConverterPanelOpen, setIsConverterPanelOpen] = useState(false)
   const [panelRefreshKey, setPanelRefreshKey] = useState(0)
   const inputBoxRef = useRef<ChatInputAreaHandle>(null)
 
@@ -449,6 +451,9 @@ export default function ChatWindow({
 
   return (
     <div className={styles.root}>
+      {isConverterPanelOpen && (
+        <ConverterPanel onClose={() => setIsConverterPanelOpen(false)} />
+      )}
       <div className={styles.chatArea}>
         <div className={styles.ribbon}>
           <div className={styles.conversationInfo}>
@@ -518,6 +523,8 @@ export default function ChatWindow({
           attackOperator={isOperatorLocked ? attackOperator ?? undefined : undefined}
           noTargetSelected={!activeTarget}
           onConfigureTarget={!activeTarget ? () => onNavigate?.('config') : undefined}
+          onToggleConverterPanel={() => setIsConverterPanelOpen(prev => !prev)}
+          isConverterPanelOpen={isConverterPanelOpen}
         />
       </div>
       {isPanelOpen && (
diff --git a/frontend/src/components/Chat/ConverterPanel.styles.ts b/frontend/src/components/Chat/ConverterPanel.styles.ts
new file mode 100644
index 0000000000..13882cfd27
--- /dev/null
+++ b/frontend/src/components/Chat/ConverterPanel.styles.ts
@@ -0,0 +1,85 @@
+import { makeStyles, tokens } from '@fluentui/react-components'
+
+export const useConverterPanelStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '320px',
+    minWidth: '320px',
+    borderRight: `1px solid ${tokens.colorNeutralStroke1}`,
+    backgroundColor: tokens.colorNeutralBackground3,
+    overflow: 'hidden',
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
+    borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+    minHeight: '48px',
+    gap: tokens.spacingHorizontalS,
+  },
+  headerTitle: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalXXS,
+    minWidth: 0,
+  },
+  body: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalM,
+    padding: tokens.spacingHorizontalL,
+    overflowY: 'auto',
+    flex: 1,
+  },
+  hintText: {
+    color: tokens.colorNeutralForeground3,
+  },
+  loading: {
+    display: 'flex',
+    justifyContent: 'center',
+    paddingTop: tokens.spacingVerticalL,
+  },
+  converterList: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalS,
+  },
+  converterCard: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalXXS,
+    padding: tokens.spacingHorizontalM,
+    borderRadius: tokens.borderRadiusMedium,
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    backgroundColor: tokens.colorNeutralBackground1,
+  },
+  converterTitleRow: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: tokens.spacingHorizontalS,
+  },
+  converterName: {
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  metaRow: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: tokens.spacingHorizontalXS,
+    rowGap: tokens.spacingVerticalXXS,
+  },
+  badgeText: {
+    color: tokens.colorNeutralForeground2,
+  },
+  emptyState: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalS,
+  },
+})
diff --git a/frontend/src/components/Chat/ConverterPanel.tsx b/frontend/src/components/Chat/ConverterPanel.tsx
new file mode 100644
index 0000000000..fc467bb21e
--- /dev/null
+++ b/frontend/src/components/Chat/ConverterPanel.tsx
@@ -0,0 +1,122 @@
+import { useEffect, useState } from 'react'
+import { Badge, Button, MessageBar, MessageBarBody, Spinner, Text } from '@fluentui/react-components'
+import { DismissRegular } from '@fluentui/react-icons'
+import { convertersApi } from '../../services/api'
+import { toApiError } from '../../services/errors'
+import type { ConverterCatalogEntry } from '../../types'
+import { useConverterPanelStyles } from './ConverterPanel.styles'
+
+interface ConverterPanelProps {
+  onClose: () => void
+}
+
+export default function ConverterPanel({ onClose }: ConverterPanelProps) {
+  const styles = useConverterPanelStyles()
+  const [converters, setConverters] = useState<ConverterCatalogEntry[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let isMounted = true
+
+    const loadConverters = async () => {
+      setIsLoading(true)
+      setError(null)
+
+      try {
+        const response = await convertersApi.listConverterCatalog()
+        if (!isMounted) {
+          return
+        }
+        setConverters(response.items)
+      } catch (err) {
+        if (!isMounted) {
+          return
+        }
+        setConverters([])
+        setError(toApiError(err).detail)
+      } finally {
+        if (isMounted) {
+          setIsLoading(false)
+        }
+      }
+    }
+
+    void loadConverters()
+
+    return () => {
+      isMounted = false
+    }
+  }, [])
+
+  return (
+    <aside className={styles.root} data-testid="converter-panel">
+      <div className={styles.header}>
+        <div className={styles.headerTitle}>
+          <Text weight="semibold" size={300}>Converters</Text>
+          <Text size={200} className={styles.hintText}>
+            Select and preview prompt converters here in the next step.
+          </Text>
+        </div>
+        <Button
+          appearance="subtle"
+          size="small"
+          icon={<DismissRegular />}
+          onClick={onClose}
+          data-testid="close-converter-panel-btn"
+        />
+      </div>
+      <div className={styles.body}>
+        {isLoading && (
+          <div className={styles.loading} data-testid="converter-panel-loading">
+            <Spinner size="tiny" />
+          </div>
+        )}
+
+        {!isLoading && error && (
+          <MessageBar intent="error" data-testid="converter-panel-error">
+            <MessageBarBody>{error}</MessageBarBody>
+          </MessageBar>
+        )}
+
+        {!isLoading && !error && converters.length === 0 && (
+          <div className={styles.emptyState} data-testid="converter-panel-empty">
+            <Text size={300}>No converters are currently registered.</Text>
+            <Text size={200} className={styles.hintText}>
+              Once the backend registry has converter instances, they will appear here.
+            </Text>
+          </div>
+        )}
+
+        {!isLoading && !error && converters.length > 0 && (
+          <div className={styles.converterList} data-testid="converter-panel-list">
+            {converters.map((converter) => (
+              <div
+                key={converter.converter_type}
+                className={styles.converterCard}
+                data-testid={`converter-item-${converter.converter_type}`}
+              >
+                <div className={styles.converterTitleRow}>
+                  <Text weight="semibold" size={300} className={styles.converterName}>
+                    {converter.converter_type}
+                  </Text>
+                  <Badge appearance="outline">Available</Badge>
+                </div>
+                <div className={styles.metaRow}>
+                  <Text size={200} className={styles.badgeText}>
+                    In: {converter.supported_input_types.join(', ') || 'n/a'}
+                  </Text>
+                </div>
+                <div className={styles.metaRow}>
+                  <Text size={200} className={styles.badgeText}>
+                    Out: {converter.supported_output_types.join(', ') || 'n/a'}
+                  </Text>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </aside>
+  )
+}
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 55b079313d..5267239bc8 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -3,6 +3,10 @@ import { toApiError } from './errors'
 import type {
   TargetInstance,
   TargetListResponse,
+  ConverterCatalogEntry,
+  ConverterCatalogResponse,
+  ConverterInstance,
+  ConverterListResponse,
   CreateTargetRequest,
   CreateAttackRequest,
   CreateAttackResponse,
@@ -105,6 +109,23 @@ export const targetsApi = {
   },
 }
 
+export const convertersApi = {
+  listConverterCatalog: async (): Promise<ConverterCatalogResponse> => {
+    const response = await apiClient.get('/converters/catalog')
+    return response.data
+  },
+
+  listConverters: async (): Promise<ConverterListResponse> => {
+    const response = await apiClient.get('/converters')
+    return response.data
+  },
+
+  getConverter: async (converterId: string): Promise<ConverterInstance> => {
+    const response = await apiClient.get(`/converters/${encodeURIComponent(converterId)}`)
+    return response.data
+  },
+}
+
 export const attacksApi = {
   createAttack: async (request: CreateAttackRequest): Promise<CreateAttackResponse> => {
     const response = await apiClient.post('/attacks', request)
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index a98817874e..b3731339ee 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -75,6 +75,32 @@ export interface CreateTargetRequest {
   params: Record<string, unknown>
 }
 
+// --- Converters ---
+
+export interface ConverterInstance {
+  converter_id: string
+  converter_type: string
+  display_name?: string | null
+  supported_input_types: string[]
+  supported_output_types: string[]
+  converter_specific_params?: Record<string, unknown> | null
+  sub_converter_ids?: string[] | null
+}
+
+export interface ConverterListResponse {
+  items: ConverterInstance[]
+}
+
+export interface ConverterCatalogEntry {
+  converter_type: string
+  supported_input_types: string[]
+  supported_output_types: string[]
+}
+
+export interface ConverterCatalogResponse {
+  items: ConverterCatalogEntry[]
+}
+
 // --- Attacks ---
 
 export interface TargetInfo {
diff --git a/pyrit/backend/models/converters.py b/pyrit/backend/models/converters.py
index 1c4e615f87..d3a1270553 100644
--- a/pyrit/backend/models/converters.py
+++ b/pyrit/backend/models/converters.py
@@ -14,6 +14,8 @@
 from pyrit.models import PromptDataType
 
 __all__ = [
+    "ConverterCatalogEntry",
+    "ConverterCatalogResponse",
     "ConverterInstance",
     "ConverterInstanceListResponse",
     "CreateConverterRequest",
@@ -24,6 +26,29 @@
 ]
 
 
+# ============================================================================
+# Converter Catalog (Available Types)
+# ============================================================================
+
+
+class ConverterCatalogEntry(BaseModel):
+    """A converter type available from the backend registry."""
+
+    converter_type: str = Field(..., description="Converter class name (e.g., 'Base64Converter')")
+    supported_input_types: list[str] = Field(
+        default_factory=list, description="Input data types supported by this converter type"
+    )
+    supported_output_types: list[str] = Field(
+        default_factory=list, description="Output data types produced by this converter type"
+    )
+
+
+class ConverterCatalogResponse(BaseModel):
+    """Response for listing available converter types from the registry."""
+
+    items: list[ConverterCatalogEntry] = Field(..., description="List of available converter types")
+
+
 # ============================================================================
 # Converter Instances (Runtime Objects)
 # ============================================================================
diff --git a/pyrit/backend/routes/converters.py b/pyrit/backend/routes/converters.py
index 095b6ef440..8b4c610bd4 100644
--- a/pyrit/backend/routes/converters.py
+++ b/pyrit/backend/routes/converters.py
@@ -12,6 +12,7 @@
 
 from pyrit.backend.models.common import ProblemDetail
 from pyrit.backend.models.converters import (
+    ConverterCatalogResponse,
     ConverterInstance,
     ConverterInstanceListResponse,
     ConverterPreviewRequest,
@@ -41,6 +42,21 @@ async def list_converters() -> ConverterInstanceListResponse:
     return await service.list_converters_async()
 
 
+@router.get(
+    "/catalog",
+    response_model=ConverterCatalogResponse,
+)
+async def list_converter_catalog() -> ConverterCatalogResponse:
+    """
+    List all available converter types from the backend converter registry.
+
+    Returns:
+        ConverterCatalogResponse: List of available converter types.
+    """
+    service = get_converter_service()
+    return await service.list_converter_catalog_async()
+
+
 @router.post(
     "",
     response_model=CreateConverterResponse,
diff --git a/pyrit/backend/services/converter_service.py b/pyrit/backend/services/converter_service.py
index a0579239cc..61a2986feb 100644
--- a/pyrit/backend/services/converter_service.py
+++ b/pyrit/backend/services/converter_service.py
@@ -19,6 +19,8 @@
 from pyrit import prompt_converter
 from pyrit.backend.mappers.converter_mappers import converter_object_to_instance
 from pyrit.backend.models.converters import (
+    ConverterCatalogEntry,
+    ConverterCatalogResponse,
     ConverterInstance,
     ConverterInstanceListResponse,
     ConverterPreviewRequest,
@@ -93,6 +95,31 @@ async def list_converters_async(self) -> ConverterInstanceListResponse:
         ]
         return ConverterInstanceListResponse(items=items)
 
+    async def list_converter_catalog_async(self) -> ConverterCatalogResponse:
+        """
+        List all available converter types from the backend converter registry.
+
+        Returns:
+            ConverterCatalogResponse containing all available converter classes.
+        """
+        items: list[ConverterCatalogEntry] = []
+        for converter_type, converter_class in sorted(_CONVERTER_CLASS_REGISTRY.items()):
+            if converter_type in ("PromptConverter", "ConverterResult") or "Strategy" in converter_type:
+                continue
+
+            supported_input_types = [str(data_type) for data_type in getattr(converter_class, "SUPPORTED_INPUT_TYPES", ())]
+            supported_output_types = [str(data_type) for data_type in getattr(converter_class, "SUPPORTED_OUTPUT_TYPES", ())]
+
+            items.append(
+                ConverterCatalogEntry(
+                    converter_type=converter_type,
+                    supported_input_types=supported_input_types,
+                    supported_output_types=supported_output_types,
+                )
+            )
+
+        return ConverterCatalogResponse(items=items)
+
     async def get_converter_async(self, *, converter_id: str) -> Optional[ConverterInstance]:
         """
         Get a converter instance by ID.
diff --git a/tests/unit/backend/test_api_routes.py b/tests/unit/backend/test_api_routes.py
index 0618ed1507..cbfc74f3b0 100644
--- a/tests/unit/backend/test_api_routes.py
+++ b/tests/unit/backend/test_api_routes.py
@@ -27,6 +27,7 @@
 )
 from pyrit.backend.models.common import PaginationInfo
 from pyrit.backend.models.converters import (
+    ConverterCatalogResponse,
     ConverterInstance,
     ConverterInstanceListResponse,
     ConverterPreviewResponse,
@@ -865,6 +866,29 @@ def test_list_converters(self, client: TestClient) -> None:
             data = response.json()
             assert data["items"] == []
 
+    def test_list_converter_catalog(self, client: TestClient) -> None:
+        """Test listing available converter types from the converter catalog."""
+        with patch("pyrit.backend.routes.converters.get_converter_service") as mock_get_service:
+            mock_service = MagicMock()
+            mock_service.list_converter_catalog_async = AsyncMock(
+                return_value=ConverterCatalogResponse(
+                    items=[
+                        {
+                            "converter_type": "Base64Converter",
+                            "supported_input_types": ["text"],
+                            "supported_output_types": ["text"],
+                        }
+                    ]
+                )
+            )
+            mock_get_service.return_value = mock_service
+
+            response = client.get("/api/converters/catalog")
+
+            assert response.status_code == status.HTTP_200_OK
+            data = response.json()
+            assert data["items"][0]["converter_type"] == "Base64Converter"
+
     def test_create_converter_success(self, client: TestClient) -> None:
         """Test successful converter instance creation."""
         with patch("pyrit.backend.routes.converters.get_converter_service") as mock_get_service:
diff --git a/tests/unit/backend/test_converter_service.py b/tests/unit/backend/test_converter_service.py
index 0deb273b2b..04e41e32cc 100644
--- a/tests/unit/backend/test_converter_service.py
+++ b/tests/unit/backend/test_converter_service.py
@@ -76,6 +76,32 @@ async def test_list_converters_returns_converters_from_registry(self) -> None:
         assert result.items[0].converter_specific_params == {"param1": "value1", "param2": 42}
 
 
+class TestListConverterCatalog:
+    """Tests for ConverterService.list_converter_catalog_async method."""
+
+    @pytest.mark.asyncio
+    async def test_list_converter_catalog_returns_known_converter_types(self) -> None:
+        """Test that the converter catalog exposes available converter classes."""
+        service = ConverterService()
+
+        result = await service.list_converter_catalog_async()
+
+        converter_types = [item.converter_type for item in result.items]
+        assert "Base64Converter" in converter_types
+        assert "CaesarConverter" in converter_types
+
+    @pytest.mark.asyncio
+    async def test_list_converter_catalog_includes_supported_types(self) -> None:
+        """Test that catalog entries include supported input and output types."""
+        service = ConverterService()
+
+        result = await service.list_converter_catalog_async()
+
+        base64_entry = next(item for item in result.items if item.converter_type == "Base64Converter")
+        assert "text" in base64_entry.supported_input_types
+        assert "text" in base64_entry.supported_output_types
+
+
 class TestGetConverter:
     """Tests for ConverterService.get_converter method."""
 

From c24666b5033497cc7d76cd77d826ef13c1db3f44 Mon Sep 17 00:00:00 2001
From: Bolor <bjagdagdorj@microsoft.com>
Date: Fri, 13 Mar 2026 08:04:27 -0700
Subject: [PATCH 02/13] Update frontend lockfile

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/package-lock.json | 29 ++++++++---------------------
 1 file changed, 8 insertions(+), 21 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 008487a7ff..25c4674888 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -79,7 +79,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1312,7 +1311,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
       "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@floating-ui/core": "^1.7.3",
         "@floating-ui/utils": "^0.2.10"
@@ -4027,7 +4025,8 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -4189,7 +4188,6 @@
       "integrity": "sha512-zWW5KPngR/yvakJgGOmZ5vTBemDoSqF3AcV/LrO5u5wTWyEAVVh+IT39G4gtyAkh3CtTZs8aX/yRM82OfzHJRg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -4205,7 +4203,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.26.tgz",
       "integrity": "sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -4216,7 +4213,6 @@
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -4288,7 +4284,6 @@
       "integrity": "sha512-tK3GPFWbirvNgsNKto+UmB/cRtn6TZfyw0D6IKrW55n6Vbs7KJoZtI//kpTKzE/DUmmnAFD8/Ca46s7Obs92/w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.4",
         "@typescript-eslint/types": "8.46.4",
@@ -4523,7 +4518,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4878,7 +4872,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -5316,7 +5309,8 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/domexception": {
       "version": "4.0.0",
@@ -5357,8 +5351,7 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/embla-carousel-autoplay": {
       "version": "8.6.0",
@@ -5559,7 +5552,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -6664,7 +6656,6 @@
       "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/core": "^29.7.0",
         "@jest/types": "^29.6.3",
@@ -7819,6 +7810,7 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -8406,6 +8398,7 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -8421,6 +8414,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -8521,7 +8515,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -8534,7 +8527,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -9143,7 +9135,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9285,7 +9276,6 @@
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -9372,7 +9362,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9501,7 +9490,6 @@
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -9595,7 +9583,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },

From ccdba45cea42a021cf41d60e0ee9620674a99913 Mon Sep 17 00:00:00 2001
From: Bolor <bjagdagdorj@microsoft.com>
Date: Fri, 13 Mar 2026 16:45:33 -0700
Subject: [PATCH 03/13] change converter panel design

---
 .../src/components/Chat/ChatWindow.test.tsx   | 53 ++++++++++++-
 .../components/Chat/ConverterPanel.styles.ts  | 25 +++++--
 .../src/components/Chat/ConverterPanel.tsx    | 75 +++++++++++++++----
 3 files changed, 129 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/Chat/ChatWindow.test.tsx b/frontend/src/components/Chat/ChatWindow.test.tsx
index 14eebe731e..28fccae666 100644
--- a/frontend/src/components/Chat/ChatWindow.test.tsx
+++ b/frontend/src/components/Chat/ChatWindow.test.tsx
@@ -2164,12 +2164,63 @@ describe("ChatWindow Integration", () => {
 
     await waitFor(() => {
       expect(screen.getByTestId("converter-panel-list")).toBeInTheDocument();
-      expect(screen.getByText("Base64Converter")).toBeInTheDocument();
+      expect(screen.getByTestId("converter-panel-select")).toBeInTheDocument();
+      expect(screen.getByTestId("converter-item-Base64Converter")).toBeInTheDocument();
       expect(screen.getByText("In: text")).toBeInTheDocument();
       expect(screen.getByText("Out: text")).toBeInTheDocument();
+      expect(screen.getByTestId("converter-output")).toBeInTheDocument();
+      expect(screen.getByText("Converted output will appear here.")).toBeInTheDocument();
     });
   });
 
+  it("should switch converter details when a different dropdown option is selected", async () => {
+    mockedConvertersApi.listConverterCatalog.mockResolvedValue({
+      items: [
+        {
+          converter_type: "Base64Converter",
+          supported_input_types: ["text"],
+          supported_output_types: ["text"],
+        },
+        {
+          converter_type: "CharSwapConverter",
+          supported_input_types: ["text"],
+          supported_output_types: ["text"],
+        },
+      ],
+    });
+
+    render(
+      <TestWrapper>
+        <ChatWindow
+          {...defaultProps}
+          attackResultId="ar-converter-select"
+          conversationId="conv-converter-select"
+          activeConversationId="conv-converter-select"
+          relatedConversationCount={0}
+        />
+      </TestWrapper>
+    );
+
+    await userEvent.click(screen.getByTestId("toggle-converter-panel-btn"));
+
+    // Wait for initial render with first converter selected
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-item-Base64Converter")).toBeInTheDocument();
+    });
+
+    // Click combobox to open the dropdown listbox
+    const input = screen.getByRole("combobox");
+    await userEvent.click(input);
+
+    // Find and click the second converter option
+    const option = await screen.findByRole("option", { name: "CharSwapConverter" });
+    await userEvent.click(option);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-item-CharSwapConverter")).toBeInTheDocument();
+    });
+  }, 15000);
+
   it("should allow converter and conversation panels to be open at the same time", async () => {
     mockedAttacksApi.getMessages.mockResolvedValue({ messages: [] });
     mockedAttacksApi.getConversations.mockResolvedValue({
diff --git a/frontend/src/components/Chat/ConverterPanel.styles.ts b/frontend/src/components/Chat/ConverterPanel.styles.ts
index 13882cfd27..bf3adf6176 100644
--- a/frontend/src/components/Chat/ConverterPanel.styles.ts
+++ b/frontend/src/components/Chat/ConverterPanel.styles.ts
@@ -51,17 +51,11 @@ export const useConverterPanelStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     gap: tokens.spacingVerticalXXS,
-    padding: tokens.spacingHorizontalM,
+    padding: tokens.spacingVerticalS,
     borderRadius: tokens.borderRadiusMedium,
     border: `1px solid ${tokens.colorNeutralStroke1}`,
     backgroundColor: tokens.colorNeutralBackground1,
   },
-  converterTitleRow: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: tokens.spacingHorizontalS,
-  },
   converterName: {
     minWidth: 0,
     overflow: 'hidden',
@@ -82,4 +76,21 @@ export const useConverterPanelStyles = makeStyles({
     flexDirection: 'column',
     gap: tokens.spacingVerticalS,
   },
+  outputSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalXS,
+    marginTop: tokens.spacingVerticalS,
+  },
+  outputBox: {
+    padding: tokens.spacingVerticalS,
+    borderRadius: tokens.borderRadiusMedium,
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    backgroundColor: tokens.colorNeutralBackground1,
+    minHeight: '80px',
+    whiteSpace: 'pre-wrap' as const,
+    wordBreak: 'break-word' as const,
+    overflowY: 'auto' as const,
+    maxHeight: '200px',
+  },
 })
diff --git a/frontend/src/components/Chat/ConverterPanel.tsx b/frontend/src/components/Chat/ConverterPanel.tsx
index fc467bb21e..a154c451a0 100644
--- a/frontend/src/components/Chat/ConverterPanel.tsx
+++ b/frontend/src/components/Chat/ConverterPanel.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react'
-import { Badge, Button, MessageBar, MessageBarBody, Spinner, Text } from '@fluentui/react-components'
+import { useEffect, useMemo, useState } from 'react'
+import { Button, Combobox, Field, MessageBar, MessageBarBody, Option, Spinner, Text } from '@fluentui/react-components'
 import { DismissRegular } from '@fluentui/react-icons'
 import { convertersApi } from '../../services/api'
 import { toApiError } from '../../services/errors'
@@ -13,6 +13,8 @@ interface ConverterPanelProps {
 export default function ConverterPanel({ onClose }: ConverterPanelProps) {
   const styles = useConverterPanelStyles()
   const [converters, setConverters] = useState<ConverterCatalogEntry[]>([])
+  const [selectedConverterType, setSelectedConverterType] = useState('')
+  const [query, setQuery] = useState('')
   const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
@@ -29,11 +31,16 @@ export default function ConverterPanel({ onClose }: ConverterPanelProps) {
           return
         }
         setConverters(response.items)
+        const first = response.items[0]?.converter_type || ''
+        setSelectedConverterType((current) => current || first)
+        setQuery((current) => current || first)
       } catch (err) {
         if (!isMounted) {
           return
         }
         setConverters([])
+        setSelectedConverterType('')
+        setQuery('')
         setError(toApiError(err).detail)
       } finally {
         if (isMounted) {
@@ -49,6 +56,18 @@ export default function ConverterPanel({ onClose }: ConverterPanelProps) {
     }
   }, [])
 
+  const filteredConverters = useMemo(() => {
+    // Show all options when query matches the selected converter (no active filter)
+    if (query === selectedConverterType) {
+      return converters
+    }
+    return converters.filter((c) => c.converter_type.toLowerCase().includes(query.toLowerCase()))
+  }, [converters, query, selectedConverterType])
+
+  const selectedConverter = converters.find(
+    (converter) => converter.converter_type === selectedConverterType
+  ) ?? converters[0]
+
   return (
     <aside className={styles.root} data-testid="converter-panel">
       <div className={styles.header}>
@@ -81,39 +100,63 @@ export default function ConverterPanel({ onClose }: ConverterPanelProps) {
 
         {!isLoading && !error && converters.length === 0 && (
           <div className={styles.emptyState} data-testid="converter-panel-empty">
-            <Text size={300}>No converters are currently registered.</Text>
+            <Text size={300}>No converter types are currently available.</Text>
             <Text size={200} className={styles.hintText}>
-              Once the backend registry has converter instances, they will appear here.
+              Once the backend converter catalog is available, converter types will appear here.
             </Text>
           </div>
         )}
 
         {!isLoading && !error && converters.length > 0 && (
           <div className={styles.converterList} data-testid="converter-panel-list">
-            {converters.map((converter) => (
+            <Field label="Converter">
+              <Combobox
+                value={query}
+                selectedOptions={selectedConverterType ? [selectedConverterType] : []}
+                onOptionSelect={(_, data) => {
+                  setSelectedConverterType(data.optionValue ?? '')
+                  setQuery(data.optionText ?? '')
+                }}
+                onChange={(e) => setQuery((e.target as HTMLInputElement).value)}
+                placeholder="Search converters..."
+                data-testid="converter-panel-select"
+              >
+                {filteredConverters.map((converter) => (
+                  <Option key={converter.converter_type} value={converter.converter_type}>
+                    {converter.converter_type}
+                  </Option>
+                ))}
+              </Combobox>
+            </Field>
+            {selectedConverter && (
               <div
-                key={converter.converter_type}
                 className={styles.converterCard}
-                data-testid={`converter-item-${converter.converter_type}`}
+                data-testid={`converter-item-${selectedConverter.converter_type}`}
               >
-                <div className={styles.converterTitleRow}>
-                  <Text weight="semibold" size={300} className={styles.converterName}>
-                    {converter.converter_type}
-                  </Text>
-                  <Badge appearance="outline">Available</Badge>
-                </div>
+                <Text weight="semibold" size={300} className={styles.converterName}>
+                  {selectedConverter.converter_type}
+                </Text>
                 <div className={styles.metaRow}>
                   <Text size={200} className={styles.badgeText}>
-                    In: {converter.supported_input_types.join(', ') || 'n/a'}
+                    In: {selectedConverter.supported_input_types.join(', ') || 'n/a'}
                   </Text>
                 </div>
                 <div className={styles.metaRow}>
                   <Text size={200} className={styles.badgeText}>
-                    Out: {converter.supported_output_types.join(', ') || 'n/a'}
+                    Out: {selectedConverter.supported_output_types.join(', ') || 'n/a'}
                   </Text>
                 </div>
               </div>
-            ))}
+            )}
+
+            <div className={styles.outputSection} data-testid="converter-output">
+              <Text weight="semibold" size={300}>Output</Text>
+              <div className={styles.outputBox}>
+                <Text size={200} className={styles.hintText}>
+                  Converted output will appear here.
+                </Text>
+              </div>
+            </div>
           </div>
         )}
       </div>

From 8cfb54e77fdfd260ede6e10a43d33200e4738f9f Mon Sep 17 00:00:00 2001
From: Bolor <bjagdagdorj@microsoft.com>
Date: Fri, 13 Mar 2026 17:23:28 -0700
Subject: [PATCH 04/13] combobox for list and added parameters in

---
 .../src/components/Chat/ChatWindow.test.tsx   | 46 +++++++++++
 .../components/Chat/ConverterPanel.styles.ts  |  9 +++
 .../src/components/Chat/ConverterPanel.tsx    | 53 +++++++++++-
 frontend/src/types/index.ts                   |  9 +++
 pyrit/backend/models/converters.py            | 14 ++++
 pyrit/backend/services/converter_service.py   | 80 ++++++++++++++++++-
 6 files changed, 208 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Chat/ChatWindow.test.tsx b/frontend/src/components/Chat/ChatWindow.test.tsx
index 28fccae666..1b1744e615 100644
--- a/frontend/src/components/Chat/ChatWindow.test.tsx
+++ b/frontend/src/components/Chat/ChatWindow.test.tsx
@@ -2144,6 +2144,7 @@ describe("ChatWindow Integration", () => {
           converter_type: "Base64Converter",
           supported_input_types: ["text"],
           supported_output_types: ["text"],
+          parameters: [],
         },
       ],
     });
@@ -2170,6 +2171,49 @@ describe("ChatWindow Integration", () => {
       expect(screen.getByText("Out: text")).toBeInTheDocument();
       expect(screen.getByTestId("converter-output")).toBeInTheDocument();
       expect(screen.getByText("Converted output will appear here.")).toBeInTheDocument();
+      // No params section when parameters is empty
+      expect(screen.queryByTestId("converter-params")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should show parameter form when converter has parameters", async () => {
+    mockedConvertersApi.listConverterCatalog.mockResolvedValue({
+      items: [
+        {
+          converter_type: "Base64Converter",
+          supported_input_types: ["text"],
+          supported_output_types: ["text"],
+          parameters: [
+            {
+              name: "encoding_func",
+              type_name: "Literal['b64encode', 'urlsafe_b64encode']",
+              required: false,
+              default_value: "b64encode",
+              choices: ["b64encode", "urlsafe_b64encode"],
+            },
+          ],
+        },
+      ],
+    });
+
+    render(
+      <TestWrapper>
+        <ChatWindow
+          {...defaultProps}
+          attackResultId="ar-converter-params"
+          conversationId="conv-converter-params"
+          activeConversationId="conv-converter-params"
+          relatedConversationCount={0}
+        />
+      </TestWrapper>
+    );
+
+    await userEvent.click(screen.getByTestId("toggle-converter-panel-btn"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-params")).toBeInTheDocument();
+      expect(screen.getByTestId("param-encoding_func")).toBeInTheDocument();
+      expect(screen.getByText("Parameters")).toBeInTheDocument();
     });
   });
 
@@ -2180,11 +2224,13 @@ describe("ChatWindow Integration", () => {
           converter_type: "Base64Converter",
           supported_input_types: ["text"],
           supported_output_types: ["text"],
+          parameters: [],
         },
         {
           converter_type: "CharSwapConverter",
           supported_input_types: ["text"],
           supported_output_types: ["text"],
+          parameters: [],
         },
       ],
     });
diff --git a/frontend/src/components/Chat/ConverterPanel.styles.ts b/frontend/src/components/Chat/ConverterPanel.styles.ts
index bf3adf6176..b0f894a197 100644
--- a/frontend/src/components/Chat/ConverterPanel.styles.ts
+++ b/frontend/src/components/Chat/ConverterPanel.styles.ts
@@ -82,6 +82,15 @@ export const useConverterPanelStyles = makeStyles({
     gap: tokens.spacingVerticalXS,
     marginTop: tokens.spacingVerticalS,
   },
+  paramsSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalS,
+    padding: tokens.spacingVerticalS,
+    borderRadius: tokens.borderRadiusMedium,
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    backgroundColor: tokens.colorNeutralBackground1,
+  },
   outputBox: {
     padding: tokens.spacingVerticalS,
     borderRadius: tokens.borderRadiusMedium,
diff --git a/frontend/src/components/Chat/ConverterPanel.tsx b/frontend/src/components/Chat/ConverterPanel.tsx
index a154c451a0..aeac460773 100644
--- a/frontend/src/components/Chat/ConverterPanel.tsx
+++ b/frontend/src/components/Chat/ConverterPanel.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
-import { Button, Combobox, Field, MessageBar, MessageBarBody, Option, Spinner, Text } from '@fluentui/react-components'
+import { Button, Combobox, Field, Input, MessageBar, MessageBarBody, Option, Select, Spinner, Text } from '@fluentui/react-components'
 import { DismissRegular } from '@fluentui/react-icons'
 import { convertersApi } from '../../services/api'
 import { toApiError } from '../../services/errors'
@@ -15,6 +15,7 @@ export default function ConverterPanel({ onClose }: ConverterPanelProps) {
   const [converters, setConverters] = useState<ConverterCatalogEntry[]>([])
   const [selectedConverterType, setSelectedConverterType] = useState('')
   const [query, setQuery] = useState('')
+  const [paramValues, setParamValues] = useState<Record<string, string>>({})
   const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
@@ -114,8 +115,18 @@ export default function ConverterPanel({ onClose }: ConverterPanelProps) {
                 value={query}
                 selectedOptions={selectedConverterType ? [selectedConverterType] : []}
                 onOptionSelect={(_, data) => {
-                  setSelectedConverterType(data.optionValue ?? '')
+                  const newType = data.optionValue ?? ''
+                  setSelectedConverterType(newType)
                   setQuery(data.optionText ?? '')
+                  // Reset param values to defaults for the newly selected converter
+                  const newConverter = converters.find((c) => c.converter_type === newType)
+                  const defaults: Record<string, string> = {}
+                  for (const p of newConverter?.parameters ?? []) {
+                    if (p.default_value != null) {
+                      defaults[p.name] = p.default_value
+                    }
+                  }
+                  setParamValues(defaults)
                 }}
                 onChange={(e) => setQuery((e.target as HTMLInputElement).value)}
                 placeholder="Search converters..."
@@ -149,6 +160,44 @@ export default function ConverterPanel({ onClose }: ConverterPanelProps) {
               </div>
             )}
 
+            {selectedConverter && (selectedConverter.parameters?.length ?? 0) > 0 && (
+              <div className={styles.paramsSection} data-testid="converter-params">
+                <Text weight="semibold" size={300}>Parameters</Text>
+                {(selectedConverter.parameters ?? []).map((param) => (
+                  <Field
+                    key={param.name}
+                    label={`${param.name}${param.required ? ' *' : ''}`}
+                    hint={param.type_name}
+                  >
+                    {param.choices ? (
+                      <Select
+                        value={paramValues[param.name] ?? param.default_value ?? ''}
+                        onChange={(_, data) =>
+                          setParamValues((prev) => ({ ...prev, [param.name]: data.value }))
+                        }
+                        data-testid={`param-${param.name}`}
+                      >
+                        {param.choices.map((choice) => (
+                          <option key={choice} value={choice}>
+                            {choice}
+                          </option>
+                        ))}
+                      </Select>
+                    ) : (
+                      <Input
+                        value={paramValues[param.name] ?? ''}
+                        placeholder={param.default_value ?? undefined}
+                        onChange={(_, data) =>
+                          setParamValues((prev) => ({ ...prev, [param.name]: data.value }))
+                        }
+                        data-testid={`param-${param.name}`}
+                      />
+                    )}
+                  </Field>
+                ))}
+              </div>
+            )}
+
             <div className={styles.outputSection} data-testid="converter-output">
               <Text weight="semibold" size={300}>Output</Text>
               <div className={styles.outputBox}>
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index b3731339ee..f8a42bd156 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -91,10 +91,19 @@ export interface ConverterListResponse {
   items: ConverterInstance[]
 }
 
+export interface ConverterParameterSchema {
+  name: string
+  type_name: string
+  required: boolean
+  default_value?: string | null
+  choices?: string[] | null
+}
+
 export interface ConverterCatalogEntry {
   converter_type: string
   supported_input_types: string[]
   supported_output_types: string[]
+  parameters: ConverterParameterSchema[]
 }
 
 export interface ConverterCatalogResponse {
diff --git a/pyrit/backend/models/converters.py b/pyrit/backend/models/converters.py
index d3a1270553..3d9f8fcb17 100644
--- a/pyrit/backend/models/converters.py
+++ b/pyrit/backend/models/converters.py
@@ -18,6 +18,7 @@
     "ConverterCatalogResponse",
     "ConverterInstance",
     "ConverterInstanceListResponse",
+    "ConverterParameterSchema",
     "CreateConverterRequest",
     "CreateConverterResponse",
     "ConverterPreviewRequest",
@@ -31,6 +32,16 @@
 # ============================================================================
 
 
+class ConverterParameterSchema(BaseModel):
+    """Schema for a single converter constructor parameter."""
+
+    name: str = Field(..., description="Parameter name")
+    type_name: str = Field(..., description="Human-readable type (e.g. 'str', 'int', 'Literal[...]')")
+    required: bool = Field(..., description="Whether the parameter must be provided")
+    default_value: Optional[str] = Field(None, description="String representation of default value, if any")
+    choices: Optional[list[str]] = Field(None, description="Allowed values for Literal types")
+
+
 class ConverterCatalogEntry(BaseModel):
     """A converter type available from the backend registry."""
 
@@ -41,6 +52,9 @@ class ConverterCatalogEntry(BaseModel):
     supported_output_types: list[str] = Field(
         default_factory=list, description="Output data types produced by this converter type"
     )
+    parameters: list[ConverterParameterSchema] = Field(
+        default_factory=list, description="Constructor parameters for dynamic form generation"
+    )
 
 
 class ConverterCatalogResponse(BaseModel):
diff --git a/pyrit/backend/services/converter_service.py b/pyrit/backend/services/converter_service.py
index 61a2986feb..b0dd658070 100644
--- a/pyrit/backend/services/converter_service.py
+++ b/pyrit/backend/services/converter_service.py
@@ -12,9 +12,10 @@
 - Retrieved from registry (pre-registered at startup or created earlier)
 """
 
+import inspect
 import uuid
 from functools import lru_cache
-from typing import Any, Optional
+from typing import Any, Literal, Optional, Union, get_args, get_origin
 
 from pyrit import prompt_converter
 from pyrit.backend.mappers.converter_mappers import converter_object_to_instance
@@ -23,6 +24,7 @@
     ConverterCatalogResponse,
     ConverterInstance,
     ConverterInstanceListResponse,
+    ConverterParameterSchema,
     ConverterPreviewRequest,
     ConverterPreviewResponse,
     CreateConverterRequest,
@@ -54,6 +56,81 @@ def _build_converter_class_registry() -> dict[str, type]:
 # Module-level class registry (built once on import)
 _CONVERTER_CLASS_REGISTRY: dict[str, type] = _build_converter_class_registry()
 
+# Types that can be rendered as simple form fields
+_SIMPLE_TYPES: set[type] = {str, int, float, bool}
+
+
+def _is_simple_type(annotation: Any) -> bool:
+    """Return True if the annotation represents a type renderable in a form field."""
+    if annotation in _SIMPLE_TYPES:
+        return True
+    origin = get_origin(annotation)
+    if origin is Literal:
+        return True
+    if origin is Union:
+        args = get_args(annotation)
+        non_none = [a for a in args if a is not type(None)]
+        return len(non_none) == 1 and _is_simple_type(non_none[0])
+    return False
+
+
+def _serialize_type(annotation: Any) -> str:
+    """Convert a type annotation to a concise human-readable string."""
+    if annotation is inspect.Parameter.empty:
+        return "Any"
+    origin = get_origin(annotation)
+    if origin is Literal:
+        args = get_args(annotation)
+        return f"Literal[{', '.join(repr(a) for a in args)}]"
+    if origin is Union:
+        args = get_args(annotation)
+        non_none = [a for a in args if a is not type(None)]
+        if len(non_none) == 1:
+            inner = _serialize_type(non_none[0])
+            return f"Optional[{inner}]" if len(args) > len(non_none) else inner
+    if hasattr(annotation, "__name__"):
+        return annotation.__name__
+    return str(annotation)
+
+
+def _extract_parameters(converter_class: type) -> list[ConverterParameterSchema]:
+    """Extract simple constructor parameters from a converter class."""
+    try:
+        sig = inspect.signature(converter_class.__init__)
+    except (ValueError, TypeError):
+        return []
+
+    params: list[ConverterParameterSchema] = []
+    for name, p in sig.parameters.items():
+        if name == "self":
+            continue
+        if not _is_simple_type(p.annotation):
+            continue
+
+        no_default = p.default is inspect.Parameter.empty
+        is_sentinel = hasattr(p.default, "__class__") and "Sentinel" in type(p.default).__name__
+        required = no_default or is_sentinel
+
+        default_value: Optional[str] = None
+        if not required and p.default is not None:
+            default_value = str(p.default)
+
+        choices: Optional[list[str]] = None
+        if get_origin(p.annotation) is Literal:
+            choices = [str(a) for a in get_args(p.annotation)]
+
+        params.append(
+            ConverterParameterSchema(
+                name=name,
+                type_name=_serialize_type(p.annotation),
+                required=required,
+                default_value=default_value,
+                choices=choices,
+            )
+        )
+
+    return params
+
 
 class ConverterService:
     """
@@ -115,6 +192,7 @@ async def list_converter_catalog_async(self) -> ConverterCatalogResponse:
                     converter_type=converter_type,
                     supported_input_types=supported_input_types,
                     supported_output_types=supported_output_types,
+                    parameters=_extract_parameters(converter_class),
                 )
             )
 

From 4e0020bb2cd2f9458fda045e361da6545707f275 Mon Sep 17 00:00:00 2001
From: Bolor <bjagdagdorj@microsoft.com>
Date: Sat, 14 Mar 2026 17:56:38 -0700
Subject: [PATCH 05/13] added actual conversion in and preview button to view
 converted value

---
 .../src/components/Chat/ChatInputArea.tsx     | 37 +++++++-
 .../src/components/Chat/ChatWindow.test.tsx   | 63 ++++++++++++++
 frontend/src/components/Chat/ChatWindow.tsx   | 16 +++-
 .../components/Chat/ConverterPanel.styles.ts  |  8 ++
 .../src/components/Chat/ConverterPanel.tsx    | 85 +++++++++++++++++--
 frontend/src/services/api.ts                  | 10 +++
 6 files changed, 209 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Chat/ChatInputArea.tsx b/frontend/src/components/Chat/ChatInputArea.tsx
index 3b9322d197..6bfeb14627 100644
--- a/frontend/src/components/Chat/ChatInputArea.tsx
+++ b/frontend/src/components/Chat/ChatInputArea.tsx
@@ -70,9 +70,13 @@ interface ChatInputAreaProps {
   onConfigureTarget?: () => void
   onToggleConverterPanel?: () => void
   isConverterPanelOpen?: boolean
+  onInputChange?: (value: string) => void
+  convertedValue?: string | null
+  originalValue?: string | null
+  onClearConversion?: () => 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 }, 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, convertedValue, originalValue, onClearConversion }, ref) {
   const styles = useChatInputAreaStyles()
   const [input, setInput] = useState('')
   const [attachments, setAttachments] = useState<MessageAttachment[]>([])
@@ -128,9 +132,10 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
 
   const handleSend = () => {
     if ((input || attachments.length > 0) && !disabled) {
-      onSend(input, undefined, attachments)
+      onSend(input, convertedValue ?? undefined, attachments)
       setInput('')
       setAttachments([])
+      onClearConversion?.()
       if (textareaRef.current) {
         textareaRef.current.style.height = 'auto'
       }
@@ -158,7 +163,8 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
       textareaRef.current.style.height = 'auto'
       textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 96) + 'px'
     }
-  }, [input])
+    onInputChange?.(input)
+  }, [input, onInputChange])
 
   const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setInput(e.target.value)
@@ -273,6 +279,30 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
               Convert
             </Button>
             </div>
+          {convertedValue && (
+            <div className={styles.conversionBar} data-testid="conversion-indicator">
+              <div className={styles.conversionLabel}>
+                <span className={styles.originalBadge}>Original</span>
+                <Text size={200} className={styles.conversionText} truncate>
+                  {originalValue}
+                </Text>
+              </div>
+              <div className={styles.conversionLabel}>
+                <span className={styles.convertedBadge}>Converted</span>
+                <Text size={200} className={styles.conversionText} truncate>
+                  {convertedValue}
+                </Text>
+              </div>
+              <Button
+                appearance="subtle"
+                size="small"
+                onClick={onClearConversion}
+                data-testid="clear-conversion-btn"
+              >
+                ✕
+              </Button>
+            </div>
+          )}
           <textarea
             ref={textareaRef}
             className={styles.textInput}
@@ -282,6 +312,7 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
             onKeyDown={handleKeyDown}
             disabled={disabled}
             rows={1}
+            data-testid="chat-input"
           />
           <div className={styles.iconButtonsRight}>
             {activeTarget && activeTarget.supports_multi_turn === false && (
diff --git a/frontend/src/components/Chat/ChatWindow.test.tsx b/frontend/src/components/Chat/ChatWindow.test.tsx
index 1b1744e615..aa40a336dd 100644
--- a/frontend/src/components/Chat/ChatWindow.test.tsx
+++ b/frontend/src/components/Chat/ChatWindow.test.tsx
@@ -20,6 +20,8 @@ jest.mock("../../services/api", () => ({
     listConverterCatalog: jest.fn(),
     listConverters: jest.fn(),
     getConverter: jest.fn(),
+    createConverter: jest.fn(),
+    previewConversion: jest.fn(),
   },
   labelsApi: {
     getLabels: jest.fn().mockImplementation(() => new Promise(() => {})),
@@ -2170,6 +2172,7 @@ describe("ChatWindow Integration", () => {
       expect(screen.getByText("In: text")).toBeInTheDocument();
       expect(screen.getByText("Out: text")).toBeInTheDocument();
       expect(screen.getByTestId("converter-output")).toBeInTheDocument();
+      expect(screen.getByTestId("converter-preview-btn")).toBeInTheDocument();
       expect(screen.getByText("Converted output will appear here.")).toBeInTheDocument();
       // No params section when parameters is empty
       expect(screen.queryByTestId("converter-params")).not.toBeInTheDocument();
@@ -2217,6 +2220,66 @@ describe("ChatWindow Integration", () => {
     });
   });
 
+  it("should preview conversion when Preview button is clicked", async () => {
+    mockedConvertersApi.listConverterCatalog.mockResolvedValue({
+      items: [
+        {
+          converter_type: "Base64Converter",
+          supported_input_types: ["text"],
+          supported_output_types: ["text"],
+          parameters: [],
+        },
+      ],
+    });
+    mockedConvertersApi.createConverter.mockResolvedValue({
+      converter_id: "test-conv-id",
+      converter_type: "Base64Converter",
+    });
+    mockedConvertersApi.previewConversion.mockResolvedValue({
+      converted_value: "aGVsbG8=",
+    });
+
+    render(
+      <TestWrapper>
+        <ChatWindow
+          {...defaultProps}
+          attackResultId="ar-converter-preview"
+          conversationId="conv-converter-preview"
+          activeConversationId="conv-converter-preview"
+          relatedConversationCount={0}
+        />
+      </TestWrapper>
+    );
+
+    // Type in the chat input textarea first
+    const chatInput = screen.getByTestId("chat-input");
+    await userEvent.type(chatInput, "hello");
+
+    // Open converter panel
+    await userEvent.click(screen.getByTestId("toggle-converter-panel-btn"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-preview-btn")).toBeInTheDocument();
+    });
+
+    // Click Preview — should use chat input text
+    await userEvent.click(screen.getByTestId("converter-preview-btn"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-preview-result")).toBeInTheDocument();
+      expect(screen.getByText("aGVsbG8=")).toBeInTheDocument();
+    });
+
+    expect(mockedConvertersApi.createConverter).toHaveBeenCalledWith({
+      type: "Base64Converter",
+      params: {},
+    });
+    expect(mockedConvertersApi.previewConversion).toHaveBeenCalledWith({
+      original_value: "hello",
+      converter_ids: ["test-conv-id"],
+    });
+  });
+
   it("should switch converter details when a different dropdown option is selected", async () => {
     mockedConvertersApi.listConverterCatalog.mockResolvedValue({
       items: [
diff --git a/frontend/src/components/Chat/ChatWindow.tsx b/frontend/src/components/Chat/ChatWindow.tsx
index 7fd8b75c8a..741f5d59ef 100644
--- a/frontend/src/components/Chat/ChatWindow.tsx
+++ b/frontend/src/components/Chat/ChatWindow.tsx
@@ -67,6 +67,9 @@ export default function ChatWindow({
   const isSending = activeConversationId ? sendingConversations.has(activeConversationId) : Boolean(sendingConversations.size)
   const [isPanelOpen, setIsPanelOpen] = useState(false)
   const [isConverterPanelOpen, setIsConverterPanelOpen] = useState(false)
+  const [chatInputText, setChatInputText] = useState('')
+  const [convertedValue, setConvertedValue] = useState<string | null>(null)
+  const [originalValue, setOriginalValue] = useState<string | null>(null)
   const [panelRefreshKey, setPanelRefreshKey] = useState(0)
   const inputBoxRef = useRef<ChatInputAreaHandle>(null)
 
@@ -452,7 +455,14 @@ export default function ChatWindow({
   return (
     <div className={styles.root}>
       {isConverterPanelOpen && (
-        <ConverterPanel onClose={() => setIsConverterPanelOpen(false)} />
+        <ConverterPanel
+          onClose={() => setIsConverterPanelOpen(false)}
+          previewText={chatInputText}
+          onUseConvertedValue={(original, converted) => {
+            setOriginalValue(original)
+            setConvertedValue(converted)
+          }}
+        />
       )}
       <div className={styles.chatArea}>
         <div className={styles.ribbon}>
@@ -525,6 +535,10 @@ export default function ChatWindow({
           onConfigureTarget={!activeTarget ? () => onNavigate?.('config') : undefined}
           onToggleConverterPanel={() => setIsConverterPanelOpen(prev => !prev)}
           isConverterPanelOpen={isConverterPanelOpen}
+          onInputChange={setChatInputText}
+          convertedValue={convertedValue}
+          originalValue={originalValue}
+          onClearConversion={() => { setConvertedValue(null); setOriginalValue(null) }}
         />
       </div>
       {isPanelOpen && (
diff --git a/frontend/src/components/Chat/ConverterPanel.styles.ts b/frontend/src/components/Chat/ConverterPanel.styles.ts
index b0f894a197..0da58a7e36 100644
--- a/frontend/src/components/Chat/ConverterPanel.styles.ts
+++ b/frontend/src/components/Chat/ConverterPanel.styles.ts
@@ -102,4 +102,12 @@ export const useConverterPanelStyles = makeStyles({
     overflowY: 'auto' as const,
     maxHeight: '200px',
   },
+  previewPre: {
+    margin: 0,
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    fontFamily: tokens.fontFamilyMonospace,
+    fontSize: tokens.fontSizeBase200,
+    color: tokens.colorNeutralForeground1,
+  },
 })
diff --git a/frontend/src/components/Chat/ConverterPanel.tsx b/frontend/src/components/Chat/ConverterPanel.tsx
index aeac460773..d7599c2ee8 100644
--- a/frontend/src/components/Chat/ConverterPanel.tsx
+++ b/frontend/src/components/Chat/ConverterPanel.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 import { Button, Combobox, Field, Input, MessageBar, MessageBarBody, Option, Select, Spinner, Text } from '@fluentui/react-components'
-import { DismissRegular } from '@fluentui/react-icons'
+import { DismissRegular, PlayRegular } from '@fluentui/react-icons'
 import { convertersApi } from '../../services/api'
 import { toApiError } from '../../services/errors'
 import type { ConverterCatalogEntry } from '../../types'
@@ -8,14 +8,19 @@ import { useConverterPanelStyles } from './ConverterPanel.styles'
 
 interface ConverterPanelProps {
   onClose: () => void
+  previewText?: string
+  onUseConvertedValue?: (original: string, converted: string) => void
 }
 
-export default function ConverterPanel({ onClose }: ConverterPanelProps) {
+export default function ConverterPanel({ onClose, previewText = '', onUseConvertedValue }: ConverterPanelProps) {
   const styles = useConverterPanelStyles()
   const [converters, setConverters] = useState<ConverterCatalogEntry[]>([])
   const [selectedConverterType, setSelectedConverterType] = useState('')
   const [query, setQuery] = useState('')
   const [paramValues, setParamValues] = useState<Record<string, string>>({})
+  const [previewOutput, setPreviewOutput] = useState('')
+  const [isPreviewing, setIsPreviewing] = useState(false)
+  const [previewError, setPreviewError] = useState<string | null>(null)
   const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
@@ -69,6 +74,33 @@ export default function ConverterPanel({ onClose }: ConverterPanelProps) {
     (converter) => converter.converter_type === selectedConverterType
   ) ?? converters[0]
 
+  const handlePreview = async () => {
+    if (!selectedConverterType || !previewText.trim()) {
+      return
+    }
+    setIsPreviewing(true)
+    setPreviewError(null)
+    setPreviewOutput('')
+
+    try {
+      const createResponse = await convertersApi.createConverter({
+        type: selectedConverterType,
+        params: { ...paramValues },
+      })
+
+      const previewResponse = await convertersApi.previewConversion({
+        original_value: previewText,
+        converter_ids: [createResponse.converter_id],
+      })
+
+      setPreviewOutput(previewResponse.converted_value)
+    } catch (err) {
+      setPreviewError(toApiError(err).detail)
+    } finally {
+      setIsPreviewing(false)
+    }
+  }
+
   return (
     <aside className={styles.root} data-testid="converter-panel">
       <div className={styles.header}>
@@ -198,13 +230,54 @@ export default function ConverterPanel({ onClose }: ConverterPanelProps) {
               </div>
             )}
 
-            <div className={styles.outputSection} data-testid="converter-output">
-              <Text weight="semibold" size={300}>Output</Text>
-              <div className={styles.outputBox}>
+            <div className={styles.outputSection} data-testid="converter-preview-section">
+              <Button
+                appearance="primary"
+                size="small"
+                icon={isPreviewing ? <Spinner size="tiny" /> : <PlayRegular />}
+                onClick={handlePreview}
+                disabled={isPreviewing || !previewText.trim() || !selectedConverterType}
+                data-testid="converter-preview-btn"
+              >
+                {isPreviewing ? 'Converting...' : 'Preview'}
+              </Button>
+
+              {!previewText.trim() && (
                 <Text size={200} className={styles.hintText}>
-                  Converted output will appear here.
+                  Type in the chat input box to preview a conversion.
                 </Text>
+              )}
+
+              {previewError && (
+                <MessageBar intent="error" data-testid="converter-preview-error">
+                  <MessageBarBody>{previewError}</MessageBarBody>
+                </MessageBar>
+              )}
+
+              <div data-testid="converter-output">
+                <Text weight="semibold" size={300}>Output</Text>
+                <div className={styles.outputBox}>
+                  {previewOutput ? (
+                    <pre className={styles.previewPre} data-testid="converter-preview-result">{previewOutput}</pre>
+                  ) : (
+                    <Text size={200} className={styles.hintText}>
+                      Converted output will appear here.
+                    </Text>
+                  )}
+                </div>
               </div>
+
+              {previewOutput && (
+                <Button
+                  appearance="primary"
+                  size="small"
+                  onClick={() => onUseConvertedValue?.(previewText, previewOutput)}
+                  disabled={!onUseConvertedValue}
+                  data-testid="use-converted-btn"
+                >
+                  Use Converted Value
+                </Button>
+              )}
             </div>
           </div>
         )}
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 5267239bc8..a7c21c4c82 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -124,6 +124,16 @@ export const convertersApi = {
     const response = await apiClient.get(`/converters/${encodeURIComponent(converterId)}`)
     return response.data
   },
+
+  createConverter: async (request: { type: string; params?: Record<string, unknown> }): Promise<{ converter_id: string; converter_type: string }> => {
+    const response = await apiClient.post('/converters', request)
+    return response.data
+  },
+
+  previewConversion: async (request: { original_value: string; converter_ids: string[] }): Promise<{ converted_value: string }> => {
+    const response = await apiClient.post('/converters/preview', request)
+    return response.data
+  },
 }
 
 export const attacksApi = {

From fe6c7479a22f57bb80aa70e679a24b3d8126bd3f Mon Sep 17 00:00:00 2001
From: Bolor <bjagdagdorj@microsoft.com>
Date: Sun, 15 Mar 2026 09:01:33 -0700
Subject: [PATCH 06/13] adding converted value result into the chat box

---
 .../src/components/Chat/ChatInputArea.tsx     | 42 ++++++++-----------
 frontend/src/components/Chat/ChatWindow.tsx   | 12 ++++--
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Chat/ChatInputArea.tsx b/frontend/src/components/Chat/ChatInputArea.tsx
index 6bfeb14627..4263fcd214 100644
--- a/frontend/src/components/Chat/ChatInputArea.tsx
+++ b/frontend/src/components/Chat/ChatInputArea.tsx
@@ -279,30 +279,6 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
               Convert
             </Button>
             </div>
-          {convertedValue && (
-            <div className={styles.conversionBar} data-testid="conversion-indicator">
-              <div className={styles.conversionLabel}>
-                <span className={styles.originalBadge}>Original</span>
-                <Text size={200} className={styles.conversionText} truncate>
-                  {originalValue}
-                </Text>
-              </div>
-              <div className={styles.conversionLabel}>
-                <span className={styles.convertedBadge}>Converted</span>
-                <Text size={200} className={styles.conversionText} truncate>
-                  {convertedValue}
-                </Text>
-              </div>
-              <Button
-                appearance="subtle"
-                size="small"
-                onClick={onClearConversion}
-                data-testid="clear-conversion-btn"
-              >
-                ✕
-              </Button>
-            </div>
-          )}
           <textarea
             ref={textareaRef}
             className={styles.textInput}
@@ -335,6 +311,24 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
             />
           </div>
           </div>
+          {convertedValue && (
+            <div className={styles.conversionBarBottom} data-testid="converted-indicator">
+              <div className={styles.conversionBarHeader}>
+                <span className={styles.convertedBadge}>Converted</span>
+                <Button
+                  appearance="subtle"
+                  size="small"
+                  onClick={onClearConversion}
+                  data-testid="clear-conversion-btn"
+                >
+                  ✕
+                </Button>
+              </div>
+              <Text size={200} className={styles.conversionText}>
+                {convertedValue}
+              </Text>
+            </div>
+          )}
         </div>
         </>
         )}
diff --git a/frontend/src/components/Chat/ChatWindow.tsx b/frontend/src/components/Chat/ChatWindow.tsx
index 741f5d59ef..228ac1376e 100644
--- a/frontend/src/components/Chat/ChatWindow.tsx
+++ b/frontend/src/components/Chat/ChatWindow.tsx
@@ -154,7 +154,7 @@ export default function ChatWindow({
     }
   }, [attackResultId, activeConversationId, onSelectConversation, loadConversation])
 
-  const handleSend = async (originalValue: string, _convertedValue: string | undefined, attachments: MessageAttachment[]) => {
+  const handleSend = async (originalValue: string, convertedValue: string | undefined, attachments: MessageAttachment[]) => {
     if (!activeTarget) { return }
 
     // Track which conversation this send belongs to (may be updated after attack creation)
@@ -162,12 +162,18 @@ export default function ChatWindow({
     // Mark synchronously so the useEffect guard sees it immediately
     sendingConvIdsRef.current.add(sendConvId)
 
+    // When a converter was applied, display the converted text as content
+    // and preserve the original for the "Original" indicator
+    const displayContent = convertedValue ?? originalValue
+    const hasConversion = convertedValue != null && convertedValue !== originalValue
+
     // Add user message with attachments for display
     const userMessage: Message = {
       role: 'user',
-      content: originalValue,
+      content: displayContent,
       timestamp: new Date().toISOString(),
       attachments: attachments.length > 0 ? attachments : undefined,
+      originalContent: hasConversion ? originalValue : undefined,
     }
     setMessages(prev => [...prev, userMessage])
 
@@ -188,7 +194,7 @@ export default function ChatWindow({
 
     try {
       // Build message pieces from text + attachments
-      const pieces = await buildMessagePieces(originalValue, attachments)
+      const pieces = await buildMessagePieces(displayContent, attachments)
 
       // Create attack lazily on first message
       let currentAttackResultId = attackResultId

From 5993a1f8b26622dbc1d3f9c0ac8610f0bfbd24cd Mon Sep 17 00:00:00 2001
From: Bolor <bjagdagdorj@microsoft.com>
Date: Sun, 15 Mar 2026 09:21:08 -0700
Subject: [PATCH 07/13] make banners in line, looks prettier

---
 .../src/components/Chat/ChatInputArea.tsx     | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/Chat/ChatInputArea.tsx b/frontend/src/components/Chat/ChatInputArea.tsx
index 4263fcd214..faf5f36d81 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 } from '@fluentui/react-icons'
+import { SendRegular, AttachRegular, DismissRegular, InfoRegular, AddRegular, CopyRegular, WarningRegular, SettingsRegular, ArrowSyncRegular } from '@fluentui/react-icons'
 import { MessageAttachment, TargetInstance } from '../../types'
 import { useChatInputAreaStyles } from './ChatInputArea.styles'
 
@@ -270,15 +270,18 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
               title="Attach files"
             />
             <Button
-              className={styles.convertButton}
+              className={styles.iconButton}
               appearance={isConverterPanelOpen ? 'primary' : 'subtle'}
+              icon={<ArrowSyncRegular />}
               onClick={onToggleConverterPanel}
               disabled={disabled || !onToggleConverterPanel}
               data-testid="toggle-converter-panel-btn"
-            >
-              Convert
-            </Button>
+              title="Toggle converter panel"
+            />
             </div>
+          {convertedValue && (
+            <span className={styles.originalBadge} data-testid="original-banner">Original</span>
+          )}
           <textarea
             ref={textareaRef}
             className={styles.textInput}
@@ -313,20 +316,18 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
           </div>
           {convertedValue && (
             <div className={styles.conversionBarBottom} data-testid="converted-indicator">
-              <div className={styles.conversionBarHeader}>
-                <span className={styles.convertedBadge}>Converted</span>
-                <Button
-                  appearance="subtle"
-                  size="small"
-                  onClick={onClearConversion}
-                  data-testid="clear-conversion-btn"
-                >
-                  ✕
-                </Button>
-              </div>
-              <Text size={200} className={styles.conversionText}>
+              <span className={styles.convertedBadge}>Converted</span>
+              <Text size={200} className={styles.conversionText} truncate>
                 {convertedValue}
               </Text>
+              <Button
+                appearance="subtle"
+                size="small"
+                onClick={onClearConversion}
+                data-testid="clear-conversion-btn"
+              >
+                ✕
+              </Button>
             </div>
           )}
         </div>

From 3b613be75feeb88fcc244d91f80bd003b2c79769 Mon Sep 17 00:00:00 2001
From: Bolor <bjagdagdorj@microsoft.com>
Date: Sun, 15 Mar 2026 09:33:31 -0700
Subject: [PATCH 08/13] adding llm-based badge to the list of converters

---
 frontend/src/components/Chat/ConverterPanel.styles.ts | 11 +++++++++++
 frontend/src/components/Chat/ConverterPanel.tsx       |  4 ++--
 frontend/src/types/index.ts                           |  1 +
 pyrit/backend/models/converters.py                    |  1 +
 pyrit/backend/services/converter_service.py           | 10 ++++++++++
 5 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Chat/ConverterPanel.styles.ts b/frontend/src/components/Chat/ConverterPanel.styles.ts
index 0da58a7e36..2970fa7e7f 100644
--- a/frontend/src/components/Chat/ConverterPanel.styles.ts
+++ b/frontend/src/components/Chat/ConverterPanel.styles.ts
@@ -76,6 +76,17 @@ export const useConverterPanelStyles = makeStyles({
     flexDirection: 'column',
     gap: tokens.spacingVerticalS,
   },
+  llmBadge: {
+    display: 'inline-block',
+    marginLeft: tokens.spacingHorizontalXS,
+    padding: `0 ${tokens.spacingHorizontalXXS}`,
+    borderRadius: tokens.borderRadiusSmall,
+    backgroundColor: tokens.colorPalettePurpleBackground2,
+    color: tokens.colorPalettePurpleForeground2,
+    fontSize: tokens.fontSizeBase100,
+    fontWeight: tokens.fontWeightSemibold as unknown as string,
+    verticalAlign: 'middle',
+  },
   outputSection: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/frontend/src/components/Chat/ConverterPanel.tsx b/frontend/src/components/Chat/ConverterPanel.tsx
index d7599c2ee8..ba9ece7a98 100644
--- a/frontend/src/components/Chat/ConverterPanel.tsx
+++ b/frontend/src/components/Chat/ConverterPanel.tsx
@@ -63,7 +63,6 @@ export default function ConverterPanel({ onClose, previewText = '', onUseConvert
   }, [])
 
   const filteredConverters = useMemo(() => {
-    // Show all options when query matches the selected converter (no active filter)
     if (query === selectedConverterType) {
       return converters
     }
@@ -165,8 +164,9 @@ export default function ConverterPanel({ onClose, previewText = '', onUseConvert
                 data-testid="converter-panel-select"
               >
                 {filteredConverters.map((converter) => (
-                  <Option key={converter.converter_type} value={converter.converter_type}>
+                  <Option key={converter.converter_type} value={converter.converter_type} text={converter.converter_type}>
                     {converter.converter_type}
+                    {converter.is_llm_based && <span className={styles.llmBadge}>LLM</span>}
                   </Option>
                 ))}
               </Combobox>
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index f8a42bd156..f3ebbedf4a 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -104,6 +104,7 @@ export interface ConverterCatalogEntry {
   supported_input_types: string[]
   supported_output_types: string[]
   parameters: ConverterParameterSchema[]
+  is_llm_based: boolean
 }
 
 export interface ConverterCatalogResponse {
diff --git a/pyrit/backend/models/converters.py b/pyrit/backend/models/converters.py
index 3d9f8fcb17..fb0c860d80 100644
--- a/pyrit/backend/models/converters.py
+++ b/pyrit/backend/models/converters.py
@@ -55,6 +55,7 @@ class ConverterCatalogEntry(BaseModel):
     parameters: list[ConverterParameterSchema] = Field(
         default_factory=list, description="Constructor parameters for dynamic form generation"
     )
+    is_llm_based: bool = Field(False, description="Whether this converter requires an LLM target")
 
 
 class ConverterCatalogResponse(BaseModel):
diff --git a/pyrit/backend/services/converter_service.py b/pyrit/backend/services/converter_service.py
index b0dd658070..9a498de8cc 100644
--- a/pyrit/backend/services/converter_service.py
+++ b/pyrit/backend/services/converter_service.py
@@ -132,6 +132,15 @@ def _extract_parameters(converter_class: type) -> list[ConverterParameterSchema]
     return params
 
 
+def _is_llm_based(converter_class: type) -> bool:
+    """Return True if the converter requires an LLM target parameter."""
+    try:
+        sig = inspect.signature(converter_class.__init__)
+    except (ValueError, TypeError):
+        return False
+    return any("target" in name.lower() for name in sig.parameters if name != "self")
+
+
 class ConverterService:
     """
     Service for managing converter instances.
@@ -193,6 +202,7 @@ async def list_converter_catalog_async(self) -> ConverterCatalogResponse:
                     supported_input_types=supported_input_types,
                     supported_output_types=supported_output_types,
                     parameters=_extract_parameters(converter_class),
+                    is_llm_based=_is_llm_based(converter_class),
                 )
             )
 

From 45a2bce49fe0bda41397f5d23c1d30b56b5b4f94 Mon Sep 17 00:00:00 2001
From: Bolor <bjagdagdorj@microsoft.com>
Date: Sun, 15 Mar 2026 11:54:01 -0700
Subject: [PATCH 09/13] fixed bug for int input

---
 .../src/components/Chat/ConverterPanel.tsx    | 33 ++++++++++++-
 pyrit/backend/services/converter_service.py   | 46 +++++++++++++++++++
 2 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Chat/ConverterPanel.tsx b/frontend/src/components/Chat/ConverterPanel.tsx
index ba9ece7a98..d331f961cb 100644
--- a/frontend/src/components/Chat/ConverterPanel.tsx
+++ b/frontend/src/components/Chat/ConverterPanel.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Button, Combobox, Field, Input, MessageBar, MessageBarBody, Option, Select, Spinner, Text } from '@fluentui/react-components'
 import { DismissRegular, PlayRegular } from '@fluentui/react-icons'
 import { convertersApi } from '../../services/api'
@@ -100,8 +100,37 @@ export default function ConverterPanel({ onClose, previewText = '', onUseConvert
     }
   }
 
+  const [panelWidth, setPanelWidth] = useState(320)
+  const isDragging = useRef(false)
+
+  const handleMouseDown = useCallback(() => {
+    isDragging.current = true
+    document.body.style.cursor = 'col-resize'
+    document.body.style.userSelect = 'none'
+  }, [])
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging.current) return
+      const newWidth = Math.max(240, Math.min(600, e.clientX))
+      setPanelWidth(newWidth)
+    }
+    const handleMouseUp = () => {
+      if (!isDragging.current) return
+      isDragging.current = false
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    }
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [])
+
   return (
-    <aside className={styles.root} data-testid="converter-panel">
+    <aside className={styles.root} style={{ width: panelWidth, minWidth: panelWidth }} data-testid="converter-panel">
       <div className={styles.header}>
         <div className={styles.headerTitle}>
           <Text weight="semibold" size={300}>Converters</Text>
diff --git a/pyrit/backend/services/converter_service.py b/pyrit/backend/services/converter_service.py
index 9a498de8cc..aef2d3c4b5 100644
--- a/pyrit/backend/services/converter_service.py
+++ b/pyrit/backend/services/converter_service.py
@@ -250,6 +250,7 @@ async def create_converter_async(self, *, request: CreateConverterRequest) -> Cr
         # Resolve any converter references in params and instantiate
         params = self._resolve_converter_params(params=request.params)
         converter_class = self._get_converter_class(converter_type=request.type)
+        params = self._coerce_params(converter_class=converter_class, params=params)
         converter_obj = converter_class(**params)
         self._registry.register_instance(converter_obj, name=converter_id)
 
@@ -341,6 +342,51 @@ def _resolve_converter_params(self, *, params: dict[str, Any]) -> dict[str, Any]
                 resolved["converter"] = conv_obj
         return resolved
 
+    @staticmethod
+    def _coerce_params(*, converter_class: type, params: dict[str, Any]) -> dict[str, Any]:
+        """
+        Coerce parameter values to match the converter's __init__ type annotations.
+
+        The frontend sends all values as strings; this converts them to int, float,
+        or bool as needed based on the constructor signature.
+
+        Returns:
+            Params dict with values coerced to the expected types.
+        """
+        try:
+            sig = inspect.signature(converter_class.__init__)
+        except (ValueError, TypeError):
+            return params
+
+        coerced = dict(params)
+        for name, value in coerced.items():
+            if name not in sig.parameters or not isinstance(value, str):
+                continue
+            annotation = sig.parameters[name].annotation
+            if annotation is inspect.Parameter.empty:
+                continue
+
+            origin = get_origin(annotation)
+            # Unwrap Optional[X] to X
+            if origin is Union:
+                args = get_args(annotation)
+                non_none = [a for a in args if a is not type(None)]
+                if len(non_none) == 1:
+                    annotation = non_none[0]
+                    origin = get_origin(annotation)
+
+            try:
+                if annotation is int:
+                    coerced[name] = int(value)
+                elif annotation is float:
+                    coerced[name] = float(value)
+                elif annotation is bool:
+                    coerced[name] = value.lower() in ("true", "1", "yes")
+            except (ValueError, TypeError):
+                pass
+
+        return coerced
+
     def _gather_converters(self, *, converter_ids: list[str]) -> list[tuple[str, str, Any]]:
         """
         Gather converters to apply from IDs.

From 03e8ffa56fdbb688f5445a55492e623883f6e2f9 Mon Sep 17 00:00:00 2001
From: Bolor <bjagdagdorj@microsoft.com>
Date: Mon, 16 Mar 2026 11:02:50 -0700
Subject: [PATCH 10/13] making panel adjustable size, adding converter
 description, cleaning up a litle

---
 .../components/Chat/ChatInputArea.styles.ts   | 11 ++-
 .../src/components/Chat/ChatInputArea.tsx     | 10 +-
 .../src/components/Chat/ChatWindow.test.tsx   |  6 +-
 frontend/src/components/Chat/ChatWindow.tsx   |  3 +
 .../components/Chat/ConverterPanel.styles.ts  | 95 +++++++++++++++++-
 .../src/components/Chat/ConverterPanel.tsx    | 98 +++++++++++++++----
 frontend/src/types/index.ts                   |  1 +
 pyrit/backend/models/converters.py            |  1 +
 pyrit/backend/services/converter_service.py   |  5 +
 9 files changed, 197 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/Chat/ChatInputArea.styles.ts b/frontend/src/components/Chat/ChatInputArea.styles.ts
index 73a42efb9f..b147da5f7d 100644
--- a/frontend/src/components/Chat/ChatInputArea.styles.ts
+++ b/frontend/src/components/Chat/ChatInputArea.styles.ts
@@ -134,7 +134,7 @@ export const useChatInputAreaStyles = makeStyles({
   },
   conversionBarBottom: {
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     gap: tokens.spacingHorizontalXS,
     padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalL}`,
     paddingLeft: `calc(${tokens.spacingHorizontalL} + 32px + ${tokens.spacingHorizontalXS} + 32px + ${tokens.spacingHorizontalS})`,
@@ -151,11 +151,14 @@ export const useChatInputAreaStyles = makeStyles({
     overflow: 'hidden',
   },
   conversionText: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    fontFamily: tokens.fontFamilyMonospace,
+    fontSize: tokens.fontSizeBase200,
     minWidth: 0,
     flex: 1,
+    maxHeight: '80px',
+    overflowY: 'auto',
   },
   originalBadge: {
     display: 'inline-block',
diff --git a/frontend/src/components/Chat/ChatInputArea.tsx b/frontend/src/components/Chat/ChatInputArea.tsx
index faf5f36d81..5c2fcd5658 100644
--- a/frontend/src/components/Chat/ChatInputArea.tsx
+++ b/frontend/src/components/Chat/ChatInputArea.tsx
@@ -71,12 +71,13 @@ interface ChatInputAreaProps {
   onToggleConverterPanel?: () => void
   isConverterPanelOpen?: boolean
   onInputChange?: (value: string) => void
+  onAttachmentsChange?: (types: string[]) => void
   convertedValue?: string | null
   originalValue?: string | null
   onClearConversion?: () => 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, convertedValue, originalValue, onClearConversion }, 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, onClearConversion }, ref) {
   const styles = useChatInputAreaStyles()
   const [input, setInput] = useState('')
   const [attachments, setAttachments] = useState<MessageAttachment[]>([])
@@ -166,6 +167,11 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
     onInputChange?.(input)
   }, [input, onInputChange])
 
+  useEffect(() => {
+    const types = [...new Set(attachments.map((a) => a.type))]
+    onAttachmentsChange?.(types)
+  }, [attachments, onAttachmentsChange])
+
   const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setInput(e.target.value)
   }
@@ -317,7 +323,7 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
           {convertedValue && (
             <div className={styles.conversionBarBottom} data-testid="converted-indicator">
               <span className={styles.convertedBadge}>Converted</span>
-              <Text size={200} className={styles.conversionText} truncate>
+              <Text size={200} className={styles.conversionText}>
                 {convertedValue}
               </Text>
               <Button
diff --git a/frontend/src/components/Chat/ChatWindow.test.tsx b/frontend/src/components/Chat/ChatWindow.test.tsx
index aa40a336dd..e8f9151e7b 100644
--- a/frontend/src/components/Chat/ChatWindow.test.tsx
+++ b/frontend/src/components/Chat/ChatWindow.test.tsx
@@ -2169,8 +2169,8 @@ describe("ChatWindow Integration", () => {
       expect(screen.getByTestId("converter-panel-list")).toBeInTheDocument();
       expect(screen.getByTestId("converter-panel-select")).toBeInTheDocument();
       expect(screen.getByTestId("converter-item-Base64Converter")).toBeInTheDocument();
-      expect(screen.getByText("In: text")).toBeInTheDocument();
-      expect(screen.getByText("Out: text")).toBeInTheDocument();
+      expect(screen.getByText("In:")).toBeInTheDocument();
+      expect(screen.getByText("Out:")).toBeInTheDocument();
       expect(screen.getByTestId("converter-output")).toBeInTheDocument();
       expect(screen.getByTestId("converter-preview-btn")).toBeInTheDocument();
       expect(screen.getByText("Converted output will appear here.")).toBeInTheDocument();
@@ -2322,7 +2322,7 @@ describe("ChatWindow Integration", () => {
     await userEvent.click(input);
 
     // Find and click the second converter option
-    const option = await screen.findByRole("option", { name: "CharSwapConverter" });
+    const option = await screen.findByRole("option", { name: /CharSwapConverter/ });
     await userEvent.click(option);
 
     await waitFor(() => {
diff --git a/frontend/src/components/Chat/ChatWindow.tsx b/frontend/src/components/Chat/ChatWindow.tsx
index 228ac1376e..0bd7909277 100644
--- a/frontend/src/components/Chat/ChatWindow.tsx
+++ b/frontend/src/components/Chat/ChatWindow.tsx
@@ -68,6 +68,7 @@ export default function ChatWindow({
   const [isPanelOpen, setIsPanelOpen] = useState(false)
   const [isConverterPanelOpen, setIsConverterPanelOpen] = useState(false)
   const [chatInputText, setChatInputText] = useState('')
+  const [attachmentTypes, setAttachmentTypes] = useState<string[]>([])
   const [convertedValue, setConvertedValue] = useState<string | null>(null)
   const [originalValue, setOriginalValue] = useState<string | null>(null)
   const [panelRefreshKey, setPanelRefreshKey] = useState(0)
@@ -464,6 +465,7 @@ export default function ChatWindow({
         <ConverterPanel
           onClose={() => setIsConverterPanelOpen(false)}
           previewText={chatInputText}
+          activeInputTypes={chatInputText.trim() ? ['text', ...attachmentTypes] : attachmentTypes}
           onUseConvertedValue={(original, converted) => {
             setOriginalValue(original)
             setConvertedValue(converted)
@@ -542,6 +544,7 @@ export default function ChatWindow({
           onToggleConverterPanel={() => setIsConverterPanelOpen(prev => !prev)}
           isConverterPanelOpen={isConverterPanelOpen}
           onInputChange={setChatInputText}
+          onAttachmentsChange={setAttachmentTypes}
           convertedValue={convertedValue}
           originalValue={originalValue}
           onClearConversion={() => { setConvertedValue(null); setOriginalValue(null) }}
diff --git a/frontend/src/components/Chat/ConverterPanel.styles.ts b/frontend/src/components/Chat/ConverterPanel.styles.ts
index 2970fa7e7f..c84e51c444 100644
--- a/frontend/src/components/Chat/ConverterPanel.styles.ts
+++ b/frontend/src/components/Chat/ConverterPanel.styles.ts
@@ -1,16 +1,34 @@
 import { makeStyles, tokens } from '@fluentui/react-components'
 
 export const useConverterPanelStyles = makeStyles({
+  resizeContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    height: '100%',
+    flexShrink: 0,
+  },
   root: {
     display: 'flex',
     flexDirection: 'column',
     height: '100%',
-    width: '320px',
-    minWidth: '320px',
-    borderRight: `1px solid ${tokens.colorNeutralStroke1}`,
+    flex: 1,
+    minWidth: 0,
     backgroundColor: tokens.colorNeutralBackground3,
     overflow: 'hidden',
   },
+  resizeHandle: {
+    width: '4px',
+    cursor: 'col-resize',
+    backgroundColor: 'transparent',
+    borderRight: `1px solid ${tokens.colorNeutralStroke1}`,
+    flexShrink: 0,
+    ':hover': {
+      backgroundColor: tokens.colorBrandBackground2,
+    },
+    ':active': {
+      backgroundColor: tokens.colorBrandBackground,
+    },
+  },
   header: {
     display: 'flex',
     alignItems: 'center',
@@ -78,7 +96,7 @@ export const useConverterPanelStyles = makeStyles({
   },
   llmBadge: {
     display: 'inline-block',
-    marginLeft: tokens.spacingHorizontalXS,
+    marginRight: tokens.spacingHorizontalXXS,
     padding: `0 ${tokens.spacingHorizontalXXS}`,
     borderRadius: tokens.borderRadiusSmall,
     backgroundColor: tokens.colorPalettePurpleBackground2,
@@ -87,6 +105,70 @@ export const useConverterPanelStyles = makeStyles({
     fontWeight: tokens.fontWeightSemibold as unknown as string,
     verticalAlign: 'middle',
   },
+  optionContent: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    gap: tokens.spacingHorizontalXS,
+  },
+  optionBadges: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '2px',
+    flexShrink: 0,
+  },
+  typeBadge: {
+    display: 'inline-block',
+    padding: `0 3px`,
+    borderRadius: tokens.borderRadiusSmall,
+    fontSize: '10px',
+    fontWeight: tokens.fontWeightSemibold as unknown as string,
+    lineHeight: '16px',
+    verticalAlign: 'middle',
+  },
+  typeArrow: {
+    fontSize: '10px',
+    color: tokens.colorNeutralForeground3,
+  },
+  // Input type colors (solid backgrounds)
+  input_text: {
+    backgroundColor: tokens.colorPaletteBlueBackground2,
+    color: tokens.colorPaletteBlueForeground2,
+  },
+  input_image_path: {
+    backgroundColor: tokens.colorPaletteGreenBackground2,
+    color: tokens.colorPaletteGreenForeground2,
+  },
+  input_audio_path: {
+    backgroundColor: tokens.colorPaletteYellowBackground2,
+    color: tokens.colorPaletteYellowForeground2,
+  },
+  input_video_path: {
+    backgroundColor: tokens.colorPalettePurpleBackground2,
+    color: tokens.colorPalettePurpleForeground2,
+  },
+  // Output type colors (outlined/lighter)
+  output_text: {
+    backgroundColor: 'transparent',
+    color: tokens.colorPaletteBlueForeground2,
+    border: `1px solid ${tokens.colorPaletteBlueBorderActive}`,
+  },
+  output_image_path: {
+    backgroundColor: 'transparent',
+    color: tokens.colorPaletteGreenForeground2,
+    border: `1px solid ${tokens.colorPaletteGreenBorderActive}`,
+  },
+  output_audio_path: {
+    backgroundColor: 'transparent',
+    color: tokens.colorPaletteYellowForeground2,
+    border: `1px solid ${tokens.colorPaletteYellowBorderActive}`,
+  },
+  output_video_path: {
+    backgroundColor: 'transparent',
+    color: tokens.colorPalettePurpleForeground2,
+    border: `1px solid ${tokens.colorPalettePurpleBorderActive}`,
+  },
   outputSection: {
     display: 'flex',
     flexDirection: 'column',
@@ -102,6 +184,11 @@ export const useConverterPanelStyles = makeStyles({
     border: `1px solid ${tokens.colorNeutralStroke1}`,
     backgroundColor: tokens.colorNeutralBackground1,
   },
+  paramsSectionHeader: {
+    justifyContent: 'flex-start',
+    fontWeight: tokens.fontWeightSemibold as unknown as string,
+    padding: 0,
+  },
   outputBox: {
     padding: tokens.spacingVerticalS,
     borderRadius: tokens.borderRadiusMedium,
diff --git a/frontend/src/components/Chat/ConverterPanel.tsx b/frontend/src/components/Chat/ConverterPanel.tsx
index d331f961cb..a8dcf5e6cb 100644
--- a/frontend/src/components/Chat/ConverterPanel.tsx
+++ b/frontend/src/components/Chat/ConverterPanel.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, Combobox, Field, Input, MessageBar, MessageBarBody, Option, Select, Spinner, Text } from '@fluentui/react-components'
-import { DismissRegular, PlayRegular } from '@fluentui/react-icons'
+import { Button, Combobox, Field, Input, MessageBar, MessageBarBody, Option, Select, Spinner, Text, Tooltip } from '@fluentui/react-components'
+import { ChevronDownRegular, ChevronRightRegular, DismissRegular, PlayRegular } from '@fluentui/react-icons'
 import { convertersApi } from '../../services/api'
 import { toApiError } from '../../services/errors'
 import type { ConverterCatalogEntry } from '../../types'
@@ -9,15 +9,17 @@ import { useConverterPanelStyles } from './ConverterPanel.styles'
 interface ConverterPanelProps {
   onClose: () => void
   previewText?: string
+  activeInputTypes?: string[]
   onUseConvertedValue?: (original: string, converted: string) => void
 }
 
-export default function ConverterPanel({ onClose, previewText = '', onUseConvertedValue }: ConverterPanelProps) {
+export default function ConverterPanel({ onClose, previewText = '', activeInputTypes = ['text'], onUseConvertedValue }: ConverterPanelProps) {
   const styles = useConverterPanelStyles()
   const [converters, setConverters] = useState<ConverterCatalogEntry[]>([])
   const [selectedConverterType, setSelectedConverterType] = useState('')
   const [query, setQuery] = useState('')
   const [paramValues, setParamValues] = useState<Record<string, string>>({})
+  const [paramsExpanded, setParamsExpanded] = useState(true)
   const [previewOutput, setPreviewOutput] = useState('')
   const [isPreviewing, setIsPreviewing] = useState(false)
   const [previewError, setPreviewError] = useState<string | null>(null)
@@ -62,12 +64,32 @@ export default function ConverterPanel({ onClose, previewText = '', onUseConvert
     }
   }, [])
 
+  // Map frontend attachment types to backend data type prefixes
+  const inputTypeSet = useMemo(() => {
+    const set = new Set<string>()
+    for (const t of activeInputTypes) {
+      if (t === 'text') set.add('text')
+      else if (t === 'image') set.add('image_path')
+      else if (t === 'audio') set.add('audio_path')
+      else if (t === 'video') set.add('video_path')
+    }
+    if (set.size === 0) set.add('text')
+    return set
+  }, [activeInputTypes])
+
   const filteredConverters = useMemo(() => {
+    // First filter by supported input types
+    const byType = converters.filter((c) => {
+      const supported = c.supported_input_types ?? []
+      if (supported.length === 0) return true
+      return supported.some((s) => inputTypeSet.has(s))
+    })
+    // Then filter by search query
     if (query === selectedConverterType) {
-      return converters
+      return byType
     }
-    return converters.filter((c) => c.converter_type.toLowerCase().includes(query.toLowerCase()))
-  }, [converters, query, selectedConverterType])
+    return byType.filter((c) => c.converter_type.toLowerCase().includes(query.toLowerCase()))
+  }, [converters, query, selectedConverterType, inputTypeSet])
 
   const selectedConverter = converters.find(
     (converter) => converter.converter_type === selectedConverterType
@@ -130,8 +152,9 @@ export default function ConverterPanel({ onClose, previewText = '', onUseConvert
   }, [])
 
   return (
-    <aside className={styles.root} style={{ width: panelWidth, minWidth: panelWidth }} data-testid="converter-panel">
-      <div className={styles.header}>
+    <div className={styles.resizeContainer} style={{ width: panelWidth, minWidth: panelWidth }}>
+      <aside className={styles.root} data-testid="converter-panel">
+        <div className={styles.header}>
         <div className={styles.headerTitle}>
           <Text weight="semibold" size={300}>Converters</Text>
           <Text size={200} className={styles.hintText}>
@@ -193,10 +216,19 @@ export default function ConverterPanel({ onClose, previewText = '', onUseConvert
                 data-testid="converter-panel-select"
               >
                 {filteredConverters.map((converter) => (
-                  <Option key={converter.converter_type} value={converter.converter_type} text={converter.converter_type}>
-                    {converter.converter_type}
-                    {converter.is_llm_based && <span className={styles.llmBadge}>LLM</span>}
-                  </Option>
+                  <Tooltip
+                    key={converter.converter_type}
+                    content={converter.description || converter.converter_type}
+                    relationship="description"
+                    positioning="after"
+                  >
+                    <Option value={converter.converter_type} text={converter.converter_type}>
+                      <span className={styles.optionContent}>
+                        {converter.is_llm_based && <span className={styles.llmBadge}>LLM</span>}
+                        {converter.converter_type}
+                      </span>
+                    </Option>
+                  </Tooltip>
                 ))}
               </Combobox>
             </Field>
@@ -208,23 +240,43 @@ export default function ConverterPanel({ onClose, previewText = '', onUseConvert
                 <Text weight="semibold" size={300} className={styles.converterName}>
                   {selectedConverter.converter_type}
                 </Text>
-                <div className={styles.metaRow}>
-                  <Text size={200} className={styles.badgeText}>
-                    In: {selectedConverter.supported_input_types.join(', ') || 'n/a'}
+                {selectedConverter.description && (
+                  <Text size={200} className={styles.hintText}>
+                    {selectedConverter.description}
                   </Text>
+                )}
+                <div className={styles.metaRow}>
+                  <Text size={200} className={styles.badgeText}>In:</Text>
+                  {(selectedConverter.supported_input_types ?? []).map((t) => (
+                    <span key={t} className={`${styles.typeBadge} ${styles[`input_${t}` as keyof typeof styles] ?? ''}`}>
+                      {t.replace('_path', '')}
+                    </span>
+                  ))}
                 </div>
                 <div className={styles.metaRow}>
-                  <Text size={200} className={styles.badgeText}>
-                    Out: {selectedConverter.supported_output_types.join(', ') || 'n/a'}
-                  </Text>
+                  <Text size={200} className={styles.badgeText}>Out:</Text>
+                  {(selectedConverter.supported_output_types ?? []).map((t) => (
+                    <span key={t} className={`${styles.typeBadge} ${styles[`output_${t}` as keyof typeof styles] ?? ''}`}>
+                      {t.replace('_path', '')}
+                    </span>
+                  ))}
                 </div>
               </div>
             )}
 
             {selectedConverter && (selectedConverter.parameters?.length ?? 0) > 0 && (
               <div className={styles.paramsSection} data-testid="converter-params">
-                <Text weight="semibold" size={300}>Parameters</Text>
-                {(selectedConverter.parameters ?? []).map((param) => (
+                <Button
+                  appearance="transparent"
+                  size="small"
+                  icon={paramsExpanded ? <ChevronDownRegular /> : <ChevronRightRegular />}
+                  onClick={() => setParamsExpanded((prev) => !prev)}
+                  className={styles.paramsSectionHeader}
+                  data-testid="toggle-params-btn"
+                >
+                  Parameters
+                </Button>
+                {paramsExpanded && (selectedConverter.parameters ?? []).map((param) => (
                   <Field
                     key={param.name}
                     label={`${param.name}${param.required ? ' *' : ''}`}
@@ -312,5 +364,11 @@ export default function ConverterPanel({ onClose, previewText = '', onUseConvert
         )}
       </div>
     </aside>
+    <div
+      className={styles.resizeHandle}
+      onMouseDown={handleMouseDown}
+      data-testid="converter-panel-resize"
+    />
+    </div>
   )
 }
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index f3ebbedf4a..ad49e8f44f 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -105,6 +105,7 @@ export interface ConverterCatalogEntry {
   supported_output_types: string[]
   parameters: ConverterParameterSchema[]
   is_llm_based: boolean
+  description?: string | null
 }
 
 export interface ConverterCatalogResponse {
diff --git a/pyrit/backend/models/converters.py b/pyrit/backend/models/converters.py
index fb0c860d80..84876a1e19 100644
--- a/pyrit/backend/models/converters.py
+++ b/pyrit/backend/models/converters.py
@@ -56,6 +56,7 @@ class ConverterCatalogEntry(BaseModel):
         default_factory=list, description="Constructor parameters for dynamic form generation"
     )
     is_llm_based: bool = Field(False, description="Whether this converter requires an LLM target")
+    description: Optional[str] = Field(None, description="Short description of the converter from its docstring")
 
 
 class ConverterCatalogResponse(BaseModel):
diff --git a/pyrit/backend/services/converter_service.py b/pyrit/backend/services/converter_service.py
index aef2d3c4b5..a2baf6fcc2 100644
--- a/pyrit/backend/services/converter_service.py
+++ b/pyrit/backend/services/converter_service.py
@@ -196,6 +196,10 @@ async def list_converter_catalog_async(self) -> ConverterCatalogResponse:
             supported_input_types = [str(data_type) for data_type in getattr(converter_class, "SUPPORTED_INPUT_TYPES", ())]
             supported_output_types = [str(data_type) for data_type in getattr(converter_class, "SUPPORTED_OUTPUT_TYPES", ())]
 
+            # Extract first paragraph of docstring as description
+            raw_doc = (converter_class.__doc__ or "").strip()
+            description = raw_doc.split("\n\n")[0].replace("\n", " ").strip() or None
+
             items.append(
                 ConverterCatalogEntry(
                     converter_type=converter_type,
@@ -203,6 +207,7 @@ async def list_converter_catalog_async(self) -> ConverterCatalogResponse:
                     supported_output_types=supported_output_types,
                     parameters=_extract_parameters(converter_class),
                     is_llm_based=_is_llm_based(converter_class),
+                    description=description,
                 )
             )
 

From ea9a12ef33a84d11e5a0980cf69e6128e440c6ce Mon Sep 17 00:00:00 2001
From: Bolor <bjagdagdorj@microsoft.com>
Date: Mon, 16 Mar 2026 12:16:34 -0700
Subject: [PATCH 11/13] add description panel

---
 .../components/Chat/ConverterPanel.styles.ts  | 16 ++++++++++++++
 .../src/components/Chat/ConverterPanel.tsx    | 19 ++++++++++-------
 frontend/src/types/index.ts                   |  1 +
 pyrit/backend/models/converters.py            |  1 +
 pyrit/backend/services/converter_service.py   | 21 +++++++++++++++++++
 5 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Chat/ConverterPanel.styles.ts b/frontend/src/components/Chat/ConverterPanel.styles.ts
index c84e51c444..34d8e87b78 100644
--- a/frontend/src/components/Chat/ConverterPanel.styles.ts
+++ b/frontend/src/components/Chat/ConverterPanel.styles.ts
@@ -189,6 +189,22 @@ export const useConverterPanelStyles = makeStyles({
     fontWeight: tokens.fontWeightSemibold as unknown as string,
     padding: 0,
   },
+  paramBlock: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalXXS,
+  },
+  paramLabel: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalXXS,
+  },
+  paramInfo: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    color: tokens.colorNeutralForeground3,
+    cursor: 'help',
+  },
   outputBox: {
     padding: tokens.spacingVerticalS,
     borderRadius: tokens.borderRadiusMedium,
diff --git a/frontend/src/components/Chat/ConverterPanel.tsx b/frontend/src/components/Chat/ConverterPanel.tsx
index a8dcf5e6cb..4595ed0c66 100644
--- a/frontend/src/components/Chat/ConverterPanel.tsx
+++ b/frontend/src/components/Chat/ConverterPanel.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Button, Combobox, Field, Input, MessageBar, MessageBarBody, Option, Select, Spinner, Text, Tooltip } from '@fluentui/react-components'
-import { ChevronDownRegular, ChevronRightRegular, DismissRegular, PlayRegular } from '@fluentui/react-icons'
+import { ChevronDownRegular, ChevronRightRegular, DismissRegular, InfoRegular, PlayRegular } from '@fluentui/react-icons'
 import { convertersApi } from '../../services/api'
 import { toApiError } from '../../services/errors'
 import type { ConverterCatalogEntry } from '../../types'
@@ -277,11 +277,15 @@ export default function ConverterPanel({ onClose, previewText = '', activeInputT
                   Parameters
                 </Button>
                 {paramsExpanded && (selectedConverter.parameters ?? []).map((param) => (
-                  <Field
-                    key={param.name}
-                    label={`${param.name}${param.required ? ' *' : ''}`}
-                    hint={param.type_name}
-                  >
+                  <div key={param.name} className={styles.paramBlock}>
+                    <span className={styles.paramLabel}>
+                      <Text size={200} weight="semibold">{param.name}{param.required ? ' *' : ''}</Text>
+                      {param.description && (
+                        <Tooltip content={param.description} relationship="description">
+                          <span className={styles.paramInfo}><InfoRegular fontSize={12} /></span>
+                        </Tooltip>
+                      )}
+                    </span>
                     {param.choices ? (
                       <Select
                         value={paramValues[param.name] ?? param.default_value ?? ''}
@@ -306,7 +310,8 @@ export default function ConverterPanel({ onClose, previewText = '', activeInputT
                         data-testid={`param-${param.name}`}
                       />
                     )}
-                  </Field>
+                    <Text size={100} className={styles.hintText}>{param.type_name}</Text>
+                  </div>
                 ))}
               </div>
             )}
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index ad49e8f44f..c66d327cb8 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -97,6 +97,7 @@ export interface ConverterParameterSchema {
   required: boolean
   default_value?: string | null
   choices?: string[] | null
+  description?: string | null
 }
 
 export interface ConverterCatalogEntry {
diff --git a/pyrit/backend/models/converters.py b/pyrit/backend/models/converters.py
index 84876a1e19..ba5ca5390d 100644
--- a/pyrit/backend/models/converters.py
+++ b/pyrit/backend/models/converters.py
@@ -40,6 +40,7 @@ class ConverterParameterSchema(BaseModel):
     required: bool = Field(..., description="Whether the parameter must be provided")
     default_value: Optional[str] = Field(None, description="String representation of default value, if any")
     choices: Optional[list[str]] = Field(None, description="Allowed values for Literal types")
+    description: Optional[str] = Field(None, description="Parameter description from docstring")
 
 
 class ConverterCatalogEntry(BaseModel):
diff --git a/pyrit/backend/services/converter_service.py b/pyrit/backend/services/converter_service.py
index a2baf6fcc2..14333cdad6 100644
--- a/pyrit/backend/services/converter_service.py
+++ b/pyrit/backend/services/converter_service.py
@@ -13,6 +13,7 @@
 """
 
 import inspect
+import re
 import uuid
 from functools import lru_cache
 from typing import Any, Literal, Optional, Union, get_args, get_origin
@@ -93,6 +94,23 @@ def _serialize_type(annotation: Any) -> str:
     return str(annotation)
 
 
+def _parse_arg_descriptions(converter_class: type) -> dict[str, str]:
+    """Parse parameter descriptions from Google-style docstring Args section."""
+    doc = (converter_class.__init__.__doc__ or converter_class.__doc__ or "").strip()
+    match = re.search(r"Args:\s*\n(.*?)(?:\n\s*\n|\n\s*Returns:|\n\s*Raises:|\Z)", doc, re.DOTALL)
+    if not match:
+        return {}
+    args_block = match.group(1)
+    # Detect indentation of first parameter line
+    indent_match = re.match(r"^(\s+)", args_block)
+    indent = indent_match.group(1) if indent_match else r"\s+"
+    pattern = rf"^{indent}(\w+)\s*(?:\([^)]*\))?\s*:\s*(.+?)(?=\n{indent}\w|\Z)"
+    descriptions: dict[str, str] = {}
+    for m in re.finditer(pattern, args_block, re.DOTALL | re.MULTILINE):
+        descriptions[m.group(1)] = " ".join(m.group(2).split())
+    return descriptions
+
+
 def _extract_parameters(converter_class: type) -> list[ConverterParameterSchema]:
     """Extract simple constructor parameters from a converter class."""
     try:
@@ -100,6 +118,8 @@ def _extract_parameters(converter_class: type) -> list[ConverterParameterSchema]
     except (ValueError, TypeError):
         return []
 
+    arg_descriptions = _parse_arg_descriptions(converter_class)
+
     params: list[ConverterParameterSchema] = []
     for name, p in sig.parameters.items():
         if name == "self":
@@ -126,6 +146,7 @@ def _extract_parameters(converter_class: type) -> list[ConverterParameterSchema]
                 required=required,
                 default_value=default_value,
                 choices=choices,
+                description=arg_descriptions.get(name),
             )
         )
 

From 86aa0a1511c8eddccbcf8af08a4f7b06436edbf9 Mon Sep 17 00:00:00 2001
From: Bolor <bjagdagdorj@microsoft.com>
Date: Mon, 16 Mar 2026 14:25:12 -0700
Subject: [PATCH 12/13] send all metadata for converted value and populate
 correct converter in attack history

---
 frontend/src/components/Chat/ChatWindow.tsx   | 31 ++++++++++++++-----
 .../src/components/Chat/ConverterPanel.tsx    | 11 +++++--
 pyrit/backend/services/attack_service.py      | 12 +++++++
 3 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Chat/ChatWindow.tsx b/frontend/src/components/Chat/ChatWindow.tsx
index 0bd7909277..4739c865a6 100644
--- a/frontend/src/components/Chat/ChatWindow.tsx
+++ b/frontend/src/components/Chat/ChatWindow.tsx
@@ -71,6 +71,7 @@ export default function ChatWindow({
   const [attachmentTypes, setAttachmentTypes] = useState<string[]>([])
   const [convertedValue, setConvertedValue] = useState<string | null>(null)
   const [originalValue, setOriginalValue] = useState<string | null>(null)
+  const [activeConverterInstanceId, setActiveConverterInstanceId] = useState<string | null>(null)
   const [panelRefreshKey, setPanelRefreshKey] = useState(0)
   const inputBoxRef = useRef<ChatInputAreaHandle>(null)
 
@@ -163,10 +164,9 @@ export default function ChatWindow({
     // Mark synchronously so the useEffect guard sees it immediately
     sendingConvIdsRef.current.add(sendConvId)
 
-    // When a converter was applied, display the converted text as content
-    // and preserve the original for the "Original" indicator
-    const displayContent = convertedValue ?? originalValue
-    const hasConversion = convertedValue != null && convertedValue !== originalValue
+    // When a converter is active, show a preview locally while the backend applies it
+    const hasConversion = activeConverterInstanceId != null && convertedValue != null
+    const displayContent = hasConversion ? convertedValue : originalValue
 
     // Add user message with attachments for display
     const userMessage: Message = {
@@ -194,8 +194,15 @@ export default function ChatWindow({
     setMessages(prev => [...prev, loadingMessage])
 
     try {
-      // Build message pieces from text + attachments
-      const pieces = await buildMessagePieces(displayContent, attachments)
+      // Build message pieces from text + attachments — always use original text
+      const pieces = await buildMessagePieces(originalValue, attachments)
+
+      // If a converter was previewed, set converted_value on the text piece directly.
+      // The backend skips converter application when converted_value is already set,
+      // but still stores converter_identifiers metadata.
+      if (hasConversion && pieces.length > 0 && pieces[0].data_type === 'text') {
+        pieces[0].converted_value = convertedValue
+      }
 
       // Create attack lazily on first message
       let currentAttackResultId = attackResultId
@@ -237,6 +244,7 @@ export default function ChatWindow({
       const effectiveConvId = currentActiveConversationId ?? currentConversationId
 
       // Send message to target
+      const converterIds = activeConverterInstanceId ? [activeConverterInstanceId] : undefined
       const response = await attacksApi.addMessage(currentAttackResultId!, {
         role: 'user',
         pieces,
@@ -244,8 +252,14 @@ export default function ChatWindow({
         target_registry_name: activeTarget.target_registry_name,
         target_conversation_id: effectiveConvId!,
         labels: labels ?? undefined,
+        converter_ids: converterIds,
       })
 
+      // Clear converter state after successful send
+      setConvertedValue(null)
+      setOriginalValue(null)
+      setActiveConverterInstanceId(null)
+
       // Only update displayed messages if the user is still viewing this conversation.
       // If they switched away the response is persisted server-side and will appear
       // when they navigate back.
@@ -466,9 +480,10 @@ export default function ChatWindow({
           onClose={() => setIsConverterPanelOpen(false)}
           previewText={chatInputText}
           activeInputTypes={chatInputText.trim() ? ['text', ...attachmentTypes] : attachmentTypes}
-          onUseConvertedValue={(original, converted) => {
+          onUseConvertedValue={(original, converted, converterInstanceId) => {
             setOriginalValue(original)
             setConvertedValue(converted)
+            setActiveConverterInstanceId(converterInstanceId)
           }}
         />
       )}
@@ -547,7 +562,7 @@ export default function ChatWindow({
           onAttachmentsChange={setAttachmentTypes}
           convertedValue={convertedValue}
           originalValue={originalValue}
-          onClearConversion={() => { setConvertedValue(null); setOriginalValue(null) }}
+          onClearConversion={() => { setConvertedValue(null); setOriginalValue(null); setActiveConverterInstanceId(null) }}
         />
       </div>
       {isPanelOpen && (
diff --git a/frontend/src/components/Chat/ConverterPanel.tsx b/frontend/src/components/Chat/ConverterPanel.tsx
index 4595ed0c66..014a4bef2c 100644
--- a/frontend/src/components/Chat/ConverterPanel.tsx
+++ b/frontend/src/components/Chat/ConverterPanel.tsx
@@ -10,7 +10,7 @@ interface ConverterPanelProps {
   onClose: () => void
   previewText?: string
   activeInputTypes?: string[]
-  onUseConvertedValue?: (original: string, converted: string) => void
+  onUseConvertedValue?: (original: string, converted: string, converterInstanceId: string) => void
 }
 
 export default function ConverterPanel({ onClose, previewText = '', activeInputTypes = ['text'], onUseConvertedValue }: ConverterPanelProps) {
@@ -21,6 +21,7 @@ export default function ConverterPanel({ onClose, previewText = '', activeInputT
   const [paramValues, setParamValues] = useState<Record<string, string>>({})
   const [paramsExpanded, setParamsExpanded] = useState(true)
   const [previewOutput, setPreviewOutput] = useState('')
+  const [previewConverterInstanceId, setPreviewConverterInstanceId] = useState<string | null>(null)
   const [isPreviewing, setIsPreviewing] = useState(false)
   const [previewError, setPreviewError] = useState<string | null>(null)
   const [isLoading, setIsLoading] = useState(true)
@@ -115,6 +116,7 @@ export default function ConverterPanel({ onClose, previewText = '', activeInputT
       })
 
       setPreviewOutput(previewResponse.converted_value)
+      setPreviewConverterInstanceId(createResponse.converter_id)
     } catch (err) {
       setPreviewError(toApiError(err).detail)
     } finally {
@@ -210,6 +212,9 @@ export default function ConverterPanel({ onClose, previewText = '', activeInputT
                     }
                   }
                   setParamValues(defaults)
+                  setPreviewOutput('')
+                  setPreviewConverterInstanceId(null)
+                  setPreviewError(null)
                 }}
                 onChange={(e) => setQuery((e.target as HTMLInputElement).value)}
                 placeholder="Search converters..."
@@ -353,11 +358,11 @@ export default function ConverterPanel({ onClose, previewText = '', activeInputT
                 </div>
               </div>
 
-              {previewOutput && (
+              {previewOutput && previewConverterInstanceId && (
                 <Button
                   appearance="primary"
                   size="small"
-                  onClick={() => onUseConvertedValue?.(previewText, previewOutput)}
+                  onClick={() => onUseConvertedValue?.(previewText, previewOutput, previewConverterInstanceId)}
                   disabled={!onUseConvertedValue}
                   data-testid="use-converted-btn"
                 >
diff --git a/pyrit/backend/services/attack_service.py b/pyrit/backend/services/attack_service.py
index 5bb4f6bbce..24775cdf8d 100644
--- a/pyrit/backend/services/attack_service.py
+++ b/pyrit/backend/services/attack_service.py
@@ -729,6 +729,18 @@ async def _update_attack_after_message_async(
                     children=new_children,
                 )
                 update_fields["attack_identifier"] = new_aid.to_dict()
+                # Also update atomic_attack_identifier so get_attack_strategy_identifier() sees the change
+                if ar.atomic_attack_identifier:
+                    atomic = ComponentIdentifier.from_dict(ar.atomic_attack_identifier.to_dict())
+                    atomic_children = dict(atomic.children)
+                    atomic_children["attack"] = new_aid
+                    new_atomic = ComponentIdentifier(
+                        class_name=atomic.class_name,
+                        class_module=atomic.class_module,
+                        params=dict(atomic.params),
+                        children=atomic_children,
+                    )
+                    update_fields["atomic_attack_identifier"] = new_atomic.to_dict()
 
         self._memory.update_attack_result_by_id(
             attack_result_id=attack_result_id,

From 47023cbbfbf8a461e965aa6106fe23f4b321df65 Mon Sep 17 00:00:00 2001
From: Bolor <bjagdagdorj@microsoft.com>
Date: Mon, 16 Mar 2026 16:31:34 -0700
Subject: [PATCH 13/13] small UI changes of icons

---
 frontend/src/components/Chat/ChatInputArea.tsx        | 4 ++--
 frontend/src/components/Chat/ConverterPanel.styles.ts | 2 +-
 frontend/src/components/Chat/ConverterPanel.tsx       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Chat/ChatInputArea.tsx b/frontend/src/components/Chat/ChatInputArea.tsx
index 5c2fcd5658..dd8850d92d 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, ArrowSyncRegular } from '@fluentui/react-icons'
+import { SendRegular, AttachRegular, DismissRegular, InfoRegular, AddRegular, CopyRegular, WarningRegular, SettingsRegular, ArrowShuffleRegular } from '@fluentui/react-icons'
 import { MessageAttachment, TargetInstance } from '../../types'
 import { useChatInputAreaStyles } from './ChatInputArea.styles'
 
@@ -278,7 +278,7 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
             <Button
               className={styles.iconButton}
               appearance={isConverterPanelOpen ? 'primary' : 'subtle'}
-              icon={<ArrowSyncRegular />}
+              icon={<ArrowShuffleRegular />}
               onClick={onToggleConverterPanel}
               disabled={disabled || !onToggleConverterPanel}
               data-testid="toggle-converter-panel-btn"
diff --git a/frontend/src/components/Chat/ConverterPanel.styles.ts b/frontend/src/components/Chat/ConverterPanel.styles.ts
index 34d8e87b78..35f2e97f7f 100644
--- a/frontend/src/components/Chat/ConverterPanel.styles.ts
+++ b/frontend/src/components/Chat/ConverterPanel.styles.ts
@@ -96,7 +96,7 @@ export const useConverterPanelStyles = makeStyles({
   },
   llmBadge: {
     display: 'inline-block',
-    marginRight: tokens.spacingHorizontalXXS,
+    marginLeft: tokens.spacingHorizontalXS,
     padding: `0 ${tokens.spacingHorizontalXXS}`,
     borderRadius: tokens.borderRadiusSmall,
     backgroundColor: tokens.colorPalettePurpleBackground2,
diff --git a/frontend/src/components/Chat/ConverterPanel.tsx b/frontend/src/components/Chat/ConverterPanel.tsx
index 014a4bef2c..8d6c6261cf 100644
--- a/frontend/src/components/Chat/ConverterPanel.tsx
+++ b/frontend/src/components/Chat/ConverterPanel.tsx
@@ -229,8 +229,8 @@ export default function ConverterPanel({ onClose, previewText = '', activeInputT
                   >
                     <Option value={converter.converter_type} text={converter.converter_type}>
                       <span className={styles.optionContent}>
-                        {converter.is_llm_based && <span className={styles.llmBadge}>LLM</span>}
                         {converter.converter_type}
+                        {converter.is_llm_based && <span className={styles.llmBadge}>LLM</span>}
                       </span>
                     </Option>
                   </Tooltip>