dev3000 0.0.90 → 0.0.92

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

@@ -1 +1 @@
-self.__RSC_SERVER_MANIFEST="{\n  \"node\": {},\n  \"edge\": {},\n  \"encryptionKey\": \"coTPdU0svpRNodp0Rw8CHLLSd/s45e/rD4kkbrVURd0=\"\n}"
+self.__RSC_SERVER_MANIFEST="{\n  \"node\": {},\n  \"edge\": {},\n  \"encryptionKey\": \"lZgibe2ziYqyEAkZ7RFH62f938aB/wxVlceTcZMnbR8=\"\n}"

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

@@ -1,5 +1,5 @@
 {
   "node": {},
   "edge": {},
-  "encryptionKey": "coTPdU0svpRNodp0Rw8CHLLSd/s45e/rD4kkbrVURd0="
+  "encryptionKey": "lZgibe2ziYqyEAkZ7RFH62f938aB/wxVlceTcZMnbR8="
 }

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

@@ -4,7 +4,7 @@ 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"
+import { executeBrowserAction, findComponentSource, fixMyApp, restartDevServer, TOOL_DESCRIPTIONS } from "./tools"
 
 // Detect available package runner (npx, pnpm dlx, or fail)
 const getPackageRunner = (): { command: string; args: string[] } | null => {
@@ -285,6 +285,18 @@ const handler = createMcpHandler(
       }
     )
 
+    // Dev server restart tool
+    server.tool(
+      "restart_dev_server",
+      TOOL_DESCRIPTIONS.restart_dev_server,
+      {
+        projectName: z.string().optional().describe("Project name (if multiple dev3000 instances are running)")
+      },
+      async (params) => {
+        return restartDevServer(params)
+      }
+    )
+
     // Tool that returns monitoring code for Claude to execute
     // TODO: Commenting out for now - need to figure out the right approach for proactive monitoring
     /*

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

@@ -1,4 +1,4 @@
-import { exec } from "child_process"
+import { exec, spawn } from "child_process"
 import { appendFileSync, existsSync, mkdirSync, readdirSync, readFileSync, statSync } from "fs"
 import { homedir, tmpdir } from "os"
 import { join } from "path"
@@ -21,7 +21,10 @@ export const TOOL_DESCRIPTIONS = {
     "🔍 **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."
+    "🔍 **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.",
+
+  restart_dev_server:
+    "🔄 **DEV SERVER RESTART** - Safely restarts the development server while preserving dev3000's monitoring, logs, and browser connection.\n\n🎯 **SMART RESTART LOGIC:**\n• First tries nextjs-dev MCP restart (if available and user has Next.js canary)\n• Falls back to dev3000's own restart mechanism:\n  - Kills the old server process on the app port\n  - Waits for clean shutdown\n  - Spawns a new server with the same command that was originally used\n  - Keeps dev3000's MCP server, browser monitoring, and screenshot capture running\n• All logging continues seamlessly - no data loss\n• Browser monitoring stays connected - no need to relaunch Chrome\n\n⚡ **WHEN TO USE:**\n• After modifying next.config.js, middleware, or environment variables\n• When you need a clean restart to clear server state\n• After significant code changes that Next.js HMR can't handle\n• When debugging persistent state or memory issues\n\n⚠️ **CRITICAL - DO NOT:**\n• ❌ NEVER manually run kill commands on the dev server like `pkill -f \"next dev\"` or `lsof -ti :3000 | xargs kill`\n• ❌ NEVER manually start the dev server with `npm run dev`, `pnpm dev`, `next dev`, etc.\n• ✅ ALWAYS use this tool for dev server restarts - it preserves all dev3000 infrastructure\n\n⚠️ **IMPORTANT:**\n• AVOID using this unnecessarily - Next.js HMR handles most changes automatically\n• Only restart when truly needed for config changes or state issues\n• The server will be offline for a few seconds during restart\n• Browser may show connection error briefly while server restarts\n\n💡 **PERFECT FOR:** 'restart the dev server', 'clean restart', 'reload the server' - but only when actually needed, not for regular code changes."
 }
 
 // Types
@@ -666,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("")
 
@@ -2119,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 }
 }
 
 /**
@@ -2183,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")
 
@@ -2221,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 = {
@@ -2326,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`,
@@ -2375,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
 
@@ -2476,7 +2605,8 @@ async function detectJankFromScreenshots(_projectName?: string): Promise<{
     detections: jankDetections,
     sessionId: latestSessionId,
     totalFrames: sessionFiles.length,
-    screenshotDir
+    screenshotDir,
+    captureTrigger
   }
 }
 
@@ -3266,3 +3396,213 @@ export async function findComponentSource(params: {
     }
   }
 }
+
+/**
+ * Restart the development server while preserving logs and monitoring
+ */
+export async function restartDevServer(params: {
+  projectName?: string
+}): Promise<{ content: Array<{ type: "text"; text: string }> }> {
+  const { projectName } = params
+
+  try {
+    // Find active session
+    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."
+          }
+        ]
+      }
+    }
+
+    // Use specified project or first available session
+    let targetSession = sessions[0]
+    if (projectName) {
+      const found = sessions.find((s) => s.projectName === projectName)
+      if (found) {
+        targetSession = found
+      }
+    }
+
+    const sessionData = JSON.parse(readFileSync(targetSession.sessionFile, "utf-8"))
+    const appPort = sessionData.appPort
+    const serverCommand = sessionData.serverCommand
+    const cwd = sessionData.cwd
+
+    if (!appPort) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: "❌ **NO APP PORT FOUND**\n\nSession file doesn't contain app port information."
+          }
+        ]
+      }
+    }
+
+    if (!serverCommand) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: "❌ **NO SERVER COMMAND FOUND**\n\nSession file doesn't contain the original server command. This session may have been created with an older version of dev3000."
+          }
+        ]
+      }
+    }
+
+    logToDevFile(
+      `Restart Dev Server: Starting restart for project [${targetSession.projectName}] on port ${appPort} with command [${serverCommand}]`
+    )
+
+    // Check if nextjs-dev MCP is available
+    const availableMcps = await discoverAvailableMcps(targetSession.projectName)
+    const hasNextjsDev = availableMcps.includes("nextjs-dev")
+
+    logToDevFile(`Restart Dev Server: Has nextjs-dev MCP: ${hasNextjsDev}`)
+
+    // Try nextjs-dev MCP first if available
+    if (hasNextjsDev) {
+      try {
+        logToDevFile("Restart Dev Server: Attempting to use nextjs-dev MCP restart")
+
+        // Check if nextjs-dev has restart capability
+        const capabilities = await getMcpCapabilities({ mcpName: "nextjs-dev" })
+        const capabilitiesText =
+          capabilities.content[0] && "text" in capabilities.content[0] ? capabilities.content[0].text : ""
+
+        if (capabilitiesText.includes("restart") || capabilitiesText.includes("reload")) {
+          logToDevFile("Restart Dev Server: nextjs-dev MCP has restart capability, delegating")
+
+          return {
+            content: [
+              {
+                type: "text",
+                text: "✅ **DELEGATING TO NEXTJS-DEV MCP**\n\nThe nextjs-dev MCP has restart capabilities. Please use the nextjs-dev MCP restart tool directly for better integration with Next.js."
+              }
+            ]
+          }
+        }
+
+        logToDevFile("Restart Dev Server: nextjs-dev MCP doesn't have restart capability, falling back")
+      } catch (error) {
+        logToDevFile(`Restart Dev Server: Failed to check nextjs-dev capabilities - ${error}`)
+      }
+    }
+
+    // Fallback: Use dev3000's own restart mechanism
+    logToDevFile("Restart Dev Server: Using dev3000 restart mechanism")
+
+    // Kill processes on the app port
+    const killCommand = `lsof -ti :${appPort} | xargs kill 2>/dev/null || true`
+    logToDevFile(`Restart Dev Server: Executing kill command: ${killCommand}`)
+
+    try {
+      await execAsync(killCommand)
+      logToDevFile("Restart Dev Server: Kill command executed successfully")
+    } catch (error) {
+      logToDevFile(`Restart Dev Server: Kill command failed (may be ok) - ${error}`)
+    }
+
+    // Wait for clean shutdown
+    await new Promise((resolve) => setTimeout(resolve, 2000))
+
+    // Check if port is now free
+    const checkCommand = `lsof -ti :${appPort}`
+    let portFree = false
+    try {
+      const { stdout } = await execAsync(checkCommand)
+      portFree = stdout.trim() === ""
+      logToDevFile(`Restart Dev Server: Port check result - free: ${portFree}`)
+    } catch {
+      // Command failed means no process on port (port is free)
+      portFree = true
+      logToDevFile("Restart Dev Server: Port is free (lsof returned no results)")
+    }
+
+    if (!portFree) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: `⚠️ **PORT STILL IN USE**\n\nFailed to free port ${appPort}. There may be a process that couldn't be killed.\n\nTry manually killing the process:\n\`\`\`bash\nlsof -ti :${appPort} | xargs kill -9\n\`\`\``
+          }
+        ]
+      }
+    }
+
+    logToDevFile("Restart Dev Server: Port is now free, spawning new server process")
+
+    // Spawn new server process
+    try {
+      const serverProcess = spawn(serverCommand, {
+        stdio: "inherit", // Inherit stdio so output goes to dev3000's logs
+        shell: true,
+        detached: true, // Run independently
+        cwd: cwd || process.cwd() // Use original working directory
+      })
+
+      // Unref so this process doesn't keep MCP server alive
+      serverProcess.unref()
+
+      logToDevFile(`Restart Dev Server: Spawned new server process with PID ${serverProcess.pid}`)
+
+      // Wait a moment for server to start
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      // Check if server is actually running on the port
+      try {
+        const { stdout: checkResult } = await execAsync(`lsof -ti :${appPort}`)
+        const isRunning = checkResult.trim() !== ""
+
+        if (isRunning) {
+          logToDevFile("Restart Dev Server: Server successfully restarted and running on port")
+          return {
+            content: [
+              {
+                type: "text",
+                text: `✅ **DEV SERVER RESTARTED**\n\nSuccessfully restarted the development server on port ${appPort}.\n\n🎯 **STATUS:**\n• Old server process: Killed\n• New server process: Running (PID ${serverProcess.pid})\n• Port ${appPort}: Active\n• Browser monitoring: Unchanged\n• Logs: Still being captured\n\n💡 The server has been restarted while keeping dev3000's monitoring, screenshots, and logging intact.`
+              }
+            ]
+          }
+        }
+        logToDevFile("Restart Dev Server: Server process spawned but not yet listening on port (may still be starting)")
+      } catch {
+        logToDevFile("Restart Dev Server: Server process spawned but not yet listening on port (may still be starting)")
+      }
+
+      return {
+        content: [
+          {
+            type: "text",
+            text: `🔄 **DEV SERVER RESTARTING**\n\nStarted a new server process (PID ${serverProcess.pid}).\n\n⏳ **STATUS:**\n• Old server: Killed\n• New server: Starting (may take a few moments)\n• Command: \`${serverCommand}\`\n• Port: ${appPort}\n\nThe server is restarting. Check the dev3000 logs to see when it's ready.`
+          }
+        ]
+      }
+    } catch (spawnError) {
+      logToDevFile(`Restart Dev Server: Failed to spawn new server process - ${spawnError}`)
+      return {
+        content: [
+          {
+            type: "text",
+            text: `❌ **RESTART FAILED**\n\nFailed to start new server process.\n\n**Error:** ${spawnError instanceof Error ? spawnError.message : String(spawnError)}\n\n**Command:** \`${serverCommand}\`\n\nThe old server was killed but the new one failed to start. You may need to manually restart dev3000.`
+          }
+        ]
+      }
+    }
+  } catch (error) {
+    logToDevFile(`Restart Dev Server: Error - ${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.90",
+  "version": "0.0.92",
   "description": "AI-powered development tools with browser monitoring and MCP server integration",
   "type": "module",
   "main": "dist/index.js",

package/src/tui-interface-impl.tsx

@@ -45,8 +45,9 @@ const TUIApp = ({
   const [initStatus, setInitStatus] = useState<string | null>("Initializing...")
   const [appPort, setAppPort] = useState<string>(initialAppPort)
   const logIdCounter = useRef(0)
+  const [clearFromLogId, setClearFromLogId] = useState<number>(0) // Track log ID to clear from
   const { stdout } = useStdout()
-  const ctrlCMessageDefault = "^C quit"
+  const ctrlCMessageDefault = "^L clear ^C quit"
   const [ctrlCMessage, setCtrlCMessage] = useState(ctrlCMessageDefault)
 
   const [terminalSize, setTerminalSize] = useState(() => ({
@@ -228,12 +229,19 @@ const TUIApp = ({
     if (key.ctrl && input === "c") {
       // Send SIGINT to trigger main process shutdown handler
       process.kill(process.pid, "SIGINT")
+    } else if (key.ctrl && input === "l") {
+      // Ctrl-L: Clear logs box - set clear point to last log ID
+      const lastLogId = logs.length > 0 ? logs[logs.length - 1].id : logIdCounter.current
+      setClearFromLogId(lastLogId)
+      setScrollOffset(0) // Reset scroll to bottom
     } else if (key.upArrow) {
-      setScrollOffset((prev) => Math.min(prev + 1, Math.max(0, logs.length - maxVisibleLogs)))
+      const filteredCount = logs.filter((log) => log.id > clearFromLogId).length
+      setScrollOffset((prev) => Math.min(prev + 1, Math.max(0, filteredCount - maxVisibleLogs)))
     } else if (key.downArrow) {
       setScrollOffset((prev) => Math.max(0, prev - 1))
     } else if (key.pageUp) {
-      setScrollOffset((prev) => Math.min(prev + maxVisibleLogs, Math.max(0, logs.length - maxVisibleLogs)))
+      const filteredCount = logs.filter((log) => log.id > clearFromLogId).length
+      setScrollOffset((prev) => Math.min(prev + maxVisibleLogs, Math.max(0, filteredCount - maxVisibleLogs)))
     } else if (key.pageDown) {
       setScrollOffset((prev) => Math.max(0, prev - maxVisibleLogs))
     } else if (input === "g" && key.shift) {
@@ -241,12 +249,17 @@ const TUIApp = ({
       setScrollOffset(0)
     } else if (input === "g" && !key.shift) {
       // g to go to beginning
-      setScrollOffset(Math.max(0, logs.length - maxVisibleLogs))
+      const filteredCount = logs.filter((log) => log.id > clearFromLogId).length
+      setScrollOffset(Math.max(0, filteredCount - maxVisibleLogs))
     }
   })
 
-  // Calculate visible logs
-  const visibleLogs = logs.slice(Math.max(0, logs.length - maxVisibleLogs - scrollOffset), logs.length - scrollOffset)
+  // Calculate visible logs - filter to only show logs after the clear point
+  const filteredLogs = logs.filter((log) => log.id > clearFromLogId)
+  const visibleLogs = filteredLogs.slice(
+    Math.max(0, filteredLogs.length - maxVisibleLogs - scrollOffset),
+    filteredLogs.length - scrollOffset
+  )
 
   // Render compact header for small terminals
   const renderCompactHeader = () => (
@@ -331,7 +344,7 @@ const TUIApp = ({
       <Box flexDirection="column" borderStyle="single" borderColor="gray" paddingX={1} flexGrow={1} minHeight={0}>
         {!isVeryCompact && (
           <Text color="gray" dimColor>
-            Logs ({logs.length} total{scrollOffset > 0 && `, scrolled up ${scrollOffset} lines`})
+            Logs ({filteredLogs.length} total{scrollOffset > 0 && `, scrolled up ${scrollOffset} lines`})
           </Text>
         )}
 
@@ -427,10 +440,6 @@ const TUIApp = ({
                 // Single space after type
                 const typeSpacing = ""
 
-                // For alignment: if no type tag, add spacing equivalent to a tag
-                // This aligns SERVER logs without tags with those that have tags
-                const alignmentSpacing = !type ? "       " : "" // ~7 chars for average tag like [GET]
-
                 return (
                   <Text key={log.id} wrap="truncate-end">
                     <Text dimColor>[{timestamp}]</Text>
@@ -438,14 +447,14 @@ const TUIApp = ({
                     <Text color={sourceColor} bold>
                       [{source}]
                     </Text>
-                    <Text>{sourceSpacing} </Text>
                     {type ? (
                       <>
+                        <Text>{sourceSpacing} </Text>
                         <Text color={typeColors[type] || "#A0A0A0"}>[{type}]</Text>
                         <Text>{typeSpacing} </Text>
                       </>
                     ) : (
-                      <Text>{alignmentSpacing}</Text>
+                      <Text> </Text>
                     )}
                     <Text>{message}</Text>
                   </Text>