donobu 5.45.0 → 5.46.0

package/dist/esm/reporter/render.js

@@ -1597,7 +1597,9 @@ function renderHtml(report, triage, outputDir) {
         const testId = testIds[ti];
         const hasMultipleResults = test.results.length > 1;
         const lastResult = test.results.at(-1);
-        const displayFileName = test.file.split('/').pop() ?? test.file;
+        // Path is already relative to rootDir (see buildReport.ts), so it's safe
+        // to display directly — no absolute paths leak through.
+        const displayFilePath = test.file;
         let detailsHtml = '';
         // 0. Skip reason — surface the description and call site from
         //    test.skip()/test.fixme() so a skipped test explains itself.
@@ -1678,12 +1680,19 @@ function renderHtml(report, triage, outputDir) {
             ? `<div class="flow-id-detail"><span class="detail-label">Flow ID</span><span class="flow-id-value">${esc(test.flowId)}<button class="copy-flow-id" data-flow-id="${esc(test.flowId)}" title="Copy flow ID"><svg viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button></span></div>`
             : '';
         testSectionsHtml += `
-      <div class="test-card ${sc.label.toLowerCase().replace(/ /g, '')} ${expandableClass}" id="${testId}" data-status="${test.status}" data-file="${esc(test.file)}" data-search="${esc((displayFileName + ' ' + test.specTitle).toLowerCase())}" data-tags="${esc(JSON.stringify(test.tags))}"${test.plan ? ` data-reason="${esc(test.plan.plan.failureReason)}"` : ''} ${hasDetails ? `data-detail="${testId}"` : ''}>
+      <div class="test-card ${sc.label.toLowerCase().replace(/ /g, '')} ${expandableClass}" id="${testId}" data-status="${test.status}" data-file="${esc(test.file)}" data-search="${esc((displayFilePath + ' ' + test.specTitle).toLowerCase())}" data-tags="${esc(JSON.stringify(test.tags))}"${test.plan ? ` data-reason="${esc(test.plan.plan.failureReason)}"` : ''} ${hasDetails ? `data-detail="${testId}"` : ''}>
         <div class="test-summary">
           ${chevron}
           <span class="status-dot" style="background:${sc.color}" title="${sc.label}"></span>
           <div class="test-name-group">
-            <span class="test-name"><span class="test-file">${esc(displayFileName)}</span> (${esc(test.specTitle)})</span>
+            <div class="test-file-line">
+              <span class="test-file">${esc(displayFilePath)}</span>
+              <button class="copy-text" data-copy-text="${esc(displayFilePath)}" title="Copy file name"><svg viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button>
+            </div>
+            <div class="test-title-line">
+              <span class="test-title">${esc(test.specTitle)}</span>
+              <button class="copy-text" data-copy-text="${esc(test.specTitle)}" title="Copy test name"><svg viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button>
+            </div>
           </div>
           ${test.plan ? `<span class="inline-reason" style="color:${reasonCfg(test.plan.plan.failureReason).color}" title="${esc(test.plan.plan.failureReason)}">${esc(reasonCfg(test.plan.plan.failureReason).label)}</span>` : ''}
           ${test.tags.map((t) => `<span class="test-tag">${esc(t)}</span>`).join('')}
@@ -1817,9 +1826,15 @@ body::before{content:'';position:fixed;top:-750px;left:50%;transform:translateX(
 .chevron-spacer{width:18px;flex-shrink:0}
 .test-card.expanded .chevron{transform:rotate(90deg)}
 .status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
-.test-file{color:var(--text);font-weight:600}
 .test-name-group{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
-.test-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.test-file-line,.test-title-line{display:flex;align-items:center;gap:6px;min-width:0}
+.test-file{color:var(--text-muted);font-family:var(--mono);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.test-title{color:var(--text);font-weight:500;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.copy-text{background:transparent;border:none;border-radius:4px;cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);opacity:0;transition:opacity .15s,background .15s,color .15s;flex-shrink:0}
+.test-summary:hover .copy-text,.copy-text:focus-visible{opacity:1}
+.copy-text:hover{background:var(--overlay-light-active);color:var(--text)}
+.copy-text svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
+.copy-text .check-icon{color:#22c55e;opacity:1}
 .flow-id{font-size:11px;color:var(--text-dim);opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px}
 .copy-flow-id{background:var(--overlay-light-hover);border:none;border-radius:4px;cursor:pointer;padding:3px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:background .15s,color .15s;flex-shrink:0}
 .copy-flow-id:hover{background:var(--overlay-light-active);color:var(--text)}
@@ -2439,7 +2454,9 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
       if(el){navigator.clipboard.writeText(el.textContent);var s=copyBtn.innerHTML;copyBtn.innerHTML='<svg class="check-icon" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>';setTimeout(function(){copyBtn.innerHTML=s},2000)}
       return;
     }
-    // Copy buttons (flow ID + JSON)
+    // Copy buttons (flow ID + JSON + inline text via data-copy-text)
+    var copyTextBtn=e.target.closest('.copy-text[data-copy-text]');
+    if(copyTextBtn){e.stopPropagation();e.preventDefault();navigator.clipboard.writeText(copyTextBtn.getAttribute('data-copy-text'));var copyTextSvg=copyTextBtn.innerHTML;copyTextBtn.innerHTML='<svg class="check-icon" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>';setTimeout(function(){copyTextBtn.innerHTML=copyTextSvg},2000);return}
     var flowBtn=e.target.closest('.copy-flow-id');
     if(flowBtn){e.stopPropagation();navigator.clipboard.writeText(flowBtn.getAttribute('data-flow-id'));var copySvg=flowBtn.innerHTML;flowBtn.innerHTML='<svg class="check-icon" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>';setTimeout(function(){flowBtn.innerHTML=copySvg},2000);return}
     var jsonBtn=e.target.closest('.copy-json');

package/dist/reporter/render.js

@@ -1597,7 +1597,9 @@ function renderHtml(report, triage, outputDir) {
         const testId = testIds[ti];
         const hasMultipleResults = test.results.length > 1;
         const lastResult = test.results.at(-1);
-        const displayFileName = test.file.split('/').pop() ?? test.file;
+        // Path is already relative to rootDir (see buildReport.ts), so it's safe
+        // to display directly — no absolute paths leak through.
+        const displayFilePath = test.file;
         let detailsHtml = '';
         // 0. Skip reason — surface the description and call site from
         //    test.skip()/test.fixme() so a skipped test explains itself.
@@ -1678,12 +1680,19 @@ function renderHtml(report, triage, outputDir) {
             ? `<div class="flow-id-detail"><span class="detail-label">Flow ID</span><span class="flow-id-value">${esc(test.flowId)}<button class="copy-flow-id" data-flow-id="${esc(test.flowId)}" title="Copy flow ID"><svg viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button></span></div>`
             : '';
         testSectionsHtml += `
-      <div class="test-card ${sc.label.toLowerCase().replace(/ /g, '')} ${expandableClass}" id="${testId}" data-status="${test.status}" data-file="${esc(test.file)}" data-search="${esc((displayFileName + ' ' + test.specTitle).toLowerCase())}" data-tags="${esc(JSON.stringify(test.tags))}"${test.plan ? ` data-reason="${esc(test.plan.plan.failureReason)}"` : ''} ${hasDetails ? `data-detail="${testId}"` : ''}>
+      <div class="test-card ${sc.label.toLowerCase().replace(/ /g, '')} ${expandableClass}" id="${testId}" data-status="${test.status}" data-file="${esc(test.file)}" data-search="${esc((displayFilePath + ' ' + test.specTitle).toLowerCase())}" data-tags="${esc(JSON.stringify(test.tags))}"${test.plan ? ` data-reason="${esc(test.plan.plan.failureReason)}"` : ''} ${hasDetails ? `data-detail="${testId}"` : ''}>
         <div class="test-summary">
           ${chevron}
           <span class="status-dot" style="background:${sc.color}" title="${sc.label}"></span>
           <div class="test-name-group">
-            <span class="test-name"><span class="test-file">${esc(displayFileName)}</span> (${esc(test.specTitle)})</span>
+            <div class="test-file-line">
+              <span class="test-file">${esc(displayFilePath)}</span>
+              <button class="copy-text" data-copy-text="${esc(displayFilePath)}" title="Copy file name"><svg viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button>
+            </div>
+            <div class="test-title-line">
+              <span class="test-title">${esc(test.specTitle)}</span>
+              <button class="copy-text" data-copy-text="${esc(test.specTitle)}" title="Copy test name"><svg viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button>
+            </div>
           </div>
           ${test.plan ? `<span class="inline-reason" style="color:${reasonCfg(test.plan.plan.failureReason).color}" title="${esc(test.plan.plan.failureReason)}">${esc(reasonCfg(test.plan.plan.failureReason).label)}</span>` : ''}
           ${test.tags.map((t) => `<span class="test-tag">${esc(t)}</span>`).join('')}
@@ -1817,9 +1826,15 @@ body::before{content:'';position:fixed;top:-750px;left:50%;transform:translateX(
 .chevron-spacer{width:18px;flex-shrink:0}
 .test-card.expanded .chevron{transform:rotate(90deg)}
 .status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
-.test-file{color:var(--text);font-weight:600}
 .test-name-group{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
-.test-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.test-file-line,.test-title-line{display:flex;align-items:center;gap:6px;min-width:0}
+.test-file{color:var(--text-muted);font-family:var(--mono);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.test-title{color:var(--text);font-weight:500;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.copy-text{background:transparent;border:none;border-radius:4px;cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);opacity:0;transition:opacity .15s,background .15s,color .15s;flex-shrink:0}
+.test-summary:hover .copy-text,.copy-text:focus-visible{opacity:1}
+.copy-text:hover{background:var(--overlay-light-active);color:var(--text)}
+.copy-text svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
+.copy-text .check-icon{color:#22c55e;opacity:1}
 .flow-id{font-size:11px;color:var(--text-dim);opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px}
 .copy-flow-id{background:var(--overlay-light-hover);border:none;border-radius:4px;cursor:pointer;padding:3px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:background .15s,color .15s;flex-shrink:0}
 .copy-flow-id:hover{background:var(--overlay-light-active);color:var(--text)}
@@ -2439,7 +2454,9 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
       if(el){navigator.clipboard.writeText(el.textContent);var s=copyBtn.innerHTML;copyBtn.innerHTML='<svg class="check-icon" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>';setTimeout(function(){copyBtn.innerHTML=s},2000)}
       return;
     }
-    // Copy buttons (flow ID + JSON)
+    // Copy buttons (flow ID + JSON + inline text via data-copy-text)
+    var copyTextBtn=e.target.closest('.copy-text[data-copy-text]');
+    if(copyTextBtn){e.stopPropagation();e.preventDefault();navigator.clipboard.writeText(copyTextBtn.getAttribute('data-copy-text'));var copyTextSvg=copyTextBtn.innerHTML;copyTextBtn.innerHTML='<svg class="check-icon" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>';setTimeout(function(){copyTextBtn.innerHTML=copyTextSvg},2000);return}
     var flowBtn=e.target.closest('.copy-flow-id');
     if(flowBtn){e.stopPropagation();navigator.clipboard.writeText(flowBtn.getAttribute('data-flow-id'));var copySvg=flowBtn.innerHTML;flowBtn.innerHTML='<svg class="check-icon" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>';setTimeout(function(){flowBtn.innerHTML=copySvg},2000);return}
     var jsonBtn=e.target.closest('.copy-json');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "donobu",
-  "version": "5.45.0",
+  "version": "5.46.0",
   "description": "Create browser automations with an LLM agent and replay them as Playwright scripts.",
   "main": "dist/main.js",
   "module": "dist/esm/main.js",