From 1b9fddd2091e32b4ba9a50db54d36e5952e19446 Mon Sep 17 00:00:00 2001
From: xds <iam@voroninv.ru>
Date: Sat, 7 Feb 2026 15:04:12 +0300
Subject: [PATCH] Refactor: Extract sidebar navigation from individual views
 into a new `AppSidebar` component.

---
 src/App.vue                          |   27 +-
 src/components/AppSidebar.vue        |   89 +++
 src/views/AssetsView.vue             |   79 +-
 src/views/CharacterDetailView.vue    | 1110 +++++++++++++-------------
 src/views/CharactersView.vue         |  116 +--
 src/views/FlexibleGenerationView.vue |   97 +--
 src/views/ImageGenerationView.vue    |  134 ++--
 src/views/ImageToPromptView.vue      |   70 +-
 8 files changed, 774 insertions(+), 948 deletions(-)
 create mode 100644 src/components/AppSidebar.vue

diff --git a/src/App.vue b/src/App.vue
index c106d00..d65c68b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,28 @@
 <script setup>
-import { RouterView } from 'vue-router'
+import { RouterView, useRoute } from 'vue-router'
+import AppSidebar from './components/AppSidebar.vue'
+
+const route = useRoute()
 </script>
 
 <template>
-  <RouterView v-slot="{ Component }">
-    <transition name="fade" mode="out-in">
-      <component :is="Component" />
-    </transition>
-  </RouterView>
+  <!-- Login Layout (Full Screen) -->
+  <div v-if="route.name === 'login'" class="h-screen w-full">
+    <RouterView />
+  </div>
+
+  <!-- Main Layout (Sidebar + Content) -->
+  <div v-else class="flex h-screen bg-slate-900 text-slate-100 font-sans overflow-hidden">
+    <AppSidebar />
+
+    <div class="flex-1 h-full overflow-hidden relative">
+      <RouterView v-slot="{ Component }">
+        <transition name="fade" mode="out-in">
+          <component :is="Component" />
+        </transition>
+      </RouterView>
+    </div>
+  </div>
 </template>
 
 <style>
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
new file mode 100644
index 0000000..baf6bc1
--- /dev/null
+++ b/src/components/AppSidebar.vue
@@ -0,0 +1,89 @@
+<script setup>
+import { computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import Button from 'primevue/button'
+
+const router = useRouter()
+const route = useRoute()
+
+const handleLogout = () => {
+    localStorage.removeItem('auth_code')
+    router.push('/login')
+}
+
+// Check active route for styling
+const isActive = (path) => {
+    // Exact match for home, startsWith for others
+    if (path === '/') return route.path === '/'
+    return route.path.startsWith(path)
+}
+
+const navItems = [
+    { path: '/', icon: '🏠', tooltip: 'Home' },
+    { path: '/assets', icon: '📂', tooltip: 'Assets' },
+    { path: '/generation', icon: '🎨', tooltip: 'Image Generation' },
+    { path: '/flexible-generation', icon: '🖌️', tooltip: 'Flexible Generation' },
+    { path: '/characters', icon: '👥', tooltip: 'Characters' },
+    { path: '/image-to-prompt', icon: '✨', tooltip: 'Image to Prompt' }
+]
+</script>
+
+<template>
+    <div class="contents">
+        <!-- Sidebar (Desktop) -->
+        <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
+                </div>
+            </div>
+
+            <div class="flex-1 flex flex-col gap-6 w-full items-center">
+                <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',
+                    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>
+                </div>
+            </div>
+
+            <div class="mt-auto flex flex-col items-center gap-4">
+                <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'">
+                    <i class="pi pi-power-off"></i>
+                </div>
+                <!-- Profile Avatar Placeholder -->
+                <div class="w-10 h-10 rounded-full bg-slate-800 border-2 border-violet-600 flex items-center justify-center font-bold text-slate-50 cursor-pointer hover:scale-105 transition-all"
+                    title="Profile">
+                    U
+                </div>
+            </div>
+        </nav>
+
+        <!-- Mobile Bottom Nav -->
+        <nav
+            class="md:hidden fixed bottom-0 left-0 right-0 h-16 bg-slate-900/90 backdrop-blur-xl border-t border-white/10 z-50 flex justify-around items-center px-2">
+            <div v-for="item in navItems" :key="item.path" :class="[
+                'flex flex-col items-center gap-1 p-2 rounded-xl transition-all',
+                isActive(item.path)
+                    ? 'text-white bg-white/10 relative top-[-10px] shadow-lg shadow-violet-500/20 border border-violet-500/30'
+                    : 'text-slate-400 hover:text-slate-200'
+            ]" @click="router.push(item.path)">
+                <span class="text-xl">{{ item.icon }}</span>
+            </div>
+        </nav>
+    </div>
+</template>
+
+<style scoped>
+.glass-panel {
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+</style>
diff --git a/src/views/AssetsView.vue b/src/views/AssetsView.vue
index b46a6cd..d9fa2ef 100644
--- a/src/views/AssetsView.vue
+++ b/src/views/AssetsView.vue
@@ -18,6 +18,7 @@ const toast = useToast()
 const assets = ref<Asset[]>([])
 const loading = ref(true)
 const activeFilter = ref('all')
+// @ts-ignore
 const API_URL = import.meta.env.VITE_API_URL
 
 const selectedAsset = ref<Asset | null>(null)
@@ -107,81 +108,13 @@ const formatDate = (dateString: string) => {
     if (!dateString) return ''
     return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date(dateString))
 }
-const handleLogout = () => {
-    localStorage.removeItem('auth_code')
-    router.push('/login')
-}
+
 </script>
 
 <template>
-    <div class="flex h-screen bg-slate-900 overflow-hidden">
-        <!-- Sidebar -->
-        <nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10">
-            <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
-                </div>
-            </div>
-
-            <div class="flex-1 flex flex-col gap-6 w-full items-center">
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/')" v-tooltip.right="'Home'">
-                    <span class="text-2xl">🏠</span>
-                </div>
-                <div v-tooltip.right="'Assets'"
-                    class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50">
-                    <span class="text-2xl">📂</span>
-                </div>
-                <!-- Image Generation -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/generation')" v-tooltip.right="'Image Generation'">
-                    <span class="text-2xl">🎨</span>
-                </div>
-                <!-- Flexible Generation -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/flexible-generation')" v-tooltip.right="'Flexible Generation'">
-                    <span class="text-2xl">🖌️</span>
-                </div>
-                <!-- Flexible Generation -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/flexible-generation')" v-tooltip.right="'Flexible Generation'">
-                    <span class="text-2xl">🖌️</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/characters')" v-tooltip.right="'Characters'">
-                    <span class="text-2xl">👥</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/image-to-prompt')" v-tooltip.right="'Image to Prompt'">
-                    <span class="text-2xl">✨</span>
-                </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' } }
-                    }" />
-                </div> -->
-            </div>
-        </nav>
-
-        <!-- Main Content -->
-        <main class="flex-1 p-8 overflow-y-auto flex flex-col">
+    <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">
             <!-- Top Bar -->
             <header class="flex justify-between items-end mb-8">
                 <div>
@@ -270,7 +203,7 @@ const handleLogout = () => {
                     }" />
                 </div>
             </div>
-        </main>
+        </div>
 
         <Dialog v-model:visible="isModalVisible" modal dismissableMask header="Asset View"
             :style="{ width: '90vw', maxWidth: '800px' }" class="glass-panel rounded-2xl">
diff --git a/src/views/CharacterDetailView.vue b/src/views/CharacterDetailView.vue
index f804d46..c8d79df 100644
--- a/src/views/CharacterDetailView.vue
+++ b/src/views/CharacterDetailView.vue
@@ -530,615 +530,579 @@ const handleGenerate = async () => {
     }
 }
 
-const handleLogout = () => {
-    localStorage.removeItem('auth_code')
-    router.push('/login')
-}
+
 </script>
 
 <template>
-    <div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100">
-        <nav
-            class="glass-panel w-14 lg:w-20 m-2 lg:m-4 flex flex-col items-center py-4 lg:py-6 rounded-2xl lg:rounded-3xl z-10 border border-white/5">
-            <div class="mb-4 lg:mb-12 cursor-pointer" @click="goBack">
-                <div class="w-8 lg:w-10 h-8 lg:h-10 bg-white/10 rounded-lg lg:rounded-xl flex items-center justify-center font-bold text-white text-lg lg:text-xl transition-all duration-300 hover:bg-white/20"
-                    v-tooltip.right="'Back'">
-                    ←
-                </div>
-            </div>
+    <div class="flex flex-col h-full p-6 overflow-y-auto w-full text-slate-100">
+        <!-- Main Content (Sidebar removed) -->
+        <div class="flex-1 flex flex-col gap-4">
 
-            <div class="flex-1 flex flex-col gap-4 lg:gap-6 w-full items-center">
-                <div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg:rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/')" v-tooltip.right="'Home'">
-                    <span class="text-xl lg:text-2xl">🏠</span>
-                </div>
-                <div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg:rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/assets')" v-tooltip.right="'Assets'">
-                    <span class="text-xl lg:text-2xl">📂</span>
-                </div>
-                <!-- Image Generation -->
-                <div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg:rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/generation')" v-tooltip.right="'Image Generation'">
-                    <span class="text-xl lg:text-2xl">🎨</span>
-                </div>
-                <!-- Flexible Generation -->
-                <div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg:rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/flexible-generation')" v-tooltip.right="'Flexible Generation'">
-                    <span class="text-xl lg:text-2xl">🖌️</span>
-                </div>
-                <div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg:rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner"
-                    @click="router.push('/')" v-tooltip.right="'Characters'">
-                    <span class="text-xl lg:text-2xl">👥</span>
-                </div>
-                <div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg:rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/image-to-prompt')" v-tooltip.right="'Image to Prompt'">
-                    <span class="text-xl lg:text-2xl">✨</span>
-                </div>
-            </div>
+            <div v-if="!loading && character" class="flex-1 flex flex-col gap-4">
+                <header class="mb-0">
+                    <Button label="Back" icon="pi pi-arrow-left" @click="goBack" text
+                        class="text-slate-400 hover:text-slate-50 p-1" />
+                </header>
 
-            <div class="mt-auto flex flex-col items-center gap-4">
-                <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'">
-                    <i class="pi pi-power-off"></i>
-                </div>
-            </div>
-        </nav>
-
-        <main v-if="!loading && character" class="flex-1 p-4 lg:p-6 overflow-y-auto flex flex-col gap-4">
-            <header class="mb-0">
-                <Button label="Back" icon="pi pi-arrow-left" @click="goBack" text
-                    class="text-slate-400 hover:text-slate-50 p-1" />
-            </header>
-
-            <div class="glass-panel p-2 lg:p-3 rounded-xl border border-white/5">
-                <div class="flex gap-4 items-center">
-                    <div class="w-16 h-16 rounded-full overflow-hidden border border-white/10 flex-shrink-0">
-                        <img :src="API_URL + character.avatar_image || 'https://via.placeholder.com/200'"
-                            :alt="character.name" class="w-full h-full object-cover" />
-                    </div>
-                    <div class="flex-1 overflow-hidden">
-                        <h1 class="text-xl font-bold m-0 mb-1 leading-tight">{{ character.name }}</h1>
-                        <div class="flex gap-2 mb-1">
-                            <Tag :value="`ID: ${character.id.substring(0, 8)}`" severity="secondary"
-                                class="text-[9px] px-1 py-0" />
+                <div class="glass-panel p-2 lg:p-3 rounded-xl border border-white/5">
+                    <div class="flex gap-4 items-center">
+                        <div class="w-16 h-16 rounded-full overflow-hidden border border-white/10 flex-shrink-0">
+                            <img :src="API_URL + character.avatar_image || 'https://via.placeholder.com/200'"
+                                :alt="character.name" class="w-full h-full object-cover" />
                         </div>
-                        <p class="text-[11px] leading-tight text-slate-400 max-w-full">
-                            {{ character.character_bio }}
-                        </p>
-                    </div>
-                </div>
-            </div>
-
-            <Tabs v-model:value="activeTab" class="glass-panel p-1.5 rounded-xl border border-white/5"
-                style="--p-tabs-tablist-background: transparent !important">
-                <TabList :pt="{
-                    root: { class: 'border-none p-0 mb-2 inline-flex' },
-                    tab: ({ context }) => ({
-                        class: [
-                            'flex items-center gap-1.5 px-4 py-2 rounded-lg font-bold transition-all duration-300 border-none outline-none cursor-pointer text-xs',
-                            context.active
-                                ? 'bg-violet-600/20 text-violet-400 shadow-[0_0_20px_rgba(124,58,237,0.1)] border border-violet-500/20'
-                                : 'text-slate-500 hover:text-slate-300 !bg-transparent border border-transparent'
-                        ]
-                    }),
-                    activeBar: { class: 'hidden' }
-                }">
-                    <Tab value="0">
-                        <div class="!flex !flex-row !gap-1">
-                            <i class="pi pi-sparkles text-[10px]" />
-                            <span>Generation</span>
-                        </div>
-                    </Tab>
-                    <Tab value="1">
-                        <div class="!flex !flex-row !gap-1">
-                            <i class="pi pi-images text-[10px]" />
-                            <span>Assets ({{ assetsTotalRecords }})</span>
-                        </div>
-                    </Tab>
-                    <Tab value="2" class="hidden">
-                        <div class="!flex !flex-row !gap-1">
-                            <i class="pi pi-history text-[10px]" />
-                            <span>History ({{ historyTotal }})</span>
-                        </div>
-                    </Tab>
-                </TabList>
-
-                <TabPanels class="bg-transparent p-0">
-                    <TabPanel value="0">
-                        <div class="grid grid-cols-1 lg:grid-cols-4 gap-2">
-                            <div
-                                class="lg:col-span-1 glass-panel p-2 rounded-xl border border-white/5 bg-white/5 flex flex-col gap-3">
-                                <div class="flex justify-between items-center flex-col">
-                                    <h2 class="text-sm font-bold m-0">Settings</h2>
-                                </div>
-
-                                <div class="flex flex-col gap-1.5">
-                                    <label
-                                        class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Quality</label>
-                                    <div
-                                        class="!flex !w-full !justify-between  items-center  justify-center !bg-slate-900/50 !p-1  gap-1 !rounded-lg !border !border-white/10">
-                                        <div v-for="option in qualityOptions" :key="option.key"
-                                            @click="quality = option"
-                                            class="w-full items-center justify-center justify-items-center !text-center hover:bg-white/5 hover:text-white p-1 hover:rounded-lg"
-                                            :class="quality.key === option.key ? 'bg-white/9 text-white rounded-lg' : ''">
-                                            <span class="text-white w-full text-center">{{ option.value }}</span>
-                                        </div>
-                                    </div>
-
-                                </div>
-
-                                <div class="flex flex-col gap-1.5">
-                                    <label
-                                        class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Aspect</label>
-                                    <div
-                                        class="!flex !w-full !justify-between  items-center  justify-center !bg-slate-900/50 !p-1  gap-1 !rounded-lg !border !border-white/10">
-                                        <div v-for="option in aspectRatioOptions" :key="option.key"
-                                            @click="aspectRatio = option"
-                                            class="w-full items-center justify-center justify-items-center !text-center hover:bg-white/5 hover:text-white p-1 hover:rounded-lg"
-                                            :class="aspectRatio.key === option.key ? 'bg-white/9 text-white rounded-lg' : ''">
-                                            <span class="text-white w-full text-center">{{ option.value }}</span>
-                                        </div>
-                                    </div>
-
-                                </div>
-
-                                <div class="flex flex-col gap-1.5">
-                                    <label
-                                        class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Description</label>
-
-                                    <div class="relative w-full">
-                                        <Textarea v-model="prompt" rows="3" autoResize placeholder="Describe..."
-                                            class="w-full bg-slate-900 border-white/10 text-white rounded-lg p-2 focus:border-violet-500 transition-all text-xs pr-10" />
-
-                                        <div class="absolute top-1.5 right-1.5 flex gap-1">
-                                            <Button v-if="previousPrompt" icon="pi pi-undo"
-                                                class="!p-1 !w-6 !h-6 !text-[10px] bg-slate-800 hover:bg-slate-700 border-white/10 text-slate-300"
-                                                @click="undoImprovePrompt" v-tooltip.top="'Rollback'" />
-
-                                            <Button icon="pi pi-sparkles" :loading="isImprovingPrompt"
-                                                :disabled="prompt.length <= 10"
-                                                class="!p-1 !w-6 !h-6 !text-[10px] bg-violet-600/20 hover:bg-violet-600/30 border-violet-500/30 text-violet-400 disabled:opacity-50 disabled:cursor-not-allowed"
-                                                @click="handleImprovePrompt"
-                                                v-tooltip.top="prompt.length <= 10 ? 'Enter at least 10 characters' : 'Improve prompt'" />
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <!-- Assets Selection -->
-                                <div class="flex flex-col gap-1.5">
-                                    <div class="flex justify-between items-center">
-                                        <label
-                                            class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Ref
-                                            Assets ({{ selectedAssets.length }})</label>
-                                        <Button label="Add Asset" icon="pi pi-plus" size="small" text
-                                            class="!text-[10px] !py-0.5 !px-1.5 text-violet-400 hover:bg-violet-500/10"
-                                            @click="openAssetSelectionModal" />
-                                    </div>
-
-                                    <div v-if="selectedAssets.length > 0" class="flex flex-wrap gap-1">
-                                        <div v-for="(asset, index) in selectedAssets" :key="asset.id"
-                                            class="relative w-10 h-10 rounded overflow-hidden border border-violet-500/50 group">
-                                            <img :src="API_URL + asset.url + '?thumbnail=true'"
-                                                class="w-full h-full object-cover" />
-                                            <div @click="removeSelectedAsset(index)"
-                                                class="absolute inset-0 bg-black/60 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
-                                                <i class="pi pi-times text-white text-[8px]"></i>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div v-else
-                                        class="text-center py-2 text-[10px] text-slate-500 border border-dashed border-white/10 rounded-lg">
-                                        No assets selected
-                                    </div>
-                                </div>
-
-                                <!-- Removed Ref Assets section if characterAssets is empty, but it's already conditional -->
-
-                                <div class="flex flex-col gap-1.5 mt-auto pt-1.5 border-t border-white/5">
-                                    <div class="flex flex-col gap-2 mb-2">
-                                        <div class="flex items-center gap-2">
-                                            <Checkbox v-model="sendToTelegram" :binary="true" inputId="tg-check-char" />
-                                            <label for="tg-check-char"
-                                                class="text-[10px] text-slate-400 cursor-pointer select-none">Send
-                                                result to Telegram</label>
-                                        </div>
-                                        <div v-if="sendToTelegram && !isTelegramIdSaved"
-                                            class="animate-in fade-in slide-in-from-top-1 duration-200">
-                                            <InputText v-model="telegramId" placeholder="Enter Telegram ID"
-                                                class="w-full !text-[10px] !py-1" @blur="saveTelegramId" />
-                                        </div>
-                                        <div class="flex items-center gap-2 mt-1">
-                                            <Checkbox v-model="useProfileImage" :binary="true"
-                                                inputId="profile-img-check" />
-                                            <label for="profile-img-check"
-                                                class="text-[10px] text-slate-400 cursor-pointer select-none">Use
-                                                Profile Photo</label>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <Button :label="isGenerating ? 'Wait...' : `Generate`"
-                                    :icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-magic'"
-                                    :loading="isGenerating" @click="handleGenerate"
-                                    class="w-full py-2 text-[11px] font-bold bg-gradient-to-r from-violet-600 to-cyan-500 border-none rounded shadow transition-all hover:scale-[1.01] active:scale-[0.99]" />
-
-                                <Message v-if="generationSuccess" severity="success" :closable="true"
-                                    @close="generationSuccess = false">
-                                    Success!
-                                </Message>
+                        <div class="flex-1 overflow-hidden">
+                            <h1 class="text-xl font-bold m-0 mb-1 leading-tight">{{ character.name }}</h1>
+                            <div class="flex gap-2 mb-1">
+                                <Tag :value="`ID: ${character.id.substring(0, 8)}`" severity="secondary"
+                                    class="text-[9px] px-1 py-0" />
                             </div>
+                            <p class="text-[11px] leading-tight text-slate-400 max-w-full">
+                                {{ character.character_bio }}
+                            </p>
+                        </div>
+                    </div>
+                </div>
 
-                            <div
-                                class="lg:col-span-3 glass-panel p-3 rounded-xl border border-white/5 bg-white/5 min-h-[300px] flex flex-col items-center justify-center text-center relative overflow-hidden">
-                                <div v-if="isGenerating" class="flex flex-col items-center gap-3 z-10 w-full px-12">
-                                    <ProgressSpinner style="width: 40px; height: 40px" strokeWidth="4"
-                                        animationDuration=".8s" fill="transparent" />
-                                    <div class="text-center">
-                                        <h3
-                                            class="text-lg font-bold mb-0.5 bg-gradient-to-r from-violet-400 to-cyan-400 bg-clip-text text-transparent capitalize">
-                                            {{ generationStatus || 'Creating...' }}</h3>
-                                        <p class="text-[10px] text-slate-400">Processing using AI</p>
-                                    </div>
-                                    <ProgressBar :value="generationProgress" style="height: 6px; width: 100%"
-                                        :showValue="false" class="rounded-full overflow-hidden !bg-slate-800" :pt="{
-                                            value: { class: '!bg-gradient-to-r !from-violet-600 !to-cyan-500 !transition-all !duration-500' }
-                                        }" />
-                                    <span class="text-[10px] text-slate-500 font-mono">{{ generationProgress }}%</span>
-                                </div>
+                <Tabs v-model:value="activeTab" class="glass-panel p-1.5 rounded-xl border border-white/5"
+                    style="--p-tabs-tablist-background: transparent !important">
+                    <TabList :pt="{
+                        root: { class: 'border-none p-0 mb-2 inline-flex' },
+                        tab: ({ context }) => ({
+                            class: [
+                                'flex items-center gap-1.5 px-4 py-2 rounded-lg font-bold transition-all duration-300 border-none outline-none cursor-pointer text-xs',
+                                context.active
+                                    ? 'bg-violet-600/20 text-violet-400 shadow-[0_0_20px_rgba(124,58,237,0.1)] border border-violet-500/20'
+                                    : 'text-slate-500 hover:text-slate-300 !bg-transparent border border-transparent'
+                            ]
+                        }),
+                        activeBar: { class: 'hidden' }
+                    }">
+                        <Tab value="0">
+                            <div class="!flex !flex-row !gap-1">
+                                <i class="pi pi-sparkles text-[10px]" />
+                                <span>Generation</span>
+                            </div>
+                        </Tab>
+                        <Tab value="1">
+                            <div class="!flex !flex-row !gap-1">
+                                <i class="pi pi-images text-[10px]" />
+                                <span>Assets ({{ assetsTotalRecords }})</span>
+                            </div>
+                        </Tab>
+                        <Tab value="2" class="hidden">
+                            <div class="!flex !flex-row !gap-1">
+                                <i class="pi pi-history text-[10px]" />
+                                <span>History ({{ historyTotal }})</span>
+                            </div>
+                        </Tab>
+                    </TabList>
 
-                                <div v-else-if="generationError"
-                                    class="w-full h-full flex flex-col items-center justify-center p-4 text-center animate-in fade-in zoom-in duration-300">
-                                    <div
-                                        class="w-12 h-12 rounded-full bg-red-500/10 flex items-center justify-center mb-3 border border-red-500/20">
-                                        <i class="pi pi-times text-red-400 text-xl"></i>
-                                    </div>
-                                    <h3 class="text-sm font-bold text-slate-200 mb-1">Generation Failed</h3>
-                                    <p
-                                        class="text-[10px] text-red-400 bg-red-500/5 px-3 py-1.5 rounded-lg border border-red-500/10 mb-3 max-w-[90%]">
-                                        {{ generationError }}
-                                    </p>
-                                    <Button label="Try Again" icon="pi pi-refresh" size="small" class="!text-[10px]"
-                                        @click="handleGenerate" severity="secondary" />
-                                </div>
-
-                                <div v-else-if="generatedResult"
-                                    class="w-full h-full flex flex-col gap-3 animate-in fade-in zoom-in duration-300">
-                                    <div class="flex justify-between items-center mb-1">
-                                        <h2 class="text-lg font-bold m-0">Result</h2>
-                                        <div class="flex gap-1">
-                                            <Button icon="pi pi-download" text class="hover:bg-white/10 p-1 text-xs"
-                                                @click="handleDownloadResults" title="Download results" />
-                                            <Button icon="pi pi-share-alt" text class="hover:bg-white/10 p-1 text-xs" />
-                                        </div>
-                                    </div>
-
-                                    <div v-if="generatedResult.type === 'assets'"
-                                        class="grid grid-cols-1 md:grid-cols-2 gap-2 overflow-y-auto">
-                                        <div v-for="asset in generatedResult.assets" :key="asset.id"
-                                            @click="openModal(asset)"
-                                            class="h-80 rounded-xl overflow-hidden border border-white/10 shadow-xl aspect-[9/16] bg-black/20 cursor-pointer hover:border-violet-500/50 hover:scale-[1.01] transition-all duration-300">
-                                            <img :src="API_URL + asset.url + '?thumbnail=true'"
-                                                class="w-full h-full object-cover" />
-                                        </div>
-                                    </div>
-                                    <div v-if="generatedResult.type === 'image'"
-                                        @click="openModal({ url: generatedResult.url, name: 'Generated Image', type: 'IMAGE' })"
-                                        class="flex-1 rounded-xl overflow-hidden border border-white/10 shadow-xl cursor-pointer hover:border-violet-500/50 transition-all duration-300">
-                                        <img :src="generatedResult.url" class="w-full h-full object-cover" />
-                                    </div>
-                                    <div v-else-if="generatedResult.type === 'text'"
-                                        class="flex-1 bg-slate-900/50 p-4 rounded-xl border border-white/10 text-left font-mono text-[11px] leading-tight overflow-y-auto">
-                                        {{ generatedResult.content || generatedResult }}
-                                    </div>
-
-                                    <!-- Tech Prompt Display -->
-                                    <div v-if="generatedResult.tech_prompt" class="w-full mt-2">
-                                        <div class="bg-black/20 rounded-lg p-2 border border-white/5 text-left">
-                                            <p class="text-[9px] text-slate-500 font-bold uppercase mb-1">Technical
-                                                Prompt</p>
-                                            <p class="text-[10px] text-slate-400 font-mono leading-relaxed">{{
-                                                generatedResult.tech_prompt }}</p>
-                                        </div>
-                                    </div>
-
-                                    <!-- Generation Metrics -->
-                                    <div v-if="generatedResult.execution_time || generatedResult.token_usage"
-                                        class="w-full mt-1 flex flex-wrap gap-2">
-                                        <div v-if="generatedResult.execution_time"
-                                            class="bg-black/20 px-2 py-1 rounded text-[9px] text-slate-500 font-mono border border-white/5"
-                                            title="Total Execution Time">
-                                            <i class="pi pi-clock mr-1"></i>{{ generatedResult.execution_time.toFixed(2)
-                                            }}s
-                                        </div>
-                                        <div v-if="generatedResult.api_execution_time"
-                                            class="bg-black/20 px-2 py-1 rounded text-[9px] text-slate-500 font-mono border border-white/5"
-                                            title="API Execution Time">
-                                            <i class="pi pi-server mr-1"></i>{{
-                                                generatedResult.api_execution_time.toFixed(2) }}s
-                                        </div>
-                                        <div v-if="generatedResult.token_usage"
-                                            class="bg-black/20 px-2 py-1 rounded text-[9px] text-slate-500 font-mono border border-white/5"
-                                            title="Token Usage">
-                                            <i class="pi pi-bolt mr-1"></i>{{ generatedResult.token_usage }} toks
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div v-else class="flex flex-col items-center gap-2 text-slate-500 opacity-60">
-                                    <i class="pi pi-image text-3xl" />
-                                    <p class="text-xs font-medium">Ready</p>
-                                </div>
-
-                                <!-- Generation History Section -->
+                    <TabPanels class="bg-transparent p-0">
+                        <TabPanel value="0">
+                            <div class="grid grid-cols-1 lg:grid-cols-4 gap-2">
                                 <div
-                                    class="w-full mt-6 pt-4 border-t border-white/5 flex flex-col max-h-[400px] relative z-10">
-                                    <div class="flex justify-between items-center mb-2 px-1">
-                                        <h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider">History
-                                            ({{
-                                                historyTotal }})</h3>
-                                        <Button v-if="historyTotal > 0" icon="pi pi-refresh" text size="small"
-                                            class="!p-1 !w-6 !h-6 text-slate-500" @click="loadHistory" />
+                                    class="lg:col-span-1 glass-panel p-2 rounded-xl border border-white/5 bg-white/5 flex flex-col gap-3">
+                                    <div class="flex justify-between items-center flex-col">
+                                        <h2 class="text-sm font-bold m-0">Settings</h2>
                                     </div>
 
-                                    <div v-if="historyGenerations.length === 0"
-                                        class="py-10 text-center text-slate-600 italic text-xs">
-                                        No previous generations.
-                                    </div>
-
-                                    <div v-else
-                                        class="flex-1 overflow-y-auto pr-2 custom-scrollbar flex flex-col gap-2">
-                                        <div v-for="gen in historyGenerations" :key="gen.id"
-                                            @click="restoreGeneration(gen)"
-                                            class="glass-panel p-2 rounded-lg border border-white/5 flex gap-3 items-start hover:bg-white/10 cursor-pointer transition-colors group">
-                                            <div class="w-12 h-12 rounded bg-black/40 border border-white/10 flex-shrink-0 mt-0.5 relative z-0"
-                                                @mouseenter="onThumbnailEnter($event, API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true')"
-                                                @mouseleave="onThumbnailLeave">
-                                                <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 rounded opacity-100" />
-                                                <div v-else
-                                                    class="w-full h-full flex items-center justify-center text-slate-700 overflow-hidden rounded">
-                                                    <i class="pi pi-image text-lg" />
-                                                </div>
+                                    <div class="flex flex-col gap-1.5">
+                                        <label
+                                            class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Quality</label>
+                                        <div
+                                            class="!flex !w-full !justify-between  items-center  justify-center !bg-slate-900/50 !p-1  gap-1 !rounded-lg !border !border-white/10">
+                                            <div v-for="option in qualityOptions" :key="option.key"
+                                                @click="quality = option"
+                                                class="w-full items-center justify-center justify-items-center !text-center hover:bg-white/5 hover:text-white p-1 hover:rounded-lg"
+                                                :class="quality.key === option.key ? 'bg-white/9 text-white rounded-lg' : ''">
+                                                <span class="text-white w-full text-center">{{ option.value }}</span>
                                             </div>
-                                            <div class="flex-1 min-w-0 flex flex-col items-start gap-0.5">
-                                                <p class="text-xs text-slate-300 truncate font-medium w-full text-left">
-                                                    {{
-                                                        gen.prompt }}</p>
+                                        </div>
 
-                                                <!-- Tech Prompt Preview -->
-                                                <p v-if="gen.tech_prompt"
-                                                    class="text-[9px] text-slate-500 truncate w-full text-left font-mono opacity-80">
-                                                    {{ gen.tech_prompt }}
-                                                </p>
+                                    </div>
 
-                                                <div class="flex items-center gap-2 text-[10px] text-slate-500">
-                                                    <span>{{ new Date(gen.created_at).toLocaleDateString() }}</span>
-                                                    <span class="capitalize"
-                                                        :class="gen.status === 'done' ? 'text-green-500' : (gen.status === 'failed' ? 'text-red-500' : 'text-amber-500')">{{
-                                                            gen.status }}</span>
-                                                    <i v-if="gen.failed_reason" v-tooltip.right="gen.failed_reason"
-                                                        class="pi pi-exclamation-circle text-red-500"
-                                                        style="font-size: 12px;" />
-                                                </div>
-                                                <!-- Metrics in history -->
-                                                <div v-if="gen.execution_time_seconds || gen.token_usage"
-                                                    class="flex flex-wrap gap-2 text-[9px] text-slate-500 font-mono opacity-70">
-                                                    <span v-if="gen.execution_time_seconds" title="Total Time"><i
-                                                            class="pi pi-clock mr-0.5"></i>{{
-                                                                gen.execution_time_seconds.toFixed(1) }}s</span>
-                                                    <span v-if="gen.api_execution_time_seconds" title="API Time"><i
-                                                            class="pi pi-server mr-0.5"></i>{{
-                                                                gen.api_execution_time_seconds.toFixed(1) }}s</span>
-                                                    <span v-if="gen.token_usage" title="Tokens"><i
-                                                            class="pi pi-bolt mr-0.5"></i>{{ gen.token_usage }}</span>
-                                                </div>
+                                    <div class="flex flex-col gap-1.5">
+                                        <label
+                                            class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Aspect</label>
+                                        <div
+                                            class="!flex !w-full !justify-between  items-center  justify-center !bg-slate-900/50 !p-1  gap-1 !rounded-lg !border !border-white/10">
+                                            <div v-for="option in aspectRatioOptions" :key="option.key"
+                                                @click="aspectRatio = option"
+                                                class="w-full items-center justify-center justify-items-center !text-center hover:bg-white/5 hover:text-white p-1 hover:rounded-lg"
+                                                :class="aspectRatio.key === option.key ? 'bg-white/9 text-white rounded-lg' : ''">
+                                                <span class="text-white w-full text-center">{{ option.value }}</span>
+                                            </div>
+                                        </div>
 
-                                                <!-- Action Buttons -->
-                                                <div class="flex gap-2 mt-1 border-t border-white/5 pt-2 w-full">
-                                                    <Button icon="pi pi-copy" label="Prompt" size="small" text
-                                                        class="!text-[10px] !py-0.5 !px-1.5 text-slate-400 hover:bg-white/5 flex-1"
-                                                        @click.stop="reusePrompt(gen)"
-                                                        v-tooltip.bottom="'Use this prompt'" />
-                                                    <Button icon="pi pi-images" label="Asset" size="small" text
-                                                        class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
-                                                        @click.stop="reuseAsset(gen)"
-                                                        v-tooltip.bottom="'Use original assets'"
-                                                        :disabled="gen.status !== 'done' || gen.assets_list.length == 0" />
-                                                    <Button icon="pi pi-reply" label="Result" size="small" text
-                                                        class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
-                                                        :disabled="gen.status !== 'done' || gen.result_list.length == 0"
-                                                        @click.stop="useResultAsReference(gen)"
-                                                        v-tooltip.bottom="'Use result as reference'" />
-                                                </div>
+                                    </div>
+
+                                    <div class="flex flex-col gap-1.5">
+                                        <label
+                                            class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Description</label>
+
+                                        <div class="relative w-full">
+                                            <Textarea v-model="prompt" rows="3" autoResize placeholder="Describe..."
+                                                class="w-full bg-slate-900 border-white/10 text-white rounded-lg p-2 focus:border-violet-500 transition-all text-xs pr-10" />
+
+                                            <div class="absolute top-1.5 right-1.5 flex gap-1">
+                                                <Button v-if="previousPrompt" icon="pi pi-undo"
+                                                    class="!p-1 !w-6 !h-6 !text-[10px] bg-slate-800 hover:bg-slate-700 border-white/10 text-slate-300"
+                                                    @click="undoImprovePrompt" v-tooltip.top="'Rollback'" />
+
+                                                <Button icon="pi pi-sparkles" :loading="isImprovingPrompt"
+                                                    :disabled="prompt.length <= 10"
+                                                    class="!p-1 !w-6 !h-6 !text-[10px] bg-violet-600/20 hover:bg-violet-600/30 border-violet-500/30 text-violet-400 disabled:opacity-50 disabled:cursor-not-allowed"
+                                                    @click="handleImprovePrompt"
+                                                    v-tooltip.top="prompt.length <= 10 ? 'Enter at least 10 characters' : 'Improve prompt'" />
                                             </div>
                                         </div>
                                     </div>
 
-                                    <!-- Compact Pagination -->
-                                    <div v-if="historyTotal > historyRows" class="mt-2 text-xs">
-                                        <Paginator :first="historyFirst" :rows="historyRows"
-                                            :totalRecords="historyTotal" @page="onHistoryPage" :template="{
-                                                default: 'PrevPageLink PageLinks NextPageLink'
-                                            }" class="!bg-transparent !border-none !p-0 !text-[10px]" :pt="{
-                                                root: { class: '!p-0' },
-                                                pcPageButton: { root: ({ context }) => ({ class: ['!min-w-[24px] !h-6 !text-[10px] !rounded-md', context.active ? '!bg-violet-600/20 !text-violet-400' : '!bg-transparent'] }) },
-                                                pcNextPageButton: { root: { class: '!min-w-[24px] !h-6 !text-[10px]' } },
-                                                pcPreviousPageButton: { root: { class: '!min-w-[24px] !h-6 !text-[10px]' } }
+                                    <!-- Assets Selection -->
+                                    <div class="flex flex-col gap-1.5">
+                                        <div class="flex justify-between items-center">
+                                            <label
+                                                class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Ref
+                                                Assets ({{ selectedAssets.length }})</label>
+                                            <Button label="Add Asset" icon="pi pi-plus" size="small" text
+                                                class="!text-[10px] !py-0.5 !px-1.5 text-violet-400 hover:bg-violet-500/10"
+                                                @click="openAssetSelectionModal" />
+                                        </div>
+
+                                        <div v-if="selectedAssets.length > 0" class="flex flex-wrap gap-1">
+                                            <div v-for="(asset, index) in selectedAssets" :key="asset.id"
+                                                class="relative w-10 h-10 rounded overflow-hidden border border-violet-500/50 group">
+                                                <img :src="API_URL + asset.url + '?thumbnail=true'"
+                                                    class="w-full h-full object-cover" />
+                                                <div @click="removeSelectedAsset(index)"
+                                                    class="absolute inset-0 bg-black/60 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
+                                                    <i class="pi pi-times text-white text-[8px]"></i>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div v-else
+                                            class="text-center py-2 text-[10px] text-slate-500 border border-dashed border-white/10 rounded-lg">
+                                            No assets selected
+                                        </div>
+                                    </div>
+
+                                    <!-- Removed Ref Assets section if characterAssets is empty, but it's already conditional -->
+
+                                    <div class="flex flex-col gap-1.5 mt-auto pt-1.5 border-t border-white/5">
+                                        <div class="flex flex-col gap-2 mb-2">
+                                            <div class="flex items-center gap-2">
+                                                <Checkbox v-model="sendToTelegram" :binary="true"
+                                                    inputId="tg-check-char" />
+                                                <label for="tg-check-char"
+                                                    class="text-[10px] text-slate-400 cursor-pointer select-none">Send
+                                                    result to Telegram</label>
+                                            </div>
+                                            <div v-if="sendToTelegram && !isTelegramIdSaved"
+                                                class="animate-in fade-in slide-in-from-top-1 duration-200">
+                                                <InputText v-model="telegramId" placeholder="Enter Telegram ID"
+                                                    class="w-full !text-[10px] !py-1" @blur="saveTelegramId" />
+                                            </div>
+                                            <div class="flex items-center gap-2 mt-1">
+                                                <Checkbox v-model="useProfileImage" :binary="true"
+                                                    inputId="profile-img-check" />
+                                                <label for="profile-img-check"
+                                                    class="text-[10px] text-slate-400 cursor-pointer select-none">Use
+                                                    Profile Photo</label>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <Button :label="isGenerating ? 'Wait...' : `Generate`"
+                                        :icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-magic'"
+                                        :loading="isGenerating" @click="handleGenerate"
+                                        class="w-full py-2 text-[11px] font-bold bg-gradient-to-r from-violet-600 to-cyan-500 border-none rounded shadow transition-all hover:scale-[1.01] active:scale-[0.99]" />
+
+                                    <Message v-if="generationSuccess" severity="success" :closable="true"
+                                        @close="generationSuccess = false">
+                                        Success!
+                                    </Message>
+                                </div>
+
+                                <div
+                                    class="lg:col-span-3 glass-panel p-3 rounded-xl border border-white/5 bg-white/5 min-h-[300px] flex flex-col items-center justify-center text-center relative overflow-hidden">
+                                    <div v-if="isGenerating" class="flex flex-col items-center gap-3 z-10 w-full px-12">
+                                        <ProgressSpinner style="width: 40px; height: 40px" strokeWidth="4"
+                                            animationDuration=".8s" fill="transparent" />
+                                        <div class="text-center">
+                                            <h3
+                                                class="text-lg font-bold mb-0.5 bg-gradient-to-r from-violet-400 to-cyan-400 bg-clip-text text-transparent capitalize">
+                                                {{ generationStatus || 'Creating...' }}</h3>
+                                            <p class="text-[10px] text-slate-400">Processing using AI</p>
+                                        </div>
+                                        <ProgressBar :value="generationProgress" style="height: 6px; width: 100%"
+                                            :showValue="false" class="rounded-full overflow-hidden !bg-slate-800" :pt="{
+                                                value: { class: '!bg-gradient-to-r !from-violet-600 !to-cyan-500 !transition-all !duration-500' }
+                                            }" />
+                                        <span class="text-[10px] text-slate-500 font-mono">{{ generationProgress
+                                            }}%</span>
+                                    </div>
+
+                                    <div v-else-if="generationError"
+                                        class="w-full h-full flex flex-col items-center justify-center p-4 text-center animate-in fade-in zoom-in duration-300">
+                                        <div
+                                            class="w-12 h-12 rounded-full bg-red-500/10 flex items-center justify-center mb-3 border border-red-500/20">
+                                            <i class="pi pi-times text-red-400 text-xl"></i>
+                                        </div>
+                                        <h3 class="text-sm font-bold text-slate-200 mb-1">Generation Failed</h3>
+                                        <p
+                                            class="text-[10px] text-red-400 bg-red-500/5 px-3 py-1.5 rounded-lg border border-red-500/10 mb-3 max-w-[90%]">
+                                            {{ generationError }}
+                                        </p>
+                                        <Button label="Try Again" icon="pi pi-refresh" size="small" class="!text-[10px]"
+                                            @click="handleGenerate" severity="secondary" />
+                                    </div>
+
+                                    <div v-else-if="generatedResult"
+                                        class="w-full h-full flex flex-col gap-3 animate-in fade-in zoom-in duration-300">
+                                        <div class="flex justify-between items-center mb-1">
+                                            <h2 class="text-lg font-bold m-0">Result</h2>
+                                            <div class="flex gap-1">
+                                                <Button icon="pi pi-download" text class="hover:bg-white/10 p-1 text-xs"
+                                                    @click="handleDownloadResults" title="Download results" />
+                                                <Button icon="pi pi-share-alt" text
+                                                    class="hover:bg-white/10 p-1 text-xs" />
+                                            </div>
+                                        </div>
+
+                                        <div v-if="generatedResult.type === 'assets'"
+                                            class="grid grid-cols-1 md:grid-cols-2 gap-2 overflow-y-auto">
+                                            <div v-for="asset in generatedResult.assets" :key="asset.id"
+                                                @click="openModal(asset)"
+                                                class="h-80 rounded-xl overflow-hidden border border-white/10 shadow-xl aspect-[9/16] bg-black/20 cursor-pointer hover:border-violet-500/50 hover:scale-[1.01] transition-all duration-300">
+                                                <img :src="API_URL + asset.url + '?thumbnail=true'"
+                                                    class="w-full h-full object-cover" />
+                                            </div>
+                                        </div>
+                                        <div v-if="generatedResult.type === 'image'"
+                                            @click="openModal({ url: generatedResult.url, name: 'Generated Image', type: 'IMAGE' })"
+                                            class="flex-1 rounded-xl overflow-hidden border border-white/10 shadow-xl cursor-pointer hover:border-violet-500/50 transition-all duration-300">
+                                            <img :src="generatedResult.url" class="w-full h-full object-cover" />
+                                        </div>
+                                        <div v-else-if="generatedResult.type === 'text'"
+                                            class="flex-1 bg-slate-900/50 p-4 rounded-xl border border-white/10 text-left font-mono text-[11px] leading-tight overflow-y-auto">
+                                            {{ generatedResult.content || generatedResult }}
+                                        </div>
+
+                                        <!-- Tech Prompt Display -->
+                                        <div v-if="generatedResult.tech_prompt" class="w-full mt-2">
+                                            <div class="bg-black/20 rounded-lg p-2 border border-white/5 text-left">
+                                                <p class="text-[9px] text-slate-500 font-bold uppercase mb-1">Technical
+                                                    Prompt</p>
+                                                <p class="text-[10px] text-slate-400 font-mono leading-relaxed">{{
+                                                    generatedResult.tech_prompt }}</p>
+                                            </div>
+                                        </div>
+
+                                        <!-- Generation Metrics -->
+                                        <div v-if="generatedResult.execution_time || generatedResult.token_usage"
+                                            class="w-full mt-1 flex flex-wrap gap-2">
+                                            <div v-if="generatedResult.execution_time"
+                                                class="bg-black/20 px-2 py-1 rounded text-[9px] text-slate-500 font-mono border border-white/5"
+                                                title="Total Execution Time">
+                                                <i class="pi pi-clock mr-1"></i>{{
+                                                    generatedResult.execution_time.toFixed(2)
+                                                }}s
+                                            </div>
+                                            <div v-if="generatedResult.api_execution_time"
+                                                class="bg-black/20 px-2 py-1 rounded text-[9px] text-slate-500 font-mono border border-white/5"
+                                                title="API Execution Time">
+                                                <i class="pi pi-server mr-1"></i>{{
+                                                    generatedResult.api_execution_time.toFixed(2) }}s
+                                            </div>
+                                            <div v-if="generatedResult.token_usage"
+                                                class="bg-black/20 px-2 py-1 rounded text-[9px] text-slate-500 font-mono border border-white/5"
+                                                title="Token Usage">
+                                                <i class="pi pi-bolt mr-1"></i>{{ generatedResult.token_usage }} toks
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div v-else class="flex flex-col items-center gap-2 text-slate-500 opacity-60">
+                                        <i class="pi pi-image text-3xl" />
+                                        <p class="text-xs font-medium">Ready</p>
+                                    </div>
+
+                                    <!-- Generation History Section -->
+                                    <div
+                                        class="w-full mt-6 pt-4 border-t border-white/5 flex flex-col max-h-[400px] relative z-10">
+                                        <div class="flex justify-between items-center mb-2 px-1">
+                                            <h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider">
+                                                History
+                                                ({{
+                                                    historyTotal }})</h3>
+                                            <Button v-if="historyTotal > 0" icon="pi pi-refresh" text size="small"
+                                                class="!p-1 !w-6 !h-6 text-slate-500" @click="loadHistory" />
+                                        </div>
+
+                                        <div v-if="historyGenerations.length === 0"
+                                            class="py-10 text-center text-slate-600 italic text-xs">
+                                            No previous generations.
+                                        </div>
+
+                                        <div v-else
+                                            class="flex-1 overflow-y-auto pr-2 custom-scrollbar flex flex-col gap-2">
+                                            <div v-for="gen in historyGenerations" :key="gen.id"
+                                                @click="restoreGeneration(gen)"
+                                                class="glass-panel p-2 rounded-lg border border-white/5 flex gap-3 items-start hover:bg-white/10 cursor-pointer transition-colors group">
+                                                <div class="w-12 h-12 rounded bg-black/40 border border-white/10 flex-shrink-0 mt-0.5 relative z-0"
+                                                    @mouseenter="onThumbnailEnter($event, API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true')"
+                                                    @mouseleave="onThumbnailLeave">
+                                                    <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 rounded opacity-100" />
+                                                    <div v-else
+                                                        class="w-full h-full flex items-center justify-center text-slate-700 overflow-hidden rounded">
+                                                        <i class="pi pi-image text-lg" />
+                                                    </div>
+                                                </div>
+                                                <div class="flex-1 min-w-0 flex flex-col items-start gap-0.5">
+                                                    <p
+                                                        class="text-xs text-slate-300 truncate font-medium w-full text-left">
+                                                        {{
+                                                            gen.prompt }}</p>
+
+                                                    <!-- Tech Prompt Preview -->
+                                                    <p v-if="gen.tech_prompt"
+                                                        class="text-[9px] text-slate-500 truncate w-full text-left font-mono opacity-80">
+                                                        {{ gen.tech_prompt }}
+                                                    </p>
+
+                                                    <div class="flex items-center gap-2 text-[10px] text-slate-500">
+                                                        <span>{{ new Date(gen.created_at).toLocaleDateString() }}</span>
+                                                        <span class="capitalize"
+                                                            :class="gen.status === 'done' ? 'text-green-500' : (gen.status === 'failed' ? 'text-red-500' : 'text-amber-500')">{{
+                                                                gen.status }}</span>
+                                                        <i v-if="gen.failed_reason" v-tooltip.right="gen.failed_reason"
+                                                            class="pi pi-exclamation-circle text-red-500"
+                                                            style="font-size: 12px;" />
+                                                    </div>
+                                                    <!-- Metrics in history -->
+                                                    <div v-if="gen.execution_time_seconds || gen.token_usage"
+                                                        class="flex flex-wrap gap-2 text-[9px] text-slate-500 font-mono opacity-70">
+                                                        <span v-if="gen.execution_time_seconds" title="Total Time"><i
+                                                                class="pi pi-clock mr-0.5"></i>{{
+                                                                    gen.execution_time_seconds.toFixed(1) }}s</span>
+                                                        <span v-if="gen.api_execution_time_seconds" title="API Time"><i
+                                                                class="pi pi-server mr-0.5"></i>{{
+                                                                    gen.api_execution_time_seconds.toFixed(1) }}s</span>
+                                                        <span v-if="gen.token_usage" title="Tokens"><i
+                                                                class="pi pi-bolt mr-0.5"></i>{{ gen.token_usage
+                                                                }}</span>
+                                                    </div>
+
+                                                    <!-- Action Buttons -->
+                                                    <div class="flex gap-2 mt-1 border-t border-white/5 pt-2 w-full">
+                                                        <Button icon="pi pi-copy" label="Prompt" size="small" text
+                                                            class="!text-[10px] !py-0.5 !px-1.5 text-slate-400 hover:bg-white/5 flex-1"
+                                                            @click.stop="reusePrompt(gen)"
+                                                            v-tooltip.bottom="'Use this prompt'" />
+                                                        <Button icon="pi pi-images" label="Asset" size="small" text
+                                                            class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
+                                                            @click.stop="reuseAsset(gen)"
+                                                            v-tooltip.bottom="'Use original assets'"
+                                                            :disabled="gen.status !== 'done' || gen.assets_list.length == 0" />
+                                                        <Button icon="pi pi-reply" label="Result" size="small" text
+                                                            class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
+                                                            :disabled="gen.status !== 'done' || gen.result_list.length == 0"
+                                                            @click.stop="useResultAsReference(gen)"
+                                                            v-tooltip.bottom="'Use result as reference'" />
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Compact Pagination -->
+                                        <div v-if="historyTotal > historyRows" class="mt-2 text-xs">
+                                            <Paginator :first="historyFirst" :rows="historyRows"
+                                                :totalRecords="historyTotal" @page="onHistoryPage" :template="{
+                                                    default: 'PrevPageLink PageLinks NextPageLink'
+                                                }" class="!bg-transparent !border-none !p-0 !text-[10px]" :pt="{
+                                                    root: { class: '!p-0' },
+                                                    pcPageButton: { root: ({ context }) => ({ class: ['!min-w-[24px] !h-6 !text-[10px] !rounded-md', context.active ? '!bg-violet-600/20 !text-violet-400' : '!bg-transparent'] }) },
+                                                    pcNextPageButton: { root: { class: '!min-w-[24px] !h-6 !text-[10px]' } },
+                                                    pcPreviousPageButton: { root: { class: '!min-w-[24px] !h-6 !text-[10px]' } }
+                                                }" />
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div
+                                    class="absolute -bottom-20 -right-20 w-64 h-64 bg-violet-600/10 blur-[100px] rounded-full pointer-events-none">
+                                </div>
+                                <div
+                                    class="absolute -top-20 -left-20 w-64 h-64 bg-cyan-600/10 blur-[100px] rounded-full pointer-events-none">
+                                </div>
+                            </div>
+                        </TabPanel>
+
+                        <TabPanel value="1">
+                            <div class="glass-panel p-8 rounded-3xl border border-white/5 bg-white/5">
+                                <div class="flex justify-between items-center mb-6">
+                                    <h2 class="text-2xl font-bold m-0">Linked Assets ({{ assetsTotalRecords }})</h2>
+                                    <div class="flex gap-3">
+                                        <Button v-if="isMultiSelectMode"
+                                            :label="`Use in Generation (${bulkSelectedAssetIds.length})`"
+                                            icon="pi pi-bolt" severity="success"
+                                            :disabled="bulkSelectedAssetIds.length === 0" @click="handleUseInGeneration"
+                                            class="!py-2 !px-4 !text-sm font-bold rounded-xl transition-all shadow-lg shadow-green-500/20" />
+
+                                        <Button :icon="isMultiSelectMode ? 'pi pi-times' : 'pi pi-list-check'"
+                                            :severity="isMultiSelectMode ? 'danger' : 'secondary'"
+                                            @click="isMultiSelectMode = !isMultiSelectMode" text
+                                            class="!p-2 hover:bg-white/10 rounded-xl transition-all"
+                                            :title="isMultiSelectMode ? 'Cancel Selection' : 'Multi-select'" />
+
+                                        <input type="file" ref="fileInput" class="hidden" accept="image/*"
+                                            @change="onFileSelected" />
+                                        <Button :label="isUploading ? 'Uploading...' : 'Upload Asset'"
+                                            :icon="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'"
+                                            :loading="isUploading" @click="triggerFileUpload"
+                                            class="!py-2 !px-4 !text-sm font-bold bg-white/5 hover:bg-white/10 border-white/10 text-white rounded-xl transition-all" />
+                                    </div>
+                                </div>
+
+                                <div v-if="characterAssets.length === 0"
+                                    class="text-center py-16 text-slate-400 bg-white/[0.02] rounded-2xl">
+                                    No assets linked to this character.
+                                </div>
+
+                                <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">
+                                        <div v-for="asset in paginatedCharacterAssets" :key="asset.id"
+                                            @click="openModal(asset)"
+                                            class="glass-panel rounded-2xl overflow-hidden border transition-all duration-300 cursor-pointer hover:-translate-y-1 relative"
+                                            :class="[
+                                                bulkSelectedAssetIds.includes(asset.id)
+                                                    ? 'border-violet-500 bg-violet-500/10 shadow-lg shadow-violet-500/10'
+                                                    : isMultiSelectMode ? 'border-white/10 opacity-70 scale-[0.98]' : 'border-white/5 hover:border-white/20'
+                                            ]">
+                                            <div class="h-70 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" />
+
+                                                <div v-if="isMultiSelectMode"
+                                                    class="absolute inset-0 flex items-center justify-center bg-violet-900/20 backdrop-blur-[1px] transition-all"
+                                                    :class="bulkSelectedAssetIds.includes(asset.id) ? 'opacity-100' : 'opacity-0 hover:opacity-100'">
+                                                    <div class="w-12 h-12 rounded-full flex items-center justify-center border-2 transition-all"
+                                                        :class="bulkSelectedAssetIds.includes(asset.id) ? 'bg-violet-600 border-violet-400 scale-110 shadow-lg' : 'bg-black/40 border-white/40 scale-100'">
+                                                        <i class="pi pi-check text-white text-xl"></i>
+                                                    </div>
+                                                </div>
+
+                                                <div
+                                                    class="absolute top-2 right-2 bg-black/60 backdrop-blur-sm px-2 py-1 rounded text-xs uppercase text-white">
+                                                    {{ asset.type }}
+                                                </div>
+                                            </div>
+                                            <div class="p-4">
+                                                <h3
+                                                    class="text-sm font-semibold m-0 whitespace-nowrap overflow-hidden text-ellipsis">
+                                                    {{ asset.name }}
+                                                </h3>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Pagination -->
+                                    <div v-if="assetsTotalRecords > assetsRows" class="mt-8">
+                                        <Paginator :first="assetsFirst" :rows="assetsRows"
+                                            :totalRecords="assetsTotalRecords" @page="onAssetsPage" :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' } }
                                             }" />
                                     </div>
                                 </div>
                             </div>
+                        </TabPanel>
 
-                            <div
-                                class="absolute -bottom-20 -right-20 w-64 h-64 bg-violet-600/10 blur-[100px] rounded-full pointer-events-none">
-                            </div>
-                            <div
-                                class="absolute -top-20 -left-20 w-64 h-64 bg-cyan-600/10 blur-[100px] rounded-full pointer-events-none">
-                            </div>
+                    </TabPanels>
+                </Tabs>
+            </div>
+
+            <div v-else-if="loading" class="flex-1 p-8 overflow-y-auto flex flex-col gap-8">
+                <Skeleton width="10rem" height="2rem" />
+                <div class="glass-panel p-8 rounded-3xl">
+                    <div class="flex gap-8 items-center">
+                        <Skeleton shape="circle" size="9.5rem" />
+                        <div class="flex-1">
+                            <Skeleton width="20rem" height="3rem" class="mb-4" />
+                            <Skeleton width="15rem" height="2rem" class="mb-6" />
+                            <Skeleton width="100%" height="4rem" />
                         </div>
-                    </TabPanel>
+                    </div>
+                </div>
+            </div>
 
-                    <TabPanel value="1">
-                        <div class="glass-panel p-8 rounded-3xl border border-white/5 bg-white/5">
-                            <div class="flex justify-between items-center mb-6">
-                                <h2 class="text-2xl font-bold m-0">Linked Assets ({{ assetsTotalRecords }})</h2>
-                                <div class="flex gap-3">
-                                    <Button v-if="isMultiSelectMode"
-                                        :label="`Use in Generation (${bulkSelectedAssetIds.length})`" icon="pi pi-bolt"
-                                        severity="success" :disabled="bulkSelectedAssetIds.length === 0"
-                                        @click="handleUseInGeneration"
-                                        class="!py-2 !px-4 !text-sm font-bold rounded-xl transition-all shadow-lg shadow-green-500/20" />
+            <div v-else class="flex-1 flex items-center justify-center text-slate-400">
+                Character not found.
+            </div>
 
-                                    <Button :icon="isMultiSelectMode ? 'pi pi-times' : 'pi pi-list-check'"
-                                        :severity="isMultiSelectMode ? 'danger' : 'secondary'"
-                                        @click="isMultiSelectMode = !isMultiSelectMode" text
-                                        class="!p-2 hover:bg-white/10 rounded-xl transition-all"
-                                        :title="isMultiSelectMode ? 'Cancel Selection' : 'Multi-select'" />
-
-                                    <input type="file" ref="fileInput" class="hidden" accept="image/*"
-                                        @change="onFileSelected" />
-                                    <Button :label="isUploading ? 'Uploading...' : 'Upload Asset'"
-                                        :icon="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'"
-                                        :loading="isUploading" @click="triggerFileUpload"
-                                        class="!py-2 !px-4 !text-sm font-bold bg-white/5 hover:bg-white/10 border-white/10 text-white rounded-xl transition-all" />
-                                </div>
-                            </div>
-
-                            <div v-if="characterAssets.length === 0"
-                                class="text-center py-16 text-slate-400 bg-white/[0.02] rounded-2xl">
-                                No assets linked to this character.
-                            </div>
-
-                            <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">
-                                    <div v-for="asset in paginatedCharacterAssets" :key="asset.id"
-                                        @click="openModal(asset)"
-                                        class="glass-panel rounded-2xl overflow-hidden border transition-all duration-300 cursor-pointer hover:-translate-y-1 relative"
-                                        :class="[
-                                            bulkSelectedAssetIds.includes(asset.id)
-                                                ? 'border-violet-500 bg-violet-500/10 shadow-lg shadow-violet-500/10'
-                                                : isMultiSelectMode ? 'border-white/10 opacity-70 scale-[0.98]' : 'border-white/5 hover:border-white/20'
-                                        ]">
-                                        <div class="h-70 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" />
-
-                                            <div v-if="isMultiSelectMode"
-                                                class="absolute inset-0 flex items-center justify-center bg-violet-900/20 backdrop-blur-[1px] transition-all"
-                                                :class="bulkSelectedAssetIds.includes(asset.id) ? 'opacity-100' : 'opacity-0 hover:opacity-100'">
-                                                <div class="w-12 h-12 rounded-full flex items-center justify-center border-2 transition-all"
-                                                    :class="bulkSelectedAssetIds.includes(asset.id) ? 'bg-violet-600 border-violet-400 scale-110 shadow-lg' : 'bg-black/40 border-white/40 scale-100'">
-                                                    <i class="pi pi-check text-white text-xl"></i>
-                                                </div>
-                                            </div>
-
-                                            <div
-                                                class="absolute top-2 right-2 bg-black/60 backdrop-blur-sm px-2 py-1 rounded text-xs uppercase text-white">
-                                                {{ asset.type }}
-                                            </div>
-                                        </div>
-                                        <div class="p-4">
-                                            <h3
-                                                class="text-sm font-semibold m-0 whitespace-nowrap overflow-hidden text-ellipsis">
-                                                {{ asset.name }}
-                                            </h3>
-                                        </div>
+            <Dialog v-model:visible="isModalVisible" modal dismissableMask header="Asset View"
+                :style="{ width: '90vw', maxWidth: '800px' }" class="glass-panel rounded-2xl">
+                <div v-if="selectedAsset" class="flex flex-col items-center">
+                    <img :src="selectedAsset.link ? API_URL + selectedAsset.link : (selectedAsset.url ? API_URL + selectedAsset.url : 'https://via.placeholder.com/800')"
+                        :alt="selectedAsset.name"
+                        class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
+                    <div class="mt-6 text-center">
+                        <h2 class="text-2xl font-bold mb-2">{{ selectedAsset.name }}</h2>
+                        <p class="text-slate-400">{{ selectedAsset.type }}</p>
+                    </div>
+                </div>
+            </Dialog>
+            <!-- Asset Selection Modal (Global) -->
+            <Dialog v-model:visible="isAssetSelectionVisible" modal header="Select Reference Assets"
+                :style="{ width: '80vw', maxWidth: '1000px' }" class="glass-panel rounded-2xl">
+                <div class="flex flex-col h-[70vh]">
+                    <div v-if="allAssets.length > 0" class="flex-1 overflow-y-auto p-1 text-slate-100">
+                        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                            <div v-for="asset in allAssets" :key="asset.id" @click="toggleAssetSelection(asset)"
+                                class="aspect-square rounded-xl overflow-hidden cursor-pointer relative border transition-all"
+                                :class="selectedAssets.some(a => a.id === asset.id) ? 'border-violet-500 ring-2 ring-violet-500/20' : 'border-white/10 hover:border-white/30'">
+                                <img :src="API_URL + asset.url + '?thumbnail=true'"
+                                    class="w-full h-full object-cover" />
+                                <div v-if="selectedAssets.some(a => a.id === asset.id)"
+                                    class="absolute inset-0 bg-violet-600/30 flex items-center justify-center">
+                                    <div class="bg-violet-600 rounded-full p-1 shadow-lg">
+                                        <i class="pi pi-check text-white text-xs font-bold"></i>
                                     </div>
                                 </div>
-
-                                <!-- Pagination -->
-                                <div v-if="assetsTotalRecords > assetsRows" class="mt-8">
-                                    <Paginator :first="assetsFirst" :rows="assetsRows"
-                                        :totalRecords="assetsTotalRecords" @page="onAssetsPage" :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' } }
-                                        }" />
-                                </div>
-                            </div>
-                        </div>
-                    </TabPanel>
-
-                </TabPanels>
-            </Tabs>
-        </main>
-
-        <div v-else-if="loading" class="flex-1 p-8 overflow-y-auto flex flex-col gap-8">
-            <Skeleton width="10rem" height="2rem" />
-            <div class="glass-panel p-8 rounded-3xl">
-                <div class="flex gap-8 items-center">
-                    <Skeleton shape="circle" size="9.5rem" />
-                    <div class="flex-1">
-                        <Skeleton width="20rem" height="3rem" class="mb-4" />
-                        <Skeleton width="15rem" height="2rem" class="mb-6" />
-                        <Skeleton width="100%" height="4rem" />
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div v-else class="flex-1 flex items-center justify-center text-slate-400">
-            Character not found.
-        </div>
-
-        <Dialog v-model:visible="isModalVisible" modal dismissableMask header="Asset View"
-            :style="{ width: '90vw', maxWidth: '800px' }" class="glass-panel rounded-2xl">
-            <div v-if="selectedAsset" class="flex flex-col items-center">
-                <img :src="selectedAsset.link ? API_URL + selectedAsset.link : (selectedAsset.url ? API_URL + selectedAsset.url : 'https://via.placeholder.com/800')"
-                    :alt="selectedAsset.name" class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
-                <div class="mt-6 text-center">
-                    <h2 class="text-2xl font-bold mb-2">{{ selectedAsset.name }}</h2>
-                    <p class="text-slate-400">{{ selectedAsset.type }}</p>
-                </div>
-            </div>
-        </Dialog>
-        <!-- Asset Selection Modal (Global) -->
-        <Dialog v-model:visible="isAssetSelectionVisible" modal header="Select Reference Assets"
-            :style="{ width: '80vw', maxWidth: '1000px' }" class="glass-panel rounded-2xl">
-            <div class="flex flex-col h-[70vh]">
-                <div v-if="allAssets.length > 0" class="flex-1 overflow-y-auto p-1 text-slate-100">
-                    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
-                        <div v-for="asset in allAssets" :key="asset.id" @click="toggleAssetSelection(asset)"
-                            class="aspect-square rounded-xl overflow-hidden cursor-pointer relative border transition-all"
-                            :class="selectedAssets.some(a => a.id === asset.id) ? 'border-violet-500 ring-2 ring-violet-500/20' : 'border-white/10 hover:border-white/30'">
-                            <img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
-                            <div v-if="selectedAssets.some(a => a.id === asset.id)"
-                                class="absolute inset-0 bg-violet-600/30 flex items-center justify-center">
-                                <div class="bg-violet-600 rounded-full p-1 shadow-lg">
-                                    <i class="pi pi-check text-white text-xs font-bold"></i>
-                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <div v-else class="flex-1 flex items-center justify-center text-slate-500">
-                    No assets found
-                </div>
+                    <div v-else class="flex-1 flex items-center justify-center text-slate-500">
+                        No assets found
+                    </div>
 
-                <div class="mt-4 pt-4 border-t border-white/10 flex justify-between items-center text-slate-100">
-                    <span class="text-sm text-slate-400">{{ selectedAssets.length }} selected</span>
-                    <div class="flex gap-4 items-center">
-                        <Paginator :first="modalAssetsFirst" :rows="modalAssetsRows" :totalRecords="modalAssetsTotal"
-                            @page="onModalAssetsPage" class="!bg-transparent !border-none !p-0" />
-                        <Button label="Done" @click="isAssetSelectionVisible = false" class="!px-6" />
+                    <div class="mt-4 pt-4 border-t border-white/10 flex justify-between items-center text-slate-100">
+                        <span class="text-sm text-slate-400">{{ selectedAssets.length }} selected</span>
+                        <div class="flex gap-4 items-center">
+                            <Paginator :first="modalAssetsFirst" :rows="modalAssetsRows"
+                                :totalRecords="modalAssetsTotal" @page="onModalAssetsPage"
+                                class="!bg-transparent !border-none !p-0" />
+                            <Button label="Done" @click="isAssetSelectionVisible = false" class="!px-6" />
+                        </div>
                     </div>
                 </div>
-            </div>
-        </Dialog>
+            </Dialog>
+        </div>
     </div>
 </template>
 <style scoped>
diff --git a/src/views/CharactersView.vue b/src/views/CharactersView.vue
index 89bed93..5b817af 100644
--- a/src/views/CharactersView.vue
+++ b/src/views/CharactersView.vue
@@ -24,99 +24,47 @@ const goToDetail = (id) => {
     router.push({ name: 'character-detail', params: { id } })
 }
 
-const handleLogout = () => {
-    localStorage.removeItem('auth_code')
-    router.push('/login')
-}
+
 </script>
 
 <template>
-    <div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100">
-        <!-- Sidebar -->
-        <nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5">
-            <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
+    <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">Characters</h1>
+                <p class="mt-2 mb-0 text-slate-400">Manage your AI personas</p>
+            </div>
+        </header>
+
+        <!-- Loading State -->
+        <div v-if="loading" 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 items-center gap-6">
+                <Skeleton shape="circle" size="5rem" />
+                <div class="flex-1">
+                    <Skeleton class="mb-2" height="1.5rem" />
+                    <Skeleton height="1rem" />
                 </div>
             </div>
+        </div>
 
-            <div class="flex-1 flex flex-col gap-6 w-full items-center">
-                <div v-tooltip.right="'Home'"
-                    class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner">
-                    <span class="text-2xl">🏠</span>
+        <!-- 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"
+                @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"
+                        class="w-full h-full object-cover" />
                 </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/assets')" v-tooltip.right="'Assets'">
-                    <span class="text-2xl">📂</span>
-                </div>
-                <!-- Image Generation -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/generation')" v-tooltip.right="'Image Generation'">
-                    <span class="text-2xl">🎨</span>
-                </div>
-                <div v-tooltip.right="'Characters'"
-                    class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50">
-                    <span class="text-2xl">👥</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/image-to-prompt')" v-tooltip.right="'Image to Prompt'">
-                    <span class="text-2xl">✨</span>
+                <div class="flex-1 overflow-hidden">
+                    <h3 class="m-0 mb-2 text-xl font-semibold">{{ char.name }}</h3>
+                    <p class="m-0 text-sm text-slate-400 line-clamp-2">
+                        {{ char.character_bio }}
+                    </p>
                 </div>
             </div>
-
-            <div class="mt-auto flex flex-col items-center gap-4">
-                <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'">
-                    <i class="pi pi-power-off"></i>
-                </div>
-                <div class="w-10 h-10 rounded-full bg-slate-800 border-2 border-violet-600 flex items-center justify-center font-bold text-slate-50 cursor-pointer hover:scale-105 transition-all"
-                    title="Profile">
-                    U
-                </div>
-            </div>
-        </nav>
-
-        <!-- Main Content -->
-        <main class="flex-1 p-8 overflow-y-auto flex flex-col">
-            <!-- 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>
-            </header>
-
-            <!-- Loading State -->
-            <div v-if="loading" 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 items-center gap-6">
-                    <Skeleton shape="circle" size="5rem" />
-                    <div class="flex-1">
-                        <Skeleton class="mb-2" height="1.5rem" />
-                        <Skeleton height="1rem" />
-                    </div>
-                </div>
-            </div>
-
-            <!-- 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"
-                    @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"
-                            class="w-full h-full object-cover" />
-                    </div>
-                    <div class="flex-1 overflow-hidden">
-                        <h3 class="m-0 mb-2 text-xl font-semibold">{{ char.name }}</h3>
-                        <p class="m-0 text-sm text-slate-400 line-clamp-2">
-                            {{ char.character_bio }}
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </main>
+        </div>
     </div>
 </template>
 
diff --git a/src/views/FlexibleGenerationView.vue b/src/views/FlexibleGenerationView.vue
index 37f63f6..211a857 100644
--- a/src/views/FlexibleGenerationView.vue
+++ b/src/views/FlexibleGenerationView.vue
@@ -249,10 +249,7 @@ onMounted(() => {
 })
 
 // --- Sidebar Logic (Duplicated for now) ---
-const handleLogout = () => {
-    localStorage.removeItem('auth_code')
-    router.push('/login')
-}
+// handleLogout removed - handled in AppSidebar
 
 // Image Preview
 const isImagePreviewVisible = ref(false)
@@ -330,56 +327,32 @@ const clearPrompt = () => {
     previousPrompt.value = ''
 }
 
+const deleteGeneration = async (gen) => {
+    if (!gen) return
+    try {
+        // Optimistic update
+        historyGenerations.value = historyGenerations.value.filter(g => g.id !== gen.id)
+        historyTotal.value--
+
+        // Use deleteAsset since generations are essentially assets in this view's context, 
+        // or we need a way to delete the generation record. 
+        // The user said "delete asset", and these are likely linked.
+        // If gen has a result list, we delete the first asset.
+        if (gen.result_list && gen.result_list.length > 0) {
+            await dataService.deleteAsset(gen.result_list[0])
+        }
+    } catch (e) {
+        console.error('Failed to delete generation', e)
+        // Reload to restore state if failed
+        loadData()
+    }
+}
+
 </script>
 
 <template>
-    <div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100 font-sans">
-        <!-- Sidebar -->
-        <nav
-            class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5 bg-slate-900/50 backdrop-blur-md">
-            <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
-                </div>
-            </div>
-
-            <div class="flex-1 flex flex-col gap-6 w-full items-center">
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/')" v-tooltip.right="'Home'">
-                    <span class="text-2xl">🏠</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/assets')" v-tooltip.right="'Assets'">
-                    <span class="text-2xl">📂</span>
-                </div>
-                <!-- Image Generation -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/generation')" v-tooltip.right="'Image Generation'">
-                    <span class="text-2xl">🎨</span>
-                </div>
-                <!-- Active State for Flexible Generation -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner"
-                    v-tooltip.right="'Flexible Generation'">
-                    <span class="text-2xl">🖌️</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/characters')" v-tooltip.right="'Characters'">
-                    <span class="text-2xl">👥</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/image-to-prompt')" v-tooltip.right="'Image to Prompt'">
-                    <span class="text-2xl">✨</span>
-                </div>
-            </div>
-
-            <div class="mt-auto">
-                <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">
-                    <i class="pi pi-power-off"></i>
-                </div>
-            </div>
-        </nav>
+    <div class="flex flex-col h-full font-sans">
+        <!-- Sidebar and Mobile Nav removed (handled by App.vue) -->
 
         <!-- Main Content -->
         <main class="flex-1 relative flex flex-col h-full overflow-hidden">
@@ -397,10 +370,10 @@ const clearPrompt = () => {
             </header>
 
             <!-- Gallery Grid -->
-            <div class="flex-1 overflow-y-auto p-4 pb-32"> <!-- pb-32 to allow space for bottom panel -->
+            <div class="flex-1 overflow-y-auto p-4 pb-32 md:pb-32"> <!-- pb-32 to allow space for bottom panel -->
 
                 <div v-if="historyGenerations.length > 0"
-                    class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 gap-1">
+                    class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 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">
 
@@ -419,7 +392,11 @@ const clearPrompt = () => {
 
                             <!-- Top Actions -->
                             <div
-                                class="flex justify-end gap-1 translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200">
+                                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-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)" />
+
                                 <Button 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)" />
@@ -451,7 +428,7 @@ const clearPrompt = () => {
             <!-- Bottom Settings Panel -->
             <transition name="slide-up">
                 <div v-if="isSettingsVisible"
-                    class="absolute bottom-0 left-0 right-0 glass-panel border-t border-white/10 bg-slate-900/95 backdrop-blur-xl p-6 z-20 rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.5)] flex flex-col gap-4 max-h-[85vh] overflow-y-auto">
+                    class="absolute bottom-0 left-0 right-0 glass-panel border-t border-white/10 bg-slate-900/95 backdrop-blur-xl p-6 z-[60] rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.5)] flex flex-col gap-4 max-h-[85vh] overflow-y-auto">
 
                     <!-- Handle / Close Button -->
                     <div class="w-full flex justify-center -mt-2 mb-2 cursor-pointer"
@@ -483,10 +460,11 @@ const clearPrompt = () => {
                                 <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" />
+
                             </div>
 
                             <!-- Assets & Character Row -->
-                            <div class="flex gap-4">
+                            <div class="flex flex-col md:flex-row gap-4">
                                 <div class="flex-1 flex flex-col gap-2">
                                     <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Character
                                         (Optional)</label>
@@ -544,7 +522,8 @@ const clearPrompt = () => {
                                             <div class="flex items-center gap-2">
                                                 <img :src="API_URL + slotProps.option.url + '?thumbnail=true'"
                                                     class="w-8 h-8 rounded object-cover border border-white/10" />
-                                                <span class="text-xs truncate max-w-[150px]">{{ slotProps.option.name ||
+                                                <span class="text-xs truncate max-w-[150px]">{{
+                                                    slotProps.option.name ||
                                                     'Asset ' + slotProps.option.id.substring(0, 4) }}</span>
                                             </div>
                                         </template>
@@ -611,7 +590,7 @@ const clearPrompt = () => {
 
             <!-- Toggle Button (when hidden) -->
             <transition name="fade">
-                <div v-if="!isSettingsVisible" class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10">
+                <div v-if="!isSettingsVisible" class="absolute bottom-24 md:bottom-8 left-1/2 -translate-x-1/2 z-10">
                     <Button label="Open Controls" icon="pi pi-chevron-up" @click="isSettingsVisible = true" rounded
                         class="!bg-violet-600 !border-none !shadow-xl !font-bold shadow-violet-500/40 !px-6 !py-3" />
                 </div>
@@ -619,6 +598,8 @@ const clearPrompt = () => {
 
         </main>
 
+
+
         <!-- Image Preview Modal -->
         <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
             :style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"
diff --git a/src/views/ImageGenerationView.vue b/src/views/ImageGenerationView.vue
index 9501b55..80fc38e 100644
--- a/src/views/ImageGenerationView.vue
+++ b/src/views/ImageGenerationView.vue
@@ -409,10 +409,7 @@ const copyToClipboard = () => {
     // Implement if needed for prompt copying
 }
 
-const handleLogout = () => {
-    localStorage.removeItem('auth_code')
-    router.push('/login')
-}
+
 
 // --- Lifecycle ---
 onMounted(() => {
@@ -421,50 +418,9 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100">
-        <!-- Sidebar -->
-        <nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5">
-            <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
-                </div>
-            </div>
-
-            <div class="flex-1 flex flex-col gap-6 w-full items-center">
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/')" v-tooltip.right="'Home'">
-                    <span class="text-2xl">🏠</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/assets')" v-tooltip.right="'Assets'">
-                    <span class="text-2xl">📂</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/flexible-generation')" v-tooltip.right="'Flexible Generation'">
-                    <span class="text-2xl">🎨</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/characters')" v-tooltip.right="'Characters'">
-                    <span class="text-2xl">👥</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/image-to-prompt')" v-tooltip.right="'Image to Prompt'">
-                    <span class="text-2xl">✨</span>
-                </div>
-            </div>
-
-            <div class="mt-auto flex flex-col items-center gap-4">
-                <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'">
-                    <i class="pi pi-power-off"></i>
-                </div>
-            </div>
-        </nav>
-
-        <!-- Main Content -->
-        <main class="flex-1 p-8 overflow-y-auto flex flex-col">
+    <div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100">
+        <!-- Main Content (Sidebar removed) -->
+        <div class="flex-1 flex flex-col">
             <header class="mb-8">
                 <h1 class="text-4xl font-bold m-0">Image Generation</h1>
                 <p class="mt-2 mb-0 text-slate-400">Create stunning visuals using your assets</p>
@@ -747,56 +703,56 @@ onMounted(() => {
                     </div>
                 </div>
             </div>
-        </main>
-
-        <!-- Asset Selection Modal -->
-        <Dialog v-model:visible="isAssetModalVisible" modal header="Select Reference Assets"
-            :style="{ width: '80vw', maxWidth: '1000px' }" class="glass-panel rounded-2xl">
-            <div class="flex flex-col h-[70vh]">
-                <div v-if="allAssets.length > 0" class="flex-1 overflow-y-auto p-1 text-slate-100">
-                    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
-                        <div v-for="asset in allAssets" :key="asset.id" @click="toggleAssetSelection(asset)"
-                            class="aspect-square rounded-xl overflow-hidden cursor-pointer relative border transition-all"
-                            :class="isAssetSelected(asset.id) ? 'border-violet-500 ring-2 ring-violet-500/20' : 'border-white/10 hover:border-white/30'">
-                            <img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
-                            <div v-if="isAssetSelected(asset.id)"
-                                class="absolute inset-0 bg-violet-600/30 flex items-center justify-center">
-                                <div class="bg-violet-600 rounded-full p-1 shadow-lg">
-                                    <i class="pi pi-check text-white text-xs font-bold"></i>
-                                </div>
+        </div>
+    </div>
+    <!-- Asset Selection Modal -->
+    <Dialog v-model:visible="isAssetModalVisible" modal header="Select Reference Assets"
+        :style="{ width: '80vw', maxWidth: '1000px' }" class="glass-panel rounded-2xl">
+        <div class="flex flex-col h-[70vh]">
+            <div v-if="allAssets.length > 0" class="flex-1 overflow-y-auto p-1 text-slate-100">
+                <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                    <div v-for="asset in allAssets" :key="asset.id" @click="toggleAssetSelection(asset)"
+                        class="aspect-square rounded-xl overflow-hidden cursor-pointer relative border transition-all"
+                        :class="isAssetSelected(asset.id) ? 'border-violet-500 ring-2 ring-violet-500/20' : 'border-white/10 hover:border-white/30'">
+                        <img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
+                        <div v-if="isAssetSelected(asset.id)"
+                            class="absolute inset-0 bg-violet-600/30 flex items-center justify-center">
+                            <div class="bg-violet-600 rounded-full p-1 shadow-lg">
+                                <i class="pi pi-check text-white text-xs font-bold"></i>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div v-else class="flex-1 flex items-center justify-center text-slate-500">
-                    No assets found
-                </div>
+            </div>
+            <div v-else class="flex-1 flex items-center justify-center text-slate-500">
+                No assets found
+            </div>
 
-                <div class="mt-4 pt-4 border-t border-white/10 flex justify-between items-center text-slate-100">
-                    <span class="text-sm text-slate-400">{{ selectedAssets.length }} selected</span>
-                    <div class="flex gap-4 items-center">
-                        <Paginator :first="assetsFirst" :rows="assetsRows" :totalRecords="assetsTotalRecords"
-                            @page="onAssetsPage" class="!bg-transparent !border-none !p-0" />
-                        <Button label="Done" @click="isAssetModalVisible = false" class="!px-6" />
-                    </div>
+            <div class="mt-4 pt-4 border-t border-white/10 flex justify-between items-center text-slate-100">
+                <span class="text-sm text-slate-400">{{ selectedAssets.length }} selected</span>
+                <div class="flex gap-4 items-center">
+                    <Paginator :first="assetsFirst" :rows="assetsRows" :totalRecords="assetsTotalRecords"
+                        @page="onAssetsPage" class="!bg-transparent !border-none !p-0" />
+                    <Button label="Done" @click="isAssetModalVisible = false" class="!px-6" />
                 </div>
             </div>
-        </Dialog>
+        </div>
+    </Dialog>
 
-        <!-- Image Preview Modal -->
-        <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
-            :header="previewImage?.name || 'Image Preview'" :style="{ width: '90vw', maxWidth: '800px' }"
-            class="glass-panel rounded-2xl">
-            <div v-if="previewImage" class="flex flex-col items-center">
-                <img :src="previewImage.url" :alt="previewImage.name"
-                    class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
-                <div class="mt-6 text-center">
-                    <h2 class="text-2xl font-bold mb-2">{{ previewImage.name }}</h2>
-                    <p v-if="previewImage.createdAt" class="text-slate-400">{{ formatDate(previewImage.createdAt) }}</p>
-                </div>
+    <!-- Image Preview Modal -->
+    <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
+        :header="previewImage?.name || 'Image Preview'" :style="{ width: '90vw', maxWidth: '800px' }"
+        class="glass-panel rounded-2xl">
+        <div v-if="previewImage" class="flex flex-col items-center">
+            <img :src="previewImage.url" :alt="previewImage.name"
+                class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
+            <div class="mt-6 text-center">
+                <h2 class="text-2xl font-bold mb-2">{{ previewImage.name }}</h2>
+                <p v-if="previewImage.createdAt" class="text-slate-400">{{ formatDate(previewImage.createdAt) }}</p>
             </div>
-        </Dialog>
-    </div>
+        </div>
+    </Dialog>
+
 </template>
 
 <style scoped>
diff --git a/src/views/ImageToPromptView.vue b/src/views/ImageToPromptView.vue
index d76edd4..d0cb5cf 100644
--- a/src/views/ImageToPromptView.vue
+++ b/src/views/ImageToPromptView.vue
@@ -55,68 +55,13 @@ const copyToClipboard = () => {
     navigator.clipboard.writeText(generatedPrompt.value)
 }
 
-const handleLogout = () => {
-    localStorage.removeItem('auth_code')
-    router.push('/login')
-}
+
 </script>
 
 <template>
-    <div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100">
-        <!-- Sidebar -->
-        <nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5">
-            <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
-                </div>
-            </div>
-
-            <div class="flex-1 flex flex-col gap-6 w-full items-center">
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/')" v-tooltip.right="'Home'">
-                    <span class="text-2xl">🏠</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/assets')" v-tooltip.right="'Assets'">
-                    <span class="text-2xl">📂</span>
-                </div>
-                <!-- Image Generation -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/generation')" v-tooltip.right="'Image Generation'">
-                    <span class="text-2xl">🎨</span>
-                </div>
-                <!-- Flexible Generation -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/flexible-generation')" v-tooltip.right="'Flexible Generation'">
-                    <span class="text-2xl">🖌️</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/characters')" v-tooltip.right="'Characters'">
-                    <span class="text-2xl">👥</span>
-                </div>
-                <!-- New Image to Prompt Item (Active) -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner"
-                    v-tooltip.right="'Image to Prompt'">
-                    <span class="text-2xl">✨</span>
-                </div>
-            </div>
-
-            <div class="mt-auto flex flex-col items-center gap-4">
-                <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'">
-                    <i class="pi pi-power-off"></i>
-                </div>
-                <div class="w-10 h-10 rounded-full bg-slate-800 border-2 border-violet-600 flex items-center justify-center font-bold text-slate-50 cursor-pointer hover:scale-105 transition-all"
-                    title="Profile">
-                    U
-                </div>
-            </div>
-        </nav>
-
-        <!-- Main Content -->
-        <main class="flex-1 p-8 overflow-y-auto flex flex-col">
+    <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">
             <header class="mb-8">
                 <h1 class="text-4xl font-bold m-0">Image to Prompt</h1>
                 <p class="mt-2 mb-0 text-slate-400">Transform your images into descriptive prompts</p>
@@ -160,11 +105,6 @@ const handleLogout = () => {
                                     class="relative rounded-xl border-2 border-dashed border-white/20 flex flex-col items-center justify-center bg-white/5 hover:bg-white/10 transition-colors aspect-square text-slate-400 hover:text-white">
                                     <span class="text-3xl mb-2">+</span>
                                     <span class="text-xs font-bold text-center">Add<br>Image</span>
-                                    <!-- Input for just this square is handled by the main absolute input covering container, 
-                                         but to make it intuitive when grid exists, we might need z-index adjustments or a specific label.
-                                         Actually, the big input covers everything. Let's make sure it doesn't block delete buttons.
-                                         Better approach: Input covers everything ONLY when empty. When not empty, input should specific 'Add' button or similar/
-                                    -->
                                 </div>
                             </div>
 
@@ -238,6 +178,6 @@ const handleLogout = () => {
                     </div>
                 </div>
             </div>
-        </main>
+        </div>
     </div>
 </template>