monica-ui-bridge-debug

What problem does it solve?

Monica often has no standalone runnable host for UI verification, making UI inspection, debugging, and iterative fixes difficult to validate in a real browser. This Skill standardizes launching a user-provided ASP.NET Core bridge project, ensures reliable readiness checks across platforms (including WSL), captures browser artifacts with Playwright, and organizes diagnostic artifacts for reproducible verification.

Core Features & Use Cases

• Bridge orchestration: Uses the bundled bridge_service.py to run, monitor, and wait for readiness of an ASP.NET Core bridge project with robust file-lock retries and process cleanup.
• Two execution modes: Simple mode for narrow, single-agent fixes and Delegated sub-agent mode for complex, parallel or long-running investigations with explicit sub-agent supervision.
• Cross-platform handling: WSL path and NAT handling, bind-to-0.0.0.0 logic, and detailed listener PID resolution to make browser access and Playwright captures reliable.
• Artifact-driven verification: Collects app-run.log, bridge-ready.json, bridge-ready-report.json, Playwright snapshots, screenshots, and task-folder reports to confirm or refute UI errors.
• Use cases: Rapidly verify a local Monica UI tweak, capture a failing UI state for triage, or coordinate multi-agent UI debugging and implementation across rebuilds.

Quick Start

Provide the bridge project directory, service base URL, target page route, and the UI task, then run the bridge_service script to launch and wait-ready before capturing the page with Playwright.