Reports

Description

Issue Description When starting a generation task in Fashion Photoshoot (Apparel Studio) and then navigating to another studio (e.g., Product Studio or Video Studio): The UI in the new studio shows the previous generation task state (progress card, retry message, animated loader). It incorrectly displays: “100% complete” “Error generating image 1, retrying…” The task appears stuck or inconsistent. After ~5 minutes, the image finally generates and the UI returns to normal. This indicates: Generation state is global and not studio-scoped. The task continues correctly in the backend. The frontend progress state becomes desynchronized when switching routes. Completion polling or subscription resumes only after delay or background refresh. This is a cross-studio state leakage + polling lifecycle issue. Expected Behavior When switching studios during an active generation: The original studio: Should continue tracking the job. Should resume correctly when returning. The new studio: Should NOT display unrelated generation state. Should start in a clean idle state unless it has its own active task. Generation tracking should: Continue in background. Update when completed. Not show conflicting states like: 100% complete + retrying Completed toast + still generating UI should reflect accurate backend status immediately when revisiting the originating studio. Root Cause (Highly Likely) Generation state is stored globally (Redux/Zustand/context) without studio scoping. Progress UI component is shared across studios. Polling is: Either paused on route change Or tied to mounted component lifecycle Completion event only updates UI when polling resumes or next interval triggers. So when you navigate away: Polling stops State remains in inconsistent intermediate phase Later, background update corrects it Implementation Recommendations 1) Scope generation state by studio (Critical) Instead of: generationState Use: generationState = { apparel: { ... }, product: { ... }, video: { ... } } Each studio listens only to its own key. 2) Persist job tracking independent of page lifecycle Move generation tracking to a central job manager: Maintain active jobs list: activeJobs = [ { id, studioType, status, progress } ] Polling runs globally (not inside component useEffect of a page). When switching studios: UI subscribes to jobs where studioType === currentStudio. This prevents task freezing when navigating. 3) Fix contradictory UI states This is a state machine problem. You likely have: status = loading progress = 100 error = retrying Add strict transitions: queued → running → retrying → running → completed Never allow: progress === 100 AND status === running completed AND error !== null Add a guard: if (status === "completed") { error = null; progress = 100; } 4) On route change, refresh job state from backend When entering a studio page: Fetch current active job for that studio. Sync frontend state with backend. If no job → reset UI to idle. This avoids stale memory state. 5) Optional: Show cross-studio task indicator If generation is global (shared credits pool), better UX: Show a small floating global task indicator: “1 generation running in Apparel Studio” Clicking it returns to the correct studio. Acceptance Criteria Start generation in Apparel. Switch to Product. No Apparel progress UI appears. Return to Apparel: Progress resumes correctly. If generation finishes while on another studio: Completion state appears immediately upon return. No contradictory “100% complete” + “retrying” messages. Summary This is a generation lifecycle management issue, not a rendering bug. It requires: Studio-scoped state Global background polling Strict state machine transitions Route-based sync on mount