# Explore the sample site

The maintained sample site is a deterministic host with one intentional profile-save bug and its fixed behavior. The documentation's example launch controls reuse this artifact; there is no second implementation of the scenario.

Open the built [React playground](/playground/), [plain-HTML host](/plain-html/), or [reporting prototype](/playground/branding/?page=recording) alongside this guide. These links work when reading the locally served documentation artifact; use the command below from the repository.

## Run it from the repository

Use the [pinned workspace setup](../../contributing/workspace.md), then:

```sh
pnpm worktree:setup
pnpm dev:examples
```

Use the server's printed URL. Append `playground/`, `plain-html/`, or `playground/branding/`; preserve any deployment prefix. Startup builds supported module entries. Restart after changing package source.

## Compare buggy and fixed saves

1. Open the React playground and choose **Buggy save**.
2. Replace **Alex Morgan** with **Morgan Lee** and click **Save profile**.
3. Visit **Overview**, then **Profile**. The success message claimed a save, but **Alex Morgan** returns.
4. Choose **Fixed save** and repeat. **Morgan Lee** remains across in-page navigation.
5. Choose **Reset scenario**. Initial state returns while the selected mode stays selected.

Switching modes starts fresh. A full browser reload resets mode and data; this example does not implement durable storage. Whitespace-only names are rejected, and markup-like input stays literal text.

The [scenario source](../../../examples/playground/scenarios/profile.ts) owns state transitions. [ProfileScenario](../../../examples/playground/profile-scenario.tsx) renders it in the playground and reporting prototype. The [matching fixed-save definition](../../../examples/test-plans/sample-site/profile/persistence/fixed/save-roundtrip.snag.md) is a useful first agent test.

## Inspect the plain-HTML host

The [plain-HTML example](../../../examples/plain-html/main.ts) uses its own DOM script without React. Exercise its button by pointer and keyboard. Its labelled SnagBadger mount region is intentionally empty; universal embedding is future work.

## Explore the reporting prototype

For the interactive launcher and drawer, open the [bug reporter demo](/playground/branding/?page=reporting). Use the right-edge **Report a bug** button, then try capture setup, start/stop, review, replay and settings. Pointer, keyboard and touch work with the same maintained interface. See its [walkthrough and mocked boundaries](../../prototypes/reporting-session.md); capture and submission are simulated.

The public reporting and recording routes share the site's warm Oops! Club styling, Technical mono headings, caped badger and centered navigation. They display the maintained profile scenario directly, without the former workspace frame or developer controls. Explicit variant A–E URLs retain the internal design studies; the public demo gallery does not link those controls.

Try start, pause, resume, stop, review, and restart. These are simulated recording states. No browser permission, real screen/audio recording, upload, persistence, or external submission occurs. Local evidence inclusion and draft state exist only for this session. See [prototype notes](../../prototypes/theming-branding.md) for context.

Continue with the [test catalog](test-plan.md) or [runtime setup](../docs/getting-started/first-test-run.md). Authored tests of the prototype must observe its simulated behavior, not claim real capture.