| name | ui-visual-debugging |
| description | Use when modifying or visually debugging Nango frontend UI, including packages/webapp, packages/connect-ui, browser interactions, screenshots, and visual regressions. Prefer browser-controlled or headless Playwright checks; use Peekaboo only for native macOS, visible-browser, or Accessibility tree inspection. |
UI Visual Debugging
Core Rules
- Use a browser-controlled or headless context for routine web UI checks. Do not open tabs in the user's existing browser unless explicitly asked.
- Save screenshots, traces, and throwaway Playwright scripts under
.context/; do not commit them.
- Use Peekaboo only when the task needs the real macOS desktop, native windows, a visible browser session, or Accessibility tree inspection.
- For local startup details, use
running-and-testing-locally as the source of truth.
Nango Targets
| Surface | URL | Common command |
|---|
| Dashboard webapp | http://localhost:3000 | npm run dev:watch:web |
| API server | http://localhost:3003 | npm run server:dev:watch |
| Connect UI | http://localhost:3009 | npm run dev:watch:web or npm run connect-ui:dev:watch |
For most frontend work, run:
npm run dev:docker
npm run dev:watch
npm run dev:watch:web
npm run dev:watch and npm run dev:watch:web are long-running commands. Keep them in separate sessions and wait for the initial TypeScript build before browser testing.
