cssprobe-cli 0.2.7 → 0.2.9

package/AGENTS.md

@@ -55,6 +55,8 @@ src/
 
 ### Session Management
 - `open [url]` — Open browser in session mode (non-blocking)
+  - `--viewport <WxH>` — Set viewport size (e.g. `--viewport 1280x720`)
+  - `--state <file>` — Load saved state (cookies + localStorage)
 - `close` — Close the browser session
 - `status` — Show current session status
 
@@ -68,11 +70,16 @@ src/
 - `inject-css <css>` — Inject CSS into the current page
 
 ### Browser
+- `resize <width> <height>` — Resize browser viewport
+- `eval <expression>` — Evaluate JavaScript (browser context)
+- `playwright <call>` — Execute Playwright API call (Node.js context)
 - `screenshot` — Take a screenshot
-- `eval <expression>` — Evaluate JavaScript
 
 ### State
 - `state-import [file]` — Import cookies from Netscape format
+  - `--out <file>` — Output state file path (default: `~/.cssprobe-cli/states/imported.json`)
+  - `--name <name>` — Custom name for the state file (e.g. `mysite` or `mysite.json`)
+  - `--merge <file>` — Existing state file to merge into
 
 ### Config
 - `config-show` / `config-set` / `config-list` / `config-use` / `config-new` / `config-path`

package/README.md

@@ -26,6 +26,9 @@ cssprobe-cli skill-install
 # Open browser (non-blocking, starts daemon session)
 cssprobe-cli open https://getbootstrap.com/docs/5.3/examples/checkout
 
+# Open with custom viewport
+cssprobe-cli open https://example.com --viewport 1280x720
+
 # Inspect with CSS selector
 cssprobe-cli inspect .container
 
@@ -68,6 +71,12 @@ cssprobe-cli close
 ```bash
 # Import cookies from browser export (Netscape format)
 cssprobe-cli state-import cookies.txt --out ~/.cssprobe-cli/states/mysite.json
+
+# Or use --name for simpler syntax
+cssprobe-cli state-import cookies.txt --name mysite
+
+# Open browser with saved state
+cssprobe-cli open https://mysite.com --state ~/.cssprobe-cli/states/mysite.json
 ```
 
 ### 4. JSON Output
@@ -113,6 +122,8 @@ cssprobe-cli close
 
 ```bash
 cssprobe-cli open [url]           # Open browser in session mode (non-blocking)
+cssprobe-cli open [url] --viewport 1280x720  # Open with custom viewport
+cssprobe-cli open [url] --state ~/.cssprobe-cli/states/mysite.json  # Open with saved state
 cssprobe-cli close                # Close browser session
 cssprobe-cli status               # Show session status
 ```
@@ -135,8 +146,10 @@ cssprobe-cli inject-css <css>     # Inject CSS into current page
 ### Browser
 
 ```bash
+cssprobe-cli resize <width> <height>  # Resize browser viewport
+cssprobe-cli eval <expression>    # Evaluate JavaScript (browser context)
+cssprobe-cli playwright <call>    # Execute Playwright API (Node.js context)
 cssprobe-cli screenshot           # Take screenshot
-cssprobe-cli eval <expression>    # Evaluate JavaScript
 ```
 
 ### State
@@ -208,6 +221,9 @@ Import cookies from Netscape format (browser export standard) into a Playwright
 # From file
 cssprobe-cli state-import cookies.txt --out mystate.json
 
+# From file with custom name (saves to ~/.cssprobe-cli/states/<name>.json)
+cssprobe-cli state-import cookies.txt --name mysite
+
 # From stdin
 cat cookies.txt | cssprobe-cli state-import --out mystate.json
 

package/dist/cli/commands.js

@@ -55,6 +55,8 @@ const open = (0, command_1.declareCommand)({
     options: z.object({
         browser: z.enum(['chromium', 'firefox', 'webkit']).optional().describe('browser engine (default chromium)'),
         headed: z.boolean().optional().describe('show the browser window'),
+        viewport: z.string().optional().describe('viewport size as WxH (e.g. 1280x720)'),
+        state: z.string().optional().describe('path to saved state file (cookies + localStorage)'),
     }),
 });
 const close = (0, command_1.declareCommand)({
@@ -126,14 +128,31 @@ const screenshot = (0, command_1.declareCommand)({
         'full-page': z.boolean().optional().describe('take screenshot of the full scrollable page'),
     }),
 });
+const resize = (0, command_1.declareCommand)({
+    name: 'resize',
+    category: 'core',
+    description: 'Resize the browser viewport',
+    args: z.object({
+        width: numberArg.describe('viewport width'),
+        height: numberArg.describe('viewport height'),
+    }),
+});
 const evalCmd = (0, command_1.declareCommand)({
     name: 'eval',
     category: 'core',
-    description: 'Evaluate JavaScript expression on the page',
+    description: 'Evaluate JavaScript expression on the page (browser context)',
     args: z.object({
         expression: z.string().describe('JavaScript expression to evaluate'),
     }),
 });
+const playwrightCmd = (0, command_1.declareCommand)({
+    name: 'playwright',
+    category: 'core',
+    description: 'Execute Playwright API call (Node.js context)',
+    args: z.object({
+        call: z.string().describe('Playwright API call, e.g. "page.setViewportSize({width: 1280, height: 720})"'),
+    }),
+});
 // ── state management ──
 const stateImport = (0, command_1.declareCommand)({
     name: 'state-import',
@@ -144,6 +163,7 @@ const stateImport = (0, command_1.declareCommand)({
     }),
     options: z.object({
         out: z.string().optional().describe('output state file path (default: ~/.cssprobe-cli/states/imported.json)'),
+        name: z.string().optional().describe('custom name for the state file (e.g. mysite or mysite.json)'),
         merge: z.string().optional().describe('existing state file to merge into'),
     }),
 });
@@ -222,7 +242,7 @@ const commandsArray = [
     // cssprobe
     inspect, tree, layout, findings, injectCss,
     // browser
-    screenshot, evalCmd,
+    resize, evalCmd, playwrightCmd, screenshot,
     // state
     stateImport,
     // config

package/dist/cli/program.js

@@ -58,6 +58,8 @@ async function program() {
         case 'inject-css':
         case 'screenshot':
         case 'eval':
+        case 'resize':
+        case 'playwright':
             await handleSessionCommand(commandName, command, rawArgs, output);
             return;
     }
@@ -109,10 +111,30 @@ async function handleOpen(command, args, output) {
         const url = parsed.url || 'about:blank';
         const browser = parsed.browser || 'chromium';
         const headed = !!parsed.headed;
+        const viewportStr = parsed.viewport;
+        const state = parsed.state;
+        // Parse viewport
+        let viewport;
+        if (viewportStr) {
+            const parts = viewportStr.split('x');
+            if (parts.length !== 2) {
+                output.error('Invalid viewport format. Use WxH (e.g. 1280x720)');
+                return;
+            }
+            const width = parseInt(parts[0], 10);
+            const height = parseInt(parts[1], 10);
+            if (isNaN(width) || isNaN(height)) {
+                output.error('Invalid viewport dimensions. Must be numbers.');
+                return;
+            }
+            viewport = { width, height };
+        }
         // Start daemon
         const { pid } = await session_1.Session.startDaemon({
             browser,
             headed,
+            viewport,
+            state,
             _: ['open', url],
         }, 'open');
         // Wait a bit for daemon to start
@@ -126,6 +148,7 @@ async function handleOpen(command, args, output) {
             sessionId: 'default',
             pid,
             url,
+            viewport: viewport || { width: 1280, height: 720 },
         };
         if (output.json) {
             console.log(JSON.stringify(result, null, 2));
@@ -134,6 +157,7 @@ async function handleOpen(command, args, output) {
             console.log(`Browser opened at ${url}`);
             console.log(`Session ID: default`);
             console.log(`PID: ${pid}`);
+            console.log(`Viewport: ${viewport?.width || 1280}x${viewport?.height || 720}`);
         }
     }
     catch (e) {
@@ -372,7 +396,16 @@ async function handleStateImport(command, args, output) {
         const cmdArgs = splitArgs(args);
         const parsed = (0, command_1.parseCommand)(command, cmdArgs);
         const filePath = parsed.file;
-        const outPath = parsed.out || path_1.default.join(os_1.default.homedir(), '.cssprobe-cli', 'states', 'imported.json');
+        const name = parsed.name;
+        let outPath = parsed.out;
+        if (!outPath && name) {
+            // Use custom name in default states directory
+            const fileName = name.endsWith('.json') ? name : `${name}.json`;
+            outPath = path_1.default.join(os_1.default.homedir(), '.cssprobe-cli', 'states', fileName);
+        }
+        else if (!outPath) {
+            outPath = path_1.default.join(os_1.default.homedir(), '.cssprobe-cli', 'states', 'imported.json');
+        }
         const mergePath = parsed.merge;
         let content;
         if (filePath) {

package/dist/daemon/daemon.d.ts

@@ -7,5 +7,10 @@ import type { ClientInfo } from './session';
 export interface DaemonOptions {
     headed?: boolean;
     browser?: string;
+    viewport?: {
+        width: number;
+        height: number;
+    };
+    state?: string;
 }
 export declare function startDaemon(sessionName: string, clientInfo: ClientInfo, options: DaemonOptions): Promise<string>;

package/dist/daemon/daemon.js

@@ -16,6 +16,7 @@ const socketConnection_1 = require("../utils/socketConnection");
 const launcher_1 = require("../browser/launcher");
 const analyzer_1 = require("../engine/analyzer");
 const renderer_1 = require("../engine/renderer");
+const AsyncFunction = Object.getPrototypeOf(async function () { }).constructor;
 async function startDaemon(sessionName, clientInfo, options) {
     const sessionConfig = createSessionConfig(clientInfo, sessionName, options);
     const { socketPath } = sessionConfig;
@@ -32,6 +33,8 @@ async function startDaemon(sessionName, clientInfo, options) {
     const launcher = new launcher_1.BrowserLauncher({
         browser: options.browser || 'chromium',
         headed: options.headed !== false,
+        viewport: options.viewport,
+        state: options.state,
     });
     const server = net_1.default.createServer(socket => {
         const connection = new socketConnection_1.SocketConnection(socket);
@@ -173,6 +176,30 @@ async function executeCommand(launcher, args) {
             const result = await page.evaluate(expression);
             return { text: JSON.stringify(result, null, 2) };
         }
+        case 'resize': {
+            const width = parseInt(params[0], 10);
+            const height = parseInt(params[1], 10);
+            if (isNaN(width) || isNaN(height))
+                throw new Error('Usage: cssprobe-cli resize <width> <height>');
+            const page = launcher.getPage();
+            if (!page)
+                throw new Error('Browser is not open. Run: cssprobe-cli open <url>');
+            await page.setViewportSize({ width, height });
+            return { text: JSON.stringify({ width, height }) };
+        }
+        case 'playwright': {
+            const call = params[0];
+            if (!call)
+                throw new Error('Playwright API call is required');
+            const page = launcher.getPage();
+            if (!page)
+                throw new Error('Browser is not open. Run: cssprobe-cli open <url>');
+            // Create a safe eval context with page and browser objects
+            const asyncFunction = new AsyncFunction('page', 'browser', `return ${call}`);
+            const browser = page.context().browser();
+            const result = await asyncFunction(page, browser);
+            return { text: JSON.stringify(result, null, 2) };
+        }
         default:
             throw new Error(`Unknown command: ${command}`);
     }

package/dist/daemon/daemonEntry.js

@@ -12,6 +12,7 @@ const sessionName = args[0] || 'default';
 const options = {
     headed: args.includes('--headed'),
     browser: args.find(a => a.startsWith('--browser='))?.split('=')[1],
+    state: args.find(a => a.startsWith('--state='))?.split('=')[1],
 };
 async function main() {
     try {

package/dist/daemon/session.js

@@ -84,6 +84,8 @@ class Session {
             daemonArgs.push('--headed');
         if (args.browser)
             daemonArgs.push(`--browser=${args.browser}`);
+        if (args.state)
+            daemonArgs.push(`--state=${args.state}`);
         const child = require('child_process').spawn(process.execPath, daemonArgs, {
             detached: true,
             stdio: ['ignore', 'pipe', err],

package/dist/daemonEntry.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "cssprobe-cli",
-      version: "0.2.7",
+      version: "0.2.9",
       description: "Runtime CSS probe \u2014 inspect layout, colors, backgrounds, fonts and more in a live browser. AI agents and shell automation.",
       keywords: [
         "css",
@@ -1169,6 +1169,8 @@ function renderJSON(snapshot, findings, brief = false) {
 }
 
 // src/daemon/daemon.ts
+var AsyncFunction = Object.getPrototypeOf(async function() {
+}).constructor;
 async function startDaemon(sessionName2, clientInfo, options2) {
   const sessionConfig = createSessionConfig(clientInfo, sessionName2, options2);
   const { socketPath } = sessionConfig;
@@ -1181,7 +1183,9 @@ async function startDaemon(sessionName2, clientInfo, options2) {
   }
   const launcher = new BrowserLauncher({
     browser: options2.browser || "chromium",
-    headed: options2.headed !== false
+    headed: options2.headed !== false,
+    viewport: options2.viewport,
+    state: options2.state
   });
   const server = import_net.default.createServer((socket) => {
     const connection = new SocketConnection(socket);
@@ -1320,6 +1324,29 @@ async function executeCommand(launcher, args2) {
       const result = await page.evaluate(expression);
       return { text: JSON.stringify(result, null, 2) };
     }
+    case "resize": {
+      const width = parseInt(params[0], 10);
+      const height = parseInt(params[1], 10);
+      if (isNaN(width) || isNaN(height))
+        throw new Error("Usage: cssprobe-cli resize <width> <height>");
+      const page = launcher.getPage();
+      if (!page)
+        throw new Error("Browser is not open. Run: cssprobe-cli open <url>");
+      await page.setViewportSize({ width, height });
+      return { text: JSON.stringify({ width, height }) };
+    }
+    case "playwright": {
+      const call = params[0];
+      if (!call)
+        throw new Error("Playwright API call is required");
+      const page = launcher.getPage();
+      if (!page)
+        throw new Error("Browser is not open. Run: cssprobe-cli open <url>");
+      const asyncFunction = new AsyncFunction("page", "browser", `return ${call}`);
+      const browser = page.context().browser();
+      const result = await asyncFunction(page, browser);
+      return { text: JSON.stringify(result, null, 2) };
+    }
     default:
       throw new Error(`Unknown command: ${command}`);
   }
@@ -1426,7 +1453,8 @@ var args = process.argv.slice(2);
 var sessionName = args[0] || "default";
 var options = {
   headed: args.includes("--headed"),
-  browser: args.find((a) => a.startsWith("--browser="))?.split("=")[1]
+  browser: args.find((a) => a.startsWith("--browser="))?.split("=")[1],
+  state: args.find((a) => a.startsWith("--state="))?.split("=")[1]
 };
 async function main() {
   try {

package/dist/help.json

@@ -1,11 +1,13 @@
 {
-  "global": "Usage: cssprobe-cli <command> [args] [options]\n\n\nSession Management:\n  open [url]                  open browser in session mode (non-blocking)\n  close                       close the browser session\n  status                      show current session status\n  eval <expression>           evaluate javascript expression on the page\n  state-import [file]         import cookies from netscape format file\n\nCSS Inspection:\n  inspect <selector>          inspect the runtime css of a page element\n  tree <selector>             show dom tree structure\n  layout <selector>           show ascii layout diagram\n  findings <selector>         show only issues/warnings/errors\n  inject-css <css>            inject css into the current page\n\nExport:\n  screenshot                  take a screenshot of the current page\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\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\nSession Management:\n  open [url]                  open browser in session mode (non-blocking)\n  close                       close the browser session\n  status                      show current session status\n  resize <width> <height>     resize the browser viewport\n  eval <expression>           evaluate javascript expression on the page (browser context)\n  playwright <call>           execute playwright api call (node.js context)\n  state-import [file]         import cookies from netscape format file\n\nCSS Inspection:\n  inspect <selector>          inspect the runtime css of a page element\n  tree <selector>             show dom tree structure\n  layout <selector>           show ascii layout diagram\n  findings <selector>         show only issues/warnings/errors\n  inject-css <css>            inject css into the current page\n\nExport:\n  screenshot                  take a screenshot of the current page\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\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": {
     "open": {
-      "help": "cssprobe-cli open [url]\n\nOpen browser in session mode (non-blocking)\n\nArguments:\n  [url]                       url, file:// path, or local html file path\nOptions:\n  --browser                   browser engine (default chromium)\n  --headed                    show the browser window\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
+      "help": "cssprobe-cli open [url]\n\nOpen browser in session mode (non-blocking)\n\nArguments:\n  [url]                       url, file:// path, or local html file path\nOptions:\n  --browser                   browser engine (default chromium)\n  --headed                    show the browser window\n  --viewport                  viewport size as wxh (e.g. 1280x720)\n  --state                     path to saved state file (cookies + localstorage)\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
       "flags": {
         "browser": "string",
-        "headed": "boolean"
+        "headed": "boolean",
+        "viewport": "string",
+        "state": "string"
       },
       "args": [
         "url"
@@ -63,24 +65,40 @@
         "css"
       ]
     },
-    "screenshot": {
-      "help": "cssprobe-cli screenshot \n\nTake a screenshot of the current page\n\nOptions:\n  --full-page                 take screenshot of the full scrollable page\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
-      "flags": {
-        "full-page": "boolean"
-      },
-      "args": []
+    "resize": {
+      "help": "cssprobe-cli resize <width> <height>\n\nResize the browser viewport\n\nArguments:\n  <width>                     viewport width\n  <height>                    viewport height\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
+      "flags": {},
+      "args": [
+        "width",
+        "height"
+      ]
     },
     "eval": {
-      "help": "cssprobe-cli eval <expression>\n\nEvaluate JavaScript expression on the page\n\nArguments:\n  <expression>                javascript expression to evaluate\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
+      "help": "cssprobe-cli eval <expression>\n\nEvaluate JavaScript expression on the page (browser context)\n\nArguments:\n  <expression>                javascript expression to evaluate\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
       "flags": {},
       "args": [
         "expression"
       ]
     },
+    "playwright": {
+      "help": "cssprobe-cli playwright <call>\n\nExecute Playwright API call (Node.js context)\n\nArguments:\n  <call>                      playwright api call, e.g. \"page.setviewportsize({width: 1280, height: 720})\"\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
+      "flags": {},
+      "args": [
+        "call"
+      ]
+    },
+    "screenshot": {
+      "help": "cssprobe-cli screenshot \n\nTake a screenshot of the current page\n\nOptions:\n  --full-page                 take screenshot of the full scrollable page\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
+      "flags": {
+        "full-page": "boolean"
+      },
+      "args": []
+    },
     "state-import": {
-      "help": "cssprobe-cli state-import [file]\n\nImport cookies from Netscape format file\n\nArguments:\n  [file]                      netscape cookie file path (reads from stdin if omitted)\nOptions:\n  --out                       output state file path (default: ~/.cssprobe-cli/states/imported.json)\n  --merge                     existing state file to merge into\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
+      "help": "cssprobe-cli state-import [file]\n\nImport cookies from Netscape format file\n\nArguments:\n  [file]                      netscape cookie file path (reads from stdin if omitted)\nOptions:\n  --out                       output state file path (default: ~/.cssprobe-cli/states/imported.json)\n  --name                      custom name for the state file (e.g. mysite or mysite.json)\n  --merge                     existing state file to merge into\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
       "flags": {
         "out": "string",
+        "name": "string",
         "merge": "string"
       },
       "args": [

package/dist/installer/skill-template.js

@@ -182,6 +182,9 @@ function buildSkillMd() {
         '# From file',
         'cssprobe-cli state-import cookies.txt --out mystate.json',
         '',
+        '# From file with custom name (saves to ~/.cssprobe-cli/states/<name>.json)',
+        'cssprobe-cli state-import cookies.txt --name mysite',
+        '',
         '# From stdin',
         'cat cookies.txt | cssprobe-cli state-import --out mystate.json',
         '',
@@ -222,7 +225,7 @@ function buildSkillMd() {
         '',
         BT3 + 'bash',
         '# Import cookies first',
-        'cssprobe-cli state-import exported-cookies.txt --out ~/.cssprobe-cli/states/app.json',
+        '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',

package/package.json

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