@friggframework/devtools 2.0.0--canary.517.179491e.0 → 2.0.0--canary.522.893db5d.0

package/infrastructure/jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  displayName: 'Infrastructure',
+  rootDir: __dirname,
+  testMatch: [
+    '<rootDir>/**/*.test.js',
+    '<rootDir>/**/*.spec.js',
+  ],
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/__tests__/fixtures/',
+    '/__tests__/helpers/',
+  ],
+  testEnvironment: 'node',
+  testTimeout: 10000,
+  transform: {},
+};

package/management-ui/README.md

@@ -1,17 +1,24 @@
 # 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.
+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.
 
 ## 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
+- **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
 - **Responsive Design**: Mobile-friendly interface
-- **Error Boundaries**: Robust error handling
+- **DDD Architecture**: Clean separation of concerns with hexagonal architecture
 
 ## Tech Stack
 
@@ -28,111 +35,153 @@ A modern React-based management interface for Frigg development environment. Bui
 
 ### Prerequisites
 
-- Node.js 16+ and npm
-- Running Frigg backend server
+- 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
+```
 
-### Installation
+### Development
 
 ```bash
 # Install dependencies
 npm install
 
-# Start development server (frontend only)
-npm run dev
-
-# Start both frontend and backend
+# Start development server (frontend + backend)
 npm run dev:server
 
-# Build for production
-npm run build
+# Frontend only
+npm run dev
+
+# Backend only
+npm run server:dev
 ```
 
 ### Available Scripts
 
-- `npm run dev` - Start Vite development server
+- `npm run dev` - Start Vite development server (port 5173)
 - `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` - Start backend server (port 3210)
 - `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
+- `npm run test` - Run Jest tests
 
-## Project Structure
+## Architecture
 
-```
-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
+### DDD/Hexagonal Architecture (Clean Architecture)
 
-The management UI communicates with the Frigg backend through:
+The Management UI follows Domain-Driven Design principles with clear separation of concerns:
 
-1. **REST API**: Standard CRUD operations
-2. **WebSocket**: Real-time updates and notifications
-
-### API Endpoints
+```
+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
+```
 
-- `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
+## 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
 
 ## Styling
 
@@ -156,20 +205,46 @@ This project uses Tailwind CSS for styling with:
 
 ## Development
 
-### Code Style
+### DDD/Hexagonal Architecture Guidelines
 
-- **ESLint**: Linting with React and React Hooks rules
-- **Prettier**: Code formatting (recommended)
-- **TypeScript Ready**: Prepared for TypeScript migration
+**Golden Rule**: Handlers/Controllers ONLY call Use Cases, NEVER Repositories directly.
 
-### Best Practices
+```
+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)
 
-- 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
+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
 
 ## Building and Deployment
 
@@ -183,20 +258,81 @@ 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
 
-The application automatically detects the environment:
+### Backend
+- `PORT` - Server port (default: 3210)
+- `PROJECT_PATH` - Default project path to manage
 
-- **Development**: API calls to `http://localhost:3001`
-- **Production**: API calls to the same origin
+### Frontend
+- Auto-detects environment:
+  - **Development**: API at `http://localhost:3210`
+  - **Production**: 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
+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)
 
 ## License
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@friggframework/devtools",
   "prettier": "@friggframework/prettier-config",
-  "version": "2.0.0--canary.517.179491e.0",
+  "version": "2.0.0--canary.522.893db5d.0",
   "bin": {
     "frigg": "./frigg-cli/index.js"
   },
@@ -25,9 +25,9 @@
     "@babel/eslint-parser": "^7.18.9",
     "@babel/parser": "^7.25.3",
     "@babel/traverse": "^7.25.3",
-    "@friggframework/core": "2.0.0--canary.517.179491e.0",
-    "@friggframework/schemas": "2.0.0--canary.517.179491e.0",
-    "@friggframework/test": "2.0.0--canary.517.179491e.0",
+    "@friggframework/core": "2.0.0--canary.522.893db5d.0",
+    "@friggframework/schemas": "2.0.0--canary.522.893db5d.0",
+    "@friggframework/test": "2.0.0--canary.522.893db5d.0",
     "@hapi/boom": "^10.0.1",
     "@inquirer/prompts": "^5.3.8",
     "axios": "^1.7.2",
@@ -55,10 +55,11 @@
     "validate-npm-package-name": "^5.0.0"
   },
   "devDependencies": {
-    "@friggframework/eslint-config": "2.0.0--canary.517.179491e.0",
-    "@friggframework/prettier-config": "2.0.0--canary.517.179491e.0",
+    "@friggframework/eslint-config": "2.0.0--canary.522.893db5d.0",
+    "@friggframework/prettier-config": "2.0.0--canary.522.893db5d.0",
     "aws-sdk-client-mock": "^4.1.0",
     "aws-sdk-client-mock-jest": "^4.1.0",
+    "exit-x": "^0.2.2",
     "jest": "^30.1.3",
     "osls": "^3.40.1",
     "prettier": "^2.7.1",
@@ -88,5 +89,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "179491ee820576004873fdfdbe0e8e10a807098d"
+  "gitHead": "893db5dc366945920987fecc1e8ab53754f76f63"
 }

package/frigg-cli/install-command/logger.js

@@ -1,12 +0,0 @@
-function logInfo(message) {
-    console.log(message);
-}
-
-function logError(message, error) {
-    console.error(message, error);
-}
-
-module.exports = {
-    logInfo,
-    logError,
-};