┌─────────────────────────────────────────────────────────────────────────────┐
│  TRADITIONAL TEST AUTOMATION CHALLENGES                                      │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  ❌ Brittle Selectors                                                       │
│     • Tests break on every CSS/build change                                 │
│     • Selectors like ".Button_primary__x7k2s" change per deploy             │
│     • Position-based selectors break on UI reorder                          │
│                                                                             │
│  ❌ No Semantic Understanding                                               │
│     • Test doesn't know "what" element does                                 │
│     • Can't verify correct element targeted                                 │
│     • Debugging requires UI inspection                                      │
│                                                                             │
│  ❌ Mobile Accessibility ID Chaos                                           │
│     • Inconsistent contentDescription/accessibilityIdentifier               │
│     • testID missing on critical elements                                   │
│     • No standard naming convention                                         │
│                                                                             │
│  ❌ Privacy-Masked Fields                                                   │
│     • Can't debug what test automation entered                              │
│     • Masked fields show as "████████" in session replay                   │
│     • No visibility into automation test data                               │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────────────┐
│  FULLSTORY-DECORATED CODEBASE = AUTOMATION-READY                            │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  ✅ Stable Selectors (from fullstory-stable-selectors skill)                │
│     • data-component="card" → [data-component="card"]                      │
│     • data-id="add-to-cart" → [data-id="add-to-cart"]                     │
│     • data-section="checkout" → [data-section="checkout"]                 │
│     • Survives all CSS/build changes                                        │
│                                                                             │
│  ✅ Semantic Element Names (from fullstory-element-properties skill)        │
│     • data-fs-element="Product Card" → Human-readable in tests              │
│     • Property schemas → Know element types (price=real, qty=int)           │
│                                                                             │
│  ✅ Navigation Context (from fullstory-page-properties skill)               │
│     • pageName: "Checkout" → Know which page/view we're on                  │
│     • Can assert navigation, generate Page Objects                          │
│                                                                             │
│  ✅ Test Data Capture (from fullstory-analytics-events skill)               │
│     • trackEvent for test input capture                                     │
│     • Debug automation even with privacy masking                            │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────────────┐
│  AI ASSISTANT TEST GENERATION WORKFLOW                                       │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  1. DISCOVER (this skill)                                                   │
│     └── Scan codebase for existing Fullstory decoration                    │
│     └── Identify which skills are implemented                              │
│     └── Detect platform: Web vs Mobile vs Both                             │
│                                                                             │
│  2. ANALYZE (this skill)                                                    │
│     └── Determine decoration maturity level (0-4)                          │
│     └── Identify gaps vs fully decorated elements                          │
│     └── Note privacy controls on sensitive fields                          │
│                                                                             │
│  3. ROUTE (to platform file in this directory)                              │
│     └── Web detected → Read ./SKILL-WEB.md                                 │
│     └── Mobile detected → Read ./SKILL-MOBILE.md                           │
│     └── Both → Read both as needed                                         │
│                                                                             │
│  4. GENERATE (platform skill)                                               │
│     └── Use best available selectors (fallback gracefully)                 │
│     └── Apply framework-specific patterns                                  │
│     └── Add test data tracking for masked fields                           │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

# Detect Web (React, Vue, Angular, etc.)
ls -la src/**/*.tsx src/**/*.jsx src/**/*.vue 2>/dev/null
grep -r "data-id=" --include="*.tsx" --include="*.jsx" --include="*.html"

# Detect React Native
grep -r "testID=" --include="*.tsx" --include="*.jsx"
ls -la ios/ android/ 2>/dev/null

# Detect Native Android
ls -la app/src/main/java/ app/src/main/kotlin/ 2>/dev/null
grep -r "contentDescription=" --include="*.xml"

# Detect Native iOS  
ls -la *.xcodeproj/ *.xcworkspace/ 2>/dev/null
grep -r "accessibilityIdentifier" --include="*.swift"

# Detect Flutter
ls -la lib/ pubspec.yaml 2>/dev/null
grep -r "Key\(" --include="*.dart"

# Discover stable selectors (fullstory-stable-selectors)
grep -r "data-component=" --include="*.tsx" --include="*.jsx" --include="*.html"
grep -r "data-id=" --include="*.tsx" --include="*.jsx" --include="*.html"
grep -r "data-section=" --include="*.tsx" --include="*.jsx" --include="*.html"
grep -r "data-position=" --include="*.tsx" --include="*.jsx" --include="*.html"
grep -r "data-state=" --include="*.tsx" --include="*.jsx" --include="*.html"

# Discover element properties (fullstory-element-properties)
grep -r "data-fs-element=" --include="*.tsx" --include="*.jsx"
grep -r "data-fs-properties-schema=" --include="*.tsx" --include="*.jsx"
grep -r "data-product-id=" --include="*.tsx" --include="*.jsx"

# Discover page properties (fullstory-page-properties)
grep -r "pageName" --include="*.ts" --include="*.tsx" --include="*.js"

# Discover privacy controls (fullstory-privacy-controls)
grep -r "fs-exclude\|fs-mask\|fs-unmask" --include="*.tsx" --include="*.scss"

# Discover analytics events (fullstory-analytics-events)
grep -r "trackEvent\|FS\('trackEvent" --include="*.ts" --include="*.tsx"

# Discover user identification (fullstory-identify-users)
grep -r "setIdentity\|FS\('setIdentity" --include="*.ts" --include="*.tsx"

┌─────────────────────────────────────────────────────────────────────────────┐
│  DECORATION MATURITY LEVELS                                                  │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  Level 0: NONE                                                              │
│  └── No Fullstory decoration found                                         │
│  └── Must use CSS classes, IDs, text content (brittle)                     │
│  └── RECOMMEND: Implement fullstory-stable-selectors first                 │
│                                                                             │
│  Level 1: BASIC (stable selectors only)                                    │
│  └── data-id, data-component present                                       │
│  └── Can target elements reliably                                          │
│  └── Limited semantic context                                              │
│                                                                             │
│  Level 2: INTERMEDIATE (+ element/page properties)                         │
│  └── data-fs-element, property schemas present                             │
│  └── pageName set for navigation                                           │
│  └── Rich assertions possible                                              │
│                                                                             │
│  Level 3: ADVANCED (+ privacy + events)                                    │
│  └── Privacy classes applied (fs-exclude, fs-mask)                         │
│  └── trackEvent calls for business events                                  │
│  └── Can verify event tracking in tests                                    │
│                                                                             │
│  Level 4: COMPLETE (all skills)                                            │
│  └── User identification and properties                                    │
│  └── Capture control (shutdown/restart)                                    │
│  └── Full test automation capability                                       │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

interface ComponentDecorationInventory {
  componentName: string;
  filePath: string;
  platform: 'web' | 'react-native' | 'android' | 'ios' | 'flutter';
  
  // From fullstory-stable-selectors
  stableSelectors: {
    dataComponent?: string;
    dataIds: string[];
    dataSections: string[];
    dataPositions: string[];
    dataStates: string[];
  };
  
  // From fullstory-element-properties
  elementProperties: {
    fsElementNames: string[];
    businessProperties: string[]; // data-product-id, data-price, etc.
  };
  
  // From fullstory-privacy-controls
  privacyControls: {
    excludedFields: string[];
    maskedFields: string[];
  };
  
  // Assessment
  maturityLevel: 0 | 1 | 2 | 3 | 4;
  gaps: string[];
}

┌─────────────────────────────────────────────────────────────────────────────┐
│  SELECTOR FALLBACK CHAIN (Best → Worst)                                      │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  1. data-id="X"              ← Best: Stable, semantic                       │
│  2. data-testid="X"          ← Good: Test-specific                          │
│  3. data-component + context ← Good: Scoped                                 │
│  4. data-section="X"         ← Good: Structural grouping                    │
│  5. data-position="X"        ← Good: Positional context                     │
│  6. aria-label="X"           ← OK: Accessibility-based                      │
│  7. [role="X"]               ← Fallback: Semantic HTML                      │
│  8. button, input[type]      ← Fallback: Element type                       │
│  9. .class-name              ← Last resort: CSS class (warn user)           │
│                                                                             │
│  ALWAYS AVOID:                                                              │
│  ✗ Dynamic classes (.Button_x7k2s)                                         │
│  ✗ Position-based (:nth-child)                                             │
│  ✗ Auto-generated IDs (#react-select-123)                                  │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

⚠️ WARNING: No Fullstory decoration found.
Tests will be BRITTLE. Recommend implementing fullstory-stable-selectors first.
Proceeding with accessibility-based and semantic HTML selectors as fallback.

function generateRecommendations(inventory: ComponentDecorationInventory): string[] {
  const recs: string[] = [];
  
  if (inventory.stableSelectors.dataIds.length === 0) {
    recs.push('🔴 CRITICAL: Add data-id to interactive elements');
  }
  
  if (!inventory.stableSelectors.dataComponent) {
    recs.push('🟡 RECOMMENDED: Add data-component to component root');
  }
  
  if (inventory.elementProperties.fsElementNames.length === 0) {
    recs.push('🟢 OPTIONAL: Add data-fs-element for human-readable names');
  }
  
  return recs;
}

// E-commerce properties enable targeted testing
interface EcommerceProductProperties {
  'data-product-id': string;
  'data-price': string;
  'data-category': string;
  'data-in-stock': 'true' | 'false';
}

// Test patterns
await page.locator('[data-component="card"][data-category="Electronics"]').click();
await expect(productCard).toHaveAttribute('data-in-stock', 'true');

// Role-based testing
interface SaaSUserProperties {
  'data-user-role': 'admin' | 'editor' | 'viewer';
  'data-plan-tier': 'free' | 'pro' | 'enterprise';
}

// Test patterns
await setupTestUser(page, { role: 'admin', plan: 'enterprise' });
await expect(page.locator('[data-id="admin-panel"]')).toBeVisible();

// Account-based testing with privacy awareness
interface FinancialAccountProperties {
  'data-account-type': 'checking' | 'savings';
  'data-account-status': 'active' | 'locked';
  // Actual amounts in fs-exclude regions
}