crimson-header

As a user I want to see the Home page rendered exactly as per the Home v2 design so that I can view the website header with the product name, interact with a 3D animated On/Off toggle switch featuring a glow effect, and experience the full visual layout including all animations and responsive behavior. Remove any scaffold pages not needed per the design.

As a user I want the Login page to be rendered exactly as per the Login v2 design so that I can authenticate into the application with a visually polished and on-brand login form, including all typography, spacing, input field styles, button states, and background treatments defined in the design.

As an admin I want the Dashboard page to be rendered exactly as per the Dashboard v1 design so that I can view aggregated stats and monitor traffic through a well-structured layout that includes all panels, data visualization placeholders, navigation elements, and visual hierarchy specified in the design.

As a user I want to see the Stats Card component rendered exactly as per the Stats Card v1 design so that I can view the cumulative blocked request count with a rolling odometer animation that visually communicates real-time number updates in an engaging and readable format.

As a user I want the Traffic List page to be rendered exactly as per the Traffic List v2 design so that I can view blocked requests in a live feed with slide-in animations for new entries, hover-to-pause functionality, and all layout details including column headers, row styles, and status indicators defined in the design.

As an admin I want the Settings page to be rendered exactly as per the Settings v1 design so that I can configure application toggles and manage data sources through a clearly structured settings interface including all form controls, toggle switches, section groupings, and interactive states defined in the design.

As a user I want the backend to push real-time updates of the blocked request count via WebSocket or Server-Sent Events so that the Stats Card component reflects live count changes without manual page refreshes, including delta updates and full count snapshots at defined intervals.

As a user I want the backend to push real-time blocked request events via WebSocket or Server-Sent Events so that the Traffic List page can display new blocked requests as they occur, with event payloads containing all fields required for the traffic list row display.

As a user I want the AI Assistant page within the dashboard to have a fully functional chat interface so that I can interact with the AI assistant through a message input field, scrollable conversation history, loading indicators while responses are being generated, and a visually polished layout consistent with the overall application theme.

As a user I want the Stats Card component to connect to the real-time stats WebSocket or SSE stream so that the cumulative blocked count updates live in the browser with the rolling odometer animation triggering on each new value, providing a seamless real-time experience without page reload.

As a user I want the Traffic List page to connect to the real-time traffic WebSocket or SSE stream so that new blocked requests slide into the list as they arrive, the live feed pauses on hover, and the list maintains a manageable display window of recent entries with smooth animations.

As a user I want the Home page On/Off toggle switch to read its initial state from the backend API and persist state changes back to the server so that the toggle accurately reflects the real protection status, with optimistic UI updates, error handling for failed saves, and visual feedback during the save operation.

As a user I want the AI Assistant page frontend to connect to the backend AI API so that my messages are sent to the GPT and Langchain powered backend, responses are streamed or returned and displayed in the chat interface with appropriate loading states, and the full conversational experience works end-to-end within the dashboard.