dev3000 0.0.66 → 0.0.67

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

@@ -3,6 +3,8 @@
 import Image from "next/image"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { DarkModeToggle } from "@/components/dark-mode-toggle"
+import { useDarkMode } from "@/hooks/use-dark-mode"
 import type { LogEntry, LogFile, LogListResponse, LogsApiResponse } from "@/types"
 import { getTextColor, LOG_COLORS } from "../../../src/constants/log-colors"
 
@@ -29,51 +31,6 @@ interface ReplayEvent {
 
 import { parseLogEntries } from "./utils"
 
-// Hook for dark mode with system preference detection
-function useDarkMode() {
-  const [darkMode, setDarkMode] = useState<boolean>(() => {
-    if (typeof window !== "undefined") {
-      // Check localStorage first
-      const saved = localStorage.getItem("dev3000-dark-mode")
-      if (saved !== null) {
-        return JSON.parse(saved)
-      }
-      // Default to system preference
-      return window.matchMedia("(prefers-color-scheme: dark)").matches
-    }
-    return false
-  })
-
-  useEffect(() => {
-    // Save to localStorage
-    localStorage.setItem("dev3000-dark-mode", JSON.stringify(darkMode))
-
-    // Apply dark class to document
-    if (darkMode) {
-      document.documentElement.classList.add("dark")
-    } else {
-      document.documentElement.classList.remove("dark")
-    }
-  }, [darkMode])
-
-  // Listen for system theme changes
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
-    const handler = (e: MediaQueryListEvent) => {
-      // Only update if no explicit choice has been made
-      const saved = localStorage.getItem("dev3000-dark-mode")
-      if (saved === null) {
-        setDarkMode(e.matches)
-      }
-    }
-
-    mediaQuery.addEventListener("change", handler)
-    return () => mediaQuery.removeEventListener("change", handler)
-  }, [])
-
-  return [darkMode, setDarkMode] as const
-}
-
 // Keep this for backwards compatibility, but it's not used anymore
 function _parseLogLine(line: string): LogEntry | null {
   const match = line.match(/^\[([^\]]+)\] \[([^\]]+)\] (.*)$/s)
@@ -125,7 +82,7 @@ function URLRenderer({ url, maxLength = 60 }: { url: string; maxLength?: number
           <button
             type="button"
             onClick={() => setIsExpanded(false)}
-            className="ml-2 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 px-1 py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+            className="ml-2 text-xs text-muted-foreground hover:text-foreground px-1 py-0.5 rounded hover:bg-muted"
           >
             [collapse]
           </button>
@@ -143,7 +100,7 @@ function URLRenderer({ url, maxLength = 60 }: { url: string; maxLength?: number
           <button
             type="button"
             onClick={() => setIsExpanded(true)}
-            className="ml-1 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 px-1 py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+            className="ml-1 text-xs text-muted-foreground hover:text-foreground px-1 py-0.5 rounded hover:bg-muted"
           >
             [expand]
           </button>
@@ -285,7 +242,7 @@ function ObjectRenderer({ content }: { content: string }) {
 
         {isExpanded && (
           <div className="mt-1 ml-4 border-l-2 border-gray-200 pl-3">
-            <pre className="font-mono text-sm text-gray-700 whitespace-pre-wrap">{JSON.stringify(obj, null, 2)}</pre>
+            <pre className="font-mono text-sm text-foreground whitespace-pre-wrap">{JSON.stringify(obj, null, 2)}</pre>
           </div>
         )}
       </div>
@@ -296,103 +253,90 @@ function ObjectRenderer({ content }: { content: string }) {
   }
 }
 
-function LogEntryComponent({ entry }: { entry: LogEntry }) {
+function LogEntryComponent({ entry, darkMode }: { entry: LogEntry; darkMode: boolean }) {
   // Parse log type from message patterns - using shared TUI colors
   const parseLogType = (message: string) => {
     if (message.includes("[INTERACTION]"))
       return {
         type: "INTERACTION",
-        color: "bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800",
         backgroundColor: LOG_COLORS.CONSOLE_DEBUG,
         textColor: getTextColor(LOG_COLORS.CONSOLE_DEBUG)
       }
     if (message.includes("[CONSOLE ERROR]"))
       return {
         type: "CONSOLE ERROR",
-        color: "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800",
         backgroundColor: LOG_COLORS.CONSOLE_ERROR,
         textColor: getTextColor(LOG_COLORS.CONSOLE_ERROR)
       }
     if (message.includes("[CONSOLE WARN]"))
       return {
         type: "CONSOLE WARN",
-        color: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800",
         backgroundColor: LOG_COLORS.CONSOLE_WARN,
         textColor: getTextColor(LOG_COLORS.CONSOLE_WARN)
       }
     if (message.includes("[CONSOLE INFO]"))
       return {
         type: "CONSOLE INFO",
-        color: "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800",
         backgroundColor: LOG_COLORS.CONSOLE_INFO,
         textColor: getTextColor(LOG_COLORS.CONSOLE_INFO)
       }
     if (message.includes("[CONSOLE LOG]"))
       return {
         type: "CONSOLE LOG",
-        color: "bg-gray-50 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700",
         backgroundColor: LOG_COLORS.CONSOLE_LOG,
         textColor: getTextColor(LOG_COLORS.CONSOLE_LOG)
       }
     if (message.includes("[CONSOLE DEBUG]"))
       return {
         type: "CONSOLE DEBUG",
-        color: "bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800",
         backgroundColor: LOG_COLORS.CONSOLE_DEBUG,
         textColor: getTextColor(LOG_COLORS.CONSOLE_DEBUG)
       }
     if (message.includes("[SCREENSHOT]"))
       return {
         type: "SCREENSHOT",
-        color: "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800",
         backgroundColor: LOG_COLORS.SCREENSHOT,
         textColor: getTextColor(LOG_COLORS.SCREENSHOT)
       }
     if (message.includes("[NAVIGATION]") || message.includes("[PAGE]"))
       return {
         type: "PAGE",
-        color: "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800",
         backgroundColor: LOG_COLORS.PAGE,
         textColor: getTextColor(LOG_COLORS.PAGE)
       }
     if (message.includes("[DOM]"))
       return {
         type: "DOM",
-        color: "bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800",
         backgroundColor: LOG_COLORS.DOM,
         textColor: getTextColor(LOG_COLORS.DOM)
       }
     if (message.includes("[CDP]"))
       return {
         type: "CDP",
-        color: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800",
         backgroundColor: LOG_COLORS.CDP,
         textColor: getTextColor(LOG_COLORS.CDP)
       }
     if (message.includes("[NETWORK]"))
       return {
         type: "NETWORK",
-        color: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800",
         backgroundColor: LOG_COLORS.NETWORK,
         textColor: getTextColor(LOG_COLORS.NETWORK)
       }
     if (message.includes("[ERROR]") || message.includes("[PAGE ERROR]") || message.includes("[NETWORK ERROR]"))
       return {
         type: "ERROR",
-        color: "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800",
         backgroundColor: LOG_COLORS.ERROR,
         textColor: getTextColor(LOG_COLORS.ERROR)
       }
     if (message.includes("[CRITICAL ERROR]"))
       return {
         type: "CRITICAL ERROR",
-        color: "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800",
         backgroundColor: LOG_COLORS.CRITICAL_ERROR,
         textColor: getTextColor(LOG_COLORS.CRITICAL_ERROR)
       }
     return {
       type: "DEFAULT",
-      color: "border-gray-200 dark:border-gray-700",
+      color: "bg-gray-50 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700",
       backgroundColor: LOG_COLORS.DEFAULT,
       textColor: getTextColor(LOG_COLORS.DEFAULT)
     }
@@ -493,12 +437,90 @@ function LogEntryComponent({ entry }: { entry: LogEntry }) {
     return parts.length > 0 ? parts : message
   }
 
+  // Determine the background color based on log type and dark mode
+  const getBackgroundStyle = () => {
+    const type = logTypeInfo.type
+    if (darkMode) {
+      // Dark mode colors
+      switch (type) {
+        case "INTERACTION":
+        case "CONSOLE DEBUG":
+        case "DOM":
+          return { backgroundColor: "rgba(88, 28, 135, 0.3)" } // purple-950/30
+        case "CONSOLE ERROR":
+        case "ERROR":
+        case "CRITICAL ERROR":
+          return { backgroundColor: "rgba(127, 29, 29, 0.3)" } // red-950/30
+        case "CONSOLE WARN":
+        case "CDP":
+        case "NETWORK":
+          return { backgroundColor: "rgba(133, 77, 14, 0.3)" } // yellow-950/30
+        case "CONSOLE INFO":
+        case "SCREENSHOT":
+          return { backgroundColor: "rgba(30, 58, 138, 0.3)" } // blue-950/30
+        case "PAGE":
+          return { backgroundColor: "rgba(20, 83, 45, 0.3)" } // green-950/30
+        default:
+          return { backgroundColor: "rgba(17, 24, 39, 0.3)" } // gray-900/30
+      }
+    } else {
+      // Light mode colors
+      switch (type) {
+        case "INTERACTION":
+        case "CONSOLE DEBUG":
+        case "DOM":
+          return { backgroundColor: "rgba(250, 245, 255, 0.5)" } // purple-50/50
+        case "CONSOLE ERROR":
+        case "ERROR":
+        case "CRITICAL ERROR":
+          return { backgroundColor: "rgba(254, 242, 242, 0.5)" } // red-50/50
+        case "CONSOLE WARN":
+        case "CDP":
+        case "NETWORK":
+          return { backgroundColor: "rgba(254, 252, 232, 0.5)" } // yellow-50/50
+        case "CONSOLE INFO":
+        case "SCREENSHOT":
+          return { backgroundColor: "rgba(239, 246, 255, 0.5)" } // blue-50/50
+        case "PAGE":
+          return { backgroundColor: "rgba(240, 253, 244, 0.5)" } // green-50/50
+        default:
+          return { backgroundColor: "transparent" }
+      }
+    }
+  }
+
+  // Determine the border class based on log type
+  const getBorderClass = () => {
+    const type = logTypeInfo.type
+    switch (type) {
+      case "INTERACTION":
+      case "CONSOLE DEBUG":
+      case "DOM":
+        return "border-purple-200 dark:border-purple-800"
+      case "CONSOLE ERROR":
+      case "ERROR":
+      case "CRITICAL ERROR":
+        return "border-red-200 dark:border-red-800"
+      case "CONSOLE WARN":
+      case "CDP":
+      case "NETWORK":
+        return "border-yellow-200 dark:border-yellow-800"
+      case "CONSOLE INFO":
+      case "SCREENSHOT":
+        return "border-blue-200 dark:border-blue-800"
+      case "PAGE":
+        return "border-green-200 dark:border-green-800"
+      default:
+        return "border-gray-200 dark:border-gray-700"
+    }
+  }
+
   return (
-    <div className={`border-l-4 ${logTypeInfo.color} pl-4 py-2`}>
+    <div className={`border-l-4 ${getBorderClass()} pl-4 py-2`} style={getBackgroundStyle()}>
       {/* Table-like layout using CSS Grid */}
       <div className="grid grid-cols-[auto_auto_1fr] gap-3 items-start">
         {/* Column 1: Timestamp */}
-        <div className="text-xs text-gray-500 dark:text-gray-400 font-mono whitespace-nowrap pt-1">
+        <div className="text-xs text-muted-foreground font-mono whitespace-nowrap pt-1">
           {new Date(entry.timestamp).toLocaleTimeString()}
         </div>
 
@@ -514,13 +536,13 @@ function LogEntryComponent({ entry }: { entry: LogEntry }) {
         </div>
 
         {/* Column 3: Message content with user agent info */}
-        <div className="font-mono text-sm min-w-0 text-gray-900 dark:text-gray-100">
+        <div className="font-mono text-sm min-w-0 text-foreground">
           <div className="flex flex-wrap items-start gap-2">
             <div className="flex-1 min-w-0">{renderMessage(entry.message)}</div>
             {/* User Agent and Tab Identifier Pills */}
             <div className="flex items-center gap-1 flex-shrink-0">
               {entry.tabIdentifier && (
-                <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+                <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-muted text-muted-foreground">
                   {entry.tabIdentifier}
                 </span>
               )}
@@ -803,6 +825,10 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
   const [showReplayPreview, setShowReplayPreview] = useState(false)
   const [replayEvents, setReplayEvents] = useState<ReplayEvent[]>([])
   const [isRotatingLog, setIsRotatingLog] = useState(false)
+  const [retryCount, setRetryCount] = useState(0)
+  const [maxRetries] = useState(5)
+  const [lastFailedUrl, setLastFailedUrl] = useState<string | null>(null)
+  const [hasLoadedInitial, setHasLoadedInitial] = useState(false)
   const [filters, setFilters] = useState({
     browser: true,
     server: true,
@@ -826,9 +852,12 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
         setAvailableLogs(data.files)
         setCurrentLogFile(data.currentFile)
         setProjectName(data.projectName)
+        return true
       }
+      return false
     } catch (error) {
       console.error("Error loading available logs:", error)
+      return false
     }
   }, [])
 
@@ -861,11 +890,28 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
         ? `/api/logs/tail?lines=50&logPath=${encodeURIComponent(logPath)}`
         : `/api/logs/tail?lines=50`
 
+      // Check if we've exceeded retry limit for this specific URL
+      if (lastFailedUrl === apiUrl && retryCount >= maxRetries) {
+        console.error(`Maximum retry attempts (${maxRetries}) reached for ${apiUrl}. Stopping polling.`)
+        // Clear the polling interval to stop further attempts
+        if (pollIntervalRef.current) {
+          clearInterval(pollIntervalRef.current)
+          pollIntervalRef.current = null
+        }
+        return
+      }
+
       const response = await fetch(apiUrl)
       if (!response.ok) {
         throw new Error(`HTTP ${response.status}: ${response.statusText}`)
       }
 
+      // Reset retry count on successful fetch
+      if (lastFailedUrl === apiUrl || retryCount > 0) {
+        setRetryCount(0)
+        setLastFailedUrl(null)
+      }
+
       const data: LogsApiResponse = await response.json()
 
       if (!data.logs) {
@@ -906,13 +952,55 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
       }
     } catch (error) {
       console.error("Error polling logs:", error)
-      // Don't spam console on network errors during polling
+
+      // Build the failed URL for tracking
+      const requestedFile = searchParams.get("file")
+      let logPath = ""
+      if (requestedFile && availableLogs.length > 0) {
+        const foundFile = availableLogs.find((f) => f.name === requestedFile)
+        logPath = foundFile?.path || currentLogFile
+      } else {
+        logPath = currentLogFile
+      }
+      const failedUrl = logPath
+        ? `/api/logs/tail?lines=50&logPath=${encodeURIComponent(logPath)}`
+        : `/api/logs/tail?lines=50`
+
+      // Increment retry count if it's the same URL, otherwise reset
+      if (lastFailedUrl === failedUrl) {
+        const newRetryCount = retryCount + 1
+        setRetryCount(newRetryCount)
+
+        if (newRetryCount >= maxRetries) {
+          console.error(`Maximum retry attempts (${maxRetries}) reached for ${failedUrl}. Stopping polling.`)
+          // Clear the polling interval to stop further attempts
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current)
+            pollIntervalRef.current = null
+          }
+        }
+      } else {
+        setLastFailedUrl(failedUrl)
+        setRetryCount(1)
+      }
     }
-  }, [mode, isAtBottom, searchParams, availableLogs, currentLogFile, lastLogCount, logBuffer, logs])
+  }, [
+    mode,
+    isAtBottom,
+    searchParams,
+    availableLogs,
+    currentLogFile,
+    lastLogCount,
+    logBuffer,
+    logs,
+    retryCount,
+    lastFailedUrl,
+    maxRetries
+  ])
 
   // Start/stop polling based on mode (always poll in tail mode, but buffer when not at bottom)
   useEffect(() => {
-    if (mode === "tail") {
+    if (mode === "tail" && retryCount < maxRetries) {
       pollIntervalRef.current = setInterval(pollForNewLogs, 3000) // Poll every 3 seconds
       return () => {
         if (pollIntervalRef.current) {
@@ -924,16 +1012,25 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
         clearInterval(pollIntervalRef.current)
       }
     }
-  }, [mode, pollForNewLogs]) // Removed isAtBottom - now always poll in tail mode
+  }, [mode, pollForNewLogs, retryCount, maxRetries]) // Removed isAtBottom - now always poll in tail mode
 
   // Handle returning to live mode - ONLY flush buffer when user explicitly clicks "Live" button
   // This effect is removed to prevent race conditions - buffer flushing now happens only on explicit user action
 
   const loadInitialLogs = useCallback(async () => {
+    if (retryCount >= maxRetries) {
+      console.log("Max retries reached, not attempting to load")
+      return
+    }
+
     setIsInitialLoading(true)
 
     // Load available logs list first
-    await loadAvailableLogs()
+    const logsListLoaded = await loadAvailableLogs()
+    if (!logsListLoaded) {
+      setIsInitialLoading(false)
+      return
+    }
 
     try {
       // Determine which log file to load
@@ -954,11 +1051,25 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
         ? `/api/logs/${mode}?lines=1000&logPath=${encodeURIComponent(logPath)}`
         : `/api/logs/${mode}?lines=1000`
 
+      // Check if we've exceeded retry limit for this specific URL
+      if (lastFailedUrl === apiUrl && retryCount >= maxRetries) {
+        console.error(`Maximum retry attempts (${maxRetries}) reached for ${apiUrl}. Not attempting to load.`)
+        setLogs([])
+        setIsInitialLoading(false)
+        return
+      }
+
       const response = await fetch(apiUrl)
       if (!response.ok) {
         throw new Error(`HTTP ${response.status}: ${response.statusText}`)
       }
 
+      // Reset retry count on successful fetch
+      if (lastFailedUrl === apiUrl || retryCount > 0) {
+        setRetryCount(0)
+        setLastFailedUrl(null)
+      }
+
       const data: LogsApiResponse = await response.json()
 
       if (!data.logs) {
@@ -991,17 +1102,46 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
       }
     } catch (error) {
       console.error("Error loading logs:", error)
+
+      // Build the failed URL for tracking
+      const requestedFile = searchParams.get("file")
+      let logPath = ""
+      if (requestedFile && availableLogs.length > 0) {
+        const foundFile = availableLogs.find((f) => f.name === requestedFile)
+        logPath = foundFile?.path || currentLogFile
+      } else {
+        logPath = currentLogFile
+      }
+      const failedUrl = logPath
+        ? `/api/logs/${mode}?lines=1000&logPath=${encodeURIComponent(logPath)}`
+        : `/api/logs/${mode}?lines=1000`
+
+      // Track retry attempts
+      if (lastFailedUrl === failedUrl) {
+        const newRetryCount = retryCount + 1
+        setRetryCount(newRetryCount)
+
+        if (newRetryCount >= maxRetries) {
+          console.error(`Maximum retry attempts (${maxRetries}) reached for initial load of ${failedUrl}.`)
+        }
+      } else {
+        setLastFailedUrl(failedUrl)
+        setRetryCount(1)
+      }
+
       setLogs([])
+    } finally {
+      setIsInitialLoading(false)
     }
-  }, [loadAvailableLogs, searchParams, availableLogs, currentLogFile, mode])
+  }, [loadAvailableLogs, searchParams, availableLogs, currentLogFile, mode, retryCount, lastFailedUrl, maxRetries])
 
   useEffect(() => {
-    // Only load logs if we don't have initial data or mode actually changed
-    const _currentMode = searchParams.get("mode") || "tail"
+    // Only load logs if we don't have initial data and haven't tried loading yet
     const hasInitialData = initialData?.logs && initialData?.logs.length > 0
 
-    if (!hasInitialData && !logs.length) {
+    if (!hasLoadedInitial && !hasInitialData && !logs.length) {
       // No server-side data and no client data - load fresh
+      setHasLoadedInitial(true)
       loadInitialLogs()
     } else if (hasInitialData && logs.length === 0) {
       // We have server-side data but client state is empty - use server data
@@ -1022,22 +1162,10 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
         setTimeout(scrollToBottom, 100)
         setTimeout(scrollToBottom, 300)
       }
-    } else if (mode === "tail" && isAtBottom) {
-      // Set up polling timer for new logs if we're in tail mode
-      setIsInitialLoading(false)
-      pollIntervalRef.current = setInterval(() => {
-        pollForNewLogs()
-      }, 3000)
     }
-  }, [
-    mode,
-    initialData?.logs,
-    isAtBottom, // No server-side data and no client data - load fresh
-    loadInitialLogs,
-    logs.length,
-    pollForNewLogs,
-    searchParams.get
-  ]) // Only depend on mode to avoid infinite loops
+  }, [mode, initialData, logs.length, hasLoadedInitial, loadInitialLogs]) // eslint-disable-line react-hooks/exhaustive-deps
+  // CRITICAL: loadInitialLogs must NEVER be added to dependencies - it will cause infinite loops
+  // The linter will complain but this is intentional. DO NOT "FIX" THIS.
 
   // Separate effect to handle scrolling after logs are rendered
   useEffect(() => {
@@ -1291,17 +1419,15 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
   }, [logs, filters, userAgentFilters, availableUserAgents])
 
   return (
-    <div className="h-screen bg-gray-50 dark:bg-gray-900 flex flex-col transition-colors">
+    <div className="h-screen bg-background text-foreground flex flex-col transition-colors">
       {/* Header - Fixed */}
-      <div className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 flex-none z-10">
+      <div className="bg-card shadow-sm border-b border-border flex-none z-10">
         <div className="max-w-7xl mx-auto px-4 py-3">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2 sm:gap-4">
               <div className="flex items-center gap-1">
-                <h1 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white whitespace-nowrap">
-                  dev3000
-                </h1>
-                <span className="text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">(v{version})</span>
+                <h1 className="text-xl sm:text-2xl font-bold whitespace-nowrap">dev3000</h1>
+                <span className="text-xs text-muted-foreground whitespace-nowrap">(v{version})</span>
               </div>
               {/* Log File Selector */}
               {availableLogs.length > 1 ? (
@@ -1309,19 +1435,13 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                   <button
                     type="button"
                     onClick={() => setShowLogSelector(!showLogSelector)}
-                    className="flex items-center gap-2 px-3 py-1 text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md transition-colors"
+                    className="flex items-center gap-2 px-3 py-1 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
                   >
                     <span className="font-mono text-xs whitespace-nowrap">
                       {isInitialLoading && !currentLogFile ? (
-                        <div
-                          className="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"
-                          style={{ width: "220px" }}
-                        />
+                        <div className="h-4 bg-muted rounded animate-pulse" style={{ width: "220px" }} />
                       ) : currentLogFile ? (
-                        // Show basename for all files
-                        currentLogFile
-                          .split("/")
-                          .pop()
+                        "Current"
                       ) : (
                         "No log file"
                       )}
@@ -1337,9 +1457,9 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                   </button>
                   {/* Dropdown */}
                   {showLogSelector && availableLogs.length > 1 && (
-                    <div className="absolute top-full left-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg z-20 min-w-80">
+                    <div className="absolute top-full left-0 mt-1 bg-card border border-border rounded-md shadow-lg z-20 min-w-80">
                       <div className="py-1 max-h-60 overflow-y-auto">
-                        <div className="px-3 py-2 text-xs font-medium text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-600">
+                        <div className="px-3 py-2 text-xs font-medium text-muted-foreground border-b border-border">
                           {projectName} logs ({availableLogs.length})
                         </div>
                         {availableLogs.map((logFile) => (
@@ -1350,13 +1470,13 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                               setShowLogSelector(false)
                               router.push(`/logs?file=${encodeURIComponent(logFile.name)}&mode=${mode}`)
                             }}
-                            className={`w-full text-left px-3 py-2 text-sm hover:bg-gray-50 flex items-center justify-between ${
-                              logFile.isCurrent ? "bg-blue-50 text-blue-900" : "text-gray-700"
+                            className={`w-full text-left px-3 py-2 text-sm hover:bg-accent flex items-center justify-between ${
+                              logFile.isCurrent ? "bg-primary/10 text-primary" : "text-foreground"
                             }`}
                           >
                             <div className="flex flex-col">
                               <span className="font-mono text-xs">{logFile.name}</span>
-                              <span className="text-xs text-gray-500">
+                              <span className="text-xs text-muted-foreground">
                                 {new Date(logFile.mtime).toLocaleString()} • {Math.round(logFile.size / 1024)}KB
                               </span>
                             </div>
@@ -1384,8 +1504,29 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                 </div>
               )}
 
-              {/* Entries count */}
-              {logs.length > 0 && <span className="text-sm text-gray-500 hidden sm:inline">{logs.length} entries</span>}
+              {/* Entries count with clear button */}
+              {logs.length > 0 && (
+                <div className="flex items-center gap-1 hidden sm:flex">
+                  <span className="text-sm text-muted-foreground">{logs.length} entries</span>
+                  {currentLogFile && !isInitialLoading && (
+                    <button
+                      type="button"
+                      onClick={handleRotateLog}
+                      disabled={isRotatingLog}
+                      className="p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                      title="Clear logs (rotate current log to archive and start fresh)"
+                    >
+                      {isRotatingLog ? (
+                        <div className="w-3 h-3 border border-current border-t-transparent rounded-full animate-spin" />
+                      ) : (
+                        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                      )}
+                    </button>
+                  )}
+                </div>
+              )}
 
               {/* Buffered logs indicator */}
               {logBuffer.length > 0 && !isAtBottom && (
@@ -1393,19 +1534,6 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                   +{logBuffer.length} buffered
                 </span>
               )}
-
-              {/* Clear button - always visible when we have a current log file */}
-              {currentLogFile && !isInitialLoading && (
-                <button
-                  type="button"
-                  onClick={handleRotateLog}
-                  disabled={isRotatingLog}
-                  className="px-2 py-1 text-xs bg-orange-100 text-orange-700 hover:bg-orange-200 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                  title="Clear logs (rotate current log to archive and start fresh)"
-                >
-                  {isRotatingLog ? "..." : "Clear"}
-                </button>
-              )}
             </div>
 
             {/* Mode Toggle */}
@@ -1472,7 +1600,7 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                                         ? "bg-blue-100 text-blue-800"
                                         : event.type === "SCROLL"
                                           ? "bg-green-100 text-green-800"
-                                          : "bg-gray-100 text-gray-700"
+                                          : "bg-muted text-muted-foreground"
                                     }`}
                                   >
                                     {event.type}
@@ -1501,7 +1629,7 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                 <button
                   type="button"
                   onClick={() => setShowFilters(!showFilters)}
-                  className="flex items-center gap-1 px-3 py-1 rounded text-sm font-medium transition-colors whitespace-nowrap bg-gray-100 text-gray-700 hover:bg-gray-200"
+                  className="flex items-center gap-1 px-3 py-1 rounded text-sm font-medium transition-colors whitespace-nowrap bg-muted text-muted-foreground hover:bg-muted/80"
                 >
                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
@@ -1515,14 +1643,14 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                 </button>
                 {/* Filter Dropdown */}
                 {showFilters && (
-                  <div className="absolute top-full right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg z-20 min-w-48">
+                  <div className="absolute top-full right-0 mt-1 bg-card border border-border rounded-md shadow-lg z-20 min-w-48">
                     <div className="py-2">
-                      <div className="px-3 py-2 text-xs font-medium text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
+                      <div className="px-3 py-2 text-xs font-medium text-muted-foreground border-b border-border">
                         Log Types
                       </div>
 
                       {/* Server Logs */}
-                      <label className="flex items-center justify-between px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer">
+                      <label className="flex items-center justify-between px-3 py-2 text-sm hover:bg-accent cursor-pointer">
                         <div className="flex items-center gap-2">
                           <input
                             type="checkbox"
@@ -1533,17 +1661,17 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                                 server: e.target.checked
                               }))
                             }
-                            className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                            className="rounded border-input text-primary focus:ring-ring"
                           />
-                          <span className="text-gray-900 dark:text-gray-100">Server</span>
+                          <span className="text-foreground">Server</span>
                         </div>
-                        <span className="text-xs text-gray-400">
+                        <span className="text-xs text-muted-foreground">
                           {logs.filter((l) => l.source === "SERVER").length}
                         </span>
                       </label>
 
                       {/* Browser Logs */}
-                      <label className="flex items-center justify-between px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer">
+                      <label className="flex items-center justify-between px-3 py-2 text-sm hover:bg-accent cursor-pointer">
                         <div className="flex items-center gap-2">
                           <input
                             type="checkbox"
@@ -1554,18 +1682,18 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                                 browser: e.target.checked
                               }))
                             }
-                            className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                            className="rounded border-input text-primary focus:ring-ring"
                           />
-                          <span className="text-gray-900 dark:text-gray-100">Browser</span>
+                          <span className="text-foreground">Browser</span>
                         </div>
-                        <span className="text-xs text-gray-400">
+                        <span className="text-xs text-muted-foreground">
                           {logs.filter((l) => l.source === "BROWSER").length}
                         </span>
                       </label>
 
                       {/* User Agent Sub-filters */}
                       {availableUserAgents.length > 1 && filters.browser && (
-                        <div className="ml-6 border-l border-gray-200 dark:border-gray-600 pl-2">
+                        <div className="ml-6 border-l border-border pl-2">
                           {availableUserAgents.map((ua) => {
                             const shortUA = ua.includes("Chrome")
                               ? "Chrome"
@@ -1579,7 +1707,7 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                             return (
                               <label
                                 key={ua}
-                                className="flex items-center justify-between px-2 py-1 text-xs hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
+                                className="flex items-center justify-between px-2 py-1 text-xs hover:bg-accent cursor-pointer"
                               >
                                 <div className="flex items-center gap-2">
                                   <input
@@ -1591,11 +1719,11 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                                         [ua]: e.target.checked
                                       }))
                                     }
-                                    className="rounded border-gray-300 text-blue-600 focus:ring-blue-500 w-3 h-3"
+                                    className="rounded border-input text-primary focus:ring-ring w-3 h-3"
                                   />
-                                  <span className="text-gray-700 dark:text-gray-300">{shortUA}</span>
+                                  <span className="text-foreground">{shortUA}</span>
                                 </div>
-                                <span className="text-xs text-gray-400">
+                                <span className="text-xs text-muted-foreground">
                                   {logs.filter((l) => l.source === "BROWSER" && l.userAgent === ua).length}
                                 </span>
                               </label>
@@ -1605,7 +1733,7 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                       )}
 
                       {/* Interaction Logs */}
-                      <label className="flex items-center justify-between px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer">
+                      <label className="flex items-center justify-between px-3 py-2 text-sm hover:bg-accent cursor-pointer">
                         <div className="flex items-center gap-2">
                           <input
                             type="checkbox"
@@ -1616,17 +1744,17 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                                 interaction: e.target.checked
                               }))
                             }
-                            className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                            className="rounded border-input text-primary focus:ring-ring"
                           />
-                          <span className="text-gray-900 dark:text-gray-100">Interaction</span>
+                          <span className="text-foreground">Interaction</span>
                         </div>
-                        <span className="text-xs text-gray-400">
+                        <span className="text-xs text-muted-foreground">
                           {logs.filter((l) => l.message.includes("[INTERACTION]")).length}
                         </span>
                       </label>
 
                       {/* Screenshot Logs */}
-                      <label className="flex items-center justify-between px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer">
+                      <label className="flex items-center justify-between px-3 py-2 text-sm hover:bg-accent cursor-pointer">
                         <div className="flex items-center gap-2">
                           <input
                             type="checkbox"
@@ -1637,11 +1765,11 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                                 screenshot: e.target.checked
                               }))
                             }
-                            className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                            className="rounded border-input text-primary focus:ring-ring"
                           />
-                          <span className="text-gray-900 dark:text-gray-100">Screenshot</span>
+                          <span className="text-foreground">Screenshot</span>
                         </div>
-                        <span className="text-xs text-gray-400">
+                        <span className="text-xs text-muted-foreground">
                           {logs.filter((l) => l.message.includes("[SCREENSHOT]")).length}
                         </span>
                       </label>
@@ -1649,7 +1777,8 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                   </div>
                 )}
               </div>
-              <div className="flex items-center bg-gray-100 rounded-md p-1">
+              {/* Head/Tail toggle - commented out for now as it's too noisy */}
+              {/* <div className="flex items-center bg-muted rounded-md p-1">
                 <button
                   type="button"
                   onClick={() => {
@@ -1661,7 +1790,9 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                     }
                   }}
                   className={`px-2 sm:px-3 py-1 rounded text-xs sm:text-sm font-medium transition-colors whitespace-nowrap ${
-                    mode === "head" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"
+                    mode === "head"
+                      ? "bg-background text-foreground shadow-sm"
+                      : "text-muted-foreground hover:text-foreground"
                   }`}
                 >
                   Head
@@ -1677,41 +1808,16 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
                     }
                   }}
                   className={`px-2 sm:px-3 py-1 rounded text-xs sm:text-sm font-medium transition-colors whitespace-nowrap ${
-                    mode === "tail" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"
+                    mode === "tail"
+                      ? "bg-background text-foreground shadow-sm"
+                      : "text-muted-foreground hover:text-foreground"
                   }`}
                 >
                   Tail
                 </button>
-              </div>
+              </div> */}
               {/* Dark Mode Toggle - moved to last item */}
-              <button
-                type="button"
-                onClick={() => setDarkMode(!darkMode)}
-                className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ml-2"
-                title={darkMode ? "Switch to light mode" : "Switch to dark mode"}
-              >
-                {darkMode ? (
-                  // Sun icon for light mode
-                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
-                    />
-                  </svg>
-                ) : (
-                  // Moon icon for dark mode
-                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
-                    />
-                  </svg>
-                )}
-              </button>
+              <DarkModeToggle darkMode={darkMode} setDarkMode={setDarkMode} className="ml-2" />
             </div>
           </div>
         </div>
@@ -1722,27 +1828,45 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
         <div ref={containerRef} className="max-w-7xl mx-auto px-4 py-6 h-full overflow-y-auto" onScroll={handleScroll}>
           {isInitialLoading ? (
             <div className="text-center py-12">
-              <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-              <div className="text-gray-500 text-sm mt-4">Loading logs...</div>
+              <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+              <div className="text-muted-foreground text-sm mt-4">Loading logs...</div>
             </div>
           ) : logs.length === 0 ? (
             <div className="text-center py-12">
-              <div className="text-gray-400 dark:text-gray-500 text-lg">📝 No logs yet</div>
-              <div className="text-gray-500 dark:text-gray-400 text-sm mt-2">
-                Logs will appear here as your development server runs
+              <div className="text-muted-foreground text-lg">📝 No logs yet</div>
+              <div className="text-muted-foreground text-sm mt-2">
+                {retryCount >= maxRetries ? (
+                  <>
+                    <p className="text-red-500 mb-2">Failed to load logs after {maxRetries} attempts.</p>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setRetryCount(0)
+                        setLastFailedUrl(null)
+                        setHasLoadedInitial(false)
+                        loadInitialLogs()
+                      }}
+                      className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                    >
+                      Retry
+                    </button>
+                  </>
+                ) : (
+                  "Logs will appear here as your development server runs"
+                )}
               </div>
             </div>
           ) : filteredLogs.length === 0 ? (
             <div className="text-center py-12">
-              <div className="text-gray-400 dark:text-gray-500 text-lg">🔍 No logs match current filters</div>
-              <div className="text-gray-500 dark:text-gray-400 text-sm mt-2">
+              <div className="text-muted-foreground text-lg">🔍 No logs match current filters</div>
+              <div className="text-muted-foreground text-sm mt-2">
                 Try adjusting your filter settings to see more logs
               </div>
             </div>
           ) : (
             <div className="space-y-1 pb-4">
               {filteredLogs.map((entry, index) => (
-                <LogEntryComponent key={`${entry.timestamp}-${index}`} entry={entry} />
+                <LogEntryComponent key={`${entry.timestamp}-${index}`} entry={entry} darkMode={darkMode} />
               ))}
               <div ref={bottomRef} />
             </div>
@@ -1751,23 +1875,16 @@ export default function LogsClient({ version, initialData }: LogsClientProps) {
       </div>
 
       {/* Footer - Fixed */}
-      <div className="border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex-none">
+      <div className="border-t border-border bg-muted/50 flex-none">
         <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
           <div className="flex items-center gap-3">
             {lastFetched && (
-              <span className="text-xs text-gray-400 dark:text-gray-500 font-mono">
+              <span className="text-xs text-muted-foreground font-mono">
                 Last updated {lastFetched.toLocaleTimeString()}
               </span>
             )}
             {currentLogFile && (
-              <a
-                href={`file://${currentLogFile}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1"
-              >
-                Raw Log ↗
-              </a>
+              <span className="text-xs text-muted-foreground font-mono break-all">{currentLogFile}</span>
             )}
           </div>