dev3000 0.0.84 → 0.0.85

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

@@ -1,9 +1,175 @@
+import { readFileSync } from "node:fs"
+import { homedir } from "node:os"
+import { join } from "node:path"
 import { createMcpHandler } from "mcp-handler"
 import { z } from "zod"
+import { getMCPClientManager } from "./client-manager"
 import { executeBrowserAction, findComponentSource, fixMyApp, TOOL_DESCRIPTIONS } from "./tools"
 
+// Detect available package runner (npx, pnpm dlx, or fail)
+const getPackageRunner = (): { command: string; args: string[] } | null => {
+  try {
+    const { execSync } = require("node:child_process")
+
+    // Try npx first (most common)
+    try {
+      execSync("npx --version", { stdio: "ignore" })
+      return { command: "npx", args: ["-y"] }
+    } catch {
+      // npx not available or is aliased to pnpm dlx
+    }
+
+    // Try pnpm dlx as fallback
+    try {
+      execSync("pnpm --version", { stdio: "ignore" })
+      return { command: "pnpm", args: ["dlx"] }
+    } catch {
+      // pnpm not available
+    }
+
+    console.error("[MCP Orchestrator] Neither npx nor pnpm found - cannot spawn chrome-devtools MCP")
+    return null
+  } catch (error) {
+    console.error("[MCP Orchestrator] Failed to detect package runner:", error)
+    return null
+  }
+}
+
+// Initialize MCP client manager for orchestration
+// This will connect to chrome-devtools and nextjs-dev MCPs when available
+const initializeOrchestration = async () => {
+  const clientManager = getMCPClientManager()
+
+  // Helper to get config from session files in ~/.d3k/
+  const getConfigFromSessions = () => {
+    const config: Parameters<typeof clientManager.initialize>[0] = {}
+    const sessionDir = join(homedir(), ".d3k")
+
+    try {
+      // Read all *.json session files
+      const { readdirSync, existsSync } = require("node:fs")
+      if (!existsSync(sessionDir)) return config
+
+      const sessionFiles = readdirSync(sessionDir).filter((f: string) => f.endsWith(".json"))
+
+      // Use the most recent session with CDP URL
+      for (const file of sessionFiles) {
+        try {
+          const sessionPath = join(sessionDir, file)
+          const sessionData = JSON.parse(readFileSync(sessionPath, "utf-8"))
+
+          // Configure chrome-devtools MCP if CDP URL is available
+          if (sessionData.cdpUrl && !config.chromeDevtools) {
+            const cdpUrl = sessionData.cdpUrl.replace("ws://", "http://") // Convert ws:// to http:// for browser URL
+            const runner = getPackageRunner()
+
+            if (runner) {
+              config.chromeDevtools = {
+                command: runner.command,
+                args: [...runner.args, "chrome-devtools-mcp@latest", "--browserUrl", cdpUrl],
+                enabled: true
+              }
+            } else {
+              console.warn("[MCP Orchestrator] Cannot configure chrome-devtools MCP: no package runner available")
+            }
+          }
+
+          // Configure nextjs-dev MCP if app port is available
+          if (sessionData.appPort && !config.nextjsDev) {
+            config.nextjsDev = {
+              url: `http://localhost:${sessionData.appPort}/_next/mcp`,
+              enabled: true
+            }
+          }
+
+          // Break if we have both MCPs
+          if (config.chromeDevtools && config.nextjsDev) break
+        } catch {
+          // Skip invalid session files
+        }
+      }
+    } catch (error) {
+      console.warn("[MCP Orchestrator] Failed to read session files:", error)
+    }
+
+    return config
+  }
+
+  try {
+    // Initial attempt to connect
+    const config = getConfigFromSessions()
+    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)")
+    }
+
+    // Since MCP server starts before Chrome, periodically retry connection
+    // This allows late-binding to chrome-devtools MCP after Chrome launches
+    let retryCount = 0
+    const maxRetries = 10
+    const retryInterval = setInterval(async () => {
+      retryCount++
+
+      const newConfig = getConfigFromSessions()
+      const hasChromeDevtools = !!newConfig.chromeDevtools
+      const hasNextjs = !!newConfig.nextjsDev
+      const alreadyConnectedChrome = clientManager.isConnected("chrome-devtools")
+      const alreadyConnectedNextjs = clientManager.isConnected("nextjs-dev")
+
+      // Check if we have new MCPs to connect to
+      const needsChrome = hasChromeDevtools && !alreadyConnectedChrome
+      const needsNextjs = hasNextjs && !alreadyConnectedNextjs
+
+      if (needsChrome || needsNextjs) {
+        const toConnect = [needsChrome && "chrome-devtools", needsNextjs && "nextjs-dev"].filter(Boolean)
+        console.log(`[MCP Orchestrator] Retry ${retryCount}: Attempting to connect to ${toConnect.join(", ")}`)
+        try {
+          await clientManager.initialize(newConfig)
+          console.log("[MCP Orchestrator] Successfully connected to downstream MCPs")
+        } catch (error) {
+          console.warn(`[MCP Orchestrator] Retry ${retryCount} failed:`, error)
+        }
+      }
+
+      // Stop retrying after max attempts or when both are connected
+      if (retryCount >= maxRetries || (alreadyConnectedChrome && alreadyConnectedNextjs)) {
+        clearInterval(retryInterval)
+        const connected = clientManager.getConnectedMCPs()
+        console.log(`[MCP Orchestrator] Stopped retry loop (connected: ${connected.join(", ") || "none"})`)
+      }
+    }, 2000) // Retry every 2 seconds
+  } catch (error) {
+    console.warn("[MCP Orchestrator] Failed to initialize downstream MCPs:", error)
+  }
+}
+
+// Initialize on module load
+initializeOrchestration().catch(console.error)
+
 const handler = createMcpHandler(
   (server) => {
+    // Dynamically register proxied tools from downstream MCPs
+    const clientManager = getMCPClientManager()
+    const downstreamTools = clientManager.getAllTools()
+
+    for (const { mcpName, tool } of downstreamTools) {
+      // Add prefix to avoid conflicts with dev3000's own tools
+      const proxiedToolName = `${mcpName}_${tool.name}`
+
+      server.tool(
+        proxiedToolName,
+        `[${mcpName}] ${tool.description || ""}`,
+        tool.inputSchema as any,
+        async (params: Record<string, unknown>) => {
+          // Proxy the call to the downstream MCP
+          return clientManager.callTool(mcpName, tool.name, params)
+        }
+      )
+    }
+
+    // Dev3000's own tools below:
     // Enhanced fix_my_app - the ultimate error fixing tool
     server.tool(
       "fix_my_app",

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

@@ -181,7 +181,27 @@ export async function fixMyApp({
   integrateChromeDevtools = false,
   returnRawData = false
 }: FixMyAppParams): Promise<{ content: Array<{ type: "text"; text: string }> }> {
-  // 🎯 INTELLIGENT DELEGATION: Check if nextjs-dev MCP is available for Next.js-specific analysis
+  // 🎯 MCP ORCHESTRATION: Check which downstream MCPs are available
+  const { getMCPClientManager } = await import("./client-manager")
+  const clientManager = getMCPClientManager()
+  const connectedMCPs = clientManager.getConnectedMCPs()
+
+  const hasNextjsDev = connectedMCPs.includes("nextjs-dev")
+  const hasChromeDevtools = connectedMCPs.includes("chrome-devtools")
+
+  if (connectedMCPs.length > 0) {
+    logToDevFile(`Fix My App: Connected to downstream MCPs: ${connectedMCPs.join(", ")}`)
+  }
+
+  // Auto-detect integration flags based on connected MCPs
+  if (hasNextjsDev && integrateNextjs === false) {
+    integrateNextjs = true
+  }
+  if (hasChromeDevtools && integrateChromeDevtools === false) {
+    integrateChromeDevtools = true
+  }
+
+  // Legacy delegation check (keeping for backwards compatibility)
   const canDelegateNextjs = await canDelegateToNextjs()
   if (canDelegateNextjs) {
     logToDevFile(`Fix My App: Recommending dev3000-nextjs-dev MCP for Next.js-specific analysis`)
@@ -619,6 +639,9 @@ export async function fixMyApp({
           results.push(`• ${match[1]}`)
         }
       })
+      results.push("")
+      results.push("💡 **TIP**: Use analyze_visual_diff tool to compare screenshots and identify changes")
+      results.push("   (Advanced: screenshots are also accessible via curl if needed)")
     }
 
     // Jank/Layout Shift Detection (from ScreencastManager passive captures)
@@ -711,6 +734,11 @@ export async function fixMyApp({
         results.push("• Check for web fonts causing text reflow (font-display: swap)")
         results.push(`• Raw screenshots: ${jankResult.screenshotDir}`)
         results.push("")
+        results.push("📸 **ANALYZING SCREENSHOTS:**")
+        results.push("• RECOMMENDED: Use analyze_visual_diff tool with before/after URLs (shown above)")
+        results.push("• The tool provides structured instructions for comparing frames")
+        results.push("• Advanced: Screenshots are also accessible via curl if needed")
+        results.push("")
         results.push(`🎬 **IMPORTANT**: Share this frame sequence link with the user: ${videoUrl}`)
       }
     }
@@ -2148,7 +2176,8 @@ async function detectJankFromScreenshots(_projectName?: string): Promise<{
   if (existsSync(metadataPath)) {
     try {
       const metadata = JSON.parse(readFileSync(metadataPath, "utf-8"))
-      if (metadata.layoutShifts && metadata.layoutShifts.length > 0) {
+      // Set realCLSData even if there are zero shifts - this tells us Chrome ran and found nothing
+      if (metadata.layoutShifts !== undefined) {
         realCLSData = {
           score: metadata.totalCLS || 0,
           grade: metadata.clsGrade || "unknown",
@@ -2182,22 +2211,33 @@ async function detectJankFromScreenshots(_projectName?: string): Promise<{
 
       // Look for CLS entries with Before/After URLs
       // Format: [BROWSER] [CDP] CLS #N (score: X, time: Yms):
-      //         [BROWSER] [CDP]   - <ELEMENT> shifted...
+      //         [BROWSER] [CDP]   - <ELEMENT> shifted... (variable number of these)
       //         [BROWSER] [CDP]   Before: http://...
       //         [BROWSER] [CDP]   After:  http://...
       for (let i = 0; i < lines.length; i++) {
         const clsMatch = lines[i].match(/\[CDP\] CLS #\d+ \(score: [\d.]+, time: (\d+)ms\):/)
         if (clsMatch) {
           const timestamp = parseInt(clsMatch[1], 10)
-          // Look ahead for Before and After URLs (skip the shift description line)
-          if (i + 3 < lines.length) {
-            const beforeMatch = lines[i + 2].match(/Before:\s+(http:\/\/\S+)/)
-            const afterMatch = lines[i + 3].match(/After:\s+(http:\/\/\S+)/)
-            if (beforeMatch && afterMatch) {
+          // Look ahead for Before and After URLs (scan next 10 lines for them)
+          let beforeUrl: string | null = null
+          let afterUrl: string | null = null
+
+          for (let j = i + 1; j < Math.min(i + 10, lines.length); j++) {
+            if (!beforeUrl) {
+              const beforeMatch = lines[j].match(/Before:\s+(http:\/\/\S+)/)
+              if (beforeMatch) beforeUrl = beforeMatch[1]
+            }
+            if (!afterUrl) {
+              const afterMatch = lines[j].match(/After:\s+(http:\/\/\S+)/)
+              if (afterMatch) afterUrl = afterMatch[1]
+            }
+            // Stop if we found both
+            if (beforeUrl && afterUrl) {
               frameUrlMap.set(timestamp, {
-                before: beforeMatch[1],
-                after: afterMatch[1]
+                before: beforeUrl,
+                after: afterUrl
               })
+              break
             }
           }
         }
@@ -2207,8 +2247,21 @@ async function detectJankFromScreenshots(_projectName?: string): Promise<{
     // Ignore log parsing errors
   }
 
-  // If we have real CLS data, use it to flag visual severity
-  if (realCLSData && realCLSData.shifts.length > 0) {
+  // If we have real CLS data from Chrome's PerformanceObserver, trust it completely
+  if (realCLSData) {
+    // If Chrome says there are no shifts, return immediately - don't fall back to pixel diff
+    if (realCLSData.shifts.length === 0) {
+      return {
+        detections: [],
+        sessionId: latestSessionId,
+        totalFrames: sessionFiles.length,
+        screenshotDir,
+        realCLS: { score: 0, grade: realCLSData.grade }
+      }
+    }
+
+    // Process actual layout shifts detected by Chrome
+    // Trust Chrome's Layout Instability API completely - if Chrome reports it, it's real
     realCLSData.shifts.forEach((shift) => {
       const element = shift.sources?.[0]?.node || "unknown"
       const isCriticalElement = ["NAV", "HEADER", "BUTTON", "A"].includes(element.toUpperCase())
@@ -2742,11 +2795,13 @@ export async function analyzeVisualDiff(params: {
   results.push("")
   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("**Step 1: Fetch and analyze the BEFORE image**")
+  results.push(`Use WebFetch with URL: \`${beforeImageUrl}\``)
+  results.push(`Prompt: "Describe this screenshot in detail, focusing on layout and visible elements"`)
   results.push("")
-  results.push("**Step 2: Load the AFTER image**")
-  results.push(`Use the Read tool to load: \`${afterImageUrl}\``)
+  results.push("**Step 2: Fetch and analyze the AFTER image**")
+  results.push(`Use WebFetch with URL: \`${afterImageUrl}\``)
+  results.push(`Prompt: "Describe this screenshot in detail, focusing on layout and visible elements"`)
   results.push("")
   results.push("**Step 3: Compare and describe the differences**")
 
@@ -2767,8 +2822,6 @@ export async function analyzeVisualDiff(params: {
   results.push("• Which element(s) changed")
   results.push("• What appeared/moved/resized")
   results.push("• Why this caused other elements to shift")
-  results.push("")
-  results.push("💡 **TIP:** Load both images first, then describe the differences in detail.")
 
   return {
     content: [{ type: "text", text: results.join("\n") }]

package/mcp-server/app/page.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link"
 import { useEffect, useState } from "react"
 import { DarkModeToggle } from "@/components/dark-mode-toggle"
+import { ChromeIcon, NextJsIcon } from "@/components/mcp-icons"
 import { useDarkMode } from "@/hooks/use-dark-mode"
 
 interface MCPTool {
@@ -24,6 +25,22 @@ interface ToolsResponse {
   categories: string[]
 }
 
+interface OrchestratorResponse {
+  orchestratorEnabled: boolean
+  connectedMCPs: string[]
+  totalConnections: number
+  mcpDetails: Array<{
+    name: string
+    connected: boolean
+    toolCount: number
+    tools: string[]
+    projects: string[]
+  }>
+  totalProjects: number
+  projects: string[]
+  message: string
+}
+
 // Format tool descriptions by parsing markdown-style sections
 function formatToolDescription(description: string) {
   const slugify = (value: string) =>
@@ -46,18 +63,19 @@ function formatToolDescription(description: string) {
     const normalizedKey = getUniqueKey(slugify(rawSection) || "section")
     let section = rawSection
 
+    // Remove markdown formatting
+    section = section.replace(/\*\*/g, "").trim()
+
     // Remove excessive emojis
-    // Simple emoji reduction - just remove most emojis except the first in sequences
     section = section.replace(/(\u{1F300}-\u{1F9FF}|\u{2600}-\u{26FF}|\u{1F900}-\u{1F9FF})+/gu, (match) => {
-      // Keep only the first emoji in a sequence
       return match.charAt(0)
     })
 
     // Handle different section types
-    if (section.includes("**") && section.includes(":")) {
+    if (section.includes(":")) {
       // This is a header with content
       const [header, ...contentParts] = section.split(":")
-      const cleanHeader = header.replace(/\*\*/g, "").trim()
+      const cleanHeader = header.trim()
       const content = contentParts.join(":").trim()
 
       // Check if content has bullet points
@@ -96,7 +114,6 @@ function formatToolDescription(description: string) {
       return (
         <ol className="space-y-1 ml-4" key={`${normalizedKey}-steps`}>
           {items.map((item, itemIdx) => {
-            // Clean up the item text
             const cleanItem = item
               .replace(/^\d+[\ud83c-\ud83e][\udc00-\udfff]\s*/, "")
               .replace(/^\d+\.\s*/, "")
@@ -125,14 +142,17 @@ function formatToolDescription(description: string) {
 
 export default function HomePage() {
   const [tools, setTools] = useState<ToolsResponse | null>(null)
+  const [orchestrator, setOrchestrator] = useState<OrchestratorResponse | null>(null)
   const [loading, setLoading] = useState(true)
   const [darkMode, setDarkMode] = useDarkMode()
 
   useEffect(() => {
-    fetch("/api/tools")
-      .then((res) => res.json())
-      .then((data) => {
-        setTools(data)
+    // Fetch both tools and orchestrator status in parallel
+    Promise.all([fetch("/api/tools"), fetch("/api/orchestrator")])
+      .then(([toolsRes, orchRes]) => Promise.all([toolsRes.json(), orchRes.json()]))
+      .then(([toolsData, orchData]) => {
+        setTools(toolsData)
+        setOrchestrator(orchData)
         setLoading(false)
       })
       .catch(() => {
@@ -165,12 +185,6 @@ export default function HomePage() {
               </div>
             </div>
             <div className="flex items-center gap-4">
-              <Link
-                href="/logs"
-                className="inline-flex items-center gap-2 px-5 py-3 bg-primary text-primary-foreground text-sm font-medium rounded hover:bg-primary/90 transition-colors"
-              >
-                📊 View Logs
-              </Link>
               <a
                 href="https://github.com/vercel-labs/dev3000#setup"
                 target="_blank"
@@ -187,56 +201,59 @@ export default function HomePage() {
 
       {/* Main Content - no sidebar needed with only 2 tools */}
       <main className="max-w-7xl mx-auto px-6 py-8">
-        {/* Quick Start */}
-        <section className="mb-16">
-          <div className="bg-primary/10 border border-primary/20 rounded p-8">
-            <h2 className="text-xl font-semibold mb-4">🚀 Quick Start</h2>
-            <div className="space-y-4">
-              <div>
-                <span className="text-sm font-medium">MCP Endpoint:</span>
-                <code className="ml-3 px-4 py-2 bg-primary/20 text-foreground text-sm font-mono rounded">
-                  {tools?.endpoint || "http://localhost:3684/mcp"}
-                </code>
-              </div>
-              <div className="text-sm">
-                <p className="mb-3">Connect your AI tools to this MCP server for real-time development debugging:</p>
-                <div className="flex gap-6">
-                  <a
-                    href="https://github.com/vercel-labs/dev3000#claude-desktop"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-primary hover:text-primary/80 font-medium"
-                  >
-                    Claude Desktop Setup →
-                  </a>
-                  <a
-                    href="https://github.com/vercel-labs/dev3000#cursor"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-primary hover:text-primary/80 font-medium"
-                  >
-                    Cursor Setup →
-                  </a>
+        {/* MCP Connections Status */}
+        {!loading && orchestrator && (
+          <section className="mb-16">
+            <div className="bg-accent/10 border border-accent/20 rounded p-8">
+              <h2 className="text-xl font-semibold mb-4">🔌 MCP Connections</h2>
+              <p className="text-sm text-muted-foreground mb-4">{orchestrator.message}</p>
+
+              {orchestrator.totalConnections > 0 ? (
+                <>
+                  <div className="flex flex-wrap gap-3 mb-4">
+                    {orchestrator.mcpDetails.map((mcp) => {
+                      const Icon =
+                        mcp.name === "chrome-devtools" ? ChromeIcon : mcp.name === "nextjs-dev" ? NextJsIcon : null
+                      return (
+                        <div
+                          key={mcp.name}
+                          className="inline-flex items-center gap-2 bg-background/50 border border-border rounded px-3 py-2"
+                        >
+                          {Icon && <Icon className="shrink-0" />}
+                          <span className="font-semibold font-mono text-sm">{mcp.name}</span>
+                          <span className="w-2 h-2 bg-green-500 rounded-full"></span>
+                        </div>
+                      )
+                    })}
+                  </div>
+                  {orchestrator.totalProjects > 0 && (
+                    <div className="text-sm text-muted-foreground">
+                      <span className="font-medium">Active projects:</span>{" "}
+                      {orchestrator.projects.map((project, idx) => (
+                        <span key={project}>
+                          <code className="text-foreground bg-background/50 px-1.5 py-0.5 rounded">{project}</code>
+                          {idx < orchestrator.projects.length - 1 && ", "}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </>
+              ) : (
+                <div className="text-sm text-muted-foreground bg-background/50 border border-border rounded p-4">
+                  <p className="mb-2">⏳ Waiting for downstream MCPs to become available...</p>
+                  <p className="text-xs">
+                    dev3000 will automatically connect to <code className="text-foreground">chrome-devtools</code> and{" "}
+                    <code className="text-foreground">nextjs-dev</code> MCPs when Chrome and your dev server start.
+                  </p>
                 </div>
-              </div>
+              )}
             </div>
-          </div>
-        </section>
+          </section>
+        )}
 
         {/* Tools Documentation */}
-        <section>
-          <div className="mb-12">
-            <div>
-              <h2 className="text-3xl font-bold mb-3">Available Tools</h2>
-              <p className="text-muted-foreground text-lg">
-                {loading
-                  ? "Loading MCP tools..."
-                  : `${tools?.totalTools || 0} tools across ${
-                      tools?.categories.length || 0
-                    } categories for AI-powered development debugging`}
-              </p>
-            </div>
-          </div>
+        <section className="bg-accent/10 border border-accent/20 rounded p-8">
+          <h2 className="text-xl font-semibold mb-4">🛠️ dev3000 Tools</h2>
 
           {loading ? (
             <div className="text-center py-16">
@@ -249,7 +266,7 @@ export default function HomePage() {
                 <div
                   key={tool.name}
                   id={tool.name}
-                  className="border border-border rounded-lg p-6 hover:border-muted-foreground/50 transition-colors"
+                  className="bg-background/50 border border-border rounded-lg p-6 hover:border-muted-foreground/50 transition-colors"
                 >
                   <div className="mb-4">
                     <h4 className="text-xl font-semibold font-mono mb-3">{tool.name}</h4>
@@ -352,9 +369,6 @@ export default function HomePage() {
               >
                 Homepage
               </a>
-              <Link href="/logs" className="hover:text-gray-900 transition-colors">
-                Logs
-              </Link>
             </div>
           </div>
         </div>

package/mcp-server/package.json

@@ -11,11 +11,10 @@
     "tools": "tsx tools-cli.ts"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.11.0",
+    "@modelcontextprotocol/sdk": "catalog:",
     "@radix-ui/react-slot": "^1.1.1",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.5",
-    "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "commander": "^14.0.1",
@@ -31,15 +30,14 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.9",
+    "@tailwindcss/postcss": "catalog:",
     "@types/node": "^24.5.2",
     "@types/react": "19.1.13",
-    "@types/react-dom": "19.1.9",
-    "@types/ws": "^8.5.12",
+    "autoprefixer": "catalog:",
     "babel-plugin-react-compiler": "^19.1.0-rc.3",
-    "postcss": "^8.5",
-    "tailwindcss": "^4.1.9",
-    "tw-animate-css": "^1.3.8",
-    "typescript": "^5.0.0"
+    "postcss": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "^5.0.0",
+    "vitest": "^3.2.4"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dev3000",
-  "version": "0.0.84",
+  "version": "0.0.85",
   "description": "AI-powered development tools with browser monitoring and MCP server integration",
   "type": "module",
   "main": "dist/index.js",
@@ -59,29 +59,23 @@
     "claude"
   ],
   "dependencies": {
-    "@antfu/ni": "^26.0.1",
     "@biomejs/biome": "^2.2.4",
     "chalk": "^5.3.0",
-    "cli-progress": "^3.12.0",
     "commander": "^14.0.1",
     "ink": "^6.3.1",
-    "mcp-handler": "^1.0.2",
     "next": "15.5.1-canary.30",
     "ora": "^9.0.0",
     "package-manager-detector": "^1.3.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "ws": "^8.18.3",
-    "zod": "^3.22.4",
     "typescript": "^5.0.0"
   },
   "devDependencies": {
-    "@types/cli-progress": "^3.11.6",
     "@types/node": "^24.5.2",
     "@types/react": "^19.0.0",
     "@types/ws": "^8.5.12",
     "husky": "^9.0.0",
-    "js-yaml": "^4.1.0",
     "tsx": "^4.20.3",
     "vitest": "^3.2.4"
   },
@@ -99,5 +93,6 @@
     "url": "git+https://github.com/vercel-labs/dev3000.git"
   },
   "author": "Lindsey Simon <lindsey@vercel.com>",
-  "license": "MIT"
+  "license": "MIT",
+  "packageManager": "pnpm@10.15.0+sha512.486ebc259d3e999a4e8691ce03b5cac4a71cbeca39372a9b762cb500cfdf0873e2cb16abe3d951b1ee2cf012503f027b98b6584e4df22524e0c7450d9ec7aa7b"
 }

package/src/tui-interface-impl.tsx

@@ -307,7 +307,7 @@ const TUIApp = ({
             {/* Info on the right */}
             <Box flexDirection="column" flexGrow={1}>
               <Text color="cyan">🌐 App: http://localhost:{appPort}</Text>
-              <Text color="cyan">🤖 MCP: http://localhost:{mcpPort}/mcp</Text>
+              <Text color="cyan">🤖 MCP: http://localhost:{mcpPort}</Text>
               <Text color="cyan">
                 📸 Logs: http://localhost:{mcpPort}/logs
                 {projectName ? `?project=${encodeURIComponent(projectName)}` : ""}