@friggframework/devtools 2.0.0--canary.398.7664c46.0 → 2.0.0--canary.400.bed3308.0

package/infrastructure/serverless-template.js

@@ -8,7 +8,7 @@ const { AWSDiscovery } = require('./aws-discovery');
  * @returns {boolean} True if discovery should run
  */
 const shouldRunDiscovery = (AppDefinition) => {
-    return AppDefinition.vpc?.enable === true || 
+    return AppDefinition.vpc?.enable === true ||
            AppDefinition.encryption?.useDefaultKMSForFieldLevelEncryption === true ||
            AppDefinition.ssm?.enable === true;
 };
@@ -453,22 +453,34 @@ const createVPCInfrastructure = (AppDefinition) => {
 const composeServerlessDefinition = async (AppDefinition) => {
     // Store discovered resources
     let discoveredResources = {};
+<<<<<<< HEAD
+=======
     
+>>>>>>> 37c4892ee8a686eb7acfcd17c333b0ed73e1f120
     // Run AWS discovery if needed
     if (shouldRunDiscovery(AppDefinition)) {
         console.log('🔍 Running AWS resource discovery for serverless template...');
         try {
             const region = process.env.AWS_REGION || 'us-east-1';
             const discovery = new AWSDiscovery(region);
+<<<<<<< HEAD
+=======
             
+>>>>>>> 37c4892ee8a686eb7acfcd17c333b0ed73e1f120
             const config = {
                 vpc: AppDefinition.vpc || {},
                 encryption: AppDefinition.encryption || {},
                 ssm: AppDefinition.ssm || {}
             };
+<<<<<<< HEAD
+
+            discoveredResources = await discovery.discoverResources(config);
+
+=======
             
             discoveredResources = await discovery.discoverResources(config);
             
+>>>>>>> 37c4892ee8a686eb7acfcd17c333b0ed73e1f120
             console.log('✅ AWS discovery completed successfully!');
             if (discoveredResources.defaultVpcId) {
                 console.log(`   VPC: ${discoveredResources.defaultVpcId}`);
@@ -487,7 +499,10 @@ const composeServerlessDefinition = async (AppDefinition) => {
             throw new Error(`AWS discovery failed: ${error.message}`);
         }
     }
+<<<<<<< HEAD
+=======
     
+>>>>>>> 37c4892ee8a686eb7acfcd17c333b0ed73e1f120
     const definition = {
         frameworkVersion: '>=3.17.0',
         service: AppDefinition.name || 'create-frigg-app',
@@ -611,6 +626,25 @@ const composeServerlessDefinition = async (AppDefinition) => {
                     },
                 ],
             },
+            health: {
+                handler: 'node_modules/@friggframework/core/handlers/routers/health.handler',
+                events: [
+                    {
+                        http: {
+                            path: '/health',
+                            method: 'GET',
+                            cors: true,
+                        },
+                    },
+                    {
+                        http: {
+                            path: '/health/{proxy+}',
+                            method: 'GET',
+                            cors: true,
+                        },
+                    },
+                ],
+            },
         },
         resources: {
             Resources: {
@@ -776,22 +810,39 @@ const composeServerlessDefinition = async (AppDefinition) => {
             // Option 2: Use AWS Discovery (default behavior)
             // VPC configuration using discovered or explicitly provided resources
             const vpcConfig = {
+<<<<<<< HEAD
+                securityGroupIds: AppDefinition.vpc.securityGroupIds ||
+                    (discoveredResources.defaultSecurityGroupId ? [discoveredResources.defaultSecurityGroupId] : []),
+                subnetIds: AppDefinition.vpc.subnetIds ||
+                    (discoveredResources.privateSubnetId1 && discoveredResources.privateSubnetId2 ?
+                        [discoveredResources.privateSubnetId1, discoveredResources.privateSubnetId2] :
+                        [])
+=======
                 securityGroupIds: AppDefinition.vpc.securityGroupIds || 
                                   (discoveredResources.defaultSecurityGroupId ? [discoveredResources.defaultSecurityGroupId] : []),
                 subnetIds: AppDefinition.vpc.subnetIds || 
                           (discoveredResources.privateSubnetId1 && discoveredResources.privateSubnetId2 ? 
                            [discoveredResources.privateSubnetId1, discoveredResources.privateSubnetId2] :
                            [])
+>>>>>>> 37c4892ee8a686eb7acfcd17c333b0ed73e1f120
             };
 
             // Set VPC config for Lambda functions only if we have valid subnet IDs
             if (vpcConfig.subnetIds.length >= 2 && vpcConfig.securityGroupIds.length > 0) {
                 definition.provider.vpc = vpcConfig;
+<<<<<<< HEAD
+
+                // Check if we have an existing NAT Gateway to use
+                if (!discoveredResources.existingNatGatewayId) {
+                    // No existing NAT Gateway, create new resources
+
+=======
                 
                 // Check if we have an existing NAT Gateway to use
                 if (!discoveredResources.existingNatGatewayId) {
                     // No existing NAT Gateway, create new resources
                     
+>>>>>>> 37c4892ee8a686eb7acfcd17c333b0ed73e1f120
                     // Only create EIP if we don't have an existing one available
                     if (!discoveredResources.existingElasticIpAllocationId) {
                         definition.resources.Resources.FriggNATGatewayEIP = {
@@ -808,8 +859,13 @@ const composeServerlessDefinition = async (AppDefinition) => {
                     definition.resources.Resources.FriggNATGateway = {
                         Type: 'AWS::EC2::NatGateway',
                         Properties: {
+<<<<<<< HEAD
+                            AllocationId: discoveredResources.existingElasticIpAllocationId ||
+                                { 'Fn::GetAtt': ['FriggNATGatewayEIP', 'AllocationId'] },
+=======
                             AllocationId: discoveredResources.existingElasticIpAllocationId || 
                                          { 'Fn::GetAtt': ['FriggNATGatewayEIP', 'AllocationId'] },
+>>>>>>> 37c4892ee8a686eb7acfcd17c333b0ed73e1f120
                             SubnetId: discoveredResources.publicSubnetId || discoveredResources.privateSubnetId1, // Use first discovered subnet if no public subnet found
                             Tags: [
                                 { Key: 'Name', Value: '${self:service}-${self:provider.stage}-nat-gateway' }
@@ -841,6 +897,21 @@ const composeServerlessDefinition = async (AppDefinition) => {
                 // Associate Lambda subnets with NAT Gateway route table
                 definition.resources.Resources.FriggSubnet1RouteAssociation = {
                     Type: 'AWS::EC2::SubnetRouteTableAssociation',
+<<<<<<< HEAD
+                    Properties: {
+                        SubnetId: vpcConfig.subnetIds[0],
+                        RouteTableId: { Ref: 'FriggLambdaRouteTable' }
+                    }
+                };
+
+                definition.resources.Resources.FriggSubnet2RouteAssociation = {
+                    Type: 'AWS::EC2::SubnetRouteTableAssociation',
+                    Properties: {
+                        SubnetId: vpcConfig.subnetIds[1],
+                        RouteTableId: { Ref: 'FriggLambdaRouteTable' }
+                    }
+                };
+=======
                 Properties: {
                     SubnetId: vpcConfig.subnetIds[0],
                     RouteTableId: { Ref: 'FriggLambdaRouteTable' }
@@ -854,10 +925,31 @@ const composeServerlessDefinition = async (AppDefinition) => {
                     RouteTableId: { Ref: 'FriggLambdaRouteTable' }
                 }
             };
+>>>>>>> 37c4892ee8a686eb7acfcd17c333b0ed73e1f120
 
                 // Add VPC endpoints for AWS service optimization (optional but recommended)
                 if (AppDefinition.vpc.enableVPCEndpoints !== false) {
                     definition.resources.Resources.VPCEndpointS3 = {
+<<<<<<< HEAD
+                        Type: 'AWS::EC2::VPCEndpoint',
+                        Properties: {
+                            VpcId: discoveredResources.defaultVpcId,
+                            ServiceName: 'com.amazonaws.${self:provider.region}.s3',
+                            VpcEndpointType: 'Gateway',
+                            RouteTableIds: [{ Ref: 'FriggLambdaRouteTable' }]
+                        }
+                    };
+
+                    definition.resources.Resources.VPCEndpointDynamoDB = {
+                        Type: 'AWS::EC2::VPCEndpoint',
+                        Properties: {
+                            VpcId: discoveredResources.defaultVpcId,
+                            ServiceName: 'com.amazonaws.${self:provider.region}.dynamodb',
+                            VpcEndpointType: 'Gateway',
+                            RouteTableIds: [{ Ref: 'FriggLambdaRouteTable' }]
+                        }
+                    };
+=======
                     Type: 'AWS::EC2::VPCEndpoint',
                     Properties: {
                         VpcId: discoveredResources.defaultVpcId,
@@ -876,6 +968,7 @@ const composeServerlessDefinition = async (AppDefinition) => {
                         RouteTableIds: [{ Ref: 'FriggLambdaRouteTable' }]
                     }
                 };
+>>>>>>> 37c4892ee8a686eb7acfcd17c333b0ed73e1f120
                 }
             }
         }
@@ -915,6 +1008,15 @@ const composeServerlessDefinition = async (AppDefinition) => {
 
             // Add function for the integration
             definition.functions[integrationName] = {
+<<<<<<< HEAD
+                handler: `node_modules/@friggframework/core/handlers/routers/integration-defined-routers.handlers.${integrationName}.handler`,
+                events: [
+                    {
+                        http: {
+                            path: `/api/${integrationName}-integration/{proxy+}`,
+                            method: 'ANY',
+                            cors: true,
+=======
             handler: `node_modules/@friggframework/core/handlers/routers/integration-defined-routers.handlers.${integrationName}.handler`,
             events: [
                 {
@@ -956,14 +1058,117 @@ const composeServerlessDefinition = async (AppDefinition) => {
                     sqs: {
                         arn: {
                             'Fn::GetAtt': [queueReference, 'Arn'],
+>>>>>>> 37c4892ee8a686eb7acfcd17c333b0ed73e1f120
+                        },
+                    },
+                ],
+            };
+
+            // Add SQS Queue for the integration
+            const queueReference = `${integrationName.charAt(0).toUpperCase() + integrationName.slice(1)
+                }Queue`;
+            const queueName = `\${self:service}--\${self:provider.stage}-${queueReference}`;
+            definition.resources.Resources[queueReference] = {
+                Type: 'AWS::SQS::Queue',
+                Properties: {
+                    QueueName: `\${self:custom.${queueReference}}`,
+                    MessageRetentionPeriod: 60,
+                    VisibilityTimeout: 1800,  // 30 minutes
+                    RedrivePolicy: {
+                        maxReceiveCount: 1,
+                        deadLetterTargetArn: {
+                            'Fn::GetAtt': ['InternalErrorQueue', 'Arn'],
+                        },
+                    },
+                },
+            };
+
+            // Add Queue Worker for the integration
+            const queueWorkerName = `${integrationName}QueueWorker`;
+            definition.functions[queueWorkerName] = {
+                handler: `node_modules/@friggframework/core/handlers/workers/integration-defined-workers.handlers.${integrationName}.queueWorker`,
+                reservedConcurrency: 5,
+                events: [
+                    {
+                        sqs: {
+                            arn: {
+                                'Fn::GetAtt': [queueReference, 'Arn'],
+                            },
+                            batchSize: 1,
                         },
-                        batchSize: 1,
+                    },
+                ],
+                timeout: 600,
+            };
+
+            // Add Queue URL for the integration to the ENVironment variables
+            definition.provider.environment = {
+                ...definition.provider.environment,
+                [`${integrationName.toUpperCase()}_QUEUE_URL`]: {
+                    Ref: queueReference,
+                },
+            };
+
+            definition.custom[queueReference] = queueName;
+        }
+    }
+
+    // Discovery has already run successfully at this point if needed
+    // The discoveredResources object contains all the necessary AWS resources
+
+    // Add websocket function if enabled
+    if (AppDefinition.websockets?.enable === true) {
+        definition.functions.defaultWebsocket = {
+            handler: 'node_modules/@friggframework/core/handlers/routers/websocket.handler',
+            events: [
+                {
+                    websocket: {
+                        route: '$connect',
+                    },
+                },
+                {
+                    websocket: {
+                        route: '$default',
+                    },
+                },
+                {
+                    websocket: {
+                        route: '$disconnect',
+                    },
+                },
+            ],
+        };
+    }
+
+<<<<<<< HEAD
+    // Discovery has already run successfully at this point if needed
+    // The discoveredResources object contains all the necessary AWS resources
+
+    // Add websocket function if enabled
+    if (AppDefinition.websockets?.enable === true) {
+        definition.functions.defaultWebsocket = {
+            handler: 'node_modules/@friggframework/core/handlers/routers/websocket.handler',
+            events: [
+                {
+                    websocket: {
+                        route: '$connect',
+                    },
+                },
+                {
+                    websocket: {
+                        route: '$default',
+                    },
+                },
+                {
+                    websocket: {
+                        route: '$disconnect',
                     },
                 },
             ],
-            timeout: 600,
         };
+    }
 
+=======
             // Add Queue URL for the integration to the ENVironment variables
             definition.provider.environment = {
                 ...definition.provider.environment,
@@ -1003,6 +1208,7 @@ const composeServerlessDefinition = async (AppDefinition) => {
         };
     }
 
+>>>>>>> 37c4892ee8a686eb7acfcd17c333b0ed73e1f120
     // Discovery has already run successfully at this point if needed
     // The discoveredResources object contains all the necessary AWS resources
 

package/infrastructure/serverless-template.test.js

@@ -31,7 +31,10 @@ describe('composeServerlessDefinition', () => {
 
         // Mock process.argv to avoid offline mode during tests
         process.argv = ['node', 'test'];
+<<<<<<< HEAD
+=======
 
+>>>>>>> 37c4892ee8a686eb7acfcd17c333b0ed73e1f120
         // Clear AWS_REGION for tests
         delete process.env.AWS_REGION;
     });
@@ -82,7 +85,10 @@ describe('composeServerlessDefinition', () => {
 
         it('should use AWS_REGION environment variable when set', async () => {
             process.env.AWS_REGION = 'eu-west-1';
+<<<<<<< HEAD
+=======
 
+>>>>>>> 37c4892ee8a686eb7acfcd17c333b0ed73e1f120
             const appDefinition = {
                 name: 'test-app',
                 integrations: []
@@ -96,7 +102,10 @@ describe('composeServerlessDefinition', () => {
 
         it('should default to us-east-1 when AWS_REGION is not set', async () => {
             delete process.env.AWS_REGION;
+<<<<<<< HEAD
+=======
 
+>>>>>>> 37c4892ee8a686eb7acfcd17c333b0ed73e1f120
             const appDefinition = {
                 name: 'test-app',
                 integrations: []
@@ -283,7 +292,10 @@ describe('composeServerlessDefinition', () => {
             const result = await composeServerlessDefinition(appDefinition);
 
             expect(result.provider.layers).toBeUndefined();
+<<<<<<< HEAD
+=======
 
+>>>>>>> 37c4892ee8a686eb7acfcd17c333b0ed73e1f120
             const ssmPermission = result.provider.iamRoleStatements.find(
                 statement => statement.Action && statement.Action.includes('ssm:GetParameter')
             );

package/management-ui/.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    '@eslint/js/recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.js'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.3' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

package/management-ui/README.md

@@ -0,0 +1,203 @@
+# Frigg Management UI
+
+A modern React-based management interface for Frigg development environment. Built with Vite, React, and Tailwind CSS, this application provides developers with a comprehensive dashboard to manage integrations, users, connections, and environment variables.
+
+## Features
+
+- **Dashboard**: Server control, metrics, and activity monitoring
+- **Integration Discovery**: Browse, install, and manage Frigg integrations
+- **Environment Management**: Configure environment variables and settings
+- **User Management**: Create and manage test users
+- **Connection Management**: Monitor and manage integration connections
+- **Real-time Updates**: WebSocket-based live updates
+- **Responsive Design**: Mobile-friendly interface
+- **Error Boundaries**: Robust error handling
+
+## Tech Stack
+
+- **React 18.3**: Modern React with hooks and functional components
+- **Vite**: Fast development and build tooling
+- **React Router**: Client-side routing
+- **Tailwind CSS**: Utility-first CSS framework
+- **Lucide React**: Modern icon library
+- **Socket.io**: Real-time communication
+- **Axios**: HTTP client
+- **@friggframework/ui**: Shared UI components
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 16+ and npm
+- Running Frigg backend server
+
+### Installation
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server (frontend only)
+npm run dev
+
+# Start both frontend and backend
+npm run dev:server
+
+# Build for production
+npm run build
+```
+
+### Available Scripts
+
+- `npm run dev` - Start Vite development server
+- `npm run dev:server` - Start both frontend and backend concurrently
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+- `npm run server` - Start backend server only
+- `npm run server:dev` - Start backend server with nodemon
+- `npm run lint` - Run ESLint
+- `npm run lint:fix` - Fix ESLint issues
+- `npm run typecheck` - Run TypeScript type checking
+
+## Project Structure
+
+```
+src/
+├── components/          # Reusable UI components
+│   ├── Button.jsx      # Custom button component
+│   ├── Card.jsx        # Card container components
+│   ├── ErrorBoundary.jsx
+│   ├── IntegrationCard.jsx
+│   ├── Layout.jsx      # Main layout component
+│   ├── LoadingSpinner.jsx
+│   ├── StatusBadge.jsx
+│   └── index.js        # Component exports
+├── hooks/              # React hooks
+│   ├── useFrigg.jsx    # Main Frigg state management
+│   └── useSocket.jsx   # WebSocket connection
+├── pages/              # Page components
+│   ├── Dashboard.jsx   # Main dashboard
+│   ├── Integrations.jsx
+│   ├── Environment.jsx
+│   ├── Users.jsx
+│   └── Connections.jsx
+├── services/           # API services
+│   └── api.js          # Axios configuration
+├── utils/              # Utility functions
+│   └── cn.js           # Class name utility
+├── App.jsx             # Root component
+├── main.jsx            # Application entry point
+└── index.css           # Global styles
+
+server/
+├── api/                # Backend API routes
+├── middleware/         # Express middleware
+├── utils/              # Server utilities
+├── websocket/          # WebSocket handlers
+└── index.js            # Server entry point
+```
+
+## Component Architecture
+
+### Layout Components
+- **Layout**: Main application layout with responsive sidebar
+- **ErrorBoundary**: Catches and displays errors gracefully
+
+### UI Components
+- **Button**: Customizable button with variants and sizes
+- **Card**: Container components for content sections
+- **StatusBadge**: Displays server status with color coding
+- **LoadingSpinner**: Loading indicators
+- **IntegrationCard**: Rich integration display component
+
+### State Management
+- **useFrigg**: Central state management for Frigg data
+- **useSocket**: WebSocket connection and real-time updates
+
+## API Integration
+
+The management UI communicates with the Frigg backend through:
+
+1. **REST API**: Standard CRUD operations
+2. **WebSocket**: Real-time updates and notifications
+
+### API Endpoints
+
+- `GET /api/frigg/status` - Server status
+- `POST /api/frigg/start` - Start Frigg server
+- `POST /api/frigg/stop` - Stop Frigg server
+- `GET /api/integrations` - List integrations
+- `POST /api/integrations/install` - Install integration
+- `GET /api/environment` - Environment variables
+- `PUT /api/environment` - Update environment variables
+- `GET /api/users` - List test users
+- `POST /api/users` - Create test user
+- `GET /api/connections` - List connections
+
+## Styling
+
+This project uses Tailwind CSS for styling with:
+
+- **Design System**: Consistent spacing, colors, and typography
+- **Responsive Design**: Mobile-first approach
+- **Component Variants**: Button and component style variants
+- **Dark Mode Ready**: CSS custom properties for theming
+
+### Custom Utilities
+
+- `cn()`: Utility for combining Tailwind classes with conditional logic
+
+## Error Handling
+
+- **Error Boundaries**: React error boundaries catch component errors
+- **API Error Handling**: Axios interceptors handle API errors
+- **Loading States**: Loading spinners and disabled states
+- **Validation**: Form validation and user feedback
+
+## Development
+
+### Code Style
+
+- **ESLint**: Linting with React and React Hooks rules
+- **Prettier**: Code formatting (recommended)
+- **TypeScript Ready**: Prepared for TypeScript migration
+
+### Best Practices
+
+- Functional components with hooks
+- Component composition over inheritance
+- Separation of concerns (UI, state, logic)
+- Error boundaries for robustness
+- Loading states for better UX
+- Responsive design principles
+
+## Building and Deployment
+
+```bash
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+The build output will be in the `dist/` directory and can be served by any static file server.
+
+## Environment Variables
+
+The application automatically detects the environment:
+
+- **Development**: API calls to `http://localhost:3001`
+- **Production**: API calls to the same origin
+
+## Contributing
+
+1. Follow the existing code style and patterns
+2. Add error handling for new features
+3. Include loading states for async operations
+4. Write tests for new components (when testing is set up)
+5. Update documentation for significant changes
+
+## License
+
+This project is part of the Frigg Framework and follows the same licensing terms.

package/management-ui/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/management-ui/{dist/index.html → index.html}

@@ -5,10 +5,9 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Frigg Management UI</title>
-    <script type="module" crossorigin src="/assets/index-CbM64Oba.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CkvseXTC.css">
   </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>