As a user I want to be able to use the frontend with a consistent retro junkyard theme so all pages look visually cohesive. Set up global CSS custom properties (design tokens): primary #D35400, teal #1ABC9C, yellow #F1C40F, charcoal #34495E, beige #F5F5DC. Integrate 'Press Start 2P' and 'Courier New' fonts. Define shared distressed texture utilities, rust-orange glow shadows, and gear/bolt icon base styles. Ensure all scaffold pages inherit the theme. Remove any pages not present in design pages.
As a user I want to be able to use the backend API for task management so I can create, read, update, and delete tasks. Implement FastAPI endpoints: POST /tasks, GET /tasks, PUT /tasks/{id}, DELETE /tasks/{id}. Include category assignment, due date (IST), and priority fields. Secured with JWT auth.
As a user I want to be able to use the backend API for account settings so I can update my profile, change password, manage 2FA, and configure notification preferences. Implement FastAPI endpoints: GET/PUT /users/me, PUT /users/me/password, POST/DELETE /users/me/2fa, GET/PUT /users/me/notifications, GET /users/me/sessions, DELETE /users/me/sessions/{id}.
As a user I want to be able to use the backend API for goals management so I can create, list, reorder, and delete goals. Implement FastAPI endpoints: POST /goals, GET /goals, PUT /goals/{id}, PATCH /goals/reorder (accepts ordered list of goal IDs), DELETE /goals/{id}. Priority order field drives AI sorting. Secured with JWT auth.
As a user I want to be able to use the frontend Landing page so I can view the junkyard scene, navigate to Login, and Register. Implement the Landing page based on the existing JSX design (v2). Includes: animated junkyard panorama background, NavBar, Hero section, InteractiveJunkyardScene, FeatureHighlights, HowItWorks, AISpotlight, Testimonials, SocialProof, CallToAction, and Footer sections. Entry point for all user flows.
As an admin I want to be able to use the backend API for user management so I can list, edit, and deactivate user accounts. Implement FastAPI endpoints: GET /admin/users, GET /admin/users/{id}, PUT /admin/users/{id}, DELETE /admin/users/{id}. Role-based access control: admin-only routes. Returns user details including role, status, and IST timestamps.
As a user I want to be able to use the frontend Signup page so I can create a new account. Implement the Signup page based on the existing JSX design (v2). Includes: registration form with junkyard theme, field validation feedback, link back to Login, and redirect to Dashboard on success.
As a user I want to be able to use the frontend Dashboard page so I can view, create, and categorize tasks, and see AI-sorted tasks. Implement the Dashboard page based on the existing JSX design (v2). Includes: TopBar, Sidebar, WelcomeBanner, StatsStrip, TaskBoard (CRUD + crumple delete + DONE stamp), AISortedQueue, CategoryManager, GoalsWidget, and StatusBar. Supports task creation, categorization, drag-and-drop reorder, and AI sorted queue view.
As a user I want to be able to use the frontend Login page so I can sign in and reach the Dashboard. Implement the Login page based on the existing JSX design (v2). Includes: retro junkyard styled form, rust-orange CTA button, link to Signup page, error state handling. Connects from Landing and leads to Dashboard on success.
As a user I want to be able to use the frontend Settings page so I can configure my profile, security, notifications, AI model preferences, and appearance. Implement the Settings page based on the existing JSX design (v2). Includes: SettingsTopBar, SettingsNav sidebar (collapsible drawer on mobile), ProfileSection, AccountSecurity, NotificationPrefs, AIModelSettings, AppearanceSettings, DangerZone, and SettingsFooter.
As a user I want to be able to use the AI API for task sorting so my tasks are automatically ranked based on my goal priorities. Implement an AI sorting service using Litellm for LLM routing and Langchain for workflow. Embed tasks into WeaviateDB vector store. On goals reorder or manual trigger, re-rank tasks by goal alignment score. Expose POST /tasks/ai-sort endpoint returning sorted task list with alignment scores.
As a user I want to be able to use the backend API for task categories so I can organize tasks into groups. Implement FastAPI endpoints: POST /categories, GET /categories, PUT /categories/{id}, DELETE /categories/{id}. Each category has name, color, and task count. Secured with JWT auth.
As a user I want to be able to use the frontend Settings page so it saves and loads real data from the backend. Wire ProfileSection, AccountSecurity (password change, 2FA, sessions), NotificationPrefs, AIModelSettings, and AppearanceSettings to their respective API endpoints. Implement the DangerZone export-data and delete-account flows with confirmation modal.
As a user I want to be able to use the frontend Dashboard so it fetches real task data from the backend API. Wire the TaskBoard, AISortedQueue, CategoryManager, StatsStrip, and GoalsWidget components to live API endpoints. Implement optimistic UI updates for task CRUD, crumple delete animation on DELETE call, and DONE stamp on complete. Handle loading and error states.
As a user I want to be able to use the frontend Goals page so I can set, list, and reorder my goals which drive AI task sorting. Implement the Goals page based on the existing JSX design (v2). Includes: goal list with drag-and-drop reorder (priority order), goal creation form, goal progress indicators, link back to Dashboard, and trigger for AI re-sort on reorder.
As an admin I want to be able to use the frontend Users page so I can manage user accounts and edit user details. Implement the Users page based on the existing JSX design (v2). Includes: user list table with junkyard styling, edit account form/modal, role badges (Yard Worker / Yard Boss), and access restricted to admin persona only.
As an admin I want to be able to use the frontend Users page so it fetches and updates real user data via the admin API. Wire the user list table and edit account modal to GET/PUT /admin/users endpoints. Implement role badge updates (Yard Worker / Yard Boss), account deactivation flow, and admin-only route guard.
As a user I want to be able to use the frontend Goals page so that reordering goals triggers AI task re-sort and I can view results on the Dashboard. Connect Goals page drag-and-drop reorder to PATCH /goals/reorder API. On reorder, call POST /tasks/ai-sort and update AISortedQueue on Dashboard. Show a conveyor belt shuffle animation during re-sort.
No page designs yet.
The Design Agent will generate JSX pages automatically after user flows are created.
No user flows yet.
The User Flow Agent will generate per-persona navigation diagrams after SRD updates.
No comments yet. Be the first!