claude-code-workflow 6.3.34 → 6.3.37

package/ccw/src/templates/dashboard-js/views/issue-manager.js

@@ -435,6 +435,120 @@ function renderIssueCard(issue) {
   `;
 }
 
+// Render failure information for failed issues
+function renderFailureInfo(issue) {
+  // Check if issue has failure feedback
+  if (!issue.feedback || issue.feedback.length === 0) {
+    return '';
+  }
+
+  // Extract failure feedbacks
+  const failures = issue.feedback.filter(f => f.type === 'failure' && f.stage === 'execute');
+  if (failures.length === 0) {
+    return '';
+  }
+
+  // Get latest failure
+  const latestFailure = failures[failures.length - 1];
+  let failureDetail;
+  try {
+    failureDetail = JSON.parse(latestFailure.content);
+  } catch {
+    return '';
+  }
+
+  const errorMessage = failureDetail.message || 'Unknown error';
+  const errorType = failureDetail.error_type || 'error';
+  const taskId = failureDetail.task_id;
+  const failureCount = failures.length;
+
+  return `
+    <div class="issue-failure-info">
+      <div class="failure-header">
+        <i data-lucide="alert-circle" class="w-3.5 h-3.5"></i>
+        <span class="failure-label">${failureCount > 1 ? `Failed ${failureCount} times` : 'Execution Failed'}</span>
+        ${taskId ? `<span class="failure-task">${taskId}</span>` : ''}
+      </div>
+      <div class="failure-message">
+        <span class="failure-type">${errorType}:</span>
+        <span class="failure-text" title="${escapeHtml(errorMessage)}">${escapeHtml(truncateText(errorMessage, 80))}</span>
+      </div>
+    </div>
+  `;
+}
+
+function renderFailureHistoryDetail(issue) {
+  // Check if issue has failure feedback
+  if (!issue.feedback || issue.feedback.length === 0) {
+    return '';
+  }
+
+  // Extract failure feedbacks
+  const failures = issue.feedback.filter(f => f.type === 'failure' && f.stage === 'execute');
+  if (failures.length === 0) {
+    return '';
+  }
+
+  return `
+    <div class="detail-section">
+      <label class="detail-label">${t('issues.failureHistory') || 'Failure History'} (${failures.length})</label>
+      <div class="failure-history-list">
+        ${failures.map((failure, index) => {
+          let failureDetail;
+          try {
+            failureDetail = JSON.parse(failure.content);
+          } catch {
+            return '';
+          }
+
+          const errorMessage = failureDetail.message || 'Unknown error';
+          const errorType = failureDetail.error_type || 'error';
+          const taskId = failureDetail.task_id;
+          const timestamp = failure.created_at ? new Date(failure.created_at).toLocaleString() : 'Unknown time';
+
+          return `
+            <div class="failure-history-item">
+              <div class="failure-history-header">
+                <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                <span class="failure-history-count">Failure ${index + 1}</span>
+                <span class="failure-history-timestamp text-xs text-muted-foreground">${timestamp}</span>
+              </div>
+              <div class="failure-history-content">
+                ${taskId ? `
+                  <div class="failure-history-task">
+                    <span class="detail-label-sm">Task:</span>
+                    <span class="font-mono text-xs">${taskId}</span>
+                  </div>
+                ` : ''}
+                <div class="failure-history-error">
+                  <span class="detail-label-sm">Error Type:</span>
+                  <span class="font-mono text-xs">${errorType}</span>
+                </div>
+                <div class="failure-history-message">
+                  <span class="detail-label-sm">Message:</span>
+                  <pre class="detail-pre text-xs">${escapeHtml(errorMessage)}</pre>
+                </div>
+                ${failureDetail.stack_trace ? `
+                  <details class="failure-history-stacktrace">
+                    <summary class="cursor-pointer text-xs text-muted-foreground">Show Stack Trace</summary>
+                    <pre class="detail-pre text-xs mt-1 max-h-60 overflow-auto">${escapeHtml(failureDetail.stack_trace)}</pre>
+                  </details>
+                ` : ''}
+              </div>
+            </div>
+          `;
+        }).join('')}
+      </div>
+    </div>
+  `;
+}
+
+// Helper: Truncate text to max length
+function truncateText(text, maxLength) {
+  if (!text || text.length <= maxLength) return text;
+  return text.substring(0, maxLength - 3) + '...';
+}
+
 function renderPriorityStars(priority) {
   const maxStars = 5;
   let stars = '';
@@ -879,6 +993,7 @@ function renderQueueItemWithDelete(item, index, total, queueId) {
           <i data-lucide="link" class="w-3 h-3"></i>
         </span>
       ` : ''}
+      ${renderQueueItemFailureInfo(item)}
       <button class="queue-item-delete btn-icon" onclick="event.stopPropagation(); deleteQueueItem('${safeQueueId}', '${safeItemId}')" title="Delete item">
         <i data-lucide="trash-2" class="w-3 h-3"></i>
       </button>
@@ -886,6 +1001,47 @@ function renderQueueItemWithDelete(item, index, total, queueId) {
   `;
 }
 
+// Render failure info for queue items
+function renderQueueItemFailureInfo(item) {
+  // Only show for failed items
+  if (item.status !== 'failed') {
+    return '';
+  }
+
+  // Check failure_details or failure_reason
+  const failureDetails = item.failure_details;
+  const failureReason = item.failure_reason;
+
+  if (!failureDetails && !failureReason) {
+    return '';
+  }
+
+  let errorType = 'error';
+  let errorMessage = 'Unknown error';
+
+  if (failureDetails) {
+    errorType = failureDetails.error_type || 'error';
+    errorMessage = failureDetails.message || 'Unknown error';
+  } else if (failureReason) {
+    // Try to parse as JSON
+    try {
+      const parsed = JSON.parse(failureReason);
+      errorType = parsed.error_type || 'error';
+      errorMessage = parsed.message || failureReason;
+    } catch {
+      errorMessage = failureReason;
+    }
+  }
+
+  return `
+    <span class="queue-item-failure text-xs" title="${escapeHtml(errorMessage)}">
+      <i data-lucide="alert-circle" class="w-3 h-3"></i>
+      <span class="failure-type">${escapeHtml(errorType)}:</span>
+      <span class="failure-msg">${escapeHtml(truncateText(errorMessage, 40))}</span>
+    </span>
+  `;
+}
+
 async function deleteQueueItem(queueId, itemId) {
   if (!confirm('Delete this item from queue?')) return;
 
@@ -1599,6 +1755,9 @@ function renderIssueDetailPanel(issue) {
         </div>
       </div>
 
+      <!-- Failure History -->
+      ${renderFailureHistoryDetail(issue)}
+
       <!-- Solutions -->
       <div class="detail-section">
         <label class="detail-label">${t('issues.solutions') || 'Solutions'} (${issue.solutions?.length || 0})</label>