From 0e81f3556044faa248e10c12b47ab0d24c62f1a9 Mon Sep 17 00:00:00 2001
From: xds <iam@voroninv.ru>
Date: Thu, 5 Feb 2026 21:13:43 +0300
Subject: [PATCH] fix

---
 src/views/CharacterDetailView.vue | 563 +++++++++++++++---------------
 1 file changed, 284 insertions(+), 279 deletions(-)

diff --git a/src/views/CharacterDetailView.vue b/src/views/CharacterDetailView.vue
index 49ccb63..e10e71e 100644
--- a/src/views/CharacterDetailView.vue
+++ b/src/views/CharacterDetailView.vue
@@ -700,251 +700,256 @@ const handleLogout = () => {
                                     Success!
                                 </Message>
                             </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>
-
-                            <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-4xl" />
-                                <p class="text-sm 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" />
+                                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-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.assets_list[0] + '?thumbnail=true')"
-                                            @mouseleave="onThumbnailLeave">
-                                            <img v-if="gen.assets_list && gen.assets_list.length > 0"
-                                                :src="API_URL + '/assets/' + gen.assets_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 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 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 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>
 
-                                            <div class="flex 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>
-                                            </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>
+                                    <!-- 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>
 
-                                <!-- 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="{
+                                <div v-else class="flex flex-col items-center gap-2 text-slate-500 opacity-60">
+                                    <i class="pi pi-image text-4xl" />
+                                    <p class="text-sm 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.assets_list[0] + '?thumbnail=true')"
+                                                @mouseleave="onThumbnailLeave">
+                                                <img v-if="gen.assets_list && gen.assets_list.length > 0"
+                                                    :src="API_URL + '/assets/' + gen.assets_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 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>
+                                                </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>
+                                        </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>
 
                             <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 }}
+                                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>
-                        <div class="p-4">
-                            <h3 class="text-sm font-semibold m-0 whitespace-nowrap overflow-hidden text-ellipsis">
-                                {{ asset.name }}
-                            </h3>
-                        </div>
-                    </div>
-                </div>
+                    </TabPanel>
 
-                <!-- 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="{
+                    <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 }) => ({
@@ -959,77 +964,77 @@ const handleLogout = () => {
                             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>
-    </TabPanel>
 
-    </TabPanels>
-    </Tabs>
-    </main>
+        <div v-else class="flex-1 flex items-center justify-center text-slate-400">
+            Character not found.
+        </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" />
+        <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>
-        </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>
+        </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>
-            <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>
 </template>
 <style scoped>