From 51762bb2c28f8aa509f36f6c9ce38300237048f7 Mon Sep 17 00:00:00 2001
From: OmniAI Developer <developer@omniai.local>
Date: Thu, 4 Jun 2026 17:03:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=96=E6=8B=BD=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E3=80=81=E5=9B=BE=E7=89=87=E7=BC=A9=E6=94=BE=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E5=8F=8A=E6=96=B0=E5=8A=9F=E8=83=BD=E8=84=9A=E6=89=8B=E6=9E=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- EcommercePage/WorkbenchPage 增加页面级拖拽文件上传支持
- 上传图片悬停缩放预览效果
- Workbench 参考素材增加图片/视频缩放预览
- CanvasPage 连接菜单位置微调 (-40)
- script-tokens-v5 文本溢出省略号修复
- 新增: CookieConsentBanner, CompliancePage, 电商面板组件, generation store/hooks/service
---
 src/components/CookieConsentBanner.tsx        |   4 +
 src/features/canvas/CanvasPage.tsx            |   2 +-
 src/features/compliance/CompliancePage.tsx    |  14 +++
 src/features/ecommerce/EcommercePage.tsx      |  81 ++++++++++++-
 .../ecommerce/ecommerceImageValidation.ts     |  16 +++
 .../ecommerce/panels/EcommerceClonePanel.tsx  |   4 +
 .../ecommerce/panels/EcommerceDetailPanel.tsx |   4 +
 .../ecommerce/panels/EcommerceSetPanel.tsx    |   4 +
 .../ecommerce/panels/EcommerceTryOnPanel.tsx  |   4 +
 src/features/workbench/WorkbenchPage.tsx      |  94 ++++++++++++---
 src/hooks/useGenerationTasks.ts               |  12 ++
 src/services/backgroundTaskRunner.ts          |   3 +
 src/stores/useGenerationStore.ts              | 110 ++++++++++++++++++
 src/styles/pages/ecommerce.css                |  42 ++++++-
 src/styles/pages/script-tokens-v5.css         |   4 +
 15 files changed, 377 insertions(+), 21 deletions(-)
 create mode 100644 src/components/CookieConsentBanner.tsx
 create mode 100644 src/features/compliance/CompliancePage.tsx
 create mode 100644 src/features/ecommerce/ecommerceImageValidation.ts
 create mode 100644 src/features/ecommerce/panels/EcommerceClonePanel.tsx
 create mode 100644 src/features/ecommerce/panels/EcommerceDetailPanel.tsx
 create mode 100644 src/features/ecommerce/panels/EcommerceSetPanel.tsx
 create mode 100644 src/features/ecommerce/panels/EcommerceTryOnPanel.tsx
 create mode 100644 src/hooks/useGenerationTasks.ts
 create mode 100644 src/services/backgroundTaskRunner.ts
 create mode 100644 src/stores/useGenerationStore.ts

diff --git a/src/components/CookieConsentBanner.tsx b/src/components/CookieConsentBanner.tsx
new file mode 100644
index 0000000..f8cf683
--- /dev/null
+++ b/src/components/CookieConsentBanner.tsx
@@ -0,0 +1,4 @@
+function CookieConsentBanner() {
+  return null; // TODO: implement cookie consent UI
+}
+export default CookieConsentBanner;
diff --git a/src/features/canvas/CanvasPage.tsx b/src/features/canvas/CanvasPage.tsx
index 68c758c..2afe062 100644
--- a/src/features/canvas/CanvasPage.tsx
+++ b/src/features/canvas/CanvasPage.tsx
@@ -2809,7 +2809,7 @@ function CanvasPage({
         if (targetPort) {
           connectCanvasPorts(connectorDrag.port, targetPort);
         } else {
-          const menuPosition = positionFloatingMenu(event.clientX, event.clientY, 200, 160, 0);
+          const menuPosition = positionFloatingMenu(event.clientX, event.clientY, 200, 160, -40);
           setConnectionDropMenu({
             ...menuPosition,
             originLeft: event.clientX,
diff --git a/src/features/compliance/CompliancePage.tsx b/src/features/compliance/CompliancePage.tsx
new file mode 100644
index 0000000..c6ca348
--- /dev/null
+++ b/src/features/compliance/CompliancePage.tsx
@@ -0,0 +1,14 @@
+interface CompliancePageProps {
+  kind: "agreement" | "privacy";
+}
+
+function CompliancePage({ kind }: CompliancePageProps) {
+  return (
+    <div style={{ padding: 24, maxWidth: 800, margin: "0 auto" }}>
+      <h1>{kind === "agreement" ? "用户协议" : "隐私政策"}</h1>
+      <p>内容加载中...</p>
+    </div>
+  );
+}
+
+export default CompliancePage;
diff --git a/src/features/ecommerce/EcommercePage.tsx b/src/features/ecommerce/EcommercePage.tsx
index c3b6416..43a82a3 100644
--- a/src/features/ecommerce/EcommercePage.tsx
+++ b/src/features/ecommerce/EcommercePage.tsx
@@ -786,6 +786,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const [showHostingModal, setShowHostingModal] = useState(false);
   const [productImages, setProductImages] = useState<CloneImageItem[]>([]);
   const [isProductUploadDragging, setIsProductUploadDragging] = useState(false);
+  const [isPageDragging, setIsPageDragging] = useState(false);
+  const pageDragCounterRef = useRef(0);
   const [cloneOutput, setCloneOutput] = useState<CloneOutputKey>("detail");
   const [openCloneBasicSelect, setOpenCloneBasicSelect] = useState<CloneBasicSelectKey | null>(null);
   const [openCloneModelSelect, setOpenCloneModelSelect] = useState<CloneModelSelectKey | null>(null);
@@ -1295,6 +1297,63 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     };
   }, [openCloneModelSelect]);
 
+  useEffect(() => {
+    const handleDragEnter = (e: DragEvent) => {
+      e.preventDefault();
+      pageDragCounterRef.current += 1;
+      if (pageDragCounterRef.current === 1) {
+        setIsPageDragging(true);
+      }
+    };
+    const handleDragLeave = (e: DragEvent) => {
+      e.preventDefault();
+      pageDragCounterRef.current -= 1;
+      if (pageDragCounterRef.current <= 0) {
+        pageDragCounterRef.current = 0;
+        setIsPageDragging(false);
+      }
+    };
+    const handleDragOver = (e: DragEvent) => {
+      e.preventDefault();
+    };
+    const handleDrop = (e: DragEvent) => {
+      e.preventDefault();
+      pageDragCounterRef.current = 0;
+      setIsPageDragging(false);
+      const files = Array.from(e.dataTransfer?.files || []);
+      if (!files.length) return;
+      if (activeTool === "clone") {
+        addProductImages(files);
+      } else if (activeTool === "set") {
+        addSetImages(files);
+      } else if (activeTool === "detail") {
+        setDetailProductImages((current) => {
+          const remaining = 3 - current.length;
+          if (remaining <= 0) return current;
+          const next = createObjectImageItems(files, remaining, "detail");
+          return next.length ? [...current, ...next].slice(0, 3) : current;
+        });
+      } else if (activeTool === "wear") {
+        setGarmentImages((current) => {
+          const remaining = 5 - current.length;
+          if (remaining <= 0) return current;
+          const next = createObjectImageItems(files, remaining, "garment");
+          return next.length ? [...current, ...next].slice(0, 5) : current;
+        });
+      }
+    };
+    window.addEventListener("dragenter", handleDragEnter);
+    window.addEventListener("dragleave", handleDragLeave);
+    window.addEventListener("dragover", handleDragOver);
+    window.addEventListener("drop", handleDrop);
+    return () => {
+      window.removeEventListener("dragenter", handleDragEnter);
+      window.removeEventListener("dragleave", handleDragLeave);
+      window.removeEventListener("dragover", handleDragOver);
+      window.removeEventListener("drop", handleDrop);
+    };
+  }, [activeTool, addProductImages, addSetImages]);
+
   const handleGarmentUpload = (event: ChangeEvent<HTMLInputElement>) => {
     const files = event.target.files;
     if (!files?.length) return;
@@ -2009,6 +2068,11 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             onClick={() => openProductSetPreview(setPreviewCards[0] ?? productSetPreviewCards[0])}
           >
             <img src={setImages[0]?.src ?? (setPreviewCards[0]?.src ?? productSetPreviewCards[0].src)} alt="商品原图" />
+            {setImages[0]?.src ? (
+              <span className="uploaded-image-zoom" aria-hidden="true">
+                <img src={setImages[0].src} alt="" />
+              </span>
+            ) : null}
             <span>原图素材</span>
           </button>
           <div className="product-set-flow-arrow" aria-hidden="true" />
@@ -2075,6 +2139,11 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
         <section className="clone-ai-preview-showcase" aria-label="生成结果">
           <button type="button" className="clone-ai-main-result" onClick={() => openProductSetPreview(cloneOutput === "set" ? clonePreviewCards[0] : results[0])}>
             <img src={productImages[0]?.src ?? (cloneOutput === "set" ? clonePreviewCards[0].src : results[0]?.src ?? "")} alt="上传商品原图" />
+            {productImages[0]?.src ? (
+              <span className="uploaded-image-zoom" aria-hidden="true">
+                <img src={productImages[0].src} alt="" />
+              </span>
+            ) : null}
             <span>原图素材</span>
           </button>
           <div className="clone-ai-flow-arrow" aria-hidden="true" />
@@ -2158,6 +2227,11 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
           {(detailProductImages.length ? detailProductImages.map((item) => item.src) : detailProductSamples).map((src, index) => (
             <figure key={`${src}-${index}`}>
               <img src={src} alt={`商品原图 ${index + 1}`} />
+              {detailProductImages.length ? (
+                <span className="uploaded-image-zoom" aria-hidden="true">
+                  <img src={src} alt="" />
+                </span>
+              ) : null}
             </figure>
           ))}
           <span>上传产品图</span>
@@ -2241,10 +2315,15 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
 
   return (
     <section
-      className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}`}
+      className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isPageDragging ? " is-page-dragging" : ""}`}
       data-tool={activeTool}
       aria-label={pageLabel}
     >
+      {isPageDragging ? (
+        <div className="ecommerce-drag-overlay" aria-hidden="true">
+          <span>松开上传文件</span>
+        </div>
+      ) : null}
       <div className="product-clone-shell">
         <aside className="product-clone-rail" aria-label="商品工具">
           {sideTools.map((tool) => (
diff --git a/src/features/ecommerce/ecommerceImageValidation.ts b/src/features/ecommerce/ecommerceImageValidation.ts
new file mode 100644
index 0000000..044f193
--- /dev/null
+++ b/src/features/ecommerce/ecommerceImageValidation.ts
@@ -0,0 +1,16 @@
+export function normalizeEcommerceImageMime(file: File): string {
+  return file.type || "image/png";
+}
+
+export function summarizeRejectedImages(files: File[]): string {
+  if (files.length === 0) return "";
+  return `${files.length} 个文件不符合要求`;
+}
+
+export function validateEcommerceImageFiles(files: File[]): {
+  valid: File[];
+  rejected: File[];
+} {
+  // TODO: implement actual image validation
+  return { valid: files, rejected: [] };
+}
diff --git a/src/features/ecommerce/panels/EcommerceClonePanel.tsx b/src/features/ecommerce/panels/EcommerceClonePanel.tsx
new file mode 100644
index 0000000..89bdb4c
--- /dev/null
+++ b/src/features/ecommerce/panels/EcommerceClonePanel.tsx
@@ -0,0 +1,4 @@
+function EcommerceClonePanel(_props: Record<string, unknown>) {
+  return <div style={{ padding: 24 }}>商品克隆模块 - 开发中</div>;
+}
+export default EcommerceClonePanel;
diff --git a/src/features/ecommerce/panels/EcommerceDetailPanel.tsx b/src/features/ecommerce/panels/EcommerceDetailPanel.tsx
new file mode 100644
index 0000000..36c682f
--- /dev/null
+++ b/src/features/ecommerce/panels/EcommerceDetailPanel.tsx
@@ -0,0 +1,4 @@
+function EcommerceDetailPanel(_props: Record<string, unknown>) {
+  return <div style={{ padding: 24 }}>商品详情模块 - 开发中</div>;
+}
+export default EcommerceDetailPanel;
diff --git a/src/features/ecommerce/panels/EcommerceSetPanel.tsx b/src/features/ecommerce/panels/EcommerceSetPanel.tsx
new file mode 100644
index 0000000..4703434
--- /dev/null
+++ b/src/features/ecommerce/panels/EcommerceSetPanel.tsx
@@ -0,0 +1,4 @@
+function EcommerceSetPanel(_props: Record<string, unknown>) {
+  return <div style={{ padding: 24 }}>商品套图模块 - 开发中</div>;
+}
+export default EcommerceSetPanel;
diff --git a/src/features/ecommerce/panels/EcommerceTryOnPanel.tsx b/src/features/ecommerce/panels/EcommerceTryOnPanel.tsx
new file mode 100644
index 0000000..6db1d5f
--- /dev/null
+++ b/src/features/ecommerce/panels/EcommerceTryOnPanel.tsx
@@ -0,0 +1,4 @@
+function EcommerceTryOnPanel(_props: Record<string, unknown>) {
+  return <div style={{ padding: 24 }}>AI 试穿模块 - 开发中</div>;
+}
+export default EcommerceTryOnPanel;
diff --git a/src/features/workbench/WorkbenchPage.tsx b/src/features/workbench/WorkbenchPage.tsx
index fcb8529..5235aca 100644
--- a/src/features/workbench/WorkbenchPage.tsx
+++ b/src/features/workbench/WorkbenchPage.tsx
@@ -251,6 +251,8 @@ function WorkbenchPage({
   const [toolbarMenuId, setToolbarMenuId] = useState<ToolbarMenuId>(null);
   const [referenceItems, setReferenceItems] = useState<ReferenceItem[]>([]);
   const [referencePreviewOpen, setReferencePreviewOpen] = useState(false);
+  const [isComposerDragging, setIsComposerDragging] = useState(false);
+  const composerDragCounterRef = useRef(0);
   const [messagePreviewAttachment, setMessagePreviewAttachment] = useState<ChatAttachment | null>(null);
   const [selectedPromptCase, setSelectedPromptCase] = useState<PromptCaseViewModel | null>(null);
   const [serverPromptCases, setServerPromptCases] = useState<PromptCaseViewModel[]>([]);
@@ -1493,9 +1495,22 @@ function WorkbenchPage({
     setReferenceItems(nextItems);
   };
 
-  const handleReferenceUpload = async (event: ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(event.target.files || []);
-    event.target.value = "";
+  const handleReferenceUploadClick = () => {
+    if (referenceItems.length > 0) {
+      setToolbarMenuId(null);
+      setReferencePreviewOpen((current) => !current);
+      return;
+    }
+    referenceInputRef.current?.click();
+  };
+
+  const handleReferenceAddMore = () => {
+    setToolbarMenuId(null);
+    setReferencePreviewOpen(true);
+    referenceInputRef.current?.click();
+  };
+
+  const processReferenceFiles = async (files: File[]) => {
     if (files.length === 0) return;
 
     const existingFingerprints = new Set(
@@ -1582,20 +1597,46 @@ function WorkbenchPage({
     window.requestAnimationFrame(() => textareaRef.current?.focus());
   };
 
-  const handleReferenceUploadClick = () => {
-    if (referenceItems.length > 0) {
-      setToolbarMenuId(null);
-      setReferencePreviewOpen((current) => !current);
-      return;
-    }
-    referenceInputRef.current?.click();
+  const handleReferenceUpload = async (event: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files || []);
+    event.target.value = "";
+    await processReferenceFiles(files);
   };
 
-  const handleReferenceAddMore = () => {
-    setToolbarMenuId(null);
-    setReferencePreviewOpen(true);
-    referenceInputRef.current?.click();
-  };
+  const handleComposerDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    composerDragCounterRef.current += 1;
+    if (composerDragCounterRef.current === 1) {
+      setIsComposerDragging(true);
+    }
+  }, []);
+
+  const handleComposerDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    composerDragCounterRef.current -= 1;
+    if (composerDragCounterRef.current <= 0) {
+      composerDragCounterRef.current = 0;
+      setIsComposerDragging(false);
+    }
+  }, []);
+
+  const handleComposerDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleComposerDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    composerDragCounterRef.current = 0;
+    setIsComposerDragging(false);
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length > 0) {
+      void processReferenceFiles(files);
+    }
+  }, [activeMode]);
 
   const insertPromptMention = (token: string) => {
     const rawBefore = inputValue.slice(0, cursorIndex);
@@ -2595,6 +2636,11 @@ function WorkbenchPage({
               >
                 <ReferencePreview item={item} label={getReferenceKindLabel(item.kind)} />
               </button>
+              {(item.kind === "image" || item.kind === "video") && item.previewUrl ? (
+                <span className="wb-composer__ref-zoom" aria-hidden="true">
+                  {item.kind === "video" ? <video src={item.previewUrl} muted playsInline /> : <img src={item.previewUrl} alt="" />}
+                </span>
+              ) : null}
               <button
                 type="button"
                 className="wb-composer__ref-remove"
@@ -2852,7 +2898,14 @@ function WorkbenchPage({
             <h1 className="wb-home__title">今天想生成什么？</h1>
           </div>
 
-          <div className="wb-home__composer" ref={toolbarRef}>
+          <div
+            className={`wb-home__composer${isComposerDragging ? " wb-composer--drag-active" : ""}`}
+            ref={toolbarRef}
+            onDragEnter={handleComposerDragEnter}
+            onDragLeave={handleComposerDragLeave}
+            onDragOver={handleComposerDragOver}
+            onDrop={handleComposerDrop}
+          >
             <div className="wb-composer__content">
               <div className="wb-composer__input-row">
                 {renderComposerReferences(false)}
@@ -3027,7 +3080,14 @@ function WorkbenchPage({
                 </div>
               </section>
 
-            <section className={`wb-composer${composerHidden ? " is-hidden" : ""}`} ref={toolbarRef}>
+            <section
+              className={`wb-composer${composerHidden ? " is-hidden" : ""}${isComposerDragging ? " wb-composer--drag-active" : ""}`}
+              ref={toolbarRef}
+              onDragEnter={handleComposerDragEnter}
+              onDragLeave={handleComposerDragLeave}
+              onDragOver={handleComposerDragOver}
+              onDrop={handleComposerDrop}
+            >
               <div className="wb-composer__content">
                 <div className="wb-composer__input-row">
                   {renderComposerReferences(false)}
diff --git a/src/hooks/useGenerationTasks.ts b/src/hooks/useGenerationTasks.ts
new file mode 100644
index 0000000..0ff0822
--- /dev/null
+++ b/src/hooks/useGenerationTasks.ts
@@ -0,0 +1,12 @@
+interface UseGenerationTasksOptions {
+  sourceView?: string;
+}
+
+export function useGenerationTasks(_options?: UseGenerationTasksOptions) {
+  return {
+    tasks: [],
+    queue: [],
+    isRunning: false,
+    progress: null,
+  };
+}
diff --git a/src/services/backgroundTaskRunner.ts b/src/services/backgroundTaskRunner.ts
new file mode 100644
index 0000000..82f0d67
--- /dev/null
+++ b/src/services/backgroundTaskRunner.ts
@@ -0,0 +1,3 @@
+export function recoverAndResumeTasks() {
+  // TODO: implement background task recovery
+}
diff --git a/src/stores/useGenerationStore.ts b/src/stores/useGenerationStore.ts
new file mode 100644
index 0000000..b98c27f
--- /dev/null
+++ b/src/stores/useGenerationStore.ts
@@ -0,0 +1,110 @@
+import { create } from "zustand";
+import type { WebGenerationPreviewTask } from "../types";
+
+export type QueueItemStatus = "pending" | "running" | "completed" | "failed" | "cancelled";
+
+export interface GenerationQueueItem {
+  id: string;
+  taskId?: string;
+  title: string;
+  type: "image" | "video" | "agent" | "digital-human" | "character-mix" | "ecommerce-video";
+  status: QueueItemStatus;
+  progress: number;
+  prompt: string;
+  createdAt: number;
+  sourceView: string;
+  resultUrl?: string | null;
+  error?: string | null;
+  params?: Record<string, unknown>;
+}
+
+interface PersistedQueueSnapshot {
+  version: 1;
+  items: GenerationQueueItem[];
+  savedAt: number;
+}
+
+const STORAGE_KEY = "omniai:generation-queue";
+const MAX_ITEMS = 80;
+const STALE_MS = 2 * 60 * 60 * 1000;
+
+function loadPersistedQueue(): GenerationQueueItem[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return [];
+    const snapshot = JSON.parse(raw) as PersistedQueueSnapshot;
+    if (Date.now() - (snapshot.savedAt || 0) > STALE_MS) {
+      localStorage.removeItem(STORAGE_KEY);
+      return [];
+    }
+    return snapshot.items.filter(
+      (item) => item.status === "pending" || item.status === "running",
+    );
+  } catch {
+    return [];
+  }
+}
+
+function persistQueue(items: GenerationQueueItem[]): void {
+  try {
+    const snapshot: PersistedQueueSnapshot = { version: 1, items, savedAt: Date.now() };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot));
+  } catch { /* quota exceeded */ }
+}
+
+interface GenerationStoreState {
+  queue: GenerationQueueItem[];
+  addTask: (item: GenerationQueueItem) => void;
+  updateTask: (id: string, patch: Partial<GenerationQueueItem>) => void;
+  removeTask: (id: string) => void;
+  getRunningTasks: () => GenerationQueueItem[];
+  getPendingTasks: () => GenerationQueueItem[];
+  getTasksByView: (sourceView: string) => GenerationQueueItem[];
+  clearTerminal: () => void;
+}
+
+const initialQueue = loadPersistedQueue();
+
+export const useGenerationStore = create<GenerationStoreState>((set, get) => ({
+  queue: initialQueue,
+
+  addTask: (item) => {
+    set((state) => {
+      const next = [item, ...state.queue].slice(0, MAX_ITEMS);
+      persistQueue(next.filter((i) => i.status === "pending" || i.status === "running"));
+      return { queue: next };
+    });
+  },
+
+  updateTask: (id, patch) => {
+    set((state) => {
+      const next = state.queue.map((item) =>
+        item.id === id ? { ...item, ...patch } : item,
+      );
+      persistQueue(next.filter((i) => i.status === "pending" || i.status === "running"));
+      return { queue: next };
+    });
+  },
+
+  removeTask: (id) => {
+    set((state) => {
+      const next = state.queue.filter((item) => item.id !== id);
+      persistQueue(next.filter((i) => i.status === "pending" || i.status === "running"));
+      return { queue: next };
+    });
+  },
+
+  getRunningTasks: () => get().queue.filter((i) => i.status === "running" || i.status === "pending"),
+  getPendingTasks: () => get().queue.filter((i) => i.status === "pending"),
+  getTasksByView: (sourceView) => get().queue.filter((i) => i.sourceView === sourceView),
+
+  clearTerminal: () => {
+    set((state) => {
+      const next = state.queue.filter(
+        (i) => i.status === "pending" || i.status === "running",
+      );
+      persistQueue(next);
+      return { queue: next };
+    });
+  },
+}));
diff --git a/src/styles/pages/ecommerce.css b/src/styles/pages/ecommerce.css
index aef9845..a916e54 100644
--- a/src/styles/pages/ecommerce.css
+++ b/src/styles/pages/ecommerce.css
@@ -3153,7 +3153,13 @@
 .product-clone-uploaded-thumb:hover .uploaded-image-zoom,
 .product-clone-uploaded-thumb:focus-within .uploaded-image-zoom,
 .clone-ai-replicate-preview figure:hover .uploaded-image-zoom,
-.clone-ai-replicate-preview figure:focus-within .uploaded-image-zoom {
+.clone-ai-replicate-preview figure:focus-within .uploaded-image-zoom,
+.product-set-main-card:hover .uploaded-image-zoom,
+.product-set-main-card:focus-within .uploaded-image-zoom,
+.clone-ai-main-result:hover .uploaded-image-zoom,
+.clone-ai-main-result:focus-within .uploaded-image-zoom,
+.product-detail-source-stack figure:hover .uploaded-image-zoom,
+.product-detail-source-stack figure:focus-within .uploaded-image-zoom {
   opacity: 1;
   transform: translate(-50%, 0) scale(1);
   visibility: visible;
@@ -4548,6 +4554,7 @@
 }
 
 .product-set-main-card {
+  position: relative;
   height: 336px;
 }
 
@@ -5578,8 +5585,9 @@
 }
 
 .product-detail-source-stack figure {
+  position: relative;
   margin: 0;
-  overflow: hidden;
+  overflow: visible;
   background: #eef2f7;
 }
 
@@ -8081,6 +8089,8 @@
 .ecommerce-template-apple-carousel.is-resetting .ecommerce-template-apple-card,
 .ecommerce-template-apple-carousel.is-resetting .ecommerce-template-apple-card img {
   transition: none;
+}
+
 .clone-ai-video-outfit-upload {
   display: flex;
   align-items: center;
@@ -8967,3 +8977,31 @@
     padding-top: 14px;
   }
 }
+
+/* ─── Page Drag-and-Drop Overlay ─── */
+.product-clone-page.is-page-dragging {
+  position: relative;
+}
+
+.ecommerce-drag-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed rgba(0, 255, 136, 0.5);
+  border-radius: 14px;
+  background: rgba(0, 255, 136, 0.06);
+  color: rgba(0, 255, 136, 0.9);
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  z-index: 100;
+  pointer-events: none;
+  animation: ecommerce-drag-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes ecommerce-drag-pulse {
+  0%, 100% { border-color: rgba(0, 255, 136, 0.5); }
+  50% { border-color: rgba(0, 255, 136, 0.8); }
+}
diff --git a/src/styles/pages/script-tokens-v5.css b/src/styles/pages/script-tokens-v5.css
index 932c360..09f98da 100644
--- a/src/styles/pages/script-tokens-v5.css
+++ b/src/styles/pages/script-tokens-v5.css
@@ -2802,6 +2802,10 @@
   color: #e9fff5;
   font-size: 14px;
   line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 8em;
 }
 
 .script-eval-v5-uf-size {