-
{backLabel}
+ {backLinkElement}
{state.loadStatus === 'loading' ?
: (
{state.error ?? 'Scan not found.'}
)}
@@ -291,246 +97,50 @@ function ScenarioRunContent({ scenarioResultId, attackResultId }: ScenarioRunCon
const run = state.run
const summary = state.summary
- const overall = summary.overall
- const outcomes = overall.outcomes
- const groups = summary.display_groups ?? summary.techniques
- const firstError = state.results.find((attempt) => attempt.outcome === 'error')
- const controlError = rerunError ?? resume.error
- ?? (resume.executionError !== run.error ? resume.executionError : null)
- const notices: string[] = []
- if (state.overloadSummaries.length > 0) notices.push('Service overload detected.')
- const unattributedAttempts = summary.unattributed_attempts ?? 0
- const unmatched = unattributedAttempts
- if (unmatched > 0) notices.push(`${unmatched} execution${unmatched === 1 ? '' : 's'} could not be matched to the saved plan.`)
- if (!state.planComplete) notices.push('The saved execution plan is incomplete; some totals cannot be verified.')
- const objectiveScorer = summary.objective_scorer
- const displayGroups = hierarchyDisplayGroups(groups, hierarchy.roots.groups)
- const producerCounts = overall.producer_counts
- const executionCount = producerCounts
- ? producerCounts.target_facing.attempts + producerCounts.orchestration.attempts + producerCounts.unknown.attempts
- : state.results.length
- const atomicGroupsExpanded = atomicGroupsExpandedChoice ?? displayGroups.length <= AUTO_EXPAND_GROUP_LIMIT
+ const active = !isTerminalRunState(run.status)
+ const openObjectiveAttempt = (attempt: ScenarioProgressResult): void => {
+ attackDetails.open(attempt, objectiveTrigger.current)
+ setObjective(null)
+ }
+
return (
-
{backLabel}
+ {backLinkElement}
{!active ? `${run.scenario_registry_name ?? run.scenario_name}: ${run.status.toLowerCase()}.` : ''}
-
-
-
- {run.scenario_registry_name ?? run.scenario_name}
-
- {run.status === 'IN_PROGRESS' ? 'Executing' : run.status.charAt(0) + run.status.slice(1).toLowerCase()}
-
-
- {run.description &&
{run.description}}
-
- {active && View queue}
- } disabled={rerunPending} onClick={() => { void rerun() }}>{rerunPending ? 'Loading...' : 'Rerun'}
- {active ? } className={styles.touchTarget} onClick={() => { setCancelError(null); setCancelOpen(true) }}>Cancel
- : (run.status === 'FAILED' || run.status === 'CANCELLED') && }
- disabled={resume.pendingRunId !== null} onClick={() => { setRerunError(null); resume.requestResume(scenarioResultId) }}>Resume}
-
-
- {controlError &&
- {controlError}
- }
-
- Operation
- {run.operation_id ? {run.operation_name ?? 'Operation'} : Unassigned}
-
- Target{run.target?.model_name ?? run.target?.target_type ?? 'Not recorded'}
- Timing
- Attack success
- {formatProgressSuccess(overall)}
- {outcomes ? `${outcomes.successes} / ${outcomes.total_decided} decided` : `${overall.succeeded} / ${overall.completed} complete`}
-
- Errors / retries{overall.errors} / {overall.retries}
- Labels
-
{Object.entries(run.labels ?? {}).map(([key, value]) => {key}: {value})}
-
-
- {(run.status === 'FAILED' || run.error || overall.errors > 0) &&
- {run.status === 'FAILED' ? 'Scan failed. Resume to continue remaining attacks.'
- : run.status === 'CANCELLED' ? 'Scan cancelled.'
- : `${overall.errors} attack${overall.errors === 1 ? '' : 's'} ended with an error.`}
- {firstError && }
- {run.error &&
- Error details
- {run.error_type ? `${run.error_type}: ` : ''}{run.error}
- }
-
- }
- {state.stale &&
Live updates paused. {state.error} }
- {notices.length > 0 &&
0 || unmatched > 0 ? 'warning' : 'info'}>
-
- {notices.join(' ')}
- {state.overloadSummaries.length > 0 &&
- Overload details
- {state.overloadSummaries.map((overload) => (
-
- {overload.component_role.replace(/_/g, ' ')}: {overload.count}
- {overload.status_codes.length > 0 ? ` (HTTP ${overload.status_codes.join(', ')})` : ''}
-
- ))}
- }
-
- }
- {active &&
-
-
{run.status === 'QUEUED' ? `Queued${run.queue_position ? ` · Position ${run.queue_position}` : ''}` : `${overall.completed}${overall.planned === null ? '' : ` of ${overall.planned}`} attacks complete`}
-
-
}
- {state.activeConversations.length > 0 &&
- Executing
- {state.activeConversations.map((conversation) => (
-
-
- {conversation.objective}
- Watch live conversation
-
- ))}
- }
- {savedConversations.length > 0 &&
- Saved conversations
- {savedConversations.map((conversation) =>
- {conversation.atomic_attack_name}
- {conversation.objective}
- Open saved conversation
-
)}
- }
-
-
-
-
- Atomic attack groups
-
- : }
- aria-expanded={atomicGroupsExpanded}
- aria-controls="atomic-groups-panel"
- aria-label={`${atomicGroupsExpanded ? 'Collapse' : 'Expand'} atomic attack groups`}
- data-testid="toggle-atomic-groups-btn"
- ref={atomicGroupsToggleRef}
- onClick={() => setAtomicGroupsExpandedChoice(!atomicGroupsExpanded)}
- >
-
-
-
- {`${displayGroups.length.toLocaleString()} group${displayGroups.length === 1 ? '' : 's'}, ${executionCount.toLocaleString()} ${producerCounts ? '' : 'loaded '}execution${executionCount === 1 ? '' : 's'}`}
-
-
- {atomicGroupsExpanded && (
-
- {displayGroups.length === 0 ? (
-
- ) : (
-
- {displayGroups.map((group) => {
- // Merge member groups newest-first so the row cap keeps the group's latest executions.
- const attempts = (group.atomic_group_ids ?? [])
- .flatMap((atomicGroupId) => attemptsByGroupId.get(atomicGroupId) ?? [])
- .sort((left, right) => Date.parse(right.timestamp) - Date.parse(left.timestamp))
- const defaultExpanded = displayGroups.length <= AUTO_EXPAND_GROUP_LIMIT
- const expanded = expandedGroupChoices.get(group.id) ?? defaultExpanded
- const panelId = `atomic-group-${group.id.replace(/[^a-zA-Z0-9_-]/g, '-')}`
- return (
-
-
- : }
- aria-expanded={expanded}
- aria-controls={panelId}
- aria-label={`${expanded ? 'Collapse' : 'Expand'} attacks in ${group.display_group}`}
- onClick={() => toggleDisplayGroup(group.id, defaultExpanded)}
- />
-
- {group.display_group}
-
- {group.atomic_attack_names.join(', ')}
-
-
-
-
-
-
-
-
-
- {expanded && (
-
-
group.atomic_group_ids.includes(savedGroup.atomic_group_id))
- .flatMap((savedGroup) => savedGroup.roots)}
- hierarchy={hierarchy}
- seedObjectives={seedObjectives}
- onOpenDetails={openAttemptDetails}
- showTimestamp={false}
- showConversationLink
- booleanOutcome
- />
-
- )
- })}
-
- )}
-
-
- Datasets & objectives
-
- DatasetObjectiveAttack successCompleted
- {summary.seed_groups.map((seed) => {
- const planSeed = planSeeds.get(seed.id)
- return
- {datasetsBySeed.get(seed.id) || 'Not recorded'}
-
- {formatProgressSuccess(seed)}
- {seed.completed}{seed.planned === null ? '' : ` / ${seed.planned}`}
-
- })}
-
+
+
+
+ {active &&
}
+
+
+
{
+ objectiveTrigger.current = trigger
+ setObjective(seed)
+ }}
+ />
{run.status === 'COMPLETED' && (
{ setPairedExpanded(data.openItems.includes('paired')) }}>
@@ -547,100 +157,24 @@ function ScenarioRunContent({ scenarioResultId, attackResultId }: ScenarioRunCon
)}
-
- Scenario configuration
- {run.scenario_identity ?
- { setIdentityExpanded((value: boolean) => !value) }} />
-
: No saved scenario identity.}
-
+
)
}
-
-function EmptyState({ text }: { readonly text: string }) {
- return
{text}
-}
-
-function DisplayGroupMetric({ label, value }: { readonly label: string; readonly value: string }) {
- return (
-
- {label}
- {value}
-
- )
-}
-
-function formatCompletion(completed: number, planned: number | null): string {
- return planned === null ? `${completed}/total unavailable` : `${completed}/${planned}`
-}
-
-function formatSuccess(succeeded: number, completed: number, percentage: number | null): string {
- if (percentage === null) return completed === 0 ? 'Unavailable' : `${succeeded}/${completed}`
- return `${percentage}%`
-}
diff --git a/frontend/src/components/Scenarios/ScenarioRunProgress.tsx b/frontend/src/components/Scenarios/ScenarioRunProgress.tsx
new file mode 100644
index 0000000000..9d7712180d
--- /dev/null
+++ b/frontend/src/components/Scenarios/ScenarioRunProgress.tsx
@@ -0,0 +1,28 @@
+import { ProgressBar, Text } from '@fluentui/react-components'
+
+import type { ScenarioProgressCounts, ScenarioProgressHeader } from '@/types'
+
+import { useScenarioRunPageStyles } from './ScenarioRunPage.styles'
+import ScenarioRunTiming from './ScenarioRunTiming'
+
+interface ScenarioRunProgressProps {
+ readonly run: ScenarioProgressHeader
+ readonly overall: ScenarioProgressCounts
+}
+
+/** Queue position or completed attacks, with elapsed time and ETA, while a scan is active. */
+export default function ScenarioRunProgress({ run, overall }: ScenarioRunProgressProps) {
+ const styles = useScenarioRunPageStyles()
+ const status = run.status === 'QUEUED'
+ ? `Queued${run.queue_position ? ` · Position ${run.queue_position}` : ''}`
+ : `${overall.completed}${overall.planned === null ? '' : ` of ${overall.planned}`} attacks complete`
+ return (
+
+ )
+}
diff --git a/frontend/src/components/Scenarios/ScenarioTechniqueSection.tsx b/frontend/src/components/Scenarios/ScenarioTechniqueSection.tsx
index b1f5e30a61..fc23378bb0 100644
--- a/frontend/src/components/Scenarios/ScenarioTechniqueSection.tsx
+++ b/frontend/src/components/Scenarios/ScenarioTechniqueSection.tsx
@@ -5,7 +5,8 @@ import { ChevronDownRegular, ChevronRightRegular } from '@fluentui/react-icons'
import ContextualHelpLabel from '@/components/ContextualHelpLabel'
import { HELP_DEFINITIONS } from '@/components/helpDefinitions'
-import { useRegistryIdentityRowStyles } from '@/components/Registry/RegistryIdentityRow.styles'
+import { IdentityJson } from '@/components/Registry/IdentityDisclosure'
+import { useIdentityDisclosureStyles } from '@/components/Registry/IdentityDisclosure.styles'
import { useScenarioDetailStyles } from './ScenarioDetail.styles'
import { exceedsTechniqueLimit, type SelectableTechnique } from './scenarioLaunchForm'
@@ -46,7 +47,7 @@ export default function ScenarioTechniqueSection({
onRemoveToken,
}: ScenarioTechniqueSectionProps) {
const styles = useScenarioDetailStyles()
- const identityStyles = useRegistryIdentityRowStyles()
+ const identityStyles = useIdentityDisclosureStyles()
const identityId = useId()
const techniqueLimitDescriptionId = `${identityId}-technique-limit`
const baselineUnavailableId = `${identityId}-baseline-unavailable`
@@ -187,11 +188,13 @@ export default function ScenarioTechniqueSection({
icon={expanded ?
:
}
aria-label={`Identity for ${technique.name}`} aria-expanded={expanded} aria-controls={regionId}
onClick={() => toggleIdentity(technique.name)} />
- {expanded &&
- {technique.identifier ?
{JSON.stringify(technique.identifier, null, 2)}
- :
{technique.isBaseline ? 'Baseline identity is available after launch.' : 'Identity was not recorded for this technique.'}}
-
}
+ {expanded && (technique.identifier
+ ?
+ :
+ {technique.isBaseline ? 'Baseline identity is available after launch.' : 'Identity was not recorded for this technique.'}
+
)}