browser-debugger-cli 0.7.2 → 0.9.0

package/dist/commands/dom/form.js

@@ -4,37 +4,18 @@
  * Discovers forms on the page with semantic labels, current values,
  * validation state, and suggested commands for agent consumption.
  */
-import { FORM_DISCOVERY_SCRIPT, isRawFormData } from '../../commands/dom/formDiscovery.js';
-import { runCommand } from '../../commands/shared/CommandRunner.js';
-import { jsonOption } from '../../commands/shared/commonOptions.js';
-import { QueryCacheManager } from '../../session/QueryCacheManager.js';
-import { CommandError } from '../../ui/errors/index.js';
+import { calculateSummary, orderForms, primaryButtonIndex } from './formSummary.js';
+import { resolveBackendNodeIds } from './helpers/index.js';
+import { runCommand } from '../shared/CommandRunner.js';
+import { jsonOption } from '../shared/commonOptions.js';
+import { noFormsFoundError, formInIframeError } from '../../errors/messages.js';
+import { domFormDiscover } from '../../ipc/client.js';
+import { FORM_DISCOVERY_CACHE_SELECTOR, QueryCacheManager } from '../../session/QueryCacheManager.js';
 import { formatFormDiscovery } from '../../ui/formatters/form.js';
 import { createLogger } from '../../ui/logging/index.js';
-import { noFormsFoundError, formInIframeError } from '../../ui/messages/errors.js';
+import { getErrorMessage } from '../../utils/errors.js';
 import { EXIT_CODES } from '../../utils/exitCodes.js';
 const log = createLogger('dom');
-/**
- * Execute form discovery in page context.
- *
- * @param cdp - CDP connection
- * @returns Raw form data from page
- */
-async function executeFormDiscovery(cdp) {
-    const response = await cdp.send('Runtime.evaluate', {
-        expression: FORM_DISCOVERY_SCRIPT,
-        returnByValue: true,
-    });
-    const cdpResponse = response;
-    if (cdpResponse.exceptionDetails) {
-        throw new CommandError(`Form discovery failed: ${cdpResponse.exceptionDetails.text}`, { suggestion: 'Check if page has loaded completely' }, EXIT_CODES.SOFTWARE_ERROR);
-    }
-    const rawData = cdpResponse.result?.value;
-    if (!isRawFormData(rawData)) {
-        throw new CommandError('Unexpected form discovery response', { suggestion: 'This may be a bug - please report it' }, EXIT_CODES.SOFTWARE_ERROR);
-    }
-    return rawData;
-}
 /**
  * Build validation state from raw field data.
  *
@@ -42,7 +23,7 @@ async function executeFormDiscovery(cdp) {
  * @returns Structured validation state
  */
 function buildValidation(raw) {
-    const hasNativeError = !raw.isValid && raw.validationMessage;
+    const hasNativeError = !raw.isValid && !raw.valueMissing && raw.validationMessage;
     const hasAriaError = raw.ariaInvalid;
     const hasSiblingError = !!raw.siblingErrorText;
     const hasClassError = raw.hasErrorClass;
@@ -125,17 +106,25 @@ function buildInteractionWarning(raw) {
         return undefined;
     }
     const type = raw.type.toLowerCase();
-    if (type === 'contenteditable') {
-        return 'Custom contenteditable - use click + type instead of fill';
-    }
+    if (type === 'contenteditable')
+        return undefined;
     if (type === 'combobox' || type === 'listbox') {
         return 'Custom dropdown - click to open, then select option';
     }
     if (type === 'textbox') {
-        return 'Custom textbox - fill may not trigger framework events';
+        return 'Custom textbox - if fill has no effect, click it and type with pressKey (one key per call)';
     }
     return 'Custom component - standard fill may not work';
 }
+/**
+ * Whether a user could change the field.
+ *
+ * @param raw - Raw field data
+ * @returns False for disabled and read-only fields
+ */
+function editable(raw) {
+    return !raw.disabled && !raw.readOnly;
+}
 /**
  * Build fill command for a field.
  *
@@ -149,7 +138,7 @@ function buildFieldCommand(index, type) {
         return `bdg dom click ${index}`;
     }
     if (lowerType === 'file') {
-        return `bdg dom click ${index}`;
+        return `bdg dom fill ${index} "<path>"`;
     }
     return `bdg dom fill ${index} "<value>"`;
 }
@@ -168,27 +157,10 @@ function buildSelectorCommand(selector, type) {
         return `bdg dom click "${escaped}"`;
     }
     if (lowerType === 'file') {
-        return `bdg dom click "${escaped}"`;
+        return `bdg dom fill "${escaped}" "<path>"`;
     }
     return `bdg dom fill "${escaped}" "<value>"`;
 }
-/**
- * Build alternative command for non-native fields.
- *
- * @param index - Global element index
- * @param raw - Raw field data
- * @returns Alternative command or undefined
- */
-function buildAlternativeCommand(index, raw) {
-    if (raw.native) {
-        return undefined;
-    }
-    const type = raw.type.toLowerCase();
-    if (type === 'contenteditable' || type === 'textbox') {
-        return `bdg dom click ${index} && bdg dom pressKey ${index} "<value>"`;
-    }
-    return undefined;
-}
 /**
  * Transform raw field to structured FormField.
  *
@@ -206,6 +178,7 @@ function transformField(raw) {
         name: raw.name,
         placeholder: raw.placeholder,
         required: raw.required,
+        groupLabel: raw.groupLabel,
         disabled: raw.disabled,
         readOnly: raw.readOnly,
         hidden: raw.hidden,
@@ -216,84 +189,29 @@ function transformField(raw) {
         maskedValue: buildMaskedValue(raw),
         validation: buildValidation(raw),
         options: raw.options,
-        command: buildFieldCommand(raw.index, raw.type),
-        selectorCommand: buildSelectorCommand(raw.selector, raw.type),
-        alternativeCommand: buildAlternativeCommand(raw.index, raw),
+        command: editable(raw) ? buildFieldCommand(raw.index, raw.type) : '',
+        selectorCommand: editable(raw) ? buildSelectorCommand(raw.selector, raw.type) : '',
     };
 }
 /**
  * Transform raw button to structured FormButton.
  *
  * @param raw - Raw button data
+ * @param primaryIndex - Index of the form's primary button, if any
  * @returns Structured FormButton
  */
-function transformButton(raw) {
+function transformButton(raw, primaryIndex) {
     return {
         index: raw.index,
         selector: raw.selector,
         label: raw.label,
         type: raw.type,
-        primary: raw.isPrimary,
+        primary: raw.index === primaryIndex,
         enabled: !raw.disabled,
         disabledReason: raw.disabled ? 'Button is disabled' : undefined,
         command: `bdg dom click ${raw.index}`,
     };
 }
-/**
- * Calculate form summary statistics.
- *
- * @param fields - Transformed form fields
- * @param buttons - Transformed form buttons
- * @returns Form summary
- */
-function calculateSummary(fields, buttons) {
-    const visibleFields = fields.filter((f) => !f.hidden);
-    const requiredFields = visibleFields.filter((f) => f.required);
-    const filledFields = visibleFields.filter((f) => f.state === 'filled' || f.state === 'checked');
-    const validFields = visibleFields.filter((f) => f.validation.valid);
-    const invalidFields = visibleFields.filter((f) => !f.validation.valid);
-    const emptyRequired = requiredFields.filter((f) => f.state === 'empty' || f.state === 'unchecked');
-    const blockers = [];
-    for (const field of emptyRequired) {
-        blockers.push({
-            index: field.index,
-            label: field.label,
-            reason: 'Required field is empty',
-            command: field.command,
-        });
-    }
-    for (const field of invalidFields) {
-        if (!emptyRequired.includes(field)) {
-            blockers.push({
-                index: field.index,
-                label: field.label,
-                reason: field.validation.message ?? 'Validation failed',
-                command: field.command,
-            });
-        }
-    }
-    const submitButton = buttons.find((b) => b.type === 'submit' && b.primary);
-    if (submitButton && !submitButton.enabled) {
-        blockers.push({
-            index: submitButton.index,
-            label: submitButton.label,
-            reason: submitButton.disabledReason ?? 'Submit button is disabled',
-            command: submitButton.command,
-        });
-    }
-    return {
-        totalFields: visibleFields.length,
-        filledFields: filledFields.length,
-        emptyFields: visibleFields.length - filledFields.length,
-        validFields: validFields.length,
-        invalidFields: invalidFields.length,
-        requiredTotal: requiredFields.length,
-        requiredFilled: requiredFields.length - emptyRequired.length,
-        requiredRemaining: emptyRequired.length,
-        readyToSubmit: blockers.length === 0,
-        blockers,
-    };
-}
 /**
  * Transform raw form to structured DiscoveredForm.
  *
@@ -302,7 +220,8 @@ function calculateSummary(fields, buttons) {
  */
 function transformForm(raw) {
     const fields = raw.fields.map(transformField);
-    const buttons = raw.buttons.map(transformButton);
+    const primaryIndex = primaryButtonIndex(raw.buttons);
+    const buttons = raw.buttons.map((button) => transformButton(button, primaryIndex));
     return {
         index: raw.index,
         name: raw.name,
@@ -310,6 +229,8 @@ function transformForm(raw) {
         method: raw.method,
         step: raw.step ?? undefined,
         relevanceScore: raw.relevanceScore,
+        hidden: raw.hidden === true,
+        inDialog: raw.inDialog === true,
         fields,
         buttons,
         summary: calculateSummary(fields, buttons),
@@ -318,67 +239,28 @@ function transformForm(raw) {
 /**
  * Cache form elements for index-based access.
  *
+ * Each field and button is cached with its selector and backend node id, so
+ * an index keeps addressing the same element even if other elements match
+ * the selector later.
+ *
  * @param forms - Discovered forms
  */
 async function cacheFormElements(forms) {
-    const cacheManager = QueryCacheManager.getInstance();
-    const allElements = [];
-    for (const form of forms) {
-        for (const field of form.fields) {
-            allElements.push({
-                index: field.index,
-                nodeId: 0,
-                selector: field.selector,
-            });
-        }
-        for (const button of form.buttons) {
-            allElements.push({
-                index: button.index,
-                nodeId: 0,
-                selector: button.selector,
-            });
-        }
-    }
-    const navigationId = await cacheManager.getCurrentNavigationId();
-    await cacheManager.set({
-        selector: 'form:auto-discovered',
-        count: allElements.length,
-        nodes: allElements.map((el) => ({
+    const elements = forms.flatMap((form) => [...form.fields, ...form.buttons]);
+    const backendNodeIds = await resolveBackendNodeIds(elements.map((el) => el.selector)).catch((error) => {
+        log.debug(`Form fields not cached by node: ${getErrorMessage(error)}`);
+        return [];
+    });
+    await QueryCacheManager.getInstance().set({
+        selector: FORM_DISCOVERY_CACHE_SELECTOR,
+        count: elements.length,
+        nodes: elements.map((el, i) => ({
             index: el.index,
-            nodeId: el.nodeId,
-            tag: 'input',
-            preview: el.selector,
+            nodeId: backendNodeIds[i] ?? 0,
+            selector: el.selector,
         })),
-        ...(navigationId !== null && { navigationId }),
     });
-    log.debug(`Cached ${allElements.length} form elements`);
-}
-/**
- * Execute CDP connection lifecycle for form discovery.
- *
- * @param fn - Function to execute with CDP connection
- * @returns Result from function
- */
-async function withCDPConnection(fn) {
-    const { CDPConnection } = await import('../../connection/cdp.js');
-    const { validateActiveSession, getValidatedSessionMetadata, verifyTargetExists } = await import('../../commands/dom/evalHelpers.js');
-    validateActiveSession();
-    const metadata = getValidatedSessionMetadata();
-    if (!metadata.port) {
-        throw new CommandError('Session metadata missing port', { suggestion: 'Restart the session with: bdg stop && bdg <url>' }, EXIT_CODES.SESSION_FILE_ERROR);
-    }
-    await verifyTargetExists(metadata, metadata.port);
-    const cdp = new CDPConnection();
-    if (!metadata.webSocketDebuggerUrl) {
-        throw new CommandError('Session metadata missing webSocketDebuggerUrl', { suggestion: 'Start a new session with: bdg <url>' }, EXIT_CODES.SESSION_FILE_ERROR);
-    }
-    await cdp.connect(metadata.webSocketDebuggerUrl);
-    try {
-        return await fn(cdp);
-    }
-    finally {
-        cdp.close();
-    }
+    log.debug(`Cached ${elements.length} form elements`);
 }
 /**
  * Handle form discovery command.
@@ -387,39 +269,67 @@ async function withCDPConnection(fn) {
  */
 async function handleFormCommand(options) {
     await runCommand(async () => {
-        return await withCDPConnection(async (cdp) => {
-            const rawData = await executeFormDiscovery(cdp);
-            if (rawData.forms.length === 0) {
-                const err = noFormsFoundError();
-                return {
-                    success: false,
-                    error: err.message,
-                    exitCode: EXIT_CODES.NO_FORMS_FOUND,
-                    errorContext: { suggestion: err.suggestion },
-                };
-            }
-            const iframeForm = rawData.forms.find((f) => f.inIframe);
-            if (iframeForm && rawData.forms.length === 1) {
-                const err = formInIframeError(iframeForm.iframeUrl ?? 'unknown', iframeForm.crossOrigin ?? false);
-                return {
-                    success: false,
-                    error: err.message,
-                    exitCode: EXIT_CODES.FORM_IN_IFRAME,
-                    errorContext: { suggestion: err.suggestion },
-                };
-            }
-            const allForms = rawData.forms.map(transformForm);
-            const forms = options.all ? allForms : [allForms[0]];
-            // Cache ALL forms so global indices work with bdg dom fill/click
-            await cacheFormElements(allForms);
-            const result = {
-                formCount: rawData.forms.length,
-                selectedForm: 0,
-                forms,
-                brief: options.brief,
+        const response = await domFormDiscover();
+        if (response.status === 'error' || !response.data) {
+            return {
+                success: false,
+                error: response.error ?? 'Form discovery failed',
+                exitCode: response.exitCode ?? EXIT_CODES.SOFTWARE_ERROR,
+                ...(response.suggestion && { errorContext: { suggestion: response.suggestion } }),
+            };
+        }
+        const rawData = response.data;
+        const frameForm = rawData.frameForms?.[0];
+        if (rawData.forms.length === 0 && frameForm) {
+            const err = formInIframeError(frameForm.url, false);
+            return {
+                success: false,
+                error: err.message,
+                exitCode: EXIT_CODES.FORM_IN_IFRAME,
+                errorContext: { suggestion: err.suggestion },
+            };
+        }
+        if (rawData.forms.length === 0) {
+            const err = noFormsFoundError(rawData.readyState);
+            return {
+                success: false,
+                error: err.message,
+                exitCode: EXIT_CODES.NO_FORMS_FOUND,
+                errorContext: { suggestion: err.suggestion },
             };
-            return { success: true, data: result };
-        });
+        }
+        const iframeForm = rawData.forms.find((f) => f.inIframe);
+        if (iframeForm && rawData.forms.length === 1) {
+            const err = formInIframeError(iframeForm.iframeUrl ?? 'unknown', iframeForm.crossOrigin ?? false);
+            return {
+                success: false,
+                error: err.message,
+                exitCode: EXIT_CODES.FORM_IN_IFRAME,
+                errorContext: { suggestion: err.suggestion },
+            };
+        }
+        const allForms = orderForms(rawData.forms).map(transformForm);
+        const forms = options.all ? allForms : [allForms[0]];
+        // Cache ALL forms so global indices work with bdg dom fill/click
+        await cacheFormElements(allForms);
+        const result = {
+            formCount: rawData.forms.length,
+            selectedForm: 0,
+            forms,
+            ...(!options.all && {
+                otherForms: allForms.slice(1).map((form) => ({
+                    index: form.index,
+                    name: form.name,
+                    fieldCount: form.hidden
+                        ? form.fields.length
+                        : form.fields.filter((field) => !field.hidden).length,
+                    hidden: form.hidden,
+                    inDialog: form.inDialog,
+                })),
+            }),
+            brief: options.brief,
+        };
+        return { success: true, data: result };
     }, options, formatFormDiscovery);
 }
 /**

package/dist/commands/dom/formInteraction.d.ts

@@ -1,7 +1,12 @@
 /**
  * Form interaction commands for filling inputs, clicking buttons, and submitting forms.
+ *
+ * These commands delegate the CDP work to the daemon via IPC. The CLI
+ * never opens its own CDP connection — the daemon owns the single persistent
+ * CDP session and runs the full fill/click/submit sequence (including event
+ * subscriptions for network-stability waits) on behalf of the CLI.
  */
-import type { Command } from 'commander';
+import { type Command } from 'commander';
 /**
  * Register form interaction commands.
  *