fix(ecommerce): video 400 error — use OSS URLs instead of data URLs for video generation

The renderScene function was passing local data URLs (data:image/png;base64,...)
as imageUrl and referenceUrls to createVideoTask, which the /api/ai/video endpoint
rejects with 400 Bad Request. The planning phase already uploads images to OSS
but the resulting URLs were not returned to the component.

- Add imageUrls field to EcommerceVideoPlanResult
- Return OSS imageUrls from runVideoPlan alongside existing plan data
- Use planResult.imageUrls[0] in handleRender instead of productImageDataUrls[0]
- Use planResult?.imageUrls[0] for sourceImage display fallback

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/App.tsx

@@ -362,7 +362,7 @@ function App() {
   }, [clearSessionState, setProjects, setProjectsLoaded, setUsage, clearTasks, setRuntimeNotifications, setServerNotifications, setCanvasWorkflow, setCurrentCanvasProjectId, setWorkspaceExpanded, handleSetView]);
 
   const showSessionReplacedModal = useCallback((message?: string) => {
-    clearAuthenticatedState();
+    clearAuthenticatedState({ resetView: true });
     showSessionReplaced(message);
   }, [clearAuthenticatedState, showSessionReplaced]);
 

src/components/PageTransition.tsx

@@ -6,6 +6,7 @@ interface PageTransitionProps {
 }
 
 const EXIT_DURATION_MS = 180;
+const ENTER_DURATION_MS = 220;
 
 const NAV_ORDER: string[] = [
   "home",
@@ -39,8 +40,8 @@ function getNavIndex(key: string): number {
 
 export default function PageTransition({ viewKey, children }: PageTransitionProps) {
   const [displayedChildren, setDisplayedChildren] = useState(children);
-  const [phase, setPhase] = useState<"idle" | "exit">("idle");
-  const [direction, setDirection] = useState<"forward" | "backward" | "neutral">("neutral");
+  const [phase, setPhase] = useState<"idle" | "exit" | "enter">("idle");
+  const [exitDirection, setExitDirection] = useState<"forward" | "backward" | "neutral">("neutral");
   const prevKeyRef = useRef(viewKey);
   const timerRef = useRef<ReturnType<typeof setTimeout>>();
 
@@ -49,28 +50,61 @@ export default function PageTransition({ viewKey, children }: PageTransitionProp
       setDisplayedChildren(children);
       return;
     }
+
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReducedMotion) {
+      prevKeyRef.current = viewKey;
+      setDisplayedChildren(children);
+      setPhase("idle");
+      return;
+    }
+
     const prevIndex = getNavIndex(prevKeyRef.current);
     const nextIndex = getNavIndex(viewKey);
     if (prevIndex < nextIndex) {
-      setDirection("forward");
+      setExitDirection("forward");
     } else if (prevIndex > nextIndex) {
-      setDirection("backward");
+      setExitDirection("backward");
     } else {
-      setDirection("neutral");
+      setExitDirection("neutral");
     }
     prevKeyRef.current = viewKey;
+
     setPhase("exit");
     timerRef.current = setTimeout(() => {
       setDisplayedChildren(children);
-      setPhase("idle");
+      setPhase("enter");
     }, EXIT_DURATION_MS);
     return () => clearTimeout(timerRef.current);
   }, [viewKey, children]);
 
-  const dirClass = direction === "forward" ? " is-forward" : direction === "backward" ? " is-backward" : "";
+  // After enter animation completes, go back to idle
+  useEffect(() => {
+    if (phase !== "enter") return;
+    const timer = setTimeout(() => setPhase("idle"), ENTER_DURATION_MS);
+    return () => clearTimeout(timer);
+  }, [phase]);
 
+  const dirClass = exitDirection === "forward" ? " is-forward" : exitDirection === "backward" ? " is-backward" : "";
+
+  if (phase === "exit") {
     return (
-    <div className={phase === "exit" ? `page-transition-wrap page-motion--exit${dirClass}` : `page-transition-wrap${phase === "idle" && direction !== "neutral" ? ` page-motion--enter${dirClass}` : ""}`}>
+      <div className={`page-transition-wrap page-motion--exit${dirClass}`}>
+        {displayedChildren}
+      </div>
+    );
+  }
+
+  if (phase === "enter") {
+    return (
+      <div className="page-transition-wrap page-motion--enter">
+        {displayedChildren}
+      </div>
+    );
+  }
+
+  return (
+    <div className="page-transition-wrap">
       {displayedChildren}
     </div>
   );

src/features/ecommerce/EcommerceVideoWorkspace.tsx

@@ -170,7 +170,7 @@ export default function EcommerceVideoWorkspace({
 
   const handleRender = async () => {
     if (!planResult || !scenes.length) return;
-    const imageUrl = productImageDataUrls[0] || "";
+    const imageUrl = planResult.imageUrls[0] || "";
     setStage("rendering");
     setError(null);
     renderAbortRef.current = { current: false };
@@ -213,7 +213,7 @@ export default function EcommerceVideoWorkspace({
   const completedScenes = scenes.filter((s) => s.status === "completed" && s.resultUrl);
   const primaryVideo = completedScenes[0]?.resultUrl;
   const canRender = planResult?.compliance.allow_video_generation && stage === "planned";
-  const sourceImage = productImageDataUrls[0] || "";
+  const sourceImage = planResult?.imageUrls[0] || productImageDataUrls[0] || "";
   const flowHasStarted = stage !== "idle" || completedSteps.length > 0 || scenes.length > 0;
   const flowMeta = `${platform} / ${aspectRatio} / ${durationSeconds}s / ${resolution}`;
   const planActionLabel = stage === "planning"

src/features/ecommerce/ecommerceVideoService.ts

@@ -77,7 +77,7 @@ export async function runVideoPlan(
   const compliance = await checkCompliance(summary, selling, storyboard, signal);
   onStepDone("compliance");
 
-  return { summary, selling, creatives, storyboard, videoPrompts, compliance };
+  return { imageUrls, summary, selling, creatives, storyboard, videoPrompts, compliance };
 }
 
 export interface RenderSceneInput {

src/features/ecommerce/ecommerceVideoTypes.ts

@@ -31,6 +31,7 @@ export interface EcommerceVideoSceneTask {
 }
 
 export interface EcommerceVideoPlanResult {
+  imageUrls: string[];
   summary: ProductSummary;
   selling: SellingPointResult;
   creatives: CreativeOption[];

src/styles/components/page-transition.css

@@ -16,43 +16,29 @@
   }
 }
 
-/* Directional page transitions */
-.page-motion--enter.is-forward {
-  animation: page-slide-in-forward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
-}
-
-.page-motion--enter.is-backward {
-  animation: page-slide-in-backward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+/* Exit: fade + directional slide */
+.page-motion--exit {
+  animation: page-out 180ms ease forwards;
+  pointer-events: none;
 }
 
 .page-motion--exit.is-forward {
-  animation: page-slide-out-forward 180ms ease both;
+  animation: page-slide-out-forward 180ms ease forwards;
+  pointer-events: none;
 }
 
 .page-motion--exit.is-backward {
-  animation: page-slide-out-backward 180ms ease both;
+  animation: page-slide-out-backward 180ms ease forwards;
+  pointer-events: none;
 }
 
-@keyframes page-slide-in-forward {
-  from {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+/* Cancel child's own entrance animation during exit */
+.page-motion--exit .page-motion {
+  animation: none !important;
 }
 
-@keyframes page-slide-in-backward {
-  from {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+@keyframes page-out {
+  to { opacity: 0; transform: translateY(-6px); }
 }
 
 @keyframes page-slide-out-forward {
@@ -68,3 +54,23 @@
     transform: translateX(16px);
   }
 }
+
+/* Enter: explicit wrapper entrance animation overrides child page-motion */
+.page-motion--enter {
+  animation: page-enter-fade 220ms ease both;
+}
+
+.page-motion--enter .page-motion {
+  animation: none !important;
+}
+
+@keyframes page-enter-fade {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/styles/components/primitives.css

@@ -65,18 +65,7 @@
   min-height: 0;
 }
 
-.page-motion--exit {
-  animation: page-out 180ms ease both;
-  pointer-events: none;
-}
-
-.page-motion--exit .page-motion {
-  animation: none;
-}
-
-@keyframes page-out {
-  to { opacity: 0; transform: translateY(-6px); }
-}
+/* page-motion--exit moved to page-transition.css */
 
 .page-loading-center {
   display: flex;