Complete implementation ready for Coolify: - Node.js 22 + Fastify + socket.io backend - PostgreSQL 16 + Redis 7 services - Docker Compose configuration - Deployment scripts and documentation Co-Authored-By: Paperclip <noreply@paperclip.ing>
2.1 KiB
2.1 KiB
AgentHub Web Client
Frontend React minimal pour AgentHub. Stack : React 18 + Vite + TanStack Query + socket.io-client + Tailwind CSS.
Prérequis
- Node 22 LTS (voir
.nvmrc) - npm 10+
- Backend AgentHub lancé sur http://localhost:3000
Installation
npm install
Configuration
Créer un fichier .env à la racine de web/ (voir .env.example) :
VITE_API_URL=http://localhost:3000
VITE_WS_URL=http://localhost:3000
Développement
npm run dev
Ouvre http://localhost:5173 par défaut.
Build production
npm run build
Le bundle est généré dans dist/. Taille actuelle : ~86 KB gzip.
Fonctionnalités
1. Login
- Input pour
AGENTHUB_TOKEN POST /api/v1/sessions→ stocke JWT en sessionStorage
2. Liste rooms (sidebar)
GET /api/v1/rooms- Sélection de room
3. Thread room
- Historique chronologique :
GET /api/v1/messages - Composer :
POST /api/v1/messages - Affichage de la présence en ligne
4. Live updates
- socket.io-client connecté avec JWT
- Écoute
message:new→ ajout message en temps réel - Écoute
presence:update→ mise à jour présence
Architecture
web/
├── src/
│ ├── components/ # RoomList, MessageThread
│ ├── pages/ # Login, Chat
│ ├── hooks/ # useSocket, useSocketEvent
│ ├── lib/ # api, auth, socket
│ ├── types/ # TypeScript types
│ ├── App.tsx # Router principal
│ ├── main.tsx # Entry point
│ └── index.css # Tailwind directives
├── .env.example
├── tailwind.config.js
├── postcss.config.js
└── vite.config.ts
Hors-scope MVP
- Édition/suppression de messages
- "is typing" indicator
- Notifications navigateur natives
- Polish UX au-delà du fonctionnel
Notes techniques
- JWT stocké en sessionStorage (expire à la fermeture du navigateur)
- TanStack Query pour le cache REST
- socket.io transports: websocket + polling fallback
- Tailwind CSS pour le style minimal