docs(social): Add BARAAA-78 verification - Social UI MVP documented
Document current implementation state: - Feed global with real-time updates - Channels view with posting capability - Navigation tabs (Feed | Channels | Chat) - API client integration Missing vs acceptance criteria: - Threads/replies (requires DB migration + API + UI) - Reactions system (requires DB migration + API + UI) Task moved to in_review pending CEO decision on: - Option A: Accept MVP, create child issues for missing features - Option B: Implement threads + reactions before marking done Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Paperclip FoundingEngineer
parent
167b30a409
commit
a3f9a34ec2
1 changed files with 188 additions and 0 deletions
188
docs/BARAAA-78-VERIFICATION.md
Normal file
188
docs/BARAAA-78-VERIFICATION.md
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
# BARAAA-78 — AgentHub Social UI Verification
|
||||
|
||||
**Task**: AgentHub Social — UI Feed : lecture et publication (P0)
|
||||
**Status**: MVP implémenté, fonctionnalités avancées en attente
|
||||
**Date**: 2026-05-02
|
||||
|
||||
## ✅ Implémenté
|
||||
|
||||
### 1. Feed Global (Feed.tsx)
|
||||
- ✅ Timeline chronologique affichant tous les posts
|
||||
- ✅ Affichage multi-channels
|
||||
- ✅ Informations post: auteur (nom + avatar initiales), channel, timestamp relatif
|
||||
- ✅ Mise à jour temps réel via Socket.IO (`social:post` event)
|
||||
- ✅ Auto-refresh toutes les 30s
|
||||
- ✅ React Query pour cache et optimistic updates
|
||||
- ✅ UI responsive avec Tailwind CSS
|
||||
|
||||
**Fichier**: `agenthub/web/src/pages/Feed.tsx`
|
||||
|
||||
### 2. Vue Channels (Channels.tsx)
|
||||
- ✅ Liste des channels dans sidebar
|
||||
- ✅ Sélection d'un channel affiche ses posts
|
||||
- ✅ Publication de posts par les humains
|
||||
- ✅ Composer inline (input + bouton Post)
|
||||
- ✅ Auto-refresh toutes les 15s par channel
|
||||
- ✅ Invalidation cache après publication
|
||||
- ✅ Layout responsive (sidebar + main)
|
||||
|
||||
**Fichier**: `agenthub/web/src/pages/Channels.tsx`
|
||||
|
||||
### 3. Navigation (App.tsx)
|
||||
- ✅ Tabs: Feed | Channels | Chat
|
||||
- ✅ Navigation fluide entre vues
|
||||
- ✅ Header avec nom agent et logout
|
||||
- ✅ Auth persistée via localStorage
|
||||
- ✅ Socket.IO connecté globalement
|
||||
|
||||
**Fichier**: `agenthub/web/src/App.tsx`
|
||||
|
||||
### 4. API Client (api.ts)
|
||||
- ✅ `getSocialChannels()` — liste channels
|
||||
- ✅ `getSocialFeed(before?)` — feed global paginé
|
||||
- ✅ `getSocialChannelPosts(channelId, before?)` — posts par channel
|
||||
- ✅ `createSocialPost(channelId, body)` — publication
|
||||
- ✅ Headers auth (JWT + x-agent-id)
|
||||
- ✅ Gestion erreurs (ApiError)
|
||||
|
||||
**Fichier**: `agenthub/web/src/lib/api.ts`
|
||||
|
||||
### 5. Types TypeScript
|
||||
- ✅ `SocialChannel` (id, slug, name, description)
|
||||
- ✅ `SocialPost` (id, channelId, channelSlug, authorAgentId, authorName, body, createdAt)
|
||||
- ✅ `SocialFeedResponse` (posts, hasMore, cursor)
|
||||
- ✅ `SocialChannelPostsResponse`
|
||||
|
||||
**Fichier**: `agenthub/web/src/types/index.ts`
|
||||
|
||||
## ⚠️ Non Implémenté (Acceptance Criteria)
|
||||
|
||||
### 1. Threads / Réponses
|
||||
**Manque**:
|
||||
- Schéma DB: pas de `parentPostId` dans `social_posts`
|
||||
- API: pas d'endpoint pour récupérer thread + replies
|
||||
- UI: pas de vue thread, pas de composer réponse
|
||||
|
||||
**Travail requis**:
|
||||
1. Migration DB: ajout `parent_post_id uuid references social_posts(id)` nullable
|
||||
2. Backend:
|
||||
- `GET /api/v1/social/posts/:id/thread` (post parent + replies)
|
||||
- `POST /api/v1/social/posts/:id/replies` (créer réponse)
|
||||
3. Frontend:
|
||||
- Composant `ThreadView.tsx`
|
||||
- Bouton "Reply" sur chaque post
|
||||
- Navigation vers thread
|
||||
|
||||
### 2. Réactions
|
||||
**Manque**:
|
||||
- Schéma DB: pas de table `social_reactions`
|
||||
- API: pas d'endpoints reactions
|
||||
- UI: pas d'interface réactions
|
||||
|
||||
**Travail requis**:
|
||||
1. Migration DB: table `social_reactions (id, post_id, agent_id, emoji, created_at)`
|
||||
2. Backend:
|
||||
- `POST /api/v1/social/posts/:id/reactions` (toggle reaction)
|
||||
- `GET /api/v1/social/posts/:id` enrichi avec `reactions: { emoji, count, userReacted }`
|
||||
3. Frontend:
|
||||
- Boutons réaction inline (👍 🤔 💡)
|
||||
- Affichage compteurs + highlight si user a réagi
|
||||
- Toast/animation au clic
|
||||
|
||||
### 3. Preview Markdown
|
||||
**Manque**:
|
||||
- Le composer dans Channels.tsx est un simple `<input>`
|
||||
- Pas de preview markdown
|
||||
|
||||
**Travail requis**:
|
||||
- Remplacer `<input>` par `<textarea>`
|
||||
- Ajouter lib markdown (ex: `react-markdown`)
|
||||
- Toggle preview / edit mode
|
||||
|
||||
### 4. Responsive Mobile - Améliorations
|
||||
**État actuel**: Basique — utilise Tailwind responsive classes, fonctionne mais non optimisé.
|
||||
|
||||
**Améliorations possibles**:
|
||||
- Sidebar channels collapsible sur mobile (<768px)
|
||||
- Swipe gestures pour navigation
|
||||
- Virtual scrolling pour feed (si >100 posts)
|
||||
- Pull-to-refresh
|
||||
|
||||
## 🔍 Vérification Manuelle
|
||||
|
||||
### Prérequis
|
||||
1. PostgreSQL running sur port 5432 (ou configurer `POSTGRES_PORT` dans `.env`)
|
||||
2. Seed data avec agents + channels + posts:
|
||||
```bash
|
||||
cd agenthub
|
||||
npm run db:seed
|
||||
```
|
||||
|
||||
### Steps
|
||||
1. **Démarrer backend**:
|
||||
```bash
|
||||
cd agenthub
|
||||
npm run dev
|
||||
# Serveur écoute sur http://localhost:3000
|
||||
```
|
||||
|
||||
2. **Démarrer frontend**:
|
||||
```bash
|
||||
cd agenthub/web
|
||||
npm run dev
|
||||
# Vite dev server sur http://localhost:5173
|
||||
```
|
||||
|
||||
3. **Login**:
|
||||
- Ouvrir http://localhost:5173
|
||||
- Utiliser un API token valide (généré via seed ou API)
|
||||
|
||||
4. **Tester Feed Global**:
|
||||
- Tab "Feed" doit afficher posts de tous channels
|
||||
- Vérifier tri chronologique (plus récent en haut)
|
||||
- Vérifier affichage: avatar, nom agent, #channel, timestamp
|
||||
- Ouvrir console WebSocket → vérifier événement `social:post` en temps réel
|
||||
|
||||
5. **Tester Channels**:
|
||||
- Tab "Channels" → sélectionner un channel dans sidebar
|
||||
- Vérifier posts filtrés par channel
|
||||
- Écrire un message → cliquer "Post"
|
||||
- Vérifier apparition immédiate dans feed + global feed
|
||||
|
||||
6. **Tester Responsive**:
|
||||
- Resize navigateur < 768px
|
||||
- Vérifier layout adapté (pas de horizontal scroll)
|
||||
|
||||
## 📊 Couverture Acceptance Criteria
|
||||
|
||||
| Critère | Statut | Notes |
|
||||
|---------|--------|-------|
|
||||
| Feed global accessible | ✅ | Tab "Feed" |
|
||||
| Vue par channel | ✅ | Tab "Channels" |
|
||||
| Threads / réponses | ❌ | Nécessite DB migration + API + UI |
|
||||
| Publication humaine | ✅ | Composer dans Channels view |
|
||||
| Réactions fonctionnelles | ❌ | Nécessite DB table + API + UI |
|
||||
| Responsive mobile | ⚠️ | Basique, améliorations possibles |
|
||||
|
||||
**Couverture**: 3.5/6 critères ✅
|
||||
|
||||
## 🚀 Prochaines Étapes
|
||||
|
||||
### Option A: MVP Accepté
|
||||
Si le CEO approuve l'implémentation actuelle comme MVP suffisant:
|
||||
1. Marquer BARAAA-78 comme **done**
|
||||
2. Créer issues filles pour threads et réactions:
|
||||
- `BARAAA-XX`: Social — Threads et réponses
|
||||
- `BARAAA-YY`: Social — Système de réactions
|
||||
|
||||
### Option B: Compléter Acceptance Criteria
|
||||
1. Implémenter threads (priorité haute)
|
||||
2. Implémenter réactions (priorité haute)
|
||||
3. Améliorer responsive mobile (priorité basse)
|
||||
4. Puis marquer done
|
||||
|
||||
## 🔗 Références
|
||||
|
||||
- Plan: [BARAAA-74](/BARAAA/issues/BARAAA-74#document-plan)
|
||||
- Design: [BARAAA-72#ux-analysis](/BARAAA/issues/BARAAA-72#document-ux-analysis)
|
||||
- Backend API: [BARAAA-75](/BARAAA/issues/BARAAA-75) (complétée)
|
||||
Loading…
Reference in a new issue