{content}
diff --git a/frontend/src/components/Parameters/ParameterField.styles.ts b/frontend/src/components/Parameters/ParameterField.styles.ts
new file mode 100644
index 0000000000..269a94772b
--- /dev/null
+++ b/frontend/src/components/Parameters/ParameterField.styles.ts
@@ -0,0 +1,45 @@
+import { makeStyles, tokens } from '@fluentui/react-components'
+
+import {
+ MINIMUM_TOUCH_TARGET_SIZE,
+ mobileTouchTargetHeight,
+ TOUCH_INPUT_QUERY,
+} from '@/styles/touchTargets'
+
+export const useParameterFieldStyles = makeStyles({
+ control: {
+ ...mobileTouchTargetHeight,
+ '& > select': {
+ [TOUCH_INPUT_QUERY]: {
+ minHeight: MINIMUM_TOUCH_TARGET_SIZE,
+ },
+ },
+ '& > input': {
+ [TOUCH_INPUT_QUERY]: {
+ minHeight: MINIMUM_TOUCH_TARGET_SIZE,
+ },
+ },
+ },
+ selectionControl: {
+ ...mobileTouchTargetHeight,
+ },
+ checkboxGroup: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: tokens.spacingVerticalXXS,
+ },
+ srOnly: {
+ position: 'absolute',
+ width: '1px',
+ height: '1px',
+ padding: '0',
+ margin: '-1px',
+ overflow: 'hidden',
+ clip: 'rect(0,0,0,0)',
+ whiteSpace: 'nowrap',
+ },
+ fieldHint: {
+ color: tokens.colorNeutralForeground3,
+ marginTop: tokens.spacingVerticalXXS,
+ },
+})
diff --git a/frontend/src/components/Parameters/ParameterField.tsx b/frontend/src/components/Parameters/ParameterField.tsx
new file mode 100644
index 0000000000..efe5fac2ae
--- /dev/null
+++ b/frontend/src/components/Parameters/ParameterField.tsx
@@ -0,0 +1,138 @@
+import {
+ Checkbox,
+ Field,
+ Input,
+ Select,
+} from '@fluentui/react-components'
+
+import type { Parameter } from '@/types'
+
+import { useParameterFieldStyles } from './ParameterField.styles'
+import { getParameterControlKind, type ParameterFormValue } from './parameterForm'
+
+export interface ParameterFieldProps {
+ parameter: Parameter
+ value: ParameterFormValue
+ disabled: boolean
+ onChange: (name: string, value: ParameterFormValue) => void
+ /** Prefix for `data-testid` attributes. Defaults to `'param'` (e.g. `param-
`). */
+ testIdPrefix?: string
+}
+
+/**
+ * Renders the appropriate Fluent UI control for a declared {@link Parameter},
+ * driven by {@link getParameterControlKind}. Shared by every dynamic
+ * parameter form (initializers, scenario launch) so a parameter always looks
+ * and behaves the same way regardless of where it's rendered.
+ *
+ * A boolean parameter renders as a tri-state select (unset / True / False)
+ * rather than a switch, so "not set" (omit — use the server default) stays
+ * distinguishable from an explicitly chosen `False`.
+ */
+export default function ParameterField({
+ parameter,
+ value,
+ disabled,
+ onChange,
+ testIdPrefix = 'param',
+}: ParameterFieldProps) {
+ const styles = useParameterFieldStyles()
+ const kind = getParameterControlKind(parameter)
+ const label = parameter.required ? `${parameter.name} *` : parameter.name
+ const testId = `${testIdPrefix}-${parameter.name}`
+
+ if (kind === 'boolean') {
+ const current = value === 'true' || value === 'false' ? value : ''
+ return (
+
+
+
+ )
+ }
+
+ if (kind === 'multiselect') {
+ const selected = Array.isArray(value) ? value : []
+ return (
+
+
+
+ {label}
+
+ {(parameter.choices ?? []).map((choice) => {
+ const choiceId = `${testId}-${encodeURIComponent(choice)}`
+ const choiceLabelId = `${choiceId}-label`
+ return (
+ {
+ const next = data.checked
+ ? [...selected, choice]
+ : selected.filter((entry) => entry !== choice)
+ onChange(parameter.name, next)
+ }}
+ data-testid={`${testId}-${choice}`}
+ />
+ )
+ })}
+
+
+ )
+ }
+
+ const stringValue = typeof value === 'string' ? value : ''
+
+ if (kind === 'select') {
+ return (
+
+
+
+ )
+ }
+
+ const placeholder = typeof parameter.default === 'string' ? parameter.default : undefined
+ const hint =
+ parameter.description ?? (kind === 'list' ? 'Comma-separated list of values.' : parameter.type_name)
+
+ return (
+
+ onChange(parameter.name, data.value)}
+ data-testid={testId}
+ />
+
+ )
+}
diff --git a/frontend/src/components/Initializers/initializerParameterForm.test.ts b/frontend/src/components/Parameters/parameterForm.test.ts
similarity index 55%
rename from frontend/src/components/Initializers/initializerParameterForm.test.ts
rename to frontend/src/components/Parameters/parameterForm.test.ts
index 13bb0ae2db..5c08f20191 100644
--- a/frontend/src/components/Initializers/initializerParameterForm.test.ts
+++ b/frontend/src/components/Parameters/parameterForm.test.ts
@@ -4,7 +4,8 @@ import {
buildParametersFromForm,
getInitialFormValues,
getParameterControlKind,
-} from './initializerParameterForm'
+ UNSET_BOOLEAN_VALUE,
+} from './parameterForm'
function makeParameter(overrides: Partial & { name: string }): Parameter {
return {
@@ -49,17 +50,23 @@ describe('getParameterControlKind', () => {
})
describe('getInitialFormValues', () => {
- it('derives boolean strings from the provided value and the default', () => {
+ it('derives boolean strings from the provided value, honoring an explicit false', () => {
const params = [
makeParameter({ name: 'a', type_name: 'bool' }),
makeParameter({ name: 'b', type_name: 'bool', default: 'true' }),
makeParameter({ name: 'c', type_name: 'bool' }),
+ makeParameter({ name: 'd', type_name: 'bool' }),
]
- const values = getInitialFormValues(params, { a: true })
- expect(values).toEqual({ a: 'true', b: 'true', c: 'false' })
+ const values = getInitialFormValues(params, { a: true, d: false })
+ expect(values).toEqual({ a: 'true', b: 'true', c: UNSET_BOOLEAN_VALUE, d: 'false' })
})
- it('derives multiselect arrays and list strings', () => {
+ it('leaves an optional boolean with no initial value or default unset', () => {
+ const params = [makeParameter({ name: 'flag', type_name: 'bool' })]
+ expect(getInitialFormValues(params)).toEqual({ flag: UNSET_BOOLEAN_VALUE })
+ })
+
+ it('derives multiselect arrays and list strings from initial values', () => {
const params = [
makeParameter({ name: 'tags', type_name: 'list[str]', is_list: true, choices: ['x', 'y'] }),
makeParameter({ name: 'names', type_name: 'list[str]', is_list: true }),
@@ -68,12 +75,43 @@ describe('getInitialFormValues', () => {
expect(values).toEqual({ tags: ['x'], names: 'one, two' })
})
- it('stringifies scalar values and defaults to empty strings', () => {
+ it('honors a declared list default when no initial value is provided', () => {
+ const params = [
+ makeParameter({ name: 'tags', type_name: 'list[str]', is_list: true, choices: ['x', 'y'], default: ['y'] }),
+ makeParameter({ name: 'names', type_name: 'list[str]', is_list: true, default: ['a', 'b'] }),
+ ]
+ expect(getInitialFormValues(params)).toEqual({ tags: ['y'], names: 'a, b' })
+ })
+
+ it('stringifies scalar values, honors a declared scalar default, and defaults to empty strings', () => {
const params = [
makeParameter({ name: 'days', type_name: 'int' }),
makeParameter({ name: 'label' }),
+ makeParameter({ name: 'ratio', type_name: 'float', default: '1.5' }),
+ ]
+ expect(getInitialFormValues(params, { days: 7 })).toEqual({ days: '7', label: '', ratio: '1.5' })
+ })
+
+ it('preserves explicit null values instead of replacing them with defaults', () => {
+ const params = [
+ makeParameter({ name: 'flag', type_name: 'bool', default: 'true' }),
+ makeParameter({ name: 'days', type_name: 'int', default: '7' }),
+ ]
+ expect(getInitialFormValues(params, { flag: null, days: null })).toEqual({
+ flag: UNSET_BOOLEAN_VALUE,
+ days: '',
+ })
+ })
+
+ it('can leave absent values unset when editing persisted parameters', () => {
+ const params = [
+ makeParameter({ name: 'flag', type_name: 'bool', default: 'true' }),
+ makeParameter({ name: 'days', type_name: 'int', default: '7' }),
]
- expect(getInitialFormValues(params, { days: 7 })).toEqual({ days: '7', label: '' })
+ expect(getInitialFormValues(params, {}, { prefillDefaults: false })).toEqual({
+ flag: UNSET_BOOLEAN_VALUE,
+ days: '',
+ })
})
})
@@ -102,12 +140,42 @@ describe('buildParametersFromForm', () => {
expect(result).toEqual({ ok: false, error: 'days must be an integer.' })
})
+ it('coerces a valid float', () => {
+ const params = [makeParameter({ name: 'ratio', type_name: 'float' })]
+ const result = buildParametersFromForm(params, { ratio: '1.5' })
+ expect(result).toEqual({ ok: true, parameters: { ratio: 1.5 } })
+ })
+
it('splits a comma-separated list', () => {
const params = [makeParameter({ name: 'names', type_name: 'list[str]', is_list: true })]
const result = buildParametersFromForm(params, { names: 'a, b ,, c' })
expect(result).toEqual({ ok: true, parameters: { names: ['a', 'b', 'c'] } })
})
+ it('coerces list elements to the declared element type', () => {
+ const params = [makeParameter({ name: 'days', type_name: 'list[int]', is_list: true })]
+ const result = buildParametersFromForm(params, { days: '1, 2, 3' })
+ expect(result).toEqual({ ok: true, parameters: { days: [1, 2, 3] } })
+ })
+
+ it('coerces accepted list[bool] spellings', () => {
+ const params = [makeParameter({ name: 'flags', type_name: 'list[bool]', is_list: true })]
+ const result = buildParametersFromForm(params, { flags: 'true, 0, yes, no' })
+ expect(result).toEqual({ ok: true, parameters: { flags: [true, false, true, false] } })
+ })
+
+ it('rejects an invalid list[bool] token', () => {
+ const params = [makeParameter({ name: 'flags', type_name: 'list[bool]', is_list: true })]
+ const result = buildParametersFromForm(params, { flags: 'true, maybe' })
+ expect(result).toEqual({ ok: false, error: 'flags must be true or false.' })
+ })
+
+ it('rejects a non-integer list element for a list[int] parameter', () => {
+ const params = [makeParameter({ name: 'days', type_name: 'list[int]', is_list: true })]
+ const result = buildParametersFromForm(params, { days: '1, x' })
+ expect(result).toEqual({ ok: false, error: 'days must be a number.' })
+ })
+
it('keeps selected multiselect choices', () => {
const params = [
makeParameter({ name: 'tags', type_name: 'list[str]', is_list: true, choices: ['a', 'b'] }),
@@ -116,6 +184,14 @@ describe('buildParametersFromForm', () => {
expect(result).toEqual({ ok: true, parameters: { tags: ['a', 'b'] } })
})
+ it('coerces constrained multiselect choices declared as list[int]', () => {
+ const params = [
+ makeParameter({ name: 'levels', type_name: 'list[int]', is_list: true, choices: ['1', '2', '3'] }),
+ ]
+ const result = buildParametersFromForm(params, { levels: ['1', '3'] })
+ expect(result).toEqual({ ok: true, parameters: { levels: [1, 3] } })
+ })
+
it('rejects a multiselect value outside the allowed set', () => {
const params = [
makeParameter({ name: 'tags', type_name: 'list[str]', is_list: true, choices: ['a', 'b'] }),
@@ -130,6 +206,12 @@ describe('buildParametersFromForm', () => {
expect(result).toEqual({ ok: false, error: 'mode: "medium" is not an allowed value.' })
})
+ it('coerces a constrained scalar declared as int (Literal[int]/Enum-of-int)', () => {
+ const params = [makeParameter({ name: 'level', type_name: 'int', choices: ['1', '2'] })]
+ const result = buildParametersFromForm(params, { level: '2' })
+ expect(result).toEqual({ ok: true, parameters: { level: 2 } })
+ })
+
it('coerces booleans', () => {
const params = [
makeParameter({ name: 'on', type_name: 'bool' }),
@@ -139,6 +221,18 @@ describe('buildParametersFromForm', () => {
expect(result).toEqual({ ok: true, parameters: { on: true, off: false } })
})
+ it('omits an optional boolean left unset', () => {
+ const params = [makeParameter({ name: 'flag', type_name: 'bool' })]
+ const result = buildParametersFromForm(params, { flag: UNSET_BOOLEAN_VALUE })
+ expect(result).toEqual({ ok: true, parameters: null })
+ })
+
+ it('reports a required boolean left unset', () => {
+ const params = [makeParameter({ name: 'flag', type_name: 'bool', required: true })]
+ const result = buildParametersFromForm(params, { flag: UNSET_BOOLEAN_VALUE })
+ expect(result).toEqual({ ok: false, error: 'flag is required.' })
+ })
+
it('reports a required parameter with no value', () => {
const params = [makeParameter({ name: 'label', required: true })]
const result = buildParametersFromForm(params, { label: '' })
diff --git a/frontend/src/components/Parameters/parameterForm.ts b/frontend/src/components/Parameters/parameterForm.ts
new file mode 100644
index 0000000000..a8e2ea28f6
--- /dev/null
+++ b/frontend/src/components/Parameters/parameterForm.ts
@@ -0,0 +1,258 @@
+import type { Parameter } from '@/types'
+
+/**
+ * Shared parameter-form logic reused by every dynamic parameter form in the
+ * app (initializer parameters, scenario-specific parameters, ...). The
+ * control kind, form-value shape, default-initialization, and coercion/
+ * validation rules all live here so every consumer behaves identically.
+ */
+
+/** The control rendered for a parameter, derived from its declared metadata. */
+export type ParameterControlKind = 'boolean' | 'select' | 'multiselect' | 'list' | 'number' | 'text'
+
+/**
+ * Form state value for a single parameter.
+ *
+ * A boolean parameter's value is one of `''` (unset — distinct from a
+ * chosen `false`), `'true'`, or `'false'`. Everything else is a raw string
+ * (scalar / unconstrained list, comma-joined) or a string array
+ * (multiselect selections).
+ */
+export type ParameterFormValue = string | string[]
+
+/** Sentinel form value meaning "the user has not chosen true or false yet". */
+export const UNSET_BOOLEAN_VALUE = ''
+
+export interface InitialFormValueOptions {
+ /** Populate absent values from the parameter declaration. Defaults to true. */
+ prefillDefaults?: boolean
+}
+
+export function getParameterControlKind(param: Parameter): ParameterControlKind {
+ if (param.type_name === 'bool') {
+ return 'boolean'
+ }
+ const hasChoices = (param.choices?.length ?? 0) > 0
+ if (param.is_list && hasChoices) {
+ return 'multiselect'
+ }
+ if (hasChoices) {
+ return 'select'
+ }
+ if (param.is_list) {
+ return 'list'
+ }
+ if (param.type_name === 'int' || param.type_name === 'float') {
+ return 'number'
+ }
+ return 'text'
+}
+
+/**
+ * The element type name for a list parameter's declared type (e.g. `'int'`
+ * for `'list[int]'`), or the parameter's own `type_name` when it isn't a
+ * list. Drives per-element coercion for list/multiselect parameters.
+ */
+function elementTypeName(param: Parameter): string {
+ if (!param.is_list) {
+ return param.type_name
+ }
+ const match = /^list\[(.+)\]$/.exec(param.type_name)
+ return match ? match[1] : 'str'
+}
+
+function parseListValue(raw: string): string[] {
+ return raw
+ .split(',')
+ .map((entry) => entry.trim())
+ .filter((entry) => entry.length > 0)
+}
+
+/** Derives the initial tri-state boolean form value: `''` (unset), `'true'`, or `'false'`. */
+function initialBooleanValue(source: unknown): string {
+ if (source == null) {
+ return UNSET_BOOLEAN_VALUE
+ }
+ return String(source).toLowerCase() === 'true' ? 'true' : 'false'
+}
+
+export function getInitialFormValues(
+ params: Parameter[],
+ initialParameters?: Record | null,
+ options: InitialFormValueOptions = {},
+): Record {
+ const values: Record = {}
+ const prefillDefaults = options.prefillDefaults ?? true
+ for (const param of params) {
+ const hasInitialValue =
+ initialParameters !== null
+ && initialParameters !== undefined
+ && Object.prototype.hasOwnProperty.call(initialParameters, param.name)
+ const source = hasInitialValue
+ ? initialParameters[param.name]
+ : prefillDefaults
+ ? param.default
+ : undefined
+ switch (getParameterControlKind(param)) {
+ case 'boolean':
+ values[param.name] = initialBooleanValue(source)
+ break
+ case 'multiselect': {
+ values[param.name] = Array.isArray(source) ? source.map((entry) => String(entry)) : []
+ break
+ }
+ case 'list': {
+ values[param.name] = Array.isArray(source)
+ ? source.map((entry) => String(entry)).join(', ')
+ : source != null
+ ? String(source)
+ : ''
+ break
+ }
+ default: {
+ values[param.name] = source != null ? String(source) : ''
+ break
+ }
+ }
+ }
+ return values
+}
+
+export type BuildParametersResult =
+ | { ok: true; parameters: Record | null }
+ | { ok: false; error: string }
+
+type CoerceResult = { ok: true; value: unknown } | { ok: false; error: string }
+
+/** Coerces a single string token to the declared scalar type (`int` / `float` / `bool` / anything else passes through as a string). */
+function coerceToken(raw: string, typeName: string, paramName: string): CoerceResult {
+ if (typeName === 'int') {
+ const parsed = Number(raw)
+ if (!Number.isFinite(parsed)) {
+ return { ok: false, error: `${paramName} must be a number.` }
+ }
+ if (!Number.isInteger(parsed)) {
+ return { ok: false, error: `${paramName} must be an integer.` }
+ }
+ return { ok: true, value: parsed }
+ }
+ if (typeName === 'float') {
+ const parsed = Number(raw)
+ if (!Number.isFinite(parsed)) {
+ return { ok: false, error: `${paramName} must be a number.` }
+ }
+ return { ok: true, value: parsed }
+ }
+ if (typeName === 'bool') {
+ const normalized = raw.toLowerCase()
+ if (normalized === 'true' || normalized === '1' || normalized === 'yes') {
+ return { ok: true, value: true }
+ }
+ if (normalized === 'false' || normalized === '0' || normalized === 'no') {
+ return { ok: true, value: false }
+ }
+ return { ok: false, error: `${paramName} must be true or false.` }
+ }
+ return { ok: true, value: raw }
+}
+
+export function buildParametersFromForm(
+ params: Parameter[],
+ values: Record,
+): BuildParametersResult {
+ const parameters: Record = {}
+
+ for (const param of params) {
+ const value = values[param.name]
+ const kind = getParameterControlKind(param)
+
+ if (kind === 'boolean') {
+ if (value !== 'true' && value !== 'false') {
+ if (param.required) {
+ return { ok: false, error: `${param.name} is required.` }
+ }
+ continue
+ }
+ parameters[param.name] = value === 'true'
+ continue
+ }
+
+ if (kind === 'multiselect') {
+ const selected = Array.isArray(value) ? value : []
+ const invalid = selected.find((entry) => !(param.choices ?? []).includes(entry))
+ if (invalid != null) {
+ return { ok: false, error: `${param.name}: "${invalid}" is not an allowed value.` }
+ }
+ if (selected.length === 0) {
+ if (param.required) {
+ return { ok: false, error: `${param.name} is required.` }
+ }
+ continue
+ }
+ const coercedList: unknown[] = []
+ for (const entry of selected) {
+ const coerced = coerceToken(entry, elementTypeName(param), param.name)
+ if (!coerced.ok) {
+ return coerced
+ }
+ coercedList.push(coerced.value)
+ }
+ parameters[param.name] = coercedList
+ continue
+ }
+
+ const raw = typeof value === 'string' ? value.trim() : ''
+
+ if (kind === 'list') {
+ const entries = parseListValue(raw)
+ if (entries.length === 0) {
+ if (param.required) {
+ return { ok: false, error: `${param.name} is required.` }
+ }
+ continue
+ }
+ const coercedList: unknown[] = []
+ for (const entry of entries) {
+ const coerced = coerceToken(entry, elementTypeName(param), param.name)
+ if (!coerced.ok) {
+ return coerced
+ }
+ coercedList.push(coerced.value)
+ }
+ parameters[param.name] = coercedList
+ continue
+ }
+
+ if (raw.length === 0) {
+ if (param.required) {
+ return { ok: false, error: `${param.name} is required.` }
+ }
+ continue
+ }
+
+ if (kind === 'select') {
+ if (!(param.choices ?? []).includes(raw)) {
+ return { ok: false, error: `${param.name}: "${raw}" is not an allowed value.` }
+ }
+ const coerced = coerceToken(raw, param.type_name, param.name)
+ if (!coerced.ok) {
+ return coerced
+ }
+ parameters[param.name] = coerced.value
+ continue
+ }
+
+ if (kind === 'number') {
+ const coerced = coerceToken(raw, param.type_name, param.name)
+ if (!coerced.ok) {
+ return coerced
+ }
+ parameters[param.name] = coerced.value
+ continue
+ }
+
+ parameters[param.name] = raw
+ }
+
+ return { ok: true, parameters: Object.keys(parameters).length > 0 ? parameters : null }
+}
diff --git a/frontend/src/components/Scenarios/ScenarioCatalog.styles.ts b/frontend/src/components/Scenarios/ScenarioCatalog.styles.ts
new file mode 100644
index 0000000000..7cda2b5ced
--- /dev/null
+++ b/frontend/src/components/Scenarios/ScenarioCatalog.styles.ts
@@ -0,0 +1,252 @@
+import { makeStyles, tokens } from '@fluentui/react-components'
+
+import {
+ MINIMUM_TOUCH_TARGET_SIZE,
+ mobileTouchTarget,
+ NARROW_VIEWPORT_QUERY,
+ TOUCH_INPUT_QUERY,
+} from '@/styles/touchTargets'
+
+export const useScenarioCatalogStyles = makeStyles({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ height: '100%',
+ width: '100%',
+ minWidth: 0,
+ padding: tokens.spacingVerticalXXL,
+ overflowX: 'hidden',
+ overflowY: 'auto',
+ backgroundColor: tokens.colorNeutralBackground2,
+ [NARROW_VIEWPORT_QUERY]: {
+ padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalM}`,
+ },
+ },
+ header: {
+ display: 'flex',
+ alignItems: 'flex-start',
+ justifyContent: 'space-between',
+ flexWrap: 'wrap',
+ gap: tokens.spacingVerticalL,
+ marginBottom: tokens.spacingVerticalXL,
+ [NARROW_VIEWPORT_QUERY]: {
+ flexDirection: 'column',
+ alignItems: 'stretch',
+ },
+ },
+ headerText: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: tokens.spacingVerticalXS,
+ },
+ subtitle: {
+ color: tokens.colorNeutralForeground3,
+ },
+ explanation: {
+ maxWidth: '75ch',
+ margin: `${tokens.spacingVerticalS} 0 0`,
+ color: tokens.colorNeutralForeground2,
+ },
+ headerActions: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ gap: tokens.spacingHorizontalS,
+ alignItems: 'center',
+ [NARROW_VIEWPORT_QUERY]: {
+ width: '100%',
+ },
+ },
+ search: {
+ minWidth: '16rem',
+ [NARROW_VIEWPORT_QUERY]: {
+ minWidth: 0,
+ flex: 1,
+ },
+ [TOUCH_INPUT_QUERY]: {
+ minHeight: MINIMUM_TOUCH_TARGET_SIZE,
+ },
+ },
+ touchTarget: {
+ ...mobileTouchTarget,
+ },
+ centeredState: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: tokens.spacingVerticalM,
+ padding: tokens.spacingVerticalXXXL,
+ textAlign: 'center',
+ color: tokens.colorNeutralForeground3,
+ },
+ tableContainer: {
+ minWidth: 0,
+ overflowX: 'auto',
+ border: `1px solid ${tokens.colorNeutralStroke2}`,
+ borderRadius: tokens.borderRadiusLarge,
+ backgroundColor: tokens.colorNeutralBackground1,
+ [NARROW_VIEWPORT_QUERY]: {
+ overflowX: 'visible',
+ border: 0,
+ borderRadius: 0,
+ backgroundColor: 'transparent',
+ },
+ },
+ table: {
+ width: '100%',
+ minWidth: '52rem',
+ tableLayout: 'fixed',
+ [NARROW_VIEWPORT_QUERY]: {
+ display: 'block',
+ minWidth: 0,
+ },
+ },
+ tableHeader: {
+ position: 'sticky',
+ top: 0,
+ zIndex: 1,
+ backgroundColor: tokens.colorNeutralBackground1,
+ [NARROW_VIEWPORT_QUERY]: {
+ position: 'absolute',
+ width: '1px',
+ height: '1px',
+ padding: 0,
+ margin: '-1px',
+ overflow: 'hidden',
+ clip: 'rect(0, 0, 0, 0)',
+ whiteSpace: 'nowrap',
+ border: 0,
+ },
+ },
+ tableHeaderCell: {
+ paddingTop: tokens.spacingVerticalL,
+ paddingRight: tokens.spacingHorizontalL,
+ paddingBottom: tokens.spacingVerticalL,
+ paddingLeft: tokens.spacingHorizontalL,
+ },
+ tableBody: {
+ [NARROW_VIEWPORT_QUERY]: {
+ display: 'block',
+ },
+ },
+ scenarioColumn: {
+ width: '40%',
+ },
+ sizeColumn: {
+ width: '20%',
+ },
+ techniqueColumn: {
+ width: '20%',
+ },
+ datasetColumn: {
+ width: '20%',
+ },
+ summaryRow: {
+ color: tokens.colorNeutralForeground1,
+ ':hover': {
+ backgroundColor: tokens.colorNeutralBackground1Hover,
+ },
+ [NARROW_VIEWPORT_QUERY]: {
+ display: 'grid',
+ gridTemplateRows: 'repeat(4, max-content)',
+ height: 'max-content',
+ width: '100%',
+ marginBottom: tokens.spacingVerticalM,
+ overflow: 'hidden',
+ border: `1px solid ${tokens.colorNeutralStroke2}`,
+ borderRadius: tokens.borderRadiusLarge,
+ backgroundColor: tokens.colorNeutralBackground1,
+ },
+ },
+ tableCell: {
+ verticalAlign: 'top',
+ overflowWrap: 'anywhere',
+ [NARROW_VIEWPORT_QUERY]: {
+ display: 'grid',
+ gridTemplateColumns: 'minmax(7rem, 35%) minmax(0, 1fr)',
+ gap: tokens.spacingHorizontalM,
+ height: 'auto',
+ width: 'auto',
+ padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalM}`,
+ borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+ ':last-child': {
+ borderBottom: 0,
+ },
+ },
+ },
+ tableCellPadding: {
+ paddingTop: tokens.spacingVerticalL,
+ paddingRight: tokens.spacingHorizontalL,
+ paddingBottom: tokens.spacingVerticalL,
+ paddingLeft: tokens.spacingHorizontalL,
+ },
+ mobileLabel: {
+ display: 'none',
+ color: tokens.colorNeutralForeground3,
+ [NARROW_VIEWPORT_QUERY]: {
+ display: 'block',
+ },
+ },
+ scenarioSummary: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: tokens.spacingVerticalXXS,
+ minWidth: 0,
+ },
+ scenarioLink: {
+ display: 'inline-flex',
+ alignItems: 'center',
+ alignSelf: 'flex-start',
+ color: tokens.colorBrandForegroundLink,
+ fontWeight: tokens.fontWeightSemibold,
+ textDecorationLine: 'none',
+ overflowWrap: 'anywhere',
+ ':hover': {
+ textDecorationLine: 'underline',
+ },
+ ':focus-visible': {
+ outline: `2px solid ${tokens.colorStrokeFocus2}`,
+ outlineOffset: '2px',
+ },
+ [TOUCH_INPUT_QUERY]: {
+ minHeight: MINIMUM_TOUCH_TARGET_SIZE,
+ },
+ },
+ purposePreview: {
+ color: tokens.colorNeutralForeground2,
+ fontSize: tokens.fontSizeBase200,
+ lineHeight: tokens.lineHeightBase300,
+ '& p': {
+ marginBottom: tokens.spacingVerticalXS,
+ },
+ '& ul, & ol': {
+ marginBottom: tokens.spacingVerticalXS,
+ },
+ '& h1, & h2, & h3, & h4, & h5, & h6': {
+ margin: `${tokens.spacingVerticalXS} 0`,
+ fontSize: tokens.fontSizeBase300,
+ lineHeight: tokens.lineHeightBase300,
+ },
+ },
+ purposePreviewCollapsed: {
+ maxHeight: '3.75rem',
+ overflow: 'hidden',
+ },
+ descriptionToggle: {
+ alignSelf: 'flex-start',
+ minWidth: 0,
+ width: '2rem',
+ height: '2rem',
+ padding: 0,
+ },
+ compactStack: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'flex-start',
+ gap: tokens.spacingVerticalXS,
+ minWidth: 0,
+ },
+ secondaryText: {
+ color: tokens.colorNeutralForeground3,
+ },
+})
diff --git a/frontend/src/components/Scenarios/ScenarioCatalog.test.tsx b/frontend/src/components/Scenarios/ScenarioCatalog.test.tsx
new file mode 100644
index 0000000000..e6a315605e
--- /dev/null
+++ b/frontend/src/components/Scenarios/ScenarioCatalog.test.tsx
@@ -0,0 +1,593 @@
+import { act, render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { FluentProvider, webLightTheme } from '@fluentui/react-components'
+import { MemoryRouter, useLocation } from 'react-router'
+
+import { scenariosApi } from '@/services/api'
+import type { RegisteredScenario } from '@/types'
+
+import ScenarioCatalog from './ScenarioCatalog'
+
+jest.mock('@/services/api', () => ({
+ scenariosApi: {
+ listCatalog: jest.fn(),
+ },
+}))
+
+const mockListCatalog = scenariosApi.listCatalog as jest.Mock
+
+const REMOVED_NORMAL_ESTIMATE_LABELS = new RegExp(
+ [
+ ['Run', 'size', 'calculated'].join(' '),
+ ['Final', 'count', 'set', 'at', 'launch'].join(' '),
+ ].join('|'),
+ 'i',
+)
+
+function LocationProbe() {
+ const location = useLocation()
+ return
+}
+
+function TestWrapper({ children }: { children: React.ReactNode }) {
+ return (
+
+
+ {children}
+
+
+
+ )
+}
+
+function makeScenario(overrides: Partial & { scenario_name: string }): RegisteredScenario {
+ const description = overrides.description ?? 'A demo scenario.'
+ const defaultTechnique = overrides.default_technique ?? 'default_technique'
+ return {
+ scenario_type: 'DemoScenario',
+ scenario_version: 1,
+ aggregate_techniques: [],
+ aggregate_technique_expansions: {},
+ all_techniques: ['default_technique'],
+ technique_summaries: [
+ {
+ name: 'default_technique',
+ description: 'Runs the default attack.',
+ tags: ['default'],
+ },
+ ],
+ default_datasets: [],
+ dataset_size_limit: {
+ default_scope: 'none',
+ default_count: null,
+ override_scope: 'per_dataset',
+ },
+ default_dataset_summaries: [],
+ baseline_policy: 'enabled',
+ include_baseline_by_default: true,
+ supported_parameters: [],
+ default_run_size: {
+ estimated_attack_count: null,
+ minimum_attack_count: null,
+ maximum_attack_count: null,
+ components: [],
+ datasets: [],
+ note: 'Default sizing is not available.',
+ },
+ ...overrides,
+ description,
+ description_markdown: overrides.description_markdown ?? description,
+ default_technique: defaultTechnique,
+ default_techniques: overrides.default_techniques ?? [defaultTechnique],
+ }
+}
+
+describe('ScenarioCatalog', () => {
+ beforeEach(() => {
+ jest.clearAllMocks()
+ })
+
+ it('shows a loading state while fetching', () => {
+ mockListCatalog.mockReturnValue(new Promise(() => {}))
+ render()
+ expect(screen.getByText('Loading scenarios...')).toBeInTheDocument()
+ })
+
+ it('renders every scenario from a single page', async () => {
+ mockListCatalog.mockResolvedValueOnce({
+ items: [
+ makeScenario({ scenario_name: 'foundry.red_team_agent', description: 'Red teams a target.' }),
+ makeScenario({ scenario_name: 'encoding.base64', description: 'Encodes prompts.' }),
+ ],
+ pagination: { limit: 200, has_more: false },
+ })
+
+ render()
+
+ expect(await screen.findByText('foundry.red_team_agent')).toBeInTheDocument()
+ expect(screen.getByText('encoding.base64')).toBeInTheDocument()
+ expect(screen.getByRole('heading', { name: 'Scanner' })).toBeInTheDocument()
+ expect(screen.getByRole('link', { name: 'Read the scanner documentation' })).toHaveAttribute(
+ 'href',
+ 'https://microsoft.github.io/PyRIT/scanner/0_scanner/',
+ )
+ expect(mockListCatalog).toHaveBeenCalledTimes(1)
+ })
+
+ it('renders Markdown descriptions and lets users expand long previews', async () => {
+ const user = userEvent.setup()
+ const clientHeight = jest.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(60)
+ const scrollHeight = jest.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockReturnValue(120)
+ mockListCatalog.mockResolvedValueOnce({
+ items: [
+ makeScenario({
+ scenario_name: 'scenario.markdown',
+ description_markdown: [
+ 'Tests **formatted text** and ``inline_code``.',
+ '',
+ 'This additional detail makes the description long enough to collapse in the catalog preview. ',
+ 'Users can expand the row to read the complete scenario purpose without leaving the catalog.',
+ ].join('\n'),
+ }),
+ ],
+ pagination: { limit: 200, has_more: false },
+ })
+
+ render()
+
+ const row = await screen.findByTestId('scenario-card-scenario.markdown')
+ expect(within(row).getByText('formatted text').tagName).toBe('STRONG')
+ expect(within(row).getByText('inline_code').tagName).toBe('CODE')
+
+ const expandButton = await within(row).findByRole('button', {
+ name: 'Expand description for scenario.markdown',
+ })
+ expect(expandButton).toHaveAttribute('aria-expanded', 'false')
+
+ await user.click(expandButton)
+
+ expect(within(row).getByRole('button', {
+ name: 'Collapse description for scenario.markdown',
+ })).toHaveAttribute('aria-expanded', 'true')
+ clientHeight.mockRestore()
+ scrollHeight.mockRestore()
+ })
+
+ it('does not show an expand control for a fully visible description', async () => {
+ const clientHeight = jest.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(60)
+ const scrollHeight = jest.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockReturnValue(61)
+ mockListCatalog.mockResolvedValueOnce({
+ items: [makeScenario({ scenario_name: 'scenario.visible' })],
+ pagination: { limit: 200, has_more: false },
+ })
+
+ render()
+
+ const row = await screen.findByTestId('scenario-card-scenario.visible')
+ expect(within(row).queryByRole('button', {
+ name: 'Expand description for scenario.visible',
+ })).not.toBeInTheDocument()
+ clientHeight.mockRestore()
+ scrollHeight.mockRestore()
+ })
+
+ it('ignores a catalog response that resolves after unmount', async () => {
+ let resolveRequest: ((value: {
+ items: RegisteredScenario[]
+ pagination: { limit: number; has_more: boolean }
+ }) => void) | undefined
+ mockListCatalog.mockImplementationOnce(() => new Promise((resolve) => {
+ resolveRequest = resolve
+ }))
+
+ const { unmount } = render()
+ await waitFor(() => expect(mockListCatalog).toHaveBeenCalledTimes(1))
+ unmount()
+ await act(async () => {
+ resolveRequest?.({
+ items: [makeScenario({ scenario_name: 'late.scenario' })],
+ pagination: { limit: 200, has_more: false },
+ })
+ })
+ })
+
+ it('ignores a catalog failure that arrives after unmount', async () => {
+ let rejectRequest: ((reason?: unknown) => void) | undefined
+ mockListCatalog.mockImplementationOnce(() => new Promise((_resolve, reject) => {
+ rejectRequest = reject
+ }))
+
+ const { unmount } = render()
+ await waitFor(() => expect(mockListCatalog).toHaveBeenCalledTimes(1))
+ unmount()
+ await act(async () => {
+ rejectRequest?.(new Error('late failure'))
+ })
+ })
+
+ it('renders the exact launch-index column order and applies spacing to every cell', async () => {
+ mockListCatalog.mockResolvedValueOnce({
+ items: [makeScenario({ scenario_name: 'foundry.red_team_agent' })],
+ pagination: { limit: 200, has_more: false },
+ })
+
+ render()
+
+ const table = await screen.findByRole('table', { name: 'Registered scenarios' })
+ expect(screen.getByText(/packages objective datasets, technique sets or selected techniques/i))
+ .toBeInTheDocument()
+ const headers = within(table).getAllByRole('columnheader')
+ expect(headers).toHaveLength(4)
+ expect(headers.map((header) => header.textContent)).toEqual([
+ 'Scenario / purpose',
+ 'Default datasets',
+ 'Default techniques',
+ 'Default run size',
+ ])
+ expect(headers.every((cell) => cell.classList.contains('scenario-catalog-cell-padding'))).toBe(true)
+ const cells = within(screen.getByTestId('scenario-card-foundry.red_team_agent')).getAllByRole('cell')
+ expect(cells).toHaveLength(4)
+ expect(cells.every((cell) => cell.classList.contains('scenario-catalog-cell-padding'))).toBe(true)
+ expect(within(cells[0]).getByRole('link', { name: 'foundry.red_team_agent' })).toBeInTheDocument()
+ expect(screen.queryByRole('button', { name: /show details|hide details/i })).not.toBeInTheDocument()
+ expect(screen.queryByRole('region', { name: /details/i })).not.toBeInTheDocument()
+ })
+
+ it('follows the cursor to load every page automatically', async () => {
+ mockListCatalog
+ .mockResolvedValueOnce({
+ items: [makeScenario({ scenario_name: 'scenario.page1' })],
+ pagination: { limit: 1, has_more: true, next_cursor: 'cursor-1' },
+ })
+ .mockResolvedValueOnce({
+ items: [makeScenario({ scenario_name: 'scenario.page2' })],
+ pagination: { limit: 1, has_more: false },
+ })
+
+ render()
+
+ expect(await screen.findByText('scenario.page1')).toBeInTheDocument()
+ expect(screen.getByText('scenario.page2')).toBeInTheDocument()
+ expect(mockListCatalog).toHaveBeenCalledTimes(2)
+ expect(mockListCatalog).toHaveBeenNthCalledWith(2, 200, 'cursor-1')
+ })
+
+ it('stops paging if the backend repeats a cursor instead of looping forever', async () => {
+ mockListCatalog.mockResolvedValue({
+ items: [makeScenario({ scenario_name: 'scenario.loop' })],
+ pagination: { limit: 1, has_more: true, next_cursor: 'same-cursor' },
+ })
+
+ render()
+
+ expect(await screen.findAllByText('scenario.loop')).toHaveLength(1)
+ await waitFor(() => expect(mockListCatalog).toHaveBeenCalledTimes(2))
+ // Give any additional (incorrect) fetch a chance to fire before asserting it didn't.
+ await new Promise((resolve) => setTimeout(resolve, 10))
+ expect(mockListCatalog).toHaveBeenCalledTimes(2)
+ })
+
+ it('shows an empty state when no scenarios are registered', async () => {
+ mockListCatalog.mockResolvedValueOnce({ items: [], pagination: { limit: 200, has_more: false } })
+
+ render()
+
+ expect(await screen.findByTestId('empty-state')).toBeInTheDocument()
+ })
+
+ it('shows an error MessageBar with a retry action on failure', async () => {
+ mockListCatalog.mockRejectedValueOnce(new Error('Network error — check that the backend is running and reachable.'))
+
+ render()
+
+ expect(await screen.findByTestId('error-state')).toBeInTheDocument()
+ expect(screen.getByText(/Network error/)).toBeInTheDocument()
+ expect(screen.getByTestId('retry-btn')).toBeInTheDocument()
+ })
+
+ it('retries the fetch when Retry is clicked', async () => {
+ const user = userEvent.setup()
+ mockListCatalog
+ .mockRejectedValueOnce(new Error('boom'))
+ .mockResolvedValueOnce({
+ items: [makeScenario({ scenario_name: 'scenario.recovered' })],
+ pagination: { limit: 200, has_more: false },
+ })
+
+ render()
+
+ await screen.findByTestId('error-state')
+ await user.click(screen.getByTestId('retry-btn'))
+
+ expect(await screen.findByText('scenario.recovered')).toBeInTheDocument()
+ expect(mockListCatalog).toHaveBeenCalledTimes(2)
+ })
+
+ it('filters scenarios by the search box across name, description, techniques, and datasets', async () => {
+ const user = userEvent.setup()
+ mockListCatalog.mockResolvedValueOnce({
+ items: [
+ makeScenario({ scenario_name: 'foundry.red_team_agent', description: 'Red teams a target.' }),
+ makeScenario({
+ scenario_name: 'encoding.base64',
+ description: 'Applies text encodings.',
+ default_datasets: ['harmbench'],
+ default_technique: 'multi_turn',
+ default_techniques: ['crescendo'],
+ aggregate_techniques: ['multi_turn'],
+ aggregate_technique_expansions: { multi_turn: ['crescendo'] },
+ }),
+ ],
+ pagination: { limit: 200, has_more: false },
+ })
+
+ render()
+
+ await screen.findByText('foundry.red_team_agent')
+
+ await user.type(screen.getByLabelText('Search scenarios'), 'Multi-turn')
+
+ expect(screen.queryByText('foundry.red_team_agent')).not.toBeInTheDocument()
+ expect(screen.getByText('encoding.base64')).toBeInTheDocument()
+ })
+
+ it('searches dataset metadata and renders singular counts with no default techniques', async () => {
+ const user = userEvent.setup()
+ mockListCatalog.mockResolvedValueOnce({
+ items: [
+ makeScenario({
+ scenario_name: 'scenario.one',
+ default_techniques: [],
+ default_datasets: ['dataset-one'],
+ default_dataset_summaries: [{
+ name: 'dataset-one',
+ kind: 'dataset',
+ logical_seed_group_count: 1,
+ selected_seed_group_count: 1,
+ configured_caps: [],
+ selection_note: null,
+ }],
+ }),
+ makeScenario({
+ scenario_name: 'scenario.two',
+ default_datasets: ['dataset-two'],
+ default_dataset_summaries: [{
+ name: 'dataset-two',
+ kind: 'dataset',
+ logical_seed_group_count: 2,
+ selected_seed_group_count: 2,
+ configured_caps: [],
+ selection_note: 'Dataset metadata is searchable.',
+ }],
+ }),
+ ],
+ pagination: { limit: 200, has_more: false },
+ })
+
+ render()
+ await screen.findByText('scenario.one')
+ await user.type(screen.getByLabelText('Search scenarios'), 'dataset')
+
+ const firstRow = screen.getByTestId('scenario-card-scenario.one')
+ expect(within(firstRow).getByText('1 objective')).toBeInTheDocument()
+ expect(within(firstRow).getByText(/dataset-one/)).toBeInTheDocument()
+ expect(within(firstRow).getByText('No default techniques')).toBeInTheDocument()
+ expect(screen.getByText('scenario.two')).toBeInTheDocument()
+ })
+
+ it('shows a no-results state when the search matches nothing', async () => {
+ const user = userEvent.setup()
+ mockListCatalog.mockResolvedValueOnce({
+ items: [makeScenario({ scenario_name: 'foundry.red_team_agent' })],
+ pagination: { limit: 200, has_more: false },
+ })
+
+ render()
+ await screen.findByText('foundry.red_team_agent')
+
+ await user.type(screen.getByLabelText('Search scenarios'), 'no-such-scenario')
+
+ expect(await screen.findByTestId('no-results-state')).toBeInTheDocument()
+ })
+
+ it('links each card to its encoded scenario detail route', async () => {
+ mockListCatalog.mockResolvedValueOnce({
+ items: [makeScenario({ scenario_name: 'foundry/red_team_agent' })],
+ pagination: { limit: 200, has_more: false },
+ })
+
+ render()
+
+ const card = await screen.findByRole('link', { name: /foundry\/red_team_agent/i })
+ expect(card).toHaveAttribute('href', '/scanner/foundry%2Fred_team_agent')
+ })
+
+ it('shows the total default objectives followed by the dataset names', async () => {
+ mockListCatalog.mockResolvedValueOnce({
+ items: [
+ makeScenario({
+ scenario_name: 'scenario.compound',
+ default_datasets: ['population-a', 'population-b'],
+ dataset_size_limit: {
+ default_scope: 'none',
+ default_count: null,
+ override_scope: 'per_dataset',
+ },
+ default_dataset_summaries: [
+ {
+ name: 'population-a',
+ kind: 'dataset',
+ logical_seed_group_count: 100,
+ selected_seed_group_count: 4,
+ configured_caps: [],
+ selection_note: null,
+ },
+ {
+ name: 'population-b',
+ kind: 'synthesized',
+ logical_seed_group_count: 20,
+ selected_seed_group_count: 2,
+ configured_caps: [],
+ selection_note: null,
+ },
+ ],
+ }),
+ ],
+ pagination: { limit: 200, has_more: false },
+ })
+
+ render()
+
+ const row = await screen.findByTestId('scenario-card-scenario.compound')
+ expect(within(row).getByText('6 objectives')).toBeInTheDocument()
+ expect(within(row).getByText('population-a · population-b')).toBeInTheDocument()
+ })
+
+ it('shows an adaptive estimate as a plain attack range', async () => {
+ mockListCatalog.mockResolvedValueOnce({
+ items: [
+ makeScenario({
+ scenario_name: 'adaptive.text_adaptive',
+ default_run_size: {
+ estimated_attack_count: null,
+ minimum_attack_count: 21,
+ maximum_attack_count: 42,
+ components: [
+ {
+ label: 'Baseline',
+ count: 21,
+ is_baseline: true,
+ note: null,
+ },
+ {
+ label: 'Adaptive objectives',
+ count: 21,
+ is_baseline: false,
+ note: null,
+ },
+ ],
+ datasets: [],
+ note: null,
+ },
+ }),
+ ],
+ pagination: { limit: 200, has_more: false },
+ })
+
+ render()
+
+ const row = await screen.findByTestId('scenario-card-adaptive.text_adaptive')
+ expect(within(row).getByText('21-42 attacks')).toBeInTheDocument()
+ expect(within(row).queryByText(/progress units|attack attempts/i)).not.toBeInTheDocument()
+ })
+
+ it('keeps declared datasets visible when backend population summaries are unavailable', async () => {
+ mockListCatalog.mockResolvedValueOnce({
+ items: [
+ makeScenario({
+ scenario_name: 'scenario.unsized',
+ default_datasets: ['harmbench'],
+ dataset_size_limit: {
+ default_scope: 'none',
+ default_count: null,
+ override_scope: 'per_dataset',
+ },
+ default_dataset_summaries: [],
+ }),
+ ],
+ pagination: { limit: 200, has_more: false },
+ })
+
+ render()
+ const row = await screen.findByTestId('scenario-card-scenario.unsized')
+ expect(within(row).getByText('Population counts unavailable')).toBeInTheDocument()
+ expect(within(row).getByText('harmbench')).toBeInTheDocument()
+ })
+
+ it('keeps the authoritative default comparison values in the launch row', async () => {
+ mockListCatalog.mockResolvedValueOnce({
+ items: [
+ makeScenario({
+ scenario_name: 'airt.jailbreak',
+ scenario_version: 4,
+ default_technique: 'default',
+ default_techniques: ['prompt_sending', 'jailbreak_system_prompt'],
+ aggregate_techniques: ['default', 'easy'],
+ aggregate_technique_expansions: {
+ default: ['prompt_sending', 'jailbreak_system_prompt'],
+ easy: ['prompt_sending'],
+ },
+ all_techniques: ['prompt_sending', 'jailbreak_system_prompt', 'flip'],
+ default_datasets: ['harmbench'],
+ dataset_size_limit: {
+ default_scope: 'none',
+ default_count: null,
+ override_scope: 'per_dataset',
+ },
+ default_dataset_summaries: [
+ {
+ name: 'harmbench',
+ kind: 'dataset',
+ logical_seed_group_count: 400,
+ selected_seed_group_count: 4,
+ configured_caps: [
+ {
+ label: 'Jailbreak templates',
+ count: 2,
+ configured_on: 'configuration',
+ dataset_name: null,
+ },
+ ],
+ selection_note: 'One incompatible group is excluded.',
+ },
+ ],
+ default_run_size: {
+ estimated_attack_count: null,
+ minimum_attack_count: 12,
+ maximum_attack_count: 20,
+ components: [
+ {
+ label: 'Default attacks',
+ count: 20,
+ is_baseline: false,
+ note: null,
+ },
+ ],
+ datasets: [
+ {
+ name: 'harmbench',
+ kind: 'dataset',
+ logical_seed_group_count: 400,
+ selected_seed_group_count: 4,
+ configured_caps: [
+ {
+ label: 'Jailbreak templates',
+ count: 2,
+ configured_on: 'configuration',
+ dataset_name: null,
+ },
+ ],
+ selection_note: 'One incompatible group is excluded.',
+ },
+ ],
+ note: 'Retries and internal turns are excluded.',
+ },
+ }),
+ ],
+ pagination: { limit: 200, has_more: false },
+ })
+
+ render()
+
+ const row = await screen.findByTestId('scenario-card-airt.jailbreak')
+ expect(within(row).getByText('4 objectives')).toBeInTheDocument()
+ expect(within(row).getByText('harmbench')).toBeInTheDocument()
+ expect(within(row).getByText('2 techniques')).toBeInTheDocument()
+ expect(within(row).getByText('12-20 attacks')).toBeInTheDocument()
+ expect(within(row).queryByText('default')).not.toBeInTheDocument()
+ expect(within(row).queryByText(/aggregate presets|compatible concrete/i)).not.toBeInTheDocument()
+ expect(within(row).queryByText(REMOVED_NORMAL_ESTIMATE_LABELS)).not.toBeInTheDocument()
+ expect(screen.queryByRole('button', { name: /show details|hide details/i })).not.toBeInTheDocument()
+ expect(screen.queryByRole('region', { name: /details/i })).not.toBeInTheDocument()
+ })
+})
diff --git a/frontend/src/components/Scenarios/ScenarioCatalog.tsx b/frontend/src/components/Scenarios/ScenarioCatalog.tsx
new file mode 100644
index 0000000000..ba42c74297
--- /dev/null
+++ b/frontend/src/components/Scenarios/ScenarioCatalog.tsx
@@ -0,0 +1,429 @@
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
+
+import {
+ Button,
+ Input,
+ Link as FluentLink,
+ mergeClasses,
+ MessageBar,
+ MessageBarBody,
+ Spinner,
+ Table,
+ TableBody,
+ TableCell,
+ TableHeader,
+ TableHeaderCell,
+ TableRow,
+ Text,
+} from '@fluentui/react-components'
+import {
+ ArrowSyncRegular,
+ ChevronDownRegular,
+ ChevronUpRegular,
+ SearchRegular,
+} from '@fluentui/react-icons'
+import { Link } from 'react-router'
+
+import MarkdownContent from '@/components/Markdown/MarkdownContent'
+import { scenariosApi } from '@/services/api'
+import { toApiError } from '@/services/errors'
+import type { RegisteredScenario, ScenarioDatasetSummary } from '@/types'
+import { fetchAllPages } from '@/utils/fetchAllPages'
+
+import { useScenarioCatalogStyles } from './ScenarioCatalog.styles'
+import {
+ ScenarioRunEstimateSummary,
+} from './ScenarioRunEstimate'
+import { normalizeScenarioMarkdown } from './scenarioMarkdown'
+import { mapScenarioRunEstimate } from './scenarioRunEstimateAdapter'
+import { techniqueSetName } from './scenarioTechniqueSets'
+
+/** Items requested per catalog page while paging through the full list. */
+const CATALOG_PAGE_SIZE = 200
+const DESCRIPTION_OVERFLOW_TOLERANCE_PX = 2
+function matchesSearch(scenario: RegisteredScenario, query: string): boolean {
+ if (!query) {
+ return true
+ }
+ const haystack = [
+ scenario.scenario_name,
+ scenario.description,
+ scenario.description_markdown,
+ scenario.scenario_type,
+ scenario.default_technique,
+ ...scenario.default_techniques,
+ ...scenario.aggregate_techniques,
+ ...scenario.aggregate_techniques.map(techniqueSetName),
+ ...Object.values(scenario.aggregate_technique_expansions).flat(),
+ ...scenario.all_techniques,
+ ...scenario.default_datasets,
+ ...scenario.default_dataset_summaries.flatMap((dataset) => [
+ dataset.name,
+ dataset.selection_note ?? '',
+ ...dataset.configured_caps.map((cap) => cap.label),
+ ]),
+ ]
+ .join(' ')
+ .toLowerCase()
+ return haystack.includes(query.toLowerCase())
+}
+
+function uniqueNames(names: string[]): string[] {
+ return [...new Set(names)]
+}
+
+function formatCount(value: number): string {
+ return value.toLocaleString()
+}
+
+function formatObjectiveCount(value: number): string {
+ return `${formatCount(value)} objective${value === 1 ? '' : 's'}`
+}
+
+function DefaultDatasetSummary({
+ datasets,
+ declaredDatasets,
+}: {
+ datasets: ScenarioDatasetSummary[]
+ declaredDatasets: string[]
+}) {
+ const styles = useScenarioCatalogStyles()
+
+ if (datasets.length === 0 && declaredDatasets.length === 0) {
+ return No default datasets
+ }
+
+ if (datasets.length === 0) {
+ return (
+
+ Population counts unavailable
+ {declaredDatasets.join(' · ')}
+
+ )
+ }
+
+ const objectiveCount = datasets.reduce(
+ (total, dataset) => total + dataset.selected_seed_group_count,
+ 0,
+ )
+ const datasetNames = declaredDatasets.length > 0
+ ? declaredDatasets
+ : datasets.map((dataset) => dataset.name)
+
+ return (
+
+ {formatObjectiveCount(objectiveCount)}
+ {datasetNames.join(' · ')}
+
+ )
+}
+
+interface ScenarioCatalogRowProps {
+ scenario: RegisteredScenario
+}
+
+interface ScenarioDescriptionProps {
+ content: string
+ scenarioName: string
+}
+
+function ScenarioDescription({ content, scenarioName }: ScenarioDescriptionProps) {
+ const styles = useScenarioCatalogStyles()
+ const descriptionId = useId()
+ const descriptionRef = useRef(null)
+ const [descriptionExpanded, setDescriptionExpanded] = useState(false)
+ const [descriptionClipped, setDescriptionClipped] = useState(false)
+
+ useEffect(() => {
+ const description = descriptionRef.current
+ if (!description) {
+ return
+ }
+
+ const updateClippedState = () => {
+ if (!descriptionExpanded) {
+ setDescriptionClipped(
+ description.scrollHeight - description.clientHeight > DESCRIPTION_OVERFLOW_TOLERANCE_PX,
+ )
+ }
+ }
+ updateClippedState()
+
+ const resizeObserver = new ResizeObserver(updateClippedState)
+ resizeObserver.observe(description)
+ return () => resizeObserver.disconnect()
+ }, [content, descriptionExpanded])
+
+ return (
+ <>
+
+
+
+ {descriptionClipped && (
+ : }
+ aria-controls={descriptionId}
+ aria-expanded={descriptionExpanded}
+ aria-label={`${descriptionExpanded ? 'Collapse' : 'Expand'} description for ${scenarioName}`}
+ onClick={() => setDescriptionExpanded((expanded) => !expanded)}
+ />
+ )}
+
+ )
+}
+
+function ScenarioCatalogRow({ scenario }: ScenarioCatalogRowProps) {
+ const styles = useScenarioCatalogStyles()
+ const defaultConcreteTechniques = uniqueNames(scenario.default_techniques)
+ const estimateState = mapScenarioRunEstimate(scenario.default_run_size, 'default')
+ const scenarioPath = `/scanner/${encodeURIComponent(scenario.scenario_name)}`
+ const descriptionMarkdown = normalizeScenarioMarkdown(
+ scenario.description_markdown || scenario.description,
+ )
+
+ return (
+
+
+
+ Scenario / purpose
+
+
+
+ {scenario.scenario_name}
+
+
+
+
+
+
+ Default datasets
+
+
+
+
+
+ Default techniques
+
+
+ {defaultConcreteTechniques.length === 0
+ ? 'No default techniques'
+ : `${defaultConcreteTechniques.length} technique${defaultConcreteTechniques.length === 1 ? '' : 's'}`}
+
+
+
+
+ Default run size
+
+
+
+
+ )
+}
+
+export default function ScenarioCatalog() {
+ const styles = useScenarioCatalogStyles()
+ const [scenarios, setScenarios] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+ const [query, setQuery] = useState('')
+ const [refetchCount, setRefetchCount] = useState(0)
+
+ useEffect(() => {
+ let cancelled = false
+
+ fetchAllPages(
+ (cursor) => scenariosApi.listCatalog(CATALOG_PAGE_SIZE, cursor),
+ undefined,
+ (scenario) => scenario.scenario_name,
+ )
+ .then((items) => {
+ if (cancelled) return
+ setScenarios(items)
+ setError(null)
+ })
+ .catch((err: unknown) => {
+ if (cancelled) return
+ setScenarios([])
+ setError(toApiError(err).detail)
+ })
+ .finally(() => {
+ if (!cancelled) setLoading(false)
+ })
+
+ return () => {
+ cancelled = true
+ }
+ }, [refetchCount])
+
+ const handleRetry = useCallback(() => {
+ setLoading(true)
+ setError(null)
+ setRefetchCount((count) => count + 1)
+ }, [])
+
+ const filteredScenarios = useMemo(
+ () => scenarios.filter((scenario) => matchesSearch(scenario, query)),
+ [scenarios, query],
+ )
+
+ return (
+
+
+
+
+ Scanner
+
+
+ Browse registered scenarios and launch a run against a configured target.
+
+
+ A scenario packages objective datasets, technique sets or selected techniques, baseline policy,
+ and scenario-specific axes into a run plan.
+
+
+ Read the scanner documentation
+
+
+
+ }
+ placeholder="Search scenarios..."
+ value={query}
+ onChange={(_, data) => setQuery(data.value)}
+ aria-label="Search scenarios"
+ />
+ }
+ onClick={handleRetry}
+ disabled={loading}
+ >
+ Refresh
+
+
+
+
+
+ ) : error ? (
+
+
+ {error}
+
+ }
+ onClick={handleRetry}
+ data-testid="retry-btn"
+ >
+ Retry
+
+
+ ) : scenarios.length === 0 ? (
+
+ No scenarios are registered
+ Register a scenario via your PyRIT initializers to see it here.
+
+ ) : filteredScenarios.length === 0 ? (
+
+ No scenarios match "{query}"
+ Try a different search term.
+
+ ) : (
+
+
+
+
+
+ Scenario / purpose
+
+
+ Default datasets
+
+
+ Default techniques
+
+
+ Default run size
+
+
+
+
+ {filteredScenarios.map((scenario) => (
+
+ ))}
+
+
+
+
+
Back to scenarios
+
+
+ Scenario "{decodedScenarioName}" was not found
+ It may have been renamed or is no longer registered.
+
+
+
+
Back to scenarios
+
+
+
+ {scenarioError ?? targetsError}
+
+ }
+ onClick={handleRetry}
+ data-testid="retry-btn"
+ >
+ Retry
+
+
+
+
+
Back to scenarios
+
+
+
+
+ {scenario.scenario_name}
+
+
+
+
+
+
+
+
+
+
+
+ {!compact && {statusLabel(state)}}
+ {estimate && (
+
+ {formatPlannedAttackSummary(estimate)}
+
+ )}
+ {compact && !estimate && {statusLabel(state)}}
+
+ {!compact &&
{scopeLabel(state)}}
+
+ {estimate.components.map((component) => (
+ -
+
+
{component.label}
+
+ {component.isBaseline && (
+ Baseline
+ )}
+ {formatEstimateValue(component.count)}
+
+
+ ))}
+
+ )}
+
+ )
+}
+
+function EstimateDatasets({
+ estimate,
+ idPrefix,
+}: {
+ estimate: ScenarioRunEstimate
+ idPrefix: string
+}) {
+ const styles = useScenarioRunEstimateStyles()
+ const headingId = `${idPrefix}-datasets`
+
+ return (
+
+
+ Dataset populations
+
+ {estimate.datasets.length === 0 ? (
+
+ No dataset population details supplied by the backend.
+
+ ) : (
+
+ {estimate.datasets.map((dataset) => (
+
+
+ {dataset.name}
+ {dataset.kind}
+
+
+
+
- Logical seed groups
+ - {formatEstimateValue(dataset.logicalSeedGroupCount)}
+
+
+
- Selected seed groups
+ - {formatEstimateValue(dataset.selectedSeedGroupCount)}
+
+
+ {dataset.configuredCaps.length > 0 && (
+
+
Configured caps
+
+ {dataset.configuredCaps.map((cap) => (
+ -
+
+ {cap.label}: {formatEstimateValue(cap.count)}
+ {' '}({cap.configuredOn}{cap.datasetName ? `: ${cap.datasetName}` : ''})
+
+
+ ))}
+
+
+ ))}
+
+
+ {scopeLabel(state)}
+
+ )
+ }
+
+ if (state.status === 'unavailable') {
+ return (
+
+
+ {state.label}
+ {state.note && {state.note}}
+
+ )
+ }
+
+ const { estimate } = state
+ return (
+
+
+ {state.status === 'refreshing' && (
+
{state.label}
+ )}
+ {state.status === 'stale' && (
+
+ {state.label}
+ {state.error}
+
+ )}
+
+
+
+
+ Backend formula
+
+ {formatBackendFormula(estimate)}
+
+
+
+ Estimate notes
+
+
+ {estimate.note ?? 'No additional note supplied by the backend.'}
+
+
+
+
+
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}
+
+
+ )}
+