feat: add project root detection and version compatibility checks

- Add /project-root endpoint to host server
- Add version compatibility with minimal (0.0.3) and recommended (0.0.12) versions
- Display red status for unsupported versions, yellow for outdated versions
- Compute relative paths from project root for all frameworks
- Remove React /src/ path hack in favor of project root relative paths
- Move version requirements to config.json to avoid Chrome manifest warnings
- Apply relative path conversion in UI display and Claude prompts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: alexremoon

chrome-devtools-extension/config.json

@@ -0,0 +1,6 @@
+{
+  "host_version_requirements": {
+    "minimal": "0.0.3",
+    "recommended": "0.0.12"
+  }
+}

chrome-devtools-extension/injected.js

@@ -34,10 +34,10 @@
       let lineNumber = "";
 
       if (fiber._debugSource) {
-        fileName = this.stripAbsolutePath(fiber._debugSource.fileName);
+        fileName = fiber._debugSource.fileName;
         lineNumber = fiber._debugSource.lineNumber;
       } else if (fiber._debugOwner._debugSource) {
-        fileName = this.stripAbsolutePath(fiber._debugOwner._debugSource.fileName);
+        fileName = fiber._debugOwner._debugSource.fileName;
         lineNumber = fiber._debugOwner._debugSource.lineNumber;
       } else if (fiber._debugOwner._debugStack) {
         const stack = fiber._debugOwner._debugStack.stack;
@@ -113,14 +113,6 @@
       const internals = ["Fragment", "StrictMode", "Profiler", "Suspense"];
       return internals.includes(name) || name.startsWith("React.");
     }
-
-    stripAbsolutePath(path) {
-      const index = path.indexOf("/src/");
-      if (index !== -1) {
-        return path.substring(index + 1);
-      }
-      return path;
-    }
   }
 
   const detector = new FrameworkDetector();

chrome-devtools-extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Claude DevTools",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Pick elements and send them to Claude with React/Angular component detection",
   "permissions": ["activeTab", "storage", "tabs", "debugger", "scripting"],
   "host_permissions": ["<all_urls>"],
@@ -25,7 +25,7 @@
   ],
   "web_accessible_resources": [
     {
-      "resources": ["injected.js"],
+      "resources": ["injected.js", "config.json"],
       "matches": ["<all_urls>"]
     }
   ]

chrome-devtools-extension/panel.html

@@ -89,6 +89,9 @@
       .status-dot.disconnected {
         background: var(--error-color);
       }
+      .status-dot.warning {
+        background: #f59e0b;
+      }
       .port-input {
         margin-left: 8px;
         background: transparent;

chrome-devtools-extension/panel.js

@@ -1,5 +1,6 @@
 let selectedElement = null;
 let isPicking = false;
+let projectRoot = null;
 
 // Initialize source-map library
 sourceMap.SourceMapConsumer.initialize({
@@ -233,7 +234,8 @@ document.addEventListener("DOMContentLoaded", function () {
         selectedElement.component.file &&
         selectedElement.component.file !== "detecting..."
       ) {
-        addDetailsRow("File:", selectedElement.component.file);
+        const displayFile = makePathRelativeToProject(selectedElement.component.file);
+        addDetailsRow("File:", displayFile);
       }
     }
 
@@ -303,7 +305,8 @@ document.addEventListener("DOMContentLoaded", function () {
         prompt += `\n- Framework: ${selectedElement.component.framework}`;
       }
       if (selectedElement.component.file) {
-        prompt += `\n- File: ${selectedElement.component.file}`;
+        const displayFile = makePathRelativeToProject(selectedElement.component.file);
+        prompt += `\n- File: ${displayFile}`;
       }
       if (
         propsOption.classList.contains("enabled") &&
@@ -348,36 +351,86 @@ document.addEventListener("DOMContentLoaded", function () {
     return result.serverPort || 47923;
   }
 
+  function compareVersions(v1, v2) {
+    const parts1 = v1.split('.').map(Number);
+    const parts2 = v2.split('.').map(Number);
+    for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
+      const part1 = parts1[i] || 0;
+      const part2 = parts2[i] || 0;
+      if (part1 > part2) return 1;
+      if (part1 < part2) return -1;
+    }
+    return 0;
+  }
+
+  function makePathRelativeToProject(absolutePath) {
+    if (!projectRoot || !absolutePath) return absolutePath;
+
+    const normalizedPath = absolutePath.replace(/\\/g, '/');
+    const normalizedRoot = projectRoot.replace(/\\/g, '/');
+
+    if (normalizedPath.startsWith(normalizedRoot)) {
+      let relative = normalizedPath.substring(normalizedRoot.length);
+      if (relative.startsWith('/')) {
+        relative = relative.substring(1);
+      }
+      return relative;
+    }
+
+    return absolutePath;
+  }
+
   async function checkConnectionStatus() {
     const port = portInput.value.trim() || "47923";
+    const configResponse = await fetch(chrome.runtime.getURL('config.json'));
+    const config = await configResponse.json();
+    const MINIMAL_HOST_VERSION = config.host_version_requirements?.minimal || "0.0.0";
+    const RECOMMENDED_HOST_VERSION = config.host_version_requirements?.recommended || "0.0.0";
+
     try {
-      const response = await fetch(`http://127.0.0.1:${port}/health`, {
-        method: "GET",
-        signal: AbortSignal.timeout(2000), // 2 second timeout
-      });
-      if (response.ok) {
-        const healthData = await response.json();
-        const version = healthData.version ? `v${healthData.version}` : "";
-        setConnectionStatus(
-          true,
-          version ? `connected ${version}` : "connected"
-        );
+      const [healthResponse, projectRootResponse] = await Promise.all([
+        fetch(`http://127.0.0.1:${port}/health`, {
+          method: "GET",
+          signal: AbortSignal.timeout(2000),
+        }),
+        fetch(`http://127.0.0.1:${port}/project-root`, {
+          method: "GET",
+          signal: AbortSignal.timeout(2000),
+        }).catch(() => null),
+      ]);
+
+      if (healthResponse.ok) {
+        const healthData = await healthResponse.json();
+        const version = healthData.version || "0.0.0";
+
+        if (projectRootResponse && projectRootResponse.ok) {
+          const data = await projectRootResponse.json();
+          projectRoot = data.projectRoot;
+        }
+
+        if (compareVersions(version, MINIMAL_HOST_VERSION) < 0) {
+          setConnectionStatus("error", `unsupported version (${version})`);
+        } else if (compareVersions(version, RECOMMENDED_HOST_VERSION) < 0) {
+          setConnectionStatus("warning", `connected (outdated, not all features may work)`);
+        } else {
+          setConnectionStatus("connected", `connected v${version}`);
+        }
       } else {
-        setConnectionStatus(false, "error");
+        setConnectionStatus("error", "error");
       }
     } catch (error) {
-      setConnectionStatus(false, "disconnected");
+      setConnectionStatus("error", "disconnected");
     }
   }
 
-  function setConnectionStatus(connected, statusText) {
-    if (connected) {
-      statusDot.classList.remove("disconnected");
-      connectionStatus.textContent = statusText;
-    } else {
+  function setConnectionStatus(state, statusText) {
+    statusDot.classList.remove("disconnected", "warning");
+    if (state === "error") {
       statusDot.classList.add("disconnected");
-      connectionStatus.textContent = statusText;
+    } else if (state === "warning") {
+      statusDot.classList.add("warning");
     }
+    connectionStatus.textContent = statusText;
   }
 
   function autoResizeTextarea(textarea) {
@@ -612,6 +665,8 @@ document.addEventListener("DOMContentLoaded", function () {
       fileName = fullName.split("?")[0];
     }
 
+    fileName = makePathRelativeToProject(fileName);
+
     return `${fileName}:${finalLineNumber}`;
   }
 

claude-devtools-host/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexstrnik/claude-devtools",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Host server for Claude DevTools Chrome extension",
   "main": "server.js",
   "bin": {

claude-devtools-host/server.js

@@ -166,6 +166,12 @@ fastify.get("/health", async (request, reply) => {
   };
 });
 
+fastify.get("/project-root", async (request, reply) => {
+  return {
+    projectRoot: process.cwd(),
+  };
+});
+
 const start = async () => {
   try {
     const port = process.env.PORT || 47923;