Vue hydration silently drops class attribute updates when SSR and client
render different branches of a v-if chain — per the project's Auth SSR
Pattern, useAuth is client-only and server always renders unauthenticated,
so PageHeader (v-else branch) was rendering inside a leftover .loading /
.loading-state div from the v-else-if branch. On mobile that div was
being masked by the visual-test commonMasks (.loading-state), producing
a large fuchsia block in the snapshot.
Wrapping the v-if/v-else-if/v-else chain in <ClientOnly> ensures the
server renders nothing for the auth-gated content and the client performs
a clean first render, matching the pattern already used in dashboard.vue.
Also update admin-dashboard-desktop for minor anti-aliasing drift.
Wrap members directory page in PageShell. Also expand visual mask
selectors to cover .filter-bar, .skills-bar, and .connections-section
because filter content varies based on dynamic tag/topic state and
async fetch ordering. Rebaselines several existing snapshots that now
mask wider regions but capture the same structural layout.
Replace outer div.connections-page wrapper and explicit PageHeader with
PageShell component. Update connections-mobile-auth snapshot to match
the stable full-suite render state (filter bar absent when test admin
has no cooperative topics configured).
Add PLAYWRIGHT_PORT env var to playwright.config.js so a worktree can run
its own dev server on a different port without disrupting the main dev
server. Rebaseline connections-mobile-auth which had drifted from the
suggestions data state captured during Phase 1.
Add about to authenticatedMobilePages to capture an authenticated baseline
needed for regression detection during the Phase 3.5 about.vue migration.
Rename all auth-mobile snapshots from *-mobile to *-mobile-auth to avoid
name collision with the public loop's about-mobile snapshot.
Adds 13 new visual regression baselines:
- Public: about (desktop + mobile), members (desktop + mobile)
- Authenticated desktop: member-account, member-activity, connections,
admin-dashboard, members-detail
- Authenticated mobile: member-dashboard, member-profile,
member-account, connections
Switches to a single serial test.describe with a beforeAll that logs in
once and saves the auth cookie via storageState. This avoids repeated
/api/dev/test-login calls that exhausted the dev server's MongoDB
connections under parallel execution.
Masks added: .tl-time, .stat-val, .item-date, .mc-avatar, .cc-avatar,
.profile-avatar, .filter-count — covering activity timestamps, stat
values, member join dates, avatars, and member counts.
- Add `middleware: 'auth'` to member/profile.vue (was missing)
- Harden loginAsAdmin helper to wait for networkidle after redirect so
auth-init plugin and admin middleware finish before tests navigate
- Regenerate visual baselines to reflect updated profile page UI
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add aria-labels to form controls (selects, checkboxes, switches), set
html lang attribute and page title, fix color contrast for --candle-dim
and --text-faint tokens, underline inline links, remove opacity hack.
Harden dev login endpoints with atomic findOneAndUpdate and tokenVersion
in JWT. Update Playwright timeouts and E2E test helpers.
