cbrowser 7.4.6 → 7.4.8

package/README.md

@@ -168,7 +168,40 @@ This isn't optional safety theater—it's how you give AI agents browser access
 
 ## Quick Start
 
-### Installation
+### Option 1: PAI Skill Installation (Claude Code Users)
+
+If you use [Claude Code](https://claude.ai/claude-code) with [PAI (Personal AI Infrastructure)](https://github.com/danielmiessler/Personal_AI_Infrastructure), install CBrowser as a skill:
+
+```bash
+# One-line installation
+curl -fsSL https://raw.githubusercontent.com/alexandriashai/cbrowser/main/scripts/install-skill.sh | bash
+
+# Or via npm CLI
+npx cbrowser install-skill
+```
+
+This installs CBrowser to `~/.claude/skills/CBrowser/` with full skill structure:
+- `SKILL.md` - Main skill file with workflow routing
+- `Workflows/` - Navigate, Interact, Extract, Test, Journey workflows
+- `Tools/CBrowser.ts` - CLI wrapper for PAI
+- `.memory/` - Session, selector, and persona storage
+
+After installation, add to your `~/.claude/skills/skill-index.json`:
+
+```json
+{
+  "CBrowser": "~/.claude/skills/CBrowser/SKILL.md"
+}
+```
+
+Then install dependencies:
+
+```bash
+npm install -g cbrowser
+npx playwright install
+```
+
+### Option 2: npm Installation (Standard)
 
 ```bash
 # npm
@@ -184,6 +217,10 @@ yarn add cbrowser
 ### Install Playwright Browsers
 
 ```bash
+# Install all browsers (recommended for cross-browser testing)
+npx playwright install
+
+# Or just Chromium
 npx playwright install chromium
 ```
 
@@ -203,6 +240,77 @@ npx cbrowser assert "page contains 'Welcome'"
 npx cbrowser generate-tests "https://example.com"
 ```
 
+## v7.x Features
+
+### AI Visual Regression (v7.0)
+
+Semantic screenshot comparison using AI—not just pixel diffs:
+
+```bash
+# Capture a baseline
+npx cbrowser ai-visual capture "https://example.com" --name homepage
+
+# Compare against baseline
+npx cbrowser ai-visual test "https://staging.example.com" homepage --html
+
+# List baselines
+npx cbrowser ai-visual list
+```
+
+The AI understands what changed semantically (button moved, text changed, new section added) rather than flagging every pixel difference.
+
+### Cross-Browser Visual Testing (v7.1)
+
+Compare rendering across Chrome, Firefox, and Safari:
+
+```bash
+npx cbrowser cross-browser "https://example.com" --html
+npx cbrowser cross-browser "https://example.com" --browsers chromium,firefox,webkit
+```
+
+### Responsive Visual Testing (v7.2)
+
+Test across viewport sizes (mobile, tablet, desktop):
+
+```bash
+npx cbrowser responsive "https://example.com" --html
+npx cbrowser responsive "https://example.com" --viewports mobile,tablet,desktop-lg
+npx cbrowser responsive viewports  # list available presets
+```
+
+### A/B Visual Comparison (v7.3)
+
+Compare two different URLs (staging vs production, old vs new design):
+
+```bash
+npx cbrowser ab "https://staging.example.com" "https://example.com" --html
+npx cbrowser ab "https://old.site.com" "https://new.site.com" --label-a "Old" --label-b "New"
+```
+
+### Modular Architecture (v7.4.1)
+
+Tree-shakeable imports for smaller bundles:
+
+```typescript
+// Import everything (unchanged)
+import { CBrowser, runVisualRegression, detectFlakyTests } from 'cbrowser';
+
+// Import only what you need (modular)
+import { runVisualRegression, runCrossBrowserTest } from 'cbrowser/visual';
+import { runNLTestSuite, detectFlakyTests, repairTest } from 'cbrowser/testing';
+import { huntBugs, runChaosTest, findElementByIntent } from 'cbrowser/analysis';
+import { capturePerformanceBaseline, detectPerformanceRegression } from 'cbrowser/performance';
+```
+
+| Module | Purpose |
+|--------|---------|
+| `cbrowser/visual` | Visual testing (regression, cross-browser, responsive, A/B) |
+| `cbrowser/testing` | Test automation (NL suites, repair, flaky detection, coverage) |
+| `cbrowser/analysis` | AI analysis (bug hunting, chaos testing, persona comparison) |
+| `cbrowser/performance` | Performance (baselines, regression detection) |
+
+---
+
 ## v6.0.0 Features
 
 ### Multi-Persona Comparison
@@ -913,6 +1021,8 @@ See the [`examples/`](examples/) directory:
 
 - `basic-usage.ts` - Navigation, extraction, sessions
 - `smart-automation.ts` - Smart click, assertions, test generation
+- `visual-testing.ts` - AI visual regression, cross-browser, responsive, A/B comparison
+- `remote-mcp.ts` - Remote MCP server, Auth0 OAuth, demo server setup
 - `journeys/checkout-flow.json` - Persona journey definition
 - `personas/custom-persona.json` - Custom persona template
 

package/dist/cli.js

@@ -23,7 +23,7 @@ const daemon_js_1 = require("./daemon.js");
 function showHelp() {
     console.log(`
 ╔══════════════════════════════════════════════════════════════════════════════╗
-║                           CBrowser CLI v7.4.2                                ║
+║                           CBrowser CLI v7.4.6                                ║
 ║    AI-powered browser automation with cross-browser visual testing          ║
 ╚══════════════════════════════════════════════════════════════════════════════╝
 
@@ -430,6 +430,11 @@ MCP SERVER (v5.0.0)
   mcp-remote                  Start remote HTTP MCP server for claude.ai connectors
     --port <port>             Port to listen on (default: 3000)
     --host <host>             Host to bind to (default: 0.0.0.0)
+
+PAI SKILL INSTALLATION (v7.4.6)
+  install-skill               Install CBrowser as a PAI skill to ~/.claude/skills/
+                              Downloads skill files from GitHub and creates directory structure
+                              Add to skill-index.json after installation
     --stateful                Use stateful session mode
 
 DAEMON MODE (v6.4.0)
@@ -855,6 +860,83 @@ async function main() {
         await (0, mcp_server_remote_js_1.startRemoteMcpServer)();
         return;
     }
+    // Install PAI skill
+    if (command === "install-skill") {
+        const { execSync } = await import("child_process");
+        const path = await import("path");
+        const fs = await import("fs");
+        const os = await import("os");
+        const skillDir = path.join(os.homedir(), ".claude", "skills", "CBrowser");
+        const repoUrl = "https://raw.githubusercontent.com/alexandriashai/cbrowser/main";
+        console.log(`
+╔═══════════════════════════════════════════════════════════════╗
+║           CBrowser PAI Skill Installer v7.4.6                 ║
+╚═══════════════════════════════════════════════════════════════╝
+`);
+        // Check if ~/.claude/skills exists
+        const skillsDir = path.join(os.homedir(), ".claude", "skills");
+        if (!fs.existsSync(skillsDir)) {
+            console.log("Creating ~/.claude/skills directory...");
+            fs.mkdirSync(skillsDir, { recursive: true });
+        }
+        // Check if skill exists
+        if (fs.existsSync(skillDir)) {
+            console.log("CBrowser skill already exists. Updating...");
+            fs.rmSync(skillDir, { recursive: true });
+        }
+        // Create directories
+        console.log("Creating skill directory structure...");
+        fs.mkdirSync(path.join(skillDir, "Workflows"), { recursive: true });
+        fs.mkdirSync(path.join(skillDir, "Tools"), { recursive: true });
+        fs.mkdirSync(path.join(skillDir, ".memory", "sessions"), { recursive: true });
+        // Download files
+        console.log("Downloading skill files...");
+        const files = [
+            "SKILL.md",
+            "Philosophy.md",
+            "AIVision.md",
+            "SessionManagement.md",
+            "Credentials.md",
+            "Personas.md",
+            "Workflows/Navigate.md",
+            "Workflows/Interact.md",
+            "Workflows/Extract.md",
+            "Workflows/Authenticate.md",
+            "Workflows/Test.md",
+            "Workflows/Journey.md",
+            "Tools/CBrowser.ts",
+        ];
+        for (const file of files) {
+            try {
+                const url = `${repoUrl}/skill/${file}`;
+                const dest = path.join(skillDir, file);
+                console.log(`  - ${file}`);
+                execSync(`curl -fsSL "${url}" -o "${dest}"`, { stdio: "pipe" });
+            }
+            catch {
+                console.log(`  Warning: Could not download ${file}`);
+            }
+        }
+        console.log(`
+╔═══════════════════════════════════════════════════════════════╗
+║              CBrowser Skill Installed Successfully!           ║
+╚═══════════════════════════════════════════════════════════════╝
+
+Skill installed to: ${skillDir}
+
+Next steps:
+  1. Add to your skill-index.json:
+     "CBrowser": "${skillDir}/SKILL.md"
+
+  2. Install all Playwright browsers (for cross-browser testing):
+     npx playwright install
+
+  3. Start using CBrowser in Claude Code!
+
+Documentation: https://github.com/alexandriashai/cbrowser/wiki
+`);
+        return;
+    }
     // Daemon mode commands
     if (command === "daemon") {
         const subCommand = args[0];