{activeTarget ? (
diff --git a/frontend/src/components/Scenarios/ScenarioFlow.test.tsx b/frontend/src/components/Scenarios/ScenarioFlow.test.tsx
new file mode 100644
index 0000000000..a4fec85ae8
--- /dev/null
+++ b/frontend/src/components/Scenarios/ScenarioFlow.test.tsx
@@ -0,0 +1,211 @@
+import { render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { FluentProvider, webLightTheme } from '@fluentui/react-components'
+import { MemoryRouter, Route, Routes, useLocation } from 'react-router'
+
+import { useScenarioRunProgress } from '@/hooks/useScenarioRunProgress'
+import { scenariosApi, targetsApi } from '@/services/api'
+import type {
+ RegisteredScenario,
+ ScenarioDefaultRunSizeEstimate,
+ TargetInstance,
+} from '@/types'
+import type { ScenarioRunProgressState } from '@/utils/scenarioRunProgress'
+
+import ScenarioCatalog from './ScenarioCatalog'
+import ScenarioDetail from './ScenarioDetail'
+import ScenarioRunPage from './ScenarioRunPage'
+
+jest.mock('@/hooks/useScenarioRunProgress', () => ({
+ useScenarioRunProgress: jest.fn(),
+}))
+
+jest.mock('@/services/api', () => ({
+ scenariosApi: {
+ cancelRun: jest.fn(),
+ estimateRun: jest.fn(),
+ getScenario: jest.fn(),
+ listCatalog: jest.fn(),
+ startRun: jest.fn(),
+ },
+ targetsApi: {
+ listTargets: jest.fn(),
+ },
+}))
+
+const mockUseScenarioRunProgress = useScenarioRunProgress as jest.Mock
+const mockEstimateRun = scenariosApi.estimateRun as jest.Mock
+const mockGetScenario = scenariosApi.getScenario as jest.Mock
+const mockListCatalog = scenariosApi.listCatalog as jest.Mock
+const mockStartRun = scenariosApi.startRun as jest.Mock
+const mockListTargets = targetsApi.listTargets as jest.Mock
+
+const SCENARIO_NAME = 'foundry.red_team_agent'
+const RUN_ID = '123e4567-e89b-12d3-a456-426614174000'
+
+const SCENARIO: RegisteredScenario = {
+ scenario_name: SCENARIO_NAME,
+ scenario_type: 'RedTeamAgentScenario',
+ scenario_version: 1,
+ description: 'Red teams a configured target.',
+ description_markdown: 'Red teams a configured target.',
+ default_technique: 'default_technique',
+ default_techniques: ['crescendo'],
+ aggregate_techniques: ['default_technique'],
+ aggregate_technique_expansions: {
+ default_technique: ['crescendo'],
+ },
+ all_techniques: ['crescendo'],
+ default_datasets: ['harmbench'],
+ default_dataset_summaries: [],
+ baseline_policy: 'enabled',
+ include_baseline_by_default: true,
+ supported_parameters: [],
+ default_run_size: {
+ version: 1,
+ status: 'exact',
+ total_attack_count: 2,
+ components: [],
+ datasets: [],
+ note: null,
+ retries_included: false,
+ },
+}
+
+const TARGET: TargetInstance = {
+ target_registry_name: 'target-a',
+ identifier: {
+ class_name: 'OpenAIChatTarget',
+ hash: 'target-a-hash',
+ },
+}
+
+const ESTIMATE: ScenarioDefaultRunSizeEstimate = {
+ version: 1,
+ status: 'exact',
+ total_attack_count: 2,
+ components: [{
+ label: 'Configured attacks',
+ count: 2,
+ factors: [],
+ is_baseline: false,
+ note: null,
+ }],
+ datasets: [],
+ note: null,
+ retries_included: false,
+}
+
+const RUN_STATE: ScenarioRunProgressState = {
+ loadStatus: 'ready',
+ run: {
+ scenario_result_id: RUN_ID,
+ scenario_name: 'RedTeamAgentScenario',
+ scenario_registry_name: SCENARIO_NAME,
+ scenario_version: 1,
+ status: 'IN_PROGRESS',
+ created_at: '2026-08-07T18:00:00Z',
+ },
+ plan: {
+ version: 1,
+ scenario_registry_name: SCENARIO_NAME,
+ atomic_groups: [],
+ seed_groups: [],
+ },
+ planComplete: true,
+ activeAtomicGroupIds: [],
+ results: [],
+ cursor: 'cursor-0',
+ hasMore: false,
+ error: null,
+ stale: false,
+}
+
+function LocationProbe() {
+ const location = useLocation()
+ return
+}
+
+function renderFlow(): void {
+ render(
+
+
+
+
+ } />
+
+ )}
+ />
+ } />
+
+
+ ,
+ )
+}
+
+describe('Scenario catalog-to-run integration', () => {
+ beforeEach(() => {
+ jest.clearAllMocks()
+ mockListCatalog.mockResolvedValue({
+ items: [SCENARIO],
+ pagination: { limit: 200, has_more: false },
+ })
+ mockGetScenario.mockResolvedValue(SCENARIO)
+ mockListTargets.mockResolvedValue({
+ items: [TARGET],
+ pagination: { limit: 200, has_more: false },
+ })
+ mockEstimateRun.mockResolvedValue(ESTIMATE)
+ mockStartRun.mockResolvedValue({ scenario_result_id: RUN_ID })
+ mockUseScenarioRunProgress.mockReturnValue({
+ state: RUN_STATE,
+ retry: jest.fn(),
+ applyRunSummary: jest.fn(),
+ })
+ })
+
+ it('carries one configured request from catalog detail through estimate, launch, and run hydration', async () => {
+ const user = userEvent.setup()
+ renderFlow()
+
+ await user.click(await screen.findByRole('link', { name: SCENARIO_NAME }))
+ expect(await screen.findByRole('heading', { level: 1, name: SCENARIO_NAME })).toBeInTheDocument()
+
+ const expectedEstimateRequest = {
+ target_name: TARGET.target_registry_name,
+ techniques: ['default_technique'],
+ include_baseline: true,
+ }
+ await waitFor(() => expect(mockEstimateRun).toHaveBeenLastCalledWith(
+ SCENARIO_NAME,
+ expectedEstimateRequest,
+ expect.any(AbortSignal),
+ ))
+ expect(within(screen.getByRole('complementary', { name: 'Run preview' }))
+ .getByText('2 planned attacks')).toBeInTheDocument()
+
+ await user.click(screen.getByTestId('launch-scenario-btn'))
+
+ await waitFor(() => expect(mockStartRun).toHaveBeenCalledWith({
+ scenario_name: SCENARIO_NAME,
+ target_name: TARGET.target_registry_name,
+ techniques: expectedEstimateRequest.techniques,
+ max_concurrency: 10,
+ max_retries: 0,
+ include_baseline: expectedEstimateRequest.include_baseline,
+ labels: { operator: 'integration-test' },
+ }))
+ expect(await screen.findByTestId('scenario-run-page')).toBeInTheDocument()
+ expect(screen.getByLabelText('Current route')).toHaveTextContent(
+ `/scenario-history/${RUN_ID}`,
+ )
+ expect(screen.getByRole('heading', { level: 1, name: SCENARIO_NAME })).toBeInTheDocument()
+ })
+})
diff --git a/frontend/src/components/Scenarios/ScenarioRunPage.styles.ts b/frontend/src/components/Scenarios/ScenarioRunPage.styles.ts
new file mode 100644
index 0000000000..4620bffa77
--- /dev/null
+++ b/frontend/src/components/Scenarios/ScenarioRunPage.styles.ts
@@ -0,0 +1,298 @@
+import { makeStyles, tokens } from '@fluentui/react-components'
+
+import {
+ MINIMUM_TOUCH_TARGET_SIZE,
+ NARROW_VIEWPORT_QUERY,
+ mobileTouchTarget,
+} from '@/styles/touchTargets'
+
+export const useScenarioRunPageStyles = makeStyles({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ width: '100%',
+ height: '100%',
+ minWidth: 0,
+ overflowY: 'auto',
+ overflowX: 'hidden',
+ backgroundColor: tokens.colorNeutralBackground2,
+ },
+ content: {
+ display: 'flex',
+ flexDirection: 'column',
+ width: '100%',
+ maxWidth: '96rem',
+ gap: tokens.spacingVerticalXL,
+ padding: tokens.spacingVerticalXXL,
+ marginInline: 'auto',
+ [NARROW_VIEWPORT_QUERY]: {
+ padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalM}`,
+ gap: tokens.spacingVerticalL,
+ },
+ },
+ backLink: {
+ display: 'inline-flex',
+ alignItems: 'center',
+ alignSelf: 'flex-start',
+ gap: tokens.spacingHorizontalXS,
+ minHeight: MINIMUM_TOUCH_TARGET_SIZE,
+ color: tokens.colorBrandForegroundLink,
+ textDecorationLine: 'none',
+ ':hover': {
+ textDecorationLine: 'underline',
+ },
+ ':focus-visible': {
+ outline: `2px solid ${tokens.colorStrokeFocus2}`,
+ outlineOffset: '2px',
+ },
+ },
+ header: {
+ display: 'flex',
+ alignItems: 'flex-start',
+ justifyContent: 'space-between',
+ gap: tokens.spacingHorizontalXL,
+ [NARROW_VIEWPORT_QUERY]: {
+ flexDirection: 'column',
+ alignItems: 'stretch',
+ },
+ },
+ headerIdentity: {
+ display: 'flex',
+ flexDirection: 'column',
+ minWidth: 0,
+ gap: tokens.spacingVerticalXS,
+ },
+ titleRow: {
+ display: 'flex',
+ alignItems: 'center',
+ flexWrap: 'wrap',
+ gap: tokens.spacingHorizontalS,
+ },
+ runId: {
+ color: tokens.colorNeutralForeground3,
+ overflowWrap: 'anywhere',
+ },
+ headerActions: {
+ display: 'flex',
+ flexShrink: 0,
+ gap: tokens.spacingHorizontalS,
+ [NARROW_VIEWPORT_QUERY]: {
+ width: '100%',
+ },
+ },
+ touchTarget: {
+ ...mobileTouchTarget,
+ },
+ wideButton: {
+ [NARROW_VIEWPORT_QUERY]: {
+ flexGrow: 1,
+ },
+ },
+ metadata: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(3, minmax(10rem, 1fr))',
+ gap: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXL}`,
+ paddingTop: tokens.spacingVerticalM,
+ borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
+ [NARROW_VIEWPORT_QUERY]: {
+ gridTemplateColumns: '1fr',
+ },
+ },
+ metadataItem: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: tokens.spacingVerticalXXS,
+ minWidth: 0,
+ },
+ metadataLabel: {
+ color: tokens.colorNeutralForeground3,
+ },
+ section: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: tokens.spacingVerticalM,
+ },
+ sectionHeading: {
+ display: 'flex',
+ alignItems: 'baseline',
+ justifyContent: 'space-between',
+ flexWrap: 'wrap',
+ gap: tokens.spacingHorizontalM,
+ },
+ sectionHint: {
+ color: tokens.colorNeutralForeground3,
+ },
+ progressSurface: {
+ display: 'grid',
+ gridTemplateColumns: 'minmax(14rem, 2fr) repeat(2, minmax(8rem, 1fr))',
+ gap: tokens.spacingHorizontalXL,
+ alignItems: 'center',
+ padding: tokens.spacingVerticalL,
+ border: `1px solid ${tokens.colorNeutralStroke2}`,
+ borderRadius: tokens.borderRadiusLarge,
+ backgroundColor: tokens.colorNeutralBackground1,
+ [NARROW_VIEWPORT_QUERY]: {
+ gridTemplateColumns: '1fr',
+ gap: tokens.spacingVerticalM,
+ },
+ },
+ progressPrimary: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: tokens.spacingVerticalS,
+ minWidth: 0,
+ },
+ progressText: {
+ display: 'flex',
+ alignItems: 'baseline',
+ justifyContent: 'space-between',
+ gap: tokens.spacingHorizontalM,
+ },
+ metric: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: tokens.spacingVerticalXXS,
+ },
+ metricLabel: {
+ color: tokens.colorNeutralForeground3,
+ },
+ metricValue: {
+ fontVariantNumeric: 'tabular-nums',
+ },
+ summaryGrid: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(auto-fit, minmax(15rem, 1fr))',
+ gap: tokens.spacingHorizontalM,
+ },
+ summaryItem: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: tokens.spacingVerticalS,
+ padding: tokens.spacingVerticalL,
+ borderTop: `1px solid ${tokens.colorNeutralStroke1}`,
+ backgroundColor: tokens.colorNeutralBackground1,
+ },
+ summaryTitle: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ gap: tokens.spacingHorizontalS,
+ },
+ summaryStats: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(3, 1fr)',
+ gap: tokens.spacingHorizontalS,
+ },
+ summaryStat: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: tokens.spacingVerticalXXS,
+ },
+ tableScroll: {
+ width: '100%',
+ overflowX: 'auto',
+ border: `1px solid ${tokens.colorNeutralStroke2}`,
+ borderRadius: tokens.borderRadiusLarge,
+ backgroundColor: tokens.colorNeutralBackground1,
+ },
+ table: {
+ minWidth: '64rem',
+ tableLayout: 'auto',
+ },
+ attemptsTable: {
+ minWidth: '68rem',
+ tableLayout: 'auto',
+ },
+ clickableAttemptRow: {
+ cursor: 'pointer',
+ ':hover': {
+ backgroundColor: tokens.colorNeutralBackground1Hover,
+ },
+ ':focus-visible': {
+ outline: `2px solid ${tokens.colorStrokeFocus2}`,
+ outlineOffset: '-2px',
+ },
+ },
+ nowrap: {
+ whiteSpace: 'nowrap',
+ fontVariantNumeric: 'tabular-nums',
+ },
+ preview: {
+ display: 'block',
+ maxWidth: '24rem',
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ },
+ attackLink: {
+ display: 'inline-flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ minWidth: MINIMUM_TOUCH_TARGET_SIZE,
+ minHeight: MINIMUM_TOUCH_TARGET_SIZE,
+ textDecorationLine: 'none',
+ borderRadius: tokens.borderRadiusMedium,
+ ':hover': {
+ backgroundColor: tokens.colorSubtleBackgroundHover,
+ },
+ ':focus-visible': {
+ outline: `2px solid ${tokens.colorStrokeFocus2}`,
+ outlineOffset: '2px',
+ },
+ },
+ objectiveButton: {
+ maxWidth: '26rem',
+ justifyContent: 'flex-start',
+ ...mobileTouchTarget,
+ },
+ emptyState: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: tokens.spacingVerticalS,
+ minHeight: '8rem',
+ padding: tokens.spacingVerticalXXL,
+ color: tokens.colorNeutralForeground3,
+ textAlign: 'center',
+ },
+ centeredState: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: tokens.spacingVerticalM,
+ minHeight: '18rem',
+ textAlign: 'center',
+ },
+ loadingBlock: {
+ width: 'min(42rem, 100%)',
+ },
+ dialogContent: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: tokens.spacingVerticalM,
+ overflowWrap: 'anywhere',
+ },
+ detailGrid: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+ gap: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalL}`,
+ [NARROW_VIEWPORT_QUERY]: {
+ gridTemplateColumns: '1fr',
+ },
+ },
+ objective: {
+ whiteSpace: 'pre-wrap',
+ overflowWrap: 'anywhere',
+ },
+ liveStatus: {
+ position: 'absolute',
+ width: '1px',
+ height: '1px',
+ overflow: 'hidden',
+ clip: 'rect(0 0 0 0)',
+ clipPath: 'inset(50%)',
+ whiteSpace: 'nowrap',
+ },
+})
diff --git a/frontend/src/components/Scenarios/ScenarioRunPage.test.tsx b/frontend/src/components/Scenarios/ScenarioRunPage.test.tsx
new file mode 100644
index 0000000000..4c3c772308
--- /dev/null
+++ b/frontend/src/components/Scenarios/ScenarioRunPage.test.tsx
@@ -0,0 +1,359 @@
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { FluentProvider, webLightTheme } from '@fluentui/react-components'
+import {
+ MemoryRouter,
+ Route,
+ Routes,
+ useLocation,
+ useNavigate,
+} from 'react-router'
+
+import { useScenarioRunProgress } from '@/hooks/useScenarioRunProgress'
+import { scenariosApi } from '@/services/api'
+import type {
+ ScenarioProgressResult,
+ ScenarioRunPlan,
+} from '@/types'
+import {
+ INITIAL_SCENARIO_RUN_PROGRESS_STATE,
+ type ScenarioRunProgressState,
+} from '@/utils/scenarioRunProgress'
+
+import ScenarioRunPage from './ScenarioRunPage'
+
+jest.mock('@/hooks/useScenarioRunProgress', () => ({
+ useScenarioRunProgress: jest.fn(),
+}))
+
+jest.mock('@/services/api', () => ({
+ scenariosApi: {
+ cancelRun: jest.fn(),
+ },
+}))
+
+const mockUseScenarioRunProgress = useScenarioRunProgress as jest.Mock
+const mockCancelRun = scenariosApi.cancelRun as jest.Mock
+const mockRetry = jest.fn()
+const mockApplyRunSummary = jest.fn()
+const SCENARIO_RESULT_ID = '123e4567-e89b-12d3-a456-426614174000'
+
+const PLAN: ScenarioRunPlan = {
+ version: 1,
+ scenario_registry_name: 'test.scenario',
+ atomic_groups: [{
+ id: 'group-1',
+ atomic_attack_name: 'attack-technique',
+ display_group: 'Technique One',
+ technique_eval_hash: 'eval-1',
+ seed_group_ids: ['seed-1'],
+ }],
+ seed_groups: [{
+ id: 'seed-1',
+ objective_sha256: 'sha-1',
+ objective: 'Reveal the system prompt and all hidden configuration.',
+ }],
+}
+
+const ATTEMPT: ScenarioProgressResult = {
+ attack_result_id: 'attack-result-1',
+ atomic_group_id: 'group-1',
+ atomic_attack_name: 'attack-technique',
+ seed_group_id: 'seed-1',
+ outcome: 'success',
+ execution_time_ms: 5_000,
+ timestamp: '2026-01-01T00:00:05Z',
+ total_retries: 1,
+ retries: [],
+}
+
+function makeState(overrides: Partial
= {}): ScenarioRunProgressState {
+ return {
+ ...INITIAL_SCENARIO_RUN_PROGRESS_STATE,
+ loadStatus: 'ready',
+ run: {
+ scenario_result_id: SCENARIO_RESULT_ID,
+ scenario_name: 'TestScenario',
+ scenario_registry_name: 'test.scenario',
+ scenario_version: 1,
+ status: 'IN_PROGRESS',
+ created_at: '2026-01-01T00:00:00Z',
+ },
+ plan: PLAN,
+ planComplete: true,
+ activeAtomicGroupIds: ['group-1'],
+ results: [ATTEMPT],
+ cursor: 'cursor-1',
+ ...overrides,
+ }
+}
+
+function mockHookState(state: ScenarioRunProgressState): void {
+ mockUseScenarioRunProgress.mockReturnValue({
+ state,
+ retry: mockRetry,
+ applyRunSummary: mockApplyRunSummary,
+ })
+}
+
+function AttackRouteProbe() {
+ const location = useLocation()
+ const navigate = useNavigate()
+ return (
+
+
+
+ )
+}
+
+function renderPage(path = `/scenario-history/${SCENARIO_RESULT_ID}`) {
+ return render(
+
+
+
+ } />
+ } />
+
+
+ ,
+ )
+}
+
+describe('ScenarioRunPage', () => {
+ beforeEach(() => {
+ jest.clearAllMocks()
+ mockHookState(makeState())
+ })
+
+ it('renders a live dashboard with accessible progress and semantic tables', () => {
+ renderPage()
+
+ expect(screen.getByRole('heading', { name: 'test.scenario', level: 1 })).toBeInTheDocument()
+ expect(screen.getByTestId('run-state-badge')).toHaveTextContent('In progress')
+ expect(screen.getByRole('progressbar', { name: 'Overall scenario run progress' })).toHaveAttribute(
+ 'aria-valuetext',
+ '1 of 1 executable units completed',
+ )
+ expect(screen.getByRole('table', { name: 'Atomic attack groups' })).toBeInTheDocument()
+ expect(screen.getByRole('table', { name: 'Logical seed groups' })).toBeInTheDocument()
+ expect(screen.getByRole('table', { name: 'Persisted attack attempts' })).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'Cancel run' })).toBeInTheDocument()
+ expect(screen.queryByRole('columnheader', { name: 'Actions' })).not.toBeInTheDocument()
+ })
+
+ it('keeps legacy runs useful without misleading totals, ETA, or a progress bar', () => {
+ mockHookState(makeState({ planComplete: false }))
+
+ renderPage()
+
+ expect(screen.getByText(/legacy run has no complete persisted execution plan/i)).toBeInTheDocument()
+ expect(screen.getAllByText(/1 known completed units; planned total unavailable/i)).toHaveLength(2)
+ expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
+ expect(screen.getByText('Progress percentage unavailable')).toBeInTheDocument()
+ expect(screen.getAllByText('Unavailable').length).toBeGreaterThan(0)
+ expect(screen.getAllByText('1/total unavailable').length).toBeGreaterThan(0)
+ expect(screen.queryByText('1/1')).not.toBeInTheDocument()
+ expect(screen.getByRole('link', { name: 'Open attack attack-result-1' })).toBeInTheDocument()
+ })
+
+ it('shows a stale warning and retries from the explicit action', async () => {
+ const user = userEvent.setup()
+ mockHookState(makeState({ stale: true, error: 'Network unavailable' }))
+
+ renderPage()
+ await user.click(screen.getByRole('button', { name: 'Retry' }))
+
+ expect(mockRetry).toHaveBeenCalledTimes(1)
+ expect(screen.getByText(/showing the last successfully loaded progress/i)).toBeInTheDocument()
+ })
+
+ it('cancels after confirmation and immediately applies the returned terminal state', async () => {
+ const user = userEvent.setup()
+ const cancelledRun = {
+ scenario_result_id: 'run-1',
+ scenario_name: 'TestScenario',
+ scenario_registry_name: 'test.scenario',
+ scenario_version: 1,
+ status: 'CANCELLED',
+ created_at: '2026-01-01T00:00:00Z',
+ updated_at: '2026-01-01T00:01:00Z',
+ completed_at: '2026-01-01T00:01:00Z',
+ techniques_used: [],
+ total_attacks: 1,
+ completed_attacks: 1,
+ objective_achieved_rate: 100,
+ failed_attacks: [],
+ attack_retries: [],
+ total_retries: 0,
+ labels: {},
+ }
+ mockCancelRun.mockResolvedValueOnce(cancelledRun)
+
+ renderPage()
+ await user.click(screen.getByRole('button', { name: 'Cancel run' }))
+ const dialog = screen.getByRole('dialog', { name: 'Cancel this scenario run?' })
+ await user.click(within(dialog).getByRole('button', { name: 'Cancel run' }))
+
+ await waitFor(() => expect(mockApplyRunSummary).toHaveBeenCalledWith(cancelledRun))
+ expect(mockCancelRun).toHaveBeenCalledWith(SCENARIO_RESULT_ID)
+ })
+
+ it('keeps the confirmation open and shows cancel conflicts', async () => {
+ const user = userEvent.setup()
+ mockCancelRun.mockRejectedValueOnce(new Error('Cannot cancel a completed run.'))
+
+ renderPage()
+ await user.click(screen.getByRole('button', { name: 'Cancel run' }))
+ const dialog = screen.getByRole('dialog', { name: 'Cancel this scenario run?' })
+ await user.click(within(dialog).getByRole('button', { name: 'Cancel run' }))
+
+ expect(await within(dialog).findByText('Cannot cancel a completed run.')).toBeInTheDocument()
+ expect(mockApplyRunSummary).not.toHaveBeenCalled()
+ })
+
+ it('shows full objective details and restores focus on close', async () => {
+ const user = userEvent.setup()
+ renderPage()
+ const detailsButton = screen.getByRole('button', {
+ name: 'View details for attack attempt attack-result-1',
+ })
+
+ await user.click(detailsButton)
+ const dialog = screen.getByRole('dialog', { name: 'Attack attempt details' })
+ expect(within(dialog).getByText(PLAN.seed_groups[0].objective)).toBeInTheDocument()
+ await user.click(within(dialog).getByRole('button', { name: 'Close' }))
+
+ await waitFor(() => expect(detailsButton).toHaveFocus())
+ })
+
+ it('puts the essential attack link in the first column with bounded provenance', () => {
+ renderPage()
+
+ const attackLink = screen.getByRole('link', { name: 'Open attack attack-result-1' })
+ expect(attackLink).toHaveAttribute(
+ 'href',
+ `/attacks/attack-result-1?scenarioResultId=${SCENARIO_RESULT_ID}`,
+ )
+ expect(attackLink).toHaveTextContent('attack-result-1')
+ const attemptsTable = screen.getByRole('table', { name: 'Persisted attack attempts' })
+ expect(within(attemptsTable).getByRole('columnheader', { name: 'Attack' })).toBeInTheDocument()
+ const firstBodyRow = within(attemptsTable).getAllByRole('row')[1]
+ expect(within(firstBodyRow).getAllByRole('cell')[0]).toContainElement(
+ attackLink,
+ )
+ })
+
+ it('navigates from non-interactive row content and browser Back returns to the run', async () => {
+ const user = userEvent.setup()
+ renderPage()
+
+ const attemptRow = screen.getByRole('row', {
+ name: 'Open attack attack-result-1',
+ })
+ await user.click(within(attemptRow).getByText('Technique One'))
+
+ expect(screen.getByTestId('attack-route')).toBeInTheDocument()
+ expect(screen.getByTestId('attack-route')).toHaveAttribute(
+ 'data-location',
+ `/attacks/attack-result-1?scenarioResultId=${SCENARIO_RESULT_ID}`,
+ )
+
+ await user.click(screen.getByRole('button', { name: 'Browser back' }))
+
+ expect(screen.getByRole('heading', { name: 'test.scenario', level: 1 })).toBeInTheDocument()
+ })
+
+ it('supports Enter and Space row activation', async () => {
+ const user = userEvent.setup()
+ renderPage()
+ const row = screen.getByRole('row', { name: 'Open attack attack-result-1' })
+
+ row.focus()
+ await user.keyboard('{Enter}')
+ expect(screen.getByTestId('attack-route')).toBeInTheDocument()
+ await user.click(screen.getByRole('button', { name: 'Browser back' }))
+
+ const restoredRow = screen.getByRole('row', { name: 'Open attack attack-result-1' })
+ restoredRow.focus()
+ await user.keyboard(' ')
+ expect(screen.getByTestId('attack-route')).toBeInTheDocument()
+ })
+
+ it('does not hijack modified, non-primary, or nested-control clicks', async () => {
+ const user = userEvent.setup()
+ renderPage()
+ const row = screen.getByRole('row', { name: 'Open attack attack-result-1' })
+
+ fireEvent.click(row, { ctrlKey: true })
+ fireEvent.click(row, { metaKey: true })
+ fireEvent.click(row, { shiftKey: true })
+ fireEvent.click(row, { altKey: true })
+ fireEvent.click(row, { button: 1 })
+ expect(screen.queryByTestId('attack-route')).not.toBeInTheDocument()
+
+ await user.click(screen.getByRole('button', {
+ name: 'View details for attack attempt attack-result-1',
+ }))
+ expect(screen.getByRole('dialog', { name: 'Attack attempt details' })).toBeInTheDocument()
+ expect(screen.queryByTestId('attack-route')).not.toBeInTheDocument()
+ })
+
+ it('leaves modified first-column link clicks to native new-tab behavior', () => {
+ renderPage()
+ const link = screen.getByRole('link', { name: 'Open attack attack-result-1' })
+ const modifiedClick = new MouseEvent('click', {
+ bubbles: true,
+ cancelable: true,
+ ctrlKey: true,
+ })
+
+ expect(link.dispatchEvent(modifiedClick)).toBe(true)
+ expect(modifiedClick.defaultPrevented).toBe(false)
+ expect(screen.queryByTestId('attack-route')).not.toBeInTheDocument()
+ })
+
+ it('renders loading, not-found, and initial error states with accessible recovery', () => {
+ mockHookState({ ...INITIAL_SCENARIO_RUN_PROGRESS_STATE })
+ const { unmount } = renderPage()
+ expect(screen.getByLabelText('Loading scenario run')).toBeInTheDocument()
+ unmount()
+
+ mockHookState({
+ ...INITIAL_SCENARIO_RUN_PROGRESS_STATE,
+ loadStatus: 'not-found',
+ error: 'Run not found',
+ })
+ const notFound = renderPage()
+ expect(screen.getByRole('heading', { name: 'Scenario run not found' })).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'Retry' })).toBeInTheDocument()
+ notFound.unmount()
+
+ mockHookState({
+ ...INITIAL_SCENARIO_RUN_PROGRESS_STATE,
+ loadStatus: 'error',
+ error: 'Backend unavailable',
+ })
+ renderPage()
+ expect(screen.getByRole('heading', { name: 'Unable to load scenario run' })).toBeInTheDocument()
+ expect(screen.getByText('Backend unavailable')).toBeInTheDocument()
+ })
+
+ it('decodes route IDs and does not offer cancellation for terminal runs', () => {
+ mockHookState(makeState({
+ run: {
+ scenario_result_id: 'run/1',
+ scenario_name: 'TestScenario',
+ scenario_registry_name: 'test.scenario',
+ scenario_version: 1,
+ status: 'COMPLETED',
+ created_at: '2026-01-01T00:00:00Z',
+ completed_at: '2026-01-01T00:01:00Z',
+ },
+ }))
+
+ renderPage('/scenario-history/run%2F1')
+
+ expect(mockUseScenarioRunProgress).toHaveBeenCalledWith('run/1')
+ expect(screen.queryByRole('button', { name: 'Cancel run' })).not.toBeInTheDocument()
+ })
+})
diff --git a/frontend/src/components/Scenarios/ScenarioRunPage.tsx b/frontend/src/components/Scenarios/ScenarioRunPage.tsx
new file mode 100644
index 0000000000..3a65a0907d
--- /dev/null
+++ b/frontend/src/components/Scenarios/ScenarioRunPage.tsx
@@ -0,0 +1,790 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import {
+ Badge,
+ Button,
+ Dialog,
+ DialogActions,
+ DialogBody,
+ DialogContent,
+ DialogSurface,
+ DialogTitle,
+ MessageBar,
+ MessageBarActions,
+ MessageBarBody,
+ mergeClasses,
+ ProgressBar,
+ Skeleton,
+ SkeletonItem,
+ Table,
+ TableBody,
+ TableCell,
+ TableHeader,
+ TableHeaderCell,
+ TableRow,
+ Text,
+} from '@fluentui/react-components'
+import {
+ ArrowLeftRegular,
+ ArrowSyncRegular,
+ CheckmarkCircleRegular,
+ DismissCircleRegular,
+ ErrorCircleRegular,
+ EyeRegular,
+ StopRegular,
+} from '@fluentui/react-icons'
+import { Link, useNavigate, useParams } from 'react-router'
+
+import { useScenarioRunProgress } from '@/hooks/useScenarioRunProgress'
+import { scenariosApi } from '@/services/api'
+import { toApiError } from '@/services/errors'
+import type {
+ ScenarioProgressResult,
+ ScenarioRunState,
+} from '@/types'
+import {
+ attackRoutePath,
+ routerPathParamValue,
+} from '@/utils/routeParams'
+import {
+ getAtomicGroupRollups,
+ getElapsedMilliseconds,
+ getEtaMilliseconds,
+ getOverallProgress,
+ getSeedGroupRollups,
+ getTechniqueRollups,
+ isTerminalRunState,
+} from '@/utils/scenarioRunProgress'
+
+import { useScenarioRunPageStyles } from './ScenarioRunPage.styles'
+
+const CLOCK_REFRESH_INTERVAL_MS = 1_000
+const OBJECTIVE_PREVIEW_LENGTH = 96
+const INTERACTIVE_ELEMENT_SELECTOR = 'a, button, input, select, textarea, [role="button"], [role="link"]'
+
+const RUN_BADGE_COLORS: Record = {
+ CREATED: 'informative',
+ IN_PROGRESS: 'brand',
+ COMPLETED: 'success',
+ FAILED: 'danger',
+ CANCELLED: 'warning',
+}
+
+const OUTCOME_BADGE_COLORS: Record = {
+ success: 'success',
+ failure: 'danger',
+ error: 'warning',
+ undetermined: 'informative',
+}
+
+export default function ScenarioRunPage() {
+ const { scenarioResultId: encodedId } = useParams<{ scenarioResultId: string }>()
+ return
+}
+
+interface ScenarioRunPageContentProps {
+ readonly scenarioResultId: string
+}
+
+function ScenarioRunPageContent({ scenarioResultId }: ScenarioRunPageContentProps) {
+ const styles = useScenarioRunPageStyles()
+ const navigate = useNavigate()
+ const { state, retry, applyRunSummary } = useScenarioRunProgress(scenarioResultId)
+ const [nowMilliseconds, setNowMilliseconds] = useState(() => Date.now())
+ const [cancelDialogOpen, setCancelDialogOpen] = useState(false)
+ const [cancelling, setCancelling] = useState(false)
+ const [cancelError, setCancelError] = useState(null)
+ const [selectedAttempt, setSelectedAttempt] = useState(null)
+ const detailsTriggerRef = useRef(null)
+
+ const overall = useMemo(() => getOverallProgress(state), [state])
+ const techniques = useMemo(() => getTechniqueRollups(state), [state])
+ const seedGroups = useMemo(() => getSeedGroupRollups(state), [state])
+ const atomicGroups = useMemo(() => getAtomicGroupRollups(state), [state])
+ const seedObjectives = useMemo(
+ () => new Map(state.plan?.seed_groups.map((seed) => [seed.id, seed.objective]) ?? []),
+ [state.plan],
+ )
+ const atomicGroupNames = useMemo(
+ () => new Map(atomicGroups.map((group) => [group.id, group.displayGroup])),
+ [atomicGroups],
+ )
+
+ useEffect(() => {
+ if (!state.run || isTerminalRunState(state.run.status)) {
+ return
+ }
+ const timer = setInterval(() => setNowMilliseconds(Date.now()), CLOCK_REFRESH_INTERVAL_MS)
+ return () => clearInterval(timer)
+ }, [state.run])
+
+ const closeAttemptDetails = (): void => {
+ setSelectedAttempt(null)
+ requestAnimationFrame(() => detailsTriggerRef.current?.focus())
+ }
+
+ const openAttemptDetails = (
+ attempt: ScenarioProgressResult,
+ trigger: HTMLButtonElement,
+ ): void => {
+ detailsTriggerRef.current = trigger
+ setSelectedAttempt(attempt)
+ }
+
+ const handleCancel = async (): Promise => {
+ setCancelling(true)
+ setCancelError(null)
+ try {
+ const run = await scenariosApi.cancelRun(scenarioResultId)
+ applyRunSummary(run)
+ setCancelDialogOpen(false)
+ } catch (error: unknown) {
+ setCancelError(toApiError(error).detail)
+ } finally {
+ setCancelling(false)
+ }
+ }
+
+ if (state.loadStatus === 'loading' && !state.run) {
+ return (
+
+
+
+
Back to scenarios
+
+
+
+
+
+
+
+
+
+ Loading scenario run...
+
+
+
+
Back to scenarios
+
+
+
+ Scenario run not found
+ {state.error}
+ } onClick={retry}>
+ Retry
+
+
+
+
+
Back to scenarios
+
+
+
+ Unable to load scenario run
+ {state.error}
+ } onClick={retry}>
+ Retry
+
+
+
+
+
Back to scenarios
+
+
+
+
+
+
+ {run.scenario_registry_name ?? run.scenario_name}
+
+
+ {formatRunState(run.status)}
+
+
+ {run.scenario_registry_name && run.scenario_registry_name !== run.scenario_name && (
+
{run.scenario_name}
+ )}
+
+ Run ID: {run.scenario_result_id}
+
+
+ }
+ onClick={() => {
+ setCancelError(null)
+ setCancelDialogOpen(true)
+ }}
+ >
+ Cancel run
+
+
+ )}
+
+
+
+
+ Scenario version
+ {run.scenario_version}
+
+
+ Created
+ {formatTimestamp(run.created_at)}
+
+
+ Completed
+ {run.completed_at ? formatTimestamp(run.completed_at) : 'Not yet'}
+
+
+
+ {state.stale && (
+
+
+ Live updates paused. Showing the last successfully loaded progress. {state.error}
+
+
+ } onClick={retry}>
+ Retry
+
+
+
+ )}
+
+ {run.status === 'FAILED' && (
+
+
+ This run ended before all planned executable units completed. Persisted attempts remain available below.
+
+
+ )}
+
+ {!state.planComplete && (
+
+
+ This legacy run has no complete persisted execution plan. Known groups and attempts are shown, but planned totals and ETA are unavailable.
+
+
+ )}
+
+
+
+
+ Overall progress
+
+ {progressText}
+
+
+
+
+ {progressText}
+ {overall.percent !== null && {overall.percent}%}
+
+ {overall.percent !== null ? (
+
+ ) : (
+
Progress percentage unavailable
+ )}
+
+
+ Elapsed
+
+ {formatDuration(elapsed)}
+
+
+
+ Estimated remaining
+
+ {eta === null ? 'Unavailable' : formatDuration(eta)}
+
+
+
+
+
+
+
+ Technique summary
+
+ Success is measured over evaluated non-error units.
+
+ {techniques.length === 0 ? (
+
+ ) : (
+
+ {techniques.map((technique) => (
+
+
+ {technique.displayGroup}
+ {formatSuccess(technique.succeeded, technique.evaluated, technique.successPercent)}
+
+
+ {technique.atomicAttackNames.join(', ')}
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+ Atomic attack groups
+
+ Running groups are listed first.
+
+ {atomicGroups.length === 0 ? (
+
+ ) : (
+
+
+
+
+ Status
+ Display group
+ Attack
+ Completed
+ Success
+ Errors
+ Retries
+
+
+
+ {atomicGroups.map((group) => (
+
+
+ {group.displayGroup}
+ {group.atomicAttackName || 'Persisted attack'}
+
+ {formatCompletion(group.completed, group.planned, state.planComplete)}
+
+
+ {formatSuccess(group.succeeded, group.evaluated, group.successPercent)}
+
+ {group.errors}
+ {group.retries}
+
+ ))}
+
+
+
+
+
+
+
+ Logical seed groups
+
+ Aggregated across techniques.
+
+ {seedGroups.length === 0 ? (
+
+ ) : (
+
+
+
+
+ Objective
+ Completed
+ Success
+ Errors
+ Retries
+
+
+
+ {seedGroups.map((seed) => (
+
+
+ {objectivePreview(seed.objective, seed.id)}
+
+
+ {formatCompletion(seed.completed, seed.planned, state.planComplete)}
+
+
+ {formatSuccess(seed.succeeded, seed.evaluated, seed.successPercent)}
+
+ {seed.errors}
+ {seed.retries}
+
+ ))}
+
+
+
+
+
+
+
+ Persisted attack attempts
+
+ {state.results.length} attempts
+
+ {state.results.length === 0 ? (
+
+ ) : (
+
+
+
+
+ Attack
+ Outcome
+ Group
+ Seed
+ Objective
+ Execution
+ Retries / error
+ Timestamp
+
+
+
+ {[...state.results].reverse().map((attempt) => {
+ const attackDestination = attackRoutePath(
+ attempt.attack_result_id,
+ scenarioResultId,
+ )
+ return (
+ {
+ if (!shouldIgnoreAttemptRowClick(event)) {
+ navigate(attackDestination)
+ }
+ }}
+ onKeyDown={(event) => {
+ if (
+ (event.key === 'Enter' || event.key === ' ')
+ && !hasActivationModifier(event)
+ && !isInteractiveTarget(event.target)
+ ) {
+ event.preventDefault()
+ navigate(attackDestination)
+ }
+ }}
+ >
+
+ event.stopPropagation()}
+ >
+
+ {attempt.attack_result_id}
+
+
+
+
+
+ {formatOutcome(attempt.outcome)}
+
+
+ {atomicGroupNames.get(attempt.atomic_group_id) ?? attempt.atomic_attack_name}
+ {attempt.seed_group_id}
+
+ }
+ aria-label={`View details for attack attempt ${attempt.attack_result_id}`}
+ onClick={(event) => openAttemptDetails(attempt, event.currentTarget)}
+ >
+
+ {objectivePreview(seedObjectives.get(attempt.seed_group_id) ?? null, attempt.seed_group_id)}
+
+
+
+ {formatDuration(attempt.execution_time_ms)}
+
+ {attempt.outcome === 'error'
+ ? attempt.error_message ?? attempt.error_type ?? 'Error'
+ : `${attempt.total_retries} retries`}
+
+ {formatTimestamp(attempt.timestamp)}
+
+ )
+ })}
+
+
+
+
+ {label}
+ {value}
+
+ )
+}
+
+interface EmptyStateProps {
+ readonly text: string
+}
+
+function EmptyState({ text }: EmptyStateProps) {
+ const styles = useScenarioRunPageStyles()
+ return (
+
+ {text}
+
+ )
+}
+
+interface AtomicStatusBadgeProps {
+ readonly status: 'Running' | 'Pending' | 'Incomplete' | 'Completed'
+}
+
+function AtomicStatusBadge({ status }: AtomicStatusBadgeProps) {
+ const color = status === 'Running'
+ ? 'brand'
+ : status === 'Completed'
+ ? 'success'
+ : status === 'Incomplete'
+ ? 'warning'
+ : 'informative'
+ return {status}
+}
+
+function formatRunState(status: ScenarioRunState): string {
+ return status.toLowerCase().replace('_', ' ').replace(/^\w/, (letter) => letter.toUpperCase())
+}
+
+function formatOutcome(outcome: ScenarioProgressResult['outcome']): string {
+ return outcome.replace(/^\w/, (letter) => letter.toUpperCase())
+}
+
+function statusIcon(status: ScenarioRunState): React.ReactElement {
+ if (status === 'COMPLETED') {
+ return
+ }
+ if (status === 'FAILED') {
+ return
+ }
+ if (status === 'CANCELLED') {
+ return
+ }
+ return
+}
+
+function formatTimestamp(timestamp: string): string {
+ const date = new Date(timestamp)
+ if (Number.isNaN(date.getTime())) {
+ return 'Unavailable'
+ }
+ return date.toLocaleString(undefined, {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ })
+}
+
+function formatDuration(milliseconds: number): string {
+ if (!Number.isFinite(milliseconds) || milliseconds < 0) {
+ return 'Unavailable'
+ }
+ const totalSeconds = Math.floor(milliseconds / 1_000)
+ const hours = Math.floor(totalSeconds / 3_600)
+ const minutes = Math.floor((totalSeconds % 3_600) / 60)
+ const seconds = totalSeconds % 60
+ if (hours > 0) {
+ return `${hours}h ${minutes}m`
+ }
+ if (minutes > 0) {
+ return `${minutes}m ${seconds}s`
+ }
+ return `${seconds}s`
+}
+
+function formatSuccess(succeeded: number, evaluated: number, percent: number | null): string {
+ return percent === null ? `${succeeded}/${evaluated} —` : `${succeeded}/${evaluated} (${percent}%)`
+}
+
+function formatCompletion(completed: number, planned: number, planComplete: boolean): string {
+ return planComplete ? `${completed}/${planned}` : `${completed}/total unavailable`
+}
+
+function objectivePreview(objective: string | null, fallbackId: string): string {
+ if (!objective) {
+ return `Objective unavailable (${fallbackId})`
+ }
+ if (objective.length <= OBJECTIVE_PREVIEW_LENGTH) {
+ return objective
+ }
+ return `${objective.slice(0, OBJECTIVE_PREVIEW_LENGTH - 1)}…`
+}
+
+function shouldIgnoreAttemptRowClick(event: React.MouseEvent): boolean {
+ return event.button !== 0
+ || hasActivationModifier(event)
+ || isInteractiveTarget(event.target)
+}
+
+function hasActivationModifier(
+ event: Pick
+ | Pick,
+): boolean {
+ return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey
+}
+
+function isInteractiveTarget(target: EventTarget): boolean {
+ return target instanceof Element && target.closest(INTERACTIVE_ELEMENT_SELECTOR) !== null
+}
diff --git a/frontend/src/components/Scenarios/ScenarioRunStarted.styles.ts b/frontend/src/components/Scenarios/ScenarioRunStarted.styles.ts
deleted file mode 100644
index a405d923c1..0000000000
--- a/frontend/src/components/Scenarios/ScenarioRunStarted.styles.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { makeStyles, tokens } from '@fluentui/react-components'
-import { NARROW_VIEWPORT_QUERY } from '@/styles/touchTargets'
-
-export const useScenarioRunStartedStyles = makeStyles({
- root: {
- display: 'flex',
- flexDirection: 'column',
- height: '100%',
- width: '100%',
- minWidth: 0,
- maxWidth: '40rem',
- padding: tokens.spacingVerticalXXL,
- overflowX: 'hidden',
- overflowY: 'auto',
- backgroundColor: tokens.colorNeutralBackground2,
- gap: tokens.spacingVerticalM,
- [NARROW_VIEWPORT_QUERY]: {
- padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalM}`,
- },
- },
- backLink: {
- alignSelf: 'flex-start',
- },
- hint: {
- color: tokens.colorNeutralForeground3,
- },
- section: {
- display: 'flex',
- flexDirection: 'column',
- gap: tokens.spacingVerticalXS,
- padding: tokens.spacingVerticalL,
- border: `1px solid ${tokens.colorNeutralStroke2}`,
- borderRadius: tokens.borderRadiusLarge,
- backgroundColor: tokens.colorNeutralBackground1,
- },
- centeredState: {
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- justifyContent: 'center',
- gap: tokens.spacingVerticalM,
- padding: tokens.spacingVerticalXXL,
- },
-})
diff --git a/frontend/src/components/Scenarios/ScenarioRunStarted.test.tsx b/frontend/src/components/Scenarios/ScenarioRunStarted.test.tsx
deleted file mode 100644
index 567483cf45..0000000000
--- a/frontend/src/components/Scenarios/ScenarioRunStarted.test.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { FluentProvider, webLightTheme } from '@fluentui/react-components'
-import { MemoryRouter, Route, Routes } from 'react-router'
-
-import { scenariosApi } from '@/services/api'
-
-import ScenarioRunStarted from './ScenarioRunStarted'
-
-jest.mock('@/services/api', () => ({
- scenariosApi: {
- getRun: jest.fn(),
- },
-}))
-
-const mockGetRun = scenariosApi.getRun as jest.Mock
-
-function renderShell(path: string, state?: unknown) {
- return render(
-
-
-
- } />
-
-
- ,
- )
-}
-
-function makeRunSummary(overrides: Partial> = {}) {
- return {
- scenario_result_id: 'sr-1',
- scenario_name: 'foundry.red_team_agent',
- scenario_version: 0,
- status: 'IN_PROGRESS',
- created_at: '2026-02-15T00:00:00Z',
- updated_at: '2026-02-15T00:00:00Z',
- techniques_used: [],
- total_attacks: 0,
- completed_attacks: 0,
- objective_achieved_rate: 0,
- failed_attacks: [],
- attack_retries: [],
- total_retries: 0,
- labels: {},
- ...overrides,
- }
-}
-
-describe('ScenarioRunStarted', () => {
- beforeEach(() => {
- jest.clearAllMocks()
- })
-
- it('renders an accessible heading and the scenario result id', async () => {
- mockGetRun.mockResolvedValueOnce(makeRunSummary())
-
- renderShell('/scenario-history/sr-1')
-
- expect(screen.getByRole('heading', { name: 'Scenario run started' })).toBeInTheDocument()
- expect(screen.getByText('sr-1')).toBeInTheDocument()
- await screen.findByTestId('run-status')
- })
-
- it('decodes a percent-encoded scenario result id from the URL and fetches by the decoded id', async () => {
- mockGetRun.mockResolvedValueOnce(makeRunSummary({ scenario_result_id: 'sr/1' }))
-
- renderShell('/scenario-history/sr%2F1')
-
- await waitFor(() => expect(mockGetRun).toHaveBeenCalledWith('sr/1'))
- expect(screen.getByText('sr/1')).toBeInTheDocument()
- })
-
- it('shows a loading state before the fetch resolves', () => {
- mockGetRun.mockReturnValue(new Promise(() => {}))
- renderShell('/scenario-history/sr-1')
- expect(screen.getByText('Loading run status...')).toBeInTheDocument()
- })
-
- it('shows the run status once loaded', async () => {
- mockGetRun.mockResolvedValueOnce(makeRunSummary({ status: 'COMPLETED' }))
-
- renderShell('/scenario-history/sr-1')
-
- expect(await screen.findByTestId('run-status-value')).toHaveTextContent('COMPLETED')
- })
-
- it('shows an error state with retry on failure, and recovers after retry', async () => {
- const user = userEvent.setup()
- mockGetRun
- .mockRejectedValueOnce(new Error('boom'))
- .mockResolvedValueOnce(makeRunSummary())
-
- renderShell('/scenario-history/sr-1')
-
- expect(await screen.findByTestId('run-error')).toBeInTheDocument()
- expect(screen.getByText('boom')).toBeInTheDocument()
-
- await user.click(screen.getByTestId('retry-btn'))
-
- expect(await screen.findByTestId('run-status')).toBeInTheDocument()
- expect(mockGetRun).toHaveBeenCalledTimes(2)
- })
-
- it('does not poll — it fetches the run exactly once per mount', async () => {
- mockGetRun.mockResolvedValueOnce(makeRunSummary())
- renderShell('/scenario-history/sr-1')
-
- await screen.findByTestId('run-status')
- await new Promise((resolve) => setTimeout(resolve, 50))
-
- expect(mockGetRun).toHaveBeenCalledTimes(1)
- })
-
- it('shows the scenario name from location state before the fetch resolves', () => {
- mockGetRun.mockReturnValue(new Promise(() => {}))
-
- renderShell('/scenario-history/sr-1', { scenarioName: 'foundry.red_team_agent' })
-
- // The loading spinner is showing, but the run id itself is already visible from the URL.
- expect(screen.getByText('sr-1')).toBeInTheDocument()
- })
-
- it('works as a direct deep link with no location state at all', async () => {
- mockGetRun.mockResolvedValueOnce(makeRunSummary())
-
- renderShell('/scenario-history/sr-1')
-
- expect(await screen.findByTestId('run-status')).toBeInTheDocument()
- expect(screen.getByText(/foundry\.red_team_agent/)).toBeInTheDocument()
- })
-
- it('links back to the scenario catalog', async () => {
- mockGetRun.mockResolvedValueOnce(makeRunSummary())
- renderShell('/scenario-history/sr-1')
-
- expect(screen.getByRole('link', { name: /back to scenarios/i })).toHaveAttribute('href', '/scenarios')
- })
-})
diff --git a/frontend/src/components/Scenarios/ScenarioRunStarted.tsx b/frontend/src/components/Scenarios/ScenarioRunStarted.tsx
deleted file mode 100644
index 0c5930b358..0000000000
--- a/frontend/src/components/Scenarios/ScenarioRunStarted.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { Button, MessageBar, MessageBarBody, Spinner, Text } from '@fluentui/react-components'
-import { ArrowLeftRegular, ArrowSyncRegular } from '@fluentui/react-icons'
-import { Link, useLocation, useParams } from 'react-router'
-
-import { scenariosApi } from '@/services/api'
-import { toApiError } from '@/services/errors'
-import type { ScenarioRunSummary } from '@/types'
-import { routerPathParamValue } from '@/utils/routeParams'
-
-import { useScenarioRunStartedStyles } from './ScenarioRunStarted.styles'
-
-type LoadStatus = 'loading' | 'success' | 'error'
-
-/** Optional state forwarded by the launch form's `navigate()` call — shows a scenario name before the fetch resolves. */
-interface ScenarioRunLocationState {
- scenarioName?: string
-}
-
-/**
- * Minimal acknowledgement shell shown right after launching a scenario run.
- *
- * Fetches the run once (no polling) to confirm it exists and show its
- * current status; it intentionally does not aggregate or poll progress —
- * that belongs to a full run-history view, out of scope here.
- */
-export default function ScenarioRunStarted() {
- const { scenarioResultId: encodedId } = useParams<{ scenarioResultId: string }>()
- // Keying on the raw URL param forces a full remount (and state reset to the
- // initial "loading" values) if the route ever navigates from one run id
- // directly to another, without needing to reset state from inside an effect.
- return
-}
-
-interface ScenarioRunStartedContentProps {
- encodedId: string | undefined
-}
-
-function ScenarioRunStartedContent({ encodedId }: ScenarioRunStartedContentProps) {
- const styles = useScenarioRunStartedStyles()
- const location = useLocation()
- const locationState = location.state as ScenarioRunLocationState | null
- const decodedId = routerPathParamValue(encodedId)
-
- const [run, setRun] = useState(null)
- const [status, setStatus] = useState('loading')
- const [error, setError] = useState(null)
- const [refetchCount, setRefetchCount] = useState(0)
-
- useEffect(() => {
- let cancelled = false
- scenariosApi
- .getRun(decodedId)
- .then((data) => {
- if (cancelled) return
- setRun(data)
- setStatus('success')
- setError(null)
- })
- .catch((err: unknown) => {
- if (cancelled) return
- setRun(null)
- setStatus('error')
- setError(toApiError(err).detail)
- })
- return () => {
- cancelled = true
- }
- }, [decodedId, refetchCount])
-
- const handleRetry = (): void => {
- setStatus('loading')
- setError(null)
- setRefetchCount((count) => count + 1)
- }
-
- const displayScenarioName = run?.scenario_name ?? locationState?.scenarioName
-
- return (
-
-
-
Back to scenarios
-
-
-
Scenario run started
-
- Run ID: {decodedId}
-
-
- {status === 'loading' && (
-
-
-
- )}
-
- {status === 'error' && (
-
-
- {error}
-
- }
- onClick={handleRetry}
- data-testid="retry-btn"
- >
- Retry
-
-
- )}
-
- {status === 'success' && run && (
-
- {displayScenarioName && (
- Scenario: {displayScenarioName}
- )}
-
- Status: {run.status}
-
-
- )}
-