From 83ce9c82389df0c4003cf2b6d238da21d133b64a Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Mon, 25 May 2026 13:50:03 +0300
Subject: [PATCH 01/34] style: update button styles and layout for improved UI
 consistency

---
 custom/VisionAction.vue | 71 +++++++++++++++++++++++++++--------------
 1 file changed, 47 insertions(+), 24 deletions(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index a498cd3..2fbb665 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-end justify-start gap-2 cursor-pointer">
-    <div class="flex items-center justify-center text-white bg-gradient-to-r h-[18px] from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-md text-sm px-1 text-center">
+    <div class="flex items-center justify-center text-white bg-gradient-to-r h-[18px] from-lightPrimary via-lightPrimary/90 to-lightPrimary/80 hover:opacity-90 focus:ring-4 focus:outline-none focus:ring-lightPrimary/30 dark:focus:ring-darkPrimary/30 font-medium rounded-md text-sm px-1 text-center dark:bg-none dark:bg-darkPrimary/10 dark:text-darkPrimary dark:brightness-200">
       {{t('AI')}}
     </div>
     <p class="text-justify max-h-[18px] truncate max-w-[60vw] md:max-w-none">{{ props.meta.actionName }}</p>
@@ -27,14 +27,14 @@
             {
               label: t('Cancel'),
               options: {
-                class: 'w-2/5 bg-white hover:!bg-gray-100 !text-gray-900 hover:!text-gray-800 dark:!bg-gray-800 dark:!text-gray-100 dark:hover:!bg-gray-700 !border-gray-200 dark:!border-gray-600'
+                class: 'w-1/2 px-5 py-2.5 text-sm font-medium rounded-xl hover:opacity-90 border border-lightPrimary dark:border-darkPrimary bg-white hover:bg-lightPrimary dark:hover:bg-darkPrimary text-lightPrimary dark:text-gray-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-lightPrimary/20 dark:focus:ring-darkPrimary/20 transition-all duration-150 text-center justify-center'
               },
               onclick: (dialog) => confirmDialog.tryToHideModal()
             },
             {
               label: t('Start generation'),
               options: {
-                class: 'w-3/5 px-5 py-2.5 bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 rounded-md text-white border-none',
+                class: 'w-1/2 px-5 py-2.5 text-sm font-medium rounded-xl hover:opacity-90 border border-lightPrimary dark:border-darkPrimary bg-white hover:bg-lightPrimary dark:hover:bg-darkPrimary text-lightPrimary dark:text-gray-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-lightPrimary/20 dark:focus:ring-darkPrimary/20 transition-all duration-150 text-center justify-center',
                 loader: isCheckingRateLimits
               },
               onclick: (dialog) => { runAiActions(); }
@@ -42,14 +42,14 @@
           ]"
     :click-to-close-outside="false"
   >
-    <div class="bulk-vision-table flex flex-col items-center gap-3 md:gap-4 overflow-y-auto">
+    <div class="bulk-vision-table flex flex-col gap-4 overflow-y-auto w-full">
       <template v-if="recordsList.length && popupMode === 'generation'" >
         <div class="w-full">
           <p :class="isGenerationPaused ? '' : 'opacity-0'" class="text-sm font-semibold text-yellow-800">{{ t(`Generated ${startedRecordCount} records. `) + t('Generation on pause. Resume generation?') }}</p>
           <div v-if="isGenerationPaused" class="flex flex-col gap-2 mb-2">
             <div class="flex items-center gap-2">
               <button
-                class="h-8 px-3 py-1.5 text-sm rounded-md bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 text-white hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 border-none ml-2"
+                class="h-8 px-3 py-1.5 text-sm rounded-md bg-gradient-to-r from-lightPrimary to-lightPrimary/80 text-white border-none ml-2"
                 @click="resumeGeneration"
               >
                 {{ t('Resume generation') }}
@@ -133,34 +133,56 @@
               {{ formatLabel(promptKey) }} {{ t('prompt') }}:
               <Textarea 
                 v-model="generationPrompts[key][promptKey]" 
-                class="w-full h-64 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                class="w-full h-64 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lightPrimary"
               ></Textarea>
               <p class="text-red-500 hover:underline hover:cursor-pointer mt-2" @click="resetPromptToDefault(key, promptKey)">reset to default</p>
             </div>
           </div>
         </div>
       </div>
-      <div v-else class="flex flex-col gap-2 mt-2 w-full h-full">
-        <div class="flex items-center justify-between mb-2 w-full">
-          <div class="flex items-center justify-center gap-2">
-            <IconShieldSolid class="w-6 h-6 text-lightPrimary dark:text-darkPrimary" />
-            <p class="sm:text-base text-sm">{{ t('Overwrite existing values') }}</p>
-            <Tooltip>
-                <IconInfoCircleSolid class="w-5 h-5 me-2 text-lightPrimary dark:text-darkPrimary"/>
-                <template #tooltip>
-                  <p class="max-w-64">{{ t('When enabled, the AI will overwrite content for fields that already have data. When off - this helps to preserve existing information and avoid overwriting valuable content.') }}</p>
-                </template>
-            </Tooltip>
+      <div v-else class="flex flex-col gap-4 w-full h-full">
+        <div class="flex flex-col p-5 rounded-2xl border border-gray-100 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900/40">
+          <div class="flex items-start justify-between gap-4">
+            <div class="flex items-start gap-3 min-w-0">
+              <div class="p-2 bg-lightPrimary/10 dark:bg-darkPrimary/10 rounded-xl text-lightPrimary dark:text-darkPrimary shrink-0 mt-0.5">
+                <IconShieldCheckOutline class="w-5 h-5 dark:brightness-200"  />
+              </div>
+              <div class="min-w-0">
+                <p class="text-base font-semibold text-gray-900 dark:text-white leading-tight">{{ t('Overwrite existing values') }}</p>
+                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 break-words pr-2">AI-generated data will replace existing values.</p>
+              </div>
+            </div>
+            <div class="shrink-0 pt-1">
+              <Toggle v-model="overwriteExistingValues" />
+            </div>
+          </div>
+
+          <div v-if="overwriteExistingValues" class="mt-4 flex items-start text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30 px-3 py-2.5 rounded-xl border border-amber-200 dark:border-amber-900/50 text-sm">
+            <IconInfoCircleSolid class="w-4 h-4 me-2 shrink-0 mt-0.5 " />
+            <p>{{ t('Warning: Existing values will be overwritten.') }}</p>
           </div>
-          <Toggle
-            v-model="overwriteExistingValues"
-          />
         </div>
-        <div :class="overwriteExistingValues === true ? 'opacity-100' : 'opacity-0'" class="flex items-center text-yellow-800 bg-yellow-100 p-2 rounded-md border border-yellow-300">
-          <IconExclamationTriangle class="w-6 h-6 me-2"/>
-          <p class="sm:text-base text-sm">{{ t('Warning: Existing values will be overwritten.') }}</p>
+
+        <div 
+          @click="clickSettingsButton()"
+          class="flex items-center justify-between p-5 rounded-2xl border border-gray-100 bg-white hover:bg-gray-50 shadow-sm dark:border-gray-800 dark:bg-gray-900/40 dark:hover:bg-gray-900/60 cursor-pointer transition-all duration-150"
+        >
+          <div class="flex items-start gap-3 min-w-0">
+            <div class="p-2 bg-lightPrimary/10 dark:bg-darkPrimary/10 rounded-xl text-lightPrimary dark:text-darkPrimary shrink-0 mt-0.5">
+              <IconMessageCaptionOutline class="w-5 h-5 dark:brightness-200" />
+            </div>
+            <div class="min-w-0">
+              <p class="text-base font-semibold text-gray-900 dark:text-white leading-tight">{{ t('Configure prompts') }}</p>
+              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 break-words">Change the instructions for AI to generate actual data.</p>
+            </div>
+          </div>
         </div>
-        <p class="w-fit flex justify-start text-lightPrimary dark:text-white hover:underline cursor-pointer" @click="clickSettingsButton()">{{ t('Configure prompts') }}</p>
+
+        <div class="flex items-center gap-2 px-1 text-xs font-medium text-gray-400 dark:text-gray-500">
+          <IconInfoCircleSolid class="w-4 h-4 " />
+          <p>This action will only apply to the fields included in your prompts.</p>
+        </div>
+    
       </div>
     </div>
   </Dialog>
@@ -179,6 +201,7 @@ import { useCoreStore } from '@/stores/core';
 import { IconShieldSolid, IconInfoCircleSolid } from '@iconify-prerendered/vue-flowbite';
 import { IconExclamationTriangle } from '@iconify-prerendered/vue-humbleicons';
 import { useFiltersStore } from '@/stores/filters';
+import { IconMessageCaptionOutline, IconShieldCheckOutline } from '@iconify-prerendered/vue-flowbite';
 
 
 const coreStore = useCoreStore();

From 2e4bacddd3d657c8d3c0d3a623e23cd06bf1e2be Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Tue, 26 May 2026 09:51:17 +0300
Subject: [PATCH 02/34] feat: enhance UI components and improve button styles
 for better user experience

---
 custom/VisionAction.vue | 131 +++++++++++++++++++++++++++++++++-------
 1 file changed, 109 insertions(+), 22 deletions(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index 2fbb665..f73b08f 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -15,10 +15,18 @@
     :beforeCloseFunction="handleBeforeClose"
     :closable="false"
     :buttons="popupMode === 'generation' ? generationModeButtons : popupMode === 'settings' ? [
+          {
+            label: t('Cancel'),
+            options: {
+              class: 'afcl-button w-1/6',
+              mode: 'secondary'
+            },
+            onclick: () => { popupMode = 'confirmation'; }
+          },
           {
             label: t('Save settings'),
             options: {
-              class: 'w-fit'
+              class: 'afcl-button w-1/6',
             },
             onclick: (dialog) => { saveSettings(); }
           },
@@ -27,14 +35,15 @@
             {
               label: t('Cancel'),
               options: {
-                class: 'w-1/2 px-5 py-2.5 text-sm font-medium rounded-xl hover:opacity-90 border border-lightPrimary dark:border-darkPrimary bg-white hover:bg-lightPrimary dark:hover:bg-darkPrimary text-lightPrimary dark:text-gray-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-lightPrimary/20 dark:focus:ring-darkPrimary/20 transition-all duration-150 text-center justify-center'
+                class: 'afcl-button w-1/2',
+                mode: 'secondary'
               },
               onclick: (dialog) => confirmDialog.tryToHideModal()
             },
             {
               label: t('Start generation'),
               options: {
-                class: 'w-1/2 px-5 py-2.5 text-sm font-medium rounded-xl hover:opacity-90 border border-lightPrimary dark:border-darkPrimary bg-white hover:bg-lightPrimary dark:hover:bg-darkPrimary text-lightPrimary dark:text-gray-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-lightPrimary/20 dark:focus:ring-darkPrimary/20 transition-all duration-150 text-center justify-center',
+                class: 'afcl-button w-1/2',
                 loader: isCheckingRateLimits
               },
               onclick: (dialog) => { runAiActions(); }
@@ -120,28 +129,103 @@
         v-else-if="popupMode === 'settings'" 
         v-for="(promptsCategory, key) in generationPrompts" 
         :key="key" 
-        class="w-full"
+        class="w-full flex flex-col gap-6 mb-6"
       >
-        <div v-if="Object.keys(promptsCategory).length > 0" class="gap-4 mb-6 ml-1">
-          <p class="text-start w-full text-xl font-bold mb-2">{{
-           key === "plainFieldsPrompts" ? "Prompts for non-image fields" 
-            : key === "generateImages" ? "Prompts for image fields" 
-              : "Prompts for image analysis"
-          }}</p>
-          <div class="grid grid-cols-2 gap-4">
-            <div v-for="(prompt, promptKey) in promptsCategory" :key="promptKey">
-              {{ formatLabel(promptKey) }} {{ t('prompt') }}:
-              <Textarea 
-                v-model="generationPrompts[key][promptKey]" 
-                class="w-full h-64 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lightPrimary"
-              ></Textarea>
-              <p class="text-red-500 hover:underline hover:cursor-pointer mt-2" @click="resetPromptToDefault(key, promptKey)">reset to default</p>
+        <div v-if="Object.keys(promptsCategory).length > 0" class="w-full flex flex-col">
+          <div class="flex items-start gap-3.5 mb-6 border-b border-gray-100 dark:border-gray-800">
+            
+            <div class="flex-1 min-w-0">
+              <h3 class="text-base font-bold text-gray-900 dark:text-white tracking-tight">
+                {{
+                 key === "plainFieldsPrompts" ? t("Prompts for non-image fields") 
+                  : key === "generateImages" ? t("Prompts for image fields") 
+                    : t("Prompts for image analysis")
+                }}
+              </h3>
+              <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
+                {{ 
+                  key === "plainFieldsPrompts" ? t("Define how AI should generate content for text-based fields.") 
+                  : key === "generateImages" ? t("Configure prompt rules for generating media and images.") 
+                    : t("Instructions for extracting text specifications from images.")
+                }}
+              </p>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div 
+              v-for="(prompt, promptKey) in promptsCategory" 
+              :key="promptKey" 
+              class="
+              flex flex-col bg-white dark:bg-gray-900 border border-gray-200/80 p-5 rounded-default shadow-sm transition-all duration-200
+              hover:shadow-md hover:border-gray-300
+              dark:border-gray-800
+              dark:hover:border-gray-700"
+            >
+              <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center gap-3">
+                  <div class="p-2 bg-lightPrimary/10 text-lightPrimary rounded-lg shrink-0
+                    dark:bg-darkPrimary/20
+                    dark:text-darkPrimary ">
+                    <IconImageSolid 
+                      v-if="key === 'generateImages'" 
+                      class="w-5 h-5 dark:brightness-200" 
+                    />
+                    <IconFileLinesOutline 
+                      v-else 
+                      class="w-5 h-5 dark:brightness-200" 
+                    />
+                  </div>
+                  <div>
+                    <h4 class="text-sm font-bold text-gray-800 dark:text-gray-200 capitalize tracking-tight">
+                      {{ formatLabel(promptKey) }}
+                    </h4>
+                    <p class="text-[11px] text-gray-400 dark:text-gray-500">
+                      {{ key === 'generateImages' ? t('Generate source media') : t('Generate a detailed content') }}
+                    </p>
+                  </div>
+                </div>
+
+                <span class="px-2 py-0.5 text-[10px] font-semibold tracking-wide rounded-md bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/10 dark:text-darkPrimary">
+                  {{ key === 'generateImages' ? t('Image field') : t('Text field') }}
+                </span>
+              </div>
+
+              <div class="relative flex-1">
+                <Textarea 
+                  v-model="generationPrompts[key][promptKey]" 
+                  class="w-full h-56 p-3.5 text-sm leading-relaxed border border-gray-200 bg-gray-50/30 text-gray-800 shadow-sm resize-none font-sans
+                  dark:border-gray-700  
+                  dark:bg-gray-800/40  
+                  dark:text-gray-100 rounded-xl 
+                  dark:focus:border-gray-700
+                  focus:outline-none 
+                  focus:border-gray-200"
+                  placeholder="Enter prompt instructions..."
+                ></Textarea>
+              </div>
+
+              <Button 
+                type="button"
+                mode = "secondary"
+                @click="resetPromptToDefault(key, promptKey)"
+                class="
+                afcl-button w-1/2 mt-6 text-red-600 border-red-600
+                hover:text-red-700 dark:text-red-500
+                hover:border-red-700 
+                dark:hover:text-red-400
+                dark:border-red-500 
+                dark:hover:border-red-400">
+                <IconUndoOutline class="w-4 h-4 dark:brightness-200"  />
+                {{ t('Reset to default') }}
+              </Button>
+
             </div>
           </div>
         </div>
       </div>
       <div v-else class="flex flex-col gap-4 w-full h-full">
-        <div class="flex flex-col p-5 rounded-2xl border border-gray-100 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900/40">
+        <div class="flex flex-col p-5 rounded-default border border-gray-100 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900/40">
           <div class="flex items-start justify-between gap-4">
             <div class="flex items-start gap-3 min-w-0">
               <div class="p-2 bg-lightPrimary/10 dark:bg-darkPrimary/10 rounded-xl text-lightPrimary dark:text-darkPrimary shrink-0 mt-0.5">
@@ -165,7 +249,9 @@
 
         <div 
           @click="clickSettingsButton()"
-          class="flex items-center justify-between p-5 rounded-2xl border border-gray-100 bg-white hover:bg-gray-50 shadow-sm dark:border-gray-800 dark:bg-gray-900/40 dark:hover:bg-gray-900/60 cursor-pointer transition-all duration-150"
+          class="
+          flex items-center justify-between p-5 rounded-default border border-gray-100 bg-white shadow-sm cursor-pointer transition-all duration-150
+          dark:border-gray-800 dark:bg-gray-900/40 "
         >
           <div class="flex items-start gap-3 min-w-0">
             <div class="p-2 bg-lightPrimary/10 dark:bg-darkPrimary/10 rounded-xl text-lightPrimary dark:text-darkPrimary shrink-0 mt-0.5">
@@ -201,7 +287,8 @@ import { useCoreStore } from '@/stores/core';
 import { IconShieldSolid, IconInfoCircleSolid } from '@iconify-prerendered/vue-flowbite';
 import { IconExclamationTriangle } from '@iconify-prerendered/vue-humbleicons';
 import { useFiltersStore } from '@/stores/filters';
-import { IconMessageCaptionOutline, IconShieldCheckOutline } from '@iconify-prerendered/vue-flowbite';
+import { Button } from '@/afcl'
+import { IconMessageCaptionOutline, IconShieldCheckOutline, IconFileLinesOutline, IconUndoOutline, IconImageSolid } from '@iconify-prerendered/vue-flowbite';
 
 
 const coreStore = useCoreStore();
@@ -513,7 +600,7 @@ function registerGenerationFailure(record: RecordState, actionType: GenerationAc
 }
 
 function showGenerationFailureSummary() {
-  for (const group of generationFailureGroups.values()) {
+  for (const group of Array.from(generationFailureGroups.values())) {
     const failedCount = group.recordIds.size;
     const firstRecordId = Array.from(group.recordIds)[0];
     adminforth.alert({

From 9f9a139bf49f4cbc1c5e2c83e61a53a362b86808 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Tue, 26 May 2026 10:08:16 +0300
Subject: [PATCH 03/34] fix: refactor template structure in VisionAction.vue
 for improved readability

---
 custom/VisionAction.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index f73b08f..2714242 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -125,12 +125,8 @@
       <template v-else-if="!recordsList.length && popupMode === 'generation'">
         <p>No data to save. Feel free to click "Cancel"</p>
       </template>
-      <div 
-        v-else-if="popupMode === 'settings'" 
-        v-for="(promptsCategory, key) in generationPrompts" 
-        :key="key" 
-        class="w-full flex flex-col gap-6 mb-6"
-      >
+      <div v-else-if="popupMode === 'settings'" class="w-full flex flex-col gap-6">
+        <template v-for="(promptsCategory, key) in generationPrompts" :key="key">
         <div v-if="Object.keys(promptsCategory).length > 0" class="w-full flex flex-col">
           <div class="flex items-start gap-3.5 mb-6 border-b border-gray-100 dark:border-gray-800">
             
@@ -223,6 +219,7 @@
             </div>
           </div>
         </div>
+      </template>
       </div>
       <div v-else class="flex flex-col gap-4 w-full h-full">
         <div class="flex flex-col p-5 rounded-default border border-gray-100 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900/40">

From d35d3475d5c8564a09ac8fbd4b338d64fb2ad0ad Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Tue, 26 May 2026 10:20:52 +0300
Subject: [PATCH 04/34] feat: replace custom progress bar implementation with
 reusable ProgressBar component for improved maintainability

---
 custom/VisionAction.vue | 36 ++++++++++++------------------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index 2714242..9e17280 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -71,31 +71,18 @@
               </button>
             </div>
           </div>
-          <div
+          
+          <ProgressBar 
             v-if="!isGenerationPaused"
-            class="w-full h-8 rounded-md bg-gray-200 dark:bg-gray-700 overflow-hidden relative"
-            :class="isGenerationPaused ? 'opacity-80' : ''"
-            role="progressbar"
-            :aria-valuenow="displayedProcessedCount"
-            :aria-valuemin="0"
-            :aria-valuemax="totalRecords"
-          >
-            <div
-              class="h-full bg-gradient-to-r from-lightPrimary/70 via-lightPrimary/80 to-lightPrimary/90 dark:from-darkPrimary/70 dark:via-darkPrimary/80 dark:to-darkPrimary/90 transition-all duration-200 "
-              :style="{ width: `${displayedProgressPercent}%` }"
-            ></div>
-            <div class="absolute inset-0 flex items-center justify-center text-sm font-medium text-white drop-shadow">
-              <template v-if="isProcessingAny || isGenerationPaused">
-                {{ Math.floor((displayedProcessedCount  /  totalRecords) * 100) }}%
-              </template>
-              <template v-else-if="isGenerationCancelled">
-                {{ t('Generation cancelled') }}
-              </template>
-              <template v-else>
-                {{ t('Processed') }}
-              </template>
-            </div>
-          </div>
+            class="w-full mb-4"
+            :current-value="Math.floor((displayedProcessedCount / totalRecords) * 100)" 
+            :max-value="100" 
+            :min-value="0"
+            :showAnimation="isProcessingAny"
+            :showLabels="false"
+            :showValues="false"
+            :show-progress="false"
+          />
         </div>
 
 
@@ -286,6 +273,7 @@ import { IconExclamationTriangle } from '@iconify-prerendered/vue-humbleicons';
 import { useFiltersStore } from '@/stores/filters';
 import { Button } from '@/afcl'
 import { IconMessageCaptionOutline, IconShieldCheckOutline, IconFileLinesOutline, IconUndoOutline, IconImageSolid } from '@iconify-prerendered/vue-flowbite';
+import { ProgressBar } from '@/afcl';
 
 
 const coreStore = useCoreStore();

From e5cb6b1efd0bd104de882d513b53398962dd984b Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Tue, 26 May 2026 15:23:48 +0300
Subject: [PATCH 05/34] fix: update progress bar and dialog visual

---
 custom/VisionAction.vue | 109 +++++++++++++++++++++++++++++-----------
 1 file changed, 80 insertions(+), 29 deletions(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index 9e17280..7c55c81 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -51,9 +51,9 @@
           ]"
     :click-to-close-outside="false"
   >
-    <div class="bulk-vision-table flex flex-col gap-4 overflow-y-auto w-full">
+    <div class="bulk-vision-table flex flex-col max-h-[700px] gap-4 overflow-y-auto w-full">
       <template v-if="recordsList.length && popupMode === 'generation'" >
-        <div class="w-full">
+        <div class="w-full min-w-[980px]">
           <p :class="isGenerationPaused ? '' : 'opacity-0'" class="text-sm font-semibold text-yellow-800">{{ t(`Generated ${startedRecordCount} records. `) + t('Generation on pause. Resume generation?') }}</p>
           <div v-if="isGenerationPaused" class="flex flex-col gap-2 mb-2">
             <div class="flex items-center gap-2">
@@ -71,18 +71,58 @@
               </button>
             </div>
           </div>
-          
-          <ProgressBar 
-            v-if="!isGenerationPaused"
-            class="w-full mb-4"
-            :current-value="Math.floor((displayedProcessedCount / totalRecords) * 100)" 
-            :max-value="100" 
-            :min-value="0"
-            :showAnimation="isProcessingAny"
-            :showLabels="false"
-            :showValues="false"
-            :show-progress="false"
-          />
+
+          <div class="w-full bg-white dark:bg-gray-900 border border-gray-200/80 dark:border-gray-800 p-5 rounded-2xl shadow-sm flex flex-col gap-4">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-3">
+                <div 
+                  class="p-2 rounded-xl shrink-0"
+                  :class="isGenerationPaused ? 'bg-yellow-50 text-yellow-600 dark:bg-yellow-950/40 dark:text-yellow-400' 
+                    : displayedProcessedCount === totalRecords ? 'bg-green-50 text-green-600 dark:bg-green-950/40 dark:text-green-400'
+                    : 'bg-blue-50 text-blue-600 dark:bg-blue-950/40 dark:text-blue-400'"
+                >
+                  <IconShieldCheckOutline v-if="displayedProcessedCount === totalRecords" class="w-5 h-5" />
+                  <IconRefreshOutline v-else :class="isProcessingAny ? 'animate-spin' : ''" class="w-5 h-5" />
+                </div>
+                
+                <div>
+                  <h4 class="text-sm font-bold text-gray-800 dark:text-gray-200 tracking-tight">
+                    {{ displayedProcessedCount }} {{ t('of') }} {{ totalRecords }} {{ t('fields ready to save') }}
+                  </h4>
+                </div>
+              </div>
+
+              <span 
+                class="px-2.5 py-1 text-xs font-bold tracking-wide rounded-full flex items-center gap-1.5"
+                :class="isGenerationPaused ? 'bg-yellow-50 text-yellow-700 border border-yellow-200 dark:bg-yellow-950/30 dark:text-yellow-400 dark:border-yellow-900/50'
+                  : displayedProcessedCount === totalRecords ? 'bg-green-50 text-green-700 border border-green-200 dark:bg-green-950/30 dark:text-green-400 dark:border-green-900/50'
+                  : 'bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950/30 dark:text-blue-400 dark:border-blue-900/50'"
+              >
+                <span 
+                  class="w-1.5 h-1.5 rounded-full"
+                  :class="isGenerationPaused ? 'bg-yellow-500' : displayedProcessedCount === totalRecords ? 'bg-green-500' : 'bg-blue-500'"
+                ></span>
+                {{ 
+                  isGenerationPaused ? t('On pause') 
+                  : displayedProcessedCount === totalRecords ? t('Ready') 
+                  : t('Processing') 
+                }}
+              </span>
+            </div>
+
+            <ProgressBar 
+              class="w-full"
+              :class="isGenerationPaused ? 'opacity-80' : ''"
+              :current-value="Math.floor((displayedProcessedCount / totalRecords) * 100)" 
+              :max-value="100" 
+              :min-value="0"
+              :showAnimation="isProcessingAny && !isGenerationPaused"
+              :showLabels="false"
+              :showValues="false"
+              :show-progress="false"
+            />
+
+          </div>
         </div>
 
 
@@ -105,6 +145,13 @@
           @regenerate-images="regenerateImages"
           @regenerate-cell="regenerateCell"
         />
+        <div class="mt-2 flex items-start text-lightPrimary dark:text-darkPrimary bg-lightPrimary/10 dark:bg-darkPrimary/10 px-4 py-3 rounded-default border border-lightPrimary/20 dark:border-darkPrimary/20 text-sm">
+          <IconInfoCircleSolid class="w-5 h-5 me-2 shrink-0 mt-0.5 text-lightPrimary dark:text-darkPrimary dark:brightness-200" />
+          <p class="text-lightPrimary dark:text-darkPrimary dark:brightness-200">
+            <span class="font-semibold text-lightPrimary dark:text-darkPrimary dark:brightness-200">{{ t('Only checked fields will be saved.') }}</span> 
+            {{ t('You can regenerate fields before saving if needed.') }}
+          </p>
+        </div>
         <div class="text-red-600 flex items-center w-full">
           <p v-if="isError === true">{{ errorMessage }}</p>
         </div>
@@ -188,20 +235,21 @@
                 ></Textarea>
               </div>
 
-              <Button 
+              <button 
                 type="button"
-                mode = "secondary"
+                mode="secondary"
                 @click="resetPromptToDefault(key, promptKey)"
                 class="
-                afcl-button w-1/2 mt-6 text-red-600 border-red-600
-                hover:text-red-700 dark:text-red-500
-                hover:border-red-700 
-                dark:hover:text-red-400
-                dark:border-red-500 
-                dark:hover:border-red-400">
-                <IconUndoOutline class="w-4 h-4 dark:brightness-200"  />
-                {{ t('Reset to default') }}
-              </Button>
+                mt-4 flex items-center gap-1.5 text-xs font-semibold bg-transparent px-2.5 py-1 w-fit rounded-default
+                border border-red-200 hover:border-red-600
+                text-red-600 hover:text-red-700 
+                dark:border-red-900/50 dark:hover:border-red-500
+                dark:text-red-500 dark:hover:text-red-400
+                transition-colors duration-150"
+              >
+                <IconUndoOutline class="w-3.5 h-3.5 dark:brightness-200" />
+                {{ t('Reset') }}
+              </button>
 
             </div>
           </div>
@@ -272,7 +320,7 @@ import { IconShieldSolid, IconInfoCircleSolid } from '@iconify-prerendered/vue-f
 import { IconExclamationTriangle } from '@iconify-prerendered/vue-humbleicons';
 import { useFiltersStore } from '@/stores/filters';
 import { Button } from '@/afcl'
-import { IconMessageCaptionOutline, IconShieldCheckOutline, IconFileLinesOutline, IconUndoOutline, IconImageSolid } from '@iconify-prerendered/vue-flowbite';
+import { IconMessageCaptionOutline, IconShieldCheckOutline, IconFileLinesOutline, IconUndoOutline, IconImageSolid, IconRefreshOutline } from '@iconify-prerendered/vue-flowbite';
 import { ProgressBar } from '@/afcl';
 
 
@@ -404,14 +452,16 @@ const generationModeButtons = computed(() => {
       label: checkedCount.value > 1 ? t('Save fields') : t('Save field'), 
       options: { 
         disabled: isLoading.value || checkedCount.value < 1 || isFetchingRecords.value || isProcessingAny.value || isGenerationPaused.value, 
-        loader: isLoading.value, class: 'w-fit' 
+        loader: isLoading.value, 
+        class: 'afcl-button w-1/6'
       }, 
       onclick: async (dialog) => { await saveData(); dialog.hide(); } 
     },
     { 
       label: t('Cancel'), 
       options: {
-        class: 'bg-white hover:!bg-gray-100 !text-gray-900 hover:!text-gray-800 dark:!bg-gray-800 dark:!text-gray-100 dark:hover:!bg-gray-700 !border-gray-200 dark:!border-gray-600'
+        class: 'afcl-button w-1/6',
+        mode: 'secondary'
       }, 
       onclick: async (dialog) => { await handleBeforeClose(dialog); } 
     },
@@ -422,7 +472,8 @@ const generationModeButtons = computed(() => {
       label: t('Save processed'),
       options: {
         disabled: isLoading.value || isSavingCurrent.value || completedRecordIds.value.size < 1,
-        loader: isSavingCurrent.value, class: 'w-fit'
+        loader: isSavingCurrent.value,
+        class: 'afcl-button w-1/6',
       },
       onclick: async () => { await saveCurrentGenerated(); }
     })

From b9db38b21823c82d9f4277f3fb65eb8ddd92302e Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Tue, 26 May 2026 15:32:28 +0300
Subject: [PATCH 06/34] feat: add i18n support for user prompts and messages in
 VisionAction.vue

---
 custom/VisionAction.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index 7c55c81..5110af5 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -157,7 +157,7 @@
         </div>
       </template>
       <template v-else-if="!recordsList.length && popupMode === 'generation'">
-        <p>No data to save. Feel free to click "Cancel"</p>
+        <p>{{ t('No data to save. Feel free to click "Cancel"') }}</p>
       </template>
       <div v-else-if="popupMode === 'settings'" class="w-full flex flex-col gap-6">
         <template v-for="(promptsCategory, key) in generationPrompts" :key="key">
@@ -265,7 +265,7 @@
               </div>
               <div class="min-w-0">
                 <p class="text-base font-semibold text-gray-900 dark:text-white leading-tight">{{ t('Overwrite existing values') }}</p>
-                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 break-words pr-2">AI-generated data will replace existing values.</p>
+                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 break-words pr-2">{{ t('AI-generated data will replace existing values.') }}</p>
               </div>
             </div>
             <div class="shrink-0 pt-1">
@@ -290,15 +290,15 @@
               <IconMessageCaptionOutline class="w-5 h-5 dark:brightness-200" />
             </div>
             <div class="min-w-0">
-              <p class="text-base font-semibold text-gray-900 dark:text-white leading-tight">{{ t('Configure prompts') }}</p>
-              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 break-words">Change the instructions for AI to generate actual data.</p>
+              <p class="text-base font-semibold text-gray-900 dark:text-white leading-tight">{{ t('Configure prompts')}}</p>
+              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 break-words">{{ t('Change the instructions for AI to generate actual data.')}}</p>
             </div>
           </div>
         </div>
 
         <div class="flex items-center gap-2 px-1 text-xs font-medium text-gray-400 dark:text-gray-500">
           <IconInfoCircleSolid class="w-4 h-4 " />
-          <p>This action will only apply to the fields included in your prompts.</p>
+          <p>{{ t('This action will only apply to the fields included in your prompts.') }}</p>
         </div>
     
       </div>

From d10bce69a715704df52e20d5c4374445d42bc2e5 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Wed, 27 May 2026 12:22:15 +0300
Subject: [PATCH 07/34] fix: update adminforth dependency version to 2.67.2 and
 adjust related lockfile entries

---
 custom/VisionAction.vue |  4 ++--
 package.json            |  2 +-
 pnpm-lock.yaml          | 10 +++++-----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index 5110af5..0df8209 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -145,8 +145,8 @@
           @regenerate-images="regenerateImages"
           @regenerate-cell="regenerateCell"
         />
-        <div class="mt-2 flex items-start text-lightPrimary dark:text-darkPrimary bg-lightPrimary/10 dark:bg-darkPrimary/10 px-4 py-3 rounded-default border border-lightPrimary/20 dark:border-darkPrimary/20 text-sm">
-          <IconInfoCircleSolid class="w-5 h-5 me-2 shrink-0 mt-0.5 text-lightPrimary dark:text-darkPrimary dark:brightness-200" />
+        <div class="mt-2 flex items-center text-lightPrimary dark:text-darkPrimary bg-lightPrimary/10 dark:bg-darkPrimary/10 px-4 py-3 rounded-default border border-lightPrimary/20 dark:border-darkPrimary/20 text-sm">
+          <IconInfoCircleSolid class="w-5 h-5 me-2 shrink-0  text-lightPrimary dark:text-darkPrimary dark:brightness-200" />
           <p class="text-lightPrimary dark:text-darkPrimary dark:brightness-200">
             <span class="font-semibold text-lightPrimary dark:text-darkPrimary dark:brightness-200">{{ t('Only checked fields will be saved.') }}</span> 
             {{ t('You can regenerate fields before saving if needed.') }}
diff --git a/package.json b/package.json
index 3af26cd..c36118d 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   "description": "Bulk AI workflow plugin for AdminForth for batch field generation and image processing",
   "devDependencies": {
     "@types/node": "latest",
-    "adminforth": "^2.60.2",
+    "adminforth": "2.67.2",
     "semantic-release": "^24.2.1",
     "semantic-release-slack-bot": "^4.0.2",
     "typescript": "^5.7.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 56fc272..a5f5892 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,8 +19,8 @@ importers:
         specifier: latest
         version: 25.3.3
       adminforth:
-        specifier: ^2.60.2
-        version: 2.60.2(@types/node@25.3.3)(typescript@5.9.3)
+        specifier: 2.67.2
+        version: 2.67.2(@types/node@25.3.3)(typescript@5.9.3)
       semantic-release:
         specifier: ^24.2.1
         version: 24.2.9(typescript@5.9.3)
@@ -416,8 +416,8 @@ packages:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
 
-  adminforth@2.60.2:
-    resolution: {integrity: sha512-WHttE8tZKLYNw3dpFqLOAsenyX9Ymv/3/6kfpsU8npMpZQk55H2p39MJm4vtAhUbz4aSroV37B7nPO3V/dZ5dw==}
+  adminforth@2.67.2:
+    resolution: {integrity: sha512-7RZOf/qQuJGWIco9sjIuLaHz5gjjFkZMNnkjGJQDhvqQ1NWG21tG6pQi0/ilQxhaGTsLtzxw5jce8O/RUpH1Hw==}
     hasBin: true
 
   agent-base@7.1.4:
@@ -2978,7 +2978,7 @@ snapshots:
       mime-types: 2.1.35
       negotiator: 0.6.3
 
-  adminforth@2.60.2(@types/node@25.3.3)(typescript@5.9.3):
+  adminforth@2.67.2(@types/node@25.3.3)(typescript@5.9.3):
     dependencies:
       '@babel/parser': 7.29.0
       '@clickhouse/client': 1.18.1

From 461670c1365a9a074121024e41dd2df07b98a540 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Wed, 27 May 2026 13:41:52 +0300
Subject: [PATCH 08/34] fix: adjust icon size and tooltip formatting in
 VisionTable.vue for consistency

---
 custom/VisionAction.vue | 2 +-
 custom/VisionTable.vue  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index 0df8209..fb14743 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -146,7 +146,7 @@
           @regenerate-cell="regenerateCell"
         />
         <div class="mt-2 flex items-center text-lightPrimary dark:text-darkPrimary bg-lightPrimary/10 dark:bg-darkPrimary/10 px-4 py-3 rounded-default border border-lightPrimary/20 dark:border-darkPrimary/20 text-sm">
-          <IconInfoCircleSolid class="w-5 h-5 me-2 shrink-0  text-lightPrimary dark:text-darkPrimary dark:brightness-200" />
+          <IconInfoCircleSolid class="w-5 h-5 me-2 shrink-0 text-lightPrimary dark:text-darkPrimary dark:brightness-200" />
           <p class="text-lightPrimary dark:text-darkPrimary dark:brightness-200">
             <span class="font-semibold text-lightPrimary dark:text-darkPrimary dark:brightness-200">{{ t('Only checked fields will be saved.') }}</span> 
             {{ t('You can regenerate fields before saving if needed.') }}
diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index 2205fc2..69f0b95 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -3,7 +3,7 @@
       ref="tableRef"
       :columns="tableHeaders"
       :data="tableDataProvider"
-      :pageSize="pageSize"
+      :pageSize="100"
       makeHeaderSticky
       makePaginationSticky
       >
@@ -171,11 +171,11 @@
                   <div>
                     <IconRefreshOutline
                       @click="() => {regenerateImages(item.id)}"
-                      class="w-20 h-20 hover:text-blue-500 cursor-pointer transition hover:scale-105"
+                      class="w-10 h-10 hover:text-blue-500 cursor-pointer transition hover:scale-105"
                     />
                   </div>
                   <template #tooltip>
-                    {{ item.imageGenerationErrorMessage + '. Click to retry.' }}
+                    {{ item.imageGenerationErrorMessage + 'Click to retry' }}
                   </template>
                 </Tooltip>
               </div>

From 56659a0c0c3557e7738b5b7e4c6f58189e69d155 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Fri, 29 May 2026 12:18:09 +0300
Subject: [PATCH 09/34] fix: refactor vision table component for best visible

---
 custom/VisionAction.vue |  16 +-
 custom/VisionTable.vue  | 505 ++++++++++++++++++++++++----------------
 index.ts                |   5 +-
 types.ts                |   6 +
 4 files changed, 327 insertions(+), 205 deletions(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index fb14743..0d36637 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -8,7 +8,7 @@
   <Dialog 
     ref="confirmDialog"
     header="Bulk AI Generation"
-    class="[scrollbar-gutter:stable] !max-w-full w-fit h-fit"
+    class="[scrollbar-gutter:stable] max-w-full h-fit"
     :class="popupMode === 'generation' ? 'lg:w-auto !lg:max-w-[1600px]' 
       : popupMode === 'settings' ? 'lg:w-[1000px] !lg:max-w-[1000px]' 
         : 'lg:w-[500px] !lg:max-w-[500px]'"
@@ -51,11 +51,17 @@
           ]"
     :click-to-close-outside="false"
   >
-    <div class="bulk-vision-table flex flex-col max-h-[700px] gap-4 overflow-y-auto w-full">
+    <div
+      class="bulk-vision-table flex flex-col gap-3 w-full"
+      :class="{
+        'h-[830px]': popupMode === 'generation',
+        'h-auto max-h-[720px]': popupMode !== 'generation'
+      }"
+    >
       <template v-if="recordsList.length && popupMode === 'generation'" >
         <div class="w-full min-w-[980px]">
-          <p :class="isGenerationPaused ? '' : 'opacity-0'" class="text-sm font-semibold text-yellow-800">{{ t(`Generated ${startedRecordCount} records. `) + t('Generation on pause. Resume generation?') }}</p>
           <div v-if="isGenerationPaused" class="flex flex-col gap-2 mb-2">
+            <p class="text-sm font-semibold text-yellow-800">{{ t(`Generated ${startedRecordCount} records. `) + t('Generation on pause. Resume generation?') }}</p>
             <div class="flex items-center gap-2">
               <button
                 class="h-8 px-3 py-1.5 text-sm rounded-md bg-gradient-to-r from-lightPrimary to-lightPrimary/80 text-white border-none ml-2"
@@ -127,7 +133,7 @@
 
 
         <VisionTable
-          class="md:max-h-[75vh] max-w-[1560px] w-full h-full"
+          class="w-full flex-1 min-h-0 overflow-y-auto [scrollbar-gutter:stable]"
           ref="tableRef"
           :records="recordsList"
           :meta="props.meta"
@@ -159,7 +165,7 @@
       <template v-else-if="!recordsList.length && popupMode === 'generation'">
         <p>{{ t('No data to save. Feel free to click "Cancel"') }}</p>
       </template>
-      <div v-else-if="popupMode === 'settings'" class="w-full flex flex-col gap-6">
+      <div v-else-if="popupMode === 'settings'" class="w-full flex flex-col gap-6 overflow-y-auto overflow-x-hidden pr-2 max-h-[70vh]">
         <template v-for="(promptsCategory, key) in generationPrompts" :key="key">
         <div v-if="Object.keys(promptsCategory).length > 0" class="w-full flex flex-col">
           <div class="flex items-start gap-3.5 mb-6 border-b border-gray-100 dark:border-gray-800">
diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index 69f0b95..13d0aa0 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -1,222 +1,287 @@
 <template>
-    <Table
-      ref="tableRef"
-      :columns="tableHeaders"
-      :data="tableDataProvider"
-      :pageSize="100"
-      makeHeaderSticky
-      makePaginationSticky
+  <div class="overflow-auto pr-2" style="max-height: calc(100vh - 260px);">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6 p-1">
+      <div 
+        v-for="item in paginatedRecords" 
+        :key="item.id"
+        class="bg-white border border-gray-200 rounded-default p-4 shadow-sm hover:shadow-md transition-shadow relative flex flex-col justify-between gap-4"
       >
-      <!-- HEADER TEMPLATE -->
-      <template #header:checkboxes="{ item }">
-        {{ $t('MARK FOR SAVE') }}
-      </template>
-      <!-- CHECKBOX CELL TEMPLATE -->
-      <template #cell:checkboxes="{ item }">
-        <div class="max-w-[100px] flex items-center justify-center">
-          <Checkbox
-            v-model="item.isChecked"
-          />
-        </div>
-      </template>
-      <!-- IMAGE CELL TEMPLATE -->
-      <template #cell:images="{item}">
-        <div class="flex flex-shrink-0 gap-2">
-          <div v-if="item.images.length" v-for="image in item.images" :key="image">
-            <div class="mt-2 flex items-center justify-center gap-2">
-              <img
-                  v-if="isValidUrl(image)" 
-                  :src="image"  
-                  class="w-20 h-20 object-cover rounded cursor-pointer border hover:border-blue-500 transition my-2" 
-                  @click="zoomImage(image)"
+        <div class="flex flex-col h-full">
+          <div class="flex items-start justify-between gap-4 mb-4">
+            <div class="flex items-center gap-3 w-full min-w-0">
+              <Checkbox 
+                v-model="item.isChecked" 
+                class="shrink-0"
               />
-              <div v-else class="w-20 h-20">
-                <p>{{ $t('Invalid source image') }}</p>
+              <!-- CRITICAL WRAPPER -->
+              <div class="flex-1 min-w-0 w-0">
+                <h3 class="font-bold text-gray-900 w-full truncate overflow-hidden whitespace-nowrap">
+                  {{ item.label || item.data?.name || $t('Item Record') }}
+                </h3>
               </div>
             </div>
+            <div class="text-right shrink-0 text-gray-400">
+              ID: {{ item.id }}
+            </div>
           </div>
-          <div class="flex items-center justify-center text-center w-20 h-20" v-else>
-            <p>{{ $t('No images found') }}</p>
-          </div>
-          <transition name="fade">
+
+          <div class="flex flex-col gap-3 flex-grow">
             <div
-              v-if="zoomedImage"
-              class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
-              @click.self="closeZoom"
+              class="w-full flex flex-col items-center justify-center bg-gray-50 border border-dashed border-gray-200 h-full max-h-[260px] max-w-[428.5px] rounded-default text-center "
             >
-              <transition name="zoom">
-                <img
-                  v-if="zoomedImage"
-                  :src="zoomedImage"
-                  class="max-w-full max-h-full rounded-lg object-contain cursor-grab z-75"
-                />
-              </transition>
-            </div>
-          </transition>
-        </div>
-      </template>
-      <!-- CUSTOM FIELD TEMPLATES -->
-      <template v-for="n in customFieldNames" :key="n" #[`cell:${n}`]="{ item }">
-        <div v-if="(isAnalyzing(item, n) && !item.regeneratingFieldsStatus?.[n]) && !isInColumnImage(n)" @mouseenter="(() => { setHover(item.id, n, true) })" @mouseleave="(() => { setHover(item.id, n, false) })">
-          <div class="flex gap-1 justify-end">
-            <Tooltip v-if="checkForError(item, n)">
-              <IconExclamationCircleSolid class="my-2 w-5 h-5 text-red-500" />
-              <template #tooltip> 
-                {{ checkForError(item, n) }}
-              </template>
-            </Tooltip>
-            <Tooltip>
-              <IconRefreshOutline class="my-2 w-5 h-5 hover:text-blue-500 cursor-pointer" :class="{ 'opacity-50 cursor-not-allowed hover': shouldDisableRegenerateFieldIcon(item, n) }" @click="regerenerateFieldIconClick(item, n)"/>
-              <template #tooltip> 
-                {{ shouldDisableRegenerateFieldIcon(item, n) ? $t("Can't analyze image without source image") : $t('Regenerate') }}
+              <!-- HAS IMAGES -->
+              <template v-if="item.images?.length">
+                <template
+                  v-for="(image, index) in item.images"
+                  :key="image || index"
+                >
+                  <img
+                    v-if="image && isValidUrl(image)"
+                    :src="image"
+                    class="w-full h-full object-cover rounded-default cursor-pointer border hover:border-blue-500 transition"
+                    @click="zoomImage(image)"
+                  />
+
+                  <div
+                    v-else
+                    class="text-xs text-red-500 flex flex-col items-center justify-center h-full p-2"
+                  >
+                    <IconExclamationCircleSolid class="w-6 h-6 mb-1" />
+                    <p>{{ $t('Invalid source image') }}</p>
+                  </div>
+                </template>
               </template>
-            </Tooltip>
-          </div>
-          <div v-if="isInColumnEnum(n)" class="flex flex-col items-start justify-end min-h-[90px]">
-              <Select
-                class="min-w-[150px]"
-                :options="convertColumnEnumToSelectOptions(props.meta.columnEnums, n)"
-                v-model="item.data[n]"
-                :teleportToTop="true"
-                :teleportToBody="false"
-              >
-              </Select>
-              <Tooltip>
-                <div class="mt-2 flex items-center justify-start gap-1 hover:text-blue-500" :class="{ 'opacity-0': !isHovered(item.id, n) }">
-                  <p class="text-sm ">{{ $t('old value') }}</p>
+
+              <!-- EMPTY ARRAY -->
+              <template v-else-if="item.images?.length === 0">
+                <div class="text-gray-400 h-[260px] flex flex-col items-center justify-center h-full">
+                  <svg
+                    class="w-8 h-8 mb-2 stroke-1 text-gray-300"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                    />
+                  </svg>
+                  <p class="text-xs font-medium">{{ $t('No images found') }}</p>
                 </div>
-                <template #tooltip>
-                  {{  item.oldData?.[n] ?? "No old value" }}
-                </template>
-              </Tooltip>
-          </div>
-            <div v-else-if="typeof item.data?.[n] === 'string' || typeof item.data?.[n] === 'object'" class="flex flex-col items-start justify-end min-h-[90px]">
-            <Textarea
-              class="min-w-[150px] h-full"
-              type="text"
-              v-model="item.data[n]"
-            >
-            </Textarea>
-            <Tooltip>
-                <div class="mt-2 flex items-center justify-start gap-1 hover:text-blue-500" :class="{ 'opacity-0': !isHovered(item.id, n) }">
-                  <p class="text-sm ">{{ $t('old value') }}</p>
+              </template>
+
+              <!-- NO DATA -->
+              <template v-else>
+                <div class="text-gray-400 flex flex-col items-center justify-center h-full">
+                  <svg
+                    class="w-8 h-8 mb-2 stroke-1 text-gray-300"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                    />
+                  </svg>
+                  <p class="text-xs font-medium">{{ $t('No image found') }}</p>
                 </div>
-              <template #tooltip>
-                <p class="max-w-[200px]">{{  item.oldData?.[n] ?? "No old value" }}</p>
               </template>
-            </Tooltip>
             </div>
-          <div v-else-if="typeof item.data?.[n] === 'boolean'" class="flex flex-col items-center justify-end min-h-[90px]">
-            <Toggle
-              class="p-2"
-              v-model="item.data[n]"
-            >
-            </Toggle>
-            <Tooltip>
-                <div class="mt-2 flex items-center justify-start gap-1 hover:text-blue-500" :class="{ 'opacity-0': !isHovered(item.id, n) }">
-                  <p class="text-sm ">{{ $t('old value') }}</p>
+            
+            <div class="flex flex-col gap-3">
+              <div 
+                v-for="n in customFieldNames" 
+                :key="n"
+                class="flex flex-col relative"
+                @mouseenter="(() => { setHover(item.id, n, true) })" 
+                @mouseleave="(() => { setHover(item.id, n, false) })"
+              >
+                <div class="flex justify-between items-center mb-1">
+                  <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                    {{ n.replace(/([A-Z])/g, ' $1').trim() }}
+                  </label>
+                  
+                  <div class="flex gap-1 items-center" v-if="!isInColumnImage(n)">
+                    <Tooltip v-if="checkForError(item, n)">
+                      <IconExclamationCircleSolid class="w-4 h-4 text-red-500" />
+                      <template #tooltip>{{ checkForError(item, n) }}</template>
+                    </Tooltip>
+                    <Tooltip>
+                      <IconRefreshOutline 
+                        class="w-4 h-4 text-gray-400 hover:text-blue-500 cursor-pointer transition" 
+                        :class="{ 'opacity-30 cursor-not-allowed': shouldDisableRegenerateFieldIcon(item, n) }" 
+                        @click="regerenerateFieldIconClick(item, n)"
+                      />
+                      <template #tooltip> 
+                        {{ shouldDisableRegenerateFieldIcon(item, n) ? $t("Can't analyze image without source image") : $t('Regenerate') }}
+                      </template>
+                    </Tooltip>
+                  </div>
                 </div>
-              <template #tooltip>
-                {{  item.oldData?.[n] ?? "No old value" }}
-              </template>
-            </Tooltip>
-          </div>
-          <div v-else class="flex flex-col items-start justify-end min-h-[90px]">
-            <Input
-              type="number"
-              v-model="item.data[n]"
-              class="w-full min-w-[80px]"
-              :fullWidth="true"
-            />
-            <Tooltip>
-                <div class="mt-2 flex items-center justify-start gap-1 hover:text-blue-500" :class="{ 'opacity-0': !isHovered(item.id, n) }">
-                  <p class="text-sm ">{{ $t('old value') }}</p>
+
+                <div v-if="isInColumnImage(n)">
+                  <div v-if="item.aiStatus?.generatedImages" class="flex flex-col gap-2">
+                    <div v-if="isValidUrl(item.data?.[n])" class="flex items-center gap-3 relative">
+                      <img 
+                        :src="item.data?.[n]" 
+                        class="w-16 h-16 object-cover rounded-default border border-gray-200 cursor-pointer hover:border-blue-500 transition" 
+                        @click="() => { item.openGenerationCarousel[n] = true }"
+                      />
+                      <p
+                        v-if="isImageHasPreviewUrl[n]"
+                        class="text-xs text-blue-500 hover:underline cursor-pointer transition-opacity"
+                        :class="{ 'opacity-0': !isHovered(item.id, n) }"
+                        @click="() => { item.openImageCompare[n] = true }"  
+                      >
+                        {{ $t('old image') }}
+                      </p>
+                    </div>
+                    <div v-else class="w-16 h-16 border rounded-default flex items-center justify-center bg-gray-50">
+                      <Tooltip v-if="item.imageGenerationErrorMessage === 'No source images found'">
+                        <p class="text-xs text-red-400 p-1 text-center">{{ $t("Can't generate") }}</p>
+                        <template #tooltip>{{ item.imageGenerationErrorMessage }}</template>
+                      </Tooltip>
+                      <Tooltip v-else>
+                        <IconRefreshOutline @click="() => { regenerateImages(item.id) }" class="w-6 h-6 text-gray-400 hover:text-blue-500 cursor-pointer" />
+                        <template #tooltip>{{ item.imageGenerationErrorMessage + '. Click to retry' }}</template>
+                      </Tooltip>
+                    </div>
+
+                    <GenerationCarousel
+                      v-if="item.openGenerationCarousel?.[n]"
+                      :images="item.carouselSaveImages?.[n]"
+                      :recordId="item.id"
+                      :meta="props.meta"
+                      :fieldName="n"
+                      :carouselImageIndex="item.carouselImageIndex?.[n]"
+                      :regenerateImagesRefreshRate="regenerateImagesRefreshRate"
+                      :sourceImage="item.images && item.images.length ? item.images : null"
+                      :imageGenerationPrompts="imageGenerationPrompts[n]"
+                      @error="handleError"
+                      @close="item.openGenerationCarousel[n] = false"
+                      @selectImage="updateSelectedImage"
+                      @updateCarouselIndex="updateActiveIndex"
+                    />
+                    <ImageCompare
+                      v-if="item.openImageCompare?.[n]"
+                      :meta="props.meta"
+                      :columnName="n"
+                      :oldImage="item.oldData?.[n]"
+                      :newImage="item.data?.[n]"
+                      @close="item.openImageCompare[n] = false"
+                    />
+                  </div>
+                  <div v-else>
+                    <Skeleton type="image" class="w-16 h-16 rounded-default" />
+                  </div>
                 </div>
-              <template #tooltip>
-                {{  item.oldData?.[n] ?? "No old value" }}
-              </template>
-            </Tooltip>
-          </div>
-        </div>
 
-        <div v-if="item.aiStatus.generatedImages" @mouseenter="(() => { setHover(item.id, n, true) })" @mouseleave="(() => { setHover(item.id, n, false) })">
-          <div v-if="isInColumnImage(n)">
-            <div class="mt-2 mb-2 flex items-center justify-start gap-2">
-              <div v-if="isValidUrl(item.data?.[n])" class="flex flex-col items-center relative">
-              <img 
-                :src="item.data?.[n]"
-                class="w-20 h-20 object-cover rounded cursor-pointer border hover:border-blue-500 transition"
-                @click="() => {item.openGenerationCarousel[n] = true}"
-              />
-              <p
-                v-if="isImageHasPreviewUrl[n]"
-                class="absolute mt-20 text-sm hover:text-blue-500 hover:underline hover:cursor-pointer flex items-center gap-1"
-                :class="{ 'opacity-0': !isHovered(item.id, n) }"
-                @click="() => {item.openImageCompare[n] = true}"  
-              >
-                {{ $t('old image') }}
-              </p>
-              </div>
-              <div v-else class="flex items-center justify-center text-center w-20 h-20">
-                <Tooltip v-if="item.imageGenerationErrorMessage === 'No source images found'">
-                  <p
-                  >
-                    {{ $t("Can't generate image.") }}
-                  </p>
-                  <template #tooltip>
-                    {{ item.imageGenerationErrorMessage }}
-                  </template>
-                </Tooltip>
-                <Tooltip v-else>
-                  <div>
-                    <IconRefreshOutline
-                      @click="() => {regenerateImages(item.id)}"
-                      class="w-10 h-10 hover:text-blue-500 cursor-pointer transition hover:scale-105"
+                <div v-else-if="(isAnalyzing(item, n) && !item.regeneratingFieldsStatus?.[n])">
+                  <div v-if="isInColumnEnum(n)">
+                    <Select
+                      class="w-full"
+                      :options="convertColumnEnumToSelectOptions(props.meta.columnEnums, n)"
+                      v-model="item.data[n]"
+                      :teleportToTop="true"
                     />
                   </div>
-                  <template #tooltip>
-                    {{ item.imageGenerationErrorMessage + 'Click to retry' }}
-                  </template>
-                </Tooltip>
+                  
+                  <div v-else-if="typeof item.data?.[n] === 'string' || typeof item.data?.[n] === 'object'">
+                    <Textarea
+                      v-model="item.data[n]"
+                      class="w-full min-h-[42px] text-sm"
+                    />
+                  </div>
+
+                  <div v-else-if="typeof item.data?.[n] === 'boolean'" class="flex items-center h-10">
+                    <Toggle v-model="item.data[n]" />
+                  </div>
+
+                  <div v-else>
+                    <Input
+                      type="number"
+                      v-model="item.data[n]"
+                      class="w-full"
+                      :fullWidth="true"
+                    />
+                  </div>
+
+                  <!-- <div class="text-[11px] text-gray-400 mt-1 min-h-[16px] transition-opacity" :class="{ 'opacity-0': !isHovered(item.id, n) }">
+                    {{ $t('old value') }}: <span class="font-medium text-gray-600">{{ item.oldData?.[n] ?? '—' }}</span>
+                  </div> -->
+                </div>
+
+                <div v-else>
+                  <Skeleton class="w-full h-10 rounded-default" />
+                </div>
               </div>
             </div>
-            <div>
-              <GenerationCarousel
-                v-if="item.openGenerationCarousel[n]"
-                :images="item.carouselSaveImages[n]"
-                :recordId="item.id"
-                :meta="props.meta"
-                :fieldName="n"
-                :carouselImageIndex="item.carouselImageIndex[n]"
-                :regenerateImagesRefreshRate="regenerateImagesRefreshRate"
-                :sourceImage="item.images && item.images.length ? item.images : null"
-                :imageGenerationPrompts="imageGenerationPrompts[n]"
-                @error="handleError"
-                @close="item.openGenerationCarousel[n] = false"
-                @selectImage="updateSelectedImage"
-                @updateCarouselIndex="updateActiveIndex"
-              />
-              <ImageCompare
-                v-if="item.openImageCompare[n]"
-                :meta="props.meta"
-                :columnName="n"
-                :oldImage="item.oldData?.[n]"
-                :newImage="item.data?.[n]"
-                @close="item.openImageCompare[n] = false"
-              />
-            </div>
-          </div>
-        </div>
 
-        <div v-if="!item.aiStatus.generatedImages && isInColumnImage(n)">
-            <Skeleton type="image" class="w-20 h-20" />
+          </div>
         </div>
 
-        <div v-if="(!isAnalyzing(item, n) || item.regeneratingFieldsStatus?.[n]) && !isInColumnImage(n)">
-          <Skeleton class="w-full h-6" />
+        <div class="border-t border-gray-100 flex justify-end shrink-0">
+          <button @click="() => regenerateImages(item.id)" class="px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-default hover:bg-gray-50 flex items-center gap-1.5 transition">
+            <IconRefreshOutline class="w-3.5 h-3.5" /> {{ $t('Regenerate') }}
+          </button>
         </div>
-      </template>
-    </Table>
+      </div>
+    </div>
+
+    
+
+    <transition name="fade">
+      <div v-if="zoomedImage" class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm" @click.self="closeZoom">
+        <transition name="zoom">
+          <img v-if="zoomedImage" :src="zoomedImage" class="max-w-[90vw] max-h-[90vh] rounded-default object-contain shadow-2xl" />
+        </transition>
+      </div>
+    </transition>
+
+    <div v-show="totalItems > 0" class="w-full flex flex-col sm:flex-row sm:items-center sm:justify-between px-1 py-2 bg-transparent">
+      <p class="text-sm text-gray-500">
+        {{ $t('Showing') }}
+        <span class="font-semibold text-gray-900">{{ fromIndex }}</span>
+        {{ $t('to') }}
+        <span class="font-semibold text-gray-900">{{ toIndex }}</span>
+        {{ $t('of') }}
+        <span class="font-semibold text-gray-900">{{ totalItems }}</span>
+      </p>
+
+      <div class="inline-flex items-center gap-1 rounded-default border border-gray-200 bg-white px-2 py-1 shadow-sm">
+        <button
+          class="inline-flex items-center justify-center rounded-default px-3 py-1 text-sm font-medium text-gray-500 transition hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
+          :disabled="currentPage <= 1"
+          @click="previousPage"
+        >
+          {{ $t('Prev') }}
+        </button>
+
+        <template v-for="page in pageButtons" :key="page">
+          <button
+            class="inline-flex items-center justify-center rounded-default px-3 py-1 text-sm font-medium transition"
+            :class="page === currentPage ? 'bg-blue-600 text-white shadow-sm' : 'text-gray-600 hover:bg-gray-100'"
+            @click="goToPage(page)"
+          >
+            {{ page }}
+          </button>
+        </template>
+
+        <button
+          class="inline-flex items-center justify-center rounded-default px-3 py-1 text-sm font-medium text-gray-500 transition hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
+          :disabled="currentPage >= totalPages"
+          @click="nextPage"
+        >
+          {{ $t('Next') }}
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -242,8 +307,11 @@ const props = defineProps<{
 }>();
 const emit = defineEmits(['error', 'regenerateImages', 'regenerateCell']);
 
-const pageSize = 6;
-const pagination = reactive({ offset: 0, limit: pageSize });
+const DEFAULT_PAGE_SIZE = 7;
+const initialPageSize = props.meta?.pageSize ?? DEFAULT_PAGE_SIZE;
+console.log(props.meta?.pageSize);
+
+const pagination = reactive({ offset: 0, limit: initialPageSize });
 const zoomedImage = ref(null);
 const hovers = ref<Record<string, Record<string, boolean>>>({});
 const tableRef = ref(null);
@@ -258,6 +326,23 @@ defineExpose({
 
 const paginatedRecords = computed(() => props.records.slice(pagination.offset, pagination.offset + pagination.limit));
 
+const totalItems = computed(() => props.records.length);
+const currentPage = computed(() => Math.floor(pagination.offset / pagination.limit) + 1);
+const totalPages = computed(() => Math.max(1, Math.ceil(totalItems.value / pagination.limit)));
+const fromIndex = computed(() => totalItems.value === 0 ? 0 : Math.min(pagination.offset + 1, totalItems.value));
+const toIndex = computed(() => Math.min(pagination.offset + pagination.limit, totalItems.value));
+const pageButtons = computed(() => {
+  const pages = [];
+  const current = currentPage.value;
+  const total = totalPages.value;
+  const start = Math.max(1, current - 2);
+  const end = Math.min(total, current + 2);
+
+  for (let number = start; number <= end; number += 1) {
+    pages.push(number);
+  }
+  return pages;
+});
 const tableDataProvider = async ({ offset, limit }) => {
   pagination.offset = offset;
   pagination.limit = limit;
@@ -267,6 +352,22 @@ const tableDataProvider = async ({ offset, limit }) => {
   };
 };
 
+watch(() => props.records.length, (newLength) => {
+  const maxOffset = Math.max(0, (Math.ceil(newLength / pagination.limit) - 1) * pagination.limit);
+  if (pagination.offset > maxOffset) {
+    pagination.offset = maxOffset;
+  }
+});
+
+watch(() => props.meta?.pageSize, (newSize) => {
+  const size = Number(newSize) || DEFAULT_PAGE_SIZE;
+  pagination.limit = size;
+  const maxOffset = Math.max(0, (Math.ceil(props.records.length / pagination.limit) - 1) * pagination.limit);
+  if (pagination.offset > maxOffset) {
+    pagination.offset = maxOffset;
+  }
+}, { immediate: true });
+
 watch(() => props.records, (newVal) => {
   hovers.value = Object.fromEntries((newVal || []).map(record => [String(record.id), {}]));
 }, { immediate: true, deep: true });
@@ -399,8 +500,18 @@ function isHovered(recordId: string | number, field: string) {
   return Boolean(hovers.value?.[String(recordId)]?.[field]);
 }
 
+function goToPage(page: number) {
+  const clampedPage = Math.min(Math.max(page, 1), totalPages.value);
+  pagination.offset = (clampedPage - 1) * pagination.limit;
+}
 
+function previousPage() {
+  goToPage(currentPage.value - 1);
+}
 
+function nextPage() {
+  goToPage(currentPage.value + 1);
+}
 </script>
 
 <style scoped>
diff --git a/index.ts b/index.ts
index 3f50d74..361fa4f 100644
--- a/index.ts
+++ b/index.ts
@@ -5,8 +5,6 @@ import type { PluginOptions } from './types.js';
 import Handlebars from 'handlebars';
 import { RateLimiter } from "adminforth";
 import { randomUUID } from "crypto";
-
-
 const STUB_MODE = false;
 const jobs = new Map(); 
 export default class  BulkAiFlowPlugin extends AdminForthPlugin {
@@ -643,7 +641,8 @@ export default class  BulkAiFlowPlugin extends AdminForthPlugin {
           plainFieldsPrompts: this.options.fillPlainFields || {},
           imageFieldsPrompts: this.options.fillFieldsFromImages || {},
           imageGenerationPrompts: this.options.generateImages || {},
-        }
+        },
+        pageSize: this.options.pageSize || undefined
       }
     }
     
diff --git a/types.ts b/types.ts
index 4ad5039..c4fce5e 100644
--- a/types.ts
+++ b/types.ts
@@ -153,4 +153,10 @@ export interface PluginOptions extends PluginsCommonOptions {
    */
   askConfirmation?: ({ afterRecords: number } | { everyRecords: number })[]
 
+  /**
+   * Number of cards to show per page in the VisionTable component.
+   * If omitted, the component falls back to 6.
+   */
+  pageSize?: number;
+
 }

From 99b18adc2c799b9969bfec90e6a1760adda31b27 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Fri, 29 May 2026 15:55:44 +0300
Subject: [PATCH 10/34] fix: fix close modal logic

---
 custom/VisionAction.vue | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index 0d36637..b152cdf 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -13,7 +13,7 @@
       : popupMode === 'settings' ? 'lg:w-[1000px] !lg:max-w-[1000px]' 
         : 'lg:w-[500px] !lg:max-w-[500px]'"
     :beforeCloseFunction="handleBeforeClose"
-    :closable="false"
+    :closable="true"
     :buttons="popupMode === 'generation' ? generationModeButtons : popupMode === 'settings' ? [
           {
             label: t('Cancel'),
@@ -46,7 +46,7 @@
                 class: 'afcl-button w-1/2',
                 loader: isCheckingRateLimits
               },
-              onclick: (dialog) => { runAiActions(); }
+              onclick: async () => { await runAiActions(); }
             }
           ]"
     :click-to-close-outside="false"
@@ -496,16 +496,16 @@ const handleBeforeClose = async (dialog?: any) => {
       no: t('Cancel'),
     });
 
-  if (confirmed) {
-    closeDialog();
-      
-    if (confirmDialog.value && typeof confirmDialog.value.hide === 'function') {
-      confirmDialog.value.hide();
-    } else if (dialog && typeof dialog.hide === 'function') {
-      dialog.hide();
+    if (confirmed) {
+      closeDialog();
+        
+      if (confirmDialog.value && typeof confirmDialog.value.hide === 'function') {
+        confirmDialog.value.hide();
+      } else if (dialog && typeof dialog.hide === 'function') {
+        dialog.hide();
+      }
+      return true;
     }
-    return true; 
-  }
     return false;
   }
 }

From 5215f14405cef19b49e066fc2a7bc254b8d9556a Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Fri, 29 May 2026 16:38:03 +0300
Subject: [PATCH 11/34] fix: fix edit prompt logic

---
 custom/VisionAction.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index b152cdf..b74d6b0 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -1478,10 +1478,14 @@ async function getGenerationPrompts() {
   const calculatedGenerationPrompts: any = {};
   const savedPrompts = localStorage.getItem(`bulkAiFlowGenerationPrompts_${props.meta.pluginInstanceId}`);
   if (props.meta.generationPrompts.plainFieldsPrompts) {
-    calculatedGenerationPrompts.plainFieldsPrompts = props.meta.generationPrompts.plainFieldsPrompts;
+    calculatedGenerationPrompts.plainFieldsPrompts = {
+      ...props.meta.generationPrompts.plainFieldsPrompts
+    };
   }
   if (props.meta.generationPrompts.imageFieldsPrompts) {
-    calculatedGenerationPrompts.imageFieldsPrompts = props.meta.generationPrompts.imageFieldsPrompts;
+    calculatedGenerationPrompts.imageFieldsPrompts = {
+      ...props.meta.generationPrompts.imageFieldsPrompts
+    };
   }
   if (props.meta.generationPrompts.imageGenerationPrompts) {
     let imageFields = {};

From edceeb0e6b08fe7cc1f5c941ad73d082a1aa4a60 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Mon, 1 Jun 2026 11:23:09 +0300
Subject: [PATCH 12/34] fix: implement toggle functionality for card value mode
 in VisionTable

---
 custom/VisionTable.vue | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index 13d0aa0..28759bd 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -20,8 +20,25 @@
                 </h3>
               </div>
             </div>
-            <div class="text-right shrink-0 text-gray-400">
-              ID: {{ item.id }}
+            <div class="flex items-center gap-3 shrink-0">
+              <div class="flex items-center gap-2">
+                <span class="text-xs font-medium text-gray-600 dark:text-gray-400">
+                  {{ cardValueMode?.[String(item.id)] === 'old' ? $t('old value') : $t('new value') }}
+                </span>
+                <button
+                  @click="toggleCardValueMode(item.id)"
+                  class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                  :class="cardValueMode?.[String(item.id)] === 'old' ? 'bg-lightPrimary dark:bg-darkPrimary' : 'bg-gray-200 dark:bg-gray-700'"
+                >
+                  <span
+                    class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform dark:bg-gray-200"
+                    :class="cardValueMode?.[String(item.id)] === 'old' ? 'translate-x-6' : 'translate-x-1'"
+                  />
+                </button>
+              </div>
+              <div class="text-right text-gray-400 text-sm">
+                ID: {{ item.id }}
+              </div>
             </div>
           </div>
 
@@ -315,6 +332,7 @@ const pagination = reactive({ offset: 0, limit: initialPageSize });
 const zoomedImage = ref(null);
 const hovers = ref<Record<string, Record<string, boolean>>>({});
 const tableRef = ref(null);
+const cardValueMode = ref<Record<string, 'old' | 'new'>>({});
 
 defineExpose({
   refresh() {
@@ -370,6 +388,11 @@ watch(() => props.meta?.pageSize, (newSize) => {
 
 watch(() => props.records, (newVal) => {
   hovers.value = Object.fromEntries((newVal || []).map(record => [String(record.id), {}]));
+  const newCardValueMode = {};
+  (newVal || []).forEach(record => {
+    newCardValueMode[String(record.id)] = 'new';
+  });
+  cardValueMode.value = newCardValueMode;
 }, { immediate: true, deep: true });
 
 function zoomImage(img) {
@@ -500,6 +523,12 @@ function isHovered(recordId: string | number, field: string) {
   return Boolean(hovers.value?.[String(recordId)]?.[field]);
 }
 
+function toggleCardValueMode(recordId: string | number) {
+  const key = String(recordId);
+  const currentMode = cardValueMode.value[key] || 'new';
+  cardValueMode.value[key] = currentMode === 'new' ? 'old' : 'new';
+}
+
 function goToPage(page: number) {
   const clampedPage = Math.min(Math.max(page, 1), totalPages.value);
   pagination.offset = (clampedPage - 1) * pagination.limit;

From 8dc3e52e38283ca6f3f176c537d78ca26fc48d3b Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Mon, 1 Jun 2026 12:15:36 +0300
Subject: [PATCH 13/34] fix: add no old value state

---
 custom/VisionTable.vue | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index 28759bd..a85f408 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -201,17 +201,28 @@
                 <div v-else-if="(isAnalyzing(item, n) && !item.regeneratingFieldsStatus?.[n])">
                   <div v-if="isInColumnEnum(n)">
                     <Select
+                      v-if="cardValueMode?.[String(item.id)] !== 'old'"
                       class="w-full"
                       :options="convertColumnEnumToSelectOptions(props.meta.columnEnums, n)"
                       v-model="item.data[n]"
                       :teleportToTop="true"
                     />
+                    
+                    <input
+                      v-else
+                      type="text"
+                      :value="item.oldData?.[n] || item.oldData?.[n] === 0 ? item.oldData[n] : $t('no old value')"
+                      disabled
+                      class="w-full h-10 px-3 border border-gray-200 rounded-default bg-gray-50 text-gray-400 text-sm focus:outline-none"
+                    />
                   </div>
                   
                   <div v-else-if="typeof item.data?.[n] === 'string' || typeof item.data?.[n] === 'object'">
-                    <Textarea
-                      v-model="item.data[n]"
-                      class="w-full min-h-[42px] text-sm"
+                    <textarea
+                      :value="cardValueMode?.[String(item.id)] === 'old' ? (item.oldData?.[n] || item.oldData?.[n] === 0 ? item.oldData[n] : $t('no old value')) : item.data[n]"
+                      @input="(e) => { if (cardValueMode?.[String(item.id)] !== 'old') item.data[n] = e.target.value }"
+                      :disabled="cardValueMode?.[String(item.id)] === 'old'"
+                      class="w-full min-h-[42px] text-sm p-2 border border-gray-200 rounded-default focus:outline-none focus:border-blue-500 disabled:bg-gray-50 disabled:text-gray-400"
                     />
                   </div>
 
@@ -220,17 +231,14 @@
                   </div>
 
                   <div v-else>
-                    <Input
-                      type="number"
-                      v-model="item.data[n]"
-                      class="w-full"
-                      :fullWidth="true"
+                    <input
+                      :type="cardValueMode?.[String(item.id)] === 'old' && !item.oldData?.[n] && item.oldData?.[n] !== 0 ? 'text' : 'number'"
+                      :value="cardValueMode?.[String(item.id)] === 'old' ? (item.oldData?.[n] || item.oldData?.[n] === 0 ? item.oldData[n] : $t('no old value')) : item.data[n]"
+                      @input="(e) => { if (cardValueMode?.[String(item.id)] !== 'old') item.data[n] = Number(e.target.value) }"
+                      :disabled="cardValueMode?.[String(item.id)] === 'old'"
+                      class="w-full h-10 px-3 border border-gray-200 rounded-default focus:outline-none focus:border-blue-500 disabled:bg-gray-50 disabled:text-gray-400 text-sm"
                     />
                   </div>
-
-                  <!-- <div class="text-[11px] text-gray-400 mt-1 min-h-[16px] transition-opacity" :class="{ 'opacity-0': !isHovered(item.id, n) }">
-                    {{ $t('old value') }}: <span class="font-medium text-gray-600">{{ item.oldData?.[n] ?? '—' }}</span>
-                  </div> -->
                 </div>
 
                 <div v-else>

From 296d3791e1b120fe5041c62b3a07efd1ee48c404 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Mon, 1 Jun 2026 12:30:50 +0300
Subject: [PATCH 14/34] fix: update generated photo size

---
 custom/VisionTable.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index a85f408..65bc466 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -146,8 +146,8 @@
                     <div v-if="isValidUrl(item.data?.[n])" class="flex items-center gap-3 relative">
                       <img 
                         :src="item.data?.[n]" 
-                        class="w-16 h-16 object-cover rounded-default border border-gray-200 cursor-pointer hover:border-blue-500 transition" 
-                        @click="() => { item.openGenerationCarousel[n] = true }"
+                        class="w-full max-h-[260px] object-contain rounded-default"
+                        style="image-rendering: auto;"
                       />
                       <p
                         v-if="isImageHasPreviewUrl[n]"

From c1639d97918049d06729a5bdbf04f74e4cf0ec6f Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Mon, 1 Jun 2026 12:59:10 +0300
Subject: [PATCH 15/34] fix: add no old value state

---
 custom/VisionTable.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index 65bc466..01e1b39 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -146,7 +146,8 @@
                     <div v-if="isValidUrl(item.data?.[n])" class="flex items-center gap-3 relative">
                       <img 
                         :src="item.data?.[n]" 
-                        class="w-full max-h-[260px] object-contain rounded-default"
+                        class="w-full max-h-[280px] object-contain cursor-pointer rounded-default"\
+                        @click="() => { item.openGenerationCarousel[n] = true }"
                         style="image-rendering: auto;"
                       />
                       <p

From baa9f652ef8f7979c36822435d2ff4cb7d14acea Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Mon, 1 Jun 2026 16:39:34 +0300
Subject: [PATCH 16/34] fix: add handleBeforeCancel

---
 custom/VisionAction.vue | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index b74d6b0..3fef799 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -9,10 +9,10 @@
     ref="confirmDialog"
     header="Bulk AI Generation"
     class="[scrollbar-gutter:stable] max-w-full h-fit"
+    :beforeCancelFunction="handleBeforeCancel"
     :class="popupMode === 'generation' ? 'lg:w-auto !lg:max-w-[1600px]' 
       : popupMode === 'settings' ? 'lg:w-[1000px] !lg:max-w-[1000px]' 
         : 'lg:w-[500px] !lg:max-w-[500px]'"
-    :beforeCloseFunction="handleBeforeClose"
     :closable="true"
     :buttons="popupMode === 'generation' ? generationModeButtons : popupMode === 'settings' ? [
           {
@@ -461,7 +461,7 @@ const generationModeButtons = computed(() => {
         loader: isLoading.value, 
         class: 'afcl-button w-1/6'
       }, 
-      onclick: async (dialog) => { await saveData(); dialog.hide(); } 
+      onclick: async (dialog) => { await saveData(); closeDialog(); dialog.hide(false); } 
     },
     { 
       label: t('Cancel'), 
@@ -469,7 +469,7 @@ const generationModeButtons = computed(() => {
         class: 'afcl-button w-1/6',
         mode: 'secondary'
       }, 
-      onclick: async (dialog) => { await handleBeforeClose(dialog); } 
+      onclick: async (dialog) => { await dialog.hide(true); } 
     },
   ]
 
@@ -536,6 +536,25 @@ const openDialog = async () => {
   }
 }
 
+const handleBeforeCancel = async () => {
+  if (popupMode.value === 'generation') {
+    const confirmed = await adminforth.confirm({
+      title: t('Close without saving?'),
+      message: t('Are you sure you want to close without saving?'),
+      yes: t('Yes'),
+      no: t('Cancel'),
+    });
+
+    if (confirmed) {
+      closeDialog();
+      return true;
+    }
+    return false;
+  }
+  closeDialog();
+  return true;
+};
+
 async function getListOfIds() {
   if ( props.meta.recordSelector === 'filtered' ) {
     const filters = filtersStore.getFilters(props.resource.resourceId);

From 0dabc7b4388fee05037302a1e0945cd7381c914d Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Tue, 2 Jun 2026 11:11:44 +0300
Subject: [PATCH 17/34] fix: move regeneration logic from cell buttons to
 global regenerate action

---
 custom/VisionAction.vue | 57 ++++++++++++++++++++++++++++++++++++-----
 custom/VisionTable.vue  | 18 +++++--------
 2 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index 3fef799..e448e9a 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -149,7 +149,7 @@
           :outputPlainFields="props.meta.outputPlainFields"
           @error="handleTableError"
           @regenerate-images="regenerateImages"
-          @regenerate-cell="regenerateCell"
+          @regenerate-record="regenerateRecord"
         />
         <div class="mt-2 flex items-center text-lightPrimary dark:text-darkPrimary bg-lightPrimary/10 dark:bg-darkPrimary/10 px-4 py-3 rounded-default border border-lightPrimary/20 dark:border-darkPrimary/20 text-sm">
           <IconInfoCircleSolid class="w-5 h-5 me-2 shrink-0 text-lightPrimary dark:text-darkPrimary dark:brightness-200" />
@@ -487,6 +487,35 @@ const generationModeButtons = computed(() => {
   return arrayToReturn;
 });
 
+async function regenerateRecord({ recordId }) {
+
+  const promises = [];
+
+  if (props.meta.isImageGeneration) {
+    promises.push(regenerateImages({ recordId }));
+  }
+
+  for (const fieldName of props.meta.outputFieldsForAnalizeFromImages || []) {
+    promises.push(
+      regenerateCell({
+        recordId,
+        fieldName,
+      })
+    );
+  }
+
+  for (const fieldName of props.meta.outputPlainFields || []) {
+    promises.push(
+      regenerateCell({
+        recordId,
+        fieldName,
+      })
+    );
+
+  await Promise.allSettled(promises);
+}
+}
+
 const handleBeforeClose = async (dialog?: any) => {
   if (popupMode.value === 'generation') {
     const confirmed = await adminforth.confirm({
@@ -925,7 +954,7 @@ async function checkRateLimits() {
   return true;
 }
 
-async function runActionForRecord(record: RecordState, actionType: GenerationAction) {
+async function runActionForRecord(record: RecordState, actionType: GenerationAction, forceFilterFilledFields?: boolean) {
   if (!checkIfDialogOpen()) {
     return;
   }
@@ -957,7 +986,7 @@ async function runActionForRecord(record: RecordState, actionType: GenerationAct
         actionType,
         recordId: record.id,
         ...(customPrompt !== undefined ? { customPrompt: JSON.stringify(customPrompt) } : {}),
-        filterFilledFields: !overwriteExistingValues.value,
+        filterFilledFields: forceFilterFilledFields !== undefined ? forceFilterFilledFields: !overwriteExistingValues.value,
       },
       silentError: true,
     });
@@ -1413,7 +1442,7 @@ async function uploadImage(imgBlob, id, fieldName) {
   }
 }
 
-function regenerateImages({ recordId }: { recordId: any }) {
+async function regenerateImages({ recordId }: { recordId: any }) {
   if (coreStore.isInternetError) {
     adminforth.alert({
       message: t('Cannot regenerate images while internet connection is lost. Please check your connection and try again.'),
@@ -1427,11 +1456,27 @@ function regenerateImages({ recordId }: { recordId: any }) {
     return;
   }
   record.aiStatus.generatedImages = false;
+  record.status = 'processing';
   touchRecords();
-  runActionForRecord(record, 'generate_images').catch(() => {
+
+  try {
+    await runActionForRecord(
+      record,
+      'generate_images',
+      false
+    );
+
+    record.status = 'completed';
+    completedRecordIds.value.add(String(recordId));
+
     record.aiStatus.generatedImages = true;
     touchRecords();
-  });
+
+  } catch (e) {
+    record.aiStatus.generatedImages = true;
+    record.status = 'failed';
+    touchRecords();
+  }
 }
 
 async function findPreviewURLForImages() {
diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index 01e1b39..0ecff7b 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -128,16 +128,6 @@
                       <IconExclamationCircleSolid class="w-4 h-4 text-red-500" />
                       <template #tooltip>{{ checkForError(item, n) }}</template>
                     </Tooltip>
-                    <Tooltip>
-                      <IconRefreshOutline 
-                        class="w-4 h-4 text-gray-400 hover:text-blue-500 cursor-pointer transition" 
-                        :class="{ 'opacity-30 cursor-not-allowed': shouldDisableRegenerateFieldIcon(item, n) }" 
-                        @click="regerenerateFieldIconClick(item, n)"
-                      />
-                      <template #tooltip> 
-                        {{ shouldDisableRegenerateFieldIcon(item, n) ? $t("Can't analyze image without source image") : $t('Regenerate') }}
-                      </template>
-                    </Tooltip>
                   </div>
                 </div>
 
@@ -252,7 +242,7 @@
         </div>
 
         <div class="border-t border-gray-100 flex justify-end shrink-0">
-          <button @click="() => regenerateImages(item.id)" class="px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-default hover:bg-gray-50 flex items-center gap-1.5 transition">
+          <button @click="() => regenerateRecord(item.id)" class="px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-default hover:bg-gray-50 flex items-center gap-1.5 transition">
             <IconRefreshOutline class="w-3.5 h-3.5" /> {{ $t('Regenerate') }}
           </button>
         </div>
@@ -331,7 +321,11 @@ const props = defineProps<{
   outputFieldsForAnalizeFromImages: string[],
   outputPlainFields: string[],
 }>();
-const emit = defineEmits(['error', 'regenerateImages', 'regenerateCell']);
+const emit = defineEmits(['error', 'regenerateImages', 'regenerateCell', 'regenerateRecord']);
+
+function regenerateRecord(recordId: any) {
+  emit('regenerateRecord', { recordId });
+}
 
 const DEFAULT_PAGE_SIZE = 7;
 const initialPageSize = props.meta?.pageSize ?? DEFAULT_PAGE_SIZE;

From 8da350574e6294c44a6568ff1b2ff338de6e8a6b Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Tue, 2 Jun 2026 12:08:41 +0300
Subject: [PATCH 18/34] fix: fix carousel open/close bugs

---
 custom/VisionTable.vue | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index 0ecff7b..de79f78 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -136,8 +136,11 @@
                     <div v-if="isValidUrl(item.data?.[n])" class="flex items-center gap-3 relative">
                       <img 
                         :src="item.data?.[n]" 
-                        class="w-full max-h-[280px] object-contain cursor-pointer rounded-default"\
-                        @click="() => { item.openGenerationCarousel[n] = true }"
+                        class="w-full max-h-[280px] object-contain cursor-pointer rounded-default"
+                        @click="() => {
+                          openGenerationCarousel[item.id] ??= {}
+                          openGenerationCarousel[item.id][n] = true
+                        }"
                         style="image-rendering: auto;"
                       />
                       <p
@@ -161,7 +164,7 @@
                     </div>
 
                     <GenerationCarousel
-                      v-if="item.openGenerationCarousel?.[n]"
+                      v-if="openGenerationCarousel[item.id]?.[n]"
                       :images="item.carouselSaveImages?.[n]"
                       :recordId="item.id"
                       :meta="props.meta"
@@ -171,7 +174,11 @@
                       :sourceImage="item.images && item.images.length ? item.images : null"
                       :imageGenerationPrompts="imageGenerationPrompts[n]"
                       @error="handleError"
-                      @close="item.openGenerationCarousel[n] = false"
+                      @close="() => {
+                        if (openGenerationCarousel[item.id]) {
+                          openGenerationCarousel[item.id][n] = false
+                        }
+                      }"
                       @selectImage="updateSelectedImage"
                       @updateCarouselIndex="updateActiveIndex"
                     />
@@ -347,6 +354,8 @@ defineExpose({
 
 const paginatedRecords = computed(() => props.records.slice(pagination.offset, pagination.offset + pagination.limit));
 
+const openGenerationCarousel = ref<Record<string, Record<string, boolean>>>({})
+
 const totalItems = computed(() => props.records.length);
 const currentPage = computed(() => Math.floor(pagination.offset / pagination.limit) + 1);
 const totalPages = computed(() => Math.max(1, Math.ceil(totalItems.value / pagination.limit)));

From b75d7d9f09dcf9d245a3354123cadf88ff14e02c Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Tue, 2 Jun 2026 15:03:53 +0300
Subject: [PATCH 19/34] fix: change no image template

---
 custom/VisionTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index de79f78..4889bad 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -71,7 +71,7 @@
 
               <!-- EMPTY ARRAY -->
               <template v-else-if="item.images?.length === 0">
-                <div class="text-gray-400 h-[260px] flex flex-col items-center justify-center h-full">
+                <div class="text-gray-400 flex flex-col items-center justify-center w-[426.5px] h-[258px]">
                   <svg
                     class="w-8 h-8 mb-2 stroke-1 text-gray-300"
                     fill="none"

From 0f16ce0b7daf312ff3f7e2cfad9846fc24f3ee95 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Tue, 2 Jun 2026 15:16:13 +0300
Subject: [PATCH 20/34] fix: update style for no image mode

---
 custom/VisionTable.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index 4889bad..a7fb86b 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -73,7 +73,7 @@
               <template v-else-if="item.images?.length === 0">
                 <div class="text-gray-400 flex flex-col items-center justify-center w-[426.5px] h-[258px]">
                   <svg
-                    class="w-8 h-8 mb-2 stroke-1 text-gray-300"
+                    class="w-20 h-20 mb-2 stroke-1 text-gray-300"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -93,7 +93,7 @@
               <template v-else>
                 <div class="text-gray-400 flex flex-col items-center justify-center h-full">
                   <svg
-                    class="w-8 h-8 mb-2 stroke-1 text-gray-300"
+                    class="w-20 h-20 mb-2 stroke-1 text-gray-300"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -136,7 +136,7 @@
                     <div v-if="isValidUrl(item.data?.[n])" class="flex items-center gap-3 relative">
                       <img 
                         :src="item.data?.[n]" 
-                        class="w-full max-h-[280px] object-contain cursor-pointer rounded-default"
+                        class="w-full max-h-[280px] object-cover border cursor-pointer  hover:border-blue-500 rounded-default"
                         @click="() => {
                           openGenerationCarousel[item.id] ??= {}
                           openGenerationCarousel[item.id][n] = true

From 366d7cf8ce022999a53dfc2ca44106a8f8274d25 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Tue, 2 Jun 2026 16:06:30 +0300
Subject: [PATCH 21/34] fix: delete unused border

---
 custom/VisionTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index a7fb86b..9277ef7 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -248,7 +248,7 @@
           </div>
         </div>
 
-        <div class="border-t border-gray-100 flex justify-end shrink-0">
+        <div class="flex justify-end shrink-0">
           <button @click="() => regenerateRecord(item.id)" class="px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-default hover:bg-gray-50 flex items-center gap-1.5 transition">
             <IconRefreshOutline class="w-3.5 h-3.5" /> {{ $t('Regenerate') }}
           </button>

From 6d785387c1dc1b139e168a7fd9348fec8a5c4bf5 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Tue, 2 Jun 2026 16:07:49 +0300
Subject: [PATCH 22/34] fix: change value description to caps

---
 custom/VisionTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index 9277ef7..1d5d653 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -23,7 +23,7 @@
             <div class="flex items-center gap-3 shrink-0">
               <div class="flex items-center gap-2">
                 <span class="text-xs font-medium text-gray-600 dark:text-gray-400">
-                  {{ cardValueMode?.[String(item.id)] === 'old' ? $t('old value') : $t('new value') }}
+                  {{ cardValueMode?.[String(item.id)] === 'old' ? $t('OLD VALUE') : $t('NEW VALUE') }}
                 </span>
                 <button
                   @click="toggleCardValueMode(item.id)"

From aef511594d9af206cc400015dccacd7564e5de7f Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Tue, 2 Jun 2026 16:08:37 +0300
Subject: [PATCH 23/34] fix: delete unused padding in grid

---
 custom/VisionTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index 1d5d653..9c2e0b4 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="overflow-auto pr-2" style="max-height: calc(100vh - 260px);">
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6 p-1">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
       <div 
         v-for="item in paginatedRecords" 
         :key="item.id"

From 21ac9d7566c4aedf41edec3239a84e7e7bf3350e Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Tue, 2 Jun 2026 16:22:36 +0300
Subject: [PATCH 24/34] fix: change generationStatus style for best reusable

---
 custom/VisionAction.vue | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index e448e9a..427ef81 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -98,11 +98,9 @@
                 </div>
               </div>
 
-              <span 
-                class="px-2.5 py-1 text-xs font-bold tracking-wide rounded-full flex items-center gap-1.5"
-                :class="isGenerationPaused ? 'bg-yellow-50 text-yellow-700 border border-yellow-200 dark:bg-yellow-950/30 dark:text-yellow-400 dark:border-yellow-900/50'
-                  : displayedProcessedCount === totalRecords ? 'bg-green-50 text-green-700 border border-green-200 dark:bg-green-950/30 dark:text-green-400 dark:border-green-900/50'
-                  : 'bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950/30 dark:text-blue-400 dark:border-blue-900/50'"
+              <span
+                class="px-2.5 py-1 text-xs rounded-default border flex items-center gap-1.5"
+                :class="generationStatusClass"
               >
                 <span 
                   class="w-1.5 h-1.5 rounded-full"
@@ -1816,4 +1814,16 @@ async function saveCurrentGenerated() {
   props.updateList();
 }
 
+const generationStatusClass = computed(() => {
+  if (isGenerationPaused.value) {
+    return 'bg-yellow-100 text-yellow-800 border-yellow-200 dark:bg-yellow-950/30 dark:text-yellow-400 dark:border-yellow-900/50'
+  }
+
+  if (displayedProcessedCount.value === totalRecords.value) {
+    return 'bg-green-100 text-green-800 border-green-200 dark:bg-green-950/30 dark:text-green-400 dark:border-green-900/50'
+  }
+
+  return 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-950/30 dark:text-blue-400 dark:border-blue-900/50'
+})
+
 </script>

From e60aaef16418f9713abdd891783e8e8f500f6a8f Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Tue, 2 Jun 2026 16:43:14 +0300
Subject: [PATCH 25/34] fix: centred cards with progress bar wrapper

---
 custom/VisionAction.vue | 2 +-
 custom/VisionTable.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index 427ef81..ea450b0 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -78,7 +78,7 @@
             </div>
           </div>
 
-          <div class="w-full bg-white dark:bg-gray-900 border border-gray-200/80 dark:border-gray-800 p-5 rounded-2xl shadow-sm flex flex-col gap-4">
+          <div class="w-full bg-white dark:bg-gray-900 border border-gray-200/80 dark:border-gray-800 p-5 m-1 rounded-2xl shadow-sm flex flex-col gap-4">
             <div class="flex items-center justify-between">
               <div class="flex items-center gap-3">
                 <div 
diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index 9c2e0b4..d80a9bf 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="overflow-auto pr-2" style="max-height: calc(100vh - 260px);">
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
+    <div class="p-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
       <div 
         v-for="item in paginatedRecords" 
         :key="item.id"

From 77dea522d2b4fe481e39178300c0d75aeff13268 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Tue, 2 Jun 2026 16:57:47 +0300
Subject: [PATCH 26/34] fix: update template while image generate

---
 custom/VisionTable.vue | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index d80a9bf..e4af328 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -152,15 +152,23 @@
                         {{ $t('old image') }}
                       </p>
                     </div>
-                    <div v-else class="w-16 h-16 border rounded-default flex items-center justify-center bg-gray-50">
-                      <Tooltip v-if="item.imageGenerationErrorMessage === 'No source images found'">
-                        <p class="text-xs text-red-400 p-1 text-center">{{ $t("Can't generate") }}</p>
-                        <template #tooltip>{{ item.imageGenerationErrorMessage }}</template>
-                      </Tooltip>
-                      <Tooltip v-else>
-                        <IconRefreshOutline @click="() => { regenerateImages(item.id) }" class="w-6 h-6 text-gray-400 hover:text-blue-500 cursor-pointer" />
-                        <template #tooltip>{{ item.imageGenerationErrorMessage + '. Click to retry' }}</template>
-                      </Tooltip>
+                    <div v-else>
+                      <div class="text-gray-400 flex flex-col items-center justify-center w-[426.5px] h-[258px] bg-gray-50 border border-dashed border-gray-200">
+                        <svg
+                          class="w-20 h-20 mb-2 stroke-1 text-gray-300"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                          />
+                        </svg>
+                        <p class="text-xs font-medium">{{ $t('No images found') }}</p>
+                      </div>
                     </div>
 
                     <GenerationCarousel

From 17b56d59ae8c7543ea2cbbbbba52c727ea068bb8 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Wed, 3 Jun 2026 10:42:41 +0300
Subject: [PATCH 27/34] fix: update skeleton style

---
 custom/VisionTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index e4af328..b7c1685 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -248,7 +248,7 @@
                 </div>
 
                 <div v-else>
-                  <Skeleton class="w-full h-10 rounded-default" />
+                  <Skeleton type="input" class="w-full h-10 rounded-default" />
                 </div>
               </div>
             </div>

From 35f673a4e3b906c5a5e425d9fffbbff58cafd0f7 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Wed, 3 Jun 2026 11:14:56 +0300
Subject: [PATCH 28/34] fix: update skeleton for image

---
 custom/VisionTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index b7c1685..a4e0243 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -200,7 +200,7 @@
                     />
                   </div>
                   <div v-else>
-                    <Skeleton type="image" class="w-16 h-16 rounded-default" />
+                    <Skeleton type="image" class=" w-[426.5px] h-[258px] rounded-default" />
                   </div>
                 </div>
 

From e6fa1c0027d95d67aeb781eda9341761c38c3da1 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Thu, 4 Jun 2026 10:08:43 +0300
Subject: [PATCH 29/34] fix: add standart pagination

---
 custom/VisionTable.vue | 99 ++++++++++++++++++++++++------------------
 1 file changed, 56 insertions(+), 43 deletions(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index a4e0243..81bc1e2 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -274,44 +274,56 @@
       </div>
     </transition>
 
-    <div v-show="totalItems > 0" class="w-full flex flex-col sm:flex-row sm:items-center sm:justify-between px-1 py-2 bg-transparent">
-      <p class="text-sm text-gray-500">
+    <nav v-show="totalItems > 0" class="bg-lightTableBackground dark:bg-darkTableBackground pt-2 flex flex-col gap-2 items-center sm:flex-row justify-center sm:justify-between px-4 pb-4">
+      <span class="text-sm font-normal text-center text-lightTablePaginationText dark:text-darkTablePaginationText sm:mb-4 md:mb-0 block w-full md:inline md:w-auto">
         {{ $t('Showing') }}
-        <span class="font-semibold text-gray-900">{{ fromIndex }}</span>
+        <span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ fromIndex }}</span>
         {{ $t('to') }}
-        <span class="font-semibold text-gray-900">{{ toIndex }}</span>
+        <span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ toIndex }}</span>
         {{ $t('of') }}
-        <span class="font-semibold text-gray-900">{{ totalItems }}</span>
-      </p>
-
-      <div class="inline-flex items-center gap-1 rounded-default border border-gray-200 bg-white px-2 py-1 shadow-sm">
-        <button
-          class="inline-flex items-center justify-center rounded-default px-3 py-1 text-sm font-medium text-gray-500 transition hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
-          :disabled="currentPage <= 1"
-          @click="previousPage"
-        >
-          {{ $t('Prev') }}
-        </button>
-
-        <template v-for="page in pageButtons" :key="page">
+        <span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ totalItems }}</span>
+      </span>
+      <div class="af-pagination-container flex flex-row items-center gap-3">
+        <div class="inline-flex">
           <button
-            class="inline-flex items-center justify-center rounded-default px-3 py-1 text-sm font-medium transition"
-            :class="page === currentPage ? 'bg-blue-600 text-white shadow-sm' : 'text-gray-600 hover:bg-gray-100'"
-            @click="goToPage(page)"
+            class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightActivePaginationButtonText bg-lightActivePaginationButtonBackground border-r-0 rounded-s hover:opacity-90 dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText disabled:opacity-50"
+            :disabled="currentPage <= 1"
+            @click="previousPage"
           >
-            {{ page }}
+            <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"/>
+            </svg>
           </button>
-        </template>
-
-        <button
-          class="inline-flex items-center justify-center rounded-default px-3 py-1 text-sm font-medium text-gray-500 transition hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
-          :disabled="currentPage >= totalPages"
-          @click="nextPage"
-        >
-          {{ $t('Next') }}
-        </button>
+          <button
+            class="flex items-center py-1 px-3 text-sm font-medium text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-r-0 border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
+            :disabled="currentPage <= 1"
+            @click="goToPage(1)"
+          >1</button>
+          <input
+            type="text"
+            v-model="pageInput"
+            :style="{ width: `${Math.max(1, pageInput.length + 4)}ch` }"
+            class="min-w-10 outline-none inline-block w-auto py-1.5 px-3 text-sm text-center text-lightTablePaginationInputText border border-lightTablePaginationInputBorder bg-lightTablePaginationInputBackground dark:border-darkTablePaginationInputBorder dark:text-darkTablePaginationInputText dark:bg-darkTablePaginationInputBackground z-10"
+            @keydown="onPageKeydown"
+            @blur="validatePageInput"
+          />
+          <button
+            class="flex items-center py-1 px-3 text-sm font-medium text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-l-0 border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
+            :disabled="currentPage >= totalPages"
+            @click="goToPage(totalPages)"
+          >{{ totalPages }}</button>
+          <button
+            class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightActivePaginationButtonText focus:outline-none bg-lightActivePaginationButtonBackground border-l-0 rounded-e hover:opacity-90 dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText disabled:opacity-50"
+            :disabled="currentPage >= totalPages"
+            @click="nextPage"
+          >
+            <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+            </svg>
+          </button>
+        </div>
       </div>
-    </div>
+    </nav>
   </div>
 </template>
 
@@ -369,18 +381,6 @@ const currentPage = computed(() => Math.floor(pagination.offset / pagination.lim
 const totalPages = computed(() => Math.max(1, Math.ceil(totalItems.value / pagination.limit)));
 const fromIndex = computed(() => totalItems.value === 0 ? 0 : Math.min(pagination.offset + 1, totalItems.value));
 const toIndex = computed(() => Math.min(pagination.offset + pagination.limit, totalItems.value));
-const pageButtons = computed(() => {
-  const pages = [];
-  const current = currentPage.value;
-  const total = totalPages.value;
-  const start = Math.max(1, current - 2);
-  const end = Math.min(total, current + 2);
-
-  for (let number = start; number <= end; number += 1) {
-    pages.push(number);
-  }
-  return pages;
-});
 const tableDataProvider = async ({ offset, limit }) => {
   pagination.offset = offset;
   pagination.limit = limit;
@@ -549,6 +549,9 @@ function toggleCardValueMode(recordId: string | number) {
   cardValueMode.value[key] = currentMode === 'new' ? 'old' : 'new';
 }
 
+const pageInput = ref(String(currentPage.value));
+watch(currentPage, (val) => { pageInput.value = String(val); });
+
 function goToPage(page: number) {
   const clampedPage = Math.min(Math.max(page, 1), totalPages.value);
   pagination.offset = (clampedPage - 1) * pagination.limit;
@@ -561,6 +564,16 @@ function previousPage() {
 function nextPage() {
   goToPage(currentPage.value + 1);
 }
+
+function onPageKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter') validatePageInput();
+}
+
+function validatePageInput() {
+  const parsed = parseInt(pageInput.value);
+  if (!isNaN(parsed)) goToPage(parsed);
+  pageInput.value = String(currentPage.value);
+}
 </script>
 
 <style scoped>

From 0058942d3d70ad4790681279faca22d738fffd34 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Thu, 4 Jun 2026 11:41:42 +0300
Subject: [PATCH 30/34] fix: delete id section

---
 custom/VisionTable.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index 81bc1e2..fa6ae9d 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -36,9 +36,6 @@
                   />
                 </button>
               </div>
-              <div class="text-right text-gray-400 text-sm">
-                ID: {{ item.id }}
-              </div>
             </div>
           </div>
 

From c92a27e564317bbcc155ac5f2e5014fa23549bc4 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Thu, 4 Jun 2026 12:05:02 +0300
Subject: [PATCH 31/34] fix: changed the rendering of the old/new select 
 depending on the mode

---
 custom/VisionTable.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index fa6ae9d..8d01da6 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -20,7 +20,7 @@
                 </h3>
               </div>
             </div>
-            <div class="flex items-center gap-3 shrink-0">
+            <div class="flex items-center gap-3 shrink-0" v-if="hasNonImageOutputFields">
               <div class="flex items-center gap-2">
                 <span class="text-xs font-medium text-gray-600 dark:text-gray-400">
                   {{ cardValueMode?.[String(item.id)] === 'old' ? $t('OLD VALUE') : $t('NEW VALUE') }}
@@ -432,6 +432,17 @@ function isInColumnImage(key: string): boolean {
   return props.meta.outputImageFields?.includes(key) || false;
 }
 
+const hasNonImageOutputFields = computed(() => {
+  if (!props.customFieldNames) return false;
+  
+  for (const fieldName of props.customFieldNames) {
+    const isImage = isInColumnImage(fieldName);
+    if (!isImage) return true;
+  }
+  
+  return false;
+});
+
 function convertColumnEnumToSelectOptions(columnEnumArray: any[], key: string) {
   const col = columnEnumArray.find(c => c.name === key);
   if (!col) return [];

From dec3f8f7da2bc80c2aa02507319f148fb6d7aae9 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Thu, 4 Jun 2026 12:40:17 +0300
Subject: [PATCH 32/34] fix: disable Regenerate button when overwrite not
 allowed

---
 custom/VisionAction.vue |  1 +
 custom/VisionTable.vue  | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index ea450b0..ae3652d 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -145,6 +145,7 @@
           :outputImageFields="props.meta.outputImageFields"
           :outputFieldsForAnalizeFromImages="props.meta.outputFieldsForAnalizeFromImages"
           :outputPlainFields="props.meta.outputPlainFields"
+          :overwriteExistingValues="overwriteExistingValues"
           @error="handleTableError"
           @regenerate-images="regenerateImages"
           @regenerate-record="regenerateRecord"
diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index 8d01da6..b64f13f 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -254,7 +254,11 @@
         </div>
 
         <div class="flex justify-end shrink-0">
-          <button @click="() => regenerateRecord(item.id)" class="px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-default hover:bg-gray-50 flex items-center gap-1.5 transition">
+          <button
+            @click="() => canRegenerate(item) && regenerateRecord(item.id)"
+            :disabled="!canRegenerate(item)"
+            class="px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-default hover:bg-gray-50 flex items-center gap-1.5 transition disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white"
+          >
             <IconRefreshOutline class="w-3.5 h-3.5" /> {{ $t('Regenerate') }}
           </button>
         </div>
@@ -344,6 +348,7 @@ const props = defineProps<{
   outputImageFields: string[],
   outputFieldsForAnalizeFromImages: string[],
   outputPlainFields: string[],
+  overwriteExistingValues: boolean,
 }>();
 const emit = defineEmits(['error', 'regenerateImages', 'regenerateCell', 'regenerateRecord']);
 
@@ -351,6 +356,15 @@ function regenerateRecord(recordId: any) {
   emit('regenerateRecord', { recordId });
 }
 
+function canRegenerate(item: any): boolean {
+  if (props.overwriteExistingValues) return true;
+  for (const n of props.customFieldNames) {
+    const val = item.data?.[n];
+    if (val === null || val === undefined || val === '') return true;
+  }
+  return false;
+}
+
 const DEFAULT_PAGE_SIZE = 7;
 const initialPageSize = props.meta?.pageSize ?? DEFAULT_PAGE_SIZE;
 console.log(props.meta?.pageSize);

From b742016ac7607995f640564616c5da5c3134e724 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Thu, 4 Jun 2026 12:46:27 +0300
Subject: [PATCH 33/34] fix: update style for generate status icon

---
 custom/VisionAction.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index ae3652d..d30678b 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -83,9 +83,7 @@
               <div class="flex items-center gap-3">
                 <div 
                   class="p-2 rounded-xl shrink-0"
-                  :class="isGenerationPaused ? 'bg-yellow-50 text-yellow-600 dark:bg-yellow-950/40 dark:text-yellow-400' 
-                    : displayedProcessedCount === totalRecords ? 'bg-green-50 text-green-600 dark:bg-green-950/40 dark:text-green-400'
-                    : 'bg-blue-50 text-blue-600 dark:bg-blue-950/40 dark:text-blue-400'"
+                  :class="generationStatusClass"
                 >
                   <IconShieldCheckOutline v-if="displayedProcessedCount === totalRecords" class="w-5 h-5" />
                   <IconRefreshOutline v-else :class="isProcessingAny ? 'animate-spin' : ''" class="w-5 h-5" />

From f5b378cf701e9a61a3a0357f0f6a36aab4eadc06 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Fri, 5 Jun 2026 10:43:07 +0300
Subject: [PATCH 34/34] fix: increase af version

---
 package.json   |  4 ++--
 pnpm-lock.yaml | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index c36118d..1a57988 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   "description": "Bulk AI workflow plugin for AdminForth for batch field generation and image processing",
   "devDependencies": {
     "@types/node": "latest",
-    "adminforth": "2.67.2",
+    "adminforth": "2.70.0",
     "semantic-release": "^24.2.1",
     "semantic-release-slack-bot": "^4.0.2",
     "typescript": "^5.7.3"
@@ -35,7 +35,7 @@
     "handlebars": "^4.7.8"
   },
   "peerDependencies": {
-    "adminforth": "^2.42.0"
+    "adminforth": "^2.70.0"
   },
   "release": {
     "plugins": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a5f5892..63e90f7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,8 +19,8 @@ importers:
         specifier: latest
         version: 25.3.3
       adminforth:
-        specifier: 2.67.2
-        version: 2.67.2(@types/node@25.3.3)(typescript@5.9.3)
+        specifier: 2.70.0
+        version: 2.70.0(@types/node@25.3.3)(typescript@5.9.3)
       semantic-release:
         specifier: ^24.2.1
         version: 24.2.9(typescript@5.9.3)
@@ -416,8 +416,8 @@ packages:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
 
-  adminforth@2.67.2:
-    resolution: {integrity: sha512-7RZOf/qQuJGWIco9sjIuLaHz5gjjFkZMNnkjGJQDhvqQ1NWG21tG6pQi0/ilQxhaGTsLtzxw5jce8O/RUpH1Hw==}
+  adminforth@2.70.0:
+    resolution: {integrity: sha512-E/zvEtAU7Woh3nLR7xrfgaVtH0Y+NAQnbSlZhTMpSpjrwwwGPAmE6lKsEaVAD7T+y1TvNhk+yCh/Mb6me3owzA==}
     hasBin: true
 
   agent-base@7.1.4:
@@ -2978,7 +2978,7 @@ snapshots:
       mime-types: 2.1.35
       negotiator: 0.6.3
 
-  adminforth@2.67.2(@types/node@25.3.3)(typescript@5.9.3):
+  adminforth@2.70.0(@types/node@25.3.3)(typescript@5.9.3):
     dependencies:
       '@babel/parser': 7.29.0
       '@clickhouse/client': 1.18.1