@friggframework/devtools 2.0.0--canary.522.cbd3d5a.0 → 2.0.0--canary.517.21b69ac.0

package/infrastructure/domains/shared/cloudformation-discovery.test.js

@@ -589,8 +589,10 @@ describe('CloudFormationDiscovery', () => {
 
     describe('External VPC with routing infrastructure pattern', () => {
         it('should discover routing resources when VPC is external', async () => {
+            // This tests the external VPC pattern: external VPC/subnets/KMS,
+            // but stack creates routing infrastructure (route table, NAT route, VPC endpoints)
             const mockStack = {
-                StackName: 'frigg-app-production',
+                StackName: 'create-frigg-app-production',
                 Outputs: [],
             };
 
@@ -636,7 +638,7 @@ describe('CloudFormationDiscovery', () => {
             mockProvider.describeStack.mockResolvedValue(mockStack);
             mockProvider.listStackResources.mockResolvedValue(mockResources);
 
-            const result = await cfDiscovery.discoverFromStack('frigg-app-production');
+            const result = await cfDiscovery.discoverFromStack('create-frigg-app-production');
 
             // Verify routing infrastructure was discovered
             expect(result.routeTableId).toBe('rtb-0b83aca77ccde20a6');
@@ -805,8 +807,9 @@ describe('CloudFormationDiscovery', () => {
 
     describe('existingLogicalIds tracking', () => {
         it('should track OLD VPC endpoint logical IDs (VPCEndpointS3 pattern) for backwards compatibility', async () => {
+            // CRITICAL: Frontify production uses OLD naming convention
             const mockStack = {
-                StackName: 'frigg-app-production',
+                StackName: 'create-frigg-app-production',
                 Outputs: []
             };
 
@@ -822,7 +825,7 @@ describe('CloudFormationDiscovery', () => {
             mockProvider.describeStack.mockResolvedValue(mockStack);
             mockProvider.listStackResources.mockResolvedValue(mockResources);
 
-            const result = await cfDiscovery.discoverFromStack('frigg-app-production');
+            const result = await cfDiscovery.discoverFromStack('create-frigg-app-production');
 
             // CRITICAL: existingLogicalIds MUST contain old VPC endpoint names
             expect(result.existingLogicalIds).toBeDefined();

package/infrastructure/domains/shared/resource-discovery.js

@@ -88,8 +88,8 @@ async function gatherDiscoveredResources(appDefinition) {
 
         // Build discovery configuration
         const stage = process.env.SLS_STAGE || 'dev';
-        const stackName = `${appDefinition.name || 'frigg-app'}-${stage}`;
-        const serviceName = appDefinition.name || 'frigg-app';
+        const stackName = `${appDefinition.name || 'create-frigg-app'}-${stage}`;
+        const serviceName = appDefinition.name || 'create-frigg-app';
 
         // Try CloudFormation-first discovery
         const cfDiscovery = new CloudFormationDiscovery(provider, { serviceName, stage });
@@ -135,9 +135,9 @@ async function gatherDiscoveredResources(appDefinition) {
             // KMS keys CAN be shared across stages (encryption keys are safe to reuse)
             const kmsDiscovery = new KmsDiscovery(provider);
             const kmsConfig = {
-                serviceName: appDefinition.name || 'frigg-app',
+                serviceName: appDefinition.name || 'create-frigg-app',
                 stage,
-                keyAlias: `alias/${appDefinition.name || 'frigg-app'}-${stage}-frigg-kms`,
+                keyAlias: `alias/${appDefinition.name || 'create-frigg-app'}-${stage}-frigg-kms`,
             };
             const kmsResult = await kmsDiscovery.discover(kmsConfig);
 
@@ -166,7 +166,7 @@ async function gatherDiscoveredResources(appDefinition) {
         const ssmDiscovery = new SsmDiscovery(provider);
 
         const config = {
-            serviceName: appDefinition.name || 'frigg-app',
+            serviceName: appDefinition.name || 'create-frigg-app',
             stage,
             vpcId: appDefinition.vpc?.vpcId,
             databaseId: appDefinition.database?.postgres?.clusterId ||

package/infrastructure/domains/shared/types/discovery-result.test.js

@@ -219,7 +219,7 @@ describe('Discovery Result Utilities', () => {
                 ],
                 external: [],
                 fromCloudFormation: true,
-                stackName: 'frigg-app-production'
+                stackName: 'create-frigg-app-production'
             };
 
             expect(discovery.fromCloudFormation).toBe(true);

package/infrastructure/domains/shared/utilities/base-definition-factory.js

@@ -81,13 +81,7 @@ function createBaseDefinition(
             'node_modules/serverless-kms-grants/**',
             // Note: DO NOT exclude serverless-http - it's a runtime dependency!
 
-            // Exclude local dev files and environment files (NEVER deploy .env files!)
-            '.env',
-            '.env.*',
-            '.env.local',
-            '.env.*.local',
-            '**/.env',
-            '**/.env.*',
+            // Exclude local dev files
             'deploy.log',
             '.env.backup',
             'docker-compose.yml',
@@ -130,14 +124,6 @@ function createBaseDefinition(
             'node_modules/@friggframework/core/node_modules/**',
             'node_modules/@friggframework/devtools/node_modules/**',
 
-            // Exclude environment files (NEVER deploy .env files!)
-            '.env',
-            '.env.*',
-            '.env.local',
-            '.env.*.local',
-            '**/.env',
-            '**/.env.*',
-
             // Exclude development/test files from backend project
             'coverage/**',
             'test/**',
@@ -165,7 +151,7 @@ function createBaseDefinition(
 
     return {
         frameworkVersion: '>=3.17.0',
-        service: AppDefinition.name || 'frigg-app',
+        service: AppDefinition.name || 'create-frigg-app',
         package: {
             individually: true,
         },
@@ -311,15 +297,6 @@ function createBaseDefinition(
                     { httpApi: { path: '/health/{proxy+}', method: 'GET' } },
                 ],
             },
-            docs: {
-                handler: 'node_modules/@friggframework/core/handlers/routers/docs.handler',
-                skipEsbuild: true,
-                package: skipEsbuildPackageConfig,
-                events: [
-                    { httpApi: { path: '/api/docs', method: 'GET' } },
-                    { httpApi: { path: '/api/openapi.json', method: 'GET' } },
-                ],
-            },
             // Note: dbMigrate removed - MigrationBuilder now handles migration infrastructure
             // See: packages/devtools/infrastructure/domains/database/migration-builder.js
         },

package/infrastructure/domains/shared/utilities/base-definition-factory.test.js

@@ -30,10 +30,10 @@ describe('Base Definition Factory', () => {
             expect(result.provider.stage).toBe('${opt:stage}');
         });
 
-        it('should default service name to frigg-app', () => {
+        it('should default service name to create-frigg-app', () => {
             const result = createBaseDefinition({}, {}, {});
 
-            expect(result.service).toBe('frigg-app');
+            expect(result.service).toBe('create-frigg-app');
         });
 
         it('should use custom provider if specified', () => {

package/infrastructure/infrastructure-composer.test.js

@@ -157,7 +157,7 @@ describe('composeServerlessDefinition', () => {
 
             const result = await composeServerlessDefinition(appDefinition);
 
-            expect(result.service).toBe('frigg-app');
+            expect(result.service).toBe('create-frigg-app');
         });
 
         it('should use custom provider when specified', async () => {
@@ -1859,7 +1859,7 @@ describe('composeServerlessDefinition', () => {
 
             await expect(composeServerlessDefinition(appDefinition)).resolves.not.toThrow();
             const result = await composeServerlessDefinition(appDefinition);
-            expect(result.service).toBe('frigg-app');
+            expect(result.service).toBe('create-frigg-app');
         });
 
         it('should handle null/undefined integrations', async () => {

package/layers/prisma/.build-complete

@@ -0,0 +1,3 @@
+Build completed: 2025-11-17T22:06:29.204Z
+Node: v20.12.1
+Platform: darwin

package/layers/prisma/nodejs/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "prisma-lambda-layer",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@prisma/client": "^6.16.3"
+  }
+}

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

@@ -1,24 +1,17 @@
 # Frigg Management UI
 
-A modern React-based **developer tool** for managing local Frigg projects. Built with Vite, React, and Tailwind CSS following DDD/Hexagonal architecture principles.
-
-## Purpose
-
-The Management UI is a **local development tool** for Frigg framework developers to:
-- Manage Frigg project lifecycle (start/stop/inspect)
-- Perform git operations (branch management, sync)
-- Test integrations using `@friggframework/ui` in a sandboxed environment
-
-**NOT for runtime integration management** - that's handled by `@friggframework/ui` in deployed applications.
+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
 
-- **Project Management**: Discover, initialize, start/stop local Frigg projects
-- **Git Operations**: Branch management, repository status, sync operations
-- **Test Area**: Sandboxed environment using `@friggframework/ui` for integration testing
-- **Real-time Updates**: WebSocket-based live updates for process status
+- **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
-- **DDD Architecture**: Clean separation of concerns with hexagonal architecture
+- **Error Boundaries**: Robust error handling
 
 ## Tech Stack
 
@@ -35,153 +28,111 @@ The Management UI is a **local development tool** for Frigg framework developers
 
 ### Prerequisites
 
-- Node.js 18+ and npm
-- A Frigg project directory to manage
-
-### Quick Start
-
-```bash
-# From any Frigg project directory
-frigg ui
-
-# Or install and run globally
-npm install -g @friggframework/devtools
-frigg ui
-```
+- Node.js 16+ and npm
+- Running Frigg backend server
 
-### Development
+### Installation
 
 ```bash
 # Install dependencies
 npm install
 
-# Start development server (frontend + backend)
-npm run dev:server
-
-# Frontend only
+# Start development server (frontend only)
 npm run dev
 
-# Backend only
-npm run server: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 (port 5173)
+- `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 (port 3210)
+- `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 test` - Run Jest tests
+- `npm run typecheck` - Run TypeScript type checking
 
-## Architecture
-
-### DDD/Hexagonal Architecture (Clean Architecture)
-
-The Management UI follows Domain-Driven Design principles with clear separation of concerns:
+## Project Structure
 
 ```
-server/src/
-├── presentation/           # Routes & Controllers (HTTP adapters)
-│   ├── routes/
-│   │   ├── projectRoutes.js    # Project management endpoints
-│   │   ├── gitRoutes.js        # Git operation endpoints
-│   │   └── testAreaRoutes.js   # Test area endpoints
-│   └── controllers/
-│       ├── ProjectController.js
-│       └── GitController.js
-├── application/            # Use Cases & Services (Business logic)
-│   ├── use-cases/
-│   │   ├── StartProjectUseCase.js
-│   │   ├── StopProjectUseCase.js
-│   │   ├── InspectProjectUseCase.js
-│   │   └── git/
-│   │       ├── CreateBranchUseCase.js
-│   │       ├── SwitchBranchUseCase.js
-│   │       └── SyncBranchUseCase.js
-│   └── services/
-│       ├── ProjectService.js
-│       └── GitService.js
-├── domain/                # Domain Entities & Services
-│   ├── entities/
-│   │   ├── Project.js
-│   │   └── AppDefinition.js
-│   └── services/
-│       ├── ProcessManager.js
-│       └── GitService.js
-└── infrastructure/        # Repositories & Adapters
-    ├── repositories/
-    │   └── FileSystemProjectRepository.js
-    ├── adapters/
-    │   ├── FriggCliAdapter.js
-    │   └── GitAdapter.js
-    └── persistence/
-        └── SimpleGitAdapter.js
-
-src/                       # Frontend (React)
-├── presentation/          # UI Layer
-│   ├── components/
-│   │   ├── common/        # Shared UI components
-│   │   ├── admin/         # Admin view components
-│   │   └── zones/         # Zone-based organization
-│   ├── pages/
-│   └── hooks/
-├── application/           # Frontend use cases
-├── domain/               # Frontend domain models
-└── infrastructure/       # API clients
+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
 ```
 
-## Core Functionality
-
-### 1. Project Management
-- **Discover Projects**: Automatically find Frigg projects in your workspace
-- **Initialize**: Set up new Frigg projects
-- **Start/Stop**: Manage local Frigg process lifecycle
-- **Inspect**: Deep project analysis (structure, config, dependencies)
-
-### 2. Git Operations
-- **Branch Management**: Create, switch, delete branches
-- **Repository Status**: Real-time git status and branch info
-- **Sync Operations**: Pull, push, and synchronize branches
-- **Working Directory**: Track uncommitted changes
-
-### 3. Test Area
-- **Integration Testing**: Uses `@friggframework/ui` for testing integrations
-- **User Simulation**: Switch between test users
-- **Live Testing**: Test integrations in real-time with hot reload
-- **Same UI**: Test with the exact UI end-users will see
-
-## API Endpoints
-
-The management UI backend exposes clean REST APIs following DDD principles:
-
-### Project Management (`/api/projects`)
-- `GET /api/projects/discover` - Discover Frigg projects in workspace
-- `POST /api/projects/initialize` - Initialize new Frigg project
-- `GET /api/projects/inspect` - Deep inspection of project structure
-- `GET /api/projects/status` - Get project and process status
-- `POST /api/projects/start` - Start Frigg project
-- `POST /api/projects/stop` - Stop Frigg project
-
-### Git Operations (`/api/git`)
-- `GET /api/git/status` - Repository and branch status
-- `GET /api/git/branches` - List all branches
-- `POST /api/git/branches` - Create new branch
-- `PUT /api/git/branches/:name` - Switch to branch
-- `DELETE /api/git/branches/:name` - Delete branch
-- `POST /api/git/sync` - Sync branch with remote
-
-### Test Area (`/api/test-area`)
-- `GET /api/test-area/status` - Check if Frigg is running for testing
-- `POST /api/test-area/start` - Start Frigg for test area
-- `POST /api/test-area/stop` - Stop test area Frigg instance
-- `GET /api/test-area/health` - Health check for test Frigg
-
-### System
-- `GET /api/health` - Management UI health check
+## 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
 
@@ -205,46 +156,20 @@ This project uses Tailwind CSS for styling with:
 
 ## Development
 
-### DDD/Hexagonal Architecture Guidelines
-
-**Golden Rule**: Handlers/Controllers ONLY call Use Cases, NEVER Repositories directly.
-
-```
-Controller → Use Case → Repository → External System
-```
-
-#### Layer Responsibilities
-
-1. **Presentation Layer** (Routes & Controllers)
-   - HTTP-specific logic only (status codes, headers, response formatting)
-   - Calls use cases, never repositories
-   - Thin adapters with minimal logic
-   - Error mapping (domain errors → HTTP errors)
-
-2. **Application Layer** (Use Cases & Services)
-   - Business logic and orchestration
-   - Coordinates multiple repository calls
-   - Enforces business rules
-   - Receives dependencies via constructor (dependency injection)
-
-3. **Domain Layer** (Entities & Domain Services)
-   - Core business objects
-   - Domain logic and invariants
-   - Technology-agnostic
-
-4. **Infrastructure Layer** (Repositories & Adapters)
-   - Pure database/file operations (CRUD)
-   - External API calls
-   - No business logic
-   - Returns raw data
-
 ### Code Style
 
-- **DDD Principles**: Follow hexagonal architecture patterns
 - **ESLint**: Linting with React and React Hooks rules
-- **Functional Components**: React hooks and composition
-- **Dependency Injection**: Constructor-based injection
-- **Single Responsibility**: Each use case does one thing
+- **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
 
@@ -258,81 +183,20 @@ npm run preview
 
 The build output will be in the `dist/` directory and can be served by any static file server.
 
-## Key Architectural Decisions
-
-### Why No Integration Management in Management UI?
-
-The Management UI is a **developer tool** for managing local Frigg projects. Integration and connection management belongs in `@friggframework/ui`, which is:
-- Used by deployed Frigg applications (runtime)
-- End-user facing
-- Embedded in Test Area for testing
-
-This separation ensures:
-- ✅ Zero duplication between dev tools and runtime UI
-- ✅ Clear boundaries of responsibility
-- ✅ Developers test with the exact UI end-users see
-- ✅ Simpler maintenance (single source of truth)
-
-### Test Area Pattern
-
-The Test Area embeds `@friggframework/ui` to provide:
-1. **Integration testing** with the production UI
-2. **User simulation** for multi-tenant scenarios
-3. **Real-time testing** with hot reload
-4. **Authentication context** for testing flows
-
 ## Environment Variables
 
-### Backend
-- `PORT` - Server port (default: 3210)
-- `PROJECT_PATH` - Default project path to manage
+The application automatically detects the environment:
 
-### Frontend
-- Auto-detects environment:
-  - **Development**: API at `http://localhost:3210`
-  - **Production**: Same origin
+- **Development**: API calls to `http://localhost:3001`
+- **Production**: API calls to the same origin
 
 ## Contributing
 
-1. **Follow DDD Architecture**:
-   - Controllers call use cases, not repositories
-   - Business logic in use cases, not controllers
-   - Repositories only for data access
-2. **Add error handling** for new features
-3. **Include loading states** for async operations
-4. **Write tests** using the established patterns
-5. **Update documentation** for significant changes
-6. **Use dependency injection** for all dependencies
-
-## Testing
-
-```bash
-# Run server tests
-npm run test
-
-# Run specific test file
-npm run test -- path/to/test.js
-
-# Watch mode
-npm run test -- --watch
-```
-
-### Test Structure
-- **Unit Tests**: Domain entities, value objects
-- **Integration Tests**: Use case workflows
-- **Controller Tests**: HTTP endpoint behavior
-
-## Related Packages
-
-- **@friggframework/core**: Frigg framework core functionality
-- **@friggframework/ui**: Runtime integration UI (used in Test Area)
-- **@friggframework/devtools**: CLI tools for Frigg development
-
-## Documentation
-
-- [DDD Architecture](./docs/ARCHITECTURE.md)
-- [Cleanup Summary](./CLEANUP_SUMMARY.md)
-- [Frigg Framework Docs](https://docs.friggframework.org)
+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
 

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"
+}