# 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)