chrometools-mcp 3.3.8 → 3.4.0

package/utils/hints-generator.js

@@ -6,7 +6,10 @@
 /**
  * Generate hints after page navigation
  */
-export function generateNavigationHints(page, url) {
+export async function generateNavigationHints(page, url) {
+  // Wait for SPA frameworks (Angular, React, Vue) to render after navigation
+  await new Promise(resolve => setTimeout(resolve, 500));
+
   return page.evaluate(() => {
     // Helper to get safe class selector (filters Tailwind special chars)
     function getSafeClassSelector(element) {
@@ -30,11 +33,50 @@ export function generateNavigationHints(page, url) {
       commonSelectors: {},
     };
 
+    // Extract page heading (h1 first, then common framework title patterns)
+    // Helper: check if element is truly visible (not sr-only / visually-hidden)
+    function isReallyVisible(el) {
+      if (!el || el.offsetWidth === 0) return false;
+      if (el.offsetWidth <= 1 && el.offsetHeight <= 1) return false; // sr-only pattern
+      const style = getComputedStyle(el);
+      if (style.clip === 'rect(1px, 1px, 1px, 1px)' || style.clipPath === 'inset(50%)') return false;
+      if (style.visibility === 'hidden' || style.opacity === '0') return false;
+      return true;
+    }
+    const headingCandidates = [
+      document.querySelector('h1'),
+      document.querySelector('.page-title, [class*="page-title"]'),
+      document.querySelector('[class*="page-header"] h1, [class*="page-header"] h2'),
+    ];
+    for (const el of headingCandidates) {
+      if (el && isReallyVisible(el)) {
+        hints.heading = el.textContent.trim().substring(0, 100);
+        break;
+      }
+    }
+
+    // Helper: detect login/auth page (broad detection)
+    function isLoginPage() {
+      // Classic password form
+      if (document.querySelector('form input[type="password"]')) return true;
+      // Phone/OTP login (input[type="tel"] inside a form with few fields)
+      const telInput = document.querySelector('form input[type="tel"]');
+      if (telInput) {
+        const form = telInput.closest('form');
+        if (form && form.querySelectorAll('input:not([type="hidden"])').length <= 3) return true;
+      }
+      // URL-based detection (/login, /signin, /auth in path)
+      if (/\/(login|signin|sign-in|auth|authenticate)(\/|$|\?)/i.test(window.location.pathname)) return true;
+      // Class/ID-based detection
+      if (document.querySelector('[class*="login-form"], [class*="signin-form"], [class*="auth-form"], [id*="login-form"], [id*="signin-form"]')) return true;
+      return false;
+    }
+
     // Detect page type
-    if (document.querySelector('form input[type="password"]')) {
+    if (isLoginPage()) {
       hints.pageType = 'login';
       hints.suggestedNext.push('Fill login credentials and submit');
-      hints.commonSelectors.usernameField = 'input[type="email"], input[name*="user"], input[name*="email"]';
+      hints.commonSelectors.usernameField = 'input[type="email"], input[type="tel"], input[name*="user"], input[name*="email"], input[name*="phone"]';
       hints.commonSelectors.passwordField = 'input[type="password"]';
       hints.commonSelectors.submitButton = 'button[type="submit"], input[type="submit"]';
     } else if (document.querySelector('form') && document.querySelectorAll('form input').length > 3) {
@@ -51,6 +93,18 @@ export function generateNavigationHints(page, url) {
       hints.suggestedNext.push('Browse items or use filters');
     }
 
+    // Detect auth redirect (landed on login page with returnUrl param)
+    const returnUrlPatterns = ['returnUrl', 'return_url', 'redirect', 'redirect_uri', 'next', 'return_to', 'RelayState'];
+    const urlParams = new URL(window.location.href).searchParams;
+    const returnParam = returnUrlPatterns.find(p => urlParams.has(p));
+    if (hints.pageType === 'login' && returnParam) {
+      hints.authRedirect = {
+        detected: true,
+        returnUrl: urlParams.get(returnParam),
+      };
+      hints.suggestedNext = ['⚠️ Auth redirect detected — complete login first, then navigate to intended page'];
+    }
+
     // Available actions
     const forms = document.querySelectorAll('form');
     if (forms.length > 0) {
@@ -126,18 +180,46 @@ export async function generateClickHints(page, selector) {
       suggestedNext: [],
     };
 
-    // Check for modals
-    const modals = document.querySelectorAll('[role="dialog"], .modal, [class*="modal"]');
-    modals.forEach(modal => {
-      if (modal.offsetWidth > 0 && modal.offsetHeight > 0) {
-        hints.modalOpened = true;
-        hints.newElements.push({
-          type: 'modal',
-          selector: getSafeClassSelector(modal) || '[role="dialog"]',
-        });
-        hints.suggestedNext.push('Interact with modal or close it');
-      }
+    // Check for modals — find the topmost visible one
+    const modalEls = document.querySelectorAll('[role="dialog"], .modal, [class*="modal"], mat-dialog-container, .cdk-overlay-pane [role="dialog"], [class*="dialog"]');
+    const visibleModals = Array.from(modalEls).filter(m => m.offsetWidth > 0 && m.offsetHeight > 0);
+    // Deduplicate: skip modals nested inside another visible modal
+    const topModals = visibleModals.filter(modal => {
+      return !visibleModals.some(other => other !== modal && other.contains(modal));
     });
+    // Take only the topmost modal (highest z-index or last in DOM)
+    const topModal = topModals.length > 0 ? topModals[topModals.length - 1] : null;
+    if (topModal) {
+      hints.modalOpened = true;
+      // Extract modal title
+      const titleEl = topModal.querySelector('h1, h2, h3, .modal-title, [mat-dialog-title], .dialog-title');
+      const title = titleEl ? titleEl.textContent.trim().substring(0, 100) : null;
+      // Extract body text (excluding title and buttons)
+      let bodyText = null;
+      const bodyEl = topModal.querySelector('.modal-body, [mat-dialog-content], .dialog-content, .dialog-body');
+      if (bodyEl) {
+        bodyText = bodyEl.textContent.trim().substring(0, 200);
+      } else if (!titleEl) {
+        // Fallback: get modal text directly
+        bodyText = topModal.textContent.trim().substring(0, 200);
+      }
+      // Extract action buttons (from footer or dialog-actions, limit to 5)
+      const actionButtons = [];
+      const actionsContainer = topModal.querySelector('.modal-footer, [mat-dialog-actions], .dialog-actions, .dialog-footer');
+      const btnScope = actionsContainer || topModal;
+      btnScope.querySelectorAll('button, [mat-button], [mat-raised-button], [mat-flat-button], a[role="button"]').forEach(btn => {
+        const text = btn.textContent.trim();
+        if (text && text.length < 50 && actionButtons.length < 5) actionButtons.push(text);
+      });
+      hints.newElements.push({
+        type: 'modal',
+        selector: getSafeClassSelector(topModal) || '[role="dialog"]',
+        title: title,
+        text: bodyText,
+        actions: actionButtons.length > 0 ? actionButtons : undefined,
+      });
+      hints.suggestedNext.push('Interact with modal or close it');
+    }
 
     // Check for new alerts/notifications
     const alerts = document.querySelectorAll('.alert, [role="alert"], .notification');
@@ -152,14 +234,67 @@ export async function generateClickHints(page, selector) {
       }
     });
 
-    // Check for dropdowns
-    const dropdowns = document.querySelectorAll('[class*="dropdown"][class*="open"], [aria-expanded="true"]');
-    if (dropdowns.length > 0) {
+    // Check for dropdowns, overlays, menus
+    const overlaySelectors = [
+      '[class*="dropdown"][class*="open"]',
+      '[class*="dropdown"][class*="show"]',
+      '.cdk-overlay-pane',
+      '[role="listbox"]',
+      '[role="menu"]',
+      '.mat-select-panel',
+      '.mat-mdc-select-panel',
+      '[class*="overlay"][class*="open"]',
+      '.p-dropdown-panel',
+      '.ant-dropdown:not(.ant-dropdown-hidden)',
+      '[class*="select-options"]',
+    ].join(', ');
+    const overlayEls = document.querySelectorAll(overlaySelectors);
+    // Deduplicate: skip overlays that are children of another matched overlay
+    const overlays = Array.from(overlayEls).filter(el => el.offsetWidth > 0 && el.offsetHeight > 0);
+    const dedupedOverlays = overlays.filter(overlay => {
+      return !overlays.some(other => other !== overlay && other.contains(overlay));
+    });
+    dedupedOverlays.forEach(overlay => {
+      // Determine type: explicit menu roles, or custom select-options pattern (but NOT mat-option-text)
+      const isMenu = overlay.matches('[role="menu"]') ||
+        overlay.querySelector('[role="menuitem"]') !== null ||
+        (overlay.matches('[class*="select-options"]') && !overlay.querySelector('mat-option'));
+      const isDropdown = overlay.matches('[role="listbox"]') ||
+        overlay.querySelector('mat-option, [role="option"]') !== null;
+      const type = isMenu ? 'menu' : 'dropdown';
+      // Extract items — use specific selectors to avoid duplicates from nested matches
+      let itemEls;
+      if (isDropdown) {
+        itemEls = overlay.querySelectorAll('mat-option, [role="option"]');
+      } else if (isMenu) {
+        itemEls = overlay.querySelectorAll('[role="menuitem"], [class*="option-text"]');
+      } else {
+        itemEls = overlay.querySelectorAll('mat-option, [role="option"], [role="menuitem"], li, .dropdown-item, .p-dropdown-item, .ant-dropdown-menu-item, [class*="option-text"]');
+      }
+      const items = [];
+      const totalCount = itemEls.length;
+      itemEls.forEach((item, i) => {
+        if (i < 10 && item.textContent.trim()) {
+          items.push(item.textContent.trim().substring(0, 80));
+        }
+      });
       hints.newElements.push({
-        type: 'dropdown',
-        count: dropdowns.length,
+        type,
+        items: items.length > 0 ? items : undefined,
+        totalCount: totalCount,
       });
-      hints.suggestedNext.push('Select option from dropdown');
+      hints.suggestedNext.push(type === 'menu' ? 'Select menu item' : 'Select option from dropdown');
+    });
+
+    // Detect auth redirect after click (session expired, protected route)
+    const clickUrl = window.location.href;
+    const isLoginLike = document.querySelector('form input[type="password"]')
+      || (document.querySelector('form input[type="tel"]') && document.querySelectorAll('form input:not([type="hidden"])').length <= 3)
+      || /\/(login|signin|sign-in|auth|authenticate)(\/|$|\?)/i.test(window.location.pathname)
+      || document.querySelector('[class*="login-form"], [class*="signin-form"], [class*="auth-form"]');
+    if (/[?&](returnUrl|return_url|redirect|redirect_uri|next|return_to)=/i.test(clickUrl) && isLoginLike) {
+      hints.authRedirect = true;
+      hints.suggestedNext.push('⚠️ Auth redirect — landed on login page. Session may not be established.');
     }
 
     return hints;
@@ -288,10 +423,10 @@ export async function generatePageHints(page) {
     };
 
     // Common patterns
-    const loginForm = document.querySelector('form input[type="password"]');
-    if (loginForm) {
-      const form = loginForm.closest('form');
-      hints.commonPatterns.loginForm = form && form.id ? `#${form.id}` : 'form:has(input[type="password"])';
+    const loginInput = document.querySelector('form input[type="password"]') || document.querySelector('form input[type="tel"]');
+    if (loginInput) {
+      const form = loginInput.closest('form');
+      hints.commonPatterns.loginForm = form && form.id ? `#${form.id}` : 'form';
     }
 
     const searchInput = document.querySelector('input[type="search"], input[placeholder*="search" i]');

package/utils/openapi/helpers.js

@@ -0,0 +1,25 @@
+/**
+ * utils/openapi/helpers.js
+ *
+ * Shared utilities for OpenAPI processing.
+ */
+
+/**
+ * Compare two arrays for shallow equality
+ */
+export function arraysEqual(a, b) {
+  if (!a || !b || a.length !== b.length) return false;
+  return a.every((v, i) => v === b[i]);
+}
+
+/**
+ * Build a signature from object properties (key + type) for schema matching.
+ * Used by _findSchemaName to avoid false positives from key-only comparison.
+ */
+export function schemaSignature(properties) {
+  if (!properties) return '';
+  return Object.entries(properties)
+    .map(([k, v]) => `${k}:${v.type || v.$circularRef || '?'}`)
+    .sort()
+    .join(',');
+}