ma-agents 2.22.1 → 3.0.0

package/lib/bmad-cache/wds/src/workflows/wds-5-agentic-development/templates/components/dev-mode.js

@@ -0,0 +1,430 @@
+/* eslint-disable n/no-unsupported-features/node-builtins */
+/* global document, window */
+
+/**
+ * PROTOTYPE DEV MODE
+ *
+ * Developer/feedback mode that allows users to easily copy Object IDs to clipboard
+ * for providing precise feedback on prototype elements.
+ *
+ * Features:
+ * - Toggle dev mode with button or Ctrl+E
+ * - Prototype works NORMALLY when dev mode is on
+ * - Hold Shift + Click any element to copy its Object ID
+ * - Visual highlights show what will be copied (green when Shift is held)
+ * - Tooltip shows Object ID on hover
+ * - Success feedback when copied
+ *
+ * Usage:
+ * 1. Include this script in your prototype HTML
+ * 2. Add the HTML toggle button and tooltip (see HTML template)
+ * 3. Add the CSS styles (see CSS template)
+ * 4. Call initDevMode() on page load
+ *
+ * How it works:
+ * - Activate dev mode (Ctrl+E or click button)
+ * - Hover over elements to see their Object IDs (gray outline)
+ * - Hold Shift key (outline turns green)
+ * - Click while holding Shift to copy Object ID
+ * - Prototype works normally without Shift held
+ * - **Shift is disabled when typing in form fields** (input, textarea, etc.)
+ */
+
+// ============================================================================
+// DEV MODE STATE
+// ============================================================================
+
+let devModeActive = false;
+let shiftKeyPressed = false;
+let currentHighlightedElement = null;
+
+// ============================================================================
+// INITIALIZATION
+// ============================================================================
+
+function initDevMode() {
+  const toggleButton = document.querySelector('#dev-mode-toggle');
+  const tooltip = document.querySelector('#dev-mode-tooltip');
+
+  if (!toggleButton || !tooltip) {
+    console.warn('⚠️ Dev Mode: Toggle button or tooltip not found');
+    return;
+  }
+
+  // Check if user agent supports clipboard API
+  if (typeof navigator !== 'undefined' && navigator.clipboard) {
+    // Clipboard API available
+  } else {
+    console.warn('⚠️ Clipboard API not supported in this browser');
+    return;
+  }
+
+  setupKeyboardShortcuts();
+  setupToggleButton(toggleButton, tooltip);
+  setupHoverHighlight(tooltip);
+  setupClickCopy();
+
+  console.log('%c💡 Dev Mode available: Press Ctrl+E or click the Dev Mode button', 'color: #0066CC; font-weight: bold;');
+}
+
+// ============================================================================
+// KEYBOARD SHORTCUTS
+// ============================================================================
+
+function setupKeyboardShortcuts() {
+  // Track Shift key for container selection
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Shift') {
+      // Don't activate if user is typing in a form field
+      if (isTypingInField()) {
+        return;
+      }
+
+      shiftKeyPressed = true;
+      document.body.classList.add('shift-held');
+      if (devModeActive) {
+        console.log('%c⬆️ Shift held: Click any element to copy its Object ID', 'color: #10B981; font-weight: bold;');
+      }
+    }
+
+    // Ctrl+E toggle
+    if (e.ctrlKey && e.key === 'e') {
+      e.preventDefault();
+      document.querySelector('#dev-mode-toggle')?.click();
+    }
+  });
+
+  document.addEventListener('keyup', (e) => {
+    if (e.key === 'Shift') {
+      shiftKeyPressed = false;
+      document.body.classList.remove('shift-held');
+      if (devModeActive) {
+        console.log('%c⬇️ Shift released: Prototype works normally (hold Shift to copy)', 'color: #6b7280;');
+      }
+    }
+  });
+}
+
+// ============================================================================
+// TOGGLE BUTTON
+// ============================================================================
+
+function setupToggleButton(toggleButton, tooltip) {
+  toggleButton.addEventListener('click', function (e) {
+    e.stopPropagation();
+    if (typeof globalThis !== 'undefined') {
+      globalThis.devModeActive = true;
+    } else if (globalThis.window !== undefined) {
+      globalThis.devModeActive = true;
+    }
+    devModeActive = !devModeActive;
+
+    // Update UI
+    document.body.classList.toggle('dev-mode-active', devModeActive);
+    toggleButton.classList.toggle('active', devModeActive);
+
+    const statusText = toggleButton.querySelector('span');
+    if (statusText) {
+      statusText.textContent = devModeActive ? 'Dev Mode: ON' : 'Dev Mode: OFF';
+    }
+
+    // Log status
+    console.log(`🔧 Dev Mode: ${devModeActive ? 'ACTIVATED' : 'DEACTIVATED'}`);
+
+    if (devModeActive) {
+      console.log('%c🔧 DEV MODE ACTIVE', 'color: #0066CC; font-size: 16px; font-weight: bold;');
+      console.log('%c⚠️ Hold SHIFT + Click any element to copy its Object ID', 'color: #FFB800; font-size: 14px; font-weight: bold;');
+      console.log('%cWithout Shift: Prototype works normally', 'color: #6b7280;');
+      console.log('%cPress Ctrl+E to toggle Dev Mode', 'color: #6b7280;');
+    } else {
+      tooltip.style.display = 'none';
+      if (currentHighlightedElement) {
+        clearHighlight();
+      }
+    }
+  });
+}
+
+// ============================================================================
+// HOVER HIGHLIGHT
+// ============================================================================
+
+function setupHoverHighlight(tooltip) {
+  // Show tooltip and highlight on hover
+  document.addEventListener('mouseover', function (e) {
+    if (!devModeActive) return;
+
+    // Don't highlight if user is typing in a field
+    if (isTypingInField()) {
+      tooltip.style.display = 'none';
+      clearHighlight();
+      return;
+    }
+
+    clearHighlight();
+
+    let element = findElementWithId(e.target);
+
+    if (!element || !element.id || isSystemElement(element.id)) {
+      tooltip.style.display = 'none';
+      return;
+    }
+
+    // Highlight element
+    highlightElement(element, shiftKeyPressed);
+    currentHighlightedElement = element;
+
+    // Show tooltip
+    const prefix = shiftKeyPressed ? '✓ Click to Copy: ' : '⬆️ Hold Shift + Click: ';
+    tooltip.textContent = prefix + element.id;
+    tooltip.style.display = 'block';
+    tooltip.style.background = shiftKeyPressed ? '#10B981' : '#6b7280';
+    tooltip.style.color = '#fff';
+
+    updateTooltipPosition(e, tooltip);
+  });
+
+  // Update tooltip position on mouse move
+  document.addEventListener('mousemove', function (e) {
+    if (devModeActive && tooltip.style.display === 'block') {
+      updateTooltipPosition(e, tooltip);
+    }
+  });
+
+  // Clear highlight on mouse out
+  document.addEventListener('mouseout', function (e) {
+    if (!devModeActive) return;
+    if (e.target.id) {
+      tooltip.style.display = 'none';
+      clearHighlight();
+    }
+  });
+}
+
+// ============================================================================
+// CLICK TO COPY
+// ============================================================================
+
+function setupClickCopy() {
+  // Use capture phase to intercept clicks with Shift
+  document.addEventListener(
+    'click',
+    function (e) {
+      if (!devModeActive) return;
+
+      // Allow toggle button to work normally
+      if (isToggleButton(e.target)) return;
+
+      // ONLY copy if Shift is held
+      if (!shiftKeyPressed) {
+        // Let prototype work normally without Shift
+        return;
+      }
+
+      // Don't intercept if user is clicking in/around a form field
+      if (isTypingInField() || isFormElement(e.target)) {
+        return;
+      }
+
+      // Shift is held and not in a form field - intercept and copy
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+
+      let element = findElementWithId(e.target);
+
+      if (!element || !element.id || isSystemElement(element.id)) {
+        console.log('❌ No Object ID found');
+        return false;
+      }
+
+      // Copy to clipboard
+      const objectId = element.id;
+      copyToClipboard(objectId);
+
+      // Show feedback
+      showCopyFeedback(element, objectId);
+
+      return false;
+    },
+    true,
+  ); // Capture phase
+}
+
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+
+function findElementWithId(element) {
+  let current = element;
+  let attempts = 0;
+
+  while (current && !current.id && attempts < 10) {
+    current = current.parentElement;
+    attempts++;
+  }
+
+  return current;
+}
+
+function isSystemElement(id) {
+  const systemIds = ['app', 'dev-mode-toggle', 'dev-mode-tooltip'];
+  return systemIds.includes(id);
+}
+
+function isToggleButton(element) {
+  return element.id === 'dev-mode-toggle' || element.closest('#dev-mode-toggle') || element.classList.contains('dev-mode-toggle');
+}
+
+function isTypingInField() {
+  const activeElement = document.activeElement;
+  if (!activeElement) return false;
+
+  const tagName = activeElement.tagName.toLowerCase();
+  const isEditable = activeElement.isContentEditable;
+
+  // Check if user is currently typing in a form field
+  return tagName === 'input' || tagName === 'textarea' || tagName === 'select' || isEditable;
+}
+
+function isFormElement(element) {
+  if (!element) return false;
+
+  const tagName = element.tagName.toLowerCase();
+  const isEditable = element.isContentEditable;
+
+  // Check if the clicked element is a form element
+  return tagName === 'input' || tagName === 'textarea' || tagName === 'select' || isEditable;
+}
+
+function highlightElement(element, isShiftHeld) {
+  const color = isShiftHeld ? '#10B981' : '#6b7280';
+  const width = isShiftHeld ? '3px' : '2px';
+  const offset = isShiftHeld ? '3px' : '2px';
+  const shadowSpread = isShiftHeld ? '5px' : '2px';
+  const shadowOpacity = isShiftHeld ? '0.4' : '0.2';
+
+  element.style.outline = `${width} solid ${color}`;
+  element.style.outlineOffset = offset;
+  element.style.boxShadow = `0 0 0 ${shadowSpread} rgba(${isShiftHeld ? '16, 185, 129' : '107, 114, 128'}, ${shadowOpacity})`;
+}
+
+function clearHighlight() {
+  if (currentHighlightedElement) {
+    currentHighlightedElement.style.outline = '';
+    currentHighlightedElement.style.boxShadow = '';
+    currentHighlightedElement = null;
+  }
+}
+
+function updateTooltipPosition(e, tooltip) {
+  const offset = 15;
+  let x = e.clientX + offset;
+  let y = e.clientY + offset;
+
+  // Keep tooltip on screen
+  const rect = tooltip.getBoundingClientRect();
+  if (x + rect.width > window.innerWidth) {
+    x = e.clientX - rect.width - offset;
+  }
+  if (y + rect.height > window.innerHeight) {
+    y = e.clientY - rect.height - offset;
+  }
+
+  tooltip.style.left = x + 'px';
+  tooltip.style.top = y + 'px';
+}
+
+function copyToClipboard(text) {
+  if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        console.log(`📋 Copied to clipboard: ${text}`);
+      })
+      .catch((error) => {
+        console.error('Dev Mode error:', error);
+        fallbackCopy(text);
+      });
+  } else {
+    fallbackCopy(text);
+  }
+}
+
+function fallbackCopy(text) {
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  textarea.style.position = 'fixed';
+  textarea.style.left = '-999999px';
+  document.body.append(textarea);
+  textarea.focus();
+  textarea.select();
+
+  try {
+    document.execCommand('copy');
+    console.log(`📋 Copied (fallback): ${text}`);
+  } catch (error) {
+    console.error('Dev Mode error:', error);
+  }
+
+  textarea.remove();
+}
+
+function showCopyFeedback(element, objectId) {
+  // Create feedback overlay
+  const feedback = document.createElement('div');
+  feedback.textContent = '✓ Copied: ' + objectId;
+  feedback.style.cssText = `
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: #10B981;
+        color: #fff;
+        padding: 16px 32px;
+        border-radius: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        z-index: 100000;
+        box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+        animation: fadeInOut 1.5s ease-in-out;
+        pointer-events: none;
+    `;
+
+  document.body.append(feedback);
+
+  setTimeout(() => {
+    feedback.remove();
+  }, 1500);
+
+  // Flash element
+  const originalOutline = element.style.outline;
+  element.style.outline = '3px solid #10B981';
+  setTimeout(() => {
+    element.style.outline = originalOutline;
+  }, 300);
+}
+
+// Add CSS animation
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes fadeInOut {
+        0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
+        20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+        80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+        100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
+    }
+`;
+document.head.append(style);
+
+// ============================================================================
+// EXPORT
+// ============================================================================
+
+// Make available globally
+globalThis.initDevMode = initDevMode;
+
+// Export for use in other scripts
+if (typeof globalThis !== 'undefined' && globalThis.exports) {
+  globalThis.exports = { initDevMode };
+}

package/lib/bmad-cache/wds/src/workflows/wds-5-agentic-development/templates/demo-data-template.json

@@ -0,0 +1,63 @@
+{
+  "user": {
+    "id": "demo-user-001",
+    "firstName": "[First Name]",
+    "lastName": "[Last Name]",
+    "email": "[email@example.com]",
+    "phoneNumber": "[+1234567890]",
+    "picture": "",
+    "role": "owner",
+    "createdAt": "2024-01-01T00:00:00.000Z",
+    "updatedAt": "2024-01-01T00:00:00.000Z"
+  },
+  "family": {
+    "id": "demo-family-001",
+    "name": "[Family Name]",
+    "description": "[Brief family description]",
+    "location": "[City, Country]",
+    "picture": "",
+    "ownerId": "demo-user-001",
+    "createdAt": "2024-01-01T00:00:00.000Z",
+    "updatedAt": "2024-01-01T00:00:00.000Z"
+  },
+  "members": [
+    {
+      "id": "demo-member-001",
+      "familyId": "demo-family-001",
+      "userId": "demo-user-001",
+      "firstName": "[Member 1 First Name]",
+      "lastName": "[Member 1 Last Name]",
+      "email": "[member1@example.com]",
+      "role": "owner",
+      "picture": "",
+      "createdAt": "2024-01-01T00:00:00.000Z"
+    },
+    {
+      "id": "demo-member-002",
+      "familyId": "demo-family-001",
+      "userId": "demo-user-002",
+      "firstName": "[Member 2 First Name]",
+      "lastName": "[Member 2 Last Name]",
+      "email": "[member2@example.com]",
+      "role": "co-owner",
+      "picture": "",
+      "createdAt": "2024-01-02T00:00:00.000Z"
+    }
+  ],
+  "dogs": [
+    {
+      "id": "demo-dog-001",
+      "familyId": "demo-family-001",
+      "name": "[Dog Name]",
+      "breed": "[Dog Breed]",
+      "gender": "male",
+      "birthDate": "2020-05-15",
+      "color": "[Color]",
+      "specialNeeds": "[Any special needs or notes]",
+      "picture": "",
+      "createdAt": "2024-01-01T00:00:00.000Z",
+      "updatedAt": "2024-01-01T00:00:00.000Z"
+    }
+  ],
+  "comment": "This is demo data that loads automatically when prototype is opened for the first time. Edit this file to change the demo data. All fields with empty strings ('') are optional."
+}