browser-debugger-cli 0.7.1 → 0.8.0

package/dist/ui/formatters/details.js

@@ -1,42 +1,192 @@
-import { OutputFormatter } from '../../ui/formatting.js';
+import { skippedBodyReason } from '../../telemetry/network.js';
+import { formatFramePosition, formatTimestamp } from './console/shared.js';
+import { formatRequestStatus } from './requestStatus.js';
+import { OutputFormatter } from '../formatting.js';
+import { truncateByLength } from '../../utils/strings.js';
+/** Characters of each WebSocket message shown in human output (`--json` has all) */
+const MESSAGE_PREVIEW_LENGTH = 200;
+/** WebSocket opcode of binary messages */
+const BINARY_OPCODE = 2;
 /**
- * Format network request details for human-readable output
+ * Format one WebSocket message as a single line: direction, time, payload.
+ *
+ * @param frame - Captured frame
+ * @returns Line like `↑ 12:00:00.123  hello` (`[truncated]` when the capture was cut)
  */
-export function formatNetworkDetails(request) {
-    const fmt = new OutputFormatter();
-    fmt.text('Network Request Details').separator('━', 70);
-    fmt.keyValueList([
+function formatWebSocketMessage(frame) {
+    const arrow = frame.direction === 'sent' ? '↑' : '↓';
+    const time = formatTimestamp(frame.timestamp);
+    const truncated = frame.truncatedFrom === undefined ? '' : ' [truncated]';
+    const payload = frame.opcode === BINARY_OPCODE
+        ? binaryMessagePreview(frame.payloadData)
+        : textPreview(frame.payloadData);
+    return `  ${arrow} ${time}  ${payload}${truncated}`;
+}
+/**
+ * A message payload on one line, shortened to {@link MESSAGE_PREVIEW_LENGTH}.
+ *
+ * @param text - Payload text
+ * @returns Preview
+ */
+function textPreview(text) {
+    return truncateByLength(text.replace(/\s+/g, ' '), MESSAGE_PREVIEW_LENGTH);
+}
+/**
+ * Describe a binary message, with its text when it is valid UTF-8 without
+ * control characters (many protocols send JSON or text in binary frames).
+ *
+ * @param base64 - Payload as captured (base64)
+ * @returns e.g. `(binary, 42 bytes) {"op":"ping"}` or `(binary, 42 bytes captured)`
+ */
+function binaryMessagePreview(base64) {
+    const bytes = Buffer.from(base64, 'base64');
+    const text = readableText(bytes);
+    return text === undefined
+        ? `(binary, ${bytes.length} bytes captured)`
+        : `(binary, ${bytes.length} bytes) ${textPreview(text)}`;
+}
+/**
+ * The bytes as text, if they are valid UTF-8 and printable.
+ *
+ * @param bytes - Raw bytes
+ * @returns Text, or undefined for binary data
+ */
+function readableText(bytes) {
+    let text;
+    try {
+        text = new TextDecoder('utf-8', { fatal: true }).decode(bytes);
+    }
+    catch {
+        return undefined;
+    }
+    const printable = (char) => {
+        const code = char.charCodeAt(0);
+        return (code >= 0x20 && code !== 0x7f) || char === '\t' || char === '\n' || char === '\r';
+    };
+    return text.length > 0 && Array.from(text).every(printable) ? text : undefined;
+}
+/**
+ * Add the messages of a WebSocket connection.
+ *
+ * @param fmt - Formatter to add to
+ * @param webSocket - Connection messages and lifecycle
+ */
+function addWebSocketMessages(fmt, webSocket) {
+    const state = webSocket.closedTime
+        ? `closed at ${new Date(webSocket.closedTime).toISOString()}`
+        : 'open';
+    fmt.blank();
+    fmt.text(`WebSocket Messages (${webSocket.frames.length}, ${state}):`).separator('━', 70);
+    webSocket.frames.forEach((frame) => fmt.text(formatWebSocketMessage(frame)));
+}
+/** Characters of a text body shown in human output (`--json` has all of it) */
+const BODY_PREVIEW_LENGTH = 20000;
+/**
+ * Format a byte count for humans.
+ *
+ * @param bytes - Byte count
+ * @returns e.g. "512 B", "12.3 KB"
+ */
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    return bytes < 1024 * 1024
+        ? `${(bytes / 1024).toFixed(1)} KB`
+        : `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+/**
+ * Summary rows of a request: identity, outcome, timing and size.
+ *
+ * @param request - Captured request
+ * @returns Label/value rows
+ */
+function requestSummaryRows(request) {
+    const rows = [
         ['Request ID', request.requestId],
         ['URL', request.url],
         ['Method', request.method],
-        ['Status', request.status?.toString() ?? 'pending'],
+        ['Status', formatRequestStatus(request)],
         ['Resource Type', request.resourceType ?? 'N/A'],
         ['MIME Type', request.mimeType ?? 'N/A'],
-    ], 13);
+        ['Started', formatTimestamp(request.timestamp)],
+        ['Duration', request.duration === undefined ? 'pending' : `${Math.round(request.duration)} ms`],
+    ];
+    if (request.encodedDataLength !== undefined) {
+        const decoded = request.decodedBodyLength;
+        const sizes = [`${formatBytes(request.encodedDataLength)} transferred`];
+        if (decoded !== undefined)
+            sizes.push(`${formatBytes(decoded)} body`);
+        rows.push(['Size', sizes.join(', ')]);
+    }
+    if (request.fromCache)
+        rows.push(['From Cache', 'yes']);
+    if (request.serverIPAddress)
+        rows.push(['Remote Address', request.serverIPAddress]);
+    if (request.blockedReason)
+        rows.push(['Blocked', request.blockedReason]);
+    return rows;
+}
+/**
+ * Add a header block.
+ *
+ * @param fmt - Formatter
+ * @param title - Block title
+ * @param headers - Headers to list
+ */
+function addHeaders(fmt, title, headers) {
+    fmt.text(title).separator('━', 70);
+    Object.entries(headers).forEach(([key, value]) => fmt.text(`  ${key}: ${value}`));
     fmt.blank();
-    if (request.requestHeaders) {
-        fmt.text('Request Headers:').separator('━', 70);
-        Object.entries(request.requestHeaders).forEach(([key, value]) => {
-            fmt.text(`  ${key}: ${value}`);
-        });
-        fmt.blank();
+}
+/**
+ * Describe a response body for humans: binary and skipped bodies are
+ * summarized, long text is cut (the JSON output has everything).
+ *
+ * @param request - Captured request with a body
+ * @returns Body text
+ */
+function describeResponseBody(request) {
+    const skipped = skippedBodyReason(request.responseBody);
+    if (skipped !== undefined)
+        return `(not captured: ${skipped})`;
+    if (request.responseBodyBase64) {
+        return `(binary, ${request.decodedBodyLength ?? 0} bytes; base64 in --json and HAR export)`;
     }
+    const body = request.responseBody;
+    if (body.length <= BODY_PREVIEW_LENGTH)
+        return body;
+    return `${body.slice(0, BODY_PREVIEW_LENGTH)}\n… ${body.length - BODY_PREVIEW_LENGTH} more characters (full body: bdg details network ${request.requestId} --json)`;
+}
+/**
+ * Format network request details for human-readable output.
+ *
+ * @param request - Captured request
+ * @returns Formatted details
+ */
+export function formatNetworkDetails(request) {
+    const fmt = new OutputFormatter();
+    fmt.text('Network Request Details').separator('━', 70);
+    fmt.keyValueList(requestSummaryRows(request));
+    fmt.blank();
+    if (request.requestHeaders)
+        addHeaders(fmt, 'Request Headers:', request.requestHeaders);
     if (request.requestBody) {
         fmt.text('Request Body:').separator('━', 70);
         fmt.text(request.requestBody);
         fmt.blank();
     }
-    if (request.responseHeaders) {
-        fmt.text('Response Headers:').separator('━', 70);
-        Object.entries(request.responseHeaders).forEach(([key, value]) => {
-            fmt.text(`  ${key}: ${value}`);
-        });
-        fmt.blank();
+    if (request.responseHeaders)
+        addHeaders(fmt, 'Response Headers:', request.responseHeaders);
+    if (request.bodyNotCaptured) {
+        fmt.text('Response Body:').separator('━', 70);
+        fmt.text(`(not captured: ${request.bodyNotCaptured})`);
     }
-    if (request.responseBody) {
+    else if (request.responseBody) {
         fmt.text('Response Body:').separator('━', 70);
-        fmt.text(request.responseBody);
+        fmt.text(describeResponseBody({ ...request, responseBody: request.responseBody }));
     }
+    if (request.webSocket)
+        addWebSocketMessages(fmt, request.webSocket);
     return fmt.build();
 }
 /**
@@ -47,10 +197,19 @@ export function formatConsoleDetails(message) {
     fmt.text('Console Message Details').separator('━', 70);
     fmt.keyValueList([
         ['Type', message.type],
-        ['Timestamp', new Date(message.timestamp).toISOString()],
+        ['Time', formatTimestamp(message.timestamp)],
+        ...(message.source ? [['Source', message.source]] : []),
         ['Text', message.text],
-    ], 12);
+    ]);
     fmt.blank();
+    if (message.stackTrace && message.stackTrace.length > 0) {
+        fmt.text('Stack Trace:').separator('━', 70);
+        message.stackTrace.forEach((frame) => {
+            const name = frame.functionName?.length ? frame.functionName : '(anonymous)';
+            fmt.text(`  at ${name} (${formatFramePosition(frame)})`);
+        });
+        fmt.blank();
+    }
     if (message.args && message.args.length > 0) {
         fmt.text('Arguments:').separator('━', 70);
         message.args.forEach((arg, idx) => {

package/dist/ui/formatters/dom.d.ts

@@ -1,9 +1,12 @@
+import type { DomFrame } from '../../ipc/protocol/commands.js';
 import type { DomQueryResult, DomGetResult, ScreenshotResult } from '../../types.js';
 /**
  * Format DOM query results for human-readable output.
  *
- * Displays found nodes with their index, tag, classes, and preview text.
- * Shows helpful message when no nodes are found.
+ * Displays found nodes with their index, tag, classes, and preview text,
+ * up to {@link QUERY_DISPLAY_LIMIT} of them (no match is an error, exit 83).
+ * The text extraction hint is left out for selectors with text or visibility
+ * filters, which `document.querySelectorAll` does not understand.
  *
  * @param data - DOM query result containing selector, count, and matching nodes
  * @returns Formatted output string
@@ -50,17 +53,18 @@ export declare function formatDomQuery(data: DomQueryResult): string;
  *   ]
  * });
  * // Output:
- * // [1] <div class="error">Error 1</div>
- * // [2] <span class="error">Error 2</span>
+ * // [0] <div class="error">Error 1</div>
+ * // [1] <span class="error">Error 2</span>
  * ```
  */
 export declare function formatDomGet(data: DomGetResult): string;
 /**
  * Format DOM eval results for human-readable output.
  *
- * Outputs the evaluated JavaScript result as formatted JSON.
+ * Outputs the evaluated JavaScript result as formatted JSON, preceded by a
+ * `Frame: <url>` line when it ran in an iframe (`--frame`).
  *
- * @param data - DOM eval result containing the evaluated value
+ * @param data - DOM eval result containing the evaluated value (and its frame)
  * @returns Formatted JSON string
  *
  * @example
@@ -78,6 +82,23 @@ export declare function formatDomGet(data: DomGetResult): string;
  */
 export declare function formatDomEval(data: {
     result: unknown;
+    type?: string;
+    frame?: string;
+}): string;
+/**
+ * Format the page's iframes, one per line.
+ *
+ * @param data - Frames from `bdg dom frames`
+ * @returns Formatted list
+ *
+ * @example
+ * ```
+ * [0] http://localhost:3000/widget  name=widget  same-origin
+ * [1] https://pay.example/  #checkout  cross-origin, out-of-process
+ * ```
+ */
+export declare function formatDomFrames(data: {
+    frames: DomFrame[];
 }): string;
 /**
  * Format screenshot capture result for human-readable display.

package/dist/ui/formatters/dom.js

@@ -1,9 +1,28 @@
-import { OutputFormatter } from '../../ui/formatting.js';
+import { OutputFormatter } from '../formatting.js';
+import { evalFrameLine, frameLabel, moreMatchesNote, noFramesMessage, } from '../messages/commands.js';
+import { parseSelectorFilters } from '../../utils/selectorFilters.js';
+/** Matches listed in human output (JSON has all of them) */
+const QUERY_DISPLAY_LIMIT = 50;
+/**
+ * A shell-quoted `dom eval` script reading the text (or a field's value) of
+ * the n-th match in the main document, as rendered (null for matches inside iframes or
+ * shadow roots, which `document.querySelectorAll` does not reach).
+ *
+ * @param selector - CSS selector
+ * @param index - Match to read
+ * @returns Single-quoted script, safe to paste into a shell
+ */
+function textExtractionScript(selector, index) {
+    const script = `(el => el && (el.value ?? el.innerText))(document.querySelectorAll(${JSON.stringify(selector)})[${index}])`;
+    return `'${script.replace(/'/g, `'\\''`)}'`;
+}
 /**
  * Format DOM query results for human-readable output.
  *
- * Displays found nodes with their index, tag, classes, and preview text.
- * Shows helpful message when no nodes are found.
+ * Displays found nodes with their index, tag, classes, and preview text,
+ * up to {@link QUERY_DISPLAY_LIMIT} of them (no match is an error, exit 83).
+ * The text extraction hint is left out for selectors with text or visibility
+ * filters, which `document.querySelectorAll` does not understand.
  *
  * @param data - DOM query result containing selector, count, and matching nodes
  * @returns Formatted output string
@@ -27,31 +46,31 @@ import { OutputFormatter } from '../../ui/formatting.js';
 export function formatDomQuery(data) {
     const { count, nodes, selector } = data;
     const fmt = new OutputFormatter();
-    if (count === 0) {
-        const safeSelector = selector.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
-        return fmt
-            .text(`No nodes found matching "${selector}"`)
-            .blank()
-            .section('Suggestions:', [
-            `Verify selector: bdg dom eval "document.querySelector('${safeSelector}')"`,
-            'List elements:   bdg dom query "*"',
-        ])
-            .build();
-    }
-    const nodeLines = nodes.map((node) => {
-        const classInfo = node.classes?.length ? ` class="${node.classes.join(' ')}"` : '';
-        return `[${node.index}] <${node.tag}${classInfo}> ${node.preview}`;
+    const nodeLines = nodes.slice(0, QUERY_DISPLAY_LIMIT).map((node) => {
+        const attributes = [
+            node.id && ` id="${node.id}"`,
+            node.name && ` name="${node.name}"`,
+            node.type && ` type="${node.type}"`,
+            node.classes?.length && ` class="${node.classes.join(' ')}"`,
+        ]
+            .filter(Boolean)
+            .join('');
+        const context = node.context ? ` (in ${node.context})` : '';
+        const preview = node.preview ? ` ${node.preview}` : '';
+        return `[${node.index}] <${node.tag}${attributes}>${context}${preview}`;
     });
     const hasMultipleResults = count > 1;
     const exampleIndex = hasMultipleResults ? (nodes[0]?.index ?? 0) : 0;
     return fmt
         .text(`Found ${count} node${count === 1 ? '' : 's'} matching "${selector}":`)
         .list(nodeLines)
-        .blank()
-        .section('Next steps:', [
-        `Get HTML:        bdg dom get ${exampleIndex}`,
-        `Extract text:    bdg cdp Runtime.evaluate --params '{"expression": "document.querySelector('${selector.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}').textContent"}'`,
-        `Full details:    bdg details dom ${exampleIndex}`,
+        .list(count > QUERY_DISPLAY_LIMIT ? [moreMatchesNote(count - QUERY_DISPLAY_LIMIT)] : [])
+        .hints('Next steps:', [
+        `Get HTML:        bdg dom get ${exampleIndex} --raw`,
+        `Accessibility:   bdg dom get ${exampleIndex}`,
+        ...(parseSelectorFilters(selector)
+            ? []
+            : [`Extract text:    bdg dom eval ${textExtractionScript(selector, exampleIndex)}`]),
     ])
         .build();
 }
@@ -80,8 +99,8 @@ export function formatDomQuery(data) {
  *   ]
  * });
  * // Output:
- * // [1] <div class="error">Error 1</div>
- * // [2] <span class="error">Error 2</span>
+ * // [0] <div class="error">Error 1</div>
+ * // [1] <span class="error">Error 2</span>
  * ```
  */
 export function formatDomGet(data) {
@@ -92,16 +111,17 @@ export function formatDomGet(data) {
     }
     const fmt = new OutputFormatter();
     nodes.forEach((node, i) => {
-        fmt.text(`[${i + 1}] ${node.outerHTML}`);
+        fmt.text(`[${i}] ${node.outerHTML}`);
     });
     return fmt.build();
 }
 /**
  * Format DOM eval results for human-readable output.
  *
- * Outputs the evaluated JavaScript result as formatted JSON.
+ * Outputs the evaluated JavaScript result as formatted JSON, preceded by a
+ * `Frame: <url>` line when it ran in an iframe (`--frame`).
  *
- * @param data - DOM eval result containing the evaluated value
+ * @param data - DOM eval result containing the evaluated value (and its frame)
  * @returns Formatted JSON string
  *
  * @example
@@ -118,7 +138,39 @@ export function formatDomGet(data) {
  * ```
  */
 export function formatDomEval(data) {
-    return JSON.stringify(data.result, null, 2);
+    const value = formatEvalValue(data);
+    return data.frame === undefined ? value : `${evalFrameLine(data.frame)}\n${value}`;
+}
+/**
+ * Format an eval result value: descriptions as is, JSON values pretty-printed.
+ *
+ * @param data - Result value and its JavaScript type
+ * @returns Formatted value
+ */
+function formatEvalValue(data) {
+    if (data.type === 'undefined')
+        return 'undefined';
+    const isDescription = typeof data.result === 'string' && data.type !== 'string';
+    if (isDescription)
+        return data.result;
+    return JSON.stringify(data.result ?? null, null, 2);
+}
+/**
+ * Format the page's iframes, one per line.
+ *
+ * @param data - Frames from `bdg dom frames`
+ * @returns Formatted list
+ *
+ * @example
+ * ```
+ * [0] http://localhost:3000/widget  name=widget  same-origin
+ * [1] https://pay.example/  #checkout  cross-origin, out-of-process
+ * ```
+ */
+export function formatDomFrames(data) {
+    if (data.frames.length === 0)
+        return noFramesMessage();
+    return data.frames.map(frameLabel).join('\n');
 }
 /**
  * Format screenshot capture result for human-readable display.

package/dist/ui/formatters/form.js

@@ -4,7 +4,7 @@
  * Formats discovered forms with semantic tables showing fields,
  * values, validation state, and suggested commands.
  */
-import { OutputFormatter } from '../../ui/formatting.js';
+import { OutputFormatter, areHintsHidden } from '../formatting.js';
 const COLUMN_WIDTHS = {
     index: 4,
     type: 12,
@@ -12,6 +12,16 @@ const COLUMN_WIDTHS = {
     value: 20,
     status: 10,
 };
+/**
+ * Cut text to a column width, marking the cut with "…".
+ *
+ * @param text - Text
+ * @param width - Column width
+ * @returns Text of at most `width` characters
+ */
+function fitText(text, width) {
+    return text.length > width ? `${text.slice(0, width - 1)}…` : text;
+}
 /**
  * Format field type for display.
  *
@@ -57,6 +67,9 @@ function formatFieldStatus(field) {
     if (field.disabled) {
         return 'disabled';
     }
+    if (field.readOnly) {
+        return 'read-only';
+    }
     if (!field.validation.valid) {
         return 'invalid';
     }
@@ -83,9 +96,8 @@ function formatRequiredMarker(field) {
 function formatFieldRow(field) {
     const idx = String(field.index).padStart(COLUMN_WIDTHS.index);
     const type = formatFieldType(field).padEnd(COLUMN_WIDTHS.type);
-    const label = (field.label + formatRequiredMarker(field))
-        .slice(0, COLUMN_WIDTHS.label)
-        .padEnd(COLUMN_WIDTHS.label);
+    const marker = formatRequiredMarker(field);
+    const label = (fitText(field.label, COLUMN_WIDTHS.label - marker.length) + marker).padEnd(COLUMN_WIDTHS.label);
     const value = formatFieldValue(field).padEnd(COLUMN_WIDTHS.value);
     const status = formatFieldStatus(field);
     let warning = '';
@@ -213,19 +225,19 @@ function formatSingleForm(form, fmt, brief = false) {
  * @param fmt - Output formatter
  */
 function formatBriefFields(form, fmt) {
-    fmt.text('IDX  TYPE         LABEL                    REQ');
-    fmt.text('─'.repeat(50));
+    fmt.text('IDX  TYPE         LABEL                    REQ VALUE');
+    fmt.text('─'.repeat(70));
     for (const field of form.fields) {
         if (field.hidden)
             continue;
         const idx = `[${field.index}]`.padEnd(4);
         const type = (field.inputType ?? field.type).slice(0, 11).padEnd(12);
         const label = (field.label ?? field.name ?? '(no label)').slice(0, 23).padEnd(24);
-        const req = field.required ? '*' : '';
-        fmt.text(`${idx} ${type} ${label} ${req}`);
+        const req = (field.required ? '*' : '').padEnd(3);
+        fmt.text(`${idx} ${type} ${label} ${req} ${formatFieldValue(field)}`);
     }
     if (form.buttons.length > 0) {
-        fmt.text('─'.repeat(50));
+        fmt.text('─'.repeat(70));
         for (const button of form.buttons) {
             const idx = `[${button.index}]`.padEnd(4);
             const type = 'button'.padEnd(12);
@@ -237,20 +249,16 @@ function formatBriefFields(form, fmt) {
 /**
  * Format other forms summary.
  *
- * @param forms - All forms
- * @param selectedIndex - Index of selected form
+ * @param others - Forms not shown, with their visible field counts
  * @param fmt - Output formatter
  */
-function formatOtherForms(forms, selectedIndex, fmt) {
-    const others = forms.filter((_, i) => i !== selectedIndex);
-    if (others.length === 0) {
+function formatOtherForms(others, fmt) {
+    if (others.length === 0)
         return;
-    }
     fmt.blank();
     fmt.text('Other forms on page:');
     for (const form of others) {
-        const fieldCount = form.fields.filter((f) => !f.hidden).length;
-        fmt.text(`  Form ${form.index}: "${form.name ?? 'Unnamed'}" - ${fieldCount} field(s)`);
+        fmt.text(`  Form ${form.index}: "${form.name ?? 'Unnamed'}" - ${form.fieldCount} field(s)`);
     }
     fmt.blank();
     fmt.text('Use --all to see all forms');
@@ -270,45 +278,16 @@ export function formatFormDiscovery(result) {
         formatSingleForm(form, fmt, result.brief);
         fmt.blank();
     }
-    if (result.forms.length === 1 && result.formCount > 1) {
-        const allForms = [];
-        for (let i = 0; i < result.formCount; i++) {
-            if (i === result.selectedForm) {
-                allForms.push(result.forms[0]);
-            }
-            else {
-                allForms.push({
-                    index: i,
-                    name: `Form ${i}`,
-                    action: null,
-                    method: 'GET',
-                    relevanceScore: 0,
-                    fields: [],
-                    buttons: [],
-                    summary: {
-                        totalFields: 0,
-                        filledFields: 0,
-                        emptyFields: 0,
-                        validFields: 0,
-                        invalidFields: 0,
-                        requiredTotal: 0,
-                        requiredFilled: 0,
-                        requiredRemaining: 0,
-                        readyToSubmit: true,
-                        blockers: [],
-                    },
-                });
-            }
-        }
-        formatOtherForms(allForms, result.selectedForm, fmt);
-    }
-    fmt.blank();
-    fmt.text('Suggested commands:');
-    fmt.text('  bdg dom fill <index> "<value>"     Fill a field');
-    fmt.text('  bdg dom click <index>              Click/check a field or button');
-    fmt.text('  bdg dom form                       Refresh to see current state');
-    fmt.blank();
-    fmt.text('Tip: Re-run "bdg dom form" after clicks that may reveal hidden fields');
+    if (result.otherForms)
+        formatOtherForms(result.otherForms, fmt);
+    fmt.hints('Suggested commands:', [
+        'bdg dom fill <index> "<value>"     Fill a field',
+        'bdg dom click <index>              Click/check a field or button',
+        'bdg dom form                       Refresh to see current state',
+    ]);
+    if (!areHintsHidden())
+        fmt.blank();
+    fmt.tip('Tip: Re-run "bdg dom form" after clicks that may reveal hidden fields');
     return fmt.build();
 }
 //# sourceMappingURL=form.js.map

package/dist/ui/formatters/helpFormatters.js

@@ -4,7 +4,8 @@
  * Provides well-structured sections for agent discovery, task examples,
  * and URL format guidance.
  */
-import { section } from '../../ui/formatting.js';
+import { getProtocolCounts } from '../../cdp/schema.js';
+import { section } from '../formatting.js';
 /**
  * Builds the agent discovery help section.
  *
@@ -14,11 +15,11 @@ import { section } from '../../ui/formatting.js';
  * @returns Formatted agent discovery section
  */
 export function buildAgentDiscoveryHelp() {
+    const counts = getProtocolCounts();
     return section('For AI Agents:', [
         'bdg --help --json          Machine-readable command schema',
-        'bdg cdp --list             List all 53 CDP domains',
-        'bdg cdp --search <term>    Search 300+ CDP methods',
-        '.claude/skills/bdg/        15+ recipes & workflow patterns',
+        `bdg cdp --list             List all ${counts.domains} CDP domains`,
+        `bdg cdp --search <term>    Search ${counts.methods} CDP methods`,
     ]);
 }
 /**

package/dist/ui/formatters/listeners.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Human-readable output of `bdg dom listeners`.
+ */
+import type { ElementListener, ListenersResult } from '../../ipc/protocol/domTypes.js';
+/** `bdg dom listeners` data (the `success` flag is implied by the envelope) */
+type ListenersOutput = Omit<ListenersResult, 'success'>;
+/**
+ * Where a handler is defined, as DevTools shows it (1-based line and column).
+ *
+ * @param handler - Listener handler
+ * @returns e.g. "script 42:18:6", or "native" for built-in functions
+ */
+export declare function handlerLocation(handler: ElementListener['handler']): string;
+/**
+ * Format `bdg dom listeners` output: listeners grouped by event type,
+ * nearest first, with a note for events handled only by delegation.
+ *
+ * @param result - Listener report
+ * @param types - Event types asked for with --type, if any
+ * @returns Formatted output
+ */
+export declare function formatListeners(result: ListenersOutput, types?: string[]): string;
+export {};
+//# sourceMappingURL=listeners.d.ts.map