browser-debugger-cli 0.7.1 → 0.8.0

package/dist/commands/dom/eval.js

@@ -0,0 +1,43 @@
+/**
+ * `bdg dom eval` — evaluate a JavaScript expression in the page context, or
+ * in one of its iframes with `--frame`.
+ *
+ * CLI-side handler. Actual evaluation happens in the daemon via the
+ * `dom_eval` IPC command so the session's persistent CDP connection is reused.
+ */
+import { runCommand } from '../shared/CommandRunner.js';
+import { emptyScriptError } from '../../errors/messages.js';
+import { domEval } from '../../ipc/client.js';
+import { formatDomEval } from '../../ui/formatters/dom.js';
+import { EXIT_CODES } from '../../utils/exitCodes.js';
+/**
+ * Handle `bdg dom eval <script> [--frame <frame>]`.
+ */
+export async function handleDomEval(script, options) {
+    await runCommand(async () => {
+        if (!script.trim()) {
+            const err = emptyScriptError();
+            return {
+                success: false,
+                error: err.message,
+                exitCode: EXIT_CODES.INVALID_ARGUMENTS,
+                errorContext: { suggestion: err.suggestion },
+            };
+        }
+        const response = await domEval(script, options.frame);
+        if (response.status === 'error' || !response.data) {
+            return {
+                success: false,
+                error: response.error ?? 'Failed to evaluate script',
+                exitCode: response.exitCode ?? EXIT_CODES.CDP_CONNECTION_FAILURE,
+                ...(response.suggestion && { errorContext: { suggestion: response.suggestion } }),
+            };
+        }
+        const { value, type, subtype, frame } = response.data;
+        return {
+            success: true,
+            data: { result: value, type, ...(subtype && { subtype }), ...(frame && { frame }) },
+        };
+    }, options, formatDomEval);
+}
+//# sourceMappingURL=eval.js.map

package/dist/commands/dom/form.js

@@ -4,37 +4,17 @@
  * 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 { 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 +22,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 +105,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 +137,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 +156,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.
  *
@@ -216,9 +187,8 @@ 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) : '',
     };
 }
 /**
@@ -248,10 +218,11 @@ function transformButton(raw) {
  */
 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 editableFields = visibleFields.filter((f) => !f.disabled && !f.readOnly);
+    const requiredFields = editableFields.filter((f) => f.required);
+    const filledFields = editableFields.filter((f) => f.state === 'filled' || f.state === 'checked');
+    const validFields = editableFields.filter((f) => f.validation.valid);
+    const invalidFields = editableFields.filter((f) => !f.validation.valid);
     const emptyRequired = requiredFields.filter((f) => f.state === 'empty' || f.state === 'unchecked');
     const blockers = [];
     for (const field of emptyRequired) {
@@ -282,9 +253,9 @@ function calculateSummary(fields, buttons) {
         });
     }
     return {
-        totalFields: visibleFields.length,
+        totalFields: editableFields.length,
         filledFields: filledFields.length,
-        emptyFields: visibleFields.length - filledFields.length,
+        emptyFields: editableFields.length - filledFields.length,
         validFields: validFields.length,
         invalidFields: invalidFields.length,
         requiredTotal: requiredFields.length,
@@ -318,67 +289,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 +319,63 @@ 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 } }),
             };
-            return { success: true, data: result };
-        });
+        }
+        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();
+            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,
+            ...(!options.all && {
+                otherForms: allForms.slice(1).map((form) => ({
+                    index: form.index,
+                    name: form.name,
+                    fieldCount: form.fields.filter((field) => !field.hidden).length,
+                })),
+            }),
+            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.
  *