diff --git a/components/StandaloneShell.js b/components/StandaloneShell.js
index 731b7c1ad..1158a9063 100644
--- a/components/StandaloneShell.js
+++ b/components/StandaloneShell.js
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import dynamic from 'next/dynamic';
 import { ImageStudio, VideoStudio, ClippingStudio, VibeMotionStudio, LipSyncStudio, RecastStudio, CinemaStudio, AudioStudio, MarketingStudio, WorkflowStudio, AgentStudio, AppsStudio, AiInfluencerStudio, getUserBalance } from 'studio';
@@ -238,6 +238,35 @@ const getNavigationCategory = (tabId) => (
 );
 
 const STORAGE_KEY = 'muapi_key';
+const NOTIFICATIONS_STORAGE_KEY = 'open_gen_notifications_v1';
+const MAX_VISIBLE_NOTIFICATIONS = 3;
+
+const loadStoredNotifications = () => {
+  if (typeof window === 'undefined') return [];
+
+  try {
+    const stored = JSON.parse(window.sessionStorage.getItem(NOTIFICATIONS_STORAGE_KEY) || '[]');
+    const now = Date.now();
+    return Array.isArray(stored)
+      ? stored.filter((notification) => notification.expiresAt > now).slice(0, MAX_VISIBLE_NOTIFICATIONS)
+      : [];
+  } catch {
+    return [];
+  }
+};
+
+const persistNotifications = (notifications) => {
+  if (typeof window === 'undefined') return;
+
+  try {
+    window.sessionStorage.setItem(
+      NOTIFICATIONS_STORAGE_KEY,
+      JSON.stringify(notifications),
+    );
+  } catch {
+    // Notification persistence is optional; rendering still works without storage.
+  }
+};
 
 export default function StandaloneShell() {
   const params = useParams();
@@ -327,26 +356,65 @@ export default function StandaloneShell() {
   const [isDragging, setIsDragging] = useState(false);
   const [droppedFiles, setDroppedFiles] = useState(null);
 
-  // ── Global Generation Notifications ────────────────────────────────────────
+  // Global generation notifications remain mounted while users switch studios.
   const [notifications, setNotifications] = useState([]);
-  const activeTabRef = useRef(null);
-  useEffect(() => { activeTabRef.current = activeTab; }, [activeTab]);
+  const [notificationsHydrated, setNotificationsHydrated] = useState(false);
+  const [generationCounts, setGenerationCounts] = useState({});
+
+  useEffect(() => {
+    setNotifications(loadStoredNotifications());
+    setNotificationsHydrated(true);
+  }, []);
 
   const pushNotification = useCallback((notif) => {
+    const now = Date.now();
     const id = `notif-${Date.now()}-${Math.random()}`;
-    const entry = { ...notif, id };
-    setNotifications(prev => [entry, ...prev].slice(0, 5));
-    const ttl = notif.type === 'success' ? 8000 : 6000;
-    setTimeout(() => setNotifications(prev => prev.filter(n => n.id !== id)), ttl);
+    const ttl = 12000;
+    const entry = { ...notif, id, expiresAt: now + ttl };
+    setNotifications((previous) => {
+      const next = [
+        ...previous.filter((notification) => notification.expiresAt > now),
+        entry,
+      ].slice(-MAX_VISIBLE_NOTIFICATIONS);
+      persistNotifications(next);
+      return next;
+    });
   }, []);
 
   const dismissNotification = useCallback((id) => {
-    setNotifications(prev => prev.filter(n => n.id !== id));
+    setNotifications((previous) => {
+      const next = previous.filter((notification) => notification.id !== id);
+      persistNotifications(next);
+      return next;
+    });
   }, []);
 
+  useEffect(() => {
+    if (!notificationsHydrated) return;
+
+    persistNotifications(notifications);
+  }, [notifications, notificationsHydrated]);
+
+  useEffect(() => {
+    if (notifications.length === 0) return undefined;
+
+    const nextExpiry = Math.min(...notifications.map((notification) => notification.expiresAt));
+    const timer = window.setTimeout(() => {
+      const now = Date.now();
+      setNotifications((previous) => previous.filter((notification) => notification.expiresAt > now));
+    }, Math.max(0, nextExpiry - Date.now()));
+
+    return () => window.clearTimeout(timer);
+  }, [notifications]);
+
   const makeSuccessCallback = useCallback((tabId) => (data) => {
     const tab = TABS.find(t => t.id === tabId);
-    pushNotification({ type: 'success', tabId, label: tab?.label || tabId, data });
+    pushNotification({
+      type: 'success',
+      tabId,
+      label: tab?.label || tabId,
+      resultUrl: data?.url || null,
+    });
   }, [pushNotification]);
 
   const makeErrorCallback = useCallback((tabId) => (message) => {
@@ -354,6 +422,37 @@ export default function StandaloneShell() {
     pushNotification({ type: 'error', tabId, label: tab?.label || tabId, message });
   }, [pushNotification]);
 
+  const makeGenerationStartCallback = useCallback((tabId) => () => {
+    setGenerationCounts((previous) => ({
+      ...previous,
+      [tabId]: (previous[tabId] || 0) + 1,
+    }));
+  }, []);
+
+  const makeGenerationEndCallback = useCallback((tabId) => () => {
+    setGenerationCounts((previous) => {
+      const currentCount = previous[tabId] || 0;
+      if (currentCount <= 1) {
+        const next = { ...previous };
+        delete next[tabId];
+        return next;
+      }
+
+      return {
+        ...previous,
+        [tabId]: currentCount - 1,
+      };
+    });
+  }, []);
+
+  const activeGenerations = TABS
+    .filter((tab) => generationCounts[tab.id] > 0)
+    .map((tab) => ({
+      tabId: tab.id,
+      label: tab.label,
+      count: generationCounts[tab.id],
+    }));
+
   // Popstate event listener to sync tab state with URL on back/forward navigation
   useEffect(() => {
     const handlePopState = () => {
@@ -368,10 +467,15 @@ export default function StandaloneShell() {
     return () => window.removeEventListener('popstate', handlePopState);
   }, []);
 
-  const handleTabChange = (tabId) => {
+  const handleTabChange = useCallback((tabId) => {
     window.history.pushState(null, '', `/studio/${tabId}`);
     setActiveTab(tabId);
-  };
+  }, []);
+
+  const handleOpenNotification = useCallback((notification) => {
+    handleTabChange(notification.tabId);
+    dismissNotification(notification.id);
+  }, [dismissNotification, handleTabChange]);
 
   const handleTabClick = (e, tabId) => {
     if (e.button === 0 && !e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey) {
@@ -821,112 +925,173 @@ export default function StandaloneShell() {
         {/* Studio Content */}
         <div className="flex-1 min-h-0 h-full relative overflow-hidden bg-[#030303]">
         <div className={activeTab === 'image' ? "h-full w-full" : "hidden"}>
-          <ImageStudio apiKey={apiKey} droppedFiles={droppedFiles} onFilesHandled={handleFilesHandled} onGenerationComplete={makeSuccessCallback('image')} onGenerationError={makeErrorCallback('image')} />
+          <ImageStudio apiKey={apiKey} droppedFiles={droppedFiles} onFilesHandled={handleFilesHandled} onGenerationStart={makeGenerationStartCallback('image')} onGenerationEnd={makeGenerationEndCallback('image')} onGenerationComplete={makeSuccessCallback('image')} onGenerationError={makeErrorCallback('image')} />
         </div>
         <div className={activeTab === 'video' ? "h-full w-full" : "hidden"}>
-          <VideoStudio apiKey={apiKey} droppedFiles={droppedFiles} onFilesHandled={handleFilesHandled} onGenerationComplete={makeSuccessCallback('video')} onGenerationError={makeErrorCallback('video')} />
+          <VideoStudio apiKey={apiKey} droppedFiles={droppedFiles} onFilesHandled={handleFilesHandled} onGenerationStart={makeGenerationStartCallback('video')} onGenerationEnd={makeGenerationEndCallback('video')} onGenerationComplete={makeSuccessCallback('video')} onGenerationError={makeErrorCallback('video')} />
         </div>
         <div className={activeTab === 'clipping' ? "h-full w-full" : "hidden"}>
-          <ClippingStudio apiKey={apiKey} droppedFiles={droppedFiles} onFilesHandled={handleFilesHandled} onGenerationComplete={makeSuccessCallback('clipping')} onGenerationError={makeErrorCallback('clipping')} />
+          <ClippingStudio apiKey={apiKey} droppedFiles={droppedFiles} onFilesHandled={handleFilesHandled} onGenerationStart={makeGenerationStartCallback('clipping')} onGenerationEnd={makeGenerationEndCallback('clipping')} onGenerationComplete={makeSuccessCallback('clipping')} onGenerationError={makeErrorCallback('clipping')} />
         </div>
         <div className={activeTab === 'vibe-motion' ? "h-full w-full" : "hidden"}>
-          <VibeMotionStudio apiKey={apiKey} onGenerationComplete={makeSuccessCallback('vibe-motion')} onGenerationError={makeErrorCallback('vibe-motion')} />
+          <VibeMotionStudio apiKey={apiKey} onGenerationStart={makeGenerationStartCallback('vibe-motion')} onGenerationEnd={makeGenerationEndCallback('vibe-motion')} onGenerationComplete={makeSuccessCallback('vibe-motion')} onGenerationError={makeErrorCallback('vibe-motion')} />
         </div>
         <div className={activeTab === 'lipsync' ? "h-full w-full" : "hidden"}>
-          <LipSyncStudio apiKey={apiKey} droppedFiles={droppedFiles} onFilesHandled={handleFilesHandled} onGenerationComplete={makeSuccessCallback('lipsync')} onGenerationError={makeErrorCallback('lipsync')} />
+          <LipSyncStudio apiKey={apiKey} droppedFiles={droppedFiles} onFilesHandled={handleFilesHandled} onGenerationStart={makeGenerationStartCallback('lipsync')} onGenerationEnd={makeGenerationEndCallback('lipsync')} onGenerationComplete={makeSuccessCallback('lipsync')} onGenerationError={makeErrorCallback('lipsync')} />
         </div>
         <div className={activeTab === 'body-swap' ? "h-full w-full" : "hidden"}>
-          <RecastStudio apiKey={apiKey} droppedFiles={droppedFiles} onFilesHandled={handleFilesHandled} onGenerationComplete={makeSuccessCallback('body-swap')} onGenerationError={makeErrorCallback('body-swap')} />
+          <RecastStudio apiKey={apiKey} droppedFiles={droppedFiles} onFilesHandled={handleFilesHandled} onGenerationStart={makeGenerationStartCallback('body-swap')} onGenerationEnd={makeGenerationEndCallback('body-swap')} onGenerationComplete={makeSuccessCallback('body-swap')} onGenerationError={makeErrorCallback('body-swap')} />
         </div>
         <div className={activeTab === 'cinema' ? "h-full w-full" : "hidden"}>
-          <CinemaStudio apiKey={apiKey} onGenerationComplete={makeSuccessCallback('cinema')} onGenerationError={makeErrorCallback('cinema')} />
+          <CinemaStudio apiKey={apiKey} onGenerationStart={makeGenerationStartCallback('cinema')} onGenerationEnd={makeGenerationEndCallback('cinema')} onGenerationComplete={makeSuccessCallback('cinema')} onGenerationError={makeErrorCallback('cinema')} />
         </div>
         <div className={activeTab === 'audio' ? "h-full w-full" : "hidden"}>
-          <AudioStudio apiKey={apiKey} droppedFiles={droppedFiles} onFilesHandled={handleFilesHandled} onGenerationComplete={makeSuccessCallback('audio')} onGenerationError={makeErrorCallback('audio')} />
+          <AudioStudio apiKey={apiKey} droppedFiles={droppedFiles} onFilesHandled={handleFilesHandled} onGenerationStart={makeGenerationStartCallback('audio')} onGenerationEnd={makeGenerationEndCallback('audio')} onGenerationComplete={makeSuccessCallback('audio')} onGenerationError={makeErrorCallback('audio')} />
         </div>
         <div className={activeTab === 'marketing' ? "h-full w-full" : "hidden"}>
-          <MarketingStudio apiKey={apiKey} droppedFiles={droppedFiles} onFilesHandled={handleFilesHandled} onGenerationComplete={makeSuccessCallback('marketing')} onGenerationError={makeErrorCallback('marketing')} />
+          <MarketingStudio apiKey={apiKey} droppedFiles={droppedFiles} onFilesHandled={handleFilesHandled} onGenerationStart={makeGenerationStartCallback('marketing')} onGenerationEnd={makeGenerationEndCallback('marketing')} onGenerationComplete={makeSuccessCallback('marketing')} onGenerationError={makeErrorCallback('marketing')} />
         </div>
         <div className={activeTab === 'workflows' ? "h-full w-full" : "hidden"}>
-          <WorkflowStudio apiKey={apiKey} isHeaderVisible={isHeaderVisible} onToggleHeader={setIsHeaderVisible} />
+          <WorkflowStudio
+            apiKey={apiKey}
+            isHeaderVisible={isHeaderVisible}
+            onToggleHeader={setIsHeaderVisible}
+            onGenerationStart={makeGenerationStartCallback('workflows')}
+            onGenerationEnd={makeGenerationEndCallback('workflows')}
+            onGenerationComplete={makeSuccessCallback('workflows')}
+            onGenerationError={makeErrorCallback('workflows')}
+          />
         </div>
         <div className={activeTab === 'agents' ? "h-full w-full" : "hidden"}>
           <AgentStudio apiKey={apiKey} isHeaderVisible={isHeaderVisible} onToggleHeader={setIsHeaderVisible} />
         </div>
         <div className={activeTab === 'design-agent' ? "h-full w-full" : "hidden"}>
           {activeTab === 'design-agent' && (
-            <DesignAgentStudio apiKey={apiKey} isHeaderVisible={isHeaderVisible} onToggleHeader={setIsHeaderVisible} />
+            <DesignAgentStudio
+              apiKey={apiKey}
+              isHeaderVisible={isHeaderVisible}
+              onToggleHeader={setIsHeaderVisible}
+              onGenerationStart={makeGenerationStartCallback('design-agent')}
+              onGenerationEnd={makeGenerationEndCallback('design-agent')}
+              onGenerationComplete={makeSuccessCallback('design-agent')}
+              onGenerationError={makeErrorCallback('design-agent')}
+            />
           )}
         </div>
         <div className={activeTab === 'apps' ? "h-full w-full" : "hidden"}>
           <AppsStudio apiKey={apiKey} />
         </div>
         <div className={activeTab === 'ai-influencer' ? "h-full w-full" : "hidden"}>
-          <AiInfluencerStudio apiKey={apiKey} />
+          <AiInfluencerStudio
+            apiKey={apiKey}
+            onGenerationStart={makeGenerationStartCallback('ai-influencer')}
+            onGenerationEnd={makeGenerationEndCallback('ai-influencer')}
+            onGenerationComplete={makeSuccessCallback('ai-influencer')}
+            onGenerationError={makeErrorCallback('ai-influencer')}
+          />
         </div>
       </div>
     </div>
 
-      {/* ── Global Generation Notification Stack ── */}
-      {notifications.length > 0 && (
+      {/* Global generation activity and notification stack */}
+      {(activeGenerations.length > 0 || notifications.length > 0) && (
         <div
           aria-live="polite"
-          className="fixed bottom-6 right-6 z-[200] flex flex-col gap-3 pointer-events-none"
-          style={{ maxWidth: '360px' }}
+          aria-label="Generation activity and notifications"
+          className="fixed bottom-5 right-5 z-[200] flex max-h-[calc(100vh-32px)] w-[340px] max-w-[calc(100vw-32px)] flex-col gap-2 overflow-y-auto pointer-events-none"
+          data-testid="global-notification-stack"
         >
+          {activeGenerations.map((generation) => (
+            <div
+              key={generation.tabId}
+              role="status"
+              data-generation-tab={generation.tabId}
+              className="pointer-events-auto flex items-center gap-3 rounded-xl border border-cyan-400/30 bg-[#0d0d0f] px-3.5 py-3 text-[13px] text-zinc-100 shadow-[0_16px_48px_rgba(0,0,0,0.65)]"
+              data-testid="generation-activity"
+            >
+              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-cyan-400/35 bg-cyan-400/10">
+                <span
+                  className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-cyan-300/25 border-t-cyan-300"
+                  aria-hidden="true"
+                />
+              </span>
+              <p className="min-w-0 flex-1 font-semibold leading-5 text-zinc-100">
+                {generation.label} is generating
+                {generation.count > 1 ? ` (${generation.count})` : ''}
+              </p>
+            </div>
+          ))}
+
           {notifications.map((notif) => (
             <div
               key={notif.id}
-              className="pointer-events-auto flex items-start gap-3 bg-[#0e0e10] border rounded-xl px-4 py-3 shadow-2xl shadow-black/60"
+              role={notif.type === 'error' ? 'alert' : 'status'}
+              data-notification-type={notif.type}
+              data-notification-tab={notif.tabId}
+              className="pointer-events-auto flex items-start gap-3 rounded-xl border bg-[#0d0d0f] px-3.5 py-3 text-[13px] text-zinc-100 shadow-[0_16px_48px_rgba(0,0,0,0.65)]"
               style={{
                 borderColor: notif.type === 'success' ? 'rgba(34,211,238,0.35)' : 'rgba(239,68,68,0.35)',
-                borderLeftWidth: '3px',
-                borderLeftColor: notif.type === 'success' ? '#22d3ee' : '#ef4444',
                 animation: 'slideInRight 280ms cubic-bezier(0.16,1,0.3,1) forwards',
               }}
             >
-              {/* Icon */}
-              <div
-                className="flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center mt-0.5"
-                style={{ background: notif.type === 'success' ? 'rgba(34,211,238,0.12)' : 'rgba(239,68,68,0.12)' }}
+              <span
+                className={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border ${
+                  notif.type === 'success'
+                    ? 'border-cyan-400/35 bg-cyan-400/10 text-cyan-300'
+                    : 'border-red-500/35 bg-red-500/10 text-red-400'
+                }`}
               >
                 {notif.type === 'success' ? (
-                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#22d3ee" strokeWidth="3"><polyline points="20 6 9 17 4 12" /></svg>
+                  <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <path d="m5 12 4 4L19 6" />
+                  </svg>
                 ) : (
-                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="3"><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></svg>
+                  <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="9" />
+                    <path d="M12 7v6" />
+                    <path d="M12 17h.01" />
+                  </svg>
                 )}
-              </div>
+              </span>
 
-              {/* Body */}
-              <div className="flex-1 min-w-0">
-                <p className="text-[12px] font-bold text-white/90 leading-tight">
+              <div className="min-w-0 flex-1">
+                <p className="font-semibold leading-5 text-zinc-100">
                   {notif.label}
-                  <span className="font-normal text-white/50">
-                    {notif.type === 'success' ? ' · Generation complete' : ' · Generation failed'}
+                  <span className="font-normal text-zinc-400">
+                    {notif.type === 'success' ? ' - Generation complete' : ' - Generation failed'}
                   </span>
                 </p>
                 {notif.type === 'error' && notif.message && (
-                  <p className="text-[11px] text-red-400/80 mt-0.5 leading-snug truncate" title={notif.message}>
+                  <p className="mt-0.5 line-clamp-2 text-[12px] font-medium leading-4 text-red-300/85" title={notif.message}>
                     {notif.message}
                   </p>
                 )}
+                {notif.type === 'success' && (
+                  <p className="mt-0.5 text-[12px] leading-4 text-zinc-400">
+                    Your result is ready.
+                  </p>
+                )}
                 {notif.type === 'success' && (
                   <button
-                    onClick={() => { handleTabChange(notif.tabId); dismissNotification(notif.id); }}
-                    className="mt-1.5 text-[11px] font-bold text-[#22d3ee] hover:underline"
+                    type="button"
+                    onClick={() => handleOpenNotification(notif)}
+                    className="mt-1.5 text-[11px] font-bold text-cyan-300 transition-colors hover:text-cyan-100"
+                    aria-label={`Open ${notif.label} result`}
                   >
-                    Open →
+                    Open
                   </button>
                 )}
               </div>
 
-              {/* Dismiss */}
               <button
+                type="button"
                 onClick={() => dismissNotification(notif.id)}
-                className="flex-shrink-0 text-white/30 hover:text-white/70 transition-colors text-lg leading-none mt-0.5"
-                aria-label="Dismiss"
+                className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-zinc-500 transition-colors hover:bg-white/5 hover:text-zinc-200 focus:outline-none focus:ring-1 focus:ring-white/20"
+                aria-label="Dismiss notification"
               >
-                ×
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+                  <path d="M18 6 6 18M6 6l12 12" />
+                </svg>
               </button>
             </div>
           ))}
diff --git a/packages/Open-AI-Design-Agent b/packages/Open-AI-Design-Agent
index e179fe1a6..ebc0ce765 160000
--- a/packages/Open-AI-Design-Agent
+++ b/packages/Open-AI-Design-Agent
@@ -1 +1 @@
-Subproject commit e179fe1a6c47b26ee6afac9128155d9f259a5d14
+Subproject commit ebc0ce7650baad0d13797ccd471c883e78be3161
diff --git a/packages/Vibe-Workflow b/packages/Vibe-Workflow
index 4fed75125..c65ce897e 160000
--- a/packages/Vibe-Workflow
+++ b/packages/Vibe-Workflow
@@ -1 +1 @@
-Subproject commit 4fed75125da0c9bb9d94ad18f0b7746ed6531a9f
+Subproject commit c65ce897e82bf73659c2725528c8492cd609d831
diff --git a/packages/studio/src/components/AiInfluencerStudio.jsx b/packages/studio/src/components/AiInfluencerStudio.jsx
index ef6c871d3..8010e0537 100644
--- a/packages/studio/src/components/AiInfluencerStudio.jsx
+++ b/packages/studio/src/components/AiInfluencerStudio.jsx
@@ -4,6 +4,9 @@ import { useState, useCallback } from "react";
 import toast, { Toaster } from "react-hot-toast";
 import { generateImage } from "../muapi.js";
 import { formatErrorMessage } from "../utils/formatError.js";
+import MobileGenerationActions, {
+  GenerationCopyButtons,
+} from "./MobileGenerationActions.jsx";
 
 const CDN = "https://cdn.muapi.ai/influencer";
 
@@ -332,7 +335,15 @@ function HoverPill({ label, img, onClick }) {
 }
 
 // ─── Main Component ─────────────────────────────────────────────────────────
-export default function AiInfluencerStudio({ apiKey, onGenerate, isGenerating: externalIsGenerating }) {
+export default function AiInfluencerStudio({
+  apiKey,
+  onGenerate,
+  onGenerationStart,
+  onGenerationEnd,
+  onGenerationComplete,
+  onGenerationError,
+  isGenerating: externalIsGenerating,
+}) {
   const [activeTab, setActiveTab] = useState("face");
 
   const [selectedOptions, setSelectedOptions] = useState(() => {
@@ -389,6 +400,7 @@ export default function AiInfluencerStudio({ apiKey, onGenerate, isGenerating: e
   // ── Generate ──────────────────────────────────────────────────────────────
   const handleGenerate = async () => {
     if (isGenerating) return;
+    onGenerationStart?.();
     setIsGeneratingInternal(true);
     setErrorMsg("");
 
@@ -406,13 +418,22 @@ export default function AiInfluencerStudio({ apiKey, onGenerate, isGenerating: e
       }
       if (res?.url) {
         setCurrentResult(res.url);
-        setHistory((prev) => [{ url: res.url, ts: Date.now() }, ...prev]);
+        setHistory((prev) => [{ url: res.url, prompt, ts: Date.now() }, ...prev]);
         setSelectedHistoryIdx(0);
+        onGenerationComplete?.({
+          url: res.url,
+          model: INFLUENCER_MODEL,
+          prompt,
+          type: "image",
+        });
       }
     } catch (err) {
-      toast.error(formatErrorMessage(err, "Generation failed. Please try again."));
+      const message = formatErrorMessage(err, "Generation failed. Please try again.");
+      if (onGenerationError) onGenerationError(message);
+      else toast.error(message);
     } finally {
       setIsGeneratingInternal(false);
+      onGenerationEnd?.();
     }
   };
 
@@ -722,7 +743,14 @@ export default function AiInfluencerStudio({ apiKey, onGenerate, isGenerating: e
               >
                 <img src={item.url} alt={`Character ${idx + 1}`} className="w-full h-full object-cover" />
                 {/* Download on hover */}
-                <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-end justify-center pb-2">
+                <div className="absolute inset-0 hidden md:flex bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity items-end justify-center pb-2">
+                  <div className="absolute right-2 top-2 flex flex-col gap-2">
+                    <GenerationCopyButtons
+                      prompt={item.prompt}
+                      imageUrl={item.url}
+                      onCopyError={onGenerationError}
+                    />
+                  </div>
                   <div
                     role="button"
                     tabIndex={0}
@@ -733,6 +761,18 @@ export default function AiInfluencerStudio({ apiKey, onGenerate, isGenerating: e
                     <DownloadIcon />
                   </div>
                 </div>
+                <MobileGenerationActions
+                  prompt={item.prompt}
+                  imageUrl={item.url}
+                  onCopyError={onGenerationError}
+                  actions={[
+                    {
+                      kind: "download",
+                      label: "Download",
+                      onSelect: () => downloadImg(item.url),
+                    },
+                  ]}
+                />
                 {/* Index badge */}
                 <div className="absolute top-1 left-1 px-1.5 py-0.5 rounded-md bg-black/60 backdrop-blur-sm text-[8px] text-gray-300 font-bold">
                   #{history.length - idx}
diff --git a/packages/studio/src/components/AudioStudio.jsx b/packages/studio/src/components/AudioStudio.jsx
index 13987dbe2..aa6bf7c6c 100644
--- a/packages/studio/src/components/AudioStudio.jsx
+++ b/packages/studio/src/components/AudioStudio.jsx
@@ -477,6 +477,8 @@ function PremiumAudioPlayer({ url, title }) {
 // ---------------------------------------------------------------------------
 export default function AudioStudio({
   apiKey,
+  onGenerationStart,
+  onGenerationEnd,
   onGenerationComplete,
   onGenerationError,
   historyItems,
@@ -639,6 +641,7 @@ export default function AudioStudio({
       }
     }
 
+    onGenerationStart?.();
     setIsGenerating(true);
     setGenerateError(null);
 
@@ -683,10 +686,11 @@ export default function AudioStudio({
     } catch (e) {
       console.error("[AudioStudio]", e);
       const errMsg = formatErrorMessage(e, "Audio generation failed");
-      toast.error(errMsg);
-      onGenerationError?.(errMsg);
+      if (onGenerationError) onGenerationError(errMsg);
+      else toast.error(errMsg);
     } finally {
       setIsGenerating(false);
+      onGenerationEnd?.();
     }
   };
 
diff --git a/packages/studio/src/components/CinemaStudio.jsx b/packages/studio/src/components/CinemaStudio.jsx
index cdca0f0e9..c5e8aa6e9 100644
--- a/packages/studio/src/components/CinemaStudio.jsx
+++ b/packages/studio/src/components/CinemaStudio.jsx
@@ -3,6 +3,9 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import { generateImage, uploadFile } from "../muapi.js";
 import { scopedPersistKey, migrateLegacyPersistKey } from "../persistKey.js";
+import MobileGenerationActions, {
+  CopyContentIcon,
+} from "./MobileGenerationActions.jsx";
 import {
   PromptAspectRatioIcon,
   PromptAction,
@@ -44,6 +47,48 @@ const LENS_MAP = {
   "Clinical Sharp Prime": "ultra-sharp clinical prime lens",
 };
 
+async function fetchImageAsPngBlob(url) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Image request failed with status ${response.status}.`);
+  }
+
+  const sourceBlob = await response.blob();
+  if (sourceBlob.type === "image/png") return sourceBlob;
+
+  const objectUrl = URL.createObjectURL(sourceBlob);
+  try {
+    const image = await new Promise((resolve, reject) => {
+      const element = new Image();
+      element.onload = () => resolve(element);
+      element.onerror = () => reject(new Error("Could not decode the image."));
+      element.src = objectUrl;
+    });
+
+    const canvas = document.createElement("canvas");
+    canvas.width = image.naturalWidth;
+    canvas.height = image.naturalHeight;
+
+    const context = canvas.getContext("2d");
+    if (!context) {
+      throw new Error("Could not create an image clipboard canvas.");
+    }
+
+    context.drawImage(image, 0, 0);
+    return await new Promise((resolve, reject) => {
+      canvas.toBlob(
+        (blob) =>
+          blob
+            ? resolve(blob)
+            : reject(new Error("Could not convert the image to PNG.")),
+        "image/png",
+      );
+    });
+  } finally {
+    URL.revokeObjectURL(objectUrl);
+  }
+}
+
 const FOCAL_PERSPECTIVE = {
   8: "ultra-wide perspective",
   14: "wide-angle perspective",
@@ -483,6 +528,8 @@ function CameraControlsOverlay({
 
 export default function CinemaStudio({
   apiKey,
+  onGenerationStart,
+  onGenerationEnd,
   onGenerationComplete,
   onGenerationError,
   historyItems,
@@ -515,6 +562,7 @@ export default function CinemaStudio({
   const imageInputRef = useRef(null);
   const [activeHistoryIndex, setactiveHistoryIndex] = useState(null);
   const [copiedPromptIndex, setCopiedPromptIndex] = useState(null);
+  const [copiedImageIndex, setCopiedImageIndex] = useState(null);
 
   // ── Internal history state (used when historyItems prop is not provided) ──
   const [internalHistory, setInternalHistory] = useState([]);
@@ -605,6 +653,7 @@ export default function CinemaStudio({
     const basePrompt = settings.prompt.trim();
     if (!basePrompt || isGenerating) return;
 
+    onGenerationStart?.();
     setIsGenerating(true);
 
     const finalPrompt = buildNanoBananaPrompt(
@@ -663,6 +712,7 @@ export default function CinemaStudio({
       onGenerationError?.(e.message?.slice(0, 120) || "Cinema generation failed");
     } finally {
       setIsGenerating(false);
+      onGenerationEnd?.();
     }
   }, [
     settings,
@@ -670,6 +720,9 @@ export default function CinemaStudio({
     apiKey,
     isGenerating,
     onGenerationComplete,
+    onGenerationEnd,
+    onGenerationError,
+    onGenerationStart,
     historyItems,
   ]);
 
@@ -717,23 +770,37 @@ export default function CinemaStudio({
     [onGenerationError],
   );
 
-  // ── Load history item ──
-  const loadHistoryItem = (entry, idx) => {
-    if (entry.settings) {
-      setSettings((prev) => ({
-        ...prev,
-        camera: entry.settings.camera ?? prev.camera,
-        lens: entry.settings.lens ?? prev.lens,
-        focal: entry.settings.focal ?? prev.focal,
-        aperture: entry.settings.aperture ?? prev.aperture,
-        aspect_ratio: entry.settings.aspect_ratio ?? prev.aspect_ratio,
-        prompt: entry.settings.prompt ?? prev.prompt,
-      }));
-      if (entry.settings.resolution) setResolution(entry.settings.resolution);
+  const handleCopyImage = useCallback(
+    async (url, index) => {
+      if (!url) return;
 
-    }
-    setCanvasUrl(entry.url);
-  };
+      try {
+        if (
+          !window.isSecureContext ||
+          !navigator.clipboard?.write ||
+          typeof window.ClipboardItem === "undefined"
+        ) {
+          throw new Error("Image clipboard access requires HTTPS or localhost.");
+        }
+
+        await navigator.clipboard.write([
+          new window.ClipboardItem({
+            "image/png": fetchImageAsPngBlob(url),
+          }),
+        ]);
+        setCopiedImageIndex(index);
+        window.setTimeout(() => {
+          setCopiedImageIndex((current) => (current === index ? null : current));
+        }, 1600);
+      } catch (error) {
+        console.error("Failed to copy the image:", error);
+        onGenerationError?.(
+          "Could not copy the image. Image copy requires HTTPS or localhost.",
+        );
+      }
+    },
+    [onGenerationError],
+  );
 
   const resetToPrompt = () => {
     setCanvasUrl(null);
@@ -755,7 +822,7 @@ export default function CinemaStudio({
               <div
                 key={entry.timestamp ?? idx}
                 className="relative group rounded-lg overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-[#22d3ee]/50 transition-all duration-300 flex flex-col cursor-pointer"
-                onClick={() => loadHistoryItem(entry, idx)}
+                onClick={() => setFullscreenUrl(entry.url)}
               >
                 <img
                   src={entry.url}
@@ -764,22 +831,46 @@ export default function CinemaStudio({
                 />
                 
                 {/* Overlay actions */}
-                <div className="absolute top-2 right-2 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                <div className="absolute top-2 right-2 hidden md:flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                   <button
                     type="button"
-                    title="Fullscreen"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setFullscreenUrl(entry.url);
+                    title={copiedPromptIndex === idx ? "Prompt copied" : "Copy prompt"}
+                    aria-label={copiedPromptIndex === idx ? "Prompt copied" : "Copy prompt"}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleCopyPrompt(entry.settings?.prompt, idx);
                     }}
-                    className="p-2 bg-black/60 backdrop-blur-md rounded-full text-white hover:bg-[#22d3ee] hover:text-black transition-all border border-white/10"
+                    className={`flex h-8 w-8 items-center justify-center rounded-full border border-white/10 bg-black/60 font-black backdrop-blur-md transition-all hover:bg-[#22d3ee] hover:text-black ${
+                      copiedPromptIndex === idx ? "text-[#22d3ee]" : "text-white"
+                    }`}
                   >
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                      <polyline points="15 3 21 3 21 9" />
-                      <polyline points="9 21 3 21 3 15" />
-                      <line x1="21" y1="3" x2="14" y2="10" />
-                      <line x1="3" y1="21" x2="10" y2="14" />
-                    </svg>
+                    {copiedPromptIndex === idx ? (
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                        <path d="M5 12l4 4L19 6" />
+                      </svg>
+                    ) : (
+                      <CopyContentIcon kind="text" size={17} />
+                    )}
+                  </button>
+                  <button
+                    type="button"
+                    title={copiedImageIndex === idx ? "Image copied" : "Copy image"}
+                    aria-label={copiedImageIndex === idx ? "Image copied" : "Copy image"}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleCopyImage(entry.url, idx);
+                    }}
+                    className={`flex h-8 w-8 items-center justify-center rounded-full border border-white/10 bg-black/60 backdrop-blur-md transition-all hover:bg-[#22d3ee] hover:text-black ${
+                      copiedImageIndex === idx ? "text-[#22d3ee]" : "text-white"
+                    }`}
+                  >
+                    {copiedImageIndex === idx ? (
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                        <path d="M5 12l4 4L19 6" />
+                      </svg>
+                    ) : (
+                      <CopyContentIcon kind="image" size={17} />
+                    )}
                   </button>
                   <button
                     type="button"
@@ -826,35 +917,66 @@ export default function CinemaStudio({
                     </svg>
                   </button>
                 </div>
+                <MobileGenerationActions
+                  actions={[
+                    {
+                      kind: "text",
+                      label: "Copy prompt",
+                      onSelect: () =>
+                        handleCopyPrompt(entry.settings?.prompt, idx),
+                    },
+                    {
+                      kind: "image",
+                      label: "Copy image",
+                      onSelect: () => handleCopyImage(entry.url, idx),
+                    },
+                    {
+                      kind: "download",
+                      label: "Download",
+                      onSelect: async () => {
+                        try {
+                          const response = await fetch(entry.url);
+                          const blob = await response.blob();
+                          const blobUrl = URL.createObjectURL(blob);
+                          const anchor = document.createElement("a");
+                          anchor.href = blobUrl;
+                          anchor.download = `cinema-shot-${entry.id || idx}.jpg`;
+                          document.body.appendChild(anchor);
+                          anchor.click();
+                          document.body.removeChild(anchor);
+                          URL.revokeObjectURL(blobUrl);
+                        } catch {
+                          window.open(entry.url, "_blank");
+                        }
+                      },
+                    },
+                    {
+                      kind: "delete",
+                      label: "Delete",
+                      danger: true,
+                      onSelect: () => {
+                        if (confirm("Are you sure you want to delete this generated item?")) {
+                          setInternalHistory((prev) => prev.filter((_, i) => i !== idx));
+                        }
+                      },
+                    },
+                  ]}
+                />
 
                 {/* Details */}
                 <div className="p-3 bg-black/80 backdrop-blur-sm border-t border-white/5 flex-1 flex flex-col justify-between gap-2">
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleCopyPrompt(entry.settings?.prompt, idx);
-                    }}
-                    className={`w-full text-left text-xs line-clamp-3 leading-relaxed transition-colors cursor-copy ${
-                      copiedPromptIndex === idx
-                        ? "text-[#22d3ee]"
-                        : "text-white/70 hover:text-white"
-                    }`}
-                    title={
-                      copiedPromptIndex === idx
-                        ? "Prompt copied"
-                        : "Copy full prompt"
-                    }
-                    aria-label={
-                      copiedPromptIndex === idx
-                        ? "Prompt copied"
-                        : "Copy full prompt"
-                    }
+                  <p
+                    className="w-full text-left text-xs line-clamp-3 leading-relaxed text-white/70"
+                    title={entry.settings?.prompt || "No prompt"}
                   >
                     {entry.settings?.prompt || "No prompt"}
-                  </button>
+                  </p>
                   <span className="sr-only" aria-live="polite">
-                    {copiedPromptIndex === idx ? "Prompt copied" : ""}
+                    {copiedPromptIndex === idx
+                      ? "Prompt copied"
+                      : copiedImageIndex === idx
+                        ? "Image copied"
+                        : ""}
                   </span>
                   <div className="flex items-center mt-1 flex-wrap gap-1">
                     <div className="flex items-center gap-2">
diff --git a/packages/studio/src/components/ClippingStudio.jsx b/packages/studio/src/components/ClippingStudio.jsx
index b3b609178..79ead61f6 100644
--- a/packages/studio/src/components/ClippingStudio.jsx
+++ b/packages/studio/src/components/ClippingStudio.jsx
@@ -5,6 +5,9 @@ import toast, { Toaster } from "react-hot-toast";
 import { runClipping, uploadFile } from "../muapi.js";
 import { formatErrorMessage } from "../utils/formatError.js";
 import { scopedPersistKey, migrateLegacyPersistKey } from "../persistKey.js";
+import MobileGenerationActions, {
+  GenerationCopyButtons,
+} from "./MobileGenerationActions.jsx";
 import {
   PROMPT_CONTROL_LABEL_CLASS,
   PROMPT_MEDIA_PREVIEW_CLASS,
@@ -23,6 +26,25 @@ import {
   promptMediaButtonClassName,
 } from "./prompt/PromptComposer.jsx";
 
+const MAX_VIDEO_SIZE_MB = 100;
+const MAX_VIDEO_SIZE_BYTES = MAX_VIDEO_SIZE_MB * 1024 * 1024;
+const CLIPPING_TOASTER_ID = "clipping-studio";
+const VIDEO_TOO_LARGE_FOR_MODE_MESSAGE =
+  "The file is too large for this mode. Compress or trim the video, then upload a smaller file.";
+const MAX_VISIBLE_ERROR_TOASTS = 3;
+const ERROR_TOAST_DURATION_MS = 7000;
+const activeErrorToastIds = [];
+
+const forgetErrorToast = (toastId) => {
+  const index = activeErrorToastIds.indexOf(toastId);
+  if (index !== -1) activeErrorToastIds.splice(index, 1);
+};
+
+const dismissErrorToast = (toastId) => {
+  forgetErrorToast(toastId);
+  toast.dismiss(toastId, CLIPPING_TOASTER_ID);
+};
+
 // ---------------------------------------------------------------------------
 // Inline SVG Icons
 // ---------------------------------------------------------------------------
@@ -63,6 +85,104 @@ const CopyIcon = () => (
   </svg>
 );
 
+const ErrorToast = ({ toastInstance, message }) => (
+  <div
+    className={`pointer-events-auto flex w-[340px] max-w-[calc(100vw-32px)] items-start gap-3 rounded-xl border border-red-500/35 bg-[#0d0d0f] px-3.5 py-3 text-[13px] text-zinc-100 shadow-[0_16px_48px_rgba(0,0,0,0.65)] transition-all duration-200 ${
+      toastInstance.visible ? "translate-y-0 opacity-100" : "translate-y-2 opacity-0"
+    }`}
+    role="alert"
+  >
+    <span className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-red-500/35 bg-red-500/10 text-red-400">
+      <svg
+        width="17"
+        height="17"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+      >
+        <circle cx="12" cy="12" r="9" />
+        <path d="M12 7v6" />
+        <path d="M12 17h.01" />
+      </svg>
+    </span>
+    <span className="min-w-0 flex-1 py-1 font-medium leading-5">{message}</span>
+    <button
+      type="button"
+      onClick={() => dismissErrorToast(toastInstance.id)}
+      className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-zinc-500 transition-colors hover:bg-white/5 hover:text-zinc-200 focus:outline-none focus:ring-1 focus:ring-red-400/60"
+      aria-label="Dismiss notification"
+    >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        aria-hidden="true"
+      >
+        <path d="M18 6 6 18M6 6l12 12" />
+      </svg>
+    </button>
+  </div>
+);
+
+const showErrorToast = (message) => {
+  const options = {
+    duration: ERROR_TOAST_DURATION_MS,
+    position: "bottom-right",
+    toasterId: CLIPPING_TOASTER_ID,
+  };
+
+  while (activeErrorToastIds.length >= MAX_VISIBLE_ERROR_TOASTS) {
+    const oldestToastId = activeErrorToastIds.shift();
+    toast.remove(oldestToastId, CLIPPING_TOASTER_ID);
+  }
+
+  const toastId = toast.custom(
+    (toastInstance) => (
+      <ErrorToast
+        toastInstance={toastInstance}
+        message={message}
+      />
+    ),
+    options,
+  );
+
+  activeErrorToastIds.push(toastId);
+  setTimeout(
+    () => forgetErrorToast(toastId),
+    ERROR_TOAST_DURATION_MS + 1000,
+  );
+};
+
+const showVideoSizeLimitToast = () => {
+  showErrorToast(`Video exceeds ${MAX_VIDEO_SIZE_MB}MB limit.`);
+};
+
+const isFileSizeError = (error) => {
+  const message = String(error?.message || error || "");
+  return /(?:\b413\b|payload too large|request entity too large|file(?: size)? (?:is )?too large|file is too heavy|exceeds?.*(?:size|limit)|слишком (?:больш|тяж)|превышает.*(?:размер|лимит))/i.test(message);
+};
+
+const showVideoUploadError = (error) => {
+  if (isFileSizeError(error)) {
+    showErrorToast(VIDEO_TOO_LARGE_FOR_MODE_MESSAGE);
+    return;
+  }
+
+  const message = formatErrorMessage(
+    error,
+    "Video upload failed. Please try again.",
+  );
+  showErrorToast(message);
+};
+
 const getAspectClass = (ar) => {
   switch (ar) {
     case "16:9": return "aspect-video";
@@ -81,6 +201,8 @@ const getAspectClass = (ar) => {
 // ---------------------------------------------------------------------------
 export default function ClippingStudio({
   apiKey,
+  onGenerationStart,
+  onGenerationEnd,
   onGenerationComplete,
   onGenerationError,
   droppedFiles,
@@ -209,8 +331,8 @@ export default function ClippingStudio({
       const videoFiles = droppedFiles.filter(f => f.type.startsWith('video/'));
       if (videoFiles.length > 0) {
         const file = videoFiles[0];
-        if (file.size > 100 * 1024 * 1024) {
-          alert("Video exceeds 100MB limit.");
+        if (file.size > MAX_VIDEO_SIZE_BYTES) {
+          showVideoSizeLimitToast();
           onFilesHandled?.();
           return;
         }
@@ -225,7 +347,7 @@ export default function ClippingStudio({
           })
           .catch(err => {
             setVideoUploading(false);
-            alert(`Failed to upload dropped file: ${err.message}`);
+            showVideoUploadError(err);
           });
       }
       onFilesHandled?.();
@@ -286,8 +408,9 @@ export default function ClippingStudio({
   const handleVideoFileChange = async (e) => {
     const file = e.target.files[0];
     if (!file) return;
-    if (file.size > 100 * 1024 * 1024) {
-      alert("Video exceeds 100MB limit.");
+    if (file.size > MAX_VIDEO_SIZE_BYTES) {
+      showVideoSizeLimitToast();
+      if (videoFileInputRef.current) videoFileInputRef.current.value = "";
       return;
     }
     setVideoUploading(true);
@@ -299,7 +422,7 @@ export default function ClippingStudio({
       setVideoUrl(url);
     } catch (err) {
       console.error("[ClippingStudio] Video upload failed:", err);
-      alert(`Video upload failed: ${err.message}`);
+      showVideoUploadError(err);
     } finally {
       setVideoUploading(false);
       setVideoProgress(0);
@@ -318,6 +441,7 @@ export default function ClippingStudio({
       return;
     }
 
+    onGenerationStart?.();
     setIsGenerating(true);
     setGenerateError(null);
     setResult(null);
@@ -374,10 +498,14 @@ export default function ClippingStudio({
     } catch (err) {
       console.error("[ClippingStudio] Error generating clips:", err);
       const errMsg = formatErrorMessage(err, "Failed to process AI clipping.");
-      toast.error(errMsg);
-      onGenerationError?.(errMsg);
+      const notificationMessage = isFileSizeError(err)
+        ? VIDEO_TOO_LARGE_FOR_MODE_MESSAGE
+        : errMsg;
+      if (onGenerationError) onGenerationError(notificationMessage);
+      else showErrorToast(notificationMessage);
     } finally {
       setIsGenerating(false);
+      onGenerationEnd?.();
     }
   };
 
@@ -467,17 +595,17 @@ export default function ClippingStudio({
               {history.map((entry, idx) => (
                 <div
                   key={entry.id || idx}
-                  className="relative group rounded-lg overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-primary/50 transition-all duration-300 flex flex-col"
+                  onClick={() => handleSelectHistory(entry)}
+                  className="relative group rounded-lg overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-primary/50 transition-all duration-300 flex flex-col cursor-pointer"
                 >
                   <div className="aspect-video bg-zinc-950 flex items-center justify-center border-b border-white/5 relative overflow-hidden">
                     <video
                       src={entry.videoUrl}
-                      className="w-full h-full object-cover opacity-60 group-hover:opacity-85 transition-opacity cursor-pointer animate-fade-in"
+                      className="w-full h-full object-cover opacity-60 group-hover:opacity-85 transition-opacity animate-fade-in"
                       preload="metadata"
                       muted
                       loop
                       playsInline
-                      onClick={() => handleSelectHistory(entry)}
                       onMouseOver={(e) => e.target.play()}
                       onMouseOut={(e) => {
                         e.target.pause();
@@ -486,7 +614,7 @@ export default function ClippingStudio({
                     />
                     
                     {/* Overlay actions */}
-                    <div className="absolute top-2 right-2 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity z-10">
+                    <div className="absolute top-2 right-2 z-10 hidden md:flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                       <button
                         type="button"
                         title="Delete from history"
@@ -499,11 +627,21 @@ export default function ClippingStudio({
                         <TrashIcon />
                       </button>
                     </div>
+                    <MobileGenerationActions
+                      actions={[
+                        {
+                          kind: "delete",
+                          label: "Delete",
+                          danger: true,
+                          onSelect: () =>
+                            setHistory((prev) =>
+                              prev.filter((historyEntry) => historyEntry.id !== entry.id),
+                            ),
+                        },
+                      ]}
+                    />
                   </div>
-                  <div 
-                    onClick={() => handleSelectHistory(entry)}
-                    className="p-3 bg-black/80 backdrop-blur-sm border-t border-white/5 flex-1 flex flex-col justify-between gap-2 cursor-pointer"
-                  >
+                  <div className="p-3 bg-black/80 backdrop-blur-sm border-t border-white/5 flex-1 flex flex-col justify-between gap-2">
                     <div className="flex flex-col gap-1">
                       <h4 className="text-xs font-bold text-white truncate" title={entry.videoUrl.split('/').pop()}>
                         {entry.videoUrl.split('/').pop() || "source_video.mp4"}
@@ -650,13 +788,13 @@ export default function ClippingStudio({
                     {result.clips.map((clipUrl, i) => (
                       <div
                         key={i}
-                        className="relative group rounded-lg overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-primary/50 transition-all duration-300 flex flex-col"
+                        onClick={() => setFullscreenUrl(clipUrl)}
+                        className="relative group rounded-lg overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-primary/50 transition-all duration-300 flex flex-col cursor-pointer"
                       >
                         <div className="relative group/vid border-b border-white/5 overflow-hidden bg-black/40">
                           <video
                             src={clipUrl}
-                            className={`w-full ${getAspectClass(result.aspectRatio)} object-cover bg-black/40 cursor-pointer hover:opacity-85 transition-opacity`}
-                            onClick={() => setFullscreenUrl(clipUrl)}
+                            className={`w-full ${getAspectClass(result.aspectRatio)} object-cover bg-black/40 hover:opacity-85 transition-opacity`}
                             controls={false}
                             loop
                             muted
@@ -669,23 +807,11 @@ export default function ClippingStudio({
                           />
                           
                           {/* Overlay actions */}
-                          <div className="absolute top-2 right-2 flex flex-col gap-2 opacity-0 group-hover/vid:opacity-100 transition-opacity z-10">
-                            <button
-                              type="button"
-                              title="Fullscreen"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                setFullscreenUrl(clipUrl);
-                              }}
-                              className="p-2 bg-black/60 backdrop-blur-md rounded-full text-white hover:bg-primary hover:text-black transition-all border border-white/10"
-                            >
-                              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                                <polyline points="15 3 21 3 21 9" />
-                                <polyline points="9 21 3 21 3 15" />
-                                <line x1="21" y1="3" x2="14" y2="10" />
-                                <line x1="3" y1="21" x2="10" y2="14" />
-                              </svg>
-                            </button>
+                          <div className="absolute top-2 right-2 z-10 hidden md:flex flex-col gap-2 opacity-0 group-hover/vid:opacity-100 transition-opacity">
+                            <GenerationCopyButtons
+                              prompt={result.prompt}
+                              onCopyError={onGenerationError}
+                            />
                             <button
                               type="button"
                               title="Copy Link"
@@ -709,6 +835,23 @@ export default function ClippingStudio({
                               <DownloadIcon />
                             </button>
                           </div>
+                          <MobileGenerationActions
+                            prompt={result.prompt}
+                            onCopyError={onGenerationError}
+                            actions={[
+                              {
+                                kind: "copy",
+                                label: "Copy link",
+                                onSelect: () => copyToClipboard(clipUrl),
+                              },
+                              {
+                                kind: "download",
+                                label: "Download",
+                                onSelect: () =>
+                                  downloadVideo(clipUrl, `clip-${i + 1}.mp4`),
+                              },
+                            ]}
+                          />
 
                           <div className="absolute top-2 left-2 bg-black/60 backdrop-blur-md px-2 py-1 rounded border border-white/5 text-[9px] uppercase font-black tracking-wider text-primary">
                             Clip #{i + 1}
@@ -728,20 +871,6 @@ export default function ClippingStudio({
                               </span>
                               <span className="text-[10px] text-white/40">{result.aspectRatio || `Clip #${i + 1}`}</span>
                             </div>
-                            <button
-                              type="button"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                navigator.clipboard.writeText(result.prompt || clipUrl);
-                                const btn = e.currentTarget;
-                                btn.innerText = "Copied!";
-                                setTimeout(() => { btn.innerText = "Copy"; }, 2000);
-                              }}
-                              className="px-2 py-0.5 bg-white/5 hover:bg-primary/20 hover:text-primary rounded text-[10px] font-medium text-white/70 transition-all border border-white/10"
-                              title="Copy prompt"
-                            >
-                              Copy Prompt
-                            </button>
                           </div>
                         </div>
                       </div>
@@ -988,7 +1117,34 @@ export default function ClippingStudio({
           scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
         }
       `}</style>
-      <Toaster position="top-right" containerStyle={{ zIndex: 99999 }} toastOptions={{ duration: 5000, style: { background: '#18181b', color: '#ffffff', border: '1px solid rgba(255,255,255,0.15)', fontSize: '13px', borderRadius: '12px', boxShadow: '0 10px 30px rgba(0,0,0,0.6)', maxWidth: '440px', wordBreak: 'break-word', whiteSpace: 'pre-wrap', padding: '12px 16px' } }} />
+      <Toaster
+        toasterId={CLIPPING_TOASTER_ID}
+        position="bottom-right"
+        reverseOrder={false}
+        gutter={8}
+        containerStyle={{ zIndex: 99999, right: 20, bottom: 20 }}
+        toastOptions={{
+          duration: 6000,
+          style: {
+            background: "#0d0d0f",
+            color: "#f4f4f5",
+            border: "1px solid rgba(239,68,68,0.35)",
+            fontSize: "13px",
+            borderRadius: "12px",
+            boxShadow: "0 16px 48px rgba(0,0,0,0.65)",
+            maxWidth: "380px",
+            wordBreak: "break-word",
+            whiteSpace: "pre-wrap",
+            padding: "12px 14px",
+          },
+          error: {
+            iconTheme: {
+              primary: "#f87171",
+              secondary: "#0d0d0f",
+            },
+          },
+        }}
+      />
     </div>
   );
 }
diff --git a/packages/studio/src/components/DesignAgentStudio.jsx b/packages/studio/src/components/DesignAgentStudio.jsx
index 517f6c9c3..a02aaae36 100644
--- a/packages/studio/src/components/DesignAgentStudio.jsx
+++ b/packages/studio/src/components/DesignAgentStudio.jsx
@@ -5,7 +5,15 @@ import { CreativeCanvas } from 'design-agent';
 
 import { getUserBalance } from '../muapi';
 
-export default function DesignAgentStudio({ apiKey, isHeaderVisible, onToggleHeader }) {
+export default function DesignAgentStudio({
+  apiKey,
+  isHeaderVisible,
+  onToggleHeader,
+  onGenerationStart,
+  onGenerationEnd,
+  onGenerationComplete,
+  onGenerationError,
+}) {
   const [userData, setUserData] = useState(null);
 
   useEffect(() => {
@@ -38,6 +46,10 @@ export default function DesignAgentStudio({ apiKey, isHeaderVisible, onToggleHea
         theme="dark"
         onToggleHeader={onToggleHeader}
         isHeaderVisible={isHeaderVisible}
+        onGenerationStart={onGenerationStart}
+        onGenerationEnd={onGenerationEnd}
+        onGenerationComplete={onGenerationComplete}
+        onGenerationError={onGenerationError}
       />
     </div>
   );
diff --git a/packages/studio/src/components/ImageStudio.jsx b/packages/studio/src/components/ImageStudio.jsx
index 2a4978ea2..ccda06522 100644
--- a/packages/studio/src/components/ImageStudio.jsx
+++ b/packages/studio/src/components/ImageStudio.jsx
@@ -6,6 +6,9 @@ import { generateImage, generateI2I, uploadFile } from "../muapi.js";
 import { formatErrorMessage } from "../utils/formatError.js";
 import { scopedPersistKey, migrateLegacyPersistKey } from "../persistKey.js";
 import DrawModal from "./DrawModal.jsx";
+import MobileGenerationActions, {
+  GenerationCopyButtons,
+} from "./MobileGenerationActions.jsx";
 import {
   t2iModels,
   i2iModels,
@@ -847,6 +850,8 @@ function SimpleDropdown({ title, options, selected, onSelect, onClose }) {
 
 export default function ImageStudio({
   apiKey,
+  onGenerationStart,
+  onGenerationEnd,
   onGenerationComplete,
   onGenerationError,
   historyItems,
@@ -1216,6 +1221,7 @@ export default function ImageStudio({
       }
     }
 
+    onGenerationStart?.();
     setGenerating(true);
     setGenerateError(null);
 
@@ -1272,10 +1278,11 @@ export default function ImageStudio({
     } catch (e) {
       console.error("[ImageStudio] Generation failed:", e);
       const errMsg = formatErrorMessage(e, "Image generation failed");
-      toast.error(errMsg);
-      onGenerationError?.(errMsg);
+      if (onGenerationError) onGenerationError(errMsg);
+      else toast.error(errMsg);
     } finally {
       setGenerating(false);
+      onGenerationEnd?.();
     }
   };
 
@@ -1297,33 +1304,22 @@ export default function ImageStudio({
             {history.map((entry, idx) => (
               <div
                 key={entry.id || idx}
-                className="relative group rounded-lg overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-primary/50 transition-all duration-300 flex flex-col"
+                className="relative group rounded-lg overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-primary/50 transition-all duration-300 flex flex-col cursor-pointer"
+                onClick={() => setFullscreenUrl(entry.url)}
               >
                 <img
                   src={entry.url}
                   alt={entry.prompt?.substring(0, 30) || "Generated image"}
-                  className="w-full aspect-square object-cover bg-black/40 cursor-pointer hover:opacity-80 transition-opacity"
-                  onClick={() => setFullscreenUrl(entry.url)}
+                  className="w-full aspect-square object-cover bg-black/40 hover:opacity-80 transition-opacity"
                 />
                 
                 {/* Overlay actions */}
-                <div className="absolute top-2 right-2 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                  <button
-                    type="button"
-                    title="Fullscreen"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setFullscreenUrl(entry.url);
-                    }}
-                    className="p-2 bg-black/60 backdrop-blur-md rounded-full text-white hover:bg-primary hover:text-black transition-all border border-white/10"
-                  >
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                      <polyline points="15 3 21 3 21 9" />
-                      <polyline points="9 21 3 21 3 15" />
-                      <line x1="21" y1="3" x2="14" y2="10" />
-                      <line x1="3" y1="21" x2="10" y2="14" />
-                    </svg>
-                  </button>
+                <div className="absolute top-2 right-2 hidden md:flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <GenerationCopyButtons
+                    prompt={entry.prompt}
+                    imageUrl={entry.url}
+                    onCopyError={onGenerationError}
+                  />
                   <button
                     type="button"
                     title="Download"
@@ -1356,6 +1352,29 @@ export default function ImageStudio({
                     </svg>
                   </button>
                 </div>
+                <MobileGenerationActions
+                  prompt={entry.prompt}
+                  imageUrl={entry.url}
+                  onCopyError={onGenerationError}
+                  actions={[
+                    {
+                      kind: "download",
+                      label: "Download",
+                      onSelect: () =>
+                        downloadImage(entry.url, `muapi-${entry.id || idx}.jpg`),
+                    },
+                    {
+                      kind: "delete",
+                      label: "Delete",
+                      danger: true,
+                      onSelect: () => {
+                        if (confirm("Are you sure you want to delete this generated item?")) {
+                          setLocalHistory((prev) => prev.filter((_, i) => i !== idx));
+                        }
+                      },
+                    },
+                  ]}
+                />
 
                 {/* Prompt & Details */}
                 <div className="p-3 bg-black/80 backdrop-blur-sm border-t border-white/5 flex-1 flex flex-col justify-between gap-2">
@@ -1369,22 +1388,6 @@ export default function ImageStudio({
                       </span>
                       <span className="text-[10px] text-white/40">{entry.aspect_ratio}</span>
                     </div>
-                    {entry.prompt && (
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          navigator.clipboard.writeText(entry.prompt);
-                          const btn = e.currentTarget;
-                          btn.innerText = "Copied!";
-                          setTimeout(() => { btn.innerText = "Copy"; }, 2000);
-                        }}
-                        className="px-2 py-0.5 bg-white/5 hover:bg-primary/20 hover:text-primary rounded text-[10px] font-medium text-white/70 transition-all border border-white/10"
-                        title="Copy prompt"
-                      >
-                        Copy Prompt
-                      </button>
-                    )}
                   </div>
                 </div>
               </div>
diff --git a/packages/studio/src/components/LipSyncStudio.jsx b/packages/studio/src/components/LipSyncStudio.jsx
index 12335ea11..e213a6d13 100644
--- a/packages/studio/src/components/LipSyncStudio.jsx
+++ b/packages/studio/src/components/LipSyncStudio.jsx
@@ -5,6 +5,9 @@ import toast, { Toaster } from "react-hot-toast";
 import { processLipSync, uploadFile } from "../muapi.js";
 import { formatErrorMessage } from "../utils/formatError.js";
 import { scopedPersistKey, migrateLegacyPersistKey } from "../persistKey.js";
+import MobileGenerationActions, {
+  GenerationCopyButtons,
+} from "./MobileGenerationActions.jsx";
 import {
   lipsyncModels,
   imageLipSyncModels,
@@ -316,6 +319,8 @@ const VideoIcon = ({
 // ---------------------------------------------------------------------------
 export default function LipSyncStudio({
   apiKey,
+  onGenerationStart,
+  onGenerationEnd,
   onGenerationComplete,
   onGenerationError,
   historyItems,
@@ -647,6 +652,7 @@ export default function LipSyncStudio({
       return;
     }
 
+    onGenerationStart?.();
     setIsGenerating(true);
     setGenerateError(null);
 
@@ -691,10 +697,11 @@ export default function LipSyncStudio({
     } catch (e) {
       console.error("[LipSyncStudio]", e);
       const errMsg = formatErrorMessage(e, "Lip sync generation failed");
-      toast.error(errMsg);
-      onGenerationError?.(errMsg);
+      if (onGenerationError) onGenerationError(errMsg);
+      else toast.error(errMsg);
     } finally {
       setIsGenerating(false);
+      onGenerationEnd?.();
     }
   };
 
@@ -753,12 +760,12 @@ export default function LipSyncStudio({
             {history.map((entry, idx) => (
               <div
                 key={entry.id || idx}
-                className="relative group rounded-2xl overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-primary/50 transition-all duration-300 flex flex-col"
+                className="relative group rounded-2xl overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-primary/50 transition-all duration-300 flex flex-col cursor-pointer"
+                onClick={() => setFullscreenUrl(entry.url)}
               >
                 <video
                   src={entry.url}
-                  className="w-full aspect-video object-cover bg-black/40 cursor-pointer hover:opacity-80 transition-opacity"
-                  onClick={() => setFullscreenUrl(entry.url)}
+                  className="w-full aspect-video object-cover bg-black/40 hover:opacity-80 transition-opacity"
                   controls={false}
                   loop
                   muted
@@ -771,23 +778,11 @@ export default function LipSyncStudio({
                 />
                 
                 {/* Overlay actions */}
-                <div className="absolute top-2 right-2 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                  <button
-                    type="button"
-                    title="Fullscreen"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setFullscreenUrl(entry.url);
-                    }}
-                    className="p-2 bg-black/60 backdrop-blur-md rounded-full text-white hover:bg-primary hover:text-black transition-all border border-white/10"
-                  >
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                      <polyline points="15 3 21 3 21 9" />
-                      <polyline points="9 21 3 21 3 15" />
-                      <line x1="21" y1="3" x2="14" y2="10" />
-                      <line x1="3" y1="21" x2="10" y2="14" />
-                    </svg>
-                  </button>
+                <div className="absolute top-2 right-2 hidden md:flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <GenerationCopyButtons
+                    prompt={entry.prompt}
+                    onCopyError={onGenerationError}
+                  />
                   <button
                     type="button"
                     title="Download"
@@ -820,6 +815,28 @@ export default function LipSyncStudio({
                     </svg>
                   </button>
                 </div>
+                <MobileGenerationActions
+                  prompt={entry.prompt}
+                  onCopyError={onGenerationError}
+                  actions={[
+                    {
+                      kind: "download",
+                      label: "Download",
+                      onSelect: () =>
+                        downloadFile(entry.url, `lipsync-${entry.id || idx}.mp4`),
+                    },
+                    {
+                      kind: "delete",
+                      label: "Delete",
+                      danger: true,
+                      onSelect: () => {
+                        if (confirm("Are you sure you want to delete this generated item?")) {
+                          setInternalHistory((prev) => prev.filter((_, i) => i !== idx));
+                        }
+                      },
+                    },
+                  ]}
+                />
 
                 {/* Details */}
                 <div className="p-3 bg-black/80 backdrop-blur-sm border-t border-white/5 flex-1 flex flex-col justify-between gap-2">
@@ -837,22 +854,6 @@ export default function LipSyncStudio({
                         <span className="text-[10px] text-white/40">{entry.resolution}</span>
                       )}
                     </div>
-                    {entry.prompt && (
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          navigator.clipboard.writeText(entry.prompt);
-                          const btn = e.currentTarget;
-                          btn.innerText = "Copied!";
-                          setTimeout(() => { btn.innerText = "Copy"; }, 2000);
-                        }}
-                        className="px-2 py-0.5 bg-white/5 hover:bg-primary/20 hover:text-primary rounded text-[10px] font-medium text-white/70 transition-all border border-white/10"
-                        title="Copy prompt"
-                      >
-                        Copy Prompt
-                      </button>
-                    )}
                   </div>
                 </div>
               </div>
diff --git a/packages/studio/src/components/MarketingStudio.jsx b/packages/studio/src/components/MarketingStudio.jsx
index 6c61e74b2..8143127eb 100644
--- a/packages/studio/src/components/MarketingStudio.jsx
+++ b/packages/studio/src/components/MarketingStudio.jsx
@@ -3,6 +3,9 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import { uploadFile, generateMarketingStudioAd } from "../muapi.js";
 import { scopedPersistKey, migrateLegacyPersistKey } from "../persistKey.js";
+import MobileGenerationActions, {
+  GenerationCopyButtons,
+} from "./MobileGenerationActions.jsx";
 import {
   PROMPT_CONTROL_LABEL_CLASS,
   PromptAspectRatioIcon,
@@ -268,7 +271,16 @@ function SimpleDropdown({ isOpen, title, options, selected, onSelect, onClose })
 
 // ── Main Component ───────────────────────────────────────────────────────────
 
-export default function MarketingStudio({ apiKey, droppedFiles, onFilesHandled, onGenerationComplete, onGenerationError, historyItems }) {
+export default function MarketingStudio({
+  apiKey,
+  droppedFiles,
+  onFilesHandled,
+  onGenerationStart,
+  onGenerationEnd,
+  onGenerationComplete,
+  onGenerationError,
+  historyItems,
+}) {
   const LEGACY_PERSIST_KEY = "hg_marketing_studio_persistent";
   const PERSIST_KEY = scopedPersistKey(LEGACY_PERSIST_KEY, apiKey);
   useEffect(() => {
@@ -372,6 +384,7 @@ export default function MarketingStudio({ apiKey, droppedFiles, onFilesHandled,
     if (!prompt.trim()) return alert("Please enter an ad script.");
     if (!productImage) return alert("Please upload a product image.");
 
+    onGenerationStart?.();
     setIsGenerating(true);
     try {
       const result = await generateMarketingStudioAd(apiKey, {
@@ -401,6 +414,7 @@ export default function MarketingStudio({ apiKey, droppedFiles, onFilesHandled,
       onGenerationError?.(err.message?.slice(0, 120) || "Marketing generation failed");
     } finally {
       setIsGenerating(false);
+      onGenerationEnd?.();
     }
   };
 
@@ -415,32 +429,23 @@ export default function MarketingStudio({ apiKey, droppedFiles, onFilesHandled,
         {history.length > 0 ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full pt-4 animate-fade-in-up">
             {history.map(entry => (
-              <div key={entry.id} className="relative group rounded-lg overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-primary/50 transition-all duration-300 flex flex-col">
+              <div
+                key={entry.id}
+                onClick={() => setFullscreenUrl(entry.url)}
+                className="relative group rounded-lg overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-primary/50 transition-all duration-300 flex flex-col cursor-pointer"
+              >
                 <video 
                   src={entry.url} 
-                  className="w-full aspect-video object-cover cursor-pointer hover:opacity-80 transition-opacity" 
-                  onClick={() => setFullscreenUrl(entry.url)}
+                  className="w-full aspect-video object-cover hover:opacity-80 transition-opacity" 
                   muted loop onMouseOver={e => e.target.play()} onMouseOut={e => { e.target.pause(); e.target.currentTime = 0; }}
                 />
                 
                 {/* Actions Overlay */}
-                <div className="absolute top-2 right-2 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                   <button
-                    type="button"
-                    title="Fullscreen"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setFullscreenUrl(entry.url);
-                    }}
-                    className="p-2 bg-black/60 backdrop-blur-md rounded-full text-white hover:bg-primary hover:text-black transition-all border border-white/10"
-                   >
-                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                       <polyline points="15 3 21 3 21 9" />
-                       <polyline points="9 21 3 21 3 15" />
-                       <line x1="21" y1="3" x2="14" y2="10" />
-                       <line x1="3" y1="21" x2="10" y2="14" />
-                     </svg>
-                   </button>
+                <div className="absolute top-2 right-2 hidden md:flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <GenerationCopyButtons
+                    prompt={entry.prompt}
+                    onCopyError={onGenerationError}
+                  />
                    <button
                     onClick={(e) => { e.stopPropagation(); downloadFile(entry.url, `marketing-ad-${entry.id}.mp4`); }}
                     className="p-2 bg-black/60 backdrop-blur-md rounded-full text-white hover:bg-primary hover:text-black transition-all border border-white/10"
@@ -469,8 +474,34 @@ export default function MarketingStudio({ apiKey, droppedFiles, onFilesHandled,
                       <line x1="10" y1="11" x2="10" y2="17" />
                       <line x1="14" y1="11" x2="14" y2="17" />
                     </svg>
-                  </button>
+                   </button>
                 </div>
+                <MobileGenerationActions
+                  prompt={entry.prompt}
+                  onCopyError={onGenerationError}
+                  actions={[
+                    {
+                      kind: "download",
+                      label: "Download",
+                      onSelect: () =>
+                        downloadFile(entry.url, `marketing-ad-${entry.id}.mp4`),
+                    },
+                    {
+                      kind: "delete",
+                      label: "Delete",
+                      danger: true,
+                      onSelect: () => {
+                        if (confirm("Are you sure you want to delete this generated item?")) {
+                          if (!historyItems) {
+                            setLocalHistory((prev) =>
+                              prev.filter((item) => item.id !== entry.id),
+                            );
+                          }
+                        }
+                      },
+                    },
+                  ]}
+                />
 
                 <div className="p-3 bg-black/80 backdrop-blur-sm border-t border-white/5 flex items-center justify-between gap-2">
                   <div className="flex items-center gap-2">
@@ -481,21 +512,6 @@ export default function MarketingStudio({ apiKey, droppedFiles, onFilesHandled,
                       <span className="text-[9px] text-white/40 font-bold">{entry.format}</span>
                     )}
                   </div>
-                  {entry.prompt && (
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        navigator.clipboard.writeText(entry.prompt);
-                        const btn = e.currentTarget;
-                        btn.innerText = "Copied!";
-                        setTimeout(() => { btn.innerText = "Copy Prompt"; }, 2000);
-                      }}
-                      className="px-2 py-1 bg-white/5 hover:bg-primary/20 hover:text-primary rounded text-[10px] font-medium text-white/70 transition-all border border-white/10"
-                    >
-                      Copy Prompt
-                    </button>
-                  )}
                 </div>
               </div>
             ))}
diff --git a/packages/studio/src/components/MobileGenerationActions.jsx b/packages/studio/src/components/MobileGenerationActions.jsx
new file mode 100644
index 000000000..136ae6b89
--- /dev/null
+++ b/packages/studio/src/components/MobileGenerationActions.jsx
@@ -0,0 +1,375 @@
+"use client";
+
+import { useState } from "react";
+
+async function getClipboardPngBlob(url) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Image request failed with status ${response.status}.`);
+  }
+
+  const sourceBlob = await response.blob();
+  if (sourceBlob.type === "image/png") return sourceBlob;
+
+  const objectUrl = URL.createObjectURL(sourceBlob);
+  try {
+    const image = await new Promise((resolve, reject) => {
+      const element = new Image();
+      element.onload = () => resolve(element);
+      element.onerror = () => reject(new Error("Could not decode the image."));
+      element.src = objectUrl;
+    });
+
+    const canvas = document.createElement("canvas");
+    canvas.width = image.naturalWidth;
+    canvas.height = image.naturalHeight;
+
+    const context = canvas.getContext("2d");
+    if (!context) {
+      throw new Error("Could not create an image clipboard canvas.");
+    }
+
+    context.drawImage(image, 0, 0);
+    return await new Promise((resolve, reject) => {
+      canvas.toBlob(
+        (blob) =>
+          blob
+            ? resolve(blob)
+            : reject(new Error("Could not convert the image to PNG.")),
+        "image/png",
+      );
+    });
+  } finally {
+    URL.revokeObjectURL(objectUrl);
+  }
+}
+
+async function copyPrompt(prompt) {
+  if (!prompt) return;
+  await navigator.clipboard.writeText(prompt);
+}
+
+async function copyImage(url) {
+  if (!url) return;
+  if (
+    !window.isSecureContext ||
+    !navigator.clipboard?.write ||
+    typeof window.ClipboardItem === "undefined"
+  ) {
+    throw new Error("Image clipboard access requires HTTPS or localhost.");
+  }
+
+  await navigator.clipboard.write([
+    new window.ClipboardItem({
+      "image/png": getClipboardPngBlob(url),
+    }),
+  ]);
+}
+
+export function CopyContentIcon({ kind, size = 19 }) {
+  const isText = kind === "text";
+
+  if (!isText) {
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M6 5V4.5A2.5 2.5 0 018.5 2H19a3 3 0 013 3v10.5a2.5 2.5 0 01-2.5 2.5H19" opacity="0.65" />
+        <rect x="2" y="6" width="17" height="16" rx="2.5" strokeWidth="2.2" />
+        <circle cx="6.5" cy="10.5" r="1.25" />
+        <path d="M3.5 19l4.2-4.4 3.1 3.1 2.4-2.5 4.3 4.2" strokeWidth="2.2" />
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M2.5 3.5h13" strokeWidth="2.7" />
+      <path d="M9 3.5v14" strokeWidth="2.7" />
+      <path
+        d="M19 15.25V14.2A1.2 1.2 0 0017.8 13h-3.6a1.2 1.2 0 00-1.2 1.2v3.6a1.2 1.2 0 001.2 1.2h1.05"
+        strokeWidth="1.6"
+      />
+      <rect x="15.25" y="15.25" width="6.25" height="6.25" rx="1.15" strokeWidth="1.6" />
+    </svg>
+  );
+}
+
+function CopiedIcon({ size = 15 }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M5 12l4 4L19 6" />
+    </svg>
+  );
+}
+
+export function GenerationCopyButtons({
+  prompt,
+  imageUrl,
+  onCopyError,
+}) {
+  const [copiedKind, setCopiedKind] = useState(null);
+
+  const runCopy = async (event, kind) => {
+    event.stopPropagation();
+
+    try {
+      if (kind === "text") {
+        await copyPrompt(prompt);
+      } else {
+        await copyImage(imageUrl);
+      }
+
+      setCopiedKind(kind);
+      window.setTimeout(() => {
+        setCopiedKind((current) => (current === kind ? null : current));
+      }, 1600);
+    } catch (error) {
+      const contentLabel = kind === "text" ? "the prompt" : "the image";
+      console.error(`Failed to copy ${contentLabel}:`, error);
+      onCopyError?.(
+        kind === "text"
+          ? "Could not copy the prompt to the clipboard."
+          : "Could not copy the image. Image copy requires HTTPS or localhost.",
+      );
+    }
+  };
+
+  return (
+    <>
+      {prompt && (
+        <button
+          type="button"
+          title={copiedKind === "text" ? "Prompt copied" : "Copy prompt"}
+          aria-label={copiedKind === "text" ? "Prompt copied" : "Copy prompt"}
+          onClick={(event) => runCopy(event, "text")}
+          className={`flex h-8 w-8 items-center justify-center rounded-full border border-white/10 bg-black/60 backdrop-blur-md transition-all hover:bg-[#22d3ee] hover:text-black ${
+            copiedKind === "text" ? "text-[#22d3ee]" : "text-white"
+          }`}
+        >
+          {copiedKind === "text" ? (
+            <CopiedIcon />
+          ) : (
+            <CopyContentIcon kind="text" size={17} />
+          )}
+        </button>
+      )}
+      {imageUrl && (
+        <button
+          type="button"
+          title={copiedKind === "image" ? "Image copied" : "Copy image"}
+          aria-label={copiedKind === "image" ? "Image copied" : "Copy image"}
+          onClick={(event) => runCopy(event, "image")}
+          className={`flex h-8 w-8 items-center justify-center rounded-full border border-white/10 bg-black/60 backdrop-blur-md transition-all hover:bg-[#22d3ee] hover:text-black ${
+            copiedKind === "image" ? "text-[#22d3ee]" : "text-white"
+          }`}
+        >
+          {copiedKind === "image" ? (
+            <CopiedIcon />
+          ) : (
+            <CopyContentIcon kind="image" size={17} />
+          )}
+        </button>
+      )}
+    </>
+  );
+}
+
+function ActionIcon({ kind }) {
+  if (kind === "text") {
+    return <CopyContentIcon kind="text" />;
+  }
+
+  if (kind === "image") {
+    return <CopyContentIcon kind="image" />;
+  }
+
+  if (kind === "download") {
+    return (
+      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+        <path d="M7 10l5 5 5-5M12 15V3" />
+      </svg>
+    );
+  }
+
+  if (kind === "delete") {
+    return (
+      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" />
+        <path d="M10 11v5M14 11v5" />
+      </svg>
+    );
+  }
+
+  if (kind === "extend") {
+    return (
+      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M5 12h14M12 5l7 7-7 7" />
+      </svg>
+    );
+  }
+
+  if (kind === "remix") {
+    return (
+      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M17 2l4 4-4 4" />
+        <path d="M3 11V9a3 3 0 013-3h15M7 22l-4-4 4-4" />
+        <path d="M21 13v2a3 3 0 01-3 3H3" />
+      </svg>
+    );
+  }
+
+  if (kind === "copy") {
+    return (
+      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <rect x="9" y="9" width="11" height="11" rx="2" />
+        <path d="M15 9V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7a2 2 0 002 2h3" />
+      </svg>
+    );
+  }
+
+  return (
+    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 8v4l3 2" />
+    </svg>
+  );
+}
+
+export default function MobileGenerationActions({
+  actions = [],
+  prompt,
+  imageUrl,
+  onCopyError,
+}) {
+  const [open, setOpen] = useState(false);
+  const copyActions = [
+    prompt
+      ? {
+          kind: "text",
+          label: "Copy prompt",
+          onSelect: async () => {
+            try {
+              await copyPrompt(prompt);
+            } catch (error) {
+              console.error("Failed to copy the prompt:", error);
+              onCopyError?.("Could not copy the prompt to the clipboard.");
+            }
+          },
+        }
+      : null,
+    imageUrl
+      ? {
+          kind: "image",
+          label: "Copy image",
+          onSelect: async () => {
+            try {
+              await copyImage(imageUrl);
+            } catch (error) {
+              console.error("Failed to copy the image:", error);
+              onCopyError?.(
+                "Could not copy the image. Image copy requires HTTPS or localhost.",
+              );
+            }
+          },
+        }
+      : null,
+  ];
+  const availableActions = [...copyActions, ...actions].filter(Boolean);
+
+  if (availableActions.length === 0) return null;
+
+  const stopCardClick = (event) => {
+    event.stopPropagation();
+  };
+
+  const runAction = (event, action) => {
+    event.stopPropagation();
+    setOpen(false);
+    action.onSelect?.();
+  };
+
+  return (
+    <div className="absolute right-2 top-2 z-40 md:hidden" onClick={stopCardClick}>
+      {open && (
+        <button
+          type="button"
+          aria-label="Close actions"
+          className="fixed inset-0 z-40 cursor-default bg-transparent"
+          onClick={(event) => {
+            event.stopPropagation();
+            setOpen(false);
+          }}
+        />
+      )}
+
+      <button
+        type="button"
+        aria-label="Generation actions"
+        aria-expanded={open}
+        onClick={(event) => {
+          event.stopPropagation();
+          setOpen((current) => !current);
+        }}
+        className="relative z-50 flex h-11 w-11 items-center justify-center rounded-full border border-white/15 bg-black/70 text-white shadow-lg backdrop-blur-md active:scale-95"
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <circle cx="5" cy="12" r="1.7" />
+          <circle cx="12" cy="12" r="1.7" />
+          <circle cx="19" cy="12" r="1.7" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-12 z-50 min-w-[178px] overflow-hidden rounded-xl border border-white/15 bg-[#151515]/95 p-1.5 shadow-2xl backdrop-blur-xl">
+          {availableActions.map((action) => (
+            <button
+              key={`${action.kind}-${action.label}`}
+              type="button"
+              onClick={(event) => runAction(event, action)}
+              className={`flex min-h-11 w-full items-center gap-3 rounded-lg px-3 text-left text-sm font-semibold transition-colors ${
+                action.danger
+                  ? "text-red-400 hover:bg-red-500/15 active:bg-red-500/20"
+                  : "text-white hover:bg-white/10 active:bg-white/15"
+              }`}
+            >
+              <span className="flex h-6 w-6 items-center justify-center">
+                <ActionIcon kind={action.kind} />
+              </span>
+              <span>{action.label}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/studio/src/components/RecastStudio.jsx b/packages/studio/src/components/RecastStudio.jsx
index 45930b1f1..1f810372d 100644
--- a/packages/studio/src/components/RecastStudio.jsx
+++ b/packages/studio/src/components/RecastStudio.jsx
@@ -5,6 +5,9 @@ import toast, { Toaster } from "react-hot-toast";
 import { processRecast, uploadFile } from "../muapi.js";
 import { formatErrorMessage } from "../utils/formatError.js";
 import { scopedPersistKey, migrateLegacyPersistKey } from "../persistKey.js";
+import MobileGenerationActions, {
+  GenerationCopyButtons,
+} from "./MobileGenerationActions.jsx";
 import {
   recastModels,
   getRecastModelById,
@@ -407,6 +410,8 @@ const ImageIcon = ({
 // ---------------------------------------------------------------------------
 export default function RecastStudio({
   apiKey,
+  onGenerationStart,
+  onGenerationEnd,
   onGenerationComplete,
   onGenerationError,
   historyItems,
@@ -715,6 +720,7 @@ export default function RecastStudio({
       return;
     }
 
+    onGenerationStart?.();
     setIsGenerating(true);
     setGenerateError(null);
 
@@ -765,10 +771,11 @@ export default function RecastStudio({
     } catch (e) {
       console.error("[RecastStudio]", e);
       const errMsg = formatErrorMessage(e, "Body swap generation failed");
-      toast.error(errMsg);
-      onGenerationError?.(errMsg);
+      if (onGenerationError) onGenerationError(errMsg);
+      else toast.error(errMsg);
     } finally {
       setIsGenerating(false);
+      onGenerationEnd?.();
     }
   };
 
@@ -786,12 +793,12 @@ export default function RecastStudio({
             {history.map((entry, idx) => (
               <div
                 key={entry.id || idx}
-                className="relative group rounded-2xl overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-primary/50 transition-all duration-300 flex flex-col"
+                className="relative group rounded-2xl overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-primary/50 transition-all duration-300 flex flex-col cursor-pointer"
+                onClick={() => setFullscreenUrl(entry.url)}
               >
                 <video
                   src={entry.url}
-                  className="w-full aspect-video object-cover bg-black/40 cursor-pointer hover:opacity-80 transition-opacity"
-                  onClick={() => setFullscreenUrl(entry.url)}
+                  className="w-full aspect-video object-cover bg-black/40 hover:opacity-80 transition-opacity"
                   controls={false}
                   loop
                   muted
@@ -804,23 +811,11 @@ export default function RecastStudio({
                 />
 
                 {/* Overlay actions */}
-                <div className="absolute top-2 right-2 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                  <button
-                    type="button"
-                    title="Fullscreen"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setFullscreenUrl(entry.url);
-                    }}
-                    className="p-2 bg-black/60 backdrop-blur-md rounded-full text-white hover:bg-primary hover:text-black transition-all border border-white/10"
-                  >
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                      <polyline points="15 3 21 3 21 9" />
-                      <polyline points="9 21 3 21 3 15" />
-                      <line x1="21" y1="3" x2="14" y2="10" />
-                      <line x1="3" y1="21" x2="10" y2="14" />
-                    </svg>
-                  </button>
+                <div className="absolute top-2 right-2 hidden md:flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <GenerationCopyButtons
+                    prompt={entry.prompt}
+                    onCopyError={onGenerationError}
+                  />
                   <button
                     type="button"
                     title="Download"
@@ -853,6 +848,28 @@ export default function RecastStudio({
                     </svg>
                   </button>
                 </div>
+                <MobileGenerationActions
+                  prompt={entry.prompt}
+                  onCopyError={onGenerationError}
+                  actions={[
+                    {
+                      kind: "download",
+                      label: "Download",
+                      onSelect: () =>
+                        downloadFile(entry.url, `bodyswap-${entry.id || idx}.mp4`),
+                    },
+                    {
+                      kind: "delete",
+                      label: "Delete",
+                      danger: true,
+                      onSelect: () => {
+                        if (confirm("Are you sure you want to delete this generated item?")) {
+                          setInternalHistory((prev) => prev.filter((_, i) => i !== idx));
+                        }
+                      },
+                    },
+                  ]}
+                />
 
                 {/* Details */}
                 <div className="p-3 bg-black/80 backdrop-blur-sm border-t border-white/5 flex-1 flex flex-col justify-between gap-2">
@@ -865,22 +882,6 @@ export default function RecastStudio({
                     <span className="text-[10px] font-bold text-primary px-2 py-0.5 bg-primary/10 rounded border border-primary/20 whitespace-nowrap">
                       Body Swap
                     </span>
-                    {entry.prompt && (
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          navigator.clipboard.writeText(entry.prompt);
-                          const btn = e.currentTarget;
-                          btn.innerText = "Copied!";
-                          setTimeout(() => { btn.innerText = "Copy"; }, 2000);
-                        }}
-                        className="px-2 py-0.5 bg-white/5 hover:bg-primary/20 hover:text-primary rounded text-[10px] font-medium text-white/70 transition-all border border-white/10"
-                        title="Copy prompt"
-                      >
-                        Copy Prompt
-                      </button>
-                    )}
                   </div>
                 </div>
               </div>
diff --git a/packages/studio/src/components/VibeMotionStudio.jsx b/packages/studio/src/components/VibeMotionStudio.jsx
index 242504b6f..11a6c2f0e 100644
--- a/packages/studio/src/components/VibeMotionStudio.jsx
+++ b/packages/studio/src/components/VibeMotionStudio.jsx
@@ -5,6 +5,9 @@ import toast, { Toaster } from "react-hot-toast";
 import { runMotionGraphics, runMotionGraphicsEdit } from "../muapi.js";
 import { formatErrorMessage } from "../utils/formatError.js";
 import { scopedPersistKey, migrateLegacyPersistKey } from "../persistKey.js";
+import MobileGenerationActions, {
+  GenerationCopyButtons,
+} from "./MobileGenerationActions.jsx";
 import {
   PROMPT_CONTROL_LABEL_CLASS,
   PromptAspectRatioIcon,
@@ -65,7 +68,13 @@ function DropdownItem({ label, selected, onClick }) {
 }
 
 // ── Main Component ────────────────────────────────────────────────────────────
-export default function VibeMotionStudio({ apiKey, onGenerationComplete, onGenerationError }) {
+export default function VibeMotionStudio({
+  apiKey,
+  onGenerationStart,
+  onGenerationEnd,
+  onGenerationComplete,
+  onGenerationError,
+}) {
   const LEGACY_PERSIST_KEY = "hg_vibe_motion_studio_persistent";
   const PERSIST_KEY = scopedPersistKey(LEGACY_PERSIST_KEY, apiKey);
   useEffect(() => {
@@ -140,6 +149,7 @@ export default function VibeMotionStudio({ apiKey, onGenerationComplete, onGener
   // ── Generate ──────────────────────────────────────────────────────────────
   const handleGenerate = useCallback(async () => {
     if (!prompt.trim() || generating) return;
+    onGenerationStart?.();
     setGenerating(true);
     setGenerateError(null);
     startTimer();
@@ -193,20 +203,35 @@ export default function VibeMotionStudio({ apiKey, onGenerationComplete, onGener
       if (isStaleEdit) {
         console.warn("[VibeMotionStudio] Remix unavailable:", raw.slice(0, 120));
         const msg = "This generation can't be remixed — the animation code wasn't saved server-side. Generate a new motion graphic first, then remix that result.";
-        toast.error(msg);
+        if (onGenerationError) onGenerationError(msg);
+        else toast.error(msg);
         setEditMode(false);
         setEditSourceId(null);
       } else {
         console.error("[VibeMotionStudio]", err);
         const errMsg = formatErrorMessage(raw || err, "Vibe Motion generation failed");
-        toast.error(errMsg);
-        onGenerationError?.(errMsg);
+        if (onGenerationError) onGenerationError(errMsg);
+        else toast.error(errMsg);
       }
     } finally {
       setGenerating(false);
       stopTimer();
+      onGenerationEnd?.();
     }
-  }, [apiKey, prompt, editMode, editSourceId, aspectRatio, duration, history, saveHistory]);
+  }, [
+    apiKey,
+    prompt,
+    editMode,
+    editSourceId,
+    aspectRatio,
+    duration,
+    history,
+    saveHistory,
+    onGenerationComplete,
+    onGenerationEnd,
+    onGenerationError,
+    onGenerationStart,
+  ]);
 
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) handleGenerate();
@@ -285,13 +310,13 @@ export default function VibeMotionStudio({ apiKey, onGenerationComplete, onGener
             {history.map((entry, idx) => (
               <div
                 key={entry.id || idx}
-                className="relative group rounded overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-primary/50 transition-all duration-300 flex flex-col"
+                className="relative group rounded overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-primary/50 transition-all duration-300 flex flex-col cursor-pointer"
+                onClick={() => setFullscreenUrl(entry.url)}
               >
                 {/* Video thumbnail */}
                 <video
                   src={entry.url}
-                  className="w-full aspect-video object-cover bg-black/40 cursor-pointer hover:opacity-80 transition-opacity"
-                  onClick={() => setFullscreenUrl(entry.url)}
+                  className="w-full aspect-video object-cover bg-black/40 hover:opacity-80 transition-opacity"
                   controls={false}
                   loop
                   muted
@@ -310,20 +335,11 @@ export default function VibeMotionStudio({ apiKey, onGenerationComplete, onGener
                 </div>
 
                 {/* ── Hover overlay actions ── */}
-                <div className="absolute top-2 right-2 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                  <button
-                    type="button"
-                    title="Fullscreen"
-                    onClick={(e) => { e.stopPropagation(); setFullscreenUrl(entry.url); }}
-                    className="p-2 bg-black/60 backdrop-blur-md rounded-full text-white hover:bg-primary hover:text-black transition-all border border-white/10"
-                  >
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                      <polyline points="15 3 21 3 21 9" />
-                      <polyline points="9 21 3 21 3 15" />
-                      <line x1="21" y1="3" x2="14" y2="10" />
-                      <line x1="3" y1="21" x2="10" y2="14" />
-                    </svg>
-                  </button>
+                <div className="absolute top-2 right-2 hidden md:flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <GenerationCopyButtons
+                    prompt={entry.prompt}
+                    onCopyError={onGenerationError}
+                  />
                   <button
                     type="button"
                     title="Download"
@@ -384,6 +400,39 @@ export default function VibeMotionStudio({ apiKey, onGenerationComplete, onGener
                     </svg>
                   </button>
                 </div>
+                <MobileGenerationActions
+                  prompt={entry.prompt}
+                  onCopyError={onGenerationError}
+                  actions={[
+                    {
+                      kind: "download",
+                      label: "Download",
+                      onSelect: () =>
+                        downloadFile(entry.url, `motion-${entry.id || idx}.mp4`),
+                    },
+                    entry.requestId &&
+                      entry.canEdit !== false && {
+                        kind: "remix",
+                        label: "Remix",
+                        onSelect: () => {
+                          setEditMode(true);
+                          setEditSourceId(entry.requestId);
+                          setPrompt("");
+                          setTimeout(() => textareaRef.current?.focus(), 50);
+                        },
+                      },
+                    {
+                      kind: "delete",
+                      label: "Delete",
+                      danger: true,
+                      onSelect: () => {
+                        if (confirm("Are you sure you want to delete this generated item?")) {
+                          setHistory((prev) => prev.filter((_, i) => i !== idx));
+                        }
+                      },
+                    },
+                  ]}
+                />
 
                 {/* ── Card footer: prompt + metadata ── */}
                 <div className="p-3 bg-black/80 backdrop-blur-sm border-t border-white/5 flex-1 flex flex-col justify-between gap-2">
@@ -404,22 +453,6 @@ export default function VibeMotionStudio({ apiKey, onGenerationComplete, onGener
                         )}
                       </div>
                     </div>
-                    {entry.prompt && (
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          navigator.clipboard.writeText(entry.prompt);
-                          const btn = e.currentTarget;
-                          btn.innerText = "Copied!";
-                          setTimeout(() => { btn.innerText = "Copy"; }, 2000);
-                        }}
-                        className="px-2 py-0.5 bg-white/5 hover:bg-primary/20 hover:text-primary rounded text-[10px] font-medium text-white/70 transition-all border border-white/10"
-                        title="Copy prompt"
-                      >
-                        Copy Prompt
-                      </button>
-                    )}
                   </div>
                 </div>
               </div>
diff --git a/packages/studio/src/components/VideoStudio.jsx b/packages/studio/src/components/VideoStudio.jsx
index c1b55c69a..dd4770087 100644
--- a/packages/studio/src/components/VideoStudio.jsx
+++ b/packages/studio/src/components/VideoStudio.jsx
@@ -6,6 +6,9 @@ import { generateVideo, generateI2V, processV2V, uploadFile } from "../muapi.js"
 import { formatErrorMessage } from "../utils/formatError.js";
 import { scopedPersistKey, migrateLegacyPersistKey } from "../persistKey.js";
 import DrawModal from "./DrawModal.jsx";
+import MobileGenerationActions, {
+  GenerationCopyButtons,
+} from "./MobileGenerationActions.jsx";
 import {
   t2vModels,
   i2vModels,
@@ -404,6 +407,8 @@ function ModelDropdown({ imageMode, selectedModel, onSelect, onClose }) {
 
 export default function VideoStudio({
   apiKey,
+  onGenerationStart,
+  onGenerationEnd,
   onGenerationComplete,
   onGenerationError,
   historyItems,
@@ -1099,6 +1104,7 @@ export default function VideoStudio({
       }
     }
 
+    onGenerationStart?.();
     setGenerating(true);
     setGenerateError(null);
 
@@ -1256,10 +1262,11 @@ export default function VideoStudio({
       hadError = true;
       console.error("[VideoStudio]", e);
       const errMsg = formatErrorMessage(e, "Video generation failed");
-      toast.error(errMsg);
-      onGenerationError?.(errMsg);
+      if (onGenerationError) onGenerationError(errMsg);
+      else toast.error(errMsg);
     } finally {
       setGenerating(false);
+      onGenerationEnd?.();
     }
   }, [
     apiKey,
@@ -1282,6 +1289,9 @@ export default function VideoStudio({
     addToLocalHistory,
     showVideoInCanvas,
     onGenerationComplete,
+    onGenerationEnd,
+    onGenerationError,
+    onGenerationStart,
   ]);
 
   // ── reset to prompt bar ───────────────────────────────────────────────────
@@ -1361,12 +1371,12 @@ export default function VideoStudio({
               return (
                 <div
                   key={entry.id || idx}
-                  className="relative group rounded-lg overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-primary/50 transition-all duration-300 flex flex-col"
+                  className="relative group rounded-lg overflow-hidden border border-white/10 bg-[#0a0a0a] shadow-xl hover:border-primary/50 transition-all duration-300 flex flex-col cursor-pointer"
+                  onClick={() => setFullscreenUrl(entry.url)}
                 >
                   <video
                     src={entry.url}
-                    className="w-full aspect-video object-cover bg-black/40 cursor-pointer hover:opacity-80 transition-opacity"
-                    onClick={() => setFullscreenUrl(entry.url)}
+                    className="w-full aspect-video object-cover bg-black/40 hover:opacity-80 transition-opacity"
                     controls={false}
                     loop
                     muted
@@ -1379,23 +1389,11 @@ export default function VideoStudio({
                   />
                   
                   {/* Overlay actions */}
-                  <div className="absolute top-2 right-2 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                    <button
-                      type="button"
-                      title="Fullscreen"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setFullscreenUrl(entry.url);
-                      }}
-                      className="p-2 bg-black/60 backdrop-blur-md rounded-full text-white hover:bg-primary hover:text-black transition-all border border-white/10"
-                    >
-                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                        <polyline points="15 3 21 3 21 9" />
-                        <polyline points="9 21 3 21 3 15" />
-                        <line x1="21" y1="3" x2="14" y2="10" />
-                        <line x1="3" y1="21" x2="10" y2="14" />
-                      </svg>
-                    </button>
+                  <div className="absolute top-2 right-2 hidden md:flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <GenerationCopyButtons
+                      prompt={entry.prompt}
+                      onCopyError={onGenerationError}
+                    />
                     <button
                       type="button"
                       title="Download"
@@ -1444,6 +1442,36 @@ export default function VideoStudio({
                       </svg>
                     </button>
                   </div>
+                  <MobileGenerationActions
+                    prompt={entry.prompt}
+                    onCopyError={onGenerationError}
+                    actions={[
+                      {
+                        kind: "download",
+                        label: "Download",
+                        onSelect: () =>
+                          downloadFile(entry.url, `video-${entry.id || idx}.mp4`),
+                      },
+                      isSeedance2 && {
+                        kind: "extend",
+                        label: "Extend",
+                        onSelect: () => {
+                          setLastGenerationId(entry.id);
+                          handleExtend();
+                        },
+                      },
+                      {
+                        kind: "delete",
+                        label: "Delete",
+                        danger: true,
+                        onSelect: () => {
+                          if (confirm("Are you sure you want to delete this generated item?")) {
+                            setLocalHistory((prev) => prev.filter((_, i) => i !== idx));
+                          }
+                        },
+                      },
+                    ]}
+                  />
 
                   {/* Prompt & Details */}
                   <div className="p-3 bg-black/80 backdrop-blur-sm border-t border-white/5 flex-1 flex flex-col justify-between gap-2">
@@ -1464,22 +1492,6 @@ export default function VideoStudio({
                           )}
                         </div>
                       </div>
-                      {entry.prompt && (
-                        <button
-                          type="button"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            navigator.clipboard.writeText(entry.prompt);
-                            const btn = e.currentTarget;
-                            btn.innerText = "Copied!";
-                            setTimeout(() => { btn.innerText = "Copy"; }, 2000);
-                          }}
-                          className="px-2 py-0.5 bg-white/5 hover:bg-primary/20 hover:text-primary rounded text-[10px] font-medium text-white/70 transition-all border border-white/10"
-                          title="Copy prompt"
-                        >
-                          Copy Prompt
-                        </button>
-                      )}
                     </div>
                   </div>
                 </div>
diff --git a/packages/studio/src/components/WorkflowStudio.jsx b/packages/studio/src/components/WorkflowStudio.jsx
index 17f618932..82917fb78 100644
--- a/packages/studio/src/components/WorkflowStudio.jsx
+++ b/packages/studio/src/components/WorkflowStudio.jsx
@@ -125,7 +125,15 @@ function WorkflowCard({ workflow, onClick, activeTab, onRename, onDelete }) {
   );
 }
 
-export default function WorkflowStudio({ apiKey, isHeaderVisible = true, onToggleHeader }) {
+export default function WorkflowStudio({
+  apiKey,
+  isHeaderVisible = true,
+  onToggleHeader,
+  onGenerationStart,
+  onGenerationEnd,
+  onGenerationComplete,
+  onGenerationError,
+}) {
   const params = useParams();
   const router = useRouter();
   const slug = params?.slug || [];
@@ -398,6 +406,7 @@ export default function WorkflowStudio({ apiKey, isHeaderVisible = true, onToggl
     e.preventDefault();
     if (isExecuting) return;
 
+    onGenerationStart?.();
     setIsExecuting(true);
     setError(null);
     setResult(null);
@@ -414,11 +423,18 @@ export default function WorkflowStudio({ apiKey, isHeaderVisible = true, onToggl
 
       const data = await executeWorkflow(apiKey, selectedWorkflow.id, inputs);
       setResult(data);
+      onGenerationComplete?.({
+        url: data?.url || data?.output?.url || data?.outputs?.[0]?.url || null,
+        type: "workflow",
+      });
     } catch (err) {
       console.error("Execution failed:", err);
-      setError(err.message || "Execution failed");
+      const message = err.message || "Execution failed";
+      setError(message);
+      onGenerationError?.(message);
     } finally {
       setIsExecuting(false);
+      onGenerationEnd?.();
     }
   };
 
@@ -815,6 +831,10 @@ export default function WorkflowStudio({ apiKey, isHeaderVisible = true, onToggl
                     // Inject ID to prevent builder from assuming this is a new unsaved flow
                     workflow_id: selectedWorkflow?.id
                   }}
+                  onGenerationStart={onGenerationStart}
+                  onGenerationEnd={onGenerationEnd}
+                  onGenerationComplete={onGenerationComplete}
+                  onGenerationError={onGenerationError}
                 />
               ) : (
                 <div className="absolute inset-0 flex items-center justify-center">
diff --git a/packages/studio/src/components/WorkflowUI.jsx b/packages/studio/src/components/WorkflowUI.jsx
index 39651cee8..b3e73b3c8 100644
--- a/packages/studio/src/components/WorkflowUI.jsx
+++ b/packages/studio/src/components/WorkflowUI.jsx
@@ -6,7 +6,15 @@ import "reactflow/dist/style.css";
 import "react-toastify/dist/ReactToastify.css";
 
 
-const WorkflowUI = ({ workflowId, initialNodeSchemas, initialWorkflowData }) => {
+const WorkflowUI = ({
+  workflowId,
+  initialNodeSchemas,
+  initialWorkflowData,
+  onGenerationStart,
+  onGenerationEnd,
+  onGenerationComplete,
+  onGenerationError,
+}) => {
   useEffect(() => {
     sessionStorage.setItem("fromWorkflowBuilder", "true");
   }, []);
@@ -18,6 +26,10 @@ const WorkflowUI = ({ workflowId, initialNodeSchemas, initialWorkflowData }) =>
         initialNodeSchemas={initialNodeSchemas} 
         initialWorkflowData={initialWorkflowData}
         costType="dollars" 
+        onGenerationStart={onGenerationStart}
+        onGenerationEnd={onGenerationEnd}
+        onGenerationComplete={onGenerationComplete}
+        onGenerationError={onGenerationError}
       />
     </div>
   );