feral-application

As a user, I want to see an interactive galaxy homepage so that I feel immersed in the Dynamic Chat Universe concept upon arrival. Implement the Landing page based on the existing v3 JSX design. This includes: the animated 3D starfield, pulsating star nodes representing chat rooms, hover tooltips, slow orbit animations, CTA buttons linking to Login and Register, and time-of-day color shift logic. Connects to: Login page and Register page.

As a user, I want to create a new account so that I can join the Feral platform. Implement the Register page based on the existing v2 JSX design. Includes: name, email, password, confirm-password fields, terms acceptance, Aqua Blue submit button, validation feedback, and link back to Login. Connects from: Landing page. Connects to: Login page after successful registration.

As a user, I want to log in securely so that I can access the chat application. Implement the Login page based on the existing v2 JSX design. Includes: frosted-glass login card over starfield, email/password inputs with Aqua Blue focus rings, 'Sign In' CTA, link to Register, error state handling, and redirect to Home on success. Connects from: Landing page. Connects to: Home page (user) and Dashboard page (admin).

As an admin, I want to see a high-level overview of platform activity so that I can monitor system health and user engagement. Implement the Dashboard page based on the existing v2 JSX design. Includes: stats overview cards, recent activity feed, active users chart, and navigation to Monitor and Users pages. Connects from: Login (admin role). Connects to: Monitor page and Users page.

As a user, I want to browse available chat rooms and direct messages so that I can quickly navigate to conversations. Implement the Home page based on the existing v3 JSX design. Includes: top navigation bar, conversation list with unread badges, group previews, search bar, online presence indicators, and links to Chat and Groups pages. Connects from: Login. Connects to: Chat page and Groups page.

As a user, I want to use a backend API for registration and login so that my credentials are securely stored and authenticated. Implement FastAPI endpoints: POST /auth/register, POST /auth/login (JWT), POST /auth/logout, GET /auth/me. Include password hashing, JWT token generation, and role-based access control (user vs admin). Supports Login and Register pages.

As an admin, I want to review all chat activity and flag inappropriate content so that I can keep the platform safe. Implement the Monitor page based on the existing v3 JSX design. Includes: TopBar, Sidebar, MonitorHeader, MonitorStatsBar, ChatFeedTable with status badges, FlaggedContentPanel with Coral Red cards, ActivityTimeline, and FlagModal. Connects from: Dashboard page. Connects to: Flag Content flow.

As a user, I want to view and update my profile information so that my identity on the platform is accurate. Implement the Profile page based on the existing v3 JSX design. Includes: ProfileBanner with constellation canvas, ProfileIdentityCard, SidebarNav with smooth-scroll anchors, EditProfileForm, ActivityChatHistory, NotificationPreferences, PrivacySecuritySettings, and DangerZone sections. Connects from: Chat page header avatar.

As an admin, I want to view, search, and manage all registered user accounts so that I can enforce platform policies. Implement the Users page based on the existing v3 JSX design. Includes: user list table with avatar, role badge, status, pagination, search/filter controls, Edit User modal/drawer, ban/unban actions, and Coral Red alert states. Connects from: Dashboard page.

As a user, I want to discover and join group chats so that I can participate in community conversations. Implement the Groups page based on the existing v3 JSX design. Includes: group discovery grid, join/leave buttons, group detail cards, member counts, search/filter, and navigation to the Chat page on joining. Connects from: Home page. Connects to: Chat page.

As a user, I want to send and receive real-time messages in a chat thread so that I can communicate with others. Implement the Chat page based on the existing v2 JSX design. Includes: three-panel layout (ConversationSidebar, MessageThread, ConversationDetails), real-time message bubbles, AI smart reply chips, typing indicator, emoji reactions, message input bar with frosted glass styling, and read receipts. Connects from: Home page and Groups page.

As a user, I want to use a backend API for real-time messaging so that messages are delivered instantly. Implement FastAPI + WebSocket endpoints: WS /chat/{room_id}, POST /messages/send, GET /messages/{room_id}/history, with message persistence in MySQL and end-to-end encryption support. Supports Chat page.

As an admin, I want to use a backend API for chat monitoring and content flagging so that I can review and moderate messages. Implement FastAPI endpoints: GET /admin/monitor/feed, POST /admin/flags/create, PUT /admin/flags/{id}/resolve, PUT /admin/flags/{id}/dismiss, GET /admin/flags, GET /admin/activity-log. Supports Monitor page.

As a user, I want to use a backend API for group management so that I can create, join, and leave group chats. Implement FastAPI endpoints: POST /groups/create, GET /groups, POST /groups/{id}/join, POST /groups/{id}/leave, GET /groups/{id}/members. Supports Groups page and Chat page.

As a user, I want to use a backend API for profile updates so that my personal information is saved securely. Implement FastAPI endpoints: GET /profile/{user_id}, PUT /profile/update (display name, avatar, bio, location, timezone), PUT /profile/change-password, GET /profile/activity-history. Supports Profile page.

As an admin, I want to use a backend API for user account management so that I can view, edit, ban, and delete user accounts. Implement FastAPI endpoints: GET /admin/users, GET /admin/users/{id}, PUT /admin/users/{id}/edit, POST /admin/users/{id}/ban, POST /admin/users/{id}/unban, DELETE /admin/users/{id}. Supports Users management page.

As an admin, I want the system to use AI to automatically classify message violations so that flagged content is labeled with risk categories. Integrate GPT via LangChain: POST /ai/moderate (accepts message text, returns risk label: Hate Speech / Spam / Policy Violation / Clean and confidence score). Wire into the monitor feed and FlaggedContentPanel AI risk tags.

As a user, I want to use a backend API for privacy and security settings so that I can control my profile visibility, 2FA, and active sessions. Implement FastAPI endpoints: PUT /security/visibility, PUT /security/2fa/toggle, GET /security/sessions, DELETE /security/sessions/{id}/revoke. Supports PrivacySecuritySettings section on Profile page.

As a user, I want to use a backend API for notification settings so that I can control which alerts I receive. Implement FastAPI endpoints: GET /notifications/preferences, PUT /notifications/preferences (toggle DMs, mentions, group activity, system alerts, sound, email digest, quiet hours). Supports NotificationPreferences section on Profile page.

As a user, I want to use AI-generated smart reply suggestions in the chat interface so that I can respond faster. Integrate GPT via LiteLLM routing and LangChain: POST /ai/smart-reply (accepts message context, returns 3-4 reply chips). Wire suggestions into the Chat page MessageThread input bar AI smart reply chips component. Use LiteLLM for LLM routing to GPT model.

As a developer, I want to wire all frontend pages to their corresponding backend API endpoints so that the application is fully functional end-to-end. Covers: auth token management (JWT in headers), React context/state for user session, API service layer (axios/fetch), WebSocket client hook for real-time chat, and error boundary handling across all pages.