Skip to content

Commit 92f899b

Browse files
ivikashivikash
committed
refactor: improve type safety and validation
- Add shared types for automation options - Create validation utilities for payload and options - Add tests for validation logic - Fix duplicate headless flag in browser-service - Remove unused files and components - Update documentation with architecture diagrams - Improve error handling for invalid configurations
1 parent caa9185 commit 92f899b

23 files changed

+437
-664
lines changed

‎README.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@ A web application that allows users to input prompts, which are then used to run
44

55
## Architecture
66

7+
For detailed architecture information, including data flow diagrams and dependency chains, see [ARCHITECTURE.md](./docs/ARCHITECTURE.md).
8+
79
### Frontend
810
- Next.js with React and TypeScript
911
- Shadcn UI components
1012
- Real-time updates with WebSockets
1113

1214
### Backend
13-
- FastAPI Python server
14-
- WebSocket server for real-time communication
15+
- Node.js WebSocket server
16+
- Python automation service
1517
- Integration with browser-use library
1618

1719
## Setup

‎docs/ARCHITECTURE.md

+162
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
# OpenManus Architecture
2+
3+
## Overview
4+
5+
OpenManus is built with a modern web architecture that combines React for the frontend and Node.js/Python for the backend, using WebSocket for real-time communication.
6+
7+
## Data Flow Diagram
8+
9+
```mermaid
10+
graph TD
11+
%% Frontend Components
12+
A[src/app/page.tsx] --> B[src/components/prompt-form.tsx]
13+
A --> C[src/components/chat-panel.tsx]
14+
A --> D[src/components/header.tsx]
15+
A --> E[src/components/footer.tsx]
16+
17+
%% Frontend Dependencies
18+
B --> F[src/hooks/useSocket.ts]
19+
B --> G[src/components/ui/button.tsx]
20+
B --> H[src/components/ui/textarea.tsx]
21+
B --> I[src/components/ui/label.tsx]
22+
B --> J[src/components/ui/select.tsx]
23+
B --> K[src/components/ui/switch.tsx]
24+
25+
%% Socket Connection
26+
F --> L[src/lib/socket.ts]
27+
L --> M[src/server/index.ts]
28+
29+
%% Backend Flow
30+
M --> N[src/server/browser-service.ts]
31+
N --> O[Python Browser Automation]
32+
33+
%% Event Flow
34+
B -- prompt:submit --> M
35+
M -- automation:log --> C
36+
M -- automation:complete --> C
37+
M -- automation:error --> C
38+
N -- log events --> M
39+
O -- output --> N
40+
```
41+
42+
## Dependency Chains
43+
44+
### 1. Frontend UI Chain
45+
```
46+
page.tsx
47+
├── prompt-form.tsx
48+
│ ├── button.tsx
49+
│ ├── textarea.tsx
50+
│ ├── label.tsx
51+
│ ├── select.tsx
52+
│ └── switch.tsx
53+
├── chat-panel.tsx
54+
├── header.tsx
55+
└── footer.tsx
56+
```
57+
58+
### 2. Socket Communication Chain
59+
```
60+
prompt-form.tsx
61+
├── useSocket.ts
62+
│ └── socket.ts
63+
└── socket.io-client
64+
```
65+
66+
### 3. Backend Processing Chain
67+
```
68+
server/index.ts
69+
├── socket.io
70+
├── browser-service.ts
71+
│ ├── child_process (spawn)
72+
│ └── events (EventEmitter)
73+
└── utils/logger.ts
74+
```
75+
76+
### 4. Data Flow Chain
77+
```
78+
User Input
79+
└── prompt-form.tsx
80+
└── Socket Event (prompt:submit)
81+
└── server/index.ts
82+
└── browser-service.ts
83+
└── Python Process
84+
└── Browser Automation
85+
└── Results
86+
└── Socket Events
87+
└── chat-panel.tsx
88+
```
89+
90+
## Event Flow Details
91+
92+
### 1. User Input
93+
- User enters prompt in prompt-form.tsx
94+
- Configures options (model, headless, etc.)
95+
- Clicks submit button
96+
97+
### 2. Frontend Processing
98+
- prompt-form.tsx validates input
99+
- Emits 'prompt:submit' event with options
100+
- Updates UI loading state
101+
102+
### 3. Backend Processing
103+
- server/index.ts receives event
104+
- Creates/uses BrowserUseService instance
105+
- Passes configuration to automation
106+
107+
### 4. Automation Flow
108+
- browser-service.ts spawns Python process
109+
- Monitors process output
110+
- Emits progress events
111+
112+
### 5. Response Flow
113+
Server emits events:
114+
- automation:log (progress updates)
115+
- automation:complete (success)
116+
- automation:error (failures)
117+
Frontend components update based on events
118+
119+
### 6. UI Updates
120+
- chat-panel.tsx displays messages
121+
- prompt-form.tsx updates loading state
122+
- Error handling shows notifications
123+
124+
## Component Dependencies
125+
126+
Dependencies between components are managed through:
127+
- Props for React components
128+
- Socket events for client-server communication
129+
- EventEmitter for backend service communication
130+
- File system for Python process interaction
131+
132+
## Architecture Benefits
133+
134+
This architecture provides:
135+
- Decoupled frontend and backend
136+
- Real-time updates through WebSocket
137+
- Extensible automation options
138+
- Robust error handling
139+
- Clear separation of concerns
140+
141+
## Key Files and Their Roles
142+
143+
### Frontend
144+
- `src/app/page.tsx`: Main application page
145+
- `src/components/prompt-form.tsx`: Form for user input and configuration
146+
- `src/components/chat-panel.tsx`: Displays automation progress
147+
- `src/hooks/useSocket.ts`: WebSocket connection management
148+
149+
### Backend
150+
- `src/server/index.ts`: WebSocket server and request handling
151+
- `src/server/browser-service.ts`: Browser automation service
152+
- `src/server/utils/logger.ts`: Logging utilities
153+
154+
## Configuration Management
155+
156+
The application configuration flows through multiple layers:
157+
1. Frontend form inputs
158+
2. WebSocket event payload
159+
3. Backend service configuration
160+
4. Python process arguments
161+
162+
Each layer validates and processes the configuration appropriately, ensuring type safety and proper defaults.

0 commit comments

Comments
 (0)