cssprobe-cli 0.1.2 → 0.2.5

package/dist/engine/renderers/utils.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONF_BADGE = exports.BOX = void 0;
+exports.nodeLabel = nodeLabel;
+exports.smartLabel = smartLabel;
+exports.isMultiColumn = isMultiColumn;
+exports.confidenceSummary = confidenceSummary;
+function nodeLabel(node) {
+    const cls = node.classes.length ? `.${node.classes.join('.')}` : '';
+    const id = node.id ? `#${node.id}` : '';
+    return `${node.tag}${id}${cls}`;
+}
+function smartLabel(node, maxLen) {
+    const full = nodeLabel(node);
+    if (full.length <= maxLen)
+        return full;
+    const id = node.id ? `#${node.id}` : '';
+    const firstCls = node.classes.length > 0 ? `.${node.classes[0]}` : '';
+    const short = `${node.tag}${id}${firstCls}`;
+    if (short.length <= maxLen)
+        return short;
+    const tagId = `${node.tag}${id}`;
+    if (tagId.length <= maxLen)
+        return tagId;
+    if (node.tag.length <= maxLen)
+        return node.tag;
+    return node.tag.slice(0, Math.max(maxLen - 3, 1)) + '...';
+}
+function isMultiColumn(node) {
+    const display = node.props.display;
+    return (node.shape?.role === 'flex-row' ||
+        (display === 'flex' && node.props.flexDirection !== 'column') ||
+        display === 'grid' ||
+        display === 'inline-grid');
+}
+exports.BOX = { tl: '\u250C', tr: '\u2510', bl: '\u2514', br: '\u2518', h: '\u2500', v: '\u2502' };
+exports.CONF_BADGE = {
+    DEFINITE: 'DEFINITE',
+    INDEFINITE: 'INDEFINITE',
+    UNVERIFIABLE: 'UNVERIFIABLE',
+};
+function confidenceSummary(findings) {
+    const counts = findings.reduce((acc, f) => {
+        acc[f.confidence] = (acc[f.confidence] || 0) + 1;
+        return acc;
+    }, {});
+    const parts = [
+        `DEFINITE ${counts.DEFINITE || 0}`,
+        `INDEFINITE ${counts.INDEFINITE || 0}`,
+        `UNVERIFIABLE ${counts.UNVERIFIABLE || 0}`,
+    ];
+    return parts.join(' | ');
+}
+//# sourceMappingURL=utils.js.map

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: 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",
+      "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",
@@ -12,7 +12,9 @@
         "max-nodes": "string",
         "up-to": "string",
         "state": "string",
-        "brief": "boolean"
+        "brief": "boolean",
+        "layout": "boolean",
+        "wait": "boolean"
       },
       "args": [
         "url",
@@ -39,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": {
@@ -104,6 +117,8 @@
     "headed",
     "zoom",
     "brief",
+    "layout",
+    "wait",
     "local"
   ]
 }

package/dist/installer/skill-template.js

@@ -96,6 +96,39 @@ 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:',
@@ -138,6 +171,9 @@ function buildSkillMd() {
         '  --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',

package/docs/guide/installation.md

@@ -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)
 

package/package.json

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