dev3000 0.0.91 → 0.0.93

package/mcp-server/.next/server/server-reference-manifest.js

@@ -1 +1 @@
-self.__RSC_SERVER_MANIFEST="{\n  \"node\": {},\n  \"edge\": {},\n  \"encryptionKey\": \"mkpbqeA8hbQBwumcGof8mtazY/m9j2lVb+4otV6eSo0=\"\n}"
+self.__RSC_SERVER_MANIFEST="{\n  \"node\": {},\n  \"edge\": {},\n  \"encryptionKey\": \"rm261543LMD/+EU2F6XJHyupyv2BrageVvOxdXx78XI=\"\n}"

package/mcp-server/.next/server/server-reference-manifest.json

@@ -1,5 +1,5 @@
 {
   "node": {},
   "edge": {},
-  "encryptionKey": "mkpbqeA8hbQBwumcGof8mtazY/m9j2lVb+4otV6eSo0="
+  "encryptionKey": "rm261543LMD/+EU2F6XJHyupyv2BrageVvOxdXx78XI="
 }

package/mcp-server/app/mcp/client-manager.ts

@@ -32,6 +32,8 @@ export class MCPClientManager {
   private tools: Map<string, Tool[]> = new Map()
   private reconnectTimers: Map<string, NodeJS.Timeout> = new Map()
   private lastConfigs: Map<string, MCPClientConfig> = new Map()
+  private toolDiscoveryListeners: Array<() => void> = []
+  private toolUpdateSubscribers: Array<(info: { mcpName: string; tools: Tool[] }) => void> = []
 
   /**
    * Initialize MCP clients for available downstream servers
@@ -118,26 +120,23 @@ export class MCPClientManager {
 
     // Discover available tools (non-fatal - connection already succeeded)
     try {
-      const toolsResult = await client.request(
-        {
-          method: "tools/list",
-          params: {}
-        },
-        undefined as any // Type inference will work at runtime
-      )
-
-      if (toolsResult && "tools" in toolsResult) {
-        this.tools.set(config.name, toolsResult.tools as Tool[])
-        console.log(`[MCP Orchestrator] Discovered ${toolsResult.tools.length} tools from ${config.name}`)
+      const toolsResult = await client.listTools()
+      const discoveredTools = Array.isArray(toolsResult?.tools) ? (toolsResult.tools as Tool[]) : []
+
+      this.tools.set(config.name, discoveredTools)
+
+      if (discoveredTools.length > 0) {
+        console.log(`[MCP Orchestrator] Discovered ${discoveredTools.length} tools from ${config.name}`)
+        this.notifyToolDiscovery()
       } else {
-        // Set empty array if no tools found
-        this.tools.set(config.name, [])
         console.log(`[MCP Orchestrator] No tools discovered from ${config.name} (will retry on first use)`)
       }
+      this.notifyToolsUpdated(config.name)
     } catch (_error) {
       // Tool discovery failed but connection succeeded - tools will be discovered on first use
       this.tools.set(config.name, [])
       console.log(`[MCP Orchestrator] Tool discovery deferred for ${config.name} (will discover on first tool call)`)
+      this.notifyToolsUpdated(config.name)
     }
   }
 
@@ -167,16 +166,10 @@ export class MCPClientManager {
     }
 
     try {
-      const result = await client.request(
-        {
-          method: "tools/call",
-          params: {
-            name: toolName,
-            arguments: args
-          }
-        },
-        undefined as any // Type inference will work at runtime
-      )
+      const result = await client.callTool({
+        name: toolName,
+        arguments: args
+      })
 
       return result as CallToolResult
     } catch (error) {
@@ -199,6 +192,66 @@ export class MCPClientManager {
     return Array.from(this.clients.keys())
   }
 
+  /**
+   * Subscribe to tool updates for a specific MCP. Returns an unsubscribe function.
+   */
+  onToolsUpdated(subscriber: (info: { mcpName: string; tools: Tool[] }) => void): () => void {
+    this.toolUpdateSubscribers.push(subscriber)
+    return () => {
+      this.toolUpdateSubscribers = this.toolUpdateSubscribers.filter((fn) => fn !== subscriber)
+    }
+  }
+
+  /**
+   * Wait for at least one downstream MCP to finish tool discovery, or resolve after a timeout.
+   * Prevents registering an empty toolset before downstream servers are ready.
+   */
+  async waitForInitialTools(timeoutMs: number = 8000): Promise<void> {
+    if (this.getAllTools().length > 0) {
+      return
+    }
+
+    await new Promise<void>((resolve) => {
+      let timeoutId: NodeJS.Timeout
+
+      const onDiscovery = () => {
+        clearTimeout(timeoutId)
+        this.toolDiscoveryListeners = this.toolDiscoveryListeners.filter((listener) => listener !== onDiscovery)
+        resolve()
+      }
+
+      timeoutId = setTimeout(() => {
+        this.toolDiscoveryListeners = this.toolDiscoveryListeners.filter((listener) => listener !== onDiscovery)
+        resolve()
+      }, timeoutMs)
+
+      this.toolDiscoveryListeners.push(onDiscovery)
+    })
+  }
+
+  private notifyToolDiscovery(): void {
+    if (this.toolDiscoveryListeners.length === 0 || this.getAllTools().length === 0) {
+      return
+    }
+
+    const listeners = [...this.toolDiscoveryListeners]
+    this.toolDiscoveryListeners = []
+    for (const listener of listeners) {
+      listener()
+    }
+  }
+
+  private notifyToolsUpdated(mcpName: string): void {
+    const tools = this.tools.get(mcpName) ?? []
+    for (const subscriber of this.toolUpdateSubscribers) {
+      try {
+        subscriber({ mcpName, tools })
+      } catch (error) {
+        console.warn(`[MCP Orchestrator] Tool update subscriber error for ${mcpName}:`, error)
+      }
+    }
+  }
+
   /**
    * Schedule reconnection for a disconnected MCP
    */

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

@@ -1,6 +1,7 @@
 import { readFileSync } from "node:fs"
 import { homedir } from "node:os"
 import { join } from "node:path"
+import type { Tool } from "@modelcontextprotocol/sdk/types.js"
 import { createMcpHandler } from "mcp-handler"
 import { z } from "zod"
 import { getMCPClientManager } from "./client-manager"
@@ -95,14 +96,39 @@ const initializeOrchestration = async () => {
     return config
   }
 
+  const waitForInitialConfig = async (
+    timeoutMs: number = 10000,
+    pollIntervalMs: number = 250
+  ): Promise<{ config: Parameters<typeof clientManager.initialize>[0]; waited: boolean }> => {
+    const startTime = Date.now()
+    let waited = false
+    let config = getConfigFromSessions()
+
+    while (Object.keys(config).length === 0 && Date.now() - startTime < timeoutMs) {
+      if (!waited) {
+        console.log("[MCP Orchestrator] Waiting for session info before connecting downstream MCPs...")
+        waited = true
+      }
+
+      await new Promise((resolve) => setTimeout(resolve, pollIntervalMs))
+      config = getConfigFromSessions()
+    }
+
+    return { config, waited }
+  }
+
   try {
     // Initial attempt to connect
-    const config = getConfigFromSessions()
+    const { config, waited } = await waitForInitialConfig()
     if (Object.keys(config).length > 0) {
       await clientManager.initialize(config)
       console.log(`[MCP Orchestrator] Initialized with ${Object.keys(config).join(", ")}`)
     } else {
-      console.log("[MCP Orchestrator] No downstream MCPs found yet (will retry)")
+      if (waited) {
+        console.log("[MCP Orchestrator] No downstream MCPs detected after waiting for session info (will retry)")
+      } else {
+        console.log("[MCP Orchestrator] No downstream MCPs found yet (will retry)")
+      }
     }
 
     // Since MCP server starts before Chrome, periodically retry connection
@@ -146,29 +172,128 @@ const initializeOrchestration = async () => {
 }
 
 // Initialize on module load
-initializeOrchestration().catch(console.error)
+const orchestrationReady = initializeOrchestration().catch((error) => {
+  console.error("[MCP Orchestrator] Failed to initialize downstream MCPs:", error)
+})
 
 const handler = createMcpHandler(
-  (server) => {
-    // Dynamically register proxied tools from downstream MCPs
+  async (server) => {
     const clientManager = getMCPClientManager()
-    const downstreamTools = clientManager.getAllTools()
 
-    for (const { mcpName, tool } of downstreamTools) {
-      // Add prefix to avoid conflicts with dev3000's own tools
+    await orchestrationReady
+    await clientManager.waitForInitialTools()
+
+    const registeredProxiedTools = new Map<
+      string,
+      {
+        mcpName: string
+        toolName: string
+        registered: ReturnType<typeof server.tool>
+      }
+    >()
+
+    const registerOrUpdateProxiedTool = (mcpName: string, tool: Tool): boolean => {
       const proxiedToolName = `${mcpName}_${tool.name}`
+      const existing = registeredProxiedTools.get(proxiedToolName)
+      const description = `[${mcpName}] ${tool.description || ""}`
+      const annotations = {
+        ...(tool.annotations ?? {}),
+        proxiedFrom: mcpName,
+        originalInputSchema: tool.inputSchema
+      }
+
+      if (existing) {
+        existing.registered.update({
+          description,
+          annotations
+        })
+        return false
+      }
 
-      server.tool(
-        proxiedToolName,
-        `[${mcpName}] ${tool.description || ""}`,
-        tool.inputSchema as any,
-        async (params: Record<string, unknown>) => {
-          // Proxy the call to the downstream MCP
+      try {
+        const proxiedTool = server.tool(proxiedToolName, description, {}, async (params: Record<string, unknown>) => {
           return clientManager.callTool(mcpName, tool.name, params)
+        })
+
+        // Allow arbitrary argument objects to pass through to downstream MCPs
+        proxiedTool.inputSchema = z.object({}).passthrough()
+
+        proxiedTool.update({
+          annotations
+        })
+
+        registeredProxiedTools.set(proxiedToolName, {
+          mcpName,
+          toolName: tool.name,
+          registered: proxiedTool
+        })
+
+        console.log(`[MCP Orchestrator] Registered proxied tool ${proxiedToolName}`)
+        return true
+      } catch (error) {
+        console.warn(`[MCP Orchestrator] Failed to register proxied tool ${proxiedToolName}:`, error)
+        return false
+      }
+    }
+
+    const removeToolsForMcp = (mcpName: string): number => {
+      let removed = 0
+      for (const [proxiedToolName, entry] of registeredProxiedTools.entries()) {
+        if (entry.mcpName === mcpName) {
+          try {
+            entry.registered.remove()
+            registeredProxiedTools.delete(proxiedToolName)
+            removed++
+            console.log(`[MCP Orchestrator] Removed proxied tool ${proxiedToolName}`)
+          } catch (error) {
+            console.warn(`[MCP Orchestrator] Failed to remove proxied tool ${proxiedToolName}:`, error)
+          }
         }
-      )
+      }
+      return removed
     }
 
+    // Dynamically register proxied tools from downstream MCPs
+    const downstreamTools = clientManager.getAllTools()
+
+    if (downstreamTools.length === 0) {
+      console.log("[MCP Orchestrator] No downstream MCP tools available during initial registration")
+    } else {
+      console.log(`[MCP Orchestrator] Registering ${downstreamTools.length} downstream MCP tools`)
+    }
+
+    let initialNewTools = 0
+    for (const { mcpName, tool } of downstreamTools) {
+      if (registerOrUpdateProxiedTool(mcpName, tool)) {
+        initialNewTools++
+      }
+    }
+
+    if (initialNewTools > 0) {
+      server.sendToolListChanged()
+    }
+
+    clientManager.onToolsUpdated(({ mcpName, tools }) => {
+      if (tools.length === 0) {
+        const removed = removeToolsForMcp(mcpName)
+        if (removed > 0) {
+          server.sendToolListChanged()
+        }
+        return
+      }
+
+      let addedOrUpdated = 0
+      for (const tool of tools) {
+        if (registerOrUpdateProxiedTool(mcpName, tool)) {
+          addedOrUpdated++
+        }
+      }
+
+      if (addedOrUpdated > 0) {
+        server.sendToolListChanged()
+      }
+    })
+
     // Dev3000's own tools below:
     // Enhanced fix_my_app - the ultimate error fixing tool
     server.tool(

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

@@ -669,7 +669,13 @@ export async function fixMyApp({
           )
         }
 
-        results.push(`📹 **View all frames**: ${videoUrl}`)
+        const triggerLabel =
+          jankResult.captureTrigger === "navigation"
+            ? "Navigation complete"
+            : jankResult.captureTrigger === "load"
+              ? "Load complete"
+              : "View all frames"
+        results.push(`📹 **${triggerLabel}**: ${videoUrl}`)
         results.push(`🎞️ **Session ID**: ${jankResult.sessionId} (${jankResult.totalFrames} frames)`)
         results.push("")
 
@@ -2122,48 +2128,128 @@ export async function getMcpCapabilities({
  * - Layout shifts: Elements move to new positions (top region changes while bottom stays same)
  * - Content changes: Same regions change in-place (image loads with pixels appearing)
  */
-function detectLayoutShiftVsContentChange(prevPng: PNG, currPng: PNG): { isLayoutShift: boolean; shiftScore: number } {
+function detectLayoutShiftVsContentChange(
+  prevPng: PNG,
+  currPng: PNG
+): { isLayoutShift: boolean; shiftScore: number; isOverlayNoise: boolean } {
   const width = prevPng.width
   const height = prevPng.height
 
-  // Divide screen into horizontal bands (top, middle, bottom)
-  const bandHeight = Math.floor(height / 8)
-  const bands = Array(8).fill(0)
+  // Track changes at row-level for detecting correlated shifts
+  const rowChangeCounts = new Array(height).fill(0)
 
-  // Count changed pixels in each band
+  // Count changed pixels per row (for correlation analysis)
   for (let y = 0; y < height; y++) {
-    const bandIndex = Math.min(Math.floor(y / bandHeight), 7)
     for (let x = 0; x < width; x++) {
       const idx = (width * y + x) << 2
       const rDiff = Math.abs(prevPng.data[idx] - currPng.data[idx])
       const gDiff = Math.abs(prevPng.data[idx + 1] - currPng.data[idx + 1])
       const bDiff = Math.abs(prevPng.data[idx + 2] - currPng.data[idx + 2])
 
-      // If any channel differs significantly, count as changed pixel
       if (rDiff > 30 || gDiff > 30 || bDiff > 30) {
-        bands[bandIndex]++
+        rowChangeCounts[y]++
       }
     }
   }
 
-  // Calculate percentage of pixels changed in each band
+  // Calculate percentage of pixels changed per row
+  const rowChangePercents = rowChangeCounts.map((count) => (count / width) * 100)
+
+  // Detect consecutive rows with high change (indicates shift boundary)
+  // True CLS: Many consecutive rows change together (content moved as a block)
+  let maxConsecutiveHighChangeRows = 0
+  let currentConsecutive = 0
+
+  for (let i = 0; i < height; i++) {
+    if (rowChangePercents[i] > 50) {
+      // >50% of row changed
+      currentConsecutive++
+      maxConsecutiveHighChangeRows = Math.max(maxConsecutiveHighChangeRows, currentConsecutive)
+    } else {
+      currentConsecutive = 0
+    }
+  }
+
+  // Detect isolated hotspots (fixed/absolute overlay noise)
+  // Pattern: low change → spike → low change (element appearing in place)
+  let isolatedHotspots = 0
+  const windowSize = 5
+
+  for (let i = windowSize; i < height - windowSize; i++) {
+    // Calculate average change in windows before, during, and after
+    const before = rowChangePercents.slice(i - windowSize, i).reduce((a, b) => a + b, 0) / windowSize
+    const during = rowChangePercents[i]
+    const after = rowChangePercents.slice(i + 1, i + windowSize + 1).reduce((a, b) => a + b, 0) / windowSize
+
+    // Isolated spike: calm before/after, high during
+    if (before < 10 && during > 60 && after < 10) {
+      isolatedHotspots++
+    }
+  }
+
+  // Detect narrow fixed elements (toolbars, indicators)
+  // Pattern: Many rows with LOW percentage change (5-25%) = narrow element across many rows
+  // This catches toolbars/indicators that are thin but tall
+  let narrowChangeRows = 0
+  for (let i = 0; i < height; i++) {
+    // Low but consistent change (narrow element)
+    if (rowChangePercents[i] > 5 && rowChangePercents[i] < 25) {
+      narrowChangeRows++
+    }
+  }
+
+  // If many rows have narrow changes, this is likely a fixed toolbar/sidebar
+  const hasNarrowFixedElement = narrowChangeRows > height * 0.3 // >30% of rows have narrow changes
+
+  // Calculate band-based metrics for backward compatibility
+  const bandHeight = Math.floor(height / 8)
+  const bands = Array(8).fill(0)
+
+  for (let y = 0; y < height; y++) {
+    const bandIndex = Math.min(Math.floor(y / bandHeight), 7)
+    bands[bandIndex] += rowChangeCounts[y]
+  }
+
   const pixelsPerBand = width * bandHeight
   const bandPercentages = bands.map((count) => (count / pixelsPerBand) * 100)
-
-  // Layout shift pattern: High change in top bands (nav/header area), low change in bottom
-  // Content change pattern: Evenly distributed or contained to specific regions
   const topBandChange = (bandPercentages[0] + bandPercentages[1]) / 2
   const bottomBandChange = (bandPercentages[6] + bandPercentages[7]) / 2
 
-  // If top 25% of screen has >5% pixel change but bottom has <2% change = layout shift
-  const isLayoutShift = topBandChange > 5 && bottomBandChange < 2 && topBandChange > bottomBandChange * 2
-
-  // Calculate shift score (similar to CLS score)
+  // Calculate variance to detect if changes are uniform (shift) or scattered (overlay)
+  const meanChange = bandPercentages.reduce((a, b) => a + b, 0) / bandPercentages.length
+  const variance = bandPercentages.reduce((sum, val) => sum + (val - meanChange) ** 2, 0) / bandPercentages.length
+
+  // Determine if this is a layout shift or overlay noise
+  // True layout shift indicators:
+  // 1. Many consecutive rows changed (>20 rows = significant shift)
+  // 2. Top heavy change pattern (topBandChange > bottomBandChange)
+  // 3. Low variance (uniform change across bands)
+  // 4. Few isolated hotspots
+
+  const hasConsecutiveShift = maxConsecutiveHighChangeRows > 20
+  const hasTopHeavyPattern = topBandChange > 5 && bottomBandChange < 2 && topBandChange > bottomBandChange * 2
+  const hasUniformChange = variance < 200 && meanChange > 10
+  const hasIsolatedHotspots = isolatedHotspots >= 3
+
+  // Overlay noise indicators:
+  // 1. High variance (scattered changes)
+  // 2. Multiple isolated hotspots
+  // 3. Few consecutive rows changed
+  // 4. Narrow fixed element (toolbar/indicator pattern)
+  const isOverlayNoise =
+    hasNarrowFixedElement || // Narrow element like toolbar
+    (hasIsolatedHotspots && !hasConsecutiveShift && (variance > 500 || meanChange < 10))
+
+  // Layout shift: Either consecutive shift pattern OR traditional top-heavy pattern
+  // But NOT if it looks like overlay noise
+  const isLayoutShift = !isOverlayNoise && (hasConsecutiveShift || hasTopHeavyPattern || hasUniformChange)
+
+  // Calculate shift score
   const totalChanged = bands.reduce((sum, count) => sum + count, 0)
   const totalPixels = width * height
-  const shiftScore = (totalChanged / totalPixels) * 0.1 // Rough CLS equivalent
+  const shiftScore = (totalChanged / totalPixels) * 0.1
 
-  return { isLayoutShift, shiftScore }
+  return { isLayoutShift, shiftScore, isOverlayNoise }
 }
 
 /**
@@ -2186,6 +2272,7 @@ async function detectJankFromScreenshots(_projectName?: string): Promise<{
   totalFrames: number
   screenshotDir: string
   realCLS?: { score: number; grade: string }
+  captureTrigger?: "navigation" | "load"
 }> {
   const screenshotDir = process.env.SCREENSHOT_DIR || join(tmpdir(), "dev3000-mcp-deps", "public", "screenshots")
 
@@ -2224,13 +2311,20 @@ async function detectJankFromScreenshots(_projectName?: string): Promise<{
     | {
         score: number
         grade: string
-        shifts: Array<{ score: number; timestamp: number; sources?: Array<{ node?: string }> }>
+        shifts: Array<{
+          score: number
+          timestamp: number
+          sources?: Array<{ node?: string; position?: string | null }>
+        }>
       }
     | undefined
+  let captureTrigger: "navigation" | "load" | undefined
 
   if (existsSync(metadataPath)) {
     try {
       const metadata = JSON.parse(readFileSync(metadataPath, "utf-8"))
+      // Capture the trigger type for use in output messages
+      captureTrigger = metadata.captureTrigger
       // Set realCLSData even if there are zero shifts - this tells us Chrome ran and found nothing
       if (metadata.layoutShifts !== undefined) {
         realCLSData = {
@@ -2329,15 +2423,27 @@ async function detectJankFromScreenshots(_projectName?: string): Promise<{
             continue
           }
 
-          // Detect if this is a layout shift vs content change
+          // Detect if this is a layout shift vs content change vs overlay noise
           const shiftAnalysis = detectLayoutShiftVsContentChange(prevPng, currPng)
 
-          // If we detect a layout shift (not just content loading), flag it
+          // Skip if this looks like overlay noise (fixed/absolute elements like Next.js dev indicator or Vercel toolbar)
+          if (shiftAnalysis.isOverlayNoise) {
+            logToDevFile(
+              `Pixel Diff Hydration: Skipping frame ${i} - detected overlay noise (fixed/absolute elements), not true CLS`
+            )
+            continue
+          }
+
+          // If we detect a true layout shift (not just content loading or overlay noise), flag it
           if (shiftAnalysis.isLayoutShift) {
             foundHydrationShift = true
             const timeMatch = earlyFrames[i].match(/-(\d+)ms\.png$/)
             const timeSinceStart = timeMatch ? parseInt(timeMatch[1], 10) : 0
 
+            logToDevFile(
+              `Pixel Diff Hydration: Detected true layout shift at ${timeSinceStart}ms (score: ${shiftAnalysis.shiftScore.toFixed(4)})`
+            )
+
             const mcpPort = process.env.MCP_PORT || "3684"
             jankDetections.push({
               timestamp: `${timeSinceStart}ms`,
@@ -2378,9 +2484,29 @@ async function detectJankFromScreenshots(_projectName?: string): Promise<{
     }
 
     // Process actual layout shifts detected by Chrome
-    // Trust Chrome's Layout Instability API completely - if Chrome reports it, it's real
+    // Trust Chrome's Layout Instability API - BUT ONLY if we can identify the culprit element
+    // and verify it's not a fixed/absolute positioned overlay
     realCLSData.shifts.forEach((shift) => {
       const element = shift.sources?.[0]?.node || "unknown"
+      const position = shift.sources?.[0]?.position
+
+      // FILTER: Skip shifts where we couldn't identify the element
+      // Chrome sometimes reports CLS for fixed overlays but fails to identify the element
+      if (!shift.sources?.[0] || element === "unknown" || position === null || position === undefined) {
+        logToDevFile(
+          `Chrome CLS: Skipping unidentified shift (score: ${shift.score.toFixed(4)}) - cannot verify if it's a true CLS or fixed overlay noise`
+        )
+        return // Skip this shift - can't verify it's real
+      }
+
+      // FILTER: Skip fixed/absolute positioned elements - these are overlays, not true CLS
+      if (position === "fixed" || position === "absolute") {
+        logToDevFile(
+          `Chrome CLS: Filtering out ${element} shift (position: ${position}) - fixed/absolute elements don't cause true layout shifts`
+        )
+        return // Skip this shift
+      }
+
       const isCriticalElement = ["NAV", "HEADER", "BUTTON", "A"].includes(element.toUpperCase())
       const isDuringLoad = shift.timestamp < 1000 // First second
 
@@ -2479,7 +2605,8 @@ async function detectJankFromScreenshots(_projectName?: string): Promise<{
     detections: jankDetections,
     sessionId: latestSessionId,
     totalFrames: sessionFiles.length,
-    screenshotDir
+    screenshotDir,
+    captureTrigger
   }
 }
 

package/package.json

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