feat: container monitoring integration + polish (PR-3)

- Integration tests: SSE auth, connection limits, lifecycle hooks, event persistence (6 tests)
- Instance events history API: GET /instances/{id}/events
- Documentation updates: terminal.md, backend.md, frontend.md
- Performance: SSE max 5 connections, health monitor write-on-change

Quality gates: pytest 21 monitoring passed, 172 unit passed (4 pre-existing), vitest 14 passed, tsc clean, eslint clean, ruff clean
This commit is contained in:
2026-05-29 10:23:28 +02:00
parent f13a63dc2f
commit 2682e0268c
6 changed files with 481 additions and 4 deletions
+31 -4
View File
@@ -26,16 +26,21 @@ apps/web/src/
│ ├── ssh_keys.ts # SSH key API
│ ├── tool_types.ts # Tool type API
│ ├── users.ts # User API
│ ├── events.ts # SSE events API
│ └── settings.ts # Settings API
├── components/ # Reusable components
│ ├── app-shell.tsx # Main app layout
│ ├── protected-route.tsx # Auth guard
│ ├── event-toast-bridge.tsx # Events → toasts
│ └── [more...]
├── context/ # React contexts
── auth.tsx # Auth state management
├── state/ # Global state
── auth.tsx # Auth state management
│ ├── events.tsx # Event provider (SSE)
│ └── toast.tsx # Toast notifications
├── hooks/ # Custom hooks
│ ├── use-auth.ts # Auth hook
── use-theme.ts # Theme hook
── use-theme.ts # Theme hook
│ └── use-events.ts # SSE events hook
├── pages/ # Page components (routes)
│ ├── dashboard.tsx # Dashboard
│ ├── projects.tsx # Project list
@@ -155,6 +160,28 @@ interface AuthState {
}
```
### Real-Time Events (SSE)
The frontend receives real-time instance events via Server-Sent Events:
```
EventSource → useEvents() hook → EventProvider → EventToastBridge → ToastContainer
```
**Components:**
- `useEvents()`: Manages SSE connection with auto-reconnect
- `EventProvider`: Shares event stream across components
- `EventToastBridge`: Maps events to toast notifications
- `ToastContainer`: Displays and manages toast stack
**Event-to-Toast Mapping:**
| Event | Toast Severity | Auto-dismiss |
|-------|---------------|--------------|
| `instance.starting` | Info | 3s |
| `instance.running` | Success | 3s |
| `instance.error` | Error | Persistent |
| `instance.stopped` | Info | 3s |
### 5. Routing Structure
```typescript
@@ -271,10 +298,10 @@ test('renders file list', () => {
## Future Improvements
- [x] Implement real-time updates (SSE)
- [ ] Add React Query for server state management
- [ ] Implement virtual scrolling for large file trees
- [ ] Add service worker for offline support
- [ ] Implement real-time updates (WebSocket)
- [ ] Add error boundary components
## Development Workflow