feat: Support grouped generation responses and improve generation ID extraction for polling.

feat: enhance grouped generation item UI with detailed failure states, delete, and reuse prompt/asset actions.
feat: Implement multiple image generation and enhance image preview with navigation and grouping.
2026-02-16 00:25:41 +03:00 · 2026-02-13 17:28:41 +03:00 · 2026-02-13 11:18:37 +03:00 · 2026-02-12 17:54:14 +03:00 · 2026-02-09 16:10:46 +03:00 · 2026-02-09 16:06:50 +03:00
26 changed files with 4481 additions and 232 deletions
--- a/index.html
+++ b/index.html
@@ -2,7 +2,11 @@
 <html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/site.webmanifest" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
--- a/openapi/openapi.json
+++ b/openapi/openapi.json
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/favicon-96x96.png
+++ b/public/favicon-96x96.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.svg
+++ b/public/favicon.svg
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@@ -0,0 +1,21 @@
+{
+  "name": "MyWebSite",
+  "short_name": "MySite",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
--- a/public/web-app-manifest-192x192.png
+++ b/public/web-app-manifest-192x192.png
--- a/public/web-app-manifest-512x512.png
+++ b/public/web-app-manifest-512x512.png
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,17 @@
 <script setup>
+import { onMounted } from 'vue'
 import { RouterView, useRoute } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
 import AppSidebar from './components/AppSidebar.vue'

 const route = useRoute()
+const authStore = useAuthStore()
+
+onMounted(async () => {
+  if (authStore.isAuthenticated) {
+    await authStore.fetchCurrentUser()
+  }
+})
 </script>

 <template>
@@ -12,10 +21,10 @@ const route = useRoute()
  </div>

  <!-- Main Layout (Sidebar + Content) -->
-  <div v-else class="flex h-screen bg-slate-900 text-slate-100 font-sans overflow-hidden">
+  <div v-else class="flex flex-col h-screen bg-slate-900 text-slate-100 font-sans overflow-hidden">
    <AppSidebar />

-    <div class="flex-1 h-full overflow-hidden relative">
+    <div class="flex-1 w-full overflow-hidden relative">
      <RouterView v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,12 +1,60 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
-import Button from 'primevue/button'
+import { useProjectsStore } from '@/stores/projectsStore'
+import { storeToRefs } from 'pinia'
+

 const router = useRouter()
 const route = useRoute()
 const authStore = useAuthStore()
+const projectsStore = useProjectsStore()
+const { projects, currentProject } = storeToRefs(projectsStore)
+
+const selectedProject = ref(null)
+
+onMounted(async () => {
+    // Ensure we have projects
+    if (projects.value.length === 0) {
+        await projectsStore.fetchProjects()
+    }
+    // Sync local ref with store
+    if (currentProject.value) {
+        selectedProject.value = currentProject.value.id
+    }
+})
+
+// Watch for external changes (like selecting from the list view)
+watch(currentProject, (newVal) => {
+    selectedProject.value = newVal ? newVal.id : null
+})
+
+const projectOptions = computed(() => {
+    return projects.value.map(p => ({ name: p.name, id: p.id }))
+})
+
+const getProjectName = (id) => {
+    const p = projects.value.find(p => p.id === id)
+    return p ? p.name : 'Unknown Project'
+}
+
+const isProjectMenuOpen = ref(false)
+
+const selectProject = (projectId) => {
+    selectedProject.value = projectId
+    isProjectMenuOpen.value = false
+
+    if (projectId) {
+        projectsStore.selectProject(projectId)
+    } else {
+        // Clear selection
+        projectsStore.currentProject = null
+        localStorage.removeItem('active_project_id')
+    }
+    // Reload page to ensure all data is refreshed with new context
+    window.location.reload()
+}

 const handleLogout = () => {
    authStore.logout()
@@ -23,11 +71,10 @@ const isActive = (path) => {
 const navItems = computed(() => {
    const items = [
        { path: '/', icon: '🏠', tooltip: 'Home' },
-        { path: '/assets', icon: '📂', tooltip: 'Assets' },
-        // { path: '/generation', icon: '🎨', tooltip: 'Image Generation' },
-        { path: '/flexible', icon: '🖌️', tooltip: 'Flexible Generation' },
-        { path: '/characters', icon: '👥', tooltip: 'Characters' },
-        { path: '/image-to-prompt', icon: '✨', tooltip: 'Image to Prompt' }
+        { path: '/projects', icon: '📂', tooltip: 'Projects' },
+        { path: '/flexible', icon: '🖌️', tooltip: 'Flexible' },
+        { path: '/albums', icon: '🖼️', tooltip: 'Library' },
+        { path: '/characters', icon: '👥', tooltip: 'Characters' }
    ]

    if (authStore.isAdmin()) {
@@ -40,31 +87,80 @@ const navItems = computed(() => {

 <template>
    <div class="contents">
-        <!-- Sidebar (Desktop) -->
+        <!-- Sidebar (Desktop -> Top Bar) -->
        <nav
-            class="hidden md:flex glass-panel w-20 m-4 flex-col items-center py-6 rounded-3xl z-40 border border-white/5 bg-slate-900/50 backdrop-blur-md h-[calc(100vh-2rem)]">
-            <div class="mb-12">
-                <div
-                    class="w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center font-bold text-white text-xl shadow-lg shadow-violet-500/20">
-                    AI
+            class="hidden md:flex glass-panel w-[calc(100%-2rem)] mx-4 mt-4 mb-2 flex-row items-center px-8 py-3 rounded-2xl z-40 border border-white/5 bg-slate-900/50 backdrop-blur-md shrink-0 justify-between">
+
+            <!-- Logo -->
+            <img src="/web-app-manifest-512x512.png" alt="Logo"
+                class="w-10 h-10 rounded-xl shadow-lg shadow-violet-500/20 shrink-0" />
+
+            <!-- Project Switcher -->
+            <div class="hidden lg:block ml-4 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">
+                    <i v-if="selectedProject" class="pi pi-folder text-violet-400"></i>
+                    <i v-else class="pi pi-user"></i>
+
+                    <span class="max-w-[150px] truncate font-medium">
+                        {{ selectedProject ? getProjectName(selectedProject) : 'Personal Workspace' }}
+                    </span>
+
+                    <i class="pi pi-chevron-down text-xs ml-1 opacity-50"></i>
+                </button>
+
+                <!-- Custom Dropdown Menu -->
+                <div v-if="isProjectMenuOpen"
+                    class="absolute top-full left-0 mt-2 w-56 bg-slate-900 border border-white/10 shadow-xl rounded-xl overflow-hidden z-50 py-1">
+
+                    <!-- Personal Workspace Option -->
+                    <div @click="selectProject(null)"
+                        class="flex items-center gap-3 px-4 py-3 hover:bg-white/5 cursor-pointer transition-colors"
+                        :class="{ 'text-violet-400 bg-white/5': !selectedProject, 'text-slate-300': selectedProject }">
+                        <i class="pi pi-user"></i>
+                        <span class="font-medium">Personal Workspace</span>
+                        <i v-if="!selectedProject" class="pi pi-check ml-auto text-sm"></i>
+                    </div>
+
+                    <div class="h-px bg-white/5 my-1"></div>
+
+                    <!-- Project Options -->
+                    <div v-for="project in projects" :key="project.id" @click="selectProject(project.id)"
+                        class="flex items-center gap-3 px-4 py-3 hover:bg-white/5 cursor-pointer transition-colors"
+                        :class="{ 'text-violet-400 bg-white/5': selectedProject === project.id, 'text-slate-300': selectedProject !== project.id }">
+                        <i class="pi pi-folder"></i>
+                        <span class="truncate">{{ project.name }}</span>
+                        <i v-if="selectedProject === project.id" class="pi pi-check ml-auto text-sm"></i>
+                    </div>
+
+                    <div v-if="projects.length === 0" class="px-4 py-3 text-slate-500 text-sm font-italic">
+                        No projects found
+                    </div>
                </div>
+
+                <!-- Backdrop to close on click outside -->
+                <div v-if="isProjectMenuOpen" @click="isProjectMenuOpen = false"
+                    class="fixed inset-0 z-40 bg-transparent"></div>
            </div>

-            <div class="flex-1 flex flex-col gap-6 w-full items-center">
+            <!-- Nav Items -->
+            <div class="flex flex-row gap-2 items-center justify-center flex-1 mx-8">
                <div v-for="item in navItems" :key="item.path" :class="[
-                    'w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300',
+                    'px-4 py-2 flex items-center gap-2 rounded-xl cursor-pointer transition-all duration-300',
                    isActive(item.path)
                        ? 'bg-white/10 text-slate-50 shadow-inner'
-                        : 'text-slate-400 hover:bg-white/10 hover:text-slate-50'
-                ]" @click="router.push(item.path)" v-tooltip.right="item.tooltip">
-                    <span class="text-2xl">{{ item.icon }}</span>
+                        : '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-sm font-medium hidden lg:block">{{ item.tooltip }}</span>
                </div>
            </div>

-            <div class="mt-auto flex flex-col items-center gap-4">
+            <!-- Right Actions -->
+            <div class="flex items-center gap-4 shrink-0">
                <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"
-                    v-tooltip.right="'Logout'">
+                    v-tooltip.bottom="'Logout'">
                    <i class="pi pi-power-off"></i>
                </div>
                <!-- Profile Avatar Placeholder -->
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -56,6 +56,26 @@ const router = createRouter({
      path: '/flexible',
      name: 'flexible',
      component: () => import('../views/FlexibleGenerationView.vue')
+    },
+    {
+      path: '/albums',
+      name: 'albums',
+      component: () => import('../views/AlbumsView.vue')
+    },
+    {
+      path: '/projects',
+      name: 'projects',
+      component: () => import('../views/ProjectsView.vue')
+    },
+    {
+      path: '/projects/:id',
+      name: 'project-detail',
+      component: () => import('../views/ProjectDetailView.vue')
+    },
+    {
+      path: '/albums/:id',
+      name: 'album-detail',
+      component: () => import('../views/AlbumDetailView.vue')
    }
  ]
 })
--- a/src/services/albumService.js
+++ b/src/services/albumService.js
@@ -0,0 +1,12 @@
+import api from './api';
+
+export const albumService = {
+  getAlbums: (limit = 10, offset = 0) => api.get('/albums', { params: { limit, offset } }),
+  createAlbum: (data) => api.post('/albums', data),
+  getAlbum: (id) => api.get(`/albums/${id}`),
+  updateAlbum: (id, data) => api.put(`/albums/${id}`, data),
+  deleteAlbum: (id) => api.delete(`/albums/${id}`),
+  addGenerationToAlbum: (albumId, generationId) => api.post(`/albums/${albumId}/generations/${generationId}`),
+  removeGenerationFromAlbum: (albumId, generationId) => api.delete(`/albums/${albumId}/generations/${generationId}`),
+  getAlbumGenerations: (albumId, limit = 10, offset = 0) => api.get(`/albums/${albumId}/generations`, { params: { limit, offset } })
+};
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -13,8 +13,15 @@ const api = axios.create({
 api.interceptors.request.use(
  config => {
    const user = JSON.parse(localStorage.getItem('user'));
-    if (user && user.token) {
-      config.headers['Authorization'] = `${user.tokenType} ${user.token}`;
+    if (user && user.access_token) {
+       config.headers.Authorization = `Bearer ${user.access_token}`;
+    } else if (user && user.token) {
+       config.headers.Authorization = `${user.tokenType} ${user.token}`;
+    }
+    
+    const projectId = localStorage.getItem('active_project_id');
+    if (projectId) {
+      config.headers['X-Project-ID'] = projectId;
    }
    return config;
  },
--- a/src/services/dataService.js
+++ b/src/services/dataService.js
@@ -25,6 +25,16 @@ export const dataService = {
        return response.data
    },

+    createCharacter: async (characterData) => {
+        const response = await api.post('/characters/', characterData)
+        return response.data
+    },
+
+    deleteCharacter: async (id) => {
+        const response = await api.delete(`/characters/${id}`)
+        return response.data
+    },
+
    getAssetsByCharacterId: async (charId, limit, offset) => {
        const response = await api.get(`/characters/${charId}/assets`, { params: { limit, offset } })
        return response.data
--- a/src/services/projectsService.js
+++ b/src/services/projectsService.js
@@ -0,0 +1,31 @@
+import api from './api';
+
+export default {
+    async getProjects() {
+        return api.get('/projects');
+    },
+
+    async createProject(projectData) {
+        return api.post('/projects', projectData);
+    },
+
+    async getProject(id) {
+        // Using getProjects for now as per previous plan, or could try specific endpoint if it exists
+        // Validating with backend: project_router has GET /api/projects (list)
+        // It does NOT have GET /api/projects/{id}.
+        // So we must fetch all and find, or assume the store has them.
+        return api.get('/projects');
+    },
+    
+    async joinProject(projectId) {
+        return api.post(`/projects/${projectId}/join`);
+    },
+    
+    async addMember(projectId, username) {
+        return api.post(`/projects/${projectId}/members`, { username });
+    },
+    
+    async deleteProject(projectId) {
+        return api.delete(`/projects/${projectId}`);
+    }
+};
--- a/src/stores/albums.js
+++ b/src/stores/albums.js
@@ -0,0 +1,153 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { albumService } from '../services/albumService';
+
+export const useAlbumStore = defineStore('albums', () => {
+  const albums = ref([]);
+  const currentAlbum = ref(null);
+  const loading = ref(false);
+  const error = ref(null);
+  const totalAlbums = ref(0);
+
+  async function fetchAlbums(limit = 10, offset = 0) {
+    loading.value = true;
+    error.value = null;
+    try {
+      const response = await albumService.getAlbums(limit, offset);
+      albums.value = response.data; // Assuming response.data is the list or { albums: [], total_count: ... }
+      // Check if response has total_count structure
+      if (response.data.albums) {
+          albums.value = response.data.albums;
+          totalAlbums.value = response.data.total_count;
+      } else {
+          // Fallback if structure is different
+           albums.value = response.data;
+      }
+    } catch (err) {
+      console.error('Error fetching albums:', err);
+      error.value = err.response?.data?.detail || 'Failed to fetch albums';
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function createAlbum(data) {
+    loading.value = true;
+    error.value = null;
+    try {
+      await albumService.createAlbum(data);
+      await fetchAlbums(); // Refresh list
+      return true;
+    } catch (err) {
+      console.error('Error creating album:', err);
+      error.value = err.response?.data?.detail || 'Failed to create album';
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function fetchAlbum(id) {
+    loading.value = true;
+    error.value = null;
+    currentAlbum.value = null;
+    try {
+      const response = await albumService.getAlbum(id);
+      currentAlbum.value = response.data;
+      return response.data;
+    } catch (err) {
+      console.error('Error fetching album:', err);
+      error.value = err.response?.data?.detail || 'Failed to fetch album';
+      return null;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function updateAlbum(id, data) {
+      loading.value = true;
+      error.value = null;
+      try {
+          await albumService.updateAlbum(id, data);
+          if (currentAlbum.value && currentAlbum.value.id === id) {
+              await fetchAlbum(id);
+          }
+          await fetchAlbums();
+          return true;
+      } catch (err) {
+          console.error('Error updating album:', err);
+          error.value = err.response?.data?.detail || 'Failed to update album';
+          return false;
+      } finally {
+          loading.value = false;
+      }
+  }
+
+  async function deleteAlbum(id) {
+    loading.value = true;
+    error.value = null;
+    try {
+      await albumService.deleteAlbum(id);
+      await fetchAlbums(); // Refresh list
+      return true;
+    } catch (err) {
+      console.error('Error deleting album:', err);
+      error.value = err.response?.data?.detail || 'Failed to delete album';
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function addGenerationToAlbum(albumId, generationId) {
+    loading.value = true;
+    error.value = null;
+    try {
+      await albumService.addGenerationToAlbum(albumId, generationId);
+      // Optionally refresh current album if it matches
+      if (currentAlbum.value && currentAlbum.value.id === albumId) {
+          await fetchAlbum(albumId);
+      }
+      return true;
+    } catch (err) {
+      console.error('Error adding generation to album:', err);
+      error.value = err.response?.data?.detail || 'Failed to add generation to album';
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function removeGenerationFromAlbum(albumId, generationId) {
+    loading.value = true;
+    error.value = null;
+    try {
+      await albumService.removeGenerationFromAlbum(albumId, generationId);
+      if (currentAlbum.value && currentAlbum.value.id === albumId) {
+          await fetchAlbum(albumId);
+      }
+      return true;
+    } catch (err) {
+      console.error('Error removing generation from album:', err);
+      error.value = err.response?.data?.detail || 'Failed to remove generation from album';
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  return {
+    albums,
+    currentAlbum,
+    loading,
+    error,
+    totalAlbums,
+    fetchAlbums,
+    createAlbum,
+    fetchAlbum,
+    updateAlbum,
+    deleteAlbum,
+    addGenerationToAlbum,
+    removeGenerationFromAlbum
+  };
+});
--- a/src/stores/projectsStore.js
+++ b/src/stores/projectsStore.js
@@ -0,0 +1,98 @@
+import { defineStore } from 'pinia';
+import projectsService from '@/services/projectsService';
+
+export const useProjectsStore = defineStore('projects', {
+    state: () => ({
+        projects: [],
+        currentProject: null,
+        loading: false,
+        error: null
+    }),
+
+    actions: {
+        async fetchProjects() {
+            this.loading = true;
+            this.error = null;
+            try {
+                const response = await projectsService.getProjects();
+                this.projects = response.data;
+                
+                // Restore selection from localStorage if valid
+                this.restoreSelection();
+            } catch (err) {
+                console.error("Failed to fetch projects", err);
+                this.error = "Failed to load projects";
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        restoreSelection() {
+            const savedId = localStorage.getItem('active_project_id');
+            if (savedId && this.projects.length > 0) {
+                const found = this.projects.find(p => p.id === savedId);
+                if (found) {
+                    this.currentProject = found;
+                } else {
+                    // ID exists but project not in list (maybe deleted or lost access)
+                    // Optional: clear it or keep it? Clearing seems safer.
+                    localStorage.removeItem('active_project_id');
+                    this.currentProject = null;
+                }
+            }
+        },
+
+        async createProject(name, description) {
+            this.loading = true;
+            try {
+                const response = await projectsService.createProject({ name, description });
+                const newProject = response.data;
+                this.projects.push(newProject);
+                // Automatically select the new project
+                this.selectProject(newProject.id);
+                return newProject;
+            } catch (err) {
+                console.error("Failed to create project", err);
+                throw err;
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        selectProject(projectId) {
+            const project = this.projects.find(p => p.id === projectId);
+            if (project) {
+                this.currentProject = project;
+                localStorage.setItem('active_project_id', projectId);
+            }
+        },
+        
+        async addMember(projectId, username) {
+            try {
+                 await projectsService.addMember(projectId, username);
+                 await this.fetchProjects(); // Refresh list to see updates if necessary
+            } catch(err) {
+                console.error("Failed to add member", err);
+                throw err;
+            }
+        },
+
+        getProjectById(id) {
+            return this.projects.find(p => p.id === id);
+        },
+
+        async deleteProject(projectId) {
+            try {
+                await projectsService.deleteProject(projectId);
+                this.projects = this.projects.filter(p => p.id !== projectId);
+                if (this.currentProject && this.currentProject.id === projectId) {
+                    this.currentProject = null;
+                    localStorage.removeItem('active_project_id');
+                }
+            } catch (err) {
+                console.error("Failed to delete project", err);
+                throw err;
+            }
+        }
+    }
+});
--- a/src/views/AlbumDetailView.vue
+++ b/src/views/AlbumDetailView.vue
@@ -0,0 +1,295 @@
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAlbumStore } from '../stores/albums'
+import { albumService } from '../services/albumService'
+import { aiService } from '../services/aiService'
+import { storeToRefs } from 'pinia'
+import Skeleton from 'primevue/skeleton'
+import Button from 'primevue/button'
+import ConfirmDialog from 'primevue/confirmdialog'
+import { useConfirm } from 'primevue/useconfirm'
+import Dialog from 'primevue/dialog'
+
+const route = useRoute()
+const router = useRouter()
+const albumStore = useAlbumStore()
+const { currentAlbum, loading } = storeToRefs(albumStore)
+const confirm = useConfirm()
+
+const generations = ref([])
+const loadingGenerations = ref(false)
+
+// Gen Picker State
+const isGenerationPickerVisible = ref(false)
+const availableGenerations = ref([])
+const loadingAvailableGenerations = ref(false)
+const selectedGenerations = ref([])
+const API_URL = import.meta.env.VITE_API_URL
+
+onMounted(async () => {
+    const id = route.params.id
+    if (id) {
+        await albumStore.fetchAlbum(id)
+        if (currentAlbum.value) {
+            fetchGenerations(id)
+        }
+    }
+})
+
+const fetchGenerations = async (albumId) => {
+    loadingGenerations.value = true
+    try {
+        const response = await albumService.getAlbumGenerations(albumId, 100) // Increase limit for now
+        generations.value = response.data.generations || [] // Adjust based on actual API response structure
+        // If API returns list directly:
+        if (Array.isArray(response.data)) {
+            generations.value = response.data
+        }
+    } catch (e) {
+        console.error('Failed to load generations', e)
+    } finally {
+        loadingGenerations.value = false
+    }
+}
+
+const confirmDelete = () => {
+    confirm.require({
+        message: 'Are you sure you want to delete this album? This action cannot be undone.',
+        header: 'Delete Album',
+        icon: 'pi pi-exclamation-triangle',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            await albumStore.deleteAlbum(currentAlbum.value.id)
+            router.push('/albums')
+        }
+    })
+}
+
+const copyPrompt = (prompt) => {
+    navigator.clipboard.writeText(prompt)
+    // Could add a toast notification here
+}
+
+// --- Generation Picker ---
+const openGenerationPicker = async () => {
+    isGenerationPickerVisible.value = true
+    selectedGenerations.value = []
+    await loadAvailableGenerations()
+}
+
+const loadAvailableGenerations = async () => {
+    loadingAvailableGenerations.value = true
+    try {
+        // Fetch recent generations to add
+        const response = await aiService.getGenerations(50, 0)
+        availableGenerations.value = response.generations || []
+    } catch (e) {
+        console.error('Failed to load available generations', e)
+    } finally {
+        loadingAvailableGenerations.value = false
+    }
+}
+
+const toggleGenerationSelection = (gen) => {
+    const index = selectedGenerations.value.findIndex(g => g.id === gen.id)
+    if (index === -1) {
+        selectedGenerations.value.push(gen)
+    } else {
+        selectedGenerations.value.splice(index, 1)
+    }
+}
+
+const addSelectedGenerations = async () => {
+    if (selectedGenerations.value.length === 0) return
+
+    try {
+        // Add sequentially
+        for (const gen of selectedGenerations.value) {
+            await albumService.addGenerationToAlbum(currentAlbum.value.id, gen.id)
+        }
+        isGenerationPickerVisible.value = false
+        // Refresh album generations
+        await fetchGenerations(currentAlbum.value.id)
+    } catch (e) {
+        console.error('Failed to add generations to album', e)
+    }
+}
+
+const removeGeneration = (gen) => {
+    confirm.require({
+        message: 'Are you sure you want to remove this generation from the album?',
+        header: 'Remove Generation',
+        icon: 'pi pi-exclamation-triangle',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            await albumStore.removeGenerationFromAlbum(currentAlbum.value.id, gen.id)
+            await fetchGenerations(currentAlbum.value.id)
+        }
+    })
+}
+
+// --- Image Preview ---
+const isImagePreviewVisible = ref(false)
+const previewImage = ref(null)
+const openImagePreview = (url) => {
+    previewImage.value = { url }
+    isImagePreviewVisible.value = true
+}
+</script>
+
+<template>
+    <div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100">
+        <ConfirmDialog></ConfirmDialog>
+
+        <!-- Loading State -->
+        <div v-if="loading" class="flex flex-col gap-8">
+            <div class="flex justify-between items-start">
+                <div>
+                    <Skeleton width="15rem" height="3rem" class="mb-4" />
+                    <Skeleton width="20rem" height="1.5rem" />
+                </div>
+                <Skeleton width="8rem" height="2.5rem" />
+            </div>
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                <Skeleton v-for="i in 8" :key="i" height="16rem" class="rounded-xl" />
+            </div>
+        </div>
+
+        <div v-else-if="currentAlbum">
+            <!-- Header -->
+            <header class="flex justify-between items-start mb-8 pb-8 border-b border-white/10">
+                <div>
+                    <div class="flex items-center gap-4 mb-2">
+                        <Button icon="pi pi-arrow-left" text rounded @click="router.push('/albums')"
+                            class="!text-slate-400 hover:!text-white hover:!bg-white/10" />
+                        <h1 class="text-4xl font-bold m-0">{{ currentAlbum.name }}</h1>
+                    </div>
+                    <p class="text-slate-400 text-lg ml-14 max-w-2xl">{{ currentAlbum.description }}</p>
+                </div>
+                <div class="flex gap-2">
+                    <Button label="Add Generation" icon="pi pi-plus" text @click="openGenerationPicker" />
+                    <Button label="Delete Album" icon="pi pi-trash" severity="danger" text @click="confirmDelete" />
+                </div>
+            </header>
+
+            <!-- Generations Grid -->
+            <div v-if="loadingGenerations" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                <Skeleton v-for="i in 8" :key="i" height="20rem" class="rounded-xl" />
+            </div>
+
+            <div v-else-if="generations.length === 0"
+                class="flex flex-col items-center justify-center py-20 text-slate-500">
+                <i class="pi pi-image text-5xl mb-4 opacity-50"></i>
+                <p class="text-xl">No generations in this album yet.</p>
+                <p class="text-sm mt-2">Generate images and add them to this album!</p>
+            </div>
+
+            <div v-else class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                <!-- We need to adapt this based on actual generation object structure -->
+                <div v-for="gen in generations" :key="gen.id"
+                    class="glass-panel rounded-xl overflow-hidden group relative transition-all hover:bg-white/5">
+
+                    <div class="aspect-[2/3] w-full bg-slate-800 relative overflow-hidden cursor-pointer"
+                        @click="gen.result_list && gen.result_list.length > 0 ? openImagePreview(API_URL + '/assets/' + gen.result_list[0]) : null">
+                        <img v-if="gen.result_list && gen.result_list.length > 0"
+                            :src="gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true'"
+                            class="w-full h-full object-cover" />
+
+                        <!-- Overlay Actions -->
+                        <div
+                            class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2 pointer-events-none">
+                            <div class="pointer-events-auto flex gap-2">
+                                <Button icon="pi pi-copy" rounded text class="!text-white hover:!bg-white/20"
+                                    v-tooltip.top="'Copy Prompt'" @click="copyPrompt(gen.prompt)" />
+                                <Button icon="pi pi-trash" rounded text
+                                    class="!text-white hover:!bg-red-500/80 hover:!text-white"
+                                    v-tooltip.top="'Remove from Album'" @click="removeGeneration(gen)" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="p-3">
+                        <p class="text-xs text-slate-400 line-clamp-2" :title="gen.prompt">
+                            {{ gen.prompt }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-else class="flex flex-col items-center justify-center h-full text-slate-400">
+            <i class="pi pi-exclamation-circle text-4xl mb-4 text-red-400"></i>
+            <p class="text-xl">Album not found</p>
+            <Button label="Back to Albums" class="mt-4 p-button-text" @click="router.push('/albums')" />
+        </div>
+
+        <Dialog v-model:visible="isGenerationPickerVisible" modal header="Add Generations"
+            :style="{ width: '80vw', maxWidth: '1000px' }"
+            :pt="{ root: { class: '!bg-slate-900 !border !border-white/10' }, header: { class: '!bg-slate-900 !border-b !border-white/5 !text-white' }, content: { class: '!bg-slate-900 !p-4' }, footer: { class: '!bg-slate-900 !border-t !border-white/5 !p-4' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">
+
+            <div class="h-[60vh] overflow-y-auto custom-scrollbar">
+                <div v-if="loadingAvailableGenerations" 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="availableGenerations.length > 0"
+                    class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                    <div v-for="gen in availableGenerations" :key="gen.id" @click="toggleGenerationSelection(gen)"
+                        class="relative aspect-[2/3] rounded-xl overflow-hidden cursor-pointer border-2 transition-all group"
+                        :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]}`)"
+                            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">
+                            <i class="pi pi-image text-2xl"></i>
+                        </div>
+
+                        <div class="absolute bottom-0 left-0 right-0 p-2 bg-black/60 backdrop-blur-sm">
+                            <p class="text-[10px] text-white line-clamp-2">{{ gen.prompt }}</p>
+                        </div>
+
+                        <!-- Checkmark -->
+                        <div v-if="selectedGenerations.some(g => g.id === gen.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">
+                    <p>No generations found.</p>
+                </div>
+            </div>
+
+            <template #footer>
+                <div class="flex justify-end gap-2">
+                    <Button label="Cancel" @click="isGenerationPickerVisible = false"
+                        class="!text-slate-300 hover:!bg-white/5" text />
+                    <Button :label="'Add (' + selectedGenerations.length + ')'" @click="addSelectedGenerations"
+                        class="!bg-violet-600 !border-none hover:!bg-violet-500" />
+                </div>
+            </template>
+        </Dialog>
+
+        <!-- Image Preview Modal -->
+        <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
+            :style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"
+            :pt="{ root: { class: '!bg-transparent !border-none !shadow-none' }, header: { class: '!hidden' }, content: { class: '!bg-transparent !p-0' } }">
+            <div class="relative flex items-center justify-center" @click="isImagePreviewVisible = false">
+                <img v-if="previewImage" :src="previewImage.url"
+                    class="max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl" />
+                <Button icon="pi pi-times" @click="isImagePreviewVisible = false" rounded text
+                    class="!absolute -top-4 -right-4 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" />
+            </div>
+        </Dialog>
+
+    </div>
+</template>
+
+<style scoped>
+.glass-panel {
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(10px);
+}
+</style>
--- a/src/views/AlbumsView.vue
+++ b/src/views/AlbumsView.vue
@@ -0,0 +1,123 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAlbumStore } from '../stores/albums'
+import { storeToRefs } from 'pinia'
+import Skeleton from 'primevue/skeleton'
+import Dialog from 'primevue/dialog'
+import InputText from 'primevue/inputtext'
+import Textarea from 'primevue/textarea'
+import Button from 'primevue/button'
+import Image from 'primevue/image'
+const router = useRouter()
+const albumStore = useAlbumStore()
+const { albums, loading } = storeToRefs(albumStore)
+
+const showCreateDialog = ref(false)
+const newAlbum = ref({ name: '', description: '' })
+const submitting = ref(false)
+const API_URL = import.meta.env.VITE_API_URL
+
+onMounted(async () => {
+    await albumStore.fetchAlbums()
+})
+
+const goToDetail = (id) => {
+    router.push({ name: 'album-detail', params: { id } })
+}
+
+const createAlbum = async () => {
+    if (!newAlbum.value.name) return
+    submitting.value = true
+    try {
+        await albumStore.createAlbum(newAlbum.value)
+        showCreateDialog.value = false
+        newAlbum.value = { name: '', description: '' }
+    } finally {
+        submitting.value = false
+    }
+}
+</script>
+
+<template>
+    <div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100">
+        <!-- Top Bar -->
+        <header class="flex justify-between items-end mb-8">
+            <div>
+                <h1 class="text-4xl font-bold m-0">Albums</h1>
+                <p class="mt-2 mb-0 text-slate-400">Organize your generations</p>
+            </div>
+            <Button label="Create Album" icon="pi pi-plus" @click="showCreateDialog = true" 
+                class="p-button-outlined p-button-secondary !text-white !border-white/20 hover:!bg-white/10" />
+        </header>
+
+        <!-- Loading State -->
+        <div v-if="loading && albums.length === 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div v-for="i in 6" :key="i" class="glass-panel rounded-2xl p-6 flex flex-col gap-4">
+                <Skeleton height="12rem" class="w-full rounded-xl" />
+                <Skeleton width="60%" height="1.5rem" />
+                <Skeleton width="40%" height="1rem" />
+            </div>
+        </div>
+
+        <!-- Empty State -->
+        <div v-else-if="albums.length === 0" class="flex flex-col items-center justify-center h-64 text-slate-400">
+            <i class="pi pi-folder-open text-6xl mb-4 opacity-50"></i>
+            <p class="text-xl">No albums found</p>
+            <Button label="Create your first album" class="mt-4 p-button-text" @click="showCreateDialog = true" />
+        </div>
+
+        <!-- Albums Grid -->
+        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div v-for="album in albums" :key="album.id"
+                class="glass-panel rounded-2xl p-6 flex flex-col gap-4 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-white/5 hover:border-white/10 group"
+                @click="goToDetail(album.id)">
+                
+                <!-- Album Cover Placeholder -->
+                <div v-if="album.cover_asset_id" class="aspect-video w-full bg-slate-800 rounded-xl flex items-center justify-center overflow-hidden border border-white/5">
+                    <Image :src="API_URL + '/assets/' + album.cover_asset_id + '?thumbnail=true'" preview class="w-full h-full object-cover" imageClass="w-full h-full object-cover" />
+                </div>
+                <div v-else class="aspect-video w-full bg-slate-800 rounded-xl flex items-center justify-center overflow-hidden border border-white/5">
+                    <i class="pi pi-images text-4xl text-slate-600 group-hover:text-slate-400 transition-colors"></i>
+                </div>
+
+                <div>
+                    <h3 class="m-0 mb-1 text-xl font-semibold truncate">{{ album.name }}</h3>
+                    <p class="m-0 text-sm text-slate-400 line-clamp-2 min-h-[2.5em]">
+                        {{ album.description || 'No description' }}
+                    </p>
+                    <div class="mt-3 flex items-center text-xs text-slate-500">
+                        <i class="pi pi-image mr-1"></i>
+                        <span>{{ album.generation_ids?.length || 0 }} items</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Create Album Dialog -->
+        <Dialog v-model:visible="showCreateDialog" modal header="Create New Album" :style="{ width: '500px' }" 
+            :breakpoints="{ '960px': '75vw', '641px': '90vw' }" class="p-dialog-custom">
+            <div class="flex flex-col gap-4 pt-4">
+                <div class="flex flex-col gap-2">
+                    <label for="name" class="font-semibold">Name</label>
+                    <InputText id="name" v-model="newAlbum.name" class="w-full" placeholder="My Awesome Album" autofocus />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="description" class="font-semibold">Description</label>
+                    <Textarea id="description" v-model="newAlbum.description" rows="3" class="w-full" placeholder="Optional description..." />
+                </div>
+            </div>
+            <template #footer>
+                <Button label="Cancel" icon="pi pi-times" @click="showCreateDialog = false" text />
+                <Button label="Create" icon="pi pi-check" @click="createAlbum" :loading="submitting" autofocus />
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<style scoped>
+.glass-panel {
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(10px);
+}
+</style>
--- a/src/views/AssetsView.vue
+++ b/src/views/AssetsView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { dataService } from '../services/dataService'
 import type { Asset } from '@/models/asset'
@@ -11,6 +11,11 @@ import ConfirmDialog from 'primevue/confirmdialog'
 import { useConfirm } from "primevue/useconfirm"
 import Toast from 'primevue/toast'
 import { useToast } from "primevue/usetoast"
+import { useAlbumStore } from '../stores/albums'
+import { storeToRefs } from 'pinia'
+import InputText from 'primevue/inputtext'
+import Textarea from 'primevue/textarea'
+import Image from 'primevue/image'

 const router = useRouter()
 const confirm = useConfirm()
@@ -21,12 +26,47 @@ const activeFilter = ref('all')
 // @ts-ignore
 const API_URL = import.meta.env.VITE_API_URL

+// Albums Logic
+const albumStore = useAlbumStore()
+const { albums, loading: albumsLoading } = storeToRefs(albumStore)
+const viewMode = ref('assets') // 'assets' | 'albums'
+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)
-const rows = ref(12)
+const rows = ref(18)
 const totalRecords = ref(0)
+const fileInput = ref<HTMLInputElement | null>(null)
+
+const triggerFileUpload = () => {
+    fileInput.value?.click()
+}
+
+const handleFileUpload = async (event: Event) => {
+    const target = event.target as HTMLInputElement
+    if (target.files && target.files[0]) {
+        const file = target.files[0]
+        try {
+            loading.value = true
+            await dataService.uploadAsset(file)
+            toast.add({ severity: 'success', summary: 'Success', detail: 'Asset uploaded successfully', life: 3000 })
+            // Reset to first page and reload
+            first.value = 0
+            activeFilter.value = 'uploaded' // Switch to uploaded view to see the new asset
+            loadAssets()
+        } catch (e) {
+            console.error('Failed to upload asset', e)
+            toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to upload asset', life: 3000 })
+        } finally {
+            loading.value = false
+            target.value = '' // Reset input
+        }
+    }
+}

 const openModal = (asset: Asset) => {
    selectedAsset.value = asset
@@ -52,10 +92,37 @@ const loadAssets = async () => {
    }
 }

+// Watch view mode to load albums
+watch(viewMode, async (newMode) => {
+    if (newMode === 'albums' && albums.value.length === 0) {
+        await albumStore.fetchAlbums()
+    }
+})
+
 onMounted(() => {
    loadAssets()
+    // Preload albums if needed or wait for switch
 })

+const createAlbum = async () => {
+    if (!newAlbum.value.name) return
+    submittingAlbum.value = true
+    try {
+        await albumStore.createAlbum(newAlbum.value)
+        showCreateDialog.value = false
+        newAlbum.value = { name: '', description: '' }
+        toast.add({ severity: 'success', summary: 'Success', detail: 'Album created', life: 3000 })
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to create album', life: 3000 })
+    } finally {
+        submittingAlbum.value = false
+    }
+}
+
+const goToAlbumDetail = (id: string) => {
+    router.push({ name: 'album-detail', params: { id } })
+}
+
 // Server-side filtering is now used, so we don't need a local filteredAssets computed property
 // unless we want to do secondary filtering, but usually it's better to let the server handle it.

@@ -64,8 +131,6 @@ const paginatedAssets = computed(() => {
    return assets.value
 })

-
-
 const confirmDelete = (asset: Asset) => {
    confirm.require({
        message: 'Do you want to delete this asset?',
@@ -114,93 +179,191 @@ const formatDate = (dateString: string) => {
 <template>
    <div class="flex flex-col h-full p-8 overflow-y-auto w-full text-slate-100">
        <!-- Main Content (Sidebar removed) -->
-        <div class="flex-1 flex flex-col">
+        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- Top Bar -->
-            <header class="flex justify-between items-end mb-8">
+            <header class="flex justify-between items-center mb-4 px-1">
                <div>
-                    <h1 class="text-4xl font-bold m-0">Assets Library</h1>
-                    <p class="mt-2 mb-0 text-slate-400">Manage all your assets</p>
+                    <h1
+                        class="text-xl font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent m-0">
+                        Library</h1>
+                    <p class="text-xs text-slate-500 mt-1">Manage your generations and albums</p>
                </div>

-                <div class="glass-panel p-2 flex gap-2 rounded-xl">
-                    <Button v-for="filter in ['all', 'image']" :key="filter"
-                        :label="filter.charAt(0).toUpperCase() + filter.slice(1)"
-                        :class="activeFilter === filter ? 'bg-white/10 text-slate-50' : 'bg-transparent text-slate-400'"
-                        class="px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:text-slate-50" text
-                        @click="handleFilterChange(filter)" />
+                <div class="flex items-center gap-4">
+                    <!-- View Switcher -->
+                    <div class="glass-panel p-1 flex gap-1 rounded-xl bg-slate-800/50 border border-white/5">
+                        <Button label="Assets" icon="pi pi-images"
+                            :class="viewMode === 'assets' ? 'bg-white/10 text-slate-50 shadow-sm' : 'bg-transparent text-slate-400 hover:text-slate-200'"
+                            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200" text
+                            @click="viewMode = 'assets'" />
+                        <Button label="Albums" icon="pi pi-book"
+                            :class="viewMode === 'albums' ? 'bg-white/10 text-slate-50 shadow-sm' : 'bg-transparent text-slate-400 hover:text-slate-200'"
+                            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200" text
+                            @click="viewMode = 'albums'" />
+                    </div>
+
+                    <!-- Assets Toolbar -->
+                    <div v-if="viewMode === 'assets'" class="flex items-center gap-2">
+                        <input type="file" ref="fileInput" @change="handleFileUpload" class="hidden" accept="image/*" />
+                        <Button label="Upload" icon="pi pi-upload" @click="triggerFileUpload"
+                            class="!bg-violet-600 !border-none hover:!bg-violet-500 !text-xs !px-3 !py-1.5 !rounded-lg !font-medium shadow-lg shadow-violet-500/20" />
+
+                        <div class="glass-panel p-1 flex gap-1 rounded-xl bg-slate-800/50 border border-white/5">
+                            <Button v-for="filter in ['all', 'generated', 'uploaded']" :key="filter"
+                                :label="filter.charAt(0).toUpperCase() + filter.slice(1)"
+                                :class="activeFilter === filter ? 'bg-white/10 text-slate-50 shadow-sm' : 'bg-transparent text-slate-400 hover:text-slate-200'"
+                                class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200" text
+                                @click="handleFilterChange(filter)" />
+                        </div>
+                    </div>
+                    <!-- Albums Toolbar -->
+                    <div v-if="viewMode === 'albums'" class="flex items-center gap-2">
+                        <Button label="Create Album" icon="pi pi-plus" @click="showCreateDialog = true"
+                            class="!bg-violet-600 !border-none hover:!bg-violet-500 !text-xs !px-3 !py-1.5 !rounded-lg !font-medium shadow-lg shadow-violet-500/20" />
+                    </div>
                </div>
            </header>

-            <!-- Loading State -->
-            <div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 pb-8">
-                <div v-for="i in 8" :key="i" class="glass-panel rounded-2xl overflow-hidden">
-                    <Skeleton height="180px" />
-                    <div class="p-5">
-                        <Skeleton class="mb-2" />
-                        <Skeleton width="60%" />
+            <!-- ASSETS VIEW -->
+            <div v-if="viewMode === 'assets'" class="contents">
+                <!-- Loading State -->
+                <div v-if="loading"
+                    class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 gap-2 md:gap-1 pb-4 overflow-y-auto custom-scrollbar">
+                    <Skeleton v-for="i in 12" :key="i" class="aspect-[9/16] !bg-slate-800 rounded-none sm:rounded-md" />
+                </div>
+
+                <!-- Assets Grid -->
+                <div v-else class="flex-1 overflow-y-auto custom-scrollbar pb-20">
+                    <div v-if="paginatedAssets.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="asset in paginatedAssets" :key="asset.id"
+                            class="aspect-[9/16] relative group overflow-hidden bg-slate-800 transition-all duration-300 rounded-none sm:rounded-md border border-white/5 hover:border-white/20"
+                            @click="openModal(asset)">
+
+                            <!-- Image -->
+                            <img :src="(API_URL + asset.url + '?thumbnail=true') || 'https://via.placeholder.com/300'"
+                                :alt="asset.name"
+                                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
+
+                            <!-- 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">
+                                {{ asset.type }}
+                            </div>
+
+                            <!-- Hover Overlay -->
+                            <div
+                                class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col justify-between p-3">
+
+                                <!-- Top Actions -->
+                                <div
+                                    class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200">
+                                    <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
+                                        class="!w-7 !h-7 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-xs hover:!bg-red-500 hover:!text-white transition-colors"
+                                        @click.stop="confirmDelete(asset)" />
+
+                                    <span v-if="asset.linked_char_id"
+                                        class="text-[10px] bg-emerald-500/20 text-emerald-400 px-2 py-1 rounded-full border border-emerald-500/20"
+                                        v-tooltip.left="'Linked to Character'">
+                                        Linked
+                                    </span>
+                                </div>
+
+                                <!-- Center View Button -->
+                                <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
+                                    <Button icon="pi pi-eye" rounded text
+                                        class="!bg-black/40 !text-white !w-10 !h-10 !rounded-full opacity-0 group-hover:opacity-100 hover:!bg-black/60 hover:!scale-110 transition-all duration-300 pointer-events-auto !border border-white/20"
+                                        @click.stop="openModal(asset)" />
+                                </div>
+
+                                <!-- Bottom Info -->
+                                <div
+                                    class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200">
+                                    <p class="text-xs font-medium text-white line-clamp-1 mb-0.5">{{ asset.name }}</p>
+                                    <p class="text-[10px] text-slate-400">{{ formatDate(asset.created_at) }}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div v-else class="flex flex-col items-center justify-center h-64 text-slate-500">
+                        <i class="pi pi-images text-4xl mb-3 opacity-50"></i>
+                        <p>No assets found</p>
+                        <Button v-if="activeFilter !== 'all'" label="Clear Filters" text class="mt-2 !text-violet-400"
+                            @click="handleFilterChange('all')" />
+                    </div>
+
+                    <!-- Pagination -->
+                    <div v-if="totalRecords > rows" class="mt-6 flex justify-center">
+                        <Paginator :first="first" :rows="rows" :totalRecords="totalRecords" @page="onPage" :template="{
+                            default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
+                        }" class="!bg-transparent !border-none !p-0" :pt="{
+                            root: { class: '!bg-transparent' },
+                            pages: { class: 'gap-1' },
+                            pageButton: ({ context }) => ({
+                                class: [
+                                    '!min-w-[32px] !h-8 !rounded-lg !border-none !transition-all !duration-200 !text-xs',
+                                    context.active ? '!bg-violet-600 !text-white !shadow-lg !shadow-violet-500/30' : '!bg-white/5 !text-slate-400 hover:!bg-white/10 hover:!text-slate-200'
+                                ]
+                            }),
+                            firstPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-lg !min-w-[32px] !h-8 hover:!bg-white/10 hover:!text-slate-200 transition-all !mr-1' } },
+                            previousPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-lg !min-w-[32px] !h-8 hover:!bg-white/10 hover:!text-slate-200 transition-all !mr-2' } },
+                            nextPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-lg !min-w-[32px] !h-8 hover:!bg-white/10 hover:!text-slate-200 transition-all !ml-2' } },
+                            lastPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-lg !min-w-[32px] !h-8 hover:!bg-white/10 hover:!text-slate-200 transition-all !ml-1' } }
+                        }" />
                    </div>
                </div>
            </div>

-            <!-- Assets Grid -->
-            <div v-else class="flex-1 flex flex-col">
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 pb-8">
-                    <div v-for="asset in paginatedAssets" :key="asset.id" @click="openModal(asset)"
-                        class="glass-panel rounded-2xl overflow-hidden transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:border-white/20 hover:shadow-2xl">
-                        <!-- Media Preview -->
-                        <div class="h-70 bg-black/30 relative overflow-hidden">
-                            <img :src="(API_URL + asset.url + '?thumbnail=true') || 'https://via.placeholder.com/300'"
-                                :alt="asset.name"
-                                class="w-full h-full object-cover transition-transform duration-500 hover:scale-105" />
-                            <div
-                                class="absolute top-2.5 right-2.5 bg-black/60 backdrop-blur-sm px-3 py-1 rounded-full text-xs uppercase font-semibold text-white z-10">
-                                {{ asset.type }}
-                            </div>
-                            <div @click.stop="confirmDelete(asset)"
-                                class="absolute top-2.5 left-2.5 w-8 h-8 rounded-full bg-black/60 backdrop-blur-sm flex items-center justify-center cursor-pointer hover:bg-red-500/80 transition-all z-10 group/delete">
-                                <i
-                                    class="pi pi-trash text-white text-xs group-hover/delete:scale-110 transition-transform"></i>
-                            </div>
-                        </div>
-
-                        <!-- Asset Info -->
-                        <div class="p-5">
-                            <div class="flex justify-between items-start mb-2">
-                                <h3
-                                    class="m-0 text-base font-semibold whitespace-nowrap overflow-hidden text-ellipsis flex-1 mr-2">
-                                    {{ asset.name }}
-                                </h3>
-                            </div>
-                            <div class="flex justify-between items-center text-xs text-slate-400">
-                                <span>{{ formatDate(asset.created_at) }}</span>
-                                <span v-if="asset.linked_char_id"
-                                    class="bg-emerald-500/10 text-emerald-400 px-2 py-0.5 rounded">
-                                    🔗 Linked
-                                </span>
-                            </div>
-                        </div>
+            <!-- ALBUMS VIEW -->
+            <div v-else class="flex-1 overflow-y-auto custom-scrollbar pb-20">
+                <!-- Empty State -->
+                <div v-if="albums.length === 0 && !albumsLoading"
+                    class="flex flex-col items-center justify-center h-64 text-slate-400">
+                    <i class="pi pi-folder-open text-6xl mb-4 opacity-50"></i>
+                    <p class="text-xl">No albums found</p>
+                    <Button label="Create your first album" class="mt-4 p-button-text"
+                        @click="showCreateDialog = true" />
+                </div>
+                <!-- Loading State -->
+                <div v-else-if="albumsLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <div v-for="i in 6" :key="i" class="glass-panel rounded-2xl p-6 flex flex-col gap-4">
+                        <Skeleton height="12rem" class="w-full rounded-xl" />
+                        <Skeleton width="60%" height="1.5rem" />
+                        <Skeleton width="40%" height="1rem" />
                    </div>
                </div>

-                <!-- Pagination -->
-                <div v-if="totalRecords > rows" class="mt-auto py-6">
-                    <Paginator :first="first" :rows="rows" :totalRecords="totalRecords" @page="onPage" :template="{
-                        default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
-                    }" class="!bg-transparent !border-none !p-0" :pt="{
-                        root: { class: '!bg-transparent' },
-                        pcPageButton: {
-                            root: ({ context }) => ({
-                                class: [
-                                    '!min-w-[40px] !h-10 !rounded-xl !border-none !transition-all !duration-300 !font-bold',
-                                    context.active ? '!bg-violet-600 !text-white !shadow-lg' : '!bg-white/5 !text-slate-400 hover:!bg-white/10 hover:!text-slate-50'
-                                ]
-                            })
-                        },
-                        pcFirstPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
-                        pcPreviousPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
-                        pcNextPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
-                        pcLastPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } }
-                    }" />
+                <!-- Albums Grid -->
+                <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <div v-for="album in albums" :key="album.id"
+                        class="glass-panel rounded-2xl p-6 flex flex-col gap-4 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-white/5 hover:border-white/10 group"
+                        @click="goToAlbumDetail(album.id)">
+
+                        <!-- Album Cover Placeholder -->
+                        <div v-if="album.cover_asset_id"
+                            class="aspect-video w-full bg-slate-800 rounded-xl flex items-center justify-center overflow-hidden border border-white/5">
+                            <Image :src="API_URL + '/assets/' + album.cover_asset_id + '?thumbnail=true'" preview
+                                class="w-full h-full object-cover" imageClass="w-full h-full object-cover"
+                                @click.stop />
+                        </div>
+                        <div v-else
+                            class="aspect-video w-full bg-slate-800 rounded-xl flex items-center justify-center overflow-hidden border border-white/5">
+                            <i
+                                class="pi pi-images text-4xl text-slate-600 group-hover:text-slate-400 transition-colors"></i>
+                        </div>
+
+                        <div>
+                            <h3 class="m-0 mb-1 text-xl font-semibold truncate">{{ album.name }}</h3>
+                            <p class="m-0 text-sm text-slate-400 line-clamp-2 min-h-[2.5em]">
+                                {{ album.description || 'No description' }}
+                            </p>
+                            <div class="mt-3 flex items-center text-xs text-slate-500">
+                                <i class="pi pi-image mr-1"></i>
+                                <span>{{ album.generation_ids?.length || 0 }} items</span>
+                            </div>
+                        </div>
+                    </div>
                </div>
            </div>
        </div>
@@ -216,6 +379,28 @@ const formatDate = (dateString: string) => {
                </div>
            </div>
        </Dialog>
+
+        <!-- Create Album Dialog -->
+        <Dialog v-model:visible="showCreateDialog" modal header="Create New Album" :style="{ width: '500px' }"
+            :breakpoints="{ '960px': '75vw', '641px': '90vw' }" class="p-dialog-custom">
+            <div class="flex flex-col gap-4 pt-4">
+                <div class="flex flex-col gap-2">
+                    <label for="name" class="font-semibold">Name</label>
+                    <InputText id="name" v-model="newAlbum.name" class="w-full" placeholder="My Awesome Album"
+                        autofocus />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="description" class="font-semibold">Description</label>
+                    <Textarea id="description" v-model="newAlbum.description" rows="3" class="w-full"
+                        placeholder="Optional description..." />
+                </div>
+            </div>
+            <template #footer>
+                <Button label="Cancel" icon="pi pi-times" @click="showCreateDialog = false" text />
+                <Button label="Create" icon="pi pi-check" @click="createAlbum" :loading="submittingAlbum" autofocus />
+            </template>
+        </Dialog>
+
        <ConfirmDialog></ConfirmDialog>
        <Toast />
    </div>
--- a/src/views/CharactersView.vue
+++ b/src/views/CharactersView.vue
@@ -3,38 +3,135 @@ import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { dataService } from '../services/dataService'
 import Skeleton from 'primevue/skeleton'
+import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
+import InputText from 'primevue/inputtext'
+import Textarea from 'primevue/textarea'
+import ConfirmDialog from 'primevue/confirmdialog'
+import Toast from 'primevue/toast'
+import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'

 const router = useRouter()
+const confirm = useConfirm()
+const toast = useToast()
+
 const characters = ref([])
 const loading = ref(true)
+const showCreateDialog = ref(false)
+const creating = ref(false)
+const newCharacter = ref({
+    name: '',
+    character_bio: '',
+    avatar_image: '' // Optional for now
+})
+
 const API_URL = import.meta.env.VITE_API_URL

 onMounted(async () => {
+    await fetchCharacters()
+})
+
+const fetchCharacters = async () => {
    loading.value = true
    try {
        characters.value = await dataService.getCharacters()
    } catch (e) {
        console.error('Failed to load characters', e)
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to load characters', life: 3000 })
    } finally {
        loading.value = false
    }
-})
+}

 const goToDetail = (id) => {
    router.push({ name: 'character-detail', params: { id } })
 }

+const selectedAvatarFile = ref(null)

+const onFileSelect = (event) => {
+    const file = event.target.files[0]
+    if (file) {
+        selectedAvatarFile.value = file
+    }
+}
+
+const openCreateDialog = () => {
+    newCharacter.value = { name: '', character_bio: '', avatar_image: '' }
+    selectedAvatarFile.value = null
+    showCreateDialog.value = true
+}
+
+const createCharacter = async () => {
+    if (!newCharacter.value.name.trim()) return
+
+    creating.value = true
+    try {
+        // Upload avatar if selected
+        if (selectedAvatarFile.value) {
+            const uploadResult = await dataService.uploadAsset(selectedAvatarFile.value)
+            // Assuming uploadAsset returns object with 'url' or 'path' or similar. 
+            // The dataService.uploadAsset returns response.data. 
+            // Let's assume response.data has 'url' or is the url string? 
+            // Checking dataService.js: returns response.data. usage in other places implies it might be the asset object.
+            // Let's check typical asset response. It likely has 'url' or 'file_path'.
+            // I'll assume it returns an Asset object and I should use its url.
+            if (uploadResult && uploadResult.url) {
+                newCharacter.value.avatar_image = uploadResult.url
+            } else if (uploadResult && uploadResult.file_path) {
+                newCharacter.value.avatar_image = uploadResult.file_path
+            }
+        }
+
+        await dataService.createCharacter(newCharacter.value)
+        toast.add({ severity: 'success', summary: 'Success', detail: 'Character created', life: 3000 })
+        showCreateDialog.value = false
+        await fetchCharacters()
+    } catch (e) {
+        console.error('Failed to create character', e)
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to create character', life: 3000 })
+    } finally {
+        creating.value = false
+    }
+}
+
+const confirmDelete = (event, id) => {
+    event.stopPropagation() // Prevent card click
+    confirm.require({
+        message: 'Are you sure you want to delete this character?',
+        header: 'Delete Confirmation',
+        icon: 'pi pi-exclamation-triangle',
+        acceptClass: 'p-button-danger',
+        rejectClass: 'p-button-secondary',
+        acceptLabel: 'Delete',
+        rejectLabel: 'Cancel',
+        accept: async () => {
+            try {
+                await dataService.deleteCharacter(id)
+                toast.add({ severity: 'success', summary: 'Success', detail: 'Character deleted', life: 3000 })
+                await fetchCharacters()
+            } catch (e) {
+                console.error('Failed to delete character', e)
+                toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to delete character', life: 3000 })
+            }
+        }
+    })
+}
 </script>

 <template>
-    <div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100">
+    <div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100 relative">
+        <Toast />
+        <ConfirmDialog />
+
        <!-- Top Bar -->
        <header class="flex justify-between items-end mb-8">
            <div>
                <h1 class="text-4xl font-bold m-0">Characters</h1>
                <p class="mt-2 mb-0 text-slate-400">Manage your AI personas</p>
            </div>
+            <Button label="Create Character" icon="pi pi-plus" @click="openCreateDialog" />
        </header>

        <!-- Loading State -->
@@ -51,20 +148,55 @@ const goToDetail = (id) => {
        <!-- Characters Grid -->
        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div v-for="char in characters" :key="char.id"
-                class="glass-panel rounded-2xl p-6 flex items-center gap-6 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-white/5 hover:border-white/10"
+                class="glass-panel rounded-2xl p-6 flex items-center gap-6 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-white/5 hover:border-white/10 relative group"
                @click="goToDetail(char.id)">
-                <div class="w-20 h-20 rounded-full overflow-hidden flex-shrink-0 border-3 border-white/10">
-                    <img :src="API_URL + char.avatar_image || 'https://via.placeholder.com/150'" :alt="char.name"
+
+                <!-- Delete Button (Visible on Hover) -->
+                <button
+                    class="absolute top-2 right-2 p-2 rounded-full hover:bg-red-500/20 text-slate-400 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-all z-10"
+                    @click="(e) => confirmDelete(e, char.id)" title="Delete Character">
+                    <i class="pi pi-trash"></i>
+                </button>
+
+                <div class="w-20 h-20 rounded-full overflow-hidden flex-shrink-0 border-3 border-white/10 bg-slate-800">
+                    <img v-if="char.avatar_image" :src="API_URL + char.avatar_image" :alt="char.name"
                        class="w-full h-full object-cover" />
+                    <div v-else class="w-full h-full flex items-center justify-center text-slate-500">
+                        <i class="pi pi-user text-2xl"></i>
+                    </div>
                </div>
                <div class="flex-1 overflow-hidden">
-                    <h3 class="m-0 mb-2 text-xl font-semibold">{{ char.name }}</h3>
+                    <h3 class="m-0 mb-2 text-xl font-semibold truncate pr-6">{{ char.name }}</h3>
                    <p class="m-0 text-sm text-slate-400 line-clamp-2">
-                        {{ char.character_bio }}
+                        {{ char.character_bio || 'No bio provided.' }}
                    </p>
                </div>
            </div>
        </div>
+
+        <!-- Create Character Dialog -->
+        <Dialog v-model:visible="showCreateDialog" modal header="Create New Character" :style="{ width: '30rem' }">
+            <div class="flex flex-col gap-4 pt-4">
+                <div class="flex flex-col gap-2">
+                    <label class="font-semibold">Avatar</label>
+                    <input type="file" accept="image/*" @change="onFileSelect"
+                        class="text-slate-300 text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-500/10 file:text-violet-400 hover:file:bg-violet-500/20 file:cursor-pointer" />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="name" class="font-semibold">Name</label>
+                    <InputText id="name" v-model="newCharacter.name" class="w-full" autofocus />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="bio" class="font-semibold">Bio</label>
+                    <Textarea id="bio" v-model="newCharacter.character_bio" rows="3" class="w-full" />
+                </div>
+            </div>
+            <template #footer>
+                <Button label="Cancel" text severity="secondary" @click="showCreateDialog = false" />
+                <Button label="Create" icon="pi pi-check" @click="createCharacter" :loading="creating"
+                    :disabled="!newCharacter.name.trim()" />
+            </template>
+        </Dialog>
    </div>
 </template>

--- a/src/views/FlexibleGenerationView.vue
+++ b/src/views/FlexibleGenerationView.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, watch, computed } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { dataService } from '../services/dataService'
 import { aiService } from '../services/aiService'
@@ -13,15 +13,22 @@ import MultiSelect from 'primevue/multiselect'
 import ProgressSpinner from 'primevue/progressspinner'
 import ProgressBar from 'primevue/progressbar'
 import Message from 'primevue/message'
+
 import Skeleton from 'primevue/skeleton'
+import { useAlbumStore } from '../stores/albums'

 const router = useRouter()
 const API_URL = import.meta.env.VITE_API_URL
+const albumStore = useAlbumStore()

 // --- State ---
 const prompt = ref('')
 const selectedCharacter = ref(null)
 const selectedAssets = ref([])
+// Album Picker State
+const isAlbumPickerVisible = ref(false)
+const generationToAdd = ref(null)
+const selectedAlbumForAdd = ref(null)
 // Asset Picker State
 const isAssetPickerVisible = ref(false)
 const assetPickerTab = ref('all') // 'all', 'uploaded', 'generated'
@@ -30,6 +37,7 @@ const isModalLoading = ref(false)
 const tempSelectedAssets = ref([])
 const quality = ref({ key: 'TWOK', value: '2K' })
 const aspectRatio = ref({ key: "NINESIXTEEN", value: "9:16" })
+const generationCount = ref(1)
 const sendToTelegram = ref(false)
 const telegramId = ref('')
 const isTelegramIdSaved = ref(false)
@@ -45,12 +53,9 @@ const historyRows = ref(50)
 const historyFirst = ref(0)

 const isSettingsVisible = ref(false)
-const isGenerating = ref(false)
-const generationStatus = ref('')
-const generationProgress = ref(0)
-const generationError = ref(null)
-const generatedResult = ref(null) // For immediate feedback if needed
+const isSubmitting = ref(false)
 const activeOverlayId = ref(null) // For mobile tap-to-show overlay
+const filterCharacter = ref(null) // Character filter for gallery

 // Options
 const qualityOptions = ref([
@@ -77,7 +82,8 @@ const saveSettings = () => {
        aspectRatio: aspectRatio.value,
        sendToTelegram: sendToTelegram.value,
        telegramId: telegramId.value,
-        useProfileImage: useProfileImage.value
+        useProfileImage: useProfileImage.value,
+        generationCount: generationCount.value
    }
    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))

@@ -103,6 +109,7 @@ const restoreSettings = () => {
            telegramId.value = settings.telegramId || localStorage.getItem('telegram_id') || ''
            if (telegramId.value) isTelegramIdSaved.value = true
            if (settings.useProfileImage !== undefined) useProfileImage.value = settings.useProfileImage
+            if (settings.generationCount) generationCount.value = Math.min(settings.generationCount, 4)

            return settings // Return to use in loadData
        } catch (e) {
@@ -113,10 +120,18 @@ const restoreSettings = () => {
 }

 // Watchers for auto-save
-watch([prompt, selectedCharacter, selectedAssets, quality, aspectRatio, sendToTelegram, telegramId, useProfileImage], () => {
+watch([prompt, selectedCharacter, selectedAssets, quality, aspectRatio, sendToTelegram, telegramId, useProfileImage, generationCount], () => {
    saveSettings()
 }, { deep: true })

+// Watcher for character filter — reload history when filter changes
+watch(filterCharacter, async () => {
+    historyGenerations.value = []
+    historyTotal.value = 0
+    historyFirst.value = 0
+    await refreshHistory()
+})
+

 // --- Data Loading ---
 const loadData = async () => {
@@ -124,7 +139,7 @@ const loadData = async () => {
        const [charsRes, assetsRes, historyRes] = await Promise.all([
            dataService.getCharacters(), // Assuming this exists and returns list
            dataService.getAssets(100, 0, 'all'), // Load a batch of assets
-            aiService.getGenerations(historyRows.value, historyFirst.value)
+            aiService.getGenerations(historyRows.value, historyFirst.value, filterCharacter.value?.id)
        ])

        // Characters
@@ -141,6 +156,32 @@ const loadData = async () => {
        if (historyRes && historyRes.generations) {
            historyGenerations.value = historyRes.generations
            historyTotal.value = historyRes.total_count || 0
+
+            // Resume polling for unfinished generations
+            // Resume polling for unfinished generations
+            const threeMinutesAgo = Date.now() - 3 * 60 * 1000
+
+            historyGenerations.value.forEach(gen => {
+                const status = gen.status ? gen.status.toLowerCase() : ''
+                const isActive = ['processing', 'starting', 'running'].includes(status)
+
+                let isRecent = true
+                if (gen.created_at) {
+                    // Force UTC if missing timezone info (simple heuristic)
+                    let timeStr = gen.created_at
+                    if (timeStr.indexOf('Z') === -1 && timeStr.indexOf('+') === -1) {
+                        timeStr += 'Z'
+                    }
+                    const createdTime = new Date(timeStr).getTime()
+                    if (!isNaN(createdTime)) {
+                        isRecent = createdTime > threeMinutesAgo
+                    }
+                }
+
+                if (isActive && isRecent) {
+                    pollGeneration(gen.id)
+                }
+            })
        } else {
            historyGenerations.value = Array.isArray(historyRes) ? historyRes : []
            historyTotal.value = historyGenerations.value.length
@@ -168,7 +209,7 @@ const loadData = async () => {

 const refreshHistory = async () => {
    try {
-        const response = await aiService.getGenerations(historyRows.value, 0)
+        const response = await aiService.getGenerations(historyRows.value, 0, filterCharacter.value?.id)
        if (response && response.generations) {
            // Update existing items and add new ones at the top
            const newGenerations = []
@@ -176,7 +217,12 @@ const refreshHistory = async () => {
                const existingIndex = historyGenerations.value.findIndex(g => g.id === gen.id)
                if (existingIndex !== -1) {
                    // Update existing item in place to preserve state/reactivity
-                    Object.assign(historyGenerations.value[existingIndex], gen)
+                    // Only update if not currently polling to avoid race conditions, 
+                    // or just update fields that might change
+                    const existing = historyGenerations.value[existingIndex]
+                    if (!['processing', 'starting', 'running'].includes(existing.status)) {
+                        Object.assign(existing, gen)
+                    }
                } else {
                    newGenerations.push(gen)
                }
@@ -195,7 +241,6 @@ const refreshHistory = async () => {
 }


-
 // --- Generation ---
 const handleGenerate = async () => {
    if (!prompt.value.trim()) return
@@ -205,10 +250,7 @@ const handleGenerate = async () => {
        return
    }

-    isGenerating.value = true
-    generationError.value = null
-    generationStatus.value = 'starting'
-    generationProgress.value = 0
+    isSubmitting.value = true

    // Close settings to show gallery/progress (optional preference)
    // isSettingsVisible.value = false 
@@ -221,71 +263,232 @@ const handleGenerate = async () => {
            assets_list: selectedAssets.value.map(a => a.id),
            linked_character_id: selectedCharacter.value?.id || null,
            telegram_id: sendToTelegram.value ? telegramId.value : null,
-            use_profile_image: selectedCharacter.value ? useProfileImage.value : false
+            use_profile_image: selectedCharacter.value ? useProfileImage.value : false,
+            count: generationCount.value
        }

        const response = await aiService.runGeneration(payload)

-        if (response && response.id) {
-            pollStatus(response.id)
+        // Response can be a single generation, an array, or a Group response with 'generations'
+        let generations = []
+        if (response && response.generations) {
+            generations = response.generations
+        } else if (Array.isArray(response)) {
+            generations = response
        } else {
-            // Immediate result
-            isGenerating.value = false
-            loadHistory() // Refresh gallery
+            generations = [response]
        }
+
+        for (const gen of generations) {
+            if (gen && gen.id) {
+                const newGen = {
+                    id: gen.id,
+                    prompt: prompt.value,
+                    status: gen.status || 'starting',
+                    created_at: new Date().toISOString(),
+                    generation_group_id: gen.generation_group_id || null,
+                }
+
+                historyGenerations.value.unshift(newGen)
+                historyTotal.value++
+
+                pollGeneration(gen.id)
+            }
+        }
+
+        // Refresh history after a short delay to get full generation data from server
+        setTimeout(() => refreshHistory(), 2000)
    } catch (e) {
        console.error('Generation failed', e)
-        generationError.value = e.message || 'Generation failed'
-        isGenerating.value = false
+        alert(e.message || 'Generation failed to start')
+    } finally {
+        isSubmitting.value = false
    }
 }

-const pollStatus = async (id) => {
+const pollGeneration = async (id) => {
    let completed = false
-    while (!completed && isGenerating.value) {
+    let attempts = 0
+    // Find the generation object in our list to update it specifically
+    const genIndex = historyGenerations.value.findIndex(g => g.id === id)
+    if (genIndex === -1) return // Should not happen if we just added it
+
+    const gen = historyGenerations.value[genIndex]
+
+    while (!completed) {
        try {
            const response = await aiService.getGenerationStatus(id)
-            generationStatus.value = response.status
-            generationProgress.value = response.progress || 0

-            if (response.status === 'done') {
-                completed = true
+            // Update the object in the list
+            // We use Object.assign to keep the reactive reference valid
+            Object.assign(gen, response)

-                // Refresh history to show new item without resetting list
-                await refreshHistory()
-            } else if (response.status === 'failed') {
+            if (response.status === 'done' || response.status === 'failed') {
                completed = true
-                generationError.value = response.failed_reason || 'Generation failed'
-                throw new Error(generationError.value)
            } else {
+                // Exponential backoff or fixed interval
                await new Promise(resolve => setTimeout(resolve, 2000))
            }
        } catch (e) {
-            console.error('Polling failed', e)
-            completed = true
-            isGenerating.value = false
+            console.error(`Polling failed for ${id}`, e)
+            attempts++
+            if (attempts > 3) {
+                completed = true
+                gen.status = 'failed'
+                gen.failed_reason = 'Polling connection lost'
+            }
+            await new Promise(resolve => setTimeout(resolve, 5000))
        }
    }
-    isGenerating.value = false
+}
+
+// --- Infinite Scroll ---
+const isHistoryLoading = ref(false)
+const infiniteScrollTrigger = ref(null)
+let observer = null
+
+const setupInfiniteScroll = () => {
+    observer = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting && !isHistoryLoading.value && historyGenerations.value.length < historyTotal.value) {
+            loadMoreHistory()
+        }
+    }, {
+        root: null,
+        rootMargin: '100px',
+        threshold: 0.1
+    })
+
+    if (infiniteScrollTrigger.value) {
+        observer.observe(infiniteScrollTrigger.value)
+    }
+}
+
+const loadMoreHistory = async () => {
+    if (isHistoryLoading.value) return
+    isHistoryLoading.value = true
+
+    try {
+        const nextOffset = historyGenerations.value.length
+        const response = await aiService.getGenerations(historyRows.value, nextOffset, filterCharacter.value?.id)
+
+        if (response && response.generations) {
+            const newGenerations = response.generations.filter(gen =>
+                !historyGenerations.value.some(existing => existing.id === gen.id)
+            )
+            historyGenerations.value.push(...newGenerations)
+            historyTotal.value = response.total_count || historyTotal.value
+        }
+    } catch (e) {
+        console.error('Failed to load more history', e)
+    } finally {
+        isHistoryLoading.value = false
+    }
 }

 // --- Initial Load ---
 onMounted(() => {
-    loadData()
+    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,
+                    genId: gen.id,
+                    prompt: gen.prompt
+                })
+            }
+        }
+    }
+    return images
+})
+
 const openImagePreview = (url) => {
-    previewImage.value = { url }
+    // Find index of this image in the flat list
+    const idx = allPreviewImages.value.findIndex(img => img.url === url)
+    previewIndex.value = idx >= 0 ? idx : 0
+    previewImage.value = allPreviewImages.value[previewIndex.value] || { url }
    isImagePreviewVisible.value = true
 }

+const navigatePreview = (direction) => {
+    const images = allPreviewImages.value
+    if (images.length === 0) return
+    let newIndex = previewIndex.value + direction
+    if (newIndex < 0) newIndex = images.length - 1
+    if (newIndex >= images.length) newIndex = 0
+    previewIndex.value = newIndex
+    previewImage.value = images[newIndex]
+}
+
+const onPreviewKeydown = (e) => {
+    if (!isImagePreviewVisible.value) return
+    if (e.key === 'ArrowLeft') {
+        e.preventDefault()
+        navigatePreview(-1)
+    } else if (e.key === 'ArrowRight') {
+        e.preventDefault()
+        navigatePreview(1)
+    } else if (e.key === 'Escape') {
+        isImagePreviewVisible.value = false
+    }
+}
+
+watch(isImagePreviewVisible, (visible) => {
+    if (visible) {
+        window.addEventListener('keydown', onPreviewKeydown)
+    } else {
+        window.removeEventListener('keydown', onPreviewKeydown)
+    }
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('keydown', onPreviewKeydown)
+})
+
 const reusePrompt = (gen) => {
    if (gen.prompt) {
        prompt.value = gen.prompt
@@ -437,6 +640,54 @@ watch(assetPickerTab, () => {
    }
 })

+// --- Asset Upload in Picker ---
+const assetPickerFileInput = ref(null)
+
+const triggerAssetPickerUpload = () => {
+    assetPickerFileInput.value?.click()
+}
+
+const handleAssetPickerUpload = async (event) => {
+    const target = event.target
+    if (target.files && target.files[0]) {
+        const file = target.files[0]
+        try {
+            isModalLoading.value = true
+            await dataService.uploadAsset(file)
+
+            // Switch tab to 'uploaded' and reload
+            assetPickerTab.value = 'uploaded'
+            loadModalAssets()
+
+        } catch (e) {
+            console.error('Failed to upload asset', e)
+        } finally {
+            isModalLoading.value = false
+            target.value = ''
+        }
+    }
+}
+
+// --- Album Picker Logic ---
+const openAlbumPicker = (gen) => {
+    generationToAdd.value = gen
+    isAlbumPickerVisible.value = true
+    albumStore.fetchAlbums() // Fetch albums when opening picker
+}
+
+const confirmAddToAlbum = async () => {
+    if (!generationToAdd.value || !selectedAlbumForAdd.value) return
+
+    try {
+        await albumStore.addGenerationToAlbum(selectedAlbumForAdd.value.id, generationToAdd.value.id)
+        isAlbumPickerVisible.value = false
+        selectedAlbumForAdd.value = null
+        generationToAdd.value = null
+        // Optional: Show success toast
+    } catch (e) {
+        console.error('Failed to add to album', e)
+    }
+}
 </script>

 <template>
@@ -448,9 +699,36 @@ watch(assetPickerTab, () => {
                    <h1
                        class="text-xl 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>
                </div>
                <div class="flex items-center gap-2">
+                    <Dropdown v-model="filterCharacter" :options="characters" optionLabel="name"
+                        placeholder="All Characters" showClear
+                        class="!w-48 !bg-slate-800/60 !border-white/10 !text-white !rounded-xl !text-sm" :pt="{
+                            root: { class: '!bg-slate-800/60 !h-8' },
+                            input: { class: '!text-white !text-xs !py-1 !px-2' },
+                            trigger: { class: '!text-slate-400 !w-6' },
+                            panel: { class: '!bg-slate-800 !border-white/10' },
+                            item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white !text-xs !py-1.5' },
+                            clearIcon: { class: '!text-slate-400 hover:!text-white' }
+                        }">
+                        <template #value="slotProps">
+                            <div v-if="slotProps.value" class="flex items-center gap-1.5">
+                                <img v-if="slotProps.value.avatar_image" :src="API_URL + slotProps.value.avatar_image"
+                                    class="w-5 h-5 rounded-full object-cover" />
+                                <span class="text-xs">{{ slotProps.value.name }}</span>
+                            </div>
+                            <span v-else class="text-xs text-slate-400">{{ slotProps.placeholder }}</span>
+                        </template>
+                        <template #option="slotProps">
+                            <div class="flex items-center gap-2">
+                                <img v-if="slotProps.option.avatar_image" :src="API_URL + slotProps.option.avatar_image"
+                                    class="w-6 h-6 rounded-full object-cover" />
+                                <span>{{ slotProps.option.name }}</span>
+                            </div>
+                        </template>
+                    </Dropdown>
                    <Button icon="pi pi-refresh" @click="refreshHistory" rounded text
                        class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8 md:hidden" />
                    <Button icon="pi pi-cog" @click="isSettingsVisible = true" rounded text
@@ -462,80 +740,251 @@ watch(assetPickerTab, () => {
                :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"
-                        class="aspect-[9/16] relative group 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'"
-                            class="w-full h-full object-cover cursor-pointer"
-                            @click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
-
-                        <div v-else-if="gen.status === 'failed'"
-                            class="w-full h-full flex flex-col items-center justify-center p-2 text-center bg-red-500/10 border border-red-500/20">
-                            <i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
-                            <span class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
-                            <span v-if="gen.failed_reason"
-                                class="text-[8px] text-red-300/70 mt-1 line-clamp-2 leading-tight"
-                                v-tooltip.top="gen.failed_reason">{{ gen.failed_reason }}</span>
-                        </div>
-
-                        <div v-else-if="gen.status === 'processing' || gen.status === 'starting'"
-                            class="w-full h-full flex flex-col items-center justify-center bg-slate-800/50 border border-violet-500/20">
-                            <i class="pi pi-spin pi-spinner text-violet-500 text-xl mb-2"></i>
-                            <span class="text-[10px] text-violet-300/70">Creating...</span>
-                        </div>
-
-                        <div v-else class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
-                            <i class="pi pi-image text-4xl opacity-20"></i>
-                        </div>
-
-                        <div class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2"
-                            :class="{ 'opacity-0 group-hover:opacity-100': activeOverlayId !== gen.id, 'opacity-100': activeOverlayId === gen.id }">
+                    <div v-for="item in groupedHistoryGenerations" :key="item.id"
+                        class="aspect-[9/16] relative overflow-hidden bg-slate-800 transition-all duration-300">

+                        <!-- ============================================ -->
+                        <!-- GROUPED GENERATION (multiple in one slot)    -->
+                        <!-- ============================================ -->
+                        <template v-if="item.isGroup">
+                            <!-- Group badge -->
                            <div
-                                class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
-                                <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
-                                    class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
-                                    @click.stop="deleteGeneration(gen)" />
+                                class="absolute top-1.5 left-1.5 z-20 bg-violet-600/80 backdrop-blur-sm text-white text-[9px] font-bold px-1.5 py-0.5 rounded-md pointer-events-none">
+                                {{ item.children.length }}x
+                            </div>

-                                <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)" />
+                            <div class="w-full h-full grid gap-0.5"
+                                :class="item.children.length <= 2 ? 'grid-cols-1' : 'grid-cols-2'">
+                                <div v-for="child in item.children" :key="child.id"
+                                    class="relative group overflow-hidden" @click="toggleMobileOverlay(child.id)">
+
+                                    <!-- Child: has result -->
+                                    <img v-if="child.result_list && child.result_list.length > 0"
+                                        :src="API_URL + '/assets/' + child.result_list[0] + '?thumbnail=true'"
+                                        class="w-full h-full object-cover" />
+
+                                    <!-- Child: processing -->
+                                    <div v-else-if="['processing', 'starting', 'running'].includes(child.status)"
+                                        class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50">
+                                        <div
+                                            class="absolute inset-0 bg-gradient-to-tr from-violet-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
+                                        </div>
+                                        <div
+                                            class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
+                                        </div>
+                                        <i class="pi pi-spin pi-spinner text-violet-500 text-sm relative z-10"></i>
+                                    </div>
+
+                                    <!-- Child: FAILED -->
+                                    <div v-else-if="child.status === 'failed'"
+                                        class="w-full h-full flex flex-col items-center justify-center bg-red-500/10 relative group p-2 text-center"
+                                        v-tooltip.bottom="item.children.length > 1 ? (child.failed_reason || 'Generation failed') : null">
+                                        <i class="pi pi-times-circle text-red-500 text-lg mb-0.5"></i>
+                                        <span
+                                            class="text-[8px] font-bold text-red-400 uppercase tracking-wide leading-tight">Failed</span>
+
+                                        <!-- Show error text if only 1 child -->
+                                        <span v-if="item.children.length === 1 && child.failed_reason"
+                                            class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight">
+                                            {{ child.failed_reason }}
+                                        </span>
+
+                                        <!-- Delete Persistent for failed child -->
+                                        <div class="absolute top-0 right-0 p-1 z-10">
+                                            <Button icon="pi pi-trash" size="small"
+                                                class="!w-5 !h-5 !rounded-full !bg-red-500/20 !border-none !text-red-400 !text-[8px] hover:!bg-red-500 hover:!text-white pointer-events-auto"
+                                                @click.stop="deleteGeneration(child)" />
+                                        </div>
+                                    </div>
+
+                                    <!-- Child: other -->
+                                    <div v-else class="w-full h-full flex items-center justify-center bg-slate-800">
+                                        <i class="pi pi-image text-lg opacity-20 text-slate-600"></i>
+                                    </div>
+
+                                    <!-- SUCCESS overlay per child (hover) -->
+                                    <div v-if="child.result_list && child.result_list.length > 0"
+                                        class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-1 z-10"
+                                        :class="{ 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto': activeOverlayId !== child.id, 'opacity-100 pointer-events-auto': activeOverlayId === child.id }">
+
+                                        <!-- Top right: edit, album, delete -->
+                                        <div class="flex justify-end items-start gap-0.5">
+                                            <Button icon="pi pi-pencil" size="small"
+                                                class="!w-5 !h-5 !rounded-full !bg-white/20 !border-none !text-white !text-[8px] hover:!bg-violet-500"
+                                                @click.stop="useResultAsAsset(child)" />
+                                            <Button icon="pi pi-folder-plus" size="small"
+                                                class="!w-5 !h-5 !rounded-full !bg-white/20 !border-none !text-white !text-[8px] hover:!bg-violet-500"
+                                                @click.stop="openAlbumPicker(child)" />
+                                            <Button icon="pi pi-trash" size="small"
+                                                class="!w-5 !h-5 !rounded-full !bg-red-500/20 !border-none !text-red-400 !text-[8px] hover:!bg-red-500 hover:!text-white"
+                                                @click.stop="deleteGeneration(child)" />
+                                        </div>
+
+                                        <!-- Center: view button + cost -->
+                                        <div
+                                            class="flex-1 flex flex-col items-center justify-center pointer-events-none">
+                                            <span class="text-[8px] font-bold text-slate-300 font-mono mb-1">{{
+                                                child.cost }} $</span>
+                                            <Button icon="pi pi-eye" rounded text
+                                                class="!bg-black/50 !text-white !w-8 !h-8 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border !border-white/20"
+                                                @click.stop="openImagePreview(API_URL + '/assets/' + child.result_list[0])" />
+                                        </div>
+
+                                        <!-- Bottom: reuse prompt + reuse assets -->
+                                        <div class="flex gap-0.5">
+                                            <Button icon="pi pi-comment" size="small"
+                                                class="!w-5 !h-5 flex-1 !bg-white/10 !border-white/10 !text-slate-200 !text-[8px] hover:!bg-white/20"
+                                                @click.stop="reusePrompt(child)" />
+                                            <Button icon="pi pi-images" size="small"
+                                                class="!w-5 !h-5 flex-1 !bg-white/10 !border-white/10 !text-slate-200 !text-[8px] hover:!bg-white/20"
+                                                @click.stop="reuseAsset(child)" />
+                                        </div>
+                                    </div>
                                </div>
                            </div>
+                        </template>

-                            <!-- Centered View Button -->
-                            <div v-if="gen.result_list && gen.result_list.length > 0"
-                                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>
+                        <!-- ============================================ -->
+                        <!-- SINGLE GENERATION (full slot)                -->
+                        <!-- ============================================ -->
+                        <template v-else>
+                            <div class="w-full h-full relative group" @click="toggleMobileOverlay(item.id)">

-                            <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)" />
+                                <!-- SUCCESS: image -->
+                                <img v-if="item.result_list && item.result_list.length > 0"
+                                    :src="API_URL + '/assets/' + item.result_list[0] + '?thumbnail=true'"
+                                    class="w-full h-full object-cover cursor-pointer"
+                                    @click.stop="openImagePreview(API_URL + '/assets/' + item.result_list[0])" />
+
+                                <!-- FAILED: error display -->
+                                <div v-else-if="item.status === 'failed'"
+                                    class="w-full h-full flex flex-col items-center justify-between p-3 text-center bg-red-500/10 border border-red-500/20 relative group">
+
+                                    <!-- Top Right: Delete (Persistent) -->
+                                    <div class="w-full flex justify-end">
+                                        <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
+                                            class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white z-10"
+                                            @click.stop="deleteGeneration(item)" />
+                                    </div>
+
+                                    <!-- Center: Error Info -->
+                                    <div class="flex flex-col items-center justify-center flex-1">
+                                        <i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
+                                        <span
+                                            class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
+                                        <span v-if="item.failed_reason"
+                                            class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight"
+                                            v-tooltip.top="item.failed_reason">{{ item.failed_reason }}</span>
+                                    </div>
+
+                                    <!-- Bottom: Reuse Buttons (Persistent) -->
+                                    <div class="w-full flex gap-1 z-10">
+                                        <Button icon="pi pi-comment" v-tooltip.bottom="'Reuse Prompt'"
+                                            class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
+                                            @click.stop="reusePrompt(item)" />
+                                        <Button icon="pi pi-images" v-tooltip.bottom="'Reuse Assets'"
+                                            class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
+                                            @click.stop="reuseAsset(item)" />
+                                    </div>
+                                </div>
+
+                                <!-- PROCESSING -->
+                                <div v-else-if="['processing', 'starting', 'running'].includes(item.status)"
+                                    class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50 border border-violet-500/20">
+                                    <div
+                                        class="absolute inset-0 bg-gradient-to-tr from-violet-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
+                                    </div>
+                                    <div
+                                        class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
+                                    </div>
+                                    <i class="pi pi-spin pi-spinner text-violet-500 text-xl mb-2 relative z-10"></i>
+                                    <span class="text-[10px] text-violet-300/70 relative z-10 capitalize">{{ item.status
+                                    }}...</span>
+                                    <span v-if="item.progress"
+                                        class="text-[9px] text-violet-400/60 font-mono mt-1 relative z-10">{{
+                                            item.progress }}%</span>
+                                </div>
+
+                                <!-- EMPTY -->
+                                <div v-else
+                                    class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
+                                    <i class="pi pi-image text-4xl opacity-20"></i>
+                                </div>
+
+                                <!-- HOVER OVERLAY (for successful single gen state only) -->
+                                <div v-if="item.result_list && item.result_list.length > 0"
+                                    class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2 z-10"
+                                    :class="{ 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto': activeOverlayId !== item.id, 'opacity-100 pointer-events-auto': activeOverlayId === item.id }">
+
+                                    <!-- Top Right: buttons -->
+                                    <div
+                                        class="flex justify-end items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
+                                        <div class="flex gap-1">
+                                            <Button v-if="item.result_list && item.result_list.length > 0"
+                                                icon="pi pi-pencil" v-tooltip.left="'Edit (Use Result)'"
+                                                class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
+                                                @click.stop="useResultAsAsset(item)" />
+                                            <Button icon="pi pi-folder-plus" v-tooltip.left="'Add to Album'"
+                                                class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
+                                                @click.stop="openAlbumPicker(item)" />
+                                            <Button icon="pi pi-trash" v-tooltip.left="'Delete'"
+                                                class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
+                                                @click.stop="deleteGeneration(item)" />
+                                        </div>
+                                    </div>
+
+                                    <!-- Center: View button + Cost/Time -->
+                                    <div
+                                        class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none z-0">
+                                        <!-- Cost & Time -->
+                                        <div class="flex flex-col items-center gap-0.5 mb-2 pointer-events-none">
+                                            <span
+                                                class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
+                                                    item.cost }} $</span>
+                                            <span v-if="item.execution_time_seconds"
+                                                class="text-[8px] text-slate-500 font-mono">{{
+                                                    item.execution_time_seconds.toFixed(1) }}s</span>
+                                        </div>
+                                        <!-- View Button -->
+                                        <Button icon="pi pi-eye" rounded text
+                                            class="!bg-black/50 !text-white !w-12 !h-12 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border-2 !border-white/20"
+                                            @click.stop="openImagePreview(API_URL + '/assets/' + item.result_list[0])" />
+                                    </div>
+
+                                    <!-- Bottom: reuse buttons -->
+                                    <div
+                                        class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200 z-10">
+                                        <div class="flex gap-1 mb-1">
+                                            <Button icon="pi pi-comment" v-tooltip.bottom="'Reuse Prompt'"
+                                                class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
+                                                @click.stop="reusePrompt(item)" />
+                                            <Button icon="pi pi-images" v-tooltip.bottom="'Reuse Assets'"
+                                                class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
+                                                @click.stop="reuseAsset(item)" />
+                                        </div>
+                                        <p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ item.prompt
+                                        }}</p>
+                                    </div>
                                </div>
-                                <p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ gen.prompt }}</p>
                            </div>
-                        </div>
+                        </template>
                    </div>
                </div>

-                <div v-else-if="!isGenerating"
+                <div v-else-if="!isSubmitting && historyGenerations.length === 0"
                    class="flex flex-col items-center justify-center h-full text-slate-600 opacity-50">
                    <i class="pi pi-images text-6xl mb-4"></i>
                    <p class="text-xl">Your creations will appear here</p>
                </div>
+
+                <!-- Infinite Scroll Sentinel & Loading Indicator -->
+                <div ref="infiniteScrollTrigger" class="w-full py-4 flex justify-center items-center min-h-[50px]">
+                    <i v-if="isHistoryLoading" class="pi pi-spin pi-spinner text-violet-500 text-2xl"></i>
+                    <span v-else-if="historyGenerations.length > 0 && historyGenerations.length >= historyTotal"
+                        class="text-slate-600 text-xs">
+                        All items loaded
+                    </span>
+                </div>
            </div>

            <div v-if="isSettingsVisible"
@@ -565,7 +1014,7 @@ watch(assetPickerTab, () => {
                            </div>
                            <Textarea v-model="prompt" rows="3" autoResize
                                placeholder="Describe what you want to create..."
-                                class="w-full bg-slate-800 border-white/10 text-white rounded-xl p-3 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" />
+                                class="w-full bg-slate-800 !text-[16px] border-white/10 text-white rounded-xl p-3 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" />

                        </div>

@@ -605,7 +1054,8 @@ watch(assetPickerTab, () => {
                                    class="flex items-center gap-2 mt-2 px-1 animate-in fade-in slide-in-from-top-1">
                                    <Checkbox v-model="useProfileImage" :binary="true" inputId="use-profile-img" />
                                    <label for="use-profile-img"
-                                        class="text-xs text-slate-300 cursor-pointer select-none">Use Character
+                                        class="text-xs text-slate-300 cursor-pointer select-none">Use
+                                        Character
                                        Photo</label>
                                </div>
                            </div>
@@ -616,7 +1066,8 @@ watch(assetPickerTab, () => {
                                <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>
@@ -649,6 +1100,20 @@ watch(assetPickerTab, () => {
                            </div>
                        </div>

+                        <!-- Generation Count -->
+                        <div class="flex flex-col gap-2">
+                            <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Count</label>
+                            <div class="flex items-center gap-2">
+                                <div class="flex-1 flex bg-slate-800 rounded-xl border border-white/10 overflow-hidden">
+                                    <button v-for="n in 4" :key="n" @click="generationCount = n"
+                                        class="flex-1 py-2 text-sm font-bold transition-all"
+                                        :class="generationCount === n ? 'bg-violet-600 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'">
+                                        {{ n }}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
                        <div class="flex flex-col gap-2 bg-slate-800/50 p-3 rounded-xl border border-white/5">
                            <div class="flex items-center gap-2">
                                <Checkbox v-model="sendToTelegram" :binary="true" inputId="tg-check" />
@@ -662,20 +1127,10 @@ watch(assetPickerTab, () => {
                        </div>

                        <div class="mt-auto">
-                            <Button :label="isGenerating ? 'Generating...' : 'Generate'"
-                                :icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"
-                                :loading="isGenerating" @click="handleGenerate"
+                            <Button :label="isSubmitting ? 'Starting...' : 'Generate'"
+                                :icon="isSubmitting ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"
+                                :loading="isSubmitting" @click="handleGenerate"
                                class="w-full !py-3 !text-base !font-bold !bg-gradient-to-r from-violet-600 to-cyan-500 !border-none !rounded-xl !shadow-lg !shadow-violet-500/20 hover:!scale-[1.02] transition-all" />
-
-                            <div v-if="isGenerating" class="mt-2 text-center">
-                                <ProgressBar :value="generationProgress" class="h-1 bg-slate-700"
-                                    :pt="{ value: { class: '!bg-violet-500' } }" :showValue="false" />
-                                <span class="text-[10px] text-slate-500">{{ generationStatus }}</span>
-                            </div>
-                            <div v-if="generationError"
-                                class="mt-2 text-center text-xs text-red-400 bg-red-500/10 p-2 rounded border border-red-500/20">
-                                {{ generationError }}
-                            </div>
                        </div>
                    </div>
                </div>
@@ -695,13 +1150,41 @@ watch(assetPickerTab, () => {


        <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
-            :style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"
+            :style="{ width: '95vw', maxWidth: '1100px', background: 'transparent', boxShadow: 'none' }"
            :pt="{ root: { class: '!bg-transparent !border-none !shadow-none' }, header: { class: '!hidden' }, content: { class: '!bg-transparent !p-0' } }">
-            <div class="relative flex items-center justify-center" @click="isImagePreviewVisible = false">
+            <div class="relative flex items-center justify-center" @click.self="isImagePreviewVisible = false">
+
+                <!-- Previous Button -->
+                <Button v-if="allPreviewImages.length > 1" icon="pi pi-chevron-left" @click.stop="navigatePreview(-1)"
+                    rounded text
+                    class="!absolute left-2 top-1/2 -translate-y-1/2 z-20 !text-white !bg-black/50 hover:!bg-black/70 !w-12 !h-12 !rounded-full !border !border-white/20 backdrop-blur-sm transition-all hover:!scale-110" />
+
+                <!-- Image -->
                <img v-if="previewImage" :src="previewImage.url"
-                    class="max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl" />
+                    class="max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl select-none"
+                    draggable="false" />
+
+                <!-- Next Button -->
+                <Button v-if="allPreviewImages.length > 1" icon="pi pi-chevron-right" @click.stop="navigatePreview(1)"
+                    rounded text
+                    class="!absolute right-2 top-1/2 -translate-y-1/2 z-20 !text-white !bg-black/50 hover:!bg-black/70 !w-12 !h-12 !rounded-full !border !border-white/20 backdrop-blur-sm transition-all hover:!scale-110" />
+
+                <!-- Close Button -->
                <Button icon="pi pi-times" @click="isImagePreviewVisible = false" rounded text
-                    class="!absolute -top-4 -right-4 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" />
+                    class="!absolute -top-4 -right-4 z-20 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" />
+
+                <!-- Counter -->
+                <div v-if="allPreviewImages.length > 1"
+                    class="absolute bottom-4 left-1/2 -translate-x-1/2 z-20 bg-black/60 backdrop-blur-sm text-white text-sm font-mono px-4 py-1.5 rounded-full border border-white/10">
+                    {{ previewIndex + 1 }} / {{ allPreviewImages.length }}
+                </div>
+
+                <!-- Prompt (click to copy) -->
+                <div v-if="previewImage?.prompt"
+                    class="absolute bottom-14 left-1/2 -translate-x-1/2 z-20 bg-black/60 backdrop-blur-sm text-white/80 text-xs px-4 py-2 rounded-xl border border-white/10 max-w-md text-center line-clamp-2 cursor-pointer hover:bg-black/80 hover:border-white/20 transition-all"
+                    v-tooltip.top="'Click to copy'" @click.stop="navigator.clipboard.writeText(previewImage.prompt)">
+                    {{ previewImage.prompt }}
+                </div>
            </div>
        </Dialog>

@@ -710,12 +1193,19 @@ watch(assetPickerTab, () => {
            :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">
+                <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 -->
@@ -757,6 +1247,36 @@ watch(assetPickerTab, () => {
            </template>
        </Dialog>

+
+
+        <Dialog v-model:visible="isAlbumPickerVisible" modal header="Add to Album" :style="{ width: '400px' }"
+            :pt="{ root: { class: '!bg-slate-900 !border !border-white/10' }, header: { class: '!bg-slate-900 !border-b !border-white/5 !text-white' }, content: { class: '!bg-slate-900 !p-4' }, footer: { class: '!bg-slate-900 !border-t !border-white/5 !p-4' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">
+            <div class="flex flex-col gap-4">
+                <div v-if="albumStore.loading" class="flex justify-center p-4">
+                    <i class="pi pi-spin pi-spinner text-violet-500 text-2xl"></i>
+                </div>
+                <div v-else-if="albumStore.albums.length === 0" class="text-center text-slate-400">
+                    No albums found. Create one first!
+                </div>
+                <Dropdown v-else v-model="selectedAlbumForAdd" :options="albumStore.albums" optionLabel="name"
+                    placeholder="Select an Album" class="w-full !bg-slate-800 !border-white/10 !text-white" :pt="{
+                        root: { class: '!bg-slate-800' },
+                        input: { class: '!text-white' },
+                        trigger: { class: '!text-slate-400' },
+                        panel: { class: '!bg-slate-900 !border-white/10' },
+                        item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' }
+                    }" />
+            </div>
+            <template #footer>
+                <div class="flex justify-end gap-2">
+                    <Button label="Cancel" @click="isAlbumPickerVisible = false"
+                        class="!text-slate-300 hover:!bg-white/5" text />
+                    <Button label="Add" @click="confirmAddToAlbum" :disabled="!selectedAlbumForAdd"
+                        class="!bg-violet-600 !border-none hover:!bg-violet-500" />
+                </div>
+            </template>
+        </Dialog>
+
    </div>
 </template>

--- a/src/views/ImageGenerationView.vue
+++ b/src/views/ImageGenerationView.vue
@@ -211,8 +211,15 @@ const handleGenerate = async () => {

        const response = await aiService.runGeneration(payload)

-        if (response && response.id) {
-            pollStatus(response.id)
+        let genId = null
+        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
--- a/src/views/ProjectDetailView.vue
+++ b/src/views/ProjectDetailView.vue
@@ -0,0 +1,166 @@
+<template>
+    <div class="container mx-auto p-4 animate-fade-in" v-if="project">
+        <!-- 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">
+                <i class="pi pi-folder text-9xl text-white"></i>
+            </div>
+
+            <div class="relative z-10">
+                <div class="flex items-center gap-3 mb-2">
+                    <Button icon="pi pi-arrow-left" text rounded @click="router.push('/projects')" />
+                    <span v-if="isCurrentProject"
+                        class="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded-full border border-green-500/30 font-medium">
+                        Active Project
+                    </span>
+                </div>
+
+                <h1 class="text-4xl font-bold text-white mb-4">{{ project.name }}</h1>
+                <p class="text-slate-300 text-lg max-w-2xl mb-6">
+                    {{ project.description || 'No description provided.' }}
+                </p>
+
+                <div class="flex gap-3">
+                    <Button v-if="!isCurrentProject" label="Set as Active" icon="pi pi-check" @click="selectProject" />
+                    <Button v-if="isOwner" label="Delete" icon="pi pi-trash" severity="danger" outlined
+                        @click="confirmDelete" />
+                    <Button label="Settings" icon="pi pi-cog" severity="secondary" outlined />
+                </div>
+            </div>
+        </div>
+
+        <!-- Confirm Dialog -->
+        <ConfirmDialog />
+
+        <!-- Content Grid -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Members Column -->
+            <div class="lg:col-span-1">
+                <div class="glass-panel p-6 rounded-xl h-full">
+                    <div class="flex justify-between items-center mb-6">
+                        <h2 class="text-xl font-bold text-white">Team Members</h2>
+                    </div>
+                    <!-- Inline Add Member -->
+                    <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" />
+                            <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"
+                            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' :
+                                    'Member' }}</p>
+                                <p class="text-slate-500 text-xs truncate">ID: {{ memberId }}</p>
+                            </div>
+                            <div class="ml-auto" v-if="project.owner_id === memberId">
+                                <i class="pi pi-crown text-yellow-500" title="Owner"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Stats/Activity Column (Placeholder) -->
+            <div class="lg:col-span-2">
+                <div class="glass-panel p-6 rounded-xl h-full">
+                    <h2 class="text-xl font-bold text-white mb-6">Activity</h2>
+                    <div class="text-center py-12 text-slate-500">
+                        <i class="pi pi-chart-line text-4xl mb-4 opacity-50"></i>
+                        <p>No recent activity registered.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div v-else class="flex justify-center items-center h-full">
+        <div class="text-center">
+            <i class="pi pi-spin pi-spinner text-4xl text-primary-500 mb-4"></i>
+            <p class="text-slate-400">Loading project...</p>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useProjectsStore } from '@/stores/projectsStore';
+import { storeToRefs } from 'pinia';
+import { useAuthStore } from '@/stores/auth';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import ConfirmDialog from 'primevue/confirmdialog';
+import { useConfirm } from 'primevue/useconfirm';
+
+const route = useRoute();
+const router = useRouter(); // Missing import fixed
+const projectsStore = useProjectsStore();
+const authStore = useAuthStore();
+const { projects, currentProject } = storeToRefs(projectsStore);
+
+const projectId = route.params.id;
+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 inviteUsername = ref('');
+const inviting = ref(false);
+
+onMounted(async () => {
+    // Ensure projects are loaded
+    if (projects.value.length === 0) {
+        await projectsStore.fetchProjects();
+    }
+});
+
+const selectProject = () => {
+    if (project.value) {
+        projectsStore.selectProject(project.value.id);
+    }
+}
+
+const addMember = async () => {
+    if (!inviteUsername.value.trim()) return;
+
+    inviting.value = true;
+    try {
+        await projectsStore.addMember(projectId, inviteUsername.value);
+        inviteUsername.value = '';
+    } catch (e) {
+        console.error(e);
+        // Toast error here ideally
+    } finally {
+        inviting.value = false;
+    }
+}
+
+const confirm = useConfirm();
+const confirmDelete = () => {
+    confirm.require({
+        message: 'Are you sure you want to delete this project? This action cannot be undone.',
+        header: 'Delete Confirmation',
+        icon: 'pi pi-exclamation-triangle',
+        acceptClass: 'p-button-danger',
+        acceptLabel: 'Delete',
+        rejectLabel: 'Cancel',
+        accept: async () => {
+            try {
+                await projectsStore.deleteProject(projectId);
+                router.push('/projects');
+            } catch (e) {
+                console.error("Failed to delete", e);
+            }
+        }
+    });
+}
+</script>
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -0,0 +1,123 @@
+<template>
+    <div class="container mx-auto p-4 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>
+                <p class="text-slate-400">Manage your workspaces and teams</p>
+            </div>
+            <Button label="New Project" icon="pi pi-plus" @click="showCreateDialog = true" />
+        </div>
+
+        <div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <Skeleton v-for="i in 3" :key="i" height="150px" class="rounded-xl" />
+        </div>
+
+        <div v-else-if="projects.length === 0" class="text-center py-12 glass-panel rounded-xl">
+            <i class="pi pi-folder-open text-6xl text-slate-600 mb-4"></i>
+            <h3 class="text-xl font-semibold text-white mb-2">No Projects Yet</h3>
+            <p class="text-slate-400 mb-6">Create your first project to get started</p>
+            <Button label="Create Project" icon="pi pi-plus" @click="showCreateDialog = true" text />
+        </div>
+
+        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div v-for="project in projects" :key="project.id"
+                class="glass-panel p-6 rounded-xl hover:bg-slate-800/50 transition-colors cursor-pointer group relative overflow-hidden"
+                @click="goToProject(project.id)">
+                <!-- Active Indicator -->
+                <div v-if="currentProject?.id === project.id" class="absolute top-0 right-0 p-2">
+                    <span
+                        class="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded-full border border-green-500/30 font-medium">
+                        Active
+                    </span>
+                </div>
+
+                <h3 class="text-xl font-semibold text-white mb-2 group-hover:text-primary-400 transition-colors">
+                    {{ project.name }}
+                </h3>
+                <p class="text-slate-400 text-sm mb-4 line-clamp-2">
+                    {{ project.description || 'No description' }}
+                </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">
+                        <i class="pi pi-users mr-2"></i>
+                        <span>{{ project.members.length }} members</span>
+                    </div>
+
+                    <Button v-if="currentProject?.id !== project.id" icon="pi pi-check" label="Select" size="small"
+                        severity="secondary" @click.stop="selectProject(project.id)" />
+                </div>
+            </div>
+        </div>
+
+        <!-- Create Project Dialog -->
+        <Dialog v-model:visible="showCreateDialog" modal header="Create New Project"
+            :style="{ width: '90vw', maxWidth: '500px' }">
+            <div class="flex flex-col gap-4 pt-4">
+                <div class="flex flex-col gap-2">
+                    <label for="name" class="text-slate-300">Project Name</label>
+                    <InputText id="name" v-model="newProject.name" autofocus />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="description" class="text-slate-300">Description</label>
+                    <Textarea id="description" v-model="newProject.description" rows="3" autoResize />
+                </div>
+            </div>
+            <template #footer>
+                <Button label="Cancel" text severity="secondary" @click="showCreateDialog = false" />
+                <Button label="Create" icon="pi pi-check" @click="createProject" :loading="creating" />
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useProjectsStore } from '@/stores/projectsStore';
+import { storeToRefs } from 'pinia';
+import Button from 'primevue/button';
+import Dialog from 'primevue/dialog';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import Skeleton from 'primevue/skeleton';
+
+const router = useRouter();
+const projectsStore = useProjectsStore();
+// Use storeToRefs for reactive state
+const { projects, currentProject, loading } = storeToRefs(projectsStore);
+
+const showCreateDialog = ref(false);
+const creating = ref(false);
+const newProject = ref({
+    name: '',
+    description: ''
+});
+
+onMounted(() => {
+    projectsStore.fetchProjects();
+});
+
+const createProject = async () => {
+    if (!newProject.value.name.trim()) return;
+
+    creating.value = true;
+    try {
+        await projectsStore.createProject(newProject.value.name, newProject.value.description);
+        showCreateDialog.value = false;
+        newProject.value = { name: '', description: '' };
+    } catch (error) {
+        console.error(error);
+    } finally {
+        creating.value = false;
+    }
+};
+
+const selectProject = (id) => {
+    projectsStore.selectProject(id);
+};
+
+const goToProject = (id) => {
+    router.push(`/projects/${id}`);
+};
+</script>
Author	SHA1	Message	Date
xds	2aa9156a20	feat: Support grouped generation responses and improve generation ID extraction for polling.	2026-02-16 00:25:41 +03:00
xds	75e33cca9a	feat: enhance grouped generation item UI with detailed failure states, delete, and reuse prompt/asset actions.	2026-02-13 17:28:41 +03:00
xds	3910c79848	feat: Implement multiple image generation and enhance image preview with navigation and grouping.	2026-02-13 11:18:37 +03:00
xds	0406b175e9	fix	2026-02-12 17:54:14 +03:00
xds	2eda7526ef	feat: Replace text-based logo with an image in the AppSidebar.	2026-02-09 16:10:46 +03:00
xds	1a8c66ca35	feat: Implement project management with new views, services, store, and sidebar project selection.	2026-02-09 16:06:50 +03:00
xds	70e96eb503	feat: Add multiple favicon sizes, Apple touch icon, and web app manifest for improved PWA support.	2026-02-09 13:45:22 +03:00
xds	27337e0ccf	feat: Redesign sidebar to a horizontal top navigation bar and enhance assets view with asset upload, refined filters, and a new grid layout.	2026-02-09 01:52:20 +03:00
xds	c73bffc9f4	albums	2026-02-08 22:49:37 +03:00
xidas	0b9746bce8	Merge pull request 'init auth' (#1 ) from auth into main Reviewed-on: #1	2026-02-08 14:37:13 +00:00