likes

Reviewed-on: #3

.gitignore

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

deploy.sh

@@ -2,6 +2,7 @@
 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,16 +11,19 @@
         "@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",
@@ -3895,6 +3898,12 @@
         "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",
@@ -4860,6 +4869,18 @@
       "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",
@@ -5473,6 +5494,18 @@
         "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",
@@ -5490,6 +5523,15 @@
         "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",
@@ -6057,6 +6099,12 @@
       "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",
@@ -6243,6 +6291,12 @@
         "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",
@@ -6285,6 +6339,33 @@
         "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",
@@ -6646,6 +6727,12 @@
         "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",
@@ -6780,6 +6867,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
+      "license": "MIT"
+    },
     "node_modules/source-map": {
       "version": "0.8.0-beta.0",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
@@ -6855,6 +6948,21 @@
         "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",
@@ -7457,6 +7565,12 @@
         "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",
@@ -7812,6 +7926,18 @@
       "integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==",
       "license": "MIT"
     },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "license": "MIT",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",

package.json

@@ -12,16 +12,19 @@
     "@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,6 +58,12 @@
   font-weight: normal;
 }
 
+input,
+textarea,
+select {
+  font-size: 16px;
+}
+
 body {
   min-height: 100vh;
   color: var(--color-text);

src/assets/main.css

@@ -218,19 +218,27 @@ 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: 0.8125rem !important;
+  font-size: 1rem !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;
@@ -274,3 +282,59 @@ 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,6 +3,7 @@ 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'
 
 
@@ -13,6 +14,17 @@ 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
@@ -23,6 +35,7 @@ onMounted(async () => {
     if (currentProject.value) {
         selectedProject.value = currentProject.value.id
     }
+    fetchUsage()
 })
 
 // Watch for external changes (like selecting from the list view)
@@ -70,12 +83,13 @@ const isActive = (path) => {
 
 const navItems = computed(() => {
     const items = [
-        { path: '/', icon: '🏠', tooltip: 'Home' },
+        // { path: '/', icon: '🏠', tooltip: 'Home' },
         { path: '/projects', icon: '📂', tooltip: 'Projects' },
-        { path: '/flexible', icon: '🖌️', tooltip: 'Flexible Generation' },
+        { path: '/content-plan', icon: '📅', tooltip: 'Plan' },
-        { path: '/albums', icon: '🖼️', tooltip: 'Library' },
+        { path: '/ideas', icon: '💡', tooltip: 'Ideas' },
-        { path: '/characters', icon: '👥', tooltip: 'Characters' },
+        { path: '/flexible', icon: '🖌️', tooltip: 'Flexible' },
-        { path: '/image-to-prompt', icon: '✨', tooltip: 'Image to Prompt' }
+        // { path: '/albums', icon: '🖼️', tooltip: 'Library' },
+        { path: '/characters', icon: '👥', tooltip: 'Characters' }
     ]
 
     if (authStore.isAdmin()) {
@@ -90,52 +104,48 @@ const navItems = computed(() => {
     <div class="contents">
         <!-- Sidebar (Desktop -> Top Bar) -->
         <nav
-            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">
+            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">
 
             <!-- Logo -->
             <img src="/web-app-manifest-512x512.png" alt="Logo"
-                class="w-10 h-10 rounded-xl shadow-lg shadow-violet-500/20 shrink-0" />
+                class="w-7 h-7 rounded-lg shadow-lg shadow-violet-500/20 shrink-0" />
 
             <!-- Project Switcher -->
-            <div class="hidden lg:block ml-4 relative">
+            <div class="hidden lg:block ml-2 relative">
                 <button @click="isProjectMenuOpen = !isProjectMenuOpen"
-                    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">
+                    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">
-                    <i v-if="selectedProject" class="pi pi-folder text-violet-400"></i>
+                    <i v-if="selectedProject" class="pi pi-folder text-violet-400 text-[10px]"></i>
-                    <i v-else class="pi pi-user"></i>
+                    <i v-else class="pi pi-user text-[10px]"></i>
 
-                    <span class="max-w-[150px] truncate font-medium">
+                    <span class="max-w-[120px] truncate font-medium">
-                        {{ selectedProject ? getProjectName(selectedProject) : 'Personal Workspace' }}
+                        {{ selectedProject ? getProjectName(selectedProject) : 'Personal' }}
                     </span>
 
-                    <i class="pi pi-chevron-down text-xs ml-1 opacity-50"></i>
+                    <i class="pi pi-chevron-down text-[8px] opacity-50"></i>
                 </button>
 
                 <!-- Custom Dropdown Menu -->
                 <div v-if="isProjectMenuOpen"
-                    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">
+                    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">
 
                     <!-- Personal Workspace Option -->
                     <div @click="selectProject(null)"
-                        class="flex items-center gap-3 px-4 py-3 hover:bg-white/5 cursor-pointer transition-colors"
+                        class="flex items-center gap-2 px-3 py-2 hover:bg-white/5 cursor-pointer transition-colors text-xs"
                         :class="{ 'text-violet-400 bg-white/5': !selectedProject, 'text-slate-300': selectedProject }">
-                        <i class="pi pi-user"></i>
+                        <i class="pi pi-user text-[10px]"></i>
                         <span class="font-medium">Personal Workspace</span>
-                        <i v-if="!selectedProject" class="pi pi-check ml-auto text-sm"></i>
+                        <i v-if="!selectedProject" class="pi pi-check ml-auto text-[10px]"></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-3 px-4 py-3 hover:bg-white/5 cursor-pointer transition-colors"
+                        class="flex items-center gap-2 px-3 py-2 hover:bg-white/5 cursor-pointer transition-colors text-xs"
                         :class="{ 'text-violet-400 bg-white/5': selectedProject === project.id, 'text-slate-300': selectedProject !== project.id }">
-                        <i class="pi pi-folder"></i>
+                        <i class="pi pi-folder text-[10px]"></i>
                         <span class="truncate">{{ project.name }}</span>
-                        <i v-if="selectedProject === project.id" class="pi pi-check ml-auto text-sm"></i>
+                        <i v-if="selectedProject === project.id" class="pi pi-check ml-auto text-[10px]"></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>
 
@@ -145,27 +155,33 @@ const navItems = computed(() => {
             </div>
 
             <!-- Nav Items -->
-            <div class="flex flex-row gap-2 items-center justify-center flex-1 mx-8">
+            <div class="flex flex-row gap-1 items-center justify-center flex-1 mx-4">
                 <div v-for="item in navItems" :key="item.path" :class="[
-                    'px-4 py-2 flex items-center gap-2 rounded-xl cursor-pointer transition-all duration-300',
+                    'px-3 py-1 flex items-center gap-1.5 rounded-lg 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-xl">{{ item.icon }}</span>
+                    <span class="text-base">{{ item.icon }}</span>
-                    <span class="text-sm font-medium hidden lg:block">{{ item.tooltip }}</span>
+                    <span class="text-[11px] font-medium hidden lg:block">{{ item.tooltip }}</span>
                 </div>
             </div>
 
             <!-- Right Actions -->
-            <div class="flex items-center gap-4 shrink-0">
+            <div class="flex items-center gap-3 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-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"
+                    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"
                     v-tooltip.bottom="'Logout'">
-                    <i class="pi pi-power-off"></i>
+                    <i class="pi pi-power-off text-xs"></i>
                 </div>
                 <!-- Profile Avatar Placeholder -->
-                <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"
+                <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"
                     title="Profile">
                     U
                 </div>
@@ -174,14 +190,14 @@ const navItems = computed(() => {
 
         <!-- Mobile Bottom Nav -->
         <nav
-            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">
+            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">
             <div v-for="item in navItems" :key="item.path" :class="[
-                'flex flex-col items-center gap-1 p-2 rounded-xl transition-all',
+                'flex flex-col items-center p-1.5 rounded-lg transition-all',
                 isActive(item.path)
-                    ? 'text-white bg-white/10 relative top-[-10px] shadow-lg shadow-violet-500/20 border border-violet-500/30'
+                    ? 'text-white bg-white/10 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-xl">{{ item.icon }}</span>
+                <span class="text-lg">{{ item.icon }}</span>
             </div>
         </nav>
     </div>

src/components/GenerationImage.vue

@@ -0,0 +1,181 @@
+<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'])
+
+const isTemporarilyUnblurred = ref(false)
+
+const isBlurred = computed(() => {
+    return 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) {
+            // If blurred, click might just unblur or do nothing? 
+            // Let's let the button handle unblur, and click opens preview if unblurred?
+            // Or maybe click unblurs? Let's stick to button for unblur to be explicit.
+            // But if user clicks image, maybe show preview anyway? 
+            // Usually blurred images shouldn't be previewed full size unless unblurred.
+            // Let's allow preview, but maybe preview also needs to handle blur? 
+            // For now, let's just open preview. The preview modal might need its own blur logic or just show it.
+            // Let's assume preview shows it.
+             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="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

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

@@ -57,11 +57,26 @@ const router = createRouter({
       name: 'flexible',
       component: () => import('../views/FlexibleGenerationView.vue')
     },
+    {
+      path: '/content-plan',
+      name: 'content-plan',
+      component: () => import('../views/ContentPlanView.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,9 +52,10 @@ export const aiService = {
   },
 
   // Get generations history
-  async getGenerations(limit, offset, characterId) {
+  async getGenerations(limit, offset, characterId, onlyLiked = false) {
     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
   },
@@ -66,5 +67,22 @@ export const aiService = {
       linked_assets: linkedAssets
     })
     return response.data
+  },
+
+  // Get usage statistics (runs, tokens, cost)
+  async getUsageReport(breakdown = null, projectId = null) {
+    const params = {}
+    if (breakdown) params.breakdown = breakdown
+    
+    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,6 +13,25 @@ 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.
@@ -35,12 +54,14 @@ export const dataService = {
         return response.data
     },
 
-    getAssetsByCharacterId: async (charId, limit, offset) => {
+    getAssetsByCharacterId: async (charId, limit, offset, type) => {
-        const response = await api.get(`/characters/${charId}/assets`, { params: { limit, offset } })
+        const 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) => {
+    uploadAsset: async (file, linkedCharId, onProgress) => {
         const formData = new FormData()
         formData.append('file', file)
         if (linkedCharId) formData.append('linked_char_id', linkedCharId)
@@ -48,6 +69,12 @@ 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
@@ -58,11 +85,38 @@ 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

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

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

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

@@ -0,0 +1,265 @@
+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,9 +9,11 @@ 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()
@@ -21,6 +23,32 @@ 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([])
@@ -129,6 +157,13 @@ 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>
@@ -183,9 +218,17 @@ const removeGeneration = (gen) => {
                 <div v-for="gen in generations" :key="gen.id"
                     class="glass-panel rounded-xl overflow-hidden group relative transition-all hover:bg-white/5">
 
-                    <div class="aspect-[2/3] w-full bg-slate-800 relative overflow-hidden">
+                    <div class="aspect-[2/3] w-full bg-slate-800 relative overflow-hidden cursor-pointer"
-                        <Image :src="gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true'"
+                        @click="gen.result_list && gen.result_list.length > 0 ? openImagePreview(gen) : null">
-                            preview class="w-full h-full object-cover" imageClass="w-full h-full object-cover" />
+                        <img v-if="gen.result_list && gen.result_list.length > 0"
+                            :src="gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true'"
+                            class="w-full h-full object-cover" />
+
+                        <!-- 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
@@ -230,7 +273,7 @@ const removeGeneration = (gen) => {
                         :class="selectedGenerations.some(g => g.id === gen.id) ? 'border-violet-500 ring-2 ring-violet-500/30' : 'border-transparent hover:border-white/20'">
 
                         <img v-if="gen.result_list && gen.result_list.length > 0"
-                            :src="gen.result_list[0].includes('http') ? gen.result_list[0] : (gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true')"
+                            :src="gen.result_list[0].includes('http') ? gen.result_list[0] : (gen.result || API_URL + `/assets/${gen.result_list[0]}`)"
                             class="w-full h-full object-cover" />
                         <!-- Fallback for no result -->
                         <div v-else class="w-full h-full bg-slate-800 flex items-center justify-center text-slate-500">
@@ -263,6 +306,15 @@ const removeGeneration = (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,6 +17,8 @@ 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()
@@ -26,6 +28,28 @@ 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)
@@ -34,7 +58,6 @@ 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)
@@ -69,8 +92,9 @@ const handleFileUpload = async (event: Event) => {
 }
 
 const openModal = (asset: Asset) => {
-    selectedAsset.value = asset
+    const idx = assets.value.findIndex(a => a.id === asset.id)
-    isModalVisible.value = true
+    previewIndex.value = idx >= 0 ? idx : 0
+    isImagePreviewVisible.value = true
 }
 
 const loadAssets = async () => {
@@ -245,6 +269,12 @@ 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">
@@ -368,17 +398,13 @@ const formatDate = (dateString: string) => {
             </div>
         </div>
 
-        <Dialog v-model:visible="isModalVisible" modal dismissableMask header="Asset View"
+        <GenerationPreviewModal 
-            :style="{ width: '90vw', maxWidth: '800px' }" class="glass-panel rounded-2xl">
+            v-model:visible="isImagePreviewVisible"
-            <div v-if="selectedAsset" class="flex flex-col items-center">
+            :preview-images="previewImages"
-                <img :src="selectedAsset.link ? API_URL + selectedAsset.link : (selectedAsset.url ? API_URL + selectedAsset.url : 'https://via.placeholder.com/800')"
+            :initial-index="previewIndex"
-                    :alt="selectedAsset.name" class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
+            :api-url="API_URL"
-                <div class="mt-6 text-center">
+            @liked="handleLiked"
-                    <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

@@ -0,0 +1,955 @@
+<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/FlexibleGenerationView.vue

@@ -1,29 +1,145 @@
 <script setup>
-import { ref, onMounted, watch, computed } from 'vue'
+import {computed, onBeforeUnmount, onMounted, ref, watch} from 'vue'
-import { useRouter } from 'vue-router'
+import {useRouter} from 'vue-router'
-import { dataService } from '../services/dataService'
+import {dataService} from '../services/dataService'
-import { aiService } from '../services/aiService'
+import {aiService} from '../services/aiService'
+import {postService} from '../services/postService'
 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 MultiSelect from 'primevue/multiselect'
+import DatePicker from 'primevue/datepicker'
-import ProgressSpinner from 'primevue/progressspinner'
+import Tag from 'primevue/tag'
-import ProgressBar from 'primevue/progressbar'
+import InputSwitch from 'primevue/inputswitch'
-import Message from 'primevue/message'
 
 import Skeleton from 'primevue/skeleton'
-import { useAlbumStore } from '../stores/albums'
+import {useAlbumStore} from '../stores/albums'
+import {useToast} from 'primevue/usetoast'
+import Toast from 'primevue/toast'
+import GenerationPreviewModal from '../components/GenerationPreviewModal.vue'
+import GenerationImage from '../components/GenerationImage.vue'
 
 const router = useRouter()
 const API_URL = import.meta.env.VITE_API_URL
 const albumStore = useAlbumStore()
+const toast = useToast()
+
+// --- Multi-Select ---
+const isSelectMode = ref(false)
+const selectedAssetIds = ref(new Set())
+const isDownloading = ref(false)
+
+const toggleSelectMode = () => {
+    isSelectMode.value = !isSelectMode.value
+    if (!isSelectMode.value) selectedAssetIds.value = new Set()
+}
+
+const toggleImageSelection = (assetId) => {
+    const s = new Set(selectedAssetIds.value)
+    if (s.has(assetId)) s.delete(assetId)
+    else s.add(assetId)
+    selectedAssetIds.value = s
+}
+
+const selectAllImages = () => {
+    const s = new Set()
+    for (const gen of historyGenerations.value) {
+        if (gen.result_list) {
+            for (const id of gen.result_list) s.add(id)
+        }
+    }
+    selectedAssetIds.value = s
+}
+
+const downloadSelected = async () => {
+    const ids = [...selectedAssetIds.value]
+    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
+
+        const files = []
+        for (const assetId of ids) {
+            const url = API_URL + '/assets/' + assetId
+            const resp = await fetch(url, { headers })
+            const blob = await resp.blob()
+            files.push(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 })) {
+            await navigator.share({ files })
+        } else {
+            for (let i = 0; i < files.length; i++) {
+                const file = files[i]
+                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)
+                if (i < files.length - 1) await new Promise(r => setTimeout(r, 300))
+            }
+        }
+        toast.add({ severity: 'success', summary: `Скачано ${ids.length} файлов`, life: 2000 })
+    } catch (e) {
+        console.error('Download failed', e)
+        toast.add({ severity: 'error', summary: 'Ошибка скачивания', life: 3000 })
+    } finally {
+        isDownloading.value = false
+    }
+}
+
+// --- Add to Content Plan ---
+const showAddToPlanDialog = ref(false)
+const planPostDate = ref(new Date())
+const planPostTopic = ref('')
+const isSavingToPlan = ref(false)
+
+const openAddToPlan = () => {
+    planPostDate.value = new Date()
+    planPostTopic.value = ''
+    showAddToPlanDialog.value = true
+}
+
+const confirmAddToPlan = async () => {
+    if (!planPostTopic.value.trim()) {
+        toast.add({ severity: 'warn', summary: 'Укажите тему', life: 2000 })
+        return
+    }
+    isSavingToPlan.value = true
+    try {
+        const d = new Date(planPostDate.value); d.setHours(12, 0, 0, 0)
+        await postService.createPost({
+            date: d.toISOString(),
+            topic: planPostTopic.value,
+            generation_ids: [...selectedAssetIds.value]
+        })
+        toast.add({ severity: 'success', summary: 'Добавлено в контент-план', life: 2000 })
+        showAddToPlanDialog.value = false
+        isSelectMode.value = false
+        selectedAssetIds.value = new Set()
+    } catch (e) {
+        console.error('Add to plan failed', e)
+        toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Не удалось добавить', life: 3000 })
+    } finally {
+        isSavingToPlan.value = false
+    }
+}
 
 // --- State ---
 const prompt = ref('')
 const selectedCharacter = ref(null)
+const environments = ref([])
+const selectedEnvironment = ref(null)
 const selectedAssets = ref([])
 // Album Picker State
 const isAlbumPickerVisible = ref(false)
@@ -36,13 +152,47 @@ const modalAssets = ref([])
 const isModalLoading = ref(false)
 const tempSelectedAssets = ref([])
 const quality = ref({ key: 'TWOK', value: '2K' })
-const aspectRatio = ref({ key: "NINESIXTEEN", value: "9:16" })
+const aspectRatio = ref('NINESIXTEEN') // Default to Video (9:16)
+const generationCount = ref(1)
 const sendToTelegram = ref(false)
 const telegramId = ref('')
 const isTelegramIdSaved = ref(false)
 const useProfileImage = ref(true)
+const useEnvironment = ref(false)
 const isImprovingPrompt = ref(false)
 const previousPrompt = ref('')
+let _savedEnvironmentId = null
+
+// NSFW Toggle
+const showNsfwGlobal = ref(false)
+
+watch(showNsfwGlobal, (val) => {
+    localStorage.setItem('show_nsfw_global', val)
+})
+
+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 characters = ref([])
 const allAssets = ref([])
@@ -51,9 +201,16 @@ const historyTotal = ref(0)
 const historyRows = ref(50)
 const historyFirst = ref(0)
 
-const isSettingsVisible = ref(false)
+const isSettingsVisible = ref(localStorage.getItem('flexible_gen_settings_visible') !== 'false')
 const isSubmitting = ref(false)
+
+watch(isSettingsVisible, (val) => {
+    localStorage.setItem('flexible_gen_settings_visible', val)
+})
+
 const activeOverlayId = ref(null) // For mobile tap-to-show overlay
+const filterCharacter = ref(null) // Character filter for gallery
+const onlyLiked = ref(false)
 
 // Options
 const qualityOptions = ref([
@@ -61,12 +218,6 @@ const qualityOptions = ref([
     { key: 'TWOK', value: '2K' },
     { key: 'FOURK', value: '4K' }
 ])
-const aspectRatioOptions = ref([
-    { key: "NINESIXTEEN", value: "9:16" },
-    { key: "FOURTHREE", value: "4:3" },
-    { key: "THREEFOUR", value: "3:4" },
-    { key: "SIXTEENNINE", value: "16:9" }
-])
 
 // --- Persistence ---
 const STORAGE_KEY = 'flexible_gen_settings'
@@ -74,13 +225,16 @@ const STORAGE_KEY = 'flexible_gen_settings'
 const saveSettings = () => {
     const settings = {
         prompt: prompt.value,
-        selectedCharacterId: selectedCharacter.value?.id,
+        selectedCharacterId: selectedCharacter.value?.id || selectedCharacter.value?._id,
+        selectedEnvironmentId: selectedEnvironment.value?.id || selectedEnvironment.value?._id,
         selectedAssetIds: selectedAssets.value.map(a => a.id),
         quality: quality.value,
         aspectRatio: aspectRatio.value,
         sendToTelegram: sendToTelegram.value,
         telegramId: telegramId.value,
-        useProfileImage: useProfileImage.value
+        useProfileImage: useProfileImage.value,
+        useEnvironment: useEnvironment.value,
+        generationCount: generationCount.value
     }
     localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
 
@@ -101,11 +255,21 @@ const restoreSettings = () => {
             // We need characters and assets loaded to fully restore objects
             // For now, we'll store IDs and restore in loadData
             if (settings.quality) quality.value = settings.quality
-            if (settings.aspectRatio) aspectRatio.value = settings.aspectRatio
+            if (settings.aspectRatio) {
+                // Handle legacy object format if present
+                if (typeof settings.aspectRatio === 'object' && settings.aspectRatio.key) {
+                    aspectRatio.value = settings.aspectRatio.key
+                } else {
+                    aspectRatio.value = settings.aspectRatio
+                }
+            }
             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
+            if (settings.useEnvironment !== undefined) useEnvironment.value = settings.useEnvironment
+            if (settings.generationCount) generationCount.value = Math.min(settings.generationCount, 4)
+            if (settings.selectedEnvironmentId) _savedEnvironmentId = settings.selectedEnvironmentId
 
             return settings // Return to use in loadData
         } catch (e) {
@@ -116,10 +280,25 @@ const restoreSettings = () => {
 }
 
 // Watchers for auto-save
-watch([prompt, selectedCharacter, selectedAssets, quality, aspectRatio, sendToTelegram, telegramId, useProfileImage], () => {
+watch([prompt, selectedCharacter, selectedEnvironment, selectedAssets, quality, aspectRatio, sendToTelegram, telegramId, useProfileImage, useEnvironment, generationCount], () => {
     saveSettings()
 }, { deep: true })
 
+// Watcher for character filter — reload history when filter changes
+watch(filterCharacter, async () => {
+    historyGenerations.value = []
+    historyTotal.value = 0
+    historyFirst.value = 0
+    await refreshHistory()
+})
+
+watch(onlyLiked, async () => {
+    historyGenerations.value = []
+    historyTotal.value = 0
+    historyFirst.value = 0
+    await refreshHistory()
+})
+
 
 // --- Data Loading ---
 const loadData = async () => {
@@ -127,7 +306,7 @@ const loadData = async () => {
         const [charsRes, assetsRes, historyRes] = await Promise.all([
             dataService.getCharacters(), // Assuming this exists and returns list
             dataService.getAssets(100, 0, 'all'), // Load a batch of assets
-            aiService.getGenerations(historyRows.value, historyFirst.value)
+            aiService.getGenerations(historyRows.value, historyFirst.value, filterCharacter.value?.id || filterCharacter.value?._id)
         ])
 
         // Characters
@@ -179,7 +358,7 @@ const loadData = async () => {
         const savedSettings = restoreSettings()
         if (savedSettings) {
             if (savedSettings.selectedCharacterId) {
-                selectedCharacter.value = characters.value.find(c => c.id === savedSettings.selectedCharacterId) || null
+                selectedCharacter.value = characters.value.find(c => (c.id === savedSettings.selectedCharacterId || c._id === savedSettings.selectedCharacterId)) || null
             }
             if (savedSettings.selectedAssetIds && savedSettings.selectedAssetIds.length > 0) {
                 // Determine which assets to select. 
@@ -197,7 +376,7 @@ const loadData = async () => {
 
 const refreshHistory = async () => {
     try {
-        const response = await aiService.getGenerations(historyRows.value, 0)
+        const response = await aiService.getGenerations(historyRows.value, 0, filterCharacter.value?.id || filterCharacter.value?._id, onlyLiked.value)
         if (response && response.generations) {
             // Update existing items and add new ones at the top
             const newGenerations = []
@@ -245,44 +424,50 @@ const handleGenerate = async () => {
 
     try {
         const payload = {
-            aspect_ratio: aspectRatio.value.key,
+            aspect_ratio: aspectRatio.value, // Now a string
             quality: quality.value.key,
             prompt: prompt.value,
             assets_list: selectedAssets.value.map(a => a.id),
-            linked_character_id: selectedCharacter.value?.id || null,
+            linked_character_id: selectedCharacter.value?.id || selectedCharacter.value?._id || null,
+            environment_id: (selectedCharacter.value && useEnvironment.value) ? (selectedEnvironment.value?.id || selectedEnvironment.value?._id || null) : null,
             telegram_id: sendToTelegram.value ? telegramId.value : null,
-            use_profile_image: selectedCharacter.value ? useProfileImage.value : false
+            use_profile_image: selectedCharacter.value ? useProfileImage.value : false,
+            count: generationCount.value
         }
 
         const response = await aiService.runGeneration(payload)
 
-        if (response && response.id) {
+        // Response can be a single generation, an array, or a Group response with 'generations'
-            // Create optimistic generation items
+        let generations = []
-            // If response is the full generation object, use it. 
+        if (response && response.generations) {
-            // If it's just { id: '...' }, create a placeholder.
+            generations = response.generations
-            // aiService.runGeneration returns response.data. 
+        } else if (Array.isArray(response)) {
-
+            generations = response
-            const newGen = {
+        } else {
-                id: response.id,
+            generations = [response]
-                prompt: prompt.value,
+        }
-                status: 'starting',
+
-                created_at: new Date().toISOString(),
+        for (const gen of generations) {
-                // Add other fields as necessary for display
+            if (gen && gen.id) {
+                const newGen = {
+                    id: gen.id,
+                    prompt: prompt.value,
+                    status: gen.status || 'starting',
+                    created_at: new Date().toISOString(),
+                    generation_group_id: gen.generation_group_id || null,
                 }
 
-            // Add to history immediately
                 historyGenerations.value.unshift(newGen)
                 historyTotal.value++
 
-            // Start polling
+                pollGeneration(gen.id)
-            pollGeneration(response.id)
-
-            // Clear prompt if desired, or keep for reuse
-            // prompt.value = '' 
             }
+        }
+
+        // Refresh history after a short delay to get full generation data from server
+        setTimeout(() => refreshHistory(), 2000)
     } catch (e) {
         console.error('Generation failed', e)
-        // Ideally show a toast error here
         alert(e.message || 'Generation failed to start')
     } finally {
         isSubmitting.value = false
@@ -352,7 +537,7 @@ const loadMoreHistory = async () => {
 
     try {
         const nextOffset = historyGenerations.value.length
-        const response = await aiService.getGenerations(historyRows.value, nextOffset)
+        const response = await aiService.getGenerations(historyRows.value, nextOffset, filterCharacter.value?.id, onlyLiked.value)
 
         if (response && response.generations) {
             const newGenerations = response.generations.filter(gen =>
@@ -370,21 +555,93 @@ const loadMoreHistory = async () => {
 
 // --- Initial Load ---
 onMounted(() => {
+    // Reset NSFW on page load
+    showNsfwGlobal.value = false
+    localStorage.removeItem('show_nsfw_global')
+    
     loadData().then(() => {
         // slight delay to allow DOM render
         setTimeout(setupInfiniteScroll, 500)
     })
-    isSettingsVisible.value = true
 })
 
 // --- Sidebar Logic (Duplicated for now) ---
 // handleLogout removed - handled in AppSidebar
 
-// Image Preview
+// Image Preview with navigation
 const isImagePreviewVisible = ref(false)
 const previewImage = ref(null)
+const previewIndex = ref(0)
+
+// Grouped history: merge generations with the same generation_group_id into a single gallery item
+const groupedHistoryGenerations = computed(() => {
+    const groups = new Map()
+    const result = []
+    for (const gen of historyGenerations.value) {
+        if (gen.generation_group_id) {
+            if (groups.has(gen.generation_group_id)) {
+                groups.get(gen.generation_group_id).children.push(gen)
+            } else {
+                const group = {
+                    id: gen.generation_group_id,
+                    generation_group_id: gen.generation_group_id,
+                    prompt: gen.prompt,
+                    created_at: gen.created_at,
+                    isGroup: true,
+                    children: [gen],
+                }
+                groups.set(gen.generation_group_id, group)
+                result.push(group)
+            }
+        } else {
+            result.push(gen)
+        }
+    }
+    return result
+})
+
+// Collect all preview-able images from history
+const allPreviewImages = computed(() => {
+    const images = []
+    for (const gen of historyGenerations.value) {
+        if (gen.result_list && gen.result_list.length > 0) {
+            for (const assetId of gen.result_list) {
+                images.push({
+                    url: API_URL + '/assets/' + assetId,
+                    assetId: assetId,
+                    is_liked: gen.liked_assets?.includes(assetId),
+                    genId: gen.id,
+                    prompt: gen.prompt,
+                    gen: gen
+                })
+            }
+        }
+    }
+    return images
+})
+
+const handleLiked = ({ id, is_liked }) => {
+    // Update local state in history
+    historyGenerations.value.forEach(gen => {
+        if (gen.id === id) {
+            gen.is_liked = is_liked
+        }
+    })
+}
+
+const toggleLike = async (gen) => {
+    if (!gen || !gen.id) return
+    try {
+        const response = await dataService.toggleLike(gen.id)
+        handleLiked({ id: gen.id, is_liked: response.is_liked })
+    } catch (e) {
+        console.error('Failed to toggle like', e)
+    }
+}
+
 const openImagePreview = (url) => {
-    previewImage.value = { url }
+    const idx = allPreviewImages.value.findIndex(img => img.url === url)
+    previewIndex.value = idx >= 0 ? idx : 0
     isImagePreviewVisible.value = true
 }
 
@@ -456,6 +713,15 @@ const clearPrompt = () => {
     previousPrompt.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)
+    }
+}
+
 const deleteGeneration = async (gen) => {
     if (!gen) return
     try {
@@ -593,19 +859,62 @@ const confirmAddToAlbum = async () => {
     <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">
+                class="p-2 px-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">
+                <div class="flex  flex-row !items-center !justify-items-center !justify-center gap-2">
                     <h1
-                        class="text-xl font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent m-0">
+                        class="text-base font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent !m-0">
                         Gallery</h1>
 
-                    <span class="text-xs text-slate-500 border-l border-white/10 pl-3">History</span>
+                    <span class="text-[10px] text-slate-500 border-l border-white/10 pl-2">History</span>
                 </div>
-                <div class="flex items-center gap-2">
+                <div class="flex items-center gap-1.5">
+                    <Dropdown v-model="filterCharacter" :options="characters" optionLabel="name"
+                        placeholder="All Characters" showClear
+                        class="!w-40 !bg-slate-800/60 !border-white/10 !text-white !rounded-lg !text-[8px]" :pt="{
+                            root: { class: '!bg-slate-800/60 !h-7' },
+                            input: { class: '!text-white !text-[8px] !py-0.5 !px-2' },
+                            trigger: { class: '!text-slate-400 !w-5' },
+                            panel: { class: '!bg-slate-800 !border-white/10' },
+                            item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white !text-[8px] !py-1' },
+                            clearIcon: { class: '!text-slate-400 hover:!text-white !text-[8px]' }
+                        }">
+                        <template #value="slotProps">
+                            <div class="flex flex-row">
+                            <div v-if="slotProps.value" class="flex items-center gap-1">
+                                <img v-if="slotProps.value.avatar_image" :src="API_URL + slotProps.value.avatar_image"
+                                    class="w-4 h-4 rounded-full object-cover" />
+                                <span class="text-[12px] ">{{ slotProps.value.name }}</span>
+                            </div>
+                            <span v-else class="text-slate-400 text-[12px] items-center">{{ slotProps.placeholder }}</span>
+                            </div>
+                        </template>
+                        <template #option="slotProps">
+                            <div class="flex items-center gap-1.5">
+                                <img v-if="slotProps.option.avatar_image" :src="API_URL + slotProps.option.avatar_image"
+                                    class="w-5 h-5 rounded-full object-cover" />
+                                <span class="">{{ slotProps.option.name }}</span>
+                            </div>
+                        </template>
+                    </Dropdown>
+                    <Button :icon="onlyLiked ? 'pi pi-heart-fill' : 'pi pi-heart'" 
+                        @click="onlyLiked = !onlyLiked" rounded text 
+                        class="!w-7 !h-7 !p-0"
+                        :class="onlyLiked ? '!text-pink-500 !bg-pink-500/10' : '!text-slate-400 hover:!bg-white/10'"
+                        v-tooltip.bottom="onlyLiked ? 'Show all' : 'Show liked only'" />
+                    
+                    <Button :icon="showNsfwGlobal ? 'pi pi-eye' : 'pi pi-eye-slash'" 
+                        @click="showNsfwGlobal = !showNsfwGlobal" rounded text 
+                        class="!w-7 !h-7 !p-0"
+                        :class="showNsfwGlobal ? '!text-red-400 !bg-red-500/10' : '!text-slate-400 hover:!bg-white/10'"
+                        v-tooltip.bottom="showNsfwGlobal ? 'Hide NSFW' : 'Show NSFW'" />
+
                     <Button icon="pi pi-refresh" @click="refreshHistory" rounded text
-                        class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8 md:hidden" />
+                        class="!text-slate-400 hover:!bg-white/10 !w-7 !h-7 !p-0 md:hidden" />
+                    <Button :icon="isSelectMode ? 'pi pi-times' : 'pi pi-check-square'" @click="toggleSelectMode"
+                        rounded text class="!w-7 !h-7 !p-0"
+                        :class="isSelectMode ? '!text-violet-400 !bg-violet-500/20' : '!text-slate-400 hover:!bg-white/10'" />
                     <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" />
+                        class="!text-slate-400 hover:!bg-white/10 !w-7 !h-7 !p-0" v-if="!isSettingsVisible" />
                 </div>
             </header>
 
@@ -613,97 +922,65 @@ const confirmAddToAlbum = async () => {
                 :class="{ 'pb-[300px]': isSettingsVisible, 'pb-32': !isSettingsVisible }">
                 <div v-if="historyGenerations.length > 0"
                     class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 gap-2 md:gap-1">
-                    <div v-for="gen in historyGenerations" :key="gen.id"
+                    <div v-for="item in groupedHistoryGenerations" :key="item.id"
-                        class="aspect-[9/16] relative group overflow-hidden bg-slate-800 transition-all duration-300"
+                        class="aspect-[9/16] relative overflow-hidden bg-slate-800 transition-all duration-300">
-                        @click="toggleMobileOverlay(gen.id)">
 
-                        <img v-if="gen.result_list && gen.result_list.length > 0"
+                        <!-- ============================================ -->
-                            :src="API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'"
+                        <!-- GROUPED GENERATION (multiple in one slot)    -->
-                            class="w-full h-full object-cover cursor-pointer"
+                        <!-- ============================================ -->
-                            @click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
+                        <template v-if="item.isGroup">
-
+                            <!-- Group badge -->
-                        <div v-else-if="gen.status === 'failed'"
+                            <div v-if="!isSelectMode"
-                            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">
+                                class="absolute top-1.5 left-1.5 z-20 bg-violet-600/80 backdrop-blur-sm text-white text-[9px] font-bold px-1.5 py-0.5 rounded-md pointer-events-none">
-                            <i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
+                                {{ item.children.length }}x
-                            <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)"
+                            <div class="w-full h-full grid gap-0.5"
-                            class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50 border border-violet-500/20 group">
+                                :class="item.children.length <= 2 ? 'grid-cols-1' : 'grid-cols-2'">
-                            <!-- Shimmer Background -->
+                                <div v-for="child in item.children" :key="child.id"
-                            <div
+                                    class="relative group overflow-hidden">
-                                class="absolute inset-0 bg-gradient-to-tr from-violet-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
-                            </div>
                                     
-                            <!-- Moving Highlight -->
+                                    <GenerationImage 
-                            <div
+                                        :generation="child"
-                                class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
+                                        :api-url="API_URL"
+                                        :is-select-mode="isSelectMode"
+                                        :is-selected="selectedAssetIds.has(child.result_list?.[0])"
+                                        :show-nsfw-global="showNsfwGlobal"
+                                        :active-overlay-id="activeOverlayId"
+                                        @toggle-select="toggleImageSelection"
+                                        @open-preview="openImagePreview"
+                                        @toggle-like="toggleLike"
+                                        @delete="deleteGeneration"
+                                        @reuse-prompt="reusePrompt"
+                                        @reuse-asset="reuseAsset"
+                                        @use-result="useResultAsAsset"
+                                        @toggle-overlay="toggleMobileOverlay"
+                                    />
                                 </div>
+                            </div>
+                        </template>
 
-                            <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">{{ gen.status
+                        <!-- SINGLE GENERATION (full slot)                -->
-                            }}...</span>
+                        <!-- ============================================ -->
-                            <span v-if="gen.progress"
+                        <template v-else>
-                                class="text-[9px] text-violet-400/60 font-mono mt-1 relative z-10">{{
+                            <GenerationImage 
-                                    gen.progress }}%</span>
+                                :generation="item"
-                        </div>
+                                :api-url="API_URL"
-
+                                :is-select-mode="isSelectMode"
-                        <div v-else class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
+                                :is-selected="selectedAssetIds.has(item.result_list?.[0])"
-                            <i class="pi pi-image text-4xl opacity-20"></i>
+                                :show-nsfw-global="showNsfwGlobal"
-                        </div>
+                                :active-overlay-id="activeOverlayId"
-
+                                @toggle-select="toggleImageSelection"
-                        <div class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2"
+                                @open-preview="openImagePreview"
-                            :class="{ 'opacity-0 group-hover:opacity-100': activeOverlayId !== gen.id, 'opacity-100': activeOverlayId === gen.id }">
+                                @toggle-like="toggleLike"
-
+                                @delete="deleteGeneration"
-                            <div
+                                @reuse-prompt="reusePrompt"
-                                class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
+                                @reuse-asset="reuseAsset"
-                                <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
+                                @use-result="useResultAsAsset"
-                                    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"
+                                @toggle-overlay="toggleMobileOverlay"
-                                    @click.stop="deleteGeneration(gen)" />
+                            />
-
+                        </template>
-                                <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 v-if="gen.result_list && gen.result_list.length > 0" icon="pi pi-pencil"
-                                        v-tooltip.left="'Edit (Use Result)'"
-                                        class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
-                                        @click.stop="useResultAsAsset(gen)" />
-                                    <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 View 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-eye" rounded text
-                                    class="!bg-black/50 !text-white !w-12 !h-12 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border-2 !border-white/20"
-                                    @click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
-                            </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)" />
-                                    <Button icon="pi pi-images" v-tooltip.bottom="'Reuse Assets'"
-                                        class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
-                                        @click.stop="reuseAsset(gen)" />
-                                </div>
-                                <p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ gen.prompt }}</p>
-                            </div>
-                        </div>
                     </div>
                 </div>
 
@@ -723,7 +1000,7 @@ const confirmAddToAlbum = async () => {
                 </div>
             </div>
 
-            <div v-if="isSettingsVisible"
+            <div v-if="isSettingsVisible && !isSelectMode"
                 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">
@@ -743,17 +1020,20 @@ const confirmAddToAlbum = async () => {
                                         :disabled="!prompt || prompt.length <= 10"
                                         class="!py-0.5 !px-2 !text-[10px] !h-6 !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"
+                                        class="!py-0.5 !px-2 !text-[10px] !h-6 !bg-slate-800 hover:!bg-slate-700 !border-white/10 !text-slate-400"
+                                        @click="pastePrompt" />
                                     <Button icon="pi pi-times" label="Clear"
                                         class="!py-0.5 !px-2 !text-[10px] !h-6 !bg-slate-800 hover:!bg-slate-700 !border-white/10 !text-slate-400"
                                         @click="clearPrompt" />
                                 </div>
                             </div>
-                            <Textarea v-model="prompt" rows="3" autoResize
+                            <Textarea v-model="prompt" rows="2" placeholder="Describe what you want to create..."
-                                placeholder="Describe what you want to create..."
+                                class="w-full bg-slate-800 !h-28 !text-[16px] border-white/10 text-white rounded-xl p-3 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" />
-                                class="w-full bg-slate-800 border-white/10 text-white rounded-xl p-3 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" />
 
                         </div>
 
+                        <!-- Character & Assets Row -->
                         <div class="flex flex-col md:flex-row gap-4">
                             <div class="flex-1 flex flex-col gap-2">
                                 <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Character
@@ -787,11 +1067,28 @@ const confirmAddToAlbum = async () => {
                                 </Dropdown>
 
                                 <div v-if="selectedCharacter"
-                                    class="flex items-center gap-2 mt-2 px-1 animate-in fade-in slide-in-from-top-1">
+                                    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">
-                                    <Checkbox v-model="useProfileImage" :binary="true" inputId="use-profile-img" />
+                                    <div class="flex items-center gap-2">
+                                        <Checkbox v-model="useProfileImage" :binary="true" inputId="use-profile-img"
+                                            class="!border-white/20" :pt="{
+                                                box: ({ props, state }) => ({
+                                                    class: ['!bg-slate-800 !border-white/20', { '!bg-violet-600 !border-violet-600': props.modelValue }]
+                                                })
+                                            }" />
                                         <label for="use-profile-img"
-                                        class="text-xs text-slate-300 cursor-pointer select-none">Use Character
+                                            class="text-xs text-slate-300 cursor-pointer select-none">Use Photo</label>
-                                        Photo</label>
+                                    </div>
+
+                                    <div class="flex items-center gap-2">
+                                        <Checkbox v-model="useEnvironment" :binary="true" inputId="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="use-env"
+                                            class="text-xs text-slate-300 cursor-pointer select-none">Use Environment</label>
+                                    </div>
                                 </div>
                             </div>
 
@@ -801,7 +1098,8 @@ const confirmAddToAlbum = async () => {
                                 <div @click="openAssetPicker"
                                     class="w-full bg-slate-800 border border-white/10 rounded-xl p-3 min-h-[46px] cursor-pointer hover:bg-slate-700/50 transition-colors flex flex-wrap gap-2">
                                     <span v-if="selectedAssets.length === 0"
-                                        class="text-slate-400 text-sm py-0.5">Select Assets</span>
+                                        class="text-slate-400 text-sm py-0.5">Select
+                                        Assets</span>
                                     <div v-for="asset in selectedAssets" :key="asset.id"
                                         class="px-2 py-1 bg-violet-600/30 border border-violet-500/30 text-violet-200 text-xs rounded-md flex items-center gap-2 animate-in fade-in zoom-in duration-200"
                                         @click.stop>
@@ -815,6 +1113,47 @@ const confirmAddToAlbum = async () => {
                                 </div>
                             </div>
                         </div>
+
+                        <!-- Environment Row (Below) -->
+                        <div v-if="selectedCharacter && useEnvironment" class="flex flex-col gap-2 animate-in fade-in slide-in-from-top-1 mt-2">
+                            <div class="flex justify-between items-center">
+                                <label class="text-xs 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-5 !w-5 !text-[10px] text-slate-500 hover:text-white" />
+                            </div>
+                            
+                            <div v-if="environments.length > 0" class="flex gap-2 overflow-x-auto pb-2 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-3 px-3 py-2 rounded-xl 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_20px_rgba(124,58,237,0.15)]' 
+                                        : 'border-white/5 hover:border-white/20'
+                                    ]"
+                                >
+                                    <div class="w-8 h-8 rounded-lg 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-xs" 
+                                            :class="(selectedEnvironment?.id === (env.id || env._id) || selectedEnvironment?._id === (env.id || env._id)) ? 'text-violet-400' : 'text-slate-500'"
+                                        ></i>
+                                    </div>
+                                    <span class="text-sm 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-xs"></i>
+                                </div>
+                            </div>
+                            <div v-else class="py-4 px-4 bg-slate-800/50 border border-white/5 rounded-2xl text-center">
+                                <p class="text-xs text-slate-600 uppercase m-0">No environments for this character</p>
+                            </div>
+                        </div>
                     </div>
 
                     <div class="w-full lg:w-80 flex flex-col gap-4">
@@ -826,11 +1165,36 @@ const confirmAddToAlbum = async () => {
                                     :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>
                             <div class="flex flex-col gap-2">
-                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Aspect
+                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Format</label>
-                                    Ratio</label>
+                                <div class="flex items-center">
-                                <Dropdown v-model="aspectRatio" :options="aspectRatioOptions" optionLabel="value"
+                                    <div class="flex-1 flex bg-slate-800 rounded-xl border border-white/10 overflow-hidden">
-                                    class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
+                                        <button @click="aspectRatio = 'THREEFOUR'"
-                                    :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' } }" />
+                                            class="flex-1 py-2 text-sm font-bold transition-all flex items-center justify-center gap-1"
+                                            :class="aspectRatio === 'THREEFOUR' ? 'bg-violet-600 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'">
+                                            <i class="pi pi-image"></i> Photo
+                                        </button>
+                                        <div class="w-px bg-white/10"></div>
+                                        <button @click="aspectRatio = 'NINESIXTEEN'"
+                                            class="flex-1 py-2 text-sm font-bold transition-all flex items-center justify-center gap-1"
+                                            :class="aspectRatio === 'NINESIXTEEN' ? 'bg-violet-600 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'">
+                                            <i class="pi pi-video"></i> Video
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Generation Count -->
+                        <div class="flex flex-col gap-2">
+                            <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Count</label>
+                            <div class="flex items-center gap-2">
+                                <div class="flex-1 flex bg-slate-800 rounded-xl border border-white/10 overflow-hidden">
+                                    <button v-for="n in 4" :key="n" @click="generationCount = n"
+                                        class="flex-1 py-2 text-sm font-bold transition-all"
+                                        :class="generationCount === n ? 'bg-violet-600 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'">
+                                        {{ n }}
+                                    </button>
+                                </div>
                             </div>
                         </div>
 
@@ -842,7 +1206,7 @@ const confirmAddToAlbum = async () => {
                             </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" />
+                                    class="w-full !text-[16px] !bg-slate-900 !border-white/10 !text-white !py-1.5" />
                             </div>
                         </div>
 
@@ -869,16 +1233,16 @@ const confirmAddToAlbum = async () => {
 
 
 
-        <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
+        <GenerationPreviewModal 
-            :style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"
+            v-model:visible="isImagePreviewVisible"
-            :pt="{ root: { class: '!bg-transparent !border-none !shadow-none' }, header: { class: '!hidden' }, content: { class: '!bg-transparent !p-0' } }">
+            :preview-images="allPreviewImages"
-            <div class="relative flex items-center justify-center" @click="isImagePreviewVisible = false">
+            :initial-index="previewIndex"
-                <img v-if="previewImage" :src="previewImage.url"
+            :api-url="API_URL"
-                    class="max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl" />
+            @reuse-prompt="reusePrompt"
-                <Button icon="pi pi-times" @click="isImagePreviewVisible = false" rounded text
+            @reuse-asset="reuseAsset"
-                    class="!absolute -top-4 -right-4 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" />
+            @use-result-as-asset="useResultAsAsset"
-            </div>
+            @liked="handleLiked"
-        </Dialog>
+        />
 
         <Dialog v-model:visible="isAssetPickerVisible" modal header="Select Assets"
             :style="{ width: '80vw', maxWidth: '900px' }"
@@ -969,6 +1333,53 @@ const confirmAddToAlbum = async () => {
             </template>
         </Dialog>
 
+        <Toast />
+
+        <!-- Multi-select floating bar -->
+        <Transition name="slide-up">
+            <div v-if="isSelectMode && selectedAssetIds.size > 0"
+                class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[100] bg-slate-800/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl px-5 py-3 flex items-center gap-3">
+                <span class="text-sm text-slate-300 font-medium">
+                    <i class="pi pi-check-circle mr-1 text-violet-400"></i>
+                    {{ selectedAssetIds.size }} selected
+                </span>
+                <div class="w-px h-6 bg-white/10"></div>
+                <Button icon="pi pi-check-square" label="All" size="small" text @click="selectAllImages"
+                    class="!text-slate-400 hover:!text-white !text-xs" />
+                <Button icon="pi pi-download" label="Download" size="small" :loading="isDownloading"
+                    @click="downloadSelected" class="!bg-violet-600 !border-none hover:!bg-violet-500 !text-sm" />
+                <Button icon="pi pi-calendar" label="To plan" size="small" @click="openAddToPlan"
+                    class="!bg-emerald-600 !border-none hover:!bg-emerald-500 !text-sm" />
+            </div>
+        </Transition>
+
+        <!-- Add to Plan Dialog -->
+        <Dialog v-model:visible="showAddToPlanDialog" header="Добавить в контент-план" 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">Дата</label>
+                    <DatePicker v-model="planPostDate" 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="planPostTopic" placeholder="Тема поста..."
+                        class="w-full !bg-slate-700 !border-white/10 !text-white" />
+                </div>
+                <p class="text-xs text-slate-500"><i class="pi pi-images mr-1"></i>{{ selectedAssetIds.size }}
+                    изображений
+                    будет добавлено</p>
+                <div class="flex justify-end gap-2">
+                    <Button label="Отмена" text @click="showAddToPlanDialog = false"
+                        class="!text-slate-400 hover:!text-white" />
+                    <Button label="Добавить" icon="pi pi-check" :loading="isSavingToPlan" @click="confirmAddToPlan"
+                        class="!bg-violet-600 !border-none hover:!bg-violet-500" />
+                </div>
+            </div>
+        </Dialog>
     </div>
 </template>
 

src/views/IdeasView.vue

@@ -0,0 +1,981 @@
+<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 selectedModel = ref('flux-schnell')
+const quality = ref({ key: 'TWOK', value: '2K' })
+const aspectRatio = ref({ key: 'NINESIXTEEN', value: '9:16' })
+const imageCount = ref(1)
+const sendToTelegram = ref(false)
+const telegramId = ref('')
+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: 'ONEK', value: '1K' },
+    { 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.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
+        sendToTelegram.value = s.sendToTelegram || false
+        telegramId.value = s.telegramId || localStorage.getItem('telegram_id') || ''
+        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,
+        quality: quality.value,
+        aspectRatio: aspectRatio.value,
+        imageCount: imageCount.value,
+        selectedModel: selectedModel.value,
+        sendToTelegram: sendToTelegram.value,
+        telegramId: telegramId.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))
+    if (telegramId.value) localStorage.setItem('telegram_id', telegramId.value)
+}
+
+watch([prompt, quality, aspectRatio, imageCount, selectedModel, sendToTelegram, telegramId, 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-2 gap-2">
+                        <div class="flex flex-col gap-1">
+                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Quality</label>
+                            <Dropdown v-model="quality" :options="qualityOptions" optionLabel="value"
+                                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>
+                        <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"
+                                :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>
+                    </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>
+
+                    <!-- Telegram (Copied from Detail View) -->
+                    <div class="flex flex-col gap-1 bg-slate-800/50 p-2 rounded-lg border border-white/5">
+                        <div class="flex items-center gap-2">
+                            <Checkbox v-model="sendToTelegram" :binary="true" inputId="idea-tg-check" />
+                            <label for="idea-tg-check" 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-[16px] !bg-slate-900 !border-white/10 !text-white !py-1.5" />
+                        </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,18 +1,18 @@
 <script setup>
-import { ref, onMounted, computed, watch } from 'vue'
+import {onMounted, ref} from 'vue'
-import { useRouter } from 'vue-router'
+import {useRouter} from 'vue-router'
-import { dataService } from '../services/dataService'
+import {dataService} from '../services/dataService'
-import { aiService } from '../services/aiService'
+import {aiService} from '../services/aiService'
 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 GenerationPreviewModal from '../components/GenerationPreviewModal.vue'
 
 const router = useRouter()
 const API_URL = import.meta.env.VITE_API_URL
@@ -66,10 +66,16 @@ const qualityOptions = ref([
 
 const aspectRatio = ref({ key: "NINESIXTEEN", value: "9:16" })
 const aspectRatioOptions = ref([
-    { key: "NINESIXTEEN", value: "9:16" },
+    { key: "ONEONE", value: "1:1" },
-    { key: "FOURTHREE", value: "4:3" },
+    { key: "TWOTHREE", value: "2:3" },
+    { key: "THREETWO", value: "3:2" },
     { key: "THREEFOUR", value: "3:4" },
-    { key: "SIXTEENNINE", value: "16:9" }
+    { 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" }
 ])
 
 // --- Data Loading ---
@@ -211,8 +217,15 @@ const handleGenerate = async () => {
 
         const response = await aiService.runGeneration(payload)
 
-        if (response && response.id) {
+        let genId = null
-            pollStatus(response.id)
+        if (response && response.generations && response.generations.length > 0) {
+            genId = response.generations[0].id
+        } else if (response && response.id) {
+            genId = response.id
+        }
+
+        if (genId) {
+            pollStatus(genId)
         } else {
             // Fallback immediate response
             generatedResult.value = response
@@ -288,23 +301,16 @@ const restoreGeneration = async (gen) => {
     if (foundAspect) aspectRatio.value = foundAspect
 
     if (gen.status === 'done' && gen.result_list && gen.result_list.length > 0) {
-        // We need to fetch details or just display the image
+        // Keep original gen object for preview and details
-        // 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}`,  // This might need adjustment based on how API serves files
+                url: `/assets/${id}`,
-                // 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
         }
     }
 }
@@ -332,14 +338,32 @@ const handleImprovePrompt = async () => {
 const isImagePreviewVisible = ref(false)
 const previewImage = ref(null)
 
-const openImagePreview = (url, name = 'Image Preview', createdAt = null) => {
+const openImagePreview = (url, name = 'Image Preview', createdAt = null, gen = null, assetId = null, isLiked = false) => {
-    previewImage.value = { url, name, createdAt }
+    previewImage.value = { url, name, createdAt, gen, assetId, is_liked: isLiked }
     isImagePreviewVisible.value = true
 }
 
-const formatDate = (dateString) => {
+const handleLiked = ({ id, is_liked }) => {
-    if (!dateString) return ''
+    // Update local state in history
-    return new Date(dateString).toLocaleString()
+    historyGenerations.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)
+            }
+        }
+    })
+    // 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 = () => {
@@ -354,6 +378,15 @@ 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) => {
@@ -405,10 +438,6 @@ const useResultAsReference = (gen) => {
 
 // --- Utils ---
 
-const copyToClipboard = () => {
-    // Implement if needed for prompt copying
-}
-
 
 
 // --- Lifecycle ---
@@ -471,6 +500,9 @@ 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" />
@@ -529,7 +561,7 @@ onMounted(() => {
                                 <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" />
+                                        class="w-full !text-[16px] !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>
@@ -587,7 +619,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())"
+                                        @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))"
                                         class="w-full h-full object-contain cursor-pointer hover:scale-[1.01] transition-transform duration-300" />
                                 </template>
                                 <template v-else>
@@ -648,13 +680,20 @@ 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">
+                                class="glass-panel p-2 rounded-lg border border-white/5 flex flex-col gap-2 hover:bg-white/10 transition-colors group relative">
+                                <!-- 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">
+                                        class="w-12 h-12 rounded bg-black/40 border border-white/10 overflow-hidden flex-shrink-0 mt-0.5 relative group/hist">
                                         <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>
@@ -740,18 +779,16 @@ onMounted(() => {
     </Dialog>
 
     <!-- Image Preview Modal -->
-    <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
+    <GenerationPreviewModal 
-        :header="previewImage?.name || 'Image Preview'" :style="{ width: '90vw', maxWidth: '800px' }"
+        v-model:visible="isImagePreviewVisible"
-        class="glass-panel rounded-2xl">
+        :preview-images="[previewImage].filter(i => !!i)"
-        <div v-if="previewImage" class="flex flex-col items-center">
+        :initial-index="0"
-            <img :src="previewImage.url" :alt="previewImage.name"
+        :api-url="API_URL"
-                class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
+        @reuse-prompt="reusePrompt"
-            <div class="mt-6 text-center">
+        @reuse-asset="reuseAsset"
-                <h2 class="text-2xl font-bold mb-2">{{ previewImage.name }}</h2>
+        @use-result-as-asset="useResultAsReference"
-                <p v-if="previewImage.createdAt" class="text-slate-400">{{ formatDate(previewImage.createdAt) }}</p>
+        @liked="handleLiked"
-            </div>
+    />
-        </div>
-    </Dialog>
 
 </template>
 

src/views/ImageToPromptView.vue

@@ -55,6 +55,15 @@ 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>
 
@@ -124,11 +133,14 @@ const copyToClipboard = () => {
 
                     <!-- Optional Prompt -->
                     <div class="glass-panel p-1 rounded-2xl border border-white/5">
-                        <div class="p-4 border-b border-white/5">
+                        <div class="p-4 border-b border-white/5 flex justify-between items-center">
                             <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,5 +1,6 @@
 <template>
-    <div class="container mx-auto p-4 animate-fade-in" v-if="project">
+    <div class="h-full overflow-y-auto custom-scrollbar">
+        <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">
@@ -44,25 +45,24 @@
                         <div v-if="isOwner" class="mb-6">
                             <div class="flex gap-2">
                                 <InputText v-model="inviteUsername" placeholder="Username to add"
-                                class="w-full p-inputtext-sm" @keyup.enter="addMember" />
+                                    class="w-full" @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="memberId in project.members" :key="memberId"
+                                                <div v-for="member in project.members" :key="member.id"
                                                     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-medium truncate">{{ memberId === project.owner_id ? 'Owner' :
+                                                        <p class="text-white font-bold truncate">{{ member.username }}</p>
-                                    'Member' }}</p>
+                                                        <p class="text-slate-500 text-[10px] truncate font-mono">ID: {{ member.id }}</p>
-                                <p class="text-slate-500 text-xs truncate">ID: {{ memberId }}</p>
                                                     </div>
-                            <div class="ml-auto" v-if="project.owner_id === memberId">
+                                                    <div class="ml-auto" v-if="project.owner_id === member.id">
                                                         <i class="pi pi-crown text-yellow-500" title="Owner"></i>
                                                     </div>
                                                 </div>
@@ -70,13 +70,67 @@
                                         </div>
                                     </div>
                         
-            <!-- Stats/Activity Column (Placeholder) -->
+                                    <!-- Stats/Activity Column -->
                                     <div class="lg:col-span-2">
-                <div class="glass-panel p-6 rounded-xl h-full">
+                                        <div class="glass-panel p-6 rounded-xl h-full flex flex-col">
-                    <h2 class="text-xl font-bold text-white mb-6">Activity</h2>
+                                            <div class="flex justify-between items-center mb-6">
-                    <div class="text-center py-12 text-slate-500">
+                                                <h2 class="text-xl font-bold text-white">Usage Statistics</h2>
+                                                <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 recent activity registered.</p>
+                            <p>No usage data available for this project.</p>
                         </div>
                     </div>
                 </div>
@@ -89,6 +143,7 @@
                 <p class="text-slate-400">Loading project...</p>
             </div>
         </div>
+    </div>
 </template>
 
 <script setup>
@@ -97,6 +152,7 @@ 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';
@@ -113,14 +169,36 @@ 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 = () => {
@@ -164,3 +242,22 @@ 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,5 +1,6 @@
 <template>
-    <div class="container mx-auto p-4 animate-fade-in">
+    <div class="h-full overflow-y-auto custom-scrollbar">
+        <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>
@@ -39,10 +40,16 @@
                     </p>
 
                     <div class="flex items-center justify-between mt-4 border-t border-slate-700/50 pt-4">
-                    <div class="flex items-center text-slate-500 text-sm">
+                        <div class="flex flex-col">
+                            <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)" />
@@ -69,12 +76,14 @@
                 </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';
@@ -94,8 +103,29 @@ 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 () => {
@@ -121,3 +151,22 @@ 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>