donobu 5.48.0 → 5.49.0

package/dist/esm/reporter/render.js

@@ -1722,7 +1722,7 @@ function renderHtml(report, triage, outputDir) {
             </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('')}
+          ${test.tags.map((t) => `<span class="test-tag" data-copy-tag="${esc(t)}" title="Click to copy"><span class="tag-label">${esc(t)}</span><span class="tag-copy-glyph"><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></span></span>`).join('')}
           ${totalStepCount > 0 ? `<span class="test-step-count" title="${totalStepCount} steps">${totalStepCount} steps</span>` : ''}
           <span class="test-duration">${fmtDuration(totalTestDuration)}</span>
         </div>
@@ -1870,7 +1870,13 @@ body::before{content:'';position:fixed;top:-750px;left:50%;transform:translateX(
 .copy-flow-id .check-icon{color:#22c55e}
 .inline-reason{font-size:11px;font-weight:500;flex-shrink:0;padding:1px 8px;border-radius:4px;background:var(--overlay-light)}
 .test-step-count{font-size:11px;color:var(--text-dim);flex-shrink:0;font-family:var(--mono);padding:2px 8px;background:rgba(255,255,255,.04);border-radius:4px}
-.test-tag{font-size:11px;color:var(--accent);flex-shrink:0;font-family:var(--mono);padding:2px 8px;background:rgba(255,127,58,.08);border:1px solid rgba(255,127,58,.2);border-radius:4px}
+.test-tag{font-size:11px;color:var(--accent);flex-shrink:0;font-family:var(--mono);padding:2px 8px;background:rgba(255,127,58,.08);border:1px solid rgba(255,127,58,.2);border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;transition:background .15s,border-color .15s}
+.test-tag:hover{background:rgba(255,127,58,.16);border-color:rgba(255,127,58,.45)}
+.tag-copy-glyph{display:inline-flex;align-items:center;width:0;margin-left:0;opacity:0;overflow:hidden;transition:width .15s,opacity .15s,margin-left .15s}
+.test-tag:hover .tag-copy-glyph,.test-tag.copied .tag-copy-glyph{width:11px;margin-left:4px;opacity:.75}
+.tag-copy-glyph svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
+.test-tag.copied{color:#22c55e;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.12)}
+.test-tag.copied .tag-copy-glyph{opacity:1}
 .test-duration{font-size:12px;color:var(--text-dim);flex-shrink:0;font-family:var(--mono)}
 .flow-id-detail{display:flex;align-items:center;gap:10px;margin-bottom:4px;padding:8px 12px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius)}
 .flow-id-detail .detail-label{margin-bottom:0;font-size:10px;letter-spacing:.8px}
@@ -2540,6 +2546,10 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
     // 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}
+    // Tag chip: click anywhere on the chip copies its tag text. The hover glyph
+    // briefly becomes a check; stopPropagation keeps the card from expanding.
+    var tagChip=e.target.closest('.test-tag[data-copy-tag]');
+    if(tagChip){e.stopPropagation();navigator.clipboard.writeText(tagChip.getAttribute('data-copy-tag'));var glyph=tagChip.querySelector('.tag-copy-glyph');if(glyph){var glyphSvg=glyph.innerHTML;glyph.innerHTML='<svg class="check-icon" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>';tagChip.classList.add('copied');setTimeout(function(){glyph.innerHTML=glyphSvg;tagChip.classList.remove('copied')},1500)}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

@@ -1722,7 +1722,7 @@ function renderHtml(report, triage, outputDir) {
             </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('')}
+          ${test.tags.map((t) => `<span class="test-tag" data-copy-tag="${esc(t)}" title="Click to copy"><span class="tag-label">${esc(t)}</span><span class="tag-copy-glyph"><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></span></span>`).join('')}
           ${totalStepCount > 0 ? `<span class="test-step-count" title="${totalStepCount} steps">${totalStepCount} steps</span>` : ''}
           <span class="test-duration">${fmtDuration(totalTestDuration)}</span>
         </div>
@@ -1870,7 +1870,13 @@ body::before{content:'';position:fixed;top:-750px;left:50%;transform:translateX(
 .copy-flow-id .check-icon{color:#22c55e}
 .inline-reason{font-size:11px;font-weight:500;flex-shrink:0;padding:1px 8px;border-radius:4px;background:var(--overlay-light)}
 .test-step-count{font-size:11px;color:var(--text-dim);flex-shrink:0;font-family:var(--mono);padding:2px 8px;background:rgba(255,255,255,.04);border-radius:4px}
-.test-tag{font-size:11px;color:var(--accent);flex-shrink:0;font-family:var(--mono);padding:2px 8px;background:rgba(255,127,58,.08);border:1px solid rgba(255,127,58,.2);border-radius:4px}
+.test-tag{font-size:11px;color:var(--accent);flex-shrink:0;font-family:var(--mono);padding:2px 8px;background:rgba(255,127,58,.08);border:1px solid rgba(255,127,58,.2);border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;transition:background .15s,border-color .15s}
+.test-tag:hover{background:rgba(255,127,58,.16);border-color:rgba(255,127,58,.45)}
+.tag-copy-glyph{display:inline-flex;align-items:center;width:0;margin-left:0;opacity:0;overflow:hidden;transition:width .15s,opacity .15s,margin-left .15s}
+.test-tag:hover .tag-copy-glyph,.test-tag.copied .tag-copy-glyph{width:11px;margin-left:4px;opacity:.75}
+.tag-copy-glyph svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
+.test-tag.copied{color:#22c55e;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.12)}
+.test-tag.copied .tag-copy-glyph{opacity:1}
 .test-duration{font-size:12px;color:var(--text-dim);flex-shrink:0;font-family:var(--mono)}
 .flow-id-detail{display:flex;align-items:center;gap:10px;margin-bottom:4px;padding:8px 12px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius)}
 .flow-id-detail .detail-label{margin-bottom:0;font-size:10px;letter-spacing:.8px}
@@ -2540,6 +2546,10 @@ details.ai-invocation[open]>summary .native-step-chevron{transform:rotate(90deg)
     // 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}
+    // Tag chip: click anywhere on the chip copies its tag text. The hover glyph
+    // briefly becomes a check; stopPropagation keeps the card from expanding.
+    var tagChip=e.target.closest('.test-tag[data-copy-tag]');
+    if(tagChip){e.stopPropagation();navigator.clipboard.writeText(tagChip.getAttribute('data-copy-tag'));var glyph=tagChip.querySelector('.tag-copy-glyph');if(glyph){var glyphSvg=glyph.innerHTML;glyph.innerHTML='<svg class="check-icon" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>';tagChip.classList.add('copied');setTimeout(function(){glyph.innerHTML=glyphSvg;tagChip.classList.remove('copied')},1500)}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.48.0",
+  "version": "5.49.0",
   "description": "Create browser automations with an LLM agent and replay them as Playwright scripts.",
   "main": "dist/main.js",
   "module": "dist/esm/main.js",