browser-debugger-cli 0.7.1 → 0.8.0

package/dist/commands/dom/formInteraction.js

@@ -1,54 +1,37 @@
 /**
  * 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 { DomElementResolver } from './DomElementResolver.js';
+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 { conflictingOptionsMessage, internalError, scrollOptionsError } from '../../errors/messages.js';
+import { domClick, domFill, domPressKey, domScroll, domSubmit } from '../../ipc/client.js';
+import { findUnknownModifiers } from '../../runtime/dom/keyMapping.js';
 import { OutputFormatter } from '../../ui/formatting.js';
-import { sessionMetadataMissingError, internalError } from '../../ui/messages/errors.js';
+import { POINTER_ACTION_DONE, dialogConsoleText } from '../../ui/messages/commands.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,274 +54,242 @@ 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,
+            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())
         .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);
+        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 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())
         .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,
+            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,
+            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) {
+            const problem = scrollOptionsProblem(selector, options);
+            if (problem) {
+                const err = scrollOptionsError(problem);
                 return {
                     success: false,
-                    error: '--index requires a selector',
+                    error: err.message,
                     exitCode: EXIT_CODES.INVALID_ARGUMENTS,
-                    errorContext: {
-                        suggestion: 'Use: bdg dom scroll "selector" --index 2',
-                    },
+                    errorContext: { suggestion: err.suggestion },
                 };
             }
-            // Validate conflicting scroll directions
-            const hasConflictingVertical = options.down !== undefined && options.up !== undefined;
-            const hasConflictingHorizontal = options.left !== undefined && options.right !== undefined;
-            if (hasConflictingVertical || hasConflictingHorizontal) {
+            const target = selector
+                ? await DomElementResolver.getInstance().resolve(selector, options.index)
+                : undefined;
+            if (target && !target.success) {
                 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',
-                    },
+                    error: target.error,
+                    exitCode: target.exitCode,
+                    ...(target.suggestion && { errorContext: { suggestion: target.suggestion } }),
                 };
             }
-            const hasOffsetOrPosition = options.down !== undefined ||
-                options.up !== undefined ||
-                options.left !== undefined ||
-                options.right !== undefined ||
-                options.top === true ||
-                options.bottom === true;
-            if (!selector && !hasOffsetOrPosition) {
+            const response = await domScroll({
+                ...(target && { selector: target.selector }),
+                ...(target?.index !== undefined && { index: target.index }),
+                ...(target?.backendNodeId !== undefined && { backendNodeId: target.backendNodeId }),
+                ...(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 (response.status === 'error' || !response.data) {
                 return {
                     success: false,
-                    error: 'No scroll target specified',
-                    exitCode: EXIT_CODES.INVALID_ARGUMENTS,
+                    error: response.error ?? 'Failed to scroll',
+                    exitCode: response.exitCode ?? EXIT_CODES.INVALID_ARGUMENTS,
+                    ...(response.suggestion && { errorContext: { suggestion: response.suggestion } }),
+                };
+            }
+            const result = response.data;
+            if (!result.success) {
+                return {
+                    success: false,
+                    error: result.error ?? 'Failed to scroll',
+                    exitCode: result.exitCode ?? EXIT_CODES.INVALID_ARGUMENTS,
                     errorContext: {
-                        suggestion: 'Provide a selector (bdg dom scroll "footer") or offset (--down 500, --bottom)',
+                        suggestion: result.suggestion ?? 'Verify the selector exists on the page',
                     },
                 };
             }
-            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 };
-            });
+            const { success: _success, ...data } = result;
+            return { success: true, data };
         }, options, formatScrollOutput);
     });
 }
 /**
- * Format fill command output for human-readable display.
+ * 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,
+            action: action === 'hover' ? 'hover element' : 'click element',
+            failureSuggestion: 'Verify the selector matches a clickable element',
+        }), options, formatClickOutput);
+}
+/**
+ * Add an action's warning and the dialogs it caused to the output.
  *
- * @param result - Fill result
- * @returns Formatted string
+ * @param fmt - Output being built
+ * @param result - Action result
+ */
+function appendNotices(fmt, result) {
+    if (result.warning) {
+        fmt.blank();
+        fmt.text(`⚠ Warning: ${result.warning}`);
+    }
+    for (const dialog of result.dialogs ?? []) {
+        fmt.blank();
+        fmt.text(`Dialog: ${dialogConsoleText(dialog)}`);
+    }
+}
+/**
+ * Format fill command output for human-readable display.
  */
 function formatFillOutput(result) {
     const fmt = new OutputFormatter();
@@ -348,9 +299,8 @@ function formatFillOutput(result) {
         ['Selector', result.selector ?? 'unknown'],
         ['Element Type', result.elementType ?? 'unknown'],
     ];
-    if (result.inputType) {
+    if (result.inputType)
         details.push(['Input Type', result.inputType]);
-    }
     if (result.checked !== undefined) {
         details.push(['Checked', result.checked ? 'true' : 'false']);
     }
@@ -358,34 +308,26 @@ function formatFillOutput(result) {
         details.push(['Value', result.value]);
     }
     fmt.keyValueList(details, 15);
+    appendNotices(fmt, result);
     return fmt.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.text(`✓ Element ${POINTER_ACTION_DONE[result.action ?? 'click']}`);
     fmt.blank();
     fmt.keyValueList([
         ['Selector', result.selector ?? 'unknown'],
         ['Element Type', result.elementType ?? 'unknown'],
-        ['Clickable', result.clickable ? 'yes' : 'no (warning)'],
+        ['Method', result.method === 'dom' ? 'DOM events' : 'mouse events'],
     ], 15);
-    if (!result.clickable) {
-        fmt.blank();
-        fmt.text('⚠ Warning: Element may not have a click handler');
-    }
+    appendNotices(fmt, result);
     return fmt.build();
 }
 /**
  * Format submit command output for human-readable display.
- *
- * @param result - Submit result
- * @returns Formatted string
  */
 function formatSubmitOutput(result) {
     const fmt = new OutputFormatter();
@@ -393,22 +335,18 @@ function formatSubmitOutput(result) {
     fmt.blank();
     const details = [
         ['Selector', result.selector ?? 'unknown'],
-        ['Clicked', result.clicked ? 'yes' : 'no'],
+        ['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) {
+    if (result.navigationOccurred !== undefined)
         details.push(['Navigation', result.navigationOccurred ? 'yes' : 'no']);
-    }
-    if (result.waitTimeMs !== undefined) {
+    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',
+    appendNotices(fmt, result);
+    fmt.hints('Next steps:', [
+        'bdg network list --last 10      Check network requests',
         'bdg console --last 5             Check console messages',
         'bdg status                       Check session state',
     ]);
@@ -416,9 +354,6 @@ function formatSubmitOutput(result) {
 }
 /**
  * Format pressKey command output for human-readable display.
- *
- * @param result - Press key result
- * @returns Formatted string
  */
 function formatPressKeyOutput(result) {
     const fmt = new OutputFormatter();
@@ -429,51 +364,34 @@ function formatPressKeyOutput(result) {
         ['Selector', result.selector ?? 'unknown'],
         ['Element Type', result.elementType ?? 'unknown'],
     ];
-    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('+')]);
-    }
+    if (result.modifiers?.length)
+        details.push(['Modifiers', result.modifiers.join('+')]);
     fmt.keyValueList(details, 15);
+    appendNotices(fmt, result);
     return fmt.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) {
+    if (result.selector)
         details.push(['Selector', result.selector]);
-    }
-    if (result.scrolledTo) {
+    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) {
+    if (result.viewportSize)
         details.push(['Viewport', `${result.viewportSize.width}x${result.viewportSize.height}`]);
-    }
-    if (result.pageSize) {
+    if (result.pageSize)
         details.push(['Page Size', `${result.pageSize.width}x${result.pageSize.height}`]);
-    }
     fmt.keyValueList(details, 15);
+    appendNotices(fmt, result);
     return fmt.build();
 }
 //# sourceMappingURL=formInteraction.js.map