cssprobe-cli 0.1.0 → 0.2.0

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"
@@ -44,13 +44,38 @@ cssprobe-cli login https://mysite.com
 
 # Then inspect with state
 cssprobe-cli inspect https://mysite.com/page ".target" --state ~/.cssprobe-cli/states/mysite.json
+
+# Wait for user interaction before collecting (e.g. click a button to open a dialog)
+cssprobe-cli inspect https://mysite.com/page ".dialog" --state ~/.cssprobe-cli/states/mysite.json --wait
 ```
 
-### 3. JSON Output
+### 3. Interactive Mode
 
 ```bash
-cssprobe-cli inspect https://example.com ".content" --json
-cssprobe-cli --json inspect https://example.com ".content" | jq '.findings[] | {id, confidence, message}'
+# Open browser and inspect interactively (REPL mode)
+cssprobe-cli interactive https://mysite.com --state ~/.cssprobe-cli/states/mysite.json
+```
+
+Runtime commands:
+```
+inspect> tree .dialog-A               # DOM tree
+inspect> layout .sidebar-B            # ASCII layout diagram
+inspect> sketch .content              # Tree sketch (issues only)
+inspect> findings .modal              # Findings only
+inspect> json .dialog-A               # JSON output
+inspect> report .dialog-A             # Full report
+inspect> .dialog-A                    # Shorthand for report
+inspect> navigate https://other.com   # Navigate to new URL
+inspect> depth 10                     # Set depth
+inspect> help                         # Show help
+inspect> quit                         # Exit
+```
+
+### 4. JSON Output
+
+```bash
+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}'
 ```
 
 ---
@@ -61,6 +86,8 @@ cssprobe-cli --json inspect https://example.com ".content" | jq '.findings[] | {
 |------|--------|----------|
 | (default) | Markdown report with ancestor chain, DOM tree, findings | Terminal viewing |
 | `--json` | Structured JSON with snapshot, findings, confidence summary | Scripts, `jq` pipes, AI agent consumption |
+| `--brief` | Compact output: tree sketch + warnings/errors only | Quick overview |
+| `--layout` | ASCII layout diagram showing element positions and sizes | Visual layout inspection |
 
 ---
 
@@ -70,10 +97,17 @@ cssprobe-cli --json inspect https://example.com ".content" | jq '.findings[] | {
 
 ```bash
 cssprobe-cli inspect <url> [selector]    # Inspect CSS layout
+cssprobe-cli interactive <url>           # Interactive REPL mode
 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 +135,13 @@ 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
+  --layout                    ASCII layout diagram showing element positions and sizes
+  --wait                      Wait for user interaction before collecting (implies --headed)
 ```
 
 ---

package/dist/browser/launcher.d.ts

@@ -13,6 +13,12 @@ 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>;
+    /** Wait for user to interact with the page. Press Enter to continue. */
+    waitForUser(): Promise<void>;
+    /** Navigate to a new URL in the existing page. */
+    navigate(url: string): Promise<void>;
     /** Scan the page for likely root elements (modals, dialogs, scroll containers). */
     autoDetectRoot(): Promise<string[]>;
     /**

package/dist/browser/launcher.js

@@ -106,6 +106,52 @@ 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);
+    }
+    /** Wait for user to interact with the page. Press Enter to continue. */
+    async waitForUser() {
+        console.error('');
+        console.error('  Browser is open. Perform your actions (login, click buttons, open dialogs, etc.).');
+        console.error('  Press Enter here when ready to inspect...');
+        console.error('');
+        await new Promise(resolve => {
+            process.stdin.once('data', () => resolve());
+        });
+    }
+    /** Navigate to a new URL in the existing page. */
+    async navigate(url) {
+        if (!this.page)
+            throw new Error('Browser not opened. Call open() first.');
+        if (url.startsWith('http://') || url.startsWith('https://')) {
+            await this.page.goto(url, { waitUntil: 'domcontentloaded', timeout: 60000 });
+        }
+        else if (url.startsWith('file://')) {
+            await this.page.goto(url, { waitUntil: 'load', timeout: 30000 });
+        }
+        else {
+            const resolved = path_1.default.resolve(url);
+            if (!fs_1.default.existsSync(resolved))
+                throw new Error(`File not found: ${resolved}`);
+            await this.page.goto(`file://${resolved}`, { waitUntil: 'load', timeout: 30000 });
+        }
+    }
     /** 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,9 @@ 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>;
+    layout: z.ZodOptional<z.ZodBoolean>;
+    wait: z.ZodOptional<z.ZodBoolean>;
 }, "strip", z.ZodTypeAny, {
     json?: boolean | undefined;
     headed?: boolean | undefined;
@@ -30,6 +33,9 @@ export declare const inspectCommand: import("./command").CommandSchema<z.ZodObje
     'max-nodes'?: number | undefined;
     'up-to'?: string | undefined;
     state?: string | undefined;
+    brief?: boolean | undefined;
+    layout?: boolean | undefined;
+    wait?: boolean | undefined;
 }, {
     json?: boolean | undefined;
     headed?: boolean | undefined;
@@ -39,4 +45,7 @@ export declare const inspectCommand: import("./command").CommandSchema<z.ZodObje
     'max-nodes'?: unknown;
     'up-to'?: string | undefined;
     state?: string | undefined;
+    brief?: boolean | undefined;
+    layout?: boolean | undefined;
+    wait?: boolean | undefined;
 }>>;

package/dist/cli/commands.js

@@ -58,10 +58,13 @@ 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'),
+        layout: z.boolean().optional().describe('ASCII layout diagram showing element positions and sizes'),
+        wait: z.boolean().optional().describe('wait for user interaction before collecting (implies --headed)'),
     }),
 });
 const login = (0, command_1.declareCommand)({
@@ -156,8 +159,21 @@ const stateImport = (0, command_1.declareCommand)({
         merge: z.string().optional().describe('existing state file to merge into'),
     }),
 });
+const interactive = (0, command_1.declareCommand)({
+    name: 'interactive',
+    category: 'core',
+    description: 'Open browser and inspect interactively (REPL mode)',
+    args: z.object({
+        url: urlArg,
+    }),
+    options: z.object({
+        browser: z.enum(['chromium', 'firefox', 'webkit']).optional().describe('browser engine (default chromium)'),
+        state: z.string().optional().describe('path to saved state file (cookies + localStorage)'),
+        depth: numberArg.optional().describe('DOM tree depth (default: auto, max 20)'),
+    }),
+});
 const commandsArray = [
-    inspect, login, stateImport,
+    inspect, login, stateImport, interactive,
     configShow, configSet, configList, configUse, configNew, configPath,
     skillInstall, skillUninstall,
 ];

package/dist/cli/program.js

@@ -47,6 +47,10 @@ async function program() {
         await handleStateImport(command, cmdEntry, rawArgs, output);
         return;
     }
+    if (commandName === 'interactive') {
+        await handleInteractive(command, cmdEntry, rawArgs, output);
+        return;
+    }
     await handleInspect(command, cmdEntry, rawArgs, output);
 }
 function parseArgs(help) {
@@ -100,12 +104,26 @@ 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;
+        const layout = !!parsed.layout;
+        const wait = !!parsed.wait;
+        // --wait implies --headed
+        if (wait) {
+            args.headed = true;
+        }
         if (!url)
             output.error('URL is required. Usage: cssprobe-cli inspect <url> [selector]');
         // Auto-detect root selector if not provided
@@ -119,22 +137,32 @@ 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);
+        // Wait for user interaction if --wait
+        if (wait) {
+            await launcher.waitForUser();
+        }
+        // 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, layout));
         }
     }
     catch (e) {
@@ -378,4 +406,274 @@ async function handleStateImport(command, cmdEntry, args, output) {
         output.error(e instanceof Error ? e.message : String(e));
     }
 }
+// ── interactive ──
+const REPL_COMMANDS = {
+    tree: '<selector>           Show DOM tree',
+    layout: '<selector>           Show ASCII layout diagram',
+    sketch: '<selector>           Show tree sketch (issues only)',
+    findings: '<selector>           Show findings only',
+    json: '<selector>           Show JSON output',
+    report: '<selector>           Show full report',
+    navigate: '<url>                Navigate to a new URL',
+    depth: '<n>                  Set depth (default: auto)',
+    help: '                     Show this help',
+    quit: '                     Close browser and exit',
+};
+async function handleInteractive(command, cmdEntry, args, _output) {
+    const cmdArgs = splitArgs(args);
+    const parsed = (0, command_1.parseCommand)(command, cmdArgs);
+    const url = parsed.url;
+    const browser = parsed.browser || 'chromium';
+    const state = parsed.state || undefined;
+    const depthRaw = parsed.depth;
+    let depth = depthRaw === 'auto' || depthRaw === undefined ? 0 : Number(depthRaw);
+    if (!url) {
+        console.error('Error: URL is required. Usage: cssprobe-cli interactive <url>');
+        process.exit(1);
+    }
+    const launcher = new launcher_1.BrowserLauncher({ browser, headed: true, state });
+    await launcher.open(url);
+    let currentUrl = url;
+    // Resolve auto depth
+    if (depth === 0) {
+        try {
+            const candidates = await launcher.autoDetectRoot();
+            const selector = candidates[0] || 'body';
+            const measured = await launcher.measureDepth(selector);
+            depth = Math.min(measured, 20) || 6;
+            console.error(`Auto-detected depth: ${measured} (using ${depth})`);
+        }
+        catch {
+            depth = 6;
+        }
+    }
+    console.error('');
+    console.error(`Browser opened at ${currentUrl}`);
+    console.error("Type 'help' for available commands, 'quit' to exit.");
+    console.error('');
+    const rl = require('readline').createInterface({
+        input: process.stdin,
+        output: process.stderr,
+        prompt: 'inspect> ',
+    });
+    rl.prompt();
+    rl.on('line', async (line) => {
+        const trimmed = line.trim();
+        if (!trimmed) {
+            rl.prompt();
+            return;
+        }
+        // Parse: command [selector] [--options]
+        const parts = trimmed.split(/\s+/);
+        const cmd = parts[0];
+        const rest = parts.slice(1);
+        try {
+            switch (cmd) {
+                case 'help': {
+                    console.error('');
+                    console.error('Commands:');
+                    for (const [name, desc] of Object.entries(REPL_COMMANDS)) {
+                        console.error(`  ${name.padEnd(12)} ${desc}`);
+                    }
+                    console.error('');
+                    break;
+                }
+                case 'quit':
+                case 'exit': {
+                    await launcher.close();
+                    console.error('Browser closed.');
+                    rl.close();
+                    process.exit(0);
+                }
+                case 'navigate': {
+                    const newUrl = rest[0];
+                    if (!newUrl) {
+                        console.error('Usage: navigate <url>');
+                        break;
+                    }
+                    await launcher.navigate(newUrl);
+                    currentUrl = newUrl;
+                    console.error(`Navigated to ${currentUrl}`);
+                    break;
+                }
+                case 'depth': {
+                    const n = parseInt(rest[0], 10);
+                    if (isNaN(n) || n < 1) {
+                        console.error('Usage: depth <n>');
+                        break;
+                    }
+                    depth = Math.min(n, 20);
+                    console.error(`Depth set to ${depth}`);
+                    break;
+                }
+                case 'tree':
+                case 'layout':
+                case 'sketch':
+                case 'findings':
+                case 'json':
+                case 'report': {
+                    // Parse selector + options from remaining args
+                    let selector = '';
+                    let useBrief = false;
+                    let useLayout = false;
+                    let useJson = false;
+                    for (const arg of rest) {
+                        if (arg === '--brief')
+                            useBrief = true;
+                        else if (arg === '--layout')
+                            useLayout = true;
+                        else if (arg === '--json')
+                            useJson = true;
+                        else if (!arg.startsWith('-') && !selector)
+                            selector = arg;
+                    }
+                    // Command-specific defaults
+                    if (cmd === 'layout')
+                        useLayout = true;
+                    if (cmd === 'sketch')
+                        useBrief = true;
+                    if (cmd === 'json')
+                        useJson = true;
+                    if (!selector) {
+                        console.error('Usage: ' + cmd + ' <selector> [--brief] [--layout] [--json]');
+                        break;
+                    }
+                    // Measure depth if needed
+                    let useDepth = depth;
+                    if (useDepth === 0) {
+                        try {
+                            const measured = await launcher.measureDepth(selector);
+                            useDepth = Math.min(measured, 20) || 6;
+                        }
+                        catch {
+                            useDepth = 6;
+                        }
+                    }
+                    const collectCfg = {
+                        rootSelector: selector,
+                        upTo: 'html',
+                        downDepth: useDepth,
+                        maxNodes: 60,
+                    };
+                    const snapshot = await launcher.collect(collectCfg);
+                    if (snapshot.error) {
+                        console.error(`Error: ${snapshot.error}`);
+                        if (snapshot.candidates?.length) {
+                            console.error(`Similar nodes: ${snapshot.candidates.join(', ')}`);
+                        }
+                        break;
+                    }
+                    const findings = (0, analyzer_1.analyze)(snapshot);
+                    if (cmd === 'findings') {
+                        // Only show findings section
+                        const important = findings.filter(f => f.level === 'warning' || f.level === 'error');
+                        if (important.length === 0) {
+                            console.log('No warnings or errors');
+                        }
+                        else {
+                            for (const f of important) {
+                                const icon = f.level === 'error' ? '\u26A0' : '\u26A0';
+                                console.log(`- ${icon} ${f.message} [${f.confidence}]${f.location ? ` @ ${f.location}` : ''}`);
+                            }
+                        }
+                    }
+                    else if (useJson) {
+                        console.log(JSON.stringify((0, renderer_1.renderJSON)(snapshot, findings, useBrief), null, 2));
+                    }
+                    else if (cmd === 'tree') {
+                        // Only DOM tree
+                        const lines = [];
+                        lines.push(`## DOM tree (${snapshot.downDepth} levels deep)`);
+                        lines.push('```');
+                        // Inline renderNode
+                        const renderNodeLocal = (node, indent) => {
+                            if (!node)
+                                return;
+                            const cls = node.classes?.length ? `.${node.classes.join('.')}` : '';
+                            const id = node.id ? `#${node.id}` : '';
+                            const m = node.metrics;
+                            const s = node.shape || {};
+                            const shapeStr = s.role ? `[${s.role} h:${s.heightStrategy} w:${s.widthStrategy}]` : '';
+                            const flag = [];
+                            if (node.flags?.overflowsParent)
+                                flag.push('\u26A0parent-overflow');
+                            if (node.flags?.overflowsViewport)
+                                flag.push('\u26A0viewport-overflow');
+                            if (m?.clientHeight === 0 && m?.offsetHeight === 0)
+                                flag.push('\u26A0collapsed');
+                            lines.push(`${'  '.repeat(indent)}<${node.tag}${id}${cls}> ${shapeStr} [${node.props?.position},${node.props?.display}] rect(${m?.rect?.width}\u00D7${m?.rect?.height})${flag.length ? ' ' + flag.join(' ') : ''}`);
+                            for (const child of node.children || [])
+                                renderNodeLocal(child, indent + 1);
+                        };
+                        renderNodeLocal(snapshot.tree, 0);
+                        lines.push('```');
+                        console.log(lines.join('\n'));
+                    }
+                    else {
+                        console.log((0, renderer_1.renderMarkdown)(snapshot, findings, useBrief, useLayout));
+                    }
+                    break;
+                }
+                default: {
+                    // Try as a direct selector (shorthand for 'report <selector>')
+                    if (!cmd.startsWith('-')) {
+                        const selector = cmd;
+                        let useBrief = false;
+                        let useLayout = false;
+                        for (const arg of rest) {
+                            if (arg === '--brief')
+                                useBrief = true;
+                            if (arg === '--layout')
+                                useLayout = true;
+                        }
+                        let useDepth = depth;
+                        if (useDepth === 0) {
+                            try {
+                                const measured = await launcher.measureDepth(selector);
+                                useDepth = Math.min(measured, 20) || 6;
+                            }
+                            catch {
+                                useDepth = 6;
+                            }
+                        }
+                        const collectCfg = {
+                            rootSelector: selector,
+                            upTo: 'html',
+                            downDepth: useDepth,
+                            maxNodes: 60,
+                        };
+                        const snapshot = await launcher.collect(collectCfg);
+                        if (snapshot.error) {
+                            console.error(`Error: ${snapshot.error}`);
+                            if (snapshot.candidates?.length) {
+                                console.error(`Similar nodes: ${snapshot.candidates.join(', ')}`);
+                            }
+                        }
+                        else {
+                            const findings = (0, analyzer_1.analyze)(snapshot);
+                            console.log((0, renderer_1.renderMarkdown)(snapshot, findings, useBrief, useLayout));
+                        }
+                    }
+                    else {
+                        console.error(`Unknown command: ${cmd}. Type 'help' for available commands.`);
+                    }
+                }
+            }
+        }
+        catch (e) {
+            console.error(`Error: ${e.message || e}`);
+        }
+        rl.prompt();
+    });
+    rl.on('close', async () => {
+        await launcher.close().catch(() => { });
+        process.exit(0);
+    });
+    // Handle SIGINT gracefully
+    process.on('SIGINT', async () => {
+        console.error('\nClosing browser...');
+        await launcher.close().catch(() => { });
+        process.exit(0);
+    });
+}
 //# sourceMappingURL=program.js.map

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, layout?: 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,155 @@ 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);
+}
+// ─── Layout diagram (ASCII box layout) ───
+const BOX = { tl: '\u250C', tr: '\u2510', bl: '\u2514', br: '\u2518', h: '\u2500', v: '\u2502' };
+function renderLayout(snapshot, findings) {
+    if (!snapshot.tree)
+        return ['(empty tree)'];
+    const vpW = snapshot.viewport.width;
+    const termWidth = Math.min(Math.max(process.stdout?.columns || 80, 60), 120);
+    const indentUnit = 2;
+    const maxDepth = 8;
+    const boxPad = 4; // '│ ' prefix per depth level
+    const issueLocations = new Set();
+    for (const f of findings) {
+        if (f.location && (f.level === 'warning' || f.level === 'error'))
+            issueLocations.add(f.location);
+    }
+    function boxCharW(nodeW, depth) {
+        const usedIndent = depth * indentUnit;
+        const available = termWidth - usedIndent - boxPad;
+        const ratio = nodeW / vpW;
+        return Math.max(Math.round(available * ratio), 14);
+    }
+    const lines = [];
+    function renderEl(node, depth, parentW) {
+        if (depth > maxDepth) {
+            lines.push('  '.repeat(depth) + '... (depth limit)');
+            return;
+        }
+        const m = node.metrics.rect;
+        // Skip zero-size elements (SVG symbols, hidden elements)
+        if (m.width < 1 && m.height < 1 && node.children.length > 0) {
+            for (const child of node.children)
+                renderEl(child, depth, parentW);
+            return;
+        }
+        if (m.width < 1 && m.height < 1)
+            return;
+        const label = nodeLabel(node);
+        const hasIssue = issueLocations.has(label);
+        const dimStr = `${Math.round(m.width)}\u00D7${Math.round(m.height)}`;
+        const charW = boxCharW(m.width, depth);
+        const innerW = charW - 2;
+        const indent = '  '.repeat(depth);
+        const issueMark = hasIssue ? ' \u26A0' : '';
+        if (innerW < 3) {
+            // Too narrow for a proper box
+            lines.push(`${indent}${BOX.v} ${label.slice(0, charW - 3)}... ${dimStr}`);
+            for (const child of node.children)
+                renderEl(child, depth + 1, m.width);
+            return;
+        }
+        // Top border: ┌─ label ────────┐ WxH
+        const labelPart = ` ${label} `;
+        const dimPart = ` ${dimStr} `;
+        const topFillLen = Math.max(0, innerW - labelPart.length);
+        lines.push(`${indent}${BOX.tl}${BOX.h}${labelPart}${BOX.h.repeat(topFillLen)}${BOX.tr}${dimPart}${issueMark}`);
+        // Content
+        if (node.children.length === 0) {
+            // Empty box
+            lines.push(`${indent}${BOX.v}${' '.repeat(innerW)}${BOX.v}`);
+        }
+        else {
+            for (const child of node.children)
+                renderEl(child, depth + 1, m.width);
+        }
+        // Bottom border: └───────────────┘
+        lines.push(`${indent}${BOX.bl}${BOX.h.repeat(innerW)}${BOX.br}`);
+    }
+    renderEl(snapshot.tree, 0, vpW);
+    const scaleStr = `${Math.round(vpW / termWidth)}px/char`;
+    const result = [];
+    result.push(`## Layout (${vpW}\u00D7${snapshot.viewport.height} viewport, scale: ${scaleStr})`);
+    result.push('```');
+    result.push(...lines);
+    result.push('```');
+    return result;
+}
 // ─── Findings rendering ───
 const CONF_BADGE = {
     DEFINITE: 'DEFINITE',
@@ -85,6 +240,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 +269,7 @@ function confidenceSummary(findings) {
     return parts.join(' | ');
 }
 // ─── Markdown ───
-function renderMarkdown(snapshot, findings) {
+function renderMarkdown(snapshot, findings, brief = false, layout = false) {
     const lines = [];
     const vp = snapshot.viewport ? `${snapshot.viewport.width}\u00D7${snapshot.viewport.height}` : 'unknown';
     lines.push('# cssprobe-cli report');
@@ -117,13 +288,26 @@ function renderMarkdown(snapshot, findings) {
     lines.push('```');
     lines.push(...renderAncestors(snapshot.ancestors));
     lines.push('```');
+    if (layout) {
+        lines.push('');
+        lines.push(...renderLayout(snapshot, findings));
+    }
+    if (brief) {
+        lines.push('');
+        lines.push('## Tree Sketch (issues only)');
+        lines.push('```');
+        lines.push(...renderSketch(snapshot.tree, findings));
+        lines.push('```');
+    }
+    else if (!layout) {
+        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 +319,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

@@ -1,8 +1,8 @@
 {
-  "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)",
+  "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  interactive <url>           open browser and inspect interactively (repl mode)\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  --layout                    ascii layout diagram showing element positions and sizes\n  --wait                      wait for user interaction before collecting (implies --headed)\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
       "flags": {
         "json": "boolean",
         "headed": "boolean",
@@ -11,7 +11,10 @@
         "depth": "string",
         "max-nodes": "string",
         "up-to": "string",
-        "state": "string"
+        "state": "string",
+        "brief": "boolean",
+        "layout": "boolean",
+        "wait": "boolean"
       },
       "args": [
         "url",
@@ -38,6 +41,17 @@
         "file"
       ]
     },
+    "interactive": {
+      "help": "cssprobe-cli interactive <url>\n\nOpen browser and inspect interactively (REPL mode)\n\nArguments:\n  <url>                       url, file:// path, or local html file path\nOptions:\n  --browser                   browser engine (default chromium)\n  --state                     path to saved state file (cookies + localstorage)\n  --depth                     dom tree depth (default: auto, max 20)\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
+      "flags": {
+        "browser": "string",
+        "state": "string",
+        "depth": "string"
+      },
+      "args": [
+        "url"
+      ]
+    },
     "config-show": {
       "help": "cssprobe-cli config-show \n\nShow current configuration\n\nOptions:\n  --profile                   profile name",
       "flags": {
@@ -102,6 +116,9 @@
     "json",
     "headed",
     "zoom",
+    "brief",
+    "layout",
+    "wait",
     "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"',
@@ -96,13 +96,46 @@ function buildSkillMd() {
         'cssprobe-cli state-import new-cookies.txt --merge existing.json --out merged.json',
         BT3,
         '',
+        '## Wait for User Interaction',
+        '',
+        'For pages that require clicking a button or opening a dialog before inspection:',
+        '',
+        BT3 + 'bash',
+        'cssprobe-cli inspect https://mysite.com/page ".dialog" --state ~/.cssprobe-cli/states/mysite.json --wait',
+        '# Browser opens -> perform actions (click, open dialog) -> press Enter -> inspect',
+        BT3,
+        '',
+        '## Interactive Mode (REPL)',
+        '',
+        'For inspecting multiple areas of the same page:',
+        '',
+        BT3 + 'bash',
+        'cssprobe-cli interactive https://mysite.com --state ~/.cssprobe-cli/states/mysite.json',
+        BT3,
+        '',
+        'Runtime commands:',
+        '',
+        BT3,
+        'inspect> tree .dialog-A               # DOM tree',
+        'inspect> layout .sidebar-B            # ASCII layout diagram',
+        'inspect> sketch .content              # Tree sketch (issues only)',
+        'inspect> findings .modal              # Findings only',
+        'inspect> json .dialog-A               # JSON output',
+        'inspect> report .dialog-A             # Full report',
+        'inspect> .dialog-A                    # Shorthand for report',
+        'inspect> navigate https://other.com   # Navigate to new URL',
+        'inspect> depth 10                     # Set depth',
+        'inspect> help                         # Show help',
+        'inspect> quit                         # Exit',
+        BT3,
+        '',
         '## Output Modes',
         '',
         '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,10 +167,13 @@ 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)',
+        '  --brief                     Compact output: tree sketch + warnings/errors only',
+        '  --layout                    ASCII layout diagram showing element positions and sizes',
+        '  --wait                      Wait for user interaction before collecting (implies --headed)',
         BT3,
         '',
         '## state-import: Netscape Cookie Format',
@@ -176,10 +212,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 +232,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}'
 ```
 
 ---
@@ -125,9 +125,44 @@ cssprobe-cli inspect https://mysite.com/page ".target" --state ~/.cssprobe-cli/s
 cssprobe-cli state-import new-cookies.txt --merge existing-state.json --out updated.json
 ```
 
+### Option D: Wait for User Interaction
+
+For pages that require clicking a button or opening a dialog before inspection:
+
+```bash
+cssprobe-cli inspect https://mysite.com/page ".dialog" --state ~/.cssprobe-cli/states/mysite.json --wait
+# Browser opens -> perform actions (click, open dialog) -> press Enter -> inspect
+```
+
+---
+
+## Step 5: Interactive Mode (REPL)
+
+For inspecting multiple areas of the same page without re-opening the browser:
+
+```bash
+cssprobe-cli interactive https://mysite.com --state ~/.cssprobe-cli/states/mysite.json
+```
+
+Runtime commands:
+
+```
+inspect> tree .dialog-A               # DOM tree
+inspect> layout .sidebar-B            # ASCII layout diagram
+inspect> sketch .content              # Tree sketch (issues only)
+inspect> findings .modal              # Findings only
+inspect> json .dialog-A               # JSON output
+inspect> report .dialog-A             # Full report
+inspect> .dialog-A                    # Shorthand for report
+inspect> navigate https://other.com   # Navigate to new URL
+inspect> depth 10                     # Set depth
+inspect> help                         # Show help
+inspect> quit                         # Exit
+```
+
 ---
 
-## Step 5: Understand the Output
+## Step 6: Understand the Output
 
 ### Markdown Report (default)
 
@@ -218,7 +253,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.2.0",
   "description": "Runtime CSS probe — inspect layout, colors, backgrounds, fonts and more in a live browser. AI agents and shell automation.",
   "keywords": [
     "css",