microsoft · Roman Lutz (romanlutz) · Aug 12, 2026
diff --git a/frontend/e2e/scenario-history.spec.ts b/frontend/e2e/scenario-history.spec.ts
diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
@@ -104,6 +104,9 @@ jest.mock("./components/Layout/MainLayout", () => {
         <button onClick={() => onNavigate("scenarios")} data-testid="nav-scenarios">
           Scenarios
         </button>
+        <button onClick={() => onNavigate("scenarioHistory")} data-testid="nav-scenario-history">
+          Scenario History
+        </button>
         {children}
       </div>
     );
@@ -348,6 +351,15 @@ jest.mock("./components/Scenarios/ScenarioRunPage", () => {
   };
 });
 
+jest.mock("./components/History/ScenarioHistory", () => {
+  const MockScenarioHistory = () => <div data-testid="scenario-history" />;
+  MockScenarioHistory.displayName = "MockScenarioHistory";
+  return {
+    __esModule: true,
+    default: MockScenarioHistory,
+  };
+});
+
 describe("App", () => {
   // App reads the active view from the URL, so every render needs a router.
   // initialPath lets a test deep-link straight to a view (e.g. "/config").
@@ -428,11 +440,21 @@ describe("App", () => {
 
     expect(screen.getByTestId("main-layout")).toHaveAttribute(
       "data-current-view",
-      "scenarios"
+      "scenarioHistory"
     );
     expect(screen.getByTestId("scenario-run-page")).toBeInTheDocument();
   });
 
+  it("renders scenario history as a distinct URL-backed view", () => {
+    renderApp("/scenario-history?operator=alice");
+
+    expect(screen.getByTestId("main-layout")).toHaveAttribute(
+      "data-current-view",
+      "scenarioHistory"
+    );
+    expect(screen.getByTestId("scenario-history")).toBeInTheDocument();
+  });
+
   it("switches to the scenarios view via the sidebar", () => {
     renderApp();
 
@@ -445,6 +467,18 @@ describe("App", () => {
     expect(screen.getByTestId("scenario-catalog")).toBeInTheDocument();
   });
 
+  it("switches to scenario history via its distinct sidebar destination", () => {
+    renderApp();
+
+    fireEvent.click(screen.getByTestId("nav-scenario-history"));
+
+    expect(screen.getByTestId("main-layout")).toHaveAttribute(
+      "data-current-view",
+      "scenarioHistory"
+    );
+    expect(screen.getByTestId("scenario-history")).toBeInTheDocument();
+  });
+
   it("passes the active target and labels to the scenario detail view", () => {
     renderApp("/scenarios/foundry.red_team_agent");
 

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -10,6 +10,7 @@ import Home from './components/Home/Home'
 import TargetConfig from './components/Config/TargetConfig'
 import Initializers from './components/Initializers/Initializers'
 import AttackHistory from './components/History/AttackHistory'
+import ScenarioHistory from './components/History/ScenarioHistory'
 import ScenarioCatalog from './components/Scenarios/ScenarioCatalog'
 import ScenarioDetail from './components/Scenarios/ScenarioDetail'
 import ScenarioRunPage from './components/Scenarios/ScenarioRunPage'
@@ -20,6 +21,11 @@ import { ErrorBoundary } from './components/ErrorBoundary'
 import { ConnectionHealthProvider, useConnectionHealth } from './hooks/useConnectionHealth'
 import { DEFAULT_GLOBAL_LABELS } from './components/Labels/labelDefaults'
 import { filtersFromSearchParams, filtersToSearchParams } from './components/History/historyFilters'
+import {
+  scenarioHistoryFiltersFromSearchParams,
+  scenarioHistoryFiltersToSearchParams,
+} from './components/History/scenarioHistoryFilters'
+import type { ScenarioHistoryFilters } from './components/History/scenarioHistoryFilters'
 import type { ViewName } from './components/Sidebar/Navigation'
 import type { TargetInstance, TargetInfo } from './types'
 import {
@@ -47,6 +53,7 @@ const VIEW_PATHS: Record<ViewName, string> = {
   config: '/config',
   initializers: '/initializers',
   scenarios: '/scenarios',
+  scenarioHistory: '/scenario-history',
 }
 
 /**
@@ -56,9 +63,12 @@ const VIEW_PATHS: Record<ViewName, string> = {
  * single canonical `VIEW_PATHS` entry.
  */
 function viewFromPath(pathname: string): ViewName {
-  if (pathname === VIEW_PATHS.scenarios || pathname.startsWith(`${VIEW_PATHS.scenarios}/`) || pathname.startsWith('/scenario-history/')) {
+  if (pathname === VIEW_PATHS.scenarios || pathname.startsWith(`${VIEW_PATHS.scenarios}/`)) {
     return 'scenarios'
   }
+  if (pathname === VIEW_PATHS.scenarioHistory || pathname.startsWith(`${VIEW_PATHS.scenarioHistory}/`)) {
+    return 'scenarioHistory'
+  }
   const match = (Object.entries(VIEW_PATHS) as [ViewName, string][]).find(
     ([, path]) => path === pathname,
   )
@@ -123,22 +133,34 @@ function App() {
   // the History nav button can restore filters after visiting another view.
   const [searchParams, setSearchParams] = useSearchParams()
   const historyFilters = useMemo(() => filtersFromSearchParams(searchParams), [searchParams])
+  const scenarioHistoryFilters = useMemo(
+    () => scenarioHistoryFiltersFromSearchParams(searchParams),
+    [searchParams],
+  )
   const scenarioResultId = useMemo(
     () => scenarioRunProvenance(searchParams),
     [searchParams],
   )
   const lastHistorySearch = useRef('')
+  const lastScenarioHistorySearch = useRef('')
   useEffect(() => {
     if (location.pathname === VIEW_PATHS.history) {
       lastHistorySearch.current = location.search
     }
+    if (location.pathname === VIEW_PATHS.scenarioHistory) {
+      lastScenarioHistorySearch.current = location.search
+    }
   }, [location.pathname, location.search])
 
   const handleFiltersChange = useCallback((filters: HistoryFilters) => {
     setSearchParams(filtersToSearchParams(filters), { replace: true })
   }, [setSearchParams])
 
-    /** App version display, attached to feedback context */
+  const handleScenarioHistoryFiltersChange = useCallback((filters: ScenarioHistoryFilters) => {
+    setSearchParams(scenarioHistoryFiltersToSearchParams(filters), { replace: true })
+  }, [setSearchParams])
+
+  /** App version display, attached to feedback context */
   const [appVersion, setAppVersion] = useState<string>('')
   /** Whether the feedback dialog is currently open */
   const [feedbackOpen, setFeedbackOpen] = useState(false)
@@ -293,6 +315,10 @@ function App() {
       navigate(VIEW_PATHS.history + lastHistorySearch.current)
       return
     }
+    if (view === 'scenarioHistory') {
+      navigate(VIEW_PATHS.scenarioHistory + lastScenarioHistorySearch.current)
+      return
+    }
     navigate(VIEW_PATHS[view])
   }, [navigate])
 
@@ -335,6 +361,15 @@ function App() {
     navigate(attackRoutePath(openAttackResultId))
   }, [navigate])
 
+  const handleOpenScenarioRun = useCallback((scenarioResultId: string) => {
+    navigate(`${VIEW_PATHS.scenarioHistory}/${encodeURIComponent(scenarioResultId)}`, {
+      state: {
+        fromScenarioHistory: true,
+        scenarioHistorySearch: location.search,
+      },
+    })
+  }, [location.search, navigate])
+
   const chatElement = isAttackNotFound || isAttackError ? (
     <AttackNotFound
       attackId={routeAttackId ?? ''}
@@ -429,6 +464,17 @@ function App() {
                   />
                 }
               />
+              <Route
+                path="/scenario-history"
+                element={
+                  <ScenarioHistory
+                    filters={scenarioHistoryFilters}
+                    onFiltersChange={handleScenarioHistoryFiltersChange}
+                    onOpenRun={handleOpenScenarioRun}
+                    onNavigate={handleNavigate}
+                  />
+                }
+              />
               <Route path="/scenario-history/:scenarioResultId" element={<ScenarioRunPage />} />
               <Route
                 path="/history"

diff --git a/frontend/src/components/History/ScenarioHistory.styles.ts b/frontend/src/components/History/ScenarioHistory.styles.ts
@@ -0,0 +1,120 @@
+import { makeStyles, tokens } from '@fluentui/react-components'
+
+import {
+  MINIMUM_TOUCH_TARGET_SIZE,
+  TOUCH_INPUT_QUERY,
+  mobileTouchTarget,
+  mobileTouchTargetHeight,
+} from '@/styles/touchTargets'
+
+export const useScenarioHistoryStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    overflow: 'hidden',
+    backgroundColor: tokens.colorNeutralBackground2,
+  },
+  header: {
+    padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalXXL}`,
+    borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+    backgroundColor: tokens.colorNeutralBackground3,
+  },
+  headerRow: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: tokens.spacingHorizontalM,
+  },
+  filters: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalS,
+    marginTop: tokens.spacingVerticalS,
+  },
+  filterDropdown: {
+    minWidth: '160px',
+    ...mobileTouchTargetHeight,
+    '& > input': {
+      [TOUCH_INPUT_QUERY]: {
+        minHeight: MINIMUM_TOUCH_TARGET_SIZE,
+      },
+    },
+  },
+  content: {
+    flex: 1,
+    overflow: 'auto',
+  },
+  table: {
+    minWidth: '1120px',
+  },
+  clickableRow: {
+    cursor: 'pointer',
+    minHeight: MINIMUM_TOUCH_TARGET_SIZE,
+    ':hover': {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+    },
+  },
+  rowLink: {
+    color: 'inherit',
+    display: 'inline-flex',
+    alignItems: 'center',
+    minHeight: MINIMUM_TOUCH_TARGET_SIZE,
+    textDecorationLine: 'none',
+    ':focus-visible': {
+      outline: `2px solid ${tokens.colorStrokeFocus2}`,
+      outlineOffset: '2px',
+    },
+  },
+  identity: {
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: '180px',
+  },
+  secondary: {
+    color: tokens.colorNeutralForeground3,
+  },
+  nowrap: {
+    whiteSpace: 'nowrap',
+  },
+  badges: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: tokens.spacingHorizontalXXS,
+    maxWidth: '240px',
+  },
+  target: {
+    display: 'flex',
+    flexDirection: 'column',
+    maxWidth: '220px',
+  },
+  truncate: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  emptyState: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: tokens.spacingVerticalM,
+    padding: tokens.spacingVerticalXXXL,
+  },
+  pagination: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalM,
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXXL}`,
+    borderTop: `1px solid ${tokens.colorNeutralStroke1}`,
+    backgroundColor: tokens.colorNeutralBackground3,
+  },
+  touchTarget: {
+    ...mobileTouchTarget,
+  },
+  touchTargetHeight: {
+    ...mobileTouchTargetHeight,
+  },
+})