From 75e33cca9af3f5be1e4e46004f556d2055511881 Mon Sep 17 00:00:00 2001
From: xds <iam@voroninv.ru>
Date: Fri, 13 Feb 2026 17:28:41 +0300
Subject: [PATCH] feat: enhance grouped generation item UI with detailed
 failure states, delete, and reuse prompt/asset actions.

---
 src/views/FlexibleGenerationView.vue | 155 ++++++++++++++++++---------
 1 file changed, 105 insertions(+), 50 deletions(-)

diff --git a/src/views/FlexibleGenerationView.vue b/src/views/FlexibleGenerationView.vue
index 49255f3..db3928a 100644
--- a/src/views/FlexibleGenerationView.vue
+++ b/src/views/FlexibleGenerationView.vue
@@ -736,7 +736,9 @@ const confirmAddToAlbum = async () => {
                     <div v-for="item in groupedHistoryGenerations" :key="item.id"
                         class="aspect-[9/16] relative overflow-hidden bg-slate-800 transition-all duration-300">
 
-                        <!-- GROUPED GENERATION -->
+                        <!-- ============================================ -->
+                        <!-- GROUPED GENERATION (multiple in one slot)    -->
+                        <!-- ============================================ -->
                         <template v-if="item.isGroup">
                             <!-- Group badge -->
                             <div
@@ -744,7 +746,6 @@ const confirmAddToAlbum = async () => {
                                 {{ item.children.length }}x
                             </div>
 
-                            <!-- All children done or mixed states -->
                             <div class="w-full h-full grid gap-0.5"
                                 :class="item.children.length <= 2 ? 'grid-cols-1' : 'grid-cols-2'">
                                 <div v-for="child in item.children" :key="child.id"
@@ -767,10 +768,26 @@ const confirmAddToAlbum = async () => {
                                         <i class="pi pi-spin pi-spinner text-violet-500 text-sm relative z-10"></i>
                                     </div>
 
-                                    <!-- Child: failed -->
+                                    <!-- Child: FAILED -->
                                     <div v-else-if="child.status === 'failed'"
-                                        class="w-full h-full flex items-center justify-center bg-red-500/10">
-                                        <i class="pi pi-times-circle text-red-500"></i>
+                                        class="w-full h-full flex flex-col items-center justify-center bg-red-500/10 relative group p-2 text-center"
+                                        v-tooltip.bottom="item.children.length > 1 ? (child.failed_reason || 'Generation failed') : null">
+                                        <i class="pi pi-times-circle text-red-500 text-lg mb-0.5"></i>
+                                        <span
+                                            class="text-[8px] font-bold text-red-400 uppercase tracking-wide leading-tight">Failed</span>
+
+                                        <!-- Show error text if only 1 child -->
+                                        <span v-if="item.children.length === 1 && child.failed_reason"
+                                            class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight">
+                                            {{ child.failed_reason }}
+                                        </span>
+
+                                        <!-- Delete Persistent for failed child -->
+                                        <div class="absolute top-0 right-0 p-1 z-10">
+                                            <Button icon="pi pi-trash" size="small"
+                                                class="!w-5 !h-5 !rounded-full !bg-red-500/20 !border-none !text-red-400 !text-[8px] hover:!bg-red-500 hover:!text-white pointer-events-auto"
+                                                @click.stop="deleteGeneration(child)" />
+                                        </div>
                                     </div>
 
                                     <!-- Child: other -->
@@ -778,59 +795,93 @@ const confirmAddToAlbum = async () => {
                                         <i class="pi pi-image text-lg opacity-20 text-slate-600"></i>
                                     </div>
 
-                                    <!-- Individual child overlay -->
+                                    <!-- SUCCESS overlay per child (hover) -->
                                     <div v-if="child.result_list && child.result_list.length > 0"
-                                        class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-1"
-                                        :class="{ 'opacity-0 group-hover:opacity-100': activeOverlayId !== child.id, 'opacity-100': activeOverlayId === child.id }">
+                                        class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-1 z-10"
+                                        :class="{ 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto': activeOverlayId !== child.id, 'opacity-100 pointer-events-auto': activeOverlayId === child.id }">
 
-                                        <div class="flex justify-between items-start z-10">
+                                        <!-- Top right: edit, album, delete -->
+                                        <div class="flex justify-end items-start gap-0.5">
+                                            <Button icon="pi pi-pencil" size="small"
+                                                class="!w-5 !h-5 !rounded-full !bg-white/20 !border-none !text-white !text-[8px] hover:!bg-violet-500"
+                                                @click.stop="useResultAsAsset(child)" />
+                                            <Button icon="pi pi-folder-plus" size="small"
+                                                class="!w-5 !h-5 !rounded-full !bg-white/20 !border-none !text-white !text-[8px] hover:!bg-violet-500"
+                                                @click.stop="openAlbumPicker(child)" />
                                             <Button icon="pi pi-trash" size="small"
                                                 class="!w-5 !h-5 !rounded-full !bg-red-500/20 !border-none !text-red-400 !text-[8px] hover:!bg-red-500 hover:!text-white"
                                                 @click.stop="deleteGeneration(child)" />
-                                            <div class="flex gap-0.5">
-                                                <Button icon="pi pi-pencil" size="small"
-                                                    class="!w-5 !h-5 !rounded-full !bg-white/20 !border-none !text-white !text-[8px] hover:!bg-violet-500"
-                                                    @click.stop="useResultAsAsset(child)" />
-                                                <Button icon="pi pi-folder-plus" size="small"
-                                                    class="!w-5 !h-5 !rounded-full !bg-white/20 !border-none !text-white !text-[8px] hover:!bg-violet-500"
-                                                    @click.stop="openAlbumPicker(child)" />
-                                            </div>
                                         </div>
 
+                                        <!-- Center: view button + cost -->
                                         <div
-                                            class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                                            class="flex-1 flex flex-col items-center justify-center pointer-events-none">
+                                            <span class="text-[8px] font-bold text-slate-300 font-mono mb-1">{{
+                                                child.cost }} $</span>
                                             <Button icon="pi pi-eye" rounded text
                                                 class="!bg-black/50 !text-white !w-8 !h-8 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border !border-white/20"
                                                 @click.stop="openImagePreview(API_URL + '/assets/' + child.result_list[0])" />
                                         </div>
 
-                                        <div class="z-10">
-                                            <span class="text-[8px] font-bold text-slate-300 font-mono">{{ child.cost }}
-                                                $</span>
+                                        <!-- Bottom: reuse prompt + reuse assets -->
+                                        <div class="flex gap-0.5">
+                                            <Button icon="pi pi-comment" size="small"
+                                                class="!w-5 !h-5 flex-1 !bg-white/10 !border-white/10 !text-slate-200 !text-[8px] hover:!bg-white/20"
+                                                @click.stop="reusePrompt(child)" />
+                                            <Button icon="pi pi-images" size="small"
+                                                class="!w-5 !h-5 flex-1 !bg-white/10 !border-white/10 !text-slate-200 !text-[8px] hover:!bg-white/20"
+                                                @click.stop="reuseAsset(child)" />
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </template>
 
-                        <!-- SINGLE GENERATION -->
+                        <!-- ============================================ -->
+                        <!-- SINGLE GENERATION (full slot)                -->
+                        <!-- ============================================ -->
                         <template v-else>
                             <div class="w-full h-full relative group" @click="toggleMobileOverlay(item.id)">
+
+                                <!-- SUCCESS: image -->
                                 <img v-if="item.result_list && item.result_list.length > 0"
                                     :src="API_URL + '/assets/' + item.result_list[0] + '?thumbnail=true'"
                                     class="w-full h-full object-cover cursor-pointer"
                                     @click.stop="openImagePreview(API_URL + '/assets/' + item.result_list[0])" />
 
+                                <!-- FAILED: error display -->
                                 <div v-else-if="item.status === 'failed'"
-                                    class="w-full h-full flex flex-col items-center justify-center p-2 text-center bg-red-500/10 border border-red-500/20">
-                                    <i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
-                                    <span
-                                        class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
-                                    <span v-if="item.failed_reason"
-                                        class="text-[8px] text-red-300/70 mt-1 line-clamp-2 leading-tight"
-                                        v-tooltip.top="item.failed_reason">{{ item.failed_reason }}</span>
+                                    class="w-full h-full flex flex-col items-center justify-between p-3 text-center bg-red-500/10 border border-red-500/20 relative group">
+
+                                    <!-- Top Right: Delete (Persistent) -->
+                                    <div class="w-full flex justify-end">
+                                        <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
+                                            class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white z-10"
+                                            @click.stop="deleteGeneration(item)" />
+                                    </div>
+
+                                    <!-- Center: Error Info -->
+                                    <div class="flex flex-col items-center justify-center flex-1">
+                                        <i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
+                                        <span
+                                            class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
+                                        <span v-if="item.failed_reason"
+                                            class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight"
+                                            v-tooltip.top="item.failed_reason">{{ item.failed_reason }}</span>
+                                    </div>
+
+                                    <!-- Bottom: Reuse Buttons (Persistent) -->
+                                    <div class="w-full flex gap-1 z-10">
+                                        <Button icon="pi pi-comment" v-tooltip.bottom="'Reuse Prompt'"
+                                            class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
+                                            @click.stop="reusePrompt(item)" />
+                                        <Button icon="pi pi-images" v-tooltip.bottom="'Reuse Assets'"
+                                            class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
+                                            @click.stop="reuseAsset(item)" />
+                                    </div>
                                 </div>
 
+                                <!-- PROCESSING -->
                                 <div v-else-if="['processing', 'starting', 'running'].includes(item.status)"
                                     class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50 border border-violet-500/20">
                                     <div
@@ -844,33 +895,23 @@ const confirmAddToAlbum = async () => {
                                         }}...</span>
                                     <span v-if="item.progress"
                                         class="text-[9px] text-violet-400/60 font-mono mt-1 relative z-10">{{
-                                        item.progress }}%</span>
+                                            item.progress }}%</span>
                                 </div>
 
+                                <!-- EMPTY -->
                                 <div v-else
                                     class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
                                     <i class="pi pi-image text-4xl opacity-20"></i>
                                 </div>
 
-                                <!-- Single generation overlay -->
-                                <div class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2"
-                                    :class="{ 'opacity-0 group-hover:opacity-100': activeOverlayId !== item.id, 'opacity-100': activeOverlayId === item.id }">
+                                <!-- HOVER OVERLAY (for successful single gen state only) -->
+                                <div v-if="item.result_list && item.result_list.length > 0"
+                                    class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2 z-10"
+                                    :class="{ 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto': activeOverlayId !== item.id, 'opacity-100 pointer-events-auto': activeOverlayId === item.id }">
 
+                                    <!-- Top Right: buttons -->
                                     <div
-                                        class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
-                                        <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
-                                            class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
-                                            @click.stop="deleteGeneration(item)" />
-
-                                        <div class="flex flex-col items-center gap-0.5 pointer-events-none">
-                                            <span
-                                                class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
-                                                item.cost }} $</span>
-                                            <span v-if="item.execution_time_seconds"
-                                                class="text-[8px] text-slate-500 font-mono">{{
-                                                item.execution_time_seconds.toFixed(1) }}s</span>
-                                        </div>
-
+                                        class="flex justify-end items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
                                         <div class="flex gap-1">
                                             <Button v-if="item.result_list && item.result_list.length > 0"
                                                 icon="pi pi-pencil" v-tooltip.left="'Edit (Use Result)'"
@@ -879,17 +920,31 @@ const confirmAddToAlbum = async () => {
                                             <Button icon="pi pi-folder-plus" v-tooltip.left="'Add to Album'"
                                                 class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
                                                 @click.stop="openAlbumPicker(item)" />
+                                            <Button icon="pi pi-trash" v-tooltip.left="'Delete'"
+                                                class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
+                                                @click.stop="deleteGeneration(item)" />
                                         </div>
                                     </div>
 
-                                    <!-- Centered View Button -->
-                                    <div v-if="item.result_list && item.result_list.length > 0"
-                                        class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
+                                    <!-- Center: View button + Cost/Time -->
+                                    <div
+                                        class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none z-0">
+                                        <!-- Cost & Time -->
+                                        <div class="flex flex-col items-center gap-0.5 mb-2 pointer-events-none">
+                                            <span
+                                                class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
+                                                    item.cost }} $</span>
+                                            <span v-if="item.execution_time_seconds"
+                                                class="text-[8px] text-slate-500 font-mono">{{
+                                                    item.execution_time_seconds.toFixed(1) }}s</span>
+                                        </div>
+                                        <!-- View Button -->
                                         <Button icon="pi pi-eye" rounded text
                                             class="!bg-black/50 !text-white !w-12 !h-12 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border-2 !border-white/20"
                                             @click.stop="openImagePreview(API_URL + '/assets/' + item.result_list[0])" />
                                     </div>
 
+                                    <!-- Bottom: reuse buttons -->
                                     <div
                                         class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200 z-10">
                                         <div class="flex gap-1 mb-1">