cssprobe-cli 0.1.0 → 0.1.2

package/README.md

@@ -24,10 +24,10 @@ cssprobe-cli skill-install
 
 ```bash
 # With explicit selector
-cssprobe-cli inspect https://example.com ".main-content"
+cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout ".container"
 
 # Auto-detect root element
-cssprobe-cli inspect https://example.com
+cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout
 
 # Local HTML file
 cssprobe-cli inspect ./test.html ".container"
@@ -49,8 +49,8 @@ cssprobe-cli inspect https://mysite.com/page ".target" --state ~/.cssprobe-cli/s
 ### 3. JSON Output
 
 ```bash
-cssprobe-cli inspect https://example.com ".content" --json
-cssprobe-cli --json inspect https://example.com ".content" | jq '.findings[] | {id, confidence, message}'
+cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body --json
+cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body --json | jq '.findings[] | {id, confidence, message}'
 ```
 
 ---
@@ -74,6 +74,12 @@ cssprobe-cli login <url>                 # Interactive login, save state
 cssprobe-cli state-import [file]         # Import cookies from Netscape format
 ```
 
+### Inspection
+
+```bash
+cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body
+```
+
 ### Configuration
 
 ```bash
@@ -101,10 +107,11 @@ Options:
   --headed                    Show browser window
   --browser <engine>          chromium|firefox|webkit (default chromium)
   --zoom                      Run 1x/0.5x viewport diagnosis
-  --depth <n>                 DOM tree depth (default 6)
+  --depth <n>                 DOM tree depth (default: auto)
   --max-nodes <n>             Node count cap (default 60)
   --up-to <tag>               Ancestor stop tag (default html)
   --state <file>              Load saved state (cookies + localStorage)
+  --brief                     Compact output: tree sketch + warnings/errors only
 ```
 
 ---

package/dist/browser/launcher.d.ts

@@ -13,6 +13,8 @@ export declare class BrowserLauncher {
     constructor(options?: LauncherOptions);
     open(url: string): Promise<void>;
     collect(cfg: CollectConfig): Promise<Snapshot>;
+    /** Measure the DOM tree depth from a root selector to the deepest leaf. */
+    measureDepth(selector: string): Promise<number>;
     /** Scan the page for likely root elements (modals, dialogs, scroll containers). */
     autoDetectRoot(): Promise<string[]>;
     /**

package/dist/browser/launcher.js

@@ -106,6 +106,25 @@ class BrowserLauncher {
         }, cfg);
         return snapshot;
     }
+    /** Measure the DOM tree depth from a root selector to the deepest leaf. */
+    async measureDepth(selector) {
+        if (!this.page)
+            throw new Error('Browser not opened. Call open() first.');
+        return this.page.evaluate((sel) => {
+            const root = document.querySelector(sel);
+            if (!root)
+                return 0;
+            let maxDepth = 0;
+            const walk = (el, depth) => {
+                if (depth > maxDepth)
+                    maxDepth = depth;
+                for (const child of Array.from(el.children))
+                    walk(child, depth + 1);
+            };
+            walk(root, 0);
+            return maxDepth;
+        }, selector);
+    }
     /** Scan the page for likely root elements (modals, dialogs, scroll containers). */
     async autoDetectRoot() {
         if (!this.page)

package/dist/cli/commands.d.ts

@@ -21,6 +21,7 @@ export declare const inspectCommand: import("./command").CommandSchema<z.ZodObje
     'max-nodes': z.ZodOptional<z.ZodEffects<z.ZodNumber, number, unknown>>;
     'up-to': z.ZodOptional<z.ZodString>;
     state: z.ZodOptional<z.ZodString>;
+    brief: z.ZodOptional<z.ZodBoolean>;
 }, "strip", z.ZodTypeAny, {
     json?: boolean | undefined;
     headed?: boolean | undefined;
@@ -30,6 +31,7 @@ export declare const inspectCommand: import("./command").CommandSchema<z.ZodObje
     'max-nodes'?: number | undefined;
     'up-to'?: string | undefined;
     state?: string | undefined;
+    brief?: boolean | undefined;
 }, {
     json?: boolean | undefined;
     headed?: boolean | undefined;
@@ -39,4 +41,5 @@ export declare const inspectCommand: import("./command").CommandSchema<z.ZodObje
     'max-nodes'?: unknown;
     'up-to'?: string | undefined;
     state?: string | undefined;
+    brief?: boolean | undefined;
 }>>;

package/dist/cli/commands.js

@@ -58,10 +58,11 @@ const inspect = (0, command_1.declareCommand)({
         headed: z.boolean().optional().describe('show the browser window'),
         browser: z.enum(['chromium', 'firefox', 'webkit']).optional().describe('browser engine (default chromium)'),
         zoom: z.boolean().optional().describe('run 1x/0.5x viewport diagnosis'),
-        depth: numberArg.optional().describe('DOM tree depth (default 6)'),
+        depth: numberArg.optional().describe('DOM tree depth (default: auto, max 20)'),
         'max-nodes': numberArg.optional().describe('node count cap (default 60)'),
         'up-to': z.string().optional().describe('ancestor stop tag (default html)'),
         state: z.string().optional().describe('path to saved state file (cookies + localStorage)'),
+        brief: z.boolean().optional().describe('compact output: tree sketch + warnings/errors only'),
     }),
 });
 const login = (0, command_1.declareCommand)({

package/dist/cli/program.js

@@ -100,12 +100,20 @@ async function handleInspect(command, cmdEntry, args, output) {
         const url = parsed.url;
         const selector = parsed.selector;
         const zoom = !!parsed.zoom;
-        const depth = parsed.depth || config.depth;
+        const depthRaw = parsed.depth;
+        let depth;
+        if (depthRaw === 'auto' || depthRaw === undefined) {
+            depth = 0; // placeholder, resolved after browser opens
+        }
+        else {
+            depth = Number(depthRaw);
+        }
         const maxNodes = parsed['max-nodes'] || 60;
         const upTo = parsed['up-to'] || 'html';
         const headed = !!parsed.headed || config.headed;
         const browser = parsed.browser || config.browser;
         const state = parsed.state || undefined;
+        const brief = !!parsed.brief;
         if (!url)
             output.error('URL is required. Usage: cssprobe-cli inspect <url> [selector]');
         // Auto-detect root selector if not provided
@@ -119,22 +127,28 @@ async function handleInspect(command, cmdEntry, args, output) {
             rootSelector = detected;
             console.error(`Auto-detected root: ${rootSelector}`);
         }
+        const launcher = new launcher_1.BrowserLauncher({ browser, headed, state });
+        await launcher.open(url);
+        // Resolve auto depth
+        if (depth === 0) {
+            const measured = await launcher.measureDepth(rootSelector);
+            depth = Math.min(measured, 20) || 6;
+            console.error(`Auto-detected depth: ${measured} (using ${depth})`);
+        }
         const collectCfg = {
             rootSelector,
             upTo,
             downDepth: depth,
             maxNodes,
         };
-        const launcher = new launcher_1.BrowserLauncher({ browser, headed, state });
-        await launcher.open(url);
         const snapshot = await launcher.collect(collectCfg);
         await launcher.close();
         const findings = (0, analyzer_1.analyze)(snapshot);
         if (output.json) {
-            console.log(output.format((0, renderer_1.renderJSON)(snapshot, findings)));
+            console.log(output.format((0, renderer_1.renderJSON)(snapshot, findings, brief)));
         }
         else {
-            console.log((0, renderer_1.renderMarkdown)(snapshot, findings));
+            console.log((0, renderer_1.renderMarkdown)(snapshot, findings, brief));
         }
     }
     catch (e) {

package/dist/engine/renderer.d.ts

@@ -1,3 +1,3 @@
 import type { Snapshot, Finding } from './types';
-export declare function renderMarkdown(snapshot: Snapshot, findings: Finding[]): string;
-export declare function renderJSON(snapshot: Snapshot, findings: Finding[]): object;
+export declare function renderMarkdown(snapshot: Snapshot, findings: Finding[], brief?: boolean): string;
+export declare function renderJSON(snapshot: Snapshot, findings: Finding[], brief?: boolean): object;

package/dist/engine/renderer.js

@@ -4,6 +4,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderMarkdown = renderMarkdown;
 exports.renderJSON = renderJSON;
+// ─── Node label (matches analyzer.ts nodeLabel) ───
+function nodeLabel(node) {
+    const cls = node.classes.length ? `.${node.classes.join('.')}` : '';
+    const id = node.id ? `#${node.id}` : '';
+    return `${node.tag}${id}${cls}`;
+}
 // ─── Node rendering (DOM tree) ───
 function renderNode(node, indent) {
     const lines = [];
@@ -57,6 +63,79 @@ function renderAncestors(chain) {
             (a.inlineStyle ? ` style="${a.inlineStyle}"` : '');
     });
 }
+function buildSketchTree(node, issueLabels) {
+    if (!node)
+        return null;
+    const label = nodeLabel(node);
+    const s = node.shape || {};
+    const shapeStr = s.role ? `[${s.role} h:${s.heightStrategy} w:${s.widthStrategy}]` : '';
+    const flags = [];
+    if (node.flags.overflowsParent)
+        flags.push('\u26A0parent-overflow');
+    if (node.flags.overflowsViewport)
+        flags.push('\u26A0viewport-overflow');
+    if (node.metrics.clientHeight === 0 && node.metrics.offsetHeight === 0)
+        flags.push('\u26A0collapsed');
+    if (node.flags.scrollable)
+        flags.push('\u2714scrollable');
+    if (node.containingBlockModifiers.length)
+        flags.push(`CB:${node.containingBlockModifiers.join(' ')}`);
+    const hasIssue = issueLabels.has(label) || flags.length > 0;
+    const children = [];
+    let omitted = 0;
+    for (const child of node.children) {
+        const sketchChild = buildSketchTree(child, issueLabels);
+        if (!sketchChild)
+            continue;
+        if (sketchChild.hasIssue || hasDescendantIssue(sketchChild)) {
+            children.push(sketchChild);
+        }
+        else {
+            omitted++;
+        }
+    }
+    return { label, shape: shapeStr, flags, children, hasIssue, omitted };
+}
+function hasDescendantIssue(node) {
+    if (node.hasIssue)
+        return true;
+    return node.children.some(c => hasDescendantIssue(c));
+}
+function renderSketchNode(node, prefix, isLast) {
+    const lines = [];
+    const connector = isLast ? '\u2514\u2500 ' : '\u251C\u2500 ';
+    const flagStr = node.flags.length ? ` ${node.flags.join(' ')}` : '';
+    const issueMark = node.hasIssue && node.flags.length === 0 ? ' \u26A0' : '';
+    lines.push(`${prefix}${connector}${node.label} ${node.shape}${flagStr}${issueMark}`);
+    const childPrefix = prefix + (isLast ? '   ' : '\u2502  ');
+    const totalChildren = node.children.length + (node.omitted > 0 ? 1 : 0);
+    for (let i = 0; i < node.children.length; i++) {
+        lines.push(...renderSketchNode(node.children[i], childPrefix, i === totalChildren - 1));
+    }
+    if (node.omitted > 0) {
+        const omConnector = '\u2514\u2500 ';
+        lines.push(`${childPrefix}${omConnector}... (${node.omitted} subtrees omitted)`);
+    }
+    return lines;
+}
+function renderSketch(tree, findings) {
+    if (!tree)
+        return ['(empty tree)'];
+    const issueLabels = new Set();
+    for (const f of findings) {
+        if (f.level === 'warning' || f.level === 'error') {
+            if (f.location)
+                issueLabels.add(f.location);
+        }
+    }
+    const sketchRoot = buildSketchTree(tree, issueLabels);
+    if (!sketchRoot)
+        return ['(empty tree)'];
+    if (!hasDescendantIssue(sketchRoot) && !sketchRoot.hasIssue) {
+        return [`${sketchRoot.label} ${sketchRoot.shape} (no issues found in tree)`];
+    }
+    return renderSketchNode(sketchRoot, '', true);
+}
 // ─── Findings rendering ───
 const CONF_BADGE = {
     DEFINITE: 'DEFINITE',
@@ -85,6 +164,22 @@ function renderFindings(findings) {
     }
     return lines;
 }
+function renderBriefFindings(findings) {
+    const lines = [];
+    lines.push('## Findings');
+    const important = findings.filter(f => f.level === 'warning' || f.level === 'error');
+    if (important.length === 0) {
+        lines.push('- No warnings or errors');
+        return lines;
+    }
+    for (const f of important) {
+        const badge = `[${CONF_BADGE[f.confidence]}]`;
+        const loc = f.location ? ` @ ${f.location}` : '';
+        const icon = f.level === 'error' ? '\u26A0' : '\u26A0';
+        lines.push(`- ${icon} ${f.message} ${badge}${loc}`);
+    }
+    return lines;
+}
 function confidenceSummary(findings) {
     const counts = findings.reduce((acc, f) => {
         acc[f.confidence] = (acc[f.confidence] || 0) + 1;
@@ -98,7 +193,7 @@ function confidenceSummary(findings) {
     return parts.join(' | ');
 }
 // ─── Markdown ───
-function renderMarkdown(snapshot, findings) {
+function renderMarkdown(snapshot, findings, brief = false) {
     const lines = [];
     const vp = snapshot.viewport ? `${snapshot.viewport.width}\u00D7${snapshot.viewport.height}` : 'unknown';
     lines.push('# cssprobe-cli report');
@@ -117,13 +212,22 @@ function renderMarkdown(snapshot, findings) {
     lines.push('```');
     lines.push(...renderAncestors(snapshot.ancestors));
     lines.push('```');
+    if (brief) {
+        lines.push('');
+        lines.push('## Tree Sketch (issues only)');
+        lines.push('```');
+        lines.push(...renderSketch(snapshot.tree, findings));
+        lines.push('```');
+    }
+    else {
+        lines.push('');
+        lines.push(`## DOM tree (${snapshot.downDepth} levels deep)`);
+        lines.push('```');
+        lines.push(...renderNode(snapshot.tree, 0));
+        lines.push('```');
+    }
     lines.push('');
-    lines.push(`## DOM tree (${snapshot.downDepth} levels deep)`);
-    lines.push('```');
-    lines.push(...renderNode(snapshot.tree, 0));
-    lines.push('```');
-    lines.push('');
-    lines.push(...renderFindings(findings));
+    lines.push(...(brief ? renderBriefFindings(findings) : renderFindings(findings)));
     if (snapshot.crossOriginBlocked && snapshot.crossOriginBlocked > 0) {
         lines.push('');
         lines.push('## Cross-origin limitation');
@@ -135,19 +239,42 @@ function renderMarkdown(snapshot, findings) {
     return lines.join('\n');
 }
 // ─── JSON ───
-function renderJSON(snapshot, findings) {
+function renderJSON(snapshot, findings, brief = false) {
     const counts = findings.reduce((acc, f) => {
         acc[f.confidence] = (acc[f.confidence] || 0) + 1;
         return acc;
     }, {});
+    const meta = {
+        rootSelector: snapshot.rootSelector,
+        viewport: snapshot.viewport,
+        nodeCount: snapshot.nodeCount,
+        crossOriginBlocked: snapshot.crossOriginBlocked,
+        blockedSheetUrls: snapshot.blockedSheetUrls,
+    };
+    if (brief) {
+        const important = findings.filter(f => f.level === 'warning' || f.level === 'error');
+        const briefFindings = important.map(f => ({
+            id: f.id,
+            level: f.level,
+            message: f.message,
+            confidence: f.confidence,
+            location: f.location,
+            evidence: f.evidence.slice(0, 1),
+        }));
+        return {
+            meta,
+            snapshot: { rootSelector: snapshot.rootSelector, nodeCount: snapshot.nodeCount, downDepth: snapshot.downDepth },
+            findings: briefFindings,
+            summary: {
+                total: findings.length,
+                warnings: important.filter(f => f.level === 'warning').length,
+                errors: important.filter(f => f.level === 'error').length,
+                confidence: { DEFINITE: counts.DEFINITE || 0, INDEFINITE: counts.INDEFINITE || 0, UNVERIFIABLE: counts.UNVERIFIABLE || 0 },
+            },
+        };
+    }
     return {
-        meta: {
-            rootSelector: snapshot.rootSelector,
-            viewport: snapshot.viewport,
-            nodeCount: snapshot.nodeCount,
-            crossOriginBlocked: snapshot.crossOriginBlocked,
-            blockedSheetUrls: snapshot.blockedSheetUrls,
-        },
+        meta,
         snapshot: snapshot.error ? { error: snapshot.error, candidates: snapshot.candidates } : snapshot,
         findings,
         summary: {

package/dist/help.json

@@ -2,7 +2,7 @@
   "global": "Usage: cssprobe-cli <command> [args] [options]\n\n\nInspection:\n  inspect <url> [selector]    inspect the runtime css of a page (layout, scroll, colors, fonts, backgrounds)\n  login <url>                 open browser for interactive login, then save state for later use\n  state-import [file]         import cookies from netscape format file into a playwright state file\n\nConfiguration:\n  config-show                 show current configuration\n  config-set <key> <value>    set a configuration value\n  config-list                 list all profiles\n  config-use <name>           switch active profile\n  config-new <name>           create a new profile\n  config-path                 show configuration file path\n\nAgent Skills:\n  skill-install               install agent skill for cssprobe-cli (teaches agents how to use the cli)\n  skill-uninstall             remove agent skill for cssprobe-cli\n\nGlobal options:\n  --help [command]            print help\n  --json                      output response as JSON\n  --raw                       output only the result value\n  --version                   print version\n  -p, --profile <name>        use named profile (or CSSPROBE_PROFILE env)",
   "commands": {
     "inspect": {
-      "help": "cssprobe-cli inspect <url> [selector]\n\nInspect the runtime CSS of a page (layout, scroll, colors, fonts, backgrounds)\n\nArguments:\n  <url>                       url, file:// path, or local html file path\n  [selector]                  css selector for the root element (auto-detected if omitted)\nOptions:\n  --json                      output structured json instead of markdown\n  --headed                    show the browser window\n  --browser                   browser engine (default chromium)\n  --zoom                      run 1x/0.5x viewport diagnosis\n  --depth                     dom tree depth (default 6)\n  --max-nodes                 node count cap (default 60)\n  --up-to                     ancestor stop tag (default html)\n  --state                     path to saved state file (cookies + localstorage)\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
+      "help": "cssprobe-cli inspect <url> [selector]\n\nInspect the runtime CSS of a page (layout, scroll, colors, fonts, backgrounds)\n\nArguments:\n  <url>                       url, file:// path, or local html file path\n  [selector]                  css selector for the root element (auto-detected if omitted)\nOptions:\n  --json                      output structured json instead of markdown\n  --headed                    show the browser window\n  --browser                   browser engine (default chromium)\n  --zoom                      run 1x/0.5x viewport diagnosis\n  --depth                     dom tree depth (default: auto, max 20)\n  --max-nodes                 node count cap (default 60)\n  --up-to                     ancestor stop tag (default html)\n  --state                     path to saved state file (cookies + localstorage)\n  --brief                     compact output: tree sketch + warnings/errors only\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
       "flags": {
         "json": "boolean",
         "headed": "boolean",
@@ -11,7 +11,8 @@
         "depth": "string",
         "max-nodes": "string",
         "up-to": "string",
-        "state": "string"
+        "state": "string",
+        "brief": "boolean"
       },
       "args": [
         "url",
@@ -102,6 +103,7 @@
     "json",
     "headed",
     "zoom",
+    "brief",
     "local"
   ]
 }

package/dist/installer/skill-template.js

@@ -40,7 +40,7 @@ function buildSkillMd() {
         'npx playwright install chromium',
         BT3,
         '',
-        'Verify: ' + BT + 'cssprobe-cli-cli inspect https://example.com "body" --json | head -5' + BT,
+        'Verify: ' + BT + 'cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body --json | head -5' + BT,
         '',
         '## Command Discovery',
         '',
@@ -56,10 +56,10 @@ function buildSkillMd() {
         '',
         BT3 + 'bash',
         '# With explicit selector',
-        'cssprobe-cli-cli inspect https://example.com ".main-content"',
+        'cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body',
         '',
         '# Auto-detect root element (picks modal/dialog/scroll-container)',
-        'cssprobe-cli inspect https://example.com',
+        'cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout',
         '',
         '# Local HTML file',
         'cssprobe-cli inspect ./test.html ".container"',
@@ -101,8 +101,8 @@ function buildSkillMd() {
         'Always pass ' + BT + '--json' + BT + ' when consuming output programmatically:',
         '',
         BT3 + 'bash',
-        'cssprobe-cli inspect https://example.com ".content" --json',
-        'cssprobe-cli --json inspect https://example.com ".content" | jq ' + BT + "'.findings[] | {id, confidence, message}'" + BT,
+        'cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body --json',
+        'cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body --json | jq ' + BT + "'.findings[] | {id, confidence, message}'" + BT,
         BT3,
         '',
         'Without ' + BT + '--json' + BT + ', output is a Markdown report with ancestor chain,',
@@ -134,7 +134,7 @@ function buildSkillMd() {
         '  --headed                    Show browser window',
         '  --browser <engine>          chromium|firefox|webkit (default chromium)',
         '  --zoom                      Run 1x/0.5x viewport diagnosis',
-        '  --depth <n>                 DOM tree depth (default 6)',
+        '  --depth <n>                 DOM tree depth (default: auto)',
         '  --max-nodes <n>             Node count cap (default 60)',
         '  --up-to <tag>               Ancestor stop tag (default html)',
         '  --state <file>              Load saved state (cookies + localStorage)',
@@ -176,10 +176,10 @@ function buildSkillMd() {
         '',
         BT3 + 'bash',
         '# Auto-detect and analyze',
-        'cssprobe-cli inspect https://example.com',
+        'cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout',
         '',
         '# Look for findings with level "warning" or "error"',
-        'cssprobe-cli --json inspect https://example.com | jq ' + BT + "'.findings[] | select(.level != \"info\")'" + BT,
+        'cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body --json | jq ' + BT + "'.findings[] | select(.level != \"info\")'" + BT,
         BT3,
         '',
         '### 3. Inspect with authentication',
@@ -196,7 +196,7 @@ function buildSkillMd() {
         '',
         BT3 + 'bash',
         '# Use --zoom to compare 1x vs 0.5x viewport',
-        'cssprobe-cli inspect https://example.com ".content" --zoom',
+        'cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body --zoom',
         BT3,
         '',
         '## Anti-patterns',

package/docs/guide/installation.md

@@ -27,7 +27,7 @@ npm install -g cssprobe-cli
 Or run without installing (slower but zero setup):
 
 ```bash
-npx cssprobe-cli inspect https://example.com ".content"
+npx cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body
 ```
 
 Verify:
@@ -55,7 +55,7 @@ npx playwright install chromium
 Verify:
 
 ```bash
-cssprobe-cli inspect https://example.com "body" --json | head -5
+cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body --json | head -5
 ```
 
 JSON output = it works. `Browser not installed` = run the install command above.
@@ -68,10 +68,10 @@ JSON output = it works. `Browser not installed` = run the install command above.
 
 ```bash
 # With explicit selector
-cssprobe-cli inspect https://example.com ".main-content"
+cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body
 
 # Auto-detect root element
-cssprobe-cli inspect https://example.com
+cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout
 
 # Local HTML file
 cssprobe-cli inspect ./test.html ".container"
@@ -80,8 +80,8 @@ cssprobe-cli inspect ./test.html ".container"
 ### JSON Output (for programmatic consumption)
 
 ```bash
-cssprobe-cli inspect https://example.com ".content" --json
-cssprobe-cli --json inspect https://example.com ".content" | jq '.findings[] | {id, confidence, message}'
+cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body --json
+cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body --json | jq '.findings[] | {id, confidence, message}'
 ```
 
 ---
@@ -218,7 +218,7 @@ Priority (highest to lowest):
 For agents that trust copy-paste:
 
 ```bash
-npm install -g cssprobe-cli && npx playwright install chromium && cssprobe-cli inspect https://example.com "body"
+npm install -g cssprobe-cli && npx playwright install chromium && cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body
 ```
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cssprobe-cli",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Runtime CSS probe — inspect layout, colors, backgrounds, fonts and more in a live browser. AI agents and shell automation.",
   "keywords": [
     "css",