+
+
+
+
{children}
);
};
+ MockMainLayout.displayName = "MockMainLayout";
+ return {
+ __esModule: true,
+ default: MockMainLayout,
+ };
});
jest.mock("./components/Chat/ChatWindow", () => {
- return function MockChatWindow({
+ const MockChatWindow = ({
messages,
onSendMessage,
onReceiveMessage,
- onNewChat,
+ onNewAttack,
+ activeTarget,
+ conversationId,
+ onConversationCreated,
+ onSelectConversation,
}: {
- messages: Array<{ id: string; content: string }>;
+ messages: Array<{ id: string; content: string; isLoading?: boolean }>;
onSendMessage: (msg: { id: string; content: string }) => void;
- onReceiveMessage: (msg: { id: string; content: string }) => void;
- onNewChat: () => void;
- }) {
+ onReceiveMessage: (msg: { id: string; content: string; isLoading?: boolean }) => void;
+ onNewAttack: () => void;
+ activeTarget: unknown;
+ conversationId: string | null;
+ onConversationCreated: (attackResultId: string, conversationId: string) => void;
+ onSelectConversation: (convId: string) => void;
+ }) => {
return (
{messages.length}
+ {conversationId ?? "none"}
+ {activeTarget ? "yes" : "no"}
-
+ );
+ };
+ MockChatWindow.displayName = "MockChatWindow";
+ return {
+ __esModule: true,
+ default: MockChatWindow,
+ };
+});
+
+jest.mock("./components/Config/TargetConfig", () => {
+ const MockTargetConfig = ({
+ activeTarget,
+ onSetActiveTarget,
+ }: {
+ activeTarget: unknown;
+ onSetActiveTarget: (t: unknown) => void;
+ }) => {
+ return (
+
+
+ {(activeTarget as { target_registry_name?: string })?.target_registry_name ?? "none"}
+
+
+
+ );
+ };
+ MockTargetConfig.displayName = "MockTargetConfig";
+ return {
+ __esModule: true,
+ default: MockTargetConfig,
+ };
+});
+
+jest.mock("./components/History/AttackHistory", () => {
+ const MockAttackHistory = ({
+ onOpenAttack,
+ }: {
+ onOpenAttack: (attackResultId: string) => void;
+ }) => {
+ return (
+
+
);
};
+ MockAttackHistory.displayName = "MockAttackHistory";
+ return {
+ __esModule: true,
+ default: MockAttackHistory,
+ };
});
describe("App", () => {
@@ -81,20 +219,17 @@ describe("App", () => {
it("toggles theme when onToggleTheme is called", () => {
render(
);
- // Initially dark mode
expect(screen.getByTestId("main-layout")).toHaveAttribute(
"data-dark-mode",
"true"
);
- // Toggle to light mode
fireEvent.click(screen.getByTestId("toggle-theme"));
expect(screen.getByTestId("main-layout")).toHaveAttribute(
"data-dark-mode",
"false"
);
- // Toggle back to dark mode
fireEvent.click(screen.getByTestId("toggle-theme"));
expect(screen.getByTestId("main-layout")).toHaveAttribute(
"data-dark-mode",
@@ -121,16 +256,190 @@ describe("App", () => {
expect(screen.getByTestId("message-count")).toHaveTextContent("1");
});
- it("clears messages when handleNewChat is called", () => {
+ it("clears messages when handleNewAttack is called", () => {
render(
);
- // Add some messages first
fireEvent.click(screen.getByTestId("send-message"));
fireEvent.click(screen.getByTestId("receive-message"));
expect(screen.getByTestId("message-count")).toHaveTextContent("2");
- // Clear messages
- fireEvent.click(screen.getByTestId("new-chat"));
+ fireEvent.click(screen.getByTestId("new-attack"));
expect(screen.getByTestId("message-count")).toHaveTextContent("0");
});
+
+ it("starts in chat view", () => {
+ render(
);
+
+ expect(screen.getByTestId("main-layout")).toHaveAttribute(
+ "data-current-view",
+ "chat"
+ );
+ expect(screen.getByTestId("chat-window")).toBeInTheDocument();
+ });
+
+ it("switches to config view", () => {
+ render(
);
+
+ fireEvent.click(screen.getByTestId("nav-config"));
+
+ expect(screen.getByTestId("main-layout")).toHaveAttribute(
+ "data-current-view",
+ "config"
+ );
+ expect(screen.getByTestId("target-config")).toBeInTheDocument();
+ });
+
+ it("switches back to chat from config", () => {
+ render(
);
+
+ fireEvent.click(screen.getByTestId("nav-config"));
+ expect(screen.getByTestId("target-config")).toBeInTheDocument();
+
+ fireEvent.click(screen.getByTestId("nav-chat"));
+ expect(screen.getByTestId("chat-window")).toBeInTheDocument();
+ });
+
+ it("sets conversationId from chat window", () => {
+ render(
);
+
+ expect(screen.getByTestId("conversation-id")).toHaveTextContent("none");
+
+ fireEvent.click(screen.getByTestId("set-conversation"));
+ expect(screen.getByTestId("conversation-id")).toHaveTextContent("conv-123");
+ });
+
+ it("clears conversationId on new attack", () => {
+ render(
);
+
+ fireEvent.click(screen.getByTestId("set-conversation"));
+ expect(screen.getByTestId("conversation-id")).toHaveTextContent("conv-123");
+
+ fireEvent.click(screen.getByTestId("new-attack"));
+ expect(screen.getByTestId("conversation-id")).toHaveTextContent("none");
+ });
+
+ it("sets active target from config page and passes to chat", () => {
+ render(
);
+
+ // No target initially
+ expect(screen.getByTestId("has-target")).toHaveTextContent("no");
+
+ // Switch to config and set target
+ fireEvent.click(screen.getByTestId("nav-config"));
+ fireEvent.click(screen.getByTestId("set-target"));
+
+ // Switch back to chat — target should be present
+ fireEvent.click(screen.getByTestId("nav-chat"));
+ expect(screen.getByTestId("has-target")).toHaveTextContent("yes");
+ });
+
+ it("switches to history view", () => {
+ render(
);
+
+ fireEvent.click(screen.getByTestId("nav-history"));
+
+ expect(screen.getByTestId("main-layout")).toHaveAttribute(
+ "data-current-view",
+ "history"
+ );
+ expect(screen.getByTestId("attack-history")).toBeInTheDocument();
+ });
+
+ it("opens attack from history and switches to chat", async () => {
+ mockGetAttack.mockResolvedValue({ attack_result_id: "ar-attack-1", conversation_id: "attack-conv-1", labels: { operator: "roakey" } });
+ render(
);
+
+ fireEvent.click(screen.getByTestId("nav-history"));
+ fireEvent.click(screen.getByTestId("open-attack"));
+
+ expect(screen.getByTestId("main-layout")).toHaveAttribute(
+ "data-current-view",
+ "chat"
+ );
+ await waitFor(() => expect(mockGetAttack).toHaveBeenCalledWith("ar-attack-1"));
+ await waitFor(() => expect(screen.getByTestId("conversation-id")).toHaveTextContent("attack-conv-1"));
+ });
+
+ it("handles failed attack open gracefully", async () => {
+ mockGetAttack.mockRejectedValue(new Error("Not found"));
+ render(
);
+
+ fireEvent.click(screen.getByTestId("nav-history"));
+ fireEvent.click(screen.getByTestId("open-attack"));
+
+ // Should switch to chat view even on error
+ expect(screen.getByTestId("main-layout")).toHaveAttribute("data-current-view", "chat");
+ await waitFor(() => expect(mockGetAttack).toHaveBeenCalledWith("ar-attack-1"));
+ // Conversation should be cleared on error
+ await waitFor(() => expect(screen.getByTestId("conversation-id")).toHaveTextContent("none"));
+ });
+
+ it("replaces loading indicator with received message", () => {
+ render(
);
+
+ // Send a message, then a loading indicator, then a real response
+ fireEvent.click(screen.getByTestId("send-message"));
+ expect(screen.getByTestId("message-count")).toHaveTextContent("1");
+
+ // Receive replaces loading messages — we can't simulate isLoading from mock,
+ // but we verify the receive handler adds to messages
+ fireEvent.click(screen.getByTestId("receive-message"));
+ expect(screen.getByTestId("message-count")).toHaveTextContent("2");
+ });
+
+ it("replaces loading message when response arrives", () => {
+ render(
);
+
+ // Send a user message
+ fireEvent.click(screen.getByTestId("send-message"));
+ expect(screen.getByTestId("message-count")).toHaveTextContent("1");
+
+ // Receive a loading indicator
+ fireEvent.click(screen.getByTestId("receive-loading"));
+ expect(screen.getByTestId("message-count")).toHaveTextContent("2");
+
+ // Replace loading with actual response
+ fireEvent.click(screen.getByTestId("receive-message"));
+ // Loading message should be replaced, not appended
+ expect(screen.getByTestId("message-count")).toHaveTextContent("2");
+ });
+
+ it("merges default labels from backend version API", async () => {
+ mockedVersionApi.getVersion.mockResolvedValueOnce({
+ version: "2.0.0",
+ default_labels: { operator: "default_user", custom: "value" },
+ });
+
+ render(
);
+
+ // The version API is called on mount and labels get merged
+ await waitFor(() => {
+ expect(mockedVersionApi.getVersion).toHaveBeenCalled();
+ });
+ });
+
+ it("stores attack target when conversation is created with active target", () => {
+ render(
);
+
+ // Set a target first
+ fireEvent.click(screen.getByTestId("nav-config"));
+ fireEvent.click(screen.getByTestId("set-target"));
+ fireEvent.click(screen.getByTestId("nav-chat"));
+
+ // Create a conversation (which should store target info)
+ fireEvent.click(screen.getByTestId("set-conversation"));
+ expect(screen.getByTestId("conversation-id")).toHaveTextContent("conv-123");
+ });
+
+ it("sets active conversation when onSelectConversation is called", () => {
+ render(
);
+
+ // First create a conversation to have an attack
+ fireEvent.click(screen.getByTestId("set-conversation"));
+ expect(screen.getByTestId("conversation-id")).toHaveTextContent("conv-123");
+
+ // Now select a different conversation
+ fireEvent.click(screen.getByTestId("select-conversation"));
+ // The component re-renders with the new conversation ID
+ });
});
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f7f7e13f1e..cade2ced3e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,43 +1,215 @@
-import { useState } from 'react'
+import { useState, useCallback, useEffect } from 'react'
import { FluentProvider, webLightTheme, webDarkTheme } from '@fluentui/react-components'
import MainLayout from './components/Layout/MainLayout'
import ChatWindow from './components/Chat/ChatWindow'
-import { Message } from './types'
+import TargetConfig from './components/Config/TargetConfig'
+import AttackHistory from './components/History/AttackHistory'
+import { DEFAULT_HISTORY_FILTERS } from './components/History/historyFilters'
+import type { HistoryFilters } from './components/History/historyFilters'
+import { ConnectionBanner } from './components/ConnectionBanner'
+import { ErrorBoundary } from './components/ErrorBoundary'
+import { ConnectionHealthProvider, useConnectionHealth } from './hooks/useConnectionHealth'
+import { DEFAULT_GLOBAL_LABELS } from './components/Labels/labelDefaults'
+import type { ViewName } from './components/Sidebar/Navigation'
+import type { Message, TargetInstance, TargetInfo } from './types'
+import { attacksApi, versionApi } from './services/api'
+
+const AUTO_DISMISS_MS = 5_000
+
+function ConnectionBannerContainer() {
+ const { status, reconnectCount } = useConnectionHealth()
+ const [showReconnected, setShowReconnected] = useState(false)
+
+ useEffect(() => {
+ if (reconnectCount > 0) {
+ setShowReconnected(true)
+ const timer = setTimeout(() => setShowReconnected(false), AUTO_DISMISS_MS)
+ return () => clearTimeout(timer)
+ }
+ }, [reconnectCount])
+
+ if (status === 'connected' && !showReconnected) {
+ return null
+ }
+
+ return
+}
function App() {
const [messages, setMessages] = useState
([])
const [isDarkMode, setIsDarkMode] = useState(true)
+ const [currentView, setCurrentView] = useState('chat')
+ const [activeTarget, setActiveTarget] = useState(null)
+ const [globalLabels, setGlobalLabels] = useState>({ ...DEFAULT_GLOBAL_LABELS })
+ /** True while loading a historical attack from the history view */
+ const [isLoadingAttack, setIsLoadingAttack] = useState(false)
+ /** Persisted filter state for the history view */
+ const [historyFilters, setHistoryFilters] = useState({ ...DEFAULT_HISTORY_FILTERS })
+
+ // Fetch default labels from backend configuration on startup
+ useEffect(() => {
+ versionApi.getVersion()
+ .then((data) => {
+ if (data.default_labels && Object.keys(data.default_labels).length > 0) {
+ setGlobalLabels(prev => ({ ...prev, ...data.default_labels }))
+ }
+ })
+ .catch(() => { /* version fetch handled elsewhere */ })
+ }, [])
+
+ // When the user switches to a genuinely different target, start a fresh attack.
+ // Just re-selecting the same target (or viewing config without changing) keeps
+ // the current conversation intact so the user can branch from it.
+ const handleSetActiveTarget = useCallback((target: TargetInstance) => {
+ setActiveTarget(prev => {
+ const isSame = prev &&
+ prev.target_registry_name === target.target_registry_name &&
+ prev.target_type === target.target_type &&
+ (prev.endpoint ?? '') === (target.endpoint ?? '') &&
+ (prev.model_name ?? '') === (target.model_name ?? '')
+ if (isSame) return prev
+ // Switching targets no longer clears the loaded attack. The cross-target
+ // guard in ChatWindow prevents sending to a mismatched target, and the
+ // backend enforces this server-side as well. Clearing state here was
+ // confusing because navigating to config to pick the *correct* target
+ // would wipe the conversation the user was trying to continue.
+ return target
+ })
+ }, [])
+ /** The AttackResult's primary key (set on first message). */
+ const [attackResultId, setAttackResultId] = useState(null)
+ /** The attack's primary conversation_id (set on first message). */
+ const [conversationId, setConversationId] = useState(null)
+ /** The currently active conversation (may be main or a related conversation). */
+ const [activeConversationId, setActiveConversationId] = useState(null)
+ /** Labels that the currently loaded attack was created with (for operator locking). */
+ const [attackLabels, setAttackLabels] = useState | null>(null)
+ /** Target info from the currently loaded historical attack (for cross-target guard). */
+ const [attackTarget, setAttackTarget] = useState(null)
+ /** Number of related conversations for the currently loaded attack. */
+ const [relatedConversationCount, setRelatedConversationCount] = useState(0)
const handleSendMessage = (message: Message) => {
setMessages(prev => [...prev, message])
}
const handleReceiveMessage = (message: Message) => {
- setMessages(prev => [...prev, message])
+ setMessages(prev => {
+ // If the last message is a loading indicator, replace it
+ if (prev.length > 0 && prev[prev.length - 1].isLoading) {
+ return [...prev.slice(0, -1), message]
+ }
+ return [...prev, message]
+ })
}
- const handleNewChat = () => {
+ const clearAttackState = useCallback(() => {
setMessages([])
+ setAttackResultId(null)
+ setConversationId(null)
+ setActiveConversationId(null)
+ setAttackLabels(null)
+ setAttackTarget(null)
+ setRelatedConversationCount(0)
+ }, [])
+
+ const handleNewAttack = () => {
+ clearAttackState()
}
+ const handleConversationCreated = useCallback((arId: string, convId: string) => {
+ setAttackResultId(arId)
+ setConversationId(convId)
+ setActiveConversationId(convId)
+ // New attack was created by the current user — use their global labels
+ setAttackLabels(null)
+ // Record the target used for this attack so the cross-target guard
+ // fires if the user switches targets mid-conversation.
+ if (activeTarget) {
+ const { target_type, endpoint, model_name } = activeTarget
+ setAttackTarget({ target_type, endpoint, model_name })
+ }
+ }, [activeTarget])
+
+ const handleSelectConversation = useCallback((convId: string) => {
+ setActiveConversationId(convId)
+ // Messages will be loaded by ChatWindow's useEffect
+ }, [])
+
+ const handleOpenAttack = useCallback(async (openAttackResultId: string) => {
+ setMessages([])
+ setAttackResultId(openAttackResultId)
+ setIsLoadingAttack(true)
+ setCurrentView('chat')
+ // Fetch attack info to get conversation_id and stored labels (for operator locking)
+ try {
+ const attack = await attacksApi.getAttack(openAttackResultId)
+ setConversationId(attack.conversation_id)
+ setActiveConversationId(attack.conversation_id)
+ setAttackLabels(attack.labels ?? {})
+ setAttackTarget(attack.target ?? null)
+ setRelatedConversationCount(attack.related_conversation_ids?.length ?? 0)
+ } catch {
+ clearAttackState()
+ } finally {
+ setIsLoadingAttack(false)
+ }
+ }, [clearAttackState])
+
const toggleTheme = () => {
setIsDarkMode(!isDarkMode)
}
return (
-
-
-
-
-
+
+
+
+
+
+ {currentView === 'chat' && (
+
+ )}
+ {currentView === 'config' && (
+
+ )}
+ {currentView === 'history' && (
+
+ )}
+
+
+
+
)
}
diff --git a/frontend/src/components/Chat/InputBox.test.tsx b/frontend/src/components/Chat/ChatInputArea.test.tsx
similarity index 62%
rename from frontend/src/components/Chat/InputBox.test.tsx
rename to frontend/src/components/Chat/ChatInputArea.test.tsx
index 17b28910e4..c2712acddf 100644
--- a/frontend/src/components/Chat/InputBox.test.tsx
+++ b/frontend/src/components/Chat/ChatInputArea.test.tsx
@@ -1,7 +1,9 @@
+import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { FluentProvider, webLightTheme } from "@fluentui/react-components";
-import InputBox from "./InputBox";
+import ChatInputArea from "./ChatInputArea";
+import type { ChatInputAreaHandle } from "./ChatInputArea";
// Wrapper component for Fluent UI context
const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
@@ -11,7 +13,7 @@ const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
// Helper to get the send button specifically
const getSendButton = () => screen.getByRole("button", { name: /send/i });
-describe("InputBox", () => {
+describe("ChatInputArea", () => {
const defaultProps = {
onSend: jest.fn(),
disabled: false,
@@ -24,7 +26,7 @@ describe("InputBox", () => {
it("should render input area and send button", () => {
render(
-
+
);
@@ -38,7 +40,7 @@ describe("InputBox", () => {
render(
-
+
);
@@ -52,7 +54,7 @@ describe("InputBox", () => {
it("should disable input when disabled prop is true", () => {
render(
-
+
);
@@ -63,7 +65,7 @@ describe("InputBox", () => {
it("should disable send button when input is empty", () => {
render(
-
+
);
@@ -76,7 +78,7 @@ describe("InputBox", () => {
render(
-
+
);
@@ -93,7 +95,7 @@ describe("InputBox", () => {
render(
-
+
);
@@ -112,7 +114,7 @@ describe("InputBox", () => {
render(
-
+
);
@@ -129,7 +131,7 @@ describe("InputBox", () => {
render(
-
+
);
@@ -146,7 +148,7 @@ describe("InputBox", () => {
render(
-
+
);
@@ -162,7 +164,7 @@ describe("InputBox", () => {
render(
-
+
);
@@ -173,7 +175,7 @@ describe("InputBox", () => {
it("should have file input for attachments", () => {
render(
-
+
);
@@ -186,7 +188,7 @@ describe("InputBox", () => {
render(
-
+
);
@@ -210,7 +212,7 @@ describe("InputBox", () => {
render(
-
+
);
@@ -231,7 +233,7 @@ describe("InputBox", () => {
render(
-
+
);
@@ -264,7 +266,7 @@ describe("InputBox", () => {
render(
-
+
);
@@ -292,7 +294,7 @@ describe("InputBox", () => {
render(
-
+
);
@@ -313,7 +315,7 @@ describe("InputBox", () => {
render(
-
+
);
@@ -329,12 +331,64 @@ describe("InputBox", () => {
});
});
+ it("should show single-turn warning when target does not support multiturn chat", () => {
+ render(
+
+
+
+ );
+
+ expect(
+ screen.getByText(
+ /does not track conversation history/
+ )
+ ).toBeInTheDocument();
+ });
+
+ it("should not show single-turn warning when target supports multiturn chat", () => {
+ render(
+
+
+
+ );
+
+ expect(
+ screen.queryByText(/does not track conversation history/)
+ ).not.toBeInTheDocument();
+ });
+
+ it("should not show single-turn warning when no active target", () => {
+ render(
+
+
+
+ );
+
+ expect(
+ screen.queryByText(/does not track conversation history/)
+ ).not.toBeInTheDocument();
+ });
+
it("should handle multiple file attachments", async () => {
const user = userEvent.setup();
render(
-
+
);
@@ -355,4 +409,96 @@ describe("InputBox", () => {
expect(screen.getByText(/audio\.mp3/)).toBeInTheDocument();
});
});
+
+ it("should show attachment chip when addAttachment is called via ref", async () => {
+ const ref = React.createRef();
+
+ render(
+
+
+
+ );
+
+ // Programmatically add an attachment via the ref
+ React.act(() => {
+ ref.current?.addAttachment({
+ type: "image",
+ name: "forwarded.png",
+ url: "data:image/png;base64,abc=",
+ mimeType: "image/png",
+ size: 512,
+ });
+ });
+
+ await waitFor(() => {
+ expect(screen.getByText(/forwarded\.png/)).toBeInTheDocument();
+ });
+
+ // Send button should be enabled since there's an attachment
+ expect(screen.getByTitle("Send message")).toBeEnabled();
+ });
+
+ it("should show single-turn banner when singleTurnLimitReached is true", () => {
+ render(
+
+
+
+ );
+
+ expect(screen.getByTestId("single-turn-banner")).toBeInTheDocument();
+ expect(screen.getByText(/only supports single-turn/)).toBeInTheDocument();
+ expect(screen.getByTestId("new-conversation-btn")).toBeInTheDocument();
+ // Input area should not be rendered
+ expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+ });
+
+ it("should call onNewConversation when New Conversation button clicked", async () => {
+ const user = userEvent.setup();
+ const onNewConversation = jest.fn();
+
+ render(
+
+
+
+ );
+
+ await user.click(screen.getByTestId("new-conversation-btn"));
+ expect(onNewConversation).toHaveBeenCalledTimes(1);
+ });
+
+ it("should not show New Conversation button when onNewConversation is not provided", () => {
+ render(
+
+
+
+ );
+
+ expect(screen.getByTestId("single-turn-banner")).toBeInTheDocument();
+ expect(screen.queryByTestId("new-conversation-btn")).not.toBeInTheDocument();
+ });
+
+ it("should show normal input when singleTurnLimitReached is false", () => {
+ render(
+
+
+
+ );
+
+ expect(screen.queryByTestId("single-turn-banner")).not.toBeInTheDocument();
+ expect(screen.getByRole("textbox")).toBeInTheDocument();
+ });
});
diff --git a/frontend/src/components/Chat/ChatInputArea.tsx b/frontend/src/components/Chat/ChatInputArea.tsx
new file mode 100644
index 0000000000..d94275d14c
--- /dev/null
+++ b/frontend/src/components/Chat/ChatInputArea.tsx
@@ -0,0 +1,489 @@
+import { useState, useEffect, useRef, forwardRef, useImperativeHandle, KeyboardEvent } from 'react'
+import {
+ makeStyles,
+ Button,
+ tokens,
+ Caption1,
+ Tooltip,
+ Text,
+} from '@fluentui/react-components'
+import { SendRegular, AttachRegular, DismissRegular, InfoRegular, AddRegular, CopyRegular, WarningRegular, SettingsRegular } from '@fluentui/react-icons'
+import { MessageAttachment, TargetInstance } from '../../types'
+
+const useStyles = makeStyles({
+ root: {
+ padding: `${tokens.spacingVerticalXL} ${tokens.spacingHorizontalXXL}`,
+ backgroundColor: tokens.colorNeutralBackground2,
+ },
+ inputContainer: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: tokens.spacingVerticalM,
+ maxWidth: '900px',
+ margin: '0 auto',
+ },
+ attachmentsContainer: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ gap: tokens.spacingHorizontalS,
+ paddingLeft: tokens.spacingHorizontalL,
+ paddingRight: tokens.spacingHorizontalL,
+ paddingTop: tokens.spacingVerticalS,
+ },
+ attachmentChip: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: tokens.spacingHorizontalXXS,
+ padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
+ backgroundColor: tokens.colorNeutralBackground4,
+ borderRadius: tokens.borderRadiusLarge,
+ },
+ inputWrapper: {
+ position: 'relative',
+ display: 'flex',
+ flexDirection: 'column',
+ backgroundColor: tokens.colorNeutralBackground3,
+ borderRadius: '28px',
+ border: `1px solid ${tokens.colorNeutralStroke1}`,
+ transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+ ':focus-within': {
+ borderTopColor: tokens.colorBrandStroke1,
+ borderRightColor: tokens.colorBrandStroke1,
+ borderBottomColor: tokens.colorBrandStroke1,
+ borderLeftColor: tokens.colorBrandStroke1,
+ boxShadow: `0 0 0 2px ${tokens.colorBrandBackground2}`,
+ },
+ },
+ inputRow: {
+ display: 'flex',
+ alignItems: 'center',
+ padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalL}`,
+ },
+ textInput: {
+ flex: 1,
+ backgroundColor: 'transparent',
+ border: 'none',
+ outline: 'none',
+ fontSize: tokens.fontSizeBase300,
+ fontFamily: tokens.fontFamilyBase,
+ color: tokens.colorNeutralForeground1,
+ resize: 'none',
+ minHeight: '24px',
+ maxHeight: '96px',
+ overflowY: 'auto',
+ '::placeholder': {
+ color: tokens.colorNeutralForeground4,
+ },
+ '::-webkit-scrollbar': {
+ width: '8px',
+ },
+ '::-webkit-scrollbar-track': {
+ backgroundColor: 'transparent',
+ },
+ '::-webkit-scrollbar-thumb': {
+ backgroundColor: tokens.colorNeutralStroke1,
+ borderRadius: '4px',
+ },
+ },
+ iconButtonsLeft: {
+ display: 'flex',
+ gap: tokens.spacingHorizontalXS,
+ marginRight: tokens.spacingHorizontalS,
+ },
+ iconButtonsRight: {
+ display: 'flex',
+ gap: tokens.spacingHorizontalXS,
+ marginLeft: tokens.spacingHorizontalS,
+ },
+ iconButton: {
+ minWidth: '32px',
+ width: '32px',
+ height: '32px',
+ padding: 0,
+ borderRadius: '50%',
+ },
+ sendButton: {
+ minWidth: '32px',
+ width: '32px',
+ height: '32px',
+ padding: 0,
+ borderRadius: '50%',
+ },
+ singleTurnWarning: {
+ display: 'flex',
+ alignItems: 'center',
+ color: tokens.colorPaletteYellowForeground2,
+ },
+ singleTurnBanner: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: tokens.spacingHorizontalM,
+ padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalL}`,
+ backgroundColor: tokens.colorNeutralBackground3,
+ borderRadius: '28px',
+ border: `1px solid ${tokens.colorNeutralStroke1}`,
+ },
+ singleTurnText: {
+ color: tokens.colorNeutralForeground2,
+ },
+ noTargetBanner: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: tokens.spacingHorizontalM,
+ padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalL}`,
+ backgroundColor: tokens.colorPaletteRedBackground1,
+ borderRadius: '28px',
+ border: `1px solid ${tokens.colorPaletteRedBorder1}`,
+ },
+ noTargetText: {
+ color: tokens.colorPaletteRedForeground1,
+ fontWeight: tokens.fontWeightSemibold as unknown as string,
+ },
+})
+
+// ---------------------------------------------------------------------------
+// Banner sub-components
+// ---------------------------------------------------------------------------
+
+interface NoTargetBannerProps {
+ className: string
+ textClassName: string
+ onConfigureTarget?: () => void
+}
+
+function NoTargetBanner({ className, textClassName, onConfigureTarget }: NoTargetBannerProps) {
+ return (
+
+
+
+ No target selected
+
+ {onConfigureTarget && (
+ }
+ onClick={onConfigureTarget}
+ data-testid="configure-target-input-btn"
+ >
+ Configure Target
+
+ )}
+
+ )
+}
+
+interface OperatorLockedBannerProps {
+ className: string
+ textClassName: string
+ attackOperator?: string
+ onUseAsTemplate?: () => void
+}
+
+function OperatorLockedBanner({ className, textClassName, attackOperator, onUseAsTemplate }: OperatorLockedBannerProps) {
+ return (
+
+
+
+ This conversation belongs to operator: {attackOperator}.
+
+ {onUseAsTemplate && (
+ }
+ onClick={onUseAsTemplate}
+ data-testid="use-as-template-btn"
+ >
+ Continue with your target
+
+ )}
+
+ )
+}
+
+interface CrossTargetBannerProps {
+ className: string
+ textClassName: string
+ onUseAsTemplate?: () => void
+}
+
+function CrossTargetBanner({ className, textClassName, onUseAsTemplate }: CrossTargetBannerProps) {
+ return (
+
+
+
+ This attack uses a different target. Continue with your target to keep the conversation.
+
+ {onUseAsTemplate && (
+ }
+ onClick={onUseAsTemplate}
+ data-testid="use-as-template-btn"
+ >
+ Continue with your target
+
+ )}
+
+ )
+}
+
+interface SingleTurnBannerProps {
+ className: string
+ textClassName: string
+ onNewConversation?: () => void
+}
+
+function SingleTurnBanner({ className, textClassName, onNewConversation }: SingleTurnBannerProps) {
+ return (
+
+
+
+ This target only supports single-turn conversations.
+
+ {onNewConversation && (
+ }
+ onClick={onNewConversation}
+ data-testid="new-conversation-btn"
+ >
+ New Conversation
+
+ )}
+
+ )
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export interface ChatInputAreaHandle {
+ addAttachment: (att: MessageAttachment) => void
+ setText: (text: string) => void
+}
+
+interface ChatInputAreaProps {
+ onSend: (originalValue: string, convertedValue: string | undefined, attachments: MessageAttachment[]) => void
+ disabled?: boolean
+ activeTarget?: TargetInstance | null
+ singleTurnLimitReached?: boolean
+ onNewConversation?: () => void
+ operatorLocked?: boolean
+ crossTargetLocked?: boolean
+ onUseAsTemplate?: () => void
+ attackOperator?: string
+ noTargetSelected?: boolean
+ onConfigureTarget?: () => void
+}
+
+const ChatInputArea = forwardRef(function ChatInputArea({ onSend, disabled = false, activeTarget, singleTurnLimitReached = false, onNewConversation, operatorLocked = false, crossTargetLocked = false, onUseAsTemplate, attackOperator, noTargetSelected = false, onConfigureTarget }, ref) {
+ const styles = useStyles()
+ const [input, setInput] = useState('')
+ const [attachments, setAttachments] = useState([])
+ const fileInputRef = useRef(null)
+ const textareaRef = useRef(null)
+
+ useImperativeHandle(ref, () => ({
+ addAttachment: (att: MessageAttachment) => {
+ setAttachments(prev => [...prev, att])
+ },
+ setText: (text: string) => {
+ setInput(text)
+ },
+ }))
+
+ const handleFileSelect = async (e: React.ChangeEvent) => {
+ const files = e.target.files
+ if (!files) return
+
+ const newAttachments: MessageAttachment[] = []
+
+ for (let i = 0; i < files.length; i++) {
+ const file = files[i]
+ const url = URL.createObjectURL(file)
+
+ let type: MessageAttachment['type'] = 'file'
+ if (file.type.startsWith('image/')) type = 'image'
+ else if (file.type.startsWith('audio/')) type = 'audio'
+ else if (file.type.startsWith('video/')) type = 'video'
+
+ newAttachments.push({
+ type,
+ name: file.name,
+ url,
+ mimeType: file.type,
+ size: file.size,
+ file,
+ })
+ }
+
+ setAttachments([...attachments, ...newAttachments])
+ if (fileInputRef.current) {
+ fileInputRef.current.value = ''
+ }
+ }
+
+ const removeAttachment = (index: number) => {
+ const newAttachments = [...attachments]
+ URL.revokeObjectURL(newAttachments[index].url)
+ newAttachments.splice(index, 1)
+ setAttachments(newAttachments)
+ }
+
+ const handleSend = () => {
+ if ((input || attachments.length > 0) && !disabled) {
+ onSend(input, undefined, attachments)
+ setInput('')
+ setAttachments([])
+ if (textareaRef.current) {
+ textareaRef.current.style.height = 'auto'
+ }
+ }
+ }
+
+ // Re-focus the textarea after sending completes (disabled goes false)
+ useEffect(() => {
+ if (!disabled && textareaRef.current) {
+ textareaRef.current.focus()
+ }
+ }, [disabled])
+
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault()
+ handleSend()
+ }
+ }
+
+ // Auto-resize textarea whenever input changes (covers paste, setText, etc.)
+ useEffect(() => {
+ if (textareaRef.current) {
+ textareaRef.current.style.height = 'auto'
+ textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 96) + 'px'
+ }
+ }, [input])
+
+ const handleInput = (e: React.ChangeEvent) => {
+ setInput(e.target.value)
+ }
+
+ const formatFileSize = (bytes: number) => {
+ if (bytes < 1024) return bytes + ' B'
+ if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+ return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+ }
+
+ return (
+
+
+ {noTargetSelected ? (
+
+ ) : operatorLocked ? (
+
+ ) : crossTargetLocked ? (
+
+ ) : singleTurnLimitReached ? (
+
+ ) : (
+ <>
+
+
+ {attachments.length > 0 && (
+
+ {attachments.map((att, index) => (
+
+
+ {att.type === 'image' && '🖼️'}
+ {att.type === 'audio' && '🎵'}
+ {att.type === 'video' && '🎥'}
+ {att.type === 'file' && '📄'}
+ {' '}{att.name} ({formatFileSize(att.size)})
+
+ }
+ onClick={() => removeAttachment(index)}
+ />
+
+ ))}
+
+ )}
+
+
+ }
+ onClick={() => fileInputRef.current?.click()}
+ disabled={disabled}
+ title="Attach files"
+ />
+
+
+
+ {activeTarget && activeTarget.supports_multi_turn === false && (
+
+
+
+
+
+ )}
+ }
+ onClick={handleSend}
+ disabled={disabled || (!input && attachments.length === 0)}
+ title="Send message"
+ />
+
+
+
+
+ )}
+
+
-
-
-
PyRIT Frontend
+
+
+
+
PyRIT Attack
+ {activeTarget ? (
+
+ →
+
+
+ {activeTarget.target_type}
+ {activeTarget.model_name ? ` (${activeTarget.model_name})` : ''}
+
+
+
+ ) : (
+
+ No target selected
+
+ )}
+ {labels && onLabelsChange && (
+
+ )}
+
+
+
+ }
+ onClick={() => setIsPanelOpen(!isPanelOpen)}
+ disabled={!attackResultId}
+ data-testid="toggle-panel-btn"
+ />
+
+ }
+ onClick={() => { setIsPanelOpen(false); onNewAttack() }}
+ disabled={!attackResultId}
+ data-testid="new-attack-btn"
+ >
+ New Attack
+
+
-
}
- onClick={onNewChat}
- >
- New Chat
-
+
+
onNavigate?.('config') : undefined}
+ />
-
-
+ {isPanelOpen && (
+
setIsPanelOpen(false)}
+ locked={!activeTarget || isOperatorLocked || isCrossTargetLocked}
+ refreshKey={panelRefreshKey}
+ />
+ )}
)
}
diff --git a/frontend/src/components/Chat/ConversationPanel.test.tsx b/frontend/src/components/Chat/ConversationPanel.test.tsx
new file mode 100644
index 0000000000..d7c8f134bb
--- /dev/null
+++ b/frontend/src/components/Chat/ConversationPanel.test.tsx
@@ -0,0 +1,430 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { FluentProvider, webLightTheme } from "@fluentui/react-components";
+import ConversationPanel from "./ConversationPanel";
+import { attacksApi } from "../../services/api";
+
+jest.mock("../../services/api", () => ({
+ attacksApi: {
+ getConversations: jest.fn(),
+ createConversation: jest.fn(),
+ },
+}));
+
+const mockedAttacksApi = attacksApi as jest.Mocked
;
+
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({
+ children,
+}) => {children};
+
+const defaultProps = {
+ attackResultId: "ar-attack-123",
+ activeConversationId: "attack-123",
+ onSelectConversation: jest.fn(),
+ onNewConversation: jest.fn(),
+ onChangeMainConversation: jest.fn(),
+ onClose: jest.fn(),
+};
+
+describe("ConversationPanel", () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ // -----------------------------------------------------------------------
+ // Basic rendering
+ // -----------------------------------------------------------------------
+
+ it("should render the panel header", async () => {
+ mockedAttacksApi.getConversations.mockResolvedValue({
+ attack_result_id: "ar-attack-123",
+ main_conversation_id: "attack-123",
+ conversations: [],
+ });
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByText("Attack Conversations")).toBeInTheDocument();
+ await waitFor(() => {
+ expect(mockedAttacksApi.getConversations).toHaveBeenCalledTimes(1);
+ });
+ });
+
+ it("should show empty state when no conversations", async () => {
+ mockedAttacksApi.getConversations.mockResolvedValue({
+ attack_result_id: "ar-attack-123",
+ main_conversation_id: "attack-123",
+ conversations: [],
+ });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("No related conversations")).toBeInTheDocument();
+ });
+ });
+
+ it("should show empty state when no attack is active", async () => {
+ render(
+
+
+
+ );
+
+ expect(
+ screen.getByText("Start an attack to see conversations")
+ ).toBeInTheDocument();
+ });
+
+ // -----------------------------------------------------------------------
+ // Conversation list
+ // -----------------------------------------------------------------------
+
+ it("should display related conversations", async () => {
+ mockedAttacksApi.getConversations.mockResolvedValue({
+ attack_result_id: "ar-attack-123",
+ main_conversation_id: "attack-123",
+ conversations: [
+ {
+ conversation_id: "attack-123",
+ message_count: 5,
+ last_message_preview: "Hello world",
+ created_at: "2026-02-18T10:30:00Z",
+ },
+ {
+ conversation_id: "branch-1",
+ message_count: 2,
+ last_message_preview: "Branched",
+ created_at: "2026-02-18T11:00:00Z",
+ },
+ ],
+ });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("attack-123")).toBeInTheDocument();
+ expect(screen.getByText("branch-1")).toBeInTheDocument();
+ });
+ });
+
+ it("should show filled star for main conversation and outline star for non-main", async () => {
+ mockedAttacksApi.getConversations.mockResolvedValue({
+ attack_result_id: "ar-attack-123",
+ main_conversation_id: "attack-123",
+ conversations: [
+ {
+ conversation_id: "attack-123",
+ message_count: 3,
+ last_message_preview: null,
+ created_at: "2026-02-18T10:30:00Z",
+ },
+ {
+ conversation_id: "conv-2",
+ message_count: 1,
+ last_message_preview: null,
+ created_at: "2026-02-18T11:00:00Z",
+ },
+ ],
+ });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ const mainStarBtn = screen.getByTestId("star-btn-attack-123");
+ expect(mainStarBtn).toBeInTheDocument();
+ expect(mainStarBtn).toBeDisabled();
+
+ const otherStarBtn = screen.getByTestId("star-btn-conv-2");
+ expect(otherStarBtn).toBeInTheDocument();
+ expect(otherStarBtn).not.toBeDisabled();
+ });
+ });
+
+ it("should show message count badge", async () => {
+ mockedAttacksApi.getConversations.mockResolvedValue({
+ attack_result_id: "ar-attack-123",
+ main_conversation_id: "attack-123",
+ conversations: [
+ {
+ conversation_id: "attack-123",
+ message_count: 7,
+ last_message_preview: null,
+ created_at: "2026-02-18T10:30:00Z",
+ },
+ ],
+ });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("7")).toBeInTheDocument();
+ });
+ });
+
+ // -----------------------------------------------------------------------
+ // Selection and actions
+ // -----------------------------------------------------------------------
+
+ it("should call onSelectConversation when clicking a conversation", async () => {
+ const user = userEvent.setup();
+ const onSelectConversation = jest.fn();
+
+ mockedAttacksApi.getConversations.mockResolvedValue({
+ attack_result_id: "ar-attack-123",
+ main_conversation_id: "attack-123",
+ conversations: [
+ {
+ conversation_id: "branch-1",
+ message_count: 2,
+ last_message_preview: null,
+ created_at: "2026-02-18T11:00:00Z",
+ },
+ ],
+ });
+
+ render(
+
+
+
+ );
+
+ const convItem = await screen.findByTestId("conversation-item-branch-1");
+ await user.click(convItem);
+ expect(onSelectConversation).toHaveBeenCalledWith("branch-1");
+ });
+
+ it("should call onNewConversation when clicking new conversation button", async () => {
+ const user = userEvent.setup();
+ const onNewConversation = jest.fn();
+
+ mockedAttacksApi.getConversations.mockResolvedValue({
+ attack_result_id: "ar-attack-123",
+ main_conversation_id: "attack-123",
+ conversations: [],
+ });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(
+ screen.getByTestId("new-conversation-btn")
+ ).not.toBeDisabled();
+ });
+
+ await user.click(screen.getByTestId("new-conversation-btn"));
+ expect(onNewConversation).toHaveBeenCalled();
+ });
+
+ it("should disable new conversation button when no attack is active", () => {
+ render(
+
+
+
+ );
+
+ expect(screen.getByTestId("new-conversation-btn")).toBeDisabled();
+ });
+
+ it("should call onClose when clicking close button", async () => {
+ const user = userEvent.setup();
+ const onClose = jest.fn();
+
+ mockedAttacksApi.getConversations.mockResolvedValue({
+ attack_result_id: "ar-attack-123",
+ main_conversation_id: "attack-123",
+ conversations: [],
+ });
+
+ render(
+
+
+
+ );
+
+ await user.click(screen.getByTestId("close-panel-btn"));
+ expect(onClose).toHaveBeenCalled();
+ });
+
+ // -----------------------------------------------------------------------
+ // Preview text
+ // -----------------------------------------------------------------------
+
+ it("should show last message preview", async () => {
+ mockedAttacksApi.getConversations.mockResolvedValue({
+ attack_result_id: "ar-attack-123",
+ main_conversation_id: "attack-123",
+ conversations: [
+ {
+ conversation_id: "attack-123",
+ message_count: 3,
+ last_message_preview: "This is a preview of the last...",
+ created_at: "2026-02-18T10:30:00Z",
+ },
+ ],
+ });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(
+ screen.getByText("This is a preview of the last...")
+ ).toBeInTheDocument();
+ });
+ });
+
+ // -----------------------------------------------------------------------
+ // Error handling
+ // -----------------------------------------------------------------------
+
+ it("should handle API errors gracefully", async () => {
+ mockedAttacksApi.getConversations.mockRejectedValue(
+ new Error("Network error")
+ );
+
+ render(
+
+
+
+ );
+
+ // Should show error state on error, not crash
+ await waitFor(() => {
+ expect(screen.getByTestId("conversation-error")).toBeInTheDocument();
+ });
+ expect(screen.getByText("Network error")).toBeInTheDocument();
+ });
+
+ // -----------------------------------------------------------------------
+ // Set main conversation via star icon
+ // -----------------------------------------------------------------------
+
+ it("should call onChangeMainConversation when clicking star on non-main conversation", async () => {
+ const onChangeMainConversation = jest.fn().mockResolvedValue(undefined);
+ mockedAttacksApi.getConversations.mockResolvedValue({
+ attack_result_id: "ar-attack-123",
+ main_conversation_id: "attack-123",
+ conversations: [
+ {
+ conversation_id: "attack-123",
+ message_count: 3,
+ last_message_preview: null,
+ created_at: "2026-02-18T10:30:00Z",
+ },
+ {
+ conversation_id: "conv-2",
+ message_count: 1,
+ last_message_preview: null,
+ created_at: "2026-02-18T11:00:00Z",
+ },
+ ],
+ });
+
+ const user = userEvent.setup();
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByTestId("star-btn-conv-2")).toBeInTheDocument();
+ });
+
+ await user.click(screen.getByTestId("star-btn-conv-2"));
+ expect(onChangeMainConversation).toHaveBeenCalledWith("conv-2");
+ });
+
+ it("should show error state on fetch failure", async () => {
+ const axiosError = {
+ isAxiosError: true,
+ response: { status: 500, data: { detail: "Server exploded" } },
+ };
+ mockedAttacksApi.getConversations.mockRejectedValue(axiosError);
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByTestId("conversation-error")).toBeInTheDocument();
+ });
+ expect(screen.getByText("Server exploded")).toBeInTheDocument();
+ expect(screen.getByTestId("conversation-retry-btn")).toBeInTheDocument();
+ });
+
+ it("should retry on clicking retry button", async () => {
+ const axiosError = {
+ isAxiosError: true,
+ response: { status: 500, data: { detail: "Server error" } },
+ };
+ mockedAttacksApi.getConversations.mockRejectedValueOnce(axiosError);
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByTestId("conversation-error")).toBeInTheDocument();
+ });
+
+ // Now succeed on retry
+ mockedAttacksApi.getConversations.mockResolvedValue({
+ conversations: [
+ { conversation_id: "conv-1", message_count: 3, last_message_preview: "hello" },
+ ],
+ main_conversation_id: "conv-1",
+ });
+
+ const user = userEvent.setup();
+ await user.click(screen.getByTestId("conversation-retry-btn"));
+
+ await waitFor(() => {
+ expect(
+ screen.getByTestId("conversation-item-conv-1")
+ ).toBeInTheDocument();
+ });
+ expect(screen.queryByTestId("conversation-error")).not.toBeInTheDocument();
+ });
+});
diff --git a/frontend/src/components/Chat/ConversationPanel.tsx b/frontend/src/components/Chat/ConversationPanel.tsx
new file mode 100644
index 0000000000..4a41ed4d70
--- /dev/null
+++ b/frontend/src/components/Chat/ConversationPanel.tsx
@@ -0,0 +1,306 @@
+import { useEffect, useState, useCallback } from 'react'
+import {
+ makeStyles,
+ tokens,
+ Button,
+ Text,
+ Tooltip,
+ Badge,
+ Spinner,
+ MessageBar,
+ MessageBarBody,
+} from '@fluentui/react-components'
+import {
+ AddRegular,
+ ArrowSyncRegular,
+ ChatRegular,
+ ChatMultipleRegular,
+ DismissRegular,
+ StarRegular,
+ StarFilled,
+} from '@fluentui/react-icons'
+import { attacksApi } from '../../services/api'
+import { toApiError } from '../../services/errors'
+import type { ConversationSummary } from '../../types'
+
+const useStyles = makeStyles({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ height: '100%',
+ width: '280px',
+ minWidth: '280px',
+ borderLeft: `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',
+ alignItems: 'center',
+ gap: tokens.spacingHorizontalXS,
+ fontWeight: tokens.fontWeightSemibold,
+ },
+ conversationList: {
+ flex: 1,
+ overflowY: 'auto',
+ padding: tokens.spacingVerticalXS,
+ },
+ conversationItem: {
+ display: 'flex',
+ flexDirection: 'column',
+ padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
+ cursor: 'pointer',
+ borderRadius: tokens.borderRadiusMedium,
+ gap: tokens.spacingVerticalXXS,
+ '&:hover': {
+ backgroundColor: tokens.colorNeutralBackground1Hover,
+ },
+ },
+ conversationItemActive: {
+ backgroundColor: tokens.colorNeutralBackground1Selected,
+ '&:hover': {
+ backgroundColor: tokens.colorNeutralBackground1Selected,
+ },
+ },
+ conversationHeader: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ gap: tokens.spacingHorizontalXS,
+ },
+ conversationTitle: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: tokens.spacingHorizontalXS,
+ overflow: 'hidden',
+ },
+ preview: {
+ color: tokens.colorNeutralForeground3,
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ },
+ emptyState: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flex: 1,
+ padding: tokens.spacingVerticalL,
+ gap: tokens.spacingVerticalS,
+ color: tokens.colorNeutralForeground3,
+ },
+ loading: {
+ display: 'flex',
+ justifyContent: 'center',
+ padding: tokens.spacingVerticalL,
+ },
+})
+
+interface ConversationPanelProps {
+ attackResultId: string | null
+ activeConversationId: string | null
+ onSelectConversation: (conversationId: string) => void
+ onNewConversation: () => void
+ onChangeMainConversation: (conversationId: string) => void
+ onClose: () => void
+ /** When true, disable mutating actions (new conversation, promote to main) */
+ locked?: boolean
+ /** Increment to trigger a conversation list refresh (e.g. after sending a message) */
+ refreshKey?: number
+}
+
+export default function ConversationPanel({
+ attackResultId,
+ activeConversationId,
+ onSelectConversation,
+ onNewConversation,
+ onChangeMainConversation,
+ onClose,
+ locked,
+ refreshKey,
+}: ConversationPanelProps) {
+ const styles = useStyles()
+ const [conversations, setConversations] = useState([])
+ const [mainConversationId, setMainConversationId] = useState(null)
+ const [isLoading, setIsLoading] = useState(false)
+ const [error, setError] = useState(null)
+
+ const fetchConversations = useCallback(async () => {
+ if (!attackResultId) {
+ setConversations([])
+ setMainConversationId(null)
+ return
+ }
+
+ setIsLoading(true)
+ setError(null)
+ try {
+ const response = await attacksApi.getConversations(attackResultId)
+ setConversations(response.conversations)
+ setMainConversationId(response.main_conversation_id)
+ } catch (err) {
+ setConversations([])
+ setMainConversationId(null)
+ setError(toApiError(err).detail)
+ } finally {
+ setIsLoading(false)
+ }
+ }, [attackResultId])
+
+ useEffect(() => {
+ fetchConversations()
+ }, [fetchConversations, activeConversationId, refreshKey])
+
+ // Expose refresh via a data attribute on the root element so parent can call it
+ // Actually, we'll handle refresh via the attackConversationId dependency
+
+ return (
+
+
+
+
+
+ Attack Conversations
+
+ {attackResultId && (
+
+ {attackResultId}
+
+ )}
+
+
+
+ }
+ onClick={onNewConversation}
+ disabled={!attackResultId || locked}
+ data-testid="new-conversation-btn"
+ />
+
+
+ }
+ onClick={onClose}
+ data-testid="close-panel-btn"
+ />
+
+
+
+
+
+ {isLoading && (
+
+
+
+ )}
+
+ {!isLoading && error && (
+
+
+ {error}
+
+ }
+ onClick={fetchConversations}
+ data-testid="conversation-retry-btn"
+ >
+ Retry
+
+
+ )}
+
+ {!isLoading && !error && conversations.length === 0 && (
+
+
+
+ {attackResultId
+ ? 'No related conversations'
+ : 'Start an attack to see conversations'}
+
+
+ )}
+
+ {!isLoading && !error && conversations.map((conv) => {
+ const isActive = conv.conversation_id === activeConversationId
+ return (
+
onSelectConversation(conv.conversation_id)}
+ data-testid={`conversation-item-${conv.conversation_id}`}
+ >
+
+
+
+
+ {conv.conversation_id}
+
+
+
+
+ : }
+ disabled={conv.conversation_id === mainConversationId || locked}
+ onClick={(e) => {
+ e.stopPropagation()
+ if (conv.conversation_id !== mainConversationId) {
+ onChangeMainConversation(conv.conversation_id)
+ }
+ }}
+ data-testid={`star-btn-${conv.conversation_id}`}
+ style={{ minWidth: 'auto', padding: '2px' }}
+ />
+
+
+ {conv.message_count}
+
+
+
+ {conv.last_message_preview && (
+
+ {conv.last_message_preview}
+
+ )}
+
+ )
+ })}
+
+
-
- {attachments.length > 0 && (
-
- {attachments.map((att, index) => (
-
-
- {att.type === 'image' && '🖼️'}
- {att.type === 'audio' && '🎵'}
- {att.type === 'video' && '🎥'}
- {att.type === 'file' && '📄'}
- {' '}{att.name} ({formatFileSize(att.size)})
-
- }
- onClick={() => removeAttachment(index)}
- />
-
- ))}
-
- )}
-
-
-
- }
- onClick={() => fileInputRef.current?.click()}
- disabled={disabled}
- title="Attach files"
- />
-
-
-
- }
- onClick={handleSend}
- disabled={disabled || (!input && attachments.length === 0)}
- title="Send message"
- />
-
-
-
-
+ {!loaded &&
}
+ {error
+ ?
Image failed to load
+ :
+ }
+
+
+
+ )
+ }
+
if (messages.length === 0) {
return (
@@ -110,12 +317,9 @@ export default function MessageList({ messages }: MessageListProps) {
{messages.map((message, index) => {
const isUser = message.role === 'user'
+ const isSimulated = message.role === 'simulated_assistant'
const timestamp = new Date(message.timestamp).toLocaleTimeString()
-
- // Debug attachments
- if (message.attachments && message.attachments.length > 0) {
- console.log('Message has attachments:', message.attachments)
- }
+ const avatarName = isUser ? 'User' : isSimulated ? 'Simulated' : 'Assistant'
return (
+ {/* Error rendering */}
+ {message.error && (
+
+
+
+ {message.error.type}
+ {message.error.description && (
+ : {message.error.description}
+ )}
+
+
+
+ )}
+
+ {/* Reasoning summaries (model thinking) */}
+ {message.reasoningSummaries && message.reasoningSummaries.length > 0 && (
+
+
Reasoning
+ {message.reasoningSummaries.map((summary, i) => (
+
+ {summary}
+
+ ))}
+
+ )}
+
+ {/* Original value – shown only when it differs from converted */}
+ {(message.originalContent || message.originalAttachments) && (
+
+
Original
+ {message.originalContent && (
+
{message.originalContent}
+ )}
+ {message.originalAttachments && message.originalAttachments.length > 0 && (
+
+ {message.originalAttachments.map((att, i) => (
+
+ {att.type === 'image' &&
}
+ {att.type === 'video' &&
}
+ {att.type === 'audio' &&
}
+ {att.type === 'file' &&
📄 {att.name}
}
+
+ ))}
+
+ )}
+
+ )}
+
+ {/* Divider + Converted label – only shown when there is an original section */}
+ {(message.originalContent || message.originalAttachments) && (
+ <>
+
+
+ Converted
+
+
+ )}
+
+ {/* Text content (converted / primary) */}
{message.content && (
-
+
{message.content}
)}
+
+ {/* Attachments (images, audio, video, files) */}
{message.attachments && message.attachments.length > 0 && (
{message.attachments.map((att, attIndex) => (
{att.type === 'image' && (
-
)}
{att.type === 'video' && (
-
+
)}
{att.type === 'audio' && (
-
+
)}
{att.type === 'file' && (
@@ -162,7 +426,147 @@ export default function MessageList({ messages }: MessageListProps) {
))}
)}
-
{timestamp}
+
+ {/* Unified action buttons – shown on all non-user, non-loading messages */}
+ {!isUser && !message.isLoading && (
+
+ {/* 1. Copy to input box in this conversation */}
+ {onCopyToInput && (() => {
+ const disabled = Boolean(noTargetSelected || isSingleTurn || isOperatorLocked || isCrossTarget)
+ const tip = noTargetSelected
+ ? 'Cannot copy — no target selected'
+ : isSingleTurn
+ ? 'Cannot copy — target is single-turn'
+ : isOperatorLocked
+ ? 'Cannot copy — you are not the operator of this attack'
+ : isCrossTarget
+ ? 'Cannot copy — conversation used a different target'
+ : 'Copy to input box in this conversation'
+ return (
+
+ }
+ disabled={disabled}
+ onClick={() => onCopyToInput(index)}
+ data-testid={`copy-to-input-btn-${index}`}
+ style={{ minWidth: 'auto', padding: '2px' }}
+ />
+
+ )
+ })()}
+
+ {/* 2. Copy to input box in a new conversation (same attack) */}
+ {onCopyToNewConversation && (() => {
+ const disabled = Boolean(noTargetSelected || isOperatorLocked || isCrossTarget)
+ const tip = noTargetSelected
+ ? 'Cannot copy — no target selected'
+ : isOperatorLocked
+ ? 'Cannot add to this attack — you are not the operator'
+ : isCrossTarget
+ ? 'Cannot add to this attack — conversation used a different target'
+ : 'Copy to input box in a new conversation'
+ return (
+
+ }
+ disabled={disabled}
+ onClick={() => onCopyToNewConversation(index)}
+ data-testid={`copy-to-new-conv-btn-${index}`}
+ style={{ minWidth: 'auto', padding: '2px' }}
+ />
+
+ )
+ })()}
+
+ {/* 3. Branch into new conversation (same attack) */}
+ {onBranchConversation && (() => {
+ const disabled = Boolean(noTargetSelected || isSingleTurn || isOperatorLocked || isCrossTarget)
+ const tip = noTargetSelected
+ ? 'Cannot branch — no target selected'
+ : isSingleTurn
+ ? 'Cannot branch — target is single-turn'
+ : isOperatorLocked
+ ? 'Cannot add to this attack — you are not the operator'
+ : isCrossTarget
+ ? 'Cannot add to this attack — conversation used a different target'
+ : 'Branch into new conversation'
+ return (
+
+ }
+ disabled={disabled}
+ onClick={() => onBranchConversation(index)}
+ data-testid={`branch-conv-btn-${index}`}
+ style={{ minWidth: 'auto', padding: '2px' }}
+ />
+
+ )
+ })()}
+
+ {/* 4. Branch into new attack */}
+ {(() => {
+ const singleTurnBlock = isSingleTurn && !noTargetSelected
+ if (onBranchAttack && !singleTurnBlock) {
+ return (
+
+ }
+ onClick={() => onBranchAttack(index)}
+ data-testid={`branch-attack-btn-${index}`}
+ style={{ minWidth: 'auto', padding: '2px' }}
+ />
+
+ )
+ }
+ // Show disabled button with reason
+ const tip = noTargetSelected
+ ? 'Cannot branch — no target selected'
+ : singleTurnBlock
+ ? 'Cannot branch — target is single-turn'
+ : undefined
+ if (!tip) return null
+ return (
+
+ }
+ disabled
+ data-testid={`branch-attack-btn-${index}`}
+ style={{ minWidth: 'auto', padding: '2px' }}
+ />
+
+ )
+ })()}
+
+ {/* Download: non-text media only */}
+ {message.attachments && message.attachments.filter(a => a.type !== 'file').map((att, ai) => (
+
+ }
+ onClick={() => handleDownload(att)}
+ data-testid={`download-btn-${index}-${ai}`}
+ style={{ minWidth: 'auto', padding: '2px' }}
+ />
+
+ ))}
+
+ )}
+
+
+ {timestamp}
+ {message.role}
+
+
+
+
+ );
+ };
+ MockDialog.displayName = "MockCreateTargetDialog";
+ return {
+ __esModule: true,
+ default: MockDialog,
+ };
+});
+
+const mockedTargetsApi = targetsApi as jest.Mocked;
+
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({
+ children,
+}) => {children};
+
+const sampleTargets: TargetInstance[] = [
+ {
+ target_registry_name: "openai_chat_gpt4",
+ target_type: "OpenAIChatTarget",
+ endpoint: "https://api.openai.com",
+ model_name: "gpt-4",
+ },
+ {
+ target_registry_name: "openai_image_dalle",
+ target_type: "OpenAIImageTarget",
+ endpoint: "https://api.openai.com",
+ model_name: "dall-e-3",
+ },
+];
+
+describe("TargetConfig", () => {
+ const defaultProps = {
+ activeTarget: null as TargetInstance | null,
+ onSetActiveTarget: jest.fn(),
+ };
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it("should show loading state initially", () => {
+ mockedTargetsApi.listTargets.mockReturnValue(new Promise(() => {})); // never resolves
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByText("Loading targets...")).toBeInTheDocument();
+ });
+
+ it("should render target list after loading", async () => {
+ mockedTargetsApi.listTargets.mockResolvedValue({
+ items: sampleTargets,
+ pagination: { limit: 200, has_more: false },
+ });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("OpenAIChatTarget")).toBeInTheDocument();
+ expect(screen.getByText("OpenAIImageTarget")).toBeInTheDocument();
+ });
+ });
+
+ it("should show empty state when no targets", async () => {
+ mockedTargetsApi.listTargets.mockResolvedValue({
+ items: [],
+ pagination: { limit: 200, has_more: false },
+ });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("No Targets Configured")).toBeInTheDocument();
+ });
+ });
+
+ it(
+ "should show error state on API failure",
+ async () => {
+ mockedTargetsApi.listTargets.mockRejectedValue(
+ new Error("Connection refused")
+ );
+
+ render(
+
+
+
+ );
+
+ await waitFor(
+ () => {
+ expect(screen.getByText(/Connection refused/)).toBeInTheDocument();
+ },
+ { timeout: 15000 }
+ );
+ },
+ 20000
+ );
+
+ it("should call onSetActiveTarget when Set Active is clicked", async () => {
+ const onSetActiveTarget = jest.fn();
+ mockedTargetsApi.listTargets.mockResolvedValue({
+ items: sampleTargets,
+ pagination: { limit: 200, has_more: false },
+ });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("OpenAIChatTarget")).toBeInTheDocument();
+ });
+
+ const setActiveButtons = screen.getAllByText("Set Active");
+ await userEvent.click(setActiveButtons[0]);
+
+ expect(onSetActiveTarget).toHaveBeenCalledWith(sampleTargets[0]);
+ });
+
+ it("should show Active badge for active target", async () => {
+ mockedTargetsApi.listTargets.mockResolvedValue({
+ items: sampleTargets,
+ pagination: { limit: 200, has_more: false },
+ });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("Active")).toBeInTheDocument();
+ });
+ });
+
+ it("should refresh targets when Refresh button is clicked", async () => {
+ mockedTargetsApi.listTargets.mockResolvedValue({
+ items: sampleTargets,
+ pagination: { limit: 200, has_more: false },
+ });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("OpenAIChatTarget")).toBeInTheDocument();
+ });
+
+ expect(mockedTargetsApi.listTargets).toHaveBeenCalledTimes(1);
+
+ await userEvent.click(screen.getByText("Refresh"));
+
+ await waitFor(() => {
+ expect(mockedTargetsApi.listTargets).toHaveBeenCalledTimes(2);
+ });
+ });
+
+ it("should open create dialog when New Target is clicked", async () => {
+ mockedTargetsApi.listTargets.mockResolvedValue({
+ items: [],
+ pagination: { limit: 200, has_more: false },
+ });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("No Targets Configured")).toBeInTheDocument();
+ });
+
+ await userEvent.click(screen.getByText("New Target"));
+
+ expect(screen.getByTestId("create-dialog")).toBeInTheDocument();
+ });
+
+ it("should refresh list after target creation", async () => {
+ mockedTargetsApi.listTargets
+ .mockResolvedValueOnce({ items: [], pagination: { limit: 200, has_more: false } })
+ .mockResolvedValueOnce({ items: sampleTargets, pagination: { limit: 200, has_more: false } });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("No Targets Configured")).toBeInTheDocument();
+ });
+
+ // Open dialog and trigger create
+ await userEvent.click(screen.getByText("New Target"));
+ await userEvent.click(screen.getByTestId("dialog-create"));
+
+ await waitFor(() => {
+ expect(screen.getByText("OpenAIChatTarget")).toBeInTheDocument();
+ });
+ });
+
+ it("should display target type, endpoint, and model", async () => {
+ mockedTargetsApi.listTargets.mockResolvedValue({
+ items: sampleTargets,
+ pagination: { limit: 200, has_more: false },
+ });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("OpenAIChatTarget")).toBeInTheDocument();
+ expect(screen.getByText("gpt-4")).toBeInTheDocument();
+ expect(
+ screen.getAllByText("https://api.openai.com").length
+ ).toBeGreaterThanOrEqual(1);
+ });
+ });
+
+ it("should display target_specific_params like reasoning_effort", async () => {
+ const targetsWithParams: TargetInstance[] = [
+ {
+ target_registry_name: "azure_responses",
+ target_type: "OpenAIResponseTarget",
+ endpoint: "https://api.openai.com",
+ model_name: "o3",
+ target_specific_params: {
+ reasoning_effort: "high",
+ reasoning_summary: "auto",
+ max_output_tokens: 4096,
+ },
+ },
+ ];
+
+ mockedTargetsApi.listTargets.mockResolvedValue({
+ items: targetsWithParams,
+ pagination: { limit: 200, has_more: false },
+ });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("OpenAIResponseTarget")).toBeInTheDocument();
+ // formatParams renders as "key: value, key: value"
+ expect(screen.getByText(/reasoning_effort: high/)).toBeInTheDocument();
+ expect(screen.getByText(/reasoning_summary: auto/)).toBeInTheDocument();
+ expect(screen.getByText(/max_output_tokens: 4096/)).toBeInTheDocument();
+ });
+ });
+
+ it("should show dash when no target_specific_params", async () => {
+ const targetsNoParams: TargetInstance[] = [
+ {
+ target_registry_name: "simple_target",
+ target_type: "TextTarget",
+ endpoint: "http://localhost",
+ model_name: "text",
+ },
+ ];
+
+ mockedTargetsApi.listTargets.mockResolvedValue({
+ items: targetsNoParams,
+ pagination: { limit: 200, has_more: false },
+ });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("TextTarget")).toBeInTheDocument();
+ });
+
+ // No reasoning or other special params should be displayed
+ expect(screen.queryByText(/reasoning_effort/)).not.toBeInTheDocument();
+ });
+
+ it("should open dialog when Create First Target button is clicked in empty state", async () => {
+ mockedTargetsApi.listTargets.mockResolvedValue({
+ items: [],
+ pagination: { limit: 200, has_more: false },
+ });
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("No Targets Configured")).toBeInTheDocument();
+ });
+
+ // Click the "Create First Target" button (in the empty state)
+ await userEvent.click(screen.getByText("Create First Target"));
+
+ expect(screen.getByTestId("create-dialog")).toBeInTheDocument();
+ });
+});
diff --git a/frontend/src/components/Config/TargetConfig.tsx b/frontend/src/components/Config/TargetConfig.tsx
new file mode 100644
index 0000000000..6195997a5c
--- /dev/null
+++ b/frontend/src/components/Config/TargetConfig.tsx
@@ -0,0 +1,140 @@
+import { useState, useEffect, useCallback } from 'react'
+import {
+ tokens,
+ Text,
+ Button,
+ Spinner,
+} from '@fluentui/react-components'
+import { AddRegular, ArrowSyncRegular } from '@fluentui/react-icons'
+import { targetsApi } from '../../services/api'
+import { toApiError } from '../../services/errors'
+import type { TargetInstance } from '../../types'
+import CreateTargetDialog from './CreateTargetDialog'
+import TargetTable from './TargetTable'
+import { useTargetConfigStyles } from './TargetConfig.styles'
+
+interface TargetConfigProps {
+ activeTarget: TargetInstance | null
+ onSetActiveTarget: (target: TargetInstance) => void
+}
+
+export default function TargetConfig({ activeTarget, onSetActiveTarget }: TargetConfigProps) {
+ const styles = useTargetConfigStyles()
+ const [targets, setTargets] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+ const [dialogOpen, setDialogOpen] = useState(false)
+
+ // Retry fetching targets a few times with backoff. The Vite dev proxy
+ // returns 502 while the backend is still starting, so a single failed
+ // request on initial page load would show a confusing error to the user.
+ const fetchTargets = useCallback(async () => {
+ const maxRetries = 3
+ setLoading(true)
+ setError(null)
+ for (let attempt = 0; attempt <= maxRetries; attempt++) {
+ try {
+ const response = await targetsApi.listTargets(200)
+ setTargets(response.items)
+ setLoading(false)
+ return
+ } catch (err) {
+ if (attempt < maxRetries) {
+ // Wait before retrying (1s, 2s, 3s)
+ await new Promise(r => setTimeout(r, (attempt + 1) * 1000))
+ } else {
+ setError(toApiError(err).detail)
+ }
+ }
+ }
+ setLoading(false)
+ }, [])
+
+ useEffect(() => {
+ fetchTargets()
+ }, [fetchTargets])
+
+ const handleTargetCreated = async () => {
+ setDialogOpen(false)
+ await fetchTargets()
+ }
+
+ return (
+
+
+
+ Target Configuration
+
+ Manage targets for attack sessions. Select a target to use in the chat view.
+
+
+
+ }
+ onClick={fetchTargets}
+ disabled={loading}
+ >
+ Refresh
+
+ }
+ onClick={() => setDialogOpen(true)}
+ >
+ New Target
+
+
+
+
+ {loading && (
+
+
+
+ )}
+
+ {error && (
+
+ Error: {error}
+
+ )}
+
+ {!loading && !error && targets.length === 0 && (
+
+
No Targets Configured
+
+ Add a target manually, or configure an initializer in your ~/.pyrit/.pyrit_conf file
+ to auto-populate targets from your .env and .env.local files.
+ For example, add airt to the initializers list to register
+ Azure OpenAI targets automatically. See the{' '}
+
+ .pyrit_conf_example
+ {' '}
+ for details.
+
+
}
+ onClick={() => setDialogOpen(true)}
+ >
+ Create First Target
+
+
+ )}
+
+ {!loading && !error && targets.length > 0 && (
+
+ )}
+
+
setDialogOpen(false)}
+ onCreated={handleTargetCreated}
+ />
+
+
+
+
+
+ Type
+ Model
+ Endpoint
+ Parameters
+
+
+
+ {targets.map((target) => (
+
+
+ {isActive(target) ? (
+ }>
+ Active
+
+ ) : (
+
+ )}
+
+
+ {target.target_type}
+
+
+ {target.model_name || '—'}
+
+
+
+ {target.endpoint || '—'}
+
+
+
+
+ {formatParams(target.target_specific_params) || '—'}
+
+
+
+ ))}
+
+
+
+
+ {messageMap[status]}
+
+
+ )
+}
diff --git a/frontend/src/components/ErrorBoundary.test.tsx b/frontend/src/components/ErrorBoundary.test.tsx
new file mode 100644
index 0000000000..04307e66dd
--- /dev/null
+++ b/frontend/src/components/ErrorBoundary.test.tsx
@@ -0,0 +1,138 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ErrorBoundary } from './ErrorBoundary'
+
+// Component that throws on render
+function ThrowingChild({ shouldThrow }: { shouldThrow: boolean }) {
+ if (shouldThrow) {
+ throw new Error('Test crash')
+ }
+ return OK
+}
+
+describe('ErrorBoundary', () => {
+ let consoleSpy: jest.SpyInstance
+
+ beforeEach(() => {
+ // Suppress React's console.error for error boundary logging
+ consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
+ })
+
+ afterEach(() => {
+ consoleSpy.mockRestore()
+ })
+
+ it('renders children when no error occurs', () => {
+ render(
+
+
+
+ )
+
+ expect(screen.getByTestId('child-content')).toBeInTheDocument()
+ expect(screen.queryByTestId('error-boundary-fallback')).toBeNull()
+ })
+
+ it('catches render error and shows fallback', () => {
+ render(
+
+
+
+ )
+
+ expect(screen.getByTestId('error-boundary-fallback')).toBeInTheDocument()
+ expect(screen.getByText(/test crash/i)).toBeInTheDocument()
+ expect(screen.getByText('Try again')).toBeInTheDocument()
+ })
+
+ it('"Try again" resets error state and re-renders children', () => {
+ // We use a stateful wrapper to toggle the throw
+ let shouldThrow = true
+
+ function ToggleChild() {
+ if (shouldThrow) throw new Error('First crash')
+ return OK
+ }
+
+ render(
+
+
+
+ )
+
+ expect(screen.getByTestId('error-boundary-fallback')).toBeInTheDocument()
+
+ // Stop throwing and click "Try again"
+ shouldThrow = false
+ fireEvent.click(screen.getByText('Try again'))
+
+ expect(screen.getByTestId('child-content')).toBeInTheDocument()
+ expect(screen.queryByTestId('error-boundary-fallback')).toBeNull()
+ })
+
+ it('shows "Reload page" after repeated crash', () => {
+ let crashCount = 0
+
+ function CrashOnRender() {
+ crashCount++
+ // Always throw — simulates repeated crash
+ throw new Error(`Crash #${crashCount}`)
+ }
+
+ render(
+
+
+
+ )
+
+ // First crash: only "Try again" visible, no "Reload page"
+ expect(screen.getByText('Try again')).toBeInTheDocument()
+ expect(screen.queryByText('Reload page')).toBeNull()
+
+ // Click "Try again" → crashes again → now shows "Reload page"
+ fireEvent.click(screen.getByText('Try again'))
+
+ expect(screen.getByText('Try again')).toBeInTheDocument()
+ expect(screen.getByText('Reload page')).toBeInTheDocument()
+ })
+
+ it('logs error to console', () => {
+ render(
+
+
+
+ )
+
+ expect(consoleSpy).toHaveBeenCalledWith(
+ '[ErrorBoundary] Caught render error:',
+ expect.any(Error),
+ expect.any(String)
+ )
+ })
+
+ it('"Reload page" calls window.location.reload', () => {
+ const reloadMock = jest.fn()
+ Object.defineProperty(window, 'location', {
+ value: { ...window.location, reload: reloadMock },
+ writable: true,
+ })
+
+ let crashCount = 0
+ function AlwaysCrash() {
+ crashCount++
+ throw new Error(`Crash #${crashCount}`)
+ }
+
+ render(
+
+
+
+ )
+
+ // First crash — click "Try again" to trigger second crash
+ fireEvent.click(screen.getByText('Try again'))
+
+ // Now "Reload page" should be visible
+ fireEvent.click(screen.getByText('Reload page'))
+ expect(reloadMock).toHaveBeenCalled()
+ })
+})
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
new file mode 100644
index 0000000000..b4fc303a30
--- /dev/null
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -0,0 +1,81 @@
+import { Component } from 'react'
+import type { ErrorInfo, ReactNode } from 'react'
+import { Button, MessageBar, MessageBarBody, tokens } from '@fluentui/react-components'
+
+interface Props {
+ children: ReactNode
+}
+
+interface State {
+ hasError: boolean
+ error: Error | null
+ crashCount: number
+}
+
+/**
+ * React Error Boundary that catches render errors in its subtree.
+ *
+ * - On first crash: shows "Try again" which resets the error state.
+ * - If the app crashes again after "Try again": shows "Reload page" as a
+ * nuclear option (full page reload).
+ */
+export class ErrorBoundary extends Component {
+ state: State = { hasError: false, error: null, crashCount: 0 }
+
+ static getDerivedStateFromError(error: Error): Partial {
+ return { hasError: true, error }
+ }
+
+ componentDidCatch(error: Error, info: ErrorInfo): void {
+ console.error('[ErrorBoundary] Caught render error:', error, info.componentStack)
+ this.setState((prev) => ({ crashCount: prev.crashCount + 1 }))
+ }
+
+ handleReset = () => {
+ this.setState({ hasError: false, error: null })
+ }
+
+ handleReload = () => {
+ window.location.reload()
+ }
+
+ render() {
+ if (!this.state.hasError) {
+ return this.props.children
+ }
+
+ const showReload = this.state.crashCount > 1
+
+ return (
+
+
+
+ Something went wrong: {this.state.error?.message || 'Unknown error'}
+
+
+
+
+
+ {showReload && (
+
+ )}
+
+
+
+
+ Attack History
+ }
+ onClick={() => fetchAttacks()}
+ disabled={loading}
+ data-testid="refresh-btn"
+ >
+ Refresh
+
+
+
+
+
+
+ {loading ? (
+
+
+
+ ) : error ? (
+
+
+ {error}
+
+ }
+ onClick={() => fetchAttacks()}
+ disabled={loading}
+ data-testid="retry-btn"
+ >
+ Retry
+
+
+ ) : attacks.length === 0 ? (
+
+ No attacks found
+
+ {hasActiveFilters
+ ? 'Try adjusting your filters.'
+ : 'Run an attack to see it here.'}
+
+
+ ) : (
+
+ )}
+
+
+ {!loading && attacks.length > 0 && (
+
+ )}
+
+
+
+ Status
+ Attack Type
+ Target
+ Operator
+ Operation
+ Msgs
+ Convs
+ Converters
+ Labels
+ Created
+ Updated
+ Last Message
+
+
+
+
+ {attacks.map(attack => (
+ onOpenAttack(attack.attack_result_id)}
+ data-testid={`attack-row-${attack.attack_result_id}`}
+ >
+
+
+ {attack.outcome ?? 'undetermined'}
+
+
+
+ {attack.attack_type}
+
+
+ {attack.target ? (
+
+
+ {attack.target.model_name || attack.target.target_type}
+
+
+ ) : (
+ —
+ )}
+
+
+ {attack.labels.operator || '—'}
+
+
+ {attack.labels.operation || '—'}
+
+
+ {attack.message_count}
+
+
+ {(attack.related_conversation_ids?.length ?? 0) + 1}
+
+
+ {attack.converters.length > 0 ? (
+
+ {attack.converters.slice(0, 2).map(c => (
+ {c}
+ ))}
+ {attack.converters.length > 2 && (
+
+ +{attack.converters.length - 2}
+
+ )}
+
+ ) : (
+ —
+ )}
+
+
+ {(() => {
+ const otherLabels = Object.entries(attack.labels ?? {}).filter(([k]) => k !== 'operator' && k !== 'operation' && k !== 'source')
+ return otherLabels.length > 0 ? (
+
+ {otherLabels.slice(0, 2).map(([k, v]) => (
+ {k}: {v}
+ ))}
+ {otherLabels.length > 2 && (
+ `${k}: ${v}`).join(', ')}
+ relationship="label"
+ >
+
+ +{otherLabels.length - 2}
+
+
+ )}
+
+ ) : (
+ —
+ )
+ })()}
+
+
+ {formatDate(attack.created_at)}
+
+
+ {formatDate(attack.updated_at)}
+
+
+
+ {attack.last_message_preview || '—'}
+
+
+
+
+ }
+ onClick={(e) => {
+ e.stopPropagation()
+ onOpenAttack(attack.attack_result_id)
+ }}
+ data-testid={`open-attack-${attack.attack_result_id}`}
+ />
+
+
+
+ ))}
+
+
+ )
+}
diff --git a/frontend/src/components/History/HistoryFiltersBar.tsx b/frontend/src/components/History/HistoryFiltersBar.tsx
new file mode 100644
index 0000000000..c62964b971
--- /dev/null
+++ b/frontend/src/components/History/HistoryFiltersBar.tsx
@@ -0,0 +1,161 @@
+import {
+ Button,
+ Tooltip,
+ Dropdown,
+ Option,
+ Combobox,
+} from '@fluentui/react-components'
+import {
+ FilterRegular,
+ FilterDismissRegular,
+} from '@fluentui/react-icons'
+import { DEFAULT_HISTORY_FILTERS } from './historyFilters'
+import type { HistoryFilters } from './historyFilters'
+import { useAttackHistoryStyles } from './AttackHistory.styles'
+
+interface HistoryFiltersBarProps {
+ filters: HistoryFilters
+ onFiltersChange: (filters: HistoryFilters) => void
+ attackClassOptions: string[]
+ converterOptions: string[]
+ operatorOptions: string[]
+ operationOptions: string[]
+ otherLabelOptions: string[]
+}
+
+export default function HistoryFiltersBar({
+ filters,
+ onFiltersChange,
+ attackClassOptions,
+ converterOptions,
+ operatorOptions,
+ operationOptions,
+ otherLabelOptions,
+}: HistoryFiltersBarProps) {
+ const styles = useAttackHistoryStyles()
+
+ const {
+ attackClass: attackClassFilter,
+ outcome: outcomeFilter,
+ converter: converterFilter,
+ operator: operatorFilter,
+ operation: operationFilter,
+ otherLabels: otherLabelFilters,
+ labelSearchText,
+ } = filters
+
+ const setFilter = (key: K, value: HistoryFilters[K]) => {
+ onFiltersChange({ ...filters, [key]: value })
+ }
+
+ const hasActiveFilters =
+ attackClassFilter || outcomeFilter || converterFilter ||
+ operatorFilter || operationFilter || otherLabelFilters.length > 0
+
+ return (
+
+
+ {hasActiveFilters && (
+
+ }
+ onClick={() => onFiltersChange({ ...DEFAULT_HISTORY_FILTERS })}
+ data-testid="reset-filters-btn"
+ >
+ Reset
+
+
+ )}
+ setFilter('attackClass', data.optionValue ?? '')}
+ data-testid="attack-class-filter"
+ >
+
+ {attackClassOptions.map(cls => (
+
+ ))}
+
+ setFilter('outcome', data.optionValue ?? '')}
+ data-testid="outcome-filter"
+ >
+
+
+
+
+
+ setFilter('converter', data.optionValue ?? '')}
+ data-testid="converter-filter"
+ >
+
+ {converterOptions.map(c => (
+
+ ))}
+
+ setFilter('operator', data.optionValue ?? '')}
+ data-testid="operator-filter"
+ >
+
+ {operatorOptions.map(o => (
+
+ ))}
+
+ setFilter('operation', data.optionValue ?? '')}
+ data-testid="operation-filter"
+ >
+
+ {operationOptions.map(o => (
+
+ ))}
+
+ {
+ onFiltersChange({ ...filters, otherLabels: data.selectedOptions, labelSearchText: '' })
+ }}
+ value={labelSearchText}
+ onChange={(e) => setFilter('labelSearchText', (e.target as HTMLInputElement).value)}
+ data-testid="label-filter"
+ freeform
+ >
+ {otherLabelOptions
+ .filter(l => !labelSearchText || l.toLowerCase().includes(labelSearchText.toLowerCase()))
+ .slice(0, 50)
+ .map(l => (
+
+ ))}
+ {otherLabelOptions.filter(l => !labelSearchText || l.toLowerCase().includes(labelSearchText.toLowerCase())).length > 50 && (
+
+ )}
+
+
+ )
+}
diff --git a/frontend/src/components/History/HistoryPagination.tsx b/frontend/src/components/History/HistoryPagination.tsx
new file mode 100644
index 0000000000..e7af407c2d
--- /dev/null
+++ b/frontend/src/components/History/HistoryPagination.tsx
@@ -0,0 +1,45 @@
+import {
+ Text,
+ Button,
+} from '@fluentui/react-components'
+import {
+ ChevronLeftRegular,
+ ChevronRightRegular,
+} from '@fluentui/react-icons'
+import { useAttackHistoryStyles } from './AttackHistory.styles'
+
+interface HistoryPaginationProps {
+ page: number
+ hasMore: boolean
+ onPrevPage: () => void
+ onNextPage: () => void
+}
+
+export default function HistoryPagination({ page, hasMore, onPrevPage, onNextPage }: HistoryPaginationProps) {
+ const styles = useAttackHistoryStyles()
+
+ return (
+
+ }
+ disabled={page === 0}
+ onClick={onPrevPage}
+ data-testid="prev-page-btn"
+ >
+ First
+
+ Page {page + 1}
+ }
+ iconPosition="after"
+ disabled={!hasMore}
+ onClick={onNextPage}
+ data-testid="next-page-btn"
+ >
+ Next
+
+
+ )
+}
diff --git a/frontend/src/components/History/historyFilters.ts b/frontend/src/components/History/historyFilters.ts
new file mode 100644
index 0000000000..8282e673d9
--- /dev/null
+++ b/frontend/src/components/History/historyFilters.ts
@@ -0,0 +1,19 @@
+export interface HistoryFilters {
+ attackClass: string
+ outcome: string
+ converter: string
+ operator: string
+ operation: string
+ otherLabels: string[]
+ labelSearchText: string
+}
+
+export const DEFAULT_HISTORY_FILTERS: HistoryFilters = {
+ attackClass: '',
+ outcome: '',
+ converter: '',
+ operator: '',
+ operation: '',
+ otherLabels: [],
+ labelSearchText: '',
+}
diff --git a/frontend/src/components/Labels/LabelsBar.test.tsx b/frontend/src/components/Labels/LabelsBar.test.tsx
new file mode 100644
index 0000000000..dd7ae7850d
--- /dev/null
+++ b/frontend/src/components/Labels/LabelsBar.test.tsx
@@ -0,0 +1,544 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { FluentProvider, webLightTheme } from '@fluentui/react-components'
+import LabelsBar from './LabelsBar'
+import { DEFAULT_GLOBAL_LABELS } from './labelDefaults'
+import { labelsApi } from '../../services/api'
+
+jest.mock('../../services/api', () => ({
+ labelsApi: {
+ getLabels: jest.fn(),
+ },
+}))
+
+const mockedLabelsApi = labelsApi as jest.Mocked
+
+function TestWrapper({ children }: { children: React.ReactNode }) {
+ return {children}
+}
+
+describe('LabelsBar', () => {
+ beforeEach(() => {
+ jest.clearAllMocks()
+ mockedLabelsApi.getLabels.mockImplementation(() => new Promise(() => {}))
+ })
+
+ it('should render default labels', () => {
+ const onChange = jest.fn()
+ render(
+
+
+
+ )
+
+ expect(screen.getByTestId('label-operator')).toBeInTheDocument()
+ expect(screen.getByTestId('label-operation')).toBeInTheDocument()
+ expect(screen.getByText('roakey')).toBeInTheDocument()
+ expect(screen.getByText('op_trash_panda')).toBeInTheDocument()
+ })
+
+ it('should show warning icon for dummy values', () => {
+ render(
+
+
+
+ )
+
+ expect(screen.getByTestId('labels-warning')).toBeInTheDocument()
+ })
+
+ it('should not show warning when values are customized', () => {
+ render(
+
+
+
+ )
+
+ expect(screen.queryByTestId('labels-warning')).not.toBeInTheDocument()
+ })
+
+ it('should not allow removing required labels (operator, operation)', () => {
+ render(
+
+
+
+ )
+
+ // operator and operation should not have remove buttons
+ expect(screen.queryByTestId('remove-label-operator')).not.toBeInTheDocument()
+ expect(screen.queryByTestId('remove-label-operation')).not.toBeInTheDocument()
+ })
+
+ it('should allow removing custom labels', () => {
+ const onChange = jest.fn()
+ render(
+
+
+
+ )
+
+ const removeBtn = screen.getByTestId('remove-label-team')
+ fireEvent.click(removeBtn)
+
+ expect(onChange).toHaveBeenCalledWith({
+ operator: 'roakey',
+ operation: 'op_trash_panda',
+ })
+ })
+
+ it('should add a new label via popover', async () => {
+ const onChange = jest.fn()
+ render(
+
+
+
+ )
+
+ fireEvent.click(screen.getByTestId('add-label-btn'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('new-label-key')).toBeInTheDocument()
+ })
+
+ const keyInput = screen.getByPlaceholderText('key')
+ const valueInput = screen.getByPlaceholderText('value')
+
+ fireEvent.change(keyInput, { target: { value: 'team' } })
+ fireEvent.change(valueInput, { target: { value: 'red' } })
+ fireEvent.click(screen.getByTestId('confirm-add-label'))
+
+ expect(onChange).toHaveBeenCalledWith({
+ ...DEFAULT_GLOBAL_LABELS,
+ team: 'red',
+ })
+ })
+
+ it('should reject uppercase keys', async () => {
+ const onChange = jest.fn()
+ render(
+
+
+
+ )
+
+ fireEvent.click(screen.getByTestId('add-label-btn'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('new-label-key')).toBeInTheDocument()
+ })
+
+ const keyInput = screen.getByPlaceholderText('key')
+ const valueInput = screen.getByPlaceholderText('value')
+
+ // The onChange handler auto-lowercases input, so 'Team' becomes 'team' and 'Red' becomes 'red'
+ fireEvent.change(keyInput, { target: { value: 'Team' } })
+ fireEvent.change(valueInput, { target: { value: 'Red' } })
+ fireEvent.click(screen.getByTestId('confirm-add-label'))
+
+ // Since auto-lowercase is applied, the label should be added with lowercase values
+ expect(onChange).toHaveBeenCalledWith({
+ ...DEFAULT_GLOBAL_LABELS,
+ team: 'red',
+ })
+ })
+
+ it('should reject duplicate keys', async () => {
+ render(
+
+
+
+ )
+
+ fireEvent.click(screen.getByTestId('add-label-btn'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('new-label-key')).toBeInTheDocument()
+ })
+
+ const keyInput = screen.getByPlaceholderText('key')
+ const valueInput = screen.getByPlaceholderText('value')
+
+ fireEvent.change(keyInput, { target: { value: 'operator' } })
+ fireEvent.change(valueInput, { target: { value: 'alice' } })
+ fireEvent.click(screen.getByTestId('confirm-add-label'))
+
+ expect(screen.getByText('Label key already exists')).toBeInTheDocument()
+ })
+
+ it('should allow editing a label value by clicking on it', async () => {
+ const onChange = jest.fn()
+ render(
+
+
+
+ )
+
+ // Click on operator label to edit
+ fireEvent.click(screen.getByTestId('label-operator'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('edit-label-operator')).toBeInTheDocument()
+ })
+ })
+
+ it('should export correct default labels', () => {
+ expect(DEFAULT_GLOBAL_LABELS).toEqual({
+ operator: 'roakey',
+ operation: 'op_trash_panda',
+ })
+ })
+
+ it('should fetch existing labels on mount', async () => {
+ render(
+
+
+
+ )
+
+ await waitFor(() => {
+ expect(mockedLabelsApi.getLabels).toHaveBeenCalled()
+ })
+ })
+
+ it('should handle getLabels failure gracefully', async () => {
+ mockedLabelsApi.getLabels.mockRejectedValueOnce(new Error('Network error'))
+
+ render(
+
+
+
+ )
+
+ // Component should still render without errors
+ await waitFor(() => {
+ expect(mockedLabelsApi.getLabels).toHaveBeenCalled()
+ })
+ expect(screen.getByTestId('label-operator')).toBeInTheDocument()
+ })
+
+ it('should reject empty key when adding a label', async () => {
+ render(
+
+
+
+ )
+
+ fireEvent.click(screen.getByTestId('add-label-btn'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('new-label-key')).toBeInTheDocument()
+ })
+
+ // Leave key empty, set value
+ const valueInput = screen.getByPlaceholderText('value')
+ fireEvent.change(valueInput, { target: { value: 'somevalue' } })
+ fireEvent.click(screen.getByTestId('confirm-add-label'))
+
+ expect(screen.getByText('Key is required')).toBeInTheDocument()
+ })
+
+ it('should reject empty value when adding a label', async () => {
+ render(
+
+
+
+ )
+
+ fireEvent.click(screen.getByTestId('add-label-btn'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('new-label-key')).toBeInTheDocument()
+ })
+
+ const keyInput = screen.getByPlaceholderText('key')
+ fireEvent.change(keyInput, { target: { value: 'mykey' } })
+ // Leave value empty
+ fireEvent.click(screen.getByTestId('confirm-add-label'))
+
+ expect(screen.getByText('Value is required')).toBeInTheDocument()
+ })
+
+ it('should save edited label value and call onLabelsChange', async () => {
+ const onChange = jest.fn()
+ render(
+
+
+
+ )
+
+ // Click on operator label to start editing
+ fireEvent.click(screen.getByTestId('label-operator'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('edit-label-operator')).toBeInTheDocument()
+ })
+
+ // Find the actual input element via displayValue (the current value is 'roakey')
+ const editInput = screen.getByDisplayValue('roakey')
+ fireEvent.change(editInput, { target: { value: 'alice' } })
+ fireEvent.keyDown(editInput, { key: 'Enter' })
+
+ expect(onChange).toHaveBeenCalledWith({
+ ...DEFAULT_GLOBAL_LABELS,
+ operator: 'alice',
+ })
+ })
+
+ it('should cancel edit on Escape key', async () => {
+ const onChange = jest.fn()
+ render(
+
+
+
+ )
+
+ fireEvent.click(screen.getByTestId('label-operator'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('edit-label-operator')).toBeInTheDocument()
+ })
+
+ const editInput = screen.getByDisplayValue('roakey')
+ fireEvent.keyDown(editInput, { key: 'Escape' })
+
+ // Should not call onChange
+ expect(onChange).not.toHaveBeenCalled()
+ // Edit mode should be closed - the original label should reappear
+ await waitFor(() => {
+ expect(screen.getByTestId('label-operator')).toBeInTheDocument()
+ })
+ })
+
+ it('should reject invalid edit value (validation error)', async () => {
+ const onChange = jest.fn()
+ render(
+
+
+
+ )
+
+ fireEvent.click(screen.getByTestId('label-operator'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('edit-label-operator')).toBeInTheDocument()
+ })
+
+ const editInput = screen.getByDisplayValue('roakey')
+ // Clear the input to empty value
+ fireEvent.change(editInput, { target: { value: '' } })
+ fireEvent.keyDown(editInput, { key: 'Enter' })
+
+ expect(onChange).not.toHaveBeenCalled()
+ })
+
+ it('should add label via Enter keypress in add popover', async () => {
+ const onChange = jest.fn()
+ render(
+
+
+
+ )
+
+ fireEvent.click(screen.getByTestId('add-label-btn'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('new-label-key')).toBeInTheDocument()
+ })
+
+ const keyInput = screen.getByPlaceholderText('key')
+ const valueInput = screen.getByPlaceholderText('value')
+
+ fireEvent.change(keyInput, { target: { value: 'env' } })
+ fireEvent.change(valueInput, { target: { value: 'prod' } })
+ fireEvent.keyDown(valueInput, { key: 'Enter' })
+
+ expect(onChange).toHaveBeenCalledWith({
+ ...DEFAULT_GLOBAL_LABELS,
+ env: 'prod',
+ })
+ })
+
+ it('should close add popover on Escape key', async () => {
+ render(
+
+
+
+ )
+
+ fireEvent.click(screen.getByTestId('add-label-btn'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('new-label-key')).toBeInTheDocument()
+ })
+
+ const keyInput = screen.getByPlaceholderText('key')
+ fireEvent.keyDown(keyInput, { key: 'Escape' })
+
+ // Popover should close
+ await waitFor(() => {
+ expect(screen.queryByTestId('new-label-key')).not.toBeInTheDocument()
+ })
+ })
+
+ it('should show suggestion chips from fetched labels when adding', async () => {
+ mockedLabelsApi.getLabels.mockResolvedValueOnce({
+ source: 'attacks',
+ labels: {
+ operator: ['alice', 'bob'],
+ team: ['red', 'blue'],
+ env: ['prod', 'staging'],
+ },
+ })
+
+ const onChange = jest.fn()
+ render(
+
+
+
+ )
+
+ // Wait for labels to be fetched
+ await waitFor(() => {
+ expect(mockedLabelsApi.getLabels).toHaveBeenCalled()
+ })
+
+ fireEvent.click(screen.getByTestId('add-label-btn'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('new-label-key')).toBeInTheDocument()
+ })
+
+ // "team" and "env" should appear as suggestions (operator is already used)
+ expect(screen.getByText('team')).toBeInTheDocument()
+ expect(screen.getByText('env')).toBeInTheDocument()
+ })
+
+ it('should show value suggestions when a known key is typed', async () => {
+ mockedLabelsApi.getLabels.mockResolvedValueOnce({
+ source: 'attacks',
+ labels: {
+ operator: ['alice', 'bob'],
+ team: ['red', 'blue'],
+ },
+ })
+
+ render(
+
+
+
+ )
+
+ await waitFor(() => {
+ expect(mockedLabelsApi.getLabels).toHaveBeenCalled()
+ })
+
+ fireEvent.click(screen.getByTestId('add-label-btn'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('new-label-key')).toBeInTheDocument()
+ })
+
+ const keyInput = screen.getByPlaceholderText('key')
+ fireEvent.change(keyInput, { target: { value: 'team' } })
+
+ // Value suggestions for "team" should appear
+ await waitFor(() => {
+ expect(screen.getByText('red')).toBeInTheDocument()
+ expect(screen.getByText('blue')).toBeInTheDocument()
+ })
+ })
+
+ it('should show edit dropdown suggestions when editing a label', async () => {
+ mockedLabelsApi.getLabels.mockResolvedValueOnce({
+ source: 'attacks',
+ labels: {
+ operator: ['alice', 'bob', 'charlie'],
+ operation: ['op_one', 'op_two'],
+ },
+ })
+
+ const onChange = jest.fn()
+ render(
+
+
+
+ )
+
+ await waitFor(() => {
+ expect(mockedLabelsApi.getLabels).toHaveBeenCalled()
+ })
+
+ // Click on operator to edit
+ fireEvent.click(screen.getByTestId('label-operator'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('edit-label-operator')).toBeInTheDocument()
+ })
+
+ // Should show suggestions excluding the current value ('roakey')
+ // that match the edit text (initially 'roakey' but lowercased)
+ const editInput = screen.getByDisplayValue('roakey')
+ fireEvent.change(editInput, { target: { value: '' } })
+
+ await waitFor(() => {
+ expect(screen.getByText('alice')).toBeInTheDocument()
+ expect(screen.getByText('bob')).toBeInTheDocument()
+ })
+ })
+
+ it('should select a suggestion from edit dropdown', async () => {
+ mockedLabelsApi.getLabels.mockResolvedValueOnce({
+ source: 'attacks',
+ labels: {
+ operator: ['alice', 'bob'],
+ },
+ })
+
+ const onChange = jest.fn()
+ render(
+
+
+
+ )
+
+ await waitFor(() => {
+ expect(mockedLabelsApi.getLabels).toHaveBeenCalled()
+ })
+
+ fireEvent.click(screen.getByTestId('label-operator'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('edit-label-operator')).toBeInTheDocument()
+ })
+
+ const editInput = screen.getByDisplayValue('roakey')
+ fireEvent.change(editInput, { target: { value: '' } })
+
+ await waitFor(() => {
+ expect(screen.getByText('alice')).toBeInTheDocument()
+ })
+
+ // Click on suggestion
+ fireEvent.click(screen.getByText('alice'))
+
+ expect(onChange).toHaveBeenCalledWith({
+ ...DEFAULT_GLOBAL_LABELS,
+ operator: 'alice',
+ })
+ })
+
+ it('should not allow removing operator via handleRemoveLabel guard', () => {
+ const onChange = jest.fn()
+ render(
+
+
+
+ )
+
+ // operator and operation should not have remove buttons (already tested)
+ expect(screen.queryByTestId('remove-label-operator')).not.toBeInTheDocument()
+ expect(screen.queryByTestId('remove-label-operation')).not.toBeInTheDocument()
+
+ // team should have a remove button
+ expect(screen.getByTestId('remove-label-team')).toBeInTheDocument()
+ })
+})
diff --git a/frontend/src/components/Labels/LabelsBar.tsx b/frontend/src/components/Labels/LabelsBar.tsx
new file mode 100644
index 0000000000..82d2af0803
--- /dev/null
+++ b/frontend/src/components/Labels/LabelsBar.tsx
@@ -0,0 +1,473 @@
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+import {
+ makeStyles,
+ tokens,
+ Text,
+ Button,
+ Input,
+ Badge,
+ Tooltip,
+ Popover,
+ PopoverTrigger,
+ PopoverSurface,
+} from '@fluentui/react-components'
+import {
+ AddRegular,
+ DismissRegular,
+ WarningRegular,
+} from '@fluentui/react-icons'
+import { labelsApi } from '../../services/api'
+
+
+const DUMMY_VALUES: Record = {
+ operator: 'roakey',
+ operation: 'op_trash_panda',
+}
+
+const useStyles = makeStyles({
+ root: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: tokens.spacingHorizontalXS,
+ overflow: 'hidden',
+ flex: '1 1 0',
+ minWidth: 0,
+ },
+ labelsContainer: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: tokens.spacingHorizontalXS,
+ flexWrap: 'nowrap',
+ overflow: 'hidden',
+ flex: '1 1 0',
+ minWidth: 0,
+ },
+ overflowBadge: {
+ flexShrink: 0,
+ cursor: 'pointer',
+ },
+ labelBadge: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: tokens.spacingHorizontalXXS,
+ padding: `2px ${tokens.spacingHorizontalS}`,
+ borderRadius: tokens.borderRadiusMedium,
+ cursor: 'pointer',
+ userSelect: 'none' as const,
+ },
+ labelNormal: {
+ backgroundColor: tokens.colorNeutralBackground3,
+ border: `1px solid ${tokens.colorNeutralStroke1}`,
+ },
+ labelDummy: {
+ backgroundColor: tokens.colorPaletteYellowBackground2,
+ border: `1px solid ${tokens.colorPaletteYellowBorder1}`,
+ },
+ removeBtn: {
+ minWidth: '16px',
+ width: '16px',
+ height: '16px',
+ padding: 0,
+ },
+ popoverSurface: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: tokens.spacingVerticalS,
+ padding: tokens.spacingVerticalM,
+ minWidth: '250px',
+ },
+ inputRow: {
+ display: 'flex',
+ gap: tokens.spacingHorizontalXS,
+ alignItems: 'flex-start',
+ },
+ inputField: {
+ flex: 1,
+ minWidth: '80px',
+ },
+ suggestions: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ gap: tokens.spacingHorizontalXXS,
+ maxHeight: '80px',
+ overflowY: 'auto',
+ },
+ editDropdown: {
+ position: 'absolute',
+ top: '100%',
+ left: 0,
+ zIndex: 100,
+ display: 'flex',
+ flexDirection: 'column',
+ gap: tokens.spacingVerticalXXS,
+ backgroundColor: tokens.colorNeutralBackground1,
+ border: `1px solid ${tokens.colorNeutralStroke1}`,
+ borderRadius: tokens.borderRadiusMedium,
+ padding: tokens.spacingVerticalXS,
+ boxShadow: tokens.shadow4,
+ maxHeight: '120px',
+ overflowY: 'auto',
+ minWidth: '120px',
+ },
+ suggestionChip: {
+ cursor: 'pointer',
+ ':hover': {
+ opacity: 0.8,
+ },
+ },
+ errorText: {
+ color: tokens.colorPaletteRedForeground1,
+ },
+ warningIcon: {
+ color: tokens.colorPaletteYellowForeground2,
+ display: 'flex',
+ alignItems: 'center',
+ },
+})
+
+interface LabelsBarProps {
+ labels: Record
+ onLabelsChange: (labels: Record) => void
+}
+
+export default function LabelsBar({ labels, onLabelsChange }: LabelsBarProps) {
+ const styles = useStyles()
+ const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+ const [newKey, setNewKey] = useState('')
+ const [newValue, setNewValue] = useState('')
+ const [editingLabel, setEditingLabel] = useState(null)
+ const [editValue, setEditValue] = useState('')
+ const [error, setError] = useState('')
+ const [existingLabels, setExistingLabels] = useState>({})
+ const editInputRef = useRef(null)
+
+ // Fetch existing label keys/values for suggestions
+ useEffect(() => {
+ labelsApi.getLabels()
+ .then(resp => setExistingLabels(resp.labels))
+ .catch(() => { /* ignore */ })
+ }, [])
+
+ const isDummyValue = useCallback((key: string, value: string): boolean => {
+ return DUMMY_VALUES[key] === value
+ }, [])
+
+ const hasDummyValues = Object.entries(labels).some(([k, v]) => isDummyValue(k, v))
+
+ const validateKey = (key: string): string | null => {
+ if (!key) return 'Key is required'
+ if (key !== key.toLowerCase()) return 'Labels must be lowercase'
+ if (!/^[a-z][a-z0-9_]*$/.test(key)) return 'Only lowercase letters, numbers, underscores'
+ if (key in labels) return 'Label key already exists'
+ return null
+ }
+
+ const validateValue = (value: string): string | null => {
+ if (!value) return 'Value is required'
+ if (value !== value.toLowerCase()) return 'Values must be lowercase'
+ if (!/^[a-z0-9_]+$/.test(value)) return 'Only lowercase letters, numbers, underscores'
+ return null
+ }
+
+ const handleAddLabel = () => {
+ const keyError = validateKey(newKey)
+ if (keyError) { setError(keyError); return }
+ const valueError = validateValue(newValue)
+ if (valueError) { setError(valueError); return }
+
+ onLabelsChange({ ...labels, [newKey]: newValue })
+ setNewKey('')
+ setNewValue('')
+ setError('')
+ setIsPopoverOpen(false)
+ }
+
+ const handleRemoveLabel = (key: string) => {
+ // Don't allow removing operator or operation — they're required
+ if (key === 'operator' || key === 'operation') return
+ const next = { ...labels }
+ delete next[key]
+ onLabelsChange(next)
+ }
+
+ const handleStartEdit = (key: string) => {
+ setEditingLabel(key)
+ setEditValue(labels[key])
+ setError('')
+ setTimeout(() => editInputRef.current?.focus(), 50)
+ }
+
+ const handleSaveEdit = () => {
+ if (!editingLabel) return
+ const valueError = validateValue(editValue)
+ if (valueError) { setError(valueError); return }
+ onLabelsChange({ ...labels, [editingLabel]: editValue })
+ setEditingLabel(null)
+ setEditValue('')
+ setError('')
+ }
+
+ const handleEditKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter') handleSaveEdit()
+ if (e.key === 'Escape') { setEditingLabel(null); setError('') }
+ }
+
+ const handleAddKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter') handleAddLabel()
+ if (e.key === 'Escape') setIsPopoverOpen(false)
+ }
+
+ // Suggestions: show existing keys not yet used, and values for the current key
+ const suggestedKeys = Object.keys(existingLabels).filter(k => !(k in labels))
+ const suggestedValues = (editingLabel ? existingLabels[editingLabel] : existingLabels[newKey]) || []
+
+ // Overflow detection: track which labels are visible
+ const containerRef = useRef(null)
+ const [visibleCount, setVisibleCount] = useState(Infinity)
+
+ const labelEntries = useMemo(() => Object.entries(labels), [labels])
+
+ useEffect(() => {
+ const el = containerRef.current
+ if (!el) return
+
+ const check = () => {
+ const children = Array.from(el.children) as HTMLElement[]
+ if (children.length === 0) { setVisibleCount(Infinity); return }
+
+ const containerRight = el.getBoundingClientRect().right
+ let count = 0
+ for (const child of children) {
+ // Skip the overflow badge and add button (last elements)
+ if (child.dataset.labelIdx === undefined) continue
+ if (child.getBoundingClientRect().right <= containerRight + 2) {
+ count++
+ } else {
+ break
+ }
+ }
+ setVisibleCount(count)
+ }
+
+ const observer = new ResizeObserver(check)
+ observer.observe(el)
+ check()
+ return () => observer.disconnect()
+ }, [labelEntries])
+
+ const overflowEntries = visibleCount < labelEntries.length
+ ? labelEntries.slice(visibleCount)
+ : []
+
+ const renderLabelBadge = (key: string, value: string, idx: number) => {
+ const isDummy = isDummyValue(key, value)
+ const isRequired = key === 'operator' || key === 'operation'
+ const isEditing = editingLabel === key
+
+ if (isEditing) {
+ const filteredSuggestions = suggestedValues
+ .filter(v => v !== value && v.includes(editValue))
+ .slice(0, 8)
+ return (
+
+
{key}:
+
{ setEditValue(d.value.toLowerCase()); setError('') }}
+ onKeyDown={handleEditKeyDown}
+ onBlur={() => { setTimeout(handleSaveEdit, 150) }}
+ style={{ width: '120px' }}
+ data-testid={`edit-label-${key}`}
+ />
+ {error &&
{error}}
+ {filteredSuggestions.length > 0 && (
+
+ {filteredSuggestions.map(v => (
+ { onLabelsChange({ ...labels, [key]: v }); setEditingLabel(null); setEditValue('') }}
+ >{v}
+ ))}
+
+ )}
+
handleStartEdit(key)}
+ data-testid={`label-${key}`}
+ style={{ flexShrink: 0 }}
+ >
+ {key}:
+ {value}
+ {!isRequired && (
+ }
+ onClick={(e) => { e.stopPropagation(); handleRemoveLabel(key) }}
+ data-testid={`remove-label-${key}`}
+ />
+ )}
+
+
+ )
+ }
+
+ return (
+
+ {hasDummyValues && (
+
+
+
+
+
+ )}
+
+
+ {labelEntries.map(([key, value], idx) => renderLabelBadge(key, value, idx))}
+
+ {overflowEntries.length > 0 && (
+
+
+
+ +{overflowEntries.length} more
+
+
+
+
+
All Labels
+
+ {labelEntries.map(([key, value]) => {
+ const isDummy = isDummyValue(key, value)
+ const isRequired = key === 'operator' || key === 'operation'
+ return (
+
handleStartEdit(key)}
+ style={{ flexShrink: 0 }}
+ >
+ {key}:
+ {value}
+ {!isRequired && (
+ }
+ onClick={(e) => { e.stopPropagation(); handleRemoveLabel(key) }}
+ />
+ )}
+
+ )
+ })}
+
+
+ )}
+
+
+
{ setIsPopoverOpen(d.open); setError('') }}>
+
+ }
+ data-testid="add-label-btn"
+ style={{ flexShrink: 0 }}
+ >
+ Add
+
+
+
+
+
Add Label
+
+ { setNewKey(d.value.toLowerCase()); setError('') }}
+ onKeyDown={handleAddKeyDown}
+ data-testid="new-label-key"
+ />
+ { setNewValue(d.value.toLowerCase()); setError('') }}
+ onKeyDown={handleAddKeyDown}
+ data-testid="new-label-value"
+ />
+
+
+ {suggestedKeys.length > 0 && !newKey && (
+ <>
+
Existing keys:
+
+ {suggestedKeys.slice(0, 8).map(k => (
+ setNewKey(k)}
+ >{k}
+ ))}
+
+
+ )}
+ {newKey && suggestedValues.length > 0 && (
+ <>
+
Existing values for "{newKey}":
+
+ {suggestedValues.slice(0, 8).map(v => (
+ setNewValue(v)}
+ >{v}
+ ))}
+
+
+ )}
+ {error &&
{error}}
+
+
+
+
);
};
+ MockNavigation.displayName = "MockNavigation";
+ return {
+ __esModule: true,
+ default: MockNavigation,
+ };
});
import { versionApi } from "../../services/api";
@@ -44,11 +54,18 @@ describe("MainLayout", () => {
jest.clearAllMocks();
});
+ const defaultProps = {
+ onToggleTheme: jest.fn(),
+ isDarkMode: false,
+ currentView: 'chat' as const,
+ onNavigate: jest.fn(),
+ };
+
it("renders the header with title and subtitle", async () => {
mockedVersionApi.getVersion.mockResolvedValue({ version: "1.0.0" });
renderWithProvider(
-
+
Child Content
);
@@ -68,7 +85,7 @@ describe("MainLayout", () => {
mockedVersionApi.getVersion.mockResolvedValue({ version: "1.0.0" });
renderWithProvider(
-
+
Child Content
);
@@ -84,7 +101,7 @@ describe("MainLayout", () => {
mockedVersionApi.getVersion.mockResolvedValue({ version: "1.0.0" });
renderWithProvider(
-
+
Content
);
@@ -105,7 +122,7 @@ describe("MainLayout", () => {
});
renderWithProvider(
-
+
Content
);
@@ -119,7 +136,7 @@ describe("MainLayout", () => {
mockedVersionApi.getVersion.mockRejectedValue(new Error("API Error"));
renderWithProvider(
-
+
Content
);
@@ -133,7 +150,7 @@ describe("MainLayout", () => {
mockedVersionApi.getVersion.mockResolvedValue({ version: "1.0.0" });
renderWithProvider(
-
+
Content
);
diff --git a/frontend/src/components/Layout/MainLayout.tsx b/frontend/src/components/Layout/MainLayout.tsx
index ef42026680..ad7159b63c 100644
--- a/frontend/src/components/Layout/MainLayout.tsx
+++ b/frontend/src/components/Layout/MainLayout.tsx
@@ -6,7 +6,7 @@ import {
Tooltip,
} from '@fluentui/react-components'
import { versionApi } from '../../services/api'
-import Navigation from '../Sidebar/Navigation'
+import Navigation, { type ViewName } from '../Sidebar/Navigation'
const useStyles = makeStyles({
root: {
@@ -62,28 +62,36 @@ const useStyles = makeStyles({
interface MainLayoutProps {
children: React.ReactNode
+ currentView: ViewName
+ onNavigate: (view: ViewName) => void
onToggleTheme: () => void
isDarkMode: boolean
}
export default function MainLayout({
children,
+ currentView,
+ onNavigate,
onToggleTheme,
isDarkMode,
}: MainLayoutProps) {
const styles = useStyles()
const [version, setVersion] = useState('Loading...')
+ const [databaseInfo, setDatabaseInfo] = useState(null)
useEffect(() => {
versionApi.getVersion()
- .then(data => setVersion(data.display || data.version))
+ .then(data => {
+ setVersion(data.display || data.version)
+ setDatabaseInfo(data.database_info ?? null)
+ })
.catch(() => setVersion('Unknown'))
}, [])
return (
-
+ {`PyRIT ${version}`}{databaseInfo && <>
{databaseInfo}}} relationship="label">
