[AI Evaluation] Redesign the generated HTML report

[grafanaKibana]

Background and motivation

The HTML report we generate (via HtmlReportWriter, rendered by the React app under TypeScript/components) has picked up a lot of features over time: metric cards, chat history,
search, trending, tags, and the layout has gotten busier but not more convenient. Once you have a decent number of
scenarios and metrics it's harder than it should be to scan results and drill into a specific
metric or conveniently compare cases/runs/metrics.

I've got a mockup of a cleaner design (screenshots below) using FluentUI 2 design system, and wanted to agree on direction before
I sink time into implementation. The work is a visual refresh only — no data or API changes:

• Agree on the design direction (mockup attached).
• Rebuild the layout in the existing components, still reading the same Dataset /
  ScenarioRunResult / EvaluationMetric data via ReportContext.
• Keep what already works: scenario tree, run history, search, markdown, pass/fail bars,
  metric and diagnostics drill-downs.
• Keep the build/output identical: single self-contained file, the ##DATASETS## placeholder
  HtmlReportWriter relies on, and the existing CSP.
• Re-check accessibility against the new design ([AI Evaluation] Run accessibility checks on the HTML report #6215).
• Confirm the Azure DevOps report tab still renders correctly (same components).

Screenshots

Overview tab

Light	Dark

Cases tab

Light	Dark

History tab

Light	Dark

Comparison tab

Light	Dark

Standalone mockup to play with

AI Evaluation Report v3.1 (standalone).html

Risks

Mostly visual-regression risk in the shared components, the same React app drives both the
standalone report and the AzDevOps extension, so both need verifying. No API or data-shape
changes.

[peterwald]

@grafanaKibana , thanks for the contribution. I like what you've done with the updates and would like to get this into the product. The design direction looks good. I think the biggest additional thing we need to do is to ensure that the accessibility bar is met.

[grafanaKibana]

@peterwald Happy to hear! Will look into it asap

[grafanaKibana]

Hey @peterwald, just finished accessibility improvements and refactoring, and think PR is ready for review. Do I need to do something, or just wait for the reviewer?

[peterwald]

Thanks @grafanaKibana! I'll take a look shortly.