Merge pull request 'feat: add download/remove actions in product set preview and history detail compact composer' (#9) from feat/ecommerce-preview-actions-history-detail into main

Reviewed-on: #9

src/features/ecommerce/EcommercePage.tsx

@@ -4,6 +4,7 @@
   CloudUploadOutlined,
   CloseOutlined,
   DeleteOutlined,
+  DownloadOutlined,
   EditOutlined,
   FireOutlined,
   FileImageOutlined,
@@ -38,6 +39,7 @@ import EcommerceSetPanel from "./panels/EcommerceSetPanel";
 import EcommerceTryOnPanel from "./panels/EcommerceTryOnPanel";
 import EcommerceClonePanel from "./panels/EcommerceClonePanel";
 import { ecommerceOssScopes, saveUnifiedEcommerceGenerationRecord, deleteEcommerceGenerationRecord } from "./ecommerceGenerationPersistence";
+import { downloadResultAsset } from "../workbench/workbenchDownload";
 
 const smartCutoutColorPresets = [
   "#ffffff",
@@ -349,6 +351,14 @@ interface EcommerceHistoryRecord {
   replicateLevel: CloneReplicateLevelKey;
 }
 
+interface ProductSetPreviewSelection {
+  src: string;
+  label: string;
+  nodeId?: string;
+  cardId?: string;
+  removable?: boolean;
+}
+
 interface EcommerceImagePromptOptions {
   gender?: string;
   age?: string;
@@ -1372,7 +1382,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const [productSetStatus, setProductSetStatus] = useState<ProductSetStatus>("idle");
   const [productSetResultImages, setProductSetResultImages] = useState<string[]>([]);
   const [isSetUploadDragging, setIsSetUploadDragging] = useState(false);
-  const [selectedProductSetPreview, setSelectedProductSetPreview] = useState<{ src: string; label: string } | null>(null);
+  const [selectedProductSetPreview, setSelectedProductSetPreview] = useState<ProductSetPreviewSelection | null>(null);
   const [showHostingModal, setShowHostingModal] = useState(false);
   const [productImages, setProductImages] = useState<CloneImageItem[]>([]);
   const [activeQuickTool, setActiveQuickTool] = useState<"cutout" | "detail" | "watermark" | "image-edit" | null>(null);
@@ -3556,8 +3566,39 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     lastFailedActionRef.current = () => handleSetGenerate();
   };
 
-  const openProductSetPreview = (card: { src: string; label: string }) => {
-    setSelectedProductSetPreview(card);
+  const openProductSetPreview = (card: { id?: string; src: string; label: string }, options?: { nodeId?: string; removable?: boolean }) => {
+    setSelectedProductSetPreview({
+      src: card.src,
+      label: card.label,
+      cardId: card.id,
+      nodeId: options?.nodeId,
+      removable: Boolean(options?.removable && options.nodeId && card.id),
+    });
+  };
+
+  const handleDownloadCanvasResult = async (card: { src: string; label: string }) => {
+    try {
+      await downloadResultAsset(card.src, card.label || "generated-image", false);
+      toast.success("已开始下载图片");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "下载图片失败");
+    }
+  };
+
+  const removeCanvasResult = (nodeId: string, cardId: string) => {
+    setCanvasNodes((current) =>
+      current
+        .map((node) => (node.id === nodeId ? { ...node, results: node.results.filter((card) => card.id !== cardId) } : node))
+        .filter((node) => node.sourceImage || node.results.length > 0),
+    );
+    setResults((current) => current.filter((card) => card.id !== cardId));
+    toast.success("已从当前视图移除");
+  };
+
+  const removeSelectedProductSetPreview = (preview: ProductSetPreviewSelection) => {
+    if (!preview.nodeId || !preview.cardId) return;
+    removeCanvasResult(preview.nodeId, preview.cardId);
+    setSelectedProductSetPreview(null);
   };
 
   const handleDetailAiWrite = () => {
@@ -3829,24 +3870,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
 
     setPreviewOffset({ x: 0, y: 0 });
     previewOffsetRef.current = { x: 0, y: 0 };
-
-    requestAnimationFrame(() => requestAnimationFrame(() => {
-      const container = previewSurfaceRef.current;
-      if (!container) return;
-      const containerRect = container.getBoundingClientRect();
-      const node = container.querySelector(".clone-ai-canvas-node") as HTMLElement | null;
-      if (!node) return;
-      const nodeRect = node.getBoundingClientRect();
-      const nodeCenterY = nodeRect.top + nodeRect.height / 2 - containerRect.top;
-      const visibleCenterY = containerRect.height / 2;
-      const offsetY = visibleCenterY - nodeCenterY;
-      const nodeCenterX = nodeRect.left + nodeRect.width / 2 - containerRect.left;
-      const visibleCenterX = containerRect.width / 2;
-      const offsetX = visibleCenterX - nodeCenterX;
-      const finalOffset = { x: offsetX, y: offsetY };
-      setPreviewOffset(finalOffset);
-      previewOffsetRef.current = finalOffset;
-    }));
   };
 
   const handleNewEcommerceConversation = () => {
@@ -4670,7 +4693,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                   <div className="clone-ai-flow-arrow" aria-hidden="true" />
                   <div className="clone-ai-result-grid result-reveal">
                     {node.results.map((card) => (
-                      <button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card)}>
+                      <button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card, { nodeId: node.id, removable: true })}>
                         <img src={card.src} alt={card.label} />
                         <span>{card.label}</span>
                       </button>
@@ -5893,7 +5916,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
 
   return (
     <section
-      className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}`}
+      className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isCloneTool && activeHistoryRecordId ? " is-history-detail" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}`}
       data-tool={activeTool}
       aria-label={pageLabel}
     >
@@ -6017,7 +6040,31 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
               <CloseOutlined />
             </button>
             <img src={selectedProductSetPreview.src} alt={selectedProductSetPreview.label} />
-            <strong>{selectedProductSetPreview.label}</strong>
+            <div className="product-set-preview-footer">
+              <strong>{selectedProductSetPreview.label}</strong>
+              <div className="product-set-preview-actions" aria-label="图片操作">
+                <button
+                  type="button"
+                  className="product-set-preview-action"
+                  onClick={() => {
+                    void handleDownloadCanvasResult(selectedProductSetPreview);
+                  }}
+                >
+                  <DownloadOutlined />
+                  <span>下载</span>
+                </button>
+                {selectedProductSetPreview.removable ? (
+                  <button
+                    type="button"
+                    className="product-set-preview-action product-set-preview-action--danger"
+                    onClick={() => removeSelectedProductSetPreview(selectedProductSetPreview)}
+                  >
+                    <DeleteOutlined />
+                    <span>移除</span>
+                  </button>
+                ) : null}
+              </div>
+            </div>
           </section>
         </div>
       ) : null}

src/styles/ecommerce-standalone.css

@@ -11889,3 +11889,382 @@ html body #root .ecommerce-standalone.web-shell .ecom-watermark-workspace {
     --ecommerce-topbar-height: 62px;
   }
 }
+
+/* Preview modal actions stay inside the deliberate image inspection moment. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-modal {
+  gap: 14px !important;
+  border-color: rgba(30, 189, 219, 0.16) !important;
+  box-shadow:
+    0 26px 72px rgba(16, 32, 44, 0.18),
+    0 8px 24px rgba(16, 115, 204, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-footer {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  gap: 16px !important;
+  min-width: 0 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-footer strong {
+  min-width: 0 !important;
+  overflow: hidden !important;
+  color: #10202c !important;
+  font-size: 15px !important;
+  font-weight: 800 !important;
+  line-height: 1.4 !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-actions {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: flex-end !important;
+  gap: 10px !important;
+  flex: 0 0 auto !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 7px !important;
+  height: 38px !important;
+  min-height: 38px !important;
+  padding: 0 14px !important;
+  border: 1px solid rgba(30, 189, 219, 0.2) !important;
+  border-radius: 999px !important;
+  color: #1073cc !important;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 251, 253, 0.92)) !important;
+  box-shadow:
+    0 8px 18px rgba(16, 115, 204, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
+  font-size: 14px !important;
+  font-weight: 750 !important;
+  cursor: pointer !important;
+  transition:
+    border-color 160ms ease,
+    color 160ms ease,
+    background 160ms ease,
+    transform 160ms ease,
+    box-shadow 160ms ease !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action:hover,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action:focus-visible {
+  border-color: rgba(30, 189, 219, 0.42) !important;
+  background: #ffffff !important;
+  outline: none !important;
+  transform: translateY(-1px) !important;
+  box-shadow:
+    0 12px 24px rgba(16, 115, 204, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action--danger {
+  border-color: rgba(255, 77, 79, 0.16) !important;
+  color: #d84a4d !important;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 246, 0.94)) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action--danger:hover,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action--danger:focus-visible {
+  border-color: rgba(255, 77, 79, 0.28) !important;
+  color: #c93639 !important;
+}
+
+@media (max-width: 640px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-footer {
+    align-items: stretch !important;
+    flex-direction: column !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-actions {
+    justify-content: stretch !important;
+    width: 100% !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action {
+    flex: 1 1 0 !important;
+  }
+}
+
+/* History record detail: compact composer becomes a stable summary bar, then expands on click. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail {
+  --history-detail-workspace-width: calc(100vw - var(--ecom-history-panel-width, 292px));
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact {
+  position: fixed !important;
+  top: calc(var(--ecommerce-topbar-height, 66px) + clamp(0px, 0.6vh, 6px)) !important;
+  left: calc(var(--history-detail-workspace-width) / 2) !important;
+  width: min(760px, calc(var(--history-detail-workspace-width) - clamp(48px, 8vw, 96px))) !important;
+  gap: 0 !important;
+  transform: translateX(-50%) !important;
+  z-index: 72 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-title {
+  display: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) {
+  display: grid !important;
+  grid-template-columns: auto minmax(0, 1fr) auto !important;
+  grid-template-rows: minmax(64px, auto) !important;
+  align-items: center !important;
+  column-gap: 16px !important;
+  min-height: clamp(68px, 8.8vh, 82px) !important;
+  max-height: 86px !important;
+  padding: clamp(8px, 1.2vh, 10px) 12px clamp(8px, 1.2vh, 10px) 16px !important;
+  overflow: hidden !important;
+  border: 1px solid rgba(30, 189, 219, 0.16) !important;
+  border-radius: 999px !important;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 253, 254, 0.94)),
+    #feffff !important;
+  box-shadow:
+    0 18px 46px rgba(16, 115, 204, 0.1),
+    0 4px 14px rgba(30, 189, 219, 0.055),
+    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
+  cursor: text !important;
+  backdrop-filter: blur(18px) saturate(1.08) !important;
+  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:hover,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:focus-within {
+  border-color: rgba(30, 189, 219, 0.32) !important;
+  box-shadow:
+    0 22px 54px rgba(16, 115, 204, 0.12),
+    0 0 0 4px rgba(30, 189, 219, 0.055),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-reference:not(.ecom-command-reference--inline) {
+  display: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-popover,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover {
+  grid-column: 1 !important;
+  grid-row: 1 !important;
+  align-self: center !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+  width: auto !important;
+  min-width: 52px !important;
+  max-width: 160px !important;
+  min-height: 56px !important;
+  max-height: 56px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  border: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
+  flex: 0 0 54px !important;
+  width: 54px !important;
+  height: 54px !important;
+  border-radius: 18px !important;
+  box-shadow: 0 8px 18px rgba(16, 115, 204, 0.12) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb img,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb video {
+  border-radius: 18px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb > button {
+  display: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-add {
+  flex: 0 0 46px !important;
+  width: 46px !important;
+  height: 46px !important;
+  min-height: 46px !important;
+  margin: 0 !important;
+  border-radius: 50% !important;
+  color: #10202c !important;
+  background: rgba(16, 32, 44, 0.045) !important;
+  box-shadow: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-composer textarea,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea {
+  grid-column: 2 !important;
+  grid-row: 1 !important;
+  align-self: center !important;
+  min-height: 34px !important;
+  max-height: 38px !important;
+  height: 38px !important;
+  padding: 4px 0 0 !important;
+  overflow: hidden !important;
+  color: rgba(16, 32, 44, 0.72) !important;
+  background: transparent !important;
+  font-size: clamp(17px, 1.35vw, 22px) !important;
+  font-weight: 650 !important;
+  line-height: 32px !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  resize: none !important;
+  opacity: 1 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-composer textarea::placeholder {
+  color: rgba(16, 32, 44, 0.48) !important;
+  opacity: 1 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-toolbar,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-toolbar {
+  grid-column: 3 !important;
+  grid-row: 1 !important;
+  align-self: center !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-height: 56px !important;
+  padding: 0 !important;
+  overflow: visible !important;
+  border: 0 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-option-row {
+  display: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-submit-row {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  padding: 0 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-send-button.ecom-command-send {
+  width: 58px !important;
+  height: 58px !important;
+  min-height: 58px !important;
+  border-radius: 50% !important;
+  background: linear-gradient(135deg, #1073cc 0%, #1ebddb 100%) !important;
+  box-shadow:
+    0 14px 28px rgba(16, 115, 204, 0.22),
+    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-send-button.ecom-command-send:hover:not(:disabled) {
+  transform: translateY(-1px) scale(1.02) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-preview[data-status="done"] {
+  padding-top: clamp(132px, 18vh, 160px) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-preview[data-status="done"]:has(.ecom-command-composer-wrap:not(.is-compact)) {
+  padding-top: 380px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-preview-zoom-wrap {
+  display: flex !important;
+  justify-content: center !important;
+  width: 100% !important;
+  min-width: 100% !important;
+  transform-origin: center top !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-canvas-nodes {
+  display: flex !important;
+  justify-content: center !important;
+  box-sizing: border-box !important;
+  width: 100% !important;
+  min-width: 0 !important;
+  min-height: 260px !important;
+  padding: 22px clamp(20px, 4vw, 48px) 44px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-canvas-node:not(.is-generating) {
+  position: relative !important;
+  top: auto !important;
+  left: auto !important;
+  max-width: min(860px, calc(var(--history-detail-workspace-width) - 80px)) !important;
+  transform: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-canvas-node .clone-ai-result-grid {
+  justify-content: center !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-history__item {
+  isolation: isolate !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-history__item .ecom-command-history__item-delete {
+  position: absolute !important;
+  top: 50% !important;
+  right: 14px !important;
+  z-index: 4 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 34px !important;
+  height: 34px !important;
+  min-height: 34px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 1px solid rgba(30, 189, 219, 0.16) !important;
+  border-radius: 12px !important;
+  color: rgba(16, 32, 44, 0.46) !important;
+  background: rgba(255, 255, 255, 0.86) !important;
+  box-shadow:
+    0 8px 18px rgba(16, 115, 204, 0.075),
+    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
+  font-size: 14px !important;
+  line-height: 1 !important;
+  transform: translateY(-50%) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-history__item .ecom-command-history__item-delete:hover,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-history__item .ecom-command-history__item-delete:focus-visible {
+  color: #ff4d4f !important;
+  background: rgba(255, 255, 255, 0.95) !important;
+  border-color: rgba(255, 77, 79, 0.2) !important;
+  outline: none !important;
+  transform: translateY(-50%) !important;
+}
+
+@media (max-width: 900px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail {
+    --history-detail-workspace-width: 100vw;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact {
+    left: 50vw !important;
+    top: calc(var(--ecommerce-topbar-height, 62px) + 2px) !important;
+    width: min(720px, calc(100vw - 36px)) !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) {
+    column-gap: 10px !important;
+    padding-inline: 12px 10px !important;
+    min-height: 70px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-popover {
+    max-width: 116px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-canvas-node:not(.is-generating) {
+    max-width: calc(100vw - 32px) !important;
+    flex-wrap: wrap !important;
+  }
+}