Add API log panel for debugging generation requests

- Added collapsible API log panel below preview
- Logs all API calls with method, URL, status code
- Shows error details when requests fail
- Wraps fetch to automatically capture all API activity
- Helps debug cancelled/failed generations

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

src/content_engine/api/ui.html

@@ -278,6 +278,44 @@ select { cursor: pointer; }
 
 .preview-placeholder svg { width: 64px; height: 64px; opacity: 0.3; margin-bottom: 12px; }
 
+.api-log-panel {
+  border-top: 1px solid var(--border);
+  background: var(--bg-primary);
+}
+.api-log-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-secondary);
+  user-select: none;
+}
+.api-log-header:hover { background: var(--bg-hover); }
+.api-log-content {
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 8px 12px;
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 11px;
+}
+.api-log-entry {
+  padding: 4px 0;
+  border-bottom: 1px solid var(--border);
+  line-height: 1.4;
+}
+.api-log-entry:last-child { border-bottom: none; }
+.api-log-time { color: var(--text-secondary); margin-right: 8px; }
+.api-log-method { font-weight: 600; margin-right: 4px; }
+.api-log-method.POST { color: var(--green); }
+.api-log-method.GET { color: var(--blue); }
+.api-log-url { color: var(--text-primary); }
+.api-log-status { margin-left: 8px; font-weight: 600; }
+.api-log-status.ok { color: var(--green); }
+.api-log-status.error { color: var(--red); }
+.api-log-detail { color: var(--text-secondary); margin-top: 2px; padding-left: 60px; word-break: break-all; }
+
 .generating-overlay {
   position: absolute;
   inset: 0;
@@ -1066,6 +1104,17 @@ select { cursor: pointer; }
               <p style="font-size:12px; margin-top:4px">Write a prompt and click Generate</p>
             </div>
           </div>
+          <!-- API Log Panel -->
+          <div class="api-log-panel">
+            <div class="api-log-header" onclick="toggleApiLog()">
+              <span>API Log</span>
+              <svg id="api-log-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;transition:transform 0.2s"><polyline points="6 9 12 15 18 9"/></svg>
+            </div>
+            <div id="api-log-content" class="api-log-content" style="display:none">
+              <div id="api-log-entries"></div>
+              <button onclick="clearApiLog()" style="margin-top:8px;padding:4px 8px;font-size:11px;background:var(--bg-hover);border:1px solid var(--border);border-radius:4px;color:var(--text-secondary);cursor:pointer">Clear Log</button>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -1468,6 +1517,86 @@ let trainImageFiles = [];
 let trainCaptions = {};  // filename -> caption text
 let selectedTrainBackend = 'local';
 let runpodAvailable = false;
+let apiLogs = [];
+const MAX_API_LOGS = 50;
+
+// --- API Logging ---
+function logApi(method, url, status, detail = null) {
+  const now = new Date();
+  const time = now.toLocaleTimeString('en-US', { hour12: false });
+  apiLogs.unshift({ time, method, url, status, detail });
+  if (apiLogs.length > MAX_API_LOGS) apiLogs.pop();
+  renderApiLog();
+}
+
+function renderApiLog() {
+  const container = document.getElementById('api-log-entries');
+  if (!container) return;
+  container.innerHTML = apiLogs.map(log => `
+    <div class="api-log-entry">
+      <span class="api-log-time">${log.time}</span>
+      <span class="api-log-method ${log.method}">${log.method}</span>
+      <span class="api-log-url">${log.url}</span>
+      <span class="api-log-status ${log.status >= 200 && log.status < 300 ? 'ok' : 'error'}">${log.status}</span>
+      ${log.detail ? `<div class="api-log-detail">${log.detail}</div>` : ''}
+    </div>
+  `).join('');
+}
+
+function toggleApiLog() {
+  const content = document.getElementById('api-log-content');
+  const chevron = document.getElementById('api-log-chevron');
+  if (content.style.display === 'none') {
+    content.style.display = '';
+    chevron.style.transform = 'rotate(180deg)';
+  } else {
+    content.style.display = 'none';
+    chevron.style.transform = '';
+  }
+}
+
+function clearApiLog() {
+  apiLogs = [];
+  renderApiLog();
+}
+
+// Wrap fetch to log API calls
+const originalFetch = window.fetch;
+window.fetch = async function(url, options = {}) {
+  const method = options.method || 'GET';
+  const urlStr = typeof url === 'string' ? url : url.toString();
+
+  // Only log API calls, not static resources
+  if (!urlStr.includes('/api/')) {
+    return originalFetch.apply(this, arguments);
+  }
+
+  const shortUrl = urlStr.replace(API, '').split('?')[0];
+
+  try {
+    const response = await originalFetch.apply(this, arguments);
+    const status = response.status;
+
+    // Clone response to read body for error details
+    if (!response.ok) {
+      try {
+        const clone = response.clone();
+        const data = await clone.json();
+        const detail = data.detail || data.error || JSON.stringify(data).substring(0, 100);
+        logApi(method, shortUrl, status, detail);
+      } catch {
+        logApi(method, shortUrl, status, 'Failed to parse error');
+      }
+    } else {
+      logApi(method, shortUrl, status);
+    }
+
+    return response;
+  } catch (error) {
+    logApi(method, shortUrl, 'ERR', error.message);
+    throw error;
+  }
+};
 let galleryImages = [];
 let currentLightboxIndex = -1;
 let galleryOffset = 0;