dev3000 0.0.80 → 0.0.82

package/mcp-server/app/logs/LogsClient.tsx

@@ -259,38 +259,38 @@ function LogEntryComponent({ entry, darkMode }: { entry: LogEntry; darkMode: boo
     if (message.includes("[INTERACTION]"))
       return {
         type: "INTERACTION",
-        backgroundColor: LOG_COLORS.CONSOLE_DEBUG,
-        textColor: getTextColor(LOG_COLORS.CONSOLE_DEBUG)
+        backgroundColor: LOG_COLORS.INTERACTION,
+        textColor: getTextColor(LOG_COLORS.INTERACTION)
       }
-    if (message.includes("[CONSOLE ERROR]"))
+    if (message.includes("[ERROR]"))
       return {
-        type: "CONSOLE ERROR",
-        backgroundColor: LOG_COLORS.CONSOLE_ERROR,
-        textColor: getTextColor(LOG_COLORS.CONSOLE_ERROR)
+        type: "ERROR",
+        backgroundColor: LOG_COLORS.ERROR,
+        textColor: getTextColor(LOG_COLORS.ERROR)
       }
-    if (message.includes("[CONSOLE WARN]"))
+    if (message.includes("[WARNING]"))
       return {
-        type: "CONSOLE WARN",
-        backgroundColor: LOG_COLORS.CONSOLE_WARN,
-        textColor: getTextColor(LOG_COLORS.CONSOLE_WARN)
+        type: "WARNING",
+        backgroundColor: LOG_COLORS.WARNING,
+        textColor: getTextColor(LOG_COLORS.WARNING)
       }
-    if (message.includes("[CONSOLE INFO]"))
+    if (message.includes("[INFO]"))
       return {
-        type: "CONSOLE INFO",
-        backgroundColor: LOG_COLORS.CONSOLE_INFO,
-        textColor: getTextColor(LOG_COLORS.CONSOLE_INFO)
+        type: "INFO",
+        backgroundColor: LOG_COLORS.INFO,
+        textColor: getTextColor(LOG_COLORS.INFO)
       }
-    if (message.includes("[CONSOLE LOG]"))
+    if (message.includes("[LOG]"))
       return {
-        type: "CONSOLE LOG",
-        backgroundColor: LOG_COLORS.CONSOLE_LOG,
-        textColor: getTextColor(LOG_COLORS.CONSOLE_LOG)
+        type: "LOG",
+        backgroundColor: LOG_COLORS.LOG,
+        textColor: getTextColor(LOG_COLORS.LOG)
       }
-    if (message.includes("[CONSOLE DEBUG]"))
+    if (message.includes("[DEBUG]"))
       return {
-        type: "CONSOLE DEBUG",
-        backgroundColor: LOG_COLORS.CONSOLE_DEBUG,
-        textColor: getTextColor(LOG_COLORS.CONSOLE_DEBUG)
+        type: "DEBUG",
+        backgroundColor: LOG_COLORS.DEBUG,
+        textColor: getTextColor(LOG_COLORS.DEBUG)
       }
     if (message.includes("[SCREENSHOT]"))
       return {
@@ -298,13 +298,7 @@ function LogEntryComponent({ entry, darkMode }: { entry: LogEntry; darkMode: boo
         backgroundColor: LOG_COLORS.SCREENSHOT,
         textColor: getTextColor(LOG_COLORS.SCREENSHOT)
       }
-    if (message.includes("[NAVIGATION]") || message.includes("[PAGE]"))
-      return {
-        type: "PAGE",
-        backgroundColor: LOG_COLORS.PAGE,
-        textColor: getTextColor(LOG_COLORS.PAGE)
-      }
-    if (message.includes("[DOM]"))
+    if (message.includes("[NAVIGATION]") || message.includes("[PAGE]") || message.includes("[DOM]"))
       return {
         type: "DOM",
         backgroundColor: LOG_COLORS.DOM,
@@ -322,17 +316,23 @@ function LogEntryComponent({ entry, darkMode }: { entry: LogEntry; darkMode: boo
         backgroundColor: LOG_COLORS.NETWORK,
         textColor: getTextColor(LOG_COLORS.NETWORK)
       }
-    if (message.includes("[ERROR]") || message.includes("[PAGE ERROR]") || message.includes("[NETWORK ERROR]"))
+    if (message.includes("[CRASH]"))
       return {
-        type: "ERROR",
-        backgroundColor: LOG_COLORS.ERROR,
-        textColor: getTextColor(LOG_COLORS.ERROR)
+        type: "CRASH",
+        backgroundColor: LOG_COLORS.CRASH,
+        textColor: getTextColor(LOG_COLORS.CRASH)
+      }
+    if (message.includes("[CHROME]"))
+      return {
+        type: "CHROME",
+        backgroundColor: LOG_COLORS.CHROME,
+        textColor: getTextColor(LOG_COLORS.CHROME)
       }
-    if (message.includes("[CRITICAL ERROR]"))
+    if (message.includes("[REPLAY]"))
       return {
-        type: "CRITICAL ERROR",
-        backgroundColor: LOG_COLORS.CRITICAL_ERROR,
-        textColor: getTextColor(LOG_COLORS.CRITICAL_ERROR)
+        type: "REPLAY",
+        backgroundColor: LOG_COLORS.REPLAY,
+        textColor: getTextColor(LOG_COLORS.REPLAY)
       }
     return {
       type: "DEFAULT",

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

@@ -1,13 +1,6 @@
-import { readFileSync } from "fs"
 import { createMcpHandler } from "mcp-handler"
 import { z } from "zod"
-import {
-  createIntegratedWorkflow,
-  discoverAvailableMcps,
-  executeBrowserAction,
-  fixMyApp,
-  TOOL_DESCRIPTIONS
-} from "./tools"
+import { executeBrowserAction, findComponentSource, fixMyApp, TOOL_DESCRIPTIONS } from "./tools"
 
 const handler = createMcpHandler(
   (server) => {
@@ -75,45 +68,6 @@ const handler = createMcpHandler(
       }
     )
 
-    // Integrated workflow orchestration tool
-    server.tool(
-      "create_integrated_workflow",
-      TOOL_DESCRIPTIONS.create_integrated_workflow,
-      {
-        availableMcps: z
-          .array(z.string())
-          .optional()
-          .describe(
-            "Array of available MCPs (e.g., ['nextjs-dev', 'chrome-devtools']). If not provided, will auto-discover."
-          ),
-        focusArea: z.string().optional().describe("Debugging focus area: 'build', 'runtime', 'network', 'ui', 'all'"),
-        errorContext: z.string().optional().describe("Known error context to help create targeted workflow")
-      },
-      async (params) => {
-        return createIntegratedWorkflow(params)
-      }
-    )
-
-    // MCP discovery tool
-    server.tool(
-      "discover_available_mcps",
-      TOOL_DESCRIPTIONS.discover_available_mcps,
-      {
-        projectName: z.string().optional().describe("Project name to associate with discovery logging")
-      },
-      async (params) => {
-        const discoveredMcps = await discoverAvailableMcps(params.projectName)
-        return {
-          content: [
-            {
-              type: "text",
-              text: `🔍 **MCP DISCOVERY RESULTS**\n\nDiscovered MCPs: ${discoveredMcps.length > 0 ? discoveredMcps.join(", ") : "none"}\n\n${discoveredMcps.length > 0 ? `✅ Found ${discoveredMcps.length} compatible MCP(s)! These can now be used with create_integrated_workflow for enhanced debugging.` : "⚠️ No MCPs detected. Make sure other MCP servers are running and try again."}\n\n💡 All discovery attempts have been logged to your dev3000 log file with [D3K] tags.`
-            }
-          ]
-        }
-      }
-    )
-
     // Browser interaction tool
     server.tool(
       "execute_browser_action",
@@ -132,76 +86,36 @@ const handler = createMcpHandler(
       }
     )
 
-    // CDP URL discovery tool for chrome-devtools MCP coordination
+    // Visual diff analysis tool
     server.tool(
-      "get_shared_cdp_url",
-      "🔗 **CDP URL SHARING** - Get the CDP WebSocket URL for dev3000's existing Chrome instance. Use this to connect chrome-devtools MCP to dev3000's browser instead of launching a new one.",
+      "analyze_visual_diff",
+      "🔍 **VISUAL DIFF ANALYZER** - Analyzes two screenshots and provides a verbal description of the visual differences. Perfect for understanding what changed between before/after frames in layout shift detection.\n\n💡 This tool loads both images and describes what elements appeared, moved, or changed that could have caused the layout shift.",
       {
-        projectName: z.string().optional().describe("Project name to get CDP URL for (if multiple dev3000 instances)")
+        beforeImageUrl: z.string().describe("URL of the 'before' screenshot"),
+        afterImageUrl: z.string().describe("URL of the 'after' screenshot"),
+        context: z
+          .string()
+          .optional()
+          .describe("Optional context about what to look for (e.g., 'navigation header shift')")
       },
       async (params) => {
-        const { findActiveSessions } = await import("./tools")
-        const sessions = findActiveSessions()
-
-        if (sessions.length === 0) {
-          return {
-            content: [
-              {
-                type: "text",
-                text: "❌ No active dev3000 sessions found. Make sure dev3000 is running with browser monitoring."
-              }
-            ]
-          }
-        }
-
-        const targetSession = params.projectName
-          ? sessions.find((s) => s.projectName === params.projectName)
-          : sessions[0]
-
-        if (!targetSession) {
-          return {
-            content: [
-              {
-                type: "text",
-                text: `❌ No dev3000 session found for project: ${params.projectName}. Available projects: ${sessions.map((s) => s.projectName).join(", ")}`
-              }
-            ]
-          }
-        }
-
-        try {
-          const sessionData = JSON.parse(readFileSync(targetSession.sessionFile, "utf-8"))
-          const cdpUrl = sessionData.cdpUrl
+        const { analyzeVisualDiff } = await import("./tools")
+        return analyzeVisualDiff(params)
+      }
+    )
 
-          if (cdpUrl) {
-            return {
-              content: [
-                {
-                  type: "text",
-                  text: `🔗 **SHARED CDP URL FOUND**\n\nProject: ${targetSession.projectName}\nCDP URL: ${cdpUrl}\n\n💡 **Usage**: Configure chrome-devtools MCP to connect to this URL instead of launching its own browser instance.\n\n🎯 **Coordination**: Both dev3000 and chrome-devtools will now use the same Chrome instance for seamless automation.`
-                }
-              ]
-            }
-          } else {
-            return {
-              content: [
-                {
-                  type: "text",
-                  text: `⚠️ **CDP URL NOT READY**\n\nProject: ${targetSession.projectName}\nStatus: Browser may still be initializing\n\n💡 Try again in a few seconds once dev3000's browser is fully started.`
-                }
-              ]
-            }
-          }
-        } catch (error) {
-          return {
-            content: [
-              {
-                type: "text",
-                text: `❌ Error reading session data: ${error instanceof Error ? error.message : String(error)}`
-              }
-            ]
-          }
-        }
+    // Component source finder tool
+    server.tool(
+      "find_component_source",
+      TOOL_DESCRIPTIONS.find_component_source,
+      {
+        selector: z
+          .string()
+          .describe("CSS selector for the DOM element (e.g., 'nav', '.header', '#main'). Use lowercase for tag names."),
+        projectName: z.string().optional().describe("Project name (if multiple dev3000 instances are running)")
+      },
+      async (params) => {
+        return findComponentSource(params)
       }
     )