Add job logging and increase timeout to 20 minutes

- Add JobLogger class to handler.py for structured timestamped logging
- Increase MAX_TIMEOUT from 600s to 1200s (20 minutes)
- Add logs column to generated_content table via migration
- Store and display job execution logs in gallery UI
- Add Logs button to gallery items with modal display

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

frontend/public/css/style.css

@@ -766,3 +766,65 @@ body {
     text-shadow: 0 1px 3px rgba(0,0,0,0.5);
     pointer-events: none;
 }
+
+/* Logs Modal */
+.logs-container {
+    background: var(--gray-100);
+    border-radius: var(--radius);
+    padding: 15px;
+}
+
+.logs-status {
+    margin-bottom: 12px;
+    font-size: 14px;
+}
+
+.logs-status .badge {
+    margin-left: 8px;
+}
+
+.badge-completed { background: var(--success); color: white; }
+.badge-processing { background: var(--warning); color: var(--gray-900); }
+.badge-pending { background: var(--gray-500); color: white; }
+.badge-failed { background: var(--danger); color: white; }
+
+.logs-error {
+    background: #f8d7da;
+    color: #721c24;
+    padding: 12px;
+    border-radius: var(--radius);
+    margin-bottom: 12px;
+    font-size: 13px;
+}
+
+.logs-content {
+    font-family: 'SF Mono', Monaco, 'Andale Mono', monospace;
+    font-size: 12px;
+    line-height: 1.6;
+    background: var(--gray-900);
+    color: #e0e0e0;
+    padding: 15px;
+    border-radius: var(--radius);
+    max-height: 400px;
+    overflow-y: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.logs-content::-webkit-scrollbar {
+    width: 8px;
+}
+
+.logs-content::-webkit-scrollbar-track {
+    background: var(--gray-800);
+    border-radius: 4px;
+}
+
+.logs-content::-webkit-scrollbar-thumb {
+    background: var(--gray-600);
+    border-radius: 4px;
+}
+
+.logs-content::-webkit-scrollbar-thumb:hover {
+    background: var(--gray-500);
+}

frontend/public/js/app.js

@@ -437,6 +437,7 @@ function renderGallery(container, items) {
                 <div class="gallery-item-meta">
                     <span>${formatDate(item.createdAt)}</span>
                     <div class="gallery-item-actions">
+                        <button class="btn btn-sm btn-secondary view-logs-btn" data-content-id="${item.id}">Logs</button>
                         ${item.status === 'completed' ? `<a href="/api/content/${item.id}/download" class="btn btn-sm btn-secondary">Download</a>` : ''}
                         <button class="btn btn-sm btn-danger delete-content-btn" data-content-id="${item.id}">Delete</button>
                     </div>
@@ -470,6 +471,48 @@ function renderGallery(container, items) {
             }
         });
     });
+
+    container.querySelectorAll('.view-logs-btn').forEach(btn => {
+        btn.addEventListener('click', async function() {
+            const contentId = parseInt(this.dataset.contentId, 10);
+            await viewContentLogs(contentId);
+        });
+    });
+}
+
+async function viewContentLogs(contentId) {
+    try {
+        const data = await api(`/content/${contentId}/logs`);
+        const logs = data.logs || [];
+        const errorMessage = data.errorMessage;
+
+        let logsHtml = '';
+        if (logs.length === 0) {
+            logsHtml = '<p style="color:var(--gray-500);text-align:center;">No logs available</p>';
+        } else {
+            logsHtml = `<div class="logs-content">${logs.map(log => escapeHtml(log)).join('\n')}</div>`;
+        }
+
+        if (errorMessage) {
+            logsHtml = `<div class="logs-error"><strong>Error:</strong> ${escapeHtml(errorMessage)}</div>` + logsHtml;
+        }
+
+        showModal(`
+            <div class="modal-header">
+                <h3>Job Logs</h3>
+                <button class="modal-close">&times;</button>
+            </div>
+            <div class="logs-container">
+                <div class="logs-status">Status: <span class="badge badge-${data.status}">${data.status}</span></div>
+                ${logsHtml}
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary modal-cancel-btn">Close</button>
+            </div>
+        `);
+    } catch (error) {
+        alert('Failed to load logs: ' + error.message);
+    }
 }
 
 // Admin