devlens-mcp 0.1.0 → 0.1.2

package/README.md

@@ -17,18 +17,13 @@ DevLens keeps a single Chromium instance alive for the duration of your Claude C
 
 ## Setup
 
-```bash
-npm install -g devlens-mcp
-npx playwright install chromium
-```
-
-Then in your project root:
+In your project root:
 
 ```bash
 npx devlens-mcp init
 ```
 
-This creates `.mcp.json`, `.claude/skills/devlens.md`, and `devlens.config.ts` automatically.
+This creates `.mcp.json`, `.claude/skills/devlens.md`, and `devlens.config.ts`, and installs the Chromium browser automatically.
 
 Edit `devlens.config.ts` to map your source files to dev server routes, then restart Claude Code.
 

package/SKILL.md

@@ -16,12 +16,12 @@ You have access to four visual inspection tools: `dl_warmup`, `dl_capture`, `dl_
 ## Rules — follow these automatically, no user prompting needed
 
 ### Rule 1: Warmup at session start
-The first time you are about to edit any file matching `apps/web/src/**`, call `dl_warmup` first.
+The first time you are about to edit any frontend file (`.tsx`, `.ts`, `.css`, `.vue`, `.svelte`), call `dl_warmup` first.
 This pre-warms the browser so subsequent captures cost ~50ms instead of ~500ms.
 Only call it once per session.
 
 ### Rule 2: Capture after every frontend file write
-After every `Edit` or `Write` to a file matching `apps/web/src/**/*.tsx` or `apps/web/src/**/*.css`:
+After every `Edit` or `Write` to a file matching `**/*.tsx`, `**/*.vue`, `**/*.svelte`, or `**/*.css`:
 1. Call `dl_capture` with either `route` (if you know it) or `filePath` (auto-resolved from devlens.config.ts)
 2. Add `selector` if you only changed a specific component (keeps the image small and fast)
 3. Look at the returned image — does it look right?

package/dist/index.js

@@ -3,6 +3,7 @@
 // src/cli/init.ts
 import { writeFileSync, mkdirSync, existsSync, readFileSync } from "fs";
 import { resolve, join } from "path";
+import { spawnSync } from "child_process";
 var SKILL_CONTENT = `---
 name: devlens
 description: Real-time visual QA for frontend development. Auto-invoked when editing frontend files.
@@ -103,15 +104,19 @@ async function runInit() {
   } else {
     console.log("  \u2713 devlens.config.ts already exists \u2014 skipped");
   }
+  console.log("  Installing Chromium browser...");
+  const result = spawnSync("npx", ["playwright", "install", "chromium"], { stdio: "inherit", shell: true });
+  if (result.status === 0) {
+    console.log("  \u2713 Chromium installed");
+  } else {
+    console.warn('  \u26A0 Chromium install failed \u2014 run "npx playwright install chromium" manually');
+  }
   console.log("");
-  console.log("DevLens initialized. Next steps:");
-  console.log("");
-  console.log("  1. Install Chromium (one-time):");
-  console.log("     npx playwright install chromium");
+  console.log("DevLens initialized. Next step:");
   console.log("");
-  console.log("  2. Edit devlens.config.ts to map your pages to routes");
+  console.log("  1. Edit devlens.config.ts to map your pages to routes");
   console.log("");
-  console.log("  3. Restart Claude Code");
+  console.log("  2. Restart Claude Code");
   console.log("");
   console.log("  Claude will then automatically screenshot your UI after every file write.");
 }
@@ -414,16 +419,24 @@ async function startServer() {
     ]
   }));
   server.setRequestHandler(CallToolRequestSchema, async (req) => {
-    const { name, arguments: args } = req.params;
+    const { name } = req.params;
+    const args = req.params.arguments ?? {};
+    const str = (v) => typeof v === "string" ? v : void 0;
+    const num = (v) => typeof v === "number" ? v : void 0;
     try {
       if (name === "dl_warmup") {
-        const result = await warmup(args.devServerUrl, config);
+        const result = await warmup(str(args.devServerUrl), config);
         return {
           content: [{ type: "text", text: `Warmed up in ${result.durationMs}ms \u2014 ${result.url}` }]
         };
       }
       if (name === "dl_capture") {
-        const input = args;
+        const input = {
+          route: str(args.route),
+          filePath: str(args.filePath),
+          selector: str(args.selector),
+          waitMs: num(args.waitMs)
+        };
         const result = await capture(input, config);
         if ("error" in result) {
           return { content: [{ type: "text", text: `Error: ${result.error}` }] };
@@ -437,11 +450,12 @@ async function startServer() {
         return { content };
       }
       if (name === "dl_diff") {
-        const { route, selector } = args;
+        const route = str(args.route) ?? "";
+        const selector = str(args.selector);
         const result = await diff(route, selector, diffStore, config);
         if ("error" in result) return { content: [{ type: "text", text: `Error: ${result.error}` }] };
         const content = [
-          { type: "text", text: result.diff ? `Changed: ${result.diff.changedPercent}% (${result.diff.changedPixels} pixels)` : result.message ?? "Baseline set." }
+          { type: "text", text: result.diff ? `Changed: ${result.diff.changedPercent}% (${result.diff.changedPixels} pixels)` : "message" in result && typeof result.message === "string" ? result.message : "Baseline set." }
         ];
         if (result.diff?.diffImageBase64) {
           content.push({ type: "image", data: result.diff.diffImageBase64, mimeType: "image/png" });
@@ -449,7 +463,8 @@ async function startServer() {
         return { content };
       }
       if (name === "dl_snapshot") {
-        const { route, selector } = args;
+        const route = str(args.route) ?? "";
+        const selector = str(args.selector);
         const result = await snapshot(route, selector, config);
         return { content: [{ type: "text", text: JSON.stringify(result, null, 2) }] };
       }

package/package.json

@@ -1,9 +1,15 @@
 {
   "name": "devlens-mcp",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Real-time visual feedback plugin for Claude Code frontend development",
   "type": "module",
   "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
   "bin": {
     "devlens-mcp": "dist/index.js"
   },
@@ -26,19 +32,25 @@
     "dev": "tsup --watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "start": "node dist/index.js"
+    "start": "node dist/index.js",
+    "lint": "eslint src --ext .ts",
+    "format": "prettier --write src"
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.0.0",
     "minimatch": "^10.2.5",
     "pixelmatch": "^6.0.0",
     "playwright": "^1.45.0",
-    "pngjs": "^7.0.0",
-    "zod": "^3.22.0"
+    "pngjs": "^7.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
     "@types/pngjs": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.0.0",
+    "prettier": "^3.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",
     "vitest": "^1.6.0"