Feature/320 321 322 323 security ci improvements

.github/CODEOWNERS

@@ -0,0 +1,32 @@
+# CODEOWNERS file for vortex-frontend
+# This file assigns review responsibilities based on code paths
+# See: https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners
+
+# Default owners for everything in the repository
+* @Barbieple-Devstem
+
+# Critical paths requiring explicit review
+
+# Wallet storage and state management
+/src/store/wallet.ts @Barbieple-Devstem
+/src/store/wallet.test.ts @Barbieple-Devstem
+
+# API logic and external communication
+/src/lib/api.ts @Barbieple-Devstem
+/src/lib/api.test.ts @Barbieple-Devstem
+
+# Swap functionality and hooks
+/src/hooks/useSwap* @Barbieple-Devstem
+/src/hooks/swap* @Barbieple-Devstem
+
+# Solver registration and related logic
+/src/lib/solver* @Barbieple-Devstem
+/src/hooks/useSolver* @Barbieple-Devstem
+
+# Workflows and CI/CD configuration
+/.github/workflows/ @Barbieple-Devstem
+/.github/dependabot.yml @Barbieple-Devstem
+
+# Security and documentation
+/docs/SECURITY.md @Barbieple-Devstem
+/.github/CODEOWNERS @Barbieple-Devstem

.github/workflows/ci.yml

@@ -11,13 +11,20 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
+permissions:
+  contents: read
+  checks: write
+
 jobs:
   frontend:
     name: Frontend (Next.js)
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      checks: write
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
+      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
         with:
           node-version: 20
           cache: 'npm'
@@ -26,9 +33,29 @@ jobs:
       - run: npm run lint
       - run: npm test
       - run: npm run test:coverage
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
         with:
           name: coverage-report
           path: coverage/
       - run: npm run build
       - run: node scripts/check-bundle-size.mjs
+      - name: Build with bundle analysis
+        run: npm run build
+        env:
+          ANALYZE: true
+      - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        if: always()
+        with:
+          name: bundle-analysis-report
+          path: .next-analyze/
+          retention-days: 30
+      - name: Build Storybook
+        run: npm run build:storybook
+      - name: Run visual regression tests
+        run: npm run test:visual
+      - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        if: always()
+        with:
+          name: visual-regression-report
+          path: blob-report/
+          retention-days: 30

.gitignore

@@ -5,6 +5,7 @@ node_modules/
 
 # Next.js / build output
 .next/
+.next-analyze/
 out/
 build/
 storybook-static/
@@ -30,4 +31,5 @@ npm-debug.log*
 # Test / coverage
 coverage/
 playwright-report/
+blob-report/
 test-results/

.storybook/playwright/README.md

@@ -0,0 +1,51 @@
+# Visual Regression Test Baselines
+
+This directory contains baseline screenshots used for visual regression testing via Playwright and the Storybook test-runner.
+
+## Files
+
+- `*.spec.ts` - Generated test files for Storybook stories
+- `__screenshots__/` - Baseline screenshots for comparison (auto-generated and committed)
+
+## Managing Baselines
+
+### Updating Baseline Images
+
+When you intentionally change component styles or add new stories:
+
+```bash
+npm run build:storybook
+npm run test:visual -- --update
+```
+
+This updates the baseline images. Always review the changes in git before committing:
+
+```bash
+git diff .storybook/playwright/
+```
+
+### Regenerating All Baselines
+
+If you encounter font rendering differences between local and CI environments, regenerate baselines in the CI environment:
+
+1. Run visual tests in CI (GitHub Actions)
+2. Download the visual regression report artifact
+3. If baselines need updating, this is done automatically in CI to ensure consistent font rendering
+
+## CI Integration
+
+- Baselines are generated in the CI environment to avoid font-rendering discrepancies
+- Visual regression tests run on every build (push and PR)
+- Test failures are reported and block merging until resolved
+- Visual regression reports are uploaded as CI artifacts for review
+
+## Troubleshooting
+
+**Test failures after environment changes:**
+- Font rendering may differ between systems
+- Regenerate baselines in the CI environment for authoritative results
+- Review visual diffs in the test report before updating
+
+**New stories added:**
+- Build Storybook, run visual tests, and update baselines
+- Commit baseline images with your story changes

README.md

@@ -69,6 +69,51 @@ npm run dev    # http://localhost:3000
 | `npm run lint` | `next lint` |
 | `npm test` | Run the Vitest suite |
 
+### Bundle Analysis
+
+To generate a visual breakdown of the production bundle, build with the `ANALYZE=true` flag:
+
+```bash
+ANALYZE=true npm run build
+```
+
+This generates an interactive treemap visualization in `.next-analyze/` showing what modules contribute to bundle size. Open `client.html` in your browser to explore the breakdown.
+
+The CI pipeline automatically generates and uploads bundle analysis reports on every build as a downloadable artifact, making it easy to spot size regressions in pull requests.
+
+### Visual Regression Testing
+
+Storybook components are tested for visual regressions using Playwright. This catches unintended CSS changes that might break component appearance.
+
+**Run locally:**
+
+```bash
+npm run storybook      # Start Storybook dev server on http://localhost:6006
+npm run build:storybook # Build Storybook static site
+npm run test:visual    # Run visual regression tests
+```
+
+**Workflow:**
+
+1. Tests run against the built Storybook (`storybook-static/`)
+2. Playwright captures screenshots of all story variants
+3. Screenshots are compared against baseline images
+4. Differences are reported as test failures
+5. CI artifacts include a visual regression report with diffs
+
+**First time setup / Updating baselines:**
+
+When adding new stories or intentionally changing component styles, update the baseline snapshots:
+
+```bash
+npm run build:storybook
+npm run test:visual -- --update
+```
+
+Commit the updated baseline images in `.storybook/playwright/` so future runs have a reference point.
+
+The CI pipeline runs visual regression tests on every build, preventing CSS regressions from reaching production.
+
 ## Troubleshooting
 
 ### Freighter not detected
@@ -106,6 +151,18 @@ npm run dev    # http://localhost:3000
 
 ## Contributing
 
+### Code Ownership & Review Requirements
+
+This repository uses a [CODEOWNERS](./.github/CODEOWNERS) file to automatically assign reviewers based on the paths changed in a pull request. Critical areas like wallet storage (`src/store/wallet.ts`), API logic (`src/lib/api.ts`), solver registration, and CI/CD workflows require approval from designated maintainers before merging.
+
+For more details, see the [CODEOWNERS](./.github/CODEOWNERS) file.
+
+### Security Practices
+
+- **Pinned Actions**: All GitHub Actions used in CI/CD workflows are pinned to specific commit SHAs (not mutable version tags) to prevent supply-chain attacks. Version comments are included for readability.
+- **Dependabot**: Automatically maintains SHA pins via weekly GitHub Actions updates. Review and merge Dependabot PRs to stay current with security patches.
+- **Minimal Permissions**: Workflows declare only the minimum required permissions (`contents: read`, `checks: write`) following the principle of least privilege.
+
 ### Issue Complexity Labels
 
 Issues on the Wave tracker use the following complexity labels with corresponding point values to help contributors find tasks that match their availability:

next.config.mjs

@@ -1,3 +1,10 @@
+import bundleAnalyzer from "@next/bundle-analyzer";
+
+const withBundleAnalyzer = bundleAnalyzer({
+  enabled: process.env.ANALYZE === "true",
+  outputDir: ".next-analyze",
+});
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -10,4 +17,4 @@ const nextConfig = {
   },
 };
 
-export default nextConfig;
+export default withBundleAnalyzer(nextConfig);