Merge pull request 'ideas' (#2) from ideas into main

Reviewed-on: #2

package-lock.json

@@ -15,7 +15,8 @@
         "primeicons": "^7.0.0",
         "primevue": "^4.5.4",
         "vue": "^3.5.27",
-        "vue-router": "^5.0.1"
+        "vue-router": "^5.0.1",
+        "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.1.18",
@@ -6780,6 +6781,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
+      "license": "MIT"
+    },
     "node_modules/source-map": {
       "version": "0.8.0-beta.0",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
@@ -7812,6 +7819,18 @@
       "integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==",
       "license": "MIT"
     },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "license": "MIT",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",

package.json

@@ -16,7 +16,8 @@
     "primeicons": "^7.0.0",
     "primevue": "^4.5.4",
     "vue": "^3.5.27",
-    "vue-router": "^5.0.1"
+    "vue-router": "^5.0.1",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",

src/components/AppSidebar.vue

@@ -72,11 +72,10 @@ const navItems = computed(() => {
     const items = [
         { path: '/', icon: '🏠', tooltip: 'Home' },
         { path: '/projects', icon: '📂', tooltip: 'Projects' },
-        { path: '/flexible', icon: '🖌️', tooltip: 'Flexible Generation' },
+        { path: '/ideas', icon: '💡', tooltip: 'Ideas' },
-        { path: '/video', icon: '🎬', tooltip: 'Video Generation' },
+        { path: '/flexible', icon: '🖌️', tooltip: 'Flexible' },
         { path: '/albums', icon: '🖼️', tooltip: 'Library' },
-        { path: '/characters', icon: '👥', tooltip: 'Characters' },
+        { path: '/characters', icon: '👥', tooltip: 'Characters' }
-        { path: '/image-to-prompt', icon: '✨', tooltip: 'Image to Prompt' }
     ]
 
     if (authStore.isAdmin()) {

src/router/index.js

@@ -57,16 +57,21 @@ const router = createRouter({
       name: 'flexible',
       component: () => import('../views/FlexibleGenerationView.vue')
     },
-    {
-      path: '/video',
-      name: 'video',
-      component: () => import('../views/VideoGenerationView.vue')
-    },
     {
       path: '/albums',
       name: 'albums',
       component: () => import('../views/AlbumsView.vue')
     },
+    {
+      path: '/ideas',
+      name: 'ideas',
+      component: () => import('../views/IdeasView.vue')
+    },
+    {
+      path: '/ideas/:id',
+      name: 'idea-detail',
+      component: () => import('../views/IdeaDetailView.vue')
+    },
     {
       path: '/projects',
       name: 'projects',

src/services/aiService.js

@@ -66,18 +66,5 @@ export const aiService = {
       linked_assets: linkedAssets
     })
     return response.data
-  },
-
-  // Run video generation task
-  async runVideoGeneration(payload) {
-    const response = await api.post('/generations/video/_run', payload)
-    return response.data
-  },
-
-  // Get video generations history
-  async getVideoGenerations(limit, offset) {
-    const params = { limit, offset, gen_type: 'Video' }
-    const response = await api.get('/generations', { params })
-    return response.data
   }
 }

src/services/ideaService.js

@@ -0,0 +1,12 @@
+import api from './api';
+
+export const ideaService = {
+  getIdeas: (limit = 10, offset = 0) => api.get('/ideas', { params: { limit, offset } }),
+  createIdea: (data) => api.post('/ideas', data),
+  getIdea: (id) => api.get(`/ideas/${id}`),
+  updateIdea: (id, data) => api.put(`/ideas/${id}`, data),
+  deleteIdea: (id) => api.delete(`/ideas/${id}`),
+  addGenerationToIdea: (ideaId, generationId) => api.post(`/ideas/${ideaId}/generations/${generationId}`),
+  removeGenerationFromIdea: (ideaId, generationId) => api.delete(`/ideas/${ideaId}/generations/${generationId}`),
+  getIdeaGenerations: (ideaId, limit = 10, offset = 0) => api.get(`/ideas/${ideaId}/generations`, { params: { limit, offset } })
+};

src/stores/ideas.js

@@ -0,0 +1,161 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { ideaService } from '../services/ideaService';
+
+export const useIdeaStore = defineStore('ideas', () => {
+  const ideas = ref([]);
+  const currentIdea = ref(null);
+  const loading = ref(false);
+  const error = ref(null);
+  const totalIdeas = ref(0);
+
+  async function fetchIdeas(limit = 10, offset = 0) {
+    loading.value = true;
+    error.value = null;
+    try {
+      const response = await ideaService.getIdeas(limit, offset);
+      if (response.data.ideas) {
+          ideas.value = response.data.ideas;
+          totalIdeas.value = response.data.total_count;
+      } else {
+          ideas.value = response.data;
+      }
+    } catch (err) {
+      console.error('Error fetching ideas:', err);
+      error.value = err.response?.data?.detail || 'Failed to fetch ideas';
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function createIdea(data) {
+    loading.value = true;
+    error.value = null;
+    try {
+      await ideaService.createIdea(data);
+      await fetchIdeas(); // Refresh list
+      return true;
+    } catch (err) {
+      console.error('Error creating idea:', err);
+      error.value = err.response?.data?.detail || 'Failed to create idea';
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function fetchIdea(id) {
+    loading.value = true;
+    error.value = null;
+    currentIdea.value = null;
+    try {
+      const response = await ideaService.getIdea(id);
+      currentIdea.value = response.data;
+      return response.data;
+    } catch (err) {
+      console.error('Error fetching idea:', err);
+      error.value = err.response?.data?.detail || 'Failed to fetch idea';
+      return null;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function updateIdea(id, data) {
+      loading.value = true;
+      error.value = null;
+      try {
+          await ideaService.updateIdea(id, data);
+          if (currentIdea.value && currentIdea.value.id === id) {
+              await fetchIdea(id);
+          }
+          await fetchIdeas();
+          return true;
+      } catch (err) {
+          console.error('Error updating idea:', err);
+          error.value = err.response?.data?.detail || 'Failed to update idea';
+          return false;
+      } finally {
+          loading.value = false;
+      }
+  }
+
+  async function deleteIdea(id) {
+    loading.value = true;
+    error.value = null;
+    try {
+      await ideaService.deleteIdea(id);
+      await fetchIdeas(); // Refresh list
+      return true;
+    } catch (err) {
+      console.error('Error deleting idea:', err);
+      error.value = err.response?.data?.detail || 'Failed to delete idea';
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function addGenerationToIdea(ideaId, generationId) {
+    loading.value = true;
+    error.value = null;
+    try {
+      await ideaService.addGenerationToIdea(ideaId, generationId);
+      if (currentIdea.value && currentIdea.value.id === ideaId) {
+          await fetchIdea(ideaId);
+      }
+      return true;
+    } catch (err) {
+      console.error('Error adding generation to idea:', err);
+      error.value = err.response?.data?.detail || 'Failed to add generation to idea';
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function removeGenerationFromIdea(ideaId, generationId) {
+    loading.value = true;
+    error.value = null;
+    try {
+      await ideaService.removeGenerationFromIdea(ideaId, generationId);
+      if (currentIdea.value && currentIdea.value.id === ideaId) {
+          await fetchIdea(ideaId);
+      }
+      return true;
+    } catch (err) {
+      console.error('Error removing generation from idea:', err);
+      error.value = err.response?.data?.detail || 'Failed to remove generation from idea';
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  // Assuming getIdeaGenerations is separate from getIdea
+  async function fetchIdeaGenerations(ideaId, limit = 100, offset = 0) {
+      try {
+          const response = await ideaService.getIdeaGenerations(ideaId, limit, offset);
+          return response;
+      } catch (err) {
+          console.error('Error fetching idea generations:', err);
+          return { data: [] };
+      }
+  }
+
+  return {
+    ideas,
+    currentIdea,
+    loading,
+    error,
+    totalIdeas,
+    fetchIdeas,
+    createIdea,
+    fetchIdea,
+    updateIdea,
+    deleteIdea,
+    addGenerationToIdea,
+    removeGenerationFromIdea,
+    fetchIdeaGenerations
+  };
+});

src/views/AlbumDetailView.vue

@@ -9,7 +9,6 @@ import Skeleton from 'primevue/skeleton'
 import Button from 'primevue/button'
 import ConfirmDialog from 'primevue/confirmdialog'
 import { useConfirm } from 'primevue/useconfirm'
-import Image from 'primevue/image'
 import Dialog from 'primevue/dialog'
 
 const route = useRoute()
@@ -129,6 +128,14 @@ const removeGeneration = (gen) => {
         }
     })
 }
+
+// --- Image Preview ---
+const isImagePreviewVisible = ref(false)
+const previewImage = ref(null)
+const openImagePreview = (url) => {
+    previewImage.value = { url }
+    isImagePreviewVisible.value = true
+}
 </script>
 
 <template>
@@ -183,9 +190,11 @@ const removeGeneration = (gen) => {
                 <div v-for="gen in generations" :key="gen.id"
                     class="glass-panel rounded-xl overflow-hidden group relative transition-all hover:bg-white/5">
 
-                    <div class="aspect-[2/3] w-full bg-slate-800 relative overflow-hidden">
+                    <div class="aspect-[2/3] w-full bg-slate-800 relative overflow-hidden cursor-pointer"
-                        <Image :src="gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true'"
+                        @click="gen.result_list && gen.result_list.length > 0 ? openImagePreview(API_URL + '/assets/' + gen.result_list[0]) : null">
-                            preview class="w-full h-full object-cover" imageClass="w-full h-full object-cover" />
+                        <img v-if="gen.result_list && gen.result_list.length > 0"
+                            :src="gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true'"
+                            class="w-full h-full object-cover" />
 
                         <!-- Overlay Actions -->
                         <div
@@ -230,7 +239,7 @@ const removeGeneration = (gen) => {
                         :class="selectedGenerations.some(g => g.id === gen.id) ? 'border-violet-500 ring-2 ring-violet-500/30' : 'border-transparent hover:border-white/20'">
 
                         <img v-if="gen.result_list && gen.result_list.length > 0"
-                            :src="gen.result_list[0].includes('http') ? gen.result_list[0] : (gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true')"
+                            :src="gen.result_list[0].includes('http') ? gen.result_list[0] : (gen.result || API_URL + `/assets/${gen.result_list[0]}`)"
                             class="w-full h-full object-cover" />
                         <!-- Fallback for no result -->
                         <div v-else class="w-full h-full bg-slate-800 flex items-center justify-center text-slate-500">
@@ -263,6 +272,18 @@ const removeGeneration = (gen) => {
             </template>
         </Dialog>
 
+        <!-- Image Preview Modal -->
+        <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
+            :style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"
+            :pt="{ root: { class: '!bg-transparent !border-none !shadow-none' }, header: { class: '!hidden' }, content: { class: '!bg-transparent !p-0' } }">
+            <div class="relative flex items-center justify-center" @click="isImagePreviewVisible = false">
+                <img v-if="previewImage" :src="previewImage.url"
+                    class="max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl" />
+                <Button icon="pi pi-times" @click="isImagePreviewVisible = false" rounded text
+                    class="!absolute -top-4 -right-4 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" />
+            </div>
+        </Dialog>
+
     </div>
 </template>
 

src/views/CharacterDetailView.vue

@@ -94,6 +94,40 @@ const handleDownloadResults = () => {
     }
 }
 
+const generationCount = ref(1)
+
+const groupedHistoryGenerations = computed(() => {
+    const groups = new Map()
+    const result = []
+    for (const gen of historyGenerations.value) {
+        if (gen.generation_group_id) {
+            if (groups.has(gen.generation_group_id)) {
+                groups.get(gen.generation_group_id).children.push(gen)
+            } else {
+                const group = {
+                    id: gen.generation_group_id,
+                    generation_group_id: gen.generation_group_id,
+                    prompt: gen.prompt,
+                    created_at: gen.created_at,
+                    isGroup: true,
+                    children: [gen],
+                    // Use first child status for group status if needed, or derived
+                    status: gen.status
+                }
+                groups.set(gen.generation_group_id, group)
+                result.push(group)
+            }
+        } else {
+            result.push(gen)
+        }
+    }
+    return result
+})
+
+const hasActiveGeneration = computed(() => {
+    return isGenerating.value || historyGenerations.value.some(g => ['starting', 'processing', 'running'].includes(g.status))
+})
+
 const loadData = async () => {
     loading.value = true
     const charId = route.params.id
@@ -116,6 +150,13 @@ const loadData = async () => {
         if (historyResponse && historyResponse.generations) {
             historyGenerations.value = historyResponse.generations
             historyTotal.value = historyResponse.total_count || 0
+
+            // Resume polling for active generations
+            historyGenerations.value.forEach(gen => {
+                if (['starting', 'processing', 'running'].includes(gen.status)) {
+                    pollGeneration(gen.id)
+                }
+            })
         } else {
             historyGenerations.value = Array.isArray(historyResponse) ? historyResponse : []
             historyTotal.value = historyGenerations.value.length
@@ -158,6 +199,13 @@ const loadHistory = async () => {
         if (response && response.generations) {
             historyGenerations.value = response.generations
             historyTotal.value = response.total_count || 0
+
+            // Resume polling for newly loaded active generations if any
+            historyGenerations.value.forEach(gen => {
+                if (['starting', 'processing', 'running'].includes(gen.status)) {
+                    pollGeneration(gen.id)
+                }
+            })
         } else {
             historyGenerations.value = Array.isArray(response) ? response : []
             historyTotal.value = historyGenerations.value.length
@@ -306,50 +354,79 @@ const onModalAssetsPage = (event) => {
     loadAllAssets()
 }
 
-const pollStatus = async (id) => {
+const pollGeneration = async (id) => {
     let completed = false
-    while (!completed && isGenerating.value) {
+    let attempts = 0
+
+    // Find the generation object in our list to update it specifically
+    // We poll and update the object in historyGenerations
+
+    while (!completed) {
+        // Check if generation is still needed to be polled (e.g. if we navigated away? logic handles this by default)
+        const genIndex = historyGenerations.value.findIndex(g => g.id === id)
+        if (genIndex === -1) {
+            // Maybe it's a new one not yet in history list? 
+            // Logic in handleGenerate adds it first, so it should be there.
+            // If not found, maybe stop polling?
+            if (attempts > 5) return // Stop if keep failing to find it
+        }
+
+        const gen = historyGenerations.value[genIndex]
+
         try {
             const response = await aiService.getGenerationStatus(id)
-            generationStatus.value = response.status
+
-            generationProgress.value = response.progress || 0
+            if (gen) {
+                Object.assign(gen, response)
+                // Update specific legacy ref if this is the latest one user is looking at in the "Creating..." block
+                if (isGenerating.value && generatedResult.value === null) {
+                    generationStatus.value = response.status
+                    generationProgress.value = response.progress || 0
+                }
+            }
 
             if (response.status === 'done') {
                 completed = true
-                generationSuccess.value = true
+                if (isGenerating.value && (!generatedResult.value || generatedResult.value === id)) {
-
+                    // only finish the "generating" blocking state if *all* active ones are done? 
-                // Refresh assets list
+                    // No, simpler: isGenerating tracks the *submission* process mainly, 
-                const assets = await loadAssets()
+                    // but we also use it to show the big spinner.
-
+                    // If we support multiple, we should probably stop showing the big spinner 
-                // Display created assets from the list (without selecting them)
+                    // once submission is done and just show history status.
-                if (response.assets_list && response.assets_list.length > 0) {
+                }
-                    const resultAssets = assets.filter(a => response.assets_list.includes(a.id))
+
-                    generatedResult.value = {
+                // If we want to show the result of the *just finished* one in the big box:
-                        type: 'assets',
+                if (isGenerating.value) {
-                        assets: resultAssets,
+                    // logic for "main" result display
-                        tech_prompt: response.tech_prompt,
-                        execution_time: response.execution_time_seconds,
-                        api_execution_time: response.api_execution_time_seconds,
-                        token_usage: response.token_usage
-                    }
                 }
 
-                loadHistory()
             } else if (response.status === 'failed') {
                 completed = true
-                generationError.value = response.failed_reason || 'Generation failed on server'
+                if (gen) gen.failed_reason = response.failed_reason
-                throw new Error(generationError.value)
             } else {
-                // Wait before next poll
                 await new Promise(resolve => setTimeout(resolve, 2000))
             }
         } catch (e) {
-            console.error('Polling failed', e)
+            console.error(`Polling failed for ${id}`, e)
-            completed = true
+            attempts++
-            isGenerating.value = false
+            if (attempts > 10) {
+                completed = true
+                if (gen) {
+                    gen.status = 'failed'
+                    gen.failed_reason = 'Polling connection lost'
+                }
+            }
+            await new Promise(resolve => setTimeout(resolve, 5000))
         }
     }
-    isGenerating.value = false
+
+    // Check if we can turn off global loading
+    // Actually, let's turn off "isGenerating" immediately after submission success,
+    // and let the history handle the progress. 
+    // BUT user wants to see it in the main slot?
+    // "display 4 copies in one slot in the feed"
+    // "track status of generations after sending"
+    // "block sending next if active"
 }
 
 const restoreGeneration = async (gen) => {
@@ -495,6 +572,7 @@ const handleGenerate = async () => {
     try {
         if (sendToTelegram.value && !telegramId.value) {
             alert("Please enter your Telegram ID")
+            isGenerating.value = false
             return
         }
 
@@ -510,27 +588,55 @@ const handleGenerate = async () => {
             prompt: prompt.value,
             assets_list: selectedAssets.value.map(a => a.id),
             telegram_id: sendToTelegram.value ? telegramId.value : null,
-            use_profile_image: useProfileImage.value
+            use_profile_image: useProfileImage.value,
+            count: generationCount.value
         }
 
         const response = await aiService.runGeneration(payload)
-        // response is expected to have an 'id' for the generation task
+
-        if (response && response.id) {
+        let generations = []
-            pollStatus(response.id)
+        if (response && response.generations) {
+            generations = response.generations
+        } else if (Array.isArray(response)) {
+            generations = response
         } else {
-            // Fallback if it returns data immediately
+            generations = [response]
-            generatedResult.value = response
-            generationSuccess.value = true
-            isGenerating.value = false
         }
+
+        // Add to history and start polling
+        for (const gen of generations) {
+            if (gen && gen.id) {
+                const newGen = {
+                    ...gen,
+                    status: gen.status || 'starting',
+                    created_at: new Date().toISOString()
+                }
+                historyGenerations.value.unshift(newGen)
+                historyTotal.value++
+
+                pollGeneration(gen.id)
+            }
+        }
+
+        // We set isGenerating to false immediately after successful submission
+        // because we want detailed status to be tracked in the history list.
+        // However, if we want to block the UI, hasActiveGeneration will do that.
+        // But for the 'big spinner', if we want to show it, we can keep it for a bit or just rely on history.
+        // User requested: "block next if active".
+        // Let's reset isGenerating so the big spinner goes away, and the user sees the progress in the history list.
+        isGenerating.value = false
         prompt.value = ''
+
+        // Scroll to history?
+        // Maybe open/switch history tab or ensure it is visible?
+        // For now, let's just let the user see it in the history section.
+
     } catch (e) {
         console.error('Generation failed', e)
         isGenerating.value = false
+        generationError.value = e.message || 'Failed to start generation'
     }
 }
-
-
 </script>
 
 <template>
@@ -636,6 +742,19 @@ const handleGenerate = async () => {
 
                                     </div>
 
+                                    <div class="flex flex-col gap-1.5">
+                                        <label
+                                            class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Count</label>
+                                        <div
+                                            class="!flex !w-full !justify-between  items-center  justify-center !bg-slate-900/50 !p-1  gap-1 !rounded-lg !border !border-white/10">
+                                            <div v-for="n in 4" :key="n" @click="generationCount = n"
+                                                class="w-full items-center justify-center justify-items-center !text-center hover:bg-white/5 hover:text-white p-1 hover:rounded-lg cursor-pointer transition-all"
+                                                :class="generationCount === n ? 'bg-white/10 text-white rounded-lg shadow-sm' : 'text-slate-500'">
+                                                <span class="text-[10px] font-bold">{{ n }}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+
                                     <div class="flex flex-col gap-1.5">
                                         <label
                                             class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Description</label>
@@ -712,10 +831,12 @@ const handleGenerate = async () => {
                                         </div>
                                     </div>
 
-                                    <Button :label="isGenerating ? 'Wait...' : `Generate`"
+                                    <Button
-                                        :icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-magic'"
+                                        :label="hasActiveGeneration ? 'Processing...' : (isGenerating ? 'Wait...' : `Generate`)"
-                                        :loading="isGenerating" @click="handleGenerate"
+                                        :icon="hasActiveGeneration || isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-magic'"
-                                        class="w-full py-2 text-[11px] font-bold bg-gradient-to-r from-violet-600 to-cyan-500 border-none rounded shadow transition-all hover:scale-[1.01] active:scale-[0.99]" />
+                                        :loading="hasActiveGeneration || isGenerating" :disabled="hasActiveGeneration"
+                                        @click="handleGenerate"
+                                        class="w-full py-2 text-[11px] font-bold bg-gradient-to-r from-violet-600 to-cyan-500 border-none rounded shadow transition-all hover:scale-[1.01] active:scale-[0.99] disabled:opacity-50 disabled:cursor-not-allowed" />
 
                                     <Message v-if="generationSuccess" severity="success" :closable="true"
                                         @close="generationSuccess = false">
@@ -739,7 +860,7 @@ const handleGenerate = async () => {
                                                 value: { class: '!bg-gradient-to-r !from-violet-600 !to-cyan-500 !transition-all !duration-500' }
                                             }" />
                                         <span class="text-[10px] text-slate-500 font-mono">{{ generationProgress
-                                            }}%</span>
+                                        }}%</span>
                                     </div>
 
                                     <div v-else-if="generationError"
@@ -839,78 +960,130 @@ const handleGenerate = async () => {
                                                 class="!p-1 !w-6 !h-6 text-slate-500" @click="loadHistory" />
                                         </div>
 
-                                        <div v-if="historyGenerations.length === 0"
+                                        <div v-if="groupedHistoryGenerations.length === 0"
                                             class="py-10 text-center text-slate-600 italic text-xs">
                                             No previous generations.
                                         </div>
 
                                         <div v-else
                                             class="flex-1 overflow-y-auto pr-2 custom-scrollbar flex flex-col gap-2">
-                                            <div v-for="gen in historyGenerations" :key="gen.id"
+                                            <div v-for="gen in groupedHistoryGenerations" :key="gen.id"
-                                                @click="restoreGeneration(gen)"
+                                                @click="gen.isGroup ? null : restoreGeneration(gen)"
                                                 class="glass-panel p-2 rounded-lg border border-white/5 flex gap-3 items-start hover:bg-white/10 cursor-pointer transition-colors group">
-                                                <div class="w-12 h-12 rounded bg-black/40 border border-white/10 flex-shrink-0 mt-0.5 relative z-0"
+
-                                                    @mouseenter="onThumbnailEnter($event, API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true')"
+                                                <!-- Grouped (Grid) -->
-                                                    @mouseleave="onThumbnailLeave">
+                                                <div v-if="gen.isGroup" class="w-full">
-                                                    <img v-if="gen.result_list && gen.result_list.length > 0"
+                                                    <div class="flex justify-between items-start mb-1.5">
-                                                        :src="API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'"
+                                                        <div
-                                                        class="w-full h-full object-cover rounded opacity-100" />
+                                                            class="text-[10px] font-bold text-slate-400 bg-white/5 px-1.5 py-0.5 rounded flex items-center gap-1">
-                                                    <div v-else
+                                                            <i class="pi pi-images text-[9px]"></i>
-                                                        class="w-full h-full flex items-center justify-center text-slate-700 overflow-hidden rounded">
+                                                            {{ gen.children.length }} variations
-                                                        <i class="pi pi-image text-lg" />
+                                                        </div>
+                                                        <span class="text-[9px] text-slate-600">{{ new
+                                                            Date(gen.created_at).toLocaleDateString() }}</span>
                                                     </div>
+
+                                                    <div class="grid gap-1.5"
+                                                        :class="gen.children.length > 2 ? 'grid-cols-4' : 'grid-cols-2'">
+                                                        <div v-for="child in gen.children" :key="child.id"
+                                                            class="relative aspect-[9/16] rounded-md overflow-hidden bg-black/30 border border-white/5 group/child"
+                                                            @click.stop="restoreGeneration(child)">
+
+                                                            <img v-if="child.result_list && child.result_list.length > 0"
+                                                                :src="API_URL + '/assets/' + child.result_list[0] + '?thumbnail=true'"
+                                                                class="w-full h-full object-cover hover:scale-105 transition-transform" />
+
+                                                            <div v-else-if="['starting', 'processing', 'running'].includes(child.status)"
+                                                                class="w-full h-full flex flex-col items-center justify-center bg-violet-500/10">
+                                                                <i
+                                                                    class="pi pi-spin pi-spinner text-violet-400 text-xs"></i>
+                                                            </div>
+                                                            <div v-else-if="child.status === 'failed'"
+                                                                class="w-full h-full flex items-center justify-center bg-red-500/10"
+                                                                v-tooltip.bottom="child.failed_reason">
+                                                                <i
+                                                                    class="pi pi-exclamation-circle text-red-500 text-xs"></i>
+                                                            </div>
+
+                                                            <div v-if="child.result_list && child.result_list.length > 0"
+                                                                class="absolute inset-0 bg-black/40 opacity-0 group-hover/child:opacity-100 flex items-center justify-center transition-opacity">
+                                                                <i class="pi pi-eye text-white text-xs"></i>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+
+                                                    <p class="text-[10px] text-slate-400 mt-1.5 px-0.5 truncate">{{
+                                                        gen.prompt }}</p>
                                                 </div>
-                                                <div class="flex-1 min-w-0 flex flex-col items-start gap-0.5">
-                                                    <p
-                                                        class="text-xs text-slate-300 truncate font-medium w-full text-left">
-                                                        {{
-                                                            gen.prompt }}</p>
 
-                                                    <!-- Tech Prompt Preview -->
+                                                <!-- Single -->
-                                                    <p v-if="gen.tech_prompt"
+                                                <div v-else class="flex gap-3 w-full">
-                                                        class="text-[9px] text-slate-500 truncate w-full text-left font-mono opacity-80">
+                                                    <div class="w-12 h-12 rounded bg-black/40 border border-white/10 flex-shrink-0 mt-0.5 relative z-0"
-                                                        {{ gen.tech_prompt }}
+                                                        @mouseenter="gen.result_list && gen.result_list[0] ? onThumbnailEnter($event, API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true') : null"
-                                                    </p>
+                                                        @mouseleave="onThumbnailLeave">
-
+                                                        <img v-if="gen.result_list && gen.result_list.length > 0"
-                                                    <div class="flex items-center gap-2 text-[10px] text-slate-500">
+                                                            :src="API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'"
-                                                        <span>{{ new Date(gen.created_at).toLocaleDateString() }}</span>
+                                                            class="w-full h-full object-cover rounded opacity-100" />
-                                                        <span class="capitalize"
+                                                        <div v-else
-                                                            :class="gen.status === 'done' ? 'text-green-500' : (gen.status === 'failed' ? 'text-red-500' : 'text-amber-500')">{{
+                                                            class="w-full h-full flex items-center justify-center text-slate-700 overflow-hidden rounded">
-                                                                gen.status }}</span>
+                                                            <i class="pi pi-image text-lg" />
-                                                        <i v-if="gen.failed_reason" v-tooltip.right="gen.failed_reason"
+                                                        </div>
-                                                            class="pi pi-exclamation-circle text-red-500"
-                                                            style="font-size: 12px;" />
                                                     </div>
-                                                    <!-- Metrics in history -->
+                                                    <div class="flex-1 min-w-0 flex flex-col items-start gap-0.5">
-                                                    <div v-if="gen.execution_time_seconds || gen.token_usage"
+                                                        <p
-                                                        class="flex flex-wrap gap-2 text-[9px] text-slate-500 font-mono opacity-70">
+                                                            class="text-xs text-slate-300 truncate font-medium w-full text-left">
-                                                        <span v-if="gen.execution_time_seconds" title="Total Time"><i
+                                                            {{
-                                                                class="pi pi-clock mr-0.5"></i>{{
+                                                                gen.prompt }}</p>
-                                                                    gen.execution_time_seconds.toFixed(1) }}s</span>
+
-                                                        <span v-if="gen.api_execution_time_seconds" title="API Time"><i
+                                                        <!-- Tech Prompt Preview -->
-                                                                class="pi pi-server mr-0.5"></i>{{
+                                                        <p v-if="gen.tech_prompt"
-                                                                    gen.api_execution_time_seconds.toFixed(1) }}s</span>
+                                                            class="text-[9px] text-slate-500 truncate w-full text-left font-mono opacity-80">
-                                                        <span v-if="gen.token_usage" title="Tokens"><i
+                                                            {{ gen.tech_prompt }}
-                                                                class="pi pi-bolt mr-0.5"></i>{{ gen.token_usage
+                                                        </p>
+
+                                                        <div class="flex items-center gap-2 text-[10px] text-slate-500">
+                                                            <span>{{ new Date(gen.created_at).toLocaleDateString()
                                                                 }}</span>
-                                                    </div>
+                                                            <span class="capitalize"
+                                                                :class="gen.status === 'done' ? 'text-green-500' : (gen.status === 'failed' ? 'text-red-500' : 'text-amber-500')">{{
+                                                                    gen.status }}</span>
+                                                            <i v-if="gen.failed_reason"
+                                                                v-tooltip.right="gen.failed_reason"
+                                                                class="pi pi-exclamation-circle text-red-500"
+                                                                style="font-size: 12px;" />
+                                                        </div>
+                                                        <!-- Metrics in history -->
+                                                        <div v-if="gen.execution_time_seconds || gen.token_usage"
+                                                            class="flex flex-wrap gap-2 text-[9px] text-slate-500 font-mono opacity-70">
+                                                            <span v-if="gen.execution_time_seconds"
+                                                                title="Total Time"><i class="pi pi-clock mr-0.5"></i>{{
+                                                                    gen.execution_time_seconds.toFixed(1) }}s</span>
+                                                            <span v-if="gen.api_execution_time_seconds"
+                                                                title="API Time"><i class="pi pi-server mr-0.5"></i>{{
+                                                                    gen.api_execution_time_seconds.toFixed(1) }}s</span>
+                                                            <span v-if="gen.token_usage" title="Tokens"><i
+                                                                    class="pi pi-bolt mr-0.5"></i>{{ gen.token_usage
+                                                                    }}</span>
+                                                        </div>
 
-                                                    <!-- Action Buttons -->
+                                                        <!-- Action Buttons -->
-                                                    <div class="flex gap-2 mt-1 border-t border-white/5 pt-2 w-full">
+                                                        <div
-                                                        <Button icon="pi pi-copy" label="Prompt" size="small" text
+                                                            class="flex gap-2 mt-1 border-t border-white/5 pt-2 w-full">
-                                                            class="!text-[10px] !py-0.5 !px-1.5 text-slate-400 hover:bg-white/5 flex-1"
+                                                            <Button icon="pi pi-copy" label="Prompt" size="small" text
-                                                            @click.stop="reusePrompt(gen)"
+                                                                class="!text-[10px] !py-0.5 !px-1.5 text-slate-400 hover:bg-white/5 flex-1"
-                                                            v-tooltip.bottom="'Use this prompt'" />
+                                                                @click.stop="reusePrompt(gen)"
-                                                        <Button icon="pi pi-images" label="Asset" size="small" text
+                                                                v-tooltip.bottom="'Use this prompt'" />
-                                                            class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
+                                                            <Button icon="pi pi-images" label="Asset" size="small" text
-                                                            @click.stop="reuseAsset(gen)"
+                                                                class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
-                                                            v-tooltip.bottom="'Use original assets'"
+                                                                @click.stop="reuseAsset(gen)"
-                                                            :disabled="gen.status !== 'done' || gen.assets_list.length == 0" />
+                                                                v-tooltip.bottom="'Use original assets'"
-                                                        <Button icon="pi pi-reply" label="Result" size="small" text
+                                                                :disabled="gen.status !== 'done' || gen.assets_list.length == 0" />
-                                                            class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
+                                                            <Button icon="pi pi-reply" label="Result" size="small" text
-                                                            :disabled="gen.status !== 'done' || gen.result_list.length == 0"
+                                                                class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
-                                                            @click.stop="useResultAsReference(gen)"
+                                                                :disabled="gen.status !== 'done' || gen.result_list.length == 0"
-                                                            v-tooltip.bottom="'Use result as reference'" />
+                                                                @click.stop="useResultAsReference(gen)"
+                                                                v-tooltip.bottom="'Use result as reference'" />
+                                                        </div>
                                                     </div>
                                                 </div>
                                             </div>

src/views/FlexibleGenerationView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, watch, computed } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { dataService } from '../services/dataService'
 import { aiService } from '../services/aiService'
@@ -37,6 +37,7 @@ const isModalLoading = ref(false)
 const tempSelectedAssets = ref([])
 const quality = ref({ key: 'TWOK', value: '2K' })
 const aspectRatio = ref({ key: "NINESIXTEEN", value: "9:16" })
+const generationCount = ref(1)
 const sendToTelegram = ref(false)
 const telegramId = ref('')
 const isTelegramIdSaved = ref(false)
@@ -54,6 +55,7 @@ const historyFirst = ref(0)
 const isSettingsVisible = ref(false)
 const isSubmitting = ref(false)
 const activeOverlayId = ref(null) // For mobile tap-to-show overlay
+const filterCharacter = ref(null) // Character filter for gallery
 
 // Options
 const qualityOptions = ref([
@@ -80,7 +82,8 @@ const saveSettings = () => {
         aspectRatio: aspectRatio.value,
         sendToTelegram: sendToTelegram.value,
         telegramId: telegramId.value,
-        useProfileImage: useProfileImage.value
+        useProfileImage: useProfileImage.value,
+        generationCount: generationCount.value
     }
     localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
 
@@ -106,6 +109,7 @@ const restoreSettings = () => {
             telegramId.value = settings.telegramId || localStorage.getItem('telegram_id') || ''
             if (telegramId.value) isTelegramIdSaved.value = true
             if (settings.useProfileImage !== undefined) useProfileImage.value = settings.useProfileImage
+            if (settings.generationCount) generationCount.value = Math.min(settings.generationCount, 4)
 
             return settings // Return to use in loadData
         } catch (e) {
@@ -116,10 +120,18 @@ const restoreSettings = () => {
 }
 
 // Watchers for auto-save
-watch([prompt, selectedCharacter, selectedAssets, quality, aspectRatio, sendToTelegram, telegramId, useProfileImage], () => {
+watch([prompt, selectedCharacter, selectedAssets, quality, aspectRatio, sendToTelegram, telegramId, useProfileImage, generationCount], () => {
     saveSettings()
 }, { deep: true })
 
+// Watcher for character filter — reload history when filter changes
+watch(filterCharacter, async () => {
+    historyGenerations.value = []
+    historyTotal.value = 0
+    historyFirst.value = 0
+    await refreshHistory()
+})
+
 
 // --- Data Loading ---
 const loadData = async () => {
@@ -127,7 +139,7 @@ const loadData = async () => {
         const [charsRes, assetsRes, historyRes] = await Promise.all([
             dataService.getCharacters(), // Assuming this exists and returns list
             dataService.getAssets(100, 0, 'all'), // Load a batch of assets
-            aiService.getGenerations(historyRows.value, historyFirst.value)
+            aiService.getGenerations(historyRows.value, historyFirst.value, filterCharacter.value?.id)
         ])
 
         // Characters
@@ -197,7 +209,7 @@ const loadData = async () => {
 
 const refreshHistory = async () => {
     try {
-        const response = await aiService.getGenerations(historyRows.value, 0)
+        const response = await aiService.getGenerations(historyRows.value, 0, filterCharacter.value?.id)
         if (response && response.generations) {
             // Update existing items and add new ones at the top
             const newGenerations = []
@@ -251,38 +263,43 @@ const handleGenerate = async () => {
             assets_list: selectedAssets.value.map(a => a.id),
             linked_character_id: selectedCharacter.value?.id || null,
             telegram_id: sendToTelegram.value ? telegramId.value : null,
-            use_profile_image: selectedCharacter.value ? useProfileImage.value : false
+            use_profile_image: selectedCharacter.value ? useProfileImage.value : false,
+            count: generationCount.value
         }
 
         const response = await aiService.runGeneration(payload)
 
-        if (response && response.id) {
+        // Response can be a single generation, an array, or a Group response with 'generations'
-            // Create optimistic generation items
+        let generations = []
-            // If response is the full generation object, use it. 
+        if (response && response.generations) {
-            // If it's just { id: '...' }, create a placeholder.
+            generations = response.generations
-            // aiService.runGeneration returns response.data. 
+        } else if (Array.isArray(response)) {
-
+            generations = response
-            const newGen = {
+        } else {
-                id: response.id,
+            generations = [response]
-                prompt: prompt.value,
-                status: 'starting',
-                created_at: new Date().toISOString(),
-                // Add other fields as necessary for display
-            }
-
-            // Add to history immediately
-            historyGenerations.value.unshift(newGen)
-            historyTotal.value++
-
-            // Start polling
-            pollGeneration(response.id)
-
-            // Clear prompt if desired, or keep for reuse
-            // prompt.value = '' 
         }
+
+        for (const gen of generations) {
+            if (gen && gen.id) {
+                const newGen = {
+                    id: gen.id,
+                    prompt: prompt.value,
+                    status: gen.status || 'starting',
+                    created_at: new Date().toISOString(),
+                    generation_group_id: gen.generation_group_id || null,
+                }
+
+                historyGenerations.value.unshift(newGen)
+                historyTotal.value++
+
+                pollGeneration(gen.id)
+            }
+        }
+
+        // Refresh history after a short delay to get full generation data from server
+        setTimeout(() => refreshHistory(), 2000)
     } catch (e) {
         console.error('Generation failed', e)
-        // Ideally show a toast error here
         alert(e.message || 'Generation failed to start')
     } finally {
         isSubmitting.value = false
@@ -352,7 +369,7 @@ const loadMoreHistory = async () => {
 
     try {
         const nextOffset = historyGenerations.value.length
-        const response = await aiService.getGenerations(historyRows.value, nextOffset)
+        const response = await aiService.getGenerations(historyRows.value, nextOffset, filterCharacter.value?.id)
 
         if (response && response.generations) {
             const newGenerations = response.generations.filter(gen =>
@@ -380,14 +397,98 @@ onMounted(() => {
 // --- Sidebar Logic (Duplicated for now) ---
 // handleLogout removed - handled in AppSidebar
 
-// Image Preview
+// Image Preview with navigation
 const isImagePreviewVisible = ref(false)
 const previewImage = ref(null)
+const previewIndex = ref(0)
+
+// Grouped history: merge generations with the same generation_group_id into a single gallery item
+const groupedHistoryGenerations = computed(() => {
+    const groups = new Map()
+    const result = []
+    for (const gen of historyGenerations.value) {
+        if (gen.generation_group_id) {
+            if (groups.has(gen.generation_group_id)) {
+                groups.get(gen.generation_group_id).children.push(gen)
+            } else {
+                const group = {
+                    id: gen.generation_group_id,
+                    generation_group_id: gen.generation_group_id,
+                    prompt: gen.prompt,
+                    created_at: gen.created_at,
+                    isGroup: true,
+                    children: [gen],
+                }
+                groups.set(gen.generation_group_id, group)
+                result.push(group)
+            }
+        } else {
+            result.push(gen)
+        }
+    }
+    return result
+})
+
+// Collect all preview-able images from history
+const allPreviewImages = computed(() => {
+    const images = []
+    for (const gen of historyGenerations.value) {
+        if (gen.result_list && gen.result_list.length > 0) {
+            for (const assetId of gen.result_list) {
+                images.push({
+                    url: API_URL + '/assets/' + assetId,
+                    genId: gen.id,
+                    prompt: gen.prompt
+                })
+            }
+        }
+    }
+    return images
+})
+
 const openImagePreview = (url) => {
-    previewImage.value = { url }
+    // Find index of this image in the flat list
+    const idx = allPreviewImages.value.findIndex(img => img.url === url)
+    previewIndex.value = idx >= 0 ? idx : 0
+    previewImage.value = allPreviewImages.value[previewIndex.value] || { url }
     isImagePreviewVisible.value = true
 }
 
+const navigatePreview = (direction) => {
+    const images = allPreviewImages.value
+    if (images.length === 0) return
+    let newIndex = previewIndex.value + direction
+    if (newIndex < 0) newIndex = images.length - 1
+    if (newIndex >= images.length) newIndex = 0
+    previewIndex.value = newIndex
+    previewImage.value = images[newIndex]
+}
+
+const onPreviewKeydown = (e) => {
+    if (!isImagePreviewVisible.value) return
+    if (e.key === 'ArrowLeft') {
+        e.preventDefault()
+        navigatePreview(-1)
+    } else if (e.key === 'ArrowRight') {
+        e.preventDefault()
+        navigatePreview(1)
+    } else if (e.key === 'Escape') {
+        isImagePreviewVisible.value = false
+    }
+}
+
+watch(isImagePreviewVisible, (visible) => {
+    if (visible) {
+        window.addEventListener('keydown', onPreviewKeydown)
+    } else {
+        window.removeEventListener('keydown', onPreviewKeydown)
+    }
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('keydown', onPreviewKeydown)
+})
+
 const reusePrompt = (gen) => {
     if (gen.prompt) {
         prompt.value = gen.prompt
@@ -602,6 +703,32 @@ const confirmAddToAlbum = async () => {
                     <span class="text-xs text-slate-500 border-l border-white/10 pl-3">History</span>
                 </div>
                 <div class="flex items-center gap-2">
+                    <Dropdown v-model="filterCharacter" :options="characters" optionLabel="name"
+                        placeholder="All Characters" showClear
+                        class="!w-48 !bg-slate-800/60 !border-white/10 !text-white !rounded-xl !text-sm" :pt="{
+                            root: { class: '!bg-slate-800/60 !h-8' },
+                            input: { class: '!text-white !text-xs !py-1 !px-2' },
+                            trigger: { class: '!text-slate-400 !w-6' },
+                            panel: { class: '!bg-slate-800 !border-white/10' },
+                            item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white !text-xs !py-1.5' },
+                            clearIcon: { class: '!text-slate-400 hover:!text-white' }
+                        }">
+                        <template #value="slotProps">
+                            <div v-if="slotProps.value" class="flex items-center gap-1.5">
+                                <img v-if="slotProps.value.avatar_image" :src="API_URL + slotProps.value.avatar_image"
+                                    class="w-5 h-5 rounded-full object-cover" />
+                                <span class="text-xs">{{ slotProps.value.name }}</span>
+                            </div>
+                            <span v-else class="text-xs text-slate-400">{{ slotProps.placeholder }}</span>
+                        </template>
+                        <template #option="slotProps">
+                            <div class="flex items-center gap-2">
+                                <img v-if="slotProps.option.avatar_image" :src="API_URL + slotProps.option.avatar_image"
+                                    class="w-6 h-6 rounded-full object-cover" />
+                                <span>{{ slotProps.option.name }}</span>
+                            </div>
+                        </template>
+                    </Dropdown>
                     <Button icon="pi pi-refresh" @click="refreshHistory" rounded text
                         class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8 md:hidden" />
                     <Button icon="pi pi-cog" @click="isSettingsVisible = true" rounded text
@@ -613,97 +740,234 @@ const confirmAddToAlbum = async () => {
                 :class="{ 'pb-[300px]': isSettingsVisible, 'pb-32': !isSettingsVisible }">
                 <div v-if="historyGenerations.length > 0"
                     class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 gap-2 md:gap-1">
-                    <div v-for="gen in historyGenerations" :key="gen.id"
+                    <div v-for="item in groupedHistoryGenerations" :key="item.id"
-                        class="aspect-[9/16] relative group overflow-hidden bg-slate-800 transition-all duration-300"
+                        class="aspect-[9/16] relative overflow-hidden bg-slate-800 transition-all duration-300">
-                        @click="toggleMobileOverlay(gen.id)">
 
-                        <img v-if="gen.result_list && gen.result_list.length > 0"
+                        <!-- ============================================ -->
-                            :src="API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'"
+                        <!-- GROUPED GENERATION (multiple in one slot)    -->
-                            class="w-full h-full object-cover cursor-pointer"
+                        <!-- ============================================ -->
-                            @click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
+                        <template v-if="item.isGroup">
-
+                            <!-- Group badge -->
-                        <div v-else-if="gen.status === 'failed'"
-                            class="w-full h-full flex flex-col items-center justify-center p-2 text-center bg-red-500/10 border border-red-500/20">
-                            <i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
-                            <span class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
-                            <span v-if="gen.failed_reason"
-                                class="text-[8px] text-red-300/70 mt-1 line-clamp-2 leading-tight"
-                                v-tooltip.top="gen.failed_reason">{{ gen.failed_reason }}</span>
-                        </div>
-
-                        <div v-else-if="['processing', 'starting', 'running'].includes(gen.status)"
-                            class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50 border border-violet-500/20 group">
-                            <!-- Shimmer Background -->
                             <div
-                                class="absolute inset-0 bg-gradient-to-tr from-violet-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
+                                class="absolute top-1.5 left-1.5 z-20 bg-violet-600/80 backdrop-blur-sm text-white text-[9px] font-bold px-1.5 py-0.5 rounded-md pointer-events-none">
+                                {{ item.children.length }}x
                             </div>
 
-                            <!-- Moving Highlight -->
+                            <div class="w-full h-full grid gap-0.5"
-                            <div
+                                :class="item.children.length <= 2 ? 'grid-cols-1' : 'grid-cols-2'">
-                                class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
+                                <div v-for="child in item.children" :key="child.id"
-                            </div>
+                                    class="relative group overflow-hidden" @click="toggleMobileOverlay(child.id)">
 
-                            <i class="pi pi-spin pi-spinner text-violet-500 text-xl mb-2 relative z-10"></i>
+                                    <!-- Child: has result -->
-                            <span class="text-[10px] text-violet-300/70 relative z-10 capitalize">{{ gen.status
+                                    <img v-if="child.result_list && child.result_list.length > 0"
-                            }}...</span>
+                                        :src="API_URL + '/assets/' + child.result_list[0] + '?thumbnail=true'"
-                            <span v-if="gen.progress"
+                                        class="w-full h-full object-cover" />
-                                class="text-[9px] text-violet-400/60 font-mono mt-1 relative z-10">{{
-                                    gen.progress }}%</span>
-                        </div>
 
-                        <div v-else class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
+                                    <!-- Child: processing -->
-                            <i class="pi pi-image text-4xl opacity-20"></i>
+                                    <div v-else-if="['processing', 'starting', 'running'].includes(child.status)"
-                        </div>
+                                        class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50">
+                                        <div
+                                            class="absolute inset-0 bg-gradient-to-tr from-violet-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
+                                        </div>
+                                        <div
+                                            class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
+                                        </div>
+                                        <i class="pi pi-spin pi-spinner text-violet-500 text-sm relative z-10"></i>
+                                    </div>
 
-                        <div class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2"
+                                    <!-- Child: FAILED -->
-                            :class="{ 'opacity-0 group-hover:opacity-100': activeOverlayId !== gen.id, 'opacity-100': activeOverlayId === gen.id }">
+                                    <div v-else-if="child.status === 'failed'"
+                                        class="w-full h-full flex flex-col items-center justify-center bg-red-500/10 relative group p-2 text-center"
+                                        v-tooltip.bottom="item.children.length > 1 ? (child.failed_reason || 'Generation failed') : null">
+                                        <i class="pi pi-times-circle text-red-500 text-lg mb-0.5"></i>
+                                        <span
+                                            class="text-[8px] font-bold text-red-400 uppercase tracking-wide leading-tight">Failed</span>
 
-                            <div
+                                        <!-- Show error text if only 1 child -->
-                                class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
+                                        <span v-if="item.children.length === 1 && child.failed_reason"
-                                <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
+                                            class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight">
-                                    class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
+                                            {{ child.failed_reason }}
-                                    @click.stop="deleteGeneration(gen)" />
+                                        </span>
 
-                                <div class="flex flex-col items-center gap-0.5 pointer-events-none">
+                                        <!-- Delete Persistent for failed child -->
-                                    <span class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
+                                        <div class="absolute top-0 right-0 p-1 z-10">
-                                        gen.cost }} $</span>
+                                            <Button icon="pi pi-trash" size="small"
-                                    <span v-if="gen.execution_time_seconds"
+                                                class="!w-5 !h-5 !rounded-full !bg-red-500/20 !border-none !text-red-400 !text-[8px] hover:!bg-red-500 hover:!text-white pointer-events-auto"
-                                        class="text-[8px] text-slate-500 font-mono">{{
+                                                @click.stop="deleteGeneration(child)" />
-                                            gen.execution_time_seconds.toFixed(1) }}s</span>
+                                        </div>
-                                </div>
+                                    </div>
 
-                                <div class="flex gap-1">
+                                    <!-- Child: other -->
-                                    <Button v-if="gen.result_list && gen.result_list.length > 0" icon="pi pi-pencil"
+                                    <div v-else class="w-full h-full flex items-center justify-center bg-slate-800">
-                                        v-tooltip.left="'Edit (Use Result)'"
+                                        <i class="pi pi-image text-lg opacity-20 text-slate-600"></i>
-                                        class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
+                                    </div>
-                                        @click.stop="useResultAsAsset(gen)" />
+
-                                    <Button icon="pi pi-folder-plus" v-tooltip.left="'Add to Album'"
+                                    <!-- SUCCESS overlay per child (hover) -->
-                                        class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
+                                    <div v-if="child.result_list && child.result_list.length > 0"
-                                        @click.stop="openAlbumPicker(gen)" />
+                                        class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-1 z-10"
+                                        :class="{ 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto': activeOverlayId !== child.id, 'opacity-100 pointer-events-auto': activeOverlayId === child.id }">
+
+                                        <!-- Top right: edit, album, delete -->
+                                        <div class="flex justify-end items-start gap-0.5">
+                                            <Button icon="pi pi-pencil" size="small"
+                                                class="!w-5 !h-5 !rounded-full !bg-white/20 !border-none !text-white !text-[8px] hover:!bg-violet-500"
+                                                @click.stop="useResultAsAsset(child)" />
+                                            <Button icon="pi pi-folder-plus" size="small"
+                                                class="!w-5 !h-5 !rounded-full !bg-white/20 !border-none !text-white !text-[8px] hover:!bg-violet-500"
+                                                @click.stop="openAlbumPicker(child)" />
+                                            <Button icon="pi pi-trash" size="small"
+                                                class="!w-5 !h-5 !rounded-full !bg-red-500/20 !border-none !text-red-400 !text-[8px] hover:!bg-red-500 hover:!text-white"
+                                                @click.stop="deleteGeneration(child)" />
+                                        </div>
+
+                                        <!-- Center: view button + cost -->
+                                        <div
+                                            class="flex-1 flex flex-col items-center justify-center pointer-events-none">
+                                            <span class="text-[8px] font-bold text-slate-300 font-mono mb-1">{{
+                                                child.cost }} $</span>
+                                            <Button icon="pi pi-eye" rounded text
+                                                class="!bg-black/50 !text-white !w-8 !h-8 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border !border-white/20"
+                                                @click.stop="openImagePreview(API_URL + '/assets/' + child.result_list[0])" />
+                                        </div>
+
+                                        <!-- Bottom: reuse prompt + reuse assets -->
+                                        <div class="flex gap-0.5">
+                                            <Button icon="pi pi-comment" size="small"
+                                                class="!w-5 !h-5 flex-1 !bg-white/10 !border-white/10 !text-slate-200 !text-[8px] hover:!bg-white/20"
+                                                @click.stop="reusePrompt(child)" />
+                                            <Button icon="pi pi-images" size="small"
+                                                class="!w-5 !h-5 flex-1 !bg-white/10 !border-white/10 !text-slate-200 !text-[8px] hover:!bg-white/20"
+                                                @click.stop="reuseAsset(child)" />
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
+                        </template>
 
-                            <!-- Centered View Button -->
+                        <!-- ============================================ -->
-                            <div v-if="gen.result_list && gen.result_list.length > 0"
+                        <!-- SINGLE GENERATION (full slot)                -->
-                                class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
+                        <!-- ============================================ -->
-                                <Button icon="pi pi-eye" rounded text
+                        <template v-else>
-                                    class="!bg-black/50 !text-white !w-12 !h-12 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border-2 !border-white/20"
+                            <div class="w-full h-full relative group" @click="toggleMobileOverlay(item.id)">
-                                    @click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
-                            </div>
 
-                            <div
+                                <!-- SUCCESS: image -->
-                                class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200 z-10">
+                                <img v-if="item.result_list && item.result_list.length > 0"
-                                <div class="flex gap-1 mb-1">
+                                    :src="API_URL + '/assets/' + item.result_list[0] + '?thumbnail=true'"
-                                    <Button icon="pi pi-comment" v-tooltip.bottom="'Reuse Prompt'"
+                                    class="w-full h-full object-cover cursor-pointer"
-                                        class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
+                                    @click.stop="openImagePreview(API_URL + '/assets/' + item.result_list[0])" />
-                                        @click.stop="reusePrompt(gen)" />
+
-                                    <Button icon="pi pi-images" v-tooltip.bottom="'Reuse Assets'"
+                                <!-- FAILED: error display -->
-                                        class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
+                                <div v-else-if="item.status === 'failed'"
-                                        @click.stop="reuseAsset(gen)" />
+                                    class="w-full h-full flex flex-col items-center justify-between p-3 text-center bg-red-500/10 border border-red-500/20 relative group">
+
+                                    <!-- Top Right: Delete (Persistent) -->
+                                    <div class="w-full flex justify-end">
+                                        <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
+                                            class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white z-10"
+                                            @click.stop="deleteGeneration(item)" />
+                                    </div>
+
+                                    <!-- Center: Error Info -->
+                                    <div class="flex flex-col items-center justify-center flex-1">
+                                        <i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
+                                        <span
+                                            class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
+                                        <span v-if="item.failed_reason"
+                                            class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight"
+                                            v-tooltip.top="item.failed_reason">{{ item.failed_reason }}</span>
+                                    </div>
+
+                                    <!-- Bottom: Reuse Buttons (Persistent) -->
+                                    <div class="w-full flex gap-1 z-10">
+                                        <Button icon="pi pi-comment" v-tooltip.bottom="'Reuse Prompt'"
+                                            class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
+                                            @click.stop="reusePrompt(item)" />
+                                        <Button icon="pi pi-images" v-tooltip.bottom="'Reuse Assets'"
+                                            class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
+                                            @click.stop="reuseAsset(item)" />
+                                    </div>
+                                </div>
+
+                                <!-- PROCESSING -->
+                                <div v-else-if="['processing', 'starting', 'running'].includes(item.status)"
+                                    class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50 border border-violet-500/20">
+                                    <div
+                                        class="absolute inset-0 bg-gradient-to-tr from-violet-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
+                                    </div>
+                                    <div
+                                        class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
+                                    </div>
+                                    <i class="pi pi-spin pi-spinner text-violet-500 text-xl mb-2 relative z-10"></i>
+                                    <span class="text-[10px] text-violet-300/70 relative z-10 capitalize">{{ item.status
+                                    }}...</span>
+                                    <span v-if="item.progress"
+                                        class="text-[9px] text-violet-400/60 font-mono mt-1 relative z-10">{{
+                                            item.progress }}%</span>
+                                </div>
+
+                                <!-- EMPTY -->
+                                <div v-else
+                                    class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
+                                    <i class="pi pi-image text-4xl opacity-20"></i>
+                                </div>
+
+                                <!-- HOVER OVERLAY (for successful single gen state only) -->
+                                <div v-if="item.result_list && item.result_list.length > 0"
+                                    class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2 z-10"
+                                    :class="{ 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto': activeOverlayId !== item.id, 'opacity-100 pointer-events-auto': activeOverlayId === item.id }">
+
+                                    <!-- Top Right: buttons -->
+                                    <div
+                                        class="flex justify-end items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
+                                        <div class="flex gap-1">
+                                            <Button v-if="item.result_list && item.result_list.length > 0"
+                                                icon="pi pi-pencil" v-tooltip.left="'Edit (Use Result)'"
+                                                class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
+                                                @click.stop="useResultAsAsset(item)" />
+                                            <Button icon="pi pi-folder-plus" v-tooltip.left="'Add to Album'"
+                                                class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
+                                                @click.stop="openAlbumPicker(item)" />
+                                            <Button icon="pi pi-trash" v-tooltip.left="'Delete'"
+                                                class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
+                                                @click.stop="deleteGeneration(item)" />
+                                        </div>
+                                    </div>
+
+                                    <!-- Center: View button + Cost/Time -->
+                                    <div
+                                        class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none z-0">
+                                        <!-- Cost & Time -->
+                                        <div class="flex flex-col items-center gap-0.5 mb-2 pointer-events-none">
+                                            <span
+                                                class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
+                                                    item.cost }} $</span>
+                                            <span v-if="item.execution_time_seconds"
+                                                class="text-[8px] text-slate-500 font-mono">{{
+                                                    item.execution_time_seconds.toFixed(1) }}s</span>
+                                        </div>
+                                        <!-- View Button -->
+                                        <Button icon="pi pi-eye" rounded text
+                                            class="!bg-black/50 !text-white !w-12 !h-12 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border-2 !border-white/20"
+                                            @click.stop="openImagePreview(API_URL + '/assets/' + item.result_list[0])" />
+                                    </div>
+
+                                    <!-- Bottom: reuse buttons -->
+                                    <div
+                                        class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200 z-10">
+                                        <div class="flex gap-1 mb-1">
+                                            <Button icon="pi pi-comment" v-tooltip.bottom="'Reuse Prompt'"
+                                                class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
+                                                @click.stop="reusePrompt(item)" />
+                                            <Button icon="pi pi-images" v-tooltip.bottom="'Reuse Assets'"
+                                                class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
+                                                @click.stop="reuseAsset(item)" />
+                                        </div>
+                                        <p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ item.prompt
+                                        }}</p>
+                                    </div>
                                 </div>
-                                <p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ gen.prompt }}</p>
                             </div>
-                        </div>
+                        </template>
                     </div>
                 </div>
 
@@ -750,7 +1014,7 @@ const confirmAddToAlbum = async () => {
                             </div>
                             <Textarea v-model="prompt" rows="3" autoResize
                                 placeholder="Describe what you want to create..."
-                                class="w-full bg-slate-800 border-white/10 text-white rounded-xl p-3 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" />
+                                class="w-full bg-slate-800 !text-[16px] border-white/10 text-white rounded-xl p-3 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" />
 
                         </div>
 
@@ -788,9 +1052,15 @@ const confirmAddToAlbum = async () => {
 
                                 <div v-if="selectedCharacter"
                                     class="flex items-center gap-2 mt-2 px-1 animate-in fade-in slide-in-from-top-1">
-                                    <Checkbox v-model="useProfileImage" :binary="true" inputId="use-profile-img" />
+                                    <Checkbox v-model="useProfileImage" :binary="true" inputId="use-profile-img"
+                                        class="!border-white/20" :pt="{
+                                            box: ({ props, state }) => ({
+                                                class: ['!bg-slate-800 !border-white/20', { '!bg-violet-600 !border-violet-600': props.modelValue }]
+                                            })
+                                        }" />
                                     <label for="use-profile-img"
-                                        class="text-xs text-slate-300 cursor-pointer select-none">Use Character
+                                        class="text-xs text-slate-300 cursor-pointer select-none">Use
+                                        Character
                                         Photo</label>
                                 </div>
                             </div>
@@ -801,7 +1071,8 @@ const confirmAddToAlbum = async () => {
                                 <div @click="openAssetPicker"
                                     class="w-full bg-slate-800 border border-white/10 rounded-xl p-3 min-h-[46px] cursor-pointer hover:bg-slate-700/50 transition-colors flex flex-wrap gap-2">
                                     <span v-if="selectedAssets.length === 0"
-                                        class="text-slate-400 text-sm py-0.5">Select Assets</span>
+                                        class="text-slate-400 text-sm py-0.5">Select
+                                        Assets</span>
                                     <div v-for="asset in selectedAssets" :key="asset.id"
                                         class="px-2 py-1 bg-violet-600/30 border border-violet-500/30 text-violet-200 text-xs rounded-md flex items-center gap-2 animate-in fade-in zoom-in duration-200"
                                         @click.stop>
@@ -834,6 +1105,20 @@ const confirmAddToAlbum = async () => {
                             </div>
                         </div>
 
+                        <!-- Generation Count -->
+                        <div class="flex flex-col gap-2">
+                            <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Count</label>
+                            <div class="flex items-center gap-2">
+                                <div class="flex-1 flex bg-slate-800 rounded-xl border border-white/10 overflow-hidden">
+                                    <button v-for="n in 4" :key="n" @click="generationCount = n"
+                                        class="flex-1 py-2 text-sm font-bold transition-all"
+                                        :class="generationCount === n ? 'bg-violet-600 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'">
+                                        {{ n }}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
                         <div class="flex flex-col gap-2 bg-slate-800/50 p-3 rounded-xl border border-white/5">
                             <div class="flex items-center gap-2">
                                 <Checkbox v-model="sendToTelegram" :binary="true" inputId="tg-check" />
@@ -870,13 +1155,41 @@ const confirmAddToAlbum = async () => {
 
 
         <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
-            :style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"
+            :style="{ width: '95vw', maxWidth: '1100px', background: 'transparent', boxShadow: 'none' }"
             :pt="{ root: { class: '!bg-transparent !border-none !shadow-none' }, header: { class: '!hidden' }, content: { class: '!bg-transparent !p-0' } }">
-            <div class="relative flex items-center justify-center" @click="isImagePreviewVisible = false">
+            <div class="relative flex items-center justify-center" @click.self="isImagePreviewVisible = false">
+
+                <!-- Previous Button -->
+                <Button v-if="allPreviewImages.length > 1" icon="pi pi-chevron-left" @click.stop="navigatePreview(-1)"
+                    rounded text
+                    class="!absolute left-2 top-1/2 -translate-y-1/2 z-20 !text-white !bg-black/50 hover:!bg-black/70 !w-12 !h-12 !rounded-full !border !border-white/20 backdrop-blur-sm transition-all hover:!scale-110" />
+
+                <!-- Image -->
                 <img v-if="previewImage" :src="previewImage.url"
-                    class="max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl" />
+                    class="max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl select-none"
+                    draggable="false" />
+
+                <!-- Next Button -->
+                <Button v-if="allPreviewImages.length > 1" icon="pi pi-chevron-right" @click.stop="navigatePreview(1)"
+                    rounded text
+                    class="!absolute right-2 top-1/2 -translate-y-1/2 z-20 !text-white !bg-black/50 hover:!bg-black/70 !w-12 !h-12 !rounded-full !border !border-white/20 backdrop-blur-sm transition-all hover:!scale-110" />
+
+                <!-- Close Button -->
                 <Button icon="pi pi-times" @click="isImagePreviewVisible = false" rounded text
-                    class="!absolute -top-4 -right-4 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" />
+                    class="!absolute -top-4 -right-4 z-20 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" />
+
+                <!-- Counter -->
+                <div v-if="allPreviewImages.length > 1"
+                    class="absolute bottom-4 left-1/2 -translate-x-1/2 z-20 bg-black/60 backdrop-blur-sm text-white text-sm font-mono px-4 py-1.5 rounded-full border border-white/10">
+                    {{ previewIndex + 1 }} / {{ allPreviewImages.length }}
+                </div>
+
+                <!-- Prompt (click to copy) -->
+                <div v-if="previewImage?.prompt"
+                    class="absolute bottom-14 left-1/2 -translate-x-1/2 z-20 bg-black/60 backdrop-blur-sm text-white/80 text-xs px-4 py-2 rounded-xl border border-white/10 max-w-md text-center line-clamp-2 cursor-pointer hover:bg-black/80 hover:border-white/20 transition-all"
+                    v-tooltip.top="'Click to copy'" @click.stop="navigator.clipboard.writeText(previewImage.prompt)">
+                    {{ previewImage.prompt }}
+                </div>
             </div>
         </Dialog>
 

src/views/IdeasView.vue

@@ -0,0 +1,163 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useIdeaStore } from '../stores/ideas'
+import { storeToRefs } from 'pinia'
+import Skeleton from 'primevue/skeleton'
+import Dialog from 'primevue/dialog'
+import InputText from 'primevue/inputtext'
+import Textarea from 'primevue/textarea'
+import Button from 'primevue/button'
+import Image from 'primevue/image'
+
+const router = useRouter()
+const ideaStore = useIdeaStore()
+const { ideas, loading } = storeToRefs(ideaStore)
+
+const showCreateDialog = ref(false)
+const newIdea = ref({ name: '', description: '' })
+const submitting = ref(false)
+const API_URL = import.meta.env.VITE_API_URL
+
+onMounted(async () => {
+    await ideaStore.fetchIdeas()
+})
+
+const goToDetail = (id) => {
+    router.push(`/ideas/${id}`) // Navigate to IdeaDetailView
+}
+
+const createIdea = async () => {
+    if (!newIdea.value.name) return
+    submitting.value = true
+    try {
+        await ideaStore.createIdea(newIdea.value)
+        showCreateDialog.value = false
+        newIdea.value = { name: '', description: '' }
+    } finally {
+        submitting.value = false
+    }
+}
+</script>
+
+<template>
+    <div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100 font-sans">
+        <!-- Top Bar -->
+        <header class="flex justify-between items-end mb-8 border-b border-white/5 pb-6">
+            <div>
+                <h1
+                    class="text-4xl font-bold m-0 bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent">
+                    Ideas</h1>
+                <p class="mt-2 mb-0 text-slate-400">Your creative sessions and experiments</p>
+            </div>
+            <Button label="New Idea" icon="pi pi-plus" @click="showCreateDialog = true"
+                class="!bg-violet-600 hover:!bg-violet-500 !border-none" />
+        </header>
+
+        <!-- Loading State -->
+        <div v-if="loading && ideas.length === 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div v-for="i in 6" :key="i" class="glass-panel rounded-2xl p-6 flex flex-col gap-4">
+                <Skeleton height="12rem" class="w-full rounded-xl" />
+                <Skeleton width="60%" height="1.5rem" />
+                <Skeleton width="40%" height="1rem" />
+            </div>
+        </div>
+
+        <!-- Empty State -->
+        <div v-else-if="ideas.length === 0"
+            class="flex flex-col items-center justify-center h-96 text-slate-400 bg-slate-900/30 rounded-3xl border border-dashed border-white/10">
+            <div class="w-20 h-20 rounded-full bg-violet-500/10 flex items-center justify-center mb-6">
+                <i class="pi pi-lightbulb text-4xl text-violet-400"></i>
+            </div>
+            <h3 class="text-xl font-semibold text-white mb-2">No ideas yet</h3>
+            <p class="text-slate-400 mb-6 max-w-sm text-center">Start a new creative session to organize your
+                generations and prompts.</p>
+            <Button label="Create your first idea" icon="pi pi-plus" @click="showCreateDialog = true" />
+        </div>
+
+        <!-- Ideas Grid -->
+        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div v-for="idea in ideas" :key="idea.id"
+                class="glass-panel rounded-2xl p-0 flex flex-col gap-0 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-slate-800/80 hover:border-violet-500/30 group overflow-hidden"
+                @click="goToDetail(idea.id)">
+
+                <!-- Cover Image -->
+                <div class="aspect-video w-full bg-slate-800 relative overflow-hidden">
+                    <div v-if="idea.last_generation && idea.last_generation.status == 'done' && idea.last_generation.result_list.length > 0" class="w-full h-full">
+                        <img :src="API_URL + '/assets/' + idea.last_generation.result_list[0] + '?thumbnail=true'"
+                            class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
+                    </div>
+                    <div v-else
+                        class="w-full h-full flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900 group-hover:from-violet-900/20 group-hover:to-slate-900 transition-colors">
+                        <i
+                            class="pi pi-lightbulb text-4xl text-slate-700 group-hover:text-violet-500/50 transition-colors"></i>
+                    </div>
+
+                    <!-- Overlay Gradient -->
+                    <div
+                        class="absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent opacity-60">
+                    </div>
+
+                    <!-- Count Badge -->
+                    <div
+                        class="absolute top-3 right-3 bg-black/40 backdrop-blur-md text-white text-xs font-bold px-2 py-1 rounded-lg border border-white/10 flex items-center gap-1">
+                        <i class="pi pi-images text-[10px]"></i>
+                        <span>{{ idea.generation_ids?.length || 0 }}</span>
+                    </div>
+                </div>
+
+                <div class="p-5">
+                    <h3
+                        class="m-0 mb-2 text-xl font-bold truncate text-slate-100 group-hover:text-violet-300 transition-colors">
+                        {{ idea.name }}</h3>
+                    <p class="m-0 text-sm text-slate-400 line-clamp-2 min-h-[2.5em] leading-relaxed">
+                        {{ idea.description || 'No description provided.' }}
+                    </p>
+
+                    <div class="mt-4 pt-4 border-t border-white/5 flex justify-between items-center">
+                        <span class="text-xs text-slate-500 font-mono">ID: {{ idea.id.substring(0, 8) }}...</span>
+                        <div
+                            class="text-xs text-violet-400 font-medium opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1">
+                            Open Session <i class="pi pi-arrow-right text-[10px]"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Create Idea Dialog -->
+        <Dialog v-model:visible="showCreateDialog" modal header="New Idea Session" :style="{ width: '500px' }"
+            :breakpoints="{ '960px': '75vw', '641px': '90vw' }"
+            :pt="{ root: { class: '!bg-slate-900 !border !border-white/10' }, header: { class: '!bg-slate-900 !border-b !border-white/5 !text-white' }, content: { class: '!bg-slate-900 !p-6' }, footer: { class: '!bg-slate-900 !border-t !border-white/5 !p-4' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">
+            <div class="flex flex-col gap-5">
+                <div class="flex flex-col gap-2">
+                    <label for="name" class="font-semibold text-slate-300">Session Name</label>
+                    <InputText id="name" v-model="newIdea.name"
+                        class="w-full !bg-slate-800 !border-white/10 !text-white focus:!border-violet-500"
+                        placeholder="e.g., Cyberpunk Character Study" autofocus />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="description" class="font-semibold text-slate-300">Description</label>
+                    <Textarea id="description" v-model="newIdea.description" rows="3"
+                        class="w-full !bg-slate-800 !border-white/10 !text-white focus:!border-violet-500"
+                        placeholder="What are you exploring in this session?" />
+                </div>
+            </div>
+            <template #footer>
+                <div class="flex justify-end gap-2">
+                    <Button label="Cancel" @click="showCreateDialog = false" text
+                        class="!text-slate-400 hover:!text-white" />
+                    <Button label="Start Session" icon="pi pi-check" @click="createIdea" :loading="submitting"
+                        class="!bg-violet-600 hover:!bg-violet-500 !border-none" />
+                </div>
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<style scoped>
+.glass-panel {
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(10px);
+}
+</style>

src/views/ImageGenerationView.vue

@@ -211,8 +211,15 @@ const handleGenerate = async () => {
 
         const response = await aiService.runGeneration(payload)
 
-        if (response && response.id) {
+        let genId = null
-            pollStatus(response.id)
+        if (response && response.generations && response.generations.length > 0) {
+            genId = response.generations[0].id
+        } else if (response && response.id) {
+            genId = response.id
+        }
+
+        if (genId) {
+            pollStatus(genId)
         } else {
             // Fallback immediate response
             generatedResult.value = response

src/views/VideoGenerationView.vue

@@ -1,982 +0,0 @@
-<script setup>
-import { ref, onMounted, watch, computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { dataService } from '../services/dataService'
-import { aiService } from '../services/aiService'
-import Button from 'primevue/button'
-import Textarea from 'primevue/textarea'
-import InputText from 'primevue/inputtext'
-import Dialog from 'primevue/dialog'
-import Checkbox from 'primevue/checkbox'
-import Dropdown from 'primevue/dropdown'
-import Slider from 'primevue/slider'
-import Skeleton from 'primevue/skeleton'
-import { useAlbumStore } from '../stores/albums'
-
-const router = useRouter()
-const API_URL = import.meta.env.VITE_API_URL
-const albumStore = useAlbumStore()
-
-// --- State ---
-const prompt = ref('')
-const negativePrompt = ref('')
-const startImage = ref(null)
-const tailImage = ref(null)
-const selectedCharacter = ref(null)
-const useProfileImage = ref(true)
-const duration = ref(5)
-const mode = ref('std')
-const modelName = ref('kling-v2-6')
-const cfgScale = ref(50) // 0-100 mapped to 0.0-1.0
-const sendToTelegram = ref(false)
-const telegramId = ref('')
-const isTelegramIdSaved = ref(false)
-
-const characters = ref([])
-const historyGenerations = ref([])
-const historyTotal = ref(0)
-const historyRows = ref(50)
-
-const isSettingsVisible = ref(false)
-const isSubmitting = ref(false)
-const activeOverlayId = ref(null)
-
-// Asset Picker State
-const isAssetPickerVisible = ref(false)
-const assetPickerTarget = ref('start') // 'start' or 'tail'
-const assetPickerTab = ref('all')
-const modalAssets = ref([])
-const isModalLoading = ref(false)
-
-// Album Picker State
-const isAlbumPickerVisible = ref(false)
-const generationToAdd = ref(null)
-const selectedAlbumForAdd = ref(null)
-
-// Video Preview
-const isVideoPreviewVisible = ref(false)
-const previewVideo = ref(null)
-
-// Options
-const modelOptions = ref([
-    { key: 'kling-v2-1', value: 'Kling v2.1' },
-    { key: 'kling-v2', value: 'Kling v2' },
-    { key: 'kling-v1-6', value: 'Kling v1.6' },
-    { key: 'kling-v2-6', value: 'Kling v2.6' }
-])
-
-// --- Persistence ---
-const STORAGE_KEY = 'video_gen_settings'
-
-const saveSettings = () => {
-    const settings = {
-        prompt: prompt.value,
-        negativePrompt: negativePrompt.value,
-        startImageId: startImage.value?.id,
-        tailImageId: tailImage.value?.id,
-        selectedCharacterId: selectedCharacter.value?.id,
-        useProfileImage: useProfileImage.value,
-        duration: duration.value,
-        mode: mode.value,
-        modelName: modelName.value,
-        cfgScale: cfgScale.value,
-        sendToTelegram: sendToTelegram.value,
-        telegramId: telegramId.value
-    }
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
-
-    if (telegramId.value) {
-        localStorage.setItem('telegram_id', telegramId.value)
-        isTelegramIdSaved.value = true
-    }
-}
-
-const restoreSettings = () => {
-    const stored = localStorage.getItem(STORAGE_KEY)
-    if (stored) {
-        try {
-            const settings = JSON.parse(stored)
-            prompt.value = settings.prompt || ''
-            negativePrompt.value = settings.negativePrompt || ''
-            if (settings.duration) duration.value = settings.duration
-            if (settings.mode) mode.value = settings.mode
-            if (settings.modelName) modelName.value = settings.modelName
-            if (settings.cfgScale !== undefined) cfgScale.value = settings.cfgScale
-            sendToTelegram.value = settings.sendToTelegram || false
-            telegramId.value = settings.telegramId || localStorage.getItem('telegram_id') || ''
-            if (telegramId.value) isTelegramIdSaved.value = true
-            if (settings.useProfileImage !== undefined) useProfileImage.value = settings.useProfileImage
-            return settings
-        } catch (e) {
-            console.error('Failed to parse settings', e)
-        }
-    }
-    return null
-}
-
-// Watchers for auto-save
-watch([prompt, negativePrompt, startImage, tailImage, selectedCharacter, useProfileImage, duration, mode, modelName, cfgScale, sendToTelegram, telegramId], () => {
-    saveSettings()
-}, { deep: true })
-
-// --- Data Loading ---
-const loadData = async () => {
-    try {
-        const [charsRes, historyRes] = await Promise.all([
-            dataService.getCharacters(),
-            aiService.getVideoGenerations(historyRows.value, 0)
-        ])
-
-        characters.value = charsRes || []
-
-        if (historyRes && historyRes.generations) {
-            historyGenerations.value = historyRes.generations
-            historyTotal.value = historyRes.total_count || 0
-
-            // Resume polling for unfinished generations
-            const threeMinutesAgo = Date.now() - 3 * 60 * 1000
-            historyGenerations.value.forEach(gen => {
-                const status = gen.status ? gen.status.toLowerCase() : ''
-                const isActive = ['processing', 'starting', 'running'].includes(status)
-
-                let isRecent = true
-                if (gen.created_at) {
-                    let timeStr = gen.created_at
-                    if (timeStr.indexOf('Z') === -1 && timeStr.indexOf('+') === -1) {
-                        timeStr += 'Z'
-                    }
-                    const createdTime = new Date(timeStr).getTime()
-                    if (!isNaN(createdTime)) {
-                        isRecent = createdTime > threeMinutesAgo
-                    }
-                }
-
-                if (isActive && isRecent) {
-                    pollGeneration(gen.id)
-                }
-            })
-        } else {
-            historyGenerations.value = Array.isArray(historyRes) ? historyRes : []
-            historyTotal.value = historyGenerations.value.length
-        }
-
-        // Restore complex objects from IDs
-        const savedSettings = restoreSettings()
-        if (savedSettings) {
-            if (savedSettings.selectedCharacterId) {
-                selectedCharacter.value = characters.value.find(c => c.id === savedSettings.selectedCharacterId) || null
-            }
-        }
-
-    } catch (e) {
-        console.error('Failed to load data', e)
-    }
-}
-
-const refreshHistory = async () => {
-    try {
-        const response = await aiService.getVideoGenerations(historyRows.value, 0)
-        if (response && response.generations) {
-            const newGenerations = []
-            for (const gen of response.generations) {
-                const existingIndex = historyGenerations.value.findIndex(g => g.id === gen.id)
-                if (existingIndex !== -1) {
-                    const existing = historyGenerations.value[existingIndex]
-                    if (!['processing', 'starting', 'running'].includes(existing.status)) {
-                        Object.assign(existing, gen)
-                    }
-                } else {
-                    newGenerations.push(gen)
-                }
-            }
-            if (newGenerations.length > 0) {
-                historyGenerations.value = [...newGenerations, ...historyGenerations.value]
-            }
-            historyTotal.value = response.total_count || historyTotal.value
-        }
-    } catch (e) {
-        console.error('Failed to refresh history', e)
-    }
-}
-
-// --- Generation ---
-const handleGenerate = async () => {
-    if (!startImage.value) {
-        alert('Please select a start image')
-        return
-    }
-
-    if (sendToTelegram.value && !telegramId.value) {
-        alert('Please enter your Telegram ID')
-        return
-    }
-
-    isSubmitting.value = true
-
-    try {
-        const payload = {
-            image_asset_id: startImage.value.id,
-            prompt: prompt.value || '',
-            negative_prompt: negativePrompt.value || undefined,
-            duration: duration.value,
-            mode: mode.value,
-            model_name: modelName.value,
-            cfg_scale: cfgScale.value / 100,
-            linked_character_id: selectedCharacter.value?.id || undefined,
-            tail_image_asset_id: tailImage.value?.id || undefined,
-            telegram_id: sendToTelegram.value ? telegramId.value : undefined,
-            use_profile_image: selectedCharacter.value ? useProfileImage.value : false
-        }
-
-        const response = await aiService.runVideoGeneration(payload)
-
-        if (response && response.id) {
-            const newGen = {
-                id: response.id,
-                prompt: prompt.value,
-                status: 'starting',
-                gen_type: 'Video',
-                created_at: new Date().toISOString(),
-            }
-
-            historyGenerations.value.unshift(newGen)
-            historyTotal.value++
-            pollGeneration(response.id)
-        }
-    } catch (e) {
-        console.error('Generation failed', e)
-        alert(e.response?.data?.detail || e.message || 'Video generation failed to start')
-    } finally {
-        isSubmitting.value = false
-    }
-}
-
-const pollGeneration = async (id) => {
-    let completed = false
-    let attempts = 0
-    const genIndex = historyGenerations.value.findIndex(g => g.id === id)
-    if (genIndex === -1) return
-
-    const gen = historyGenerations.value[genIndex]
-
-    while (!completed) {
-        try {
-            const response = await aiService.getGenerationStatus(id)
-            Object.assign(gen, response)
-
-            if (response.status === 'done' || response.status === 'failed') {
-                completed = true
-            } else {
-                await new Promise(resolve => setTimeout(resolve, 3000))
-            }
-        } catch (e) {
-            console.error(`Polling failed for ${id}`, e)
-            attempts++
-            if (attempts > 3) {
-                completed = true
-                gen.status = 'failed'
-                gen.failed_reason = 'Polling connection lost'
-            }
-            await new Promise(resolve => setTimeout(resolve, 5000))
-        }
-    }
-}
-
-// --- Infinite Scroll ---
-const isHistoryLoading = ref(false)
-const infiniteScrollTrigger = ref(null)
-let observer = null
-
-const setupInfiniteScroll = () => {
-    observer = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting && !isHistoryLoading.value && historyGenerations.value.length < historyTotal.value) {
-            loadMoreHistory()
-        }
-    }, {
-        root: null,
-        rootMargin: '100px',
-        threshold: 0.1
-    })
-
-    if (infiniteScrollTrigger.value) {
-        observer.observe(infiniteScrollTrigger.value)
-    }
-}
-
-const loadMoreHistory = async () => {
-    if (isHistoryLoading.value) return
-    isHistoryLoading.value = true
-
-    try {
-        const nextOffset = historyGenerations.value.length
-        const response = await aiService.getVideoGenerations(historyRows.value, nextOffset)
-
-        if (response && response.generations) {
-            const newGenerations = response.generations.filter(gen =>
-                !historyGenerations.value.some(existing => existing.id === gen.id)
-            )
-            historyGenerations.value.push(...newGenerations)
-            historyTotal.value = response.total_count || historyTotal.value
-        }
-    } catch (e) {
-        console.error('Failed to load more history', e)
-    } finally {
-        isHistoryLoading.value = false
-    }
-}
-
-// --- Initial Load ---
-onMounted(() => {
-    loadData().then(() => {
-        setTimeout(setupInfiniteScroll, 500)
-    })
-    isSettingsVisible.value = true
-})
-
-// Video Preview
-const openVideoPreview = (url) => {
-    previewVideo.value = { url }
-    isVideoPreviewVisible.value = true
-}
-
-const reusePrompt = (gen) => {
-    if (gen.prompt) {
-        prompt.value = gen.prompt
-        isSettingsVisible.value = true
-    }
-}
-
-const deleteGeneration = async (gen) => {
-    if (!gen) return
-    try {
-        historyGenerations.value = historyGenerations.value.filter(g => g.id !== gen.id)
-        historyTotal.value--
-        await dataService.deleteGeneration(gen.id)
-    } catch (e) {
-        console.error('Failed to delete generation', e)
-        loadData()
-    }
-}
-
-const toggleMobileOverlay = (id) => {
-    if (activeOverlayId.value === id) {
-        activeOverlayId.value = null
-    } else {
-        activeOverlayId.value = id
-    }
-}
-
-// --- Asset Picker Logic ---
-const loadModalAssets = async () => {
-    isModalLoading.value = true
-    try {
-        const typeParam = assetPickerTab.value === 'all' ? undefined : assetPickerTab.value
-        const response = await dataService.getAssets(100, 0, typeParam)
-
-        if (response && response.assets) {
-            modalAssets.value = response.assets
-        } else {
-            modalAssets.value = Array.isArray(response) ? response : []
-        }
-    } catch (e) {
-        console.error('Failed to load modal assets', e)
-        modalAssets.value = []
-    } finally {
-        isModalLoading.value = false
-    }
-}
-
-const openAssetPicker = (target) => {
-    assetPickerTarget.value = target
-    isAssetPickerVisible.value = true
-    loadModalAssets()
-}
-
-const selectAssetFromPicker = (asset) => {
-    if (assetPickerTarget.value === 'start') {
-        startImage.value = asset
-    } else {
-        tailImage.value = asset
-    }
-    isAssetPickerVisible.value = false
-}
-
-const removeStartImage = () => {
-    startImage.value = null
-}
-
-const removeTailImage = () => {
-    tailImage.value = null
-}
-
-watch(assetPickerTab, () => {
-    if (isAssetPickerVisible.value) {
-        loadModalAssets()
-    }
-})
-
-// --- Asset Upload in Picker ---
-const assetPickerFileInput = ref(null)
-
-const triggerAssetPickerUpload = () => {
-    assetPickerFileInput.value?.click()
-}
-
-const handleAssetPickerUpload = async (event) => {
-    const target = event.target
-    if (target.files && target.files[0]) {
-        const file = target.files[0]
-        try {
-            isModalLoading.value = true
-            await dataService.uploadAsset(file)
-            assetPickerTab.value = 'uploaded'
-            loadModalAssets()
-        } catch (e) {
-            console.error('Failed to upload asset', e)
-        } finally {
-            isModalLoading.value = false
-            target.value = ''
-        }
-    }
-}
-
-// --- Album Picker Logic ---
-const openAlbumPicker = (gen) => {
-    generationToAdd.value = gen
-    isAlbumPickerVisible.value = true
-    albumStore.fetchAlbums()
-}
-
-const confirmAddToAlbum = async () => {
-    if (!generationToAdd.value || !selectedAlbumForAdd.value) return
-    try {
-        await albumStore.addGenerationToAlbum(selectedAlbumForAdd.value.id, generationToAdd.value.id)
-        isAlbumPickerVisible.value = false
-        selectedAlbumForAdd.value = null
-        generationToAdd.value = null
-    } catch (e) {
-        console.error('Failed to add to album', e)
-    }
-}
-
-// Helper to determine if a generation result is a video
-const isVideoResult = (gen) => {
-    return gen.gen_type === 'Video' || gen.gen_type === 'video'
-}
-
-const getResultUrl = (gen) => {
-    if (gen.result_list && gen.result_list.length > 0) {
-        return API_URL + '/assets/' + gen.result_list[0]
-    }
-    return null
-}
-
-const getResultThumbnailUrl = (gen) => {
-    if (gen.result_list && gen.result_list.length > 0) {
-        return API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'
-    }
-    return null
-}
-</script>
-
-<template>
-    <div class="flex flex-col h-full font-sans">
-        <main class="flex-1 relative flex flex-col h-full overflow-hidden">
-            <header
-                class="p-4 flex justify-between items-center z-10 border-b border-white/5 bg-slate-900/80 backdrop-blur-sm">
-                <div class="flex items-center gap-3">
-                    <h1
-                        class="text-xl font-bold bg-gradient-to-r from-cyan-400 to-violet-400 bg-clip-text text-transparent m-0">
-                        🎬 Video Studio</h1>
-
-                    <span class="text-xs text-slate-500 border-l border-white/10 pl-3">History</span>
-                </div>
-                <div class="flex items-center gap-2">
-                    <Button icon="pi pi-refresh" @click="refreshHistory" rounded text
-                        class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8 md:hidden" />
-                    <Button icon="pi pi-cog" @click="isSettingsVisible = true" rounded text
-                        class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8" v-if="!isSettingsVisible" />
-                </div>
-            </header>
-
-            <div class="flex-1 overflow-y-auto p-4"
-                :class="{ 'pb-[300px]': isSettingsVisible, 'pb-32': !isSettingsVisible }">
-                <div v-if="historyGenerations.length > 0"
-                    class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
-                    <div v-for="gen in historyGenerations" :key="gen.id"
-                        class="aspect-video relative group overflow-hidden rounded-xl bg-slate-800 transition-all duration-300 border border-white/5 hover:border-white/10"
-                        @click="toggleMobileOverlay(gen.id)">
-
-                        <!-- Video Thumbnail / Player -->
-                        <template v-if="gen.result_list && gen.result_list.length > 0">
-                            <video :src="getResultUrl(gen)" :poster="getResultThumbnailUrl(gen)"
-                                class="w-full h-full object-cover cursor-pointer" muted preload="metadata"
-                                @mouseenter="$event.target.play()"
-                                @mouseleave="$event.target.pause(); $event.target.currentTime = 0"
-                                @click.stop="openVideoPreview(getResultUrl(gen))" />
-                            <!-- Play icon overlay -->
-                            <div
-                                class="absolute top-2 left-2 w-7 h-7 bg-black/50 rounded-full flex items-center justify-center pointer-events-none group-hover:opacity-0 transition-opacity">
-                                <i class="pi pi-play text-white text-[10px] ml-0.5"></i>
-                            </div>
-                        </template>
-
-                        <div v-else-if="gen.status === 'failed'"
-                            class="w-full h-full flex flex-col items-center justify-center p-2 text-center bg-red-500/10 border border-red-500/20">
-                            <i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
-                            <span class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
-                            <span v-if="gen.failed_reason"
-                                class="text-[8px] text-red-300/70 mt-1 line-clamp-2 leading-tight"
-                                v-tooltip.top="gen.failed_reason">{{ gen.failed_reason }}</span>
-                        </div>
-
-                        <div v-else-if="['processing', 'starting', 'running'].includes(gen.status)"
-                            class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50 border border-cyan-500/20 group">
-                            <!-- Shimmer Background -->
-                            <div
-                                class="absolute inset-0 bg-gradient-to-tr from-cyan-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
-                            </div>
-                            <!-- Moving Highlight -->
-                            <div
-                                class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
-                            </div>
-
-                            <i class="pi pi-spin pi-spinner text-cyan-500 text-xl mb-2 relative z-10"></i>
-                            <span class="text-[10px] text-cyan-300/70 relative z-10 capitalize">{{ gen.status
-                                }}...</span>
-                            <span v-if="gen.progress"
-                                class="text-[9px] text-cyan-400/60 font-mono mt-1 relative z-10">{{
-                                    gen.progress }}%</span>
-                        </div>
-
-                        <div v-else class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
-                            <i class="pi pi-video text-4xl opacity-20"></i>
-                        </div>
-
-                        <!-- Overlay Actions -->
-                        <div class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2"
-                            :class="{ 'opacity-0 group-hover:opacity-100': activeOverlayId !== gen.id, 'opacity-100': activeOverlayId === gen.id }">
-
-                            <div
-                                class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
-                                <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
-                                    class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
-                                    @click.stop="deleteGeneration(gen)" />
-
-                                <div class="flex flex-col items-center gap-0.5 pointer-events-none">
-                                    <span class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
-                                        gen.cost }} $</span>
-                                    <span v-if="gen.execution_time_seconds"
-                                        class="text-[8px] text-slate-500 font-mono">{{
-                                            gen.execution_time_seconds.toFixed(1) }}s</span>
-                                </div>
-
-                                <div class="flex gap-1">
-                                    <Button icon="pi pi-folder-plus" v-tooltip.left="'Add to Album'"
-                                        class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
-                                        @click.stop="openAlbumPicker(gen)" />
-                                </div>
-                            </div>
-
-                            <!-- Centered Play Button -->
-                            <div v-if="gen.result_list && gen.result_list.length > 0"
-                                class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
-                                <Button icon="pi pi-play" rounded text
-                                    class="!bg-black/50 !text-white !w-12 !h-12 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border-2 !border-white/20"
-                                    @click.stop="openVideoPreview(getResultUrl(gen))" />
-                            </div>
-
-                            <div
-                                class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200 z-10">
-                                <div class="flex gap-1 mb-1">
-                                    <Button icon="pi pi-comment" v-tooltip.bottom="'Reuse Prompt'"
-                                        class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
-                                        @click.stop="reusePrompt(gen)" />
-                                </div>
-                                <p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ gen.prompt }}</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div v-else-if="!isSubmitting && historyGenerations.length === 0"
-                    class="flex flex-col items-center justify-center h-full text-slate-600 opacity-50">
-                    <i class="pi pi-video text-6xl mb-4"></i>
-                    <p class="text-xl">Your videos will appear here</p>
-                </div>
-
-                <!-- Infinite Scroll Sentinel -->
-                <div ref="infiniteScrollTrigger" class="w-full py-4 flex justify-center items-center min-h-[50px]">
-                    <i v-if="isHistoryLoading" class="pi pi-spin pi-spinner text-cyan-500 text-2xl"></i>
-                    <span v-else-if="historyGenerations.length > 0 && historyGenerations.length >= historyTotal"
-                        class="text-slate-600 text-xs">
-                        All items loaded
-                    </span>
-                </div>
-            </div>
-
-            <!-- Settings Panel -->
-            <div v-if="isSettingsVisible"
-                class="absolute bottom-2 left-1/2 -translate-x-1/2 w-[98%] max-w-6xl glass-panel border border-white/10 bg-slate-900/95 backdrop-blur-xl p-4 z-[60] !rounded-[2.5rem] shadow-2xl flex flex-col gap-3 max-h-[85vh] overflow-y-auto">
-
-                <div class="w-full flex justify-center -mt-2 mb-2 cursor-pointer" @click="isSettingsVisible = false">
-                    <div class="w-16 h-1 bg-white/20 rounded-full hover:bg-white/40 transition-colors"></div>
-                </div>
-
-                <div class="flex flex-col lg:flex-row gap-8">
-                    <!-- Left Column: Prompt + Image Inputs -->
-                    <div class="flex-1 flex flex-col gap-4">
-                        <!-- Prompt -->
-                        <div class="flex flex-col gap-2">
-                            <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Prompt
-                                <span class="text-slate-600 font-normal normal-case">(motion/scene description)</span>
-                            </label>
-                            <Textarea v-model="prompt" rows="2" autoResize
-                                placeholder="Describe the motion or animation you want..."
-                                class="w-full bg-slate-800 border-white/10 text-white rounded-xl p-3 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/50 transition-all resize-none shadow-inner" />
-                        </div>
-
-                        <!-- Negative Prompt -->
-                        <div class="flex flex-col gap-2">
-                            <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Negative Prompt
-                                <span class="text-slate-600 font-normal normal-case">(optional)</span>
-                            </label>
-                            <Textarea v-model="negativePrompt" rows="1" autoResize
-                                placeholder="What to avoid in the video..."
-                                class="w-full bg-slate-800 border-white/10 text-white rounded-xl p-3 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/50 transition-all resize-none shadow-inner text-sm" />
-                        </div>
-
-                        <!-- Image Inputs -->
-                        <div class="flex flex-col md:flex-row gap-4">
-                            <!-- Start Image (Required) -->
-                            <div class="flex-1 flex flex-col gap-2">
-                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">
-                                    Start Image <span class="text-red-400">*</span>
-                                </label>
-                                <div v-if="startImage"
-                                    class="relative group rounded-xl overflow-hidden border-2 border-cyan-500/30 bg-slate-800 aspect-video">
-                                    <img :src="API_URL + startImage.url + '?thumbnail=true'"
-                                        class="w-full h-full object-cover" />
-                                    <div
-                                        class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-                                        <Button icon="pi pi-times" rounded
-                                            class="!bg-red-500/80 !border-none !text-white !w-8 !h-8"
-                                            @click="removeStartImage" />
-                                    </div>
-                                    <span
-                                        class="absolute bottom-1 left-1 text-[9px] bg-black/60 text-white px-2 py-0.5 rounded-full">
-                                        {{ startImage.name || 'Start' }}
-                                    </span>
-                                </div>
-                                <div v-else @click="openAssetPicker('start')"
-                                    class="aspect-video rounded-xl border-2 border-dashed border-white/10 bg-slate-800/50 hover:bg-slate-800 hover:border-cyan-500/30 transition-all cursor-pointer flex flex-col items-center justify-center gap-2">
-                                    <i class="pi pi-image text-2xl text-slate-500"></i>
-                                    <span class="text-xs text-slate-400">Select start frame</span>
-                                </div>
-                            </div>
-
-                            <!-- Tail Image (Optional) -->
-                            <div class="flex-1 flex flex-col gap-2">
-                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">
-                                    Tail Image <span class="text-slate-600 font-normal normal-case">(optional)</span>
-                                </label>
-                                <div v-if="tailImage"
-                                    class="relative group rounded-xl overflow-hidden border-2 border-violet-500/30 bg-slate-800 aspect-video">
-                                    <img :src="API_URL + tailImage.url + '?thumbnail=true'"
-                                        class="w-full h-full object-cover" />
-                                    <div
-                                        class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-                                        <Button icon="pi pi-times" rounded
-                                            class="!bg-red-500/80 !border-none !text-white !w-8 !h-8"
-                                            @click="removeTailImage" />
-                                    </div>
-                                    <span
-                                        class="absolute bottom-1 left-1 text-[9px] bg-black/60 text-white px-2 py-0.5 rounded-full">
-                                        {{ tailImage.name || 'Tail' }}
-                                    </span>
-                                </div>
-                                <div v-else @click="openAssetPicker('tail')"
-                                    class="aspect-video rounded-xl border-2 border-dashed border-white/10 bg-slate-800/50 hover:bg-slate-800 hover:border-violet-500/30 transition-all cursor-pointer flex flex-col items-center justify-center gap-2">
-                                    <i class="pi pi-image text-2xl text-slate-500"></i>
-                                    <span class="text-xs text-slate-400">Select end frame</span>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Character -->
-                        <div class="flex flex-col gap-2">
-                            <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Character
-                                <span class="text-slate-600 font-normal normal-case">(optional)</span>
-                            </label>
-                            <Dropdown v-model="selectedCharacter" :options="characters" optionLabel="name"
-                                placeholder="Select Character" filter showClear
-                                class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl" :pt="{
-                                    root: { class: '!bg-slate-800' },
-                                    input: { class: '!text-white' },
-                                    trigger: { class: '!text-slate-400' },
-                                    panel: { class: '!bg-slate-800 !border-white/10' },
-                                    item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' }
-                                }">
-                                <template #value="slotProps">
-                                    <div v-if="slotProps.value" class="flex items-center gap-2">
-                                        <img v-if="slotProps.value.avatar_image"
-                                            :src="API_URL + slotProps.value.avatar_image"
-                                            class="w-6 h-6 rounded-full object-cover" />
-                                        <span>{{ slotProps.value.name }}</span>
-                                    </div>
-                                    <span v-else>{{ slotProps.placeholder }}</span>
-                                </template>
-                                <template #option="slotProps">
-                                    <div class="flex items-center gap-2">
-                                        <img v-if="slotProps.option.avatar_image"
-                                            :src="API_URL + slotProps.option.avatar_image"
-                                            class="w-8 h-8 rounded-full object-cover" />
-                                        <span>{{ slotProps.option.name }}</span>
-                                    </div>
-                                </template>
-                            </Dropdown>
-
-                            <div v-if="selectedCharacter"
-                                class="flex items-center gap-2 mt-1 px-1 animate-in fade-in slide-in-from-top-1">
-                                <Checkbox v-model="useProfileImage" :binary="true" inputId="use-profile-img-vid" />
-                                <label for="use-profile-img-vid"
-                                    class="text-xs text-slate-300 cursor-pointer select-none">Use
-                                    Character
-                                    Photo</label>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Right Column: Video Settings + Generate -->
-                    <div class="w-full lg:w-80 flex flex-col gap-4">
-                        <!-- Duration -->
-                        <div class="flex flex-col gap-2">
-                            <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Duration</label>
-                            <div class="flex gap-2">
-                                <button @click="duration = 5"
-                                    class="flex-1 py-2 px-4 rounded-xl text-sm font-medium transition-all" :class="duration === 5
-                                        ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/40 shadow-lg shadow-cyan-500/10'
-                                        : 'bg-slate-800 text-slate-400 border border-white/10 hover:bg-slate-700'">
-                                    5 sec
-                                </button>
-                                <button @click="duration = 10"
-                                    class="flex-1 py-2 px-4 rounded-xl text-sm font-medium transition-all" :class="duration === 10
-                                        ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/40 shadow-lg shadow-cyan-500/10'
-                                        : 'bg-slate-800 text-slate-400 border border-white/10 hover:bg-slate-700'">
-                                    10 sec
-                                </button>
-                            </div>
-                        </div>
-
-                        <!-- Mode -->
-                        <div class="flex flex-col gap-2">
-                            <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Mode</label>
-                            <div class="flex gap-2">
-                                <button @click="mode = 'std'"
-                                    class="flex-1 py-2 px-4 rounded-xl text-sm font-medium transition-all" :class="mode === 'std'
-                                        ? 'bg-violet-500/20 text-violet-400 border border-violet-500/40 shadow-lg shadow-violet-500/10'
-                                        : 'bg-slate-800 text-slate-400 border border-white/10 hover:bg-slate-700'">
-                                    Standard
-                                </button>
-                                <button @click="mode = 'pro'"
-                                    class="flex-1 py-2 px-4 rounded-xl text-sm font-medium transition-all" :class="mode === 'pro'
-                                        ? 'bg-violet-500/20 text-violet-400 border border-violet-500/40 shadow-lg shadow-violet-500/10'
-                                        : 'bg-slate-800 text-slate-400 border border-white/10 hover:bg-slate-700'">
-                                    Pro
-                                </button>
-                            </div>
-                        </div>
-
-                        <!-- Model -->
-                        <div class="flex flex-col gap-2">
-                            <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Model</label>
-                            <Dropdown v-model="modelName" :options="modelOptions" optionLabel="value" optionValue="key"
-                                class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
-                                :pt="{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" />
-                        </div>
-
-                        <!-- CFG Scale -->
-                        <div class="flex flex-col gap-2">
-                            <div class="flex justify-between items-center">
-                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">CFG
-                                    Scale</label>
-                                <span class="text-xs text-cyan-400 font-mono">{{ (cfgScale / 100).toFixed(2) }}</span>
-                            </div>
-                            <Slider v-model="cfgScale" :min="0" :max="100" :step="5" class="!w-full" :pt="{
-                                root: { class: '!bg-slate-700' },
-                                range: { class: '!bg-gradient-to-r !from-cyan-500 !to-violet-500' },
-                                handle: { class: '!bg-white !border-2 !border-cyan-500' }
-                            }" />
-                        </div>
-
-                        <!-- Telegram -->
-                        <div class="flex flex-col gap-2 bg-slate-800/50 p-3 rounded-xl border border-white/5">
-                            <div class="flex items-center gap-2">
-                                <Checkbox v-model="sendToTelegram" :binary="true" inputId="tg-check-vid" />
-                                <label for="tg-check-vid" class="text-xs text-slate-300 cursor-pointer">Send to
-                                    Telegram</label>
-                            </div>
-                            <div v-if="sendToTelegram" class="animate-in fade-in slide-in-from-top-1">
-                                <InputText v-model="telegramId" placeholder="Telegram ID"
-                                    class="w-full !text-xs !bg-slate-900 !border-white/10 !text-white !py-1.5" />
-                            </div>
-                        </div>
-
-                        <!-- Generate Button -->
-                        <div class="mt-auto">
-                            <Button :label="isSubmitting ? 'Starting...' : '🎬 Generate Video'"
-                                :icon="isSubmitting ? 'pi pi-spin pi-spinner' : 'pi pi-play'" :loading="isSubmitting"
-                                @click="handleGenerate" :disabled="!startImage"
-                                class="w-full !py-3 !text-base !font-bold !bg-gradient-to-r from-cyan-600 to-violet-500 !border-none !rounded-xl !shadow-lg !shadow-cyan-500/20 hover:!scale-[1.02] transition-all disabled:opacity-50 disabled:hover:!scale-100" />
-                        </div>
-                    </div>
-                </div>
-
-            </div>
-
-            <!-- Floating Open Controls Button -->
-            <transition name="fade">
-                <div v-if="!isSettingsVisible" class="absolute bottom-24 md:bottom-8 left-1/2 -translate-x-1/2 z-10">
-                    <Button label="Open Controls" icon="pi pi-chevron-up" @click="isSettingsVisible = true" rounded
-                        class="!bg-cyan-600 !border-none !shadow-xl !font-bold shadow-cyan-500/40 !px-6 !py-3" />
-                </div>
-            </transition>
-
-        </main>
-
-        <!-- Video Preview Dialog -->
-        <Dialog v-model:visible="isVideoPreviewVisible" modal dismissableMask
-            :style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"
-            :pt="{ root: { class: '!bg-transparent !border-none !shadow-none' }, header: { class: '!hidden' }, content: { class: '!bg-transparent !p-0' } }">
-            <div class="relative flex items-center justify-center" @click="isVideoPreviewVisible = false">
-                <video v-if="previewVideo" :src="previewVideo.url" controls autoplay
-                    class="max-w-full max-h-[85vh] rounded-xl shadow-2xl" @click.stop />
-                <Button icon="pi pi-times" @click="isVideoPreviewVisible = false" rounded text
-                    class="!absolute -top-4 -right-4 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" />
-            </div>
-        </Dialog>
-
-        <!-- Asset Picker Dialog -->
-        <Dialog v-model:visible="isAssetPickerVisible" modal
-            :header="assetPickerTarget === 'start' ? 'Select Start Image' : 'Select Tail Image'"
-            :style="{ width: '80vw', maxWidth: '900px' }"
-            :pt="{ root: { class: '!bg-slate-900 !border !border-white/10' }, header: { class: '!bg-slate-900 !border-b !border-white/5 !text-white' }, content: { class: '!bg-slate-900 !p-0' }, footer: { class: '!bg-slate-900 !border-t !border-white/5 !p-4' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">
-            <div class="flex flex-col h-[70vh]">
-                <!-- Tabs -->
-                <div class="flex border-b border-white/5 px-4 items-center">
-                    <button v-for="tab in ['all', 'uploaded', 'generated']" :key="tab" @click="assetPickerTab = tab"
-                        class="px-4 py-3 text-sm font-medium border-b-2 transition-colors capitalize"
-                        :class="assetPickerTab === tab ? 'border-cyan-500 text-cyan-400' : 'border-transparent text-slate-400 hover:text-slate-200'">
-                        {{ tab }}
-                    </button>
-                    <!-- Upload Action -->
-                    <div class="ml-auto flex items-center">
-                        <input type="file" ref="assetPickerFileInput" @change="handleAssetPickerUpload" class="hidden"
-                            accept="image/*" />
-                        <Button icon="pi pi-upload" label="Upload" @click="triggerAssetPickerUpload"
-                            class="!text-xs !bg-cyan-600/20 !text-cyan-300 hover:!bg-cyan-600/40 !border-none !px-3 !py-1.5 !rounded-lg" />
-                    </div>
-                </div>
-
-                <!-- Grid -->
-                <div class="flex-1 overflow-y-auto p-4 custom-scrollbar">
-                    <div v-if="isModalLoading" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
-                        <Skeleton v-for="i in 10" :key="i" height="150px" class="!bg-slate-800 rounded-xl" />
-                    </div>
-                    <div v-else-if="modalAssets.length > 0"
-                        class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
-                        <div v-for="asset in modalAssets" :key="asset.id" @click="selectAssetFromPicker(asset)"
-                            class="relative aspect-square rounded-xl overflow-hidden cursor-pointer border-2 transition-all group border-transparent hover:border-cyan-500/40">
-                            <img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
-                            <div class="absolute bottom-0 left-0 right-0 p-2 bg-black/60 backdrop-blur-sm">
-                                <p class="text-[10px] text-white truncate">{{ asset.name || 'Asset ' + (asset.id ?
-                                    asset.id.substring(0, 4) : '') }}</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div v-else class="flex flex-col items-center justify-center h-full text-slate-500">
-                        <i class="pi pi-image text-4xl mb-2 opacity-50"></i>
-                        <p>No assets found</p>
-                    </div>
-                </div>
-            </div>
-        </Dialog>
-
-        <!-- Album Picker Dialog -->
-        <Dialog v-model:visible="isAlbumPickerVisible" modal header="Add to Album" :style="{ width: '400px' }"
-            :pt="{ root: { class: '!bg-slate-900 !border !border-white/10' }, header: { class: '!bg-slate-900 !border-b !border-white/5 !text-white' }, content: { class: '!bg-slate-900 !p-4' }, footer: { class: '!bg-slate-900 !border-t !border-white/5 !p-4' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">
-            <div class="flex flex-col gap-4">
-                <div v-if="albumStore.loading" class="flex justify-center p-4">
-                    <i class="pi pi-spin pi-spinner text-cyan-500 text-2xl"></i>
-                </div>
-                <div v-else-if="albumStore.albums.length === 0" class="text-center text-slate-400">
-                    No albums found. Create one first!
-                </div>
-                <Dropdown v-else v-model="selectedAlbumForAdd" :options="albumStore.albums" optionLabel="name"
-                    placeholder="Select an Album" class="w-full !bg-slate-800 !border-white/10 !text-white" :pt="{
-                        root: { class: '!bg-slate-800' },
-                        input: { class: '!text-white' },
-                        trigger: { class: '!text-slate-400' },
-                        panel: { class: '!bg-slate-900 !border-white/10' },
-                        item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' }
-                    }" />
-            </div>
-            <template #footer>
-                <div class="flex justify-end gap-2">
-                    <Button label="Cancel" @click="isAlbumPickerVisible = false"
-                        class="!text-slate-300 hover:!bg-white/5" text />
-                    <Button label="Add" @click="confirmAddToAlbum" :disabled="!selectedAlbumForAdd"
-                        class="!bg-cyan-600 !border-none hover:!bg-cyan-500" />
-                </div>
-            </template>
-        </Dialog>
-
-    </div>
-</template>
-
-<style scoped>
-.glass-panel {
-    background: rgba(255, 255, 255, 0.03);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-}
-
-.slide-up-enter-active,
-.slide-up-leave-active {
-    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.slide-up-enter-from,
-.slide-up-leave-to {
-    transform: translateY(100%);
-    opacity: 0;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
-
-/* Custom Scrollbar */
-.overflow-y-auto::-webkit-scrollbar {
-    width: 6px;
-}
-
-.overflow-y-auto::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.02);
-}
-
-.overflow-y-auto::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-}
-
-.overflow-y-auto::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.2);
-}
-</style>