fix: implement real export functionality and improve UI feedback

- Replace placeholder export handlers with actual async export execution
- Add proper command-line argument building for export commands
- Implement auto-refresh system for export list updates
- Fix export buttons stuck in processing state with reset functionality
- Add visual feedback with auto-refresh indicator
- Improve error handling with detailed logging and output capture
- Remove WebSocket dependency for simpler, more reliable progress tracking

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: JohanDevl

pkg/web/handlers/exports.go

@@ -6,6 +6,7 @@ import (
 	"html/template"
 	"net/http"
 	"os"
+	"os/exec"
 	"path/filepath"
 	"strconv"
 	"strings"
@@ -160,12 +161,14 @@ func (h *ExportsHandler) handleStartExport(w http.ResponseWriter, r *http.Reques
 		"client_ip":    r.RemoteAddr,
 	})
 
-	// In a real implementation, this would trigger the actual export
-	// For now, we'll just log it and return success
+	// Start export in background
+	exportID := fmt.Sprintf("export_%d", time.Now().Unix())
+	go h.runExportAsync(exportID, exportType, historyMode)
+	
 	h.writeJSONResponse(w, ExportAPIResponse{
 		Success: true,
 		Data: map[string]interface{}{
-			"export_id": fmt.Sprintf("export_%d", time.Now().Unix()),
+			"export_id": exportID,
 			"type":      exportType,
 			"status":    "started",
 		},
@@ -572,6 +575,64 @@ func (h *ExportsHandler) writeJSONResponse(w http.ResponseWriter, response Expor
 	}
 }
 
+// runExportAsync executes an export command asynchronously
+func (h *ExportsHandler) runExportAsync(exportID, exportType, historyMode string) {
+	h.logger.Info("web.export_async_started", map[string]interface{}{
+		"export_id":    exportID,
+		"export_type":  exportType,
+		"history_mode": historyMode,
+	})
+
+	// Find the current executable path
+	execPath, err := os.Executable()
+	if err != nil {
+		h.logger.Error("web.export_async_failed", map[string]interface{}{
+			"export_id": exportID,
+			"error":     "Could not find executable path: " + err.Error(),
+		})
+		return
+	}
+
+	// Build command arguments
+	args := []string{
+		"--run",
+		"--export", exportType,
+		"--mode", "complete",
+	}
+
+	// Add history mode for watched exports
+	if exportType == "watched" && historyMode != "" {
+		args = append(args, "--history-mode", historyMode)
+	}
+
+	h.logger.Info("web.export_async_command", map[string]interface{}{
+		"export_id": exportID,
+		"command":   execPath,
+		"args":      strings.Join(args, " "),
+	})
+
+	// Execute the command
+	cmd := exec.Command(execPath, args...)
+	cmd.Env = os.Environ() // Inherit environment variables
+	
+	// Capture both stdout and stderr for better debugging
+	output, err := cmd.CombinedOutput()
+	
+	if err != nil {
+		h.logger.Error("web.export_async_failed", map[string]interface{}{
+			"export_id": exportID,
+			"error":     err.Error(),
+			"output":    string(output),
+			"command":   execPath + " " + strings.Join(args, " "),
+		})
+	} else {
+		h.logger.Info("web.export_async_completed", map[string]interface{}{
+			"export_id": exportID,
+			"output":    string(output),
+		})
+	}
+}
+
 // DownloadHandler handles file downloads
 type DownloadHandler struct {
 	exportsDir string

web/templates/exports.html

@@ -141,6 +141,9 @@ <h2>📋 Export History</h2>
         {{else}}
         Total: {{if .Exports}}{{len .Exports}}{{else}}0{{end}} exports
         {{end}}
+        <span id="auto-refresh-indicator" style="display: none; color: #28a745; margin-left: 10px;">
+          🔄 Auto-refreshing...
+        </span>
       </div>
     </div>
 
@@ -315,25 +318,15 @@ <h3>No exports found</h3>
 
   function startExport(type, options = {}) {
     // Show progress section
-    document.getElementById("export-progress").style.display = "block";
-
-    // Start WebSocket connection for real-time updates
-    if (window.WebSocket) {
-      exportSocket = new WebSocket(`ws://${window.location.host}/ws/export`);
-
-      exportSocket.onmessage = function (event) {
-        const data = JSON.parse(event.data);
-        updateProgress(data);
-      };
-
-      exportSocket.onerror = function (error) {
-        console.error("WebSocket error:", error);
-      };
-
-      exportSocket.onclose = function () {
-        console.log("WebSocket connection closed");
-      };
-    }
+    const progressSection = document.getElementById("export-progress");
+    const progressText = document.getElementById("progress-text");
+    const progressFill = document.getElementById("progress-fill");
+    const progressPercent = document.getElementById("progress-percent");
+    
+    progressSection.style.display = "block";
+    progressText.textContent = "Starting export...";
+    progressFill.style.width = "0%";
+    progressPercent.textContent = "0%";
 
     // Trigger export
     const params = new URLSearchParams({ type, ...options });
@@ -343,11 +336,25 @@ <h3>No exports found</h3>
         if (!data.success) {
           showAlert("error", data.error || "Export failed");
           hideProgress();
+          return;
         }
+        
+        // Show export started message
+        progressText.textContent = "Export started in background...";
+        progressFill.style.width = "100%";
+        progressPercent.textContent = "100%";
+        
+        // Hide progress after 3 seconds and reset button
+        setTimeout(() => {
+          hideProgress();
+          showAlert("success", `Export ${type} started successfully! Auto-refreshing...`);
+          resetExportButtons();
+        }, 3000);
       })
       .catch((error) => {
         showAlert("error", "Failed to start export: " + error.message);
         hideProgress();
+        resetExportButtons();
       });
   }
 
@@ -659,6 +666,79 @@ <h4>${typeLabel}</h4>
     });
   }
 
+  // Reset export buttons to initial state
+  function resetExportButtons() {
+    document.querySelectorAll(".export-btn").forEach((btn) => {
+      btn.disabled = false;
+      // Restore original text based on button type
+      const type = btn.dataset.type;
+      switch(type) {
+        case 'watched':
+          btn.textContent = 'Export Watched';
+          break;
+        case 'collection':
+          btn.textContent = 'Export Collection';
+          break;
+        case 'shows':
+          btn.textContent = 'Export Shows';
+          break;
+        case 'ratings':
+          btn.textContent = 'Export Ratings';
+          break;
+        case 'watchlist':
+          btn.textContent = 'Export Watchlist';
+          break;
+        case 'all':
+          btn.textContent = 'Export All';
+          break;
+        default:
+          btn.textContent = 'Export';
+      }
+    });
+  }
+
+  // Auto-refresh functionality for exports
+  let autoRefreshInterval = null;
+  
+  function startAutoRefresh() {
+    // Stop any existing auto-refresh
+    if (autoRefreshInterval) {
+      clearInterval(autoRefreshInterval);
+    }
+    
+    // Show auto-refresh indicator
+    const indicator = document.getElementById('auto-refresh-indicator');
+    if (indicator) {
+      indicator.style.display = 'inline';
+    }
+    
+    // Start auto-refresh every 5 seconds for 30 seconds (6 attempts)
+    let attempts = 0;
+    autoRefreshInterval = setInterval(() => {
+      attempts++;
+      if (attempts > 6) {
+        stopAutoRefresh();
+        return;
+      }
+      
+      // Refresh the exports list
+      loadPage(currentPage, currentPageSize);
+    }, 5000);
+  }
+  
+  function stopAutoRefresh() {
+    if (autoRefreshInterval) {
+      clearInterval(autoRefreshInterval);
+      autoRefreshInterval = null;
+    }
+    
+    // Hide auto-refresh indicator
+    const indicator = document.getElementById('auto-refresh-indicator');
+    if (indicator) {
+      indicator.style.display = 'none';
+    }
+  }
+
   // Export button handlers
   document.addEventListener("DOMContentLoaded", function () {
     document.querySelectorAll(".export-btn").forEach((btn) => {
@@ -674,6 +754,9 @@ <h4>${typeLabel}</h4>
         }
 
         startExport(type, options);
+        
+        // Start auto-refresh to catch the new export when it appears
+        startAutoRefresh();
       });
     });