browser-debugger-cli 0.7.1 → 0.8.0

package/dist/ui/formatters/listeners.js

@@ -0,0 +1,96 @@
+/**
+ * Human-readable output of `bdg dom listeners`.
+ */
+import { delegatedOnlyTypes } from '../../runtime/dom/listenerSummary.js';
+import { OutputFormatter } from '../formatting.js';
+import { NO_LISTENERS_HINT, delegatedListenersNote, listenersHeadline, noListenersMessage, } from '../messages/commands.js';
+import { truncateByLength } from '../../utils/strings.js';
+/** Longest handler name shown (JSON has the full name) */
+const NAME_MAX_LENGTH = 30;
+/** Shown for handlers without a name */
+const ANONYMOUS = '(anonymous)';
+/**
+ * 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 function handlerLocation(handler) {
+    if (!handler.scriptId || handler.scriptId === '0')
+        return 'native';
+    return `script ${handler.scriptId}:${handler.lineNumber + 1}:${handler.columnNumber + 1}`;
+}
+/**
+ * Columns of one listener row: placement, node, handler name, location, and
+ * the flags with the source preview.
+ *
+ * @param listener - Listener
+ * @returns Row cells
+ */
+function listenerCells(listener) {
+    const flags = [
+        listener.useCapture && 'capture',
+        listener.passive && 'passive',
+        listener.once && 'once',
+    ].filter(Boolean);
+    const preview = flags.length > 0 ? `[${flags.join(', ')}] ` : '';
+    return [
+        listener.on,
+        listener.node,
+        truncateByLength(listener.handler.name || ANONYMOUS, NAME_MAX_LENGTH),
+        handlerLocation(listener.handler),
+        `${preview}${listener.handler.preview}`,
+    ];
+}
+/**
+ * Lay out rows as aligned columns (the last column is not padded).
+ *
+ * @param rows - Row cells
+ * @returns Lines
+ */
+function alignColumns(rows) {
+    const widths = (rows[0] ?? []).map((_, column) => Math.max(...rows.map((row) => (row[column] ?? '').length)));
+    return rows.map((row) => row
+        .map((cell, column) => (column === row.length - 1 ? cell : cell.padEnd(widths[column] ?? 0)))
+        .join('  '));
+}
+/**
+ * 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 function formatListeners(result, types) {
+    const fmt = new OutputFormatter();
+    if (result.listeners.length === 0) {
+        fmt.text(noListenersMessage(result.element, types));
+        fmt.tip(NO_LISTENERS_HINT);
+    }
+    else {
+        fmt.text(listenersHeadline(result.element, result.listeners.length));
+        appendListenerGroups(fmt, result.listeners);
+        const delegated = delegatedOnlyTypes(result.listeners);
+        if (delegated.length > 0)
+            fmt.blank().text(delegatedListenersNote(delegated));
+    }
+    if (result.warning)
+        fmt.blank().text(`⚠ Warning: ${result.warning}`);
+    return fmt.build();
+}
+/**
+ * Add one block per event type: the type, then its listeners.
+ *
+ * @param fmt - Output being built
+ * @param listeners - Listeners, grouped by type
+ */
+function appendListenerGroups(fmt, listeners) {
+    const lines = alignColumns(listeners.map(listenerCells));
+    listeners.forEach((listener, i) => {
+        if (listener.type !== listeners[i - 1]?.type)
+            fmt.blank().text(listener.type);
+        fmt.text(`  ${lines[i] ?? ''}`);
+    });
+}
+//# sourceMappingURL=listeners.js.map

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

@@ -3,12 +3,12 @@
  *
  * Formats network request and response headers for human-readable display.
  */
-import type { WorkerNetworkHeadersData } from '../../ipc/protocol/commands.js';
+import type { SessionNetworkHeadersData } from '../../ipc/protocol/commands.js';
 /**
  * Format network request headers for display.
  *
- * @param data - Network headers data from worker
+ * @param data - Network headers data from the session
  * @returns Formatted string for console output
  */
-export declare function formatNetworkHeaders(data: WorkerNetworkHeadersData): string;
+export declare function formatNetworkHeaders(data: SessionNetworkHeadersData): string;
 //# sourceMappingURL=networkHeaders.d.ts.map

package/dist/ui/formatters/networkHeaders.js

@@ -3,11 +3,11 @@
  *
  * Formats network request and response headers for human-readable display.
  */
-import { OutputFormatter } from '../../ui/formatting.js';
+import { OutputFormatter } from '../formatting.js';
 /**
  * Format network request headers for display.
  *
- * @param data - Network headers data from worker
+ * @param data - Network headers data from the session
  * @returns Formatted string for console output
  */
 export function formatNetworkHeaders(data) {
@@ -34,14 +34,17 @@ export function formatNetworkHeaders(data) {
 /**
  * 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.
+ *
  * @param fmt - Output formatter instance
  * @param headers - Headers to format
  */
 function formatHeaderSection(fmt, headers) {
     const entries = Object.entries(headers).sort(([a], [b]) => a.localeCompare(b));
-    const maxKeyLength = Math.max(...entries.map(([k]) => k.length));
+    const keyWidth = Math.max(...entries.map(([k]) => k.length)) + 4;
     entries.forEach(([key, value]) => {
-        fmt.keyValue(`  ${key}:`, value, maxKeyLength + 4);
+        value.split('\n').forEach((line) => fmt.keyValue(`  ${key}`, line, keyWidth));
     });
 }
 //# sourceMappingURL=networkHeaders.js.map

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

@@ -6,12 +6,24 @@
  */
 import type { NetworkRequest } from '../../types.js';
 export interface NetworkListOptions {
-    json?: boolean;
     verbose?: boolean;
     last?: number;
     totalCount?: number;
-    follow?: boolean;
+    /** Requests matching the filters, before --last (defaults to totalCount) */
+    filteredCount?: number;
 }
+/**
+ * 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
+ * @returns Text to print (empty when there is nothing new)
+ */
+export declare function formatNetworkFollowRows(requests: NetworkRequest[], options?: {
+    header?: boolean;
+    verbose?: boolean;
+}): string;
 /**
  * Format network requests for display.
  */

package/dist/ui/formatters/networkList.js

@@ -4,11 +4,11 @@
  * Provides human-readable and JSON output formats for network requests
  * with support for filtering results display.
  */
-import { getResourceTypeAbbr } from '../../ui/formatters/preview.js';
-import { OutputFormatter, truncateUrl } from '../../ui/formatting.js';
+import { getResourceTypeAbbr } from './preview.js';
+import { getRequestState } from './requestStatus.js';
+import { OutputFormatter, truncateUrl } from '../formatting.js';
 const SIZE_UNITS = ['B', 'KB', 'MB', 'GB'];
 const SEPARATOR_WIDTH = 80;
-const COLUMN_HEADER = '[ID]   STS METH TYP     SIZE  URL';
 function formatSize(bytes) {
     if (bytes === undefined || bytes === 0)
         return '-';
@@ -21,66 +21,111 @@ function formatSize(bytes) {
     const formatted = size < 10 ? size.toFixed(1) : Math.round(size).toString();
     return `${formatted} ${SIZE_UNITS[unitIndex]}`;
 }
-function formatStatus(status) {
-    if (status === undefined || status === 0)
+function formatStatus(request) {
+    const state = getRequestState(request);
+    if (state === 'pending')
         return 'PND';
-    return `${status}`;
+    return state === 'failed' ? 'ERR' : `${request.status}`;
 }
-function formatRequestLine(request, verbose) {
-    const id = request.requestId.padEnd(4);
-    const status = formatStatus(request.status).padEnd(3);
+/**
+ * Format a request duration for the TIME column.
+ *
+ * @param ms - Duration in milliseconds (undefined while pending)
+ * @returns e.g. "85ms", "1.2s", or "-"
+ */
+function formatDuration(ms) {
+    if (ms === undefined)
+        return '-';
+    return ms < 1000 ? `${Math.round(ms)}ms` : `${(ms / 1000).toFixed(1)}s`;
+}
+/**
+ * Column header aligned to the widest request id in the list.
+ *
+ * @param idWidth - Width of the bracketed id column
+ * @returns Header line
+ */
+function formatColumnHeader(idWidth) {
+    return `${'[ID]'.padEnd(idWidth)} STS METH 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)
+ * @returns Row text
+ */
+function formatRequestLine(request, verbose, idWidth) {
+    const id = `[${request.requestId}]`.padEnd(idWidth);
+    const status = formatStatus(request).padEnd(3);
     const method = request.method.padEnd(4);
-    const type = getResourceTypeAbbr(request.resourceType, request.mimeType);
+    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}  ${url}`;
+    return `${id} ${status} ${method} ${type} ${size} ${time}  ${url}`;
 }
-function buildHeader(options, showingCount, totalCount) {
-    if (options.follow) {
-        return `NETWORK REQUESTS (showing ${showingCount} of ${totalCount})`;
-    }
-    const lastLimit = options.last ?? 0;
-    if (lastLimit > 0 && totalCount > showingCount) {
-        return `NETWORK REQUESTS (last ${showingCount} of ${totalCount})`;
+/**
+ * Header line with how many requests are shown.
+ *
+ * @param showingCount - Requests listed
+ * @param filteredCount - Requests matching the filters
+ * @param totalCount - Requests captured
+ * @returns e.g. "NETWORK REQUESTS (last 10 of 42)" or "NETWORK REQUESTS (21 matching, 240 in all)"
+ */
+function buildHeader(showingCount, filteredCount, totalCount) {
+    const shown = filteredCount > showingCount ? `last ${showingCount} of ` : '';
+    if (filteredCount < totalCount) {
+        return `NETWORK REQUESTS (${shown}${filteredCount} matching, ${totalCount} in all)`;
     }
-    return `NETWORK REQUESTS (${totalCount})`;
+    return `NETWORK REQUESTS (${shown}${totalCount})`;
 }
 function formatNetworkListHuman(requests, options) {
     const fmt = new OutputFormatter();
     const totalCount = options.totalCount ?? requests.length;
-    const header = buildHeader(options, requests.length, totalCount);
+    const header = buildHeader(requests.length, options.filteredCount ?? totalCount, totalCount);
     fmt.text(header);
     fmt.separator('─', SEPARATOR_WIDTH);
     if (requests.length === 0) {
         fmt.text('No matching requests found.');
         return fmt.build();
     }
-    fmt.text(COLUMN_HEADER);
+    const idWidth = Math.max('[ID]'.length, ...requests.map((r) => r.requestId.length + 2));
+    fmt.text(formatColumnHeader(idWidth));
     fmt.separator('─', SEPARATOR_WIDTH);
     const verbose = options.verbose ?? false;
     for (const request of requests) {
-        fmt.text(formatRequestLine(request, verbose));
+        fmt.text(formatRequestLine(request, verbose, idWidth));
     }
     return fmt.build();
 }
-function formatNetworkListJson(requests, options) {
-    const totalCount = options.totalCount ?? requests.length;
-    const output = {
-        success: true,
-        data: requests,
-        count: requests.length,
-        totalCount,
-        filtered: requests.length !== totalCount,
-    };
-    return JSON.stringify(output, null, 2);
+/** Narrowest id column of the stream (ids of later rows may be longer) */
+const FOLLOW_ID_WIDTH = 14;
+/**
+ * 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
+ * @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));
+    if (options.header) {
+        fmt.text('Streaming network requests... (Ctrl+C to stop)');
+        fmt.text(formatColumnHeader(idWidth));
+        fmt.separator('─', SEPARATOR_WIDTH);
+    }
+    for (const request of requests)
+        fmt.text(formatRequestLine(request, options.verbose ?? false, idWidth));
+    return fmt.build();
 }
 /**
  * Format network requests for display.
  */
 export function formatNetworkList(requests, options) {
-    return options.json
-        ? formatNetworkListJson(requests, options)
-        : formatNetworkListHuman(requests, options);
+    return formatNetworkListHuman(requests, options);
 }
 //# sourceMappingURL=networkList.js.map

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

@@ -1,5 +1,5 @@
 import type { Protocol } from '../../connection/typed-cdp.js';
-import type { BdgOutput } from '../../types';
+import type { BdgOutput } from '../../types.js';
 /**
  * Infer resource type from MIME type when CDP doesn't provide it.
  *
@@ -27,8 +27,6 @@ export interface PreviewOptions {
     network?: boolean | undefined;
     /** Limit output to console messages (ignores network data). */
     console?: boolean | undefined;
-    /** Show DOM/A11y tree data. */
-    dom?: boolean | undefined;
     /** Number of recent entries to include. */
     last: number;
     /** Use the expanded, human-friendly layout. */
@@ -46,4 +44,24 @@ export interface PreviewOptions {
  * Format preview output (peek command)
  */
 export declare function formatPreview(output: BdgOutput, options: PreviewOptions): string;
+/**
+ * Data payload of `peek --json` / `tail --json` (goes in the envelope's `data`).
+ */
+export interface PreviewJsonData {
+    timestamp: string;
+    duration: number;
+    target: BdgOutput['target'];
+    partial?: boolean;
+    totals?: BdgOutput['totals'];
+    network?: BdgOutput['data']['network'];
+    console?: BdgOutput['data']['console'];
+}
+/**
+ * Build the JSON payload for a preview, honoring the section and `--last` filters.
+ *
+ * @param output - Preview output from the daemon
+ * @param options - Preview options (section filters, last N)
+ * @returns Payload for the response envelope's `data`
+ */
+export declare function buildPreviewJsonData(output: BdgOutput, options: PreviewOptions): PreviewJsonData;
 //# sourceMappingURL=preview.d.ts.map

package/dist/ui/formatters/preview.js

@@ -1,7 +1,9 @@
 import { RESOURCE_TYPE_ABBREVIATIONS, MIME_TYPE_RULES } from '../../constants.js';
-import { OutputFormatter, truncateUrl, truncateText } from '../../ui/formatting.js';
-import { PREVIEW_EMPTY_STATES, PREVIEW_HEADERS, compactTipsMessage, verboseCommandsMessage, } from '../../ui/messages/preview.js';
-import { semantic } from './semantic.js';
+import { buildSuccessResponse } from '../OutputBuilder.js';
+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';
 /**
  * Infer resource type from MIME type when CDP doesn't provide it.
  *
@@ -23,7 +25,7 @@ export function inferResourceTypeFromMime(mimeType) {
 function formatLimitHint(showing, total) {
     if (showing >= total)
         return '';
-    return ` (showing last ${showing}, use --last ${total} to see all)`;
+    return ` (showing last ${showing}, use --last 0 to see all)`;
 }
 /**
  * Get compact abbreviation for resource type.
@@ -50,39 +52,35 @@ export function formatPreview(output, options) {
     return formatPreviewHumanReadable(output, options);
 }
 /**
- * Format preview as JSON
+ * Build the JSON payload for a preview, honoring the section and `--last` filters.
  *
- * Returns the output in standard bdg JSON format (consistent with stop command).
- * BREAKING CHANGE: Previously wrapped in preview object, now returns at root level.
+ * @param output - Preview output from the daemon
+ * @param options - Preview options (section filters, last N)
+ * @returns Payload for the response envelope's `data`
  */
-function formatPreviewAsJson(output, options) {
-    const data = { ...output.data };
-    if (options.network) {
-        delete data.console;
-        delete data.dom;
-    }
-    if (options.console) {
-        delete data.network;
-        delete data.dom;
-    }
-    if (options.dom) {
-        delete data.network;
-        delete data.console;
-    }
-    const lastCount = options.last;
-    if (lastCount > 0) {
-        if (data.network && data.network.length > lastCount) {
-            data.network = data.network.slice(-lastCount);
-        }
-        if (data.console && data.console.length > lastCount) {
-            data.console = data.console.slice(-lastCount);
-        }
-    }
-    const jsonOutput = {
-        ...output,
-        data,
+export function buildPreviewJsonData(output, options) {
+    const only = options.network ? 'network' : options.console ? 'console' : null;
+    const pick = (key) => !only || only === key;
+    const last = (items) => items && options.last > 0 ? items.slice(-options.last) : items;
+    return {
+        timestamp: output.timestamp,
+        duration: output.duration,
+        target: output.target,
+        ...(output.partial !== undefined && { partial: output.partial }),
+        ...(output.totals && { totals: output.totals }),
+        ...(pick('network') && output.data.network && { network: last(output.data.network) }),
+        ...(pick('console') && output.data.console && { console: last(output.data.console) }),
     };
-    return JSON.stringify(jsonOutput, null, 2);
+}
+/**
+ * Format preview as a JSON response envelope.
+ *
+ * @param output - Preview output
+ * @param options - Preview options
+ * @returns Pretty-printed `{ version, success, data }` envelope
+ */
+function formatPreviewAsJson(output, options) {
+    return JSON.stringify(buildSuccessResponse(buildPreviewJsonData(output, options)), null, 2);
 }
 /**
  * Format preview as human-readable output
@@ -99,7 +97,7 @@ function formatPreviewHumanReadable(output, options) {
  */
 function formatPreviewCompact(output, options) {
     const fmt = new OutputFormatter();
-    fmt.text(`PREVIEW | Duration: ${Math.floor(output.duration / 1000)}s | Updated: ${output.timestamp}`);
+    fmt.text(`PREVIEW | Duration: ${Math.floor(output.duration / 1000)}s | Updated: ${formatTimestamp(Date.now())}`);
     if (options.follow && options.viewedAt) {
         fmt.text(`Viewed at: ${options.viewedAt.toISOString()}`);
     }
@@ -111,7 +109,7 @@ function formatPreviewCompact(output, options) {
         if (!options.console || hasNetworkData) {
             const requests = lastCount === 0 ? output.data.network : output.data.network.slice(-lastCount);
             const showingCount = requests.length;
-            const totalCount = output.data.network.length;
+            const totalCount = output.totals?.network ?? output.data.network.length;
             const limitHint = formatLimitHint(showingCount, totalCount);
             fmt.text(`NETWORK (${showingCount}/${totalCount})${limitHint}:`);
             if (requests.length === 0) {
@@ -121,7 +119,7 @@ function formatPreviewCompact(output, options) {
                     options.unfilteredNetworkCount > 0) {
                     const typesStr = options.filteredTypes.join(', ');
                     fmt.text(`  No ${typesStr} requests found (filtered from ${options.unfilteredNetworkCount} total requests)`);
-                    fmt.text(`  Try: bdg peek --network (to see all types)`);
+                    fmt.text(`  Try: bdg network list (to see all types)`);
                 }
                 else {
                     fmt.text(`  ${PREVIEW_EMPTY_STATES.NO_DATA}`);
@@ -130,8 +128,7 @@ function formatPreviewCompact(output, options) {
             else {
                 const networkLines = requests.map((req) => {
                     const typeAbbr = getResourceTypeAbbr(req.resourceType, req.mimeType);
-                    // Show error text for failed requests (SSL errors, connection failures, etc.)
-                    const status = req.errorText ? `FAILED (${req.errorText})` : (req.status ?? 'pending');
+                    const status = getRequestState(req) === 'pending' ? 'PND' : formatRequestStatus(req);
                     const url = truncateUrl(req.url, 50);
                     return `[${req.requestId}] [${typeAbbr}] ${status} ${req.method} ${url}`;
                 });
@@ -141,10 +138,10 @@ function formatPreviewCompact(output, options) {
         }
     }
     if (!options.network && output.data.console) {
-        if (options.network === undefined || hasConsoleData) {
+        if (!options.network || hasConsoleData) {
             const messages = lastCount === 0 ? output.data.console : output.data.console.slice(-lastCount);
             const showingCount = messages.length;
-            const totalCount = output.data.console.length;
+            const totalCount = output.totals?.console ?? output.data.console.length;
             const limitHint = formatLimitHint(showingCount, totalCount);
             fmt.text(`CONSOLE (${showingCount}/${totalCount})${limitHint}:`);
             if (messages.length === 0) {
@@ -161,23 +158,8 @@ function formatPreviewCompact(output, options) {
             fmt.blank();
         }
     }
-    if (options.dom && output.data.dom?.a11yTree) {
-        const tree = output.data.dom.a11yTree;
-        fmt.text(`DOM/A11Y TREE (${tree.count} nodes):`);
-        const treeWithMap = {
-            root: tree.root,
-            nodes: new Map(Object.entries(tree.nodes)),
-            count: tree.count,
-        };
-        fmt.text(semantic(treeWithMap));
-        fmt.blank();
-    }
-    else if (options.dom) {
-        fmt.text(`DOM: ${PREVIEW_EMPTY_STATES.NO_DATA}`);
-        fmt.blank();
-    }
     if (!options.follow) {
-        fmt.text(compactTipsMessage());
+        fmt.tip(compactTipsMessage());
     }
     return fmt.build();
 }
@@ -190,7 +172,8 @@ function formatPreviewVerbose(output, options) {
     fmt.text(PREVIEW_HEADERS.LIVE_PREVIEW).separator('━', 50);
     fmt.keyValueList([
         ['Duration', `${Math.floor(output.duration / 1000)}s`],
-        ['Last updated', output.timestamp],
+        ['Session started', formatTimestamp(Date.parse(output.timestamp))],
+        ['Last updated', formatTimestamp(Date.now())],
     ], 18);
     if (options.follow && options.viewedAt) {
         fmt.keyValue('Viewed at', options.viewedAt.toISOString(), 18);
@@ -204,7 +187,7 @@ function formatPreviewVerbose(output, options) {
             const requests = lastCount === 0 ? output.data.network : output.data.network.slice(-lastCount);
             const title = lastCount === 0
                 ? `Network Requests (all ${requests.length})`
-                : `Network Requests (last ${requests.length} of ${output.data.network.length})`;
+                : `Network Requests (last ${requests.length} of ${output.totals?.network ?? output.data.network.length})`;
             fmt.text(title).separator('━', 50);
             if (requests.length === 0) {
                 if (options.filteredTypes &&
@@ -213,7 +196,7 @@ function formatPreviewVerbose(output, options) {
                     options.unfilteredNetworkCount > 0) {
                     const typesStr = options.filteredTypes.join(', ');
                     fmt.text(`No ${typesStr} requests found (filtered from ${options.unfilteredNetworkCount} total requests)`);
-                    fmt.text(`Try: bdg peek --network (to see all resource types)`);
+                    fmt.text(`Try: bdg network list (to see all resource types)`);
                 }
                 else {
                     fmt.text(PREVIEW_EMPTY_STATES.NO_NETWORK_REQUESTS);
@@ -221,16 +204,14 @@ function formatPreviewVerbose(output, options) {
             }
             else {
                 requests.forEach((req) => {
-                    const isFailed = Boolean(req.errorText) || (req.status !== undefined && req.status >= 400);
-                    const statusColor = isFailed ? 'ERR' : 'OK';
-                    const status = req.errorText ? `FAILED` : (req.status?.toString() ?? 'pending');
+                    const state = getRequestState(req);
+                    const isFailed = state === 'failed' || (req.status ?? 0) >= 400;
+                    const statusColor = state === 'pending' ? 'PND' : isFailed ? 'ERR' : 'OK';
+                    const status = state === 'failed' ? 'FAILED' : formatRequestStatus(req);
                     fmt.text(`${statusColor} ${status} ${req.method} ${req.url}`);
-                    if (req.errorText) {
-                        fmt.text(`  Error: ${req.errorText}`);
-                    }
-                    if (req.blockedReason) {
-                        fmt.text(`  Blocked: ${req.blockedReason}`);
-                    }
+                    const reason = failureReason(req);
+                    if (reason)
+                        fmt.text(`  Error: ${reason}`);
                     if (req.resourceType) {
                         fmt.text(`  Resource: ${req.resourceType}`);
                     }
@@ -244,11 +225,11 @@ function formatPreviewVerbose(output, options) {
         }
     }
     if (!options.network && output.data.console) {
-        if (options.network === undefined || hasConsoleData) {
+        if (!options.network || hasConsoleData) {
             const messages = lastCount === 0 ? output.data.console : output.data.console.slice(-lastCount);
             const title = lastCount === 0
                 ? `Console Messages (all ${messages.length})`
-                : `Console Messages (last ${messages.length} of ${output.data.console.length})`;
+                : `Console Messages (last ${messages.length} of ${output.totals?.console ?? output.data.console.length})`;
             fmt.text(title).separator('━', 50);
             if (messages.length === 0) {
                 fmt.text(PREVIEW_EMPTY_STATES.NO_CONSOLE_MESSAGES);
@@ -263,7 +244,7 @@ function formatPreviewVerbose(output, options) {
         }
     }
     if (!options.follow) {
-        fmt.text(verboseCommandsMessage());
+        fmt.tip(verboseCommandsMessage());
     }
     return fmt.build();
 }

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

@@ -0,0 +1,34 @@
+/**
+ * Shared status labels for network requests.
+ *
+ * A request is pending until it completes or fails. Status 0 means it failed
+ * without any response (DNS, refused, aborted, blocked); a request that got a
+ * 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;
+/**
+ * Human-readable status: the HTTP status (with the failure reason if loading
+ * failed after the response), `FAILED (<reason>)`, or `pending`.
+ *
+ * @param request - Captured request
+ * @returns Status label
+ */
+export declare function formatRequestStatus(request: Pick<NetworkRequest, 'status' | 'errorText'>): string;
+//# sourceMappingURL=requestStatus.d.ts.map