browser-debugger-cli 0.8.0 → 0.10.0

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 { coverText, 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 && coverText(element.coveredBy, element.coverTransparent),
+        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.d.ts

@@ -11,4 +11,17 @@ import type { SessionNetworkHeadersData } from '../../ipc/protocol/commands.js';
  * @returns Formatted string for console output
  */
 export declare function formatNetworkHeaders(data: SessionNetworkHeadersData): string;
+/**
+ * The values of a header, one per line. A header sent several times reaches
+ * CDP as one value with the values joined by newlines (`Set-Cookie`, or a
+ * server repeating `Strict-Transport-Security`); a value sent more than once
+ * is listed once, saying how often it was sent. `Set-Cookie` lines are all
+ * kept: each one sets a cookie, and repeating one is not the same as sending
+ * it once.
+ *
+ * @param name - Header name
+ * @param value - Header value as CDP reports it
+ * @returns e.g. `['max-age=63072000 (sent 2 times)']`
+ */
+export declare function headerValueLines(name: string, value: string): string[];
 //# sourceMappingURL=networkHeaders.d.ts.map

package/dist/ui/formatters/networkHeaders.js

@@ -3,7 +3,9 @@
  *
  * Formats network request and response headers for human-readable display.
  */
+import { formatRequestStatus } from './requestStatus.js';
 import { OutputFormatter } from '../formatting.js';
+import { headerRepeatedNote } from '../messages/networkMessages.js';
 /**
  * Format network request headers for display.
  *
@@ -14,6 +16,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);
@@ -31,11 +34,30 @@ export function formatNetworkHeaders(data) {
     fmt.text(`Request ID: ${data.requestId}`);
     return fmt.build();
 }
+/**
+ * The values of a header, one per line. A header sent several times reaches
+ * CDP as one value with the values joined by newlines (`Set-Cookie`, or a
+ * server repeating `Strict-Transport-Security`); a value sent more than once
+ * is listed once, saying how often it was sent. `Set-Cookie` lines are all
+ * kept: each one sets a cookie, and repeating one is not the same as sending
+ * it once.
+ *
+ * @param name - Header name
+ * @param value - Header value as CDP reports it
+ * @returns e.g. `['max-age=63072000 (sent 2 times)']`
+ */
+export function headerValueLines(name, value) {
+    if (name.toLowerCase() === 'set-cookie')
+        return value.split('\n');
+    const counts = new Map();
+    for (const line of value.split('\n'))
+        counts.set(line, (counts.get(line) ?? 0) + 1);
+    return [...counts].map(([line, count]) => count > 1 ? `${line} ${headerRepeatedNote(count)}` : line);
+}
 /**
  * Format a section of headers with consistent formatting.
  *
- * Repeated headers (CDP joins e.g. multiple `Set-Cookie` values with newlines)
- * are printed one per line.
+ * Repeated headers are printed one value per line ({@link headerValueLines}).
  *
  * @param fmt - Output formatter instance
  * @param headers - Headers to format
@@ -44,7 +66,18 @@ function formatHeaderSection(fmt, headers) {
     const entries = Object.entries(headers).sort(([a], [b]) => a.localeCompare(b));
     const keyWidth = Math.max(...entries.map(([k]) => k.length)) + 4;
     entries.forEach(([key, value]) => {
-        value.split('\n').forEach((line) => fmt.keyValue(`  ${key}`, line, keyWidth));
+        headerValueLines(key, value).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/networkList.d.ts

@@ -7,22 +7,50 @@
 import type { NetworkRequest } from '../../types.js';
 export interface NetworkListOptions {
     verbose?: boolean;
+    /** Start of the current page, which the START column counts from ({@link pageStartOf}) */
+    pageStart?: PageStart;
     last?: number;
     totalCount?: number;
     /** Requests matching the filters, before --last (defaults to totalCount) */
     filteredCount?: number;
 }
+/**
+ * When the current page started loading: the request of its document, in
+ * Chrome's monotonic time (`sentTime`, seconds) and wall-clock time
+ * (`timestamp`, epoch ms).
+ */
+export type PageStart = Pick<NetworkRequest, 'sentTime' | 'timestamp'>;
+/**
+ * The start of the current page: the earliest document request of the
+ * latest navigation among the requests (its earliest request when its
+ * document was not captured).
+ *
+ * @param requests - All captured requests (before filters, so the document is among them)
+ * @returns Its times, or undefined when there are no requests
+ */
+export declare function pageStartOf(requests: NetworkRequest[]): PageStart | undefined;
+/**
+ * Format a request's start for the START column, relative to the current
+ * page's start: tenths of a second up to 100 s, then whole seconds, then
+ * minutes.
+ *
+ * @param request - Request
+ * @param pageStart - Start of the current page (none: `-`)
+ * @returns e.g. "+0.0s", "+1.2s", "+250s", "+17m", "-35.2s" (earlier page)
+ */
+export declare function formatStartOffset(request: NetworkRequest, pageStart: PageStart | undefined): string;
 /**
  * Rows of the network stream: requests that finished since the last poll,
  * with the column header the first time.
  *
  * @param requests - Newly finished requests
- * @param options - `header` the first time; `verbose` for full URLs
+ * @param options - `header` the first time; `verbose` for full URLs; the page start for START
  * @returns Text to print (empty when there is nothing new)
  */
 export declare function formatNetworkFollowRows(requests: NetworkRequest[], options?: {
     header?: boolean;
     verbose?: boolean;
+    pageStart?: PageStart;
 }): string;
 /**
  * Format network requests for display.

package/dist/ui/formatters/networkList.js

@@ -39,32 +39,99 @@ function formatDuration(ms) {
     return ms < 1000 ? `${Math.round(ms)}ms` : `${(ms / 1000).toFixed(1)}s`;
 }
 /**
- * Column header aligned to the widest request id in the list.
+ * The start of the current page: the earliest document request of the
+ * latest navigation among the requests (its earliest request when its
+ * document was not captured).
  *
- * @param idWidth - Width of the bracketed id column
+ * @param requests - All captured requests (before filters, so the document is among them)
+ * @returns Its times, or undefined when there are no requests
+ */
+export function pageStartOf(requests) {
+    const navigationIds = requests.flatMap((r) => r.navigationId === undefined ? [] : [r.navigationId]);
+    const current = navigationIds.length > 0 ? Math.max(...navigationIds) : undefined;
+    const page = requests.filter((r) => r.navigationId === current);
+    const documents = page.filter((r) => r.resourceType === 'Document');
+    const first = (documents.length > 0 ? documents : page).reduce((earliest, r) => (earliest === undefined || r.timestamp < earliest.timestamp ? r : earliest), undefined);
+    return (first && {
+        timestamp: first.timestamp,
+        ...(first.sentTime !== undefined && { sentTime: first.sentTime }),
+    });
+}
+/**
+ * Milliseconds from the page start to a request's start, in Chrome's time
+ * when both have it (precise), else in wall-clock time.
+ *
+ * @param request - Request
+ * @param pageStart - Start of the current page
+ * @returns Offset (negative for requests of earlier pages)
+ */
+function startOffsetMs(request, pageStart) {
+    if (request.sentTime !== undefined && pageStart.sentTime !== undefined) {
+        return (request.sentTime - pageStart.sentTime) * 1000;
+    }
+    return request.timestamp - pageStart.timestamp;
+}
+/**
+ * Format a request's start for the START column, relative to the current
+ * page's start: tenths of a second up to 100 s, then whole seconds, then
+ * minutes.
+ *
+ * @param request - Request
+ * @param pageStart - Start of the current page (none: `-`)
+ * @returns e.g. "+0.0s", "+1.2s", "+250s", "+17m", "-35.2s" (earlier page)
+ */
+export function formatStartOffset(request, pageStart) {
+    if (!pageStart)
+        return '-';
+    const ms = startOffsetMs(request, pageStart);
+    const seconds = Math.abs(ms) / 1000;
+    const sign = ms < -50 ? '-' : '+';
+    if (seconds < 99.95)
+        return `${sign}${seconds.toFixed(1)}s`;
+    if (seconds < 999.5)
+        return `${sign}${Math.round(seconds)}s`;
+    return `${sign}${Math.floor(seconds / 60)}m`;
+}
+/**
+ * Column header aligned to the widest request id and method in the list.
+ *
+ * @param widths - Column widths
  * @returns Header line
  */
-function formatColumnHeader(idWidth) {
-    return `${'[ID]'.padEnd(idWidth)} STS METH TYP ${'SIZE'.padStart(8)} ${'TIME'.padStart(6)}  URL`;
+function formatColumnHeader(widths) {
+    return `${'[ID]'.padEnd(widths.id)} ${'START'.padStart(6)} STS ${'METH'.padEnd(widths.method)} TYP ${'SIZE'.padStart(8)} ${'TIME'.padStart(6)}  URL`;
 }
 /**
  * Format one request as a table row.
  *
  * @param request - Network request
- * @param verbose - Show full URLs
- * @param idWidth - Width of the bracketed id column (ids vary in length)
+ * @param options - Show full URLs (`verbose`), the page start for START
+ * @param widths - Column widths (ids and methods vary in length)
  * @returns Row text
  */
-function formatRequestLine(request, verbose, idWidth) {
-    const id = `[${request.requestId}]`.padEnd(idWidth);
+function formatRequestLine(request, options, widths) {
+    const id = `[${request.requestId}]`.padEnd(widths.id);
+    const start = formatStartOffset(request, options.pageStart).padStart(6);
     const status = formatStatus(request).padEnd(3);
-    const method = request.method.padEnd(4);
+    const method = request.method.padEnd(widths.method);
     const type = getResourceTypeAbbr(request.resourceType, request.mimeType).padEnd(3);
     const size = formatSize(request.encodedDataLength).padStart(8);
     const time = formatDuration(request.duration).padStart(6);
-    const urlMaxLength = verbose ? 120 : 50;
-    const url = verbose ? request.url : truncateUrl(request.url, urlMaxLength);
-    return `${id} ${status} ${method} ${type} ${size} ${time}  ${url}`;
+    const url = options.verbose ? request.url : truncateUrl(request.url, 50);
+    return `${id} ${start} ${status} ${method} ${type} ${size} ${time}  ${url}`;
+}
+/**
+ * Column widths fitting the rows.
+ *
+ * @param requests - Rows
+ * @param minIdWidth - Narrowest id column
+ * @returns Widths
+ */
+function columnWidths(requests, minIdWidth) {
+    return {
+        id: Math.max(minIdWidth, ...requests.map((r) => r.requestId.length + 2)),
+        method: Math.max('METH'.length, ...requests.map((r) => r.method.length)),
+    };
 }
 /**
  * Header line with how many requests are shown.
@@ -91,12 +158,11 @@ function formatNetworkListHuman(requests, options) {
         fmt.text('No matching requests found.');
         return fmt.build();
     }
-    const idWidth = Math.max('[ID]'.length, ...requests.map((r) => r.requestId.length + 2));
-    fmt.text(formatColumnHeader(idWidth));
+    const widths = columnWidths(requests, '[ID]'.length);
+    fmt.text(formatColumnHeader(widths));
     fmt.separator('─', SEPARATOR_WIDTH);
-    const verbose = options.verbose ?? false;
     for (const request of requests) {
-        fmt.text(formatRequestLine(request, verbose, idWidth));
+        fmt.text(formatRequestLine(request, options, widths));
     }
     return fmt.build();
 }
@@ -107,19 +173,19 @@ const FOLLOW_ID_WIDTH = 14;
  * with the column header the first time.
  *
  * @param requests - Newly finished requests
- * @param options - `header` the first time; `verbose` for full URLs
+ * @param options - `header` the first time; `verbose` for full URLs; the page start for START
  * @returns Text to print (empty when there is nothing new)
  */
 export function formatNetworkFollowRows(requests, options = {}) {
     const fmt = new OutputFormatter();
-    const idWidth = Math.max(FOLLOW_ID_WIDTH, ...requests.map((r) => r.requestId.length + 2));
+    const widths = columnWidths(requests, FOLLOW_ID_WIDTH);
     if (options.header) {
         fmt.text('Streaming network requests... (Ctrl+C to stop)');
-        fmt.text(formatColumnHeader(idWidth));
+        fmt.text(formatColumnHeader(widths));
         fmt.separator('─', SEPARATOR_WIDTH);
     }
     for (const request of requests)
-        fmt.text(formatRequestLine(request, options.verbose ?? false, idWidth));
+        fmt.text(formatRequestLine(request, options, widths));
     return fmt.build();
 }
 /**

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

package/dist/ui/formatters/sessions.js

@@ -0,0 +1,40 @@
+import { OutputFormatter } from '../formatting.js';
+/** Label of the default session in the list */
+const DEFAULT_SESSION_LABEL = '(default)';
+/**
+ * Format the sessions as a table, followed by the cleanup commands of
+ * crashed and stale sessions.
+ *
+ * @param data - Sessions
+ * @returns Human-readable list
+ */
+export function formatSessionList(data) {
+    const fmt = new OutputFormatter();
+    if (data.sessions.length === 0) {
+        return fmt
+            .text('No running sessions')
+            .hints('Suggestions:', ['Start one:  bdg <url> [--session <name>]'])
+            .build();
+    }
+    const rows = data.sessions.map((session) => [
+        session.name ?? DEFAULT_SESSION_LABEL,
+        session.state,
+        session.port?.toString() ?? '-',
+        session.daemonPid?.toString() ?? '-',
+        session.url ?? '-',
+    ]);
+    const header = ['SESSION', 'STATE', 'PORT', 'PID', 'URL'];
+    const widths = header.map((title, column) => Math.max(title.length, ...rows.map((row) => row[column]?.length ?? 0)));
+    for (const row of [header, ...rows]) {
+        fmt.text(row
+            .map((cell, column) => cell.padEnd(widths[column] ?? 0))
+            .join('  ')
+            .trimEnd());
+    }
+    const cleanups = data.sessions.flatMap((session) => (session.cleanup ? [session.cleanup] : []));
+    if (cleanups.length > 0) {
+        fmt.hints('Crashed or stale sessions; clean up with:', cleanups);
+    }
+    return fmt.build();
+}
+//# sourceMappingURL=sessions.js.map