Improve nginx configuration and compression job UX

- Add security headers (X-Frame-Options, X-Content-Type-Options, X-XSS-Protection)
- Implement proper cache control for static assets and prevent index.html caching
- Fix SSE handling to properly fetch new compression jobs
- Immediately refresh job list after queuing compression for better UX feedback

.claude/settings.local.json

@@ -5,7 +5,8 @@
       "mcp__playwright__browser_console_messages",
       "mcp__playwright__browser_click",
       "mcp__playwright__browser_evaluate",
-      "mcp__playwright__browser_navigate"
+      "mcp__playwright__browser_navigate",
+      "mcp__playwright__browser_wait_for"
     ],
     "deny": [],
     "ask": []

frontend/Dockerfile

@@ -21,7 +21,8 @@ FROM nginx:alpine
 # Copy built assets from builder stage
 COPY --from=builder /app/dist /usr/share/nginx/html
 
-# Copy nginx configuration
+# Copy nginx configurations
+COPY nginx-main.conf /etc/nginx/nginx.conf
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 
 # Expose port

frontend/nginx-main.conf

@@ -0,0 +1,29 @@
+user  nginx;
+worker_processes  2;
+
+error_log  /var/log/nginx/error.log notice;
+pid        /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+
+    sendfile        on;
+    #tcp_nopush     on;
+
+    keepalive_timeout  65;
+
+    #gzip  on;
+
+    include /etc/nginx/conf.d/*.conf;
+}

frontend/nginx.conf

@@ -5,9 +5,27 @@ server {
     root /usr/share/nginx/html;
     index index.html;
 
-    # Serve static files
+    # Serve static files with proper cache control
     location / {
         try_files $uri $uri/ /index.html;
+
+        # Security headers for all responses
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header X-XSS-Protection "1; mode=block" always;
+
+        # No cache for index.html - always check for updates
+        location = /index.html {
+            add_header Cache-Control "private, no-cache, no-store, must-revalidate";
+            add_header Pragma "no-cache";
+            add_header Expires "0";
+        }
+
+        # Cache assets with hash in filename (private for single-user app)
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+            expires 1y;
+            add_header Cache-Control "private, immutable";
+        }
     }
 
     # Proxy API requests to backend

frontend/src/App.jsx

@@ -7,7 +7,7 @@ import { formatFileSize } from './utils/formatters'
 
 function App() {
   const { isHealthy, error: healthError } = useSystemHealth()
-  const { jobs } = useCompressionJobs()
+  const { jobs, fetchJobs } = useCompressionJobs()
   const [locations, setLocations] = useState([])
   const [selectedLocation, setSelectedLocation] = useState(null)
   const [dates, setDates] = useState([])
@@ -205,6 +205,8 @@ function App() {
       })
 
       if (response.ok) {
+        // Immediately refresh jobs list to show the new job
+        await fetchJobs()
         const hasActiveJobs = jobs.some(j => ['pending', 'processing', 'validating'].includes(j.status))
         if (hasActiveJobs) {
           showToast('Compression job queued successfully!', 'success')

frontend/src/hooks/useCompressionJobs.js

@@ -31,12 +31,24 @@ export function useCompressionJobs() {
       const updates = JSON.parse(event.data)
       setJobs(prevJobs => {
         const updatedJobs = [...prevJobs]
+        let hasNewJobs = false
+
         updates.forEach(update => {
           const index = updatedJobs.findIndex(j => j.job_id === update.job_id)
           if (index !== -1) {
+            // Update existing job
             updatedJobs[index] = { ...updatedJobs[index], ...update }
+          } else {
+            // New job detected - we need complete data
+            hasNewJobs = true
           }
         })
+
+        // Trigger full fetch if new jobs detected
+        if (hasNewJobs) {
+          fetchJobs()
+        }
+
         return updatedJobs
       })
     })