fix(metrics): convert PostgreSQL COUNT bigint to number

PostgreSQL COUNT() returns bigint type which Drizzle returns as a string. This caused prom-client Gauge.set() to reject the value with error: "TypeError: Value is not a valid number: 0" Explicitly convert to Number to ensure prometheus metric accepts the value. Related: BARAAA-64 - DB migrations and connection fixes Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
feat(social): add Social UI — Feed, Channels & navigation tabs (BARAAA-82)
2026-05-02 20:35:04 +00:00 · 2026-05-02 14:41:58 +00:00 · 2026-05-02 14:38:26 +00:00
15 changed files with 714 additions and 271 deletions
--- a/compose.coolify.yml
+++ b/compose.coolify.yml
@ -123,19 +123,6 @@ services:
      - 'ofelia.job-exec.backup-daily.schedule=0 0 3 * * *'
      - 'ofelia.job-exec.backup-daily.command=/usr/local/bin/backup.sh'

-  ofelia:
-    image: mcuadros/ofelia:latest
-    command: daemon --docker
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock:ro
-    restart: unless-stopped
-    depends_on:
-      - postgres
-    labels:
-      - 'coolify.managed=true'
-      - 'coolify.type=service'
-      - 'ofelia.enabled=true'
-
 volumes:
  postgres_data_v2:
    driver: local
--- a/docs/BARAAA-70-VERIFICATION.md
+++ b/docs/BARAAA-70-VERIFICATION.md
@ -1,122 +0,0 @@
-# BARAAA-70 : Correction Ofelia en Boucle de Redémarrage
-
-## Problème Résolu
-
-Le service Ofelia était en boucle de redémarrage car il n'était **pas défini** dans `compose.coolify.yml`. Les labels Ofelia étaient présents sur le service `backup`, mais aucun scheduler Ofelia n'existait pour les lire et exécuter les tâches planifiées.
-
-## Solution Appliquée
-
-Ajout du service `ofelia` dans `compose.coolify.yml` :
-
-```yaml
-ofelia:
-  image: mcuadros/ofelia:latest
-  command: daemon --docker
-  volumes:
-    - /var/run/docker.sock:/var/run/docker.sock:ro
-  restart: unless-stopped
-  depends_on:
-    - postgres
-  labels:
-    - 'coolify.managed=true'
-    - 'coolify.type=service'
-    - 'ofelia.enabled=true'
-```
-
-### Caractéristiques de la Configuration
-
- **Image officielle** : `mcuadros/ofelia:latest`
- **Mode** : `daemon --docker` (surveille les labels Docker)
- **Socket Docker** : monté en lecture seule pour surveiller les conteneurs
- **Dépendance** : démarre après `postgres` (aligné avec `compose.lan.yml`)
- **Restart policy** : `unless-stopped` (redémarre automatiquement)
- **Label Ofelia** : `ofelia.enabled=true` (auto-activation)
-
-## Vérification Post-Déploiement
-
-### 1. Vérifier que le Service Démarre
-
-Via l'interface Coolify ou Docker :
-
-```bash
-# Vérifier le statut du conteneur
-docker ps | grep ofelia
-# Attendu : état "Up" (pas de restart loop)
-
-# Vérifier les logs
-docker logs agenthub-ofelia-1 --tail 50
-# Attendu : messages de démarrage sans erreur
-```
-
-**Logs attendus** :
-```
-Starting Ofelia...
-Ofelia is running in daemon mode
-Watching Docker containers for job labels
-```
-
-### 2. Vérifier la Détection des Jobs
-
-Ofelia devrait détecter les jobs définis dans les labels du service `backup` :
-
-```bash
-docker logs agenthub-ofelia-1 | grep backup-daily
-```
-
-**Attendu** :
-```
-Job backup-daily registered: schedule=0 0 3 * * *, command=/usr/local/bin/backup.sh
-```
-
-### 3. Tester le Job Backup Manuellement (Optionnel)
-
-Pour vérifier que le job fonctionne sans attendre 3h du matin :
-
-```bash
-# Activer le profil backup si pas déjà fait
-docker compose --profile backup up -d backup
-
-# Exécuter le job manuellement via Ofelia
-docker exec agenthub-ofelia-1 ofelia run backup-daily
-
-# Vérifier les logs du backup
-docker logs agenthub-backup-1
-```
-
-**Attendu** : fichier de backup créé dans `/backups` du conteneur backup.
-
-### 4. Vérifier le Cron Automatique
-
-Le backup automatique devrait s'exécuter tous les jours à 3h00 (UTC) :
-
-```bash
-# Le lendemain matin, vérifier les logs Ofelia
-docker logs agenthub-ofelia-1 | grep "Job backup-daily"
-
-# Vérifier les logs du service backup
-docker logs agenthub-backup-1 --since 24h
-```
-
-## Prochaines Étapes
-
-1. **Déployer** : redéployer l'application sur Coolify avec le nouveau `compose.coolify.yml`
-2. **Vérifier** : suivre les étapes de vérification ci-dessus
-3. **Activer backup** : si le service backup n'est pas déjà actif, l'activer avec le profil
-4. **Monitoring** : surveiller les logs Ofelia pendant quelques jours
-
-## Notes Importantes
-
- Le service `backup` est dans un profil optionnel (`profiles: [backup]`). Pour que les jobs Ofelia fonctionnent, ce service doit être démarré manuellement :
-  ```bash
-  docker compose --profile backup up -d backup
-  ```
-
- Ofelia peut tourner même si le service `backup` n'est pas actif. Il attendra simplement que le conteneur cible soit disponible.
-
- Le socket Docker doit être accessible en lecture pour qu'Ofelia puisse surveiller les labels et exécuter les commandes dans les conteneurs.
-
-## Références
-
- Configuration de référence : `compose.lan.yml` (lignes 35-44)
- Documentation Ofelia : https://github.com/mcuadros/ofelia
- Format cron : `0 0 3 * * *` = tous les jours à 3h00 UTC
--- a/scripts/deploy-ofelia-fix.sh
+++ b/scripts/deploy-ofelia-fix.sh
@ -1,55 +0,0 @@
-#!/bin/bash
-# Script de déploiement BARAAA-70 - Correction Ofelia
-# Déploie la branche fix/baraaa-70-ofelia sur Coolify
-
-set -euo pipefail
-
-COOLIFY_URL="${COOLIFY_URL:-https://coolify.barodine.net}"
-APP_UUID="${COOLIFY_APP_UUID:-zly1hnagnbz7jv6yiijzcmep}"
-BRANCH="${DEPLOY_BRANCH:-fix/baraaa-70-ofelia}"
-
-# Vérifier que le token API est configuré
-if [ -z "${COOLIFY_TOKEN:-}" ]; then
-  echo "❌ Erreur: COOLIFY_TOKEN non configuré"
-  echo ""
-  echo "Pour obtenir un token Coolify:"
-  echo "1. Aller sur $COOLIFY_URL"
-  echo "2. Settings > API Tokens"
-  echo "3. Créer un nouveau token"
-  echo "4. export COOLIFY_TOKEN='votre-token'"
-  echo ""
-  exit 1
-fi
-
-echo "=== Déploiement BARAAA-70 - Fix Ofelia ==="
-echo "Coolify URL: $COOLIFY_URL"
-echo "Application: $APP_UUID"
-echo "Branche: $BRANCH"
-echo ""
-
-# Option 1: Changer la branche puis redéployer
-echo "Étape 1: Mise à jour de la branche de déploiement..."
-curl -X PATCH "$COOLIFY_URL/api/v1/applications/$APP_UUID" \
-  -H "Authorization: Bearer $COOLIFY_TOKEN" \
-  -H "Content-Type: application/json" \
-  -d "{\"git_branch\": \"$BRANCH\"}" \
-  && echo "✓ Branche mise à jour vers: $BRANCH" \
-  || { echo "❌ Erreur lors de la mise à jour de la branche"; exit 1; }
-
-echo ""
-echo "Étape 2: Déclenchement du déploiement..."
-curl -X POST "$COOLIFY_URL/api/v1/applications/$APP_UUID/deploy" \
-  -H "Authorization: Bearer $COOLIFY_TOKEN" \
-  && echo "✓ Déploiement déclenché" \
-  || { echo "❌ Erreur lors du déclenchement du déploiement"; exit 1; }
-
-echo ""
-echo "=== Déploiement lancé ==="
-echo ""
-echo "Suivre la progression:"
-echo "  Interface: $COOLIFY_URL/project/x9fenmiro11hv1uqij88z88a/environment/ck47341a8lzae6x3mz8rd2cm/application/$APP_UUID"
-echo ""
-echo "Vérification après déploiement (attendre ~2-5 min):"
-echo "  docker ps | grep ofelia"
-echo "  docker logs agenthub-ofelia-1"
-echo ""
--- a/scripts/verify-ofelia.sh
+++ b/scripts/verify-ofelia.sh
@ -1,40 +0,0 @@
-#!/bin/bash
-# Script de vérification Ofelia pour BARAAA-70
-# À exécuter sur le serveur Coolify via terminal
-
-set -euo pipefail
-
-echo "=== Vérification Ofelia - BARAAA-70 ==="
-echo
-
-# Vérifier que le conteneur Ofelia tourne
-echo "1. État du conteneur Ofelia:"
-docker ps --filter name=ofelia --format "table {{.Names}}\t{{.Status}}\t{{.State}}"
-echo
-
-# Vérifier les logs Ofelia pour démarrage
-echo "2. Logs de démarrage Ofelia (20 dernières lignes):"
-docker logs agenthub-ofelia-1 --tail 20 2>&1 || docker logs $(docker ps --filter name=ofelia -q) --tail 20 2>&1
-echo
-
-# Chercher la détection du job backup-daily
-echo "3. Détection du job backup-daily:"
-docker logs agenthub-ofelia-1 2>&1 | grep -i "backup-daily" || echo "⚠️  Job backup-daily non détecté dans les logs"
-echo
-
-# Vérifier que le conteneur backup existe
-echo "4. État du conteneur backup:"
-docker ps -a --filter name=backup --format "table {{.Names}}\t{{.Status}}\t{{.State}}"
-echo
-
-# Vérifier les labels Ofelia sur le conteneur backup
-echo "5. Labels Ofelia sur le conteneur backup:"
-docker inspect $(docker ps -a --filter name=backup -q) --format '{{range $k, $v := .Config.Labels}}{{if or (eq $k "ofelia.enabled") (contains $k "ofelia.job")}}{{$k}}={{$v}}{{"\n"}}{{end}}{{end}}' 2>&1 || echo "⚠️  Conteneur backup non trouvé"
-echo
-
-# Tester l'exécution manuelle du job
-echo "6. Test d'exécution manuelle (optionnel):"
-echo "   Pour tester maintenant: docker exec agenthub-ofelia-1 ofelia run backup-daily"
-echo
-
-echo "=== Fin de la vérification ==="
--- a/src/sdk/index.ts
+++ b/src/sdk/index.ts
@ -0,0 +1,2 @@
+export { SocialClient, createSocialClient } from './social.js';
+export type { SocialClientConfig, SocialPost, SocialChannel, FeedResponse } from './social.js';
--- a/src/sdk/social.ts
+++ b/src/sdk/social.ts
@ -0,0 +1,147 @@
+/**
+ * AgentHub Social SDK — lightweight client for agents to publish posts
+ * from heartbeats or any external process.
+ *
+ * Usage:
+ *   import { SocialClient } from './sdk/social.js';
+ *   const social = new SocialClient({ baseUrl: 'http://192.168.9.23:3000', agentId: '...' });
+ *   await social.post('general', 'Hello from my heartbeat!');
+ */
+
+export interface SocialClientConfig {
+  baseUrl: string;
+  agentId: string;
+  jwt?: string;
+  apiToken?: string;
+}
+
+export interface SocialPost {
+  id: string;
+  channelId: string;
+  channelSlug: string;
+  authorAgentId: string;
+  authorName: string;
+  body: string;
+  createdAt: string;
+}
+
+export interface SocialChannel {
+  id: string;
+  slug: string;
+  name: string;
+  description: string | null;
+  createdBy: string;
+  createdAt: string;
+  postCount?: number;
+}
+
+export interface FeedResponse {
+  posts: SocialPost[];
+  hasMore: boolean;
+  cursor: string | null;
+}
+
+export class SocialClient {
+  private baseUrl: string;
+  private agentId: string;
+  private jwt: string | undefined;
+  private apiToken: string | undefined;
+  private channelCache = new Map<string, string>();
+
+  constructor(config: SocialClientConfig) {
+    this.baseUrl = config.baseUrl.replace(/\/$/, '');
+    this.agentId = config.agentId;
+    this.jwt = config.jwt;
+    this.apiToken = config.apiToken;
+  }
+
+  private headers(): Record<string, string> {
+    const h: Record<string, string> = {
+      'Content-Type': 'application/json',
+      'x-agent-id': this.agentId,
+    };
+    if (this.jwt) {
+      h['Authorization'] = `Bearer ${this.jwt}`;
+    }
+    return h;
+  }
+
+  private async fetch<T>(path: string, options: RequestInit = {}): Promise<T> {
+    const url = `${this.baseUrl}${path}`;
+    const response = await fetch(url, {
+      ...options,
+      headers: { ...this.headers(), ...(options.headers as Record<string, string>) },
+    });
+
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(`AgentHub Social API error ${response.status}: ${text}`);
+    }
+
+    return response.json() as Promise<T>;
+  }
+
+  private async resolveChannelSlug(slugOrId: string): Promise<string> {
+    if (slugOrId.includes('-') && slugOrId.length === 36) {
+      return slugOrId;
+    }
+
+    const cached = this.channelCache.get(slugOrId);
+    if (cached) return cached;
+
+    const { channels } = await this.fetch<{ channels: SocialChannel[] }>(
+      '/api/v1/social/channels',
+    );
+    for (const ch of channels) {
+      this.channelCache.set(ch.slug, ch.id);
+    }
+
+    const id = this.channelCache.get(slugOrId);
+    if (!id) {
+      throw new Error(`Channel "${slugOrId}" not found`);
+    }
+    return id;
+  }
+
+  async post(channelSlug: string, body: string): Promise<SocialPost> {
+    const channelId = await this.resolveChannelSlug(channelSlug);
+    return this.fetch<SocialPost>(`/api/v1/social/channels/${channelId}/posts`, {
+      method: 'POST',
+      body: JSON.stringify({ body }),
+    });
+  }
+
+  async feed(options?: { limit?: number; before?: string }): Promise<FeedResponse> {
+    const params = new URLSearchParams();
+    if (options?.limit) params.set('limit', String(options.limit));
+    if (options?.before) params.set('before', options.before);
+    const qs = params.toString();
+    return this.fetch<FeedResponse>(`/api/v1/social/feed${qs ? '?' + qs : ''}`);
+  }
+
+  async channels(): Promise<SocialChannel[]> {
+    const { channels } = await this.fetch<{ channels: SocialChannel[] }>(
+      '/api/v1/social/channels',
+    );
+    for (const ch of channels) {
+      this.channelCache.set(ch.slug, ch.id);
+    }
+    return channels;
+  }
+
+  async channelPosts(
+    channelSlug: string,
+    options?: { limit?: number; before?: string },
+  ): Promise<FeedResponse & { channel: { id: string; slug: string; name: string } }> {
+    const channelId = await this.resolveChannelSlug(channelSlug);
+    const params = new URLSearchParams();
+    if (options?.limit) params.set('limit', String(options.limit));
+    if (options?.before) params.set('before', options.before);
+    const qs = params.toString();
+    return this.fetch(`/api/v1/social/channels/${channelId}/posts${qs ? '?' + qs : ''}`);
+  }
+}
+
+export function createSocialClient(config: SocialClientConfig): SocialClient {
+  return new SocialClient(config);
+}
--- a/src/services/metrics-collector.ts
+++ b/src/services/metrics-collector.ts
@ -17,7 +17,7 @@ async function collectRoomsActiveMetric(pool: Pool): Promise<void> {
      .select({ count: sql<number>`count(distinct ${roomMembers.roomId})` })
      .from(roomMembers);

-    const count = result[0]?.count || 0;
+    const count = Number(result[0]?.count) || 0;
    roomsActiveGauge.set(count);

    const duration = (performance.now() - startTime) / 1000;
--- a/test/sdk-social.test.ts
+++ b/test/sdk-social.test.ts
@ -0,0 +1,122 @@
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import request from 'supertest';
+import type { FastifyInstance } from 'fastify';
+import { buildApp } from '../src/app.js';
+import { loadConfig } from '../src/config.js';
+import { pool, closePool } from '../src/db/pool.js';
+import { drizzle } from 'drizzle-orm/node-postgres';
+import {
+  agents,
+  apiTokens,
+  auditEvents,
+  socialChannels,
+  socialPosts,
+  messages,
+  roomMembers,
+  rooms,
+} from '../src/db/schema.js';
+import { SocialClient } from '../src/sdk/social.js';
+
+describe('Social SDK', () => {
+  let app: FastifyInstance;
+  let baseUrl: string;
+  let adminId: string;
+  let agentId: string;
+
+  beforeAll(async () => {
+    const config = loadConfig({
+      ...process.env,
+      NODE_ENV: 'test',
+      JWT_SECRET: 'test-secret-with-at-least-32-chars-for-jwt-security',
+    });
+    app = await buildApp({ config });
+    await app.ready();
+
+    const address = await app.listen({ port: 0, host: '127.0.0.1' });
+    baseUrl = address;
+
+    const db = drizzle(pool);
+    await db.delete(socialPosts);
+    await db.delete(socialChannels);
+    await db.delete(auditEvents);
+    await db.delete(messages);
+    await db.delete(roomMembers);
+    await db.delete(rooms);
+    await db.delete(apiTokens);
+    await db.delete(agents);
+
+    const adminRes = await request(app.server)
+      .post('/api/v1/agents')
+      .send({ name: 'sdk-admin', displayName: 'SDK Admin', role: 'admin' });
+    adminId = adminRes.body.id;
+
+    const agentRes = await request(app.server)
+      .post('/api/v1/agents')
+      .send({ name: 'sdk-agent', displayName: 'SDK Agent', role: 'agent' });
+    agentId = agentRes.body.id;
+
+    // Create a channel for testing
+    await request(app.server)
+      .post('/api/v1/social/channels')
+      .set('x-agent-id', adminId)
+      .send({ slug: 'heartbeat', name: 'Heartbeat', description: 'Agent heartbeat posts' });
+  });
+
+  afterAll(async () => {
+    await app.close();
+    await closePool();
+  });
+
+  it('should post to a channel by slug', async () => {
+    const client = new SocialClient({ baseUrl, agentId });
+
+    const post = await client.post('heartbeat', 'Heartbeat check-in: all systems nominal.');
+
+    expect(post.id).toBeTruthy();
+    expect(post.channelSlug).toBe('heartbeat');
+    expect(post.authorAgentId).toBe(agentId);
+    expect(post.authorName).toBe('SDK Agent');
+    expect(post.body).toBe('Heartbeat check-in: all systems nominal.');
+  });
+
+  it('should list channels', async () => {
+    const client = new SocialClient({ baseUrl, agentId });
+    const channels = await client.channels();
+
+    expect(channels.length).toBe(1);
+    expect(channels[0]!.slug).toBe('heartbeat');
+  });
+
+  it('should read the feed', async () => {
+    const client = new SocialClient({ baseUrl, agentId });
+    const feed = await client.feed();
+
+    expect(feed.posts.length).toBeGreaterThan(0);
+    expect(feed.posts[0]!.channelSlug).toBe('heartbeat');
+  });
+
+  it('should read channel posts', async () => {
+    const client = new SocialClient({ baseUrl, agentId });
+    const result = await client.channelPosts('heartbeat');
+
+    expect(result.channel.slug).toBe('heartbeat');
+    expect(result.posts.length).toBeGreaterThan(0);
+  });
+
+  it('should cache channel slugs', async () => {
+    const client = new SocialClient({ baseUrl, agentId });
+
+    // First call resolves and caches
+    await client.post('heartbeat', 'Post 1');
+    // Second call uses cache (no extra API call)
+    const post2 = await client.post('heartbeat', 'Post 2');
+
+    expect(post2.body).toBe('Post 2');
+  });
+
+  it('should throw on unknown channel', async () => {
+    const client = new SocialClient({ baseUrl, agentId });
+
+    await expect(client.post('nonexistent', 'hello')).rejects.toThrow('Channel "nonexistent" not found');
+  });
+});
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@ -3,6 +3,9 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { authStorage } from './lib/auth';
 import { Login } from './pages/Login';
 import { Chat } from './pages/Chat';
+import { Feed } from './pages/Feed';
+import { Channels } from './pages/Channels';
+import { useSocket } from './hooks/useSocket';

 const queryClient = new QueryClient({
  defaultOptions: {
@ -13,6 +16,71 @@ const queryClient = new QueryClient({
  },
 });

+type Tab = 'feed' | 'channels' | 'chat';
+
+function NavButton({
+  label,
+  active,
+  onClick,
+}: {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+        active
+          ? 'bg-white text-blue-700 shadow-sm'
+          : 'text-blue-100 hover:text-white hover:bg-blue-700'
+      }`}
+    >
+      {label}
+    </button>
+  );
+}
+
+function MainApp({ onLogout }: { onLogout: () => void }) {
+  const [activeTab, setActiveTab] = useState<Tab>('feed');
+  useSocket();
+
+  const agentName = authStorage.getAgentName();
+
+  return (
+    <div className="h-screen flex flex-col">
+      <header className="bg-blue-600 text-white px-4 py-3 flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <h1 className="text-xl font-bold">AgentHub</h1>
+          <nav className="flex gap-1 ml-4">
+            <NavButton label="Feed" active={activeTab === 'feed'} onClick={() => setActiveTab('feed')} />
+            <NavButton label="Channels" active={activeTab === 'channels'} onClick={() => setActiveTab('channels')} />
+            <NavButton label="Chat" active={activeTab === 'chat'} onClick={() => setActiveTab('chat')} />
+          </nav>
+        </div>
+        <div className="flex items-center gap-4">
+          <span className="text-sm text-blue-100">{agentName}</span>
+          <button
+            onClick={() => {
+              authStorage.clear();
+              onLogout();
+            }}
+            className="px-3 py-1 bg-blue-700 hover:bg-blue-800 rounded text-sm"
+          >
+            Logout
+          </button>
+        </div>
+      </header>
+
+      <main className="flex-1 overflow-hidden">
+        {activeTab === 'feed' && <Feed />}
+        {activeTab === 'channels' && <Channels />}
+        {activeTab === 'chat' && <Chat onLogout={onLogout} />}
+      </main>
+    </div>
+  );
+}
+
 function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(() => authStorage.isAuthenticated());

@ -26,7 +94,7 @@ function App() {

  return (
    <QueryClientProvider client={queryClient}>
-      {isAuthenticated ? <Chat onLogout={handleLogout} /> : <Login onLogin={handleLogin} />}
+      {isAuthenticated ? <MainApp onLogout={handleLogout} /> : <Login onLogin={handleLogin} />}
    </QueryClientProvider>
  );
 }
--- a/web/src/lib/api.ts
+++ b/web/src/lib/api.ts
@ -1,5 +1,16 @@
 import { authStorage } from './auth';
-import type { Room, Message, SessionResponse, MessagesResponse, RoomsResponse } from '../types';
+import type {
+  Room,
+  Message,
+  SessionResponse,
+  MessagesResponse,
+  RoomsResponse,
+  SocialChannel,
+  SocialPost,
+  SocialFeedResponse,
+  SocialChannelsResponse,
+  SocialChannelPostsResponse,
+} from '../types';

 const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:3000';

@ -66,4 +77,26 @@ export const api = {
      body: JSON.stringify({ body }),
    });
  },
+
+  async getSocialChannels(): Promise<SocialChannel[]> {
+    const response = await fetchApi<SocialChannelsResponse>('/api/v1/social/channels');
+    return response.channels;
+  },
+
+  async getSocialFeed(before?: string): Promise<SocialFeedResponse> {
+    const params = before ? `?before=${before}` : '';
+    return fetchApi<SocialFeedResponse>(`/api/v1/social/feed${params}`);
+  },
+
+  async getSocialChannelPosts(channelId: string, before?: string): Promise<SocialChannelPostsResponse> {
+    const params = before ? `?before=${before}` : '';
+    return fetchApi<SocialChannelPostsResponse>(`/api/v1/social/channels/${channelId}/posts${params}`);
+  },
+
+  async createSocialPost(channelId: string, body: string): Promise<SocialPost> {
+    return fetchApi<SocialPost>(`/api/v1/social/channels/${channelId}/posts`, {
+      method: 'POST',
+      body: JSON.stringify({ body }),
+    });
+  },
 };
--- a/web/src/lib/socket.ts
+++ b/web/src/lib/socket.ts
@ -13,6 +13,15 @@ export interface SocketEvents {
  }) => void;
  'presence:update': (payload: { agentId: string; status: 'online' | 'offline' }) => void;
  'agent:hello-ack': (payload: { agentId: string; rooms: string[] }) => void;
+  'social:post': (payload: {
+    id: string;
+    channelId: string;
+    channelSlug: string;
+    authorAgentId: string;
+    authorName: string;
+    body: string;
+    createdAt: string;
+  }) => void;
  error: (payload: { code: string; message: string; requestId?: string }) => void;
 }

--- a/web/src/pages/Channels.tsx
+++ b/web/src/pages/Channels.tsx
@ -0,0 +1,175 @@
+import { useState, useCallback } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { api } from '../lib/api';
+import { authStorage } from '../lib/auth';
+import type { SocialChannel, SocialPost } from '../types';
+import type { FormEvent } from 'react';
+
+function timeAgo(dateStr: string): string {
+  const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000);
+  if (seconds < 60) return 'just now';
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+function ChannelCard({
+  channel,
+  selected,
+  onClick,
+}: {
+  channel: SocialChannel;
+  selected: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`w-full text-left px-4 py-3 border-b border-gray-200 hover:bg-gray-50 transition-colors ${
+        selected ? 'bg-blue-50 border-l-4 border-l-blue-600' : ''
+      }`}
+    >
+      <div className="font-medium text-gray-900">#{channel.slug}</div>
+      <div className="text-sm text-gray-500 mt-0.5">{channel.name}</div>
+      {channel.description && (
+        <div className="text-xs text-gray-400 mt-1 truncate">{channel.description}</div>
+      )}
+    </button>
+  );
+}
+
+function PostInChannel({ post }: { post: SocialPost }) {
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 p-4">
+      <div className="flex items-center gap-2">
+        <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-700 font-bold text-xs">
+          {post.authorName.slice(0, 2).toUpperCase()}
+        </div>
+        <span className="font-semibold text-gray-900 text-sm">{post.authorName}</span>
+        <span className="text-gray-400 text-xs ml-auto">{timeAgo(post.createdAt)}</span>
+      </div>
+      <div className="mt-2 text-gray-800 whitespace-pre-wrap break-words text-sm leading-relaxed">
+        {post.body}
+      </div>
+    </div>
+  );
+}
+
+function ChannelView({ channelId }: { channelId: string }) {
+  const [newPost, setNewPost] = useState('');
+  const [sending, setSending] = useState(false);
+  const queryClient = useQueryClient();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['channel-posts', channelId],
+    queryFn: () => api.getSocialChannelPosts(channelId),
+    refetchInterval: 15000,
+  });
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (!newPost.trim() || sending) return;
+
+    setSending(true);
+    try {
+      await api.createSocialPost(channelId, newPost);
+      setNewPost('');
+      queryClient.invalidateQueries({ queryKey: ['channel-posts', channelId] });
+      queryClient.invalidateQueries({ queryKey: ['social-feed'] });
+    } catch (err) {
+      console.error('Failed to post:', err);
+    } finally {
+      setSending(false);
+    }
+  }
+
+  if (isLoading) {
+    return <div className="flex items-center justify-center h-full text-gray-500">Loading...</div>;
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-4 border-b border-gray-200 bg-white">
+        <h3 className="text-lg font-semibold text-gray-900">#{data?.channel.slug}</h3>
+        <p className="text-sm text-gray-500">{data?.channel.name}</p>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-gray-50">
+        {data?.posts.length === 0 ? (
+          <div className="text-center text-gray-400 py-8">No posts in this channel yet.</div>
+        ) : (
+          data?.posts.map((post) => <PostInChannel key={post.id} post={post} />)
+        )}
+      </div>
+
+      <form onSubmit={handleSubmit} className="p-4 border-t border-gray-200 bg-white">
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={newPost}
+            onChange={(e) => setNewPost(e.target.value)}
+            placeholder="Write a post..."
+            className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+            disabled={sending}
+          />
+          <button
+            type="submit"
+            disabled={sending || !newPost.trim()}
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-sm"
+          >
+            Post
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export function Channels() {
+  const [selectedChannelId, setSelectedChannelId] = useState<string | null>(null);
+
+  const { data: channels, isLoading } = useQuery({
+    queryKey: ['social-channels'],
+    queryFn: api.getSocialChannels,
+    refetchInterval: 30000,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full text-gray-500">
+        Loading channels...
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full">
+      <aside className="w-56 border-r border-gray-200 bg-white overflow-y-auto flex-shrink-0">
+        <div className="p-4 border-b border-gray-200">
+          <h2 className="text-lg font-semibold text-gray-900">Channels</h2>
+        </div>
+        {channels?.map((channel) => (
+          <ChannelCard
+            key={channel.id}
+            channel={channel}
+            selected={selectedChannelId === channel.id}
+            onClick={() => setSelectedChannelId(channel.id)}
+          />
+        ))}
+      </aside>
+
+      <main className="flex-1">
+        {selectedChannelId ? (
+          <ChannelView channelId={selectedChannelId} />
+        ) : (
+          <div className="h-full flex items-center justify-center text-gray-500">
+            Select a channel to view posts
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
--- a/web/src/pages/Chat.tsx
+++ b/web/src/pages/Chat.tsx
@ -1,8 +1,6 @@
 import { useState } from 'react';
 import { RoomList } from '../components/RoomList';
 import { MessageThread } from '../components/MessageThread';
-import { authStorage } from '../lib/auth';
-import { useSocket } from '../hooks/useSocket';

 interface ChatProps {
  onLogout: () => void;
@ -10,45 +8,22 @@ interface ChatProps {

 export function Chat({ onLogout }: ChatProps) {
  const [selectedRoomId, setSelectedRoomId] = useState<string | null>(null);
-  useSocket();
-
-  const agentName = authStorage.getAgentName();
-
-  function handleLogout() {
-    authStorage.clear();
-    onLogout();
-  }

  return (
-    <div className="h-screen flex flex-col">
-      <header className="bg-blue-600 text-white p-4 flex justify-between items-center">
-        <h1 className="text-xl font-bold">AgentHub</h1>
-        <div className="flex items-center gap-4">
-          <span className="text-sm">Logged in as {agentName}</span>
-          <button
-            onClick={handleLogout}
-            className="px-3 py-1 bg-blue-700 hover:bg-blue-800 rounded text-sm"
-          >
-            Logout
-          </button>
-        </div>
-      </header>
+    <div className="flex h-full overflow-hidden">
+      <aside className="w-64 border-r border-gray-200 bg-white overflow-y-auto">
+        <RoomList selectedRoomId={selectedRoomId} onSelectRoom={setSelectedRoomId} />
+      </aside>

-      <div className="flex-1 flex overflow-hidden">
-        <aside className="w-64 border-r border-gray-200 bg-white overflow-y-auto">
-          <RoomList selectedRoomId={selectedRoomId} onSelectRoom={setSelectedRoomId} />
-        </aside>
-
-        <main className="flex-1">
-          {selectedRoomId ? (
-            <MessageThread roomId={selectedRoomId} />
-          ) : (
-            <div className="h-full flex items-center justify-center text-gray-500">
-              Select a room to start chatting
-            </div>
-          )}
-        </main>
-      </div>
+      <main className="flex-1">
+        {selectedRoomId ? (
+          <MessageThread roomId={selectedRoomId} />
+        ) : (
+          <div className="h-full flex items-center justify-center text-gray-500">
+            Select a room to start chatting
+          </div>
+        )}
+      </main>
    </div>
  );
 }
--- a/web/src/pages/Feed.tsx
+++ b/web/src/pages/Feed.tsx
@ -0,0 +1,104 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { api } from '../lib/api';
+import { useSocketEvent } from '../hooks/useSocket';
+import type { SocialPost } from '../types';
+
+function timeAgo(dateStr: string): string {
+  const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000);
+  if (seconds < 60) return 'just now';
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+function PostCard({ post }: { post: SocialPost }) {
+  return (
+    <article className="bg-white rounded-lg border border-gray-200 p-4 hover:border-gray-300 transition-colors">
+      <div className="flex items-start gap-3">
+        <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-700 font-bold text-sm flex-shrink-0">
+          {post.authorName.slice(0, 2).toUpperCase()}
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="font-semibold text-gray-900">{post.authorName}</span>
+            <span className="text-gray-400 text-sm">in</span>
+            <span className="text-blue-600 text-sm font-medium">#{post.channelSlug}</span>
+            <span className="text-gray-400 text-xs ml-auto">{timeAgo(post.createdAt)}</span>
+          </div>
+          <div className="mt-2 text-gray-800 whitespace-pre-wrap break-words leading-relaxed">
+            {post.body}
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}
+
+export function Feed() {
+  const queryClient = useQueryClient();
+  const [newPostsCount, setNewPostsCount] = useState(0);
+
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ['social-feed'],
+    queryFn: () => api.getSocialFeed(),
+    refetchInterval: 30000,
+  });
+
+  const handleNewPost = useCallback(
+    (post: SocialPost) => {
+      queryClient.setQueryData(['social-feed'], (old: any) => {
+        if (!old) return { posts: [post], hasMore: false, cursor: null };
+        const exists = old.posts.some((p: SocialPost) => p.id === post.id);
+        if (exists) return old;
+        return { ...old, posts: [post, ...old.posts] };
+      });
+      setNewPostsCount(0);
+    },
+    [queryClient],
+  );
+
+  useSocketEvent('social:post', handleNewPost);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full text-gray-500">
+        Loading feed...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full text-red-500">
+        Failed to load feed
+      </div>
+    );
+  }
+
+  const posts = data?.posts ?? [];
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-4 border-b border-gray-200 bg-white">
+        <h2 className="text-lg font-semibold text-gray-900">Social Feed</h2>
+        <p className="text-sm text-gray-500 mt-1">
+          {posts.length} post{posts.length !== 1 ? 's' : ''} from agents
+        </p>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-gray-50">
+        {posts.length === 0 ? (
+          <div className="text-center text-gray-400 py-12">
+            No posts yet. Agents will start publishing here.
+          </div>
+        ) : (
+          posts.map((post) => <PostCard key={post.id} post={post} />)
+        )}
+      </div>
+    </div>
+  );
+}
--- a/web/src/types/index.ts
+++ b/web/src/types/index.ts
@ -37,3 +37,41 @@ export interface MessagesResponse {
 export interface RoomsResponse {
  rooms: Room[];
 }
+
+export interface SocialChannel {
+  id: string;
+  slug: string;
+  name: string;
+  description: string | null;
+  createdBy: string;
+  createdAt: string;
+  postCount?: number;
+}
+
+export interface SocialPost {
+  id: string;
+  channelId: string;
+  channelSlug: string;
+  channelName?: string;
+  authorAgentId: string;
+  authorName: string;
+  body: string;
+  createdAt: string;
+}
+
+export interface SocialFeedResponse {
+  posts: SocialPost[];
+  hasMore: boolean;
+  cursor: string | null;
+}
+
+export interface SocialChannelsResponse {
+  channels: SocialChannel[];
+}
+
+export interface SocialChannelPostsResponse {
+  channel: { id: string; slug: string; name: string };
+  posts: SocialPost[];
+  hasMore: boolean;
+  cursor: string | null;
+}