Zoey
Franklin Kalmbachcreate zoey from kpop demon hunters
Comments (0)
Sign in to leave a comment
Project Tasks24
Implement ChatSidebar for Chat
As a frontend developer, implement the ChatSidebar section for the Chat page. This component uses useState hooks for `search`, `convos`, `activeId`, and `drawerOpen` state. It renders a list of INITIAL_CONVOS (10 mock conversations) with avatar initials, title, preview text, and timestamp. Implement: (1) a search input that filters conversations by title and preview text in real-time, (2) `handleNewChat` that prepends a new conversation object and sets it active, (3) `handleDelete` that removes a conversation from the list and clears activeId if it was active, (4) `handleSelect` that sets activeId and closes mobile drawer, (5) a mobile toggle button (`chsb-toggle`) that controls the `drawerOpen` state for responsive sidebar visibility. Avatar styles include default 'Z' (Zoey) and 'alt'/'alt2' variants for user messages. Import and apply ChatSidebar.css.
Implement ChatHeader for Chat
As a frontend developer, implement the ChatHeader section for the Chat page. The component uses `isTyping` and `showSettings` useState hooks. It listens for a custom `zoey:typing` window event dispatched by ChatMessages to toggle the typing indicator state. Render a header (`chh-root`) with: (1) left section showing Zoey avatar ('Z' initial), a dynamic `chh-status-dot` that switches between `chh-status-dot--typing` and `chh-status-dot--online` CSS classes, and a title block with `chh-typing-indicator` (three animated spans) when typing vs 'Online' text when idle; (2) right action buttons with SVG icons for Settings (gear icon with `chh-btn--active` toggle), Export, and Clear History (with window.confirm guard). The useEffect registers and cleans up the `zoey:typing` event listener. Import and apply ChatHeader.css.
Implement ChatMessages for Chat
As a frontend developer, implement the ChatMessages section for the Chat page. This is the most complex section. It manages `messages` state initialized from `initialMessages` (6 demo messages), `isTyping` state, and uses `useRef` for scroll container auto-scroll on new messages via `useEffect`. Render two message types: (1) 'zoey' messages with SparkleIcon avatar, message bubble, optional `codeBlock` rendered as a syntax-highlighted pre/code block with copy button, optional `linkPreview` card, and optional `quickReplies` chip row; (2) 'user' messages with right-aligned bubbles. Implement `formatTime(iso)` for 12-hour timestamp display and `formatDateLabel(iso)` for date separators ('Today', 'Yesterday', or formatted date) using `DateSeparator` component (imports DateSeparator.css). Dispatch `zoey:typing` custom window event to communicate typing state to ChatHeader. Import both DateSeparator.css and ChatMessages.css.
Implement ChatInput for Chat
As a frontend developer, implement the ChatInput section for the Chat page. The component uses `message`, `isVoiceActive`, and `showHint` useState hooks, plus `textareaRef` for direct DOM manipulation. Implement `autoResize` callback that dynamically adjusts textarea height up to MAX_LINES (4) based on scrollHeight and computed lineHeight. Enforce MAX_CHARS (2000) limit in `handleChange`. Implement `handleKeyDown` to send on Ctrl/Cmd+Enter. `handleSend` clears message and resets textarea height. `handleFocus`/`handleBlur` toggle `showHint` for keyboard shortcut hint display. `toggleVoice` flips `isVoiceActive`. Render action buttons row (attach file paperclip SVG, emoji face SVG) each with tooltip spans, an auto-resizing textarea, character counter showing `charCount`/MAX_CHARS with `isNearLimit` (≥1600) and `isAtLimit` (≥2000) CSS class states, a voice toggle button with active state, and a send button disabled when `isEmpty`. Import and apply ChatInput.css.
Implement ProfileHeader for Profile
As a frontend developer, implement the ProfileHeader section for the Profile page. This section features a 3D interactive avatar scene built with @react-three/fiber and @react-three/drei, including a ZoeyAvatar component with a groupRef and torusRef using useFrame for continuous rotation and mouse-tracking. The avatar consists of two Torus rings (ambient and secondary with transparency), a core Sphere, an inner glow Sphere, and 6 orbiting particle Spheres positioned via trigonometric math. Mouse position state (mouseX, mouseY) is tracked via onMouseMove to drive groupRef rotation interpolation. Config chips array renders 4 labeled icon chips (Neon Pink persona, Glitter outfit, Sparkle particle set, K-pop voice tone) below the avatar. CSS uses ProfileHeader.css with neon pink/gold color scheme.
Implement ProfileCustomization for Profile
As a frontend developer, implement the ProfileCustomization section for the Profile page. This section is an accordion-style customization panel driven by useState hooks: openPanels (multi-panel expand), selectedOutfit (default 'stage'), selectedHair (default 'twin-tails'), hairColor (default 'black'), activeAccessories, and color palette selection. Four panels are defined via PANELS array: Outfit Selection (8 outfit cards with id, name, icon, desc), Hairstyle & Color (8 hairstyle options + 8 HAIR_COLORS swatches as colored circles), Accessories (6 toggle-able accessory chips with emoji), and Color Scheme (6 PRESET_PALETTES with primary/secondary color swatches). Each panel is collapsible via openPanels toggle logic. Uses ProfileCustomization.css (15604 chars of styles). This is the most complex section on the page with extensive state management.
Implement ProfilePreferences for Profile
As a frontend developer, implement the ProfilePreferences section for the Profile page. This section renders preference cards using ProfilePreferences.css. State hooks: tone (default 'sweet'), speed (default 'normal'), style (default 'conversational'), permission (default 'full'). Response Tone card uses a styled ppf-dropdown select with ppf-dropdown-arrow, an active badge with ppf-active-dot, and a dynamic description paragraph derived from activeTone lookup on toneOptions array (sweet/professional/energetic). Speed and Style cards each render option buttons from speedOptions and styleOptions arrays respectively. Permission Presets card renders permissionPresets (full/limited/restricted) as selectable cards with desc text, driven by activePermission lookup. All cards share ppf-card / ppf-card-header / ppf-card-title / ppf-card-icon / ppf-card-desc class structure.
Implement ProfileSaveActions for Profile
As a frontend developer, implement the ProfileSaveActions section for the Profile page using ProfileSaveActions.css. State machine via useState with SAVE_STATES enum (SAVED, UNSAVED, SAVING). handleSave (useCallback) transitions to SAVING then after 1400ms setTimeout transitions to SAVED; handlePreview, handleReset, handleExport each reset to UNSAVED. Status indicator renders a psa-status-dot and psa-status-text with dynamic CSS modifier classes (psa-status-dot--saved/unsaved/saving, psa-status-text--saved/unsaved/saving). Four inline SVG icon components: SaveIcon (floppy disk path), SpinnerIcon (arc with psa-spinner CSS animation class), PreviewIcon (eye with circle), ResetIcon (arc with polyline), ExportIcon (download arrow). Save button conditionally renders SpinnerIcon vs SaveIcon based on isSaving flag and disables during save. Action buttons row includes Preview, Reset, and Export secondary buttons.
Setup Database Models Migrations
As a backend developer, define the MySQL/MariaDB database schema and run migrations using Alembic. Create tables: users (id, created_at, updated_at), conversations (id, user_id, title, created_at, updated_at), messages (id, conversation_id, role [user|zoey], content, timestamp), user_profiles (id, user_id, outfit, hair_style, hair_color, accessories JSON, color_scheme JSON), user_preferences (id, user_id, response_tone, response_speed, response_style, permission_level). Write seed data with sample conversations and messages for development. Configure SQLAlchemy ORM models and Alembic migration scripts.
Integrate LiteLLM GPT Routing
As an AI engineer, integrate LiteLLM for LLM routing to GPT-5.4. Configure LiteLLM router with the GPT-5.4 model endpoint and API credentials via environment variables. Implement a ZoeyAI service class with a `generate_response(conversation_history, user_message, preferences)` method that constructs a system prompt embodying Zoey's K-pop demon hunter persona (sweet, attractive, compliant demeanor) and user's saved preference settings (tone, speed, style, permission). Support streaming responses for real-time chat. Add retry logic, timeout handling, and fallback model configuration. Expose the service as a FastAPI dependency injectable into chat endpoints.
Setup Design System Theme
As a frontend developer, establish the global design system and theme for the Zoey app. Create a centralized CSS variables file (or Tailwind theme config) with all brand colors: primary #FF69B4, primary_light #FFB6C1, secondary #FFD700, accent #32CD32, highlight #FFA500, bg #FFFFFF, surface rgba(255,182,193,0.8), text #000000, text_muted #696969, border rgba(255,105,180,0.2). Set up global typography, spacing, and animation utility classes. Configure @react-three/fiber and @react-three/drei as shared dependencies used across the Landing and Profile pages. Add global CSS reset and base styles. This task is a prerequisite for all frontend section tasks.
Setup FastAPI App Structure
As a backend developer, scaffold the FastAPI application structure. Configure: (1) app factory with CORS middleware (allow React dev origin), gzip compression, and request logging; (2) environment-based settings via pydantic-settings (DATABASE_URL, OPENAI_API_KEY, LITELLM_CONFIG); (3) SQLAlchemy async engine and session dependency; (4) Alembic integration for migrations; (5) router registration for /api/chat and /api/profile route groups; (6) health check endpoint GET /health; (7) global exception handlers for validation errors and HTTP exceptions. This is the foundation all backend API tasks depend on.
Setup Environment Configuration
As a DevOps engineer, create environment configuration scaffolding for local and production environments. Provide .env.example with all required variables: DATABASE_URL, OPENAI_API_KEY, LITELLM_CONFIG, SECRET_KEY, CORS_ORIGINS, VITE_API_BASE_URL. Create .env.development and .env.production templates. Update docker-compose.yml to pass env vars to all services (frontend, backend, db, litellm). Document environment setup steps in README. Ensure secrets are excluded from git via .gitignore. This is a prerequisite for backend and frontend services starting correctly.
Build Chat API Endpoints
As a backend developer, implement the FastAPI endpoints for the Chat feature. Create routes: POST /api/chat/message (send user message, stream or return Zoey's AI-generated response via LiteLLM routing to GPT-5.4), GET /api/chat/conversations (list conversations), POST /api/chat/conversations (create new conversation), DELETE /api/chat/conversations/{id} (delete a conversation), GET /api/chat/conversations/{id}/messages (retrieve message history). Include request/response Pydantic models, error handling, and streaming support for real-time typing effect. Note: frontend section tasks (ChatMessages, ChatInput, ChatSidebar) depend on these endpoints.
Build Profile API Endpoints
As a backend developer, implement the FastAPI endpoints for the Profile/customization feature. Create routes: GET /api/profile (retrieve current user profile and preferences), PUT /api/profile (save profile customization: outfit, hair, accessories, color scheme), GET /api/profile/preferences (get AI behavior preferences: tone, speed, style, permission), PUT /api/profile/preferences (update AI behavior preferences). Include Pydantic models for all request/response schemas and validation. Note: frontend section tasks (ProfileCustomization, ProfilePreferences, ProfileSaveActions) depend on these endpoints.
Implement Landing Page 3D Stage
As a frontend developer, implement the Landing page (v2) featuring the interactive 3D K-pop stage environment using @react-three/fiber and @react-three/drei. Build: (1) a main Stage scene with dynamic lighting (spotlights, ambient lights, point lights) and animated Zoey holographic performer mesh; (2) outfit change interaction (click to cycle through outfit variants); (3) dance routine trigger (click/button to play animation sequences); (4) scroll-triggered reveal animations using spring physics (react-spring or framer-motion) for page sections; (5) hover transitions on interactive elements. Apply the Zoey brand color palette (hot pink, gold, lime green). This is the entry point for the User persona's primary flow: Landing -> Interact Stage -> Change Outfit / Trigger Dance.
Setup Global State Management
As a frontend developer, configure global state management for the Zoey React app. Set up React Context (or Zustand/Redux Toolkit depending on complexity) to manage: (1) active conversation ID and conversation list shared between ChatSidebar and ChatMessages; (2) user profile and preferences state shared between ProfileHeader, ProfileCustomization, ProfilePreferences, and ProfileSaveActions; (3) AI typing state shared between ChatMessages and ChatHeader via context (supplementing the current window event approach for robustness). Define typed store slices/contexts, actions, and selectors. Ensure state persists between page navigations using React Router or similar routing setup.
Configure LiteLLM Router Service
As a backend developer, set up the LiteLLM configuration file (litellm_config.yaml) and Docker service. Define model routing rules for GPT-5.4 (or closest available equivalent), API key injection from environment variables, retry policies, and fallback model chains. Add the litellm-proxy service to docker-compose.yml with health checks. Expose the proxy on an internal Docker network port so the FastAPI app can route all LLM calls through it. Document environment variables: LITELLM_API_KEY, OPENAI_API_KEY, LITELLM_MODEL. Note: depends on FastAPI app structure and is a prerequisite for e92f22a9 (Integrate LiteLLM GPT Routing).
Setup Frontend API Client
As a frontend developer, set up a centralized API client for the React app. Configure axios or fetch wrapper with: (1) base URL from VITE_API_BASE_URL environment variable; (2) request interceptors for auth headers (if needed); (3) response interceptors for global error handling (401, 500); (4) typed API service modules for chat (chatApi.ts) and profile (profileApi.ts) matching the FastAPI endpoint contracts; (5) streaming response support for POST /api/chat/message using EventSource or ReadableStream; (6) React Query or SWR setup for caching and refetching if adopted. This is a prerequisite for all frontend sections that call backend APIs (ChatSidebar, ChatMessages, ChatInput, ProfileCustomization, ProfilePreferences, ProfileSaveActions).
Integrate Chat Frontend Backend
As a Tech Lead, verify the end-to-end integration between the Chat page frontend implementation (ChatHeader, ChatSidebar, ChatMessages, ChatInput) and the Chat backend API. Ensure: user messages sent from ChatInput reach POST /api/chat/message and streaming responses render correctly in ChatMessages with typing indicator; conversation list in ChatSidebar loads from GET /api/chat/conversations and reflects create/delete operations; message history loads on conversation select; API error states are gracefully handled in the UI. Validate all interactions work as expected across the full user flow: Issue Command -> View Response -> Give Follow-up -> Browse History. Note: depends on frontend tasks 0ffb9561, 4f25d00a, 4f808cf6, f69566da and backend task temp_backend_chat_api.
Integrate Profile Frontend Backend
As a Tech Lead, verify the end-to-end integration between the Profile page frontend implementation (ProfileHeader, ProfileCustomization, ProfilePreferences, ProfileSaveActions) and the Profile backend API. Ensure: ProfileCustomization loads saved outfit/hair/accessories/color choices from GET /api/profile and correctly persists changes via PUT /api/profile on save; ProfilePreferences loads and saves tone/speed/style/permission settings via /api/profile/preferences; ProfileSaveActions SAVE button triggers the API call and transitions save state correctly; ProfileHeader avatar reflects the active customization. Validate the full user flow: Customize Zoey -> Save Preferences. Note: depends on frontend tasks 2e33f66d, 4c4ba68e, 5d8e8bf7, a4a46670 and backend task temp_profile_api.
Integrate Landing Page Navigation
As a Tech Lead, verify the end-to-end integration of the Landing page with the rest of the application. Ensure: (1) 3D stage scene loads correctly and all dynamic lighting and animation interactions work; (2) navigation from Landing to Chat page works (CTA button or nav link); (3) navigation from Landing to Profile page works; (4) the Zoey brand theme (hot pink, gold, lime green palette) is consistently applied from the design system; (5) scroll-triggered reveals and spring physics animations render without jank on desktop and mobile; (6) no 3D asset loading errors or console warnings. Note: depends on frontend task de57d8fa (Landing 3D Stage) and 8fed0d0c (Design System Theme).
Integrate AI Service Chat API
As a Tech Lead, verify end-to-end integration between the ZoeyAI LiteLLM service (e92f22a9) and the Chat API endpoints (b7f3d184). Ensure: (1) POST /api/chat/message correctly invokes ZoeyAI.generate_response with the full conversation history and user preferences; (2) streaming tokens are forwarded correctly via Server-Sent Events or chunked response to the frontend; (3) Zoey's K-pop demon hunter persona prompt is applied consistently; (4) user preference settings (tone, speed, style, permission from ProfilePreferences) are loaded from the database and injected into the AI context; (5) retry and fallback logic activates correctly under simulated LLM timeout. Note: depends on backend tasks b7f3d184, e92f22a9, and 5547ae87.
Wire Database to Backend APIs
As a backend developer, ensure the database models and Alembic migrations (5547ae87) are correctly wired to all backend API endpoint handlers. Specifically: (1) Chat API endpoints (b7f3d184) use async SQLAlchemy sessions to persist and retrieve conversations and messages from the conversations and messages tables; (2) Profile API endpoints (11d15b80) read/write user_profiles and user_preferences tables; (3) ZoeyAI service (e92f22a9) retrieves user preferences from the database per request. Add dependency injection for DB session into all routers. Run and verify Alembic migrations apply cleanly against a fresh MySQL/MariaDB Docker container. Note: This task bridges the database layer to the API layer and should be completed after migrations are confirmed working.
No comments yet. Be the first!