@zohodesk/unit-testing-framework 0.0.26-experimental → 0.0.27-experimental

package/README.md

@@ -1,6 +1,6 @@
-# unit-testing-framework
+# @zohodesk/unit-testing-framework
 
-A modular, Jest-based unit testing package designed to plug into existing CLI pipelines. Runs Jest **programmatically** (no shell execution), supports default + consumer config merging, custom reporters, global setup/teardown, and parallel execution.
+A modular, Jest-based unit testing framework designed to plug into existing CLI pipelines. Runs Jest **programmatically** via `@jest/core` (no shell execution), ships with sensible defaults, a console reporter, an interactive HTML reporter, and automatic Jest globals injection.
 
 ---
 
@@ -8,24 +8,30 @@ A modular, Jest-based unit testing package designed to plug into existing CLI pi
 
 ```
 unit-testing-framework/
-├── package.json                        # ESM package with proper exports
+├── package.json                        # Package config (publishes build/ only)
+├── babel.config.json                   # Babel config – ESM → CJS for Node 18
 ├── index.js                            # Public API entry point
 ├── src/
 │   ├── runner/
-│   │   └── jest-runner.js              # Programmatic Jest execution via @jest/core
+│   │   ├── jest-runner.js              # createJestRunner() – main orchestrator
+│   │   └── runner-base.js              # buildArgv() & executeJest() via @jest/core
 │   ├── config/
-│   │   ├── config-loader.js            # Config resolution & deep-merge logic
-│   │   └── default-config.js           # Framework-level default Jest config
+│   │   └── default-config.js           # getDefaultConfig() – framework defaults
 │   ├── reporters/
-│   │   ├── reporter-handler.js         # Reporter resolution (aliases, paths)
-│   │   └── default-reporter.js         # Bundled custom Jest reporter
-│   └── environment/
-│       ├── setup.js                    # Global setup (runs once before suite)
-│       └── teardown.js                 # Global teardown (runs once after suite)
+│   │   ├── default-reporter.js         # Console reporter (pass/fail/skip summary)
+│   │   ├── html-reporter.js            # Self-contained HTML report generator
+│   │   ├── html-template.js            # HTML markup generation functions
+│   │   ├── reporter-utils.js           # Shared utils (timer, escapeHtml, stripAnsi)
+│   │   └── templates/
+│   │       ├── report-script.js        # Client-side JS (filters, collapsible suites)
+│   │       └── report.css              # Dark-themed report stylesheet
+│   ├── environment/
+│   │   └── globals-inject.js           # Injects jest into globalThis (setup file)
+│   └── utils/
+│       └── logger.js                   # Colored console logger singleton
+├── build/                              # Transpiled output (published to npm)
 ├── examples/
-│   ├── consumer-cli.js                 # Example integration in existing CLI
-│   └── jest.unit.config.js             # Example consumer config file
-├── .npmignore
+│   └── consumer-cli.js                 # Example CLI integration
 └── README.md
 ```
 
@@ -34,24 +40,38 @@ unit-testing-framework/
 ## Installation
 
 ```bash
-npm install unit-testing-framework
-# jest is a required peer dependency
-npm install --save-dev jest
+npm install @zohodesk/unit-testing-framework
 ```
 
+All Jest dependencies (`@jest/core`, `jest-environment-jsdom`, `babel-jest`) are bundled — consumers don't need to install Jest separately.
+
 ---
 
 ## Quick Start
 
 ```js
-import createJestRunner from 'unit-testing-framework';
+import { createJestRunner } from '@zohodesk/unit-testing-framework';
 
-// Run with defaults - auto-discovers jest.unit.config.js in project root
+// Run all tests with framework defaults
 const results = await createJestRunner();
 
 process.exitCode = results.numFailedTests > 0 ? 1 : 0;
 ```
 
+Run a specific test file by pattern:
+
+```js
+const results = await createJestRunner({
+  testPathPattern: 'login.test.js',
+});
+```
+
+Enable watch mode:
+
+```js
+await createJestRunner({ watch: true });
+```
+
 ---
 
 ## API
@@ -60,42 +80,81 @@ process.exitCode = results.numFailedTests > 0 ? 1 : 0;
 
 | Option | Type | Default | Description |
 |---|---|---|---|
-| `projectRoot` | `string` | `process.cwd()` | Consumer project root |
-| `configPath` | `string` | (auto-discovered) | Path to consumer config file |
-| `inlineConfig` | `object` | `{}` | Inline Jest config overrides (highest priority) |
-| `coverage` | `boolean` | from config | Enable coverage collection |
-| `testFiles` | `string[]` | all | Specific test file patterns |
-| `verbose` | `boolean` | `true` | Verbose output |
-| `maxWorkers` | `number\|string` | `'50%'` | Worker concurrency |
-| `silent` | `boolean` | `false` | Suppress console output |
-| `watch` | `boolean` | `false` | Watch mode |
+| `projectRoot` | `string` | `process.cwd()` | Consumer project root directory |
+| `testPathPattern` | `string` | — | Filter tests by file path pattern |
+| `watch` | `boolean` | `false` | Enable Jest watch mode |
+
+Returns: `Promise<AggregatedResult>` — Jest's aggregated results object.
 
-Returns: `Promise<AggregatedResult>` (Jest results object)
+---
 
-### Named exports
+## Default Configuration
 
-```js
-import {
-  createJestRunner,
-  loadConfig,
-  resolveReporters,
-  globalSetup,
-  globalTeardown,
-} from 'unit-testing-framework';
-```
+The framework provides a complete Jest config via `getDefaultConfig(projectRoot)`:
+
+| Setting | Value |
+|---|---|
+| `testMatch` | `['**/__tests__/**/*.test.js']` |
+| `testEnvironment` | `jsdom` |
+| `transform` | Babel with `@babel/preset-env` |
+| `testTimeout` | 20 000 ms |
+| `automock` | `false` |
+| `clearMocks` | `true` |
+| `passWithNoTests` | `true` |
+| `testPathIgnorePatterns` | `['/build/']` |
+
+### Reporters
+
+Two reporters are enabled by default:
+
+1. **Console reporter** (`DefaultReporter`) — prints a formatted pass/fail/skip summary with elapsed time to the terminal.
+2. **HTML reporter** (`HtmlReporter`) — generates a self-contained, interactive HTML report.
+
+#### HTML Reporter Options
+
+| Option | Default | Description |
+|---|---|---|
+| `outputDir` | `<rootDir>/test-slices/unit-test/unit_reports` | Directory for the HTML file |
+| `fileName` | `report.html` | Output filename |
+| `title` | `Unit Test Report` | Page title |
+
+The HTML report supports dark theme, status filters (All / Passed / Failed / Skipped), collapsible suites, and auto-expands suites with failures.
+
+### Globals Injection
+
+The framework's `setupFiles` automatically injects the `jest` object into `globalThis`, so test files can call `jest.fn()`, `jest.mock()`, etc. without explicit imports.
+
+---
+
+## Example: CLI Integration
+
+See [examples/consumer-cli.js](examples/consumer-cli.js) for a complete example:
 
-Sub-path exports:
 ```js
-import { loadConfig } from 'unit-testing-framework/config';
-import { resolveReporters } from 'unit-testing-framework/reporters';
+import { createJestRunner } from '@zohodesk/unit-testing-framework';
+
+const command = process.argv[2];
+
+if (command === 'unit-test') {
+  const testFile = process.argv[3];
+  const results = await createJestRunner({
+    testPathPattern: testFile,
+  });
+  process.exitCode = results.numFailedTests > 0 ? 1 : 0;
+} else if (command === 'unit-test:watch') {
+  await createJestRunner({ watch: true });
+}
 ```
 
 ---
 
-## Config Priority
+## Build
 
-```
-inline options  >  consumer config file  >  framework defaults
+Source is written in ESM and transpiled to CommonJS via Babel (targets Node 18). Template files under `src/reporters/templates/` are excluded from transpilation and inlined at runtime.
+
+```bash
+npm run build      # Transpile src/ → build/
+npm run clean      # Delete build/ and rebuild
 ```
 
 ### Consumer Config File

package/build/src/config/default-config.js

@@ -7,6 +7,7 @@ exports.getDefaultConfig = getDefaultConfig;
 var _path = _interopRequireDefault(require("path"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function getDefaultConfig(projectRoot) {
+  const reportOutputDir = _path.default.resolve(projectRoot, 'test-slices', 'unit-test', 'unit_reports');
   return {
     rootDir: projectRoot,
     testMatch: ['**/__tests__/**/*.test.js'],
@@ -21,7 +22,13 @@ function getDefaultConfig(projectRoot) {
         }]]
       }]
     },
-    reporters: ['default', _path.default.resolve(__dirname, '..', 'reporters', 'html-reporter.js')],
+    reporters: ['default', ['jest-html-reporter', {
+      outputPath: _path.default.join(reportOutputDir, 'report.html'),
+      pageTitle: 'Unit Test Report',
+      includeFailureMsg: true,
+      includeSuiteFailure: true,
+      theme: 'darkTheme'
+    }]],
     testTimeout: 20_000,
     // 20 seconds per test
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/unit-testing-framework",
-  "version": "0.0.26-experimental",
+  "version": "0.0.27-experimental",
   "description": "A modular Jest-based unit testing framework",
   "main": "./build/index.js",
   "exports": {
@@ -25,7 +25,8 @@
     "@jest/core": "30.2.0",
     "@jest/types": "30.2.0",
     "babel-jest": "30.2.0",
-    "jest-environment-jsdom": "30.2.0"
+    "jest-environment-jsdom": "30.2.0",
+    "jest-html-reporter": "^4.3.0"
   },
   "devDependencies": {
     "@babel/cli": "7.28.6",

package/build/src/reporters/default-reporter.js

@@ -1,54 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _logger = require("../utils/logger");
-var _reporterUtils = require("./reporter-utils.js");
-/**
- * default-reporter.js
- *
- * A lightweight custom Jest reporter bundled with the framework.
- * Outputs a formatted summary to the console after each test run.
- */
-
-class DefaultReporter {
-  constructor(globalConfig, _reporterOptions) {
-    this.globalConfig = globalConfig;
-    this._timer = (0, _reporterUtils.createTimer)();
-  }
-  onRunStart(_results, _options) {
-    this._timer.start();
-    _logger.Logger.log(_logger.Logger.INFO_TYPE, '\n╔══════════════════════════════════════════╗');
-    _logger.Logger.log(_logger.Logger.INFO_TYPE, '║   Unit Testing Framework – Test Run      ║');
-    _logger.Logger.log(_logger.Logger.INFO_TYPE, '╚══════════════════════════════════════════╝\n');
-  }
-  onTestStart(test) {
-    _logger.Logger.log(_logger.Logger.INFO_TYPE, `  ▶ Running: ${test.path}`);
-  }
-  onTestResult(_test, testResult, _aggregatedResults) {
-    const {
-      numPassingTests,
-      numFailingTests,
-      numPendingTests
-    } = testResult;
-    const icon = numFailingTests > 0 ? '✖' : '✔';
-    _logger.Logger.log(_logger.Logger.INFO_TYPE, `  ${icon}  Passed: ${numPassingTests}  Failed: ${numFailingTests}  Skipped: ${numPendingTests}`);
-  }
-  onRunComplete(_contexts, results) {
-    const elapsed = this._timer.elapsed();
-    const {
-      numPassedTests,
-      numFailedTests,
-      numTotalTests
-    } = results;
-    _logger.Logger.log(_logger.Logger.INFO_TYPE, '\n──────────────────────────────────────────');
-    _logger.Logger.log(_logger.Logger.INFO_TYPE, `  Total:   ${numTotalTests}`);
-    _logger.Logger.log(_logger.Logger.INFO_TYPE, `  Passed:  ${numPassedTests}`);
-    _logger.Logger.log(_logger.Logger.INFO_TYPE, `  Failed:  ${numFailedTests}`);
-    _logger.Logger.log(_logger.Logger.INFO_TYPE, `  Time:    ${elapsed}s`);
-    _logger.Logger.log(_logger.Logger.INFO_TYPE, '──────────────────────────────────────────\n');
-  }
-}
-exports.default = DefaultReporter;

package/build/src/reporters/html-reporter.js

@@ -1,61 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _fs = _interopRequireDefault(require("fs"));
-var _path = _interopRequireDefault(require("path"));
-var _reporterUtils = require("./reporter-utils.js");
-var _htmlTemplate = require("./html-template.js");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * html-reporter.js
- *
- * Jest reporter that generates a self-contained HTML report.
- * This class handles only the Jest lifecycle hooks.
- * HTML generation is delegated to html-template.js.
- */
-
-class HtmlReporter {
-  /**
-   * @param {object} globalConfig - Jest global config
-   * @param {object} reporterOptions
-   * @param {string} [reporterOptions.outputDir]  - Directory for the HTML file (default: <rootDir>/unit_reports)
-   * @param {string} [reporterOptions.fileName]   - HTML file name (default: report.html)
-   * @param {string} [reporterOptions.title]       - Page title (default: Unit Test Report)
-   */
-  constructor(globalConfig, reporterOptions = {}) {
-    this.globalConfig = globalConfig;
-    this.options = reporterOptions;
-    this._suites = [];
-    this._timer = (0, _reporterUtils.createTimer)();
-  }
-  onRunStart() {
-    this._timer.start();
-    this._suites = [];
-  }
-  onTestResult(_test, testResult) {
-    this._suites.push(testResult);
-  }
-  onRunComplete(_contexts, aggregatedResults) {
-    const rootDir = this.globalConfig.rootDir || process.cwd();
-    const outputDir = this.options.outputDir ? _path.default.resolve(rootDir, this.options.outputDir) : _path.default.resolve(rootDir, 'test-slices', 'unit-test', 'unit_reports');
-    const fileName = this.options.fileName || 'report.html';
-    const title = this.options.title || 'Unit Test Report';
-    const outputPath = _path.default.join(outputDir, fileName);
-    _fs.default.mkdirSync(outputDir, {
-      recursive: true
-    });
-    const html = (0, _htmlTemplate.generateHtml)({
-      aggregatedResults,
-      suites: this._suites,
-      rootDir,
-      elapsed: this._timer.elapsed(),
-      title
-    });
-    _fs.default.writeFileSync(outputPath, html, 'utf-8');
-    console.log(`\n  📄 HTML report written to: ${outputPath}\n`);
-  }
-}
-exports.default = HtmlReporter;

package/build/src/reporters/html-template.js

@@ -1,177 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.generateHtml = generateHtml;
-exports.renderSuite = renderSuite;
-exports.renderTest = renderTest;
-var _fs = _interopRequireDefault(require("fs"));
-var _path = _interopRequireDefault(require("path"));
-var _reporterUtils = require("./reporter-utils.js");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * html-template.js
- *
- * Pure functions that generate the HTML report string.
- * No file I/O, no Jest API — just data in, HTML string out.
- *
- * CSS and client-side JS are read from separate files under
- * templates/ and inlined at report-generation time so the
- * output remains a single self-contained HTML file.
- */
-
-// NOTE: __dirname is available after Babel transpiles ESM → CJS.
-
-const CSS_PATH = _path.default.resolve(__dirname, 'templates', 'report.css');
-const SCRIPT_PATH = _path.default.resolve(__dirname, 'templates', 'report-script.js');
-
-/**
- * Read template assets once and cache them in memory.
- * Lazy-loaded on first call to avoid reading files at import time.
- */
-let _cssCache = null;
-let _scriptCache = null;
-function getCSS() {
-  if (!_cssCache) {
-    _cssCache = _fs.default.readFileSync(CSS_PATH, 'utf-8');
-  }
-  return _cssCache;
-}
-function getScript() {
-  if (!_scriptCache) {
-    _scriptCache = _fs.default.readFileSync(SCRIPT_PATH, 'utf-8');
-  }
-  return _scriptCache;
-}
-
-/**
- * Generate the full HTML report string.
- *
- * @param {object} params
- * @param {object} params.aggregatedResults - Jest aggregated results.
- * @param {object[]} params.suites          - Collected test suite results.
- * @param {string} params.rootDir           - Project root for relative paths.
- * @param {string} params.elapsed           - Elapsed time string (e.g. "1.23").
- * @param {string} params.title             - Report page title.
- * @returns {string} Self-contained HTML string.
- */
-function generateHtml({
-  aggregatedResults,
-  suites,
-  rootDir,
-  elapsed,
-  title
-}) {
-  const {
-    numPassedTests,
-    numFailedTests,
-    numPendingTests,
-    numTotalTests,
-    numTotalTestSuites
-  } = aggregatedResults;
-  const suitesHtml = suites.map(suite => renderSuite(suite, rootDir)).join('\n');
-  const timestamp = new Date().toLocaleString();
-  const css = getCSS();
-  const script = getScript();
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>${(0, _reporterUtils.escapeHtml)(title)}</title>
-  <style>
-${css}
-  </style>
-</head>
-<body>
-  <div class="header">
-    <h1>${(0, _reporterUtils.escapeHtml)(title)}</h1>
-    <div class="meta">${timestamp} &nbsp;·&nbsp; Duration: ${elapsed}s</div>
-  </div>
-
-  <div class="summary">
-    <div class="card total"><div class="value">${numTotalTests}</div><div class="label">Total</div></div>
-    <div class="card pass"><div class="value">${numPassedTests}</div><div class="label">Passed</div></div>
-    <div class="card fail"><div class="value">${numFailedTests}</div><div class="label">Failed</div></div>
-    <div class="card skip"><div class="value">${numPendingTests}</div><div class="label">Skipped</div></div>
-    <div class="card"><div class="value">${numTotalTestSuites}</div><div class="label">Suites</div></div>
-  </div>
-
-  <div class="filters">
-    <button class="active" data-filter="all">All</button>
-    <button data-filter="passed">Passed</button>
-    <button data-filter="failed">Failed</button>
-    <button data-filter="pending">Skipped</button>
-  </div>
-
-  <div id="suites">
-    ${suitesHtml}
-  </div>
-
-  <div class="footer">
-    Generated by @zohodesk/unit-testing-framework
-  </div>
-
-  <script>
-${script}
-  </script>
-</body>
-</html>`;
-}
-
-/**
- * Render a single test suite section.
- *
- * @param {object} suite    - Jest test suite result.
- * @param {string} rootDir  - Project root for computing relative paths.
- * @returns {string} HTML string for the suite.
- */
-function renderSuite(suite, rootDir) {
-  const suitePath = suite.testFilePath || 'Unknown suite';
-  const relativePath = _path.default.relative(rootDir, suitePath);
-  const passed = suite.numPassingTests || 0;
-  const failed = suite.numFailingTests || 0;
-  const pending = suite.numPendingTests || 0;
-  const suiteIcon = failed > 0 ? '✖' : pending > 0 && passed === 0 ? '○' : '✔';
-  const suiteIconColor = failed > 0 ? 'var(--fail)' : 'var(--pass)';
-  const testsHtml = (suite.testResults || []).map(t => renderTest(t)).join('\n');
-  return `
-    <div class="suite">
-      <div class="suite-header">
-        <span class="icon" style="color:${suiteIconColor}">${suiteIcon}</span>
-        <span class="name">${(0, _reporterUtils.escapeHtml)(relativePath)}</span>
-        <span class="counts">${passed} passed · ${failed} failed · ${pending} skipped</span>
-        <span class="arrow">▶</span>
-      </div>
-      <div class="suite-body">
-        ${testsHtml}
-      </div>
-    </div>`;
-}
-
-/**
- * Render a single test row.
- *
- * @param {object} testResult - Individual test result from Jest.
- * @returns {string} HTML string for the test row.
- */
-function renderTest(testResult) {
-  const status = testResult.status; // 'passed' | 'failed' | 'pending'
-  const icon = status === 'passed' ? '✔' : status === 'failed' ? '✖' : '○';
-  const duration = testResult.duration != null ? `${testResult.duration}ms` : '';
-  const title = testResult.ancestorTitles ? [...testResult.ancestorTitles, testResult.title].join(' › ') : testResult.title;
-  let failureHtml = '';
-  if (status === 'failed' && testResult.failureMessages?.length) {
-    failureHtml = testResult.failureMessages.map(msg => `<div class="failure-msg">${(0, _reporterUtils.escapeHtml)((0, _reporterUtils.stripAnsi)(msg))}</div>`).join('\n');
-  }
-  return `
-      <div class="test-row ${status}">
-        <span class="status">${icon}</span>
-        <div class="test-title">
-          ${(0, _reporterUtils.escapeHtml)(title)}
-          ${failureHtml}
-        </div>
-        <span class="duration">${duration}</span>
-      </div>`;
-}

package/build/src/reporters/reporter-utils.js

@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createTimer = createTimer;
-exports.escapeHtml = escapeHtml;
-exports.stripAnsi = stripAnsi;
-/**
- * reporter-utils.js
- *
- * Shared utilities used by both the HTML and default reporters.
- */
-
-/**
- * Create a simple timer that tracks elapsed seconds.
- *
- * @returns {{ start(): void, elapsed(): string }}
- */
-function createTimer() {
-  let startTime = 0;
-  return {
-    start() {
-      startTime = Date.now();
-    },
-    elapsed() {
-      return ((Date.now() - startTime) / 1000).toFixed(2);
-    }
-  };
-}
-
-/**
- * Escape HTML special characters to prevent injection.
- *
- * @param {string} str
- * @returns {string}
- */
-function escapeHtml(str) {
-  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}
-
-/**
- * Strip ANSI escape codes from a string.
- *
- * @param {string} str
- * @returns {string}
- */
-function stripAnsi(str) {
-  // eslint-disable-next-line no-control-regex
-  return String(str).replace(/\x1B\[[0-9;]*m/g, '');
-}

package/build/src/reporters/templates/report-script.js

@@ -1,44 +0,0 @@
-// Toggle suite expand/collapse
-document.querySelectorAll('.suite-header').forEach(function (header) {
-  header.addEventListener('click', function () {
-    header.parentElement.classList.toggle('open');
-  });
-});
-
-// Filter buttons
-document.querySelectorAll('.filters button').forEach(function (btn) {
-  btn.addEventListener('click', function () {
-    document.querySelectorAll('.filters button').forEach(function (b) {
-      b.classList.remove('active');
-    });
-    btn.classList.add('active');
-    var filter = btn.dataset.filter;
-    document.querySelectorAll('.suite').forEach(function (suite) {
-      if (filter === 'all') {
-        suite.style.display = '';
-        suite.querySelectorAll('.test-row').forEach(function (r) {
-          r.style.display = '';
-        });
-      } else {
-        var rows = suite.querySelectorAll('.test-row');
-        var visible = 0;
-        rows.forEach(function (r) {
-          if (r.classList.contains(filter)) {
-            r.style.display = '';
-            visible++;
-          } else {
-            r.style.display = 'none';
-          }
-        });
-        suite.style.display = visible > 0 ? '' : 'none';
-      }
-    });
-  });
-});
-
-// Auto-expand suites with failures
-document.querySelectorAll('.suite').forEach(function (suite) {
-  if (suite.querySelector('.test-row.failed')) {
-    suite.classList.add('open');
-  }
-});

package/build/src/reporters/templates/report.css

@@ -1,144 +0,0 @@
-:root {
-  --pass: #2ecc71;
-  --fail: #e74c3c;
-  --skip: #f39c12;
-  --bg: #1a1a2e;
-  --card: #16213e;
-  --text: #eaeaea;
-  --muted: #8892a4;
-  --border: #2a2a4a;
-}
-* { margin: 0; padding: 0; box-sizing: border-box; }
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
-  background: var(--bg);
-  color: var(--text);
-  padding: 24px;
-  line-height: 1.5;
-}
-.header {
-  text-align: center;
-  margin-bottom: 32px;
-}
-.header h1 { font-size: 1.8rem; margin-bottom: 4px; }
-.header .meta { color: var(--muted); font-size: 0.85rem; }
-
-/* ── Summary Cards ─── */
-.summary {
-  display: flex;
-  gap: 16px;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-bottom: 28px;
-}
-.card {
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 18px 28px;
-  min-width: 140px;
-  text-align: center;
-}
-.card .value { font-size: 2rem; font-weight: 700; }
-.card .label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
-.card.pass .value { color: var(--pass); }
-.card.fail .value { color: var(--fail); }
-.card.skip .value { color: var(--skip); }
-.card.total .value { color: #58a6ff; }
-
-/* ── Filters ─── */
-.filters {
-  display: flex;
-  gap: 8px;
-  justify-content: center;
-  margin-bottom: 24px;
-  flex-wrap: wrap;
-}
-.filters button {
-  background: var(--card);
-  color: var(--text);
-  border: 1px solid var(--border);
-  padding: 6px 18px;
-  border-radius: 20px;
-  cursor: pointer;
-  font-size: 0.85rem;
-  transition: all 0.2s;
-}
-.filters button:hover,
-.filters button.active { background: #58a6ff; color: #000; border-color: #58a6ff; }
-
-/* ── Suites ─── */
-.suite {
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  margin-bottom: 16px;
-  overflow: hidden;
-}
-.suite-header {
-  display: flex;
-  align-items: center;
-  padding: 14px 18px;
-  cursor: pointer;
-  user-select: none;
-  gap: 10px;
-}
-.suite-header:hover { background: rgba(255,255,255,0.03); }
-.suite-header .icon { font-size: 1.1rem; }
-.suite-header .name {
-  flex: 1;
-  font-weight: 600;
-  font-size: 0.95rem;
-  word-break: break-all;
-}
-.suite-header .counts { font-size: 0.8rem; color: var(--muted); }
-.suite-header .arrow {
-  transition: transform 0.2s;
-  color: var(--muted);
-}
-.suite.open .suite-header .arrow { transform: rotate(90deg); }
-
-.suite-body { display: none; border-top: 1px solid var(--border); }
-.suite.open .suite-body { display: block; }
-
-.test-row {
-  display: flex;
-  align-items: flex-start;
-  padding: 10px 18px 10px 36px;
-  gap: 10px;
-  border-bottom: 1px solid var(--border);
-  font-size: 0.9rem;
-}
-.test-row:last-child { border-bottom: none; }
-.test-row .status {
-  flex-shrink: 0;
-  width: 20px;
-  text-align: center;
-}
-.test-row .test-title { flex: 1; }
-.test-row .duration { color: var(--muted); font-size: 0.8rem; flex-shrink: 0; }
-.test-row.passed .status { color: var(--pass); }
-.test-row.failed .status { color: var(--fail); }
-.test-row.pending .status { color: var(--skip); }
-
-.failure-msg {
-  background: rgba(231, 76, 60, 0.1);
-  border-left: 3px solid var(--fail);
-  margin: 6px 0 4px 30px;
-  padding: 10px 14px;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  font-size: 0.8rem;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: #f5a5a5;
-  border-radius: 4px;
-}
-
-.footer {
-  text-align: center;
-  color: var(--muted);
-  font-size: 0.75rem;
-  margin-top: 32px;
-  padding-top: 16px;
-  border-top: 1px solid var(--border);
-}