From 6a057e28287bac4901695871aa674523ca60fcc8 Mon Sep 17 00:00:00 2001
From: uid11 <uid.11222@gmail.com>
Date: Wed, 1 Oct 2025 18:58:12 +0300
Subject: [PATCH 1/3] PRO-12619 feat: full update of HTML report layout

---
 autotests/packs/allTests.ts                   |  2 +-
 src/actions/asserts/assertUrlMatchRoute.ts    |  4 +-
 src/types/report.ts                           |  3 +-
 src/utils/parse/parseValueAsJsonIfNeeded.ts   | 12 +--
 .../{chooseTestRun.ts => chooseTestRun.tsx}   | 19 +++--
 src/utils/report/client/createJsxRuntime.ts   |  2 +-
 src/utils/report/client/index.ts              | 22 +++---
 src/utils/report/client/initialScript.ts      | 13 +---
 ...nderApiStatistics.ts => ApiStatistics.tsx} | 60 +++++++-------
 .../client/render/ApiStatisticsItem.tsx       |  7 +-
 ...nderDatesInterval.ts => DatesInterval.tsx} | 22 +++---
 .../{renderDuration.ts => Duration.tsx}       | 10 ++-
 .../MaybeApiStatistics.tsx}                   | 24 +++---
 .../client/render/{renderStep.ts => Step.tsx} | 51 ++++++------
 .../report/client/render/StepContent.tsx      | 65 ++++++++++++++++
 .../render/{renderSteps.ts => Steps.tsx}      | 14 ++--
 .../client/render/TestRunDescription.tsx      | 78 +++++++++++++++++++
 .../report/client/render/TestRunDetails.tsx   | 53 +++++++++++++
 ...renderTestRunError.ts => TestRunError.tsx} | 24 +++---
 src/utils/report/client/render/index.ts       | 22 +++---
 .../report/client/render/renderStepContent.ts | 62 ---------------
 .../client/render/renderTestRunDescription.ts | 71 -----------------
 .../client/render/renderTestRunDetails.ts     | 47 -----------
 src/utils/report/client/sanitizeHtml.ts       |  2 +-
 src/utils/report/render/RetryHeader.tsx       | 31 ++++++++
 src/utils/report/render/Warnings.tsx          |  4 +-
 src/utils/report/render/locator.ts            |  2 +-
 .../{client => }/render/renderAttributes.ts   |  4 +-
 src/utils/report/render/renderRetry.ts        |  4 +-
 src/utils/report/render/renderRetryHeader.ts  | 24 ------
 .../report/render/renderTestRunButton.ts      |  4 +-
 src/utils/test/preparePage.ts                 |  4 +-
 styles/report.css                             |  2 +-
 33 files changed, 402 insertions(+), 366 deletions(-)
 rename src/utils/report/client/{chooseTestRun.ts => chooseTestRun.tsx} (81%)
 rename src/utils/report/client/render/{renderApiStatistics.ts => ApiStatistics.tsx} (63%)
 rename src/utils/report/client/render/{renderDatesInterval.ts => DatesInterval.tsx} (57%)
 rename src/utils/report/client/render/{renderDuration.ts => Duration.tsx} (81%)
 rename src/utils/report/client/{maybeRenderApiStatistics.ts => render/MaybeApiStatistics.tsx} (68%)
 rename src/utils/report/client/render/{renderStep.ts => Step.tsx} (53%)
 create mode 100644 src/utils/report/client/render/StepContent.tsx
 rename src/utils/report/client/render/{renderSteps.ts => Steps.tsx} (78%)
 create mode 100644 src/utils/report/client/render/TestRunDescription.tsx
 create mode 100644 src/utils/report/client/render/TestRunDetails.tsx
 rename src/utils/report/client/render/{renderTestRunError.ts => TestRunError.tsx} (55%)
 delete mode 100644 src/utils/report/client/render/renderStepContent.ts
 delete mode 100644 src/utils/report/client/render/renderTestRunDescription.ts
 delete mode 100644 src/utils/report/client/render/renderTestRunDetails.ts
 create mode 100644 src/utils/report/render/RetryHeader.tsx
 rename src/utils/report/{client => }/render/renderAttributes.ts (86%)
 delete mode 100644 src/utils/report/render/renderRetryHeader.ts

diff --git a/autotests/packs/allTests.ts b/autotests/packs/allTests.ts
index 2350c0e3..69d88c5f 100644
--- a/autotests/packs/allTests.ts
+++ b/autotests/packs/allTests.ts
@@ -80,7 +80,7 @@ export const pack: Pack = {
   skipTests,
   takeFullPageScreenshotOnError: false,
   takeViewportScreenshotOnError: true,
-  testFileGlobs: ['**/autotests/tests/**/*.ts'],
+  testFileGlobs: ['**/autotests/tests/**/exists.ts'],
   testIdleTimeout: 8_000,
   testTimeout: 15_000,
   userAgent,
diff --git a/src/actions/asserts/assertUrlMatchRoute.ts b/src/actions/asserts/assertUrlMatchRoute.ts
index fb51c630..b7065f18 100644
--- a/src/actions/asserts/assertUrlMatchRoute.ts
+++ b/src/actions/asserts/assertUrlMatchRoute.ts
@@ -4,7 +4,7 @@ import {assertValueIsDefined, assertValueIsNotNull} from '../../utils/asserts';
 import {log} from '../../utils/log';
 
 import type {Route} from '../../Route';
-import type {Url} from '../../types/internal';
+import type {MaybePromise, Url} from '../../types/internal';
 
 type MaybeUrlOrPath = Url | string | null | undefined;
 
@@ -12,7 +12,7 @@ type MaybeUrlOrPath = Url | string | null | undefined;
  * Asserts that url or url path (which can be wrapped in a promise) match route.
  */
 export const assertUrlMatchRoute = async (
-  maybeUrlOrPath: MaybeUrlOrPath | Promise<MaybeUrlOrPath>,
+  maybeUrlOrPath: MaybePromise<MaybeUrlOrPath>,
   route: Route<unknown>,
 ): Promise<void> => {
   const {routeParams} = route;
diff --git a/src/types/report.ts b/src/types/report.ts
index 40426edd..a87d4ab4 100644
--- a/src/types/report.ts
+++ b/src/types/report.ts
@@ -5,7 +5,6 @@ import type {EndE2edReason, ExitCode, TestRunStatus} from '../constants/internal
 import type {ApiStatistics} from './apiStatistics';
 import type {FullPackConfig} from './config';
 import type {UtcTimeInMs} from './date';
-import type {SafeHtml} from './html';
 import type {TestFilePath} from './paths';
 import type {StartInfo} from './startInfo';
 import type {FullTestRun, LiteTestRun, RunHash, RunId} from './testRun';
@@ -99,7 +98,7 @@ export type ReportClientState = {
   readonly fullTestRuns: readonly FullTestRun[];
   readonly internalDirectoryName: string;
   lengthOfReadedJsonReportDataParts: number;
-  readonly locator: LocatorFunction<SafeHtml>;
+  readonly locator: LocatorFunction;
   readonly pathToScreenshotsDirectoryForReport: string | null;
   readonly readJsonReportDataObservers: MutationObserver[];
   reportClientData?: ReportClientData;
diff --git a/src/utils/parse/parseValueAsJsonIfNeeded.ts b/src/utils/parse/parseValueAsJsonIfNeeded.ts
index 2979f0b9..54cb8b75 100644
--- a/src/utils/parse/parseValueAsJsonIfNeeded.ts
+++ b/src/utils/parse/parseValueAsJsonIfNeeded.ts
@@ -4,24 +4,24 @@ type Return = Readonly<{hasParseError: boolean; value: unknown}>;
 
 /**
  * Parses `unknown` value as JSON, if needed.
- * If `isoValueInJsonFormat` is `true`, then parses value as JSON and saves parse error.
- * If `isoValueInJsonFormat` is `false`, then returns value as is.
- * If `isoValueInJsonFormat` is `undefined`, then safely tries to parse value as JSON.
+ * If `isValueInJsonFormat` is `true`, then parses value as JSON and saves parse error.
+ * If `isValueInJsonFormat` is `false`, then returns value as is.
+ * If `isValueInJsonFormat` is `undefined`, then safely tries to parse value as JSON.
  */
 export const parseValueAsJsonIfNeeded = (
   originalValue: unknown,
-  isoValueInJsonFormat?: boolean,
+  isValueInJsonFormat?: boolean,
 ): Return => {
   let hasParseError = false;
   let value = originalValue;
 
-  if (isoValueInJsonFormat === true) {
+  if (isValueInJsonFormat === true) {
     try {
       value = parseMaybeEmptyValueAsJson(originalValue);
     } catch {
       hasParseError = true;
     }
-  } else if (isoValueInJsonFormat !== false) {
+  } else if (isValueInJsonFormat !== false) {
     try {
       value = parseMaybeEmptyValueAsJson(originalValue);
     } catch {}
diff --git a/src/utils/report/client/chooseTestRun.ts b/src/utils/report/client/chooseTestRun.tsx
similarity index 81%
rename from src/utils/report/client/chooseTestRun.ts
rename to src/utils/report/client/chooseTestRun.tsx
index c1af5cfc..6c7a01b9 100644
--- a/src/utils/report/client/chooseTestRun.ts
+++ b/src/utils/report/client/chooseTestRun.tsx
@@ -1,13 +1,16 @@
 import {assertValueIsDefined as clientAssertValueIsDefined} from './assertValueIsDefined';
-import {maybeRenderApiStatistics as clientMaybeRenderApiStatistics} from './maybeRenderApiStatistics';
-import {renderTestRunDetails as clientRenderTestRunDetails} from './render';
+import {
+  MaybeApiStatistics as clientMaybeApiStatistics,
+  TestRunDetails as clientTestRunDetails,
+} from './render';
 
-import type {ReportClientState, RunHash, SafeHtml} from '../../../types/internal';
+import type {ReportClientState, RunHash} from '../../../types/internal';
 
 const assertValueIsDefined: typeof clientAssertValueIsDefined = clientAssertValueIsDefined;
-const maybeRenderApiStatistics = clientMaybeRenderApiStatistics;
-const renderTestRunDetails = clientRenderTestRunDetails;
+const MaybeApiStatistics = clientMaybeApiStatistics;
+const TestRunDetails = clientTestRunDetails;
 
+declare const jsx: JSX.Runtime;
 declare const reportClientState: ReportClientState;
 
 /**
@@ -62,9 +65,9 @@ export function chooseTestRun(runHash: RunHash): void {
     return;
   }
 
-  let rightColumnHtml: SafeHtml | undefined = maybeRenderApiStatistics(runHash);
+  let rightColumnHtml = <MaybeApiStatistics runHash={runHash} />;
 
-  if (rightColumnHtml === undefined) {
+  if (rightColumnHtml.length === 0) {
     const {fullTestRuns} = reportClientState;
     const fullTestRun = fullTestRuns.find((testRun) => testRun.runHash === runHash);
 
@@ -77,7 +80,7 @@ export function chooseTestRun(runHash: RunHash): void {
       return;
     }
 
-    rightColumnHtml = renderTestRunDetails(fullTestRun);
+    rightColumnHtml = <TestRunDetails fullTestRun={fullTestRun} />;
   }
 
   e2edRightColumnContainer.innerHTML = String(rightColumnHtml);
diff --git a/src/utils/report/client/createJsxRuntime.ts b/src/utils/report/client/createJsxRuntime.ts
index a6fc045b..deb8519f 100644
--- a/src/utils/report/client/createJsxRuntime.ts
+++ b/src/utils/report/client/createJsxRuntime.ts
@@ -38,7 +38,7 @@ export function createJsxRuntime(): JSX.Runtime {
     }
 
     const attributesParts: readonly SafeHtml[] = Object.entries(properties).map(
-      ([key, value]) => sanitizeHtml`${key}="${value}"`,
+      ([key, value]) => sanitizeHtml`${key.toLowerCase()}="${value}"`,
     );
     const attributesHtml = createSafeHtmlWithoutSanitize`${attributesParts.join('')}`;
 
diff --git a/src/utils/report/client/index.ts b/src/utils/report/client/index.ts
index 1d5fdaf0..4bf2dbcb 100644
--- a/src/utils/report/client/index.ts
+++ b/src/utils/report/client/index.ts
@@ -17,8 +17,6 @@ export {createJsxRuntime} from './createJsxRuntime';
 /** @internal */
 export {initialScript} from './initialScript';
 /** @internal */
-export {maybeRenderApiStatistics} from './maybeRenderApiStatistics';
-/** @internal */
 export {onDomContentLoad} from './onDomContentLoad';
 /** @internal */
 export {onFirstJsonReportDataLoad} from './onFirstJsonReportDataLoad';
@@ -30,17 +28,17 @@ export {readJsonReportData} from './readJsonReportData';
 export {readPartOfJsonReportData} from './readPartOfJsonReportData';
 /** @internal */
 export {
+  ApiStatistics,
   ApiStatisticsItem,
-  renderApiStatistics,
-  renderAttributes,
-  renderDatesInterval,
-  renderDuration,
-  renderStep,
-  renderStepContent,
-  renderSteps,
-  renderTestRunDescription,
-  renderTestRunDetails,
-  renderTestRunError,
+  DatesInterval,
+  Duration,
+  MaybeApiStatistics,
+  Step,
+  StepContent,
+  Steps,
+  TestRunDescription,
+  TestRunDetails,
+  TestRunError,
 } from './render';
 /** @internal */
 export {
diff --git a/src/utils/report/client/initialScript.ts b/src/utils/report/client/initialScript.ts
index 63a47cab..cea5354f 100644
--- a/src/utils/report/client/initialScript.ts
+++ b/src/utils/report/client/initialScript.ts
@@ -1,7 +1,4 @@
-import {
-  createSimpleLocator as clientCreateSimpleLocator,
-  type LocatorFunction,
-} from 'create-locator';
+import {createSimpleLocator as clientCreateSimpleLocator} from 'create-locator';
 
 import {addDomContentLoadedHandler as clientAddDomContentLoadedHandler} from './addDomContentLoadedHandler';
 import {addOnClickOnClass as clientAddOnClickOnClass} from './addOnClickOnClass';
@@ -10,10 +7,9 @@ import {clickOnStep as clientClickOnStep} from './clickOnStep';
 import {clickOnTestRun as clientClickOnTestRun} from './clickOnTestRun';
 import {createJsxRuntime as clientCreateJsxRuntime} from './createJsxRuntime';
 import {onDomContentLoad as clientOnDomContentLoad} from './onDomContentLoad';
-import {renderAttributes as clientRenderAttributes} from './render';
 import {setReadJsonReportDataObservers as clientSetReadJsonReportDataObservers} from './setReadJsonReportDataObservers';
 
-import type {ReportClientState, SafeHtml} from '../../../types/internal';
+import type {ReportClientState} from '../../../types/internal';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 declare let jsx: JSX.Runtime;
@@ -27,7 +23,6 @@ const clickOnTestRun = clientClickOnTestRun;
 const createJsxRuntime = clientCreateJsxRuntime;
 const createSimpleLocator = clientCreateSimpleLocator;
 const onDomContentLoad = clientOnDomContentLoad;
-const renderAttributes = clientRenderAttributes;
 const setReadJsonReportDataObservers = clientSetReadJsonReportDataObservers;
 
 /**
@@ -38,9 +33,7 @@ const setReadJsonReportDataObservers = clientSetReadJsonReportDataObservers;
 export function initialScript(): void {
   jsx = createJsxRuntime();
 
-  const {locator: locatorAttributes} = createSimpleLocator(reportClientState.createLocatorOptions);
-  const locator: LocatorFunction<SafeHtml> = (...args) =>
-    renderAttributes(locatorAttributes(...(args as [string])));
+  const {locator} = createSimpleLocator(reportClientState.createLocatorOptions);
 
   Object.assign<ReportClientState, Partial<ReportClientState>>(reportClientState, {locator});
 
diff --git a/src/utils/report/client/render/renderApiStatistics.ts b/src/utils/report/client/render/ApiStatistics.tsx
similarity index 63%
rename from src/utils/report/client/render/renderApiStatistics.ts
rename to src/utils/report/client/render/ApiStatistics.tsx
index d354f81f..ea7c61ae 100644
--- a/src/utils/report/client/render/renderApiStatistics.ts
+++ b/src/utils/report/client/render/ApiStatistics.tsx
@@ -3,7 +3,7 @@ import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} fr
 import {ApiStatisticsItem as clientApiStatisticsItem} from './ApiStatisticsItem';
 
 import type {
-  ApiStatistics,
+  ApiStatistics as ApiStatisticsType,
   ApiStatisticsReportHash,
   ObjectEntries,
   SafeHtml,
@@ -12,8 +12,10 @@ import type {
 const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
 const ApiStatisticsItem = clientApiStatisticsItem;
 
-type Options = Readonly<{
-  apiStatistics: ApiStatistics;
+declare const jsx: JSX.Runtime;
+
+type Props = Readonly<{
+  apiStatistics: ApiStatisticsType;
   hash: ApiStatisticsReportHash;
 }>;
 
@@ -22,7 +24,7 @@ type Options = Readonly<{
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function renderApiStatistics({apiStatistics, hash}: Options): SafeHtml {
+export const ApiStatistics: JSX.Component<Props> = ({apiStatistics, hash}) => {
   let header: string | undefined;
   const items: SafeHtml[] = [];
 
@@ -38,11 +40,13 @@ export function renderApiStatistics({apiStatistics, hash}: Options): SafeHtml {
         pageCount += count;
         pageDuration += duration;
 
-        pageItems.push(ApiStatisticsItem({count, duration, name: url, url}));
+        pageItems.push(
+          <ApiStatisticsItem count={count} duration={duration} name={url} url={url} />,
+        );
       }
 
       items.push(
-        ApiStatisticsItem({count: pageCount, duration: pageDuration, isHeader: true, name}),
+        <ApiStatisticsItem count={pageCount} duration={pageDuration} isHeader={true} name={name} />,
       );
       items.push(...pageItems);
     }
@@ -54,12 +58,12 @@ export function renderApiStatistics({apiStatistics, hash}: Options): SafeHtml {
         // eslint-disable-next-line max-depth
         for (const [statusCode, {count, duration, size}] of Object.entries(byStatusCode)) {
           items.push(
-            ApiStatisticsItem({
-              count,
-              duration,
-              name: `${method} ${url} ${statusCode}`,
-              size,
-            }),
+            <ApiStatisticsItem
+              count={count}
+              duration={duration}
+              name={`${method} ${url} ${statusCode}`}
+              size={size}
+            />,
           );
         }
       }
@@ -72,23 +76,25 @@ export function renderApiStatistics({apiStatistics, hash}: Options): SafeHtml {
     >) {
       for (const [statusCode, {count, duration, size}] of Object.entries(byStatusCode)) {
         items.push(
-          ApiStatisticsItem({
-            count,
-            duration,
-            name: `${url} ${statusCode}`,
-            size,
-            url,
-          }),
+          <ApiStatisticsItem
+            count={count}
+            duration={duration}
+            name={`${url} ${statusCode}`}
+            size={size}
+            url={url}
+          />,
         );
       }
     }
   }
 
-  return createSafeHtmlWithoutSanitize`<article class="test-details">
-  <p class="test-details__path"></p>
-  <h2 class="test-details__title">${header}</h2>
-  <div role="tabpanel">
-    <article class="overview">${items.join('')}</article>
-  </div>
-</article>`;
-}
+  return (
+    <article class="test-details">
+      <p class="test-details__path"></p>
+      <h2 class="test-details__title">{header}</h2>
+      <div role="tabpanel">
+        <article class="overview">{createSafeHtmlWithoutSanitize`${items.join('')}`}</article>
+      </div>
+    </article>
+  );
+};
diff --git a/src/utils/report/client/render/ApiStatisticsItem.tsx b/src/utils/report/client/render/ApiStatisticsItem.tsx
index f451a93b..8cbbecf5 100644
--- a/src/utils/report/client/render/ApiStatisticsItem.tsx
+++ b/src/utils/report/client/render/ApiStatisticsItem.tsx
@@ -1,8 +1,8 @@
-import {renderDuration as clientRenderDuration} from './renderDuration';
+import {Duration as clientDuration} from './Duration';
 
 import type {SafeHtml, Url} from '../../../../types/internal';
 
-const renderDuration = clientRenderDuration;
+const Duration = clientDuration;
 
 declare const jsx: JSX.Runtime;
 
@@ -29,7 +29,6 @@ export const ApiStatisticsItem: JSX.Component<Props> = ({
   url,
 }) => {
   const bytesInKiB = 1_024;
-  const durationHtml = renderDuration(duration / count);
   const countHtml = `${count}x`;
   const sizeHtml = size === undefined ? '' : `${(size / count / bytesInKiB).toFixed(2)} KiB / `;
 
@@ -52,7 +51,7 @@ export const ApiStatisticsItem: JSX.Component<Props> = ({
       <span class="step-expanded__name">{nameHtml}</span>
       <span class="step-expanded__time">
         {countHtml} / {sizeHtml}
-        {durationHtml}
+        <Duration durationInMs={duration / count} />
       </span>
     </span>
   );
diff --git a/src/utils/report/client/render/renderDatesInterval.ts b/src/utils/report/client/render/DatesInterval.tsx
similarity index 57%
rename from src/utils/report/client/render/renderDatesInterval.ts
rename to src/utils/report/client/render/DatesInterval.tsx
index 24cf22c3..b4a47950 100644
--- a/src/utils/report/client/render/renderDatesInterval.ts
+++ b/src/utils/report/client/render/DatesInterval.tsx
@@ -1,22 +1,20 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 
-import {sanitizeHtml as clientSanitizeHtml} from '../sanitizeHtml';
+import type {UtcTimeInMs} from '../../../../types/internal';
 
-import type {SafeHtml, UtcTimeInMs} from '../../../../types/internal';
-
-type Options = Readonly<{
+type Props = Readonly<{
   endTimeInMs: UtcTimeInMs;
   startTimeInMs: UtcTimeInMs;
 }>;
 
-const sanitizeHtml = clientSanitizeHtml;
+declare const jsx: JSX.Runtime;
 
 /**
  * Renders the interval between two dates.
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function renderDatesInterval({endTimeInMs, startTimeInMs}: Options): SafeHtml {
+export const DatesInterval: JSX.Component<Props> = ({endTimeInMs, startTimeInMs}) => {
   const startDate = new Date(startTimeInMs);
   const endDate = new Date(endTimeInMs);
 
@@ -28,6 +26,12 @@ export function renderDatesInterval({endTimeInMs, startTimeInMs}: Options): Safe
   const startTime = startDateTime.slice(11, 19);
   const endTime = endDateTime.slice(11, 19);
 
-  return sanitizeHtml`<time datetime="${startDateTime}">${date} ${startTime}</time> –
-<time datetime="${endDateTime}">${endTime}</time> UTC`;
-}
+  return (
+    <>
+      <time dateTime={startDateTime}>
+        {date} {startTime}
+      </time>{' '}
+      – <time dateTime={endDateTime}>{endTime}</time> UTC
+    </>
+  );
+};
diff --git a/src/utils/report/client/render/renderDuration.ts b/src/utils/report/client/render/Duration.tsx
similarity index 81%
rename from src/utils/report/client/render/renderDuration.ts
rename to src/utils/report/client/render/Duration.tsx
index e04b5964..836d3547 100644
--- a/src/utils/report/client/render/renderDuration.ts
+++ b/src/utils/report/client/render/Duration.tsx
@@ -2,18 +2,20 @@ import {getDurationWithUnits as clientGetDurationWithUnits} from '../../../getDu
 
 import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} from '../sanitizeHtml';
 
-import type {SafeHtml} from '../../../../types/internal';
-
 const getDurationWithUnits = clientGetDurationWithUnits;
 const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
 
+declare const jsx: JSX.Runtime;
+
+type Props = Readonly<{durationInMs: number}>;
+
 /**
  * Renders the duration of time interval in hours, minutes, seconds and milliseconds.
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function renderDuration(durationInMs: number): SafeHtml {
+export const Duration: JSX.Component<Props> = ({durationInMs}) => {
   const durationWithUnits = getDurationWithUnits(durationInMs);
 
   return createSafeHtmlWithoutSanitize`${durationWithUnits}`;
-}
+};
diff --git a/src/utils/report/client/maybeRenderApiStatistics.ts b/src/utils/report/client/render/MaybeApiStatistics.tsx
similarity index 68%
rename from src/utils/report/client/maybeRenderApiStatistics.ts
rename to src/utils/report/client/render/MaybeApiStatistics.tsx
index bad9d9f1..e297b706 100644
--- a/src/utils/report/client/maybeRenderApiStatistics.ts
+++ b/src/utils/report/client/render/MaybeApiStatistics.tsx
@@ -1,23 +1,21 @@
-import {renderApiStatistics as clientRenderApiStatistics} from './render';
+import {ApiStatistics as clientApiStatistics} from './ApiStatistics';
 
-import type {
-  ApiStatisticsReportHash,
-  ReportClientState,
-  RunHash,
-  SafeHtml,
-} from '../../../types/internal';
+import type {ApiStatisticsReportHash, ReportClientState, RunHash} from '../../../../types/internal';
 
-const renderApiStatistics = clientRenderApiStatistics;
+const ApiStatistics = clientApiStatistics;
 
+declare const jsx: JSX.Runtime;
 declare const reportClientState: ReportClientState;
 
+type Props = Readonly<{runHash: RunHash}>;
+
 /**
  * Renders `ApiStatistics` by `runHash`, if this is a one of kind of `ApiStatistics` hash
  * (pages, requests or resources).
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function maybeRenderApiStatistics(runHash: RunHash): SafeHtml | undefined {
+export const MaybeApiStatistics: JSX.Component<Props> = ({runHash}) => {
   const hash = String(runHash);
 
   const pagesHash: ApiStatisticsReportHash = 'api-statistics-pages';
@@ -25,7 +23,7 @@ export function maybeRenderApiStatistics(runHash: RunHash): SafeHtml | undefined
   const resourcesHash: ApiStatisticsReportHash = 'api-statistics-resources';
 
   if (hash !== pagesHash && hash !== requestsHash && hash !== resourcesHash) {
-    return;
+    return <></>;
   }
 
   const {reportClientData} = reportClientState;
@@ -36,10 +34,10 @@ export function maybeRenderApiStatistics(runHash: RunHash): SafeHtml | undefined
       `Cannot find report client data in JSON report data (tried to click "${hash}"). Probably JSON report data not yet completely loaded. Please try click again later`,
     );
 
-    return;
+    return <></>;
   }
 
   const {apiStatistics} = reportClientData;
 
-  return renderApiStatistics({apiStatistics, hash});
-}
+  return <ApiStatistics apiStatistics={apiStatistics} hash={hash} />;
+};
diff --git a/src/utils/report/client/render/renderStep.ts b/src/utils/report/client/render/Step.tsx
similarity index 53%
rename from src/utils/report/client/render/renderStep.ts
rename to src/utils/report/client/render/Step.tsx
index 869b9975..d3e43606 100644
--- a/src/utils/report/client/render/renderStep.ts
+++ b/src/utils/report/client/render/Step.tsx
@@ -1,19 +1,17 @@
 import {LogEventStatus, LogEventType} from '../../../../constants/internal';
 
-import {sanitizeHtml as clientSanitizeHtml} from '../sanitizeHtml';
+import {Duration as clientDuration} from './Duration';
+import {StepContent as clientStepContent} from './StepContent';
 
-import {renderDuration as clientRenderDuration} from './renderDuration';
-import {renderStepContent as clientRenderStepContent} from './renderStepContent';
+import type {LogEvent, ReportClientState, UtcTimeInMs} from '../../../../types/internal';
 
-import type {LogEvent, ReportClientState, SafeHtml, UtcTimeInMs} from '../../../../types/internal';
-
-const renderDuration = clientRenderDuration;
-const renderStepContent = clientRenderStepContent;
-const sanitizeHtml = clientSanitizeHtml;
+const Duration = clientDuration;
+const StepContent = clientStepContent;
 
+declare const jsx: JSX.Runtime;
 declare const reportClientState: ReportClientState;
 
-type Options = Readonly<{
+type Props = Readonly<{
   logEvent: LogEvent;
   nextLogEventTime: UtcTimeInMs;
 }>;
@@ -23,9 +21,8 @@ type Options = Readonly<{
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function renderStep({logEvent, nextLogEventTime}: Options): SafeHtml {
+export const Step: JSX.Component<Props> = ({logEvent, nextLogEventTime}) => {
   const {message, payload, time, type} = logEvent;
-  const durationInMs = nextLogEventTime - time;
   const isPayloadEmpty = !payload || Object.keys(payload).length === 0;
   const status = payload?.logEventStatus ?? LogEventStatus.Passed;
 
@@ -42,19 +39,25 @@ export function renderStep({logEvent, nextLogEventTime}: Options): SafeHtml {
     }
   }
 
-  const content = renderStepContent({
-    pathToScreenshotOfPage,
-    payload: isPayloadEmpty ? undefined : payload,
-    type,
-  });
   const maybeEmptyClass = isPayloadEmpty ? 'step-expanded_is-empty' : '';
   const isErrorScreenshot = pathToScreenshotOfPage !== undefined;
 
-  return sanitizeHtml`
-<button aria-expanded="${isErrorScreenshot}" class="step-expanded step-expanded_status_${status} ${maybeEmptyClass}">
-  <span class="step-expanded__name">${message}</span>
-  <span class="step-expanded__time">${renderDuration(durationInMs)}</span>
-</button>
-${content}
-`;
-}
+  return (
+    <>
+      <button
+        aria-expanded={isErrorScreenshot}
+        class={`step-expanded step-expanded_status_${status} ${maybeEmptyClass}`}
+      >
+        <span class="step-expanded__name">{message}</span>
+        <span class="step-expanded__time">
+          <Duration durationInMs={nextLogEventTime - time} />
+        </span>
+      </button>
+      <StepContent
+        pathToScreenshotOfPage={pathToScreenshotOfPage}
+        payload={isPayloadEmpty ? undefined : payload}
+        type={type}
+      />
+    </>
+  );
+};
diff --git a/src/utils/report/client/render/StepContent.tsx b/src/utils/report/client/render/StepContent.tsx
new file mode 100644
index 00000000..ac6bb2b7
--- /dev/null
+++ b/src/utils/report/client/render/StepContent.tsx
@@ -0,0 +1,65 @@
+import {LogEventType} from '../../../../constants/internal';
+
+import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} from '../sanitizeHtml';
+
+import type {LogPayload, SafeHtml} from '../../../../types/internal';
+
+const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
+
+declare const jsx: JSX.Runtime;
+
+type Props = Readonly<{
+  pathToScreenshotOfPage: string | undefined;
+  payload: LogPayload | undefined;
+  type: LogEventType;
+}>;
+
+/**
+ * Renders content of single step of test run.
+ * This base client function should not use scope variables (except other base functions).
+ * @internal
+ */
+export const StepContent: JSX.Component<Props> = ({pathToScreenshotOfPage, payload, type}) => {
+  if (payload === undefined) {
+    return <></>;
+  }
+
+  const payloadString = JSON.stringify(payload, null, 2);
+  const code = <code>{payloadString}</code>;
+  const images: SafeHtml[] = [];
+
+  if (pathToScreenshotOfPage !== undefined) {
+    images.push(
+      <img src={pathToScreenshotOfPage} alt="Screenshot of page" title="Screenshot of page" />,
+    );
+  }
+
+  if (type === LogEventType.InternalAssert) {
+    const {actualScreenshotUrl, diffScreenshotUrl, expectedScreenshotUrl} = payload;
+
+    if (typeof actualScreenshotUrl === 'string') {
+      images.push(<img src={actualScreenshotUrl} alt="Actual" title="Actual" />);
+    }
+
+    if (typeof diffScreenshotUrl === 'string') {
+      images.push(<img src={diffScreenshotUrl} alt="Diff" title="Diff" />);
+    }
+
+    if (typeof expectedScreenshotUrl === 'string') {
+      images.push(<img src={expectedScreenshotUrl} alt="Expected" title="Expected" />);
+    }
+  }
+
+  const imagesHtml = createSafeHtmlWithoutSanitize`${images.join('')}`;
+
+  if (images.length > 0) {
+    return (
+      <div class="step-expanded-panel step__panel">
+        <pre>{code}</pre>
+        {imagesHtml}
+      </div>
+    );
+  }
+
+  return <pre class="step-expanded-panel step__panel">{code}</pre>;
+};
diff --git a/src/utils/report/client/render/renderSteps.ts b/src/utils/report/client/render/Steps.tsx
similarity index 78%
rename from src/utils/report/client/render/renderSteps.ts
rename to src/utils/report/client/render/Steps.tsx
index 2efe2909..896f5164 100644
--- a/src/utils/report/client/render/renderSteps.ts
+++ b/src/utils/report/client/render/Steps.tsx
@@ -1,15 +1,17 @@
 import {assertValueIsDefined as clientAssertValueIsDefined} from '../assertValueIsDefined';
 import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} from '../sanitizeHtml';
 
-import {renderStep as clientRenderStep} from './renderStep';
+import {Step as clientStep} from './Step';
 
 import type {LogEvent, SafeHtml, UtcTimeInMs} from '../../../../types/internal';
 
 const assertValueIsDefined: typeof clientAssertValueIsDefined = clientAssertValueIsDefined;
 const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
-const renderStep = clientRenderStep;
+const Step = clientStep;
 
-type Options = Readonly<{
+declare const jsx: JSX.Runtime;
+
+type Props = Readonly<{
   endTimeInMs: UtcTimeInMs;
   logEvents: readonly LogEvent[];
 }>;
@@ -19,7 +21,7 @@ type Options = Readonly<{
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function renderSteps({endTimeInMs, logEvents}: Options): SafeHtml {
+export const Steps: JSX.Component<Props> = ({endTimeInMs, logEvents}) => {
   const stepHtmls: SafeHtml[] = [];
 
   for (let index = 0; index < logEvents.length; index += 1) {
@@ -29,10 +31,10 @@ export function renderSteps({endTimeInMs, logEvents}: Options): SafeHtml {
 
     const nextLogEvent = logEvents[index + 1];
     const nextLogEventTime = nextLogEvent?.time ?? endTimeInMs;
-    const stepHtml = renderStep({logEvent, nextLogEventTime});
+    const stepHtml = <Step logEvent={logEvent} nextLogEventTime={nextLogEventTime} />;
 
     stepHtmls.push(stepHtml);
   }
 
   return createSafeHtmlWithoutSanitize`${stepHtmls.join('')}`;
-}
+};
diff --git a/src/utils/report/client/render/TestRunDescription.tsx b/src/utils/report/client/render/TestRunDescription.tsx
new file mode 100644
index 00000000..af31ea38
--- /dev/null
+++ b/src/utils/report/client/render/TestRunDescription.tsx
@@ -0,0 +1,78 @@
+import {parseMarkdownLinks as clientParseMarkdownLinks} from '../parseMarkdownLinks';
+import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} from '../sanitizeHtml';
+
+import {DatesInterval as clientDatesInterval} from './DatesInterval';
+import {Duration as clientDuration} from './Duration';
+
+import type {FullTestRun, ReportClientState, SafeHtml} from '../../../../types/internal';
+
+const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
+const parseMarkdownLinks = clientParseMarkdownLinks;
+const DatesInterval = clientDatesInterval;
+const Duration = clientDuration;
+
+declare const jsx: JSX.Runtime;
+declare const reportClientState: ReportClientState;
+
+type Props = Readonly<{fullTestRun: FullTestRun}>;
+
+/**
+ * Renders tag `<dl class="test-description">` with test run description.
+ * The value strings of meta can contain links in markdown format.
+ * This base client function should not use scope variables (except other base functions).
+ * @internal
+ */
+export const TestRunDescription: JSX.Component<Props> = ({fullTestRun}) => {
+  const {endTimeInMs, outputDirectoryName, runError, startTimeInMs} = fullTestRun;
+  const {meta} = fullTestRun.options;
+  const metaHtmls: SafeHtml[] = [];
+
+  for (const [key, value] of Object.entries(meta)) {
+    const valueWithLinks = parseMarkdownLinks`${value}`;
+    const metaHtml = (
+      <>
+        <dt class="test-description__term">{key}</dt>
+        <dd class="test-description__definition">{valueWithLinks}</dd>
+      </>
+    );
+
+    metaHtmls.push(metaHtml);
+  }
+
+  let traceHtml = <></>;
+
+  if (runError !== undefined) {
+    const {internalDirectoryName} = reportClientState;
+    const traceLabel = 'Download trace';
+    const traceName = 'trace.zip';
+    const traceUrl = `./${internalDirectoryName}/${outputDirectoryName}/${traceName}`;
+
+    traceHtml = (
+      <>
+        <dt class="test-description__term">{traceLabel}</dt>
+        <dd class="test-description__definition">
+          <a href={traceUrl} aria-label={traceLabel} download={traceName}>
+            {traceName}
+          </a>
+        </dd>
+      </>
+    );
+  }
+
+  const metaProperties = createSafeHtmlWithoutSanitize`${metaHtmls.join('')}`;
+
+  return (
+    <dl class="test-description test-description_type_meta">
+      {metaProperties}
+      {traceHtml}
+      <dt class="test-description__term">Date</dt>
+      <dd class="test-description__definition">
+        <DatesInterval endTimeInMs={endTimeInMs} startTimeInMs={startTimeInMs} />
+      </dd>
+      <dt class="test-description__term">Duration</dt>
+      <dd class="test-description__definition">
+        <Duration durationInMs={endTimeInMs - startTimeInMs} />
+      </dd>
+    </dl>
+  );
+};
diff --git a/src/utils/report/client/render/TestRunDetails.tsx b/src/utils/report/client/render/TestRunDetails.tsx
new file mode 100644
index 00000000..e584dc6d
--- /dev/null
+++ b/src/utils/report/client/render/TestRunDetails.tsx
@@ -0,0 +1,53 @@
+import {assertValueIsDefined as clientAssertValueIsDefined} from '../assertValueIsDefined';
+
+import {Steps as clientSteps} from './Steps';
+import {TestRunDescription as clientTestRunDescription} from './TestRunDescription';
+import {TestRunError as clientTestRunError} from './TestRunError';
+
+import type {FullTestRun, ReportClientState} from '../../../../types/internal';
+
+declare const jsx: JSX.Runtime;
+declare const reportClientState: ReportClientState;
+
+const assertValueIsDefined: typeof clientAssertValueIsDefined = clientAssertValueIsDefined;
+const Steps = clientSteps;
+const TestRunDescription = clientTestRunDescription;
+const TestRunError = clientTestRunError;
+
+type Props = Readonly<{fullTestRun: FullTestRun}>;
+
+/**
+ * Renders test run details for report.
+ * This base client function should not use scope variables (except other base functions).
+ * @internal
+ */
+export const TestRunDetails: JSX.Component<Props> = ({fullTestRun}) => {
+  const {endTimeInMs, filePath, logEvents, name, runError, status} = fullTestRun;
+  const {locator} = reportClientState;
+
+  const firstStatusString = status[0];
+
+  assertValueIsDefined(firstStatusString);
+
+  const capitalizedStatus = `${firstStatusString.toUpperCase()}${status.slice(1)}`;
+
+  return (
+    <article class="test-details">
+      <p class="test-details__path">{filePath}</p>
+      <h2 class="test-details__title" {...locator('test-details-title', {capitalizedStatus})}>
+        <span class={`color-cell color-cell_status_${status} test-details__status`}>
+          {capitalizedStatus}
+        </span>
+        {name}
+      </h2>
+      <div role="tabpanel">
+        <TestRunDescription fullTestRun={fullTestRun} />
+        <article class="overview">
+          <h3 class="overview__title">Execution</h3>
+          <Steps endTimeInMs={endTimeInMs} logEvents={logEvents} />
+          <TestRunError runError={runError} />
+        </article>
+      </div>
+    </article>
+  );
+};
diff --git a/src/utils/report/client/render/renderTestRunError.ts b/src/utils/report/client/render/TestRunError.tsx
similarity index 55%
rename from src/utils/report/client/render/renderTestRunError.ts
rename to src/utils/report/client/render/TestRunError.tsx
index 41364f8d..b4fe4fcd 100644
--- a/src/utils/report/client/render/renderTestRunError.ts
+++ b/src/utils/report/client/render/TestRunError.tsx
@@ -1,15 +1,19 @@
 import {sanitizeHtml as clientSanitizeHtml} from '../sanitizeHtml';
 
-import type {RunError, SafeHtml} from '../../../../types/internal';
+import type {RunError} from '../../../../types/internal';
 
 const sanitizeHtml = clientSanitizeHtml;
 
+declare const jsx: JSX.Runtime;
+
+type Props = Readonly<{runError: RunError}>;
+
 /**
  * Renders `TestRun` error as simple message.
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function renderTestRunError(runError: RunError): SafeHtml {
+export const TestRunError: JSX.Component<Props> = ({runError}) => {
   if (runError === undefined) {
     return sanitizeHtml``;
   }
@@ -19,11 +23,11 @@ export function renderTestRunError(runError: RunError): SafeHtml {
 
   const runErrorWithoutStyle = String(runError).replace(stylesRegexp, '');
 
-  return sanitizeHtml`
-<div class="status-detail status-detail_status_failed">
-  <div class="status-detail__content">
-    <code class="status-detail__button-text">${runErrorWithoutStyle}</code>
-  </div>
-</div>
-`;
-}
+  return (
+    <div class="status-detail status-detail_status_failed">
+      <div class="status-detail__content">
+        <code class="status-detail__button-text">{runErrorWithoutStyle}</code>
+      </div>
+    </div>
+  );
+};
diff --git a/src/utils/report/client/render/index.ts b/src/utils/report/client/render/index.ts
index 5f7e1c3c..e4d53138 100644
--- a/src/utils/report/client/render/index.ts
+++ b/src/utils/report/client/render/index.ts
@@ -1,22 +1,22 @@
 /** @internal */
-export {ApiStatisticsItem} from './ApiStatisticsItem';
+export {ApiStatistics} from './ApiStatistics';
 /** @internal */
-export {renderApiStatistics} from './renderApiStatistics';
+export {ApiStatisticsItem} from './ApiStatisticsItem';
 /** @internal */
-export {renderAttributes} from './renderAttributes';
+export {DatesInterval} from './DatesInterval';
 /** @internal */
-export {renderDatesInterval} from './renderDatesInterval';
+export {Duration} from './Duration';
 /** @internal */
-export {renderDuration} from './renderDuration';
+export {MaybeApiStatistics} from './MaybeApiStatistics';
 /** @internal */
-export {renderStep} from './renderStep';
+export {Step} from './Step';
 /** @internal */
-export {renderStepContent} from './renderStepContent';
+export {StepContent} from './StepContent';
 /** @internal */
-export {renderSteps} from './renderSteps';
+export {Steps} from './Steps';
 /** @internal */
-export {renderTestRunDescription} from './renderTestRunDescription';
+export {TestRunDescription} from './TestRunDescription';
 /** @internal */
-export {renderTestRunDetails} from './renderTestRunDetails';
+export {TestRunDetails} from './TestRunDetails';
 /** @internal */
-export {renderTestRunError} from './renderTestRunError';
+export {TestRunError} from './TestRunError';
diff --git a/src/utils/report/client/render/renderStepContent.ts b/src/utils/report/client/render/renderStepContent.ts
deleted file mode 100644
index 83e2e797..00000000
--- a/src/utils/report/client/render/renderStepContent.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import {LogEventType} from '../../../../constants/internal';
-
-import {
-  createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize,
-  sanitizeHtml as clientSanitizeHtml,
-} from '../sanitizeHtml';
-
-import type {LogPayload, SafeHtml} from '../../../../types/internal';
-
-const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
-const sanitizeHtml = clientSanitizeHtml;
-
-type Options = Readonly<{
-  pathToScreenshotOfPage: string | undefined;
-  payload: LogPayload | undefined;
-  type: LogEventType;
-}>;
-
-/**
- * Renders content of single step of test run.
- * This base client function should not use scope variables (except other base functions).
- * @internal
- */
-export function renderStepContent({pathToScreenshotOfPage, payload, type}: Options): SafeHtml {
-  if (payload === undefined) {
-    return sanitizeHtml``;
-  }
-
-  const payloadString = JSON.stringify(payload, null, 2);
-  const code = sanitizeHtml`<code>${payloadString}</code>`;
-  const images: SafeHtml[] = [];
-
-  if (pathToScreenshotOfPage !== undefined) {
-    images.push(
-      sanitizeHtml`<img src="${pathToScreenshotOfPage}" alt="Screenshot of page" title="Screenshot of page" />`,
-    );
-  }
-
-  if (type === LogEventType.InternalAssert) {
-    const {actualScreenshotUrl, diffScreenshotUrl, expectedScreenshotUrl} = payload;
-
-    if (typeof actualScreenshotUrl === 'string') {
-      images.push(sanitizeHtml`<img src="${actualScreenshotUrl}" alt="Actual" title="Actual" />`);
-    }
-
-    if (typeof diffScreenshotUrl === 'string') {
-      images.push(sanitizeHtml`<img src="${diffScreenshotUrl}" alt="Diff" title="Diff" />`);
-    }
-
-    if (typeof expectedScreenshotUrl === 'string') {
-      images.push(
-        sanitizeHtml`<img src="${expectedScreenshotUrl}" alt="Expected" title="Expected" />`,
-      );
-    }
-  }
-
-  const imagesHtml = createSafeHtmlWithoutSanitize`${images.join('')}`;
-  const content = images.length > 0 ? sanitizeHtml`<pre>${code}</pre>${imagesHtml}` : code;
-  const contentTag = images.length > 0 ? 'div' : 'pre';
-
-  return sanitizeHtml`<${contentTag} class="step-expanded-panel step__panel">${content}</${contentTag}>`;
-}
diff --git a/src/utils/report/client/render/renderTestRunDescription.ts b/src/utils/report/client/render/renderTestRunDescription.ts
deleted file mode 100644
index 30574c73..00000000
--- a/src/utils/report/client/render/renderTestRunDescription.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import {parseMarkdownLinks as clientParseMarkdownLinks} from '../parseMarkdownLinks';
-import {
-  createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize,
-  sanitizeHtml as clientSanitizeHtml,
-} from '../sanitizeHtml';
-
-import {renderDatesInterval as clientRenderDatesInterval} from './renderDatesInterval';
-import {renderDuration as clientRenderDuration} from './renderDuration';
-
-import type {FullTestRun, ReportClientState, SafeHtml} from '../../../../types/internal';
-
-const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
-const parseMarkdownLinks = clientParseMarkdownLinks;
-const renderDatesInterval = clientRenderDatesInterval;
-const renderDuration = clientRenderDuration;
-const sanitizeHtml = clientSanitizeHtml;
-
-declare const reportClientState: ReportClientState;
-
-/**
- * Renders tag `<dl class="test-description">` with test run description.
- * The value strings of meta can contain links in markdown format.
- * This base client function should not use scope variables (except other base functions).
- * @internal
- */
-export function renderTestRunDescription(fullTestRun: FullTestRun): SafeHtml {
-  const {endTimeInMs, outputDirectoryName, runError, startTimeInMs} = fullTestRun;
-  const durationInMs = endTimeInMs - startTimeInMs;
-  const {meta} = fullTestRun.options;
-  const metaHtmls: SafeHtml[] = [];
-
-  for (const [key, value] of Object.entries(meta)) {
-    const valueWithLinks = parseMarkdownLinks`${value}`;
-    const metaHtml = sanitizeHtml`
-<dt class="test-description__term">${key}</dt>
-<dd class="test-description__definition">${valueWithLinks}</dd>`;
-
-    metaHtmls.push(metaHtml);
-  }
-
-  let traceHtml: SafeHtml = createSafeHtmlWithoutSanitize``;
-
-  if (runError !== undefined) {
-    const {internalDirectoryName} = reportClientState;
-    const traceLabel = 'Download trace';
-    const traceName = 'trace.zip';
-    const traceUrl = `./${internalDirectoryName}/${outputDirectoryName}/${traceName}`;
-
-    traceHtml = sanitizeHtml`
-<dt class="test-description__term">${traceLabel}</dt>
-<dd class="test-description__definition">
-  <a href="${traceUrl}" aria-label="${traceLabel}" download="${traceName}">${traceName}</a>
-</dd>`;
-  }
-
-  const metaProperties = createSafeHtmlWithoutSanitize`${metaHtmls.join('')}`;
-
-  return sanitizeHtml`
-<dl class="test-description test-description_type_meta">
-  ${metaProperties}
-  ${traceHtml}
-  <dt class="test-description__term">Date</dt>
-  <dd class="test-description__definition">
-    ${renderDatesInterval({endTimeInMs, startTimeInMs})}
-  </dd>
-  <dt class="test-description__term">Duration</dt>
-  <dd class="test-description__definition">
-    ${renderDuration(durationInMs)}
-  </dd>
-</dl>`;
-}
diff --git a/src/utils/report/client/render/renderTestRunDetails.ts b/src/utils/report/client/render/renderTestRunDetails.ts
deleted file mode 100644
index 37c15f0b..00000000
--- a/src/utils/report/client/render/renderTestRunDetails.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {assertValueIsDefined as clientAssertValueIsDefined} from '../assertValueIsDefined';
-import {sanitizeHtml as clientSanitizeHtml} from '../sanitizeHtml';
-
-import {renderSteps as clientRenderSteps} from './renderSteps';
-import {renderTestRunDescription as clientRenderTestRunDescription} from './renderTestRunDescription';
-import {renderTestRunError as clientRenderTestRunError} from './renderTestRunError';
-
-import type {FullTestRun, ReportClientState, SafeHtml} from '../../../../types/internal';
-
-declare const reportClientState: ReportClientState;
-
-const assertValueIsDefined: typeof clientAssertValueIsDefined = clientAssertValueIsDefined;
-const renderSteps = clientRenderSteps;
-const renderTestRunDescription = clientRenderTestRunDescription;
-const renderTestRunError = clientRenderTestRunError;
-const sanitizeHtml = clientSanitizeHtml;
-
-/**
- * Renders tag `<article class="test-details">` with test run details.
- * This base client function should not use scope variables (except other base functions).
- * @internal
- */
-export function renderTestRunDetails(fullTestRun: FullTestRun): SafeHtml {
-  const {endTimeInMs, filePath, logEvents, name, runError, status} = fullTestRun;
-  const {locator} = reportClientState;
-
-  const firstStatusString = status[0];
-
-  assertValueIsDefined(firstStatusString);
-
-  const capitalizedStatus = `${firstStatusString.toUpperCase()}${status.slice(1)}`;
-
-  return sanitizeHtml`<article class="test-details">
-  <p class="test-details__path">${filePath}</p>
-  <h2 class="test-details__title" ${locator('test-details-title', {capitalizedStatus})}>
-    <span class="color-cell color-cell_status_${status} test-details__status">${capitalizedStatus}</span>${name}
-  </h2>
-  <div role="tabpanel">
-    ${renderTestRunDescription(fullTestRun)}
-    <article class="overview">
-      <h3 class="overview__title">Execution</h3>
-      ${renderSteps({endTimeInMs, logEvents})}
-      ${renderTestRunError(runError)}
-    </article>
-  </div>
-</article>`;
-}
diff --git a/src/utils/report/client/sanitizeHtml.ts b/src/utils/report/client/sanitizeHtml.ts
index 257c0326..349aefa0 100644
--- a/src/utils/report/client/sanitizeHtml.ts
+++ b/src/utils/report/client/sanitizeHtml.ts
@@ -104,5 +104,5 @@ export function sanitizeHtml(
  * @internal
  */
 export function sanitizeJson(json: string): string {
-  return json.replace(/</g, '&lt;');
+  return json.replace(/</g, '\\u003c');
 }
diff --git a/src/utils/report/render/RetryHeader.tsx b/src/utils/report/render/RetryHeader.tsx
new file mode 100644
index 00000000..8b624cca
--- /dev/null
+++ b/src/utils/report/render/RetryHeader.tsx
@@ -0,0 +1,31 @@
+import {DatesInterval, Duration} from '../client';
+
+import {locator} from './locator';
+
+import type {RetryProps} from '../../../types/internal';
+
+const testId = 'RetryHeader';
+
+declare const jsx: JSX.Runtime;
+
+type Props = RetryProps;
+
+/**
+ * Renders retry header.
+ * @internal
+ */
+export const RetryHeader: JSX.Component<Props> = ({endTimeInMs, retryIndex, startTimeInMs}) => {
+  const durationInMs = endTimeInMs - startTimeInMs;
+
+  return (
+    <>
+      <h3 class="__title" {...locator(testId, 'title')}>
+        Retry {retryIndex}
+      </h3>
+      <p class="__date" {...locator(testId, 'date')}>
+        <DatesInterval endTimeInMs={endTimeInMs} startTimeInMs={startTimeInMs} />(
+        <Duration durationInMs={durationInMs} />
+      </p>
+    </>
+  );
+};
diff --git a/src/utils/report/render/Warnings.tsx b/src/utils/report/render/Warnings.tsx
index 2918e008..c701d0fd 100644
--- a/src/utils/report/render/Warnings.tsx
+++ b/src/utils/report/render/Warnings.tsx
@@ -1,3 +1,5 @@
+import {createSafeHtmlWithoutSanitize} from '../client';
+
 declare const jsx: JSX.Runtime;
 
 type Props = Readonly<{warnings: readonly string[]}>;
@@ -13,5 +15,5 @@ export const Warnings: JSX.Component<Props> = ({warnings}) => {
 
   const renderedWarnings = warnings.map((warning) => <div class="__error">{warning}</div>);
 
-  return <div class="warnings">{renderedWarnings.join('')}</div>;
+  return <div class="warnings">{createSafeHtmlWithoutSanitize`${renderedWarnings.join('')}`}</div>;
 };
diff --git a/src/utils/report/render/locator.ts b/src/utils/report/render/locator.ts
index bef9509e..11a270a1 100644
--- a/src/utils/report/render/locator.ts
+++ b/src/utils/report/render/locator.ts
@@ -2,7 +2,7 @@ import {type CreateLocatorOptions, createSimpleLocator, type LocatorFunction} fr
 
 import {attributesOptions, e2edEnvironment} from '../../../constants/internal';
 
-import {renderAttributes} from '../client';
+import {renderAttributes} from './renderAttributes';
 
 import type {SafeHtml} from '../../../types/internal';
 
diff --git a/src/utils/report/client/render/renderAttributes.ts b/src/utils/report/render/renderAttributes.ts
similarity index 86%
rename from src/utils/report/client/render/renderAttributes.ts
rename to src/utils/report/render/renderAttributes.ts
index f847f793..e28327e0 100644
--- a/src/utils/report/client/render/renderAttributes.ts
+++ b/src/utils/report/render/renderAttributes.ts
@@ -1,8 +1,8 @@
-import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} from '../sanitizeHtml';
+import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} from '../client';
 
 import type {Attributes} from 'create-locator';
 
-import type {SafeHtml} from '../../../../types/internal';
+import type {SafeHtml} from '../../../types/internal';
 
 const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
 
diff --git a/src/utils/report/render/renderRetry.ts b/src/utils/report/render/renderRetry.ts
index 5deaf688..7c876aa7 100644
--- a/src/utils/report/render/renderRetry.ts
+++ b/src/utils/report/render/renderRetry.ts
@@ -2,8 +2,8 @@ import {createSafeHtmlWithoutSanitize} from '../client';
 
 import {compareByStatuses} from './compareByStatuses';
 import {locatorAttributes} from './locator';
-import {renderRetryHeader} from './renderRetryHeader';
 import {renderTestRunButton} from './renderTestRunButton';
+import {RetryHeader} from './RetryHeader';
 
 import type {RetryProps, SafeHtml} from '../../../types/internal';
 
@@ -24,7 +24,7 @@ export const renderRetry = ({retry}: Props): SafeHtml => {
 <article class="retry" id="retry${retry.retryIndex}" ${
     retry.hidden ? 'hidden' : ''
   } ${locatorAttributes('Retry', {index: retry.retryIndex})}>
-  ${renderRetryHeader({...retry})}
+  ${RetryHeader({...retry})}
   ${buttons.join('')}
 </article>`;
 };
diff --git a/src/utils/report/render/renderRetryHeader.ts b/src/utils/report/render/renderRetryHeader.ts
deleted file mode 100644
index b7f37c0e..00000000
--- a/src/utils/report/render/renderRetryHeader.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {renderDatesInterval, renderDuration, sanitizeHtml} from '../client';
-
-import {locatorAttributes} from './locator';
-
-import type {RetryProps, SafeHtml} from '../../../types/internal';
-
-type Props = RetryProps;
-
-const testId = 'RetryHeader';
-
-/**
- * Renders retry header.
- * @internal
- */
-export const renderRetryHeader = ({endTimeInMs, retryIndex, startTimeInMs}: Props): SafeHtml => {
-  const durationInMs = endTimeInMs - startTimeInMs;
-
-  return sanitizeHtml`
-<h3 class="__title" ${locatorAttributes(testId, 'title')}>Retry ${retryIndex}</h3>
-<p class="__date" ${locatorAttributes(testId, 'date')}>
-  ${renderDatesInterval({endTimeInMs, startTimeInMs})}
-  (${renderDuration(durationInMs)})
-</p>`;
-};
diff --git a/src/utils/report/render/renderTestRunButton.ts b/src/utils/report/render/renderTestRunButton.ts
index 71105b70..b5ae6597 100644
--- a/src/utils/report/render/renderTestRunButton.ts
+++ b/src/utils/report/render/renderTestRunButton.ts
@@ -1,4 +1,4 @@
-import {renderDuration, sanitizeHtml} from '../client';
+import {Duration, sanitizeHtml} from '../client';
 
 import {locatorAttributes} from './locator';
 
@@ -35,6 +35,6 @@ export const renderTestRunButton = ({
     testId,
     'parameters',
   )}>${mainParams}</span></span>
-  <span class="test-button__time" ${locatorAttributes(testId, 'time')}>${renderDuration(durationInMs)}</span>
+  <span class="test-button__time" ${locatorAttributes(testId, 'time')}>${Duration({durationInMs})}</span>
 </button>`;
 };
diff --git a/src/utils/test/preparePage.ts b/src/utils/test/preparePage.ts
index d5acb03b..3f966eb6 100644
--- a/src/utils/test/preparePage.ts
+++ b/src/utils/test/preparePage.ts
@@ -59,11 +59,11 @@ export const preparePage = async (page: Page): Promise<void> => {
     const text = message.text();
     const type = message.type() as ConsoleMessageType;
 
-    consoleMessages.push({args, dateTimeInIso, location, text, type});
-
     for (const jsHandle of message.args()) {
       args.push(await jsHandle.jsonValue().catch(() => 'Error with getting value of argument'));
     }
+
+    consoleMessages.push({args, dateTimeInIso, location, text, type});
   });
 
   const pageerrorListener = AsyncLocalStorage.bind((error: Error) => {
diff --git a/styles/report.css b/styles/report.css
index 92146e5a..4b9eee98 100644
--- a/styles/report.css
+++ b/styles/report.css
@@ -556,7 +556,7 @@ a:visited {
   color: var(--font-color);
 }
 .test-description__definition {
-  margin: 0;
+  margin: 0 0 0 4px;
   display: inline;
   overflow-wrap: break-word;
 }

From 48a5777752253a37f8a694e8da919c775a7e097f Mon Sep 17 00:00:00 2001
From: uid11 <uid.11222@gmail.com>
Date: Sun, 5 Oct 2025 05:01:15 +0300
Subject: [PATCH 2/3] PRO-12619 feat: switch to new layout

---
 .../E2edReportExample/E2edReportExample.ts    |    2 +-
 src/types/global.d.ts                         |    4 +
 src/utils/getDurationWithUnits.ts             |    2 +-
 src/utils/report/client/clickOnRetry.ts       |   10 +-
 src/utils/report/client/clickOnTestRun.ts     |    6 +-
 src/utils/report/client/createJsxRuntime.ts   |   53 +-
 src/utils/report/client/index.ts              |    3 +
 src/utils/report/client/initialScript.ts      |    4 +-
 .../client/onFirstJsonReportDataLoad.ts       |    2 +-
 .../report/client/render/ApiStatistics.tsx    |    9 +-
 src/utils/report/client/render/Duration.tsx   |    6 +-
 src/utils/report/client/render/List.tsx       |   28 +
 src/utils/report/client/render/SafeHtml.tsx   |   15 +
 src/utils/report/client/render/Screenshot.tsx |   22 +
 src/utils/report/client/render/Step.tsx       |   45 +-
 .../report/client/render/StepContent.tsx      |   48 +-
 src/utils/report/client/render/Steps.tsx      |   10 +-
 .../client/render/TestRunDescription.tsx      |   12 +-
 .../report/client/render/TestRunDetails.tsx   |   14 +-
 .../report/client/render/TestRunError.tsx     |   12 +-
 src/utils/report/client/render/index.ts       |    6 +
 src/utils/report/render/DragContainer.tsx     |   18 +
 src/utils/report/render/Errors.tsx            |   23 +
 src/utils/report/render/Favicon.tsx           |   12 +
 src/utils/report/render/Head.tsx              |   48 +
 ...{renderReportToHtml.tsx => HtmlReport.tsx} |   43 +-
 .../{renderJsonData.ts => JsonData.tsx}       |   17 +-
 src/utils/report/render/Logo.tsx              |   31 +
 src/utils/report/render/Metadata.tsx          |   28 +
 src/utils/report/render/Navigation.tsx        |   24 +
 src/utils/report/render/Retries.tsx           |   22 +
 src/utils/report/render/RetriesButtons.tsx    |   40 +
 src/utils/report/render/Retry.tsx             |   33 +
 src/utils/report/render/RetryButton.tsx       |   22 +
 src/utils/report/render/RetryHeader.tsx       |    8 +-
 src/utils/report/render/Script.tsx            |   18 +
 ...ScriptFunctions.ts => ScriptFunctions.tsx} |    6 +-
 ...nderScriptGlobals.ts => ScriptGlobals.tsx} |   14 +-
 .../render/{renderStyle.ts => Style.tsx}      |   12 +-
 src/utils/report/render/TestRunButton.tsx     |   49 +
 src/utils/report/render/Warnings.tsx          |    8 +-
 src/utils/report/render/index.ts              |    2 +-
 src/utils/report/render/locator.ts            |   15 +-
 src/utils/report/render/renderAttributes.ts   |   22 -
 src/utils/report/render/renderErrors.ts       |   17 -
 src/utils/report/render/renderFavicon.ts      |   10 -
 src/utils/report/render/renderHead.ts         |   45 -
 src/utils/report/render/renderLogo.ts         |   21 -
 src/utils/report/render/renderMetadata.ts     |   23 -
 src/utils/report/render/renderNavigation.ts   |   22 -
 src/utils/report/render/renderRetries.ts      |   20 -
 .../report/render/renderRetriesButtons.ts     |   33 -
 src/utils/report/render/renderRetry.ts        |   30 -
 src/utils/report/render/renderRetryButton.ts  |   25 -
 src/utils/report/render/renderScript.ts       |   17 -
 .../report/render/renderTestRunButton.ts      |   40 -
 ...writeHtmlReport.ts => writeHtmlReport.tsx} |    6 +-
 styles/report.css                             | 1477 ++++++++++-------
 58 files changed, 1563 insertions(+), 1051 deletions(-)
 create mode 100644 src/utils/report/client/render/List.tsx
 create mode 100644 src/utils/report/client/render/SafeHtml.tsx
 create mode 100644 src/utils/report/client/render/Screenshot.tsx
 create mode 100644 src/utils/report/render/DragContainer.tsx
 create mode 100644 src/utils/report/render/Errors.tsx
 create mode 100644 src/utils/report/render/Favicon.tsx
 create mode 100644 src/utils/report/render/Head.tsx
 rename src/utils/report/render/{renderReportToHtml.tsx => HtmlReport.tsx} (64%)
 rename src/utils/report/render/{renderJsonData.ts => JsonData.tsx} (81%)
 create mode 100644 src/utils/report/render/Logo.tsx
 create mode 100644 src/utils/report/render/Metadata.tsx
 create mode 100644 src/utils/report/render/Navigation.tsx
 create mode 100644 src/utils/report/render/Retries.tsx
 create mode 100644 src/utils/report/render/RetriesButtons.tsx
 create mode 100644 src/utils/report/render/Retry.tsx
 create mode 100644 src/utils/report/render/RetryButton.tsx
 create mode 100644 src/utils/report/render/Script.tsx
 rename src/utils/report/render/{renderScriptFunctions.ts => ScriptFunctions.tsx} (70%)
 rename src/utils/report/render/{renderScriptGlobals.ts => ScriptGlobals.tsx} (69%)
 rename src/utils/report/render/{renderStyle.ts => Style.tsx} (63%)
 create mode 100644 src/utils/report/render/TestRunButton.tsx
 delete mode 100644 src/utils/report/render/renderAttributes.ts
 delete mode 100644 src/utils/report/render/renderErrors.ts
 delete mode 100644 src/utils/report/render/renderFavicon.ts
 delete mode 100644 src/utils/report/render/renderHead.ts
 delete mode 100644 src/utils/report/render/renderLogo.ts
 delete mode 100644 src/utils/report/render/renderMetadata.ts
 delete mode 100644 src/utils/report/render/renderNavigation.ts
 delete mode 100644 src/utils/report/render/renderRetries.ts
 delete mode 100644 src/utils/report/render/renderRetriesButtons.ts
 delete mode 100644 src/utils/report/render/renderRetry.ts
 delete mode 100644 src/utils/report/render/renderRetryButton.ts
 delete mode 100644 src/utils/report/render/renderScript.ts
 delete mode 100644 src/utils/report/render/renderTestRunButton.ts
 rename src/utils/report/{writeHtmlReport.ts => writeHtmlReport.tsx} (91%)

diff --git a/autotests/pageObjects/pages/E2edReportExample/E2edReportExample.ts b/autotests/pageObjects/pages/E2edReportExample/E2edReportExample.ts
index 7d1a4a0c..1a0929b7 100644
--- a/autotests/pageObjects/pages/E2edReportExample/E2edReportExample.ts
+++ b/autotests/pageObjects/pages/E2edReportExample/E2edReportExample.ts
@@ -65,7 +65,7 @@ export class E2edReportExample extends Page<CustomPageParams> {
    * List of test runs of retry.
    */
   get testRunsList(): Selector {
-    return locator('column1');
+    return locator('column-2');
   }
 
   /**
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index a0aec00e..0ce7a781 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -58,6 +58,10 @@ declare global {
           class?: string;
         }
       >;
+    } & {
+      button: {popovertarget?: string};
+      input: {popovertarget?: string};
+      meta: {charset?: string};
     };
 
     /**
diff --git a/src/utils/getDurationWithUnits.ts b/src/utils/getDurationWithUnits.ts
index 5ac010fb..c6a17d64 100644
--- a/src/utils/getDurationWithUnits.ts
+++ b/src/utils/getDurationWithUnits.ts
@@ -2,7 +2,7 @@
  * Get the duration of time interval in hours, minutes, seconds and milliseconds.
  * `getDurationWithUnits(1213)` = `'1s 213ms'`.
  * Should be a pure function without dependencies in the form of a function declaration,
- * because it is used in the JS code of HTML report.
+ * because it is used in the JS client code of HTML report.
  */
 export function getDurationWithUnits(durationInMs: number): string {
   const msInSecond = 1_000;
diff --git a/src/utils/report/client/clickOnRetry.ts b/src/utils/report/client/clickOnRetry.ts
index db67b0e1..460284cd 100644
--- a/src/utils/report/client/clickOnRetry.ts
+++ b/src/utils/report/client/clickOnRetry.ts
@@ -12,18 +12,16 @@ export function clickOnRetry(element: HTMLElement): void {
     retryElement.hidden = retryElement.id !== chosenRetryId;
   }
 
-  const previousChosenRetryButton = document.querySelector(
-    '.nav-tabs__button[aria-selected="true"]',
-  );
+  const previousChosenRetryButton = document.querySelector('.retry-link[aria-current="true"]');
 
   if (previousChosenRetryButton) {
-    previousChosenRetryButton.ariaSelected = 'false';
+    previousChosenRetryButton.ariaCurrent = null;
   }
 
   // eslint-disable-next-line no-param-reassign
-  element.ariaSelected = 'true';
+  element.ariaCurrent = 'true';
 
-  const leftSection = document.querySelector('.main__section._position_left');
+  const leftSection = document.querySelector('.column-2');
 
   if (leftSection) {
     leftSection.ariaLabel = `Retry ${retry}`;
diff --git a/src/utils/report/client/clickOnTestRun.ts b/src/utils/report/client/clickOnTestRun.ts
index 2c1aaa30..ad31883f 100644
--- a/src/utils/report/client/clickOnTestRun.ts
+++ b/src/utils/report/client/clickOnTestRun.ts
@@ -12,14 +12,14 @@ const chooseTestRun = clientChooseTestRun;
 export function clickOnTestRun(element: HTMLElement): void {
   const runHash = (element.dataset as {runhash: RunHash}).runhash;
 
-  const previousChosenTestRunButton = document.querySelector('.test-button[aria-selected="true"]');
+  const previousChosenTestRunButton = document.querySelector('.test-link[aria-current="true"]');
 
   if (previousChosenTestRunButton) {
-    previousChosenTestRunButton.ariaSelected = 'false';
+    previousChosenTestRunButton.ariaCurrent = null;
   }
 
   // eslint-disable-next-line no-param-reassign
-  element.ariaSelected = 'true';
+  element.ariaCurrent = 'true';
 
   chooseTestRun(runHash);
 }
diff --git a/src/utils/report/client/createJsxRuntime.ts b/src/utils/report/client/createJsxRuntime.ts
index deb8519f..1fa0e241 100644
--- a/src/utils/report/client/createJsxRuntime.ts
+++ b/src/utils/report/client/createJsxRuntime.ts
@@ -33,16 +33,57 @@ export function createJsxRuntime(): JSX.Runtime {
     );
     const childrenHtml = createSafeHtmlWithoutSanitize`${childrenParts.join('')}`;
 
+    const isVoidElement = [
+      'area',
+      'base',
+      'br',
+      'col',
+      'embed',
+      'hr',
+      'img',
+      'input',
+      'link',
+      'meta',
+      'source',
+      'track',
+      'wbr',
+    ].includes(type);
+
+    let closePart = createSafeHtmlWithoutSanitize``;
+
+    if (isVoidElement) {
+      if (childrenHtml.length > 0) {
+        // eslint-disable-next-line no-console
+        console.error(`Element <${type}> is void element, but has children`, childrenHtml);
+
+        closePart = childrenHtml;
+      }
+    } else {
+      closePart = sanitizeHtml`${childrenHtml}</${type}>`;
+    }
+
     if (properties == null) {
-      return sanitizeHtml`<${type}>${childrenHtml}</${type}>`;
+      return sanitizeHtml`<${type}>${closePart}`;
     }
 
-    const attributesParts: readonly SafeHtml[] = Object.entries(properties).map(
-      ([key, value]) => sanitizeHtml`${key.toLowerCase()}="${value}"`,
-    );
-    const attributesHtml = createSafeHtmlWithoutSanitize`${attributesParts.join('')}`;
+    const attributesParts: readonly SafeHtml[] = Object.entries(properties)
+      .filter(([key, value]) => {
+        if (value == null) {
+          return false;
+        }
+
+        if (value !== false) {
+          return true;
+        }
+
+        const lowerCaseKey = key.toLocaleLowerCase();
+
+        return lowerCaseKey.startsWith('aria-') || lowerCaseKey.startsWith('data-');
+      })
+      .map(([key, value]) => sanitizeHtml`${key.toLowerCase()}="${value}"`);
+    const attributesHtml = createSafeHtmlWithoutSanitize`${attributesParts.join(' ')}`;
 
-    return sanitizeHtml`<${type} ${attributesHtml}>${childrenHtml}</${type}>`;
+    return sanitizeHtml`<${type} ${attributesHtml}>${closePart}`;
   };
 
   const Fragment: JSX.Fragment = (properties) => {
diff --git a/src/utils/report/client/index.ts b/src/utils/report/client/index.ts
index 4bf2dbcb..8164ae6d 100644
--- a/src/utils/report/client/index.ts
+++ b/src/utils/report/client/index.ts
@@ -32,7 +32,10 @@ export {
   ApiStatisticsItem,
   DatesInterval,
   Duration,
+  List,
   MaybeApiStatistics,
+  SafeHtml,
+  Screenshot,
   Step,
   StepContent,
   Steps,
diff --git a/src/utils/report/client/initialScript.ts b/src/utils/report/client/initialScript.ts
index cea5354f..681fc28a 100644
--- a/src/utils/report/client/initialScript.ts
+++ b/src/utils/report/client/initialScript.ts
@@ -37,9 +37,9 @@ export function initialScript(): void {
 
   Object.assign<ReportClientState, Partial<ReportClientState>>(reportClientState, {locator});
 
-  addOnClickOnClass('nav-tabs__button', clickOnRetry);
+  addOnClickOnClass('retry-link', clickOnRetry);
   addOnClickOnClass('step-expanded', clickOnStep);
-  addOnClickOnClass('test-button', clickOnTestRun);
+  addOnClickOnClass('test-link', clickOnTestRun);
 
   setReadJsonReportDataObservers();
 
diff --git a/src/utils/report/client/onFirstJsonReportDataLoad.ts b/src/utils/report/client/onFirstJsonReportDataLoad.ts
index 9a11790b..aab98877 100644
--- a/src/utils/report/client/onFirstJsonReportDataLoad.ts
+++ b/src/utils/report/client/onFirstJsonReportDataLoad.ts
@@ -17,7 +17,7 @@ export function onFirstJsonReportDataLoad(): void {
   }
 
   const buttonForFailedTestRun = document.querySelector(
-    '.retry:not([hidden]) .test-button_status_failed',
+    '.retry:not([hidden]) .test-link[data-status="failed"]',
   );
 
   if (!buttonForFailedTestRun) {
diff --git a/src/utils/report/client/render/ApiStatistics.tsx b/src/utils/report/client/render/ApiStatistics.tsx
index ea7c61ae..a4bff456 100644
--- a/src/utils/report/client/render/ApiStatistics.tsx
+++ b/src/utils/report/client/render/ApiStatistics.tsx
@@ -1,6 +1,5 @@
-import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} from '../sanitizeHtml';
-
 import {ApiStatisticsItem as clientApiStatisticsItem} from './ApiStatisticsItem';
+import {List as clientList} from './List';
 
 import type {
   ApiStatistics as ApiStatisticsType,
@@ -9,8 +8,8 @@ import type {
   SafeHtml,
 } from '../../../../types/internal';
 
-const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
 const ApiStatisticsItem = clientApiStatisticsItem;
+const List = clientList;
 
 declare const jsx: JSX.Runtime;
 
@@ -92,9 +91,7 @@ export const ApiStatistics: JSX.Component<Props> = ({apiStatistics, hash}) => {
     <article class="test-details">
       <p class="test-details__path"></p>
       <h2 class="test-details__title">{header}</h2>
-      <div role="tabpanel">
-        <article class="overview">{createSafeHtmlWithoutSanitize`${items.join('')}`}</article>
-      </div>
+      <List elements={items} />
     </article>
   );
 };
diff --git a/src/utils/report/client/render/Duration.tsx b/src/utils/report/client/render/Duration.tsx
index 836d3547..07fba604 100644
--- a/src/utils/report/client/render/Duration.tsx
+++ b/src/utils/report/client/render/Duration.tsx
@@ -1,9 +1,9 @@
 import {getDurationWithUnits as clientGetDurationWithUnits} from '../../../getDurationWithUnits';
 
-import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} from '../sanitizeHtml';
+import {SafeHtml as clientSafeHtml} from './SafeHtml';
 
 const getDurationWithUnits = clientGetDurationWithUnits;
-const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
+const SafeHtml = clientSafeHtml;
 
 declare const jsx: JSX.Runtime;
 
@@ -17,5 +17,5 @@ type Props = Readonly<{durationInMs: number}>;
 export const Duration: JSX.Component<Props> = ({durationInMs}) => {
   const durationWithUnits = getDurationWithUnits(durationInMs);
 
-  return createSafeHtmlWithoutSanitize`${durationWithUnits}`;
+  return <SafeHtml withoutSanitize={durationWithUnits} />;
 };
diff --git a/src/utils/report/client/render/List.tsx b/src/utils/report/client/render/List.tsx
new file mode 100644
index 00000000..3415a846
--- /dev/null
+++ b/src/utils/report/client/render/List.tsx
@@ -0,0 +1,28 @@
+import {assertValueIsDefined as clientAssertValueIsDefined} from '../assertValueIsDefined';
+import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} from '../sanitizeHtml';
+
+import type {SafeHtml} from '../../../../types/internal';
+
+const assertValueIsDefined: typeof clientAssertValueIsDefined = clientAssertValueIsDefined;
+const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
+
+declare const jsx: JSX.Runtime;
+
+type Props = Readonly<{
+  elements?: readonly SafeHtml[];
+  separator?: string;
+  withoutSanitize?: readonly string[];
+}>;
+
+/**
+ * Renders (join) list of any rendered elements.
+ * This base client function should not use scope variables (except other base functions).
+ * @internal
+ */
+export const List: JSX.Component<Props> = ({elements, separator = '', withoutSanitize}) => {
+  const strings = elements || withoutSanitize;
+
+  assertValueIsDefined(strings);
+
+  return createSafeHtmlWithoutSanitize`${strings.join(separator)}`;
+};
diff --git a/src/utils/report/client/render/SafeHtml.tsx b/src/utils/report/client/render/SafeHtml.tsx
new file mode 100644
index 00000000..e6957209
--- /dev/null
+++ b/src/utils/report/client/render/SafeHtml.tsx
@@ -0,0 +1,15 @@
+import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} from '../sanitizeHtml';
+
+const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
+
+declare const jsx: JSX.Runtime;
+
+type Props = Readonly<{withoutSanitize: string}>;
+
+/**
+ * Renders any `SafeHtml` string.
+ * This base client function should not use scope variables (except other base functions).
+ * @internal
+ */
+export const SafeHtml: JSX.Component<Props> = ({withoutSanitize}) =>
+  createSafeHtmlWithoutSanitize`${withoutSanitize}`;
diff --git a/src/utils/report/client/render/Screenshot.tsx b/src/utils/report/client/render/Screenshot.tsx
new file mode 100644
index 00000000..bfb28cd9
--- /dev/null
+++ b/src/utils/report/client/render/Screenshot.tsx
@@ -0,0 +1,22 @@
+declare const jsx: JSX.Runtime;
+
+type Props = Readonly<{name: string; open?: boolean; src: string}>;
+
+/**
+ * Renders screenshot of test in HTML report.
+ * This base client function should not use scope variables (except other base functions).
+ * @internal
+ */
+export const Screenshot: JSX.Component<Props> = ({name, open = false, src}) => (
+  <details class="step-attachment" open={open}>
+    <summary class="step-attachment__title">{name}</summary>
+    <button
+      class="step__screenshot-button"
+      type="button"
+      aria-haspopup="dialog"
+      aria-label="Open full size screenshot"
+    >
+      <img src={src} alt={name} title={name} />
+    </button>
+  </details>
+);
diff --git a/src/utils/report/client/render/Step.tsx b/src/utils/report/client/render/Step.tsx
index d3e43606..98178026 100644
--- a/src/utils/report/client/render/Step.tsx
+++ b/src/utils/report/client/render/Step.tsx
@@ -23,7 +23,9 @@ type Props = Readonly<{
  */
 export const Step: JSX.Component<Props> = ({logEvent, nextLogEventTime}) => {
   const {message, payload, time, type} = logEvent;
+  const date = new Date(time).toISOString();
   const isPayloadEmpty = !payload || Object.keys(payload).length === 0;
+  const popoverId = Math.random().toString(16).slice(2);
   const status = payload?.logEventStatus ?? LogEventStatus.Passed;
 
   let pathToScreenshotOfPage: string | undefined;
@@ -39,25 +41,32 @@ export const Step: JSX.Component<Props> = ({logEvent, nextLogEventTime}) => {
     }
   }
 
-  const maybeEmptyClass = isPayloadEmpty ? 'step-expanded_is-empty' : '';
-  const isErrorScreenshot = pathToScreenshotOfPage !== undefined;
-
-  return (
-    <>
-      <button
-        aria-expanded={isErrorScreenshot}
-        class={`step-expanded step-expanded_status_${status} ${maybeEmptyClass}`}
-      >
-        <span class="step-expanded__name">{message}</span>
-        <span class="step-expanded__time">
+  const content = isPayloadEmpty ? (
+    <div class="step__head">
+      <span class="step__name">{message}</span>
+      <span class="step__duration">
+        <Duration durationInMs={nextLogEventTime - time} />
+      </span>
+    </div>
+  ) : (
+    <details class="step__details">
+      <summary class="step__head">
+        <span class="step__name">{message}</span>
+        <span class="step__duration">
           <Duration durationInMs={nextLogEventTime - time} />
         </span>
-      </button>
-      <StepContent
-        pathToScreenshotOfPage={pathToScreenshotOfPage}
-        payload={isPayloadEmpty ? undefined : payload}
-        type={type}
-      />
-    </>
+      </summary>
+      <StepContent pathToScreenshotOfPage={pathToScreenshotOfPage} payload={payload} type={type} />
+    </details>
+  );
+
+  return (
+    <li class="step" data-status={status}>
+      <button class="step__popover-button" popovertarget={popoverId} title={date}></button>
+      <div id={popoverId} popover="auto">
+        {date}
+      </div>
+      {content}
+    </li>
   );
 };
diff --git a/src/utils/report/client/render/StepContent.tsx b/src/utils/report/client/render/StepContent.tsx
index ac6bb2b7..43c4bc8d 100644
--- a/src/utils/report/client/render/StepContent.tsx
+++ b/src/utils/report/client/render/StepContent.tsx
@@ -1,16 +1,18 @@
 import {LogEventType} from '../../../../constants/internal';
 
-import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} from '../sanitizeHtml';
+import {List as clientList} from './List';
+import {Screenshot as clientScreenshot} from './Screenshot';
 
 import type {LogPayload, SafeHtml} from '../../../../types/internal';
 
-const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
+const List = clientList;
+const Screenshot = clientScreenshot;
 
 declare const jsx: JSX.Runtime;
 
 type Props = Readonly<{
   pathToScreenshotOfPage: string | undefined;
-  payload: LogPayload | undefined;
+  payload: LogPayload;
   type: LogEventType;
 }>;
 
@@ -20,46 +22,38 @@ type Props = Readonly<{
  * @internal
  */
 export const StepContent: JSX.Component<Props> = ({pathToScreenshotOfPage, payload, type}) => {
-  if (payload === undefined) {
-    return <></>;
-  }
-
   const payloadString = JSON.stringify(payload, null, 2);
-  const code = <code>{payloadString}</code>;
-  const images: SafeHtml[] = [];
+  const screenshots: SafeHtml[] = [];
 
   if (pathToScreenshotOfPage !== undefined) {
-    images.push(
-      <img src={pathToScreenshotOfPage} alt="Screenshot of page" title="Screenshot of page" />,
-    );
+    screenshots.push(<Screenshot name="Screenshot of page" open src={pathToScreenshotOfPage} />);
   }
 
   if (type === LogEventType.InternalAssert) {
     const {actualScreenshotUrl, diffScreenshotUrl, expectedScreenshotUrl} = payload;
 
     if (typeof actualScreenshotUrl === 'string') {
-      images.push(<img src={actualScreenshotUrl} alt="Actual" title="Actual" />);
+      screenshots.push(<Screenshot name="Actual" src={actualScreenshotUrl} />);
     }
 
     if (typeof diffScreenshotUrl === 'string') {
-      images.push(<img src={diffScreenshotUrl} alt="Diff" title="Diff" />);
+      screenshots.push(<Screenshot name="Diff" src={diffScreenshotUrl} />);
     }
 
     if (typeof expectedScreenshotUrl === 'string') {
-      images.push(<img src={expectedScreenshotUrl} alt="Expected" title="Expected" />);
+      screenshots.push(<Screenshot name="Expected" src={expectedScreenshotUrl} />);
     }
   }
 
-  const imagesHtml = createSafeHtmlWithoutSanitize`${images.join('')}`;
-
-  if (images.length > 0) {
-    return (
-      <div class="step-expanded-panel step__panel">
-        <pre>{code}</pre>
-        {imagesHtml}
-      </div>
-    );
-  }
-
-  return <pre class="step-expanded-panel step__panel">{code}</pre>;
+  return (
+    <>
+      <details class="step-attachment">
+        <summary class="step-attachment__title">Details</summary>
+        <pre class="step__code">
+          <code>{payloadString}</code>
+        </pre>
+      </details>
+      <List elements={screenshots} />
+    </>
+  );
 };
diff --git a/src/utils/report/client/render/Steps.tsx b/src/utils/report/client/render/Steps.tsx
index 896f5164..40ba568b 100644
--- a/src/utils/report/client/render/Steps.tsx
+++ b/src/utils/report/client/render/Steps.tsx
@@ -1,12 +1,12 @@
 import {assertValueIsDefined as clientAssertValueIsDefined} from '../assertValueIsDefined';
-import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} from '../sanitizeHtml';
 
+import {List as clientList} from './List';
 import {Step as clientStep} from './Step';
 
 import type {LogEvent, SafeHtml, UtcTimeInMs} from '../../../../types/internal';
 
 const assertValueIsDefined: typeof clientAssertValueIsDefined = clientAssertValueIsDefined;
-const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
+const List = clientList;
 const Step = clientStep;
 
 declare const jsx: JSX.Runtime;
@@ -36,5 +36,9 @@ export const Steps: JSX.Component<Props> = ({endTimeInMs, logEvents}) => {
     stepHtmls.push(stepHtml);
   }
 
-  return createSafeHtmlWithoutSanitize`${stepHtmls.join('')}`;
+  return (
+    <ol class="steps-group">
+      <List elements={stepHtmls} />
+    </ol>
+  );
 };
diff --git a/src/utils/report/client/render/TestRunDescription.tsx b/src/utils/report/client/render/TestRunDescription.tsx
index af31ea38..3fc09f3c 100644
--- a/src/utils/report/client/render/TestRunDescription.tsx
+++ b/src/utils/report/client/render/TestRunDescription.tsx
@@ -1,15 +1,15 @@
 import {parseMarkdownLinks as clientParseMarkdownLinks} from '../parseMarkdownLinks';
-import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} from '../sanitizeHtml';
 
 import {DatesInterval as clientDatesInterval} from './DatesInterval';
 import {Duration as clientDuration} from './Duration';
+import {List as clientList} from './List';
 
 import type {FullTestRun, ReportClientState, SafeHtml} from '../../../../types/internal';
 
-const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
 const parseMarkdownLinks = clientParseMarkdownLinks;
 const DatesInterval = clientDatesInterval;
 const Duration = clientDuration;
+const List = clientList;
 
 declare const jsx: JSX.Runtime;
 declare const reportClientState: ReportClientState;
@@ -51,7 +51,7 @@ export const TestRunDescription: JSX.Component<Props> = ({fullTestRun}) => {
       <>
         <dt class="test-description__term">{traceLabel}</dt>
         <dd class="test-description__definition">
-          <a href={traceUrl} aria-label={traceLabel} download={traceName}>
+          <a href={traceUrl} download={traceName} aria-label={traceLabel}>
             {traceName}
           </a>
         </dd>
@@ -59,11 +59,9 @@ export const TestRunDescription: JSX.Component<Props> = ({fullTestRun}) => {
     );
   }
 
-  const metaProperties = createSafeHtmlWithoutSanitize`${metaHtmls.join('')}`;
-
   return (
-    <dl class="test-description test-description_type_meta">
-      {metaProperties}
+    <dl class="test-description" aria-label="Test meta data">
+      <List elements={metaHtmls} />
       {traceHtml}
       <dt class="test-description__term">Date</dt>
       <dd class="test-description__definition">
diff --git a/src/utils/report/client/render/TestRunDetails.tsx b/src/utils/report/client/render/TestRunDetails.tsx
index e584dc6d..5c91b790 100644
--- a/src/utils/report/client/render/TestRunDetails.tsx
+++ b/src/utils/report/client/render/TestRunDetails.tsx
@@ -35,19 +35,15 @@ export const TestRunDetails: JSX.Component<Props> = ({fullTestRun}) => {
     <article class="test-details">
       <p class="test-details__path">{filePath}</p>
       <h2 class="test-details__title" {...locator('test-details-title', {capitalizedStatus})}>
-        <span class={`color-cell color-cell_status_${status} test-details__status`}>
+        <span class="color-cell" data-status={status}>
           {capitalizedStatus}
         </span>
         {name}
       </h2>
-      <div role="tabpanel">
-        <TestRunDescription fullTestRun={fullTestRun} />
-        <article class="overview">
-          <h3 class="overview__title">Execution</h3>
-          <Steps endTimeInMs={endTimeInMs} logEvents={logEvents} />
-          <TestRunError runError={runError} />
-        </article>
-      </div>
+      <TestRunError runError={runError} />
+      <TestRunDescription fullTestRun={fullTestRun} />
+      <h4 class="test-details__retry-title">Execution</h4>
+      <Steps endTimeInMs={endTimeInMs} logEvents={logEvents} />
     </article>
   );
 };
diff --git a/src/utils/report/client/render/TestRunError.tsx b/src/utils/report/client/render/TestRunError.tsx
index b4fe4fcd..4c633f48 100644
--- a/src/utils/report/client/render/TestRunError.tsx
+++ b/src/utils/report/client/render/TestRunError.tsx
@@ -9,7 +9,7 @@ declare const jsx: JSX.Runtime;
 type Props = Readonly<{runError: RunError}>;
 
 /**
- * Renders `TestRun` error as simple message.
+ * Renders `TestRun` error as a simple message.
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
@@ -24,10 +24,12 @@ export const TestRunError: JSX.Component<Props> = ({runError}) => {
   const runErrorWithoutStyle = String(runError).replace(stylesRegexp, '');
 
   return (
-    <div class="status-detail status-detail_status_failed">
-      <div class="status-detail__content">
-        <code class="status-detail__button-text">{runErrorWithoutStyle}</code>
+    <section class="test-error" aria-label="Test error">
+      <div class="test-error__content">
+        <pre>
+          <code>{runErrorWithoutStyle}</code>
+        </pre>
       </div>
-    </div>
+    </section>
   );
 };
diff --git a/src/utils/report/client/render/index.ts b/src/utils/report/client/render/index.ts
index e4d53138..b038eff5 100644
--- a/src/utils/report/client/render/index.ts
+++ b/src/utils/report/client/render/index.ts
@@ -7,8 +7,14 @@ export {DatesInterval} from './DatesInterval';
 /** @internal */
 export {Duration} from './Duration';
 /** @internal */
+export {List} from './List';
+/** @internal */
 export {MaybeApiStatistics} from './MaybeApiStatistics';
 /** @internal */
+export {SafeHtml} from './SafeHtml';
+/** @internal */
+export {Screenshot} from './Screenshot';
+/** @internal */
 export {Step} from './Step';
 /** @internal */
 export {StepContent} from './StepContent';
diff --git a/src/utils/report/render/DragContainer.tsx b/src/utils/report/render/DragContainer.tsx
new file mode 100644
index 00000000..7eb638eb
--- /dev/null
+++ b/src/utils/report/render/DragContainer.tsx
@@ -0,0 +1,18 @@
+declare const jsx: JSX.Runtime;
+
+/**
+ * Renders drag container to change columns widths.
+ * @internal
+ */
+export const DragContainer: JSX.Component = () => (
+  <div
+    class="drag-container"
+    role="separator"
+    tabIndex={0}
+    aria-label="separator"
+    aria-orientation="vertical"
+    aria-valuemax=""
+    aria-valuemin="180"
+    aria-valuenow=""
+  ></div>
+);
diff --git a/src/utils/report/render/Errors.tsx b/src/utils/report/render/Errors.tsx
new file mode 100644
index 00000000..3f23c061
--- /dev/null
+++ b/src/utils/report/render/Errors.tsx
@@ -0,0 +1,23 @@
+import {List} from '../client';
+
+declare const jsx: JSX.Runtime;
+
+type Props = Readonly<{errors: readonly string[]}>;
+
+/**
+ * Renders report errors.
+ * @internal
+ */
+export const Errors: JSX.Component<Props> = ({errors}) => {
+  if (errors.length === 0) {
+    return <></>;
+  }
+
+  const renderedErrors = errors.map((error) => <div class="__error">{error}</div>);
+
+  return (
+    <div class="errors">
+      <List elements={renderedErrors} />
+    </div>
+  );
+};
diff --git a/src/utils/report/render/Favicon.tsx b/src/utils/report/render/Favicon.tsx
new file mode 100644
index 00000000..74b83a60
--- /dev/null
+++ b/src/utils/report/render/Favicon.tsx
@@ -0,0 +1,12 @@
+declare const jsx: JSX.Runtime;
+
+/**
+ * Renders tag `<link rel="icon">` with favicon in data-uri format.
+ * @internal
+ */
+export const Favicon: JSX.Component = () => {
+  const faviconInBase64 =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAOoSURBVHgBtVfNTxNBFH9v2tIFI9bEBPEjKV70YGI96MGL9WaMIpw8Cge94kHPtPFqAvwFQOLdLRL1YEL9C6gHD5zYqAnChYJatrY7zzezLLTL7naB8ksm3c7X+5zfm0GIiUx+NWOfNkZAiLtIlJOAWQTKqDECrAogixArIOUX47dtVstD1Tj7YqcJxv21LKZwQiKOeQJjAXEO6rJofxq0IqeFDSiLd/pPTSLIF3AsYMFeGCiGjgZ1KquhB5f4MwvdgQX/6F6QN4S/I/VgI9dl4aD34j1TD37m/ANtHjgBy/044Il2D0QJJyhL6YyCoCFD7JwFSfe4cx4OB22gyi+vI+l9GMPrk7xhNngdFe33gwXvn+3+lFVLjWxMC0lLcU8ISlmClpk6BLuuXw1egXN2aWA8bEOXH/qmAGkMomGx18btxcFya6cbgpSYDFvlYGMmbMx4uJa3+3uXOwlnq2c4bDf9wvUYjKxmDNm7GbRQMVx9YeBs0Fh6eGMqBkcEWt2KpOEwvYbQEcf1AJ1qZuzBdwQyBxFQVqeT9UJ1IZqSOQnFXWVrENgDbYnFVk8QUAGiE05bvbN4obwDnZEkpFwYH6vMVnGGJm+awlkAmY/aLIbV+d1mcZvTa9LD65tRR4iVq7RWviCoXEnI5nht8aLpH9MnTCmPkG+uvAHVdlHhdjPZ6fxycNhDFD6OaPZibTzUaiaexvJEFs9ch+TVl+CsfQTa/qZGVA7lBRwR+g7AzFgvDYxWzWDhOnzMftTYBqr9APWbuv4aMNnvTckKtREcEtpqURsKcnkb0KX1ntuzkLzyDKCxBeLcHUhce+XNKPMpIAtcd3QWrJQlKjI3TNdjzE84TqVJNYDad1AhqH++BYkrz7Uy9Gdl1LHeWoLj+xViQuULL3hqPFob08nVAX8/XKpQY6uohGuFLj8B7LusTwsL195DtRnz/SwcBaQKElfEBpSjrl5KBgnxWAvkYsSFbQ72jGIqTsu+1UPd946hjB+ag9LDv6b5YwK6BCIw2aBSnNuxW45HOJ4ypBwfF1zOhdMshZ2YPRbuthf8UCcIEUy/MvtlwC3Ly3By90EPlr1wfsj7s8+Eis2EuufpQnFiwndlwEEFGLY5aDlCjMLJKKH3VjJaO4MfJm5Sdvdhwpb7hSsEFiM10Y0ThT6p4mLvPmgGc0Pnx6n2BhR46lOICfe17MyTwOkwwbEV8JDhU2K798c8C7jBS9ue56qoofc8TzABmfGe5/8BRCSvtlyDCPcAAAAASUVORK5CYII=';
+
+  return <link rel="icon" type="image/png" href={faviconInBase64} />;
+};
diff --git a/src/utils/report/render/Head.tsx b/src/utils/report/render/Head.tsx
new file mode 100644
index 00000000..d5485c14
--- /dev/null
+++ b/src/utils/report/render/Head.tsx
@@ -0,0 +1,48 @@
+import {List} from '../client';
+import {getContentFromRenderedElement} from '../getContentFromRenderedElement';
+import {getCspHash} from '../getCspHash';
+
+import {Favicon} from './Favicon';
+import {Script} from './Script';
+import {Style} from './Style';
+
+declare const jsx: JSX.Runtime;
+
+type Props = Readonly<{imgCspHosts: string; reportFileName: string}>;
+
+/**
+ * Renders tag `<head>`.
+ * @internal
+ */
+export const Head: JSX.Component<Props> = ({imgCspHosts, reportFileName}) => {
+  const renderedScript = <Script />;
+  const renderedStyle = <Style />;
+
+  const scriptContent = getContentFromRenderedElement(renderedScript);
+  const styleContent = getContentFromRenderedElement(renderedStyle);
+
+  const cspScriptHash = getCspHash(scriptContent);
+  const cspStyleHash = getCspHash(styleContent);
+
+  const cspContent = [
+    "default-src 'self';",
+    `img-src 'self' data: ${imgCspHosts};`,
+    `script-src '${cspScriptHash}';`,
+    `style-src '${cspStyleHash}';`,
+  ];
+
+  const safeCspContent = <List separator=" " withoutSanitize={cspContent} />;
+
+  return (
+    <head>
+      <meta charset="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta name="description" content={reportFileName} />
+      <meta http-equiv="Content-Security-Policy" content={String(safeCspContent)} />
+      <title>{reportFileName}</title>
+      <Favicon />
+      {renderedStyle}
+      {renderedScript}
+    </head>
+  );
+};
diff --git a/src/utils/report/render/renderReportToHtml.tsx b/src/utils/report/render/HtmlReport.tsx
similarity index 64%
rename from src/utils/report/render/renderReportToHtml.tsx
rename to src/utils/report/render/HtmlReport.tsx
index 88442e36..044d90eb 100644
--- a/src/utils/report/render/renderReportToHtml.tsx
+++ b/src/utils/report/render/HtmlReport.tsx
@@ -6,25 +6,28 @@ import {createJsxRuntime, sanitizeHtml} from '../client';
 import {getImgCspHosts} from '../getImgCspHosts';
 import {getRetriesProps} from '../getRetriesProps';
 
+import {DragContainer} from './DragContainer';
+import {Errors} from './Errors';
+import {Head} from './Head';
+import {JsonData} from './JsonData';
 import {locator} from './locator';
-import {renderErrors} from './renderErrors';
-import {renderHead} from './renderHead';
-import {renderJsonData} from './renderJsonData';
-import {renderNavigation} from './renderNavigation';
-import {renderRetries} from './renderRetries';
+import {Navigation} from './Navigation';
+import {Retries} from './Retries';
 import {Warnings} from './Warnings';
 
-import type {ReportData, SafeHtml, UtcTimeInMs} from '../../../types/internal';
+import type {ReportData, UtcTimeInMs} from '../../../types/internal';
 
 declare const jsx: JSX.Runtime;
 
 Object.assign(globalThis, {jsx: createJsxRuntime()});
 
+type Props = Readonly<{reportData: ReportData}>;
+
 /**
  * Renders report data to HTML report page.
  * @internal
  */
-export const renderReportToHtml = (reportData: ReportData): SafeHtml => {
+export const HtmlReport: JSX.Component<Props> = ({reportData}) => {
   const startTimeInMs = Date.now() as UtcTimeInMs;
 
   const {length} = reportData.fullTestRuns;
@@ -39,32 +42,28 @@ export const renderReportToHtml = (reportData: ReportData): SafeHtml => {
 
   const page = (
     <html lang="en">
-      {renderHead(reportFileName, imgCspHosts)}
+      <Head imgCspHosts={imgCspHosts} reportFileName={reportFileName} />
       <body>
-        {renderNavigation({retries})}
-        <div class="main" role="tabpanel">
-          <section
-            class="main__section _position_left"
-            aria-label={`Retry ${maxRetry}`}
-            {...locator('column1')}
-          >
-            {renderRetries({retries})}
-            {renderErrors(reportData.errors)}
+        <Navigation retries={retries} />
+        <div class="main">
+          <section class="column-2" aria-label={`Retry ${maxRetry}`} {...locator('column-2')}>
+            <Retries retries={retries} />
+            <Errors errors={reportData.errors} />
             <Warnings warnings={reportData.warnings} />
           </section>
-          <div class="drag-container"></div>
+          <DragContainer />
           <section
-            aria-label="Tests results"
-            class="main__section _position_right"
+            class="column-3"
             id="e2edRightColumnContainer"
-            {...locator('column2')}
+            aria-label="Tests results"
+            {...locator('column-3')}
           >
             <div class="test-details-empty">
               <p>No test selected</p>
             </div>
           </section>
         </div>
-        {renderJsonData(reportData)}
+        <JsonData reportData={reportData} />
       </body>
     </html>
   );
diff --git a/src/utils/report/render/renderJsonData.ts b/src/utils/report/render/JsonData.tsx
similarity index 81%
rename from src/utils/report/render/renderJsonData.ts
rename to src/utils/report/render/JsonData.tsx
index 7a0c11c9..368c9f3e 100644
--- a/src/utils/report/render/renderJsonData.ts
+++ b/src/utils/report/render/JsonData.tsx
@@ -1,15 +1,16 @@
 import {FAILED_TEST_RUN_STATUSES} from '../../../constants/internal';
 
-import {createSafeHtmlWithoutSanitize, sanitizeJson} from '../client';
+import {List, SafeHtml, sanitizeJson} from '../client';
 
 import type {
   FullTestRun,
   ReportClientData,
   ReportData,
-  SafeHtml,
   ScriptJsonData,
 } from '../../../types/internal';
 
+declare const jsx: JSX.Runtime;
+
 type FullTestRuns = readonly FullTestRun[];
 
 const filterErrors = (fullTestRuns: FullTestRuns): [errors: FullTestRuns, rest: FullTestRuns] => {
@@ -27,13 +28,15 @@ const filterErrors = (fullTestRuns: FullTestRuns): [errors: FullTestRuns, rest:
   return [errors, rest];
 };
 
+type Props = Readonly<{reportData: ReportData}>;
+
 /**
  * Renders `<script>` tags with JSON presentation of report data.
  * In first tag renders the errors of the last retry, then the entire last retry,
  * then all the remaining errors, tnen general client data, and then all the remaining data.
  * @internal
  */
-export const renderJsonData = (reportData: ReportData): SafeHtml => {
+export const JsonData: JSX.Component<Props> = ({reportData}) => {
   const {apiStatistics, retries} = reportData;
   const reportClientData: ReportClientData = {apiStatistics};
 
@@ -59,8 +62,12 @@ export const renderJsonData = (reportData: ReportData): SafeHtml => {
     const json = JSON.stringify(fullTestRuns);
     const sanitizedJson = sanitizeJson(json);
 
-    return createSafeHtmlWithoutSanitize`<script class="e2edJsonReportData" type="plain/text">${sanitizedJson}</script>`;
+    return (
+      <script class="e2edJsonReportData" type="application/json">
+        <SafeHtml withoutSanitize={sanitizedJson} />
+      </script>
+    );
   });
 
-  return createSafeHtmlWithoutSanitize`${scripts.join('')}`;
+  return <List elements={scripts} />;
 };
diff --git a/src/utils/report/render/Logo.tsx b/src/utils/report/render/Logo.tsx
new file mode 100644
index 00000000..ab1ba3b8
--- /dev/null
+++ b/src/utils/report/render/Logo.tsx
@@ -0,0 +1,31 @@
+import {readFileSync} from 'node:fs';
+import {join} from 'node:path';
+
+import {INSTALLED_E2ED_DIRECTORY_PATH, READ_FILE_OPTIONS} from '../../../constants/internal';
+
+import {SafeHtml} from '../client';
+
+declare const jsx: JSX.Runtime;
+
+/**
+ * Renders SVG logo for report page.
+ * @internal
+ */
+export const Logo: JSX.Component = () => {
+  const pathToLogo = join(INSTALLED_E2ED_DIRECTORY_PATH, 'logo.svg');
+
+  const logoString = readFileSync(pathToLogo, READ_FILE_OPTIONS);
+
+  return (
+    <a
+      class="logo"
+      href="https://www.npmjs.com/package/e2ed"
+      rel="noreferrer"
+      target="_blank"
+      title="e2ed package"
+      aria-label="e2ed package"
+    >
+      <SafeHtml withoutSanitize={logoString} />
+    </a>
+  );
+};
diff --git a/src/utils/report/render/Metadata.tsx b/src/utils/report/render/Metadata.tsx
new file mode 100644
index 00000000..39d73201
--- /dev/null
+++ b/src/utils/report/render/Metadata.tsx
@@ -0,0 +1,28 @@
+import type {ApiStatisticsReportHash} from '../../../types/internal';
+
+declare const jsx: JSX.Runtime;
+
+/**
+ * Renders metadata of whole `e2ed` run.
+ * @internal
+ */
+export const Metadata: JSX.Component = () => {
+  const pagesHash: ApiStatisticsReportHash = 'api-statistics-pages';
+  const requestsHash: ApiStatisticsReportHash = 'api-statistics-requests';
+  const resourcesHash: ApiStatisticsReportHash = 'api-statistics-resources';
+
+  return (
+    <article class="retry" hidden>
+      <h3 class="retry__title">Metadata</h3>
+      <button class="test-link" data-runhash={pagesHash}>
+        Pages statistics
+      </button>
+      <button class="test-link" data-runhash={requestsHash}>
+        Requests statistics
+      </button>
+      <button class="test-link" data-runhash={resourcesHash}>
+        Resources statistics
+      </button>
+    </article>
+  );
+};
diff --git a/src/utils/report/render/Navigation.tsx b/src/utils/report/render/Navigation.tsx
new file mode 100644
index 00000000..515ee3c1
--- /dev/null
+++ b/src/utils/report/render/Navigation.tsx
@@ -0,0 +1,24 @@
+import {locator} from './locator';
+import {Logo} from './Logo';
+import {RetriesButtons} from './RetriesButtons';
+
+import type {RetryProps} from '../../../types/internal';
+
+declare const jsx: JSX.Runtime;
+
+type Props = Readonly<{retries: readonly RetryProps[]}>;
+
+/**
+ * Renders tag `<nav>`.
+ * @internal
+ */
+export const Navigation: JSX.Component<Props> = ({retries}) => (
+  <>
+    <header class="header" {...locator('header')}>
+      <Logo />
+    </header>
+    <nav class="column-1" {...locator('column-1')}>
+      <RetriesButtons retries={retries} />
+    </nav>
+  </>
+);
diff --git a/src/utils/report/render/Retries.tsx b/src/utils/report/render/Retries.tsx
new file mode 100644
index 00000000..ab9013a3
--- /dev/null
+++ b/src/utils/report/render/Retries.tsx
@@ -0,0 +1,22 @@
+import {List} from '../client';
+
+import {Metadata} from './Metadata';
+import {Retry} from './Retry';
+
+import type {RetryProps} from '../../../types/internal';
+
+declare const jsx: JSX.Runtime;
+
+type Props = Readonly<{retries: readonly RetryProps[]}>;
+
+/**
+ * Renders list of retries (with test runs).
+ * @internal
+ */
+export const Retries: JSX.Component<Props> = ({retries}) => {
+  const retriesHtml = retries.map((retry) => <Retry retry={retry} />);
+
+  retriesHtml.push(<Metadata />);
+
+  return <List elements={retriesHtml} />;
+};
diff --git a/src/utils/report/render/RetriesButtons.tsx b/src/utils/report/render/RetriesButtons.tsx
new file mode 100644
index 00000000..c2f51a1c
--- /dev/null
+++ b/src/utils/report/render/RetriesButtons.tsx
@@ -0,0 +1,40 @@
+import {List} from '../client';
+
+import {locator} from './locator';
+import {RetryButton} from './RetryButton';
+
+import type {RetryProps, SafeHtml} from '../../../types/internal';
+
+declare const jsx: JSX.Runtime;
+
+type Props = Readonly<{retries: readonly RetryProps[]}>;
+
+/**
+ * Renders retries navigation buttons.
+ * @internal
+ */
+export const RetriesButtons: JSX.Component<Props> = ({retries}) => {
+  const retryNumbers = retries.map(({retryIndex}) => retryIndex);
+  const maxRetry = Math.max(...retryNumbers);
+  const buttons: SafeHtml[] = [];
+
+  for (let index = 1; index <= maxRetry + 1; index += 1) {
+    const isRetry = retryNumbers.includes(index);
+    const isMeta = index === maxRetry + 1;
+
+    buttons[index] = (
+      <RetryButton
+        disabled={isMeta ? false : !isRetry}
+        name={isMeta ? 'Meta' : `Retry ${index}`}
+        retry={index}
+        selected={index === maxRetry}
+      />
+    );
+  }
+
+  return (
+    <div class="retry-links" aria-label="Retries" {...locator('RetriesButtons')}>
+      <List elements={buttons} />
+    </div>
+  );
+};
diff --git a/src/utils/report/render/Retry.tsx b/src/utils/report/render/Retry.tsx
new file mode 100644
index 00000000..e6be1b4f
--- /dev/null
+++ b/src/utils/report/render/Retry.tsx
@@ -0,0 +1,33 @@
+import {List} from '../client';
+
+import {compareByStatuses} from './compareByStatuses';
+import {locator} from './locator';
+import {RetryHeader} from './RetryHeader';
+import {TestRunButton} from './TestRunButton';
+
+import type {RetryProps} from '../../../types/internal';
+
+declare const jsx: JSX.Runtime;
+
+type Props = Readonly<{retry: RetryProps}>;
+
+/**
+ * Renders test runs list for one retry.
+ * @internal
+ */
+export const Retry: JSX.Component<Props> = ({retry}) => {
+  const sortedTestRunButtons = [...retry.testRunButtons].sort(compareByStatuses);
+
+  const buttons = sortedTestRunButtons.map((props, index) => (
+    <TestRunButton {...props} index={index} />
+  ));
+
+  return (
+    <article class="retry" hidden={retry.hidden} {...locator('Retry', {index: retry.retryIndex})}>
+      <RetryHeader {...retry} />
+      <div class="tests-group">
+        <List elements={buttons} />
+      </div>
+    </article>
+  );
+};
diff --git a/src/utils/report/render/RetryButton.tsx b/src/utils/report/render/RetryButton.tsx
new file mode 100644
index 00000000..4bc69694
--- /dev/null
+++ b/src/utils/report/render/RetryButton.tsx
@@ -0,0 +1,22 @@
+import {locator} from './locator';
+
+import type {RetryButtonProps} from '../../../types/internal';
+
+declare const jsx: JSX.Runtime;
+
+type Props = RetryButtonProps;
+
+/**
+ * Renders tag `<button>` with single retry button.
+ * @internal
+ */
+export const RetryButton: JSX.Component<Props> = ({disabled, name, retry, selected}) => (
+  <button
+    class="retry-link"
+    disabled={disabled}
+    aria-current={selected ? true : undefined}
+    {...locator('RetryButton', {disabled, retry, selected})}
+  >
+    {name}
+  </button>
+);
diff --git a/src/utils/report/render/RetryHeader.tsx b/src/utils/report/render/RetryHeader.tsx
index 8b624cca..54587c12 100644
--- a/src/utils/report/render/RetryHeader.tsx
+++ b/src/utils/report/render/RetryHeader.tsx
@@ -19,12 +19,12 @@ export const RetryHeader: JSX.Component<Props> = ({endTimeInMs, retryIndex, star
 
   return (
     <>
-      <h3 class="__title" {...locator(testId, 'title')}>
+      <h3 class="retry__title" {...locator(testId, 'title')}>
         Retry {retryIndex}
       </h3>
-      <p class="__date" {...locator(testId, 'date')}>
-        <DatesInterval endTimeInMs={endTimeInMs} startTimeInMs={startTimeInMs} />(
-        <Duration durationInMs={durationInMs} />
+      <p class="retry__date" {...locator(testId, 'date')}>
+        <DatesInterval endTimeInMs={endTimeInMs} startTimeInMs={startTimeInMs} /> (
+        <Duration durationInMs={durationInMs} />)
       </p>
     </>
   );
diff --git a/src/utils/report/render/Script.tsx b/src/utils/report/render/Script.tsx
new file mode 100644
index 00000000..39a53be2
--- /dev/null
+++ b/src/utils/report/render/Script.tsx
@@ -0,0 +1,18 @@
+import {initialScript} from '../client';
+
+import {ScriptFunctions} from './ScriptFunctions';
+import {ScriptGlobals} from './ScriptGlobals';
+
+declare const jsx: JSX.Runtime;
+
+/**
+ * Renders tag `<script>` with all report JavaScript code.
+ * @internal
+ */
+export const Script: JSX.Component = () => (
+  <script async type="module">
+    <ScriptGlobals />
+    <ScriptFunctions />
+    {initialScript.name}()
+  </script>
+);
diff --git a/src/utils/report/render/renderScriptFunctions.ts b/src/utils/report/render/ScriptFunctions.tsx
similarity index 70%
rename from src/utils/report/render/renderScriptFunctions.ts
rename to src/utils/report/render/ScriptFunctions.tsx
index ce21b40d..3a67b392 100644
--- a/src/utils/report/render/renderScriptFunctions.ts
+++ b/src/utils/report/render/ScriptFunctions.tsx
@@ -4,17 +4,17 @@ import {getDurationWithUnits} from '../../getDurationWithUnits';
 
 import * as clientFunctions from '../client';
 
-import type {SafeHtml} from '../../../types/internal';
+declare const jsx: JSX.Runtime;
 
 /**
  * Renders JS client functions for report.
  * @internal
  */
-export const renderScriptFunctions = (): SafeHtml => {
+export const ScriptFunctions: JSX.Component = () => {
   const functions = Object.values(clientFunctions).map((fn) => `var ${fn.name} = ${String(fn)};`);
 
   functions.push(`var createSimpleLocator = ${createSimpleLocator.toString()};`);
   functions.push(String(getDurationWithUnits));
 
-  return clientFunctions.createSafeHtmlWithoutSanitize`${functions.join('\n')}`;
+  return <clientFunctions.List separator={'\n'} withoutSanitize={functions} />;
 };
diff --git a/src/utils/report/render/renderScriptGlobals.ts b/src/utils/report/render/ScriptGlobals.tsx
similarity index 69%
rename from src/utils/report/render/renderScriptGlobals.ts
rename to src/utils/report/render/ScriptGlobals.tsx
index 3fa39a41..81b13f52 100644
--- a/src/utils/report/render/renderScriptGlobals.ts
+++ b/src/utils/report/render/ScriptGlobals.tsx
@@ -2,17 +2,19 @@ import {INTERNAL_DIRECTORY_NAME} from '../../../constants/internal';
 
 import {getFullPackConfig} from '../../config';
 
-import {createSafeHtmlWithoutSanitize} from '../client';
+import {SafeHtml} from '../client';
 
 import {createLocatorOptions} from './locator';
 
-import type {ReportClientState, SafeHtml} from '../../../types/internal';
+import type {ReportClientState} from '../../../types/internal';
+
+declare const jsx: JSX.Runtime;
 
 /**
  * Renders JS constants for report page.
  * @internal
  */
-export const renderScriptGlobals = (): SafeHtml => {
+export const ScriptGlobals: JSX.Component = () => {
   const e2edRightColumnContainer = {} as unknown as HTMLElement;
   const locator = {} as unknown as ReportClientState['locator'];
   const {pathToScreenshotsDirectoryForReport} = getFullPackConfig();
@@ -28,7 +30,7 @@ export const renderScriptGlobals = (): SafeHtml => {
     readJsonReportDataObservers: [],
   };
 
-  return createSafeHtmlWithoutSanitize`
-var jsx;
-const reportClientState = ${JSON.stringify(reportClientState)};`;
+  const code = `var jsx; const reportClientState = ${JSON.stringify(reportClientState)};`;
+
+  return <SafeHtml withoutSanitize={code} />;
 };
diff --git a/src/utils/report/render/renderStyle.ts b/src/utils/report/render/Style.tsx
similarity index 63%
rename from src/utils/report/render/renderStyle.ts
rename to src/utils/report/render/Style.tsx
index 34dd517a..f20e3a26 100644
--- a/src/utils/report/render/renderStyle.ts
+++ b/src/utils/report/render/Style.tsx
@@ -3,18 +3,22 @@ import {join} from 'node:path';
 
 import {INSTALLED_E2ED_DIRECTORY_PATH, READ_FILE_OPTIONS} from '../../../constants/internal';
 
-import {createSafeHtmlWithoutSanitize} from '../client';
+import {SafeHtml} from '../client';
 
-import type {SafeHtml} from '../../../types/internal';
+declare const jsx: JSX.Runtime;
 
 /**
  * Renders tag `<style>` with all CSS styles.
  * @internal
  */
-export const renderStyle = (): SafeHtml => {
+export const Style: JSX.Component = () => {
   const pathToCss = join(INSTALLED_E2ED_DIRECTORY_PATH, 'styles', 'report.css');
 
   const cssString = readFileSync(pathToCss, READ_FILE_OPTIONS);
 
-  return createSafeHtmlWithoutSanitize`<style>${cssString}</style>`;
+  return (
+    <style>
+      <SafeHtml withoutSanitize={cssString} />
+    </style>
+  );
 };
diff --git a/src/utils/report/render/TestRunButton.tsx b/src/utils/report/render/TestRunButton.tsx
new file mode 100644
index 00000000..c7c55ccd
--- /dev/null
+++ b/src/utils/report/render/TestRunButton.tsx
@@ -0,0 +1,49 @@
+import {Duration} from '../client';
+
+import {locator} from './locator';
+
+import type {TestRunButtonProps} from '../../../types/internal';
+
+declare const jsx: JSX.Runtime;
+
+type Props = TestRunButtonProps & Readonly<{index: number}>;
+
+const testId = 'TestRunButton';
+
+/**
+ * Renders single test run button (in test runs list).
+ * @internal
+ */
+export const TestRunButton: JSX.Component<Props> = ({
+  endTimeInMs,
+  index,
+  mainParams,
+  name,
+  runHash,
+  startTimeInMs,
+  status,
+}) => {
+  const durationInMs = endTimeInMs - startTimeInMs;
+
+  return (
+    <button
+      class="test-link"
+      data-runhash={runHash}
+      data-status={status}
+      {...locator(testId, {mainParams, status})}
+    >
+      <span class="test-link__order" {...locator(testId, 'order')}>
+        #{index + 1}
+      </span>
+      <span class="test-link__name" {...locator(testId, 'name')}>
+        <span class="test-link__main-params" {...locator(testId, 'parameters')}>
+          {mainParams}
+        </span>
+        {name}
+      </span>
+      <span class="test-link__duration" {...locator(testId, 'duration')}>
+        <Duration durationInMs={durationInMs} />
+      </span>
+    </button>
+  );
+};
diff --git a/src/utils/report/render/Warnings.tsx b/src/utils/report/render/Warnings.tsx
index c701d0fd..18bb16bc 100644
--- a/src/utils/report/render/Warnings.tsx
+++ b/src/utils/report/render/Warnings.tsx
@@ -1,4 +1,4 @@
-import {createSafeHtmlWithoutSanitize} from '../client';
+import {List} from '../client';
 
 declare const jsx: JSX.Runtime;
 
@@ -15,5 +15,9 @@ export const Warnings: JSX.Component<Props> = ({warnings}) => {
 
   const renderedWarnings = warnings.map((warning) => <div class="__error">{warning}</div>);
 
-  return <div class="warnings">{createSafeHtmlWithoutSanitize`${renderedWarnings.join('')}`}</div>;
+  return (
+    <div class="warnings">
+      <List elements={renderedWarnings} />
+    </div>
+  );
 };
diff --git a/src/utils/report/render/index.ts b/src/utils/report/render/index.ts
index 255b70fd..0153fc7b 100644
--- a/src/utils/report/render/index.ts
+++ b/src/utils/report/render/index.ts
@@ -1,2 +1,2 @@
 /** @internal */
-export {renderReportToHtml} from './renderReportToHtml';
+export {HtmlReport} from './HtmlReport';
diff --git a/src/utils/report/render/locator.ts b/src/utils/report/render/locator.ts
index 11a270a1..a1c6a2e0 100644
--- a/src/utils/report/render/locator.ts
+++ b/src/utils/report/render/locator.ts
@@ -2,21 +2,8 @@ import {type CreateLocatorOptions, createSimpleLocator, type LocatorFunction} fr
 
 import {attributesOptions, e2edEnvironment} from '../../../constants/internal';
 
-import {renderAttributes} from './renderAttributes';
-
-import type {SafeHtml} from '../../../types/internal';
-
 const isProduction = e2edEnvironment.E2ED_ORIGIN !== 'https://bing.com';
 
-const createLocatorOptions: CreateLocatorOptions = {attributesOptions, isProduction};
+export const createLocatorOptions: CreateLocatorOptions = {attributesOptions, isProduction};
 
 export const locator: LocatorFunction = createSimpleLocator(createLocatorOptions).locator;
-
-export {createLocatorOptions};
-
-/**
- * `locator` function.
- * @internal
- */
-export const locatorAttributes: LocatorFunction<SafeHtml> = (...args): SafeHtml =>
-  renderAttributes(locator(...(args as [string])));
diff --git a/src/utils/report/render/renderAttributes.ts b/src/utils/report/render/renderAttributes.ts
deleted file mode 100644
index e28327e0..00000000
--- a/src/utils/report/render/renderAttributes.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} from '../client';
-
-import type {Attributes} from 'create-locator';
-
-import type {SafeHtml} from '../../../types/internal';
-
-const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
-
-/**
- * Renders attributes object to safe HTML string.
- * This base client function should not use scope variables (except other base functions).
- * @internal
- */
-export function renderAttributes(attributes: Attributes): SafeHtml {
-  const parts: string[] = [];
-
-  for (const key of Object.keys(attributes)) {
-    parts.push(`${key}="${attributes[key]}"`);
-  }
-
-  return createSafeHtmlWithoutSanitize`${parts.join(' ')}`;
-}
diff --git a/src/utils/report/render/renderErrors.ts b/src/utils/report/render/renderErrors.ts
deleted file mode 100644
index cefd3cb8..00000000
--- a/src/utils/report/render/renderErrors.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {createSafeHtmlWithoutSanitize, sanitizeHtml} from '../client';
-
-import type {SafeHtml} from '../../../types/internal';
-
-/**
- * Renders report errors.
- * @internal
- */
-export const renderErrors = (errors: readonly string[]): SafeHtml => {
-  if (errors.length === 0) {
-    return sanitizeHtml``;
-  }
-
-  const renderedErrors = errors.map((error) => sanitizeHtml`<div class="__error">${error}</div>`);
-
-  return createSafeHtmlWithoutSanitize`<div class="errors">${renderedErrors.join('')}</div>`;
-};
diff --git a/src/utils/report/render/renderFavicon.ts b/src/utils/report/render/renderFavicon.ts
deleted file mode 100644
index c1a1a567..00000000
--- a/src/utils/report/render/renderFavicon.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {createSafeHtmlWithoutSanitize} from '../client';
-
-import type {SafeHtml} from '../../../types/internal';
-
-/**
- * Renders tag `<link rel="icon">` with favicon in data-uri format.
- * @internal
- */
-export const renderFavicon = (): SafeHtml => createSafeHtmlWithoutSanitize`
-<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAOoSURBVHgBtVfNTxNBFH9v2tIFI9bEBPEjKV70YGI96MGL9WaMIpw8Cge94kHPtPFqAvwFQOLdLRL1YEL9C6gHD5zYqAnChYJatrY7zzezLLTL7naB8ksm3c7X+5zfm0GIiUx+NWOfNkZAiLtIlJOAWQTKqDECrAogixArIOUX47dtVstD1Tj7YqcJxv21LKZwQiKOeQJjAXEO6rJofxq0IqeFDSiLd/pPTSLIF3AsYMFeGCiGjgZ1KquhB5f4MwvdgQX/6F6QN4S/I/VgI9dl4aD34j1TD37m/ANtHjgBy/044Il2D0QJJyhL6YyCoCFD7JwFSfe4cx4OB22gyi+vI+l9GMPrk7xhNngdFe33gwXvn+3+lFVLjWxMC0lLcU8ISlmClpk6BLuuXw1egXN2aWA8bEOXH/qmAGkMomGx18btxcFya6cbgpSYDFvlYGMmbMx4uJa3+3uXOwlnq2c4bDf9wvUYjKxmDNm7GbRQMVx9YeBs0Fh6eGMqBkcEWt2KpOEwvYbQEcf1AJ1qZuzBdwQyBxFQVqeT9UJ1IZqSOQnFXWVrENgDbYnFVk8QUAGiE05bvbN4obwDnZEkpFwYH6vMVnGGJm+awlkAmY/aLIbV+d1mcZvTa9LD65tRR4iVq7RWviCoXEnI5nht8aLpH9MnTCmPkG+uvAHVdlHhdjPZ6fxycNhDFD6OaPZibTzUaiaexvJEFs9ch+TVl+CsfQTa/qZGVA7lBRwR+g7AzFgvDYxWzWDhOnzMftTYBqr9APWbuv4aMNnvTckKtREcEtpqURsKcnkb0KX1ntuzkLzyDKCxBeLcHUhce+XNKPMpIAtcd3QWrJQlKjI3TNdjzE84TqVJNYDad1AhqH++BYkrz7Uy9Gdl1LHeWoLj+xViQuULL3hqPFob08nVAX8/XKpQY6uohGuFLj8B7LusTwsL195DtRnz/SwcBaQKElfEBpSjrl5KBgnxWAvkYsSFbQ72jGIqTsu+1UPd946hjB+ag9LDv6b5YwK6BCIw2aBSnNuxW45HOJ4ypBwfF1zOhdMshZ2YPRbuthf8UCcIEUy/MvtlwC3Ly3By90EPlr1wfsj7s8+Eis2EuufpQnFiwndlwEEFGLY5aDlCjMLJKKH3VjJaO4MfJm5Sdvdhwpb7hSsEFiM10Y0ThT6p4mLvPmgGc0Pnx6n2BhR46lOICfe17MyTwOkwwbEV8JDhU2K798c8C7jBS9ue56qoofc8TzABmfGe5/8BRCSvtlyDCPcAAAAASUVORK5CYII=" />`;
diff --git a/src/utils/report/render/renderHead.ts b/src/utils/report/render/renderHead.ts
deleted file mode 100644
index 5e13a2c8..00000000
--- a/src/utils/report/render/renderHead.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import {createSafeHtmlWithoutSanitize, sanitizeHtml} from '../client';
-import {getContentFromRenderedElement} from '../getContentFromRenderedElement';
-import {getCspHash} from '../getCspHash';
-
-import {renderFavicon} from './renderFavicon';
-import {renderScript} from './renderScript';
-import {renderStyle} from './renderStyle';
-
-import type {SafeHtml} from '../../../types/internal';
-
-/**
- * Renders tag `<head>`.
- * @internal
- */
-export const renderHead = (reportFileName: string, imgCspHosts: string): SafeHtml => {
-  const renderedScript = renderScript();
-  const renderedStyle = renderStyle();
-
-  const scriptContent = getContentFromRenderedElement(renderedScript);
-  const styleContent = getContentFromRenderedElement(renderedStyle);
-
-  const cspScriptHash = getCspHash(scriptContent);
-  const cspStyleHash = getCspHash(styleContent);
-
-  const cspContent = [
-    "default-src 'self';",
-    `img-src 'self' data: ${imgCspHosts};`,
-    `script-src '${cspScriptHash}';`,
-    `style-src '${cspStyleHash}';`,
-  ];
-
-  const safeCspContent = createSafeHtmlWithoutSanitize`${cspContent.join(' ')}`;
-
-  return sanitizeHtml`
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="description" content="${reportFileName}" />
-  <meta http-equiv="Content-Security-Policy" content="${safeCspContent}" />
-  <title>${reportFileName}</title>
-  ${renderFavicon()}
-  ${renderedStyle}
-  ${renderedScript}
-</head>`;
-};
diff --git a/src/utils/report/render/renderLogo.ts b/src/utils/report/render/renderLogo.ts
deleted file mode 100644
index d128b69b..00000000
--- a/src/utils/report/render/renderLogo.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {readFileSync} from 'node:fs';
-import {join} from 'node:path';
-
-import {INSTALLED_E2ED_DIRECTORY_PATH, READ_FILE_OPTIONS} from '../../../constants/internal';
-
-import {createSafeHtmlWithoutSanitize} from '../client';
-
-import type {SafeHtml} from '../../../types/internal';
-
-/**
- * Renders SVG logo for report page.
- * @internal
- */
-export const renderLogo = (): SafeHtml => {
-  const pathToLogo = join(INSTALLED_E2ED_DIRECTORY_PATH, 'logo.svg');
-
-  const logoString = readFileSync(pathToLogo, READ_FILE_OPTIONS);
-
-  return createSafeHtmlWithoutSanitize`
-<a class="logo" href="https://www.npmjs.com/package/e2ed" aria-label="e2ed package" rel="noreferrer" target="_blank" title="e2ed package">${logoString}</a>`;
-};
diff --git a/src/utils/report/render/renderMetadata.ts b/src/utils/report/render/renderMetadata.ts
deleted file mode 100644
index cb85ead9..00000000
--- a/src/utils/report/render/renderMetadata.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import {createSafeHtmlWithoutSanitize} from '../client';
-
-import type {ApiStatisticsReportHash, SafeHtml} from '../../../types/internal';
-
-type Props = Readonly<{menuIndex: number}>;
-
-/**
- * Renders metadata of whole `e2ed` run.
- * @internal
- */
-export const renderMetadata = ({menuIndex}: Props): SafeHtml => {
-  const pagesHash: ApiStatisticsReportHash = 'api-statistics-pages';
-  const requestsHash: ApiStatisticsReportHash = 'api-statistics-requests';
-  const resourcesHash: ApiStatisticsReportHash = 'api-statistics-resources';
-
-  return createSafeHtmlWithoutSanitize`
-<article class="retry" id="retry${menuIndex}" hidden>
-  <h3 class="__title">Metadata</h3>
-  <button aria-selected="false" class="test-button" data-runhash="${pagesHash}" role="tab">Pages statistics</button>
-  <button aria-selected="false" class="test-button" data-runhash="${requestsHash}" role="tab">Requests statistics</button>
-  <button aria-selected="false" class="test-button" data-runhash="${resourcesHash}" role="tab">Resources statistics</button>
-</article>`;
-};
diff --git a/src/utils/report/render/renderNavigation.ts b/src/utils/report/render/renderNavigation.ts
deleted file mode 100644
index 0e5e2f90..00000000
--- a/src/utils/report/render/renderNavigation.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {sanitizeHtml} from '../client';
-
-import {locatorAttributes} from './locator';
-import {renderLogo} from './renderLogo';
-import {renderRetriesButtons} from './renderRetriesButtons';
-
-import type {RetryProps, SafeHtml} from '../../../types/internal';
-
-type Props = Readonly<{retries: readonly RetryProps[]}>;
-
-/**
- * Renders tag `<nav>`.
- * @internal
- */
-export const renderNavigation = ({
-  retries,
-}: Props): SafeHtml => sanitizeHtml`<nav class="nav" ${locatorAttributes('Navigation')}>
-  <header class="header" ${locatorAttributes('header')}>
-    ${renderLogo()}
-  </header>
-${renderRetriesButtons({retries})}
-</nav>`;
diff --git a/src/utils/report/render/renderRetries.ts b/src/utils/report/render/renderRetries.ts
deleted file mode 100644
index 85a45843..00000000
--- a/src/utils/report/render/renderRetries.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {createSafeHtmlWithoutSanitize} from '../client';
-
-import {renderMetadata} from './renderMetadata';
-import {renderRetry} from './renderRetry';
-
-import type {RetryProps, SafeHtml} from '../../../types/internal';
-
-type Props = Readonly<{retries: readonly RetryProps[]}>;
-
-/**
- * Renders list of retries (with test runs).
- * @internal
- */
-export const renderRetries = ({retries}: Props): SafeHtml => {
-  const retriesHtml = retries.map((retry) => renderRetry({retry}));
-
-  retriesHtml.push(renderMetadata({menuIndex: retries.length + 1}));
-
-  return createSafeHtmlWithoutSanitize`${retriesHtml.join('')}`;
-};
diff --git a/src/utils/report/render/renderRetriesButtons.ts b/src/utils/report/render/renderRetriesButtons.ts
deleted file mode 100644
index b59f3f23..00000000
--- a/src/utils/report/render/renderRetriesButtons.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import {createSafeHtmlWithoutSanitize} from '../client';
-
-import {locatorAttributes} from './locator';
-import {renderRetryButton} from './renderRetryButton';
-
-import type {RetryProps, SafeHtml} from '../../../types/internal';
-
-type Props = Readonly<{retries: readonly RetryProps[]}>;
-
-/**
- * Renders retries navigation buttons.
- * @internal
- */
-export const renderRetriesButtons = ({retries}: Props): SafeHtml => {
-  const retryNumbers = retries.map(({retryIndex}) => retryIndex);
-  const maxRetry = Math.max(...retryNumbers);
-  const buttons: SafeHtml[] = [];
-
-  for (let index = 1; index <= maxRetry + 1; index += 1) {
-    const isRetry = retryNumbers.includes(index);
-    const isMeta = index === maxRetry + 1;
-
-    buttons[index] = renderRetryButton({
-      disabled: isMeta ? false : !isRetry,
-      name: isMeta ? 'Meta' : `Retry ${index}`,
-      retry: index,
-      selected: index === maxRetry,
-    });
-  }
-
-  return createSafeHtmlWithoutSanitize`
-<div role="tablist" aria-label="Retries" class="nav-tabs" ${locatorAttributes('RetriesButtons')}>${buttons.join('')}</div>`;
-};
diff --git a/src/utils/report/render/renderRetry.ts b/src/utils/report/render/renderRetry.ts
deleted file mode 100644
index 7c876aa7..00000000
--- a/src/utils/report/render/renderRetry.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {createSafeHtmlWithoutSanitize} from '../client';
-
-import {compareByStatuses} from './compareByStatuses';
-import {locatorAttributes} from './locator';
-import {renderTestRunButton} from './renderTestRunButton';
-import {RetryHeader} from './RetryHeader';
-
-import type {RetryProps, SafeHtml} from '../../../types/internal';
-
-type Props = Readonly<{retry: RetryProps}>;
-
-/**
- * Renders test runs list for one retry.
- * @internal
- */
-export const renderRetry = ({retry}: Props): SafeHtml => {
-  const sortedTestRunButtons = [...retry.testRunButtons].sort(compareByStatuses);
-
-  const buttons = sortedTestRunButtons.map((props, index) =>
-    renderTestRunButton({...props, index}),
-  );
-
-  return createSafeHtmlWithoutSanitize`
-<article class="retry" id="retry${retry.retryIndex}" ${
-    retry.hidden ? 'hidden' : ''
-  } ${locatorAttributes('Retry', {index: retry.retryIndex})}>
-  ${RetryHeader({...retry})}
-  ${buttons.join('')}
-</article>`;
-};
diff --git a/src/utils/report/render/renderRetryButton.ts b/src/utils/report/render/renderRetryButton.ts
deleted file mode 100644
index 6c3dfa11..00000000
--- a/src/utils/report/render/renderRetryButton.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import {sanitizeHtml} from '../client';
-
-import {locatorAttributes} from './locator';
-
-import type {RetryButtonProps, SafeHtml} from '../../../types/internal';
-
-type Props = RetryButtonProps;
-
-/**
- * Renders tag `<button>` with single retry button.
- * @internal
- */
-export const renderRetryButton = ({
-  disabled,
-  name,
-  retry,
-  selected,
-}: Props): SafeHtml => sanitizeHtml`<button
-aria-controls="retry${retry}"
-aria-selected="${String(selected)}"
-class="nav-tabs__button"
-id="retry${retry}-nav"
-role="tab"
-${locatorAttributes('RetryButton', {disabled, retry, selected})}
-${disabled ? 'disabled' : ''}>${name}</button>`;
diff --git a/src/utils/report/render/renderScript.ts b/src/utils/report/render/renderScript.ts
deleted file mode 100644
index 4cd85744..00000000
--- a/src/utils/report/render/renderScript.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {createSafeHtmlWithoutSanitize, initialScript} from '../client';
-
-import {renderScriptFunctions} from './renderScriptFunctions';
-import {renderScriptGlobals} from './renderScriptGlobals';
-
-import type {SafeHtml} from '../../../types/internal';
-
-/**
- * Renders tag `<script>` with all report JavaScript code.
- * @internal
- */
-export const renderScript = (): SafeHtml => createSafeHtmlWithoutSanitize`
-<script async type="module">
-${renderScriptGlobals()};
-${renderScriptFunctions()};
-${initialScript.name}();
-</script>`;
diff --git a/src/utils/report/render/renderTestRunButton.ts b/src/utils/report/render/renderTestRunButton.ts
deleted file mode 100644
index b5ae6597..00000000
--- a/src/utils/report/render/renderTestRunButton.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {Duration, sanitizeHtml} from '../client';
-
-import {locatorAttributes} from './locator';
-
-import type {SafeHtml, TestRunButtonProps} from '../../../types/internal';
-
-type Props = TestRunButtonProps & Readonly<{index: number}>;
-
-const testId = 'TestRunButton';
-
-/**
- * Renders single test run button (in test runs list).
- * @internal
- */
-export const renderTestRunButton = ({
-  endTimeInMs,
-  index,
-  mainParams,
-  name,
-  runHash,
-  startTimeInMs,
-  status,
-}: Props): SafeHtml => {
-  const durationInMs = endTimeInMs - startTimeInMs;
-
-  return sanitizeHtml`<button
-  aria-selected="false"
-  class="test-button test-button_status_${status}"
-  data-runhash="${runHash}"
-  role="tab"
-  ${locatorAttributes(testId, {mainParams, status})}
->
-  <span class="test-button__order" ${locatorAttributes(testId, 'order')}>#${index + 1}</span>
-  <span class="test-button__name" ${locatorAttributes(testId, 'name')}>${name}<span class="test-button__parameters" ${locatorAttributes(
-    testId,
-    'parameters',
-  )}>${mainParams}</span></span>
-  <span class="test-button__time" ${locatorAttributes(testId, 'time')}>${Duration({durationInMs})}</span>
-</button>`;
-};
diff --git a/src/utils/report/writeHtmlReport.ts b/src/utils/report/writeHtmlReport.tsx
similarity index 91%
rename from src/utils/report/writeHtmlReport.ts
rename to src/utils/report/writeHtmlReport.tsx
index 477a2c32..5a6671f5 100644
--- a/src/utils/report/writeHtmlReport.ts
+++ b/src/utils/report/writeHtmlReport.tsx
@@ -11,10 +11,12 @@ import {generalLog} from '../generalLog';
 import {getDurationWithUnits} from '../getDurationWithUnits';
 import {getFileSizeInMb} from '../getFileSizeInMb';
 
-import {renderReportToHtml} from './render';
+import {HtmlReport} from './render';
 
 import type {FilePathFromRoot, ReportData, UtcTimeInMs} from '../../types/internal';
 
+declare const jsx: JSX.Runtime;
+
 /**
  * Writes HTML report (`report.html` file) with test runs results.
  * @internal
@@ -22,7 +24,7 @@ import type {FilePathFromRoot, ReportData, UtcTimeInMs} from '../../types/intern
 export const writeHtmlReport = async (reportData: ReportData): Promise<void> => {
   const startTimeInMs = Date.now() as UtcTimeInMs;
 
-  const reportHtml = renderReportToHtml(reportData);
+  const reportHtml = <HtmlReport reportData={reportData} />;
   const {reportFileName} = reportData;
 
   assertValueIsNotNull(reportFileName, 'reportFileName is not null');
diff --git a/styles/report.css b/styles/report.css
index 4b9eee98..e707afa2 100644
--- a/styles/report.css
+++ b/styles/report.css
@@ -1,118 +1,138 @@
 :root {
-  --main-color: #084ee8;
-  --main-bg-color: #f4f4f4;
-  --font-color: #111;
-  --subtitle-color: #6f6e6e;
-
-  --broken-color: #8f6900;
-  --failed-color: #de2607;
-  --passed-color: #3d7704;
-  --skipped-color: #6f6c6c;
-  --unknown-color: #bf31a6;
-
-  --button-bg-color: #fff;
-  --broken-bg-color: #fffae6;
-  --failed-bg-color: #ffe7e6;
-  /* --passed-bg-color: #d9e4ce; */
-  --skipped-bg-color: #f2f2f2;
-  --unknown-bg-color: #fbe8ff;
-  --step-panel-bg-color: #f8f8f9;
-
-  --border-color: #eceff1;
-
-  --button-hover-bg-color: #e4edfe;
-  --nav-bg-color: #2e3135; /* #343434; */
+  --font-size: 14px;
+  --line-height: 1.4;
+  --half-line-height: calc(var(--line-height) * var(--font-size) / 2);
+  --half-line-height: round(calc(var(--line-height) * var(--font-size) / 2), 1px);
 
-  --drag-container-width: 8px;
-  --test-details-padding: 15px;
+  --primary-bg-color: hsl(0 0% 98.8%);
+  --secondary-bg-color: hsl(0 0% 99.6%);
+  --font-color: hsl(0 0% 7%);
+  --subtitle-color: hsl(0 1% 32%);
+  --accent-color: hsl(221 93% 47%);
+  --link-visited-color: hsl(271 68% 32%);
+
+  --passed-color: hsl(120 100% 16%);
+  --failed-color: hsl(0 100% 31%);
+  --unknown-color: hsl(300 100% 27%);
+  --skipped-color: hsl(0 0% 30%);
+  --broken-color: hsl(39 100% 21%);
+  --manual-color: hsl(80 100% 17%);
 
-  --test-link-selected-color: hsl(54 100% 90%);
+  --transparent-color: hsl(0 0% 0% / 0%);
+  --color-cell-color: hsl(0 0% 95%);
+  --button-disabled-color: hsl(0 0% 5% / 0.3);
 
-  --link-color: #0000ee;
-  --link-visited-color: #551a8b;
+  --header-height: 100px;
+  --retry-padding: 10px;
+  --test-details-padding: 10px;
+  --main-radius: 3px;
+  --item-bg-color: hsl(0 0% 63% / 0.07);
+  --failed-status-bg-color: hsl(0 100% 63% / 0.07);
+  --step-panel-bg-color: hsl(0 0% 89%);
+  --item-hover-bg-color: hsl(215 98% 61% /0.15);
+
+  --drag-container-width: 8px;
+  --drag-container-color: hsl(0 0% 60%);
+  --drag-container-bg-color: hsl(0 0% 83%);
+
+  --main-params-color: hsl(0 0% 30%);
+  --failed-line-color: hsl(0 100% 35%);
+  --failed-text-color: hsl(4, 64%, 23%);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --main-bg-color: #272727;
-    --font-color: rgba(255, 255, 255, 0.75);
-    --border-color: #525252;
-    --button-bg-color: #2e3135;
-    --step-panel-bg-color: #23282d;
-    --button-hover-bg-color: #003cbd;
-
-    --passed-color: #306001;
-    --failed-color: #a61b03;
-    --unknown-color: #aa138e;
-
-    --failed-bg-color: hsl(0 28% 21%);
-    --test-link-selected-color: hsl(221 31% 20%);
-
-    --link-color: #38a2ff;
-    --link-visited-color: #b68fff;
+    --primary-bg-color: hsl(240 8.77% 11.18%);
+    --secondary-bg-color: hsl(240 5.56% 14.12%);
+    --font-color: hsl(0 0% 100% / 0.75);
+    --subtitle-color: hsl(0 0% 66%);
+    --accent-color: hsl(221 91% 75%);
+    --drag-container-color: hsl(0 0% 75%);
+    --drag-container-bg-color: hsl(0 0% 32%);
+    --step-panel-bg-color: hsl(210 12% 16%);
+    --button-disabled-color: hsl(0 0% 60% / 0.3);
+    --link-visited-color: hsl(271 69% 76%);
+
+    --passed-color: hsl(120 100% 41%);
+    --failed-color: hsl(0 100% 76%);
+    --unknown-color: hsl(300 100% 80%);
+    --skipped-color: hsl(0 0% 70%);
+    --broken-color: hsl(39 100% 50%);
+    --manual-color: hsl(80 100% 36%);
+
+    --main-params-color: hsl(0 0% 65%);
+    --failed-line-color: hsl(0 100% 74%);
+    --failed-text-color: var(--font-color);
+    --color-cell-color: hsl(0 0% 7%);
   }
+
+  .logo > svg *[fill='#084EE8'] {
+    fill: hsl(220 93% 56%);
+  }
+  .logo > svg *[fill='#000'] {
+    fill: hsl(0 0% 65%);
+  }
+}
+/* for test! delete */
+.column-2 {
+  resize: horizontal;
+  overflow: scroll;
 }
 
 body {
   margin: 0;
   padding: 0;
-  width: 100%;
-  height: 100vh;
+  min-height: 100vh;
+  height: auto;
   display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: 1fr;
+  grid-template-areas: 'header' 'column-1' 'main';
+  grid-template-rows: auto auto 1fr;
+  grid-template-columns: 1fr;
+  width: 100%;
   font-family: system-ui;
   font-size: 14px;
+  line-height: 1.5;
   color: var(--font-color);
+  background-color: var(--primary-bg-color);
+}
+body:has(dialog[open]) {
+  overflow: hidden;
 }
-
 button,
 button:focus,
 button:active,
 button:hover {
   box-sizing: border-box;
+  border: none;
+  font-family: system-ui;
   cursor: pointer;
   background-color: transparent;
   background: none;
+  user-select: text;
 }
-
 button:disabled {
-  color: #1010104d;
+  color: var(--button-disabled-color);
   cursor: not-allowed;
 }
-
 a,
 a:hover,
 a:active,
 a:focus {
-  color: var(--link-color);
-  text-decoration-line: none;
+  color: var(--accent-color);
 }
-
 a:hover {
   text-decoration-line: underline;
 }
-
 a:visited {
   color: var(--link-visited-color);
 }
 
-.header {
-  margin: 0 0 20px 0;
-  padding: 4px;
-  display: flex;
-  justify-content: center;
-  border-bottom: 1px solid var(--subtitle-color);
-}
-
-/* errors */
+/* todo */
 .errors {
   padding: 2px 6px;
 }
-
 .errors .__error {
   color: var(--failed-color);
-
   margin: 4px 0;
 }
 
@@ -127,664 +147,991 @@ a:visited {
   margin: 4px 0;
 }
 
+.header {
+  grid-area: header;
+  display: flex;
+  justify-content: flex-start;
+  margin: 0;
+  padding: 4px 14px;
+  box-sizing: border-box;
+}
 .logo {
-  width: 100%;
-  height: auto;
   display: block;
-}
-
-/* nav */
-.nav {
   width: 100px;
-  background-color: var(--nav-bg-color);
-  overflow-y: auto;
+  height: auto;
 }
-.nav-tabs {
+.column-1 {
+  grid-area: column-1;
+  width: 100vw;
+  overflow: hidden;
+}
+.header,
+.column-1 {
+  border-bottom: 1px solid var(--drag-container-bg-color);
+}
+.retry-links {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  max-width: 100vw;
+  /* scrollbar-width: none; */
+  overflow-x: scroll;
 }
-.nav-tabs__button {
-  padding: 15px;
+.retry-link {
+  padding: 14px;
   box-sizing: border-box;
   flex-shrink: 0;
   font-size: 16px;
-  color: #b5b5b5;
+  color: var(--font-color);
   text-align: left;
   transition: all 0.3s ease;
   white-space: nowrap;
+  text-decoration: none;
   border: none;
 }
-.nav-tabs__button[aria-selected='true'],
-.nav-tabs__button[aria-selected='true']:hover,
-.nav-tabs__button[aria-selected='true']:active,
-.nav-tabs__button[aria-selected='true']:focus {
-  border-right: 4px solid var(--main-color);
-  color: #fff;
-  cursor: default;
-}
-.nav-tabs__button:not(:disabled):hover {
-  color: #fff;
-}
-
-/* main */
 .main {
+  grid-area: main;
+  min-width: 0;
   display: flex;
-  height: 100%;
-  background-color: var(--main-bg-color);
-  overflow: hidden;
-}
-.main__section {
-  padding-bottom: 25px;
-  overflow-y: auto;
-}
-.main__section._position_left {
-  width: calc(40% - var(--drag-container-width));
-  min-width: 180px;
-}
-.main__section._position_left._size_mini .test-button {
-  flex-wrap: wrap;
+  flex-direction: column;
 }
-.main__section._position_left._size_mini .test-button__name {
+.column-1 {
   width: 100%;
-  order: 5;
 }
-.main__section._position_left._size_mini .test-button__time {
-  order: 4;
+.column-2 {
+  flex-basis: auto;
 }
-.main__section._position_right {
-  width: 60%;
+.column-2,
+.column-3 {
+  min-width: 180px;
+  padding-bottom: 25px;
 }
-
-/* toolbar */
-.toolbar {
-  padding: 7px 10px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  border-width: 1px 0;
-  border-style: solid;
-  border-color: var(--border-color);
-  white-space: nowrap;
+.column-1,
+.column-2 {
+  contain: layout paint; /* ??? */
+  height: auto;
+  box-sizing: border-box;
 }
-.toolbar__group {
-  display: flex;
-  gap: 5px;
-  align-items: center;
-  white-space: nowrap;
-  overflow-x: auto;
+.column-3 {
+  position: sticky;
+  height: auto;
+  box-sizing: border-box;
 }
-.toolbar__button {
-  padding: 0;
-  border: none;
+.retry__title {
+  margin: 0;
+  padding: 14px var(--retry-padding) 10px;
+  font-size: 22px;
+  font-weight: normal;
+}
+.retry__date {
+  margin: 0 0 15px 0;
+  padding: 0 var(--retry-padding);
+  color: var(--subtitle-color);
 }
-
-/* color-cell */
 .color-cell {
-  padding: 2px 5px;
-  color: #fff;
-  border-radius: 3px;
+  padding: 2px 4px;
+  border-radius: var(--main-radius);
   white-space: nowrap;
   font-size: 14px;
-  font-weight: bold;
+  color: var(--color-cell-color);
 }
 .color-cell_type_tag {
-  background-color: var(--main-color);
+  background-color: var(--accent-color);
 }
+.step__head::before,
+.test-link::before {
+  --offset: 0px;
+  --icon-size-without-offset: calc(var(--icon-size) - 2 * var(--offset) - 2 * var(--border-width));
 
-/* retry */
-.retry .__title {
-  margin: 14px 0 7px;
-  padding: 0 10px;
-}
-.retry .__date {
-  margin: 0 0 10px 0;
-  padding: 0 10px;
-  color: var(--subtitle-color);
-}
-
-/* test */
-.test-button {
-  padding: 7px 10px;
-  width: 100%;
-  display: flex;
-  gap: 5px;
-  font-size: 14px;
-  align-items: flex-start;
-  color: var(--font-color);
-  background-color: var(--button-bg-color);
-  border: none;
-}
-.test-button {
-  min-width: 180px;
-  border-bottom: 1px solid var(--border-color);
-}
-.test-button:hover {
-  border-bottom: 1px solid var(--border-color);
-  background-color: var(--button-hover-bg-color);
-}
-.test-button:first-of-type {
-  border-top: 1px solid var(--border-color);
-}
-.test-button[aria-selected='true'] {
-  background-color: var(--test-link-selected-color);
-  cursor: default;
-}
-.test-button__time {
-  color: var(--subtitle-color);
-  flex-grow: 1;
-  text-align: right;
+  content: '';
+  width: var(--icon-size-without-offset);
+  height: var(--icon-size-without-offset);
+  margin: 0 calc(var(--offset) + var(--border-width));
   flex-shrink: 0;
-  user-select: text;
+  display: block;
+  box-sizing: border-box;
+  border-radius: 50%;
+  outline: var(--border-width) solid;
+  outline-offset: var(--offset);
+  background-clip: content-box;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  overflow: hidden;
 }
-.test-button__order {
-  width: 35px;
-  text-align: left;
-  flex-shrink: 0;
-  user-select: text;
+.step__head::before, /* ??? */
+.test-link::before {
+  --border-width: 0px;
+  --icon-size: 12px;
+  --icon-line-width: 2px;
+
+  font-weight: bold;
+  transition: transform 0.15s ease-in;
 }
-.test-button__name {
-  text-align: left;
-  overflow-wrap: break-word;
-  overflow: hidden;
-  user-select: text;
+.retry-link,
+.test-link,
+.step__head {
+  border-radius: var(--main-radius);
 }
-.test-button__parameters {
-  color: var(--subtitle-color);
-  overflow-wrap: initial;
+.test-link[data-status='passed']::before,
+.step[data-status='passed'] > .step__details > .step__head::before,
+.step[data-status='passed'] > .step__head::before {
+  color: var(--passed-color);
+  background-image:
+    linear-gradient(var(--transparent-color) calc(100% - var(--icon-line-width)), currentColor 0),
+    linear-gradient(
+      90deg,
+      var(--transparent-color) calc(100% - var(--icon-line-width)),
+      currentColor 0
+    );
+  background-size: 37% 70%;
+  rotate: 45deg;
+}
+.test-link[data-status='passed']::before,
+.step[data-status='passed'] > .step__details > .step__head::before,
+.step[data-status='passed'] > .step__head::before {
+  border-bottom-right-radius: 0px;
+  background-size: 56% 100%;
+  translate: 0 -15%;
+}
+.test-link[data-status='failed']::before,
+.step[data-status='failed'] > .step__details > .step__head::before,
+.step[data-status='failed'] > .step__head::before {
+  color: var(--failed-color);
+  background-image:
+    linear-gradient(
+      45deg,
+      var(--transparent-color) calc(50% - var(--icon-line-width) / 2),
+      currentColor 0 calc(50% + var(--icon-line-width) / 2),
+      var(--transparent-color) 0
+    ),
+    linear-gradient(
+      135deg,
+      var(--transparent-color) calc(50% - var(--icon-line-width) / 2),
+      currentColor 0 calc(50% + var(--icon-line-width) / 2),
+      var(--transparent-color) 0
+    );
+}
+.test-link[data-status='broken']::before {
+  --border-width: 1px;
+  --offset: 0px;
+
+  border-radius: 50%;
+  color: var(--broken-color);
+  background-image: linear-gradient(
+    135deg,
+    var(--transparent-color) calc(50% - var(--icon-line-width) / 2),
+    currentColor 0 calc(50% + var(--icon-line-width) / 2),
+    var(--transparent-color) 0
+  );
+}
+.test-link[data-status='skipped']::before {
+  color: var(--skipped-color);
 }
-.test-button__parameters::before {
-  content: ' ';
+.test-link[data-status='skipped']::before /* ??? */ {
+  background-image: linear-gradient(
+    var(--transparent-color) calc(50% - var(--icon-line-width) / 2),
+    currentColor 0 calc(50% + var(--icon-line-width) / 2),
+    var(--transparent-color) 0
+  );
 }
-.test-button::before,
-.step-expanded_status_passed::before,
-.step-expanded_status_failed::before {
-  margin: 0 auto;
-  width: 16px;
-  height: 16px;
+.test-link[data-status='unknown']::before {
+  content: '?';
   display: flex;
   justify-content: center;
   align-items: center;
-  flex-shrink: 0;
-  border-radius: 24px;
-  font-size: 15px;
-  line-height: 16px;
-  font-weight: bold;
-  color: #fff;
-}
-.test-button_status_passed::before,
-.step-expanded_status_passed::before {
-  content: '\2713';
-}
-.test-button_status_unknown::before {
-  content: '\003F';
-}
-.test-button_status_skipped::before {
-  content: '\2212';
-}
-.test-button_status_broken::before {
-  content: '\0021';
-}
-.test-button_status_failed::before,
-.step-expanded_status_failed::before {
-  content: '\00D7';
+  color: var(--unknown-color);
 }
-.test-button_status_passed::before,
-.toolbar__button_status_passed[aria-pressed='false'],
-.color-cell_status_passed,
-.step-expanded_status_passed::before {
+.test-link[data-status='manual']::before {
+  --offset: 0px;
+}
+.test-link[data-status='manual']::before /* ??? */ {
+  color: var(--manual-color);
+  background:
+    linear-gradient(
+      var(--transparent-color) calc(50% - var(--icon-line-width) / 2),
+      currentColor 0 calc(50% + var(--icon-line-width) / 2),
+      var(--transparent-color) 0
+    ),
+    linear-gradient(
+      90deg,
+      var(--transparent-color) calc(50% - var(--icon-line-width) / 2),
+      currentColor 0 calc(50% + var(--icon-line-width) / 2),
+      var(--transparent-color) 0
+    ),
+    linear-gradient(
+        90deg,
+        currentColor calc(var(--icon-line-width) + 8%),
+        var(--transparent-color) 0
+      )
+      0px 60% / 100% 46%,
+    linear-gradient(currentColor calc(var(--icon-line-width) + 8%), var(--transparent-color) 0) 60%
+      0px / 46% 100%;
+  background-repeat: no-repeat;
+  rotate: 45deg;
+}
+.color-cell[data-status='passed'] {
   background-color: var(--passed-color);
 }
-.test-button_status_skipped::before,
-.toolbar__button_status_skipped[aria-pressed='false'],
-.color-cell_status_skipped {
+.color-cell[data-status='manual'] {
+  background-color: var(--manual-color);
+}
+.color-cell[data-status='skipped'] {
   background-color: var(--skipped-color);
 }
-.test-button_status_failed::before,
-.toolbar__button_status_failed[aria-pressed='false'],
-.color-cell_status_failed,
-.step-expanded_status_failed::before {
+.color-cell[data-status='failed'] {
   background-color: var(--failed-color);
 }
-.test-button_status_broken::before,
-.toolbar__button_status_broken[aria-pressed='false'],
-.color-cell_status_broken {
+.color-cell[data-status='broken'] {
   background-color: var(--broken-color);
 }
-.test-button_status_unknown::before,
-.toolbar__button_status_unknown[aria-pressed='false'],
-.color-cell_status_unknown {
+.color-cell[data-status='unknown'] {
   background-color: var(--unknown-color);
 }
-
-/* test-details */
+.retry-link,
+.test-link {
+  min-height: 42px;
+}
 .test-details__path {
-  margin: 10px 0;
-  padding: 0 var(--test-details-padding);
+  margin: 0;
+  padding: var(--test-details-padding);
   font-size: 18px;
   color: var(--subtitle-color);
   overflow-wrap: break-word;
 }
 .test-details__title {
   margin: 0;
-  padding: 0 var(--test-details-padding) var(--test-details-padding);
-  font-size: 24px;
-  line-height: 32px;
+  padding: var(--test-details-padding);
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 400;
   overflow-wrap: break-word;
 }
-.test-details__status {
+.test-details__title .color-cell {
   margin-right: 10px;
   position: relative;
-  font-size: 21px;
+  font-size: 16px;
 }
-
-.toolbar__button {
-  padding: 2px 5px;
-  color: #fff;
-  white-space: nowrap;
-  font-size: 14px;
-  font-weight: bold;
-  border: 1px solid transparent;
-  border-radius: 3px;
-  box-shadow: 1px 1px 1px 0px #828282;
+.drag-container {
+  display: none;
 }
-.toolbar__button[aria-pressed='true'] {
-  background-color: #fff;
-  box-shadow: none;
+.test-error {
+  box-sizing: border-box;
+  margin: 0 var(--test-details-padding);
+  padding: var(--test-details-padding);
+  border: 1px solid #f5c2c0; /* test */
+  border-left: 4px solid var(--failed-line-color);
+  border-radius: var(--main-radius);
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  color: var(--failed-text-color);
+  background-color: var(--failed-status-bg-color);
+}
+.test-error__content {
+  overflow: auto;
+  scrollbar-gutter: stable;
+  white-space: pre;
+  max-width: 100%;
 }
-.toolbar__button_status_unknown[aria-pressed='true'] {
-  color: var(--unknown-color);
-  border-color: var(--unknown-color);
+
+/* ??? */
+.empty {
+  padding: var(--test-details-padding);
 }
-.toolbar__button_status_broken[aria-pressed='true'] {
-  color: var(--broken-color);
-  border-color: var(--broken-color);
+.test-details__retry-title + .empty {
+  padding-top: 0;
 }
-.toolbar__button_status_passed[aria-pressed='true'] {
-  color: var(--passed-color);
-  border-color: var(--passed-color);
+.test-details__retry-title {
+  margin: 0 0 10px 0;
+  padding: 15px var(--test-details-padding) 0;
+  font-size: 20px;
+  font-weight: normal;
 }
-.toolbar__button_status_skipped[aria-pressed='true'] {
-  color: var(--skipped-color);
-  border-color: var(--skipped-color);
+.test-details__retry-title + .test-description {
+  padding-top: 0;
 }
-.toolbar__button_status_failed[aria-pressed='true'] {
-  color: var(--failed-color);
-  border-color: var(--failed-color);
+.test-description {
+  margin: 0 0 15px 0;
+  padding: 15px var(--test-details-padding) 0;
 }
-/* test-tabs */
-.test-tabs {
-  border-bottom: 1px solid var(--border-color);
-  white-space: nowrap;
-  overflow-x: auto;
+.test-description__term {
+  display: inline-block;
+  color: var(--subtitle-color);
 }
-.test-tabs__button {
-  padding: 7px var(--test-details-padding);
-  border: none;
-  font-size: 16px;
-  transition: all 0.3s ease;
+.test-description__term::after {
+  content: ': ';
 }
-.test-tabs__button,
-.test-tabs__button:focus,
-.test-tabs__button:active,
-.test-tabs__button:hover {
-  background-color: #fff;
-  border-bottom: 3px solid #fff;
-}
-.test-tabs__button[aria-selected='true'],
-.test-tabs__button[aria-selected='true']:hover,
-.test-tabs__button[aria-selected='true']:active,
-.test-tabs__button[aria-selected='true']:focus {
-  border-bottom-color: var(--main-color);
-  color: var(--main-color);
-  cursor: default;
+.test-description__definition {
+  margin: 0;
+  display: inline;
+  overflow-wrap: break-word;
 }
-.test-tabs__button[aria-selected='false']:not(:disabled):hover {
-  border-bottom-color: var(--border-color);
-  color: var(--main-color);
+.test-description__definition::after {
+  margin: 0 0 7px 0;
+  display: block;
+  content: '';
 }
-.test-tabs__button:disabled {
-  background-color: var(--main-bg-color);
-  border-color: var(--main-bg-color);
+.test-description__definition .color-cell {
+  font-size: 12px;
+  font-weight: normal;
 }
-.test-tabs__button:disabled:hover {
-  border-color: var(--main-bg-color);
-  cursor: default;
+.test-description__definition .color-cell:not(:last-child) {
+  margin: 0 5px 0 0;
 }
 
-/* .drag-container */
-.drag-container {
-  width: var(--drag-container-width);
-  height: 100%;
-  cursor: ew-resize;
-  background-color: var(--border-color);
-}
-.drag-container::after {
-  margin: -20px 1px 1px;
-  position: relative;
-  top: 50%;
-  content: '';
-  width: calc(100% - 2px);
-  height: 40px;
-  border: 2px dotted #cdcdd0;
-  display: block;
-  box-sizing: border-box;
-}
+.steps-group {
+  /* test */
+  --horizontal-level-offset: clamp(14px, 2.5cqw, 25px);
+  --vertical-level-offset: 10px;
+  --popover-button-width: 30px;
+  --timeline-width: 3px;
+  --timeline-point-diameter: 9px;
+  --timeline-border-radius: 7px;
+  --timeline-top-offset: calc(var(--step-head-padding-top-bottom) + var(--half-line-height));
+  --timeline-left-offset: 15px;
+  --timeline-color: hsl(0 0% 45%);
+  --focus-line-color: hsl(0 0% 64%);
+  --icon-size: 13px;
+  --step-head-margin-right: var(--test-link-margin-left-right, 3px);
+  --step-head-padding-top-bottom: var(--test-link-padding-top-bottom, 8px);
+  --step-head-padding-left-right: var(--test-link-padding-left-right, 10px);
+  --timeline-horizontal-line-width: 20px;
+  --details-open-summary-margin-bottom: 15px;
+  --timeline-border-bottom-left-radius: var(--timeline-border-radius);
+  --timeline-bend-top-left-border-width: 0 0 var(--timeline-width) var(--timeline-width);
+  --timeline-bend-top-right-border-width: var(--timeline-width) var(--timeline-width) 0 0;
+  --timeline-before-box-shadow: 0 calc(-1 * var(--timeline-border-radius)) 0 0
+    var(--primary-bg-color);
 
-/* overview */
-.overview {
-  margin: 0 0 15px 0;
-  padding: 15px 0 0 0;
+  position: relative;
+  padding-left: 0;
+  /* contain: layout paint; */
+  contain: layout paint;
+  overflow: hidden;
+  background: var(--primary-bg-color);
 }
-.overview__title {
-  margin: 0 0 10px 0;
-  padding: 0 var(--test-details-padding);
+.steps-group:not(.steps-group .steps-group) {
+  container-type: inline-size;
 }
+.step {
+  --level: 0;
+  --icon-margin-right: 7px;
+  --arrow-color: hsl(0 0% 32%);
 
-/* status-detail */
-.status-detail {
-  width: 100%;
-  display: flex;
-  overflow: auto;
+  position: relative;
+  box-sizing: border-box;
+  min-height: 38px;
+  padding-left: var(--popover-button-width);
+  padding-bottom: 1px;
+  list-style-type: none;
 }
-.status-detail_status_broken {
-  background-color: var(--broken-bg-color);
+.step__head {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 5px;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 38px;
+  margin: 0 var(--step-head-margin-right) 0 0;
+  padding: var(--step-head-padding-top-bottom) var(--step-head-padding-left-right);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+}
+.test-link,
+.test-link:focus,
+.test-link:active,
+.test-link:hover,
+.step__head {
+  background-color: var(--item-bg-color);
+}
+.step__details > .step__head > .step__name::before {
+  content: '';
+  position: absolute;
+  border-width: 6px 0 6px var(--arrow-width);
+  border-style: solid;
+  border-color: transparent;
+  border-left-color: var(--arrow-color);
+  background: none;
+  transform: translate(
+    calc(-1 * calc(var(--arrow-width) + 5px)),
+    calc(var(--half-line-height) - 50%)
+  );
+  transition: transform 0.3s ease;
+
+  left: 0;
+  top: var(--half-line-height);
+  transform: translate(50%, -50%);
 }
-.status-detail_status_failed {
-  background-color: var(--failed-bg-color);
+.step__details[open] > .step__head > .step__name::before {
+  transform: rotate(90deg) translate(-75%, -25%);
 }
-.status-detail_status_skipped {
-  background-color: var(--skipped-bg-color);
+.step__details > .step__head::-webkit-details-marker,
+.step-attachment__title::-webkit-details-marker {
+  display: none;
 }
-.status-detail_status_unknown {
-  background-color: var(--unknown-bg-color);
+.step-attachment {
+  translate: 0px -10px;
 }
-.status-detail__content {
-  flex-grow: 1;
-  padding: 0 var(--test-details-padding);
+.step-attachment[open]:not(:last-child) {
+  margin-bottom: 10px;
 }
-.status-detail__button {
-  margin: 7px 0;
-  padding: 0 var(--test-details-padding);
-  min-width: 100%;
-  border: none;
-  text-align: left;
+.step-attachment[open]:has(+ .steps-group) {
+  margin-bottom: 0;
 }
-.status-detail__button:hover {
-  background-color: var(--button-hover-bg-color);
+.step-attachment__title {
+  padding: 3px 7px;
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+  border-radius: var(--main-radius);
+  font-size: 12px;
+  cursor: pointer;
 }
-.status-detail__button-text {
-  padding: 10px 0;
-  width: 100%;
+.step-attachment__title::before {
+  content: '';
   display: block;
-  white-space: pre-wrap;
+  width: 7px;
+  height: 7px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--font-color);
+  border-top: 1px solid var(--font-color);
+  background: none;
+  scale: 0.8;
+  transform: rotate(45deg);
+  transition: transform 0.3s ease;
 }
-.status-detail__panel {
-  margin: 0;
-  padding: var(--test-details-padding);
-  display: none;
-  border-top: 1px solid var(--border-color);
-  white-space: pre;
+.step-attachment[open] > .step-attachment__title::before {
+  transform: rotate(135deg) translateX(-50%);
 }
-.status-detail__button[aria-expanded='true'] + .status-detail__panel {
-  display: block;
+.step__code {
+  margin: 0 var(--step-head-margin-right) 0 0;
+  padding: 10px var(--test-details-padding);
+  box-sizing: border-box;
+  border-radius: var(--main-radius);
+  background-color: var(--step-panel-bg-color);
+  overflow: auto;
 }
-
-.test-details-empty {
-  padding: var(--test-details-padding);
-  text-align: center;
+.step__name {
+  overflow-wrap: break-word;
+  overflow: hidden;
 }
-.overview .test-details-empty {
-  padding-top: 0;
+.step__name {
+  --arrow-width: 7px;
+
+  position: relative;
+  margin: 0;
+  grid-column: 1/-1;
+  grid-row: 2;
+  font-weight: normal;
   text-align: left;
 }
-.test-description {
-  margin: 0;
-  padding: 0 var(--test-details-padding);
+.step__details > .step__head > .step__name {
+  padding-left: calc(var(--arrow-width) + 8px);
 }
-.test-description_type_meta {
-  margin-bottom: 15px;
-  padding-top: 15px;
+.step__duration {
+  text-align: right;
+  color: var(--subtitle-color);
 }
-.test-description__term {
-  display: inline-block;
-  color: #5d5b5b;
+.step::after,
+.step__popover-button::after {
+  content: '';
+  position: absolute;
+  border-style: solid;
 }
-.test-description__term::after {
-  content: ': ';
+.step::after,
+.step__head::after,
+.step__popover-button::after {
+  border-color: var(--timeline-color);
 }
-.test-description_type_meta .test-description__term {
-  color: var(--font-color);
+.step__details[open] > .step__head {
+  margin-bottom: var(--details-open-summary-margin-bottom);
 }
-.test-description__definition {
-  margin: 0 0 0 4px;
-  display: inline;
-  overflow-wrap: break-word;
+.step__popover-button::after {
+  top: var(--timeline-top-offset);
+  display: flex;
+  box-sizing: border-box;
+  aspect-ratio: 1;
+  width: var(--timeline-point-diameter);
+  border-width: 1px;
+  border-radius: 50%;
+  background-color: var(--primary-bg-color);
+  transform: translate(calc(var(--timeline-left-offset) + (var(--timeline-width) / 2) - 50%), -50%);
+}
+.step::after,
+.step::before,
+.step__head::after {
+  left: var(--timeline-left-offset);
+}
+.step::after {
+  top: var(--timeline-top-offset);
+  bottom: calc(-1 * var(--timeline-top-offset));
+  z-index: -1;
+  box-sizing: border-box;
+  width: calc(var(--timeline-horizontal-line-width) + var(--timeline-width));
+  margin-top: 0;
+  margin-right: 0;
+  border-width: 1px 0 0 var(--timeline-width);
 }
-.test-description__definition:after {
-  margin: 0 0 7px 0;
-  display: block;
-  content: '';
+.step:last-child:not(.steps-group .steps-group > .step)::after {
+  display: none;
 }
-.test-description__definition .color-cell {
-  font-size: 12px;
-  font-weight: normal;
+.test-link[data-status="failed"]::after,
+.test-link[data-status="unknown"]::after,
+.step[data-status="failed"]::after,
+.step[data-status="failed"] > .step__popover-button::after,
+.steps-group:has(> .step:last-child[data-status="failed"])::after/* ?? */ {
+  border-color: var(--failed-line-color);
 }
-.test-description__definition .color-cell:not(:last-child) {
-  margin: 0 5px 0 0;
+.step__popover-button:hover,
+.step:has(> .step__popover-button:hover)::after,
+.step:has(> .step__popover-button:hover) > .step__details,
+.steps-group:has(> .step:last-child > .step__popover-button:hover)::after /* ??? */ {
+  --timeline-color: hsl(120 100% 30%);
+  --failed-line-color: hsl(0 100% 46%);
 }
 
-/* .step-expanded */
-.step-expanded[aria-expanded='true'] {
-  box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
+/* test */
+.column-2 .empty {
+  display: none;
+}
+
+.tests-group {
+  --test-link-margin-left-right: 3px;
+  --test-link-padding-top-bottom: 8px;
+  --test-link-padding-left-right: var(--retry-padding, 10px);
+  --icon-margin-right: 7px;
+  --icon-size: 15px;
+  --line-width: 1px;
+  --test-link-half-icon-width: calc((var(--icon-size) - var(--line-width)) / 2);
+  --test-link-half-icon-width: round(calc((var(--icon-size) - var(--line-width)) / 2), 1px);
+  --tests-group-line-color: hsl(0 0% 64%);
+  --horizontal-line-to-icon-width: calc(
+    var(--test-link-padding-left-right) + var(--test-link-margin-left-right) + var(--line-width)
+  );
+  --tests-group-open-margin-bottom: 5px;
+
   position: relative;
-  z-index: 1;
+  overflow: hidden;
+  contain: layout paint;
+  display: flex;
+  flex-direction: column;
+  margin-left: calc(var(--retry-padding) + var(--line-width));
 }
-.step-expanded_type_inner[aria-expanded='true'] {
-  position: sticky;
+.tests-group::after,
+.tests-group > .test-link::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  width: var(--horizontal-line-to-icon-width);
+}
+.tests-group::after {
   top: 0;
-  z-index: 0;
+  bottom: 0;
+  z-index: 100;
 }
-.step-expanded {
-  padding: 7px var(--test-details-padding);
-  width: 100%;
-  display: flex;
-  gap: 8px;
-  border: none;
+.tests-group > .test-link::after {
+  --translate-y: calc(100% - var(--half-line-height));
+  width: calc(var(--horizontal-line-to-icon-width) - 2px);
+}
+.test-link::after {
+  height: 100%;
+  box-sizing: border-box;
+  border-width: 1px var(--line-width) 0 0;
+  border-style: solid;
+  border-color: var(--tests-group-line-color);
+  transform: rotate(180deg) translate(0, var(--translate-y));
+  z-index: 3;
+}
+.test-link:last-child::after {
+  border-top-right-radius: var(--main-radius);
+}
+.test-link[data-status='failed']::after,
+.test-link[data-status='unknown']::after {
+  z-index: 50;
+}
+.test-link {
+  margin: 0 var(--test-link-margin-left-right) 0
+    calc(var(--test-link-margin-left-right) + var(--line-width));
+  padding: var(--test-link-padding-top-bottom, 8px) var(--test-link-padding-left-right, 10px);
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 5px;
+  font-size: var(--font-size);
+  line-height: var(--line-height);
   align-items: flex-start;
-  font-size: 14px;
   color: var(--font-color);
+  box-sizing: border-box;
+  text-decoration: none;
 }
-.step-expanded.step-expanded_is-empty {
+.test-link {
+  container-type: inline-size;
+  margin-bottom: 1px;
+  /* flex-wrap: wrap; /* todo */
+}
+.test-link:visited {
+  color: currentColor;
+}
+.test-link[aria-current='true'] {
+  --box-shadow-width: 1px;
+
+  box-shadow: 0 0 0 var(--box-shadow-width) var(--drag-container-bg-color) inset;
   cursor: default;
 }
-.step-expanded_type_inner {
-  padding: 7px calc(var(--test-details-padding) * 2);
-  transition: top 0.2s linear;
-  align-items: center;
+.test-link[data-status='failed'],
+.test-link[data-status='unknown'],
+.step[data-status='failed'] > .step__head,
+.step[data-status='failed'] > .step__details > .step__head {
+  background-color: var(--failed-status-bg-color);
 }
-.step-expanded {
-  border-bottom: 1px solid var(--border-color);
+.step > .step__details > .step__head:hover,
+.step-attachment__title:hover,
+.test-link:hover:not([aria-current='true']) {
+  background-color: var(--item-hover-bg-color);
 }
-.step-expanded.step-expanded_type_inner[aria-expanded='true'] {
-  border-bottom: none;
+.step__details > .step__head {
+  cursor: pointer;
 }
-.step-expanded,
-.step-expanded:focus,
-.step-expanded:active {
-  background-color: var(--button-bg-color);
+
+.step__screenshot-button,
+.screenshot-dialog__close {
+  --transition-outline-offset: outline-offset 0.05s linear, box-shadow 0.15s ease-in;
 }
-.step-expanded:hover {
-  border-bottom: 1px solid var(--border-color);
-  background-color: var(--button-hover-bg-color);
+.step__screenshot-button {
+  all: unset;
+  display: inline-block;
+  max-width: 100%;
+  margin: 0 2px;
+  padding: 2px;
+  overflow: hidden;
+  border-radius: var(--main-radius);
+  line-height: 0;
+  color: var(--font-color);
+  outline: 2px solid transparent;
+  cursor: pointer;
 }
-.step-expanded::after,
-.step-expanded_type_inner::before {
-  margin-top: 4px;
-  content: '';
+.step__screenshot-button > img {
   display: block;
-  width: 6px;
-  height: 6px;
-  flex-shrink: 0;
-  border-right: 2px solid var(--font-color);
-  border-top: 2px solid var(--font-color);
-  background: none;
-  transition: transform 0.3s ease-in-out;
+  max-width: 100%;
+}
+.step__screenshot-button:hover,
+.screenshot-dialog__close:hover {
+  box-shadow: 0 0 0 1px currentColor;
 }
+.step__details > .step__head,
+.step-attachment__title {
+  --margin-bottom: 5px;
 
-.step-expanded::after {
-  margin-right: 3px;
-  transform: translate(0, -25%) rotate(135deg);
+  transition:
+    margin-bottom 0.1s ease-in,
+    var(--transition-outline-offset);
 }
-.step-expanded_type_inner::before {
-  margin-top: 0;
-  transform: rotate(45deg);
+.step-attachment[open] > .step-attachment__title {
+  margin-bottom: var(--margin-bottom);
 }
-.step-expanded_type_inner::after {
-  display: none;
+.step__head::before,
+.test-link::before {
+  margin-right: var(--icon-margin-right);
+  position: relative;
+  top: calc(var(--half-line-height) - var(--icon-size-without-offset) / 2);
 }
-.step-expanded-panel {
-  margin: 0;
-  display: none;
-  box-sizing: border-box;
+.test-link:hover::before,
+.step__details > .step__head:hover::before,
+.screenshot-dialog__close:hover::before {
+  transform: scale(1.25);
 }
-.step-expanded[aria-expanded='true'] + .step-expanded-panel {
-  display: block;
+.test-link__duration {
+  text-align: right;
+  color: var(--subtitle-color);
+  overflow: hidden;
+  overflow-wrap: break-word;
+}
+.test-link__name {
+  grid-row: 2;
+  grid-column: 1/-1;
+  overflow-wrap: break-word;
+  overflow: hidden;
 }
-.step-expanded-panel > pre {
-  margin: 0 0 6px 0;
+.test-link__main-params {
+  font-family: monospace;
+  overflow-wrap: initial;
+  color: var(--main-params-color);
 }
-.step-expanded[aria-expanded='true']::after {
-  transform: translate(0, 25%) rotate(-45deg);
+.test-link__main-params::after {
+  content: '  ';
+  white-space: pre;
 }
-.step-expanded_type_inner[aria-expanded='true']::before {
-  transform: rotate(135deg) translateX(-50%);
+.screenshot-dialog {
+  --padding: 10px;
+  --close-button-width: 38px;
+
+  max-width: 90vw;
+  max-height: 90vh;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  border-radius: var(--main-radius);
+  background: var(--secondary-bg-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
-.step-expanded__content {
+.screenshot-dialog[open] {
+  display: flex;
+  flex-direction: column;
+}
+.screenshot-dialog > h2 {
+  min-height: var(--close-button-width);
   margin: 0;
+  padding: var(--padding) calc(var(--close-button-width) + 2 * var(--padding)) var(--padding)
+    var(--padding);
+  border-bottom: 1px solid var(--drag-container-bg-color);
   white-space: nowrap;
-  text-overflow: ellipsis;
   overflow: hidden;
+  color: var(--font-color);
+  font-weight: normal;
+  line-height: var(--close-button-width);
+  text-overflow: ellipsis;
 }
-.step__panel {
-  width: 100%;
-  padding: 10px var(--test-details-padding);
+.screenshot-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+}
+.screenshot-dialog__main {
+  padding: var(--padding);
+  overflow-y: auto;
+  text-align: center;
+}
+.screenshot-dialog__close {
+  position: absolute;
+  top: var(--padding);
+  right: var(--padding);
+  border: none;
+  width: var(--close-button-width);
+  aspect-ratio: 1;
+  border-radius: 3px;
+  color: var(--font-color);
+}
+.screenshot-dialog__close::before {
+  transition: transform 0.15s ease-in;
+}
+.step__screenshot-button:hover,
+.screenshot-dialog__close:hover {
+  box-shadow: 0 0 0 1px currentColor;
+}
+.screenshot-dialog__close::before {
+  --icon-line-width: 2px;
+
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 18px;
+  aspect-ratio: 1;
+  background-image:
+    linear-gradient(
+      45deg,
+      var(--transparent-color) calc(50% - var(--icon-line-width) / 2),
+      currentColor 0 calc(50% + var(--icon-line-width) / 2),
+      var(--transparent-color) 0
+    ),
+    linear-gradient(
+      135deg,
+      var(--transparent-color) calc(50% - var(--icon-line-width) / 2),
+      currentColor 0 calc(50% + var(--icon-line-width) / 2),
+      var(--transparent-color) 0
+    );
+  translate: -50% -50%;
+}
+dialog > img {
+  width: auto;
+  height: auto;
+  display: block;
+}
+
+/* test */
+[popover] {
+  border: none;
+  margin-inline: auto;
+  inset-inline: 0;
+  inset-block-start: 50%;
+  transform: translateY(-200%);
+  padding: 10px 40px;
+  background-color: #ffffff;
+  color: #000000;
+}
+.step__popover-button {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 5;
+  width: var(--popover-button-width);
+  padding: 0;
+  border: none;
+  border-radius: var(--main-radius);
+  background: none;
+  translate: -100% 0;
+}
+.step__popover-button:focus,
+.step__popover-button:active,
+.step__popover-button:hover {
   box-sizing: border-box;
+  cursor: pointer;
+  background-color: transparent;
+  background: none;
+  outline: none;
+}
+.main {
+  contain: layout;
+  container-type: inline-size;
+}
+@container (min-width: 550px) {
+  .column-2 {
+    width: 350px;
+  }
+}
+@container (min-width: 1000px) {
+  .column-2 {
+    width: 650px;
+  }
+}
+@container (min-width: 350px) {
+  .test-link__name,
+  .step__name {
+    grid-column: 2;
+    grid-row: 1;
+  }
+}
+
+button,
+.step__details > .step__head,
+.step-attachment__title,
+.step__popover-button:focus-visible {
+  --transition-outline-offset: outline-offset 0.05s linear;
+
+  outline: 2px solid transparent;
+  transition: var(--transition-outline-offset);
+}
+button:focus-visible,
+.step__details > .step__head:focus-visible,
+.step-attachment__title:focus-visible,
+.step__popover-button:focus-visible {
+  outline-color: var(--accent-color);
+  outline-offset: -2px;
+}
+
+/*
+.status-detail /* todo / {
+  width: 100%;
+  display: flex;
   overflow: auto;
-  background-color: var(--step-panel-bg-color);
 }
-.step-expanded__name {
-  text-align: left;
-  overflow-wrap: break-word;
-  overflow: hidden;
-  user-select: text;
+.status-detail_status_failed {
+  background-color: var(--failed-status-bg-color); /* ??? /
 }
-.step-expanded__time {
+.status-detail__content {
   flex-grow: 1;
-  text-align: right;
-  color: var(--subtitle-color);
-  user-select: text;
+  padding: 0 var(--test-details-padding);
 }
+.status-detail__button-text {
+  padding: 10px 0;
+  width: 100%;
+  display: block;
+  white-space: pre-wrap;
+}
+.test-details-empty /* check if this block is needed / {
+  padding: var(--test-details-padding);
+  text-align: center;
+}
+*/
 
-@media (max-width: 1366px) {
-  .nav {
-    width: 75px;
+@media (min-width: 390px) {
+  .main {
+    flex-direction: row;
   }
-  .nav-tabs__button {
-    padding: 10px;
-    font-size: 14px;
+  .column-3 {
+    max-height: 100vh;
+    /* position: sticky; */
+    /* will-change: transform; */
+    /* position: sticky; */
+    will-change: transform;
+    top: 0px;
+    flex: 1 0 180px;
+    overflow-y: scroll;
   }
-  .toolbar__group::-webkit-scrollbar,
-  .test-tabs::-webkit-scrollbar {
-    display: none;
+  .drag-container {
+    position: relative;
+    display: block;
+    width: var(--drag-container-width);
+    height: 100%;
+    cursor: ew-resize;
+    background-color: var(--drag-container-bg-color);
+    border-radius: var(--main-radius);
+    flex-shrink: 0;
   }
-  .retry .__title {
-    margin: 10px 0 7px;
+  .drag-container::after {
+    content: '';
+    width: 2px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    translate: -50% 0;
   }
-  .toolbar__group {
-    gap: 8px;
+  .drag-container:hover::after {
+    background-color: var(--font-color); /* var(--arrow-color) */
   }
-  .toolbar__button {
-    padding: 10px 10px;
-    min-width: 38px;
-    min-height: 38px;
+  .test-link[aria-current='true'] {
+    --offset: calc(-1 * (var(--box-shadow-width) + 1px));
+
+    margin-right: var(--offset);
+    padding-right: calc(
+      var(--test-link-padding-left-right) + var(--test-link-margin-left-right) - var(--offset)
+    );
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
   }
-  .test-button {
-    padding: 13px 10px;
+  .test-details__title {
+    font-size: 24px;
+    line-height: 32px;
   }
-  .nav-tabs__button,
-  .test-button,
-  .test-tabs__button,
-  .step-expanded_type_inner {
-    min-height: 42px;
+  .test-details__title .color-cell {
+    font-size: 21px;
   }
 }
-@media (max-width: 768px) {
+
+@media (min-width: 576px) {
+  .test-list {
+    margin-left: var(--retry-padding); /* 10px; ??? check in other screen resolutions */
+  }
+}
+@media (min-width: 769px) {
   body {
-    min-height: 100vh;
-    height: auto;
-    grid-template-columns: 1fr;
+    grid-template-areas: 'header header' 'column-1 main';
+    grid-template-columns: auto 1fr;
     grid-template-rows: auto 1fr;
   }
   .header {
-    margin-bottom: 0;
+    padding: 15px;
+    grid-column-start: 1;
+    grid-column-end: 3;
+    height: var(--header-height);
   }
-  .logo {
-    width: 100px;
+  .column-1 {
+    position: sticky;
+    top: 0px;
+    padding-bottom: 25px;
+    width: 120px;
+    max-height: 100vh;
+    overflow-y: scroll;
   }
-  .nav {
-    width: 100vw;
-    overflow: hidden;
+  .retry-links,
+  .test-details {
+    margin-bottom: var(--header-height);
   }
-  .nav-tabs {
-    max-width: 100vw;
-    flex-direction: row;
-    scrollbar-width: none;
-    overflow-x: scroll;
-  }
-  .nav-tabs::-webkit-scrollbar {
-    display: none;
-  }
-  .nav-tabs__button,
-  .nav-tabs__button:focus,
-  .nav-tabs__button:active,
-  .nav-tabs__button:hover {
-    border-bottom: 3px solid var(--nav-bg-color);
-  }
-  .nav-tabs__button[aria-selected='true'],
-  .nav-tabs__button[aria-selected='true']:hover,
-  .nav-tabs__button[aria-selected='true']:active,
-  .nav-tabs__button[aria-selected='true']:focus {
-    border-right: none;
-    border-bottom-color: #64b5f6;
-  }
-  .test-details__title {
-    font-size: 18px;
-    line-height: 24px;
-  }
-  .test-details__status {
-    font-size: 16px;
-  }
-  .main {
+  .retry-links {
+    max-width: 100%;
     flex-direction: column;
-  }
-  .main__section._position_left,
-  .main__section._position_right {
-    width: 100%;
-    height: auto;
-  }
-  .drag-container {
-    display: none;
+    overflow-x: hidden;
   }
 }
-@media (max-width: 360px) {
-  .test-button {
-    flex-wrap: wrap;
-  }
-  .test-button__name {
-    width: 100%;
-    order: 5;
-  }
-  .test-button__time {
-    order: 4;
+@media (min-width: 1367px) {
+  .retry-link,
+  .test-link {
+    min-height: auto;
   }
 }

From 4d18bdf39e06400ac4a9e545d21498e1b03c1829 Mon Sep 17 00:00:00 2001
From: uid11 <uid.11222@gmail.com>
Date: Wed, 8 Oct 2025 05:35:24 +0300
Subject: [PATCH 3/3] PRO-13138 feat: group steps in HTML report

chore: update Playwright to 1.56
chore: update TypeScript to 5.9.3
---
 autotests/packs/allTests.ts                   |   2 +-
 .../E2edReportExample/E2edReportExample.ts    |   2 +-
 package-lock.json                             |  70 +-
 package.json                                  |   8 +-
 src/types/events.ts                           |   5 +
 src/types/index.ts                            |   2 +-
 src/types/internal.ts                         |   2 +-
 src/utils/getDurationWithUnits.ts             |   4 +-
 src/utils/report/client/addOnClickOnClass.ts  |   7 +-
 src/utils/report/client/chooseTestRun.tsx     |   2 +-
 src/utils/report/client/clickOnRetry.ts       |   6 +-
 src/utils/report/client/clickOnScreenshot.ts  |  32 +
 src/utils/report/client/clickOnStep.ts        |   4 +-
 src/utils/report/client/clickOnTestRun.ts     |   4 +-
 src/utils/report/client/groupLogEvents.ts     |  49 ++
 src/utils/report/client/index.ts              |   4 +
 src/utils/report/client/initialScript.ts      |   7 +-
 .../client/onFirstJsonReportDataLoad.ts       |   4 +-
 .../report/client/render/ApiStatistics.tsx    |   4 +-
 .../client/render/ApiStatisticsItem.tsx       |  17 +-
 src/utils/report/client/render/Screenshot.tsx |  10 +-
 src/utils/report/client/render/Step.tsx       |  61 +-
 .../report/client/render/StepContent.tsx      |  16 +-
 src/utils/report/client/render/Steps.tsx      |  25 +-
 .../report/client/render/TestRunDetails.tsx   |   7 +-
 src/utils/report/render/Errors.tsx            |   2 +-
 src/utils/report/render/HtmlReport.tsx        |   6 +-
 src/utils/report/render/Metadata.tsx          |  26 +-
 src/utils/report/render/Retries.tsx           |   2 +-
 src/utils/report/render/Retry.tsx             |   7 +-
 src/utils/report/render/RetryButton.tsx       |   1 +
 src/utils/report/render/ScreenshotDialog.tsx  |  17 +
 src/utils/report/render/Script.tsx            |   2 +-
 src/utils/report/render/ScriptFunctions.tsx   |   2 +-
 src/utils/report/render/TestRunButton.tsx     |   2 +
 src/utils/report/render/Warnings.tsx          |   2 +-
 styles/report.css                             | 614 +++++++++++++-----
 37 files changed, 767 insertions(+), 270 deletions(-)
 create mode 100644 src/utils/report/client/clickOnScreenshot.ts
 create mode 100644 src/utils/report/client/groupLogEvents.ts
 create mode 100644 src/utils/report/render/ScreenshotDialog.tsx

diff --git a/autotests/packs/allTests.ts b/autotests/packs/allTests.ts
index 69d88c5f..2350c0e3 100644
--- a/autotests/packs/allTests.ts
+++ b/autotests/packs/allTests.ts
@@ -80,7 +80,7 @@ export const pack: Pack = {
   skipTests,
   takeFullPageScreenshotOnError: false,
   takeViewportScreenshotOnError: true,
-  testFileGlobs: ['**/autotests/tests/**/exists.ts'],
+  testFileGlobs: ['**/autotests/tests/**/*.ts'],
   testIdleTimeout: 8_000,
   testTimeout: 15_000,
   userAgent,
diff --git a/autotests/pageObjects/pages/E2edReportExample/E2edReportExample.ts b/autotests/pageObjects/pages/E2edReportExample/E2edReportExample.ts
index 1a0929b7..7d1a4a0c 100644
--- a/autotests/pageObjects/pages/E2edReportExample/E2edReportExample.ts
+++ b/autotests/pageObjects/pages/E2edReportExample/E2edReportExample.ts
@@ -65,7 +65,7 @@ export class E2edReportExample extends Page<CustomPageParams> {
    * List of test runs of retry.
    */
   get testRunsList(): Selector {
-    return locator('column-2');
+    return locator('column1');
   }
 
   /**
diff --git a/package-lock.json b/package-lock.json
index f3812774..92f35f6e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.20.14",
       "license": "MIT",
       "dependencies": {
-        "@playwright/test": "1.55.0",
+        "@playwright/test": "1.56.0",
         "create-locator": "0.0.27",
         "get-modules-graph": "0.0.11",
         "sort-json-keys": "1.0.3"
@@ -20,8 +20,8 @@
         "e2ed-install-browsers": "bin/installBrowsers.js"
       },
       "devDependencies": {
-        "@playwright/browser-chromium": "1.55.0",
-        "@types/node": "24.3.0",
+        "@playwright/browser-chromium": "1.56.0",
+        "@types/node": "24.7.0",
         "@typescript-eslint/eslint-plugin": "7.18.0",
         "@typescript-eslint/parser": "7.18.0",
         "assert-modules-support-case-insensitive-fs": "1.0.1",
@@ -34,7 +34,7 @@
         "eslint-plugin-typescript-sort-keys": "3.3.0",
         "husky": "9.1.7",
         "prettier": "3.6.2",
-        "typescript": "5.9.2"
+        "typescript": "5.9.3"
       },
       "engines": {
         "node": ">=22.14.0"
@@ -183,26 +183,26 @@
       }
     },
     "node_modules/@playwright/browser-chromium": {
-      "version": "1.55.0",
-      "resolved": "https://registry.npmjs.org/@playwright/browser-chromium/-/browser-chromium-1.55.0.tgz",
-      "integrity": "sha512-HxG0+6v8NGLFLYMxrGb4T4DAmKwwx6C0V3uIn/i91tOVqcNnaBBllhpxLEqXCnxjprL3HDDMXsVPjk1/vsCVAw==",
+      "version": "1.56.0",
+      "resolved": "https://registry.npmjs.org/@playwright/browser-chromium/-/browser-chromium-1.56.0.tgz",
+      "integrity": "sha512-+OABx0PwbzoWXO5qOmonvQlIZq0u89XpDkRYf+ZTOs+wsI3r/NV90rzGr8nsJZTj7o10tdPMmuGmZ3OKP9ag4Q==",
       "dev": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.55.0"
+        "playwright-core": "1.56.0"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.55.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.55.0.tgz",
-      "integrity": "sha512-04IXzPwHrW69XusN/SIdDdKZBzMfOT9UNT/YiJit/xpy2VuAoB8NHc8Aplb96zsWDddLnbkPL3TsmrS04ZU2xQ==",
+      "version": "1.56.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.0.tgz",
+      "integrity": "sha512-Tzh95Twig7hUwwNe381/K3PggZBZblKUe2wv25oIpzWLr6Z0m4KgV1ZVIjnR6GM9ANEqjZD7XsZEa6JL/7YEgg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.55.0"
+        "playwright": "1.56.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -231,13 +231,13 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "24.3.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.3.0.tgz",
-      "integrity": "sha512-aPTXCrfwnDLj4VvXrm+UUCQjNEvJgNA8s5F1cvwQU+3KNltTOkBm1j30uNLyqqPNe7gE3KFzImYoZEfLhp4Yow==",
+      "version": "24.7.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.7.0.tgz",
+      "integrity": "sha512-IbKooQVqUBrlzWTi79E8Fw78l8k1RNtlDDNWsFZs7XonuQSJ8oNYfEeclhprUldXISRMLzBpILuKgPlIxm+/Yw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~7.10.0"
+        "undici-types": "~7.14.0"
       }
     },
     "node_modules/@types/semver": {
@@ -871,9 +871,9 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3035,12 +3035,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.55.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.0.tgz",
-      "integrity": "sha512-sdCWStblvV1YU909Xqx0DhOjPZE4/5lJsIS84IfN9dAZfcl/CIZ5O8l3o0j7hPMjDvqoTF8ZUcc+i/GL5erstA==",
+      "version": "1.56.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.0.tgz",
+      "integrity": "sha512-X5Q1b8lOdWIE4KAoHpW3SE8HvUB+ZZsUoN64ZhjnN8dOb1UpujxBtENGiZFE+9F/yhzJwYa+ca3u43FeLbboHA==",
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.55.0"
+        "playwright-core": "1.56.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -3053,9 +3053,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.55.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.0.tgz",
-      "integrity": "sha512-GvZs4vU3U5ro2nZpeiwyb0zuFaqb9sUiAJuyrWpcGouD8y9/HLgGbNRjIph7zU9D3hnPaisMl9zG9CgFi/biIg==",
+      "version": "1.56.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.0.tgz",
+      "integrity": "sha512-1SXl7pMfemAMSDn5rkPeZljxOCYAmQnYLBTExuh6E8USHXGSX3dx6lYZN/xPpTz1vimXmPA9CDnILvmJaB8aSQ==",
       "license": "Apache-2.0",
       "bin": {
         "playwright-core": "cli.js"
@@ -3287,9 +3287,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -3762,9 +3762,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.9.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
-      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -3795,9 +3795,9 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "7.10.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz",
-      "integrity": "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==",
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.14.0.tgz",
+      "integrity": "sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA==",
       "dev": true,
       "license": "MIT"
     },
diff --git a/package.json b/package.json
index d82eecea..536eb966 100644
--- a/package.json
+++ b/package.json
@@ -25,14 +25,14 @@
     "url": "git+https://github.com/joomcode/e2ed.git"
   },
   "dependencies": {
-    "@playwright/test": "1.55.0",
+    "@playwright/test": "1.56.0",
     "create-locator": "0.0.27",
     "get-modules-graph": "0.0.11",
     "sort-json-keys": "1.0.3"
   },
   "devDependencies": {
-    "@playwright/browser-chromium": "1.55.0",
-    "@types/node": "24.3.0",
+    "@playwright/browser-chromium": "1.56.0",
+    "@types/node": "24.7.0",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
     "assert-modules-support-case-insensitive-fs": "1.0.1",
@@ -45,7 +45,7 @@
     "eslint-plugin-typescript-sort-keys": "3.3.0",
     "husky": "9.1.7",
     "prettier": "3.6.2",
-    "typescript": "5.9.2"
+    "typescript": "5.9.3"
   },
   "peerDependencies": {
     "@types/node": ">=20",
diff --git a/src/types/events.ts b/src/types/events.ts
index b4b88150..5601dfaa 100644
--- a/src/types/events.ts
+++ b/src/types/events.ts
@@ -19,6 +19,11 @@ export type LogEvent = Readonly<{
   type: LogEventType;
 }>;
 
+/**
+ * Log event with children (for groupping of `TestRun` steps).
+ */
+export type LogEventWithChildren = LogEvent & Readonly<{children: readonly LogEventWithChildren[]}>;
+
 /**
  * EndTestRun event (on closing test).
  * @internal
diff --git a/src/types/index.ts b/src/types/index.ts
index d9cdaf3b..0965e5ef 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -16,7 +16,7 @@ export type {ConsoleMessage, ConsoleMessageType} from './console';
 export type {UtcTimeInMs} from './date';
 export type {DeepMutable, DeepPartial, DeepReadonly, DeepRequired} from './deep';
 export type {E2edPrintedFields, JsError} from './errors';
-export type {LogEvent, Onlog, TestRunEvent} from './events';
+export type {LogEvent, LogEventWithChildren, Onlog, TestRunEvent} from './events';
 export type {Fn, MergeFunctions} from './fn';
 export type {
   FullMocksConfig,
diff --git a/src/types/internal.ts b/src/types/internal.ts
index a896da50..6f3eba03 100644
--- a/src/types/internal.ts
+++ b/src/types/internal.ts
@@ -31,7 +31,7 @@ export type {E2edEnvironment} from './environment';
 export type {E2edPrintedFields, JsError} from './errors';
 /** @internal */
 export type {GlobalErrorType, MaybeWithIsTestRunBroken} from './errors';
-export type {LogEvent, Onlog, TestRunEvent} from './events';
+export type {LogEvent, LogEventWithChildren, Onlog, TestRunEvent} from './events';
 /** @internal */
 export type {EndTestRunEvent, FullEventsData} from './events';
 export type {Fn, MergeFunctions} from './fn';
diff --git a/src/utils/getDurationWithUnits.ts b/src/utils/getDurationWithUnits.ts
index c6a17d64..4ced581e 100644
--- a/src/utils/getDurationWithUnits.ts
+++ b/src/utils/getDurationWithUnits.ts
@@ -4,7 +4,7 @@
  * Should be a pure function without dependencies in the form of a function declaration,
  * because it is used in the JS client code of HTML report.
  */
-export function getDurationWithUnits(durationInMs: number): string {
+export const getDurationWithUnits = (durationInMs: number): string => {
   const msInSecond = 1_000;
   const timeMultiplicator = 60;
 
@@ -37,4 +37,4 @@ export function getDurationWithUnits(durationInMs: number): string {
   }
 
   return parts.slice(0, 2).join(' ') || '0ms';
-}
+};
diff --git a/src/utils/report/client/addOnClickOnClass.ts b/src/utils/report/client/addOnClickOnClass.ts
index c990ef41..4ebfefaf 100644
--- a/src/utils/report/client/addOnClickOnClass.ts
+++ b/src/utils/report/client/addOnClickOnClass.ts
@@ -7,7 +7,10 @@ declare const reportClientState: ReportClientState;
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function addOnClickOnClass(className: string, onclick: (event: HTMLElement) => void): void {
+export const addOnClickOnClass = (
+  className: string,
+  onclick: (element: HTMLElement) => void,
+): void => {
   let {clickListeners} = reportClientState;
 
   if (!clickListeners) {
@@ -34,4 +37,4 @@ export function addOnClickOnClass(className: string, onclick: (event: HTMLElemen
   }
 
   clickListeners[className] = onclick;
-}
+};
diff --git a/src/utils/report/client/chooseTestRun.tsx b/src/utils/report/client/chooseTestRun.tsx
index 6c7a01b9..09b20317 100644
--- a/src/utils/report/client/chooseTestRun.tsx
+++ b/src/utils/report/client/chooseTestRun.tsx
@@ -50,7 +50,7 @@ export function chooseTestRun(runHash: RunHash): void {
 
   if (
     !(previousHash in testRunDetailsElementsByHash) &&
-    !previousTestRunDetailsElement.classList.contains('test-details-empty')
+    !previousTestRunDetailsElement.classList.contains('empty-state')
   ) {
     testRunDetailsElementsByHash[previousHash] = previousTestRunDetailsElement;
   }
diff --git a/src/utils/report/client/clickOnRetry.ts b/src/utils/report/client/clickOnRetry.ts
index 460284cd..2cb02e8d 100644
--- a/src/utils/report/client/clickOnRetry.ts
+++ b/src/utils/report/client/clickOnRetry.ts
@@ -3,8 +3,8 @@
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function clickOnRetry(element: HTMLElement): void {
-  const chosenRetryId = element.getAttribute('aria-controls');
+export const clickOnRetry = (element: HTMLElement): void => {
+  const chosenRetryId = element.dataset['retry'];
   const retry = Number(chosenRetryId?.match(/\d+/)?.[0]);
   const allRetryElements: NodeListOf<HTMLElement> = document.querySelectorAll('.retry');
 
@@ -26,4 +26,4 @@ export function clickOnRetry(element: HTMLElement): void {
   if (leftSection) {
     leftSection.ariaLabel = `Retry ${retry}`;
   }
-}
+};
diff --git a/src/utils/report/client/clickOnScreenshot.ts b/src/utils/report/client/clickOnScreenshot.ts
new file mode 100644
index 00000000..d61c5c3a
--- /dev/null
+++ b/src/utils/report/client/clickOnScreenshot.ts
@@ -0,0 +1,32 @@
+/**
+ * Handler for click on screenshot in step details.
+ * This base client function should not use scope variables (except other base functions).
+ * @internal
+ */
+export const clickOnScreenshot = (element: HTMLElement): void => {
+  const image = element.firstElementChild as HTMLImageElement | null;
+
+  if (image === null || image.tagName !== 'IMG') {
+    // eslint-disable-next-line no-console
+    console.error('Cannot find element <image> in clicked button', element);
+
+    return;
+  }
+
+  const screenshotDialogImage = document.getElementById(
+    'screenshotDialogImage',
+  ) as HTMLImageElement | null;
+  const screenshotDialogTitle = document.getElementById('screenshotDialogTitle');
+
+  if (screenshotDialogImage) {
+    screenshotDialogImage.alt = image.title;
+    screenshotDialogImage.src = image.src;
+    screenshotDialogImage.title = image.title;
+  }
+
+  if (screenshotDialogTitle) {
+    screenshotDialogTitle.textContent = image.title;
+  }
+
+  (document.getElementById('screenshotDialog') as HTMLDialogElement | null)?.showModal();
+};
diff --git a/src/utils/report/client/clickOnStep.ts b/src/utils/report/client/clickOnStep.ts
index 34b0f25b..abacc763 100644
--- a/src/utils/report/client/clickOnStep.ts
+++ b/src/utils/report/client/clickOnStep.ts
@@ -3,9 +3,9 @@
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function clickOnStep(element: HTMLElement): void {
+export const clickOnStep = (element: HTMLElement): void => {
   const expanded = element.ariaExpanded === 'true';
 
   // eslint-disable-next-line no-param-reassign
   element.ariaExpanded = String(!expanded);
-}
+};
diff --git a/src/utils/report/client/clickOnTestRun.ts b/src/utils/report/client/clickOnTestRun.ts
index ad31883f..0a4eef4a 100644
--- a/src/utils/report/client/clickOnTestRun.ts
+++ b/src/utils/report/client/clickOnTestRun.ts
@@ -9,7 +9,7 @@ const chooseTestRun = clientChooseTestRun;
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function clickOnTestRun(element: HTMLElement): void {
+export const clickOnTestRun = (element: HTMLElement): void => {
   const runHash = (element.dataset as {runhash: RunHash}).runhash;
 
   const previousChosenTestRunButton = document.querySelector('.test-link[aria-current="true"]');
@@ -22,4 +22,4 @@ export function clickOnTestRun(element: HTMLElement): void {
   element.ariaCurrent = 'true';
 
   chooseTestRun(runHash);
-}
+};
diff --git a/src/utils/report/client/groupLogEvents.ts b/src/utils/report/client/groupLogEvents.ts
new file mode 100644
index 00000000..c4e3b760
--- /dev/null
+++ b/src/utils/report/client/groupLogEvents.ts
@@ -0,0 +1,49 @@
+import {LogEventType} from '../../../constants/internal';
+
+import type {LogEvent, LogEventWithChildren} from '../../../types/internal';
+
+/**
+ * Group log events to log events with children (for groupping of `TestRun` steps).
+ * This base client function should not use scope variables (except other base functions).
+ * @internal
+ */
+export const groupLogEvents = (logEvents: readonly LogEvent[]): readonly LogEventWithChildren[] => {
+  const topLevelTypes: readonly LogEventType[] = [
+    LogEventType.Action,
+    LogEventType.Assert,
+    LogEventType.Entity,
+    LogEventType.InternalAction,
+    LogEventType.InternalAssert,
+  ];
+
+  const result: LogEventWithChildren[] = [];
+
+  for (const logEvent of logEvents) {
+    const last = result.at(-1);
+    const newEvent: LogEventWithChildren = {children: [], ...logEvent};
+
+    if (topLevelTypes.includes(logEvent.type)) {
+      if (last && !topLevelTypes.includes(last.type)) {
+        const firstTopLevel: LogEventWithChildren = {
+          children: [...result],
+          message: 'Initialization',
+          payload: undefined,
+          time: last.time,
+          type: LogEventType.InternalCore,
+        };
+
+        result.length = 0;
+
+        result.push(firstTopLevel);
+      }
+
+      result.push(newEvent);
+    } else if (last && topLevelTypes.includes(last.type)) {
+      (last.children as LogEventWithChildren[]).push(newEvent);
+    } else {
+      result.push(newEvent);
+    }
+  }
+
+  return result;
+};
diff --git a/src/utils/report/client/index.ts b/src/utils/report/client/index.ts
index 8164ae6d..7a66f02e 100644
--- a/src/utils/report/client/index.ts
+++ b/src/utils/report/client/index.ts
@@ -9,12 +9,16 @@ export {chooseTestRun} from './chooseTestRun';
 /** @internal */
 export {clickOnRetry} from './clickOnRetry';
 /** @internal */
+export {clickOnScreenshot} from './clickOnScreenshot';
+/** @internal */
 export {clickOnStep} from './clickOnStep';
 /** @internal */
 export {clickOnTestRun} from './clickOnTestRun';
 /** @internal */
 export {createJsxRuntime} from './createJsxRuntime';
 /** @internal */
+export {groupLogEvents} from './groupLogEvents';
+/** @internal */
 export {initialScript} from './initialScript';
 /** @internal */
 export {onDomContentLoad} from './onDomContentLoad';
diff --git a/src/utils/report/client/initialScript.ts b/src/utils/report/client/initialScript.ts
index 681fc28a..9a31e3bb 100644
--- a/src/utils/report/client/initialScript.ts
+++ b/src/utils/report/client/initialScript.ts
@@ -3,6 +3,7 @@ import {createSimpleLocator as clientCreateSimpleLocator} from 'create-locator';
 import {addDomContentLoadedHandler as clientAddDomContentLoadedHandler} from './addDomContentLoadedHandler';
 import {addOnClickOnClass as clientAddOnClickOnClass} from './addOnClickOnClass';
 import {clickOnRetry as clientClickOnRetry} from './clickOnRetry';
+import {clickOnScreenshot as clientClickOnScreenshot} from './clickOnScreenshot';
 import {clickOnStep as clientClickOnStep} from './clickOnStep';
 import {clickOnTestRun as clientClickOnTestRun} from './clickOnTestRun';
 import {createJsxRuntime as clientCreateJsxRuntime} from './createJsxRuntime';
@@ -18,6 +19,7 @@ declare const reportClientState: ReportClientState;
 const addDomContentLoadedHandler = clientAddDomContentLoadedHandler;
 const addOnClickOnClass = clientAddOnClickOnClass;
 const clickOnRetry = clientClickOnRetry;
+const clickOnScreenshot = clientClickOnScreenshot;
 const clickOnStep = clientClickOnStep;
 const clickOnTestRun = clientClickOnTestRun;
 const createJsxRuntime = clientCreateJsxRuntime;
@@ -30,7 +32,7 @@ const setReadJsonReportDataObservers = clientSetReadJsonReportDataObservers;
  * This client function should not use scope variables (except global functions).
  * @internal
  */
-export function initialScript(): void {
+export const initialScript = (): void => {
   jsx = createJsxRuntime();
 
   const {locator} = createSimpleLocator(reportClientState.createLocatorOptions);
@@ -39,9 +41,10 @@ export function initialScript(): void {
 
   addOnClickOnClass('retry-link', clickOnRetry);
   addOnClickOnClass('step-expanded', clickOnStep);
+  addOnClickOnClass('step__screenshot-button', clickOnScreenshot);
   addOnClickOnClass('test-link', clickOnTestRun);
 
   setReadJsonReportDataObservers();
 
   addDomContentLoadedHandler(onDomContentLoad);
-}
+};
diff --git a/src/utils/report/client/onFirstJsonReportDataLoad.ts b/src/utils/report/client/onFirstJsonReportDataLoad.ts
index aab98877..74bdcee4 100644
--- a/src/utils/report/client/onFirstJsonReportDataLoad.ts
+++ b/src/utils/report/client/onFirstJsonReportDataLoad.ts
@@ -11,7 +11,7 @@ declare const reportClientState: ReportClientState;
  * This client function should not use scope variables (except global functions).
  * @internal
  */
-export function onFirstJsonReportDataLoad(): void {
+export const onFirstJsonReportDataLoad = (): void => {
   if (window.location.hash !== '') {
     return;
   }
@@ -38,4 +38,4 @@ export function onFirstJsonReportDataLoad(): void {
       }
     }, scrollDelayInMs);
   }
-}
+};
diff --git a/src/utils/report/client/render/ApiStatistics.tsx b/src/utils/report/client/render/ApiStatistics.tsx
index a4bff456..af51cede 100644
--- a/src/utils/report/client/render/ApiStatistics.tsx
+++ b/src/utils/report/client/render/ApiStatistics.tsx
@@ -91,7 +91,9 @@ export const ApiStatistics: JSX.Component<Props> = ({apiStatistics, hash}) => {
     <article class="test-details">
       <p class="test-details__path"></p>
       <h2 class="test-details__title">{header}</h2>
-      <List elements={items} />
+      <ol class="steps-group">
+        <List elements={items} />
+      </ol>
     </article>
   );
 };
diff --git a/src/utils/report/client/render/ApiStatisticsItem.tsx b/src/utils/report/client/render/ApiStatisticsItem.tsx
index 8cbbecf5..2d139a83 100644
--- a/src/utils/report/client/render/ApiStatisticsItem.tsx
+++ b/src/utils/report/client/render/ApiStatisticsItem.tsx
@@ -47,12 +47,15 @@ export const ApiStatisticsItem: JSX.Component<Props> = ({
   }
 
   return (
-    <span class="step-expanded step-expanded_is-empty">
-      <span class="step-expanded__name">{nameHtml}</span>
-      <span class="step-expanded__time">
-        {countHtml} / {sizeHtml}
-        <Duration durationInMs={duration / count} />
-      </span>
-    </span>
+    <li class="step" data-status="passed">
+      <button class="step__popover-button" title={name}></button>
+      <div class="step__head">
+        <span class="step__name">{nameHtml}</span>
+        <span class="step__duration">
+          {countHtml} / {sizeHtml}
+          <Duration durationInMs={duration / count} />
+        </span>
+      </div>
+    </li>
   );
 };
diff --git a/src/utils/report/client/render/Screenshot.tsx b/src/utils/report/client/render/Screenshot.tsx
index bfb28cd9..bd8eb286 100644
--- a/src/utils/report/client/render/Screenshot.tsx
+++ b/src/utils/report/client/render/Screenshot.tsx
@@ -1,13 +1,17 @@
 declare const jsx: JSX.Runtime;
 
-type Props = Readonly<{name: string; open?: boolean; src: string}>;
+type Props = Readonly<{
+  name: string;
+  open?: boolean;
+  url: string;
+}>;
 
 /**
  * Renders screenshot of test in HTML report.
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export const Screenshot: JSX.Component<Props> = ({name, open = false, src}) => (
+export const Screenshot: JSX.Component<Props> = ({name, open = false, url}) => (
   <details class="step-attachment" open={open}>
     <summary class="step-attachment__title">{name}</summary>
     <button
@@ -16,7 +20,7 @@ export const Screenshot: JSX.Component<Props> = ({name, open = false, src}) => (
       aria-haspopup="dialog"
       aria-label="Open full size screenshot"
     >
-      <img src={src} alt={name} title={name} />
+      <img src={url} alt={name} title={name} />
     </button>
   </details>
 );
diff --git a/src/utils/report/client/render/Step.tsx b/src/utils/report/client/render/Step.tsx
index 98178026..2e5ee7f6 100644
--- a/src/utils/report/client/render/Step.tsx
+++ b/src/utils/report/client/render/Step.tsx
@@ -2,17 +2,24 @@ import {LogEventStatus, LogEventType} from '../../../../constants/internal';
 
 import {Duration as clientDuration} from './Duration';
 import {StepContent as clientStepContent} from './StepContent';
+import {Steps as clientSteps} from './Steps';
 
-import type {LogEvent, ReportClientState, UtcTimeInMs} from '../../../../types/internal';
+import type {
+  LogEventWithChildren,
+  ReportClientState,
+  UtcTimeInMs,
+} from '../../../../types/internal';
 
 const Duration = clientDuration;
 const StepContent = clientStepContent;
+const Steps = clientSteps;
 
 declare const jsx: JSX.Runtime;
 declare const reportClientState: ReportClientState;
 
 type Props = Readonly<{
-  logEvent: LogEvent;
+  isEnd?: boolean;
+  logEvent: LogEventWithChildren;
   nextLogEventTime: UtcTimeInMs;
 }>;
 
@@ -21,8 +28,8 @@ type Props = Readonly<{
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export const Step: JSX.Component<Props> = ({logEvent, nextLogEventTime}) => {
-  const {message, payload, time, type} = logEvent;
+export const Step: JSX.Component<Props> = ({isEnd = false, logEvent, nextLogEventTime}) => {
+  const {children, message, payload, time, type} = logEvent;
   const date = new Date(time).toISOString();
   const isPayloadEmpty = !payload || Object.keys(payload).length === 0;
   const popoverId = Math.random().toString(16).slice(2);
@@ -41,24 +48,34 @@ export const Step: JSX.Component<Props> = ({logEvent, nextLogEventTime}) => {
     }
   }
 
-  const content = isPayloadEmpty ? (
-    <div class="step__head">
-      <span class="step__name">{message}</span>
-      <span class="step__duration">
-        <Duration durationInMs={nextLogEventTime - time} />
-      </span>
-    </div>
-  ) : (
-    <details class="step__details">
-      <summary class="step__head">
-        <span class="step__name">{message}</span>
-        <span class="step__duration">
-          <Duration durationInMs={nextLogEventTime - time} />
-        </span>
-      </summary>
-      <StepContent pathToScreenshotOfPage={pathToScreenshotOfPage} payload={payload} type={type} />
-    </details>
-  );
+  let content = <></>;
+
+  if (!isEnd) {
+    content =
+      isPayloadEmpty && children.length === 0 ? (
+        <div class="step__head">
+          <span class="step__name">{message}</span>
+          <span class="step__duration">
+            <Duration durationInMs={nextLogEventTime - time} />
+          </span>
+        </div>
+      ) : (
+        <details class="step__details">
+          <summary class="step__head">
+            <span class="step__name">{message}</span>
+            <span class="step__duration">
+              <Duration durationInMs={nextLogEventTime - time} />
+            </span>
+          </summary>
+          <StepContent
+            pathToScreenshotOfPage={pathToScreenshotOfPage}
+            payload={payload}
+            type={type}
+          />
+          <Steps endTimeInMs={nextLogEventTime} logEvents={children} />
+        </details>
+      );
+  }
 
   return (
     <li class="step" data-status={status}>
diff --git a/src/utils/report/client/render/StepContent.tsx b/src/utils/report/client/render/StepContent.tsx
index 43c4bc8d..74e0d6da 100644
--- a/src/utils/report/client/render/StepContent.tsx
+++ b/src/utils/report/client/render/StepContent.tsx
@@ -12,7 +12,7 @@ declare const jsx: JSX.Runtime;
 
 type Props = Readonly<{
   pathToScreenshotOfPage: string | undefined;
-  payload: LogPayload;
+  payload: LogPayload | undefined;
   type: LogEventType;
 }>;
 
@@ -22,32 +22,36 @@ type Props = Readonly<{
  * @internal
  */
 export const StepContent: JSX.Component<Props> = ({pathToScreenshotOfPage, payload, type}) => {
+  if (payload === undefined) {
+    return <></>;
+  }
+
   const payloadString = JSON.stringify(payload, null, 2);
   const screenshots: SafeHtml[] = [];
 
   if (pathToScreenshotOfPage !== undefined) {
-    screenshots.push(<Screenshot name="Screenshot of page" open src={pathToScreenshotOfPage} />);
+    screenshots.push(<Screenshot name="Screenshot of page" open url={pathToScreenshotOfPage} />);
   }
 
   if (type === LogEventType.InternalAssert) {
     const {actualScreenshotUrl, diffScreenshotUrl, expectedScreenshotUrl} = payload;
 
     if (typeof actualScreenshotUrl === 'string') {
-      screenshots.push(<Screenshot name="Actual" src={actualScreenshotUrl} />);
+      screenshots.push(<Screenshot name="Actual" url={actualScreenshotUrl} />);
     }
 
     if (typeof diffScreenshotUrl === 'string') {
-      screenshots.push(<Screenshot name="Diff" src={diffScreenshotUrl} />);
+      screenshots.push(<Screenshot name="Diff" url={diffScreenshotUrl} />);
     }
 
     if (typeof expectedScreenshotUrl === 'string') {
-      screenshots.push(<Screenshot name="Expected" src={expectedScreenshotUrl} />);
+      screenshots.push(<Screenshot name="Expected" url={expectedScreenshotUrl} />);
     }
   }
 
   return (
     <>
-      <details class="step-attachment">
+      <details class="step-attachment" open>
         <summary class="step-attachment__title">Details</summary>
         <pre class="step__code">
           <code>{payloadString}</code>
diff --git a/src/utils/report/client/render/Steps.tsx b/src/utils/report/client/render/Steps.tsx
index 40ba568b..cfe30b27 100644
--- a/src/utils/report/client/render/Steps.tsx
+++ b/src/utils/report/client/render/Steps.tsx
@@ -1,9 +1,11 @@
+import {LogEventType} from '../../../../constants/internal';
+
 import {assertValueIsDefined as clientAssertValueIsDefined} from '../assertValueIsDefined';
 
 import {List as clientList} from './List';
 import {Step as clientStep} from './Step';
 
-import type {LogEvent, SafeHtml, UtcTimeInMs} from '../../../../types/internal';
+import type {LogEventWithChildren, SafeHtml, UtcTimeInMs} from '../../../../types/internal';
 
 const assertValueIsDefined: typeof clientAssertValueIsDefined = clientAssertValueIsDefined;
 const List = clientList;
@@ -13,7 +15,8 @@ declare const jsx: JSX.Runtime;
 
 type Props = Readonly<{
   endTimeInMs: UtcTimeInMs;
-  logEvents: readonly LogEvent[];
+  isRoot?: boolean;
+  logEvents: readonly LogEventWithChildren[];
 }>;
 
 /**
@@ -21,7 +24,11 @@ type Props = Readonly<{
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export const Steps: JSX.Component<Props> = ({endTimeInMs, logEvents}) => {
+export const Steps: JSX.Component<Props> = ({endTimeInMs, isRoot = false, logEvents}) => {
+  if (logEvents.length === 0) {
+    return <></>;
+  }
+
   const stepHtmls: SafeHtml[] = [];
 
   for (let index = 0; index < logEvents.length; index += 1) {
@@ -36,6 +43,18 @@ export const Steps: JSX.Component<Props> = ({endTimeInMs, logEvents}) => {
     stepHtmls.push(stepHtml);
   }
 
+  if (isRoot) {
+    const endLogEvent: LogEventWithChildren = {
+      children: [],
+      message: '',
+      payload: undefined,
+      time: endTimeInMs,
+      type: LogEventType.InternalUtil,
+    };
+
+    stepHtmls.push(<Step isEnd logEvent={endLogEvent} nextLogEventTime={endTimeInMs} />);
+  }
+
   return (
     <ol class="steps-group">
       <List elements={stepHtmls} />
diff --git a/src/utils/report/client/render/TestRunDetails.tsx b/src/utils/report/client/render/TestRunDetails.tsx
index 5c91b790..d6422220 100644
--- a/src/utils/report/client/render/TestRunDetails.tsx
+++ b/src/utils/report/client/render/TestRunDetails.tsx
@@ -1,4 +1,5 @@
 import {assertValueIsDefined as clientAssertValueIsDefined} from '../assertValueIsDefined';
+import {groupLogEvents as clientGroupLogEvents} from '../groupLogEvents';
 
 import {Steps as clientSteps} from './Steps';
 import {TestRunDescription as clientTestRunDescription} from './TestRunDescription';
@@ -10,6 +11,7 @@ declare const jsx: JSX.Runtime;
 declare const reportClientState: ReportClientState;
 
 const assertValueIsDefined: typeof clientAssertValueIsDefined = clientAssertValueIsDefined;
+const groupLogEvents = clientGroupLogEvents;
 const Steps = clientSteps;
 const TestRunDescription = clientTestRunDescription;
 const TestRunError = clientTestRunError;
@@ -30,6 +32,7 @@ export const TestRunDetails: JSX.Component<Props> = ({fullTestRun}) => {
   assertValueIsDefined(firstStatusString);
 
   const capitalizedStatus = `${firstStatusString.toUpperCase()}${status.slice(1)}`;
+  const logEventsWithChildren = groupLogEvents(logEvents);
 
   return (
     <article class="test-details">
@@ -40,10 +43,10 @@ export const TestRunDetails: JSX.Component<Props> = ({fullTestRun}) => {
         </span>
         {name}
       </h2>
-      <TestRunError runError={runError} />
       <TestRunDescription fullTestRun={fullTestRun} />
+      <TestRunError runError={runError} />
       <h4 class="test-details__retry-title">Execution</h4>
-      <Steps endTimeInMs={endTimeInMs} logEvents={logEvents} />
+      <Steps endTimeInMs={endTimeInMs} isRoot logEvents={logEventsWithChildren} />
     </article>
   );
 };
diff --git a/src/utils/report/render/Errors.tsx b/src/utils/report/render/Errors.tsx
index 3f23c061..96ee9585 100644
--- a/src/utils/report/render/Errors.tsx
+++ b/src/utils/report/render/Errors.tsx
@@ -13,7 +13,7 @@ export const Errors: JSX.Component<Props> = ({errors}) => {
     return <></>;
   }
 
-  const renderedErrors = errors.map((error) => <div class="__error">{error}</div>);
+  const renderedErrors = errors.map((error) => <div class="errors__error">{error}</div>);
 
   return (
     <div class="errors">
diff --git a/src/utils/report/render/HtmlReport.tsx b/src/utils/report/render/HtmlReport.tsx
index 044d90eb..21c07e5e 100644
--- a/src/utils/report/render/HtmlReport.tsx
+++ b/src/utils/report/render/HtmlReport.tsx
@@ -13,6 +13,7 @@ import {JsonData} from './JsonData';
 import {locator} from './locator';
 import {Navigation} from './Navigation';
 import {Retries} from './Retries';
+import {ScreenshotDialog} from './ScreenshotDialog';
 import {Warnings} from './Warnings';
 
 import type {ReportData, UtcTimeInMs} from '../../../types/internal';
@@ -58,11 +59,10 @@ export const HtmlReport: JSX.Component<Props> = ({reportData}) => {
             aria-label="Tests results"
             {...locator('column-3')}
           >
-            <div class="test-details-empty">
-              <p>No test selected</p>
-            </div>
+            <p class="empty-state">No test selected</p>
           </section>
         </div>
+        <ScreenshotDialog />
         <JsonData reportData={reportData} />
       </body>
     </html>
diff --git a/src/utils/report/render/Metadata.tsx b/src/utils/report/render/Metadata.tsx
index 39d73201..82716bd3 100644
--- a/src/utils/report/render/Metadata.tsx
+++ b/src/utils/report/render/Metadata.tsx
@@ -2,27 +2,31 @@ import type {ApiStatisticsReportHash} from '../../../types/internal';
 
 declare const jsx: JSX.Runtime;
 
+type Props = Readonly<{menuIndex: number}>;
+
 /**
  * Renders metadata of whole `e2ed` run.
  * @internal
  */
-export const Metadata: JSX.Component = () => {
+export const Metadata: JSX.Component<Props> = ({menuIndex}) => {
   const pagesHash: ApiStatisticsReportHash = 'api-statistics-pages';
   const requestsHash: ApiStatisticsReportHash = 'api-statistics-requests';
   const resourcesHash: ApiStatisticsReportHash = 'api-statistics-resources';
 
   return (
-    <article class="retry" hidden>
+    <article class="retry" id={`retry${menuIndex}`} hidden>
       <h3 class="retry__title">Metadata</h3>
-      <button class="test-link" data-runhash={pagesHash}>
-        Pages statistics
-      </button>
-      <button class="test-link" data-runhash={requestsHash}>
-        Requests statistics
-      </button>
-      <button class="test-link" data-runhash={resourcesHash}>
-        Resources statistics
-      </button>
+      <div class="tests-group">
+        <button class="test-link" data-runhash={pagesHash}>
+          Pages statistics
+        </button>
+        <button class="test-link" data-runhash={requestsHash}>
+          Requests statistics
+        </button>
+        <button class="test-link" data-runhash={resourcesHash}>
+          Resources statistics
+        </button>
+      </div>
     </article>
   );
 };
diff --git a/src/utils/report/render/Retries.tsx b/src/utils/report/render/Retries.tsx
index ab9013a3..a2f969a8 100644
--- a/src/utils/report/render/Retries.tsx
+++ b/src/utils/report/render/Retries.tsx
@@ -16,7 +16,7 @@ type Props = Readonly<{retries: readonly RetryProps[]}>;
 export const Retries: JSX.Component<Props> = ({retries}) => {
   const retriesHtml = retries.map((retry) => <Retry retry={retry} />);
 
-  retriesHtml.push(<Metadata />);
+  retriesHtml.push(<Metadata menuIndex={retries.length + 1} />);
 
   return <List elements={retriesHtml} />;
 };
diff --git a/src/utils/report/render/Retry.tsx b/src/utils/report/render/Retry.tsx
index e6be1b4f..260b6983 100644
--- a/src/utils/report/render/Retry.tsx
+++ b/src/utils/report/render/Retry.tsx
@@ -23,7 +23,12 @@ export const Retry: JSX.Component<Props> = ({retry}) => {
   ));
 
   return (
-    <article class="retry" hidden={retry.hidden} {...locator('Retry', {index: retry.retryIndex})}>
+    <article
+      class="retry"
+      id={`retry${retry.retryIndex}`}
+      hidden={retry.hidden}
+      {...locator('Retry', {index: retry.retryIndex})}
+    >
       <RetryHeader {...retry} />
       <div class="tests-group">
         <List elements={buttons} />
diff --git a/src/utils/report/render/RetryButton.tsx b/src/utils/report/render/RetryButton.tsx
index 4bc69694..d61d0320 100644
--- a/src/utils/report/render/RetryButton.tsx
+++ b/src/utils/report/render/RetryButton.tsx
@@ -15,6 +15,7 @@ export const RetryButton: JSX.Component<Props> = ({disabled, name, retry, select
     class="retry-link"
     disabled={disabled}
     aria-current={selected ? true : undefined}
+    data-retry={`retry${retry}`}
     {...locator('RetryButton', {disabled, retry, selected})}
   >
     {name}
diff --git a/src/utils/report/render/ScreenshotDialog.tsx b/src/utils/report/render/ScreenshotDialog.tsx
new file mode 100644
index 00000000..eebd7ac5
--- /dev/null
+++ b/src/utils/report/render/ScreenshotDialog.tsx
@@ -0,0 +1,17 @@
+declare const jsx: JSX.Runtime;
+
+/**
+ * Renders modal screenshot dialog.
+ * @internal
+ */
+export const ScreenshotDialog: JSX.Component = () => (
+  <dialog class="screenshot-dialog" id="screenshotDialog" aria-labelledby="screenshotDialogTitle">
+    <h2 id="screenshotDialogTitle">Full size screenshot</h2>
+    <div class="screenshot-dialog__main">
+      <img id="screenshotDialogImage" alt="Full size screenshot" title="Full size screenshot" />
+    </div>
+    <form method="dialog">
+      <button class="screenshot-dialog__close" aria-label="Close screenshot dialog"></button>
+    </form>
+  </dialog>
+);
diff --git a/src/utils/report/render/Script.tsx b/src/utils/report/render/Script.tsx
index 39a53be2..6021ce0d 100644
--- a/src/utils/report/render/Script.tsx
+++ b/src/utils/report/render/Script.tsx
@@ -13,6 +13,6 @@ export const Script: JSX.Component = () => (
   <script async type="module">
     <ScriptGlobals />
     <ScriptFunctions />
-    {initialScript.name}()
+    {initialScript.name}();
   </script>
 );
diff --git a/src/utils/report/render/ScriptFunctions.tsx b/src/utils/report/render/ScriptFunctions.tsx
index 3a67b392..1ec06e89 100644
--- a/src/utils/report/render/ScriptFunctions.tsx
+++ b/src/utils/report/render/ScriptFunctions.tsx
@@ -14,7 +14,7 @@ export const ScriptFunctions: JSX.Component = () => {
   const functions = Object.values(clientFunctions).map((fn) => `var ${fn.name} = ${String(fn)};`);
 
   functions.push(`var createSimpleLocator = ${createSimpleLocator.toString()};`);
-  functions.push(String(getDurationWithUnits));
+  functions.push(`var getDurationWithUnits = ${getDurationWithUnits.toString()};`);
 
   return <clientFunctions.List separator={'\n'} withoutSanitize={functions} />;
 };
diff --git a/src/utils/report/render/TestRunButton.tsx b/src/utils/report/render/TestRunButton.tsx
index c7c55ccd..4fe3d599 100644
--- a/src/utils/report/render/TestRunButton.tsx
+++ b/src/utils/report/render/TestRunButton.tsx
@@ -32,9 +32,11 @@ export const TestRunButton: JSX.Component<Props> = ({
       data-status={status}
       {...locator(testId, {mainParams, status})}
     >
+      {/*
       <span class="test-link__order" {...locator(testId, 'order')}>
         #{index + 1}
       </span>
+      */}
       <span class="test-link__name" {...locator(testId, 'name')}>
         <span class="test-link__main-params" {...locator(testId, 'parameters')}>
           {mainParams}
diff --git a/src/utils/report/render/Warnings.tsx b/src/utils/report/render/Warnings.tsx
index 18bb16bc..86ddd9f3 100644
--- a/src/utils/report/render/Warnings.tsx
+++ b/src/utils/report/render/Warnings.tsx
@@ -13,7 +13,7 @@ export const Warnings: JSX.Component<Props> = ({warnings}) => {
     return <></>;
   }
 
-  const renderedWarnings = warnings.map((warning) => <div class="__error">{warning}</div>);
+  const renderedWarnings = warnings.map((warning) => <div class="warnings__error">{warning}</div>);
 
   return (
     <div class="warnings">
diff --git a/styles/report.css b/styles/report.css
index e707afa2..b6f2d870 100644
--- a/styles/report.css
+++ b/styles/report.css
@@ -22,7 +22,7 @@
   --color-cell-color: hsl(0 0% 95%);
   --button-disabled-color: hsl(0 0% 5% / 0.3);
 
-  --header-height: 100px;
+  --header-height: 70px;
   --retry-padding: 10px;
   --test-details-padding: 10px;
   --main-radius: 3px;
@@ -36,6 +36,7 @@
   --drag-container-bg-color: hsl(0 0% 83%);
 
   --main-params-color: hsl(0 0% 30%);
+  --tests-counters-by-status-cell-bg-color: var(--primary-bg-color);
   --failed-line-color: hsl(0 100% 35%);
   --failed-text-color: hsl(4, 64%, 23%);
 }
@@ -73,25 +74,19 @@
     fill: hsl(0 0% 65%);
   }
 }
-/* for test! delete */
-.column-2 {
-  resize: horizontal;
-  overflow: scroll;
-}
-
 body {
-  margin: 0;
-  padding: 0;
-  min-height: 100vh;
-  height: auto;
   display: grid;
   grid-template-areas: 'header' 'column-1' 'main';
   grid-template-rows: auto auto 1fr;
   grid-template-columns: 1fr;
+  margin: 0;
+  padding: 0;
   width: 100%;
+  height: auto;
+  min-height: 100vh;
   font-family: system-ui;
-  font-size: 14px;
-  line-height: 1.5;
+  font-size: var(--font-size);
+  line-height: var(--line-height);
   color: var(--font-color);
   background-color: var(--primary-bg-color);
 }
@@ -120,33 +115,21 @@ a:active,
 a:focus {
   color: var(--accent-color);
 }
-a:hover {
-  text-decoration-line: underline;
-}
 a:visited {
   color: var(--link-visited-color);
 }
-
-/* todo */
-.errors {
-  padding: 2px 6px;
+.errors,
+.warnings {
+  padding: 2px var(--retry-padding);
 }
-.errors .__error {
-  color: var(--failed-color);
+.errors__error {
   margin: 4px 0;
+  color: var(--failed-color);
 }
-
-/* warnings */
-.warnings {
-  padding: 2px 6px;
-}
-
-.warnings .__error {
-  color: var(--broken-color);
-
+.warnings__error {
   margin: 4px 0;
+  color: var(--broken-color);
 }
-
 .header {
   grid-area: header;
   display: flex;
@@ -173,7 +156,6 @@ a:visited {
   display: flex;
   flex-direction: row;
   max-width: 100vw;
-  /* scrollbar-width: none; */
   overflow-x: scroll;
 }
 .retry-link {
@@ -188,6 +170,11 @@ a:visited {
   text-decoration: none;
   border: none;
 }
+.retry-link[aria-current='true'] {
+  box-shadow: 0 -3px 0 0 var(--accent-color) inset;
+  border-radius: inherit;
+  background: var(--item-bg-color);
+}
 .main {
   grid-area: main;
   min-width: 0;
@@ -207,12 +194,11 @@ a:visited {
 }
 .column-1,
 .column-2 {
-  contain: layout paint; /* ??? */
-  height: auto;
-  box-sizing: border-box;
+  contain: layout paint;
 }
+.column-1,
+.column-2,
 .column-3 {
-  position: sticky;
   height: auto;
   box-sizing: border-box;
 }
@@ -237,8 +223,30 @@ a:visited {
 .color-cell_type_tag {
   background-color: var(--accent-color);
 }
+.tests-counters-by-status {
+  display: flex;
+  gap: 2px;
+  flex-grow: 1;
+  flex-shrink: 0;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+.tests-counters-by-status__cell {
+  padding: 2px;
+  display: flex;
+  gap: 2px;
+  border-radius: 20px;
+  white-space: nowrap;
+  align-items: center;
+  transition: transform 0.15s ease-in;
+  font-size: 11px;
+  line-height: 11px;
+  color: var(--font-color);
+}
 .step__head::before,
-.test-link::before {
+.tests-directory__title::before,
+.test-link::before,
+.tests-counters-by-status__cell::before {
   --offset: 0px;
   --icon-size-without-offset: calc(var(--icon-size) - 2 * var(--offset) - 2 * var(--border-width));
 
@@ -257,7 +265,7 @@ a:visited {
   background-repeat: no-repeat;
   overflow: hidden;
 }
-.step__head::before, /* ??? */
+.step__head::before,
 .test-link::before {
   --border-width: 0px;
   --icon-size: 12px;
@@ -266,12 +274,29 @@ a:visited {
   font-weight: bold;
   transition: transform 0.15s ease-in;
 }
+.tests-counters-by-status__cell::before {
+  --icon-size: 12px;
+  --offset: 2px;
+  --border-width: 1px;
+  --icon-line-width: 1px;
+
+  margin: calc(var(--offset) + var(--border-width));
+  opacity: 0.7;
+}
+.tests-counters-by-status__cell:hover {
+  position: relative;
+  background-color: var(--tests-counters-by-status-cell-bg-color);
+  transform: translate(-25%, 0px) scale(1.75);
+  z-index: 12;
+}
 .retry-link,
 .test-link,
+.tests-directory__title,
 .step__head {
   border-radius: var(--main-radius);
 }
 .test-link[data-status='passed']::before,
+.tests-counters-by-status__cell[data-status='passed']::before,
 .step[data-status='passed'] > .step__details > .step__head::before,
 .step[data-status='passed'] > .step__head::before {
   color: var(--passed-color);
@@ -293,6 +318,7 @@ a:visited {
   translate: 0 -15%;
 }
 .test-link[data-status='failed']::before,
+.tests-counters-by-status__cell[data-status='failed']::before,
 .step[data-status='failed'] > .step__details > .step__head::before,
 .step[data-status='failed'] > .step__head::before {
   color: var(--failed-color);
@@ -310,7 +336,8 @@ a:visited {
       var(--transparent-color) 0
     );
 }
-.test-link[data-status='broken']::before {
+.test-link[data-status='broken']::before,
+.tests-counters-by-status__cell[data-status='broken']::before {
   --border-width: 1px;
   --offset: 0px;
 
@@ -323,17 +350,21 @@ a:visited {
     var(--transparent-color) 0
   );
 }
-.test-link[data-status='skipped']::before {
+.test-link[data-status='skipped']::before,
+.tests-counters-by-status__cell[data-status='skipped']::before {
   color: var(--skipped-color);
 }
-.test-link[data-status='skipped']::before /* ??? */ {
+.test-link[data-status='skipped']::before,
+.tests-counters-by-status__cell[data-status='skipped']::before,
+.tests-directory[open] > .tests-directory__title::before {
   background-image: linear-gradient(
     var(--transparent-color) calc(50% - var(--icon-line-width) / 2),
     currentColor 0 calc(50% + var(--icon-line-width) / 2),
     var(--transparent-color) 0
   );
 }
-.test-link[data-status='unknown']::before {
+.test-link[data-status='unknown']::before,
+.tests-counters-by-status__cell[data-status='unknown']::before {
   content: '?';
   display: flex;
   justify-content: center;
@@ -343,7 +374,13 @@ a:visited {
 .test-link[data-status='manual']::before {
   --offset: 0px;
 }
-.test-link[data-status='manual']::before /* ??? */ {
+.tests-counters-by-status__cell[data-status='passed']::before,
+.tests-counters-by-status__cell[data-status='unknown']::before,
+.tests-counters-by-status__cell[data-status='manual']::before {
+  --offset: 1px;
+}
+.test-link[data-status='manual']::before,
+.tests-counters-by-status__cell[data-status='manual']::before {
   color: var(--manual-color);
   background:
     linear-gradient(
@@ -368,6 +405,9 @@ a:visited {
   background-repeat: no-repeat;
   rotate: 45deg;
 }
+.tests-counters-by-status__cell:hover::before {
+  opacity: 1;
+}
 .color-cell[data-status='passed'] {
   background-color: var(--passed-color);
 }
@@ -387,7 +427,8 @@ a:visited {
   background-color: var(--unknown-color);
 }
 .retry-link,
-.test-link {
+.test-link,
+.test-tabs__button {
   min-height: 42px;
 }
 .test-details__path {
@@ -410,6 +451,63 @@ a:visited {
   position: relative;
   font-size: 16px;
 }
+.test-tabs {
+  position: relative;
+  display: flex;
+  background-color: var(--secondary-bg-color);
+  white-space: nowrap;
+  scroll-snap-type: x mandatory;
+  overflow-x: auto;
+}
+.test-tabs__button {
+  position: relative;
+  padding: 11px calc(var(--test-details-padding) + 4px) 14px;
+  width: 100px;
+  border: none;
+  font-size: 16px;
+  color: var(--font-color);
+  transition: all 0.3s ease;
+  text-transform: uppercase;
+  scroll-snap-align: start;
+}
+.test-tabs__button[aria-selected='true']::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100px;
+  height: 3px;
+  background-color: var(--accent-color);
+  transition: transform 0.2s ease 0s;
+  transform-origin: 0px 0px;
+}
+.test-tabs__button,
+.test-tabs__button:focus,
+.test-tabs__button:active,
+.test-tabs__button:hover {
+  background-color: var(--secondary-bg-color);
+}
+.test-tabs__button:not(:disabled):hover::before,
+.test-tabs__button:not(:disabled):focus::before,
+.test-tabs__button:not(:disabled):active::before {
+  content: '';
+  position: absolute;
+  top: 7px;
+  left: var(--test-details-padding);
+  right: var(--test-details-padding);
+  bottom: 10px;
+  border: 2px solid var(--accent-color);
+  border-radius: var(--main-radius);
+}
+.test-tabs__button[aria-selected='true'],
+.test-tabs__button[aria-selected='true']:hover,
+.test-tabs__button[aria-selected='true']:active,
+.test-tabs__button[aria-selected='true']:focus {
+  position: relative;
+  color: var(--accent-color);
+  cursor: default;
+}
 .drag-container {
   display: none;
 }
@@ -417,7 +515,7 @@ a:visited {
   box-sizing: border-box;
   margin: 0 var(--test-details-padding);
   padding: var(--test-details-padding);
-  border: 1px solid #f5c2c0; /* test */
+  border: 1px solid hsl(0 100% 35% / 0.3);
   border-left: 4px solid var(--failed-line-color);
   border-radius: var(--main-radius);
   font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
@@ -429,13 +527,12 @@ a:visited {
   scrollbar-gutter: stable;
   white-space: pre;
   max-width: 100%;
+  max-height: 800px;
 }
-
-/* ??? */
-.empty {
+.empty-state {
   padding: var(--test-details-padding);
 }
-.test-details__retry-title + .empty {
+.test-details__retry-title + .empty-state {
   padding-top: 0;
 }
 .test-details__retry-title {
@@ -456,7 +553,7 @@ a:visited {
   color: var(--subtitle-color);
 }
 .test-description__term::after {
-  content: ': ';
+  content: ':\00a0';
 }
 .test-description__definition {
   margin: 0;
@@ -475,9 +572,7 @@ a:visited {
 .test-description__definition .color-cell:not(:last-child) {
   margin: 0 5px 0 0;
 }
-
 .steps-group {
-  /* test */
   --horizontal-level-offset: clamp(14px, 2.5cqw, 25px);
   --vertical-level-offset: 10px;
   --popover-button-width: 30px;
@@ -502,7 +597,6 @@ a:visited {
 
   position: relative;
   padding-left: 0;
-  /* contain: layout paint; */
   contain: layout paint;
   overflow: hidden;
   background: var(--primary-bg-color);
@@ -534,11 +628,12 @@ a:visited {
   font-size: var(--font-size);
   line-height: var(--line-height);
 }
+.step__head,
 .test-link,
 .test-link:focus,
 .test-link:active,
 .test-link:hover,
-.step__head {
+.tests-directory__title {
   background-color: var(--item-bg-color);
 }
 .step__details > .step__head > .step__name::before {
@@ -562,6 +657,7 @@ a:visited {
 .step__details[open] > .step__head > .step__name::before {
   transform: rotate(90deg) translate(-75%, -25%);
 }
+.tests-directory__title::-webkit-details-marker,
 .step__details > .step__head::-webkit-details-marker,
 .step-attachment__title::-webkit-details-marker {
   display: none;
@@ -608,6 +704,7 @@ a:visited {
   background-color: var(--step-panel-bg-color);
   overflow: auto;
 }
+.tests-directory__name,
 .step__name {
   overflow-wrap: break-word;
   overflow: hidden;
@@ -629,17 +726,204 @@ a:visited {
   text-align: right;
   color: var(--subtitle-color);
 }
+.steps-group .steps-group {
+  box-sizing: border-box;
+  margin-left: calc(-1 * var(--popover-button-width));
+  padding: calc(var(--vertical-level-offset) + var(--timeline-border-radius)) 0
+    calc(
+      var(--timeline-top-offset) + var(--vertical-level-offset) +
+        var(--details-open-summary-margin-bottom) + var(--timeline-border-radius)
+    )
+    calc(var(--horizontal-level-offset));
+}
+.step:last-child {
+  --level: 1;
+}
+.step:last-child > .step__details > .steps-group > .step:last-child {
+  --level: 2;
+}
+.step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child {
+  --level: 3;
+}
+.step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child {
+  --level: 4;
+}
+.step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child {
+  --level: 5;
+}
+.step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child {
+  --level: 6;
+}
+.step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child {
+  --level: 7;
+}
+.step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group
+  > .step:last-child
+  > .step__details
+  > .steps-group {
+  --timeline-bend-top-left-border-width: 0 var(--timeline-width) 0 0;
+  --timeline-bend-top-right-border-width: 0 var(--timeline-width) 0 0;
+  --timeline-border-bottom-left-radius: 0;
+  --timeline-before-box-shadow: none;
+
+  margin-left: calc(
+    -1 * var(--horizontal-level-offset) * (var(--level) + 1) - var(--popover-button-width)
+  );
+}
+.steps-group > .step:last-child > .step__details > .steps-group {
+  margin-left: calc(
+    -1 * var(--horizontal-level-offset) * var(--level) - var(--popover-button-width)
+  );
+  padding-left: calc(
+    var(--horizontal-level-offset) * (var(--level) + 1) + 0 * var(--popover-button-width)
+  );
+}
+.step:last-child {
+  padding-bottom: 0;
+}
+.steps-group .steps-group > .step:last-child > .step__details > .step__head::after,
+.steps-group .steps-group > .step:last-child > .step__head::after,
+.steps-group .steps-group > .step:first-child::before {
+  box-sizing: content-box;
+  width: var(--timeline-border-radius);
+  margin-left: calc(-1 * var(--timeline-border-radius));
+}
+.step__head::after {
+  bottom: calc(-1 * var(--vertical-level-offset));
+  z-index: 2;
+  height: var(--timeline-border-radius);
+  border-width: 0 var(--timeline-width) var(--timeline-width) 0;
+  border-bottom-right-radius: var(--timeline-border-radius);
+  box-shadow: 0 var(--timeline-border-radius) 0 0 var(--primary-bg-color);
+}
+.steps-group .steps-group > .step:first-child::before {
+  top: calc(-1 * var(--vertical-level-offset));
+  height: calc(var(--timeline-top-offset) + var(--vertical-level-offset) - var(--timeline-width));
+  border-width: var(--timeline-bend-top-right-border-width);
+  border-top-right-radius: var(--timeline-border-bottom-left-radius);
+  box-shadow: var(--timeline-before-box-shadow);
+}
+.steps-group:has(> .step:last-child > .step__details[open] > .steps-group) {
+  padding-bottom: 0;
+}
+.steps-group .steps-group::before,
+.steps-group .steps-group::after,
 .step::after,
+.steps-group .steps-group > .step:last-child > .step__details > .step__head::after,
+.steps-group .steps-group > .step:last-child > .step__head::after,
+.steps-group .steps-group > .step:first-child::before,
 .step__popover-button::after {
   content: '';
   position: absolute;
   border-style: solid;
 }
+.steps-group::before,
+.steps-group::after,
+.step::before,
 .step::after,
 .step__head::after,
 .step__popover-button::after {
   border-color: var(--timeline-color);
 }
+.steps-group .steps-group::before {
+  top: 0;
+  left: calc(var(--timeline-left-offset) + var(--horizontal-level-offset) * var(--level));
+  width: var(--horizontal-level-offset);
+  height: var(--timeline-border-radius);
+  border-width: var(--timeline-bend-top-left-border-width);
+  border-bottom-left-radius: var(--timeline-border-bottom-left-radius);
+}
+.steps-group .steps-group::after {
+  width: calc(var(--horizontal-level-offset) * (var(--level) + 1));
+  height: calc(
+    var(--details-open-summary-margin-bottom) + var(--timeline-top-offset) +
+      var(--timeline-border-radius)
+  );
+  border-width: var(--timeline-width) 0 0 var(--timeline-width);
+  border-top-left-radius: var(--timeline-border-radius);
+  left: var(--timeline-left-offset);
+  bottom: 0;
+}
 .step__details[open] > .step__head {
   margin-bottom: var(--details-open-summary-margin-bottom);
 }
@@ -669,29 +953,33 @@ a:visited {
   margin-right: 0;
   border-width: 1px 0 0 var(--timeline-width);
 }
-.step:last-child:not(.steps-group .steps-group > .step)::after {
+.steps-group .steps-group > .step:last-child::after {
+  bottom: calc(-1 * var(--vertical-level-offset) + var(--timeline-border-radius));
+}
+.step:last-child:not(.steps-group .steps-group > .step)::after,
+.steps-group:has(> .step:last-child > .step__details[open] > .steps-group)::after {
   display: none;
 }
-.test-link[data-status="failed"]::after,
-.test-link[data-status="unknown"]::after,
-.step[data-status="failed"]::after,
-.step[data-status="failed"] > .step__popover-button::after,
-.steps-group:has(> .step:last-child[data-status="failed"])::after/* ?? */ {
+.tests-directory[data-status='failed']::before,
+.test-link[data-status='failed']::after,
+.test-link[data-status='unknown']::after,
+.step[data-status='failed']::after,
+.step[data-status='failed'] > .step__details > .step__head::after,
+.step[data-status='failed'] + .step::before,
+.step[data-status='failed'] > .step__popover-button::after,
+.steps-group:has(> .step:last-child[data-status='failed'])::after,
+.step[data-status='failed'] > .step__details > .steps-group > .step:first-child::before,
+.step[data-status='failed'] > .step__details > .steps-group::before {
   border-color: var(--failed-line-color);
 }
 .step__popover-button:hover,
 .step:has(> .step__popover-button:hover)::after,
+.step:has(> .step__popover-button:hover) .steps-group,
 .step:has(> .step__popover-button:hover) > .step__details,
-.steps-group:has(> .step:last-child > .step__popover-button:hover)::after /* ??? */ {
+.steps-group:has(> .step:last-child > .step__popover-button:hover)::after {
   --timeline-color: hsl(120 100% 30%);
   --failed-line-color: hsl(0 100% 46%);
 }
-
-/* test */
-.column-2 .empty {
-  display: none;
-}
-
 .tests-group {
   --test-link-margin-left-right: 3px;
   --test-link-padding-top-bottom: 8px;
@@ -712,9 +1000,16 @@ a:visited {
   contain: layout paint;
   display: flex;
   flex-direction: column;
-  margin-left: calc(var(--retry-padding) + var(--line-width));
+  margin-left: calc(var(--horizontal-line-to-icon-width) + var(--test-link-half-icon-width));
+}
+.tests-group:not(.tests-group .tests-group) {
+  margin-left: var(--retry-padding);
+}
+.tests-directory[open] {
+  margin-bottom: var(--tests-group-open-margin-bottom);
 }
 .tests-group::after,
+.tests-directory::before,
 .tests-group > .test-link::after {
   content: '';
   display: block;
@@ -727,10 +1022,14 @@ a:visited {
   bottom: 0;
   z-index: 100;
 }
+.tests-directory::before {
+  --translate-y: calc(100% - var(--test-link-padding-top-bottom) - var(--half-line-height) - 1px);
+}
 .tests-group > .test-link::after {
   --translate-y: calc(100% - var(--half-line-height));
   width: calc(var(--horizontal-line-to-icon-width) - 2px);
 }
+.tests-directory::before,
 .test-link::after {
   height: 100%;
   box-sizing: border-box;
@@ -740,14 +1039,17 @@ a:visited {
   transform: rotate(180deg) translate(0, var(--translate-y));
   z-index: 3;
 }
+.tests-directory:last-child::before,
 .test-link:last-child::after {
   border-top-right-radius: var(--main-radius);
 }
+.tests-directory[data-status='failed']::before,
 .test-link[data-status='failed']::after,
 .test-link[data-status='unknown']::after {
   z-index: 50;
 }
-.test-link {
+.test-link,
+.tests-directory__title {
   margin: 0 var(--test-link-margin-left-right) 0
     calc(var(--test-link-margin-left-right) + var(--line-width));
   padding: var(--test-link-padding-top-bottom, 8px) var(--test-link-padding-left-right, 10px);
@@ -764,7 +1066,7 @@ a:visited {
 .test-link {
   container-type: inline-size;
   margin-bottom: 1px;
-  /* flex-wrap: wrap; /* todo */
+  text-align: left;
 }
 .test-link:visited {
   color: currentColor;
@@ -783,13 +1085,18 @@ a:visited {
 }
 .step > .step__details > .step__head:hover,
 .step-attachment__title:hover,
-.test-link:hover:not([aria-current='true']) {
+.test-link:hover:not([aria-current='true']),
+.tests-directory > .tests-directory__title:hover {
   background-color: var(--item-hover-bg-color);
 }
+.tests-directory__title,
 .step__details > .step__head {
   cursor: pointer;
 }
-
+.tests-directory__title {
+  margin-bottom: 1px;
+  position: relative;
+}
 .step__screenshot-button,
 .screenshot-dialog__close {
   --transition-outline-offset: outline-offset 0.05s linear, box-shadow 0.15s ease-in;
@@ -815,23 +1122,48 @@ a:visited {
 .screenshot-dialog__close:hover {
   box-shadow: 0 0 0 1px currentColor;
 }
-.step__details > .step__head,
-.step-attachment__title {
-  --margin-bottom: 5px;
-
-  transition:
-    margin-bottom 0.1s ease-in,
-    var(--transition-outline-offset);
-}
+.tests-directory[open] > .tests-directory__title,
 .step-attachment[open] > .step-attachment__title {
   margin-bottom: var(--margin-bottom);
 }
 .step__head::before,
+.tests-directory__title::before,
 .test-link::before {
   margin-right: var(--icon-margin-right);
   position: relative;
   top: calc(var(--half-line-height) - var(--icon-size-without-offset) / 2);
 }
+.tests-directory__title::before {
+  --border-width: 1px;
+  --offset: 3px;
+  --icon-line-width: 1px;
+
+  color: var(--tests-group-line-color);
+  border-radius: 1px;
+  background-image:
+    linear-gradient(
+      var(--transparent-color) calc(50% - var(--icon-line-width) / 2),
+      currentColor 0 calc(50% + var(--icon-line-width) / 2),
+      var(--transparent-color) 0
+    ),
+    linear-gradient(
+      90deg,
+      var(--transparent-color) calc(50% - var(--icon-line-width) / 2),
+      currentColor 0 calc(50% + var(--icon-line-width) / 2),
+      var(--transparent-color) 0
+    );
+}
+.tests-directory[open] > .tests-directory__title::after {
+  content: '';
+  position: absolute;
+  top: calc(var(--half-line-height) + var(--test-link-padding-top-bottom) + var(--icon-size) / 2);
+  left: calc(var(--test-link-padding-left-right) + var(--test-link-half-icon-width));
+  bottom: calc(-1 * var(--margin-bottom));
+  display: block;
+  width: 0;
+  border-left: var(--line-width) solid var(--tests-group-line-color);
+  z-index: 10;
+}
 .test-link:hover::before,
 .step__details > .step__head:hover::before,
 .screenshot-dialog__close:hover::before {
@@ -848,6 +1180,12 @@ a:visited {
   grid-column: 1/-1;
   overflow-wrap: break-word;
   overflow: hidden;
+  text-align: left;
+}
+.tests-directory[data-status='failed'] > .tests-directory__title::before,
+.tests-directory[data-status='failed'] > .tests-directory__title::after {
+  color: var(--failed-line-color);
+  border-color: currentColor;
 }
 .test-link__main-params {
   font-family: monospace;
@@ -942,8 +1280,6 @@ dialog > img {
   height: auto;
   display: block;
 }
-
-/* test */
 [popover] {
   border: none;
   margin-inline: auto;
@@ -966,6 +1302,13 @@ dialog > img {
   background: none;
   translate: -100% 0;
 }
+.steps-group > .step:not(:last-child):has(> .step__details[open] > .steps-group) {
+  margin-bottom: calc(-1 * var(--timeline-top-offset));
+  padding-bottom: 0;
+}
+.steps-group > .step:not(:last-child):has(> .step__details[open] > .steps-group)::after {
+  bottom: 0;
+}
 .step__popover-button:focus,
 .step__popover-button:active,
 .step__popover-button:hover {
@@ -975,29 +1318,10 @@ dialog > img {
   background: none;
   outline: none;
 }
-.main {
-  contain: layout;
-  container-type: inline-size;
-}
-@container (min-width: 550px) {
-  .column-2 {
-    width: 350px;
-  }
-}
-@container (min-width: 1000px) {
-  .column-2 {
-    width: 650px;
-  }
-}
-@container (min-width: 350px) {
-  .test-link__name,
-  .step__name {
-    grid-column: 2;
-    grid-row: 1;
-  }
-}
-
 button,
+.retry-link,
+.test-link,
+.tests-directory__title,
 .step__details > .step__head,
 .step-attachment__title,
 .step__popover-button:focus-visible {
@@ -1006,50 +1330,47 @@ button,
   outline: 2px solid transparent;
   transition: var(--transition-outline-offset);
 }
+.tests-directory__title,
+.step__details > .step__head,
+.step-attachment__title {
+  --margin-bottom: 5px;
+
+  transition:
+    margin-bottom 0.1s ease-in,
+    var(--transition-outline-offset);
+}
 button:focus-visible,
+.retry-link:focus-visible,
+.test-link:focus-visible,
+.tests-directory__title:focus-visible,
 .step__details > .step__head:focus-visible,
 .step-attachment__title:focus-visible,
 .step__popover-button:focus-visible {
   outline-color: var(--accent-color);
   outline-offset: -2px;
 }
-
-/*
-.status-detail /* todo / {
-  width: 100%;
-  display: flex;
-  overflow: auto;
-}
-.status-detail_status_failed {
-  background-color: var(--failed-status-bg-color); /* ??? /
-}
-.status-detail__content {
-  flex-grow: 1;
-  padding: 0 var(--test-details-padding);
-}
-.status-detail__button-text {
-  padding: 10px 0;
-  width: 100%;
-  display: block;
-  white-space: pre-wrap;
+.main {
+  contain: layout;
+  container-type: inline-size;
 }
-.test-details-empty /* check if this block is needed / {
-  padding: var(--test-details-padding);
-  text-align: center;
+@container (min-width: 350px) {
+  .test-link__name,
+  .step__name {
+    grid-column: 2;
+    grid-row: 1;
+  }
 }
-*/
 
 @media (min-width: 390px) {
   .main {
     flex-direction: row;
   }
+  .column-2 {
+    width: calc(40% - var(--drag-container-width));
+  }
   .column-3 {
     max-height: 100vh;
-    /* position: sticky; */
-    /* will-change: transform; */
-    /* position: sticky; */
     will-change: transform;
-    top: 0px;
     flex: 1 0 180px;
     overflow-y: scroll;
   }
@@ -1073,7 +1394,14 @@ button:focus-visible,
     translate: -50% 0;
   }
   .drag-container:hover::after {
-    background-color: var(--font-color); /* var(--arrow-color) */
+    background-color: var(--font-color);
+  }
+  .test-details__title {
+    font-size: 24px;
+    line-height: 32px;
+  }
+  .test-details__title .color-cell {
+    font-size: 21px;
   }
   .test-link[aria-current='true'] {
     --offset: calc(-1 * (var(--box-shadow-width) + 1px));
@@ -1085,19 +1413,6 @@ button:focus-visible,
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
   }
-  .test-details__title {
-    font-size: 24px;
-    line-height: 32px;
-  }
-  .test-details__title .color-cell {
-    font-size: 21px;
-  }
-}
-
-@media (min-width: 576px) {
-  .test-list {
-    margin-left: var(--retry-padding); /* 10px; ??? check in other screen resolutions */
-  }
 }
 @media (min-width: 769px) {
   body {
@@ -1128,10 +1443,15 @@ button:focus-visible,
     flex-direction: column;
     overflow-x: hidden;
   }
+  .retry-link[aria-current] {
+    box-shadow: 3px 0 0 0 var(--accent-color) inset;
+  }
 }
 @media (min-width: 1367px) {
   .retry-link,
-  .test-link {
+  .test-link,
+  .tests-directory__title,
+  .test-tabs__button {
     min-height: auto;
   }
 }