Agent/examples/process_pipeline/ui/lightbox.js

let currentLightboxImages = [];
let currentLightboxIndex = 0;

window.openLightbox = function(images, index) {
    currentLightboxImages = images;
    currentLightboxIndex = index;
    updateLightbox();
    document.getElementById('image-lightbox').classList.remove('hidden');
};

function updateLightbox() {
    if (!currentLightboxImages || currentLightboxImages.length === 0) return;
    const imgObj = currentLightboxImages[currentLightboxIndex];
    const imgEl = document.getElementById('lightbox-img');
    const capEl = document.getElementById('lightbox-caption');
    
    // Attempt local first, fallback to remote
    imgEl.src = imgObj.local;
    imgEl.onerror = function() {
        if (this.src !== imgObj.remote) {
            this.src = imgObj.remote;
        }
    };
    
    capEl.textContent = `${currentLightboxIndex + 1} / ${currentLightboxImages.length}`;
}

document.addEventListener('DOMContentLoaded', () => {
    const overlay = document.getElementById('image-lightbox');
    const btnClose = document.getElementById('lightbox-close');
    const btnPrev = document.getElementById('lightbox-prev');
    const btnNext = document.getElementById('lightbox-next');
    
    if (btnClose) {
        btnClose.addEventListener('click', (e) => {
            e.stopPropagation();
            overlay.classList.add('hidden');
        });
    }
    
    if (overlay) {
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) {
                overlay.classList.add('hidden');
            }
        });
    }
    
    if (btnPrev) {
        btnPrev.addEventListener('click', (e) => {
            e.stopPropagation();
            if (currentLightboxImages.length > 0) {
                currentLightboxIndex = (currentLightboxIndex - 1 + currentLightboxImages.length) % currentLightboxImages.length;
                updateLightbox();
            }
        });
    }
    
    if (btnNext) {
        btnNext.addEventListener('click', (e) => {
            e.stopPropagation();
            if (currentLightboxImages.length > 0) {
                currentLightboxIndex = (currentLightboxIndex + 1) % currentLightboxImages.length;
                updateLightbox();
            }
        });
    }
    
    // Keyboard navigation
    document.addEventListener('keydown', (e) => {
        if (!overlay || overlay.classList.contains('hidden')) return;
        if (e.key === 'Escape') {
            overlay.classList.add('hidden');
        } else if (e.key === 'ArrowLeft') {
            if (currentLightboxImages.length > 0) {
                currentLightboxIndex = (currentLightboxIndex - 1 + currentLightboxImages.length) % currentLightboxImages.length;
                updateLightbox();
            }
        } else if (e.key === 'ArrowRight') {
            if (currentLightboxImages.length > 0) {
                currentLightboxIndex = (currentLightboxIndex + 1) % currentLightboxImages.length;
                updateLightbox();
            }
        }
    });
});