dev3000 0.0.81 → 0.0.82

package/mcp-server/app/mcp/tools.ts

@@ -14,20 +14,14 @@ export const TOOL_DESCRIPTIONS = {
   fix_my_app:
     "🔧 **THE ULTIMATE FIND→FIX→VERIFY MACHINE!** This tool doesn't just find bugs - it FIXES them! Pure dev3000 magic that identifies issues, provides exact fixes, and verifies everything works! 🪄\n\n🔥 **INSTANT FIXING SUPERPOWERS:**\n• Detects ALL error types: server crashes, browser errors, build failures, API issues, performance problems\n• Shows EXACT user interactions that triggered each error (clicks, navigation, etc.)\n• Provides EXACT fix code with file locations and line numbers\n• Guides you through implementing fixes step-by-step\n• Verifies fixes by replaying the same interactions that caused the error!\n\n📍 **INTERACTION-BASED VERIFICATION:**\n• Every error includes the user interactions that led to it\n• Use execute_browser_action to replay these exact interactions\n• Verify your fix works by confirming the error doesn't reoccur\n• Example: Error shows '[INTERACTION] Click at (450,300)' → After fix, use execute_browser_action(action='click', params={x:450, y:300}) to verify\n\n⚡ **3 ACTION MODES:**\n• FIX NOW: 'What's broken RIGHT NOW?' → Find and fix immediately\n• FIX REGRESSION: 'What broke during testing?' → Compare before/after and fix\n• FIX CONTINUOUSLY: 'Fix issues as they appear' → Monitor and fix proactively\n\n🎪 **THE FIX-IT WORKFLOW:**\n1️⃣ I FIND all issues with their triggering interactions\n2️⃣ I provide EXACT FIXES with code snippets\n3️⃣ You implement the fixes\n4️⃣ We REPLAY the interactions to VERIFY everything works\n\n💡 **PERFECT FOR:** 'fix my app' or 'debug my app' requests, error resolution, code repairs, making broken apps work again. This tool doesn't just identify problems - it SOLVES them with precise reproduction steps!",
 
-  create_integrated_workflow:
-    "🧠 **INTELLIGENT DEBUGGING ORCHESTRATOR** - Transform dev3000 from a standalone tool into the conductor of your debugging orchestra! This tool automatically detects available MCPs and creates integrated workflows that leverage the unique strengths of each tool.\n\n🎼 **ORCHESTRATION SUPERPOWERS:**\n• Auto-detects nextjs-dev and chrome-devtools MCPs when available\n• Creates 3-phase systematic debugging workflows\n• Provides AI-powered correlation between server/client/browser layers\n• Returns concrete function calls for Claude to execute across MCPs\n\n⚡ **3-PHASE WORKFLOW MAGIC:**\n• Phase 1: Parallel Data Collection (across all available MCPs)\n• Phase 2: Deep Targeted Analysis (sequential, context-aware)\n• Phase 3: Fix Implementation & Verification (orchestrated testing)\n\n🔗 **INTEGRATION BENEFITS:**\n• With nextjs-dev: Framework-specific build/runtime error context\n• With chrome-devtools: Precise browser state inspection\n• Together: Complete full-stack debugging coverage with AI correlation\n\n💡 **PERFECT FOR:** Multi-MCP environments where you want dev3000 to intelligently coordinate debugging across tools instead of using them individually. Makes other MCPs more powerful when used together!",
-
   execute_browser_action:
     "🌐 **INTELLIGENT BROWSER AUTOMATION** - Smart browser action routing that automatically delegates to chrome-devtools MCP when available for superior automation capabilities.\n\n🎯 **INTELLIGENT DELEGATION:**\n• Screenshots → chrome-devtools MCP (better quality, no conflicts)\n• Navigation → chrome-devtools MCP (more reliable page handling)\n• Clicks → chrome-devtools MCP (precise coordinate-based interaction)\n• JavaScript evaluation → chrome-devtools MCP (enhanced debugging)\n• Scrolling & typing → dev3000 fallback (specialized actions)\n\n⚡ **PROGRESSIVE ENHANCEMENT:**\n• Uses chrome-devtools MCP when available for best results\n• Falls back to dev3000's native implementation when chrome-devtools unavailable\n• Shares the same Chrome instance via CDP URL coordination\n• Eliminates browser conflicts between tools\n\n💡 **PERFECT FOR:** Browser automation that automatically chooses the best tool for each action, ensuring optimal results whether chrome-devtools MCP is available or not.",
 
-  discover_available_mcps:
-    "🔍 **PROACTIVE MCP DISCOVERY** - Automatically discover other MCPs running on the system using process detection and port pinging. No need to manually specify which MCPs are available!\n\n🎯 **DISCOVERY METHODS:**\n• Process Detection: Scans running processes for known MCP patterns\n• Port Pinging: Tests standard MCP ports with HTTP/WebSocket health checks\n• Cross-Platform: Works on macOS, Linux, and Windows\n\n⚡ **SMART DETECTION:**\n• Detects nextjs-dev, chrome-devtools, and other common MCPs\n• Fallback from process detection to port pinging\n• Logs all discovery attempts for transparency\n\n💡 **PERFECT FOR:** 'What MCPs are available?' or when you want dev3000 to automatically find and integrate with other debugging tools!",
-
-  get_mcp_capabilities:
-    "🔍 **MCP CAPABILITY INSPECTOR** - Discover and inspect the current capabilities of available MCPs (dev3000-chrome-devtools and dev3000-nextjs-dev). Shows dynamically discovered functions with descriptions and categories. Perfect for understanding what enhanced capabilities are available for augmented delegation.\n\n⚡ **DYNAMIC DISCOVERY:**\n• Introspects MCP logs and schemas to find available functions\n• Categorizes capabilities as 'advanced' vs 'basic'\n• Generates intelligent descriptions based on function names\n• Caches results for performance (5min TTL)\n\n🎯 **REAL-TIME UPDATES:**\n• Automatically adapts when MCPs add new capabilities\n• No manual maintenance required\n• Always shows current state of available tools\n\n💡 **PERFECT FOR:** Understanding what enhanced capabilities are currently available, debugging MCP integration issues, or planning augmented debugging workflows.",
-
   analyze_visual_diff:
-    "🔍 **VISUAL DIFF ANALYZER** - Analyzes two screenshots to identify and describe visual differences. Returns detailed instructions for Claude to load and compare the images, focusing on what changed that could cause layout shifts.\n\n🎯 **WHAT IT PROVIDES:**\n• Direct instructions to load both images via Read tool\n• Context about what to look for\n• Guidance on identifying layout shift causes\n• Structured format for easy analysis\n\n💡 **PERFECT FOR:** Understanding what visual changes occurred between before/after frames in CLS detection, identifying elements that appeared/moved/resized."
+    "🔍 **VISUAL DIFF ANALYZER** - Analyzes two screenshots to identify and describe visual differences. Returns detailed instructions for Claude to load and compare the images, focusing on what changed that could cause layout shifts.\n\n🎯 **WHAT IT PROVIDES:**\n• Direct instructions to load both images via Read tool\n• Context about what to look for\n• Guidance on identifying layout shift causes\n• Structured format for easy analysis\n\n💡 **PERFECT FOR:** Understanding what visual changes occurred between before/after frames in CLS detection, identifying elements that appeared/moved/resized.",
+
+  find_component_source:
+    "🔍 **COMPONENT SOURCE FINDER** - Maps DOM elements to their source code by extracting the React component function and finding unique patterns to search for.\n\n🎯 **HOW IT WORKS:**\n• Inspects the element via Chrome DevTools Protocol\n• Extracts the React component function source using .toString()\n• Identifies unique code patterns (specific JSX, classNames, imports)\n• Returns targeted grep patterns to find the exact source file\n\n💡 **PERFECT FOR:** Finding which file contains the code for a specific element, especially useful for CLS debugging when you need to fix layout shifts in specific components."
 }
 
 // Types
@@ -671,6 +665,17 @@ export async function fixMyApp({
             results.push(
               `   💡 Use analyze_visual_diff tool with these URLs to get a detailed description of what changed`
             )
+
+            // Extract CSS selector from element description (e.g., "Navigation header (<nav>)" -> "nav")
+            if (jank.element) {
+              const selectorMatch = jank.element.match(/<(\w+)>/)
+              if (selectorMatch) {
+                const selector = selectorMatch[1].toLowerCase()
+                results.push(
+                  `   💡 Use find_component_source tool with selector "${selector}" to locate the source code`
+                )
+              }
+            }
           }
         })
 
@@ -1598,7 +1603,9 @@ export async function executeBrowserAction({
                     /^document\.querySelector\(['"][^'"]*['"]\)\.textContent$/,
                     /^document\.body\.scrollHeight$/,
                     /^window\.scrollY$/,
-                    /^window\.scrollX$/
+                    /^window\.scrollX$/,
+                    // Allow React Fiber inspection (read-only introspection)
+                    /^\s*\(function\(\)\s*\{[\s\S]*__reactFiber\$[\s\S]*\}\)\(\)\s*$/
                   ]
 
                   if (!safeExpressions.some((regex) => regex.test(expression))) {
@@ -2736,10 +2743,10 @@ export async function analyzeVisualDiff(params: {
   results.push("To analyze the visual differences between these two screenshots:")
   results.push("")
   results.push("**Step 1: Load the BEFORE image**")
-  results.push(`Use the Read tool to load: ${beforeImageUrl}`)
+  results.push(`Use the Read tool to load: \`${beforeImageUrl}\``)
   results.push("")
   results.push("**Step 2: Load the AFTER image**")
-  results.push(`Use the Read tool to load: ${afterImageUrl}`)
+  results.push(`Use the Read tool to load: \`${afterImageUrl}\``)
   results.push("")
   results.push("**Step 3: Compare and describe the differences**")
 
@@ -2767,3 +2774,328 @@ export async function analyzeVisualDiff(params: {
     content: [{ type: "text", text: results.join("\n") }]
   }
 }
+
+export async function findComponentSource(params: {
+  selector: string
+  projectName?: string
+}): Promise<{ content: Array<{ type: "text"; text: string }> }> {
+  const { selector } = params
+
+  try {
+    const sessions = findActiveSessions()
+    if (sessions.length === 0) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: "❌ **NO ACTIVE SESSIONS**\n\nNo active dev3000 sessions found. Make sure your app is running with dev3000."
+          }
+        ]
+      }
+    }
+
+    const sessionData = JSON.parse(readFileSync(sessions[0].sessionFile, "utf-8"))
+    let cdpUrl = sessionData.cdpUrl
+
+    if (!cdpUrl) {
+      try {
+        const response = await fetch("http://localhost:9222/json")
+        const pages = await response.json()
+        const activePage = pages.find(
+          (page: { type: string; url: string }) => page.type === "page" && !page.url.startsWith("chrome://")
+        )
+        if (activePage) {
+          cdpUrl = activePage.webSocketDebuggerUrl
+        }
+      } catch {
+        return {
+          content: [
+            {
+              type: "text",
+              text: "❌ **NO CDP CONNECTION**\n\nFailed to find Chrome DevTools Protocol URL."
+            }
+          ]
+        }
+      }
+    }
+
+    if (!cdpUrl) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: "❌ **NO CDP CONNECTION**\n\nNo Chrome DevTools Protocol URL found."
+          }
+        ]
+      }
+    }
+
+    // Execute the component extraction script
+    const extractScript = `
+      (function() {
+        try {
+          const element = document.querySelector(${JSON.stringify(selector)});
+          if (!element) {
+            return { error: "Element not found with selector: ${selector}" };
+          }
+
+          // Try to find React Fiber
+          const fiberKey = Object.keys(element).find(k => k.startsWith("__reactFiber$"));
+          if (!fiberKey) {
+            return { error: "No React internals found - element may not be a React component" };
+          }
+
+          const fiber = element[fiberKey];
+          let componentFunction = null;
+          let componentName = "Unknown";
+
+          // Walk up the fiber tree to find a function component
+          let current = fiber;
+          let depth = 0;
+
+          while (current && depth < 10) {
+            if (typeof current.type === 'function') {
+              componentFunction = current.type;
+              componentName = current.type.name || current.type.displayName || "Anonymous";
+              break;
+            }
+            current = current.return;
+            depth++;
+          }
+
+          if (!componentFunction) {
+            return { error: "Could not find component function in fiber tree" };
+          }
+
+          // Get the source code
+          const sourceCode = componentFunction.toString();
+
+          return {
+            success: true,
+            componentName,
+            sourceCode
+          };
+        } catch (error) {
+          return { error: error.message };
+        }
+      })()
+    `
+
+    const result = await new Promise<unknown>((resolve, reject) => {
+      const ws = new WebSocket(cdpUrl)
+      let evalId: number | null = null
+      let resolved = false
+
+      const timeout = setTimeout(() => {
+        if (!resolved) {
+          resolved = true
+          ws.close()
+          reject(new Error("CDP evaluation timeout after 5 seconds"))
+        }
+      }, 5000)
+
+      ws.on("open", async () => {
+        try {
+          ws.send(JSON.stringify({ id: 1, method: "Target.getTargets", params: {} }))
+
+          let messageId = 2
+
+          ws.on("message", async (data) => {
+            const message = JSON.parse(data.toString())
+
+            if (message.id === 1) {
+              const pageTarget = message.result.targetInfos.find((t: Record<string, unknown>) => t.type === "page")
+              if (!pageTarget) {
+                clearTimeout(timeout)
+                resolved = true
+                ws.close()
+                reject(new Error("No page targets found"))
+                return
+              }
+
+              ws.send(
+                JSON.stringify({
+                  id: messageId++,
+                  method: "Target.attachToTarget",
+                  params: { targetId: pageTarget.targetId, flatten: true }
+                })
+              )
+              return
+            }
+
+            if (message.method === "Target.attachedToTarget") {
+              evalId = messageId++
+              ws.send(
+                JSON.stringify({
+                  id: evalId,
+                  method: "Runtime.evaluate",
+                  params: { expression: extractScript, returnByValue: true }
+                })
+              )
+              return
+            }
+
+            if (evalId !== null && message.id === evalId) {
+              clearTimeout(timeout)
+              resolved = true
+              ws.close()
+              if (message.error) {
+                reject(new Error(message.error.message))
+              } else {
+                const value = message.result?.result?.value
+                resolve(value)
+              }
+            }
+          })
+
+          ws.on("error", (err) => {
+            clearTimeout(timeout)
+            if (!resolved) {
+              resolved = true
+              reject(err)
+            }
+          })
+        } catch (error) {
+          clearTimeout(timeout)
+          resolved = true
+          ws.close()
+          reject(error)
+        }
+      })
+
+      ws.on("error", (err) => {
+        clearTimeout(timeout)
+        if (!resolved) {
+          resolved = true
+          reject(err)
+        }
+      })
+    })
+
+    const evalResult = result as
+      | { error: string }
+      | {
+          success: true
+          componentName: string
+          sourceCode: string
+        }
+
+    if ("error" in evalResult) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: `❌ **ERROR EXTRACTING COMPONENT**\n\n${evalResult.error}\n\n💡 **TIPS:**\n• Make sure the selector matches an element on the page\n• Ensure the element is rendered by a React component\n• Try a simpler selector like 'nav' or '.header'`
+          }
+        ]
+      }
+    }
+
+    if (!evalResult.success) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: "❌ **FAILED TO EXTRACT COMPONENT**\n\nUnexpected result format."
+          }
+        ]
+      }
+    }
+
+    // Extract unique patterns from the source code
+    const { componentName, sourceCode } = evalResult
+    const patterns: string[] = []
+
+    // Look for unique JSX patterns (excluding common ones like <div>, <span>)
+    const jsxPattern = /<([A-Z][a-zA-Z0-9]*)/g
+    const customComponents = new Set<string>()
+    let jsxMatch = jsxPattern.exec(sourceCode)
+
+    while (jsxMatch !== null) {
+      customComponents.add(jsxMatch[1])
+      jsxMatch = jsxPattern.exec(sourceCode)
+    }
+
+    // Look for unique className patterns
+    const classNamePattern = /className=["']([^"']+)["']/g
+    const classNames = new Set<string>()
+    let classNameMatch = classNamePattern.exec(sourceCode)
+
+    while (classNameMatch !== null) {
+      classNames.add(classNameMatch[1])
+      classNameMatch = classNamePattern.exec(sourceCode)
+    }
+
+    // Build search patterns
+    const lines: string[] = []
+    lines.push("🔍 **COMPONENT SOURCE FINDER**")
+    lines.push("")
+    lines.push(`**Selector:** \`${selector}\``)
+    lines.push(`**Component:** ${componentName}`)
+    lines.push("")
+
+    if (componentName !== "Anonymous") {
+      patterns.push(`function ${componentName}`)
+      patterns.push(`const ${componentName} =`)
+      patterns.push(`export default function ${componentName}`)
+    }
+
+    // Add unique component references
+    if (customComponents.size > 0) {
+      const uniqueComponents = Array.from(customComponents).filter(
+        (name) => !["Fragment", "Suspense", "ErrorBoundary"].includes(name)
+      )
+      if (uniqueComponents.length > 0) {
+        patterns.push(`<${uniqueComponents[0]}`)
+      }
+    }
+
+    // Add unique classNames
+    if (classNames.size > 0) {
+      const firstClassName = Array.from(classNames)[0]
+      patterns.push(`className="${firstClassName}"`)
+    }
+
+    if (patterns.length === 0) {
+      lines.push("⚠️ **NO UNIQUE PATTERNS FOUND**")
+      lines.push("")
+      lines.push("The component source code doesn't contain distinctive patterns to search for.")
+      lines.push("You may need to manually search for the component.")
+    } else {
+      lines.push("📍 **SEARCH PATTERNS**")
+      lines.push("")
+      lines.push("Use these grep patterns to find the source file:")
+      lines.push("")
+
+      for (const pattern of patterns.slice(0, 3)) {
+        lines.push(`\`\`\``)
+        lines.push(`grep -r "${pattern.replace(/"/g, '\\"')}" .`)
+        lines.push(`\`\`\``)
+        lines.push("")
+      }
+
+      lines.push("💡 **TIP:** Start with the first pattern. If it returns multiple results, try combining patterns.")
+    }
+
+    // Show a preview of the source code
+    const preview = sourceCode.substring(0, 300)
+    lines.push("")
+    lines.push("**Source Code Preview:**")
+    lines.push("```javascript")
+    lines.push(`${preview}...`)
+    lines.push("```")
+
+    return {
+      content: [{ type: "text", text: lines.join("\n") }]
+    }
+  } catch (error) {
+    return {
+      content: [
+        {
+          type: "text",
+          text: `❌ **ERROR**\n\n${error instanceof Error ? error.message : String(error)}`
+        }
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dev3000",
-  "version": "0.0.81",
+  "version": "0.0.82",
   "description": "AI-powered development tools with browser monitoring and MCP server integration",
   "type": "module",
   "main": "dist/index.js",