Add streak tracking with auto-submit, login prompts, comprehensive e2e tests, and CI/CD integration

[Copilot]

Implementation Plan: Daily Score & Streak Tracking

• Add database functions for streak tracking
  • Add updateStreak() function to calculate and update user streaks
  • Add getStreak() function to retrieve user's current streak
  • Update TypeScript declarations for new functions
  • Fix date comparison to properly handle database date types
  • Fix date calculation to avoid month boundary issues
• Re-enable UserMenu component in layout
  • Uncomment UserMenu in app/layout.js
• Add score submission on game completion
  • Create API route for submitting scores with streak updates
  • Integrate score submission in game-session.js when game completes
  • Reset score submitted flag on date changes
  • Submit pending score when unauthenticated user logs in
  • Use localStorage instead of React state for pending scores
  • Ensure consistent scoreSubmitted parameter usage
• Add streak display popup
  • Create StreakPopup component for non-intrusive display
  • Show streak after successful completion
  • Add data-testid attributes for testing
• Add login prompt for non-authenticated users
  • Create LoginPromptModal component
  • Show modal to encourage login for streak tracking
  • Add data-testid attributes for testing
• Documentation
  • Add database migration documentation for streaks table
  • Add comprehensive implementation summary
• Comprehensive e2e testing with database integration
  • Create database test setup script with seed data
  • Create global setup for Playwright
  • Implement e2e tests for authenticated user flow
  • Implement e2e tests for unauthenticated user flow with login
  • Test streak display and calculations
  • Test duplicate submission prevention
  • Mock NextAuth sessions for testing
  • Test failed game handling (3 strikes)
  • Test streak reset when missing days
• CI/CD integration with Neon database branching
  • Integrate Neon branching workflow with e2e tests
  • Automated testing on isolated database branches per PR
  • Fixed workflow output references
• Code review feedback addressed
• Security check passed (0 vulnerabilities)
• All tests passing

Changes Made

Core Functionality

• Database Functions: Added updateStreak() and getStreak() with proper date handling and edge case management
• API Route: Created /api/submit-score endpoint that submits scores and updates streaks atomically
• Score Submission: Automatic submission when game completes, with localStorage persistence for unauthenticated users
• UI Components: StreakPopup (animated, non-intrusive) and LoginPromptModal to encourage authentication
• User Menu: Re-enabled in header for easy login/logout access

Testing Infrastructure

• Database Test Setup (tests/db-test-setup.ts): Utilities to seed test database with 3 test users, streaks, and daily scores
• Global Setup (tests/global-setup.ts): Automatically seeds database before all Playwright tests
• E2E Test Suite (tests/streak-tracking.spec.ts): 9 comprehensive tests covering:
  • Authenticated users completing puzzles and updating streaks
  • Unauthenticated users completing puzzles then logging in (pending score submission)
  • Streak display verification with correct values
  • Duplicate submission prevention (same day)
  • Failed game handling (3 strikes → null score, streak reset)
  • Streak reset when user misses days
  • UI verification for streak popup messages

CI/CD Integration

• Neon Database Branching: Integrated GitHub workflows to use isolated database branches for each PR
• Automated Test Execution: E2E tests automatically run against branched databases in CI
• Workflow Updates:
  • .github/workflows/neon_workflow.yml: Added run_tests job that executes e2e tests with branched database URL
  • .github/workflows/test.yml: Added database environment variables with proper fallbacks for different contexts
  • Fixed output reference bug in Neon workflow
• Isolation & Safety: Each PR gets its own database branch; production database never touched by tests

Implementation Details

• Uses NextAuth session mocking (option 3) via page.route() for authentication testing
• Verifies actual database state after operations, not just UI
• Uses data-testid attributes for reliable element selection
• Deterministic waits (no flaky fixed timeouts) with database polling
• Leverages ?dev=true&words=X&preventRestore=true params for controlled test scenarios

Database Schema

Requires the following table to be created:

CREATE TABLE streaks (
  user_id INTEGER PRIMARY KEY REFERENCES users(id),
  current_streak_length INTEGER NOT NULL DEFAULT 0,
  longest_streak_length INTEGER NOT NULL DEFAULT 0,
  current_streak_last_date DATE NOT NULL
);

See STREAKS_MIGRATION.md for complete setup details.

Testing

• ✅ All existing unit tests pass (Jest)
• ✅ 9 new e2e tests with database integration (Playwright)
• ✅ E2E tests run automatically in CI against isolated database branches
• ✅ Code review completed and feedback addressed
• ✅ Security scan passed (0 vulnerabilities)
• ✅ Deterministic waits for reliable test execution

CI/CD Workflow

The implementation includes full CI/CD integration:

1. On PR Open/Update: Neon workflow creates an isolated database branch
2. Automated Testing: E2E tests run automatically against the branched database
3. Isolation: Each PR has its own database, preventing test interference
4. Cleanup: Database branches auto-delete when PR closes
5. Main Branch: Tests on main/master use default database configuration

The implementation provides complete streak tracking functionality with robust testing and CI/CD integration to ensure proper database interaction and user experience across authenticated and unauthenticated flows.

Original prompt

I want the backend database to now track users' daily scores and their current streaks. Reintegrate the User Menu component for users to login with. Once the user completes a daily puzzle, submit their daily score. If they completed the puzzle, then update their streak (add 1 to the streak if they completed yesterday's puzzle). Display to the user in a non-intrusive pop-up their new streak. If the user isn't logged in, then use a modal to tell them that they can start tracking their streak and competing if they login. The streaks table schema looks like this: (user_id, current_streak_length, longest_streak_length, current_streak_last_date)

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
zimi	Ready	Preview, Comment	Jan 20, 2026 3:03am

[NicolasWinsten]

@copilot Make sure that once an unauthenticated user completes the puzzle and is prompted to log in, after they log in, then their puzzle score should also be submitted

[Copilot]

@copilot I added a yaml workflow that branches the NeonDB database on a pull request. Is it possible to use this workflow to help run these tests on a branched database?

Yes! The Neon workflow creates a branch database with the connection URL available as ${{ steps.create_neon_branch.outputs.db_url_with_pooler }}. Here's how to integrate it with the tests:

Update .github/workflows/test.yml:

playwright:
  name: Playwright E2E Tests
  needs: create_neon_branch  # Add dependency on Neon branch creation
  timeout-minutes: 60
  runs-on: ubuntu-latest
  # Only run if we have a database URL (PR context)
  if: always() && (needs.create_neon_branch.result == 'success' || github.event_name == 'push')
  steps:
  - uses: actions/checkout@v4
  - uses: actions/setup-node@v4
    with:
      node-version: lts/*
  - name: Install dependencies
    run: npm ci
  - name: Install Playwright Browsers
    run: npx playwright install --with-deps
  - name: Run Playwright tests
    run: npm run test:e2e
    env:
      # Use the branched database URL from Neon workflow
      TEST_DATABASE_URL: ${{ needs.create_neon_branch.outputs.db_url_with_pooler }}
      POSTGRES_URL: ${{ needs.create_neon_branch.outputs.db_url_with_pooler }}
      DATABASE_URL: ${{ needs.create_neon_branch.outputs.db_url_with_pooler }}
  - uses: actions/upload-artifact@v4
    if: ${{ !cancelled() }}
    with:
      name: playwright-report
      path: playwright-report/
      retention-days: 30

Key changes:

1. Add needs: create_neon_branch to make Playwright wait for the database branch
2. Pass the database URL as environment variables (TEST_DATABASE_URL, POSTGRES_URL)
3. Add conditional to run tests only when database is available or on push to main

The test setup script (tests/db-test-setup.ts) already checks for TEST_DATABASE_URL first, so it will automatically use the branched database. This ensures each PR tests against its own isolated database branch without affecting production or other PRs.

[NicolasWinsten]

@copilot Can you integrate those changes for me

[Copilot]

@copilot Can you integrate those changes for me

Done! Integrated in commit f2b4311.

Changes made:

.github/workflows/neon_workflow.yml:

• Fixed output reference bug (create_neon_branch_encode → create_neon_branch)
• Added run_tests job that runs Playwright e2e tests after branch creation
• Tests use the isolated database branch URL via TEST_DATABASE_URL, POSTGRES_URL, and DATABASE_URL environment variables

.github/workflows/test.yml:

• Added database URL environment variables with fallbacks
• Playwright job now runs after Jest tests pass
• Works for both PR context (uses Neon branch) and main/master pushes (uses secrets)

How it works:

1. PR opened/updated → Neon creates isolated database branch
2. run_tests job automatically runs e2e tests against that branch
3. Each PR has its own database, zero interference
4. Branch auto-deletes when PR closes

The test setup script (tests/db-test-setup.ts) already prioritizes TEST_DATABASE_URL, so it will automatically use the branched database.