Render the system prompt as a sticky banner above the transcript

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

Author: adrian-gavrila

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

@@ -532,6 +532,29 @@ describe("ChatWindow Integration", () => {
       ).not.toBeInTheDocument();
     });
 
+    it("renders a system prompt banner when the loaded conversation has a system message", async () => {
+      mockedAttacksApi.getMessages.mockResolvedValue({ messages: [] });
+      mockedMapper.backendMessagesToFrontend.mockReturnValue([
+        { role: "system", content: "You are a pirate.", timestamp: "2026-01-01T00:00:00Z" },
+        { role: "user", content: "Ahoy", timestamp: "2026-01-01T00:00:01Z" },
+      ]);
+
+      render(
+        <TestWrapper>
+          <ChatWindow
+            {...defaultProps}
+            activeTarget={supportedTarget}
+            attackResultId="ar-existing"
+            conversationId="conv-existing"
+            activeConversationId="conv-existing"
+          />
+        </TestWrapper>
+      );
+
+      expect(await screen.findByTestId("system-prompt-banner")).toBeInTheDocument();
+      expect(screen.getByText("You are a pirate.")).toBeInTheDocument();
+    });
+
     it("forwards the typed system prompt when the target supports it", async () => {
       const user = userEvent.setup();
       primeSendMocks();

frontend/src/components/Chat/ChatWindow.tsx

@@ -6,6 +6,7 @@ import {
 } from '@fluentui/react-components'
 import { AddRegular, PanelRightRegular } from '@fluentui/react-icons'
 import MessageList from './MessageList'
+import SystemPromptBanner from './SystemPromptBanner'
 import ChatInputArea from './ChatInputArea'
 import ConversationPanel from './ConversationPanel'
 import ConverterPanel from './ConverterPanel'
@@ -579,6 +580,8 @@ export default function ChatWindow({
     }
   }, [attackResultId, activeTarget, activeConversationId, messages, labels, onConversationCreated])
 
+  const systemMessage = messages.find(message => message.role === 'system')
+
   return (
     <div className={styles.root}>
       {isConverterPanelOpen && (
@@ -632,6 +635,7 @@ export default function ChatWindow({
             </Tooltip>
           </div>
         </div>
+        {systemMessage && <SystemPromptBanner content={systemMessage.content} />}
         <MessageList
           messages={messages}
           onCopyToInput={handleCopyToInput}

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

@@ -53,6 +53,26 @@ describe("MessageList", () => {
     expect(screen.getByText("Can you help me?")).toBeInTheDocument();
   });
 
+  it("should not render system messages as transcript bubbles", () => {
+    const withSystem: Message[] = [
+      {
+        role: "system",
+        content: "You are a pirate.",
+        timestamp: new Date().toISOString(),
+      },
+      ...mockMessages,
+    ];
+
+    render(
+      <TestWrapper>
+        <MessageList messages={withSystem} />
+      </TestWrapper>
+    );
+
+    expect(screen.queryByText("You are a pirate.")).not.toBeInTheDocument();
+    expect(screen.getByText("Hello, how are you?")).toBeInTheDocument();
+  });
+
   it("should render user messages", () => {
     const userMessages: Message[] = [
       {

frontend/src/components/Chat/MessageList.tsx

@@ -154,6 +154,7 @@ export default function MessageList({ messages, onCopyToInput, onCopyToNewConver
   return (
     <div className={styles.root}>
       {messages.map((message, index) => {
+        if (message.role === 'system') return null
         const isUser = message.role === 'user'
         const isSimulated = message.role === 'simulated_assistant'
         const timestamp = new Date(message.timestamp).toLocaleTimeString()

frontend/src/components/Chat/SystemPromptBanner.styles.ts

@@ -0,0 +1,38 @@
+import { makeStyles, tokens } from '@fluentui/react-components'
+
+export const useSystemPromptBannerStyles = makeStyles({
+  root: {
+    flexShrink: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalXXS,
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalL}`,
+    backgroundColor: tokens.colorNeutralBackground3,
+    borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+  },
+  header: {
+    alignSelf: 'flex-start',
+    color: tokens.colorNeutralForeground2,
+  },
+  label: {
+    alignSelf: 'flex-start',
+    color: tokens.colorNeutralForeground2,
+    fontWeight: tokens.fontWeightSemibold,
+  },
+  content: {
+    color: tokens.colorNeutralForeground3,
+    fontSize: tokens.fontSizeBase200,
+    paddingLeft: tokens.spacingHorizontalL,
+  },
+  contentCollapsed: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  contentExpanded: {
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    maxHeight: '30vh',
+    overflowY: 'auto',
+  },
+})

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

@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { FluentProvider, webLightTheme } from '@fluentui/react-components'
+import SystemPromptBanner from './SystemPromptBanner'
+
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <FluentProvider theme={webLightTheme}>{children}</FluentProvider>
+)
+
+// jsdom has no layout engine, so scrollWidth/clientWidth are 0 by default (no overflow).
+// Force overflow by overriding the prototype getters for the duration of a test.
+function mockOverflow(scrollWidth: number, clientWidth: number) {
+  Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, get: () => scrollWidth })
+  Object.defineProperty(HTMLElement.prototype, 'clientWidth', { configurable: true, get: () => clientWidth })
+}
+
+describe('SystemPromptBanner', () => {
+  afterEach(() => {
+    delete (HTMLElement.prototype as { scrollWidth?: number }).scrollWidth
+    delete (HTMLElement.prototype as { clientWidth?: number }).clientWidth
+  })
+
+  it('renders the label and the system prompt content', () => {
+    render(
+      <TestWrapper>
+        <SystemPromptBanner content="You are a pirate." />
+      </TestWrapper>
+    )
+
+    expect(screen.getByText('System Prompt')).toBeInTheDocument()
+    expect(screen.getByText('You are a pirate.')).toBeInTheDocument()
+  })
+
+  it('does not render an expand toggle when the content fits on one line', () => {
+    render(
+      <TestWrapper>
+        <SystemPromptBanner content="Be terse." />
+      </TestWrapper>
+    )
+
+    expect(screen.queryByRole('button', { name: /system prompt/i })).not.toBeInTheDocument()
+  })
+
+  it('renders a collapsed expand toggle when the content overflows', () => {
+    mockOverflow(1000, 200)
+    render(
+      <TestWrapper>
+        <SystemPromptBanner content="A very long system prompt that does not fit on one line." />
+      </TestWrapper>
+    )
+
+    expect(screen.getByRole('button', { name: /system prompt/i })).toHaveAttribute('aria-expanded', 'false')
+  })
+
+  it('expands when the overflowing header is clicked', async () => {
+    const user = userEvent.setup()
+    mockOverflow(1000, 200)
+    render(
+      <TestWrapper>
+        <SystemPromptBanner content="A very long system prompt that does not fit on one line." />
+      </TestWrapper>
+    )
+
+    const toggle = screen.getByRole('button', { name: /system prompt/i })
+    await user.click(toggle)
+
+    expect(toggle).toHaveAttribute('aria-expanded', 'true')
+  })
+})

frontend/src/components/Chat/SystemPromptBanner.tsx

@@ -0,0 +1,54 @@
+import { useLayoutEffect, useRef, useState } from 'react'
+import { Button, Caption1, Text, mergeClasses } from '@fluentui/react-components'
+import { ChevronDownRegular, ChevronRightRegular } from '@fluentui/react-icons'
+import { useSystemPromptBannerStyles } from './SystemPromptBanner.styles'
+
+interface SystemPromptBannerProps {
+  content: string
+}
+
+export default function SystemPromptBanner({ content }: SystemPromptBannerProps) {
+  const styles = useSystemPromptBannerStyles()
+  const [expanded, setExpanded] = useState(false)
+  const [overflowing, setOverflowing] = useState(false)
+  const contentRef = useRef<HTMLElement>(null)
+
+  useLayoutEffect(() => {
+    const el = contentRef.current
+    if (!el) return
+    const measure = () => setOverflowing(el.scrollWidth > el.clientWidth)
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [content])
+
+  const expandable = overflowing || expanded
+
+  return (
+    <div className={styles.root} data-testid="system-prompt-banner">
+      {expandable ? (
+        <Button
+          appearance="transparent"
+          size="small"
+          icon={expanded ? <ChevronDownRegular /> : <ChevronRightRegular />}
+          onClick={() => setExpanded(prev => !prev)}
+          className={styles.header}
+          data-testid="toggle-system-prompt-banner-btn"
+          aria-expanded={expanded}
+        >
+          System Prompt
+        </Button>
+      ) : (
+        <Caption1 className={styles.label}>System Prompt</Caption1>
+      )}
+      <Text
+        ref={contentRef}
+        className={mergeClasses(styles.content, expanded ? styles.contentExpanded : styles.contentCollapsed)}
+        data-testid="system-prompt-banner-content"
+      >
+        {content}
+      </Text>
+    </div>
+  )
+}