### Quick Start: Running HelmDev Visual Intelligence System

Source: https://github.com/njrini99-code/helmv3/blob/main/tools/ux-flow-auditor/README-V4.md

This section provides a step-by-step guide to get the HelmDev Visual Intelligence System up and running. It covers setting up the Next.js app, capturing screenshots using Playwright, and starting the dashboard.

```bash
# 1. Make sure your Next.js app is running
cd /path/to/helmv3
npm run dev  # Running on http://localhost:3000

# 2. Capture screenshots first (requires Playwright)
cd tools/ux-flow-auditor
npx playwright install chromium  # First time only
npm run capture:all

# 3. Start the Visual Intelligence dashboard
npm start

# 4. Open dashboard
open http://localhost:3333
```

--------------------------------

### Install Sentry SDK for Next.js

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/guides/SENTRY_SETUP_GUIDE.md

Installs the Sentry SDK for Next.js using npm. This is the primary step for integrating Sentry error tracking and performance monitoring into your application. It's recommended to use the Sentry wizard for a guided setup.

```bash
# Install Sentry SDK for Next.js
npm install --save @sentry/nextjs

# Run Sentry setup wizard (recommended)
npx @sentry/wizard@latest -i nextjs
```

--------------------------------

### Install LogRocket SDK

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/setup/ERROR_MONITORING_SETUP.md

Installs the LogRocket SDK, an alternative service for session replay and error tracking.

```bash
npm install logrocket
```

--------------------------------

### Playwright Authentication Setup (auth.setup.ts)

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/guides/PLAYWRIGHT_SETUP_GUIDE.md

Sets up authentication for coach and player roles by navigating to the login page, filling credentials from environment variables, and saving the authentication state to JSON files. This allows tests to start from an authenticated state.

```typescript
import { test as setup, expect } from '@playwright/test';
import path from 'path';

const authFile = path.join(__dirname, '../../.auth/coach.json');
const playerAuthFile = path.join(__dirname, '../../.auth/player.json');

// Coach authentication
setup('authenticate as coach', async ({ page }) => {
  // Navigate to login page
  await page.goto('/golf/login');

  // Fill in credentials
  await page.fill('input[name="email"]', process.env.TEST_COACH_EMAIL!);
  await page.fill('input[name="password"]', process.env.TEST_COACH_PASSWORD!);

  // Click login button
  await page.click('button[type="submit"]');

  // Wait for redirect to dashboard
  await page.waitForURL('**/dashboard**');

  // Verify logged in
  await expect(page.locator('text=Calendar')).toBeVisible();

  // Save authentication state
  await page.context().storageState({ path: authFile });
});

// Player authentication
setup('authenticate as player', async ({ page }) => {
  await page.goto('/golf/login');

  await page.fill('input[name="email"]', process.env.TEST_PLAYER_EMAIL!);
  await page.fill('input[name="password"]', process.env.TEST_PLAYER_PASSWORD!);

  await page.click('button[type="submit"]');

  await page.waitForURL('**/dashboard**');

  await page.context().storageState({ path: playerAuthFile });
});
```

--------------------------------

### Install Playwright and Browsers

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/guides/PLAYWRIGHT_SETUP_GUIDE.md

Installs Playwright test runner and necessary browser binaries (Chromium, Firefox, WebKit). Also includes commands to install browser dependencies, which is crucial for running tests on Linux environments.

```bash
# Install Playwright
npm install --save-dev @playwright/test

# Install browsers (Chromium, Firefox, WebKit)
npx playwright install

# Install browser dependencies (Linux only)
npx playwright install-deps
```

--------------------------------

### Install Sentry SDK

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/setup/ERROR_MONITORING_SETUP.md

Installs the Sentry SDK for Next.js and runs the Sentry wizard to set up the project. This is the first step in integrating Sentry error monitoring.

```bash
npm install @sentry/nextjs
npx @sentry/wizard@latest -i nextjs
```

--------------------------------

### Start Server - Bash Script

Source: https://github.com/njrini99-code/helmv3/blob/main/tools/ux-flow-auditor/dashboard-v6/README.md

This script navigates to the project directory and starts the npm server. Ensure you have Node.js and npm installed. This is the initial step to run the Ship Command Hub v6.

```bash
cd tools/ux-flow-auditor
npm start
```

--------------------------------

### Install and Start Ultra Agent Audit CLI

Source: https://github.com/njrini99-code/helmv3/blob/main/tools/ultra-agent-audit/README.md

This snippet shows the basic commands to set up and run the Ultra Agent Audit tool from the command line. It involves navigating to the project directory, installing dependencies, and starting the application.

```bash
cd tools/ultra-agent-audit
npm install
npm start
```

--------------------------------

### Install Datadog Browser Logs SDK

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/setup/ERROR_MONITORING_SETUP.md

Installs the Datadog browser logs SDK, part of a comprehensive observability stack.

```bash
npm install @datadog/browser-logs
```

--------------------------------

### GitHub Actions Workflow for Playwright Tests

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/guides/PLAYWRIGHT_SETUP_GUIDE.md

A GitHub Actions workflow file (playwright.yml) to automate the execution of Playwright end-to-end tests on push and pull request events. It includes steps for checking out code, setting up Node.js, installing dependencies, installing Playwright browsers, running tests with environment variables, and uploading test reports.

```yaml
name: Playwright Tests

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main, develop]

jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - uses: actions/setup-node@v3
        with:
          node-version: 18

      - 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:
          TEST_COACH_EMAIL: ${{ secrets.TEST_COACH_EMAIL }}
          TEST_COACH_PASSWORD: ${{ secrets.TEST_COACH_PASSWORD }}
          TEST_PLAYER_EMAIL: ${{ secrets.TEST_PLAYER_EMAIL }}
          TEST_PLAYER_PASSWORD: ${{ secrets.TEST_PLAYER_PASSWORD }}

      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

```

--------------------------------

### Install Rollbar SDK

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/setup/ERROR_MONITORING_SETUP.md

Installs the Rollbar SDK, a service focused on error tracking and deployment tracking.

```bash
npm install rollbar
```

--------------------------------

### Generate Detailed Implementation Guide (MD)

Source: https://github.com/njrini99-code/helmv3/blob/main/tools/ux-flow-auditor/dashboard-v6/README.md

The MDGeneratorAgent creates comprehensive implementation guides for features. This includes an overview, file changes, dependencies, step-by-step implementation with code examples, and verification steps. It uses Markdown for structure and includes bash for dependency installation and TSX for UI components.

```markdown
# Implementation: Add Loading State to Dashboard

> Feature for `/dashboard`
> Generated by Ship Command Hub

## Overview
Add a skeleton loading state to the dashboard...

## Files

| File | Action | Description |
|------|--------|-------------|
| `src/app/(app)/dashboard/loading.tsx` | Create | Loading skeleton |

## Dependencies

```bash
npm install framer-motion
```

## Implementation

### Step 1: Create Loading Component

```tsx
// src/app/(app)/dashboard/loading.tsx
'use client';

import { motion } from 'framer-motion';

export default function Loading() {
  return (
    <div className="p-6 space-y-6">
      {/* Header skeleton */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        className="h-8 w-48 bg-zinc-800 rounded-lg animate-pulse"
      />
      
      {/* Cards skeleton */}
      <div className="grid grid-cols-3 gap-4">
        {Array(6).fill(0).map((_, i) => (
          <motion.div
            key={i}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: i * 0.1 }}
            className="h-32 bg-zinc-800/50 rounded-2xl animate-pulse"
          />
        ))}
      </div>
    </div>
  );
}
```

## Verification

1. [ ] Navigate to dashboard - loading state appears
2. [ ] Skeleton matches page layout
3. [ ] Animation is smooth (no jank)
4. [ ] Loads correctly on slow connection

```

--------------------------------

### Copy .env.example to .env.local

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/setup/ENVIRONMENT_VARIABLES.md

This command copies the example environment file to a local file, which is the first step in setting up environment variables for local development.

```bash
cp .env.example .env.local
```

--------------------------------

### Install Playwright and Dependencies

Source: https://github.com/njrini99-code/helmv3/blob/main/tools/ux-flow-auditor/SCREENSHOT_INTEGRATION_GUIDE.md

Installs Playwright and its dependencies for browser automation. This step is crucial for enabling the screenshot capture functionality.

```bash
cd /Users/ricknini/Downloads/helmv3/tools/ux-flow-auditor
npm install
npx playwright install chromium
```

--------------------------------

### Start with One Platform for Development

Source: https://github.com/njrini99-code/helmv3/blob/main/tools/MULTI_PLATFORM_GUIDE.md

Begin development by focusing on a single platform, such as mastering 'baseballhelm' in the first week. This approach helps in iteratively adding complexity and platforms.

```python
# Week 1: Master baseball
python enhanced-cycle-agent.py --project ~/helmv3 --platform baseballhelm

# Week 2: Add golf
python multi-platform-cycle.py --project ~/helmv3 --platforms baseball golf

# Week 3: Add coach (if exists)
python multi-platform-cycle.py --project ~/helmv3
```

--------------------------------

### Build and Run in Production Mode (Bash)

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/performance/PERFORMANCE-TIPS.md

Builds the project for production and starts the production server, significantly improving performance compared to development mode. This is a critical step before any demo.

```bash
# Build for production
npm run build

# Run production server (much faster!)
npm run start
```

--------------------------------

### Project Setup and Execution Commands

Source: https://github.com/njrini99-code/helmv3/blob/main/tools/ux-flow-auditor/dashboard-v6/README.md

Provides commands to set up and run the Helm v3 project and its associated tools. It includes instructions for starting the development server and the Ship Command Hub, as well as accessing the application via a web browser.

```bash
# Terminal 1: Run dev server
cd /Users/ricknini/Downloads/helmv3
npm run dev

# Terminal 2: Run Ship Command Hub
cd tools/ux-flow-auditor
npm start

# Open browser
open http://localhost:3333

```

--------------------------------

### Initialize and Push to GitHub

Source: https://github.com/njrini99-code/helmv3/blob/main/DEPLOY.md

This snippet demonstrates the basic Git commands to initialize a repository, stage all files, commit them with a message, and push to a remote GitHub origin. It assumes the repository has already been created on GitHub.

```bash
cd /Users/ricknini/Downloads/helmv3

# Initialize git if not already
git init

# Add all files
git add .

# Commit
git commit -m "Production ready - Dec 2025"

# Create repo on GitHub, then:
git remote add origin https://github.com/YOUR_USERNAME/helm-sports-labs.git
git branch -M main
git push -u origin main
```

--------------------------------

### Start Daily Workflow with Helm Intelligence

Source: https://github.com/njrini99-code/helmv3/blob/main/tools/QUICK_REFERENCE.md

This snippet outlines the initial steps for starting a daily workflow, including setting the API key and running the verification cycle. It also shows how to check the progress of the cycles.

```bash
# Set API key (once per session)
export ANTHROPIC_API_KEY="sk-ant-..."

# Morning: Run verification cycle
cd ~/helmv3/tools/continuous-improvement
python cycle-agent.py --project ~/helmv3 --platform baseballhelm

# Check progress
python view-cycles.py ~/helmv3
```

--------------------------------

### CLI Command Examples

Source: https://github.com/njrini99-code/helmv3/blob/main/tools/README.md

Demonstrates various command-line interface commands for the Helm v3 project. Includes examples for full analysis, single platform analysis, continuous monitoring, and specifying a custom output directory.

```bash
# Full analysis
python orchestrate.py --baseballhelm PATH --golfhelm PATH

# Single platform
python orchestrate.py --baseballhelm PATH --platform baseballhelm

# With continuous monitoring
python orchestrate.py --baseballhelm PATH --watch

# Custom output directory
python orchestrate.py --baseballhelm PATH --output ./my-reports
```

--------------------------------

### Full Deployment: Replace Immediately (Bash)

Source: https://github.com/njrini99-code/helmv3/blob/main/src/app/products-redesign/IMPLEMENTATION.md

This option is for immediately replacing the old version with the new light theme. It includes backing up the old version, deploying the new one, committing changes, and pushing to production using Vercel.

```bash
cd /Users/ricknini/Downloads/helmv3

# 1. Backup old version
mv src/app/products/page.tsx src/app/products/page.old.tsx

# 2. Deploy new version
mv src/app/products-redesign/page.tsx src/app/products/page.tsx

# 3. Commit
git add .
git commit -m "feat: redesign products page with premium light theme"
git push

# 4. Deploy
vercel --prod
```

--------------------------------

### Mobile Responsiveness Layout Setup (React)

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/features/BATCH_3_INTEGRATION_GUIDE.md

Provides an example of setting up a mobile-responsive layout structure. It details strategies for hiding desktop elements on mobile, showing mobile-specific navigation, and applying appropriate padding for content.

```tsx
<div className="min-h-screen">
  {/* Desktop sidebar - hidden on mobile */}
  <DarkSidebar sport="baseball" role="coach" />

  <div className="lg:ml-[260px]">
    {/* Header with mobile menu button */}
    <DarkHeader onMobileMenuToggle={() => setOpen(true)} />

    {/* Content with mobile bottom padding */}
    <main className="pb-20 lg:pb-0">{children}</main>
  </div>

  {/* Mobile drawer */}
  <MobileSidebarDrawer {...props} />

  {/* Mobile bottom nav */}
  <MobileBottomNav items={navItems} />
</div>
```

--------------------------------

### Implement Page Object Model in Playwright Tests

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/guides/PLAYWRIGHT_SETUP_GUIDE.md

Shows how to implement the Page Object Model (POM) pattern for better test organization and maintainability. This example defines a `CalendarPage` class to encapsulate page elements and actions, reducing code duplication. It requires Playwright and its types.

```typescript
// tests/e2e/pages/CalendarPage.ts
import { Page, Locator } from '@playwright/test';

export class CalendarPage {
  readonly page: Page;
  readonly createEventButton: Locator;
  readonly eventModal: Locator;
  readonly titleInput: Locator;

  constructor(page: Page) {
    this.page = page;
    this.createEventButton = page.locator('button:has-text("Create Event")');
    this.eventModal = page.locator('[data-testid="event-modal"]');
    this.titleInput = page.locator('input[name="title"]');
  }

  async goto() {
    await this.page.goto('/golf/dashboard/calendar');
  }

  async createEvent(data: { title: string; type: string; date: string }) {
    await this.createEventButton.click();
    await this.titleInput.fill(data.title);
    await this.page.selectOption('select[name="eventType"]', data.type);
    await this.page.fill('input[name="startDate"]', data.date);
    await this.page.click('button[type="submit"]:has-text("Create")');
  }
}

// Usage in test
import { CalendarPage } from './pages/CalendarPage';

test('create event', async ({ page }) => {
  const calendarPage = new CalendarPage(page);
  await calendarPage.goto();
  await calendarPage.createEvent({
    title: 'Test Event',
    type: 'practice',
    date: '2026-01-10',
  });
});
```

--------------------------------

### Handle Supabase Errors with Sentry

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/guides/SENTRY_SETUP_GUIDE.md

This TypeScript function captures Supabase errors and sends them to Sentry with relevant context. It maps Supabase error codes to Sentry severity levels and includes details about the operation, table, and specific error context. Ensure '@sentry/nextjs' and '@supabase/supabase-js' are installed.

```typescript
// src/lib/supabase/error-handler.ts
import * as Sentry from '@sentry/nextjs';
import { PostgrestError } from '@supabase/supabase-js';

export function handleSupabaseError(
  error: PostgrestError | null,
  context: {
    operation: string;
    table: string;
    details?: Record<string, any>;
  }
): void {
  if (!error) return;

  // Map Supabase error codes to severity
  const severity = getErrorSeverity(error.code);

  Sentry.captureException(new Error(error.message), {
    level: severity,
    tags: {
      database: 'supabase',
      table: context.table,
      operation: context.operation,
      error_code: error.code,
    },
    contexts: {
      supabase: {
        code: error.code,
        message: error.message,
        details: error.details,
        hint: error.hint,
      },
      operation: context.details,
    },
  });
}

function getErrorSeverity(code: string): Sentry.SeverityLevel {
  // RLS violations are warnings (expected in some cases)
  if (code === 'PGRST301') return 'warning';

  // Permission denied
  if (code === '42501') return 'error';

  // Unique violation
  if (code === '23505') return 'warning';

  // Other errors
  return 'error';
}

```

--------------------------------

### Performance Monitoring for DB Queries in TypeScript

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/guides/SENTRY_SETUP_GUIDE.md

This TypeScript function demonstrates performance monitoring for database queries using Sentry. It starts a transaction, creates a child span for the query, and finishes both upon completion or error. Requires Sentry SDK and a database client (e.g., Supabase).

```typescript
// Track slow database queries
import * as Sentry from '@sentry/nextjs';

export async function getCalendarEvents(teamId: string) {
  const transaction = Sentry.startTransaction({
    name: 'getCalendarEvents',
    op: 'db.query',
  });

  try {
    const span = transaction.startChild({
      op: 'db.query',
      description: 'Fetch calendar events',
    });

    const supabase = await createClient();
    const { data, error } = await supabase
      .from('golf_events')
      .select('*')
      .eq('team_id', teamId);

    span.finish();

    if (error) throw error;
    return data;
  } finally {
    transaction.finish();
  }
}

```

--------------------------------

### Run Development Server (Bash)

Source: https://github.com/njrini99-code/helmv3/blob/main/src/components/products/SPLIT_FLAP_GUIDE.md

This command initiates the development server for the project, allowing you to view the split-flap intro animation locally. After running, you can access the intro at the specified localhost URL.

```bash
npm run dev
# Visit http://localhost:3000/products
```

--------------------------------

### Apply Light Theme to Features Page (Bash)

Source: https://github.com/njrini99-code/helmv3/blob/main/src/app/products-redesign/IMPLEMENTATION.md

This example shows how to adapt the color system for the Features page to match the new light theme. It defines a `colors` object with appropriate Tailwind CSS classes for backgrounds, text, and accents.

```bash
# Copy color system from products redesign:

const colors = {
  bg: {
    primary: 'bg-white',
    secondary: 'bg-neutral-50',
  },
  text: {
    primary: 'text-neutral-900',
    secondary: 'text-neutral-600',
  },
  accent: 'text-helm-green-600'
}
```

--------------------------------

### Measure Page Load Performance with Playwright

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/guides/PLAYWRIGHT_SETUP_GUIDE.md

Demonstrates how to measure the performance of a page load using Playwright. It records the start time, navigates to the page, waits for network activity to cease, and then calculates the load time, asserting that it is within an acceptable threshold. This helps identify performance bottlenecks.

```typescript
test('calendar page should load quickly', async ({ page }) => {
  const startTime = Date.now();

  await page.goto('/golf/dashboard/calendar');
  await page.waitForLoadState('networkidle');

  const loadTime = Date.now() - startTime;

  expect(loadTime).toBeLessThan(3000); // Under 3 seconds
});
```

--------------------------------

### Manage Test Data with Playwright Fixtures

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/guides/PLAYWRIGHT_SETUP_GUIDE.md

Shows how to define and use fixtures in Playwright for managing test data. This example defines `testEvents` and `testUsers` objects, which can be imported and used across multiple tests to provide consistent and reusable test data. Environment variables are used for sensitive information.

```typescript
// tests/e2e/fixtures/test-data.ts
export const testEvents = {
  practice: {
    title: 'Test Practice',
    type: 'practice',
    date: '2026-01-10',
    startTime: '15:00',
    endTime: '17:00',
  },
  tournament: {
    title: 'Test Tournament',
    type: 'tournament',
    date: '2026-01-15',
    startTime: '09:00',
    endTime: '15:00',
    requiresRsvp: true,
  },
};

export const testUsers = {
  coach: {
    email: process.env.TEST_COACH_EMAIL!,
    password: process.env.TEST_COACH_PASSWORD!,
  },
  player: {
    email: process.env.TEST_PLAYER_EMAIL!,
    password: process.env.TEST_PLAYER_PASSWORD!,
  },
};
```

--------------------------------

### Deploy to Netlify via CLI

Source: https://github.com/njrini99-code/helmv3/blob/main/DEPLOY.md

This snippet shows how to deploy a project to Netlify using the Netlify CLI. It includes the command to install the Netlify CLI and the command to initiate a production deployment.

```bash
npm i -g netlify-cli
netlify deploy --prod
```

--------------------------------

### Test Sentry Error and Message Capture

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/guides/SENTRY_SETUP_GUIDE.md

This TypeScript code snippet demonstrates how to test Sentry's error and message capturing capabilities within a Next.js API route. It captures a standard exception, a message with a specific level, and simulates throwing an error. This requires '@sentry/nextjs' and 'next/server' to be installed.

```typescript
// src/app/api/sentry-test/route.ts
import * as Sentry from '@sentry/nextjs';
import { NextResponse } from 'next/server';

export async function GET() {
  // Test different error types

  // 1. Captured exception
  Sentry.captureException(new Error('Test error from API route'));

  // 2. Captured message
  Sentry.captureMessage('Test message', 'info');

  // 3. Throw error (will be caught automatically)
  if (Math.random() > 0.5) {
    throw new Error('Random test error');
  }

  return NextResponse.json({ message: 'Sentry test triggered' });
}

```

--------------------------------

### Failover Database Setup (Bash)

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/setup/BACKUP_AND_DISASTER_RECOVERY.md

Bash commands to set up a fallback PostgreSQL database, either by creating a new Supabase project and pushing the schema or by running a self-hosted PostgreSQL instance using Docker. This is part of the disaster recovery plan for Supabase outages.

```bash
# Option 1: Restore to new Supabase project
supabase projects create helm-failover
supabase db push --db-url NEW_PROJECT_URL

# Option 2: Restore to self-hosted PostgreSQL
docker run -d -p 5432:5432 \
  -e POSTGRES_PASSWORD=your-password \
  postgres:15
psql -h localhost -U postgres -f backup.sql
```

--------------------------------

### Supabase Client Initialization (TypeScript)

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/CODEBASE_MAP.md

Illustrates how to initialize Supabase clients for both server-side and client-side contexts in TypeScript. Server-side initialization requires awaiting the `createClient` function, while client-side initialization is synchronous.

```typescript
// Server-side (Server Components, Actions, Routes)
import { createClient } from '@/lib/supabase/server';
const supabase = await createClient(); // MUST await

// Client-side (Client Components, hooks)
import { createClient } from '@/lib/supabase/client';
const supabase = createClient(); // NOT async
```

--------------------------------

### Conduct API Testing with Playwright

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/guides/PLAYWRIGHT_SETUP_GUIDE.md

Demonstrates how to perform API testing using Playwright's `request` context. This example sends a POST request to create an event and asserts the response status and JSON body. It requires Playwright's API testing features and access to environment variables for authentication.

```typescript
test('should create event via API', async ({ request }) => {
  const response = await request.post('/api/golf/events', {
    data: {
      title: 'API Test Event',
      team_id: process.env.TEST_TEAM_ID,
      event_type: 'practice',
      start_date: '2026-01-10',
    },
    headers: {
      'Content-Type': 'application/json',
    },
  });

  expect(response.ok()).toBeTruthy();
  const data = await response.json();
  expect(data.success).toBe(true);
});
```

--------------------------------

### Deploy to Vercel via CLI

Source: https://github.com/njrini99-code/helmv3/blob/main/DEPLOY.md

Instructions for deploying a project to Vercel using the Vercel Command Line Interface (CLI). This involves installing the CLI globally, navigating to the project directory, and running the deploy command, followed by interactive prompts.

```bash
# Install Vercel CLI
npm i -g vercel

# Deploy
cd /Users/ricknini/Downloads/helmv3
vercel

# Follow the prompts:
# - Link to existing project? No
# - What's your project name? helm-sports-labs
# - Which directory? ./
# - Override settings? No
```

--------------------------------

### Install Vercel Analytics (NPM)

Source: https://github.com/njrini99-code/helmv3/blob/main/src/app/products-redesign/IMPLEMENTATION.md

This command installs the Vercel Analytics package, which is necessary for tracking user interactions and conversions for A/B testing.

```bash
npm install @vercel/analytics
```

--------------------------------

### Run Golf Development Server

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/architecture/PLATFORM_ARCHITECTURE.md

Starts the development server for the golf platform. This command is typically run from the project's root directory and allows for local development and testing of golf-specific features.

```bash
# Run golf dev server
npm run dev
# Navigate to http://localhost:3000/golf
```

--------------------------------

### Capture Errors in Next.js Client Components

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/guides/SENTRY_SETUP_GUIDE.md

This TypeScript example shows how to capture errors in a Next.js client component using Sentry. It uses a try-catch block within an async function to handle potential errors during form submission. `Sentry.captureMessage` is used for expected failures with specific context, while `Sentry.captureException` catches unexpected runtime errors.

```typescript
// src/components/golf/calendar/EventDetailModal.tsx
'use client';

import * as Sentry from '@sentry/nextjs';
import { useState } from 'react';

export function EventDetailModal() {
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: React.FormEvent) {
    try {
      e.preventDefault();

      const result = await createEvent(formData);

      if (!result.success) {
        setError(result.error);

        // Log to Sentry
        Sentry.captureMessage('Event creation failed', {
          level: 'warning',
          tags: {
            component: 'EventDetailModal',
          },
          contexts: {
            form: formData,
            error: result.error,
          },
        });
      }
    } catch (error) {
      // Capture unexpected errors
      Sentry.captureException(error, {
        tags: {
          component: 'EventDetailModal',
          action: 'handleSubmit',
        },
      });

      setError('An unexpected error occurred');
    }
  }

  return (
    // ... component JSX
  );
}

```

--------------------------------

### Vercel Production and Preview Deploy Commands

Source: https://github.com/njrini99-code/helmv3/blob/main/DEPLOY.md

A reference for common Vercel CLI commands used for deploying projects. Includes commands for deploying to production, deploying a preview version, and checking deployment logs.

```bash
# Build locally to check for errors
npm run build

# Deploy to production
vercel --prod

# Deploy preview (for testing)
vercel

# Check deployment logs
vercel logs
```

--------------------------------

### Capture Errors in Next.js Server Actions

Source: https://github.com/njrini99-code/helmv3/blob/main/docs/guides/SENTRY_SETUP_GUIDE.md

This TypeScript example demonstrates how to capture exceptions within a Next.js Server Action using Sentry. It wraps database operations in a try-catch block, sending specific error details and context to Sentry using `Sentry.captureException`. This helps in debugging issues related to data insertion or unexpected server-side errors.

```typescript
// src/app/golf/actions/golf.ts
'use server';

import * as Sentry from '@sentry/nextjs';
import { createClient } from '@/lib/supabase/server';

export async function createEvent(eventData: EventData) {
  try {
    const supabase = await createClient();

    const {
      data,
      error
    } = await supabase
      .from('golf_events')
      .insert(eventData)
      .select()
      .single();

    if (error) {
      // Capture database errors
      Sentry.captureException(error, {
        tags: {
          action: 'createEvent',
          table: 'golf_events',
        },
        contexts: {
          event: {
            title: eventData.title,
            team_id: eventData.team_id,
          },
        },
      });

      return {
        success: false,
        error: error.message
      };
    }

    return {
      success: true,
      data
    };
  } catch (error) {
    // Capture unexpected errors
    Sentry.captureException(error, {
      tags: {
        action: 'createEvent',
        type: 'unexpected',
      },
    });

    throw error;
  }
}

```

--------------------------------

### Install and Run HelmDev (Bash)

Source: https://github.com/njrini99-code/helmv3/blob/main/tools/ux-flow-auditor/README.md

This snippet shows how to navigate to the HelmDev tool directory, install its Node.js dependencies, and start the system in supervised mode. It also provides an alternative command for direct CLI execution.

```bash
# Navigate to the tool directory
cd tools/ux-flow-auditor

# Install dependencies
npm install

# Start HelmDev in supervised mode
npm run helmdev

# Or use the CLI directly
node src/index.js src/app
```