cssprobe-cli 0.2.12 → 0.2.14

package/dist/installer/skill-template.js

@@ -40,7 +40,7 @@ function buildSkillMd() {
         'npx playwright install chromium',
         BT3,
         '',
-        'Verify: ' + BT + 'cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body --json | head -5' + BT,
+        'Verify: ' + BT + 'cssprobe-cli status' + BT,
         '',
         '## Command Discovery',
         '',
@@ -54,20 +54,35 @@ function buildSkillMd() {
         '',
         '## Core Workflow: Inspect a Page',
         '',
+        'cssprobe-cli is session-based: ' + BT + 'open' + BT + ' starts a browser daemon, then',
+        BT + 'inspect' + BT + ' / ' + BT + 'tree' + BT + ' / ' + BT + 'layout' + BT + ' / ' + BT + 'findings' + BT,
+        'run against that session. Close the session with ' + BT + 'close' + BT + '.',
+        '',
         BT3 + 'bash',
-        '# With explicit selector',
-        'cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body',
+        '# 1. Open a page in a browser session',
+        'cssprobe-cli open https://getbootstrap.com/docs/5.3/examples/checkout',
+        '',
+        '# 2. Inspect with an explicit selector',
+        'cssprobe-cli inspect body',
+        '',
+        '# 3. Auto-detect: when the page has modals/dialogs, "open" already picks a root',
+        '#    candidate, but inspect still needs a selector or auto-detection from candidates.',
+        '#    For diagnosis without a selector, use "findings" after open.',
+        '',
+        '# 4. Close the session when done',
+        'cssprobe-cli close',
+        BT3,
         '',
-        '# Auto-detect root element (picks modal/dialog/scroll-container)',
-        'cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout',
+        'For local HTML files:',
         '',
-        '# Local HTML file',
-        'cssprobe-cli inspect ./test.html ".container"',
+        BT3 + 'bash',
+        'cssprobe-cli open ./test.html',
+        'cssprobe-cli inspect ".container"',
         BT3,
         '',
         '## Login-Protected Pages',
         '',
-        'Many pages require authentication. Three approaches:',
+        'Many pages require authentication. Two approaches:',
         '',
         '### Option A: Import cookies from browser export',
         '',
@@ -76,15 +91,16 @@ function buildSkillMd() {
         '# 2. Import into cssprobe-cli',
         'cssprobe-cli state-import cookies.txt --out ~/.cssprobe-cli/states/mysite.json',
         '',
-        '# 3. Use the state file',
-        'cssprobe-cli inspect https://mysite.com/page ".target" --state ~/.cssprobe-cli/states/mysite.json',
+        '# 3. Open the session with the saved state',
+        'cssprobe-cli open https://mysite.com/page --state ~/.cssprobe-cli/states/mysite.json',
+        'cssprobe-cli inspect ".target"',
         BT3,
         '',
         '### Option B: Interactive login',
         '',
         BT3 + 'bash',
         'cssprobe-cli open https://mysite.com --headed',
-        '# Browser opens -> complete login manually -> continue inspection',
+        '# Browser opens -> complete login manually',
         '',
         'cssprobe-cli inspect .target',
         BT3,
@@ -95,46 +111,29 @@ 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)',
+        '## Session Mode (inspect multiple areas)',
         '',
-        'For inspecting multiple areas of the same page:',
+        'Open once, run as many inspections as you need, then close:',
         '',
         BT3 + 'bash',
-        'cssprobe-cli interactive https://mysite.com --state ~/.cssprobe-cli/states/mysite.json',
-        BT3,
+        'cssprobe-cli open https://mysite.com',
         '',
-        'Runtime commands:',
+        'cssprobe-cli tree .dialog-A               # DOM tree',
+        'cssprobe-cli layout .sidebar-B            # ASCII layout diagram',
+        'cssprobe-cli findings .modal              # Findings only',
+        'cssprobe-cli inspect .content --json      # JSON output',
+        'cssprobe-cli inject-css ".sidebar { background: red; }"  # inject CSS to test changes',
         '',
-        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',
+        'cssprobe-cli close                         # stop browser + daemon',
         BT3,
         '',
         '## Output Modes',
         '',
-        'Always pass ' + BT + '--json' + BT + ' when consuming output programmatically:',
+        'Pass ' + BT + '--json' + BT + ' when consuming output programmatically:',
         '',
         BT3 + '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 ' + BT + "'.findings[] | {id, confidence, message}'" + BT,
+        'cssprobe-cli inspect body --json',
+        'cssprobe-cli inspect body --json | jq ' + BT + "'.findings[] | {id, confidence, message}'" + BT,
         BT3,
         '',
         'Without ' + BT + '--json' + BT + ', output is a Markdown report with ancestor chain,',
@@ -155,24 +154,28 @@ function buildSkillMd() {
         '## inspect Options',
         '',
         BT3 + 'bash',
-        'cssprobe-cli inspect <url> [selector] [options]',
+        'cssprobe-cli inspect <selector> [options]',
         '',
         'Arguments:',
-        '  <url>                       URL, file:// path, or local HTML file',
-        '  [selector]                  CSS selector for root (auto-detected if omitted)',
+        '  <selector>                  CSS selector for the root element (required)',
         '',
         'Options:',
         '  --json                      Output structured JSON',
-        '  --headed                    Show browser window',
-        '  --browser <engine>          chromium|firefox|webkit (default chromium)',
-        '  --zoom                      Run 1x/0.5x viewport diagnosis',
-        '  --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)',
+        '  --depth <n>                 DOM tree depth (default: auto)',
+        BT3,
+        '',
+        '## open Options',
+        '',
+        BT3 + 'bash',
+        'cssprobe-cli open <url> [options]',
+        '',
+        'Options:',
+        '  --browser <engine>          chromium|firefox|webkit (default chromium)',
+        '  --headed                    Show browser window',
+        '  --viewport <WxH>            Viewport size, e.g. 1280x720',
+        '  --state <file>              Load saved state (cookies + localStorage)',
         BT3,
         '',
         '## state-import: Netscape Cookie Format',
@@ -204,20 +207,21 @@ function buildSkillMd() {
         '',
         BT3 + 'bash',
         '# Inspect a specific component',
-        'cssprobe-cli inspect https://app.example.com/page ".modal-body"',
+        'cssprobe-cli open https://app.example.com/page',
+        'cssprobe-cli inspect ".modal-body"',
         '',
         '# Get structured data for programmatic analysis',
-        'cssprobe-cli --json inspect https://app.example.com/page ".modal-body" | jq ' + BT + "'.findings[]'" + BT,
+        'cssprobe-cli inspect ".modal-body" --json | jq ' + BT + "'.findings[]'" + BT,
         BT3,
         '',
         '### 2. Check if a page has overflow issues',
         '',
         BT3 + 'bash',
-        '# Auto-detect and analyze',
-        'cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout',
+        '# Open and analyze',
+        'cssprobe-cli open https://getbootstrap.com/docs/5.3/examples/checkout',
         '',
         '# Look for findings with level "warning" or "error"',
-        'cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body --json | jq ' + BT + "'.findings[] | select(.level != \"info\")'" + BT,
+        'cssprobe-cli inspect body --json | jq ' + BT + "'.findings[] | select(.level != \"info\")'" + BT,
         BT3,
         '',
         '### 3. Inspect with authentication',
@@ -226,15 +230,9 @@ function buildSkillMd() {
         '# Import cookies first',
         'cssprobe-cli state-import exported-cookies.txt --name app',
         '',
-        '# Then inspect with state',
-        'cssprobe-cli inspect https://app.example.com/dashboard ".main-panel" --state ~/.cssprobe-cli/states/app.json',
-        BT3,
-        '',
-        '### 4. Compare layouts at different viewports',
-        '',
-        BT3 + 'bash',
-        '# Use --zoom to compare 1x vs 0.5x viewport',
-        'cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body --zoom',
+        '# Then open the session with state',
+        'cssprobe-cli open https://app.example.com/dashboard --state ~/.cssprobe-cli/states/app.json',
+        'cssprobe-cli inspect ".main-panel"',
         BT3,
         '',
         '## Anti-patterns',
@@ -243,8 +241,6 @@ function buildSkillMd() {
         '- ' + BT + 'viewport-overflow' + BT + ' flags on elements below the fold are normal for scrolling pages -- not bugs.',
         '- Cross-origin stylesheet blocking is expected. Declared values from blocked sheets are',
         '  marked UNVERIFIABLE. Computed values from getComputedStyle() are still accurate.',
-        '- ' + BT + '--auto-root' + BT + ' picks the first modal/dialog/scroll-container -- for specific elements,',
-        '  provide an explicit selector.',
         '- Login state files contain cookies -- treat them as secrets.',
         '',
     ].join('\n');
@@ -269,9 +265,8 @@ function buildPitfallsMd() {
         '',
         '## Selector Not Found',
         '',
-        '- If ' + BT + 'cssprobe-cli inspect <url> <selector>' + BT + ' returns ' + BT + '未找到 <selector>' + BT + ',',
+        '- If ' + BT + 'cssprobe-cli inspect <selector>' + BT + ' returns ' + BT + 'Not found: <selector>' + BT + ',',
         '  the element doesn\'t exist in the DOM at page load.',
-        '- Use ' + BT + '--auto-root' + BT + ' (omit selector) to let cssprobe-cli pick a candidate.',
         '- For SPAs that load content dynamically, use ' + BT + '--headed' + BT + ' to see what\'s on the page.',
         '',
         '## Login State',
@@ -297,7 +292,7 @@ function buildPitfallsMd() {
         '',
         '## JSON Output',
         '',
-        '- Pass ' + BT + '--json' + BT + ' BEFORE the command name: ' + BT + 'cssprobe-cli --json inspect <url>' + BT + '.',
+        '- Pass ' + BT + '--json' + BT + ' AFTER the command name: ' + BT + 'cssprobe-cli inspect body --json' + BT + '.',
         '- In JSON mode, errors are ' + BT + '{ "isError": true, "error": "message" }' + BT + ' and the',
         '  process exits with code 1. Check for ' + BT + 'isError' + BT + ' before parsing results.',
         '',

package/dist/utils/socketConnection.d.ts

@@ -18,4 +18,3 @@ export declare class SocketConnection {
     private _onData;
     private _dispatchMessage;
 }
-export declare function compareSemver(a: string, b: string): number;

package/dist/utils/socketConnection.js

@@ -5,7 +5,6 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SocketConnection = void 0;
-exports.compareSemver = compareSemver;
 class SocketConnection {
     _socket;
     _pendingBuffers = [];
@@ -61,17 +60,4 @@ class SocketConnection {
     }
 }
 exports.SocketConnection = SocketConnection;
-function compareSemver(a, b) {
-    const aBase = a.replace(/-.*$/, '');
-    const bBase = b.replace(/-.*$/, '');
-    const aParts = aBase.split('.').map(Number);
-    const bParts = bBase.split('.').map(Number);
-    for (let i = 0; i < 3; i++) {
-        if (aParts[i] > bParts[i])
-            return 1;
-        if (aParts[i] < bParts[i])
-            return -1;
-    }
-    return 0;
-}
 //# sourceMappingURL=socketConnection.js.map

package/package.json

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