Skip to content

Red-to-green demo

One bug, the whole loop, no credentials

Every panel below is generated by the real StepStitch service modules: the same scrubber, scorer, compiler, draft adapters, and verdict logic the live product runs. There is no database and no ServiceNow/Salesforce/GitHub/cloud credential anywhere. Drafts and the pull request are dry-run previews; nothing is ever sent.

Demo data · dry-run — nothing sent
  1. 1. User reports a bug
  2. 2. StepStitch captures structural footsteps only
  3. 3. The server scrubber reports exactly what it stripped
  4. 4. A replayability score tells engineering if the bug is reproducible
  5. 5. StepStitch generates a Playwright repro
  6. 6. A ticket/PR draft is created (dry-run — never sent)
  7. 7. CI reports pre-fix failed and post-fix passed
  8. 8. StepStitch records confirmed_fixed in the regression corpus
1

User reports a bug

User-reported issue: HTTP 500 on /accounts/:id/transfer

Forbidden fields the SDK sent (placeholders only)

metadata.headersmetadata.raw_urlfootsteps[5].metadata.cookiesfootsteps[5].metadata.request_bodyfootsteps[5].metadata.url

Synthetic placeholders ONLY — never real customer data. Present to demonstrate the scrubber dropping forbidden fields and redacting PII-shaped text.

2

Structural footsteps only

  1. Visited route

    /accounts/:id

  2. Visited route

    /accounts/:id/transfer

  3. Interaction

    [data-testid=payee-select]

  4. Interaction

    [data-testid=amount-input]

  5. Interaction

    [data-testid=review-transfer]

  6. API error

    /accounts/:id/transfer

3

The server scrubber reports exactly what it stripped

Scrub status: scrubbed

Fields dropped or redacted before storage

explanationfootsteps[0].routefootsteps[1].routefootsteps[5].metadata.endpointfootsteps[5].metadata.cookiesfootsteps[5].metadata.request_bodyfootsteps[5].metadata.urlmetadata.headersmetadata.raw_url

explanation → Transfer to account [redacted:number] failed; reach me at [redacted:email] or [redacted:ssn].

Never captured

  • Screenshots / video
  • Input values (what a user typed)
  • Page text / DOM content
  • Raw URLs (templated to routes)
  • Request / response bodies
  • Raw frontend logs / console messages / stack traces
  • Network headers / cookies
  • SSNs, account/card numbers, emails, phone numbers (redacted from free text)
4

Replayability score

0.96grade A

6

steps

3

interactive

3

stable selectors

  • templated_route_needs_fixture
5

Generated Playwright repro

import { test, expect } from '@playwright/test';

// StepStitch autogenerated reproduction (trace: trc_demo_red_to_green_0001)
// Replayability: 0.96 (grade A)
//   ⚠ templated_route_needs_fixture [step 0]: Route parameter ':id' is templated (used by 6 steps); supply a concrete fixture id via route_params, e.g. {"id": "1001"}.
//
// Reproduction setup (change with PUT /admin/config/repro):
//   NEEDS-CONFIG Application base URL — not set — the reproduction will target http://localhost:3000. Set base_url (e.g. "https://staging.example.test").
//   NEEDS-CONFIG Templated route values — no value for ':id' — set route_params, e.g. {"id": "1001"}
//   NEEDS-CONFIG Authentication fixture — not configured — the reproduction runs unauthenticated. Set auth.fixture (e.g. "tests/auth.setup.ts") if the flow needs a session.
//
// NOTE: no credentials are embedded. A protected field reads its value from an
// environment variable by name — set that variable in CI.

test('StepStitch reproduction', async ({ page }) => {
  // TODO: authenticate as a synthetic test user if the flow requires it.

  // [NAVIGATION] /accounts/:id
  // NEEDS-CONFIG: no value for 'id' in '/accounts/:id' — set route_params.
  await page.goto('http://localhost:3000/accounts/:id');

  // [NAVIGATION] /accounts/:id/transfer
  // NEEDS-CONFIG: no value for 'id' in '/accounts/:id/transfer' — set route_params.
  await page.goto('http://localhost:3000/accounts/:id/transfer');

  // [CLICK] /accounts/:id/transfer
  await page.locator('[data-testid=payee-select]').click();

  // [CLICK] /accounts/:id/transfer
  await page.locator('[data-testid=amount-input]').click();

  // [CLICK] /accounts/:id/transfer
  const endpoint0 = new RegExp('/api/accounts/[^/]+/transfers$');
  const response0 = page.waitForResponse(
    (r) => endpoint0.test(new URL(r.url()).pathname) && r.request().method() === 'POST',
  );
  await page.locator('[data-testid=review-transfer]').click();
  // expected API failure: /api/accounts/:id/transfers (HTTP 500)
  const res0 = await response0;
  expect(res0.status(), 'no server error from /api/accounts/:id/transfers').toBeLessThan(500);

});

Red while broken, green once fixed.

6

Ticket & PR drafts: created, never sent

dry-run — nothing sent

servicenow

8 flat fields · correlation id linked

salesforce

10 flat fields · correlation id linked

genesys

13 flat fields · correlation id linked

GitHub

issue + dry-run PR on stepstitch/trace-trc_demo_red_to_green_0001

dry-run: StepStitch never merges — a human reviews and merges.

7

The verdict logic turns red-to-green into proof

Pre-fix run (bug present)failed
Post-fix run (after the fix)passed
verdict: confirmed_fixed

confirmed_fixed derives only from pre_passed=false + post_passed=true.

Provenance: the two outcomes above were measured, not declared. CI runs the compiled reproduction in a real Chromium against a broken fixture and then a fixed one, and fails if this bundle disagrees with what it observed. The scenario is synthetic; the red-to-green transition is a run that actually happened.

8

Recorded in the regression corpus

1 confirmed-fixed entry

The fix is now durable regression evidence: if this bug ever returns, the committed Playwright test goes red again. That is the moat: a recording cannot do this.