repro-admin

$npx mdskill add emdash-cms/emdash/repro-admin

The issue is in the React admin under `/_emdash/admin/*`. You need a running demo, an authenticated session, and a way to drive the UI through the steps the reporter described. Reproduce and confirm the bug entirely through `agent-browser`: the durable artifact is your screenshots plus a precise, replayable transcript of the steps. Do not write Playwright (or any other) tests -- the bot cannot reliably run them here, so an unrun test is unverified guesswork. A regression test belongs to whoever lands the fix.

SKILL.md
.github/skills/repro-adminView on GitHub ↗
---
name: repro-admin
description: Reproduce an EmDash admin UI bug. Boots a demo with bgproc, drives the admin with agent-browser using the dev-bypass session, and captures the reproduction as screenshots plus a written transcript.
---

# Reproduce: Admin UI

The issue is in the React admin under `/_emdash/admin/*`. You need a running demo, an authenticated session, and a way to drive the UI through the steps the reporter described. Reproduce and confirm the bug entirely through `agent-browser`: the durable artifact is your screenshots plus a precise, replayable transcript of the steps. Do not write Playwright (or any other) tests -- the bot cannot reliably run them here, so an unrun test is unverified guesswork. A regression test belongs to whoever lands the fix.

## Hard prohibitions

- No `git commit`, no `git push`, no branch creation that survives the workflow.
- No GitHub writes (`gh issue comment`, `gh pr ...`, `gh issue edit`). Read-only `gh` reads only.
- No `curl` to arbitrary external hosts. `localhost:4321` only.
- Do not touch any issue other than the one being investigated.
- Do not modify Lingui catalogs (`packages/admin/src/locales/*/messages.po`). They are regenerated by a workflow on merge to `main`; touching them from the bot creates merge churn.

## Procedure

1. **Re-read the issue.** Note the exact steps the reporter described, the page they were on, the browser they used, and any screenshots or stack traces. If the steps reference a collection or content item, decide whether the default demo seed covers it or whether you need to create content first.
2. **Pick a demo.** `demos/simple` is the default starting point and works for most admin reproductions. Use a more specific demo only when the issue explicitly mentions it.
3. **Start the demo with `bgproc`.** Run `bgproc start -n demo -w -- pnpm --filter ./demos/simple dev`. The `-w` flag makes `bgproc` wait until the dev server opens a port before returning -- Astro listens on `localhost:4321` -- so do not move on until it does. Inspect progress with `bgproc status -n demo` and `bgproc logs -n demo`. If the server never opens a port, capture `bgproc logs -n demo` and treat it as a setup failure, not a reproduction.
4. **Get a session.** Open `agent-browser open "http://localhost:4321/_emdash/api/setup/dev-bypass?redirect=/_emdash/admin"`. This runs migrations, creates a dev admin user, sets a session cookie, and lands you on the admin home. The endpoint is gated to `import.meta.env.DEV` so it only exists locally -- do not try to use it against any deployed environment.
5. **Drive the UI.** Use `agent-browser snapshot -i -c` to get an accessibility tree with `@e<n>` refs. Interact with `click @e<n>`, `fill @e<n> "text"`, `select @e<n> "option"`. Refs are stable only within a snapshot -- re-snapshot after each navigation or DOM change.
6. **Screenshot at meaningful steps.** Save to `.bot-artifacts/step-<n>.png`. Take one when you land on the page, one at the point where the reporter says the bug appears, and one of the broken state. Use `--full` only when the bug is below the fold. Keep file sizes reasonable.
7. **Watch for JS errors.** After each interaction, run `agent-browser console` and `agent-browser errors`. Capture anything that looks related to the symptom. Console warnings about React keys or unmounted setState are almost never the bug; runtime exceptions usually are.
8. **Confirm the failure mode matches.** A snapshot that shows a different broken state is not a reproduction. If you can only get the page into an adjacent broken state, say so in notes. Write down the exact replayable step sequence (URL, refs/selectors, inputs, the observed broken state) so a maintainer can follow it without you.

## When to skip

Mark `skipped: true` and explain in notes when:

- The bug requires a specific browser engine that agent-browser's headless Chromium cannot drive faithfully (rare; usually a Safari-specific layout quirk).
- The bug requires OS-level interaction beyond what a headless browser supports -- native file pickers in non-trivial drag-drop, OS clipboard internals, IME flows, hardware key combinations.
- The bug only reproduces with a real user's browser extensions or profile (e.g. a password manager or autofill that injects into inputs), which a clean headless browser does not have. Say so in notes -- this is a real bug class the bot cannot trigger.
- The bug requires real Cloudflare Access in front of the admin. The dev-bypass path skips Access; if the symptom is specifically "Access redirects me incorrectly", you cannot reproduce it locally.
- The reporter's repro depends on production data, third-party OAuth, or a hosted environment.
- The demo will not boot for an unrelated reason and the failure is in setup, not in the admin code.

## Output

Return:

- Whether you reproduced the bug.
- Whether you skipped (with reason if so).
- The approach you used: `agent-browser-only` or `none`.
- Notes: a short paragraph naming the demo, the URL path where the symptom appeared, the interaction sequence in plain prose, and any console or runtime errors.
- A list of screenshots, each with the relative filename under `.bot-artifacts/` and a one-line description of what it shows.
More from emdash-cms/emdash