From f5a672d7b93af645e1ab760650ae2b727834fc25 Mon Sep 17 00:00:00 2001
From: Dom <dom@rpa-vision-v3.local>
Date: Sat, 18 Apr 2026 10:55:51 +0200
Subject: [PATCH] =?UTF-8?q?fix(vwb):=20capture=20plein=20=C3=A9cran=20+=20?=
 =?UTF-8?q?auto-d=C3=A9tection=20MIME=20PNG/JPEG=20des=20ancres?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CSS fullscreen-content : height:0 + min-height:0 pour forcer flex fill
- Image fullscreen : max-height calc(100vh - 60px) + object-fit contain
- Fonction b64ImgSrc() détecte automatiquement PNG vs JPEG depuis le base64
- Corrige l'affichage des thumbnails compressés JPEG dans la bibliothèque
- Appliqué dans CapturePanel + CaptureLibrary (toutes les occurrences)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/CaptureLibrary.tsx         | 10 +++++++--
 .../src/components/CapturePanel.tsx           | 22 ++++++++++++-------
 .../frontend_v4/src/styles.css                |  5 +++++
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/visual_workflow_builder/frontend_v4/src/components/CaptureLibrary.tsx b/visual_workflow_builder/frontend_v4/src/components/CaptureLibrary.tsx
index fb8706d43..389579e7b 100644
--- a/visual_workflow_builder/frontend_v4/src/components/CaptureLibrary.tsx
+++ b/visual_workflow_builder/frontend_v4/src/components/CaptureLibrary.tsx
@@ -6,6 +6,12 @@ import {
   compressThumbnail,
 } from '../services/captureLibraryStorage';
 
+function b64ImgSrc(base64: string): string {
+  if (base64.startsWith('data:')) return base64;
+  const mime = base64.startsWith('/9j/') ? 'image/jpeg' : 'image/png';
+  return `data:${mime};base64,${base64}`;
+}
+
 interface LibraryItem {
   id: string;
   capture: Capture;
@@ -149,7 +155,7 @@ export default function CaptureLibrary({ currentCapture, onSelectCapture, onCapt
       {!isExpanded && currentCapture && (
         <div className="library-preview">
           <img
-            src={`data:image/png;base64,${currentCapture.screenshot_base64}`}
+            src={{b64ImgSrc(currentCapture.screenshot_base64)}}
             alt="Dernière capture"
             onClick={() => setIsExpanded(true)}
           />
@@ -209,7 +215,7 @@ export default function CaptureLibrary({ currentCapture, onSelectCapture, onCapt
                         className={`library-item ${selectedItems.has(item.id) ? 'selected' : ''}`}
                       >
                         <img
-                          src={`data:image/png;base64,${item.capture.screenshot_base64}`}
+                          src={{b64ImgSrc(item.capture.screenshot_base64)}}
                           alt="Capture"
                           onClick={() => onSelectCapture(item.capture)}
                         />
diff --git a/visual_workflow_builder/frontend_v4/src/components/CapturePanel.tsx b/visual_workflow_builder/frontend_v4/src/components/CapturePanel.tsx
index 4077022db..3ffc84bc1 100644
--- a/visual_workflow_builder/frontend_v4/src/components/CapturePanel.tsx
+++ b/visual_workflow_builder/frontend_v4/src/components/CapturePanel.tsx
@@ -7,6 +7,12 @@ import {
   compressThumbnail,
 } from '../services/captureLibraryStorage';
 
+function b64ImgSrc(base64: string): string {
+  if (base64.startsWith('data:')) return base64;
+  const mime = base64.startsWith('/9j/') ? 'image/jpeg' : 'image/png';
+  return `data:${mime};base64,${base64}`;
+}
+
 interface DetectionZone {
   x: number;
   y: number;
@@ -106,7 +112,7 @@ export default function CapturePanel({
       try {
         const { detectUIElements } = await import('../services/uiDetection');
         const result = await detectUIElements(
-          `data:image/png;base64,${currentCapture.screenshot_base64}`,
+          {b64ImgSrc(currentCapture.screenshot_base64)},
           { threshold: 0.35 }
         );
         setPreviewElements(result.elements);
@@ -211,7 +217,7 @@ export default function CapturePanel({
           <div className="capture-preview-container">
             <img
               ref={previewImgRef}
-              src={`data:image/png;base64,${currentCapture.screenshot_base64}`}
+              src={{b64ImgSrc(currentCapture.screenshot_base64)}}
               alt="Capture"
               onClick={() => setIsFullscreen(true)}
               onLoad={handlePreviewImageLoad}
@@ -274,7 +280,7 @@ export default function CapturePanel({
           {library.slice(0, 4).map(item => (
             <div key={item.id} className="library-item">
               <img
-                src={`data:image/png;base64,${item.capture.screenshot_base64}`}
+                src={{b64ImgSrc(item.capture.screenshot_base64)}}
                 alt="Capture"
                 onClick={() => handleLibrarySelect(item)}
               />
@@ -315,7 +321,7 @@ export default function CapturePanel({
                 }}
               >
                 <img
-                  src={`data:image/png;base64,${item.capture.screenshot_base64}`}
+                  src={{b64ImgSrc(item.capture.screenshot_base64)}}
                   alt="Capture"
                 />
                 <div className="library-gallery-label">
@@ -382,7 +388,7 @@ function FullscreenSelector({
       try {
         const { detectUIElements } = await import('../services/uiDetection');
         const result = await detectUIElements(
-          `data:image/png;base64,${capture.screenshot_base64}`,
+          b64ImgSrc(capture.screenshot_base64),
           { threshold: 0.35 }
         );
         setDetectedElements(result.elements);
@@ -538,14 +544,14 @@ function FullscreenSelector({
         onMouseUp={handleMouseUp}
       >
         {/* Conteneur relatif pour positionner les bboxes et la sélection par rapport à l'image */}
-        <div style={{ position: 'relative', display: 'inline-block' }}>
+        <div style={{ position: 'relative', display: 'inline-block', maxWidth: '100%', maxHeight: '100%' }}>
           <img
             ref={imgRef}
-            src={`data:image/png;base64,${capture.screenshot_base64}`}
+            src={{b64ImgSrc(capture.screenshot_base64)}}
             alt="Capture plein écran"
             draggable={false}
             onLoad={handleImageLoad}
-            style={{ display: 'block' }}
+            style={{ display: 'block', maxWidth: '100%', maxHeight: 'calc(100vh - 60px)', objectFit: 'contain' }}
           />
 
           {/* Overlay des éléments détectés — visible dans tous les modes */}
diff --git a/visual_workflow_builder/frontend_v4/src/styles.css b/visual_workflow_builder/frontend_v4/src/styles.css
index a53212f52..b7abd9387 100644
--- a/visual_workflow_builder/frontend_v4/src/styles.css
+++ b/visual_workflow_builder/frontend_v4/src/styles.css
@@ -1079,11 +1079,16 @@ body {
   justify-content: center;
   overflow: auto;
   position: relative;
+  height: 0;
+  min-height: 0;
 }
 
 .fullscreen-content img {
   max-width: 100%;
   max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
   cursor: crosshair;
 }