From 007f2066487da5628f0219c103a785be1239bdb9 Mon Sep 17 00:00:00 2001
From: priestlypython <andre@optinampout.com>
Date: Wed, 14 Jan 2026 11:02:21 -0800
Subject: [PATCH] debug: Add extensive console logging to modal functionality

- Log function entry with captureId
- Log DOM element lookups
- Log fetch request URL and response status
- Log received data and rendered HTML
- Log error details to console.error
- This will help identify exact failure point in modal display
---
 static/js/detail-modal.js | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/static/js/detail-modal.js b/static/js/detail-modal.js
index 7a5d499..d529836 100644
--- a/static/js/detail-modal.js
+++ b/static/js/detail-modal.js
@@ -1,31 +1,49 @@
 // GigLez - Capture Detail Modal
 
 async function viewCaptureDetails(captureId) {
+    console.log('viewCaptureDetails called with ID:', captureId);
+
     const modal = document.getElementById('detail-modal');
     const modalBody = document.getElementById('modal-body-content');
 
+    console.log('Modal element:', modal);
+    console.log('Modal body element:', modalBody);
+
     // Show loading state
     modal.classList.add('active');
     modalBody.innerHTML = '<div style="text-align: center; padding: 2rem;">Loading...</div>';
 
+    console.log('Loading state set, about to fetch from:', `/api/v1/captures/${captureId}`);
+
     try {
         // Fetch capture details
         const response = await fetch(`/api/v1/captures/${captureId}`);
 
+        console.log('Response status:', response.status);
+        console.log('Response ok:', response.ok);
+
         if (!response.ok) {
             throw new Error('Failed to fetch capture details');
         }
 
         const data = await response.json();
+        console.log('Received data:', data);
 
         if (!data.success) {
             throw new Error(data.message);
         }
 
+        console.log('About to render capture:', data.capture);
+
         // Render detail view
-        modalBody.innerHTML = renderCaptureDetail(data.capture);
+        const renderedHtml = renderCaptureDetail(data.capture);
+        console.log('Rendered HTML length:', renderedHtml.length);
+
+        modalBody.innerHTML = renderedHtml;
+        console.log('Modal body innerHTML set');
 
     } catch (error) {
+        console.error('Error in viewCaptureDetails:', error);
         modalBody.innerHTML = `
             <div style="text-align: center; padding: 2rem; color: var(--danger-color);">
                 <p><strong>Error loading details:</strong></p>