@friggframework/devtools 2.0.0--canary.545.e256e95.0 → 2.0.0--canary.553.dc5f898.0

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@friggframework/devtools",
   "prettier": "@friggframework/prettier-config",
-  "version": "2.0.0--canary.545.e256e95.0",
+  "version": "2.0.0--canary.553.dc5f898.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.545.e256e95.0",
-    "@friggframework/schemas": "2.0.0--canary.545.e256e95.0",
-    "@friggframework/test": "2.0.0--canary.545.e256e95.0",
+    "@friggframework/core": "2.0.0--canary.553.dc5f898.0",
+    "@friggframework/schemas": "2.0.0--canary.553.dc5f898.0",
+    "@friggframework/test": "2.0.0--canary.553.dc5f898.0",
     "@hapi/boom": "^10.0.1",
     "@inquirer/prompts": "^5.3.8",
     "axios": "^1.7.2",
@@ -55,11 +55,10 @@
     "validate-npm-package-name": "^5.0.0"
   },
   "devDependencies": {
-    "@friggframework/eslint-config": "2.0.0--canary.545.e256e95.0",
-    "@friggframework/prettier-config": "2.0.0--canary.545.e256e95.0",
+    "@friggframework/eslint-config": "2.0.0--canary.553.dc5f898.0",
+    "@friggframework/prettier-config": "2.0.0--canary.553.dc5f898.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",
@@ -89,5 +88,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e256e95b4ae4ef4f813ddd5ff50ab59776d5078b"
+  "gitHead": "dc5f898637016fc19993f998f919e35225b3d04b"
 }