[janetobande]

Overview

This PR adds a spectator chat panel to the watch page, wiring the existing moderated spectator chat backend into the frontend. Spectators can now send chat messages, see incoming messages rendered in real time, and receive feedback when a message is rejected by moderation.

Related Issue

Changes

💬 Spectator Chat Panel

• [MODIFY] frontend/hook/useSpectatorSocket.ts

  • Extends the spectator socket hook to send chat messages over the existing game socket.
  • Handles incoming spectator chat messages and exposes them as state for rendering.
  • Surfaces moderation rejections back to the sender so the UI can display them.

• [MODIFY] frontend/app/watch/page.tsx

  • Adds a chat panel to the spectator view with a message list and input.
  • Renders incoming chat messages and sends outgoing messages via the hook.
  • Displays moderation rejection feedback to the sender.

Verification Results

Manual check on watch page:
✅ Chat messages send and render in the spectator panel
✅ Incoming messages from other spectators appear in real time
✅ Moderation rejections are shown to the sender

Acceptance Criteria	Status
Add a chat panel to the spectator view that sends chat messages and renders incoming ones	✅ Chat panel added to watch page with send + render wired through useSpectatorSocket
Show moderation rejections to the sender	✅ Rejections surfaced from the hook and displayed in the chat panel

Closes #1374

[drips-wave]

@janetobande Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits