fix: Bug contains-studio#8 — pin/unpin messages update in real-time via WebSocket

After pinning or unpinning a message, the backend now emits a
message:updated event to all channel members. The frontend already
handled this event to update the message store (pin indicator), and
PinsPanel now subscribes to message:updated to refresh its list
without a page reload.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: ncavaglione

backend/src/routes/threads.ts

@@ -3,6 +3,7 @@ import { z } from 'zod';
 import prisma from '../db.js';
 import { authMiddleware } from '../middleware/auth.js';
 import { AuthRequest } from '../types.js';
+import { getIO } from '../websocket/index.js';
 
 const router = Router();
 
@@ -264,6 +265,12 @@ router.post('/:id/pin', authMiddleware, async (req: AuthRequest, res: Response)
       },
     });
 
+    // Broadcast the updated message to all users in the channel
+    const io = getIO();
+    if (io) {
+      io.to(`channel:${updated.channelId}`).emit('message:updated', updated);
+    }
+
     res.json(updated);
   } catch (error) {
     console.error('Pin message error:', error);
@@ -311,6 +318,12 @@ router.delete('/:id/pin', authMiddleware, async (req: AuthRequest, res: Response
       },
     });
 
+    // Broadcast the updated message to all users in the channel
+    const io = getIO();
+    if (io) {
+      io.to(`channel:${updated.channelId}`).emit('message:updated', updated);
+    }
+
     res.json(updated);
   } catch (error) {
     console.error('Unpin message error:', error);

backend/src/websocket/index.ts

@@ -60,6 +60,9 @@ export function initializeWebSocket(httpServer: HttpServer) {
     },
   });
 
+  // Store module-level reference so REST routes can broadcast events
+  ioInstance = io;
+
   // Authentication middleware
   io.use((socket: AuthenticatedSocket, next) => {
     const token = socket.handshake.auth.token;
@@ -435,6 +438,13 @@ export function initializeWebSocket(httpServer: HttpServer) {
   return io;
 }
 
+// Module-level io reference so REST routes can emit events
+let ioInstance: Server | null = null;
+
+export function getIO(): Server | null {
+  return ioInstance;
+}
+
 // Export for use in REST endpoints
 export function isUserOnline(userId: number): boolean {
   return onlineUsers.has(userId) && onlineUsers.get(userId)!.size > 0;

frontend/src/components/Messages/PinsPanel.tsx

@@ -1,7 +1,8 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { X, Pin } from 'lucide-react';
 import { format } from 'date-fns';
 import { getPinnedMessages, type ApiMessage } from '@/lib/api';
+import { getSocket } from '@/lib/socket';
 import { Avatar } from '@/components/ui/avatar';
 import { renderMessageContent } from '@/lib/renderMessageContent';
 
@@ -14,14 +15,38 @@ export function PinsPanel({ channelId, onClose }: PinsPanelProps) {
   const [pins, setPins] = useState<ApiMessage[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
-  useEffect(() => {
+  const fetchPins = useCallback(() => {
     setIsLoading(true);
     getPinnedMessages(channelId)
       .then((data) => setPins(data))
       .catch((err) => console.error('Failed to fetch pins:', err))
       .finally(() => setIsLoading(false));
   }, [channelId]);
 
+  useEffect(() => {
+    fetchPins();
+  }, [fetchPins]);
+
+  // Listen for message:updated events — refresh pins when a message in this
+  // channel is pinned or unpinned so the panel stays current without a reload.
+  useEffect(() => {
+    const socket = getSocket();
+    if (!socket) return;
+
+    const handleMessageUpdated = (msg: ApiMessage) => {
+      if (msg.channelId !== channelId) return;
+      // Re-fetch the canonical pin list from the server
+      getPinnedMessages(channelId)
+        .then((data) => setPins(data))
+        .catch((err) => console.error('Failed to refresh pins:', err));
+    };
+
+    socket.on('message:updated', handleMessageUpdated);
+    return () => {
+      socket.off('message:updated', handleMessageUpdated);
+    };
+  }, [channelId]);
+
   return (
     <div data-testid="pins-panel" className="flex w-[300px] flex-col border-l border-[#E0E0E0] bg-white">
       <div className="flex h-[49px] items-center justify-between border-b border-[#E0E0E0] px-4">

frontend/tests/pins.spec.ts

@@ -35,4 +35,92 @@ test.describe('Pinned Messages', () => {
     // The pinned message should appear in the pins panel
     await expect(page.getByTestId('pins-panel').getByText(uniqueText)).toBeVisible({ timeout: 5000 });
   });
+
+  test('pinning a message updates in real-time for another user in the same channel', async ({ browser }) => {
+    // User 1 sends and pins a message; user 2 (in another browser context) should
+    // see the pin indicator appear without refreshing.
+    const email1 = uniqueEmail();
+    const email2 = uniqueEmail();
+
+    // Set up user 1
+    const context1 = await browser.newContext();
+    const page1 = await context1.newPage();
+    await register(page1, 'PinnerUser', email1, 'password123');
+    await clickChannel(page1, 'general');
+    await waitForChannelReady(page1);
+
+    // Set up user 2 (observer)
+    const context2 = await browser.newContext();
+    const page2 = await context2.newPage();
+    await register(page2, 'ObserverUser', email2, 'password123');
+    await clickChannel(page2, 'general');
+    await waitForChannelReady(page2);
+
+    // User 1 sends a message
+    const uniqueText = `RealTimePin ${Date.now()}`;
+    await sendMessage(page1, uniqueText);
+
+    // Both users should see the message
+    await waitForMessage(page1, uniqueText);
+    await waitForMessage(page2, uniqueText);
+
+    // User 1 pins the message via the dropdown
+    const messageRow1 = page1.locator('.group.relative.flex.px-5').filter({ hasText: uniqueText }).first();
+    await messageRow1.hover();
+    const hoverToolbar1 = page1.locator('.absolute.-top-4.right-5');
+    await hoverToolbar1.locator('button').last().click();
+    await page1.getByText('Pin message').click();
+
+    // User 1's view: pin indicator appears (optimistic update)
+    await expect(messageRow1.locator('[data-testid="pin-indicator"]')).toBeVisible({ timeout: 5000 });
+
+    // User 2's view: pin indicator should appear in real-time via WebSocket (no page refresh)
+    const messageRow2 = page2.locator('.group.relative.flex.px-5').filter({ hasText: uniqueText }).first();
+    await expect(messageRow2.locator('[data-testid="pin-indicator"]')).toBeVisible({ timeout: 10000 });
+
+    await context1.close();
+    await context2.close();
+  });
+
+  test('pinned messages panel updates in real-time when a message is pinned', async ({ browser }) => {
+    const email1 = uniqueEmail();
+    const email2 = uniqueEmail();
+
+    // Set up user 1 (pinner)
+    const context1 = await browser.newContext();
+    const page1 = await context1.newPage();
+    await register(page1, 'PinnerB', email1, 'password123');
+    await clickChannel(page1, 'general');
+    await waitForChannelReady(page1);
+
+    // Set up user 2 (observer with pins panel open)
+    const context2 = await browser.newContext();
+    const page2 = await context2.newPage();
+    await register(page2, 'ObserverB', email2, 'password123');
+    await clickChannel(page2, 'general');
+    await waitForChannelReady(page2);
+
+    // User 2 opens the pins panel
+    await page2.getByRole('button', { name: 'Pins' }).click();
+    await expect(page2.getByTestId('pins-panel')).toBeVisible({ timeout: 5000 });
+
+    // User 1 sends a message
+    const uniqueText = `PinsPanel ${Date.now()}`;
+    await sendMessage(page1, uniqueText);
+    await waitForMessage(page1, uniqueText);
+    await waitForMessage(page2, uniqueText);
+
+    // User 1 pins the message
+    const messageRow1 = page1.locator('.group.relative.flex.px-5').filter({ hasText: uniqueText }).first();
+    await messageRow1.hover();
+    const hoverToolbar1 = page1.locator('.absolute.-top-4.right-5');
+    await hoverToolbar1.locator('button').last().click();
+    await page1.getByText('Pin message').click();
+
+    // User 2's pins panel should update in real-time to show the newly pinned message
+    await expect(page2.getByTestId('pins-panel').getByText(uniqueText)).toBeVisible({ timeout: 10000 });
+
+    await context1.close();
+    await context2.close();
+  });
 });