# Project export: FormCrash Lab

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: OpenAI Build Week
- Tagline: Break critical user journeys on purpose. FormCrash replays real flows, injects deterministic failures, and proves recovery with before-and-after evidence.
- Devpost: https://devpost.com/software/gitarchaeologist
- GitHub: https://github.com/SalAkBuK/formcrash
- Video: https://www.youtube.com/embed/S9u86oqdPD4?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent
- Team: 4 GitHub contributor(s) — saleh-vwt (36 commits), SalAkBuK (14 commits), hafsah1976 (10 commits), copilot-swe-agent[bot] (2 commits)

## Devpost submission (written by the team)

### Inspiration

I started FormCrash Lab during OpenAI Build Week after exploring several developer-tool ideas. The problem I kept returning to was timing-dependent bugs: a user clicks submit twice because the first request is slow, retries an important action, refreshes at the wrong moment, or continues interacting while an earlier request is still processing. These failures do not always crash the application. Instead, they can create duplicate orders, duplicate payments, inconsistent records, or an interface that appears successful even though a request failed. My initial direction was too broad. I started building around browser recording, replay, and general failure testing, but the project gradually became a complicated Playwright dashboard without a clear product thesis. I eventually narrowed it down to one question: Can I reproduce a failure around an important user action and clearly prove that the same problem no longer happens after it is fixed? The project became more convincing when I tested recorded journeys from my own SaaS application. FormCrash exposed real problems in several flows that I had not noticed during normal manual testing. That was the point where it stopped feeling like only a hackathon demonstration.

### What it does

FormCrash is a local-first, pre-production resilience-testing workbench for transactional browser journeys. A developer can: Record a successful journey in visible, controlled Chromium. Save that journey as an immutable version. Confirm the Critical Action that creates or changes application data. Approve an Outcome Check that proves the action succeeded. Review FormCrash's recommended state-changing network request and assertions. Generate reusable double-click, triple-click, and delayed-repeat tests. Run those tests and inspect screenshots, request evidence, assertions, ordered events, and a final verdict. FormCrash uses deterministic rules to rank network requests and recommend assertions. It does not require an AI model at runtime, and its recommendations remain explainable and repeatable. The bundled checkout demonstrates the core workflow clearly. The vulnerable version creates duplicate orders when checkout is submitted twice. The fixed version prevents the duplicate using client-side locking and server-side idempotency. How I built it FormCrash is implemented as a TypeScript monorepo managed with pnpm. The main components are: A Next.js and React dashboard for Projects, Journeys, Tests, Runs, configuration, and evidence review A Fastify control server that owns the Playwright browser and execution lifecycle Visible Chromium automation for recording and replay A bundled Next.js sample checkout with vulnerable and fixed modes Shared Zod contracts between the dashboard and server SQLite persistence for journeys, tests, runs, events, assertions, and screenshot metadata Server-Sent Events for live execution progress and event replay Recorded journeys, generated tests, and completed runs remain durable records instead of disappearing after a one-time automation wizard. External application support required additional systems for authentication-state capture, runtime variables, generated test identities, sensitive-value masking, and transitive secret redaction. Request recommendations are produced through deterministic scoring. FormCrash evaluates signals such as HTTP method, response status, request timing, origin, path similarity, repeated occurrences, and whether a request resembles analytics or background traffic. Assertion recommendations are also derived from captured evidence, including successful responses, visible outcomes, error indicators, URL changes, and the state of the control being repeatedly triggered. Challenges The hardest problem was not controlling Chromium. Playwright already handles that well. The difficult part was turning browser events, network traffic, screenshots, assertions, and warnings into a workflow a developer could understand. One click can trigger the real API mutation, multiple read requests, analytics calls, and background refreshes. Requiring the user to manually inspect every request would defeat the purpose of Guided mode, so I added deterministic request scoring to recommend the request most likely associated with the Critical Action. Assertions created a similar problem. Requiring developers to manually author every check would make FormCrash another test-script editor. The server therefore recommends assertions using evidence observed during the successful baseline journey. Authentication was another difficult area. FormCrash can capture and restore browser authentication state, but reliability still depends on how the target application manages sessions, redirects, cookies, and login state. The user interface also remains less polished than the underlying execution system. Some screens still expose too much technical information, and parts of the workflow require clearer guidance. What I learned The biggest lesson was that having a technically large project does not automatically make the product clear. At one stage, FormCrash had many features, but I still could not explain why someone would use it instead of writing Playwright tests. I had to stop expanding the feature set and narrow the workflow to: Critical Journey → Critical Action → Controlled Failure → Outcome Check → Before/After Proof I also learned that deterministic automation can remove substantial manual work without requiring runtime AI. Request and assertion recommendations are generated from captured evidence and explicit rules, so identical evidence produces an explainable result. Testing against my own SaaS was especially useful. Real applications contain authentication, redirects, changing data, background requests, and unpredictable interface states. Those tests demonstrated both where FormCrash is useful and where it remains fragile. How I used Codex and GPT-5.6 Codex and GPT-5.6 were used throughout the project for product planning, architecture, implementation, debugging, test creation, and refactoring. They helped me: Break the initial architecture into verifiable vertical slices Design the monorepo, contracts, execution lifecycle, and persistence model Implement browser recording, replay, assertions, and evidence capture Diagnose authentication, request-matching, navigation, and state-management problems Design and test deterministic request and assertion recommendation systems Review the product critically when it became too broad Refactor the interface and workflow around Projects, Journeys, Tests, and Runs I did not accept every generated direction unchanged. The most important human decisions were narrowing the product thesis, removing unnecessary directions, defining which evidence was safe to persist, and choosing deterministic recommendations instead of introducing a runtime AI dependency. FormCrash was built with Codex and GPT-5.6, but the resulting application does not require an OpenAI API key or an AI model while running. Accomplishments The part I am most satisfied with is that FormCrash is no longer limited to a fake checkout demonstration. It can record and replay journeys against another application, identify likely state-changing requests, recommend assertions, inject repeated interaction around a Critical Action, and persist the resulting evidence. The bundled checkout remains the clearest before-and-after proof: the vulnerable version creates two orders, while the fixed version creates only one. More importantly, I used FormCrash against workflows in my own SaaS and found actual problems. The project is not polished enough for general production use, but it demonstrated that the core idea is useful outside the bundled sample.

### What's next

The most important improvements are: Making authentication capture and replay more reliable Simplifying the interface and removing unnecessary technical noise Improving the organization of journeys, tests, and runs Adding a clearer side-by-side comparison of vulnerable and fixed executions Supporting delayed, dropped, and deliberately failed requests Making local setup and external-project onboarding easier Expanding deterministic diagnosis and recovery guidance The current version proves the core workflow while making the remaining product and usability problems much clearer.

## README (from the GitHub repository)

# FormCrash

FormCrash is a local-first, pre-production resilience-testing application for transactional browser journeys.

It records a successful browser journey, identifies the critical state-changing action, deliberately repeats that action under controlled timing, and evaluates approved Outcome Checks. Projects, Journeys, Tests, and Runs remain durable records instead of disappearing into a one-time automation wizard.

The bundled demo focuses on a common production bug:

> What happens when an impatient user submits checkout twice?

FormCrash runs the same Test against a vulnerable checkout and a fixed checkout so the failure and the recovery are both visible.

## Built with Codex and GPT-5.6

FormCrash was designed and implemented during OpenAI Build Week using Codex with GPT-5.6.

Codex and GPT-5.6 accelerated:

- product scoping and architecture planning;
- breaking the implementation into verifiable vertical slices;
- building the dashboard, control server, browser runner, contracts, and persistence layers;
- designing deterministic request-ranking and assertion-recommendation rules;
- writing and reviewing automated tests;
- debugging authentication, replay, navigation, selector, and network-evidence problems;
- refactoring the product around Projects, Journeys, Tests, and Runs.

The main human decisions included narrowing the product thesis, defining the Critical Journey workflow, choosing deterministic recommendations instead of a runtime AI dependency, reviewing generated implementations, and deciding which sensitive evidence could safely be persisted.

FormCrash does not require an OpenAI API key or an AI model while running. Codex and GPT-5.6 were used to build the application rather than as a required service inside the finished product.

## Why this exists

Many damaging bugs are caused by timing and repeated user actions rather than a complete application crash.

Examples include:

- duplicate orders;
- duplicate payments;
- duplicate form submissions;
- stale or conflicting UI state;
- buttons that remain active while a request is processing;
- backends that do not enforce idempotency.

These failures are difficult to reproduce consistently with manual testing.

FormCrash turns one of those failure modes into a repeatable Test with:

- a controlled Chromium browser;
- deterministic repeated-action injection;
- explicit assertions;
- persisted run history;
- screenshots and ordered evidence;
- plain-language results.

## Bundled demo

The guaranteed demo path is included in the repository.

It contains:

- a vulnerable checkout that creates two orders when submitted twice;
- a fixed checkout with client locking and server idempotency;
- one deterministic **Impatient User** Test;
- one recovery assertion: no more than one order should be created;
- three screenshots captured during each run;
- persisted events, assertions, and observed request evidence.

### Expected results

| Mode       | Expected result | Created orders |
| ---------- | --------------: | -------------: |
| Vulnerable |          Failed |              2 |
| Fixed      |          Passed |              1 |

The failed assertion in vulnerable mode is an expected product result, not a server error.

## Judge testing path

No external SaaS application, account, or test data is required to evaluate the core project.

After completing the [Quick start](#quick-start), use the bundled checkout to run the same repeated-submit Test against both modes:

1. Run the **Vulnerable** checkout and confirm that two orders are created and the recovery assertion fails.
2. Run the **Fixed** checkout and confirm that one order is created and the recovery assertion passes.
3. Open either saved Run to inspect screenshots, ordered events, assertions, and observed request evidence.

The full click-by-click process is documented in the [Bundled fallback walkthrough](#bundled-fallback-walkthrough).

Demo video: https://www.youtube.com/watch?v=S9u86oqdPD4

## Quick start

### Prerequisites

- Node.js `24.11.0`
- Corepack
- pnpm `11.13.0`
- Chromium installed through Playwright

### Supported platforms

The submission build was developed and verified on Windows with Node.js `24.11.0` and Playwright Chromium.

macOS and Linux have not been fully verified for this submission.

### Install

```bash
corepack enable
corepack prepare pnpm@11.13.0 --activate
pnpm install
pnpm --filter @formcrash/server exec playwright install chromium
```

If `pnpm` is not available directly on Windows, run the same commands through Corepack:

```bash
corepack pnpm install
corepack pnpm --filter @formcrash/server exec playwright install chromium
```

### Start the workspace

```bash
pnpm dev
```

This starts:

| Application     | URL                   |
| --------------- | --------------------- |
| Dashboard       | http://localhost:3000 |
| Control server  | http://localhost:4100 |
| Sample checkout | http://localhost:4200 |

Application startup never downloads a browser. Chromium must be installed explicitly before the first run.

## Hackathon walkthrough

Use a staging or otherwise controlled target that you are authorized to modify. Rehearse the full path before recording because journey replay and Test execution can create real target data.

1. Open **Projects** and select the controlled target.
2. Record the successful browser journey, then review and save its immutable version.
3. From the Saved Journey, choose **Configure test suite**.
4. Confirm the Critical Action that creates or updates the business record.
5. Replay the journey to capture the successful outcome.
6. When Chromium enters Outcome selection, use the exact generated name, email, phone, or identifier shown in both the dashboard and Chromium banner to locate the newly created record among older rows.
7. Click the matching row, confirmation, or other visible proof and approve the Outcome Check.
8. Review and save. FormCrash creates the Double-click, Triple-click, and Delayed repeat Tests without running them, then returns to their Saved Journey.
9. Run a Test directly from the Journey and open its latest **Run details** without detouring through the Runs directory.
10. Review the immutable configuration, approved browser and request evidence, verdict, timeline, and screenshots.

Generated literals are scoped to the active baseline capture. Reusable Outcome Checks persist templates such as `{{unique.name}}`, not a one-off tenant or customer value.

## Bundled fallback walkthrough

1. Start the workspace with `pnpm dev`.
2. Open http://localhost:3000.
3. Select **Vulnerable**.
4. Choose **Run Sample Experiment** (the bundled legacy demo label).
5. Watch FormCrash open Chromium and replay the checkout.
6. Confirm the result shows:
   - a failed recovery assertion;
   - two created orders;
   - the ordered run timeline;
   - before, disruption, and settled-state screenshots.
7. Return to the dashboard.
8. Select **Fixed**.
9. Run the identical Test again.
10. Confirm the result passes with one created order.

Recent runs are persisted and can be reopened after refreshing the dashboard or restarting the server.

## How it works

The sample Test follows this sequence:

```text
Reset sample state
→ Open the checkout
→ Complete the recorded journey
→ Reach the critical submit action
→ Trigger the action twice, 100 ms apart
→ Observe requests and created orders
→ Evaluate the duplicate-protection assertion
→ Capture screenshots and persist the result
```

The server owns the browser, execution state, database, screenshots, and SSE event stream. The dashboard only calls the server APIs and renders the authoritative result.

## Project structure

```text
apps/
  dashboard/        Next.js control interface
  server/           Fastify server, Playwright runner, persistence, SSE
  sample-checkout/  Vulnerable and fixed checkout target

packages/
  contracts/        Shared Zod schemas and TypeScript contracts
  test-kit/         Test builders and fixtures
  con

[README truncated for size]

## Detected evidence (automated analysis)

Indexed codebase: 299 recognized source files, 3254 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- Next.js (technology) — detected in the code
- React (technology) — detected in the code
- SQL (language) — detected in the code
- TypeScript (language) — detected in the code
- Node.js (technology) — claimed on Devpost, not found in the code
- AI coding agent: Codex — evidence: config files committed to the repository

## Codebase structure (from repository index)

### Files (120 of 349)

```
.editorconfig
.env.example
.gitignore
.node-version
.nvmrc
.prettierignore
.prettierrc.json
AGENTS.md
apps/dashboard/next-env.d.ts
apps/dashboard/next.config.ts
apps/dashboard/package.json
apps/dashboard/README.md
apps/dashboard/src/app/external-runs/[runId]/page.tsx
apps/dashboard/src/app/globals.css
apps/dashboard/src/app/layout.tsx
apps/dashboard/src/app/page.tsx
apps/dashboard/src/app/projects/[projectId]/journeys/[journeyId]/outcomes/page.tsx
apps/dashboard/src/app/projects/[projectId]/journeys/[journeyId]/page.tsx
apps/dashboard/src/app/projects/[projectId]/journeys/[journeyId]/replay/page.tsx
apps/dashboard/src/app/projects/[projectId]/journeys/[journeyId]/sequence/page.tsx
apps/dashboard/src/app/projects/[projectId]/journeys/new/page.tsx
apps/dashboard/src/app/projects/[projectId]/journeys/page.tsx
apps/dashboard/src/app/projects/[projectId]/layout.tsx
apps/dashboard/src/app/projects/[projectId]/page.tsx
apps/dashboard/src/app/projects/[projectId]/runs/page.tsx
apps/dashboard/src/app/projects/[projectId]/scenarios/page.tsx
apps/dashboard/src/app/projects/[projectId]/settings/page.tsx
apps/dashboard/src/app/projects/[projectId]/tests/[testId]/page.tsx
apps/dashboard/src/app/projects/[projectId]/tests/new/page.tsx
apps/dashboard/src/app/projects/[projectId]/tests/page.tsx
apps/dashboard/src/app/projects/page.tsx
apps/dashboard/src/app/runs/[runId]/page.tsx
apps/dashboard/src/app/runs/page.tsx
apps/dashboard/src/components/application-shell.tsx
apps/dashboard/src/components/ui/button.tsx
apps/dashboard/src/components/ui/copy-button.tsx
apps/dashboard/src/components/ui/disclosure-panel.tsx
apps/dashboard/src/components/ui/state-message.tsx
apps/dashboard/src/components/ui/status-badge.tsx
apps/dashboard/src/features/projects/api/external-experiments.ts
apps/dashboard/src/features/projects/api/projects.ts
apps/dashboard/src/features/projects/components/authentication-gate.tsx
apps/dashboard/src/features/projects/components/crm-project-data.ts
apps/dashboard/src/features/projects/components/external-experiment-panel.tsx
apps/dashboard/src/features/projects/components/external-run-comparison.tsx
apps/dashboard/src/features/projects/components/external-run-detail-route.tsx
apps/dashboard/src/features/projects/components/external-run-result.tsx
apps/dashboard/src/features/projects/components/guided-test-panel.tsx
apps/dashboard/src/features/projects/components/journey-detail.tsx
apps/dashboard/src/features/projects/components/journey-list-screen.tsx
apps/dashboard/src/features/projects/components/journey-recording-screen.tsx
apps/dashboard/src/features/projects/components/journey-workspace-screen.tsx
apps/dashboard/src/features/projects/components/outcome-definition-panel.tsx
apps/dashboard/src/features/projects/components/project-journey-dashboard.tsx
apps/dashboard/src/features/projects/components/project-list-screen.tsx
apps/dashboard/src/features/projects/components/project-overview-screen.tsx
apps/dashboard/src/features/projects/components/project-runs-screen.tsx
apps/dashboard/src/features/projects/components/project-scenarios-screen.tsx
apps/dashboard/src/features/projects/components/project-settings-screen.tsx
apps/dashboard/src/features/projects/components/project-tests-screen.tsx
apps/dashboard/src/features/projects/components/project-workspace-layout.tsx
apps/dashboard/src/features/projects/components/saved-journey-detail.tsx
apps/dashboard/src/features/projects/components/technical-checks-editor.tsx
apps/dashboard/src/features/projects/components/test-builder-screen.tsx
apps/dashboard/src/features/projects/components/test-detail-screen.tsx
apps/dashboard/src/features/projects/models/guided-recipes.ts
apps/dashboard/src/features/projects/models/guided-values.ts
apps/dashboard/src/features/projects/models/journey-readiness.ts
apps/dashboard/src/features/projects/models/journey-runtime.ts
apps/dashboard/src/features/projects/models/network-evidence.ts
apps/dashboard/src/features/projects/models/outcome-check-presentation.ts
apps/dashboard/src/features/projects/models/test-coverage.ts
apps/dashboard/src/features/run-history/api/get-runs.ts
apps/dashboard/src/features/run-history/components/run-history-dashboard.tsx
apps/dashboard/src/features/run-history/components/run-history-list.tsx
apps/dashboard/src/features/run-result/api/get-run.ts
apps/dashboard/src/features/run-result/components/assertion-and-evidence.tsx
apps/dashboard/src/features/run-result/components/event-timeline.tsx
apps/dashboard/src/features/run-result/components/run-detail-route.tsx
apps/dashboard/src/features/run-result/components/run-detail-view.tsx
apps/dashboard/src/features/run-result/components/screenshot-gallery.tsx
apps/dashboard/src/features/run-result/hooks/use-live-run.ts
apps/dashboard/src/features/run-result/models/event-presentation.ts
apps/dashboard/src/features/sample-run/api/start-sample-run.ts
apps/dashboard/src/features/sample-run/components/sample-run-dashboard.tsx
apps/dashboard/src/lib/api-client.ts
apps/dashboard/src/lib/formatters.ts
apps/dashboard/test/authentication-prerequisite.test.tsx
apps/dashboard/test/crm-project-surfaces.test.tsx
apps/dashboard/test/crm-scenario-data.test.ts
apps/dashboard/test/crm-workspace.test.tsx
apps/dashboard/test/external-experiment-panel.test.tsx
apps/dashboard/test/external-run-comparison.test.tsx
apps/dashboard/test/external-run-detail-route.test.tsx
apps/dashboard/test/external-run-result.test.tsx
apps/dashboard/test/fixtures.ts
apps/dashboard/test/homepage.test.tsx
apps/dashboard/test/journey-detail.test.tsx
apps/dashboard/test/live-run.test.tsx
apps/dashboard/test/network-evidence.test.ts
apps/dashboard/test/project-journey-dashboard.test.tsx
apps/dashboard/test/root-layout.test.tsx
apps/dashboard/test/run-detail-view.test.tsx
apps/dashboard/test/sample-run-dashboard.test.tsx
apps/dashboard/test/saved-journey-workspace.test.tsx
apps/dashboard/test/setup.ts
apps/dashboard/test/shared-foundation.test.tsx
apps/dashboard/test/technical-checks-editor.test.tsx
apps/dashboard/test/test-builder-navigation.test.tsx
apps/dashboard/test/test-configuration-models.test.ts
apps/dashboard/test/test-detail-versioning.test.tsx
apps/dashboard/test/test-suite-presentation.test.ts
apps/dashboard/tsconfig.json
apps/dashboard/vitest.config.ts
apps/sample-checkout/next-env.d.ts
apps/sample-checkout/next.config.ts
apps/sample-checkout/package.json
apps/sample-checkout/src/app/api/orders/route.ts
apps/sample-checkout/src/app/api/test-support/reset/route.ts
apps/sample-checkout/src/app/api/test-support/state/route.ts
[229 more files omitted for size]
```

### Dependencies

- apps/dashboard/package.json: @formcrash/contracts@workspace:*, @testing-library/dom@10.4.1, @testing-library/jest-dom@6.9.1, @testing-library/react@16.3.2, @testing-library/user-event@14.6.1, @types/react@19.2.17, @types/react-dom@19.2.3, @vitejs/plugin-react@6.0.3, jsdom@29.1.1, next@16.2.10, react@19.2.7, react-dom@19.2.7
- apps/sample-checkout/package.json: @types/react@19.2.17, @types/react-dom@19.2.3, next@16.2.10, react@19.2.7, react-dom@19.2.7, zod@4.4.3
- apps/server/package.json: @fastify/cors@11.3.0, @formcrash/contracts@workspace:*, @types/better-sqlite3@7.6.13, better-sqlite3@12.11.1, fastify@5.10.0, playwright@1.61.1, zod@4.4.3
- package.json: @eslint/js@10.0.1, @types/node@24.13.3, eslint@10.7.0, prettier@3.9.5, tsx@4.23.1, typescript@6.0.3, typescript-eslint@8.64.0, vitest@4.1.10
- packages/contracts/package.json: zod@4.4.3
- packages/test-kit/package.json: @formcrash/contracts@workspace:*

### Recent commits (newest first)

- Merge branch 'main' of https://github.com/SalAkBuK/formcrash
- Update README with Codex and GPT-5.6 details
- Remove session ID documentation file
- Merge branch 'main' of https://github.com/SalAkBuK/formcrash
- Improve replay pacing and authentication recovery
- Merge pull request #12 from SalAkBuK/copilot/open-source-license-setup
- Add MIT licensing metadata for open-source setup
- Document contribution guidelines and validation expectations
- Update README for multi-test workflow and hackathon walkthrough
- Update application workflows and supporting UI components
- Merge pull request #11 from SalAkBuK/feat/continue-rendering-fix
- Merge branch 'feat/continue-rendering-fix' of https://github.com/SalAkBuK/formcrash into feat/continue-rendering-fix
- Improve dashboard form workflows and error handling
- Merge pull request #10 from SalAkBuK/feat/continue-rendering-fix
- Merge origin/main and resolve README conflict
- Support continuing public journeys without authentication
- Update session ID file to ensure proper formatting
- Merge pull request #9 from SalAkBuK/feat/continue-rendering-fix
- Improve form handling and crash recovery
- Merge pull request #8 from SalAkBuK/feat/stitch-test-wizard

## Key source files (fetched from GitHub, selected and truncated for size)

### AGENTS.md

```markdown
# Repository agent instructions

Before working under `apps/dashboard/**`, read:

- `docs/product/ui-direction.md`;
- `docs/product/active-bugs.md`;
- the relevant product and architecture documents.

Preserve the persistent, record-oriented information architecture. Do not turn a
domain lifecycle into application-wide wizard navigation, and do not treat
historical Stitch screens, mappings, or QA handoffs as current authority. Do not
hide active bugs through restructuring, relabeling, static placeholders, removal
of error states, or weakened regression tests. Preserve real backend behavior and
represent unimplemented or unsafe states honestly.

Do not modify unrelated working-tree changes. Current user instructions take
precedence over repository planning documents.

```

### design.md

```markdown
---
name: FormCrash — Operational Resilience Application
version: 1.0
mode: dark-first
keywords:
  - operational application
  - reliability testing
  - resilience records
  - controlled failure
  - browser automation
  - forensic clarity
colors:
  background: '#0A0D12'
  surface: '#0F141C'
  surface-subtle: '#131A24'
  surface-raised: '#18212D'
  surface-high: '#1E2937'
  border: '#293647'
  border-strong: '#3A4A60'
  text-primary: '#F4F7FB'
  text-secondary: '#AAB5C4'
  text-muted: '#738195'
  primary: '#FFB454'
  primary-hover: '#FFC477'
  primary-pressed: '#E99A31'
  on-primary: '#23180A'
  focus: '#73B7FF'
  info: '#6CB6FF'
  success: '#58D6A3'
  warning: '#F4C95D'
  danger: '#FF6B78'
  danger-strong: '#FF4858'
  neutral: '#8A98AA'
  browser-evidence: '#6CB6FF'
  request-evidence: '#B78CFF'
  outcome-evidence: '#FFB454'
  pass-bg: '#10271F'
  pass-border: '#285F4C'
  fail-bg: '#2B151A'
  fail-border: '#74313A'
  warn-bg: '#2A2412'
  warn-border: '#6A5726'
  info-bg: '#102338'
  info-border: '#28557D'
  overlay: 'rgba(0, 0, 0, 0.68)'
typography:
  display:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: '700'
    lineHeight: 40px
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '700'
    lineHeight: 32px
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: '650'
    lineHeight: 28px
    letterSpacing: -0.015em
  headline-sm:
    fontFamily: Inter
    fontSize: 17px
    fontWeight: '650'
    lineHeight: 24px
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 21px
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: '400'
    lineHeight: 19px
  label-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '650'
    lineHeight: 16px
    letterSpacing: 0.025em
  label-sm:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: '700'
    lineHeight: 14px
    letterSpacing: 0.06em
  code:
    fontFamily: JetBrains Mono
    fontSize: 12.5px
    fontWeight: '400'
    lineHeight: 19px
rounded:
  xs: 0.25rem
  sm: 0.375rem
  md: 0.5rem
  lg: 0.75rem
  xl: 1rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  page-inline: 32px
  page-block: 28px
  content-max: 1440px
shadows:
  raised: '0 12px 32px rgba(0, 0, 0, 0.28)'
  floating: '0 18px 48px rgba(0, 0, 0, 0.42)'
  focus: '0 0 0 3px rgba(115, 183, 255, 0.28)'
---

# FormCrash Design System

> **Authority:** This file owns visual-system details only where they do not
> conflict with [`docs/product/ui-direction.md`](docs/product/ui-direction.md).
> That document governs application identity and information architecture.
> [`docs/product/active-bugs.md`](docs/product/active-bugs.md) remains authoritative
> for unresolved behavior and verification; visual restructuring mu
[truncated — 16700 more characters]
```

### package.json

```
{
  "name": "formcrash-lab",
  "version": "0.0.0",
  "private": true,
  "license": "MIT",
  "description": "Local resilience-testing workbench for transactional web journeys.",
  "engines": {
    "node": ">=24 <25"
  },
  "packageManager": "pnpm@11.13.0",
  "scripts": {
    "dev": "node scripts/dev.mjs",
    "build": "corepack pnpm --recursive --if-present build",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "lint": "eslint .",
    "typecheck": "corepack pnpm --recursive --if-present typecheck",
    "test": "corepack pnpm --recursive --if-present test",
    "verify": "corepack pnpm format:check && corepack pnpm lint && corepack pnpm typecheck && corepack pnpm test && corepack pnpm build"
  },
  "devDependencies": {
    "@eslint/js": "10.0.1",
    "@types/node": "24.13.3",
    "eslint": "10.7.0",
    "prettier": "3.9.5",
    "tsx": "4.23.1",
    "typescript": "6.0.3",
    "typescript-eslint": "8.64.0",
    "vitest": "4.1.10"
  }
}

```

### packages/config/package.json

```
{
  "name": "@formcrash/config",
  "version": "0.0.0",
  "private": true,
  "license": "MIT",
  "files": [
    "tsconfig.base.json"
  ],
  "exports": {
    "./tsconfig.base.json": "./tsconfig.base.json"
  }
}

```

### packages/test-kit/package.json

```
{
  "name": "@formcrash/test-kit",
  "version": "0.0.0",
  "private": true,
  "license": "MIT",
  "type": "module",
  "exports": {
    ".": {
      "types": "./src/index.ts",
      "default": "./dist/index.js"
    }
  },
  "scripts": {
    "build": "tsc -p tsconfig.build.json",
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
    "@formcrash/contracts": "workspace:*"
  }
}

```

### packages/contracts/package.json

```
{
  "name": "@formcrash/contracts",
  "version": "0.0.0",
  "private": true,
  "license": "MIT",
  "type": "module",
  "exports": {
    ".": {
      "types": "./src/index.ts",
      "default": "./dist/index.js"
    }
  },
  "scripts": {
    "build": "tsc -p tsconfig.build.json",
    "typecheck": "tsc --noEmit",
    "test": "vitest run"
  },
  "dependencies": {
    "zod": "4.4.3"
  }
}

```

### apps/sample-checkout/package.json

```
{
  "name": "@formcrash/sample-checkout",
  "version": "0.0.0",
  "private": true,
  "license": "MIT",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "typecheck": "tsc --noEmit",
    "test": "vitest run"
  },
  "dependencies": {
    "next": "16.2.10",
    "react": "19.2.7",
    "react-dom": "19.2.7",
    "zod": "4.4.3"
  },
  "devDependencies": {
    "@types/react": "19.2.17",
    "@types/react-dom": "19.2.3"
  }
}

```

### apps/server/package.json

```
{
  "name": "@formcrash/server",
  "version": "0.0.0",
  "private": true,
  "license": "MIT",
  "type": "module",
  "scripts": {
    "db:migrate": "tsx src/persistence/migrate-cli.ts",
    "dev": "node scripts/dev.mjs",
    "build": "tsc -p tsconfig.build.json",
    "start": "node dist/main.js",
    "typecheck": "tsc --noEmit",
    "pretest": "corepack pnpm --filter @formcrash/contracts build",
    "test": "vitest run"
  },
  "dependencies": {
    "@fastify/cors": "11.3.0",
    "@formcrash/contracts": "workspace:*",
    "better-sqlite3": "12.11.1",
    "fastify": "5.10.0",
    "playwright": "1.61.1",
    "zod": "4.4.3"
  },
  "devDependencies": {
    "@types/better-sqlite3": "7.6.13"
  }
}

```

### apps/dashboard/package.json

```
{
  "name": "@formcrash/dashboard",
  "version": "0.0.0",
  "private": true,
  "license": "MIT",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "typecheck": "tsc --noEmit",
    "pretest": "corepack pnpm --filter @formcrash/contracts build",
    "test": "vitest run"
  },
  "dependencies": {
    "@formcrash/contracts": "workspace:*",
    "next": "16.2.10",
    "react": "19.2.7",
    "react-dom": "19.2.7"
  },
  "devDependencies": {
    "@testing-library/dom": "10.4.1",
    "@testing-library/jest-dom": "6.9.1",
    "@testing-library/react": "16.3.2",
    "@testing-library/user-event": "14.6.1",
    "@types/react": "19.2.17",
    "@types/react-dom": "19.2.3",
    "@vitejs/plugin-react": "6.0.3",
    "jsdom": "29.1.1"
  }
}

```

### packages/test-kit/src/index.ts

```typescript
export { buildRunEvent } from './run-event-builder.js';

```

[271 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]