Skip to main content

Source: ocean/docs/AUTOMATION_TOOLS.md | ✏️ Edit on GitHub

Automation Tools Reference

Quick Reference: Complete automation suite for development, testing, deployment, and monitoring.

Development Setup​

One-Command Setup​

pnpm run setup:ocean

What it does:

  • ✅ Installs dependencies
  • ✅ Starts Supabase local
  • ✅ Applies database migrations
  • ✅ Generates TypeScript types
  • ✅ Runs validation checks
  • ✅ Creates .env.local if missing

Time: <5 minutes for complete setup

Manual Setup Steps​

# If you need individual steps
pnpm install
supabase start
supabase db reset --no-seed
pnpm run codegen:all
pnpm run validate

Code Quality & Validation​

Pre-commit Validation​

pnpm run validate        # TypeScript + ESLint
pnpm run typecheck       # TypeScript only
pnpm run lint            # ESLint only
pnpm run format          # Prettier formatting

Code Generation​

# Generate all types
pnpm run codegen:all

# Individual generation
pnpm run codegen:database    # Supabase types
pnpm run codegen:graphql     # GraphQL types
pnpm run codegen:schema      # Schema files

Auto-runs on:

  • Pre-build hooks
  • Development server start
  • CI/CD pipeline

Testing​

Unit & Integration Tests​

pnpm test                    # Run all pre-commit tests
pnpm run test:watch          # Watch mode
pnpm run test:ci             # With coverage

E2E Testing (Browserbase)​

pnpm run test:e2e            # Run E2E tests
pnpm run test:e2e:ui         # With UI dashboard

Environment variables needed:

BROWSERBASE_API_KEY=your_key_here
BROWSERBASE_PROJECT_ID=your_project_id

Test Structure​

tests/
├── pre-commit/          # Unit tests (fast)
├── integration/         # Integration tests
└── e2e/                # End-to-end tests (Browserbase)
    └── auth-flow.test.ts

Performance Monitoring​

Bundle Analysis​

pnpm run analyze:bundle      # Generate bundle report
pnpm run analyze:bundle:ci   # CI-friendly version

Output: .bundle-stats/latest-report.md

Performance Regression Testing​

pnpm run perf:check          # Check for regressions

Configuration via environment:

PERF_TOTAL_SIZE_THRESHOLD=10        # 10% increase max
PERF_GZIPPED_SIZE_THRESHOLD=10      # 10% increase max
PERF_JS_SIZE_THRESHOLD=15           # 15% increase max
PERF_CSS_SIZE_THRESHOLD=20          # 20% increase max
PERF_CHUNK_SIZE_THRESHOLD=25        # 25% increase max

CI Integration: Automatically blocks PRs on regression

Security & Monitoring​

Secret Rotation Monitoring​

pnpm run security:check      # Check secret expiry

Configuration: .secrets-config.json

{
  "secrets": [
    {
      "name": "Supabase API Keys",
      "rotation_interval_days": 90,
      "last_rotated": "2024-08-01",
      "severity": "high"
    }
  ]
}

Automated monitoring: Weekly GitHub workflow creates issues for expiring secrets

Production Health Monitoring​

pnpm run health:check        # Check production health

Monitors:

  • ✅ Frontend availability
  • ✅ API health endpoints
  • ✅ GraphQL functionality
  • ✅ SSL certificate status
  • ✅ Response times
  • ✅ CDN performance

Deployment & Operations​

Emergency Rollback​

pnpm run rollback:prod       # Interactive rollback

Safety features:

  • Shows last 10 deployments
  • Requires double confirmation
  • Opens browser for verification

Changelog Generation​

pnpm run changelog:generate --tag v1.2.0

Features:

  • Conventional commit parsing
  • Automatic categorization
  • Markdown formatting
  • Updates CHANGELOG.md

CI/CD Pipeline​

PR Validation (.github/workflows/validate-pr.yml)​

Staging Deployment (.github/workflows/deploy-staging.yml)​

Security Monitoring (.github/workflows/security-check.yml)​

Dependency Management​

Dependabot Configuration​

# .github/dependabot.yml
version: 2
updates:
  - package-ecosystem: 'npm'
    directory: '/'
    schedule:
      interval: 'weekly'
    open-pull-requests-limit: 5

Automatic updates:

  • Weekly dependency updates
  • Daily security updates
  • Auto-assignment to maintainers
  • Proper labeling and commit messages

Environment Configuration​

Required Environment Variables​

Development​

# .env.local
VITE_SUPABASE_URL=http://127.0.0.1:54321
VITE_SUPABASE_PUBLISHABLE_KEY=your_anon_key
VITE_STRIPE_PUBLISHABLE_KEY=pk_test_...
VITE_POSTHOG_KEY=your_posthog_key

Production​

# Vercel Environment Variables
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=eyJ...
VITE_STRIPE_PUBLISHABLE_KEY=pk_live_...
SUPABASE_SERVICE_ROLE_KEY=eyJ...
STRIPE_SECRET_KEY=sk_live_...

CI/CD​

# GitHub Secrets
VITE_SUPABASE_URL=...
VITE_SUPABASE_PUBLISHABLE_KEY=...
BROWSERBASE_API_KEY=...
BROWSERBASE_PROJECT_ID=...
GITHUB_TOKEN=...

Development Workflows​

New Feature Development​

Hotfix Workflow​

Troubleshooting​

Common Issues​

TypeScript Errors​

# Fix: Regenerate types
pnpm run codegen:all
pnpm run typecheck

Build Failures​

# Check validation
pnpm run validate

# Clean build
rm -rf dist/ .vite/
pnpm run build

Test Failures​

# Run individual test suites
pnpm run test:unit
pnpm run test:integration
pnpm run test:e2e

Performance Regression​

# Check bundle analysis
pnpm run analyze:bundle

# Check specific thresholds
PERF_TOTAL_SIZE_THRESHOLD=5 pnpm run perf:check

Supabase Issues​

# Reset local database
supabase db reset --no-seed

# Check migration status
supabase migration list

# View logs
supabase functions logs

Debug Commands​

Local Environment​

# Check all services
pnpm run health:check

# Debug user creation
pnpm run debug:user "test@example.com" "Test Org"

# Check secret rotation
pnpm run security:check

Production Debugging​

# Check production health
curl -s https://ocean.goldfish.io/health

# View Edge Function logs
supabase functions logs --project-ref your-ref

Performance Optimization​

Bundle Size Optimization​

# Analyze bundle
pnpm run analyze:bundle

# Check for large dependencies
npx depcheck

# Visualize bundle
npx vite-bundle-analyzer dist/

Database Performance​

# Check slow queries (in Supabase dashboard)
# Monitor via pganalyze or built-in tools

# Optimize queries with EXPLAIN
psql -c "EXPLAIN ANALYZE SELECT ..."

Tool Configuration Files​

Key Configuration Files​

.github/
├── workflows/
│   ├── validate-pr.yml          # PR validation
│   ├── deploy-staging.yml       # Staging deployment
│   └── security-check.yml       # Security monitoring
├── dependabot.yml               # Dependency updates
└── renovate.json               # Removed (using Dependabot)

scripts/
├── setup-ocean.sh              # One-command setup
├── health-check.sh             # Production monitoring
├── rollback-prod.sh            # Emergency rollback
├── generate-changelog.sh       # Changelog automation
└── check-secret-expiry.sh      # Security monitoring

.secrets-config.json            # Secret rotation config
vitest.config.ts               # Test configuration
vitest.e2e.config.ts           # E2E test configuration

Tool Versions​

{
  "engines": {
    "node": ">=20.0.0",
    "pnpm": ">=8.0.0"
  },
  "dependencies": {
    "@browserbasehq/sdk": "^2.6.0",
    "vitest": "^3.0.5",
    "typescript": "^5.7.2"
  }
}

Monitoring Dashboards​

Available Dashboards​

  • Vercel Analytics: Performance metrics, Core Web Vitals
  • Supabase Dashboard: Database performance, API usage
  • Sentry: Error tracking, performance monitoring
  • PostHog: User analytics, feature flag usage
  • GitHub Actions: CI/CD pipeline status
  • Dependabot: Dependency update status

Custom Monitoring​

  • Bundle size trends: Via .bundle-stats/ reports
  • Secret rotation status: Via security workflow
  • Production health: Via health check script
  • Performance regression: Via PR checks