video

.gitignore

@@ -37,6 +37,3 @@ __screenshots__/
 
 # Vite
 *.timestamp-*-*.mjs
-
-
-package-lock.json

deploy.sh

@@ -2,7 +2,6 @@
 ssh root@31.59.58.220 "
   cd /root/ai/ai-service-front &&
   git pull &&
-  npm install &&
   npm run build &&
   cp -r dist/* /var/www/ai.luminic.space/
 "

package-lock.json

@@ -11,19 +11,16 @@
         "@primeuix/themes": "^2.0.3",
         "@primevue/themes": "^4.5.4",
         "axios": "^1.13.4",
-        "jszip": "^3.10.1",
         "pinia": "^3.0.4",
         "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",
         "@vitejs/plugin-vue": "^6.0.3",
         "autoprefixer": "^10.4.24",
-        "baseline-browser-mapping": "^2.9.19",
         "postcss": "^8.5.6",
         "tailwindcss": "^4.1.18",
         "vite": "^7.3.1",
@@ -3898,12 +3895,6 @@
         "url": "https://opencollective.com/core-js"
       }
     },
-    "node_modules/core-util-is": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
-      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
-      "license": "MIT"
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4869,18 +4860,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/immediate": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
-      "license": "MIT"
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "ISC"
-    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -5494,18 +5473,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/jszip": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
-      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
-      "license": "(MIT OR GPL-3.0-or-later)",
-      "dependencies": {
-        "lie": "~3.3.0",
-        "pako": "~1.0.2",
-        "readable-stream": "~2.3.6",
-        "setimmediate": "^1.0.5"
-      }
-    },
     "node_modules/kolorist": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
@@ -5523,15 +5490,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/lie": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
-      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
-      "license": "MIT",
-      "dependencies": {
-        "immediate": "~3.0.5"
-      }
-    },
     "node_modules/lightningcss": {
       "version": "1.30.2",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
@@ -6099,12 +6057,6 @@
       "dev": true,
       "license": "BlueOak-1.0.0"
     },
-    "node_modules/pako": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
-      "license": "(MIT AND Zlib)"
-    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -6291,12 +6243,6 @@
         "node": ">=12.11.0"
       }
     },
-    "node_modules/process-nextick-args": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "license": "MIT"
-    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -6339,33 +6285,6 @@
         "safe-buffer": "^5.1.0"
       }
     },
-    "node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "license": "MIT",
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/readable-stream/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "license": "MIT"
-    },
-    "node_modules/readable-stream/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "license": "MIT"
-    },
     "node_modules/readdirp": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
@@ -6727,12 +6646,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/setimmediate": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
-      "license": "MIT"
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6867,12 +6780,6 @@
       "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",
@@ -6948,21 +6855,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
-    "node_modules/string_decoder/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "license": "MIT"
-    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -7565,12 +7457,6 @@
         "browserslist": ">= 4.21.0"
       }
     },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "license": "MIT"
-    },
     "node_modules/vite": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
@@ -7926,18 +7812,6 @@
       "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

@@ -12,19 +12,16 @@
     "@primeuix/themes": "^2.0.3",
     "@primevue/themes": "^4.5.4",
     "axios": "^1.13.4",
-    "jszip": "^3.10.1",
     "pinia": "^3.0.4",
     "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",
     "@vitejs/plugin-vue": "^6.0.3",
     "autoprefixer": "^10.4.24",
-    "baseline-browser-mapping": "^2.9.19",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",
     "vite": "^7.3.1",

src/assets/base.css

@@ -58,12 +58,6 @@
   font-weight: normal;
 }
 
-input,
-textarea,
-select {
-  font-size: 16px;
-}
-
 body {
   min-height: 100vh;
   color: var(--color-text);

src/assets/main.css

@@ -218,27 +218,19 @@ h1, h2, h3, h4, h5, h6 {
 
 /* --- Textarea / Inputs --- */
 .p-textarea,
-.p-inputtext,
+.p-inputtext {
-.p-dropdown,
-.p-multiselect,
-.p-autocomplete,
-.p-inputnumber input {
   width: 100%;
   background: rgba(15, 23, 42, 0.6) !important;
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
   border-radius: 8px !important;
   padding: 0.5rem !important;
   color: white !important;
-  font-size: 1rem !important;
+  font-size: 0.8125rem !important;
   transition: all 0.3s ease !important;
 }
 
 .p-textarea:focus,
-.p-inputtext:focus,
+.p-inputtext:focus {
-.p-dropdown:focus,
-.p-multiselect:focus,
-.p-autocomplete:focus,
-.p-inputnumber input:focus {
   outline: none !important;
   border-color: #8b5cf6 !important;
   box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1) !important;
@@ -282,59 +274,3 @@ h1, h2, h3, h4, h5, h6 {
     background: rgba(255,255,255,0.1) !important;
     color: white !important;
 }
-
-/* --- ConfirmDialog --- */
-.p-confirmdialog {
-    background: #1e293b !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
-    border-radius: 1rem !important;
-}
-
-.p-confirmdialog .p-dialog-header {
-    background: transparent !important;
-    color: white !important;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
-}
-
-.p-confirmdialog .p-dialog-content {
-    background: transparent !important;
-    color: #f8fafc !important;
-    padding: 2rem !important;
-}
-
-.p-confirmdialog .p-dialog-footer {
-    background: transparent !important;
-    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
-    padding: 1rem !important;
-    display: flex !important;
-    justify-content: flex-end !important;
-    gap: 0.5rem !important;
-}
-
-/* --- Specific Button Styles --- */
-.p-button-danger {
-    background: #ef4444 !important;
-    border-color: #ef4444 !important;
-    color: white !important;
-}
-
-.p-button-danger:hover {
-    background: #dc2626 !important;
-    border-color: #dc2626 !important;
-}
-
-.p-button-secondary {
-    background: rgba(255, 255, 255, 0.1) !important;
-    border-color: transparent !important;
-    color: #94a3b8 !important;
-}
-
-.p-button-secondary:hover {
-    background: rgba(255, 255, 255, 0.15) !important;
-    color: white !important;
-}
-
-.p-button-text {
-    background: transparent !important;
-    border-color: transparent !important;
-}

src/components/AppSidebar.vue

@@ -3,7 +3,6 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useProjectsStore } from '@/stores/projectsStore'
-import { aiService } from '@/services/aiService'
 import { storeToRefs } from 'pinia'
 
 
@@ -14,17 +13,6 @@ const projectsStore = useProjectsStore()
 const { projects, currentProject } = storeToRefs(projectsStore)
 
 const selectedProject = ref(null)
-const usageCost = ref(0)
-
-const fetchUsage = async () => {
-    try {
-        // Fetch current context usage (user or project depending on header)
-        const report = await aiService.getUsageReport()
-        usageCost.value = report.summary?.total_cost || 0
-    } catch (e) {
-        console.error("Failed to fetch sidebar usage", e)
-    }
-}
 
 onMounted(async () => {
     // Ensure we have projects
@@ -35,7 +23,6 @@ onMounted(async () => {
     if (currentProject.value) {
         selectedProject.value = currentProject.value.id
     }
-    fetchUsage()
 })
 
 // Watch for external changes (like selecting from the list view)
@@ -83,13 +70,13 @@ const isActive = (path) => {
 
 const navItems = computed(() => {
     const items = [
-        // { path: '/', icon: '🏠', tooltip: 'Home' },
+        { path: '/', icon: '🏠', tooltip: 'Home' },
         { path: '/projects', icon: '📂', tooltip: 'Projects' },
-        { path: '/content-plan', icon: '📅', tooltip: 'Plan' },
+        { 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: '/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()) {
@@ -104,48 +91,52 @@ const navItems = computed(() => {
     <div class="contents">
         <!-- Sidebar (Desktop -> Top Bar) -->
         <nav
-            class="hidden md:flex glass-panel w-[calc(100%-2rem)] mx-4 mt-2 mb-1 flex-row items-center px-4 py-1.5 rounded-xl z-40 border border-white/5 bg-slate-900/50 backdrop-blur-md shrink-0 justify-between">
+            class="hidden md:flex glass-panel w-[calc(100%-2rem)] mx-4 mt-4 mb-2 flex-row items-center px-8 py-3 rounded-2xl z-40 border border-white/5 bg-slate-900/50 backdrop-blur-md shrink-0 justify-between">
 
             <!-- Logo -->
             <img src="/web-app-manifest-512x512.png" alt="Logo"
-                class="w-7 h-7 rounded-lg shadow-lg shadow-violet-500/20 shrink-0" />
+                class="w-10 h-10 rounded-xl shadow-lg shadow-violet-500/20 shrink-0" />
 
             <!-- Project Switcher -->
-            <div class="hidden lg:block ml-2 relative">
+            <div class="hidden lg:block ml-4 relative">
                 <button @click="isProjectMenuOpen = !isProjectMenuOpen"
-                    class="flex items-center gap-1.5 px-2 py-1 rounded-lg hover:bg-white/5 transition-colors text-slate-400 hover:text-slate-200 text-xs">
+                    class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-white/5 transition-colors text-slate-400 hover:text-slate-200">
-                    <i v-if="selectedProject" class="pi pi-folder text-violet-400 text-[10px]"></i>
+                    <i v-if="selectedProject" class="pi pi-folder text-violet-400"></i>
-                    <i v-else class="pi pi-user text-[10px]"></i>
+                    <i v-else class="pi pi-user"></i>
 
-                    <span class="max-w-[120px] truncate font-medium">
+                    <span class="max-w-[150px] truncate font-medium">
-                        {{ selectedProject ? getProjectName(selectedProject) : 'Personal' }}
+                        {{ selectedProject ? getProjectName(selectedProject) : 'Personal Workspace' }}
                     </span>
 
-                    <i class="pi pi-chevron-down text-[8px] opacity-50"></i>
+                    <i class="pi pi-chevron-down text-xs ml-1 opacity-50"></i>
                 </button>
 
                 <!-- Custom Dropdown Menu -->
                 <div v-if="isProjectMenuOpen"
-                    class="absolute top-full left-0 mt-1 w-48 bg-slate-900 border border-white/10 shadow-xl rounded-lg overflow-hidden z-50 py-1">
+                    class="absolute top-full left-0 mt-2 w-56 bg-slate-900 border border-white/10 shadow-xl rounded-xl overflow-hidden z-50 py-1">
 
                     <!-- Personal Workspace Option -->
                     <div @click="selectProject(null)"
-                        class="flex items-center gap-2 px-3 py-2 hover:bg-white/5 cursor-pointer transition-colors text-xs"
+                        class="flex items-center gap-3 px-4 py-3 hover:bg-white/5 cursor-pointer transition-colors"
                         :class="{ 'text-violet-400 bg-white/5': !selectedProject, 'text-slate-300': selectedProject }">
-                        <i class="pi pi-user text-[10px]"></i>
+                        <i class="pi pi-user"></i>
                         <span class="font-medium">Personal Workspace</span>
-                        <i v-if="!selectedProject" class="pi pi-check ml-auto text-[10px]"></i>
+                        <i v-if="!selectedProject" class="pi pi-check ml-auto text-sm"></i>
                     </div>
 
                     <div class="h-px bg-white/5 my-1"></div>
 
                     <!-- Project Options -->
                     <div v-for="project in projects" :key="project.id" @click="selectProject(project.id)"
-                        class="flex items-center gap-2 px-3 py-2 hover:bg-white/5 cursor-pointer transition-colors text-xs"
+                        class="flex items-center gap-3 px-4 py-3 hover:bg-white/5 cursor-pointer transition-colors"
                         :class="{ 'text-violet-400 bg-white/5': selectedProject === project.id, 'text-slate-300': selectedProject !== project.id }">
-                        <i class="pi pi-folder text-[10px]"></i>
+                        <i class="pi pi-folder"></i>
                         <span class="truncate">{{ project.name }}</span>
-                        <i v-if="selectedProject === project.id" class="pi pi-check ml-auto text-[10px]"></i>
+                        <i v-if="selectedProject === project.id" class="pi pi-check ml-auto text-sm"></i>
+                    </div>
+
+                    <div v-if="projects.length === 0" class="px-4 py-3 text-slate-500 text-sm font-italic">
+                        No projects found
                     </div>
                 </div>
 
@@ -155,33 +146,27 @@ const navItems = computed(() => {
             </div>
 
             <!-- Nav Items -->
-            <div class="flex flex-row gap-1 items-center justify-center flex-1 mx-4">
+            <div class="flex flex-row gap-2 items-center justify-center flex-1 mx-8">
                 <div v-for="item in navItems" :key="item.path" :class="[
-                    'px-3 py-1 flex items-center gap-1.5 rounded-lg cursor-pointer transition-all duration-300',
+                    'px-4 py-2 flex items-center gap-2 rounded-xl cursor-pointer transition-all duration-300',
                     isActive(item.path)
                         ? 'bg-white/10 text-slate-50 shadow-inner'
                         : 'text-slate-400 hover:bg-white/5 hover:text-slate-50'
                 ]" @click="router.push(item.path)" v-tooltip.bottom="item.tooltip">
-                    <span class="text-base">{{ item.icon }}</span>
+                    <span class="text-xl">{{ item.icon }}</span>
-                    <span class="text-[11px] font-medium hidden lg:block">{{ item.tooltip }}</span>
+                    <span class="text-sm font-medium hidden lg:block">{{ item.tooltip }}</span>
                 </div>
             </div>
 
             <!-- Right Actions -->
-            <div class="flex items-center gap-3 shrink-0">
+            <div class="flex items-center gap-4 shrink-0">
-                <!-- Usage Stat -->
-                <div v-if="usageCost > 0" class="hidden xl:flex flex-col items-end mr-1">
-                    <span class="text-[8px] font-bold text-slate-500 uppercase tracking-tighter">Usage</span>
-                    <span class="text-xs font-bold text-violet-400">${{ usageCost.toFixed(2) }}</span>
-                </div>
-
                 <div @click="handleLogout"
-                    class="w-7 h-7 rounded-lg bg-red-500/10 text-red-400 flex items-center justify-center cursor-pointer hover:bg-red-500/20 transition-all font-bold"
+                    class="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center cursor-pointer hover:bg-red-500/20 transition-all font-bold"
                     v-tooltip.bottom="'Logout'">
-                    <i class="pi pi-power-off text-xs"></i>
+                    <i class="pi pi-power-off"></i>
                 </div>
                 <!-- Profile Avatar Placeholder -->
-                <div class="w-7 h-7 rounded-full bg-slate-800 border-2 border-violet-600 flex items-center justify-center font-bold text-slate-50 cursor-pointer hover:scale-105 transition-all text-xs"
+                <div class="w-10 h-10 rounded-full bg-slate-800 border-2 border-violet-600 flex items-center justify-center font-bold text-slate-50 cursor-pointer hover:scale-105 transition-all"
                     title="Profile">
                     U
                 </div>
@@ -190,14 +175,14 @@ const navItems = computed(() => {
 
         <!-- Mobile Bottom Nav -->
         <nav
-            class="md:hidden fixed bottom-0 left-0 right-0 h-16 pb-4 bg-slate-900/90 backdrop-blur-xl border-t border-white/10 z-50 flex justify-around items-center px-2">
+            class="md:hidden fixed bottom-0 left-0 right-0 h-16 bg-slate-900/90 backdrop-blur-xl border-t border-white/10 z-50 flex justify-around items-center px-2">
             <div v-for="item in navItems" :key="item.path" :class="[
-                'flex flex-col items-center p-1.5 rounded-lg transition-all',
+                'flex flex-col items-center gap-1 p-2 rounded-xl transition-all',
                 isActive(item.path)
-                    ? 'text-white bg-white/10 shadow-lg shadow-violet-500/20 border border-violet-500/30'
+                    ? 'text-white bg-white/10 relative top-[-10px] shadow-lg shadow-violet-500/20 border border-violet-500/30'
                     : 'text-slate-400 hover:text-slate-200'
             ]" @click="router.push(item.path)">
-                <span class="text-lg">{{ item.icon }}</span>
+                <span class="text-xl">{{ item.icon }}</span>
             </div>
         </nav>
     </div>

src/components/GenerationImage.vue

@@ -1,177 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue'
-import Button from 'primevue/button'
-
-const props = defineProps({
-    generation: {
-        type: Object,
-        required: true
-    },
-    apiUrl: {
-        type: String,
-        required: true
-    },
-    isSelectMode: {
-        type: Boolean,
-        default: false
-    },
-    isSelected: {
-        type: Boolean,
-        default: false
-    },
-    showNsfwGlobal: {
-        type: Boolean,
-        default: false
-    },
-    activeOverlayId: {
-        type: [String, Number],
-        default: null
-    }
-})
-
-const emit = defineEmits(['toggle-select', 'open-preview', 'toggle-like', 'delete', 'reuse-prompt', 'reuse-asset', 'use-result', 'toggle-overlay', 'mark-nsfw'])
-
-const isTemporarilyUnblurred = ref(false)
-
-const isBlurred = computed(() => {
-    return (props.generation.is_nsfw || props.generation.nsfw) && !props.showNsfwGlobal && !isTemporarilyUnblurred.value
-})
-
-const toggleBlur = () => {
-    isTemporarilyUnblurred.value = !isTemporarilyUnblurred.value
-}
-
-const handleImageClick = (e) => {
-    if (props.isSelectMode) {
-        emit('toggle-select', props.generation.result_list[0])
-    } else {
-        if (isBlurred.value) {
-             emit('open-preview', props.apiUrl + '/assets/' + props.generation.result_list[0])
-        } else {
-            emit('open-preview', props.apiUrl + '/assets/' + props.generation.result_list[0])
-        }
-    }
-}
-
-const handleOverlayClick = () => {
-    emit('toggle-overlay', props.generation.id)
-}
-
-</script>
-
-<template>
-    <div class="w-full h-full relative group" @click="handleOverlayClick">
-        
-        <!-- Image -->
-        <div class="w-full h-full overflow-hidden relative">
-            <img v-if="generation.result_list && generation.result_list.length > 0"
-                :src="apiUrl + '/assets/' + generation.result_list[0] + '?thumbnail=true'"
-                class="w-full h-full object-cover transition-all duration-300"
-                :class="{ 'blur-xl scale-110': isBlurred, 'cursor-pointer': !isSelectMode }"
-                @click.stop="handleImageClick" 
-            />
-            
-            <!-- NSFW Badge / Unblur Button -->
-            <div v-if="isBlurred" class="absolute inset-0 flex flex-col items-center justify-center z-20 pointer-events-none">
-                <div class="bg-black/60 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/10 flex items-center gap-2 pointer-events-auto cursor-pointer hover:bg-black/80 transition-colors" @click.stop="toggleBlur">
-                    <i class="pi pi-eye-slash text-red-400 text-xs"></i>
-                    <span class="text-[10px] font-bold text-red-400 uppercase tracking-wider">NSFW</span>
-                </div>
-            </div>
-        </div>
-
-        <!-- Liked badge -->
-        <div v-if="generation.is_liked && !isBlurred"
-            class="absolute top-2 right-2 z-20 w-6 h-6 rounded-full bg-pink-500 shadow-lg flex items-center justify-center border border-pink-400">
-            <i class="pi pi-heart-fill text-white text-[10px]"></i>
-        </div>
-
-        <!-- FAILED state -->
-        <div v-if="generation.status === 'failed'"
-            class="absolute inset-0 flex flex-col items-center justify-between p-3 text-center bg-red-500/10 border border-red-500/20">
-            <div class="w-full flex justify-end">
-                <Button icon="pi pi-trash" 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="emit('delete', generation)" />
-            </div>
-            <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="generation.failed_reason" class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight"
-                    v-tooltip.top="generation.failed_reason">{{ generation.failed_reason }}</span>
-            </div>
-            <div class="w-full flex gap-1 z-10">
-                <Button icon="pi pi-comment" class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
-                    @click.stop="emit('reuse-prompt', generation)" />
-                <Button icon="pi pi-images" class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
-                    @click.stop="emit('reuse-asset', generation)" />
-            </div>
-        </div>
-
-        <!-- PROCESSING state -->
-        <div v-else-if="['processing', 'starting', 'running'].includes(generation.status)"
-            class="absolute inset-0 flex flex-col items-center justify-center 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>
-            <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">{{ generation.status }}...</span>
-        </div>
-
-        <!-- HOVER OVERLAY (Success & Not Blurred) -->
-        <div v-if="generation.result_list && generation.result_list.length > 0 && !isBlurred"
-            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 !== generation.id, 'opacity-100 pointer-events-auto': activeOverlayId === generation.id }">
-
-            <!-- Top Right -->
-            <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 :icon="generation.is_liked ? 'pi pi-heart-fill' : 'pi pi-heart'"
-                        class="!w-6 !h-6 !rounded-full !border-none !text-[10px] transition-colors"
-                        :class="generation.is_liked ? '!bg-pink-500 !text-white' : '!bg-white/20 !text-white hover:!bg-pink-500'"
-                        @click.stop="emit('toggle-like', generation)" />
-                    <Button icon="pi pi-pencil"
-                        class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
-                        @click.stop="emit('use-result', generation)" />
-                    <Button :icon="(generation.is_nsfw || generation.nsfw) ? 'pi pi-eye' : 'pi pi-eye-slash'"
-                        class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-red-500 hover:!text-white"
-                        @click.stop="emit('mark-nsfw', generation)"
-                        v-tooltip.bottom="(generation.is_nsfw || generation.nsfw) ? 'Unmark NSFW' : 'Mark NSFW'" />
-                    <Button icon="pi pi-trash"
-                        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="emit('delete', generation)" />
-                </div>
-            </div>
-
-            <!-- Center -->
-            <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none z-0">
-                <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">{{ generation.cost }} $</span>
-                    <span v-if="generation.execution_time_seconds" class="text-[8px] text-slate-500 font-mono">{{ generation.execution_time_seconds.toFixed(1) }}s</span>
-                </div>
-                <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="emit('open-preview', apiUrl + '/assets/' + generation.result_list[0])" />
-            </div>
-
-            <!-- Bottom -->
-            <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" class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
-                        @click.stop="emit('reuse-prompt', generation)" />
-                    <Button icon="pi pi-images" class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
-                        @click.stop="emit('reuse-asset', generation)" />
-                </div>
-                <p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ generation.prompt }}</p>
-            </div>
-        </div>
-
-        <!-- Select mode checkbox overlay -->
-        <div v-if="isSelectMode && generation.result_list && generation.result_list.length > 0"
-            class="absolute inset-0 z-30 cursor-pointer"
-            @click.stop="emit('toggle-select', generation.result_list[0])">
-            <div class="absolute top-2 left-2 w-6 h-6 rounded-lg flex items-center justify-center transition-all"
-                :class="isSelected ? 'bg-violet-600 text-white' : 'bg-black/40 border border-white/30 text-transparent hover:border-white/60'">
-                <i class="pi pi-check" style="font-size: 12px"></i>
-            </div>
-            <div v-if="isSelected" class="absolute inset-0 bg-violet-600/20 pointer-events-none"></div>
-        </div>
-    </div>
-</template>

src/components/GenerationPreviewModal.vue

@@ -1,362 +0,0 @@
-<script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
-import Dialog from 'primevue/dialog'
-import Button from 'primevue/button'
-import Tag from 'primevue/tag'
-import { dataService } from '../services/dataService'
-
-const props = defineProps({
-    visible: {
-        type: Boolean,
-        default: false
-    },
-    previewImages: {
-        type: Array,
-        default: () => []
-    },
-    initialIndex: {
-        type: Number,
-        default: 0
-    },
-    apiUrl: {
-        type: String,
-        default: ''
-    }
-})
-
-const emit = defineEmits(['update:visible', 'reusePrompt', 'reuseAsset', 'useResultAsAsset', 'liked'])
-
-const previewIndex = ref(0)
-const previewImage = computed(() => props.previewImages[previewIndex.value] || null)
-
-// Like state management
-const isTogglingLike = ref(false)
-const localLikedStates = ref({}) // id -> bool
-
-const isLiked = computed(() => {
-    if (!previewImage.value?.gen) return false
-    const id = previewImage.value.gen.id || previewImage.value.gen._id
-    if (localLikedStates.value[id] !== undefined) return localLikedStates.value[id]
-    return previewImage.value.gen.is_liked || false
-})
-
-const toggleLike = async () => {
-    const id = previewImage.value?.gen?.id || previewImage.value?.gen?._id
-    if (!id || isTogglingLike.value) return
-    
-    isTogglingLike.value = true
-    try {
-        const response = await dataService.toggleLike(id)
-        // Assume response returns the new state or we just toggle it
-        const newState = response.is_liked !== undefined ? response.is_liked : !isLiked.value
-        localLikedStates.value[id] = newState
-        emit('liked', { id, is_liked: newState })
-    } catch (e) {
-        console.error('Failed to toggle like', e)
-    } finally {
-        isTogglingLike.value = false
-    }
-}
-
-// Reset index when modal opens
-watch(() => props.visible, (newVal) => {
-    if (newVal) {
-        previewIndex.value = props.initialIndex
-        window.addEventListener('keydown', handlePreviewKeydown)
-    } else {
-        window.removeEventListener('keydown', handlePreviewKeydown)
-    }
-})
-
-const close = () => {
-    emit('update:visible', false)
-}
-
-const navigatePreview = (direction) => {
-    const count = props.previewImages.length
-    if (count <= 1) return
-    let newIndex = previewIndex.value + direction
-    if (newIndex < 0) newIndex = count - 1
-    if (newIndex >= count) newIndex = 0
-    previewIndex.value = newIndex
-}
-
-const handlePreviewKeydown = (e) => {
-    if (!props.visible) return
-    if (e.key === 'ArrowLeft') { navigatePreview(-1); e.preventDefault() }
-    if (e.key === 'ArrowRight') { navigatePreview(1); e.preventDefault() }
-    if (e.key === 'Escape') { close(); e.preventDefault() }
-}
-
-onBeforeUnmount(() => {
-    window.removeEventListener('keydown', handlePreviewKeydown)
-})
-
-const formatDate = (dateString) => {
-    if (!dateString) return ''
-    const date = new Date(dateString)
-    return date.toLocaleString('ru-RU', {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit'
-    })
-}
-
-const copyToClipboard = (text) => {
-    if (!text) return
-    navigator.clipboard.writeText(text).then(() => {
-        // Parent could show a toast if needed, or we just log
-        console.log('Copied to clipboard')
-    })
-}
-
-// Actions
-const onReusePrompt = () => {
-    if (previewImage.value?.gen) emit('reusePrompt', previewImage.value.gen)
-}
-
-const onReuseAsset = () => {
-    if (previewImage.value?.gen) emit('reuseAsset', previewImage.value.gen)
-}
-
-const onUseResultAsAsset = () => {
-    if (previewImage.value?.gen) emit('useResultAsAsset', previewImage.value.gen)
-}
-</script>
-
-<template>
-    <Dialog :visible="visible" @update:visible="val => emit('update:visible', val)" modal dismissableMask
-        :style="{ width: '95vw', maxWidth: '1200px' }"
-        class="preview-dialog"
-        :pt="{ 
-            root: { class: '!bg-transparent !border-none !shadow-none' }, 
-            header: { class: '!hidden' }, 
-            content: { class: '!p-0 !bg-transparent' } 
-        }">
-        
-        <div v-if="previewImage" class="flex flex-col lg:flex-row h-[90vh] w-full overflow-hidden relative bg-slate-900/95 backdrop-blur-xl border border-white/10 shadow-2xl rounded-3xl" @click.stop>
-            
-            <!-- Left: Image Viewer -->
-            <div class="flex-1 bg-black/40 flex items-center justify-center relative min-h-[40vh] lg:min-h-0 border-r border-white/5">
-                
-                <!-- Navigation Buttons -->
-                <Button v-if="previewImages.length > 1" icon="pi pi-chevron-left" @click.stop="navigatePreview(-1)"
-                    rounded text
-                    class="!absolute left-4 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/10 backdrop-blur-md transition-all hover:scale-110" />
-
-                <Button v-if="previewImages.length > 1" icon="pi pi-chevron-right" @click.stop="navigatePreview(1)"
-                    rounded text
-                    class="!absolute right-4 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/10 backdrop-blur-md transition-all hover:scale-110" />
-
-                <!-- Main Image -->
-                <img :src="previewImage.url"
-                    class="max-w-full max-h-[85vh] object-contain shadow-2xl transition-transform duration-300"
-                    draggable="false" />
-
-                <!-- Like Button Overlay -->
-                <button v-if="previewImage?.gen" @click.stop="toggleLike"
-                    class="absolute top-6 left-6 z-30 w-12 h-12 rounded-full backdrop-blur-md flex items-center justify-center transition-all hover:scale-110 active:scale-90 border border-white/10"
-                    :class="isLiked ? 'bg-pink-500 text-white border-pink-400 shadow-[0_0_20px_rgba(236,72,153,0.4)]' : 'bg-black/40 text-white/70 hover:text-white'">
-                    <i :class="isLiked ? 'pi pi-heart-fill' : 'pi pi-heart'" class="text-xl"></i>
-                </button>
-
-                <!-- Image Index Badge -->
-                <div v-if="previewImages.length > 1"
-                    class="absolute bottom-4 left-1/2 -translate-x-1/2 z-20 bg-black/60 backdrop-blur-md text-white text-xs font-mono px-3 py-1.5 rounded-full border border-white/10">
-                    {{ previewIndex + 1 }} / {{ previewImages.length }}
-                </div>
-
-                <!-- Close Button (Mobile Only) -->
-                <Button icon="pi pi-times" @click="close" rounded text
-                    class="absolute top-4 right-4 z-30 lg:hidden !text-white !bg-black/50 !w-10 !h-10" />
-            </div>
-
-            <!-- Right: Generation Info & Actions -->
-            <div class="w-full lg:w-96 flex flex-col bg-slate-900/50 backdrop-blur-md overflow-hidden">
-                
-                <!-- Header -->
-                <div class="p-5 border-b border-white/10 flex justify-between items-center">
-                    <div>
-                        <h3 class="text-lg font-bold text-white m-0">Generation Details</h3>
-                        <p class="text-[10px] text-slate-500 font-mono uppercase tracking-widest mt-0.5">
-                            {{ previewImage?.gen?.id || previewImage?.gen?._id || 'Unknown ID' }}
-                        </p>
-                    </div>
-                    <Button icon="pi pi-times" @click="close" rounded text
-                        class="!hidden lg:!flex !text-slate-500 hover:!text-white !w-8 !h-8" />
-                </div>
-
-                <!-- Scrollable Content -->
-                <div class="flex-1 overflow-y-auto p-5 custom-scrollbar flex flex-col gap-6">
-                    
-                    <!-- Actions Section -->
-                    <div v-if="previewImage?.gen" class="flex flex-col gap-2">
-                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Actions</label>
-                        <div class="grid grid-cols-1 gap-2">
-                            <Button :label="isLiked ? 'Liked' : 'Like'" :icon="isLiked ? 'pi pi-heart-fill' : 'pi pi-heart'" 
-                                @click="toggleLike" :loading="isTogglingLike"
-                                :class="[
-                                    '!text-sm !justify-start',
-                                    isLiked ? '!bg-pink-600/20 !border-pink-500/30 !text-pink-400 hover:!bg-pink-600/30' : '!bg-slate-800/50 !border-white/10 !text-slate-300 hover:!bg-slate-800'
-                                ]" />
-
-                            <Button label="Reuse Prompt" icon="pi pi-refresh" @click="onReusePrompt"
-                                class="!bg-violet-600/10 !border-violet-500/30 !text-violet-400 hover:!bg-violet-600/20 !text-sm !justify-start" />
-                            
-                            <Button label="Reuse References" icon="pi pi-clone" @click="onReuseAsset"
-                                class="!bg-blue-600/10 !border-blue-500/30 !text-blue-400 hover:!bg-blue-600/20 !text-sm !justify-start" />
-                            
-                            <Button label="Reference Result" icon="pi pi-image" @click="onUseResultAsAsset"
-                                class="!bg-emerald-600/10 !border-emerald-500/30 !text-emerald-400 hover:!bg-emerald-600/20 !text-sm !justify-start" />
-                        </div>
-                    </div>
-
-                    <!-- Prompt Section -->
-                    <div v-if="previewImage?.gen?.prompt" class="flex flex-col gap-2">
-                        <div class="flex justify-between items-center px-1">
-                            <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Prompt</label>
-                            <Button icon="pi pi-copy" @click="copyToClipboard(previewImage.gen.prompt)" 
-                                text class="!p-0 !w-6 !h-6 !text-slate-500 hover:!text-white" v-tooltip.top="'Copy Prompt'" />
-                        </div>
-                        <div class="bg-black/30 p-3 rounded-xl border border-white/5 text-sm text-slate-300 leading-relaxed max-h-40 overflow-y-auto custom-scrollbar">
-                            {{ previewImage.gen.prompt }}
-                        </div>
-                    </div>
-
-                    <!-- Technical Data -->
-                    <div v-if="previewImage?.gen" class="flex flex-col gap-2">
-                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Technical Data</label>
-                        <div class="flex flex-col gap-3 bg-black/20 p-4 rounded-xl border border-white/5">
-                            <!-- Grid for main params -->
-                            <div class="grid grid-cols-2 gap-3">
-                                <div class="flex flex-col gap-0.5">
-                                    <span class="text-[10px] text-slate-500 uppercase">Model</span>
-                                    <span class="text-xs text-violet-400 font-bold truncate" :title="previewImage.gen.model">{{ previewImage.gen.model || 'N/A' }}</span>
-                                </div>
-                                <div v-if="previewImage.gen.seed !== undefined && previewImage.gen.seed !== null" class="flex flex-col gap-0.5">
-                                    <span class="text-[10px] text-slate-500 uppercase">Seed</span>
-                                    <div class="flex items-center gap-1">
-                                        <span class="text-xs text-slate-200 font-mono">{{ previewImage.gen.seed }}</span>
-                                        <Button icon="pi pi-copy" @click="copyToClipboard(previewImage.gen.seed.toString())" 
-                                            text class="!p-0 !w-3 !h-3 !text-slate-500 hover:!text-white" />
-                                    </div>
-                                </div>
-                                <div class="flex flex-col gap-0.5">
-                                    <span class="text-[10px] text-slate-500 uppercase">Quality</span>
-                                    <span class="text-xs text-slate-200 font-semibold">{{ previewImage.gen.quality || 'N/A' }}</span>
-                                </div>
-                                <div class="flex flex-col gap-0.5">
-                                    <span class="text-[10px] text-slate-500 uppercase">Aspect Ratio</span>
-                                    <span class="text-xs text-slate-200 font-semibold">{{ previewImage.gen.aspect_ratio || 'N/A' }}</span>
-                                </div>
-                                <div class="flex flex-col gap-0.5">
-                                    <span class="text-[10px] text-slate-500 uppercase">Execution Time</span>
-                                    <span class="text-xs text-slate-200 font-semibold">{{ previewImage.gen.execution_time_seconds?.toFixed(2) || '0' }}s (API: {{ previewImage.gen.api_execution_time_seconds?.toFixed(2) || '0' }}s)</span>
-                                </div>
-                                <div class="flex flex-col gap-0.5">
-                                    <span class="text-[10px] text-slate-500 uppercase">Cost</span>
-                                    <span class="text-xs text-emerald-400 font-bold">${{ previewImage.gen.cost?.toFixed(4) || '0.00' }}</span>
-                                </div>
-                            </div>
-
-                            <div class="h-px bg-white/5 w-full"></div>
-
-                            <!-- Tokens Section -->
-                            <div class="flex flex-col gap-2">
-                                <span class="text-[10px] text-slate-500 uppercase">Token Usage</span>
-                                <div class="grid grid-cols-3 gap-2">
-                                    <div class="flex flex-col bg-white/5 p-2 rounded-lg items-center">
-                                        <span class="text-[8px] text-slate-500 uppercase">Input</span>
-                                        <span class="text-[10px] text-slate-200 font-mono">{{ previewImage.gen.input_token_usage || 0 }}</span>
-                                    </div>
-                                    <div class="flex flex-col bg-white/5 p-2 rounded-lg items-center">
-                                        <span class="text-[8px] text-slate-500 uppercase">Output</span>
-                                        <span class="text-[10px] text-slate-200 font-mono">{{ previewImage.gen.output_token_usage || 0 }}</span>
-                                    </div>
-                                    <div class="flex flex-col bg-violet-600/20 p-2 rounded-lg items-center border border-violet-500/20">
-                                        <span class="text-[8px] text-violet-400 uppercase">Total</span>
-                                        <span class="text-[10px] text-violet-300 font-bold font-mono">{{ previewImage.gen.token_usage || 0 }}</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="h-px bg-white/5 w-full"></div>
-
-                            <!-- Technical Prompt -->
-                            <div v-if="previewImage?.gen?.tech_prompt" class="flex flex-col gap-2">
-                                <div class="flex justify-between items-center">
-                                    <span class="text-[10px] text-slate-500 uppercase">Technical Prompt</span>
-                                    <Button icon="pi pi-copy" @click="copyToClipboard(previewImage.gen.tech_prompt)" 
-                                        text class="!p-0 !w-4 !h-4 !text-slate-500 hover:!text-white" />
-                                </div>
-                                <div class="bg-black/40 p-2 rounded-lg border border-white/5 text-[10px] font-mono text-slate-400 leading-relaxed max-h-24 overflow-y-auto custom-scrollbar whitespace-pre-wrap">
-                                    {{ previewImage.gen.tech_prompt }}
-                                </div>
-                            </div>
-
-                            <div class="h-px bg-white/5 w-full"></div>
-
-                            <!-- Metadata -->
-                            <div class="flex flex-col gap-1.5 text-[10px]">
-                                <div class="flex justify-between">
-                                    <span class="text-slate-500 uppercase">Created:</span>
-                                    <span class="text-slate-300">{{ formatDate(previewImage.gen.created_at) }}</span>
-                                </div>
-                                <div v-if="previewImage.gen.generation_group_id" class="flex justify-between">
-                                    <span class="text-slate-500 uppercase">Group ID:</span>
-                                    <span class="text-slate-300 font-mono">{{ previewImage.gen.generation_group_id }}</span>
-                                </div>
-                                <div v-if="previewImage.gen.idea_id" class="flex justify-between">
-                                    <span class="text-slate-500 uppercase">Idea ID:</span>
-                                    <span class="text-slate-300 font-mono">{{ previewImage.gen.idea_id }}</span>
-                                </div>
-                                <div class="flex justify-between">
-                                    <span class="text-slate-500 uppercase">Status:</span>
-                                    <Tag :value="previewImage.gen.status" 
-                                        :severity="previewImage.gen.status === 'done' ? 'success' : (previewImage.gen.status === 'failed' ? 'danger' : 'info')" 
-                                        class="!text-[8px] !px-1.5 !py-0 w-fit h-4" />
-                                </div>
-                                <div v-if="previewImage.gen.failed_reason" class="flex flex-col gap-1 mt-1 p-2 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400">
-                                    <span class="uppercase font-bold">Error:</span>
-                                    <span class="italic">{{ previewImage.gen.failed_reason }}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- References Used -->
-                    <div v-if="previewImage?.gen?.assets_list?.length > 0" class="flex flex-col gap-2">
-                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">References Used</label>
-                        <div class="flex flex-wrap gap-2">
-                            <div v-for="assetId in previewImage.gen.assets_list" :key="assetId"
-                                class="w-10 h-10 rounded-lg overflow-hidden border border-white/10 shadow-lg">
-                                <img :src="apiUrl + '/assets/' + assetId + '?thumbnail=true'" 
-                                    class="w-full h-full object-cover" />
-                            </div>
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-
-        </div>
-    </Dialog>
-</template>
-
-<style scoped>
-.custom-scrollbar::-webkit-scrollbar {
-    width: 4px;
-}
-.custom-scrollbar::-webkit-scrollbar-track {
-    background: transparent;
-}
-.custom-scrollbar::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-}
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.2);
-}
-</style>

src/router/index.js

@@ -58,25 +58,15 @@ const router = createRouter({
       component: () => import('../views/FlexibleGenerationView.vue')
     },
     {
-      path: '/content-plan',
+      path: '/video',
-      name: 'content-plan',
+      name: 'video',
-      component: () => import('../views/ContentPlanView.vue')
+      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

@@ -52,10 +52,9 @@ export const aiService = {
   },
 
   // Get generations history
-  async getGenerations(limit, offset, characterId, onlyLiked = false) {
+  async getGenerations(limit, offset, characterId) {
     const params = { limit, offset }
     if (characterId) params.character_id = characterId
-    if (onlyLiked) params.only_liked = true
     const response = await api.get('/generations', { params })
     return response.data
   },
@@ -69,28 +68,16 @@ export const aiService = {
     return response.data
   },
 
-  // Mark generation as NSFW
+  // Run video generation task
-  async markGenerationNsfw(generationId, isNsfw = true) {
+  async runVideoGeneration(payload) {
-    const response = await api.post(`/generations/${generationId}/nsfw`, { 
+    const response = await api.post('/generations/video/_run', payload)
-      is_nsfw: isNsfw 
-    })
     return response.data
   },
 
-  // Get usage statistics (runs, tokens, cost)
+  // Get video generations history
-  async getUsageReport(breakdown = null, projectId = null) {
+  async getVideoGenerations(limit, offset) {
-    const params = {}
+    const params = { limit, offset, gen_type: 'Video' }
-    if (breakdown) params.breakdown = breakdown
+    const response = await api.get('/generations', { params })
-    
-    const config = { params, headers: {} }
-    if (projectId) {
-      config.headers['X-Project-ID'] = projectId
-    } else if (projectId === false) {
-      // Explicitly ignore current active project header
-      config.headers['X-Project-ID'] = ''
-    }
-    
-    const response = await api.get('/generations/usage', config)
     return response.data
   }
 }

src/services/dataService.js

@@ -13,25 +13,6 @@ export const dataService = {
         return response.data
     },
 
-    getAssetMetadata: async (id) => {
-        const response = await api.head(`/assets/${id}`)
-        return {
-            content_type: response.headers['content-type'],
-            content_length: response.headers['content-length']
-        }
-    },
-    
-    downloadAsset: async (id) => {
-        // Return full response to access headers
-        const response = await api.get(`/assets/${id}`, {
-            responseType: 'blob',
-            headers: {
-                'Range': 'bytes=0-' // Explicitly request full content to play nice with backend streaming
-            }
-        });
-        return response;
-    },
-
     getCharacters: async () => {
         // Spec says /api/characters/ (with trailing slash) but usually client shouldn't matter too much if config is good,
         // but let's follow spec if strictly needed. Axios usually handles this.
@@ -54,14 +35,12 @@ export const dataService = {
         return response.data
     },
 
-    getAssetsByCharacterId: async (charId, limit, offset, type) => {
+    getAssetsByCharacterId: async (charId, limit, offset) => {
-        const params = { limit, offset }
+        const response = await api.get(`/characters/${charId}/assets`, { params: { limit, offset } })
-        if (type && type !== 'all') params.type = type
-        const response = await api.get(`/characters/${charId}/assets`, { params })
         return response.data
     },
 
-    uploadAsset: async (file, linkedCharId, onProgress) => {
+    uploadAsset: async (file, linkedCharId) => {
         const formData = new FormData()
         formData.append('file', file)
         if (linkedCharId) formData.append('linked_char_id', linkedCharId)
@@ -69,12 +48,6 @@ export const dataService = {
         const response = await api.post('/assets/upload', formData, {
             headers: {
                 'Content-Type': 'multipart/form-data'
-            },
-            onUploadProgress: (progressEvent) => {
-                if (onProgress && progressEvent.total) {
-                    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
-                    onProgress(percentCompleted)
-                }
             }
         })
         return response.data
@@ -85,38 +58,11 @@ export const dataService = {
         return response.data
     },
 
-    toggleLike: async (id) => {
-        const response = await api.post(`/generations/${id}/like`)
-        return response.data
-    },
-
     deleteGeneration: async (id) => {
         const response = await api.delete(`/generations/${id}`)
         return response.data
     },
 
-    // Environments
-    getEnvironments: async (characterId) => {
-        if (!characterId) return []
-        const response = await api.get(`/environments/character/${characterId}`)
-        return response.data
-    },
-
-    createEnvironment: async (envData) => {
-        const response = await api.post('/environments/', envData)
-        return response.data
-    },
-
-    updateEnvironment: async (id, envData) => {
-        const response = await api.put(`/environments/${id}`, envData)
-        return response.data
-    },
-
-    deleteEnvironment: async (id) => {
-        const response = await api.delete(`/environments/${id}`)
-        return response.data
-    },
-
     generatePromptFromImage: async (files, prompt) => {
         const formData = new FormData()
         

src/services/ideaService.js

@@ -1,16 +0,0 @@
-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, onlyLiked = false) => {
-    const params = { limit, offset };
-    if (onlyLiked) params.only_liked = true;
-    return api.get(`/ideas/${ideaId}/generations`, { params });
-  }
-};

src/services/inspirationService.js

@@ -1,10 +0,0 @@
-import api from './api';
-
-export const inspirationService = {
-    getInspirations: (limit = 20, offset = 0) => api.get('/inspirations', { params: { limit, offset } }),
-    getInspiration: (id) => api.get(`/inspirations/${id}`),
-    createInspiration: (data) => api.post('/inspirations', data),
-    updateInspiration: (id, data) => api.put(`/inspirations/${id}`, data),
-    deleteInspiration: (id) => api.delete(`/inspirations/${id}`),
-    completeInspiration: (id, is_completed = true) => api.patch(`/inspirations/${id}/complete`, null, { params: { is_completed } })
-};

src/services/postService.js

@@ -1,24 +0,0 @@
-import api from './api';
-
-export const postService = {
-  getPosts: (dateFrom, dateTo) => {
-    const params = {};
-    if (dateFrom) params.date_from = dateFrom;
-    if (dateTo) params.date_to = dateTo;
-    return api.get('/posts', { params }).then(r => r.data);
-  },
-
-  createPost: (data) => api.post('/posts', data).then(r => r.data),
-
-  getPost: (id) => api.get(`/posts/${id}`).then(r => r.data),
-
-  updatePost: (id, data) => api.put(`/posts/${id}`, data).then(r => r.data),
-
-  deletePost: (id) => api.delete(`/posts/${id}`).then(r => r.data),
-
-  addGenerations: (postId, generationIds) =>
-    api.post(`/posts/${postId}/generations`, { generation_ids: generationIds }).then(r => r.data),
-
-  removeGeneration: (postId, generationId) =>
-    api.delete(`/posts/${postId}/generations/${generationId}`).then(r => r.data),
-};

src/stores/ideas.js

@@ -1,265 +0,0 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-import { ideaService } from '../services/ideaService';
-import { inspirationService } from '../services/inspirationService';
-
-export const useIdeaStore = defineStore('ideas', () => {
-  const ideas = ref([]);
-  const inspirations = ref([]);
-  const currentIdea = ref(null);
-  const currentInspiration = ref(null); // New state
-  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 {
-      const response = await ideaService.createIdea(data);
-      await fetchIdeas(); // Refresh list
-      return response.data;
-    } catch (err) {
-      console.error('Error creating idea:', err);
-      error.value = err.response?.data?.detail || 'Failed to create idea';
-      return null;
-    } 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;
-    }
-  }
-
-  // New action to fetch a single inspiration
-  async function fetchInspiration(id) {
-    loading.value = true;
-    error.value = null;
-    currentInspiration.value = null;
-    try {
-      const response = await inspirationService.getInspiration(id);
-      currentInspiration.value = response.data;
-      return response.data;
-    } catch (err) {
-      console.error('Error fetching inspiration:', err);
-      error.value = err.response?.data?.detail || 'Failed to fetch inspiration';
-      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, onlyLiked = false) {
-      try {
-          const response = await ideaService.getIdeaGenerations(ideaId, limit, offset, onlyLiked);
-          return response;
-      } catch (err) {
-          console.error('Error fetching idea generations:', err);
-          return { data: [] };
-      }
-  }
-
-  // --- Inspirations ---
-  async function fetchInspirations(limit = 20, offset = 0) {
-      loading.value = true;
-      try {
-          const response = await inspirationService.getInspirations(limit, offset);
-          inspirations.value = response.data.inspirations || response.data;
-      } catch (err) {
-          console.error('Error fetching inspirations:', err);
-          error.value = err.response?.data?.detail || 'Failed to fetch inspirations';
-      } finally {
-          loading.value = false;
-      }
-  }
-
-  async function createInspiration(data) {
-      loading.value = true;
-      try {
-          await inspirationService.createInspiration(data);
-          await fetchInspirations();
-          return true;
-      } catch (err) {
-          console.error('Error creating inspiration:', err);
-          error.value = err.response?.data?.detail || 'Failed to create inspiration';
-          return false;
-      } finally {
-          loading.value = false;
-      }
-  }
-
-  async function updateInspiration(id, data) {
-      loading.value = true;
-      try {
-          await inspirationService.updateInspiration(id, data);
-          await fetchInspirations();
-          return true;
-      } catch (err) {
-          console.error('Error updating inspiration:', err);
-          error.value = err.response?.data?.detail || 'Failed to update inspiration';
-          return false;
-      } finally {
-          loading.value = false;
-      }
-  }
-
-  async function deleteInspiration(id) {
-      loading.value = true;
-      try {
-          await inspirationService.deleteInspiration(id);
-          await fetchInspirations();
-          return true;
-      } catch (err) {
-          console.error('Error deleting inspiration:', err);
-          error.value = err.response?.data?.detail || 'Failed to delete inspiration';
-          return false;
-      } finally {
-          loading.value = false;
-      }
-  }
-
-  async function completeInspiration(id) {
-      loading.value = true;
-      try {
-          await inspirationService.completeInspiration(id);
-          await fetchInspirations();
-          return true;
-      } catch (err) {
-          console.error('Error completing inspiration:', err);
-          error.value = err.response?.data?.detail || 'Failed to complete inspiration';
-          return false;
-      } finally {
-          loading.value = false;
-      }
-  }
-
-  return {
-    ideas,
-    inspirations,
-    currentIdea,
-    currentInspiration,
-    loading,
-    error,
-    totalIdeas,
-    fetchIdeas,
-    createIdea,
-    fetchIdea,
-    updateIdea,
-    deleteIdea,
-    addGenerationToIdea,
-    removeGenerationFromIdea,
-    fetchIdeaGenerations,
-    fetchInspirations,
-    createInspiration,
-    updateInspiration,
-    deleteInspiration,
-    completeInspiration,
-    fetchInspiration
-  };
-});

src/views/AlbumDetailView.vue

@@ -9,11 +9,9 @@ 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'
 
-import GenerationPreviewModal from '../components/GenerationPreviewModal.vue'
-import { dataService } from '../services/dataService'
-
 const route = useRoute()
 const router = useRouter()
 const albumStore = useAlbumStore()
@@ -23,32 +21,6 @@ const confirm = useConfirm()
 const generations = ref([])
 const loadingGenerations = ref(false)
 
-// Preview Modal State
-const isImagePreviewVisible = ref(false)
-const previewIndex = ref(0)
-const previewImages = computed(() => {
-    return generations.value.map(gen => ({
-        url: API_URL + '/assets/' + (gen.result_list?.[0] || ''),
-        assetId: gen.result_list?.[0],
-        is_liked: gen.liked_assets?.includes(gen.result_list?.[0]),
-        gen: gen
-    }))
-})
-
-const handleLiked = ({ id, is_liked }) => {
-    // Update local state in generations
-    generations.value.forEach(gen => {
-        if (gen.result_list?.includes(id)) {
-            if (!gen.liked_assets) gen.liked_assets = []
-            if (is_liked) {
-                if (!gen.liked_assets.includes(id)) gen.liked_assets.push(id)
-            } else {
-                gen.liked_assets = gen.liked_assets.filter(aid => aid !== id)
-            }
-        }
-    })
-}
-
 // Gen Picker State
 const isGenerationPickerVisible = ref(false)
 const availableGenerations = ref([])
@@ -157,13 +129,6 @@ const removeGeneration = (gen) => {
         }
     })
 }
-
-// --- Image Preview ---
-const openImagePreview = (gen) => {
-    const idx = generations.value.findIndex(g => g.id === gen.id)
-    previewIndex.value = idx >= 0 ? idx : 0
-    isImagePreviewVisible.value = true
-}
 </script>
 
 <template>
@@ -218,17 +183,9 @@ const openImagePreview = (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 cursor-pointer"
+                    <div class="aspect-[2/3] w-full bg-slate-800 relative overflow-hidden">
-                        @click="gen.result_list && gen.result_list.length > 0 ? openImagePreview(gen) : null">
+                        <Image :src="gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true'"
-                        <img v-if="gen.result_list && gen.result_list.length > 0"
+                            preview class="w-full h-full object-cover" imageClass="w-full h-full object-cover" />
-                            :src="gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true'"
-                            class="w-full h-full object-cover" />
-
-                        <!-- Liked Badge -->
-                        <div v-if="gen.liked_assets?.includes(gen.result_list?.[0])" 
-                            class="absolute top-2 right-2 z-10 w-6 h-6 rounded-full bg-pink-500 shadow-lg flex items-center justify-center border border-pink-400">
-                            <i class="pi pi-heart-fill text-white text-[10px]"></i>
-                        </div>
 
                         <!-- Overlay Actions -->
                         <div
@@ -273,7 +230,7 @@ const openImagePreview = (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]}`)"
+                            :src="gen.result_list[0].includes('http') ? gen.result_list[0] : (gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true')"
                             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">
@@ -306,15 +263,6 @@ const openImagePreview = (gen) => {
             </template>
         </Dialog>
 
-        <!-- Image Preview Modal -->
-        <GenerationPreviewModal 
-            v-model:visible="isImagePreviewVisible"
-            :preview-images="previewImages"
-            :initial-index="previewIndex"
-            :api-url="API_URL"
-            @liked="handleLiked"
-        />
-
     </div>
 </template>
 

src/views/AssetsView.vue

@@ -17,8 +17,6 @@ import InputText from 'primevue/inputtext'
 import Textarea from 'primevue/textarea'
 import Image from 'primevue/image'
 
-import GenerationPreviewModal from '../components/GenerationPreviewModal.vue'
-
 const router = useRouter()
 const confirm = useConfirm()
 const toast = useToast()
@@ -28,28 +26,6 @@ const activeFilter = ref('all')
 // @ts-ignore
 const API_URL = import.meta.env.VITE_API_URL
 
-// Preview Modal State
-const isImagePreviewVisible = ref(false)
-const previewIndex = ref(0)
-const previewImages = computed(() => {
-    return assets.value.map(asset => ({
-        url: API_URL + (asset.url || asset.link),
-        assetId: asset.id,
-        is_liked: asset.is_liked || asset.liked,
-        name: asset.name,
-        created_at: asset.created_at,
-        // For assets, we might not have a full 'gen' object, but modal expects it for technical data
-        gen: asset.generation_id ? { id: asset.generation_id, prompt: asset.prompt } : null
-    }))
-})
-
-const handleLiked = ({ id, is_liked }: { id: string, is_liked: boolean }) => {
-    const asset = assets.value.find(a => a.id === id)
-    if (asset) {
-        asset.is_liked = is_liked
-    }
-}
-
 // Albums Logic
 const albumStore = useAlbumStore()
 const { albums, loading: albumsLoading } = storeToRefs(albumStore)
@@ -58,6 +34,7 @@ const showCreateDialog = ref(false)
 const newAlbum = ref({ name: '', description: '' })
 const submittingAlbum = ref(false)
 
+const selectedAsset = ref<Asset | null>(null)
 const isModalVisible = ref(false)
 
 const first = ref(0)
@@ -92,9 +69,8 @@ const handleFileUpload = async (event: Event) => {
 }
 
 const openModal = (asset: Asset) => {
-    const idx = assets.value.findIndex(a => a.id === asset.id)
+    selectedAsset.value = asset
-    previewIndex.value = idx >= 0 ? idx : 0
+    isModalVisible.value = true
-    isImagePreviewVisible.value = true
 }
 
 const loadAssets = async () => {
@@ -269,12 +245,6 @@ const formatDate = (dateString: string) => {
                                 :alt="asset.name"
                                 class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
 
-                            <!-- Liked Badge -->
-                            <div v-if="asset.is_liked || asset.liked" 
-                                class="absolute top-2 left-2 z-10 w-6 h-6 rounded-full bg-pink-500 shadow-lg flex items-center justify-center border border-pink-400">
-                                <i class="pi pi-heart-fill text-white text-[10px]"></i>
-                            </div>
-
                             <!-- Type Badge -->
                             <div v-if="asset.type !== 'image'"
                                 class="absolute top-2 right-2 bg-black/60 backdrop-blur-sm px-1.5 py-0.5 rounded text-[10px] uppercase font-bold text-white z-10 opacity-70 group-hover:opacity-100 transition-opacity">
@@ -398,13 +368,17 @@ const formatDate = (dateString: string) => {
             </div>
         </div>
 
-        <GenerationPreviewModal 
+        <Dialog v-model:visible="isModalVisible" modal dismissableMask header="Asset View"
-            v-model:visible="isImagePreviewVisible"
+            :style="{ width: '90vw', maxWidth: '800px' }" class="glass-panel rounded-2xl">
-            :preview-images="previewImages"
+            <div v-if="selectedAsset" class="flex flex-col items-center">
-            :initial-index="previewIndex"
+                <img :src="selectedAsset.link ? API_URL + selectedAsset.link : (selectedAsset.url ? API_URL + selectedAsset.url : 'https://via.placeholder.com/800')"
-            :api-url="API_URL"
+                    :alt="selectedAsset.name" class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
-            @liked="handleLiked"
+                <div class="mt-6 text-center">
-        />
+                    <h2 class="text-2xl font-bold mb-2">{{ selectedAsset.name }}</h2>
+                    <p class="text-slate-400">{{ formatDate(selectedAsset.created_at) }}</p>
+                </div>
+            </div>
+        </Dialog>
 
         <!-- Create Album Dialog -->
         <Dialog v-model:visible="showCreateDialog" modal header="Create New Album" :style="{ width: '500px' }"

src/views/ContentPlanView.vue

@@ -1,955 +0,0 @@
-<script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
-import { postService } from '../services/postService'
-import { aiService } from '../services/aiService'
-import { useConfirm } from 'primevue/useconfirm'
-import { useToast } from 'primevue/usetoast'
-import Button from 'primevue/button'
-import Dialog from 'primevue/dialog'
-import InputText from 'primevue/inputtext'
-import DatePicker from 'primevue/datepicker'
-import ConfirmDialog from 'primevue/confirmdialog'
-import Toast from 'primevue/toast'
-import JSZip from 'jszip'
-
-const confirm = useConfirm()
-const toast = useToast()
-
-const API_URL = import.meta.env.VITE_API_URL || ''
-
-// --- Timezone helpers ---
-// Normalize a date to noon local time before converting to ISO
-// This prevents day-shift when UTC offset crosses midnight
-function toLocalNoonISO(date) {
-    const d = new Date(date)
-    d.setHours(12, 0, 0, 0)
-    return d.toISOString()
-}
-
-// Parse date string from API — ensure it's treated as UTC
-// Server may return "2026-02-16T21:00:00" without Z, which browsers
-// would interpret as local time. We append Z to force UTC parsing.
-function parseUTCDate(dateStr) {
-    if (typeof dateStr === 'string' && !dateStr.endsWith('Z') && !/[+-]\d{2}(:\d{2})?$/.test(dateStr)) {
-        return new Date(dateStr + 'Z')
-    }
-    return new Date(dateStr)
-}
-
-// --- Calendar state ---
-const currentDate = ref(new Date()) // tracks currently viewed month
-const viewMode = ref('month') // 'month' | 'week' | 'day'
-const selectedDay = ref(null)
-const posts = ref([])
-const loading = ref(false)
-
-// --- New/Edit post dialog ---
-const showPostDialog = ref(false)
-const editingPost = ref(null) // null = create, object = edit
-const postForm = ref({ date: new Date(), topic: '' })
-
-// --- Day names (Monday first) ---
-const dayNames = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
-const monthNames = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']
-
-// --- Computeds ---
-const currentMonthName = computed(() => monthNames[currentDate.value.getMonth()])
-const currentYear = computed(() => currentDate.value.getFullYear())
-
-const headerTitle = computed(() => {
-    if (viewMode.value === 'day' && selectedDay.value) {
-        const d = selectedDay.value
-        return `${d.getDate()} ${monthNames[d.getMonth()]} ${d.getFullYear()}`
-    }
-    if (viewMode.value === 'week' && selectedDay.value) {
-        const ws = getWeekStart(selectedDay.value)
-        const we = new Date(ws)
-        we.setDate(we.getDate() + 6)
-        const m1 = monthNames[ws.getMonth()].substring(0, 3)
-        const m2 = monthNames[we.getMonth()].substring(0, 3)
-        if (ws.getMonth() === we.getMonth()) {
-            return `${ws.getDate()} – ${we.getDate()} ${m1} ${ws.getFullYear()}`
-        }
-        return `${ws.getDate()} ${m1} – ${we.getDate()} ${m2} ${we.getFullYear()}`
-    }
-    return `${currentMonthName.value} ${currentYear.value}`
-})
-
-// Get Monday of the week containing a date
-function getWeekStart(date) {
-    const d = new Date(date)
-    const day = d.getDay()
-    const diff = d.getDate() - day + (day === 0 ? -6 : 1) // Monday
-    d.setDate(diff)
-    d.setHours(0, 0, 0, 0)
-    return d
-}
-
-// Calendar grid cells for month view
-const calendarDays = computed(() => {
-    const year = currentDate.value.getFullYear()
-    const month = currentDate.value.getMonth()
-
-    const firstDay = new Date(year, month, 1)
-    const lastDay = new Date(year, month + 1, 0)
-
-    // Day of week for first day (0=Sun, we want Mon=0)
-    let startDow = firstDay.getDay() - 1
-    if (startDow < 0) startDow = 6
-
-    const days = []
-
-    // Previous month padding
-    for (let i = startDow - 1; i >= 0; i--) {
-        const d = new Date(year, month, -i)
-        days.push({ date: d, isOtherMonth: true })
-    }
-
-    // Current month
-    for (let i = 1; i <= lastDay.getDate(); i++) {
-        const d = new Date(year, month, i)
-        days.push({ date: d, isOtherMonth: false })
-    }
-
-    // Next month padding (fill to 42 cells = 6 rows)
-    const remaining = 42 - days.length
-    for (let i = 1; i <= remaining; i++) {
-        const d = new Date(year, month + 1, i)
-        days.push({ date: d, isOtherMonth: true })
-    }
-
-    return days
-})
-
-// Week view days
-const weekDays = computed(() => {
-    const start = selectedDay.value ? getWeekStart(selectedDay.value) : getWeekStart(new Date())
-    const days = []
-    for (let i = 0; i < 7; i++) {
-        const d = new Date(start)
-        d.setDate(d.getDate() + i)
-        days.push({ date: d, isOtherMonth: false })
-    }
-    return days
-})
-
-// Today check
-const isToday = (date) => {
-    const today = new Date()
-    return date.getDate() === today.getDate() &&
-        date.getMonth() === today.getMonth() &&
-        date.getFullYear() === today.getFullYear()
-}
-
-const isSameDay = (a, b) => {
-    if (!a || !b) return false
-    return a.getDate() === b.getDate() && a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear()
-}
-
-// Posts for a given date
-const getPostsForDate = (date) => {
-    return posts.value.filter(p => {
-        const pd = parseUTCDate(p.date)
-        return isSameDay(pd, date)
-    })
-}
-
-// Day view posts
-const dayPosts = computed(() => {
-    if (!selectedDay.value) return []
-    return getPostsForDate(selectedDay.value)
-})
-
-// --- API calls ---
-async function fetchPosts() {
-    loading.value = true
-    try {
-        const year = currentDate.value.getFullYear()
-        const month = currentDate.value.getMonth()
-        // Fetch the full visible range (prev month padding + next)
-        const dateFrom = toLocalNoonISO(new Date(year, month - 1, 1))
-        const dateTo = toLocalNoonISO(new Date(year, month + 2, 0))
-        const result = await postService.getPosts(dateFrom, dateTo)
-        posts.value = Array.isArray(result) ? result : []
-    } catch (e) {
-        console.error('Failed to fetch posts', e)
-        posts.value = []
-    } finally {
-        loading.value = false
-    }
-}
-
-// --- Navigation ---
-function prevPeriod() {
-    if (viewMode.value === 'month') {
-        const d = new Date(currentDate.value)
-        d.setMonth(d.getMonth() - 1)
-        currentDate.value = d
-    } else if (viewMode.value === 'week') {
-        const d = new Date(selectedDay.value || new Date())
-        d.setDate(d.getDate() - 7)
-        selectedDay.value = d
-        currentDate.value = new Date(d.getFullYear(), d.getMonth(), 1)
-    } else {
-        const d = new Date(selectedDay.value || new Date())
-        d.setDate(d.getDate() - 1)
-        selectedDay.value = d
-        currentDate.value = new Date(d.getFullYear(), d.getMonth(), 1)
-    }
-}
-
-function nextPeriod() {
-    if (viewMode.value === 'month') {
-        const d = new Date(currentDate.value)
-        d.setMonth(d.getMonth() + 1)
-        currentDate.value = d
-    } else if (viewMode.value === 'week') {
-        const d = new Date(selectedDay.value || new Date())
-        d.setDate(d.getDate() + 7)
-        selectedDay.value = d
-        currentDate.value = new Date(d.getFullYear(), d.getMonth(), 1)
-    } else {
-        const d = new Date(selectedDay.value || new Date())
-        d.setDate(d.getDate() + 1)
-        selectedDay.value = d
-        currentDate.value = new Date(d.getFullYear(), d.getMonth(), 1)
-    }
-}
-
-function goToday() {
-    const today = new Date()
-    currentDate.value = new Date(today.getFullYear(), today.getMonth(), 1)
-    selectedDay.value = today
-}
-
-function selectDay(dayObj) {
-    selectedDay.value = dayObj.date
-    if (viewMode.value === 'month') {
-        viewMode.value = 'day'
-    }
-}
-
-// --- Post CRUD ---
-function openNewPostDialog(date) {
-    editingPost.value = null
-    postForm.value = {
-        date: date ? new Date(date) : new Date(),
-        topic: ''
-    }
-    showPostDialog.value = true
-}
-
-function openEditPostDialog(post) {
-    editingPost.value = post
-    postForm.value = {
-        date: parseUTCDate(post.date),
-        topic: post.topic
-    }
-    showPostDialog.value = true
-}
-
-async function savePost() {
-    if (!postForm.value.topic.trim()) {
-        toast.add({ severity: 'warn', summary: 'Тема обязательна', life: 2000 })
-        return
-    }
-    try {
-        if (editingPost.value) {
-            await postService.updatePost(editingPost.value.id, {
-                date: toLocalNoonISO(postForm.value.date),
-                topic: postForm.value.topic
-            })
-            toast.add({ severity: 'success', summary: 'Пост обновлён', life: 2000 })
-        } else {
-            await postService.createPost({
-                date: toLocalNoonISO(postForm.value.date),
-                topic: postForm.value.topic,
-                generation_ids: []
-            })
-            toast.add({ severity: 'success', summary: 'Пост создан', life: 2000 })
-        }
-        showPostDialog.value = false
-        await fetchPosts()
-    } catch (e) {
-        console.error('Save post failed', e)
-        toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Не удалось сохранить', life: 3000 })
-    }
-}
-
-function deletePost(post) {
-    confirm.require({
-        message: `Удалить пост "${post.topic}"?`,
-        header: 'Удаление поста',
-        icon: 'pi pi-trash',
-        acceptClass: 'p-button-danger',
-        accept: async () => {
-            try {
-                await postService.deletePost(post.id)
-                toast.add({ severity: 'info', summary: 'Удалено', life: 2000 })
-                await fetchPosts()
-            } catch (e) {
-                console.error('Delete post failed', e)
-            }
-        }
-    })
-}
-
-async function removeGenerationFromPost(post, genId) {
-    try {
-        await postService.removeGeneration(post.id, genId)
-        // Optimistic update
-        const idx = post.generation_ids.indexOf(genId)
-        if (idx > -1) post.generation_ids.splice(idx, 1)
-        toast.add({ severity: 'info', summary: 'Генерация удалена из поста', life: 2000 })
-    } catch (e) {
-        console.error(e)
-    }
-}
-
-// --- Download Post Assets ---
-const isDownloading = ref(false)
-
-async function downloadPostAssets(post) {
-    const ids = post.generation_ids || []
-    if (ids.length === 0) return
-    isDownloading.value = true
-    try {
-        const user = JSON.parse(localStorage.getItem('user'))
-        const headers = {}
-        if (user && user.access_token) headers['Authorization'] = `Bearer ${user.access_token}`
-        else if (user && user.token) headers['Authorization'] = `${user.tokenType} ${user.token}`
-        const projectId = localStorage.getItem('active_project_id')
-        if (projectId) headers['X-Project-ID'] = projectId
-
-        // Multi-file ZIP (if > 1)
-        if (ids.length > 1) {
-            const zip = new JSZip()
-            // Sanitize topic for filename
-            const safeTopic = (post.topic || 'post').replace(/[^a-z0-9_\-а-яё ]/gi, '').trim().replace(/\s+/g, '_')
-            const folderName = `${safeTopic}_assets`
-
-            let successCount = 0
-
-            await Promise.all(ids.map(async (assetId) => {
-                try {
-                    const url = API_URL + '/assets/' + assetId
-                    const resp = await fetch(url, { headers })
-                    if (!resp.ok) return
-                    const blob = await resp.blob()
-                    const mime = blob.type
-                    const ext = mime.split('/')[1] || 'png'
-                    zip.file(`${assetId}.${ext}`, blob)
-                    successCount++
-                } catch (err) {
-                    console.error('Failed to zip asset', assetId, err)
-                }
-            }))
-
-            if (successCount === 0) throw new Error('No images available for zip')
-
-            const content = await zip.generateAsync({ type: 'blob' })
-            const filename = `${folderName}.zip`
-
-            const a = document.createElement('a')
-            a.href = URL.createObjectURL(content)
-            a.download = filename
-            document.body.appendChild(a)
-            a.click()
-            document.body.removeChild(a)
-            URL.revokeObjectURL(a.href)
-
-            toast.add({ severity: 'success', summary: 'Архив создан', detail: `Скачано ${successCount} файлов`, life: 3000 })
-
-        } else {
-            // Single File
-            const assetId = ids[0]
-            const url = API_URL + '/assets/' + assetId
-            const resp = await fetch(url, { headers })
-            const blob = await resp.blob()
-
-            const file = new File([blob], assetId + '.png', { type: blob.type || 'image/png' })
-            const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || navigator.maxTouchPoints > 1
-            if (isMobile && navigator.canShare && navigator.canShare({ files: [file] })) {
-                await navigator.share({ files: [file] })
-            } else {
-                const a = document.createElement('a')
-                a.href = URL.createObjectURL(file)
-                a.download = file.name
-                document.body.appendChild(a)
-                a.click()
-                document.body.removeChild(a)
-                URL.revokeObjectURL(a.href)
-            }
-            toast.add({ severity: 'success', summary: 'Скачано', detail: `Файл сохранен`, life: 2000 })
-        }
-    } catch (e) {
-        console.error('Download failed', e)
-        toast.add({ severity: 'error', summary: 'Ошибка скачивания', life: 3000 })
-    } finally {
-        isDownloading.value = false
-    }
-}
-
-// --- Watchers ---
-watch(currentDate, fetchPosts)
-
-onMounted(() => {
-    selectedDay.value = new Date()
-    fetchPosts()
-})
-
-// --- Generation Picker ---
-const showGenPicker = ref(false)
-const genPickerPost = ref(null)
-const availableGenerations = ref([])
-const selectedGenIds = ref(new Set())
-const genLoading = ref(false)
-const genLoadingMore = ref(false)
-const genOffset = ref(0)
-const genHasMore = ref(true)
-const GEN_LIMIT = 30
-
-function openGenPicker(post) {
-    genPickerPost.value = post
-    selectedGenIds.value = new Set()
-    availableGenerations.value = []
-    genOffset.value = 0
-    genHasMore.value = true
-    showGenPicker.value = true
-    loadGenerations(true)
-}
-
-async function loadGenerations(initial = false) {
-    if (initial) {
-        genLoading.value = true
-        genOffset.value = 0
-    } else {
-        genLoadingMore.value = true
-    }
-    try {
-        const response = await aiService.getGenerations(GEN_LIMIT, genOffset.value)
-        const list = response && response.generations ? response.generations : (Array.isArray(response) ? response : [])
-        if (initial) {
-            availableGenerations.value = list
-        } else {
-            availableGenerations.value.push(...list)
-        }
-        genOffset.value += list.length
-        genHasMore.value = list.length >= GEN_LIMIT
-    } catch (e) {
-        console.error('Load generations failed', e)
-    } finally {
-        genLoading.value = false
-        genLoadingMore.value = false
-    }
-}
-
-function toggleGenSelection(assetId) {
-    const s = new Set(selectedGenIds.value)
-    if (s.has(assetId)) s.delete(assetId)
-    else s.add(assetId)
-    selectedGenIds.value = s
-}
-
-async function confirmAddGenerations() {
-    if (!genPickerPost.value || selectedGenIds.value.size === 0) return
-    try {
-        await postService.addGenerations(genPickerPost.value.id, [...selectedGenIds.value])
-        toast.add({ severity: 'success', summary: `Добавлено ${selectedGenIds.value.size} изображений`, life: 2000 })
-        showGenPicker.value = false
-        await fetchPosts()
-    } catch (e) {
-        console.error('Add generations failed', e)
-        toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Не удалось добавить', life: 3000 })
-    }
-}
-
-function onGenPickerScroll(e) {
-    const el = e.target
-    if (el.scrollTop + el.clientHeight >= el.scrollHeight - 100 && genHasMore.value && !genLoadingMore.value) {
-        loadGenerations(false)
-    }
-}
-
-// --- Image Preview ---
-const previewVisible = ref(false)
-const previewImages = ref([])
-const previewIndex = ref(0)
-
-const previewCurrent = computed(() => previewImages.value[previewIndex.value] || null)
-
-function openPreview(assetIds, clickedId) {
-    previewImages.value = assetIds.map(id => API_URL + '/assets/' + id)
-    const idx = assetIds.indexOf(clickedId)
-    previewIndex.value = idx >= 0 ? idx : 0
-    previewVisible.value = true
-}
-
-function previewNav(dir) {
-    if (previewImages.value.length === 0) return
-    let i = previewIndex.value + dir
-    if (i < 0) i = previewImages.value.length - 1
-    if (i >= previewImages.value.length) i = 0
-    previewIndex.value = i
-}
-
-function onPreviewKey(e) {
-    if (!previewVisible.value) return
-    if (e.key === 'ArrowLeft') { e.preventDefault(); previewNav(-1) }
-    else if (e.key === 'ArrowRight') { e.preventDefault(); previewNav(1) }
-    else if (e.key === 'Escape') { previewVisible.value = false }
-}
-
-watch(previewVisible, (v) => {
-    if (v) window.addEventListener('keydown', onPreviewKey)
-    else window.removeEventListener('keydown', onPreviewKey)
-})
-
-onBeforeUnmount(() => {
-    window.removeEventListener('keydown', onPreviewKey)
-})
-</script>
-
-<template>
-    <div class="flex flex-col h-full w-full bg-slate-900 text-slate-100 font-sans overflow-hidden">
-        <ConfirmDialog />
-        <Toast />
-
-        <!-- Header -->
-        <header
-            class="h-16 border-b border-white/5 flex items-center justify-between px-6 bg-slate-900/80 backdrop-blur z-20 shrink-0">
-            <div class="flex items-center gap-4">
-                <h1 class="text-lg font-bold text-slate-200 !m-0">📅 Content plan</h1>
-            </div>
-
-            <div class="flex items-center gap-3">
-                <!-- Navigation Arrows -->
-                <div class="flex items-center gap-1">
-                    <button @click="prevPeriod"
-                        class="w-8 h-8 rounded-lg bg-slate-800 border border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-slate-700 transition-all">
-                        <i class="pi pi-chevron-left text-xs"></i>
-                    </button>
-                    <button @click="goToday"
-                        class="px-3 py-1.5 rounded-lg text-xs font-medium bg-slate-800 border border-white/10 text-slate-400 hover:text-white hover:bg-slate-700 transition-all">
-                        Сегодня
-                    </button>
-                    <button @click="nextPeriod"
-                        class="w-8 h-8 rounded-lg bg-slate-800 border border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-slate-700 transition-all">
-                        <i class="pi pi-chevron-right text-xs"></i>
-                    </button>
-                </div>
-
-                <!-- Period Title -->
-                <span class="text-sm font-semibold text-slate-200 min-w-[180px] text-center hidden md:block">{{
-                    headerTitle }}</span>
-
-                <!-- View Toggle -->
-                <div class="flex bg-slate-800 rounded-lg p-1 border border-white/5">
-                    <button @click="viewMode = 'month'"
-                        class="px-3 py-1.5 rounded-md text-xs font-medium transition-all"
-                        :class="viewMode === 'month' ? 'bg-violet-600 text-white shadow-lg' : 'text-slate-400 hover:text-slate-200'">
-                        Месяц
-                    </button>
-                    <button @click="viewMode = 'week'; if (!selectedDay) selectedDay = new Date()"
-                        class="px-3 py-1.5 rounded-md text-xs font-medium transition-all"
-                        :class="viewMode === 'week' ? 'bg-violet-600 text-white shadow-lg' : 'text-slate-400 hover:text-slate-200'">
-                        Неделя
-                    </button>
-                    <button @click="viewMode = 'day'; if (!selectedDay) selectedDay = new Date()"
-                        class="px-3 py-1.5 rounded-md text-xs font-medium transition-all"
-                        :class="viewMode === 'day' ? 'bg-violet-600 text-white shadow-lg' : 'text-slate-400 hover:text-slate-200'">
-                        День
-                    </button>
-                </div>
-            </div>
-        </header>
-
-        <!-- Mobile Period Title -->
-        <div class="md:hidden text-center py-2 text-sm font-semibold text-slate-200 border-b border-white/5">
-            {{ headerTitle }}
-        </div>
-
-        <!-- Content Area -->
-        <div class="flex-1 overflow-y-auto custom-scrollbar">
-
-            <!-- ====== MONTH VIEW ====== -->
-            <div v-if="viewMode === 'month'" class="h-full flex flex-col p-2 md:p-4">
-                <!-- Day headers -->
-                <div class="grid grid-cols-7 mb-1">
-                    <div v-for="d in dayNames" :key="d"
-                        class="text-center text-[10px] font-bold text-slate-500 uppercase tracking-wider py-2">
-                        {{ d }}
-                    </div>
-                </div>
-
-                <!-- Day cells -->
-                <div class="grid grid-cols-7 flex-1 gap-px bg-white/5 rounded-xl overflow-hidden">
-                    <div v-for="(dayObj, idx) in calendarDays" :key="idx" @click="selectDay(dayObj)" :class="[
-                        'bg-slate-900 p-1.5 min-h-[80px] md:min-h-[100px] cursor-pointer transition-all hover:bg-slate-800/80 relative group',
-                        dayObj.isOtherMonth ? 'opacity-30' : '',
-                        isToday(dayObj.date) ? 'ring-1 ring-violet-500/50 ring-inset' : '',
-                        isSameDay(dayObj.date, selectedDay) ? 'bg-violet-900/20' : ''
-                    ]">
-                        <!-- Day number -->
-                        <div class="flex items-center justify-between mb-1">
-                            <span :class="[
-                                'text-xs font-bold w-6 h-6 flex items-center justify-center rounded-full',
-                                isToday(dayObj.date) ? 'bg-violet-600 text-white' : 'text-slate-400'
-                            ]">
-                                {{ dayObj.date.getDate() }}
-                            </span>
-                            <!-- Add button (show on hover) -->
-                            <button v-if="!dayObj.isOtherMonth" @click.stop="openNewPostDialog(dayObj.date)"
-                                class="w-5 h-5 rounded-md bg-violet-600/30 text-violet-300 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-violet-600/50">
-                                <i class="pi pi-plus" style="font-size: 8px"></i>
-                            </button>
-                        </div>
-
-                        <!-- Posts in cell -->
-                        <div class="flex flex-col gap-0.5 overflow-hidden">
-                            <div v-for="post in getPostsForDate(dayObj.date)" :key="post.id"
-                                @click.stop="openEditPostDialog(post)"
-                                class="px-1.5 py-0.5 rounded text-[10px] font-medium truncate transition-all hover:scale-[1.02] cursor-pointer"
-                                :class="post.generation_ids?.length > 0
-                                    ? 'bg-violet-600/30 text-violet-200 border border-violet-500/20'
-                                    : 'bg-slate-700/50 text-slate-300 border border-white/5'">
-                                {{ post.topic }}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- ====== WEEK VIEW ====== -->
-            <div v-else-if="viewMode === 'week'" class="h-full flex flex-col p-2 md:p-4">
-                <!-- Day headers -->
-                <div class="grid grid-cols-7 mb-1">
-                    <div v-for="(dayObj, idx) in weekDays" :key="idx"
-                        class="text-center text-[10px] font-bold uppercase tracking-wider py-2"
-                        :class="isToday(dayObj.date) ? 'text-violet-400' : 'text-slate-500'">
-                        {{ dayNames[idx] }} {{ dayObj.date.getDate() }}
-                    </div>
-                </div>
-
-                <!-- Day columns -->
-                <div class="grid grid-cols-7 flex-1 gap-px bg-white/5 rounded-xl overflow-hidden">
-                    <div v-for="(dayObj, idx) in weekDays" :key="idx"
-                        @click="selectedDay = dayObj.date; viewMode = 'day'" :class="[
-                            'bg-slate-900 p-2 min-h-[300px] cursor-pointer transition-all hover:bg-slate-800/80 relative group',
-                            isToday(dayObj.date) ? 'ring-1 ring-violet-500/50 ring-inset' : '',
-                            isSameDay(dayObj.date, selectedDay) ? 'bg-violet-900/20' : ''
-                        ]">
-                        <!-- Add button -->
-                        <button @click.stop="openNewPostDialog(dayObj.date)"
-                            class="w-full mb-2 py-1 rounded-lg border border-dashed border-white/10 text-slate-500 text-xs opacity-0 group-hover:opacity-100 transition-opacity hover:border-violet-500/30 hover:text-violet-400">
-                            <i class="pi pi-plus mr-1" style="font-size: 9px"></i> Добавить
-                        </button>
-
-                        <!-- Posts -->
-                        <div class="flex flex-col gap-2">
-                            <div v-for="post in getPostsForDate(dayObj.date)" :key="post.id"
-                                class="bg-slate-800/80 rounded-lg border border-white/5 p-2 hover:border-violet-500/30 transition-all cursor-pointer"
-                                @click.stop="openEditPostDialog(post)">
-                                <p class="text-xs font-semibold text-slate-200 mb-1 line-clamp-2">{{ post.topic }}</p>
-
-                                <!-- Generation thumbnails -->
-                                <div v-if="post.generation_ids?.length > 0" class="flex gap-1 flex-wrap">
-                                    <img v-for="gid in post.generation_ids.slice(0, 4)" :key="gid"
-                                        :src="API_URL + '/assets/' + gid + '?thumbnail=true'"
-                                        class="w-8 h-8 rounded object-cover border border-white/10" />
-                                    <span v-if="post.generation_ids.length > 4"
-                                        class="w-8 h-8 rounded bg-slate-700 border border-white/10 flex items-center justify-center text-[10px] text-slate-400">
-                                        +{{ post.generation_ids.length - 4 }}
-                                    </span>
-                                </div>
-
-                                <!-- Actions -->
-                                <div class="flex gap-1 mt-1.5 justify-end">
-                                    <button @click.stop="openGenPicker(post)"
-                                        class="w-5 h-5 rounded bg-violet-500/10 text-violet-400 flex items-center justify-center hover:bg-violet-500/20 transition-colors"
-                                        title="Добавить изображения">
-                                        <i class="pi pi-images" style="font-size: 9px"></i>
-                                    </button>
-                                    <button @click.stop="deletePost(post)"
-                                        class="w-5 h-5 rounded bg-red-500/10 text-red-400 flex items-center justify-center hover:bg-red-500/20 transition-colors">
-                                        <i class="pi pi-trash" style="font-size: 9px"></i>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- ====== DAY VIEW ====== -->
-            <div v-else class="max-w-3xl mx-auto p-4 md:p-8">
-                <!-- Add Post Button -->
-                <button @click="openNewPostDialog(selectedDay)"
-                    class="w-full mb-6 py-3 rounded-xl border-2 border-dashed border-white/10 text-slate-400 text-sm font-medium hover:border-violet-500/40 hover:text-violet-300 hover:bg-violet-500/5 transition-all">
-                    <i class="pi pi-plus mr-2"></i> Новый пост
-                </button>
-
-                <!-- No posts -->
-                <div v-if="dayPosts.length === 0 && !loading"
-                    class="flex flex-col items-center justify-center py-20 text-slate-500 opacity-60">
-                    <i class="pi pi-calendar text-5xl mb-4"></i>
-                    <p>Нет постов на этот день</p>
-                </div>
-
-                <!-- Posts list -->
-                <div class="flex flex-col gap-4">
-                    <div v-for="post in dayPosts" :key="post.id"
-                        class="bg-slate-800/60 rounded-2xl border border-white/5 p-5 hover:border-violet-500/20 transition-all">
-
-                        <!-- Header: topic + date -->
-                        <div class="flex items-start justify-between mb-3">
-                            <div class="flex-1">
-                                <h3 class="text-base font-bold text-slate-100 mb-1">{{ post.topic }}</h3>
-                                <p class="text-xs text-slate-500">
-                                    {{ parseUTCDate(post.date).toLocaleDateString('ru-RU', {
-                                        weekday: 'long', day: 'numeric', month: 'long'
-                                    }) }}
-                                </p>
-                            </div>
-                            <button @click="deletePost(post)"
-                                class="w-8 h-8 rounded-lg bg-slate-700/50 text-slate-400 flex items-center justify-center hover:bg-red-600/30 hover:text-red-300 transition-all"
-                                title="Удалить">
-                                <i class="pi pi-trash text-xs"></i>
-                            </button>
-                        </div>
-
-                        <!-- Images section header with actions -->
-                        <div class="flex items-center justify-between mb-2">
-                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">
-                                Изображения ({{ post.generation_ids?.length || 0 }})
-                            </label>
-                            <div class="flex gap-1">
-                                <Button icon="pi pi-download" label="Скачать" size="small" text :loading="isDownloading"
-                                    :disabled="!post.generation_ids?.length" @click="downloadPostAssets(post)"
-                                    class="!text-slate-400 hover:!text-white !text-xs !py-1" />
-                                <Button icon="pi pi-plus" label="Добавить" size="small" text
-                                    @click="openGenPicker(post)"
-                                    class="!text-violet-400 hover:!text-violet-300 !text-xs !py-1" />
-                                <Button icon="pi pi-pencil" size="small" text @click="openEditPostDialog(post)"
-                                    class="!text-slate-400 hover:!text-white !text-xs !py-1" title="Редактировать" />
-                            </div>
-                        </div>
-
-                        <!-- Generation grid -->
-                        <div v-if="post.generation_ids?.length > 0"
-                            class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2">
-                            <div v-for="gid in post.generation_ids" :key="gid"
-                                class="aspect-square relative rounded-xl overflow-hidden bg-slate-900 border border-white/5 group/img">
-                                <img :src="API_URL + '/assets/' + gid + '?thumbnail=true'"
-                                    class="w-full h-full object-cover cursor-pointer"
-                                    @click="openPreview(post.generation_ids, gid)" />
-                                <button @click="removeGenerationFromPost(post, gid)"
-                                    class="absolute top-1 right-1 w-5 h-5 rounded-md bg-red-600/80 text-white flex items-center justify-center opacity-0 group-hover/img:opacity-100 transition-opacity hover:bg-red-500">
-                                    <i class="pi pi-times" style="font-size: 8px"></i>
-                                </button>
-                            </div>
-                        </div>
-
-                        <div v-else
-                            class="py-6 text-center text-slate-600 text-xs border border-dashed border-white/5 rounded-xl cursor-pointer hover:border-violet-500/30 hover:text-violet-400 transition-all"
-                            @click="openGenPicker(post)">
-                            <i class="pi pi-images mr-1"></i> Нажмите, чтобы добавить изображения
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- ====== NEW / EDIT POST DIALOG ====== -->
-        <Dialog v-model:visible="showPostDialog" :header="editingPost ? 'Редактировать пост' : 'Новый пост'" modal
-            :style="{ width: '600px', maxWidth: '95vw' }"
-            :pt="{ root: { class: '!bg-slate-800 !border-white/10' }, header: { class: '!bg-slate-800' }, content: { class: '!bg-slate-800' } }">
-            <div class="flex flex-col gap-4">
-                <!-- Date & Topic row -->
-                <div class="grid grid-cols-2 gap-3">
-                    <div class="flex flex-col gap-1">
-                        <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Дата</label>
-                        <DatePicker v-model="postForm.date" dateFormat="dd.mm.yy" showIcon class="w-full" :pt="{
-                            root: { class: '!bg-slate-700 !border-white/10' },
-                            pcInputText: { root: { class: '!bg-slate-700 !border-white/10 !text-white' } }
-                        }" />
-                    </div>
-                    <div class="flex flex-col gap-1">
-                        <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Тема</label>
-                        <InputText v-model="postForm.topic" placeholder="Тема поста..."
-                            class="w-full !bg-slate-700 !border-white/10 !text-white" />
-                    </div>
-                </div>
-
-                <!-- Attached Generations (edit mode only) -->
-                <div v-if="editingPost">
-                    <div class="flex items-center justify-between mb-2">
-                        <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">
-                            Изображения ({{ editingPost.generation_ids?.length || 0 }})
-                        </label>
-                        <div class="flex gap-1">
-                            <Button icon="pi pi-download" label="Скачать" size="small" text :loading="isDownloading"
-                                :disabled="!editingPost.generation_ids?.length" @click="downloadPostAssets(editingPost)"
-                                class="!text-slate-400 hover:!text-white !text-xs !py-1" />
-                            <Button icon="pi pi-plus" label="Добавить" size="small" text
-                                @click="openGenPicker(editingPost)"
-                                class="!text-violet-400 hover:!text-violet-300 !text-xs !py-1" />
-                        </div>
-                    </div>
-
-                    <!-- Generation grid -->
-                    <div v-if="editingPost.generation_ids?.length > 0" class="grid grid-cols-4 sm:grid-cols-5 gap-2">
-                        <div v-for="gid in editingPost.generation_ids" :key="gid"
-                            class="aspect-square relative rounded-xl overflow-hidden bg-slate-900 border border-white/5 group/img">
-                            <img :src="API_URL + '/assets/' + gid + '?thumbnail=true'"
-                                class="w-full h-full object-cover cursor-pointer"
-                                @click="openPreview(editingPost.generation_ids, gid)" />
-                            <button @click="removeGenerationFromPost(editingPost, gid)"
-                                class="absolute top-1 right-1 w-5 h-5 rounded-md bg-red-600/80 text-white flex items-center justify-center opacity-0 group-hover/img:opacity-100 transition-opacity hover:bg-red-500">
-                                <i class="pi pi-times" style="font-size: 8px"></i>
-                            </button>
-                        </div>
-                    </div>
-
-                    <div v-else
-                        class="py-6 text-center text-slate-600 text-xs border border-dashed border-white/5 rounded-xl cursor-pointer hover:border-violet-500/30 hover:text-violet-400 transition-all"
-                        @click="openGenPicker(editingPost)">
-                        <i class="pi pi-images mr-1"></i> Нажмите, чтобы добавить изображения
-                    </div>
-                </div>
-
-                <div class="flex justify-end gap-2 mt-2">
-                    <Button label="Отмена" text @click="showPostDialog = false"
-                        class="!text-slate-400 hover:!text-white" />
-                    <Button :label="editingPost ? 'Сохранить' : 'Создать'" @click="savePost"
-                        class="!bg-violet-600 !border-none hover:!bg-violet-500" />
-                </div>
-            </div>
-        </Dialog>
-
-        <!-- ====== GENERATION PICKER DIALOG ====== -->
-        <Dialog v-model:visible="showGenPicker" header="Добавить изображения" modal
-            :style="{ width: '700px', maxWidth: '95vw' }"
-            :pt="{ root: { class: '!bg-slate-800 !border-white/10' }, header: { class: '!bg-slate-800' }, content: { class: '!bg-slate-800 !p-0' } }">
-
-            <!-- Selected count bar -->
-            <div v-if="selectedGenIds.size > 0"
-                class="sticky top-0 z-10 flex items-center justify-between px-4 py-2 bg-violet-600/20 border-b border-violet-500/20">
-                <span class="text-sm text-violet-200 font-medium">
-                    <i class="pi pi-check-circle mr-1"></i> Выбрано: {{ selectedGenIds.size }}
-                </span>
-                <Button label="Добавить" icon="pi pi-plus" @click="confirmAddGenerations" size="small"
-                    class="!bg-violet-600 !border-none hover:!bg-violet-500 !text-sm !py-1" />
-            </div>
-
-            <!-- Loading -->
-            <div v-if="genLoading" class="flex items-center justify-center py-20">
-                <i class="pi pi-spin pi-spinner text-3xl text-violet-400"></i>
-            </div>
-
-            <!-- Grid -->
-            <div v-else class="p-4 max-h-[60vh] overflow-y-auto custom-scrollbar" @scroll="onGenPickerScroll">
-                <div v-if="availableGenerations.length === 0"
-                    class="flex flex-col items-center justify-center py-16 text-slate-500">
-                    <i class="pi pi-image text-4xl mb-3"></i>
-                    <p class="text-sm">Нет доступных генераций</p>
-                </div>
-
-                <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2">
-                    <template v-for="gen in availableGenerations" :key="gen.id">
-                        <div v-for="assetId in (gen.result_list || [])" :key="assetId"
-                            @click="toggleGenSelection(assetId)"
-                            class="aspect-square relative rounded-xl overflow-hidden cursor-pointer transition-all group/gen border-2"
-                            :class="selectedGenIds.has(assetId)
-                                ? 'border-violet-500 ring-2 ring-violet-500/30 scale-[0.95]'
-                                : 'border-transparent hover:border-white/20'">
-                            <img :src="API_URL + '/assets/' + assetId + '?thumbnail=true'"
-                                class="w-full h-full object-cover" loading="lazy" />
-
-                            <!-- Selection overlay -->
-                            <div v-if="selectedGenIds.has(assetId)"
-                                class="absolute inset-0 bg-violet-600/30 flex items-center justify-center">
-                                <div
-                                    class="w-7 h-7 rounded-full bg-violet-600 flex items-center justify-center shadow-lg">
-                                    <i class="pi pi-check text-white" style="font-size: 12px"></i>
-                                </div>
-                            </div>
-
-                            <!-- Hover overlay -->
-                            <div v-else
-                                class="absolute inset-0 bg-black/0 group-hover/gen:bg-black/20 transition-all flex items-center justify-center">
-                                <div
-                                    class="w-7 h-7 rounded-full border-2 border-white/40 opacity-0 group-hover/gen:opacity-100 transition-opacity">
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </div>
-
-                <!-- Load more spinner -->
-                <div v-if="genLoadingMore" class="flex justify-center py-4">
-                    <i class="pi pi-spin pi-spinner text-xl text-slate-500"></i>
-                </div>
-            </div>
-
-            <!-- Footer with action -->
-            <div class="flex justify-end gap-2 px-4 py-3 border-t border-white/5">
-                <Button label="Отмена" text @click="showGenPicker = false" class="!text-slate-400 hover:!text-white" />
-                <Button label="Добавить" icon="pi pi-plus" :disabled="selectedGenIds.size === 0"
-                    @click="confirmAddGenerations" class="!bg-violet-600 !border-none hover:!bg-violet-500" />
-            </div>
-        </Dialog>
-
-        <!-- ====== FULLSCREEN IMAGE PREVIEW ====== -->
-        <div v-if="previewVisible" class="fixed inset-0 z-[9999] bg-black/95 flex items-center justify-center"
-            @click.self="previewVisible = false">
-
-            <!-- Close -->
-            <button @click="previewVisible = false"
-                class="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/10 text-white flex items-center justify-center hover:bg-white/20 transition-colors z-10">
-                <i class="pi pi-times text-lg"></i>
-            </button>
-
-            <!-- Counter -->
-            <div v-if="previewImages.length > 1"
-                class="absolute top-4 left-1/2 -translate-x-1/2 text-white/60 text-sm bg-black/40 px-3 py-1 rounded-full">
-                {{ previewIndex + 1 }} / {{ previewImages.length }}
-            </div>
-
-            <!-- Left arrow -->
-            <button v-if="previewImages.length > 1" @click="previewNav(-1)"
-                class="absolute left-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 text-white flex items-center justify-center hover:bg-white/20 transition-colors">
-                <i class="pi pi-chevron-left"></i>
-            </button>
-
-            <!-- Image -->
-            <img v-if="previewCurrent" :src="previewCurrent"
-                class="max-h-[90vh] max-w-[90vw] object-contain rounded-lg shadow-2xl" />
-
-            <!-- Right arrow -->
-            <button v-if="previewImages.length > 1" @click="previewNav(1)"
-                class="absolute right-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 text-white flex items-center justify-center hover:bg-white/20 transition-colors">
-                <i class="pi pi-chevron-right"></i>
-            </button>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.custom-scrollbar::-webkit-scrollbar {
-    width: 6px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 3px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.2);
-}
-</style>

src/views/IdeasView.vue

@@ -1,986 +0,0 @@
-<script setup>
-import { ref, onMounted, watch, computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { useIdeaStore } from '../stores/ideas'
-import { storeToRefs } from 'pinia'
-import { dataService } from '../services/dataService'
-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'
-import Dropdown from 'primevue/dropdown'
-import Checkbox from 'primevue/checkbox'
-
-const router = useRouter()
-const ideaStore = useIdeaStore()
-const { ideas, loading, inspirations } = storeToRefs(ideaStore)
-
-const showCreateDialog = ref(false)
-const newIdea = ref({ name: '', description: '' })
-const submitting = ref(false)
-const API_URL = import.meta.env.VITE_API_URL || '/api'
-const isSettingsVisible = ref(localStorage.getItem('ideas_view_settings_visible') !== 'false')
-
-watch(isSettingsVisible, (val) => {
-    localStorage.setItem('ideas_view_settings_visible', val)
-})
-
-// --- Rename Idea ---
-const showRenameDialog = ref(false)
-const ideaToRename = ref(null)
-const newName = ref('')
-const renaming = ref(false)
-
-const openRenameDialog = (idea) => {
-    ideaToRename.value = idea
-    newName.value = idea.name
-    showRenameDialog.value = true
-}
-
-const handleRename = async () => {
-    if (!newName.value.trim() || newName.value === ideaToRename.value.name) {
-        showRenameDialog.value = false
-        return
-    }
-
-    renaming.value = true
-    try {
-        await ideaStore.updateIdea(ideaToRename.value.id, {
-            name: newName.value.trim()
-        })
-        showRenameDialog.value = false
-    } finally {
-        renaming.value = false
-    }
-}
-
-// --- Inspirations Logic ---
-const showInspirationDialog = ref(false)
-const newInspirationLink = ref('')
-const creatingInspiration = ref(false)
-const downloadingInspirations = ref(new Set())
-
-// Preview Logic
-const showPreviewDialog = ref(false)
-const previewInspiration = ref(null)
-const previewAsset = ref(null)
-const loadingPreview = ref(false)
-
-const openPreview = async (insp) => {
-    if (!insp || !insp.asset_id) return
-    previewInspiration.value = insp
-    showPreviewDialog.value = true
-    loadingPreview.value = true
-    previewAsset.value = null
-    
-    try {
-        // Use HEAD request to get content-type without downloading body
-        previewAsset.value = await dataService.getAssetMetadata(insp.asset_id)
-    } catch (e) {
-        console.error('Failed to load asset metadata', e)
-        // Fallback: assume image if metadata fails, or let user try
-        previewAsset.value = { content_type: 'image/jpeg' } 
-    } finally {
-        loadingPreview.value = false
-    }
-}
-
-const getIdeaInspiration = (idea) => {
-    if (idea.inspiration) return idea.inspiration
-    if (idea.inspiration_id) {
-        return inspirations.value.find(i => i.id === idea.inspiration_id)
-    }
-    return null
-}
-
-const handleCreateInspiration = async () => {
-    if (!newInspirationLink.value) return
-    creatingInspiration.value = true
-    try {
-        await ideaStore.createInspiration({ source_url: newInspirationLink.value })
-        showInspirationDialog.value = false
-        newInspirationLink.value = ''
-    } finally {
-        creatingInspiration.value = false
-    }
-}
-
-const handleDeleteInspiration = async (id) => {
-    if (confirm('Are you sure you want to delete this inspiration?')) {
-        await ideaStore.deleteInspiration(id)
-    }
-}
-
-const handleCompleteInspiration = async (id) => {
-    await ideaStore.completeInspiration(id)
-}
-
-const handleDownloadInspiration = async (insp) => {
-    if (!insp.asset_id) return
-    
-    downloadingInspirations.value.add(insp.id)
-    try {
-        // Use dataService which uses axios with correct headers (Auth, X-Project-ID)
-        // Now returns full response object
-        const response = await dataService.downloadAsset(insp.asset_id)
-        const blob = response.data
-        
-        // Determine extension
-        let ext = 'jpg'
-        if (blob.type === 'video/mp4') ext = 'mp4'
-        else if (blob.type === 'image/png') ext = 'png'
-        else if (blob.type === 'image/jpeg') ext = 'jpg'
-        else if (blob.type === 'image/webp') ext = 'webp'
-        
-        const fileName = `inspiration-${insp.id.substring(0, 8)}.${ext}`
-        const file = new File([blob], fileName, { type: blob.type })
-
-        // Check if mobile device
-        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
-
-        if (isMobile && navigator.canShare && navigator.canShare({ files: [file] })) {
-            try {
-                await navigator.share({
-                    files: [file],
-                    title: 'Inspiration',
-                    text: insp.caption || 'Check out this inspiration'
-                })
-            } catch (err) {
-                if (err.name !== 'AbortError') {
-                    console.error('Share failed', err)
-                }
-            }
-        } else {
-            // Desktop download (or fallback if share not supported)
-            const url = window.URL.createObjectURL(blob)
-            const link = document.createElement('a')
-            link.href = url
-            link.download = fileName
-            document.body.appendChild(link)
-            link.click()
-            document.body.removeChild(link)
-            window.URL.revokeObjectURL(url)
-        }
-    } catch (e) {
-        console.error('Download failed', e)
-        // Try to extract a meaningful error message
-        let msg = 'Failed to download asset'
-        if (e.response) {
-            msg += `: ${e.response.status} ${e.response.statusText}`
-        } else if (e.message) {
-            msg += `: ${e.message}`
-        }
-        alert(msg)
-    } finally {
-        downloadingInspirations.value.delete(insp.id)
-    }
-}
-
-const startIdeaFromInspiration = (inspiration) => {
-    selectedInspiration.value = inspiration
-    isSettingsVisible.value = true
-    // Optionally scroll to settings or highlight it
-}
-
-
-// --- Generation Settings ---
-const prompt = ref('')
-const model = ref({ key: 'gemini-3-pro-image-preview', value: 'Pro' })
-const modelOptions = ref([
-    { key: 'gemini-3.1-flash-image-preview', value: '2' },
-    { key: 'gemini-3-pro-image-preview', value: 'Pro' }
-])
-const selectedModel = ref('flux-schnell')
-const quality = ref({ key: 'TWOK', value: '2K' })
-const aspectRatio = ref({ key: 'NINESIXTEEN', value: '9:16' })
-const imageCount = ref(1)
-const useProfileImage = ref(true)
-const useEnvironment = ref(false)
-const isSubmittingGen = ref(false)
-const selectedInspiration = ref(null) // New state for selected inspiration
-
-// Character & Assets
-const characters = ref([])
-const selectedCharacter = ref(null)
-const environments = ref([])
-const selectedEnvironment = ref(null)
-const selectedAssets = ref([])
-let _savedCharacterId = null
-let _savedEnvironmentId = null
-
-const loadEnvironments = async (charId) => {
-    if (!charId) {
-        environments.value = []
-        selectedEnvironment.value = null
-        return
-    }
-    try {
-        const response = await dataService.getEnvironments(charId)
-        environments.value = Array.isArray(response) ? response : (response.environments || [])
-        
-        if (_savedEnvironmentId) {
-            selectedEnvironment.value = environments.value.find(e => (e.id === _savedEnvironmentId || e._id === _savedEnvironmentId)) || null
-            _savedEnvironmentId = null
-        }
-    } catch (e) {
-        console.error('Failed to load environments', e)
-        environments.value = []
-    }
-}
-
-watch(selectedCharacter, (newChar) => {
-    loadEnvironments(newChar?.id || newChar?._id)
-})
-
-const qualityOptions = ref([
-    { key: 'TWOK', value: '2K' },
-    { key: 'FOURK', value: '4K' }
-])
-const aspectRatioOptions = ref([
-    { key: "ONEONE", value: "1:1" },
-    { key: "TWOTHREE", value: "2:3" },
-    { key: "THREETWO", value: "3:2" },
-    { key: "THREEFOUR", value: "3:4" },
-    { key: "FOURTHREE", value: "4:3" },
-    { key: "FOURFIVE", value: "4:5" },
-    { key: "FIVEFOUR", value: "5:4" },
-    { key: "NINESIXTEEN", value: "9:16" },
-    { key: "SIXTEENNINE", value: "16:9" },
-    { key: "TWENTYONENINE", value: "21:9" }
-])
-
-// Restore settings
-const SETTINGS_KEY = 'idea-gen-settings'
-const restoreSettings = () => {
-    const stored = localStorage.getItem(SETTINGS_KEY)
-    if (!stored) return
-    try {
-        const s = JSON.parse(stored)
-        if (s.model) model.value = s.model
-        if (s.prompt) prompt.value = s.prompt
-        if (s.quality) quality.value = s.quality
-        if (s.aspectRatio) aspectRatio.value = s.aspectRatio
-        if (s.imageCount) imageCount.value = Math.min(s.imageCount, 4)
-        if (s.selectedModel) selectedModel.value = s.selectedModel
-        if (s.useProfileImage !== undefined) useProfileImage.value = s.useProfileImage
-        if (s.useEnvironment !== undefined) useEnvironment.value = s.useEnvironment
-        _savedCharacterId = s.selectedCharacterId || null
-        _savedEnvironmentId = s.selectedEnvironmentId || null
-        if (s.selectedAssetIds && s.selectedAssetIds.length > 0) {
-            selectedAssets.value = s.selectedAssetIds.map(id => ({
-                id,
-                url: `/assets/${id}`,
-                name: 'Asset ' + id.substring(0, 4)
-            }))
-        }
-        // Note: We don't restore selectedInspiration to avoid stale state, or we could if needed.
-    } catch (e) {
-        console.error('Failed to restore settings', e)
-    }
-}
-
-const saveSettings = () => {
-    const settings = {
-        prompt: prompt.value,
-        model: model.value,
-        quality: quality.value,
-        aspectRatio: aspectRatio.value,
-        imageCount: imageCount.value,
-        selectedModel: selectedModel.value,
-        useProfileImage: useProfileImage.value,
-        useEnvironment: useEnvironment.value,
-        selectedCharacterId: selectedCharacter.value?.id || null,
-        selectedEnvironmentId: selectedEnvironment.value?.id || null,
-        selectedAssetIds: selectedAssets.value.map(a => a.id),
-    }
-    localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings))
-}
-
-watch([prompt, quality, aspectRatio, imageCount, model, useProfileImage, useEnvironment, selectedCharacter, selectedEnvironment, selectedAssets], saveSettings, { deep: true })
-
-onMounted(async () => {
-    restoreSettings()
-    await Promise.all([
-        ideaStore.fetchIdeas(),
-        ideaStore.fetchInspirations(),
-        loadCharacters()
-    ])
-})
-
-const loadCharacters = async () => {
-    try {
-        characters.value = await dataService.getCharacters()
-        if (_savedCharacterId && characters.value.length > 0) {
-            const found = characters.value.find(c => (c.id === _savedCharacterId || c._id === _savedCharacterId))
-            if (found) selectedCharacter.value = found
-            _savedCharacterId = null
-        }
-    } catch (e) {
-        console.error('Failed to load characters', e)
-    }
-}
-
-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
-    }
-}
-
-// Auto-generation flow
-const handleGenerate = async () => {
-    if (!prompt.value) return
-
-    isSubmittingGen.value = true
-    try {
-        // 1. Create a random name idea
-        const randomName = 'Session ' + new Date().toLocaleString()
-        const ideaData = {
-            name: randomName,
-            description: 'Auto-generated from quick start'
-        }
-        
-        // Pass inspiration ID if selected
-        if (selectedInspiration.value) {
-            ideaData.inspiration_id = selectedInspiration.value.id
-        }
-
-        const newIdea = await ideaStore.createIdea(ideaData)
-
-        // 2. Save settings (already handled by watch, but ensure latest)
-        saveSettings()
-
-        // 3. Navigate with autostart param
-        router.push({ path: `/ideas/${newIdea.id}`, query: { autostart: 'true' } })
-        
-        // Clear inspiration after use
-        selectedInspiration.value = null
-
-    } catch (e) {
-        console.error('Failed to start session', e)
-    } finally {
-        isSubmittingGen.value = false
-    }
-}
-
-const pastePrompt = async () => {
-    try {
-        const text = await navigator.clipboard.readText()
-        if (text) prompt.value = text
-    } catch (err) {
-        console.error('Failed to read clipboard', err)
-    }
-}
-
-// --- Asset Picker Logic ---
-const isAssetPickerVisible = ref(false)
-const assetPickerTab = ref('all') // 'all', 'uploaded', 'generated'
-const modalAssets = ref([])
-const isModalLoading = ref(false)
-const tempSelectedAssets = ref([])
-const assetPickerFileInput = ref(null)
-
-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 = () => {
-    tempSelectedAssets.value = [...selectedAssets.value]
-    isAssetPickerVisible.value = true
-    loadModalAssets()
-}
-
-const toggleAssetSelection = (asset) => {
-    const index = tempSelectedAssets.value.findIndex(a => a.id === asset.id)
-    if (index === -1) {
-        tempSelectedAssets.value.push(asset)
-    } else {
-        tempSelectedAssets.value.splice(index, 1)
-    }
-}
-
-const confirmAssetSelection = () => {
-    selectedAssets.value = [...tempSelectedAssets.value]
-    isAssetPickerVisible.value = false
-}
-
-const removeAsset = (asset) => {
-    selectedAssets.value = selectedAssets.value.filter(a => a.id !== asset.id)
-}
-
-watch(assetPickerTab, () => {
-    if (isAssetPickerVisible.value) {
-        loadModalAssets()
-    }
-})
-
-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 = ''
-        }
-    }
-}
-</script>
-
-<template>
-    <div class="flex flex-col h-full font-sans relative">
-        <!-- Content Area (Scrollable) -->
-        <div class="flex-1 overflow-y-auto p-4 md:p-6 pb-48 custom-scrollbar">
-            
-            <div class="flex flex-col lg:flex-row gap-6">
-                <!-- LEFT COLUMN: Ideas List -->
-                <div class="flex-1 flex flex-col gap-4">
-                     <!-- Top Bar -->
-                    <header class="flex justify-between items-center gap-0 border-b border-white/5 pb-2">
-                        <div class="flex flex-row items-center justify-between gap-2">
-                            <h1 class="text-lg font-bold !m-0 bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent">
-                                Ideas</h1>
-                            <p class="mt-0.5 mb-0 text-[10px] text-slate-500">Your creative sessions</p>
-                        </div>
-                    </header>
-
-                    <!-- Loading State -->
-                    <div v-if="loading && ideas.length === 0" class="flex flex-col gap-4">
-                        <div v-for="i in 6" :key="i" class="glass-panel rounded-2xl p-4 flex gap-4 items-center">
-                            <Skeleton width="4rem" height="4rem" class="rounded-lg" />
-                            <div class="flex-1">
-                                <Skeleton width="40%" height="1.5rem" class="mb-2" />
-                                <Skeleton width="60%" height="1rem" />
-                            </div>
-                        </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">Use the panel below to start a new creative session.
-                        </p>
-                    </div>
-
-                    <!-- Ideas List (Vertical) -->
-                    <div v-else class="flex flex-col gap-3">
-                        <div v-for="idea in ideas" :key="idea.id"
-                            class="glass-panel rounded-xl p-3 flex gap-4 items-center cursor-pointer border border-white/5 hover:bg-slate-800/80 hover:border-violet-500/30 group transition-all"
-                            @click="goToDetail(idea.id)">
-
-                            <!-- Thumbnail -->
-                            <div
-                                class="w-16 h-16 rounded-lg bg-slate-800 flex-shrink-0 overflow-hidden relative border border-white/10">
-                                <img v-if="idea.last_generation && idea.last_generation.status == 'done' && idea.last_generation.result_list.length > 0"
-                                    :src="API_URL + '/assets/' + idea.last_generation.result_list[0] + '?thumbnail=true'"
-                                    class="w-full h-full object-cover" />
-                                <div v-else class="w-full h-full flex items-center justify-center bg-slate-800 text-slate-600">
-                                    <i class="pi pi-image text-xl"></i>
-                                </div>
-                            </div>
-
-                            <!-- Details -->
-                            <div class="flex-1 min-w-0">
-                                <div class="flex items-center gap-2">
-                                    <h3
-                                        class="m-0 text-lg font-bold text-slate-200 group-hover:text-violet-300 transition-colors truncate">
-                                        {{ idea.name }}</h3>
-                                    <Button icon="pi pi-pencil" text rounded size="small" 
-                                        class="!w-6 !h-6 !text-slate-500 hover:!text-violet-400 opacity-0 group-hover:opacity-100 transition-opacity"
-                                        @click.stop="openRenameDialog(idea)"
-                                    />
-                                </div>
-                                <p class="m-0 text-sm text-slate-500 truncate">{{ idea.description || 'No description' }}</p>
-                            </div>
-
-                            <!-- Meta -->
-                            <div class="flex items-center gap-4 text-xs text-slate-500">
-                                <div v-if="getIdeaInspiration(idea)" 
-                                    class="flex items-center gap-1 bg-violet-500/20 border border-violet-500/30 px-2 py-1 rounded-md text-violet-300 hover:bg-violet-500/30 transition-colors cursor-pointer"
-                                    @click.stop="openPreview(getIdeaInspiration(idea))">
-                                    <i class="pi pi-bolt text-[10px]"></i>
-                                    <span class="hidden sm:inline">Inspiration</span>
-                                </div>
-
-                                <div class="flex items-center gap-1 bg-slate-900/50 px-2 py-1 rounded-md">
-                                    <i class="pi pi-images text-[10px]"></i>
-                                    <span>{{ idea.generation_ids?.length || 0 }}</span>
-                                </div>
-                                <i class="pi pi-chevron-right text-slate-600 group-hover:text-white transition-colors"></i>
-                            </div>
-
-                        </div>
-                    </div>
-                </div>
-
-                <!-- RIGHT COLUMN: Inspirations -->
-                <div class="w-full lg:w-80 flex flex-col gap-4">
-                    <header class="flex justify-between items-center gap-0 border-b border-white/5 pb-2">
-                        <div class="flex flex-row items-center gap-2">
-                            <h2 class="text-lg font-bold !m-0 text-slate-200">Inspirations</h2>
-                        </div>
-                        <Button icon="pi pi-plus" size="small" rounded text 
-                            class="!w-8 !h-8 !text-violet-400 hover:!bg-violet-500/10"
-                            @click="showInspirationDialog = true" />
-                    </header>
-
-                    <div v-if="inspirations.length === 0" class="flex flex-col items-center justify-center py-10 text-slate-500 bg-slate-900/20 rounded-xl border border-dashed border-white/5">
-                        <i class="pi pi-bolt text-2xl mb-2 opacity-50"></i>
-                        <p class="text-xs">No inspirations yet</p>
-                    </div>
-
-                    <div v-else class="flex flex-col gap-3">
-                        <div v-for="insp in inspirations" :key="insp.id" 
-                            class="glass-panel rounded-xl p-3 flex flex-col gap-2 border border-white/5 hover:border-white/10 transition-all relative group"
-                            :class="{'opacity-50': insp.is_completed}">
-                            
-                            <!-- Content Preview (Text Only) -->
-                            <div class="text-xs text-slate-300 break-all line-clamp-3 mb-1">
-                                {{ insp.caption || insp.source_url }}
-                            </div>
-                            
-                            <!-- Source Link -->
-                            <div v-if="insp.source_url" class="flex items-center gap-1 mb-1">
-                                <a :href="insp.source_url" target="_blank" class="text-[10px] text-violet-400 hover:underline truncate max-w-full flex items-center gap-1">
-                                    <i class="pi pi-external-link text-[8px]"></i>
-                                    Source
-                                </a>
-                            </div>
-
-                            <!-- Actions -->
-                            <div class="flex justify-end gap-1 mt-1 border-t border-white/5 pt-2">
-                                <Button v-if="insp.asset_id" 
-                                    icon="pi pi-eye" 
-                                    text rounded size="small" 
-                                    class="!w-7 !h-7 !text-slate-500 hover:!text-violet-400"
-                                    @click="openPreview(insp)" 
-                                    v-tooltip="'View Content'" />
-
-                                <Button v-if="insp.asset_id" 
-                                    :icon="downloadingInspirations.has(insp.id) ? 'pi pi-spin pi-spinner' : 'pi pi-download'" 
-                                    text rounded size="small" 
-                                    class="!w-7 !h-7 !text-slate-500 hover:!text-blue-400"
-                                    @click="handleDownloadInspiration(insp)" 
-                                    v-tooltip="'Download'" />
-
-                                <Button icon="pi pi-trash" text rounded size="small" 
-                                    class="!w-7 !h-7 !text-slate-500 hover:!text-red-400"
-                                    @click="handleDeleteInspiration(insp.id)" 
-                                    v-tooltip="'Delete'" />
-                                
-                                <Button v-if="!insp.is_completed" icon="pi pi-check" text rounded size="small" 
-                                    class="!w-7 !h-7 !text-slate-500 hover:!text-green-400"
-                                    @click="handleCompleteInspiration(insp.id)" 
-                                    v-tooltip="'Mark Complete'" />
-                                
-                                <Button v-if="!insp.is_completed" icon="pi pi-sparkles" text rounded size="small" 
-                                    class="!w-7 !h-7 !text-violet-400 hover:!bg-violet-500/20"
-                                    @click="startIdeaFromInspiration(insp)" 
-                                    v-tooltip="'Create Idea'" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Rename Dialog -->
-        <Dialog v-model:visible="showRenameDialog" header="Rename Idea" modal :style="{ width: '400px' }"
-            :pt="{ root: { class: '!bg-slate-800 !border-white/10' }, header: { class: '!bg-slate-800' }, content: { class: '!bg-slate-800' } }">
-            <div class="flex flex-col gap-4">
-                <div class="flex flex-col gap-1">
-                    <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">New Name</label>
-                    <InputText v-model="newName" class="w-full !bg-slate-700 !border-white/10 !text-white" autofocus @keyup.enter="handleRename" />
-                </div>
-                <div class="flex justify-end gap-2 mt-2">
-                    <Button label="Cancel" text @click="showRenameDialog = false" class="!text-slate-400 hover:!text-white" />
-                    <Button label="Save" :loading="renaming" @click="handleRename" class="!bg-violet-600 !border-none hover:!bg-violet-500" />
-                </div>
-            </div>
-        </Dialog>
-
-        <!-- Create Inspiration Dialog -->
-        <Dialog v-model:visible="showInspirationDialog" header="Add Inspiration" modal :style="{ width: '400px' }"
-            :pt="{ root: { class: '!bg-slate-800 !border-white/10' }, header: { class: '!bg-slate-800' }, content: { class: '!bg-slate-800' } }">
-            <div class="flex flex-col gap-4">
-                <div class="flex flex-col gap-1">
-                    <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Instagram Link / Content</label>
-                    <InputText v-model="newInspirationLink" placeholder="https://instagram.com/..." class="w-full !bg-slate-700 !border-white/10 !text-white" autofocus @keyup.enter="handleCreateInspiration" />
-                </div>
-                <div class="flex justify-end gap-2 mt-2">
-                    <Button label="Cancel" text @click="showInspirationDialog = false" class="!text-slate-400 hover:!text-white" />
-                    <Button label="Add" :loading="creatingInspiration" @click="handleCreateInspiration" class="!bg-violet-600 !border-none hover:!bg-violet-500" />
-                </div>
-            </div>
-        </Dialog>
-
-        <!-- Preview Dialog -->
-        <Dialog v-model:visible="showPreviewDialog" modal :header="previewInspiration?.caption || 'Preview'" 
-            :style="{ width: '90vw', maxWidth: '800px' }"
-            :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' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">
-            <div class="flex flex-col items-center justify-center p-4 min-h-[300px]">
-                <div v-if="loadingPreview" class="flex flex-col items-center gap-2">
-                    <i class="pi pi-spin pi-spinner text-violet-500 text-2xl"></i>
-                    <span class="text-slate-400 text-sm">Loading content...</span>
-                </div>
-                <div v-else-if="previewAsset" class="w-full h-full flex items-center justify-center">
-                    <video v-if="previewAsset.content_type?.startsWith('video/')" 
-                        :src="API_URL + '/assets/' + previewInspiration.asset_id" 
-                        controls autoplay class="max-w-full max-h-[70vh] rounded-lg shadow-2xl">
-                    </video>
-                    <img v-else 
-                        :src="API_URL + '/assets/' + previewInspiration.asset_id" 
-                        class="max-w-full max-h-[70vh] rounded-lg shadow-2xl object-contain" />
-                </div>
-                <div v-else class="text-slate-500">
-                    Failed to load content
-                </div>
-            </div>
-        </Dialog>
-
-        <!-- SETTINGS PANEL (Bottom - Persistent) -->
-        <div v-if="isSettingsVisible"
-            class="absolute bottom-4 left-1/2 -translate-x-1/2 w-[95%] max-w-4xl glass-panel border border-white/10 bg-slate-900/95 backdrop-blur-xl px-4 py-3 z-[60] !rounded-[2rem] shadow-2xl flex flex-col gap-1 max-h-[60vh] overflow-y-auto">
-
-            <div class="w-full flex justify-center -mt-1 mb-1 cursor-pointer" @click="isSettingsVisible = false">
-                <div class="w-12 h-1 bg-white/20 rounded-full hover:bg-white/40 transition-colors"></div>
-            </div>
-
-            <!-- Selected Inspiration Indicator -->
-            <div v-if="selectedInspiration" class="flex items-center gap-2 bg-violet-500/20 border border-violet-500/30 rounded-lg px-3 py-2 mb-2 animate-in fade-in slide-in-from-bottom-2">
-                <i class="pi pi-bolt text-violet-400 text-sm"></i>
-                <span class="text-xs text-violet-200 truncate flex-1">Using inspiration: {{ selectedInspiration.caption || selectedInspiration.source_url }}</span>
-                <Button icon="pi pi-times" text rounded size="small" class="!w-5 !h-5 !text-violet-300 hover:!text-white" @click="selectedInspiration = null" />
-            </div>
-
-            <div class="flex flex-col lg:flex-row gap-3">
-                <!-- LEFT COLUMN: Prompt + Character + Assets -->
-                <div class="flex-1 flex flex-col gap-2">
-                    <!-- Prompt -->
-                    <div class="flex flex-col gap-1">
-                        <div class="flex justify-between items-center">
-                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Prompt</label>
-                            <div class="flex gap-1">
-                                <Button icon="pi pi-clipboard" label="Paste" size="small" text
-                                    class="!text-slate-400 hover:!text-white hover:!bg-white/10 !py-0 !px-1.5 !text-[9px] !h-5"
-                                    @click="pastePrompt" />
-                                <Button icon="pi pi-times" label="Clear" size="small" text
-                                    class="!text-slate-400 hover:!text-white hover:!bg-white/10 !py-0 !px-1.5 !text-[9px] !h-5"
-                                    @click="prompt = ''" />
-                            </div>
-                        </div>
-                        <Textarea v-model="prompt" rows="2"
-                            placeholder="Describe what you want to create... (Auto-starts new session)"
-                            class="w-full !h-28 bg-slate-800 !text-[16px] border-white/10 text-white rounded-lg p-2 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" />
-                    </div>
-
-                    <!-- Character & Assets Row -->
-                    <div class="flex flex-col md:flex-row gap-2">
-                        <div class="flex-1 flex flex-col gap-1">
-                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Character</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 flex-wrap items-center gap-x-4 gap-y-2 mt-2 px-1 animate-in fade-in slide-in-from-top-1">
-                                                                                <div class="flex items-center gap-2">
-                                                                                    <Checkbox v-model="useProfileImage" :binary="true" inputId="idea-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="idea-use-profile-img"
-                                                                                        class="text-xs text-slate-300 cursor-pointer select-none">Use Photo</label>
-                                                                                </div>
-                                                                                
-                                                                                <div class="flex items-center gap-2">
-                                                                                    <Checkbox v-model="useEnvironment" :binary="true" inputId="idea-use-env"
-                                                                                        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="idea-use-env"
-                                                                                        class="text-xs text-slate-300 cursor-pointer select-none">Use Environment</label>
-                                                                                </div>
-                                                                            </div>
-                                                                        </div>
-                                                
-                                                                        <div class="flex-1 flex flex-col gap-1">
-                                                                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Assets</label>
-                                                                            <div @click="openAssetPicker"
-                                                                                class="w-full bg-slate-800 border border-white/10 rounded-lg p-2 min-h-[38px] cursor-pointer hover:bg-slate-700/50 transition-colors flex flex-wrap gap-1.5">
-                                                                                <span v-if="selectedAssets.length === 0" 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>
-                                                                                    <img v-if="asset.url" :src="API_URL + asset.url + '?thumbnail=true'"
-                                                                                        class="w-4 h-4 rounded object-cover" />
-                                                                                    <span class="truncate max-w-[100px]">{{ asset.name || 'Asset ' + (asset.id ?
-                                                                                        asset.id.substring(0, 4) : '') }}</span>
-                                                                                    <i class="pi pi-times cursor-pointer hover:text-white"
-                                                                                        @click.stop="removeAsset(asset)"></i>
-                                                                                </div>
-                                                                            </div>
-                                                                        </div>
-                                                                    </div>
-                                                
-                                                                    <!-- Environment Row (Below) -->
-                                                                    <div v-if="selectedCharacter && useEnvironment" class="flex flex-col gap-1 animate-in fade-in slide-in-from-top-1 mt-2">                        <div class="flex justify-between items-center">
-                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Environment</label>
-                            <Button v-if="selectedEnvironment" icon="pi pi-times" @click="selectedEnvironment = null" text size="small" 
-                                class="!p-0 !h-4 !w-4 !text-[8px] text-slate-500 hover:text-white" />
-                        </div>
-                        
-                        <div v-if="environments.length > 0" class="flex gap-2 overflow-x-auto pb-1 custom-scrollbar no-scrollbar">
-                            <div v-for="env in environments" :key="env.id || env._id" 
-                                @click="selectedEnvironment = env"
-                                class="flex-shrink-0 flex items-center gap-2 px-2 py-1.5 rounded-lg border-2 transition-all cursor-pointer group bg-slate-800/40"
-                                :class="[
-                                    (selectedEnvironment?.id === (env.id || env._id) || selectedEnvironment?._id === (env.id || env._id))
-                                    ? 'border-violet-500 bg-violet-500/10 shadow-[0_0_15px_rgba(124,58,237,0.1)]' 
-                                    : 'border-white/5 hover:border-white/20'
-                                ]"
-                            >
-                                <div class="w-6 h-6 rounded overflow-hidden flex-shrink-0 bg-slate-900 flex items-center justify-center border border-white/5">
-                                    <img v-if="env.asset_ids?.length > 0" 
-                                        :src="API_URL + '/assets/' + env.asset_ids[0] + '?thumbnail=true'" 
-                                        class="w-full h-full object-cover" 
-                                    />
-                                    <i v-else class="pi pi-map-marker text-[10px]" 
-                                        :class="(selectedEnvironment?.id === (env.id || env._id) || selectedEnvironment?._id === (env.id || env._id)) ? 'text-violet-400' : 'text-slate-500'"
-                                    ></i>
-                                </div>
-                                <span class="text-[10px] whitespace-nowrap pr-1"
-                                    :class="(selectedEnvironment?.id === (env.id || env._id) || selectedEnvironment?._id === (env.id || env._id)) ? 'text-violet-300 font-bold' : 'text-slate-400 group-hover:text-slate-200'"
-                                >
-                                    {{ env.name }}
-                                </span>
-                                <i v-if="(selectedEnvironment?.id === (env.id || env._id) || selectedEnvironment?._id === (env.id || env._id))" 
-                                    class="pi pi-check text-violet-400 text-[8px]"></i>
-                            </div>
-                        </div>
-                        <div v-else class="py-2 px-3 bg-slate-800/50 border border-white/5 rounded-xl text-center">
-                            <p class="text-[9px] text-slate-600 uppercase m-0">No environments</p>
-                        </div>
-                    </div>                </div>
-
-                <!-- RIGHT COLUMN: Settings & Button -->
-                <div class="w-full lg:w-72 flex flex-col gap-2">
-                    <div class="grid grid-cols-3 gap-2">
-                        <div class="flex flex-col gap-1">
-                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Model</label>
-                            <div class="flex bg-slate-800 p-1 rounded-xl border border-white/10">
-                                <div v-for="option in modelOptions" :key="option.key" @click="model = option"
-                                    class="flex-1 text-center py-1 text-[10px] font-medium transition-all cursor-pointer rounded-md"
-                                    :class="model.key === option.key ? 'bg-white/10 text-white shadow-sm' : 'text-slate-500 hover:text-slate-300'">
-                                    {{ option.value }}
-                                </div>
-                            </div>
-                        </div>
-                        <div class="flex flex-col gap-1">
-                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Quality</label>
-                            <div class="flex bg-slate-800 p-1 rounded-xl border border-white/10 h-[34px]">
-                                <div v-for="option in qualityOptions" :key="option.key" @click="quality = option"
-                                    class="flex-1 flex items-center justify-center cursor-pointer rounded-md text-[10px] font-bold transition-all"
-                                    :class="quality.key === option.key ? 'bg-white/10 text-white shadow-sm' : 'text-slate-500 hover:text-slate-300'">
-                                    {{ option.value }}
-                                </div>
-                            </div>
-                        </div>
-                        <div class="flex flex-col gap-1">
-                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Ratio</label>
-                            <Dropdown v-model="aspectRatio" :options="aspectRatioOptions" optionLabel="value"
-                                class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl !h-[34px]"
-                                :pt="{ 
-                                    input: { class: '!text-white !text-[10px] !py-1 !px-2 !font-bold' }, 
-                                    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-[10px] !py-1' } 
-                                }" />
-                        </div>
-                    </div>
-
-                    <!-- Generation Count -->
-                    <div class="flex flex-col gap-1">
-                        <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Count</label>
-                        <div class="flex items-center">
-                            <div class="flex-1 flex bg-slate-800 rounded-lg border border-white/10 overflow-hidden">
-                                <button v-for="n in 4" :key="n" @click="imageCount = n"
-                                    class="flex-1 py-1 text-xs font-bold transition-all"
-                                    :class="imageCount === n ? 'bg-violet-600 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'">
-                                    {{ n }}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-
-
-                    <div class="mt-auto">
-                        <Button :label="isSubmittingGen ? 'Starting...' : 'Generate New Session'"
-                            :icon="isSubmittingGen ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"
-                            :loading="isSubmittingGen" :disabled="isSubmittingGen || !prompt" @click="handleGenerate"
-                            class="w-full !py-2 !text-sm !font-bold !bg-gradient-to-r from-violet-600 to-cyan-500 !border-none !rounded-lg !shadow-lg !shadow-violet-500/20 hover:!scale-[1.02] transition-all disabled:opacity-50 disabled:cursor-not-allowed" />
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <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-violet-600 !border-none !shadow-xl !font-bold shadow-violet-500/40 !px-6 !py-3" />
-            </div>
-        </transition>
-
-        <Dialog v-model:visible="isAssetPickerVisible" modal header="Select Assets"
-            :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-violet-500 text-violet-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-violet-600/20 !text-violet-300 hover:!bg-violet-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="toggleAssetSelection(asset)"
-                            class="relative aspect-square rounded-xl overflow-hidden cursor-pointer border-2 transition-all group"
-                            :class="tempSelectedAssets.some(a => a.id === asset.id) ? 'border-violet-500 ring-2 ring-violet-500/30' : 'border-transparent hover:border-white/20'">
-                            <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>
-                            <!-- Checkmark -->
-                            <div v-if="tempSelectedAssets.some(a => a.id === asset.id)"
-                                class="absolute top-2 right-2 w-6 h-6 bg-violet-500 rounded-full flex items-center justify-center shadow-lg animate-in zoom-in duration-200">
-                                <i class="pi pi-check text-white text-xs"></i>
-                            </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>
-
-            <template #footer>
-                <div class="flex justify-end gap-2">
-                    <Button label="Cancel" @click="isAssetPickerVisible = false"
-                        class="!text-slate-300 hover:!bg-white/5" text />
-                    <Button :label="'Select (' + tempSelectedAssets.length + ')'" @click="confirmAssetSelection"
-                        class="!bg-violet-600 !border-none hover:!bg-violet-500" />
-                </div>
-            </template>
-        </Dialog>
-
-    </div>
-</template>
-
-<style scoped>
-.glass-panel {
-    background: rgba(255, 255, 255, 0.03);
-    backdrop-filter: blur(10px);
-}
-
-.custom-scrollbar::-webkit-scrollbar {
-    width: 6px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.02);
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.2);
-}
-</style>

src/views/ImageGenerationView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, ref} from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { dataService } from '../services/dataService'
 import { aiService } from '../services/aiService'
@@ -7,13 +7,12 @@ import Button from 'primevue/button'
 import Textarea from 'primevue/textarea'
 import ProgressSpinner from 'primevue/progressspinner'
 import ProgressBar from 'primevue/progressbar'
+import Message from 'primevue/message'
+import Tag from 'primevue/tag'
 import Checkbox from 'primevue/checkbox'
 import Dialog from 'primevue/dialog'
 import Paginator from 'primevue/paginator'
 import InputText from 'primevue/inputtext'
-import Tag from 'primevue/tag'
-import Dropdown from 'primevue/dropdown'
-import GenerationPreviewModal from '../components/GenerationPreviewModal.vue'
 
 const router = useRouter()
 const API_URL = import.meta.env.VITE_API_URL
@@ -45,33 +44,32 @@ const assetsTotalRecords = ref(0)
 const assetsRows = ref(12)
 const assetsFirst = ref(0)
 const activeAssetFilter = ref('all')
+const sendToTelegram = ref(false)
+const telegramId = ref(localStorage.getItem('telegram_id') || '')
+const isTelegramIdSaved = ref(!!localStorage.getItem('telegram_id'))
 const isUploading = ref(false)
 const fileInput = ref(null)
 
-const model = ref({ key: 'gemini-3-pro-image-preview', value: 'Pro' })
+const saveTelegramId = () => {
-const modelOptions = ref([
+    if (telegramId.value) {
-    { key: 'gemini-3.1-flash-image-preview', value: '2' },
+        localStorage.setItem('telegram_id', telegramId.value)
-    { key: 'gemini-3-pro-image-preview', value: 'Pro' }
+        isTelegramIdSaved.value = true
-])
+    }
+}
 
 const quality = ref({ key: 'TWOK', value: '2K' })
 const qualityOptions = ref([
+    { key: 'ONEK', value: '1K' },
     { key: 'TWOK', value: '2K' },
     { key: 'FOURK', value: '4K' }
 ])
 
 const aspectRatio = ref({ key: "NINESIXTEEN", value: "9:16" })
 const aspectRatioOptions = ref([
-    { key: "ONEONE", value: "1:1" },
-    { key: "TWOTHREE", value: "2:3" },
-    { key: "THREETWO", value: "3:2" },
-    { key: "THREEFOUR", value: "3:4" },
-    { key: "FOURTHREE", value: "4:3" },
-    { key: "FOURFIVE", value: "4:5" },
-    { key: "FIVEFOUR", value: "5:4" },
     { key: "NINESIXTEEN", value: "9:16" },
-    { key: "SIXTEENNINE", value: "16:9" },
+    { key: "FOURTHREE", value: "4:3" },
-    { key: "TWENTYONENINE", value: "21:9" }
+    { key: "THREEFOUR", value: "3:4" },
+    { key: "SIXTEENNINE", value: "16:9" }
 ])
 
 // --- Data Loading ---
@@ -182,6 +180,18 @@ const onFileSelected = async (event) => {
 const handleGenerate = async () => {
     if (!prompt.value.trim()) return
 
+    // Validation for Telegram
+    if (sendToTelegram.value && !telegramId.value) {
+        alert("Please enter your Telegram ID")
+        return
+    }
+
+    // Save ID if provided
+    if (telegramId.value && telegramId.value !== localStorage.getItem('telegram_id')) {
+        localStorage.setItem('telegram_id', telegramId.value)
+        isTelegramIdSaved.value = true
+    }
+
     isGenerating.value = true
     generationSuccess.value = false
     generationError.value = null
@@ -191,25 +201,18 @@ const handleGenerate = async () => {
 
     try {
         const payload = {
-            model: model.value.key,
             aspect_ratio: aspectRatio.value.key,
             quality: quality.value.key,
             prompt: prompt.value,
             assets_list: selectedAssets.value.map(a => a.id),
             linked_character_id: null, // Explicitly null for global generation
+            telegram_id: sendToTelegram.value ? telegramId.value : null
         }
 
         const response = await aiService.runGeneration(payload)
 
-        let genId = null
+        if (response && response.id) {
-        if (response && response.generations && response.generations.length > 0) {
+            pollStatus(response.id)
-            genId = response.generations[0].id
-        } else if (response && response.id) {
-            genId = response.id
-        }
-
-        if (genId) {
-            pollStatus(genId)
         } else {
             // Fallback immediate response
             generatedResult.value = response
@@ -278,9 +281,6 @@ const pollStatus = async (id) => {
 const restoreGeneration = async (gen) => {
     prompt.value = gen.prompt
 
-    const foundModel = modelOptions.value.find(opt => opt.key === gen.model)
-    if (foundModel) model.value = foundModel
-
     const foundQuality = qualityOptions.value.find(opt => opt.key === gen.quality)
     if (foundQuality) quality.value = foundQuality
 
@@ -288,16 +288,23 @@ const restoreGeneration = async (gen) => {
     if (foundAspect) aspectRatio.value = foundAspect
 
     if (gen.status === 'done' && gen.result_list && gen.result_list.length > 0) {
-        // Keep original gen object for preview and details
+        // We need to fetch details or just display the image
+        // history list usually has the main image preview
         generatedResult.value = {
-            ...gen,
             type: 'assets',
+            // Mocking asset object structure from history usage in DetailView
             assets: gen.result_list.map(id => ({
                 id,
-                url: `/assets/${id}`,
+                url: `/assets/${id}`,  // This might need adjustment based on how API serves files
+                // Ideally history API should return full asset objects or URLs.
+                // If not, we rely on the implementation in CharacterDetailView:
+                // :src="API_URL + '/assets/' + gen.result_list[0]"
+                // So let's construct it similarly
             })),
+            tech_prompt: gen.tech_prompt,
             execution_time: gen.execution_time_seconds,
             api_execution_time: gen.api_execution_time_seconds,
+            token_usage: gen.token_usage
         }
     }
 }
@@ -325,32 +332,14 @@ const handleImprovePrompt = async () => {
 const isImagePreviewVisible = ref(false)
 const previewImage = ref(null)
 
-const openImagePreview = (url, name = 'Image Preview', createdAt = null, gen = null, assetId = null, isLiked = false) => {
+const openImagePreview = (url, name = 'Image Preview', createdAt = null) => {
-    previewImage.value = { url, name, createdAt, gen, assetId, is_liked: isLiked }
+    previewImage.value = { url, name, createdAt }
     isImagePreviewVisible.value = true
 }
 
-const handleLiked = ({ id, is_liked }) => {
+const formatDate = (dateString) => {
-    // Update local state in history
+    if (!dateString) return ''
-    historyGenerations.value.forEach(gen => {
+    return new Date(dateString).toLocaleString()
-        if (gen.result_list?.includes(id)) {
-            if (!gen.liked_assets) gen.liked_assets = []
-            if (is_liked) {
-                if (!gen.liked_assets.includes(id)) gen.liked_assets.push(id)
-            } else {
-                gen.liked_assets = gen.liked_assets.filter(aid => aid !== id)
-            }
-        }
-    })
-    // Also update generatedResult if it's the one liked
-    if (generatedResult.value && generatedResult.value.id === id || generatedResult.value?.result_list?.includes(id)) {
-        if (!generatedResult.value.liked_assets) generatedResult.value.liked_assets = []
-        if (is_liked) {
-            if (!generatedResult.value.liked_assets.includes(id)) generatedResult.value.liked_assets.push(id)
-        } else {
-            generatedResult.value.liked_assets = generatedResult.value.liked_assets.filter(aid => aid !== id)
-        }
-    }
 }
 
 const undoImprovePrompt = () => {
@@ -365,15 +354,6 @@ const clearPrompt = () => {
     prompt.value = ''
 }
 
-const pastePrompt = async () => {
-    try {
-        const text = await navigator.clipboard.readText()
-        if (text) prompt.value = text
-    } catch (err) {
-        console.error('Failed to read clipboard', err)
-    }
-}
-
 // --- Reuse Logic ---
 
 const reusePrompt = (gen) => {
@@ -425,6 +405,10 @@ const useResultAsReference = (gen) => {
 
 // --- Utils ---
 
+const copyToClipboard = () => {
+    // Implement if needed for prompt copying
+}
+
 
 
 // --- Lifecycle ---
@@ -448,23 +432,13 @@ onMounted(() => {
                     <!-- Settings Card -->
                     <div class="glass-panel p-6 rounded-2xl border border-white/5 bg-white/5 flex flex-col gap-6">
 
-                        <!-- Settings Row: Model, Quality & Aspect Ratio -->
+                        <!-- Quality & Aspect Ratio -->
-                        <div class="grid grid-cols-3 gap-4">
+                        <div class="grid grid-cols-2 gap-6">
-                            <div class="flex flex-col gap-2">
-                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Model</label>
-                                <div class="flex bg-slate-900/50 p-1 rounded-lg border border-white/10 h-[34px]">
-                                    <div v-for="option in modelOptions" :key="option.key" @click="model = option"
-                                        class="flex-1 flex items-center justify-center cursor-pointer rounded-md text-[10px] font-bold transition-all"
-                                        :class="model.key === option.key ? 'bg-white/10 text-white shadow-sm' : 'text-slate-500 hover:text-slate-300'">
-                                        {{ option.value }}
-                                    </div>
-                                </div>
-                            </div>
                             <div class="flex flex-col gap-2">
                                 <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Quality</label>
-                                <div class="flex bg-slate-900/50 p-1 rounded-lg border border-white/10 h-[34px]">
+                                <div class="flex bg-slate-900/50 p-1 rounded-lg border border-white/10">
                                     <div v-for="option in qualityOptions" :key="option.key" @click="quality = option"
-                                        class="flex-1 flex items-center justify-center cursor-pointer rounded-md text-[10px] font-bold transition-all"
+                                        class="flex-1 text-center py-1.5 cursor-pointer rounded-md text-xs font-medium transition-all"
                                         :class="quality.key === option.key ? 'bg-white/10 text-white shadow-sm' : 'text-slate-500 hover:text-slate-300'">
                                         {{ option.value }}
                                     </div>
@@ -473,14 +447,14 @@ onMounted(() => {
                             <div class="flex flex-col gap-2">
                                 <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Aspect
                                     Ratio</label>
-                                <Dropdown v-model="aspectRatio" :options="aspectRatioOptions" optionLabel="value"
+                                <div class="flex bg-slate-900/50 p-1 rounded-lg border border-white/10">
-                                    class="w-full !bg-slate-900/50 !border-white/10 !text-white !rounded-lg !h-[34px]"
+                                    <div v-for="option in aspectRatioOptions" :key="option.key"
-                                    :pt="{ 
+                                        @click="aspectRatio = option"
-                                        input: { class: '!text-white !text-[10px] !py-1 !px-2 !font-bold' }, 
+                                        class="flex-1 text-center py-1.5 cursor-pointer rounded-md text-xs font-medium transition-all"
-                                        trigger: { class: '!text-slate-400 !w-6' }, 
+                                        :class="aspectRatio.key === option.key ? 'bg-white/10 text-white shadow-sm' : 'text-slate-500 hover:text-slate-300'">
-                                        panel: { class: '!bg-slate-900 !border-white/10' }, 
+                                        {{ option.value }}
-                                        item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white !text-[10px] !py-1' } 
+                                    </div>
-                                    }" />
+                                </div>
                             </div>
                         </div>
 
@@ -497,9 +471,6 @@ onMounted(() => {
                                         :disabled="prompt.length <= 10" size="small"
                                         class="!py-0.5 !px-2 !text-[10px] bg-violet-600/20 hover:bg-violet-600/30 border-violet-500/30 text-violet-400 disabled:opacity-50"
                                         @click="handleImprovePrompt" />
-                                    <Button icon="pi pi-clipboard" label="Paste" size="small"
-                                        class="!py-0.5 !px-2 !text-[10px] bg-slate-800 hover:bg-slate-700 border-white/10 text-slate-400"
-                                        @click="pastePrompt" />
                                     <Button icon="pi pi-times" label="Clear" size="small"
                                         class="!py-0.5 !px-2 !text-[10px] bg-slate-800 hover:bg-slate-700 border-white/10 text-slate-400"
                                         @click="clearPrompt" />
@@ -548,6 +519,21 @@ onMounted(() => {
 
                         <!-- Generate Button -->
                         <div class="mt-auto">
+                            <div class="flex flex-col gap-2 mb-3">
+                                <div class="flex items-center gap-2">
+                                    <Checkbox v-model="sendToTelegram" :binary="true" inputId="tg-check-gen" />
+                                    <label for="tg-check-gen"
+                                        class="text-xs text-slate-400 cursor-pointer select-none">Send result to
+                                        Telegram</label>
+                                </div>
+                                <div v-if="sendToTelegram && !isTelegramIdSaved"
+                                    class="animate-in fade-in slide-in-from-top-1 duration-200">
+                                    <InputText v-model="telegramId" placeholder="Enter Telegram ID"
+                                        class="w-full !text-xs !py-1.5" @blur="saveTelegramId" />
+                                    <small class="text-[10px] text-slate-500 block mt-0.5">ID will be saved for future
+                                        use</small>
+                                </div>
+                            </div>
                             <Button :label="isGenerating ? 'Generating...' : 'Generate Image'"
                                 :icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-magic'" :loading="isGenerating"
                                 @click="handleGenerate"
@@ -601,7 +587,7 @@ onMounted(() => {
                                     v-if="generatedResult.type === 'assets' && generatedResult.assets && generatedResult.assets.length > 0">
                                     <!-- Displaying the first asset as main preview -->
                                     <img :src="API_URL + '/assets/' + generatedResult.assets[0].id"
-                                        @click="openImagePreview(API_URL + '/assets/' + generatedResult.assets[0].id, 'Generated Result', new Date().toISOString(), generatedResult, generatedResult.assets[0].id, generatedResult.liked_assets?.includes(generatedResult.assets[0].id))"
+                                        @click="openImagePreview(API_URL + '/assets/' + generatedResult.assets[0].id, 'Generated Result', new Date().toISOString())"
                                         class="w-full h-full object-contain cursor-pointer hover:scale-[1.01] transition-transform duration-300" />
                                 </template>
                                 <template v-else>
@@ -662,20 +648,13 @@ onMounted(() => {
 
                         <div class="flex-1 overflow-y-auto pr-2 custom-scrollbar flex flex-col gap-2">
                             <div v-for="gen in historyGenerations" :key="gen.id"
-                                class="glass-panel p-2 rounded-lg border border-white/5 flex flex-col gap-2 hover:bg-white/10 transition-colors group relative">
+                                class="glass-panel p-2 rounded-lg border border-white/5 flex flex-col gap-2 hover:bg-white/10 transition-colors group">
-                                <!-- Liked badge on history item -->
-                                <div v-if="gen.liked_assets?.length > 0"
-                                    class="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-pink-500 shadow-lg flex items-center justify-center border border-pink-400 z-10">
-                                    <i class="pi pi-heart-fill text-white text-[8px]"></i>
-                                </div>
-
                                 <div class="flex gap-3 items-start cursor-pointer" @click="restoreGeneration(gen)">
                                     <div
-                                        class="w-12 h-12 rounded bg-black/40 border border-white/10 overflow-hidden flex-shrink-0 mt-0.5 relative group/hist">
+                                        class="w-12 h-12 rounded bg-black/40 border border-white/10 overflow-hidden flex-shrink-0 mt-0.5">
                                         <img v-if="gen.result_list && gen.result_list.length > 0"
                                             :src="API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'"
-                                            class="w-full h-full object-cover" 
+                                            class="w-full h-full object-cover" />
-                                            @click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0], 'History Entry', gen.created_at, gen, gen.result_list[0], gen.liked_assets?.includes(gen.result_list[0]))" />
                                     </div>
                                     <div class="flex-1 min-w-0">
                                         <p class="text-xs text-slate-300 truncate font-medium">{{ gen.prompt }}</p>
@@ -761,16 +740,18 @@ onMounted(() => {
     </Dialog>
 
     <!-- Image Preview Modal -->
-    <GenerationPreviewModal 
+    <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
-        v-model:visible="isImagePreviewVisible"
+        :header="previewImage?.name || 'Image Preview'" :style="{ width: '90vw', maxWidth: '800px' }"
-        :preview-images="[previewImage].filter(i => !!i)"
+        class="glass-panel rounded-2xl">
-        :initial-index="0"
+        <div v-if="previewImage" class="flex flex-col items-center">
-        :api-url="API_URL"
+            <img :src="previewImage.url" :alt="previewImage.name"
-        @reuse-prompt="reusePrompt"
+                class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
-        @reuse-asset="reuseAsset"
+            <div class="mt-6 text-center">
-        @use-result-as-asset="useResultAsReference"
+                <h2 class="text-2xl font-bold mb-2">{{ previewImage.name }}</h2>
-        @liked="handleLiked"
+                <p v-if="previewImage.createdAt" class="text-slate-400">{{ formatDate(previewImage.createdAt) }}</p>
-    />
+            </div>
+        </div>
+    </Dialog>
 
 </template>
 

src/views/ImageToPromptView.vue

@@ -55,15 +55,6 @@ const copyToClipboard = () => {
     navigator.clipboard.writeText(generatedPrompt.value)
 }
 
-const pastePrompt = async () => {
-    try {
-        const text = await navigator.clipboard.readText()
-        if (text) userPrompt.value = text
-    } catch (err) {
-        console.error('Failed to read clipboard', err)
-    }
-}
-
 
 </script>
 
@@ -133,14 +124,11 @@ const pastePrompt = async () => {
 
                     <!-- Optional Prompt -->
                     <div class="glass-panel p-1 rounded-2xl border border-white/5">
-                        <div class="p-4 border-b border-white/5 flex justify-between items-center">
+                        <div class="p-4 border-b border-white/5">
                             <label class="text-sm font-bold text-slate-300 flex items-center gap-2">
                                 <i class="pi pi-align-left"></i> Additional Instructions <span
                                     class="text-slate-500 font-normal">(Optional)</span>
                             </label>
-                            <Button icon="pi pi-clipboard" label="Paste" size="small" text
-                                class="!text-slate-400 hover:!text-white hover:!bg-white/10 !py-1"
-                                @click="pastePrompt" />
                         </div>
                         <textarea v-model="userPrompt"
                             class="w-full bg-transparent border-none p-4 text-slate-100 focus:outline-none focus:ring-0 placeholder-slate-600 min-h-[100px] resize-none"

src/views/ProjectDetailView.vue

@@ -1,6 +1,5 @@
 <template>
-    <div class="h-full overflow-y-auto custom-scrollbar">
+    <div class="container mx-auto p-4 animate-fade-in" v-if="project">
-        <div v-if="project" class="container mx-auto p-4 md:p-8 animate-fade-in">
         <!-- Header -->
         <div class="glass-panel p-8 rounded-xl mb-8 relative overflow-hidden">
             <div class="absolute top-0 right-0 p-4 opacity-10">
@@ -45,24 +44,25 @@
                     <div v-if="isOwner" class="mb-6">
                         <div class="flex gap-2">
                             <InputText v-model="inviteUsername" placeholder="Username to add"
-                                    class="w-full" @keyup.enter="addMember" />
+                                class="w-full p-inputtext-sm" @keyup.enter="addMember" />
                             <Button label="Add" icon="pi pi-user-plus" size="small" @click="addMember"
                                 :loading="inviting" :disabled="!inviteUsername.trim()" />
                         </div>
                     </div>
 
                     <div class="flex flex-col gap-4">
-                                                <div v-for="member in project.members" :key="member.id"
+                        <div v-for="memberId in project.members" :key="memberId"
                             class="flex items-center p-3 rounded-lg bg-slate-800/30 border border-slate-700/30">
                             <div
                                 class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold mr-3">
                                 <i class="pi pi-user"></i>
                             </div>
                             <div class="overflow-hidden">
-                                                        <p class="text-white font-bold truncate">{{ member.username }}</p>
+                                <p class="text-white font-medium truncate">{{ memberId === project.owner_id ? 'Owner' :
-                                                        <p class="text-slate-500 text-[10px] truncate font-mono">ID: {{ member.id }}</p>
+                                    'Member' }}</p>
+                                <p class="text-slate-500 text-xs truncate">ID: {{ memberId }}</p>
                             </div>
-                                                    <div class="ml-auto" v-if="project.owner_id === member.id">
+                            <div class="ml-auto" v-if="project.owner_id === memberId">
                                 <i class="pi pi-crown text-yellow-500" title="Owner"></i>
                             </div>
                         </div>
@@ -70,67 +70,13 @@
                 </div>
             </div>
 
-                                    <!-- Stats/Activity Column -->
+            <!-- Stats/Activity Column (Placeholder) -->
             <div class="lg:col-span-2">
-                                        <div class="glass-panel p-6 rounded-xl h-full flex flex-col">
+                <div class="glass-panel p-6 rounded-xl h-full">
-                                            <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-xl font-bold text-white mb-6">Activity</h2>
-                                                <h2 class="text-xl font-bold text-white">Usage Statistics</h2>
+                    <div class="text-center py-12 text-slate-500">
-                                                <Button icon="pi pi-refresh" text rounded @click="fetchUsage" :loading="loadingUsage" />
-                                            </div>
-                        
-                                            <div v-if="usageReport" class="flex-1 flex flex-col gap-8">
-                                                <!-- Summary Cards -->
-                                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                                                    <div class="p-4 rounded-xl bg-slate-800/40 border border-white/5 text-center">
-                                                        <p class="text-slate-500 text-xs uppercase font-bold tracking-wider mb-1">Total Runs</p>
-                                                        <p class="text-2xl font-bold text-white">{{ usageReport.summary?.total_runs || 0 }}</p>
-                                                    </div>
-                                                    <div class="p-4 rounded-xl bg-slate-800/40 border border-white/5 text-center">
-                                                        <p class="text-slate-500 text-xs uppercase font-bold tracking-wider mb-1">Total Tokens</p>
-                                                        <p class="text-2xl font-bold text-white">{{ (usageReport.summary?.total_tokens || 0).toLocaleString() }}</p>
-                                                    </div>
-                                                    <div class="p-4 rounded-xl bg-violet-500/10 border border-violet-500/20 text-center">
-                                                        <p class="text-violet-400 text-xs uppercase font-bold tracking-wider mb-1">Total Spend</p>
-                                                        <p class="text-2xl font-bold text-violet-300">${{ (usageReport.summary?.total_cost || 0).toFixed(2) }}</p>
-                                                    </div>
-                                                </div>
-                        
-                                                <!-- User Breakdown -->
-                                                <div v-if="usageReport.by_user && usageReport.by_user.length > 0">
-                                                    <h3 class="text-sm font-bold text-slate-400 uppercase tracking-wider mb-4">Usage by Member</h3>
-                                                    <div class="flex flex-col gap-2">
-                                                        <div v-for="item in usageReport.by_user" :key="item.entity_id" 
-                                                            class="flex items-center justify-between p-3 rounded-lg bg-slate-800/20 border border-white/5">
-                                                            <div class="flex items-center gap-3">
-                                                                <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center text-[10px] font-bold">
-                                                                    {{ (getMemberUsername(item.entity_id) || '??').substring(0,2).toUpperCase() }}
-                                                                </div>
-                                                                <div class="flex flex-col">
-                                                                    <span class="text-sm text-slate-300 font-bold truncate max-w-[150px]">{{ getMemberUsername(item.entity_id) || 'Unknown' }}</span>
-                                                                    <span class="text-[9px] text-slate-500 font-mono">{{ item.entity_id }}</span>
-                                                                </div>
-                                                            </div>
-                                                            <div class="flex gap-6 text-right">
-                                                                <div>
-                                                                    <p class="text-[10px] text-slate-500 uppercase font-bold">Runs</p>
-                                                                    <p class="text-sm text-white">{{ item.stats.total_runs }}</p>
-                                                                </div>
-                                                                <div>
-                                                                    <p class="text-[10px] text-slate-500 uppercase font-bold">Cost</p>
-                                                                    <p class="text-sm text-violet-300">${{ item.stats.total_cost.toFixed(2) }}</p>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                        <div v-else-if="loadingUsage" class="flex-1 flex items-center justify-center py-20">
-                             <i class="pi pi-spin pi-spinner text-4xl text-violet-500"></i>
-                        </div>
-
-                        <div v-else class="text-center py-12 text-slate-500 flex-1 flex flex-col justify-center">
                         <i class="pi pi-chart-line text-4xl mb-4 opacity-50"></i>
-                            <p>No usage data available for this project.</p>
+                        <p>No recent activity registered.</p>
                     </div>
                 </div>
             </div>
@@ -143,7 +89,6 @@
             <p class="text-slate-400">Loading project...</p>
         </div>
     </div>
-    </div>
 </template>
 
 <script setup>
@@ -152,7 +97,6 @@ import { useRoute, useRouter } from 'vue-router';
 import { useProjectsStore } from '@/stores/projectsStore';
 import { storeToRefs } from 'pinia';
 import { useAuthStore } from '@/stores/auth';
-import { aiService } from '@/services/aiService';
 import Button from 'primevue/button';
 import InputText from 'primevue/inputtext';
 import ConfirmDialog from 'primevue/confirmdialog';
@@ -169,36 +113,14 @@ const project = computed(() => projectsStore.getProjectById(projectId));
 const isCurrentProject = computed(() => currentProject.value?.id === projectId);
 const isOwner = computed(() => authStore.user && project.value && authStore.user.id === project.value.owner_id);
 
-const getMemberUsername = (memberId) => {
-    if (!project.value || !project.value.members) return null;
-    const member = project.value.members.find(m => m.id === memberId);
-    return member ? member.username : null;
-};
-
 const inviteUsername = ref('');
 const inviting = ref(false);
 
-const usageReport = ref(null);
-const loadingUsage = ref(false);
-
-const fetchUsage = async () => {
-    loadingUsage.value = true;
-    try {
-        // Pass projectId from route params to ensure we get stats for THIS project
-        usageReport.value = await aiService.getUsageReport("user", projectId);
-    } catch (e) {
-        console.error("Failed to fetch usage report", e);
-    } finally {
-        loadingUsage.value = false;
-    }
-};
-
 onMounted(async () => {
     // Ensure projects are loaded
     if (projects.value.length === 0) {
         await projectsStore.fetchProjects();
     }
-    fetchUsage();
 });
 
 const selectProject = () => {
@@ -242,22 +164,3 @@ const confirmDelete = () => {
     });
 }
 </script>
-
-<style scoped>
-.custom-scrollbar::-webkit-scrollbar {
-    width: 6px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 3px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.2);
-}
-</style>

src/views/ProjectsView.vue

@@ -1,6 +1,5 @@
 <template>
-    <div class="h-full overflow-y-auto custom-scrollbar">
+    <div class="container mx-auto p-4 animate-fade-in">
-        <div class="container mx-auto p-4 md:p-8 animate-fade-in">
         <div class="flex justify-between items-center mb-6">
             <div>
                 <h1 class="text-3xl font-bold text-white mb-2">Projects</h1>
@@ -40,16 +39,10 @@
                 </p>
 
                 <div class="flex items-center justify-between mt-4 border-t border-slate-700/50 pt-4">
-                        <div class="flex flex-col">
+                    <div class="flex items-center text-slate-500 text-sm">
-                            <div class="flex items-center text-slate-500 text-sm mb-1">
                         <i class="pi pi-users mr-2"></i>
                         <span>{{ project.members.length }} members</span>
                     </div>
-                            <div v-if="projectUsage[project.id]" class="flex items-center text-violet-400 text-xs font-bold">
-                                <i class="pi pi-bolt mr-2"></i>
-                                <span>${{ projectUsage[project.id].toFixed(2) }} spent</span>
-                            </div>
-                        </div>
 
                     <Button v-if="currentProject?.id !== project.id" icon="pi pi-check" label="Select" size="small"
                         severity="secondary" @click.stop="selectProject(project.id)" />
@@ -76,14 +69,12 @@
             </template>
         </Dialog>
     </div>
-    </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useProjectsStore } from '@/stores/projectsStore';
-import { aiService } from '@/services/aiService';
 import { storeToRefs } from 'pinia';
 import Button from 'primevue/button';
 import Dialog from 'primevue/dialog';
@@ -103,29 +94,8 @@ const newProject = ref({
     description: ''
 });
 
-const projectUsage = ref({});
-
-const fetchUsage = async () => {
-    try {
-        // Fetch usage with project breakdown, pass false to ignore current active project header
-        const report = await aiService.getUsageReport("project", false);
-        if (report && report.by_project) {
-            const usageMap = {};
-            report.by_project.forEach(item => {
-                if (item.entity_id) {
-                    usageMap[item.entity_id] = item.stats.total_cost;
-                }
-            });
-            projectUsage.value = usageMap;
-        }
-    } catch (e) {
-        console.error("Failed to fetch projects usage", e);
-    }
-};
-
 onMounted(() => {
     projectsStore.fetchProjects();
-    fetchUsage();
 });
 
 const createProject = async () => {
@@ -151,22 +121,3 @@ const goToProject = (id) => {
     router.push(`/projects/${id}`);
 };
 </script>
-
-<style scoped>
-.custom-scrollbar::-webkit-scrollbar {
-    width: 6px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 3px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.2);
-}
-</style>

src/views/VideoGenerationView.vue

@@ -0,0 +1,982 @@
+<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>