Feature/320 321 322 323 security ci improvements

[Barbieple-Devstem]

Security Enhancements & CI/CD Infrastructure Improvements

Closes #320
Closes #321
Closes #322
Closes #323

Overview

This PR implements four critical infrastructure and security improvements to strengthen the vortex-frontend codebase and CI/CD pipeline. These changes
enhance code ownership enforcement, supply-chain security, bundle analysis visibility, and visual regression testing capabilities.

Changes Implemented

1. Code Ownership & Review Enforcement (#320)

What Changed:

• ✅ Created .github/CODEOWNERS file mapping code paths to maintainers
• ✅ Protected critical areas requiring explicit review:
  • Wallet storage (src/store/wallet.ts) - Session state management
  • API logic (src/lib/api.ts) - External communication
  • Swap functionality hooks (src/hooks/useSwap*, src/hooks/swap*)
  • Solver registration (src/lib/solver*, src/hooks/useSolver*)
  • CI/CD workflows (.github/workflows/)
  • Security documentation and CODEOWNERS itself

Why It Matters:

• Prevents unauthorized changes to sensitive code paths
• Ensures all PRs touching wallet or API logic get expert review
• Provides automated reviewer assignment based on changed files

Files Changed:

• .github/CODEOWNERS (new)
• README.md - Added documentation section

---

2. Bundle Analysis Visualization (#321)

What Changed:

• ✅ Installed @next/bundle-analyzer package (v16.3.3+)
• ✅ Integrated bundle analyzer with ANALYZE=true environment flag in next.config.mjs
• ✅ Added CI step to build with analysis enabled, generating interactive treemap reports
• ✅ Reports uploaded as CI artifacts with 30-day retention for easy review
• ✅ Added .next-analyze/ to .gitignore

Usage:

# Local development:
ANALYZE=true npm run build

# CI automatically generates and uploads reports

Why It Matters:
- Provides interactive treemap visualization of bundle contents
- Helps reviewers identify size regressions in PRs (not just total byte count)
- Enables data-driven decisions about dependency additions
- CI artifacts make historical analysis possible

Files Changed:
- next.config.mjs - Integrated bundle analyzer
- .github/workflows/ci.yml - Added analysis build step
- .gitignore - Exclude generated analysis output
- README.md - Bundle analysis documentation
- package.json, package-lock.json - New dependency

---

3. GitHub Actions Security Hardening (#322)

What Changed:
- ✅ Replaced all mutable action version tags with immutable commit SHAs:
  - actions/checkout@v4 → 11d5960a326750d5838078e36cf38b85af677262
  - actions/setup-node@v4 → 49933ea5288caeca8642d1e84afbd3f7d6820020
  - actions/upload-artifact@v4 → ea165f8d65b6e75b540449e92b4886f43607fa02
- ✅ Included version tag comments for human readability
- ✅ Added minimally-scoped permissions block at workflow and job levels:
  - contents: read - Read repository contents
  - checks: write - Write test results
- ✅ Verified Dependabot configuration maintains SHA pin updates

Why It Matters:
- Prevents supply-chain attacks where action publishers compromise releases
- Immutable commit SHAs guarantee exact action code being executed
- Dependabot automatically updates SHAs to latest stable versions
- Least-privilege permissions reduce blast radius if action is compromised

Files Changed:
- .github/workflows/ci.yml - Pinned action SHAs, added permissions
- README.md - Security practices documentation

Dependabot Configuration:
Existing .github/dependabot.yml already handles github-actions ecosystem with weekly updates, so SHA pins will be automatically maintained.

---

4. Visual Regression Testing Gate (#323)

What Changed:

- ✅ Installed @storybook/test-runner for component visual regression testing
- ✅ Added npm scripts:
  - storybook - Start Storybook dev server on http://localhost:6006
  - build:storybook - Build static Storybook site for testing
- ✅ Created playwright.config.storybook.ts for visual regression configuration
- ✅ CI workflow now:
  - Builds Storybook
  - Runs visual regression tests
  - Uploads reports as artifacts (30-day retention)
- ✅ Created baseline screenshot directory (.storybook/playwright/)
- ✅ Added blob-report/ to .gitignore
- ✅ Comprehensive documentation on baseline management

Usage:

# Local development:
npm run storybook          # Start dev server
npm run build:storybook    # Build static site
npm run test:visual        # Run visual regression tests

# Update baselines (after intentional style changes):
npm run build:storybook
npm run test:visual -- --update

Why It Matters:
- Catches unintended CSS/visual changes before they reach production
- Runs tests in consistent CI environment to avoid font-rendering discrepancies
- Prevents regressions in existing components when refactoring styles
- Catches responsive design breaks across screen sizes
- Test stories are generated from existing .stories.tsx files

Files Changed:
- package.json, package-lock.json - New devDependency
- .github/workflows/ci.yml - Added Storybook build and visual test steps
- .gitignore - Exclude test reports and artifacts
- playwright.config.storybook.ts (new) - Visual regression test configuration
- .storybook/playwright/ (new) - Baseline screenshots directory
- README.md - Visual regression testing documentation

---

Testing & Verification

Local Testing:

# Code ownership (automatic on PR)
# - Verify CODEOWNERS file is applied to sensitive path changes

# Bundle analysis:
ANALYZE=true npm run build
# Check .next-analyze/ for interactive treemap

# Visual regression:
npm run storybook          # In one terminal
npm run build:storybook    # In another
npm run test:visual        # Run tests

# GitHub Actions (verify workflow pins):
cat .github/workflows/ci.yml | grep "uses:"

CI Verification:

- ✅ Bundle analysis artifacts uploaded on each build
- ✅ Visual regression test reports generated
- ✅ All workflow permissions are minimal and explicit
- ✅ Action SHAs are pinned and Dependabot-maintained

---

Breaking Changes

None - All changes are backward compatible and non-breaking:
- CODEOWNERS is additive (doesn't break existing workflows)
- Bundle analysis is opt-in via environment flag
- Action SHA pins don't change behavior
- Visual regression tests run in separate CI step (doesn't block main tests initially)

---

Dependencies Added

- @next/bundle-analyzer@^16.3.3 - Bundle visualization
- @storybook/test-runner@* - Visual regression testing

Configuration Files

- .github/CODEOWNERS - Code ownership mapping (new)
- playwright.config.storybook.ts - Visual regression test configuration (new)
- .storybook/playwright/ - Baseline screenshots directory (new)

---

Checklist

- [x] CODEOWNERS file created and protects critical paths
- [x] Bundle analyzer integrated with ANALYZE flag
- [x] CI step generates and uploads bundle analysis reports
- [x] GitHub Actions pinned to immutable commit SHAs
- [x] Workflow permissions minimally scoped
- [x] Dependabot configuration verified for SHA updates
- [x] Storybook test-runner installed and configured
- [x] Visual regression tests run in CI pipeline
- [x] Test baselines directory created
- [x] All changes documented in README
- [x] .gitignore updated for generated files

---

Related Issues

Closes #320
Closes #321
Closes #322
Closes #323

---

[drips-wave]

@Barbieple-Devstem Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits