feat: enhance Playwright testing setup with E2E tests, new skills, and improved documentation

- Added E2E test setup in `auth_api.py` with `/e2e-seed` endpoint for database reset and test user creation.
- Integrated Playwright for end-to-end testing in the frontend with necessary dependencies in `package.json` and `package-lock.json`.
- Created Playwright configuration in `playwright.config.ts` to manage test execution and server setup.
- Developed new skills for Playwright best practices, visual regression, smoke test generation, and self-healing tests.
- Implemented new test cases for chore creation in `chores-create.smoke.spec.ts` and `chores-create.spec.ts`.
- Added page object models for `ChildEditPage` and `LandingPage` to streamline test interactions.
- Updated `.gitignore` to exclude Playwright reports and test results.
- Enhanced documentation in `copilot-instructions.md` for testing and E2E setup.

.github/agents/playwright-research.agent.md

@@ -0,0 +1,30 @@
+---
+name: playwright-research
+description: Scans codebase and explores URLs to create Playwright test plans.
+#argument-hint: The inputs this agent expects, e.g., "a task to implement" or "a question to answer".
+tools: ["read", "search", "playwright/*", "web"]
+handoffs:
+  - label: Start Implementation
+    agent: agent
+    prompt: Implement the test plan
+    send: true
+# tools: ['vscode', 'execute', 'read', 'agent', 'edit', 'search', 'web', 'todo'] # specify the tools this agent can use. If not set, all enabled tools are allowed.
+---
+
+# Test Architect Persona
+
+You are a Senior QA Architect. Your goal is to analyze the user's codebase and
+live application to identify high-value test cases.
+
+### Your Workflow:
+
+1. **Scan**: Use `read` and `search` to understand existing project structure and components.
+2. **Explore**: Use `playwright/navigate` and `playwright/screenshot` to explore the live UI.
+3. **Analyze**: Identify edge cases, happy paths, and critical user journeys.
+4. **Present**: Output a structured Markdown Test Plan.
+
+### Hard Constraints:
+
+- **DO NOT** write any `.spec.ts` or `.js` files.
+- **DO NOT** modify existing code.
+- **ONLY** present the plan and wait for feedback.

.github/agents/playwright.agent.md

@@ -0,0 +1,27 @@
+---
+name: playwright
+
+description: Expert in end-to-end testing using Playwright and TypeScript.
+tools: [create, edit, view, delete, terminal, read_file, edit_file, web_search]
+---
+
+# Role: Senior QA Automation Engineer
+
+You are a Playwright expert. Your goal is to create robust, flake-free E2E tests.
+
+## Rules of Engagement
+
+1. **Locators:** Prioritize `getByRole`, `getByLabel`, and `getByText`. Avoid CSS selectors unless necessary.
+2. **Page Objects:** Always use the Page Object Model (POM). Check `tests/pages/` for existing objects before creating new ones.
+3. **Execution:** After writing a test, run it using `npx playwright test` from `frontend/vue-app/`. If it fails, read the trace and fix the test immediately.
+4. **Environment:** The app runs at `https://localhost:5173` (HTTPS — self-signed cert). The backend runs at `http://localhost:5000`. Both must be running before tests execute. Use the `flask-backend` skill (sets `DB_ENV=e2e DATA_ENV=e2e`) and `vue-frontend` skill to start them.
+5. **Authentication:** Auth is handled globally via `storageState`. Do NOT navigate to `/auth/login` in any test — you are already logged in. Never hardcode credentials; import `E2E_EMAIL` and `E2E_PASSWORD` from `tests/global-setup.ts` if needed.
+6. **Test Naming:** Test files must match the pattern `*.smoke.spec.ts` to be picked up by the `smoke` project in `playwright.config.ts`.
+
+## Workflow
+
+- **Step 1:** Read the relevant source code or component file.
+- **Step 2:** Generate a plan for the test steps.
+- **Step 3:** Create/Update Page Objects in `tests/pages/`.
+- **Step 4:** Write the test file in `tests/` using the `*.smoke.spec.ts` naming convention.
+- **Step 5:** Run the test and verify success.

.github/agents/playwright.agent.md.old

@@ -0,0 +1,25 @@
+---
+name: playwright
+description: Expert in end-to-end testing using Playwright and TypeScript.
+tools: [runCommands, readFile, editFiles, fetchWebpage, codebase, findTestFiles]
+---
+
+# Role: Senior QA Automation Engineer
+
+You are a Playwright expert. Your goal is to create robust, flake-free E2E tests.
+
+## Rules of Engagement
+
+1. **Locators:** Prioritize `getByRole`, `getByLabel`, and `getByText`. Avoid CSS selectors unless necessary.
+2. **Page Objects:** Always use the Page Object Model (POM). Check `tests/pages/` for existing objects before creating new ones.
+3. **Execution:** After writing a test, run it using `npx playwright test` from `frontend/vue-app/`. If it fails, read the trace and fix the test immediately.
+4. **Authentication:** Auth is handled globally via `storageState`. Do NOT navigate to `/auth/login` in any test — you are already logged in. Never hardcode credentials; import `E2E_EMAIL` and `E2E_PASSWORD` from `tests/global-setup.ts` if needed.
+5. **Test Naming:** Test files must match the pattern `*.smoke.spec.ts` to be picked up by the `smoke` project in `playwright.config.ts`.
+
+## Workflow
+
+- **Step 1:** Read the relevant source code or component file.
+- **Step 2:** Generate a plan for the test steps.
+- **Step 3:** Create/Update Page Objects in `tests/pages/`.
+- **Step 4:** Write the test file in `tests/` using the `*.smoke.spec.ts` naming convention.
+- **Step 5:** Run the test and verify success.

.github/agents/playwrighter.agent.md.old

@@ -0,0 +1,25 @@
+---
+name: playwright
+description: Expert in end-to-end testing using Playwright and TypeScript.
+---
+
+# Role: Senior QA Automation Engineer
+
+You are a Playwright expert. Your goal is to create robust, flake-free E2E tests.
+
+## Rules of Engagement
+
+1. **Locators:** Prioritize `getByRole`, `getByLabel`, and `getByText`. Avoid CSS selectors unless necessary.
+2. **Page Objects:** Always use the Page Object Model (POM). Check `tests/pages/` for existing objects before creating new ones.
+3. **Execution:** After writing a test, run it using `npx playwright test` from `frontend/vue-app/`. If it fails, read the trace and fix the test immediately.
+4. **Environment:** The app runs at `https://localhost:5173` (HTTPS — self-signed cert). The backend runs at `http://localhost:5000`. Both must be running before tests execute. Use the `flask-backend` skill (sets `DB_ENV=e2e DATA_ENV=e2e`) and `vue-frontend` skill to start them.
+5. **Authentication:** Auth is handled globally via `storageState`. Do NOT navigate to `/auth/login` in any test — you are already logged in. Never hardcode credentials; import `E2E_EMAIL` and `E2E_PASSWORD` from `tests/global-setup.ts` if needed.
+6. **Test Naming:** Test files must match the pattern `*.smoke.spec.ts` to be picked up by the `smoke` project in `playwright.config.ts`.
+
+## Workflow
+
+- **Step 1:** Read the relevant source code or component file.
+- **Step 2:** Generate a plan for the test steps.
+- **Step 3:** Create/Update Page Objects in `tests/pages/`.
+- **Step 4:** Write the test file in `tests/` using the `*.smoke.spec.ts` naming convention.
+- **Step 5:** Run the test and verify success.

.github/copilot-instructions.md

@@ -38,7 +38,8 @@
 - **Backend**: Run Flask with `python -m flask run --host=0.0.0.0 --port=5000` from the `backend/` directory. Main entry: `backend/main.py`.
 - **Virtual Env**: Python is running from a virtual environment located at `backend/.venv/`.
 - **Frontend**: From `frontend/vue-app/`, run `npm install` then `npm run dev`.
-- **Tests**: Run backend tests with `pytest` in `backend/tests/`. Frontend component tests: `npm run test` in `frontend/vue-app/components/__tests__/`.
+- **Tests**: Run backend tests with `pytest` in `backend/tests/`. Frontend component tests: `npm run test` in `frontend/vue-app/components/__tests__/`. E2E tests: `npx playwright test` from `frontend/vue-app/` — requires both servers running (use the `flask-backend` and `vue-frontend` skills).
+- **E2E Setup**: Playwright config is at `frontend/vue-app/playwright.config.ts`. Tests live in `frontend/vue-app/tests/`. The `globalSetup` in `playwright.config.ts` seeds the database and logs in once; all tests receive a pre-authenticated session via `storageState` — do NOT navigate to `/auth/login` in tests. Import `E2E_EMAIL` and `E2E_PASSWORD` from `tests/global-setup.ts` rather than hardcoding credentials. The backend must be started with `DB_ENV=e2e DATA_ENV=e2e` (the `flask-backend` skill does this) so test data goes to `backend/test_data/` and never touches production data.
 - **Debugging**: Use VS Code launch configs or run Flask/Vue dev servers directly. For SSE, use browser dev tools to inspect event streams.
 
 ## 📁 Key Files & Directories

.github/skills/flask-backend/SKILL.md

@@ -0,0 +1,24 @@
+---
+name: flask-backend
+description: Starts the Flask backend using the local virtual environment.
+disable-model-invocation: true
+---
+
+# Instructions
+
+1. **Locate Environment:** Check for a virtual environment folder (usually `.venv` or `venv`) inside the `/backend` directory.
+2. **Activation Logic:**
+   - If on **Windows**: Use `backend\.venv\Scripts\activate`
+   - If on **macOS/Linux**: Use `source backend/.venv/bin/activate`
+3. **Set Environment Variables:**
+   - `FLASK_APP`: `main.py`
+   - `FLASK_DEBUG`: `1`
+   - `DB_ENV`: `e2e`
+   - `DATA_ENV`: `e2e`
+   - `SECRET_KEY`: `dev-secret-key-change-in-production`
+   - `REFRESH_TOKEN_EXPIRY_DAYS`: `90`
+4. **Command:** Execute the following via the `terminal` tool:
+   `flask run --host=0.0.0.0 --port=5000 --no-debugger --no-reload`
+5. **Execution:** Run `python -m flask run --host=0.0.0.0 --port=5000`
+   _Note: Using `python -m flask` ensures the version inside the venv is used._
+6. **Verification:** After running, check the terminal output for "Running on http://0.0.0.0:5000". If it fails, check if port 5000 is already in use.

.github/skills/playwright-best-practices/SKILL.md

@@ -0,0 +1,12 @@
+---
+name: playwright-best-practices
+description: Enforces stable, maintainable, and high-performance Playwright test code.
+---
+# Playwright Best Practices
+When generating or refactoring tests, you must adhere to these standards:
+
+1. **User-Visible Locators**: Prioritize `page.getByRole()`, `page.getByText()`, and `page.getByLabel()`. Never use fragile CSS selectors (e.g., `.btn-primary`) or XPath unless no other option exists.
+2. **Web-First Assertions**: Use the `expect(locator).to...` pattern (e.g., `toBeVisible()`, `toHaveText()`) to leverage Playwright's built-in auto-waiting and retry logic.
+3. **Test Isolation**: Every test must be independent. Use `test.beforeEach` for setup (like navigation or login) rather than relying on the state of a previous test.
+4. **Avoid Logic in Tests**: Keep tests declarative. Use Page Object Models (POM) if the logic for finding an element requires more than one line of code.
+5. **Network Reliability**: Mock third-party APIs using `page.route()` to prevent external flakiness.

.github/skills/playwright-healer/SKILL.md

@@ -0,0 +1,14 @@
+---
+name: playwright-healer
+description: Analyzes failing Playwright tests and suggests automated fixes based on UI changes.
+---
+# Playwright Self-Healing Instructions
+When a user asks to "fix" or "heal" a test:
+
+1. **Analyze the Trace**: Use the Playwright MCP or CLI to open the latest trace file in `.playwright-cli/traces/`.
+2. **Compare Snapshots**: If a locator failed, take a fresh `snapshot` of the page. Identify if the element moved, changed its ARIA role, or had its text updated.
+3. **Propose the Patch**: 
+   - If the UI changed, suggest the updated locator.
+   - If it's a timing issue, suggest adding an `expect(locator).toBeVisible()` wait.
+   - If it's a data issue, check the mock definitions.
+4. **Verify**: Run the patched test once before presenting the final code to the user.

.github/skills/playwright-smoke-gen/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: playwright-smoke-gen
+description: Generates high-level smoke tests by exploring a running web application.
+---
+# Playwright Smoke Test Instructions
+When this skill is active, follow these rules:
+1. **Explore First**: Use the Playwright MCP `snapshot` tool to understand the page structure before writing code.
+2. **Web-First Assertions**: Always use `expect(locator).toBeVisible()` or `toBeEnabled()`.
+3. **Naming Convention**: Save tests in `tests/smoke/[feature].spec.ts`.
+4. **Setup/Teardown**: Use `test.beforeEach` for repeated actions like navigating to the base URL.
+5. **No Hardcoded Secrets**: If a login is required, use `process.env.TEST_USER` placeholders.

.github/skills/playwright-visual-reg/SKILL.md

@@ -0,0 +1,12 @@
+---
+name: playwright-visual-reg
+description: Generates and manages visual regression snapshots for UI consistency.
+---
+# Playwright Visual Regression Standards
+When creating visual tests:
+
+1. **Standard Assertion**: Use `await expect(page).toHaveScreenshot('name.png');`.
+2. **Masking**: Automatically mask dynamic content (dates, usernames, or random IDs) using the `mask` option:
+   `await expect(page).toHaveScreenshot({ mask: [page.locator('.dynamic-id')] });`
+3. **Consistency**: Set `animations: 'disabled'` and `timezoneId: 'UTC'` in the generated test metadata to prevent false positives.
+4. **Update Strategy**: Instruct the user to run `npx playwright test --update-snapshots` if they intentionally changed the UI.

.github/skills/vue-frontend/SKILL.md

@@ -0,0 +1,21 @@
+---
+name: vue-frontend
+description: Starts the Vue development server for the frontend application.
+disable-model-invocation: true
+---
+
+# Instructions
+
+Use this skill when the user wants to "start the frontend," "run vue," or "launch the dev server."
+
+1. **Verify Directory:** Navigate to `./frontend/vue-app`.
+   - _Self-Correction:_ If the directory doesn't exist, search the workspace for `package.json` files and ask for clarification.
+
+2. **Check Dependencies:** - Before running, check if `node_modules` exists in `./frontend/vue-app`.
+   - If missing, ask the user: "Should I run `npm install` first?"
+
+3. **Execution:** - Run the command: `npm run dev`
+   - This script is configured in `package.json` to start the Vite/Vue dev server.
+
+4. **Success Criteria:** - Monitor the terminal output for a local URL (typically `http://localhost:5173` or similar).
+   - Once the server is "Ready," notify the user.