feat: Add tier-based vehicle limit enforcement (refs #23)

Backend:
- Add VEHICLE_LIMITS configuration to feature-tiers.ts
- Add getVehicleLimit, canAddVehicle helper functions
- Implement transaction-based limit check with FOR UPDATE locking
- Add VehicleLimitExceededError and 403 TIER_REQUIRED response
- Add countByUserId to VehiclesRepository
- Add comprehensive tests for all limit logic

Frontend:
- Add getResourceLimit, isAtResourceLimit to useTierAccess hook
- Create VehicleLimitDialog component with mobile/desktop modes
- Add useVehicleLimitCheck shared hook for limit state
- Update VehiclesPage with limit checks and lock icon
- Update VehiclesMobileScreen with limit checks
- Add tests for VehicleLimitDialog

Implements vehicle limits per tier (Free: 2, Pro: 5, Enterprise: unlimited)
with race condition prevention and consistent UX across mobile/desktop.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/src/shared-minimal/components/VehicleLimitDialog.test.tsx

@@ -0,0 +1,225 @@
+/**
+ * @ai-summary Tests for VehicleLimitDialog component
+ * @ai-context Validates props, mobile/desktop modes, and user interactions
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { VehicleLimitDialog } from './VehicleLimitDialog';
+
+// Mock MUI useMediaQuery to control mobile/desktop mode
+jest.mock('@mui/material', () => ({
+  ...jest.requireActual('@mui/material'),
+  useMediaQuery: jest.fn(),
+}));
+
+import { useMediaQuery } from '@mui/material';
+const mockedUseMediaQuery = useMediaQuery as jest.MockedFunction<typeof useMediaQuery>;
+
+describe('VehicleLimitDialog', () => {
+  const mockOnClose = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    // Default to desktop mode
+    mockedUseMediaQuery.mockReturnValue(false);
+  });
+
+  describe('Dialog rendering', () => {
+    it('renders when open', () => {
+      render(
+        <VehicleLimitDialog
+          open={true}
+          onClose={mockOnClose}
+          currentCount={2}
+          limit={2}
+          currentTier="free"
+        />
+      );
+
+      expect(screen.getByText('Vehicle Limit Reached')).toBeInTheDocument();
+      expect(screen.getByText('Additional Vehicles')).toBeInTheDocument();
+    });
+
+    it('does not render when closed', () => {
+      render(
+        <VehicleLimitDialog
+          open={false}
+          onClose={mockOnClose}
+          currentCount={2}
+          limit={2}
+          currentTier="free"
+        />
+      );
+
+      expect(screen.queryByText('Vehicle Limit Reached')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Props display', () => {
+    it('displays current count and limit', () => {
+      render(
+        <VehicleLimitDialog
+          open={true}
+          onClose={mockOnClose}
+          currentCount={2}
+          limit={2}
+          currentTier="free"
+        />
+      );
+
+      expect(screen.getByText('You have 2 of 2 vehicles')).toBeInTheDocument();
+    });
+
+    it('displays free tier upgrade prompt', () => {
+      render(
+        <VehicleLimitDialog
+          open={true}
+          onClose={mockOnClose}
+          currentCount={2}
+          limit={2}
+          currentTier="free"
+        />
+      );
+
+      expect(
+        screen.getByText(/Free tier is limited to 2 vehicles/)
+      ).toBeInTheDocument();
+    });
+
+    it('displays pro tier upgrade prompt', () => {
+      render(
+        <VehicleLimitDialog
+          open={true}
+          onClose={mockOnClose}
+          currentCount={5}
+          limit={5}
+          currentTier="pro"
+        />
+      );
+
+      expect(
+        screen.getByText(/Pro tier is limited to 5 vehicles/)
+      ).toBeInTheDocument();
+    });
+
+    it('shows tier chips for free user', () => {
+      render(
+        <VehicleLimitDialog
+          open={true}
+          onClose={mockOnClose}
+          currentCount={2}
+          limit={2}
+          currentTier="free"
+        />
+      );
+
+      expect(screen.getByText('Free')).toBeInTheDocument();
+      expect(screen.getByText('Pro')).toBeInTheDocument();
+    });
+
+    it('shows tier chips for pro user', () => {
+      render(
+        <VehicleLimitDialog
+          open={true}
+          onClose={mockOnClose}
+          currentCount={5}
+          limit={5}
+          currentTier="pro"
+        />
+      );
+
+      expect(screen.getByText('Pro')).toBeInTheDocument();
+      expect(screen.getByText('Enterprise')).toBeInTheDocument();
+    });
+  });
+
+  describe('User interactions', () => {
+    it('calls onClose when "Maybe Later" is clicked', () => {
+      render(
+        <VehicleLimitDialog
+          open={true}
+          onClose={mockOnClose}
+          currentCount={2}
+          limit={2}
+          currentTier="free"
+        />
+      );
+
+      fireEvent.click(screen.getByText('Maybe Later'));
+      expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onClose when "Upgrade (Coming Soon)" is clicked', () => {
+      render(
+        <VehicleLimitDialog
+          open={true}
+          onClose={mockOnClose}
+          currentCount={2}
+          limit={2}
+          currentTier="free"
+        />
+      );
+
+      fireEvent.click(screen.getByText('Upgrade (Coming Soon)'));
+      expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Mobile responsiveness', () => {
+    it('renders fullscreen on mobile', () => {
+      mockedUseMediaQuery.mockReturnValue(true); // Mobile mode
+
+      const { container } = render(
+        <VehicleLimitDialog
+          open={true}
+          onClose={mockOnClose}
+          currentCount={2}
+          limit={2}
+          currentTier="free"
+        />
+      );
+
+      // Check for fullScreen prop on Dialog (would be in DOM structure)
+      const dialog = container.querySelector('[role="dialog"]');
+      expect(dialog).toBeInTheDocument();
+    });
+
+    it('shows close button on mobile', () => {
+      mockedUseMediaQuery.mockReturnValue(true); // Mobile mode
+
+      render(
+        <VehicleLimitDialog
+          open={true}
+          onClose={mockOnClose}
+          currentCount={2}
+          limit={2}
+          currentTier="free"
+        />
+      );
+
+      const closeButton = screen.getByLabelText('close');
+      expect(closeButton).toBeInTheDocument();
+
+      fireEvent.click(closeButton);
+      expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('hides close button on desktop', () => {
+      mockedUseMediaQuery.mockReturnValue(false); // Desktop mode
+
+      render(
+        <VehicleLimitDialog
+          open={true}
+          onClose={mockOnClose}
+          currentCount={2}
+          limit={2}
+          currentTier="free"
+        />
+      );
+
+      expect(screen.queryByLabelText('close')).not.toBeInTheDocument();
+    });
+  });
+});

frontend/src/shared-minimal/components/VehicleLimitDialog.tsx

@@ -0,0 +1,213 @@
+/**
+ * @ai-summary Dialog shown when users reach their vehicle limit
+ * @ai-context Displays tier comparison and upgrade prompt for vehicle limits
+ */
+
+import React from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Typography,
+  Box,
+  Chip,
+  useMediaQuery,
+  useTheme,
+  IconButton,
+} from '@mui/material';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import CloseIcon from '@mui/icons-material/Close';
+import type { SubscriptionTier } from '../../features/settings/types/profile.types';
+
+interface VehicleLimitDialogProps {
+  open: boolean;
+  onClose: () => void;
+  currentCount: number;
+  limit: number;
+  currentTier: SubscriptionTier;
+}
+
+const tierDisplayNames: Record<SubscriptionTier, string> = {
+  free: 'Free',
+  pro: 'Pro',
+  enterprise: 'Enterprise',
+};
+
+const tierColors: Record<SubscriptionTier, 'default' | 'primary' | 'secondary'> = {
+  free: 'default',
+  pro: 'primary',
+  enterprise: 'secondary',
+};
+
+const getUpgradePrompt = (tier: SubscriptionTier): string => {
+  if (tier === 'free') {
+    return 'Free tier is limited to 2 vehicles. Upgrade to Pro for up to 5 vehicles, or Enterprise for unlimited.';
+  } else if (tier === 'pro') {
+    return 'Pro tier is limited to 5 vehicles. Upgrade to Enterprise for unlimited vehicles.';
+  }
+  return 'Upgrade to access additional vehicles.';
+};
+
+const getRequiredTier = (tier: SubscriptionTier): SubscriptionTier => {
+  if (tier === 'free') return 'pro';
+  if (tier === 'pro') return 'enterprise';
+  return 'pro';
+};
+
+export const VehicleLimitDialog: React.FC<VehicleLimitDialogProps> = ({
+  open,
+  onClose,
+  currentCount,
+  limit,
+  currentTier,
+}) => {
+  const theme = useTheme();
+  const isSmall = useMediaQuery(theme.breakpoints.down('sm'));
+  const requiredTier = getRequiredTier(currentTier);
+  const upgradePrompt = getUpgradePrompt(currentTier);
+
+  const handleUpgradeClick = () => {
+    // Navigate to upgrade page when Stripe integration is added
+    // For now, just close the dialog
+    onClose();
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      fullScreen={isSmall}
+      maxWidth="sm"
+      fullWidth
+      PaperProps={{
+        sx: {
+          maxHeight: isSmall ? '100%' : '90vh',
+          m: isSmall ? 0 : 2,
+        },
+      }}
+    >
+      {isSmall && (
+        <IconButton
+          aria-label="close"
+          onClick={onClose}
+          sx={{
+            position: 'absolute',
+            right: 8,
+            top: 8,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      )}
+
+      <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <LockOutlinedIcon color="action" />
+        Vehicle Limit Reached
+      </DialogTitle>
+
+      <DialogContent>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+          {/* Current status */}
+          <Box>
+            <Typography variant="h6" gutterBottom>
+              Additional Vehicles
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              {upgradePrompt}
+            </Typography>
+          </Box>
+
+          {/* Current count indicator */}
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              py: 2,
+              px: 3,
+              bgcolor: 'warning.light',
+              borderRadius: 1,
+              color: 'warning.contrastText',
+            }}
+          >
+            <Typography variant="body1" fontWeight="medium">
+              You have {currentCount} of {limit} vehicles
+            </Typography>
+          </Box>
+
+          {/* Tier comparison */}
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 2,
+              py: 2,
+              px: 3,
+              bgcolor: 'action.hover',
+              borderRadius: 1,
+            }}
+          >
+            <Box sx={{ textAlign: 'center' }}>
+              <Typography variant="caption" color="text.secondary" display="block">
+                Your Plan
+              </Typography>
+              <Chip
+                label={tierDisplayNames[currentTier]}
+                color={tierColors[currentTier]}
+                size="small"
+                sx={{ mt: 0.5 }}
+              />
+            </Box>
+
+            <Typography variant="h5" color="text.secondary">
+              →
+            </Typography>
+
+            <Box sx={{ textAlign: 'center' }}>
+              <Typography variant="caption" color="text.secondary" display="block">
+                Upgrade to
+              </Typography>
+              <Chip
+                label={tierDisplayNames[requiredTier]}
+                color={tierColors[requiredTier]}
+                size="small"
+                sx={{ mt: 0.5 }}
+              />
+            </Box>
+          </Box>
+
+          {/* Benefits preview */}
+          <Typography variant="body2" color="text.secondary">
+            Upgrade to unlock {requiredTier === 'enterprise' ? 'unlimited vehicles' : 'more vehicles'} and other premium capabilities.
+          </Typography>
+        </Box>
+      </DialogContent>
+
+      <DialogActions sx={{ px: 3, pb: 3, pt: 1, flexDirection: isSmall ? 'column' : 'row', gap: 1 }}>
+        <Button
+          onClick={onClose}
+          variant="outlined"
+          fullWidth={isSmall}
+          sx={{ order: isSmall ? 2 : 1 }}
+        >
+          Maybe Later
+        </Button>
+        <Button
+          onClick={handleUpgradeClick}
+          variant="contained"
+          color="primary"
+          fullWidth={isSmall}
+          sx={{ order: isSmall ? 1 : 2 }}
+        >
+          Upgrade (Coming Soon)
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default VehicleLimitDialog;

frontend/src/shared-minimal/components/index.ts

@@ -5,3 +5,4 @@
 export { Button } from './Button';
 export { Card } from './Card';
 export { UpgradeRequiredDialog } from './UpgradeRequiredDialog';
+export { VehicleLimitDialog } from './VehicleLimitDialog';