Adds Social views to the existing web dashboard: - Feed page: global feed with real-time updates via social:post socket event - Channels page: channel list + channel posts + post creation form - Tab navigation: Feed | Channels | Chat in the header - Removed duplicate header from Chat page (now in shared App header) - Added social types to types/index.ts and API methods to lib/api.ts - Added social:post event type to socket client Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| public | ||
| src | ||
| .env.example | ||
| .gitignore | ||
| eslint.config.js | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| README.md | ||
| tailwind.config.js | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
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