From 4f9cb43ac822e30570ac4fbc01cc877f13417d2d Mon Sep 17 00:00:00 2001
From: Paul Huliganga <paje0101@gmail.com>
Date: Tue, 21 Apr 2026 15:03:18 -0400
Subject: [PATCH] feat(templates): expandable failure details in detail history
 tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rows with errors, blockers, or warnings now show a '▶ click for details'
hint and expand inline on click, matching the behaviour in History & Audit.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/static/js/templates.js | 45 ++++++++++++++++++++++++++++++--------
 1 file changed, 36 insertions(+), 9 deletions(-)

diff --git a/web/static/js/templates.js b/web/static/js/templates.js
index f477d7f..7b95943 100644
--- a/web/static/js/templates.js
+++ b/web/static/js/templates.js
@@ -444,23 +444,50 @@ function _renderDetailTab(t, tabKey) {
       if (!records.length) {
         content.innerHTML = `<div class="callout info"><span class="callout-icon">ℹ️</span>No migration history for this template yet.</div>`;
       } else {
+        const rows = [...records].reverse().map(r => {
+          const hasDetail = r.error || (r.blockers||[]).length || (r.warnings||[]).length;
+          const detailHtml = hasDetail ? `
+            <tr class="row-expanded-content" style="display:none">
+              <td colspan="4">
+                <div class="row-expand-body">
+                  ${(r.blockers||[]).map(b => `<div style="color:var(--error);font-size:12px">🚫 ${escHtml(b)}</div>`).join('')}
+                  ${(r.warnings||[]).map(w => `<div style="color:var(--warning);font-size:12px">⚠ ${escHtml(w)}</div>`).join('')}
+                  ${r.error ? `<div style="color:var(--error);font-size:12px">❌ ${escHtml(r.error)}</div>` : ''}
+                </div>
+              </td>
+            </tr>` : '';
+          return `
+            <tr class="${hasDetail ? 'row-expandable' : ''}" style="${hasDetail ? 'cursor:pointer' : ''}">
+              <td>${(r.timestamp||'').slice(0,19).replace('T',' ')}</td>
+              <td>${escHtml(r.action||'—')}</td>
+              <td>
+                <span class="badge ${r.status==='success'?'badge-green':'badge-red'}">${r.status}</span>
+                ${hasDetail ? '<span style="font-size:10px;color:var(--text-muted);margin-left:4px">▶ click for details</span>' : ''}
+              </td>
+              <td class="mono">${escHtml(r.docusign_template_id||'—')}</td>
+            </tr>${detailHtml}`;
+        }).join('');
+
         content.innerHTML = `
           <div class="card">
             <div class="table-wrap">
               <table>
                 <thead><tr><th>Time</th><th>Action</th><th>Status</th><th>Docusign ID</th></tr></thead>
-                <tbody>
-                  ${[...records].reverse().map(r => `
-                    <tr>
-                      <td>${(r.timestamp||'').slice(0,19).replace('T',' ')}</td>
-                      <td>${escHtml(r.action||'—')}</td>
-                      <td><span class="badge ${r.status==='success'?'badge-green':'badge-red'}">${r.status}</span></td>
-                      <td class="mono">${escHtml(r.docusign_template_id||'—')}</td>
-                    </tr>`).join('')}
-                </tbody>
+                <tbody>${rows}</tbody>
               </table>
             </div>
           </div>`;
+
+        content.querySelectorAll('.row-expandable').forEach(row => {
+          row.addEventListener('click', () => {
+            const next = row.nextElementSibling;
+            if (next?.classList.contains('row-expanded-content')) {
+              const open = next.style.display !== 'none';
+              next.style.display = open ? 'none' : 'table-row';
+              row.querySelector('span[style*="text-muted"]').textContent = open ? '▶ click for details' : '▼ hide details';
+            }
+          });
+        });
       }
     }).catch(() => {
       content.innerHTML = `<div class="callout error"><span class="callout-icon">❌</span>Failed to load history.</div>`;