jolly-app

As a backend developer, I want FastAPI endpoints to get and update user preferences (display name, sort behavior, reduced motion), securely store and retrieve masked LLM API key via LiteLLM config, and reset all tasks with confirmation — all JWT-protected and compliant with Section 7.4 security requirements.

As a backend developer, I want FastAPI endpoints returning task statistics, score range breakdowns, completion trends (7/30 days in IST), and AI-accepted vs manual override counts so that the Analytics page can display accurate insights from MySQL data. All endpoints JWT-protected.

As a backend developer, I want a PATCH /tasks/reorder endpoint that accepts an ordered list of task IDs and saves sort_order on each record so that manual reordering survives page refreshes and GET /tasks respects the custom order.

As a backend developer, I want a scoring service that sends all current task content plus new task text to GPT-5.2 via LiteLLM and returns a priority score (0–100) with reasoning, persisting ai_score and llm_reasoning to the DB via POST /tasks/{id}/score. LLM API keys managed server-side.

As a developer, I want to define a global monochrome color palette using Tailwind CSS tokens so that all components reference consistent black, white, and grayscale values (Ink Black #0A0A0A, Pure White #FFFFFF, Charcoal #1A1A1A, etc.) aligned with The Darkroom theme.

As a user, I want to view an Analytics page styled as a darkroom proof sheet based on the Analytics v1 design so that I can see task breakdowns by score range (High 80–100, Medium 50–79, Low 0–49), completion vs remaining trends over 7 and 30 days, and AI-accepted vs manually overridden tasks — all rendered in white lines on black background using Recharts.

As a user, I want to visit a Settings page styled as a camera settings panel based on the Settings v1 design so that I can toggle reduced motion, set a display name, choose default sort behavior, reset all tasks with confirmation, and view/update my masked LLM API key — all in The Darkroom monochrome aesthetic.

As a user, I want to view and interact with a Task Detail page based on the Task Detail v2 mock so that I can override the AI score using a monochrome exposure dial, read LLM reasoning in a monospace caption-style tooltip, and navigate back to Home — all within The Darkroom aesthetic.

As a user, I want the app to remain fully functional when AI scoring fails — backend falls back to default score 50 with reasoning 'AI scoring unavailable', and frontend shows a monochrome unverified indicator on affected task cards without blocking the UI.

As a user, I want to view my task list on a black and white Home page based on the Home v3 mock so that I can add tasks, view AI scores, reorder, complete, and delete items within The Darkroom aesthetic, featuring the full-viewport black canvas develop animation, film grain texture, and parallax layers.

As a user, I want to see a score badge rendered in grayscale so that the AI priority score (0–100) is displayed as a stark black circle with white monospace numeral — large/bold for high scores (80–100), medium silver for mid scores (50–79), faint grey for low scores (0–49), with a film-strip loading animation during scoring.

As a user, I want the Settings page to read and persist user preferences, API key updates, and task reset actions through the Settings backend API so that all configuration changes are correctly saved and reflected across the app.

As a user, I want the Analytics page to fetch live statistics, completion trends, and score breakdown data from the Analytics backend API so that all Recharts visualizations reflect real task data from the database.

As a user, I want to hover over the AI score badge and see a monochrome tooltip showing the LLM's 1–2 sentence reasoning in a monospace font — white text in a black pop-up like a photograph caption — with keyboard accessibility and a graceful fallback when reasoning is unavailable.

As a user, I want to drag and drop tasks on the Home page to manually reorder them using React Beautiful DnD so that I can set my own priority order. Dragged tasks emit a stark black offset hard shadow. Works on both mouse and touch. Custom order overrides AI sort until reset.

As a user, I want to override the AI-generated priority score using a monochrome exposure dial style slider with tick marks — like a film exposure compensation dial on a camera — so that I can manually set a score between 0 and 100 with precise integer validation.

As a user, I want to see a 4-layer monochrome parallax background (dot-matrix grid at 0.2x, typographic watermarks at 0.5x, dark geometric shapes at 0.8x, task cards snapping at 1x) with a 5-minute greyscale color loop so that the app feels cinematic and alive without any dawn sky colors. Must respect prefers-reduced-motion.

As a user, I want the task list to automatically re-sort by effective score whenever AI scoring completes or a manual override is saved, without a full page refresh, using Framer Motion layout animations completing within 300ms.

As a user, I want the Task Detail page to fetch real task data from the backend, display live AI score and LLM reasoning, and persist manual score overrides via PATCH /tasks/{id} so that effective score updates and Home page order reflects the change on navigation back.

As a user, I want to mark a task as complete with a negative inversion flash animation (quick white-flash invert like a photo exposed to light) followed by the card fading to 30% opacity and moving to the bottom — all in monochrome, no golden light effects.

As a user, I want to delete a task from the Home page with a monochrome confirmation prompt so that accidental deletions are prevented. The deleted task animates out with a Framer Motion exit animation. Calls DELETE /tasks/{id} with optimistic removal.

As a user, I want all UI micro-interactions — card hover contrast boost (filter: contrast(1.1) brightness(1.05)), score badge tooltip, task input cursor pulse, drag hard black offset shadow, full-screen white flash page transitions — styled in monochrome so the entire experience feels like a precision darkroom instrument.

As a user, I want the Home page to load real tasks from the backend API, display live AI scores, and reflect actual sort order. Replace all mock data with React Query API calls. Implement optimistic UI for task creation and film-strip loading state on score badge during scoring.

As a user, I want my custom drag-and-drop task order persisted to the server via PATCH /tasks/reorder so that it survives page refresh. A subtle monochrome saving indicator shows during the call and local order reverts gracefully on error.