devlens-mcp 0.1.1 → 0.1.3

package/README.md

@@ -17,23 +17,19 @@ 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.
+Edit `devlens.config.js` to map your source files to dev server routes, then restart Claude Code.
 
-```typescript
-// devlens.config.ts
+```js
+// devlens.config.js
+/** @type {import('devlens-mcp').DevLensConfig} */
 const config = {
   devServerUrl: 'http://localhost:5173',
   routes: [

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.
@@ -63,7 +64,8 @@ call \`dl_capture\` immediately and show the result.
 - Omit selector for full-page captures (slower, larger image)
 - Prefer element-level captures during iteration, full-page before deploy
 `;
-var CONFIG_TEMPLATE = `// devlens.config.ts \u2014 map your source files to dev server routes
+var CONFIG_TEMPLATE = `// devlens.config.js \u2014 map your source files to dev server routes
+/** @type {import('devlens-mcp').DevLensConfig} */
 const config = {
   devServerUrl: 'http://localhost:5173',
   hmrDebounceMs: 150,
@@ -96,22 +98,26 @@ async function runInit() {
   mkdirSync(skillsDir, { recursive: true });
   writeFileSync(join(skillsDir, "devlens.md"), SKILL_CONTENT);
   console.log("  \u2713 .claude/skills/devlens.md written");
-  const configPath = resolve(cwd, "devlens.config.ts");
+  const configPath = resolve(cwd, "devlens.config.js");
   if (!existsSync(configPath)) {
     writeFileSync(configPath, CONFIG_TEMPLATE);
-    console.log("  \u2713 devlens.config.ts created (edit this to add your routes)");
+    console.log("  \u2713 devlens.config.js created (edit this to add your routes)");
   } else {
-    console.log("  \u2713 devlens.config.ts already exists \u2014 skipped");
+    console.log("  \u2713 devlens.config.js 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.");
 }
@@ -129,18 +135,26 @@ var defaults = {
   hmrDebounceMs: 150
 };
 async function loadConfig(cwd = process.cwd()) {
-  const configPath = resolve2(cwd, "devlens.config.ts");
-  try {
-    const jsPath = configPath.replace(/\.ts$/, ".js");
-    const mod = await import(pathToFileURL(jsPath).href);
-    return { ...defaults, ...mod.default };
-  } catch {
-    return {
-      ...defaults,
-      devServerUrl: "http://localhost:5173",
-      routes: []
-    };
+  const candidates = [
+    resolve2(cwd, "devlens.config.js"),
+    resolve2(cwd, "devlens.config.ts")
+  ];
+  for (const configPath of candidates) {
+    try {
+      const mod = await import(pathToFileURL(configPath).href);
+      return { ...defaults, ...mod.default };
+    } catch (err) {
+      const code = err.code;
+      if (code === "ERR_MODULE_NOT_FOUND" || code === "MODULE_NOT_FOUND") continue;
+      console.error(`[devlens] Failed to load ${configPath}:`, err);
+    }
   }
+  console.warn('[devlens] No devlens.config.js found \u2014 using defaults (routes: []). Run "npx devlens-mcp init" to create one.');
+  return {
+    ...defaults,
+    devServerUrl: "http://localhost:5173",
+    routes: []
+  };
 }
 
 // src/browser/manager.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devlens-mcp",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Real-time visual feedback plugin for Claude Code frontend development",
   "type": "module",
   "main": "dist/index.js",