browser-debugger-cli 0.7.2 → 0.9.0

package/dist/commands/dom/formInteraction.js

@@ -1,54 +1,38 @@
 /**
  * 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 { DomElementResolver } from '../../commands/dom/DomElementResolver.js';
-import { fillElement, clickElement, pressKeyElement, scrollPage, waitForActionStability, } from '../../commands/dom/formFillHelpers.js';
-import { submitForm } from '../../commands/dom/formSubmitHelpers.js';
-import { runCommand } from '../../commands/shared/CommandRunner.js';
-import { jsonOption } from '../../commands/shared/commonOptions.js';
-import { CommandError } from '../../ui/errors/index.js';
+import { InvalidArgumentError } from 'commander';
+import { runElementCommand } from './helpers/runElementCommand.js';
+import { runCommand } from '../shared/CommandRunner.js';
+import { jsonOption } from '../shared/commonOptions.js';
+import { integerOption } from '../shared/validation.js';
+import { CommandError } from '../../errors/index.js';
+import { VIA_LABEL_SUFFIX, conflictingOptionsMessage, indexSourceText, internalError, scrollOptionsError, } from '../../errors/messages.js';
+import { domClick, domFill, domPressKey, domScroll, domSubmit } from '../../ipc/client.js';
+import { findUnknownModifiers } from '../../runtime/dom/keyMapping.js';
+import { formatTriggeredRequestLines, formatTriggeredRequestsTitle, } from '../../ui/formatters/triggeredRequests.js';
 import { OutputFormatter } from '../../ui/formatting.js';
-import { sessionMetadataMissingError, internalError } from '../../ui/messages/errors.js';
+import { CLICK_RESULT_WAIT_HELP, POINTER_ACTION_DONE, actionStatusLine, dialogConsoleText, newMessageText, pageNavigationText, } from '../../ui/messages/commands.js';
+import { sessionCommand } from '../../ui/messages/sessionCommand.js';
 import { EXIT_CODES } from '../../utils/exitCodes.js';
-import { filterDefined } from '../../utils/objects.js';
 /**
- * Execute a function with an active CDP connection.
- *
- * Handles the full connection lifecycle:
- * 1. Validates active session
- * 2. Gets session metadata
- * 3. Verifies target exists
- * 4. Creates and connects CDP
- * 5. Executes callback
- * 6. Closes CDP connection (even on error)
- *
- * @param fn - Callback to execute with CDP connection
- * @returns Result from callback
- * @throws Error if session validation or connection fails
+ * Commander parser for `--modifiers`: rejects unknown names instead of
+ * silently pressing the bare key.
  *
- * @internal
+ * @param value - Comma-separated modifier names
+ * @returns The value, unchanged
  */
-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) {
-        const err = sessionMetadataMissingError('webSocketDebuggerUrl');
-        throw new CommandError(err.message, { suggestion: err.suggestion }, EXIT_CODES.SESSION_FILE_ERROR);
-    }
-    await cdp.connect(metadata.webSocketDebuggerUrl);
-    try {
-        return await fn(cdp, metadata);
-    }
-    finally {
-        cdp.close();
+function modifiersOption(value) {
+    const [unknown] = findUnknownModifiers(value);
+    if (unknown !== undefined) {
+        throw new InvalidArgumentError(`Unknown modifier "${unknown}" (use shift, ctrl, alt, meta)`);
     }
+    return value;
 }
 /**
  * Register form interaction commands.
@@ -71,409 +55,382 @@ export function registerFormInteractionCommands(program) {
         .command('fill')
         .description('Fill a form field with a value (React-compatible, waits for stability)')
         .argument('<selectorOrIndex>', 'CSS selector or numeric index from query results (0-based)')
-        .argument('<value>', 'Value to fill')
-        .option('--index <n>', 'Element index if selector matches multiple (0-based)', parseInt)
+        .argument('<value>', 'Value to fill (file inputs: paths separated by commas, "" clears)')
+        .option('--index <n>', 'Element index if selector matches multiple (0-based)', integerOption(0))
         .option('--no-blur', 'Do not blur after filling (keeps focus on element)')
         .option('--no-wait', 'Skip waiting for network stability after fill')
         .addOption(jsonOption())
         .action(async (selectorOrIndex, value, options) => {
-        await runCommand(async () => {
-            const target = await DomElementResolver.getInstance().resolve(selectorOrIndex, options.index);
-            if (!target.success) {
-                return {
-                    success: false,
-                    error: target.error ?? 'Failed to resolve element target',
-                    exitCode: target.exitCode ?? EXIT_CODES.INVALID_ARGUMENTS,
-                    ...(target.suggestion && { errorContext: { suggestion: target.suggestion } }),
-                };
-            }
-            return await withCDPConnection(async (cdp) => {
-                const fillOptions = filterDefined({
-                    index: target.index,
-                    blur: options.blur,
-                });
-                const result = await fillElement(cdp, target.selector, value, fillOptions);
-                if (!result.success) {
-                    return {
-                        success: false,
-                        error: result.error ?? 'Failed to fill element',
-                        exitCode: result.error?.includes('not found')
-                            ? EXIT_CODES.RESOURCE_NOT_FOUND
-                            : EXIT_CODES.INVALID_ARGUMENTS,
-                        errorContext: {
-                            suggestion: result.suggestion ??
-                                'Verify the selector matches a fillable element (input, textarea, select)',
-                        },
-                    };
-                }
-                if (options.wait !== false) {
-                    await waitForActionStability(cdp);
-                }
-                return { success: true, data: result };
-            });
-        }, options, formatFillOutput);
+        await runCommand(() => runElementCommand({
+            selectorOrIndex,
+            index: options.index,
+            buildRequest: (target) => ({
+                ...target,
+                value,
+                cwd: process.cwd(),
+                ...(options.blur !== undefined && { blur: options.blur }),
+                wait: options.wait !== false,
+            }),
+            call: domFill,
+            command: 'fill',
+            action: 'fill element',
+            failureSuggestion: 'Verify the selector matches a fillable element (input, textarea, select)',
+        }), options, formatFillOutput);
     });
     domCommand
         .command('click')
         .description('Click an element and wait for stability (accepts selector or index)')
         .argument('<selectorOrIndex>', 'CSS selector or numeric index from query results (0-based)')
-        .option('--index <n>', 'Element index if selector matches multiple (0-based)', parseInt)
+        .option('--index <n>', 'Element index if selector matches multiple (0-based)', integerOption(0))
+        .option('--double', 'Double-click')
+        .option('--right', 'Right-click (opens the context menu)')
         .option('--no-wait', 'Skip waiting for network stability after click')
         .addOption(jsonOption())
+        .addHelpText('after', CLICK_RESULT_WAIT_HELP)
+        .action(async (selectorOrIndex, options) => {
+        const action = options.double ? 'double' : options.right ? 'right' : 'click';
+        await runPointerCommand(selectorOrIndex, options, action);
+    });
+    domCommand
+        .command('hover')
+        .description('Move the mouse over an element (shows hover menus and tooltips)')
+        .argument('<selectorOrIndex>', 'CSS selector or numeric index from query results (0-based)')
+        .option('--index <n>', 'Element index if selector matches multiple (0-based)', integerOption(0))
+        .option('--no-wait', 'Skip waiting for network stability after hovering')
+        .addOption(jsonOption())
         .action(async (selectorOrIndex, options) => {
-        await runCommand(async () => {
-            const target = await DomElementResolver.getInstance().resolve(selectorOrIndex, options.index);
-            if (!target.success) {
-                return {
-                    success: false,
-                    error: target.error ?? 'Failed to resolve element target',
-                    exitCode: target.exitCode ?? EXIT_CODES.INVALID_ARGUMENTS,
-                    ...(target.suggestion && { errorContext: { suggestion: target.suggestion } }),
-                };
-            }
-            return await withCDPConnection(async (cdp) => {
-                const clickOptions = filterDefined({
-                    index: target.index,
-                });
-                const result = await clickElement(cdp, target.selector, clickOptions);
-                if (!result.success) {
-                    return {
-                        success: false,
-                        error: result.error ?? 'Failed to click element',
-                        exitCode: result.error?.includes('not found')
-                            ? EXIT_CODES.RESOURCE_NOT_FOUND
-                            : EXIT_CODES.INVALID_ARGUMENTS,
-                        errorContext: {
-                            suggestion: result.suggestion ?? 'Verify the selector matches a clickable element',
-                        },
-                    };
-                }
-                if (options.wait !== false) {
-                    await waitForActionStability(cdp);
-                }
-                return { success: true, data: result };
-            });
-        }, options, formatClickOutput);
+        await runPointerCommand(selectorOrIndex, options, 'hover');
     });
     domCommand
         .command('submit')
         .description('Submit a form by clicking submit button and waiting for completion')
         .argument('<selectorOrIndex>', 'CSS selector or numeric index from query results (0-based)')
-        .option('--index <n>', 'Element index if selector matches multiple (0-based)', parseInt)
+        .option('--index <n>', 'Element index if selector matches multiple (0-based)', integerOption(0))
         .option('--wait-navigation', 'Wait for page navigation after submit')
-        .option('--wait-network <ms>', 'Wait for network idle after submit (milliseconds)', '1000')
-        .option('--timeout <ms>', 'Maximum time to wait (milliseconds)', '10000')
+        .option('--wait-network <ms>', 'Wait for network idle after submit (milliseconds)', integerOption(0), 1000)
+        .option('--timeout <ms>', 'Maximum time to wait (milliseconds)', integerOption(1), 10000)
         .addOption(jsonOption())
+        .addHelpText('after', CLICK_RESULT_WAIT_HELP)
         .action(async (selectorOrIndex, options) => {
-        await runCommand(async () => {
-            const target = await DomElementResolver.getInstance().resolve(selectorOrIndex, options.index);
-            if (!target.success) {
-                return {
-                    success: false,
-                    error: target.error ?? 'Failed to resolve element target',
-                    exitCode: target.exitCode ?? EXIT_CODES.INVALID_ARGUMENTS,
-                    ...(target.suggestion && { errorContext: { suggestion: target.suggestion } }),
-                };
-            }
-            return await withCDPConnection(async (cdp) => {
-                const submitOptions = filterDefined({
-                    index: target.index,
+        await runCommand(() => runElementCommand({
+            selectorOrIndex,
+            index: options.index,
+            buildRequest: (target) => ({
+                ...target,
+                ...(options.waitNavigation !== undefined && {
                     waitNavigation: options.waitNavigation,
-                    waitNetwork: parseInt(options.waitNetwork, 10),
-                    timeout: parseInt(options.timeout, 10),
-                });
-                const result = await submitForm(cdp, target.selector, submitOptions);
-                if (!result.success) {
-                    return {
-                        success: false,
-                        error: result.error ?? 'Failed to submit form',
-                        exitCode: result.error?.includes('not found')
-                            ? EXIT_CODES.RESOURCE_NOT_FOUND
-                            : result.error?.includes('Timeout')
-                                ? EXIT_CODES.CDP_TIMEOUT
-                                : EXIT_CODES.INVALID_ARGUMENTS,
-                        errorContext: {
-                            suggestion: result.suggestion ?? 'Verify the selector matches a form or submit button',
-                        },
-                    };
-                }
-                return { success: true, data: result };
-            });
-        }, options, formatSubmitOutput);
+                }),
+                waitNetwork: options.waitNetwork,
+                timeout: options.timeout,
+            }),
+            call: domSubmit,
+            command: 'submit',
+            action: 'submit form',
+            failureSuggestion: 'Verify the selector matches a form or submit button',
+        }), options, formatSubmitOutput);
     });
     domCommand
         .command('pressKey')
         .description('Press a key on an element (for Enter-to-submit, keyboard navigation)')
         .argument('<selectorOrIndex>', 'CSS selector or numeric index from query results (0-based)')
         .argument('<key>', 'Key to press (Enter, Tab, Escape, Space, ArrowUp, etc.)')
-        .option('--index <n>', 'Element index if selector matches multiple (0-based)', parseInt)
-        .option('--times <n>', 'Press key multiple times (default: 1)', parseInt)
-        .option('--modifiers <mods>', 'Modifier keys: shift,ctrl,alt,meta (comma-separated)')
+        .option('--index <n>', 'Element index if selector matches multiple (0-based)', integerOption(0))
+        .option('--times <n>', 'Press key multiple times (default: 1)', integerOption(1, 1000))
+        .option('--modifiers <mods>', 'Modifier keys: shift,ctrl,alt,meta (comma-separated; aliases cmd, control, option)', modifiersOption)
         .option('--no-wait', 'Skip waiting for network stability after key press')
         .addOption(jsonOption())
         .action(async (selectorOrIndex, key, options) => {
-        await runCommand(async () => {
-            const target = await DomElementResolver.getInstance().resolve(selectorOrIndex, options.index);
-            if (!target.success) {
-                return {
-                    success: false,
-                    error: target.error ?? 'Failed to resolve element target',
-                    exitCode: target.exitCode ?? EXIT_CODES.INVALID_ARGUMENTS,
-                    ...(target.suggestion && { errorContext: { suggestion: target.suggestion } }),
-                };
-            }
-            return await withCDPConnection(async (cdp) => {
-                const pressKeyOptions = filterDefined({
-                    index: target.index,
-                    times: options.times,
-                    modifiers: options.modifiers,
-                });
-                const result = await pressKeyElement(cdp, target.selector, key, pressKeyOptions);
-                if (!result.success) {
-                    return {
-                        success: false,
-                        error: result.error ?? 'Failed to press key',
-                        exitCode: result.error?.includes('not found')
-                            ? EXIT_CODES.RESOURCE_NOT_FOUND
-                            : EXIT_CODES.INVALID_ARGUMENTS,
-                        errorContext: {
-                            suggestion: result.suggestion ?? 'Verify the selector matches a focusable element',
-                        },
-                    };
-                }
-                if (options.wait !== false) {
-                    await waitForActionStability(cdp);
-                }
-                return { success: true, data: result };
-            });
-        }, options, formatPressKeyOutput);
+        await runCommand(() => runElementCommand({
+            selectorOrIndex,
+            index: options.index,
+            buildRequest: (target) => ({
+                ...target,
+                key,
+                ...(options.times !== undefined && { times: options.times }),
+                ...(options.modifiers !== undefined && { modifiers: options.modifiers }),
+                wait: options.wait !== false,
+            }),
+            call: domPressKey,
+            command: 'pressKey',
+            action: 'press key',
+            failureSuggestion: 'Verify the selector matches a focusable element',
+        }), options, formatPressKeyOutput);
     });
     domCommand
         .command('scroll')
         .description('Scroll page to element, by pixels, or to page boundaries')
-        .argument('[selector]', 'CSS selector to scroll into view (optional)')
-        .option('--index <n>', 'Element index if selector matches multiple (0-based)', parseInt)
-        .option('--down <pixels>', 'Scroll down by pixels', parseInt)
-        .option('--up <pixels>', 'Scroll up by pixels', parseInt)
-        .option('--left <pixels>', 'Scroll left by pixels', parseInt)
-        .option('--right <pixels>', 'Scroll right by pixels', parseInt)
+        .argument('[selector]', 'CSS selector or index from query results to scroll into view (optional)')
+        .option('--index <n>', 'Element index if selector matches multiple (0-based)', integerOption(0))
+        .option('--down <pixels>', 'Scroll down by pixels', integerOption(0))
+        .option('--up <pixels>', 'Scroll up by pixels', integerOption(0))
+        .option('--left <pixels>', 'Scroll left by pixels', integerOption(0))
+        .option('--right <pixels>', 'Scroll right by pixels', integerOption(0))
         .option('--top', 'Scroll to page top')
         .option('--bottom', 'Scroll to page bottom')
         .option('--no-wait', 'Skip waiting for lazy-loaded content after scroll')
         .addOption(jsonOption())
         .action(async (selector, options) => {
-        await runCommand(async () => {
-            // Validate --index requires selector
-            if (options.index !== undefined && !selector) {
-                return {
-                    success: false,
-                    error: '--index requires a selector',
-                    exitCode: EXIT_CODES.INVALID_ARGUMENTS,
-                    errorContext: {
-                        suggestion: 'Use: bdg dom scroll "selector" --index 2',
-                    },
-                };
-            }
-            // Validate conflicting scroll directions
-            const hasConflictingVertical = options.down !== undefined && options.up !== undefined;
-            const hasConflictingHorizontal = options.left !== undefined && options.right !== undefined;
-            if (hasConflictingVertical || hasConflictingHorizontal) {
-                return {
-                    success: false,
-                    error: 'Conflicting scroll directions specified',
-                    exitCode: EXIT_CODES.INVALID_ARGUMENTS,
-                    errorContext: {
-                        suggestion: hasConflictingVertical
-                            ? 'Use either --down or --up, not both'
-                            : 'Use either --left or --right, not both',
-                    },
-                };
-            }
-            const hasOffsetOrPosition = options.down !== undefined ||
-                options.up !== undefined ||
-                options.left !== undefined ||
-                options.right !== undefined ||
-                options.top === true ||
-                options.bottom === true;
-            if (!selector && !hasOffsetOrPosition) {
-                return {
-                    success: false,
-                    error: 'No scroll target specified',
-                    exitCode: EXIT_CODES.INVALID_ARGUMENTS,
-                    errorContext: {
-                        suggestion: 'Provide a selector (bdg dom scroll "footer") or offset (--down 500, --bottom)',
-                    },
-                };
-            }
-            return await withCDPConnection(async (cdp) => {
-                const scrollOptions = filterDefined({
-                    index: options.index,
-                    down: options.down,
-                    up: options.up,
-                    left: options.left,
-                    right: options.right,
-                    top: options.top,
-                    bottom: options.bottom,
-                });
-                const result = await scrollPage(cdp, selector, scrollOptions);
-                if (!result.success) {
-                    return {
-                        success: false,
-                        error: result.error ?? 'Failed to scroll',
-                        exitCode: result.exitCode ?? EXIT_CODES.INVALID_ARGUMENTS,
-                        errorContext: {
-                            suggestion: result.suggestion ?? 'Verify the selector exists on the page',
-                        },
-                    };
-                }
-                if (options.wait !== false) {
-                    await waitForActionStability(cdp);
-                }
-                return { success: true, data: result };
-            });
-        }, options, formatScrollOutput);
+        await runCommand(() => runScroll(selector, options), options, formatScrollOutput);
     });
 }
 /**
- * Format fill command output for human-readable display.
+ * Scroll to an element (selector or cached index) or by offsets/to an edge.
  *
- * @param result - Fill result
- * @returns Formatted string
+ * @param selector - Selector or index argument, if any
+ * @param options - Scroll options
+ * @returns Command result
  */
-function formatFillOutput(result) {
+async function runScroll(selector, options) {
+    const problem = scrollOptionsProblem(selector, options);
+    if (problem) {
+        const err = scrollOptionsError(problem);
+        return {
+            success: false,
+            error: err.message,
+            exitCode: EXIT_CODES.INVALID_ARGUMENTS,
+            errorContext: { suggestion: err.suggestion },
+        };
+    }
+    const request = {
+        ...(options.down !== undefined && { down: options.down }),
+        ...(options.up !== undefined && { up: options.up }),
+        ...(options.left !== undefined && { left: options.left }),
+        ...(options.right !== undefined && { right: options.right }),
+        ...(options.top !== undefined && { top: options.top }),
+        ...(options.bottom !== undefined && { bottom: options.bottom }),
+        wait: options.wait !== false,
+    };
+    if (selector) {
+        return runElementCommand({
+            selectorOrIndex: selector,
+            index: options.index,
+            buildRequest: (target) => ({ ...target, ...request }),
+            call: domScroll,
+            command: 'scroll',
+            action: 'scroll',
+            failureSuggestion: 'Verify the selector exists on the page',
+        });
+    }
+    const response = await domScroll(request);
+    const result = response.data;
+    if (response.status === 'error' || !result?.success) {
+        return {
+            success: false,
+            error: result?.error ?? response.error ?? 'Failed to scroll',
+            exitCode: result?.exitCode ?? response.exitCode ?? EXIT_CODES.INVALID_ARGUMENTS,
+            ...((result?.suggestion ?? response.suggestion) && {
+                errorContext: { suggestion: result?.suggestion ?? response.suggestion ?? '' },
+            }),
+        };
+    }
+    const { success: _success, ...data } = result;
+    return { success: true, data };
+}
+/**
+ * The first rule `bdg dom scroll` options break, if any: one target (an
+ * element, or offsets/edges), and no opposite directions.
+ *
+ * @param selector - Selector or index argument
+ * @param options - Scroll options
+ * @returns Problem, or null when the options are valid
+ */
+function scrollOptionsProblem(selector, options) {
+    const vertical = [options.down, options.up, options.top, options.bottom].filter((value) => value !== undefined && value !== false).length;
+    const horizontal = [options.left, options.right].filter((value) => value !== undefined).length;
+    if (options.index !== undefined && !selector)
+        return 'index-without-selector';
+    if (selector && vertical + horizontal > 0)
+        return 'selector-with-offset';
+    if (vertical > 1)
+        return 'vertical';
+    if (horizontal > 1)
+        return 'horizontal';
+    if (!selector && vertical + horizontal === 0)
+        return 'no-target';
+    return null;
+}
+/**
+ * Click, double-click, right-click or hover an element.
+ *
+ * @param selectorOrIndex - Selector or cached index
+ * @param options - Command options
+ * @param action - Pointer action
+ */
+async function runPointerCommand(selectorOrIndex, options, action) {
+    await runCommand(() => options.double && options.right
+        ? Promise.resolve({
+            success: false,
+            error: conflictingOptionsMessage('--double', '--right'),
+            exitCode: EXIT_CODES.INVALID_ARGUMENTS,
+        })
+        : runElementCommand({
+            selectorOrIndex,
+            index: options.index,
+            buildRequest: (target) => ({
+                ...target,
+                wait: options.wait !== false,
+                ...(action !== 'click' && { action }),
+            }),
+            call: domClick,
+            command: action === 'hover' ? 'hover' : 'click',
+            action: action === 'hover' ? 'hover element' : 'click element',
+            failureSuggestion: 'Verify the selector matches a clickable element',
+        }), options, formatClickOutput);
+}
+/**
+ * Build an action's output: the status line ("✓ Element Clicked",
+ * "⚠ Element Clicked (with warnings)" with the warning right below it, or
+ * "⚠ Element Clicked (no visible effect: …)"), the details, what changed on
+ * the page (`Page:` navigation, `New text:` messages), then the network
+ * requests it triggered and the dialogs it caused. No request list is shown
+ * when there were none (JSON has an empty `triggeredRequests` then).
+ *
+ * @param done - What was done, e.g. "Element Clicked"
+ * @param details - Label/value rows
+ * @param result - Action result
+ * @param keyWidth - Width of the labels
+ * @returns Output being built (more can be appended)
+ */
+function formatActionOutput(done, details, result, keyWidth = 15) {
     const fmt = new OutputFormatter();
-    fmt.text('✓ Element Filled');
+    fmt.text(actionStatusLine(done, result.warning !== undefined, result.effect === 'none'));
+    if (result.warning)
+        fmt.text(`⚠ Warning: ${result.warning}`);
     fmt.blank();
-    const details = [
-        ['Selector', result.selector ?? 'unknown'],
-        ['Element Type', result.elementType ?? 'unknown'],
-    ];
-    if (result.inputType) {
-        details.push(['Input Type', result.inputType]);
+    fmt.keyValueList(details, keyWidth);
+    if (result.navigation)
+        fmt.keyValue('Page', pageNavigationText(result.navigation), keyWidth);
+    (result.messages ?? []).forEach((message, index) => {
+        const text = newMessageText(message);
+        if (index === 0)
+            fmt.keyValue('New text', text, keyWidth);
+        else
+            fmt.text(' '.repeat(keyWidth) + text);
+    });
+    const omitted = result.triggeredRequestsOmitted;
+    const requests = formatTriggeredRequestLines(result.triggeredRequests ?? [], omitted);
+    if (requests.length > 0) {
+        fmt
+            .blank()
+            .section(formatTriggeredRequestsTitle(result.triggeredRequests ?? [], omitted), requests);
+    }
+    for (const dialog of result.dialogs ?? []) {
+        fmt.blank();
+        fmt.text(`Dialog: ${dialogConsoleText(dialog)}`);
+    }
+    return fmt;
+}
+/**
+ * Row naming the element an action hit, e.g.
+ * `Element: input.toggle in div.view "Write report"` (just its tag when the
+ * page could not describe it), with the list a numeric index refers to
+ * (`(index 0 of the last dom query "h3")`).
+ *
+ * @param result - Action result
+ * @returns Label/value row
+ */
+function elementRow(result) {
+    const source = result.indexSource ? ` (${indexSourceText(result.indexSource)})` : '';
+    if (result.element === undefined) {
+        return ['Element Type', `${result.elementType ?? 'unknown'}${source}`];
     }
+    const viaLabel = result.elementType?.endsWith(VIA_LABEL_SUFFIX) ? VIA_LABEL_SUFFIX : '';
+    return ['Element', `${result.element}${viaLabel}${source}`];
+}
+/**
+ * Selector row of an action's output; none for an index into a11y query
+ * results, whose "selector" is the a11y pattern (the element row names it).
+ *
+ * @param result - Action result
+ * @returns The row, or none
+ */
+function selectorRows(result) {
+    if (result.indexSource?.command === 'dom a11y query')
+        return [];
+    return [['Selector', result.selector ?? 'unknown']];
+}
+/**
+ * Format fill command output for human-readable display.
+ */
+function formatFillOutput(result) {
+    const details = [...selectorRows(result), elementRow(result)];
+    if (result.inputType)
+        details.push(['Input Type', result.inputType]);
     if (result.checked !== undefined) {
         details.push(['Checked', result.checked ? 'true' : 'false']);
     }
-    else if (result.value) {
-        details.push(['Value', result.value]);
+    else if (result.value !== undefined) {
+        details.push(['Value', result.value === '' ? '(empty)' : result.value]);
     }
-    fmt.keyValueList(details, 15);
-    return fmt.build();
+    return formatActionOutput('Element Filled', details, result).build();
 }
 /**
  * Format click command output for human-readable display.
- *
- * @param result - Click result
- * @returns Formatted string
  */
 function formatClickOutput(result) {
-    const fmt = new OutputFormatter();
-    fmt.text('✓ Element Clicked');
-    fmt.blank();
-    fmt.keyValueList([
-        ['Selector', result.selector ?? 'unknown'],
-        ['Element Type', result.elementType ?? 'unknown'],
-        ['Clickable', result.clickable ? 'yes' : 'no (warning)'],
-    ], 15);
-    if (!result.clickable) {
-        fmt.blank();
-        fmt.text('⚠ Warning: Element may not have a click handler');
-    }
-    return fmt.build();
+    return formatActionOutput(`Element ${POINTER_ACTION_DONE[result.action ?? 'click']}`, [
+        ...selectorRows(result),
+        elementRow(result),
+        ['Method', result.method === 'dom' ? 'DOM events' : 'mouse events'],
+    ], result).build();
 }
 /**
  * Format submit command output for human-readable display.
- *
- * @param result - Submit result
- * @returns Formatted string
  */
 function formatSubmitOutput(result) {
-    const fmt = new OutputFormatter();
-    fmt.text('✓ Form Submitted');
-    fmt.blank();
     const details = [
-        ['Selector', result.selector ?? 'unknown'],
-        ['Clicked', result.clicked ? 'yes' : 'no'],
+        ...selectorRows(result),
+        ...(result.element !== undefined ? [elementRow(result)] : []),
+        ['Submit Button', result.clicked ? 'used' : 'none'],
     ];
-    if (result.networkRequests !== undefined) {
+    if (result.networkRequests !== undefined)
         details.push(['Network Requests', result.networkRequests.toString()]);
-    }
-    if (result.navigationOccurred !== undefined) {
-        details.push(['Navigation', result.navigationOccurred ? 'yes' : 'no']);
-    }
-    if (result.waitTimeMs !== undefined) {
+    if (result.navigationOccurred === false)
+        details.push(['Navigation', 'no']);
+    if (result.navigationOccurred && !result.navigation)
+        details.push(['Navigation', 'yes']);
+    if (result.waitTimeMs !== undefined)
         details.push(['Wait Time', `${result.waitTimeMs}ms`]);
-    }
-    fmt.keyValueList(details, 20);
-    fmt.blank();
-    fmt.text('Next steps:');
-    fmt.section('', [
-        'bdg peek --network --last 10    Check network requests',
-        'bdg console --last 5             Check console messages',
-        'bdg status                       Check session state',
+    const fmt = formatActionOutput('Form Submitted', details, result, 20);
+    fmt.hints('Next steps:', [
+        `${sessionCommand('bdg network list --last 10').padEnd(32)} Check network requests`,
+        `${sessionCommand('bdg console --last 5').padEnd(32)} Check console messages`,
+        `${sessionCommand('bdg status').padEnd(32)} Check session state`,
     ]);
     return fmt.build();
 }
 /**
  * Format pressKey command output for human-readable display.
- *
- * @param result - Press key result
- * @returns Formatted string
  */
 function formatPressKeyOutput(result) {
-    const fmt = new OutputFormatter();
-    fmt.text('✓ Key Pressed');
-    fmt.blank();
     const details = [
         ['Key', result.key ?? 'unknown'],
-        ['Selector', result.selector ?? 'unknown'],
-        ['Element Type', result.elementType ?? 'unknown'],
+        ...selectorRows(result),
+        elementRow(result),
     ];
-    if (result.times && result.times > 1) {
+    if (result.times && result.times > 1)
         details.push(['Times', result.times.toString()]);
-    }
-    if (result.modifiers && result.modifiers > 0) {
-        const mods = [];
-        if (result.modifiers & 1)
-            mods.push('Shift');
-        if (result.modifiers & 2)
-            mods.push('Ctrl');
-        if (result.modifiers & 4)
-            mods.push('Alt');
-        if (result.modifiers & 8)
-            mods.push('Meta');
-        details.push(['Modifiers', mods.join('+')]);
-    }
-    fmt.keyValueList(details, 15);
-    return fmt.build();
+    if (result.modifiers?.length)
+        details.push(['Modifiers', result.modifiers.join('+')]);
+    return formatActionOutput('Key Pressed', details, result).build();
 }
 /**
  * Format scroll command output for human-readable display.
- *
- * @param result - Scroll result
- * @returns Formatted string
  */
 function formatScrollOutput(result) {
-    const fmt = new OutputFormatter();
-    fmt.text('✓ Page Scrolled');
-    fmt.blank();
     const details = [['Scroll Type', result.scrollType]];
-    if (result.selector) {
-        details.push(['Selector', result.selector]);
-    }
-    if (result.scrolledTo) {
+    if (result.selector)
+        details.push(...selectorRows(result));
+    if (result.element)
+        details.push(elementRow(result));
+    if (result.scrolledTo)
         details.push(['Position', `(${result.scrolledTo.x}, ${result.scrolledTo.y})`]);
-    }
-    if (result.scrolledBy && (result.scrolledBy.x !== 0 || result.scrolledBy.y !== 0)) {
+    if (result.scrolledBy && (result.scrolledBy.x !== 0 || result.scrolledBy.y !== 0))
         details.push(['Scrolled By', `(${result.scrolledBy.x}, ${result.scrolledBy.y})`]);
-    }
-    if (result.viewportSize) {
-        details.push(['Viewport', `${result.viewportSize.width}x${result.viewportSize.height}`]);
-    }
-    if (result.pageSize) {
-        details.push(['Page Size', `${result.pageSize.width}x${result.pageSize.height}`]);
-    }
-    fmt.keyValueList(details, 15);
-    return fmt.build();
+    if (result.viewportSize)
+        details.push(['Viewport', `${result.viewportSize.width}×${result.viewportSize.height}`]);
+    if (result.pageSize)
+        details.push(['Page Size', `${result.pageSize.width}×${result.pageSize.height}`]);
+    return formatActionOutput('Page Scrolled', details, result).build();
 }
 //# sourceMappingURL=formInteraction.js.map