docs(04-01): complete E2E and CI phase

Tasks completed: 7/7
- Playwright API mock utilities with WebSocket support
- Pattern flow E2E tests (4 tests)
- Playlist flow E2E tests (3 tests)
- Table control E2E tests (3 tests)
- Updated sample spec (3 tests)
- Extended CI workflow for frontend tests
- Fixed E2E tests and WebSocket mocking

SUMMARY: .planning/phases/04-e2e-ci/04-01-SUMMARY.md

.planning/STATE.md

@@ -3,12 +3,12 @@
 ## Current Position
 
 Milestone: v2-frontend-testing
-Phase: 03-integration-tests (3 of 4)
+Phase: 04-e2e-ci (4 of 4)
 Plan: 01 of 1 - COMPLETE
-Status: Phase complete
-Last activity: 2026-01-25 - Completed 03-01-PLAN.md (22 integration tests)
+Status: Milestone complete
+Last activity: 2026-01-25 - Completed 04-01-PLAN.md (E2E & CI)
 
-Progress: [#######---] 75%
+Progress: [##########] 100%
 
 ## Phase Overview
 
@@ -17,13 +17,14 @@ Progress: [#######---] 75%
 | 01 | Test Infrastructure | **Complete** |
 | 02 | Component Tests | **Complete** |
 | 03 | Integration Tests | **Complete** |
-| 04 | E2E & CI | Pending |
+| 04 | E2E & CI | **Complete** |
 
 ## Completed Milestones
 
 | Version | Name | Completed | Archive |
 |---------|------|-----------|---------|
 | v1 | Backend Testing | 2026-01-24 | [v1-backend-testing.md](milestones/v1-backend-testing.md) |
+| v2 | Frontend Testing | 2026-01-25 | (pending archive) |
 
 ## Accumulated Decisions
 
@@ -43,6 +44,8 @@ Progress: [#######---] 75%
 | Observable behavior testing | Focus on what renders, clicks, API calls not implementation | 2026-01-25 |
 | apiCallLog for API verification | Track API calls in MSW handlers for integration test assertions | 2026-01-25 |
 | Button finding via textContent | More reliable than getByRole for buttons with similar names | 2026-01-25 |
+| WebSocket mocking via routeWebSocket | Required to bypass blocking "Connecting to Backend" overlay | 2026-01-25 |
+| Dedicated port 5174 for E2E | Avoids conflict with other dev servers on 5173 | 2026-01-25 |
 
 ## Blockers/Concerns
 
@@ -51,8 +54,8 @@ None currently.
 ## Session Continuity
 
 Last session: 2026-01-25
-Stopped at: Completed 03-01-PLAN.md (Integration Tests)
-Resume file: .planning/phases/04-e2e-ci/04-01-PLAN.md (when created)
+Stopped at: Completed 04-01-PLAN.md (E2E & CI)
+Resume file: None - milestone complete
 
 ## Test Summary
 
@@ -60,4 +63,15 @@ Resume file: .planning/phases/04-e2e-ci/04-01-PLAN.md (when created)
 |----------|-------|
 | Component tests | 42 |
 | Integration tests | 22 |
-| **Total frontend tests** | **64** |
+| E2E tests | 13 |
+| **Total frontend tests** | **77** |
+| Backend tests | 17 |
+| **Grand total** | **94** |
+
+## CI Coverage
+
+GitHub Actions workflow runs:
+- Backend: pytest with coverage
+- Backend: Ruff linting
+- Frontend: Vitest unit/integration tests
+- Frontend: Playwright E2E tests

.planning/phases/04-e2e-ci/04-01-SUMMARY.md

@@ -0,0 +1,131 @@
+# Phase 04 Plan 01: E2E Tests and GitHub Actions Integration Summary
+
+**One-liner:** Playwright E2E tests with WebSocket mocking for critical user journeys, plus GitHub Actions CI integration for frontend tests.
+
+## Completed Work
+
+### Tasks Completed
+
+| Task | Description | Commit | Files |
+|------|-------------|--------|-------|
+| 1.1 | Playwright API mock utilities | ddc463c | e2e/mocks/api.ts |
+| 2.1 | Pattern flow E2E tests | dd4baaf | e2e/pattern-flow.spec.ts |
+| 2.2 | Playlist flow E2E tests | 647cb08 | e2e/playlist-flow.spec.ts |
+| 2.3 | Table control E2E tests | 8406243 | e2e/table-control.spec.ts |
+| 3.1 | Update sample spec | 449034a | e2e/sample.spec.ts |
+| 4.1 | Extend CI workflow | 9207135 | .github/workflows/test.yml |
+| 5.1-5.2 | Test fixes and verification | fa94d6a | api.ts, playwright.config.ts, tests |
+
+### Test Counts
+
+| Category | Tests |
+|----------|-------|
+| App infrastructure (sample.spec.ts) | 3 |
+| Pattern flow (pattern-flow.spec.ts) | 4 |
+| Playlist flow (playlist-flow.spec.ts) | 3 |
+| Table control (table-control.spec.ts) | 3 |
+| **Total E2E tests** | **13** |
+| Component tests (Phase 02) | 42 |
+| Integration tests (Phase 03) | 22 |
+| **Total frontend tests** | **77** |
+
+### Key Files Created/Modified
+
+**Created:**
+- `frontend/e2e/mocks/api.ts` - Playwright route mocking with WebSocket support
+- `frontend/e2e/pattern-flow.spec.ts` - Pattern browsing and execution E2E tests
+- `frontend/e2e/playlist-flow.spec.ts` - Playlist viewing and execution E2E tests
+- `frontend/e2e/table-control.spec.ts` - Table control page E2E tests
+
+**Modified:**
+- `frontend/e2e/sample.spec.ts` - Updated with meaningful infrastructure tests
+- `frontend/playwright.config.ts` - Added dedicated E2E port (5174) to avoid conflicts
+- `.github/workflows/test.yml` - Added frontend-test and frontend-e2e jobs
+
+## Technical Decisions
+
+| Decision | Rationale |
+|----------|-----------|
+| WebSocket mocking via routeWebSocket() | Required to bypass blocking "Connecting to Backend" overlay |
+| Dedicated port 5174 for E2E | Avoids conflict with other dev servers running on 5173 |
+| Playwright route interception | More reliable than MSW for E2E (MSW requires service worker in browser) |
+| Button locators by title/exact name | Avoids strict mode violations with multiple similar buttons |
+
+## Deviations from Plan
+
+### Auto-fixed Issues
+
+**1. [Rule 3 - Blocking] WebSocket connection blocks UI**
+- **Found during:** Task 5.1 verification
+- **Issue:** App shows blocking overlay until WebSocket /ws/status connects
+- **Fix:** Added `page.routeWebSocket()` mocking for all WebSocket endpoints
+- **Files modified:** e2e/mocks/api.ts
+- **Commit:** fa94d6a
+
+**2. [Rule 3 - Blocking] Port conflict with other dev server**
+- **Found during:** Task 5.1 verification
+- **Issue:** Port 5173 already in use by another project (Image2Dune)
+- **Fix:** Changed Playwright config to use dedicated port 5174
+- **Files modified:** playwright.config.ts
+- **Commit:** fa94d6a
+
+**3. [Rule 1 - Bug] Run playlist API field name mismatch**
+- **Found during:** Task 5.1 verification
+- **Issue:** Mock expected `name` but actual API sends `playlist_name`
+- **Fix:** Updated mock to accept both field names
+- **Files modified:** e2e/mocks/api.ts
+- **Commit:** fa94d6a
+
+## Requirements Addressed
+
+- [x] **E2E-1:** Critical user journey - browse -> play pattern -> verify UI updates
+- [x] **INF-5:** GitHub Actions workflow extended to run frontend tests alongside backend
+- [x] 3+ E2E tests (milestone target: 3+, actual: 13)
+- [x] CI: `npm test` runs Vitest tests in GitHub Actions
+- [x] CI: `npm run test:e2e` runs Playwright tests in GitHub Actions
+- [x] CI: Frontend tests configured with appropriate timeout (< 10 minutes)
+
+## CI Workflow Summary
+
+The `.github/workflows/test.yml` now includes:
+
+| Job | Description | Timeout |
+|-----|-------------|---------|
+| test | Backend Python tests with pytest | default |
+| lint | Backend Python linting with Ruff | default |
+| frontend-test | Vitest unit/integration tests | default |
+| frontend-e2e | Playwright E2E tests (Chromium) | 10 minutes |
+
+Features:
+- Node.js 20 with npm caching
+- Playwright browsers installed in CI
+- Report artifacts uploaded on failure
+- Triggered on push to main/feature/*, PRs to main
+- Includes `frontend/**` in path triggers
+
+## Next Phase Readiness
+
+Phase 04 is complete. This completes the v2-frontend-testing milestone.
+
+**Milestone Summary:**
+- Phase 01: Test infrastructure (Vitest, RTL, MSW, Playwright)
+- Phase 02: Component tests (42 tests)
+- Phase 03: Integration tests (22 tests)
+- Phase 04: E2E tests and CI (13 E2E tests, CI workflow)
+
+**Total Test Coverage:**
+- Backend: 17 tests (from v1)
+- Frontend: 77 tests (64 Vitest + 13 Playwright)
+- **Grand total: 94 tests**
+
+## Metrics
+
+| Metric | Value |
+|--------|-------|
+| Start time | 2026-01-25T14:43:03Z |
+| End time | 2026-01-25T14:52:00Z |
+| Duration | ~9 minutes |
+| Tasks completed | 7/7 |
+| E2E tests added | 13 |
+| Files created | 5 |
+| Files modified | 3 |