@testomatio/reporter 2.6.0 → 2.6.2

package/src/template/testomatio.hbs

@@ -4,22 +4,22 @@
     <meta charset='UTF-8' />
     <meta
       name='viewport'
-      content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
+      content='width=device-width, initial-scale=1.0'
     />
     <meta http-equiv='X-UA-Compatible' content='ie=edge' />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
     <link
-      href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css'
+      href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css'
       rel='stylesheet'
-      integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC'
+      integrity='sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM'
       crossorigin='anonymous'
     />
     <link
       rel='stylesheet'
-      href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css'
-      integrity='sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=='
+      href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'
+      integrity='sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=='
       crossorigin='anonymous'
       referrerpolicy='no-referrer'
     />
@@ -29,1393 +29,3436 @@
       <title>Report Testomat.io</title>
     {{/if}}
     <style>
+        :root {
+            --primary-color: #6366f1;
+            --primary-hover: #4f46e5;
+            --success-color: #10b981;
+            --danger-color: #ef4444;
+            --warning-color: #f59e0b;
+            --info-color: #3b82f6;
+            --gray-50: #f9fafb;
+            --gray-100: #f3f4f6;
+            --gray-200: #e5e7eb;
+            --gray-300: #d1d5db;
+            --gray-400: #9ca3af;
+            --gray-500: #6b7280;
+            --gray-600: #4b5563;
+            --gray-700: #374151;
+            --gray-800: #1f2937;
+            --gray-900: #111827;
+            --border-radius: 12px;
+            --transition: all 0.2s ease;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
         body {
-            padding: 0;
             margin: 0;
-            font-family: "Inter", sans-serif;
+            padding: 0;
+            font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: var(--gray-800);
         }
 
-        header,
-        div,
-        p,
-        form,
-        input,
-        a,
-        span,
-        button {
-            box-sizing: border-box;
+        .main-container {
+            background: rgba(255, 255, 255, 0.98);
+            backdrop-filter: blur(20px);
+            margin: 20px auto;
+            max-width: 1400px;
+            border-radius: 20px;
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            overflow: hidden;
+            overflow-y: auto;
         }
-        img {
-            width: 100%;
-            display: block;
-            max-width: 100%;
-            height: auto;
+
+        .header {
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+            color: white;
+            padding: 30px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 20px;
         }
-        p, span {
-            font-weight: 400;
-            font-size: 14px;
-            color: grey;
+
+        .header-title {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+
+        .header-title h1 {
             margin: 0;
+            font-size: 28px;
+            font-weight: 700;
+            transition: color 0.3s ease;
         }
-        .report {
-            padding-top: 15px;
+
+        .header-title h1.status-passed {
+            color: var(--success-color);
         }
-        .level_1 {
-            margin-bottom: 20px;
-            border-bottom: 2px solid #ABABAB;
-            padding-bottom: 20px;
+
+        .header-title h1.status-failed {
+            color: var(--danger-color);
         }
-        .header {
+
+        .header-title h1.status-skipped {
+            color: var(--warning-color);
+        }
+
+        .header-title h1.status-todo {
+            color: #8b5cf6;
+        }
+
+        .header-badge {
+            background: rgba(255, 255, 255, 0.2);
+            padding: 6px 16px;
+            border-radius: 20px;
+            font-size: 14px;
+            font-weight: 500;
+            backdrop-filter: blur(10px);
+        }
+
+        .header-actions {
             display: flex;
-            justify-content: space-between;
+            gap: 15px;
             align-items: center;
         }
-        .header__point {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            margin-right: 15px;
+
+        .run-info {
+            background: rgba(255, 255, 255, 0.15);
+            padding: 8px 16px;
+            border-radius: 8px;
+            font-size: 14px;
+        }
+
+        .btn-primary-custom {
+            background: rgba(255, 255, 255, 0.9);
+            color: var(--primary-color);
+            border: none;
+            padding: 10px 24px;
+            border-radius: 8px;
+            font-weight: 600;
+            text-decoration: none;
+            transition: var(--transition);
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .btn-primary-custom:hover {
+            background: white;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            color: var(--primary-hover);
         }
-        .header__point_red {
-            background: red;
+
+        .btn-primary-custom:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .stats-section {
+            padding: 30px;
+            background: var(--gray-50);
+            border-bottom: 1px solid var(--gray-200);
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: 2fr 1fr;
+            gap: 30px;
+            margin-bottom: 30px;
+        }
+
+        .chart-container {
+            background: white;
+            padding: 25px;
+            border-radius: var(--border-radius);
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            min-height: 400px;
+            overflow: visible !important;
+        }
+
+        .chart-section {
+            width: 100%;
+            overflow: hidden;
+        }
+
+        #testChart {
+            width: 100% !important;
+            max-width: 100% !important;
+        }
+
+        /* Google Charts tooltip stabilization */
+        #testChart > div > div[style*="position: absolute"] {
+            pointer-events: none !important;
+            will-change: transform, opacity !important;
+            backface-visibility: hidden !important;
+            transform: translateZ(0) !important;
+        }
+
+        .google-visualization-tooltip {
+            pointer-events: none !important;
+            opacity: 1 !important;
+            transition: none !important;
         }
-        .header__block {
+
+        .stats-info {
+            background: white;
+            padding: 25px;
+            border-radius: var(--border-radius);
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
             display: flex;
-            align-items: center;
+            flex-direction: column;
+            justify-content: center;
+            gap: 20px;
         }
-        .header__case {
+
+        .stat-card {
             display: flex;
+            justify-content: space-between;
             align-items: center;
-            margin-right: 15px;
+            padding: 12px 0;
+            border-bottom: 1px solid var(--gray-100);
         }
-        .header__case p {
-            margin-right: 7px;
+
+        .stat-card:last-child {
+            border-bottom: none;
         }
-        .header__case span {
-            color: black;
+
+        .stat-label {
+            font-size: 13px;
+            color: var(--gray-600);
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
-        .header__block button {
-            margin-left: 15px;
+
+        .stat-value {
+            font-size: 16px;
+            font-weight: 700;
+            color: var(--gray-900);
         }
-        .header__type {
-            font-size: 15px;
+
+        .status-badge {
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 12px;
             font-weight: 600;
-            background: #CA95FF;
-            color: #FFF;
-            border-radius: 5px;
-            padding: 5px 35px;
-            margin-right: 15px;
-        }
-        .btn {
-            box-shadow:none!important;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
         }
-        .btn-report {
-            text-decoration: none;
-            font-weight: 600;
-            background: #CA95FF;
-            color: #FFF!important;
-            border-radius: 5px;
-            padding: 9px 37px;
-            font-size: 15px;
+
+        .status-passed {
+            color: var(--success-color);
         }
-        .run-style {
-            color: #5D5C5D;
+
+        .status-failed {
+            color: var(--danger-color);
         }
-        .run-span {
-            font-weight: 800!important;
-            color: #5D5C5D!important;
+
+        .status-skipped {
+            color: var(--warning-color);
         }
-        .btn-report:hover {
-            background: #B468FF;
+
+        .status-running {
+            color: var(--info-color);
         }
-        .border-none {
-            border: none;
+
+        .controls-section {
+            padding: 30px;
+            background: white;
+            border-bottom: 1px solid var(--gray-200);
         }
-        .level_4 {
-            height: 53px!important;
-        }
-        .inputSearch:focus {
-            box-shadow: none;
-            border: 1px solid black!important;
-            background: #FFF!important;
-            border-radius: 3px;
-        }
-        .btn-all {
-            border: 1px solid #A0CAFF!important;
-        }
-        .btn-passed {
-            border: 1px solid #75B583!important;
-        }
-        .btn-failed {
-            border: 1px solid #FF6363!important;
-        }
-        .btn-skipped {
-            border: 1px solid #FFC350!important;
-        }
-        .btn-all:hover,
-        .btn-all:focus {
-            color: #A0CAFF!important;
-            background: #FFF!important;
-            border: 1px solid #A0CAFF!important;
-            font-weight: 700!important;
-        }
-        .btn-all:hover span,
-        .btn-all:focus span {
-            color: #A0CAFF!important;
-            font-weight: 700!important;
-        }
-        .allTest:checked + .btn-all span {
-            color: #A0CAFF!important;
-        }
-        .allTest:checked + .btn-all {
-            color:#A0CAFF!important;
-            background: #FFF!important;
-            border: 1px solid #A0CAFF!important;
-            font-weight: 700!important;
-        }
-        .btn-passed:hover,
-        .btn-passed:focus {
-            color: #75B583!important;
-            border: 1px solid #75B583!important;
-            background: #FFF!important;
-            font-weight: 700!important;
-        }
-        .btn-passed:hover span,
-        .btn-passed:focus span {
-            color: #75B583!important;
-            font-weight: 700!important;
-        }
-        .passedTest:checked + .btn-passed span {
-            color: #75B583!important;
-            font-weight: 700!important;
-        }
-        .passedTest:checked + .btn-passed {
-            color: #75B583!important;
-            border: 1px solid #75B583!important;
-            background: #FFF!important;
-            font-weight: 700!important;
-        }
-        .btn-failed:hover,
-        .btn-failed:focus {
-            color: #FF6363!important;
-            border: 1px solid #FF6363!important;
-            background: #FFF!important;
-            font-weight: 700!important;
-        }
-        .btn-failed:hover span,
-        .btn-failed:focus span {
-            color: #FF6363!important;
-            font-weight: 700!important;
-        }
-        .failedTest:checked + .btn-failed span {
-            color: #FF6363!important;
-            font-weight: 700!important;
-        }
-        .failedTest:checked + .btn-failed {
-            color: #FF6363!important;
-            border: 1px solid #FF6363!important;
-            background: #FFF!important;
-            font-weight: 700!important;
-        }
-        .btn-skipped:hover,
-        .btn-skipped:focus {
-            color: #FFC350!important;
-            border: 1px solid #FFC350!important;
-            background: #FFF!important;
-            font-weight: 700!important;
-        }
-        .btn-skipped:hover span,
-        .btn-skipped:focus span {
-            color: #FFC350!important;
-            font-weight: 700!important;
-        }
-        .skippedTest:checked + .btn-skipped span {
-            color: #FFC350!important;
-            font-weight: 700!important;
-        }
-        .skippedTest:checked + .btn-skipped {
-            color: #FFC350!important;
-            border: 1px solid #FFC350!important;
-            background: #FFF!important;
-            font-weight: 700!important;
-        }
-        .passed {
-            color: #75B583;
-        }
-        .failed {
-            color: #FF6363;
-        }
-        .skipped {
-            color: #FFC350;
-        }
-        .testWrapp {
-            margin-top: 45px;
-        }
-        .fa-arrow-right {
-            display: none!important;
-        }
-        .header__type:hover {
-            background: #B468FF;
-        }
-        .header__case i {
-            color: grey;
-            margin-right: 5px;
-        }
-        .title {
-            display: flex;
-            margin-bottom: 20px;
+
+        .search-container {
+            position: relative;
+            margin-bottom: 25px;
         }
-        .title p {
-            color: #262523;
+
+        .search-input {
+            width: 100%;
+            padding: 15px 20px 15px 50px;
+            border: 2px solid var(--gray-200);
+            border-radius: var(--border-radius);
             font-size: 15px;
-            font-weight: 500;
-            margin-right: 5px;
+            transition: var(--transition);
+            background: var(--gray-50);
+        }
+
+        .search-input:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            background: white;
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+
+        .search-icon {
+            position: absolute;
+            left: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--gray-400);
+            font-size: 18px;
         }
-        .statright {
+
+        .filters-container {
             display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: space-between;
         }
-        .statdesc {
+
+        .filter-tabs {
             display: flex;
-            flex-direction: column;
+            gap: 8px;
+            background: var(--gray-100);
+            padding: 4px;
+            border-radius: var(--border-radius);
         }
-        .statdesc__row {
-            padding: 15px 25px;
+
+        .filter-tab {
+            padding: 10px 20px;
+            border: none;
+            background: transparent;
+            border-radius: 8px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: var(--transition);
             display: flex;
-            border-radius: 5px;
+            align-items: center;
+            gap: 8px;
+            color: var(--gray-600);
+            font-size: 14px;
         }
-        .statdesc__row_first {
-            width: 150px;
+
+        .filter-tab:hover {
+            background: rgba(255, 255, 255, 0.5);
         }
-        .statdesc__row:nth-child(odd) {
-            background: #F6FAFF;
+
+        .filter-tab.active {
+            background: white;
+            color: var(--primary-color);
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
         }
-        .statdesc__row p,
-        .statdesc__row span {
-            font-weight: semi-bold;
-            font-size: 11px;
+
+        .filter-tab .count {
+            background: var(--gray-200);
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: 600;
         }
-        .statdesc {
-            width: 100%;
+
+        .filter-tab.active .count {
+            background: var(--primary-color);
+            color: white;
         }
-        .statstatus {
+
+        .pagination-control {
             display: flex;
             align-items: center;
+            gap: 15px;
         }
-        .statstatus p {
-            font-weight: bold;
+
+        .pagination-select {
+            padding: 10px 15px;
+            border: 2px solid var(--gray-200);
+            border-radius: 8px;
+            background: white;
+            font-size: 14px;
+            cursor: pointer;
+            transition: var(--transition);
         }
-        .statstatus div {
-            font-weight: bold;
+
+        .pagination-select:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
         }
-        .statstatus_failed div {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            margin-right: 5px;
+
+        .tests-section {
+            padding: 30px;
+            background: white;
+            min-height: 400px;
         }
-        .statstatus_failed p {
-            color: red;
-            text-transform: uppercase;
+
+        .test-item {
+            background: white;
+            border: 2px solid var(--gray-200);
+            border-radius: var(--border-radius);
+            margin-bottom: 20px;
+            overflow: hidden;
+            transition: var(--transition);
         }
-        .statstatus_failed div {
-            background: red;
+
+        .test-item:hover {
+            border-color: var(--primary-color);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
-        .statstatus_passed div {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            margin-right: 5px;
-            text-transform: uppercase;
+
+        .test-header {
+            padding: 20px;
+            background: var(--gray-50);
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: var(--transition);
         }
-        .statstatus_passed div {
-            background: green;
+
+        .test-header:hover {
+            background: var(--gray-100);
         }
-        .statstatus_passed p {
-            color: green;
-            text-transform: uppercase;
+
+        .test-info {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            flex: 1;
         }
-        .statstatus_skipped div{
-            width: 10px;
-            height: 10px;
+
+        .test-status-icon {
+            width: 40px;
+            height: 40px;
             border-radius: 50%;
-            margin-right: 5px;
-            text-transform: uppercase;
-        }
-        .statstatus_skipped div {
-            background: yellow;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            font-weight: 600;
         }
-        .statstatus_skipped p {
-            color: yellow;
-            text-transform: uppercase;
+
+        .test-status-icon.passed {
+            background: rgba(16, 185, 129, 0.1);
+            color: var(--success-color);
         }
-        .fa-magnifying-glass {
-            font-size: 24px;
-            color: gray;
+
+        .test-status-icon.failed {
+            background: rgba(239, 68, 68, 0.1);
+            color: var(--danger-color);
         }
-        .numTest {
-            font-weight: 500;
-            font-size: 16px;
-            color: #0D6EFD;
+
+        .test-status-icon.skipped {
+            background: rgba(245, 158, 11, 0.1);
+            color: var(--warning-color);
         }
-        .testitem {
-            border: 1px solid grey;
-            border-radius: 3px;
-            margin-bottom: 15px;
+
+        .test-details {
+            flex: 1;
         }
-        .testitem__top {
-            width: 100%;
+
+        .test-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: var(--gray-900);
+            margin-bottom: 5px;
             display: flex;
-            background: #F6FAFF;
-            padding: 15px 13px 15px 30px;
-            border-radius: 10px;
-            cursor: pointer;
-            justify-content: space-between;
+            align-items: center;
+            gap: 8px;
+            flex-wrap: wrap;
         }
-        .testitem__icon {
-            display: flex;
+
+        .artifact-upload-indicator {
+            display: inline-flex;
             align-items: center;
             justify-content: center;
-            width: 30px;
-            margin-right: 5px;
+            width: 20px;
+            height: 20px;
+            color: var(--primary-color);
+            font-size: 14px;
+            flex-shrink: 0;
         }
-        .testitem__ico {
-            font-size: 18px;
+
+        .artifact-upload-indicator:hover {
+            transform: scale(1.1);
+            transition: transform 0.2s ease;
         }
-        .testitem__name {
-            font-weight: 700;
-            color: black;
-            font-size: 16px;
+
+        .test-suite {
+            font-size: 14px;
+            color: var(--gray-600);
         }
-        .testitem__body {
+
+        .test-meta {
             display: flex;
-            background-color: #FFF;
-            margin-top: 10px;
+            align-items: center;
+            gap: 20px;
         }
-        .testitem__menu {
+
+        .test-duration {
             display: flex;
-            flex-direction: column;
-            padding: 21px 51px 21px 51px;
+            align-items: center;
+            gap: 5px;
+            color: var(--gray-500);
+            font-size: 14px;
         }
-        .testitem__mitem {
-            font-size: 15px;
+
+        .test-badges {
+            display: flex;
+            gap: 8px;
+        }
+
+        .badge {
+            padding: 4px 10px;
+            border-radius: 12px;
+            font-size: 11px;
             font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.3px;
+        }
+
+        .badge-flaky {
+            background: rgba(245, 158, 11, 0.1);
+            color: var(--warning-color);
+        }
+
+        .badge-retry {
+            background: rgba(59, 130, 246, 0.1);
+            color: var(--info-color);
+        }
+
+        .expand-icon {
+            color: var(--gray-400);
+            transition: var(--transition);
+            font-size: 18px;
+        }
+
+        .test-item.expanded .expand-icon {
+            transform: rotate(180deg);
+        }
+
+        .test-content {
+            display: none;
+            border-top: 1px solid var(--gray-200);
+        }
+
+        .test-item.expanded .test-content {
+            display: block;
+        }
+
+        .test-group {
+            background: white;
+            border: 2px solid var(--gray-200);
+            border-radius: var(--border-radius);
+            margin-bottom: 20px;
+            overflow: hidden;
+            transition: var(--transition);
+        }
+
+        .test-group:hover {
+            border-color: var(--primary-color);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+
+        .test-group-header {
+            padding: 20px;
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+            color: white;
             cursor: pointer;
-            color: #808080;
-            width: 170px;
-            height: 65px;
-            text-align: center;
-            padding-top: 20px;
-            padding-bottom: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: var(--transition);
         }
-        .testitem__mitem_active {
-            background: #F6FAFF;
-            color: #4D4C4C;
-            font-weight: 700;
+
+        .test-group-header:hover {
+            filter: brightness(1.1);
         }
-        .testitem__case {
+
+        .test-group-title {
             display: flex;
-            flex-direction: column;
-            padding: 10px;
+            align-items: center;
+            gap: 15px;
+            flex: 1;
         }
-        .testitem__title {
+
+        .test-group-name {
             font-size: 18px;
-            color: black;
             font-weight: 700;
-            margin-bottom: 15px;
-            text-decoration: underline;
         }
-        .testitem__block p {
+
+        .test-group-count {
+            background: rgba(255, 255, 255, 0.2);
+            padding: 6px 16px;
+            border-radius: 20px;
             font-size: 14px;
-            white-space: pre-line;
+            font-weight: 600;
         }
-        .test__empty__list {
-            margin-bottom: 10px;
-            color: grey;
+
+        .test-group-stats {
+            display: flex;
+            gap: 20px;
+            font-size: 14px;
+            margin-right: 10px;
         }
-        .testitem__content {
-            width: 92%;
+
+        .test-group-stat {
+            display: flex;
+            align-items: center;
+            gap: 6px;
         }
-        /* Pagination component styles*/
-        .page-link {
-            color: black;
-            background-color: #F6FAFF;
-            padding: 7px 19px;
-            font-weight: 600;
-            border-radius: 3px;
+
+        .test-group-expand {
+            color: white;
+            transition: var(--transition);
+            font-size: 18px;
         }
-        .page-link:hover {
-            color: black;
+
+        .test-group.expanded .test-group-expand {
+            transform: rotate(180deg);
         }
-        .form-select {
-            background-color:#F6FAFF;
+
+        .test-group-content {
+            display: none;
+            background: var(--gray-50);
         }
-        .form-select:focus {
-            border-color: #ADADAD;
-            box-shadow: 0 0 0 0.25rem rgb(67 71 78 / 25%);
+
+        .test-group.expanded .test-group-content {
+            display: block;
         }
-        .page-item:not(:first-child) {
-            margin-left: 15px;
+
+        .test-group-content .test-item {
+            border: none;
+            border-bottom: 1px solid var(--gray-200);
+            border-radius: 0;
+            margin-bottom: 0;
         }
-        .page-item.active .page-link {
-            background: #F6FAFF;
-            border: 2px solid #4384FE;
-            color: black;
+
+        .test-group-content .test-item:last-child {
+            border-bottom: none;
         }
-        .noData {
+
+        .test-tabs {
             display: flex;
-            align-items: center;
-            flex-direction: column;
-            justify-content: center;
-            margin-bottom: 150px;
+            background: var(--gray-50);
+            border-bottom: 1px solid var(--gray-200);
         }
-        .noDataText {
-            font-weight: 600;
-            font-size: 20px;
-            color: #A1A1A1;
+
+        .test-tab {
+            padding: 15px 25px;
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-weight: 500;
+            color: var(--gray-600);
+            transition: var(--transition);
+            position: relative;
         }
-    </style>
-</head>
 
-<body class='bg-gray-50 pt-6 px-4 lg:pt-4 lg:px-40 h-full;'>
-    <section class='report' id='report'>
-        <div class='container'>
-            <!-- top -->
-            <div class='row level_1'>
-                <div class='col-12'>
-                    <div class='header'>
-                        <div class='header__block'>
-                            <p class='header__type'>
-                                automated job
-                            </p>
-                        </div>
-                        <div class='header__block'>
-                        {{#if runId}}
-                            <div class='header__case run-style'>
-                            <p>Run</p>
-                            <span class='run-span'><strong>#</strong>{{runId}}</span>
-                            </div>
-                        {{/if}}
-                        </div>
-                        <div class='header__block'>
-                        {{#if runUrl}}
-                            <a href='{{runUrl}}' target='_blank' class='btn-report'>
-                                Full Report
-                            </a>
-                            {{else}}
-                            <button class='btn-report border-none' disabled>
-                                Full Report
-                            </button>
-                        {{/if}}
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- top -->
+        .test-tab:hover {
+            color: var(--primary-color);
+            background: rgba(255, 255, 255, 0.5);
+        }
+
+        .test-tab.active {
+            color: var(--primary-color);
+            background: white;
+        }
+
+        .test-tab.active::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: var(--primary-color);
+        }
+
+        .test-tab-content {
+            padding: 25px;
+            display: none;
+        }
+
+        .test-tab-content.active {
+            display: block;
+        }
+
+        .code-block {
+            background: var(--gray-900);
+            color: #e5e7eb;
+            padding: 20px;
+            border-radius: 8px;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 14px;
+            line-height: 1.5;
+            overflow-x: auto;
+            white-space: pre-wrap;
+        }
+
+        .steps-container {
+            max-height: 500px;
+            overflow-y: auto;
+            border: 1px solid var(--gray-200);
+            border-radius: 8px;
+            background: white;
+        }
+
+        .step-item {
+            padding: 12px 16px;
+            border-bottom: 1px solid var(--gray-100);
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+            transition: var(--transition);
+            position: relative;
+        }
+
+        .step-item:hover {
+            background: var(--gray-50);
+        }
+
+        .step-item:last-child {
+            border-bottom: none;
+        }
+
+        .step-number {
+            flex-shrink: 0;
+            width: 28px;
+            height: 28px;
+            border-radius: 50%;
+            background: var(--primary-color);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            font-weight: 600;
+            margin-top: 2px;
+        }
+
+        .step-content {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .step-text {
+            font-size: 14px;
+            color: var(--gray-700);
+            line-height: 1.5;
+            margin: 0;
+            word-break: break-word;
+        }
+
+        .step-time {
+            font-size: 12px;
+            color: var(--gray-500);
+            margin-top: 4px;
+        }
+
+        .step-status {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            margin-top: 8px;
+            flex-shrink: 0;
+        }
+
+        .step-status.passed {
+            background: var(--success-color);
+        }
+
+        .step-status.failed {
+            background: var(--danger-color);
+        }
+
+        .step-status.skipped {
+            background: var(--warning-color);
+        }
+
+        .step-category {
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--gray-500);
+            font-weight: 600;
+            margin-top: 4px;
+        }
+
+        .step-children {
+            position: relative;
+            margin-left: 48px;
+            padding-left: 0;
+        }
+
+        .step-children::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 2px;
+            background: var(--gray-300);
+        }
+
+        .step-children .step-item {
+            position: relative;
+        }
+
+        .step-children .step-item::before {
+            content: '';
+            position: absolute;
+            left: -16px;
+            top: 24px;
+            width: 16px;
+            height: 2px;
+            background: var(--gray-300);
+        }
+
+        .step-children .step-item:last-child {
+            border-bottom: none;
+        }
+
+        .step-level-0 {
+            padding-left: 16px;
+        }
+
+        .step-level-1 {
+            padding-left: 8px;
+        }
+
+        .step-level-2 {
+            padding-left: 16px;
+        }
+
+        .step-level-3 {
+            padding-left: 24px;
+        }
+
+        .step-level-4 {
+            padding-left: 32px;
+        }
+
+        .step-item[data-step-id] {
+            position: relative;
+        }
+
+        .step-item.step-level-0::before {
+            display: none;
+        }
+
+        .step-duration {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            font-size: 11px;
+            color: var(--gray-500);
+            margin-left: 8px;
+        }
+
+        .message-block {
+            background: var(--gray-50);
+            padding: 20px;
+            border-radius: 8px;
+            border-left: 4px solid var(--danger-color);
+            margin-bottom: 15px;
+        }
+
+        .message-block.info {
+            border-left-color: var(--info-color);
+        }
+
+        .metadata-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 15px;
+        }
+
+        .metadata-item {
+            background: var(--gray-50);
+            padding: 15px;
+            border-radius: 8px;
+        }
+
+        .metadata-key {
+            font-weight: 600;
+            color: var(--gray-700);
+            margin-bottom: 5px;
+            font-size: 14px;
+        }
+
+        .metadata-value {
+            color: var(--gray-600);
+            font-size: 14px;
+            word-break: break-all;
+        }
+
+        .attachments-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 20px;
+        }
+
+        .attachment-item {
+            background: var(--gray-50);
+            border-radius: 8px;
+            overflow: hidden;
+            transition: var(--transition);
+            cursor: pointer;
+        }
+
+        .attachment-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+
+        .attachment-image {
+            width: 100%;
+            height: 150px;
+            object-fit: cover;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+
+        .attachment-image:hover {
+            transform: scale(1.02);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        .attachment-file {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 150px;
+            background: white;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+
+        .attachment-file:hover {
+            transform: scale(1.02);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        .attachment-preview {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .attachment-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.7);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+            color: white;
+            font-size: 14px;
+            font-weight: 600;
+        }
+
+        .attachment-item:hover .attachment-overlay {
+            opacity: 1;
+        }
+
+        .attachment-actions {
+            display: flex;
+            gap: 8px;
+        }
+
+        .attachment-action {
+            padding: 6px 12px;
+            background: rgba(255, 255, 255, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 4px;
+            color: white;
+            text-decoration: none;
+            font-size: 12px;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+
+        .attachment-action:hover {
+            background: rgba(255, 255, 255, 0.3);
+            transform: translateY(-1px);
+        }
+
+        .attachment-icon {
+            font-size: 48px;
+            color: var(--gray-400);
+            margin-bottom: 10px;
+        }
+
+        .attachment-name {
+            padding: 12px;
+            font-size: 14px;
+            font-weight: 500;
+            color: var(--gray-700);
+            text-align: center;
+            border-top: 1px solid var(--gray-200);
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .attachment-size {
+            font-size: 11px;
+            color: var(--gray-500);
+            font-weight: 400;
+        }
+
+        .retry-info {
+            background: rgba(59, 130, 246, 0.05);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 20px;
+        }
+
+        .retry-title {
+            font-weight: 600;
+            color: var(--info-color);
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .retry-attempts {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+
+        .retry-attempt {
+            background: white;
+            border: 1px solid var(--gray-200);
+            border-radius: 6px;
+            padding: 8px 12px;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .retry-attempt.failed {
+            border-color: var(--danger-color);
+            color: var(--danger-color);
+        }
+
+        .retry-attempt.passed {
+            border-color: var(--success-color);
+            color: var(--success-color);
+        }
+
+        .traces-instruction {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 20px;
+            color: white;
+        }
+
+        .instruction-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 15px;
+        }
+
+        .instruction-content ol {
+            margin: 0;
+            padding-left: 20px;
+        }
+
+        .instruction-content li {
+            margin-bottom: 15px;
+            line-height: 1.6;
+        }
+
+        .instruction-content strong {
+            color: #fff;
+            font-weight: 600;
+        }
+
+        .instruction-content code {
+            background: rgba(0, 0, 0, 0.3);
+            color: #fff;
+            padding: 6px 10px;
+            border-radius: 6px;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 13px;
+            display: inline-block;
+            margin: 5px 0;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .traces-list {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .trace-download-item {
+            background: white;
+            border: 1px solid var(--gray-200);
+            border-radius: 8px;
+            padding: 15px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 15px;
+            transition: var(--transition);
+        }
+
+        .trace-download-item:hover {
+            border-color: var(--primary-color);
+            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
+        }
+
+        .trace-info {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            flex: 1;
+        }
+
+        .trace-info i {
+            font-size: 24px;
+            color: var(--warning-color);
+        }
+
+        .trace-name {
+            font-size: 14px;
+            font-weight: 500;
+            color: var(--gray-700);
+        }
+
+        .trace-download-btn {
+            background: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition);
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .trace-download-btn:hover {
+            background: var(--primary-hover);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+        }
+
+        .trace-download-btn:active {
+            transform: translateY(0);
+        }
+
+        .pagination-container {
+            padding: 30px;
+            background: white;
+            border-top: 1px solid var(--gray-200);
+        }
+
+        .pagination {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .pagination-btn {
+            padding: 10px 15px;
+            border: 2px solid var(--gray-200);
+            background: white;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: var(--transition);
+            font-weight: 500;
+            color: var(--gray-700);
+        }
+
+        .pagination-btn:hover:not(:disabled) {
+            border-color: var(--primary-color);
+            color: var(--primary-color);
+        }
+
+        .pagination-btn.active {
+            background: var(--primary-color);
+            border-color: var(--primary-color);
+            color: white;
+        }
+
+        .pagination-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: var(--gray-500);
+        }
+
+        .empty-icon {
+            font-size: 64px;
+            color: var(--gray-300);
+            margin-bottom: 20px;
+        }
+
+        .empty-title {
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 10px;
+            color: var(--gray-600);
+        }
+
+        .empty-description {
+            font-size: 16px;
+        }
+
+        .loading {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 40px;
+        }
+
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 4px solid var(--gray-200);
+            border-top: 4px solid var(--primary-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        .status-todo {
+            background: rgba(139, 92, 246, 0.1);
+            color: #8b5cf6;
+        }
+
+        .status-pending {
+            background: rgba(156, 163, 175, 0.15);
+            color: var(--gray-600);
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        @media (max-width: 768px) {
+            .main-container {
+                margin: 5px;
+                border-radius: 15px;
+            }
+
+            .header {
+                padding: 15px;
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 15px;
+            }
+
+            .header-actions {
+                width: 100%;
+                justify-content: space-between;
+            }
+
+            .stats-section {
+                padding: 15px;
+            }
+
+            .stats-grid {
+                grid-template-columns: 1fr;
+                gap: 15px;
+            }
+
+            .chart-container {
+                min-height: auto;
+                padding: 15px;
+            }
+
+            .stats-info {
+                padding: 15px;
+            }
+
+            .stat-card {
+                padding: 10px 0;
+            }
+
+            .stat-value {
+                font-size: 20px;
+            }
+
+            .stat-label {
+                font-size: 12px;
+            }
+
+            .chart-section {
+                padding: 10px;
+                width: 100%;
+            }
+
+            #testChart {
+                width: 100% !important;
+                max-width: 100% !important;
+            }
+
+            .filters-container {
+                padding: 15px;
+                flex-direction: column;
+                gap: 15px;
+            }
+
+            .filter-tabs {
+                width: 100%;
+                overflow-x: auto;
+                -webkit-overflow-scrolling: touch;
+                order: 2;
+            }
+
+            .pagination-control {
+                order: 1;
+                justify-content: center;
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .pagination-select {
+                font-size: 14px;
+                padding: 6px 10px;
+            }
+
+            .search-container {
+                margin-bottom: 5px;
+            }
+
+            .tests-section, .controls-section {
+                padding: 10px;
+            }
+
+            .test-item {
+                margin-bottom: 10px;
+            }
+
+            .test-header {
+                padding: 12px;
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 10px;
+            }
+
+            .test-meta {
+                width: 100%;
+                justify-content: space-between;
+                padding: 0;
+            }
+
+            .test-tabs {
+                overflow-x: auto;
+                white-space: nowrap;
+                -webkit-overflow-scrolling: touch;
+            }
+
+            .test-tab {
+                padding: 8px 12px;
+                font-size: 13px;
+            }
+
+            .test-tab-content {
+                padding: 12px;
+            }
+
+            .metadata-grid,
+            .attachments-grid {
+                grid-template-columns: 1fr;
+                gap: 8px;
+            }
+
+            .metadata-item,
+            .attachment-item {
+                padding: 10px;
+            }
+
+            .pagination-container {
+                padding: 15px;
+            }
+
+            .pagination-btn {
+                padding: 8px 12px;
+                font-size: 14px;
+            }
+
+            .settings-modal-content {
+                width: 95%;
+                max-width: none;
+                margin: 10px;
+            }
+
+            .settings-meta-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .env-var-item {
+                grid-template-columns: 1fr;
+                gap: 8px;
+            }
+
+            .env-vars-list {
+                max-height: 250px;
+            }
+
+            .env-var-value {
+                padding: 4px 8px;
+            }
+        }
+
+        @media (min-width: 769px) and (max-width: 1024px) {
+            .stats-section {
+                padding: 20px;
+            }
+
+            .stats-grid {
+                grid-template-columns: 1fr;
+                gap: 20px;
+            }
+
+            .chart-container {
+                padding: 20px;
+            }
+
+            .stats-info {
+                padding: 20px;
+            }
+
+            .chart-section {
+                padding: 20px;
+            }
+
+            #testChart {
+                width: 100% !important;
+                max-width: 100% !important;
+            }
+
+            .filters-container {
+                padding: 15px 20px;
+            }
+
+            .tests-section {
+                padding: 15px;
+            }
+
+            .test-header {
+                padding: 15px;
+            }
+
+            .metadata-grid,
+            .attachments-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+
+        @media (max-width: 480px) {
+            .stats-section {
+                padding: 10px;
+            }
+
+            .stats-grid {
+                grid-template-columns: 1fr;
+                gap: 10px;
+            }
+
+            .chart-container {
+                padding: 10px;
+                min-height: auto;
+            }
+
+            .stats-info {
+                padding: 12px;
+            }
+
+            .stat-card {
+                padding: 8px 0;
+            }
+
+            .stat-value {
+                font-size: 18px;
+            }
+
+            .stat-label {
+                font-size: 11px;
+            }
+
+            .chart-section {
+                padding: 5px;
+            }
+
+            .filter-tabs {
+                gap: 5px;
+            }
+
+            .test-tab {
+                padding: 6px 10px;
+                font-size: 12px;
+            }
+
+            .badge {
+                font-size: 10px;
+                padding: 2px 6px;
+            }
+        }
+
+        .text-center { text-align: center; }
+        .mt-20 { margin-top: 20px; }
+        .mb-20 { margin-bottom: 20px; }
+        .hidden { display: none !important; }
+        .fade-in {
+            animation: fadeIn 0.3s ease-in;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+  
+        .todo-info {
+            text-align: center;
+            padding: 40px 20px;
+            color: var(--warning-color);
+        }
+
+        .todo-title {
+            font-size: 18px;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: var(--warning-color);
+        }
+
+        .todo-title i {
+            margin-right: 8px;
+        }
+
+        .todo-description {
+            font-size: 14px;
+            color: var(--gray-600);
+            margin-bottom: 25px;
+        }
+
+        .todo-details {
+            background: var(--gray-50);
+            border-radius: 8px;
+            padding: 20px;
+            text-align: left;
+            border: 1px solid var(--gray-200);
+        }
+
+        .todo-details p {
+            margin: 8px 0;
+            font-size: 13px;
+        }
+
+        .todo-details strong {
+            color: var(--gray-700);
+        }
+
+        .test-status-icon.todo {
+            background: var(--warning-color);
+            color: white;
+        }
+
+        .test-status-icon.todo i {
+            color: white;
+        }
+
+        .settings-btn {
+            background: rgba(255, 255, 255, 0.2);
+            border: none;
+            padding: 10px 16px;
+            border-radius: 8px;
+            color: white;
+            cursor: pointer;
+            transition: var(--transition);
+            font-size: 18px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .settings-btn i{ 
+            transition: var(--transition);
+        }
+
+        .settings-btn:hover {
+            background: rgba(255, 255, 255, 0.3);
+        }
+
+        .settings-btn:hover i{
+            transform: rotate(45deg);
+        }
+
+        .settings-modal {
+            display: none;
+            position: fixed;
+            z-index: 10000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(4px);
+        }
+
+        .settings-modal.active {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .settings-modal-content {
+            background: white;
+            border-radius: var(--border-radius);
+            width: 90%;
+            max-width: 600px;
+            max-height: 80vh;
+            overflow: hidden;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            animation: modalSlideIn 0.3s ease;
+        }
+
+        @keyframes modalSlideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-50px) scale(0.95);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0) scale(1);
+            }
+        }
+
+        .settings-modal-header {
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+            color: white;
+            padding: 20px 25px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .settings-modal-title {
+            font-size: 20px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .settings-modal-close {
+            background: rgba(255, 255, 255, 0.2);
+            border: none;
+            color: white;
+            font-size: 20px;
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .settings-modal-close:hover {
+            background: rgba(255, 255, 255, 0.3);
+            transform: rotate(90deg);
+        }
+
+        .settings-modal-body {
+            padding: 25px;
+            overflow-y: auto;
+            max-height: calc(80vh - 80px);
+        }
+
+        .settings-section {
+            margin-bottom: 25px;
+        }
+
+        .settings-section:last-child {
+            margin-bottom: 0;
+        }
+
+        .settings-section-title {
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--gray-700);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 15px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .settings-meta-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 12px;
+        }
+
+        .settings-meta-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 10px 12px;
+            background: var(--gray-50);
+            border-radius: 8px;
+            border: 2px solid var(--gray-200);
+            cursor: pointer;
+            transition: var(--transition);
+        }
+
+        .settings-meta-item:hover {
+            border-color: var(--primary-color);
+            background: white;
+        }
+
+        .settings-meta-item input[type="checkbox"] {
+            width: 18px;
+            height: 18px;
+            cursor: pointer;
+            accent-color: var(--primary-color);
+        }
+
+        .settings-meta-label {
+            font-size: 14px;
+            color: var(--gray-700);
+            font-weight: 500;
+            flex: 1;
+            word-break: break-word;
+        }
+
+        .settings-meta-count {
+            font-size: 11px;
+            color: var(--gray-500);
+            background: var(--gray-200);
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-weight: 600;
+        }
+
+        .settings-tabs-nav {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+            border-bottom: 2px solid var(--gray-200);
+            padding-bottom: 0;
+        }
+
+        .settings-tab {
+            flex: 1;
+            padding: 12px 16px;
+            border: none;
+            background: transparent;
+            color: var(--gray-600);
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            border-bottom: 2px solid transparent;
+            margin-bottom: -2px;
+        }
+
+        .settings-tab:hover {
+            background: var(--gray-100);
+            color: var(--gray-700);
+        }
+
+        .settings-tab.active {
+            color: var(--primary-color);
+            border-bottom-color: var(--primary-color);
+        }
+
+        .settings-tab-content {
+            display: none;
+        }
+
+        .settings-tab-content.active {
+            display: block;
+        }
+
+        .env-vars-container {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .env-vars-group {
+            background: var(--gray-50);
+            border: 1px solid var(--gray-200);
+            border-radius: 8px;
+            overflow: hidden;
+        }
+
+        .env-vars-group-title {
+            background: var(--gray-100);
+            padding: 12px 15px;
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--gray-700);
+            border-bottom: 1px solid var(--gray-200);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 8px;
+        }
+
+        .env-vars-count {
+            font-size: 11px;
+            background: var(--primary-color);
+            color: white;
+            padding: 2px 8px;
+            border-radius: 10px;
+            font-weight: 500;
+        }
+
+        .env-vars-list {
+            display: flex;
+            flex-direction: column;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+
+        .env-var-item {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            padding: 12px 15px;
+            border-bottom: 1px solid var(--gray-200);
+            gap: 15px;
+            transition: var(--transition);
+        }
+
+        .env-var-item:last-child {
+            border-bottom: none;
+        }
+
+        .env-var-item:hover {
+            background: white;
+        }
+
+        .env-var-item.env-var-unset {
+            background: var(--gray-100);
+            opacity: 0.7;
+        }
+
+        .env-var-item.env-var-unset:hover {
+            background: var(--gray-200);
+        }
+
+        .env-var-info {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .env-var-key {
+            font-size: 12px;
+            font-weight: 600;
+            color: var(--primary-color);
+            font-family: 'Courier New', monospace;
+            word-break: break-all;
+        }
+
+        .env-var-description {
+            font-size: 11px;
+            color: var(--gray-600);
+            line-height: 1.3;
+        }
+
+        .env-var-value {
+            font-size: 12px;
+            color: var(--gray-700);
+            font-family: 'Courier New', monospace;
+            word-break: break-all;
+            padding: 6px 10px;
+            background: white;
+            border: 1px solid var(--gray-300);
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+        }
+
+        .env-var-value.env-var-empty {
+            background: var(--gray-100);
+            color: var(--gray-500);
+            font-style: italic;
+            border-style: dashed;
+        }
+
+        .env-var-value.env-var-confidential {
+            background: var(--gray-100);
+            color: var(--gray-600);
+            font-style: italic;
+        }
+
+        .settings-footer {
+            padding: 15px 25px;
+            background: var(--gray-50);
+            border-top: 1px solid var(--gray-200);
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+        }
+
+        .settings-btn-action {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 8px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition);
+            font-size: 14px;
+        }
+
+        .settings-btn-reset {
+            background: transparent;
+            color: var(--gray-500);
+            border: 1px solid var(--gray-300);
+            margin-right: auto;
+        }
+
+        .settings-btn-reset:hover {
+            background: var(--gray-100);
+            color: var(--gray-700);
+        }
+
+        .settings-btn-cancel {
+            background: var(--gray-200);
+            color: var(--gray-700);
+        }
+
+        .settings-btn-cancel:hover {
+            background: var(--gray-300);
+        }
+
+        .settings-btn-save {
+            background: var(--primary-color);
+            color: white;
+        }
+
+        .settings-btn-save:hover {
+            background: var(--primary-hover);
+        }
+
+        /* Meta item visibility control */
+        .meta-item {
+            transition: var(--transition);
+        }
+
+        .meta-item.hidden {
+            display: none !important;
+        }
+    </style>
+</head>
 
-            <div class='row level_2'>
-                <div class='col-12'>
-                    <div class='title'>
-                        <p>Testomatio Run Information</p>
+<body>
+    <div class='main-container'>
+        <header class='header'>
+            <div class='header-title'>
+                <h1 id='mainTitle'>{{title}}</h1>
+                <div class='header-badge'>Automated Tests</div>
+            </div>
+            <div class='header-actions'>
+                {{#if runId}}
+                    <div class='run-info'>
+                        <i class='fas fa-hashtag'></i>
+                        Run #{{runId}}
                     </div>
-                </div>
+                {{/if}}
+                <button class='settings-btn' onclick='openSettings()' title='Report Settings'>
+                    <i class='fas fa-cog'></i>
+                </button>
+                {{#if runUrl}}
+                    <a href='{{runUrl}}' target='_blank' class='btn-primary-custom'>
+                        <i class='fas fa-external-link-alt'></i>
+                        Full Report
+                    </a>
+                {{else}}
+                    <button class='btn-primary-custom' disabled>
+                        <i class='fas fa-external-link-alt'></i>
+                        Full Report
+                    </button>
+                {{/if}}
             </div>
+        </header>
 
-            <!-- Schedule and information -->
-            <div class='row level_3'>
-                <div class='col-6'>
-                    <div class='statleft'>
-                        <div id='graff'></div>
-                    </div>
+        <section class='stats-section'>
+            <div class='stats-grid'>
+                <div class='chart-container'>
+                    <div id='testChart'></div>
                 </div>
-            <div class='col-6'>
-                <div class='statright'>
-                <div class='statdesc'>
-                    <!-- 1 -->
-                    <div class='statdesc__row'>
-                    <div class='statdesc__row_first'>
-                        <p>Status</p>
-                    </div>
-                    <div class='statstatus statstatus_{{status}}'>
-                        <div></div>
-                        <p>{{status}}</p>
-                    </div>
-                    </div>
-                    <!-- 1 -->
-                    <!-- 1 -->
-                    <div class='statdesc__row'>
-                    <div class='statdesc__row_first'>
-                        <p>Execution Duration</p>
-                    </div>
-                    <span>{{executionTime}}</span>
-                    </div>
-                    <!-- 1 -->
-                    <!-- 1 -->
-                    <div class='statdesc__row'>
-                    <div class='statdesc__row_first'>
-                        <p>Tests</p>
+                <div class='stats-info'>
+                    <div class='stat-card'>
+                        <div class='stat-label'>
+                            <i class='fas fa-chart-line' style='font-size: 14px;'></i>
+                            Execution Status
+                        </div>
+                        <div class='stat-value'>
+                            <span class='status-badge status-{{status}}'>{{status}}</span>
+                        </div>
                     </div>
-                    <span>{{tests.length}}</span>
+                    <div class='stat-card'>
+                        <div class='stat-label'>
+                            <i class='fas fa-clock' style='font-size: 14px;'></i>
+                            Duration
+                        </div>
+                        <div class='stat-value'>{{executionTime}}</div>
                     </div>
-                    <!-- 1 -->
-                    <!-- 1 -->
-                    <div class='statdesc__row'>
-                    <div class='statdesc__row_first'>
-                        <p>Start Execution Date</p>
+                    <div class='stat-card'>
+                        <div class='stat-label'>
+                            <i class='fas fa-list-check' style='font-size: 14px;'></i>
+                            Total Tests
+                        </div>
+                        <div class='stat-value'>{{tests.length}}</div>
                     </div>
-                    <span>{{executionDate}}</span>
+                    <div class='stat-card'>
+                        <div class='stat-label'>
+                            <i class='fas fa-calendar-alt' style='font-size: 14px;'></i>
+                            Started At
+                        </div>
+                        <div class='stat-value'>{{executionDate}}</div>
                     </div>
-                    <!-- 1 -->
-                </div>
                 </div>
             </div>
+        </section>
+
+        <section class='controls-section'>
+            <div class='search-container'>
+                <i class='fas fa-search search-icon'></i>
+                <input
+                    type='text'
+                    class='search-input'
+                    placeholder='Search tests by name or suite...'
+                    id='searchInput'
+                />
             </div>
-            <!-- Schedule and information -->
-            <div class='row level_4'>
-                <div class='col-12'>
-                    <div class='input-group' style='position:relative;width:100%;margin-top:45px'>
-                        <div class='input-group-prepend' style='position:absolute;z-index:1;border:none;left:20px'>
-                            <span class='hover-search input-group-text' id='basic-addon1' style='height:54px;background:#F6FAFF;border:none'>
-                                <i class='fa-solid fa-magnifying-glass' style='color:#474646;font-size:30px'></i>
-                            </span>
+            <div class='filters-container'>
+                <div class='filter-tabs'>
+                    <button class='filter-tab active' data-filter='all'>
+                        <i class='fas fa-list'></i>
+                        All
+                        <span class='count' id='countAll'>{{tests.length}}</span>
+                    </button>
+                    <button class='filter-tab' data-filter='passed'>
+                        <i class='fas fa-check-circle'></i>
+                        Passed
+                        <span class='count' id='countPassed'>{{getTestsByStatus tests "passed"}}</span>
+                    </button>
+                    <button class='filter-tab' data-filter='failed'>
+                        <i class='fas fa-times-circle'></i>
+                        Failed
+                        <span class='count' id='countFailed'>{{getTestsByStatus tests "failed"}}</span>
+                    </button>
+                    <button class='filter-tab' data-filter='skipped'>
+                        <i class='fas fa-forward'></i>
+                        Skipped
+                        <span class='count' id='countSkipped'>{{getTestsByStatus tests "skipped"}}</span>
+                    </button>
+                    <button class='filter-tab' data-filter='todo'>
+                        <i class='fas fa-list-check'></i>
+                        Todo
+                        <span class='count' id='countTodo'>{{getTestsByStatus tests "todo"}}</span>
+                    </button>
+                </div>
+                <div class='pagination-control'>
+                    <label for='pageSizeSelect' style='font-weight: 500; color: var(--gray-600);'>Tests per page:</label>
+                    <select id='pageSizeSelect' class='pagination-select'>
+                        <option value='10'>10</option>
+                        <option value='25'>25</option>
+                        <option value='50'>50</option>
+                        <option value='100'>100</option>
+                    </select>
+                    <label for='groupingSelect' style='font-weight: 500; color: var(--gray-600); margin-left: 20px;'>Group by:</label>
+                    <select id='groupingSelect' class='pagination-select'>
+                        <option value='all'>All Tests</option>
+                        <option value='suite'>By Suite</option>
+                        <option value='file'>By File</option>
+                    </select>
+                </div>
+            </div>
+        </section>
+
+        <section class='tests-section'>
+            <div id='testsContainer'>
+                {{#if tests.length}}
+                    <!-- Test items will be dynamically inserted here -->
+                {{else}}
+                    <div class='empty-state'>
+                        <div class='empty-icon'>
+                            <i class='fas fa-inbox'></i>
                         </div>
-                        <input
-                            type='text'
-                            style='border:none;height:54px;background:#F6FAFF;font-weight:600;font-size:15px;'
-                            class='form-control inputSearch'
-                            aria-label='Search'
-                            aria-describedby='basic-addon1'
-                        />
+                        <div class='empty-title'>No Tests Found</div>
+                        <div class='empty-description'>No tests were executed in this run.</div>
                     </div>
+                {{/if}}
+            </div>
+        </section>
+
+        <section class='pagination-container' id='paginationContainer'>
+            <!-- Pagination will be dynamically inserted here -->
+        </section>
+    </div>
+
+    <div id='settingsModal' class='settings-modal'>
+        <div class='settings-modal-content'>
+            <div class='settings-modal-header'>
+                <div class='settings-modal-title'>
+                    <i class='fas fa-cog'></i>
+                    Report Settings
                 </div>
+                <button class='settings-modal-close' onclick='closeSettings()'>
+                    <i class='fas fa-times'></i>
+                </button>
             </div>
+            <div class='settings-modal-body'>
+                <div class='settings-tabs-nav'>
+                    <button class='settings-tab active' data-tab='metadata' onclick='switchSettingsTab(event)'>
+                        <i class='fas fa-tags'></i>
+                        Metadata
+                    </button>
+                    <button class='settings-tab' data-tab='envvars' onclick='switchSettingsTab(event)'>
+                        <i class='fas fa-code'></i>
+                        Environment Variables
+                    </button>
+                </div>
 
-            <div class='row'>
-                <div class='col-12 d-flex justify-content-start' style='margin-top:100px;'>
-                    <div class='btn-group menuTests' role='group' aria-label='Basic radio toggle button group'>
-                        <input
-                            type='radio'
-                            class='btn-check allTest'
-                            name='groupTest'
-                            id='allTest'
-                            autocomplete='off'
-                            category='all'
-                            checked
-                        />
-
-                        <label class='btn btn-all' for='allTest' style='padding:9px;margin-right:8px;background:#A0CAFF;color:#fff;border:none;text-align:center;border-radius:3px;font-weight:600;font-size:12px;width:83px;height:37px'>All
-                            <span style='color:#fff;font-weight:600;font-size:12px;' class='numTest numAll' name='numTest' lcategory='all'>0</span>
-                        </label>
-
-                        <input
-                            type='radio'
-                            class='btn-check passedTest'
-                            name='groupTest'
-                            id='passedTest'
-                            autocomplete='off'
-                            category='passed'
-                        />
-
-                        <label class='btn btn-passed' for='passedTest' style='padding:9px;background:#75B583;color:#fff;border:none;text-align:center;border-radius:3px;font-weight:600;font-size:12px;width:83px;height:37px'>Passed
-                            <span style='color:#fff;font-weight:600;font-size:12px;' class='numTest numPassed' name='numTest' lcategory='passed'>0</span>
-                        </label>
-
-                        <input
-                            type='radio'
-                            class='btn-check failedTest'
-                            name='groupTest'
-                            id='failedTest'
-                            autocomplete='off'
-                            category='failed'
-                        />
-
-                        <label class='btn btn-failed' for='failedTest' style='padding:9px;margin-left:9px;background:#FF6363;color:#fff;border:none;text-align:center;border-radius:3px;font-weight:600;font-size:12px;width:83px;height:37px'>Failed
-                            <span style='color:#fff;font-weight:600;font-size:12px;' class='numTest numFailed' name='numTest' lcategory='failed'>0</span>
-                        </label>
-
-                        <input
-                            type='radio'
-                            class='btn-check skippedTest'
-                            name='groupTest'
-                            id='skippedTest'
-                            autocomplete='off'
-                            category='skipped'
-                        />
-                        
-                        <label class='btn btn-skipped' for='skippedTest' style='padding:9px;margin-left:9px;background:#FFC350;color:#fff;border:none;text-align:center;border-radius:3px;font-weight:600;font-size:12px;width:83px;height:37px'>Skipped
-                            <span style='color:#fff;font-weight:600;font-size:12px;' class='numTest numSkipped' name='numTest' lcategory='skipped'>0</span>
-                        </label>
+                <div class='settings-tab-content active' data-tab='metadata'>
+                    <div class='settings-section'>
+                        <div class='settings-section-title'>
+                            <i class='fas fa-tags'></i>
+                            Visible Metadata Fields
+                        </div>
+                        <div id='metaFieldsList' class='settings-meta-grid'>
+                            <!-- Meta fields will be dynamically inserted here -->
+                        </div>
                     </div>
                 </div>
-            </div>                
-
-            <div class="row level_5">
-                <div class="col-12">
-                    {{#if tests.length}}
-                    <!-- TOP pagination & select components -->
-                    <div class="d-flex justify-content-between" style="height: 40px;margin-top:45px">
-                        <nav id="pagination">
-                            <ul class="pagination">
-                            </ul>
-                        </nav>
-                        {{ selectComponent }}
-                    </div>
-                    <!-- Test data section -->
-                    <div class="testWrapp">
-                        {{#each tests}}
-                            <div class="testitem d-none" name="testitem" type="dummy" category="false">
-                                <div class="testitem__top">
-                                    <div class='d-flex'>
-                                        <div class="testitem__icon">
-                                            <i class="fa-solid fa-circle-chevron-right testitem__ico testitem__ico_right ml-2"></i>
-                                            <i class="fa-solid fa-circle-chevron-down d-none testitem__ico testitem__ico_down ml-2"></i>
-                                        </div>
-                                        <p class="testitem__name">Test</p>
-                                    </div>
-
-                                    <svg class='folderSvg' width="17" height="17" style='margin-right:20px;margin-top: 3px' viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M16.6161 1.64526H9.84355C9.62419 1.64526 9.43226 1.64526 9.2129 1.9743L8.85645 2.46784H0.85C0.383871 2.46784 0 2.90655 0 3.37268V14.1485C0 14.6146 0.383871 15.0807 0.85 15.0807H16.15C16.6161 15.0807 17 14.6146 17 14.1485V5.81301V3.4001V1.9743C17 1.78236 16.8355 1.64526 16.6161 1.64526Z" fill="#6D6D6D"/>
-                                        <path d="M16.6435 12.7227C16.8629 12.5582 17 12.3114 17 12.0372V5.81301V3.4001V1.9743C17 1.78236 16.8355 1.64526 16.6161 1.64526H9.84355C9.62419 1.64526 9.43226 1.64526 9.2129 1.9743L8.85645 2.46784H0.85C0.41129 2.46784 0.0548387 2.8243 0 3.23559L16.6435 12.7227Z" fill="#565656"/>
-                                        <path d="M0.575806 3.56445L16.6435 12.6677C16.8629 12.5032 17 12.3112 17 12.037V5.81284V4.27736L15.9581 3.56445H0.575806Z" fill="#474646"/>
-                                        <path d="M15.629 3.56445H1.37097V13.9838H15.629V3.56445Z" fill="white"/>
-                                        <path d="M15.629 3.56445H8.77417V13.9838H15.629V3.56445Z" fill="#EFEFEF"/>
-                                        <path d="M17 14.5323C17 14.9984 16.6161 15.3549 16.15 15.3549H0.85C0.383871 15.3549 0 14.9984 0 14.5323L0.274194 5.84039C0.274194 5.37426 0.658064 4.93555 1.12419 4.93555H15.9032C16.3694 4.93555 16.7532 5.37426 16.7532 5.84039L17 14.5323Z" fill="#A1A1A1"/>
-                                        <path d="M16.8903 14.9437L0.329032 5.53882C0.274194 5.6485 0.274194 5.78559 0.274194 5.89527L0 14.5324C0 14.9985 0.383871 15.3549 0.85 15.3549H16.15C16.4516 15.3549 16.7258 15.1904 16.8903 14.9437Z" fill="#565656"/>
-                                        <path d="M6.77259 13.2161C6.71775 13.2161 6.63549 13.1887 6.55323 13.1613C6.41613 13.1064 6.30646 12.9693 6.30646 12.8048V7.67739C6.30646 7.54029 6.41613 7.37577 6.55323 7.32093C6.69033 7.2661 6.85484 7.2661 6.99194 7.34835L10.4742 9.92577C10.5839 10.008 10.6387 10.1177 10.6387 10.2548C10.6387 10.3919 10.5839 10.5016 10.4742 10.5838L6.99194 13.1613C6.9371 13.2161 6.85484 13.2161 6.77259 13.2161Z" fill="white"/>
-                                    </svg>
-                                </div>
 
-                                <div class="testitem__body d-none">
-                                    <div class='testitem__menu'>
-                                        <span type='steps' class='testitem__mitem testitem__mitem_active'>Steps
-                                            <i class='fa-solid fa-arrow-right'></i></span>
-                                        <span type='status' class='testitem__mitem'>Status
-                                            <i class='fa-solid fa-arrow-right'></i></span>
-                                        <span type='message' class='testitem__mitem'>Message
-                                            <i class='fa-solid fa-arrow-right'></i></span>
-                                        <span type='files' class='testitem__mitem'>Files <i class='fa-solid fa-arrow-right'></i></span>
-                                    </div>
-
-                                    <div class="testitem__content">
-                                        <!-- 1 -->
-                                        <div class="testitem__case" type="steps">
-                                            <div class="testitem__block">
-                                                <span>...</span>
-                                            </div>
+                <div class='settings-tab-content' data-tab='envvars'>
+                    <div class='env-vars-container'>
+                        <div class='env-vars-group'>
+                            <div class='env-vars-group-title'>
+                                TESTOMATIO Variables
+                                <span class='env-vars-count'>{{ObjectLength envVars.testomatio}} total</span>
+                            </div>
+                            <div class='env-vars-list'>
+                                {{#each envVars.testomatio}}
+                                    <div class='env-var-item {{#unless this.isSet}}env-var-unset{{/unless}}'>
+                                        <div class='env-var-info'>
+                                            <div class='env-var-key'>{{@key}}</div>
+                                            <div class='env-var-description'>{{this.description}}</div>
                                         </div>
-                                        <!-- 1 -->
-
-                                        <!-- 2 -->
-                                        <div class='testitem__case d-none' type='status'>
-                                            <div class='testitem__block'>
-                                                <span>...</span>
-                                            </div>
+                                        <div class='env-var-value {{#unless this.isSet}}env-var-empty{{/unless}} {{#if this.isSensitive}}env-var-confidential{{/if}}'>
+                                            {{#if this.isSensitive}}
+                                                <em>confidential</em>
+                                            {{else if this.isSet}}
+                                                {{this.value}}
+                                            {{else}}
+                                                <em>(not set)</em>
+                                            {{/if}}
                                         </div>
-                                        <!-- 2 -->
-
-                                        <!-- 3 -->
-                                        <div class='testitem__case d-none' type='message'>
-                                            <div class='testitem__block'>
-                                                <span>...</span>
-                                            </div>
+                                    </div>
+                                {{/each}}
+                            </div>
+                        </div>
+                        <div class='env-vars-group'>
+                            <div class='env-vars-group-title'>
+                                S3 Variables
+                                <span class='env-vars-count'>{{ObjectLength envVars.s3}} total</span>
+                            </div>
+                            <div class='env-vars-list'>
+                                {{#each envVars.s3}}
+                                    <div class='env-var-item {{#unless this.isSet}}env-var-unset{{/unless}}'>
+                                        <div class='env-var-info'>
+                                            <div class='env-var-key'>{{@key}}</div>
+                                            <div class='env-var-description'>{{this.description}}</div>
                                         </div>
-                                        <!-- 3 -->
-
-                                        <!-- 4 -->
-                                        <div class='testitem__case d-none' type='files'>
-                                            <div class='testitem__block'>
-                                                <span>...</span>
-                                            </div>
+                                        <div class='env-var-value {{#unless this.isSet}}env-var-empty{{/unless}} {{#if this.isSensitive}}env-var-confidential{{/if}}'>
+                                            {{#if this.isSensitive}}
+                                                <em>confidential</em>
+                                            {{else if this.isSet}}
+                                                {{this.value}}
+                                            {{else}}
+                                                <em>(not set)</em>
+                                            {{/if}}
                                         </div>
-                                        <!-- 4 -->
                                     </div>
-                                </div>
+                                {{/each}}
                             </div>
-                        {{/each}}
+                        </div>
                     </div>
-                    <!-- BOTTOM pagination & select components -->
-                    <nav class="mt-2">
-                        <ul class="pagination">
-                        </ul>
-                    </nav>
-                    {{else}}
-                        <!-- No tests found section -->
-                        {{ emptyDataComponent }}
-                    {{/if}}
                 </div>
             </div>
+            <div class='settings-footer'>
+                <button class='settings-btn-action settings-btn-reset' onclick='resetToDefaults()'>
+                    Reset to Defaults
+                </button>
+                <button class='settings-btn-action settings-btn-cancel' onclick='closeSettings()'>
+                    Cancel
+                </button>
+                <button class='settings-btn-action settings-btn-save' onclick='saveSettings()'>
+                    Apply Changes
+                </button>
+            </div>
         </div>
-    </section>
+    </div>
 
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script type="text/javascript">
-        // Load google charts
+        let allTests = {{{ pageDispleyElements tests }}}.totalTests;
+        let currentFilter = 'all';
+        let currentPage = 1;
+        let pageSize = 10;
+        let searchTerm = '';
+        let hasTodoTests = false;
+        let reportTitle = '{{title}}';
+        let groupingMode = 'all';
+
         google.charts.load('current', {'packages':['corechart']});
-        google.charts.setOnLoadCallback(drawChart);
-
-        // Draw the chart and set the chart values
-        function drawChart() {
-            let data = {};
-            const passedTests = {{ getTestsByStatus tests "PASSED" }};
-            const failedTests = {{ getTestsByStatus tests "FAILED" }};
-            const skippedTests = {{ getTestsByStatus tests "SKIPPED" }};
-
-            if (passedTests === 0 && failedTests === 0 && skippedTests === 0) {
-                data = google.visualization.arrayToDataTable([
-                    ['Task', 'Tests'],
-                    ['No Tests', 1]
-                ])
-            }
-            else {
-                data = google.visualization.arrayToDataTable([
-                    ['Task', 'Tests'],
-                    ['No Tests', 0],
-                    ['Passed', passedTests],
-                    ['Failed', failedTests],
-                    ['Skipped', skippedTests],
-                ]);
-            }    
-            // Optional: add a title and set the width and height of the chart
+        google.charts.setOnLoadCallback(drawTestChart);
+
+        function createMetadataItems(metadata) {
+            if (!metadata || Object.keys(metadata).length === 0) return '';
+
+            return Object.entries(metadata).map(([key, value]) => `
+                <div class='metadata-item meta-item' data-meta-key='${key}'>
+                    <div class='metadata-key'>${key}</div>
+                    <div class='metadata-value'>${typeof value === 'object' ? JSON.stringify(value, null, 2) : value}</div>
+                </div>
+            `).join('');
+        }
+
+        function drawTestChart() {
+            const passedTests = {{getTestsByStatus tests "passed"}};
+            const failedTests = {{getTestsByStatus tests "failed"}};
+            const skippedTests = {{getTestsByStatus tests "skipped"}};
+            const todoTests = {{getTestsByStatus tests "todo"}};
+
+            const rows = [
+                ['Status', 'Count'],
+                ['Passed', passedTests],
+                ['Failed', failedTests],
+                ['Skipped', skippedTests],
+            ];
+
+            if (todoTests > 0) rows.push(['Todo', todoTests]);
+
+            const data = google.visualization.arrayToDataTable(rows);
+
+            const screenWidth = window.innerWidth;
+            let chartHeight = 350;
+            let chartAreaHeight = '80%';
+            let chartAreaWidth = '95%';
+            let pieSliceFontSize = 12;
+            let legendFontSize = 12;
+
+            if (screenWidth < 480) {
+                chartHeight = 180;
+                chartAreaHeight = '70%';
+                chartAreaWidth = '90%';
+                pieSliceFontSize = 9;
+                legendFontSize = 9;
+            } else if (screenWidth < 768) {
+                chartHeight = 220;
+                chartAreaHeight = '75%';
+                chartAreaWidth = '92%';
+                pieSliceFontSize = 10;
+                legendFontSize = 10;
+            } else if (screenWidth < 1024) {
+                chartHeight = 260;
+                chartAreaHeight = '75%';
+                chartAreaWidth = '94%';
+                pieSliceFontSize = 11;
+                legendFontSize = 11;
+            }
+
             const options = {
-                'title': '',
-                'width': 550,
-                'height': 300,
-                'colors': ['#A9C7FF', '#75B583', '#FF6363', '#FFC350'],
-                'legend': 'bottom',
-                'is3D': true
-            };        
-            // Display the chart inside the <div> element with id="piechart"
-            const chart = new google.visualization.PieChart(document.getElementById('graff'));
+                title: reportTitle + ' Distribution',
+                pieHole: 0.4,
+                colors: todoTests > 0
+                ? ['#10b981', '#ef4444', '#f59e0b', '#8b5cf6']
+                : ['#10b981', '#ef4444', '#f59e0b'],
+                legend: { position: 'bottom', alignment: 'center' },
+                height: chartHeight,
+                width: '100%',
+                chartArea: {
+                    left: '5%',
+                    top: 20,
+                    width: chartAreaWidth,
+                    height: chartAreaHeight
+                },
+                pieSliceTextStyle: {
+                    fontSize: pieSliceFontSize
+                },
+                legend: {
+                    position: 'bottom',
+                    alignment: 'center',
+                    textStyle: {
+                        fontSize: legendFontSize
+                    },
+                    maxLines: 1
+                },
+                titleTextStyle: {
+                    fontSize: screenWidth < 768 ? 14 : 16
+                },
+                enableInteractivity: true,
+                sliceVisibilityThreshold: 0,
+                tooltip: {
+                    trigger: 'hover',
+                    showColorCode: true
+                }
+            };
+
+            const chart = new google.visualization.PieChart(document.getElementById('testChart'));
+
+            google.visualization.events.addListener(chart, 'ready', function() {
+                const chartContainer = document.getElementById('testChart');
+                chartContainer.style.overflow = 'visible';
+            });
+
             chart.draw(data, options);
         }
 
-        // processing and adding test data to the template
-        function addOneTest(category,testData = {}){
-            const { suite_title, title, steps, message, files } = testData;
-            // collapse - expand block            
-            const clone = createClone(category, suite_title, title);
-            const testitem__top = clone.querySelector('.testitem__top');
+        function createTestItem(test, index) {
+            const testItem = document.createElement('div');
+            testItem.className = 'test-item fade-in';
+            testItem.dataset.testId = `test-${index}`;
+            testItem.dataset.testIndex = index;
+
+            if (test.traces) {
+                if (!window.testTraces) window.testTraces = {};
+                if (typeof test.traces === 'string') {
+                    try {
+                        window.testTraces[index] = JSON.parse(test.traces);
+                    } catch (e) {
+                        console.error('Failed to parse traces:', e);
+                        window.testTraces[index] = [];
+                    }
+                } else {
+                    window.testTraces[index] = test.traces;
+                }
+            }
+
+            const statusClass = test.status.toLowerCase();
+            const hasRetries = test.retries && test.retries.retryCount > 0;
+            const hasTraces = test.traces && (typeof test.traces === 'string' ? test.traces.trim().length > 0 : test.traces.length > 0);
+            const hasArtifacts = test.artifacts && test.artifacts.length > 0;
+            const hasMetadata = test.meta && Object.keys(test.meta).length > 0;
+            const hasStack = statusClass === 'failed' && test.stack && (typeof test.stack === 'string' ? test.stack.trim().length > 0 : true);
+            const attemptsCount = (test.retries && Array.isArray(test.retries.attempts)) ? test.retries.attempts.length : 0;
+            const retryCount = Math.max(0, attemptsCount - 1);
+            const isTodo = statusClass === 'todo';
+            const isSkippedOrTodo = statusClass === 'skipped' || statusClass === 'todo';
+            const displayTime = isSkippedOrTodo ? '-' : formatDuration(test.run_time || 0);
+
+            testItem.innerHTML = `
+                <div class='test-header' onclick='toggleTest(this)'>
+                    <div class='test-info'>
+                        <div class='test-status-icon ${statusClass}'>
+                            <i class='fas fa-${getStatusIcon(statusClass)}'></i>
+                        </div>
+                        <div class='test-details'>
+                            <div class='test-title'>
+                                ${test.title || 'Untitled Test'}
+                                ${test.artifactsUploaded ? `
+                                    <span class='artifact-upload-indicator' title='Artifacts uploaded to storage'>
+                                        <i class='fas fa-cloud-upload-alt'></i>
+                                    </span>
+                                ` : ''}
+                            </div>
+                            <div class='test-suite'>${test.suite_title || 'Unknown Suite'}</div>
+                        </div>
+                    </div>
+                    <div class='test-meta'>
+                        <div class='test-duration'>
+                            <i class='fas fa-clock'></i>
+                            ${displayTime}
+                        </div>
+                        <div class='test-badges'>
+                            ${test.flaky ? '<span class=\"badge badge-flaky\">Flaky</span>' : ''}
+                            ${hasRetries ? `<span class=\"badge badge-retry\">Retries: ${test.retries.retryCount}</span>` : ''}
+                        </div>
+                        <i class='fas fa-chevron-down expand-icon'></i>
+                    </div>
+                </div>
+                <div class='test-content'>
+                    <div class='test-tabs'>
+                        ${isTodo ? `
+                            <button class='test-tab active' onclick='showTestTab(this, \"info\")'>
+                                <i class='fas fa-info-circle'></i> Info
+                            </button>
+                        ` : `
+                            <button class='test-tab active' onclick='showTestTab(this, \"steps\")'>
+                                <i class='fas fa-list-ol'></i> Steps
+                            </button>
+                            <button class='test-tab' onclick='showTestTab(this, \"message\")'>
+                                <i class='fas fa-comment-dots'></i> Message
+                            </button>
+                            ${hasStack ? `<button class='test-tab' onclick='showTestTab(this, \"stack\")'>
+                                <i class='fas fa-layer-group'></i> Stack
+                            </button>` : ''}
+                            ${hasRetries ? `<button class='test-tab' onclick='showTestTab(this, \"retries\")'>
+                                <i class='fas fa-redo'></i> Retries
+                            </button>` : ''}
+                            ${hasArtifacts ? `<button class='test-tab' onclick='showTestTab(this, \"attachments\")'>
+                                <i class='fas fa-paperclip'></i> Attachments
+                            </button>` : ''}
+                            ${hasMetadata ? `<button class='test-tab' onclick='showTestTab(this, \"metadata\")'>
+                                <i class='fas fa-tags'></i> Metadata
+                            </button>` : ''}
+                            ${hasTraces ? `<button class='test-tab' onclick='showTestTab(this, \"traces\")'>
+                                <i class='fas fa-bug'></i> Traces
+                            </button>` : ''}
+                        `}
+                    </div>
+                    ${isTodo ? `
+                        <div class='test-tab-content active' data-tab='info'>
+                            <div class='todo-info'>
+                                <div class='todo-title'>
+                                    <i class='fas fa-list-ul'></i>
+                                    TODO Test
+                                </div>
+                                <div class='todo-description'>
+                                    This test is marked as TODO and needs to be implemented.
+                                </div>
+                                <div class='todo-details'>
+                                    <p><strong>Test Title:</strong> ${test.title || 'Untitled TODO Test'}</p>
+                                    <p><strong>Suite:</strong> ${test.suite_title || 'Unknown Suite'}</p>
+                                    <p><strong>Status:</strong> Implementation required</p>
+                                </div>
+                            </div>
+                        </div>
+                    ` : `
+                        <div class='test-tab-content active' data-tab='steps'>
+                            <div class='steps-container' id='steps-${index}'>
+                                ${(() => {
+                                    const hasStepsArray = test.stepsArray && Array.isArray(test.stepsArray) && test.stepsArray.length > 0;
+                                    const hasStepsString = test.steps && typeof test.steps === 'string' && test.steps.trim().length > 0;
+
+                                    if (hasStepsArray) {
+                                        return renderStepsTree(test.stepsArray);
+                                    } else if (hasStepsString) {
+                                        const isErrorMessage = test.steps.match(/^Error:/i);
+
+                                        if (!isErrorMessage) {
+                                            return renderStepsTree(test.steps);
+                                        }
+                                    }
+
+                                    return '<div style=\'padding: 20px; color: var(--gray-500); text-align: center;\'>No steps recorded</div>';
+                                })()}
+                            </div>
+                        </div>
+                        <div class='test-tab-content' data-tab='message'>
+                            <div class='message-block ${statusClass}'>
+                                <strong>${statusClass.toUpperCase()}:</strong><br>
+                                ${test.message || 'No message available'}
+                            </div>
+                        </div>
+                        ${hasStack ? `<div class='test-tab-content' data-tab='stack'>
+                            <div class='code-block'>${test.stack}</div>
+                        </div>` : ''}
+                    `}
+                    ${hasRetries ? `<div class='test-tab-content' data-tab='retries'>
+                        <div class='retry-info'>
+                            <div class='retry-title'>
+                                <i class='fas fa-redo'></i>
+                                Retry Information (${retryCount} retries, ${attemptsCount} attempts)
+                            </div>
+                            <div class='retry-attempts'>
+                                ${createRetryAttempts(test.retries)}
+                            </div>
+                        </div>
+                    </div>` : ''}
+                    ${hasArtifacts ? `<div class='test-tab-content' data-tab='attachments'>
+                        <div class='attachments-grid'>
+                            ${createAttachmentItems(test.artifacts)}
+                        </div>
+                    </div>` : ''}
+                    ${Object.keys(test.meta || {}).length > 0 ? `<div class='test-tab-content' data-tab='metadata'>
+                        <div class='metadata-grid' data-test-meta></div>
+                    </div>` : ''}
+                    ${hasTraces ? `<div class='test-tab-content' data-tab='traces'>
+                        <div class='trace-viewer-container'></div>
+                    </div>` : ''}
+                </div>
+            `;
 
-            setTestItemContent(clone, steps, category, message, files);
-            addCollapseExpandListener(testitem__top);
-            initializeMenu(clone);
+            return testItem;
         }
 
-        function createClone(category, suite_title, title) {
-            const page = document.querySelector('.report');
-            const wrapp = page.querySelector('.testWrapp');
-            const dummy = wrapp.querySelector('div[name="testitem"][type="dummy"]');
-            const clone = dummy.cloneNode(true);
+        function getStatusIcon(status) {
+            const icons = {
+                'passed': 'check',
+                'failed': 'times',
+                'skipped': 'forward',
+                'pending': 'clock',
+                'todo': 'circle'
+            };
+            return icons[status] || 'question';
+        }
 
-            clone.setAttribute('type', 'clone');
-            clone.setAttribute('category', category);
-            clone.classList.remove('d-none');
-            wrapp.append(clone);
+        function formatDuration(milliseconds) {
+            if (!milliseconds || milliseconds === 0 || milliseconds === null) return '0ms';
 
-            const testitem__name = clone.querySelector('.testitem__name');
-            testitem__name.innerHTML = suite_title ? suite_title + " - " + title : title;
+            const totalSeconds = Math.floor(milliseconds / 1000);
+            const minutes = Math.floor(totalSeconds / 60);
+            const seconds = totalSeconds % 60;
+            const ms = milliseconds % 1000;
 
-            return clone;
+            if (minutes > 0) {
+                return `${minutes}m ${seconds}s ${ms}ms`;
+            } else if (seconds > 0) {
+                return `${seconds}s ${ms}ms`;
+            } else {
+                return `${ms}ms`;
+            }
         }
 
-        function setTestItemContent(clone, steps, category, message, files) {
-            const body = clone.querySelector('.testitem__body'),
-                top = clone.querySelector('.testitem__top'),
-                image = top.querySelector('.testitem__icon'),
-                folderSvg = top.querySelector('.folderSvg');
+        function parseStepsToHtml(stepsText) {
+            if (!stepsText || stepsText === 'No steps recorded') {
+                return `<div class="step-item">
+                <div class="step-content">
+                    <p class="step-text">${stepsText || 'No steps recorded'}</p>
+                </div>
+                </div>`;
+            }
+
+            const raw = String(stepsText);
+            const lines = raw
+                .split(/<br\s*\/?>|\n/gi)
+                .map(l => l.trim())
+                .filter(Boolean);
+
+            let stepNumber = 1;
+            let html = '';
+
+            lines.forEach(line => {
+                const trimmedLine = line.trim();
+
+                const numberedMatch = trimmedLine.match(/^(\d+)\.\s*(.+)$/);
+                if (numberedMatch) {
+                    const [, num, text] = numberedMatch;
+                    stepNumber = parseInt(num, 10);
+                    html += createStepHtml(text, stepNumber);
+                    stepNumber++;
+                    return;
+                }
+
+                const checkmarkMatch = trimmedLine.match(/^([✓✗])\s*(.+)$/);
+                if (checkmarkMatch) {
+                    const [, symbol, text] = checkmarkMatch;
+                    const status = symbol === '✓' ? 'passed' : 'failed';
+                    html += createStepHtml(text, stepNumber, status);
+                    stepNumber++;
+                    return;
+                }
+
+                const arrowMatch = trimmedLine.match(/^(→|▶|▸|▹)\s*(.+)$/);
+                if (arrowMatch) {
+                    const [, symbol, text] = arrowMatch;
+                    html += createStepHtml(text, stepNumber, null, symbol);
+                    stepNumber++;
+                    return;
+                }
+
+                const bracketMatch = trimmedLine.match(/^\[([^\]]+)\]\s*(.+)$/);
+                if (bracketMatch) {
+                    const [, category, text] = bracketMatch;
+                    html += createStepHtml(text, stepNumber, null, category);
+                    stepNumber++;
+                    return;
+                }
+
+                const keywordMatch = trimmedLine.match(/^(When|Then|And|Given|But|When\s+I|Then\s+I|And\s+I|Given\s+I|But\s+I)\s+(.+)$/i);
+                if (keywordMatch) {
+                    const [, keyword, text] = keywordMatch;
+                    html += createStepHtml(text, stepNumber, null, keyword);
+                    stepNumber++;
+                    return;
+                }
+
+                html += createStepHtml(trimmedLine, stepNumber);
+                stepNumber++;
+            });
+
+                return html || `<div class="step-item">
+                    <div class="step-content">
+                    <p class="step-text">No valid steps found</p>
+                    </div>
+                </div>`;
+            }
+
+        function renderStepsTree(steps, depth = 0) {
+            if (Array.isArray(steps) && steps.length > 0) {
+                let html = '';
+                let stepNumber = 1;
+
+                steps.forEach((step, index) => {
+                    if (!step) return;
+
+                    const hasChildren = step.steps && Array.isArray(step.steps) && step.steps.length > 0;
+                    const stepId = `step-${depth}-${index}`;
+                    const status = step.status || 'passed';
+                    const duration = step.duration || 0;
+                    const category = step.category || '';
+
+                    html += `
+                        <div class="step-item step-level-${depth}" data-step-id="${stepId}">
+                            <div class="step-number">${stepNumber}</div>
+                            <div class="step-content">
+                                <p class="step-text">${step.title || 'Untitled step'}</p>
+                                ${category && category !== 'user' ? `<div class="step-category">${category}</div>` : ''}
+                                <div class="step-time">
+                                    Step ${stepNumber}
+                                    ${duration > 0 ? `<span class="step-duration"><i class="fas fa-clock"></i> ${formatDuration(duration)}</span>` : ''}
+                                </div>
+                            </div>
+                            <div class="step-status ${status}"></div>
+                        </div>
+                    `;
+
+                    if (hasChildren) {
+                        html += `
+                            <div class="step-children">
+                                ${renderStepsTree(step.steps, depth + 1)}
+                            </div>
+                        `;
+                    }
+
+                    stepNumber++;
+                });
+
+                return html;
+            }
 
-            if(category === 'passed') {
-                image.classList.add('passed');
+            if (typeof steps === 'string') {
+                return parseStepsToHtml(steps);
             }
-            else if(category === 'skipped') {
-                image.classList.add('skipped');
+
+            return `<div class="step-item">
+                <div class="step-content">
+                    <p class="step-text">${steps}</p>
+                </div>
+            </div>`;
+        }
+
+        function createStepHtml(text, number, status = null, category = null) {
+            const statusClass = status || 'passed';
+            const categoryText = category && category !== 'user' ? `<div class="step-category">${category}</div>` : '';
+            const durationIcon = status ? `<div class="step-duration"><i class="fas fa-clock"></i> auto</div>` : '';
+
+            return `<div class="step-item">
+                <div class="step-number">${number}</div>
+                <div class="step-content">
+                    <p class="step-text">${text}</p>
+                    ${categoryText}
+                    <div class="step-time">Step ${number}${durationIcon}</div>
+                </div>
+                <div class="step-status ${statusClass}"></div>
+            </div>`;
+        }
+
+        function createRetryAttempts(retries) {
+            const attempts = Array.isArray(retries?.attempts) ? retries.attempts : [];
+            if (!attempts.length) return '';
+
+            return attempts.map((a, idx) => {
+                const status = String(a?.status || 'unknown').toLowerCase();
+                const isFinal = idx === attempts.length - 1;
+
+                const icon =
+                    status === 'passed' ? 'check' :
+                    status === 'failed' ? 'times' :
+                    status === 'skipped' ? 'forward' :
+                    'question';
+
+                const cls =
+                    status === 'passed' ? 'passed' :
+                    status === 'failed' ? 'failed' :
+                    status === 'skipped' ? 'skipped' :
+                    'unknown';
+
+                return `
+                    <div class='retry-attempt ${cls}'>
+                        <i class='fas fa-${icon}'></i>
+                        Attempt ${idx + 1}${isFinal ? ' (final)' : ''}
+                    </div>
+                `;
+            }).join('');
+        }
+
+       function normalizeArtifact(artifact) {
+            if (!artifact) return { filePath: '', displayName: 'attachment' };
+
+            if (typeof artifact === 'string') {
+                return { filePath: artifact, displayName: artifact };
             }
-            else {
-                image.classList.add('failed');
+
+            if (typeof artifact === 'object') {
+                const filePath =
+                (typeof artifact.path === 'string' && artifact.path) ||
+                (typeof artifact.url === 'string' && artifact.url) ||
+                (typeof artifact.href === 'string' && artifact.href) ||
+                (typeof artifact.file === 'string' && artifact.file) ||
+                '';
+
+                const displayName =
+                (typeof artifact.name === 'string' && artifact.name) ||
+                (typeof artifact.fileName === 'string' && artifact.fileName) ||
+                filePath ||
+                'attachment';
+
+                return { filePath, displayName };
             }
 
-            const content = body.querySelector('.testitem__content'),
-                content_error = content.querySelector('div[type="steps"]').querySelector('span'),
-                content_status = content.querySelector('div[type="status"]').querySelector('span'),
-                content_message = content.querySelector('div[type="message"]').querySelector('span'),
-                content_files = content.querySelector('div[type="files"]').querySelector('span');
+            const s = String(artifact);
+                return { filePath: s, displayName: s };
+            }
 
-            content_error.innerHTML = steps;
-            content_status.innerHTML = category.toUpperCase();
-            content_message.innerHTML = message;
-            //if no file - empty message, else - files
-            if (files.includes("This test has no files")){
-                content_files.innerHTML = files
-                folderSvg.classList.add('d-none');
+            function safeBasename(p) {
+            return String(p || '')
+                .split(/[\\/]/)
+                .pop();
             }
-            else {
-                addFilesToContent(content_files, files);
+
+        function createAttachmentItems(artifacts) {
+            if (!Array.isArray(artifacts) || artifacts.length === 0) return '';
+
+            return artifacts
+                .map((artifact) => {
+                const { filePath, displayName } = normalizeArtifact(artifact);
+                const fileName = safeBasename(displayName || filePath) || 'attachment';
+
+                if (!filePath) {
+                    return `
+                    <div class='attachment-item'>
+                        <div class='attachment-file'>
+                        <i class='fas fa-file' style='font-size: 48px; color: var(--gray-400);'></i>
+                        <div style='margin-top: 10px; font-size: 14px; color: var(--gray-600);'>${fileName}</div>
+                        <div style='margin-top: 6px; font-size: 12px; color: var(--gray-500);'>inline attachment</div>
+                        </div>
+                    </div>
+                    `;
+                }
+
+                const isImage = /\.(jpg|jpeg|png|gif|webp)$/i.test(filePath) || /\.(jpg|jpeg|png|gif|webp)$/i.test(fileName);
+
+                if (isImage) {
+                    return `
+                    <div class='attachment-item' onclick='openAttachment("${filePath}")''>
+                        <img src='${filePath}' alt='${fileName}' class='attachment-image'>
+                        <div class='attachment-name'>${fileName}</div>
+                    </div>
+                    `;
+                }
+
+                const icon = getFileIcon(filePath);
+                return `
+                    <div class='attachment-item' onclick='openAttachment("${filePath}")''>
+                    <div class='attachment-file'>
+                        <i class='fas fa-${icon}' style='font-size: 48px; color: var(--gray-400);'></i>
+                        <div style='margin-top: 10px; font-size: 14px; color: var(--gray-600);'>${fileName}</div>
+                    </div>
+                    </div>
+                `;
+                })
+                .join('');
+        }
+
+        function getFileIcon(filePath) {
+            if (typeof filePath !== 'string') return 'file';
+            const ext = (filePath.split('.').pop() || '').toLowerCase();
+            const icons = {
+                pdf: 'file-pdf',
+                zip: 'file-archive',
+                rar: 'file-archive',
+                mp4: 'file-video',
+                avi: 'file-video',
+                mov: 'file-video',
+                webm: 'file-video',
+                mp3: 'file-audio',
+                wav: 'file-audio',
+                txt: 'file-alt',
+                log: 'file-alt',
+                json: 'file-code',
+                xml: 'file-code',
+                csv: 'file-excel',
+                xlsx: 'file-excel',
+                doc: 'file-word',
+                docx: 'file-word',
+            };
+            return icons[ext] || 'file';
+        }
+
+        function toggleTest(header) {
+            const testItem = header.closest('.test-item');
+            testItem.classList.toggle('expanded');
+        }
+
+        function showTestTab(tab, tabName) {
+            const testContent = tab.closest('.test-content');
+            const allTabs = testContent.querySelectorAll('.test-tab');
+            const allContents = testContent.querySelectorAll('.test-tab-content');
+
+            allTabs.forEach(t => t.classList.remove('active'));
+            allContents.forEach(c => c.classList.remove('active'));
+
+            tab.classList.add('active');
+            testContent.querySelector(`[data-tab=\"${tabName}\"]`).classList.add('active');
+
+            if (tabName === 'traces') {
+                const testItem = tab.closest('.test-item');
+                const testIndex = testItem.dataset.testIndex;
+                loadTraceForTest(testIndex);
             }
         }
 
-        function addFilesToContent(content_files, files) {
-            const filesList = document.createElement('div');
+        async function loadTraceForTest(testIndex) {
+            const testItem = document.querySelector(`.test-item[data-test-index="${testIndex}"]`);
+            if (!testItem) return;
 
-            filesList.classList.add('d-flex', 'flex-wrap', 'flex-column');
-            content_files.innerHTML = "";
+            let traces = window.testTraces && window.testTraces[testIndex];
+            if (!traces || !Array.isArray(traces) || traces.length === 0) return;
 
-            if (Array.isArray(files) && files.length > 0) {
-                for (let i = 0; i < files.length; i += 2) {
-                    const filePairContainer = document.createElement('div');
-                    filePairContainer.classList.add('d-flex', 'mb-3', 'justify-content-around');
+            traces = traces.filter(t => {
+                if (typeof t === 'string' && t.trim().length > 0) return true;
+                if (t && t.dataUrl && typeof t.dataUrl === 'string' && t.dataUrl.trim().length > 0) return true;
+                return false;
+            });
+            if (traces.length === 0) return;
 
-                    for (let j = i; j < i + 2 && j < files.length; j++) {
-                        const file = files[j];
-                        const fileItemContainer = createFileItemContainer(file);
-                        filePairContainer.appendChild(fileItemContainer);
-                    }
+            const viewerDiv = testItem.querySelector('.trace-viewer-container');
+            if (!viewerDiv) return;
+
+            if (viewerDiv.dataset.loaded === 'true') return;
+
+            let html = `
+                <div class="traces-instruction">
+                    <div class="instruction-header">
+                        <i class="fas fa-info-circle"></i>
+                        <span>How to view trace files</span>
+                    </div>
+                    <div class="instruction-content">
+                        <ol>
+                            <li>Download the trace file using the button below</li>
+                            <li>Extract the .zip archive if needed</li>
+                            <li><strong>Playwright traces:</strong><br>
+                                <code>npx playwright show-trace trace.zip</code><br>
+                                Or VS Code extension: "Playwright Test for VS Code"
+                            </li>
+                            <li><strong>TestCafe traces:</strong><br>
+                                <code>testcafe show-trace trace.zip</code>
+                            </li>
+                            <li><strong>Other traces:</strong><br>
+                                Check your testing framework documentation
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            `;
+
+            html += '<div class="traces-list">';
 
-                    filesList.appendChild(filePairContainer);
+            for (let idx = 0; idx < traces.length; idx++) {
+                const trace = traces[idx];
+                const traceDataUrl = typeof trace === 'string' ? trace : trace.dataUrl;
+                let traceName = 'trace.zip';
+
+                if (typeof trace === 'object' && trace.name) {
+                    traceName = trace.name;
+                } else if (idx === 0) {
+                    traceName = 'test-failed-trace.zip';
+                } else {
+                    traceName = `trace-${idx + 1}.zip`;
                 }
 
-                content_files.appendChild(filesList);
-            }
-        }
-
-        function createFileItemContainer(file) {
-            let fileIcon;
-
-            const filepath = file?.path || file;
-            const fileName = createFileName(file);
-            const fileItemContainer = document.createElement('div');
-            const fileExtension = filepath.split('.').pop().toLowerCase();
-
-            fileItemContainer.classList.add('d-flex', 'flex-column', 'align-items-center', 'mr-3');
-
-            switch (fileExtension) {
-                case 'jpg':
-                case 'jpeg':
-                case 'png':
-                case 'gif':
-                    fileIcon = createImagePreview(file);
-                    break;
-                case 'zip':
-                    const svgZipCode =
-                        `<svg width="95" height="94" viewBox="0 0 95 94" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                         <rect x="0.5" width="94" height="94" fill="url(#pattern0)"/>
-                         <defs>
-                         <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
-                         <use xlink:href="#image0_212_109" transform="scale(0.01)"/>
-                         </pattern>
-                         <image id="image0_212_109" width="100" height="100" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAABwdJREFUeAHtnEmIJFUQhntEEVTwoCAouODNDWREEFzK7ow/XrW26yAi4kFwBcGLCKLQBxEPoh4GRLyoBwWvA6LixYMXQbypILiBOuLOqKOjzuhrOseXQS6RVS8jqpocaCpfvog/vvijqqa6qypXVsZ/owOjA6MDowOjA8YOMHBkyX4+2JhMTjW2ya7ckg2jvPN8SESn27lkWGlJB3IERfHxtaurZxhaZVNqWQcSuUH0GYBzbJwyqiIHYlS2dxnJmay/mE6n5/YWXNSEpLGt5+dl4Uy5QfT1dDo9b1HZe3GljcXjXsmGwZKzZr0fwAWGSMOUko0NU2V+VclJRC/Lcwx8G0K4aP5qjgqyKUeU1tI1nLuYea88D6IfmfnSVrFF3pQNLSprA2ccyrNyj4GfQwiXLWovrVyymdZgx802TgYel/sM/MrMVzsiz1ZaNjKbyvBZXZwB2JQxIPqNmYvh6TJWkE1klM4qpeFk5odlHIj+CETXZYUZUkw2MGStebS1nAF4SMaC6M9AdOM89c1yJbxZ4Z6F+nACuI+BwyLnEIA9PcvahwvopfnFsMspZr4LRP+k/YHob2a+oyvXdT8FjseuMC3FZ+Fk5tsY+CvNjUMBcGdLKd+tFHanDSQ6C+BWOZT4dAbgAV/nG6rv9IFsD2UPA4dEr4eZ+cEGW/xOC8gd9ZSVusrM1zBwUPYbgEfTOPdjCegO1ACQg5OZA4DfpRYTPdlQ1v60hLMn0FXMxTkluoqBA1JvYYYiwXT22Efl5AxFcTmIfpGaTPTUysrKLvvukooSKtlaqMPcnER0CRP9IHWJ6LnNzc1j3JqXQG4gHYWH4JwWxcXM/J3UZuYX3IYiYTp8cdseijO+Fx/fk5f6zPzKZDI51rxhCWIOoCwoOS3WAF5V4uULk43lU86rJDmt1nm7UKjJxhQpLiGS02pt3qxszBxAWVByWq2VePnCZGP5lJdTyd0Pd4AFm5u7H+4A40CqDowDWTA/xoGMA6k6sGAr9zuoO8A4kKoD40AWzI9xIONAqg4s2Mr9DuoOMA6k6sCyDCReLCCEMAlEtzPzvfGD1QDuDiHcFEI4u9rV7Ct3P3IBSJ2utbRMxst37OS+XKMo3gdwg9Ttu5a6ffPnjs8FIHW61hJcxvcdSJkP4Amp3Wdd6pS3fXKzxJaFy9tZRct85e0hWUfmdQ6E+Q1mfo2JvpS5zHy91NeupZY2L1tcLoD4TaWmnwA8XanDvFc2UNn/70PfXQMp8+P73vLLn/Hpq9zveys5+ubPHT80wJZhRB8ldQ6sra2dJsGT/a0LGGgHEnWm0+nxAL5JNWa9OE2qEY8l5+DroQHiK6G0RvwuYF1Tacy2EZUPrNXsV2QC8HwaE4jWKgHKRaqxzaHMzBQ2JMDGxsYJDHyV1Ng/mUxOqkNPYspLfPQaCBM9VtFgvrmuTte5isZOe4Qw0SNpgwG4v8mQNC4ey4901uxXpBh4Jo0BsFoJUC5SjW0OZWamsKEA1tbWTmHgp6P6RJ/s3r37uCbso3HbV7jrO5AAvJlqrK+vn9VUq+18qhGP22IH2RsKIH5wuaLNfEtbA5XYno8QZj4//ZZUvLhZW622vRqOtvD8e0MAFEVxZvrlGCJ6T97jZSc1HJr/Q3bFpyYi+jzND0T3SH3tOtWJx9q8bHFDAATgxYqu4hIXlXjFI4SBTxn4XuYx89vyJXMfs6Ren9wssbkB1oviwq2vH/9/tdPXNaA1HK2PEBm/tS6KfQBO1NRripG6TXGDnc8NwEWxr9SM3xPXXr+qzClv5VNceb7mNn7t+Z1cV2qQ+oMZ3yScEwDAlULvpaa68rzI63zZy8xXxEdjURQnS6151jUc88j1z80JwETvJnoH+7z0TPLKXwwrzXTtV4LnWFjVaUTMBRCfMipaRG81/bGx7pJJldyaVzdd+40N9tywqtOIlQuAq39A3LqXS+10LYHSvXjcd1/Gz7ru4phVV52XC0DqdK0loIzvuy/jZ113ccyqq87LBSB1utYSUMb33Zfxs667OGbVVee5A6hJbQLd/XAHsPFZXcXdD3cAtVU2ge5+uAPY+Kyu4u6HO4DaKptAdz/cAWx8Vldx98MdQG2VTaC7H+4ANj6rq7j74Q6gtsom0N0PdwAbn9VV3P1wB1BbZRPo7oc7gI3P6irufrgDqK2yCXT3wx3Axmd1FXc/3AHUVtkEuvvhDmDjs7qKux/uAGqrbALd/XAHsPFZXcXdD3cAtVU2ge5+uAPY+Kyu4u6HO4DaKptAdz/cAWx8Vldx98MdQG2VTaC7H+4ANj6rq7j74Q6gtsom0N0PdwAbn9VV3P2QAOMalQ+KqyeZK3AcQHUA0o9cPqt1JMC4rg5IbWSuwHEA1QFIP3L5POqMDowOjA6MDowOaB34F113oQg53J+KAAAAAElFTkSuQmCC"/>
-                         </defs>
-                         </svg>`;
-                    fileIcon = createFileIcon(file,svgZipCode);
-                    break;
-                case 'mp4':
-                case 'avi':
-                case 'mov':
-                case 'webm':
-                    const svgVideoCode =
-                        `<svg width="95" height="95" viewBox="0 0 95 95" fill="none" xmlns="http://www.w3.org/2000/svg">
-                         <g clip-path="url(#clip0_212_104)">
-                         <path d="M35.75 27.4702V67.5298L65.125 47.5L35.75 27.4702ZM39.6667 34.8844L58.1729 47.5L39.6667 60.1156V34.8844ZM4.41666 12.25V82.75H90.5833V12.25H4.41666ZM86.6667 78.8333H8.33333V16.1667H86.6667V78.8333Z" fill="#474646"/>
-                         </g>
-                         <defs>
-                         <clipPath id="clip0_212_104">
-                         <rect width="94" height="94" fill="white" transform="translate(0.5 0.5)"/>
-                         </clipPath>
-                         </defs>
-                         </svg>`;
-                    fileIcon = createFileIcon(file, svgVideoCode);
-                    break;
-                default:
-                    const svgFileCode =
-                        `<svg width="95" height="94" viewBox="0 0 95 94" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                         <rect x="0.5" width="94" height="94" fill="url(#pattern0)"/>
-                         <defs>
-                         <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
-                         <use xlink:href="#image0_212_112" transform="scale(0.01)"/>
-                         </pattern>
-                         <image id="image0_212_112" width="100" height="100" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAABtNJREFUeAHtnE2IHEUUxzeiHhQUUcQPPKjgQfxkRRQV10y9/+vZdQUhC+JBQYngQRBB9OBhQTEiigqCgh78AL0IHuLJPXgRJAcRRBYvEo0gBvE7Go0xqzW7NVQ/ume6a7vq9SwVGLrr4733r9+/M8vMdNfcXP6XCWQCmUAmkAkkJsDAxoy9PlteWDgnMaZ05WbMDHfxrBPRBekoJaw0o4ZswJgvb9+9+8KEqNKUmlVDrG4QHQRwcRpSiapIQxKVbV1G6vTa3wyHw0tbJ+xrgLew0fvzrOj0dYPou+FweHlftbfS5S/MnrcKTjhZ6qxofw/gioSS4pSSC4tTZftZpU4iekv2MXC4KIqrtl9NMYNclKKUiaUrdO5i5pdlP4h+YubrJybr86BcUF+11ui0prwoxxj4pSiKG/u6lom65GImTlYcnKSTgafkOANHmPk2RclhpeVCwrLEj5qmswBW5RwQ/cHMJr66DivIRXSYutNUTXQy82NyHoj+Koju6FRMzGRyATFrbSd3U50F8KicC6K/C6I7t1M/WawUn6xwy0JtdAJ4kIETIuYYgD0ty6afLkTPzAfDaaSYeS+I/vXXB6LjzHzPtFjVcV+wPVcVM6F4iE5mvpuBf/xYawqA+yaU0h3yxe40QyxZAHdJU+zbGYCHdMnXVN/phmyZsoeBY2KtJ5j54Roset1C5I56y/KpMvMSA0flegvgCX+e+rkUqC6oRkAXOpm5APCnzMVEz9SUTd8txaVX0KxiVzqHRLcy8LvM1xtTpLBmeNLP6lJnYczNIPpV5mSi5+bm5nalX51XUYryhnp12rVOIrqOiX6UeYnoldXV1ZPUFi8FqQmZUjiGzqEx1zLzDzI3M7+mZooUM4WL2nAsnfa3ePubvMzPzO8sLCycnHzBUkhyAQ0LSp0p2gDebSivu2lyYd1l7jaT1Jmq3e0qGmSTC2sQojJF6kzVTr5YubDkAhoWlDpTtRvK626aXFh3mWczkzoPdQE9802dh7qAbEiZQDakZzyyIdmQMoGetdQvUHUB2ZAygWxIz3hkQ7IhZQI9a6lfoOoCsiFlAtmQnvHIhuxAQwCcWwBfNX1ZBGzMfn8+Ed3k0Nhf6kD0hRsH8In9SdXvc2N1RwAXuXxtjuoXaBcC7DYXMs+ktgUE4HEx5wUHjplvKY0xPz+KsQ/gNNybZTAYXOLytTnK/G1iO5nbhYAQQ+y2GKO70bcAE9HX7hYcAE+WdDFfbRc7eiIqGzLd98FgcDaAtfGL6GAJKLA+HgPWXEYm+tCfZ+8CsWNMdMD1w5hP3fz/b935wOVhYN3NscetbTbGGpj5fBfX5ujntOdtYjuZG0NAAezz8wJ4oEqsfVbDn2fvszXGnOn/z6m7S93mFLH7qmq07fNz2vO28dueH0NAU0MAnA5jfnMaCuBj+zyga9tH0er2xsqGtLC+qSE2ZQG84RlwnIE3XZuB9+rKZkPqyFT0tzKEaOAZYP8WWFNGG+EAWK5IP+rKhtSRqehvY4j9fMFEh5wJ3vHw/Pz8KRXpsyF1UOr62xhicwB42jNicxu/zTvR60rYmPxHvZaOGAgw5FlpSEH0iEhbamZDSjgmN9oYsvWVyLfSEPs5Y1KVbMgkOmKsjSFEhAozRm9bQ2NuEKnHzWzIGMX0kzaGAHh7bIgx+/3PJQBer6uWDakjU9Hf1BD7wdB/3m+0JYYx748NAo4Mh8MzKkrkP+pVUOr6Whhyrwd/Y3EwuKwA7vf77BYZVXXy/5AqKjV9LQxZG8MnOmTTLS4unlfao4ToQFWZbEgVlZq+JobIr98BvOrSEdFHY6OADSK6xo25YzbEkWhwbGKI3GzM/5pEwgbwkiwr59iack5I278Q7HlIjm3FxBDQxBAAn3u1jy4vL5/mFrK0tHSW/abXG//ZH7fzsiGOVoPjojFXFkQr7iV/Tl1ZWTnVjdkjAJJp7ecTf479EcyfY3P647amPx567l0EOjt9qwsIJRcpTp2HuoBIYEPTqvNQFxBKLlKcOg91AZHAhqZV56EuIJRcpDh1HuoCIoENTavOQ11AKLlIceo81AVEAhuaVp2HuoBQcpHi1HmoC4gENjStOg91AaHkIsWp81AXEAlsaFp1HuoCQslFilPnoS4gEtjQtOo81AWEkosUp85DXUAksKFp1XmoCwglFylOnYe6gEhgQ9Oq81AXEEouUpw6D3UBkcCGplXnoS4glFykOHUe6gIigQ1Nq85DXUAouUhx6jzUBUQCG5pWnYcUkNubTwA7DqHGBse5wvlYNsLxCAYbGugK52M2ZPPx54a7+2hdMKEXeo7LBDKBTCATyARCCfwHp/izMKqRVXgAAAAASUVORK5CYII="/>
-                         </defs>
-                         </svg>`;
-                    fileIcon = createFileIcon(file, svgFileCode);
+                html += `
+                    <div class="trace-download-item">
+                        <div class="trace-info">
+                            <i class="fas fa-file-archive"></i>
+                            <span class="trace-name">${traceName}</span>
+                        </div>
+                        <button class="trace-download-btn" onclick='downloadTrace("${testIndex}", ${idx})'>
+                            <i class="fas fa-download"></i>
+                            Download Trace
+                        </button>
+                    </div>
+                `;
             }
-            
-            fileItemContainer.appendChild(fileIcon);
-            fileItemContainer.appendChild(fileName);
 
-            return fileItemContainer;
+            html += '</div>';
+            viewerDiv.innerHTML = html;
+            viewerDiv.dataset.loaded = 'true';
         }
 
-        function createImagePreview(file) {
-            //TODO: consider using "../${file}", maybe we should get full paths when generating artifacts in Mocha!
-            const filepath = file?.path || `../${file}`;
-            const imagePreview = document.createElement('img');
-            // component styles
-            imagePreview.src = filepath;
-            imagePreview.alt = 'Image Preview';
-            imagePreview.style.maxWidth = '200px';
-            imagePreview.style.height = '150px';
-            imagePreview.style.cursor = 'pointer';
+        function downloadTrace(testIndex, traceIdx) {
+            const traces = window.testTraces && window.testTraces[testIndex];
+            if (!traces || !Array.isArray(traces) || traceIdx >= traces.length) return;
 
-            imagePreview.addEventListener('click', () => {
-                window.open(filepath, '_blank');
-            });
+            const trace = traces[traceIdx];
+            const traceDataUrl = typeof trace === 'string' ? trace : trace.dataUrl;
+            const traceName = typeof trace === 'object' && trace.name ? trace.name :
+                             (traceIdx === 0 ? 'test-failed-trace.zip' : `trace-${traceIdx + 1}.zip`);
 
-            return imagePreview;
+            const link = document.createElement('a');
+            link.href = traceDataUrl;
+            link.download = traceName;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
         }
 
-        function createFileIcon(file, svg) {
-            //TODO: consider using "../${file}", maybe we should get full paths when generating artifacts in Mocha!
-            const filepath = file?.path || `../${file}`;
-            const fileIcon = document.createElement('div');
-            // component styles
-            fileIcon.innerHTML = svg;
-            fileIcon.style.width = '150px';
-            fileIcon.style.height = '150px';
-            fileIcon.style.cursor = 'pointer';
-            fileIcon.style.textAlign = 'center';
+        function openAttachment(filePath) {
+            const url = String(filePath || '').trim();
 
-            fileIcon.addEventListener('click', () => {
-                window.open(filepath, '_blank');
-            });
+            const ok = /^(https?:\/\/|file:\/\/|\/|\.\/|\.\.\/)/i.test(url);
+            if (!ok) return;
 
-            return fileIcon;
+            const w = window.open(url, '_blank', 'noopener,noreferrer');
+            if (w) w.opener = null;
         }
 
-        function createFileName(file) {
-            //TODO: consider using "../${file}", maybe we should get full paths when generating artifacts in Mocha!
-            const filepath = file?.path || `../${file}`;
-            const fileName = document.createElement('div');
-            // component styles
-            fileName.style.fontSize = '14px';
-            fileName.style.marginTop = '10px';
-            fileName.style.cursor = 'pointer';
+        function groupTestsBySuite(tests) {
+            const groups = {};
+
+            tests.forEach(test => {
+                const suite = test.suite_title || 'Unknown Suite';
+                if (!groups[suite]) {
+                    groups[suite] = [];
+                }
+                groups[suite].push(test);
+            });
+
+            return Object.entries(groups).map(([name, tests]) => ({
+                name,
+                type: 'suite',
+                tests
+            }));
+        }
 
-            fileName.textContent = filepath.split('/').pop();
+        function groupTestsByFile(tests) {
+            const groups = {};
 
-            fileName.addEventListener('click', () => {
-                window.open(filepath, '_blank');
+            tests.forEach(test => {
+                const file = test.file || 'Unknown File';
+                if (!groups[file]) {
+                    groups[file] = [];
+                }
+                groups[file].push(test);
             });
 
-            return fileName;
+            return Object.entries(groups).map(([name, tests]) => ({
+                name,
+                type: 'file',
+                tests
+            }));
         }
 
-        function addCollapseExpandListener(testitem__top) {
-            testitem__top.addEventListener("click", function () {
-                collapse_expand(testitem__top);
+        function filterTests() {
+            const filteredTests = allTests.filter(test => {
+                const matchesFilter = currentFilter === 'all' || test.status.toLowerCase() === currentFilter;
+                const matchesSearch = searchTerm === '' ||
+                    (test.title && test.title.toLowerCase().includes(searchTerm.toLowerCase())) ||
+                    (test.suite_title && test.suite_title.toLowerCase().includes(searchTerm.toLowerCase()));
+
+                return matchesFilter && matchesSearch;
             });
+
+            return filteredTests;
         }
 
-        function collapse_expand(top) {
-            const block = top.closest('.testitem');
-            const icon = top.querySelector('.testitem__icon');
-            const testitem__ico_right = icon.querySelector('.testitem__ico_right');
-            const testitem__ico_down = icon.querySelector('.testitem__ico_down');
-            const body = block.querySelector('.testitem__body');
+        function renderTests() {
+            const container = document.getElementById('testsContainer');
+            const filteredTests = filterTests();
 
-            if (body.classList.contains('d-none')) {
-                body.classList.remove('d-none');
-                testitem__ico_right.classList.add('d-none');
-                testitem__ico_down.classList.remove('d-none');
-            } 
-            else {
-                body.classList.add('d-none');
-                testitem__ico_down.classList.add('d-none');
-                testitem__ico_right.classList.remove('d-none');
+            if (groupingMode === 'suite') {
+                const groups = groupTestsBySuite(filteredTests);
+                renderGroupedTests(container, groups);
+                return;
+            } else if (groupingMode === 'file') {
+                const groups = groupTestsByFile(filteredTests);
+                renderGroupedTests(container, groups);
+                return;
             }
-        }
 
-        function initializeMenu(clone) {
-            const menu = clone.querySelector('.testitem__menu');
-            const item = menu.querySelectorAll('.testitem__mitem');
+            const startIndex = (currentPage - 1) * pageSize;
+            const endIndex = startIndex + pageSize;
+            const paginatedTests = filteredTests.slice(startIndex, endIndex);
 
-            for (let i = 0; i < item.length; i++) {
-                item[i].addEventListener('click', function () {
-                    show_content(item[i])
-                })
+            if (paginatedTests.length === 0) {
+                container.innerHTML = `
+                    <div class='empty-state'>
+                        <div class='empty-icon'>
+                            <i class='fas fa-search'></i>
+                        </div>
+                        <div class='empty-title'>No Tests Found</div>
+                        <div class='empty-description'>No tests match your current filter criteria.</div>
+                    </div>
+                `;
+            } else {
+                container.innerHTML = '';
+                paginatedTests.forEach((test, index) => {
+                    const testItem = createTestItem(test, startIndex + index);
+                    container.appendChild(testItem);
+                });
             }
+
+            renderPagination(filteredTests.length);
+            setTimeout(populateMetadataFields, 50);
         }
 
-        function show_content(elem) {
-            removeAddActive(elem);
+        function populateMetadataFields() {
+            const metaGrids = document.querySelectorAll('[data-test-meta]');
+            metaGrids.forEach(grid => {
+                const testItem = grid.closest('.test-item');
+                if (!testItem) return;
+
+                const testIndex = parseInt(testItem.getAttribute('data-test-index'));
+                const test = allTests[testIndex];
+                if (!test || !test.meta) return;
+
+                Object.entries(test.meta).forEach(([key, value]) => {
+                    const metaItem = document.createElement('div');
+                    metaItem.className = 'metadata-item meta-item';
+                    metaItem.setAttribute('data-meta-key', key);
+
+                    const keyDiv = document.createElement('div');
+                    keyDiv.className = 'metadata-key';
+                    keyDiv.textContent = key;
+
+                    const valueDiv = document.createElement('div');
+                    valueDiv.className = 'metadata-value';
+                    valueDiv.textContent = typeof value === 'object' ? JSON.stringify(value, null, 2) : value;
 
-            const body = elem.closest('.testitem__body');
-            const content = body.querySelector('.testitem__content');
-            const blocks = content.querySelectorAll('.testitem__case');
+                    metaItem.appendChild(keyDiv);
+                    metaItem.appendChild(valueDiv);
+                    grid.appendChild(metaItem);
+                });
+            });
+
+            setTimeout(applyMetaVisibility, 10);
+        }
 
-            for (let i = 0; i < blocks.length; i++) {
-                blocks[i].classList.add('d-none');
+        function renderGroupedTests(container, groups) {
+            if (groups.length === 0) {
+                container.innerHTML = `
+                    <div class='empty-state'>
+                        <div class='empty-icon'>
+                            <i class='fas fa-search'></i>
+                        </div>
+                        <div class='empty-title'>No Tests Found</div>
+                        <div class='empty-description'>No tests match your current filter criteria.</div>
+                    </div>
+                `;
+                return;
             }
 
-            const type = elem.getAttribute('type');
-            const show_elem = content.querySelector('div[type="' + type + '"]');
+            container.innerHTML = '';
+
+            const startIndex = (currentPage - 1) * pageSize;
+            const endIndex = startIndex + pageSize;
+            const paginatedGroups = groups.slice(startIndex, endIndex);
+
+            paginatedGroups.forEach(group => {
+                const groupItem = createTestGroup(group);
+                container.appendChild(groupItem);
+            });
 
-            show_elem.classList.remove('d-none');
+            renderPagination(groups.length);
+            setTimeout(populateMetadataFields, 50);
         }
 
-        function removeAddActive(elem) {
-            const menu = elem.closest('.testitem__menu');
-            const item = menu.querySelectorAll('.testitem__mitem');
+        function createTestGroup(group) {
+            const groupElement = document.createElement('div');
+            groupElement.className = 'test-group';
 
-            for (let i = 0; i < item.length; i++) {
-                item[i].classList.remove('testitem__mitem_active');
-            }
-            elem.classList.add('testitem__mitem_active');
+            const passedCount = group.tests.filter(t => t.status.toLowerCase() === 'passed').length;
+            const failedCount = group.tests.filter(t => t.status.toLowerCase() === 'failed').length;
+            const skippedCount = group.tests.filter(t => t.status.toLowerCase() === 'skipped').length;
+            const todoCount = group.tests.filter(t => t.status.toLowerCase() === 'todo').length;
+
+            const groupIcon = group.type === 'suite' ? 'layer-group' : 'file-code';
+
+            const header = document.createElement('div');
+            header.className = 'test-group-header';
+            header.innerHTML = `
+                <div class='test-group-title'>
+                    <i class='fas fa-${groupIcon}'></i>
+                    <div class='test-group-name'>${group.name}</div>
+                    <div class='test-group-count'>${group.tests.length} tests</div>
+                </div>
+                <div class='test-group-stats'>
+                    ${passedCount > 0 ? `<div class='test-group-stat' style='color: #10b981;'><i class='fas fa-check-circle'></i> ${passedCount}</div>` : ''}
+                    ${failedCount > 0 ? `<div class='test-group-stat' style='color: #ef4444;'><i class='fas fa-times-circle'></i> ${failedCount}</div>` : ''}
+                    ${skippedCount > 0 ? `<div class='test-group-stat' style='color: #f59e0b;'><i class='fas fa-forward'></i> ${skippedCount}</div>` : ''}
+                    ${todoCount > 0 ? `<div class='test-group-stat' style='color: #8b5cf6;'><i class='fas fa-clock'></i> ${todoCount}</div>` : ''}
+                </div>
+                <i class='fas fa-chevron-down test-group-expand'></i>
+            `;
+            header.onclick = () => toggleTestGroup(header);
+            groupElement.appendChild(header);
+
+            const content = document.createElement('div');
+            content.className = 'test-group-content';
+
+            group.tests.forEach((test, index) => {
+                const testItem = createTestItem(test, index);
+                content.appendChild(testItem);
+            });
+
+            groupElement.appendChild(content);
+
+            return groupElement;
         }
 
-        // GET test data
-        const testEntries = {{{ pageDispleyElements tests }}};
-        const allEntries = testEntries['totalTests'];
+        function toggleTestGroup(header) {
+            const group = header.parentElement;
+            group.classList.toggle('expanded');
+        }
 
-        if (allEntries.length === 0) {
-            const searchEl = document.querySelector('.input-group');
-            const radioEl = document.querySelector('.menuTests');
+        function renderPagination(totalItems) {
+            const container = document.getElementById('paginationContainer');
+            const totalPages = Math.ceil(totalItems / pageSize);
 
-            searchEl.classList.add('d-none');
-            radioEl.classList.add('d-none');
-        } 
-        else {
-            function search(array, testEntries) {
-                const handleSearch = (input) => {
-                    const value = input.value.trim().toLowerCase();
-                    const select = document.querySelector('.form-select');
-                    const pagination = document.querySelectorAll('nav');
+            if (totalPages <= 1) {
+                container.innerHTML = '';
+                return;
+            }
 
-                    if (value) {
-                        select.classList.add('d-none');
-                        pagination.forEach(item => item.classList.add('d-none'));
-                    } 
-                    else {
-                        select.classList.remove('d-none');
-                        pagination.forEach(item => item.classList.remove('d-none'));
+            let paginationHTML = '<div class=\"pagination\">';
 
-                        remove(array);
+            paginationHTML += `
+                <button class='pagination-btn' onclick='goToPage(${currentPage - 1})'
+                        ${currentPage === 1 ? 'disabled' : ''}>
+                    <i class='fas fa-chevron-left'></i>
+                </button>
+            `;
 
-                        const paginationCount = select.value;
-                        const category = select.getAttribute('status');
-                        
-                        if (testEntries[category][paginationCount][0]) {
-                            add(testEntries[category][paginationCount][0]);
-                        }
-                    }
+            const maxVisiblePages = 5;
+            let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+            let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
 
-                    remove(array);
-
-                    const filteredTests = array.filter(test => test.title.toLowerCase().includes(value) || test.suite_title.toLowerCase().includes(value));
-
-                    const existingNoDataElement = document.querySelector('.noResults');
-
-                    if (filteredTests.length === 0) {
-                        if (!existingNoDataElement) {
-                            const testElement = document.createElement('div');
-                            testElement.classList.add('noData', 'noResults');
-                            testElement.innerHTML = 
-                            `<div class='noData'>
-                                <svg width="185" height="185" viewBox="0 0 370 370" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <g clip-path="url(#clip0_215_375)">
-                                <path opacity="0.1" d="M185 369.998C287.173 369.998 370.001 287.171 370.001 184.999C370.001 82.8268 287.173 0 185 0C82.8274 0 0 82.8268 0 184.999C0 287.171 82.8274 369.998 185 369.998Z" fill="#A9C7FF"/>
-                                <path d="M104.96 129.507C105.629 128.757 106.439 128.147 107.344 127.71C108.249 127.273 109.231 127.019 110.234 126.961C111.237 126.904 112.242 127.045 113.191 127.376C114.14 127.707 115.014 128.221 115.764 128.89L140.183 150.67L129.997 162.091L105.577 140.311C104.827 139.642 104.216 138.832 103.779 137.927C103.342 137.022 103.088 136.04 103.031 135.037C102.974 134.034 103.114 133.029 103.446 132.08C103.777 131.132 104.291 130.257 104.96 129.507Z" fill="white"/>
-                                <path d="M130.056 163.157L105.074 140.874C104.25 140.139 103.579 139.249 103.099 138.255C102.619 137.261 102.34 136.182 102.277 135.079C102.214 133.977 102.368 132.873 102.732 131.831C103.096 130.788 103.661 129.828 104.396 129.004C105.131 128.18 106.021 127.508 107.015 127.028C108.009 126.548 109.088 126.269 110.191 126.206C111.293 126.143 112.397 126.298 113.439 126.661C114.482 127.025 115.443 127.59 116.267 128.325L141.251 150.608L130.056 163.157ZM110.677 127.703C110.544 127.703 110.409 127.707 110.275 127.714C108.913 127.792 107.605 128.273 106.516 129.094C105.427 129.916 104.607 131.042 104.158 132.329C103.709 133.617 103.652 135.01 103.994 136.33C104.336 137.65 105.062 138.84 106.08 139.747L129.936 161.024L139.117 150.731L115.261 129.454C114.002 128.325 112.371 127.701 110.68 127.703H110.677Z" fill="#474646"/>
-                                <path d="M240 162.09L229.814 150.669L254.234 128.89C255.748 127.539 257.737 126.845 259.763 126.961C261.789 127.076 263.686 127.992 265.037 129.507C266.388 131.021 267.082 133.01 266.966 135.036C266.85 137.062 265.935 138.96 264.42 140.31L240 162.09Z" fill="white"/>
-                                <path d="M239.942 163.157L228.749 150.608L253.733 128.325C255.397 126.841 257.583 126.079 259.809 126.206C262.035 126.333 264.12 127.34 265.604 129.004C267.088 130.668 267.851 132.853 267.723 135.079C267.596 137.306 266.59 139.39 264.926 140.874L239.942 163.157ZM230.883 150.73L240.064 161.023L263.92 139.747C264.596 139.144 265.146 138.414 265.54 137.599C265.934 136.783 266.163 135.898 266.214 134.994C266.266 134.09 266.139 133.185 265.841 132.329C265.543 131.474 265.079 130.686 264.476 130.011C263.873 129.335 263.143 128.784 262.328 128.391C261.512 127.997 260.627 127.768 259.723 127.716C258.819 127.664 257.913 127.791 257.058 128.09C256.203 128.388 255.415 128.852 254.739 129.454L230.883 150.73Z" fill="#474646"/>
-                                <path d="M250.171 176.257C255.618 200.379 263.075 215.898 259.362 224.811C257.41 229.495 253.403 233.424 246.771 233.424C236.433 233.424 236.433 221.232 226.095 221.232C215.756 221.232 215.758 233.424 205.42 233.424C195.083 233.424 195.084 221.232 184.748 221.232C174.411 221.232 174.411 233.424 164.074 233.424C153.737 233.424 153.738 221.232 143.401 221.232C133.065 221.232 133.066 233.424 122.731 233.424C116.595 233.424 113.126 229.81 110.926 225.633C105.639 215.6 117.96 193.521 122.731 174.051C128.002 152.536 127.558 125.739 128.265 109.576C129.629 78.4083 153.554 53.0876 184.755 53.0876C215.955 53.0876 238.971 78.4613 241.244 109.576C242.469 126.351 245.184 154.176 250.171 176.257Z" fill="white"/>
-                                <path d="M246.771 234.186C241.249 234.186 238.506 230.95 235.852 227.818C233.311 224.822 230.911 221.992 226.095 221.992C221.278 221.992 218.882 224.822 216.339 227.818C213.685 230.948 210.942 234.186 205.42 234.186C199.899 234.186 197.156 230.95 194.503 227.818C191.962 224.822 189.562 221.992 184.748 221.992C179.933 221.992 177.535 224.822 174.992 227.818C172.339 230.948 169.596 234.186 164.074 234.186C158.552 234.186 155.808 230.95 153.16 227.822C150.619 224.825 148.219 221.995 143.404 221.995C138.589 221.995 136.191 224.825 133.65 227.822C130.998 230.951 128.255 234.189 122.734 234.189C117.243 234.189 113.161 231.508 110.254 225.992C106.568 218.996 110.995 206.627 115.683 193.534C118.011 187.03 120.416 180.305 121.994 173.874C126.21 156.668 126.743 136.45 127.172 120.204C127.272 116.362 127.368 112.732 127.51 109.548C128.186 94.1198 134.32 79.7607 144.785 69.1146C149.986 63.7845 156.204 59.5527 163.071 56.6697C169.937 53.7867 177.313 52.3113 184.76 52.3308C192.159 52.3133 199.486 53.7933 206.298 56.6817C213.11 59.5701 219.267 63.8071 224.399 69.1377C234.622 79.6633 240.876 94.0076 242.01 109.526C243.102 124.489 245.712 153.033 250.92 176.094C252.686 183.916 254.663 190.825 256.407 196.921C260.048 209.651 262.679 218.848 260.069 225.109C258.652 228.498 255.046 234.186 246.771 234.186ZM226.095 220.47C231.617 220.47 234.361 223.705 237.014 226.837C239.556 229.834 241.956 232.664 246.771 232.664C254.162 232.664 257.391 227.561 258.658 224.519C261.062 218.751 258.489 209.769 254.935 197.338C253.188 191.222 251.203 184.292 249.428 176.428C244.198 153.268 241.58 124.639 240.484 109.635C238.161 77.833 214.203 53.8517 184.754 53.8517C154.874 53.8517 130.395 78.3441 129.024 109.612C128.885 112.782 128.789 116.406 128.686 120.241C128.278 135.699 127.72 156.869 123.465 174.234C121.871 180.742 119.45 187.505 117.109 194.046C112.538 206.815 108.22 218.877 111.594 225.28C114.212 230.248 117.853 232.662 122.725 232.662C127.54 232.662 129.938 229.832 132.48 226.836C135.132 223.706 137.875 220.468 143.396 220.468C148.916 220.468 151.661 223.704 154.313 226.836C156.854 229.832 159.253 232.662 164.068 232.662C168.884 232.662 171.284 229.832 173.824 226.836C176.478 223.706 179.221 220.468 184.742 220.468C190.263 220.468 193.007 223.704 195.659 226.836C198.2 229.832 200.599 232.662 205.415 232.662C210.23 232.662 212.63 229.832 215.171 226.836C217.83 223.708 220.573 220.47 226.095 220.47Z" fill="#474646"/>
-                                <path d="M163.527 113.221C166.986 113.221 169.789 110.418 169.789 106.96C169.789 103.501 166.986 100.698 163.527 100.698C160.069 100.698 157.266 103.501 157.266 106.96C157.266 110.418 160.069 113.221 163.527 113.221Z" fill="#474646"/>
-                                <path d="M206.465 113.221C209.923 113.221 212.726 110.418 212.726 106.96C212.726 103.501 209.923 100.698 206.465 100.698C203.006 100.698 200.203 103.501 200.203 106.96C200.203 110.418 203.006 113.221 206.465 113.221Z" fill="#474646"/>
-                                <path d="M196.211 123.859C196.573 123.859 196.93 123.938 197.256 124.093C197.583 124.247 197.871 124.473 198.1 124.752C198.329 125.032 198.492 125.36 198.578 125.71C198.665 126.061 198.672 126.427 198.599 126.781C197.256 133.059 191.677 137.005 184.998 137.005C178.319 137.005 172.74 133.061 171.397 126.781C171.324 126.427 171.331 126.061 171.418 125.71C171.504 125.359 171.668 125.032 171.896 124.752C172.125 124.472 172.413 124.247 172.74 124.093C173.067 123.938 173.424 123.858 173.785 123.859H196.211Z" fill="white"/>
-                                <path d="M184.997 137.767C177.802 137.767 172.037 133.416 170.652 126.94C170.553 126.479 170.559 126.002 170.67 125.543C170.78 125.085 170.992 124.657 171.29 124.292C171.59 123.919 171.97 123.618 172.402 123.412C172.834 123.206 173.306 123.099 173.785 123.1H196.212C196.691 123.099 197.164 123.206 197.595 123.412C198.027 123.618 198.407 123.919 198.707 124.292C199.005 124.657 199.217 125.085 199.327 125.543C199.438 126.002 199.444 126.479 199.345 126.94C197.958 133.416 192.192 137.767 184.997 137.767ZM173.784 124.621C173.532 124.621 173.284 124.677 173.057 124.786C172.83 124.894 172.631 125.052 172.473 125.248C172.318 125.437 172.208 125.659 172.151 125.897C172.093 126.135 172.09 126.382 172.141 126.622C173.371 132.377 178.537 136.243 184.996 136.243C191.455 136.243 196.621 132.377 197.852 126.622C197.903 126.382 197.899 126.135 197.842 125.897C197.784 125.659 197.674 125.437 197.519 125.248C197.361 125.052 197.162 124.894 196.935 124.786C196.708 124.677 196.46 124.621 196.209 124.621H173.784Z" fill="#474646"/>
-                                <path d="M332.184 297.095C298.385 341.408 245.033 370 185.003 370C124.973 370 71.6211 341.408 37.8223 297.095C76.4052 282.579 128.135 273.704 185.003 273.704C241.872 273.704 293.598 282.579 332.184 297.095Z" fill="#A9C7FF"/>
-                                <path d="M347.711 96.8905L252.766 96.4848C252.766 80.628 261.697 77.5062 271.192 74.931C280.687 72.3558 284.959 54.9269 301.458 53.9351C311.202 53.3491 316.312 55.8566 320.544 59.0855C320.549 59.0911 320.549 59.0967 320.555 59.0967C331.158 70.5047 340.281 83.2025 347.711 96.8905Z" fill="white"/>
-                                <path d="M76.8801 214.712L2.43035 215.033C1.15867 207.26 0.386967 199.413 0.119995 191.541C16.4277 189.231 14.7598 176.27 34.2344 177.448C48.6825 178.316 52.4355 193.581 60.7471 195.835C69.0587 198.089 76.8801 200.83 76.8801 214.712Z" fill="white"/>
-                                </g>
-                                <defs>
-                                <clipPath id="clip0_215_375">
-                                <rect width="370" height="370" fill="white"/>
-                                </clipPath>
-                                </defs>
-                                </svg>
-
-                                <div class='noDataText'>NO SEARCH RESULTS</div>
-                            </div>`;
-                            document.querySelector('.testWrapp').appendChild(testElement);
-                        }
-                    } 
-                    else {
-                        const paginationCount = select.value;
-                        const category = select.getAttribute('status');
-
-                        if (existingNoDataElement) {
-                            existingNoDataElement.remove();
-                        }
-
-                        if (testEntries[category][paginationCount][0]) {
-                            add(filteredTests);
-                            if (!value) {
-                                remove(filteredTests);
-                                add(testEntries[category][paginationCount][0]);
-                            }
-                        } 
-                        else {
-                            if (value) {
-                                add(filteredTests);
-                            }
-                            else {
-                                if (!existingNoDataElement) {
-                                    const testElement = document.createElement('div');
-
-                                    select.classList.add('d-none');                                    
-                                    testElement.classList.add('noData', 'noResults');
-                                    testElement.innerHTML = 'NO RESULTS';
-                                    document.querySelector('.testWrapp').appendChild(testElement);
-                                }
-                            }
-                        }
-                    }
-                };
+            if (endPage - startPage < maxVisiblePages - 1) {
+                startPage = Math.max(1, endPage - maxVisiblePages + 1);
+            }
 
-                const inputSearch = document.querySelector('.report .inputSearch');
-                inputSearch.addEventListener('input', () => handleSearch(inputSearch));
+            for (let i = startPage; i <= endPage; i++) {
+                paginationHTML += `
+                    <button class='pagination-btn ${i === currentPage ? 'active' : ''}'
+                            onclick='goToPage(${i})'>${i}</button>
+                `;
             }
 
-            function radioMenuStart(){
-                function showBlockForCategory(input){
-                    const searchEl = document.querySelector('.input-group'),
-                        element = document.querySelector('.form-select')
-                    let category = 'all';
+            paginationHTML += `
+                <button class='pagination-btn' onclick='goToPage(${currentPage + 1})'
+                        ${currentPage === totalPages ? 'disabled' : ''}>
+                    <i class='fas fa-chevron-right'></i>
+                </button>
+            `;
 
-                    remove(testEntries[category][0][0]);
+            paginationHTML += '</div>';
+            container.innerHTML = paginationHTML;
+        }
 
-                    category = input.getAttribute('category');
-                    element.setAttribute('status', category);
+        function goToPage(page) {
+            const filteredTests = filterTests();
+            const totalPages = Math.ceil(filteredTests.length / pageSize);
 
-                    const pagination = document.querySelectorAll('nav');
-                    pagination.forEach(item => item.classList.add('d-none'));
+            if (page < 1 || page > totalPages) return;
 
-                    let inputEl = document.querySelector('.inputSearch');
-                    inputEl.value = '';
-                    
-                    pagination.forEach(item => item.classList.remove('d-none'));
+            currentPage = page;
+            renderTests();
+        }
 
-                    displayPagination(testEntries,element.value,category);
+        function updateCounts() {
+            const by = (s) => allTests.filter(t => String(t.status || '').toLowerCase() === s).length;
 
-                    if(testEntries[category][0][0]){
-                        element.classList.remove('d-none');
-                        const existingNoDataElement = document.querySelector('.noResults');
+            const counts = {
+                all: allTests.length,
+                passed: by('passed'),
+                failed: by('failed'),
+                skipped: by('skipped'),
+                todo: by('todo'),
+            };
 
-                        if (existingNoDataElement) {
-                            existingNoDataElement.remove();
-                        }
+            document.getElementById('countAll').textContent = counts.all;
+            document.getElementById('countPassed').textContent = counts.passed;
+            document.getElementById('countFailed').textContent = counts.failed;
+            document.getElementById('countSkipped').textContent = counts.skipped;
 
-                        searchEl.classList.remove('d-none');
-                        add(testEntries[category][element.value][0]);
-                    }
-                    else {
-                        element.classList.add('d-none');
-                        const existingNoDataElement = document.querySelector('.noResults');
-
-                        if (existingNoDataElement) {
-                            existingNoDataElement.remove();
-                        }
-
-                        const testElement = document.createElement('div');
-                        testElement.classList.add('noData');
-                        testElement.classList.add('noResults');
-                        testElement.innerHTML = 'NO RESULTS';
-                        searchEl.classList.add('d-none');
-
-                        const testWrapp = document.querySelector('.testWrapp');
-                        testWrapp.appendChild(testElement);
-                    }
-                }
+            const todoEl = document.getElementById('countTodo');
+            if (todoEl) todoEl.textContent = counts.todo;
+
+            const todoTab = document.querySelector('.filter-tab[data-filter="todo"]');
+            if (todoTab) todoTab.style.display = counts.todo > 0 ? '' : 'none';
+        }
 
-                const page = document.querySelector('.report');
-                const menuTests = page.querySelector('.menuTests');
-                const items = menuTests.querySelectorAll('input[name="groupTest"]');
+        function updateTitleColor() {
+            const by = (s) => allTests.filter(t => String(t.status || '').toLowerCase() === s).length;
+            const failed = by('failed');
+            const passed = by('passed');
+            const skipped = by('skipped');
+            const todo = by('todo');
 
-                for(let i=0; i<items.length; i++){
-                    items[i].addEventListener('change',function(){
-                        showBlockForCategory(items[i])
-                    })
-                }
+            const mainTitle = document.getElementById('mainTitle');
+            if (!mainTitle) return;
+
+            mainTitle.classList.remove('status-passed', 'status-failed', 'status-skipped', 'status-todo');
+
+            if (failed > 0) {
+                mainTitle.classList.add('status-failed');
+            } else if (passed > 0) {
+                mainTitle.classList.add('status-passed');
+            } else if (skipped > 0) {
+                mainTitle.classList.add('status-skipped');
+            } else if (todo > 0) {
+                mainTitle.classList.add('status-todo');
             }
+        }
 
-            radioMenuStart();
-
-            search(allEntries, testEntries);
-
-            const radioCount = (allEntries) => {
-                const allRadio = document.querySelectorAll('.numTest');
-
-                allRadio.forEach((radio) => {
-                    const attribute = radio.getAttribute('lcategory');
-
-                    switch (attribute) {
-                        case 'all':
-                            radio.innerHTML = allEntries.length;
-                            break;
-                        case 'passed':
-                            const passedCount = allEntries.filter(test => test.status === 'passed').length;
-                            radio.innerHTML = passedCount;
-                            break;
-                        case 'failed':
-                            const failedCount = allEntries.filter(test => test.status === 'failed').length;
-                            radio.innerHTML = failedCount;
-                            break;
-                        case 'skipped':
-                            const skippedCount = allEntries.filter(test => test.status === 'skipped').length;
-                            radio.innerHTML = skippedCount;
-                            break;
-                        default: // no default action for now
-                    }
+        document.addEventListener('DOMContentLoaded', function() {
+            const filterTabs = document.querySelectorAll('.filter-tab');
+            filterTabs.forEach(tab => {
+                tab.addEventListener('click', function() {
+                    filterTabs.forEach(t => t.classList.remove('active'));
+                    this.classList.add('active');
+
+                    currentFilter = this.dataset.filter;
+                    currentPage = 1;
+                    renderTests();
                 });
-            }
+            });
+
+            
+            const searchInput = document.getElementById('searchInput');
+            searchInput.addEventListener('input', function() {
+                searchTerm = this.value.trim();
+                currentPage = 1;
+                renderTests();
+            });
 
-            radioCount(allEntries);
+            const pageSizeSelect = document.getElementById('pageSizeSelect');
+            pageSizeSelect.addEventListener('change', function() {
+                pageSize = parseInt(this.value);
+                currentPage = 1;
+                renderTests();
+            });
 
-            function removeTest(category) {
-                const page = document.querySelector('.report');
-                const wrapp = page.querySelector('.testWrapp');
-                const clones = wrapp.querySelectorAll('div[name="testitem"][type="clone"]');
+            const groupingSelect = document.getElementById('groupingSelect');
+            groupingSelect.addEventListener('change', function() {
+                groupingMode = this.value;
+                currentPage = 1;
+                renderTests();
+            });
 
-                clones.forEach((clone) => {
-                    if (clone.getAttribute('category') === category) clone.remove();
-                });
+            const badge = document.querySelector('.status-badge');
+            if (badge) {
+                const s = badge.textContent.trim().toLowerCase();
+                badge.classList.add(`status-${s}`);
             }
 
-            const add = (array) => {
-                for (let i = 0; i < array.length; i++) {
-                    const status = array[i].status;
-                    addOneTest(status, array[i]);
-                }
+            updateCounts();
+            updateTitleColor();
+            renderTests();
+        });
+
+        window.addEventListener('resize', function() {
+            if (document.getElementById('testChart')) {
+                drawTestChart();
             }
+        });
+
+        function formatFileSize(bytes) {
+            if (!bytes) return '';
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            if (bytes === 0) return '0 Bytes';
+            const i = Math.floor(Math.log(bytes) / Math.log(1024));
+            return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
+        }
+
+
+        let visibleMetaKeys = new Set();
+        const SETTINGS_STORAGE_KEY = 'testomatio_report_settings';
+
+        function collectAllMetaKeys() {
+            const metaKeys = new Map();
 
-            const remove = (array) => {
-                for (let i = 0; i < array.length; i++) {
-                    const status = array[i].status;
-                    removeTest(status, array[i]);
+            allTests.forEach(test => {
+                if (test.meta && typeof test.meta === 'object') {
+                    Object.keys(test.meta).forEach(key => {
+                        metaKeys.set(key, (metaKeys.get(key) || 0) + 1);
+                    });
                 }
+            });
+
+            return metaKeys;
+        }
+
+        function openSettings() {
+            const modal = document.getElementById('settingsModal');
+            modal.classList.add('active');
+
+            const savedSettings = localStorage.getItem(SETTINGS_STORAGE_KEY);
+            if (savedSettings) {
+                visibleMetaKeys = new Set(JSON.parse(savedSettings));
+            } else {
+                const metaKeys = collectAllMetaKeys();
+                visibleMetaKeys = new Set(metaKeys.keys());
             }
 
-            add(testEntries['all'][0][0]);
+            renderSettingsMetaList();
+        }
+
+        function closeSettings() {
+            const modal = document.getElementById('settingsModal');
+            modal.classList.remove('active');
+        }
+
+        function switchSettingsTab(event) {
+            const clickedTab = event.currentTarget;
+            const targetTab = clickedTab.getAttribute('data-tab');
 
-            const selectElement = document.querySelector('.form-select');
+            const allTabs = document.querySelectorAll('.settings-tab');
+            allTabs.forEach(tab => tab.classList.remove('active'));
 
-            selectElement.setAttribute('status', 'all');
+            const allContents = document.querySelectorAll('.settings-tab-content');
+            allContents.forEach(content => content.classList.remove('active'));
 
-            selectElement.addEventListener('change', function() {
-                let value = 0;
-                const category = selectElement.getAttribute('status');
+            clickedTab.classList.add('active');
+
+            const targetContent = document.querySelector(`.settings-tab-content[data-tab="${targetTab}"]`);
+            if (targetContent) {
+                targetContent.classList.add('active');
+            }
+        }
 
-                remove(testEntries[category][value][0]);
-                value = parseInt(this.value);
-                add(testEntries[category][value][0]);
+        function resetToDefaults() {
+            const metaKeys = collectAllMetaKeys();
+            visibleMetaKeys = new Set(metaKeys.keys());
 
-                displayPagination(testEntries, value, category);
+            const checkboxes = document.querySelectorAll('#metaFieldsList input[type="checkbox"]');
+            checkboxes.forEach(cb => {
+                cb.checked = true;
             });
 
-            const displayPagination = (testEntries, index, category) => {
-                let totalPages = testEntries[category][index].length;
-                let currentPage = 1;
-
-                function createPagination() {
-                    const paginationContainers = document.querySelectorAll('.pagination');
-                    paginationContainers.forEach((paginationContainer) => {
-                        paginationContainer.innerHTML = '';
-
-                        let startPage = 1;
-                        let endPage = totalPages;
-                        if (totalPages > 10) {
-                            if (currentPage > 5) {
-                                startPage = currentPage - 1;
-                                endPage = currentPage + 1;
-                            } 
-                            else {
-                                endPage = 5;
-                            }
-                        }
-
-                        if (startPage > 1) {
-                            const startEllipsis = document.createElement('li');
-
-                            startEllipsis.classList.add('page-item');
-                            startEllipsis.innerHTML = '<a class="page-link" href="#pagination">...</a>';
-                            startEllipsis.addEventListener('click', () => {
-                                remove(testEntries[category][index][currentPage - 1]);
-                                currentPage = 1;
-                                add(testEntries[category][index][currentPage - 1]);
-                                createPagination();
-                            });
-
-                            paginationContainer.appendChild(startEllipsis);
-                        }
-
-                        for (let i = startPage; i <= endPage; i++) {
-                            if (i <= totalPages) {
-                                const pageButton = document.createElement('li');
-                                pageButton.classList.add('page-item');
-
-                                if (i === currentPage) {
-                                    pageButton.classList.add('active');
-                                }
-
-                                pageButton.innerHTML = `<a class="page-link" href="#pagination">${i}</a>`;
-                                pageButton.addEventListener('click', () => {
-                                    remove(testEntries[category][index][currentPage - 1]);
-                                    currentPage = i;
-                                    add(testEntries[category][index][currentPage - 1]);
-                                    createPagination();
-                                });
-
-                                paginationContainer.appendChild(pageButton);
-                            }
-                        }
-
-                        if (endPage < totalPages) {
-                            const endEllipsis = document.createElement('li');
-                            
-                            endEllipsis.classList.add('page-item');
-                            endEllipsis.innerHTML = '<a class="page-link" href="#pagination">...</a>';
-                            endEllipsis.addEventListener('click', () => {
-                                remove(testEntries[category][index][currentPage - 1]);
-                                currentPage = totalPages;
-                                add(testEntries[category][index][currentPage - 1]);
-                                createPagination();
-                            });
-
-                            paginationContainer.appendChild(endEllipsis);
-                        }
-
-                        if (currentPage > 1) {
-                            const prevButton = document.createElement('li');
-
-                            prevButton.classList.add('page-item');
-                            prevButton.innerHTML = '<a class="page-link" href="#pagination">Previous</a>';
-                            prevButton.addEventListener('click', () => {
-                                remove(testEntries[category][index][currentPage - 1]);
-                                currentPage--;
-                                add(testEntries[category][index][currentPage - 1]);
-                                createPagination();
-                            });
-
-                            paginationContainer.insertBefore(prevButton, paginationContainer.firstChild);
-                        }
-                        if (currentPage < totalPages) {
-                            const nextButton = document.createElement('li');
-
-                            nextButton.classList.add('page-item');
-                            nextButton.innerHTML = '<a class="page-link" href="#pagination">Next</a>';
-                            nextButton.addEventListener('click', () => {
-                                remove(testEntries[category][index][currentPage - 1]);
-                                currentPage++;
-                                add(testEntries[category][index][currentPage - 1]);
-                                createPagination();
-                            });
-
-                            paginationContainer.appendChild(nextButton);
-                        }
-                    });
+            console.log('[Settings] Reset to defaults - all meta fields visible');
+        }
+
+        function renderSettingsMetaList() {
+            const container = document.getElementById('metaFieldsList');
+            const metaKeys = collectAllMetaKeys();
+
+            if (metaKeys.size === 0) {
+                container.innerHTML = `
+                    <div style='grid-column: 1/-1; text-align: center; color: var(--gray-500); padding: 40px;'>
+                        <i class='fas fa-tag' style='font-size: 48px; margin-bottom: 15px; opacity: 0.3;'></i>
+                        <p style='margin: 0;'>No metadata fields found in tests</p>
+                    </div>
+                `;
+                return;
+            }
+
+            const sortedKeys = Array.from(metaKeys.entries()).sort((a, b) => b[1] - a[1]);
+
+            container.innerHTML = sortedKeys.map(([key, count]) => `
+                <label class='settings-meta-item'>
+                    <input
+                        type='checkbox'
+                        value='${key}'
+                        ${visibleMetaKeys.has(key) ? 'checked' : ''}
+                        onchange='toggleMetaKey("${key}")'
+                    >
+                    <span class='settings-meta-label'>${key}</span>
+                    <span class='settings-meta-count'>${count}</span>
+                </label>
+            `).join('');
+        }
+
+        function toggleMetaKey(key) {
+            if (visibleMetaKeys.has(key)) {
+                visibleMetaKeys.delete(key);
+            } else {
+                visibleMetaKeys.add(key);
+            }
+        }
+
+        function saveSettings() {
+            localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(Array.from(visibleMetaKeys)));
+
+            applyMetaVisibility();
+
+            closeSettings();
+        }
+
+        function applyMetaVisibility() {
+            const allMetaItems = document.querySelectorAll('.meta-item[data-meta-key]');
+
+            allMetaItems.forEach(item => {
+                const key = item.getAttribute('data-meta-key');
+                if (visibleMetaKeys.has(key)) {
+                    item.classList.remove('hidden');
+                } else {
+                    item.classList.add('hidden');
                 }
-                createPagination();
+            });
+        }
+
+        function initializeSettings() {
+            const savedSettings = localStorage.getItem(SETTINGS_STORAGE_KEY);
+
+            if (savedSettings) {
+                try {
+                    const parsed = JSON.parse(savedSettings);
+                    visibleMetaKeys = new Set(parsed);
+                } catch (e) {
+                    console.error('[Settings] Failed to parse saved settings, using defaults', e);
+                    const metaKeys = collectAllMetaKeys();
+                    visibleMetaKeys = new Set(metaKeys.keys());
+                }
+            } else {
+                const metaKeys = collectAllMetaKeys();
+                visibleMetaKeys = new Set(metaKeys.keys());
             }
-            displayPagination(testEntries, 0, 'all');
+
         }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeSettings();
+        });
+
+        const originalRenderTests = renderTests;
+        renderTests = function() {
+            originalRenderTests();
+            setTimeout(applyMetaVisibility, 50);
+        };
     </script>
 </body>
 </html>