cbrowser 7.4.4 → 7.4.7

package/README.md

@@ -203,6 +203,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
@@ -643,10 +714,19 @@ CBrowser can run as an MCP server for both Claude Desktop (local) and claude.ai
 Connect claude.ai directly to a remote CBrowser server:
 
 1. Deploy CBrowser on your server ([full guide](docs/REMOTE-MCP-SERVER.md))
-2. In claude.ai: Settings → Integrations → Custom MCP Servers
+2. In claude.ai: Settings → Connectors → Add Custom Connector
 3. Add URL: `https://your-cbrowser-domain.com/mcp`
+4. Configure OAuth with Auth0 ([setup guide](docs/AUTH0-SETUP.md))
+
+**Public Demo (rate-limited):** `https://cbrowser-mcp-demo.wyldfyre.ai/mcp`
+- No authentication required
+- Rate limit: 5 requests/minute, burst of 10
+- For evaluation purposes only
 
-**Try our public demo:** `https://cbrowser-mcp.wyldfyre.ai/mcp`
+**Authenticated Server:** `https://cbrowser-mcp.wyldfyre.ai/mcp`
+- **OAuth 2.1 via Auth0** - For claude.ai web interface ([setup guide](docs/AUTH0-SETUP.md))
+- **API Key** - For Claude Code CLI and programmatic access
+- No rate limits for authenticated users
 
 #### Option 2: Local MCP (Claude Desktop)
 
@@ -904,6 +984,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];