halo-agent 2.0.5 → 2.0.7

package/detectFormErrors.js

@@ -143,14 +143,47 @@ async function detectFormErrors(page) {
       if (type === 'file') return !el.files || el.files.length === 0;
       // contenteditable: empty when innerText is whitespace.
       if (el.isContentEditable) return !(el.innerText || '').trim();
-      // Combobox role with no inner input (custom dropdown trigger): look
-      // for the displayed value via aria-activedescendant or innerText.
-      if (el.getAttribute('role') === 'combobox') {
+      // Combobox / custom-select: React-Select (which Greenhouse uses for
+      // ALL its dropdowns) renders the selected value as a
+      // .select__single-value or .select__multi-value chip INSIDE the
+      // control wrapper, NOT as the input's .value. We must look there or
+      // we falsely flag every filled dropdown as empty (the bug that made
+      // the retry re-pick Gender + Ethnicity).
+      if (el.getAttribute('role') === 'combobox' || tag === 'select') {
+        // Walk up to the React-Select CONTROL specifically (not the inner
+        // value-container — we want the whole control so single-value is
+        // in scope). react-select structure:
+        //   .select__control > .select__value-container > .select__single-value
+        //                                               > .select__input-container > input[role=combobox]
+        // The aria-invalid lands on the inner input, so we MUST climb to
+        // .select__control to see the rendered value chip.
+        let wrap = el.closest('[class*="select__control"]');
+        if (!wrap) {
+          // Climb manually for class variants
+          let p = el;
+          for (let i = 0; i < 8 && p; i++, p = p.parentElement) {
+            if (/select__control|select-control|\bSelect\b.*control/i.test(p.className || '')) { wrap = p; break; }
+          }
+        }
+        if (!wrap) wrap = el.closest('[class*="select"], [class*="combobox"], [class*="Select"]') || el.parentElement;
+        if (wrap) {
+          // Any rendered value chip → NOT empty.
+          const valueEl = wrap.querySelector(
+            '[class*="single-value"], [class*="multi-value"], ' +
+            '[class*="multiValue"], [class*="singleValue"], ' +
+            '[class*="chip"], [class*="tag"]'
+          );
+          if (valueEl && (valueEl.innerText || valueEl.textContent || '').trim()) return false;
+          // Also: the control's own text, minus the placeholder. If the
+          // control shows "Male" it's filled; if it shows "Select..." it's empty.
+          const wrapText = (wrap.innerText || '').trim();
+          const placeholderEl = wrap.querySelector('[class*="placeholder"]');
+          const placeholderText = placeholderEl ? (placeholderEl.innerText || '').trim() : '';
+          if (wrapText && wrapText !== placeholderText && !/^select\b|^choose\b|^\.\.\./i.test(wrapText)) {
+            return false;
+          }
+        }
         const v = (el.value || el.innerText || '').trim();
-        // Empty AND no chip/pill rendered as a sibling means truly empty.
-        const wrap = el.closest('[class*="select"], [class*="combobox"]');
-        const chip = wrap?.querySelector('[class*="chip"], [class*="multi-value"], [class*="tag"]');
-        if (chip && (chip.innerText || '').trim()) return false;
         return !v;
       }
       // Plain inputs / textareas

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "halo-agent",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "HALO local apply agent — auto-fills job applications using your real Chrome session",
   "main": "index.js",
   "bin": {

package/smartFill.js

@@ -293,14 +293,125 @@ async function tryIntlTelCountry(page, triggerLocator, value) {
   }
 }
 
+/**
+ * React-Select handler. Greenhouse migrated its ENTIRE form to react-select
+ * (.select__control / .select__input / .select__menu / .select__option,
+ * with remix-css-* emotion classes). The diagnostic dump confirmed every
+ * failing dropdown — Country, Location — is this widget.
+ *
+ * The reason a plain click+look-for-options failed: react-select renders
+ * its .select__menu ONLY after the input is focused, and for long lists
+ * (countries) it filters by typed text. So the flow is:
+ *   1. click the .select__control to focus + open
+ *   2. type the value to filter the menu (react-select narrows as you type)
+ *   3. wait for .select__option to appear
+ *   4. click the best-matching option (or press Enter to take the highlight)
+ *
+ * For Location it's the same widget but backed by an async (Google Places)
+ * option source — typing triggers a network fetch, options arrive ~700ms
+ * later as .select__option. Same handler covers it.
+ *
+ * Returns null if this isn't a react-select field (so other handlers run).
+ */
+async function tryReactSelect(page, triggerLocator, value) {
+  try {
+    // Detect: the trigger or an ancestor carries a .select__ class.
+    const info = await triggerLocator.evaluate((el) => {
+      const control = el.closest('[class*="select__control"]')
+        || el.closest('[class*="select__value-container"]')?.closest('[class*="select__control"]')
+        || (el.className && /select__/.test(el.className) ? el.closest('[class*="select__"]')?.closest('[class*="control"]') : null)
+        // Last resort: walk up to any node whose class has select__control
+        || (() => { let p = el; for (let i = 0; i < 8 && p; i++, p = p.parentElement) { if (/select__control/.test(p.className || '')) return p; } return null; })();
+      if (!control) return null;
+      // The real text input inside the control:
+      const input = control.querySelector('input.select__input, input[class*="select__input"], input[role="combobox"]') || el;
+      // Tag both with a temp id so Playwright can target them precisely.
+      const cid = 'halo-rs-control-' + Math.random().toString(36).slice(2, 8);
+      control.setAttribute('data-halo-rs', cid);
+      if (input) input.setAttribute('data-halo-rs-input', cid);
+      return { cid };
+    }).catch(() => null);
+    if (!info) return null;
+
+    const control = page.locator(`[data-halo-rs="${info.cid}"]`).first();
+    const input = page.locator(`[data-halo-rs-input="${info.cid}"]`).first();
+
+    // 1. Open: click the control. react-select opens the menu on control click.
+    await control.click({ timeout: 2500 }).catch(() => {});
+    await page.waitForTimeout(250);
+
+    // 2. Type the value to filter. Strip "+1" / parens noise from country
+    //    values ("United States +1" → "United States"). For location, type
+    //    the city ("Tempe").
+    const typed = String(value).replace(/\s*\+\d+\s*$/, '').split(/[,;]/)[0].trim();
+    // Focus the input then type char-by-char so react-select's onChange fires.
+    await input.click({ timeout: 1500 }).catch(() => {});
+    await input.fill('').catch(() => {});
+    await page.keyboard.type(typed, { delay: 50 });
+
+    // 3. Wait for options. react-select menu is .select__menu containing
+    //    .select__option. Async (Places) options take longer — wait up to 2s.
+    const optSel = '.select__option, [class*="select__option"], [id*="react-select"][id*="option"]';
+    try {
+      await page.locator(optSel).first().waitFor({ state: 'visible', timeout: 2200 });
+    } catch {
+      // No options appeared. For react-select, pressing Enter on a typed
+      // value sometimes commits a free-text/create option. Try it, then
+      // verify the control now shows a value.
+      await page.keyboard.press('Enter').catch(() => {});
+      await page.waitForTimeout(200);
+      const filled = await control.evaluate((c) => {
+        const v = c.querySelector('[class*="single-value"], [class*="multi-value"]');
+        return v ? (v.textContent || '').trim() : '';
+      }).catch(() => '');
+      if (filled) return { ok: true, reason: `react-select (enter-commit): ${filled}` };
+      await page.keyboard.press('Escape').catch(() => {});
+      return { ok: false, reason: 'react-select menu showed no options after typing' };
+    }
+
+    // 4. Pick best option.
+    const opts = page.locator(optSel);
+    const texts = await opts.allTextContents().catch(() => []);
+    const tl = typed.toLowerCase();
+    let idx = texts.findIndex((t) => t.toLowerCase().trim() === tl);
+    if (idx === -1) idx = texts.findIndex((t) => t.toLowerCase().trim().startsWith(tl));
+    if (idx === -1) idx = texts.findIndex((t) => t.toLowerCase().includes(tl) || tl.includes(t.toLowerCase().trim()));
+    if (idx === -1) idx = 0; // react-select already filtered; first is best
+    await opts.nth(idx).click({ timeout: 2000 }).catch(async () => {
+      // react-select options sometimes need Enter on the highlighted item
+      await page.keyboard.press('Enter');
+    });
+    await page.waitForTimeout(150);
+    // Verify a value chip rendered
+    const got = await control.evaluate((c) => {
+      const v = c.querySelector('[class*="single-value"], [class*="multi-value"]');
+      return v ? (v.textContent || '').trim() : '';
+    }).catch(() => '');
+    if (got) return { ok: true, reason: `react-select picked: ${got}` };
+    return { ok: true, reason: `react-select clicked option: ${texts[idx] || typed}` };
+  } catch (e) {
+    return { ok: false, reason: `react-select handler threw: ${e.message}` };
+  }
+}
+
 async function openAndPickOption(page, triggerLocator, value, llmCtx) {
+  // React-Select FIRST — Greenhouse uses it for every dropdown. The
+  // diagnostic confirmed Country + Location are both .select__ widgets.
+  // Returns null if not react-select, so other handlers still run.
+  try {
+    const rs = await tryReactSelect(page, triggerLocator, value);
+    if (rs !== null) {
+      if (rs.ok) return rs;
+      // react-select detected but pick failed — log + fall through to the
+      // generic path as a last resort (rare).
+      console.warn(`[smartFill] react-select pick failed: ${rs.reason}`);
+    }
+  } catch {}
+
   try {
-    // First: intl-tel-input special case. The Country dial-code picker on
-    // Greenhouse is a non-standard widget that ignores clicks to its
-    // input — has to click the flag button. tryIntlTelCountry returns
-    // null when the field isn't intl-tel, so other dropdowns continue.
+    // intl-tel-input special case (kept for forms that genuinely use it).
     const itlResult = await tryIntlTelCountry(page, triggerLocator, value);
-    if (itlResult !== null) return itlResult;
+    if (itlResult !== null && itlResult.ok) return itlResult;
   } catch {}
 
   // Second: Google Places typeahead. The Greenhouse Location field is
@@ -362,6 +473,21 @@ async function openAndPickOption(page, triggerLocator, value, llmCtx) {
     }
 
     if (candidates.length === 0) {
+      // DIAGNOSTIC: dump the field's actual DOM so we can see what widget
+      // this really is (intl-tel? react-select? custom?). One-line summary
+      // of the element + its 2 nearest ancestors' classes + any sibling
+      // input/button. This is how we stop guessing selectors.
+      const diag = await triggerLocator.evaluate((el) => {
+        const summ = (n) => n ? `<${n.tagName.toLowerCase()} class="${(n.className || '').toString().slice(0, 120)}" role="${n.getAttribute?.('role') || ''}" aria-haspopup="${n.getAttribute?.('aria-haspopup') || ''}">` : 'null';
+        const p1 = el.parentElement;
+        const p2 = p1?.parentElement;
+        const siblingInputs = Array.from((p2 || p1 || el).querySelectorAll('input, button, [role="combobox"], [role="button"]'))
+          .slice(0, 5)
+          .map((s) => `${s.tagName.toLowerCase()}.${(s.className || '').toString().split(' ')[0]}`)
+          .join(', ');
+        return `self=${summ(el)} | p1=${summ(p1)} | p2=${summ(p2)} | nearby=[${siblingInputs}]`;
+      }).catch(() => 'diag failed');
+      console.warn(`[smartFill] DROPDOWN-DIAG: ${diag}`);
       await page.keyboard.press('Escape').catch(() => {});
       return { ok: false, reason: 'dropdown opened but no visible options found' };
     }