reporting-labs 0.1.5 → 0.2.0

package/README.md

@@ -2,15 +2,15 @@
 
 # reportingLabs
 
-**One HTML file that tells you what broke, who owns it, and whether it is new.**
+**A beautiful test report in one HTML file. It tells you what broke, who owns it, and whether it is new.**
 
-reportingLabs turns a test run into a single, self-contained HTML report. No server, no upload, no dashboard to log into. Open the file, or attach it to a CI job, an email or a Slack message.
+reportingLabs turns a test run into a single HTML file. No server. No upload. No login. Open the file in a browser, attach it to a CI job, or send it on Slack or email. It just works.
 
-It is runner-agnostic by design: the report is built from a plain JSON model that adapters feed. The **Playwright adapter ships today**; WebdriverIO, Cypress and Jest/Vitest adapters are on the roadmap.
+Today it ships with a **Playwright** reporter. WebdriverIO, Cypress and Jest/Vitest are on the roadmap.
 
 <p align="center"><img src="https://raw.githubusercontent.com/naveenautomationlabs/reporting-labs/main/docs/overview.png" alt="Overview page of a reportingLabs report" width="900"></p>
 
-## Quick start
+## Quick start (2 minutes)
 
 **1. Install**
 
@@ -18,82 +18,121 @@ It is runner-agnostic by design: the report is built from a plain JSON model tha
 npm i -D reporting-labs
 ```
 
-**2. Add the reporter to `playwright.config.ts`**
+**2. Create the config file**
+
+```bash
+npx reporting-labs init
+```
+
+This creates `reporting-labs.config.ts` next to your `playwright.config.ts`. Every option is in there with a short comment. Most lines are commented out. Uncomment what you want, delete what you do not need.
+
+**3. Add the reporter to `playwright.config.ts`**
 
 ```ts
+import { defineConfig } from '@playwright/test';
+import reportingLabs from './reporting-labs.config';
+
 export default defineConfig({
-  reporter: [['reporting-labs', { title: 'My app – regression' }]],
+  reporter: [
+    ['list'],
+    ['reporting-labs', reportingLabs],   // <- add this line
+  ],
 });
 ```
 
-**3. Run your tests and open the report**
+Your other reporters (list, html, blob...) keep working as before.
+
+**4. Run tests and open the report**
 
 ```bash
 npx playwright test
 open reporting-labs/index.html
 ```
 
-That is all. Everything below is optional.
+Done. Everything below is optional.
+
+> **In a hurry?** Skip the config file and pass options inline: `reporter: [['reporting-labs', { title: 'My app' }]]`.
+
+## Add details to your tests (3 small helpers)
+
+The report already shows steps, screenshots, videos, traces and errors on its own. Three small helpers add the rest. Import them from `reporting-labs` and call them inside a test.
+
+### `meta()`: who owns this test and how important it is
+
+```ts
+import { meta } from 'reporting-labs';
 
-## Keep the reporter options in their own file (recommended)
+test('completes purchase', async ({ page }) => {
+  meta({ priority: 'P0', severity: 'blocker', owner: 'naveen', feature: 'payment', epic: 'EPIC-18', story: 'SHOP-250' });
+  // ... your test as usual
+});
+```
 
-As soon as you set more than a title, put the reportingLabs options in a separate file. Your `playwright.config.ts` stays short, and all report settings live in one place.
+One line per test. With this the report can rank failures by priority, group them by owner or feature, and link to your Jira stories.
 
-**Step 1.** Create the file (or let the CLI do it with `npx reporting-labs init`):
+- Known keys: `priority`, `severity`, `owner`, `feature`, `epic`, `story`, `issue`, `component`, `team`. Any other key you pass is shown too.
+- Your Playwright tags like `@sanity` or `@regression` stay as they are and still show on the test.
+- To make story and epic keys clickable, set `links` in the config: `links: { story: 'https://yourteam.atlassian.net/browse/{id}' }`.
+
+### `log()`: a line in the report
 
 ```ts
-// reporting-labs.config.ts  (next to playwright.config.ts)
-import type { ReportingLabsOptions } from 'reporting-labs';
-
-const config: ReportingLabsOptions = {
-  title: 'My app – regression',
-  outputFolder: 'reports/reporting-labs',
-  embedVideos: true,
-  metadata: { env: process.env.TEST_ENV ?? 'local' },
-  // links: { story: 'https://yourteam.atlassian.net/browse/{id}' },
-};
-
-export default config;
+import { log } from 'reporting-labs';
+
+await log('cart is empty, adding 2 items');
+await log('order id', orderId);          // extra values are appended
 ```
 
-**Step 2.** Import it in `playwright.config.ts` and add one line to your reporter list. Your other reporters keep working as before.
+Each line gets a timestamp. Lines with "error" or "fail" show in red, "warn" in amber.
+
+### `testData()`: show the data the test used
 
 ```ts
-import { defineConfig } from '@playwright/test';
-import reportingLabs from './reporting-labs.config';
+import { testData } from 'reporting-labs';
 
-export default defineConfig({
-  reporter: [
-    ['list'],
-    ['html', { open: 'never' }],
-    ['reporting-labs', reportingLabs],   // <- this line
-  ],
+await testData({ user: 'naveen@x.com', password: 'S3cret' }, 'Login');    // object → key/value block
+await testData(rowsFromExcelOrJson, 'Coupons');                           // array of objects → table
+await testData(fs.readFileSync('data/users.csv', 'utf8'), 'users.csv');   // CSV text → table
+```
+
+**Secrets are masked automatically.** Passwords, tokens, API keys, `Authorization` and `Cookie` headers, JWTs and `Bearer ...` values show as `****`. Add your own keys with `maskKeys: ['otp', 'pan']` in the config.
+
+## API calls: recorded on their own
+
+Nothing to add to your tests. The config file created by `init` starts with `import 'reporting-labs/auto'`, and that is the switch. From then on every call made with Playwright's `request` fixture or `page.request` is recorded as it happens.
+
+```ts
+test('creates an order', async ({ request }) => {
+  const res = await request.post('/v1/orders', { headers, data });   // recorded, nothing else to do
+  expect(res.status()).toBe(201);
 });
 ```
 
-That is it. The `ReportingLabsOptions` type gives you autocomplete for every option in your editor.
+Each call shows in the test detail and in the **API** tab with method, URL, status, time, headers, request body and response body. A **Copy as cURL** button lets you replay it from a terminal. Failed calls (4xx, 5xx, no connection) are highlighted.
+
+If you do not use the config file, add `import 'reporting-labs/auto'` at the top of `playwright.config.ts` instead.
 
-If your reporter list differs between CI and local (a common pattern), add the same line to both branches:
+Only calls that do not go through Playwright (Node `fetch`, axios, a Java service) need a manual record:
 
 ```ts
-reporter: process.env.CI
-  ? [['blob'], ['html', { open: 'never' }], ['reporting-labs', reportingLabs]]
-  : [['list'], ['html', { open: 'never' }], ['reporting-labs', reportingLabs]],
+import { api } from 'reporting-labs';
+
+await api({ method: 'GET', url, status: res.status, duration, responseBody: await res.json() });
 ```
 
 ## Examples you can copy
 
-The [`examples/`](https://github.com/naveenautomationlabs/reporting-labs/tree/main/examples) folder has one small spec per feature. Each one runs offline in a few seconds, so you can read it, run it, and copy what you need.
+The [`examples/`](https://github.com/naveenautomationlabs/reporting-labs/tree/main/examples) folder has one small spec per feature. Read it, run it, copy what you need.
 
 | Spec | What it shows |
 |---|---|
-| [01-tag-your-tests.spec.ts](https://github.com/naveenautomationlabs/reporting-labs/blob/main/examples/01-tag-your-tests.spec.ts) | `meta()` with priority, severity, owner, feature, story; the same via tags and annotations |
+| [01-tag-your-tests.spec.ts](https://github.com/naveenautomationlabs/reporting-labs/blob/main/examples/01-tag-your-tests.spec.ts) | `meta()` with priority, severity, owner, feature, epic, story |
 | [02-logs-and-test-data.spec.ts](https://github.com/naveenautomationlabs/reporting-labs/blob/main/examples/02-logs-and-test-data.spec.ts) | `log()` lines and `testData()` as key/value, table and CSV, with secrets masked |
-| [03-api-calls.spec.ts](https://github.com/naveenautomationlabs/reporting-labs/blob/main/examples/03-api-calls.spec.ts) | `recordApi()` around `request.post`, `api()` for manual records, a 404 in the API tab |
-| [04-steps-and-attachments.spec.ts](https://github.com/naveenautomationlabs/reporting-labs/blob/main/examples/04-steps-and-attachments.spec.ts) | `test.step()` bars, screenshot / JSON attachments, visual comparison viewer |
+| [03-api-calls.spec.ts](https://github.com/naveenautomationlabs/reporting-labs/blob/main/examples/03-api-calls.spec.ts) | Plain `request.post` / `patch` / `delete` and `page.request` calls to the public [gorest.in](https://gorest.in/) API, recorded on their own; a 403; `api()` for other clients |
+| [04-steps-and-attachments.spec.ts](https://github.com/naveenautomationlabs/reporting-labs/blob/main/examples/04-steps-and-attachments.spec.ts) | `test.step()` bars, screenshot and JSON attachments, visual comparison viewer |
 | [05-outcomes.spec.ts](https://github.com/naveenautomationlabs/reporting-labs/blob/main/examples/05-outcomes.spec.ts) | skip with a reason, fixme, expected failure, timeout, a plain failure, a flaky test |
-| [06-bdd-style.spec.ts](https://github.com/naveenautomationlabs/reporting-labs/blob/main/examples/06-bdd-style.spec.ts) | Given / When / Then steps rendered as Gherkin |
-| [reporting-labs.config.ts](https://github.com/naveenautomationlabs/reporting-labs/blob/main/examples/reporting-labs.config.ts) | A complete reporter config, every option commented |
+| [06-bdd-style.spec.ts](https://github.com/naveenautomationlabs/reporting-labs/blob/main/examples/06-bdd-style.spec.ts) | Given / When / Then steps shown as Gherkin |
+| [reporting-labs.config.ts](https://github.com/naveenautomationlabs/reporting-labs/blob/main/examples/reporting-labs.config.ts) | A complete config with comments |
 | [playwright.config.ts](https://github.com/naveenautomationlabs/reporting-labs/blob/main/examples/playwright.config.ts) | How the reporter sits next to the built-in reporters |
 
 ```bash
@@ -102,16 +141,18 @@ cd reporting-labs/examples && npm install && npx playwright test
 open reporting-labs/index.html
 ```
 
+Run it two or three times to see the history features (new vs known failures, flaky dots, got slower, trend).
+
 ## A tour of the report
 
-### Overview: the state of the run in one screen
+### Overview: the whole run on one screen
 
-- **Tiles**: pass rate with a ring and the change from the previous run, then passed / failed / flaky / skipped. Click a tile to see those tests.
-- **Run strip**: every test as one cell, in run order. Hover for the name, click to open.
-- **Needs attention**: failures ranked by priority and severity, with the spec file, the owner, and whether the failure is new or has been failing since a given build.
-- **Failure clusters**: failures grouped by error message, so 30 red tests with one root cause read as one problem.
-- **Breakdown**: stacked bars per priority, severity, feature, owner, spec file, project or tag. Click a row to filter the test list. With more than one project you also get a feature × project heatmap.
-- **Slowest tests** and **Got slower** (tests that took 2× longer than last run), **Flakiest tests**, **Skipped** (with reasons), **Environment** and the **Trend** across runs.
+- **Tiles**: pass rate with a ring and the change from the last run, then passed / failed / flaky / skipped. Click a tile to see those tests.
+- **Run strip**: every test as one small cell, in run order. Hover for the name, click to open.
+- **Needs attention**: failures sorted by priority and severity, with the spec file, the owner, and whether the failure is new or has been failing for a while.
+- **Failure clusters**: failures grouped by error message. 30 red tests with one cause read as one problem.
+- **Breakdown**: bars per priority, severity, feature, owner, spec file, project or tag. Click a row to filter the test list. With more than one project you also get a feature × project heatmap.
+- **Slowest tests**, **Got slower** (2× slower than last run), **Flakiest tests**, **Skipped** (with reasons), **Environment** and the **Trend** across runs.
 
 <p align="center"><img src="https://raw.githubusercontent.com/naveenautomationlabs/reporting-labs/main/docs/heatmap.png" alt="Breakdown card with the feature by project heatmap" width="900"></p>
 
@@ -120,19 +161,18 @@ open reporting-labs/index.html
 ### Failures: everything you need to triage
 
 - **By owner**: who to ping, with failed and flaky counts. Click an owner to filter.
-- **Download CSV / JSON**: the failed and flaky tests with title, spec, project, priority, owner, ticket, attempts, duration, first error line and new/known status. Ready for Jira or a sheet.
-- **Copy summary**: a Slack/Teams-ready message with top failures, owners, ticket keys and an owner breakdown.
-- The table shows every failed or flaky test with its history over the last runs as dots.
+- **Download CSV / JSON**: all failed and flaky tests with title, spec, project, priority, owner, ticket, attempts, duration, first error line and new/known status. Ready for Jira or a sheet.
+- **Copy summary**: a Slack or Teams message with the top failures, owners and ticket keys.
+- The table shows every failed or flaky test with its last runs as dots.
 
 <p align="center"><img src="https://raw.githubusercontent.com/naveenautomationlabs/reporting-labs/main/docs/failures.png" alt="Failures page" width="900"></p>
 
-### Test detail: the error, the steps, the evidence
+### Test detail: the error, the steps, the proof
 
-- **Expected vs received** side by side with the difference highlighted. Object diffs are colored line by line.
-- Error **location** (linked to VS Code), Playwright's **code snippet**, full message and stack.
+- **Expected vs received** side by side with the difference highlighted.
+- Error **location** (opens in VS Code), Playwright's **code snippet**, full message and stack.
 - **Steps** with a bar per step showing its share of the test time. Given/When/Then titles are styled as Gherkin.
-- Retries as tabs, screenshots inline (click to zoom), videos, traces, console output, logs, test data and API calls.
-- **Open in VS Code** jumps to the failing line.
+- Retries as tabs. Screenshots inline (click to zoom), videos, traces, console output, logs, test data and API calls.
 
 <p align="center"><img src="https://raw.githubusercontent.com/naveenautomationlabs/reporting-labs/main/docs/test-detail.png" alt="Test detail with expected vs received diff and step bars" width="900"></p>
 
@@ -140,143 +180,97 @@ open reporting-labs/index.html
 
 <p align="center"><img src="https://raw.githubusercontent.com/naveenautomationlabs/reporting-labs/main/docs/timeline.png" alt="Timeline by worker" width="900"></p>
 
-## Make the report smarter: tag your tests
-
-One line per test gives you priority ranking, owner rollups, feature breakdowns and Jira links.
-
-```ts
-import { meta } from 'reporting-labs';
-
-test('completes purchase', async ({ page }) => {
-  meta({ priority: 'P0', severity: 'blocker', owner: 'naveen', feature: 'payment', story: 'SHOP-250' });
-  // ...
-});
-```
-
-Full example: [examples/01-tag-your-tests.spec.ts](https://github.com/naveenautomationlabs/reporting-labs/blob/main/examples/01-tag-your-tests.spec.ts). Tags work too: `{ tag: ['@P1', '@severity:critical', '@owner:priya'] }`. Plain annotations (`test.info().annotations.push({ type: 'priority', description: 'P1' })`) are picked up as well.
-
-Turn story, epic or issue keys into links:
-
-```ts
-links: { story: 'https://acme.atlassian.net/browse/{id}', epic: 'https://acme.atlassian.net/browse/{id}' }
-```
-
-## Logs, test data and API calls
-
-```ts
-import { log, testData, api, recordApi } from 'reporting-labs';
-
-test('creates an order', async ({ request }) => {
-  await log('starting with an empty cart');                                 // timestamped log line
-
-  await testData({ user: 'naveen@x.com', password: 'S3cret' }, 'Login');    // object → key/value block
-  await testData(rowsFromExcelOrJson, 'Coupons');                           // array of objects → table
-  await testData(fs.readFileSync('data/users.csv', 'utf8'), 'users.csv');   // CSV string → table
-
-  const res = await recordApi('POST', '/v1/orders', { headers, data },
-    () => request.post('/v1/orders', { headers, data }));                   // request + response panel
-});
-```
-
-Full examples: [02-logs-and-test-data.spec.ts](https://github.com/naveenautomationlabs/reporting-labs/blob/main/examples/02-logs-and-test-data.spec.ts) and [03-api-calls.spec.ts](https://github.com/naveenautomationlabs/reporting-labs/blob/main/examples/03-api-calls.spec.ts). Passwords, tokens, API keys, `Authorization` / `Cookie` headers, JWTs and `Bearer …` values are masked as `****` everywhere. Add your own keys with `maskKeys: ['otp', 'pan']`.
-
 ## Run history: new vs known, flaky, slower
 
-The reporter keeps `reporting-labs.history.json` next to your config (last 30 runs by default). Commit it, or cache it in CI, and the report starts answering the questions you ask first:
+The reporter keeps a small file, `reporting-labs.history.json`, next to your config. It remembers the last 30 runs. Commit it, or cache it in CI, and the report starts answering the questions you ask first:
 
 | Question | Where it shows |
 |---|---|
-| Did this break just now, or has it been red for days? | `new this run` / `failing since #1838` on every failure; the Failed tile splits the count |
+| Did this break just now, or has it been red for days? | `new this run` or `failing since #1838` on every failure |
 | Which tests are flaky? | Last-10-runs dots on every failure, plus the Flakiest tests card |
-| What got slower? | Got slower tab on the Slowest card (2× slower than last run) |
-| Are we trending up or down? | Trend chart with pass rate, fail rate and duration per run, hover for details |
+| What got slower? | Got slower tab on the Slowest card |
+| Are we getting better or worse? | Trend chart with pass rate, fail rate and duration per run |
 
-The first run has nothing to compare with; these cards fill in from the second run.
+The first run has nothing to compare with. These cards fill in from the second run.
 
 ## Screenshots, videos, traces
 
-Nothing extra to do. Use your runner's own settings and the report picks the attachments up:
+Nothing extra to do. Use Playwright's own settings and the report picks them up:
 
 ```ts
 use: {
   screenshot: 'only-on-failure',   // shown inline, click to zoom
-  video: 'retain-on-failure',      // inline player (copied to ./assets, or embedded with embedVideos: true)
+  video: 'retain-on-failure',      // inline player
   trace: 'on-first-retry',         // trace card with download and how to open it
 }
 ```
 
-`toHaveScreenshot` failures get a visual comparison viewer: slider, side by side, and diff. Anything you attach with `test.info().attach()` shows up too: images inline, text/JSON as a code block, everything else as a download.
+`toHaveScreenshot` failures get a visual comparison viewer: slider, side by side, and diff. Anything you attach with `test.info().attach()` shows up too: images inline, JSON and CSV as a table or key/value block, text as a code block, everything else as a download.
 
 ## What the report covers
 
-Every outcome Playwright can produce is shown, not just pass/fail:
+Every outcome Playwright can produce, not just pass and fail:
 
-- passed, failed, flaky (passed on retry), skipped with the `test.skip` / `test.fixme` reason, timed out with the exceeded timeout, interrupted
-- `test.fail()` tests that fail as expected count as passed with an "Expected failure" badge; one that unexpectedly passes is reported as failed with a note
-- errors outside tests (a spec that throws at load, global setup, a worker crash) get their own card at the top of the overview
-- interrupted runs and global timeouts show a banner with how many tests did not finish
-- shard and worker count in the Environment card, together with Playwright and Node versions, OS, browsers, the CI job link (GitHub Actions, GitLab, Jenkins, CircleCI, Azure, Bitbucket) and the git commit
+- passed, failed, flaky (passed on retry), skipped with the `test.skip` / `test.fixme` reason, timed out, interrupted
+- `test.fail()` tests that fail as expected count as passed with an "Expected failure" badge
+- errors outside tests (a spec that throws at load, global setup, a worker crash) get their own card at the top
+- interrupted runs show a banner with how many tests did not finish
+- the Environment card shows Playwright and Node versions, OS, browsers, workers, shard, the CI job link and the git commit
 
-## Options
+## All options
 
-All options are optional. Pass them as the second element of the reporter tuple.
+Every option is optional. `npx reporting-labs init` writes them all, with comments, into `reporting-labs.config.ts` (`--js` for JavaScript, `--force` to overwrite).
 
 | Option | Default | What it does |
 |---|---|---|
-| `title` | `'Test report'` | Report title in the header |
-| `logo` | – | Path or data URI of your logo, shown next to the title |
+| `title` | `'Test report'` | Title in the header |
+| `logo` | – | Path, URL or data URI of your logo |
 | `project` | – | `{ name, version, team, url }` shown under the title |
-| `metadata` | `{}` | Key/value chips in the header, e.g. `{ env: 'staging', build: '#1842' }`. `build` labels the run in history; in CI the run number is used when it is not set |
-| `env` | – | Extra rows for the Environment card, e.g. `{ 'App build': '2.4.0-rc3' }` |
+| `metadata` | `{}` | Chips in the header, e.g. `{ env: 'staging', build: '#1842' }`. `build` labels the run in the trend; in CI the run number is used when it is not set |
+| `env` | – | Extra rows on the Environment card |
+| `links` | `{}` | Turn meta keys into links. `{id}` is replaced by the value |
+| `maskKeys` | `[]` | Extra keys to mask as `****` |
 | `dimensions` | `['priority','severity','feature','owner']` | Meta keys that get charts and filters |
-| `dimensionOrder` | P0…P4, blocker…trivial | Sort order per dimension, e.g. `{ severity: ['blocker','critical','major','minor'] }` |
-| `links` | `{}` | URL templates per meta key, `{id}` is replaced by the value |
-| `maskKeys` | `[]` | Extra keys to mask in logs, data and API panels |
-| `widgets` | all on | Hide cards: `{ tags: false, timeline: false, flaky: false, environment: false, skipped: false, ... }` |
-| `sections` | `[]` | Extra HTML sections below the summary, e.g. release notes |
+| `dimensionOrder` | P0…P4, blocker…trivial | Sort order per dimension |
+| `widgets` | all on | Hide cards: `{ tags: false, timeline: false, ... }` |
+| `sections` | `[]` | Extra HTML below the summary, e.g. release notes |
 | `history` | `{ enabled: true, keep: 30 }` | Run history file; `file` sets a custom path |
-| `palette` | `'lab'` | `'lab'` (blue), `'ocean'`, `'ember'`, `'mono'`. Viewers can switch in the header |
-| `accent` | palette accent | Override the accent with your brand color |
+| `palette` | `'lab'` | `'lab'` (blue), `'ocean'`, `'ember'`, `'mono'` |
+| `accent` | palette accent | Your brand color |
 | `theme` | `'auto'` | `'light'`, `'dark'` or follow the OS |
 | `customCss` | `''` | CSS appended to the report |
-| `editorLinks` | `true` locally, `false` in CI | "Open in VS Code" links |
+| `editorLinks` | on locally, off in CI | "Open in VS Code" links |
 | `bdd` | auto | Style Given/When/Then steps as Gherkin |
-| `outputFolder` | `'reporting-labs'` | Where the report and copied assets go |
+| `outputFolder` | `'reporting-labs'` | Where the report goes |
 | `outputFile` | `'index.html'` | Report file name |
-| `embedAttachments` | `true` | Inline screenshots as base64 (single file) |
-| `embedLimit` | 2 MB | Larger attachments are copied to `./assets` instead |
-| `embedVideos` | `false` | Inline videos too (big file) |
-| `embedFonts` | `true` | Bundle IBM Plex (~140 KB) so the report looks the same offline |
+| `embedAttachments` | `true` | Screenshots inside the HTML (one file) |
+| `embedLimit` | 2 MB | Bigger attachments are copied to `./assets` |
+| `embedVideos` | `false` | Videos inside the HTML too (bigger file, no folder issues) |
+| `embedFonts` | `true` | Bundle the fonts (~140 KB) so it looks the same offline |
 | `announce` | `true` | Print the report path after the run |
 
-A fuller example:
+If your reporter list differs between CI and local, add the same line to both:
 
 ```ts
-reporter: [['reporting-labs', {
-  title: 'ShopLite – nightly regression',
-  project: { name: 'ShopLite Web', version: '2.4.0', team: 'QA Platform' },
-  metadata: { env: 'staging', branch: process.env.GIT_BRANCH ?? 'main', build: process.env.BUILD_ID ?? 'local' },
-  links: { story: 'https://acme.atlassian.net/browse/{id}' },
-  sections: [{ title: 'Release notes', html: '<p>Checkout v2 at 50% rollout.</p>' }],
-}]]
+reporter: process.env.CI
+  ? [['blob'], ['reporting-labs', reportingLabs]]
+  : [['list'], ['reporting-labs', reportingLabs]],
 ```
 
-`npx reporting-labs init` writes a starter `reporting-labs.config.ts`; see [Keep the reporter options in their own file](#keep-the-reporter-options-in-their-own-file-recommended).
-
 ## Running in CI
 
-The report is a plain file written next to your tests, so it works anywhere `npx playwright test` runs: locally, GitHub Actions, GitLab, Jenkins, CircleCI, Azure Pipelines, Bitbucket. Nothing phones home and no fonts are fetched, so it also works in locked-down networks.
+The report is a plain file written next to your tests. It works anywhere `npx playwright test` runs: GitHub Actions, GitLab, Jenkins, CircleCI, Azure Pipelines, Bitbucket, your laptop. Nothing is sent anywhere and no fonts are fetched, so it also works on locked-down networks.
 
-What happens automatically in CI:
+What happens on its own in CI:
 
-- The Environment card links the CI job and the commit (GitHub Actions, GitLab, Jenkins, CircleCI, Azure, Bitbucket are detected from their environment variables).
-- The run is labelled with the CI run number in the history and the trend chart, unless you set `metadata.build` yourself.
-- "Open in VS Code" links are off when the `CI` variable is set, because they would point at the runner's paths. Set `editorLinks: true` to force them.
+- The Environment card links the CI job and the commit.
+- The run is labelled with the CI run number in the history and the trend, unless you set `metadata.build`.
+- "Open in VS Code" links are off, because they would point at the runner's paths.
 
 Two things to set up:
 
-1. **Publish the report.** Upload `reporting-labs/` as a build artifact (or archive it in Jenkins). Screenshots and fonts are inside `index.html`; videos and large files sit in `reporting-labs/assets/`.
-2. **Keep the history.** `reporting-labs.history.json` is what powers the trend, new vs known failures, flaky history and duration regressions. On GitHub Actions restore and save it with `actions/cache`; on Jenkins the workspace usually persists on its own.
+1. **Publish the report.** Upload the `reporting-labs/` folder as a build artifact (or archive it in Jenkins). Videos and large files sit in `reporting-labs/assets/`, so keep the folder together.
+2. **Keep the history.** `reporting-labs.history.json` powers the trend and the new vs known failures. On GitHub Actions save it with `actions/cache`. On Jenkins the workspace usually keeps it on its own.
 
 Ready-to-copy samples: [docs/ci/github-actions.yml](https://github.com/naveenautomationlabs/reporting-labs/blob/main/docs/ci/github-actions.yml) and [docs/ci/Jenkinsfile](https://github.com/naveenautomationlabs/reporting-labs/blob/main/docs/ci/Jenkinsfile).
 
@@ -294,23 +288,22 @@ Ready-to-copy samples: [docs/ci/github-actions.yml](https://github.com/naveenaut
     path: reporting-labs/
 ```
 
-**Jenkins HTML Publisher note.** Jenkins' default Content-Security-Policy blocks inline JavaScript, so a single-file report shows up blank inside Jenkins (Playwright's own HTML report has the same issue). Either download the archived artifact and open it locally, or have an admin relax the policy in the script console: `System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")`.
+**Jenkins note.** Jenkins blocks inline JavaScript by default, so a single-file report shows up blank inside the Jenkins HTML Publisher (Playwright's own HTML report has the same issue). Download the archived artifact and open it locally, or ask an admin to relax the policy in the script console: `System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")`.
 
 ## Good to know
 
-- **Single file.** Screenshots and fonts are embedded, so `index.html` works from a mail attachment or a CI artifact. Videos and large files go to `./assets` next to it, so keep the folder together when you move or share the report.
-- **Re-running tests replaces the report.** The previous report stays intact until the new run finishes, then `index.html` and `assets/` are replaced. A report tab opened from an earlier run will lose its videos at that point; archive the folder if you need to keep it.
-- **Videos on macOS.** If the report lives in Downloads, Desktop or Documents and you open it as a file, Chrome may be blocked from reading the sibling `assets/` files (the player shows a clear message). Allow Chrome under System Settings → Privacy & Security → Files and Folders, move the project elsewhere, or set `embedVideos: true` to put videos inside the HTML.
-- **Video download.** Served over http (CI artifact viewer, a local server) the download link saves the file; opened as a plain file the browser opens the video in a new tab instead, where the player's menu offers Save.
+- **One file.** Screenshots and fonts are inside `index.html`, so it works from an email or a CI artifact. Videos and large files go to `./assets` next to it. Keep the folder together when you share it.
+- **Each run replaces the report.** The old report stays until the new run finishes. Archive the folder if you want to keep an old one.
+- **Videos on macOS.** If the report is in Downloads, Desktop or Documents and you open it as a file, Chrome may not be allowed to read the `assets/` folder (the player shows a clear message). Allow Chrome under System Settings → Privacy & Security → Files and Folders, move the project elsewhere, or set `embedVideos: true`.
 - **Keyboard.** `j` / `k` next and previous test, `f` failed only, `/` search, `1`–`5` switch views, `Esc` close.
-- **Print.** A print stylesheet is included for PDF export.
-- **Themes.** Light and dark follow the OS; the toggle in the header remembers the choice.
+- **Print.** A print stylesheet is included, so "Save as PDF" works.
+- **Themes.** Light and dark follow the OS. The toggle in the header remembers your choice.
 
 ## Roadmap
 
-- WebdriverIO, Cypress, Jest/Vitest, JUnit XML adapters via the shared JSON schema
-- AI summary and failure clustering (bring your own API key)
-- Hosted history dashboard across branches/projects
+- WebdriverIO, Cypress, Jest/Vitest and JUnit XML adapters
+- AI summary of failures (bring your own API key)
+- Hosted history dashboard across branches and projects
 
 ## License
 

package/bin/cli.js

@@ -1,32 +1,45 @@
 #!/usr/bin/env node
 const fs = require('fs');
 const path = require('path');
-const [cmd] = process.argv.slice(2);
+const args = process.argv.slice(2);
+const cmd = args[0];
+const has = f => args.includes(f);
 
 if (cmd === 'init') {
-  const file = path.resolve('reporting-labs.config.ts');
-  if (fs.existsSync(file)) { console.log('reporting-labs.config.ts already exists.'); process.exit(0); }
-  fs.writeFileSync(file, `import type { ReportingLabsOptions } from 'reporting-labs';
-
-const config: ReportingLabsOptions = {
-  title: 'My app – regression',
-  // logo: 'https://example.com/logo.svg',
-  palette: 'lab',            // 'lab' (blue) | 'ocean' | 'ember' | 'mono'
-  theme: 'auto',
-  metadata: { env: process.env.TEST_ENV ?? 'local', branch: process.env.GIT_BRANCH ?? 'main' },
-  links: { story: 'https://acme.atlassian.net/browse/{id}' },
-  sections: [],
-};
-export default config;
-`);
-  console.log('Created reporting-labs.config.ts');
-  console.log("Add to playwright.config.ts:  reporter: [['reporting-labs', require('./reporting-labs.config').default]]");
+  const js = has('--js');
+  const file = path.resolve(js ? 'reporting-labs.config.js' : 'reporting-labs.config.ts');
+  if (fs.existsSync(file) && !has('--force')) {
+    console.log(`${path.basename(file)} already exists. Use --force to overwrite it.`);
+    process.exit(1);
+  }
+  let template = fs.readFileSync(path.join(__dirname, 'config-template.txt'), 'utf8');
+  if (js) {
+    template = template
+      .replace("import 'reporting-labs/auto';", "require('reporting-labs/auto');")
+      .replace("import type { ReportingLabsOptions } from 'reporting-labs';\n", '')
+      .replace('const config: ReportingLabsOptions = {', "/** @type {import('reporting-labs').ReportingLabsOptions} */\nconst config = {")
+      .replace('export default config;', 'module.exports = config;');
+  }
+  fs.writeFileSync(file, template);
+  const base = path.basename(file, path.extname(file));
+  console.log(`Created ${path.basename(file)} with every option listed. Uncomment what you need.`);
+  console.log('');
+  console.log(`Now in playwright.config.${js ? 'js' : 'ts'}:`);
+  if (js) {
+    console.log(`  const reportingLabs = require('./${base}');`);
+  } else {
+    console.log(`  import reportingLabs from './${base}';`);
+  }
+  console.log("  reporter: [['list'], ['reporting-labs', reportingLabs]],");
 } else {
   console.log(`reporting-labs
 
-  npx reporting-labs init     create a starter config file
+  npx reporting-labs init            write reporting-labs.config.ts with every option, commented
+  npx reporting-labs init --js       same, as reporting-labs.config.js
+  npx reporting-labs init --force    overwrite an existing config file
 
-Usage in playwright.config.ts:
-  reporter: [['reporting-labs', { title: 'My report' }]]
+Then in playwright.config.ts:
+  import reportingLabs from './reporting-labs.config';
+  reporter: [['list'], ['reporting-labs', reportingLabs]],
 `);
 }

package/bin/config-template.txt

@@ -0,0 +1,78 @@
+import 'reporting-labs/auto';   // records every request.* / page.request call in the report (remove to switch off)
+import type { ReportingLabsOptions } from 'reporting-labs';
+
+// reportingLabs configuration.
+// Every option is optional. Lines that start with // show the default; uncomment and change what you need.
+// Docs: https://github.com/naveenautomationlabs/reporting-labs#options
+
+const config: ReportingLabsOptions = {
+
+  // ── Look ─────────────────────────────────────────────────────────────────────
+  title: 'My app – regression',                       // shown in the header
+  // logo: 'https://example.com/logo.svg',            // path, URL or data URI; shown next to the title
+  // palette: 'lab',                                  // 'lab' (blue, default) | 'ocean' | 'ember' | 'mono'; viewers can switch
+  // accent: '#7C3AED',                               // your brand color instead of the palette accent
+  // theme: 'auto',                                   // 'auto' (follows OS, default) | 'light' | 'dark'
+  // customCss: '.hdr { background: #123 }',          // extra CSS appended to the report
+  // embedFonts: true,                                // bundle IBM Plex (~140 KB) so it looks the same offline
+
+  // ── Header details ───────────────────────────────────────────────────────────
+  // project: { name: 'ShopLite Web', version: '2.4.0', team: 'QA Platform', url: 'https://shoplite.example.com', description: '' },
+  metadata: {                                         // chips in the header; `build` also labels the run in the trend
+    env: process.env.TEST_ENV ?? 'local',
+    // build: process.env.BUILD_NUMBER ?? 'local',     // when missing, the CI run number is used
+    // branch: process.env.GIT_BRANCH ?? 'main',
+  },
+  // env: { 'App version': '2.4.0', 'Test data': 'staging-seed-12' },   // extra rows on the Environment card
+
+  // ── Output ───────────────────────────────────────────────────────────────────
+  // outputFolder: 'reporting-labs',                  // where index.html and copied attachments go
+  // outputFile: 'index.html',
+  // embedAttachments: true,                          // inline screenshots as base64: one file, opens anywhere
+  // embedLimit: 2 * 1024 * 1024,                     // attachments bigger than this (bytes) are copied as files
+  // embedVideos: false,                              // true = videos inside the HTML too (bigger file, no folder issues)
+  // announce: true,                                  // print the report path after the run
+
+  // ── Test details ─────────────────────────────────────────────────────────────
+  // Values come from meta({ priority, severity, owner, feature, epic, story, ... }) in your tests.
+  // dimensions: ['priority', 'severity', 'feature', 'owner'],   // which meta keys get charts and filters
+  // dimensionOrder: { severity: ['blocker', 'critical', 'major', 'minor', 'trivial'] },
+  // links: {                                         // turn meta keys into links; {id} is the value
+  //   story: 'https://acme.atlassian.net/browse/{id}',
+  //   epic: 'https://acme.atlassian.net/browse/{id}',
+  //   issue: 'https://acme.atlassian.net/browse/{id}',
+  // },
+  // maskKeys: ['otp', 'pan'],                        // extra keys to mask as **** (passwords, tokens, cookies already are)
+  // editorLinks: true,                               // "Open in VS Code" on every test; default: on locally, off in CI
+  // bdd: false,                                      // style Given/When/Then steps as Gherkin; default: auto-detect
+
+  // ── Run history and trend ────────────────────────────────────────────────────
+  // history: {
+  //   enabled: true,
+  //   file: 'reporting-labs.history.json',           // kept next to playwright.config; commit it or cache it in CI
+  //   keep: 30,                                      // runs to remember
+  // },
+
+  // ── Widgets on the overview (hide what you do not need) ──────────────────────
+  // widgets: {
+  //   runStrip: true,        // pass/fail strip under the header
+  //   outcome: true,         // outcome ring
+  //   attention: true,       // "Needs attention" list
+  //   dimensions: true,      // breakdown by priority / severity / feature / owner
+  //   timeline: true,        // timeline by worker
+  //   durations: true,       // duration spread
+  //   tags: true,            // tag cloud
+  //   slowest: true,         // slowest tests
+  //   projects: true,        // per-project results
+  //   flaky: true,           // flakiest tests over the run history
+  //   environment: true,     // Playwright, Node, OS, browsers, CI, commit
+  //   skipped: true,         // skipped tests with reasons
+  // },
+
+  // ── Extra content ────────────────────────────────────────────────────────────
+  // sections: [                                      // free text below the summary, HTML allowed
+  //   { title: 'Release notes', html: '<p>Checkout v2 at 50% rollout.</p>' },
+  // ],
+};
+
+export default config;

package/dist/auto.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/auto.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const PATCHED = '__reportingLabsApiCapture';
+const MAX_BODY = 200 * 1024;
+const TEXT_TYPES = /json|text|xml|html|javascript|x-www-form-urlencoded|graphql/i;
+function pw() {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    return require('@playwright/test');
+}
+function currentTest() {
+    try {
+        return pw().test.info();
+    }
+    catch {
+        return undefined;
+    }
+}
+function describeBody(v) {
+    if (v == null)
+        return undefined;
+    if (Buffer.isBuffer(v))
+        return `<binary ${v.length} bytes>`;
+    if (typeof v === 'string') {
+        try {
+            return JSON.parse(v);
+        }
+        catch {
+            return v;
+        }
+    }
+    return v;
+}
+function multipart(mp) {
+    const out = {};
+    const entries = typeof FormData !== 'undefined' && mp instanceof FormData ? Array.from(mp.entries()) : Object.entries(mp ?? {});
+    for (const [k, v] of entries) {
+        if (typeof File !== 'undefined' && v instanceof File)
+            out[k] = `<file ${v.name} ${v.size} bytes>`;
+        else if (v && typeof v === 'object' && ('buffer' in v || 'name' in v))
+            out[k] = `<file ${v.name ?? ''}${v.buffer ? ' ' + v.buffer.length + ' bytes' : ''}>`;
+        else
+            out[k] = v;
+    }
+    return out;
+}
+function requestFrom(urlOrRequest, options) {
+    const req = urlOrRequest && typeof urlOrRequest === 'object' && typeof urlOrRequest.url === 'function' ? urlOrRequest : undefined;
+    const method = String(options.method ?? (req ? req.method() : 'GET')).toUpperCase();
+    let url = req ? req.url() : String(urlOrRequest);
+    const params = options.params;
+    if (params instanceof URLSearchParams) {
+        const q = params.toString();
+        if (q)
+            url += (url.includes('?') ? '&' : '?') + q;
+    }
+    else if (params && typeof params === 'object') {
+        const q = Object.entries(params).map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(String(v))}`).join('&');
+        if (q)
+            url += (url.includes('?') ? '&' : '?') + q;
+    }
+    const headers = { ...(req ? req.headers() : {}), ...(options.headers ?? {}) };
+    const hasType = Object.keys(headers).some(h => h.toLowerCase() === 'content-type');
+    let body;
+    if (options.data !== undefined) {
+        body = describeBody(options.data);
+        if (!hasType && typeof options.data === 'object' && !Buffer.isBuffer(options.data))
+            headers['content-type'] = 'application/json';
+    }
+    else if (options.form !== undefined) {
+        body = options.form instanceof URLSearchParams ? Object.fromEntries(options.form) : options.form;
+        if (!hasType)
+            headers['content-type'] = 'application/x-www-form-urlencoded';
+    }
+    else if (options.multipart !== undefined) {
+        body = multipart(options.multipart);
+        if (!hasType)
+            headers['content-type'] = 'multipart/form-data';
+    }
+    else if (req)
+        body = describeBody(req.postData());
+    return { method, url, headers, body };
+}
+async function responseBody(res) {
+    const type = res.headers()['content-type'] ?? '';
+    const len = Number(res.headers()['content-length'] ?? 0);
+    if (type && !TEXT_TYPES.test(type))
+        return `<${type.split(';')[0]}${len ? ` ${len} bytes` : ''}>`;
+    try {
+        const buf = await res.body();
+        if (buf.length > MAX_BODY)
+            return buf.subarray(0, MAX_BODY).toString('utf8') + `\n… truncated (${buf.length} bytes)`;
+        const text = buf.toString('utf8');
+        if (!text)
+            return undefined;
+        try {
+            return JSON.parse(text);
+        }
+        catch {
+            return text;
+        }
+    }
+    catch {
+        return undefined;
+    }
+}
+async function record(call) {
+    const info = currentTest();
+    if (!info)
+        return;
+    try {
+        await info.attach(`${call.method} ${call.url}`, { body: JSON.stringify(call), contentType: 'application/x-rl-api' });
+    }
+    catch { /* test already finished */ }
+}
+/** Patch the shared APIRequestContext prototype (all contexts in this process) once. */
+function patchContext(ctx) {
+    let proto = Object.getPrototypeOf(ctx);
+    while (proto && !Object.prototype.hasOwnProperty.call(proto, 'fetch'))
+        proto = Object.getPrototypeOf(proto);
+    if (!proto || proto[PATCHED])
+        return;
+    const original = proto.fetch;
+    proto.fetch = async function patchedFetch(urlOrRequest, options = {}) {
+        if (!currentTest())
+            return original.call(this, urlOrRequest, options);
+        const t0 = Date.now();
+        let req;
+        try {
+            req = requestFrom(urlOrRequest, options);
+        }
+        catch { /* record nothing */ }
+        let res;
+        let err;
+        try {
+            res = await original.call(this, urlOrRequest, options);
+        }
+        catch (e) {
+            err = e;
+        }
+        if (req) {
+            const call = { method: req.method, url: res ? res.url() : req.url, duration: Date.now() - t0, requestHeaders: req.headers, requestBody: req.body };
+            if (res) {
+                call.status = res.status();
+                call.responseHeaders = res.headers();
+                call.responseBody = await responseBody(res);
+            }
+            else
+                call.responseBody = 'Request failed: ' + (err instanceof Error ? err.message : String(err)).replace(/\u001b\[[0-9;]*m/g, '');
+            await record(call);
+        }
+        if (err)
+            throw err;
+        return res;
+    };
+    proto[PATCHED] = true;
+}
+function install() {
+    let api;
+    try {
+        api = pw().request;
+    }
+    catch {
+        return;
+    }
+    if (!api || typeof api.newContext !== 'function')
+        return;
+    const apiProto = Object.getPrototypeOf(api);
+    if (apiProto[PATCHED])
+        return;
+    apiProto[PATCHED] = true;
+    // Any context created later through request.newContext() patches the shared prototype on the spot.
+    const newContext = apiProto.newContext;
+    apiProto.newContext = async function patchedNewContext(...args) {
+        const ctx = await newContext.apply(this, args);
+        patchContext(ctx);
+        return ctx;
+    };
+    // And do it right away with a throwaway context, so page.request works even if no request fixture is ever created.
+    api.newContext().then((ctx) => { patchContext(ctx); return ctx.dispose(); }).catch(() => { });
+}
+install();

package/dist/meta.d.ts

@@ -30,7 +30,10 @@ export declare function testData(data: unknown, name?: string): Promise<void>;
  * await api({ method: 'POST', url: '/v1/orders', status: 201, duration: 138, requestBody, responseBody });
  */
 export declare function api(call: ApiCall): Promise<void>;
-/** Wrap a Playwright APIRequestContext call so it's recorded automatically. */
+/**
+ * @deprecated Import `test` from 'reporting-labs/test' instead: every `request.*` call is then recorded
+ * without a wrapper. Kept for projects that already use it.
+ */
 export declare function recordApi<T extends {
     status(): number;
     headers(): Record<string, string>;

package/dist/meta.js

@@ -56,7 +56,10 @@ async function testData(data, name = 'Test data') {
 async function api(call) {
     await info().attach(call.name ?? `${call.method.toUpperCase()} ${call.url}`, { body: JSON.stringify(call), contentType: 'application/x-rl-api' });
 }
-/** Wrap a Playwright APIRequestContext call so it's recorded automatically. */
+/**
+ * @deprecated Import `test` from 'reporting-labs/test' instead: every `request.*` call is then recorded
+ * without a wrapper. Kept for projects that already use it.
+ */
 async function recordApi(method, url, options, run) {
     const t0 = Date.now();
     const res = await run();

package/dist/reporter.d.ts

@@ -27,7 +27,9 @@ export default class ReportingLabsReporter implements Reporter {
     private toDataBlock;
     private loadHistory;
     private dimensions;
-    /** Pull dimension values from annotations and tags. */
+    /** Keys picked up from tags and annotations even when they are not breakdown dimensions. */
+    private metaKeys;
+    /** Pull meta values (priority, owner, story, epic...) from annotations and tags. */
     private extractMeta;
     private rel;
     private serializeError;

package/dist/reporter.js

@@ -40,6 +40,12 @@ const child_process_1 = require("child_process");
 const template_1 = require("./template");
 const mask_1 = require("./mask");
 const DEFAULT_EMBED_LIMIT = 2 * 1024 * 1024;
+/** Attach steps created by log() and the automatic API capture; the data shows in its own section, so hide the step. */
+function isInternalAttach(s) {
+    return s.category === 'test.attach' && /^Attach "(rl:log|(GET|POST|PUT|PATCH|DELETE|HEAD|OPTIONS) )/.test(s.title);
+}
+/** Meta keys shown on every test and turned into links, without being breakdown dimensions. */
+const META_KEYS = ['priority', 'severity', 'feature', 'owner', 'epic', 'story', 'issue', 'bug', 'component', 'module', 'team', 'sprint', 'testcase', 'tms', 'requirement'];
 class ReportingLabsReporter {
     constructor(options = {}) {
         this.startTime = Date.now();
@@ -295,15 +301,15 @@ class ReportingLabsReporter {
     dimensions() {
         return (this.options.dimensions ?? ['priority', 'severity', 'feature', 'owner']).map(d => d.toLowerCase());
     }
-    /** Pull dimension values from annotations and tags. */
+    /** Keys picked up from tags and annotations even when they are not breakdown dimensions. */
+    metaKeys() {
+        return [...new Set([...this.dimensions(), ...META_KEYS, ...Object.keys(this.options.links ?? {}).map(k => k.toLowerCase())])].filter(k => k !== '*');
+    }
+    /** Pull meta values (priority, owner, story, epic...) from annotations and tags. */
     extractMeta(test) {
-        const dims = this.dimensions();
+        const dims = this.metaKeys();
         const meta = {};
-        for (const a of test.annotations) {
-            const k = a.type.toLowerCase();
-            if (dims.includes(k) && a.description)
-                meta[k] = a.description;
-        }
+        // Tags first (describe-level, then test-level), annotations last so a test can override its describe's tags.
         for (const raw of test.tags) {
             const tag = raw.replace(/^@/, '');
             const m = tag.match(/^([a-z_-]+)[:=](.+)$/i);
@@ -316,6 +322,11 @@ class ReportingLabsReporter {
             if (/^(blocker|critical|major|minor|trivial)$/i.test(tag) && dims.includes('severity') && !meta.severity)
                 meta.severity = tag.toLowerCase();
         }
+        for (const a of test.annotations) {
+            const k = a.type.toLowerCase();
+            if (dims.includes(k) && a.description)
+                meta[k] = a.description;
+        }
         return meta;
     }
     rel(file) {
@@ -395,6 +406,14 @@ class ReportingLabsReporter {
                 data.push(this.toDataBlock(a.name, JSON.stringify({ csv: body.toString() })));
                 continue;
             }
+            // Plain test.info().attach(name, { body: JSON.stringify(x), contentType: 'application/json' }) renders like testData().
+            if (body && a.contentType === 'application/json' && body.length <= 512 * 1024) {
+                const block = this.toDataBlock(a.name, body.toString());
+                if (block.kind !== 'text') {
+                    data.push(block);
+                    continue;
+                }
+            }
             normal.push(a);
         }
         return {
@@ -405,10 +424,10 @@ class ReportingLabsReporter {
             startTime: r.startTime.getTime(),
             workerIndex: r.parallelIndex,
             errors: r.errors.map(e => this.serializeError(e)),
-            steps: r.steps.map(s => this.serializeStep(s)),
+            steps: r.steps.filter(s => !isInternalAttach(s)).map(s => this.serializeStep(s)),
             attachments: normal.map(a => this.serializeAttachment(a, test)).filter(Boolean),
-            stdout: r.stdout.map(c => stripAnsi(c.toString())),
-            stderr: r.stderr.map(c => stripAnsi(c.toString())),
+            stdout: r.stdout.map(c => this.masker.maskStr(stripAnsi(c.toString()))),
+            stderr: r.stderr.map(c => this.masker.maskStr(stripAnsi(c.toString()))),
         };
     }
     serializeStep(s) {
@@ -417,7 +436,7 @@ class ReportingLabsReporter {
             category: s.category,
             duration: s.duration,
             error: s.error?.message ? stripAnsi(s.error.message) : undefined,
-            steps: s.steps.map(c => this.serializeStep(c)),
+            steps: s.steps.filter(c => !isInternalAttach(c)).map(c => this.serializeStep(c)),
         };
     }
     serializeAttachment(a, test) {

package/dist/template.js

@@ -414,6 +414,7 @@ li.collapsed>ul{display:none}
 .folder .cnt{margin-left:auto;display:flex;gap:6px} .folder .cnt b{color:var(--fail)} .folder .cnt span{color:var(--ink-3)}
 .folder .tw{font-size:9px;color:var(--ink-3)}
 .folder+.folder,.folder+.file{margin-left:0}
+.suite{display:flex;align-items:center;gap:6px;padding:7px 12px 3px;font-size:12px;color:var(--ink-2)} .suite .sn{font-weight:500;color:var(--ink)} .suite .tw{font-size:9px;color:var(--ink-3)} .suite .cnt{margin-left:auto;display:flex;gap:6px} .suite .cnt b{color:var(--fail)} .suite .cnt span{color:var(--ink-3)}
 .tree-indent{padding-left:14px;border-left:1px solid var(--line);margin-left:16px}
 .file-row{display:flex;align-items:center;gap:6px;padding:6px 12px 2px;font:12px var(--mono);color:var(--ink-3);width:100%;text-align:left}
 .file-row .mini{display:flex;gap:2px;margin-left:auto} .file-row .mini i{width:6px;height:6px;border-radius:50%;display:block}
@@ -424,7 +425,7 @@ li.collapsed>ul{display:none}
 .logs{background:var(--surface-2);border-radius:var(--radius);padding:8px 0;font:12px/1.55 var(--mono);max-height:320px;overflow:auto}
 .logs .ln{display:grid;grid-template-columns:78px 1fr;gap:12px;padding:1px 12px}
 .logs .ln:hover{background:var(--surface)} .logs .ts{color:var(--ink-3)} .logs .lm{white-space:pre-wrap;word-break:break-word}
-.logs .ln.err .lm{color:var(--fail)} .logs .ln.warn .lm{color:#9A6A00}
+.logs .ln.err .lm{color:var(--fail)} .logs .ln.warn .lm{color:#9A6A00} .logs.plain .ln{grid-template-columns:1fr}
 /* data tables */
 .tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);max-height:360px}
 table.tbl{border-collapse:collapse;font-size:12.5px;width:100%;min-width:100%}
@@ -447,7 +448,8 @@ table.tbl{border-collapse:collapse;font-size:12.5px;width:100%;min-width:100%}
 .api-col{padding:10px 12px;min-width:0} .api-col+.api-col{border-left:1px solid var(--line)}
 .api-col h5{margin:0 0 6px;font-size:11px;font-weight:600;color:var(--ink-3)}
 .api-col pre{margin:0 0 10px;background:var(--surface-2);padding:8px 10px;border-radius:4px;font:11.5px/1.5 var(--mono);white-space:pre-wrap;word-break:break-all;max-height:260px;overflow:auto}
-.api.collapsed .api-body{display:none}
+.api.collapsed .api-body,.api.collapsed .api-tools{display:none}
+.api-tools{display:flex;gap:8px;padding:8px 12px;border-top:1px solid var(--line);background:var(--surface)} .api-tools .btn{padding:5px 10px;cursor:pointer} .api-tools .btn.done{color:var(--pass);border-color:var(--pass)}
 /* bdd */
 .step .kw{font-weight:600;color:var(--accent);margin-right:4px} .step .kw.and{color:var(--ink-3)}
 .badge.scenario{background:var(--surface-2);color:var(--ink-2)}
@@ -767,7 +769,7 @@ function failuresView(){
 }
 function apiView(){
   const calls=[]; for(const t of data.tests) for(const r of t.results) for(const c of r.api) calls.push({c,t,r});
-  if(!calls.length) return h('div',{class:'card'},'No API calls recorded. Use api() or recordApi() from reporting-labs inside your tests.');
+  if(!calls.length) return h('div',{class:'card'},h('b',{},'No API calls recorded.'),' Add ',h('code',{},"import 'reporting-labs/auto'"),' to playwright.config.ts and every request.get / request.post / page.request call shows up here with headers, bodies and a cURL command. Calls made with other clients can be recorded with api().');
   const bad=calls.filter(x=>(x.c.status||0)>=400).length, avg=Math.round(calls.reduce((a,x)=>a+(x.c.duration||0),0)/calls.length), slow=calls.filter(x=>(x.c.duration||0)>1000).length;
   calls.sort((a,b)=>((b.c.status||0)>=400)-((a.c.status||0)>=400)||(b.c.duration||0)-(a.c.duration||0));
   const byHost=new Map(); for(const x of calls){ try{ const hst=new URL(x.c.url).host; byHost.set(hst,(byHost.get(hst)||0)+1);}catch(e){} }
@@ -1252,14 +1254,27 @@ function refresh(){
   const box=$('#items'); box.innerHTML='';
   if(!vis.length){ box.append(h('div',{class:'empty'},'No tests match. Clear the search or pick another filter.')); return; }
   document.querySelectorAll('.seg button').forEach(b=>b.setAttribute('aria-pressed',b.dataset.g===state.group));
-  const item=t=>h('button',{class:'item','data-id':t.id,'aria-current':state.selected===t.id,onclick:()=>select(t.id)},
+  const item=(t,inGroup)=>h('button',{class:'item','data-id':t.id,'aria-current':state.selected===t.id,onclick:()=>select(t.id)},
       h('span',{class:'st '+t.outcome}),
-      h('span',{class:'tt'}, t.path.length?h('div',{class:'p'},t.path.join(' › ')):null, h('div',{class:'n'},t.title), h('div',{class:'d'}, ms(t.duration)+(t.results.length>1?' · '+t.results.length+' attempts':'')+(data.projects.length>1?' · '+t.project:'')+(t.outcome==='skipped'&&skipReason(t)?' · '+skipReason(t):'')+(t.expectedFailure?' · expected failure':''))));
+      h('span',{class:'tt'}, t.path.length&&!inGroup?h('div',{class:'p'},t.path.join(' › ')):null, h('div',{class:'n'},t.title), h('div',{class:'d'}, ms(t.duration)+(t.results.length>1?' · '+t.results.length+' attempts':'')+(data.projects.length>1?' · '+t.project:'')+(t.outcome==='skipped'&&skipReason(t)?' · '+skipReason(t):'')+(t.expectedFailure?' · expected failure':''))));
   const counts=ts=>{ const f=ts.filter(t=>isFail(t.outcome)).length; return h('span',{class:'cnt'}, f?h('b',{},f+' ✕'):null, h('span',{},ts.length)); };
+  // describe blocks: a header per level, tests indented under it
+  const grouped=(ts,indent)=>{
+    const out=[]; let last=[];
+    for(const t of ts){
+      const p=t.path; let i=0; while(i<p.length && i<last.length && p[i]===last[i]) i++;
+      for(let d=i; d<p.length; d++){
+        const inSuite=ts.filter(x=>x.path.length>d && p.slice(0,d+1).every((seg,k)=>x.path[k]===seg));
+        out.push(h('div',{class:'suite',style:'padding-left:'+(indent+d*14)+'px'}, h('span',{class:'tw'},'▾'), h('span',{class:'sn'},p[d]), counts(inSuite)));
+      }
+      const el=item(t,true); el.style.paddingLeft=(indent+p.length*14)+'px'; out.push(el); last=p;
+    }
+    return out;
+  };
   if(state.group==='flat'){ for(const t of vis) box.append(item(t)); }
   else if(state.group==='file'){
-    let lastFile=null;
-    for(const t of vis){ if(t.file!==lastFile){ box.append(h('div',{class:'file'},t.file)); lastFile=t.file; } box.append(item(t)); }
+    const byF=new Map(); for(const t of vis){ if(!byF.has(t.file)) byF.set(t.file,[]); byF.get(t.file).push(t); }
+    for(const [f,ts] of byF){ box.append(h('div',{class:'file'},f)); for(const el of grouped(ts,12)) box.append(el); }
   } else {
     // folder tree
     const root={dirs:new Map(),files:new Map()};
@@ -1272,7 +1287,7 @@ function refresh(){
         if(open) out.push(...render(child,key,depth+1)); }
       for(const [name,ts] of [...node.files.entries()].sort()){ const key=path+name; const open=state.open[key]!==false;
         out.push(h('button',{class:'file-row',style:'padding-left:'+(12+depth*14)+'px',onclick:()=>{state.open[key]=!open;refresh();}}, h('span',{class:'tw'},open?'▾':'▸'), name, h('span',{class:'mini'}, ts.map(t=>h('i',{style:'background:'+colorOf(bucket(t))})))));
-        if(open) for(const t of ts){ const el=item(t); el.style.paddingLeft=(24+depth*14)+'px'; out.push(el); } }
+        if(open) out.push(...grouped(ts,24+depth*14)); }
       return out;
     };
     for(const el of render(root,'',0)) box.append(el);
@@ -1297,7 +1312,7 @@ function renderDetail(t){
   const metaKeys=Object.keys(t.meta);
   const linkFor=(k,v)=>{ const tpl=data.options.links[k]||data.options.links['*']; if(tpl) return tpl.replace('{id}',encodeURIComponent(v)); if(/^https?:\/\//.test(v)) return v; return null; };
   if(metaKeys.length) d.append(h('div',{class:'metas'}, metaKeys.map(k=>{ const v=t.meta[k], low=/^(P[3-4]|low|minor|trivial|normal|medium)$/i.test(v), href=linkFor(k,v); return h('span',{class:'meta '+k+(low?' low':'')}, h('span',{class:'k'},k), href? h('a',{href,target:'_blank',rel:'noopener'},v) : h('span',{class:'v'},v)); })));
-  const otherAnn=t.annotations.filter(a=>!DIMS.includes(a.type.toLowerCase()));
+  const otherAnn=t.annotations.filter(a=>!DIMS.includes(a.type.toLowerCase()) && !(a.type.toLowerCase() in t.meta));
   if(otherAnn.length) d.append(h('h4',{},'Annotations'), h('dl',{class:'kv'}, otherAnn.map(a=>[h('dt',{},a.type),h('dd',{},a.description||'')])));
   if(t.results.length>1){
     d.append(h('div',{class:'tabs'}, t.results.map((r,i)=>h('button',{class:'tab','aria-selected':state.retry===i,onclick:()=>{state.retry=i;renderDetail(t);}}, (i===0?'Attempt 1':'Retry '+i)+' · '+(label[r.status]||r.status)))));
@@ -1329,9 +1344,10 @@ function renderDetail(t){
     h('div',{class:'trace-how'}, 'Open with ', h('code',{},'npx playwright show-trace '+a.src), ' or drop the file on ', h('a',{href:'https://trace.playwright.dev',target:'_blank',rel:'noopener'},'trace.playwright.dev')),
     h('a',{class:'dl',href:a.src,download:''},'Download trace'))))); }
   if(files.length){ body.append(h('h4',{},'Files'), h('div',{class:'att'}, files.map(a=>h('figure',{}, h('div',{class:'file'}, h('a',{href:a.src,download:''},a.name), h('div',{style:'font-size:11px;color:var(--ink-3)'},a.contentType+(a.size?' · '+kb(a.size):''))))))); }
-  for(const a of texts) body.append(h('h4',{},a.name), h('pre',{class:'txt'},a.text));
-  if(r.stdout.length) body.append(h('h4',{},'Console output'), h('pre',{class:'txt'},r.stdout.join('')));
-  if(r.stderr.length) body.append(h('h4',{},'Console errors'), h('pre',{class:'txt'},r.stderr.join('')));
+  for(const a of texts){ if(/^error-context/i.test(a.name)) body.append(h('details',{class:'errfull'}, h('summary',{},'Error context (written by Playwright for AI tools)'), h('pre',{class:'txt'},a.text))); else body.append(h('h4',{},a.name), h('pre',{class:'txt'},a.text)); }
+  const conLines=(arr,forceErr)=>arr.join('').split('\n').filter(x=>x.trim()).map(x=>h('div',{class:'ln'+(forceErr||/\b(error|fail|exception)\b/i.test(x)?' err':/\bwarn/i.test(x)?' warn':'')}, h('span',{class:'lm'},x)));
+  if(r.stdout.length) body.append(h('h4',{},'Console output', h('span',{class:'hint'},'console.log in this test')), h('div',{class:'logs plain'}, conLines(r.stdout,false)));
+  if(r.stderr.length) body.append(h('h4',{},'Console errors', h('span',{class:'hint'},'console.error in this test')), h('div',{class:'logs plain'}, conLines(r.stderr,true)));
   if(!body.children.length) body.append(h('p',{style:'color:var(--ink-3)'}, r.status==='skipped'?'Skipped — nothing was executed.'+(skipReason(t)?' Reason: '+skipReason(t):''):'Passed with no steps or attachments recorded.'));
   d.append(body);
 }
@@ -1359,10 +1375,24 @@ function apiPanel(c){
   const head=h('button',{class:'api-head',onclick:()=>wrap.classList.toggle('collapsed')}, h('span',{class:'m '+c.method.toUpperCase()},c.method.toUpperCase()), h('span',{class:'u',title:c.url},c.url), st?h('span',{class:'sc '+cls},st):null, c.duration!=null?h('span',{class:'d'},ms(c.duration)):null);
   const pre=v=>v==null?null:h('pre',{}, typeof v==='string'?v:JSON.stringify(v,null,2));
   const col=(title,headers,bodyv)=>h('div',{class:'api-col'}, h('h5',{},title), headers&&Object.keys(headers).length? [h('h5',{},'Headers'), pre(headers)] : null, bodyv!=null? [h('h5',{},'Body'), pre(bodyv)] : h('div',{style:'font-size:12px;color:var(--ink-3)'},'no body'));
-  wrap.append(head, h('div',{class:'api-body'}, col('Request',c.requestHeaders,c.requestBody), col('Response',c.responseHeaders,c.responseBody)));
+  const tools=h('div',{class:'api-tools'}, h('button',{class:'btn',onclick:e=>copyText(curlOf(c),e.currentTarget,'Copied')},'Copy as cURL'), h('button',{class:'btn',onclick:e=>copyText(c.url,e.currentTarget,'Copied')},'Copy URL'));
+  wrap.append(head, h('div',{class:'api-body'}, col('Request',c.requestHeaders,c.requestBody), col('Response',c.responseHeaders,c.responseBody)), tools);
   if(cls==='bad') wrap.classList.remove('collapsed');
   return wrap;
 }
+function curlOf(c){
+  const q=v=>"'"+String(v).replace(/'/g,"'\\''")+"'";
+  const hdr=c.requestHeaders||{}, type=Object.keys(hdr).filter(k=>k.toLowerCase()==='content-type').map(k=>hdr[k])[0]||'';
+  const parts=['curl -X '+c.method.toUpperCase()+' '+q(c.url)];
+  for(const k of Object.keys(hdr)) parts.push('-H '+q(k+': '+hdr[k]));
+  if(c.requestBody!=null){
+    let b=c.requestBody;
+    if(typeof b==='object' && /x-www-form-urlencoded/i.test(type)) b=Object.keys(b).map(k=>encodeURIComponent(k)+'='+encodeURIComponent(String(b[k]))).join('&');
+    else if(typeof b!=='string') b=JSON.stringify(b);
+    if(!/^<(binary|file|multipart)/.test(b)) parts.push('--data-raw '+q(b));
+  }
+  return parts.join(' \\\n  ');
+}
 function kb(n){ return n<1024?n+' B':n<1048576?(n/1024).toFixed(0)+' KB':(n/1048576).toFixed(1)+' MB'; }
 function compare(set){
   const wrap=h('div',{class:'cmp'});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reporting-labs",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "reportingLabs – beautiful, customizable single-file HTML test reports. One line of config. Playwright adapter included, more runners on the way.",
   "keywords": [
     "test-report",
@@ -25,6 +25,10 @@
     "./playwright": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./auto": {
+      "types": "./dist/auto.d.ts",
+      "default": "./dist/auto.js"
     }
   },
   "bin": {