feat: show error messages for failed files in WebUI (fixes #59) (#60)

Author: johnpc

public/app.js

@@ -647,11 +647,18 @@ class SubsyncarrPlusClient {
         const icon = result.success ? '✓' : '✗';
         const className = result.success ? 'success' : 'error';
         const duration = (result.duration / 1000).toFixed(1);
+        const error =
+          !result.success && result.message
+            ? `<div class="engine-error-message">${this.escapeHtml(result.message)}</div>`
+            : '';
 
         return `
         <div class="engine-result ${className}">
-          <span>${icon} ${name}</span>
-          <span class="duration">${duration}s</span>
+          <div class="engine-result-row">
+            <span>${icon} ${name}</span>
+            <span class="duration">${duration}s</span>
+          </div>
+          ${error}
         </div>
       `;
       })
@@ -813,13 +820,45 @@ class SubsyncarrPlusClient {
         '<div class="file-list-empty">No files in this category</div>';
     } else {
       const html = files
-        .map((file) => `<div class="file-list-item">${this.cleanFileName(file.file_path)}</div>`)
+        .map((file) => {
+          const name = this.cleanFileName(file.file_path);
+          const errors = category === 'failed' ? this.renderFileErrors(file) : '';
+          return `<div class="file-list-item">${this.escapeHtml(name)}${errors}</div>`;
+        })
         .join('');
       document.getElementById('fileListContent').innerHTML = html;
     }
 
     document.getElementById('fileListModal').classList.remove('hidden');
   }
+
+  // Render the error messages for each engine that failed on a file
+  renderFileErrors(file) {
+    let engines;
+    try {
+      engines = JSON.parse(file.engines || '{}');
+    } catch {
+      return '';
+    }
+
+    const failures = Object.entries(engines).filter(([, result]) => result && result.success === false);
+
+    if (failures.length === 0) {
+      return '';
+    }
+
+    return `<div class="file-list-errors">${failures
+      .map(([name, result]) => {
+        const message = result.message || 'Unknown error';
+        const stderr = result.stderr ? `<pre class="file-error-detail">${this.escapeHtml(result.stderr)}</pre>` : '';
+        return `<div class="file-error">
+          <span class="file-error-engine">${this.escapeHtml(name)}</span>
+          <span class="file-error-message">${this.escapeHtml(message)}</span>
+          ${stderr}
+        </div>`;
+      })
+      .join('')}</div>`;
+  }
 }
 
 // Initialize client when DOM is ready

public/styles.css

@@ -319,6 +319,24 @@ h2 {
 .engine-result.error {
   background: #fee2e2;
   color: #991b1b;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.engine-result-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.engine-error-message {
+  margin-top: 4px;
+  font-size: 12px;
+  font-family: var(--mono, ui-monospace, monospace);
+  white-space: pre-wrap;
+  word-break: break-word;
+  opacity: 0.9;
 }
 
 .duration {
@@ -777,6 +795,47 @@ td {
   font-style: italic;
 }
 
+.file-list-errors {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.file-error {
+  border-left: 3px solid var(--error);
+  padding: 4px 0 4px 10px;
+}
+
+.file-error-engine {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--error);
+  margin-right: 8px;
+}
+
+.file-error-message {
+  font-size: 13px;
+  color: var(--text);
+  word-break: break-word;
+}
+
+.file-error-detail {
+  margin: 6px 0 0;
+  padding: 8px;
+  background: var(--background);
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 160px;
+  overflow-y: auto;
+  color: var(--text-secondary);
+}
+
 /* Mobile responsive */
 @media (max-width: 768px) {
   .container {