browser-debugger-cli 0.8.0 → 0.9.0

package/dist/ui/formatters/dom.js

@@ -1,28 +1,15 @@
 import { OutputFormatter } from '../formatting.js';
-import { evalFrameLine, frameLabel, moreMatchesNote, noFramesMessage, } from '../messages/commands.js';
-import { parseSelectorFilters } from '../../utils/selectorFilters.js';
+import { frameLabel, moreMatchesNote, framesStillLoadingNote, noFramesMessage, queryNextSteps, screenshotGrownNote, viewportPositionHint, } from '../messages/commands.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,
- * 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.
+ * Displays found nodes with their index, tag, classes, and preview text
+ * (plus where they are when outside the viewport or hidden, e.g.
+ * `(below fold)`), up to {@link QUERY_DISPLAY_LIMIT} of them (no match is an error, exit 83).
+ * One line of next commands follows; they take the match's index, so they
+ * work for matches in shadow roots and iframes too.
  *
  * @param data - DOM query result containing selector, count, and matching nodes
  * @returns Formatted output string
@@ -51,27 +38,23 @@ export function formatDomQuery(data) {
             node.id && ` id="${node.id}"`,
             node.name && ` name="${node.name}"`,
             node.type && ` type="${node.type}"`,
+            node.value !== undefined && ` value="${node.value}"`,
             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 position = node.inViewport && viewportPositionHint(node.inViewport, node.clippedBy);
+        const location = position ? ` (${position})` : '';
+        return `[${node.index}] <${node.tag}${attributes}>${context}${preview}${location}`;
     });
-    const hasMultipleResults = count > 1;
-    const exampleIndex = hasMultipleResults ? (nodes[0]?.index ?? 0) : 0;
+    const exampleIndex = nodes[0]?.index ?? 0;
     return fmt
         .text(`Found ${count} node${count === 1 ? '' : 's'} matching "${selector}":`)
         .list(nodeLines)
         .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)}`]),
-    ])
+        .tip(queryNextSteps(exampleIndex))
         .build();
 }
 /**
@@ -118,18 +101,23 @@ export function formatDomGet(data) {
 /**
  * Format DOM eval results for human-readable output.
  *
- * Outputs the evaluated JavaScript result as formatted JSON, preceded by a
- * `Frame: <url>` line when it ran in an iframe (`--frame`).
+ * A string result is printed as is (not JSON-quoted), so text reads and
+ * pipes like `echo`, unless that would read as another value (empty,
+ * `undefined`, or valid JSON such as `42` or `[1,2]`): then it stays
+ * JSON-quoted. Other values are formatted JSON, and values Chrome only
+ * describes (functions, DOM nodes) their description. The iframe it ran in
+ * (`--frame`) is reported on stderr, so stdout stays the bare value. `--json`
+ * output is unchanged (the value in `data.result`).
  *
- * @param data - DOM eval result containing the evaluated value (and its frame)
- * @returns Formatted JSON string
+ * @param data - DOM eval result containing the evaluated value
+ * @returns The string, or formatted JSON
  *
  * @example
  * ```typescript
- * formatDomEval({ result: 'My Page Title' });
- * // Output: "My Page Title"
+ * formatDomEval({ result: 'My Page Title', type: 'string' });
+ * // Output: My Page Title
  *
- * formatDomEval({ result: { url: 'https://example.com', title: 'Example' } });
+ * formatDomEval({ result: { url: 'https://example.com', title: 'Example' }, type: 'object' });
  * // Output:
  * // {
  * //   "url": "https://example.com",
@@ -138,39 +126,58 @@ export function formatDomGet(data) {
  * ```
  */
 export function formatDomEval(data) {
-    const value = formatEvalValue(data);
-    return data.frame === undefined ? value : `${evalFrameLine(data.frame)}\n${value}`;
+    if (data.type === 'undefined')
+        return 'undefined';
+    const { result } = data;
+    if (typeof result === 'string' && (data.type !== 'string' || !looksLikeOtherValue(result))) {
+        return result;
+    }
+    return JSON.stringify(result ?? null, null, 2);
 }
 /**
- * Format an eval result value: descriptions as is, JSON values pretty-printed.
+ * Whether a string printed as is would read as another value: empty,
+ * `undefined`, or valid JSON (`42`, `true`, `null`, `[1,2]`, `{"a":1}`).
  *
- * @param data - Result value and its JavaScript type
- * @returns Formatted value
+ * @param text - String result
+ * @returns True when it must be JSON-quoted to read as a string
  */
-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);
+function looksLikeOtherValue(text) {
+    if (text === '' || text === 'undefined')
+        return true;
+    try {
+        JSON.parse(text);
+        return true;
+    }
+    catch {
+        return false;
+    }
 }
 /**
- * Format the page's iframes, one per line.
+ * Format the page's iframes, one per line, nested frames indented below
+ * their parent. While the page is still loading (`readyState` set), the list
+ * may be incomplete, and says so.
  *
- * @param data - Frames from `bdg dom frames`
+ * @param data - Frames from `bdg dom frames`, with the readyState of a page still loading
  * @returns Formatted list
  *
  * @example
  * ```
  * [0] http://localhost:3000/widget  name=widget  same-origin
  * [1] https://pay.example/  #checkout  cross-origin, out-of-process
+ *   [2] about:blank  same-origin
  * ```
  */
 export function formatDomFrames(data) {
+    const loading = data.readyState !== undefined && data.readyState !== 'complete';
     if (data.frames.length === 0)
-        return noFramesMessage();
-    return data.frames.map(frameLabel).join('\n');
+        return loading ? framesStillLoadingNote(true) : noFramesMessage();
+    const depthOf = new Map();
+    const lines = data.frames.map((frame) => {
+        const depth = frame.parentIndex === undefined ? 0 : (depthOf.get(frame.parentIndex) ?? 0) + 1;
+        depthOf.set(frame.index, depth);
+        return '  '.repeat(depth) + frameLabel(frame);
+    });
+    return [...lines, ...(loading ? [framesStillLoadingNote(false)] : [])].join('\n');
 }
 /**
  * Format screenshot capture result for human-readable display.
@@ -187,6 +194,9 @@ export function formatDomFrames(data) {
  *
  * formatDomScreenshot({ path: './page.png', fullPageSkipped: { reason: 'page_too_tall', ... } });
  * // Output: Screenshot saved to ./page.png (viewport only - page too tall)
+ *
+ * // An element whose floated children overflow it
+ * // Output: Screenshot saved to ./el.png (grown from 940×37 to 940×285 to include content overflowing the element)
  * ```
  */
 export function formatDomScreenshot(data) {
@@ -194,6 +204,9 @@ export function formatDomScreenshot(data) {
     if (data.fullPageSkipped && !data.scrolledTo) {
         output += ' (viewport only - page too tall)';
     }
+    if (data.element?.captured) {
+        output += ` (${screenshotGrownNote(data.element.bounds, data.element.captured)})`;
+    }
     return output;
 }
 //# sourceMappingURL=dom.js.map

package/dist/ui/formatters/form.js

@@ -5,6 +5,7 @@
  * values, validation state, and suggested commands.
  */
 import { OutputFormatter, areHintsHidden } from '../formatting.js';
+import { REQUIRED_FIELD_EMPTY_REASON, formReadinessMessage, requiredFieldsEmptyMessage, } from '../messages/commands.js';
 const COLUMN_WIDTHS = {
     index: 4,
     type: 12,
@@ -64,6 +65,9 @@ function formatFieldValue(field) {
  * @returns Status string with icon
  */
 function formatFieldStatus(field) {
+    if (field.hidden) {
+        return 'hidden';
+    }
     if (field.disabled) {
         return 'disabled';
     }
@@ -127,12 +131,23 @@ function formatButtonRow(button) {
  * @returns Header string
  */
 function formatFormHeader(form) {
-    let header = `Form: "${form.name ?? 'Unnamed'}"`;
+    let header = `Form: "${form.name ?? 'Unnamed'}"${formVisibilityMarker(form)}`;
     if (form.step) {
         header += ` (step ${form.step.current} of ${form.step.total})`;
     }
     return header;
 }
+/**
+ * Marker of a form shown in an open dialog or not shown at all.
+ *
+ * @param form - Form (or its listing in "Other forms")
+ * @returns ` (in dialog)`, ` (hidden)`, or empty
+ */
+function formVisibilityMarker(form) {
+    if (form.hidden)
+        return ' (hidden)';
+    return form.inDialog ? ' (in dialog)' : '';
+}
 /**
  * Format table header row.
  *
@@ -147,7 +162,9 @@ function formatTableHeader() {
     return `${idx}  ${type} ${label} ${value} ${status}`;
 }
 /**
- * Format summary line.
+ * Format summary line, e.g. "Summary: 1/3 fields filled | 2 required fields
+ * empty: Last Name, Zip | NOT ready" (a radio or checkbox group counts as one
+ * field).
  *
  * @param summary - Form summary
  * @returns Summary string
@@ -158,15 +175,12 @@ function formatSummaryLine(summary) {
     if (summary.invalidFields > 0) {
         parts.push(`${summary.invalidFields} invalid`);
     }
-    if (summary.requiredRemaining > 0) {
-        parts.push(`${summary.requiredRemaining} required remaining`);
-    }
-    if (summary.readyToSubmit) {
-        parts.push('READY to submit');
-    }
-    else {
-        parts.push('NOT ready');
-    }
+    const requiredEmpty = summary.blockers
+        .filter((blocker) => blocker.reason === REQUIRED_FIELD_EMPTY_REASON)
+        .map((blocker) => blocker.label);
+    if (requiredEmpty.length > 0)
+        parts.push(requiredFieldsEmptyMessage(requiredEmpty));
+    parts.push(formReadinessMessage(summary));
     return `Summary: ${parts.join(' | ')}`;
 }
 /**
@@ -197,9 +211,7 @@ function formatSingleForm(form, fmt, brief = false) {
     fmt.text(formatTableHeader());
     fmt.text('─'.repeat(70));
     for (const field of form.fields) {
-        if (!field.hidden) {
-            fmt.text(formatFieldRow(field));
-        }
+        fmt.text(formatFieldRow(field));
     }
     if (form.buttons.length > 0) {
         fmt.text('─'.repeat(70));
@@ -228,13 +240,12 @@ function formatBriefFields(form, fmt) {
     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 ? '*' : '').padEnd(3);
-        fmt.text(`${idx} ${type} ${label} ${req} ${formatFieldValue(field)}`);
+        const hidden = field.hidden ? ' (hidden)' : '';
+        fmt.text(`${idx} ${type} ${label} ${req} ${formatFieldValue(field)}${hidden}`);
     }
     if (form.buttons.length > 0) {
         fmt.text('─'.repeat(70));
@@ -258,7 +269,7 @@ function formatOtherForms(others, fmt) {
     fmt.blank();
     fmt.text('Other forms on page:');
     for (const form of others) {
-        fmt.text(`  Form ${form.index}: "${form.name ?? 'Unnamed'}" - ${form.fieldCount} field(s)`);
+        fmt.text(`  Form ${form.index}: "${form.name ?? 'Unnamed'}"${formVisibilityMarker(form)} - ${form.fieldCount} field(s)`);
     }
     fmt.blank();
     fmt.text('Use --all to see all forms');

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

@@ -0,0 +1,31 @@
+/**
+ * Human-readable output of `bdg dom layout`.
+ */
+import type { ElementLayout, LayoutResult, LayoutSize } from '../../ipc/protocol/domTypes.js';
+import type { IndexSource } from '../../types.js';
+/** `bdg dom layout` data (the `success` flag is implied by the envelope), with the list an index refers to */
+type LayoutOutput = Omit<LayoutResult, 'success'> & {
+    indexSource?: IndexSource | undefined;
+};
+/**
+ * One element as a compact line: index, description, text, page position
+ * and size (not for hidden elements, which have no meaningful box), where it
+ * is relative to the viewport, what covers it, an inert or invisible element
+ * and the iframe or shadow root it is in (unless the position already names
+ * it as the clipping iframe).
+ *
+ * @param element - Element layout
+ * @param viewport - Viewport size, when known (an element larger than it is not centred by the scroll)
+ * @returns e.g. `[0] button#save "Save"  420,1180 120×40  below fold (scroll down 500px to centre it)`
+ */
+export declare function layoutLine(element: ElementLayout, viewport?: LayoutSize): string;
+/**
+ * Format `bdg dom layout` output: the page dimensions, then one line per
+ * element (the first {@link LAYOUT_DISPLAY_LIMIT}).
+ *
+ * @param data - Layout report
+ * @returns Formatted output
+ */
+export declare function formatLayout(data: LayoutOutput): string;
+export {};
+//# sourceMappingURL=layout.d.ts.map

package/dist/ui/formatters/layout.js

@@ -0,0 +1,53 @@
+/**
+ * Human-readable output of `bdg dom layout`.
+ */
+import { indexSourceText } from '../../errors/messages.js';
+import { OutputFormatter } from '../formatting.js';
+import { indexLayoutHeadline, layoutHeadline, layoutPositionLabel, moreMatchesNote, pageLayoutLine, } from '../messages/commands.js';
+/** Elements listed in human output (JSON has up to 100) */
+const LAYOUT_DISPLAY_LIMIT = 20;
+/**
+ * One element as a compact line: index, description, text, page position
+ * and size (not for hidden elements, which have no meaningful box), where it
+ * is relative to the viewport, what covers it, an inert or invisible element
+ * and the iframe or shadow root it is in (unless the position already names
+ * it as the clipping iframe).
+ *
+ * @param element - Element layout
+ * @param viewport - Viewport size, when known (an element larger than it is not centred by the scroll)
+ * @returns e.g. `[0] button#save "Save"  420,1180 120×40  below fold (scroll down 500px to centre it)`
+ */
+export function layoutLine(element, viewport) {
+    const { bounds } = element;
+    return [
+        `[${element.index}] ${element.element}${element.text ? ` "${element.text}"` : ''}`,
+        element.inViewport !== 'hidden' && `${bounds.x},${bounds.y} ${bounds.width}×${bounds.height}`,
+        layoutPositionLabel(element, viewport),
+        element.coveredBy && `covered by ${element.coveredBy}`,
+        element.inert && 'inert',
+        element.invisible,
+        element.context && element.context !== element.clippedBy && `in ${element.context}`,
+    ]
+        .filter(Boolean)
+        .join('  ');
+}
+/**
+ * Format `bdg dom layout` output: the page dimensions, then one line per
+ * element (the first {@link LAYOUT_DISPLAY_LIMIT}).
+ *
+ * @param data - Layout report
+ * @returns Formatted output
+ */
+export function formatLayout(data) {
+    const shown = data.elements.slice(0, LAYOUT_DISPLAY_LIMIT);
+    const more = data.elements.length - shown.length + (data.omitted ?? 0);
+    return new OutputFormatter()
+        .text(pageLayoutLine(data.page))
+        .text(data.indexSource
+        ? indexLayoutHeadline(indexSourceText(data.indexSource))
+        : layoutHeadline(data.count, data.elements.length + (data.omitted ?? 0), data.selector))
+        .list(shown.map((element) => layoutLine(element, data.page.viewport)))
+        .list(more > 0 ? [moreMatchesNote(more, data.omitted ? data.elements.length : undefined)] : [])
+        .build();
+}
+//# sourceMappingURL=layout.js.map

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

@@ -12,8 +12,9 @@ type ListenersOutput = Omit<ListenersResult, 'success'>;
  */
 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.
+ * Format `bdg dom listeners` output: listeners grouped by event type, the
+ * handlers nearest the element first, then one line per framework root,
+ * with notes for events the element has no listener of its own for.
  *
  * @param result - Listener report
  * @param types - Event types asked for with --type, if any

package/dist/ui/formatters/listeners.js

@@ -1,9 +1,9 @@
 /**
  * Human-readable output of `bdg dom listeners`.
  */
-import { delegatedOnlyTypes } from '../../runtime/dom/listenerSummary.js';
+import { delegationNotes } from '../../runtime/dom/listenerSummary.js';
 import { OutputFormatter } from '../formatting.js';
-import { NO_LISTENERS_HINT, delegatedListenersNote, listenersHeadline, noListenersMessage, } from '../messages/commands.js';
+import { COLLAPSED_LISTENERS_HEADING, NO_LISTENERS_HINT, collapsedListenersSummary, delegationNote, eventTypeSuggestion, jqueryHandlersSkippedNote, listenersHeadline, noListenersMessage, reactHandlersSkippedNote, } from '../messages/commands.js';
 import { truncateByLength } from '../../utils/strings.js';
 /** Longest handler name shown (JSON has the full name) */
 const NAME_MAX_LENGTH = 30;
@@ -29,6 +29,9 @@ export function handlerLocation(handler) {
  */
 function listenerCells(listener) {
     const flags = [
+        listener.reactProp ? `React ${listener.reactProp}` : listener.framework,
+        listener.delegateSelector && `delegate ${listener.delegateSelector}`,
+        listener.noop && 'no-op',
         listener.useCapture && 'capture',
         listener.passive && 'passive',
         listener.once && 'once',
@@ -54,9 +57,31 @@ function alignColumns(rows) {
         .map((cell, column) => (column === row.length - 1 ? cell : cell.padEnd(widths[column] ?? 0)))
         .join('  '));
 }
+/** Dispatcher names listed per collapsed framework root */
+const COLLAPSED_HANDLERS_SHOWN = 3;
 /**
- * Format `bdg dom listeners` output: listeners grouped by event type,
- * nearest first, with a note for events handled only by delegation.
+ * Listeners by where they are attached, collapsed framework roots included.
+ *
+ * @param listeners - Listed listeners
+ * @param collapsed - Collapsed framework roots
+ * @returns Counts on the element, its ancestors, and document or window
+ */
+function listenerCounts(listeners, collapsed) {
+    const counts = { target: 0, ancestor: 0, global: 0 };
+    const add = (on, count) => {
+        if (on === 'target' || on === 'ancestor')
+            counts[on] += count;
+        else
+            counts.global += count;
+    };
+    listeners.forEach((listener) => add(listener.on, 1));
+    collapsed.forEach((root) => add(root.on, root.count));
+    return counts;
+}
+/**
+ * Format `bdg dom listeners` output: listeners grouped by event type, the
+ * handlers nearest the element first, then one line per framework root,
+ * with notes for events the element has no listener of its own for.
  *
  * @param result - Listener report
  * @param types - Event types asked for with --type, if any
@@ -64,21 +89,60 @@ function alignColumns(rows) {
  */
 export function formatListeners(result, types) {
     const fmt = new OutputFormatter();
-    if (result.listeners.length === 0) {
+    const collapsed = result.collapsed ?? [];
+    if (result.listeners.length === 0 && collapsed.length === 0) {
         fmt.text(noListenersMessage(result.element, types));
+        if (result.typeSuggestions?.length)
+            fmt.text(eventTypeSuggestion(result.typeSuggestions));
         fmt.tip(NO_LISTENERS_HINT);
     }
     else {
-        fmt.text(listenersHeadline(result.element, result.listeners.length));
+        fmt.text(listenersHeadline(result.element, listenerCounts(result.listeners, collapsed), result));
         appendListenerGroups(fmt, result.listeners);
-        const delegated = delegatedOnlyTypes(result.listeners);
-        if (delegated.length > 0)
-            fmt.blank().text(delegatedListenersNote(delegated));
+        appendCollapsed(fmt, collapsed);
+        appendDelegationNotes(fmt, result.listeners, collapsed);
+    }
+    if (result.jqueryHandlersSkipped) {
+        fmt.blank().text(jqueryHandlersSkippedNote(result.jqueryHandlersSkipped));
+    }
+    if (result.reactHandlersSkipped) {
+        fmt.blank().text(reactHandlersSkippedNote(result.reactHandlersSkipped));
     }
     if (result.warning)
         fmt.blank().text(`⚠ Warning: ${result.warning}`);
     return fmt.build();
 }
+/**
+ * Add a note per way events reach their handlers without a listener on the
+ * element itself (React props, React root, jQuery, plain delegation).
+ *
+ * @param fmt - Output being built
+ * @param listeners - Listeners
+ * @param collapsed - Collapsed roots
+ */
+function appendDelegationNotes(fmt, listeners, collapsed) {
+    const notes = delegationNotes(listeners, collapsed).flatMap((note) => delegationNote(note) ?? []);
+    if (notes.length > 0)
+        fmt.blank();
+    notes.forEach((note) => fmt.text(note));
+}
+/**
+ * Add the collapsed framework roots, one line per node.
+ *
+ * @param fmt - Output being built
+ * @param collapsed - Collapsed roots
+ */
+function appendCollapsed(fmt, collapsed) {
+    if (collapsed.length === 0)
+        return;
+    fmt.blank().text(COLLAPSED_LISTENERS_HEADING);
+    const rows = collapsed.map((root) => {
+        const names = root.handlers.map((handler) => truncateByLength(handler.name || ANONYMOUS, NAME_MAX_LENGTH));
+        const shown = [...new Set(names)].slice(0, COLLAPSED_HANDLERS_SHOWN);
+        return [root.on, root.node, collapsedListenersSummary({ ...root, handlers: shown })];
+    });
+    alignColumns(rows).forEach((line) => fmt.text(`  ${line}`));
+}
 /**
  * Add one block per event type: the type, then its listeners.
  *

package/dist/ui/formatters/networkHeaders.js

@@ -3,6 +3,7 @@
  *
  * Formats network request and response headers for human-readable display.
  */
+import { formatRequestStatus } from './requestStatus.js';
 import { OutputFormatter } from '../formatting.js';
 /**
  * Format network request headers for display.
@@ -14,6 +15,7 @@ export function formatNetworkHeaders(data) {
     const fmt = new OutputFormatter();
     fmt.text('Network Request Headers').separator('━', 60).blank();
     fmt.text('URL:').text(`  ${data.url}`).blank();
+    fmt.text(`Status: ${requestStatusLine(data)}`).blank();
     if (Object.keys(data.responseHeaders).length > 0) {
         fmt.text('Response Headers:');
         formatHeaderSection(fmt, data.responseHeaders);
@@ -47,4 +49,15 @@ function formatHeaderSection(fmt, headers) {
         value.split('\n').forEach((line) => fmt.keyValue(`  ${key}`, line, keyWidth));
     });
 }
+/**
+ * Status line of a request: method, HTTP status and status text, or how it failed.
+ *
+ * @param data - Network headers data
+ * @returns e.g. `GET 404 Not Found`, `GET FAILED (net::ERR_NAME_NOT_RESOLVED)`, `GET pending`
+ */
+function requestStatusLine(data) {
+    const status = formatRequestStatus(data);
+    const text = data.statusText && /^\d+$/.test(status) ? ` ${data.statusText}` : '';
+    return [data.method, `${status}${text}`].filter(Boolean).join(' ');
+}
 //# sourceMappingURL=networkHeaders.js.map

package/dist/ui/formatters/preview.js

@@ -4,6 +4,7 @@ import { formatTimestamp } from './console/shared.js';
 import { failureReason, formatRequestStatus, getRequestState, } from './requestStatus.js';
 import { OutputFormatter, truncateUrl, truncateText } from '../formatting.js';
 import { PREVIEW_EMPTY_STATES, PREVIEW_HEADERS, compactTipsMessage, verboseCommandsMessage, } from '../messages/preview.js';
+import { sessionCommand } from '../messages/sessionCommand.js';
 /**
  * Infer resource type from MIME type when CDP doesn't provide it.
  *
@@ -218,7 +219,7 @@ function formatPreviewVerbose(output, options) {
                     if (req.mimeType) {
                         fmt.text(`  MIME: ${req.mimeType}`);
                     }
-                    fmt.text(`  ID: ${req.requestId} (use 'bdg details network ${req.requestId}' for full details)`);
+                    fmt.text(`  ID: ${req.requestId} (use '${sessionCommand(`bdg details network ${req.requestId}`)}' for full details)`);
                 });
             }
             fmt.blank();

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

@@ -6,23 +6,7 @@
  * response keeps its HTTP status even if loading failed afterwards.
  */
 import type { NetworkRequest } from '../../types.js';
-/** Lifecycle state of a captured request. */
-export type RequestState = 'pending' | 'failed' | 'complete';
-/**
- * Classify a request.
- *
- * @param request - Captured request
- * @returns Its lifecycle state
- */
-export declare function getRequestState(request: Pick<NetworkRequest, 'status'>): RequestState;
-/**
- * Why a request failed, leaving out Chrome stopping an unneeded body after a
- * complete response (204/304 report `net::ERR_ABORTED` that way).
- *
- * @param request - Captured request
- * @returns Reason, or undefined when there is none worth showing
- */
-export declare function failureReason(request: Pick<NetworkRequest, 'status' | 'errorText'>): string | undefined;
+export { failureReason, getRequestState, type RequestState } from '../../telemetry/requestState.js';
 /**
  * Human-readable status: the HTTP status (with the failure reason if loading
  * failed after the response), `FAILED (<reason>)`, or `pending`.

package/dist/ui/formatters/requestStatus.js

@@ -5,31 +5,8 @@
  * without any response (DNS, refused, aborted, blocked); a request that got a
  * response keeps its HTTP status even if loading failed afterwards.
  */
-/**
- * Classify a request.
- *
- * @param request - Captured request
- * @returns Its lifecycle state
- */
-export function getRequestState(request) {
-    if (request.status === undefined)
-        return 'pending';
-    return request.status === 0 ? 'failed' : 'complete';
-}
-/**
- * Why a request failed, leaving out Chrome stopping an unneeded body after a
- * complete response (204/304 report `net::ERR_ABORTED` that way).
- *
- * @param request - Captured request
- * @returns Reason, or undefined when there is none worth showing
- */
-export function failureReason(request) {
-    if (!request.errorText)
-        return undefined;
-    return getRequestState(request) === 'complete' && request.errorText === BODY_ABORTED
-        ? undefined
-        : request.errorText;
-}
+import { BODY_ABORTED, getRequestState } from '../../telemetry/requestState.js';
+export { failureReason, getRequestState } from '../../telemetry/requestState.js';
 /**
  * Human-readable status: the HTTP status (with the failure reason if loading
  * failed after the response), `FAILED (<reason>)`, or `pending`.
@@ -47,9 +24,4 @@ export function formatRequestStatus(request) {
         ? `${request.status} (${request.errorText})`
         : String(request.status);
 }
-/**
- * Error Chrome reports when it stops reading a response body nobody needs
- * (the response itself arrived; not a failure of the request).
- */
-const BODY_ABORTED = 'net::ERR_ABORTED';
 //# sourceMappingURL=requestStatus.js.map

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

@@ -0,0 +1,12 @@
+import type { RunningSessionInfo } from '../../session/sessionList.js';
+/**
+ * Format the sessions as a table, followed by the cleanup commands of
+ * crashed and stale sessions.
+ *
+ * @param data - Sessions
+ * @returns Human-readable list
+ */
+export declare function formatSessionList(data: {
+    sessions: RunningSessionInfo[];
+}): string;
+//# sourceMappingURL=sessions.d.ts.map