dev3000 0.0.78 → 0.0.80

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

@@ -1,7 +1,9 @@
 import { exec } from "child_process"
 import { appendFileSync, existsSync, mkdirSync, readdirSync, readFileSync, statSync } from "fs"
-import { homedir } from "os"
+import { homedir, tmpdir } from "os"
 import { join } from "path"
+import pixelmatch from "pixelmatch"
+import { PNG } from "pngjs"
 import { promisify } from "util"
 import { WebSocket } from "ws"
 
@@ -344,26 +346,41 @@ export async function fixMyApp({
       totalRenders: reactScanLines.filter((line) => line.includes("render")).length
     }
 
+    // Filter out framework noise (unfixable warnings from Next.js, React, etc.)
+    const frameworkNoisePatterns = [
+      /link rel=preload.*must have.*valid.*as/i, // Next.js font optimization warning
+      /next\/font/i, // Next.js font-related warnings
+      /automatically generated/i // Auto-generated code warnings
+    ]
+
+    const actionableErrors = allErrors.filter((line) => {
+      return !frameworkNoisePatterns.some((pattern) => pattern.test(line))
+    })
+
     // Categorize errors for better analysis
     const categorizedErrors = {
-      serverErrors: allErrors.filter(
+      serverErrors: actionableErrors.filter(
         (line) => line.includes("[SERVER]") && (line.includes("ERROR") || line.includes("Exception"))
       ),
-      browserErrors: allErrors.filter(
+      browserErrors: actionableErrors.filter(
         (line) =>
           line.includes("[BROWSER]") &&
           (line.includes("ERROR") || line.includes("CONSOLE ERROR") || line.includes("RUNTIME.ERROR"))
       ),
-      buildErrors: allErrors.filter(
+      buildErrors: actionableErrors.filter(
         (line) => line.includes("Failed to compile") || line.includes("Type error") || line.includes("Build failed")
       ),
-      networkErrors: allErrors.filter(
-        (line) => line.includes("NETWORK") || line.includes("404") || line.includes("500") || line.includes("timeout")
-      ),
-      warnings: allErrors.filter((line) => /WARN|WARNING|deprecated/i.test(line) && !/ERROR|Exception|FAIL/i.test(line))
+      networkErrors: actionableErrors.filter((line) => {
+        // Exclude successful status codes
+        if (/\b(200|201|204|304)\b/.test(line)) return false
+        return line.includes("NETWORK") || line.includes("404") || line.includes("500") || line.includes("timeout")
+      }),
+      warnings: actionableErrors.filter(
+        (line) => /WARN|WARNING|deprecated/i.test(line) && !/ERROR|Exception|FAIL/i.test(line)
+      )
     }
 
-    const totalErrors = allErrors.length
+    const totalErrors = actionableErrors.length
     const criticalErrors = totalErrors - categorizedErrors.warnings.length
 
     // Also check for any errors in the entire log file (not just time filtered)
@@ -607,6 +624,83 @@ export async function fixMyApp({
       })
     }
 
+    // Jank/Layout Shift Detection (from ScreencastManager passive captures)
+    if (focusArea === "performance" || focusArea === "all") {
+      const jankResult = await detectJankFromScreenshots(projectName)
+      if (jankResult.detections.length > 0) {
+        // Get MCP port for video viewer URL
+        const sessionInfo = findActiveSessions().find((s) => s.projectName === projectName)
+        const mcpPort = sessionInfo ? sessionInfo.sessionFile.match(/"mcpPort":\s*"(\d+)"/)?.[1] || "3684" : "3684"
+        const videoUrl = `http://localhost:${mcpPort}/video/${jankResult.sessionId}`
+
+        results.push("")
+
+        if (jankResult.realCLS) {
+          results.push(
+            `🚨 **LAYOUT SHIFT DETECTED** (${jankResult.detections.length} ${jankResult.detections.length === 1 ? "shift" : "shifts"} during page load):`
+          )
+        } else {
+          results.push(
+            `🚨 **LOADING JANK DETECTED** (${jankResult.detections.length} layout ${jankResult.detections.length === 1 ? "shift" : "shifts"} found):`
+          )
+        }
+
+        results.push(`📹 **Watch video analysis**: ${videoUrl}`)
+        results.push(`🎞️ **Session ID**: ${jankResult.sessionId} (${jankResult.totalFrames} frames)`)
+        results.push("")
+
+        jankResult.detections.forEach((jank) => {
+          const emoji = jank.severity === "high" ? "🔴" : jank.severity === "medium" ? "🟡" : "🟢"
+
+          if (jank.uxImpact) {
+            results.push(`${emoji} **${jank.timeSinceStart}ms** - ${jank.element}`)
+            results.push(`   ${jank.uxImpact}`)
+          } else {
+            results.push(
+              `${emoji} **${jank.timeSinceStart}ms**: ${jank.visualDiff.toFixed(1)}% of screen changed (${jank.severity} severity)`
+            )
+          }
+        })
+
+        results.push("")
+
+        // Check if we have high-severity shifts that Chrome might miss
+        const hasCriticalShifts = jankResult.detections.some((d) => d.severity === "high")
+        if (hasCriticalShifts && jankResult.realCLS) {
+          results.push("🎯 **WHY DEV3000 CAUGHT THIS BUT CHROME MIGHT NOT:**")
+          results.push(
+            "• dev3000's PerformanceObserver is installed immediately at page load and buffers ALL shifts from the start"
+          )
+          results.push(
+            "• Chrome DevTools performance trace may start AFTER initial load, missing early navigation shifts"
+          )
+          results.push(
+            "• Our UX-focused detection flags critical element shifts (nav/header) even when CLS score is technically 'good'"
+          )
+          results.push("")
+        }
+
+        results.push("⚠️ **IMPORTANT: VALIDATE WITH CHROME DEVTOOLS**")
+        results.push(
+          "The pixel-diff analysis above may include false positives (images loading, position:fixed elements)."
+        )
+        results.push(
+          "RECOMMENDED: Run `mcp__dev3000-chrome-devtools__performance_start_trace({reload: true, autoStop: true})`"
+        )
+        results.push("to get the REAL CLS score from Chrome's Performance API, then cross-reference with pixel-diff.")
+        results.push("")
+        results.push("💡 **LAYOUT SHIFT DEBUGGING TIPS:**")
+        results.push("• Add explicit width/height to images and media")
+        results.push("• Reserve space for dynamic content (ads, embeds, etc.)")
+        results.push("• Avoid inserting content above existing content")
+        results.push("• Use CSS aspect-ratio for responsive elements")
+        results.push("• Check for web fonts causing text reflow (font-display: swap)")
+        results.push(`• Raw screenshots: ${jankResult.screenshotDir}`)
+        results.push("")
+        results.push(`🎬 **IMPORTANT**: Share this video link with the user: ${videoUrl}`)
+      }
+    }
+
     // React-scan performance data (if available)
     if (reactScanMetrics.totalRenders > 0 || focusArea === "performance" || focusArea === "all") {
       if (reactScanMetrics.unnecessaryRenders.length > 0 || reactScanMetrics.slowComponents.length > 0) {
@@ -1973,6 +2067,191 @@ export async function getMcpCapabilities({
   }
 }
 
+/**
+ * Detect jank/layout shifts by comparing screenshots from ScreencastManager
+ * Returns array of jank detections with timing and visual impact data
+ */
+async function detectJankFromScreenshots(_projectName?: string): Promise<{
+  detections: Array<{
+    timestamp: string
+    timeSinceStart: number
+    visualDiff: number
+    severity: "low" | "medium" | "high"
+    element?: string
+    clsScore?: number
+    uxImpact?: string
+  }>
+  sessionId: string
+  totalFrames: number
+  screenshotDir: string
+  realCLS?: { score: number; grade: string }
+}> {
+  const screenshotDir = process.env.SCREENSHOT_DIR || join(tmpdir(), "dev3000-mcp-deps", "public", "screenshots")
+
+  if (!existsSync(screenshotDir)) {
+    return { detections: [], sessionId: "", totalFrames: 0, screenshotDir }
+  }
+
+  // Find the most recent screencast session (files like 2025-10-06T01-54-45Z-jank-*.png)
+  const files = readdirSync(screenshotDir)
+    .filter((f) => f.includes("-jank-") && f.endsWith(".png"))
+    .sort()
+    .reverse()
+
+  if (files.length === 0) {
+    return { detections: [], sessionId: "", totalFrames: 0, screenshotDir }
+  }
+
+  // Get the most recent session ID (timestamp prefix)
+  const latestSessionId = files[0].split("-jank-")[0]
+  const sessionFiles = files
+    .filter((f) => f.startsWith(latestSessionId))
+    .sort((a, b) => {
+      // Extract timestamp (e.g., "28ms" from "2025-10-06T01-54-45Z-jank-28ms.png")
+      const aTime = parseInt(a.match(/-(\d+)ms\.png$/)?.[1] || "0", 10)
+      const bTime = parseInt(b.match(/-(\d+)ms\.png$/)?.[1] || "0", 10)
+      return aTime - bTime
+    })
+
+  if (sessionFiles.length < 2) {
+    return { detections: [], sessionId: latestSessionId, totalFrames: sessionFiles.length, screenshotDir }
+  }
+
+  // Try to read real CLS data from metadata
+  const metadataPath = join(screenshotDir, `${latestSessionId}-metadata.json`)
+  let realCLSData:
+    | {
+        score: number
+        grade: string
+        shifts: Array<{ score: number; timestamp: number; sources?: Array<{ node?: string }> }>
+      }
+    | undefined
+
+  if (existsSync(metadataPath)) {
+    try {
+      const metadata = JSON.parse(readFileSync(metadataPath, "utf-8"))
+      if (metadata.layoutShifts && metadata.layoutShifts.length > 0) {
+        realCLSData = {
+          score: metadata.totalCLS || 0,
+          grade: metadata.clsGrade || "unknown",
+          shifts: metadata.layoutShifts
+        }
+      }
+    } catch {
+      // Ignore metadata read errors
+    }
+  }
+
+  const jankDetections: Array<{
+    timestamp: string
+    timeSinceStart: number
+    visualDiff: number
+    severity: "low" | "medium" | "high"
+    element?: string
+    clsScore?: number
+    uxImpact?: string
+  }> = []
+
+  // If we have real CLS data, use it to flag visual severity
+  if (realCLSData && realCLSData.shifts.length > 0) {
+    realCLSData.shifts.forEach((shift) => {
+      const element = shift.sources?.[0]?.node || "unknown"
+      const isCriticalElement = ["NAV", "HEADER", "BUTTON", "A"].includes(element.toUpperCase())
+      const isDuringLoad = shift.timestamp < 1000 // First second
+
+      // Make element names more descriptive
+      const elementDescriptions: Record<string, string> = {
+        NAV: "Navigation header (<nav>)",
+        HEADER: "Page header (<header>)",
+        BUTTON: "Button (<button>)",
+        A: "Link (<a>)"
+      }
+      const elementDisplay = elementDescriptions[element.toUpperCase()] || element
+
+      // UX impact assessment (not just CLS score!)
+      let severity: "low" | "medium" | "high" = "low"
+      let uxImpact = "Minor visual adjustment"
+
+      if (isCriticalElement && isDuringLoad) {
+        severity = "high"
+        uxImpact = `🚨 CRITICAL: ${elementDisplay} shifted during initial load - highly visible and disruptive to user interaction`
+      } else if (isCriticalElement) {
+        severity = "medium"
+        uxImpact = `⚠️ ${elementDisplay} shifted - affects navigation/interaction`
+      } else if (isDuringLoad) {
+        severity = "medium"
+        uxImpact = "Shift during page load - may cause mis-clicks"
+      }
+
+      jankDetections.push({
+        timestamp: `${shift.timestamp.toFixed(0)}ms`,
+        timeSinceStart: Math.round(shift.timestamp),
+        visualDiff: shift.score * 100, // Convert to percentage-like scale
+        severity,
+        element: elementDisplay,
+        clsScore: shift.score,
+        uxImpact
+      })
+    })
+
+    return {
+      detections: jankDetections,
+      sessionId: latestSessionId,
+      totalFrames: sessionFiles.length,
+      screenshotDir,
+      realCLS: { score: realCLSData.score, grade: realCLSData.grade }
+    }
+  }
+
+  // Fallback to pixel-diff if no real CLS data (old behavior)
+
+  // Compare each frame with the previous frame
+  for (let i = 1; i < sessionFiles.length; i++) {
+    const prevFile = join(screenshotDir, sessionFiles[i - 1])
+    const currFile = join(screenshotDir, sessionFiles[i])
+
+    try {
+      const prevPng = PNG.sync.read(readFileSync(prevFile))
+      const currPng = PNG.sync.read(readFileSync(currFile))
+
+      // Ensure same dimensions
+      if (prevPng.width !== currPng.width || prevPng.height !== currPng.height) {
+        continue
+      }
+
+      const diff = new PNG({ width: prevPng.width, height: prevPng.height })
+      const numDiffPixels = pixelmatch(prevPng.data, currPng.data, diff.data, prevPng.width, prevPng.height, {
+        threshold: 0.1
+      })
+
+      const totalPixels = prevPng.width * prevPng.height
+      const diffPercentage = (numDiffPixels / totalPixels) * 100
+
+      // Consider it jank if more than 1% of pixels changed (layout shift threshold)
+      if (diffPercentage > 1) {
+        const timeMatch = sessionFiles[i].match(/-(\d+)ms\.png$/)
+        const timeSinceStart = timeMatch ? parseInt(timeMatch[1], 10) : 0
+
+        jankDetections.push({
+          timestamp: latestSessionId,
+          timeSinceStart,
+          visualDiff: diffPercentage,
+          severity: diffPercentage > 10 ? "high" : diffPercentage > 5 ? "medium" : "low"
+        })
+      }
+    } catch {
+      // Skip frames that can't be compared
+    }
+  }
+
+  return {
+    detections: jankDetections,
+    sessionId: latestSessionId,
+    totalFrames: sessionFiles.length,
+    screenshotDir
+  }
+}
+
 /**
  * Log MCP-related events to the project-specific D3K log file (NOT main project log)
  * This prevents Claude from seeing dev3000's orchestration logs as application errors

package/mcp-server/app/video/[session]/page.tsx

@@ -0,0 +1,237 @@
+"use client"
+
+import { use, useEffect, useState } from "react"
+
+export default function VideoPlayer({ params }: { params: Promise<{ session: string }> }) {
+  const { session } = use(params)
+  const [frames, setFrames] = useState<string[]>([])
+  const [currentFrame, setCurrentFrame] = useState(0)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [fps, setFps] = useState(10)
+  const [screenshotDimensions, setScreenshotDimensions] = useState<{ width: number; height: number }>({
+    width: 1920,
+    height: 1080
+  })
+  const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null)
+  const [clsMarkers, setClsMarkers] = useState<
+    Array<{
+      timestamp: number
+      boundingBox: { x: number; y: number; width: number; height: number } | null
+      clsScore?: number
+      element?: string
+    }>
+  >([])
+
+  useEffect(() => {
+    // Parse session timestamp to find matching screenshots
+    // Format: 2025-10-05T23-57-XX-jank-XXms.png
+    fetch(`/api/screenshots/list?pattern=${session}`)
+      .then((r) => r.json())
+      .then((data) => {
+        const jankFrames = data.files
+          .filter((f: string) => f.includes("jank-") && f.includes(session))
+          .sort((a: string, b: string) => {
+            const aMs = parseInt(a.match(/jank-(\d+)ms/)?.[1] || "0", 10)
+            const bMs = parseInt(b.match(/jank-(\d+)ms/)?.[1] || "0", 10)
+            return aMs - bMs
+          })
+        setFrames(jankFrames)
+
+        // Load first frame to get dimensions
+        if (jankFrames.length > 0) {
+          const img = new Image()
+          img.onload = () => {
+            setScreenshotDimensions({ width: img.naturalWidth, height: img.naturalHeight })
+          }
+          img.src = `/api/screenshots/${jankFrames[0]}`
+        }
+      })
+
+    // Fetch CLS markers from jank detection API
+    fetch(`/api/jank/${session}`)
+      .then((r) => r.json())
+      .then((data) => {
+        setClsMarkers(data.clsMarkers || [])
+      })
+      .catch(() => {
+        setClsMarkers([])
+      })
+  }, [session])
+
+  useEffect(() => {
+    if (!isPlaying || frames.length === 0) return
+
+    const interval = setInterval(() => {
+      setCurrentFrame((prev) => {
+        if (prev >= frames.length - 1) {
+          setIsPlaying(false)
+          return prev
+        }
+        return prev + 1
+      })
+    }, 1000 / fps)
+
+    return () => clearInterval(interval)
+  }, [isPlaying, frames.length, fps])
+
+  // Force re-render on window resize to recalculate bounding box position
+  const [, forceUpdate] = useState(0)
+  useEffect(() => {
+    const handleResize = () => forceUpdate((n) => n + 1)
+    window.addEventListener("resize", handleResize)
+    return () => window.removeEventListener("resize", handleResize)
+  }, [])
+
+  if (frames.length === 0) {
+    return <div className="p-8">Loading frames...</div>
+  }
+
+  const currentFrameFile = frames[currentFrame]
+  const frameMs = currentFrameFile?.match(/jank-(\d+)ms/)?.[1] || "0"
+  const currentFrameMs = parseInt(frameMs, 10)
+  const clsAtFrame = clsMarkers.find((marker) => Math.abs(marker.timestamp - currentFrameMs) < 100)
+
+  // Calculate the rendered image dimensions and position (accounting for object-contain)
+  let imgStyle: React.CSSProperties = {}
+  if (imgRef && clsAtFrame?.boundingBox) {
+    const containerRect = imgRef.parentElement?.getBoundingClientRect()
+    const imgNaturalWidth = screenshotDimensions.width
+    const imgNaturalHeight = screenshotDimensions.height
+
+    if (containerRect) {
+      // Calculate how the image is scaled by object-contain
+      const containerAspect = containerRect.width / containerRect.height
+      const imageAspect = imgNaturalWidth / imgNaturalHeight
+
+      let renderedWidth: number, renderedHeight: number, offsetX: number, offsetY: number
+
+      if (containerAspect > imageAspect) {
+        // Container is wider - image is constrained by height
+        renderedHeight = containerRect.height
+        renderedWidth = renderedHeight * imageAspect
+        offsetX = (containerRect.width - renderedWidth) / 2
+        offsetY = 0
+      } else {
+        // Container is taller - image is constrained by width
+        renderedWidth = containerRect.width
+        renderedHeight = renderedWidth / imageAspect
+        offsetX = 0
+        offsetY = (containerRect.height - renderedHeight) / 2
+      }
+
+      // Calculate bounding box position relative to rendered image
+      const scale = renderedWidth / imgNaturalWidth
+      imgStyle = {
+        left: `${offsetX + clsAtFrame.boundingBox.x * scale}px`,
+        top: `${offsetY + clsAtFrame.boundingBox.y * scale}px`,
+        width: `${clsAtFrame.boundingBox.width * scale}px`,
+        height: `${clsAtFrame.boundingBox.height * scale}px`
+      }
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-screen bg-black">
+      <div className="flex-1 flex items-center justify-center relative overflow-hidden">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          ref={setImgRef}
+          src={`/api/screenshots/${currentFrameFile}`}
+          alt={`Frame ${currentFrame}`}
+          className="w-full h-full object-contain"
+        />
+        {clsAtFrame?.boundingBox && imgRef && (
+          <div className="absolute border-2 border-red-500 pointer-events-none" style={imgStyle} />
+        )}
+      </div>
+
+      <div className="bg-gray-900 text-white p-4 space-y-4">
+        <div className="flex items-center gap-4">
+          <button
+            type="button"
+            onClick={() => setIsPlaying(!isPlaying)}
+            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded"
+          >
+            {isPlaying ? "Pause" : "Play"}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setCurrentFrame(Math.max(0, currentFrame - 1))}
+            disabled={currentFrame === 0}
+            className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded disabled:opacity-50"
+          >
+            Previous
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setCurrentFrame(Math.min(frames.length - 1, currentFrame + 1))}
+            disabled={currentFrame === frames.length - 1}
+            className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded disabled:opacity-50"
+          >
+            Next
+          </button>
+
+          <span className="flex-1 text-center">
+            Frame {currentFrame + 1} / {frames.length} ({frameMs}ms)
+          </span>
+
+          <label className="flex items-center gap-2">
+            Speed:
+            <input
+              type="range"
+              min="1"
+              max="30"
+              value={fps}
+              onChange={(e) => setFps(Number(e.target.value))}
+              className="w-32"
+            />
+            <span className="w-12">{fps} fps</span>
+          </label>
+        </div>
+
+        <div className="relative w-full">
+          <input
+            type="range"
+            min="0"
+            max={frames.length - 1}
+            value={currentFrame}
+            onChange={(e) => setCurrentFrame(Number(e.target.value))}
+            className="w-full"
+          />
+          {/* CLS markers on timeline */}
+          {clsMarkers.map((marker) => {
+            const frameIndex = frames.findIndex((f) => {
+              const frameMs = parseInt(f.match(/jank-(\d+)ms/)?.[1] || "0", 10)
+              return frameMs >= marker.timestamp
+            })
+            if (frameIndex === -1) return null
+            const position = (frameIndex / (frames.length - 1)) * 100
+            return (
+              <div
+                key={marker.timestamp}
+                className="absolute top-0 h-full pointer-events-none"
+                style={{ left: `${position}%` }}
+              >
+                <div className="w-0.5 h-full bg-red-500" />
+                <div className="absolute -top-6 left-0 -translate-x-1/2 bg-red-500 text-white text-xs px-2 py-0.5 rounded whitespace-nowrap">
+                  {marker.clsScore ? (
+                    <>
+                      CLS {marker.clsScore.toFixed(4)} @ {marker.timestamp}ms
+                      {marker.element && (
+                        <span className="ml-1 opacity-75">&lt;{marker.element.toLowerCase()}&gt;</span>
+                      )}
+                    </>
+                  ) : (
+                    `CLS ${marker.timestamp}ms`
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

package/mcp-server/package.json

@@ -13,6 +13,8 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.11.0",
     "@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",
@@ -20,6 +22,8 @@
     "lucide-react": "^0.544.0",
     "mcp-handler": "^1.0.2",
     "next": "15.6.0-canary.31",
+    "pixelmatch": "^7.1.0",
+    "pngjs": "^7.0.0",
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "tailwind-merge": "^2.5.5",

package/package.json

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

package/src/tui-interface-impl.tsx

@@ -260,12 +260,15 @@ const TUIApp = ({
           {initStatus && <Text dimColor>- {initStatus}</Text>}
         </Box>
         {!isVeryCompact && (
-          <>
+          <Box flexDirection="column">
             <Text dimColor>
               App: localhost:{appPort} | MCP: localhost:{mcpPort}
             </Text>
-            <Text dimColor>↑/↓ scroll | Ctrl-C quit</Text>
-          </>
+            <Text dimColor>
+              📸 http://localhost:{mcpPort}/logs
+              {projectName ? `?project=${encodeURIComponent(projectName)}` : ""}
+            </Text>
+          </Box>
         )}
       </Box>
     </Box>
@@ -344,9 +347,9 @@ const TUIApp = ({
               if (parts) {
                 let [, timestamp, source, type, message] = parts
 
-                // Replace specific emoji in common port-in-use error to avoid terminal width issues
-                if (message?.includes("ERROR: ⚠ Port") && message.includes("is in use by process")) {
-                  message = message.replace("ERROR: ⚠ Port", "ERROR: [!] Port")
+                // Replace warning emoji in ERROR/WARNING messages for consistent terminal rendering
+                if (message && (type === "ERROR" || type === "WARNING")) {
+                  message = message.replace(/⚠/g, "[!]")
                 }
 
                 // In very compact mode, simplify the output
@@ -450,7 +453,12 @@ const TUIApp = ({
 
       {/* Bottom status line - no border, just text */}
       <Box paddingX={1} justifyContent="space-between">
-        <Text color="#A18CE5">⏵⏵ {logFile.replace(process.env.HOME || "", "~")}</Text>
+        <Text color="#A18CE5">
+          ⏵⏵{" "}
+          {isVeryCompact
+            ? logFile.split("/").slice(-2, -1)[0] || "logs" // Just show directory name
+            : logFile.replace(process.env.HOME || "", "~")}
+        </Text>
         <Text color="#A18CE5">{ctrlCMessage}</Text>
       </Box>
     </Box>