browser-debugger-cli 0.11.0 → 0.13.0

package/dist/ui/formatters/inspect.js

@@ -16,7 +16,7 @@
  */
 import { containerKind } from '../../runtime/dom/inspectLayoutModel.js';
 import { joinLines } from '../formatting.js';
-import { inspectCascadeNote, inspectAnimatingBadge, inspectMidTransitionNote, inspectDarkThemeBadge, inspectedMatchAction, inspectVisibilityBadges, multipleMatchesWarning, } from '../messages/commands.js';
+import { inspectCascadeNote, inspectAnimatingBadge, inspectMidTransitionNote, inspectDarkThemeBadge, inspectPseudoOfNote, inspectedMatchAction, inspectVisibilityBadges, multipleMatchesWarning, } from '../messages/commands.js';
 import { shadowText, sidesShorthand } from '../../utils/cssValues.js';
 import { truncateByLength } from '../../utils/strings.js';
 /** Longest parent label on the parent line (CSS-module class names run long) */
@@ -50,11 +50,12 @@ export function inspectHeader(data) {
         data.element,
         data.content !== undefined && `"${data.content}"`,
         data.placeholder !== undefined && `placeholder "${data.placeholder}"`,
-        data.rect && `${data.rect.w}x${data.rect.h} @${data.rect.x},${data.rect.y}`,
+        data.rect &&
+            `${data.rect.w}x${data.rect.h}${data.rect.screen ? ` (${data.rect.screen.w}x${data.rect.screen.h} on screen)` : ''} @${data.rect.x},${data.rect.y}${data.rect.in ? ' (fixed: viewport position)' : ''}`,
         kind && `[${kind}]`,
         ...inspectVisibilityBadges(data.visibility),
         data.context && `in ${data.context}`,
-        data.theme === 'dark' && inspectDarkThemeBadge(),
+        data.theme === 'dark' && inspectDarkThemeBadge(data.themeFrom === 'emulation'),
         data.animating && inspectAnimatingBadge(data.animating),
     ]
         .filter(Boolean)
@@ -177,9 +178,9 @@ function parentLine(layout) {
     ]);
 }
 /**
- * Font, weight and size as one phrase, e.g. `Inter (webfont) 600 italic 16/24`
- * or `Inter (rendered "Helvetica") 400 14/normal` when the text was drawn in
- * another font (a fallback, or the face's own name); for a container only
+ * Font, weight and size as one phrase, e.g. `Inter (webfont) 600 italic 16/24`,
+ * `Inter (rendered "Helvetica") 400 14/normal` when the text was drawn in a
+ * fallback, or `sans-serif (resolves to "Helvetica")`; for a container only
  * the fields it has.
  *
  * @param text - Text group
@@ -188,6 +189,7 @@ function parentLine(layout) {
 function fontParts(text) {
     const loaded = [
         text.rendered && `rendered "${text.rendered}"`,
+        text.resolved && `resolves to "${text.resolved}"`,
         text.webfont && 'webfont loaded',
     ].filter(Boolean);
     const family = text.family && [text.family, loaded.length > 0 && `(${loaded.join(', ')})`];
@@ -210,6 +212,9 @@ function fontParts(text) {
 }
 /**
  * A contrast as words, e.g. `contrast 4.47 fail on #fff (faded: opacity 0.4)`.
+ * An approximate one gets no pass/fail level, only the estimate and why
+ * (`contrast ≈1 on #fff (approximate: img.hero behind)`): what is behind
+ * the text is not a known color.
  *
  * @param contrast - Contrast
  * @returns Words, or undefined
@@ -218,10 +223,12 @@ function contrastText(contrast) {
     if (!contrast)
         return undefined;
     return [
-        `contrast ${contrast.ratio} ${contrast.level}`,
-        contrast.inherited && `on ${contrast.background}`,
-        contrast.overImage && '(over image)',
+        contrast.approximate
+            ? `contrast ≈${contrast.ratio}`
+            : `contrast ${contrast.ratio} ${contrast.level}`,
+        `on ${contrast.background}`,
         contrast.opacity !== undefined && `(faded: opacity ${contrast.opacity})`,
+        contrast.approximate && `(approximate: ${contrast.approximate.join(', ')})`,
     ]
         .filter(Boolean)
         .join(' ');
@@ -234,6 +241,7 @@ function contrastText(contrast) {
  */
 function textLine(text) {
     return groupLine('text', [
+        text.holder && `in ${text.holder}`,
         ...fontParts(text),
         text.color && `color ${text.color}`,
         contrastText(text.contrast),
@@ -244,6 +252,8 @@ function textLine(text) {
         text.whiteSpace && `ws ${text.whiteSpace}`,
         text.overflow && `text-overflow ${text.overflow}`,
         text.clamp && `clamp ${text.clamp}`,
+        text.truncated && 'truncated',
+        text.gradientFill && 'filled by its background (background-clip: text; no contrast)',
         text.shadow && `shadow ${text.shadow}`,
         text.features && `features ${text.features}`,
     ]);
@@ -257,19 +267,31 @@ function textLine(text) {
 function fillText(fill) {
     if (fill.type === 'solid')
         return `bg ${fill.color}`;
-    if (fill.type === 'gradient')
-        return `bg-image ${fill.value}`;
-    return `bg-image ${fill.value}${fill.size ? ` size ${fill.size}` : ''}`;
+    return [
+        `bg-image ${fill.value}`,
+        fill.size && `size ${fill.size}`,
+        fill.position && `at ${fill.position}`,
+    ]
+        .filter(Boolean)
+        .join(' ');
 }
 /**
- * The fill line: backgrounds, opacity and blend mode.
+ * The fill line: backgrounds (and that they are clipped to gradient text), opacity and blend mode.
  *
  * @param data - Inspect result
  * @returns Line
  */
 function fillLine(data) {
+    const paint = data.paint;
     return groupLine('fill', [
+        paint && `fill ${paint.fill}`,
+        paint &&
+            `stroke ${paint.stroke}${paint.strokeWidth !== undefined ? ` ${paint.strokeWidth}` : ''}`,
         ...(data.fills ?? []).map(fillText),
+        data.text?.gradientFill &&
+            !data.text.holder &&
+            (data.fills ?? []).length > 0 &&
+            'clipped to the text',
         data.opacity !== undefined && `opacity ${data.opacity}`,
         data.blend && `blend ${data.blend}`,
     ]);
@@ -337,6 +359,7 @@ function pseudoText(pseudo) {
         pseudo.content !== undefined && `content ${pseudo.content}`,
         pseudo.display,
         pseudo.position,
+        pseudo.inset && `inset ${pseudo.inset}`,
         pseudo.size && `${pseudo.size.w}x${pseudo.size.h}`,
         pseudo.color && `color ${pseudo.color}`,
         pseudo.fontStyle,
@@ -370,7 +393,9 @@ function treeRow(node) {
     return [
         node.element,
         node.count !== undefined && `×${node.count}`,
-        `${node.w}x${node.h}`,
+        node.contents ? '(contents)' : `${node.w}x${node.h}`,
+        node.shadow && '(shadow root)',
+        node.via && `via ${node.via}`,
         node.layout && `[${node.layout}]`,
         node.text && `"${node.text}"`,
         node.childCount !== undefined && `(${node.childCount})`,
@@ -422,7 +447,7 @@ function ruleScope(entry) {
  * @returns Lines
  */
 function cascadeBlock(data) {
-    const hints = (data.hints ?? []).map((hint) => `${hint.property}: ${hint.value} ${hint.kind === 'not-inherited' ? "is the browser's" : 'has no effect'}: ${hint.reason} → ${hint.fix} · in ${hint.source}`);
+    const hints = (data.hints ?? []).map((hint) => `${hint.property}: ${hint.value} ${hint.kind === 'not-inherited' ? "is the browser's" : hint.only ? `has no effect on ${hint.only.join(', ')}` : 'has no effect'}: ${hint.reason} → ${hint.fix} · in ${hint.source}`);
     return [
         ...labelledLines('hints', data.hints?.length === 0 ? ['none'] : hints),
         ...labelledLines('rules', (data.rules ?? []).map(ruleLine)),
@@ -472,14 +497,19 @@ function whyLines(why, data) {
             entry.important ? ' !important' : '',
             `  ${entry.source}${entry.specificity ? ` [${entry.specificity.join(',')}]` : ''}${ruleScope(entry)}`,
             entry.status === 'inherited' ? ' (inherited)' : '',
+            entry.note ? ` (${entry.note})` : '',
         ].join('');
     });
     const variables = (why.variables ?? []).map((variable) => `    ${variable.name}: ${truncateByLength(variable.value, CASCADE_VALUE_WIDTH)}  ${variable.source}${variable.inherited !== undefined ? ` (inherited from ${levelsUp(variable.inherited)})` : ''}`);
     return [
         `${why.property} = ${why.computed}${midTransition(why.property, data.animating) ? ` ${inspectMidTransitionNote()}` : ''}`,
         ...entries.slice(0, 1),
+        ...(why.chain[0]?.rule
+            ? [`    in ${truncateByLength(why.chain[0].rule, RULE_LINE_WIDTH)}`]
+            : []),
         ...variables,
         ...entries.slice(1),
+        ...(why.inactive ?? []).map((rule) => `  - ${truncateByLength(rule.value, CASCADE_VALUE_WIDTH)}  ${rule.selector} ${rule.condition} (does not apply now)`),
         ...(why.chain.length === 0 ? ['  no author declaration: the default or inherited value'] : []),
     ];
 }
@@ -505,6 +535,8 @@ function midTransition(property, animating) {
 function levelsUp(levels) {
     return levels === 1 ? 'the parent' : `${levels} levels up`;
 }
+/** Longest rule text shown under the winner in `--why` (JSON has up to 300 characters) */
+const RULE_LINE_WIDTH = 120;
 /** Longest declared value shown in `--rules` and `--why` lines (font stacks run long) */
 const CASCADE_VALUE_WIDTH = 60;
 /**
@@ -589,8 +621,9 @@ export function formatInspect(data) {
     const note = data.picked
         ? multipleMatchesWarning(data.count, inspectedMatchAction(data.picked, data.index))
         : undefined;
+    const pseudoNote = data.pseudoOf && inspectPseudoOfNote(data.pseudoOf);
     if (data.why)
-        return joinLines(inspectHeader(data), ...cascadeBlock(data), note);
-    return joinLines(inspectHeader(data), ...body, ...cascadeBlock(data), ...treeBlock(data), note);
+        return joinLines(inspectHeader(data), ...cascadeBlock(data), note, pseudoNote);
+    return joinLines(inspectHeader(data), ...body, ...cascadeBlock(data), ...treeBlock(data), note, pseudoNote);
 }
 //# sourceMappingURL=inspect.js.map

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

@@ -1,6 +1,14 @@
 import type { InstalledSkill } from '../../types.js';
 /**
- * Format where the skill was installed, one line per agent.
+ * Format the targets the skill was written for, as a failed install lists
+ * the ones that succeeded.
+ *
+ * @param skills - Install results
+ * @returns Human-readable lines
+ */
+export declare function formatSkillTargets(skills: InstalledSkill[]): string;
+/**
+ * Format where the skill was installed, plus what to do next.
  *
  * @param data - Install results
  * @returns Human-readable summary

package/dist/ui/formatters/installSkill.js

@@ -1,5 +1,8 @@
 import { homedir } from 'os';
 import { OutputFormatter } from '../formatting.js';
+import { skillBackupMessage } from '../messages/commands.js';
+/** Indent of the path column, so a backup line sits under the path it belongs to */
+const PATH_INDENT = ' '.repeat(2 + 6 + 2 + 9 + 2);
 /**
  * Shorten a path under the home directory to `~/...`.
  *
@@ -11,17 +14,40 @@ function tildePath(path) {
     return path.startsWith(`${home}/`) ? `~${path.slice(home.length)}` : path;
 }
 /**
- * Format where the skill was installed, one line per agent.
+ * Add where the skill was installed, one line per agent, plus where a
+ * replaced copy was kept.
+ *
+ * @param fmt - Formatter to add the lines to
+ * @param skills - Install results
+ * @returns The formatter
+ */
+function addSkillTargets(fmt, skills) {
+    fmt.text('bdg skill:');
+    for (const skill of skills) {
+        fmt.text(`  ${skill.target.padEnd(6)}  ${skill.status.padEnd(9)}  ${tildePath(skill.path)}`);
+        if (skill.backup)
+            fmt.text(`${PATH_INDENT}${skillBackupMessage(tildePath(skill.backup))}`);
+    }
+    return fmt;
+}
+/**
+ * Format the targets the skill was written for, as a failed install lists
+ * the ones that succeeded.
+ *
+ * @param skills - Install results
+ * @returns Human-readable lines
+ */
+export function formatSkillTargets(skills) {
+    return addSkillTargets(new OutputFormatter(), skills).build();
+}
+/**
+ * Format where the skill was installed, plus what to do next.
  *
  * @param data - Install results
  * @returns Human-readable summary
  */
 export function formatInstalledSkills(data) {
-    const fmt = new OutputFormatter().text('bdg skill:');
-    for (const skill of data.skills) {
-        fmt.text(`  ${skill.target.padEnd(6)}  ${skill.status.padEnd(9)}  ${tildePath(skill.path)}`);
-    }
-    return fmt
+    return addSkillTargets(new OutputFormatter(), data.skills)
         .hints('Next:', [
         'Start a new agent session to load it (running sessions keep the old list)',
         'After upgrading bdg, run bdg install-skill again',

package/dist/ui/formatters/layout.js

@@ -3,7 +3,7 @@
  */
 import { indexSourceText } from '../../errors/messages.js';
 import { OutputFormatter } from '../formatting.js';
-import { coverText, indexLayoutHeadline, layoutHeadline, layoutPositionLabel, moreMatchesNote, pageLayoutLine, } from '../messages/commands.js';
+import { coverText, indexLayoutHeadline, layoutHeadline, layoutPositionLabel, maskedText, moreMatchesNote, pageLayoutLine, } from '../messages/commands.js';
 /** Elements listed in human output (JSON has up to 100) */
 const LAYOUT_DISPLAY_LIMIT = 20;
 /**
@@ -26,6 +26,7 @@ export function layoutLine(element, viewport) {
         element.coveredBy && coverText(element.coveredBy, element.coverTransparent),
         element.inert && 'inert',
         element.invisible,
+        element.masked && maskedText(element.masked),
         element.context && element.context !== element.clippedBy && `in ${element.context}`,
     ]
         .filter(Boolean)

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

@@ -41,7 +41,7 @@ export declare function pageStartOf(requests: NetworkRequest[]): PageStart | und
 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.
+ * with the column header the first time (the stream banner is on stderr).
  *
  * @param requests - Newly finished requests
  * @param options - `header` the first time; `verbose` for full URLs; the page start for START

package/dist/ui/formatters/networkList.js

@@ -170,7 +170,7 @@ function formatNetworkListHuman(requests, options) {
 const FOLLOW_ID_WIDTH = 14;
 /**
  * Rows of the network stream: requests that finished since the last poll,
- * with the column header the first time.
+ * with the column header the first time (the stream banner is on stderr).
  *
  * @param requests - Newly finished requests
  * @param options - `header` the first time; `verbose` for full URLs; the page start for START
@@ -180,7 +180,6 @@ export function formatNetworkFollowRows(requests, options = {}) {
     const fmt = new OutputFormatter();
     const widths = columnWidths(requests, FOLLOW_ID_WIDTH);
     if (options.header) {
-        fmt.text('Streaming network requests... (Ctrl+C to stop)');
         fmt.text(formatColumnHeader(widths));
         fmt.separator('─', SEPARATOR_WIDTH);
     }

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

@@ -53,6 +53,8 @@ export interface PreviewJsonData {
     target: BdgOutput['target'];
     partial?: boolean;
     totals?: BdgOutput['totals'];
+    /** When the page's renderer crashed (epoch ms), while it is not loaded again */
+    pageCrashedAt?: number;
     network?: BdgOutput['data']['network'];
     console?: BdgOutput['data']['console'];
 }

package/dist/ui/formatters/preview.js

@@ -3,7 +3,9 @@ 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 { withPageCrashedNote } from '../messages/commands.js';
 import { PREVIEW_EMPTY_STATES, PREVIEW_HEADERS, compactTipsMessage, verboseCommandsMessage, } from '../messages/preview.js';
+import { consoleDroppedNote } from '../messages/consoleMessages.js';
 import { sessionCommand } from '../messages/sessionCommand.js';
 /**
  * Infer resource type from MIME type when CDP doesn't provide it.
@@ -69,6 +71,7 @@ export function buildPreviewJsonData(output, options) {
         target: output.target,
         ...(output.partial !== undefined && { partial: output.partial }),
         ...(output.totals && { totals: output.totals }),
+        ...(output.pageCrashedAt !== undefined && { pageCrashedAt: output.pageCrashedAt }),
         ...(pick('network') && output.data.network && { network: last(output.data.network) }),
         ...(pick('console') && output.data.console && { console: last(output.data.console) }),
     };
@@ -78,19 +81,22 @@ export function buildPreviewJsonData(output, options) {
  *
  * @param output - Preview output
  * @param options - Preview options
- * @returns Pretty-printed `{ version, success, data }` envelope
+ * @returns `{ version, success, data }` envelope, pretty-printed, or on one
+ *   line in follow mode (one object per line, NDJSON)
  */
 function formatPreviewAsJson(output, options) {
-    return JSON.stringify(buildSuccessResponse(buildPreviewJsonData(output, options)), null, 2);
+    const envelope = buildSuccessResponse(buildPreviewJsonData(output, options));
+    return options.follow ? JSON.stringify(envelope) : JSON.stringify(envelope, null, 2);
 }
 /**
- * Format preview as human-readable output
+ * Format preview as human-readable output, after a warning when the page
+ * crashed (what is shown was collected before).
  */
 function formatPreviewHumanReadable(output, options) {
-    if (options.verbose) {
-        return formatPreviewVerbose(output, options);
-    }
-    return formatPreviewCompact(output, options);
+    const body = options.verbose
+        ? formatPreviewVerbose(output, options)
+        : formatPreviewCompact(output, options);
+    return withPageCrashedNote(body, output.pageCrashedAt);
 }
 /**
  * Format preview in compact format (default)
@@ -145,6 +151,8 @@ function formatPreviewCompact(output, options) {
             const totalCount = output.totals?.console ?? output.data.console.length;
             const limitHint = formatLimitHint(showingCount, totalCount);
             fmt.text(`CONSOLE (${showingCount}/${totalCount})${limitHint}:`);
+            if (output.totals?.consoleDropped)
+                fmt.text(`  ${consoleDroppedNote(output.totals.consoleDropped)}`);
             if (messages.length === 0) {
                 fmt.text(`  ${PREVIEW_EMPTY_STATES.NO_DATA}`);
             }
@@ -232,6 +240,8 @@ function formatPreviewVerbose(output, options) {
                 ? `Console Messages (all ${messages.length})`
                 : `Console Messages (last ${messages.length} of ${output.totals?.console ?? output.data.console.length})`;
             fmt.text(title).separator('━', 50);
+            if (output.totals?.consoleDropped)
+                fmt.text(consoleDroppedNote(output.totals.consoleDropped));
             if (messages.length === 0) {
                 fmt.text(PREVIEW_EMPTY_STATES.NO_CONSOLE_MESSAGES);
             }

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

@@ -1,7 +1,7 @@
 import type { RunningSessionInfo } from '../../session/sessionList.js';
 /**
- * Format the sessions as a table, followed by the cleanup commands of
- * crashed and stale sessions.
+ * Format the sessions as a table, followed by why ended sessions ended and
+ * the cleanup commands of crashed and stale sessions.
  *
  * @param data - Sessions
  * @returns Human-readable list

package/dist/ui/formatters/sessions.js

@@ -1,9 +1,10 @@
 import { OutputFormatter } from '../formatting.js';
+import { endedSessionText } from '../messages/session.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.
+ * Format the sessions as a table, followed by why ended sessions ended and
+ * the cleanup commands of crashed and stale sessions.
  *
  * @param data - Sessions
  * @returns Human-readable list
@@ -31,6 +32,12 @@ export function formatSessionList(data) {
             .join('  ')
             .trimEnd());
     }
+    const ended = data.sessions.flatMap(({ name, endReason, endedAt }) => endReason && endedAt !== undefined
+        ? [endedSessionText(name ?? DEFAULT_SESSION_LABEL, { reason: endReason, endedAt })]
+        : []);
+    if (ended.length > 0) {
+        fmt.blank().section('Ended without bdg stop:', ended);
+    }
     const cleanups = data.sessions.flatMap((session) => (session.cleanup ? [session.cleanup] : []));
     if (cleanups.length > 0) {
         fmt.hints('Crashed or stale sessions; clean up with:', cleanups);

package/dist/ui/formatters/status.js

@@ -98,7 +98,7 @@ export function appearanceLines(metadata, pageState) {
             ? [
                 [
                     'Viewport',
-                    `${viewport.width}×${viewport.height}${metadata.viewport ? ` (emulated ${metadata.viewport.width}x${metadata.viewport.height})` : ''}`,
+                    `${viewport.width}×${viewport.height}${metadata.viewport ? ` (emulated ${metadata.viewport.width}x${metadata.viewport.height}${metadata.viewport.mobile ? ', phone' : ''})` : ''}`,
                 ],
             ]
             : []),

package/dist/ui/logging/logger.d.ts

@@ -29,7 +29,7 @@ export type LogLevel = 'info' | 'debug';
  * Log contexts for different components.
  * Used to prefix log messages with component name.
  */
-export type LogContext = 'bdg' | 'launcher' | 'daemon' | 'client' | 'cleanup' | 'session' | 'chrome' | 'cdp' | 'ipc' | 'http' | 'dialogs' | 'navigation' | 'console' | 'dom' | 'network' | 'diagnostics' | 'readiness' | 'atomic-file' | 'object-expander' | 'fetcher' | 'targets';
+export type LogContext = 'bdg' | 'launcher' | 'daemon' | 'client' | 'cleanup' | 'session' | 'chrome' | 'cdp' | 'ipc' | 'http' | 'dialogs' | 'navigation' | 'page-crash' | 'console' | 'dom' | 'network' | 'diagnostics' | 'readiness' | 'atomic-file' | 'object-expander' | 'fetcher' | 'targets';
 /**
  * Logger instance with support for different log levels.
  */