executable-stories-formatters 0.7.15 → 0.8.0

package/dist/index.cjs

@@ -1434,11 +1434,53 @@ function initKeyboardShortcuts() {
   });
 }
 
-// Collapse/expand functionality
+// Collapse/expand functionality (persisted in localStorage)
+var COLLAPSE_KEY = 'es-collapsed-ids';
+
+function loadCollapseState() {
+  try {
+    var raw = localStorage.getItem(COLLAPSE_KEY);
+    return raw ? new Set(JSON.parse(raw)) : new Set();
+  } catch (e) {
+    return new Set();
+  }
+}
+
+function saveCollapseState(set) {
+  try {
+    localStorage.setItem(COLLAPSE_KEY, JSON.stringify(Array.from(set)));
+  } catch (e) { /* quota or disabled */ }
+}
+
+function persistCollapse(container) {
+  if (!container || !container.id) return;
+  var state = loadCollapseState();
+  if (container.classList.contains('collapsed')) {
+    state.add(container.id);
+  } else {
+    state.delete(container.id);
+  }
+  saveCollapseState(state);
+}
+
 function toggleCollapse(header, container) {
   container?.classList.toggle('collapsed');
   const isCollapsed = container?.classList.contains('collapsed');
   header.setAttribute('aria-expanded', !isCollapsed);
+  persistCollapse(container);
+}
+
+function restoreCollapseState() {
+  var state = loadCollapseState();
+  if (state.size === 0) return;
+  state.forEach(function(id) {
+    var el = document.getElementById(id);
+    if (!el) return;
+    if (!el.classList.contains('feature') && !el.classList.contains('scenario')) return;
+    el.classList.add('collapsed');
+    var header = el.querySelector('.feature-header, .scenario-header');
+    if (header) header.setAttribute('aria-expanded', 'false');
+  });
 }
 
 function initCollapse() {
@@ -1485,14 +1527,20 @@ function expandAll() {
     const header = el.querySelector('.feature-header, .scenario-header, .trace-view-header');
     header?.setAttribute('aria-expanded', 'true');
   });
+  saveCollapseState(new Set());
 }
 
 function collapseAll() {
+  var ids = new Set();
   document.querySelectorAll('.feature, .scenario, .trace-view').forEach(el => {
     el.classList.add('collapsed');
     const header = el.querySelector('.feature-header, .scenario-header, .trace-view-header');
     header?.setAttribute('aria-expanded', 'false');
+    if (el.id && (el.classList.contains('feature') || el.classList.contains('scenario'))) {
+      ids.add(el.id);
+    }
   });
+  saveCollapseState(ids);
 }
 
 // Detail level toggle
@@ -1619,6 +1667,68 @@ function copyScenarioAsMarkdown(scenarioId) {
   });
 }
 
+// Copy scenario as Claude-ready prompt (failure investigation context)
+function copyScenarioAsPrompt(scenarioId) {
+  var scenario = document.getElementById(scenarioId);
+  if (!scenario) return;
+
+  var feature = scenario.closest('.feature');
+  var featureTitle = feature ? (feature.querySelector('.feature-title') || {}).textContent || '' : '';
+  var title = (scenario.querySelector('.scenario-name') || {}).textContent || '';
+  var statusEl = scenario.querySelector('.status-icon');
+  var status = statusEl && statusEl.classList.contains('status-passed') ? 'passed' :
+               statusEl && statusEl.classList.contains('status-failed') ? 'failed' :
+               statusEl && statusEl.classList.contains('status-skipped') ? 'skipped' : 'pending';
+  var sourceLink = scenario.querySelector('.source-link');
+  var source = sourceLink ? sourceLink.textContent || '' : '';
+  var tags = Array.from(scenario.querySelectorAll('.scenario-meta .tag')).map(function(t) { return t.textContent.trim(); });
+  var steps = scenario.querySelectorAll('.step, .step.continuation');
+
+  var lines = [];
+  lines.push('I need help investigating a failing executable-story scenario.');
+  lines.push('');
+  if (featureTitle.trim()) lines.push('Feature: ' + featureTitle.trim());
+  lines.push('Scenario: ' + title.trim());
+  lines.push('Status: ' + status);
+  if (source.trim()) lines.push('Source: ' + source.trim());
+  if (tags.length > 0) lines.push('Tags: ' + tags.join(', '));
+  lines.push('');
+  lines.push('Steps:');
+  steps.forEach(function(step) {
+    var keyword = step.getAttribute('data-keyword') || '';
+    var text = step.getAttribute('data-text') || '';
+    var stepStatusEl = step.querySelector('.step-status');
+    var marker = '  ';
+    if (stepStatusEl) {
+      if (stepStatusEl.classList.contains('status-failed')) marker = 'x ';
+      else if (stepStatusEl.classList.contains('status-passed')) marker = '+ ';
+      else if (stepStatusEl.classList.contains('status-skipped')) marker = '- ';
+    }
+    lines.push(marker + keyword + ' ' + text);
+  });
+
+  var errorBox = scenario.querySelector('.error-message');
+  if (errorBox) {
+    lines.push('');
+    lines.push('Error:');
+    lines.push((errorBox.textContent || '').trim());
+  }
+  var stackBox = scenario.querySelector('.error-stack');
+  if (stackBox) {
+    lines.push('');
+    lines.push('Stack:');
+    lines.push((stackBox.textContent || '').trim());
+  }
+
+  lines.push('');
+  lines.push('Please read the source file, identify the root cause, and propose a fix.');
+
+  var text = lines.join('\\n');
+  navigator.clipboard.writeText(text).then(function() {
+    showCopyToast(scenario);
+  });
+}
+
 // Hash scroll on load
 function initHashScroll() {
   if (!location.hash) return;
@@ -1788,6 +1898,7 @@ function generateScript(options) {
   initCalls.push("initStatusFilter();");
   initCalls.push("initKeyboardShortcuts();");
   initCalls.push("initCollapse();");
+  initCalls.push("restoreCollapseState();");
   initCalls.push("initDetailLevel();");
   initCalls.push("applyAllFilters();");
   initCalls.push("initHashScroll();");
@@ -3895,6 +4006,33 @@ body {
   color: var(--primary);
 }
 
+.copy-prompt-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: none;
+  background: none;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  font-size: 0.95rem;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.scenario-header:hover .copy-prompt-btn,
+.copy-prompt-btn:focus-visible {
+  opacity: 1;
+}
+
+.copy-prompt-btn:hover {
+  color: var(--primary);
+  transform: scale(1.15);
+}
+
 /* ============================================================================
    Keyboard Navigation
    ============================================================================ */
@@ -4132,6 +4270,82 @@ a.toc-title:hover {
   outline-offset: 2px;
 }
 
+/* ============================================================================
+   Mobile responsive refinements
+   ============================================================================ */
+@media (max-width: 640px) {
+  .container {
+    padding: 0.875rem;
+  }
+
+  .header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+  }
+
+  .header-actions {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .search-input {
+    width: 100%;
+    flex: 1 1 100%;
+    min-width: 0;
+  }
+
+  .header h1 {
+    font-size: 1.25rem;
+  }
+
+  .scenario-header,
+  .feature-header {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .scenario-meta {
+    flex-wrap: wrap;
+  }
+
+  .scenario-actions {
+    flex-wrap: wrap;
+  }
+
+  /* Always-visible action buttons on touch (no hover) */
+  .copy-scenario-btn,
+  .copy-prompt-btn,
+  .permalink-anchor {
+    opacity: 1 !important;
+  }
+
+  .summary-card {
+    padding: 0.75rem 0.875rem;
+  }
+
+  .summary-card .value {
+    font-size: 1.5rem;
+  }
+
+  .tag-bar {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .shortcuts-overlay {
+    padding: 1rem;
+  }
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .copy-scenario-btn,
+  .copy-prompt-btn,
+  .permalink-anchor {
+    opacity: 1;
+  }
+}
+
 `;
 
 // src/formatters/html/themes/default.ts
@@ -13858,6 +14072,7 @@ function renderScenario(args, deps) {
     </div>
     <div class="scenario-actions">
       <button class="copy-scenario-btn" onclick="copyScenarioAsMarkdown('scenario-${tc.id}')" aria-label="Copy scenario as markdown" title="Copy as Markdown"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
+      ${tc.status === "failed" ? `<button class="copy-prompt-btn" onclick="copyScenarioAsPrompt('scenario-${tc.id}')" aria-label="Copy as Claude prompt" title="Copy as AI prompt">\u2728</button>` : ""}
       <button class="permalink-anchor" onclick="copyPermalink('scenario-${tc.id}')" aria-label="Copy link to scenario" title="Copy link">#</button>
       <span class="scenario-duration">${duration}</span>
     </div>
@@ -19654,7 +19869,7 @@ var ReportGenerator = class {
       exclude: options.exclude ?? [],
       includeTags: options.includeTags ?? [],
       excludeTags: options.excludeTags ?? [],
-      formats: options.formats ?? ["cucumber-json"],
+      formats: options.formats ?? ["html"],
       outputDir: options.outputDir ?? "reports",
       outputName: options.outputName ?? "index",
       outputNameTimestamp: options.outputNameTimestamp ?? false,