Nano Banana Pro
Agent skill for nano-banana-pro
**TM Event Flow App** is a web application developed in Angular for managing and visualizing event flows. The application allows users to:
Sign in to like and favorite skills
TM Event Flow App is a web application developed in Angular for managing and visualizing event flows. The application allows users to:
The application connects to a REST API backend and uses WebSockets to receive real-time updates about events, brokers, messages, and executions.
tm-event-flow-app/ ├─ public/ # Archivos públicos (favicon, assets) ├─ src/ │ ├─ index.html # Página base de la aplicación Angular │ ├─ main.ts # Punto de entrada del frontend │ ├─ styles.css # Estilos globales │ ├─ theme.scss # Definición de temas y variables │ └─ app/ │ ├─ app.component.* # Componente raíz de la aplicación │ ├─ app.config.ts # Configuración general │ ├─ app.routes.ts # Rutas principales de la aplicación │ │ │ ├─ common/ # Componentes y módulos compartidos │ │ └─ material/ # Módulos Angular Material │ │ │ ├─ core/ # Servicios, interfaces y utilidades base │ │ ├─ enums/ # Enumeraciones (roles, estados, eventos WebSocket) │ │ ├─ interfaces/ # Definición de contratos de datos │ │ └─ services/ # Servicios globales (auth, broker, flow, execution, theme) │ │ │ ├─ auth/ # Módulo de autenticación │ │ ├─ login/ # Componente de inicio de sesión │ │ └─ auth.routes.ts # Rutas del módulo de autenticación │ │ │ ├─ dashboard/ # Módulo principal del sistema │ │ ├─ layout/ # Estructura visual del panel │ │ ├─ components/ # Submódulos funcionales │ │ │ ├─ brokers/ # Administración de brokers de mensajería │ │ │ └─ flows/ # Gestión y ejecución de flujos de eventos │ │ │ ├─ flow-detail/ # Detalle y visualización de flujos │ │ │ ├─ layout/ # Layout para el módulo de flows │ │ │ ├─ my-flows/ # Lista de flujos del usuario │ │ │ └─ executions/ # Gestión de ejecuciones de tests │ │ │ ├─ execution-create/ # Crear ejecuciones con orden de eventos │ │ │ ├─ execution-list/ # Listar y gestionar ejecuciones │ │ │ └─ test-case-results/ # Componentes de resultados │ │ │ ├─ event-order-validation-result/ │ │ │ ├─ infrastructure-validation-result/ │ │ │ ├─ contract-validation-result/ │ │ │ ├─ missing-event-detection-result/ │ │ │ └─ duplicate-message-detection-result/ │ │ └─ dashboard.routes.ts │ │ │ ├─ settings/ # Configuración y personalización del sistema │ │ ├─ layout/ # Vista de configuración │ │ └─ components/ │ │ └─ theme/ # Cambio de temas y apariencia │ │ │ ├─ home/ # Página inicial y navegación general │ │ ├─ layout/ # Estructura principal │ │ └─ home.routes.ts │ │ │ └─ environment/ # Variables de entorno │ └─ environment.ts # Configuración de URLs del backend │ ├─ angular.json # Configuración del proyecto Angular ├─ package.json # Dependencias y scripts ├─ tsconfig.json # Configuración TypeScript ├─ tsconfig.app.json # Configuración específica del frontend └─ tsconfig.spec.json # Configuración de pruebas unitarias
src/app/ ├── auth/ # Authentication module │ ├── auth.routes.ts # Authentication routes │ └── login/ # Login component │ ├── dashboard/ # Main dashboard module │ ├── components/ │ │ ├── brokers/ # Broker management │ │ └── flows/ # Flow management │ │ ├── flow-detail/ # Flow detail │ │ ├── layout/ # Layout for flows │ │ ├── my-flows/ # User's flow list │ │ └── executions/ # Execution management (NEW) │ │ ├── execution-create/ # Create execution tests │ │ ├── execution-list/ # List and manage executions │ │ └── test-case-results/ # Test case result components │ │ ├── infrastructure-validation-result/ │ │ ├── contract-validation-result/ │ │ ├── missing-event-detection-result/ │ │ └── duplicate-message-detection-result/ │ ├── layout/ # Main dashboard layout │ └── dashboard.routes.ts # Dashboard routes │ ├── home/ # Home module │ └── layout/ │ ├── core/ # Shared core functionality │ ├── enums/ # Enumerations │ │ ├── auth.enum.ts # Authentication states │ │ └── socket.enum.ts # WebSocket events │ ├── interfaces/ # TypeScript interfaces │ │ ├── broker.interface.ts │ │ ├── flow.interface.ts │ │ ├── login.interface.ts │ │ ├── messages.interface.ts │ │ ├── user.interface.ts │ │ ├── menu.interface.ts │ │ ├── execution.interface.ts # Execution models (NEW) │ │ ├── test-case.interface.ts # Test case models (NEW) │ │ └── result.interface.ts # Test result models (NEW) │ └── services/ # Singleton services │ ├── auth.service.ts │ ├── broker.service.ts │ ├── flow.service.ts │ ├── theme.service.ts │ ├── websocket.service.ts │ ├── execution.service.ts # Execution operations (NEW) │ └── test-case.service.ts # Test case operations (NEW) │ ├── common/ # Common components and utilities │ └── material/ # Angular Material configuration │ ├── environment/ # Environment configuration │ └── environment.ts │ ├── app.config.ts # Application configuration └── app.routes.ts # Main routes
core/services for shared logicAuthService with signals)inject() and constructor injectionAuthService.login()localStorage_currentUser, _authStatus)x-token headercyan-orange (prebuilt theme)Component suffix (e.g., LoginComponent, ExecutionCreateComponent)Service suffix (e.g., AuthService, ExecutionService)I prefix (e.g., User, Flow, Execution)AuthStatus, SocketEvents)auth.service.ts, flow-detail.component.ts, execution-create.component.ts)_ prefix (e.g., _currentUser, _coreBaseURL)currentUser, authStatus)Each component/service follows this structure:
component-name/ ├── component-name.component.ts ├── component-name.component.html └── component-name.component.css
tsconfig.jsonindex.ts) to group exportssignal() and computed() for reactive statesrc/styles.css and src/theme.scss{ id: string; name: string; email: string; createdAt: Date; updatedAt: Date; }
{ id: string; name: string; type: string; documentationIds: string[]; documentations: Documentation[]; userId: string; createdAt: Date; updatedAt: Date; }
{ _id: string; _name: string; _uri: string; _status: string; _userId: string; _user: User; // ... more fields }
{ id: string; name: string; flowId: string; userId: string; trigger: ExecutionTrigger; timeout: number; orderMode: 'strict' | 'flexible'; version: number; createdAt: Date; updatedAt: Date; startedAt: Date | null; completedAt: Date | null; testCases: EventTestCase[]; status: ExecutionStatus; // 'created' | 'running' | 'succeeded' | 'failed' | 'cancelled' testCasesToRun: string[]; eventsOrder: { [key: string]: number }; timeoutTestEvents?: number; executionWindow?: number; }
{ type: 'external' | 'internalEvent'; eventId: string | null; payload?: any; }
{ id: string; eventId: string; type: 'contract' | 'response' | 'timing' | 'infrastructure'; eventOrder: number; name: string; description: string; status: TestCaseStatus; // 'created' | 'running' | 'passed' | 'failed' | 'timeout' | 'skipped' startAt: Date | null; endAt: Date | null; results: any | null; eventData: EventData; }
{ name: string; description: string; type: string; }
The application supports the following test case types:
infrastructure_validation: Validates exchange and routing key configuration
contract_validation: Validates message payload contracts
missing_event_detection: Detects missing events during execution
duplicate_message_detection: Detects duplicate messages
event_order_validation (NEW): Validates event execution order
orderMode: 'strict'checking: Checking authentication statusauthenticated: User authenticatednotAuthenticated: User not authenticatednew-message: New message receivedsocket-events: Socket eventsbrokers: Broker updatesexecutions: Execution updates (NEW)flows: Flow updatesBase URL:
http://localhost:3000/event-flow/api/v1
POST /auth/login - LoginPOST /auth/validate - Validate tokenGET /brokers - Get brokersPOST /brokers - Create brokerPATCH /brokers/:id - Update brokerDELETE /brokers/:id - Delete brokerPATCH /brokers/toggle-connection/:id - Toggle connectionGET /flows/by-user - Get user flowsGET /executions/by-user - Get all user executionsPOST /executions - Create new executionGET /executions/:id - Get execution by IDDELETE /executions/:id - Delete executionGET /executions/by-flow/:flowId - Get executions for specific flowPOST /executions/run/:executionId - Run execution (optional timeout in body)POST /executions/stop/:executionId - Stop running executionGET /executions/test-cases - Get available test casesx-token: Authentication token (required in protected endpoints)/dashboard/flows/executions/createstrict or flexible
event_order_validation is selected and orderMode is not strict:
POST /executions → Success → navigate to executions list/dashboard/flows/executions/listinfrastructure_validation → InfrastructureValidationResultComponentcontract_validation → ContractValidationResultComponentmissing_event_detection → MissingEventDetectionResultComponentduplicate_message_detection → DuplicateMessageDetectionResultComponentThis workflow ensures that
event_order_validation test case only runs with strict order mode:
Scenario A: User selects
event_order_validation test case
flexible:
strict → Success confirmationScenario B: User changes orderMode to
flexible
event_order_validation is already selected:
strict or continueReal-time validation: Triggers on both:
(selectionChange) on test cases dropdown)(selectionChange) on order mode dropdown)# Start development server npm start # or ng serve # Build in development mode with watch npm run watch # Build for production npm run build
# Run unit tests npm test # or ng test
# Generate component ng generate component component-name # Generate service ng generate service service-name # View schematics help ng generate --help
# Production build (optimized) ng build --configuration production # Development build ng build --configuration development
REST API Backend
environment.tsx-token headerWebSocket Server
environment.ts (wsURL)Angular Material
cyan-orange (prebuilt)File:
src/app/environment/environment.ts
{ production: boolean; coreBaseURL: string; // REST API URL wsURL: string; // WebSocket server URL }
false (connects manually after login)WebsocketServiceSocketEvents enumSocketEvents.executions for real-time execution statuslocalStorage with key 'token'Path:
src/app/dashboard/components/flows/executions/execution-create/execution-create.component.ts
Key Features:
event_order_validation test caseKey Methods:
loadFlows(): Fetches user's flowsloadTestCases(): Fetches available test casesonFlowSelected(): Extracts events from selected flowaddEventToOrder(): Adds event to execution orderdrop(): Handles drag-drop reorderingbuildPayloadForm(): Creates dynamic form from event payload schemaonTestCasesChange(): Validates test case selectiononOrderModeChange(): Validates order mode changesvalidateEventOrderTestCase(): Checks event_order_validation requirementsonSubmit(): Creates execution with full validationPath:
src/app/dashboard/components/flows/executions/execution-list/execution-list.component.ts
Key Features:
Key Methods:
getExecutions(): Loads all user executionssubscribeToExecutionUpdates(): Listens for WebSocket updatesrunExecution(): Starts execution with optional timeoutstopExecution(): Stops running executiondeleteExecution(): Removes execution with confirmationselectExecution(): Displays execution detailsgetExecutionDuration(): Calculates execution durationcanRunExecution(), canStopExecution(), canDeleteExecution(): Permission checksisInfrastructureValidation(), isContractValidation(), etc.: Test case type detectionAll located in:
src/app/dashboard/components/flows/executions/test-case-results/
InfrastructureValidationResultComponent
ContractValidationResultComponent
MissingEventDetectionResultComponent
DuplicateMessageDetectionResultComponent
Path:
src/app/core/services/execution.service.ts
Methods:
getExecutions(): Observable<Execution[]> - Get all user executionscreateExecution(execution): ObservablegetExecutionById(id): ObservabledeleteExecution(id): ObservablegetByFlowId(flowId): Observable<Execution[]> - Get executions for flowrunExecution(executionId, customTimeout?): ObservablestopExecution(executionId): ObservablePath:
src/app/core/services/test-case.service.ts
Methods:
getTestCases(): Observable<TestCase[]> - Get available test cases