fix: 🐛 fixing ui issues in the report

.github/workflows/test-wdio.yml

@@ -59,7 +59,7 @@ jobs:
         if: always()
         uses: actions/upload-artifact@v7
         with:
-          name: wdio-report
+          name: wdio-report-formatter
           if-no-files-found: error
           path: |
             examples/wdio/reports
@@ -108,7 +108,7 @@ jobs:
         if: always()
         uses: actions/upload-artifact@v7
         with:
-          name: wdio-report
+          name: wdio-report-reporter
           if-no-files-found: error
           path: |
             examples/wdio/reports

docs/content/docs/frameworks/webdriverio.mdx

@@ -198,7 +198,7 @@ export const config: WebdriverIO.Config = {
 }
 ```
 
-### Run the Tests and generate HTML report [step]
+#### Run the Tests and generate HTML report [step]
 
 Execute the following command to run the tests and generate the HTML report:
 
@@ -384,7 +384,7 @@ Check out all the supported options [here](/docs/options).
 }
 ```
 
-### Run the Tests and generate HTML report [step]
+#### Run the Tests and generate HTML report [step]
 
 Execute the following command to run the tests and generate the HTML report:
 

docs/content/docs/metadata.mdx

@@ -8,6 +8,8 @@ Multiple Cucumber HTML Reporter can display the browser, version, platform, and
 
 Metadata can be displayed either in the Features overview table or within each scenario's details.
 
+When metadata is not provided, the reporter automatically adds the local platform name and version, current machine username, device hostname, Node.js version, reporter version, hostname, and CPU architecture. If partial metadata is provided, for example only browser details, the missing standard fields are still filled automatically.
+
 ## Adding Metadata
 
 There are two primary ways to add metadata:
@@ -32,6 +34,8 @@ generate({
 });
 ```
 
+Any values you provide take precedence over automatic defaults.
+
 ### Method 2: Per Scenario (Dynamic)
 
 If your test scenarios are running in different environments, you can add metadata to the Cucumber JSON file before saving it to your tests.

docs/content/docs/options.mdx

@@ -4,128 +4,143 @@ description: Full details for all available configuration options for Multiple C
 icon: Menu
 ---
 
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+
 Multiple Cucumber HTML Reporter offers a wide range of configuration options to customize your test reports.
 
 ## Main Options
 
-### `jsonDir`
-
-- **Type**: `String`
-- **Mandatory**: Yes
-
-The directory containing all the generated JSON files from your test runs.
-
-### `reportPath`
-
-- **Type**: `String`
-- **Mandatory**: Yes
-
-The directory in which the final report needs to be saved. Both `jsonDir` and `reportPath` are relative from where the script is started.
-
-### `staticFilePath`
-
-- **Type**: `boolean`
-- **Default**: `false`
-
-If true, each feature will get a static filename for the HTML. Use this feature only if you are not running multiple instances of the same tests.
+<TypeTable
+  type={{
+    jsonDir: {
+      description: 'The directory containing all the generated JSON files from your test runs',
+      type: 'string',
+      required: true,
+    },
+    reportPath: {
+      description: 'The directory in which the final report needs to be saved. Both jsonDir and reportPath are relative from where the script is started',
+      type: 'string',
+      required: true,
+    },
+    staticFilePath: {
+      description: 'If true, each feature will get a static filename for the HTML. Use this feature only if you are not running multiple instances of the same tests',
+      type: 'boolean',
+      default: false,
+    },
+  }}
+/>
 
 ## Report Behavior Options
 
-### `openReportInBrowser`
-
-- **Type**: `boolean`
-- **Default**: `false`
-
-If true, the report will automatically be opened in the default browser of the operating system.
-
-### `saveCollectedJSON`
-
-- **Type**: `boolean`
-- **Default**: `false`
-
-This module will first merge all the JSON files to a single file and then enrich it with data that is used for the report. Setting this to `true` saves the merged JSON AND the enriched JSON in the `reportPath`.
-
-### `disableLog`
-
-- **Type**: `boolean`
-- **Default**: `false`
-
-Disables the summary report log in the console.
+<TypeTable
+  type={{
+    openReportInBrowser: {
+      description: 'If true, the report will automatically be opened in the default browser of the operating system',
+      type: 'boolean',
+      default: false,
+    },
+    saveCollectedJSON: {
+      description: 'This module will first merge all the JSON files to a single file and then enrich it with data that is used for the report. Setting this to `true` saves the merged JSON and the enriched JSON in the `reportPath`.',
+      type: 'boolean',
+      default: false,
+    },
+    disableLog: {
+      description: 'Disables the summary report log in the console.',
+      type: 'boolean',
+      default: false,
+    },
+  }}
+/>
 
 ## Visual Customization Options
 
-### `pageTitle`
-
-- **Type**: `string`
-- **Default**: `Multiple Cucumber HTML Reporter`
-
-The report title in the HTML `<head>` tag.
-
-### `reportName`
-
-- **Type**: `string`
-
-You can change the report name as displayed in the UI.
-
-### `pageFooter`
-
-- **Type**: `string`
-
-Customizes the page footer if required. You can provide a HTML string like `<div><p>A custom footer</p></div>`.
-
-### `plainDescription`
-
-- **Type**: `boolean`
-- **Default**: `false`
-
-If your description already contains formatting tags (e.g., `<div>`, `<strong>`), set this to `true` to include it "as-is" without extra formatting.
+<TypeTable
+  type={{
+    customMetadata: {
+      description: 'If true, the custom metadata will be displayed in the report',
+      type: 'boolean',
+      default: false,
+    },
+    customData: {
+      description: 'Allows you to pass custom data to the report. The data is passed as JSON and can be accessed in the report as `customData`',
+      type: 'any',
+    },
+    pageTitle: {
+      description: 'The report title in the HTML <head> tag.',
+      type: 'string',
+      default: 'Multiple Cucumber HTML Reporter',
+    },
+    reportName: {
+      description: 'You can change the report name as displayed in the UI.',
+      type: 'string',
+    },
+    pageFooter: {
+      description: 'Customizes the page footer if required. You can provide a HTML string like <div><p>A custom footer</p></div>.',
+      type: 'string',
+    },
+    plainDescription: {
+      description: 'If your description already contains formatting tags (e.g., <div>, <strong>), set this to `true` to include it "as-is" without extra formatting.',
+      type: 'boolean',
+      default: false,
+    },
+  }}
+/>
 
 ## Duration Options
 
-### `displayDuration`
-
-- **Type**: `boolean`
-- **Default**: `false`
-
-If set to `true`, the duration of steps, scenarios, and features is displayed on the Features overview and single feature page in an easily readable format.
-
-<Callout title="Note" type="info">
-CucumberJS 2 and 3 use milliseconds, while others use nanoseconds. You may need to use `durationInMS: true` if your durations are not showing correctly.
-</Callout>
-
-### `durationInMS`
-
-- **Type**: `boolean`
-- **Default**: `false`
-
-If set to `true`, step durations are expected to be in **milliseconds**. This parameter relies on `displayDuration: true`.
-
-### `durationAggregation`
-
-- **Type**: `string` (Possible values: `sum | wallClock`)
-- **Default**: `sum`
-
-Controls how feature duration is calculated:
-- `sum`: sum all scenario durations in a feature (default)
-- `wallClock`: use elapsed wall-clock time (`latest scenario end - earliest scenario start`). Each timed scenario must provide `start_timestamp`.
+<TypeTable
+  type={{
+    displayDuration: {
+      description: (
+        <>
+          If set to <code>true</code>, the duration of steps, scenarios, and features is displayed on the Features overview and single feature page in an easily readable format.
+          <Callout title="Note" type="info">
+            CucumberJS 2 and 3 use milliseconds, while others use nanoseconds. You may need to use <code>durationInMS: true</code> if your durations are not showing correctly.
+          </Callout>
+        </>
+      ),
+      type: 'boolean',
+      default: false,
+    },
+    durationInMS: {
+      description: <>
+        If set to <code>true</code>, step durations are expected to be in <strong>milliseconds</strong>. This parameter relies on <code>displayDuration: true</code>.
+      </>,
+      type: 'boolean',
+      default: false,
+    },
+    durationAggregation: {
+      description: (
+        <>
+          Controls how feature duration is calculated:
+          <ul>
+            <li><code>sum</code>: sum all scenario durations in a feature (default)</li>
+            <li><code>wallClock</code>: use elapsed wall-clock time (<code>latest scenario end - earliest scenario start</code>). Each timed scenario must provide <code>start_timestamp</code>.</li>
+          </ul>
+        </>
+      ),
+      type: 'sum | wallClock',
+      default: 'sum',
+    },
+  }}
+/>
 
 ## Custom Styling Options
 
-### `useCDN`
-
-- **Type**: `boolean`
-- **Default**: `false`
-
-Whether to use a CDN for external assets.
-
-### `customStyle`
-
-- **Type**: `path`
-
-Adds custom CSS to your report. Provide the path to your custom CSS file.
-
-### `overrideStyle`
-
-- **Type**: `path`
-
-Completely replaces the default CSS with your own custom style.
+<TypeTable
+  type={{
+    useCDN: {
+      description: 'Whether to use a CDN for external assets.',
+      type: 'boolean',
+      default: false,
+    },
+    customStyle: {
+      description: 'Adds custom CSS to your report. Provide the path to your custom CSS file.',
+      type: 'path',
+    },
+    overrideStyle: {
+      description: 'Completely replaces the default CSS with your own custom style.',
+      type: 'path',
+    },
+  }}
+/>

docs/package.json

@@ -12,22 +12,22 @@
   },
   "dependencies": {
     "@next/third-parties": "^16.2.7",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-presence": "^1.1.5",
-    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-collapsible": "^1.1.13",
+    "@radix-ui/react-popover": "^1.1.16",
+    "@radix-ui/react-presence": "^1.1.6",
+    "@radix-ui/react-scroll-area": "^1.2.11",
     "@tabler/icons-react": "^3.43.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
     "fumadocs-core": "16.9.3",
-    "fumadocs-mdx": "15.0.10",
+    "fumadocs-mdx": "15.0.11",
     "fumadocs-ui": "16.9.3",
     "lucide-react": "^1.17.0",
     "motion": "^12.40.0",
     "next": "16.2.7",
     "next-themes": "^0.4.6",
-    "radix-ui": "^1.4.3",
+    "radix-ui": "^1.5.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-icons": "^5.6.0",
@@ -42,9 +42,9 @@
   "devDependencies": {
     "@mchr/tsconfig": "workspace:*",
     "@tailwindcss/postcss": "^4.2.4",
-    "@types/mdx": "^2.0.13",
-    "@types/node": "^25.9.1",
-    "@types/react": "^19.2.16",
+    "@types/mdx": "^2.0.14",
+    "@types/node": "^25.9.2",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "postcss": "^8.5.15",

examples/cypress/cucumber-html-report.ts

@@ -47,7 +47,6 @@ generate({
       { label: 'Release', value: '1.0.0' },
       { label: 'Cycle', value: 'Build-1002' },
       { label: 'Cypress Version', value: '15.16.0' },
-      { label: 'Node Version', value: '24.15.0' },
       { label: 'Test Environment', value: 'QA' },
       {
         label: 'Execution Start Time',

examples/cypress/package.json

@@ -16,7 +16,7 @@
     "@badeball/cypress-cucumber-preprocessor": "^24.0.1",
     "@bahmutov/cypress-esbuild-preprocessor": "^2.2.8",
     "@mchr/tsconfig": "workspace:*",
-    "@types/node": "^25.9.1",
+    "@types/node": "^25.9.2",
     "cypress": "^15.16.0",
     "multiple-cucumber-html-reporter": "workspace:*",
     "typescript": "^6.0.3"

examples/playwright/package.json

@@ -18,7 +18,7 @@
     "@cucumber/cucumber": "^13.0.0",
     "@mchr/tsconfig": "workspace:*",
     "@playwright/test": "^1.40.0",
-    "@types/node": "^25.9.1",
+    "@types/node": "^25.9.2",
     "multiple-cucumber-html-reporter": "workspace:*",
     "tsx": "^4.22.4",
     "typescript": "^6.0.3"

examples/playwright/src/utils/generate-report.ts

@@ -5,9 +5,9 @@ generate({
   reportPath: 'reports/report/',
   useCDN: false,
   openReportInBrowser: true,
-  saveCollectedJSON: true,
+  saveCollectedJSON: false,
   displayReportTime: true,
-  durationInMS: false,
+  durationInMS: true,
   displayDuration: true,
   pageTitle: 'My Playwright Typescript Sample',
   reportName: 'Cucumber JS Report',
@@ -16,6 +16,8 @@ generate({
       name: 'chrome',
       version: '148',
     },
+    username: 'Wasiq Bhamla',
+    device: 'MacBook Pro 14 inch',
     platform: {
       name: 'osx',
       version: '26.5',